/* groupeak design system — tokens + base components (DESIGN-system.md, 2026-11-01).
   Load order: vendor/fonts/heebo.css -> design/tokens.css -> (page css). Brand tokens are overwritten at runtime from
   design/brand.js (hex only). Variant class on <body>: v-a "נקי" (recommended) | v-b "רך".
   PDF-safe by construction (html2canvas 1.4): no gradient / backdrop-filter / filter / transform / clip-path / color-mix() /
   object-fit / heavy shadows / letter-spacing / sticky-fixed inside #sheet. Exceptions, both outside the captured #sheet:
   the mobile sticky bar (position:fixed) and the button loading spinner (rotate animation, buttons are .no-print).
   The 0.01px letter-spacing under body.capturing is the existing html2canvas bidi workaround (see client.js), capture-only. */

:root{
  --n-50:#f8fafc;--n-100:#f1f5f9;--n-200:#e2e8f0;--n-300:#cbd5e1;--n-400:#94a3b8;
  --n-500:#64748b;--n-600:#475569;--n-700:#334155;--n-800:#1e293b;--n-900:#0f172a;
  --brand:#1a6aa6; --brand-50:#eef4f9; --brand-100:#dce8f2; --brand-text:#1a6aa6; --on-brand:#fff;
  --brand-line:#1a6aa6;   /* decorative brand lines; = brand, or brandText when the brand is near-white (brand.js LINE_MIN guard) */
  --ok:#15803d;--ok-bg:#f0fdf4;--ok-line:#bbf7d0;
  --warn:#92400e;--warn-bg:#fffbeb;--warn-line:#f59e0b;
  --bad:#b91c1c;--bad-bg:#fef2f2;--bad-line:#fecaca;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-pill:999px;
  --font:"Heebo","Segoe UI",Arial,sans-serif;
  --h1:700 24px/32px var(--font); --h2:700 18px/26px var(--font); --h3:600 16px/24px var(--font);
  --body:400 16px/26px var(--font); --small:400 14px/22px var(--font); --cap:500 13px/20px var(--font);
  --shadow-1:0 1px 2px rgba(15,23,42,.06); --shadow-2:0 4px 12px rgba(15,23,42,.08);
  --line:1px solid var(--n-200); --line-strong:1px solid var(--n-300);
  --focus:0 0 0 3px var(--brand-100), 0 0 0 1px var(--brand-text);

  /* variant-driven (defaults = A) */
  --muted:var(--n-500);
  --gap-sec:32px;
  --sheet-bg:var(--n-50);
  --sec-bg:#fff; --sec-border:var(--line);
  --tile-bg:var(--n-50);
  --hdr-bg:#fff; --hdr-fg:var(--n-900); --hdr-sub:var(--n-500); --hdr-strip:4px solid var(--brand-line); --hdr-border:var(--line);
}

