/* Warehouse KPI Snapshot — laid out ONCE, at 1920×1080, and scaled whole to the screen by kpi.js
   (Brad, 2026-10-02: "it all fit on one page"). So every size below is in TV pixels, nothing
   ever scrolls, and a smaller or oddly shaped screen gets the same picture, smaller, with the
   ground filling the margin. Light, like the picture it was drawn from: navy type, a white-to-
   pale-blue ground with teal and blue waves in the corner, green for up. */

:root {
  --navy: #0B2A5B;
  --ink: #1C2B45;
  --soft: #5B6B85;
  --line: rgba(11, 42, 91, .12);
  --card: rgba(255, 255, 255, .82);
  --shape: #8FB8EC;
  --up: #16A34A;
  --down: #DC2626;
  --script: #2D6CC0;
  --ground: linear-gradient(168deg, #FFFFFF 0%, #F3F7FC 38%, #E6F0FA 72%, #DCEAF8 100%);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--ground);
}

/* The 1920×1080 stage; kpi.js sets its scale and centres it. */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  background: var(--ground);
  overflow: hidden;
  visibility: hidden;     /* until kpi.js has scaled it — see fit() */
}
.stage.is-fit { visibility: visible; }
.ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.ground-line { fill: none; stroke: #FFFFFF; stroke-opacity: .7; stroke-width: 2; }

.sheet {
  position: relative;
  height: 100%;
  padding: 52px 72px 34px;
  display: flex;
  flex-direction: column;
}

.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
h1 {
  margin: 0;
  font-size: 84px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
  line-height: 1.02;
}
.states { margin: 14px 0 0; font-size: 28px; font-weight: 600; letter-spacing: .28em; color: var(--navy); }
.states i, .tag i { font-style: normal; color: #2BB673; padding: 0 .35em; }
.motto {
  margin: 4px 24px 0 0;
  font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: 30px;
  line-height: 1.15;
  color: var(--script);
  text-align: center;
  transform: rotate(-6deg);
  opacity: .85;
}

/* THE DECK: one slide wide, the track of slides moved left behind it (kpi.js). The side margins
   are let out and padded back so the cards' shadows are not cut at the deck's edge. */
.deck { flex: 1; min-height: 0; margin: 30px -36px 0; padding: 0 0 20px; overflow: hidden; display: flex; }
.track { flex: 1; min-width: 0; display: flex; transition: transform 1.1s cubic-bezier(.65, 0, .25, 1); will-change: transform; }
.track.no-move { transition: none; }
.cards {
  flex: 0 0 100%;
  min-width: 0;
  min-height: 0;
  padding: 0 36px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.slide-name { margin-left: 28px; padding-left: 28px; border-left: 3px solid #2BB673; letter-spacing: .2em; color: var(--script); }
.dots { margin: 0 24px 6px 0; display: flex; gap: 9px; flex: none; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(11, 42, 91, .18); }
.dots i.is-on { background: var(--navy); }
.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 30px 34px 24px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(11, 42, 91, .09), 0 1px 2px rgba(11, 42, 91, .06);
  /* No backdrop blur (2026-10-13): it repaints the whole card whenever a number changes or the
     deck moves — a flash on a TV's browser — and softens the text on it. */
}
/* A slide about a subject, not a warehouse: the title where the state's letters go. */
.card-head-topic h2 { font-size: 54px; }
.card-head-topic { min-height: 113px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 18px; }
.card-head h2 { margin: 0; font-size: 70px; font-weight: 800; color: var(--navy); line-height: 1; }
.site { margin: 6px 0 0; font-size: 19px; font-weight: 600; color: var(--soft); letter-spacing: .04em; }
.shape { width: 170px; height: 95px; fill: var(--shape); flex: none; }

/* The four rows share the card's height evenly, whatever the screen. */
.row {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 22px;
  border-top: 1px solid var(--line);
}
.icon {
  width: 60px;
  height: 60px;
  flex: none;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.row-text { min-width: 0; flex: 1; }
.label { margin: 0; font-size: 23px; font-weight: 600; color: var(--soft); }
.line { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 20px; }
.value {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.01em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.delta { margin: 0; display: flex; flex-direction: column; line-height: 1.15; }
/* A row with no comparison keeps its (hidden) arrow slot — the display above must not show it. */
.delta[hidden] { display: none; }
.delta b { font-size: 23px; }
.delta span { font-size: 15px; color: var(--soft); }
.delta.is-up b { color: var(--up); }
.delta.is-down b { color: var(--down); }
.delta.is-plain b { color: var(--navy); }
/* A rate against its set point: the number itself goes green or red. */
.value.is-good { color: var(--up); }
.value.is-bad { color: var(--down); }
/* Progress to a goal: a thin bar under the number. */
.bar { height: 12px; margin: 6px 0 4px; border-radius: 6px; background: rgba(11, 42, 91, .1); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--up); transition: width .6s ease; }
.bar i.is-behind { background: #E0A526; }
/* The dashboard's trend line, kept quiet: right of the row, faint. */
.spark { flex: none; width: 150px; height: 58px; margin-right: 4px; opacity: .75; }
.spark-line { fill: none; stroke: var(--script); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark-area { fill: var(--script); opacity: .12; }
.note { margin: 2px 0 0; font-size: 17px; color: var(--soft); }
/* The top shipper: a name, not a number — smaller, and cut short rather than wrapped. */
.row-top .value { font-size: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.row-top .line { flex-wrap: nowrap; }
.row-top .icon { stroke: #C99A1E; }

.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: 4px;
  height: 30px;
  flex: none;
}
/* One line, always: a longer note must never push the cards up (the refresh jump, 2026-10-02). */
.when { margin: 0; font-size: 18px; color: var(--soft); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { flex: none; }
.tag { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: .22em; color: var(--navy); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The fulfillment slide carries a trend line in every row, so its numbers sit a size down and
   nothing wraps under them. */
.card-head-topic h2 { font-size: 50px; white-space: nowrap; }
[data-slide="yesterday"] .line { flex-wrap: nowrap; gap: 2px 16px; }
[data-slide="yesterday"] .value { font-size: 54px; }
[data-slide="yesterday"] .delta b { font-size: 20px; white-space: nowrap; }
[data-slide="yesterday"] .delta span { white-space: nowrap; }
[data-slide="yesterday"] .note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-slide="yesterday"] .spark { width: 120px; height: 52px; }