/* Logistics → Warehouse Logistics — the warehouse TV board that was pisceslogistics.com (2026-10-22).
   The Azure app's own <style> block, unchanged, from Apps/_pisces-dashboard/index.html (2026-08-19).
   The only additions are the three rules after it, which were style="" attributes in its markup —
   Central's CSP (`style-src 'self'`) refuses those. See logistics.js for the rest. */
/* ── CSS custom properties — all sizes derived from vmin so the layout
   scales proportionally from a 13" laptop (1366×768) to an 85" 4K TV ── */
:root{
  --navy:#0a1628;--card:#0f1f3d;--border:rgba(255,255,255,0.07);
  --green:#00d97e;--gold:#f5c518;--blue:#3b82f6;--purple:#a78bfa;
  --muted:rgba(255,255,255,0.4);

  /* base unit: 1% of the smaller viewport dimension */
  --u: 1vmin;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  background:var(--navy);color:#fff;
  font-family:'Segoe UI',system-ui,sans-serif;
  width:100vw;height:100vh;overflow:hidden;
  font-size:calc(0.9 * var(--u)); /* root em = ~0.9vmin */
}

/* ── SCREEN GRID ── */
.screen{
  display:grid;
  grid-template-rows: 10vh 1fr 1fr 1fr;
  height:100vh;
  gap:0.4vh;
  padding:0.4vh 0.8vw 1.8vh;
}

/* ── TOP BAR ── */

/* ── HERO ROW ── */
.heroes{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5vw;min-height:0;}
/* On desktop the track is transparent to layout (cards become grid items) and
   the duplicate "clone" cards are hidden — only the mobile marquee uses them. */
