/* Xtore — the screen's design layer (DGO-1837). The structure is the office's Services app (apps/chimney-services:
   design.css — an app, not a website: a side column on a computer, a glass bottom bar with one raised main action on a
   phone; fewer bubbles: a list is rows of one sheet, facts are rows, options are one segmented control) — in Hebrew,
   right to left, and BRIGHT (meeting xtr101, 14:25 «מסך, דבר ראשון, מאוד בהיר»). Ordering is built on Wolt's patterns
   (research_notes/Xtore v1 2026-11-12/02-ux-patterns.md): image-led products, a stepper under the thumb, the basket
   always in reach, a delivery promise on every supplier. No colour is written here: every value names a token of the
   office's one palette (G27/G82) — the block below — or mixes two. */

/* @bina-theme-tokens:start */
/* OLIVE GROVE — the one palette of the office (the owner, 2026-10-07 · DGO-450). Four hues, sampled
   from his mock-up, and the ground they stand on. A screen never writes a colour: it names one of
   these. Each hue is the colour itself (a FILL — a button, a bar, a dot), «-d» for text and thin
   lines on the ground (4.5:1 or more), «-soft» and «-line» for a tint and its hairline, and «-ink»
   for what is written ON the fill. The role names every screen already uses point at them:
   (no backtick in this block: one of its copies lives inside a script's template string)
     olive  the brand and the main action · what is well, what is done
     sky    what is in motion, what only informs · a link
     lime   look here — a warning, something waiting
     plum   a person must act — a failure, a removal, the one final action
   Contrast, measured (WCAG): ink on the ground 13.7 · muted 4.65 · light text on olive 5.51 and on
   plum 9.54 · ink on lime 6.88 · its ink on sky 6.32 · sky-d 4.61 · lime-d 4.70 · violet 5.32 ·
   on the desk: its ink 6.32 (dark: 13.96), and 11.2 where the sky pales (dark: 5.12). */
:root,:root[data-theme="light"]{
  color-scheme:light;
  accent-color:var(--accent);   /* the browser's OWN controls - a checkbox, a radio, a range, a progress bar - on both grounds: said once, here (it was said for eight single controls, and every other one was the browser's blue) */
  --bg:#f3f5f7; --surface:#fff; --surface-2:#f9fafb; --ink:#1f2a17; --muted:#6a7068; --line:#dcdfde;
  --olive:#56693f; --olive-d:#475734; --olive-soft:#e7eae4; --olive-line:#bfc6b6; --olive-ink:#f3f5f7;
  --sky:#7baae3; --sky-d:#2a6fc4; --sky-soft:#edf3fb; --sky-line:#cddff4; --sky-ink:#13263f;
  --lime:#a9b84c; --lime-d:#69732e; --lime-soft:#f3f5e6; --lime-line:#dee4bb; --lime-ink:#1f2a17;
  --plum:#5b3349; --plum-d:#4a303b; --plum-soft:#e8e2e6; --plum-line:#c1b1ba; --plum-ink:#f3f5f7;
  --accent:var(--olive); --accent-d:var(--olive-d); --accent-soft:var(--olive-soft); --accent-ink:var(--olive-ink);
  --blue:var(--sky-d); --amber:var(--lime-d); --red:var(--plum);
  --violet:#7c5c6d;   /* plum, lifted a fifth toward white: someone has to look — nothing has failed */
  --ok:var(--olive); --warn:var(--lime-d); --danger:var(--plum); --info:var(--sky-d);
  --ok-soft:var(--olive-soft); --warn-soft:var(--lime-soft); --danger-soft:var(--plum-soft); --info-soft:var(--sky-soft);
  --red-soft:var(--plum-soft); --amber-soft:var(--lime-soft); --blue-soft:var(--sky-soft); --violet-soft:var(--plum-soft);
  --side:var(--olive); --side-ink:#f3f5f7; --side-mut:#dce1da; --side-line:#788765;
  --desk:var(--sky); --desk-ink:var(--sky-ink);   /* desktop mode's ground is the sky (the owner, DGO-452), and what is written straight on it */
  --scrim:rgba(31,42,23,.5);                      /* what dims a screen behind a pop-up */
  --shadow:0 1px 3px rgba(31,42,23,.08),0 6px 24px rgba(31,42,23,.06);
  --shadow-lg:0 20px 60px rgba(31,42,23,.28);
  /* ONE COLOUR AND ONE ANIMAL PER OFFICE (the owner, 2026-10-09 · flt-002). When offices are linked,
     a person reads WHICH office a thing belongs to without opening it, so each office gets a hue of
     its own. The hue is an IDENTITY and never a health state: an office that stopped answering keeps
     its colour, and the quiet mark is the one that says "not answering". Each is an ALIAS of the
     palette's own hue — no fourth value is invented, and because the ground re-points the hue, the
     office mark follows the ground by itself. Each office's animal (elephant, deer, eagle) is a
     glyph of bina-icons.js. */
  --office-hp:var(--muted);   /* hp · elephant — grey: the heavy laptop at home, in the palette's own grey */
  --office-mac:var(--lime);   /* macbook · deer — yellow: the palette has one yellow and it is lime. A FILL, so what is written ON it is --lime-ink, never this */
  --office-vps:var(--sky-d);  /* vps · eagle — deep sky blue, «the eagle in the clouds». THE OWNER'S OWN CHOICE (2026-10-09, in writing: vps = נשר + כחול-שמיים) — this line is the colour he picked, not a default kept for him */
}

/* ── A LINKED OFFICE'S MARK, BY NAME (flt-004) ───────────────────────────────────────────────
   The link carries a NAME — mark: {color, animal} in the catalog, from the office's own identity
   — and never a value: the office that DRAWS a linked tile owns the pixels, so it paints the name
   with its own palette. These seven rules are that translation, one per family above; a screen sets
   data-office-hue="lime" and paints var(--office-hue).
   A name this file does not know paints nothing, which is why the vocabulary in
   apps/dgo-extend/identity.py may only name families that exist here — and why --red and --ok
   are not among them: they mean «danger» and «it is well» on every screen in the office. */
