.dispatch {
  --machine-paper: color-mix(in srgb, var(--arrival-text) 12%, var(--arrival-bg));
  --machine-ink: var(--arrival-text);
  --truck-rubber: var(--arrival-bg);
  margin: 0;
  padding: 18px 24px;
  min-width: 0;
  background: var(--arrival-bg);
  color: var(--arrival-text);
  border-left: 1px solid color-mix(in srgb, var(--arrival-text) 20%, transparent);
}
:root[data-mode="light"] .dispatch { --truck-rubber: var(--color-text); }
.dispatch-caption { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--arrival-muted); }
.dispatch svg { display: block; width: 100%; height: 190px; }
/* The loads empty-state semi reuses this scene outside .dispatch (FS-1100), so it takes the
   same machine tokens from the page surface instead of SVG default black. */
.empty-state-art .dispatch-scene {
  --machine-paper: color-mix(in srgb, var(--color-text) 8%, var(--color-surface));
  --machine-ink: var(--color-text);
  --truck-rubber: var(--color-text);
}
.dispatch .iso-fill, .empty-state-art .dispatch-scene .iso-fill { fill: var(--machine-paper); }
.dispatch .iso-top, .empty-state-art .dispatch-scene .iso-top { fill: color-mix(in srgb, var(--machine-ink) 7%, var(--machine-paper)); }
.dispatch .iso-shade, .empty-state-art .dispatch-scene .iso-shade { fill: var(--machine-ink); fill-opacity: .14; }
.dispatch .iso-shade[data-shade="1"], .empty-state-art .dispatch-scene .iso-shade[data-shade="1"] { fill-opacity: .22; }
.dispatch .iso-shade[data-shade="2"], .empty-state-art .dispatch-scene .iso-shade[data-shade="2"] { fill-opacity: .32; }
.dispatch .iso-shade[data-shade="3"], .empty-state-art .dispatch-scene .iso-shade[data-shade="3"] { fill-opacity: .4; }
.dispatch .iso-line, .empty-state-art .dispatch-scene .iso-line { fill: none; stroke: var(--machine-ink); stroke-width: .65; stroke-linejoin: round; }
.dispatch [data-tone="faint"], .empty-state-art .dispatch-scene [data-tone="faint"] { stroke-opacity: .16; }
.dispatch [data-tone="lo"], .empty-state-art .dispatch-scene [data-tone="lo"] { stroke-opacity: .28; }
.dispatch [data-tone="mid"], .empty-state-art .dispatch-scene [data-tone="mid"] { stroke-opacity: .5; }
.dispatch [data-tone="hi"], .empty-state-art .dispatch-scene [data-tone="hi"] { stroke-opacity: .85; }
.dispatch .truck-glass .iso-fill, .dispatch .truck-glass .iso-top,
.dispatch .truck-tire .iso-fill, .dispatch .truck-tire .iso-top,
.empty-state-art .dispatch-scene .truck-glass .iso-fill, .empty-state-art .dispatch-scene .truck-glass .iso-top,
.empty-state-art .dispatch-scene .truck-tire .iso-fill, .empty-state-art .dispatch-scene .truck-tire .iso-top { fill: var(--truck-rubber); }
.dispatch[data-truck-focus="cab"] .truck-cab:not(.truck-glass) .iso-fill,
.dispatch[data-truck-focus="cab"] .truck-cab:not(.truck-glass) .iso-top,
.dispatch[data-truck-focus="fuel"] .truck-fuel .iso-fill,
.dispatch[data-truck-focus="fuel"] .truck-fuel .iso-top,
.dispatch[data-truck-focus="loads"] .truck-loads .iso-fill,
.dispatch[data-truck-focus="loads"] .truck-loads .iso-top { fill: var(--kit-mark-accent); }
.dispatch .truck-zone .iso-fill, .dispatch .truck-zone .iso-top { transition: fill 180ms ease; }
.dispatch-controls { display: flex; gap: 4px; border-bottom: 1px solid color-mix(in srgb, var(--arrival-text) 25%, transparent); }
.dispatch-controls button { flex: 1; min-height: 44px; padding: 8px; font: inherit; font-weight: 600; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--arrival-muted); cursor: pointer; }
.dispatch-controls button[aria-selected="true"] { color: var(--arrival-text); border-bottom-color: var(--arrival-text); background: color-mix(in srgb, var(--arrival-text) 8%, transparent); }
.dispatch-controls button:focus-visible, .dispatch-summary:focus-visible, .dispatch-actions a:focus-visible { outline: 2px solid var(--arrival-text); outline-offset: 2px; }
.dispatch-summary { padding-top: 14px; min-height: 115px; }
.dispatch-metrics { display: flex; gap: 16px; margin: 0; }
.dispatch-metrics > div { flex: 1; min-width: 0; display: flex; flex-direction: column-reverse; gap: 4px; }
.dispatch-metrics dt { font-size: 12px; line-height: 1.3; color: var(--arrival-muted); }
.dispatch-metrics dd { margin: 0; font-size: 22px; font-weight: 600; font-family: var(--font-numeric); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dispatch-message { margin: 0; min-height: 55px; color: var(--arrival-muted); font-size: 13px; }
.dispatch-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.dispatch-actions a { display: inline-flex; gap: 10px; align-items: center; min-height: 28px; color: var(--arrival-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.dispatch-actions a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .dispatch .truck-zone .iso-fill, .dispatch .truck-zone .iso-top { transition: none; } }
@media (max-width: 720px) {
  .dispatch { border-left: 0; border-top: 1px solid var(--color-border); padding: 12px 20px 16px; }
  .dispatch svg { height: 140px; }
  .dispatch-caption span:last-child { display: none; }
  .dispatch-metrics dd { font-size: 21px; }
  .dispatch-actions a { min-height: 40px; }
  .dispatch-summary { min-height: 120px; }
}

/* Window contents share the glass's projected plane and are clipped to its frame. */
.dispatch-scene { overflow: hidden; }
.dispatch-scene-note { font-size: 11px; min-height: 16px; margin: 0 0 6px; color: var(--arrival-muted); }
.driver-reflection { fill: var(--arrival-bg); }
.driver-distant { fill: var(--arrival-text); opacity: .12; }
.driver-seat, .driver-dashboard, .driver-hair { fill: var(--arrival-text); opacity: .4; }
.driver-skin { fill: var(--arrival-text); }
.driver-jacket, .driver-cap { fill: var(--kit-mark-accent); stroke: var(--arrival-text); stroke-width: .15; }
.driver-collar { fill: var(--arrival-bg); }
.driver-belt { fill: var(--arrival-text); opacity: .7; }
.driver-detail, .driver-eye { fill: none; stroke: var(--arrival-bg); stroke-width: .18; stroke-linecap: round; }
.driver-steering { fill: none; stroke: var(--arrival-text); stroke-width: .5; }
.driver-glass-edge { fill: none; stroke: var(--arrival-text); stroke-width: .25; }
.driver-head, .driver-arm { transform-box: fill-box; transform-origin: 70% 90%; }
.dispatch[data-truck-focus="cab"] svg[data-moving="true"] .driver-head { animation: driver-road 4.8s ease-in-out infinite; }
.dispatch[data-truck-focus="cab"] svg[data-moving="true"] .driver-arm { animation: driver-steer 3.6s ease-in-out infinite; }
@keyframes driver-road { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1.5deg) translateY(.08px); } }
@keyframes driver-steer { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .dispatch .driver-head, .dispatch .driver-arm { animation: none !important; } }

/* Give the window's taller physical plane room to fill the focused view. */
.dispatch .dispatch-scene { transition: height 650ms cubic-bezier(.2,.7,.2,1); }
.dispatch[data-truck-focus="cab"] .dispatch-scene { height: 280px; }
@media (max-width:720px) { .dispatch[data-truck-focus="cab"] .dispatch-scene { height: 210px; } }
@media (prefers-reduced-motion:reduce) { .dispatch .dispatch-scene { transition: none; } }

.driver-pupil { fill: var(--arrival-bg); stroke: none; }