/* AU Bus — Material 3 (Material You) styles, hand-written, no framework.
 *
 * Tokens follow the M3 spec names (--md-sys-color-*, type scale, shapes).
 * Colors were generated with @material/material-color-utilities from the
 * Auburn orange seed #E87722 (SchemeTonalSpot); see docs/DESIGN.md and
 * scripts/design/ to regenerate.
 *
 * Layout uses the M3 window size classes:
 *   compact  < 600px  : bottom navigation bar, one pane + segmented sub-tabs
 *   medium   600–839  : navigation rail, one pane
 *   expanded ≥ 840px  : navigation rail, list + detail panes side by side
 */

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: light;
  --md-sys-color-primary: #8c4f26;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffdbc8;
  --md-sys-color-on-primary-container: #6f3811;
  --md-sys-color-secondary: #765847;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ffdbc8;
  --md-sys-color-on-secondary-container: #5c4131;
  --md-sys-color-tertiary: #616033;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e8e5ac;
  --md-sys-color-on-tertiary-container: #49491e;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-surface: #fff8f5;
  --md-sys-color-on-surface: #221a15;
  --md-sys-color-on-surface-variant: #52443c;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fff1ea;
  --md-sys-color-surface-container: #fceae2;
  --md-sys-color-surface-container-high: #f6e5dd;
  --md-sys-color-surface-container-highest: #f0dfd7;
  --md-sys-color-outline: #85746b;
  --md-sys-color-outline-variant: #d7c2b8;
  --md-sys-color-inverse-surface: #382e29;
  --md-sys-color-inverse-on-surface: #ffede5;
  --md-sys-color-inverse-primary: #ffb68b;
  --md-sys-color-scrim: #000000;
  /* custom, harmonized with the seed (material-color-utilities customColor) */
  --app-ok: #376b00;            --app-ok-container: #b3f57a;    --app-on-ok-container: #0d2000;
  --app-warn: #895200;          --app-warn-container: #ffdcbc;  --app-on-warn-container: #2c1700;
  --app-early: #2f58bc;         --app-early-container: #dbe1ff; --app-on-early-container: #00174a;
  --app-occ-1: #2e9a3e; --app-occ-2: #e0a000; --app-occ-3: #d63a3a;
  --app-line-ink: 0%;           /* how much to darken line colors for bars on light surfaces */
  --app-line-darken: 18%;
}

/* Dark tokens: follow the system unless the user picked a theme (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-sys-color-primary: #ffb68b;
    --md-sys-color-on-primary: #522300;
    --md-sys-color-primary-container: #6f3811;
    --md-sys-color-on-primary-container: #ffdbc8;
    --md-sys-color-secondary: #e5bfa9;
    --md-sys-color-on-secondary: #432b1c;
    --md-sys-color-secondary-container: #5c4131;
    --md-sys-color-on-secondary-container: #ffdbc8;
    --md-sys-color-tertiary: #cbc992;
    --md-sys-color-on-tertiary: #333209;
    --md-sys-color-tertiary-container: #49491e;
    --md-sys-color-on-tertiary-container: #e8e5ac;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-surface: #1a120d;
    --md-sys-color-on-surface: #f0dfd7;
    --md-sys-color-on-surface-variant: #d7c2b8;
    --md-sys-color-surface-container-lowest: #140d08;
    --md-sys-color-surface-container-low: #221a15;
    --md-sys-color-surface-container: #261e19;
    --md-sys-color-surface-container-high: #312823;
    --md-sys-color-surface-container-highest: #3d332d;
    --md-sys-color-outline: #9f8d84;
    --md-sys-color-outline-variant: #52443c;
    --md-sys-color-inverse-surface: #f0dfd7;
    --md-sys-color-inverse-on-surface: #382e29;
    --md-sys-color-inverse-primary: #8c4f26;
    --app-ok: #98d861;   --app-ok-container: #285000;    --app-on-ok-container: #b3f57a;
    --app-warn: #ffb86a; --app-warn-container: #683d00;  --app-on-warn-container: #ffdcbc;
    --app-early: #b3c5ff; --app-early-container: #073fa3; --app-on-early-container: #dbe1ff;
  --app-occ-1: #5cc66c; --app-occ-2: #fab219; --app-occ-3: #ff6b6b;
    --app-occ-1: #5cc66c; --app-occ-2: #fab219; --app-occ-3: #ff6b6b;
    --app-line-darken: 0%;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary: #ffb68b;
  --md-sys-color-on-primary: #522300;
  --md-sys-color-primary-container: #6f3811;
  --md-sys-color-on-primary-container: #ffdbc8;
  --md-sys-color-secondary: #e5bfa9;
  --md-sys-color-on-secondary: #432b1c;
  --md-sys-color-secondary-container: #5c4131;
  --md-sys-color-on-secondary-container: #ffdbc8;
  --md-sys-color-tertiary: #cbc992;
  --md-sys-color-on-tertiary: #333209;
  --md-sys-color-tertiary-container: #49491e;
  --md-sys-color-on-tertiary-container: #e8e5ac;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffdad6;
  --md-sys-color-surface: #1a120d;
  --md-sys-color-on-surface: #f0dfd7;
  --md-sys-color-on-surface-variant: #d7c2b8;
  --md-sys-color-surface-container-lowest: #140d08;
  --md-sys-color-surface-container-low: #221a15;
  --md-sys-color-surface-container: #261e19;
  --md-sys-color-surface-container-high: #312823;
  --md-sys-color-surface-container-highest: #3d332d;
  --md-sys-color-outline: #9f8d84;
  --md-sys-color-outline-variant: #52443c;
  --md-sys-color-inverse-surface: #f0dfd7;
  --md-sys-color-inverse-on-surface: #382e29;
  --md-sys-color-inverse-primary: #8c4f26;
  --app-ok: #98d861;   --app-ok-container: #285000;    --app-on-ok-container: #b3f57a;
  --app-warn: #ffb86a; --app-warn-container: #683d00;  --app-on-warn-container: #ffdcbc;
  --app-early: #b3c5ff; --app-early-container: #073fa3; --app-on-early-container: #dbe1ff;
  --app-line-darken: 0%;
}

:root {
  /* shape */
  --shape-xs: 4px; --shape-s: 8px; --shape-m: 12px; --shape-l: 16px; --shape-xl: 28px; --shape-full: 999px;
  /* type */
  --font: "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);
  /* layout */
  --app-bar-h: 64px;
  --nav-h: 80px;
  --rail-w: 80px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --gutter: 16px;
}

