/* "The Floor" — Reynaga Command Center. Dark night-floor design from design/claude-design (Claude Design export), bound to config/branding.
   Brand colours are injected as CSS variables at boot (applyBrand in common.js); everything else lives here. Class names are shared by every office page. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@600;700&display=swap');
:root {
  /* torch palette (kit) */
  --brand: #e4512f; --brand-deep: #c43a1e; --brand-lit: #ff7a50; --accent: #f0a830; --charcoal: #1c1f24; --silver: #a0a0aa;
  --brand-soft: rgba(228,81,47,.16); --brand-ink: #ff9573;
  /* surfaces: charcoal family */
  --void: #0f1115; --floor: #1c1f24; --panel: #1e2229; --panel-hi: #242830; --panel-sunk: #15181d;
  --bg: var(--void); --surface: var(--panel);
  --hair: rgba(255,255,255,.075); --hair-2: rgba(255,255,255,.045); --hair-3: rgba(255,255,255,.15);
  --line: var(--hair); --line-soft: var(--hair-2);
  --text: #f2f0ec; --text-2: #c6cad1; --text-3: #a8aeb8; --text-4: #949ba6;
  --ink: var(--text); --muted: var(--text-3); --faint: var(--text-4);
  /* status — lifted for dark surfaces */
  --green: #45c07e; --green-deep: #1f8a4c; --green-soft: rgba(69,192,126,.13); --green-ink: #7bd6a5;
  --amber: #e0a23a; --amber-deep: #b7791f; --amber-soft: rgba(224,162,58,.13); --amber-ink: #ebbb6b;
  --red: #f2604f; --red-deep: #b42318; --red-soft: rgba(242,96,79,.14); --red-ink: #ff9082;
  --navy: #8494b5; --navy-deep: #2f3b52; --navy-soft: rgba(132,148,181,.14); --navy-ink: #a8b5cd;
  --violet: #a08cee; --violet-deep: #5b3fb8; --violet-soft: rgba(160,140,238,.14); --violet-ink: #b9aaf3;
  --slate: #a8aeb8; --slate-soft: rgba(255,255,255,.06);
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 22px;
  --lift: 0 1px 0 rgba(255,255,255,.06) inset, 0 0 0 1px rgba(255,255,255,.05), 0 18px 44px -18px rgba(0,0,0,.85);
  --lift-2: 0 1px 0 rgba(255,255,255,.09) inset, 0 0 0 1px rgba(255,255,255,.09), 0 28px 64px -20px rgba(0,0,0,.95);
  --ease: cubic-bezier(.22,.9,.3,1); --ease-out: cubic-bezier(.16,1,.3,1);
  --shadow-1: var(--lift); --shadow-2: var(--lift-2); --shadow-3: 0 30px 80px -20px rgba(0,0,0,.95);
}
* { box-sizing: border-box; }
html { background: var(--void); } html, body { margin: 0; min-height: 100%; }
body { background: var(--void); color: var(--text); font: 14px/1.5 "IBM Plex Sans", system-ui, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body.app::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(900px 560px at 12% 108%, rgba(228,81,47,.13), transparent 62%), radial-gradient(1100px 700px at 92% -6%, rgba(47,59,82,.34), transparent 62%), var(--void); }
body.app::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E"); }
a { color: var(--brand-lit); text-decoration: none; } a:hover { color: #ff9573; }
.mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.num { font-family: "IBM Plex Mono", Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.disp { font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; } h1 { font-size: 30px; line-height: 1.1; } h2 { font-size: 14.5px; }
.k { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-4); }
.sub { color: var(--text-3); font-size: 13px; } .help { font-size: 12.5px; color: var(--text-3); line-height: 1.45; } .small { font-size: 12px; color: var(--text-3); }
.dim { color: var(--text-2); } .err { color: var(--red-ink); font-weight: 600; }
.app { min-height: 100vh; display: flex; flex-direction: column; position: relative; isolation: isolate; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── charcoal top bar ─────────────────────────────────────────── */
.top { height: 52px; flex: none; display: flex; align-items: center; gap: 13px; padding: 0 22px 0 20px; background: var(--charcoal); border-bottom: 1px solid rgba(0,0,0,.6); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 26px -12px rgba(0,0,0,.9); position: sticky; top: 0; z-index: 20; color: #fff; }
.top .lockup { display: flex; align-items: center; gap: 10px; flex: none; color: #fff; }
.top .mark { height: 34px; width: auto; display: block; filter: drop-shadow(0 3px 14px rgba(228,81,47,.35)); }
.top .word { color: #fff; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; white-space: nowrap; line-height: 1; } .top .word span { color: var(--silver); font-weight: 500; }
.top .divider { color: #4e545e; } .top .name { color: #fff; font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.top .search { position: relative; flex: 1; max-width: 330px; margin-left: 10px; }
.top .search input { height: 32px; width: 100%; border: 0; border-radius: 8px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); color: var(--text); padding: 0 40px 0 32px; font: inherit; font-size: 12.5px; transition: all .2s var(--ease); }
.top .search input:hover, .top .search input:focus { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px var(--hair-3); outline: none; }
.top .search input::placeholder { color: var(--text-4); }
.top .search svg { position: absolute; left: 11px; top: 9px; width: 14px; height: 14px; color: var(--text-4); }
.top .search .kbd { position: absolute; right: 8px; top: 8px; font: 10.5px/1 "IBM Plex Mono", monospace; padding: 3px 5px; border-radius: 5px; background: rgba(255,255,255,.09); color: var(--text-2); }
.top .results { position: absolute; left: 0; top: 38px; width: 440px; background: var(--panel-hi); color: var(--text); border-radius: 12px; box-shadow: var(--lift-2); display: none; max-height: 380px; overflow: auto; z-index: 30; }
.top .results.on { display: block; } .top .results a { display: flex; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--hair-2); color: var(--text); } .top .results a:hover { background: rgba(255,255,255,.05); }
.top .grow { flex: 1; }
.top .clock { display: flex; align-items: baseline; gap: 8px; flex: none; } .top .clock b { font: 600 16px/1 "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #fff; } .top .clock span { font-size: 11px; color: var(--text-4); white-space: nowrap; }
.top .vrule { width: 1px; height: 24px; background: rgba(255,255,255,.12); flex: none; }
.top .live { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px 1px rgba(69,192,126,.7); position: relative; flex: none; }
.pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--green); opacity: .5; animation: ping 2.6s var(--ease) infinite; }
.pulse.off { background: var(--red); box-shadow: 0 0 10px 1px rgba(242,96,79,.7); } .pulse.off::after { border-color: var(--red); }
@keyframes ping { 0% { transform: scale(.5); opacity: .7; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }
.chip.ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); color: var(--text-2); text-transform: none; letter-spacing: 0; font-weight: 500; } .chip.ghost a { color: #fff; }
.testmode { background: rgba(224,162,58,.12); color: var(--amber-ink); border-bottom: 1px solid rgba(224,162,58,.25); padding: 6px 22px; font-size: 12.5px; }
.testmode.live { background: rgba(69,192,126,.1); color: var(--green-ink); border-color: rgba(69,192,126,.25); } .testmode.stale { background: rgba(242,96,79,.12); color: var(--red-ink); border-color: rgba(242,96,79,.3); }

body.clean .testmode { display: none; }
/* ── rail / main / aside ──────────────────────────────────────── */
.body { display: flex; flex: 1; min-height: 0; }
.rail { width: 222px; flex: 0 0 222px; display: flex; flex-direction: column; padding: 16px 13px 14px; gap: 2px; background: linear-gradient(180deg, rgba(28,31,36,.94), rgba(21,24,29,.94)); border-right: 1px solid var(--hair-2); backdrop-filter: blur(8px); position: sticky; top: 52px; align-self: flex-start; height: calc(100vh - var(--chrome, 52px)); overflow: auto; }
.nav { display: flex; align-items: center; gap: 11px; height: 37px; padding: 0 11px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--text-3); cursor: pointer; position: relative; transition: all .2s var(--ease); }
.nav svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.nav:hover { background: rgba(255,255,255,.05); color: var(--text); }
.nav.on { background: linear-gradient(90deg, rgba(228,81,47,.2), rgba(228,81,47,.03)); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(228,81,47,.24); }
.nav.on svg { opacity: 1; color: var(--brand-lit); }
.nav.on::before { content: ''; position: absolute; left: -13px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 4px 4px 0; background: var(--brand); box-shadow: 0 0 16px 2px rgba(228,81,47,.9); }
.nav .tag { margin-left: auto; font: 600 10.5px/1 "IBM Plex Mono", monospace; padding: 3px 6px; border-radius: 6px; background: rgba(242,96,79,.2); color: #ff9e92; box-shadow: inset 0 0 0 1px rgba(242,96,79,.3); }
.rail .sec { font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-4); padding: 20px 11px 8px; }
.rail .grow { flex: 1; }
.railcard { margin: 6px 2px 0; padding: 4px 12px; border-radius: 12px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--hair-2); }
.rail .alert { display: flex; align-items: center; gap: 9px; padding: 9px 0; font-size: 12.5px; color: var(--text-3); transition: color .15s; } .rail .alert:hover { color: #fff; }
.rail .alert + .alert { border-top: 1px solid var(--hair-2); }
.rail .alert.red { color: var(--text-3); } .rail .alert.amber { color: var(--text-3); } .rail .alert.ok { color: var(--text-4); font-weight: 400; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }
.dot.red, .rail .alert.red .dot { background: var(--red); box-shadow: 0 0 10px 1px rgba(242,96,79,.7); }
.dot.amber, .rail .alert.amber .dot { background: var(--amber); box-shadow: 0 0 10px 1px rgba(224,162,58,.6); }
.dot.green { background: var(--green); box-shadow: 0 0 10px 1px rgba(69,192,126,.6); }
.railfoot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 12px; background: rgba(255,255,255,.045); color: var(--text); transition: background .2s var(--ease); }
.railfoot:hover { background: rgba(255,255,255,.085); }
.av { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: #fff; background: linear-gradient(150deg, #3c4553, #252b34); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 26px 28px 44px; gap: 20px; }
.aside { width: 380px; flex: 0 0 380px; padding: 26px 28px 44px 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 52px; align-self: flex-start; max-height: calc(100vh - 52px); overflow: auto; }
.aside > h2 { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); padding: 6px 0 0; }
.aside:empty { display: none; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 20px; }
@media (max-width: 1200px) { .aside { display: none; } }
.crumb { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-4); letter-spacing: .02em; } .crumb b { color: var(--text-3); font-weight: 500; } .crumb a { color: var(--text-4); } .crumb a:hover { color: var(--text-2); }
.roles { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; font-size: 11.5px; color: var(--text-4); } .roles b { color: var(--text-2); font-weight: 600; } .roles .k { color: var(--brand-lit); }

