/* ==========================================================================
   /explore/ — interactive operator tour
   Dense product UI: hairline panes, mono labels, a crisp SVG site map.
   Desktop (>=1180px) is a four-pane workspace; narrower screens use tabs.
   ========================================================================== */

/* ---------- Intro ---------- */
.ex-intro {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(32px, 4.5vw, 64px));
  padding-bottom: clamp(24px, 3vw, 40px);
  overflow: hidden;
}
.ex-intro__inner {
  position: relative;
  z-index: 1;
}
.ex-intro__grid {
  display: grid;
  gap: 22px 64px;
  margin-top: clamp(20px, 3vw, 36px);
}
.ex-intro__title {
  margin-top: 16px;
  max-width: 14ch;
}
.ex-intro__lede {
  max-width: 46ch;
  color: var(--fg-2);
  font-size: var(--step-1);
  line-height: 1.55;
  text-wrap: pretty;
}
.ex-sample {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 10px;
  border: 1px solid rgba(126, 234, 243, 0.3);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--cyan-200);
  background: rgba(70, 219, 232, 0.05);
}
.ex-sample__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 0 3px rgba(70, 219, 232, 0.16);
  flex: none;
}
.ex-intro__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.ex-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--fg-2);
}
.ex-steps li {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.ex-steps span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.ex-steps__link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--rule-3);
  text-underline-offset: 0.25em;
}
.ex-steps__link:hover {
  text-decoration-color: var(--accent);
}
@media (min-width: 960px) {
  .ex-intro__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

/* ---------- Stage and app shell ---------- */
.ex-stage {
  position: relative;
  padding-bottom: clamp(64px, 8vw, 120px);
}
.ex-wrap {
  width: min(100% - 2 * var(--gutter), 1600px);
  margin-inline: auto;
}
.ex-noscript {
  margin-bottom: var(--space-5);
}
.ex-app {
  --ex-bg: #060b15;
  --ex-raise: #0a1221;
  --ex-line: rgba(160, 185, 215, 0.13);
  --ex-line-2: rgba(160, 185, 215, 0.24);
  --ex-pad: 14px;
  position: relative;
  border: 1px solid var(--line-d2);
  border-radius: var(--radius-l);
  background: var(--ex-bg);
  box-shadow:
    0 50px 120px -60px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  overflow: clip;
  font-size: 0.9rem;
  line-height: 1.45;
}
/* F9: enhancement fails open. Interactive controls appear, and the static
   fallback hides, only after explore.js has finished initialising and set
   .is-ready on the app. If the module is blocked or throws during start-up,
   the fallback copy and every pane stay visible. */
.ex-app:not(.is-ready) .ex-js {
  display: none !important;
}
.ex-app.is-ready .ex-nojs {
  display: none !important;
}
.ex-app:not(.is-ready) .ex-pane[hidden] {
  display: block !important;
}

/* Toolbar */
.ex-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 12px var(--ex-pad);
  border-bottom: 1px solid var(--ex-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
}
.ex-site {
  flex: 1 1 220px;
  min-width: 0;
}
.ex-site__name {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.ex-site__meta {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.ex-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ex-clock__readout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 4px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}
.ex-clock__time {
  min-width: 8ch;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.ex-clock__state {
  text-transform: uppercase;
}
.ex-clock__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber-400);
}
.ex-app.is-running .ex-clock__dot {
  background: var(--cyan-400);
  animation: ex-breathe 2.4s ease-in-out infinite;
}
@keyframes ex-breathe {
  50% {
    box-shadow: 0 0 0 4px rgba(70, 219, 232, 0.18);
  }
}

/* Segmented control (native radios) */
.ex-seg {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--ex-line-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
}
.ex-seg__opt {
  position: relative;
  display: flex;
  min-width: 0;
}
.ex-seg__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ex-seg__opt span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 560;
  color: var(--fg-2);
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.ex-seg__opt:hover span {
  color: var(--fg);
}
.ex-seg__opt input:checked + span {
  background: var(--cyan-400);
  color: var(--ink-950);
}
.ex-seg__opt input:focus-visible + span {
  outline: 2px solid var(--cyan-300);
  outline-offset: 2px;
}
.ex-seg--sm span {
  min-height: 30px;
  padding: 0 11px;
  font-size: 0.78rem;
}
.ex-seg--sm .ex-seg__opt input:checked + span {
  background: rgba(70, 219, 232, 0.16);
  color: var(--cyan-200);
}
.ex-seg b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  opacity: 0.85;
}

