/* The shell every screen wears (redesign branch, Oct 22 2026): a fixed deep-blue sidebar (the temple's blue, treatment
   A kept), a white top bar with the page title, the clock and the name box, and the page below on the cream.
   Why a sidebar now: Ernest wants ONE application with Dashboard / Register / Inventory / Transactions in it rather than
   three pages that link to each other; the research briefs (reports/2026-10-22-redesign/) put 240 px brand-colored
   sidebars at the center of every current back office. Which entries appear is the server's business (/api/nav).
   Rules carried over from theme.css: one accent, gold for ONE "look here" thing per screen (here: the active nav bar),
   system fonts, no CDN. Numbers: tabular, right-aligned, two places. Spacing on an 8 px grid; radius 8; no shadows
   except the drawer. */
:root {
  --side:240px; --top:56px;
  --side-bg:#0060aa; --side-ink:rgba(255,255,255,.85); --side-on:#fff; --side-tint:rgba(255,255,255,.12);
  --cart-bg:#eef3f8;            /* the cart surface: a shade of the blue, so money sits on its own ground */
  --amber:#b4541a; --amber-soft:#fff4ea; --red:#b00020; --red-soft:#fdecee; --green:#1f7a3a; --green-soft:#e9f5ec;
  --t-12:12px; --t-13:13px; --t-14:14px; --t-16:16px; --t-18:18px; --t-20:20px; --t-24:24px; --t-28:28px;
}
html, body { height:100%; }
body { font-size:var(--t-14); line-height:1.45; }
/* the shell is the viewport: sidebar and top bar never move, only the content area scrolls (Ernest, Oct 24 2026: "the
   catalog shifts, the sidebar doesn't hold steady") — sticky inside a scrolling page drifted; a fixed shell cannot */
