/* vkura design system: "Atoll"
   A shop book that feels like arriving at a resort at dusk, not opening a spreadsheet.
   - Everything you navigate with (top bar, masthead, dock, sidebar, action bar) sits on deep
     lagoon water. Everything you work on sits on a pale "sheet" that rises over it.
   - One signature colour for the single thing to do next: sun. Mint (from the logo dot) lights
     up what is active. Money and counts are set in tabular figures.
   - Instrument Serif gives titles and big figures a calm editorial voice; Instrument Sans carries the work.
   Geometry: sheet 28px, cards 24px, tiles 20px, controls 16px, buttons and chips are pills.
   Mobile first. Tap targets are 44px or more. Motion explains, never decorates, and stops under
   prefers-reduced-motion.

   Type scale   12 / 13 / 14 / 16 / 18 / 24 / 32 / 40-56      Space (4px grid)   4 8 12 16 24 32 48
   Colour roles shell (navigation water) / paper (the sheet) > surface (cards) > sunken (wells)
                ink / muted; line / field; sun (next action), mint (active), brand (links); amber waits, red is a problem */

@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans-latin-wght-normal.fa41c43a3d8e.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-latin-400-normal.9b8dd1ecf641.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-latin-400-italic.bc891bdd08ad.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  color-scheme:light;
  /* navigation water */
  --shell:#04191d;
  --shell-2:#0a2a30;
  --shell-3:#143c44;
  --shell-ink:#eaf4f2;
  --shell-muted:#97b6b3;
  --shell-line:rgb(234 244 242 / .13);
  /* the sheet and what sits on it */
  --paper:#eef3f2;
  --surface:#fff;
  --sunken:#e2ebe9;
  --ink:#0a2226;
  --muted:#4a6366;
  --line:#d5dfdd;
  --line-strong:#b6c6c3;
  --field:#6d8885;
  /* accents */
  --sun:#ff9157;
  --sun-press:#ff7d3a;
  --sun-ink:#1d0d03;
  --mint:#4fd1c0;
  --brand:#0a6b6e;
  --brand-press:#085557;
  --brand-ink:#fff;
  --brand-tint:#d3ebe7;
  --brand-tint-ink:#06403f;
  --brand-mid:#7fbdb6;
  --focus:#0a6b6e;
  /* status */
  --alert:#b42318;
  --alert-tint:#fde4e0;
  --warn:#734400;
  --warn-tint:#fbeac2;
  --amber:#e7a21a;
  /* elevation: only for things that float */
  --lift:0 1px 2px rgb(4 25 29 / .1),0 18px 40px -12px rgb(4 25 29 / .32);
  --lift-dark:0 1px 2px rgb(0 0 0 / .4),0 22px 44px -10px rgb(0 0 0 / .55);
  /* type */
  --font-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Instrument Serif","Iowan Old Style",Georgia,"Times New Roman",serif;
  /* space (4px grid) */
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;
  /* shape */
  --r-sheet:28px;--r-lg:24px;--r:20px;--r-sm:16px;--r-xs:10px;--r-pill:999px;
  --tap:2.75rem;
  --col:40rem;
  --side:0rem;
  --dock:4.25rem;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
}
/* Dark tokens apply when the device is dark (unless the seller picked Light in Settings) or when they picked Dark. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --shell:#021114;--shell-2:#0a262b;--shell-3:#14393f;--shell-ink:#eaf4f2;--shell-muted:#8fb0ad;--shell-line:rgb(234 244 242 / .12);
    --paper:#0b2126;--surface:#12313a;--sunken:#081a1e;
    --ink:#e8f2f0;--muted:#9bb5b2;
    --line:#1f3f46;--line-strong:#2f5159;--field:#5f8581;
    --sun:#ff9a63;--sun-press:#ffb084;
    --brand:#58d8c8;--brand-press:#8be9dc;--brand-ink:#04201d;--brand-tint:#14403f;--brand-tint-ink:#b4f0e7;--brand-mid:#2c7b75;--focus:#58d8c8;
    --alert:#ff8f84;--alert-tint:#3c1d1a;--warn:#f3c86f;--warn-tint:#342708;--amber:#e9b13a;
    --lift:0 1px 2px rgb(0 0 0 / .5),0 20px 40px -10px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --shell:#021114;--shell-2:#0a262b;--shell-3:#14393f;--shell-ink:#eaf4f2;--shell-muted:#8fb0ad;--shell-line:rgb(234 244 242 / .12);
    --paper:#0b2126;--surface:#12313a;--sunken:#081a1e;
    --ink:#e8f2f0;--muted:#9bb5b2;
    --line:#1f3f46;--line-strong:#2f5159;--field:#5f8581;
    --sun:#ff9a63;--sun-press:#ffb084;
    --brand:#58d8c8;--brand-press:#8be9dc;--brand-ink:#04201d;--brand-tint:#14403f;--brand-tint-ink:#b4f0e7;--brand-mid:#2c7b75;--focus:#58d8c8;
    --alert:#ff8f84;--alert-tint:#3c1d1a;--warn:#f3c86f;--warn-tint:#342708;--amber:#e9b13a;
    --lift:0 1px 2px rgb(0 0 0 / .5),0 20px 40px -10px rgb(0 0 0 / .6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:9rem;background:var(--shell)}
body{margin:0;background:var(--shell);color:var(--ink);font:400 1rem/1.5 var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--brand);text-underline-offset:.22em;text-decoration-thickness:1px}
h1,h2,h3{margin:0;text-wrap:balance}
h1,h2{font-family:var(--font-display);font-weight:400}
h1{font-size:clamp(2.25rem,8vw,3.25rem);letter-spacing:-.015em;line-height:1}
h2{font-size:1.625rem;letter-spacing:-.01em;line-height:1.1}
h3{font-weight:600;font-size:1.0625rem;letter-spacing:-.005em;line-height:1.25}
p{margin:0 0 var(--s3);text-wrap:pretty}
em,i.serif{font-family:var(--font-display);font-style:italic;font-weight:400}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)}
.topbar,.masthead,.tabbar,.actionbar,.hero,.closer,.auth-art,.kpi.dark{--focus:var(--mint)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--sun);color:var(--sun-ink);padding:var(--s3) var(--s4);z-index:100;font-weight:600;border-radius:0 0 var(--r-xs) 0}
.skip:focus{left:0}
::selection{background:var(--mint);color:var(--shell)}

/* icons */
.i{width:1.375rem;height:1.375rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.i-sm{width:1.0625rem;height:1.0625rem}

/* utility */
.stack>*+*{margin-top:var(--s4)}
.row{display:flex;align-items:center;gap:var(--s3)}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.center{text-align:center}
.eyebrow{margin:0 0 var(--s2);color:var(--muted);font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.hide-sm{}
/* money and counts are tabular so figures line up */
.money{font-weight:600;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;letter-spacing:-.005em}

/* ---------- shell: brand ---------- */
.brand{min-height:var(--tap);font-family:var(--font-display);font-weight:400;font-size:1.75rem;letter-spacing:-.01em;color:var(--shell-ink);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;line-height:1}
.brand-mark{display:inline-block;width:1.875rem;height:1.875rem;flex:none;border-radius:30%;overflow:hidden;box-shadow:0 0 0 1px var(--shell-line)}
.brand-mark svg{display:block;width:100%;height:100%}

/* ---------- shell: top bar (the water line) ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--shell);color:var(--shell-ink)}
.topbar-in{max-width:calc(var(--col) + 2 * var(--s4));margin:0 auto;padding:var(--s2) var(--gut);min-height:3.75rem;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
:root{--gut:max(var(--s4),env(safe-area-inset-left))}
.shopname{display:inline-flex;align-items:center;gap:.375rem;min-width:0;min-height:var(--tap);color:var(--shell-ink);text-decoration:none;font-family:var(--font-display);font-size:1.5rem;letter-spacing:-.005em;line-height:1}
.shopname-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shopname .i{color:var(--shell-muted);transition:transform .25s var(--ease)}
.topbar-actions{display:flex;align-items:center;gap:var(--s2)}
.back{display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--tap);color:var(--shell-ink);text-decoration:none;font-weight:600;margin-left:calc(var(--s2) * -1);padding:0 var(--s3) 0 var(--s2);border-radius:var(--r-pill);transition:background .15s}
.back .i{width:1.375rem;height:1.375rem}
.bar-title{flex:1;text-align:center;font-family:var(--font-display);font-size:1.375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar-gap{width:4.5rem;flex:none}
.btn.top-new{display:none}
.logout-form{margin:0}
@media (hover:hover){.back:hover{background:var(--shell-3)}}

.avatar{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;background:var(--shell-3);color:var(--mint);font-weight:600;font-size:.8125rem;letter-spacing:.04em;text-decoration:none;box-shadow:inset 0 0 0 1px var(--shell-line)}
a.avatar{width:var(--tap);height:var(--tap)}
.avatar.sm{width:2.125rem;height:2.125rem;font-size:.75rem}
.avatar.lg{width:3.25rem;height:3.25rem;font-size:1rem}
.avatar.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted)}
main .avatar,.menu .avatar{background:var(--brand-tint);color:var(--brand-tint-ink);box-shadow:none}
main .avatar.ghost,.menu .avatar.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted)}
@media (max-width:23.99rem){.topbar-actions .avatar{display:none}}

/* ---------- shell: masthead (the title, on water) ---------- */
.masthead{position:relative;overflow:hidden;background:var(--shell);color:var(--shell-ink);padding:var(--s2) 0 calc(var(--r-sheet) + var(--s6));isolation:isolate}
.masthead-in{position:relative;z-index:1;max-width:calc(var(--col) + 2 * var(--s4));margin:0 auto;padding:0 var(--gut)}
.masthead .page-head{margin:0}
.masthead h1{color:var(--shell-ink);overflow-wrap:anywhere}
.masthead .eyebrow{color:var(--mint)}
.masthead .page-sub,.masthead .page-head p{color:var(--shell-muted)}
.masthead .muted{color:var(--shell-muted)}
.atoll{position:absolute;z-index:0;right:-18%;top:-22%;width:min(46rem,150%);aspect-ratio:1;color:var(--mint);pointer-events:none;opacity:.9}
.atoll *{vector-effect:non-scaling-stroke}
.masthead .atoll{opacity:.8}
@media (min-width:48rem){.atoll{right:-6%;top:-45%;width:min(52rem,80%)}}

/* ---------- shell: the sheet ---------- */
main{position:relative;background:var(--paper);border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  --pad:max(var(--gut),calc((100% - var(--col)) / 2));
  padding:var(--s5) var(--pad) calc(var(--dock) + var(--s7) + env(safe-area-inset-bottom))}
.masthead+main{margin-top:calc(var(--r-sheet) * -1);padding-top:var(--s5);z-index:2}
.topbar+main{min-height:calc(100dvh - 3.75rem)}
.masthead+main{min-height:55dvh}
main.has-actionbar{padding-bottom:9.5rem}
main.public{padding-bottom:var(--s7)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s4);margin-bottom:var(--s5)}
.page-head h1{overflow-wrap:anywhere}
.page-head p{margin:var(--s2) 0 0;color:var(--muted)}
.page-sub{margin:var(--s2) 0 0;color:var(--muted);font-size:1rem}
.mh-actions{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}

/* ---------- shell: dock (phones: a floating pill) ---------- */
.tabbar{position:fixed;inset:auto 0 0 0;z-index:30;padding:0 var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));pointer-events:none}
.tabbar-in{pointer-events:auto;max-width:26rem;margin:0 auto;height:var(--dock);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;padding:0 var(--s1);background:var(--shell-2);border-radius:26px;box-shadow:var(--lift-dark),inset 0 0 0 1px var(--shell-line)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;color:var(--shell-muted);text-decoration:none;font-size:.6875rem;font-weight:600;letter-spacing:.01em;transition:color .2s}
.tab .i{box-sizing:content-box;width:1.375rem;height:1.375rem;padding:.25rem .875rem;border-radius:var(--r-pill);transition:background .25s var(--ease),color .2s}
.tab .lbl{white-space:nowrap}
.tab[aria-current="page"]{color:var(--mint)}
.tab[aria-current="page"] .i{background:rgb(79 209 192 / .14);stroke-width:2}
.tab-add .fab{width:3.5rem;height:3.5rem;margin-top:-1.5rem;border-radius:50%;background:var(--sun);color:var(--sun-ink);display:grid;place-items:center;box-shadow:0 0 0 6px var(--shell-2),0 8px 18px -4px rgb(255 125 58 / .55);transition:transform .2s var(--ease-spring)}
.tab-add .fab .i{padding:0;background:none;stroke-width:2.2;width:1.5rem;height:1.5rem}
.tab-add:active .fab{transform:scale(.92)}
.tab-add .lbl{color:var(--shell-muted);margin-top:2px}
.tab-add[aria-current="page"] .lbl{color:var(--mint)}
.tab:active:not(.tab-add) .i{background:var(--shell-3)}
.tab-settings,.tab-customers,.tab-team,.side-foot,.side-brand,.nav-cap{display:none}
@media (max-width:63.99rem){.tabbar.hide-mobile{display:none}}
@media (max-height:32rem) and (orientation:landscape) and (max-width:63.99rem){
  :root{--dock:3.5rem}
  .topbar{position:static}
  .tab{flex-direction:row;gap:.4rem}
  .tab .i{padding:.25rem .5rem}
  .tab-add .fab{width:2.5rem;height:2.5rem;margin-top:-.5rem}
}

