/* PBS Bar — a till is used standing up, in bad light, by someone holding a pint in the other hand.
   Big targets, high contrast, no hover-only affordances, nothing that needs a steady finger. */
:root{
  --ink:#10201a; --paper:#f7f5ef; --line:#d8d3c6;
  --green:#1b3a2f; --green-2:#2c5c48; --gold:#c9a227;
  --red:#a52a1a; --amber:#b06d00; --muted:#6b6b60;
  --tap:60px;                       /* nothing interactive is smaller than this */
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{ --ink:#ece9e1; --paper:#141714; --line:#2f3530; --muted:#9a9a8e; }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  font:16px/1.45 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--paper); color:var(--ink);
  -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none;
}
.app{display:flex;flex-direction:column;height:100dvh}
.bar{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--green);color:#f7f5ef;flex:0 0 auto
}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.02em}
.mark{
  display:grid;place-items:center;width:30px;height:30px;border-radius:7px;
  background:var(--gold);color:#1b3a2f;font-size:13px;font-weight:800
}
.venue{flex:1;text-align:center;font-size:14px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{display:flex;gap:6px}
.pill{font-size:11px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.16);white-space:nowrap}
.pill.live{background:#2f7d5a}
.pill.warn{background:var(--amber)}
.hidden{display:none}

/* min-height:0 is doing real work here. Without it a flex child refuses to shrink below its content,
   the till grows past the bottom of the screen, and the TOTAL and the Pay button end up somewhere
   below the tablet - which is how you ship a till nobody can take money on. */
.screen{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.loading{padding:40px;text-align:center;color:var(--muted)}

.tabs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  flex:0 0 auto;padding-bottom:var(--safe-b)
}
.tab{
  min-height:var(--tap);border:0;background:var(--paper);color:var(--muted);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer
}
.tab.on{background:var(--green);color:#f7f5ef}

/* ---------- till ---------- */
.till{display:grid;grid-template-columns:1fr 380px;flex:1;min-height:0}
.till > div{min-height:0}
@media (max-width:820px){ .till{grid-template-columns:1fr;grid-template-rows:1fr auto} }
/* the keys scroll; the bill does not */
.till > div:first-child{display:flex;flex-direction:column;overflow:hidden}
.grid{overflow:auto;flex:1}

.cats{display:flex;gap:6px;padding:8px;overflow-x:auto;border-bottom:1px solid var(--line)}
.cats button{
  min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:8px;
  background:transparent;color:var(--ink);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer
}
.cats button.on{background:var(--green);color:#f7f5ef;border-color:var(--green)}

/* Bigger keys, fewer of them. 112px fitted more on screen and made every one of them a paragraph
   of small text; 150px fits the name of an actual dish at a size you can read standing up. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:10px}
.key{
  min-height:96px;padding:11px;border:1px solid var(--line);border-radius:12px;
  background:#fff;color:#10201a;display:flex;flex-direction:column;justify-content:space-between;
  font:inherit;text-align:left;cursor:pointer;line-height:1.2
}
@media (prefers-color-scheme:dark){ .key{background:#1d211d;color:var(--ink)} }
.key:active{transform:scale(.97)}
.key .n{font-size:15px;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.key .p{font-size:16px;font-weight:700;color:var(--green-2)}
.key .tag{position:absolute}
.key.age{border-color:var(--amber);border-width:2px}

.bill{display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--paper);min-height:0;overflow:hidden}
@media (max-width:820px){ .bill{border-left:0;border-top:1px solid var(--line);max-height:46dvh} }
.bill h2{margin:0;padding:10px 14px;font-size:14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.lines{flex:1;overflow:auto;min-height:60px}
.totals,.acts{flex:0 0 auto}
.line{display:flex;gap:8px;padding:13px 14px;border-bottom:1px solid var(--line);align-items:baseline}
.line .q{min-width:26px;font-weight:700;color:var(--muted)}
.line .nm{flex:1}
.line .amt{font-variant-numeric:tabular-nums;font-weight:600}
.line.void{opacity:.45;text-decoration:line-through}
.line small{display:block;color:var(--muted);font-size:12px;text-decoration:none}
.totals{padding:10px 14px;border-top:2px solid var(--ink);font-variant-numeric:tabular-nums}
.totals div{display:flex;justify-content:space-between;padding:2px 0}
.totals .big{font-size:26px;font-weight:800;padding-top:6px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;padding-bottom:calc(10px + var(--safe-b))}
button.act{
  min-height:var(--tap);border:1px solid var(--line);border-radius:10px;background:transparent;
  color:var(--ink);font:inherit;font-weight:700;cursor:pointer
}
button.act.go{background:var(--green);border-color:var(--green);color:#f7f5ef}
button.act.warn{border-color:var(--red);color:var(--red)}
button.act:disabled{opacity:.4}

/* ---------- floor ---------- */
.plan{position:relative;margin:12px;height:560px;max-width:920px}
.area{position:absolute;border:1px dashed var(--line);border-radius:10px}
.area b{position:absolute;top:6px;left:10px;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.tbl{
  position:absolute;min-width:46px;min-height:46px;border-radius:9px;border:2px solid var(--green-2);
  background:#fff;color:#10201a;display:grid;place-items:center;font-weight:700;font-size:13px;cursor:pointer
}
@media (prefers-color-scheme:dark){ .tbl{background:#1d211d;color:var(--ink)} }
.tbl small{display:block;font-weight:500;font-size:10px;color:var(--muted)}
.tbl.busy{background:var(--green);border-color:var(--green);color:#f7f5ef}
.tbl.busy small{color:rgba(255,255,255,.75)}
.tbl.held{border-color:var(--gold);border-style:dashed}

/* ---------- lists, forms, books ---------- */
.pad{padding:14px;max-width:820px;overflow:auto;flex:1}
.pad h2{margin:0 0 4px;font-size:18px}
.pad p.note{margin:0 0 16px;color:var(--muted);font-size:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
input,select{
  min-height:var(--tap);padding:0 12px;border:1px solid var(--line);border-radius:9px;
  background:transparent;color:var(--ink);font:inherit;min-width:110px
}
.card{border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px;background:#fff}
@media (prefers-color-scheme:dark){ .card{background:#1a1e1a} }
.card h3{margin:0 0 4px;font-size:15px}
.card .meta{color:var(--muted);font-size:13px}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.chip{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--line);color:var(--ink)}
.chip.o{background:var(--gold);color:#1b3a2f;font-weight:700}
table.z{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.z td{padding:6px 0;border-bottom:1px solid var(--line)}
table.z td:last-child{text-align:right;font-weight:600}
.sev{font-size:11px;font-weight:800;padding:2px 7px;border-radius:5px;margin-right:7px}
.sev.law{background:var(--red);color:#fff}
.sev.risk{background:var(--amber);color:#fff}
.sev.bp{background:var(--line);color:var(--ink)}
.empty{padding:30px;text-align:center;color:var(--muted)}
pre.slip{
  font:12px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;color:#10201a;
  border:1px solid var(--line);border-radius:9px;padding:12px;overflow:auto;white-space:pre
}
@media (prefers-color-scheme:dark){ pre.slip{background:#1a1e1a;color:var(--ink)} }

/* The demonstration notice and the header links (28 Sep 2026): every screen says the data is invented,
   and every screen - the till included - reaches help and the privacy notice. */
.demo{background:#7c2d12;color:#fff7ed;padding:6px 14px;text-align:center;font-size:13px;flex:0 0 auto}
.demo strong{color:#fff}
.links{display:flex;gap:2px;align-items:center}
.links a{color:#f7f5ef;font-size:12.5px;padding:0 6px;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline}
.links a:first-child{text-decoration:none;font-weight:700;border:1.5px solid currentColor;border-radius:50%;width:26px;height:26px;min-height:26px;justify-content:center;padding:0;margin-right:4px}
@media (max-width:560px){.links a:not(:first-child){font-size:11.5px;padding:0 3px}}

/* The open-tabs strip above the till (28 Sep 2026). */
.tillwrap{display:flex;flex-direction:column;flex:1;min-height:0}
.tabsbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.tabsbar .chip{min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit}
.tabsbar .chip.on{background:var(--green);color:#f7f5ef;border-color:var(--green)}
.tabsbar input{min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:inherit;max-width:200px}
.tabsbar .act{min-height:44px}
.pad label{display:block}
/* On a phone the strip is ONE row that scrolls sideways, so the keys keep their room (28 Sep 2026: a
   wrapped strip took three rows and squeezed the keys to a sliver). The group keeps its accessible name. */
@media (max-width:820px){
  .tabsbar{flex-wrap:nowrap;overflow-x:auto;padding:6px 10px}
  .tabsbar > .meta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tabsbar .chip,.tabsbar .act{flex:0 0 auto;white-space:nowrap}
  .tabsbar input{flex:0 0 140px}
}