/* GENERATED from vera/display/index.html @ e37def63 by tools/extract-vera-kit.mjs - do not hand-edit */

/* VERA Phase 1d — Real-Estate Redesign (v1.4.8)
   3-zone layout: header strip / cycling main zone / right radar column
   All sizes in viewport units so it flexes to any TV */
:root{
  --bg:#0a0c10;
  --bg-deep:#070910;
  --panel:#141923;
  --panel-2:#1a2030;
  --panel-3:#222a3d;
  --line:rgba(95,179,255,0.16);
  --line-truth:rgba(95,179,255,0.45);
  --line-dim:rgba(255,255,255,0.06);
  --text:#eaf0f8;
  --text-bright:#ffffff;
  --dim:#7a8294;
  --dim-2:#5a6276;
  --truth:#5fb3ff;
  --truth-bright:#8fc8ff;
  --truth-glow:rgba(95,179,255,0.4);
  --good:#3fcf8e;
  --warn:#f0a045;
  --bad:#f25555;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:
    radial-gradient(ellipse 1800px 900px at 50% -20%, rgba(95,179,255,0.06), transparent 60%),
    radial-gradient(ellipse 1000px 500px at 90% 100%, rgba(95,179,255,0.04), transparent 70%),
    linear-gradient(180deg,var(--bg-deep),var(--bg) 30%);
  color:var(--text);
  font-family:-apple-system,Segoe UI,system-ui,sans-serif;
  font-feature-settings:"tnum";
  height:100vh;
  height:100dvh;
  width:100vw;
  font-size:15px;
  overflow:hidden;
  /* letterbox container: center the fixed 1920x1080 canvas on any panel */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ============================================================
   TOP LEVEL LAYOUT — 3 zones
   header-strip: 9vh tall, full width, never cycles
   main-grid:    89vh tall, left 75% cycling + right 25% radar
   footer-tag:   2vh tall
   ============================================================ */
.app{
  display:grid;
  /* FIXED 1920x1080 design canvas (rows = old 12vh/86vh/2vh of 1080).
     Scaled uniformly to fit any panel via --fit (set in JS). This makes the
     board immune to kiosk browser-zoom and OS display-scaling: it always fits
     exactly, never clips. Replaces the vh-responsive model that clipped the
     bottom load-card row whenever the effective viewport was shorter than 1080. */
  /* Middle band sized to hold the natural content of the locked main-ops view
     (~1280px of stacked sections). The whole canvas then scales to fit the panel
     via --fit, so nothing clips. fitApp() reads offsetHeight, so this can change
     without touching JS. */
  grid-template-rows: 130px 1380px 22px;
  width:1920px;
  height:auto;
  min-height:1080px;   /* never scale UP past the design size on tall screens */
  gap:0;
  flex:0 0 auto;
  transform-origin:center center;
  transform:scale(var(--fit,1));
}

/* ============================================================
   HEADER STRIP
   ============================================================ */
.header-strip{
  display:grid;
  grid-template-columns: minmax(520px,auto) 1fr minmax(420px,auto);
  align-items:center;
  gap:18px;
  padding:10px 20px;
  background:linear-gradient(180deg,rgba(20,25,35,0.92),rgba(20,25,35,0.72));
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.header-left{display:flex;gap:14px;align-items:center;flex-wrap:nowrap;min-width:0}
.brand{font-size:44px;font-weight:800;letter-spacing:0.08em;color:var(--truth-bright)}
.brand small{font-size:18px;color:var(--dim);font-weight:500;margin-left:8px;letter-spacing:0.04em}
.clock{font-size:64px;font-weight:700;color:var(--text-bright);font-variant-numeric:tabular-nums;line-height:1}
.clock small{font-size:20px;opacity:.6;margin-left:6px}
.pill{
  padding:5px 12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  font-size:13px;
  white-space:nowrap;
}
.pill strong{color:var(--text-bright);margin-left:4px}
.save-nag{padding:5px 12px;background:var(--panel);border:1px solid var(--line);border-radius:6px;font-size:13px;white-space:nowrap;color:var(--good)}
.save-nag.warn{color:var(--warn);border-color:rgba(240,160,69,0.5)}
.save-nag.bad{color:var(--bad);border-color:rgba(242,85,85,0.5);animation:nag-pulse 1.6s ease-in-out infinite}
@keyframes nag-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.header-center{
  text-align:center;
  font-size:15px;
  color:var(--truth-bright);
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  padding:0 12px;
}
.header-center .safety-label{opacity:.55;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;margin-right:8px}
.header-right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  overflow:hidden;
  font-size:13px;
  color:var(--dim);
}
.ticker-strip{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  color:var(--text);
  text-overflow:ellipsis;
  border-left:1px solid var(--line-dim);
  padding-left:12px;
}
.ticker-strip.on{color:var(--truth-bright)}
.ticker-meta{font-size:10px;opacity:.45;margin-left:8px}
.live-pill{
  display:inline-block;
  padding:3px 10px;
  background:rgba(63,207,142,0.12);
  border:1px solid rgba(63,207,142,0.4);
  border-radius:10px;
  color:var(--good);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
}
.live-pill.stale{color:var(--warn);background:rgba(240,160,69,0.12);border-color:rgba(240,160,69,0.4)}
.live-pill.error{color:var(--bad);background:rgba(242,85,85,0.12);border-color:rgba(242,85,85,0.4)}

/* ============================================================
   MAIN GRID — cycling zone + radar column
   ============================================================ */
.main-grid{
  display:grid;
  /* v2.0 (2026-06-11, Tyler "shrink + keep radar, all views"):
     3 columns -> [left cam rail | center board+radar | right cam rail].
     The radar/map/weather move into a SLIM strip at the bottom of the
     center column (center-col) so they persist across ALL THREE cycling
     views (main-ops, rail-yard, rail-pipeline), not just main-ops. */
  grid-template-columns: 300px 1fr 300px;
  gap:12px;
  padding:12px 14px;
  min-height:0;
}
/* VIEW MODES (2026-08-20, VERA-CADIZ-OPS ops-office wall) — URL-gated so the
   base page (Pi TV) is unchanged. ?view=pumps: cam rails + radar strip hidden,
   board pinned on MAIN OPS (pump data only). ?view=cams: center column hidden,
   the two cam rails become a full-width 2-column cam wall. */
body.mode-pumps .cam-rail{display:none;}
body.mode-pumps .radar-strip{display:none;}
body.mode-pumps .main-grid{grid-template-columns:1fr;}
/* Railcar illustration always on the wall: idle tiles carry an empty-car
   outline (hidden everywhere else so the Pi TV is unchanged), and both idle +
   active cars render larger in pumps mode. */
.ll-link-on{color:#3fcf8e;border-color:rgba(63,207,142,0.4);background:rgba(63,207,142,0.1);}
.ll-link-off{color:var(--bad);border-color:rgba(242,85,85,0.4);background:rgba(242,85,85,0.12);}
/* Wall type floor (Tyler 8/20: "make the small font bigger" — NOT a zoom).
   Small labels/detail text raised for across-the-room reading; hero numbers
   and layout untouched. Applies only to the ops-office wall modes. */
body.mode-pumps .slot h4{font-size:20px;}
body.mode-pumps .ll-kpi-v{font-size:24px;}
body.mode-pumps .ll-kpi-l{font-size:13px;}
body.mode-pumps .ll-kpis--sec .ll-kpi-v,body.mode-pumps .ll-sec .ll-kpi-v{font-size:19px;}
body.mode-pumps .ll-sec .ll-kpi-l{font-size:13px;}
body.mode-pumps .ll-totals .ll-kpi-v{font-size:26px;}
body.mode-pumps .ll-totals .ll-kpi-l{font-size:13px;}
body.mode-pumps .ll-batch{font-size:14px;}
body.mode-pumps .ll-batch .k{font-size:12px;}
body.mode-pumps .ll-plain{font-size:15px;}
body.mode-pumps .ll-sub,body.mode-pumps .ll-bol,body.mode-pumps .ll-idle-hdr,body.mode-pumps .ll-status{font-size:14px;}
body.mode-pumps .ll-idle-hdr b{font-size:16px;}
body.mode-pumps .ll-age{font-size:12px;}
body.mode-pumps .ll-lastload-hdr{font-size:13px;}
body.mode-pumps .ll-active-car-cap{font-size:19px;}
body.mode-pumps .ll-pill{font-size:12px;}
/* Railcar capacity STANDS OUT on the wall (Tyler 8/20): car ID + fill % are
   the hero elements, color-shifted as the car approaches its safe cap. */
body.mode-pumps .ll-hero-car-id{font-size:36px;}
body.mode-pumps .ll-hero-fill .v{font-size:40px;font-weight:800;}
body.mode-pumps .ll-hero-fill .l{font-size:13px;}
.ll-fill--warn{color:var(--warn) !important;}
.ll-fill--danger{color:var(--bad) !important;}
body.mode-aux .slot h4{font-size:20px;}
body.mode-aux .dwell-sub{font-size:14px;}
body.mode-aux .dwell-row{font-size:15px;}
body.mode-aux .dwell-row .tag{font-size:12px;}
body.mode-aux .dwell-stat .lbl{font-size:13px;}
body.mode-aux .carriers-table{font-size:16px;}
body.mode-aux .safety-reminders{font-size:15px;}
body.mode-aux .yday-kpis .ll-kpi-l{font-size:14px;}
.ll-idle-car{display:none;}
body.mode-pumps .ll-idle-car{display:flex;}
body.mode-pumps .ll-card--active .ll-active-car .ll-car-svg,
body.mode-pumps .ll-idle-car .ll-car-svg{max-width:420px;height:150px;}
/* mode-pumps board = pump + railcar ONLY: today hero + live pump tiles.
   Safety/carriers/dwell move to the aux screen. */
body.mode-pumps .slot--safety,
body.mode-pumps .slot--carriers,
body.mode-pumps .slot--dwell{display:none;}
body.mode-pumps .main-ops-grid{grid-template-rows:minmax(0,auto) 1fr;}
body.mode-pumps .slot--hero{grid-row:1;}
body.mode-pumps .slot--p103live{grid-row:2;}
/* ?view=aux v3 (Tyler 8/20 PM): TOP screen = daily briefing + today/yesterday/
   MTD totals + who's working today & tomorrow + weather radar strip. Cams,
   carriers, dwell dropped from this screen (one config swap to bring back). */
body.mode-aux .slot--p103live,
body.mode-aux .slot--carriers,
body.mode-aux .slot--dwell{display:none;}
/* aux v3.1 (Tyler 8/20: "didn't mean to take away cams"): cam rails STAY —
   6 pump cams + CORNERCAM + BACK HILL flank the data (ENTRANCE swapped out 8/25). */
body.mode-aux .main-ops-grid{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,auto) minmax(0,0.58fr) minmax(0,1.82fr);}
.ll-lastdone{font-size:14px;color:var(--dim);text-align:center;padding:2px 0;}
.ll-lastdone b{color:var(--text-bright);}
body.mode-aux .slot--hero,body.mode-aux .slot--yday{display:none;} /* replaced by uniform totals3 cards */
body.mode-aux .slot--totals3{display:block;grid-row:2;grid-column:1/-1;}
/* Rail strip rides the DEAD roster feed (P1 lead 8/20) — off the pumps wall until fixed. */
body.mode-pumps #ll-rail-strip{display:none;}
body.mode-aux .slot--safety{grid-row:1;grid-column:1/-1;}
body.mode-aux .slot--hero{grid-row:2;grid-column:1;}
body.mode-aux .slot--yday{display:block;grid-row:2;grid-column:2;}
body.mode-aux .slot--crew2{display:block;grid-row:3;grid-column:1/-1;}
.slot--yday,.slot--crew2{display:none;}
.crew2-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;height:100%;min-height:0;}
.crew2-col{border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:var(--panel-3);min-height:0;overflow:hidden;}
.crew2-col h5{font-size:17px;color:var(--text-bright);letter-spacing:0.04em;margin-bottom:6px;}
.crew2-col h5 .meta{color:var(--dim);font-weight:400;font-size:13px;}
.crew2-shifts{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start;}
.crew2-shift .lbl{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;margin-bottom:6px;}
.crew2-shift--day .lbl{color:#ffd23f;}
.crew2-shift--night .lbl{color:#5fb3ff;}
.crew2-shift--mid .lbl{color:#b18aff;margin-top:10px;}
.crew2-chip{display:flex;justify-content:space-between;align-items:baseline;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:5px;padding:2px 8px;font-size:15px;font-weight:600;color:var(--text-bright);margin-bottom:3px;white-space:nowrap;overflow:hidden;}
/* Chip border/tint = crew STATUS (Tyler 8/20 key): green=clocked in,
   red=scheduled not clocked in, yellow=scheduled (future), blue=training. */
.crew2-chip--in{border-left-color:#3fcf8e;background:rgba(63,207,142,0.10);}
.crew2-chip--out{border-left-color:#f25555;background:rgba(242,85,85,0.10);}
.crew2-chip--sched{border-left-color:#ffd23f;}
.crew2-chip--train{border-left-color:#5fb3ff;background:rgba(95,179,255,0.10);}
.crew2-chip .rl{color:var(--dim);font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:0.4px;}
.crew2-key{float:right;font-size:12px;color:var(--dim);font-weight:400;text-transform:none;letter-spacing:0;display:inline-flex;gap:12px;align-items:center;}
.crew2-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle;}
.crew2-key .k-in{background:#3fcf8e;}
.crew2-key .k-out{background:#f25555;}
.crew2-key .k-sched{background:#ffd23f;}
.crew2-key .k-train{background:#5fb3ff;}
/* Uniform totals cards (Today / Yesterday / MTD — same size, same font) */
.slot--totals3{display:none;}
.t3-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;height:100%;}
.t3-card{background:var(--panel-3);border:1px solid var(--line);border-radius:8px;padding:10px 16px;display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden;}
.t3-title{font-size:15px;color:var(--truth);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;}
.t3-big{font-size:44px;font-weight:800;color:var(--text-bright);font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace;line-height:1;}
.t3-big small{font-size:16px;color:var(--dim);font-weight:600;margin-left:6px;}
.t3-sub{font-size:15px;color:var(--dim);margin-top:6px;}
/* aux weather strip: pad map dropped, radar crop-zoomed toward Cadiz, hourly forecast */
body.mode-aux .radar-strip .pad-map-host{display:none;}
body.mode-aux .radar-strip .radar-noaa-host{overflow:hidden;}
body.mode-aux .radar-strip .radar-noaa-host img{transform:scale(2.1) translate(13%,-3%);}
.wx-hourly{display:none;}
body.mode-aux .wx-hourly{display:flex;flex:1 1 auto;gap:8px;align-items:stretch;min-width:0;overflow:hidden;}
.wxh{flex:1 1 0;background:var(--panel-3);border:1px solid var(--line);border-radius:6px;padding:6px 4px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;}
.wxh .h{font-size:13px;color:var(--dim);text-transform:lowercase;}
.wxh .i{font-size:22px;line-height:1.1;}
.wxh .t{font-size:19px;font-weight:700;color:var(--text-bright);font-variant-numeric:tabular-nums;}
.wxh .p{font-size:12px;color:#5fb3ff;min-height:14px;}
/* Wall modes are FULL-BLEED: the fixed 1920x1532 design canvas letterboxes
   ~30% on a real 1080p monitor (fitApp uniform-scales it down). On the
   ops-office wall the app instead fills the true viewport; fitApp skips
   scaling in these modes. Base page (Pi TV/browsers) keeps the scaled canvas. */
body.mode-pumps .app,
body.mode-aux .app,
body.mode-cams .app{
  width:100vw;height:100vh;min-height:0;
  transform:none;
  grid-template-rows:110px 1fr 0px;
}
body.mode-pumps .footer-tag,
body.mode-aux .footer-tag,
body.mode-cams .footer-tag{display:none;}
body.mode-cams .center-col{display:none;}
body.mode-cams .main-grid{grid-template-columns:1fr 1fr;}

/* Center column: cycling board (stretches) + slim radar strip (fixed). */
.center-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
  min-width:0;
}
.center-col .cycling-zone{flex:1 1 auto;min-height:0;}

/* Cycling zone (left ~75%) */
.cycling-zone{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  min-height:0;
}
.stale-banner{
  position:absolute;top:0;left:0;right:0;z-index:10;
  background:var(--warn);color:#1a1b26;
  padding:8px 16px;font-weight:600;text-align:center;font-size:14px;
  letter-spacing:0.04em;
}
.view{
  position:absolute;
  inset:0;
  padding:16px 18px;
  opacity:0;
  pointer-events:none;
  transition:opacity 350ms ease-in-out;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
}
.view.is-active{opacity:1;pointer-events:auto}

/* ============================================================
   VIEW 1 — MAIN OPS
   Grid: today hero full width / yesterday+carriers / pumps+crew
   ============================================================ */
.main-ops-grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  /* row 1 safety (compact) | row 2 PUMPS HERO (largest) | row 3 today KPIs | row 4 reference */
  grid-template-rows: minmax(90px,auto) minmax(280px,1.8fr) minmax(0,0.85fr) minmax(0,0.7fr);
  gap:12px;
  flex:1;
  min-height:0;
}
.slot{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
  min-height:0;
  overflow:hidden;
}
.slot h4{
  font-size:16px;
  color:var(--truth);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:10px;
  font-weight:700;
}
.slot h4 .meta{float:right;color:var(--dim);font-weight:400;letter-spacing:0}

/* v1.1 TV-readable layout — pump tiles promoted to HERO position.
   Row order:
     1. Safety (compact full-width)
     2. PUMPS full-width (the OPERATIONAL asset; hero band)
     3. Today's Volume KPIs full-width (compact)
     4. Yday + Carriers + Crew (reference row, smaller)
   Removes the ~40% dead band by sizing pumps row generously. */
/* v1.9 board: safety -> today-live hero -> live-load tiles (hero band) -> carriers */
.slot--safety  { grid-column: 1 / -1; grid-row: 1; }
.slot--hero    { grid-column: 1 / -1; grid-row: 2; }
.slot--carriers{ grid-column: 1 / -1; grid-row: 4; }

/* DWELL slot — truck loading time + railcar on-site dwell (FLAGMAN dwell feed).
   Full-width band on row 5, two columns inside (trucks | railcars).
   Pump-color LAW preserved: truck rows tinted by loading pump P-101 orange / P-102 yellow / P-103 blue. */
.slot--dwell{ grid-column: 1 / -1; grid-row: 5; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.dwell-cols{ display:flex; gap:14px; flex:1; min-height:0; overflow:hidden; }
.dwell-col{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; }
.dwell-col h5{ font-size:11px; text-transform:uppercase; letter-spacing:0.09em; color:var(--dim); font-weight:700; margin-bottom:6px; }
.dwell-stat{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.dwell-stat .big{ font-size:30px; font-weight:700; color:var(--text-bright); font-variant-numeric:tabular-nums; }
.dwell-stat .lbl{ font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:0.06em; }
.dwell-sub{ font-size:11px; color:var(--dim); margin-bottom:8px; }
.dwell-list{ flex:1; overflow:hidden; display:flex; flex-direction:column; gap:3px; }
.dwell-row{ display:flex; align-items:center; gap:8px; font-size:12px; padding:3px 8px; background:var(--panel-3);
  border:1px solid var(--line-dim); border-radius:5px; border-left:3px solid var(--line); }
.dwell-row .car{ font-family:'Cascadia Mono','Consolas',monospace; font-weight:600; color:var(--truth-bright); min-width:74px; }
.dwell-row .days{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }
.dwell-row .tag{ font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--dim); }
.dwell-row--badorder{ border-left-color:var(--bad); }
.dwell-row--long{ border-left-color:var(--warn); }
/* truck-load row pump tints — same LAW as .car-row--pump-* */
.dwell-row--p101{ border-left-color:#ff9f40; }
.dwell-row--p102{ border-left-color:#ffd23f; }
.dwell-row--p103{ border-left-color:#5fb3ff; }
.dwell-empty{ color:var(--dim); font-size:12px; padding:6px 0; }

/* Safety slot — prominent, parity with hero */
.slot--safety{
  background:linear-gradient(165deg,var(--panel-2) 0%,rgba(240,160,69,0.08) 100%);
  border-color:rgba(240,160,69,0.4);
  display:flex;
  flex-direction:column;
}
.slot--safety h4{color:var(--warn)}
.safety-headline{
  font-size:48px;
  font-weight:700;
  line-height:1.18;
  color:var(--text-bright);
  margin-bottom:10px;
  letter-spacing:-0.01em;
}
.safety-reminders{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--text);
  opacity:0.85;
  flex:1;
  overflow:hidden;
}
.safety-reminders li{
  list-style:none;
  padding-left:14px;
  position:relative;
  line-height:1.4;
}
.safety-reminders li::before{
  content:"▸";
  position:absolute;
  left:0;
  color:var(--warn);
}

/* Crude oil strip in header center */
.crude-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:14px;
}
.crude-item{display:flex;align-items:center;gap:6px}
.crude-label{
  font-size:13px;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:600;
}
.crude-item strong{
  font-size:26px;
  color:var(--text-bright);
  font-variant-numeric:tabular-nums;
}
.crude-delta{
  font-size:11px;
  font-variant-numeric:tabular-nums;
  padding:2px 5px;
  border-radius:3px;
}
.crude-delta.good{color:var(--good);background:rgba(63,207,142,0.12)}
.crude-delta.bad{color:var(--bad);background:rgba(242,85,85,0.12)}
.crude-sep{opacity:.25;margin:0 4px}

/* Today hero */
.today-hero{display:flex;flex-direction:column;gap:12px}
.today-nums{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  padding:4px 0;
}
.today-num{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.today-num .big{
  font-size:110px;
  font-weight:900;
  line-height:0.9;
  color:var(--text-bright);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.03em;
}
.today-num .big small{font-size:22px;opacity:.55;margin-left:8px;font-weight:600;letter-spacing:0}
.today-num .lbl{
  font-size:18px;
  color:var(--truth-bright);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-top:8px;
  font-weight:700;
}
.today-num .delta{font-size:12px;color:var(--good);margin-top:2px}
.today-num .delta.bad{color:var(--bad)}

.mtd-pace{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.mtd-pace-label{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--dim);
}
.mtd-pace-label strong{color:var(--text);margin:0 4px}
.mtd-pace-track{
  height:14px;background:var(--panel-3);border-radius:7px;overflow:hidden;
  border:1px solid var(--line-dim);
}
.mtd-pace-fill{
  height:100%;
  background:linear-gradient(90deg,var(--good),#5fb3ff,var(--warn));
  transition:width 500ms ease-out;
}

/* Yesterday KPIs */
.yday-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi{background:var(--panel-3);border:1px solid var(--line-dim);border-radius:6px;padding:8px 10px}
.kpi .num{font-size:48px;font-weight:800;color:var(--text-bright);line-height:1;font-variant-numeric:tabular-nums}
.kpi .num small{font-size:15px;opacity:.55;margin-left:4px;font-weight:500}
.kpi .lbl{font-size:14px;color:var(--dim);text-transform:uppercase;letter-spacing:0.08em;margin-top:6px;font-weight:600}

/* Carriers table */
.carriers-table{width:100%;font-size:12px;border-collapse:collapse}
.carriers-table th{
  text-align:left;font-size:11px;color:var(--dim);font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;
  padding:4px 6px;border-bottom:1px solid var(--line-dim);
}
.carriers-table td{padding:5px 6px;border-bottom:1px solid var(--line-dim);color:var(--text)}
.carriers-table td.r{text-align:right;font-variant-numeric:tabular-nums}
.carriers-table td.name{color:var(--truth-bright);font-weight:500}
.carriers-table .muted{opacity:.4;text-align:center;padding:12px}

/* Pumps widget (merged) */
.pump-stack{display:flex;flex-direction:column;gap:8px}
.pump-row{
  background:var(--panel-3);border:1px solid var(--line-dim);
  border-radius:6px;padding:8px 10px;
}
.pump-row--live{
  background:linear-gradient(90deg,rgba(95,179,255,0.15),var(--panel-3));
  border-color:rgba(95,179,255,0.4);
}
.pump-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:13px}
.pump-head strong{flex:1;color:var(--text-bright)}
.pump-bbl{color:var(--good);font-weight:600;font-variant-numeric:tabular-nums;font-size:12px}
.pump-dot{width:10px;height:10px;border-radius:50%}
.pump-dot--running{background:var(--good);box-shadow:0 0 8px rgba(63,207,142,0.6);animation:dot-pulse 2s ease-in-out infinite}
.pump-dot--idle{background:var(--dim-2)}
@keyframes dot-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.pump-bar{height:5px;background:var(--panel);border-radius:3px;overflow:hidden}
.pump-fill{height:100%;background:var(--truth);transition:width 500ms ease-out}
.pump-active-car{
  margin-top:6px;
  padding:5px 8px;
  background:rgba(95,179,255,0.12);
  border-left:2px solid var(--truth);
  border-radius:3px;
  font-size:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.pump-active-car .pac-label{color:var(--dim);text-transform:uppercase;letter-spacing:0.08em;font-size:11px}
.pump-active-car .pac-car{color:var(--truth-bright);font-family:'Cascadia Mono','Consolas',monospace;font-weight:600}
.pump-active-car .pac-fill{color:var(--good);font-variant-numeric:tabular-nums;font-weight:600}

/* Crew panel (lives in right column below carriers) */
.crew-panel{display:flex;flex-direction:column;gap:8px;font-size:12px}
.crew-counts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:4px;
}
.crew-counts .crew-tile{
  background:var(--panel-3);
  border:1px solid var(--line-dim);
  border-radius:6px;
  padding:8px 10px;
  text-align:center;
}
.crew-counts .crew-tile .num{font-size:22px;font-weight:700;color:var(--text-bright);font-variant-numeric:tabular-nums}
.crew-counts .crew-tile .lbl{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:0.08em;margin-top:2px}
.crew-list{
  display:flex;
  flex-direction:column;
  gap:3px;
  max-height:150px;
  overflow:hidden;
}
.crew-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:6px;
  align-items:center;
  padding:3px 6px;
  background:var(--panel-3);
  border-radius:3px;
  border-left:3px solid var(--good);
  font-size:11px;
}
.crew-row--night{border-left-color:var(--truth)}
.crew-row .dot{width:6px;height:6px;border-radius:50%;background:var(--good)}
.crew-row--night .dot{background:var(--truth)}
.crew-row .name{color:var(--text)}
.crew-row .role{color:var(--dim);font-size:10px;text-align:right}

/* ============================================================
   VIEW 2 — RAIL YARD (3 track columns by crossing)
   ============================================================ */
.rail-yard-grid{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.yard-headline-host{
  background:var(--panel-2);
  border:1px solid var(--line-truth);
  border-radius:8px;
  padding:18px 24px;
  flex:0 0 auto;
}
.yard-headline{display:flex;flex-direction:column;gap:10px}
.yard-big{
  font-size:70px;
  font-weight:800;
  line-height:1;
  color:var(--text-bright);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}
.yard-big .loaded{color:var(--good)}
.yard-big .slash{opacity:.25;margin:0 14px;font-weight:400}
.yard-big .cap{color:var(--truth-bright)}
.yard-big small{font-size:18px;opacity:.5;margin-left:10px;font-weight:500}
.yard-pct-line{font-size:18px;color:var(--dim)}
.yard-pct-line strong{color:var(--text);margin:0 4px}
.yard-bar{height:20px;background:var(--panel-3);border-radius:10px;overflow:hidden;border:1px solid var(--line-dim)}
.yard-fill{height:100%;background:linear-gradient(90deg,var(--good),#5fb3ff,var(--warn),var(--bad));transition:width 500ms ease-out}

.rail-yard-tracks{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  flex:1;
  min-height:0;
}
.track-col{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 14px 10px;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.track-head h5{
  font-size:20px;
  color:var(--truth-bright);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:800;
}
.track-sub{font-size:13px;opacity:.55;margin:3px 0 6px}
.track-counts{font-size:15px;color:var(--good);font-variant-numeric:tabular-nums;margin-bottom:12px;font-weight:600}
.track-counts .muted{color:var(--dim)}
.car-list{
  flex:1 1 auto;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.car-row{
  display:grid;
  grid-template-columns:1.3fr auto 1fr;
  gap:8px;
  align-items:center;
  font-size:15px;
  padding:8px 12px;
  border-radius:5px;
  background:var(--panel-3);
  border-left:5px solid var(--dim-2);
  transition:background 200ms;
  flex:1 1 auto;
  min-height:0;
}
.car-list .car-row:nth-child(odd){background:rgba(255,255,255,0.02)}
.car-list .car-row:nth-child(even){background:var(--panel-3)}

/* State-based colors (applied first) */
.car-row--empty{
  border-left-color:var(--dim-2);
  opacity:0.75;
}
.car-row--partial{
  border-left-color:var(--warn);
  background:rgba(240,160,69,0.08) !important;
}
.car-row--full{
  border-left-color:var(--good);
  background:rgba(63,207,142,0.12) !important;
  color:var(--text-bright);
}
.car-row--loading{
  border-left-color:var(--truth);
  background:rgba(95,179,255,0.18) !important;
  box-shadow:0 0 16px rgba(95,179,255,0.45),inset 0 0 8px rgba(95,179,255,0.1);
  animation:loading-pulse 2.4s ease-in-out infinite;
}
@keyframes loading-pulse{
  0%,100%{box-shadow:0 0 16px rgba(95,179,255,0.45),inset 0 0 8px rgba(95,179,255,0.1)}
  50%{box-shadow:0 0 28px rgba(95,179,255,0.75),inset 0 0 14px rgba(95,179,255,0.25)}
}

/* Pump color tints — subtle left-border color for cars loaded/loading by each pump.
   Per reference_pump_color_codes.md: P-101 orange, P-102 yellow, P-103 blue.
   Applied VIA A SECOND LEFT-BORDER-COLOR OVERRIDE only on state--full or state--loading. */
.car-row--pump-101{border-left-color:#ff9f40 !important;box-shadow:inset 3px 0 0 #ff9f40,0 0 0 1px rgba(255,159,64,0.18)}
.car-row--pump-102{border-left-color:#ffd23f !important;box-shadow:inset 3px 0 0 #ffd23f,0 0 0 1px rgba(255,210,63,0.18)}
.car-row--pump-103{border-left-color:#5fb3ff !important;box-shadow:inset 3px 0 0 #5fb3ff,0 0 0 1px rgba(95,179,255,0.18)}
/* Keep the pulsing glow when loading AND pump-colored (combine shadows) */
.car-row--loading.car-row--pump-101{box-shadow:inset 3px 0 0 #ff9f40,0 0 16px rgba(255,159,64,0.5);animation:pulse-101 2.4s ease-in-out infinite}
.car-row--loading.car-row--pump-102{box-shadow:inset 3px 0 0 #ffd23f,0 0 16px rgba(255,210,63,0.5);animation:pulse-102 2.4s ease-in-out infinite}
.car-row--loading.car-row--pump-103{box-shadow:inset 3px 0 0 #5fb3ff,0 0 16px rgba(95,179,255,0.5);animation:pulse-103 2.4s ease-in-out infinite}
@keyframes pulse-101{0%,100%{box-shadow:inset 3px 0 0 #ff9f40,0 0 16px rgba(255,159,64,0.5)}50%{box-shadow:inset 3px 0 0 #ff9f40,0 0 28px rgba(255,159,64,0.85)}}
@keyframes pulse-102{0%,100%{box-shadow:inset 3px 0 0 #ffd23f,0 0 16px rgba(255,210,63,0.5)}50%{box-shadow:inset 3px 0 0 #ffd23f,0 0 28px rgba(255,210,63,0.85)}}
@keyframes pulse-103{0%,100%{box-shadow:inset 3px 0 0 #5fb3ff,0 0 16px rgba(95,179,255,0.5)}50%{box-shadow:inset 3px 0 0 #5fb3ff,0 0 28px rgba(95,179,255,0.85)}}

/* Overfill — purple (loaded_bbl > safe_cap_bbl). Overrides pump color because it's a safety flag. */
.car-row--overfill{
  background:rgba(167,66,244,0.22) !important;
  border-left-color:#a742f4 !important;
  box-shadow:inset 3px 0 0 #a742f4,0 0 12px rgba(167,66,244,0.5) !important;
  color:var(--text-bright);
}
.car-row--overfill::after{
  content:"⚠ OVER";
  font-size:11px;
  color:#e4b3ff;
  font-weight:700;
  letter-spacing:0.05em;
}

/* Bad order — red. Currently a placeholder (waits for C251 to populate c.bad_order).
   When C251 ships, any car with bad_order=true gets this class automatically. */
.car-row--badorder{
  background:rgba(242,85,85,0.25) !important;
  border-left-color:#f25555 !important;
  box-shadow:inset 3px 0 0 #f25555,0 0 12px rgba(242,85,85,0.55) !important;
  color:#ffdada;
  animation:badorder-pulse 3s ease-in-out infinite;
}
.car-row--badorder::after{
  content:"BAD ORDER";
  font-size:11px;
  color:#ffa0a0;
  font-weight:700;
  letter-spacing:0.05em;
}
@keyframes badorder-pulse{0%,100%{box-shadow:inset 3px 0 0 #f25555,0 0 12px rgba(242,85,85,0.55)}50%{box-shadow:inset 3px 0 0 #f25555,0 0 22px rgba(242,85,85,0.85)}}
.car-id{color:var(--text);font-family:'Cascadia Mono','Consolas',monospace;font-size:15px;font-weight:700}
.car-row--empty .car-id{color:var(--dim)}
.car-pump{
  color:var(--truth-bright);
  font-size:13px;
  text-align:center;
  font-weight:700;
  padding:3px 10px;
  background:rgba(95,179,255,0.15);
  border-radius:4px;
  letter-spacing:0.05em;
}
.car-bbl{text-align:right;color:var(--good);font-variant-numeric:tabular-nums;font-weight:700;font-size:14px}
.car-bbl small{color:var(--dim-2);margin-left:3px;font-weight:400;font-size:11px}
.car-empty{text-align:center;padding:12px;color:var(--dim-2);font-size:14px}
.gal-unit{font-size:10px;opacity:.55;margin-left:3px;font-weight:400}

/* ============================================================
   VIEW 3 — RAIL PIPELINE (HERA data)
   Status donut + location pipeline + consignee breakdown
   ============================================================ */
.rail-pipeline-grid{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.rp-headline-host{
  background:var(--panel-2);
  border:1px solid var(--line-truth);
  border-radius:8px;
  padding:18px 24px;
  flex:0 0 auto;
}
.rp-headline{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.rp-big{
  font-size:70px;
  font-weight:800;
  line-height:1;
  color:var(--text-bright);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}
.rp-big small{font-size:18px;opacity:.5;margin-left:10px;font-weight:500}
.rp-sub{font-size:16px;color:var(--dim);margin-top:4px}
.rp-sub strong{color:var(--text);margin:0 4px}
.rp-body{
  display:grid;
  grid-template-columns:1fr 1.6fr 0.8fr;
  gap:12px;
  flex:1;
  min-height:0;
}
.rp-panel{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.rp-panel h4{
  font-size:11px;
  color:var(--truth);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:12px;
  font-weight:600;
}

/* Status bars */
.rp-status-stack{display:flex;flex-direction:column;gap:10px;flex:1}
.rp-status-row{display:flex;align-items:center;gap:10px}
.rp-status-label{width:80px;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:0.06em;font-weight:600}
.rp-status-bar{flex:1;height:28px;background:var(--panel-3);border-radius:6px;overflow:hidden;position:relative}
.rp-status-fill{height:100%;border-radius:6px;transition:width 500ms ease-out;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:12px;font-weight:700;color:var(--bg-deep);min-width:36px}
.rp-status-fill--enroute{background:var(--warn)}
.rp-status-fill--yard{background:var(--truth)}
.rp-status-fill--industry{background:var(--good)}
.rp-status-fill--unknown{background:var(--dim-2)}
.rp-status-count{font-size:20px;font-weight:700;color:var(--text-bright);font-variant-numeric:tabular-nums;width:50px;text-align:right}

/* Pipeline locations — horizontal flow */
.rp-pipeline{display:flex;flex-direction:column;gap:8px;flex:1}
.rp-loc-row{
  display:grid;
  grid-template-columns:110px 1fr 50px;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  background:var(--panel-3);
  border-radius:6px;
  border-left:4px solid var(--truth);
}
.rp-loc-row:nth-child(1){border-left-color:#3fcf8e}
.rp-loc-row:nth-child(2){border-left-color:#5fb3ff}
.rp-loc-row:nth-child(3){border-left-color:#f0a045}
.rp-loc-row:nth-child(4){border-left-color:#a742f4}
.rp-loc-row:nth-child(5){border-left-color:#f25555}
.rp-loc-row:nth-child(6){border-left-color:#ffd23f}
.rp-loc-name{font-size:14px;font-weight:700;color:var(--truth-bright);letter-spacing:0.06em;text-transform:uppercase}
.rp-loc-bar{height:22px;background:var(--panel);border-radius:5px;overflow:hidden}
.rp-loc-fill{height:100%;background:linear-gradient(90deg,var(--truth),var(--truth-bright));border-radius:5px;transition:width 500ms ease-out}
.rp-loc-count{font-size:18px;font-weight:700;color:var(--text-bright);text-align:right;font-variant-numeric:tabular-nums}

/* Consignee breakdown */
.rp-consignee-stack{display:flex;flex-direction:column;gap:8px;flex:1}
.rp-con-row{
  padding:10px 12px;
  background:var(--panel-3);
  border-radius:6px;
  border-left:4px solid var(--truth);
}
.rp-con-name{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px}
.rp-con-num{font-size:28px;font-weight:800;color:var(--text-bright);font-variant-numeric:tabular-nums}
.rp-con-num small{font-size:12px;opacity:.5;margin-left:4px;font-weight:500}
.rp-con-sub{font-size:11px;opacity:.55;margin-left:8px;font-weight:500;letter-spacing:0.02em}
.rp-unavailable{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  font-size:16px;
  color:var(--dim);
  opacity:.6;
}

/* ============================================================
   RADAR COLUMN — always visible, right side
   ============================================================ */
.radar-column{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  overflow:hidden;
  min-height:0;
}
.radar-noaa-host{
  width:100%;
  height:432px;
  flex:0 0 432px;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--line-dim);
  display:flex;
  align-items:center;
  justify-content:center;
}
.radar-noaa-host img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
/* Pad map — Leaflet + Esri satellite imagery, equal-sized to NOAA radar */
.pad-map-host{
  width:100%;
  height:432px;
  flex:0 0 432px;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--line-truth);
  position:relative;
}
.pad-map-host #pad-map{width:100%;height:100%}
.pad-map-host .map-title{
  position:absolute;
  top:8px;
  left:10px;
  z-index:500;
  background:rgba(10,12,16,0.85);
  padding:4px 10px;
  border-radius:4px;
  font-size:11px;
  color:var(--truth-bright);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
  pointer-events:none;
  border:1px solid var(--line-truth);
}
/* Leaflet marker customization — use colored divs instead of default pin images */
.pad-marker{
  background:var(--truth);
  border:2px solid var(--text-bright);
  border-radius:50%;
  width:10px;
  height:10px;
  box-shadow:0 0 6px rgba(95,179,255,0.5);
}
/* Operator-colored markers — each pad is dotted in its operator's color */
.pad-marker--eog     {background:#3fcf8e;border-color:#d0ffe8;box-shadow:0 0 6px rgba(63,207,142,0.55)}
.pad-marker--ascent  {background:#ff9f40;border-color:#ffe0b8;box-shadow:0 0 6px rgba(255,159,64,0.55)}
.pad-marker--expand  {background:#a742f4;border-color:#e4b3ff;box-shadow:0 0 6px rgba(167,66,244,0.55)}
.pad-marker--concord {background:#f25555;border-color:#ffdada;box-shadow:0 0 6px rgba(242,85,85,0.55)}
.pad-marker--timiron {
  background:var(--truth-bright);
  border:3px solid #fff;
  width:18px;
  height:18px;
  box-shadow:0 0 18px rgba(143,200,255,0.95),0 0 32px rgba(143,200,255,0.5);
  animation:home-pulse 2.4s ease-in-out infinite;
}
@keyframes home-pulse{0%,100%{box-shadow:0 0 18px rgba(143,200,255,0.95),0 0 32px rgba(143,200,255,0.5)}50%{box-shadow:0 0 26px rgba(143,200,255,1),0 0 44px rgba(143,200,255,0.75)}}
.pad-legend{
  position:absolute;
  bottom:8px;
  left:10px;
  z-index:500;
  background:rgba(10,12,16,0.88);
  padding:5px 8px;
  border-radius:4px;
  font-size:11px;
  color:var(--text);
  pointer-events:none;
  border:1px solid var(--line-truth);
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.2;
}
.pad-legend .row{display:flex;align-items:center;gap:5px}
.pad-legend .dot{width:7px;height:7px;border-radius:50%}
.pad-legend .dot.eog{background:#3fcf8e}
.pad-legend .dot.ascent{background:#ff9f40}
.pad-legend .dot.expand{background:#a742f4}
.pad-legend .dot.concord{background:#f25555}
.pad-legend .dot.timiron{background:var(--truth-bright);box-shadow:0 0 4px rgba(143,200,255,0.9)}
.leaflet-popup-content-wrapper{background:var(--panel-2)!important;color:var(--text)!important;border:1px solid var(--line-truth)!important;border-radius:6px!important}
.leaflet-popup-tip{background:var(--panel-2)!important}
.leaflet-popup-content{margin:8px 12px!important;font-size:12px}
.leaflet-popup-content strong{color:var(--truth-bright)}
.radar-readout{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  flex:1;
  min-height:0;
  overflow:hidden;
}
.wx-temp{
  font-size:42px;
  font-weight:800;
  color:var(--truth-bright);
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}
.wx-temp small{font-size:14px;opacity:.55;margin-left:4px;font-weight:500}
.wx-line{
  display:flex;
  justify-content:space-between;
  padding:5px 2px;
  border-bottom:1px solid var(--line-dim);
  font-size:12px;
}
.wx-line span{color:var(--dim);text-transform:uppercase;letter-spacing:0.06em;font-size:10px}
.wx-line strong{color:var(--text);font-weight:600}
.wx-short{
  margin-top:4px;
  padding:6px 8px;
  background:var(--panel-2);
  border-radius:4px;
  color:var(--text);
  font-size:12px;
  overflow:hidden;
}
.wx-alerts{
  background:rgba(242,85,85,0.15);
  border:1px solid rgba(242,85,85,0.5);
  color:var(--bad);
  padding:8px 10px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  margin-top:6px;
}

/* ============================================================
   SLIM RADAR STRIP (Layout v2.0) — lives at the bottom of the
   center column so it persists across all 3 cycling views.
   Same element IDs as the old tall radar-column (radar-noaa-host,
   pad-map-host/#pad-map, radar-readout, wx-*) so existing JS is
   untouched; only the container shape/heights changed.
   ============================================================ */
.radar-strip{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:10px;
  height:160px;
  flex:0 0 160px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px;
  overflow:hidden;
}
/* NOAA radar — left of the strip, square-ish */
.radar-strip .radar-noaa-host{
  width:auto;
  height:100%;
  flex:0 0 200px;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--line-dim);
  display:flex;
  align-items:center;
  justify-content:center;
}
.radar-strip .radar-noaa-host img{width:100%;height:100%;object-fit:cover;display:block;}
/* Pad map — MUST keep a fixed sized container or Leaflet tiles render at 0px */
.radar-strip .pad-map-host{
  width:auto;
  height:100%;
  flex:0 0 220px;
  border-radius:8px;
  overflow:hidden;
  background:#000;
  border:1px solid var(--line-truth);
  position:relative;
}
.radar-strip .pad-map-host #pad-map{width:220px;height:100%;}
/* Weather readout — fills the remaining width, horizontal in the strip */
.radar-strip .radar-readout{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  gap:2px;
  min-width:0;
  overflow:hidden;
  font-size:12px;
}
.radar-strip .wx-temp{font-size:30px;}
.radar-strip .map-title{font-size:9px;padding:2px 6px;top:4px;left:6px;}
.radar-strip .pad-legend{display:none;}  /* legend hidden in slim strip (height budget) */

/* ============================================================
   VERA CAM RAILS (Layout v2.0) — 3 stacked LAN cam tiles per side.
   Pump-color LAW: P-101 orange / P-102 yellow / P-103 blue.
   ============================================================ */
.cam-rail{display:flex;flex-direction:column;gap:10px;height:100%;min-height:0;padding:0;}
.cam-tile{position:relative;flex:1 1 0;min-height:0;border:2px solid var(--line);
  border-radius:8px;overflow:hidden;background:#000;}
.cam-tile.cam--101{border-color:#ff9f40;}
.cam-tile.cam--102{border-color:#ffd23f;}
.cam-tile.cam--103{border-color:#5fb3ff;}
.cam-video{width:100%;height:100%;border:0;display:block;background:#000;}
.cam-label{position:absolute;left:6px;bottom:6px;font-size:12px;font-weight:700;
  letter-spacing:0.06em;padding:2px 8px;border-radius:4px;
  background:rgba(0,0,0,0.6);color:var(--text-bright);}
.cam-offline{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--bad);background:rgba(10,12,18,0.92);text-align:center;}
.cam-offline[hidden]{display:none;}

/* Footer */
.footer-tag{
  display:flex;align-items:center;justify-content:center;
  font-size:10px;opacity:.4;color:var(--dim);letter-spacing:0.08em;
  border-top:1px solid var(--line-dim);
  background:var(--bg-deep);
}

/* Error states */
.muted{opacity:.35;text-align:center}
.loading{opacity:.4}

/* ============================================================
   P-103 LIVE tile (TopTech MultiLoad II+ direct feed)
   Additive: extends main-ops-grid with a new row 5, full-width.
   Read-only surface per feedback_toptech_pumps_readonly.md.
   ============================================================ */
/* Proportional rows (2026-06-02): on a 1080-tall TV the old `auto auto auto auto 1fr`
   let the upper tiles eat the height and starved the live-pump row to ~0. Fractional rows
   always give the P-101/102/103 live tile a guaranteed share at any screen height. */
.main-ops-grid{grid-template-rows: auto auto minmax(280px,1fr) auto auto;}  /* 5 rows: row 3 live-load band stretches; row 5 = dwell tile (2026-06-13) */
.slot--p103live{grid-column: 1 / -1; grid-row: 3; display:flex; flex-direction:column; min-height:0; overflow:hidden;}
.slot--p103live .ll-grid{flex:1; align-content:stretch;}
.slot--p103live .ll-card{height:100%;}
/* LIVE LOADING tile — JANUS-style rich tile per pump (2026-05-28)
   Pump colors LAW per reference_pump_color_codes.md:
     P-101 orange #ff8c2d, P-102 yellow #ffd528, P-103 blue #5fb3ff
   Source JSON: https://toptech-p{101,102,103}.kolassus.ai/live */
.ll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
/* Shared Load-Track status strip (2026-06-16) — single canonical rail truth,
   lives between the LOADS-IN-PROGRESS header and the 3 pump tiles. Replaces the
   misleading per-pump "bbl on track" aggregate. Colors by /api/railcap status. */
.ll-rail-strip{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px;
  background:var(--panel-2);border:1px solid var(--line);border-left:5px solid var(--dim-2);
  border-radius:8px;padding:8px 12px;overflow:hidden}
.ll-rail-banner{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.ll-rail-label{font-size:11px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim)}
.ll-rail-status{font-size:20px;font-weight:800;letter-spacing:0.02em;color:var(--text-bright)}
.ll-rail-detail{font-size:12px;color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ll-rail-strip--muted{opacity:0.8}
.ll-rail-banner--warn .ll-rail-status{color:var(--warn)}
.ll-rail-strip:has(.ll-rail-banner--warn){border-left-color:var(--warn)}
.ll-rail-banner--bad .ll-rail-status{color:var(--bad)}
.ll-rail-strip:has(.ll-rail-banner--bad){border-left-color:var(--bad)}
.ll-rail-banner--good .ll-rail-status{color:var(--good)}
.ll-rail-strip:has(.ll-rail-banner--good){border-left-color:var(--good)}
.ll-rail-banner--info .ll-rail-status{color:var(--truth-bright)}
.ll-rail-strip:has(.ll-rail-banner--info){border-left-color:var(--truth)}
.ll-rail-banner--muted .ll-rail-status{color:var(--dim);font-size:15px;font-weight:600}
.ll-rail-summary{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.ll-rail-summary b{color:var(--text);font-variant-numeric:tabular-nums}
.ll-rail-stale{color:var(--warn);background:rgba(240,160,69,0.12);border:1px solid rgba(240,160,69,0.4);border-radius:4px;padding:1px 6px;font-weight:600;letter-spacing:.02em}
.ll-rail-board{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.ll-rail-chip{width:14px;height:10px;border-radius:2px;background:var(--panel-3);border:1px solid var(--line-dim)}
.ll-rail-chip--full{background:var(--good);border-color:rgba(63,207,142,0.6)}
.ll-rail-chip--loading{background:var(--truth);border-color:rgba(95,179,255,0.6);animation:ll-pulse 1.6s ease-in-out infinite}
.ll-rail-chip--partial{background:var(--warn);border-color:rgba(240,160,69,0.6)}
.ll-rail-chip--empty{background:var(--panel-3);border-color:var(--line-dim);opacity:0.6}
.ll-rail-more{font-size:11px;color:var(--dim);margin-left:4px;font-variant-numeric:tabular-nums}
.ll-card{background:var(--panel-2);border:1px solid var(--line);border-left:6px solid var(--panel-3);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:100%;height:100%;overflow:hidden;justify-content:flex-start}
.ll-card .ll-batch{margin-top:auto}
.ll-card--active .ll-kpis,.ll-card--active .ll-sec,.ll-card--active .ll-totals{flex:0 0 auto}
.ll-card--active .ll-spacer{flex:1 1 auto;min-height:4px}
.ll-card--p101{border-left-color:#ff8c2d}
.ll-card--p102{border-left-color:#ffd528}
.ll-card--p103{border-left-color:#5fb3ff}
.ll-card--active{box-shadow:inset 0 0 32px rgba(63,207,142,0.06)}
.ll-card--offline{opacity:0.55}
.ll-card--stale{opacity:0.75}
.ll-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line-dim);padding-bottom:6px}
.ll-pump{font-size:16px;color:var(--text-bright);font-weight:700;letter-spacing:0.04em}
.ll-pump--p101{color:#ff8c2d}
.ll-pump--p102{color:#ffd528}
.ll-pump--p103{color:#5fb3ff}
.ll-pill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:3px;letter-spacing:0.6px;text-transform:uppercase}
.ll-pill--live{background:var(--good);color:#08210c}
.ll-pill--high{background:#ff8c2d;color:#1a0a00}
.ll-pill--low{background:var(--warn);color:#1a1500}
.ll-pill--alarm{background:var(--bad);color:#fff;animation:ll-pulse 1.5s ease-in-out infinite}
.ll-pill--idle{background:var(--panel-3);color:var(--dim)}
.ll-pill--stale{background:rgba(255,210,63,0.22);color:#ffd23f;border:1px solid rgba(255,210,63,0.5)}
@keyframes ll-pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.ll-bol{font-size:11px;color:var(--dim);margin-left:auto;font-variant-numeric:tabular-nums}
.ll-age{font-size:10px;color:var(--dim-2);font-variant-numeric:tabular-nums}
.ll-sub{font-size:11px;color:var(--dim);display:flex;justify-content:space-between;gap:8px;margin-top:-2px}
.ll-sub b{color:var(--text)}

.ll-hero{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;padding:4px 0}
.ll-hero-car-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.6px}
.ll-hero-car-id{font-size:30px;font-weight:800;font-family:'JetBrains Mono','Cascadia Mono',ui-monospace,monospace;line-height:1;letter-spacing:0.03em}
.ll-hero-car-id--p101{color:#ff8c2d}
.ll-hero-car-id--p102{color:#ffd528}
.ll-hero-car-id--p103{color:#5fb3ff}
.ll-hero-fill{text-align:right;font-variant-numeric:tabular-nums}
.ll-hero-fill .v{font-size:24px;font-weight:700;color:var(--text-bright);line-height:1}
.ll-hero-fill .l{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:0.6px;margin-top:2px}

.ll-bar{position:relative;height:20px;background:var(--panel-3);border-radius:4px;overflow:hidden}
.ll-bar-fill{position:absolute;left:0;top:0;bottom:0;background:var(--good);transition:width 0.5s ease}
.ll-bar-fill--warn{background:var(--warn)}
.ll-bar-fill--danger{background:var(--bad)}
.ll-bar-text{position:absolute;left:6px;right:6px;top:0;bottom:0;display:flex;align-items:center;font-size:11px;color:var(--text);text-shadow:0 0 4px rgba(0,0,0,0.85);justify-content:center;font-variant-numeric:tabular-nums}

.ll-progress{position:relative;height:14px;background:var(--panel-3);border-radius:3px;overflow:hidden}
.ll-progress-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#2a78d0,#5fb3ff);transition:width 0.5s ease}
.ll-progress-text{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;text-shadow:0 0 4px rgba(0,0,0,0.85);font-weight:600}

.ll-plain{font-size:11px;color:var(--text);line-height:1.35;padding:4px 6px;background:var(--panel-3);border-radius:4px;border-left:2px solid var(--good)}

.ll-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
/* v1.9 secondary KPI row (Temp/API/BS&W/GSV/Mass/BBL) — denser, 6-up */
.ll-kpis--sec{grid-template-columns:repeat(6,1fr);margin-top:6px}
.ll-kpis--sec .ll-kpi{padding:6px 2px;background:rgba(20,24,31,0.6)}
.ll-kpis--sec .ll-kpi-v{font-size:14px}
.ll-note{font-size:8px;color:var(--dim);text-align:right;margin-top:2px;font-style:italic}
.ll-kpi{text-align:center;background:var(--panel-3);border-radius:4px;padding:9px 3px}
.ll-kpi-v{font-size:18px;color:var(--text-bright);font-weight:700;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;line-height:1.1}
.ll-kpi-l{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px;margin-top:3px}

.ll-sec{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ll-sec .ll-kpi{background:rgba(20,24,31,0.6);padding:7px 3px}
.ll-sec .ll-kpi-v{font-size:15px;font-weight:700}
.ll-sec .ll-kpi-l{font-size:9px}

.ll-totals{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ll-totals .ll-kpi{padding:10px 4px}
.ll-totals .ll-kpi-v{font-size:20px}
.ll-totals .ll-kpi-l{font-size:10px}

.ll-batch{font-size:10px;border-top:1px solid var(--line-dim);padding-top:5px;color:var(--dim);display:grid;grid-template-columns:auto 1fr;gap:2px 8px}
.ll-batch .k{color:var(--dim);text-transform:uppercase;letter-spacing:0.5px;font-size:9px}
.ll-batch .v{color:var(--text);font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ll-idle-last{font-size:11px;color:var(--dim);padding:4px 0}
.ll-idle-last b{color:var(--text-bright);font-family:ui-monospace,monospace}

/* IDLE pump tile — track-queue card (replaces empty idle card 2026-05-28 v1.3) */
.ll-idle-hdr{display:flex;justify-content:space-between;align-items:baseline;padding:2px 0;font-size:11px;color:var(--dim)}
.ll-idle-hdr b{color:var(--text-bright);font-family:ui-monospace,monospace;font-size:13px}
.ll-track-title{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.6px;margin-top:4px;padding-bottom:3px;border-bottom:1px solid var(--line-dim)}
.ll-track-rows{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;overflow:hidden;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}
.ll-track-row{display:grid;grid-template-columns:1.2fr 1fr 56px;gap:6px;align-items:center;padding:5px 6px;background:var(--panel-3);border-radius:3px;font-size:12px;position:relative;overflow:hidden}
.ll-track-row .car{color:var(--text-bright);font-weight:700;letter-spacing:0.03em;z-index:1}
.ll-track-row .rem{color:var(--text);text-align:right;z-index:1;font-size:11px}
.ll-track-row .rem small{color:var(--dim);font-size:9px;margin-left:3px}
.ll-track-row .pct{text-align:right;color:var(--dim);font-size:11px;font-weight:600;z-index:1}
.ll-track-row .bg{position:absolute;left:0;top:0;bottom:0;background:rgba(95,179,255,0.10);z-index:0}
.ll-track-row.loaded .bg{background:rgba(63,207,142,0.16)}
.ll-track-row.loading .bg{background:rgba(255,210,63,0.18)}
.ll-track-row.empty .bg{background:rgba(255,255,255,0.03)}
.ll-track-row.empty .pct{color:var(--dim-2)}
.ll-track-row.partial .bg{background:rgba(95,179,255,0.18)}
.ll-track-foot{font-size:11px;color:var(--dim);padding-top:6px;border-top:1px solid var(--line-dim);display:flex;justify-content:space-between;margin-top:auto;font-variant-numeric:tabular-nums}
.ll-track-foot b{color:var(--text-bright);font-family:ui-monospace,monospace}
.ll-track-empty{font-size:11px;color:var(--dim-2);text-align:center;padding:14px;font-style:italic}
/* v1.5 — last-load surfacing on pump tiles */
.ll-lastload{font-variant-numeric:tabular-nums}
.ll-lastload--panel{background:rgba(255,255,255,0.03);border:1px solid var(--line-dim);border-radius:6px;padding:8px 10px;margin:6px 0 8px}
.ll-lastload-hdr{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.ll-lastload-bol{color:var(--text-bright);font-family:ui-monospace,monospace;letter-spacing:0}
.ll-lastload-hero{display:flex;justify-content:space-between;align-items:center;padding:4px 0 6px;border-bottom:1px dashed var(--line-dim);margin-bottom:6px}
.ll-lastload-car{font-family:ui-monospace,monospace;font-size:18px;font-weight:600;color:var(--text-bright);letter-spacing:.5px}
.ll-lastload-vol{text-align:right}
.ll-lastload-vol .v{font-family:ui-monospace,monospace;font-size:18px;font-weight:700;color:var(--text-bright);line-height:1}
.ll-lastload-vol .l{font-size:10px;color:var(--dim);margin-top:2px}
.ll-lastload-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;font-size:11px}
.ll-lastload-grid > div{display:flex;justify-content:space-between;gap:6px}
.ll-lastload-grid .k{color:var(--dim)}
.ll-lastload-grid .v{color:var(--text-bright);font-family:ui-monospace,monospace}
.ll-lastload--foot{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:11px;color:var(--dim);padding:6px 0 0;border-top:1px solid var(--line-dim);margin-top:6px}
.ll-lastload--foot b{color:var(--text-bright);font-family:ui-monospace,monospace}
.ll-lastload-foot-label{text-transform:uppercase;letter-spacing:.5px;color:var(--dim-2);font-size:10px}

/* v1.4 — Railcar SVG graphic inside pump tile (shared visual w/ track-sheet) */
.ll-car-hero{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0;flex:0 0 auto}
.ll-car-hero .ll-car-svg{width:100%;max-width:340px;height:140px;display:block}
.ll-car-hero .ll-car-cap{display:flex;justify-content:space-between;align-items:baseline;width:100%;max-width:340px;font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace;padding:0 4px}
.ll-car-hero .ll-car-cap .lhs{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px}
.ll-car-hero .ll-car-cap .rhs{font-size:14px;font-weight:700;color:var(--text-bright)}
/* v1.8 — live-fill railcar hero on the ACTIVE pump tile (compact for 3-card TV row) */
.ll-card--active .ll-active-car{display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 0;flex:0 0 auto}
.ll-card--active .ll-active-car .ll-car-svg{width:100%;max-width:280px;height:90px;display:block}
.ll-active-car-cap{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-bright)}
.ll-active-car-cap--warn{color:var(--warn)}
.ll-active-car-cap--danger{color:var(--bad)}
.ll-car-queue{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding-top:4px}
.ll-car-queue .qcar{display:flex;flex-direction:column;align-items:center;width:90px;font-size:9px;color:var(--dim);font-family:ui-monospace,monospace}
.ll-car-queue .qcar svg{width:90px;height:42px;display:block}
.ll-car-queue .qcar .qid{margin-top:2px;color:var(--text);font-weight:700;letter-spacing:0.03em;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;text-align:center}
.ll-car-queue .qcar .qpct{font-size:9px;color:var(--dim)}

.ll-status{font-size:11px;color:var(--bad);text-align:center;padding:24px}

/* FLAGMAN tile — Phase 1.0 (additive, full-width row 6) */
.slot--flagman{
  grid-column: 1 / 4;
  grid-row: 6;
  background:linear-gradient(165deg,var(--panel-2) 0%,rgba(255,140,45,0.08) 100%);
  border-color:rgba(255,140,45,0.45);
  display:flex;
  flex-direction:column;
}
.slot--flagman h4{color:#ff8c2d}
.flagman-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:'JetBrains Mono','Consolas',monospace;
  font-size:13px;
  color:var(--text);
  line-height:1.3;
}
.flagman-row{
  display:grid;
  grid-template-columns: 110px 1fr auto auto;
  gap:14px;
  padding:4px 8px;
  border-left:3px solid #ff8c2d;
  background:rgba(255,140,45,0.05);
  border-radius:3px;
  align-items:center;
}
.flagman-row .fm-ts{color:var(--dim);font-size:11px}
.flagman-row .fm-crew{color:var(--text-bright);font-weight:600}
.flagman-row .fm-type{color:#ff8c2d;text-transform:uppercase;font-size:11px;letter-spacing:0.06em}
.flagman-row .fm-photos{color:var(--dim);font-size:11px}
.flagman-empty{
  color:var(--dim);
  font-style:italic;
  font-size:13px;
  padding:8px 4px;
}
.p103-card{
  background:var(--panel-2);border:1px solid var(--line-dim);border-radius:8px;
  padding:10px 14px;display:flex;flex-direction:column;gap:8px;
}
.p103-head{display:flex;align-items:center;gap:10px;font-size:13px}
.p103-head h4{margin:0;color:var(--text-bright);font-size:14px;letter-spacing:0.06em;flex:1}
.p103-pill{
  font-size:10px;font-weight:700;letter-spacing:0.08em;
  padding:3px 8px;border-radius:10px;text-transform:uppercase;
}
.p103-pill--live{background:rgba(63,207,142,0.18);color:var(--good);border:1px solid rgba(63,207,142,0.4)}
.p103-pill--stale{background:rgba(255,210,63,0.18);color:#ffd23f;border:1px solid rgba(255,210,63,0.4)}
.p103-pill--offline{background:rgba(242,85,85,0.22);color:#ff9090;border:1px solid rgba(242,85,85,0.5)}
.p103-body{display:grid;grid-template-columns: 1.3fr 1fr 1.2fr;gap:12px;align-items:stretch}
.p103-bol{background:var(--panel-3);border:1px solid var(--line-dim);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.p103-bol .row{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);gap:8px}
.p103-bol .row .k{text-transform:uppercase;letter-spacing:0.06em}
.p103-bol .row .v{color:var(--text);font-variant-numeric:tabular-nums}
.p103-bol .bol-id{color:var(--truth-bright);font-weight:600;font-family:'Cascadia Mono','Consolas',monospace;font-size:13px}
.p103-bol .nsv-big{font-size:26px;font-weight:700;color:var(--good);font-variant-numeric:tabular-nums;line-height:1.1;margin-top:2px}
.p103-bol .nsv-big small{font-size:11px;color:var(--dim);font-weight:500;margin-left:4px;letter-spacing:0.06em}
.p103-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.p103-totals .t{background:var(--panel-3);border:1px solid var(--line-dim);border-radius:6px;padding:6px 8px;text-align:center}
.p103-totals .t .lbl{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.08em}
.p103-totals .t .bbl{font-size:16px;font-weight:700;color:var(--text-bright);font-variant-numeric:tabular-nums;line-height:1.1}
.p103-totals .t .loads{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
.p103-maint{background:var(--panel-3);border:1px solid var(--line-dim);border-radius:6px;padding:6px 8px;display:flex;flex-direction:column;gap:3px;min-height:0}
.p103-maint .hdr{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px}
.p103-maint .ev{display:grid;grid-template-columns:auto 1fr auto;gap:6px;font-size:10px;align-items:center}
.p103-maint .ev .tag{font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:0.05em}
.p103-maint .ev .tag--reboot{background:rgba(95,179,255,0.18);color:var(--truth-bright)}
.p103-maint .ev .tag--program_mode{background:rgba(167,66,244,0.20);color:#d9a8ff}
.p103-maint .ev .tag--alarm{background:rgba(255,210,63,0.20);color:#ffd23f}
.p103-maint .ev .tag--error{background:rgba(242,85,85,0.22);color:#ff9090}
.p103-maint .ev .txt{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p103-maint .ev .ts{color:var(--dim);font-variant-numeric:tabular-nums}
.p103-foot{font-size:10px;color:var(--dim);text-align:right;letter-spacing:0.04em}
/* LAYOUT MODEL (v1.7.0, 2026-06-08): fixed 1920x1080 design canvas (.app) scaled
   uniformly via --fit (JS fitApp). Always fits any panel exactly -- immune to kiosk
   browser-zoom and OS display-scaling. Superseded the vh-responsive model (v1.6.x),
   which clipped the bottom load-card row whenever the effective viewport was < 1080.
   Do NOT reintroduce raw vh/vw for structural sizing inside .app. */