/* Buttons and small controls */
.ex-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ex-line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 0.84rem;
  font-weight: 560;
  line-height: 1.1;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.ex-btn:hover {
  border-color: var(--cyan-400);
  color: var(--cyan-200);
}
.ex-btn[aria-pressed='true'] {
  border-color: rgba(245, 180, 84, 0.55);
  background: rgba(245, 180, 84, 0.1);
  color: var(--amber-300);
}
.ex-btn--primary {
  border-color: transparent;
  background: var(--cyan-400);
  color: var(--ink-950);
}
.ex-btn--primary:hover {
  background: var(--cyan-300);
  color: var(--ink-950);
}
.ex-btn--warm {
  border-color: rgba(245, 180, 84, 0.5);
  color: var(--amber-300);
}
.ex-btn--warm:hover {
  border-color: var(--amber-400);
  background: rgba(245, 180, 84, 0.1);
  color: var(--amber-300);
}
.ex-btn--ghost {
  border-color: transparent;
  color: var(--fg-2);
}
.ex-btn--sm {
  min-height: 34px;
  padding: 0 13px;
  font-size: 0.8rem;
}
.ex-btn--xs {
  min-height: 30px;
  padding: 0 11px;
  font-size: 0.74rem;
}
.ex-btn:disabled,
.ex-btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--ex-line-2);
  background: transparent;
  color: var(--fg-2);
}
.ex-link {
  display: inline;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--cyan-300);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(126, 234, 243, 0.4);
  text-underline-offset: 3px;
}
.ex-link:hover {
  text-decoration-color: currentColor;
}
.ex-close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--ex-line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--fg-2);
}
.ex-close:hover {
  border-color: var(--cyan-400);
  color: var(--fg);
}
.ex-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 2px 2px 0 0;
  padding: 0 9px;
  border: 1px solid var(--ex-line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.ex-chip:hover {
  border-color: var(--cyan-400);
  color: var(--cyan-200);
}

/* Fields */
.ex-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.ex-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ex-input,
.ex-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--ex-line-2);
  border-radius: var(--radius-s);
  background: rgba(3, 6, 11, 0.6);
  color: var(--fg);
  font-size: 0.88rem;
  line-height: 1.35;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.ex-select {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 52%,
    calc(100% - 12px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.ex-select--sm {
  min-height: 32px;
  padding-block: 4px;
  font-size: 0.8rem;
  border-radius: 999px;
  padding-left: 12px;
}
.ex-input:hover,
.ex-select:hover {
  border-color: var(--line-d3);
}
.ex-input:focus,
.ex-select:focus {
  outline: none;
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 3px rgba(70, 219, 232, 0.2);
}
.ex-input::placeholder {
  color: var(--fg-3);
}
.ex-textarea {
  min-height: 60px;
  resize: vertical;
}
.ex-input-wrap {
  position: relative;
}
.ex-input-wrap .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  pointer-events: none;
}
.ex-input-wrap .ex-input {
  padding-left: 38px;
  min-height: 44px;
  font-size: 0.95rem;
}
.ex-input[type='search']::-webkit-search-cancel-button {
  filter: grayscale(1) brightness(1.6);
}
.ex-hint {
  font-size: 0.78rem;
  color: var(--fg-3);
}
.ex-hint__lead {
  margin-right: 4px;
}

/* Tabs (narrow screens) */
.ex-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 6;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--ex-line);
  background: rgba(6, 11, 21, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.ex-tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--fg-2);
  font-size: 0.86rem;
  font-weight: 560;
}
.ex-tab[aria-selected='true'] {
  border-bottom-color: var(--cyan-400);
  color: var(--fg);
}
.ex-tab:focus-visible {
  outline-offset: -3px;
}
.ex-tab__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(245, 180, 84, 0.16);
  color: var(--amber-300);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.ex-tab__badge:empty {
  display: none;
}

