/* ODP Command Center — the ondemandprime.com look (owner ruling 2026-10-13):
   near-black ground, charcoal surfaces, warm off-white type, ODP orange #FF5500
   only where attention is needed, Archivo + IBM Plex Mono, 3 px corners.
   Dark by default (24-hour operations screen); a Light theme (theme.js) swaps colors only. */
:root{
  color-scheme:dark;
  --bg-0:#0C0F15; --bg-1:#161B25; --bg-2:#1C2230; --bg-3:#242B3A;
  --line:#2C2E32; --line-strong:#3A3D44;
  --text-1:#EFEBE2; --text-2:#B9B5AC; --text-3:#7E7A72;
  --orange:#FF5500; --orange-soft:rgba(255,85,0,.14);
  --ok:#34C77B; --ok-soft:rgba(52,199,123,.14);
  --neutral:#5B9CF6; --neutral-soft:rgba(91,156,246,.14);
  --danger:#F2555A; --danger-soft:rgba(242,85,90,.14);
  /* Accent palette for bold figures (owner ruling 2026-10-14): orange is for "act now" only. */
  --gold:#E9B949;   --gold-soft:rgba(233,185,73,.14);    /* money, claims */
  --teal:#3FC9C1;   --teal-soft:rgba(63,201,193,.14);    /* completed, settled */
  --violet:#A78BFA; --violet-soft:rgba(167,139,250,.14); /* configuration, lanes, identifiers */
  --sky:#7CC4FF;                                         /* times, schedule */
  --btn-line:#676767; --row-hover:rgba(20,45,78,.45); --rule:rgba(31,59,95,.55);
  --font:"Archivo",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:3px;
  --gap:12px;          /* the one gap between tiles, cards and panels */
  --tile-pad:14px 16px; /* the one padding inside a tile */
}
/* Light: the website's white and warm off-white with navy ink. Accents are deeper shades of
   the same hues so every one reads at 4.5:1 or better on white (orange stays "act now"). */
:root[data-theme="light"]{
  color-scheme:light;
  --bg-0:#F3F1EC; --bg-1:#FFFFFF; --bg-2:#EEEBE4; --bg-3:#E4E0D7;
  --line:#DDD8CE; --line-strong:#C6C0B4;
  --text-1:#141A26; --text-2:#454A55; --text-3:#6A6E77;
  --orange:#C2410C; --orange-soft:rgba(194,65,12,.10);
  --ok:#16794A; --ok-soft:rgba(22,121,74,.10);
  --neutral:#1D5FD1; --neutral-soft:rgba(29,95,209,.10);
  --danger:#C0262D; --danger-soft:rgba(192,38,45,.10);
  --gold:#8A5A00; --gold-soft:rgba(138,90,0,.10);
  --teal:#0B6E69; --teal-soft:rgba(11,110,105,.10);
  --violet:#6340CC; --violet-soft:rgba(99,64,204,.10);
  --sky:#1A64A8;
  --btn-line:#B9B2A5; --row-hover:rgba(29,95,209,.07); --rule:var(--line);
}
:root[data-theme="light"] .panel,:root[data-theme="light"] .kpi,:root[data-theme="light"] .day{box-shadow:0 1px 2px rgba(20,26,38,.06)}
/* Light only (owner ruling 2026-10-19): headers inside boxes bold and full-strength ink. */
:root[data-theme="light"] .label{color:var(--text-1);font-weight:800}
:root[data-theme="light"] .hero .h,:root[data-theme="light"] .hero .h b{font-weight:800}
:root[data-theme="light"] .facts span:nth-child(odd){color:var(--text-1);font-weight:700}
:root[data-theme="light"] .week-title{font-weight:800}
:root[data-theme="light"] .up .l{font-weight:700}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg-0);color:var(--text-1);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{padding:0 16px 24px;overflow-x:hidden}
main{max-width:1600px;margin:0 auto;display:flex;flex-direction:column;gap:var(--gap);padding-top:var(--gap)}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-3)} .small{font-size:11px}
.label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);font-weight:700}
.ok-text{color:var(--ok)} .attention-text{color:var(--orange)} .stale-text{color:var(--gold)} .danger-text{color:var(--danger);font-size:12px;min-height:1em}
.brand{display:flex;align-items:center;gap:10px}
/* Header: logo and wordmark balanced like a standard app header (owner feedback 2026-10-22).
   The logo image carries empty space around the mark, so the image box is larger than the text;
   the visible mark and the 24px wordmark capitals end up about the same height. All vertically centered. */
