/* Layout: spec-sheet console — fixed index rail on the left, a search bar that owns the top,
   working views below. Asset-tag chips for serials are the one signature element. */
:root {
  --bg: #EDF0F2; --surface: #FFFFFF; --surface-2: #F5F7F8; --sunk: #E3E8EB;
  --ink: #171C21; --ink-2: #4C5862; --ink-3: #75818B; --line: #D3DADF; --line-2: #BFC8CF;
  --accent: #D2520B; --accent-ink: #FFFFFF; --accent-soft: #FBE7DA;
  --truck: #2F5D8A; --truck-soft: #E1EAF3;
  --office: #2B7A55; --office-soft: #DDF0E6;
  --warehouse: #946000; --warehouse-soft: #F6EBD3;
  --danger: #B42318; --danger-soft: #FBE3E0; --warn: #9A6700; --warn-soft: #FFF1CC;
  --tag: #FFFDF5; --tag-line: #CDBF95;
  --rail: #1B232B; --rail-ink: #DCE3E8; --rail-ink-2: #8E9BA6; --rail-hover: #26313B;
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r-input: 3px; --r-panel: 6px; --r-chip: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0F1418; --surface: #161D23; --surface-2: #1B242B; --sunk: #222C34;
  --ink: #E3E9ED; --ink-2: #A3B0BA; --ink-3: #7C8994; --line: #2A353F; --line-2: #3A4752;
  --accent: #F07A32; --accent-ink: #1A0E05; --accent-soft: #3A2414;
  --truck: #7EA9D6; --truck-soft: #1C2B3A; --office: #5CC294; --office-soft: #16302A;
  --warehouse: #E0A847; --warehouse-soft: #33280F; --danger: #F2877E; --danger-soft: #3A1B19;
  --warn: #E7B957; --warn-soft: #33290F; --tag: #232A22; --tag-line: #5C5A44;
  --rail: #0B1013; --rail-ink: #DCE3E8; --rail-ink-2: #85929C; --rail-hover: #182027;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0F1418; --surface: #161D23; --surface-2: #1B242B; --sunk: #222C34;
  --ink: #E3E9ED; --ink-2: #A3B0BA; --ink-3: #7C8994; --line: #2A353F; --line-2: #3A4752;
  --accent: #F07A32; --accent-ink: #1A0E05; --accent-soft: #3A2414;
  --truck: #7EA9D6; --truck-soft: #1C2B3A; --office: #5CC294; --office-soft: #16302A;
  --warehouse: #E0A847; --warehouse-soft: #33280F; --danger: #F2877E; --danger-soft: #3A1B19;
  --warn: #E7B957; --warn-soft: #33290F; --tag: #232A22; --tag-line: #5C5A44;
  --rail: #0B1013; --rail-ink: #DCE3E8; --rail-ink-2: #85929C; --rail-hover: #182027;
  color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
img { max-width: 100%; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--truck); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: 0.92em; letter-spacing: 0.01em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--rail); color: var(--rail-ink); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s5);
  padding: calc(var(--s5) + env(safe-area-inset-top, 0px)) var(--s3) var(--s5) max(var(--s3), env(safe-area-inset-left, 0px)); }
.brand { display: grid; gap: 2px; padding: 0 var(--s2); }
.brand b { font: 800 22px/1 var(--f-display); font-stretch: 112%; letter-spacing: 0.01em; }
.brand span { color: var(--rail-ink-2); font-size: 13px; }
.rail nav { display: grid; gap: 2px; }
.rail nav a { display: flex; align-items: center; gap: var(--s3); padding: 9px var(--s2); border-radius: var(--r-input); color: var(--rail-ink); text-decoration: none; font-weight: 500; }
.rail nav a svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; color: var(--rail-ink-2); }
.rail nav a:hover { background: var(--rail-hover); }
.rail nav a[aria-current="page"] { background: var(--rail-hover); box-shadow: inset 3px 0 0 var(--accent); }
.rail nav a[aria-current="page"] svg { color: var(--accent); }
.rail .count { margin-left: auto; font-size: 12px; color: var(--rail-ink-2); font-variant-numeric: tabular-nums; }
.rail-foot { margin-top: auto; padding: 0 var(--s2); display: grid; gap: var(--s2); font-size: 13px; color: var(--rail-ink-2); }
.rail-foot .who { color: var(--rail-ink); overflow-wrap: anywhere; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line);
  padding-block: var(--s3); padding-left: max(var(--s5), env(safe-area-inset-left, 0px)); padding-right: max(var(--s5), env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.search { flex: 1 1 360px; min-width: 0; position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; stroke: var(--ink-3); fill: none; stroke-width: 2; pointer-events: none; }
.search input { width: 100%; height: 48px; padding: 0 44px 0 46px; border: 1.5px solid var(--line-2); border-radius: var(--r-panel); background: var(--surface-2); font-size: 16px; }
.search input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
.search kbd { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font: 12px var(--f-mono); color: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; }
.search .clear { position: absolute; right: 8px; top: 50%; translate: 0 -50%; border: 0; background: none; color: var(--ink-3); padding: 6px; border-radius: 3px; }
.sync { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--office); flex: none; }
.dot.busy { background: var(--warn); animation: pulse 1s infinite alternate; }
.dot.err { background: var(--danger); }
@keyframes pulse { to { opacity: .35; } }
.role { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-chip); background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.role.admin { background: var(--accent-soft); color: var(--accent); }