/* Panes */
.ex-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ex-pane {
  position: relative;
  min-width: 0;
  padding: var(--ex-pad);
}
.ex-pane__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 12px;
}
.ex-pane__head--tools {
  align-items: center;
}
.ex-pane__title {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.ex-pane__title:focus {
  outline: none;
}
.ex-pane__title:focus-visible {
  outline: 2px solid var(--cyan-400);
}
.ex-pane__num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--cyan-400);
}
.ex-pane__meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.ex-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ex-tools .ex-select {
  width: auto;
  min-width: 168px;
}
.ex-empty {
  padding: 18px 4px;
  color: var(--fg-2);
  font-size: 0.86rem;
  list-style: none;
}
.ex-dim {
  color: var(--fg-3);
}
.is-warn {
  color: var(--amber-300);
}
.ex-code-inline {
  font-family: var(--font-mono);
  font-size: 0.82em;
  letter-spacing: 0.02em;
  color: var(--cyan-200);
}
.ex-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--ex-line-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
}
.ex-tag--accent {
  border-color: rgba(70, 219, 232, 0.45);
  color: var(--cyan-300);
}
.ex-tag--warm {
  border-color: rgba(245, 180, 84, 0.5);
  color: var(--amber-300);
}

/* ---------- Map ---------- */
.ex-map {
  position: relative;
  border: 1px solid var(--ex-line);
  border-radius: var(--radius);
  background: #08101d;
  overflow: hidden;
}
.ex-map .ticks {
  inset: 10px;
  --t: 12px;
  --c: rgba(126, 234, 243, 0.55);
}
.ex-map__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.ex-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 600;
  min-width: 0;
  user-select: none;
  -webkit-user-select: none;
}
.ex-map[data-zoom='true'] .ex-svg {
  min-width: 980px;
}
.ex-zoom {
  margin-left: auto;
}
.ex-map__note {
  position: absolute;
  left: 16px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  pointer-events: none;
}
.ex-map__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  margin-top: 10px;
}
.ex-map__hint {
  font-size: 0.76rem;
  color: var(--fg-3);
}
.ex-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}
.ex-legend li,
.ex-chart__legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ex-key {
  display: inline-block;
  width: 10px;
  height: 14px;
  border-radius: 2.5px;
  flex: none;
}
.ex-key--occ {
  background: #61798f;
}
.ex-key--empty {
  border: 1px solid rgba(160, 185, 215, 0.45);
}
.ex-key--match {
  background: var(--cyan-400);
}
.ex-key--sel {
  background: #f2fdff;
  box-shadow: 0 0 0 2px rgba(126, 234, 243, 0.6);
}
.ex-key--exc {
  background: var(--amber-400);
}
.ex-key--unknown {
  border: 1px solid rgba(245, 180, 84, 0.6);
  background: repeating-linear-gradient(45deg, rgba(245, 180, 84, 0.5) 0 1.5px, transparent 1.5px 4px);
}
.ex-key--zone {
  border: 1.5px solid var(--cyan-400);
  background: rgba(70, 219, 232, 0.12);
}
.ex-key--arr {
  width: 10px;
  height: 10px;
  background: var(--cyan-400);
}
.ex-key--dep {
  width: 10px;
  height: 10px;
  background: #61798f;
}