/* ---------- action bar (form pages): a dark pill that floats over the sheet ---------- */
.actionbar{position:fixed;inset:auto 0 0 0;z-index:30;padding:0 var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));pointer-events:none;left:var(--side)}
.actionbar-in{pointer-events:auto;max-width:calc(var(--col) - var(--s5));margin:0 auto;display:flex;align-items:center;gap:var(--s3);padding:var(--s2);background:var(--shell-2);color:var(--shell-ink);border-radius:30px;box-shadow:var(--lift-dark),inset 0 0 0 1px var(--shell-line)}
.actionbar .total{display:flex;flex-direction:column;line-height:1.1;padding-left:var(--s3)}
.actionbar .total small{color:var(--shell-muted);font-weight:500;font-size:.75rem}
.actionbar .total .money{font-family:var(--font-body);font-size:1.25rem;font-weight:600}
.actionbar .btn{flex:1;white-space:nowrap;padding:0 var(--s3)}
.actionbar .btn.ghost{color:var(--shell-ink);border-color:var(--shell-line)}
.actionbar .btn.soft{background:var(--shell-3);color:var(--shell-ink)}
.actionbar .btn[disabled]{background:var(--shell-3);color:var(--shell-muted)}
.actionbar form{margin:0}
.form-single{max-width:34rem;margin:0 auto}
.form-single .actionbar-in{max-width:34rem}
.form-single .actionbar .btn,.form-single .actionbar .btn.ghost{flex:1 1 0}
@media (hover:hover){.actionbar .btn.ghost:hover{background:var(--shell-3)}}

/* ---------- surfaces ---------- */
.card,.section,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);min-width:0}
.card.flat{background:transparent}
.card.tint{background:var(--brand-tint);color:var(--brand-tint-ink);border-color:transparent}
.section>h2{margin-bottom:var(--s4)}
.section+.section,.section+details,details+.section,form>.section+.section{margin-top:var(--s4)}
.card-link{display:block;color:inherit;text-decoration:none}
details.disclose{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-top:var(--s4)}
details.disclose>summary{list-style:none;cursor:pointer;min-height:3.5rem;padding:0 var(--s5);display:flex;align-items:center;justify-content:space-between;font-weight:600;border-radius:var(--r-lg)}
details.disclose>summary::-webkit-details-marker{display:none}
details.disclose>summary .i{transition:transform .25s var(--ease);color:var(--muted)}
details.disclose[open]>summary .i{transform:rotate(180deg)}
details.disclose>.inner{padding:0 var(--s5) var(--s5)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)}
.panel-head h2{font-size:1.5rem}
.panel-link{display:inline-flex;align-items:center;min-height:var(--tap);margin:calc(var(--s2) * -1) 0;padding-inline:var(--s2);font-weight:600;font-size:.9375rem;color:var(--brand);text-decoration:none}
.panel-link:hover{text-decoration:underline}
.panel-empty{margin:0;padding:var(--s2) 0;color:var(--muted)}

/* ---------- buttons: pills. Sun is the one next thing to do. ---------- */
.btn,button{font:inherit;font-weight:600;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:3.25rem;padding:0 var(--s5);border-radius:var(--r-pill);border:1.5px solid transparent;background:var(--sun);color:var(--sun-ink);text-decoration:none;letter-spacing:.005em;transition:background .15s,border-color .15s,transform .15s var(--ease),box-shadow .2s;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 0 rgb(255 255 255 / .35) inset,0 6px 16px -8px rgb(255 125 58 / .7)}
.btn:active{transform:scale(.97)}
.btn.block{display:flex;width:100%}
.btn.lg{min-height:3.5rem;font-size:1.0625rem}
.btn.soft{background:var(--brand-tint);color:var(--brand-tint-ink);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none}
.btn.danger{background:transparent;color:var(--alert);border-color:color-mix(in srgb,var(--alert) 50%,transparent);box-shadow:none}
.btn.sm{min-height:var(--tap);padding:0 var(--s4);font-size:.9375rem}
.btn[disabled],button.btn[disabled]{background:var(--sunken);color:var(--muted);border-color:transparent;cursor:not-allowed;box-shadow:none}
.icon-btn{display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.link-btn{background:none;border:0;padding:0;color:var(--muted);font-weight:600;font-size:.9375rem;min-height:var(--tap);cursor:pointer}
/* on water: buttons turn translucent instead of pale */
.masthead .btn.soft,.topbar .btn.soft,.hero .btn.soft{background:rgb(234 244 242 / .12);color:var(--shell-ink)}
.masthead .btn.ghost,.topbar .btn.ghost,.hero .btn.ghost,.land-top .btn.ghost,.closer .btn.ghost{color:var(--shell-ink);border-color:var(--shell-line)}
@media (hover:hover){
  .btn:hover{background:var(--sun-press)}
  .btn.soft:hover{background:color-mix(in srgb,var(--brand-tint) 70%,var(--brand-mid))}
  .btn.ghost:hover{background:var(--sunken)}
  .btn.danger:hover{background:var(--alert-tint)}
  .btn[disabled]:hover{background:var(--sunken)}
  .icon-btn:hover{background:var(--sunken)}
  .masthead .btn.soft:hover,.topbar .btn.soft:hover{background:rgb(234 244 242 / .2)}
  .masthead .btn.ghost:hover,.topbar .btn.ghost:hover,.hero .btn.ghost:hover,.land-top .btn.ghost:hover,.closer .btn.ghost:hover{background:rgb(234 244 242 / .1)}
}

/* ---------- forms ---------- */
.field{margin-bottom:var(--s4)}
.field:last-child{margin-bottom:0}
.field>label,.label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:var(--s2)}
.field>label.switch{display:flex;font-size:1rem;margin-bottom:0}
.hint{color:var(--muted);font-size:.875rem;margin:var(--s2) 0 0}
input[type=text],input[type=tel],input[type=number],input[type=password],input[type=email],input[type=url],input[type=search],select,textarea{
  font:inherit;font-size:1rem;width:100%;min-height:3.25rem;padding:.7rem var(--s4);border-radius:var(--r-sm);border:1.5px solid var(--field);background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .2s;appearance:none;-webkit-appearance:none}
textarea{min-height:6.5rem;resize:vertical;line-height:1.45}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23778' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .95rem center;padding-right:2.75rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 75%,transparent)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--alert)}
.errors{list-style:none;margin:var(--s2) 0 0;padding:0;color:var(--alert);font-size:.9rem;font-weight:600}
.form-error{background:var(--alert-tint);color:var(--alert);border-radius:var(--r-sm);padding:var(--s3) var(--s4);font-weight:600;margin-bottom:var(--s4);box-shadow:inset 4px 0 0 var(--alert)}
.form-error ul{margin:0;padding:0;list-style:none}
.affix{display:flex;align-items:stretch}
.affix .pre{display:grid;place-items:center;padding:0 var(--s4);font-weight:600;font-size:.8125rem;letter-spacing:.08em;background:var(--sunken);color:var(--muted);border-radius:var(--r-sm) 0 0 var(--r-sm);border:1.5px solid var(--field);border-right:0}
.affix input{border-radius:0 var(--r-sm) var(--r-sm) 0;min-width:0}
.affix.at .pre{font-size:1.05rem}
.req{color:var(--alert);font-weight:700}
.req-note{margin:0 0 var(--s4);color:var(--muted);font-size:.875rem;font-weight:500}
.field.has-error .stepper{border-color:var(--alert)}
.field.has-error .affix .pre{border-color:var(--alert)}

/* segmented radio group */
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:var(--s2)}
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg.two{grid-template-columns:repeat(2,1fr)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:3.25rem;padding:var(--s2) var(--s3);border-radius:var(--r-sm);border:1.5px solid var(--field);background:var(--surface);font-weight:600;font-size:.9375rem;line-height:1.2;transition:background .15s,border-color .15s,color .15s}
.seg input:checked+span{background:var(--shell);border-color:var(--shell);color:var(--shell-ink);box-shadow:0 8px 18px -10px rgb(4 25 29 / .7)}
.seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seg input:checked+span{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-tint-ink)}}
:root[data-theme="dark"] .seg input:checked+span{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-tint-ink)}

/* switch */
.switch{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);cursor:pointer;font-weight:600}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{flex:none;width:3.25rem;height:1.875rem;border-radius:var(--r-pill);background:var(--field);position:relative;transition:background .25s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:1.5rem;height:1.5rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .3);transition:transform .3s var(--ease-spring)}
.switch input:checked+.track{background:var(--brand)}
.switch input:checked+.track::after{transform:translateX(1.375rem)}
.switch input:focus-visible+.track{outline:3px solid var(--focus);outline-offset:2px}

/* steppers */
.stepper,.qty{display:inline-flex;align-items:center;border-radius:var(--r-pill);border:1.5px solid var(--field);background:var(--surface);overflow:hidden;min-width:0}
.stepper button,.qty button{width:3.25rem;height:3.25rem;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;padding:0;flex:none}
.stepper button:active,.qty button:active{background:var(--brand-tint)}
.qty button[disabled]{opacity:.35}
.stepper input,.qty input{border:0;border-radius:0;background:transparent;text-align:center;padding:0;font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield;min-height:3.25rem}
.stepper input{width:3.25rem}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus,.qty input:focus{box-shadow:none;background:var(--brand-tint)}

