/* Full viewer trial: one floating kit over one continuous map. */
:root {
  --colour-ink-strong: #252c30;
  --colour-ink: #414a50;
  --colour-ink-muted: #626d74;
  --colour-surface: #fdfefd;
  --colour-surface-subtle: #eef1f1;
  --colour-surface-raised: #f4f6f5;
  --colour-border: #dce2e3;
  --colour-border-strong: #9ba9af;
  --colour-focus: #b43d1c;
  --signal: #ff784c;
  --signal-ink: #26201e;
  --signal-tint: #fff0e9;
  --expressive-accent: var(--colour-focus);
  --expressive-tint: var(--signal-tint);
  --radius-control: 12px;
  --radius-panel: 22px;
  --dock-width: 0px;
  --dock-height-mobile: calc(96px + env(safe-area-inset-bottom, 0px));
  --workspace-shadow: 0 12px 40px rgb(29 45 53 / 15%), 0 2px 8px rgb(29 45 53 / 7%);
  --dock-shadow: 0 10px 28px rgb(29 45 53 / 24%);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --colour-ink-strong: #f2f5f5;
  --colour-ink: #d5dcdf;
  --colour-ink-muted: #a9b6bd;
  --colour-surface: #222c32;
  --colour-surface-subtle: #182127;
  --colour-surface-raised: #2b373f;
  --colour-border: #3c4b55;
  --colour-border-strong: #788c98;
  --colour-focus: #ff9977;
  --signal-tint: #423028;
  --workspace-shadow: 0 12px 40px rgb(0 0 0 / 28%), 0 2px 8px rgb(0 0 0 / 16%);
  color-scheme: dark;
}
:root ::selection { background: var(--signal); color: var(--signal-ink); }
:root input { accent-color: var(--colour-focus); caret-color: var(--colour-focus); }
:root button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:root button:focus-visible, :root input:focus-visible, :root select:focus-visible,
:root summary:focus-visible { outline: 2px solid var(--colour-focus); outline-offset: 2px; }
:root .viewer-shell .map, :root .viewer-shell.dock-collapsed .map { inset: 0; }
:root .map-loading-backdrop { inset: 0; }
:root .app-identity {
  background: var(--colour-surface); border-radius: 16px; box-shadow: var(--workspace-shadow);
  display: flex; gap: 12px; height: 64px; justify-content: flex-start; left: 20px;
  padding: 10px 16px 10px 10px; position: absolute; top: 20px; width: auto; z-index: 6;
}
:root .app-mark {
  background: var(--signal); border-radius: 12px; color: var(--signal-ink);
  flex-shrink: 0; height: 44px; padding: 7px; stroke: currentColor; width: 44px;
}
:root .app-mark circle { fill: var(--signal); }
:root .viewer-wordmark {
  color: var(--colour-ink-strong); display: grid; font-size: 15px; font-weight: 700;
  letter-spacing: -.025em; line-height: 19px; margin: 0;
}
:root .viewer-wordmark span + span { font-size: 12px; font-weight: 500; letter-spacing: 0; }
:root .app-dock {
  align-items: center; background: #263137; border: 0; border-radius: 24px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--dock-shadow);
  flex-direction: row; gap: 10px; height: 76px; left: 20px;
  max-width: calc(100vw - 96px); padding: 8px; right: auto; top: auto; width: max-content;
}
:root .dock-primary, :root .dock-secondary {
  flex-direction: row; gap: 3px; margin: 0; padding: 0; width: auto;
}
:root .dock-primary { border: 0; }
:root .dock-secondary { border-left: 1px solid #536169; padding-left: 10px; }
:root .dock-button {
  border: 0; border-radius: 16px; color: #d8e1e5; gap: 5px; height: 60px;
  width: 52px; transition: none;
}
:root .dock-button svg { height: 23px; width: 23px; }
:root .dock-label { font-size: 10px; font-weight: 600; line-height: 12px; }
:root .dock-button:hover { background: #39474f; color: #f3f7f7; }
:root .dock-button:disabled { background: transparent; color: #d8e1e5; opacity: .42; }
:root .dock-button[aria-expanded="true"] { background: var(--signal); color: var(--signal-ink); }
:root .dock-button[aria-expanded="true"]::before { content: none; }
:root .dock-button:focus-visible { outline-color: #ffb399; outline-offset: -3px; }
:root .dock-button-badge {
  background: #f6f8f7; border: 0; color: #34434b; font-size: 8px;
  right: -1px; top: -3px;
}
:root .dock-button-step-free { color: #8bcaff; }
:root .dock-button-step-free[aria-pressed="true"] { background: #125f99; color: #fff; }
:root .dock-collapse, :root .viewer-shell.dock-collapsed .dock-collapse {
  background: var(--colour-surface); border: 0; border-radius: 16px; bottom: 20px;
  box-shadow: var(--workspace-shadow); height: 44px; left: auto; right: 20px; top: auto; width: 44px;
}
:root .viewer-shell.dock-collapsed .app-dock { display: none; }
:root :is(.tool-panel, .selection-panel, .route-strip, .scheduled-timeline, .map-loading-overlay) {
  background: var(--colour-surface); border: 0; border-radius: var(--radius-panel);
  box-shadow: var(--workspace-shadow);
}
:root .tool-panel {
  bottom: 112px; left: 20px; max-height: min(650px, calc(100dvh - 214px));
  right: auto; top: auto; width: min(392px, calc(100vw - 104px));
}
:root .tool-panel .eyebrow { display: none; }
:root .tool-panel-header {
  align-items: center; background: var(--colour-surface); border-bottom: 1px solid var(--colour-border);
  min-height: 72px; padding: 16px 20px;
}
:root .tool-panel-header h2 { font-size: 23px; font-weight: 700; letter-spacing: -.035em; line-height: 29px; }
:root :is(.tool-panel-close, .selection-panel-close) {
  background: var(--colour-surface-subtle); border-radius: 50%; color: var(--colour-ink);
  flex-shrink: 0; height: 40px; margin: 0; min-width: 40px; width: 40px;
}
:root :is(.tool-panel-close, .selection-panel-close):hover { background: var(--signal-tint); color: var(--colour-focus); }
:root .tool-panel-content { padding: 20px; }
:root .network-controls { display: flex; flex-direction: column; }
:root .network-controls[hidden] { display: none; }
:root .network-controls-body { flex: 1; max-height: none; min-height: 0; }
:root .network-controls-actions { padding: 16px 20px 0; }
:root .network-control-bulk-action { background: var(--colour-ink-strong); border: 0; color: var(--colour-surface); min-height: 40px; padding: 0 18px; }
:root .network-category-tabs { gap: 4px; padding: 12px; }
:root .network-category-tab { border-radius: 16px; gap: 5px; min-height: 88px; padding: 10px 2px; }
:root .network-category-tab[aria-selected="true"] { background: var(--signal-tint); box-shadow: none; color: var(--colour-ink-strong); }
:root .network-category-icon { border: 0; border-radius: 12px; }
:root .network-category-tab[aria-selected="true"] .network-category-icon { box-shadow: none; }
:root .network-category-label { font-size: 12px; font-weight: 700; }
:root .network-category-heading { padding: 8px 20px; }
:root .network-control-mode > summary { min-height: 48px; }
:root .network-control-option { min-height: 44px; }
:root .network-control-name { font-size: 13px; }
:root .settings-panel {
  height: min(640px, calc(100dvh - 214px)); max-height: calc(100dvh - 214px);
  width: min(680px, calc(100vw - 104px));
}
:root .settings-tabs { background: var(--colour-surface-subtle); border: 0; border-radius: 0; gap: 4px; padding: 8px 12px; }
:root .settings-tab { border-radius: 10px; color: var(--colour-ink-muted); font-size: 13px; font-weight: 600; min-height: 42px; }
:root .settings-tab[aria-selected="true"] { background: var(--colour-surface); box-shadow: 0 2px 5px rgb(29 45 53 / 8%); color: var(--colour-focus); }
:root .settings-content { padding: 20px; }
:root .settings-section-heading h3 { font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
:root .setting-group { border: 0; border-bottom: 1px solid var(--colour-border); border-radius: 0; margin-top: 20px; padding: 0 0 16px; }
:root .setting-group legend { font-size: 14px; font-weight: 700; margin-bottom: 8px; padding: 0; }
:root .setting-help { color: var(--colour-ink-muted); font-size: 12px; line-height: 18px; }
:root :is(.theme-options, .choice-options) > label { border-radius: 12px; padding: 12px; }
:root :is(.theme-options, .choice-options) > label:has(input:checked) { background: var(--signal-tint); }
:root .search-query { padding: 20px 20px 12px; }
:root .search-query input { background: var(--colour-surface-subtle); border: 1px solid transparent; min-height: 48px; }
:root .search-query input::placeholder { color: var(--colour-ink-muted); }
:root .search-filter { flex-wrap: wrap; padding: 0 20px; }
:root .search-surprise { background: var(--colour-surface-subtle); border: 0; margin: 0; padding: 12px; }
:root .search-intro, :root .search-status { padding-left: 20px; padding-right: 20px; }
:root .search-results { padding: 4px 12px 12px; }
:root .search-result { gap: 5px; padding: 12px; }
:root .search-result[aria-selected="true"] { background: var(--signal-tint); }
:root .segmented-control { background: var(--colour-surface-subtle); border: 0; border-radius: 14px; padding: 4px; }
:root .segmented-control label:has(input:checked) { background: var(--colour-surface); border-radius: 10px; color: var(--colour-focus); }
:root .vehicle-view-mode label { min-height: 44px; }
:root .service-alert-mode[aria-pressed="true"] { background: var(--signal-tint); border-color: transparent; color: var(--colour-focus); }
:root .live-random-vehicle { background: var(--signal-tint); border: 0; border-radius: 12px; color: var(--colour-focus); font-weight: 600; min-height: 44px; }
:root .selection-panel {
  max-height: calc(100dvh - 132px); max-width: min(380px, calc(100vw - 100px));
  padding: 20px; right: 76px; top: 20px; width: 380px;
}
:root .selection-panel:is([data-kind="route"], [data-kind="live-vehicle"]) { max-width: min(420px, calc(100vw - 100px)); padding: 20px; width: 420px; }
:root .selection-panel-title { font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 28px; }
:root .selection-route-detail-title { font-size: 23px; font-weight: 700; letter-spacing: -.035em; line-height: 27px; }
:root .selection-panel-header { gap: 12px; }
:root .selection-details { background: transparent; border: 0; border-radius: 0; padding: 0; }
:root .selection-route-service { font-size: 14px; gap: 6px 16px; line-height: 20px; }
:root .selection-route-vehicles-title { font-size: 18px; font-weight: 700; line-height: 24px; }
:root .selection-route-vehicle { gap: 12px; grid-template-columns: 52px minmax(0, 1fr); padding: 10px 8px; }
:root .selection-route-vehicle-icon { border-radius: 14px; height: 52px; width: 52px; }
:root .selection-route-vehicle-svg { height: 32px; width: 32px; }
:root .selection-favourite { min-height: 40px; }
:root .route-strip { bottom: 112px; left: 20px; right: 20px; }
:root .route-strip-header { gap: 12px; padding: 16px 20px 12px; }
:root .route-strip-heading h2 { font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
:root .route-strip-viewport { height: 208px; }
:root .scheduled-timeline { bottom: 112px; left: 20px; right: 20px; }
:root .strip-map-open .selection-panel { max-height: calc(100dvh - var(--route-strip-height, 320px) - 136px); }
:root .scheduled-timeline-open .route-strip { bottom: calc(128px + var(--scheduled-timeline-height, 82px)); }
:root .scheduled-timeline-open .selection-panel { max-height: calc(100dvh - var(--scheduled-timeline-height, 82px) - 148px); }
:root .scheduled-timeline-open.strip-map-open .selection-panel { max-height: calc(100dvh - var(--scheduled-timeline-height, 82px) - var(--route-strip-height, 320px) - 164px); }
:root .maplibregl-ctrl-group { background: var(--colour-surface); border: 0; border-radius: 16px; box-shadow: var(--workspace-shadow); overflow: hidden; }
:root .maplibregl-ctrl-group button { height: 44px; width: 44px; }
:root .map-status-bar, :root .viewer-shell.dock-collapsed .map-status-bar { bottom: 112px; left: 20px; }
:root .map-loading-overlay { bottom: 112px; right: 20px; }
:root .network-region-choice { background: var(--colour-surface); border: 0; border-radius: 24px; box-shadow: var(--workspace-shadow); color: var(--colour-ink); padding: 28px; }
:root .network-region-choice h2 { color: var(--colour-ink-strong); font-size: 26px; letter-spacing: -.035em; }
:root .network-region-actions button { border-radius: 16px; min-height: 76px; }
@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) {
  :root .app-identity { gap: 9px; height: 52px; left: max(12px, env(safe-area-inset-left)); padding: 6px 12px 6px 6px; top: max(12px, env(safe-area-inset-top)); }
  :root .app-mark { border-radius: 10px; height: 40px; width: 40px; }
  :root .viewer-wordmark { font-size: 13px; line-height: 17px; }
  :root .viewer-wordmark span + span { font-size: 10px; }
  :root .app-dock, :root .viewer-shell.dock-collapsed .app-dock {
    border: 0; border-radius: 22px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex;
    gap: 0; height: 72px; left: max(12px, env(safe-area-inset-left));
    max-width: none; padding: 8px; right: max(12px, env(safe-area-inset-right)); width: auto;
  }
  :root .dock-primary { flex: 5; gap: 0; justify-content: space-around; }
  :root .dock-secondary { border: 0; flex: 1; justify-content: center; padding: 0; }
  :root .dock-button { flex: 1; height: 56px; max-width: 60px; min-width: 44px; width: 44px; }
  :root .dock-label { font-size: 9px; }
  :root .dock-button svg { height: 22px; width: 22px; }
  :root #dock-step-free, :root #dock-map-style, :root #dock-theme { display: none; }
  :root .dock-collapse { display: none; }
  :root .tool-panel, :root .settings-panel {
    bottom: var(--dock-height-mobile); height: auto; left: max(12px, env(safe-area-inset-left));
    max-height: min(62dvh, calc(100dvh - 180px)); right: max(12px, env(safe-area-inset-right)); top: auto; width: auto;
  }
  :root .settings-panel { height: min(62dvh, calc(100dvh - 180px)); }
  :root .tool-panel-header { min-height: 68px; padding: 12px 16px; }
  :root .tool-panel-header h2 { font-size: 21px; line-height: 26px; }
  :root .tool-panel-close, :root .selection-panel-close { height: 44px; min-height: 44px; min-width: 44px; width: 44px; }
  :root .settings-tabs { gap: 0; padding: 6px; }
  :root .settings-tab { font-size: 11px; min-width: 0; padding: 0 8px; }
  :root .settings-content, :root .tool-panel-content { padding: 16px; }
  :root .network-controls[hidden] { display: none; }
:root .network-controls-body { max-height: none; }
  :root .network-category-tabs { padding: 8px; }
  :root .network-category-tab { min-height: 80px; }
  :root .selection-panel, :root .selection-panel:is([data-kind="route"], [data-kind="live-vehicle"]) {
    bottom: var(--dock-height-mobile); left: 12px; max-height: min(54dvh, calc(100dvh - 180px));
    max-width: none; padding: 16px; right: 12px; top: auto; width: auto;
  }
  :root .selection-panel > .selection-panel-header { top: -16px; }
  :root .route-strip, :root .scheduled-timeline { bottom: var(--dock-height-mobile); left: 12px; right: 12px; }
  :root .route-strip-header { padding: 12px; }
  :root .route-strip-heading h2 { font-size: 15px; }
  :root .strip-map-open .selection-panel { bottom: auto; max-height: min(34dvh, 260px); top: 76px; }
  :root .scheduled-timeline-open .route-strip { bottom: calc(var(--dock-height-mobile) + var(--scheduled-timeline-height, 82px) + 12px); }
  :root .scheduled-timeline-open .selection-panel { max-height: min(54dvh, calc(100dvh - var(--dock-height-mobile) - var(--scheduled-timeline-height, 82px) - 92px)); }
  :root .scheduled-timeline-open.strip-map-open .selection-panel { max-height: max(80px, min(34dvh, calc(100dvh - var(--dock-height-mobile) - var(--scheduled-timeline-height, 82px) - var(--route-strip-height, 320px) - 92px))); }
  :root .map-status-bar, :root .map-loading-overlay { bottom: var(--dock-height-mobile); }
}
@media (max-width: 1000px) and (max-height: 500px) {
  :root .app-identity { display: none; }
  :root .tool-panel, :root .settings-panel { max-height: calc(100dvh - 108px); }
  :root .settings-panel { height: calc(100dvh - 108px); }
  :root .selection-panel { max-height: calc(100dvh - 108px); }
}
@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after { scroll-behavior: auto; }
}

/* One small press acknowledgement; no idle effects or refresh animation. */
:root .selection-favourite, :root .favourite-row { transition: transform 120ms cubic-bezier(.2,.8,.2,1), background-color 120ms ease-out; }
:root .selection-favourite[aria-checked="true"] { background: color-mix(in srgb, #b77b12 12%, var(--colour-surface)); }
:root .selection-favourite:active, :root .favourite-row:active:not(:disabled) { transform: scale(.97); }
:root .map-label-options label { min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  :root .selection-favourite, :root .favourite-row { transition: none; }
  :root .selection-favourite:active, :root .favourite-row:active:not(:disabled) { transform: none; }
}
:root[data-effects="performance"] .selection-favourite, :root[data-effects="performance"] .favourite-row { transition: none; }
:root[data-effects="performance"] .selection-favourite:active, :root[data-effects="performance"] .favourite-row:active:not(:disabled) { transform: none; }
:root :is(.selection-favourite, .favourite-row, .search-shortcut):focus-visible { transition: none; transform: none; }