/* 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:
   the stored choice, or in the default «auto» mode the sun of the shown day (light by day, dark at night, following
   the time slider and the real clock). js/theme-boot.js sets data-theme in <head>, so even the first paint is right;
   the system preference is not used.
   Inter for the UI, Overpass 500 only for the city wordmark and the sender "takt transit". 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);
}
* { 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 */
#menus-toggle { display: none; }
.overview #lines-toggle { display: inline-flex; }
.overview .lines { display: none; max-height: 38vh; overflow: auto; }
.overview .lines.open { display: flex; }
/* language select (editions with 3+ languages, js/app.js): looks like .btn.small, the native select lies invisibly on
   top and takes clicks and keys; 16px keeps iOS from zooming in when it opens */
.lang-pick { position: relative; gap: 3px; padding-right: 7px; }
.lang-pick .ic-chev { width: 12px; height: 12px; opacity: .7; }
.lang-pick select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; appearance: none; }
.lang-pick:has(select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 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;
  text-transform: lowercase; }   /* the city line is the edition's wordmark; "takt transit" signs in the info panel */
.sender { color: var(--muted); }
.sender b { font-family: var(--font-display); font-weight: 500; color: var(--panel-fg); }
.sender a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }   /* to the start page */
.badge-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); margin-right: 2px; vertical-align: 1px; }
/* The theme button shows the current mode: half disc = auto (sun decides), sun = light, moon = dark. */
#theme[data-mode="auto"] .ic-sun, #theme[data-mode="auto"] .ic-moon,
#theme[data-mode="light"] .ic-moon, #theme[data-mode="light"] .ic-auto,
#theme[data-mode="dark"] .ic-sun, #theme[data-mode="dark"] .ic-auto { display: none; }
/* «Jetzt» stays pressed while the clock is live (follows the wall clock). */
#now[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
/* Read by screen readers and search engines, not drawn: the h1 says what the map is, the wordmark stays the city name */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.title { width: 100%; }   /* always its own row; search and actions share the second row */
.title .sub { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ---------- stop search: a combobox, suggestions while typing ---------- */
.search { position: relative; display: flex; align-items: center; width: 260px; height: 34px; border: 1px solid var(--line); border-radius: var(--radius-btn); }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.search .ic-search { margin-left: 9px; color: var(--muted); }
#search { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; color: var(--panel-fg); font: inherit; font-size: 13px; font-weight: 500; padding: 0 8px; }
#search::placeholder { color: var(--muted); opacity: 1; }
#search:focus-visible { outline: none; }   /* the box carries the focus ring */
#search-clear { width: 30px; height: 30px; margin-right: 1px; }
#search-list { position: absolute; left: -1px; width: 360px; top: calc(100% + 4px); z-index: 6; margin: 0; padding: 4px; list-style: none;
  background: var(--panel-solid); color: var(--panel-fg); border-radius: var(--radius-btn); box-shadow: var(--shadow); max-height: 320px; overflow: auto; }
#search-list li { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer; }
#search-list li .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#search-list li mark { background: transparent; color: var(--accent); font-weight: 700; }
#search-list li .lines-of { flex: 0 6 auto; min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* the lines give way first, the name stays readable */
#search-list li[aria-selected="true"], #search-list li:hover { background: var(--btn-bg); }
#search-list li.none { color: var(--muted); cursor: default; font-size: 12px; }
#search-list li.none:hover { background: transparent; }
.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; white-space: nowrap; 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); }
/* realtime (rt.js): delay and cancellation in the warn/error tokens, never as colour alone – the text says it too */
.rt-delay { color: var(--warn-fg); font-weight: 600; white-space: nowrap; }
.rt-cancel { color: var(--error-fg); font-weight: 600; }

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 + details.legal { margin-top: 2px; }
.panel.info details.legal summary { cursor: pointer; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; 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 .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; order: 2; }
  .lines.open { display: flex; }
  .search { display: none; order: 1; width: 100%; height: 40px; }   /* behind the magnifier button, its own row */
  .search.open { display: flex; }
  #search { font-size: 16px; }   /* iOS zooms into smaller fields */
  #search-list { width: auto; right: -1px; max-height: 40vh; }
  .line-pill, .line-all { height: 34px; min-width: 36px; font-size: 14px; }
  .mode { height: 34px; }   /* touch target */
  /* three or more modes (e.g. tram, U-Bahn, S-Bahn, ferry) take their own row, evenly split; the buttons follow below */
  .head-actions { flex-wrap: wrap; justify-content: flex-end; }
  .modes:has(> .mode:nth-child(3)) { flex: 1 1 100%; }
  .modes:has(> .mode:nth-child(3)) > .mode { flex: 1 1 0; padding: 0 6px; }

  :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; }
  /* zoom sits above the attribution disc (dock - 6 + 10 margin + 24 px) with ≥ 15 px between them: the disc's 10 px
     and the buttons' 5 px hit-area margins never overlap */
  .maplibregl-ctrl-top-right { top: auto; bottom: calc(var(--safe-b) + var(--dock) + 44px); }
  .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; }
  .lang-pick select { inset: -5px; }   /* the select is the hit area, like ::after on the buttons */
  /* MapLibre's attribution toggle is a 24px disc at the screen edge: 44px of hit area around it */
  .maplibregl-ctrl-attrib-button::after { content: ""; position: absolute; inset: -10px; }
  .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; }
  .search { height: 44px; }
  #time-slider { height: 44px; }   /* the whole bar height takes the drag, not only the 28px track */
  #search-list li { padding: 11px 10px; }
  .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: 14px; }   /* 12–13px text + 28px = ≥ 44px */
}

/* ---------- phones held sideways: one row each, the map keeps the height ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --dock: 72px; }
  .title { width: auto; }
  .title .sub { display: none; }
  .panel.top { flex-wrap: wrap; align-items: center; }
  .head-actions { flex-wrap: nowrap; }
  .modes:has(> .mode:nth-child(3)) { flex: 0 1 auto; }
  .modes:has(> .mode:nth-child(3)) > .mode { flex: 0 1 auto; padding: 0 8px; }
  .panel.bottom { flex-direction: row; align-items: center; gap: 10px; }
  .panel.bottom .row:first-child { flex: 0 0 auto; }
  .panel.bottom .slider-row { flex: 1 1 0; min-width: 0; }
  .clock-wrap { margin-left: 0; }
  .panel.side { max-height: 56vh; }
  .panel.info { max-height: 70vh; }

  /* folded: only the button stays, in the corner it was in; the map has the screen and everything docked moves down */
  #menus-toggle { display: inline-flex; }
  .menus-folded { --dock: 0px; }
  .menus-folded .panel.bottom, .menus-folded .title, .menus-folded .search, .menus-folded .lines,
  .menus-folded .head-actions > :not(#menus-toggle) { display: none; }
  .menus-folded .panel.top { left: auto; padding: 4px; }
  .menus-folded #menus-toggle .ic { transform: rotate(180deg); }
}

@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; }
}