/* Takt Transit – shared stylesheet of every edition. Design tokens follow DESIGN.md (repo root, impeccable format):
   dark-first «Moosnacht», light theme as the paper counterpart. The theme is set on <html data-theme> by app.js
   (stored choice, else the system preference); the prefers-color-scheme block only covers the first paint.
   Inter for the UI, Overpass 500 only for the wordmark and the city line. Line colours arrive as custom
   properties set from JS (paintColours) – no inline style attributes, so the CSP needs no 'unsafe-inline'. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/overpass-medium-latin.woff2") format("woff2");
}

/* ---------- tokens: dark (default) ---------- */
:root {
  color-scheme: dark;
  --panel-bg: oklch(22% 0.022 160 / 0.96);
  --panel-solid: oklch(22% 0.022 160);
  --panel-fg: oklch(95% 0.01 150);
  --muted: oklch(70% 0.03 160);
  --accent: oklch(80% 0.10 160);
  --accent-fg: oklch(16% 0.03 160);
  --accent-soft: oklch(80% 0.10 160 / 0.16);
  --live: oklch(82% 0.17 150);
  --line: oklch(30% 0.02 160);
  --btn-bg: oklch(95% 0.01 150 / 0.08);
  --btn-bg-hover: oklch(95% 0.01 150 / 0.14);
  --warn-bg: oklch(32% 0.06 85);
  --warn-fg: oklch(90% 0.12 90);
  --error-bg: oklch(30% 0.08 25);
  --error-fg: oklch(88% 0.10 25);
  --canvas: oklch(17% 0.02 160);
  --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  /* shape */
  --radius: 16px;
  --radius-btn: 10px;
  --radius-pill: 8px;
  /* type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Overpass", "Inter", system-ui, sans-serif;
  --fs: 13.5px;
  --tap: 40px;                 /* minimum touch target */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dock: 130px;   /* space reserved above the bottom control bar for sheets, notices, map controls */
  --safe-t: env(safe-area-inset-top, 0px);
}
/* ---------- tokens: light (paper) ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --panel-bg: oklch(99% 0.004 140 / 0.96);
  --panel-solid: oklch(99% 0.004 140);
  --panel-fg: oklch(18% 0.02 160);
  --muted: oklch(46% 0.03 160);
  --accent: oklch(42% 0.09 160);
  --accent-fg: #fff;
  --accent-soft: oklch(42% 0.09 160 / 0.12);
  --live: oklch(60% 0.17 150);
  --line: oklch(88% 0.012 140);
  --btn-bg: oklch(18% 0.02 160 / 0.06);
  --btn-bg-hover: oklch(18% 0.02 160 / 0.11);
  --warn-bg: oklch(95% 0.06 90);
  --warn-fg: oklch(40% 0.10 70);
  --error-bg: oklch(95% 0.04 25);
  --error-fg: oklch(42% 0.15 25);
  --canvas: oklch(95% 0.008 140);
  --shadow: 0 8px 26px -8px rgba(20, 50, 35, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 50, 35, 0.2);
  --shadow-lg: 0 12px 36px -8px rgba(20, 50, 35, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06);
}
/* First paint before app.js has set data-theme: follow the system. Same values as above. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --panel-bg: oklch(99% 0.004 140 / 0.96); --panel-solid: oklch(99% 0.004 140); --panel-fg: oklch(18% 0.02 160);
    --muted: oklch(46% 0.03 160); --accent: oklch(42% 0.09 160); --accent-fg: #fff; --accent-soft: oklch(42% 0.09 160 / 0.12);
    --live: oklch(60% 0.17 150); --line: oklch(88% 0.012 140); --btn-bg: oklch(18% 0.02 160 / 0.06);
    --btn-bg-hover: oklch(18% 0.02 160 / 0.11); --canvas: oklch(95% 0.008 140);
    --shadow: 0 8px 26px -8px rgba(20, 50, 35, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(20, 50, 35, 0.2);
    --shadow-lg: 0 12px 36px -8px rgba(20, 50, 35, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* beat display:flex etc. on hidden elements */
html, body {
  margin: 0; height: 100%; background: var(--canvas); font-family: var(--font); font-size: var(--fs); line-height: 1.45;
  color: var(--panel-fg); overscroll-behavior: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; color: inherit; }