/* photo picker */
.photo{position:relative;display:grid;place-items:center;text-align:center;gap:var(--s2);min-height:11rem;border-radius:var(--r-lg);border:2px dashed var(--field);background:var(--surface);cursor:pointer;overflow:hidden;color:var(--muted);font-weight:600}
.photo input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;min-height:0}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .ph{display:grid;place-items:center;gap:var(--s2);padding:var(--s4)}
.photo .ph .i{width:2rem;height:2rem;color:var(--brand)}
.photo:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}
.choices{display:grid;gap:var(--s2)}
.choice{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3);border:1.5px solid var(--field);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.choice input{margin-top:.2rem;flex:none}
.choice span{display:grid;gap:.15rem}
.choice small{font-size:.8125rem;line-height:1.35}
.choice:has(input:checked){border-color:var(--brand);background:var(--brand-tint)}
.choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.photo-strip{list-style:none;margin:0 0 var(--s3);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:var(--s3)}
.photo-strip:empty{display:none;margin:0}
.photo-strip li{position:relative;display:grid;gap:var(--s2);align-content:start;justify-items:start}
.photo-strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);background:var(--sunken)}
.photo-strip .switch{min-height:2.25rem;font-size:.8125rem;gap:var(--s2)}
.photo-strip .badge{position:absolute;left:.35rem;top:.35rem;background:var(--surface)}
.photo.compact{min-height:7rem}
.photo .swap{position:absolute;right:var(--s3);bottom:var(--s3);background:var(--shell);color:var(--shell-ink);border-radius:var(--r-pill);padding:.35rem .85rem;font-size:.8125rem}

/* ---------- status: badges, chips, tabs ---------- */
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .65rem;border-radius:var(--r-pill);font-size:.8125rem;font-weight:600;background:var(--sunken);color:var(--ink);white-space:nowrap;line-height:1.5}
.badge::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;flex:none}
.badge.ok{background:var(--brand-tint);color:var(--brand-tint-ink)}
.badge.warn{background:var(--warn-tint);color:var(--warn)}
.badge.out{background:var(--alert-tint);color:var(--alert)}
.badge.plain{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-strong)}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.chips{display:flex;gap:var(--s2);overflow-x:auto;margin:0 calc(var(--gut) * -1) var(--s4);padding:2px var(--gut) var(--s1);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s4);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-weight:600;font-size:.9375rem;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-strong);transition:background .15s,color .15s}
.chip[aria-current="true"]{background:var(--shell);color:var(--shell-ink);box-shadow:none}
.chip-n{display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;margin-left:.5rem;padding:0 .35rem;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}
.chip[aria-current="true"] .chip-n{background:var(--sun);color:var(--sun-ink)}
.tabs{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--sunken);gap:2px;justify-self:start;max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;min-width:2.75rem;justify-content:center;padding:0 var(--s4);border-radius:var(--r-pill);color:var(--muted);font-weight:600;font-size:.9375rem;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.tabs a[aria-current="true"]{background:var(--shell);color:var(--shell-ink)}
.tabs .count{background:var(--alert);color:#fff;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;padding:0 .45rem;min-width:1.3rem;text-align:center}
.tabs .count.quiet{background:var(--line);color:var(--muted)}
.masthead .tabs{background:rgb(234 244 242 / .1)}
.masthead .tabs a{color:var(--shell-muted)}
.masthead .tabs a[aria-current="true"]{background:var(--shell-ink);color:var(--shell)}
@media (hover:hover){
  .chip:hover:not([aria-current]){background:var(--sunken)}
  .tabs a:not([aria-current]):hover{color:var(--ink)}
  .masthead .tabs a:not([aria-current]):hover{color:var(--shell-ink)}
}

/* ---------- toasts: dark pills on the water ---------- */
.msgs{position:fixed;z-index:60;top:calc(var(--s3) + env(safe-area-inset-top));left:var(--s3);right:var(--s3);margin:0 auto;max-width:28rem;display:grid;gap:var(--s2);pointer-events:none}
.msg{pointer-events:auto;display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s3) var(--s3) var(--s4);border-radius:var(--r);background:var(--shell-2);color:var(--shell-ink);font-weight:500;box-shadow:var(--lift-dark),inset 0 0 0 1px var(--shell-line);transition:opacity .3s,transform .3s var(--ease)}
.msg>span{flex:1}
.msg .i:first-child{color:var(--mint);margin:0}
.msg.error,.msg.warning{box-shadow:var(--lift-dark),inset 0 0 0 1.5px var(--alert),inset 5px 0 0 var(--alert)}
.msg.error .i:first-child,.msg.warning .i:first-child{color:#ff9d93}
.msg-x{flex:none;border:0;background:none;color:var(--shell-muted);width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:50%;padding:0}
.msg-x:hover{background:var(--shell-3)}
.msg.out{opacity:0;transform:translateY(-10px)}

/* ---------- empty states ---------- */
.empty-state,.welcome{text-align:center;padding:var(--s7) var(--s4)}
.empty-state .art,.welcome .art,.shop-add .art{width:4.5rem;height:4.5rem;margin:0 auto var(--s4);border-radius:50%;background:var(--brand-tint);color:var(--brand-tint-ink);display:grid;place-items:center;box-shadow:0 0 0 8px color-mix(in srgb,var(--brand-tint) 45%,transparent),0 0 0 18px color-mix(in srgb,var(--brand-tint) 22%,transparent)}
.empty-state .art .i,.welcome .art .i{width:1.75rem;height:1.75rem}
.empty-state h2,.welcome h2{margin-bottom:var(--s2);font-size:2rem}
.empty-state p,.welcome p{color:var(--muted);max-width:26rem;margin:0 auto var(--s5)}
.welcome.card{padding:var(--s7) var(--s5)}
.welcome .cta{justify-content:center;margin:0}
.notfound{min-height:62dvh;display:grid;place-items:center;text-align:center;padding:var(--s6) var(--s4)}
.notfound .code{font-family:var(--font-display);font-style:italic;font-size:clamp(6rem,30vw,11rem);letter-spacing:-.03em;line-height:.9;color:var(--brand);margin:0 0 var(--s3)}
.notfound h1{margin-bottom:var(--s3)}
.notfound p{color:var(--muted);max-width:26rem;margin:0 auto var(--s5)}
.notfound .cta{justify-content:center;margin:0}
.cta{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
@media (min-width:30rem){.cta{grid-template-columns:auto auto;justify-content:start}}

/* ---------- stock ---------- */
.summary{color:var(--muted);font-weight:500;margin:0 0 var(--s4)}
.summary strong{color:var(--alert);font-weight:600}
.toolbar{display:grid;gap:var(--s3);margin-bottom:var(--s4)}
.search{position:relative;display:block}
.search .i{position:absolute;left:var(--s4);top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input{padding-left:2.9rem;border-radius:var(--r-pill);border-color:var(--line-strong)}
.plist{display:grid;gap:var(--s3)}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4)}
.pcard-top{display:flex;gap:var(--s3);align-items:center}
.thumb{width:4rem;height:4rem;border-radius:var(--r-sm);object-fit:cover;flex:none;background:var(--brand-tint)}
.thumb.empty{display:grid;place-items:center;font-family:var(--font-display);font-size:1.875rem;color:var(--brand-tint-ink)}
.pname{display:block;font-weight:600;font-size:1.0625rem;letter-spacing:-.005em;line-height:1.2;overflow-wrap:anywhere;color:inherit;text-decoration:none}
.pprice{color:var(--muted);font-size:.9375rem;margin-top:2px}
.pstats{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:var(--s2);margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--sunken)}
.pstats dt{color:var(--muted);font-size:.75rem;font-weight:600;letter-spacing:.02em}
.pstats dd{margin:2px 0 0;font-size:1.0625rem;white-space:nowrap}
.pstats dd.zero{color:var(--alert)}
.pstats.two{grid-template-columns:1fr 1fr;margin:0}
.prow .pname{display:block;min-height:var(--tap);padding-block:.625rem;margin-block:-.625rem -.5rem}
.vrow{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.vlabel{color:var(--muted);font-weight:600;font-size:.9375rem;overflow-wrap:anywhere;flex:1 1 auto;min-width:0}
.qty{flex:1}
.vlabel+.qty{flex:0 0 auto}
.qty input{flex:1;min-width:3rem;width:4rem;font-size:1.125rem}
.vrow>.btn{min-width:3.75rem;padding:0 var(--s4);flex:none}
.pfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:var(--s3);gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s1)}
.pfoot a,.pfoot button{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);min-width:var(--tap);color:var(--brand);font-weight:600;font-size:.9375rem;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.pfoot a:hover,.pfoot button:hover{text-decoration:underline}
.soldout-note{margin-top:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--alert-tint);color:var(--alert);font-size:.9375rem;font-weight:600}
.pcard .error{margin:var(--s3) 0 0;color:var(--alert);font-weight:600;font-size:.9375rem}
.ig-strip{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit;margin-bottom:var(--s4);min-height:3.5rem}
.ig-strip .ig-ico{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--shell);display:grid;place-items:center;color:var(--mint);flex:none}
.ig-strip.nudge{border-color:var(--brand)}
@keyframes flash{from{box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 70%,transparent)}to{box-shadow:0 0 0 0 transparent}}