/* --------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: 400 14px/20px var(--font);
  letter-spacing: 0.25px;
  -webkit-tap-highlight-color: transparent;
}
body.booting main { visibility: hidden; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--md-sys-color-primary); }
[hidden] { display: none !important; }
.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }
kbd {
  font: 500 12px/16px var(--font);
  padding: 2px 6px;
  border-radius: var(--shape-xs);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
}
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 16px; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-radius: var(--shape-full); }
.skip-link:focus { left: 8px; }
.wide-only { display: none; }

/* Focus ring (M3: 3px secondary, offset) */
:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
main:focus { outline: none; }

/* State layers: hover 8%, pressed 12% of the content color */
.btn, .nav-item, .chip, .li, .segmented button, .icon-btn, .bus {
  position: relative; isolation: isolate;
}
.btn::before, .nav-item .nav-indicator::before, .chip::before, .li::before,
.segmented button::before, .icon-btn::before, .bus::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0; transition: opacity 150ms var(--ease); z-index: -1; pointer-events: none;
}
@media (hover: hover) {
  .btn:hover::before, .nav-item:hover .nav-indicator::before, .chip:hover::before,
  .li:hover::before, .segmented button:hover::before, .icon-btn:hover::before, .bus:hover::before { opacity: 0.08; }
}
.btn:active::before, .nav-item:active .nav-indicator::before, .chip:active::before,
.li:active::before, .segmented button:active::before, .icon-btn:active::before, .bus:active::before { opacity: 0.12; }
.li[aria-disabled="true"]::before { display: none; }

/* ---------------------------------------------------------- typography */
.app-title { font: 400 22px/28px var(--font); margin: 0; letter-spacing: 0; }
.pane-title { font: 500 16px/24px var(--font); letter-spacing: 0.15px; margin: 20px 4px 8px; }
.pane-sub { font: 400 14px/20px var(--font); color: var(--md-sys-color-on-surface-variant); margin-left: 4px; }
#live-stop-name { margin: 0; color: inherit; font: inherit; }
/* On phones the segmented tab already says "Next buses". */
@media (max-width: 839px) { [data-pane-id="next"] > .pane-title { display: none; } [data-pane-id="next"] > .notices:not(:empty), [data-pane-id="next"] > .empty-card, [data-pane-id="next"] > .board { margin-top: 16px; } }
.footnote { font: 400 12px/16px var(--font); letter-spacing: 0.4px; color: var(--md-sys-color-on-surface-variant); margin: 12px 4px 0; }
.empty-text { color: var(--md-sys-color-on-surface-variant); margin: 8px 4px; }

/* ---------------------------------------------------------- app bar */
.app-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  min-height: calc(var(--app-bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  background: var(--md-sys-color-surface);
  transition: background-color 200ms var(--ease);
}
.app-bar.is-scrolled { background: var(--md-sys-color-surface-container); }
.app-clock { margin-left: auto; text-align: right; display: grid; font-variant-numeric: tabular-nums; }
#clock-time { font: 500 16px/24px var(--font); letter-spacing: 0.15px; }
#clock-date { font: 500 12px/16px var(--font); letter-spacing: 0.5px; color: var(--md-sys-color-on-surface-variant); }

/* ---------------------------------------------------------- navigation */
.nav {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + var(--safe-b));
  padding: 12px 8px calc(16px + var(--safe-b));
  background: var(--md-sys-color-surface-container);
}
.nav-brand { display: none; }
.nav-item {
  display: grid; justify-items: center; align-content: start; gap: 4px;
  border: 0; background: none; padding: 0;
  color: var(--md-sys-color-on-surface-variant);
}
.nav-item::before { display: none; }
.nav-indicator {
  position: relative; isolation: isolate;
  display: grid; place-items: center;
  width: 64px; height: 32px; border-radius: var(--shape-full);
  transition: background-color 200ms var(--ease);
}
.nav-indicator .icon { grid-area: 1 / 1; }
.nav-item .i-in { opacity: 0; }
.nav-item[aria-current="page"] { color: var(--md-sys-color-on-surface); }
.nav-item[aria-current="page"] .nav-indicator { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.nav-item[aria-current="page"] .i-in { opacity: 1; }
.nav-item[aria-current="page"] .i-out { opacity: 0; }
.nav-label { font: 500 12px/16px var(--font); letter-spacing: 0.5px; }
.nav-item[aria-current="page"] .nav-label { font-weight: 700; }

.shell { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 16px); }
main { padding: 0 var(--gutter); max-width: 720px; margin: 0 auto; }

/* ---------------------------------------------------------- context (stop chip + line chips) */
.context { padding-top: 4px; }
.chip.stop-chip {
  border-color: transparent; padding: 0 4px 0 8px; gap: 6px; max-width: 64vw;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
}
.stop-chip .icon { width: 18px; height: 18px; color: var(--md-sys-color-primary); }
.stop-chip .trail { color: var(--md-sys-color-on-surface-variant); }
.chip-label { overflow: hidden; text-overflow: ellipsis; }
.chip-sep { flex: none; width: 1px; height: 20px; align-self: center; background: var(--md-sys-color-outline-variant); }
.chip-extra { font-weight: 400; color: var(--md-sys-color-on-surface-variant); }

.chip-row {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px;
  scroll-padding: 0 var(--gutter);
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 32px; padding: 0 12px 0 4px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--shape-s);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font: 500 14px/20px var(--font); letter-spacing: 0.1px; white-space: nowrap;
}
.chip .badge { height: 24px; min-width: 32px; font-size: 11px; border-radius: 6px; padding: 0 4px; }
.chip.is-action { padding: 0 16px 0 8px; color: var(--md-sys-color-primary); }
.chip.is-action .icon { width: 18px; height: 18px; }
.chip.is-prominent { border-color: transparent; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }

