/* ===========================================================================
   SetuHaul Operations — layout and the Facility Board.

   The board is the hero. Everything else is deliberately quiet so that the
   moment a coordinator's eye lands on the board, nothing competes with it.
   =========================================================================== */

/* -------------------------------------------------------------- sign in */

.signin {
  min-height: 100dvh;
  display: grid; grid-template-columns: 1.1fr .9fr;
  background: var(--concrete);
}
.signin__pitch {
  position: relative; overflow: hidden;
  padding: var(--s-8) var(--s-7);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--asphalt); color: #F0ECE5;
}
/* Faint dock-board hatching behind the pitch panel. */
.signin__pitch::after {
  content: ""; position: absolute; inset: 0; opacity: .07;
  background: var(--hazard); pointer-events: none;
}
.signin__mark {
  display: flex; align-items: center; gap: var(--s-3);
  position: relative; z-index: 1;
}
.signin__logo {
  display: block; border-radius: 11px;
  box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12);
}
.signin__word {
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.05;
}
.signin__word span { color: var(--hi-vis-pure); }
.signin__dept {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #A79F94;
  margin-top: 2px;
}
.signin__foot { position: relative; z-index: 1; }
.signin__lights { display: flex; gap: 9px; margin-bottom: var(--s-4); }
.signin__lights i {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.07);
}
.signin__lights i:nth-child(1) { background: #4CAF77; }
.signin__lights i:nth-child(2) { background: var(--hi-vis-pure); }
.signin__lights i:nth-child(3) { background: #C25450; }
.signin__lede {
  position: relative; z-index: 1; max-width: 30ch;
  font-family: var(--font-display); font-size: var(--t-display);
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
}
.signin__lede em { font-style: normal; color: var(--hi-vis-pure); }
.signin__facts {
  display: flex; gap: var(--s-6);
  border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--s-4);
}
.signin__fact b {
  display: block; font-family: var(--font-data); font-size: var(--t-h2);
  font-variant-numeric: tabular-nums;
}
.signin__fact span { font-size: var(--t-micro); color: #A79F94;
                     letter-spacing: var(--track-caps); text-transform: uppercase; }

.signin__form { display: grid; place-items: center; padding: var(--s-6); }
.signin__box { width: 100%; max-width: 380px; }
.signin__boxlogo {
  display: block; border-radius: 10px; margin-bottom: var(--s-4);
  box-shadow: 0 6px 18px rgba(20, 52, 79, .25);
}
.signin__box h1 { font-size: var(--t-h1); margin-bottom: var(--s-1); }
.signin__box p.sub { color: var(--ink-3); font-size: var(--t-small);
                     margin: 0 0 var(--s-5); }

.field { display: block; margin-bottom: var(--s-4); }
.field > .label { display: block; margin-bottom: 6px; }
.input {
  width: 100%; min-height: 42px; padding: 0 var(--s-3);
  background: var(--concrete-lit); color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: var(--r-2);
  transition: border-color var(--dur-1) var(--ease);
}
.input:focus { border-color: var(--signal); outline: none; }
.input--bad { border-color: var(--stop); }

.devnote {
  margin-top: var(--s-5); padding: var(--s-3);
  border: 1px dashed var(--hi-vis-edge); border-radius: var(--r-2);
  background: var(--hi-vis-wash); color: var(--hi-vis);
  font-size: var(--t-micro); line-height: 1.6;
}
.devnote code { font-family: var(--font-data); font-weight: 600; }

@media (max-width: 900px) {
  .signin { grid-template-columns: 1fr; }
  .signin__pitch { display: none; }
}

/* --------------------------------------------------------------- app bar */

.appbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--s-5);
  height: var(--appbar-h); padding: 0 var(--s-5);
  background: var(--asphalt); color: #F0ECE5;
}
.appbar__mark {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-h3);
  letter-spacing: -.02em;
}
.appbar__mark span.sub {
  font-family: var(--font-body); font-weight: 500; font-size: var(--t-micro);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: #9C948A;
  padding-left: var(--s-2); border-left: 1px solid rgba(255,255,255,.2);
}
.appbar__ctx {
  display: flex; align-items: center; gap: var(--s-3); margin-left: var(--s-2);
}
.ctx-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: var(--r-2);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-data); font-size: var(--t-micro); color: #D6D0C7;
}
.ctx-chip b { color: #F5F1EA; font-weight: 600; }
.alertchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--r-2);
  background: var(--stop); color: #fff;
  font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.alertchip:hover { background: #A93226; }

.appbar__spacer { flex: 1; }
.appbar__right { display: flex; align-items: center; gap: var(--s-3); }

.synced { text-align: right; line-height: 1.25; }
.synced__k { font-size: var(--t-micro); color: #9C948A;
             letter-spacing: var(--track-caps); text-transform: uppercase; }
.synced__v { font-family: var(--font-data); font-size: var(--t-small); color: #E4DFD7; }

.userchip {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 5px 10px 5px 5px; border-radius: var(--r-full);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
}
.userchip__av {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  background: var(--signal-bright); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-micro);
}
.userchip__id { line-height: 1.2; }
.userchip__name { font-size: var(--t-small); font-weight: 600; color: #F5F1EA; }
.userchip__role {
  font-size: 9.5px; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--hi-vis-pure); font-weight: 700;
}
.appbar .btn--ghost { color: #D6D0C7; }
.appbar .btn--ghost:hover { background: rgba(255,255,255,.09); }
.appbar .btn--secondary {
  background: rgba(255,255,255,.07); color: #F0ECE5;
  border-color: rgba(255,255,255,.16);
}

/* ---------------------------------------------------------------- layout */

.shell { max-width: var(--maxw); margin: 0 auto; padding: var(--s-5); }

.section { margin-bottom: var(--s-6); }
.section__head {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.section__title {
  font-family: var(--font-display); font-size: var(--t-h2); font-weight: 700;
  letter-spacing: -.02em;
}
.section__note { color: var(--ink-3); font-size: var(--t-small); }
.section__spacer { flex: 1; }

/* ------------------------------------------------------------ KPI cards
   Reading order is enforced by size: value, then label, then delta. */

.kpis {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow-anchor: none;   /* never let the browser scroll us on re-render */
}
/* The guarantee metric is the reason this product exists. It reads first and
   at a distance; the other eight are supporting evidence. */
.kpi--hero { grid-column: span 2; grid-row: span 2; }
.kpi--hero .kpi__value { font-size: 76px; }
.kpi--hero .kpi__label { font-size: var(--t-h3); font-weight: 600; margin-top: var(--s-3); }
.kpi--hero .kpi__spark { width: 150px; height: 40px; bottom: 40px; }
.kpi--hero .kpi__claim {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; max-width: 34ch;
}
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi--hero { grid-column: span 3; grid-row: span 1; }
  .kpi--hero .kpi__value { font-size: 52px; }
}
@media (max-width: 820px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi--hero { grid-column: span 2; }
}
.kpi {
  position: relative;
  padding: var(--s-4);
  background: var(--concrete-lit);
  border: 1px solid var(--rule); border-radius: var(--r-3);
  box-shadow: var(--lift-1);
}
/* State is carried by a left rail, not by tinting the whole card — tinted
   cards make a dashboard look like a mood board.
   The rail is a BORDER rather than an overflow-clipped pseudo-element: the
   card also hosts the "why this matters" tooltip, which renders above the
   button and therefore outside the card. Clipping the card clipped the
   tooltip down to a black sliver at the card's top edge. */
.kpi { border-left: 3px solid var(--ink-4); }
.kpi--clear { border-left-color: var(--clearance); }
.kpi--attn  { border-left-color: var(--hi-vis-pure); }
.kpi--stop  { border-left-color: var(--stop); }
/* Tint is reserved for the hero and for anything actually wrong. A healthy
   supporting metric stays on the plain surface, otherwise nine tinted cards
   read as one green wash and the hierarchy collapses. */
.kpi--hero.kpi--clear { background: linear-gradient(120deg, var(--clearance-wash), var(--concrete-lit) 62%); }
.kpi--hero.kpi--attn  { background: linear-gradient(120deg, var(--hi-vis-wash),    var(--concrete-lit) 62%); }
.kpi--hero.kpi--stop  { background: linear-gradient(120deg, var(--stop-wash),      var(--concrete-lit) 62%); }
.kpi--attn:not(.kpi--hero) { background: var(--hi-vis-wash); }
.kpi--stop:not(.kpi--hero) { background: var(--stop-wash); }

.kpi__top { display: flex; align-items: flex-start; justify-content: space-between; }
.kpi__value {
  font-family: var(--font-display); font-weight: 800;
  font-size: 34px; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.kpi--clear .kpi__value { color: var(--clearance); }
.kpi--stop  .kpi__value { color: var(--stop); }
.kpi--attn  .kpi__value { color: var(--hi-vis); }
.kpi__unit { font-size: 16px; font-weight: 700; margin-left: 2px; color: var(--ink-3); }
.kpi__label { margin-top: 6px; font-size: var(--t-small); color: var(--ink-2); font-weight: 500; }

.kpi__why {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
  border: 1px solid var(--rule); background: var(--concrete);
  color: var(--ink-4); font-size: 11px; font-weight: 700;
  display: grid; place-items: center; cursor: help;
}
.kpi__why:hover { color: var(--ink-2); border-color: var(--ink-4); }

.kpi__delta {
  display: flex; align-items: center; gap: 5px;
  margin-top: var(--s-3); padding-top: var(--s-2);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-data); font-size: var(--t-micro);
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.kpi__delta b { font-weight: 600; }
.kpi__delta--up   b { color: var(--stop); }
.kpi__delta--down b { color: var(--clearance); }
.kpi__delta--flat { color: var(--ink-4); }
.kpi__delta--flat b { color: var(--ink-4); font-weight: 500; }

/* Sparkline sits behind the value, low contrast — texture, not a chart. */
.kpi__spark { position: absolute; right: 0; bottom: 26px; width: 96px; height: 26px;
              opacity: .5; pointer-events: none; }

/* ==========================================================================
   THE FACILITY BOARD — the signature element.
   Treated as a physical dock board: enamel dock plates down the left, a time
   ruler across the top, placards for shipments, hazard tape for blocked time,
   and a ghost layer showing what the previous plan had.
   ========================================================================== */

.board {
  background: var(--concrete-lit);
  border: 1px solid var(--rule); border-radius: var(--r-3);
  box-shadow: var(--lift-2); overflow: hidden;
}

.board__bar {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--concrete);
}
.board__bar .spacer { flex: 1; }

/* Snapshot switcher — a first-class segmented control, not floating pills. */
.snapshots {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--concrete-deep); border: 1px solid var(--rule);
  border-radius: var(--r-2);
}
.snap {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 12px; border-radius: var(--r-1);
  font-size: var(--t-micro); color: var(--ink-3);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  white-space: nowrap;
}
.snap b {
  font-family: var(--font-body); font-weight: 700; font-size: var(--t-small);
  color: var(--ink-2); letter-spacing: 0;
}
.snap time { font-family: var(--font-data); font-size: 10.5px; }
.snap:hover { background: rgba(0,0,0,.04); }
.snap[aria-pressed="true"] { background: var(--asphalt); }
.snap[aria-pressed="true"] b { color: #F5F1EA; }
.snap[aria-pressed="true"] time { color: var(--hi-vis-pure); }

.diff-toggle { display: inline-flex; align-items: center; gap: var(--s-2); }
.switch {
  position: relative; width: 34px; height: 20px; flex: 0 0 34px;
  background: var(--concrete-deep); border: 1px solid var(--rule);
  border-radius: var(--r-full); transition: background var(--dur-2) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink-4); transition: transform var(--dur-2) var(--ease),
                                         background var(--dur-2) var(--ease);
}
.diff-toggle[aria-pressed="true"] .switch { background: var(--signal); border-color: var(--signal); }
.diff-toggle[aria-pressed="true"] .switch::after { transform: translateX(14px); background: #fff; }
.diff-toggle span { font-size: var(--t-small); color: var(--ink-2); font-weight: 500; }

/* --- the grid itself --- */

.board__scroll { overflow-x: auto; overflow-y: hidden; }
.board__grid { min-width: 1040px; position: relative; }
.board__grid--diff .lane__track { height: 62px; }
.board__grid--diff .chip { top: 6px; }

.ruler {
  display: grid; grid-template-columns: var(--board-label-w) 1fr;
  position: sticky; top: 0; z-index: 12;
  background: var(--concrete-lit); border-bottom: 1px solid var(--rule);
}
.ruler__corner {
  position: sticky; left: 0; z-index: 3;
  background: var(--concrete-lit); border-right: 1px solid var(--rule);
  display: flex; align-items: flex-end; padding: 0 var(--s-3) 6px;
}
.ruler__track { position: relative; height: 44px; }
.ruler__hour {
  position: absolute; bottom: 3px; transform: translateX(-50%);
  font-family: var(--font-data); font-size: 10.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ruler__tick { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--rule); }
.ruler__tick--major { height: 10px; background: var(--ink-4); }

.lane {
  display: grid; grid-template-columns: var(--board-label-w) 1fr;
  border-bottom: 1px solid var(--rule-soft);
}
.lane:last-child { border-bottom: 0; }
.lane:hover .lane__track { background: rgba(31,78,121,.045); }
.lane:hover .plate { background: var(--signal-wash); border-color: var(--signal); }

/* Enamel dock plate. Physical, stamped, slightly recessed. */
.plate {
  position: sticky; left: 0; z-index: 8;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: var(--s-2) var(--s-3);
  background: var(--concrete-lit);
  border-right: 1px solid var(--rule);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.plate__id {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: -.01em; line-height: 1;
}
.plate__type {
  font-size: 10px; color: var(--ink-4); font-weight: 500;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
}

.lane__track {
  position: relative; height: 48px;
  background-image: linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  transition: background-color var(--dur-1) var(--ease);
}

/* Blocked / unavailable time — hazard tape, exactly as painted on a dock. */
.blocked {
  position: absolute; top: 0; bottom: 0;
  background: var(--hazard-soft);
  border-left: 2px solid var(--hi-vis-pure);
  border-right: 2px solid var(--hi-vis-pure);
}
.blocked__tag {
  position: absolute; top: 3px; left: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hi-vis); background: var(--concrete-lit);
  padding: 1px 4px; border-radius: 2px; white-space: nowrap;
}

/* Conflict — overlapping assignments, hatched in stop red. */
.conflict {
  position: absolute; top: 0; bottom: 0; z-index: 6;
  background: var(--conflict-hatch);
  border: 1.5px solid var(--stop); border-radius: var(--r-1);
  pointer-events: none;
}

/* The now line. Hi-vis, full height, with a time flag. */
.nowline {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 10;
  background: var(--hi-vis-pure); pointer-events: none;
}
.nowline::before {
  content: ""; position: absolute; top: -4px; left: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--hi-vis-pure);
}
.nowflag {
  position: absolute; z-index: 13; top: 1px; transform: translateX(-50%);
  padding: 2px 6px; border-radius: var(--r-1);
  background: var(--hi-vis-pure); color: var(--asphalt);
  font-family: var(--font-data); font-size: 10px; font-weight: 700;
  white-space: nowrap;
}

/* --- shipment placard --- */

.chip {
  position: absolute; top: 5px; height: 36px; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px; border-radius: var(--r-2);
  border: 1px solid transparent;
  color: #fff; overflow: hidden; white-space: nowrap;
  box-shadow: var(--lift-1);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--lift-2); z-index: 9; }