/* ---------- orders ---------- */
.olist{display:grid;gap:var(--s2)}
.ocard{display:block;color:inherit;text-decoration:none;padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:transform .15s var(--ease),background .15s}
.ocard:active{transform:scale(.985)}
@media (hover:hover){.ocard:hover{background:color-mix(in srgb,var(--surface) 70%,var(--sunken))}}
.ocard .who{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ocard .meta{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap}
.ocard .money{font-size:1.0625rem}
.onum{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.olist .empty-state{grid-column:1/-1}
.table-wrap{overflow-x:auto;margin:0 calc(var(--s2) * -1)}
.dtable{width:100%;border-collapse:collapse;font-size:.9375rem}
.dtable th{text-align:left;color:var(--muted);font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.5rem var(--s3);border-bottom:1px solid var(--line-strong);white-space:nowrap}
.dtable td{padding:.9rem var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
.dtable tbody tr{position:relative;transition:background .12s}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr:hover{background:color-mix(in srgb,var(--sunken) 60%,transparent)}
.dtable .num{text-align:right;white-space:nowrap}
.cell-sub{display:block;color:var(--muted);font-size:.8125rem;font-weight:400}
.rowlink{color:var(--ink);font-weight:600;text-decoration:none}
.rowlink::after{content:"";position:absolute;inset:0}
.table-panel{display:none;padding:var(--s3)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s1);margin:var(--s4) 0 0;padding:0;list-style:none}
.timeline li{position:relative;text-align:center;font-size:.8125rem;font-weight:500;color:var(--muted);padding-top:1.9rem}
.timeline li::before{content:"";position:absolute;top:.3rem;left:50%;width:1rem;height:1rem;margin-left:-.5rem;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line-strong);z-index:1}
.timeline li::after{content:"";position:absolute;top:.72rem;left:-50%;width:100%;height:2px;background:var(--line-strong)}
.timeline li:first-child::after{display:none}
.timeline li.done{color:var(--ink);font-weight:600}
.timeline li.done::before{background:var(--shell);box-shadow:none}
.timeline li.done::after{background:var(--shell)}
.timeline li.now::before{background:var(--sun);box-shadow:0 0 0 5px color-mix(in srgb,var(--sun) 30%,transparent)}
.timeline.mini{margin:0}
.timeline.mini li{font-size:.75rem}
.kv a{display:inline-flex;align-items:center;min-height:var(--tap)}
.kv{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0}
.kv.total{border-top:1px dashed var(--line-strong);margin-top:var(--s2);padding-top:var(--s3);font-weight:600;font-size:1.125rem}
.kv.total .money{font-size:1.375rem}
.contact{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.detail-grid{display:flex;flex-direction:column;gap:var(--s4)}
.detail-grid>.stackcol{display:contents}
.detail-grid>*,.detail-grid .stackcol>*{margin:0!important}
.d-progress{order:1}.d-cust{order:2}.d-items{order:3}.d-more{order:4}
.stackcol{display:grid;gap:var(--s4);align-content:start}
.form-split{display:grid;gap:var(--s4)}
.form-split>.section{margin:0!important}

/* ---------- order screen (point of sale) ---------- */
#pos[data-stage="pick"] [data-view="details"],#pos[data-stage="details"] [data-view="pick"],
#pos[data-stage="pick"] [data-when="details"],#pos[data-stage="details"] [data-when="pick"]{display:none!important}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (min-width:36rem){.grid{grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}}
/* A tile is a card: the photo, then one big button (name and price) whose hit area is stretched over the whole card.
   The quantity stepper floats over the photo and sits above that stretched area, so a tap on it never adds another. */
.tile{position:relative;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2);border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);-webkit-tap-highlight-color:transparent;transition:border-color .15s,box-shadow .2s,transform .15s var(--ease)}
.tile:has(.tile-add:active){transform:scale(.97)}
.tile.in-cart{border-color:var(--sun);box-shadow:0 0 0 2px var(--sun),0 12px 24px -14px rgb(255 125 58 / .8)}
.tile[hidden]{display:none}
.tile-media{position:relative}
.tile-img{display:block;width:100%;aspect-ratio:1/1;border-radius:calc(var(--r) - 6px);object-fit:cover;background:var(--brand-tint)}
.tile-img.empty{display:grid;place-items:center;font-family:var(--font-display);font-size:3.25rem;color:var(--brand-tint-ink)}
.tile-add{display:flex;flex-direction:column;gap:var(--s2);flex:1;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tile-add::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tile-add:focus-visible{outline:none}
.tile-add:focus-visible::after{outline:3px solid var(--focus);outline-offset:2px}
.tile-name{font-weight:600;line-height:1.2;padding:0 var(--s1);overflow-wrap:anywhere}
.tile-label{display:inline-block;margin-left:.15rem;padding:0 .5rem;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink);font-size:.8125rem;font-weight:600}
.tile-foot{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);padding:0 var(--s1) var(--s1);margin-top:auto}
.tile-foot .money{font-size:1.0625rem;font-weight:700}
.tile-stock{color:var(--muted);font-size:.8125rem;font-weight:500;white-space:nowrap}
.tile-stock.low,.tile.maxed .tile-stock{color:var(--alert)}
.tile-step{position:absolute;z-index:1;left:var(--s2);right:var(--s2);bottom:var(--s2);display:flex;align-items:center;border-radius:var(--r-pill);background:var(--sun);color:var(--sun-ink);box-shadow:0 6px 16px -6px rgb(4 25 29 / .55)}
.tile-step[hidden]{display:none}
.tile-step button{flex:none;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:var(--r-pill);background:transparent;color:inherit;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tile-step button:active{background:rgb(29 13 3 / .14)}
.tile-step button:focus-visible{outline:3px solid var(--sun-ink);outline-offset:-3px}
.tile-step button[disabled]{opacity:.45}
.tile-n{flex:1;text-align:center;font-weight:700;font-size:1.0625rem;font-variant-numeric:tabular-nums}
.tile.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.sum{margin-top:var(--s4);padding-top:var(--s2);border-top:1px dashed var(--line-strong)}
.discount{margin-top:var(--s4)}
.discount-row{display:grid;grid-template-columns:8rem 1fr;gap:var(--s3);align-items:start}
.discount-row .seg span{min-height:3.25rem}
@media (max-width:22rem){.discount-row{grid-template-columns:1fr}}
.cartline{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.cartline:last-child{border-bottom:0}
.cl-top{display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start}
.cl-name{display:block;font-weight:600}
.cl-meta{display:block;color:var(--muted);font-size:.875rem}
.cl-total{white-space:nowrap}
.cl-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s2)}
.rm{color:var(--muted);font-size:.9rem;font-weight:600;min-height:var(--tap);padding:0 var(--s2);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.cust-walkin,.cust-chip{display:flex;align-items:center;gap:var(--s3)}
.cust-walkin .grow,.cust-chip .grow,.cust-item .grow{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.cust-name{overflow-wrap:anywhere}
.cust-deliver,.cust-new{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);display:grid;gap:var(--s3)}
.cust-deliver .field,.cust-new .field{margin:0}
.cust-new-fields{display:grid;gap:var(--s3)}
.cust-list{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s1)}
.cust-item{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:3.5rem;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.cust-item:hover{background:var(--sunken)}
.cust-item b{overflow-wrap:anywhere;font-weight:600}
.cust-none{margin:var(--s3) 0 0}
.ok-note{color:var(--brand);font-weight:600}

/* ---------- dashboard ---------- */
/* the lead figure lives on the water, in the masthead */
.hero-fig{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1);margin-top:var(--s5)}
.hero-fig .kpi-label{color:var(--shell-muted);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.hero-fig .kpi-value{font-size:clamp(3.25rem,15vw,5.5rem);line-height:.95;color:var(--shell-ink);letter-spacing:-.02em}
.hero-fig .kpi-sub{color:var(--shell-muted);margin-top:var(--s2)}
.hero-fig .delta.up{color:var(--mint)}
.hero-fig .delta.down{color:#ff9d93}
.hero-fig .delta .vs{color:var(--shell-muted)}
.mh-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3) var(--s4)}

/* key figures: floating cards, the lead one on water */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s5)}
.kpi{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:inherit;text-decoration:none}
.kpi.dark{position:relative;overflow:hidden;background:var(--shell);color:var(--shell-ink);border-color:transparent}
.kpi-label{color:var(--muted);font-size:.8125rem;font-weight:600}
.kpi-value{font-family:var(--font-display);font-weight:400;font-size:1.875rem;white-space:nowrap;letter-spacing:-.01em;line-height:1.1;font-variant-numeric:lining-nums;overflow-wrap:break-word}
.kpi.dark .kpi-label,.kpi.dark .kpi-sub{color:var(--shell-muted)}
.kpi.dark .kpi-value{color:var(--shell-ink);font-size:2.5rem}
.kpi-sub{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted);font-size:.8125rem;font-weight:500;margin-top:var(--s1)}
.kpi-sub .vs{font-weight:400}
.delta.up{color:var(--brand)}
.delta.down{color:var(--alert)}
.delta .vs{color:var(--muted)}
.kpi.dark .delta.up{color:var(--mint)}
.kpi.dark .delta.down{color:#ff9d93}
.kpis:not(:has(.kpi.dark))>.kpi:last-child:nth-child(odd){grid-column:1/-1}
.kpis.three .kpi.dark{grid-column:1/-1;order:-1}
a.kpi.link{transition:transform .2s var(--ease),border-color .2s}
a.kpi.link:hover{border-color:var(--brand)}
@media (max-width:47.99rem){.delta .vs{display:none}.dtable th,.dtable td{padding-inline:var(--s2)}}
@media (min-width:36rem){.kpis.three{grid-template-columns:repeat(3,1fr)}.kpis.three .kpi.dark{grid-column:auto;order:0}.kpis:not(:has(.kpi.dark))>.kpi:last-child:nth-child(odd){grid-column:auto}}
@media (min-width:48rem){.kpi{padding:var(--s5)}.kpi-value{font-size:2.25rem}.kpi.dark .kpi-value{font-size:2.5rem}}
@media (min-width:64rem){.kpis:not(.three){grid-template-columns:repeat(4,1fr)}}

.dash-grid{display:grid;gap:var(--s4)}
.dcol{display:contents}
.d1{order:1}.d2{order:2}.d3{order:3}.d4{order:4}.d5{order:5}.d6{order:6}.d7{order:7}
@media (min-width:64rem){
  .dash-grid{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:start}
  .dcol{display:grid;gap:var(--s4);align-content:start;min-width:0}
}
.chart{position:relative;padding-left:2.75rem}
.chart-grid{position:absolute;inset:0 0 1.5rem 0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;color:var(--muted);font-size:.75rem;font-weight:500;font-variant-numeric:tabular-nums}
.chart-grid span{display:grid;grid-template-columns:2.25rem 1fr;align-items:center;height:0}
.chart-grid span::before{content:"";grid-column:2;border-top:1px dashed var(--line)}
.bars{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:.5rem;height:13rem;position:relative}
.bars li{flex:1;min-width:0;display:grid;grid-template-rows:1fr 1.5rem;justify-items:center;height:100%}
.bar{align-self:end;width:min(100%,2.75rem);height:calc(var(--h) * 1%);min-height:3px;border-radius:var(--r-pill) var(--r-pill) 4px 4px;background:var(--shell-3);transition:background .15s}
.bars li:hover .bar{background:var(--brand)}
.bars li.today .bar{background:var(--sun)}
.bar-label{align-self:end;text-align:center;color:var(--muted);font-size:.75rem;font-weight:500;white-space:nowrap;line-height:1.5rem}
.bars.dense{gap:3px}
.bars.dense .bar{width:100%;border-radius:var(--r-pill) var(--r-pill) 2px 2px}
.bars.dense .bar-label{font-size:.6875rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bar{background:var(--brand-mid)}}
:root[data-theme="dark"] .bar{background:var(--brand-mid)}
.attn{list-style:none;margin:0;padding:0}
.attn li+li{border-top:1px solid var(--line)}
.attn a{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;color:inherit;text-decoration:none;font-weight:600;min-height:3.5rem}
.attn a:hover .grow{text-decoration:underline}
.attn small{display:block;color:var(--muted);font-weight:400;font-size:.8125rem}
.attn-n{flex:none;min-width:2.5rem;height:2.5rem;padding:0 .5rem;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--sunken);color:var(--muted);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.attn-n.hot{background:var(--alert-tint);color:var(--alert)}
.attn-n.warn{background:var(--warn-tint);color:var(--warn)}
.seg-bar{display:flex;gap:3px;height:.875rem;border-radius:var(--r-pill);overflow:hidden;margin-bottom:var(--s4)}
.seg-bar span{min-width:.5rem}
/* status ramp: amber while waiting, then water that deepens as the order progresses */
.s-pending{background:var(--amber)}
.s-confirmed{background:var(--brand-mid)}
.s-shipped{background:var(--brand)}
.s-delivered{background:var(--shell-3)}
.s-cancelled{background:var(--alert)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .s-delivered{background:var(--mint)}:root:not([data-theme="light"]) .s-confirmed{background:var(--brand-mid)}:root:not([data-theme="light"]) .s-shipped{background:#3fb3a6}}
:root[data-theme="dark"] .s-delivered{background:var(--mint)}:root[data-theme="dark"] .s-confirmed{background:var(--brand-mid)}:root[data-theme="dark"] .s-shipped{background:#3fb3a6}
.legend,.lowlist{list-style:none;margin:0;padding:0}
.legend a,.lowlist a{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);color:inherit;text-decoration:none;font-weight:500}
.legend li+li,.lowlist li+li{border-top:1px solid var(--line)}
.legend strong{font-variant-numeric:tabular-nums;font-weight:600}
.dotc{flex:none;width:.75rem;height:.75rem;border-radius:50%}
.ranked{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.ranked li{display:flex;gap:var(--s3);align-items:flex-start}
.rank{flex:none;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:var(--sunken);font-family:var(--font-display);font-size:1.0625rem;font-variant-numeric:lining-nums}
.rname{font-weight:600;overflow-wrap:anywhere}
.meter{height:.5rem;border-radius:var(--r-pill);background:var(--sunken);overflow:hidden;margin:.5rem 0 .3rem}
.meter span{display:block;height:100%;border-radius:var(--r-pill);background:var(--shell-3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .meter span{background:var(--mint)}}
:root[data-theme="dark"] .meter span{background:var(--mint)}
.ranked.compact li{display:block}
@media (min-width:36rem){.toolbar{grid-template-columns:auto 1fr;align-items:center}.toolbar .chips{margin:0;padding:2px 0 var(--s1)}.toolbar{min-width:0}.toolbar>*{min-width:0}}
@media (max-width:35.99rem){.chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 1.75rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 1.75rem),transparent)}}
@media (min-width:48rem){
  .olist{display:none}
  .table-panel{display:block;padding:var(--s3) var(--s4)}
  .toolbar{grid-template-columns:1fr minmax(14rem,22rem)}
}

/* Needs attention: first thing on the dashboard */
.attn-band{margin-bottom:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5) var(--s2)}
.attn-band h2{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s1);font-size:1.5rem}
.attn-band h2::before{content:"";width:.625rem;height:.625rem;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px color-mix(in srgb,var(--sun) 28%,transparent)}
.attn-band p{margin:0;padding:var(--s2) 0 var(--s3)}
@media (min-width:36rem){
  .attn-band .attn{display:grid;grid-template-columns:repeat(3,1fr)}
  .attn-band .attn li+li{border-top:0;border-left:1px solid var(--line);padding-left:var(--s4)}
}