/* ---------------------------------------------------------- segmented buttons */
.segmented {
  display: flex; margin: 16px 0 0;
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--shape-full);
  overflow: hidden;
}
.segmented button {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 12px;
  border: 0; border-left: 1px solid var(--md-sys-color-outline);
  background: transparent; color: var(--md-sys-color-on-surface);
  font: 500 14px/20px var(--font); letter-spacing: 0.1px;
}
.segmented button:first-child { border-left: 0; }
.segmented button[aria-selected="true"], .segmented button[aria-checked="true"] {
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.segmented .icon { width: 18px; height: 18px; }
.segmented .check { display: none; }
.segmented [aria-selected="true"] .check, .segmented [aria-checked="true"] .check { display: inline; }
.segmented [aria-checked="true"] .check + .icon { display: none; }
.seg-count { font-weight: 400; color: inherit; opacity: 0.8; margin-left: -2px; }
.seg-count:not(:empty)::before { content: "· "; }

/* Only the selected pane is shown in compact/medium layouts. */
.view[data-pane] .pane { display: none; }
#view-schedule[data-pane="next"] [data-pane-id="next"],
#view-schedule[data-pane="day"] [data-pane-id="day"],
#view-live[data-pane="arrivals"] [data-pane-id="arrivals"],
#view-live[data-pane="map"] [data-pane-id="map"],
#view-live[data-pane="buses"] [data-pane-id="buses"] { display: block; }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 24px; border-radius: var(--shape-full);
  border: 0; background: transparent;
  font: 500 14px/20px var(--font); letter-spacing: 0.1px; white-space: nowrap;
}
.btn .icon { width: 18px; height: 18px; margin-left: -8px; }
.btn.filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn.tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn.outlined { border: 1px solid var(--md-sys-color-outline); color: var(--md-sys-color-primary); }
.btn.text { padding: 0 12px; color: var(--md-sys-color-primary); }
.btn.outlined.danger { color: var(--md-sys-color-error); }
.btn.filled.danger { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.btn.small { height: 32px; padding: 0 16px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: 0; border-radius: var(--shape-full); background: transparent; color: var(--md-sys-color-on-surface-variant);
}

/* ---------------------------------------------------------- badges (line identity) */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 32px; padding: 0 6px;
  border-radius: var(--shape-s);
  background: var(--c); color: var(--on-c);
  font: 700 13px/1 var(--font); letter-spacing: 0.3px;
}

/* ---------------------------------------------------------- boards (list of departures) */
.board {
  list-style: none; margin: 0; padding: 0;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--shape-l);
  overflow: hidden;
}
.board:empty { display: none; }
.row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "badge main count" "bar bar bar";
  align-items: center; column-gap: 16px; row-gap: 12px;
  padding: 14px 16px;
}
.row + .row { border-top: 1px solid var(--md-sys-color-outline-variant); }
.row > .badge { grid-area: badge; }
.row-main { grid-area: main; min-width: 0; display: grid; gap: 2px; }
.row-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 500 16px/24px var(--font); letter-spacing: 0.15px; }
.row-title .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 14px/20px var(--font); color: var(--md-sys-color-on-surface-variant); }
.row-meta .icon { width: 16px; height: 16px; vertical-align: -3px; }
.where { font: 500 12px/16px var(--font); letter-spacing: 0.5px; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.tag {
  font: 500 11px/16px var(--font); letter-spacing: 0.5px;
  padding: 0 8px; border-radius: var(--shape-xs);
  background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);
}
.count { grid-area: count; text-align: right; display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.count-big { font: 400 28px/36px var(--font); letter-spacing: 0; white-space: nowrap; }
.count-big small { font: 500 14px/20px var(--font); letter-spacing: 0.1px; margin-left: 2px; color: var(--md-sys-color-on-surface-variant); }
.count-sub { font: 400 12px/16px var(--font); letter-spacing: 0.4px; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.row.is-soon .count-big { color: var(--md-sys-color-primary); font-weight: 500; }
.row.is-now .count-big { color: var(--app-ok); font-weight: 600; animation: pulse 1.2s var(--ease) infinite; }
.row.is-idle .badge { opacity: 0.6; }
.row.is-idle .count-big { color: var(--md-sys-color-on-surface-variant); font-size: 22px; }
@keyframes pulse { 50% { opacity: 0.45; } }

/* M3 linear progress (with stop indicator), colored by the line */
.progress {
  grid-area: bar; position: relative; height: 4px;
  border-radius: var(--shape-full);
  background: var(--md-sys-color-surface-container-highest);
  overflow: hidden;
}
.progress::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  border-radius: inherit;
  background: color-mix(in oklab, var(--c), black var(--app-line-darken));
  transition: width 1s linear;
}
.progress::after {
  content: ""; position: absolute; right: 0; top: 0; width: 4px; height: 4px; border-radius: 50%;
  background: color-mix(in oklab, var(--c), black var(--app-line-darken));
}
.row.is-far .progress::before { opacity: 0.55; }

/* status chips (on time / late / early) */
.status {
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 12px/16px var(--font); letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: var(--shape-s); white-space: nowrap;
}
.st-ok { background: var(--app-ok-container); color: var(--app-on-ok-container); }
.st-warn { background: var(--app-warn-container); color: var(--app-on-warn-container); }
.st-bad { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.st-early { background: var(--app-early-container); color: var(--app-on-early-container); }
.st-muted { color: var(--md-sys-color-error); }
.st-hub { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.row.is-here .count-big { color: var(--app-ok); font-weight: 600; }

/* occupancy meter */
.load { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* How full a bus is: a rounded gauge, green (room) / amber (filling up) / red (crowded).
   Always next to a rider icon or in a bus pin, never alone, so it doesn't read as a line color. */
.occ { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.occ .icon { width: 16px; height: 16px; }
.occ-n { font-variant-numeric: tabular-nums; }
.occ-gauge { display: inline-block; width: 26px; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--md-sys-color-surface-container-highest); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
.occ-gauge i { display: block; height: 100%; border-radius: 3px; background: var(--occ); }
.occ-1 { --occ: var(--app-occ-1); } .occ-2 { --occ: var(--app-occ-2); } .occ-3 { --occ: var(--app-occ-3); }
.row.is-bus { cursor: pointer; }
.row.is-bus:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 5%, transparent); }
.row.is-bus:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; }
.load-bar { width: 36px; height: 6px; border-radius: 3px; background: var(--md-sys-color-surface-container-highest); position: relative; overflow: hidden; }
.load-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--md-sys-color-primary); border-radius: inherit; }

