/* Glass-inspired chrome: bounded blur areas, stable reading surfaces, no loops. */
:root {
  --glass-chrome: rgb(253 254 253 / 88%);
  --glass-line: rgb(255 255 255 / 78%);
  --glass-rim: inset 0 1px 0 rgb(255 255 255 / 90%), inset 0 -1px 0 rgb(59 77 87 / 8%);
  --rail-edge: 104px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
:root[data-theme="dark"] {
  --glass-chrome: rgb(34 44 50 / 92%);
  --glass-line: rgb(255 255 255 / 17%);
  --glass-rim: inset 0 1px 0 rgb(255 255 255 / 18%), inset 0 -1px 0 rgb(0 0 0 / 24%);
}
:root .app-dock {
  background: #263137; border: 1px solid rgb(255 255 255 / 24%);
  bottom: 68px; flex-direction: column; gap: 16px; height: auto;
  left: 12px; max-width: none; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 8px; right: auto; top: 12px; width: 76px;
  box-shadow: var(--dock-shadow), inset 1px 1px 0 rgb(255 255 255 / 18%);
  scrollbar-width: thin; scrollbar-color: #73828a #263137;
}
:root .dock-primary, :root .dock-secondary { flex-direction: column; flex: none; gap: 5px; width: 100%; }
:root .dock-secondary { border-left: 0; border-top: 1px solid #536169; margin-top: auto; padding: 12px 0 0; }
:root .dock-button { flex: 0 0 auto; height: 58px; max-width: none; min-width: 52px; width: 58px; }
:root .dock-button svg { filter: drop-shadow(0 1px 1px rgb(0 0 0 / 16%)); }
:root .dock-button[aria-expanded="true"] {
  background: linear-gradient(145deg, #ffad7e 0%, #ff784c 55%, #eb603d 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 3px 8px rgb(0 0 0 / 16%);
}
:root .dock-collapse, :root .viewer-shell.dock-collapsed .dock-collapse { bottom: 12px; left: 28px; right: auto; }
:root .app-identity { left: var(--rail-edge); }
:root .viewer-shell.dock-collapsed .app-identity { left: 20px; }
:root .tool-panel, :root .settings-panel {
  bottom: auto; left: var(--rail-edge); max-height: calc(100dvh - 124px);
  top: 100px; width: min(392px, calc(100vw - 180px));
}
:root .settings-panel { height: min(640px, calc(100dvh - 124px)); width: min(680px, calc(100vw - 180px)); }
:root .tool-panel, :root .selection-panel { box-shadow: var(--workspace-shadow), var(--glass-rim); }
:root .tool-panel-header {
  background: var(--colour-surface-raised); border-bottom-color: var(--colour-border);
  position: relative; isolation: isolate;
}
:root .tool-panel-header::before {
  border: 1px solid var(--glass-line); border-bottom: 0; border-radius: 22px 22px 0 0;
  content: ''; inset: 0; pointer-events: none; position: absolute; z-index: -1;
}
:root .network-category-icon {
  background-image: linear-gradient(155deg, rgb(255 255 255 / 40%), transparent 65%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%), 0 3px 8px rgb(29 45 53 / 12%);
}
:root .network-category-tab[aria-selected="true"] .network-category-icon { box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%), 0 4px 10px rgb(29 45 53 / 16%); }
:root .settings-tab[aria-selected="true"], :root .segmented-control label:has(input:checked) {
  background: linear-gradient(165deg, var(--colour-surface), var(--colour-surface-raised));
  box-shadow: var(--glass-rim), 0 2px 5px rgb(29 45 53 / 8%);
}
:root .maplibregl-ctrl-group, :root .dock-collapse, :root .app-identity {
  background: var(--colour-surface); box-shadow: var(--workspace-shadow), var(--glass-rim);
}
:root .route-strip, :root .scheduled-timeline { bottom: 20px; left: var(--rail-edge); right: 20px; }
:root .scheduled-timeline-open .route-strip { bottom: calc(36px + var(--scheduled-timeline-height, 82px)); }
:root .strip-map-open .selection-panel { max-height: calc(100dvh - var(--route-strip-height, 320px) - 44px); }
:root .scheduled-timeline-open .selection-panel { max-height: calc(100dvh - var(--scheduled-timeline-height, 82px) - 56px); }
:root .scheduled-timeline-open.strip-map-open .selection-panel { max-height: calc(100dvh - var(--scheduled-timeline-height, 82px) - var(--route-strip-height, 320px) - 72px); }
:root .map-status-bar, :root .viewer-shell.dock-collapsed .map-status-bar { bottom: 20px; left: var(--rail-edge); }
:root .map-loading-overlay { bottom: 20px; }
@supports (backdrop-filter: blur(10px)) {
  :root:not([data-effects="performance"]) :is(.app-identity, .dock-collapse, .tool-panel-header, .network-controls > details > summary) {
    background: var(--glass-chrome); backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
  }
  :root:not([data-effects="performance"]) .app-dock { background: rgb(31 43 50 / 90%); backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); }
}
:root[data-effects="performance"] .dock-button svg { filter: none; }
:root[data-effects="performance"] .dock-button[aria-expanded="true"] { background-color: var(--signal); }
:root[data-effects="performance"] :is(.app-dock, .dock-button[aria-expanded="true"], .network-category-icon, .network-category-tab[aria-selected="true"] .network-category-icon) { background-image: none; box-shadow: none; }
:root[data-effects="performance"] :is(.app-identity, .dock-collapse, .maplibregl-ctrl-group, .tool-panel, .selection-panel, .settings-tab[aria-selected="true"], .segmented-control label:has(input:checked)) { box-shadow: 0 3px 12px rgb(29 45 53 / 10%); }
:root[data-effects="performance"] *, :root[data-effects="performance"] *::before, :root[data-effects="performance"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) {
  :root { --rail-edge: 84px; }
  :root .app-dock, :root .viewer-shell.dock-collapsed .app-dock {
    bottom: max(68px, calc(56px + env(safe-area-inset-bottom))); flex-direction: column;
    gap: 12px; height: auto; left: max(8px, env(safe-area-inset-left)); padding: 6px;
    right: auto; top: max(8px, env(safe-area-inset-top)); width: 64px;
  }
  :root .viewer-shell.dock-collapsed .app-dock { display: none; }
  :root .dock-primary, :root .dock-secondary { flex: none; flex-direction: column; gap: 5px; }
  :root .dock-secondary { border-top: 1px solid #536169; margin-top: auto; padding-top: 10px; }
  :root .dock-button { flex: 0 0 auto; height: 52px; max-width: none; min-width: 44px; width: 50px; }
  :root .dock-collapse, :root .viewer-shell.dock-collapsed .dock-collapse { bottom: max(12px, env(safe-area-inset-bottom)); display: flex; left: 18px; right: auto; }
  :root .app-identity { display: flex; left: var(--rail-edge); top: max(12px, env(safe-area-inset-top)); }
  :root .viewer-shell.dock-collapsed .app-identity { left: 12px; }
  :root .tool-panel, :root .settings-panel { bottom: 68px; height: auto; left: var(--rail-edge); max-height: calc(100dvh - 152px); right: 12px; top: auto; width: auto; }
  :root .settings-panel { height: min(640px, calc(100dvh - 152px)); }
  :root .tool-panel-header { padding: 12px; }
  :root .tool-panel-header h2 { font-size: 19px; }
  :root .settings-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  :root .settings-tab { flex: 0 0 auto; white-space: nowrap; }
  :root .network-category-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  :root .network-category-tab { min-height: 76px; }
  :root .selection-panel, :root .selection-panel:is([data-kind="route"], [data-kind="live-vehicle"]) { bottom: 68px; left: var(--rail-edge); max-height: calc(100dvh - 152px); right: 12px; }
  :root .route-strip, :root .scheduled-timeline { bottom: 68px; left: var(--rail-edge); right: 12px; }
  :root .scheduled-timeline-open .route-strip { bottom: calc(80px + var(--scheduled-timeline-height, 82px)); }
  :root .strip-map-open .selection-panel { top: 76px; max-height: min(34dvh, 260px); }
  :root .scheduled-timeline-open .selection-panel { max-height: calc(100dvh - var(--scheduled-timeline-height, 82px) - 152px); }
  :root .scheduled-timeline-open.strip-map-open .selection-panel { max-height: max(80px, min(34dvh, calc(100dvh - var(--route-strip-height, 320px) - var(--scheduled-timeline-height, 82px) - 152px))); }
  :root .map-status-bar, :root .map-loading-overlay { bottom: 68px; }
}
@media (max-width: 1000px) and (max-height: 500px) {
  :root .app-identity { display: none; }
  :root .tool-panel, :root .settings-panel, :root .selection-panel { max-height: calc(100dvh - 96px); }
  :root .settings-panel { height: calc(100dvh - 96px); }
}
@media (prefers-reduced-motion: reduce) {
  :root .dock-button svg { filter: none; }
}
/* Menu headers carry the same station/node geometry as the existing identity. */
:root .tool-panel-header, :root .network-controls > details > summary {
  background: linear-gradient(112deg, var(--glass-chrome) 0%, var(--glass-chrome) 65%, var(--signal-tint) 100%);
}
:root .tool-panel-header h2 { padding-bottom: 10px; }
:root .tool-panel-header::after, :root .network-controls > details > summary::after {
  background: radial-gradient(circle at 4px 4px, var(--colour-focus) 0 3px, transparent 3.5px), radial-gradient(circle at 36px 4px, var(--colour-focus) 0 3px, transparent 3.5px), radial-gradient(circle at 68px 4px, var(--colour-focus) 0 3px, transparent 3.5px), linear-gradient(var(--colour-focus), var(--colour-focus)) 4px 3px / 64px 2px no-repeat;
  bottom: 12px; content: ''; height: 8px; left: 20px; opacity: .65;
  pointer-events: none; position: absolute; width: 72px;
}
:root .network-controls-actions .network-control-bulk-action { border-radius: 14px; box-shadow: var(--glass-rim); }
:root[data-effects="performance"] .tool-panel-header { background: var(--colour-surface); }
:root[data-effects="performance"] .tool-panel-header::after { content: none; }

:root .interface-effects-control .setting-checkbox,
:root .live-delivery-control .setting-checkbox { align-items: center; display: flex; gap: 10px; min-height: 44px; }

:root .network-controls > details > summary { min-height: 64px; padding-bottom: 14px; position: relative; }
:root .network-controls > details > summary::after { bottom: 10px; left: 36px; }
:root[data-effects="performance"] .network-controls > details > summary { background: var(--colour-surface); }
:root[data-effects="performance"] .network-controls > details > summary::after { content: none; }

/* Small placeholder mark; the accessible application heading is retained. */
:root:not([data-effects="performance"]) .viewer-shell .app-identity, :root[data-effects="performance"] .viewer-shell .app-identity {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none;
  height: 44px; padding: 0; top: max(20px, env(safe-area-inset-top)); width: 44px;
}
:root .selection-route-header, :root .selection-route-header:has(.selection-route-strip) {
  grid-template-columns: minmax(0, 1fr) 44px 44px 44px; gap: 12px 6px;
}
:root .selection-route-detail-badge { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
:root .selection-route-heading { grid-column: 1 / -1; grid-row: 2; }
:root .selection-route-detail-title { overflow-wrap: break-word; text-wrap: balance; }
:root .selection-route-detail-via { margin-top: 6px; }
:root .selection-route-directions { grid-column: 2; grid-row: 1; height: 44px; width: 44px; }
:root .selection-route-strip { grid-column: 3; grid-row: 1; height: 44px; width: 44px; }
:root .selection-route-header .selection-panel-close { grid-column: 4; grid-row: 1; height: 44px; width: 44px; }
/* Native accordion layout interpolation: one group, never its individual rows. */
@supports (interpolate-size: allow-keywords) {
  .network-control-mode { interpolate-size: allow-keywords; }
  .network-control-mode::details-content { block-size: 0; opacity: 0; overflow: clip; }
  .network-control-mode[open]::details-content { block-size: auto; opacity: 1; }
  .network-control-mode[data-motion="pointer"]::details-content {
    transition: block-size 120ms var(--ease-out), opacity 120ms var(--ease-out), content-visibility 120ms allow-discrete;
  }
  .network-control-mode[data-motion="pointer"][open]::details-content { transition-duration: 180ms; }
  @media (prefers-reduced-motion: reduce) {
    .network-control-mode[data-motion="pointer"]::details-content { transition: opacity 100ms var(--ease-out), content-visibility 100ms allow-discrete; }
  }
  :root[data-effects="performance"] .network-control-mode::details-content { transition: none; }
}

@media (max-width: 420px) {
  :root .selection-route-header, :root .selection-route-header:has(.selection-route-strip) { grid-template-columns: minmax(0, 1fr) 44px 44px; }
  :root .selection-route-detail-badge { grid-column: 1 / -1; grid-row: 1; }
  :root .selection-route-heading { grid-row: 3; }
  :root .selection-route-directions { grid-column: 1; grid-row: 2; justify-self: end; }
  :root .selection-route-strip { grid-column: 2; grid-row: 2; }
  :root .selection-route-header .selection-panel-close { grid-column: 3; grid-row: 2; }
}