/*
FleetLab Playground styles. Tokens, type and motion follow design section 8; layout follows design section 7.2.
Interface modules use these classes (and write text only through textContent):

Shell        .fl-app[data-phone-group="now|charts|across"][data-mode="learn|sandbox|experiment"]  .fl-strip
             .fl-strip__full .fl-strip__short .fl-topbar .fl-modes .fl-clock .fl-knobs[data-open] .fl-knobs__run
             .fl-knobs-toggle .fl-map .fl-map__stamp .fl-transport .fl-transport__strips .fl-side .fl-now .fl-now__row
             .fl-across .fl-segmented .fl-charts .fl-charts__set .fl-charts__wide .fl-chart .fl-chart__summary
             .fl-footer .fl-group (a row of related buttons) .fl-contents (a wrapper without its own box)
Surfaces     .fl-panel .fl-panel-alt .fl-drawer[data-open] .fl-inspector .fl-popover[data-open] .fl-tooltip[data-open]
Controls     .fl-button .fl-button--primary .fl-field .fl-field--changed .fl-field--invalid .fl-field__note
Registers    .fl-chip-replay (filled) .fl-chip-across (outlined) .fl-limits-chip
Verdict      .fl-verdict .fl-teaching-chip .fl-verdict__footer
             .fl-verdict-chip[data-status="pass|cond|hold|invalid|neutral"] .fl-verdict-chip__glyph .fl-verdict-chip__word
States       .fl-stale .fl-absent .fl-error .fl-error__slot .fl-unserved
Scrollers    .fl-scroll (tables, the depot board and code scroll inside it) .fl-table .fl-board .fl-code
Text         .fl-mono .fl-title .fl-muted .fl-small-label .fl-learn-text .fl-sr-only
Map and SVG  .fl-yard .fl-route-highway__casing .fl-route-highway__centre .fl-route-local .fl-route--congested
             .fl-chevron .fl-depot-tile .fl-rider-ring .fl-glyph-edge .fl-glyph-ring .fl-car (one mark per driving car)
             .fl-fam-rider .fl-fam-empty .fl-fam-available .fl-fam-depot (set color; glyphs fill with currentColor)
             .fl-pinned-car (the pinned glyph, clickable) .fl-hit (a transparent pointer target)
             .fl-chart__grid .fl-chart__axis .fl-chart__line .fl-chart__band .fl-chart__cursor .fl-hatch-line
             .fl-map-legend (swatch and word per state family)
Isometric    .fl-iso (the canvas and its overlay) .fl-iso__canvas .fl-iso__overlay (HTML labels over the canvas: every word)
             .fl-iso__label .fl-iso__label--area .fl-iso__label--depot .fl-iso__label--route .fl-iso__label--local
             .fl-iso__plate .fl-iso__leader .fl-iso__text .fl-iso__numbers .fl-iso__count .fl-iso__pin .fl-iso__pick
Walkthrough  .fl-ledger (what the beat shows, a tab stop because it scrolls) .fl-ledger__beat .fl-ledger__prepare
             .fl-ledger__figures .fl-ledger__figure .fl-ledger__foot (the ticker, pinned to the ledger's bottom edge)
             .fl-ledger__value (32 px mono) .fl-ledger__table .fl-ticker .fl-ticker__line .fl-rail (one row of controls)
             .fl-reading-card  on .fl-app[data-present="true"] the knobs, the side column and the chart row are hidden
             .fl-registry (the metric registry in two registers) .fl-hourly (two charts by hour, side by side)
             .fl-readout (the verdict in gate order, on .fl-verdict) .fl-refusals (what this page is not)
Lists        .fl-flow (ordered steps as an arrow flow, no number markers) .fl-flow__arrow (aria-hidden) .fl-list-plain .fl-situation__proxy
Transport    .fl-scrubber .fl-scrubber__band (style --warmup: fraction) .fl-scrubber__input .fl-scrubber__ticks
Motion       :root[data-motion="reduce|full"] is the in-app override; without it the system setting applies.
             A closed drawer, sheet or popover also gets the inert attribute from the interface.
*/

:root {
  color-scheme: light dark;

  --ground: #F7F8FA;
  --panel: #FFFFFF;
  --panel-alt: #EEF1F5;
  --ink: #14181F;
  --muted: #5C6673;
  --faint: #8A93A0;
  --faint-text: #666D77;
  --rule: #DDE2E8;
  --rule-strong: #C3CBD5;
  --accent: #1F5FD4;
  --accent-soft: #E8EEFB;
  --pass: #2C784C;
  --pass-bg: #E4F0E9;
  --cond: #935F00;
  --cond-bg: #F6EDDA;
  --hold: #C0392B;
  --hold-bg: #F8E6E3;
  --invalid: #5C6673;
  --invalid-bg: #E7EAEE;

  --car-rider: #2a78d6;
  --car-empty: #eb6834;
  --car-available: #1baf7a;
  --car-depot: #eda100;

  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 120ms;
  --dur-tooltip: 160ms;
  --dur-drawer: 240ms;

  --gutter: 16px;
  --target: 44px;
  /* Phone strip height: the 44 px button, 8 px padding above and below, a 1 px rule. Overlays start below it. */
  --strip-block: 61px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0F1319;
    --panel: #161B23;
    --panel-alt: #1C222C;
    --ink: #E6EAF0;
    --muted: #9BA5B4;
    --faint: #6E7885;
    --faint-text: #9BA5B4;
    --rule: #262D38;
    --rule-strong: #38414F;
    --accent: #7BA5F0;
    --accent-soft: #1A2437;
    --pass: #6FBF8E;
    --pass-bg: #16281E;
    --cond: #D9A441;
    --cond-bg: #2B2314;
    --hold: #E8776A;
    --hold-bg: #2E1917;
    --invalid: #9BA5B4;
    --invalid-bg: #1F252E;

    --car-rider: #3987e5;
    --car-empty: #d95926;
    --car-available: #199e70;
    --car-depot: #c98500;
  }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
}

img, svg, canvas { max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

.fl-mono, .fl-clock, input[type="number"], .fl-table td, .fl-table th {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.fl-title { font-weight: 600; }
.fl-muted { color: var(--muted); }
.fl-small-label { color: var(--faint-text); font-size: 12px; }
.fl-learn-text { font-size: 16px; }

.fl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Focus: a 2 px ring with a 2 px ground-coloured offset (design 7.7). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ground);
}

/* Touch targets of at least 44 px. */
.fl-button, .fl-segmented button, .fl-knobs-toggle, .fl-strip__short, input, select, summary {
  min-height: var(--target);
  min-width: var(--target);
}
/* A disclosure summary stays a list item so its marker shows; block padding centres one line in the 44 px target. */
summary {
  display: list-item;
  padding-block: 12px;
  padding-block: calc((var(--target) - 1lh) / 2);
  cursor: pointer;
}

/* Teaching-model strip (design H-1): no rule on this page may hide it, and it stacks above every overlay. */
.fl-strip, .fl-strip[hidden] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: sticky;
  top: 0;
  z-index: 80;
  padding-block: 8px;
  background: var(--panel-alt);
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
}

/* Shell: phone first (below 768 px), one column. */

.fl-app {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "strip" "top" "map" "transport" "segmented" "side" "charts" "footer";
  padding-inline: var(--gutter);
  padding-block-end: var(--gutter);
}

.fl-app > * { min-width: 0; }

