/* app.css — MEALTICKET shell. Design width 1920: 1rem = 16px at 1920, everything scales with the viewport (no max-width cap). */
:root{
  --ground:#CD2925; --paper:#F6E9CC; --surface:#F7EBCB; --ink:#12191B; --ticket:#FFE156; --action:#1E6091; --danger:#D8342B; --success:#2D8A43;
  --bg:var(--ground); --font-display:'Caprasimo',Georgia,serif; --font-body:'Afacad',system-ui,sans-serif; --font-mono:'DotGothic16',ui-monospace,monospace;
  --ease-punch:cubic-bezier(.3,.9,.25,1.15); --t1:180ms; --t2:320ms; --t3:480ms;
  /* page frame (frame.json + USER_FIXES): gutters 38/37 px @1920 */
  --gutter-l:2.375rem; --gutter-r:2.3125rem;
  /* border tokens (BORDER_TABLE) — every hairline max(1px, v) */
  --rule-hair:max(1px,.069rem); --rule-1:max(1px,.1375rem); --rule-2:max(1px,.1375rem); --rule-3:max(1px,.2875rem);
  --c-input:#CFCBBE; --c-chip:#CFCABD; --c-row:#C9C7BC; --c-panel:#D3CDBD; --c-tabs:#C3C1B2; --c-status:#3579AE; --c-stamp:#193036; --c-term:#F1E8CB;
  --nav-h:11rem;
  /* panel rim + dark-band edge (mockup draws a hairline on every panel / ink-band edge, rule_check 27/09) */
  --rule-rim:max(1.5px,.09rem); --c-rim:#8E1512; --c-band:#000;
}
html{font-size:max(12.8px,calc(100vw/120))}
@media(max-width:1023px){html{font-size:15px}}
body{background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.45;overflow-x:hidden;
  background-image:radial-gradient(rgba(0,0,0,.05) .5px,transparent .6px);background-size:4px 4px}
:where(button,input,select,textarea){border:0;font:inherit;color:inherit;background:none;margin:0;box-sizing:border-box}
:where(button){cursor:pointer}
:where(button:disabled){cursor:default;opacity:.55}
a{text-decoration:none}
:focus-visible{outline:2px solid var(--action);outline-offset:2px}