[data-office-hue="grey"]   { --office-hue:var(--muted); }
[data-office-hue="lime"]   { --office-hue:var(--lime); }
[data-office-hue="sky"]    { --office-hue:var(--sky-d); }
[data-office-hue="olive"]  { --office-hue:var(--olive-d); }
[data-office-hue="plum"]   { --office-hue:var(--plum); }
[data-office-hue="blue"]   { --office-hue:var(--blue); }
[data-office-hue="violet"] { --office-hue:var(--violet); }
/* the dark ground is the same four hues on the palette's own ink, and the SAME legend. Olive on that
   ink is 2.5:1, so its text step there is olive LIFTED — its own hue and saturation, lighter (7.14
   on a card, 4.82 on its own tint) — and the brand, the main action and «it is well» take that step.
   Lime stays «look here» and the sky «in motion», as on the light ground: were lime the accent here
   (it was, for a day), a warning, a selection and «it is well» were one colour. Each «-d» on its
   own «-soft» there, measured: olive 4.82 · sky 4.62 · lime 4.63 · plum 4.71. */
@media (prefers-color-scheme:dark){
  :root{ color-scheme:dark;
         --bg:#141b0f; --surface:#1f2a17; --surface-2:#192213; --ink:#f3f5f7; --muted:#a2a8a2; --line:#414a3b;
         --olive-d:#a5ba8c; --olive-soft:#384629; --olive-line:#56693f;
         --sky-d:#7baae3; --sky-soft:#2e3f38; --sky-line:#4d6a8c;
         --lime-d:#a9b84c; --lime-soft:#3b4622; --lime-line:#69732e;
         --plum-d:#ad99a4; --plum-soft:#402f33; --plum-line:#7c5c6d;
         --accent:var(--olive-d); --accent-ink:var(--surface);
         --red:#ad99a4; --violet:#bdadb6; --danger:#ad99a4; --ok:var(--olive-d); --side:var(--surface);
         --desk:var(--sky-ink); --desk-ink:var(--ink); --scrim:rgba(0,0,0,.6);
         --shadow:0 1px 3px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.3);
         --shadow-lg:0 20px 60px rgba(0,0,0,.55); }
}
:root[data-theme="midnight"]{
  color-scheme:dark;
  --bg:#141b0f; --surface:#1f2a17; --surface-2:#192213; --ink:#f3f5f7; --muted:#a2a8a2; --line:#414a3b;
  --olive-d:#a5ba8c; --olive-soft:#384629; --olive-line:#56693f;
  --sky-d:#7baae3; --sky-soft:#2e3f38; --sky-line:#4d6a8c;
  --lime-d:#a9b84c; --lime-soft:#3b4622; --lime-line:#69732e;
  --plum-d:#ad99a4; --plum-soft:#402f33; --plum-line:#7c5c6d;
  --accent:var(--olive-d); --accent-ink:var(--surface);
  --red:#ad99a4; --violet:#bdadb6; --danger:#ad99a4; --ok:var(--olive-d); --side:var(--surface);
  --desk:var(--sky-ink); --desk-ink:var(--ink); --scrim:rgba(0,0,0,.6);
  --shadow:0 1px 3px rgba(0,0,0,.4),0 6px 24px rgba(0,0,0,.3);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);
}
/* THE KEYBOARD'S RING - what the browser draws around the stop the keyboard is on, in the palette, wherever
   a part draws none of its own. It has no specificity at all (:where), so any rule of a part wins. Two
   screens said this for themselves; on the others nearly every stop wore the browser's ring (DGO-455).
   A field keeps the offset it has - fourteen rules draw a field's own outline and say no offset. An area
   (a scroll box, a table) takes the ring inside, where nothing clips it; a control takes it outside,
   where a filled button does not hide it. */
:where(:focus-visible){outline:2px solid var(--accent)}
:where(:focus-visible:not(a,button,summary,[role=button],input,select,textarea)){outline-offset:-2px}
:where(a,button,summary,[role=button]):focus-visible{outline-offset:2px}
/* HEBREW AT A HEAVY WEIGHT - on Windows, where the first family of --font is installed. "Segoe UI" has its
   Hebrew in Light, Regular, Semibold and Bold. Asked for 800 or 900 the browser takes the family's Black
   face, which has none, and so has every family after it - so the Hebrew of every title at 800 was drawn in
   the system's last-resort serif, thin, beside Latin in Black: «חשבונות ומראות» at 20px is 150px wide at 700
   and 120px at 800 (Chrome 154; the screens ask for 800 in 167 places, the question's title among them).
   These faces give the family's HEBREW RANGE the faces that have it. A family a sheet names is no longer the
   system's for those characters, so every weight and both styles are named, each as the system resolves it:
   measured, only upright 800 and 900 change. Any other character is not theirs and goes on to the next
   family the screen names - system-ui in --font, on Windows the same faces, Black included - which is why
   G27 asks that system-ui follows wherever a screen names this family itself. Where the family is not
   installed nothing here resolves and nothing changes. */
@font-face{font-family:"Segoe UI";src:local("Segoe UI Light");font-weight:100 300;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI");font-weight:400;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Semibold");font-weight:500 600;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Bold");font-weight:700 900;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Light Italic");font-weight:100 300;font-style:italic;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Italic");font-weight:400;font-style:italic;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Semibold Italic");font-weight:500 600;font-style:italic;unicode-range:U+0590-05FF,U+FB1D-FB4F}
@font-face{font-family:"Segoe UI";src:local("Segoe UI Bold Italic");font-weight:700 900;font-style:italic;unicode-range:U+0590-05FF,U+FB1D-FB4F}
/* @bina-theme-tokens:end */

/* ── the screen's own tokens: type, radii, rhythm, motion (all colour comes from the palette above) ─────────── */
:root{
  --font:"Segoe UI",system-ui,-apple-system,"Noto Sans Hebrew","Assistant",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-xl:22px;--r-lg:18px;--r-md:14px;--r-sm:10px;--r-pill:999px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --ease:cubic-bezier(.2,.8,.25,1);--t-fast:.14s;--t-mid:.24s;
  --rail-w:0px;--top-h:60px;--tabs-h:68px;
  --hair:color-mix(in srgb,var(--line) 80%,transparent);
  --field-line:color-mix(in srgb,var(--muted) 36%,var(--surface-2));
  --hover:color-mix(in srgb,var(--surface) 90%,var(--ink));
  --glass:color-mix(in srgb,var(--surface) 82%,transparent);
  --glow:color-mix(in srgb,var(--olive) 38%,transparent);
  --brand:var(--olive);--brand-d:var(--olive-d);--brand-soft:var(--olive-soft);--brand-ink:var(--olive-ink);
  --shade:color-mix(in srgb,var(--ink) 6%,transparent);
}