/* bus list */
.bus {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "badge main act";
  align-items: center; gap: 4px 16px;
  padding: 14px 8px 14px 16px; cursor: pointer;
}
.bus > .badge { grid-area: badge; }
.bus > .icon-btn { grid-area: act; color: var(--md-sys-color-primary); }
.bus + .bus { border-top: 1px solid var(--md-sys-color-outline-variant); }
/* Line badges line up in lists even when the abbreviation is long (NDON, WBR). */
.row > .badge, .bus > .badge, .li > .badge, .tt-head .badge { min-width: 56px; }

/* ---------------------------------------------------------- notices & cards */
.notices { display: grid; gap: 8px; }
.notices:not(:empty) { margin-top: 16px; }
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--shape-m);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  font: 400 14px/20px var(--font);
}
.notice .icon { width: 20px; height: 20px; margin-top: 0; }
.notice.closed { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.notice.error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.notice .notice-action { margin-left: auto; align-self: center; }

.empty-card {
  display: grid; justify-items: center; text-align: center; gap: 8px;
  padding: 32px 24px; border-radius: var(--shape-xl);
  background: var(--md-sys-color-surface-container-low);
}
.empty-card .hero {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px;
  background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); margin-bottom: 8px;
}
.empty-card .hero .icon { width: 40px; height: 40px; }
.empty-card h3 { margin: 0; font: 400 24px/32px var(--font); }
.empty-card p { margin: 0 0 8px; max-width: 36ch; color: var(--md-sys-color-on-surface-variant); }
.empty-card .actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.card {
  padding: 20px; border-radius: var(--shape-m);
  background: var(--md-sys-color-surface-container-low);
}
.card-title { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 500 16px/24px var(--font); letter-spacing: 0.15px; }
.card-title .icon { color: var(--md-sys-color-primary); }
.card-text { margin: 0 0 12px; color: var(--md-sys-color-on-surface-variant); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.settings { display: grid; gap: 12px; padding-top: 8px; }
.settings .segmented { margin: 0; }
.kv { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kv li { display: flex; justify-content: space-between; gap: 16px; }
.kv li span:first-child { color: var(--md-sys-color-on-surface-variant); }
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.shortcuts dd { margin: 0; color: var(--md-sys-color-on-surface-variant); }

/* ---------------------------------------------------------- live status */
.live-status { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 0 4px; min-height: 40px; color: var(--md-sys-color-on-surface-variant); }
.live-status .grow { flex: 1; min-width: 0; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--app-ok); animation: ping 2s var(--ease) infinite; }
.live-dot.is-wait { background: var(--app-warn); animation: pulse 1s infinite; }
.live-dot.is-down, .live-dot.is-paused { background: var(--md-sys-color-outline); animation: none; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-ok) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 10px transparent; } }

/* ---------------------------------------------------------- timetable */
.timetable { display: grid; gap: 12px; }
.tt-line { padding: 16px; border-radius: var(--shape-l); background: var(--md-sys-color-surface-container-low); }
.tt-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 500 16px/24px var(--font); }
.tt-head small { margin-left: auto; font: 400 12px/16px var(--font); color: var(--md-sys-color-on-surface-variant); }
.tt-times { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.tt-times li {
  padding: 6px 4px; border-radius: var(--shape-s); text-align: center;
  font: 500 13px/18px var(--font); font-variant-numeric: tabular-nums;
  background: var(--md-sys-color-surface-container-high);
}
.tt-times li.past { background: transparent; color: var(--md-sys-color-on-surface-variant); opacity: 0.6; text-decoration: line-through; }
.tt-times li.next { background: var(--c); color: var(--on-c); font-weight: 700; }

/* ---------------------------------------------------------- map */
.pane-map { margin-top: 16px; }
.map {
  height: calc(100dvh - var(--app-bar-h) - var(--nav-h) - var(--safe-b) - 88px);
  min-height: 320px; border-radius: var(--shape-l); overflow: hidden;
  background: var(--md-sys-color-surface-container);
}
.leaflet-container { font: 400 14px/20px var(--font); background: var(--md-sys-color-surface-container); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.85) saturate(0.5); }
}
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.85) saturate(0.5); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.leaflet-popup-content-wrapper { border-radius: var(--shape-m); }
.leaflet-popup-content { margin: 12px 16px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--md-sys-color-on-surface-variant); }
.leaflet-bar { border: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.3) !important; border-radius: var(--shape-m) !important; overflow: hidden; }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border-color: var(--md-sys-color-outline-variant); }
.leaflet-control-attribution { background: color-mix(in srgb, var(--md-sys-color-surface) 80%, transparent) !important; color: var(--md-sys-color-on-surface-variant); }
.leaflet-control-attribution a { color: var(--md-sys-color-primary); }
.pop { display: grid; gap: 4px; min-width: 190px; }
.pop b { font: 500 14px/20px var(--font); }
.pop small { color: var(--md-sys-color-on-surface-variant); }
.pop .btn { margin-top: 8px; }
.pop em { color: var(--md-sys-color-primary); font-style: normal; }
.bus-icon, .stop-ring { background: none; border: 0; }
.pane-map { position: relative; }
.map-focus {
  position: absolute; z-index: 800; top: 10px; left: 56px; right: 10px; width: max-content; max-width: calc(100% - 66px);
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 8px; border-radius: 999px;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.3); font: 500 14px/20px var(--font);
}
.map-focus.is-hint { padding: 4px 12px; box-shadow: none; background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 85%, transparent); pointer-events: none; }
.map-hint { color: var(--md-sys-color-on-surface-variant); font-size: 13px; }
.map-focus .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-lines { display: flex; flex-wrap: wrap; gap: 4px; }
.pop-line { font: 600 11px/16px var(--font); padding: 0 6px; border-radius: 4px; border-left: 3px solid var(--c); background: var(--md-sys-color-surface-container-highest); }
/* The highlighted line's direction trace: short light dashes drifting the way the bus drives. */
.route-flow { stroke-dasharray: 1 22; animation: route-flow 1.4s linear infinite; }
@keyframes route-flow { to { stroke-dashoffset: -23; } }
@media (prefers-reduced-motion: reduce) { .route-flow { animation: none; } }
.stop-ring svg { display: block; }
.bus-pin {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c); color: var(--on-c);
  border: 2px solid var(--md-sys-color-surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
  font: 700 10px/1 var(--font);
  transition: transform 200ms var(--ease);
}
.bus-arrow { position: absolute; inset: -9px; pointer-events: none; }
.bus-arrow::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 8px solid var(--md-sys-color-on-surface);
}
.is-hot .bus-pin { transform: scale(1.3); }
.is-sel .bus-pin { transform: scale(1.3); outline: 3px solid var(--md-sys-color-primary); outline-offset: 1px; }