/* SVG site map */
.ex-svg text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  fill: #8ea0b5;
}
.ex-ground {
  fill: #08101d;
}
.ex-street {
  fill: #0c1525;
}
.ex-street__line {
  fill: none;
  stroke: rgba(160, 185, 215, 0.28);
  stroke-width: 1.2;
  stroke-dasharray: 14 12;
}
.ex-svg .ex-street__label {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  fill: #6f8299;
}
.ex-curb {
  fill: none;
  stroke: rgba(160, 185, 215, 0.2);
}
.ex-lane {
  fill: none;
  stroke: rgba(160, 185, 215, 0.12);
  stroke-dasharray: 6 9;
}
.ex-arrow,
.ex-ramp {
  fill: none;
  stroke: rgba(160, 185, 215, 0.35);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ex-svg .ex-ramp__label {
  font-size: 8px;
  letter-spacing: 0.18em;
  fill: #6f8299;
}
.ex-unmapped rect {
  fill: none;
  stroke: rgba(160, 185, 215, 0.1);
  stroke-dasharray: 2 3;
}
.ex-svg .ex-unmapped text {
  font-size: 9px;
  letter-spacing: 0.2em;
  fill: #56677c;
}
.ex-dock {
  fill: rgba(160, 185, 215, 0.3);
}
.ex-tree {
  fill: rgba(70, 150, 140, 0.12);
  stroke: rgba(110, 200, 180, 0.22);
}
.ex-pole circle:first-child {
  fill: rgba(70, 219, 232, 0.06);
  stroke: rgba(70, 219, 232, 0.25);
}
.ex-pole circle:last-child {
  fill: var(--cyan-400);
  opacity: 0.8;
}
.ex-bldg rect {
  fill: #0f1a2c;
  stroke: rgba(160, 185, 215, 0.26);
}
.ex-svg .ex-bldg text {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  fill: #8ea0b5;
}
.ex-zone {
  cursor: pointer;
}
.ex-zone__area {
  fill: rgba(70, 219, 232, 0.02);
  stroke: rgba(126, 234, 243, 0.24);
  stroke-dasharray: 3 4;
  transition:
    fill var(--dur) var(--ease-out),
    stroke var(--dur) var(--ease-out);
}
.ex-zone--deck .ex-zone__area {
  fill: #0d1828;
  stroke: rgba(160, 185, 215, 0.3);
  stroke-dasharray: none;
}
.ex-zone:hover .ex-zone__area {
  fill: rgba(70, 219, 232, 0.05);
}
.ex-zone--deck:hover .ex-zone__area {
  fill: #102036;
}
.ex-svg .ex-zone__label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  fill: #a9b6c7;
}
.ex-svg .ex-zone__count {
  fill: #e8edf4;
  letter-spacing: 0.06em;
}
.ex-svg .ex-zone__flag {
  fill: var(--amber-300);
}
.ex-zone.is-active .ex-zone__area {
  fill: rgba(70, 219, 232, 0.07);
  stroke: var(--cyan-400);
  stroke-dasharray: none;
  stroke-width: 1.5;
}
.ex-svg .ex-zone.is-active .ex-zone__label {
  fill: var(--cyan-200);
}
.ex-zone.is-exc .ex-zone__area {
  stroke: rgba(245, 180, 84, 0.78);
  stroke-dasharray: none;
  stroke-width: 1.2;
  fill: rgba(245, 180, 84, 0.04);
}
.ex-svg .ex-zone.is-exc .ex-zone__label {
  fill: var(--amber-300);
}
.ex-svg .ex-zone.is-stale .ex-zone__count {
  fill: var(--amber-300);
  font-size: 9.5px;
}

.ex-sp {
  cursor: pointer;
  outline: none;
}
.ex-sp__bay {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(160, 185, 215, 0.2);
  stroke-width: 1;
  transition: stroke var(--dur-fast);
}
.ex-sp__car {
  fill: #61798f;
  opacity: 0;
  transition:
    opacity 360ms var(--ease-out),
    fill 360ms var(--ease-out);
}
.ex-sp.is-occ .ex-sp__car {
  opacity: 1;
}
.ex-sp.is-match .ex-sp__car {
  fill: var(--cyan-400);
}
.ex-sp.is-dim .ex-sp__car {
  opacity: 0.2;
}
.ex-sp.is-expected .ex-sp__bay {
  stroke: rgba(245, 180, 84, 0.7);
  stroke-dasharray: 3 3;
}
.ex-sp.is-exc .ex-sp__bay {
  stroke: var(--amber-400);
  stroke-width: 1.6;
}
.ex-sp.is-exc .ex-sp__car {
  fill: var(--amber-400);
}
.ex-sp.is-sel .ex-sp__car {
  fill: #f2fdff;
  opacity: 1;
}
.ex-sp.is-unknown .ex-sp__bay {
  fill: url(#ex-hatch);
  stroke: rgba(245, 180, 84, 0.3);
}
.ex-sp:hover .ex-sp__bay {
  stroke: rgba(230, 251, 253, 0.75);
}
.ex-sp:focus-visible .ex-sp__bay {
  stroke: #ffffff;
  stroke-width: 2.2;
}
.ex-ring__box {
  fill: none;
  stroke: #e6fbfd;
  stroke-width: 1.5;
}
.ex-ring__pulse {
  fill: none;
  stroke: var(--cyan-300);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.ex-ring.is-pulsing .ex-ring__pulse {
  animation: ex-pulse 2s var(--ease-out) infinite;
}
@keyframes ex-pulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Tooltip */
.ex-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 2px;
  max-width: 260px;
  padding: 8px 11px;
  border: 1px solid rgba(126, 234, 243, 0.32);
  border-radius: var(--radius-s);
  background: rgba(5, 9, 17, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.8);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--fg);
  pointer-events: none;
}
.ex-tip strong {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--cyan-200);
}
.ex-tip span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