.mark{width:40px;height:40px;display:block;object-fit:contain}
.brand-t{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .brand-t b{color:var(--orange)}
.brand-t:has(.brand-word){display:flex;align-items:center;gap:12px;letter-spacing:0}
.brand-word{font-size:24px;font-weight:800;letter-spacing:.03em;line-height:1;white-space:nowrap}
.brand-page{display:flex;align-items:center;height:22px;padding-left:12px;border-left:1px solid var(--line-strong);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--text-2);white-space:nowrap}
@media (max-width:700px){.mark{width:32px;height:32px}.brand-word{font-size:19px}.brand-page{display:none}}
.top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.clock{font-size:13px;color:var(--text-2)} .clock b{color:var(--text-1)}
.sys{display:flex;flex-wrap:wrap;gap:6px 20px;margin-left:auto}
/* Header (owner feedback 2026-10-22): one clean top row, logo + tabs on the left, clock and the
   signed-in person with Dark / Sign out on the right. Where there are several system statuses
   (Command Center) they get their own full-width strip underneath, spread evenly; a single status
   (Fleet Map) sits in the top row next to the person. Narrow screens fall back to wrapping. */
.top{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;column-gap:24px;row-gap:10px}
.top > .brand{grid-column:1;grid-row:1} .top > .tabs{grid-column:2;grid-row:1}
.top > .clock{grid-column:4;grid-row:1;white-space:nowrap}
.top > .sys{grid-column:4;grid-row:1;margin-left:0;justify-content:flex-end}
.top > .who{grid-column:5;grid-row:1;justify-self:end}
.sys.sys-strip{margin-left:0;justify-content:space-between;padding:8px 14px;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r)}
/* The top row stays pinned while the page scrolls (owner ruling 2026-10-22). Its background is
   painted edge to edge; a soft shadow appears once content passes underneath. Not pinned on phones. */
.top{position:sticky;top:0;z-index:60;background:var(--bg-0);padding-top:10px;margin-top:-10px;box-shadow:0 0 0 100vmax var(--bg-0);clip-path:inset(0 -100vmax -16px);transition:box-shadow .15s}
.top.stuck{box-shadow:0 0 0 100vmax var(--bg-0),0 8px 12px -10px rgba(0,0,0,.45)}
@media (max-width:700px){.top{position:static;margin-top:0;padding-top:0;box-shadow:none;clip-path:none}}
.top > .tabs{flex-wrap:nowrap}
@media (max-width:1460px){.top{display:flex;flex-wrap:wrap}.top > .who{margin-left:auto;order:2}.top > .sys{order:3}.sys.sys-strip{gap:6px 20px}}
.sys .s{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-2);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.tabs{display:flex;gap:2px;padding:3px;border:1px solid var(--line-strong);border-radius:calc(var(--r) + 2px);background:var(--bg-1)}
.tabs a{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--r);font:700 11px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.tabs a:hover{color:var(--text-1);background:var(--bg-2)} .tabs a.on{background:var(--bg-3);color:var(--text-1)}
.who{display:flex;align-items:center;gap:8px;font-size:12px} .who .chip.role{cursor:pointer;background:var(--violet-soft);color:var(--violet);border:1px solid transparent} .who .chip.role:hover{border-color:var(--violet)} .who .chip.role.dispatcher{background:var(--neutral-soft);color:var(--neutral)} .who .chip.role.viewer{background:var(--bg-2);color:var(--text-3)}
.btn{height:26px;padding:0 10px;border-radius:var(--r);border:1px solid var(--btn-line);background:transparent;color:var(--text-1);font:600 11px var(--font);letter-spacing:.04em;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center}
.btn:hover{background:var(--bg-2);color:var(--text-1)}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#FFFFFF}
.btn.lg{height:34px;padding:0 14px;font-size:12px}
.chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.chip.attention{background:var(--orange-soft);color:var(--orange)} .chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.neutral{background:var(--neutral-soft);color:var(--neutral)} .chip.danger{background:var(--danger-soft);color:var(--danger)}
.chip.muted{background:var(--bg-2);color:var(--text-3)}
.weekbar{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap}
.week-title{font-size:14px;font-weight:600}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--gap);flex:1;min-width:320px}
.day{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;cursor:pointer;min-width:0}
.day.on{border-color:var(--sky)} .day.on .label{color:var(--sky)}
.day .d{font-size:13px;font-weight:600} .day .n{font-size:10px;color:var(--text-3)}
.dayinput{height:30px;background:var(--bg-1);border:1px solid var(--line-strong);border-radius:var(--r);color:var(--text-1);padding:0 8px;font:12px var(--mono)}
/* KPI tiles: strict equal columns (8 wide, 4 medium, 2 narrow), one gap, one padding, one
   height. The label block is fixed to two lines and the value block to two lines, so every
   number sits on the same baseline across the row whether or not a tile has sub-text. */
