/* app.css — TOWTRUCK shell (DESIGN.md tokens + N8 rail + F4 footer + border table classes).
   Build width 1920 (LUAT 50): --u = 100vw/1920 scales every value below with the viewport (1280–2560),
   never capped by a max-width container. Below 1024 the rail collapses to a top strip (DESIGN.md §1). */
:root{
  --paper:#001C54;--panel:#052E88;--inset:#00143E;
  --yellow:#FFD400;--cyan:#12DDEB;--ink:#00001F;
  --text:#F4F6FF;--muted:#A8B9F5;--error:#FF525C;--on-duty:#25F07A;
  --font-display:'Wallpoet';--font-body:'K2D';--font-mono:'Pixelify Sans';
  --u:1px;--rail:222;--gl:31;--gr:12;
}
@media (min-width:1024px){:root{--u:calc(100vw / 1920)}}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font-body),Arial,sans-serif;font-size:15px;min-height:100vh;overflow-x:hidden}
:where(button,input,select){border:0;background:none;font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-display),Impact,sans-serif;margin:0}
[data-cell],.mono,.pixel{font-family:var(--font-mono),monospace;font-variant-numeric:tabular-nums}

/* ---------- ONE PAGE FRAME (LUAT 53): rail + content row, footer full-width below ---------- */
.layout{display:flex;flex-direction:column;min-height:100vh}
.body-row{display:flex;flex:1;min-width:0}
main.frame{flex:1;min-width:0;padding:0 calc(var(--gr) * var(--u)) calc(48 * var(--u)) calc(var(--gl) * var(--u))}
@media (max-width:1023px){main.frame{padding:0 16px 40px}}

/* ---------- N8 rail (left, full height, dispatch style) ---------- */
.rail{flex:0 0 calc(var(--rail) * var(--u));width:calc(var(--rail) * var(--u));min-width:72px;background:var(--inset);
  display:flex;flex-direction:column;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;border-right:max(1px,calc(4.8 * var(--u))) solid var(--panel)}
.rail .brand{display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(16 * var(--u)) calc(14 * var(--u));border-bottom:max(1px,calc(2 * var(--u))) solid var(--panel);text-decoration:none;color:var(--text)}
.rail .brand img{width:calc(52 * var(--u));height:calc(52 * var(--u));object-fit:contain;min-width:44px;min-height:44px}
.rail .brand b{font-family:var(--font-display);font-size:clamp(11px,calc(15 * var(--u)),16px);letter-spacing:.02em}
.rail nav.links{display:flex;flex-direction:column}
.rail nav.links a{display:flex;align-items:center;gap:calc(12 * var(--u));padding:calc(14 * var(--u)) calc(14 * var(--u));text-decoration:none;color:var(--muted);font:700 clamp(11px,calc(15 * var(--u)),16px) var(--font-body);border-bottom:max(1px,calc(2 * var(--u))) solid var(--panel)}
.rail nav.links a .ic{width:calc(20 * var(--u));height:calc(20 * var(--u));min-width:16px;min-height:16px;flex:none}
.rail nav.links a .ic svg{width:100%;height:100%;display:block}
.rail nav.links a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.rail nav.links a[aria-current="page"]{background:var(--yellow);color:var(--ink)}
.rail nav.links a.social{color:var(--text)}
.rail nav.links a.social[aria-disabled="true"]{opacity:.6}

/* ---------- mobile: rail becomes a horizontal top strip ---------- */
@media (max-width:1023px){
  .body-row{flex-direction:column}
  .rail{position:static;height:auto;width:100%;flex:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:3px solid var(--panel)}
  .rail .brand{border-bottom:0;border-right:2px solid var(--panel);flex:none}
  .rail nav.links{flex-direction:row}
  .rail nav.links a{flex:none;border-bottom:0;border-right:2px solid var(--panel);white-space:nowrap}
}

/* ---------- F4 footer (full width, below rail+content) ---------- */
.site-footer{width:100%;min-height:calc(59 * var(--u));border:max(1px,calc(3.7 * var(--u))) solid var(--cyan);box-sizing:border-box;
  background:var(--inset);display:flex;align-items:center;justify-content:center;gap:calc(20 * var(--u));
  font:600 clamp(12px,calc(18 * var(--u)),18px) var(--font-body);color:var(--text);padding:calc(10 * var(--u)) 16px;flex-wrap:wrap;text-align:center}
.site-footer .key{background:var(--cyan);color:var(--ink);padding:4px 8px;font-weight:800}
.site-footer .name{font-weight:800}
.site-footer .sep{color:var(--yellow)}
.site-footer a.social{color:inherit;text-decoration:none}
.site-footer a.social[aria-disabled="true"]{opacity:.65}

/* ---------- border table classes (LUAT 56 — widths from BORDER_TABLE.md; route bodies use these, zero ad-hoc border:) ---------- */
.rule-panel{border:max(1px,calc(6 * var(--u))) solid #0042BA;border-radius:0}
.rule-panel-thin{border:max(1px,calc(4.8 * var(--u))) solid #000620;border-radius:0}
.rule-header{border:max(1px,calc(6 * var(--u))) solid var(--ink);background:var(--yellow);color:var(--ink);border-radius:0}
.rule-row{border-bottom:max(1px,calc(1.6 * var(--u))) solid var(--ink)}
.rule-row-top{border-top:max(1px,calc(1.6 * var(--u))) solid var(--ink)}
.rule-rows tr{border-bottom:max(1px,calc(2.3 * var(--u))) solid var(--ink)}
.rule-card{border:max(1px,calc(2.3 * var(--u))) solid var(--ink);border-radius:0}
.rule-input{border:max(1px,calc(3.4 * var(--u))) solid var(--cyan);border-radius:0}
.rule-footer{border:max(1px,calc(3.7 * var(--u))) solid var(--cyan);border-radius:0}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);background:var(--yellow);color:var(--ink);
  font:700 13px var(--font-body);padding:10px 16px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- motion (DESIGN.md §10 — mechanical dispatch equipment; transform/opacity only) ---------- */
.rc-pre{opacity:0;transform:translateY(10px)}
.rc-enter{animation:rc-enter .35s ease-out forwards}
@keyframes rc-enter{to{opacity:1;transform:none}}
.rc-tick{animation:rc-tick .3s ease-out}
@keyframes rc-tick{0%{opacity:.4}100%{opacity:1}}
.rc-press{animation:rc-press .32s cubic-bezier(.2,.8,.2,1)}
@keyframes rc-press{0%{transform:translateY(0)}40%{transform:translateY(3px)}100%{transform:translateY(0)}}
main.is-leaving{opacity:1}
main.frame.rc-wipe::before{content:"";position:fixed;top:0;bottom:0;right:0;left:calc(var(--rail) * var(--u));z-index:40;background:repeating-linear-gradient(45deg,var(--yellow) 0 24px,var(--ink) 24px 48px);animation:rc-wipe .24s linear forwards;pointer-events:none}
@media (max-width:1023px){main.frame.rc-wipe::before{left:0}}
@keyframes rc-wipe{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.rc-pre{opacity:1;transform:none}.rc-enter,.rc-tick,.rc-press,main.frame.rc-wipe::before{animation:none}}