@font-face{font-family:"Bristol";src:local("Bristol"),url("/static/fonts/Bristol.woff2") format("woff2");font-display:swap}
:root{
  --bg:#fff7e5; --ink:#321b15; --red:#ff0000; --card:#fffdf6; --line:#e8d9b8;
  --mute:#7a6358; --ok:#1f7a3d; --warn:#b36b00; --new:#ff0000; --prog:#b36b00; --ready:#1f7a3d;
  --title:"Bristol","Arial Black",Impact,"Helvetica Neue",sans-serif;
  --body:"Inria Serif",Georgia,"Times New Roman",serif;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  --sal:env(safe-area-inset-left); --sar:env(safe-area-inset-right);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.35;
  -webkit-text-size-adjust:100%;overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,.wordmark{font-family:var(--title);text-transform:uppercase;letter-spacing:.02em;margin:0}
a{color:inherit}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2px solid var(--ink);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:calc(8px + var(--sat)) calc(14px + var(--sar)) 8px calc(14px + var(--sal))}
.brand{display:flex;align-items:center;gap:8px;font-size:20px}
.accent-bar{display:block;width:34px;height:8px;border-radius:6px;background:var(--red)}
.accent-bar.sm{width:16px;height:16px;border-radius:5px}
.conn{width:10px;height:10px;border-radius:50%;background:#bbb;display:inline-block;margin-left:4px}
.conn.on{background:var(--ok)} .conn.off{background:var(--red)}
.tabs{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto}
.tab{border:2px solid transparent;background:none;padding:9px 14px;border-radius:12px;font-weight:700;
  font-size:16px;white-space:nowrap;position:relative;cursor:pointer}
.tab.on{background:var(--ink);color:var(--bg)}
.tab .dot{background:var(--red);color:#fff;border-radius:999px;font-size:12px;padding:1px 7px;margin-left:6px}
.top-right{display:flex;gap:6px}
@media (max-width:699px){
  .top{gap:8px}
  .brand{flex:1}
  .top-right{order:2}
  .tabs{order:3;flex:0 0 100%;justify-content:space-between}
  .tabs{gap:2px}
  .tab{flex:1;padding:10px 2px;font-size:12.5px;text-align:center}
  .tab .dot{margin-left:3px;padding:1px 5px;font-size:11px}
  .banner{top:112px}
}
.icon-btn{border:2px solid var(--ink);background:var(--card);border-radius:12px;width:44px;height:44px;font-size:20px;cursor:pointer}

/* ---- layout ---- */
main{padding:14px calc(14px + var(--sar)) calc(40px + var(--sab)) calc(14px + var(--sal));max-width:1400px;margin:0 auto}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bar h2{font-size:22px;margin-right:auto}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:2px solid var(--ink);background:var(--card);border-radius:999px;padding:7px 14px;font-weight:700;cursor:pointer}
.chip.on{background:var(--ink);color:var(--bg)}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.col h3{font-size:17px;padding:8px 12px;border-radius:10px;color:#fff;margin-bottom:10px;display:flex;justify-content:space-between}
.col[data-s=new] h3{background:var(--new)} .col[data-s=preparing] h3{background:var(--prog)} .col[data-s=ready] h3{background:var(--ready)}
.empty{color:var(--mute);padding:18px;text-align:center;border:2px dashed var(--line);border-radius:14px}
@media (max-width:899px){
  .board{grid-template-columns:1fr}
  .board.f-new .col:not([data-s=new]),.board.f-preparing .col:not([data-s=preparing]),.board.f-ready .col:not([data-s=ready]){display:none}
  .col h3{display:none} .board.f-all .col h3{display:flex}
}
@media (min-width:900px){ .chips.mobile-only{display:none} }

/* ---- order card ---- */
.card{background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:14px;margin-bottom:12px;position:relative}
.card.late{border-color:var(--red);box-shadow:0 0 0 2px var(--red) inset}
.card.fresh{animation:pulse 1.2s ease-in-out 4}
@keyframes pulse{50%{background:#ffe3e0}}
.card .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.when{font-family:var(--title);text-transform:uppercase;font-size:22px}
.ref{color:var(--mute);font-size:14px}
.cust{font-size:19px;font-weight:700;margin:2px 0}
.cust a{text-decoration:none;border-bottom:2px solid var(--line)}
.items{list-style:none;padding:0;margin:8px 0}
.items li{padding:4px 0;border-top:1px dashed var(--line);display:flex;gap:10px}
.items li:first-child{border-top:0}
.items .q{font-weight:700;min-width:2.2em}
.note{background:#fff0c9;border-radius:10px;padding:7px 10px;margin:8px 0;font-size:15px}
.allergy{background:var(--red);color:#fff;border-radius:10px;padding:8px 10px;margin:8px 0;font-weight:700}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.tag{border:1.5px solid var(--ink);border-radius:999px;padding:1px 10px;font-size:13px;font-weight:700}
.tag.red{background:var(--red);border-color:var(--red);color:#fff}
.actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* ---- buttons / forms ---- */
.btn{border:2px solid var(--ink);background:var(--card);border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;min-height:48px}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.grow{flex:1}
.btn.small{padding:7px 12px;min-height:38px;font-size:15px}
.btn.big{width:100%;font-size:19px;margin-top:8px}
.btn:disabled{opacity:.5}
.btn:active{transform:scale(.98)}
label{display:block;font-weight:700;margin:10px 0 4px;font-size:15px}
input,select,textarea{width:100%;border:2px solid var(--ink);background:#fff;border-radius:12px;padding:12px;font-size:17px}
textarea{min-height:80px}
input[type=checkbox]{width:auto;transform:scale(1.3);margin-right:8px}
.err{color:var(--red);font-weight:700;min-height:1.3em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.list .item{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:12px;margin-bottom:10px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.list .item.off{opacity:.55}
.list .item .nm{font-weight:700}
.list .item .meta{font-size:14px;color:var(--mute)}
h4{font-family:var(--title);text-transform:uppercase;margin:18px 0 8px;font-size:16px}
.panel{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:14px;margin-bottom:14px}
.hours{display:grid;grid-template-columns:110px auto 1fr 1fr;gap:8px;align-items:center;margin-bottom:6px}
.keybox{font-family:ui-monospace,Menlo,monospace;background:#fff;border:2px dashed var(--ink);border-radius:10px;padding:10px;word-break:break-all;margin:8px 0}

/* ---- banners, toast, modal ---- */
.banner{position:sticky;top:64px;z-index:15;margin:0 14px;background:var(--red);color:#fff;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + var(--sab));background:var(--ink);color:var(--bg);
  padding:12px 18px;border-radius:12px;z-index:60;max-width:90vw;font-weight:700}
.modal{position:fixed;inset:0;background:rgba(50,27,21,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden],.banner[hidden],.toast[hidden]{display:none}
.sheet{background:var(--bg);width:100%;max-width:640px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;
  padding:18px 16px calc(24px + var(--sab));border:2px solid var(--ink);border-bottom:0}
@media (min-width:700px){.modal{align-items:center}.sheet{border-radius:20px;border-bottom:2px solid var(--ink)}}
.sheet h2{font-size:22px;margin-bottom:6px}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:40px;height:40px;border-radius:10px;border:2px solid var(--ink);background:var(--card);font-size:20px;font-weight:700}
.stepper span{min-width:1.6em;text-align:center;font-weight:700}

/* ---- login ---- */
body.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.auth-card{background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:26px 22px;width:100%;max-width:400px}
.auth-card .wordmark{font-size:34px;margin-top:10px}
.auth-card .sub{color:var(--mute);margin:4px 0 14px}

/* ---- print docket ---- */
.docket{display:none}
@media print{
  body>*:not(.docket):not(#reportsheet){display:none!important}
  #reportsheet{display:none}
  body.print-report .docket{display:none!important}
  body.print-report #reportsheet{display:block!important}
  body:not(.print-report) #reportsheet{display:none!important}
  .docket{display:block!important;font-family:var(--body);color:#000;padding:4mm;width:72mm}
  .docket h2{font-size:20px;text-align:center;margin-bottom:6px}
  .docket hr{border:0;border-top:1px dashed #000;margin:6px 0}
  .docket .big{font-size:20px;font-weight:700}
  .docket .al{border:2px solid #000;padding:4px;font-weight:700;margin:6px 0}
}

/* ---- v2: service bar, pills, calls, queue, settings ---- */
.svc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.svc-main{flex:1;min-width:260px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;text-align:left;border:2px solid var(--ok);background:#eaf6ee;border-radius:14px;padding:8px 12px;cursor:pointer;min-height:48px}
.svc.paused .svc-main{border-color:var(--red);background:#ffe9e6}
.svc-meta{font-size:15px;color:var(--mute)}
.notice-chip{background:#fff0c9;border:1.5px solid var(--warn);border-radius:12px;padding:6px 10px;font-size:15px;margin:2px 0}
.pill{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:1px 10px;font-size:13px;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.pill.red{background:var(--red);border-color:var(--red);color:#fff}
.pill.warn{background:var(--warn);border-color:var(--warn);color:#fff}
.tab .dot.urgent{animation:pulse2 1s ease-in-out infinite}
@keyframes pulse2{50%{transform:scale(1.25)}}
.banner.urgent{background:#a80000;border:3px solid #ffd2cd;font-size:18px}
.card.allergy-card{border-color:var(--red);border-width:3px}
.allergy small{display:block;font-weight:400;font-size:13px;margin-top:2px}
.opt{color:var(--mute)}
.item.call{cursor:pointer}
.item.call .sum{font-size:14px;color:var(--mute);margin-top:2px}
.item.msg.p-urgent{border-color:var(--red);border-width:3px;background:#fff1ef}
.item.msg.p-high{border-color:var(--warn);border-width:3px}
.transcript{white-space:pre-wrap;background:#fff;border:2px solid var(--line);border-radius:12px;padding:10px;max-height:260px;overflow:auto;font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.tile{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:12px}
.tile .n{font-family:var(--title);font-size:26px}
.tile .l{font-size:14px;color:var(--mute)}
.kv{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:7px 0;border-top:1px dashed var(--line)}
.kv:first-of-type{border-top:0}
.st-ok{color:var(--ok);font-weight:700}.st-warn{color:var(--warn);font-weight:700}.st-fail{color:var(--red);font-weight:700}.st-off{color:var(--mute)}
details.panel>summary{font-family:var(--title);text-transform:uppercase;font-size:17px;cursor:pointer;list-style:none;padding:2px 0}
details.panel>summary::before{content:"▸ "}details.panel[open]>summary::before{content:"▾ "}
details.panel[open]>summary{margin-bottom:8px}
.allergen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:2px 8px}
label.ck{display:flex;align-items:center;gap:6px;font-weight:400;margin:6px 0}
label.ck.verify{font-weight:700;background:#fff0c9;border-radius:10px;padding:8px}
.warn-t{color:var(--warn);font-weight:700}
.copyrow{display:flex;gap:8px;align-items:center}.copyrow input{flex:1}
details.tech{margin-top:12px}
.meta{font-size:14px;color:var(--mute)}
input,select,textarea{min-width:0}
@media (max-width:699px){.hours{grid-template-columns:1fr 1fr}.hours input[type=time]{padding:10px 8px}.top-right .icon-btn{width:40px;height:40px}}

/* ================= v2.1: Kitchen display ================= */
.kds{--k:1;font-size:calc(17px*var(--k))}
.kds-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.kds-head h2{font-size:calc(26px*var(--k))}
.kds-head .sp,.rp-nav .sp{flex:1}
.kds-clock{font-family:var(--title);font-size:calc(26px*var(--k));padding:0 6px}
.kpill{border-radius:999px;padding:3px 12px;font-weight:700;color:#fff;font-size:.9em}
.kpill.n{background:var(--new)}.kpill.p{background:var(--prog)}.kpill.r{background:var(--ready)}.kpill.l{background:#000;animation:pulse2 1s ease-in-out infinite}
.kbtn{border:2px solid var(--ink);background:var(--card);border-radius:12px;padding:8px 14px;font-weight:700;cursor:pointer;min-height:46px;font-size:.9em}
.kbtn.go{background:var(--ready);border-color:var(--ready);color:#fff}
.kds-prep{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--ink);color:var(--bg);border-radius:14px;padding:10px 14px;margin-bottom:14px}
.kds-prep>b{text-transform:uppercase;font-family:var(--title);margin-right:6px}
.kds-prep span{background:rgba(255,247,229,.14);border-radius:10px;padding:4px 10px;font-size:1.05em}
.kds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(270px*var(--k)),1fr));gap:14px;align-items:start}
.tkt{background:#fff;border:4px solid var(--ink);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.tkt header{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--ink);color:var(--bg);align-items:center}
.tkt .due b{font-family:var(--title);font-size:1.9em;line-height:1;display:block}
.tkt .due span{font-size:.9em;font-weight:700}
.tkt .who{text-align:right;min-width:0}
.tkt .who b{font-size:1.25em;display:block;overflow-wrap:anywhere}
.tkt .who span{font-size:.8em;opacity:.8}
.tkt.u-soon{border-color:var(--warn)}.tkt.u-soon header{background:var(--warn)}
.tkt.u-late{border-color:var(--red)}.tkt.u-late header{background:var(--red);animation:lateblink 1.6s ease-in-out infinite}
@keyframes lateblink{50%{filter:brightness(.78)}}
.tkt.s-preparing{background:#fff8e1}
.tkt.fresh{animation:pulse 1.2s ease-in-out 4}
.tkt .tday{background:#e8d9b8;text-align:center;font-weight:700;padding:3px;font-size:.85em}
.tkt .tal{background:var(--red);color:#fff;font-weight:700;padding:10px 12px;font-size:1.1em}
.tkt.has-al{box-shadow:0 0 0 4px var(--red)}
.tkt ul{list-style:none;margin:0;padding:6px 12px}
.tkt li{display:flex;gap:10px;font-size:1.35em;font-weight:700;padding:9px 0;border-top:1px dashed var(--line);cursor:pointer;-webkit-user-select:none;user-select:none}
.tkt li:first-child{border-top:0}
.tkt li b{min-width:2.1em;color:var(--red)}
.tkt li small{display:block;font-size:.7em;font-weight:400;color:var(--mute)}
.tkt li.done{opacity:.4;text-decoration:line-through}
.tkt .tnote{background:#fff0c9;padding:8px 12px;font-size:1em}
.tkt footer{display:flex;gap:8px;padding:10px 12px;margin-top:auto}
.kb{border:3px solid var(--ink);background:var(--card);border-radius:12px;font-weight:700;font-size:1.1em;cursor:pointer;min-height:56px;padding:0 16px}
.kb.go{flex:1;background:var(--ink);color:var(--bg);font-family:var(--title);letter-spacing:.04em;font-size:1.25em}
.s-preparing .kb.go{background:var(--ready);border-color:var(--ready);color:#fff}
.kb.go.all{outline:4px solid var(--ready);outline-offset:2px}
.kds-empty{text-align:center;padding:60px 20px;font-family:var(--title);font-size:2em;color:var(--mute);border:3px dashed var(--line);border-radius:20px}
.kds-empty small{display:block;font-family:var(--body);font-size:.45em;text-transform:none;margin-top:8px}
.kds-ready{margin-top:18px;background:#eaf6ee;border:2px solid var(--ready);border-radius:14px;padding:10px 14px}
.kds-ready>b{display:block;text-transform:uppercase;font-family:var(--title);margin-bottom:6px}
.rchip{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px dashed var(--ready);flex-wrap:wrap}
.rchip:first-of-type{border-top:0}
body.kds-full .top,body.kds-full #svcWrap{display:none}
body.kds-full main{max-width:none;padding-top:10px}
body.kds-full .banner{top:0}

/* ================= v2.1: import + sales ================= */
.imp-list{max-height:38vh;overflow:auto;border:2px solid var(--line);border-radius:12px;background:#fff}
.imp-row{display:flex;gap:10px;padding:8px 10px;border-top:1px dashed var(--line);align-items:flex-start}
.imp-row:first-child{border-top:0}
.imp-row .pill{flex:none;min-width:72px;text-align:center}
.imp-row.a-error{background:#fff1ef}
.rp-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.rp-label{font-family:var(--title);text-transform:uppercase;font-size:19px;padding:0 4px}
.tile.big{background:var(--ink);color:var(--bg)}.tile.big .l{color:var(--bg);opacity:.8}.tile.dim{opacity:.75}
.bars{display:flex;gap:4px;align-items:flex-end;height:220px;padding-top:6px}
.bar-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar-fill{width:100%;background:var(--red);border-radius:5px 5px 0 0;min-height:1px}
.bars.dense .bar-fill{border-radius:3px 3px 0 0}
.bv{font-size:11px;color:var(--mute);height:16px;white-space:nowrap}
.bl{font-size:12px;color:var(--mute);margin-top:4px;white-space:nowrap}
.bars.dense .bv{font-size:9px}.bars.dense .bl{font-size:10px}
@media (max-width:699px){.bars{height:170px;gap:2px}.bl{font-size:10px}.bv{font-size:9px}}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:13px;text-align:left;color:var(--mute);border-bottom:2px solid var(--ink);padding:4px 6px}
.tbl td{padding:7px 6px;border-top:1px dashed var(--line)}
.tbl .num,.num{text-align:right;font-variant-numeric:tabular-nums}

/* printed sales report (A4) */
#reportsheet{display:none}
@media print{
  @page{margin:14mm}
  #reportsheet{font-family:Arial,Helvetica,sans-serif;color:#000;font-size:11pt;background:#fff}
  #reportsheet h1{font-family:Arial,Helvetica,sans-serif;font-size:20pt;margin:0 0 4px;text-transform:none}
  #reportsheet h3{font-family:Arial,Helvetica,sans-serif;font-size:12pt;margin:14px 0 4px;text-transform:none;border-bottom:1.5px solid #000;padding-bottom:2px}
  #reportsheet .rs-sub{margin-bottom:10px}
  #reportsheet table{width:100%;border-collapse:collapse;margin-bottom:4px;page-break-inside:auto}
  #reportsheet tr{page-break-inside:avoid}
  #reportsheet th{text-align:left;font-size:9.5pt;border-bottom:1px solid #000;padding:3px 4px}
  #reportsheet td{padding:3px 4px;border-bottom:.5px solid #bbb}
  #reportsheet .num{text-align:right}
  #reportsheet .rs-sum td{font-size:11.5pt;border-bottom:.5px solid #888}
}

.bar-fill.zero{background:var(--line);height:2px!important}

/* ================= v2.2: options, special requests, new-order builder ================= */
.req{display:block;background:#fff0c9;border-radius:6px;padding:1px 7px;margin-top:2px;font-size:.88em;color:var(--ink);font-weight:700}
.tkt li .req{font-size:.8em;padding:2px 8px;margin-top:3px;text-decoration:none}
.cartline{display:flex;gap:8px;align-items:center;padding:8px 0;border-top:1px dashed var(--line);flex-wrap:wrap}
.cartline:first-child{border-top:0}
.cl-main{flex:1 1 180px;min-width:0}
.cl-price{font-weight:700;min-width:4.2em;text-align:right}
.cart-total{display:flex;justify-content:space-between;padding:10px 0 2px;border-top:2px solid var(--ink);font-size:19px}
.no-list{max-height:34vh;overflow:auto;border:2px solid var(--line);border-radius:12px;background:#fff}
.no-item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;border-top:1px dashed var(--line)}
.no-item:first-child{border-top:0}
.co fieldset{border:2px solid var(--line);border-radius:12px;margin:10px 0;padding:6px 10px}
.co legend{font-weight:700;padding:0 6px}.co legend small{font-weight:400;color:var(--mute)}
.og-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 8px}
.og-c{margin:5px 0}