.banner { margin: var(--s4) max(var(--s5), env(safe-area-inset-right, 0px)) 0 max(var(--s5), env(safe-area-inset-left, 0px)); padding: var(--s3) var(--s4); border: 1px dashed var(--line-2); border-radius: var(--r-panel);
  background: var(--surface-2); display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; font-size: 14px; }
.banner b { font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-input); overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

.view { padding-block: var(--s5) calc(var(--s7) + 64px); padding-left: max(var(--s5), env(safe-area-inset-left, 0px)); padding-right: max(var(--s5), env(safe-area-inset-right, 0px));
  display: grid; gap: var(--s5); align-content: start; max-width: 1360px; width: 100%; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.head h1 { margin: 0; font: 800 30px/1.05 var(--f-display); font-stretch: 108%; letter-spacing: -0.005em; text-wrap: balance; }
.head p { margin: 4px 0 0; color: var(--ink-2); max-width: 64ch; }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-input); border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 14px; white-space: nowrap; text-decoration: none; color: var(--ink); }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); min-width: 0; }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel > header h2 { margin: 0; font: 700 17px/1.2 var(--f-display); font-stretch: 104%; }
.panel > .body { padding: var(--s4); }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.kpi { padding: var(--s4) var(--s5); display: grid; gap: 2px; align-content: start; text-decoration: none; color: inherit; }
.kpi:hover { border-color: var(--line-2); }
.kpi .label { font-size: 13px; font-weight: 600; color: var(--ink-2); display: flex; align-items: center; gap: var(--s2); }
.kpi .val { font: 800 52px/1 var(--f-display); font-stretch: 90%; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi .sub { font-size: 13px; color: var(--ink-2); }
.swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.sw-truck { background: var(--truck); } .sw-office { background: var(--office); } .sw-warehouse { background: var(--warehouse); } .sw-all { background: var(--ink); }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; font-size: 12px; color: var(--ink-2); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
td { padding: 10px var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--surface-2); }
td.r, th.r { text-align: right; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cat-name { font-weight: 600; }
.stack { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: var(--sunk); min-width: 120px; }
.stack i { display: block; height: 100%; }
.stack .t { background: var(--truck); } .stack .o { background: var(--office); } .stack .w { background: var(--warehouse); }

/* ---------- location pills & asset tags ---------- */
.loc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--r-chip); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; border: 0; }
.loc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.loc.truck { background: var(--truck-soft); color: var(--truck); }
.loc.office { background: var(--office-soft); color: var(--office); }
.loc.warehouse { background: var(--warehouse-soft); color: var(--warehouse); }
.loc.unknown { background: var(--danger-soft); color: var(--danger); }
button.loc, a.loc { cursor: pointer; }
.tag { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--f-mono); letter-spacing: 0.03em; background: var(--tag); border: 1px solid var(--tag-line);
  border-radius: 2px 4px 4px 2px; padding: 5px 9px 5px 18px; position: relative; white-space: nowrap; color: var(--ink); }