/* Zone strip under the map */
.ex-zones {
  margin-top: 12px;
}
.ex-zstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ex-line);
  border-left: 1px solid var(--ex-line);
}
.ex-zstrip > li {
  display: flex;
  border-right: 1px solid var(--ex-line);
  border-bottom: 1px solid var(--ex-line);
}
.ex-zchip {
  display: grid;
  align-content: start;
  gap: 3px;
  width: 100%;
  padding: 10px 12px 11px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  transition: background-color var(--dur-fast);
}
button.ex-zchip:hover {
  background: rgba(70, 219, 232, 0.04);
}
.ex-zchip:focus-visible {
  outline-offset: -3px;
}
.ex-zchip__name {
  display: flex;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ex-zchip__name b {
  font-weight: 500;
  color: var(--cyan-400);
}
.ex-zchip__count {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.ex-zchip__sub {
  font-size: 0.72rem;
  color: var(--fg-3);
}
.ex-zchip.is-active {
  background: rgba(70, 219, 232, 0.08);
  box-shadow: inset 0 2px 0 var(--cyan-400);
}
.ex-zchip.is-exc .ex-zchip__sub {
  color: var(--amber-300);
}
.ex-zchip.is-stale .ex-zchip__count {
  font-size: 0.74rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--amber-300);
}

/* ---------- Inventory (dealership) ---------- */
.ex-side {
  min-width: 0;
}
.ex-search {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}
.ex-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ex-resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
}
.ex-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}
.ex-results {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ex-line);
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.ex-veh {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  grid-template-areas:
    'id desc loc'
    'vin status seen';
  align-items: baseline;
  gap: 3px 12px;
  width: 100%;
  padding: 10px 10px 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--ex-line);
  background: none;
  color: inherit;
  text-align: left;
  transition: background-color var(--dur-fast);
}
.ex-veh:hover {
  background: rgba(70, 219, 232, 0.045);
}
.ex-veh:focus-visible {
  outline-offset: -3px;
}
.ex-veh.is-sel {
  background: rgba(70, 219, 232, 0.1);
  box-shadow: inset 2px 0 0 var(--cyan-400);
}
.ex-veh__id {
  grid-area: id;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--fg);
}
.ex-flag {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber-400);
  box-shadow: 0 0 0 3px rgba(245, 180, 84, 0.18);
}
.ex-veh__desc {
  grid-area: desc;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  color: var(--fg-2);
}
.ex-veh__loc {
  grid-area: loc;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--cyan-200);
  text-align: right;
  white-space: nowrap;
}
.ex-veh__status {
  grid-area: status;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--fg-2);
  white-space: nowrap;
}
.ex-veh__vin {
  grid-area: vin;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-veh__seen {
  grid-area: seen;
  font-size: 0.7rem;
  color: var(--fg-3);
  text-align: right;
  white-space: nowrap;
}
.ex-st {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.ex-st--lot {
  background: #8fa3b9;
}
.ex-st--drive {
  background: var(--cyan-400);
}
.ex-st--service {
  background: #7ee2b8;
}
.ex-st--recon {
  background: #aab8ff;
}
.ex-st--sold {
  background: #f2f5f9;
}
.ex-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--ex-line-2);
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--fg);
}