.fl-strip { grid-area: strip; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.fl-topbar { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fl-map { grid-area: map; position: relative; }
.fl-transport { grid-area: transport; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fl-segmented { grid-area: segmented; display: flex; }
.fl-side { grid-area: side; display: grid; gap: 12px; align-content: start; }
.fl-charts { grid-area: charts; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(220px, auto); }
.fl-footer { grid-area: footer; color: var(--muted); display: grid; gap: 8px; }

/* Top bar: product name, the three modes (the pressed one marked like the segmented control), the clock line. */
.fl-topbar .fl-title { margin: 0; font-size: 16px; }
.fl-modes { display: flex; flex-wrap: wrap; gap: 4px; }
.fl-modes .fl-button[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }

/* A wrapper whose children lay out as children of its parent (the transport row). */
.fl-contents { display: contents; }
/* Demand and traffic strips sit under the scrubber: stacked on a phone, side by side from 768 px. */
.fl-transport__strips { flex: 1 1 100%; min-width: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
/* Learn, Experiment, the fork and wide notices span the whole chart row. */
.fl-charts__wide { grid-column: 1 / -1; min-width: 0; }
.fl-now, .fl-across { display: grid; gap: 4px; align-content: start; }
.fl-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fl-group .fl-button[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
/* The Sandbox charts keep the chart row's columns inside one wrapper, so the out-of-date filter covers all of them. */
.fl-charts__set { grid-column: 1 / -1; min-width: 0; display: grid; gap: 12px; grid-template-columns: inherit; grid-auto-rows: inherit; }
.fl-charts__wide.fl-panel { padding: 12px; }
.fl-topbar > *, .fl-now h2, .fl-now p, .fl-across h2, .fl-across p, .fl-group p, .fl-charts__wide > h2 { margin: 0; }

.fl-panel, .fl-map, .fl-now, .fl-across, .fl-chart, .fl-knobs, .fl-drawer, .fl-popover {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.fl-panel-alt { background: var(--panel-alt); }
.fl-map, .fl-now, .fl-across, .fl-chart { padding: 12px; }
.fl-chart { min-width: 0; }
.fl-chart__summary { color: var(--muted); }

.fl-map__stamp { position: absolute; right: 8px; bottom: 8px; color: var(--faint-text); font-size: 12px; }

.fl-now__row { display: flex; justify-content: space-between; gap: 8px; }
.fl-now__row > :last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; }

.fl-segmented { gap: 2px; padding: 2px; border: 1px solid var(--rule-strong); border-radius: 6px; }
.fl-segmented button { flex: 1 1 0; border: 0; border-radius: 4px; background: var(--panel); cursor: pointer; }
.fl-segmented button[aria-pressed="true"] { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.fl-segmented button[aria-pressed="true"]:focus-visible { box-shadow: 0 0 0 2px var(--ground), inset 0 -2px 0 var(--accent); }

.fl-strip__full { display: none; }
/* A block button keeps the phone strip exactly one target tall, which --strip-block assumes. */
.fl-strip__short { display: block; }

/* Knobs on a phone: a sheet from below the strip to the bottom, with a sticky Run window button. */
.fl-knobs {
  position: fixed;
  inset: var(--strip-block) 0 0 0;
  z-index: 40;
  overflow-y: auto;
  border-radius: 0;
  transform: translateY(100%);
  transition: transform var(--dur-drawer) var(--ease-out);
}
.fl-knobs[data-open="true"] { transform: none; }
.fl-knobs__run { position: sticky; bottom: 0; padding-block: 8px; background: var(--panel); }

@media (max-width: 767.98px) {
  .fl-app:not([data-phone-group="charts"]) .fl-charts,
  .fl-app[data-phone-group="charts"] .fl-side,
  .fl-app[data-phone-group="across"] .fl-now,
  .fl-app:not([data-phone-group="across"]) .fl-across { display: none; }
  /* Learn and Experiment live in the chart row, so it stays on screen in those modes. */
  .fl-app[data-mode="learn"] .fl-charts,
  .fl-app[data-mode="experiment"] .fl-charts { display: grid; }
}

/* Focusable map entities (roving focus, design 7.7): focus marks the shape in the accent, never in a status colour. */
.fl-area, .fl-depot, .fl-route { cursor: pointer; }
.fl-area:focus-visible .fl-yard, .fl-depot:focus-visible .fl-depot-tile { stroke: var(--accent); stroke-width: 2px; }
.fl-route--highway:focus-visible .fl-route-highway__casing { stroke: var(--accent); }
.fl-route--local:focus-visible .fl-route-local { stroke: var(--accent); }
.fl-verdict-chip__word { letter-spacing: 0.02em; }
/* The pinned car opens its inspector on click or tap; its transparent hit circle gives the small glyph a 44 px target. */
.fl-pinned-car { cursor: pointer; }
.fl-hit { fill: transparent; stroke: none; }
/* Scrolling the fork into view leaves its heading below the sticky teaching strip. */
.fl-charts__wide { scroll-margin-top: calc(var(--strip-block) + 8px); }

/* Tablet, 768 to 1279 px: knobs become a left drawer, the column follows DOM and tab order, charts form a 2 by 2 grid. */
@media (min-width: 768px) {
  .fl-app { grid-template-areas: "strip" "top" "map" "transport" "side" "charts" "footer"; }
  .fl-transport__strips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-segmented, .fl-strip__short { display: none; }
  .fl-strip__full { display: inline; }
  .fl-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-knobs { inset: var(--strip-block) auto 0 0; width: 320px; transform: translateX(-100%); border-right: 1px solid var(--rule-strong); }
  .fl-drawer.fl-inspector { width: 560px; }
}

/* Desktop, 1280 px and wider: 280 px knobs, a flexible map, a 260 px NOW panel, a 220 px chart row. */
@media (min-width: 1280px) {
  .fl-app {
    grid-template-columns: 280px minmax(0, 1fr) 260px;
    grid-template-rows: auto auto minmax(420px, auto) auto minmax(220px, auto) auto;
    grid-template-areas:
      "strip strip strip"
      "top top top"
      "knobs map side"
      "knobs transport transport"
      "knobs charts charts"
      "knobs footer footer";
  }
  /* A static column has nothing to animate. Without transition: none, a page that loads narrow and is then widened
     runs the sheet's slide from below (translateY(100%)) inside the column, and a paused or hidden view keeps it there. */
  .fl-knobs {
    grid-area: knobs;
    position: static;
    width: auto;
    transform: none;
    transition: none;
    border-radius: 6px;
    border-right: 1px solid var(--rule);
  }
  .fl-knobs-toggle { display: none; }
  .fl-charts { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); }
}

/* Drawers, popovers and tooltips */

.fl-drawer {
  position: fixed;
  inset: var(--strip-block) 0 0 auto;
  z-index: 50;
  width: 100%;
  overflow-y: auto;
  padding: var(--gutter);
  border-radius: 0;
  transform: translateX(100%);
  transition: transform var(--dur-drawer) var(--ease-out);
}
.fl-drawer[data-open="true"] { transform: none; }

.fl-popover {
  position: absolute;
  z-index: 60;
  max-width: min(36rem, calc(100vw - 2 * var(--gutter)));
  padding: 12px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-tooltip) var(--ease-out), transform var(--dur-tooltip) var(--ease-out);
}
.fl-popover[data-open="true"] { opacity: 1; transform: none; }

/* A tooltip never gates a value: the same value is always in a table or label. */
.fl-tooltip {
  position: absolute;
  z-index: 70;
  pointer-events: none;
  padding: 4px 8px;
  background: var(--ink);
  color: var(--panel);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--dur-tooltip) var(--ease-out), transform var(--dur-tooltip) var(--ease-out);
}
.fl-tooltip[data-open="true"] { opacity: 1; transform: none; }

/* Controls */

.fl-button {
  padding: 8px 12px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out);
}
.fl-button:active { transform: scale(0.97); }
.fl-button:disabled { color: var(--muted); cursor: not-allowed; }
.fl-button--primary { background: var(--accent); color: var(--panel); border-color: var(--accent); }

.fl-field { display: grid; gap: 4px; padding-inline-start: 8px; border-inline-start: 2px solid transparent; }
.fl-field--changed { border-inline-start-color: var(--ink); }
.fl-field input, .fl-field select {
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
}
/* An out-of-range value stays in the field, marked in ink with a written note: status colours are for verdicts. */
.fl-field--invalid input, .fl-field--invalid select { border: 2px solid var(--ink); }
.fl-field__note { color: var(--ink); }

/* Registers (design 7.4) */

.fl-chip-replay, .fl-chip-across, .fl-limits-chip, .fl-teaching-chip, .fl-verdict-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* Short register and verdict words stay on one line. */
.fl-chip-replay, .fl-chip-across, .fl-verdict-chip { white-space: nowrap; }
/* Model-limits and teaching-run chips hold sentences, so they wrap inside a 400 px screen. */
.fl-limits-chip, .fl-teaching-chip { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.fl-chip-replay { background: var(--ink); color: var(--panel); border: 1px solid var(--ink); }
.fl-chip-across { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.fl-limits-chip { background: var(--panel-alt); color: var(--ink); border: 1px solid var(--rule-strong); }

/* Verdict (design 7.2, 8.1): the chips sit inside the card border so a cropped screenshot keeps them. */

.fl-verdict { background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 6px; padding: 12px; }
.fl-teaching-chip { background: var(--panel-alt); color: var(--ink); border: 1px solid var(--rule-strong); }
.fl-verdict__footer { color: var(--muted); border-top: 1px solid var(--rule); padding-block-start: 8px; }

.fl-verdict-chip { border: 1px solid transparent; font-weight: 600; }
.fl-verdict-chip__glyph { display: inline-grid; place-items: center; inline-size: 1em; block-size: 1em; }
.fl-verdict-chip[data-status="pass"] { color: var(--pass); background: var(--pass-bg); }
.fl-verdict-chip[data-status="cond"] { color: var(--cond); background: var(--cond-bg); }
.fl-verdict-chip[data-status="hold"] { color: var(--hold); background: var(--hold-bg); }
.fl-verdict-chip[data-status="invalid"] { color: var(--invalid); background: var(--invalid-bg); }
/* UNCHANGED and NO_RECOMMENDATION: no status colour. */
.fl-verdict-chip[data-status="neutral"] { color: var(--ink); background: var(--panel-alt); border-color: var(--rule-strong); }

/* States */

.fl-stale { filter: grayscale(1); }
.fl-absent { color: var(--muted); }
.fl-unserved { color: var(--hold); }
.fl-error { display: grid; gap: 4px; padding: 12px; background: var(--panel-alt); border: 1px solid var(--rule-strong); border-radius: 6px; }
.fl-error__slot { color: var(--faint-text); font-family: var(--font-mono); font-size: 12px; }

/* Wide content scrolls inside its own container, never the page. */

/* The padding keeps the focus ring of an edge cell visible inside the scroller. */
.fl-scroll { max-width: 100%; overflow-x: auto; padding: 4px; }
.fl-table { border-collapse: collapse; }
.fl-table th { background: var(--panel-alt); text-align: start; font-weight: 600; }
.fl-table th, .fl-table td { padding: 4px 8px; border-bottom: 1px solid var(--rule); }
.fl-table td { text-align: end; }
.fl-code { margin: 0; padding: 12px; background: var(--panel-alt); font-family: var(--font-mono); white-space: pre; }

/* Map and chart marks (SVG). Status colours never colour a series, a car or an area. */

.fl-yard { fill: var(--panel-alt); stroke: var(--rule-strong); stroke-width: 1px; }
.fl-route-highway__casing { fill: none; stroke: var(--rule-strong); stroke-width: 6px; }
.fl-route--congested .fl-route-highway__casing { stroke: var(--faint); }
.fl-route-highway__centre { fill: none; stroke: var(--ink); stroke-width: 2px; }
.fl-route-local { fill: none; stroke: var(--muted); stroke-width: 2px; }
.fl-chevron { fill: none; stroke: var(--ink); stroke-width: 1.5px; }
.fl-depot-tile { fill: var(--panel); stroke: var(--ink); stroke-width: 1px; }
.fl-rider-ring { fill: none; stroke: var(--ink); stroke-width: 1.5px; }

.fl-fam-rider { color: var(--car-rider); }
.fl-fam-empty { color: var(--car-empty); }
.fl-fam-available { color: var(--car-available); }
.fl-fam-depot { color: var(--car-depot); }
/* Light Available and At a depot fall under 3:1, so their glyphs always carry this 1 px ink edge (design 8.2). */
.fl-glyph-edge { fill: none; stroke: var(--ink); stroke-width: 1px; }
.fl-glyph-ring { fill: none; stroke: var(--panel); stroke-width: 2px; }
/* A car driving a route (design 7.3 as amended, 8.2): one mark per car, on the panel surface, in the route hues.
   The pinned glyph keeps the only pointer target a car has, so a mark never takes a click away from the route under it. */
.fl-car { pointer-events: none; }

.fl-chart__grid { stroke: var(--rule); stroke-width: 1px; }
.fl-chart__axis { fill: var(--faint-text); stroke: var(--faint); font-size: 12px; }
.fl-chart__line { fill: none; stroke: var(--ink); stroke-width: 2px; }
.fl-chart__band { fill: var(--ink); fill-opacity: 0.1; stroke: none; }
.fl-chart__cursor { stroke: var(--ink); stroke-width: 1px; }
.fl-hatch-line { stroke: var(--faint); stroke-width: 1px; }

/* The map legend: one swatch and word per state family, in unit-bar row order (design 8.2: colour is never the only cue). */
.fl-map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.fl-map-legend > li { display: inline-flex; align-items: center; gap: 4px; }

/* The isometric world (design 7.3 as amended, decision 43): a canvas the page owns and HTML labels over it that carry
   every word. No transition, animation or will-change here: a body moves because the clock moves, and a plate moves
   by transform behind a same-string guard under contain: layout paint, so a frame never touches the page's layout. */
.fl-iso { position: relative; }
.fl-iso__canvas { display: block; width: 100%; height: auto; }
.fl-iso__overlay { position: absolute; inset: 0; contain: layout paint; pointer-events: none; }
/* A label is a 44 px transparent target centred on its anchor; the visible plate inside it is the words. */
.fl-iso__label {
  position: absolute;
  display: inline-grid;
  place-items: center;
  min-width: var(--target);
  min-height: var(--target);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
}
.fl-iso__plate { padding: 4px 6px; background: var(--panel); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 4px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.fl-iso__label--area .fl-iso__plate { background: transparent; border-color: transparent; color: var(--faint-text); font-weight: 600; font-size: 14px; }
/* Depot ids and route shields are the schematic's own names: monospace, as the flat picture writes them. */
.fl-iso__label--depot .fl-iso__plate, .fl-iso__label--route .fl-iso__plate { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* A local route's words show on focus or hover, as the flat picture shows them; its 44 px target is always there,
   and the hidden words are taken out of the button's flow so the target is 44 px and not the width of the words. */
.fl-iso__label--local .fl-iso__plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); visibility: hidden; }
.fl-iso__label--local:focus-visible .fl-iso__plate, .fl-iso__label--local:hover .fl-iso__plate { visibility: visible; }
.fl-iso__leader { position: absolute; width: 1px; background: var(--rule-strong); transform-origin: 0 0; }
.fl-iso__text { position: absolute; transform: translate(-50%, -50%); font-size: 12px; color: var(--ink); white-space: nowrap; }
.fl-iso__numbers {
  position: absolute;
  display: grid;
  margin: 0;
  padding: 2px 4px;
  /* The tag hangs from its bottom edge, so the blocked state's fifth line grows up into the gap under its own block
     instead of down past the stage edge, where the overlay's contain: layout paint would clip it. */
  transform: translate(-50%, -100%);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink);
  background: var(--panel);
  white-space: nowrap;
}
.fl-iso__count, .fl-iso__pin {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.2;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  white-space: nowrap;
}
.fl-iso__pin { border-color: var(--accent); pointer-events: auto; cursor: pointer; }
.fl-iso__pick { display: block; margin: 4px 0 0; }

/* The walkthrough (demo plan section 4.5, ARCHITECTURE decision 44): a stage, a ledger and a rail on one screen. The
   layer only rearranges what the page already has, so there is no transition, animation or will-change here: a beat
   change is instant (a tween across a jump would pass through seconds the model never produced). */
.fl-app[data-present="true"] { grid-template-areas: "strip" "top" "map" "ledger" "rail" "transport" "footer"; }
.fl-ledger { grid-area: ledger; display: grid; gap: 12px; align-content: start; overflow-y: auto; }
.fl-ledger p, .fl-ledger h2 { margin: 0; }
.fl-ledger__beat { font-size: 20px; }
.fl-ledger__prepare { display: grid; gap: 4px; justify-items: start; }
.fl-ledger__figures { display: grid; gap: 12px; }
.fl-ledger__figure { display: grid; gap: 2px; justify-items: start; }
/* A figure is read across a room: 32 px, tabular, and never counted up to. */
.fl-ledger__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 32px; line-height: 1.1; }
.fl-ledger__table td, .fl-ledger__table th { font-family: var(--font-mono); font-size: 14px; }
/* What just happened, newest first: hairlines between lines, and no live region (the narration is the one voice).
   The foot stays at the ledger's bottom edge while the rest of the beat scrolls under it: the ticker is where the
   steps of the day are, and a beat taller than its box would otherwise push it out of sight. Sticky is a position,
   not a motion: nothing here transitions. */
.fl-ledger__foot { position: sticky; bottom: 0; display: grid; gap: 4px; background: var(--ground); padding-block-start: 4px; }
.fl-ticker { display: grid; }
.fl-ticker__line { display: flex; gap: 8px; margin: 0; padding: 4px 0; border-top: 1px solid var(--rule); }
.fl-rail { grid-area: rail; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fl-rail .fl-button[aria-current="step"] { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.fl-reading-card { display: grid; gap: 8px; padding: 12px; }

/* What chapters 2 to 4 put in the ledger (demo plan beats 2.1, 2.2 and 4.2): the registry in two registers, the two
   charts by hour, the readout composed from the verdict card, and the refusals. No transition, animation or
   will-change here either: these are what a beat shows, and a beat change is instant. */
.fl-registry { display: grid; gap: 8px; justify-items: start; }
/* The three parts of a row's name stack inside its cell; the cell stays a table cell so the columns stay aligned. */
.fl-registry th > span { display: block; }
.fl-hourly { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.fl-readout { display: grid; gap: 8px; }
.fl-refusals { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 1280px) {
  .fl-hourly { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Presenting from 1280 px: the stage beside the ledger, the rail under both. This block sits after the presenting
   rules above because it overrides them at the same specificity, and the later rule is the one that applies.
   The stage is capped by the viewport height at the picture's own 640 by 500 ratio, so the stage, the ledger and the
   rail hold one screen. --present-chrome is everything above and below the picture: the strip, the top bar, the rail,
   the gaps, and the map panel's own header, captions and legend under the picture. */
@media (min-width: 1280px) {
  .fl-app[data-present="true"] {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
    grid-template-areas:
      "strip strip"
      "top top"
      "map ledger"
      "rail rail"
      "transport transport"
      "footer footer";
    /* The ordinary layout's rows are the ordinary layout's: row 5 is a 220 px chart row there and the transport here,
       and the transport is empty while presenting (its control row is hidden and inert, and the day bar is not built),
       so inheriting that template stood 220 px of blank panel between the rail and the footer. */
    grid-template-rows: auto auto minmax(0, auto) auto auto auto;
    /* Measured in the browser on this source at 1512 x 982 and 1280 x 800 (document.hidden was true, so these are
       layout numbers, never frame numbers): the strip, the top bar, the rail and the gaps take 161 px, and the map
       panel spends another 57 above the picture (its padding and its header row) and 171 to 188 below it (the honesty
       captions, the legend and the pick output, which wrap further in the narrower column). 412 leaves the rail's foot
       at 958 of 982 at 1512 and at 794 of 800 at 1280, and the canvas at 730 x 570 and 497 x 388. The captions are what the picture owes a reader and they stay;
       what the picture gives up beyond them bought nothing, so it is given back. */
    --present-chrome: 412px;
  }
  .fl-app[data-present="true"] .fl-iso { width: min(100%, calc((100vh - var(--present-chrome)) * 1.28)); margin-inline: auto; }
  .fl-app[data-present="true"] .fl-ledger { max-height: calc(100vh - var(--present-chrome)); }
}

/* Ordered steps drawn as an arrow flow, never with number markers (design 8.5); a vertical list on a phone. */
.fl-flow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.fl-flow__arrow { margin-inline-start: 8px; color: var(--muted); }
.fl-list-plain { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* The SITUATION block of a casebook preset (design 4.4): a proxy's three parts, without the browser's dd indent. */
.fl-situation__proxy { display: grid; gap: 2px; margin: 0; }
.fl-situation__proxy dd { margin: 0 0 6px; }
@media (max-width: 767.98px) {
  .fl-flow { flex-direction: column; }
  .fl-flow__arrow { display: none; }
}

/* Scrubber (design 7.4): the warm-up is shaded inside the track, from the track start to where the thumb centre sits at
   the warm-up end; the thumb has a fixed 16 px size so that position is known. Tick labels never wrap. */
.fl-scrubber { position: relative; display: grid; align-items: center; min-height: var(--target); }
.fl-scrubber__band {
  position: absolute;
  inset-inline-start: 0;
  top: calc(50% - 5px);
  height: 10px;
  width: calc(8px + (100% - 16px) * var(--warmup, 0));
  background: var(--rule-strong);
  border-radius: 5px 0 0 5px;
  pointer-events: none;
}
.fl-scrubber__input { position: relative; width: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.fl-scrubber__input::-webkit-slider-runnable-track { height: 10px; background: transparent; border: 1px solid var(--rule-strong); border-radius: 5px; }
.fl-scrubber__input::-moz-range-track { height: 10px; background: transparent; border: 1px solid var(--rule-strong); border-radius: 5px; }
.fl-scrubber__input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -4px; border-radius: 50%; background: var(--ink); border: 2px solid var(--panel); }
.fl-scrubber__input::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid var(--panel); }
.fl-scrubber__ticks { position: relative; height: 1.5em; }
.fl-scrubber__ticks > span { position: absolute; width: max-content; }
@media (max-width: 767.98px) {
  .fl-scrubber__ticks > [data-near-edge] { display: none; }
}

/* Reduced motion, element by element (design 7.4, 8.4). The in-app setting wins over the system setting. */

@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .fl-knobs,
  :root:not([data-motion="full"]) .fl-drawer,
  :root:not([data-motion="full"]) .fl-popover,
  :root:not([data-motion="full"]) .fl-tooltip,
  :root:not([data-motion="full"]) .fl-button { transition: none; }
  :root:not([data-motion="full"]) .fl-button:active { transform: none; }
}

:root[data-motion="reduce"] .fl-knobs,
:root[data-motion="reduce"] .fl-drawer,
:root[data-motion="reduce"] .fl-popover,
:root[data-motion="reduce"] .fl-tooltip,
:root[data-motion="reduce"] .fl-button { transition: none; }
:root[data-motion="reduce"] .fl-button:active { transform: none; }

/* Public FleetLab studio. Presentation never changes a simulation value. */
:root {
  color-scheme: light;
  --ground: #ffffff; --panel: #ffffff; --panel-alt: #f3f6fa;
  --ink: #182b42; --muted: #566579; --faint: #7a899b; --faint-text: #5e6c7d;
  --rule: #dfe6ee; --rule-strong: #b8c7d8; --accent: #155bd7; --accent-soft: #eaf1ff;
  --pass: #286b4d; --pass-bg: #e4eddf; --cond: #8d631f; --cond-bg: #f5ebd5;
  --hold: #a84432; --hold-bg: #f8e6e3; --invalid: #5c6673; --invalid-bg: #e7eaee;
  --car-rider: #3e85a8; --car-empty: #b57740; --car-available: #397b50; --car-depot: #b49648;
}
body { margin: 0; background: var(--ground); }
.fleet-studio { font-family: var(--font-ui); color: var(--ink); line-height: 1.55; }
.fleet-studio * { box-sizing: border-box; }
.fleet-studio [hidden] { display: none !important; }
.fleet-studio button { font: inherit; cursor: pointer; }
.fleet-studio button:focus-visible, .fleet-studio summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.fleet-studio h1, .fleet-studio h2, .fleet-studio h3, .fleet-studio p { text-wrap: pretty; }
.fleet-studio h1, .fleet-studio h2 { font-weight: 500; letter-spacing: -.045em; }
.fleet-studio .eyebrow { margin: 0; font-size: 11px; letter-spacing: .12em; font-weight: 650; color: #506582; line-height: 1.5; }
.studio-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 18px max(40px, calc((100vw - 1320px)/2)); background: #ffffff; border-bottom: 1px solid #edf1f6; }
.studio-brand { display: flex; align-items: center; gap: 11px; flex: none; }
.studio-brand > div { display: grid; }
.studio-brand strong { font-size: 23px; font-weight: 650; letter-spacing: -.055em; line-height: 1.1; }
.studio-brand span { color: var(--muted); font-size: 10px; letter-spacing: .07em; margin-top: 4px; }
.studio-monogram { width: 44px; min-width: var(--target); min-height: var(--target); border: 0; border-radius: 14px; background: #155bd7; color: #ffffff; font-size: 26px !important; font-weight: 650 !important; padding: 0; }
.studio-header nav { display: flex; align-items: center; gap: 5px; }
.studio-header nav a { background: transparent; color: var(--muted); border: 0; border-radius: 24px; padding: 12px 17px; min-height: var(--target); font-size: 13px; white-space: normal; }
.studio-header nav a[aria-current="page"] { color: #174fa7; background: #edf3ff; }
.studio-header nav a:hover { background: #f0f5fc; color: #174fa7; }
.studio-status { display: flex; align-items: center; gap: 8px; color: #56677d; font-size: 10px; letter-spacing: .09em; white-space: normal; }
.studio-status > span { color: #155bd7; font-size: 14px; }
.studio-boundary { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 11px 24px; background: #f3f6fa; border-bottom: 1px solid var(--rule); color: #53657b; font-size: 11px; }
.studio-boundary strong { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.studio-overview, .studio-approach { max-width: 1400px; margin: auto; padding: 0 40px; }
.studio-hero { display: grid; grid-template-columns: minmax(0,1fr); gap: 48px; padding: 76px 0 34px; }
.hero-copy { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 60px; }
.hero-copy > * { min-width: 0; }
.hero-copy h1 { font-size: clamp(42px, 4.8vw, 70px); line-height: 1.06; margin: 21px 0 23px; white-space: normal; }
.hero-copy h1 span { color: #155bd7; }
.creator-credit { color: var(--muted); font-size: 12px; margin: 0; }
.hero-summary { padding-top: 12px; }
.hero-lede { font-size: 21px; line-height: 1.45; letter-spacing: -.02em; color: #293f59; margin: 0 0 14px; }
.hero-description { font-size: 15px; line-height: 1.8; max-width: 500px; margin: 0; color: var(--muted); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; align-items: center; }
.studio-button { min-height: var(--target); border: 1px solid #c4d1e3; border-radius: 26px; padding: 13px 21px; background: transparent; color: #244c85; font-size: 13px !important; font-weight: 550 !important; line-height: 1.35; text-align: left; }
.studio-button:hover { background: #edf3fd; border-color: #9bb6dc; }
.studio-button-primary { background: #155bd7; border-color: #155bd7; color: #ffffff; }
.studio-button-primary:hover { background: #104aaa; border-color: #104aaa; color: #ffffff; }
.hero-actions > .studio-button:not(.studio-button-primary) { border-color: transparent; padding-inline: 10px; }
.hero-duration { color: #637187; font-size: 11px; margin: 13px 0 0; }
.depot-scene { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); align-items: center; min-width: 0; border: 1px solid #e1eaf6; border-radius: 26px; background: #edf4ff; overflow: hidden; }
.scene-visual { align-self: stretch; display: flex; flex-direction: column; justify-content: center; min-width: 0; background: linear-gradient(135deg,#eff6ff,#e7f1fc); }
.scene-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 26px 30px 0; }
.scene-heading .eyebrow { font-size: 10px; }
.quiet-badge { color: #536d8c; font-size: 10px; padding: 5px 9px; border: 1px solid #cbdced; border-radius: 14px; }
.depot-scene svg { width: 100%; height: auto; display: block; margin: -9px 0 -5px; }
.scene-explainer { min-width: 0; padding: 31px 32px 27px; }
.scene-invitation { margin: 0 0 23px; font-size: 18px; line-height: 1.45; letter-spacing: -.025em; color: #2c4667; }
.stage-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; background: #ffffff; border: 1px solid #d7e3f2; border-radius: 24px; padding: 3px; gap: 2px; position: relative; }
.stage-tabs button { border: 0; border-radius: 22px; padding: 9px 4px; color: #526781; background: transparent; font-size: 11px; min-height: var(--target); }
.stage-tabs button[aria-pressed="true"] { background: #155bd7; color: #ffffff; }
.stage-number { font-size: 9px; margin-right: 4px; }
.depot-detail { padding: 27px 0 19px; min-height: 215px; }
.depot-detail h3 { font-size: 23px; font-weight: 500; line-height: 1.25; letter-spacing: -.035em; margin: 12px 0; }
.depot-detail > p:not(.eyebrow) { color: #526781; font-size: 12px; line-height: 1.8; margin: 0; }
.depot-detail .depot-question { margin-top: 16px !important; font-size: 12px !important; color: #244c85 !important; font-weight: 600; }
.scene-note { font-size: 10px; line-height: 1.7; color: #62758e; margin: 0; padding-top: 15px; border-top: 1px solid #d7e3f2; }
.studio-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--rule); padding: 25px 0 32px; }
.studio-facts > div { display: grid; gap: 7px; padding-left: 26px; border-left: 1px solid var(--rule); }
.studio-facts > div:first-child { padding-left: 0; border: 0; }
.studio-facts strong { font-size: 13px; font-weight: 550; }
.studio-facts span { font-size: 11px; line-height: 1.7; color: var(--muted); }
.decisions-section { padding: 88px 0 78px; }
.section-heading { display: flex; gap: 48px; align-items: end; justify-content: space-between; margin-bottom: 35px; }
.section-heading h2, .loop-section h2, .scope-section h2 { font-size: clamp(28px,3vw,40px); line-height: 1.15; margin: 15px 0 0; }
.section-heading h2 { max-width: 620px; }
.section-heading > p { max-width: 285px; font-size: 13px; color: var(--muted); margin: 0; line-height: 1.8; }
.decision-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.decision-card { padding: 29px; background: #f5f8fc; border: 1px solid #e9eef5; border-radius: 18px; display: flex; flex-direction: column; align-items: start; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 30px; }
.card-top .eyebrow { font-size: 10px; }
.card-number { color: #596f8c; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1; }
.decision-card h3 { font-size: 25px; line-height: 1.22; font-weight: 500; letter-spacing: -.035em; margin: 0 0 17px; }
.decision-card > p { color: var(--muted); font-size: 13px; line-height: 1.85; margin: 0; }
.decision-card .card-measure { font-size: 11px; margin: 24px 0; }
.card-measure > span { display: block; font-size: 9px; letter-spacing: .12em; color: #526985; margin-bottom: 5px; font-weight: 650; }
.decision-card .studio-button { margin-top: auto; border: 0; border-top: 1px solid var(--rule); width: 100%; border-radius: 0; padding: 17px 0 0; }
.loop-section { background: #edf4ff; padding: 43px; border-radius: 24px; margin-bottom: 78px; }
.demo-heading { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.decision-loop { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; margin: 37px 0 0; padding: 0; list-style: none; }
.loop-number { font-size: 10px; letter-spacing: .09em; color: #37679d; }
.decision-loop h3 { font-size: 19px; line-height: 1.35; font-weight: 500; letter-spacing: -.025em; margin: 11px 0; }
.decision-loop p { font-size: 12px; color: #526781; line-height: 1.85; margin: 0; }
.scope-section { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 42px; padding: 0 0 74px; }
.scope-section h2 { font-size: 30px; max-width: 260px; }
.scope-section h3 { font-size: 14px; font-weight: 550; margin: 0 0 12px; }
.scope-section p { font-size: 12px; color: var(--muted); line-height: 1.85; margin: 0; }
.studio-footer { border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 20px; padding: 32px max(40px, calc((100vw - 1320px)/2)); color: #5e7087; font-size: 11px; }
.studio-footer strong { font-weight: 600; color: #2c4667; }
.studio-approach { padding-top: 62px; padding-bottom: 45px; }
.approach-intro { max-width: 780px; }
.approach-intro h1 { font-size: clamp(38px,4.5vw,60px); line-height: 1.13; white-space: pre-line; margin: 20px 0 22px; }
.approach-intro > p:last-child { color: #566579; max-width: 660px; font-size: 14px; line-height: 1.9; }
.approach-section { padding: 43px 0; border-top: 1px solid var(--rule); margin-top: 28px; }
.approach-section h2, .approach-case h2 { font-size: 31px; line-height: 1.2; margin: 12px 0 27px; }
.people-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.people-grid h3 { font-size: 16px; margin: 0 0 12px; font-weight: 500; }
.people-grid p { color: #566579; font-size: 12px; line-height: 1.9; }
.people-grid .person-job { color: #2c4d78; font-size: 15px; line-height: 1.6; }
.approach-case { background: #edf4ff; border: 1px solid #d7e3f2; border-radius: 8px; padding: 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 65px; }
.approach-case > div > p:not(.eyebrow) { font-size: 13px; line-height: 1.85; color: #566579; }
.approach-case .studio-button { margin-top: 13px; }
.hypothesis-steps { padding-left: 22px; margin: 0; }
.hypothesis-steps li { padding: 0 0 18px 10px; font-size: 12px; color: #566579; line-height: 1.8; }
.hypothesis-steps strong { display: block; color: #2c4d78; font-size: 13px; margin-bottom: 3px; }
.section-lede { color: #566579; max-width: 730px; font-size: 13px; line-height: 1.8; }
.roadmap { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; margin-top: 30px; }
.roadmap article { border-top: 2px solid #9bb6dc; padding-top: 20px; }
.roadmap h3 { font-size: 16px; font-weight: 500; margin: 13px 0; }
.roadmap p:not(.eyebrow) { color: #566579; font-size: 12px; line-height: 1.8; }
.study-note { font-size: 11px; color: #566579; margin-top: 25px; }
.approach-close { display: flex; gap: 30px; justify-content: space-between; align-items: center; padding: 30px 0; border-top: 1px solid var(--rule); }
.approach-close h2 { font-size: 28px; max-width: 490px; }
.workspace-intro { max-width: 1500px; margin: auto; padding: 30px 30px 22px; }
.workspace-intro h1 { font-size: 35px; line-height: 1.15; margin: 9px 0 12px; }
.workspace-intro > p:last-child { font-size: 13px; color: #566579; max-width: 850px; margin: 0; }
/* The working tool uses the same visual language as the overview. */
.fleet-studio .fl-app { max-width: 1500px; margin: auto; padding: 0 30px 35px; gap: 15px; }
.fleet-studio .fl-strip { margin: 0; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; position: relative; top: auto; background: #f3f6fa; font-size: 11px; }
.fleet-studio .fl-strip__full { margin: 0; font-size: 11px; }
.fleet-studio .fl-topbar { padding: 13px 0; border-bottom: 1px solid var(--rule); }
.fleet-studio .fl-topbar .fl-title { font-size: 13px; letter-spacing: -.02em; }
.fleet-studio .fl-clock { margin-left: auto; color: #566579; font-size: 11px; }
.fleet-studio .fl-button, .fleet-studio .fl-knobs button { border-radius: 4px; font-size: 11px; min-height: var(--target); }
.fleet-studio .fl-knobs { padding: 16px; }
.fleet-studio .fl-knobs h2 { font-size: 12px; letter-spacing: .09em; }
.fleet-studio .fl-knobs > p { font-size: 11px; line-height: 1.7; }
.fleet-studio .fl-field label, .fleet-studio .fl-field__note { font-size: 11px; }
.fleet-studio .fl-now, .fleet-studio .fl-across { padding: 18px; font-size: 11px; }
.fleet-studio .fl-now__row { padding: 5px 0; gap: 12px; }
.fleet-studio .fl-now__row h2 { font-size: 10px; letter-spacing: .04em; }
.fleet-studio .fl-now__row > :last-child { font-size: 11px; }
.fleet-studio .fl-now__row + .fl-now__row { border-top: 1px solid #eef2f7; }
.fleet-studio .fl-chip-replay, .fleet-studio .fl-chip-across { font-size: 10px; }
.fleet-studio .fl-map { padding: 18px; background: #f0f5fb; }
.fleet-studio .fl-map p, .fleet-studio .fl-map summary { font-size: 10px; }
.fl-map-scope { color: #68765f; font-size: 11px; margin: 8px 0; }
.fl-map-assumptions { color: var(--muted); font-size: 11px; margin: 9px 0; }
.fl-map-assumptions summary { cursor: pointer; min-height: var(--target); padding: 6px 0; }
.fl-map-assumptions[open] { padding-bottom: 10px; }
.fleet-studio .fl-map-legend { font-size: 10px; gap: 8px; }
.fleet-studio .fl-reading-card { background: #ffffff; border: 1px solid #d7e3f2; margin-bottom: 16px; border-radius: 5px; padding: 14px; }
.fleet-studio .fl-reading-card p { font-size: 12px; }
.fleet-studio .fl-transport { border: 1px solid var(--rule); border-radius: 6px; padding: 15px; background: #ffffff; }
.fleet-studio .fl-transport button { font-size: 10px; }
.fleet-studio .fl-transport .fl-clock { font-size: 18px; margin: 0; }
.fleet-studio .fl-chart { padding: 20px; }
.fleet-studio .fl-chart h2, .fleet-studio .fl-chart h3 { font-size: 15px; letter-spacing: -.02em; }
.fleet-studio .fl-chart__summary, .fleet-studio .fl-footer { font-size: 11px; }
.fleet-studio .fl-table { font-size: 12px; }
.fleet-studio .fl-table th { color: #2c4d78; font-size: 10px; }
.fleet-studio .fl-table td, .fleet-studio .fl-table th { padding: 10px; }
.fleet-studio .fl-inspector { background: #ffffff; padding: 24px; box-shadow: -12px 0 45px #294e361a; }
.fleet-studio .fl-ledger { background: #ffffff; border: 1px solid var(--rule); border-radius: 7px; padding: 22px; }
.fleet-studio .fl-ledger__beat { font-size: 23px; letter-spacing: -.025em; line-height: 1.3; }
.fleet-studio .fl-ledger p { font-size: 12px; line-height: 1.85; }
.fleet-studio .fl-ledger__figures { grid-template-columns: 1fr 1fr; padding: 15px 0; gap: 20px; }
.fleet-studio .fl-ledger__value { font-size: 28px; color: #2c4d78; }
.fleet-studio .fl-ledger__foot { background: #ffffff; position: static; }
.fleet-studio .fl-rail { background: #eaf1ff; border: 1px solid #ccdced; padding: 12px; border-radius: 5px; position: sticky; top: 8px; z-index: 20; box-shadow: 0 4px 20px #203b311a; }
.fleet-studio .fl-app[data-present="true"] { grid-template-areas: "strip" "top" "rail" "map" "ledger" "transport" "footer"; }
.fleet-studio .fl-rail button { font-size: 11px; }
.fleet-studio .fl-iso__plate { background: #ffffff; box-shadow: 0 1px 4px #273d2420; }
.fleet-studio .fl-iso__numbers { background: #f5f8fcdd; padding: 3px; border-radius: 3px; }
.fleet-studio .fl-iso__label--route .fl-iso__plate { font-size: 10px; }
@media (min-width: 1000px) {
  .fleet-studio .fl-app:not([data-present="true"]) { grid-template-columns: 220px minmax(0,1fr) 230px; }
  .fleet-studio .fl-app[data-present="true"] { grid-template-columns: minmax(0,1.35fr) minmax(330px,1fr); grid-template-areas: "strip strip" "top top" "rail rail" "map ledger" "transport transport" "footer footer"; grid-template-rows: auto; }
  .fleet-studio .fl-app[data-present="true"] .fl-iso { width: 100%; }
  .fleet-studio .fl-app[data-present="true"] .fl-ledger { max-height: clamp(480px, calc(100vh - 100px), 720px); }
  .fleet-studio .fl-app[data-present="true"] .fl-map { align-self: start; }
  .fleet-studio[data-page="depots"] .fl-app:not([data-present="true"])[data-verdict-seed="false"] { grid-template-areas: "strip strip strip" "top top top" "knobs charts charts" "map map side" "transport transport transport" "footer footer footer"; grid-template-rows: auto; }
}
@media (max-width: 1100px) {
  .studio-header { padding-inline: 25px; gap: 15px; }
  .studio-status { display: none; }
  .studio-overview, .studio-approach { padding-inline: 28px; }
  .studio-hero { gap: 34px; padding-top: 50px; }
  .hero-copy { gap: 35px; }
  .scene-explainer { padding: 25px; }
  .hero-copy h1 { font-size: clamp(38px,4.5vw,51px); }
  .hero-actions { gap: 8px; }
  .depot-detail { min-height: 215px; }
  .studio-facts > div { padding-left: 15px; }
}
@media (max-width: 767.98px) {
  .studio-header { padding: 16px 20px 0; flex-wrap: wrap; gap: 12px; }
  .studio-header nav { width: 100%; overflow-x: auto; gap: 0; }
  .studio-header nav a { padding: 12px 11px; font-size: 11px; flex: none; }
  .studio-boundary { justify-content: start; align-items: start; flex-direction: column; gap: 3px; padding: 10px 20px; font-size: 10px; }
  .studio-overview, .studio-approach { padding-inline: 20px; }
  .studio-hero { grid-template-columns: minmax(0,1fr); gap: 32px; padding: 38px 0 20px; }
  .hero-copy { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .hero-summary { padding: 0; }
  .depot-scene { grid-template-columns: minmax(0,1fr); border-radius: 20px; }
  .scene-explainer { padding: 24px; }
  .scene-invitation { margin-bottom: 18px; }
  .hero-copy h1 { font-size: clamp(37px,8.2vw,56px); margin: 18px 0 20px; white-space: normal; }
  .hero-lede { font-size: 19px; }
  .hero-description { font-size: 14px; max-width: 550px; }
  .hero-actions { display: flex; margin-top: 23px; }
  .hero-duration { margin-bottom: 0; }
  .depot-detail { min-height: 0; padding: 25px 0 21px; }
  .scene-heading { padding: 17px 15px 0; }
  .quiet-badge { font-size: 10px; }
  .stage-tabs { margin: 0; }
  .scene-note { padding-inline: 0; }
  .studio-facts { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .studio-facts > div { padding: 0; border: 0; }
  .studio-facts strong { font-size: 12px; }
  .studio-facts span { font-size: 11px; }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 15px; max-width: none; }
  .section-heading h2, .loop-section h2 { font-size: 29px; }
  .decisions-section { padding: 52px 0; }
  .decision-grid, .scope-section, .people-grid, .approach-case { grid-template-columns: 1fr; }
  .decision-card { padding: 23px; }
  .card-top { margin-bottom: 15px; }
  .decision-card h3 { font-size: 22px; }
  .decision-card > p { font-size: 13px; }
  .loop-section { padding: 29px 24px; margin-bottom: 48px; }
  .demo-heading { align-items: start; flex-direction: column; gap: 22px; }
  .decision-loop { grid-template-columns: minmax(0,1fr); gap: 27px; margin-top: 30px; }
  .scope-section { gap: 28px; padding-bottom: 45px; }
  .scope-section h2 { max-width: none; }
  .scope-section p { font-size: 12px; }
  .studio-footer { padding: 27px 20px; flex-wrap: wrap; font-size: 11px; }
  .studio-footer > span:last-child { width: 100%; }
  .studio-approach { padding-top: 34px; }
  .approach-intro h1 { font-size: 40px; }
  .approach-section { padding: 30px 0; margin-top: 15px; }
  .approach-section h2, .approach-case h2 { font-size: 28px; }
  .people-grid { gap: 18px; }
  .approach-case { padding: 23px; gap: 30px; }
  .roadmap { grid-template-columns: 1fr 1fr; }
  .approach-close { display: block; }
  .workspace-intro { padding: 25px 20px 20px; }
  .workspace-intro h1 { font-size: 29px; }
  .workspace-intro > p:last-child { font-size: 12px; }
  .fleet-studio .fl-app { padding: 0 15px 25px; }
  .fleet-studio .fl-map { padding: 12px; }
  .fleet-studio .fl-clock { margin-left: 0; }
  .fleet-studio .fl-ledger { padding: 20px; }
  .fleet-studio .fl-rail { flex-wrap: nowrap; overflow-x: auto; top: 0; }
  .fleet-studio .fl-rail > * { flex: none; }
  .fleet-studio .fl-map-assumptions { font-size: 11px; }
}
@media print {
  .studio-header nav, .studio-button, .stage-tabs, .studio-status { display: none; }
  .studio-hero { grid-template-columns: minmax(0,1fr); }
  .hero-copy h1 { font-size: 35px; }
  .studio-overview, .studio-approach { max-width: none; padding: 0; }
  .depot-scene, .decision-card, .approach-section { break-inside: avoid; }
}
.fleet-studio h1[tabindex="-1"]:focus { outline: none; }
.workspace-intro > .studio-button { margin-top: 14px; font-size: 11px !important; }
.fleet-studio [data-role="setup"] { padding: 24px; display: grid; gap: 18px; }
.fleet-studio [data-role="setup"] header h2 { font-size: 24px; margin: 0 0 10px; }
.fleet-studio [data-role="setup"] header p { margin: 0; font-size: 10px; }
.fleet-studio [data-role="setup"] details { min-width: 0; padding: 0 0 16px; border-bottom: 1px solid var(--rule); }
.fleet-studio [data-role="setup"] summary { font-size: 11px; letter-spacing: .06em; color: #2c4d78; }
.fleet-studio [data-role="setup"] .fl-field { margin: 9px 0; }
.fleet-studio [data-role="setup"] .fl-field > span, .fleet-studio [data-role="setup"] p { font-size: 11px; color: #566579; }
.fleet-studio [data-role="setup"] textarea { width: 100%; min-height: 83px; padding: 12px; border: 1px solid var(--rule-strong); border-radius: 4px; font: inherit; font-size: 14px; color: var(--ink); background: var(--panel); resize: vertical; }
.fleet-studio [data-role="setup"] input, .fleet-studio [data-role="setup"] select { background: #ffffff; padding: 9px; border-radius: 4px; width: 100%; font-size: 12px; }
.fleet-studio [data-role="setup"] fieldset { min-width: 0; padding: 15px; border: 1px solid var(--rule); border-radius: 5px; }
.fleet-studio [data-role="checks"] { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; font-size: 11px; }
.fleet-studio [data-role="checks-section"] h3 { font-size: 11px; letter-spacing: .08em; }
.fleet-studio [data-role="freeze"] { justify-self: start; padding: 12px 26px; font-size: 13px; }
.fleet-studio [data-role="session-log"], .fleet-studio [data-role="reference-panels"] { padding: 20px; }
.fleet-studio [data-role="session-log"] h2, .fleet-studio [data-role="reference-panels"] h2 { font-size: 17px; }
.fleet-studio [data-role="session-log"] li { font-size: 11px; line-height: 1.85; overflow-wrap: anywhere; }
.fleet-studio .fl-verdict { padding: 25px; }
.fleet-studio .fl-verdict > h2 { font-size: 25px; }
.fleet-studio .fl-verdict h3 { font-size: 12px; letter-spacing: .08em; margin-top: 25px; }
.fleet-studio .fl-verdict p { font-size: 12px; }
.fleet-studio .fl-verdict dl { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 20px; }
.fleet-studio .fl-verdict dt, .fleet-studio .fl-verdict dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.fleet-studio .fl-verdict dd { text-align: right; font-size: 14px; }
.fleet-studio .fl-flow { gap: 16px; flex-wrap: wrap; }
.fleet-studio .fl-flow li { display: grid; gap: 8px; }
@media (min-width: 1000px) {
  .fleet-studio [data-role="setup"] { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px 27px; }
  .fleet-studio [data-role="setup"] > header, .fleet-studio [data-role="preset-chooser"], .fleet-studio [data-block="situation"], .fleet-studio [data-block="question"], .fleet-studio [data-role="checks-section"] { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .fleet-studio [data-role="setup"], .fleet-studio .fl-verdict { padding: 18px; }
  .fleet-studio .fl-verdict dl { gap: 5px 12px; }
  .fleet-studio[data-page="depots"] .fl-app:not([data-present="true"])[data-verdict-seed="false"] { grid-template-areas: "strip" "top" "charts" "map" "transport" "segmented" "side" "footer"; }
}
@media (max-width: 767.98px) {
  .studio-header nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; padding-bottom: 9px; gap: 3px; }
  .studio-header nav a { padding: 10px 8px; text-align: left; }
}

/* Fleet day: a readable operational simulation with explicit, finite resources. */
.operations-lab,.simulation-catalog{max-width:1500px;margin:0 auto;padding:42px 34px 60px;color:var(--ink);}
.ops-intro{max-width:1000px;margin-bottom:30px;}
.ops-intro h1,.catalog-intro h1{font-size:clamp(32px,3.7vw,52px);line-height:1.12;letter-spacing:-.045em;margin:13px 0 18px;}
.ops-intro>p:not(.eyebrow),.catalog-intro>.hero-lede{max-width:790px;font-size:15px;line-height:1.8;color:#566579;}
.ops-run-line{display:flex;align-items:center;gap:24px;margin-top:23px;}
.ops-run-line>.studio-button{font-size:15px;padding:15px 27px;}
.ops-status{font-size:12px;line-height:1.7;margin:0;color:#566579;}
.ops-status.is-stale{color:#875929;border-left:3px solid #bd914e;padding-left:12px;}
.ops-error{padding:13px 17px;background:#f9e6df;border-radius:5px;color:#8e3f31;font-size:13px;}
.ops-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:23px;align-items:start;}
.ops-controls{background:#ffffff;border:1px solid #dfe6ee;border-radius:10px;padding:22px;position:sticky;top:15px;max-height:calc(100vh - 30px);overflow:auto;}
.ops-controls>label{display:grid;gap:8px;font-size:12px;margin-top:15px;}
.ops-controls input,.ops-controls select,.ops-transport select,.ops-follow select,.catalog-search input,.catalog-search select{font:inherit;font-size:12px;min-height:var(--target);padding:9px 10px;color:var(--ink);border:1px solid #b8c7d8;border-radius:5px;background:#ffffff;min-width:0;}
.ops-controls select{width:100%;}
.ops-controls details{border-top:1px solid #dfe6ee;margin-top:20px;padding-top:6px;}
.ops-controls summary{min-height:var(--target);padding:12px 0;font-size:13px;font-weight:600;cursor:pointer;}
.ops-controls details p,.ops-settings-note{font-size:11px;line-height:1.8;color:#566579;}
.ops-fields{display:grid;grid-template-columns:1fr;gap:13px;padding:8px 0 6px;}
.ops-field{display:grid;gap:6px;min-width:0;font-size:12px;}
.ops-input-unit{display:grid;grid-template-columns:78px minmax(0,1fr);align-items:center;gap:10px;}
.ops-input-unit input{width:78px;}
.ops-input-unit small{font-size:11px;color:#566579;}
.ops-stage{min-width:0;background:#ffffff;border:1px solid #dfe6ee;border-radius:11px;padding:22px;}
.ops-stage-header{display:flex;align-items:center;justify-content:space-between;gap:15px;}
.ops-stage-header .eyebrow{font-size:10px;margin:0 0 9px;}
.ops-clock{font-size:34px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.ops-weather-chip{font-size:11px;padding:9px 12px;border:1px solid #dfe6ee;border-radius:20px;background:#f0f5fb;color:#2c4d78;}
.ops-frame-counts{display:flex;flex-wrap:wrap;gap:10px 18px;margin:20px 0 12px;padding-top:16px;border-top:1px solid #e5ebf3;}
.ops-frame-counts>span{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:#566579;}
.ops-frame-counts strong{font-size:15px;color:#2c4d78;}
.ops-frame-counts i{width:8px;height:8px;border-radius:50%;}
.ops-map{margin:0;max-width:100%;overflow:auto;}
.ops-map-pan>svg{display:block;width:100%;max-width:none;height:auto;min-width:0;}
.ops-map [data-car-id]{cursor:pointer;}
.ops-map figcaption{font-size:10px;line-height:1.7;margin-top:10px;color:#566579;}
.ops-map-empty{background:linear-gradient(155deg,#f0f5fc,#e5effb);min-height:340px;border:1px solid #d7e3f2;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px;}
.ops-map-empty h2{font-size:25px;letter-spacing:-.035em;margin:10px 0;}
.ops-map-empty p{max-width:440px;font-size:13px;line-height:1.8;}
.ops-empty-car{width:140px;height:90px;}
.ops-empty-car svg{width:100%;height:100%;}
.ops-map-empty .studio-button{margin-top:15px;}
.ops-transport{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:17px 0;border-bottom:1px solid #dfe6ee;}
.ops-transport .studio-button{font-size:11px;padding:10px 14px;}
.ops-transport select{margin-left:auto;}
.ops-transport input[type=range]{width:100%;margin:7px 0 0;min-height:32px;accent-color:#346c4a;}
.ops-lifecycle-section{padding-top:19px;}
.ops-lifecycle-section h3,.ops-follow h3{font-size:16px;letter-spacing:-.025em;margin:0 0 14px;}
.ops-lifecycle{display:flex;flex-wrap:wrap;gap:6px;}
.ops-lifecycle .studio-button{font-size:10px;padding:8px 11px;min-height:var(--target);}
.ops-stage-note{font-size:11px;line-height:1.75;color:#566579;}
.ops-follow{margin-top:20px;border-radius:7px;padding:20px;background:#f0f5fb;}
.ops-follow-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;}
.ops-follow-heading h3{margin:0;}
.ops-vehicle-detail{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;font-size:12px;margin:18px 0 12px;}
.ops-vehicle-detail>strong{font-size:17px;color:#2c4d78;}
.ops-vehicle-detail meter{accent-color:#46835e;width:130px;height:12px;}
.ops-vehicle-detail p{width:100%;margin:0;line-height:1.6;color:#566579;}
.ops-follow summary,.ops-vehicle-table summary,.ops-traffic-boundary summary{min-height:var(--target);font-size:12px;cursor:pointer;padding:13px 0;}
.ops-car-trail{list-style:none;padding:0;margin:0;}
.ops-car-trail li{font-size:11px;line-height:1.6;padding:8px 0;border-top:1px solid #dfe6ee;}
.ops-car-trail time{font-variant-numeric:tabular-nums;font-weight:600;margin-right:12px;}
.ops-vehicle-table{margin-top:14px;}
.ops-table-wrap{overflow-x:auto;max-width:100%;}
.ops-table-wrap table{border-collapse:collapse;width:100%;font-size:12px;}
.ops-table-wrap th,.ops-table-wrap td{padding:13px 10px;text-align:left;border-bottom:1px solid #dfe6ee;}
.ops-table-wrap th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#566579;background:#f3f6fa;}
.ops-table-wrap td{font-variant-numeric:tabular-nums;}
.ops-results,.ops-capacity{padding-top:40px;margin-top:38px;border-top:1px solid #dfe6ee;}
.ops-results h2,.ops-capacity h2,.catalog-outside h2{font-size:30px;letter-spacing:-.035em;line-height:1.25;margin:10px 0 24px;}
.ops-outcome-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.ops-outcome-cards>article{padding:23px;background:#ffffff;border:1px solid #dfe6ee;border-radius:8px;display:grid;gap:14px;}
.ops-outcome-cards>article>span{font-size:12px;color:#566579;}
.ops-outcome-cards strong{font-size:31px;letter-spacing:-.04em;line-height:1.2;font-variant-numeric:tabular-nums;}
.ops-outcome-cards small{font-size:11px;line-height:1.6;color:#566579;}
.ops-outcomes-note{font-size:12px;line-height:1.8;margin:18px 0 28px;color:#566579;}
.ops-service-breakdown{background:#edf4ff;border:1px solid #dfe6ee;border-radius:9px;padding:27px;}
.ops-service-breakdown h3{font-size:19px;letter-spacing:-.025em;margin:0 0 20px;}
.ops-service-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.ops-service-cards h4{font-size:12px;margin:0 0 12px;color:#566579;}
.ops-service-cards strong{font-size:17px;}
.ops-service-cards p,.ops-service-breakdown>p{font-size:11px;line-height:1.8;color:#566579;}
.ops-service-breakdown>p{margin-top:23px;}
.ops-service-breakdown>h3:not(:first-child){margin-top:28px;}
.ops-capacity>p,.ops-capacity-content>p{font-size:13px;line-height:1.8;color:#566579;max-width:900px;}
.ops-capacity>.studio-button{margin:12px 0 20px;}
.ops-capacity-answer{font-size:18px!important;line-height:1.6!important;color:#2c4d78!important;font-weight:600;}
.ops-capacity-tables{display:grid;grid-template-columns:1fr 1fr;gap:23px;margin-top:24px;}
.ops-capacity-tables>section{min-width:0;}
.ops-capacity-tables h3{font-size:15px;margin:0 0 15px;}
.ops-traffic-boundary{margin-top:35px;border-top:1px solid #dfe6ee;border-bottom:1px solid #dfe6ee;padding:6px 0;}
.ops-traffic-boundary p,.ops-model-boundary{font-size:11px;line-height:1.85;color:#566579;}
.ops-model-boundary{margin:23px 0 0;max-width:950px;}
.catalog-intro{max-width:1000px;}
.catalog-models{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0;}
.catalog-models article{border-left:3px solid #7395c6;padding:2px 20px;}
.catalog-models h2{font-size:19px;margin:0 0 12px;}
.catalog-models p{font-size:12px;line-height:1.85;color:#566579;}
.catalog-search{display:flex;gap:13px;margin:33px 0 15px;}
.catalog-search input{flex:1;max-width:580px;font-size:14px;padding:13px 16px;}
.catalog-count{font-size:11px;color:#566579;margin-bottom:23px;}
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;}
.catalog-card{background:#ffffff;border:1px solid #dfe6ee;border-radius:8px;padding:25px;display:flex;flex-direction:column;min-width:0;}
.catalog-card-meta{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.045em;text-transform:uppercase;color:#566579;}
.catalog-card h2{font-size:22px;letter-spacing:-.03em;line-height:1.3;margin:22px 0 12px;}
.catalog-question{font-size:13px;line-height:1.65;color:#2c4d78;}
.catalog-card dl{font-size:11px;line-height:1.8;}
.catalog-card dt{text-transform:uppercase;font-weight:600;letter-spacing:.07em;font-size:9px;margin-top:11px;color:#566579;}
.catalog-card dd{margin:3px 0 0;color:#566579;overflow-wrap:anywhere;}
.catalog-card details{font-size:11px;line-height:1.8;margin:10px 0 16px;}
.catalog-card summary{min-height:var(--target);padding:11px 0;cursor:pointer;}
.catalog-card>.studio-button{margin-top:auto;align-self:start;font-size:11px;}
.catalog-outside{padding-top:30px;margin-top:40px;border-top:1px solid #dfe6ee;}
.catalog-outside p{font-size:13px;line-height:1.85;max-width:900px;color:#566579;}
@media(min-width:768px){.ops-workspace{grid-template-columns:285px minmax(0,1fr);}}
@media(min-width:768px) and (max-width:1100px){.ops-workspace{grid-template-columns:250px minmax(0,1fr);gap:16px;}}
@media(max-width:1100px){
  .ops-controls{padding:18px;}.ops-stage{padding:17px;}
  .ops-stage-header{align-items:start;flex-direction:column;gap:12px;}
  .ops-outcome-cards{grid-template-columns:1fr 1fr;}
  .ops-capacity-tables{grid-template-columns:1fr;}
  .catalog-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:767.98px){
  .operations-lab,.simulation-catalog{padding:28px 18px 40px;}
  .ops-intro h1,.catalog-intro h1{font-size:37px;}
  .ops-intro>p:not(.eyebrow),.catalog-intro>.hero-lede{font-size:13px;}
  .ops-run-line{align-items:start;flex-direction:column;gap:13px;}
  .ops-workspace{grid-template-columns:1fr;}
  .ops-controls{position:static;max-height:none;padding:20px;}
  .ops-fields{grid-template-columns:1fr 1fr;gap:14px;}
  .ops-input-unit{grid-template-columns:1fr;gap:4px;}
  .ops-input-unit input{width:100%;}
  .ops-stage{padding:14px;}
  .ops-stage-header{flex-direction:row;align-items:center;}
  .ops-clock{font-size:27px;}
  .ops-weather-chip{font-size:9px;padding:8px;max-width:160px;line-height:1.5;}
  .ops-map-empty{min-height:280px;padding:25px;}
  .ops-map-empty h2{font-size:22px;}
  .ops-map-empty p{font-size:12px;}
  .ops-frame-counts{gap:10px;}
  .ops-frame-counts>span{font-size:9px;}
  .ops-transport select{margin-left:0;}
  .ops-lifecycle .studio-button{font-size:9px;padding:8px;}
  .ops-follow{padding:15px;}
  .ops-results,.ops-capacity{margin-top:26px;padding-top:28px;}
  .ops-results h2,.ops-capacity h2{font-size:26px;}
  .ops-outcome-cards{gap:10px;}
  .ops-outcome-cards>article{padding:16px;gap:10px;}
  .ops-outcome-cards strong{font-size:25px;}
  .ops-outcome-cards>article>span{font-size:11px;}
  .ops-service-breakdown{padding:20px;}
  .ops-service-cards{grid-template-columns:1fr 1fr;gap:22px 16px;}
  .catalog-models,.catalog-grid{grid-template-columns:1fr;}
  .catalog-search{flex-direction:column;}
  .catalog-card{padding:23px;}
}

.ops-depot-detail{border-top:1px solid #dfe6ee;margin-top:16px;}
.ops-depot-detail summary{min-height:var(--target);padding:14px 0;font-size:12px;cursor:pointer;}
.ops-depot-status{display:grid;gap:16px;}
.ops-depot-status article{padding:14px;background:#f3f6fa;border-radius:6px;min-width:0;}
.ops-depot-status h4{font-size:15px;margin:0 0 8px;}
.ops-depot-status p{font-size:11px;color:#566579;}

.ops-assumptions{font-size:11px;line-height:1.85;color:#566579;max-width:950px;padding-left:22px;}
.ops-assumptions li{margin-bottom:10px;}

.ops-map-pan{overflow:auto;max-height:65vh;border-radius:12px;}
.ops-map-tools{display:flex;align-items:center;gap:12px;margin:12px 0;}
.ops-map-tools select{font:inherit;font-size:11px;min-height:var(--target);border:1px solid #b8c7d8;background:#ffffff;border-radius:5px;color:#2c4d78;padding:8px;}
.ops-map-tools span{font-size:10px;color:#566579;}

/* Bay Area scene: native 3D, sourced roads, and readable controls. */
.bay-map{margin:0;min-width:0;}
.bay-map-controls{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:12px 0;}
.bay-map-controls select{min-height:var(--target);font:inherit;font-size:11px;padding:8px;border:1px solid #b8c7d8;border-radius:6px;background:#ffffff;max-width:100%;}
.bay-map-controls .studio-button{font-size:10px;padding:8px 11px;}
.bay-map-caption-top{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:10px;line-height:1.6;margin:3px 0 12px;color:#566579;}
.bay-render-status{font-weight:700;color:#2b6554;}
.bay-map-viewport{position:relative;isolation:isolate;height:580px;width:100%;overflow:hidden;border-radius:12px;border:1px solid #c7d3c7;background:#e5eadc;}
.bay-map-viewport>canvas,.bay-map-viewport>svg{display:block;width:100%;height:100%;position:absolute;inset:0;}
.bay-map-viewport>canvas{touch-action:none;cursor:grab;}
.bay-map-viewport>canvas:active{cursor:grabbing;}
.bay-map-viewport>canvas[hidden]{display:none;}
.bay-map-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.bay-city-label{position:absolute;left:0;top:0;pointer-events:auto;min-height:var(--target);font:inherit;font-size:10px;font-weight:600;padding:4px 8px;color:#315244;background:#ffffffeb;border:1px solid #aabfad;border-radius:6px;max-width:135px;line-height:1.2;box-shadow:0 2px 5px #233e3310;cursor:pointer;}
.bay-city-label.is-airport{color:#4b5d88;border-color:#9eaec7;background:#f1f5fcf5;}
.bay-city-label.is-focused{border:2px solid #427d61;z-index:2;}
.bay-map figcaption{font-size:10px;line-height:1.75;color:#566579;padding:12px 2px;}
.bay-map figcaption a{color:#426e5d;text-decoration:underline;}
.bay-place-picker summary,.bay-profile-editor summary{min-height:var(--target);cursor:pointer;line-height:1.6;}
.bay-place-picker summary strong{font-weight:400;}
.bay-place-picker p,.bay-profile-editor p{font-size:11px;line-height:1.7;color:#53694e;}
.bay-place-picker small{display:block;font-size:10px;line-height:1.6;color:#64785f;}
.bay-place-picker .studio-button{font-size:10px;padding:7px;margin:5px 5px 5px 0;}
.bay-place-options{display:grid;grid-template-columns:1fr;margin:12px 0;}
.bay-place-options label{display:flex;align-items:center;gap:10px;font-size:11px;min-height:var(--target);cursor:pointer;}
.bay-place-options input{accent-color:#53836b;width:18px;height:18px;}
.bay-fleet-picker{padding:19px 0;border-bottom:1px solid #cfddc9;}
.bay-fleet-picker h3,.bay-profile-editor h3{font-size:14px;line-height:1.5;margin:0 0 14px;}
.bay-profile-editor section{padding:12px 0;display:grid;gap:12px;}
.bay-mix-label{font-size:12px;line-height:1.7;color:#3e6750;}
.bay-mix-shortcuts{display:flex;gap:5px;flex-wrap:wrap;}
.bay-mix-shortcuts .studio-button{font-size:9px;padding:6px 8px;}
.bay-mix-results p{font-size:12px;line-height:1.8;color:#59715f;}
.operations-lab .ops-map-empty{min-height:0;padding:17px 20px;text-align:left;border-style:solid;display:flex;gap:15px;align-items:center;flex-wrap:wrap;}
.operations-lab .ops-map-empty .ops-empty-car{width:52px;height:40px;margin:0;}
.operations-lab .ops-map-empty h2{font-size:18px;margin:0;}
.operations-lab .ops-map-empty p{font-size:11px;margin:0;flex:1;min-width:150px;}
.operations-lab .ops-map-empty .studio-button{font-size:10px;margin:0;}
.operations-lab .ops-map-empty[hidden]{display:none;}
@media(max-width:767.98px){
 .bay-map-viewport{height:500px;}
 .bay-map-controls{gap:5px;}
 .bay-map-controls select{width:100%;}
 .bay-map-controls .studio-button{flex:1;font-size:9px;}
 .bay-map-caption-top{align-items:start;flex-direction:column;gap:4px;}
 .bay-city-label{font-size:9px;max-width:105px;padding:3px 5px;}
 .bay-place-options{grid-template-columns:1fr 1fr;}
 .bay-mix-label{font-size:13px;}
}
.bay-label-leaders{position:absolute;width:100%;height:100%;inset:0;pointer-events:none;}
.bay-city-label{min-height:var(--target);height:44px;box-shadow:0 1px 3px #233e330c;}
.bay-profile-portraits{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 0;}
.bay-profile-portraits figure{margin:0;min-width:0;}
.bay-vehicle-portrait{width:100%;height:auto;display:block;border-radius:7px;background:#d9e9e5;}
.bay-profile-portraits figcaption{font-size:10px;color:#4d6a58;text-align:center;line-height:1.5;margin-top:7px;}
.ops-service-breakdown summary{min-height:var(--target);padding:14px 0;font-size:12px;cursor:pointer;}

/* Street lab: a quiet operating canvas with progressive disclosure. */
.street-lab{padding:36px 20px 64px;color:#173348;background:#f7f9fc;}
.street-lab[hidden]{display:none;}
.street-intro{max-width:920px;margin:0 auto 32px;}
.street-intro h1{font-size:clamp(38px,5.5vw,72px);font-weight:500;line-height:1.05;letter-spacing:-.055em;margin:18px 0 20px;}
.street-intro h1 span{color:#3772ba;}
.street-intro .hero-lede{max-width:680px;font-size:18px;line-height:1.6;color:#52697c;}
.street-scope-line{font-size:12px;color:#52697c;line-height:1.8;}
.street-presets{display:flex;flex-wrap:wrap;gap:8px;max-width:1440px;margin:0 auto 28px;}
.street-presets .studio-button{background:#fff;border:1px solid #d9e3ed;border-radius:30px;padding:10px 18px;font-size:12px;}
.street-presets [aria-pressed="true"]{background:#174d87;color:#fff;border-color:#174d87;}
.street-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:1440px;margin:auto;align-items:start;}
.street-settings{background:#fff;border:1px solid #dce5ee;border-radius:16px;padding:22px;min-width:0;}
.street-inputs{border:0;margin:0;padding:0;min-width:0;}
.street-inputs legend{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#54718a;margin-bottom:20px;font-weight:600;}
.street-field{display:grid;gap:7px;font-size:12px;margin:0 0 17px;color:#334e63;}
.street-field>span:last-child{display:flex;align-items:center;gap:9px;}
.street-field input{width:84px;min-height:var(--target);border:1px solid #cad8e4;border-radius:8px;background:#fbfcfd;padding:8px 10px;font-size:16px;color:#173348;}
.street-field small{font-size:10px;color:#637b8f;}
.street-lab select{min-height:var(--target);max-width:100%;padding:8px 12px;border:1px solid #cad8e4;border-radius:8px;background:#fff;font-size:12px;color:#173348;}
.street-settings details{border-top:1px solid #e3eaf1;}
.street-lab summary{min-height:var(--target);padding:14px 0;cursor:pointer;font-size:12px;line-height:1.5;}
.street-settings details p,.street-input-note{font-size:11px;line-height:1.7;color:#607589;}
.street-settings>.studio-button{width:100%;margin-top:10px;font-size:12px;}
.street-status{padding:12px 0 0;margin:8px 0 0;color:#456481;font-size:12px;line-height:1.6;}
.street-main{min-width:0;}
.street-replay{background:#fff;border:1px solid #dce5ee;border-radius:16px;overflow:hidden;}
.street-replay-heading{padding:24px 24px 0;display:flex;align-items:start;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.street-replay-heading h2{font-size:24px;line-height:1.25;letter-spacing:-.025em;max-width:540px;margin:8px 0;}
.street-geography-tag{font-size:9px;letter-spacing:.07em;line-height:1.6;padding-top:2px;color:#718699;}
.street-replay>p{margin:10px 24px;font-size:12px;line-height:1.7;color:#5b7185;max-width:760px;}
.street-replay .street-advice{color:#365d82;}
.street-clock-row{padding:14px 24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;border-top:1px solid #e5ecf2;margin-top:20px;}
.street-clock{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums;color:#204c78;}
.street-replay-count{font-size:11px;color:#6a7d8e;line-height:1.6;}
.street-map{margin:0;}
.street-map-controls{display:flex;flex-wrap:wrap;gap:7px;padding:8px 16px 12px;}
.street-map-controls .studio-button{padding:7px 12px;font-size:11px;}
.street-map-meta{padding:8px 20px;font-size:10px;color:#617886;display:flex;justify-content:space-between;gap:10px;background:#edf3f2;}
.street-viewport{position:relative;height:520px;background:#eaf0ed;overflow:hidden;}
.street-viewport>canvas,.street-viewport>svg,.street-labels{position:absolute;inset:0;width:100%;height:100%;}
.street-viewport>canvas{touch-action:none;cursor:grab;}
.street-labels{pointer-events:none;}
.street-road-label{position:absolute;top:0;left:0;padding:4px 8px;background:#fffffff0;border:1px solid #cad8d9;border-radius:5px;color:#405b67;font-size:10px;line-height:1.3;box-shadow:0 2px 6px #1a48520a;}
.street-road-label[hidden]{display:none;}
.street-map figcaption{padding:12px 20px;font-size:10px;line-height:1.7;color:#728393;}
.street-map figcaption a{color:#496d8b;}
.street-playback{display:flex;flex-wrap:wrap;gap:6px;padding:12px 20px 0;}
.street-playback .studio-button{padding:8px 12px;font-size:11px;}
.street-replay>input[type="range"]{display:block;width:calc(100% - 40px);margin:8px 20px;min-height:var(--target);accent-color:#306aac;}
.street-legend{display:flex;flex-wrap:wrap;gap:8px 20px;padding:0 20px 20px;font-size:10px;color:#5c7183;}
.street-replay-variant{display:flex;flex-wrap:wrap;gap:8px;padding:8px 24px;}
.street-replay-variant[hidden]{display:none;}
.street-inspect{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:18px;}
.street-inspect>div{background:#fff;border:1px solid #dce5ee;border-radius:14px;padding:22px;min-width:0;}
.street-inspect h3{font-size:18px;line-height:1.5;}
.street-inspect p{font-size:12px;line-height:1.7;overflow-wrap:anywhere;}
.street-inspect .studio-button{font-size:11px;padding:8px 12px;}
.street-inspect select{margin:0 8px 8px 0;}
.street-car-state{color:#316fa3;font-weight:600;}
.street-event-log{list-style:none;margin:14px 0 0;padding:0;font-size:11px;line-height:1.7;}
.street-event-log li{border-top:1px solid #e5ecf2;padding:8px 0;}
.street-event-log time{display:block;font-size:10px;color:#70869a;font-variant-numeric:tabular-nums;}
.street-queue-list{display:grid;gap:7px;}
.street-queue-list .studio-button{justify-content:space-between;text-align:left;border:1px solid #e1e8ee;color:#536d80;}
.street-block-detail{font-size:11px;color:#5b7184;}
.street-results,.street-learning,.street-method{max-width:1440px;margin:36px auto 0;padding:28px;background:#fff;border:1px solid #dce5ee;border-radius:16px;}
.street-results h2,.street-learning h2{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin:12px 0 18px;}
.street-results h3{font-size:19px;margin-top:30px;}
.street-results p,.street-learning p,.street-method p{font-size:12px;line-height:1.8;color:#5a7185;}
.street-metrics,.street-destination-results,.street-hotspot-results,.street-learning-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;}
.street-metrics article{padding:22px 20px;background:#f1f6fb;border-radius:12px;display:grid;gap:12px;min-width:0;}
.street-metrics article>span{font-size:12px;color:#466785;}
.street-metrics article>strong{font-size:30px;font-weight:500;letter-spacing:-.04em;}
.street-metrics small{font-size:11px;line-height:1.7;color:#648095;}
.street-destination-results article{padding:14px 0;display:grid;gap:8px;border-top:1px solid #e3eaf0;}
.street-destination-results span{font-size:12px;color:#637f93;}
.street-destination-results strong{font-size:22px;font-weight:500;}
.street-destination-results small{font-size:10px;color:#6c8293;}
.street-hotspot-results article{display:grid;gap:10px;padding:20px;border:1px solid #e0e8ef;border-radius:10px;min-width:0;}
.street-hotspot-results strong{font-size:13px;line-height:1.5;}
.street-hotspot-results span{font-size:12px;color:#4b6a80;}
.street-hotspot-results small{font-size:11px;line-height:1.7;color:#6a8092;}
.street-hotspot-results .studio-button{font-size:11px;}
.street-table-wrap{max-width:100%;overflow-x:auto;}
.street-comparison{width:100%;border-collapse:collapse;font-size:12px;line-height:1.6;}
.street-comparison caption{text-align:left;font-size:11px;padding:12px 0;color:#6c8293;}
.street-comparison th,.street-comparison td{padding:14px 12px;text-align:left;border-bottom:1px solid #e0e8ef;}
.street-comparison thead{background:#edf4fa;}
.street-comparison tbody th{font-weight:500;}
.street-learning-grid article{padding:20px;background:#f6f9fc;border-radius:12px;}
.street-learning-grid h3{font-size:18px;line-height:1.5;font-weight:500;}
.street-method{background:#edf3f8;}
.street-method summary{padding:0;font-size:13px;}
@media(min-width:768px){
 .street-lab{padding:54px 36px 80px;}
 .street-intro{margin-left:0;}
 .street-layout{grid-template-columns:280px minmax(0,1fr);}
 .street-metrics{grid-template-columns:repeat(4,minmax(0,1fr));}
 .street-destination-results,.street-hotspot-results,.street-learning-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
 .street-inspect{grid-template-columns:repeat(2,minmax(0,1fr));}
 .catalog-models{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:767.98px){
 .street-intro .hero-lede{font-size:16px;}
 .street-settings{padding:18px;}
 .street-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 .street-inputs>details,.street-inputs>.street-field:has(select){grid-column:1/-1;}
 .street-field{margin-bottom:4px;}
 .street-field>span:last-child{flex-wrap:wrap;gap:3px;}
 .street-field input{max-width:100%;}
 .street-viewport{height:420px;}
 .street-map-controls select{width:100%;}
 .street-map-meta{flex-direction:column;gap:4px;}
 .street-replay-heading{padding:20px 18px 0;}
 .street-replay-heading h2{font-size:22px;}
 .street-replay>p{margin:10px 18px;}
 .street-results,.street-learning,.street-method{padding:20px;}
 .street-results h2,.street-learning h2{font-size:26px;}
 .street-comparison{font-size:11px;}
 .street-comparison th,.street-comparison td{padding:10px 6px;}
}

/* Original film introduction. Reading space above the car preserves the central composition. */
.studio-film-hero { position: relative; isolation: isolate; margin-top: 28px; height: clamp(560px, calc(100svh - 140px), 740px); min-height: 560px; overflow: hidden; border-radius: 18px; background: #143b40; color: #fff; }
.hero-film { position: absolute; inset: 0; background: #bdd9dc; }
.film-poster, .film-video { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; inset: 0; }
.film-video { opacity: 0; }
.film-video.is-playing { opacity: 1; }
.film-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(9,35,40,.97) 0%,rgba(9,35,40,.93) 26%,rgba(9,35,40,.48) 42%,rgba(9,35,40,0) 63%); pointer-events: none; }
.film-copy { position: relative; z-index: 2; display: grid; grid-template-columns: 1.12fr 1fr; column-gap: 52px; padding: 36px 42px; pointer-events: none; }
.film-copy .eyebrow { grid-column: 1; color: #b9e1d9; letter-spacing: .13em; }
.film-copy h1 { grid-column: 1; grid-row: 2 / 5; color: #fff; font-size: clamp(44px,4.3vw,62px); line-height: 1.04; letter-spacing: -.045em; margin: 12px 0 0; max-width: 620px; }
.film-lede { grid-column: 2; grid-row: 2; color: #f0f5f3; font-size: 17px; line-height: 1.65; max-width: 450px; margin: 12px 0 0; }
.film-copy .hero-actions { grid-column: 2; grid-row: 3; margin-top: 20px; }
.film-copy .hero-duration { grid-column: 2; grid-row: 4; color: #d7e3e1; }
.film-copy .studio-button { pointer-events: auto; }
.film-copy .studio-button-primary { color: #103b38; background: #d9f3b1; border-color: #d9f3b1; }
.film-copy .hero-actions > .studio-button:not(.studio-button-primary) { color: white; border-color: #9bb4b2; background: #153c40; padding-inline: 16px; }
.film-control { position: absolute; z-index: 3; right: 24px; bottom: 24px; min-width: 108px; min-height: 44px; border-radius: 30px; border: 1px solid #ffffff90; color: white; background: #12373bec; font: inherit; cursor: pointer; padding: 10px 18px; }
.film-status { position: absolute; bottom: 78px; right: 24px; z-index: 3; color: #fff; background: #12373b; max-width: 230px; border-radius: 5px; font-size: 12px; }
.film-status:not(:empty) { padding: 8px 12px; }
.film-caption { display: flex; justify-content: space-between; gap: 32px; padding: 16px 2px 34px; align-items: start; }
.film-caption p { font-size: 12px; line-height: 1.6; margin: 0; color: #50616c; max-width: 670px; }
.film-caption strong { display: block; color: #24464d; margin-bottom: 3px; }
.film-caption .creator-credit { max-width: 260px; }
.depot-introduction { padding: 35px 0 28px; }
@media (max-width: 1000px) {
  .studio-film-hero { display: flex; flex-direction: column; height: auto; min-height: 0; margin-top: 18px; border-radius: 12px; }
  .hero-film { position: relative; height: auto; aspect-ratio: 16 / 9; order: 0; }
  .film-scrim { display: none; }
  .film-copy { width: 100%; padding: 28px 28px 32px; background: #143b40; order: 1; column-gap: 30px; }
  .film-copy h1 { font-size: 42px; }
  .film-lede { font-size: 16px; }
  .film-caption { flex-direction: column; gap: 10px; padding-bottom: 20px; }
}
@media (max-width: 650px) {
  .film-copy { display: block; padding: 28px 24px 32px; }
  .film-copy h1 { font-size: clamp(38px,9vw,52px); margin: 18px 0; }
  .film-control { right: 14px; bottom: 14px; }
  .depot-introduction { padding-top: 24px; }
}

/* Readiness disclosures stay usable without widening the page or hiding exact values. */
.ops-readiness-result,.ops-readiness-comparison{min-width:0;overflow-wrap:anywhere;}
.ops-readiness-result pre,.ops-readiness-comparison pre{max-height:28rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;padding:14px;background:#f3f6fa;}
.ops-readiness-result details,.ops-readiness-comparison details{margin:16px 0;}
.ops-readiness-result summary,.ops-readiness-comparison summary{cursor:pointer;padding:12px 0;}
.ops-readiness-result p,.ops-readiness-comparison p,.ops-readiness-result li,.ops-readiness-comparison li{line-height:1.6;}

/* Optional model inputs and exact recorded projections. */
.ops-advanced-controls h3 { margin: 1rem 0 .5rem; }
.ops-advanced-result pre, .ops-advanced-comparison pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28rem; overflow: auto; font-size: .8rem; }
.ops-advanced-result section, .ops-airport-frame { margin-block: 1rem; }
.ops-experiment-settings { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 768px) { .ops-experiment-settings { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); } }
.ops-experiment-settings input, .ops-experiment-settings select { min-width: 0; max-width: 100%; }
.ops-depot-status td { overflow-wrap: anywhere; }
.ops-decision-guide, .ops-launch-rehearsal {margin:1.2rem 0;padding:1.3rem;border:1px solid #d4ded0;border-radius:16px;background:#f8faf5;min-width:0;}
.ops-decision-guide h2 {font-size:1.35rem;line-height:1.3;max-width:70ch;}
.ops-decision-guide dl {display:grid;grid-template-columns:minmax(7rem, 1fr) minmax(0, 5fr);gap:.45rem 1rem;max-width:95ch;}
.ops-decision-guide dt {font-weight:650;color:#335644;}
.ops-decision-guide dd {margin:0;line-height:1.5;}
.ops-launch-rehearsal > summary {font-size:1.15rem;font-weight:650;cursor:pointer;}
.launch-settings, .launch-results, .launch-validation, .launch-site {min-width:0;}
.launch-site {border-top:1px solid #d4ded0;padding-top:1rem;margin-top:1rem;}
.launch-results pre {overflow:auto;max-height:24rem;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;}
.launch-results td {max-width:32rem;overflow-wrap:anywhere;white-space:normal;}
.launch-results caption, .launch-settings caption, .launch-validation caption {text-align:left;font-weight:650;padding:.6rem 0;}
.ops-result-learning {border-left:3px solid #5c866c;padding:.4rem 1rem;margin:1rem 0;max-width:90ch;}
@media(max-width:600px){.ops-decision-guide dl {grid-template-columns:1fr;gap:.25rem;}.ops-decision-guide dd {margin-bottom:.7rem;}.ops-launch-rehearsal,.ops-decision-guide {padding:.85rem;}}

/* Addressable views and inspectable setup snapshots retain the existing visual system. */
a.studio-button, .studio-header nav a { display: inline-flex; align-items: center; text-decoration: none; box-sizing: border-box; }
.studio-header nav a { font-weight: 500; }
.studio-skip { position: absolute; left: 12px; top: -100px; z-index: 79; background: white; color: #174fa7; padding: 14px 20px; border: 2px solid currentColor; }
.studio-skip:focus { top: 12px; }
.studio-workspace { min-width: 0; }
.studio-footer > div { max-width: 380px; }
.studio-footer p { margin: 8px 0 0; line-height: 1.6; }
.studio-footer nav { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 14px; }
.studio-footer nav .studio-button { border: 0; padding: 8px 0; font-size: 11px !important; }
.film-illustration-label { position: absolute; z-index: 2; bottom: 16px; left: 24px; color: #fff; background: #123236; border-radius: 4px; padding: 6px 9px; font-size: 10px; letter-spacing: .02em; }
.setup-sharing { border: 1px solid var(--rule); border-radius: 12px; padding: 14px 18px; margin: 20px 0; background: #f7f9fc; color: #314f68; }
.setup-sharing > summary { cursor: pointer; min-height: var(--target); font-size: 13px; font-weight: 600; }
.setup-sharing p { font-size: 12px; line-height: 1.6; max-width: 85ch; }
.setup-share-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.setup-share-controls label { display: grid; gap: 5px; font-size: 12px; min-width: 0; }
.setup-sharing select, .setup-sharing input { min-height: 44px; max-width: 100%; color: #233f56; background: white; border: 1px solid #b8c9d9; border-radius: 5px; padding: 8px; font: inherit; }
.setup-share-output { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.setup-share-output input { width: 100%; min-width: 0; box-sizing: border-box; font-size: 12px; }
.setup-sharing [hidden] { display: none !important; }
.setup-share-status { font-weight: 550; overflow-wrap: anywhere; }
.ops-regional-power {border:1px solid #bdd2c2;border-radius:12px;background:#f4f8f3;padding:20px;margin:20px 0;min-width:0;}
.ops-regional-power > summary {font-size:1.15rem;font-weight:650;cursor:pointer;min-height:var(--target);}
.ops-regional-power p {line-height:1.6;max-width:100ch;overflow-wrap:anywhere;}
.ops-regional-power input,.ops-regional-power select {min-height:44px;max-width:100%;box-sizing:border-box;}
.regional-power-graph {margin:16px 0;max-width:760px;}
.regional-power-graph svg {width:100%;height:auto;display:block;}
.regional-power-graph figcaption {font-size:12px;line-height:1.5;}
.ops-regional-power pre {overflow:auto;max-height:24rem;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;}
.ops-regional-power caption {text-align:left;font-weight:650;padding:.7rem 0;}
.ops-regional-power .result-provenance {font-size:12px;overflow-wrap:anywhere;}
.ops-regional-power details {margin:12px 0;}
@media(max-width:600px){.ops-regional-power {padding:12px;}.ops-regional-power .ops-fields {grid-template-columns:1fr;}}
.studio-workspace > .setup-sharing { margin: 0 max(40px, calc((100vw - 1320px)/2)) 24px; }
.street-result-details pre, .ops-result-details pre { max-width: 100%; max-height: 380px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.street-result-provenance, .ops-result-provenance { font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.studio-route-error { padding: 60px max(24px, calc((100vw - 1100px)/2)); min-height: 50vh; }
.studio-route-error p { max-width: 70ch; overflow-wrap: anywhere; }
@media(max-width: 767px) {
  .film-illustration-label { left: 12px; top: 12px; bottom: auto; font-size: 9px; }
  .studio-workspace > .setup-sharing { margin-inline: 20px; }
  .setup-share-controls > label, .setup-share-controls > button { width: 100%; }
  .setup-share-controls select { width: 100%; }
  .setup-sharing { padding: 12px; }
  .studio-footer nav { width: 100%; }
}