/* ── ground ───────────────────────────────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;
  min-height:100dvh;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
.num,.mono{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.92em}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--sky-d);outline-offset:2px;border-radius:6px}
.boot{display:grid;place-items:center;min-height:100dvh;color:var(--muted)}

/* ── the brand: the X mark and the word ───────────────────────────────────────────────────────────────── */
.mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--ink);color:var(--surface);
  box-shadow:0 6px 18px -8px var(--shade)}
.mark svg{width:22px;height:22px}
.mark .x1{fill:currentColor}.mark .x2{fill:var(--olive-soft)}
.word{font-weight:800;letter-spacing:-.4px;font-size:19px;direction:ltr;unicode-bidi:isolate}
.word b{color:var(--brand-d)}

/* ── the shell: phone first ───────────────────────────────────────────────────────────────────────────── */
.x-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;min-height:var(--top-h);
  padding:max(10px,env(safe-area-inset-top)) 14px 10px;background:var(--glass);-webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--hair)}
.x-top .who{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;background:none;border:0;padding:0;cursor:pointer;text-align:start}
.x-top .who b{font-size:15.5px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.x-top .who span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.x-top .who span svg{width:14px;height:14px}
.icbtn{position:relative;width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center;border:1px solid var(--hair);
  background:var(--surface);cursor:pointer;flex:none;transition:background var(--t-fast)}
.icbtn:hover{background:var(--hover)}
.icbtn .dot{position:absolute;top:-5px;inset-inline-end:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--plum);
  color:var(--plum-ink);font:800 10.5px/15px var(--font);text-align:center;border:2px solid var(--surface)}
.avatar{width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center;font:800 14px/1 var(--font);flex:none;
  background:var(--olive-soft);color:var(--olive-d);border:1px solid var(--olive-line);cursor:pointer}
.avatar.h1{background:var(--sky-soft);color:var(--sky-d);border-color:var(--sky-line)}
.avatar.h2{background:var(--lime-soft);color:var(--lime-d);border-color:var(--lime-line)}
.avatar.h3{background:var(--plum-soft);color:var(--plum-d);border-color:var(--plum-line)}
.avatar.sm{width:34px;height:34px;font-size:12px}
.avatar.lg{width:56px;height:56px;font-size:19px}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

.x-tabs{position:fixed;inset-inline:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
  height:calc(var(--tabs-h) + env(safe-area-inset-bottom));padding:6px 6px env(safe-area-inset-bottom);background:var(--glass);
  -webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);border-top:1px solid var(--hair)}
.x-tabs a,.x-tabs button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:58px;
  border:0;background:none;color:var(--muted);font:700 11.5px/1.1 var(--font);cursor:pointer;border-radius:16px;isolation:isolate}
.x-tabs a[aria-current="page"],.x-tabs button[aria-current="page"]{color:var(--ink)}
.x-tabs a[aria-current="page"]::before{content:"";position:absolute;top:3px;width:56px;height:30px;border-radius:15px;background:var(--brand-soft);z-index:-1}
.x-tabs svg.i{width:22px;height:22px}
.x-tabs .badge{position:absolute;top:2px;inset-inline-start:calc(50% + 6px)}
.x-tabs .center{height:74px;color:var(--ink)}
.x-tabs .center .coal{width:58px;height:58px;margin-top:-26px;border-radius:29px;display:grid;place-items:center;color:var(--brand-ink);
  background:var(--brand);box-shadow:0 0 0 5px var(--bg),0 10px 24px -8px var(--glow);transition:transform var(--t-fast) var(--ease)}
.x-tabs .center:active .coal{transform:scale(.94)}
.x-tabs .center .coal svg{width:26px;height:26px;stroke-width:2.4}
.x-tabs .center .badge{top:-22px;inset-inline-start:calc(50% + 14px)}
.badge{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--plum);color:var(--plum-ink);font:800 11px/19px var(--font);
  text-align:center;font-variant-numeric:tabular-nums}
.badge.lime{background:var(--lime);color:var(--lime-ink)}
.badge.olive{background:var(--brand);color:var(--brand-ink)}

main#view{padding:16px 16px calc(var(--tabs-h) + 40px + env(safe-area-inset-bottom));max-width:1240px;margin:0 auto;min-width:0}
body.no-tabs main#view{padding-bottom:40px}
body.has-cartbar main#view{padding-bottom:calc(var(--tabs-h) + 120px + env(safe-area-inset-bottom))}

/* the strip that replaces the bottom bar inside the console on a phone (the console has its own bar) */
.x-strip{display:none}
body.framed .x-tabs{display:none}
body.framed .x-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 14px;border-bottom:1px solid var(--hair);background:var(--surface);
  position:sticky;top:var(--top-h);z-index:29}
body.framed .x-strip::-webkit-scrollbar{display:none}
body.framed main#view{padding-bottom:40px}