.kpis{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--gap)}
.kpi{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);padding:var(--tile-pad);min-width:0;display:grid;grid-template-rows:24px 1fr;row-gap:10px}
.kpi .label{height:24px;line-height:12px;overflow:hidden;overflow-wrap:anywhere}
.kpi .v{display:grid;grid-template-rows:28px 14px;align-content:end;font-size:24px;font-weight:700;line-height:28px;letter-spacing:-.01em;margin:0}
.kpi .sub{font-size:11px;font-weight:600;line-height:14px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
.kpi.attn{border-color:rgba(255,85,0,.45)} .kpi.danger{border-color:rgba(242,85,90,.45)} .kpi.gold{border-color:rgba(233,185,73,.45)}
.hero-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.hero-title{font-size:22px;font-weight:700;letter-spacing:-.01em}
/* Exception cards: strict equal columns (3 wide, 2 medium, 1 narrow) and equal heights.
   Inside, fixed rows: header / time / lane (2 lines reserved) / who / why / buttons at the
   bottom, so cards line up with each other whatever their text length. */
.heroes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--gap)}
.hero{background:var(--bg-1);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:var(--r);padding:var(--tile-pad);display:grid;grid-template-rows:16px 28px minmax(18px,auto) 16px 1fr 34px;row-gap:6px;min-width:0}
.hero .h{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .hero .h b{color:var(--orange);font-weight:700;overflow:hidden;text-overflow:ellipsis} .hero .h .mono{text-transform:none;letter-spacing:0;color:var(--violet)}
.hero .big{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--text-1);line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hero .big i{font-style:normal;color:var(--sky)}
.hero .lane{font-size:13px;font-weight:600;line-height:18px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero .sub{font-size:11px;line-height:16px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .why{font-size:11px;line-height:16px;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero .acts{display:flex;gap:8px;align-self:end}
.hero.calm{border-left-color:var(--ok);grid-template-rows:16px 28px 1fr} .hero.calm .big{color:var(--ok)} .hero.calm .h b{color:var(--ok)}
.hero.gold{border-left-color:var(--gold)} .hero.gold .h b{color:var(--gold)} .hero.danger{border-left-color:var(--danger)} .hero.danger .h b{color:var(--danger)}
.panel{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-width:0}
.panel-h{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-2);border-bottom:1px solid var(--line-strong);border-radius:var(--r) var(--r) 0 0;min-height:42px;flex-wrap:wrap}
.panel-t{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-1)} .panel-s{font-size:11px;font-weight:500;color:var(--text-2)}
.p{padding:14px} .p-tight{padding:6px 14px}
.grid-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--gap);align-items:stretch}
/* Runway and Timeline sit side by side, landscape, equal height; each scrolls inside past 460px.
   Revenue Recovery (owner) gets its own full-width row below: figures + claim table on the
   left, drafts + Remittances on the right, so nothing stretches to fill a tall neighbour. */
.grid-bot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--gap);align-items:stretch}
.grid-bot .panel{max-height:460px} .scrollbody{overflow:auto;flex:1 1 auto;min-height:0}
#recovery-panel .rec{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
#recovery-panel .rec-main,#recovery-panel .rec-side{min-width:0;display:flex;flex-direction:column;gap:8px}
#recovery-panel .claims-wrap{max-height:420px;overflow:auto}
.rail{display:flex;flex-direction:column;gap:12px;min-width:0}
/* The board is exactly as tall as the rail beside it: contain:size keeps its 39 rows from
   setting the row height, stretch gives it the rail's height, and the table scrolls inside.
   No empty band under the board, no page-height blow-up. Single-column screens cap it instead. */
