/* Catering Ops design system. Plain CSS, no build step, no external assets (CSP: default-src 'none').
   Tokens first; components below only use tokens. Colour is never the only signal: every status
   also carries a glyph and a word (see components.js). */
:root{
  color-scheme:light dark;
  /* surface and text */
  --bg:#f6f4ef;--surface:#fff;--surface-2:#efece4;--fg:#1d1b18;--mut:#5f5a51;--line:#d6d0c3;--line-strong:#8f887a;
  /* brand */
  --acc:#7a2e2e;--acc-fg:#fff;--focus:#0b57d0;
  /* status: fg for text on its own bg, bd for borders */
  --bad:#9b1c1c;--bad-bg:#fdecec;--bad-bd:#c62828;
  --warn:#7a4b00;--warn-bg:#fff4d6;--warn-bd:#b26a00;
  --ok:#17602f;--ok-bg:#e6f4ea;--ok-bd:#2e7d46;
  --danger:#9b1c1c;--danger-fg:#fff;
  /* scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--r:10px;--tap:48px;
  --t-sm:.875rem;--t-md:1rem;--t-lg:1.25rem;--t-xl:1.6rem;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#141311;--surface:#1f1d1a;--surface-2:#2a2723;--fg:#efebe2;--mut:#aaa397;--line:#3a3630;--line-strong:#7d766a;
  --acc:#d98a8a;--acc-fg:#1a0d0d;--focus:#8ab4f8;
  --bad:#ff9a9a;--bad-bg:#3a1515;--bad-bd:#ff6b6b;
  --warn:#f0c060;--warn-bg:#35280c;--warn-bd:#e0a030;
  --ok:#7fdca0;--ok-bg:#12301c;--ok-bd:#4cb571;
  --danger:#ff8a8a;--danger-fg:#2a0a0a;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
.diner,.diner *,.steps li,.rows li,.dish{min-width:0;overflow-wrap:anywhere}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--t-md)/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:1040px;margin:0 auto;padding:var(--s4)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
a{color:var(--acc);text-underline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s2);top:var(--s2);z-index:20;background:var(--surface);padding:var(--s2) var(--s3)}

form.inl{display:inline}.mt{margin-top:var(--s2)}.grow{flex:1 1 16rem}.grow input{width:100%}.maxh{max-height:200px;overflow:auto}
.narrow{max-width:360px;display:grid;gap:var(--s3)}h3.vendor{margin-top:var(--s4)}
.tabs{display:flex;flex-wrap:wrap;gap:var(--s2)}.tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s3);border:1px solid var(--line-strong);border-radius:8px;text-decoration:none}
.tabs a.on{background:var(--acc);color:var(--acc-fg);border-color:var(--acc);font-weight:700}
main:has(table.eq){max-width:1280px}
@media(min-width:641px){.eq td:nth-child(1) input{min-width:170px}.eq td:nth-child(2) select{min-width:95px}.eq td:nth-child(3) input{min-width:140px}.eq td:nth-child(4) select{min-width:150px}}
.jump{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:var(--s2) 0}.jump a{display:inline-flex;align-items:center;min-height:44px}

.narrow{max-width:420px}.narrow button{margin-top:var(--s2)}form.narrow{display:grid;gap:var(--s3)}
ol.setup{padding-left:1.4em;display:grid;gap:var(--s4)}ol.setup li::marker{font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}.btnrow.tight{margin:0}.btnrow form{margin:0}
.detail{color:var(--mut);overflow-wrap:anywhere;display:inline-block;max-width:420px}
/* one-time secret (temporary password): unmistakable, selectable in one click, never printed */
.secret{border-width:4px;border-left-width:4px;padding:var(--s4) var(--s5)}
.secret-pw{font:700 clamp(1.4rem,6vw,2.2rem)/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;margin:var(--s3) 0;padding:var(--s3) var(--s4);background:var(--surface);color:var(--fg);border:2px dashed var(--warn-bd);border-radius:8px;user-select:all;overflow-wrap:anywhere}
.secret-note{font-weight:700;margin:0;color:var(--fg)}

/* top bar */
header.top{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:space-between;padding:var(--s2) var(--s4);background:var(--surface);border-bottom:1px solid var(--line)}
header.top .brand{font-weight:700}header.top .brand a{text-decoration:none;color:var(--fg);display:inline-flex;align-items:center;min-height:44px}
header.top nav,header.top .who{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
header.top nav a{display:inline-flex;align-items:center;min-height:44px}
.devtag{color:var(--mut);font-weight:400;font-size:var(--t-sm)}

.navtoggle{position:absolute;opacity:0;width:1px;height:1px}.navlabel{display:none}
@media(max-width:640px){
  header.top{gap:0 var(--s3)}header.top .brand{flex:1 1 100%;padding-top:var(--s1)}header.top .who{flex:1 1 0;min-width:0;justify-content:flex-end;flex-wrap:nowrap;font-size:var(--t-sm);text-align:right}header.top .who button{padding:0 var(--s3);flex:none;white-space:nowrap}
  .navlabel{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);border:1px solid var(--line-strong);border-radius:8px;font-weight:600;cursor:pointer}
  .navlabel{white-space:nowrap;flex-direction:row;gap:0;color:var(--fg)}.navlabel::after{content:' ▾';margin-left:.3em}.navtoggle:checked+.navlabel::after{content:' ▴'}
  .navtoggle:focus-visible+.navlabel{outline:3px solid var(--focus);outline-offset:2px}
  header.top nav{display:none;flex:1 1 100%;flex-direction:column;align-items:stretch;gap:0;order:5;border-top:1px solid var(--line);margin-top:var(--s2)}
  .navtoggle:checked~nav{display:flex}
  header.top nav a{border-bottom:1px solid var(--line);padding:0 var(--s2)}
}

/* type */
h1{font-size:var(--t-xl);line-height:1.2;margin:var(--s3) 0 var(--s2)}
h2{font-size:var(--t-lg);margin:var(--s5) 0 var(--s2);padding-bottom:var(--s1);border-bottom:2px solid var(--line)}
h3{font-size:var(--t-md);margin:0 0 var(--s2)}
.mut{color:var(--mut)}.n{text-align:right;font-variant-numeric:tabular-nums}
.bad{color:var(--bad)}.warn{color:var(--warn)}.ok{color:var(--ok)}
ul.b{margin:var(--s2) 0 0;padding-left:1.2em}ul.b li{margin:var(--s1) 0}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:var(--s3) var(--s4);margin:var(--s3) 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3)}
.scroll{overflow-x:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s2);margin:var(--s3) 0}
.stat{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:var(--s2) var(--s3)}
.stat b{display:block;font-size:var(--t-lg);font-variant-numeric:tabular-nums}.stat span{color:var(--mut);font-size:var(--t-sm)}