.chip__id {
  font-family: var(--font-data); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.chip__meta { font-size: 11px; opacity: .9; overflow: hidden; text-overflow: ellipsis;
              font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.chip--scheduled { background: var(--signal); border-color: var(--signal-deep); }
.chip--frozen {
  background: var(--concrete-deep); color: var(--ink-2);
  border-color: var(--ink-4); border-style: dashed;
}
.chip--moved  { background: var(--hi-vis-pure); color: var(--asphalt);
                border-color: #B8770B; }

/* Running late against its booked window is a "pay attention", not a "stop".
   Red fill is reserved for genuine conflicts, otherwise a board where nothing
   is broken still reads as an emergency and the signal is lost. The red left
   edge carries the lateness without shouting. */
.chip--late   { background: var(--hi-vis-wash); color: var(--ink);
                border-color: var(--hi-vis-edge);
                box-shadow: inset 3px 0 0 var(--stop), var(--lift-1); }
.chip--late .chip__meta { opacity: .7; }

/* Ghost: where this shipment sat in the previous plan. */
.ghost {
  position: absolute; bottom: 2px; height: 12px; z-index: 3;
  border: 1px dashed var(--ink-4); border-radius: 3px;
  background: repeating-linear-gradient(45deg,
      rgba(107,122,132,.14) 0 3px, transparent 3px 6px);
  display: flex; align-items: center; gap: 4px; padding: 0 4px;
  font-family: var(--font-data); font-size: 9px; color: var(--ink-3);
  overflow: hidden; white-space: nowrap; line-height: 1;
}
.ghost__id { text-decoration: line-through; opacity: .75; }
.ghost__to { color: var(--hi-vis); font-weight: 700; }
/* Movement indicator between ghost and current position. */
.moveline {
  position: absolute; height: 2px; z-index: 4; top: 26px;
  background: repeating-linear-gradient(90deg,
      var(--hi-vis-pure) 0 5px, transparent 5px 9px);
  pointer-events: none;
}
.moveline::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 6px solid var(--hi-vis-pure);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}

/* Hover card for a shipment. */
.hovercard {
  position: fixed; z-index: 130; width: 260px;
  background: var(--concrete-lit); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-2);
  box-shadow: var(--lift-3); padding: var(--s-3);
  pointer-events: none; font-size: var(--t-small);
  animation: rise var(--dur-1) var(--ease);
}
.hovercard__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); margin-bottom: var(--s-2);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule-soft);
}
.hovercard__id { font-family: var(--font-data); font-weight: 700; font-size: var(--t-body); }
.hovercard__row { display: flex; justify-content: space-between; gap: var(--s-3); padding: 2px 0; }
.hovercard__k { color: var(--ink-3); font-size: var(--t-micro); }
.hovercard__v { font-family: var(--font-data); font-size: var(--t-micro); font-variant-numeric: tabular-nums; }