#map { position: absolute; inset: 0; }
.maplibregl-ctrl-top-right { top: calc(var(--safe-t) + 8px); }
.maplibregl-ctrl-bottom-right { bottom: calc(var(--safe-b) + var(--dock) - 12px); }
.maplibregl-ctrl-group { border-radius: var(--radius-btn); box-shadow: var(--shadow); background: var(--panel-solid); overflow: hidden; }
.maplibregl-ctrl-group button { width: 34px; height: 34px; }
.maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.maplibregl-ctrl-group button:focus-visible { box-shadow: none; outline: 2px solid var(--accent); outline-offset: -2px; }
:root:not([data-theme="light"]) .maplibregl-ctrl-icon { filter: invert(1) hue-rotate(180deg) brightness(0.92); }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib.maplibregl-compact { background: var(--panel-bg); color: var(--muted); }
.maplibregl-ctrl-attrib a { color: var(--muted); }

.panel {
  position: absolute; z-index: 5;
  background: var(--panel-bg); color: var(--panel-fg);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: background .3s, color .3s;
}
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }   /* same typeface, aligned digits */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
svg.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- buttons: one family, three sizes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; background: var(--accent); color: var(--accent-fg);
  min-width: var(--tap); height: var(--tap); padding: 0 14px;
  border-radius: var(--radius-btn); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s; white-space: nowrap;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn.small { height: 34px; min-width: 34px; padding: 0 11px; font-size: 13px; background: var(--btn-bg); color: var(--panel-fg); }
.btn.primary { background: var(--accent); color: var(--accent-fg); }
.btn.icon { padding: 0; width: 34px; }
.btn:hover { background: var(--btn-bg-hover); }
.btn.primary:hover, .btn:not(.small):hover { background: var(--accent); filter: brightness(1.1); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .mode:focus-visible, .line-pill:focus-visible, .line-all:focus-visible, .x:focus-visible,
input:focus-visible, input[type="date"]:focus, input[type="date"]:focus-within, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.x { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted); cursor: pointer; width: 34px; height: 34px; border-radius: 50%; flex: none; }
.x:hover { background: var(--btn-bg); color: var(--panel-fg); }
#play[data-playing="1"] .ic-play, #play[data-playing="0"] .ic-pause { display: none; }
.only-mobile { display: none; }   /* after .btn so it wins at equal specificity */

/* ---------- inputs ---------- */
.date-wrap input, .speed-wrap select {
  height: 34px; padding: 0 8px; border-radius: var(--radius-btn); border: 1px solid var(--line);
  background: transparent; color: var(--panel-fg); font-size: 13px; font-weight: 500; color-scheme: light dark;
}
.speed-wrap select { padding-right: 4px; }

/* ---------- header ---------- */
.panel.top {
  top: calc(var(--safe-t) + 12px); left: 12px; max-width: min(780px, calc(100% - 70px));
  padding: 10px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.title h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15;
  display: flex; align-items: baseline; gap: 0.3em; }