/* the rail — from a tablet up the bar becomes a column on the inline start (the right, in Hebrew) */
.x-rail{display:none}
@media (min-width:768px){
  body:not(.signed-out){--rail-w:92px}
  .x-tabs,.x-strip,body.framed .x-strip{display:none!important}
  .x-top{display:none}
  .x-rail{position:fixed;top:0;bottom:0;inset-inline-start:0;width:var(--rail-w);z-index:30;display:flex;flex-direction:column;align-items:stretch;gap:4px;
    padding:14px 8px 14px;background:var(--surface);border-inline-end:1px solid var(--hair)}
  .x-rail .brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:2px 0 10px}
  .x-rail .brand .word,.x-rail .brand .org{display:none}
  .x-rail .go{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;color:var(--ink);font:700 11.5px/1.1 var(--font);
    padding:4px 0 10px;cursor:pointer}
  .x-rail .go .coal{width:50px;height:50px;border-radius:25px;display:grid;place-items:center;background:var(--brand);color:var(--brand-ink);
    box-shadow:0 10px 22px -10px var(--glow)}
  .x-rail .go .label{display:block}
  .x-rail nav{flex:1;display:flex;flex-direction:column;gap:3px;overflow-y:auto;scrollbar-width:none}
  .x-rail nav::-webkit-scrollbar{display:none}
  .x-rail nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:6px 2px;
    border-radius:16px;color:var(--muted);font:700 11.5px/1.15 var(--font);text-align:center}
  .x-rail nav a:hover{background:var(--hover);color:var(--ink)}
  .x-rail nav a[aria-current="page"]{background:var(--brand-soft);color:var(--ink)}
  .x-rail nav a[aria-current="page"] svg.i{color:var(--brand-d)}
  .x-rail nav a .badge{position:absolute;top:4px;inset-inline-start:calc(50% + 8px)}
  .x-rail nav .sep{height:1px;background:var(--hair);margin:8px 12px}
  .x-rail .foot{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--hair)}
  .x-rail .foot .me{display:none}
  main#view{margin-inline-start:var(--rail-w);margin-inline-end:auto;padding:24px 28px 72px;max-width:calc(1240px + var(--rail-w))}
  body.signed-out main#view{margin:0;padding:0;max-width:none}
  body.has-cartbar main#view{padding-bottom:140px}
}
@media (min-width:1200px){
  body:not(.signed-out){--rail-w:264px}
  .x-rail{padding:18px 14px 16px;gap:6px}
  .x-rail .brand{justify-content:flex-start;padding:2px 6px 14px}
  .x-rail .brand .word{display:block}
  .x-rail .orgsw{display:flex}
  .x-rail .go{flex-direction:row;justify-content:center;gap:8px;height:48px;padding:0 16px;margin:4px 0 12px;border-radius:var(--r-md);
    background:var(--brand);color:var(--brand-ink);font:800 14.5px/1 var(--font);box-shadow:0 10px 24px -12px var(--glow)}
  .x-rail .go .coal{width:auto;height:auto;background:none;box-shadow:none;color:inherit}
  .x-rail .go .coal svg{width:20px;height:20px;stroke-width:2.4}
  .x-rail nav a{flex-direction:row;justify-content:flex-start;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;font:600 14.5px/1.2 var(--font);color:var(--ink)}
  .x-rail nav a svg.i{color:var(--muted)}
  .x-rail nav a .badge{position:static;margin-inline-start:auto}
  .x-rail nav .grp{font:700 11.5px/1 var(--font);color:var(--muted);padding:14px 12px 6px;letter-spacing:.2px}
  .x-rail nav .sep{margin:6px 8px}
  .x-rail .foot{flex-direction:row;align-items:center;gap:10px;padding:12px 4px 0}
  .x-rail .foot .me{display:flex;flex:1;min-width:0;flex-direction:column;background:none;border:0;padding:0;text-align:start;cursor:pointer}
  .x-rail .foot .me b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .x-rail .foot .me span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.orgsw{display:none;align-items:center;gap:10px;width:100%;padding:10px 10px;margin:0 0 4px;border:1px solid var(--hair);border-radius:var(--r-md);
  background:var(--surface-2);cursor:pointer;text-align:start}
.orgsw .t{flex:1;min-width:0;display:flex;flex-direction:column}
.orgsw .t b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orgsw .t span{font-size:12px;color:var(--muted)}

/* ── banners: view-as (a person is needed: violet), the plan (look here: lime), info (sky) ─────────────── */
.banner{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:0 0 14px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--surface);font-size:14px}
.banner svg.i{color:var(--muted)}
.banner .t{flex:1;min-width:0}
.banner.view{background:var(--plum-soft);border-color:var(--plum-line);color:var(--ink)}
.banner.view svg.i{color:var(--plum-d)}
.banner.warn{background:var(--lime-soft);border-color:var(--lime-line)}
.banner.warn svg.i{color:var(--lime-d)}
.banner.info{background:var(--sky-soft);border-color:var(--sky-line)}
.banner.info svg.i{color:var(--sky-d)}
.banner.ok{background:var(--olive-soft);border-color:var(--olive-line)}

/* ── type and page heads ──────────────────────────────────────────────────────────────────────────────── */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:2px 0 16px;flex-wrap:wrap}
.ph h1{font-size:26px;font-weight:800;letter-spacing:-.6px;line-height:1.15}
.ph h1 em{font-style:normal;color:var(--brand-d)}
.ph p{color:var(--muted);font-size:14px;margin-top:4px}
.ph .acts{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:768px){.ph h1{font-size:32px;letter-spacing:-1px}}
h2.sec{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:17px;font-weight:800;margin:22px 0 10px}
h2.sec a{font-size:13.5px;font-weight:700;color:var(--brand-d)}
h2.sec .muted{font-weight:500;font-size:13px}

/* ── buttons: one main action per screen, the rest quiet ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 18px;border-radius:var(--r-md);border:1px solid transparent;
  background:var(--brand);color:var(--brand-ink);font:800 14.5px/1 var(--font);cursor:pointer;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast),box-shadow var(--t-fast);box-shadow:0 8px 20px -14px var(--glow)}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:scale(.98)}
.btn[disabled],.btn.busy{opacity:.55;cursor:default;transform:none}
.btn.busy::after{content:"";width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:spin .7s linear infinite}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--hover)}
.btn.soft{background:var(--brand-soft);color:var(--ink);border-color:var(--olive-line);box-shadow:none}
.btn.danger{background:var(--surface);color:var(--plum-d);border-color:var(--plum-line);box-shadow:none}
.btn.danger.fill{background:var(--plum);color:var(--plum-ink);border-color:transparent}
.btn.sm{height:36px;padding:0 13px;font-size:13.5px;border-radius:11px}
.btn.xs{height:30px;padding:0 10px;font-size:12.5px;border-radius:9px}
.btn.block{width:100%}
.btn.lg{height:54px;font-size:16px;border-radius:16px}
.btn svg.i{width:18px;height:18px;stroke-width:2.2}
.link{background:none;border:0;padding:0;color:var(--brand-d);font-weight:700;cursor:pointer}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── sheets: rows of one sheet, never a bubble per row ────────────────────────────────────────────────── */
.sheet{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
.sheet + .sheet{margin-top:14px}
.sheet .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px}
.sheet .hd h3{font-size:16px;font-weight:800}
.sheet .bd{padding:4px 16px 16px}
.rows > *{border-top:1px solid var(--hair)}
.rows > *:first-child{border-top:0}
.row{display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:60px;cursor:pointer;transition:background var(--t-fast)}
.row:hover{background:var(--hover)}
.row.static{cursor:default}.row.static:hover{background:none}
.row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.row .main b{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .main span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;text-align:end}
.row .end b{font-variant-numeric:tabular-nums;font-size:14.5px}
.row .chev{color:var(--muted);flex:none}
.row .chev svg{transform:scaleX(-1)}
.thumb{width:44px;height:44px;border-radius:12px;flex:none;object-fit:cover;background:var(--surface-2);display:grid;place-items:center;color:var(--muted);
  border:1px solid var(--hair);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.lg{width:56px;height:56px;border-radius:14px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);
  border-radius:var(--r-md);overflow:hidden}