/* Board footer: legend + solver result. */
.board__foot {
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule); background: var(--concrete);
  font-size: var(--t-micro); color: var(--ink-3);
}
.legend { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.legend b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink-2); }
.legend i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.solverline { margin-left: auto; font-family: var(--font-data); color: var(--ink-2); }
.solverline b { color: var(--ink); font-weight: 700; }
.solverline .bad { color: var(--stop); font-weight: 700; }

/* ---------------------------------------------------------------- panels */

.cols { display: grid; gap: var(--s-5); grid-template-columns: 1fr 1fr; }
@media (max-width: 1180px) { .cols { grid-template-columns: 1fr; } }

.panel {
  background: var(--concrete-lit); border: 1px solid var(--rule);
  border-radius: var(--r-3); box-shadow: var(--lift-1); overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule-soft);
}
.panel__head .spacer { flex: 1; }
.panel__scroll { max-height: 340px; overflow-y: auto; }

table { width: 100%; border-collapse: collapse; }
th {
  position: sticky; top: 0; z-index: 2; text-align: left;
  padding: var(--s-2) var(--s-4);
  background: var(--concrete-lit); border-bottom: 1px solid var(--rule);
  font-size: var(--t-micro); font-weight: 600; color: var(--ink-3);
  letter-spacing: var(--track-caps); text-transform: uppercase;
}
td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule-soft);
     font-size: var(--t-small); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--concrete); }