/* ---------- Commercial parking side ---------- */
.ex-totals {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ex-line);
}
.ex-totals__big {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.ex-totals__big b {
  font-size: 1.35em;
  font-weight: 600;
  color: var(--fg);
}
.ex-totals__big--wait {
  color: var(--amber-300);
}
.ex-totals__sub {
  font-size: 0.8rem;
  color: var(--fg-3);
}
.ex-meter {
  position: relative;
  height: 4px;
  border-radius: 4px;
  background: rgba(160, 185, 215, 0.14);
  overflow: hidden;
}
.ex-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--cyan-400);
  transition: width 500ms var(--ease-out);
}
.ex-meter--unknown {
  background: repeating-linear-gradient(90deg, rgba(245, 180, 84, 0.45) 0 6px, transparent 6px 11px);
}
.ex-ztable-wrap {
  overflow-x: auto;
}
.ex-ztable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.ex-ztable th,
.ex-ztable td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--ex-line);
  text-align: left;
  vertical-align: middle;
}
.ex-ztable thead th {
  padding-top: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ex-ztable tbody th {
  padding-left: 0;
  font-weight: 400;
}
.ex-ztable tr.is-active {
  background: rgba(70, 219, 232, 0.07);
}
.ex-ztable tr.is-active th {
  box-shadow: inset 2px 0 0 var(--cyan-400);
}
.ex-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ex-num b {
  font-weight: 500;
  color: var(--fg);
}
.ex-zbtn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  width: 100%;
  padding: 4px 6px 4px 8px;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--fg);
  text-align: left;
  font-size: 0.84rem;
  font-weight: 560;
}
.ex-zbtn b {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--cyan-400);
  padding-top: 2px;
}
.ex-zbtn:hover {
  color: var(--cyan-200);
}
.ex-zbtn__cap {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--fg-3);
}
.ex-await-cell {
  white-space: normal;
}
.ex-await {
  display: block;
  margin-bottom: 5px;
  font-size: 0.78rem;
  font-weight: 560;
  color: var(--amber-300);
}
.ex-obs {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  white-space: nowrap;
}
.ex-obs__t {
  display: block;
  color: var(--fg-2);
}
.ex-ago {
  display: block;
  font-size: 0.66rem;
  color: var(--fg-3);
}
tr.is-stale .ex-ago {
  color: var(--amber-300);
}
.ex-chart {
  margin-top: 18px;
}
.ex-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ex-chart__title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--fg);
}
.ex-chart__svg {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}
.ex-chart__svg text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  fill: #8496ab;
}
.ex-chart__axis {
  stroke: rgba(160, 185, 215, 0.3);
}
.ex-col__a {
  fill: var(--cyan-400);
  opacity: 0.85;
}
.ex-col__d {
  fill: #61798f;
}
.ex-col.is-now .ex-col__a,
.ex-col.is-now .ex-col__d {
  opacity: 1;
  stroke: rgba(230, 251, 253, 0.7);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}
.ex-chart__svg .ex-col.is-now text {
  fill: var(--cyan-200);
}
.ex-chart__legend {
  display: flex;
  gap: 16px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--fg-2);
}

/* ---------- Detail panel ---------- */
.ex-detail {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  max-height: min(76vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-d3);
  border-radius: 18px 18px 0 0;
  background: #0a1221;
  box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, 0.75);
}
.ex-detail.is-entering {
  animation: ex-sheet 320ms var(--ease-out);
}
@keyframes ex-sheet {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
.ex-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.ex-detail__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-400);
}
.ex-detail__title {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.ex-detail__title:focus {
  outline: none;
}
.ex-detail__title:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 4px;
  border-radius: 4px;
}
.ex-detail__sub {
  margin-top: 4px;
  color: var(--fg-2);
}
.ex-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.ex-dl {
  display: grid;
  margin: 16px 0 0;
  border-top: 1px solid var(--ex-line);
}
.ex-dl > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 2fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ex-line);
}
.ex-dl dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 2px;
}
.ex-dl dd {
  margin: 0;
  color: var(--fg);
  font-size: 0.86rem;
}
.ex-detail__review {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 180, 84, 0.35);
  border-left: 2px solid var(--amber-400);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: rgba(245, 180, 84, 0.05);
  font-size: 0.84rem;
  color: var(--fg);
}
.ex-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.ex-detail__actions:empty {
  display: none;
}
.ex-detail__h {
  margin-top: 22px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ex-hist {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--ex-line-2);
}
.ex-hist li {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0 6px 16px;
  font-size: 0.82rem;
  color: var(--fg-2);
}
.ex-hist li::before {
  content: '';
  position: absolute;
  left: -3.5px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ex-bg);
  border: 1px solid var(--cyan-400);
}
.ex-hist li:first-child::before {
  background: var(--cyan-400);
}
.ex-hist time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--fg-3);
  padding-top: 1px;
}
.ex-record {
  margin-top: 16px;
  border: 1px solid var(--ex-line);
  border-radius: var(--radius-s);
}
.ex-record summary {
  padding: 9px 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  cursor: pointer;
}
.ex-record summary:hover {
  color: var(--cyan-200);
}
.ex-pre {
  margin: 0;
  padding: 0 12px 12px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--cyan-200);
}