.facts > div{background:var(--surface);padding:10px 12px;min-width:0}
.facts small{display:block;font-size:11.5px;color:var(--muted);margin-bottom:2px}
.facts b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}

/* KPI strip: one bordered strip, cells wrap, never a lone floating tile */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;margin-bottom:14px}
.kpis > a,.kpis > div{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:3px;min-width:0}
.kpis > a:hover{background:var(--hover)}
.kpis small{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpis small svg{width:15px;height:15px}
.kpis b{font-size:24px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.15}
.kpis b.lime{color:var(--lime-d)}.kpis b.sky{color:var(--sky-d)}.kpis b.plum{color:var(--plum-d)}.kpis b.olive{color:var(--brand-d)}
.kpis span{font-size:12px;color:var(--muted)}
@media (min-width:900px){.kpis.k4{grid-template-columns:repeat(4,1fr)}.kpis.k3{grid-template-columns:repeat(3,1fr)}.kpis.k5{grid-template-columns:repeat(5,1fr)}}
@media (max-width:899px){.kpis.k3 > :last-child:nth-child(odd),.kpis.k5 > :last-child:nth-child(odd){grid-column:1/-1}}

/* pills: a colour means one thing everywhere (olive done · sky moving · lime waits · violet a person · plum refused) */
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:var(--r-pill);font:700 12px/1 var(--font);white-space:nowrap;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--hair)}
.pill.olive{background:var(--olive-soft);color:var(--olive-d);border-color:var(--olive-line)}
.pill.sky{background:var(--sky-soft);color:var(--sky-d);border-color:var(--sky-line)}
.pill.lime{background:var(--lime-soft);color:var(--lime-d);border-color:var(--lime-line)}
.pill.plum{background:var(--plum-soft);color:var(--plum-d);border-color:var(--plum-line)}
.pill.violet{background:var(--surface);color:var(--plum-d);border:1.5px solid var(--plum-d)}
.pill.solid{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:7px;font:800 11.5px/1 var(--font);
  background:var(--lime);color:var(--lime-ink)}
.tag.olive{background:var(--brand);color:var(--brand-ink)}
.tag.sky{background:var(--sky);color:var(--sky-ink)}
.tag.ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--hair)}

/* chips (filters) and the segmented control (the options of one question) and underline tabs (in-screen views) */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 10px;margin-inline:-2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface);font:700 13.5px/1 var(--font);cursor:pointer;white-space:nowrap;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.chip .n{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.chip[aria-pressed="true"] .n{color:inherit;opacity:.8}
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:13px;background:var(--surface-2);border:1px solid var(--hair);flex-wrap:wrap}
.seg button{height:36px;padding:0 13px;border:0;border-radius:10px;background:none;font:700 13.5px/1 var(--font);cursor:pointer;color:var(--muted);min-width:44px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px var(--shade)}
.utabs{display:flex;gap:4px;border-bottom:1px solid var(--hair);margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
.utabs::-webkit-scrollbar{display:none}
.utabs a,.utabs button{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border:0;background:none;cursor:pointer;
  font:700 14px/1 var(--font);color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1px}
.utabs [aria-current="page"]{color:var(--ink);border-bottom-color:var(--brand)}

/* ── fields ───────────────────────────────────────────────────────────────────────────────────────────── */
.form{display:grid;gap:14px}
.form.two{grid-template-columns:1fr}
@media (min-width:720px){.form.two{grid-template-columns:1fr 1fr}.form.two .wide{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > span{font-size:13px;font-weight:700;color:var(--ink)}
.field > span em{font-style:normal;color:var(--muted);font-weight:500}
.field input,.field select,.field textarea,.input{width:100%;height:48px;padding:0 14px;border-radius:12px;border:1.5px solid var(--field-line);
  background:var(--surface);font-size:15px;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.field textarea{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{border-color:var(--brand-d);box-shadow:0 0 0 4px var(--brand-soft)}
.field small{font-size:12px;color:var(--muted)}
.field .err{color:var(--plum-d);font-weight:600}
.field input[type="checkbox"]{width:20px;height:20px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;flex:none}
.search{position:relative;display:flex;align-items:center}
.search svg.i{position:absolute;inset-inline-start:14px;color:var(--muted);pointer-events:none}
.search input{width:100%;height:48px;padding-inline:44px 14px;border-radius:var(--r-pill);border:1.5px solid var(--hair);background:var(--surface);font-size:15px;outline:none}
.search input:focus{border-color:var(--brand-d);box-shadow:0 0 0 4px var(--brand-soft)}
.daypick{display:flex;gap:6px;flex-wrap:wrap}
.daypick button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--field-line);background:var(--surface);font:800 14px/1 var(--font);cursor:pointer}
.daypick button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:transparent}

/* ── the store's home and the suppliers' cards (Wolt: image-led, a delivery promise on every card) ───── */
.hello{margin:4px 0 14px}
.hello h1{font-size:26px;font-weight:800;letter-spacing:-.6px;line-height:1.2}
.hello h1 em{font-style:normal;color:var(--brand-d)}
.hello p{color:var(--muted);font-size:14px;margin-top:2px}
@media (min-width:768px){.hello h1{font-size:32px}}
.rail-x{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,82%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:2px 2px 8px;margin-inline:-2px}
.rail-x::-webkit-scrollbar{display:none}
.rail-x > *{scroll-snap-align:start}
@media (min-width:768px){.rail-x{grid-auto-columns:minmax(280px,31%)}}
.rail-x.prods{grid-auto-columns:minmax(148px,44%)}
@media (min-width:768px){.rail-x.prods{grid-auto-columns:minmax(180px,23%)}}
@media (min-width:1400px){.rail-x.prods{grid-auto-columns:minmax(190px,18.5%)}}
.scard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast)}
.scard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.scard .cover{position:relative;height:118px;background:linear-gradient(135deg,var(--olive-soft),var(--sky-soft));overflow:hidden}
.scard .cover img{width:100%;height:100%;object-fit:cover}
.scard .cover .logo{position:absolute;bottom:-22px;inset-inline-start:14px;width:56px;height:56px;border-radius:16px;background:var(--surface);
  border:3px solid var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;font:800 20px/1 var(--font);color:var(--brand-d);overflow:hidden}