/* ---------------------------------------------------------- line view (1-D strip over the map) */
.line-view {
  position: absolute; z-index: 900; left: 0; right: 0; bottom: 0;
  background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface);
  border-radius: var(--shape-l) var(--shape-l) 0 0; box-shadow: 0 -2px 10px rgba(0,0,0,.25);
  padding: 8px 0 10px; animation: lv-in 220ms var(--ease);
  background-color: var(--md-sys-color-surface-container-low); opacity: 1; isolation: isolate;
}
@keyframes lv-in { from { transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .line-view { animation: none; } }
.lv-head { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; }
.lv-title { flex: 1; min-width: 0; display: grid; }
.lv-title b { font: 500 16px/22px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-sub { font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.lv-strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.lv-track { position: relative; height: 150px; margin-top: 14px; }
.lv-bar { position: absolute; top: 56px; height: 6px; border-radius: 3px; background: var(--c); }
.lv-stop { position: absolute; top: 52px; width: 0; }
.lv-stop i { position: absolute; left: -7px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--c); box-sizing: border-box; }
.lv-stop.is-hub i { width: 18px; height: 18px; left: -9px; top: -2px; border-color: #1f1a17; }
.lv-name {
  position: absolute; top: 18px; left: -2px; transform-origin: 0 0; transform: rotate(45deg);
  font-size: 11.5px; line-height: 14px; white-space: nowrap; max-width: 108px; overflow: hidden; text-overflow: ellipsis;
  color: var(--md-sys-color-on-surface-variant);
}
.lv-stop.is-hub .lv-name { font-weight: 600; color: var(--md-sys-color-on-surface); }
.lv-buses { position: absolute; inset: 0; pointer-events: none; }
.lv-bus {
  position: absolute; top: 6px; transform: translateX(-50%); pointer-events: auto;
  display: grid; justify-items: center; gap: 7px; padding: 2px; border: 0; background: none; cursor: pointer;
  transition-property: left, top; transition-duration: 1.2s, 200ms; transition-timing-function: linear, var(--ease);
  color: var(--md-sys-color-on-surface);
}
.lv-bus.is-up { top: -8px; }
.lv-pin {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c); color: var(--on-c, #fff); border: 2px solid var(--md-sys-color-surface); box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lv-pin .icon { width: 18px; height: 18px; }
.lv-bus.is-sel .lv-pin { outline: 3px solid var(--md-sys-color-primary); outline-offset: 1px; }
.lv-detail { padding: 0 16px; }
.lv-hint { margin: 0; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.lv-d { display: grid; gap: 4px; font-size: 14px; }
.lv-d-row { display: flex; align-items: center; gap: 8px; }
.lv-d-row > span:not(.status):not(.occ) { flex: 1; min-width: 0; }
.lv-d-row .icon { width: 18px; height: 18px; color: var(--md-sys-color-on-surface-variant); }
.lv-d-row small { color: var(--md-sys-color-on-surface-variant); flex: 1; }
.lv-d .btn .icon { width: 18px; height: 18px; margin-right: 6px; color: inherit; }
.line-view:not([hidden]) ~ .leaflet-control-container .leaflet-bottom { bottom: 0; }
/* Next stops of the selected bus (or next buses at a tapped stop) */
.lv-next { list-style: none; margin: 2px 0 2px; padding: 0; display: grid; gap: 2px; }
.lv-next li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.lv-next li:last-child { border-bottom: 0; }
.lv-next li[data-lv-pick] { cursor: pointer; }
.lv-next-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-next b { font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.lv-next time { color: var(--md-sys-color-on-surface-variant); font-size: 13px; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.lv-next small { font-size: 12px; }
.lv-next .occ { align-self: center; }
.lv-stop { cursor: pointer; }
.lv-stop::before { content: ""; position: absolute; left: -14px; top: -12px; width: 28px; height: 40px; } /* a finger-sized target around the dot */
.lv-stop.is-next i { box-shadow: 0 0 0 3px var(--md-sys-color-primary); }
.lv-stop.is-pick i { transform: scale(1.35); box-shadow: 0 0 0 3px var(--md-sys-color-primary); }
.lv-eta { color: var(--md-sys-color-primary); font-weight: 700; }
.lv-stop.is-next .lv-name { color: var(--md-sys-color-on-surface); }

/* ---------------------------------------------------------- hints from past days */
.hint { display: inline-flex; align-items: center; gap: 3px; color: var(--md-sys-color-on-surface-variant); font-size: 12px; white-space: nowrap; }
.hint .icon { width: 14px; height: 14px; }
.hint.busier { color: var(--md-sys-color-on-surface); font-weight: 600; }
.live-status .hint { font-size: inherit; }
.beta { display: inline-block; vertical-align: 3px; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font: 600 10.5px/16px var(--font); letter-spacing: .06em; text-transform: uppercase;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.welcome-note { font-size: 12.5px; color: var(--md-sys-color-on-surface-variant); margin-top: 4px; }
.lv-usual { margin-left: auto; white-space: nowrap; }
@media (max-width: 599px) { .lv-usual-t { display: none; } .lv-usual { min-width: 40px; padding: 0 8px; } .lv-usual .icon { margin: 0; } }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--md-sys-color-primary); text-decoration: underline; cursor: pointer; }
.lv-usual .icon { width: 18px; height: 18px; margin-right: 4px; }
.lv-head .lv-usual + .icon-btn { margin-left: 0; }
.switch-row small { display: block; font-weight: 400; }
/* Usual day sheet */
.pt-head { display: flex; align-items: center; gap: 8px; }
.pt-head-row { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.pt-head-row h2 { margin: 0; }
.sheet-body.pt-body { padding: 4px 24px 20px; }
.pt-sec { margin: 0 0 18px; }
.pt-sec h3 { font: 500 14px/20px var(--font); margin: 0 0 8px; }
.pt-chart { display: flex; align-items: flex-end; gap: 2px; height: 96px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.pt-bar { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--occ, var(--md-sys-color-outline-variant)); }
.pt-bar.is-now { outline: 2px solid var(--md-sys-color-on-surface); outline-offset: 1px; }
.pt-ticks { position: relative; height: 16px; font-size: 11px; color: var(--md-sys-color-on-surface-variant); }
.pt-ticks span { position: absolute; transform: translateX(-50%); top: 2px; }
.pt-note { font-size: 13px; color: var(--md-sys-color-on-surface-variant); margin: 6px 0 0; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-top: 6px; }
.pt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--occ); }
.pt-legend i.is-now { background: none; outline: 2px solid var(--md-sys-color-on-surface); outline-offset: -2px; }
.pt-hours { display: flex; flex-wrap: wrap; gap: 4px; }
.pt-hour { display: grid; justify-items: center; min-width: 38px; padding: 4px 2px; border-radius: 8px; font-size: 11px; background: var(--md-sys-color-surface-container-high); }
.pt-hour b { font-weight: 500; color: var(--md-sys-color-on-surface-variant); }
.pt-hour i { font-style: normal; font: 600 13px/18px var(--font); font-variant-numeric: tabular-nums; }
.pt-hour.some { background: color-mix(in srgb, var(--app-occ-2) 28%, transparent); }
.pt-hour.late { background: color-mix(in srgb, var(--app-occ-3) 30%, transparent); }
.pt-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pt-stops li { display: flex; gap: 8px; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); font-size: 14px; }
.pt-stop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-onoff { color: var(--md-sys-color-on-surface-variant); font-size: 12.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.pt-onoff .icon { width: 14px; height: 14px; display: none; }
.pt-foot { font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin: 4px 0 0; }

/* ---------------------------------------------------------- feedback */
.app-feedback { margin-left: auto; color: var(--md-sys-color-on-surface-variant); }
.app-feedback + .app-clock { margin-left: 4px; }
.fb-body { padding: 8px 24px 16px; display: grid; gap: 14px; }
.fb-body .field input, .fb-body .field textarea { width: 100%; box-sizing: border-box; }
.field textarea { padding: 10px 12px; border-radius: var(--shape-xs); border: 1px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface); font: 400 16px/24px var(--font); resize: vertical; color-scheme: inherit; }
.field textarea:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 0; border-color: transparent; }

/* ---------------------------------------------------------- sheets & dialogs */
dialog { color: var(--md-sys-color-on-surface); }
dialog::backdrop { background: rgb(0 0 0 / 0.32); }
.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none;
  max-height: 88dvh; padding: 0; border: 0;
  border-radius: var(--shape-xl) var(--shape-xl) 0 0;
  background: var(--md-sys-color-surface-container-low);
  display: none; flex-direction: column;
}
.sheet[open] { display: flex; animation: sheet-in 300ms var(--ease-out); }
.sheet.tall { height: 88dvh; }
@keyframes sheet-in { from { transform: translateY(40%); opacity: 0.4; } }
.sheet-handle { width: 32px; height: 4px; border-radius: 2px; margin: 16px auto 8px; background: var(--md-sys-color-on-surface-variant); opacity: 0.4; flex: none; }
.sheet-head { padding: 8px 24px 12px; flex: none; }
.sheet-head h2 { margin: 0; font: 400 24px/32px var(--font); outline: none; }
.sheet-sub { margin: 4px 0 0; color: var(--md-sys-color-on-surface-variant); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 0 8px; flex: 1 1 auto; }
.sheet-foot {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex: none;
  padding: 12px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--md-sys-color-outline-variant);
}
.sheet-count { margin-right: auto; padding-left: 8px; color: var(--md-sys-color-on-surface-variant); }
.sheet-section { font: 500 14px/20px var(--font); letter-spacing: 0.1px; color: var(--md-sys-color-primary); margin: 16px 24px 4px; }

.li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  width: 100%; min-height: 56px; padding: 8px 24px 8px 16px;
  border: 0; background: transparent; text-align: left; color: var(--md-sys-color-on-surface);
}
.li-text { display: grid; min-width: 0; }
.li-head { font: 400 16px/24px var(--font); letter-spacing: 0.5px; }
.li-sub { font: 400 14px/20px var(--font); color: var(--md-sys-color-on-surface-variant); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.li-sub .badge { height: 20px; min-width: 0; font-size: 10px; padding: 0 5px; border-radius: 5px; }
.li .lead-icon { color: var(--md-sys-color-on-surface-variant); margin: 0 4px 0 8px; }
.li .trail-icon { color: var(--md-sys-color-on-surface-variant); }
.li[aria-checked="true"] .trail-icon, .li[aria-current="true"] .trail-icon { color: var(--md-sys-color-primary); }
.li[aria-disabled="true"] { opacity: 0.38; cursor: not-allowed; }
.li[aria-current="true"] .li-head { color: var(--md-sys-color-primary); font-weight: 500; }

.li-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-right: 12px; }
.li-wrap .li { padding-right: 8px; }
.icon-btn.star { color: var(--md-sys-color-on-surface-variant); }
.icon-btn.star[aria-pressed="true"] { color: var(--md-sys-color-primary); }