/* ── panels (cards) ──────────────────────────────────────────── */
.card, .panel { background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border-radius: var(--r-xl); box-shadow: var(--lift); display: flex; flex-direction: column; overflow: hidden; position: relative; transition: box-shadow .26s var(--ease), transform .26s var(--ease); }
.card::before, .panel::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.17), transparent); pointer-events: none; }
.card:hover { box-shadow: var(--lift-2); }
.card .hd, .ph { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 16px 20px 14px; position: relative; } .card .hd h2 { white-space: nowrap; flex: none; }
.card .hd + * { border-top: 1px solid var(--hair-2); }
.card .bd, .pad { padding: 16px 20px; } .card .ft, .foot { padding: 14px 20px; border-top: 1px solid var(--hair-2); background: rgba(0,0,0,.2); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card .hd .chip { flex: none; }
.aside .card { border-radius: var(--r-l); }
.aside .card .hd { padding: 13px 16px 11px; } .aside .card .bd { padding: 13px 16px; }
.grp { display: flex; align-items: center; gap: 10px; padding: 11px 20px; background: rgba(0,0,0,.26); border-bottom: 1px solid var(--hair-2); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); }
.grp .gs { flex: 1; } .grp b { font: 600 11.5px/1 "IBM Plex Mono", monospace; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.rate { display: inline-flex; align-items: baseline; gap: 5px; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; } .rate b { font-size: 14px; font-weight: 600; color: var(--accent); } .rate span { font-size: 11px; color: var(--text-4); }

/* ── controls ────────────────────────────────────────────────── */
.btn, button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: rgba(255,255,255,.06); color: var(--text); font: 600 13px/1 "IBM Plex Sans", sans-serif; white-space: nowrap; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px var(--hair-2); transition: all .18s var(--ease); }
.btn svg, button svg { width: 15px; height: 15px; flex: none; }
.btn:hover, button:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px var(--hair-3), 0 10px 24px -10px rgba(0,0,0,.9); }
.btn:active, button:active { transform: none; }
.btn.primary, button.primary { background: var(--brand); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 10px 30px -10px rgba(228,81,47,.85); }
.btn.primary:hover, button.primary:hover { background: var(--brand-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 16px 40px -12px rgba(228,81,47,.95); }
.btn.danger, button.danger { color: var(--red-ink); box-shadow: inset 0 0 0 1px rgba(242,96,79,.35); } .btn.danger:hover, button.danger:hover { background: rgba(242,96,79,.14); }
.btn.ghost, button.ghost { background: transparent; box-shadow: none; color: var(--text-3); font-weight: 500; } .btn.ghost:hover, button.ghost:hover { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text); }
.btn.sm, button.sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; } .btn.sm svg, button.sm svg { width: 13px; height: 13px; }
.btn.ic { width: 36px; padding: 0; } .btn.ic.sm { width: 30px; }
button:disabled { opacity: .45; cursor: default; transform: none !important; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 1px var(--hair-2); }
.seg span, .seg button { height: 28px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-3); cursor: pointer; background: transparent; box-shadow: none; transition: all .18s var(--ease); }
.seg span:hover, .seg button:hover { color: var(--text); transform: none; background: transparent; box-shadow: none; }
.seg span.on, .seg button.on, .seg button.primary { background: rgba(255,255,255,.11); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
input, select, textarea { font: inherit; font-size: 13.5px; color: var(--text); background: rgba(255,255,255,.05); border: 0; box-shadow: inset 0 0 0 1px var(--hair-2); border-radius: 10px; height: 36px; padding: 0 12px; transition: box-shadow .18s var(--ease), background .18s var(--ease); color-scheme: dark; }
input:hover, select:hover, textarea:hover { background: rgba(255,255,255,.075); }
input:focus, select:focus, textarea:focus { outline: none; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(228,81,47,.6), 0 0 0 4px rgba(228,81,47,.14); }
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--brand); padding: 0; margin: 0; vertical-align: middle; box-shadow: none; border-radius: 5px; }
input[type=color] { padding: 2px; }
select { height: 36px; } select.sm, input.sm { height: 30px; font-size: 12.5px; padding: 0 8px; border-radius: 8px; }
select option { background: var(--panel-hi); color: var(--text); }
textarea { height: auto; padding: 10px 12px; min-height: 100px; }
input::placeholder, textarea::placeholder { color: var(--text-4); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-3); } .field input, .field select { width: 100%; font-weight: 400; letter-spacing: 0; }
form.inline { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
form.inline label { display: flex; flex-direction: column; font-size: 11.5px; font-weight: 600; color: var(--text-3); gap: 6px; } form.inline label input, form.inline label select { width: 100%; font-weight: 400; }
.row { display: flex; align-items: center; gap: 8px; } .row.wrap { flex-wrap: wrap; } .grow { flex: 1; }

/* ── chips / pills ───────────────────────────────────────────── */
.chip, .pill { display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text-3); white-space: nowrap; vertical-align: middle; }
.chip.brand, .pill.brand { background: rgba(228,81,47,.16); color: #ff9573; box-shadow: inset 0 0 0 1px rgba(228,81,47,.3); }
.chip.green, .pill.ok, .pill.started, .pill.live, .pill.received, .pill.current, .pill.reviewed, .pill.exported, .pill.acknowledged, .pill.accepted { background: rgba(69,192,126,.13); color: #7bd6a5; box-shadow: inset 0 0 0 1px rgba(69,192,126,.24); }
.chip.amber, .pill.warn, .pill.sent, .pill.assigned, .pill.issued, .pill.pending, .pill.delayed, .pill.expiring, .pill.opened, .pill.draft, .pill.partial, .pill.manual { background: rgba(224,162,58,.13); color: #ebbb6b; box-shadow: inset 0 0 0 1px rgba(224,162,58,.24); }
.chip.red, .pill.bad, .pill.no_show, .pill.no_show_candidate, .pill.cancelled, .pill.missing, .pill.stale, .pill.problem, .pill.flag, .pill.expired, .pill.failed, .pill.blocked, .pill.declined { background: rgba(242,96,79,.14); color: #ff9082; box-shadow: inset 0 0 0 1px rgba(242,96,79,.28); }
.chip.navy, .pill.ended, .pill.active, .pill.completed, .pill.complete, .pill.owner { background: rgba(132,148,181,.14); color: #a8b5cd; box-shadow: inset 0 0 0 1px rgba(132,148,181,.24); }
.chip.violet, .pill.review, .pill.buffered, .pill.under_review, .pill.duplicate, .pill.blocked_test_mode { background: rgba(160,140,238,.14); color: #b9aaf3; box-shadow: inset 0 0 0 1px rgba(160,140,238,.26); }
.pill.offline, .pill.not_sent, .pill.inactive, .pill.closed, .pill.replaced, .pill.superseded, .pill.none { background: rgba(255,255,255,.06); color: var(--text-3); }
.code { font: 600 11.5px/1 "IBM Plex Mono", monospace; padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text-3); white-space: nowrap; }
.code.on { background: rgba(228,81,47,.16); color: #ff9573; box-shadow: inset 0 0 0 1px rgba(228,81,47,.32); }
.slots { display: inline-flex; gap: 3px; vertical-align: middle; } .slots i { width: 8px; height: 20px; border-radius: 3px; background: rgba(255,255,255,.1); display: block; }
.slots i.f { background: var(--green); box-shadow: 0 0 8px -1px rgba(69,192,126,.75); } .slots i.p { background: var(--amber); box-shadow: 0 0 8px -1px rgba(224,162,58,.7); } .slots i.e { background: rgba(242,96,79,.14); box-shadow: inset 0 0 0 1.5px rgba(242,96,79,.5); }

/* ── tables ──────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; background: transparent; }
th { text-align: left; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-4); padding: 11px 20px; background: rgba(0,0,0,.24); border-bottom: 1px solid var(--hair-2); white-space: nowrap; }
td { padding: 13px 20px; border-bottom: 1px solid var(--hair-2); vertical-align: middle; font-size: 13.5px; }
.aside th { padding: 9px 12px; } .aside td { padding: 9px 12px; font-size: 12.5px; }
tbody tr { transition: background .16s var(--ease); } tbody tr:hover { background: rgba(255,255,255,.03); } tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
tbody tr:last-child td { border-bottom: 0; } tr.dim td { color: var(--text-4); }
td .sub, td .help { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.tname { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .tsub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.rowact { opacity: 0; transition: opacity .16s var(--ease); } tbody tr:hover .rowact { opacity: 1; }
table.compact td { padding: 8px 12px; } table.compact th { padding: 8px 12px; }

/* ── tabs, flow, banners, stats, readouts ────────────────────── */
.tabs { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 1px var(--hair-2); gap: 0; border-bottom: 0; align-self: flex-start; }
.tab { height: 28px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-3); cursor: pointer; border: 0; margin: 0; transition: all .18s var(--ease); }
.tab:hover { color: var(--text); } .tab.on { background: rgba(255,255,255,.11); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border-radius: var(--r-l); box-shadow: var(--lift); overflow: hidden; }
.flow .step { display: flex; align-items: center; gap: 11px; padding: 13px 16px; color: var(--text-3); white-space: nowrap; cursor: pointer; border-right: 1px solid var(--hair-2); transition: background .18s var(--ease); min-width: 0; }
.flow .step:last-child { border-right: 0; } .flow .step:hover { background: rgba(255,255,255,.03); }
.flow .step .n { width: 24px; height: 24px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font: 600 11px/1 "IBM Plex Mono", monospace; background: rgba(255,255,255,.06); color: var(--text-4); box-shadow: inset 0 0 0 1px var(--hair-2); }
.flow .step b { font-weight: 600; color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; } .flow .step .t { display: block; font: 11px/1 "IBM Plex Mono", monospace; color: var(--text-4); margin-top: 4px; }
.flow .step.done .n { background: var(--green); color: #06140d; box-shadow: 0 0 12px -2px rgba(61,214,140,.75); } .flow .step.done b { color: var(--text); }
.flow .step.now { background: rgba(255,106,61,.1); box-shadow: inset 0 -2px 0 var(--brand); } .flow .step.now .n { background: var(--brand); color: #fff; box-shadow: 0 0 14px -1px rgba(255,106,61,.9); animation: pulseRing 2.4s ease-in-out infinite; } .flow .step.now b, .flow .step.now .t { color: #ff9166; }
.flow .gap { display: none; }
@keyframes pulseRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(228,81,47,.45); } 50% { box-shadow: 0 0 0 6px rgba(228,81,47,0); } }
.banner { border-radius: var(--r-l); padding: 13px 18px; display: flex; align-items: center; gap: 13px; font-size: 13px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text-2); }
.banner.red { background: linear-gradient(100deg, rgba(242,96,79,.16), rgba(242,96,79,.03)); color: #ffc4b9; box-shadow: inset 0 0 0 1px rgba(242,96,79,.28); }
.banner.green { background: linear-gradient(100deg, rgba(69,192,126,.14), rgba(69,192,126,.02)); color: #b6f0d3; box-shadow: inset 0 0 0 1px rgba(69,192,126,.28); }
.banner.amber { background: linear-gradient(100deg, rgba(224,162,58,.14), rgba(224,162,58,.02)); color: #f0ce92; box-shadow: inset 0 0 0 1px rgba(224,162,58,.3); }
.banner.info { background: linear-gradient(100deg, rgba(132,148,181,.14), rgba(132,148,181,.02)); color: #c5cfe2; box-shadow: inset 0 0 0 1px rgba(132,148,181,.28); }
.banner.brand, .alert { background: linear-gradient(100deg, rgba(228,81,47,.16), rgba(228,81,47,.03)); box-shadow: inset 0 0 0 1px rgba(228,81,47,.28), 0 14px 40px -20px rgba(228,81,47,.65); color: var(--text); }
.banner svg { width: 14px; height: 14px; flex: 0 0 14px; }
.alert .ai { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--brand); display: grid; place-items: center; box-shadow: 0 6px 18px -4px rgba(228,81,47,.85), inset 0 1px 0 rgba(255,255,255,.3); } .alert .ai svg { width: 16px; height: 16px; color: #fff; }
.stat { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hair-2); font-size: 13px; color: var(--text-3); } .stat b { font-size: 16px; font-weight: 600; color: var(--text); font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; }
.readout { display: flex; align-items: stretch; border-top: 1px solid var(--hair-2); }
.ro { flex: 1; padding: 16px 20px 17px; display: flex; flex-direction: column; gap: 7px; transition: background .2s var(--ease); } .ro + .ro { border-left: 1px solid var(--hair-2); } .ro:hover { background: rgba(255,255,255,.025); }
.ro .rv { font: 600 34px/1 "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; } .ro .rv small { font: 500 13px/1 "IBM Plex Sans", sans-serif; color: var(--text-3); letter-spacing: 0; }
.ro .rb { height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; } .ro .rb i { display: block; height: 100%; border-radius: 2px; animation: grow 1.1s var(--ease) both; }
.g-flame { background: var(--brand); box-shadow: 0 0 10px 0 rgba(228,81,47,.85); } .g-ok { background: var(--green); box-shadow: 0 0 10px 0 rgba(69,192,126,.6); } .g-warn { background: var(--accent); box-shadow: 0 0 10px 0 rgba(240,168,48,.6); }
@keyframes grow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
.mini { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--hair-2); } .mini > div { display: flex; flex-direction: column; gap: 3px; } .mini b { font: 600 19px/1 "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; } .mini .vr { width: 1px; height: 28px; background: var(--hair-2); }
.note { border-radius: var(--r-m); padding: 12px 14px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 13px; line-height: 1.6; color: var(--text-2); } .note.ok { background: rgba(69,192,126,.1); box-shadow: inset 0 0 0 1px rgba(69,192,126,.24); } .note em { color: var(--accent); font-style: normal; font-weight: 600; }
.linkbox, .link-box { font-family: "IBM Plex Mono", Menlo, monospace; font-size: 12px; background: rgba(0,0,0,.38); box-shadow: inset 0 0 0 1px var(--hair-2); color: #c7f9d9; padding: 7px 9px; border-radius: 8px; word-break: break-all; margin: 4px 0; }
.actions button, .actions .btn { margin: 0 4px 4px 0; }
.fe { display: flex; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--hair-2); } .fe:last-child { border-bottom: 0; }
.fi { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #12151a; } .fi svg { width: 14px; height: 14px; }
.ft { font-size: 12.8px; line-height: 1.45; min-width: 0; color: var(--text-3); } .ft b { color: var(--text); font-weight: 600; } .fw { font: 11px/1 "IBM Plex Mono", monospace; color: var(--text-4); margin-left: auto; flex: none; padding-top: 3px; }
.check { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--hair-2); font-size: 13px; } .check:last-child { border-bottom: 0; }
.box { width: 18px; height: 18px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--hair-3); display: grid; place-items: center; } .box.on { background: var(--green); box-shadow: 0 0 12px -2px rgba(69,192,126,.8); } .box.on svg { width: 11px; height: 11px; color: #08150f; }
.check.on .lbl { color: var(--text-4); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.22); }
.tbar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; display: flex; } .tbar i { display: block; height: 100%; animation: grow 1s var(--ease) both; }
.i-flame { background: var(--brand); } .i-ok { background: var(--green); } .i-warn { background: var(--accent); } .i-bad { background: var(--red); } .i-end { background: var(--navy); }
.money { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.02em; }

/* ── modal ───────────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; background: rgba(8,10,14,.62); display: none; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow: auto; z-index: 50; backdrop-filter: blur(4px); animation: fade .18s var(--ease) both; } .modal.on { display: flex; }
.modal .inner { background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border-radius: var(--r-xl); padding: 22px; max-width: 1000px; width: 100%; box-shadow: var(--lift-2), var(--shadow-3); animation: pop .26s var(--ease-out) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* ── map ─────────────────────────────────────────────────────── */
#map { flex: 1; min-height: 420px; border-radius: var(--r-l); box-shadow: var(--lift); overflow: hidden; background: #12161c; }
.truck { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 120px; margin-left: -60px; margin-top: -30px; }
.truck svg { width: 62px; height: 35px; stroke: none; }
.truckmini svg { width: 44px; height: 25px; vertical-align: middle; stroke: none; }
.truck .tag { font: 500 11px/1 "IBM Plex Sans", sans-serif; color: var(--text-2); background: rgba(18,22,28,.88); box-shadow: inset 0 0 0 1px var(--hair-2); border-radius: 6px; padding: 4px 7px; white-space: nowrap; backdrop-filter: blur(6px); } .truck .tag b { font-family: "IBM Plex Mono", Menlo, monospace; color: #fff; }
.truck.live .tag { box-shadow: inset 0 0 0 1px rgba(69,192,126,.5); } .truck.delayed .tag { box-shadow: inset 0 0 0 1px rgba(224,162,58,.5); } .truck.stale .tag { box-shadow: inset 0 0 0 1px rgba(242,96,79,.55); }
.truck.live svg { filter: drop-shadow(0 0 5px #45c07e) drop-shadow(0 0 2px #45c07e); animation: glowLive 2.6s ease-in-out infinite; } .truck.live .tag { color: #7bd6a5; }
.truck.delayed svg { filter: drop-shadow(0 0 5px #e0a23a) drop-shadow(0 0 2px #e0a23a); animation: glowDelayed 3.2s ease-in-out infinite; } .truck.delayed .tag { color: #ebbb6b; }
.truck.stale svg { filter: drop-shadow(0 0 5px #f2604f) drop-shadow(0 0 2px #f2604f); animation: glowStale 1.8s ease-in-out infinite; } .truck.stale .tag { color: #ff9082; }
.truck.offline svg { filter: grayscale(1) opacity(.55); } .truck.offline .tag { color: var(--text-4); }
.truck.ended svg { filter: drop-shadow(0 0 4px #8494b5); opacity: .8; } .truck.ended .tag { color: #a8b5cd; }
@keyframes glowLive { 0%, 100% { filter: drop-shadow(0 0 4px #45c07e) drop-shadow(0 0 1px #45c07e); } 50% { filter: drop-shadow(0 0 11px #45c07e) drop-shadow(0 0 3px #45c07e); } }
@keyframes glowDelayed { 0%, 100% { filter: drop-shadow(0 0 4px #e0a23a); } 50% { filter: drop-shadow(0 0 10px #e0a23a); } }
@keyframes glowStale { 0%, 100% { filter: drop-shadow(0 0 4px #f2604f); } 50% { filter: drop-shadow(0 0 12px #f2604f); } }
.truckwrap { will-change: transform; } .maplibregl-marker { cursor: pointer; } .leaflet-marker-icon { transition: transform .9s var(--ease); }
.cl { width: 34px; height: 34px; border-radius: 50%; background: var(--charcoal); color: #fff; display: flex; align-items: center; justify-content: center; font: 600 13px "IBM Plex Sans", sans-serif; box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.5); cursor: pointer; transition: transform .18s var(--ease-out); } .cl:hover { transform: scale(1.12); }
.cl.live { box-shadow: 0 0 0 3px rgba(69,192,126,.4), 0 2px 8px rgba(0,0,0,.5); } .cl.delayed { box-shadow: 0 0 0 3px rgba(224,162,58,.45), 0 2px 8px rgba(0,0,0,.5); } .cl.stale { box-shadow: 0 0 0 3px rgba(242,96,79,.5), 0 2px 8px rgba(0,0,0,.5); }
.maplibregl-popup-content { border-radius: 10px; box-shadow: var(--lift-2); padding: 10px 12px; background: var(--panel-hi); color: var(--text); } .maplibregl-popup-tip { border-top-color: var(--panel-hi) !important; border-bottom-color: var(--panel-hi) !important; }
.maplibregl-ctrl-group { background: var(--panel-hi) !important; box-shadow: var(--lift) !important; } .maplibregl-ctrl-group button { filter: invert(.85); } .maplibregl-ctrl-scale { background: rgba(18,22,28,.7) !important; color: var(--text-2) !important; border-color: var(--hair-3) !important; }
.maplibregl-ctrl-attrib { background: rgba(18,22,28,.7) !important; color: var(--text-4) !important; } .maplibregl-ctrl-attrib a { color: var(--text-3) !important; }
.marker-cluster { background: rgba(28,31,36,.25) !important; } .marker-cluster div { background: var(--charcoal) !important; color: #fff !important; font: 600 12px "IBM Plex Sans", sans-serif !important; }

/* ── documents ───────────────────────────────────────────────── */
.thumbs { display: flex; gap: 12px; flex-wrap: wrap; } .thumb { width: 180px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--hair-2); padding: 8px; border-radius: 12px; } .thumb img { width: 100%; height: 130px; object-fit: cover; border-radius: 6px; background: #0f1115; }

/* ── login pages ─────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(900px 560px at 12% 108%, rgba(228,81,47,.16), transparent 62%), radial-gradient(1100px 700px at 92% -6%, rgba(47,59,82,.34), transparent 62%), var(--void); }
.login-card { width: 400px; background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--lift-2); } .login-card input { width: 100%; height: 42px; font-size: 15px; } .login-card button { height: 42px; font-size: 15px; justify-content: center; }

/* ── motion ──────────────────────────────────────────────────── */
.main > * { animation: rise .6s var(--ease) both; }
.main > *:nth-child(2) { animation-delay: .06s; } .main > *:nth-child(3) { animation-delay: .12s; } .main > *:nth-child(4) { animation-delay: .18s; } .main > *:nth-child(5) { animation-delay: .24s; }
.aside > * { animation: rise .6s var(--ease) both; animation-delay: .1s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.chip.bump { animation: bump .45s var(--ease-out); } @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }
.rail .alert.red .dot, .rail .alert.amber .dot { animation: blink 2.2s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
.skel { background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.05) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: 6px; height: 12px; } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.fadein { animation: rise .28s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* ── calendar ────────────────────────────────────────────────── */
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--lift); }
.calgrid .dow { padding: 10px 12px; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-4); background: rgba(0,0,0,.24); border-bottom: 1px solid var(--hair-2); border-right: 1px solid var(--hair-2); text-align: center; }
.cell { min-height: 104px; padding: 7px; border-right: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); display: flex; flex-direction: column; gap: 5px; transition: background .18s var(--ease); }
.cell:hover { background: rgba(255,255,255,.03); } .cell.out { background: rgba(0,0,0,.16); color: var(--text-4); }
.cell.today { background: rgba(228,81,47,.055); box-shadow: inset 0 0 0 1px rgba(228,81,47,.18); }
.cell .d { font: 600 12px/1 "IBM Plex Mono", monospace; color: var(--text-3); display: flex; align-items: center; justify-content: space-between; } .cell.today .d { color: var(--brand-lit); } .cell.out .d { opacity: .6; }
.ev { display: flex; flex-direction: column; gap: 2px; min-width: 0; border-radius: 8px; padding: 6px 8px; font-size: 11.5px; line-height: 1.25; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--text-2); animation: rise .3s var(--ease-out) both; transition: transform .16s var(--ease); text-decoration: none; }
.ev:hover { transform: translateY(-1px); } .ev b { font: 600 11px/1.2 "IBM Plex Mono", monospace; } .ev .m { color: inherit; opacity: .85; }
.ev.ready { background: rgba(69,192,126,.14); box-shadow: inset 0 0 0 1px rgba(69,192,126,.28); color: #8fddb4; } .ev.running { background: rgba(228,81,47,.17); box-shadow: inset 0 0 0 1px rgba(228,81,47,.34); color: #ffc4ae; }
.ev.short, .ev.missed { background: rgba(242,96,79,.14); box-shadow: inset 0 0 0 1px rgba(242,96,79,.3); color: #ffa598; } .ev.backup_missing { background: rgba(240,168,48,.11); box-shadow: inset 0 0 0 1px rgba(240,168,48,.3); color: #efce96; }
.ev.done { background: rgba(132,148,181,.12); box-shadow: inset 0 0 0 1px rgba(132,148,181,.2); color: #aebacf; } .ev.cancelled { opacity: .55; text-decoration: line-through; }
.weekcol { background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border-radius: var(--r-l); padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 260px; box-shadow: var(--lift); min-width: 0; }
.weekcol.today { box-shadow: inset 0 0 0 1px rgba(228,81,47,.35), var(--lift); }
.bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--green); transition: width .6s var(--ease-out); } .bar i.short { background: var(--red); } .bar i.part { background: var(--amber); }

/* ── AI assistant drawer ─────────────────────────────────────── */
.ai-btn { background: var(--brand); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 10px 30px -10px rgba(228,81,47,.85); }
.ai-drawer[hidden] { display: none; }
.ai-drawer { position: fixed; right: 0; top: 52px; bottom: 0; width: 420px; max-width: 92vw; background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border-left: 1px solid var(--hair); box-shadow: -18px 0 60px rgba(0,0,0,.6); z-index: 30; display: flex; flex-direction: column; animation: slideIn .28s var(--ease); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.ai-hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--hair-2); background: var(--charcoal); color: #fff; }
.ai-help { font-size: 12px; color: var(--text-3); padding: 10px 14px; border-bottom: 1px solid var(--hair-2); line-height: 1.45; }
.ai-log { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ai-msg { max-width: 92%; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 13.5px; line-height: 1.45; align-self: flex-start; color: var(--text-2); }
.ai-msg.me { align-self: flex-end; background: rgba(228,81,47,.16); box-shadow: inset 0 0 0 1px rgba(228,81,47,.3); color: var(--text); }
.ai-msg.thinking { color: var(--text-4); font-style: italic; animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .5; } }
.ai-card { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(240,168,48,.08); box-shadow: inset 0 0 0 1px rgba(240,168,48,.3); color: var(--text); }
.ai-card.done { background: rgba(69,192,126,.1); box-shadow: inset 0 0 0 1px rgba(69,192,126,.28); }
.ai-sum { font-weight: 600; margin-top: 4px; }
.ai-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--hair-2); background: rgba(0,0,0,.2); }
.ai-form textarea { flex: 1; resize: none; font: inherit; padding: 10px 12px; min-height: 56px; }

/* ── phones & tablets ───────────────────────────────────────── */
.menu-btn { display: none; }
@media (max-width: 1000px) {
  .top { padding: 0 12px; gap: 8px; } .top .name, .top .divider, .top .clock, .top .vrule, .top .live { display: none; } .top .search { max-width: none; margin-left: 4px; } .top .kbd { display: none; }
  .menu-btn { display: inline-flex; width: 36px; padding: 0; }
  .rail { position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; z-index: 40; transform: translateX(-104%); transition: transform .26s var(--ease); box-shadow: 30px 0 60px rgba(0,0,0,.5); background: #1a1d23; }
  body.rail-open .rail { transform: none; }
  .rail-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 39; display: none; } body.rail-open .rail-scrim { display: block; }
  .main { padding: 14px 14px 40px; gap: 14px; } h1 { font-size: 22px; }
  .aside { display: none; }
  .card > table, .card table { display: block; overflow-x: auto; white-space: nowrap; } .card table thead, .card table tbody, .card table tr { display: table; width: 100%; table-layout: auto; }
  .two, .grid2, [style*="grid-template-columns: minmax(0, 1fr) 380px"] { grid-template-columns: 1fr !important; display: grid; }
  .flow { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow .step { border-right: 0; border-bottom: 1px solid var(--hair-2); }
  .readout { flex-wrap: wrap; } .ro { flex: 1 1 45%; } .ro + .ro { border-left: 0; }
  .pagehead { flex-direction: column; align-items: stretch !important; gap: 10px !important; } .pagehead .row { flex-wrap: wrap; }
  .ai-drawer { width: 100vw; max-width: 100vw; top: 52px; }
  .modal { padding: 12px; } .modal .inner { padding: 14px; }
  .testmode { padding: 6px 14px; font-size: 12px; }
  .alert, .banner { flex-wrap: wrap; } .alert > div, .banner > div { flex: 1 1 100%; } .alert .grow { display: none; }
  .top .search input { padding-left: 30px; }
}
.tab .tag { margin-left: 6px; font: 600 10.5px/1 "IBM Plex Mono", monospace; padding: 2px 6px; border-radius: 6px; background: var(--red); color: #fff; vertical-align: middle; }

/* Phase H: support access + read-only features */
.testmode.support { background: #7a1f16; color: #fff; }
.nav.revoked span::after, [data-feature].revoked > h2::after { content: ' read-only'; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; margin-left: 6px; }
.nav.revoked { opacity: .75; }