/* ---------- PAGE FRAME: one container for every route ---------- */
.frame{width:100%;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.bleed{width:100%}
main{background:transparent}

/* ---------- NAV — N2 masthead: diner signboard, wordmark centred, route row below, X/TG + CA in the top corners ---------- */
[data-chrome="nav"]{position:relative;z-index:20;box-sizing:border-box;width:100%;height:var(--nav-h);padding:1.125rem var(--gutter-r) .5rem var(--gutter-l);display:flex;flex-direction:column;align-items:center;color:var(--paper);font-family:var(--font-body)}
[data-chrome="nav"] a{color:inherit;white-space:nowrap}
.mast-ear{position:absolute;top:1.25rem;display:flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600}
.mast-ear-l{left:var(--gutter-l)}
.mast-ear-r{right:var(--gutter-r)}
.mast-lbl{font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin:0 .35rem}
.mast-chip{display:inline-flex;align-items:center;height:2rem;padding:0 .8rem;background:var(--paper);color:var(--ink)!important;border-radius:.25rem;transition:transform var(--t1) var(--ease-punch),background var(--t1)}
.mast-chip:hover{transform:translateY(-2px) rotate(-1deg);background:var(--ticket)}
.mast-ca{background:var(--ink);color:var(--paper)!important;font-family:var(--font-mono);font-weight:400}
.mast-ca b{font-weight:400;margin-left:.4rem;color:var(--ticket)}
.mast-sign{display:flex;align-items:center;gap:1.125rem;height:4.75rem}
.mast-sign img{height:4.25rem;width:auto;max-width:none;object-fit:contain}
.mast-word{font-family:var(--font-display);font-size:4rem;line-height:1;letter-spacing:.02em;color:var(--paper);text-shadow:.1875rem .1875rem 0 var(--ink)}
.mast-routes{box-sizing:border-box;margin-top:auto;align-self:stretch;height:3.5rem;display:flex;align-items:center;justify-content:center;gap:1rem}
.mast-routes a{position:relative;display:inline-flex;align-items:center;height:2.375rem;padding:0 1.35rem;font-size:1.1875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:transform var(--t1) var(--ease-punch),color var(--t1)}
.mast-sep{flex:none;width:.4rem;height:.4rem;background:var(--ticket);transform:rotate(45deg)}
.mast-routes a:hover{color:var(--ticket);transform:translateY(-2px)}
.mast-routes a.is-active{background:var(--ticket);color:var(--ink);
  -webkit-mask:radial-gradient(circle .42rem at 0 50%,transparent 97%,#000) left/51% 100% no-repeat,radial-gradient(circle .42rem at 100% 50%,transparent 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle .42rem at 0 50%,transparent 97%,#000) left/51% 100% no-repeat,radial-gradient(circle .42rem at 100% 50%,transparent 97%,#000) right/51% 100% no-repeat}
.mast-routes a.is-active:hover{color:var(--ink)}

/* ---------- FOOTER — F3 canteen receipt: serrated cream slip, dot leaders, total line ---------- */
[data-chrome="footer"]{box-sizing:border-box;width:100%;padding:3rem var(--gutter-r) 2.5rem var(--gutter-l);font-family:var(--font-body);color:var(--ink)}
.receipt{--zz:.625rem;position:relative;background:var(--paper);padding:calc(var(--zz) + 1.75rem) 2.5rem calc(var(--zz) + 1.5rem);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--zz)) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--zz)) 51% repeat-x;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/calc(2*var(--zz)) 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(2*var(--zz)) 51% repeat-x}
.rc-head{display:flex;align-items:center;gap:1rem;padding-bottom:1.25rem}
.rc-head .foot-mark{height:3.25rem;width:auto;max-width:none}
.rc-name{font-family:var(--font-display);font-size:2.25rem;line-height:1}
.rc-kind{margin-left:auto;font-family:var(--font-mono);font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase}
.rc-cols{display:grid;grid-template-columns:1.25fr 1.2fr .75fr .9fr;gap:3rem;padding:1.5rem 0}
.rc-col p{margin:0}
.rc-h{font-family:var(--font-mono);font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.625rem!important}
.rc-say strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.75rem;line-height:1.15;margin-bottom:.625rem}
.rc-say p{font-size:1.0625rem;line-height:1.45;max-width:26rem}
.rc-line{display:flex;align-items:baseline;gap:.5rem;font-size:1.0625rem;line-height:1.75}
.rc-line > i{flex:1;min-width:1.5rem;height:.9em;background:radial-gradient(circle,var(--ink) .1rem,transparent .12rem) left bottom/.75rem .3rem repeat-x;opacity:.7}
.rc-line > :last-child{font-weight:600;text-align:right}
.rc-line a{color:inherit;transition:color var(--t1)}
.rc-line a:hover{color:var(--action)}
.rc-line .mono{font-family:var(--font-mono);font-weight:400}
.rc-ca{display:inline-flex;align-items:center;gap:.5rem}
.rc-ca b{font-family:var(--font-mono);font-weight:400}
.rc-ca button{padding:.1rem .6rem;background:var(--ink);color:var(--paper);border-radius:.25rem;font-size:.9375rem}
.rc-total{display:flex;align-items:baseline;gap:.75rem;padding:1.125rem 0 .5rem;font-family:var(--font-mono);font-size:1.375rem;text-transform:uppercase;letter-spacing:.04em}
.rc-total > i{flex:1;height:.9em;background:radial-gradient(circle,var(--ink) .1rem,transparent .12rem) left bottom/.625rem .3rem repeat-x}
.rc-tail{display:flex;align-items:center;gap:1.5rem;padding-top:.75rem;font-size:.9375rem}
.rc-bar{width:15rem;height:2.25rem;background:repeating-linear-gradient(90deg,var(--ink) 0 .125rem,transparent .125rem .3rem,var(--ink) .3rem .6rem,transparent .6rem .75rem,var(--ink) .75rem .8125rem,transparent .8125rem 1.0625rem)}
.rc-tail .mono{font-family:var(--font-mono)}
.rc-tail span:last-child{margin-left:auto;font-weight:600}