.nearby { padding: 4px 16px 4px; }
.nearby-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 8px 8px; }
.nearby-actions .chip { padding: 0 16px 0 8px; color: var(--md-sys-color-on-surface); }
.nearby-actions .chip .icon { width: 18px; height: 18px; color: var(--md-sys-color-primary); }
.nearby-map { height: 260px; margin: 4px 8px 8px; border-radius: var(--shape-l); overflow: hidden; background: var(--md-sys-color-surface-container); }
.nearby-msg { margin: 4px 8px 4px; color: var(--md-sys-color-on-surface-variant); }
#nearby-results .li-wrap { margin: 0 -16px; }
#nearby-results:not(:empty) { padding-bottom: 8px; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.pick-icon { background: none; border: 0; }
.pick-pin {
  display: block; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--md-sys-color-primary); border: 3px solid var(--md-sys-color-on-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.search {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  height: 56px; padding: 0 16px; border-radius: var(--shape-full);
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant);
}
.search input { flex: 1; border: 0; background: none; outline: none; font: 400 16px/24px var(--font); color: var(--md-sys-color-on-surface); min-width: 0; }
.search:focus-within { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }

.dialog {
  border: 0; padding: 24px; width: min(360px, 90vw);
  border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container-high);
}
.dialog h2 { margin: 0 0 16px; font: 400 24px/32px var(--font); }
.dialog p { margin: 0 0 24px; color: var(--md-sys-color-on-surface-variant); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

.snackbar {
  position: fixed; z-index: 40; left: 16px; right: 16px;
  bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 8px 4px 16px;
  border-radius: var(--shape-xs);
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
  animation: sheet-in 250ms var(--ease-out);
}
.snackbar .btn { color: var(--md-sys-color-inverse-primary); margin-left: auto; padding: 0 12px; }

/* ---------------------------------------------------------- line toggle chips (context row) */
/* M3 filter chips: off = outlined with a muted badge, on = tonal with a check. */
.chip.line-chip { padding: 0 12px 0 4px; gap: 6px; transition: background-color 150ms var(--ease), border-color 150ms var(--ease); }
.chip.line-chip:not(.is-on) .badge { filter: saturate(0.35); opacity: 0.7; }
.chip.line-chip.is-on {
  border-color: transparent; padding-left: 8px;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
.chip.line-chip .chk { width: 18px; height: 18px; }

/* ---------------------------------------------------------- Next buses: one row per line */
.row .then { font-variant-numeric: tabular-nums; }
.row .then b { font-weight: 500; color: var(--md-sys-color-on-surface); }
.row.is-clickable { cursor: pointer; }
.live-mark { display: inline-flex; align-items: center; gap: 2px; color: var(--app-ok); }
.live-mark .icon { width: 14px; height: 14px; }
.sched-mark { display: inline-flex; align-items: center; gap: 2px; }
.sched-mark .icon { width: 14px; height: 14px; }
.row-meta .status { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------- Plan tab */
.plan-form {
  margin-top: 12px; padding: 12px 12px 16px; border-radius: var(--shape-l);
  background: var(--md-sys-color-surface-container-low);
}
.plan-places {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas: "rail from swap" "rail to swap";
  align-items: center; column-gap: 8px; row-gap: 8px;
}
.plan-rail { grid-area: rail; display: grid; justify-items: center; align-self: stretch; padding: 14px 0; gap: 2px; color: var(--md-sys-color-primary); }
.plan-rail .icon { width: 20px; height: 20px; }
.plan-dots { width: 2px; min-height: 16px; background: repeating-linear-gradient(var(--md-sys-color-outline-variant) 0 4px, transparent 4px 8px); }
.place-btn[data-place="from"] { grid-area: from; }
.place-btn[data-place="to"] { grid-area: to; }
.plan-swap { grid-area: swap; }
.place-btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; text-align: left; gap: 0; min-height: 56px; padding: 6px 16px;
  border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--shape-xs);
  background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
}
.place-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--md-sys-color-on-surface); opacity: 0; transition: opacity 150ms var(--ease); }
@media (hover: hover) { .place-btn:hover::before { opacity: 0.06; } }
.place-k { font: 400 12px/16px var(--font); letter-spacing: 0.4px; color: var(--md-sys-color-on-surface-variant); }
.place-v { font: 400 16px/24px var(--font); letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-v.is-empty { color: var(--md-sys-color-on-surface-variant); }
.plan-form .segmented { margin-top: 12px; }
.plan-when { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.field { display: grid; gap: 2px; }
.field > span { font: 400 12px/16px var(--font); letter-spacing: 0.4px; color: var(--md-sys-color-on-surface-variant); padding-left: 4px; }
.field select, .field input {
  height: 48px; padding: 0 12px; border-radius: var(--shape-xs);
  border: 1px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
  font: 400 16px/24px var(--font); color-scheme: inherit;
}
.field select:focus-visible, .field input:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 0; border-color: transparent; }
.plan-quick { margin-top: 12px; }
.plan-quick .chip { padding: 0 14px 0 10px; color: var(--md-sys-color-on-surface); }
.plan-quick .chip .icon { width: 18px; height: 18px; color: var(--md-sys-color-primary); }
.plan-quick .chip-label { max-width: 60vw; }
.chip.is-busy { opacity: 0.6; pointer-events: none; }

.plan-results { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.plan-results:empty { display: none; }
.plan-opt {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 6px; padding: 14px 16px; cursor: pointer;
  border-radius: var(--shape-m); background: var(--md-sys-color-surface-container-low);
  outline-offset: 2px;
}
.plan-opt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--md-sys-color-on-surface); opacity: 0; transition: opacity 150ms var(--ease); }
@media (hover: hover) { .plan-opt:hover::before { opacity: 0.05; } }
.plan-opt.is-selected { background: var(--md-sys-color-surface-container); box-shadow: inset 0 0 0 2px var(--md-sys-color-secondary-container); }
.opt-top { display: flex; align-items: baseline; gap: 12px; }
.opt-times { font: 400 22px/28px var(--font); font-variant-numeric: tabular-nums; }
.opt-dur { margin-left: auto; font: 500 14px/20px var(--font); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.opt-legs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.opt-legs .badge { height: 24px; min-width: 36px; font-size: 11px; border-radius: 6px; }
.leg-walk { display: inline-flex; align-items: center; gap: 0; font: 500 13px/20px var(--font); color: var(--md-sys-color-on-surface-variant); }
.leg-walk .icon { width: 20px; height: 20px; }
.leg-sep .icon { width: 18px; height: 18px; color: var(--md-sys-color-outline); vertical-align: middle; }
.opt-meta { display: flex; flex-wrap: wrap; gap: 4px; font: 400 14px/20px var(--font); color: var(--md-sys-color-on-surface-variant); }
.opt-meta [data-leave] { font-weight: 500; color: var(--md-sys-color-on-surface); }
.opt-meta { flex-wrap: nowrap; min-width: 0; }
.opt-meta [data-leave] { white-space: nowrap; }
.opt-from { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opt-meta [data-leave].is-soon { color: var(--md-sys-color-primary); }
.plan-opt.is-walk, .plan-empty {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; cursor: default;
}
.plan-opt.is-walk > .icon, .plan-empty > .icon { width: 28px; height: 28px; color: var(--md-sys-color-primary); }
.plan-opt.is-walk div, .plan-empty div { display: grid; gap: 2px; }
.plan-opt.is-walk span, .plan-empty span { color: var(--md-sys-color-on-surface-variant); font: 400 14px/20px var(--font); }
.plan-empty { padding: 20px; border-radius: var(--shape-l); background: var(--md-sys-color-surface-container-low); }
.plan-empty b { font: 500 16px/24px var(--font); }

/* step-by-step trip */
.steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.opt-detail { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--md-sys-color-outline-variant); cursor: default; }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 8px 0; position: relative; }
.step > .icon, .step > .badge { justify-self: center; }
.step > .icon { color: var(--md-sys-color-on-surface-variant); }
.step-place > .icon { color: var(--md-sys-color-primary); }
.step > div { display: grid; gap: 2px; font: 400 14px/20px var(--font); color: var(--md-sys-color-on-surface-variant); }
.step b { font: 500 16px/24px var(--font); color: var(--md-sys-color-on-surface); }
.step-bus > .badge { height: 28px; min-width: 48px; font-size: 12px; }
.step-bus::before {
  content: ""; position: absolute; left: 26px; top: 40px; bottom: -4px; width: 4px; border-radius: 2px;
  background: color-mix(in oklab, var(--c), black var(--app-line-darken));
}
.step .btn.small { justify-self: start; margin: 4px 0 0 -12px; }
.plan-detail-pane { display: none; }