.title h1 .wm-dot { color: var(--accent); }
.title h1 .wm-city { font-size: 15px; color: var(--muted); text-transform: lowercase; letter-spacing: -0.01em; }
.sender { color: var(--muted); }
.sender b { font-family: var(--font-display); font-weight: 500; color: var(--panel-fg); }
.badge-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); margin-right: 2px; vertical-align: 1px; }
#theme[data-theme="dark"] .ic-moon, #theme[data-theme="light"] .ic-sun { display: none; }
.title .sub { font-size: 12px; color: var(--muted); font-weight: 500; }
.head-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.modes { display: flex; gap: 2px; padding: 2px; background: var(--btn-bg); border-radius: var(--radius-btn); }
.mode { border: none; background: transparent; color: var(--muted); height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.mode:hover { color: var(--panel-fg); }
.mode.on { background: var(--panel-bg); color: var(--accent); box-shadow: var(--shadow-sm); }
.lines { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.line-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.line-pill, .line-all {
  border: none; cursor: pointer; min-width: 32px; height: 28px; padding: 0 8px;
  border-radius: var(--radius-pill); font-weight: 700; font-size: 13px; transition: opacity .15s, transform .1s;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.line-pill.off { opacity: 0.22; }
.line-pill:hover, .line-all:hover { transform: translateY(-1px); }
.line-all { background: var(--btn-bg); color: var(--panel-fg); font-weight: 600; font-size: 12px; }

/* ---------- bottom bar ---------- */
.panel.bottom {
  left: 12px; right: 12px; bottom: calc(var(--safe-b) + 12px); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.panel.bottom .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slider-row { padding: 0 2px; }
.slider-row .speed-wrap { margin-left: 4px; }
.date-wrap { display: flex; align-items: center; gap: 4px; }
.clock-wrap { display: flex; align-items: center; gap: 8px; }
.clock { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; min-width: 8.2ch; }
#time-slider { flex: 1; accent-color: var(--accent); min-width: 140px; height: 28px; margin: 0; touch-action: pan-x; }
.speed-wrap { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; font-weight: 500; }

/* ---------- side panel ---------- */
.panel.side {
  right: 12px; top: calc(var(--safe-t) + 12px); width: 370px; max-width: calc(100% - 24px);
  max-height: calc(100% - var(--safe-b) - 150px); overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 16px; font-size: var(--fs); display: none;
}
.panel.side.open { display: block; }
.grip { display: none; }
.p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.p-head h2 { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-title { font-weight: 600; }
.p-sub { color: var(--muted); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.p-actions { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.pill { display: inline-block; min-width: 26px; text-align: center; padding: 2px 7px; border-radius: 6px; font-weight: 700; font-size: 12.5px; line-height: 1.4; background: var(--c, #888); color: var(--tc, #fff); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 14px 0 6px; }
.dir { padding: 8px 0; border-top: 1px solid var(--line); }
.stop-chain { margin-top: 4px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.stop-chain span { cursor: pointer; }
.stop-chain span:hover { color: var(--accent); text-decoration: underline; }
.stop-chain i { font-style: normal; margin: 0 3px; opacity: .5; }

table.dep { width: 100%; border-collapse: collapse; margin-top: 6px; }
table.dep th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px; border-bottom: 1px solid var(--line); }
table.dep td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.dep tr[data-trip] { cursor: pointer; }
table.dep tr[data-trip]:hover td { background: var(--accent-soft); }
table.dep tr.left td { opacity: .5; }
table.dep small { color: var(--muted); }

ol.trip-stops { list-style: none; margin: 8px 0; padding: 0; }
ol.trip-stops li { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; cursor: pointer; }
ol.trip-stops li:hover .name { color: var(--accent); }
ol.trip-stops .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c, #999); justify-self: center; }
ol.trip-stops li.done .dot, ol.trip-stops li.here .dot { background: var(--c, #999); }
ol.trip-stops li.here .dot { box-shadow: 0 0 0 3px var(--accent-soft); }
ol.trip-stops li.here .name { font-weight: 700; }
ol.trip-stops li.done .name { color: var(--muted); }
ol.trip-stops .t small { color: var(--muted); }
sup { font-size: 0.7em; color: var(--muted); }   /* marker (ⁱ, ⁺¹), not running text */

/* ---------- info panel ---------- */
.panel.info { right: 12px; bottom: calc(var(--safe-b) + var(--dock)); width: 380px; max-width: calc(100% - 24px); max-height: calc(100% - 160px); overflow: auto; padding: 14px 16px; font-size: 13px; display: none; z-index: 6; }
.panel.info.open { display: block; }
.panel.info h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.panel.info p { margin: 0 0 10px; }
.panel.info dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0 0 10px; }
.panel.info dt { color: var(--muted); }
.panel.info dd { margin: 0; font-size: 12px; font-variant-numeric: tabular-nums; word-break: break-word; }
.panel.info details.legal { margin-top: 6px; color: var(--muted); }
.panel.info details.legal summary { cursor: pointer; font-size: 12px; font-weight: 600; width: max-content; }
.panel.info details.legal p { margin: 6px 0 0; }
.warn { background: var(--warn-bg); color: var(--warn-fg); padding: 6px 8px; border-radius: 8px; font-size: 12px; }

/* ---------- consent: fully opaque and clearly legible (a consent request must never blend into the map) ---------- */
.consent {
  position: absolute; z-index: 30; left: 12px; right: 12px; bottom: calc(var(--safe-b) + var(--dock));
  margin: 0 auto; max-width: 600px; background: var(--panel-solid); color: var(--panel-fg); border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  padding: 14px 16px; font-size: 14px; line-height: 1.5; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.consent a { color: inherit; font-weight: 600; white-space: nowrap; }
.consent-actions { display: flex; gap: 8px; margin-left: auto; }
.consent .btn.small { font-weight: 600; }
.consent .btn.small:not(.primary) { background: var(--btn-bg-hover); color: var(--panel-fg); }

/* ---------- tooltip / status / noscript ---------- */
.tooltip { position: absolute; z-index: 10; pointer-events: none; background: var(--panel-bg); color: var(--panel-fg); border-radius: 10px; box-shadow: var(--shadow); padding: 8px 10px; min-width: 230px; font-size: 12.5px; }
.tt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 600; }
.tt-row { display: flex; justify-content: space-between; gap: 12px; }
.tt-row span { color: var(--muted); }
.tt-foot { margin-top: 6px; font-size: 12px; color: var(--muted); }
.status { position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--panel-bg); color: var(--panel-fg); padding: 14px 18px; border-radius: var(--radius); box-shadow: var(--shadow); font-size: 14px; font-weight: 500; max-width: 80%; text-align: center; }
.status.error { background: var(--error-bg); color: var(--error-fg); }
.status.notice { top: auto; bottom: calc(var(--safe-b) + var(--dock)); transform: translateX(-50%); font-size: 13px; }
.noscript { position: absolute; z-index: 40; inset: 0; padding: 24px; background: var(--canvas); color: var(--panel-fg); font-size: 15px; line-height: 1.5; }

/* ---------- phones & small tablets ---------- */
@media (max-width: 720px), (pointer: coarse) and (max-width: 1024px) {
  /* phones: fully opaque panels */
  :root, :root[data-theme] { --panel-bg: var(--panel-solid); }

  .only-mobile { display: inline-flex; }
  .panel.top { left: 8px; right: 8px; max-width: none; padding: 8px 10px; gap: 6px 10px; }
  .title h1 { font-size: 20px; }
  .title h1 .wm-city { font-size: 14px; }
  .title .sub { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }
  .lines { display: none; max-height: 38vh; overflow: auto; }
  .lines.open { display: flex; }
  .line-pill, .line-all { height: 34px; min-width: 36px; font-size: 14px; }
  .mode { height: 34px; }   /* touch target */

  :root { --dock: 114px; }
  .panel.bottom { left: 8px; right: 8px; bottom: calc(var(--safe-b) + 8px); padding: 8px 10px; gap: 6px; }
  .panel.bottom .row { gap: 6px; flex-wrap: nowrap; }
  .clock { font-size: 17px; min-width: 7.6ch; }
  .clock-wrap { gap: 4px; }
  .speed-wrap span { display: none; }
  .speed-wrap select { padding: 0 2px; font-size: 12px; }
  #date-prev, #date-next { display: none; }   /* native date picker is enough on phones */
  .date-wrap input { width: 118px; font-size: 12px; padding: 0 4px; }
  .panel.bottom .row:first-child > * { flex-shrink: 0; }
  .clock-wrap { margin-left: auto; }
  .btn.small { padding: 0 8px; }
  .maplibregl-ctrl-top-right { top: auto; bottom: calc(var(--safe-b) + var(--dock) + 10px); }
  .maplibregl-ctrl-bottom-right { bottom: calc(var(--safe-b) + var(--dock) - 6px); }

  /* Side panel becomes a bottom sheet above the control bar */
  .panel.side {
    left: 8px; right: 8px; top: auto; bottom: calc(var(--safe-b) + var(--dock)); width: auto; max-width: none;
    max-height: 48vh; border-radius: 16px; padding: 6px 14px 14px;
  }
  .grip { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 2px auto 8px; }
  .panel.info { left: 8px; right: 8px; width: auto; max-width: none; bottom: calc(var(--safe-b) + var(--dock)); max-height: 60vh; }
  .consent { bottom: calc(var(--safe-b) + var(--dock)); font-size: 13.5px; }
  .status.notice { bottom: calc(var(--safe-b) + var(--dock)); max-width: calc(100% - 16px); }
  .tooltip { display: none; }
}

/* ---------- touch: 44 px hit areas (impeccable / Apple HIG), visuals stay compact ---------- */
@media (pointer: coarse) {
  /* touch targets ≥ 44px: invisible ::after hit areas; neighbours keep ≥ 10px apart so the areas never overlap */
  .btn, .x, .line-pill, .line-all, .mode, .maplibregl-ctrl-group button { position: relative; }
  .btn::after, .x::after, .line-pill::after, .line-all::after, .mode::after,
  .maplibregl-ctrl-group button::after { content: ""; position: absolute; inset: -5px; }
  .head-actions, .panel.bottom .row, .clock-wrap { gap: 10px; }
  .panel.bottom { gap: 10px; }
  :root { --dock: 136px; }   /* taller control bar: 44px fields */
  /* native fields cannot carry ::after, so they get the full height */
  .date-wrap input, .speed-wrap select { height: 44px; }
  .lines, .line-group { gap: 10px; }
  .lines { padding: 5px; }   /* the list scrolls, so the hit areas need room inside it */
  .maplibregl-ctrl-group { overflow: visible; }
  .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .panel.info a, .panel.info summary { display: inline-block; padding-block: 12px; }
}

@media (max-width: 380px) {
  .panel.bottom { padding-inline: 8px; }
  .date-wrap input { width: 94px; }
  #play { padding-inline: 11px; }
  #time-slider { min-width: 0; }
  .clock { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .mode, .line-pill, .line-all, .panel { transition: none; }
}