/* ---------------------------------------------------------------- variants */
body.v-a{
  --r-md:10px; --r-lg:14px; --gap-sec:32px;
  --sheet-bg:var(--n-50); --sec-bg:#fff; --sec-border:var(--line); --tile-bg:var(--n-50);
  --hdr-bg:#fff; --hdr-fg:var(--n-900); --hdr-sub:var(--n-500); --hdr-strip:4px solid var(--brand-line); --hdr-border:var(--line);
  --muted:var(--n-500);
}
body.v-b{
  --r-md:14px; --r-lg:20px; --gap-sec:24px;
  --sheet-bg:#fff; --sec-bg:var(--brand-50); --sec-border:0 none; --tile-bg:#fff;
  --hdr-bg:var(--brand); --hdr-fg:var(--on-brand); --hdr-sub:var(--on-brand); --hdr-strip:0 none; --hdr-border:0 none;
  --muted:var(--n-600);            /* n-500 on a brand-50 surface can drop under 4.5:1 -> one step darker in B */
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font:var(--body); color:var(--n-900); background:var(--n-50)}
h1,h2,h3,h4,p{margin:0}
h1{font:var(--h1)}
h2{font:var(--h2)}
h3{font:var(--h3)}
.small{font:var(--small)}
.cap{font:var(--cap)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
a{color:var(--brand-text); text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:none; box-shadow:var(--focus)}
bdi{unicode-bidi:isolate}
.icon{width:20px; height:20px; flex:none; vertical-align:-4px}
.icon-32{width:32px; height:32px; color:var(--n-400)}
[hidden]{display:none !important}

/* ---------------------------------------------------------------- container / sheet / section */
.page{max-width:760px; margin:0 auto; padding:var(--s4)}
.page.wide{max-width:1000px}
#sheet,.sheet{container:sheet / inline-size; background:var(--sheet-bg)}
.sec{background:var(--sec-bg); border:var(--sec-border); border-radius:var(--r-lg); padding:var(--s4); margin-top:var(--gap-sec)}
.sec > h2{color:var(--n-900); border-bottom:var(--line); padding-bottom:var(--s2); margin-bottom:var(--s3)}
body.v-b .sec > h2{border-bottom-color:var(--brand-100)}
.sec .lead-text{color:var(--n-700); margin-bottom:var(--s3)}
.card{background:#fff; border:var(--line); border-radius:var(--r-lg); padding:var(--s4); box-shadow:var(--shadow-1)}
.tile{background:var(--tile-bg); border-radius:var(--r-md); padding:var(--s3) var(--s4)}
.stack > * + *{margin-top:var(--s3)}
@container sheet (min-width:640px){
  .sec{padding:var(--s5)}
}
@media (min-width:640px){ .page{padding:var(--s6)} }

/* ---------------------------------------------------------------- header (agent branding) */
.hdr{display:flex; align-items:center; gap:var(--s4); background:var(--hdr-bg); color:var(--hdr-fg); border:var(--hdr-border); border-top:var(--hdr-strip); border-radius:var(--r-lg); padding:var(--s4)}
.hdr h1{font:700 22px/30px var(--font); color:var(--hdr-fg)}
.hdr .hdr-sub{font:var(--small); color:var(--hdr-sub)}
.logo-slot{width:56px; height:56px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:var(--r-md); background:#fff; border:var(--line); overflow:hidden}
.logo-slot img{display:block; max-width:56px; max-height:56px; width:auto; height:auto}   /* never object-fit (html2canvas distorts it) */
.logo-ph{font:700 16px/20px var(--font); color:var(--brand-text)}
@container sheet (min-width:640px){
  .hdr{padding:var(--s5)}
  .hdr h1{font:var(--h1)}
}

/* ---------------------------------------------------------------- status row + steps hint */
.status-row{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); margin-top:var(--s4); font:var(--small); color:var(--n-700)}
.status-row b{color:var(--n-900); font-weight:600}
.status-row .badge{margin-inline-start:auto}
.steps{margin-top:var(--s3); font:var(--small); color:var(--n-700)}
.steps b{color:var(--n-900)}

/* ---------------------------------------------------------------- badges + pills */
.badge{display:inline-flex; align-items:center; gap:6px; font:600 13px/20px var(--font); padding:2px 10px; border-radius:var(--r-pill); background:var(--n-100); color:var(--n-600); white-space:nowrap}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.badge.open{background:var(--brand-50); color:var(--brand-text)}
.badge.signed{background:var(--ok-bg); color:var(--ok)}
.badge.expired{background:var(--n-100); color:var(--n-600)}
.badge.cancelled{background:var(--bad-bg); color:var(--bad)}
.badge.neutral{background:var(--n-100); color:var(--n-700)}
.badge.neutral::before{display:none}
.pill-req{display:inline-block; font:600 12px/18px var(--font); padding:0 8px; border-radius:var(--r-pill); background:var(--brand-50); color:var(--brand-text); margin-inline-start:6px; vertical-align:1px}

/* ---------------------------------------------------------------- fields */
.field{display:block}
.field > label,.field .lbl{display:block; font:600 13px/20px var(--font); color:var(--n-700); margin-bottom:6px}
.field input[type=text],.field input[type=tel],.field input[type=email],.field input:not([type]),.field select,.field textarea{
  width:100%; min-height:48px; padding:10px 12px; border:var(--line-strong); border-radius:var(--r-md); font:400 16px/24px var(--font); color:var(--n-900); background:#fff}
.field textarea{min-height:96px}
.field input::placeholder{color:var(--n-500); opacity:1}
.field .help{font:var(--cap); color:var(--muted); margin-top:4px}
.field .err{font:var(--cap); font-weight:600; color:var(--bad); margin-top:4px}
.field.client input{border:2px solid var(--brand-text); background:var(--brand-50)}   /* functional border: brandText keeps >= 3:1 for any brand */
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border:2px solid var(--bad); background:var(--bad-bg)}
.field.is-invalid > label{color:var(--bad)}
.fgrid{display:grid; grid-template-columns:1fr; gap:var(--s3)}
@container sheet (min-width:640px){ .fgrid{grid-template-columns:1fr 1fr; gap:var(--s3) var(--s4)} }

.check{display:flex; gap:var(--s3); align-items:flex-start; min-height:44px; padding:var(--s2) 0; font:var(--body); cursor:pointer}
.check input{width:22px; height:22px; margin:2px 0 0; flex:none; accent-color:var(--brand-text)}
.check.is-invalid{color:var(--bad)}

/* ---------------------------------------------------------------- buttons */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:48px; padding:0 var(--s5); border-radius:var(--r-md); border:2px solid transparent; font:600 16px/20px var(--font); text-decoration:none; cursor:pointer; background:transparent; color:var(--n-700)}
.btn::after{content:""; position:absolute; inset:-2px; border-radius:inherit; background:transparent; pointer-events:none}
.btn:hover::after{background:rgba(0,0,0,.08)}
.btn-primary{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.btn-secondary{background:#fff; color:var(--brand-text); border-color:var(--brand-text)}
.btn-ghost{background:transparent; color:var(--n-700); border-color:transparent}
.btn-danger{background:#fff; color:var(--bad); border-color:var(--bad)}
.btn-block{display:flex; width:100%}
.btn-sm{min-height:44px; padding:0 var(--s4); font-size:15px}
.btn:disabled,.btn[aria-disabled=true]{background:var(--n-200); color:var(--n-500); border-color:var(--n-200); cursor:not-allowed}
.btn:disabled::after{background:transparent}
.btn[aria-busy=true]{color:transparent; cursor:wait}
.btn[aria-busy=true]::before{content:""; position:absolute; width:20px; height:20px; border-radius:50%; border:2px solid var(--on-brand); border-right-color:transparent; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .btn[aria-busy=true]::before{animation:none} }

/* ---------------------------------------------------------------- confidence (agent panel / platform) */
.conf-med{border-inline-start:3px solid var(--warn-line); padding-inline-start:var(--s3)}
.conf-low{background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn); border-radius:var(--r-md); padding:var(--s2) var(--s3)}
.conf-note{font:var(--cap); color:var(--warn)}

/* ---------------------------------------------------------------- passenger card */
.pax-list{display:grid; grid-template-columns:1fr; gap:var(--s3)}
@container sheet (min-width:640px){ .pax-list{grid-template-columns:1fr 1fr} }
.pax{background:var(--tile-bg); border-radius:var(--r-md); padding:var(--s4)}
.pax .pax-name{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); font:700 16px/24px var(--font); margin-bottom:var(--s3)}
.pax .fgrid{grid-template-columns:1fr !important}

/* ---------------------------------------------------------------- flight card */
.flight{background:var(--tile-bg); border-radius:var(--r-md); border-inline-start:3px solid var(--brand-line); padding:var(--s3) var(--s4)}
.flight + .flight{margin-top:var(--s3)}
.flight .fl-line1{display:flex; align-items:center; gap:var(--s2); font:600 16px/24px var(--font)}
.flight .fl-line1 .icon{color:var(--n-500)}
.flight .fl-date{font:var(--small); color:var(--muted)}
.flight .fl-legs{display:flex; align-items:flex-start; gap:var(--s3); margin-top:var(--s2)}
.flight .leg{flex:1 1 0; min-width:0}
.flight .leg-end{text-align:end}
.flight .leg .time{display:block; font:700 20px/28px var(--font); font-variant-numeric:tabular-nums}
.flight .leg .code{font:700 16px/24px var(--font)}
.flight .leg .city{font:var(--small); color:var(--muted)}
.flight .fl-arrow{flex:none; font:400 20px/28px var(--font); color:var(--n-400); padding-top:0}
.flight .fl-nd{font:600 13px/20px var(--font); color:var(--warn)}   /* landing on another day: text, never colour alone */

/* ---------------------------------------------------------------- terms */
.must-know{background:var(--tile-bg); border-radius:var(--r-md); padding:var(--s4); border:var(--line)}
body.v-b .must-know{border:0 none}
.must-know h3{margin-bottom:var(--s2)}
.must-know ul{margin:0; padding-inline-start:20px}
.must-know li{margin-top:var(--s1)}
.terms{font:400 15px/24px var(--font); color:var(--n-800); margin-top:var(--s4)}
.terms .lead{color:var(--n-700)}
.terms h3{margin:var(--s4) 0 var(--s1)}
.terms ul{margin:0; padding-inline-start:20px}
.terms li{margin-top:var(--s1)}

/* ---------------------------------------------------------------- attachment tile */
.attach{display:flex; align-items:center; gap:var(--s3); background:var(--tile-bg); border-radius:var(--r-md); padding:var(--s3)}
.attach .thumb{width:64px; height:84px; flex:none; display:flex; align-items:center; justify-content:center; background:#fff; border:var(--line-strong); border-radius:var(--r-sm); overflow:hidden; font:600 13px/18px var(--font); color:var(--n-500); text-align:center}
.attach .thumb img{display:block; max-width:64px; max-height:84px; width:auto; height:auto}
.attach .meta{flex:1; min-width:0}
.attach .meta .att-name{display:block; font:600 16px/24px var(--font)}
.attach .meta .att-sub{font:var(--cap); color:var(--muted)}

/* ---------------------------------------------------------------- price */
.price .p-line{font:var(--body); color:var(--n-700)}
.price .p-total-label{font:var(--small); color:var(--n-700); margin-top:var(--s3)}
.price .p-total{font:700 24px/32px var(--font); color:var(--n-900); font-variant-numeric:tabular-nums}
.price .p-src{font:var(--small); color:var(--muted)}
.price .p-note{font:var(--small); color:var(--n-700); margin-top:var(--s3)}

/* ---------------------------------------------------------------- bank block */
.bank{background:var(--n-50); border:var(--line); border-radius:var(--r-md); padding:var(--s3) var(--s4)}
body.v-b .bank{background:#fff; border:0 none}
.bank dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:var(--s1) var(--s4)}
.bank dt{font:var(--small); color:var(--muted)}
.bank dd{margin:0; font:600 16px/22px var(--font)}
.bank .ref{margin-top:var(--s3); padding-top:var(--s3); border-top:var(--line); font:700 16px/24px var(--font)}

/* ---------------------------------------------------------------- signature */
.sec.sign{background:#fff; border:2px solid var(--brand-line)}
.sign .confirm-text{color:var(--n-800)}
.pad{position:relative; height:180px; border:2px dashed var(--n-300); border-radius:var(--r-md); background:#fff; margin-top:var(--s2)}
.pad canvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none; border-radius:inherit}
.pad .pad-hint{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:var(--s4); text-align:center; font:var(--small); color:var(--muted); pointer-events:none}
.pad-tools{display:flex; justify-content:flex-end; margin-top:var(--s1)}
.typed-display{font:700 22px/30px var(--font); color:var(--n-900); min-height:0}
.sign-msg{min-height:22px; margin-top:var(--s2); font:600 14px/22px var(--font); color:var(--bad)}
.sign-msg.ok{color:var(--ok)}
.signed-stamp{margin-top:var(--s3); font:600 16px/24px var(--font); color:var(--ok)}

/* ---------------------------------------------------------------- footer */
.foot{margin-top:var(--gap-sec); padding:var(--s4) 0 var(--s2); font:var(--cap); color:var(--muted); text-align:center}

/* ---------------------------------------------------------------- empty state + "not valid" card */
.state-card{max-width:480px; margin:var(--s7) auto; background:#fff; border:var(--line); border-radius:var(--r-lg); padding:var(--s6) var(--s5); text-align:center; box-shadow:var(--shadow-1)}
.state-card h2{margin-bottom:var(--s2)}
.state-card p{color:var(--n-700)}
.state-card .btn{margin-top:var(--s4)}
.empty{text-align:center; padding:var(--s6) var(--s4); color:var(--n-700)}
.empty .icon-32{display:block; margin:0 auto var(--s2)}
.empty .btn{margin-top:var(--s3)}

/* ---------------------------------------------------------------- mobile sticky bar (outside #sheet) */
.sticky-bar{display:none}
@media (max-width:639px){
  .sticky-bar{display:flex}
  body.has-sticky .page{padding-bottom:calc(var(--s7) + var(--s6) + env(safe-area-inset-bottom, 0px))}
}
.sticky-bar{position:fixed; inset-inline:0; bottom:0; z-index:40; align-items:center; justify-content:space-between; gap:var(--s3); background:#fff; border-top:var(--line); padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px))}
.sticky-bar .left{font:600 14px/20px var(--font); color:var(--n-700)}
.sticky-bar.off{display:none !important}

/* ---------------------------------------------------------------- screen-only polish */
@media screen{ .hdr,.sec{box-shadow:var(--shadow-1)} body.v-b .sec{box-shadow:none} }

/* ---------------------------------------------------------------- PDF capture (body.capturing while html2pdf runs) */
.cap-val{display:none}
body.capturing .cap-in{display:none !important}
body.capturing .cap-val{display:inline-block}
body.capturing .no-print{display:none !important}
body.capturing .hdr,body.capturing .sec,body.capturing .card,body.capturing .state-card{box-shadow:none !important}
body.capturing .pad{border:1px solid var(--n-300)}
body.capturing .pad .pad-hint{display:none}
body.capturing #sheet,body.capturing #sheet *{letter-spacing:0.01px !important}
.pdf-break-before{break-before:page}
.avoid-break{break-inside:avoid}
/* inputs are swapped for their values in the PDF (html2canvas paints form controls poorly) */
.field .cap-val{width:100%; min-height:48px; padding:10px 12px; border:var(--line-strong); border-radius:var(--r-md); font:600 16px/24px var(--font); color:var(--n-900); background:#fff}
.field.client .cap-val{border:2px solid var(--brand-text); background:var(--brand-50)}
body.capturing .field .cap-val{display:block}
.chk-box{width:22px; height:22px; flex:none; margin-top:2px; border:2px solid var(--n-700); border-radius:4px; background:#fff; align-items:center; justify-content:center; color:var(--n-900)}
body.capturing .chk-box.cap-val{display:inline-flex}
.chk-box svg{width:16px; height:16px}
/* the neutral "not valid / network" card carries no agent branding -> neutral button */
.state-card .btn{background:#fff; color:var(--n-800); border-color:var(--n-300)}