/* ---------- auth, shops, settings ---------- */
.auth{max-width:26rem;margin:0 auto}
.auth h1{margin-bottom:var(--s2)}
.auth .lead{color:var(--muted);margin-bottom:var(--s5);font-size:1.0625rem}
.auth h2{margin:var(--s5) 0 var(--s2)}
.auth-page .auth-alt{margin-top:var(--s5)}
.auth-alt a,.link-row a{display:inline-block;padding:.65rem .25rem}
.link-row{margin-top:var(--s4)}
.steps{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s5);font-size:.875rem;font-weight:600;color:var(--muted)}
.steps .bar{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.steps .bar i{display:block;height:100%;background:var(--sun);border-radius:4px}
.type-options{display:grid;gap:var(--s2)}
.auth-art{display:none}

/* the ticket: a sample sale, set like a boarding pass. Used on the landing page and sign-in art. */
.slip{--surface:#fbfdfc;--ink:#0a2226;--muted:#4a6366;--line-strong:#b6c6c3;position:relative;background:var(--surface);color:var(--ink);border-radius:var(--r-lg);padding:var(--s5) var(--s5) var(--s4);font-size:.9375rem;box-shadow:var(--lift-dark);
  -webkit-mask:radial-gradient(circle .6rem at 0 4.2rem,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle .6rem at 100% 4.2rem,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle .6rem at 0 4.2rem,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle .6rem at 100% 4.2rem,#0000 98%,#000) right/51% 100% no-repeat}
.slip-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:2px dotted var(--line-strong);color:var(--muted);font-size:.8125rem;font-weight:500}
.slip-head b{color:var(--ink);font-family:var(--font-display);font-weight:400;font-size:1.625rem;line-height:1}
.slip ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.slip li{display:flex;align-items:baseline;gap:var(--s2)}
.slip li i{flex:1;border-bottom:1px dotted var(--line-strong);transform:translateY(-.25em)}
.slip li .money{font-weight:500}
.slip .total-line{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--ink);font-weight:600;font-size:1.0625rem}
.slip .total-line .money{font-weight:600;font-size:1.25rem}
.slip-stock{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-pill);background:var(--shell);color:var(--shell-ink);font-weight:500;font-size:.875rem}
.slip-stock b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--sun)}

.shop-grid{display:grid;gap:var(--s4)}
.shop-card{display:grid;gap:var(--s4);align-content:start}
.shop-card.current{border-color:var(--sun);box-shadow:0 0 0 1.5px var(--sun)}
.shop-add{display:grid;place-items:center;align-content:center;gap:var(--s2);text-align:center;min-height:11rem;padding:var(--s5) var(--s4);border-radius:var(--r-lg);border:1.5px dashed var(--field);color:var(--ink);text-decoration:none;transition:background .2s,border-color .2s}
.shop-add .art{margin:0 0 var(--s2)}
.shop-add:hover{background:var(--surface);border-color:var(--brand)}
.settings-grid{display:grid;gap:var(--s4)}
.settings-grid .cta{grid-template-columns:1fr}
@media (min-width:48rem){.shop-grid{grid-template-columns:1fr 1fr}.settings-grid .cta{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.settings-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}}
@media (min-width:88rem){.shop-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- public product page ---------- */
.pub{max-width:32rem;margin:0 auto}
.pub-photo{aspect-ratio:1/1;border-radius:var(--r-lg);object-fit:cover;width:100%;background:var(--brand-tint)}
.pub-photo.empty{display:grid;place-items:center;font-family:var(--font-display);font-size:8rem;color:var(--brand-tint-ink)}
.pub-body{padding:var(--s5) 0 0}
.pub h1{margin-bottom:var(--s2);font-size:clamp(2.5rem,9vw,3.5rem)}
.pub .price{font-size:1.75rem;margin-bottom:var(--s4)}
.avail{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;padding:.4rem .9rem;border-radius:var(--r-pill);background:var(--brand-tint);color:var(--brand-tint-ink)}
.avail.out{background:var(--alert-tint);color:var(--alert)}
.sizes{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0}
.size{min-width:3.25rem;min-height:2.75rem;padding:0 var(--s4);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);font-weight:600;background:var(--surface)}
.size.off{color:var(--muted);text-decoration:line-through;background:transparent;border-style:dashed}
.pub .desc{margin:var(--s5) 0;color:var(--ink)}
.pub-cta{display:grid;gap:var(--s3);margin-top:var(--s5)}
.powered{text-align:center;margin-top:var(--s6);color:var(--muted);font-size:.875rem}