.hero-track{display:contents;}
.heroes .hero-clone{display:none;}
.winner-card{
  background:linear-gradient(135deg,#1a2e6b 0%,#0d1a3d 100%);
  border:1px solid rgba(245,197,24,.4);border-top:3px solid var(--gold);
  border-radius:7px;padding:0.6vh 1vw;
  display:flex;align-items:center;gap:1vw;overflow:hidden;min-width:0;
}
.winner-emoji{font-size:clamp(14px,3vmin,44px);flex-shrink:0;}
.winner-inner{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.winner-label{font-size:clamp(10px,1.8vmin,26px);text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:700;white-space:nowrap;}
.winner-name{font-size:clamp(20px,4.2vmin,68px);font-weight:900;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.winner-stat{font-size:clamp(8px,1.3vmin,20px);color:var(--muted);margin-top:0.2vh;white-space:nowrap;}
.winner-stat .stat-num{color:var(--gold);font-weight:800;}

/* ── METRIC ROWS ── */
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5vw;min-height:0;overflow:hidden;}
.panel{background:var(--card);border:1px solid var(--border);border-radius:7px;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
.panel-head{display:flex;align-items:center;gap:0.5vw;padding:0.4vh 0.8vw;background:rgba(0,0,0,.2);border-bottom:1px solid var(--border);flex-shrink:0;}
.panel-wh{font-size:clamp(10px,1.5vmin,22px);font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.panel-num{font-size:clamp(12px,1.8vmin,28px);font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0;}
.panel-avghr{font-size:clamp(7px,1vmin,15px);color:var(--muted);flex-shrink:0;white-space:nowrap;}
.panel-body{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;min-height:0;}

/* ── OPERATOR ROWS ── */
.op-row{display:flex;align-items:center;gap:0.4vw;padding:0 0.8vw;flex:0 0 20%;min-height:0;max-height:10vh;}
.op-row.gold{background:rgba(245,197,24,.07);border-left:3px solid var(--gold);}
.op-rank{font-size:clamp(10px,1.4vmin,22px);color:var(--muted);width:1.6vmin;text-align:center;flex-shrink:0;font-weight:600;}
.op-crown{font-size:clamp(10px,1.4vmin,22px);width:1.6vmin;text-align:center;flex-shrink:0;}
.op-name{font-size:clamp(16px,3vmin,46px);font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.op-name.gold{color:var(--gold);font-weight:800;}
.op-hr{font-size:clamp(7px,1.1vmin,17px);color:var(--blue);font-weight:600;min-width:5vmin;text-align:right;flex-shrink:0;opacity:.9;}
.op-pb{font-size:clamp(7px,1.1vmin,15px);color:#c7d2e0;font-weight:600;flex-shrink:0;opacity:1;white-space:nowrap;}
.op-pb.beat{color:var(--gold);opacity:1;}
.op-bar-wrap{width:6vmin;height:0.5vmin;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;flex-shrink:0;}
.op-bar{height:100%;border-radius:3px;transition:width .8s;}
.op-val{font-size:clamp(16px,3vmin,46px);font-weight:800;font-variant-numeric:tabular-nums;min-width:6vmin;text-align:right;flex-shrink:0;}
.op-val.gold{color:var(--gold);}
.wh-winchester .op-bar{background:var(--green);}
.wh-longmont   .op-bar{background:var(--blue);}
.wh-fortmyer   .op-bar{background:var(--purple);}

/* ── BOTTOM ROW ── */
#row-bottom{display:flex;gap:0.5vw;min-height:0;overflow:hidden;}
.shippers-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;min-height:0;}
.shippers-col{display:flex;flex-direction:column;justify-content:space-evenly;border-right:1px solid var(--border);}
.shippers-col:last-child{border-right:none;}
.ship-col-head{font-size:clamp(8px,1.1vmin,15px);font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:0.3vh 0.8vw;color:var(--muted);border-bottom:1px solid var(--border);text-align:center;flex-shrink:0;}
.no-data{flex:1;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,1.2vmin,16px);color:var(--muted);}
.loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);gap:1vw;font-size:clamp(10px,1.4vmin,20px);}
.spinner{width:2.5vmin;height:2.5vmin;border:0.3vmin solid rgba(255,255,255,.1);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── HISTORY (view a previous day) ── */
.panel-head{cursor:pointer;}
.panel-head:hover{background:rgba(255,255,255,.06);}
.race-scores{cursor:pointer;transition:background .15s;}
.race-scores:hover{background:rgba(255,255,255,.06);}
#history-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;}
#history-modal.open{display:flex;}
.history-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65);}
.history-modal-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:10px;width:min(860px,96vw);max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.history-modal-head{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 20px;border-bottom:1px solid var(--border);font-size:16px;font-weight:700;letter-spacing:.03em;}
.history-modal-close{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px 8px;}
.history-modal-close:hover{color:#fff;}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px 2px;}
.cal-nav-btn{background:rgba(255,255,255,.05);border:1px solid var(--border);color:#fff;border-radius:6px;width:30px;height:30px;font-size:17px;line-height:1;cursor:pointer;transition:all .15s;}
.cal-nav-btn:hover:not(:disabled){border-color:var(--green);color:var(--green);}
.cal-nav-btn:disabled{opacity:.2;cursor:default;}
.cal-month{font-size:15px;font-weight:700;letter-spacing:.03em;}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:10px 20px 0;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;text-align:center;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:6px 20px 16px;overflow-y:auto;}
.cal-day{min-height:96px;display:flex;flex-direction:column;gap:3px;padding:7px 8px;border-radius:9px;border:1px solid transparent;font-size:15px;font-weight:600;color:rgba(255,255,255,.2);}
.cal-day.empty{border:none;min-height:0;}
.cal-day.has-data{color:#fff;background:rgba(255,255,255,.045);border-color:var(--border);cursor:pointer;transition:border-color .15s,background .15s;}
.cal-day.has-data:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.08);}
.cal-day.today{border-color:var(--gold);}
.cal-day.today .cal-daynum{color:var(--gold);}
.cal-day.selected{border-color:var(--green);background:rgba(0,217,126,.14);}
/* Cell head: the date on the left, that day's shipped total on the right. */
.cal-dayhead{display:flex;align-items:baseline;justify-content:space-between;gap:4px;}
.cal-daynum{font-size:15px;font-weight:700;line-height:1;}
.cal-daytotal{font-size:13px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.cal-whlist{display:flex;flex-direction:column;gap:2px;margin-top:1px;}
/* The dot carries warehouse identity; the number stays in text ink so it keeps
   its contrast against the cell (a categorical hue is illegible as small text). */
.cal-whrow{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:rgba(255,255,255,.72);line-height:1.15;font-variant-numeric:tabular-nums;}
.cal-whrow.goal-hit{color:#57d98a;}
.cal-whrow.goal-miss{color:#f98080;}
.cal-whdot{width:7px;height:7px;border-radius:2px;flex:none;}
.cal-day.no-activity .cal-daytotal,.cal-day.no-activity .cal-whlist{display:none;}
@media (max-width:640px){
  .cal-day{min-height:62px;}
  .cal-whlist{display:none;}
  .cal-daynum{font-size:13px;}
}
.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);}
#cal-hint{display:flex;align-items:center;flex-wrap:wrap;gap:2px;}
.cal-today-btn{background:rgba(255,255,255,.05);border:1px solid var(--border);color:#fff;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
.cal-today-btn:hover{border-color:var(--gold);color:var(--gold);}
/* Every hero card still reads "TODAY'S …" while a past day is on screen — this pill
   is the one thing telling you the screen isn't live, and the way back. */
#history-banner{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:900;display:none;align-items:center;gap:10px;background:rgba(15,31,61,.96);border:1px solid var(--gold);border-radius:999px;padding:6px 8px 6px 16px;font-size:12px;font-weight:700;color:var(--gold);box-shadow:0 6px 24px rgba(0,0,0,.5);}
#history-banner.show{display:flex;}
#history-banner{padding:6px 8px;}
#history-banner .hb-exit{background:rgba(255,255,255,.08);border:none;border-radius:999px;color:#fff;font-size:11px;font-weight:600;padding:4px 10px;cursor:pointer;}
#history-banner .hb-exit:hover{background:rgba(255,255,255,.2);}
#history-banner-text{min-width:104px;text-align:center;}
.hb-step{background:rgba(255,255,255,.08);border:none;border-radius:50%;width:24px;height:24px;flex:none;color:#fff;font-size:15px;line-height:1;cursor:pointer;transition:background .15s;}
.hb-step:hover:not(:disabled){background:rgba(255,255,255,.22);}
.hb-step:disabled{opacity:.25;cursor:default;}

/* ══════════════════════════════════════════════════════════════════════
   DAILY BREAKDOWN — the at-a-glance analytics view
   Chart palette: re-stepped from the warehouse hues used on the main screen so
   it clears every colorblind-safety check. The screen palette's blue vs lavender
   sits at ΔE 5.7 (protanopia) / 13.5 (normal vision) — indistinguishable as
   adjacent marks. Every mark here is directly labelled too, so hue is
   reinforcement and never the only channel carrying identity.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --wh-w:#2aaf3d;              /* Winchester */
  --wh-l:#3388fb;              /* Longmont   */
  --wh-f:#de4fc6;              /* Fort Myer  */
  --ink-2:rgba(255,255,255,.72);
  --ink-3:rgba(255,255,255,.46);
  --hairline:rgba(255,255,255,.10);
  --surface-2:#132546;
  --danger:#ef4444;
}
/* Lives in the calendar header, never on the dashboard itself — the main screen runs
   on warehouse TVs, so nothing may float over the KPI panels. */
#bd-open{margin-left:auto;display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:8px;
  color:var(--ink-2);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:7px 13px 7px 11px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;}
#bd-open:hover{color:#fff;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.12);}
#bd-open svg{flex:none;}

#bd-modal{position:fixed;inset:0;z-index:1100;display:none;}
#bd-modal.open{display:block;}
.bd-backdrop{position:absolute;inset:0;background:rgba(4,10,22,.86);}
.bd-sheet{position:absolute;inset:2vh 2vw;background:var(--navy);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden;}

.bd-head{display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--border);flex:none;}
.bd-title{font-size:19px;font-weight:800;letter-spacing:.01em;}
.bd-sub{font-size:12px;color:var(--ink-3);}
.bd-close{margin-left:auto;background:transparent;border:none;color:var(--ink-3);font-size:20px;cursor:pointer;padding:2px 8px;line-height:1;}
.bd-close:hover{color:#fff;}

/* One filter row above everything it scopes. */
.bd-filters{display:flex;align-items:center;gap:10px;padding:12px 22px 0;flex:none;}
.bd-filter-label{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;}
.bd-seg{display:flex;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.bd-seg button{background:transparent;border:none;color:var(--ink-3);font-family:inherit;font-size:12px;font-weight:700;
  padding:6px 14px;cursor:pointer;transition:color .15s,background .15s;}
.bd-seg button:hover{color:#fff;}
.bd-seg button.on{background:rgba(255,255,255,.13);color:#fff;}

.bd-body{flex:1;overflow-y:auto;padding:14px 22px 22px;display:flex;flex-direction:column;gap:14px;}

/* ── hero + stat tiles ── */
.bd-top{display:grid;grid-template-columns:minmax(230px,1.05fr) repeat(4,1fr);gap:12px;}
.bd-card{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:14px 16px;min-width:0;}
.bd-hero{background:linear-gradient(152deg,#16294c 0%,var(--card) 62%);border-color:rgba(255,255,255,.13);
  display:flex;flex-direction:column;justify-content:center;gap:3px;}
.bd-hero-label{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.09em;}
/* Hero figure: one per view, same sans as everything, proportional figures. */
.bd-hero-val{font-size:clamp(40px,5.4vmin,62px);font-weight:800;line-height:1;letter-spacing:-.02em;}
.bd-hero-note{font-size:12px;color:var(--ink-2);}
.bd-tile-label{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.bd-tile-val{font-size:clamp(21px,2.7vmin,30px);font-weight:800;line-height:1.15;letter-spacing:-.01em;margin-top:3px;}
.bd-tile-sub{font-size:11px;color:var(--ink-3);margin-top:1px;}
.bd-tile-spark{margin-top:7px;height:26px;}
.bd-delta{font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:4px;}
.bd-delta.up{color:#31c46b;}
.bd-delta.down{color:var(--danger);}
.bd-delta.flat{color:var(--ink-3);}

/* ── chart ── */
.bd-chart-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
.bd-chart-title{font-size:14px;font-weight:700;}
.bd-chart-sub{font-size:11px;color:var(--ink-3);}
.bd-legend{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap;}
.bd-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2);font-weight:600;}
.bd-legend-key{width:11px;height:11px;border-radius:3px;flex:none;}

/* ── per-warehouse cards ── */
.bd-whgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.bd-wh-head{display:flex;align-items:center;gap:8px;}
.bd-wh-dot{width:11px;height:11px;border-radius:3px;flex:none;}
.bd-wh-name{font-size:14px;font-weight:800;letter-spacing:.01em;}
.bd-wh-goal{margin-left:auto;font-size:11px;color:var(--ink-3);}
.bd-wh-figs{display:flex;gap:18px;margin-top:11px;}
.bd-wh-fig-label{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;}
.bd-wh-fig-val{font-size:18px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;}
.bd-wh-fig-sub{font-size:10px;color:var(--ink-3);}
/* Meter: the fill carries state, the track is a lighter step of the same ramp. */
.bd-meter{margin-top:12px;}
.bd-meter-top{display:flex;align-items:baseline;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-bottom:5px;}
.bd-meter-pct{font-size:12px;font-weight:800;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.bd-meter-track{height:7px;border-radius:4px;overflow:hidden;}
.bd-meter-fill{height:100%;border-radius:4px;}
.bd-wh-spark{margin-top:11px;height:34px;}

/* ── table view (every value reachable without a tooltip) ── */
.bd-table-card{background:var(--card);border:1px solid var(--border);border-radius:11px;overflow:hidden;
  flex:1 1 auto;min-height:220px;display:flex;flex-direction:column;}
.bd-table-head{display:flex;align-items:baseline;gap:12px;padding:13px 16px 11px;border-bottom:1px solid var(--border);}
.bd-table-scroll{flex:1 1 auto;min-height:0;overflow:auto;}
table.bd-table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;}
table.bd-table th,table.bd-table td{padding:7px 10px;text-align:right;white-space:nowrap;}
table.bd-table th:first-child,table.bd-table td:first-child{text-align:left;}
table.bd-table thead th{position:sticky;top:0;background:var(--surface-2);color:var(--ink-3);font-size:10px;
  text-transform:uppercase;letter-spacing:.07em;font-weight:700;z-index:1;border-bottom:1px solid var(--border);}
table.bd-table tbody tr{border-bottom:1px solid rgba(255,255,255,.045);cursor:pointer;}
table.bd-table tbody tr:hover{background:rgba(255,255,255,.05);}
table.bd-table tbody tr.is-viewing{background:rgba(0,217,126,.10);}
table.bd-table td.bd-strong{font-weight:700;color:#fff;}
table.bd-table td.bd-goal-hit{color:#57d98a;font-weight:700;}
table.bd-table td.bd-goal-miss{color:#f98080;font-weight:700;}
.bd-caret{font-size:8px;margin-left:4px;vertical-align:1px;opacity:.85;}
.bd-th-goal{display:block;font-size:9px;font-weight:600;color:var(--ink-3);letter-spacing:.04em;
  text-transform:none;margin-top:1px;}
.bd-th-key{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;}
.bd-pill{display:inline-block;min-width:52px;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700;}
.bd-pill.hit{background:rgba(49,196,107,.16);color:#57d98a;}
.bd-pill.miss{background:rgba(239,68,68,.15);color:#f98080;}

@media (max-width:1100px){
  .bd-top{grid-template-columns:repeat(2,1fr);}
  .bd-whgrid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .bd-sheet{inset:0;border-radius:0;}
  .bd-top{grid-template-columns:1fr;}
  #bd-open{font-size:10px;padding:6px 9px;letter-spacing:.03em;}
  .history-modal-head{gap:8px;padding-left:14px;}
}

/* ── STATUS BAR ── */
#status-bar{position:fixed;bottom:0;left:0;right:0;padding:0.3vh 1vw;font-size:clamp(7px,1vmin,13px);color:var(--muted);background:rgba(10,22,40,.85);display:none;gap:1.5vw;align-items:center;}
#status-dot{width:0.8vmin;height:0.8vmin;min-width:6px;min-height:6px;border-radius:50%;background:#555;display:inline-block;margin-right:0.4vw;}
#status-dot.ok{background:var(--green);}
#status-dot.err{background:#ef4444;}

/* ── DUCK RACE TAB ── */
.tab.nav-tab{color:var(--muted);}
#race-panel{display:flex;flex-direction:column;border-radius:8px;background:var(--card);border:1px solid var(--border);}
.race-scores{display:flex;justify-content:space-around;background:rgba(0,0,0,.2);border-bottom:1px solid var(--border);padding:0.8vh 0.5vw;flex-shrink:0;}
.race-score-item{text-align:center;flex:1;}
.race-score-wh{font-size:clamp(9px,1.2vmin,16px);font-weight:800;text-transform:uppercase;letter-spacing:.5px;}
.race-score-num{font-size:clamp(20px,3.6vmin,52px);font-weight:900;color:#fff;line-height:1.1;}
.race-score-goal{font-size:clamp(8px,1.1vmin,14px);color:rgba(255,255,255,0.5);}
.race-scene{position:relative;flex:1;overflow:hidden;min-height:120px;}
.race-sky{position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(180deg,#7ec8e3 0%,#aaddf5 100%);z-index:0;overflow:hidden;}
.race-cloud{position:absolute;background:rgba(255,255,255,.78);border-radius:50%;}
.race-cloud-strip{position:absolute;top:0;left:0;width:200%;height:30px;animation:clouds-scroll 28s linear infinite;}
.race-cloud-strip-slow{position:absolute;top:0;left:0;width:200%;height:30px;animation:clouds-scroll 44s linear infinite;}
.race-grass-back{position:absolute;top:20px;left:0;right:0;height:30px;background:#1e5c12;z-index:1;}
.race-grass-mid{position:absolute;top:25px;left:0;right:0;height:25px;background:#2d7a1e;z-index:2;}
.race-grass-blades{position:absolute;top:12px;left:0;right:0;height:42px;z-index:3;overflow:hidden;}
.race-water-bg{position:absolute;top:50px;left:0;right:0;bottom:0;background:linear-gradient(180deg,#5bbfdf 0%,#2e9bc4 35%,#1570a8 100%);z-index:1;overflow:hidden;}
.race-water-bg::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0px,transparent 14px,rgba(255,255,255,.05) 15px,transparent 16px,transparent 30px);animation:water-flow 3s linear infinite;z-index:0;}
.race-water-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 20%,rgba(180,230,255,.1) 50%,transparent 80%);width:200%;animation:water-sheen-move 7s ease-in-out infinite;z-index:1;}
.race-water-sheen{position:absolute;top:50px;left:0;right:0;height:16px;background:linear-gradient(180deg,rgba(180,230,255,.4) 0%,transparent 100%);z-index:2;}
.race-water-line{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.12);z-index:2;transform-origin:left center;animation:water-line-drift 4s ease-in-out infinite alternate;}
.race-finish-pole{position:absolute;right:46px;top:50px;bottom:0;width:3px;background:#bbb;z-index:6;}
.race-finish-checker{position:absolute;right:35px;top:50px;bottom:0;z-index:7;}
.race-lanes{position:absolute;top:50px;left:0;right:0;bottom:0;z-index:4;}
.race-lane{position:absolute;left:0;right:0;}
.race-lane-sep{position:absolute;bottom:0;left:0;right:0;height:1px;background:rgba(255,255,255,.1);}
.race-duck-wrap{position:absolute;top:50%;transform:translateY(-55%);display:flex;flex-direction:column;align-items:center;transition:left 2s ease;animation:duck-rock 2.4s ease-in-out infinite;z-index:6;}
.race-pace-line{position:absolute;top:0;bottom:0;height:100%;width:3px;z-index:3;transition:left 2s ease;pointer-events:none;}
.race-pace-label{position:absolute;top:4px;left:3px;font-size:clamp(7px,1vmin,14px);font-weight:700;letter-spacing:.05em;opacity:.7;white-space:nowrap;pointer-events:none;}
.race-duck-label{font-size:clamp(8px,1.1vmin,13px);font-weight:800;color:#fff;background:rgba(10,10,10,.78);padding:2px 6px;border-radius:4px;white-space:nowrap;margin-bottom:2px;border:1px solid rgba(255,255,255,.18);}
.race-duck-foam{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:120%;height:8px;background:radial-gradient(ellipse,rgba(255,255,255,.65) 0%,transparent 70%);border-radius:50%;pointer-events:none;}
.race-duck-wake{position:absolute;top:58%;left:-55%;width:52%;height:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3));border-radius:2px;pointer-events:none;}
.race-not-started{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#0a0a0a;color:#666;font-size:clamp(10px,1.5vmin,20px);}
@keyframes duck-rock{0%,100%{transform:translateY(-55%) rotate(-2deg);}50%{transform:translateY(-55%) rotate(2deg);}}
@keyframes water-flow{0%{background-position:0 0;}100%{background-position:0 30px;}}
@keyframes water-sheen-move{0%,100%{transform:translateX(-60%);}50%{transform:translateX(60%);}}
@keyframes water-line-drift{0%{transform:scaleX(1) translateX(0);opacity:.12;}40%{opacity:.22;}100%{transform:scaleX(1.08) translateX(6%);opacity:.1;}}
@keyframes grass-sway{0%,100%{transform:rotate(var(--base-lean,0deg));}30%{transform:rotate(calc(var(--base-lean,0deg) + 6deg));}60%{transform:rotate(calc(var(--base-lean,0deg) - 3deg));}}
@keyframes clouds-scroll{0%{transform:translateX(0);}100%{transform:translateX(-1000px);}}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE VIEW  —  portrait phones only (<=600px wide).
   Desktops, laptops and the TV are wider than this and keep the original
   grid layout untouched. Everything below is scoped to the media query.

   Layout on a phone (top → bottom):
     • FIXED TOP    : the Winchester/Longmont/Ft Myer race-score strip.
                      Tapping it drops the duck-race scene down as an overlay.
     • SCROLLABLE   : Picking panels → Receiving panels → Shippers panel,
                      each full-width and stacked vertically.
     • FIXED FOOTER : the hero/winner cards, looping as a horizontal marquee.
   ══════════════════════════════════════════════════════════════════════ */
@media screen and (max-width:600px),
       screen and (orientation:landscape) and (max-height:500px){

  /* let the page grow and scroll vertically; clip horizontal marquee overflow */
  html,body{
    height:auto;min-height:100%;width:100%;
    overflow-x:hidden;overflow-y:auto;
    font-size:14px;
    -webkit-text-size-adjust:100%;
  }

  /* the screen becomes a normal vertical flow; top/bottom padding leaves
     room for the fixed race header and the fixed marquee footer */
  .screen{
    display:block;height:auto;min-height:100vh;
    grid-template-rows:none;gap:0;
    padding:80px 10px 116px;
    overflow:visible;
  }

  /* ── metric rows stack to a single column ── */
  .row{
    grid-template-columns:1fr !important;
    gap:12px;margin-bottom:12px;overflow:visible;
  }
  #row-bottom{display:block;}
  #shippers-panel{width:100% !important;flex:none !important;}

  .panel{overflow:visible;min-height:auto;margin-bottom:0;}
  .panel-body{overflow:visible;}
  .panel-head{padding:8px 12px;}
  .panel-wh{font-size:14px;}
  .panel-num{font-size:18px;}
  .panel-avghr{font-size:10px;}

  /* operator rows: natural height, comfortable tap-sized spacing */
  .op-row{
    flex:none !important;max-height:none !important;height:auto;
    padding:9px 12px;gap:10px;
  }
  .op-rank,.op-crown{font-size:14px;width:16px;}
  .op-name{font-size:17px;}
  .op-val{font-size:17px;min-width:42px;}
  .op-hr{font-size:11px;min-width:46px;}
  .op-bar-wrap{width:34px;height:4px;}

  /* shippers list goes single-column so 1-15 read straight down */
  .shippers-grid{grid-template-columns:1fr !important;}
  .shippers-col{
    border-right:none;
    border-bottom:1px solid var(--border);
    justify-content:flex-start;
  }
  .shippers-col:last-child{border-bottom:none;}

  /* ══ FIXED TOP : race-score strip + drop-down race scene ══ */
  #race-panel{
    position:fixed !important;top:0;left:0;right:0;
    width:auto !important;flex:none !important;
    z-index:200;border-top:none;border-radius:0 0 12px 12px;
    box-shadow:0 6px 18px rgba(0,0,0,.55);
    max-height:92vh;overflow:hidden;
  }
  #race-panel .race-scores{
    cursor:pointer;position:relative;
    padding:10px 12px 18px;background:var(--card);
    user-select:none;-webkit-user-select:none;
  }
  /* chevron affordance — rotates when the race is expanded */
  #race-panel .race-scores::after{
    content:'▾';position:absolute;left:50%;bottom:2px;
    transform:translateX(-50%);
    font-size:13px;line-height:1;color:var(--muted);
    transition:transform .3s ease;
  }
  #race-panel.expanded .race-scores::after{
    transform:translateX(-50%) rotate(180deg);
  }
  #race-panel .race-score-num{font-size:26px;}
  #race-panel .race-score-wh{font-size:11px;}
  #race-panel .race-score-goal{font-size:10px;}

  /* the race scene (and the pre-7am placeholder) collapse to 0 height
     and animate open when #race-panel gets the .expanded class */
  #race-panel .race-scene,
  #race-panel .race-not-started{
    flex:none !important;        /* override base flex:1 so height below applies */
    height:0 !important;min-height:0 !important;
    overflow:hidden;padding:0 !important;
    transition:height .35s ease;
  }
  #race-panel.expanded .race-scene{height:240px !important;}
  #race-panel.expanded .race-not-started{
    height:120px !important;padding:10px !important;
  }

  /* ══ FIXED FOOTER : hero cards as a looping marquee ══ */
  /* #heroes is a static, clipped container; the inner .hero-track carries the
     animation. The track element persists across data refreshes and resizes
     (only its children are swapped), so the marquee loop is NEVER reset/
     teleported back to the start. */
  #heroes{
    position:fixed;left:0;right:0;bottom:0;
    height:84px;z-index:200;
    display:block !important;
    width:100vw;max-width:100vw;overflow:hidden;
    grid-template-columns:none !important;
    margin:0;padding:6px 0;
    background:var(--navy);border-top:1px solid var(--border);
  }
  #heroes .hero-track{
    display:flex !important;flex-wrap:nowrap;width:max-content;
    height:100%;
    animation:hero-marquee 10.67s linear infinite;
    will-change:transform;
  }
  #heroes .hero-clone{display:flex !important;}
  #heroes .winner-card{
    flex:0 0 auto;width:244px;height:100%;
    margin-right:10px;padding:6px 12px;
    border-radius:8px;
  }
  #heroes .winner-inner{flex:1;min-width:0;}
  #heroes .winner-emoji{font-size:26px;}
  /* tighter letter-spacing so longer labels (RECEIVING/SHIPPING) fit;
     ellipsis is a safety net so a word can never hard-cut mid-letter */
  #heroes .winner-label{
    font-size:10px;letter-spacing:.03em;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;
  }
  #heroes .winner-name{font-size:22px;}
  #heroes .winner-stat{
    font-size:10px;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;
  }
  /* keep the loading spinner from stretching before data arrives */
  #heroes .loading{width:100vw;justify-content:center;}

  /* status bar sits flush at the very bottom, under the marquee footer */
  #status-bar{z-index:201;height:22px;padding:0 12px;align-items:center;}
}
/* identical first/second halves → translateX(-50%) loops seamlessly */
@keyframes hero-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── Was inline in the markup (see the note at the top) ── */
#shippers-panel{flex:2;min-width:0;min-height:0;overflow:hidden;}
#race-panel{flex:1;min-width:0;min-height:0;overflow:hidden;}
#last-fetch-time{margin-left:auto;}