.tag::before { content: ""; position: absolute; left: 6px; top: 50%; translate: 0 -50%; width: 6px; height: 6px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--tag-line); }
.tag small { font: inherit; color: var(--ink-3); }
.qty { font: 700 15px/1 var(--f-display); font-stretch: 95%; font-variant-numeric: tabular-nums; }
.unit-plate { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 4px 8px; background: var(--ink); color: var(--surface); border-radius: 3px;
  font: 800 15px/1 var(--f-display); font-stretch: 85%; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.vin { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em; white-space: nowrap; }
.vin b { font-weight: 600; color: var(--truck); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: var(--r-chip); background: var(--sunk); color: var(--ink-2); white-space: nowrap; }
.chip.ok { background: var(--office-soft); color: var(--office); }

/* ---------- dashboard grids ---------- */
.two { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.stock-list { display: grid; }
.stock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s3); align-items: center; padding: 10px var(--s4); border-bottom: 1px solid var(--line); }
.stock-row:last-child { border-bottom: 0; }
.stock-row .n { font: 800 26px/1 var(--f-display); font-stretch: 90%; font-variant-numeric: tabular-nums; text-align: right; min-width: 2ch; }
.issues { display: grid; }
.issue { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--line); font-size: 14px; }
.issue:last-child { border-bottom: 0; }
.sev { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 3px; height: fit-content; text-transform: uppercase; letter-spacing: 0.05em; }
.sev.error { background: var(--danger-soft); color: var(--danger); }
.sev.warn { background: var(--warn-soft); color: var(--warn); }
.sev.info { background: var(--sunk); color: var(--ink-2); }
.empty { padding: var(--s6) var(--s4); text-align: center; color: var(--ink-2); }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }

/* ---------- search results ---------- */
.summary-card { padding: var(--s4) var(--s5); display: grid; gap: var(--s3); }
.summary-card h3 { margin: 0; font: 800 22px/1.1 var(--f-display); font-stretch: 104%; }
.summary-nums { display: flex; gap: var(--s5); flex-wrap: wrap; }
.summary-nums div { display: grid; }
.summary-nums b { font: 800 34px/1 var(--f-display); font-stretch: 90%; font-variant-numeric: tabular-nums; }
.summary-nums span { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.result-items { display: grid; }
.result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); padding: 12px var(--s4); border-bottom: 1px solid var(--line); align-items: center; }
.result:last-child { border-bottom: 0; }
.result .what { display: grid; gap: 4px; min-width: 0; }
.result .line1 { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.result .where { text-align: right; display: grid; gap: 4px; justify-items: end; }
.result .where small { color: var(--ink-2); font-size: 12px; }
mark { background: var(--accent-soft); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---------- truck profile ---------- */
.truck-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s5); padding: var(--s5); align-items: center; }
.big-plate { background: var(--ink); color: var(--surface); border-radius: 4px; padding: var(--s3) var(--s4); display: grid; justify-items: center; min-width: 110px; }
.big-plate small { font: 600 11px/1 var(--f-body); letter-spacing: 0.12em; opacity: .75; }
.big-plate b { font: 800 44px/1 var(--f-display); font-stretch: 80%; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3) var(--s5); min-width: 0; }
.specs dt { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.specs dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.vin-plate { grid-column: 1 / -1; }
.vin-plate .vin { font-size: 17px; }
.vin-legend { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.missing { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-2); }

/* ---------- filters ---------- */
.filters { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.filters input, .filters select, .field input, .field select, .field textarea {
  height: 38px; border: 1px solid var(--line-2); border-radius: var(--r-input); background: var(--surface); padding: 0 10px; min-width: 0; }
.filters input { flex: 1 1 220px; }
.field textarea { height: 72px; padding: 8px 10px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .filters input:focus, .filters select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- dialog ---------- */
dialog { border: 1px solid var(--line-2); border-radius: var(--r-panel); padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); background: var(--surface); color: var(--ink); }
dialog::backdrop { background: rgba(10, 15, 20, .55); }
dialog form { display: grid; max-height: calc(100dvh - 34px); }
.dlg-head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.dlg-head h2 { margin: 0; font: 800 20px/1.1 var(--f-display); font-stretch: 104%; }
.dlg-body { padding: var(--s5); display: grid; gap: var(--s4); overflow-y: auto; }
.dlg-foot { padding: var(--s3) var(--s5); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; background: var(--surface-2); }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; }
.field .hint { font-size: 12px; color: var(--ink-2); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.form-err { background: var(--danger-soft); color: var(--danger); padding: var(--s2) var(--s3); border-radius: var(--r-input); font-size: 14px; }
.picker { display: flex; gap: 6px; flex-wrap: wrap; }
.picker label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: var(--r-input); font-size: 14px; font-weight: 600; cursor: pointer; }
.picker input { position: absolute; opacity: 0; pointer-events: none; }
.picker label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.picker label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

#toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 50; background: var(--ink); color: var(--surface);
  padding: 10px 16px; border-radius: var(--r-panel); font-size: 14px; font-weight: 500; max-width: calc(100vw - 32px); }