/* ---------- account and shop menu ---------- */
.menu{border:0;padding:var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));background:var(--surface);color:var(--ink);width:100%;max-width:30rem;margin:auto auto 0;inset-inline:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;box-shadow:var(--lift);max-height:88dvh;overflow:auto;overscroll-behavior:contain}
.menu::backdrop{background:rgb(2 14 17 / .6)}
.menu-grab{width:2.5rem;height:4px;border-radius:4px;background:var(--line-strong);margin:var(--s2) auto var(--s3)}
.menu-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0 var(--s3)}
.menu-head b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.625rem;letter-spacing:-.005em;line-height:1.1}
.menu-head small{color:var(--muted)}
.menu-cap{margin:var(--s3) 0 var(--s1);color:var(--muted);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.menu hr{border:0;border-top:1px solid var(--line);margin:var(--s2) 0}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list form{margin:0}
.menu-item{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:3.25rem;padding:0 var(--s3);border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
.menu-item:active{background:var(--brand-tint)}
.menu-item.on{background:var(--sunken)}
.menu-item.danger{color:var(--alert)}
.menu-item .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover){.menu-item:hover{background:var(--sunken)}}

/* ---------- tablets ---------- */
@media (min-width:48rem){
  body.wide{--col:56rem}
  :root{--gut:max(var(--s5),env(safe-area-inset-left))}
  .plist{grid-template-columns:1fr 1fr;align-items:start}
  .pub{max-width:56rem;display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
  .pub-body{padding-top:0}
  .pub .powered{grid-column:1/-1;margin-top:0}
  .actionbar-in{max-width:calc(var(--col) - var(--s6))}
}

/* ---------- desktops: sidebar shell ---------- */
@media (min-width:64rem){
  body.app{--side:16.5rem;padding-left:var(--side)}
  body.wide{--col:68rem}
  :root{--gut:var(--s6)}
  .topbar.shopbar{display:none}
  .masthead{padding-top:var(--s6)}
  .tabbar{inset:0 auto 0 0;width:var(--side);padding:var(--s5) var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s3);overflow:auto;background:var(--shell);pointer-events:auto}
  .side-brand{min-height:var(--tap);display:inline-flex;align-items:center;gap:.6rem;padding:var(--s1) var(--s3);font-family:var(--font-display);font-size:1.875rem;letter-spacing:-.01em;color:var(--shell-ink);text-decoration:none;line-height:1}
  .side-brand .brand-mark{width:2.125rem;height:2.125rem}
  .tabbar-in{display:flex;flex-direction:column;align-items:stretch;gap:2px;height:auto;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;pointer-events:auto}
  .nav-cap{display:block;padding:var(--s5) var(--s3) var(--s2);color:var(--shell-muted);font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
  .tab{flex-direction:row;justify-content:flex-start;gap:var(--s3);min-height:var(--tap);padding:0 var(--s3);border-radius:var(--r-pill);font-size:.9375rem;font-weight:500}
  .tab .i{padding:0;width:1.25rem;height:1.25rem;background:none!important}
  .tab[aria-current="page"]{background:var(--shell-2);color:var(--shell-ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--shell-line)}
  .tab[aria-current="page"] .i{color:var(--mint)}
  .tab:not([aria-current="page"]):hover{background:rgb(234 244 242 / .06);color:var(--shell-ink)}
  .tab-add{order:-1;justify-content:center;background:var(--sun);color:var(--sun-ink);margin:var(--s2) 0 var(--s1);min-height:3.25rem;font-size:1rem;font-weight:600;box-shadow:0 10px 24px -12px rgb(255 125 58 / .8)}
  .tab-add:not([aria-current="page"]):hover{background:var(--sun-press);color:var(--sun-ink)}
  .tab-add[aria-current="page"]{background:var(--sun);color:var(--sun-ink);box-shadow:none}
  .tab-add .fab{width:auto;height:auto;margin:0;background:none;box-shadow:none;border-radius:0;color:inherit}
  .tab-add .fab .i{width:1.25rem;height:1.25rem}
  .tab-add .lbl,.tab-add[aria-current="page"] .lbl{color:inherit;margin:0}
  .tab-add[aria-current="page"] .fab .i{color:inherit}
  .tab-more{display:none}
  .tab-settings,.tab-customers,.tab-team{display:flex}
  .side-foot{display:block;margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--shell-line)}
  .side-user{display:flex;align-items:center;gap:var(--s3);padding:.5rem;border-radius:var(--r);color:var(--shell-ink);text-decoration:none}
  .side-user:hover{background:rgb(234 244 242 / .07)}
  .side-user .avatar{background:var(--shell-3)}
  .side-user-t{display:grid;flex:1;min-width:0;line-height:1.2}
  .side-user-t b{font-weight:600;font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side-user-t small{color:var(--shell-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side-user .i{color:var(--shell-muted)}
  .topbar-in{max-width:none;padding-inline:var(--s6)}
  main{padding-top:var(--s6);padding-bottom:var(--s7)}
  .masthead+main{padding-top:var(--s5)}
  main.has-actionbar{padding-bottom:8rem}
  .btn.top-new{display:inline-flex}
  .menu{margin:0;inset:auto auto auto calc(var(--side) + var(--s6));top:4rem;width:22rem;border-radius:var(--r-lg);padding-top:var(--s4)}
  .menu-grab{display:none}
  .menu[data-from="side"]{inset:auto auto var(--s4) calc(var(--side) + var(--s2));top:auto;width:21rem}
  .detail-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .detail-grid>.stackcol{display:grid}
  .form-split{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}
  .form-split>.section:first-child{position:sticky;top:5rem}
  .photo{min-height:20rem}
  .plist{grid-template-columns:repeat(2,1fr)}
  .actionbar-in{max-width:calc(var(--col) - 2 * var(--s6))}
}
@media (min-width:80rem){
  #pos{display:grid;grid-template-columns:minmax(0,1fr) 26rem;gap:var(--s6);align-items:start}
  #pos>.form-error{grid-column:1/-1}
  #pos [data-view="pick"]{grid-column:1}
  #pos [data-view="details"]{grid-column:2;grid-row:1;position:sticky;top:2rem;max-height:calc(100dvh - 11rem);overflow:auto;padding:2px;margin:-2px}
  #pos[data-stage] [data-view]{display:block!important}
  #pos[data-stage] [data-when="pick"],#pos [data-go="pick"]{display:none!important}
  #pos[data-stage] [data-when="details"]{display:inline-flex!important}
  .pos-page .actionbar-in{margin-inline:0;max-width:none}
  .pos-page .actionbar .btn{flex:0 1 20rem;margin-left:auto}
}
@media (min-width:88rem){body.wide{--col:76rem}.plist{grid-template-columns:repeat(3,1fr)}}

/* small phones */
@media (max-width:24rem){
  .pstats{grid-template-columns:1fr 1fr}
  .pstats>div:last-child{grid-column:1/-1}
  .pcard-top{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s3)}
  .pcard-top .badge{grid-column:1/-1;justify-self:start}
  .tile-foot{flex-direction:column;align-items:flex-start;gap:0}
  .actionbar .total .money{font-size:1.125rem}
  .tabs a{padding:0 var(--s3)}
}

/* Pager under long lists: Newer / range / Older */
.pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s4)}
.pager>:first-child,.pager>:last-child{min-width:5.5rem}
.pager>:last-child{text-align:right}

/* Customer history rows and in-text links */
.plain-link{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat}
.plain-link:hover{color:var(--brand)}
.hist{list-style:none;margin:0;padding:0}
.hist li+li{border-top:1px solid var(--line)}
.hist a{display:grid;gap:var(--s2);padding:var(--s3) 0;min-height:var(--tap);color:inherit;text-decoration:none}
.hist a:hover .onum{text-decoration:underline}
.h-top{display:flex;align-items:baseline;gap:var(--s3)}
.h-top .money{margin-left:auto;font-weight:600}
.h-top .small{white-space:nowrap}
.h-meta{display:flex;gap:var(--s2);flex-wrap:wrap}

/* Confirm dialog for destructive actions */
.confirm{border:0;padding:var(--s5);background:var(--surface);color:var(--ink);width:min(26rem,calc(100% - 2 * var(--s4)));border-radius:var(--r-sheet);box-shadow:var(--lift);margin:auto}
.confirm::backdrop{background:rgb(2 14 17 / .6)}
.confirm h2{margin:0 0 var(--s2);font-size:1.75rem}
.confirm p{margin:0 0 var(--s5)}
.confirm-actions{display:flex;gap:var(--s3);justify-content:flex-end;flex-wrap:wrap}
.confirm-actions .btn{flex:1 1 7rem;white-space:nowrap}
.danger-zone{margin-top:var(--s5)}
.danger-zone h2{font-size:1.375rem}
.danger-zone p{margin:var(--s2) 0 var(--s4)}

/* ---------- landing ---------- */
main.land{max-width:none;padding:0;border-radius:0;margin:0;background:var(--paper)}
.wrap{max-width:72rem;margin:0 auto;padding:0 var(--s4)}
@media (min-width:48rem){.wrap{padding:0 var(--s5)}}
.land-top{position:absolute;inset:0 0 auto 0;z-index:10;color:var(--shell-ink)}
.land-top-in{display:flex;align-items:center;justify-content:space-between;min-height:4.5rem}
.land-top-actions{display:flex;gap:var(--s2);align-items:center}
@media (max-width:30rem){.hide-sm{display:none}}
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--shell);color:var(--shell-ink);padding:7rem 0 4.5rem;border-radius:0 0 var(--r-sheet) var(--r-sheet)}
.hero .atoll{right:-35%;top:-15%;width:min(60rem,200%)}
@media (min-width:56rem){.hero .atoll{right:-10%;top:-30%;width:62rem}}
.hero-in{position:relative;z-index:1;display:grid;gap:var(--s7)}
.kicker{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 var(--s5);color:var(--mint);font-weight:600;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}
.kicker::before{content:"";width:2rem;height:1px;background:currentColor}
.hero-copy h1{font-size:clamp(3.25rem,13vw,6.5rem);line-height:.92;letter-spacing:-.025em;margin-bottom:var(--s5);color:var(--shell-ink)}
.hero-copy h1 em{color:var(--mint);display:block}
.hero-copy .lead{font-size:1.1875rem;line-height:1.55;color:var(--shell-muted);max-width:32rem;margin-bottom:var(--s5)}
.hero-copy .cta{margin-bottom:var(--s5)}
.assure{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);color:var(--shell-muted);font-weight:500;font-size:.9375rem}
.assure li{display:inline-flex;align-items:center;gap:.4rem}
.assure .i{color:var(--mint)}
.hero-slip{margin:0;max-width:24rem;transform:rotate(-2.5deg);transform-origin:50% 100%}
@media (min-width:56rem){
  .hero{padding:10rem 0 6rem}
  .hero-in{grid-template-columns:1.2fr .8fr;align-items:center;gap:var(--s7)}
  .hero-slip{justify-self:end;width:100%}
}
.band{padding:var(--s8) 0 var(--s7)}
.band.alt{background:var(--surface);margin-block:var(--s7);border-block:1px solid var(--line);padding:var(--s7) 0}
@media (min-width:48rem){.band{padding:6rem 0 5rem}.band.alt{padding:5rem 0}}
.band-head{max-width:40rem;margin-bottom:var(--s6)}
.band-head h2{font-size:clamp(2.25rem,6.5vw,3.75rem);line-height:1;letter-spacing:-.02em;margin-bottom:var(--s3)}
.band-head p{color:var(--muted);font-size:1.0625rem;margin:0}

.story{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.story>li{display:grid;gap:var(--s4);padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.step-no{font-family:var(--font-display);font-style:italic;font-size:4rem;line-height:.8;color:var(--brand);font-variant-numeric:lining-nums}
.story h3{font-family:var(--font-display);font-weight:400;font-size:1.75rem;letter-spacing:-.005em;margin-bottom:var(--s2)}
.story p{color:var(--muted);margin:0;max-width:26rem}
.viz{background:var(--paper);border-radius:var(--r);padding:var(--s4);display:grid;gap:var(--s3);align-content:start}
.viz-title{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);font-weight:600}
.viz .sizes{margin:0}
.viz-line{display:flex;justify-content:space-between;gap:var(--s3);font-weight:500}
.viz-line.muted{color:var(--muted);font-weight:400}
.viz-pay{display:flex;flex-wrap:wrap;gap:var(--s2)}
.pill{padding:.4rem .85rem;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-strong);background:var(--surface);font-weight:600;font-size:.8125rem}
.pill.on{background:var(--shell);box-shadow:none;color:var(--shell-ink)}
.viz-alert{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--alert-tint);color:var(--alert);font-weight:600;font-size:.9375rem}
.viz-alert .i{margin-top:2px}
@media (min-width:56rem){
  .story{grid-template-columns:repeat(3,1fr)}
  .story>li{grid-template-rows:auto 1fr auto;align-content:start}
}

.feats{margin:0;display:grid;gap:0}
.feats>div{display:grid;gap:var(--s1);padding:var(--s5) 0;border-top:1px solid var(--line-strong)}
.feats dt{font-family:var(--font-display);font-size:1.75rem;line-height:1.1;letter-spacing:-.005em}
.feats dd{margin:0;color:var(--muted);max-width:34rem}
@media (min-width:48rem){.feats{grid-template-columns:1fr 1fr;column-gap:var(--s7)}.feats>div{padding:var(--s5) 0 var(--s6)}}

.faq-wrap{max-width:48rem}
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;min-height:4.25rem;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);font-family:var(--font-display);font-size:1.5rem;line-height:1.15}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{transition:transform .25s var(--ease);color:var(--muted)}
.faq details[open] summary .i{transform:rotate(180deg)}
.faq details p{color:var(--muted);margin:0 0 var(--s5);max-width:38rem}
.closer{position:relative;overflow:hidden;isolation:isolate;background:var(--shell);color:var(--shell-ink);margin:var(--s7) var(--s3) var(--s3);padding:var(--s8) 0;border-radius:var(--r-sheet)}
.closer .atoll{right:-30%;top:-40%;width:48rem;opacity:.6}
.closer .wrap{position:relative;z-index:1}
.closer h2{font-size:clamp(2.5rem,8vw,4.5rem);line-height:.96;letter-spacing:-.02em;margin-bottom:var(--s3);color:var(--shell-ink)}
.closer p{font-size:1.125rem;max-width:30rem;color:var(--shell-muted)}
.closer .cta{margin:var(--s5) 0 0}
.land-foot{padding:var(--s5) 0 var(--s6)}
.land-foot .brand{color:var(--ink)}
.land-foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}

/* ---------- sign-in art ---------- */
@media (min-width:56rem){
  main.auth-page{--col:72rem;padding-top:var(--s5)}
  .auth-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s7);align-items:stretch;min-height:calc(100dvh - 8.5rem)}
  .auth-split .auth{align-self:center;width:100%;margin:0}
  .auth-art{display:block;position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-sheet);background:var(--shell);color:var(--shell-ink)}
  .auth-art .atoll{right:-30%;top:-20%;width:46rem;opacity:.5}
  .auth-art-in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6);height:100%;padding:var(--s6)}
  .auth-art .brand-mark{width:2.75rem;height:2.75rem}
  .auth-art h2{font-size:clamp(2.5rem,4vw,3.75rem);line-height:.96;letter-spacing:-.02em;max-width:24rem;color:var(--shell-ink)}
  .auth-art h2 em{color:var(--mint);display:block}
  .auth-art .slip{max-width:21rem;width:100%;align-self:center;transform:rotate(-2deg)}
}

/* ---------- loading and busy states ---------- */
.btn{--spin:var(--sun-ink)}
.btn.soft,.btn.ghost,.btn.danger,.stepper button,.qty button{--spin:var(--ink)}
.btn.danger{--spin:var(--alert)}
.masthead .btn.soft,.masthead .btn.ghost,.actionbar .btn.ghost,.actionbar .btn.soft,.actionbar .btn[disabled]{--spin:var(--shell-ink)}
.is-loading,.htmx-request.btn,button.htmx-request,form.htmx-request button[type=submit]{position:relative;pointer-events:none;color:transparent!important}
.is-loading::after,button.htmx-request::after,form.htmx-request button[type=submit]::after{content:"";position:absolute;inset:0;margin:auto;width:1.15rem;height:1.15rem;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--spin,#000) 30%,transparent);border-top-color:var(--spin,#000);animation:spin .7s linear infinite}
.is-loading .i,.htmx-request .i{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}
.search.htmx-request::after{content:"";position:absolute;right:var(--s4);top:50%;width:1rem;height:1rem;margin-top:-.5rem;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink);animation:spin .7s linear infinite}
html.navigating::before{content:"";position:fixed;z-index:100;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--mint),var(--sun));transform-origin:left;animation:nav-bar 10s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes nav-bar{from{transform:scaleX(.02)}to{transform:scaleX(.92)}}

