/* Group Costing -- Cornish slate and sea-glass. One sans face (the PC's own
   Segoe UI), numbers in tabular figures so columns line up. */
:root{
  --slate:#22343a;--slate-2:#2d454c;--slate-ink:#dbe7e6;
  --sea:#2b7a73;--sea-dark:#21615b;--sea-tint:#e3f0ee;
  --brass:#b07d2b;--brass-tint:#f6ecd9;
  --ink:#1a2427;--muted:#5b6a6d;--line:#dde4e3;--bg:#f2f5f5;--card:#fff;
  --brand:var(--slate);--brand2:var(--sea);--accent:var(--brass);
  --ok:#2e7d4f;--bad:#b3261e;--warn:#9a6700;
  --radius:10px;--side:236px
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums}
a{color:var(--sea)}
a:hover{color:var(--sea-dark)}
:focus-visible{outline:3px solid #8cc9c2;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Shell: sidebar + main */
.shell{display:flex;min-height:100vh}
.side{width:var(--side);flex:0 0 var(--side);background:var(--slate);color:var(--slate-ink);display:flex;flex-direction:column;
  position:-webkit-sticky;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{display:flex;gap:10px;align-items:center;padding:18px 18px 14px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;line-height:1.2}
.side .brand small{display:block;font-weight:400;color:#9fb6b4;font-size:12px;margin-top:2px}
.brandmark{width:28px;height:28px;border-radius:7px;flex:0 0 28px;background:
  linear-gradient(160deg,transparent 52%,var(--sea) 52%),linear-gradient(160deg,#3d5a61 0,#3d5a61 100%)}
.side nav{padding:4px 10px 12px;flex:1}
.navgroup{padding:6px 0 8px;border-top:1px solid rgba(255,255,255,.07)}
.navgroup:first-child{border-top:0}
.navhead{font-size:12px;color:#8fa9a7;padding:6px 10px 3px}
.side nav a{display:flex;align-items:center;justify-content:space-between;color:var(--slate-ink);text-decoration:none;padding:7px 10px;border-radius:7px;font-size:14.5px}
.side nav a:hover{background:var(--slate-2);color:#fff}
.side nav a.on{background:#fff;color:var(--slate);font-weight:600;box-shadow:inset 3px 0 0 var(--brass)}
.navbadge{background:var(--bad);color:#fff;border-radius:10px;font-size:11.5px;padding:0 7px;font-weight:600}
.sidefoot{padding:12px 18px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;display:flex;flex-wrap:wrap;gap:4px 12px}
.sidefoot>div{flex-basis:100%}.sidefoot .muted{color:#8fa9a7}
.sidefoot a,.sidefoot button.link{color:#cfe0de;font-size:13px}
.mainwrap{flex:1;min-width:0;display:flex;flex-direction:column}
header.context{display:flex;align-items:center;gap:12px;padding:10px 24px;background:var(--card);border-bottom:1px solid var(--line);position:-webkit-sticky;position:sticky;top:0;z-index:20}
.where{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.where select.sitepick{width:auto;font-weight:600;padding:6px 30px 6px 12px;border-radius:20px;border:1px solid var(--line);background-color:var(--bg)}
.where select.deptpick,.wherepill.dept{background-color:var(--brass-tint);border-color:#e3cfa6;color:#6f4e14}
.wherepill{display:inline-block;padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:var(--bg);font-weight:600;font-size:14px}
.menubtn{display:none}

main{width:100%;max-width:1280px;margin:0 auto;padding:22px 28px 64px}
h1{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:2px 0 10px;line-height:1.25}
h1 .muted.small,h1 .small{font-weight:400;letter-spacing:0}
h2{font-size:18px;font-weight:600;margin:28px 0 10px}
h3{font-size:15px;font-weight:600}
h1+p.small.muted,h1+p.muted{max-width:80ch}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat .v{font-size:26px;font-weight:600;letter-spacing:-.01em}.stat .l{color:var(--muted);font-size:13px}
table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:13px;font-weight:600;color:var(--muted);background:#f7f9f9;white-space:nowrap}
tbody tr:hover td,table tr:hover>td{background-color:#f6faf9}
td.n,th.n{text-align:right;white-space:nowrap}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.tablewrap table{border:0}
form.inline{display:inline}
label{display:block;font-size:13px;color:var(--muted);margin:8px 0 3px}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=url],input[type=date],input[type=email],select,textarea{width:100%;padding:8px 10px;border:1px solid #c3cfcd;border-radius:8px;font:inherit;background:#fff;min-height:38px}
input:focus,select:focus,textarea:focus{border-color:var(--sea);outline:none;box-shadow:0 0 0 3px #cfe6e3}
textarea{min-height:90px}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.btn,button{display:inline-block;padding:8px 16px;border-radius:8px;border:1px solid var(--sea);background:var(--sea);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;min-height:38px}
.btn:hover,button:hover{background:var(--sea-dark);border-color:var(--sea-dark);color:#fff}
.btn.sec,button.sec{background:#fff;color:var(--sea);font-weight:500}
.btn.sec:hover,button.sec:hover{background:var(--sea-tint);color:var(--sea-dark)}
button.danger{background:var(--bad);border-color:var(--bad)}
button.link{background:none;border:0;color:inherit;padding:0;text-decoration:underline;cursor:pointer;font-weight:400;min-height:0}
button.link:hover{background:none;color:var(--sea-dark)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:12px}
.filters>*{flex:1 1 160px}.filters button{flex:0 0 auto}
.flash{padding:10px 12px;border-radius:8px;margin-bottom:10px;border:1px solid}
.flash.ok{background:#eef8f1;border-color:#b9dfc6;color:#1d5134}.flash.error{background:#fdeeee;border-color:#f2c0bd;color:#7d1a14}
.pill{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px;background:#eef1f5;color:var(--muted)}
.pill.good{background:#e7f5ec;color:var(--ok)}.pill.bad{background:#fdecea;color:var(--bad)}.pill.warn{background:#fff4dc;color:var(--warn)}
.muted{color:var(--muted)}.small{font-size:13px}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px 12px}
.checks label{display:flex;gap:6px;align-items:center;color:var(--ink);margin:0}
.strip{position:-webkit-sticky;position:sticky;bottom:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;gap:22px;flex-wrap:wrap;box-shadow:0 -4px 12px rgba(0,0,0,.05)}
.strip b{font-size:18px}
.lines td{padding:4px 6px}.lines input{padding:6px}
.login{max-width:380px;margin:60px auto}
.qr svg{width:220px;height:220px}
.pager{display:flex;gap:8px;margin-top:10px}
@media print{
  @page{size:A4 landscape;margin:10mm}
  .side,header.context,.noprint,.flash,.actions{display:none!important}
  main{max-width:none;padding:0}body{background:#fff;font-size:10px}
  .tablewrap{overflow:visible;border:0}table{page-break-inside:auto}tr{page-break-inside:avoid}
  th,td{padding:2px 4px}h2{page-break-after:avoid;margin-top:12px}
  .grid{grid-template-columns:repeat(6,1fr);gap:6px}.card{padding:6px 8px;margin-bottom:6px}.stat .v{font-size:16px}
  a{color:inherit;text-decoration:none}
}
.matrix th,.matrix td{text-align:center;padding:4px}.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix th.rot{writing-mode:vertical-rl;transform:rotate(180deg);height:150px}
.narrow{max-width:560px}
.qty{max-width:110px}
fieldset.plain{border:0;padding:0;margin:0;min-width:0}
.pickline{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.pickline span{flex:1 1 220px}
.pad{padding-top:22px}
input.bad,td.bad{border-color:var(--bad);color:var(--bad)}
a.card{text-decoration:none;color:inherit;display:block}
.stat .v .pill{font-size:20px;padding:2px 10px}
form#recipe-form{padding-bottom:20px}
.countbar{position:-webkit-sticky;position:sticky;top:0;z-index:5;margin-bottom:10px;align-items:center;gap:12px}
.countbar input{flex:1 1 220px;width:auto}
tr.touched td{background:#f3faf5}
.sitepick select{padding:4px 8px;width:auto}
table.counts input{max-width:110px;padding:6px}
tr.total td{border-top:2px solid var(--line)}
.chartcard svg{width:100%;height:auto;max-height:420px}
.mm-frame{fill:none;stroke:var(--line)}.mm-line{stroke:#9aa7b4;stroke-dasharray:4 4}.mm-zero{stroke:var(--bad);stroke-width:.5}
.mm-q{fill:var(--muted);font-size:12px}.mm-axis{fill:var(--muted);font-size:11px}
.mm-dot{stroke:#fff;stroke-width:1.5}
.mm-dot.mm-star{fill:#2e7d4f}.mm-dot.mm-plowhorse{fill:#c98a14}.mm-dot.mm-puzzle{fill:#3d6fb4}.mm-dot.mm-dog{fill:#b23b32}
.pill.mm-star{background:#e7f5ec;color:#1f6b3f}.pill.mm-plowhorse{background:#fff4dc;color:#8a5b00}.pill.mm-puzzle{background:#e8f0fb;color:#2b5590}.pill.mm-dog{background:#fdecea;color:#8f2a22}
.stat.mm-star .v{color:#2e7d4f}.stat.mm-plowhorse .v{color:#c98a14}.stat.mm-puzzle .v{color:#3d6fb4}.stat.mm-dog .v{color:#b23b32}
.sectionbox{max-width:150px}.pos{max-width:56px}.copyname{max-width:220px;display:inline-block;width:auto}
.dishphoto{max-width:420px;width:100%;border-radius:8px;border:1px solid var(--line)}
.grow{flex:1;margin:0}
.recipecard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:16px}
.recipecard header h2{margin:0 0 2px}.recipecard h3{font-size:14px;margin:12px 0 4px}
.cardbody{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:700px){.cardbody{grid-template-columns:260px minmax(0,1fr)}.cardbody>div:only-child{grid-column:1/-1}}
.cardphoto{width:100%;border-radius:8px;object-fit:cover;max-height:260px}
.allergenbox{border:2px solid var(--bad);border-radius:8px;padding:6px 10px;margin-bottom:8px;color:var(--bad)}
.cardlines td{padding:2px 6px;border:0}.cardlines td.n{white-space:nowrap;width:1%}
@media print{.recipecard{page-break-after:always;border:0;padding:0}.recipecard:last-child{page-break-after:auto}}
.tr-grid{stroke:var(--line)}.tr-actual{fill:none;stroke:#2e7d4f;stroke-width:2.5}.tr-theo{fill:none;stroke:#3d6fb4;stroke-width:2;stroke-dasharray:5 4}
.tr-target{fill:none;stroke:#b23b32;stroke-width:1.5;stroke-dasharray:2 3}.tr-dot{fill:#2e7d4f;stroke:#fff;stroke-width:1.5}
.key{display:inline-block;width:18px;height:3px;vertical-align:middle;margin:0 4px 0 10px}.tr-k-actual{background:#2e7d4f}.tr-k-theo{background:#3d6fb4}.tr-k-target{background:#b23b32}
.reportgrid a.card{text-decoration:none;color:inherit;display:block}.reportgrid a.card:hover{border-color:var(--brand2)}
.kpitile{border-left:5px solid var(--line);margin-bottom:0}.kpitile.good{border-left-color:var(--ok)}.kpitile.warn{border-left-color:var(--warn)}.kpitile.bad{border-left-color:var(--bad)}
a.kpitile{text-decoration:none;color:inherit;display:block}a.kpitile:hover{border-color:var(--brand2)}
.kpitile.good .v{color:var(--ok)}.kpitile.bad .v{color:var(--bad)}.kpitile.warn .v{color:var(--warn)}
.kpigrid{margin-bottom:18px}
progress.share{width:100%;height:10px;vertical-align:middle;accent-color:var(--brand2)}
.sharecell{width:35%;min-width:90px}
.bookgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.bookcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;padding-bottom:8px}
.bookcard:hover{border-color:var(--brand2)}
.bookcard img,.bookcard .nophoto{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#eef1f5}
.bookcard .nophoto{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
.bookcard .bookname{font-weight:bold;padding:8px 10px 2px}.bookcard>.small{padding:0 10px}
.bookfacts{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:8px}.bookfacts .l{display:block;color:var(--muted);font-size:13px}
.booklines td{font-size:16px;padding:4px 6px}.bookmethod{font-size:16px;line-height:1.5}
.bookrecipe .cardphoto{max-height:420px;object-fit:contain;background:#eef1f5}
.reportpanels{align-items:start;grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}.reportpanels .card table{width:100%}.reportpanels h3{margin-top:0}
.reporttable td{white-space:nowrap}.reporttable th{white-space:normal;vertical-align:bottom}.reporttable td,.reporttable th{padding:6px 7px}
@media print{.reportpanels{grid-template-columns:1fr 1fr}.tablewrap{overflow:visible}}
.userhotels label{display:flex;gap:4px;align-items:center;margin:0;white-space:nowrap}

/* Variance reasons, reorder levels */
select.compact, input.compact { padding: 2px 4px; font-size: 0.85em; min-width: 0; }
select.compact { min-width: 10em; }
input.compact[type=text] { width: 12em; }
input.qty { width: 5.5em; text-align: right; }
.order-sup { margin-top: 1.2em; }
@media print { .order-sup { break-inside: avoid; } }

/* Barcode scanning on the count sheet */
#scan-box { max-width: 14em; }
tr.scanned td { background: #fff4c2; }
#scan-video { width: 100%; max-width: 420px; border-radius: 8px; margin: 6px 0; }
#scan-msg button { margin-left: 6px; }
.countbar { flex-wrap: wrap; }
#scan-msg { flex-basis: 100%; margin: 4px 0 0; padding: 4px 8px; }
td.scancol.good { color: var(--ok); font-weight: 600; }
td.scancol.bad { color: var(--bad); font-weight: 600; }
td.scancol.warn { color: var(--warn); font-weight: 600; }
#delivery-summary b.bad, .small.bad { color: var(--bad); }
.wt-wastage{fill:#b23b32}.wt-staff{fill:#3d6fb4}.wt-allowance{fill:#c98a1b}
.wt-k-wastage{background:#b23b32}.wt-k-staff{background:#3d6fb4}.wt-k-allowance{background:#c98a1b}
table.checklist tr.done td { color: var(--muted); }
table.checklist tr.done td a { color: inherit; }
span.good { color: var(--ok); font-weight: 600; } span.bad { color: var(--bad); font-weight: 600; }


/* Phones and narrow windows: the menu folds away behind a button */
@media (max-width:900px){
  .shell{display:block}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 30px rgba(0,0,0,.25);height:100%}
  body.menu-open .side{transform:none}
  body.menu-open::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(20,30,32,.35);z-index:40}
  .menubtn{display:inline-block;background:var(--slate);border-color:var(--slate)}
  header.context{padding:8px 14px}
  main{padding:16px 14px 56px}
  h1{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

/* Today */
.today-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.today-head .date{color:var(--muted)}
.jobs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin:14px 0 26px}
.job{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);
  text-decoration:none;color:var(--ink);min-height:96px;position:relative}
.job:hover{border-color:var(--sea);color:var(--ink)}
.job b{font-size:16.5px}
.job span{color:var(--muted);font-size:13.5px}
.job.lead{background:var(--slate);border-color:var(--slate);color:#fff}
.job.lead span{color:#b9cecc}.job.lead:hover{background:var(--slate-2);color:#fff}
.job .count{position:absolute;top:14px;right:16px;font-weight:600;font-size:13px;background:var(--brass-tint);color:#6f4e14;border-radius:12px;padding:1px 9px}
.job.lead .count{background:var(--brass);color:#fff}
.attn{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.attn li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line)}
.attn li:first-child{border-top:0}
.attn .n{min-width:44px;text-align:center;font-weight:700;font-size:18px;border-radius:8px;padding:4px 6px;background:var(--brass-tint);color:#6f4e14}
.attn .n.bad{background:#fdecea;color:var(--bad)}
.attn .what{flex:1}.attn .what small{display:block;color:var(--muted)}
.attn a.go{white-space:nowrap}
.attn li.clear .n{background:#e7f5ec;color:var(--ok)}
.twocol{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.twocol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:900px){
  .where{flex-wrap:nowrap;min-width:0}
  .where select.sitepick{max-width:44vw;font-size:14px;padding:6px 26px 6px 10px}
  .jobs{grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 20px}
  .job{min-height:84px;padding:12px 14px}.job b{font-size:15.5px}
  .job.lead{grid-column:1/-1}
  .today-head .date{font-size:13px}
}
.login{max-width:400px;margin:12vh auto 0;padding:26px 28px}
.loginbrand{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.loginbrand h1{margin:0;font-size:21px}.loginbrand p{margin:0}
.loginbrand .brandmark{width:40px;height:40px;flex-basis:40px;border-radius:10px}
button.wide{width:100%;min-height:44px}
/* The count bar sits under the sticky hotel bar, not behind it */
.countbar{top:62px}
.job b{padding-right:38px}
@media (max-width:900px){
  .countbar{top:56px}
  .where{flex:1 1 auto;overflow:hidden}
  .where form.inline{flex:1 1 0;min-width:0}
  .where select.sitepick{max-width:none;width:100%}
  .wherepill{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
}
/* Quieter tables: names are links without a line until pointed at */
td a{text-decoration:none;font-weight:500}
td a:hover{text-decoration:underline}
.filters>div{max-width:360px}
.filters>div:has(input[type=search]){max-width:480px}
.danger-link{color:var(--bad)!important}
.nowrap{white-space:nowrap}
nav.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:14px 0 16px;flex-wrap:wrap}
nav.tabs a{padding:8px 14px;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;font-weight:500}
nav.tabs a.on{color:var(--ink);border-bottom-color:var(--brass)}
nav.tabs a:hover{color:var(--ink)}
@media (min-width:901px){.shell{background:linear-gradient(to right,var(--slate) var(--side),transparent var(--side))}}

/* Weekly flash */
.flashnav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.fl-rev{fill:var(--sea)}.fl-cost{fill:var(--brass)}
.fl-gp{fill:none;stroke:var(--slate);stroke-width:2.5}.fl-dot{fill:var(--slate);stroke:#fff;stroke-width:1.5}
.fl-gaxis{fill:var(--slate)}
.fl-k-rev{background:var(--sea);height:10px}.fl-k-cost{background:var(--brass);height:10px}.fl-k-gp{background:var(--slate)}
@media print{.chartcard svg{max-height:300px}}

/* Price for target GP */
span.bad,b.bad,div.small.bad{color:var(--bad)}
.target-price .v{color:var(--sea-dark)}
.fl-wage{fill:#8b6aa8}.fl-k-wage{background:#8b6aa8;height:10px}
.fc-spa{fill:#c58f9f}.fc-k-spa{background:#c58f9f;height:10px}
tr.weekend td{background:var(--sea-tint)}
tr.ticked td{background:var(--sea-tint)}tr.ticked td:first-child a{text-decoration:line-through}
.ordertick label{display:flex;gap:6px;align-items:center;margin:0}
@media print{.ordertick .small{display:inline}}


/* ── Older iPads (iOS 12 Safari) ─────────────────────────────────────────
   Added 2026-10-21. iOS 12 doesn't support gap between flex items, so
   app.js adds .no-flexgap to <html> when it's missing and this puts a little
   space back between buttons and inputs. Nothing here applies on a modern
   browser. */
html.no-flexgap button, html.no-flexgap .btn, html.no-flexgap select,
html.no-flexgap input:not([type=checkbox]):not([type=radio]) { margin-right: 6px; margin-bottom: 4px; }
@supports not (aspect-ratio: 3 / 4) { .bookcard img { height: auto; } .bookcard .nophoto { height: 0; padding-top: 133%; } }

/* Recipe book links (admin) */
.qrcard { text-align: center; max-width: 520px; margin: 0 auto; }
.qrcard .qr svg { width: min(320px, 80vw); height: auto; }
.breakall { word-break: break-all; }

tr.warnrow td { background: rgba(214, 158, 46, 0.10); }

.scaleform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; }
.scaleform input { width: auto; }