:root{
  --dark:#242a33;--dark-2:#1b2027;--orange:#f7931e;--orange-d:#e07d0a;--yellow:#ffc20e;
  --blue:#29abe2;--blue-d:#1f8fbf;--ink:#22252a;--muted:#7b8494;--line:#e7e9ee;--bg:#f4f6fa;
  --green:#16a34a;--red:#dc2626;--shadow:0 8px 24px rgba(24,32,54,.08);--grad:linear-gradient(135deg,var(--orange),var(--yellow));
}
*{box-sizing:border-box;margin:0;padding:0;font-family:"Cairo",system-ui,sans-serif}
body{background:var(--bg);color:var(--ink);line-height:1.6}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}

/* sidebar */
.side{background:var(--dark);color:#cfd4dd;position:sticky;top:0;height:100vh;overflow:auto}
.side__brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.2rem;border-bottom:1px solid #333a45}
.side__brand img{height:34px}
.side__brand b{color:#fff;font-size:1.05rem}
.side__brand small{display:block;color:var(--orange);font-size:.72rem;font-weight:800}
.side__nav{padding:.7rem}
.side__link{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:10px;font-weight:700;font-size:.92rem;color:#cfd4dd;margin-bottom:.2rem;cursor:pointer}
.side__link .ic{font-size:1.1rem;width:22px;text-align:center}
.side__link:hover{background:#2e353f;color:#fff}
.side__link.on{background:var(--grad);color:#231a08}
.side__foot{padding:1rem;font-size:.72rem;color:#7b8494;border-top:1px solid #333a45;margin-top:1rem}
.side__foot a{color:#dbeafe}

/* main */
.main{min-width:0;display:flex;flex-direction:column}
.top{background:#fff;border-bottom:1px solid var(--line);padding:.9rem 1.4rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.top h1{font-size:1.3rem}
.top__act{display:flex;gap:.6rem;align-items:center}
.content{padding:1.4rem;flex:1}

/* buttons */
.btn{border:none;border-radius:10px;padding:.6rem 1.1rem;font-weight:800;font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem;transition:.15s}
.btn--p{background:var(--grad);color:#231a08;box-shadow:0 6px 16px rgba(247,147,30,.3)}
.btn--p:hover{filter:brightness(1.05)}
.btn--g{background:#fff;border:1.5px solid var(--line);color:var(--dark)}
.btn--g:hover{border-color:var(--blue);color:var(--blue-d)}
.btn--sm{padding:.4rem .8rem;font-size:.82rem}
.btn--danger{background:#fff;border:1.5px solid #f3c0bd;color:var(--red)}
.btn--icon{background:none;border:none;font-size:1rem;color:var(--muted);padding:.3rem}
.btn--icon:hover{color:var(--red)}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin-bottom:1.4rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem;box-shadow:var(--shadow)}
.kpi__ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:.6rem}
.kpi__label{color:var(--muted);font-size:.82rem;font-weight:700}
.kpi__val{font-size:1.55rem;font-weight:900;margin-top:.1rem}
.kpi__val i{font-size:.8rem;color:var(--muted);font-style:normal;font-weight:700}
.kpi--pos .kpi__val{color:var(--green)} .kpi--neg .kpi__val{color:var(--red)}

/* panels */
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:1.2rem;margin-bottom:1.4rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.panel__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.panel__h h3{font-size:1.05rem}

/* chart */
.chart{display:flex;align-items:flex-end;gap:.7rem;height:180px;padding-top:1rem}
.chart__col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4rem;height:100%;justify-content:flex-end}
.chart__bars{display:flex;gap:3px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.chart__bar{width:16px;border-radius:5px 5px 0 0;min-height:3px}
.chart__bar--s{background:var(--blue)} .chart__bar--p{background:var(--orange)}
.chart__x{font-size:.72rem;color:var(--muted);font-weight:700}
.legend{display:flex;gap:1rem;font-size:.78rem;color:var(--muted);font-weight:700;margin-top:.5rem}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-inline-end:.3rem}

/* breakdown */
.brk{display:flex;flex-direction:column;gap:.7rem}
.brk__row{display:flex;align-items:center;gap:.7rem}
.brk__name{font-weight:700;font-size:.88rem;min-width:70px}
.brk__bar{flex:1;height:9px;background:#eef1f5;border-radius:6px;overflow:hidden}
.brk__fill{height:100%;background:var(--grad);border-radius:6px}
.brk__val{font-weight:800;font-size:.85rem;min-width:80px;text-align:end}

/* table */
.tablewrap{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
thead th{background:#f6f8fb;text-align:start;padding:.8rem 1rem;font-weight:800;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--line)}
tbody td{padding:.75rem 1rem;border-bottom:1px solid #f0f1f4;white-space:nowrap}
tbody tr:hover{background:#fafbfc}
tbody tr:last-child td{border-bottom:none}
.num{font-weight:800;font-variant-numeric:tabular-nums}
.pos{color:var(--green)} .neg{color:var(--red)}
.tag{font-size:.72rem;font-weight:800;padding:.2rem .6rem;border-radius:20px;background:#eef6fb;color:var(--blue-d)}
.tag--flight{background:#e8f1fd;color:#1e5cb8}.tag--hotel{background:#eef6ee;color:#166534}
.tag--package{background:#fef0e6;color:var(--orange-d)}.tag--visa{background:#f3e8fd;color:#7c3aed}
.tag--transport{background:#e6f7f4;color:#0f766e}.tag--other{background:#eef1f5;color:#555}
.pill{font-size:.72rem;font-weight:800;padding:.2rem .55rem;border-radius:20px}
.pill--in{background:#eef6ee;color:var(--green)}.pill--out{background:#fdeeee;color:var(--red)}
.empty{text-align:center;color:var(--muted);padding:2.5rem;font-weight:700}

/* toolbar above table */
.tbar{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.tbar input,.tbar select{border:1.5px solid var(--line);border-radius:10px;padding:.55rem .8rem;font-family:inherit;font-weight:700;font-size:.88rem;outline:none}
.tbar input:focus{border-color:var(--blue)}
.tbar__sp{margin-inline-start:auto}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:2vh 1rem;background:rgba(20,26,34,.55);backdrop-filter:blur(2px)}
.modal[hidden]{display:none}
/* 🔴 THE ACTION BAR USED TO SCROLL AWAY WITH THE CONTENT. The card was one `overflow:auto` box, so
   a tall dialog — the quick-create form on a 390px phone, or any dialog that grew a warning —
   pushed «حفظ» below the fold, and the employee saw a form with no way to submit it until they
   scrolled blindly. Now the card is a column: header and footer are fixed, and ONLY the body
   scrolls. Measured by the §46 gate at 390 / 768 / 1440 on every dialog. */
.modal__card{background:#fff;border-radius:16px;width:min(620px,100%);max-height:94vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);animation:pop .2s ease}
.modal__card>.modal__h,.modal__card>.modal__f,.modal__card>.modal__ft{flex:0 0 auto}
@keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.modal__h{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.modal__h h3{font-size:1.15rem}
.modal__x{background:none;border:none;font-size:1.5rem;color:var(--muted);cursor:pointer}
/* The sheets close with `<button class="x">✕</button>`, which had no rule at all — it rendered as
   a default grey chrome button, and 29px of it, on a phone. It is the one control a thumb reaches
   for first, so it gets a real 34px target and the same quiet styling as the rest of the header. */
.modal__h .x{background:none;border:1px solid transparent;border-radius:10px;color:var(--muted);
  font-size:1.05rem;line-height:1;cursor:pointer;min-width:34px;min-height:34px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.modal__h .x:hover{background:var(--bg);color:var(--ink)}
.modal__h .x:focus-visible{outline:2px solid var(--blue-d);outline-offset:2px}
.modal__b{padding:1.3rem;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal__f{display:flex;gap:.7rem;justify-content:flex-end;padding:1rem 1.3rem;border-top:1px solid var(--line)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
/* 🔴 TWO BUGS FIXED TOGETHER, both caused by this label being a flex COLUMN.
   1. `hidden` did nothing. `.form label` (specificity 0,1,1) beat the user-agent `[hidden]`
      rule, so «credit days» and the currency box on a percentage rule stayed on screen no matter
      what the code said — a field the form believes is hidden but the employee can still type in.
   2. The required asterisk became its own flex item and dropped to a line of its own, so every
      required field showed a stray red dot under its caption instead of «الاسم *».
   `display:block` gives both back: the caption and its asterisk flow inline, the control is a
   block below, and `[hidden]` wins again. */
.form label{display:block;min-width:0;font-size:.82rem;font-weight:800;color:var(--dark)}
.form label[hidden],.form [hidden]{display:none}
/* `min-width:0` on both: a grid item defaults to `min-width:auto`, and a number input's intrinsic
   width (caption + spinner) is wider than its column — which pushed the whole page 4px sideways. */
.form label>input:not([type=checkbox]):not([type=radio]),.form label>select,.form label>textarea{width:100%;min-width:0;max-width:100%;margin-top:.3rem}
/* A checkbox is NOT a full-width control. Without this exclusion the rule above stretched the box
   itself across the dialog and pushed its own label text out of the form. */
.form label.chk>input{width:16px;min-width:16px;margin-top:0;flex:0 0 auto}
.form label.chk{flex-wrap:wrap}
/* 🔴 `.full` used to mean «a LABEL that spans both columns». Every non-label full-width block in a
   dialog — the duplicate warning, the type-specific field group, an error box — therefore sat in
   ONE column and overflowed it. The class now means what it says for any child of `.form`. */
.form label.full,.form>.full{grid-column:1/-1;min-width:0}
.form input,.form select,.form textarea{border:1.5px solid var(--line);border-radius:10px;padding:.6rem .75rem;font-family:inherit;font-weight:700;font-size:.92rem;outline:none;background:#fff}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blue)}
.form .calc{grid-column:1/-1;background:#f6f8fb;border-radius:10px;padding:.8rem 1rem;display:flex;justify-content:space-between;font-weight:800}
.form .calc b{color:var(--orange-d)}

/* invoice print */
.inv{padding:2rem;color:#111}
.inv__top{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--dark);padding-bottom:1rem;margin-bottom:1.2rem}
.inv__logo{height:52px}
.inv__title{text-align:end}
.inv__title h2{font-size:1.6rem;color:var(--orange-d)}
.inv__meta{display:flex;justify-content:space-between;margin-bottom:1.2rem;font-size:.9rem}
.inv table{margin:1rem 0}
.inv__tot{margin-inline-start:auto;width:280px}
.inv__tot .r{display:flex;justify-content:space-between;padding:.35rem 0}
.inv__tot .tot{border-top:2px solid var(--dark);font-weight:900;font-size:1.15rem;margin-top:.3rem;padding-top:.5rem}
.inv__foot{margin-top:2rem;text-align:center;color:#666;font-size:.85rem;border-top:1px solid #ddd;padding-top:1rem}

@media(max-width:860px){
  .app{grid-template-columns:1fr}
  /* 🔴 THE TOP BAR DID NOT WRAP. With three actions and English labels it measured 407px inside a
     390px phone, which scrolls the WHOLE page sideways and pushes the primary button out of reach
     — a button outside the viewport is not a styling problem, it is an action nobody can take. */
  .top{flex-wrap:wrap;gap:.6rem;padding:.8rem 1rem}
  .top h1{font-size:1.1rem;min-width:0;overflow-wrap:anywhere}
  .top__act{flex-wrap:wrap;gap:.45rem}
  .top__act .btn{padding:.5rem .8rem;font-size:.84rem}
  .side{position:fixed;inset-inline-start:-260px;width:260px;z-index:60;transition:.25s}
  .side.open{inset-inline-start:0}
  .grid2{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .menu-btn{display:inline-flex!important}
}
.menu-btn{display:none}

@media print{
  body *{visibility:hidden}
  #print,#print *{visibility:visible}
  #print{position:absolute;inset:0;margin:0}
  .modal{background:none;position:static}.modal__h,.modal__f{display:none}
  /* Printing must not inherit the on-screen scroll box: a printed statement is as long as it is. */
  .modal__card{display:block;overflow:visible;max-height:none}
  .modal__b{overflow:visible;max-height:none}
}

/* ===== AI Workforce ===== */
.wf-dep{margin-bottom:1.4rem}
.wf-dep__h{font-size:1.05rem;margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem}
.wf-dep__h small{color:var(--muted);font-weight:700;font-size:.78rem}
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.wf-agent{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.5rem}
.wf-agent__h{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.wf-agent__h b{font-size:.95rem}
.wf-aut{font-size:.68rem;font-weight:800;padding:.2rem .5rem;border-radius:20px;white-space:nowrap}
.wf-agent__scope{font-size:.85rem;color:var(--dark)}
.wf-agent__bound{font-size:.78rem;color:var(--red);font-weight:700}
.wf-agent__foot{display:flex;gap:.5rem;align-items:center;margin-top:auto;padding-top:.3rem}
.wf-soon{font-size:.75rem;color:var(--muted);font-weight:700}
.wf-out{border:2px solid var(--orange);margin-bottom:1.4rem}
.wf-out__h{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.wf-out__h b{font-size:1.15rem}
.wf-out__h span{color:var(--muted);font-size:.85rem;font-weight:600}
.wf-find{display:flex;gap:.7rem;align-items:center;padding:.7rem .9rem;border-radius:11px;margin-bottom:.5rem;font-size:.9rem;background:#f6f8fb}
.wf-find--high{background:#fdeeee;border:1px solid #f3c0bd}
.wf-find--medium{background:#fff8ef;border:1px solid #f7c98a}
.wf-find--low{background:#f6f8fb;border:1px solid var(--line)}
.wf-find--ok{background:#eef6ee;border:1px solid #bfe3c4;color:#166534;font-weight:700}
.wf-ctrls{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.5rem}
.wf-ctrl{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;background:#f6f8fb;border-radius:9px;padding:.5rem .7rem}
.wf-ctrl__s{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;flex:0 0 auto}
.wf-ctrl__s.ok{background:var(--green)} .wf-ctrl__s.bad{background:var(--red)}

/* supplier commission tag + helper */
.tag--ok{background:#e7f7ee;color:#0f7a3d}
.muted{color:#7b8494;font-size:.85rem}

/* ===== AI workforce (real) — key banner, toggles, employee cards, chat ===== */
.spinner{display:inline-block;width:18px;height:18px;border:3px solid #d9dde3;border-top-color:var(--orange);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.fld{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.fld>span{font-weight:800;font-size:.82rem;color:var(--dark)}
.in{width:100%;padding:.6rem .7rem;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-weight:600;font-size:.9rem;outline:none;background:#fff}
.in:focus{border-color:var(--blue)}
textarea.in{resize:vertical;line-height:1.6}
.wf-key{margin-top:1rem;padding:.7rem 1rem;border-radius:10px;font-weight:700;font-size:.88rem}
.wf-key--ok{background:rgba(255,255,255,.15);color:#eafff3}
.wf-key--warn{background:rgba(255,196,14,.2);color:#ffe9b3;border:1px solid rgba(255,196,14,.4)}
.wf-master{display:flex;align-items:center;gap:.6rem;color:#fff;font-weight:800;font-size:.85rem}
.wf-sw{position:relative;display:inline-block;width:42px;height:24px;cursor:pointer;flex-shrink:0}
.wf-sw input{opacity:0;width:0;height:0}
.wf-sw span{position:absolute;inset:0;background:#c3c9d2;border-radius:999px;transition:.2s}
.wf-sw span:before{content:"";position:absolute;width:18px;height:18px;right:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.wf-sw input:checked+span{background:var(--green)}
.wf-sw input:checked+span:before{transform:translateX(-18px)}
.wf-sw--lg{width:48px;height:27px}.wf-sw--lg span:before{width:21px;height:21px}
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.wf-agent{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem;box-shadow:var(--shadow);transition:.15s}
.wf-agent--off{opacity:.62}
.wf-agent__h{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.wf-agent__h b{flex:1;font-size:.98rem}
.wf-agent__dep{font-size:.76rem;font-weight:800;color:var(--blue);background:#eef4fb;display:inline-block;padding:.15rem .6rem;border-radius:6px;margin-bottom:.5rem}
.wf-agent__scope{font-size:.85rem;color:var(--muted);line-height:1.6;margin-bottom:.8rem;min-height:2.6em}
.wf-agent__row{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.wf-lbl{font-size:.8rem;font-weight:800;color:var(--dark)}
.wf-sel{flex:1;padding:.4rem .6rem;border:1.5px solid var(--line);border-radius:9px;font-family:inherit;font-weight:700;font-size:.83rem;background:#fff}
.wf-agent__foot{display:flex;gap:.5rem}
.wf-appr{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem;border:1px solid var(--line);border-radius:11px;margin-bottom:.6rem;flex-wrap:wrap}
.wf-appr code{background:#f1f3f7;padding:.1rem .4rem;border-radius:5px;font-weight:700}
.wf-appr__r{font-size:.8rem;color:var(--muted);margin-top:.3rem}
.wf-appr__b{display:flex;gap:.5rem}
.wf-set{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.9rem;margin-bottom:1rem}
@media(max-width:720px){.wf-set{grid-template-columns:1fr}}
.aichat{position:fixed;inset:0;background:rgba(20,24,33,.5);display:flex;align-items:flex-end;justify-content:center;z-index:120;padding:0}
.aichat__bx{background:#f6f8fc;width:min(560px,100%);height:min(78vh,640px);border-radius:16px 16px 0 0;display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(0,0,0,.3)}
.aichat__hd{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.2rem;background:var(--grad,linear-gradient(120deg,#f7931e,#ffc20e));color:#231a08;border-radius:16px 16px 0 0}
.aichat__body{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.6rem}
.aichat__ft{display:flex;gap:.5rem;padding:.8rem 1rem;border-top:1px solid var(--line);background:#fff;border-radius:0 0 0 0}
.aimsg{max-width:82%;padding:.6rem .9rem;border-radius:14px;font-size:.9rem;line-height:1.65;white-space:pre-wrap}
.aimsg--u{align-self:flex-start;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.aimsg--a{align-self:flex-end;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.aimsg__note{margin-top:.4rem;font-size:.76rem;color:var(--orange);font-weight:800}
.zmodal__x{border:none;background:rgba(0,0,0,.12);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:800}

/* ===== suppliers: offline/online channel grouping ===== */
.sup-chan{margin-bottom:1.6rem}
.sup-chan__h{font-size:1.05rem;font-weight:900;color:var(--dark);margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:2px solid var(--blue)}
.tag--danger{background:#fdeaea;color:#c0392b}

/* ===== advanced analytics: horizontal breakdown bars ===== */
.abar{margin-bottom:.85rem}
.abar__row{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;margin-bottom:.3rem}
.abar__name{font-weight:800;color:var(--dark)}
.abar__val{font-weight:700;color:var(--muted);white-space:nowrap}
.abar__val small{color:var(--muted)}
.abar__track{background:#eef1f5;border-radius:999px;height:9px;overflow:hidden}
.abar__fill{height:100%;border-radius:999px;transition:width .3s}

/* Permission / capability chips — used by the staff screen and by the API-partner control plane.
   Small, neutral, and readable in a table cell: a list of verticals a partner supplies is a fact,
   not a call to action, so nothing here looks like a button. */
.permtag{display:inline-block;background:#eef1f5;color:var(--dark);border:1px solid var(--line);
  border-radius:999px;padding:.12rem .6rem;font-size:.74rem;font-weight:800;margin-inline-end:.3rem;margin-block:.1rem}
.permchk{display:inline-flex;align-items:center;gap:.45rem;background:#f6f8fb;border:1.5px solid var(--line);
  border-radius:10px;padding:.5rem .8rem;font-weight:700;font-size:.86rem;margin-block:.35rem;cursor:pointer}
.permchk:hover{border-color:var(--blue)}
.permchk input{accent-color:var(--blue);width:1rem;height:1rem;cursor:pointer}
.permrow{display:flex;flex-wrap:wrap;gap:.4rem;margin-block:.5rem}

/* Explanatory copy under a form or a table. Secondary by design: these paragraphs say what a
   number MEANS and what it will and will not change — an operator should be able to read past
   them at a glance and come back to them when a decision is hard. */
.note{color:var(--muted);font-size:.82rem;line-height:1.75;margin:.45rem 0}
.note b{color:var(--dark)}

/* ===== B2B PHASE 3 §48 — THE AGENCY FINANCE TAB ==============================================
   Six named figures on one grid. They are a grid and not a row of cards because §41's point is
   that they are SIX DIFFERENT ANSWERS, and a horizontal strip invites reading them as stages of
   one number. */
.agkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;margin:.9rem 0}
.agkpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.85rem .95rem;display:flex;flex-direction:column;gap:.15rem}
.agkpi>span{color:var(--muted);font-size:.78rem;font-weight:800}
.agkpi>b{font-size:1.25rem;font-weight:900;color:var(--dark)}
.agkpi>b small{font-size:.7rem;color:var(--muted);font-weight:700}
.agkpi>i{font-style:normal;color:var(--muted);font-size:.72rem;font-weight:700}
/* §70's before/after columns hold serialised state — `cash_balance: 56910 · entries_copied: 5` —
   which is one long unbroken token to a layout engine. Without this the text ran straight out of
   its cell and across the neighbouring columns, so the audit trail was unreadable exactly where it
   matters most. A `max-width` alone does not wrap; it has to be told it may break. */
.tablewrap td{overflow-wrap:anywhere;word-break:break-word}
@media(max-width:560px){.agkpis{grid-template-columns:1fr 1fr}.agkpi>b{font-size:1.05rem}}

/* ===== B2B PHASE 7 §92 — THE OPS SERVICING DESK (tested at 1440) ============================= */
.svch4{margin:1.1rem 0 .35rem;font-size:.92rem;font-weight:800;color:var(--dark)}
/* §56 — the safe-action strip. A row (rather than a button) is what an action the operator is not
   PERMITTED to run looks like: the label plus the key they are missing. An action that is not
   APPLICABLE is absent entirely, and EXECUTE is absent while the gate refuses — so nothing here is
   ever a button that cannot work. */
.svcacts{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.svcarow{display:flex;flex-direction:column;gap:.1rem;background:#f8fafc;border:1px dashed var(--line);
  border-radius:9px;padding:.4rem .7rem;min-width:180px}
.svcarow b{font-size:.84rem;font-weight:800;color:var(--muted)}
.svcarow small{font-size:.72rem;color:var(--muted)}
.svcarow code,.note code{background:#eef1f5;border-radius:5px;padding:0 .25rem;font-size:.76rem}
.note--bad{background:#fdf6f5;border-color:#f2c7c2;color:#8a3025}
.note--bad ul{font-weight:700}

/* ===== 🔴 `.tblwrap` / `.dt` — MARKUP THAT HAD NO STYLESHEET =================================
   B2B Phase 6 introduced `<div class="tblwrap"><table class="dt">` into this panel — twenty-five
   times — and neither class was ever defined here. They exist only in the B2B PORTAL's own inline
   stylesheet, so in the admin panel they were inert: `.tblwrap` was a plain block with no
   `overflow-x`, and a wide table therefore pushed the whole PAGE sideways instead of scrolling
   inside its own card.

   Measured while photographing the Phase 7 servicing screens: the document was 1845px wide in a
   1440px viewport on the servicing queue, and 2107px on the readiness matrix. That affects every
   Phase 6 screen that uses these classes (the review queue, the operational booking list, the
   consumption desk, the reconciliation board) — an operator had to scroll the entire layout, sidebar
   and all, to read the last column.

   Defined here to match what the markup already assumes, and deliberately NOT by rewriting the
   markup: `.tablewrap` (this file's own class) already carries `overflow:auto`, and the two are now
   consistent rather than one being silently broken.                                              */
.tblwrap{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  background:#fff;border:1px solid var(--line);border-radius:12px}
.tblwrap+.tblwrap,.tblwrap+.repchips{margin-top:.9rem}
.dt{width:100%;border-collapse:collapse;font-size:.86rem;min-width:640px}
.dt thead th{background:#f6f8fc;color:var(--muted);font-weight:800;text-align:start;
  padding:.65rem .8rem;font-size:.8rem;border-bottom:2px solid var(--line);white-space:nowrap}
.dt td{padding:.65rem .8rem;border-bottom:1px solid #eef1f5;vertical-align:middle;overflow-wrap:anywhere}
.dt tbody tr:last-child td{border-bottom:none}
.dt tbody tr:hover{background:#fafbfe}
.dt .num{text-align:start;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt .empty{color:var(--muted);text-align:center;padding:1.3rem;font-weight:700}
/* A servicing queue is twelve columns of facts; it needs the room, and the scroller is where the
   room comes from rather than the page. */
.dt--wide{min-width:1180px}
/* 🔴 `.modal__ft` was written into this panel from the B2B portal's vocabulary (this file calls it
   `.modal__f`) — the same category of mistake as `.tblwrap` above, and equally silent: the footer
   simply had no border, no padding and no alignment. Aliased so the next person who reaches for the
   portal's name gets a styled footer instead of an unstyled div. */
.modal__ft{display:flex;gap:.7rem;justify-content:flex-end;padding:1rem 1.3rem;border-top:1px solid var(--line);flex-wrap:wrap}

/* ===== BACK OFFICE PHASE 1 — CUSTOMERS / CUSTOMER 360 ========================================
   §10/§42/§43. Two screens, one vocabulary. Built on the panel's own tokens (`--line`, `--muted`,
   `--blue`) rather than new colours, so this section reads as part of the same product.          */

/* §31 — an LTR run inside an RTL sentence. `<bdi dir="ltr">` isolates it; this only stops the
   browser from hyphenating a reference and keeps digits tabular so a column of them lines up. */
/* `nowrap` as well as isolation: a reference allowed to wrap mid-run comes back as «CUS-2026-» on
   one line and «00016» on the next, reordered around the Arabic around it — which reads as a
   different number. A reference is one token or it is wrong. */
.ltr{font-variant-numeric:tabular-nums;unicode-bidi:isolate;white-space:nowrap}
.cmuted{color:var(--muted);font-size:.78rem;font-weight:700}
.clink{color:var(--blue-d);font-weight:800;text-decoration:none}
.clink:hover{text-decoration:underline}
.clink small{display:block}
/* The reference belongs UNDER the name, not glued to the end of it: «عبدالله الحربيCUS-2026-00010»
   read as one string in the first build of this table. */
.dt td .clink+small{display:block;margin-top:.15rem}
.req{color:var(--red)}

/* §43 — a visible focus ring on everything reachable by keyboard. The panel's own controls
   inherit the browser default, which several resets here suppress; this restores one that is
   actually visible on white AND on the blue buttons. */
.ccard a:focus-visible,.ccard button:focus-visible,.tbar input:focus-visible,.tbar select:focus-visible,
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible,.clink:focus-visible,
.chk input:focus-visible{outline:3px solid #f7931e;outline-offset:2px;border-radius:6px}

.chk{display:flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:800;color:var(--dark);white-space:nowrap}
/* `.form label` is a COLUMN, and it out-specifies `.chk` — so a checkbox inside a dialog form sat
   on its own line, centred, above its own text. A checkbox and its label are one line. */
.form label.chk{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;white-space:normal}
.form label.chk input{flex:0 0 auto}
.chk input{width:16px;height:16px;accent-color:var(--blue)}

/* status pills — the three states of §2, and nothing else ever renders here */
.cpill{font-size:.72rem;font-weight:800;padding:.2rem .6rem;border-radius:20px;white-space:nowrap}
.cpill--active{background:#eef6ee;color:#166534}
.cpill--inactive{background:#eef1f5;color:#555}
.cpill--blocked{background:#fdeeee;color:#b3261e}

/* §14 — the duplicate warning. Amber, never red: it is not an error, it is a question. */
/* `min-width:0` because these live inside a CSS GRID: a grid item's default `min-width:auto`
   refuses to shrink below its content, so one long legal name made the whole form wider than the
   dialog instead of wrapping. */
.cwarn{background:#fff8ec;border:1.5px solid #f4d19a;border-radius:12px;padding:.85rem 1rem;font-size:.85rem;font-weight:700;color:#7a4b06;min-width:0;overflow-wrap:anywhere}
.form>#q_dup,.form>#q_extra,.form>.cwarn{min-width:0}
.cwarn--bad{background:#fdf6f5;border-color:#f2c7c2;color:#8a3025}
.cwarn ul{margin:.4rem 0 0;padding-inline-start:1.2rem}
.cwarn__list{display:flex;flex-direction:column;gap:.45rem;margin:.6rem 0}
.cwarn__row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:#fff;border:1px solid #f0e2c8;border-radius:9px;padding:.45rem .7rem}
.cwarn__row>span:first-child{flex:1;min-width:140px}
.cwarn small{display:block;margin-top:.4rem;font-weight:700;opacity:.85}

/* ---- §9 the 360 header ---- */
.chead{display:grid;grid-template-columns:2fr 1fr;gap:1rem;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:1.15rem 1.3rem;box-shadow:var(--shadow);margin-bottom:1.1rem}
.chead__id h2{font-size:1.35rem;line-height:1.35;margin:0}
.chead__en{color:var(--muted);font-size:.86rem;font-weight:700;margin-top:.15rem}
.chead__meta{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.55rem}
.chead__contact{background:#f6f8fb;border-radius:12px;padding:.7rem .9rem;font-size:.84rem;font-weight:700;align-self:start}
.chead__contact b{display:block;font-size:.92rem}
.chead__contact small{display:block;color:var(--muted);font-weight:700}
/* §26 — the quick actions span the full width so a disabled one is read as «not yet», not as a
   crowded afterthought. */
.chead__acts{grid-column:1/-1;display:flex;gap:.5rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:.85rem}
.chead__acts button[disabled]{opacity:.55;cursor:not-allowed}

/* ---- §10 the section cards: one page, collapsible in spirit, never eight tabs ---- */
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.ccard{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.ccard__h{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--line);background:#fbfcfe}
.ccard__h h3{font-size:.98rem;margin:0}
.ccard__h h3 small{color:var(--muted);font-weight:700}
.ccard__b{padding:1rem 1.1rem}
/* the wide sections get the whole row — a sales table in half a column is unreadable */
.ccard:nth-child(3),.ccard:nth-child(9){grid-column:1/-1}

.cflds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1rem;margin:0}
.cfld dt{color:var(--muted);font-size:.74rem;font-weight:800;margin-bottom:.1rem}
.cfld dd{margin:0;font-size:.9rem;font-weight:800;color:var(--dark);overflow-wrap:anywhere}

.clist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.clist li{display:flex;justify-content:space-between;align-items:center;gap:.7rem;flex-wrap:wrap;
  background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;font-size:.86rem;font-weight:700}
.clist li>span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;min-width:0;flex:1}
.clist li b{font-size:.9rem}

/* §44 — an empty state says what is missing AND why, never just «no data». */
.cempty{color:var(--muted);font-weight:700;font-size:.86rem;text-align:center;padding:1.4rem .6rem;line-height:1.7}
.cempty small{display:block;margin-top:.3rem;font-size:.76rem;opacity:.85}

/* §20 — the guidance lives ON the note box, where somebody about to paste a card number is
   actually looking. */
.cnotehint{background:#eef4ff;border:1px solid #cfe0fb;border-radius:10px;padding:.6rem .8rem;
  font-size:.79rem;font-weight:700;color:#1e4d8f;margin-bottom:.8rem;line-height:1.6}
.cnotes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.cnotes li{background:#fffdf6;border:1px solid #f0e7cf;border-radius:10px;padding:.6rem .8rem}
.cnotes p{margin:0 0 .25rem;font-size:.86rem;font-weight:700;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}

/* §22 — the timeline. A rail, so the eye follows the order without a date column. */
.ctl{list-style:none;margin:0;padding:0;position:relative}
.ctl li{position:relative;padding-inline-start:1.1rem;padding-bottom:.75rem;font-size:.85rem;font-weight:700}
.ctl li::before{content:"";position:absolute;inset-inline-start:0;top:.4rem;width:8px;height:8px;
  border-radius:50%;background:var(--blue)}
.ctl li::after{content:"";position:absolute;inset-inline-start:3.5px;top:1.1rem;bottom:0;width:1px;background:var(--line)}
.ctl li:last-child{padding-bottom:0}
.ctl li:last-child::after{display:none}
.ctl li span{display:block;color:var(--muted);font-weight:700;font-size:.8rem;overflow-wrap:anywhere}
.ctl li small{display:block}

/* §42 — tablet, then phone. The 360 collapses to one column and the header stacks; nothing is
   hidden, because an employee looking a customer up on a phone needs the same facts. */
@media(max-width:1100px){
  .cgrid{grid-template-columns:1fr}
  .ccard:nth-child(3),.ccard:nth-child(9){grid-column:auto}
}
/* §42 — the customer TABLE on a phone. Seven columns in 390px is a horizontal scroll nobody
   performs; the two an employee looking somebody up does not need (owner, last activity) are
   dropped at phone width. Scoped to `.ctable` so no other table in the panel loses a column. */
@media(max-width:600px){
  .ctable th:nth-child(4),.ctable td:nth-child(4),
  .ctable th:nth-child(6),.ctable td:nth-child(6){display:none}
}
@media(max-width:760px){
  .chead{grid-template-columns:1fr;padding:1rem}
  .chead__contact{align-self:stretch}
  .cflds{grid-template-columns:1fr}
  .tbar input{min-width:0;width:100%}
  .tbar select{flex:1}
  /* A form of two columns at 390px puts three characters per field. */
  .form{grid-template-columns:1fr}
  .form label.full{grid-column:auto}
}

/* ===== BACK OFFICE PHASE 2 — THE CONTRACT ENGINE SCREENS ====================================
   §27/§52/§61. Built on the same tokens and the same card vocabulary as the customer screens, so
   the two phases read as one product rather than two features bolted together.                 */

/* status pills — the seven of §1, each visually distinct because «موقوف» and «مُنهى» must not be
   mistaken for one another at a glance on a list of forty contracts. */
.kpill--draft{background:#eef1f5;color:#555}
.kpill--pending{background:#fff4e5;color:#92400e}
.kpill--active{background:#eef6ee;color:#166534}
.kpill--suspended{background:#fef3c7;color:#854d0e}
.kpill--expired{background:#eef1f5;color:#6b7280}
.kpill--terminated{background:#fdeeee;color:#b3261e}

/* §27 — the five steps, as a progress rail rather than a wizard chrome. */
.ksteps{list-style:none;display:flex;gap:.4rem;margin:0 0 1.1rem;padding:0;flex-wrap:wrap}
.ksteps li{display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);
  border-radius:24px;padding:.4rem .9rem;font-size:.82rem;font-weight:800;color:var(--muted);flex:1;min-width:132px}
.ksteps__n{width:22px;height:22px;border-radius:50%;background:#eef1f5;color:#6b7280;
  display:grid;place-items:center;font-size:.76rem;flex:0 0 auto}
.ksteps li.on{border-color:var(--blue);color:var(--dark)}
.ksteps li.on .ksteps__n{background:var(--blue);color:#fff}
.ksteps li.done{color:var(--green)}
.ksteps li.done .ksteps__n{background:#eef6ee;color:var(--green)}

.kbuild{padding:1.2rem 1.3rem}
.kbuild h3{font-size:1.05rem;margin-bottom:.8rem}
.kbuild__nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem;
  border-top:1px solid var(--line);padding-top:1rem;flex-wrap:wrap}

/* the customer picker — a search box that becomes a chip once somebody is chosen, because a
   contract bound to the wrong customer is the one mistake this screen must make hard. */
.kpick{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.kpick input{flex:1;min-width:0}
.kpick__on{background:#eef6fb;border:1px solid #cfe6f5;border-radius:9px;padding:.45rem .8rem;font-size:.86rem;font-weight:800}
.kpick__res{display:flex;flex-direction:column;gap:.25rem;margin-top:.4rem}
.kpick__row{text-align:start;background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:.45rem .7rem;font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.kpick__row:hover{border-color:var(--blue);background:#f8fcfe}

/* §27 step 3 — service cards, toggled. Big targets so this works with a thumb at 390px. */
.ksvcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.ksvc{display:flex;justify-content:space-between;align-items:center;gap:.5rem;background:#fff;
  border:1.5px solid var(--line);border-radius:12px;padding:.85rem 1rem;font-family:inherit;
  font-size:.9rem;font-weight:800;color:var(--dark);cursor:pointer;transition:.15s;text-align:start}
.ksvc:hover{border-color:var(--blue)}
.ksvc.on{border-color:var(--green);background:#f4fbf5}
.ksvc__m{font-size:1.05rem;color:var(--muted)}
.ksvc.on .ksvc__m{color:var(--green)}

/* §11 — one rule block per service, advanced conditions folded away by default (§13). */
.krule{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:.9rem;overflow:hidden}
.krule__h{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  padding:.7rem 1rem;background:#fbfcfe;border-bottom:1px solid var(--line)}
.krule__h h4{font-size:.94rem;margin:0}
.krule__row{display:flex;gap:.6rem;align-items:flex-start;padding:.9rem 1rem;border-bottom:1px dashed var(--line)}
.krule__row:last-child{border-bottom:none}
.krule__row>.form{flex:1;min-width:0}
.kadv summary{cursor:pointer;font-size:.82rem;font-weight:800;color:var(--blue-d);padding:.3rem 0}
.kadv[open] summary{margin-bottom:.2rem}

/* §53 — the summary an employee reads instead of a JSON blob. */
.ksum{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.ksum li{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;background:#f8fafc;
  border:1px solid var(--line);border-radius:9px;padding:.5rem .8rem;font-size:.86rem;font-weight:700}
.ksum li b{color:var(--dark)}
.ksum li span{color:var(--blue-d);font-weight:800}

/* §36 — the grouped sections inside the Customer 360 contracts card. */
.csec{margin-bottom:.9rem}
.csec:last-child{margin-bottom:0}
.csec h4{font-size:.82rem;color:var(--muted);margin-bottom:.4rem;font-weight:800}

/* §61 — 390 first. The contract table drops the two columns a lookup does not need, the step rail
   wraps, and the rule row stacks its delete button under the form instead of squeezing it. */
@media(max-width:600px){
  .ktable th:nth-child(5),.ktable td:nth-child(5),
  .ktable th:nth-child(6),.ktable td:nth-child(6){display:none}
  .ksteps li{min-width:0;flex:0 0 auto;padding:.35rem .6rem}
  .ksteps li span:not(.ksteps__n){display:none}
  .ksteps li.on span:not(.ksteps__n){display:inline}
  .krule__row{flex-direction:column}
}


/* ===== THE QUOTATION → CONTRACT BUILDER (SALES UX) ==========================================
   §35 — a travel-sales workspace, not an accounting grid: generous whitespace, soft cards,
   almost no borders, one obvious primary action per screen. Everything an ERP form does — dense
   rows, hairlines everywhere, six equal buttons — is deliberately absent. */

/* ---- the list: rows that read the same on a phone and a desktop --------------------------- */
.plist{display:flex;flex-direction:column;gap:.55rem}
.prow{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:1rem;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;text-align:start;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.prow:hover{border-color:#cfd9e6;box-shadow:0 6px 18px rgba(24,32,54,.07);transform:translateY(-1px)}
.prow__a{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.prow__ref{font-size:.7rem;font-weight:900;color:var(--muted);letter-spacing:.04em}
.prow__ref small{color:var(--orange-d)}
.prow__a b{font-size:1rem;font-weight:800;color:var(--dark);overflow-wrap:anywhere}
.prow__a small{font-size:.8rem;color:var(--muted);font-weight:700}
.prow__b{display:flex;gap:.1rem;font-size:1.05rem}
.prow__d{font-weight:900;font-size:.98rem;white-space:nowrap}

/* ---- status pills ------------------------------------------------------------------------- */
.ppill--draft{background:#eef1f5;color:#5a6474}
.ppill--ready{background:#e8f4fd;color:var(--blue-d)}
.ppill--sent{background:#fff4e0;color:#a2650a}
.ppill--rev{background:#fdeeee;color:#b3261e}
.ppill--accepted{background:#e9f7ee;color:var(--green)}
.ppill--done{background:#eef1f5;color:#404853}
.ppill--cancelled{background:#f2f3f5;color:#8b929e;text-decoration:line-through}
.ppill--v{background:#eef1f5;color:#5a6474;font-variant-numeric:tabular-nums}
.ppill--lock{background:#fff4e0;color:#a2650a}

/* ---- §30 the save state, in the top bar --------------------------------------------------- */
.pchipsave{font-size:.72rem;font-weight:800;border-radius:999px;padding:.22rem .6rem;white-space:nowrap}
.pchipsave--saved{background:#e9f7ee;color:#14803c}
.pchipsave--saving{background:#e8f4fd;color:var(--blue-d)}
.pchipsave--idle{background:#eef1f5;color:#5a6474}
.pchipsave--error{background:#fdeeee;color:#b3261e}

/* ---- §2 the one screen -------------------------------------------------------------------- */
.pb{padding-bottom:1rem}
.pb__id{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:1.1rem;font-size:.84rem}
.pb__ref{font-weight:900;color:var(--muted);letter-spacing:.04em;font-size:.76rem}
/* §3 — the contract number, once one exists: the same row, a stronger colour, because it is the
   reference the customer and the supplier will both quote from here on. */
.pb__ref--k{color:var(--dark);background:#eef7f2;border:1px solid #cfe9dc;border-radius:6px;
  padding:.05rem .4rem}
.pb__cust{font-weight:800;color:var(--blue-d)}
.pb__cust:hover{text-decoration:underline}
.pb__dates{color:var(--muted);font-weight:700}
.pb__dates::before{content:"·";margin-inline-end:.45rem;color:#c9cfd9}

.pnote{border-radius:12px;padding:.6rem .95rem;margin-bottom:1rem;font-size:.84rem;font-weight:700;
  background:#f6f8fc;color:#5a6474}
.pnote--ok{background:#e9f7ee;color:#14803c}

.pb__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.4rem;align-items:start}
.pb__main{min-width:0;display:flex;flex-direction:column;gap:1.1rem}
.pb__rail{display:flex;flex-direction:column;gap:.9rem;position:sticky;top:78px}

/* ---- §28 readiness, in sales language ----------------------------------------------------- */
.pready{display:inline-flex;align-items:center;gap:.4rem;background:#e9f7ee;color:#14803c;
  border-radius:999px;padding:.35rem .9rem;font-size:.82rem;font-weight:800;align-self:flex-start}
.pmissing{background:#fffaf0;border:1px solid #f6e3bb;border-radius:14px;padding:.85rem 1rem}
.pmissing>b{display:block;font-size:.88rem;font-weight:900;color:#8a6200;margin-bottom:.55rem}
.pmissing__c{display:flex;flex-wrap:wrap;gap:.4rem}
.mchip{background:#fff;border:1px solid #f0dcb4;border-radius:999px;padding:.35rem .8rem;
  font-size:.79rem;font-weight:800;color:#8a6200;transition:.15s}
.mchip:hover{background:#fff4e0;border-color:var(--orange);color:#6b4d00}

/* ---- §5 the services block ---------------------------------------------------------------- */
.svcs{display:flex;flex-direction:column;gap:.85rem}
.svcs__h{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.svcs__h h3{font-size:1.08rem;font-weight:900;color:var(--dark)}
.svcs__h h3 small{color:var(--muted);font-weight:800;font-size:.88rem;margin-inline-start:.3rem}
.svcs__acts{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.svcs__add{margin-top:.7rem}
.bagdef{margin:.7rem 0;padding:.7rem .8rem;border:1px dashed var(--line);border-radius:12px;background:#fafbfd}
.bagdef__h{display:block;font-size:.78rem;font-weight:800;margin-bottom:.4rem;color:var(--muted)}

.pcards{display:flex;flex-direction:column;gap:.7rem}
.pcard{display:flex;gap:.85rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:1rem 1.1rem;transition:border-color .15s,box-shadow .15s}
.pcard:hover{border-color:#cfd9e6;box-shadow:0 6px 18px rgba(24,32,54,.07)}
.pcard.drag{opacity:.45;border-style:dashed}
.pcard__g{color:#c6ccd8;font-size:1rem;cursor:grab;user-select:none;padding-top:.5rem;line-height:1}
.pcard__i{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:#f1f6fc;font-size:1.15rem}
.pcard__b{flex:1;min-width:0;cursor:pointer}
.pcard__t{font-size:.68rem;font-weight:900;color:var(--muted);letter-spacing:.04em}
.pcard__b h4{font-size:1.02rem;font-weight:900;color:var(--dark);margin:.05rem 0 .25rem;overflow-wrap:anywhere}
.pcard__d{display:flex;flex-direction:column;gap:.12rem;font-size:.83rem;color:#5a6474;font-weight:600}
.pcard__n{margin-top:.4rem;background:#fffbea;border-inline-start:3px solid var(--yellow);
  padding:.3rem .6rem;border-radius:7px;font-size:.8rem;color:#6b5400}
.pcard__w{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.cmiss{font-size:.75rem;font-weight:800;color:#b3261e;background:#fdeeee;border-radius:999px;padding:.12rem .55rem}
.csug{font-size:.75rem;font-weight:800;color:var(--blue-d);background:#e8f4fd;border-radius:999px;padding:.12rem .55rem}
.pcard__r{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;flex:0 0 auto}
.pcard__m{display:flex;flex-direction:column;gap:.05rem;text-align:end;font-size:.78rem;white-space:nowrap}
.pcard__m>b{font-size:1.08rem;font-weight:900;color:var(--dark)}
.pcard__m i{display:inline-block;min-width:42px;margin-inline-end:.3rem;color:var(--muted);font-style:normal;font-size:.68rem;font-weight:800}
.pcard__m .pos{color:var(--green)}
.pcard__m .neg{color:var(--red)}
.pcard__x{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.pcard__mv{display:inline-flex;gap:.15rem}
.pcard__mv .lnk{font-size:.9rem;line-height:1}
.pcard__mv .lnk[disabled]{opacity:.28;cursor:default}
/* a text button is still a button: 32px of height so a thumb (and a hurried mouse) hits it.
   A `<button>` centres its own label, so the height needs no display change to stay in line. */
.lnk{background:none;border:0;color:var(--blue-d);font-size:.78rem;font-weight:800;padding:.15rem .45rem;
  min-height:32px}
.lnk:hover{text-decoration:underline}
.lnk--d{color:var(--red)}
.inc{color:var(--green);font-size:.78rem;font-weight:800;font-style:normal}

/* §14 — a package's components, visibly nested inside it */
.pkids{margin-top:.6rem;border-inline-start:2px dashed var(--line);padding-inline-start:.75rem}
.pkid{display:flex;align-items:center;gap:.5rem;padding:.32rem 0;font-size:.82rem}
.pkid>div{min-width:0}
.pkid b{display:block;font-weight:800;font-size:.85rem;overflow-wrap:anywhere}
.pkid small{color:var(--muted);font-size:.76rem}
.pkid__p{margin-inline-start:auto;font-weight:800;white-space:nowrap}
.pkid__p em{font-style:normal;color:var(--green);font-size:.76rem}

/* ---- §25 the empty state IS the chooser --------------------------------------------------- */
.pstart{background:#fff;border:1px dashed #d4dce8;border-radius:18px;padding:1.6rem 1.3rem;text-align:center}
.pstart>b{display:block;font-size:1.1rem;font-weight:900;color:var(--dark)}
.pstart>p{color:var(--muted);font-size:.86rem;font-weight:700;margin:.25rem 0 1.2rem}
.pchoose{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:.65rem}
.pchoose--s{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));margin-bottom:1rem}
.pchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:1rem .5rem;min-height:88px;
  font-weight:800;font-size:.83rem;color:var(--dark);transition:.15s}
.pchip span{font-size:1.65rem;line-height:1}
.pchip:hover{border-color:var(--orange);background:#fffaf2;transform:translateY(-2px);box-shadow:0 6px 16px rgba(247,147,30,.14)}
.pchip--s{flex-direction:row;font-size:.8rem;padding:.6rem .8rem;min-height:0}

/* ---- §26 quick-add chips ------------------------------------------------------------------ */
.qadd{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.qadd__l{font-size:.75rem;font-weight:800;color:var(--muted);margin-inline-end:.15rem}
.qchip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.42rem .95rem;
  font-size:.82rem;font-weight:800;color:var(--dark);transition:.15s}
.qchip:hover{border-color:var(--orange);background:#fffaf2}
.qchip--m{border-style:dashed;color:var(--muted)}
.qchip--sm{padding:.3rem .7rem;font-size:.76rem;display:inline-flex;align-items:center;gap:.3rem}
.qchip--sm span{font-size:.85rem;line-height:1}

/* §43 — adding a component from inside the package group */
.pkgadd{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem;padding-top:.55rem;
  border-top:1px dashed var(--line)}

/* ===== PHASE 2D ============================================================================ */

/* §32 — the policy, the confirmation and the voucher, on the timeline card itself */
.svst{margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--line);display:flex;
  flex-direction:column;gap:.35rem}
.svst__p{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.pchipw{font-size:.72rem;font-weight:800;background:#fff6e6;color:#9a6400;border:1px solid #f4e2bd;
  border-radius:999px;padding:.1rem .55rem}
.mchip--w{background:#fff6e6;border-color:#f4e2bd;color:#9a6400}
.svst__c{font-size:.78rem;font-weight:800;color:#16855c;display:flex;gap:.35rem;align-items:center;
  flex-wrap:wrap}
.svst__c bdi{font-variant-numeric:tabular-nums}
.svst__c--none{color:var(--muted);font-weight:700}
.svst__v{display:flex;flex-wrap:wrap;gap:.3rem}
.vchip{font-size:.74rem;font-weight:800;text-decoration:none;color:var(--dark);background:#f1f4f9;
  border:1px solid var(--line);border-radius:999px;padding:.12rem .6rem}
.vchip:hover{border-color:var(--orange);background:#fffaf2}

/* §4 — the share panel */
.sh{display:flex;flex-direction:column;gap:.75rem}
.sh__ref{display:flex;align-items:baseline;gap:.5rem;font-size:1.02rem}
.sh__url input{width:100%;font:inherit;font-size:.86rem;direction:ltr;text-align:left;
  padding:.6rem .7rem;border:1.5px solid var(--line);border-radius:10px;background:#f7f9fc}
.sh__acts{display:flex;flex-wrap:wrap;gap:.45rem}
.sh__acts .btn{flex:1 1 auto;text-align:center;text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center}
.sh__msg{width:100%;font:inherit;font-size:.84rem;line-height:1.7;padding:.7rem .8rem;
  border:1.5px solid var(--line);border-radius:10px;background:#f7f9fc;resize:vertical}
.sh__meta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;font-size:.8rem}
.sh__meta a{font-weight:800;color:var(--orange)}
.sh__conf{border-top:1px dashed var(--line);padding-top:.7rem;display:flex;flex-direction:column;gap:.45rem}
.sh__conft{font-size:.78rem;font-weight:800;color:var(--muted)}
.sh__conf textarea{width:100%;font:inherit;font-size:.84rem;padding:.55rem .7rem;
  border:1.5px solid var(--line);border-radius:10px;background:#f7f9fc}
.sh__conf .btn{align-self:flex-start;text-decoration:none}

/* §9 — the policy control: presets first, detail only when it applies */
.pol{display:flex;flex-direction:column;gap:.8rem}
.pol__p{display:flex;flex-direction:column;gap:.35rem}
.pol__pl{font-size:.75rem;font-weight:800;color:var(--muted)}
.pol__pc{display:flex;flex-wrap:wrap;gap:.35rem}
.pol__pc .qchip.on{border-color:var(--orange);background:#fffaf2;color:var(--orange)}
.pol__r{border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem .8rem}
.pol__r legend{font-size:.78rem;font-weight:800;padding:0 .35rem;color:var(--dark)}
.pol__st{display:flex;flex-wrap:wrap;gap:.7rem}
.pol__opt{display:inline-flex;align-items:center;gap:.3rem;font-size:.86rem;font-weight:700;cursor:pointer}
.pol__opt input{accent-color:var(--orange);width:16px;height:16px}
.pol__d{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.6rem;padding-top:.6rem;
  border-top:1px dashed var(--line)}
.pol__d[hidden]{display:none}
.pol__dl{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.pol__dl input{width:76px}
.pol__dl small{color:var(--muted);font-size:.74rem}
.pol__chk{display:inline-flex;align-items:center;gap:.35rem;font-size:.86rem;font-weight:700;cursor:pointer}
.pol__chk input{accent-color:var(--orange);width:16px;height:16px}
.pol__x{display:flex;flex-direction:column;gap:.5rem}
.pol__live{background:#f7f9fc;border:1px dashed var(--line);border-radius:10px;padding:.5rem .7rem;
  display:flex;flex-direction:column;gap:.2rem;font-size:.82rem;color:var(--muted)}
.fld--sm{flex:1 1 200px}

/* §13 — the additional conditions */
.trow{display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:start;margin-bottom:.6rem;
  padding-bottom:.6rem;border-bottom:1px dashed var(--line)}
.trow__t{grid-column:1;font:inherit;font-weight:700;padding:.5rem .65rem;border:1.5px solid var(--line);border-radius:9px}
.trow__b{grid-column:1;font:inherit;padding:.5rem .65rem;border:1.5px solid var(--line);border-radius:9px;resize:vertical}
.trow>.lnk{grid-column:2;grid-row:1/3;align-self:center}

@media (max-width:560px){
  .sh__acts .btn{flex:1 1 100%}
  .pol__d{gap:.5rem}
}

/* ---- §27 the sticky summary --------------------------------------------------------------- */
.psum{background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem;
  box-shadow:0 8px 24px rgba(24,32,54,.06)}
.psum__n{font-size:.74rem;font-weight:900;color:var(--muted);letter-spacing:.03em;margin-bottom:.7rem}
.psum__pm{margin-bottom:.75rem;padding-bottom:.65rem;border-bottom:1px dashed var(--line)}
.psum__pml{font-size:.72rem;font-weight:800;color:var(--muted);margin-bottom:.35rem}
.psum__pmt{display:flex;gap:.35rem;flex-wrap:wrap}
.psum__pmb{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.35rem .55rem;font-size:.74rem;font-weight:700;cursor:pointer;color:var(--ink)}
.psum__pmb.is-on{border-color:var(--brand,#0b3b6f);background:#eef4fb;color:var(--brand,#0b3b6f)}
.bagdef{margin:.7rem 0;padding:.7rem .8rem;border:1px dashed var(--line);border-radius:12px;background:#fafbfd}
.bagdef__h{display:block;font-size:.78rem;font-weight:800;margin-bottom:.4rem;color:var(--muted)}
.psum__bpf{display:grid;grid-template-columns:1fr 1.4fr;gap:.45rem;margin-top:.55rem}
.psum__bpf .fld{margin:0}
.psum__bpf input,.psum__bpf select{width:100%;padding:.35rem .45rem;border:1px solid var(--line);border-radius:8px;font-weight:700}
.psum__r{display:flex;justify-content:space-between;gap:.8rem;font-size:.85rem;font-weight:700;padding:.2rem 0}
.psum__r--cost{font-size:.78rem;color:var(--muted)}
.psum__r b{font-weight:800;white-space:nowrap}
.psum__r--d{color:var(--green)}
.psum__t{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;margin-top:.6rem;
  padding-top:.65rem;border-top:2px solid var(--dark);font-weight:900}
.psum__t b{font-size:1.25rem;white-space:nowrap}
.psum__m{display:flex;justify-content:space-between;gap:.8rem;margin-top:.65rem;padding-top:.6rem;
  border-top:1px dashed var(--line);font-size:.82rem;font-weight:800}
.psum__m.pos{color:var(--green)} .psum__m.neg{color:var(--red)}
.psum__h{margin-top:.65rem;padding-top:.6rem;border-top:1px dashed var(--line);font-size:.74rem;color:var(--muted);font-weight:700}
.psum__dl{display:block;margin-top:.5rem}
.psum__ok{margin-top:.9rem;background:#e9f7ee;color:#14803c;border-radius:10px;padding:.45rem;
  text-align:center;font-size:.8rem;font-weight:800}
.psum__bad{display:block;width:100%;margin-top:.9rem;background:#fffaf0;border:1px solid #f6e3bb;
  color:#8a6200;border-radius:10px;padding:.5rem;font-size:.79rem;font-weight:800}
.psum__bad:hover{background:#fff4e0}

.pact{display:flex;flex-direction:column;gap:.5rem}
.btn--w{width:100%;justify-content:center}
.btn--ok{background:var(--green);color:#fff;border-color:var(--green)}
.btn--ok:hover{filter:brightness(1.06)}
.pkb{font-size:.68rem;text-align:center;color:var(--muted)}

/* ---- §27/§33 the phone's bottom bar -------------------------------------------------------- */
.pbar{display:none;position:fixed;inset-inline:0;bottom:0;z-index:60;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(24,32,54,.09);
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));align-items:center;gap:.7rem}
.pbar__t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.pbar__t small{font-size:.66rem;color:var(--muted);font-weight:800}
.pbar__t b{font-size:1.05rem;font-weight:900;white-space:nowrap}
.pbar__ok{font-size:.74rem;font-weight:800;color:#14803c;background:#e9f7ee;border-radius:999px;padding:.2rem .6rem}
.pbar__bad{font-size:.74rem;font-weight:800;color:#8a6200;background:#fffaf0;border:1px solid #f6e3bb;
  border-radius:999px;padding:.25rem .7rem;text-align:start}
.pbar .btn{margin-inline-start:auto;white-space:nowrap}

/* ---- §36 everything secondary, collapsed --------------------------------------------------- */
.pmore2{background:#fff;border:1px solid var(--line);border-radius:16px}
.pmore2>summary{cursor:pointer;list-style:none;padding:.85rem 1.1rem;font-size:.86rem;font-weight:800;color:var(--muted)}
.pmore2>summary::-webkit-details-marker{display:none}
.pmore2>summary::before{content:"▸";display:inline-block;margin-inline-end:.4rem;transition:.15s}
.pmore2[open]>summary::before{content:"▾"}
.pmore2__b{padding:0 1.1rem 1.1rem;display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.pmore2__s h5{display:flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:900;color:var(--muted);
  letter-spacing:.04em;margin-bottom:.55rem}
.pmore2__s h5 small{color:var(--dark)}
.pmore2__s h5 .lnk{margin-inline-start:auto}
.pmore2__s>p{font-size:.82rem;color:var(--muted)}
.ptrav{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:.28rem .75rem;font-size:.83rem;font-weight:700}
.chip small{color:var(--muted);font-size:.72rem;font-weight:600}
.chip .x{background:none;border:0;color:var(--muted);font-size:.8rem;padding:0 .1rem}
.chip .x:hover{color:var(--red)}
.chip--c{background:#eef4fb;border-color:#cfe2f5;padding:.5rem .85rem;margin-bottom:.4rem}
.chip--c b{display:block}
.ptrow{margin-bottom:.6rem}
.ptrow b{display:block;font-size:.76rem;color:var(--muted);font-weight:800}
.ptrow p{font-size:.84rem;white-space:pre-wrap}
.pvers{display:flex;gap:.5rem;flex-wrap:wrap}
.pver{display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:.5rem .75rem;font-size:.78rem;min-width:90px}
.pver.on{border-color:var(--blue);background:#f4fbff}
.pver b{font-size:.9rem;font-weight:900}
.pver small{color:var(--muted);font-size:.7rem}
.ptl{list-style:none;display:flex;flex-direction:column;gap:.5rem;max-height:260px;overflow:auto}
.ptl li{border-inline-start:2px solid var(--line);padding-inline-start:.6rem;font-size:.8rem}
.ptl b{font-weight:800}
.ptl span{display:block;color:#5a6474}
.ptl small{color:var(--muted);font-size:.71rem}

/* ==========================================================================================
   §6 THE SHEET — every editor opens over the screen. On a desktop it slides in from the side;
   on a phone it is a bottom sheet with big touch targets. Nothing navigates.
   ========================================================================================== */
.modal--sheet{place-items:stretch;padding:0;justify-items:end}
.modal--sheet .modal__card{width:min(560px,100%);max-height:100vh;height:100vh;border-radius:0;
  animation:sheetIn .2s ease-out}
@keyframes sheetIn{from{transform:translateX(3%);opacity:.6}to{transform:none;opacity:1}}
.modal--full{padding:2.5vh 1rem}
.modal--full .modal__card{width:min(1080px,100%);height:95vh;max-height:95vh}

.ed__h{gap:.7rem}
.ed__h b{flex:1}
.ed__b{padding:1.1rem 1.25rem}
.ed__f{position:sticky;bottom:0;background:#fff}

/* §15 — the live card, at the top of the editor */
.edlive{display:flex;gap:.8rem;align-items:flex-start;background:linear-gradient(180deg,#f7fafd,#fff);
  border:1px solid #e3ebf4;border-radius:14px;padding:.85rem .95rem;margin-bottom:1.2rem}
.edlive__i{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:11px;
  background:#fff;border:1px solid #e3ebf4;font-size:1.05rem}
.edlive__b{flex:1;min-width:0}
.edlive__t{font-size:.66rem;font-weight:900;color:var(--muted);letter-spacing:.04em}
.edlive__b h4{font-size:.98rem;font-weight:900;color:var(--dark);margin:.05rem 0 .2rem;overflow-wrap:anywhere}
.edlive__d{display:flex;flex-direction:column;gap:.1rem;font-size:.79rem;color:#5a6474;font-weight:600}
.edlive__n{margin-top:.3rem;font-size:.76rem;color:#6b5400}
.edlive__p{font-weight:900;font-size:1.02rem;white-space:nowrap}

/* the form: two to a row, one on a phone */
.edform{display:flex;flex-direction:column;gap:.85rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;align-items:start}
.frow--1{grid-template-columns:1fr}
.fld{display:flex;flex-direction:column;gap:.3rem;min-width:0;position:relative}
/* `display:flex` above out-specifies the user-agent `[hidden]` rule, which is how the
   override-reason field stayed on screen after the suggestion strip hid it. */
.fld[hidden],.edform [hidden],.modal__b [hidden]{display:none}
.fwrap{position:relative;display:block}
.fld>span{font-size:.76rem;font-weight:800;color:#6b7484}
.fld--wide{grid-column:1/-1}
.fld--btn{justify-content:flex-end}
.fld input,.fld select,.fld textarea{width:100%;min-width:0;border:1.5px solid var(--line);border-radius:11px;
  padding:.62rem .8rem;font-family:inherit;font-weight:700;font-size:.92rem;outline:none;background:#fff;color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(41,171,226,.12)}
.fld.dim{opacity:.55}
.fld.bad>input,.fld.bad>select,.fld.bad>textarea,.fld.bad .pxg{border-color:var(--red)}
.req{color:var(--red);font-style:normal}
.fhint{font-size:.72rem;color:var(--blue-d);font-weight:700;min-height:.9rem}
.ferrline{font-size:.72rem;color:var(--red);font-weight:800;font-style:normal}

/* §7/§18 — the passenger cluster: one control group */
.fld--pax .pxg{display:flex;gap:.4rem;flex-wrap:wrap}
.stp{display:inline-flex;align-items:center;gap:.1rem;border:1.5px solid var(--line);border-radius:11px;
  padding:.18rem .3rem;background:#fff}
.stp i{font-style:normal;font-size:.7rem;font-weight:800;color:var(--muted);padding-inline:.35rem}
.stp input{width:46px;border:0!important;text-align:center;padding:.4rem .1rem!important;font-weight:900;
  box-shadow:none!important;-moz-appearance:textfield}
.stp input::-webkit-outer-spin-button,.stp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stp__b{width:30px;height:30px;border:0;border-radius:8px;background:#f1f4f9;color:var(--dark);
  font-weight:900;font-size:1rem;line-height:1;display:grid;place-items:center}
.stp__b:hover{background:#e3e9f2}

/* §37 — two or three choices are buttons, not a dropdown */
.seg{display:inline-flex;background:#f1f4f9;border-radius:11px;padding:.18rem;gap:.15rem;flex-wrap:wrap}
.seg__b{border:0;background:none;border-radius:9px;padding:.42rem .8rem;font-size:.82rem;font-weight:800;
  color:#6b7484;transition:.13s;white-space:nowrap}
.seg__b.on{background:#fff;color:var(--dark);box-shadow:0 2px 6px rgba(24,32,54,.09)}

/* §19 — net and sell next to each other, margin under them */
.edprice{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:1.3rem;padding-top:1.1rem;
  border-top:1px solid var(--line)}
.edprice .fld input{font-size:1.05rem;font-weight:900}
.edmargin{grid-column:1/-1;font-size:.84rem;font-weight:800;color:var(--muted)}
.edmargin.pos{color:var(--green)} .edmargin.neg{color:var(--red)}
.edtrip{display:flex;align-items:center;gap:.5rem;font-size:.78rem}
.edtrip__t{font-weight:800;color:var(--muted)}

.psugbox{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.8rem;border-radius:11px;
  padding:.55rem .8rem;font-size:.83rem;font-weight:800;background:#eef1f5;color:#5a6474}
.psugbox.ok{background:#e8f4fd;color:var(--blue-d)}
.psugbox.warn{background:#fff8e8;color:#8a6200}
.psugbox .btn{margin-inline-start:auto}
.psugbox b{font-variant-numeric:tabular-nums}
.ovr{margin-top:.8rem}

.psec{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}
.psec h5{font-size:.72rem;font-weight:900;color:var(--muted);letter-spacing:.04em;margin-bottom:.6rem}
.pmore{margin-top:1.3rem;border-top:1px solid var(--line);padding-top:.85rem}
.pmore summary{cursor:pointer;font-size:.82rem;font-weight:800;color:var(--blue-d);list-style:none;margin-bottom:.8rem}
.pmore summary::-webkit-details-marker{display:none}
.pmore summary::before{content:"▸ ";display:inline-block}
.pmore[open] summary::before{content:"▾ "}
.lrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr)) 30px;gap:.55rem;align-items:end;
  background:var(--bg);border-radius:11px;padding:.6rem;margin-bottom:.55rem}

/* §4 — customer first */
.cfirst{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.qcbox{background:var(--bg);border-radius:13px;padding:.9rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.8rem}
.fmsg{background:#fdeeee;color:#b3261e;border-radius:10px;padding:.5rem .75rem;font-size:.82rem;font-weight:800;margin-top:.8rem}

/* §16 — autocomplete */
.ac{position:relative}
.ac:not(:empty){background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);
  margin-top:.25rem;max-height:220px;overflow:auto;position:absolute;inset-inline:0;top:100%;z-index:30}
.acitem{display:block;width:100%;text-align:start;background:none;border:0;padding:.5rem .7rem;
  font-size:.83rem;border-bottom:1px solid var(--line)}
.acitem:last-child{border-bottom:0}
.acitem:hover,.acitem:focus-visible{background:#f4fbff}
.acitem b{display:block;font-weight:800}
.acitem small{color:var(--muted);font-size:.74rem}
.acempty{padding:.5rem .7rem;color:var(--muted);font-size:.8rem}

/* ---- §32 preview, over the screen ---------------------------------------------------------- */
.pv__h{gap:.8rem;flex-wrap:wrap}
.pv__tabs{display:inline-flex;background:#f1f4f9;border-radius:11px;padding:.2rem;gap:.15rem}
.pv__tab{border:0;background:none;border-radius:9px;padding:.45rem .95rem;font-size:.84rem;font-weight:800;color:#6b7484}
.pv__tab.on{background:#fff;color:var(--dark);box-shadow:0 2px 6px rgba(24,32,54,.09)}
.pv__act{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}
.pv__b{padding:0;background:#eef1f5}
.pv__b iframe{width:100%;height:100%;min-height:60vh;border:0;background:#fff;display:block}
.pvint{padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;background:#fff;min-height:100%}
.pvint__r{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:.8rem .95rem}
.pvint__i{font-size:1.1rem}
.pvint__r>div{flex:1;min-width:0}
.pvint__r b{display:block;font-weight:900;font-size:.95rem}
.pvint__r small{display:block;color:var(--muted);font-size:.78rem}
.pvint__m{display:flex;flex-direction:column;text-align:end;font-size:.78rem;white-space:nowrap}
.pvint__m i{font-style:normal;color:var(--muted);font-size:.68rem;font-weight:800;margin-inline-end:.3rem}
.pvint__m .pos{color:var(--green)} .pvint__m .neg{color:var(--red)}
.pvint__t{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:flex-end;border-top:2px solid var(--dark);
  padding-top:.8rem;margin-top:.4rem;font-size:.86rem;font-weight:800}
.pvint__t .pos{color:var(--green)} .pvint__t .neg{color:var(--red)}

/* kept for the other back-office screens that use them */
.ferr{background:#fdeeee;border:1px solid #f5c6c2;color:#b3261e;border-radius:10px;padding:.5rem .75rem;
  font-size:.83rem;font-weight:700;margin-top:.8rem}
.ferr ul{margin:.3rem 0 0;padding-inline-start:1.1rem;font-weight:600}
.form--1{grid-template-columns:1fr}
.cspan{grid-column:1/-1}
.ttag{font-size:1rem;margin-inline-end:.15rem}
.empty--s{padding:1rem;font-size:.85rem}

/* ==========================================================================================
   §33/§34 — 1440 · 768 · 390. Below 1080 the rail stops being a column and the phone bar takes
   over the two numbers that matter; below 640 every editor is a bottom sheet and nothing is a
   shrunken desktop table.
   ========================================================================================== */
@media (max-width:1080px){
  .pb__grid{grid-template-columns:1fr}
  .pb__rail{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:1rem}
  .psum{flex:1 1 320px}
  .pact{flex:1 1 240px;flex-direction:row;flex-wrap:wrap;align-content:flex-start}
  .pact .btn--w{width:auto;flex:1 1 auto}
  .pkb{display:none}
  .pb{padding-bottom:5rem}
  .pbar{display:flex}
  .pmore2__b{grid-template-columns:1fr}
}
/* §33/§34 — a phone AND a tablet are touched, not clicked: every link that acts on a service
   becomes a real target at both widths, not only at 390. */
@media (max-width:900px){
  .pcard__x .lnk,.pcard__mv .lnk,.pmore2 .lnk,.psum__dl,.pkid .lnk{
    min-height:38px;padding-inline:.5rem;display:inline-flex;align-items:center;justify-content:center}
  .pcard__mv .lnk{min-width:38px}
  .pv__tab{padding-block:.6rem}
  /* a package component is icon + text + price + two actions; below a desktop it wraps its
     actions onto a second line instead of widening the card past the column */
  .pkid{flex-wrap:wrap;row-gap:.15rem}
  .pkid>div{flex:1 1 60%;min-width:0}
  .pkid__p{margin-inline-start:0}
  .pkids{padding-inline-start:.5rem}
}
@media (max-width:640px){
  .prow{grid-template-columns:1fr auto;row-gap:.5rem}
  .prow__b{grid-row:2}
  .prow__c{grid-column:2;grid-row:1}
  .prow__d{grid-column:2;grid-row:2;text-align:end}
  .pcard{flex-wrap:wrap;padding:.9rem}
  .pcard__g{display:none}
  .pcard__r{flex-direction:row;align-items:center;justify-content:space-between;width:100%;flex-wrap:wrap;
    gap:.6rem;border-top:1px dashed var(--line);padding-top:.6rem}
  .pcard__m{flex-direction:row;gap:.75rem;text-align:start;flex-wrap:wrap;align-items:baseline}
  .pcard__m i{min-width:0;margin-inline-end:.2rem}
  .pcard__x{justify-content:flex-start}
  .pcard__x .lnk{font-size:.84rem}
  .pchoose{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .pchip{min-height:80px;padding:.8rem .35rem;font-size:.78rem}
  .frow,.edprice{grid-template-columns:1fr}
  .lrow{grid-template-columns:1fr 1fr 30px}
  /* a bottom sheet, with a grab bar — not a desktop dialog squeezed onto a phone */
  .modal--sheet{place-items:end stretch;padding:0}
  .modal--sheet .modal__card{width:100%;height:auto;max-height:92vh;border-radius:20px 20px 0 0;
    animation:sheetUp .22s ease-out}
  @keyframes sheetUp{from{transform:translateY(12%);opacity:.7}to{transform:none;opacity:1}}
  .modal--sheet .modal__h{position:relative;padding-top:1.3rem}
  .modal--sheet .modal__h::before{content:"";position:absolute;top:.5rem;inset-inline:0;margin-inline:auto;
    width:40px;height:4px;border-radius:99px;background:#dfe4ec}
  .modal--sheet .modal__f{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
  .modal--sheet .modal__f .btn{flex:1 1 auto;justify-content:center;padding-block:.75rem}
  .modal--full{padding:0}
  .modal--full .modal__card{height:100vh;max-height:100vh;border-radius:0;width:100%}
  .pv__act{width:100%;margin-inline-start:0}
  .fld input,.fld select,.fld textarea{padding:.72rem .8rem;font-size:1rem}
  .stp__b{width:38px;height:38px}
  .stp input{width:44px}
  .seg__b{padding:.55rem .85rem}
  .mchip,.qchip{padding:.5rem .9rem}
  /* the phone already carries the primary action in the fixed bar — twice is clutter */
  .topprimary{display:none}
}

/* ===== PHASE 2C — THE TRIP COMPOSER ==========================================================
   §44 — service blocks, a timeline, quick add, inline edit, a customer-ready preview. The
   components below are TRAVEL components (an itinerary leg, a stay, a ride), not form rows with
   smaller fonts: §49 is explicit that shrinking the ERP is not the fix. */

/* §1 — the one dominant input */
.compose{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem;
  box-shadow:0 6px 20px rgba(24,32,54,.05)}
.compose__row{display:flex;gap:.6rem;align-items:stretch}
.compose__in{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:12px;padding:.8rem 1rem;
  font-family:inherit;font-weight:700;font-size:1rem;outline:none;background:#fbfcfe}
.compose__in:focus{border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px rgba(247,147,30,.12)}
.compose__foot{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.5rem}
.compose__hint{font-size:.74rem;color:var(--muted);font-weight:700}
.compose__ai{margin-inline-start:auto;white-space:nowrap}
.compose__tiles{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--line)}
.compose__read{margin-top:.7rem;background:#eef6fd;border-radius:11px;padding:.55rem .8rem;font-size:.82rem;
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;color:var(--blue-d);font-weight:700}
.compose__read.warn{background:#fff8e8;color:#8a6200}
.compose__read span{background:#fff;border-radius:999px;padding:.1rem .6rem;font-weight:800}
.compose__read em{font-style:normal;background:#fff4e0;color:#8a6200;border-radius:999px;padding:.1rem .6rem;font-weight:800}

/* §19 — the timeline */
.tday{position:relative;padding-inline-start:1.6rem;margin-bottom:.4rem}
.tday::before{content:"";position:absolute;inset-inline-start:.42rem;top:1.5rem;bottom:-.4rem;width:2px;background:var(--line)}
.tday:last-child::before{display:none}
.tday__h{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.5rem;position:relative}
.tday__h::before{content:"";position:absolute;inset-inline-start:-1.6rem;top:.45rem;width:10px;height:10px;
  border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px #fff,0 0 0 4px #f4d9b3}
.tday__d{font-size:.95rem;font-weight:900;color:var(--dark)}
.tday__n{font-size:.72rem;font-weight:800;color:var(--muted)}
.tday__b{display:flex;flex-direction:column;gap:.6rem;padding-bottom:1rem}
.tday--x::before{display:none}
.tday--x .tday__h::before{background:#c6ccd8;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.tout{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px dashed var(--line);
  border-radius:12px;padding:.55rem .9rem;font-size:.84rem;cursor:pointer}
.tout b{font-weight:800}
.tout span:last-child{color:var(--muted)}
.tout:hover{border-color:#cfd9e6}
.tout span:first-child{flex:0 0 auto}
/* §19 — a later flight leg, pointing back at the card that owns it */
.tout--leg{border-color:#d9e4f2;background:#f8fbff}
.tout--leg span:last-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* §2 — the itinerary leg, on the card */
.itin{margin:.5rem 0 .2rem;background:#fbfcfe;border:1px solid #eef1f6;border-radius:12px;padding:.6rem .75rem}
.itin__lbl{font-size:.68rem;font-weight:900;color:var(--orange-d);letter-spacing:.04em;margin-bottom:.3rem}
.itin__row{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center}
.itin__end{display:flex;flex-direction:column;gap:.05rem;min-width:62px}
.itin__end--r{text-align:end;align-items:flex-end}
.itin__ap{font-size:1.05rem;font-weight:900;color:var(--dark);letter-spacing:.02em}
.itin__t{font-size:.92rem;font-weight:800;color:var(--dark);font-variant-numeric:tabular-nums}
.itin__end small{font-size:.7rem;color:var(--muted);font-weight:700}
.itin__mid{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:0}
.itin__fn{font-size:.74rem;font-weight:800;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.itin__line{display:block;width:100%;height:10px;position:relative;overflow:hidden}
.itin__line i{position:absolute;inset-inline:0;top:4px;height:2px;background:var(--line);display:block}
.itin__line::after{content:"✈";position:absolute;inset-inline-end:0;top:-5px;font-size:.72rem;color:#b9c2d0}
.itin__mid{overflow:hidden}
[dir=rtl] .itin__line::after{transform:scaleX(-1)}
.itin__dur{font-size:.7rem;color:var(--muted);font-weight:800}
.itin__meta{margin-top:.4rem;font-size:.74rem;color:var(--muted);font-weight:700}
.nx{font-style:normal;font-size:.62rem;font-weight:900;color:var(--orange-d);vertical-align:super;margin-inline-start:.1rem}
.unk{color:var(--muted);font-style:italic}
.ar{color:var(--muted)}

/* §13 — the stay strip */
.stay{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.35rem 0 .3rem}
.stay__d{display:inline-flex;align-items:baseline;gap:.3rem;font-weight:800;font-size:.9rem}
.stay__d i{font-style:normal;font-size:.66rem;font-weight:900;color:var(--muted)}
.stay__ar{color:var(--muted)}
.stay__n{background:#eef4fb;color:var(--blue-d);border-radius:999px;padding:.05rem .55rem;font-size:.74rem;font-weight:800}

/* §21 — an inline-editable value */
.inl{background:none;border:0;border-bottom:1px dashed #cfd6e2;border-radius:0;padding:0 .1rem;
  font:inherit;color:inherit;font-weight:inherit;cursor:pointer}
.inl:hover{border-bottom-color:var(--orange);color:var(--orange-d)}
.inl.tm{font-variant-numeric:tabular-nums}
.modal--inline .modal__card{width:min(380px,100%)}

/* §30 — the customer lens */
.seg--view{margin-inline-start:auto}

/* §2/§9 — the leg editor */
.segs{display:flex;flex-direction:column;gap:.7rem;margin-bottom:.7rem}
.segrow{border:1px solid var(--line);border-radius:14px;padding:.75rem .85rem;background:#fff}
.segrow__h{display:flex;align-items:center;gap:.5rem;min-height:1.1rem;margin-bottom:.45rem}
.segrow__lbl{font-size:.7rem;font-weight:900;color:var(--orange-d);letter-spacing:.04em}
.segrow__x{margin-inline-start:auto;font-size:.72rem}
/* Two columns, two rows: «FROM + when» over «TO + when» — the shape of a ticket, and the shape
   that fits a side sheet. Four columns looked right on paper and squeezed the date box down to
   «09/» on a real 560px sheet. */
.seggrid{display:grid;grid-template-columns:auto 1fr;gap:.5rem .6rem;align-items:end}
.seggrid--b{grid-template-columns:1.3fr 1fr 1fr;margin-top:.55rem}
.fld--ap{min-width:96px}
.dt2{display:grid;grid-template-columns:1.25fr 1.05fr;gap:.4rem}
.dt2 input[type=time]{padding-inline:.45rem}
.dt2 input{min-width:0}
.fld input.ap{text-transform:uppercase;font-weight:900;letter-spacing:.03em;text-align:center}
.fld input.ltr,.fld input.trm{direction:ltr;text-align:center}
.fld input.tm{font-variant-numeric:tabular-nums}
.fld.review>input,.fld.review .dt2 input,.fld.review>select{border-color:var(--orange);background:#fffaf2}
.fld.review>span::after{content:" ●";color:var(--orange);font-size:.6rem;vertical-align:super}
.segadd{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.4rem}
.segmore{margin-top:.5rem}
.segmore summary{cursor:pointer;font-size:.74rem;font-weight:800;color:var(--blue-d);list-style:none}
.segmore summary::-webkit-details-marker{display:none}
.segmore summary::before{content:"▸ "}
.segmore[open] summary::before{content:"▾ "}
.segmore .seggrid{margin-top:.5rem}

/* §41 — the room rows (layout owned by design-system.css) */
.rooms{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.6rem}

/* §11 — the inherited party */
.paxb{border:1px dashed var(--line);border-radius:12px;padding:.55rem .75rem;background:#fbfcfe}
.paxb__s{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.paxb__v{font-weight:800;font-size:.88rem}
.paxb__s small{color:var(--muted);font-size:.72rem;font-weight:700}
.paxb__s .lnk{margin-inline-start:auto}
.paxb__f{margin-top:.55rem}
.paxb.on{border-style:solid;border-color:#d6e3f2;background:#fff}

@media (max-width:900px){
  .seggrid{grid-template-columns:1fr 1.25fr}
  .seggrid--b{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .compose__tiles{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.3rem;-webkit-overflow-scrolling:touch}
  .compose__tiles .qchip{flex:0 0 auto}
  .compose__ai{margin-inline-start:0}
  .tday{padding-inline-start:1.2rem}
  .tday__h::before{inset-inline-start:-1.2rem}
  .tday::before{inset-inline-start:.22rem}
  .itin__row{grid-template-columns:auto 1fr auto;gap:.4rem}
  .itin__ap{font-size:.98rem}
  .itin__end{min-width:52px}
  .seggrid,.seggrid--b{grid-template-columns:1fr}
  /* §22 — the editor is a sheet, but a SHORT one: the trip stays visible behind it */
  .modal--sheet .modal__card{max-height:86vh}
  .modal--inline .modal__card{max-height:60vh}
}
/* `display:flex` above out-specifies the user-agent `[hidden]`, which left an empty strip
   under the compose box whenever nothing had been typed yet. */
.compose__read[hidden],.paxb__f[hidden],.segrow__x[hidden],.roomrow__x[hidden],#segret[hidden]{display:none}
/* §52 — a route reads in the reading direction; the arrow is mirrored with it, never reversed. */
[dir=rtl] .pcard__b h4 .ar{transform:none}
[dir=ltr] .pcard__b h4 .ar{transform:scaleX(-1);display:inline-block}

/* the live card inside the editor stays a GLANCE, not a second copy of the page */
.edlive .itin{margin:.35rem 0 .1rem;padding:.45rem .6rem}
.edlive .itin__ap{font-size:.92rem}
.edlive .itin__t{font-size:.82rem}
.edlive .itin__meta{font-size:.68rem}
.edlive .pcard__d{font-size:.76rem}
.edlive .stay{margin:.2rem 0}

/* §22/§49 — the phone: the leg editor keeps airport and clock PAIRED (one field per row turns
   «MED» into a full-width banner), the live card gives its price its own line instead of
   squeezing the flight number down to «S…», and it drops the baggage line it already shows in
   the fields below. Context stays visible; nothing is merely shrunk. */
@media (max-width:640px){
  .seggrid{grid-template-columns:auto 1fr}
  /* a date box needs ~110px before the browser starts hiding its own segments; side by side with
     a time box in a 150px column neither is usable, so on a phone they stack. */
  .dt2{grid-template-columns:1fr;gap:.35rem}
  .seggrid--b{grid-template-columns:1fr 1fr}
  .seggrid--b .fld:first-child{grid-column:1/-1}
  .fld--ap{min-width:74px}
  .dt2 input[type=date]{padding-inline:.4rem;font-size:.88rem}
  .edlive{flex-wrap:wrap}
  .edlive__b{flex:1 1 100%;order:2}
  .edlive__p{order:1;margin-inline-start:auto}
  .edlive .itin__meta{display:none}
  .edlive .itin__lbl{margin-bottom:.15rem}
}

/* ===== PHASE 2E — THE CONTEXT LAYER ==========================================================
   Four new things on screen, and every one of them exists to REMOVE a question:
     .rfld   a value the system already knows — information with an [تعديل], not a form field
     .ctxq   a decision the system refuses to take for the employee (§12 / §23)
     .ctxs   what the trip still needs, stated once, at the top of the trip
     .imrow  what an anchor change would touch, ticked or not before anything moves
   ============================================================================================ */

/* §4/§37 — «20–25 سبتمبر · مأخوذ من رحلة الوصول [تعديل]» */
.rfld{display:flex;align-items:center;gap:.6rem;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:.5rem .7rem;min-height:52px}
.rfld__b{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1 1 auto}
.rfld__l{font-size:.7rem;font-weight:800;color:var(--muted)}
.rfld__v{font-size:.92rem;font-weight:800;color:var(--ink);overflow-wrap:anywhere}
.rfld__w{font-size:.68rem;font-weight:700;color:var(--green)}
/* a value a person took over says so, in their colour, not the system's */
.rfld--m{border-style:dashed}
.rfld--m .rfld__w{color:var(--muted)}

/* §12/§13/§23 — the fact, then the choice. Never a default pre-picked for them. */
.ctxqs{display:flex;flex-direction:column;gap:.5rem;margin:.2rem 0 .8rem}
.ctxq{background:#fffdf5;border:1px solid #f0e3c2;border-radius:12px;padding:.6rem .75rem}
.ctxq__f{font-size:.84rem;font-weight:800;color:var(--ink)}
.ctxq__o{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.5rem}
.ctxq__b{display:flex;flex-direction:column;gap:.1rem;text-align:start;background:#fff;
  border:1.5px solid var(--line);border-radius:10px;padding:.45rem .7rem;cursor:pointer;
  font:inherit;min-height:44px;transition:border-color .15s,background .15s}
.ctxq__b:hover{border-color:var(--blue-d)}
.ctxq__b.on{border-color:var(--orange-d);background:#fffaf0}
.ctxq__b b{font-size:.84rem;font-weight:800}
.ctxq__b small{font-size:.7rem;color:var(--muted);font-weight:700}
.ctxq__o--d{gap:.35rem}
.ctxq__d{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.35rem .8rem;
  font:inherit;font-size:.8rem;font-weight:800;cursor:pointer;min-height:36px}
.ctxq__d:hover{border-color:var(--blue-d)}
.ctxq__d.on{border-color:var(--orange-d);background:#fffaf0}
.ctxq__x{display:block;margin-top:.45rem;font-size:.68rem;color:var(--muted);font-weight:700}
/* §27 — a buffer explains the clock it came from; it is never presented as a guarantee */
.ctxn{background:var(--bg);border-inline-start:3px solid var(--blue-d);border-radius:8px;
  padding:.45rem .65rem;font-size:.76rem;font-weight:700;color:var(--ink2)}
.ctxn--warn{border-inline-start-color:var(--orange-d);background:#fffaf0}

/* §25/§26 — what this trip still needs */
.ctxs{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7rem .85rem;margin-bottom:.8rem}
.intel{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;
  margin:.35rem 0 .5rem;padding:.45rem .6rem;background:#f4f7fb;border-radius:10px}
.intel__l{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:baseline;font-size:.78rem;font-weight:700;color:var(--muted)}
.intel__l b{color:var(--ink);font-size:.9rem}
.intel__warn{color:#a15c00;font-weight:900}
.btn--sm{padding:.25rem .55rem;font-size:.75rem}
.ctxs__h{font-size:.78rem;font-weight:900;color:var(--muted);display:flex;align-items:center;gap:.4rem;margin-bottom:.5rem}
.ctxs__n{background:var(--orange-d);color:#fff;border-radius:999px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;padding:0 .35rem}
.ctxr{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-top:1px solid var(--line)}
.ctxr:first-of-type{border-top:0}
.ctxr__i{flex:0 0 auto;width:20px;height:20px;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;font-size:.72rem;font-weight:900;color:#fff}
.ctxr--err .ctxr__i{background:var(--red)}
.ctxr--warn .ctxr__i{background:var(--orange-d)}
.ctxr--info .ctxr__i{background:var(--blue-d)}
.ctxr__b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.ctxr__b b{font-size:.84rem;font-weight:800}
.ctxr__b small{font-size:.72rem;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
/* The action may not be wider than the row it lives in: `0 0 auto` cannot shrink, so one long
   label (English «Add departure transfer») pushed the whole strip past the column. It keeps its
   natural width when there is room and gives way when there is not. */
.ctxr .lnk{flex:0 1 auto;min-width:0;text-align:start;overflow-wrap:anywhere}

/* §28 — a chip the graph can finish in one tap reads differently from one that opens an editor */
.qchip--go{border-color:var(--green);color:var(--green);font-weight:900}
.qchip--go:hover{background:#eefaf3}
.qchip--pri{background:var(--orange-d);color:#fff;border-color:var(--orange-d);font-weight:900}
.qchip--pri:hover{filter:brightness(.96)}
.nba{margin:.35rem 0 .55rem}
.nba__pri{min-height:44px;font-weight:900}

/* PHASE 2F-6 — trip hero summary */
.thero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.65rem 1rem;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:.75rem .9rem;margin-bottom:.75rem}
.thero__a{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.thero__cust{font-size:1.05rem;font-weight:900}
.thero__meta{font-size:.8rem;font-weight:700;color:var(--muted)}
.thero__st{font-size:.78rem;font-weight:900;color:var(--green)}
.thero__b{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:baseline;font-size:.8rem;font-weight:700;color:var(--muted)}
.thero__w{color:#a15c00;font-weight:900}
.thero__tot{font-size:1.05rem;font-weight:900;color:var(--ink)}
.thero__c{display:flex;gap:.4rem;flex-wrap:wrap}
.ctxr--rev .ctxr__i{background:#5b6b7c}
.pchoose--start{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.pchip--more{border-style:dashed}

@media (max-width:768px){
  .thero{position:sticky;top:0;z-index:40;border-radius:0;margin-inline:-.75rem;padding:.55rem .75rem;
    box-shadow:0 1px 0 var(--line)}
  .thero__c .btn{min-height:40px}
  .ctxs .btn,.ctxr .btn{min-height:40px}
  .nba__pri{width:100%}
}
@media (max-width:420px){
  .thero__b{font-size:.72rem;gap:.25rem .5rem}
  .pb__dates{display:none}
}

/* §39 — quick review */
.rvlead{font-size:.88rem;font-weight:800;margin-bottom:.7rem}
.rvlist{display:flex;flex-direction:column;gap:.45rem}
.rvrow{display:flex;align-items:center;gap:.6rem;background:var(--bg);border-radius:12px;padding:.55rem .7rem}
.rvrow__k{flex:0 0 auto;font-size:.68rem;font-weight:900;border-radius:999px;padding:.15rem .55rem;
  background:#fff;border:1px solid var(--line);color:var(--muted)}
.rvrow--missing .rvrow__k{color:var(--orange-d);border-color:#f4e2bd}
.rvrow--conflict .rvrow__k{color:var(--red);border-color:#f5c7c5}
.rvrow--overridden .rvrow__k{color:var(--blue-d)}
.rvrow--decision .rvrow__k{color:var(--orange-d);border-color:#f0e3c2}
.rvrow__b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.rvrow__b b{font-size:.84rem;font-weight:800}
.rvrow__b small{font-size:.72rem;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.rvok{background:#eaf7f0;color:var(--green);border-radius:12px;padding:1rem;font-weight:800;text-align:center}

/* §29-§32 — the impact list. An overridden value is present, listed, and NOT ticked. */
.imlead{font-size:.95rem;font-weight:800;margin-bottom:.6rem}
.imnote{background:#fffaf0;border:1px solid #f0e3c2;border-radius:10px;padding:.5rem .7rem;
  font-size:.8rem;font-weight:700;color:var(--ink2);margin-bottom:.7rem}
.imlist{display:flex;flex-direction:column;gap:.45rem}
.imrow{display:flex;align-items:flex-start;gap:.6rem;background:var(--bg);border-radius:12px;
  padding:.55rem .7rem;cursor:pointer;min-height:48px}
.imrow input{width:20px;height:20px;margin-top:.15rem;flex:0 0 auto;accent-color:var(--blue-d)}
.imrow__b{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.imrow__b b{font-size:.84rem;font-weight:800}
.imrow__b small{font-size:.76rem;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.imrow__m{font-size:.7rem;font-weight:800;color:var(--orange-d);font-style:normal;margin-top:.15rem}
.imrow--m{border:1px dashed var(--line);background:#fff}

/* §6 — what the flight number resolved to, under the box it was typed in */
.segrow__res{display:block;margin-top:.2rem;font-size:.68rem;font-weight:700;color:var(--muted);min-height:1em}
.segrow__res--ok{color:var(--green)}
.segrow__res--no{color:var(--orange-d)}

@media (max-width:640px){
  .rfld{min-height:48px}
  .ctxq__o{flex-direction:column}
  .ctxq__b{width:100%}
  .ctxr{flex-wrap:wrap}
  .ctxr__b{flex:1 1 100%;order:2}
  /* on a phone the action gets its own line under the sentence it answers */
  .ctxr .lnk{flex:1 1 100%;order:3;padding-inline-start:0}
}
/* the review button carries its own count, so it is a state not a menu item */
.btn--rv{background:#fff8ec;border:1.5px solid #f0d8b0;color:var(--orange-d);font-weight:800}
.btn--rv:hover{border-color:var(--orange-d)}
.btn--rv b{background:var(--orange-d);color:#fff;border-radius:999px;min-width:19px;height:19px;
  display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;margin-inline-start:.35rem;padding:0 .3rem}
/* PHASE 2E — `.inl` is an inline value inside a sentence («13:20» on a flight card), so it is
   sized by the text it sits in, not by a button grid. On a PHONE that same value is a thumb
   target: it gets 30px of height there and nowhere else, because padding a desktop card's every
   value would space the itinerary out for no one's benefit. */
@media (max-width:768px){
  .inl{min-height:30px;display:inline-flex;align-items:center}
}

/* ===== PHASE 2E CORRECTION — REAL FLIGHT RESOLUTION + THE MOBILE FIELD ORDER SYSTEM ==========
   §13-§16 — the editors stop being «the desktop form, narrower». One rhythm, declared once here
   and obeyed by every service editor, so a salesperson builds muscle memory instead of hunting:
   the same label height, the same control height, the same gap between fields, the same section
   spacing, the same price row, the same action in the same place. */
:root{
  --ed-gap:.85rem;          /* between two fields */
  --ed-sec-gap:1.15rem;     /* between two sections */
  --ed-lbl-h:1.05rem;       /* every label occupies one line, even when it is short */
  --ed-inp-h:44px;          /* every control is the same height, and a thumb target */
  --ed-pad:.85rem;          /* inside a card */
}
.edform,.edsec{min-width:0}
.edsec{display:flex;flex-direction:column;gap:var(--ed-gap);margin-bottom:var(--ed-sec-gap)}
.edsec__h{font-size:.72rem;font-weight:900;color:var(--muted);letter-spacing:.03em;
  text-transform:uppercase;margin:0 0 -.2rem}
.edform .fld>span,.edsec .fld>span{min-height:var(--ed-lbl-h);display:flex;align-items:flex-end;gap:.3rem}
.ed__b .fld input:not([type=hidden]),.ed__b .fld select{height:var(--ed-inp-h);min-height:var(--ed-inp-h)}
.ed__b .fld textarea{min-height:calc(var(--ed-inp-h) * 1.4)}
.ed__b .edprice input{height:var(--ed-inp-h)}
.ed__b{overflow-x:hidden}                       /* §27 — a form never scrolls sideways */
.ed__b *{max-width:100%}

/* §4/§5 — the schedule answer. One block under the reference pair, never a redrawn form. */
.edsec--ref{gap:.6rem}
.seggrid--ref{grid-template-columns:1.1fr 1fr;gap:.5rem .6rem;align-items:end}
.segres{display:flex;flex-direction:column;gap:.5rem;margin-top:.1rem}
.segres__t{font-size:.72rem;font-weight:900;color:var(--muted)}
.segres__t--ok{color:var(--green-d,#1f7a4d)}
.segres__w{display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:700;color:var(--muted);
  background:var(--bg);border-radius:11px;padding:.55rem .7rem}
.segres__w--no{background:#fff6f5;color:#a33a2f}
.segres__w--ok{background:#f0fbf4;color:#1f7a4d}
/* CORRECTION §4 — the failure card now carries TWO doors, so the row has to hold two buttons
   without breaking either of them in half. The sentence takes the width it needs, the buttons keep
   their words whole, and when there is not enough room they drop to the next line together rather
   than wrapping mid-phrase («إدخال / يدوي» across two lines is not a label). */
.segres__w{flex-wrap:wrap}
.segres__w .lnk{margin-inline-start:0;white-space:nowrap}
.segres__w button.lnk:first-of-type{margin-inline-start:auto}
.spin{width:13px;height:13px;border-radius:50%;border:2px solid #cfd8e6;border-top-color:var(--blue);
  display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* §5 — the result reads like a ticket, not like filled boxes */
.schds{display:flex;flex-direction:column;gap:.5rem}
.schd{border:1.5px solid #d7e6f5;border-radius:13px;padding:.65rem .75rem;background:#f9fcff;
  display:flex;flex-direction:column;gap:.5rem}
.schd__h{font-size:.78rem;font-weight:900;color:var(--dark);direction:ltr;text-align:start}
.schd__r{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;direction:ltr}
.schd__p{display:flex;flex-direction:column;gap:.1rem;text-align:center}
.schd__ap{font-size:1.02rem;font-weight:900;letter-spacing:.04em}
.schd__tm{font-size:1.02rem;font-weight:900;font-variant-numeric:tabular-nums;color:var(--blue-d)}
.schd__p small{font-size:.7rem;color:var(--muted);font-weight:700}
.schd__m{display:flex;flex-direction:column;align-items:center;color:var(--muted)}
.schd__ar{font-size:1rem;line-height:1}
.schd__m small{font-size:.68rem;font-weight:800}
.schd__trm{font-size:.72rem;font-weight:800;color:var(--muted);direction:ltr;text-align:center}
.schd__go{align-self:stretch;justify-content:center;min-height:40px}

/* WEB RESEARCH §4A/§16 — THE LOOKUP IS AN ACT, SO IT HAS A BUTTON. It sits under the reference
   pair, is disabled until the number and the date are both there, and is the only thing on this
   screen that can spend a research request. */
.seglookup{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.seglookup__go{min-height:40px;justify-content:center}
.seglookup__go:disabled{opacity:.45;cursor:not-allowed}
.seglookup__hint{font-size:.7rem;font-weight:700;color:var(--muted)}

/* §11/§12 — the two facts a ticket must not bury: landing on another day, and being flown by
   somebody other than the airline on the ticket. */
.schd__next{font-size:.72rem;font-weight:900;color:#a36a00;background:#fff8e8;
  border-radius:9px;padding:.28rem .5rem;text-align:center}
.schd__op{font-size:.72rem;font-weight:800;color:var(--muted);text-align:center}
.schd__st{font-size:.66rem;font-weight:800}
/* §14 — one credible source and nothing corroborating it is said in amber, not in green. */
.segres__t--one{color:#a36a00}
/* ARCHITECTURE CORRECTION §5 — A DEEP-SEARCH ANSWER NEVER WEARS THE CONFIRMED COLOUR. Violet, its
   own colour: not the green that means «the schedule says so» and not the red that means «this
   failed» — a suggestion that still needs a human to look at it. */
.segres__t--sug{color:#6b43c9}
.segres__w--sug{background:#f6f2ff;color:#6b43c9}
/* §4 — the deep search is offered as a real choice beside manual entry, and it is never the
   default-looking one: it costs time and money, so it reads as deliberate. */
.lnk--deep{color:#6b43c9;font-weight:900}
.lnk--deep:hover{color:#54309f}
/* §22 — the evidence, for the employee, never for a customer document. */
.schsrc{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.68rem;font-weight:700;color:var(--muted)}
.schsrc a{color:var(--blue-d);text-decoration:underline;text-underline-offset:2px;direction:ltr}
.schsrc a:hover{color:var(--blue)}

/* §29/§30 — 390 and 320. One column, one order, nothing clipped, nothing paired unless the pair
   is obvious (date|time, net|sell, rooms|guests, the ±counter). */
@media (max-width:640px){
  .seggrid,.seggrid--b{grid-template-columns:1fr;gap:var(--ed-gap)}
  .seggrid--ref{grid-template-columns:1.15fr 1fr;gap:.5rem}   /* number | date — one fact, two halves */
  .segrow{padding:.8rem .75rem}
  .schd__r{gap:.35rem}
  .schd__ap,.schd__tm{font-size:.98rem}
  .edprice{grid-template-columns:1fr 1fr;gap:.6rem}           /* net | sell stay side by side */
  .edsec{gap:.75rem}
}
@media (max-width:360px){
  .schd__ap,.schd__tm{font-size:.9rem}
  .schd__p small{font-size:.66rem}
  .edprice{grid-template-columns:1fr}
  .seggrid--ref{grid-template-columns:1fr}
  .fld input,.fld select,.fld textarea{padding:.68rem .6rem;font-size:.95rem}
}

/* §14/§17/§25 — the resolved leg, as information with tappable values */
.segview{border:1px solid #dde7f2;border-radius:12px;padding:.6rem .7rem;background:#fbfdff;
  display:flex;flex-direction:column;gap:.35rem;position:relative}
.segview__r{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.4rem;direction:ltr}
.segview__p{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.segview__a{color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:.1rem}
.segview__c,.segview__t,.segview__h{font-size:.74rem;color:var(--muted);font-weight:800;text-align:center;direction:ltr}
.segview__h{font-size:.85rem;color:var(--ink);font-weight:900}
.segview__next{font-size:.72rem;font-weight:800;color:#a36a00;text-align:center}
.segview__x{position:absolute;inset-inline-end:.55rem;top:.5rem;font-size:.74rem}
.inl--ap{font-size:1rem;font-weight:900;letter-spacing:.04em}
.inl--tm{font-size:1rem;font-weight:900;color:var(--blue-d);font-variant-numeric:tabular-nums}
.segview .inl{background:none;border:0;padding:.1rem .25rem;border-radius:7px;cursor:pointer;color:inherit}
.segview .inl:hover{background:#eef4fb}
.inlwrap{display:inline-flex;flex-direction:column;align-items:center;gap:.05rem}
.segview__m{font-size:.62rem;font-style:normal;font-weight:800;color:#8a5a2b;background:#fff6e8;padding:.05rem .35rem;border-radius:999px}
.segcomm{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .6rem;margin-top:.35rem}
.schd--multi{display:flex;flex-direction:column;gap:.45rem}
.schd__via{font-size:.68rem;font-weight:800;color:var(--muted);text-align:center}
.schd__leg{padding:.35rem 0;border-top:1px dashed #e3ebf4}
.schd__leg:first-child{border-top:0;padding-top:0}
.edsec--route[hidden],.segcomm[hidden]{display:none !important}
@media (max-width:768px){.segview .inl{min-height:32px}}
@media (max-width:640px){
  .segcomm{grid-template-columns:1fr}
  .segrow .edsec--ref{order:1}
  .segrow .edsec--route{order:2}
  .segrow .segcomm{order:3}
  .segrow .segmore{order:4}
  .segrow{display:flex;flex-direction:column}
}

/* PHASE 2F-2 — Stay Block destination headers */
.stays{display:flex;flex-direction:column;gap:.65rem;margin:.85rem 0 1rem}
.stays__h{font-size:.72rem;font-weight:900;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.stayb{border:1px solid #dde7f2;border-radius:14px;padding:.7rem .8rem;background:#fbfdff;display:flex;flex-direction:column;gap:.55rem}
.stayb__h{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.stayb__city{font-size:1.05rem;font-weight:900;letter-spacing:.03em}
.stayb__win{font-size:.78rem;font-weight:800;color:var(--muted)}
.stayb__r{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:.45rem}
.stayb__flow{display:flex;flex-direction:column;gap:.4rem}
.stayb__col{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.stayb__col i{font-size:.66rem;font-style:normal;font-weight:800;color:var(--muted)}
.stayb__col b{font-size:.86rem;font-weight:900}
.stayb__col small{font-size:.7rem;color:var(--muted);font-weight:700}
.stayb__miss{color:var(--muted);font-weight:700}
.stayb__col--h{padding:.35rem 0;border-block:1px dashed #e3ebf4}
.stayb__x{display:flex;flex-direction:column;gap:.05rem;padding:.25rem .4rem;background:#f3f7fc;border-radius:8px}
.stayb__x i{font-size:.66rem;font-style:normal;font-weight:800;color:var(--blue-d)}
.stayb__x b{font-size:.8rem;font-weight:900}
.stayb__x small{font-size:.68rem;color:var(--muted);font-weight:700}
.stayb__add,.stayb__pair{margin-top:.15rem}
.stayb__more{display:flex;flex-wrap:wrap;gap:.35rem .75rem;margin-top:.35rem}
.stayb__bridge{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 .25rem;padding:0 .15rem}
.xfer__role{font-size:.7rem;font-weight:900;color:var(--muted);margin-bottom:.15rem}
.ctxq__p{font-size:.9rem;font-weight:900;margin:.15rem 0 .35rem}
@media (max-width:640px){
  .stayb__r{grid-template-columns:1fr;gap:.5rem}
  .stayb__col--h{border-inline:0;border-block:1px dashed #e3ebf4;padding-block:.35rem;padding-inline:0}
}

/* PHASE 3A � execution / procurement queue */
.pex{margin-top:1rem;padding-top:.85rem;border-top:1px dashed var(--line)}
.pex__h{font-weight:900;font-size:.85rem;margin-bottom:.35rem}
.pex__sum{font-size:.75rem;color:var(--muted);margin-bottom:.5rem}
.pex__list{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.45rem}
.pex__row{display:flex;align-items:center;gap:.45rem;width:100%;text-align:start;background:#f7f9fc;border:1px solid #e8eef6;border-radius:10px;padding:.4rem .55rem;cursor:pointer;font:inherit}
.pex__row:hover{background:#eef3fa}
.pex__ic{width:1.2rem;text-align:center}
.pex__t{flex:1;font-weight:700;font-size:.82rem}
.pex__s{font-size:.72rem;color:var(--muted);font-weight:700}
.prq__bar{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.75rem;align-items:center}
.prq__filters{display:flex;flex-wrap:wrap;gap:.35rem}
.prq__filters .btn.on{background:var(--grad);color:#231a08}
.prq__hint{font-size:.8rem;color:var(--muted);margin-bottom:.8rem}
.prq__table{display:flex;flex-direction:column;gap:.3rem}
.prq__head,.prq__row{display:grid;grid-template-columns:1.1fr 1fr 1.1fr 1.1fr .9fr 1fr .9fr .7fr;gap:.4rem;align-items:center;padding:.55rem .65rem;font-size:.82rem}
.prq__head{font-weight:900;color:var(--muted);font-size:.72rem}
.prq__row{background:#fff;border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:start;font:inherit;width:100%}
.prq__row:hover{border-color:#c9d6e8}
.prq__u--OVERDUE,.prq__u--URGENT{color:#b42318;font-weight:800}
.prq-d__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0}
.prq-d__grid section{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem}
.prq-d__act{list-style:none;padding:0;font-size:.82rem}
.prq-d__act li{padding:.35rem 0;border-bottom:1px solid #eef2f7}
.prq__chg{background:#fff8e8;border:1px solid #f0d9a0;border-radius:12px;padding:1rem;margin:1rem 0}
@media (max-width:900px){
  .prq__head{display:none}
  .prq__row{grid-template-columns:1fr 1fr;gap:.35rem}
}

/* PHASE 3B sourcing */
.prq__bulk{display:flex;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}
.prq__row--sel{display:grid;grid-template-columns:28px 1fr;gap:.35rem;align-items:center}
.prq__rowbtn{display:grid;grid-template-columns:1.1fr 1fr 1.1fr 1.1fr .9fr 1fr .7fr .9fr;gap:.4rem;align-items:center;padding:.55rem .65rem;font-size:.82rem;background:#fff;border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:start;font:inherit;width:100%}
.prq__sug{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0}
.prq__grp{background:#f4f8ff;border:1px solid #d7e4f7;border-radius:12px;padding:1rem;margin:1rem 0}
.prq__grp ul{margin:.4rem 0;padding-inline-start:1.1rem}
@media (max-width:900px){
  .prq__rowbtn{grid-template-columns:1fr 1fr}
}

/* PHASE 3C execution capture */
.prq__exec label{display:block;font-size:.8rem;font-weight:700;margin:.4rem 0}
.prq__actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.prq__warn{background:#fff4e5;border:1px solid #f0c36d;border-radius:8px;padding:.5rem .7rem;margin:.4rem 0;font-size:.82rem;font-weight:700}
.prq__chip{display:inline-block;background:#eef3fa;border-radius:8px;padding:.25rem .5rem;margin:.2rem;font-size:.78rem;text-decoration:none;color:inherit}
.prq__inv{margin:.5rem 0}

/* PHASE 3D — Ops workspace: ONE centered column (no aside, no split grid) */
.ops-workspace,
.otw{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  min-width:0;
  box-sizing:border-box;
  padding:0 0 6rem;
}
.otw--po{padding-bottom:calc(6rem + env(safe-area-inset-bottom,0px))}

/* Kill any legacy page-level split forever */
.otw__layout,
.otw__layout--ws,
.otw__layout--focus{display:block!important;width:100%;min-width:0;max-width:100%}
.otw__aside{display:none!important}
.otw__main{display:block!important;width:100%;min-width:0}
.otw__tl{max-width:none!important;width:100%;min-width:0}

.otw__head{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;min-width:0;width:100%}
.otw__page-title{font-size:clamp(1.25rem,2vw,1.65rem);font-weight:900;margin:0;line-height:1.25;letter-spacing:-.01em}
.otw__ref-line{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:baseline;font-size:.9rem;min-width:0}
.otw__ref{font-weight:900}
.otw__cust{font-weight:700;overflow-wrap:anywhere}
.otw__dates{font-size:.86rem;color:var(--bo-muted,#7b8494)}
.otw__head-links{margin-top:.15rem;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.otw__dot{opacity:.45}
.otw__prog{display:flex;flex-wrap:wrap;gap:.5rem .85rem;font-size:.86rem;padding:.55rem .75rem;background:#fff;border:1px solid var(--bo-line,#e7e9ee);border-radius:10px;margin-top:.35rem;min-width:0;width:100%;box-sizing:border-box}
.otw__ok{color:var(--bo-green,#16a34a);font-weight:800}
.otw__need{color:var(--bo-red,#dc2626);font-weight:800}
.otw__banner{background:#fff8eb;border:1px solid #f0d9a0;border-radius:10px;padding:.7rem .9rem;font-weight:700;margin-bottom:1rem;overflow-wrap:anywhere}

/* Top summary strip — NOT a side column */
.otw__sumstrip{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem .75rem;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  background:#fff;
  border:1px solid var(--bo-line,#e7e9ee);
  border-radius:12px;
  padding:.85rem 1rem;
  margin-bottom:1.1rem;
  box-shadow:0 4px 14px rgba(24,32,54,.05);
}
.otw__kpi{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.otw__kpi span{font-size:.72rem;font-weight:800;color:var(--bo-muted,#7b8494)}
.otw__kpi b{font-size:.92rem;font-weight:800;overflow-wrap:anywhere}

/* Service list — flex column only */
.otw__list,.otw__day{display:flex;flex-direction:column;gap:1rem;width:100%;min-width:0}
.otw__day{margin:0}
.otw__day-h{font-weight:800;font-size:.72rem;color:var(--bo-muted,#7b8494);letter-spacing:.04em}

/* Card — width contained; internal layout only */
.otw__svc{
  width:100%;max-width:100%;min-width:0;
  background:#fff;border:1px solid var(--bo-line,#e7e9ee);border-radius:14px;
  box-shadow:0 4px 14px rgba(24,32,54,.05);overflow:visible;box-sizing:border-box
}
.otw__svc.otw__sev--block{border-color:#f0b4b4;box-shadow:inset 3px 0 0 #dc2626}
.otw__svc--on{outline:2px solid rgba(13,92,99,.18);outline-offset:1px}
.otw__svc--exp{border-color:#c9d6e8}

.otw__card{
  display:flex;flex-direction:column;gap:.55rem;
  padding:.85rem 1rem;cursor:pointer;
  width:100%;max-width:100%;min-width:0;box-sizing:border-box
}
.otw__sel,.otw__identity,.otw__details,.otw__sup-block,.otw__buy-block,.otw__status,.otw__actions{min-width:0;max-width:100%}
.otw__sel{display:flex;align-items:center;min-height:44px;min-width:44px}
.otw__sel input{width:1.25rem;height:1.25rem;accent-color:#0d5c63;cursor:pointer}
.otw__sel--empty{visibility:hidden;min-height:0;min-width:0;height:0;overflow:hidden}
.otw__type{display:flex;align-items:center;gap:.4rem;font-weight:800;font-size:.88rem;color:#334155}
.otw__ic{flex:0 0 auto}
.otw__fn{font-size:1.05rem;font-weight:900;line-height:1.25;margin:.1rem 0}
.otw__route{font-size:.95rem;font-weight:900;line-height:1.35;overflow-wrap:anywhere}
.otw__fn.num,.otw__route.num{unicode-bidi:isolate}
.otw__sub{font-size:.78rem;color:var(--bo-muted,#7b8494);margin-top:.1rem}
.otw__lab{display:block;font-size:.7rem;font-weight:800;color:var(--bo-muted,#7b8494);margin-bottom:.1rem}
.otw__sup{font-size:.9rem;font-weight:700;overflow-wrap:anywhere}
.otw__buy{font-size:1.05rem;font-weight:900;font-variant-numeric:tabular-nums}
.otw__st{display:inline-block;font-size:.72rem;font-weight:800;padding:.3rem .65rem;border-radius:999px;background:#eef2f7;color:#334155;max-width:100%;overflow-wrap:anywhere;white-space:normal}
.otw__st--neutral{background:#eef2f7;color:#475569}
.otw__st--ready{background:#e8f1ff;color:#1d4ed8}
.otw__st--wait{background:#fff6e5;color:#9a6700}
.otw__st--ok{background:#e7f7ef;color:#0f7a45}
.otw__st--block{background:#fde8e8;color:#b42318}
.otw__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;width:100%}
.otw__cta{flex:1 1 auto;justify-content:center;min-height:44px;min-width:0}
.otw__chev{border:0;background:transparent;color:#7b8494;font-size:1.1rem;cursor:pointer;padding:.35rem;min-width:44px;min-height:44px;border-radius:10px;flex:0 0 auto}

.otw__detail{border-top:1px solid #eef2f7;padding:1rem;background:#f7f9fc;display:flex;flex-direction:column;gap:1rem;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.otw__track{display:flex;flex-wrap:wrap;gap:.5rem .9rem;list-style:none;margin:0;padding:0}
.otw__track-i{display:flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:800;color:#7b8494}
.otw__track-i.is-done{color:#16a34a}
.otw__track-i.is-mid{color:#b45309}
.otw__sec{background:#fff;border:1px solid var(--bo-line,#e7e9ee);border-radius:10px;padding:1rem;width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.otw__sec--focus{border-color:#f0d9a0;background:#fffdf8}
.otw__sec--edit{border-color:#c9d6e8}
.otw__sec-h{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem;flex-wrap:wrap}
.otw__sec-h h3{margin:0;font-size:.88rem;font-weight:900}
.otw__sec-foot{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:.75rem}
.otw__autosave{font-size:.72rem;color:#7b8494}
.otw__save{font-size:.72rem;font-weight:800;color:#16a34a}
.otw__read{display:grid;gap:.55rem}
.otw__kv{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .65rem;font-size:.88rem}
.otw__kv>span:first-child{color:#7b8494;min-width:4.5rem}
.otw__kv b{font-weight:800;overflow-wrap:anywhere}
.otw__empty{text-align:center;padding:1.25rem .75rem;color:#7b8494}
.otw__empty p{margin:0 0 .75rem;font-weight:700}
.otw__empty--inline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;padding:.35rem 0}
.otw__fields{display:flex;flex-direction:column;gap:.65rem;width:100%;min-width:0}
.otw__fields .fld{display:flex;flex-direction:column;gap:.3rem;font-size:.88rem;font-weight:700;margin:0;min-width:0}
.otw__fields .fld>span{color:#7b8494;font-size:.72rem;font-weight:800}
.otw__fields .fld__ctrl,.otw__fields .sup-pick__in,.otw__fields .ccy-select,.otq__search{
  width:100%;max-width:100%;border:1.5px solid var(--bo-line,#e7e9ee);border-radius:10px;padding:.65rem .8rem;font:inherit;background:#fff;
  min-height:44px;box-sizing:border-box}
.otw__fields .fld__ctrl:focus,.otw__fields .sup-pick__in:focus,.otw__fields .ccy-select:focus,.otq__search:focus{
  border-color:#29abe2;box-shadow:0 0 0 3px rgba(41,171,226,.14);outline:none}
.otw__buyrow,.otw__money{display:grid;grid-template-columns:1fr;gap:.55rem;min-width:0;width:100%}
.otw__money .money-in,.otw__fields .money-in{font-weight:800;font-variant-numeric:tabular-nums}
.ccy-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
  background-position:calc(100% - 14px) calc(50% - 3px),calc(100% - 9px) calc(50% - 3px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:1.6rem;min-width:0}
[dir=rtl] .ccy-select{background-position:14px calc(50% - 3px),9px calc(50% - 3px)}
.otw__hint{font-size:.75rem;color:#7b8494;margin:0 0 .25rem;font-weight:600;line-height:1.45}
.otw__docok{font-size:.88rem;font-weight:800;color:#16a34a;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.otw__docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.otw__doc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.otw__danger{color:#dc2626!important;font-size:.75rem;margin-top:.55rem;display:inline-block}
.otw__menu{position:relative}
.otw__menu-btn{width:44px;height:44px;border-radius:10px;border:1px solid var(--bo-line,#e7e9ee);background:#fff;cursor:pointer;font-weight:900;line-height:1}
.otw__menu-drop{position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:20;min-width:min(14rem,calc(100vw - 2rem));background:#fff;border:1px solid var(--bo-line,#e7e9ee);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:.35rem;display:flex;flex-direction:column}
.otw__menu-i{display:block;width:100%;text-align:start;border:0;background:transparent;padding:.65rem .7rem;border-radius:8px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;color:inherit;text-decoration:none;min-height:44px}
.otw__menu-i:hover{background:#eef2f7}
.otw__menu-i--warn{color:#dc2626}
.otw__hist{list-style:none;margin:0 0 1rem;padding:0;max-height:min(50vh,360px);overflow:auto}
.otw__hist li{padding:.55rem 0;border-bottom:1px solid #eef2f7;font-size:.88rem}
.otw__hist-t{font-size:.72rem;color:#7b8494;margin-bottom:.2rem}
.otw__cx{display:flex;flex-direction:column;gap:.55rem;margin:.55rem 0;font-size:.88rem;font-weight:700}
.otw__cx label{display:flex;align-items:flex-start;gap:.5rem;min-height:44px;padding:.25rem 0}
.otw__pill{display:inline-flex;align-items:center;font-size:.68rem;font-weight:800;padding:.15rem .45rem;border-radius:999px;background:#eef2f7;color:#475569;margin-inline-start:.35rem}
.otw__pill--ok{background:#e7f7ef;color:#0f7a45}

/* Batch bar — centered contained strip */
.otw__batchbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:min(calc(100vw - 24px),900px);z-index:55;
  display:flex;flex-direction:column;gap:.55rem;align-items:stretch;
  background:#0f172a;color:#fff;padding:.75rem 1rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom));
  border-radius:14px 14px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.12);box-sizing:border-box
}
.otw__batchbar-n{font-weight:800}
.otw__batchbar-a{display:flex;flex-wrap:wrap;gap:.4rem}
.otw__batchbar-a .btn{flex:1 1 auto;min-height:44px;justify-content:center;min-width:0}
.otw__batchbar .btn--g{background:#fff;color:#0f172a;border-color:transparent}

.otw__modal-card{width:min(620px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)}
.otw__sheet{padding:.25rem;max-width:100%;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.otw__sheet--wide{max-width:100%}
.otw__sheet h3,.otw__preview-h h3{margin:0;font-size:clamp(1rem,2.5vw,1.1rem)}
.otw__preview-h{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.35rem}
.otw__sheet-x{min-width:44px;min-height:44px}
.otw__sheet-sum{margin:0 0 .85rem;color:#7b8494}
.otw__sheet-list{margin:0 0 1rem;padding-inline-start:1.1rem;font-weight:700}
.otw__sheet-a{display:flex;flex-direction:column;gap:.4rem}
.otw__sheet-a--row{flex-direction:row;flex-wrap:wrap}
.otw__sheet-a .btn{justify-content:center;min-height:44px}
.otw__sheet-a--sticky{position:sticky;bottom:0;background:#fff;padding-top:.65rem;margin-top:.5rem;padding-bottom:env(safe-area-inset-bottom,0);z-index:2}
.otw__preview-wrap{position:relative;width:100%;min-width:0}
.otw__preview{width:100%;height:min(55vh,520px);border:1px solid var(--bo-line,#e7e9ee);border-radius:10px;background:#f8fafc;margin:.5rem 0 1rem}
.otw__preview[data-empty="1"]{display:none}
.otw__preview-fb{padding:1.25rem;border:1px dashed var(--bo-line,#e7e9ee);border-radius:10px;background:#fff;text-align:center;margin:.5rem 0 1rem}
.otw__preview-fb p{margin:0 0 .85rem;font-weight:800;color:#7b8494}
.otw__sticky{position:fixed;bottom:0;inset-inline:0;background:#1f2937;color:#fff;padding:.7rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:.6rem;z-index:50;font-size:.85rem;flex-wrap:wrap}
.otw__err{color:#dc2626;font-weight:800}

.otq{max-width:980px;margin:0 auto;width:100%;min-width:0}
.otq__head{margin-bottom:1rem}
.otq__title,.otq__head h1{margin:0 0 .25rem;font-size:clamp(1.2rem,2vw,1.35rem);font-weight:900}
.otq__sub{margin:0;color:#7b8494;font-size:.88rem}
.otq__bar{display:flex;flex-direction:column;gap:.65rem;margin-bottom:1rem;min-width:0}
.otq__search{width:100%!important;max-width:100%}
.otq__filters{display:flex;flex-wrap:wrap;gap:.35rem}
.otq__chip{border:1px solid var(--bo-line,#e7e9ee);background:#fff;border-radius:999px;padding:.4rem .75rem;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;color:#334155;min-height:40px}
.otq__chip.is-on{background:linear-gradient(135deg,#f7931e,#ffc20e);border-color:transparent;color:#231a08}
.otq__list{display:flex;flex-direction:column;gap:.55rem}
.otq__card{display:flex;flex-direction:column;gap:.55rem;align-items:stretch;background:#fff;border:1px solid var(--bo-line,#e7e9ee);border-radius:14px;padding:1rem;text-align:start;font:inherit;cursor:pointer;width:100%;max-width:100%;min-width:0;box-shadow:0 4px 14px rgba(24,32,54,.05);box-sizing:border-box}
.otq__card:hover{border-color:#c9d6e8}
.otq__card-main{min-width:0}
.otq__ref{font-weight:900}
.otq__name{font-weight:800;margin-top:.1rem;overflow-wrap:anywhere}
.otq__meta{font-size:.78rem;color:#7b8494;margin-top:.2rem}
.otq__card-side{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .65rem}
.otq__prog{font-size:.75rem;color:#7b8494;font-weight:700}

.prq-d{max-width:720px;margin:0 auto}
.prq-d .otw__sec{margin-top:1rem}
.prq-d__grid{display:none!important}

.sup-pick{position:relative;min-width:0;width:100%}
.sup-pick__drop{position:absolute;inset-inline:0;top:100%;background:#fff;border:1px solid var(--line,#e7e9ee);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:60;overflow:hidden;max-height:none}
.sup-pick__shell{display:flex;flex-direction:column;min-width:0;max-height:inherit}
.sup-pick__list{overflow:auto;max-height:calc(2.75rem * 5);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sup-pick__sheet-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.65rem .75rem;border-bottom:1px solid #eef2f7;font-weight:900}
.sup-pick__x{border:0;background:transparent;font-size:1.35rem;line-height:1;cursor:pointer;min-width:44px;min-height:44px}
.sup-pick__sheet-search{padding:.5rem .65rem;border-bottom:1px solid #eef2f7}
.sup-pick__sheet-q{width:100%;min-height:44px;border:1.5px solid #e7e9ee;border-radius:10px;padding:.55rem .75rem;font:inherit;box-sizing:border-box}
.sup-pick__foot{padding:.45rem .65rem;font-size:.78rem;font-weight:700;color:#7b8494;display:flex;align-items:center;gap:.4rem;border-top:1px solid #f0f2f5}
.sup-pick__empty{padding:1rem .75rem;text-align:center;color:#7b8494;font-weight:700;font-size:.88rem;display:flex;align-items:center;justify-content:center;gap:.4rem}
.sup-pick__spin{width:14px;height:14px;border:2px solid #d8dee8;border-top-color:#0d5c63;border-radius:50%;animation:supSpin .7s linear infinite;flex:0 0 auto}
@keyframes supSpin{to{transform:rotate(360deg)}}
.sup-pick__manual-row{padding:.45rem .65rem;border-top:1px solid #eef2f7}
.sup-pick--sheet-open .sup-pick__drop,
.sup-pick__drop--sheet{
  position:fixed!important;inset-inline:0!important;bottom:0!important;top:auto!important;left:0!important;right:0!important;
  max-height:min(72vh,520px)!important;width:100%!important;max-width:100%!important;
  border-radius:16px 16px 0 0;z-index:120!important;padding:0;
  box-shadow:0 -8px 28px rgba(20,26,34,.18);background:#fff;overflow:hidden}
.sup-pick__drop--sheet .sup-pick__list{max-height:min(48vh,360px)}
.sup-pick__bd{position:fixed;inset:0;z-index:115;background:rgba(20,26,34,.4);border:0;padding:0;cursor:pointer}
.sup-pick__opt{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-height:44px;padding:.55rem .65rem;border:none;background:transparent;font:inherit;cursor:pointer;text-align:start;border-bottom:1px solid #f0f2f5;box-sizing:border-box}
.sup-pick__opt:hover,.sup-pick__opt.is-active{background:#f3f6fb}
.sup-pick__opt b{font-weight:800;font-size:.9rem;overflow-wrap:anywhere}
.sup-pick__opt span{font-size:.75rem;color:#7b8494;overflow-wrap:anywhere}

/* >=600: summary strip denser */
@media (min-width:600px){
  .otw__sumstrip{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* >=768: summary 5-up; batch row; card internals denser */
@media (min-width:768px){
  .otw__sumstrip{grid-template-columns:repeat(5,minmax(0,1fr))}
  .otw__batchbar{flex-direction:row;align-items:center;justify-content:space-between}
  .otw__batchbar-a .btn{flex:0 1 auto}
  .otw__buyrow,.otw__money{grid-template-columns:minmax(110px,140px) minmax(0,1fr)}
  .otq__card{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}
}

/* >=900: NEVER horizontal card zones in narrow Cursor panes — keep stacked.
   Horizontal packing caused right-edge clipping of service title/route/CTA. */
@media (min-width:900px){
  .otw__card{
    flex-direction:column!important;flex-wrap:nowrap;align-items:stretch;gap:.55rem
  }
  .otw__lab{display:block}
  .otw__actions{width:100%;justify-content:stretch}
  .otw__cta{width:100%;flex:1 1 auto}
}

@media (max-width:420px){
  .ops-workspace,.otw{padding-inline:0}
  .otw__buyrow,.otw__money{grid-template-columns:1fr}
  .otw__modal-card{width:calc(100vw - 24px)!important}
  .otw__sumstrip{grid-template-columns:1fr}
}

/* Ops shell header — same content rhythm */
body.otw-page .content{max-width:1180px;padding-inline:clamp(12px,2.5vw,20px)}
@media (max-width:767px){
  body.otw-page .top{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "menu title"
      "search search";
    gap:.45rem .55rem;align-items:center;padding:.65rem 12px
  }
  body.otw-page .top > div:first-child{display:contents}
  body.otw-page .menu-btn{grid-area:menu;display:inline-flex!important}
  body.otw-page .top h1{grid-area:title;font-size:1.05rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  body.otw-page .top__act{display:none!important} /* language/trips via drawer on phone */
  body.otw-page .top .bo-search,
  body.otw-page .top .bo-search:not(:focus-within),
  body.otw-page .top .bo-search:focus-within{
    grid-area:search;width:100%!important;max-width:none!important;margin:0!important;
    position:relative!important;inset:auto!important;top:auto!important;padding:0!important;
    border:0!important;box-shadow:none!important;background:transparent!important;overflow:visible!important
  }
  body.otw-page .bo-search__in{width:100%;min-height:44px}
  .modal.modal--sheet .otw__modal-card,.modal.modal--sheet .modal__card{width:100%!important;max-width:100%;max-height:92vh;border-radius:16px 16px 0 0;margin:0}
  .modal.modal--full .otw__modal-card,.modal.modal--full .modal__card{height:100vh;max-height:100vh;border-radius:0;width:100%!important}
  .otw__preview{height:min(60vh,100%)}
  .otw__hist{max-height:min(40vh,280px)}
}

.num{direction:ltr;unicode-bidi:isolate;display:inline}

/* legacy leftovers kept minimal */
.otw__dlg label{display:block;margin:.45rem 0;font-size:.82rem;font-weight:700}
.otw__fin{background:#f0f7f4;border:1px solid #cfe5d8;border-radius:12px;padding:.65rem .7rem;margin-bottom:.8rem}
.otw__fin h3{margin:0 0 .4rem;font-size:.85rem}

.fin{max-width:1100px;margin:0 auto}
.fin__sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem;margin-bottom:1rem}
.fin__kpi{background:#f7f9fc;border:1px solid #e4ebf5;border-radius:12px;padding:.7rem .8rem;font-size:.82rem}
.fin__kpi b{display:block;margin-top:.25rem;font-size:.95rem}
.fin__tabs,.fin__filters{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0}
.fin__tbl{width:100%;border-collapse:collapse;font-size:.82rem;background:#fff}
.fin__tbl th,.fin__tbl td{border-bottom:1px solid #eef2f7;padding:.45rem .4rem;text-align:start}
.fin__note{font-size:.75rem;color:var(--muted);margin:.35rem 0 .7rem}

/* ===== PHASE 5A � Back Office shell ===== */
.side__group{margin-bottom:.55rem;padding-bottom:.35rem;border-bottom:1px solid #333a45}
.side__group:last-child{border-bottom:none}
.side__group-h{display:flex;align-items:center;justify-content:space-between;padding:.35rem .75rem;color:#8b93a1;font-size:.68rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.side__badge{background:var(--orange);color:#231a08;border-radius:999px;padding:.05rem .4rem;font-size:.65rem;font-weight:900}
.bo-dash__head{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.bo-dash__head h2{font-size:1.25rem;margin:0}
.bo-dash__meta{color:var(--muted);font-size:.85rem;font-weight:700;margin-top:.2rem}
.bo-dash__note{font-size:.75rem;color:var(--muted);max-width:28ch}
.bo-dash__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem;margin-bottom:1.1rem}
.bo-dash__card{text-align:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem;box-shadow:var(--shadow);cursor:pointer}
.bo-dash__card:hover{border-color:var(--blue)}
.bo-dash__lab{display:block;color:var(--muted);font-size:.78rem;font-weight:700}
.bo-dash__val{display:block;margin-top:.35rem;font-size:1.35rem;font-weight:900}
.bo-dash__quick{display:flex;flex-wrap:wrap;gap:.4rem}
.bo-denied{max-width:420px;margin:2rem auto;text-align:center}
.bo-denied h3{color:var(--red);margin-bottom:.5rem}
@media(max-width:1440px){.bo-dash__grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
@media(max-width:768px){
  .bo-dash__grid{grid-template-columns:1fr 1fr}
  .side__group-h{font-size:.62rem}
}
@media(max-width:420px){
  .bo-dash__grid{grid-template-columns:1fr}
  .bo-dash__val{font-size:1.15rem}
}

/* ===== PHASE 5B — search + supplier360 + my work =====
.bo-search{position:relative;margin-inline-start:.8rem;flex:1;max-width:420px}
.bo-search__in{width:100%;padding:.45rem .7rem;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-weight:700;font-size:.85rem}
.bo-search__in:focus{outline:none;border-color:var(--blue)}
.bo-search__drop{position:absolute;inset-inline:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:70vh;overflow:auto;z-index:80;padding:.4rem}
.bo-search__gh{font-size:.68rem;font-weight:900;color:var(--muted);padding:.35rem .5rem;text-transform:uppercase}
.bo-search__item{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;padding:.5rem .55rem;border:none;background:transparent;border-radius:8px;font:inherit;cursor:pointer;text-align:start}
.bo-search__item:hover{background:#f3f6fb}
.bo-search__item b{font-size:.88rem}
.bo-search__item span{font-size:.75rem;color:var(--muted)}
.bo-search__empty,.bo-search__loading{padding:.8rem;color:var(--muted);font-size:.85rem;font-weight:700}
.bo-badge{font-style:normal;background:#eef6ee;color:#166534;padding:.05rem .35rem;border-radius:6px;font-size:.68rem;font-weight:800}
.bo-work{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.8rem;margin-bottom:1rem;box-shadow:var(--shadow)}
.bo-work h3{margin:0 0 .5rem;font-size:.95rem}
.bo-work__row{display:flex;align-items:center;gap:.7rem;width:100%;padding:.55rem .4rem;border:none;background:transparent;border-radius:8px;font:inherit;font-weight:700;cursor:pointer;text-align:start}
.bo-work__row:hover{background:#f7f9fc}
.bo-work__n{min-width:1.8rem;height:1.8rem;border-radius:8px;background:var(--grad);color:#231a08;display:grid;place-items:center;font-weight:900;font-size:.85rem}
.bo-dash__card--att{border-color:#f7931e;box-shadow:0 0 0 1px rgba(247,147,30,.25)}
.s360__crumb{font-size:.78rem;color:var(--muted);margin-bottom:.5rem}
.s360__h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem;margin-bottom:.7rem}
.s360__h h2{margin:0;font-size:1.25rem}
.s360__ind{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;font-weight:700}
.s360__tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem}
.s360__sec{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem}
.s360__act{list-style:none;padding:0}
.s360__act li{padding:.5rem 0;border-bottom:1px solid #eef2f7;font-size:.88rem;display:flex;justify-content:space-between;gap:.5rem;align-items:center}
@media(max-width:768px){
  .bo-search{max-width:none;margin:.4rem 0 0;width:100%}
  .top{flex-wrap:wrap}
}
@media(max-width:420px){
  .bo-work__row{font-size:.82rem}
  .s360__h{padding:.75rem}
}

/* ===== PHASE 5C � contract builder UX + phone + import + travelers ===== */
.qc5c .iphone,.iphone{display:flex;align-items:stretch;gap:0;position:relative;border:1.5px solid var(--line);border-radius:10px;overflow:visible;background:#fff}
.iphone__cc{display:flex;align-items:center;gap:.35rem;padding:.45rem .55rem;border:none;background:#f3f6fb;font:inherit;font-weight:800;cursor:pointer;border-inline-end:1px solid var(--line);border-radius:10px 0 0 10px}
.iphone__nsn{flex:1;border:none;padding:.55rem .7rem;font:inherit;font-weight:700;min-width:0}
.iphone__drop{position:absolute;inset-inline:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:90;max-height:260px;overflow:auto;padding:.4rem}
.iphone__search{width:100%;padding:.4rem .55rem;border:1px solid var(--line);border-radius:8px;margin-bottom:.35rem;font:inherit}
.iphone__opt{display:flex;gap:.45rem;align-items:center;width:100%;padding:.45rem .5rem;border:none;background:transparent;font:inherit;cursor:pointer;text-align:start;border-radius:8px}
.iphone__opt:hover{background:#f3f6fb}
.iphone__opt small{color:var(--muted);margin-inline-start:auto}
.trav-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.85rem;margin-bottom:.8rem;box-shadow:var(--shadow)}
.trav-panel__h{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.55rem}
.trav-panel__h h3{margin:0;font-size:1rem}
.trav-panel__acts{display:flex;gap:.35rem;flex-wrap:wrap}
.trav-panel__b{display:flex;flex-wrap:wrap;gap:.45rem}
.tchip{display:flex;flex-direction:column;gap:.1rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:12px;background:#fafbfd;min-width:140px;position:relative}
.tchip .x{position:absolute;inset-inline-end:.25rem;top:.15rem}
.si__ta{width:100%;font:inherit;padding:.7rem;border:1.5px solid var(--line);border-radius:10px;min-height:140px}
.si__tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.65rem}
.si__tab{border:1px solid var(--line);background:#f5f7fb;border-radius:999px;padding:.35rem .75rem;font:inherit;cursor:pointer}
.si__tab.on{background:var(--brand,#1f6f8f);color:#fff;border-color:transparent}
.si__file{display:block;padding:.85rem;border:1.5px dashed var(--line);border-radius:12px;text-align:center;cursor:pointer}
.si__row{display:flex;align-items:flex-start;gap:.5rem;padding:.55rem;border-bottom:1px solid #eef2f7;font-size:.88rem}
.si__body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.si__conf{font-weight:900;min-width:1.2rem}
.si__conf--confident{color:#166534}
.si__conf--needs_review{color:#b45309}
.si__conf--unknown{color:#64748b}
.tchip__acts{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.25rem}
.trav-detail__grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.trav-detail__grid>div{display:flex;flex-direction:column;gap:.2rem;padding:.55rem;border:1px solid var(--line);border-radius:10px;background:#fafbfd}
.trav-detail__grid span{font-size:.75rem;color:#64748b}
@media (max-width:480px){
  .trav-detail__grid{grid-template-columns:1fr}
  .si__tabs{flex-direction:column}
}
.pp__grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.pp__grid label{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;font-weight:700}
.pp__grid input{padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;font:inherit}
/* legacy duplicate — kept as no-op safety; primary rules live earlier in this file */
.compose__add{position:relative;display:inline-flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.compose__add-btn--open{position:relative;z-index:112}
.svc-dd{position:absolute;inset-inline-start:0;top:calc(100% + 4px);min-width:min(100vw - 2rem,280px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:110;padding:.35rem;display:flex;flex-direction:column;gap:.15rem;pointer-events:auto}
.svc-dd[hidden]{display:none!important}
.svc-dd__head{display:none;align-items:center;justify-content:space-between;padding:.35rem .5rem .55rem;border-bottom:1px solid var(--line);margin-bottom:.25rem}
.svc-dd__head b{font-size:.9rem;font-weight:900}
.svc-dd__x{border:none;background:transparent;font:inherit;font-size:1.1rem;cursor:pointer;padding:.25rem .45rem;border-radius:8px;line-height:1}
.svc-dd__x:hover{background:#f3f6fb}
.svc-dd__item{display:flex;align-items:center;gap:.65rem;width:100%;min-height:2.75rem;padding:.55rem .7rem;border:none;border-radius:10px;background:transparent;font:inherit;cursor:pointer;text-align:start;pointer-events:auto;position:relative;z-index:1}
.svc-dd__item:hover,.svc-dd__item:focus{background:#f3f6fb;outline:none}
.svc-dd__ic{font-size:1.15rem;width:1.6rem;text-align:center}
.svc-dd-bd{position:fixed;inset:0;z-index:105;background:rgba(20,26,34,.35);border:none;padding:0;cursor:pointer;pointer-events:auto}
.svc-dd--sheet{position:fixed!important;inset-inline:0!important;bottom:0!important;top:auto!important;left:0!important;right:0!important;border-radius:16px 16px 0 0;max-height:70vh;overflow:auto;padding:.75rem .75rem calc(1.2rem + env(safe-area-inset-bottom,0));min-width:0;z-index:110!important;box-shadow:0 -8px 28px rgba(20,26,34,.18)}
.svc-dd--sheet .svc-dd__head{display:flex}
.sugbar{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.65rem 0 .35rem;padding:.45rem .55rem;border-radius:12px;background:#f5f7fa;border:1px solid var(--line)}
.sugbar__l{font-size:.72rem;font-weight:800;color:var(--muted);margin-inline-end:.2rem}
.sugchip{display:inline-flex;align-items:center;min-height:2rem;padding:.25rem .65rem;border-radius:999px;border:1px solid #d7dde7;background:#fff;color:#334155;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer}
.sugchip:hover{background:#eef2f7;border-color:#c5cedb}
.commercial{margin-top:.85rem;padding:.75rem;border:1px solid var(--line);border-radius:14px;background:#fafbfd}
.commercial__row{margin-top:.45rem}
.commercial__fx{font-size:.72rem;margin:.35rem 0 0}
.money-in{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.money-in:focus{outline:2px solid var(--blue, #3b82f6);outline-offset:1px}
.bagone{display:flex;flex-wrap:wrap;gap:.45rem .85rem;align-items:baseline;padding:.45rem .6rem;
  border:1px solid var(--line);border-radius:12px;background:#fafbfd;font-size:.85rem}
.bagone__h{font-weight:800;margin-inline-end:.25rem}
.ages{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem}
.fld--age{min-width:7.5rem;flex:0 0 auto}
.fld--age select.age-in{padding:.35rem .5rem;font-size:.85rem;max-width:8rem}
.paxb__sum{display:flex;flex-wrap:wrap;gap:.35rem .75rem;align-items:baseline;margin:.35rem 0 .55rem}
.paxb__sum b{font-weight:800}
.tm--5{min-width:6.5rem;font-variant-numeric:tabular-nums}
@media(max-width:430px){
  .svc-dd:not(.svc-dd--sheet){position:fixed;inset-inline:0;bottom:0;top:auto;border-radius:16px 16px 0 0;max-height:70vh;overflow:auto;padding:.75rem .75rem 1.2rem;min-width:0}
  .commercial__row{flex-direction:column}
}
@media(max-width:430px){
  .pb__grid{display:block}
  .pb__rail{margin-top:.8rem}
  .pp__grid{grid-template-columns:1fr}
  .trav-panel__acts .btn{flex:1}
  .compose__row{flex-direction:column}
  .tchip{min-width:calc(50% - .3rem)}
}
@media(max-width:768px){
  .pb__grid{grid-template-columns:1fr}
  .side{width:min(86vw,280px)}
}
@media(min-width:1280px){
  .pb__grid{grid-template-columns:1fr 320px;gap:1rem}
}

/* UX correction — one-step traveler + hotel live picker + segment layover */
.trav-create{display:flex;flex-direction:column;gap:.85rem}
.trav-create__lbl{font-size:.78rem;font-weight:800;color:var(--muted)}
.trav-type{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}
.trav-type__b{flex:1;min-width:4.5rem;padding:.55rem .4rem;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-weight:800;cursor:pointer}
.trav-type__b.on{border-color:var(--orange);background:#fff7f0;color:var(--orange-d)}
.trav-create__paths{display:flex;gap:.4rem}
.trav-path{flex:1;padding:.55rem .5rem;border:1px dashed var(--line);border-radius:10px;background:#fafbfd;font:inherit;font-weight:700;cursor:pointer}
.trav-path.on{border-style:solid;border-color:var(--orange);background:#fff}
.trav-saved{border:1px solid var(--line);border-radius:12px;padding:.4rem .6rem;background:#fafbfd}
.trav-saved summary{font-weight:800;cursor:pointer;padding:.25rem 0}
.seglayover{margin:.35rem 0 .15rem;padding:.35rem .55rem;border-radius:8px;background:#f0f7ff;font-size:.75rem;font-weight:700;color:#1e4a7a}
.seglayover--err{background:#fff1f0;color:#9b1c1c}
.segrow--ret{border-color:#c4d4f0;background:#f7faff}
.itin__lay{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);padding:.25rem 0}
.hotpick{display:flex;flex-direction:column;gap:.45rem;width:100%;margin-bottom:.35rem}
.hotpick__search{display:flex;gap:.4rem}
.hotpick__q{flex:1;padding:.5rem .65rem;border:1px solid var(--line);border-radius:10px;font:inherit}
.hotpick__res{display:flex;flex-direction:column;gap:.4rem;max-height:240px;overflow:auto}
.hotcard{display:flex;gap:.6rem;align-items:center;text-align:start;padding:.5rem;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font:inherit}
.hotcard:hover,.hotcard:focus-visible{border-color:var(--orange);background:#fffaf6}
.hotcard__img{width:52px;height:52px;object-fit:cover;border-radius:8px;flex-shrink:0}
.hotcard__ph{width:52px;height:52px;display:grid;place-items:center;background:#f4f6f8;border-radius:8px;flex-shrink:0}
.hotcard__b{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.hotcard__b b{font-weight:800}
.hotcard__b small{color:var(--muted);font-size:.74rem}
.hotpick__sel{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:10px;background:#f4fbf6}
.hotpick__badge{font-size:.68rem;font-weight:800;padding:.15rem .4rem;border-radius:6px;background:#fff3e6;color:var(--orange-d)}
.compose__hero{display:flex;flex-direction:column;gap:.45rem;padding:.75rem;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fffaf6,#fff)}
.compose__lab{font-weight:900;font-size:.9rem}
.compose__in--area{width:100%;min-height:3.2rem;resize:vertical;padding:.65rem .75rem;border:1px solid var(--line);border-radius:12px;font:inherit}
.compose__acts{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.compose__examples{display:flex;flex-wrap:wrap;gap:.35rem}
.compose__examples small{padding:.2rem .45rem;background:#f4f6f8;border-radius:8px;color:var(--muted);font-size:.72rem}
.compose__tiles--lg{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.45rem;margin-top:.65rem}
.qchip--svc{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.7rem .4rem;min-height:4.2rem}
.qchip__ic{font-size:1.25rem}
.flight-modes{display:flex;gap:.4rem;margin-bottom:.55rem}
.flight-paste{margin-bottom:.65rem;padding:.55rem;border:1px dashed var(--line);border-radius:12px;background:#fafbfd}
.tb-rows{display:flex;flex-direction:column;gap:.65rem;margin:0.75rem 0}
.tb-row{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;gap:.4rem;padding:.55rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.pp-viewer__frame{width:100%;min-height:360px;border:1px solid var(--line);border-radius:12px;background:#111}
@media(max-width:430px){
  .trav-create__paths,.trav-type,.hotpick__search{flex-direction:column}
  .hotcard__img,.hotcard__ph{width:44px;height:44px}
  .tb-row{grid-template-columns:1fr 1fr}
  .compose__tiles--lg{grid-template-columns:repeat(2,1fr)}
}