#board-panel{contain:size;min-height:0}
#board-panel .tablewrap{flex:1 1 auto;min-height:0}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{height:26px;padding:0 10px;border-radius:var(--r);font:600 11px var(--font);color:var(--text-3);background:transparent;border:1px solid transparent;cursor:pointer}
.tab.on{background:var(--bg-2);color:var(--text-1);border-color:var(--line-strong)}
.search{margin-left:auto;height:26px;padding:0 8px;border-radius:var(--r);background:var(--bg-0);border:1px solid var(--line-strong);color:var(--text-1);font:11px var(--font);width:200px}
.tablewrap{overflow:auto;flex:1;min-height:0} .tablewrap.short{max-height:300px}
table{border-collapse:collapse;width:100%;font-size:12px}
thead th{position:sticky;top:0;background:var(--bg-1);z-index:1;text-align:left;padding:8px 10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);font-weight:700;border-bottom:1px solid var(--line-strong);white-space:nowrap}
tbody td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--text-2);vertical-align:middle}
tbody td.w{white-space:normal;overflow-wrap:anywhere;min-width:180px}   /* lane names wrap instead of forcing a sideways scroll */
tbody tr{cursor:pointer} tbody tr:hover td{background:var(--row-hover)} tbody tr.sel td{background:var(--bg-2)}
tbody tr.attn td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
td.w{color:var(--text-1);font-weight:500} .pos{color:var(--ok)}
.empty{padding:24px;text-align:center;color:var(--text-3);font-size:12px}
.donutrow{display:flex;align-items:center;gap:16px}
.donut{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;flex:none}
.donut>div{width:66px;height:66px;border-radius:50%;background:var(--bg-1);display:grid;place-items:center;text-align:center}
.donut .n{font-family:var(--mono);font-size:16px;font-weight:700;line-height:1}
.stats{flex:1;display:grid;grid-template-columns:1fr auto;gap:6px 16px;font-size:12px;color:var(--text-2)} .stats .mono{text-align:right}
.up{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:12px} .up:last-child{border-bottom:0}
.up .t{width:44px;color:var(--text-3)} .up .l{color:var(--text-1);font-weight:500} .up .s{font-size:11px;color:var(--text-3)}
.brief{font-size:12px;line-height:1.5;color:var(--text-2)} .brief ul{margin:6px 0 0;padding-left:18px} .brief .lead{color:var(--text-1);font-weight:600}
.runway{padding:8px 12px 10px}
.rw-axis{display:grid;grid-template-columns:minmax(180px,.9fr) 2fr 100px;gap:12px;font-size:10px;color:var(--text-3);margin-bottom:4px}
.rw-axis .ax{display:flex;justify-content:space-between}
.rw-row{display:grid;grid-template-columns:minmax(180px,.9fr) 2fr 100px;gap:12px;align-items:center;height:32px;font-size:11px;cursor:pointer}
.rw-row .l{color:var(--text-1);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rw-row .d{font-size:10px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-track{position:relative;height:10px}
.rw-bar{position:absolute;top:0;height:10px;border-radius:999px;background:var(--neutral);opacity:.9}
.rw-bar.ok{background:transparent;border:1px solid var(--text-3)} .rw-bar.attn{background:transparent;border:1px dashed var(--orange)}
.rw-bar.danger{background:var(--danger-soft);border:1px solid var(--danger)} .rw-bar.done{background:var(--bg-3)}
.rw-now{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--orange)}
.rw-st{font-family:var(--mono);font-size:10px;text-align:right;color:var(--text-3)} .rw-st.attn{color:var(--orange)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:11px;color:var(--text-2);margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)} .facts span:nth-child(odd){color:var(--text-3)}
.tl{position:relative;padding-left:18px} .tl:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line-strong)}
.ev{position:relative;display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:baseline;padding:5px 0;font-size:12px}
.ev:before{content:"";position:absolute;left:-16px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line-strong)}
.ev.done:before{background:var(--ok);border-color:var(--ok)} .ev.attn:before{background:var(--orange);border-color:var(--orange)}
.ev .t{font-family:var(--mono);color:var(--text-3)} .ev .w{color:var(--text-1)} .ev .w i{color:var(--text-3);font-style:normal}
.rec .big{font-family:var(--mono);font-size:22px;font-weight:600} .rec .row{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-2);margin-top:8px}
.rec .row>div{min-width:120px} .rec .small{margin-top:6px}
.claims{width:100%;border-collapse:collapse;margin-top:10px;font-size:11px} .claims th{text-align:left;font-weight:600;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase;font-size:10px;padding:4px 6px;border-bottom:1px solid var(--line-strong)} .claims td{padding:4px 6px;border-bottom:1px solid var(--line);color:var(--text-2)} .claims td.mono{font-family:var(--mono)}
.log{display:flex;align-items:center;gap:16px;padding:8px 12px;border-radius:var(--r);background:var(--bg-1);border:1px solid var(--line)}
.ticker{display:flex;gap:28px;overflow:hidden;white-space:nowrap;font-size:11px;color:var(--text-3);flex:1}
#toast{position:fixed;left:16px;bottom:16px;max-width:420px;padding:10px 14px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line-strong);font-size:12px;color:var(--text-2);display:none;z-index:9}
#toast.show{display:block} #toast.attention{border-color:var(--orange);color:var(--text-1)}
.signin{min-height:100vh;display:grid;place-items:center;align-content:center;gap:16px} .signin[hidden],#set-password[hidden],#sign-in-form[hidden]{display:none}
.signin-card{width:min(380px,100%);background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px}
.signin-card label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-2)}
.signin-card input{height:34px;background:var(--bg-0);border:1px solid var(--line-strong);border-radius:var(--r);color:var(--text-1);padding:0 10px;font:13px var(--font)}
.owner-only[hidden]{display:none}
@media (max-width:1280px){#recovery-panel .rec{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.heroes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.grid-top,.grid-bot{grid-template-columns:1fr}#board-panel{contain:none;max-height:640px}.week{grid-template-columns:repeat(4,minmax(0,1fr))}.heroes{grid-template-columns:1fr}.search{width:100%;margin-left:0}}
@media (max-width:600px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi .v{font-size:20px}.hero .big{font-size:19px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.signin-links{display:flex;gap:16px;justify-content:space-between} .linkish{background:none;border:0;padding:0;color:var(--text-3);font:12px var(--font);cursor:pointer;text-decoration:underline} .linkish:hover{color:var(--text-1)}
#access-panel{margin-top:12px} .access .invite{display:grid;grid-template-columns:1fr 1.4fr 1.6fr auto;gap:10px;align-items:end;margin-bottom:12px}
.access .invite label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-3)} .access .invite input,.access .invite select{height:30px;background:var(--bg-0);border:1px solid var(--line-strong);border-radius:var(--r);color:var(--text-1);padding:0 8px;font:12px var(--font)}
.access .invite #invite-msg{grid-column:1/-1;color:var(--text-2)}
.access .tbl{width:100%;border-collapse:collapse;font-size:12px} .access .tbl th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:4px 6px;border-bottom:1px solid var(--line-strong)} .access .tbl td{padding:6px;border-bottom:1px solid var(--line);color:var(--text-2)}
@media (max-width:900px){.access .invite{grid-template-columns:1fr 1fr}}

[hidden]{display:none !important}
.rec .drafts{margin-top:12px;display:flex;flex-direction:column;gap:8px} .rec .draft{background:var(--bg-0);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px} .rec .draft .row{margin-top:6px;align-items:center}

/* Timeline: the selected route leads, the next starts follow as compact blocks. */
.tl-block{padding:4px 0 10px} .tl-block+.tl-block{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;cursor:pointer} .tl-block+.tl-block:hover{background:var(--bg-2)}
.tl-block:not(.lead) .facts{display:none} .tl-head{display:flex;gap:10px;align-items:baseline;font-size:12px;margin-bottom:4px;flex-wrap:wrap} .tl-head b{color:var(--text-1)} .tl-head .mono{color:var(--violet);font-size:11px}
/* Fleet: a single status line until vehicles are loaded and Motive is connected. */
.anoms{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)} .anom-list{margin:6px 0 0;padding-left:18px;max-height:180px;overflow:auto} .anom-list li{margin:2px 0} .anom-list b{color:var(--orange);font-weight:700}