td.num, td .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.t-sub { color: var(--ink-3); font-size: var(--t-micro); }

.feed-row td { padding: var(--s-2) var(--s-4); }
.evt {
  display: inline-block; min-width: 78px;
  font-family: var(--font-data); font-size: 10.5px; font-weight: 700;
  letter-spacing: .03em;
}
.evt--shown { color: var(--ink-3); }
.evt--held  { color: var(--hi-vis); }
.evt--booked, .evt--confirmed { color: var(--clearance); }
.evt--denied, .evt--no_feasible_slot, .evt--escalated { color: var(--stop); }
.evt--schedule_run { color: var(--signal); }

/* --------------------------------------------------------------- responsive
   Dashboard is responsive to 1280 and remains usable at 1024. */

@media (max-width: 1280px) {
  .shell { padding: var(--s-4); }
}
@media (max-width: 1024px) {
  .appbar { gap: var(--s-3); padding: 0 var(--s-3); }
  .appbar__ctx .ctx-chip:nth-child(n+2) { display: none; }
  .synced { display: none; }
  .board__bar { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .toasts { left: var(--s-3); right: var(--s-3); bottom: var(--s-3); }
  .toast { max-width: none; }
}

/* Facility switcher — each facility is its own capacity world. */
.ctx-chip--select { padding: 0; }
.ctx-chip--select select {
  appearance: none; border: 0; background: transparent; color: inherit;
  font: inherit; font-weight: 700; padding: 6px 26px 6px 10px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A79F94' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.ctx-chip--select select:focus { outline: 2px solid var(--signal); border-radius: 6px; }