/* ---------- motion: feedback and orientation only ---------- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes sheet-in{from{opacity:.6;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes drop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes toast-in{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes drift{from{transform:rotate(-6deg) scale(.94);opacity:0}to{transform:none;opacity:1}}
@keyframes ring{from{stroke-dashoffset:var(--len,1200)}to{stroke-dashoffset:0}}
@keyframes dock-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .16s ease both}
  ::view-transition-new(root){animation:vt-in .34s var(--ease) both}
  .topbar{view-transition-name:topbar}
  .tabbar{view-transition-name:tabbar}
  .actionbar{view-transition-name:actionbar}

  /* water first, then the sheet rises over it. app.js removes html.enter shortly after, so HTMX swaps do not replay it. */
  html.enter .masthead-in>*,html.enter .masthead-in .page-head>*{animation:rise .7s var(--ease) backwards}
  html.enter .masthead-in>:nth-child(2),html.enter .page-head>:nth-child(2){animation-delay:.08s}
  html.enter .masthead-in>:nth-child(3){animation-delay:.16s}
  html.enter .hero-fig{animation:rise .8s var(--ease) .14s backwards}
  html.enter .atoll{animation:drift 1.8s var(--ease) backwards}
  html.enter .atoll .ring{stroke-dasharray:var(--len,1200);animation:ring 2.2s var(--ease) backwards}
  html.enter .atoll .ring:nth-child(2){animation-delay:.12s}
  html.enter .atoll .ring:nth-child(3){animation-delay:.24s}
  html.enter .atoll .ring:nth-child(4){animation-delay:.36s}
  html.enter .tabbar-in{animation:dock-in .6s var(--ease) .25s backwards}
  html.enter main:not(.land)>:not(.msgs):not(form):not(.actionbar):not(.dash-grid):not(.kpis):not(.plist):not(.olist):not(.shop-grid):not(.form-split):not(.detail-grid):not(.settings-grid):not(.stackcol):not(#orders-results),
  html.enter #orders-results>:not(.kpis):not(.olist),
  html.enter :is(.dash-grid,.kpis,.plist,.olist,.shop-grid,.form-split,.detail-grid,.settings-grid)>:not(.stackcol):not(.dcol),
  html.enter .stackcol>*,html.enter .dcol>*{animation:rise .6s var(--ease) backwards}
  html.enter main:not(.land)>form{animation:fade-in .5s ease backwards}
  html.enter main>:nth-child(2),html.enter :is(.dash-grid,.kpis,.plist,.olist,.shop-grid,.stackcol,.dcol)>:nth-child(1){animation-delay:.1s}
  html.enter main>:nth-child(3),html.enter :is(.dash-grid,.kpis,.plist,.olist,.shop-grid,.stackcol,.dcol)>:nth-child(2){animation-delay:.16s}
  html.enter main>:nth-child(4),html.enter :is(.dash-grid,.kpis,.plist,.olist,.shop-grid,.stackcol,.dcol)>:nth-child(3){animation-delay:.22s}
  html.enter main>:nth-child(n+5),html.enter :is(.dash-grid,.plist,.olist,.shop-grid,.stackcol,.dcol)>:nth-child(n+4){animation-delay:.28s}
  html.enter .hero-copy>*,html.enter .hero-slip,html.enter .auth-art-in>*{animation:rise .8s var(--ease) backwards}
  html.enter .hero-copy>:nth-child(2){animation-delay:.08s}
  html.enter .hero-copy>:nth-child(3){animation-delay:.16s}
  html.enter .hero-copy>:nth-child(n+4){animation-delay:.24s}
  html.enter .hero-slip{animation-delay:.3s}
  .pcard.flash{animation:flash .9s ease-out}
  .pcard.flash .qty input{animation:pop .4s var(--ease)}
  .bar{transform-origin:bottom;animation:grow-y .8s var(--ease) both;animation-delay:.3s}
  .meter span{transform-origin:left;animation:grow-x .9s var(--ease) .3s both}
  .menu[open]{animation:sheet-in .35s var(--ease)}
  .menu[open]::backdrop{animation:fade-in .2s both}
  .msg{animation:toast-in .45s var(--ease-spring) both}
  details[open]>.inner,.faq details[open] p{animation:reveal .25s var(--ease)}
  @media (min-width:64rem){.menu[open]{animation:drop-in .2s var(--ease)}}
  .tile-n.bump{animation:pop .3s var(--ease)}
  .cartline{animation:reveal .25s var(--ease)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .is-loading::after,button.htmx-request::after,form.htmx-request button[type=submit]::after{animation:none!important;border-color:var(--spin,#000)}
}

/* Product options (sizes, colours) */
.vprice{margin-left:.25rem;font-weight:600;color:var(--ink);font-size:.875rem}
.optrow{padding:var(--s4) 0;border-top:1px solid var(--line)}
.optrow:first-of-type{border-top:0;padding-top:0}
.optfields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.optrow .rm{margin-top:var(--s2)}
.optlist{list-style:none;margin:0 0 var(--s4);padding:0}
.optlist li{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line)}
.optlist li:first-child{border-top:0}
@media (max-width:30rem){.optfields{grid-template-columns:1fr}}

/* ---------- PWA: install entry and offline page ---------- */
.install-text{margin:0 0 var(--s3);color:var(--muted)}
.install-steps{margin:var(--s3) 0 0;color:var(--ink)}
.menu-steps{margin:0;padding:var(--s2) var(--s3) var(--s3);color:var(--muted);font-size:.9375rem}
.menu-list > li[hidden],.panel[hidden]{display:none}
main.offline{padding-top:var(--s7);padding-bottom:var(--s7);min-height:100dvh}
main.offline h1{margin:0 0 var(--s3)}
main.offline p{margin:0 0 var(--s3)}

/* ---------- receipts: the customer's page and the seller's share screen ---------- */
.btn[hidden]{display:none}
.rc-page{max-width:26rem;margin:0 auto;display:grid;gap:var(--s5)}
.receipt{font-variant-numeric:tabular-nums;--alert:#b42318;--alert-tint:#fde4e0;--warn:#734400;--warn-tint:#fbeac2}  /* the paper stays light in dark mode, so its badges do too */
.rc-shop{text-align:center;padding-bottom:var(--s3)}
.rc-eyebrow{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.receipt h2{margin:var(--s1) 0 0;font-size:1.75rem;line-height:1.1;overflow-wrap:anywhere}
.rc-sub{margin:var(--s1) 0 0;color:var(--muted);font-size:.875rem}
.rc-for{margin:0 0 var(--s3)}
.rc-void{margin:0 0 var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-xs);background:var(--alert-tint);color:var(--alert);font-weight:600}
.receipt li>span:first-child{overflow-wrap:anywhere;min-width:0}
.receipt .rc-sums{margin-top:var(--s3)}
.receipt .rc-muted{color:var(--muted)}
.receipt .rc-total{display:flex;justify-content:space-between;gap:var(--s3);margin-bottom:0}
.rc-pay{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-top:var(--s3);color:var(--muted)}
.rc-thanks{margin:var(--s5) 0 0;text-align:center;color:var(--muted);font-size:.875rem}
.rc-share{display:grid;gap:var(--s3)}
.rc-share h2{margin:0}
.rc-share p{margin:0}
.rc-buttons{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.rc-buttons .btn{padding:0 var(--s3)}
.rc-actions{display:grid;gap:var(--s3)}
.rc-share form{margin-top:var(--s2)}

@media print{
  @page{margin:12mm}
  html,body{background:#fff!important;color:#000}
  .topbar,.tabbar,.skip,.msgs,.no-print,.actionbar,dialog,.masthead{display:none!important}
  main{padding:0!important;margin:0!important;max-width:none!important;background:none!important;border-radius:0!important;min-height:0!important}
  .rc-page{max-width:120mm;margin:0 auto}
  .slip{box-shadow:none;-webkit-mask:none;mask:none;border:1px solid #999;border-radius:0;break-inside:avoid;padding:var(--s5)}
  html.enter *{animation:none!important}
}

.form-single>*+.section,.form-single>*+details{margin-top:var(--s4)}

/* ---------- team (staff and roles) ---------- */
.team-list{list-style:none;margin:0 0 var(--s3);padding:0;display:grid}
.team-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--line)}
.team-row:first-child{border-top:0;padding-top:0}
.team-who{display:flex;align-items:center;gap:var(--s3);min-width:0;flex:1 1 100%}
.team-who .grow{min-width:0;overflow-wrap:anywhere}
.team-role{display:flex;gap:var(--s2);align-items:center;flex:1 1 13rem}
.team-role select{flex:1;min-width:0}
.team-actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.btn.danger-text{color:var(--alert)}
.btn.danger-text[disabled]{color:var(--muted)}
.creds{margin-bottom:var(--s4);border-color:var(--brand);box-shadow:inset 5px 0 0 var(--brand)}
.creds-box{display:grid;gap:var(--s3);margin:var(--s4) 0;padding:var(--s4);background:var(--sunken);border-radius:var(--r)}
.creds-box dt{font-size:.8125rem;color:var(--muted)}
.creds-box dd{margin:0;font-size:1.375rem;font-weight:600;letter-spacing:.02em;overflow-wrap:anywhere;user-select:all}
.role-guide{margin:0;display:grid;gap:var(--s3)}
.role-guide dt{font-weight:600}
.role-guide dd{margin:0;color:var(--muted)}

/* ---------- command search (Ctrl/Cmd+K, or the search icon) ---------- */
.top-search{background:rgb(234 244 242 / .12);border-color:transparent;color:var(--shell-ink)}
.side-search{display:none}
.cmdk{border:0;padding:0;background:var(--surface);color:var(--ink);width:100%;max-width:100%;margin:0;inset:0 0 auto 0;border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--lift);max-height:min(36rem,88dvh);overflow:hidden;flex-direction:column;padding-top:env(safe-area-inset-top)}
.cmdk[open]{display:flex}
.cmdk::backdrop{background:rgb(2 14 17 / .6)}
.cmdk-in{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s3) var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.cmdk-in>.i{flex:none;color:var(--muted)}
.cmdk-in input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1rem;min-height:var(--tap);padding:0;box-shadow:none;outline:none;color:var(--ink);-webkit-appearance:none;appearance:none}
.cmdk-in input::-webkit-search-cancel-button{display:none}
.cmdk-in .icon-btn{border-color:transparent;background:transparent}
.cmdk-list{overflow:auto;overscroll-behavior:contain;padding:var(--s2) var(--s2) var(--s3)}
.cmdk-cap{margin:var(--s3) var(--s3) var(--s1);color:var(--muted);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.cmdk-item{display:flex;align-items:center;gap:var(--s3);min-height:3.25rem;padding:var(--s2) var(--s3);border-radius:var(--r-sm);color:var(--ink);text-decoration:none}
.cmdk-item>.i{flex:none;color:var(--muted)}
.cmdk-item .cmdk-t{flex:1;min-width:0;display:grid;line-height:1.25}
.cmdk-item b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-item small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-item[aria-selected="true"]{background:var(--brand-tint);color:var(--brand-tint-ink)}
.cmdk-item[aria-selected="true"] small,.cmdk-item[aria-selected="true"]>.i{color:inherit}
.cmdk-none{margin:0;padding:var(--s5) var(--s4);color:var(--muted);text-align:center}
.cmdk-hint{display:none;margin:0;padding:var(--s2) var(--s4);border-top:1px solid var(--line);color:var(--muted);font-size:.8125rem;gap:var(--s4)}
kbd{font:inherit;font-size:.75rem;font-weight:600;padding:.05rem .4rem;border-radius:6px;border:1px solid var(--line-strong);background:var(--sunken);color:var(--muted)}
@media (min-width:48rem){
  .cmdk{inset:12vh auto auto 50%;transform:translateX(-50%);width:min(38rem,calc(100% - 2 * var(--s5)));border-radius:var(--r-lg);padding-top:0}
  .cmdk-hint{display:flex}
}
@media (min-width:64rem){
  .side-search{display:flex;align-items:center;gap:var(--s3);min-height:var(--tap);margin-top:var(--s3);padding:0 var(--s3);border-radius:var(--r-pill);background:rgb(234 244 242 / .08);color:var(--shell-muted);text-decoration:none;font-size:.9375rem}
  .side-search span{flex:1}
  .side-search kbd{background:transparent;border-color:var(--shell-line);color:var(--shell-muted)}
  .side-search:hover{background:rgb(234 244 242 / .14);color:var(--shell-ink)}
}
@media (prefers-reduced-motion:no-preference){
  .cmdk[open]{animation:sheet-in .25s var(--ease)}
  .cmdk[open]::backdrop{animation:fade-in .2s both}
}
@media print{.cmdk{display:none!important}}

/* ---------- first-run guide and empty-state scenes ---------- */
.illus{display:block;width:min(13rem,70%);height:auto;margin:0 auto var(--s4);overflow:visible}
.il-sea{fill:var(--brand-tint)}
.il-sun{fill:var(--sun)}
.il-mint{fill:var(--mint);stroke:var(--brand);stroke-width:3}
.il-wave,.il-line{fill:none;stroke:var(--brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.il-card{fill:var(--surface);stroke:var(--brand);stroke-width:3;stroke-linejoin:round}
.il-tape{fill:var(--sun);stroke:var(--brand);stroke-width:3}
.empty-state .illus{margin-bottom:var(--s3)}
.guide{display:grid;gap:var(--s4);padding:var(--s5)}
.guide-first{text-align:center;padding:var(--s6) var(--s5)}
.guide-head h2{margin:0;font-size:1.75rem}
.guide-first .guide-head h2{font-size:2rem}
.guide-head p{margin:var(--s1) 0 0}
.guide-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);text-align:left}
.guide-steps li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r);background:var(--sunken)}
.guide-steps li.current{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--sun)}
.gs-n{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line-strong);font-variant-numeric:tabular-nums}
.guide-steps li.current .gs-n{background:var(--sun);color:var(--sun-ink);box-shadow:none}
.guide-steps li.done .gs-n{background:var(--mint);color:var(--shell);box-shadow:none}
.gs-t{display:grid;gap:2px;min-width:0}
.gs-t span{color:var(--muted);font-size:.9375rem}
.guide-steps li.done .gs-t b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.gs-wait{color:var(--muted);font-weight:600;font-size:.875rem;padding-right:var(--s2)}
@media (max-width:30rem){
  .guide-steps li{grid-template-columns:auto 1fr}
  .guide-steps li>.btn,.guide-steps li>.gs-wait{grid-column:1/-1}
}