/* Settings: "Next buses" layout picker */
.settings .segmented + .card-text { margin-top: 12px; }

@media (min-width: 840px) {
  #view-plan .panes { display: grid; grid-template-columns: minmax(380px, 520px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .plan-detail-pane { display: block; position: sticky; top: calc(var(--app-bar-h) + 8px); }
  .plan-detail { padding: 8px 20px 16px; border-radius: var(--shape-l); background: var(--md-sys-color-surface-container-low); }
  .plan-detail .steps { margin-top: 0; }
  .opt-detail { display: none; }
  #view-plan .segmented { display: flex; }
  .plan-quick .chip-label { max-width: 320px; }
}

/* ---------------------------------------------------------- medium: navigation rail */
@media (min-width: 600px) {
  .nav {
    inset: 0 auto 0 0; width: var(--rail-w); height: auto;
    grid-template-columns: none; grid-auto-rows: min-content; align-content: start; gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 0 16px;
    background: var(--md-sys-color-surface);
  }
  .nav-brand { display: grid; place-items: center; height: 56px; margin-bottom: 28px; color: var(--md-sys-color-primary); }
  .nav-brand .icon { width: 32px; height: 32px; }
  .nav-indicator { width: 56px; }
  .shell { margin-left: var(--rail-w); padding-bottom: 24px; }
  :root { --gutter: 24px; --nav-h: 0px; }
  .snackbar { left: calc(var(--rail-w) + 24px); right: auto; min-width: 344px; max-width: 560px; bottom: 24px; }
  .sheet {
    inset: 0; margin: auto; width: min(560px, 92vw); max-height: 80dvh; height: auto;
    border-radius: var(--shape-xl); background: var(--md-sys-color-surface-container-high);
  }
  .sheet.tall { height: min(720px, 86dvh); }
  .sheet-handle { display: none; }
  .sheet-head { padding-top: 24px; }
  @keyframes sheet-in { from { transform: scale(0.96); opacity: 0; } }
  .chip-row { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
}

/* ---------------------------------------------------------- expanded: list + detail */
@media (min-width: 840px) {
  .wide-only { display: block; }
  main { max-width: 1440px; padding-bottom: 24px; }
  .chip.stop-chip { max-width: 420px; }
  .view .segmented { display: none; }
  .settings .segmented { display: flex; }
  .view[data-pane] .pane { display: block !important; }
  .panes { display: grid; gap: 24px; align-items: start; }
  #view-schedule .panes { grid-template-columns: minmax(380px, 1fr) minmax(340px, 1fr); }
  #view-live .panes {
    grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
    grid-template-areas: "arrivals map" "buses map";
    grid-template-rows: auto 1fr;
  }
  #view-live [data-pane-id="arrivals"] { grid-area: arrivals; }
  #view-live [data-pane-id="buses"] { grid-area: buses; }
  #view-live [data-pane-id="map"] { grid-area: map; position: sticky; top: calc(var(--app-bar-h) + 8px); margin-top: 20px; }
  .map { height: calc(100dvh - var(--app-bar-h) - 48px); min-height: 480px; }
  .live-status { margin-top: 8px; }
  .settings { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; align-items: start; }
  .row { padding: 16px 20px; }
}

