/* SD-ERP — felt-table green, meeple yellow, dice red. Legible at arm's length on a counter tablet. */
:root {
  --felt: #18463a;
  --felt-dark: #10332a;
  --felt-soft: #e3ece7;
  --paper: #f6f7f4;
  --card: #ffffff;
  --ink: #1d2422;
  --muted: #5f6b67;
  --line: #d6ddd9;
  --meeple: #f2b705;
  --meeple-ink: #3d2e00;
  --dice: #c8352b;
  --go: #2b8a3e;
  --warn: #e67700;
  --radius-s: 6px;
  --radius-l: 14px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 16px/1.5 var(--body); }
a { color: var(--felt); }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; }
:focus-visible { outline: 3px solid var(--meeple); outline-offset: 2px; }

/* top bar */
.topbar { background: var(--felt); color: #fff; display: flex; align-items: center; gap: 4px; padding: 0 16px;
  min-height: 56px; flex-wrap: wrap; }
.brand { font: 800 1.15rem var(--display); color: #fff; text-decoration: none; margin-right: 16px;
  display: flex; align-items: center; gap: 8px; }
.brand .die { width: 26px; height: 26px; background: var(--meeple); border-radius: 6px; display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr); padding: 5px; gap: 4px; }
.brand .die i { background: var(--felt-dark); border-radius: 50%; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.topbar nav a { color: #d7e6df; text-decoration: none; padding: 8px 12px; border-radius: var(--radius-s); }
.topbar nav a:hover, .topbar nav a.on { background: var(--felt-dark); color: #fff; }
.topbar .who { color: #b9cfc5; font-size: .9rem; display: flex; gap: 10px; align-items: center; }
.topbar .who button { background: none; border: 1px solid #4f7a6d; color: #fff; border-radius: var(--radius-s);
  padding: 4px 10px; cursor: pointer; font: inherit; }

main { max-width: 1240px; margin: 0 auto; padding: 24px 16px 64px; }
main.full { max-width: none; padding: 0; }

/* messages */
.msgs { list-style: none; padding: 0; margin: 0 0 16px; }
.msgs li { padding: 10px 14px; border-radius: var(--radius-s); margin-bottom: 6px; background: var(--felt-soft); }
.msgs .error { background: #fbe4e2; color: #8a1f17; }
.msgs .warning { background: #fff3cd; color: #6b4a00; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); padding: 9px 16px; border-radius: var(--radius-s); font: 600 1rem var(--body);
  text-decoration: none; cursor: pointer; min-height: 42px; }
.btn:hover { border-color: var(--felt); }
.btn.primary { background: var(--felt); border-color: var(--felt); color: #fff; }
.btn.go { background: var(--meeple); border-color: var(--meeple); color: var(--meeple-ink); }
.btn.danger { color: var(--dice); border-color: #ecc3bf; }
.btn.small { min-height: 32px; padding: 4px 10px; font-size: .9rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }

/* home tiles */
.home-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.home-head p { margin: 0; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tile { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius-l);
  padding: 20px 20px 18px; text-decoration: none; color: var(--ink); min-height: 150px; display: flex;
  flex-direction: column; justify-content: space-between; box-shadow: 4px 4px 0 var(--ink); transition: transform .08s; }
.tile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.tile:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.tile h2 { margin: 0; font-size: 1.5rem; }
.tile p { margin: 4px 0 0; color: var(--muted); font-size: .95rem; }
.tile .stat { font: 800 1.6rem var(--display); }
.tile .flag { position: absolute; top: 14px; right: 14px; background: var(--dice); color: #fff; border-radius: 99px;
  padding: 2px 10px; font-size: .85rem; font-weight: 700; }
.tile.register { background: var(--meeple); }
.tile.register p { color: var(--meeple-ink); }
.tile.kitchen { background: var(--felt); color: #fff; }
.tile.kitchen p { color: #c6dcd2; }

/* panels + tables */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 18px; margin-bottom: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; }
.data th { text-align: left; font-weight: 700; color: var(--muted); border-bottom: 2px solid var(--line); padding: 8px; }
.data td { border-bottom: 1px solid var(--line); padding: 8px; vertical-align: top; }
.data tr:hover td { background: #fafbf9; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .82rem; font-weight: 700;
  background: var(--felt-soft); color: var(--felt); white-space: nowrap; }
.pill.bad { background: #fbe4e2; color: #8a1f17; }
.pill.warn { background: #fff3cd; color: #6b4a00; }
.pill.mute { background: #eceeed; color: var(--muted); }
.muted { color: var(--muted); }
.big { font: 800 1.8rem var(--display); }

/* forms */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
input:not([type]), input[type=text], input[type=search], input[type=number], input[type=password], input[type=url], input[type=date],
input[type=email], select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: #fff; min-height: 42px; max-width: 100%; }
textarea { width: 100%; }
.form p { margin: 0 0 14px; display: grid; gap: 4px; }
.form label { font-weight: 700; }
.form .helptext { color: var(--muted); font-size: .85rem; }
.form ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.form .errorlist { color: var(--dice); }
.form input[type=checkbox] { width: 20px; height: 20px; }

/* ---------- register ---------- */
.pos { display: grid; grid-template-columns: 1fr 400px; height: calc(100vh - 56px); }
.pos-left { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
.pos-search { display: flex; gap: 8px; padding: 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.pos-search input { flex: 1; font-size: 1.1rem; }
.cats { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; background: var(--card); border-bottom: 1px solid var(--line); }
.cats button { border: 2px solid transparent; background: var(--felt-soft); padding: 8px 16px; border-radius: 99px;
  font: 700 1rem var(--body); cursor: pointer; white-space: nowrap; color: var(--ink); }
.cats button.on { border-color: var(--ink); background: #fff; }
.cats button .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.prods { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-content: start; }
.prod { border: 1px solid var(--line); border-left: 6px solid var(--c, var(--felt)); background: var(--card);
  border-radius: var(--radius-s); padding: 12px; text-align: left; cursor: pointer; font: inherit; min-height: 92px;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); }
.prod:hover { border-color: var(--ink); border-left-color: var(--c, var(--felt)); }
.prod b { font-weight: 700; line-height: 1.25; }
.prod .meta { display: flex; justify-content: space-between; font-size: .9rem; color: var(--muted); margin-top: 6px; }
.prod .meta .price { color: var(--ink); font-weight: 700; }
.prod.out { opacity: .55; }
.cart { display: flex; flex-direction: column; background: var(--card); min-height: 0; }
.cart-head { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.cart-head .row > * { flex: 1; min-width: 0; }
.tabbar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: #fff4d6; border: 1px solid var(--meeple); }
.tabbar[hidden] { display: none; }
.tabbar span { flex: 1; }
.tabbar b, .tabbar .btn { white-space: nowrap; }
.cart-lines { flex: 1; overflow-y: auto; }
.cline { padding: 10px 12px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.cline .n { font-weight: 700; }
.cline .sub { color: var(--muted); font-size: .88rem; grid-column: 1; }
.cline .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.cline .ctl { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 4px; }
.cline .ctl button { min-width: 38px; min-height: 34px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius-s); cursor: pointer; font: 700 1rem var(--body); }
.cart-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.totals { padding: 12px; border-top: 2px solid var(--ink); font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font: 800 1.6rem var(--display); margin-top: 4px; }
.paybar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 12px; }
.paybar .btn { min-height: 56px; font-size: 1.05rem; }
.paybar .wide { grid-column: 1 / -1; }

/* dialogs */
dialog { border: 2px solid var(--ink); border-radius: var(--radius-l); padding: 22px; width: min(440px, 94vw);
  box-shadow: 6px 6px 0 var(--ink); }
dialog::backdrop { background: rgba(16, 51, 42, .45); }
dialog h3 { margin-top: 0; }
.mods label { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line);
  border-radius: var(--radius-s); margin-bottom: 6px; cursor: pointer; }
.mods label span:last-child { margin-left: auto; color: var(--muted); }
.cashkeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.cashkeys button { min-height: 52px; font: 700 1.1rem var(--body); border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius-s); cursor: pointer; }
.due { font: 800 2.2rem var(--display); text-align: center; margin: 4px 0 8px; }
.change { text-align: center; font: 800 1.6rem var(--display); color: var(--go); }

/* ---------- kitchen display ---------- */
body.kds { background: #1a1f1e; color: #eef2f0; }
.kds-bar { display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: #0f1312; flex-wrap: wrap; }
.kds-bar h1 { margin: 0; font-size: 1.4rem; color: #fff; }
.kds-bar .stat { color: #9fb3ab; }
.kds-bar .stat b { color: #fff; font-size: 1.15rem; }
.kds-bar a { color: #9fb3ab; }
.kds-bar .filters button { background: #2a3230; color: #dfe7e3; border: 1px solid #3a4441; border-radius: var(--radius-s);
  padding: 6px 12px; font: 600 .95rem var(--body); cursor: pointer; }
.kds-bar .filters button.on { background: var(--meeple); color: var(--meeple-ink); border-color: var(--meeple); }
.kds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; padding: 16px; align-items: start; }
.tkt { background: #f4f6f5; color: var(--ink); border-radius: var(--radius-s); overflow: hidden; border-top: 10px solid var(--go); }
.tkt.warn { border-top-color: var(--warn); }
.tkt.late { border-top-color: var(--dice); animation: pulse 1.6s ease-in-out infinite; }
.tkt.ready { border-top-color: #4dabf7; opacity: .92; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(200, 53, 43, .5); } }
@media (prefers-reduced-motion: reduce) { .tkt.late { animation: none; } }
.tkt-h { display: flex; justify-content: space-between; align-items: start; padding: 10px 12px; border-bottom: 1px dashed #b8c2be; }
.tkt-h .no { font: 800 1.6rem var(--display); }
.tkt-h .who { font-size: .92rem; color: var(--muted); }
.tkt-h .timer { font: 800 1.3rem var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.tkt-h .timer small { display: block; font: 600 .78rem var(--body); color: var(--muted); }
.tkt ul { list-style: none; margin: 0; padding: 6px 0; }
.tkt li { padding: 8px 12px; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; gap: 4px; font-size: 1.08rem; }
.tkt li b { font: 800 1.15rem var(--display); }
.tkt li .m { grid-column: 2; font-size: .92rem; color: var(--dice); font-weight: 700; }
.tkt li .nt { grid-column: 2; font-size: .92rem; color: var(--muted); font-style: italic; }
.tkt li.done { text-decoration: line-through; color: #8a9692; }
.tkt li.done .m { color: #8a9692; }
.tkt .onote { margin: 0 12px 8px; background: #fff3cd; padding: 6px 8px; border-radius: 4px; font-size: .92rem; }
.tkt-f { display: flex; gap: 6px; padding: 10px 12px; background: #e3e8e6; }
.tkt-f button { flex: 1; min-height: 48px; border: 0; border-radius: var(--radius-s); font: 800 1.05rem var(--body); cursor: pointer; }
.tkt-f .adv { background: var(--felt); color: #fff; }
.tkt-f .back { flex: 0 0 56px; background: #cfd7d4; }
.kds-empty { padding: 80px 20px; text-align: center; color: #7f918a; font-size: 1.3rem; }
.kds-recent { padding: 0 16px 16px; color: #9fb3ab; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kds-recent button { background: #2a3230; color: #dfe7e3; border: 1px solid #3a4441; border-radius: var(--radius-s); padding: 6px 10px; cursor: pointer; font: inherit; }

/* ---------- pickup board (TV) ---------- */
body.board { background: var(--felt-dark); color: #fff; min-height: 100vh; }
.board-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.board-col { padding: 4vh 4vw; }
.board-col h1 { font-size: 4vw; margin-bottom: 3vh; }
.board-col.ready { background: var(--meeple); color: var(--meeple-ink); }
.board-nums { display: flex; flex-wrap: wrap; gap: 2vw; }
.board-nums div { font: 800 5vw/1 var(--display); }
.board-nums small { display: block; font: 600 1.6vw var(--body); opacity: .8; margin-top: .5vh; }

/* ---------- public order-ahead ---------- */
body.public { background: var(--paper); }
.pub-head { background: var(--felt); color: #fff; padding: 28px 16px; }
.pub-head .in, .pub-main { max-width: 980px; margin: 0 auto; }
.pub-head h1 { font-size: 2.2rem; margin: 0; }
.pub-head p { margin: 4px 0 0; color: #c6dcd2; }
.pub-main { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 24px 16px 80px; }
.menu-item { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.menu-item p { margin: 2px 0 0; color: var(--muted); font-size: .95rem; }
.pub-cart { position: sticky; top: 16px; align-self: start; }
@media (max-width: 760px) { .pub-main { grid-template-columns: 1fr; } .pub-cart { position: static; } }
.track { max-width: 520px; margin: 8vh auto; text-align: center; padding: 0 16px; }
.steps { display: flex; justify-content: center; gap: 8px; margin: 24px 0; }
.steps span { flex: 1; padding: 12px 6px; border-radius: var(--radius-s); background: var(--felt-soft); color: var(--muted); font-weight: 700; }
.steps span.on { background: var(--felt); color: #fff; }
.steps span.now { background: var(--meeple); color: var(--meeple-ink); }

/* ---------- receipt ---------- */
body.receipt { background: #fff; }
.rcpt { width: var(--rw, 280px); margin: 0 auto; padding: 12px 0; font: 13px/1.4 "Courier New", monospace; color: #000; }
.rcpt h2 { font: 700 16px "Courier New", monospace; text-align: center; margin: 0; }
.rcpt .c { text-align: center; }
.rcpt hr { border: 0; border-top: 1px dashed #000; }
.rcpt table { width: 100%; border-collapse: collapse; }
.rcpt td { vertical-align: top; padding: 1px 0; }
.rcpt .k { font-size: 20px; font-weight: 700; }
@media print { .noprint { display: none; } @page { margin: 0; } }

.login { max-width: 380px; margin: 10vh auto; }

/* =================== public website =================== */
body.site { background: var(--paper); }
.s-top { background: var(--felt); color: #fff; position: sticky; top: 0; z-index: 20; }
.s-top .in { max-width: 1240px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 18px; min-height: 64px; flex-wrap: wrap; }
.s-top .brand { font-size: 1.25rem; }
.s-nav { order: 1; flex: 1; display: flex; align-items: center; gap: 18px; min-width: 0; }
.s-nav nav { order: 0; display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.s-nav .s-search { order: 1; }
.s-top nav > a, .s-top nav > details > summary { color: #e1ede7; text-decoration: none; padding: 10px 12px; border-radius: var(--radius-s);
  font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; min-height: 44px; }
.s-top nav > a:hover, .s-top nav > details > summary:hover, .s-top nav > details[open] > summary { background: var(--felt-dark); color: #fff; }
.s-top nav summary::-webkit-details-marker { display: none; }
.s-top nav summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin: -4px 0 0 9px; transition: transform .15s; }
.s-top nav details[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.s-top details { position: relative; }
.mega { position: absolute; left: 0; top: calc(100% + 6px); background: #fff; color: var(--ink); border: 2px solid var(--ink);
  border-radius: var(--radius-l); box-shadow: 6px 6px 0 var(--ink); padding: 18px; width: min(920px, 92vw);
  columns: 3 220px; column-gap: 24px; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }
.mega div { break-inside: avoid; margin-bottom: 14px; }
.mega a { color: var(--ink); text-decoration: none; display: block; padding: 3px 0; }
.mega a:hover { color: var(--felt); text-decoration: underline; }
.mega .t { font: 800 1rem var(--display); }
.mega .c { color: var(--muted); font-size: .92rem; }
.s-search { display: flex; }
.s-search input { min-height: 40px; border-radius: var(--radius-s) 0 0 var(--radius-s); border: 0; width: 220px; }
.s-search button { border: 0; background: var(--meeple); color: var(--meeple-ink); font-weight: 800; padding: 0 14px;
  border-radius: 0 var(--radius-s) var(--radius-s) 0; cursor: pointer; }
.s-cart { order: 2; color: #fff; text-decoration: none; font-weight: 700; padding: 8px 12px; border: 1px solid #4f7a6d; border-radius: var(--radius-s);
  min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
.s-cart b { background: var(--meeple); color: var(--meeple-ink); border-radius: 99px; padding: 0 8px; margin-left: 6px; }
.s-burger { display: none; }
.s-main { max-width: 1240px; margin: 0 auto; padding: 24px 16px 64px; }
.s-foot { background: var(--felt-dark); color: #c6dcd2; }
.s-foot .in { max-width: 1240px; margin: 0 auto; padding: 32px 16px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
.s-foot h3 { color: #fff; }
.s-foot a { color: #fff; }
.s-foot p { margin: 0 0 4px; }
@media (max-width: 760px) { .s-foot .in { grid-template-columns: 1fr; } }
@media (max-width: 1100px) and (min-width: 861px) { .s-search input { width: 160px; } .s-top .in, .s-nav { gap: 12px; } }

.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: stretch; margin-bottom: 36px; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.02; margin: 0 0 14px; letter-spacing: -0.02em; }
.hero p { font-size: 1.15rem; color: var(--muted); max-width: 46ch; }
.doors { display: grid; gap: 12px; }
.door { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius-l); padding: 18px 20px; background: #fff; box-shadow: 4px 4px 0 var(--ink); }
@media (hover: hover) { .door:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } }
.door b { font: 800 1.35rem var(--display); display: block; }
.door span { color: var(--muted); }
.door i { font-style: normal; font: 800 1.6rem var(--display); }
.door.y { background: var(--meeple); } .door.y span { color: var(--meeple-ink); }
.door.g { background: var(--felt); color: #fff; } .door.g span { color: #c6dcd2; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 34px 0 14px; flex-wrap: wrap; }
.sec-h h2 { margin: 0; font-size: 1.6rem; }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; }
.pcard .img { aspect-ratio: 1 / 1; background: var(--felt-soft); display: grid; place-items: center; overflow: hidden; text-decoration: none; }
.pcard .img.none { aspect-ratio: 5 / 2; background: repeating-linear-gradient(135deg, var(--felt-soft) 0 14px, #d6e3dc 14px 15px); }
.pcard .img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pcard .img .ph { width: 34px; height: 34px; background: var(--felt); border-radius: 8px; opacity: .35; display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr); padding: 7px; gap: 5px; }
.pcard .img .ph i { background: var(--felt-soft); border-radius: 50%; }
.pcard .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard a.t { color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.3; }
.pcard a.t:hover { text-decoration: underline; }
.pcard .sub { color: var(--muted); font-size: .85rem; }
.pcard .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pcard .price { font: 800 1.15rem var(--display); }
.av { font-size: .82rem; font-weight: 700; }
.av.in { color: var(--go); } .av.low { color: var(--warn); } .av.out { color: var(--muted); } .av.pre { color: #6741d9; }
.badge-pre { display: inline-block; background: #6741d9; color: #fff; border-radius: 99px; padding: 1px 9px; font-size: .78rem; font-weight: 700; }

.shop { display: grid; grid-template-columns: 240px 1fr; gap: 28px; }
.side h3 { margin-top: 0; }
.side a { display: block; color: var(--ink); text-decoration: none; padding: 5px 8px; border-radius: var(--radius-s); }
.side a:hover { background: var(--felt-soft); }
.side a.on { background: var(--felt); color: #fff; }
.side .lvl2 { padding-left: 18px; font-size: .95rem; }
.side-cats > summary { display: none; }
.crumbs { color: var(--muted); font-size: .92rem; margin-bottom: 6px; }
.crumbs a { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px; }
.chips a { text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-size: .92rem; }
.chips a.on, .chips a:hover { border-color: var(--ink); }
.pager { display: flex; gap: 8px; justify-content: center; margin: 24px 0; align-items: center; }

.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.pdp .img { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
.pdp .img img { width: 100%; height: 100%; object-fit: contain; }
.pdp h1 { font-size: 2rem; }
.pdp .price { font: 800 2rem var(--display); margin: 8px 0; }
.pdp form { display: flex; gap: 8px; margin: 16px 0; }
.pdp form input { width: 80px; }
@media (max-width: 760px) { .pdp { grid-template-columns: 1fr; } }

.evlist { display: grid; gap: 12px; }
.ev { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: 14px; text-decoration: none; color: var(--ink); }
.ev:hover { border-color: var(--ink); }
.ev .date { text-align: center; border-right: 1px solid var(--line); padding-right: 12px; }
.ev .date b { display: block; font: 800 2rem/1 var(--display); }
.ev .date span { color: var(--muted); font-size: .85rem; font-weight: 700; }
.ev h3 { margin: 0 0 2px; }
@media (max-width: 600px) { .ev { grid-template-columns: 70px 1fr; } .ev > :last-child { grid-column: 2; } }

.daybar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.daybar a { flex: 0 0 auto; text-align: center; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 6px 10px; min-width: 64px; }
.daybar a b { display: block; font: 800 1.2rem var(--display); }
.daybar a span { font-size: .8rem; color: var(--muted); }
.daybar a.on { background: var(--felt); color: #fff; border-color: var(--felt); }
.daybar a.on span { color: #c6dcd2; }
.roomcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 18px; margin-bottom: 14px; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.slots a { text-decoration: none; border: 2px solid var(--felt); color: var(--felt); font-weight: 700; padding: 8px 14px; border-radius: var(--radius-s); }
.slots a:hover { background: var(--felt); color: #fff; }

/* R27: customer website on phones — menu button, a header panel that scrolls on its own, category drop-down, bigger tap targets */
html.s-locked, html.s-locked body { overflow: hidden; }
body.site { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body.site .btn.small { min-height: 40px; padding: 6px 14px; }
@media (max-width: 860px) {
  .s-top .in { padding: 0 12px; gap: 10px; min-height: 58px; flex-wrap: wrap; }
  .s-top .brand { font-size: 1.1rem; flex: 1; min-width: 0; margin-right: 0; }
  .s-cart { order: 0; min-height: 44px; }
  .s-burger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; background: var(--felt-dark);
    color: #fff; border: 1px solid #4f7a6d; border-radius: var(--radius-s); font: 700 1rem var(--body); cursor: pointer; }
  .s-burger path { transition: transform .18s, opacity .18s; transform-origin: 12px 12px; }
  .s-top.open .s-burger .l1 { transform: translateY(5px) rotate(45deg); }
  .s-top.open .s-burger .l2 { opacity: 0; }
  .s-top.open .s-burger .l3 { transform: translateY(-5px) rotate(-45deg); }
  .s-nav { display: none; order: 3; flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 12px;
    max-height: calc(100vh - 58px); max-height: calc(100dvh - 58px); overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 4px 0 calc(20px + env(safe-area-inset-bottom)); }
  .s-top.open .s-nav { display: flex; }
  .s-nav .s-search { order: 0; }
  .s-nav .s-search input { width: auto; flex: 1; min-height: 46px; }
  .s-nav .s-search button { padding: 0 18px; }
  .s-nav nav { order: 1; flex-direction: column; flex-wrap: nowrap; gap: 2px; flex: none; }
  .s-top nav > a, .s-top nav > details > summary { min-height: 50px; padding: 12px 10px; font-size: 1.08rem; border-bottom: 1px solid #2c5a4d; border-radius: 0; }
  .s-top nav > details > summary { justify-content: space-between; }
  .mega { position: static; width: auto; columns: auto; max-height: none; overflow: visible; box-shadow: none; border: 0;
    border-radius: var(--radius-s); margin: 8px 0 10px; padding: 6px 14px; }
  .mega div { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .mega div:last-child { border-bottom: 0; }
  .mega a { padding: 9px 0; }
  .mega .c { padding: 7px 0 7px 14px; font-size: 1rem; }
  .s-main { padding: 16px 12px 48px; }
  h1 { font-size: 1.6rem; }
  .sec-h { margin: 26px 0 12px; }
  .sec-h h2 { font-size: 1.35rem; }
  .sec-h a { min-height: 44px; display: inline-flex; align-items: center; }
  .hero { gap: 18px; margin-bottom: 24px; }
  .door { padding: 14px 16px; }
  .door b { font-size: 1.15rem; }
  /* shop: categories become a drop-down above the products */
  .shop { grid-template-columns: 1fr; gap: 10px; }
  .side-cats { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); }
  .side-cats > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; cursor: pointer;
    font: 800 1.05rem var(--display); list-style: none; }
  .side-cats > summary::-webkit-details-marker { display: none; }
  .side-cats > summary em { font: 600 .92rem var(--body); color: var(--muted); font-style: normal; margin-left: auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }
  .side-cats > summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0;
    transform: rotate(45deg); margin-top: -4px; flex: none; }
  .side-cats > summary:not(:has(em))::after { margin-left: auto; }
  .side-cats[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
  .side-cats h3 { display: none; }
  .side-list { padding: 0 8px 10px; border-top: 1px solid var(--line); }
  .side a { padding: 12px 10px; border-radius: var(--radius-s); }
  .side .lvl2 { padding-left: 24px; }
  .filters select { flex: 1 1 140px; min-height: 44px; }
  .filters .muted { flex-basis: 100%; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 8px -12px 14px; padding: 0 12px 4px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chips a { flex: none; padding: 9px 14px; white-space: nowrap; }
  .pager .btn { min-height: 44px; }
  .pdp { gap: 18px; }
  .pdp h1 { font-size: 1.5rem; }
  .pdp .price { font-size: 1.6rem; }
  .pdp form .btn { flex: 1; min-height: 48px; }
  .pdp form input { min-height: 48px; }
}
@media (max-width: 560px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard .body { padding: 10px 10px 12px; gap: 4px; }
  .pcard a.t { font-size: .95rem; }
  .pcard .sub { font-size: .78rem; }
  .pcard .price { font-size: 1.05rem; }
  .pcard .foot { flex-direction: column; align-items: stretch; gap: 6px; }
  .pcard .foot form, .pcard .foot .btn { width: 100%; }
  .addr-row { flex-wrap: wrap; }
  .addr-row p:first-child { flex: 1 1 100% !important; }
  body.site table.data td { padding-left: 4px; padding-right: 4px; }
  .ev { padding: 12px; gap: 12px; }
}

/* staff room grid */
.rgrid { border-collapse: collapse; width: 100%; font-size: .9rem; }
.rgrid th, .rgrid td { border: 1px solid var(--line); padding: 6px; text-align: center; }
.rgrid td.b { background: var(--felt); color: #fff; text-align: left; }
.rgrid td.b.pending { background: var(--warn); }
.rgrid td.blk { background: color-mix(in srgb, var(--felt) 12%, transparent); }
.rgrid th:first-child, .rgrid td:first-child { text-align: left; white-space: nowrap; }

/* add-on groups + register sub-categories */
fieldset.addon { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px 4px; margin: 0 0 10px; }
fieldset.addon legend { padding: 0 6px; }
fieldset.addon label { display: flex; gap: 10px; align-items: center; padding: 8px 4px; cursor: pointer; border-top: 1px solid #eef1ef; }
fieldset.addon label:first-of-type { border-top: 0; }
fieldset.addon label span:last-child { margin-left: auto; color: var(--muted); }
fieldset.addon input { width: 20px; height: 20px; }
fieldset.addon.shake { border-color: var(--dice); }
.dlg-error { color: var(--dice); font-weight: 700; min-height: 1.2em; margin: 4px 0; }
#modDlg { width: min(520px, 94vw); max-height: 90vh; }
#modDlg .mods { max-height: 55vh; overflow-y: auto; }
.subs { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; background: #fafbf9; border-bottom: 1px solid var(--line); }
.subs:empty { display: none; }
.subs button { border: 1px solid var(--line); background: #fff; padding: 6px 12px; border-radius: 99px; font: 600 .92rem var(--body);
  cursor: pointer; white-space: nowrap; color: var(--ink); }
.subs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cats button.quick { background: var(--meeple); color: var(--meeple-ink); }
.cats button.quick.on { border-color: var(--ink); background: var(--meeple); }
.pos { overflow: hidden; }
.pos-left, .cart { min-height: 0; }
.prods { min-height: 0; }
.prods .grp { grid-column: 1 / -1; font: 800 .95rem var(--display); color: var(--muted); margin: 6px 0 -4px; }
fieldset.addon .step { display: grid; grid-template-columns: 1fr auto 40px 28px 40px; gap: 8px; align-items: center; padding: 6px 4px; border-top: 1px solid #eef1ef; }
fieldset.addon .step:first-of-type { border-top: 0; }
fieldset.addon .step button { min-height: 36px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-s); font: 700 1.1rem var(--body); cursor: pointer; }
fieldset.addon .step b { text-align: center; }

/* R7: tiles grow to fit their text; register keeps the cart beside the products on tablets */
.prods { grid-auto-rows: max-content; }
.prod { min-height: 96px; gap: 2px; }
.prod b { overflow-wrap: anywhere; }
.prod small { line-height: 1.25; }
.prod .meta { margin-top: auto; padding-top: 6px; align-items: baseline; gap: 6px; }
.prod .meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod .meta .price { white-space: nowrap; }
@media (max-width: 1180px) {
  .pos { grid-template-columns: 1fr 330px; }
  .prods { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 10px; }
  .topbar nav a { padding: 8px 9px; }
}
@media (max-width: 900px) { .pos { grid-template-columns: 1fr 300px; height: calc(100vh - 56px); overflow: hidden; } .prods { max-height: none; } }
@media (max-width: 680px) { .pos { grid-template-columns: 1fr; height: auto; overflow: visible; } .prods { max-height: 55vh; } }
.tile h2 { overflow-wrap: anywhere; }
.tile .flag { max-width: 45%; text-align: center; }
/* top bar stays one line (the register's height depends on it); extra links scroll sideways */
.topbar { flex-wrap: nowrap; height: 56px; }
.topbar nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { white-space: nowrap; }
.topbar .who { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 900px) { .brand { margin-right: 4px; } .topbar .who > span { display: none; } }
.paybar #sendTab { grid-column: 1 / -1; }
.paybar > .row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.paybar > .row .btn { min-height: 42px; }
@media (max-height: 820px) { .paybar .btn { min-height: 46px; } .totals .grand { font-size: 1.35rem; } .cart-head { gap: 6px; padding: 8px 12px; } }

/* searchable dropdowns */
.combo { position: relative; max-width: 100%; }
.combo-input { width: 100%; padding-right: 30px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6b67' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.combo-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); max-height: 300px; overflow-y: auto;
  background: #fff; border: 1px solid var(--ink); border-radius: var(--radius-s); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.combo-list [data-i] { padding: 8px 10px; cursor: pointer; }
.combo-list [data-i].on, .combo-list [data-i]:hover { background: var(--felt-soft); }
.combo-list .none { color: var(--muted); }
.combo-list .empty { padding: 8px 10px; color: var(--muted); }

/* R11 intake */
.pill.go { background: #d3f9d8; color: #1b5e20; }
.warn-text { color: #8a5a00; }
table.intake td { vertical-align: top; }
table.intake tr.same { opacity: .7; }
label.inline { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; }
.libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.libcard { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.libcard label { position: relative; display: block; }
.libcard img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 6px; }
.libcard label input { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; }
.libcard input[name^="to_"] { font-size: .85rem; }
.thumbpick { position: relative; }
.thumbpick img { width: 110px; height: 110px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.thumbpick input { position: absolute; top: 4px; left: 4px; }
.photos { display: flex; flex-wrap: wrap; gap: 10px; }
.photos figure { margin: 0; width: 130px; }
.photos img { width: 130px; height: 130px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.photos figure.main img { border: 3px solid var(--felt); }
.photos figcaption { display: flex; gap: 4px; margin-top: 4px; }
@media (max-width: 640px) { .libgrid { grid-template-columns: repeat(2, 1fr); } }
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; }
table.intake input:not([type=checkbox]), .libcard input[name^="to_"] { font: inherit; font-size: .95rem; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; min-height: 0; background: #fff; }
table.intake input[type=date] { width: 150px; }
table.intake input:disabled { background: transparent; border-color: transparent; color: inherit; }
[hidden] { display: none !important; }
/* R13 eBay */
ol.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
ol.steps li.done h3::after { content: " ✓"; color: var(--felt); }
table.kv td:first-child { color: var(--muted); white-space: nowrap; width: 1%; }
table.kv code { word-break: break-all; user-select: all; }

/* time clock & labor (R19) */
.role-store { --rc: #1c7ed6; } .role-kitchen { --rc: #e8590c; } .role-manager { --rc: #7048e8; }
.pill.role-store, .pill.role-kitchen, .pill.role-manager { background: color-mix(in srgb, var(--rc) 14%, #fff); color: color-mix(in srgb, var(--rc) 80%, #000); }
.tc-wrap { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 18px; align-items: start; }
.tc-pad { text-align: center; }
.tc-pad h1 { margin-bottom: 4px; }
.tc-dots { font-size: 2rem; letter-spacing: .3em; min-height: 3rem; color: var(--felt); }
.tc-dots[hidden], .tc-keys[hidden] { display: none; }
.tc-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tc-keys button { min-height: 68px; font: 800 1.6rem var(--display); border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius-s); color: var(--ink); cursor: pointer; }
.tc-keys button:active { background: var(--felt-soft); }
.tc-keys .soft { font: 700 1rem var(--body); color: var(--muted); }
.tc-keys .go { background: var(--felt); border-color: var(--felt); color: #fff; font: 700 1.1rem var(--body); }
.tc-who { padding: 12px 0; }
.tc-name { font: 800 2rem var(--display); }
.tc-act { justify-content: center; margin-top: 18px; }
.tc-act .btn { min-height: 64px; min-width: 150px; font-size: 1.2rem; }
.tc-act .btn[hidden] { display: none; }
.tc-done { margin-top: 14px; padding: 16px; border-radius: var(--radius-s); background: #d3f9d8; color: #1b5e20; font-weight: 700; font-size: 1.1rem; }
.tc-err { color: var(--dice); font-weight: 700; min-height: 1.5em; margin: 10px 0 0; }
.tc-bars { display: grid; gap: 8px; margin-bottom: 14px; }
.tc-bar { display: grid; grid-template-columns: 90px 1fr 110px; gap: 10px; align-items: center; }
.tc-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.tc-track { height: 14px; background: #eef1ef; border-radius: 99px; overflow: hidden; }
.tc-track i { display: block; height: 100%; background: var(--rc); border-radius: 99px; }
@media (max-width: 760px) { .tc-wrap { grid-template-columns: 1fr; } .tc-bar { grid-template-columns: 80px 1fr 90px; } }
@media (max-width: 1440px) { .topbar nav a { padding: 8px 9px; } .brand { margin-right: 8px; } }

/* R21 live product search */
.combo.ps { flex: 1; min-width: 220px; }
.combo.ps > input { width: 100%; }
.combo.ps .combo-list small { line-height: 1.3; }

/* R22 phone camera barcode scanning */
.cam-bar { gap: 8px; align-items: center; }
.cam-bar label.btn { cursor: pointer; }
.cam-note { font-size: .92rem; }
.cam-overlay { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; flex-direction: column; }
.cam-overlay video { flex: 1; width: 100%; min-height: 0; object-fit: cover; }
.cam-guide { position: absolute; left: 10%; right: 10%; top: 25%; height: 50%; max-height: calc(100% - 170px);
  border: 3px solid #f5c400; border-radius: 12px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.cam-ctl { background: #111; color: #fff; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); text-align: center; }
.cam-ctl .row { justify-content: center; gap: 10px; }
.cam-msg { margin: 0 0 10px; }

/* ======================================================================================
   R23 register screen themes — softer light, warm dark (less blue light), category tints.
   Only the register uses these (body.pos-page). Each register remembers its own choice.
   ====================================================================================== */
body.pos-page {
  --paper: #e6e3dc;  --card: #f3f0ea;  --tile: #f7f5f0;  --chip: #e2ded5;  --field: #faf8f4;
  --ink: #181b1a;    --muted: #4c5451; --line: #bfc2ba;
  background: var(--paper); color: var(--ink);
}
html[data-pos-theme="dark"] body.pos-page {
  --paper: #151311;  --card: #1d1a17;  --tile: #24201c;  --chip: #2a2621;  --field: #24201c;
  --ink: #ebe2d4;    --muted: #a99f91; --line: #3b352e;
  --felt: #2c5f50;   --felt-soft: #2a2621; --meeple: #d6a22a; --meeple-ink: #1f1700;
  --go: #8cc47f;     --dice: #e58a78;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-pos-theme="auto"] body.pos-page, html:not([data-pos-theme]) body.pos-page {
    --paper: #151311;  --card: #1d1a17;  --tile: #24201c;  --chip: #2a2621;  --field: #24201c;
    --ink: #ebe2d4;    --muted: #a99f91; --line: #3b352e;
    --felt: #2c5f50;   --felt-soft: #2a2621; --meeple: #d6a22a; --meeple-ink: #1f1700;
    --go: #8cc47f;     --dice: #e58a78;
    color-scheme: dark;
  }
}
/* category color as used on screen: as-is in light, softened toward warm cream in dark */
body.pos-page .prod, body.pos-page .cats button { --cc: var(--c, #6c7a75); --mix: 13%; --edge: 32%; }
html[data-pos-theme="dark"] body.pos-page .prod, html[data-pos-theme="dark"] body.pos-page .cats button {
  --cc: color-mix(in srgb, var(--c, #6c7a75) 68%, #e9dcc6); --mix: 22%; --edge: 40%; }
@media (prefers-color-scheme: dark) {
  html[data-pos-theme="auto"] body.pos-page .prod, html[data-pos-theme="auto"] body.pos-page .cats button {
    --cc: color-mix(in srgb, var(--c, #6c7a75) 68%, #e9dcc6); --mix: 22%; --edge: 40%; }
  html[data-pos-theme="auto"] body.pos-page .topbar, html[data-pos-theme="auto"] body.pos-page .topbar nav a.on { background: #10201b; }
}
html[data-pos-theme="dark"] body.pos-page .topbar, html[data-pos-theme="dark"] body.pos-page .topbar nav a.on { background: #10201b; }

body.pos-page .pos-search, body.pos-page .cats, body.pos-page .cart { background: var(--card); }
body.pos-page .subs { background: var(--paper); }
body.pos-page .prods { background: var(--paper); }
body.pos-page .pos-left { border-right-color: var(--line); }

/* item tiles: tinted by category, thick category stripe, strong text */
body.pos-page .prod { background: var(--tile); background: color-mix(in srgb, var(--cc) var(--mix), var(--tile));
  border: 1px solid var(--line); border-color: color-mix(in srgb, var(--cc) var(--edge), var(--line));
  border-left: 8px solid var(--cc); color: var(--ink); }
body.pos-page .prod:hover { border-color: var(--cc); border-left-color: var(--cc); }
body.pos-page .prod:active { transform: translateY(1px); }
body.pos-page .prod .meta { color: var(--muted); }
body.pos-page .prod .meta .price { color: var(--ink); font-size: 1rem; }
body.pos-page .prod small.muted { color: var(--muted); }
body.pos-page .prod.out { opacity: .5; }
body.pos-page .grp { color: var(--muted); }

/* category chips: tinted with their color; the selected one gets a full-color outline + underline */
body.pos-page .cats button { background: var(--chip); background: color-mix(in srgb, var(--cc) var(--mix), var(--chip));
  border: 2px solid transparent; border-color: color-mix(in srgb, var(--cc) var(--edge), transparent); color: var(--ink); }
body.pos-page .cats button .sw { background: var(--cc); }
body.pos-page .cats button.on { background: color-mix(in srgb, var(--cc) 34%, var(--chip)); border-color: var(--cc);
  box-shadow: inset 0 -4px 0 var(--cc); }
body.pos-page .cats button.quick { background: var(--meeple); color: var(--meeple-ink); border-color: transparent; }
body.pos-page .cats button.quick.on { border-color: var(--ink); box-shadow: none; }
body.pos-page .subs button { background: var(--field); color: var(--ink); border-color: var(--line); }
body.pos-page .subs button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* fields, buttons, cart, dialogs */
body.pos-page input:not([type=checkbox]):not([type=radio]), body.pos-page select, body.pos-page textarea {
  background: var(--field); color: var(--ink); border-color: var(--line); }
body.pos-page ::placeholder { color: var(--muted); opacity: 1; }
body.pos-page .btn { background: var(--field); color: var(--ink); border-color: var(--line); }
body.pos-page .btn:hover { border-color: var(--ink); }
body.pos-page .btn.primary { background: var(--felt); border-color: var(--felt); color: #fff; }
body.pos-page .btn.go { background: var(--meeple); border-color: var(--meeple); color: var(--meeple-ink); }
body.pos-page .btn.danger { color: var(--dice); border-color: color-mix(in srgb, var(--dice) 45%, var(--line)); }
body.pos-page .cart-head, body.pos-page .cline { border-color: var(--line); }
body.pos-page .cline .ctl button, body.pos-page .cashkeys button { background: var(--field); color: var(--ink); border-color: var(--line); }
body.pos-page .totals { border-top-color: var(--ink); }
body.pos-page .tabbar { background: color-mix(in srgb, var(--meeple) 18%, var(--card)); border-color: var(--meeple); }
body.pos-page dialog { background: var(--card); color: var(--ink); border-color: var(--ink); box-shadow: 6px 6px 0 rgba(0,0,0,.35); }
body.pos-page dialog::backdrop { background: rgba(10, 8, 6, .6); }
body.pos-page .mods label, body.pos-page fieldset { border-color: var(--line); }
body.pos-page .pos a:not(.btn), body.pos-page dialog a:not(.btn) { color: var(--felt); }
html[data-pos-theme="dark"] body.pos-page .pos a:not(.btn), html[data-pos-theme="dark"] body.pos-page dialog a:not(.btn) { color: #9ccbb8; }
@media (prefers-color-scheme: dark) { html[data-pos-theme="auto"] body.pos-page .pos a:not(.btn), html[data-pos-theme="auto"] body.pos-page dialog a:not(.btn) { color: #9ccbb8; } }
body.pos-page #themeBtn { white-space: nowrap; }

/* kitchen: add-on tickets (food added to a tab after the first send) */
.tkt-h .addon-tag { display: inline-block; vertical-align: middle; font: 700 .8rem var(--body); background: var(--dice); color: #fff;
  padding: 2px 8px; border-radius: 999px; letter-spacing: .02em; }

/* register: 86'd items and 86 mode */
.prod.is86 { opacity: .6; }
.prod.is86 b { text-decoration: line-through; text-decoration-thickness: 2px; }
.prod.is86 .meta span:first-child { color: var(--dice); font-weight: 700; }
.pos.mode86 .prods { outline: 3px dashed var(--dice); outline-offset: -3px; border-radius: var(--radius-s); }
.pos.mode86 .prod { cursor: crosshair; }
#eightySixBtn[aria-pressed="true"] { background: var(--dice); color: #fff; border-color: var(--dice); }

/* register menu page */
.menu-layout { display: grid; grid-template-columns: minmax(280px, 1fr) 2.6fr; gap: 16px; align-items: start; }
@media (max-width: 960px) { .menu-layout { grid-template-columns: 1fr; } }
.menu-layout tr.sel td { background: color-mix(in srgb, var(--felt) 10%, transparent); }
.menu-layout tr.is86 td:first-child b { text-decoration: line-through; color: var(--muted); }
.menu-layout h4 { margin: 18px 0 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 12px; }
.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.modgrid .chk { display: block; padding: 3px 0; }

/* end-of-day close */
.close-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 960px) { .close-layout { grid-template-columns: 1fr; } }
.denoms { display: grid; grid-template-columns: 1fr 90px 90px; gap: 6px 10px; align-items: center; }
.denoms .num, .denoms output { text-align: right; font-variant-numeric: tabular-nums; }
.overshort { font: 800 1.6rem var(--display); }
.overshort.short { color: var(--dice); }
.overshort.over { color: #b07b00; }
.overshort.even { color: var(--felt); }
.warnbox { border-left: 6px solid #d9a400; }
@media print { .close-layout { grid-template-columns: 1fr 1fr; } .noprint, .topbar { display: none !important; } }