/* ---------- BORDER CLASSES (the ONLY place borders live) ---------- */
.rule-nav{border-top:max(3px,.1875rem) solid var(--paper);border-bottom:max(2px,.125rem) solid var(--paper)}
.rule-input{border:var(--rule-2) solid var(--c-input);border-radius:.375rem;background:#fffaf0;padding:.5rem .75rem}
.rule-chip{border:var(--rule-1) solid var(--c-chip);border-radius:.375rem;background:#efe4c6;padding:.4rem .9rem}
.rule-board{border:.35rem solid var(--ink);border-radius:.875rem;background:var(--paper)}
.rule-row{border-bottom:var(--rule-hair) solid var(--c-row)}
.rule-row:last-child{border-bottom:0}
.rule-row.rule-row-end{border-bottom:var(--rule-hair) solid var(--c-row)}
/* dashed rules: ink dashes over a faint ink gap (a transparent gap reads as no rule at all; the mockup dash is continuous at print scale) */
.rule-dash{border-top:var(--rule-hair) solid transparent;border-image:repeating-linear-gradient(90deg,var(--ink) 0 4px,rgba(18,25,27,.3) 4px 6px) 1}
.rule-dash-v{border-left:var(--rule-hair) solid transparent;border-image:repeating-linear-gradient(180deg,var(--ink) 0 4px,rgba(18,25,27,.3) 4px 6px) 1}
.rule-terminal{border:.2rem solid var(--c-band);outline:var(--rule-hair) solid var(--c-term);outline-offset:-.5rem;border-radius:.625rem;background:#10181a;color:#f1e8cb}
.rule-status{border:var(--rule-2) solid var(--c-status);border-radius:.25rem;color:var(--action)}
.rule-panel{border:var(--rule-2) solid var(--c-panel);border-radius:.25rem;background:var(--paper)}
.rule-tabs{border:var(--rule-2) solid var(--c-tabs);border-radius:.25rem}
.rule-tabs > * + *{border-left:var(--rule-2) solid var(--c-tabs)}
.rule-stamp{border:var(--rule-hair) double var(--c-stamp);outline:var(--rule-hair) solid var(--c-stamp);outline-offset:.2rem;color:var(--c-stamp)}
.rule-rim{outline:var(--rule-rim) solid var(--c-rim);outline-offset:calc(-1*var(--rule-rim))}
.rule-band{outline:var(--rule-rim) solid var(--c-band);outline-offset:calc(-1*var(--rule-rim))}
/* bottom ink rule under a dark band (table head) and the darker top lip of a filled action button — mockup draws both as a hairline (border_brief 27/09) */
.rule-band-foot{box-shadow:inset 0 calc(-1*var(--rule-1)) 0 #000}
.rule-btn{box-shadow:inset 0 var(--rule-1) 0 #0E4A75}
/* perforated ticket / receipt edge: cream sheet with scalloped left+right ground-coloured holes */
.rule-perf{position:relative;background:var(--paper);border-radius:.25rem;outline:var(--rule-rim) solid var(--c-rim);outline-offset:var(--perf-in,-.42rem);
  -webkit-mask:radial-gradient(circle .32rem at 0 .55rem,transparent 98%,#000) left/51% 1.1rem repeat-y,radial-gradient(circle .32rem at 100% .55rem,transparent 98%,#000) right/51% 1.1rem repeat-y;
  mask:radial-gradient(circle .32rem at 0 .55rem,transparent 98%,#000) left/51% 1.1rem repeat-y,radial-gradient(circle .32rem at 100% .55rem,transparent 98%,#000) right/51% 1.1rem repeat-y}
.rule-perf.is-selected{background:var(--ticket)}

/* ---------- shared components ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--action);color:#fff;padding:.7rem 1.4rem;border-radius:.375rem;font-weight:600;transition:transform var(--t1) var(--ease-punch),box-shadow var(--t1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 .2rem 0 rgba(0,0,0,.35)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.display{font-family:var(--font-display);font-weight:400}

/* ---------- MOTION character ---------- */
/* print-in: rows/tickets slide out of the printer slot, settle with a small punch-easing overshoot */
.is-unprinted{opacity:0;transform:translateY(-.75rem)}
.is-printed{opacity:1;transform:none;transition:opacity var(--t2) var(--ease-punch) var(--d,0ms),transform var(--t3) var(--ease-punch) var(--d,0ms)}
/* flip counter */
.mt-flip{display:inline-block;transform-origin:50% 60%;animation:mt-flip var(--t2) var(--ease-punch)}
@keyframes mt-flip{0%{transform:rotateX(-88deg);opacity:.2}100%{transform:rotateX(0);opacity:1}}
/* punch hole */
[data-ticket]{position:relative}
[data-ticket]::after{content:"";position:absolute;right:1.25rem;top:50%;width:1rem;height:1rem;margin-top:-.5rem;border-radius:50%;background:var(--ground);transform:scale(0);pointer-events:none}
[data-ticket].is-punched::after{animation:mt-punch var(--t3) var(--ease-punch) forwards}
@keyframes mt-punch{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
/* hover: ticket lifts with a hard offset shadow */
[data-lift]{transition:transform var(--t1) var(--ease-punch),box-shadow var(--t1)}
[data-lift]:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:.2rem .25rem 0 rgba(18,25,27,.55)}
/* route change: perforated strip tears across under the nav */
.mt-tear{position:fixed;left:0;top:var(--nav-h);width:100%;height:.75rem;z-index:30;pointer-events:none;opacity:0;transform:translateX(-101%);
  background:radial-gradient(circle at .4rem 100%,transparent .28rem,var(--paper) .3rem) 0 0/.8rem 100% repeat-x}
.mt-tear.go{animation:mt-tear var(--t3) var(--ease-punch)}
@keyframes mt-tear{0%{transform:translateX(-101%);opacity:1}80%{opacity:1}100%{transform:translateX(101%);opacity:0}}
main.is-leaving{opacity:1;transition:none}
@media(prefers-reduced-motion:reduce){
  .is-unprinted,.is-printed{opacity:1!important;transform:none!important;transition:none!important}
  .mt-flip,.mt-tear.go,[data-ticket].is-punched::after{animation:none!important}
  [data-ticket].is-punched::after{transform:scale(1)}
  .btn,[data-lift],.mast-chip,.mast-routes a,.rc-line a{transition:none!important}
}

/* ---------- MOBILE (<1024): masthead stacks + route row wraps, receipt stacks ---------- */
@media(max-width:1023px){
  :root{--nav-h:4.5rem;--gutter-l:1rem;--gutter-r:1rem}
  [data-chrome="nav"]{height:auto;padding:.75rem 1rem 0}
  .mast-ear{position:static;font-size:.9375rem}
  .mast-ears{display:flex;justify-content:space-between;align-self:stretch;margin-bottom:.625rem}
  .mast-ear .mast-lbl{display:none}
  .mast-sign{height:auto;gap:.625rem}
  .mast-sign img{height:2.5rem}
  .mast-word{font-size:2rem;text-shadow:.125rem .125rem 0 var(--ink)}
  .mast-routes{height:auto;flex-wrap:wrap;gap:.25rem .5rem;padding:.5rem 0;margin-top:.625rem}
  .mast-routes a{height:2.25rem;padding:0 .7rem;font-size:.9375rem;letter-spacing:.1em}
  [data-chrome="footer"]{padding:2rem 1rem 1.5rem}
  .receipt{padding-left:1.25rem;padding-right:1.25rem}
  .rc-head{flex-wrap:wrap}
  .rc-kind{margin-left:0;width:100%}
  .rc-cols{grid-template-columns:1fr;gap:1.5rem}
  .rc-line{flex-wrap:wrap}
  .rc-total{font-size:1rem;flex-wrap:wrap}
  .rc-tail{flex-wrap:wrap;gap:.75rem}
  .rc-tail span:last-child{margin-left:0}
  .rc-bar{width:10rem}
}