/* ---------- swipe actions on touch lists (orders: swipe left to mark paid / unpaid) ---------- */
.swipe{position:relative;border-radius:var(--r);overflow:hidden;--w:6.5rem}
.swipe[data-swipe]{background:var(--brand-tint)}
.swipe[data-swipe][data-paid="1"]{background:var(--warn-tint)}
.swipe-act{position:absolute;inset:0 0 0 auto;width:var(--w);display:flex}
.swipe-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;border:0;background:none;color:var(--brand-tint-ink);font:inherit;font-size:.8125rem;font-weight:700;padding:0 var(--s2);cursor:pointer}
.swipe[data-paid="1"] .swipe-btn{color:var(--warn)}
.swipe[data-swipe] .ocard{position:relative;touch-action:pan-y;transform:translateX(var(--dx,0px));transition:transform .28s var(--ease);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.swipe.dragging .ocard{transition:none}
.swipe.open .ocard{transform:translateX(calc(var(--w) * -1))}
.swipe.busy .swipe-btn{opacity:.5;pointer-events:none}
.swipe.done .ocard{animation:swipe-done .5s var(--ease)}
@keyframes swipe-done{40%{box-shadow:0 0 0 3px var(--mint)}}
.msg-act{flex:none;border:0;background:rgb(234 244 242 / .14);color:var(--shell-ink);font:inherit;font-weight:700;min-height:2.25rem;padding:0 var(--s4);border-radius:var(--r-pill);cursor:pointer}
.msg-act:hover{background:rgb(234 244 242 / .24)}
@media (prefers-reduced-motion:reduce){.swipe[data-swipe] .ocard{transition:none}.swipe.done .ocard{animation:none}}

/* ---------- micro-interactions ---------- */
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
/* an item flies from its tile into the order total */
.fly{position:fixed;z-index:90;left:0;top:0;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;border-radius:50%;overflow:hidden;pointer-events:none;background:var(--brand-tint);color:var(--brand-tint-ink);display:grid;place-items:center;font-family:var(--font-display);font-size:1.5rem;box-shadow:0 0 0 3px var(--sun),0 8px 18px -6px rgb(4 25 29 / .6);will-change:transform}
.fly img{width:100%;height:100%;object-fit:cover;display:block}
.actionbar .total.bump .money{animation:pop .35s var(--ease)}
/* sale recorded: a big check draws itself over the order page, then goes */
.sale-ok{position:fixed;inset:0;z-index:80;display:grid;place-items:center;pointer-events:none;background:rgb(4 25 29 / .35);animation:sale-fade 1.5s ease both}
.sale-ok svg{width:7.5rem;height:7.5rem;filter:drop-shadow(0 12px 24px rgb(4 25 29 / .45))}
.sale-ok .disc{fill:var(--mint)}
.sale-ok .tick{fill:none;stroke:var(--shell);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:tick .45s .25s var(--ease) forwards}
.sale-ok .disc{transform-origin:center;animation:disc-in .4s var(--ease-spring) both}
@keyframes sale-fade{0%{opacity:0}12%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes tick{to{stroke-dashoffset:0}}
@keyframes disc-in{from{transform:scale(.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.sale-ok{display:none}.fly{display:none}}
/* skeletons: shimmering placeholders, shown only when something is slow */
.skel-list,.skel-rows{display:none;gap:var(--s2)}
.skel-list i,.skel-rows i{display:block;height:4.75rem;border-radius:var(--r);background:linear-gradient(100deg,var(--sunken) 30%,color-mix(in srgb,var(--sunken) 55%,var(--surface)) 50%,var(--sunken) 70%) 0 0/200% 100%;animation:shimmer 1.2s linear infinite}
.skel-rows{display:grid;padding:var(--s2);animation:fade-in .2s .25s backwards}
.skel-rows i{height:3.25rem;border-radius:var(--r-sm)}
.skel-rows i:nth-child(2){opacity:.8}.skel-rows i:nth-child(3){opacity:.6}
.is-pending{pointer-events:none}
.is-pending>.olist,.is-pending>.table-panel,.is-pending>.kpis{opacity:.45;transition:opacity .2s}
.is-pending.slow>.skel-list{display:grid}
.is-pending.slow>.olist,.is-pending.slow>.table-panel,.is-pending.slow>.empty-state,.is-pending.slow>.pager{display:none!important}
@keyframes shimmer{to{background-position:-200% 0}}
/* a slow page load dims what is on screen instead of leaving it looking frozen */
html.slow main>:not(.msgs){opacity:.5;transition:opacity .3s}
@media (prefers-reduced-motion:reduce){.skel-list i,.skel-rows i{animation:none}}

/* ---------- dashboard: sales sparkline and best-seller strip ---------- */
.hero-fig .spark{display:block;width:12rem;max-width:100%;height:auto;margin-top:var(--s3);overflow:visible}
.spark-area{fill:color-mix(in srgb,var(--mint) 18%,transparent);stroke:none}
.spark-line{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.strip{margin-bottom:var(--s5)}
.strip .panel-head{margin-bottom:var(--s3)}
.strip-list{list-style:none;margin:0 calc(var(--s4) * -1);padding:var(--s1) var(--s4) var(--s3);display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.strip-list::-webkit-scrollbar{display:none}
.strip-list li{flex:none;width:9.5rem;scroll-snap-align:start}
.strip-card{position:relative;display:flex;flex-direction:column;gap:var(--s2);height:100%;padding:var(--s2);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);text-decoration:none}
.strip-img{display:block;width:100%;aspect-ratio:1/1;border-radius:calc(var(--r) - 6px);object-fit:cover;background:var(--brand-tint)}
.strip-img.empty{display:grid;place-items:center;font-family:var(--font-display);font-size:2.5rem;color:var(--brand-tint-ink)}
.strip-rank{position:absolute;top:var(--s3);left:var(--s3);width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink);font-family:var(--font-display);font-size:1rem;box-shadow:0 2px 8px rgb(4 25 29 / .25)}
.strip-list li:first-child .strip-rank{background:var(--sun);color:var(--sun-ink)}
.strip-name{font-weight:600;line-height:1.2;padding:0 var(--s1);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.strip-meta{display:grid;padding:0 var(--s1) var(--s1);margin-top:auto}
.strip-meta .money{font-size:1rem}
.strip-meta small{color:var(--muted)}
@media (min-width:48rem){.strip-list{margin:0;padding-inline:0;flex-wrap:wrap;overflow:visible}.strip-list li{width:calc((100% - 4 * var(--s3)) / 5);min-width:8rem}}
@media (hover:hover){.strip-card:hover{border-color:var(--line-strong);background:color-mix(in srgb,var(--surface) 70%,var(--sunken))}}
@media (prefers-reduced-motion:no-preference){.spark-line{stroke-dasharray:1;stroke-dashoffset:1;animation:spark-draw 1.1s .35s var(--ease) forwards}.spark-area{animation:fade-in 1s .6s backwards}}
@keyframes spark-draw{to{stroke-dashoffset:0}}

/* ---------- Settings > On this device ---------- */
fieldset.field{border:0;padding:0;margin:0 0 var(--s4);min-width:0}
fieldset.field legend{font-weight:600;padding:0;margin-bottom:var(--s2)}
.prefs-switches{display:grid;gap:var(--s2)}
.prefs-switches .switch small{font-weight:400}
.switch input:disabled+.track{opacity:.45}
/* dark mode: product photos sit a touch lower so white-background shots do not glare */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.tile-img,.strip-img,.thumb,.pcard img){filter:brightness(.92)}}
:root[data-theme="dark"] :is(.tile-img,.strip-img,.thumb,.pcard img){filter:brightness(.92)}

/* Keyboard up on a phone: the dock and action bar step aside. */
@media (max-width:63.99rem) and (pointer:coarse){html.kb .tabbar,html.kb .actionbar{display:none}html.kb main.has-actionbar{padding-bottom:var(--s5)}}