.scard .cover .logo img{width:100%;height:100%;object-fit:cover}
.scard .cover .flag{position:absolute;top:10px;inset-inline-end:10px}
.scard .body{padding:28px 14px 14px;display:flex;flex-direction:column;gap:6px}
.scard .body b{font-size:16px;font-weight:800}
.scard .body .meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--muted)}
.scard .body .meta span{display:inline-flex;align-items:center;gap:4px}
.scard .body .meta svg{width:14px;height:14px}
.promise{display:inline-flex;align-items:center;gap:6px;font:700 13px/1.2 var(--font);color:var(--olive-d)}
.promise svg{width:16px;height:16px}
.promise.late{color:var(--lime-d)}
.sgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.sgrid{grid-template-columns:repeat(3,1fr)}}

/* ── the supplier's storefront (a Wolt venue page) ───────────────────────────────────────────────────── */
.hero{position:relative;margin:-16px -16px 0;height:170px;background:linear-gradient(135deg,var(--olive-soft),var(--sky-soft) 70%);overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .back{position:absolute;top:12px;inset-inline-start:12px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media (min-width:768px){.hero{margin:-24px -28px 0;height:210px;border-radius:0 0 var(--r-xl) var(--r-xl)}}
.vhead{position:relative;display:flex;align-items:flex-end;gap:14px;margin-top:-36px;padding:0 4px}
.vhead .logo{width:76px;height:76px;border-radius:20px;background:var(--surface);border:4px solid var(--bg);box-shadow:var(--shadow);display:grid;place-items:center;
  font:800 26px/1 var(--font);color:var(--brand-d);overflow:hidden;flex:none}
.vhead .logo img{width:100%;height:100%;object-fit:cover}
.vhead .t{flex:1;min-width:0;padding-bottom:4px}
.vhead h1{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.vhead p{color:var(--muted);font-size:13.5px}
.vfacts{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px 0 4px;padding-bottom:2px}
.vfacts::-webkit-scrollbar{display:none}
.vfact{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--hair);font-size:13px}
.vfact svg{width:17px;height:17px;color:var(--brand-d)}
.vfact b{font-weight:800}
.vfact.warn svg{color:var(--lime-d)}
.cattabs{position:sticky;top:var(--top-h);z-index:20;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0;margin:6px 0 0;
  background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cattabs::-webkit-scrollbar{display:none}
@media (min-width:768px){.cattabs{top:0}}
.cat-h{font-size:18px;font-weight:800;margin:18px 0 10px;scroll-margin-top:calc(var(--top-h) + 64px)}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:640px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media (min-width:1400px){.pgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden;min-width:0}
.pcard .pic{position:relative;aspect-ratio:1/1;background:var(--surface-2);display:grid;place-items:center;color:var(--muted);cursor:pointer;overflow:hidden}
.pcard .pic img{width:100%;height:100%;object-fit:contain;padding:8px;transition:transform var(--t-mid) var(--ease)}
.pcard:hover .pic img{transform:scale(1.03)}
.pcard .pic svg.i{width:34px;height:34px;opacity:.5}
.pcard .pic .flags{position:absolute;top:8px;inset-inline-start:8px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.pcard .pic .fav{position:absolute;top:6px;inset-inline-end:6px;width:34px;height:34px;border-radius:17px;border:0;background:var(--glass);display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.pcard .pic .fav[aria-pressed="true"]{color:var(--plum-d)}
.pcard .pic .fav[aria-pressed="true"] svg{fill:currentColor}
.pcard .info{padding:10px 12px 4px;display:flex;flex-direction:column;gap:3px;flex:1}
.pcard .info b{font-size:14px;font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pcard .info .pack{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .info .usual{font-size:11.5px;color:var(--sky-d);font-weight:700}
.pcard .buy{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 10px 10px 12px}
.price{display:flex;flex-direction:column;line-height:1.15}
.price b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.price s{font-size:12px;color:var(--muted)}
.price small{font-size:11px;color:var(--muted)}
.price .deal{color:var(--brand-d)}
.add{width:40px;height:40px;border-radius:20px;border:0;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;cursor:pointer;flex:none;
  box-shadow:0 8px 18px -10px var(--glow);transition:transform var(--t-fast) var(--ease)}
.add:active{transform:scale(.92)}
.add svg{width:20px;height:20px;stroke-width:2.6}
.add[disabled]{background:var(--surface-2);color:var(--muted);box-shadow:none;cursor:default}
.stepper{display:inline-flex;align-items:center;height:40px;border-radius:20px;background:var(--brand);color:var(--brand-ink);overflow:hidden;flex:none;
  box-shadow:0 8px 18px -10px var(--glow)}
.stepper button{width:38px;height:40px;border:0;background:none;color:inherit;display:grid;place-items:center;cursor:pointer}
.stepper button svg{width:18px;height:18px;stroke-width:2.6}
.stepper input{width:44px;height:40px;border:0;background:none;color:inherit;text-align:center;font:800 15px/1 var(--font);font-variant-numeric:tabular-nums;
  outline:none;-moz-appearance:textfield;appearance:textfield;padding:0}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pcard .stepper button{width:31px}
.pcard .stepper input{width:34px;font-size:14px}
.pcard .buy{flex-wrap:wrap}
.stepper.big{height:52px;border-radius:26px}
.stepper.big button{width:52px;height:52px}
.stepper.big input{width:64px;height:52px;font-size:18px}
.stepper.ghost{background:var(--surface-2);color:var(--ink);box-shadow:none;border:1px solid var(--hair)}
.pcard.list{flex-direction:row;align-items:center}
.pcard.list .pic{width:84px;flex:none;aspect-ratio:1/1}
.pcard.list .info{padding:10px}
.pcard.list .buy{padding:10px}

/* the basket bar: always in reach (phone: above the tabs; computer: a pill at the bottom of the content) */
.cartbar{position:fixed;inset-inline:12px;bottom:calc(var(--tabs-h) + 10px + env(safe-area-inset-bottom));z-index:28;display:flex;align-items:center;gap:12px;
  min-height:58px;padding:8px 8px 8px 16px;border-radius:18px;background:var(--ink);color:var(--surface);box-shadow:var(--shadow-lg);cursor:pointer;
  animation:rise var(--t-mid) var(--ease)}
.cartbar .n{min-width:30px;height:30px;padding:0 8px;border-radius:15px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font:800 14px/1 var(--font)}
.cartbar .t{flex:1;min-width:0;display:flex;flex-direction:column}
.cartbar .t b{font-size:15px}
.cartbar .t span{font-size:12px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cartbar .btn{height:42px;background:var(--surface);color:var(--ink);box-shadow:none}
.cartbar .bar{position:absolute;inset-inline:16px;bottom:4px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--surface) 22%,transparent);overflow:hidden}
.cartbar .bar i{display:block;height:100%;background:var(--lime);border-radius:inherit}
body.framed .cartbar{bottom:calc(12px + env(safe-area-inset-bottom))}
@media (min-width:768px){.cartbar{inset-inline-start:calc(var(--rail-w) + 24px);inset-inline-end:24px;bottom:20px;max-width:720px;margin-inline:auto}}
@keyframes rise{from{transform:translateY(16px);opacity:0}}

/* the minimum-order meter */
.meter{display:flex;flex-direction:column;gap:6px}
.meter .track{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;border:1px solid var(--hair)}
.meter .track i{display:block;height:100%;border-radius:inherit;background:var(--lime);transition:width var(--t-mid) var(--ease)}
.meter.done .track i{background:var(--brand)}
.meter span{font-size:13px;font-weight:700}
.meter.done span{color:var(--brand-d)}

/* ── overlays: a bottom sheet on a phone, a side drawer on a computer ─────────────────────────────────── */
.scrim{position:fixed;inset:0;z-index:60;background:var(--scrim);animation:fade var(--t-mid) var(--ease)}
.panel{position:fixed;z-index:61;background:var(--bg);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.panel.bottom{inset-inline:0;bottom:0;max-height:92dvh;border-radius:var(--r-xl) var(--r-xl) 0 0;animation:up var(--t-mid) var(--ease);
  padding-bottom:env(safe-area-inset-bottom)}
.panel.bottom::before{content:"";width:40px;height:5px;border-radius:3px;background:var(--line);margin:8px auto 0;flex:none}
@media (min-width:768px){
  .panel.bottom{inset-inline:auto 0;inset-inline-start:auto;inset-inline-end:0;top:0;bottom:0;width:min(520px,100%);max-height:none;border-radius:0;
    animation:side var(--t-mid) var(--ease)}
  .panel.bottom::before{display:none}
  .panel.center{inset:0;margin:auto;width:min(560px,94vw);height:fit-content;max-height:90dvh;border-radius:var(--r-xl);animation:pop var(--t-mid) var(--ease)}
}
.panel .ph2{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.panel .ph2 h2{flex:1;font-size:19px;font-weight:800}
.panel .pb{flex:1;overflow-y:auto;padding:4px 16px 16px;-webkit-overflow-scrolling:touch}
.panel .pf{display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);background:var(--surface)}
.panel .pf .btn{flex:1}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
@keyframes side{from{transform:translateX(-30px);opacity:.4}}
@keyframes pop{from{transform:scale(.97);opacity:0}}
.menu{position:fixed;z-index:62;min-width:250px;max-width:320px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:6px;animation:pop var(--t-fast) var(--ease)}
.menu .who{padding:10px 12px 8px;border-bottom:1px solid var(--hair);margin-bottom:4px}
.menu .who b{display:block;font-size:14.5px}
.menu .who span{font-size:12.5px;color:var(--muted)}
.menu button,.menu a{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 12px;border:0;border-radius:11px;background:none;cursor:pointer;
  font:600 14.5px/1 var(--font);text-align:start;color:var(--ink)}
.menu button:hover,.menu a:hover{background:var(--hover)}
.menu .sep{height:1px;background:var(--hair);margin:4px 6px}
.menu .on svg{color:var(--brand-d)}

/* the product sheet */
.pbig{aspect-ratio:4/3;background:var(--surface-2);border-radius:var(--r-lg);display:grid;place-items:center;overflow:hidden;margin-bottom:14px}
.pbig img{width:100%;height:100%;object-fit:contain;padding:14px}
.dealbox{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);background:var(--lime-soft);border:1px solid var(--lime-line);margin:12px 0}
.dealbox svg.i{color:var(--lime-d);margin-top:2px}
.dealbox b{display:block}
.tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-md);overflow:hidden;margin:10px 0}
.tiers div{background:var(--surface);padding:8px 10px}
.tiers small{display:block;color:var(--muted);font-size:11.5px}

/* order timeline (Wolt's tracking: where it is, what comes next) */
.track{display:flex;flex-direction:column;gap:0;margin:6px 0}
.track .st{display:grid;grid-template-columns:28px 1fr;gap:10px;position:relative;padding-bottom:16px}
.track .st::before{content:"";position:absolute;inset-inline-start:13px;top:26px;bottom:0;width:2px;background:var(--line)}
.track .st:last-child::before{display:none}
.track .st .dot{width:28px;height:28px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);border:2px solid var(--line);color:var(--muted)}
.track .st .dot svg{width:14px;height:14px;stroke-width:3}
.track .st.done .dot{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.track .st.done::before{background:var(--brand)}
.track .st.now .dot{background:var(--sky);border-color:var(--sky);color:var(--sky-ink);box-shadow:0 0 0 5px var(--sky-soft)}
.track .st.bad .dot{background:var(--plum);border-color:var(--plum);color:var(--plum-ink)}
.track .st b{display:block;font-size:14.5px;line-height:28px}
.track .st span{font-size:12.5px;color:var(--muted)}
.lines .ln{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:10px 16px}
.lines .ln .q{font-variant-numeric:tabular-nums;font-weight:800;text-align:center;background:var(--surface-2);border-radius:9px;padding:6px 0}
.lines .ln.changed{background:var(--lime-soft)}
.lines .ln s{color:var(--muted);font-size:12px}
.totals{display:grid;gap:6px;padding:12px 16px;border-top:1px solid var(--hair);font-size:14px}
.totals div{display:flex;justify-content:space-between}
.totals .grand{font-size:17px;font-weight:800;padding-top:6px;border-top:1px dashed var(--line)}

/* chat */
.chat{display:flex;flex-direction:column;gap:8px;padding:12px 4px}
.msg{max-width:78%;padding:9px 13px;border-radius:16px;font-size:14.5px;line-height:1.45;background:var(--surface);border:1px solid var(--hair);align-self:flex-end}
.msg.mine{align-self:flex-start;background:var(--brand-soft);border-color:var(--olive-line)}
.msg.sys{align-self:center;background:var(--sky-soft);border-color:var(--sky-line);font-size:13px;max-width:92%}
.msg small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.compose{display:flex;gap:8px;position:sticky;bottom:calc(var(--tabs-h) + 8px + env(safe-area-inset-bottom));padding:8px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg)}
@media (min-width:768px){.compose{bottom:16px}}
.compose input{flex:1;border:0;outline:none;background:none;font-size:15px;padding:0 8px}

/* empty, loading, failure */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:36px 20px;color:var(--muted)}
.empty .ic{width:64px;height:64px;border-radius:32px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-d);margin-bottom:4px}
.empty .ic svg{width:28px;height:28px}
.empty b{color:var(--ink);font-size:16px}
.empty .btn{margin-top:8px}
.skel{border-radius:var(--r-md);background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 37%,var(--surface-2) 63%);background-size:400% 100%;
  animation:shimmer 1.3s ease infinite;min-height:16px}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.fail{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 20px;text-align:center}