/* status banner: glyph + word + border, never colour alone */
.banner{display:flex;gap:var(--s3);align-items:baseline;padding:var(--s3) var(--s4);border-radius:var(--r);font-weight:700;margin:var(--s3) 0;border:3px solid;position:sticky;top:0;z-index:5;background:var(--surface)}
.banner.draft{color:var(--warn);border-color:var(--warn-bd);border-style:dashed;background:var(--warn-bg)}
.banner.released{color:var(--ok);border-color:var(--ok-bd);background:var(--ok-bg)}
.banner .hash{font-weight:400;font-family:ui-monospace,monospace;font-size:var(--t-sm)}

/* alerts and badges */
.alert{border:2px solid;border-left-width:8px;border-radius:var(--r);padding:var(--s3) var(--s4);margin:var(--s3) 0}
.alert-bad{border-color:var(--bad-bd);background:var(--bad-bg);color:var(--bad)}
.alert-warn{border-color:var(--warn-bd);background:var(--warn-bg);color:var(--warn)}
.alert-ok{border-color:var(--ok-bd);background:var(--ok-bg);color:var(--ok)}
.alert strong{display:block}.alert ul{color:var(--fg)}
.badge{display:inline-flex;gap:var(--s2);align-items:baseline;font-weight:700;font-size:var(--t-sm);padding:2px var(--s2);border-radius:999px;border:2px solid}
.badge>[aria-hidden]{flex:none;min-width:1.4em;text-align:center}
.badge-bad{color:var(--bad);border-color:var(--bad-bd);background:var(--bad-bg)}
.badge-warn{color:var(--warn);border-color:var(--warn-bd);background:var(--warn-bg)}
.badge-ok{color:var(--ok);border-color:var(--ok-bd);background:var(--ok-bg)}

/* guest alert cards (field view and event page) */
.diners{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.diner{background:var(--surface);border:2px solid var(--line-strong);border-left-width:10px;border-radius:var(--r);padding:var(--s3) var(--s4)}
.diner.pending{border-color:var(--bad-bd)}.diner.done{border-color:var(--ok-bd)}
.diner .seat{font-size:var(--t-lg);font-weight:800;margin:0}
.diner .req{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s2) 0}
.diner .req .badge{white-space:normal;font-size:var(--t-md);padding:var(--s2) var(--s3);border-radius:var(--s2);width:100%}
.diner .cap{margin:var(--s3) 0 var(--s1);color:var(--mut);font-size:var(--t-sm);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.diner .cap-bad{color:var(--bad)}
.diner .served{margin:var(--s2) 0;padding-left:1.2em}
.diner .accom{font-weight:700;padding:var(--s2) var(--s3);border-radius:var(--s2);border:2px solid}
.diner .accom.pending{color:var(--bad);border-color:var(--bad-bd);background:var(--bad-bg)}
.diner .accom.done{color:var(--ok);border-color:var(--ok-bd);background:var(--ok-bg)}
.disclaimer{color:var(--mut);font-size:var(--t-sm)}

/* tables; .stack turns rows into labelled cards on phones (labels come from data-label) */
table{width:100%;border-collapse:collapse;background:var(--surface)}
th,td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mut);font-weight:600;font-size:var(--t-sm)}
td.n,th.n{text-align:right}
tr.sub td{border-bottom-style:dotted;color:var(--mut)}

