/* generated from prototype/kv-portal.css by tools/build-web.mjs — edit the prototype, not this */
  :root{
    --ground:#F1F4F7; --surface:#FFFFFF; --surface-2:#F7F9FB;
    --ink:#11161B; --muted:#5B6672; --faint:#8794A1;
    --line:#DCE3EA; --line-soft:#E9EEF3;
    --accent:#C9184A; --accent-soft:#FDE9EF;
    --ok:#12684A; --ok-soft:#E3F2EB;
    --warn:#8A5B00; --warn-soft:#FBF1DC;
    --crit:#9C3320; --crit-soft:#FDECEA;
    --kush:#11161B; --king:#0E7C86;
    /* B4: a solid fill that carries white text (a button, a badge, a toast, a step's number) — the colour itself here;
       in dark mode its light-mode value, because white on the bright dark-mode colours is under 4.5:1 */
    --accent-fill:var(--accent); --ok-fill:var(--ok); --warn-fill:var(--warn); --crit-fill:var(--crit); --king-fill:var(--king);
    --shadow:0 1px 2px rgba(17,22,27,.05), 0 8px 24px -12px rgba(17,22,27,.18);
    --radius:10px;
    --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0D1116; --surface:#151B22; --surface-2:#1A222A;
      --ink:#E7ECF1; --muted:#9AA7B4; --faint:#75828F;
      --line:#27313B; --line-soft:#1F2832;
      --accent:#FF6B95; --accent-soft:#2B1721;
      --ok:#4CC08D; --ok-soft:#14261F;
      --warn:#D9A441; --warn-soft:#262015;
      --crit:#E0705A; --crit-soft:#2A1A17;
      --kush:#E7ECF1; --king:#3FBCC7;
      --accent-fill:#C9184A; --ok-fill:#12684A; --warn-fill:#8A5B00; --crit-fill:#9C3320; --king-fill:#0E7C86;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0D1116; --surface:#151B22; --surface-2:#1A222A;
    --ink:#E7ECF1; --muted:#9AA7B4; --faint:#75828F;
    --line:#27313B; --line-soft:#1F2832;
    --accent:#FF6B95; --accent-soft:#2B1721;
    --ok:#4CC08D; --ok-soft:#14261F;
    --warn:#D9A441; --warn-soft:#262015;
    --crit:#E0705A; --crit-soft:#2A1A17;
    --kush:#E7ECF1; --king:#3FBCC7;
    --accent-fill:#C9184A; --ok-fill:#12684A; --warn-fill:#8A5B00; --crit-fill:#9C3320; --king-fill:#0E7C86;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box}
  /* hidden means hidden. A class that sets display beats the browser's own [hidden] rule, and it
     kept happening one class at a time (the distributor's note, the bell's dot, a settings row,
     a forecast header) — one rule for all of them */
  [hidden]{display:none !important}
  /* an iPhone zooms into any field under 16px when it is tapped, and stays zoomed in */
  @media (max-width:640px){
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px !important}
    .linkbtn{min-width:24px;min-height:24px}
  }
  /* the filter chips over a list (purchase orders) */
  .fchip{appearance:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;font-weight:500;
    color:var(--muted);padding:5px 12px;min-height:30px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
  .fchip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
  .fchip .fn{font-family:var(--mono);font-size:12px;opacity:.75}
  .fchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1120px;margin:0 auto;padding-block:18px 130px;padding-left:16px;padding-right:16px}
  .wrap.admin{padding-bottom:40px}

  .demo{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:var(--radius);padding:11px 14px;margin-bottom:16px;font-size:13.5px}
  /* v89.12 (task 4): served by the server, the page knows whose cabinet it is before it paints (html[data-shell]):
     nothing shows — not the file's demo, not another cabinet — until that one is up; a quiet ring meanwhile. */
  html[data-shell] .demo{display:none !important}
  html[data-shell]:not(.kv-ready) body > *{visibility:hidden}
  html[data-shell]:not(.kv-ready) body::before{content:"";position:fixed;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
    box-sizing:border-box;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:kvRing .8s linear infinite}
  @keyframes kvRing{to{transform:rotate(360deg)}}
  /* B14: words under the ring at once; after eight seconds, that the line is slow, with Try again and Sign out */
  .kvboot{display:none}
  html[data-shell]:not(.kv-ready) body > .kvboot{display:block;visibility:visible;position:fixed;left:16px;right:16px;top:calc(50% + 22px);
    text-align:center;font-size:13.5px;color:var(--muted)}
  .kvboot p{margin:0 0 6px}
  .kvboot .late{visibility:hidden;animation:kvLate 0s linear 8s forwards}
  .kvboot a{color:var(--accent);display:inline-block;padding:4px 2px}
  @keyframes kvLate{to{visibility:visible}}
  .demo b{color:var(--warn)}
  .demoacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;order:3}
  .savenote{font-size:12px;color:var(--warn)}
  .envtag{display:inline-block;padding:0 6px;border-radius:6px;background:#f3d9a4;color:#5a3d00;font-weight:600;text-transform:uppercase;font-size:11px}
  #aTeam .adminrow{grid-template-columns:minmax(0,1.4fr) 110px 120px 150px 200px}
  #aTeam .adminrow .acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
  @media (max-width:760px){ #aTeam .adminrow{grid-template-columns:1fr} #aTeam .adminrow .acts{justify-content:flex-start} }
  /* the bar the SERVER shows instead of the demo strip */
  .topbar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;
          background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:9px 14px;margin-bottom:16px;font-size:13.5px}
  .topbar .who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted)}
  .topbar .who b{color:var(--ink)}
  .topbar .acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .topbar .acts select{font:inherit;font-size:12.5px;padding:4px 26px 4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
  .topbar .savenote{color:var(--muted)}
  @media (max-width:640px){ .topbar{padding:9px 12px} .topbar .acts{width:100%;justify-content:space-between} }
  .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
  .seg button{appearance:none;background:none;border:0;font:inherit;font-size:13px;font-weight:500;color:var(--muted);padding:7px 14px;cursor:pointer;white-space:nowrap}
  .seg button[aria-pressed="true"]{background:var(--accent-fill);color:#fff}
  .seg button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

  header.bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
  .brand .mark{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .brand .who{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:2px 0 0}   /* the shell's h1 (B7): no heading margins */
  .brand .meta{font-size:13px;color:var(--muted)}
  .acct{display:flex;align-items:center;gap:14px}
  .tierbadge{display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding-right:14px;border-right:1px solid var(--line-soft)}
  .tierbadge[hidden]{display:none}
  .tierbadge .lab{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
  .tierbadge .val{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--ok)}
  .avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:13px;font-family:var(--mono);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}

  nav.tabs{display:flex;gap:2px;margin:18px 0 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  nav.tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;font:inherit;font-weight:500;color:var(--muted);padding:9px 14px;cursor:pointer;margin-bottom:-1px}
  nav.tabs button:hover{color:var(--ink)}
  nav.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
  nav.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
  nav.tabs .count{font-family:var(--mono);font-size:11px;color:var(--faint);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:20px;padding:1px 6px;margin-left:6px}
  nav.tabs .count.hot{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}

  .tierstrip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
  .tierstrip .top{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:baseline;margin-bottom:10px}
  .tierstrip .head{font-size:13.5px;color:var(--muted)}
  .tierstrip .head strong{color:var(--ink);font-weight:600}
  .track{height:6px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:20px;overflow:hidden}
  .fill{height:100%;background:var(--accent);border-radius:20px;transition:width .35s ease}
  .ticks{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
  .ticks span.hit{color:var(--ok)}
  .dist-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin-bottom:14px;box-shadow:var(--shadow);font-size:13.5px;color:var(--muted);display:grid;gap:9px}
  /* a class that sets display beats the browser's own [hidden] rule — until v88 every retailer saw the distributor's note */
  .dist-note[hidden]{display:none}
  .dist-note strong{color:var(--ink)}
  .dnrow{line-height:1.5}
  /* Delivery is the clause people skim and then argue about, so it is not a
     clause — it is a line with a chip on the front of it. */
  .dnrow.tell{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
              padding-top:9px;border-top:1px solid var(--line-soft)}
  .dnchip{flex:none;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;
          text-transform:uppercase;padding:3px 9px;border-radius:5px;
          background:var(--accent-fill);color:#fff}
  .dnrow.tell span:last-child{flex:1;min-width:200px;color:var(--ink)}
  .dnrow.soft{padding-top:9px;border-top:1px solid var(--line-soft);color:var(--faint)}
  .dnrow.soft b{color:var(--muted)}

  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px}
  .panel > .phead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 18px;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
  .phead h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  .phead .note{font-size:12.5px;color:var(--faint)}

  .grouphead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 18px;background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
  .grouphead .gname{font-weight:600;font-size:13.5px}
  .grouphead .gname.kush{color:var(--kush)}
  .grouphead .gname.king{color:var(--king)}
  .grouphead .gname.hw{color:var(--accent)}
  .grouphead .gmeta{font-size:12px;color:var(--faint);font-family:var(--mono)}

  .filterbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
  .fgroup{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
  .fgroup button{appearance:none;background:none;border:0;font:inherit;font-size:13px;font-weight:500;color:var(--muted);padding:7px 14px;cursor:pointer;white-space:nowrap;border-right:1px solid var(--line)}
  .fgroup button:last-child{border-right:0}
  .fgroup button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
  .fgroup button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .fgroup.brand button[aria-pressed="true"][data-b="Kush"]{background:var(--kush);color:var(--surface)}
  .fgroup.brand button[aria-pressed="true"][data-b="King Kush"]{background:var(--king-fill);color:#fff}

  .hero{padding:26px 22px 22px;border-bottom:1px solid var(--line-soft);background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--accent) 7%,transparent) 0%, transparent 58%),
        var(--surface)}
  .hero .wordmark{margin-bottom:16px}
  .hero .wordmark img{width:min(210px,52vw);height:auto;display:block}
  .brandlogo{height:38px;width:auto;display:block;margin-bottom:6px}
  .hero .claim{font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.3;max-width:24ch;text-wrap:balance;margin-bottom:8px}
  .hero .sub{font-size:14px;color:var(--muted);max-width:62ch;margin-bottom:18px}
  .lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr));gap:12px}
  .lcard{border:1px solid var(--line);border-radius:9px;padding:13px 15px;background:var(--surface-2)}
  .lcard .lh{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
  .lcard .ln{font-weight:600;font-size:15px}
  .lcard .ln.kush{color:var(--kush)} .lcard .ln.king{color:var(--king)}
  .lcard .lt{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
  .lcard .ld{font-size:13px;color:var(--muted)}
  .lcard .ld b{color:var(--ink);font-weight:600}

  .specpanel{padding:20px 18px 18px;border-bottom:1px solid var(--line-soft)}
  .specpanel .claim{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:9px 0 7px;max-width:32ch;text-wrap:balance}
  .specpanel .body{font-size:13.5px;color:var(--muted);max-width:66ch;margin-bottom:13px}
  .specpanel .body b{color:var(--ink);font-weight:600}
  .specpanel .sptop{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;margin-bottom:9px}
  .specpanel .spname{font-size:19px;font-weight:600;letter-spacing:-.01em}
  .specpanel .spname.kush{color:var(--kush)}
  .specpanel .spname.king{color:var(--king)}
  .spectrum{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:20px;border:1px solid}
  .spectrum.broad{color:var(--ok);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
  .spectrum.full{color:var(--king);background:color-mix(in srgb,var(--king) 10%,transparent);border-color:color-mix(in srgb,var(--king) 30%,transparent)}
  .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
  .chip{font-family:var(--mono);font-size:12px;padding:3px 10px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
  .comp{font-size:13px;color:var(--muted);max-width:68ch}
  .comp b{color:var(--ink);font-weight:600}
  .comp .warnline{display:block;margin-top:5px;color:var(--warn);font-size:12.5px}

  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(384px,100%),1fr));gap:14px;padding:16px 18px}
  .card{border:1px solid var(--line);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;overflow:hidden}
  .card .crow{display:flex;flex-direction:row;flex:1;min-width:0}
  .card .cbody{display:flex;flex-direction:column;flex:1;min-width:0}
  .card .ctop{padding:14px 16px 12px;flex:1}
  .card .cthumb{flex:none;width:168px;display:flex;align-items:center;justify-content:center;padding:10px 12px 10px 0}
  .card .cthumb img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block}
  .card .cmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
  .card .csku{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.02em}
  .card .cname{font-size:17px;font-weight:600;letter-spacing:-.012em;line-height:1.2;margin-bottom:6px}
  .card .cpitch{font-size:13.5px;color:var(--muted);line-height:1.45;margin-bottom:10px}
  .card .cchips{display:flex;flex-wrap:wrap;gap:5px}
  .tag{font-size:11px;padding:2px 8px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted)}
  .tag.thc{color:var(--king);border-color:color-mix(in srgb,var(--king) 32%,transparent);background:color-mix(in srgb,var(--king) 9%,transparent)}
  .badge{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:5px;white-space:nowrap}
  .badge.cali{background:var(--accent-fill);color:#fff}
  .card .cbot{border-top:1px solid var(--line-soft);background:var(--surface-2);padding:10px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .card .cprice .now{font-family:var(--mono);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.15}
  .card .cprice .per{font-family:var(--mono);font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
  .card .cprice .srp{font-size:11.5px;color:var(--muted);margin-top:3px}
  .card .cprice .srp b{font-family:var(--mono);color:var(--ink);font-weight:600}
  .card .cprice .tbd{font-size:12.5px;color:var(--warn)}

  .card.wide{grid-column:1/-1}
  .card.wide .cthumb{width:224px}
  .card.wide .cname{font-size:20px}

  .row{display:grid;grid-template-columns:1fr 128px 112px 132px;gap:14px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line-soft)}
  .row:last-child{border-bottom:0}
  .row.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .row.head .r{text-align:right}
  .prod .sku{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
  .prod .name{font-weight:500;margin-top:1px}
  .prod .unit{font-size:12.5px;color:var(--muted);margin-top:2px}
  .price{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
  .price .now{font-size:15px;font-weight:600}
  .price .per{font-size:11.5px;color:var(--faint);margin-top:1px}
  .price .tbd{font-size:12.5px;color:var(--warn);font-family:var(--sans)}
  .srp{text-align:right;font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
  .srp small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  .stock{text-align:right;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
  .stock.in{color:var(--ok)} .stock.low{color:var(--warn)} .stock.out{color:var(--faint)}
  .empty{padding:26px 18px;text-align:center;color:var(--faint);font-size:13.5px}
  .qty{display:flex;justify-content:flex-end;align-items:center}
  .qty button{width:31px;height:31px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;line-height:1;cursor:pointer}
  .qty button:first-of-type{border-radius:7px 0 0 7px}
  .qty button:last-of-type{border-radius:0 7px 7px 0}
  .qty button:hover:not(:disabled){background:var(--surface-2);border-color:var(--faint)}
  .qty button:disabled{opacity:.4;cursor:not-allowed}
  .qty button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;position:relative;z-index:1}
  .qty input{width:48px;height:31px;text-align:center;border:1px solid var(--line);border-left:0;border-right:0;background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
  .qty input:disabled{background:var(--surface-2);color:var(--faint)}
  .qty input:focus-visible{outline:2px solid var(--accent);outline-offset:-1px;position:relative;z-index:1}
  /* v89.13 (task 38): a quantity is whole cases — anything else is marked on the field and counts as nothing */
  .qty{position:relative}
  .qty input.notwhole{color:var(--crit);box-shadow:inset 0 0 0 1px var(--crit)}
  .qty.notwhole::after{content:"whole cases";position:absolute;right:0;top:100%;margin-top:2px;font-size:11px;line-height:1.2;color:var(--crit);white-space:nowrap}
  /* v89.16 (0i): a distributor's own prices on the customer's card; the 10-case minimum by the basket */
  .ownprices{border:1px solid var(--line);border-radius:var(--radius);max-height:320px;overflow:auto;margin-top:8px}
  .ownprices .oprow{display:grid;grid-template-columns:minmax(0,1fr) 84px 112px;gap:10px;align-items:center;padding:7px 10px;border-top:1px solid var(--line)}
  .ownprices.ro .oprow{grid-template-columns:minmax(0,1fr) 96px}
  .ownprices .oprow:first-child{border-top:0}
  .ownprices .oprow.head{font-size:12px;color:var(--muted);position:sticky;top:0;background:var(--surface);z-index:1}
  .ownprices .oprow .ta{width:100%;text-align:right}
  .ownprices .pname{font-size:13.5px;overflow-wrap:anywhere}.ownprices .psku{font-size:11.5px;color:var(--faint)}
  .ownprices .r{text-align:right}
  /* a phone: the product's name on a line of its own, the list price and their price under it — three columns there
     leave the name some 70 px and break it after every word */
  @media (max-width:640px){
    .ownprices:not(.ro) .oprow{grid-template-columns:minmax(0,1fr) 112px;row-gap:4px}
    .ownprices:not(.ro) .oprow > :first-child{grid-column:1 / -1}
  }
  .cartbar .minnote{flex:1 1 220px;font-size:13px;color:var(--crit)}
  /* v89.13 (task 39): what stopped an order is said in its window, where the person is */
  .ordfail{margin:14px 0 0;padding:10px 12px;border-radius:var(--radius);background:var(--crit-soft);color:var(--crit);font-size:13.5px;line-height:1.45}

  .cartbar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 24px -14px rgba(17,22,27,.4)}
  .cartbar .inner{max-width:1120px;margin:0 auto;padding:12px 16px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .sums{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline}
  .sum{display:flex;flex-direction:column;gap:1px}
  .sum .lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .sum .val{font-family:var(--mono);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
  .sum .val.disc{color:var(--ok)}
  .sum .val.total{font-size:21px}
  .btn{white-space:nowrap;appearance:none;border:1px solid transparent;border-radius:8px;font:inherit;font-weight:600;padding:11px 20px;cursor:pointer;background:var(--accent-fill);color:#fff}
  .btn:hover:not(:disabled){filter:brightness(1.07)}
  .btn:disabled{opacity:.45;cursor:not-allowed}
  .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn.ghost:hover{background:var(--surface-2)}
  .btn.sm{padding:7px 13px;font-size:13px}

  .listrow.docrow{grid-template-columns:1.5fr 1.1fr 120px 250px}
  .listrow.docrow .c4{white-space:nowrap}
  .listrow{display:grid;grid-template-columns:118px 1fr 110px 176px;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
  .listrow:last-child{border-bottom:0}
  .listrow.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .listrow .r{text-align:right}
  .ref{font-family:var(--mono);font-size:13px}
  .when{font-size:12.5px;color:var(--muted);margin-top:2px}
  .amt{text-align:right;font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
  .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 10px;border-radius:20px;white-space:nowrap;border:1px solid transparent}
  .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .pill.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
  .pill.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
  .pill.neutral{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
  .pill.crit{background:var(--crit-soft);color:var(--crit);border-color:color-mix(in srgb,var(--crit) 25%,transparent)}
  .pillwrap{display:flex;justify-content:flex-end}
  .dl{font-family:var(--mono);font-size:12.5px;color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
  .dl:hover{border-bottom-color:var(--accent)}
  .dl:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
  .acctgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));gap:14px}
  .field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:start;padding:12px 18px;border-bottom:1px solid var(--line-soft);font-size:14px}
  .field:last-child{border-bottom:0}
  .field .k{grid-column:1/-1;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  .field .v{font-weight:500;min-width:0;overflow-wrap:break-word}
  .field .fnote{font-size:12px;color:var(--faint);white-space:nowrap;align-self:center}
  .field .linkbtn{align-self:center}
  .field .v.mono{font-family:var(--mono);font-size:13.5px}
  .field .pend{display:block;font-size:11.5px;color:var(--warn);margin-top:3px;font-family:var(--sans)}
  .linkbtn{appearance:none;background:none;border:0;font:inherit;font-size:12.5px;color:var(--accent);cursor:pointer;padding:4px 6px;border-radius:5px;white-space:nowrap}
  .linkbtn:hover{background:var(--accent-soft)}
  .linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .curbox{padding:10px 12px;border:1px solid var(--line-soft);border-radius:8px;background:var(--surface-2);font-size:14px}
  .ta{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
      color:var(--ink);font:inherit;font-size:14px;resize:vertical}
  .ta:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}

  .mgr{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:18px}
  .mgr .ava{width:60px;height:60px;border-radius:50%;flex:none;display:grid;place-items:center;
            background:var(--accent-fill);color:#fff;font-weight:600;font-size:20px;font-family:var(--mono)}
  .mgr .who{flex:1;min-width:190px}
  .mgr .role{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
  .mgr .nm{font-size:19px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
  .mgr .hrs{font-size:13px;color:var(--muted);margin-top:3px}
  .mgr .ways{display:flex;gap:8px;flex-wrap:wrap}

  .bell{position:relative}
  .bell > button{appearance:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
               background:var(--surface);color:var(--ink);font-size:17px;cursor:pointer;line-height:1}
  .bell > button:hover{background:var(--surface-2)}
  .bell > button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .nitem:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .bell .dot{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;border-radius:20px;
             background:var(--accent-fill);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;
             display:grid;place-items:center;padding:0 5px;border:2px solid var(--surface)}
  /* a class that sets display beats the browser's own [hidden] rule — restate it
     wherever JS toggles the attribute (see also .gate and .tierbadge) */
  .bell .dot[hidden]{display:none}
  .notif{position:absolute;right:0;top:46px;width:min(380px,calc(100vw - 32px));z-index:30;
         background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
  /* N116: on a phone the bell sits mid-header; its panel, anchored to the bell's right edge, grew past the screen's
     left edge. There it hangs from the header instead, the header's full width. */
  @media (max-width:640px){
    header.bar{position:relative}
    .bell{position:static}
    .bell > button{position:relative}
    .notif{left:0;right:0;top:calc(100% + 6px);width:auto}
  }
  .notif .nhead{padding:11px 15px;border-bottom:1px solid var(--line-soft);background:var(--surface-2);
                font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .nitem{display:block;padding:12px 15px;border-bottom:1px solid var(--line-soft);
         font-size:13.5px;cursor:pointer;text-align:left;width:100%;background:none;
         border-left:0;border-right:0;border-top:0;color:inherit;font-family:inherit}
  .nitem .nrow{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;align-items:start}
  .nitem:last-child{border-bottom:0}
  .nitem:hover{background:var(--surface-2)}
  .nitem .ni{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;margin-top:1px}
  .nitem .ni.chg{background:var(--warn-soft);color:var(--warn)}
  .nitem .ni.ord{background:var(--accent-soft);color:var(--accent)}
  .nitem > span:last-child{min-width:0}
  .nitem .nt{display:block;font-weight:500;line-height:1.35}
  .nitem .nw{display:block;font-size:12px;color:var(--faint);margin-top:3px;line-height:1.35}
  .nitem.unread .nt::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
                           background:var(--accent);margin-left:7px;vertical-align:middle}
  .wbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;
        padding:9px 14px;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;background:var(--surface)}
  .wbtn:hover{background:var(--surface-2);border-color:var(--faint)}
  .wbtn .ic{color:var(--accent);font-size:15px}

  @media (max-width:640px){
    .field{padding:11px 14px}
    .field .fnote{white-space:normal}
  }

  .foot{margin-top:14px;padding:13px 18px;border:1px dashed var(--line);border-radius:var(--radius);font-size:12.5px;color:var(--muted);background:var(--surface-2)}

  /* admin */
  .adminrow{display:grid;grid-template-columns:146px 1fr 104px 112px 176px;gap:12px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line-soft)}
  .adminrow:last-child{border-bottom:0}
  /* a button is one line, always: the column grows, the label never breaks */
  @media (min-width:761px){ #aChgList .adminrow{grid-template-columns:140px 1fr 86px 110px 220px} }
  @media (min-width:761px){ #aPendList .adminrow.pendrow{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 100px 250px} }
  .adminrow .actions .btn{flex:0 0 auto}
  .adminrow.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .adminrow .r{text-align:right}
  .adminrow .actions{display:flex;justify-content:flex-end;gap:7px}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:12px;margin-bottom:14px}
  .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
  .kpi .lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .kpi .val{font-family:var(--mono);font-size:24px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
  .kpi .sub{font-size:12px;color:var(--muted);margin-top:2px}
  .kpi.attn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-soft)}
  /* A figure that leads somewhere says so: it lifts under the cursor and
     carries an arrow. A figure that leads nowhere is left alone, so the
     difference is visible rather than discovered by clicking. */
  .kpi.goes{position:relative;cursor:pointer;transition:transform .12s ease,
            box-shadow .12s ease,border-color .12s ease}
  .kpi.goes:hover{transform:translateY(-2px);border-color:var(--faint);
                  box-shadow:0 2px 4px rgba(17,22,27,.06), 0 12px 26px -14px rgba(17,22,27,.3)}
  .kpi.goes:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .kpi .goarrow{position:absolute;top:12px;right:14px;color:var(--faint);
                font-size:15px;opacity:0;transition:opacity .12s ease,transform .12s ease}
  .kpi.goes:hover .goarrow,.kpi.goes:focus-visible .goarrow{opacity:1;transform:translateX(2px)}
  .sdkey.goes{cursor:pointer;border-radius:7px;margin:0 -8px;padding-left:8px;padding-right:8px;
              transition:background .12s ease}
  .sdkey.goes:hover{background:var(--surface-2)}
  .sdkey.goes:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

  /* Where you were taken. One pass, then it is an ordinary panel again —
     a highlight that stays becomes wallpaper. */
  @keyframes landed{
    0%   { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent) }
    100% { box-shadow:0 0 0 3px transparent }
  }
  .landed{animation:landed 1.5s ease-out 1;border-radius:var(--radius)}
  @media (prefers-reduced-motion: reduce){
    .kpi.goes:hover{transform:none}
    .landed{animation:none;outline:2px solid var(--accent);outline-offset:2px}
  }
  .kpi.attn .val{color:var(--warn)}
  .prow{display:grid;grid-template-columns:1fr 104px 104px 104px 104px;gap:12px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line-soft);font-size:14px}
  .prow:last-child{border-bottom:0}
  .prow.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .prow .r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
  .tierset{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;padding:16px 18px}
  .tierbox{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--surface-2)}
  .tierbox .lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .tierbox .v{font-family:var(--mono);font-size:19px;font-weight:600;margin-top:3px}
  .tierbox .n{font-size:12px;color:var(--muted);margin-top:2px}

  /* The close-out table lives in a modal, so it gets its own narrower grid —
     four columns, the widest of them the name. */
  #cbRows .irow{grid-template-columns:minmax(0,1fr) 86px 132px 92px;gap:10px;padding:10px 0}
  #cbRows .irow.head{padding-block:7px}
  #cbRows .cbact{width:84px;text-align:right;padding:7px 9px}
  #cbRows .mixu{margin-left:5px;color:var(--muted);font-size:12px}
  #cbRows .when{white-space:normal}
  @media (max-width:640px){
    #cbRows .irow{grid-template-columns:1fr}
    #cbRows .irow.head{display:none}
    #cbRows .irow .r{text-align:left}
  }

  /* ---- inventory branches ----
     A disclosure, not an accordion: several can be open at once, because the
     question is usually "do I have pouches AND stickers for this run". */
  .branch{border:1px solid var(--line);border-radius:10px;margin:0 0 10px;overflow:hidden}
  .branch.sub{margin:0 0 8px;border-radius:8px}
  .bhead{width:100%;appearance:none;background:var(--surface-2);border:0;border-bottom:1px solid transparent;
         display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;text-align:left;
         font:inherit;color:var(--ink)}
  .bhead:hover{background:var(--line-soft)}
  .bhead:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .branch.open > .bhead{border-bottom-color:var(--line)}
  .bhead .chev{width:14px;flex:none;color:var(--muted);transition:transform .12s ease;font-size:11px}
  .branch.open > .bhead .chev{transform:rotate(90deg)}
  .bhead .bname{font-weight:650;font-size:13.5px;letter-spacing:.01em}
  .bhead .bsub{color:var(--muted);font-size:12px}
  .bhead .bright{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
  .bhead .bcount{font-family:var(--mono);font-size:12px;color:var(--muted)}
  .bhead .bval{font-family:var(--mono);font-size:12.5px;font-weight:600}
  /* The inventory rows carry one column more than the shared .irow grid.
     Scoped to widths where a table is still a table: below 820px every .irow in
     the app becomes a labelled card, and this must not fight that. */
  @media (min-width:821px){
    #prInv .irow{grid-template-columns:minmax(0,1fr) 136px 96px 104px 128px 152px;
                 gap:10px;padding-inline:14px}
    #prInv .irow.head{white-space:nowrap}
    #prInv .irow .btn,#prInv .irow .linkbtn{white-space:nowrap}
    /* The numbers keep their line; the name column truncates instead of
       spilling over the column next to it. */
    #prInv .irow .r .when{white-space:nowrap}
    #prInv .irow > :first-child{min-width:0}
    #prInv .irow > :first-child .when{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  }
  /* Stock carries six columns too, and its last one is a name, not a number. */
  @media (min-width:821px){
    #prFinished .irow{grid-template-columns:minmax(0,1fr) 96px 96px 96px 128px 176px;gap:10px}
    #prFinished .irow.head{white-space:nowrap}
    #prFinished .irow > :last-child{text-align:right}
  }
  @media (min-width:821px) and (max-width:1080px){
    /* Cost per unit is the first thing to go when it gets tight — it is the one
       column you can get from the material card instead. */
    #prInv .irow{grid-template-columns:minmax(0,1fr) 124px 88px 96px 140px}
    #prInv .irow > :nth-child(5){display:none}
  }
  /* Three controls in the last column of the admin's product list: a status
     pill, goods in, and the card. They get the room to sit on one line. */
  @media (min-width:821px){
    #aPrdList .irow{grid-template-columns:minmax(0,1fr) 104px 104px 116px 216px}
    #aPrdList .irow .btn,#aPrdList .irow .linkbtn,#aPrdList .irow .pill{white-space:nowrap}
  }

  /* The row that closes off a supplier's block: total on the left, the button
     that turns a suggestion into an order on the right. */
  .poact{display:flex;justify-content:space-between;align-items:center;gap:12px;
         padding:11px 18px 14px;border-bottom:1px solid var(--line)}
  .poact:last-child{border-bottom:0}
  .pobuy{width:74px;text-align:right;padding:6px 8px}
  #aBuyPlan .mixu,#aBuyOpen .mixu{white-space:nowrap}
  #aBuyPlan .irow{grid-template-columns:minmax(0,1fr) 120px 120px 148px 110px}
  #aBuyOrders .irow{grid-template-columns:minmax(0,1fr) 70px 110px 110px 110px 180px}
  #aVendors .irow{grid-template-columns:minmax(0,1fr) 80px 110px 100px 190px}
  #poLineBox .irow{grid-template-columns:minmax(0,1fr) 92px 100px 100px 130px}
  #poRows .irow{grid-template-columns:minmax(0,1fr) 80px 92px 104px 104px}
  #aBuyOrders .irow .btn,#aVendors .irow .btn{white-space:nowrap}
  @media (max-width:820px){
    .poact{flex-wrap:wrap}
    #aBuyPlan .irow,#aBuyOrders .irow,#aVendors .irow,
    #poLineBox .irow,#poRows .irow{grid-template-columns:1fr}
  }

  /* A price nobody has entered yet is written down, not dressed up as a fact. */
  .seedp{color:var(--muted);text-decoration:underline dotted;text-underline-offset:3px}
  .bbody{padding:2px 12px 8px}
  .branch.sub .bbody{padding:2px 8px 6px}
  .bkids{padding:10px 12px 4px}
  @media (max-width:560px){
    .bhead{flex-wrap:wrap;gap:6px}
    .bhead .bright{margin-left:0;width:100%;justify-content:flex-start}
    .bhead .bsub{width:100%}
  }

  /* The formula, restated where the batch is actually made. Read-only on
     purpose: this screen is for following the standard, not editing it. */
  .stdcard{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);
           padding:12px 14px;margin:0 0 14px}
  .stdcard .sthead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
                   margin-bottom:8px}
  .stdcard .sthead b{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
  .stdline{display:flex;justify-content:space-between;gap:12px;padding:4px 0;
           border-bottom:1px dotted var(--line);font-size:13px}
  .stdline:last-of-type{border-bottom:none}
  .stdline .v{font-family:var(--mono);font-size:12.5px}
  .stdfoot{display:flex;justify-content:space-between;gap:12px;align-items:center;
           margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
  .stdfoot .sgn{font-size:12px}
  .stdfoot .sgn.no{color:var(--crit);font-weight:600}
  .stdfoot .sgn.yes{color:var(--ok)}

  /* ---- reports ------------------------------------------------------------
     Deliberately plain: black on white, ruled rows, no cards and no colour
     beyond what a number needs to be read. It should look like something
     printed out and left on a desk. */
  #reportApp{max-width:1180px;margin:0 auto;padding:26px 18px 60px;background:var(--surface)}
  .rephead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
           padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:6px}
  .rephead h1{margin:0;font-size:22px;letter-spacing:-.01em}
  .repacts{display:flex;gap:8px;align-items:center}
  .repnav{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 0 18px;font-size:13px}
  .repnav a{color:var(--accent);text-decoration:none}
  .repnav a:hover{text-decoration:underline}
  .rep{margin:0 0 34px}
  .rep h2{margin:0 0 2px;font-size:16px;letter-spacing:-.01em}
  .rep .repsub{color:var(--muted);font-size:12.5px;margin-bottom:10px}
  .rep .repcsv{float:right;font-size:12.5px}
  .reptab{width:100%;border-collapse:collapse;font-size:13px}
  .reptab th{text-align:right;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
             color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1.5px solid var(--line);
             white-space:nowrap}
  .reptab th:first-child{text-align:left}
  .reptab td{text-align:right;padding:7px 8px;border-bottom:1px solid var(--line-soft);
             font-family:var(--mono);font-size:12.5px;white-space:nowrap}
  .reptab td:first-child{text-align:left;font-family:inherit;font-size:13px;white-space:normal}
  .reptab tr.sub td{background:var(--surface-2);font-weight:650;font-family:inherit}
  .reptab tr:hover td{background:var(--surface-2)}
  .reptab .neg{color:var(--crit);font-weight:600}
  .repwrap{overflow-x:auto}
  @media (max-width:640px){
    #reportApp{padding:18px 12px 40px}
    .rephead{flex-direction:column}
    .reptab{min-width:640px}
  }
  @media print{
    #reportApp{max-width:none;padding:0}
    .repnav,.repacts{display:none !important}
    .rep{break-inside:auto}
    .rep h2{break-after:avoid}
  }

  /* ---- the batch sheet -------------------------------------------------
     A document, not a screen: serif-free, ruled, and laid out so that the
     printed version and the on-screen version are the same thing. */
  .sheet{font-size:13px}
  .sheet .shhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
                 padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:14px}
  .sheet .shhead h3{margin:0 0 2px;font-size:19px;letter-spacing:-.01em}
  .sheet .shno{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.02em}
  .sheet .shmeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;margin-bottom:16px}
  .sheet .shmeta div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;
                     border-bottom:1px dotted var(--line)}
  .sheet .shmeta span:first-child{color:var(--muted)}
  .sheet .shmeta b{font-family:var(--mono);font-weight:600}
  .sheet h4{margin:16px 0 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  /* A table of six columns will not shrink below its content, and a modal that
     grows to fit it stops fitting the phone. So each table gets its own
     horizontal scroll and the modal keeps its width. */
  .sheet .shscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sheet table{width:100%;border-collapse:collapse;min-width:420px}
  .sheet th{text-align:right;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
            color:var(--muted);font-weight:600;padding:5px 6px;border-bottom:1px solid var(--line)}
  .sheet th:first-child{text-align:left}
  .sheet td{text-align:right;padding:6px;border-bottom:1px solid var(--line-soft);
            font-family:var(--mono);font-size:12.5px}
  .sheet td:first-child{text-align:left;font-family:inherit;font-size:13px}
  .sheet tr.tot td{border-top:1.5px solid var(--ink);border-bottom:none;font-weight:700}
  .sheet .shsign{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:26px}
  .sheet .shsign div{border-top:1px solid var(--ink);padding-top:5px;font-size:11px;color:var(--muted)}
  /* A grid item does not shrink below its content unless it is told it may.
     Without these three the six-column table widens the modal past the phone. */
  .modal.review .mbody{min-width:0}
  .veil .modal{min-width:0;max-width:min(680px,calc(100vw - 32px))}
  .sheet,.sheet .shscroll{min-width:0;max-width:100%}
  @media (max-width:560px){
    .sheet .shmeta,.sheet .shsign{grid-template-columns:1fr;gap:2px}
    .sheet .shsign{gap:18px;margin-top:20px}
    .sheet .shhead{flex-direction:column;gap:6px}
  }
  .sheet .shnote{margin-top:14px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;
                 font-size:11.5px;color:var(--muted);line-height:1.5}

  @media print{
    /* The modal IS the page. Everything else is hidden rather than removed —
       `display:none` on body's children would depend on where the app happens
       to sit in the tree, and visibility does not. The veil's dimming goes too,
       or it prints as a grey wash over the sheet. */
    body *{visibility:hidden}
    .veil, .veil *{visibility:visible}
    .veil{position:static !important;background:none !important;padding:0 !important;
          display:block !important;z-index:auto}
    .veil .modal{max-width:none;width:auto;border:none;border-radius:0;box-shadow:none;
                 max-height:none;padding:0;background:none}
    .veil .modal .mbody{overflow:visible;padding:0 !important;max-height:none}
    .veil .modal .mhead,.noprint,.noprint *{display:none !important;visibility:hidden !important}
    .sheet{font-size:11.5px;color:#000}
    .sheet .shscroll{overflow:visible}
    .sheet table{min-width:0}
    .sheet td,.sheet th{border-color:#bbb}
    @page{margin:14mm}
  }

  .veil{position:fixed;inset:0;z-index:40;background:rgba(9,12,16,.5);display:grid;place-items:center;padding:16px}
  /* A card that grows past the window scrolls inside itself. Before this a
     tall form — a customer with three people on it — put its Save button
     below the bottom edge of a laptop screen with no way to reach it. */
  .modal{background:var(--surface);border:1px solid var(--line);border-radius:12px;max-width:540px;width:100%;padding:22px;box-shadow:var(--shadow);
         max-height:calc(100vh - 32px);overflow-y:auto}
  .modal.review{max-width:680px;padding:0;display:flex;flex-direction:column;max-height:min(88vh,860px)}
  .modal.review .mhead{padding:20px 22px 14px;border-bottom:1px solid var(--line-soft)}
  .modal.review .mhead h3{margin:0 0 3px}
  .modal.review .mbody{padding:0 22px;overflow-y:auto;flex:1}
  .modal.review .mfoot{padding:16px 22px;border-top:1px solid var(--line-soft);background:var(--surface-2);
                       display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
  .oline{display:grid;grid-template-columns:1fr 72px 92px 96px;gap:12px;align-items:center;
         padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
  .oline.head{padding-top:14px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}
  .oline .r{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
  .oline .pname{font-weight:500}
  .oline .psku{font-family:var(--mono);font-size:11px;color:var(--faint)}
  .osum{padding:14px 0 4px}
  .osum .srow{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:14px}
  .osum .srow .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .osum .srow.disc .v{color:var(--ok)}
  .osum .srow.total{border-top:1px solid var(--line);margin-top:8px;padding-top:11px;font-size:17px;font-weight:600;gap:16px}
  .osum .srow.total > span:first-child{min-width:0}
  .osum .srow.total .v{font-size:19px}
  .osum .note{font-size:12.5px;color:var(--faint);margin-top:2px}
  .terms{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:9px;padding:13px 15px;margin:14px 0 18px}
  .terms .trow{display:flex;gap:9px;font-size:13.5px;color:var(--muted);padding:3px 0}
  .terms .trow b{color:var(--ink);font-weight:600}
  .terms .tk{color:var(--accent);flex:none}
  @media (max-width:520px){ .amt-inline{display:none} }
  @media (max-width:640px){
    .oline{grid-template-columns:1fr auto;grid-template-areas:"nm tt" "qt tt";gap:2px 14px}
    .oline.head{display:none}
    .oline .nm{grid-area:nm}
    .oline .cases{grid-area:qt;text-align:left;color:var(--muted);font-size:12.5px}
    .oline .tot{grid-area:tt;align-self:center;font-weight:600}
    .oline .unit{display:none}
    .modal.review .mfoot{padding:14px 16px}
    .modal.review .mfoot .btn{flex:1;padding:12px 10px}
    .modal.review .mbody{padding:0 16px}
    .modal.review .mhead{padding:18px 16px 12px}
  }
  .modal h3{margin:0 0 4px;font-size:19px;letter-spacing:-.01em;text-wrap:balance}
  .modal p.sub{margin:0 0 16px;color:var(--muted);font-size:13.5px}
  .steps{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:11px}
  .steps li{display:grid;grid-template-columns:24px 1fr;gap:11px;align-items:start;font-size:13.5px}
  .steps .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:11px;font-weight:600;margin-top:1px;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
  /* N91: a window's button row wraps onto a second line when it is wider than the window — one-line labels in a row
     that could not wrap grew past the window's LEFT edge on a phone ("Cancel order" off screen at 360 px) */
  .modal .acts{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

  /* ---- production: inventory, recipes, the calculator ---- */
  /* One grid for every list on this screen. The first column carries the name,
     the rest are numbers, so they are right-aligned and tabular. */
  .irow.audrow{grid-template-columns:118px 1.3fr 1.5fr 1fr 96px;padding:8px 0}
  .irow.fgcnt{grid-template-columns:1.4fr 110px 110px 150px 1fr}
  .irow.fgmv{grid-template-columns:1.3fr 90px 1.4fr 140px 120px;padding:8px 0}
  .irow{display:grid;grid-template-columns:1fr 140px 130px 120px 168px;gap:12px;align-items:center;
        padding:12px 18px;border-bottom:1px solid var(--line-soft);font-size:14px}
  .irow:last-child{border-bottom:0}
  .irow.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:11px;
             letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .irow.tot{border-top:1px solid var(--line);border-bottom:0;font-weight:600}
  .irow.tot .iname{font-weight:600}
  .irow .r{text-align:right;font-variant-numeric:tabular-nums}
  .irow .iname{font-weight:500}
  .irow .actions{display:flex;justify-content:flex-end;align-items:center;gap:8px}
  .irow .when{margin-top:2px}

  /* The certificate tables. Wider than the stock tables because a lab name and
     a document button are both long and neither abbreviates well. */
  #coaOil .irow,#coaProd .irow{grid-template-columns:1fr 150px 110px 165px 210px}
  #coaWait .irow{grid-template-columns:1fr 1fr 200px}
  #prMoves .irow{grid-template-columns:1fr 130px 150px 130px}
  #prLoss .irow{grid-template-columns:1fr 120px 170px 130px 120px}
  #prCount .irow{grid-template-columns:1fr 130px 150px 150px 1fr}
  #fcFg .irow{grid-template-columns:1fr 120px 120px 150px 120px 120px}
  #fcMat .irow{grid-template-columns:1fr 120px 130px 140px 130px 130px}
  #anaRows .irow{grid-template-columns:1fr 110px 130px 130px 130px 110px}
  #anaBuy .irow{grid-template-columns:1fr 140px 150px 140px}
  #actProd .irow{grid-template-columns:1fr 100px 130px 130px 130px 90px}
  #actCust .irow{grid-template-columns:1fr 140px 140px 140px}
  #actAgent .irow{grid-template-columns:1fr 110px 150px 150px}
  #actSpend .irow{grid-template-columns:1fr 120px 160px}
  #aLog .irow{grid-template-columns:110px 1fr 1fr 130px 110px}
  #aRules .irow{grid-template-columns:1fr 160px 1fr}
  .rulein{width:130px;text-align:right}
  .peoplelist .irow{grid-template-columns:1fr 1fr 1fr 1fr 40px;padding:8px 0}
  @media (max-width:820px){
    #aLog .irow,#aRules .irow,.peoplelist .irow{grid-template-columns:1fr}
    .rulein{width:100%}
  }
  .fcin{width:92px;text-align:right}
  .planbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:0 18px 14px}
  .planbar label{font-size:12.5px;color:var(--muted)}
  .planbar input{width:86px;text-align:right}
  @media (max-width:820px){
    #fcFg .irow,#fcMat .irow,#anaRows .irow,#anaBuy .irow,
    #actProd .irow,#actCust .irow,#actAgent .irow,#actSpend .irow{grid-template-columns:1fr}
    .fcin,.planbar input{width:100%}
  }
  .canlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
  .canpill{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;
           border:1px solid var(--line);background:var(--surface-2);font-size:11.5px;
           font-family:var(--mono);color:var(--muted)}
  .canpill.part{border-color:color-mix(in srgb,var(--warn) 45%,transparent);
                background:var(--warn-soft);color:var(--warn)}
  .cntin{width:110px;text-align:right}
  /* A list of fifty materials does not need half the header to pick from. */
  #histWho{max-width:250px}
  #ckSku{max-width:280px}
  @media (max-width:820px){
    #prMoves .irow,#prLoss .irow,#prCount .irow{grid-template-columns:1fr}
    .cntin{width:100%}
  }
  .coaacts{flex-wrap:wrap;gap:8px}
  /* the sign-in mail tick on a new customer: it sends a real mail, so it reads like a sentence and wraps on a phone */
  .mailtick{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;cursor:pointer;margin:12px 0 0}
  .mailtick input{margin:2px 0 0;flex:none}
  .mailnote{margin:4px 0 0 21px;font-size:12.5px;color:var(--faint)}
  /* the seller's order form: the price and the % off are the customer's own — seen, not changed (H13) */
  .olrow .ta.lin[readonly]{background:var(--surface-2);color:var(--muted);cursor:default}
  /* a word by the field: what a form is missing, under the field itself (H5) */
  .fsay{margin:5px 0 0;font-size:12.5px;line-height:1.4;color:var(--crit)}
  .coashow{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--faint);
           white-space:nowrap;cursor:pointer}
  .coadoc{display:inline-flex;align-items:center;gap:6px}
  .coanote{flex-basis:100%;text-align:right;margin:0}
  @media (max-width:820px){
    .coanote{text-align:left}
    /* On a phone the row is one column, so the controls sit together and the
       note goes underneath rather than the button breaking over two lines. */
    .coaacts{align-items:center}
    .coaacts .btn.sm,.coaacts label.btn{white-space:nowrap}
  }
  @media (max-width:820px){
    #coaOil .irow,#coaProd .irow,#coaWait .irow{grid-template-columns:1fr}
  }

  /* the recipe editor — every cell on one line, inputs sized to their content */
  .rrow{display:grid;grid-template-columns:minmax(0,1fr) 72px 66px 70px 100px 94px 26px;gap:9px;
        align-items:center;padding:9px 18px;border-bottom:1px solid var(--line-soft)}
  .rrow:last-of-type{border-bottom:0}
  .rrow.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:11px;
             letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .rrow > div{min-width:0}
  .rrow .r{text-align:right;font-variant-numeric:tabular-nums;font-size:13.5px}
  .rrow .rin{padding:7px 9px;font-size:13.5px;min-width:0}
  .rrow select.rin{padding-right:24px;text-overflow:ellipsis}
  .rrow input.rin{text-align:right;font-family:var(--mono)}
  .rrow .delline{color:var(--crit);font-size:16px;line-height:1;padding:3px 5px}
  .rfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 18px;
         border-top:1px solid var(--line);background:var(--surface-2)}
  .rfoot .when{margin:0;flex:1;min-width:220px}

  .secline{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
           margin:4px 0 11px;padding-top:13px;border-top:1px solid var(--line-soft)}
  .three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px}
  /* the live arithmetic readout — this is the bit that has to be believable */
  .calcnote{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
            border-radius:8px;padding:11px 13px;margin:0 0 14px;font-size:13.5px;line-height:1.5}
  .calcnote .when{margin-top:3px}
  .calcnote .accentnum{color:var(--accent)}
  .calcnote.plain{background:var(--surface-2);border-color:var(--line)}
  .calcnote.shortwarn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 40%,transparent);margin-top:12px}
  .calcnote.shortwarn b{color:var(--warn)}
  .paidline{margin-top:14px;padding:12px 14px;border-radius:9px;background:var(--surface-2);
            border:1px solid var(--line);font-size:13.5px}
  .paidline .when{margin-top:3px}
  .paidline.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
  .paidline.ok b{color:var(--ok)}
  .paidline.crit{background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 30%,transparent)}
  .paidline.crit b{color:var(--crit)}
  .synchealth{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;padding:14px 18px;font-size:13.5px}
  .synchealth .dotted{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;align-self:center}
  .synchealth.stale .dotted{background:var(--warn)}
  /* ---- the seller's order form ---- */
  /* ---- the order document ----
     Three boxes side by side on a desk-sized screen, stacked on a phone.
     Everything is on the form at once: no field appears because another one
     was filled, because that is what makes a form feel like an interrogation. */
  .ogrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
         padding:4px 18px 14px}
  .ogrid.two{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0}
  .obox{border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
        padding:12px 13px}
  .obhead{display:flex;justify-content:space-between;align-items:center;gap:8px;
          flex-wrap:wrap;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
          color:var(--muted);font-weight:600;margin-bottom:9px}
  .obhead .when{text-transform:none;letter-spacing:0;font-weight:400}
  .samechk{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);
           text-transform:none;letter-spacing:0;font-weight:400;cursor:pointer}
  .osame{font-size:13px;color:var(--faint);padding:8px 0}
  .ofield{margin-bottom:8px;min-width:0}
  .ofield:last-child{margin-bottom:0}
  .ofield label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
                color:var(--faint);margin-bottom:3px}
  .ofield .ta{padding:8px 10px;font-size:13.5px}
  .ofield .when{margin-top:3px;font-size:11px}
  .orow2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  @media (max-width:980px){
    .ogrid,.ogrid.two{grid-template-columns:1fr}
  }

  .lhead{display:flex;justify-content:space-between;align-items:center;gap:12px;
         padding:11px 18px;background:var(--surface-2);
         border-top:1px solid var(--line);border-bottom:1px solid var(--line-soft);
         font-size:11px;letter-spacing:.08em;text-transform:uppercase;
         color:var(--muted);font-weight:600}
  .lhead .linkbtn{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500}

  .olrow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) 76px 104px 72px 104px 34px;
         gap:9px;align-items:start;padding:9px 18px;border-bottom:1px solid var(--line-soft)}
  .olrow.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:11px;
              letter-spacing:.08em;text-transform:uppercase;color:var(--faint);align-items:center}
  .olrow > div{min-width:0}
  .olrow .r{text-align:right;font-variant-numeric:tabular-nums}
  .olrow .lin{padding:7px 9px;font-size:13.5px}
  .olrow input.lin{text-align:right;font-family:var(--mono)}
  .olrow input[data-ld]{text-align:left;font-family:var(--sans)}
  .olrow select.lin{padding-right:22px;text-overflow:ellipsis}
  .olrow .when{margin-top:3px;font-size:11px}
  .olrow .offlist{color:var(--warn)}
  @media (max-width:900px){
    .olrow{grid-template-columns:1fr;gap:7px;padding:13px 16px}
    .olrow.head{display:none}
    .olrow .r{text-align:left;display:grid;grid-template-columns:104px 1fr;
              align-items:center;gap:10px}
    .olrow .r[data-lab]::before{content:attr(data-lab);font-size:11px;letter-spacing:.07em;
                                text-transform:uppercase;color:var(--faint)}
    .olrow input.lin{text-align:left}
    .olrow > div[data-lab="Product"]::before,
    .olrow > div[data-lab="Description"]::before{content:attr(data-lab);display:block;
      font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
      margin-bottom:3px}
  }

  /* the price list, as a sheet of paper in a box */
  .plwrap{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
  .pltab{width:100%;border-collapse:collapse;font-size:13px}
  .pltab th{position:sticky;top:0;background:var(--surface-2);text-align:right;
            font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
            font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
  .pltab th:first-child{text-align:left}
  .pltab td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--line-soft);
            font-family:var(--mono);font-size:12.5px}
  .pltab td:first-child{text-align:left;font-family:var(--sans);font-size:13px}
  .pltab tr.here td{background:var(--accent-soft)}

  /* ---- the VIES answer ----
     The comparison is a table because that is what it is: what we hold next
     to what the register holds, one row per field. */
  .viesbox{border:1px solid var(--line);border-left-width:3px;border-radius:9px;
           background:var(--surface-2);padding:12px 14px;margin:0 0 14px}
  .viesbox.ok{border-left-color:var(--ok)}
  .viesbox.warn{border-left-color:var(--warn)}
  .viesbox.crit{border-left-color:var(--crit)}
  .viesbox.none{border-left-color:var(--line)}
  .vhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;
         font-size:11px;letter-spacing:.08em;text-transform:uppercase;
         color:var(--muted);font-weight:600}
  .vhead .when{text-transform:none;letter-spacing:0;font-weight:400}
  .vmsg{font-size:13px;line-height:1.5;margin-bottom:10px}
  .vmsg.bad{background:var(--crit-soft);border:1px solid color-mix(in srgb,var(--crit) 30%,transparent);
            border-radius:7px;padding:10px 12px;color:var(--ink)}
  .vreg{padding:9px 0;border-top:1px solid var(--line-soft)}
  .vreglab{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  .vregname{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:2px 0 1px}
  .vcmp{margin:8px 0 10px;border:1px solid var(--line);border-radius:7px;overflow:hidden}
  .vcrow{display:grid;grid-template-columns:78px minmax(0,1fr) minmax(0,1fr) 108px;
         gap:10px;padding:7px 10px;font-size:12.5px;align-items:baseline;
         border-bottom:1px solid var(--line-soft)}
  .vcrow:last-child{border-bottom:0}
  .vcrow.head{background:var(--surface);font-size:10.5px;letter-spacing:.06em;
              text-transform:uppercase;color:var(--faint)}
  .vclab{color:var(--muted)}
  .vcours,.vcreg{min-width:0;overflow-wrap:break-word}
  .vcv{text-align:right;font-size:11.5px}
  .vcrow.ok .vcv{color:var(--ok)}
  .vcrow.bad{background:var(--crit-soft)}
  .vcrow.bad .vcv{color:var(--crit);font-weight:600}
  .vcrow.none .vcv{color:var(--faint)}
  .vproof{padding-top:9px;border-top:1px solid var(--line-soft);font-size:12.5px}
  .vlog{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft)}
  .vloglab{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
           color:var(--faint);margin-bottom:4px}
  .vlogrow{display:grid;grid-template-columns:90px 1fr auto;gap:10px;
           font-size:12px;color:var(--muted);padding:2px 0}
  .accvies{grid-column:1/-1;margin-top:10px}
  /* Three controls on an access row — check, grant, refuse — need more room
     than the two-button rows elsewhere, and must wrap rather than overlap. */
  #aAccList .adminrow{grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) 92px 150px 236px}
  #aAccList .adminrow .actions{flex-wrap:wrap;gap:6px}
  #aAccList .adminrow .btn{white-space:nowrap}
  @media (max-width:1100px){
    #aAccList .adminrow{grid-template-columns:1fr}
    #aAccList .adminrow .r{text-align:left}
    #aAccList .adminrow .actions{justify-content:flex-start}
  }
  @media (max-width:640px){
    .vcrow{grid-template-columns:70px minmax(0,1fr);gap:4px 10px}
    .vcrow .vcreg{grid-column:2}
    .vcrow .vcv{grid-column:2;text-align:left}
    .vcrow.head{display:none}
  }

  /* ---- money standing still ----
     A stat tile with a share bar under it. The four hues are a fixed
     categorical set, validated for colour-blind separation and contrast
     against both surfaces; every segment is labelled as well, so nothing
     depends on telling two colours apart. */
  :root{
    --h-fg:#C9184A; --h-raw:#068EA0; --h-comp:#B06A00; --h-pkg:#5350B8;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --h-fg:#EC5A87; --h-raw:#22A6B2; --h-comp:#BC8A22; --h-pkg:#847DE4;
    }
  }
  :root[data-theme="dark"]{
    --h-fg:#EC5A87; --h-raw:#22A6B2; --h-comp:#BC8A22; --h-pkg:#847DE4;
  }
  .h-fg{--hue:var(--h-fg)} .h-raw{--hue:var(--h-raw)}
  .h-comp{--hue:var(--h-comp)} .h-pkg{--hue:var(--h-pkg)}

  .stockdash{padding:18px}
  .sdtop{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;
         flex-wrap:wrap;margin-bottom:16px}
  .sdlab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .sdbig{font-family:var(--mono);font-size:38px;font-weight:600;letter-spacing:-.025em;
         line-height:1.1;margin:3px 0 4px;font-variant-numeric:tabular-nums}
  .sdside{display:flex;gap:22px;flex-wrap:wrap}
  .sdmini .lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .sdmini .v{font-family:var(--mono);font-size:19px;font-weight:600;margin-top:2px;
             font-variant-numeric:tabular-nums}
  .sdmini .when{max-width:22ch}

  /* 2px of surface between segments, so two fills never touch. */
  .sdbar{display:flex;gap:2px;height:14px;margin:0 0 14px;
         border-radius:7px;overflow:hidden;background:var(--surface-2)}
  .sdseg{background:var(--hue);min-width:3px}
  .sdseg:first-child{border-radius:7px 0 0 7px}
  .sdseg:last-child{border-radius:0 7px 7px 0}

  .sdkeys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
          gap:10px 18px}
  .sdkey{display:flex;gap:9px;align-items:flex-start;padding-top:9px;
         border-top:1px solid var(--line-soft)}
  .sdot{width:9px;height:9px;border-radius:3px;background:var(--hue);flex:none;margin-top:4px}
  .sdktext{flex:1;min-width:0}
  .sdkname{font-weight:600;font-size:13.5px}
  /* Values wear text tokens, never the series colour. */
  .sdkval{font-family:var(--mono);font-size:14px;font-weight:600;text-align:right;
          color:var(--ink);font-variant-numeric:tabular-nums}
  .sdkval .when{font-family:var(--sans);font-weight:400}
  @media (max-width:560px){
    .sdbig{font-size:30px}
    .sdside{gap:16px}
  }

  /* The sheet scrolls sideways rather than dropping columns: fifteen columns
     is what the sheet is, and a sheet missing one is a different sheet. */
  .sheetscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .shrow{display:grid;
         grid-template-columns:58px 104px 96px 92px 104px 96px 76px 132px 88px 88px 88px 96px 76px 100px 110px 84px 112px 132px 184px;
         gap:10px;align-items:baseline;padding:10px 18px;
         border-bottom:1px solid var(--line-soft);font-size:13px}
  .shrow:last-child{border-bottom:0}
  .shrow.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:10.5px;
              letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
              position:sticky;top:0;background:var(--surface-2);z-index:1}
  .shrow > div{min-width:0;overflow-wrap:anywhere}
  .shrow .r{text-align:right;font-variant-numeric:tabular-nums}
  .shrow .strong{font-weight:700}

  /* the older, narrower list */
  .blrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) 58px 104px 104px 92px 132px 84px;
         gap:10px;align-items:start;padding:11px 18px;border-bottom:1px solid var(--line-soft);
         font-size:13.5px}
  .blrow:last-child{border-bottom:0}
  .blrow.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:11px;
              letter-spacing:.08em;text-transform:uppercase;color:var(--faint);align-items:center}
  .blrow > div{min-width:0}
  .blrow .r{text-align:right;font-variant-numeric:tabular-nums}
  .blrow .when{margin-top:2px}
  @media (max-width:1080px){
    .blrow{grid-template-columns:1fr;gap:6px;padding:13px 16px}
    .blrow.head{display:none}
    .blrow .r{text-align:left;display:grid;grid-template-columns:104px 1fr;
              align-items:baseline;gap:10px}
    .blrow .r[data-lab]::before{content:attr(data-lab);font-size:11px;letter-spacing:.07em;
                                text-transform:uppercase;color:var(--faint)}
  }

  /* picking the number, on Make */
  /* The close-out is filled at the bench on a phone: two big numbers side by
     side on a desk, stacked and full width on a phone, and nothing else
     competing for the thumb. */
  .cbmain{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media (max-width:560px){ .cbmain{grid-template-columns:1fr} }
  .cbmain .ta.big{font-size:26px;padding:14px}
  .cbmore{margin:10px 0;border:1px solid var(--line);border-radius:9px;
          background:var(--surface-2)}
  .cbmore > summary{padding:11px 13px;cursor:pointer;font-size:13px;font-weight:600;
                    color:var(--muted);list-style:none}
  .cbmore > summary::-webkit-details-marker{display:none}
  .cbmore > summary::before{content:"\25b8 ";color:var(--faint)}
  .cbmore[open] > summary::before{content:"\25be "}
  .cbmore > *:not(summary){padding:0 13px 12px}

  .flagrow{display:flex;gap:18px;flex-wrap:wrap;padding:8px 0 4px;font-size:13.5px}
  .flagrow label{display:flex;align-items:center;gap:7px;cursor:pointer}

  .bnpick{margin-top:14px}
  .bnpick label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
                color:var(--faint);margin-bottom:3px}
  .bnpick .ta{font-family:var(--mono);font-size:14px}
  .bnpick .when{margin-top:4px}

  /* Every admin table collapses to labelled cards on a phone. Without this a
     long email address pushes a five-column grid past the screen edge, and
     the whole page scrolls sideways. */
  @media (max-width:820px){
    .adminrow{grid-template-columns:1fr;gap:6px;padding:13px 14px}
    .adminrow.head{display:none}
    .adminrow .r{text-align:left}
    .adminrow .actions{justify-content:flex-start;flex-wrap:wrap}
  }
  /* An address with no spaces in it must break, not stretch its column. */
  .adminrow > div{min-width:0;overflow-wrap:anywhere}

  .vattodo{display:flex;gap:14px;align-items:center;justify-content:space-between;
           flex-wrap:wrap;margin:0 18px 14px;padding:12px 14px;border-radius:9px;
           background:var(--warn-soft);
           border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);font-size:13.5px}
  .vattodo.ok{background:var(--ok-soft);
              border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
  .vattodo .vtbody{flex:1;min-width:240px;line-height:1.5}
  .vattodo b{color:var(--warn)}
  .vattodo.ok b{color:var(--ok)}
  /* how many customers use the portal: a line to read, not a tool */
  .portaluse{display:flex;gap:4px 14px;flex-wrap:wrap;align-items:baseline;margin:12px 18px 10px;font-size:13.5px}
  .portaluse b{font-size:16px;font-variant-numeric:tabular-nums}

  .ordtop{padding:16px 18px 0}
  .ordtop .frow label{margin-bottom:2px}
  .combo{position:relative;max-width:420px}
  .combolist{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:25;max-height:290px;
             overflow:auto;background:var(--surface);border:1px solid var(--line);
             border-radius:9px;box-shadow:var(--shadow)}
  .comborow{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;appearance:none;
            border:0;border-bottom:1px solid var(--line-soft);background:none;color:inherit;
            font:inherit;padding:10px 13px;cursor:pointer}
  .comborow:last-child{border-bottom:0}
  .comborow:hover,.comborow:focus-visible{background:var(--surface-2);outline:none}
  .comborow .cn{font-weight:500;font-size:14px}
  .picked{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:13px 0 16px}
  .picked .pname{font-size:16px;font-weight:600;letter-spacing:-.01em}
  .picked .linkbtn{margin-left:auto}

  .lrow{display:grid;grid-template-columns:28px minmax(0,1fr) 92px 96px 110px 32px;gap:10px;
        align-items:center;padding:9px 18px;border-bottom:1px solid var(--line-soft)}
  .lrow.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:11px;
             letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .lrow .r{text-align:right;font-variant-numeric:tabular-nums}
  .lrow .lno{font-family:var(--mono);font-size:12.5px;color:var(--faint)}
  .lrow .lin{padding:8px 10px;font-size:14px}
  .lrow input.lin{text-align:right;font-family:var(--mono)}
  .lrow input.lin:disabled{background:var(--surface-2);border-style:dashed}
  .lrow .lcell{font-size:13.5px}
  .ltot{padding:16px 18px;background:var(--surface-2);border-top:1px solid var(--line)}
  .ltot .osum{max-width:360px;margin-left:auto}
  .lacts{display:flex;gap:12px;align-items:center;justify-content:flex-end;
         flex-wrap:wrap;margin-top:14px}
  .donebox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
           box-shadow:var(--shadow);padding:34px 22px;text-align:center}
  .donet{margin:0 0 6px;font-size:22px;letter-spacing:-.02em}
  .callrow{display:flex;gap:14px;align-items:center;justify-content:space-between;
           padding:13px 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
  .callrow:last-child{border-bottom:0}
  .mkbody{padding:16px 18px 6px;border-bottom:1px solid var(--line-soft)}
  /* ---- making a batch, as five steps ----
     The work has an order: you decide the product, you check the formula
     against the oil that is actually in the drum, you say how many, you look
     at what comes off the shelf, and only then does anything get created. The
     screen says so out loud, because an operator who has to remember the order
     will one day remember it wrong. */
  .steps4{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:14px}
  .st{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:var(--radius);
      border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);
      cursor:pointer;text-align:left;font:inherit;color:inherit;min-width:0;
      transition:border-color .12s ease,background .12s ease}
  .st:hover{border-color:var(--faint)}
  .st:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .stn{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
       font-family:var(--mono);font-size:11px;font-weight:600;
       background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
  .st .stt{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
  .st .stw{display:block;font-size:11.5px;color:var(--faint);margin-top:2px;line-height:1.35;
           overflow-wrap:anywhere}
  .st.done .stn{background:var(--ok-fill);border-color:var(--ok-fill);color:#fff}
  .st.done .stn::before{content:"\2713"}
  .st.done .stn span{display:none}
  .st.now{border-color:var(--accent);background:var(--accent-soft)}
  .st.now .stn{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff}
  .st.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-soft)}
  .st.warn .stn{background:var(--warn-fill);border-color:var(--warn-fill);color:#fff}
  @media (max-width:980px){
    .steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:520px){
    .steps4{grid-template-columns:1fr;gap:6px}
    .st{padding:9px 11px}
  }
  /* The step number sits in the panel heading, so a panel says which step it
     is without a separate label above it. */
  .phead h2 .stepn,.costhead .stepn{display:inline-grid;place-items:center;width:19px;height:19px;
                   border-radius:50%;background:var(--accent-fill);color:#fff;
                   font-family:var(--mono);font-size:10.5px;font-weight:600;
                   margin-right:7px;vertical-align:-3px;letter-spacing:0}
  .phead.mid{border-top:1px solid var(--line-soft)}
  #mkStd:not(:empty){padding:14px 18px 0}
  /* ---- the material list, grouped ---- */
  .mkg{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 18px;
       background:var(--surface-2);border-bottom:1px solid var(--line-soft);
       border-top:1px solid var(--line-soft)}
  .mkg:first-child{border-top:0}
  .mkgn{flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
        font-family:var(--mono);font-size:10.5px;font-weight:600;
        background:var(--ink);color:var(--surface)}
  .mkgname{font-weight:600;font-size:13.5px}
  .mkgsub{font-size:12px;color:var(--faint)}
  .mkgtot{margin-left:auto;font-family:var(--mono);font-size:12.5px;font-weight:600;
          white-space:nowrap}
  .mkgtot .when{display:inline;margin:0 0 0 8px;font-family:var(--sans)}
  @media (min-width:821px){
    #mkUses .irow{grid-template-columns:minmax(0,1fr) 104px 118px 118px 118px 96px}
    #mkUses .irow.head{white-space:nowrap}
  }
  @media (max-width:560px){
    .mkgtot{margin-left:0;width:100%}
  }
  .mkacts{display:grid;gap:8px;margin-top:14px}
  /* ---- the formula, as a digest ----
     Read-only on purpose: this screen follows the standard, it does not set
     it. The per-pod grams live on the Formula tab, where they can be changed;
     printing them here as well only invited somebody to read the wrong one. */
  .fdigest{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
           padding:11px 13px;border:1px solid var(--line);border-radius:9px;
           background:var(--surface-2);margin-bottom:10px}
  .fdname{font-weight:600;font-size:14px;letter-spacing:-.01em}
  .fdnums{display:flex;flex-wrap:wrap;gap:6px 14px;margin-left:auto;
          font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
  .fdnums span b{font-weight:600}
  .fdnums .lab{font-family:var(--sans);color:var(--faint);font-size:11px;
               letter-spacing:.06em;text-transform:uppercase;margin-right:5px}
  .fdlock{font-size:11.5px;color:var(--faint);width:100%}
  /* v89.31 (task 47 step 2): the oils a run takes, each picked by its % */
  .mkoils{margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--line)}
  .mkoilhead{margin-bottom:6px}
  .mkoil{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:5px 0}
  .mkoil .mkoilname{flex:1 1 180px;min-width:0}
  .mkoil .mkoilpick{flex:0 1 auto;font-size:12.5px}
  .mkoil .mkoilpick select{min-width:220px;max-width:100%}
  @media (max-width:640px){ .mkoil .mkoilpick{flex:1 1 100%} .mkoil .mkoilpick select{width:100%;min-width:0} }
  /* ---- the two blocks a run comes in ---- */
  .mksec{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 18px 10px;
         border-top:1px solid var(--line);background:var(--surface)}
  .mksec:first-child{border-top:0}
  .mksec .sname{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
  .mksec.key .sname{color:var(--accent)}
  .mksec .smeta{font-size:12.5px;color:var(--faint)}
  .mksec .stot{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:600}
  /* The number the bench weighs out. It is the answer to the question this
     screen exists to ask, so it is the biggest thing in the row. */
  #mkUses .runqty{font-size:16px;font-weight:600}
  #mkUses .irow.key .runqty{color:var(--accent)}
  @media (min-width:821px){
    #mkUses .irow{grid-template-columns:minmax(0,1fr) 140px 128px 128px 104px}
    #mkUses .irow.head{white-space:nowrap}
    /* Three controls on a draft row need room to sit on one line, the same
       way the product list gets it. */
    /* Three buttons on one line, or they wrap and the row reads as broken.
       Measured against the widest of them, not guessed. */
    #prDrafts .irow{grid-template-columns:minmax(0,1fr) 80px 96px 92px 296px}
    #prDrafts .irow .btn{white-space:nowrap}
  }
  #prDrafts .actions{gap:7px;flex-wrap:wrap}
  @media (max-width:820px){
    /* One column turns every labelled cell into a two-column grid, which
       stacks three buttons into three rows and makes Discard the biggest
       thing on the card. The label takes its own line and the buttons sit
       together, the way they do on the desk. */
    #prDrafts .irow .actions[data-lab]{display:flex;flex-wrap:wrap;gap:8px}
    #prDrafts .irow .actions[data-lab]::before{width:100%}
    #prDrafts .irow .actions .btn{flex:0 0 auto}
  }
  .mkbody .frow{margin-bottom:10px;max-width:260px}
  .ta.big{font-family:var(--mono);font-size:22px;font-weight:600;padding:12px 14px;
          font-variant-numeric:tabular-nums}
  .mkquick{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
  .mkquick .qk{font-family:var(--mono)}
  .btn.wide{width:100%;padding:13px 20px}
  .lowqty{color:var(--crit);font-weight:600}
  .midqty{color:var(--warn);font-weight:600}
  .goodnum{color:var(--ok)}
  .costhead{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .bigcost{font-family:var(--mono);font-size:34px;font-weight:600;letter-spacing:-.02em;margin-top:4px}
  .prodgrid{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:14px;align-items:start}
  /* Below this the recipe row would squeeze the material name into nothing,
     so the cost card goes underneath instead of beside. */
  @media (max-width:1120px){ .prodgrid{grid-template-columns:1fr} }
  .prodgrid > .panel{margin-bottom:0}
  .costcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
            box-shadow:var(--shadow);padding:18px}
  .seedwarn{margin-bottom:14px}
  .recsel{display:flex;align-items:center;gap:9px}
  .recsel select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;
                 background:var(--surface);color:var(--ink);font:inherit;font-size:13px;max-width:210px}

  @media (max-width:820px){
    /* Header rows are gone at this width, so each number carries the header's
       own word beside it. One column, label left, value right. */
    .irow .r[data-lab],.irow .actions[data-lab]{display:grid;grid-template-columns:104px 1fr;
                                                align-items:center;gap:10px}
    .irow .r[data-lab]::before,.irow .actions[data-lab]::before{
      content:attr(data-lab);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
    .irow.lotrow > .r:empty{display:none}   /* a delivery's line has no use per day or cover of its own (v89.30) */
    .row{grid-template-columns:1fr 1fr;grid-template-areas:"p p" "pr sr" "q q";gap:9px}
    .row .prod{grid-area:p}.row .price{grid-area:pr;text-align:left}.row .srp{grid-area:sr}.row .qty{grid-area:q;justify-content:flex-start}
    .filterbar{gap:9px}.fgroup button{padding:7px 11px;font-size:12.5px}
    .row.head{display:none}
    .listrow,.adminrow{grid-template-columns:1fr 1fr;gap:8px}
    .listrow.docrow{grid-template-columns:1fr}
    .listrow.docrow .c4{text-align:left}
    .irow{grid-template-columns:1fr;gap:7px;padding:13px 16px}
    .irow.audrow{grid-template-columns:1fr;gap:4px}
    .irow.fgcnt,.irow.fgmv{grid-template-columns:1fr;gap:4px}
    .listrow.head,.adminrow.head,.irow.head{display:none}
    .listrow .r,.adminrow .r,.irow .r{text-align:left}
    .pillwrap,.adminrow .actions,.irow .actions{justify-content:flex-start}
    .prodgrid{grid-template-columns:1fr}
    /* The line table becomes one labelled card per line. */
    .lrow{grid-template-columns:1fr;gap:7px;padding:13px 16px}
    .lrow.head{display:none}
    .lrow .lno{display:none}
    .lrow .r{text-align:left;display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px}
    .lrow .r[data-lab]::before{content:attr(data-lab);font-size:11px;letter-spacing:.07em;
                               text-transform:uppercase;color:var(--faint)}
    .lrow input.lin{text-align:left}
    .lrow .r:last-child{grid-template-columns:96px 1fr}
    .ltot .osum{max-width:none}
    .lacts{justify-content:stretch}
    .lacts .btn{flex:1}
    /* The recipe stops being a table and becomes one labelled card per line.
       Without the header row the three number boxes are unguessable, so each
       one carries its own label on a phone. */
    .rrow{grid-template-columns:1fr;gap:7px;padding:13px 16px}
    .rrow.head{display:none}
    .rrow .r{text-align:left;display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px}
    .rrow .r::before{content:attr(data-lab);font-size:11px;letter-spacing:.07em;
                     text-transform:uppercase;color:var(--faint)}
    .rrow input.rin{text-align:left}
    .rrow .r:last-child{grid-template-columns:96px 1fr}
    .rrow .r:last-child::before{content:"Remove"}
    .rrow .delline{justify-self:start}
    .rfoot{padding:13px 16px}
    .prow{grid-template-columns:1fr 1fr;gap:6px}
    .prow.head{display:none}
    .sum .val.total{font-size:18px}
  }
  @media (max-width:640px){
    .wrap{padding-left:12px;padding-right:12px}
    .cards{padding:12px;gap:12px}
    .card .cthumb{width:112px;padding:12px 12px 12px 0}
    .card.wide .cthumb{width:124px}
    .card .ctop{padding:12px 13px 10px}
    .card .cbot{padding:9px 13px}
    .card .cname{font-size:16px}
    .card.wide .cname{font-size:17px}
    .filterbar{flex-direction:column;align-items:stretch;padding:12px}
    .fgroup{width:100%;flex-wrap:wrap;gap:1px;background:var(--line)}
    .fgroup button{flex:1 1 auto;padding:9px 8px;font-size:12px;white-space:nowrap;line-height:1.2;border-right:0;background:var(--surface)}
    .hero{padding:20px 16px 18px}
    .hero .claim{font-size:19px}
    .specpanel{padding:16px}
    .demo{flex-direction:column;align-items:stretch}
    /* Gap-as-border: works for any number of buttons, so adding a view
       later can never leave a stray line hanging in the wrong place. */
    .demo .seg{width:100%;display:grid;grid-template-columns:1fr 1fr;
               gap:1px;background:var(--line)}
    .demo .seg button{padding:9px 6px;font-size:12.5px;background:var(--surface)}
    .demo .seg button[aria-pressed="true"]{background:var(--accent-fill)}
    .demo .seg button:last-child:nth-child(odd){grid-column:1/-1}
    header.bar{padding:14px}
    .brandlogo{height:32px}
    /* discount pinned left, the account controls pinned right */
    .acct{width:100%;gap:10px}
    .tierbadge{border-right:0;padding-right:0}
    /* three tabs have to fit on one line at 390px */
    nav.tabs button{padding:9px 11px;font-size:14px}
    nav.tabs .count{margin-left:5px}
    .cartbar .inner{padding:10px 12px;gap:12px}
    .sums{gap:14px;flex:1}
    .sum .lab{font-size:10px}
    .sum .val{font-size:14px}
    .cartbar .btn{width:100%}
    .kpis{grid-template-columns:1fr 1fr}
  }
  @media (max-width:380px){
    .sums{gap:10px}
    .kpis{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  /* ---- v13 additions ---- */
  .tiersave{margin-top:9px;font-size:13px;color:var(--ok);font-weight:500}
  .tiersave strong{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .toastwrap{position:fixed;left:50%;transform:translateX(-50%);bottom:104px;z-index:60;display:flex;
             flex-direction:column;gap:8px;align-items:center;pointer-events:none}
  @media (min-width:900px){
    .toastwrap{left:auto;right:18px;transform:none;bottom:96px;align-items:flex-end}
  }
  .toast{background:var(--ink);color:var(--ground);padding:11px 17px;border-radius:9px;font-size:13.5px;
         box-shadow:0 10px 30px -12px rgba(0,0,0,.6);max-width:min(560px,calc(100vw - 28px));
         opacity:1;transform:translateY(0);transition:opacity .25s ease,transform .25s ease}
  .toast b{font-weight:600}
  .toast.out{opacity:0;transform:translateY(8px)}
  .toast.ok{background:var(--ok-fill);color:#fff}
  .toast.warn{background:var(--warn-fill);color:#fff}
  .clickrow{cursor:pointer}
  .clickrow:hover{background:var(--surface-2)}
  .clickrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  button.dl{appearance:none;background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
            font-family:var(--mono);font-size:12.5px;color:var(--accent);cursor:pointer;padding:0}
  button.dl:hover{border-bottom-color:var(--accent)}
  .frow{display:grid;gap:5px;margin-bottom:13px}
  .frow label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  select.ta{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238794A1' fill='none' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  @media (max-width:520px){ .two{grid-template-columns:1fr} }
  .notif .nhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .nitem .ni.new{background:var(--ok-soft);color:var(--ok)}
  .tieredit{display:grid;grid-template-columns:78px 1fr 1fr;gap:10px;align-items:center;margin-bottom:9px}
  .tieredit.head{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
  .tieredit .tl{font-size:13.5px;color:var(--muted)}
  .modal.wide{max-width:600px}
  .credbox{font-family:var(--mono);font-size:13px;background:var(--surface-2);border:1px dashed var(--line);
           border-radius:9px;padding:13px 15px;display:grid;gap:5px}
  .credbox .ck{display:inline-block;min-width:170px;color:var(--faint);font-family:var(--sans);font-size:12px;
               letter-spacing:.05em;text-transform:uppercase}
  .setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:0 18px;padding:16px 18px}
  .dnsrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 18px 16px}

  .iconbtn{appearance:none;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);
           background:var(--surface);color:var(--muted);font-size:15px;cursor:pointer;line-height:1;
           display:grid;place-items:center}
  .iconbtn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--faint)}
  .iconbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  /* the avatar IS the way into the account — with the words under it, so nobody has to guess */
  .acctbtn{appearance:none;background:none;border:0;padding:2px 4px;cursor:pointer;
           display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:10px}
  .acctbtn:hover .avatar{border-color:var(--accent-fill);background:var(--accent-fill)}
  .acctbtn:hover .avatar{color:#fff}
  .acctbtn:hover .acctcap{color:var(--accent)}
  .acctbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .acctgroup{display:flex;align-items:center;gap:12px;margin-left:auto}
  .acctcap{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
           color:var(--faint);white-space:nowrap;transition:color .15s ease}
  .acctbtn[aria-selected="true"] .avatar{background:var(--accent-fill);color:#fff;border-color:var(--accent-fill)}
  .acctbtn[aria-selected="true"] .acctcap{color:var(--accent);font-weight:600}
  .acctbtn .avatar{transition:background .15s ease,color .15s ease,border-color .15s ease}
  .pheadbtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .choicebar{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;
             background:var(--surface);margin-bottom:20px}
  .choicebar button{flex:1;appearance:none;background:none;border:0;border-right:1px solid var(--line);
                    font:inherit;font-size:13.5px;font-weight:500;color:var(--muted);padding:10px 12px;cursor:pointer}
  .choicebar button:last-child{border-right:0}
  .choicebar button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
  .backlink{appearance:none;background:none;border:0;font:inherit;font-size:13px;color:var(--accent);
            cursor:pointer;padding:6px 0;margin-bottom:6px}
  .backlink:hover{text-decoration:underline}
  .demonote{margin-top:14px;padding:12px 15px;border:1px dashed var(--line);border-radius:9px;
            background:var(--surface-2);font-size:12.5px;color:var(--muted);line-height:1.55}
  .demonote b{color:var(--ink)}

  /* VAT gate */
  .gate{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--crit-soft);
        border:1px solid color-mix(in srgb,var(--crit) 38%,transparent);border-radius:var(--radius);
        padding:15px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
  /* a class that sets display beats the browser's own [hidden] rule, so restate it */
  .gate[hidden]{display:none}
  .gate .gicon{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
               background:var(--crit-fill);color:#fff;font-weight:700;font-size:16px}
  .gate .gbody{flex:1;min-width:220px}
  .gate .gt{font-weight:600;font-size:15px;margin-bottom:3px}
  .gate .gw{font-size:13px;color:var(--muted);line-height:1.5;max-width:74ch}
  .vatpill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;
           padding:2px 8px;border-radius:5px;border:1px solid;margin-left:8px;vertical-align:middle}
  .vatpill.ok{color:var(--ok);background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
  .vatpill.bad{color:var(--crit);background:var(--crit-soft);border-color:color-mix(in srgb,var(--crit) 28%,transparent)}
  .vatpill.warn{color:var(--warn);background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
  .money-in{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
  .money-in .cur{padding:0 10px;color:var(--faint);font-family:var(--mono);font-size:14px}
  .money-in input{flex:1;border:0;background:none;color:var(--ink);font:inherit;
                  font-family:var(--mono);font-size:14px;padding:10px 12px 10px 0;min-width:0}
  .money-in input:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:6px}
  .srow .soft{font-size:13px;color:var(--muted);font-family:var(--sans)}

  /* public request-access view */
  .pub{max-width:640px;margin:0 auto}
  .pubcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px 26px;box-shadow:var(--shadow)}
  .pubcard.center{text-align:center}
  .pubcard h1{margin:0 0 8px;font-size:25px;letter-spacing:-.02em;text-wrap:balance}
  .pubcard .lead{margin:0 0 20px;color:var(--muted);font-size:14.5px;line-height:1.55}
  .publogo img{width:min(190px,58vw);height:auto;display:block;margin-bottom:20px}
  .pubcard.center .publogo img{margin-inline:auto}
  /* the logo is a lockup on white (brand: visual-language.md): on a dark screen it keeps its white plate, or its black
     "CBD" sinks into the card — the sign-in page and the portal's header alike (hunt H8, 2026-10-29) */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .publogo img{background:#fff;padding:10px 14px;border-radius:12px}
    :root:not([data-theme="light"]) .brandlogo{background:#fff;box-sizing:content-box;padding:4px 8px;border-radius:8px}
  }
  :root[data-theme="dark"] .publogo img{background:#fff;padding:10px 14px;border-radius:12px}
  :root[data-theme="dark"] .brandlogo{background:#fff;box-sizing:content-box;padding:4px 8px;border-radius:8px}
  .btn.wide{width:100%;padding:13px 20px;margin-top:6px}
  .cons{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted);margin:4px 0 16px;cursor:pointer}
  .cons input{margin-top:3px;flex:none}
  .cons .u{text-decoration:underline;text-underline-offset:2px}
  .fineprint{font-size:12px;color:var(--faint);margin:14px 0 0;line-height:1.5}
  .tickbig{width:58px;height:58px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
           font-size:27px;background:var(--accent-soft);color:var(--accent)}
  .tickbig.ok{background:var(--ok-soft);color:var(--ok)}
  .meter{height:5px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line-soft);overflow:hidden;margin-top:2px}
  .mfill{height:100%;width:0;border-radius:20px;transition:width .25s ease;background:var(--crit)}
  .mfill.mid{background:var(--warn)} .mfill.good{background:var(--ok)}
  .mlab{font-size:12px;color:var(--muted);margin:5px 0 14px;min-height:16px}
  /* ---- signing in ---- */
  .devpick{margin-top:18px;padding-top:15px;border-top:1px solid var(--line-soft);
           display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .devpick .lab{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);
                width:100%;margin-bottom:2px}
  .codein{text-align:center;font-size:24px;letter-spacing:.34em;padding-block:13px}
  .pacts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
  .qrbox{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px 0 2px}
  /* Not a real QR — a stand-in that reads as one at a glance. The three
     corner squares are what the eye actually uses to recognise the thing. */
  .qrfake{position:relative;width:132px;height:132px;flex:none;border-radius:6px;
          border:1px solid var(--line);background:#fff;overflow:hidden;
          background-image:
            linear-gradient(90deg,#1a1a1a 25%,transparent 0 50%,#1a1a1a 0 62%,transparent 0),
            linear-gradient(#1a1a1a 18%,transparent 0 34%,#1a1a1a 0 46%,transparent 0 68%,#1a1a1a 0 80%,transparent 0);
          background-size:11px 11px;background-blend-mode:multiply}
  .qrfake i{position:absolute;width:20px;height:20px;border:5px solid #1a1a1a;background:#fff}
  .qrfake i::after{content:"";position:absolute;inset:3px;background:#1a1a1a}
  .qrfake i:nth-child(1){top:8px;left:8px}
  .qrfake i:nth-child(2){top:8px;right:8px}
  .qrfake i:nth-child(3){bottom:8px;left:8px}
  .qrside{min-width:min(230px,100%);flex:1}
  .qrside .lab{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
  .bkcodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:14px 0 4px}
  .bkcodes span{font-family:var(--mono);font-size:14px;text-align:center;padding:9px 6px;
                border:1px dashed var(--line);border-radius:7px;background:var(--surface-2)}
  /* ---- rewards ---- */
  .rewtop{padding:20px 18px 22px}
  .bigpts{font-family:var(--mono);font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;
          font-variant-numeric:tabular-nums}
  .bigpts .u{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;
             color:var(--faint);margin-left:10px}
  .merchgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(232px,100%),1fr));
             gap:14px;padding:16px 18px}
  .mcard{border:1px solid var(--line);border-radius:10px;background:var(--surface);
         display:flex;flex-direction:column;overflow:hidden}
  .mcard.dim{opacity:.62}
  .mthumb{height:110px;display:grid;place-items:center;font-size:34px;color:var(--faint);
          background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
  .mthumb.wear{color:color-mix(in srgb,var(--accent) 55%,var(--faint))}
  .mname{font-weight:600;font-size:15px;letter-spacing:-.01em;padding:12px 14px 2px}
  .mnote{font-size:12.5px;color:var(--muted);padding:0 14px 12px;flex:1}
  .mbot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
        padding:10px 14px;border-top:1px solid var(--line-soft);background:var(--surface-2)}
  .mpts{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
  .field .fnote.goodnum{color:var(--ok);font-weight:600;font-family:var(--mono)}
  /* ---- the announcement every customer sees ---- */
  .annbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:14px 0 0;
          background:linear-gradient(100deg,var(--accent-soft),var(--surface) 78%);
          border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
          border-radius:var(--radius);padding:14px 17px;box-shadow:var(--shadow)}
  .annic{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
         background:var(--accent-fill);color:#fff;font-size:15px}
  .annbody{flex:1;min-width:200px}
  .annt{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
  .annw{font-size:13.5px;color:var(--muted);margin-top:3px;max-width:76ch}
  .cdown{flex:none;text-align:center;padding-left:16px;
         border-left:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
  .cdn{font-family:var(--mono);font-size:27px;font-weight:600;line-height:1;color:var(--accent);
       font-variant-numeric:tabular-nums}
  .cdl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:3px}
  .prevwrap{padding:0 18px 18px}
  .prevlab{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
  .prevwrap .annbar{margin-top:6px}
  .swrow{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);cursor:pointer}
  /* Off / Campaign / Always on. Three real choices, so three cards rather than
     a dropdown — the consequence of each is the part that needs reading. */
  .modewrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr));
            gap:12px;padding:16px 18px}
  .modecard{appearance:none;text-align:left;background:var(--surface);border:1px solid var(--line);
            border-radius:10px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--ink);
            display:flex;flex-direction:column;gap:4px}
  .modecard:hover{border-color:var(--faint);background:var(--surface-2)}
  .modecard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .modecard.on{border-color:var(--accent);background:var(--accent-soft);
               box-shadow:0 0 0 1px var(--accent) inset}
  .mcn{font-weight:600;font-size:15px;letter-spacing:-.01em}
  .mcs{font-size:12.5px;color:var(--muted);line-height:1.45}
  .modecard.on .mcs{color:var(--ink)}
  .supin{max-width:104px;padding:7px 9px;font-family:var(--mono);font-size:13.5px;text-align:right}
  #aPrdSwitch .fgroup button .count{margin-left:6px}
  #aPrdSwitch{gap:10px}
  #slCliSwitch{gap:10px}
  /* ---- the material card ---- */
  .matgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
           gap:12px;padding:16px 18px}
  .matcard{border:1px solid var(--line);border-radius:10px;background:var(--surface);
           display:flex;flex-direction:column;overflow:hidden}
  .matcard.low{border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
  .mchead{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;
          padding:13px 15px 11px}
  .mcname{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
  /* Four numbers do not fit across a 330px card without wrapping into
     nonsense, so they wrap in pairs on purpose rather than by accident. */
  .mcnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(128px,100%),1fr));
          gap:10px 12px;padding:0 15px 12px}
  .mcn .lab{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  .mcn .v{font-family:var(--mono);font-size:13.5px;font-weight:600;margin-top:2px;
          font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
  .mcfoot{padding:11px 15px;border-top:1px solid var(--line-soft);background:var(--surface-2);
          display:grid;gap:9px}
  .mcprice{font-size:12.5px;color:var(--muted)}
  .mcreorder{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
  .mcreorder label{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  .mcreorder .supin{max-width:88px}
  .matcard.low .mcreorder .supin{border-color:var(--warn);background:var(--warn-soft)}
  .mcacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:11px 15px;
          border-top:1px solid var(--line-soft)}
  .mcacts .linkbtn{margin-left:auto}
  .mcacts .btn.sm{padding:7px 11px}
  /* ---- the formula sheet ----
     Laid out as columns so the arithmetic reads left to right: what you pour,
     divided by density, times purity, equals active. A person who has used a
     spreadsheet can check it without being taught how. */
  .mixwrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:4px}
  .mixrow{display:grid;grid-template-columns:minmax(0,1fr) 118px 88px 96px 104px 100px 30px;
          gap:10px;align-items:center;padding:9px 18px;border-bottom:1px solid var(--line-soft)}
  .mixrow:last-child{border-bottom:0}
  .mixrow.head{padding-block:9px;border-bottom:1px solid var(--line);font-size:11px;
               letter-spacing:.07em;text-transform:uppercase;color:var(--faint);background:var(--surface-2)}
  .mixrow.total{background:var(--surface-2);font-size:14px}
  .mixrow .r{text-align:right;font-variant-numeric:tabular-nums;display:flex;
             align-items:center;justify-content:flex-end;gap:5px}
  .mixrow.head .r{display:block}
  .mixin{padding:7px 9px;font-family:var(--mono);font-size:13.5px;text-align:right;min-width:0}
  .mixu{font-size:11.5px;color:var(--faint);flex:none}
  .mixadd{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:12px 18px}
  .mixadd .when{flex:1;min-width:240px}

  /* Two constraints, side by side, because the remedy for each is different. */
  .mixchecks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
             gap:12px;padding:4px 18px 0}
  .mixcheck{border:1px solid var(--line);border-radius:9px;padding:12px 14px;background:var(--surface-2)}
  .mixcheck.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:var(--ok-soft)}
  .mixcheck.warn{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-soft)}
  .mixcheck.bad{border-color:color-mix(in srgb,var(--crit) 45%,transparent);background:var(--crit-soft)}
  .mixcheck .lab{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .mixcheck .v{font-family:var(--mono);font-size:19px;font-weight:600;margin-top:3px;
               font-variant-numeric:tabular-nums}
  .mixcheck .n{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
  .mixcheck.ok .v{color:var(--ok)} .mixcheck.bad .v{color:var(--crit)} .mixcheck.warn .v{color:var(--warn)}

  .mixacts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 18px 4px}
  .mixacts .when{flex:1;min-width:240px}
  .mixsign{margin:14px 18px;padding:13px 15px;border:1px dashed var(--line);border-radius:9px;
           background:var(--surface-2)}
  .mixsign.done{border-style:solid;border-color:color-mix(in srgb,var(--ok) 40%,transparent);
                background:var(--ok-soft)}
  .mixsign .when{margin-top:6px}

  @media (max-width:900px){
    /* One labelled card per ingredient. The column headers are gone, so each
       number says what it is — otherwise four boxes in a row are a riddle. */
    .mixrow{grid-template-columns:1fr;gap:7px;padding:13px 16px}
    .mixrow.head{display:none}
    .mixrow .r{justify-content:flex-start;display:grid;
               grid-template-columns:116px 1fr auto;align-items:center;gap:10px}
    .mixrow .r::before{content:attr(data-lab);font-size:11px;letter-spacing:.07em;
                       text-transform:uppercase;color:var(--faint)}
    .mixin{text-align:left}
    .mixacts,.mixchecks{padding-inline:16px}
  }
  @media (max-width:640px){
    .matgrid{padding:12px;gap:12px}
    .mcnums{grid-template-columns:1fr 1fr}
  }
  #slCliSwitch .fgroup button .count{margin-left:6px}
  /* ---- the CRM: segments are standing questions with a live count ---- */
  .segs{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 14px;
        border-bottom:1px solid var(--line-soft)}
  /* `display:flex` beats the hidden attribute, and a chip row standing over a
     list it does not filter is worse than no chips at all. */
  .segs[hidden]{display:none}
  .segchip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
           border:1px solid var(--line);background:var(--surface);color:var(--muted);
           font:inherit;font-size:12.5px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;
           transition:background .12s,border-color .12s,color .12s}
  .segchip:hover{border-color:var(--faint);color:var(--ink)}
  .segchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .segchip .segn{font-family:var(--mono);font-size:11.5px;font-weight:600;padding:2px 6px;
                 border-radius:999px;background:var(--surface-2);color:var(--muted);
                 font-variant-numeric:tabular-nums}
  .segchip.hot .segn{background:var(--crit-soft);color:var(--crit)}
  .segchip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
  .segchip.on .segn{background:var(--accent-fill);color:#fff}
  .segbar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;
          padding:13px 18px;background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
  .segwhat{font-size:12.5px;color:var(--muted);min-width:190px;max-width:420px}
  .segwhat b{color:var(--ink)}
  .segstats{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}
  .segstats b{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
  .segstats .owed b{color:var(--crit)}
  .segacts{display:flex;gap:8px;flex-wrap:wrap}
  /* A link shaped like a button is a button to the eye; the underline gives
     the game away and makes it look like a mistake. */
  a.btn{text-decoration:none}
  .stagerow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
  /* ---- tags ----
     The seller's own shorthand. Small, quiet, and removable in one press —
     a tag nobody can take off is a tag nobody dares put on. */
  .tagrow{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:12px}
  .tagchip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;
           border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
           font-size:12.5px;color:var(--ink)}
  .tagchip .tagx{appearance:none;border:0;background:none;cursor:pointer;color:var(--faint);
                 font-size:14px;line-height:1;padding:0 3px;border-radius:50%}
  .tagchip .tagx:hover{color:var(--crit)}
  .tagchip .tagx:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .tagadd{display:flex;gap:6px;align-items:center}
  .tagadd .ta{width:180px;padding:5px 9px;font-size:12.5px}
  .tagnone{font-size:12.5px;color:var(--faint)}
  /* ---- the company's own details ----
     Read-only here: these are what the invoice is built from. */
  .deets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
         gap:2px 18px;padding:14px 18px}
  .deet{display:grid;gap:2px;padding:7px 0;border-bottom:1px dotted var(--line)}
  .deet .dk{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  .deet .dv{font-size:13.5px;overflow-wrap:anywhere}
  .deet .dv.mono{font-family:var(--mono);font-size:13px}
  /* ---- what they buy ---- */
  @media (min-width:821px){
    #slClients .irow.buy{grid-template-columns:minmax(0,1fr) 110px 120px 130px}
  }
  /* ---- a customer's product lines on its card (v89.35, task 52): five ticks that wrap on a phone ---- */
  .linetick{display:flex;flex-wrap:wrap;gap:8px 18px}
  /* ---- a customer's orders and payments (v89.34): its figures, then its latest orders ---- */
  .acnums.ordnums{margin:0;padding:14px 18px;border-top:0}
  .acnums.ordnums .when{margin-top:2px}
  #slCustOrders{padding:0 18px 6px}
  #slCustOrders .irow.ordrow{padding-inline:0}
  .ordmore{padding:10px 0 4px}
  @media (min-width:821px){
    #slCustOrders .irow.ordrow{grid-template-columns:minmax(0,1fr) 130px 200px}
  }
  /* ---- the book, split by country ---- */
  /* v87's rows in the Deleted and invite windows — their own class: as a bare .listrow they
     restyled every customer's My orders and Documents (no side padding, amounts ragged) */
  .listrow.flexrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .listrow.flexrow:last-child{border-bottom:0}
  .listrow.flexrow .lmain{min-width:0;flex:1 1 auto}
  .listrow.flexrow .lname{font-weight:600;overflow-wrap:anywhere}
  .listrow.flexrow .lacts{display:flex;gap:8px;flex:0 0 auto;align-items:center}
  .listrow.flexrow.pick{justify-content:flex-start;cursor:pointer}
  .listrow.flexrow.pick input{flex:0 0 auto;margin:2px 0 0;align-self:flex-start}
  .btn.dangerous{color:var(--crit);border-color:var(--crit)}
  @media (max-width:560px){ .listrow.flexrow{flex-wrap:wrap} .listrow.flexrow:not(.pick) .lacts{width:100%;justify-content:flex-end} }
  .prosbar{padding:14px 18px 6px}
  .prosbar input{width:100%;max-width:440px}
  .prosmeta{padding:0 18px 8px}
  /* ---- the base: tabs by segment and one search (v89.5) ---- */
  .custbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:14px 18px 12px;
           border-bottom:1px solid var(--line-soft)}
  .custbar[hidden]{display:none}
  .custbar input[type=search]{flex:1 1 260px;max-width:420px;min-width:0}
  .custtabs{display:flex;flex-wrap:wrap;gap:8px}
  .custbar .when{margin-left:auto}
  .vatline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-2px 0 12px}
  @media (min-width:821px){
    .adminrow.cust{grid-template-columns:minmax(0,1fr) 100px 100px 108px 290px}
    #slClients .irow.pros{grid-template-columns:minmax(0,1fr) 150px minmax(0,180px) minmax(0,150px) max-content}
    .custcard .peoplelist .irow{grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr) 32px}
  }
  #slClients .irow.pros .r .when{overflow-wrap:anywhere}
  @media (min-width:561px){ .veil .modal.custcard{max-width:min(920px,calc(100vw - 32px))} }
  @media (max-width:560px){ .modal .three{grid-template-columns:1fr} }
  .csvh{margin:16px 0 6px;font-size:13px;font-weight:600}
  .ctry{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 18px;
        background:var(--surface-2);border-top:1px solid var(--line);
        border-bottom:1px solid var(--line-soft)}
  .ctry:first-child{border-top:0}
  .ctryname{font-weight:600;font-size:13.5px}
  .ctrycode{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--faint)}
  .ctrymeta{margin-left:auto;font-family:var(--mono);font-size:12.5px;font-weight:600}
  .ctrymeta .when{display:inline;margin:0 0 0 8px;font-family:var(--sans)}
  @media (max-width:560px){ .ctrymeta{margin-left:0;width:100%} }
  .stagesel{max-width:230px;padding:7px 9px;font-size:13px}
  /* task 44b: "Last contact" names itself where the rows are stacked and the head is gone */
  .adminrow .phlab{display:none}
  @media (max-width:820px){ .adminrow .phlab{display:inline;color:var(--faint)} }
  /* task 33: a head that sorts is a button that looks like the head; the way it sorts is said beside it */
  .sorth{appearance:none;background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;
         color:inherit;cursor:pointer;text-align:inherit}
  .sorth:hover{color:var(--ink)}
  .sorth:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
  [aria-sort="ascending"] .sorth::after{content:" \2191";color:var(--accent)}
  [aria-sort="descending"] .sorth::after{content:" \2193";color:var(--accent)}
  .sortsel{display:none;align-items:center;gap:8px}
  .sortsel label{white-space:nowrap}
  .sortsel select{max-width:240px}
  @media (max-width:820px){ .sortsel{display:flex;width:100%} .sortsel select{flex:1 1 auto;max-width:none} }
  /* audit B17: on a phone an account is its name, then its facts three to a line, label over value — an empty
     fact (nothing owed) left out — so a screen holds twice the accounts it did */
  @media (max-width:820px){
    #slClients .irow.crm{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;padding:11px 14px}
    #slClients .irow.crm > div:first-child{grid-column:1 / -1}
    #slClients .irow.crm .r[data-lab]{display:block;text-align:left}
    #slClients .irow.crm .r[data-lab]::before{display:block;margin-bottom:2px;font-size:10px;font-weight:400}
    #slClients .irow.crm .r.nil{display:none}
    #slTurn .irow .r[data-lab] > .linkbtn{justify-self:start;text-align:left}
  }
  .prospeople{margin-top:3px}
  .lgkinds{align-self:start;max-width:max-content}
  /* task 44d: her turnover by month */
  @media (min-width:821px){ #slTurn .irow{grid-template-columns:minmax(0,1fr) 110px 130px 150px 160px} }
  .turnfoot{padding:12px 18px 16px}
  .turnwarn{padding:10px 18px 0;color:var(--warn)}
  .crmread{display:grid;border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;margin-bottom:6px}
  .crmread > .when{padding:10px 12px}
  @media (min-width:821px){
    #slClients .irow.crm{grid-template-columns:minmax(0,1fr) 108px 96px 116px 112px 100px}
    #slClients .irow.ppl{grid-template-columns:minmax(0,1fr) 190px 160px 128px}
  }
  @media (max-width:820px){
    /* In one column the labelled cell is a grid, and a pill left to stretch
       across it reads as a button. It is a badge; it takes its own width. */
    #slClients .irow .r .pill{justify-self:start}
    .segbar{gap:10px}
    .segacts{width:100%}
    .segacts .btn{flex:1 1 auto}
  }
  /* ---- the account page ---- */
  .acctop{padding:18px}
  .acname{font-size:22px;font-weight:600;letter-spacing:-.02em}
  .acnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(112px,100%),1fr));
          gap:12px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line-soft)}
  .acn .lab{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  .acn .v{font-family:var(--mono);font-size:17px;font-weight:600;margin-top:3px;
          font-variant-numeric:tabular-nums}
  /* One stream, newest first. Three lists side by side is how you miss that
     the call came the day after the late invoice. */
  .tlrow{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;
         padding:12px 18px;border-bottom:1px solid var(--line-soft)}
  .tlrow:last-child{border-bottom:0}
  .tlrow .ni{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
             font-size:12px;margin-top:1px;background:var(--surface-2);color:var(--muted)}
  .tlrow .ni.ord{background:var(--accent-soft);color:var(--accent)}
  .tlrow .ni.new{background:var(--ok-soft);color:var(--ok)}
  .tlrow .ni.chg{background:var(--warn-soft);color:var(--warn)}
  .tlrow.note{background:var(--surface-2)}
  .tlrow.note .iname{font-weight:400;line-height:1.5}
  .callrow .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  @media (max-width:640px){
    .acname{font-size:19px}
    .acnums{grid-template-columns:1fr 1fr}
    .tlrow{padding:11px 14px}
  }
  @media (max-width:640px){
    .cdown{padding-left:0;border-left:0;display:flex;gap:7px;align-items:baseline}
    .cdn{font-size:21px}
    .supin{max-width:none;text-align:left}
  }
  @media (max-width:640px){
    .bigpts{font-size:36px}
    .merchgrid{padding:12px;gap:12px}
    .mthumb{height:92px}
  }
  .mono{font-family:var(--mono)}
  .mailframe{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
  .mailbar{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;padding:12px 18px;
           background:var(--surface-2);border-bottom:1px solid var(--line-soft);font-size:12.5px;color:var(--muted)}
  .mailbar .mfrom{font-family:var(--mono)}
  .mailsubj{padding:14px 18px 0;font-size:18px;font-weight:600;letter-spacing:-.01em}
  .mailbody{padding:16px 18px 20px;font-size:14px;line-height:1.6;color:var(--ink)}
  .mailbody p{margin:0 0 12px}
  .mailbody .small{font-size:12.5px;color:var(--muted)}
  .maillogo{height:36px;width:auto;display:block;margin-bottom:16px}
  .mailfoot{margin-top:18px;padding-top:13px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--faint);line-height:1.5}