body.shell { display:grid; grid-template-columns:var(--side) 1fr; grid-template-rows:var(--top) 1fr; grid-template-areas:"side top" "side main"; height:100vh; overflow:hidden; }
/* ---- sidebar */
.side { grid-area:side; background:var(--side-bg); color:var(--side-ink); display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.side .brand { display:flex; align-items:center; gap:12px; padding:14px 16px 12px; color:var(--side-on); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.14); }
.side .brand img { height:36px; width:auto; }
.side .brand b { display:block; font-size:var(--t-18); font-weight:700; line-height:1.1; }
.side .brand small { display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--side-ink); margin-top:3px; }
.side nav { padding:12px 8px; display:flex; flex-direction:column; gap:2px; }
.side nav a { display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border-radius:8px; color:var(--side-ink); text-decoration:none; font-weight:600; font-size:var(--t-14); border-left:3px solid transparent; }
.side nav a:hover { background:rgba(255,255,255,.08); color:var(--side-on); }
.side nav a.here { background:var(--side-tint); color:var(--side-on); border-left-color:var(--gold); }
.side nav a svg { width:20px; height:20px; flex:none; opacity:.9; }
.side nav .sep { height:1px; background:rgba(255,255,255,.14); margin:10px 6px; }
.side nav .label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); padding:4px 12px 2px; }
/* the register button: a mode, not a page — sits alone above the footer, filled, the only white block on the blue */
.side .launch { margin:auto 12px 12px; display:flex; align-items:center; justify-content:center; gap:10px; height:46px; border-radius:10px; background:#fff; color:var(--side-bg); text-decoration:none; font-weight:700; font-size:var(--t-16); box-shadow:0 1px 0 rgba(0,0,0,.15); }
.side .launch:hover { background:#f2f6fb; }
.side .launch.here { outline:3px solid var(--gold); outline-offset:-3px; }
.side .launch svg { width:22px; height:22px; flex:none; }
.side .launch ~ .foot { margin-top:0; }
.side .foot { margin-top:auto; padding:12px 16px 16px; font-size:var(--t-12); color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.14); line-height:1.5; }
.side .foot b { color:var(--side-ink); font-weight:600; }
/* ---- top bar */
.top { grid-area:top; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:0 24px; z-index:5; }
.top h1 { margin:0; font-size:var(--t-20); font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.top h1 small { font-weight:500; color:var(--muted); font-size:var(--t-13); margin-left:10px; }
.top .mid { flex:1; display:flex; align-items:center; gap:12px; min-width:0; }
.top .clock { font-variant-numeric:tabular-nums; color:var(--muted); font-size:var(--t-14); white-space:nowrap; text-align:right; line-height:1.2; }
.top .clock b { display:block; color:var(--ink); font-size:var(--t-16); font-weight:600; }
.top .who { display:flex; align-items:center; gap:10px; }
.top .who .cur { font-size:var(--t-18); color:var(--ink); white-space:nowrap; } .top .who .cur b { font-weight:800; } .top .who .cur small { color:var(--muted); font-size:var(--t-13); margin-left:4px; }
.top .who .cur.none { color:var(--amber); font-weight:600; }
/* the counter's PIN panel: a sheet over the page, people as big buttons, four digits, done */
#pinpanel { display:none; position:fixed; inset:0; background:rgba(0,30,60,.45); z-index:50; align-items:center; justify-content:center; }
#pinpanel.on { display:flex; }
#pinpanel .pp { background:#fff; border-radius:12px; width:520px; max-width:calc(100vw - 32px); padding:18px 20px 16px; box-shadow:0 14px 40px rgba(0,0,0,.3); }
#pinpanel .hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } #pinpanel h2 { margin:0; font-size:var(--t-18); }
#pinpanel .people { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
#pinpanel .people .btn { height:52px; font-size:var(--t-16); } #pinpanel .people .btn.on { border-color:var(--accent); background:var(--accent-soft); }
#pinpanel .pin[hidden] { display:none; }
#pinpanel .pin { display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; } #pinpanel .pin .for { flex:1 0 100%; font-size:var(--t-14); color:var(--muted); }
#pinpanel .pin input { font:inherit; font-size:28px; letter-spacing:.4em; width:150px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; text-align:center; }
#pinpanel .pin .btn.primary { height:48px; } #pinpanel .err { flex:1 0 100%; color:var(--red); font-size:var(--t-14); min-height:18px; }
#pinpanel .foot { margin-top:14px; border-top:1px solid var(--line); padding-top:10px; }
#pinpanel .claim { margin-top:16px; border-top:1px solid var(--line); padding-top:12px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#pinpanel .claim .for { flex:1 0 100%; font-size:var(--t-13); color:var(--muted); }
#pinpanel .claim input { font:inherit; font-size:var(--t-16); padding:8px 12px; border:1px solid var(--line); border-radius:8px; width:200px; }
/* the still-you question replaces the pay block: one big Yes, one Someone else */
#stillyou { border-top:1px solid #cfdbe8; padding:14px 16px 16px; background:var(--amber-soft); }
#stillyou p { margin:0 0 12px; font-size:var(--t-16); } #stillyou p b { font-size:var(--t-18); }
#stillyou .btns { display:grid; gap:8px; } #stillyou .btn { height:48px; font-size:var(--t-16); }
.top .who label { font-size:var(--t-13); color:var(--muted); white-space:nowrap; }
.top .who input { width:150px; font:inherit; font-size:var(--t-14); padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
.top .who input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.top .who input.missing { border-color:var(--amber); background:var(--amber-soft); }
/* ---- main */
main.page { grid-area:main; padding:24px; min-width:0; overflow:auto; min-height:0; }   /* the one scroller */
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; }
.card > .hd { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px 10px; }
.card > .hd h2 { margin:0; font-size:var(--t-16); font-weight:600; }
.card > .hd .sub { color:var(--muted); font-size:var(--t-13); }
.card > .bd { padding:0 16px 16px; }
/* search field with the category select fused on its right end (Ernest's screenshot, Oct 22 2026: Amazon's shape) */
.search { display:flex; align-items:stretch; border:1px solid var(--line); border-radius:999px; background:#fff; overflow:hidden; height:44px; }
.search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.search svg { width:18px; height:18px; align-self:center; margin-left:16px; color:var(--muted); flex:none; }
.search input { flex:1; min-width:0; border:0; font:inherit; font-size:var(--t-16); padding:0 12px; background:transparent; color:var(--ink); }
.search input:focus { outline:none; }
.search select { border:0; border-left:1px solid var(--line); background:#faf8f3; font:inherit; font-size:var(--t-14); padding:0 36px 0 14px; color:var(--ink); appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b6b70' stroke-width='1.8'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; }
.search select:focus { outline:none; }
/* buttons: .btn plain, .btn.primary the one that does the thing, .btn.quiet text-like, .btn.danger for Remove/Void */
.btn { font:inherit; font-size:var(--t-14); font-weight:600; height:40px; padding:0 16px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; white-space:nowrap; }
.btn:hover { border-color:#bdb8ad; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:#00529a; }
.btn.primary:disabled { background:#b9c3df; border-color:#b9c3df; cursor:default; }
.btn.outline { border-color:var(--accent); color:var(--accent); }
.btn.danger { color:var(--red); border-color:#e6b8be; }
.btn.danger:hover { background:var(--red-soft); }
.btn.sm { height:32px; padding:0 12px; font-size:var(--t-13); }
.btn.lg { height:56px; font-size:var(--t-18); padding:0 24px; border-radius:10px; }
.btn.block { width:100%; }
/* segmented control: one of N, the on one filled */
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.seg button { font:inherit; font-size:var(--t-13); font-weight:600; height:36px; padding:0 14px; border:0; border-right:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; }
.seg button:last-child { border-right:0; }
.seg button.on { background:var(--accent); color:#fff; }
.seg.lg button { height:40px; font-size:var(--t-14); padding:0 18px; }
/* chips, pills for status, the status dot */
.chip { display:inline-block; font-size:var(--t-12); font-weight:600; padding:2px 8px; border-radius:999px; background:#f0ede6; color:var(--muted); }
.chip.amber { background:var(--amber-soft); color:var(--amber); } .chip.red { background:var(--red-soft); color:var(--red); } .chip.green { background:var(--green-soft); color:var(--green); } .chip.blue { background:var(--accent-soft); color:var(--accent); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }
.amber { color:var(--amber); } .red { color:var(--red); } .green { color:var(--green); }
/* tables */
table.t { width:100%; border-collapse:collapse; font-size:var(--t-14); }
table.t th { text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:1; }
table.t td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.t tr:last-child td { border-bottom:0; }
table.t tr.row:hover td { background:#faf8f3; cursor:pointer; }
table.t tr.sel td { background:var(--accent-soft); }
table.t th.num, table.t td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.t .thumb { width:36px; height:36px; object-fit:contain; background:#fafafa; border:1px solid var(--line); border-radius:6px; display:block; }
table.t .thumb.none { display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted); border-style:dashed; }
.empty { color:var(--muted); font-size:var(--t-14); padding:28px 16px; text-align:center; }
.empty b { display:block; color:var(--ink); font-weight:600; margin-bottom:4px; }
/* inputs */
.in { font:inherit; font-size:var(--t-14); padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
.in:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
select.in { padding-right:28px; }
/* message strip */
.msg { min-height:20px; font-size:var(--t-14); }
.msg.err { color:var(--red); } .msg.ok { color:var(--green); }
/* toast: one line, bottom center, goes away by itself; for "Sale recorded" and the like */
#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:12px 20px; border-radius:10px; font-size:var(--t-14); font-weight:600; opacity:0; pointer-events:none; transition:opacity .2s; z-index:50; max-width:70vw; }
#toast.on { opacity:1; } #toast.err { background:var(--red); }
/* KPI cards */
.kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; margin-bottom:24px; }
.kpi { padding:18px 20px; min-height:96px; }
.kpi .l { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.kpi .v { font-size:var(--t-28); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; margin:4px 0 2px; }
.kpi .d { font-size:var(--t-12); color:var(--muted); }
@media (max-width:1100px) { .kpis { grid-template-columns:repeat(2, 1fr); } }
/* the rail (Ernest, Oct 24 2026): on the register the sidebar narrows to icons with a small word under each — never
   icons alone (text labels over icons, the house rule) and never hidden behind a menu button (nothing to be taught).
   The register gets ~150 px back, one more tile column. body.shell.rail opts a page in; narrow windows get it too. */
body.shell.rail { grid-template-columns:88px 1fr; }
.rail .side .brand { justify-content:center; padding:12px 8px 10px; } .rail .side .brand b, .rail .side .brand small { display:none; }
.rail .side nav { padding:10px 6px; gap:4px; }
.rail .side nav a { flex-direction:column; justify-content:center; gap:4px; height:56px; padding:0 4px; border-left:0; border-radius:8px; font-size:10.5px; font-weight:600; letter-spacing:.01em; text-align:center; }
.rail .side nav a.here { box-shadow:inset 3px 0 0 var(--gold); }
.rail .side .launch { flex-direction:column; gap:3px; height:60px; margin:auto 8px 10px; font-size:11px; border-radius:10px; }
.rail .side .foot { display:none; }
@media (max-width:900px) { body.shell { grid-template-columns:88px 1fr; }
  .side .brand { justify-content:center; padding:12px 8px 10px; } .side .brand b, .side .brand small { display:none; }
  .side nav { padding:10px 6px; gap:4px; }
  .side nav a { flex-direction:column; justify-content:center; gap:4px; height:56px; padding:0 4px; border-left:0; border-radius:8px; font-size:10.5px; text-align:center; }
  .side nav a.here { box-shadow:inset 3px 0 0 var(--gold); }
  .side .launch { flex-direction:column; gap:3px; height:60px; margin:auto 8px 10px; font-size:11px; }
  .side .foot { display:none; } }

/* ---- lightbox: the picture at original pixels (Ernest, Oct 24 2026) */
#lightbox { display:none; position:fixed; inset:0; background:rgba(0,20,40,.8); z-index:60; align-items:center; justify-content:center; padding:24px; }
#lightbox.on { display:flex; }
#lightbox .lb { background:#fff; border-radius:12px; max-width:calc(100vw - 48px); max-height:calc(100vh - 48px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.4); }
#lightbox .hd { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); font-size:var(--t-14); }
#lightbox .hd span { flex:1; color:var(--muted); }
#lightbox img { display:block; max-width:calc(100vw - 48px); max-height:calc(100vh - 48px - 52px); object-fit:contain; background:#111; }
.zoomable { cursor:zoom-in; }

/* ---- items as tiles: ONE design, used by every screen that shows items as cards (the register, Featured items; anything
   next). Change it here and the system picks it up everywhere (Ernest, Oct 24 2026). Markup comes from tileHTML() in
   app.js. Tiles are cells of one hairline grid: the grid owns the top and left edge, each cell its right and bottom,
   so a short last row leaves white space; hover / chosen / in-the-sale are drawn INSIDE the cell so cells never jump. */
.group { padding:0 16px; }
.group h3 { margin:16px 0 10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:10px; }
.group h3::after { content:""; flex:1; height:1px; background:var(--line); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows:1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); margin-bottom:16px; }
.tile { background:#fff; border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; padding:12px; display:flex; flex-direction:column; gap:6px; min-height:196px; text-align:left; font:inherit; color:inherit; margin:0; }
button.tile { cursor:pointer; user-select:none; }
button.tile:hover, button.tile:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--accent); }
.tile.on { background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent); }   /* in the sale, or chosen */
.tile img, .tile .noimg { width:100%; height:104px; object-fit:contain; background:#fafafa; border-radius:6px; }
.tile .noimg { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:var(--t-12); text-align:center; padding:6px; }
.tile .name { font-size:var(--t-14); font-weight:600; line-height:1.25; }
.tile .var { font-size:var(--t-12); color:var(--muted); min-height:18px; }
.tile .meta { display:flex; justify-content:space-between; align-items:baseline; margin-top:auto; }
.tile .price { font-weight:700; font-size:var(--t-16); font-variant-numeric:tabular-nums; }
.tile .stock { font-size:var(--t-12); color:var(--muted); }
.tile .inc { font-size:var(--t-12); color:var(--accent); font-weight:700; }
.tile .foot { border-top:1px solid var(--line); padding-top:8px; margin-top:4px; }   /* a screen's own control under the tile (Featured: the check) */
.tile .foot label { display:flex; align-items:center; gap:8px; font-size:var(--t-13); font-weight:600; cursor:pointer; }
.tile .foot input { width:18px; height:18px; accent-color:var(--accent); }