.fail .ic{width:60px;height:60px;border-radius:30px;display:grid;place-items:center;background:var(--plum-soft);color:var(--plum-d)}

/* tables (dense desk lists) */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font:700 12px/1 var(--font);color:var(--muted);text-align:start;padding:10px 12px;border-bottom:1px solid var(--hair);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:var(--hover)}
.tbl td.n,.tbl th.n{text-align:end;font-variant-numeric:tabular-nums}
.tbl input.cell{width:100%;height:38px;border-radius:9px;border:1.5px solid var(--field-line);padding:0 10px;background:var(--surface);font-variant-numeric:tabular-nums}
.scroll-x{overflow-x:auto}

/* two columns on a computer: the work and its aside */
.cols{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:1000px){.cols{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}.cols.even{grid-template-columns:1fr 1fr}}
.stack{display:flex;flex-direction:column;gap:14px}

/* signed out: sign-in, sign-up, the invitation — the mark and the words on a bright ground, no box */
body.signed-out{background:var(--bg)}
body.signed-out main#view{max-width:none;padding:0}
.auth{min-height:100dvh;display:grid;grid-template-columns:1fr}
@media (min-width:980px){.auth{grid-template-columns:minmax(420px,1fr) minmax(0,1.1fr)}}
.auth .pane{display:flex;flex-direction:column;justify-content:center;padding:32px 22px 40px;max-width:480px;width:100%;margin:0 auto}
.auth .pane .brand{display:flex;align-items:center;gap:10px;margin-bottom:30px}
.auth h1{font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.15;margin-bottom:6px}
.auth .lead{color:var(--muted);font-size:15px;margin-bottom:22px}
.auth .alt{margin-top:18px;font-size:14px;color:var(--muted);text-align:center}
.auth .by{margin-top:26px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;justify-content:center}
.auth .art{display:none;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--olive-soft),var(--sky-soft) 60%,var(--lime-soft));padding:56px 48px}
@media (min-width:980px){.auth .art{display:flex;flex-direction:column;justify-content:center;gap:22px}}
.auth .art h2{font-size:40px;line-height:1.08;font-weight:800;letter-spacing:-1.4px;max-width:520px}
.auth .art h2 em{font-style:normal;color:var(--brand-d)}
.auth .art ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:480px}
.auth .art li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.auth .art li svg{color:var(--brand-d);margin-top:2px}
.auth .art .mock{margin-top:8px;max-width:520px;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:14px;display:grid;gap:10px}
.kind{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.kind button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:var(--r-lg);border:1.5px solid var(--field-line);
  background:var(--surface);cursor:pointer;text-align:start}