/* forms: 16px+ text avoids iOS zoom, 44px+ targets */
form.inline{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:end}
label{display:flex;flex-direction:column;font-size:var(--t-sm);color:var(--mut);gap:2px}
input,select,textarea,button{font:inherit;padding:var(--s2) var(--s3);border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--fg);min-height:44px}
textarea{width:100%}
button{cursor:pointer;background:var(--acc);color:var(--acc-fg);border:0;font-weight:600;padding:0 var(--s4)}
button.sec{background:transparent;color:var(--fg);border:1px solid var(--line-strong)}
button.danger{background:var(--danger);color:var(--danger-fg);border:2px solid var(--danger);min-height:48px}
form.danger-form{display:grid;gap:var(--s2)}label.row.confirm{white-space:normal;align-items:flex-start;font-weight:600}
button:disabled{opacity:.5;cursor:not-allowed}
a.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--acc);color:var(--acc-fg);padding:0 var(--s4);border-radius:8px;text-decoration:none;font-weight:600}
a.btn.sec{background:transparent;color:var(--fg);border:1px solid var(--line-strong)}
input[type=checkbox]{min-height:0;width:20px;height:20px;accent-color:var(--acc)}
label.row{flex-direction:row;align-items:center;gap:var(--s2);min-height:44px;color:var(--fg)}
td input:not([type=checkbox]),td select{width:100%;min-width:70px}td .pair{display:flex;gap:4px;align-items:center}td .pair input{min-width:50px}
.flash{padding:var(--s3) var(--s4);border-radius:var(--r);margin:var(--s3) 0;border:2px solid var(--line-strong);background:var(--surface)}
.flash.err{color:var(--bad);border-color:var(--bad-bd);background:var(--bad-bg);font-weight:600}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0}

.addtoggle{position:absolute;opacity:0;width:1px;height:1px}
.addlabel{display:none;min-height:44px;align-items:center;color:var(--acc);font-weight:600;cursor:pointer;text-decoration:underline}
.addtoggle:focus-visible+.addlabel{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:640px){.addlabel{display:inline-flex}.addtoggle:checked+.addlabel{display:none}}

details.adds{margin:var(--s3) 0}details.adds>summary::before{content:'+ ';margin-right:.3em}details.adds[open]>summary::before{content:'− '}details.adds>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--acc)}

/* field view: run of show, equipment, prep as touch-sized list rows */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.steps li{display:grid;grid-template-columns:minmax(7.5rem,12rem) 1fr;gap:var(--s3);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:var(--s3)}
.steps .when{font-weight:800;font-variant-numeric:tabular-nums}.steps .role{display:block;color:var(--mut);font-size:var(--t-sm)}
.rows{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.rows li{display:flex;justify-content:space-between;gap:var(--s3);align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:var(--s3)}
.rows .total{font-size:var(--t-lg);font-weight:800;font-variant-numeric:tabular-nums}.rows small{display:block;color:var(--mut)}
.dish{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:var(--s3) var(--s4);margin:var(--s2) 0}
.dish h3{display:flex;justify-content:space-between;gap:var(--s3)}.dish ul{margin:0;padding:0;list-style:none}
.dish li{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s1) 0;border-top:1px dotted var(--line)}
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2);margin:var(--s3) 0}

@media(max-height:480px){.banner{position:static}}
@media(max-width:640px){
  main{padding:var(--s3)}
  h1{font-size:1.4rem}
  .steps li{grid-template-columns:1fr;gap:var(--s1)}
  table.stack,table.stack tbody{display:block}
  table.stack tr:has(>th){position:absolute;left:-9999px;width:1px;overflow:hidden}
  table.stack tr{display:block;border:1px solid var(--line-strong);border-radius:var(--r);margin:var(--s2) 0;padding:var(--s1) var(--s3)}
  table.stack td{display:grid;grid-template-columns:7.5rem 1fr;gap:var(--s2);border:0;padding:var(--s1) 0}
  table.stack td::before{content:attr(data-label);color:var(--mut);font-size:var(--t-sm)}
  table.stack td.n{text-align:left}
  table.stack td>.cv{min-width:0;overflow-wrap:anywhere}
  table.stack td[data-label=""]{grid-template-columns:1fr}table.stack td[data-label=""]::before{display:none}
  table.stack td:has(>.cv:empty){display:none}
  table.stack td.act{display:block}table.stack td.act::before{content:none}
  tr.addrow{display:none!important}.addtoggle:checked~.scroll tr.addrow{display:block!important}
  form.inline label,form.inline button{flex:1 1 100%}
}
@media print{
  header.top,form,.noprint,.skip{display:none!important}
  body{background:#fff;color:#000}.card,table,.diner,.stat{background:#fff}
  .banner{position:static}
  h2,.diner,.dish,.steps li{break-inside:avoid;page-break-after:avoid}
  .alert,.diner,.badge,.banner{border-color:#000!important}
}