/* ---------- Event feed ---------- */
.ex-filterline {
  margin: -4px 0 10px;
  font-size: 0.8rem;
  color: var(--fg-2);
}
.ex-feed {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ex-line);
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.ex-ev__row {
  display: grid;
  grid-template-columns: 62px 8px minmax(0, 1fr) 14px;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 9px 8px 9px 4px;
  border: 0;
  border-bottom: 1px solid var(--ex-line);
  background: none;
  color: inherit;
  text-align: left;
}
div.ex-ev__row {
  grid-template-columns: 62px 8px minmax(0, 1fr);
}
button.ex-ev__row:hover {
  background: rgba(70, 219, 232, 0.04);
}
.ex-ev__row:focus-visible {
  outline-offset: -3px;
}
.ex-ev__t {
  align-self: start;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
.ex-ev__mark {
  align-self: start;
  margin-top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(70, 219, 232, 0.55);
}
.ex-ev.is-att .ex-ev__mark {
  background: var(--amber-400);
  box-shadow: 0 0 0 3px rgba(245, 180, 84, 0.16);
}
.ex-ev.is-review .ex-ev__mark {
  background: transparent;
  border: 1.5px solid #f2fdff;
}
.ex-ev__body {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.ex-ev__title {
  font-size: 0.84rem;
  font-weight: 560;
  color: var(--fg);
}
.ex-ev.is-att .ex-ev__title {
  color: var(--amber-300);
}
.ex-ev__text {
  font-size: 0.78rem;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.ex-ev__go {
  color: var(--fg-3);
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.ex-ev__row:hover .ex-ev__go,
.ex-ev__row:focus-visible .ex-ev__go {
  opacity: 1;
  color: var(--cyan-300);
}
.ex-ev.is-new {
  animation: ex-in 600ms var(--ease-out);
}
@keyframes ex-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
    background: rgba(70, 219, 232, 0.08);
  }
}

/* ---------- Review queue ---------- */
.ex-qlist {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ex-line);
}
.ex-q {
  border-bottom: 1px solid var(--ex-line);
}
.ex-q.is-open {
  background: rgba(245, 180, 84, 0.035);
}
.ex-q__h {
  font: inherit;
}
.ex-q__toggle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 2px 12px;
  width: 100%;
  padding: 12px 8px 12px 26px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
}
.ex-q__toggle::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber-400);
  box-shadow: 0 0 0 3px rgba(245, 180, 84, 0.16);
}
.ex-q__toggle:hover .ex-q__title {
  color: var(--amber-300);
}
.ex-q__toggle:focus-visible {
  outline-offset: -3px;
}
.ex-q__meta {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--fg-3);
}
.ex-q__title {
  grid-column: 1;
  font-size: 0.92rem;
  font-weight: 560;
  line-height: 1.35;
  color: var(--fg);
}
.ex-q__chev {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--fg-3);
  transition: transform var(--dur) var(--ease-out);
}
.ex-q__toggle[aria-expanded='true'] .ex-q__chev {
  transform: rotate(180deg);
}
.ex-q__body {
  display: grid;
  gap: 12px;
  padding: 0 10px 16px 26px;
}
.ex-q__detail {
  font-size: 0.86rem;
  color: var(--fg-2);
  max-width: 60ch;
}
.ex-q__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ex-q__assign {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--ex-line-2);
}
.ex-q__assign .ex-field {
  flex: 1 1 170px;
  max-width: 260px;
}
.ex-q--done {
  display: grid;
  gap: 4px;
  padding: 12px 8px 13px 26px;
}
.ex-q--done .ex-q__title {
  font-size: 0.88rem;
}
.ex-q__outcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 2px;
  font-size: 0.76rem;
}
.ex-q__note {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--fg-2);
}
.ex-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--ex-line-2);
  color: var(--fg-2);
}
.ex-pill--confirmed {
  border-color: rgba(126, 226, 184, 0.5);
  color: #7ee2b8;
}
.ex-pill--escalated {
  border-color: rgba(245, 180, 84, 0.55);
  color: var(--amber-300);
}
.ex-pill--assigned {
  border-color: rgba(70, 219, 232, 0.5);
  color: var(--cyan-300);
}