#toast.err { background: var(--danger); color: #fff; }
.loading { padding: var(--s7) var(--s4); text-align: center; color: var(--ink-2); }

/* ---------- mobile ---------- */
.tabbar { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .top { padding-left: max(var(--s4), env(safe-area-inset-left, 0px)); padding-right: max(var(--s4), env(safe-area-inset-right, 0px)); }
  .view { padding-left: max(var(--s4), env(safe-area-inset-left, 0px)); padding-right: max(var(--s4), env(safe-area-inset-right, 0px)); }
  .banner { margin-left: max(var(--s4), env(safe-area-inset-left, 0px)); margin-right: max(var(--s4), env(safe-area-inset-right, 0px)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 4px 0; border-radius: 4px; }
  .tabbar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .two { grid-template-columns: minmax(0, 1fr); }
  .truck-hero { grid-template-columns: minmax(0, 1fr); }
  .big-plate { justify-self: start; }
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .kpi { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--s3) var(--s4); }
  .kpi .val { font-size: 38px; grid-row: 1 / span 2; grid-column: 2; }
  .head h1 { font-size: 25px; }
  .search kbd, .sync .txt { display: none; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .result { grid-template-columns: minmax(0, 1fr); }
  .result .where { text-align: left; justify-items: start; }
  th, td { padding-left: var(--s3); padding-right: var(--s3); }
  .hide-sm { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- account (rail foot / mobile) ---------- */
.rail-foot .acct { display: flex; gap: var(--s2); flex-wrap: wrap; }
.rail-foot .acct button { background: transparent; border: 1px solid var(--rail-hover); color: var(--rail-ink); border-radius: var(--r-input); padding: 5px 10px; font-size: 13px; font-weight: 600; }
.rail-foot .acct button:hover { background: var(--rail-hover); }
.acct-btn { display: none; }
@media (max-width: 900px) { .acct-btn { display: inline-flex; } }
.small { font-size: 13px; }
.btn.block { width: 100%; justify-content: center; height: 44px; font-size: 15px; }

/* ---------- users page ---------- */
.status-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.status-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--office); }
.status-dot.off::before { background: var(--ink-3); }
.log-row td { font-size: 13px; }

/* ---------- login ---------- */
.login-page { min-height: 100vh; }
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.login-brand { background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6);
  padding-block: var(--s7); padding-left: max(var(--s7), env(safe-area-inset-left, 0px)); padding-right: var(--s7); }
.login-brand .brand { padding: 0; }
.login-brand .brand b { font-size: 34px; }
.login-brand .brand span { font-size: 15px; }
.login-brand p { margin: 0; color: var(--rail-ink-2); max-width: 34ch; font-size: 15px; }
.login-tags { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.login-tags .tag { background: #23303A; border-color: #3B4A56; color: var(--rail-ink); }
.login-tags .tag::before { background: var(--rail); box-shadow: inset 0 0 0 1px #3B4A56; }
.login-tags .unit-plate { background: var(--rail-ink); color: var(--rail); font-size: 22px; padding: 6px 12px; }
.login-form { display: grid; align-content: center; justify-items: start; padding-block: var(--s7);
  padding-left: max(var(--s7), env(safe-area-inset-left, 0px)); padding-right: max(var(--s7), env(safe-area-inset-right, 0px)); }
.login-form form { width: 100%; max-width: 380px; display: grid; gap: var(--s4); }
.login-form h1 { margin: 0 0 var(--s2); font: 800 32px/1.05 var(--f-display); font-stretch: 108%; }
.login-form .field input { height: 44px; font-size: 16px; }
.login-form p { margin: 0; }
@media (max-width: 760px) {
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login-brand { padding: var(--s5) max(var(--s4), env(safe-area-inset-right, 0px)) var(--s5) max(var(--s4), env(safe-area-inset-left, 0px)); gap: var(--s4); }
  .login-brand p { display: none; }
  .login-form { align-content: start; padding-left: max(var(--s4), env(safe-area-inset-left, 0px)); padding-right: max(var(--s4), env(safe-area-inset-right, 0px)); padding-block: var(--s6); }
}