.kind button b{font-size:15px}
.kind button span{font-size:12.5px;color:var(--muted)}
.kind button svg{color:var(--brand-d)}
.kind button[aria-pressed="true"]{border-color:var(--brand-d);box-shadow:0 0 0 4px var(--brand-soft)}
.steps{display:flex;gap:6px;margin-bottom:18px}
.steps i{flex:1;height:4px;border-radius:2px;background:var(--surface-2)}
.steps i.on{background:var(--brand)}

/* the Israeli map of where a supplier delivers (schematic, by region) */
.ilmap{width:100%;max-width:220px;height:auto}
.ilmap path{fill:var(--surface-2);stroke:var(--line);stroke-width:1.2;transition:fill var(--t-fast)}
.ilmap path.on{fill:var(--brand);stroke:var(--brand-d)}
.ilmap path.tap{cursor:pointer}
.ilmap path.tap:hover{fill:var(--brand-soft)}
.ilmap path.on.tap:hover{fill:var(--brand-d)}
.mapwrap{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
@media (max-width:520px){.mapwrap{grid-template-columns:1fr}.ilmap{max-width:160px;margin:auto}}

/* print: an invoice, a statement, a signature certificate — paper is bright and has no chrome */
@media print{
  .x-top,.x-tabs,.x-rail,.x-strip,.cartbar,.ph .acts,.noprint,.banner{display:none!important}
  main#view{margin:0!important;padding:0!important;max-width:none}
  body{background:var(--surface)}
  .sheet{border:0}
}