/* Footer status line (also the polite live region) */
.ex-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding: 10px var(--ex-pad);
  border-top: 1px solid var(--ex-line);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.ex-live {
  min-height: 1.4em;
  color: var(--cyan-200);
}
.ex-live:empty::before {
  content: 'Ready.';
  color: var(--fg-3);
}

/* ---------- Narrow screens ---------- */
@media (max-width: 559px) {
  .ex-app {
    --ex-pad: 12px;
    border-radius: var(--radius);
  }
  .ex-bar > .ex-seg {
    width: 100%;
  }
  .ex-bar > .ex-seg .ex-seg__opt {
    flex: 1 1 0;
  }
  .ex-bar > .ex-seg span {
    width: 100%;
    justify-content: center;
    padding: 0 10px;
  }
  .ex-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ex-filters .ex-field:last-child {
    grid-column: span 2;
  }
  .ex-clock {
    width: 100%;
  }
  .ex-clock__readout {
    margin-right: auto;
  }
  .ex-ztable .ex-obs {
    display: none;
  }
  .ex-ztable thead th:last-child {
    display: none;
  }
  .ex-dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .ex-ev__row {
    grid-template-columns: 56px 8px minmax(0, 1fr) 0;
    gap: 8px;
  }
  .ex-clock {
    gap: 6px;
  }
  .ex-clock__state {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ex-clock .ex-btn {
    padding: 0 12px;
  }
  .ex-veh__desc {
    white-space: normal;
  }
  .ex-map__note {
    display: none;
  }
  .ex-map__hint {
    display: none;
  }
}

/* ---------- Desktop workspace ---------- */
@media (min-width: 1180px) {
  .ex-app {
    --ex-pad: 20px;
  }
  .ex-tabs,
  .ex-zoom {
    display: none;
  }
  .ex-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(380px, 1fr);
    grid-template-rows: clamp(660px, 84vh, 800px) clamp(500px, 62vh, 600px);
  }
  .ex-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 18px var(--ex-pad);
  }
  .ex-pane--map,
  .ex-pane--feed {
    border-right: 1px solid var(--ex-line);
  }
  .ex-pane--feed,
  .ex-pane--queue {
    border-top: 1px solid var(--ex-line);
  }
  .ex-map {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
  }
  .ex-map__scroll {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 0;
    overflow: hidden;
  }
  .ex-svg {
    width: 100%;
    height: 100%;
    min-width: 0;
    aspect-ratio: auto;
  }
  .ex-side {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .ex-side[hidden] {
    display: none;
  }
  .ex-results,
  .ex-feed {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  .ex-side[data-ex-side-park] {
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .ex-queue {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .ex-detail {
    position: absolute;
    inset: 0;
    z-index: 4;
    max-height: none;
    padding: 18px var(--ex-pad) 24px;
    border: 0;
    border-radius: 0;
    background: var(--ex-bg);
    box-shadow: none;
  }
  .ex-detail.is-entering {
    animation-name: ex-slide;
  }
  @keyframes ex-slide {
    from {
      opacity: 0;
      transform: translateX(14px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ex-ring.is-pulsing .ex-ring__pulse,
  .ex-app.is-running .ex-clock__dot,
  .ex-ev.is-new,
  .ex-detail.is-entering {
    animation: none;
  }
}

/* ---------- Behind the sample (light editorial section) ---------- */
.ex-behind__grid {
  display: grid;
  gap: clamp(36px, 5vw, 72px);
}
.ex-behind__intro {
  margin-top: var(--space-5);
  max-width: 44ch;
  color: var(--fg-2);
  font-size: var(--step-1);
  line-height: 1.6;
}
.ex-behind__list > li {
  grid-template-columns: 56px minmax(0, 1fr);
}
.ex-behind__list .rule-list__body {
  grid-column: 2;
}
.ex-behind__list .rule-list__title {
  font-size: var(--step-2);
}
@media (min-width: 960px) {
  .ex-behind__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .ex-behind__head {
    position: sticky;
    top: calc(var(--header-h) + 40px);
  }
}