@media (min-width: 1200px) {
  #view-live .panes { grid-template-columns: minmax(420px, 500px) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Base maps with their own dark style: no darkening filter. */
.map.tiles-native-dark .leaflet-tile-pane { filter: none !important; }
/* "Muted" base map: the OSM tiles desaturated and softened (dark theme: on top of the darkening). */
.map.tiles-muted .leaflet-tile-pane { filter: grayscale(0.9) contrast(0.88) brightness(1.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map.tiles-muted .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) grayscale(1) brightness(0.85) contrast(0.8); }
}
:root[data-theme="dark"] .map.tiles-muted .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) grayscale(1) brightness(0.85) contrast(0.8); }
.lv-bus .occ-gauge { width: 22px; height: 5px; }
.map-preview { height: 200px; min-height: 0; margin-top: 12px; border-radius: var(--shape-m); }
.map-preview .leaflet-control-attribution { font-size: 10px; }
.card-hint { margin: 8px 0 0; font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
/* Keep the map and its panels in their own layer, so they never cover the bottom navigation bar. */
.pane-map { z-index: 0; }
.map { position: relative; z-index: 0; }
.map-preview { position: relative; }
.switch-row { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; font: 500 14px/20px var(--font); }
.switch-row input { width: 20px; height: 20px; accent-color: var(--md-sys-color-primary); }
.places-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.places-list li { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.places-list li > .icon { color: var(--md-sys-color-on-surface-variant); }
.places-list b { display: block; font: 500 14px/20px var(--font); }
.places-list small { display: block; color: var(--md-sys-color-on-surface-variant); font-size: 12.5px; }
.place-body { padding: 8px 24px 16px; display: grid; gap: 16px; }
.place-body .field input { width: 100%; }
.sheet-hint { padding: 4px 24px 8px; font-size: 13px; }
.geo-credit { padding: 4px 24px; margin: 0; font-size: 11.5px; color: var(--md-sys-color-on-surface-variant); }
.chip.is-save { border-style: dashed; }