:root {
  --color-canvas: #f7fafc;
  --color-surface: #ffffff;
  --color-text: #162033;
  --color-muted: #5f6b7a;
  --color-primary: #1565c0;
  --color-primary-strong: #0b4f9c;
  --color-accent: #00a38c;
  --color-border: #d7dde8;
  --color-danger: #c62828;
  --focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.36);
  --radius: 8px;
  --shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  color-scheme: light;
}

[data-theme="dark"] {
  --color-canvas: #0b1220;
  --color-surface: #111827;
  --color-text: #edf2f7;
  --color-muted: #b6c2d2;
  --color-border: #283447;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; background: var(--color-canvas); color: var(--color-text); overflow-x: hidden; }
a { color: inherit; }
h1, h2, p, span, strong, code, small { overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--color-primary); color: white; padding: .5rem .75rem; border-radius: var(--radius); }
.skip-link:focus { top: 1rem; }
.shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; width: 100%; max-width: 100%; }
.sidebar { border-right: 1px solid var(--color-border); background: var(--color-surface); padding: 1.25rem; position: sticky; top: 0; height: 100vh; }
.brand { font-weight: 700; font-size: 1.125rem; margin-bottom: 1.5rem; }
.sidebar nav { display: grid; gap: .35rem; }
.sidebar a { text-decoration: none; color: var(--color-muted); padding: .65rem .75rem; border-radius: var(--radius); }
.sidebar a:hover { background: rgba(21, 101, 192, .08); color: var(--color-primary); }
.main { min-width: 0; max-width: 100%; padding: 1.25rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.topbar h1 { margin: 0; font-size: 1.65rem; line-height: 1.2; letter-spacing: 0; }
.eyebrow { margin: 0 0 .25rem; color: var(--color-accent); font-weight: 700; text-transform: uppercase; font-size: .75rem; }
.button { border: 1px solid var(--color-primary); background: var(--color-primary); color: white; min-height: 2.5rem; border-radius: var(--radius); padding: .55rem .8rem; font-weight: 700; cursor: pointer; }
.button-secondary { background: var(--color-surface); color: var(--color-primary); }
.button:hover { background: var(--color-primary-strong); }
.button-secondary:hover { background: rgba(21, 101, 192, .08); color: var(--color-primary-strong); }
.hero, .section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 1rem; align-items: start; }
.hero > *, .section-heading > *, .screen-pill > * { min-width: 0; }
.hero h2, .section h2 { margin: 0 0 .5rem; font-size: 1.25rem; letter-spacing: 0; }
.hero p, .section p { margin: 0; color: var(--color-muted); line-height: 1.55; }
.status-grid, .cards-grid, .list-grid, .transit-summary, .transit-grid { display: grid; gap: .75rem; }
.status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.transit-summary { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); margin-top: 1rem; }
.transit-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin-top: 1rem; }
.cards-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-top: 1rem; }
.list-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); margin-top: 1rem; }
.filter-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: .75rem; align-items: end; margin-top: 1rem; padding: .85rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-canvas); }
.field { display: grid; gap: .3rem; min-width: 0; }
.field label { font-size: .75rem; font-weight: 700; color: var(--color-muted); }
.field select, .field input { width: 100%; min-height: 2.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); padding: .5rem .65rem; font: inherit; }
.field-wide { min-width: min(240px, 100%); }
.result-count { margin: .75rem 0 0; color: var(--color-muted); font-size: .875rem; }
.metric, .component-card, .screen-pill, .transit-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: .85rem; background: var(--color-canvas); min-width: 0; }
.metric strong, .component-card strong { display: block; font-size: 1rem; margin-bottom: .25rem; }
.metric span, .component-card span, .screen-pill span { color: var(--color-muted); font-size: .875rem; line-height: 1.4; }
.screen-pill { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.screen-pill.empty { grid-column: 1 / -1; }
.screen-pill span small { display: block; margin-top: .2rem; }
.screen-pill div { display: grid; justify-items: end; gap: .15rem; min-width: 5.5rem; }
.screen-pill small { color: var(--color-muted); font-size: .72rem; text-align: right; overflow-wrap: anywhere; }
.screen-pill code, .component-card code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; color: var(--color-primary); overflow-wrap: anywhere; }
.transit-card header { display: grid; gap: .35rem; margin-bottom: .75rem; }
.transit-card strong { font-size: .95rem; }
.transit-card code, .transit-card dd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; overflow-wrap: anywhere; }
.transit-card code { color: var(--color-primary); }
.transit-card dl { display: grid; gap: .45rem; margin: 0; }
.transit-card dl div { display: grid; grid-template-columns: minmax(5.5rem, .35fr) minmax(0, 1fr); gap: .5rem; align-items: start; }
.transit-card dt { color: var(--color-muted); font-size: .72rem; font-weight: 700; }
.transit-card dd { margin: 0; color: var(--color-text); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.code-block { overflow: auto; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; background: #07111f; color: #d7f7f0; border-radius: var(--radius); padding: 1rem; max-height: 420px; max-width: 100%; }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .sidebar nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .shell, .main { width: 100vw; max-width: 100vw; }
  .main { padding: .75rem; }
  .topbar { align-items: stretch; flex-direction: column; }
  .topbar, .hero, .section { width: calc(100vw - 1.5rem); max-width: calc(100vw - 1.5rem); }
  .topbar h1 { font-size: 1.45rem; max-width: calc(100vw - 1.5rem); }
  .hero h2, .hero p, .section-heading p { max-width: calc(100vw - 3.5rem); }
  .hero h2, .section h2 { font-size: 1.1rem; }
  .button { width: 100%; }
  .hero, .section { overflow: hidden; }
  .sidebar nav { grid-template-columns: 1fr 1fr; }
  .status-grid { grid-template-columns: 1fr; }
  .transit-card dl div { grid-template-columns: 1fr; }
  .filter-panel { grid-template-columns: 1fr; }
  .section-heading { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .button, .sidebar a { transition: background 180ms ease, color 180ms ease, border-color 180ms ease; }
}