/* Warehouse portal: one look for the TV screens (html.tv – sized to the screen) and the handsets / laptops.
   Colours follow the dispatch app's, so the three apps feel like one. */
:root {
  --bg:#f6f7f9; --card:#fff; --ink:#1c2230; --muted:#6b7385; --line:#e3e6ec; --accent:#2563eb; --soft:#eef1f6;
  --ok:#15803d; --ok-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7; --bad:#b91c1c; --bad-bg:#fee2e2; --info:#0f766e; --info-bg:#ccfbf1;
  --nav-bg:#111827; --nav-ink:#e5e7eb; --nav-muted:#aeb5c2;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#161a22; --card:#1f2430; --ink:#f4f6fa; --muted:#b3bac8; --line:#394152; --accent:#3b82f6; --soft:#272d3a;
    --ok:#4ade80; --ok-bg:#14532d; --warn:#fbbf24; --warn-bg:#4a3510; --bad:#f87171; --bad-bg:#4c1d1d; --info:#5eead4; --info-bg:#134e4a; --nav-bg:#0d1016; color-scheme:dark; }
}
:root[data-theme="dark"], html.tv { --bg:#0f1218; --card:#1a1f29; --ink:#f4f6fa; --muted:#a3abbb; --line:#323a4a; --accent:#3b82f6; --soft:#232a37;
  --ok:#4ade80; --ok-bg:#14532d; --warn:#fbbf24; --warn-bg:#4a3510; --bad:#f87171; --bad-bg:#5a1d1d; --info:#5eead4; --info-bg:#134e4a; --nav-bg:#0b0d12; color-scheme:dark; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { font-size:15px; }
body { margin:0; font:1rem/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%; }
a { color:var(--accent); }
button, select, input { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:7px 12px; }
button { cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.muted { color:var(--muted); }
.num { font-variant-numeric:tabular-nums; }
.mock { background:#fef3c7; color:#92400e; padding:2px 8px; border-radius:99px; font-size:.8rem; white-space:nowrap; }

/* ---- handset / laptop shell ---- */
.top { position:sticky; top:0; z-index:5; background:var(--nav-bg); color:var(--nav-ink); }
.top .bar { display:flex; align-items:center; gap:10px; padding:10px 16px; }
.top .brand { font-weight:700; color:#fff; text-decoration:none; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.top .brand i { width:10px; height:10px; border-radius:3px; background:var(--accent); }
.top .spacer { flex:1; }
.top .day { display:flex; border:1px solid #374151; border-radius:99px; overflow:hidden; }
.top .day button { border:0; border-radius:0; background:transparent; color:var(--nav-muted); padding:5px 12px; font-size:.9rem; }
.top .day button.on { background:#374151; color:#fff; font-weight:600; }
.top .me { color:var(--nav-muted); font-size:.85rem; text-decoration:none; }
.tabs { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; padding:0 8px; }
.tabs::-webkit-scrollbar { display:none; }
.tabs a { color:var(--nav-muted); text-decoration:none; padding:9px 12px; white-space:nowrap; border-bottom:3px solid transparent; font-size:.95rem; display:flex; gap:6px; align-items:center; }
.tabs a.on { color:#fff; border-bottom-color:var(--accent); font-weight:600; }
.tabs .count { font-size:.75rem; font-weight:700; min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:#374151; color:#fff; }
.tabs .count.bad { background:#b91c1c; }
main { padding:14px 16px 40px; max-width:1700px; margin:0 auto; }
.problems { background:var(--warn-bg); color:var(--warn); border-radius:10px; padding:8px 12px; margin-bottom:12px; font-size:.9rem; }

/* ---- boards (shared by TV and handset) ---- */
h2.sec { font-size:1.05rem; margin:18px 0 8px; display:flex; align-items:baseline; gap:4px 8px; flex-wrap:wrap; }
h2.sec:first-child { margin-top:0; }
h2.sec .muted { font-weight:400; font-size:.9rem; }
.empty { color:var(--muted); padding:18px; text-align:center; background:var(--card); border:1px dashed var(--line); border-radius:12px; }
.cards { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; border-left-width:6px; min-width:0; }
.card.ready { border-left-color:var(--ok); }
.card.ok { border-left-color:var(--line); }
.card.warn { border-left-color:var(--warn); }
.card.bad, .card.late { border-left-color:var(--bad); }
.card.late { background:linear-gradient(0deg, var(--bad-bg), var(--card) 70%); }
.card.gone { opacity:.55; }
.card.back { border-left-color:var(--info); }
.card .head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.card .big { font-size:1.6rem; font-weight:700; line-height:1.1; }
.card .cd { font-weight:600; }
.card .who { margin-left:auto; text-align:right; font-weight:600; }
.card .who small { display:block; font-weight:400; color:var(--muted); }
.card .line2 { color:var(--muted); font-size:.9rem; margin-top:2px; }
.cd.warn { color:var(--warn); } .cd.bad, .cd.late { color:var(--bad); } .cd.ready { color:var(--ok); }

.bar { height:10px; background:var(--soft); border-radius:99px; overflow:hidden; display:flex; margin:10px 0 4px; }
.bar i { display:block; height:100%; }
.bar i.out { background:#64748b; } .bar i.prep { background:var(--ok); } .bar i.alloc { background:color-mix(in srgb, var(--ok) 40%, transparent); }
.barlabel { display:flex; gap:10px; font-size:.85rem; flex-wrap:wrap; }
.barlabel b { font-variant-numeric:tabular-nums; }

.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.chip { font-size:.8rem; padding:2px 8px; border-radius:99px; background:var(--soft); color:var(--ink); white-space:nowrap; }
.chip.bad { background:var(--bad-bg); color:var(--bad); font-weight:600; }
.chip.warn { background:var(--warn-bg); color:var(--warn); font-weight:600; }
.chip.ok { background:var(--ok-bg); color:var(--ok); font-weight:600; }
.chip.info { background:var(--info-bg); color:var(--info); font-weight:600; }

.jobs { list-style:none; margin:8px 0 0; padding:0; border-top:1px solid var(--line); }
.jobs li { display:flex; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); min-width:0; }
.jobs li:last-child { border-bottom:0; }
.jobs .no { font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.jobs .what { flex:1; min-width:0; }
.jobs .what div, .jobs .what small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jobs .what .no { margin-right:4px; }
.jobs .what small { color:var(--muted); }
.jobs .pct { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.jobs a.row { display:flex; gap:10px; align-items:center; color:inherit; text-decoration:none; width:100%; min-width:0; }
.jobs div.row { display:flex; gap:10px; align-items:center; width:100%; min-width:0; }
.jobs a.row::after { content:'›'; color:var(--muted); font-size:1.3rem; }
.mini { width:54px; height:6px; border-radius:99px; background:var(--soft); overflow:hidden; flex:none; }
.mini i { display:block; height:100%; background:var(--ok); }

.eta { font-size:2rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.eta-src { font-size:.8rem; color:var(--muted); }
.pulse { animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 6px color-mix(in srgb, var(--info) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation:none; outline:3px solid var(--info); } }

.team { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.team .card ul { list-style:none; padding:0; margin:6px 0 0; }
.team .card li { padding:3px 0; }
.tag { font-size:.75rem; color:var(--muted); margin-left:4px; }
.notes { white-space:pre-wrap; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.notes + .notes { margin-top:8px; }
.notes .by { font-size:.8rem; color:var(--muted); margin-top:4px; }

table.list { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
table.list td, table.list th { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
table.list th { font-size:.8rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
table.list tr:last-child td { border-bottom:0; }
table.list tr.short td { background:var(--bad-bg); }
table.list tr.short td:first-child { box-shadow:inset 5px 0 0 var(--bad); }

/* ---- Prep / De-prep boards: columns side by side on wide screens, stacked on phones ---- */
/* Columns never get narrower than a readable card; on a screen too narrow for them all, the board scrolls sideways. */
.board { display:grid; gap:12px; grid-auto-flow:column; grid-auto-columns:minmax(250px, 1fr); align-items:start; overflow-x:auto; padding-bottom:4px; }
.col { background:var(--soft); border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.col h3 { margin:2px 4px; font-size:.95rem; display:flex; align-items:center; gap:8px; }
.col.todo h3 { color:var(--bad); } .col.awaiting h3 { color:var(--warn); } .col.overdue h3 { color:var(--bad); }
.col.overdue { box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--bad) 45%, transparent); } .col.prepping h3 { color:var(--warn); } .col.ready h3 { color:var(--ok); } .col.coming h3 { color:var(--info); }
.col .sub { color:var(--muted); font-size:.8rem; margin:-6px 4px 0; }
.col.waiting { background:transparent; border:2px dashed var(--line); }
.col .none { color:var(--muted); font-size:.85rem; padding:6px 4px; }
a.card, .col > div.card { display:block; color:inherit; text-decoration:none; }
.col .jt { font-weight:600; margin-top:4px; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .head.tight { flex-wrap:nowrap; }
.card .head.tight .big { white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.card .head.tight .who { white-space:nowrap; flex-shrink:0; }
.card .event { font-size:1.25rem; font-weight:700; line-height:1.2; min-width:0; overflow-wrap:anywhere; }
.col .status { font-size:.85rem; margin-top:2px; overflow-wrap:anywhere; }
/* In a column, warnings wrap inside the card rather than running out of it. */
.col .chip, .card .chip { white-space:normal; overflow-wrap:anywhere; line-height:1.3; padding:3px 8px; border-radius:7px; }
.col .how, .col .barlabel { overflow-wrap:anywhere; }
.col .jobs.done .what div, .col .jobs.done .what small { white-space:normal; overflow-wrap:anywhere; }
.col .js { color:var(--muted); font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.col .how { font-size:.85rem; margin-top:4px; }
.col .jobs.done { background:var(--card); border-radius:10px; border:1px solid var(--line); margin:0; padding:0 10px; }
.col .jobs.done a.row::after { content:none; }
.col .jobs li.past { opacity:.5; }
.col .jobs .side { min-width:3.2em; }
.jobs .side { text-align:right; white-space:nowrap; }
.jobs .side small { display:block; color:var(--muted); }
/* Sub-rentals dashboard: what needs sorting above the four stages */
.subok { margin:0 0 12px; }
.card.subprob { margin-bottom:14px; padding-top:4px; padding-bottom:4px; }
.subprob .jobs { border-top:0; margin:0; column-width:26rem; column-gap:28px; }
.subprob .jobs li { break-inside:avoid; }
.subprob .jobs .what small, .board.subs .jobs .what div, .board.subs .jobs .what small { white-space:normal; overflow-wrap:anywhere; }
.board.subs .col > .sub + .sub, .board.subs .col > .card + .sub { margin:6px 4px 0; font-weight:600; }
@media (max-width: 700px) { .board { grid-auto-flow:row; grid-template-columns:1fr; overflow-x:visible; } }

/* ---- Area view on a phone (opened from a TV's QR code) ---- */
.areahead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.areahead h2 { margin:0; font-size:1.4rem; }
.areahead .actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:10px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.areahead + h2.sec.pagehead { display:none; }

/* ---- Additions from Google Chat ---- */
.addchips .chip.bad { font-weight:700; }
.chip.urgent { background:var(--bad); color:#fff; }
.chip .via { font-weight:400; opacity:.85; }

/* ---- Camera room tickets: a kitchen order screen ---- */
.ticket .tlines { margin-top:8px; }
.ticket .tline { display:block; padding:5px 0; }
.ticket .t1 { display:flex; gap:8px; align-items:baseline; }
.ticket .tick { min-width:2.6em; font-weight:800; font-variant-numeric:tabular-nums; color:var(--warn); }
.ticket .tline.done .tick { color:var(--ok); }
.ticket .tline.done .tn { color:var(--muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--muted) 60%, transparent); }
.ticket .tn { font-weight:600; min-width:0; overflow-wrap:anywhere; }
.ticket .assets { display:flex; gap:4px; flex-wrap:wrap; margin:4px 0 0 3.1em; }
.ticket .chips { margin-left:0; }
.ticket .tline .chips { margin:4px 0 0 3.1em; }
.ticket .asset { font-size:.78rem; padding:1px 7px; border-radius:6px; background:var(--soft); font-variant-numeric:tabular-nums; }
.ticket .asset.allocated, .ticket .asset.reserved { background:var(--warn-bg); color:var(--warn); }
.card.prepped { background:color-mix(in srgb, var(--ok-bg) 70%, var(--card)); border-color:var(--ok); }
.rail { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items:start; }
.railhead { display:flex; gap:6px; flex-wrap:wrap; margin:-2px 0 10px; }
.ticket { padding-top:0; overflow:hidden; }
.ticket .banner { margin:0 -14px 10px; padding:5px 14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem;
  background:var(--soft); color:var(--muted); }
.ticket .banner.prepping, .ticket .banner.checking { background:var(--warn-bg); color:var(--warn); }
.ticket .banner.prepped, .ticket .banner.checked_in { background:var(--ok); color:#fff; }
.ticket .banner.overdue { background:var(--bad); color:#fff; }
.ticket .banner.coming { background:var(--info-bg); color:var(--info); }
html.tv .rail { grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); gap:.8rem; }
html.tv .ticket .banner { margin:0 -.9rem .5rem; padding:.3rem .9rem; }

/* ---- Camera prep / de-prep: a card per job, each line still to do with its assets ---- */
.ccards { align-items:start; }
.clines .cline { display:block; }
.clines .cl1 { font-weight:600; }
.clines .cl1 .num { font-size:1.1rem; }
.clines .assets { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.clines .asset { font-size:.78rem; padding:1px 7px; border-radius:6px; background:var(--soft); font-variant-numeric:tabular-nums; }
.clines .asset.allocated, .clines .asset.reserved { background:var(--warn-bg); color:var(--warn); }

/* ---- Jobs lists: one row per job with a big progress bar and X / Y ---- */
.joblist { display:flex; flex-direction:column; gap:8px; }
.jl { display:grid; grid-template-columns:8.5em minmax(0, 1.6fr) minmax(0, 1fr) 6.5em; gap:14px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-left:6px solid var(--line); border-radius:12px; padding:10px 14px; color:inherit; text-decoration:none; }
.jl.ready { border-left-color:var(--ok); } .jl.warn { border-left-color:var(--warn); } .jl.bad, .jl.late { border-left-color:var(--bad); }
.jl .t b { display:block; font-size:1.35rem; }
.jl .t .cd { font-size:.85rem; }
.jl .j { min-width:0; overflow-wrap:anywhere; }
.jl .j small { display:block; color:var(--muted); font-size:.85rem; }
.jl .x { text-align:right; }
.jl .x small { display:block; color:var(--muted); font-size:.8rem; }
.xy { font-size:1.35rem; white-space:nowrap; }
.bar.big { height:16px; margin:0; }
@media (max-width: 700px) {
  .jl { grid-template-columns:1fr auto; gap:6px 10px; }
  .jl .t { grid-column:1; } .jl .x { grid-column:2; grid-row:1; } .jl .j, .jl .p { grid-column:1 / -1; }
}

/* ---- TV: everything scales with the screen; no scrolling, no links ---- */
html.tv { font-size:clamp(16px, 1.45vw, 52px); }
html.tv body { overflow:hidden; height:100vh; display:flex; flex-direction:column; }
.tvtop { display:flex; align-items:center; gap:1.2rem; padding:.45rem 1.4rem; background:var(--nav-bg); }
.tvtop .clock { font-size:2.2rem; font-weight:800; font-variant-numeric:tabular-nums; }
.tvtop .title { font-size:1.6rem; font-weight:700; white-space:nowrap; }
.tvtop .clock, .tvtop .mock { flex-shrink:0; }
.tvbody { flex:1; padding:1rem 1.4rem; overflow:hidden; position:relative; }
.tvdots { display:flex; gap:.5rem; justify-content:center; padding:.4rem; }
.tvdots i { width:2.2rem; height:.35rem; border-radius:99px; background:var(--line); overflow:hidden; }
.tvdots i.on b { display:block; height:100%; background:var(--accent); animation:fill linear forwards; }
@keyframes fill { from { width:0 } to { width:100% } }
html.tv .cards { grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr)); gap:.8rem; }
html.tv .card { padding:.7rem .9rem; }
html.tv h2.sec { font-size:1rem; margin:.6rem 0 .4rem; }
html.tv .pagehead { display:none; } /* the page title is in the top bar */
html.tv .card { border-radius:.9rem; }
html.tv .team { grid-template-columns:repeat(auto-fill, minmax(13rem, 1fr)); }
html.tv .jobs a.row::after { content:none; }
.qr { margin-left:auto; display:flex; align-items:center; gap:.7rem; }
.qr img { width:4.4rem; height:4.4rem; display:block; background:#fff; padding:.25rem; border-radius:.4rem; }
.qr span { font-size:.8rem; color:var(--nav-muted); text-align:right; max-width:9rem; line-height:1.25; }
.stale { position:fixed; left:1rem; bottom:1rem; background:var(--warn-bg); color:var(--warn); padding:.4rem .8rem; border-radius:.6rem; font-weight:600; }

/* ---- pick list ---- */
.pick .grp { font-weight:700; margin:16px 0 4px; font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.pick .item { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:6px; border-left:5px solid var(--line); }
.pick .item.done { border-left-color:var(--ok); }
.pick .item.part { border-left-color:var(--warn); }
.pick .item.short { border-left-color:var(--bad); }
.pick .item .l1 { display:flex; gap:10px; align-items:baseline; }
.pick .item .q { font-weight:800; font-size:1.15rem; min-width:2.2em; font-variant-numeric:tabular-nums; }
.pick .item .n { flex:1; font-weight:600; }
.pick .item.acc .n { font-weight:400; }
.pick .assets { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.pick .asset { font-size:.78rem; padding:1px 7px; border-radius:6px; background:var(--soft); font-variant-numeric:tabular-nums; }
.pick .asset.prepared, .pick .asset.out, .pick .asset.in { background:var(--ok-bg); color:var(--ok); }
.pick .asset.allocated { background:var(--warn-bg); color:var(--warn); }
.filters { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.filters button { border-radius:99px; padding:5px 12px; font-size:.9rem; }
.filters button.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.instr { background:var(--warn-bg); color:var(--ink); border-radius:10px; padding:10px 12px; margin:10px 0; white-space:pre-wrap; font-size:.92rem; }

@media (max-width: 560px) {
  main { padding:12px 12px 40px; }
  .top .bar { padding:8px 12px; gap:8px; }
  .top .mock { display:none; }
  .top .day button { padding:5px 9px; }
  .card .big { font-size:1.4rem; }
  .eta { font-size:1.6rem; }
}

/* ---- zones: the sub-navigation (Board / Jobs list, TV view) and the home page's tiles ---- */
.subnav { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.subnav a { text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line); padding:5px 12px; border-radius:99px; font-size:.9rem; }
.subnav a.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.subnav .spacer { flex:1; }
.subnav a.tvlink { color:var(--muted); background:transparent; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.tile { display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line); border-top:6px solid var(--line); border-radius:12px; padding:14px 16px; color:var(--ink); text-decoration:none; min-width:0; }
a.tile:hover { border-color:var(--accent); }
.tile.ok { border-top-color:var(--ok); }
.tile.warn { border-top-color:var(--warn); }
.tile.bad { border-top-color:var(--bad); }
.tile.soon { border-top-color:var(--line); border-style:dashed; border-top-style:solid; }
.tilehead { display:flex; align-items:center; gap:8px; }
.tilehead h3 { margin:0; font-size:1.15rem; }
.tilebig { display:flex; align-items:baseline; gap:8px; }
.tilebig b { font-size:2.4rem; line-height:1; }
.tilebig span { color:var(--muted); }
.tilelines { list-style:none; margin:0; padding:0; display:grid; gap:2px; font-size:.95rem; }
.tilelines li.bad { color:var(--bad); font-weight:600; }
.tilelines li.warn { color:var(--warn); font-weight:600; }
.tilerisk { margin-top:auto; background:var(--bad-bg); color:var(--bad); border-radius:8px; padding:6px 10px; font-size:.9rem; }
html.tv .tiles { grid-template-columns:repeat(4, 1fr); gap:1.2vw; }
html.tv .tile { padding:1.2vw 1.4vw; }
html.tv .tilehead h3 { font-size:1.9vw; }
html.tv .tilebig b { font-size:5vw; }
html.tv .tilebig span, html.tv .tilelines, html.tv .tilerisk { font-size:1.4vw; }
@media (max-width: 700px) { .tiles { grid-template-columns:1fr 1fr; gap:8px; } .tile { padding:10px 12px; } .tilebig b { font-size:1.9rem; } .tilelines { font-size:.85rem; } }
@media (max-width: 380px) { .tiles { grid-template-columns:1fr; } }

/* ---- Digi lanes: To prep → Prepping → Prepped (and Due back → Checking in → Checked in), left to right ---- */
.lanes { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, .55fr); gap:12px; align-items:start; }
.lane { min-width:0; }
.lanehead { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:1rem; }
.lanehead .banner { padding:4px 10px; border-radius:6px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; background:var(--soft); color:var(--ink); }
.lanehead .banner.prepping, .lanehead .banner.checking { background:var(--warn-bg); color:var(--warn); }
.lanehead .banner.prepped, .lanehead .banner.checked_in { background:var(--ok); color:#fff; }
.lanehead .banner.coming { background:var(--info-bg); color:var(--info); }
.lane .stack { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); align-items:start; }
.lane.done .stack { grid-template-columns:1fr; gap:6px; }
.lane.done .lanehead { opacity:.7; }
.donerow { display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 10px; align-items:baseline; padding:6px 10px; border-radius:8px;
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--ok); color:var(--muted); text-decoration:none; font-size:.85rem; opacity:.75; min-width:0; }
a.donerow:hover { opacity:1; }
.donerow .dr1 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.donerow .tick { color:var(--ok); font-weight:800; margin-right:4px; }
.donerow .no { color:var(--ink); }
.donerow .dr2 { white-space:nowrap; }
html.tv .lanes { gap:.8rem; }
html.tv .lane .stack { grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.6rem; }
html.tv .lane.done .stack { grid-template-columns:1fr; gap:.35rem; }
html.tv .donerow { padding:.3rem .6rem; }
@media (max-width: 700px) { .lanes { grid-template-columns:1fr !important; } }