:root {
  --bg:#0f1419;
  --card:#1a2029;
  --fg:#e6e9ef;
  --muted:#8b95a5;
  --accent:#2ecc71;
  --danger:#ff6b6b;
  /* Ampel: cheapest / mid / highest price tier. */
  --price-cheap:#2ECC71;
  --price-mid:#F39C12;
  --price-high:#E74C3C;
  /* Contrast color for text/badges sitting ON the green accent. */
  --on-accent:#06210f;
  /* Fuel identity colors (orthogonal to the ampel). */
  --fuel-gasoline:#3B82F6;
  --fuel-diesel:#8B5CF6;
  /* Compare series colors: per-station lines + market median. Deliberately
     distinct from ampel AND fuel identity hues (ticket #44). Dark values are
     lightened one step to keep >= 4.5:1 contrast on the dark card. */
  --series-a:#14b8a6;
  --series-b:#ec4899;
  --series-median:#94a3b8;
  --radius:12px;
  --border:var(--border);
}
:root[data-theme="light"] {
  --bg:#F5F5F7;
  --card:#FFFFFF;
  --fg:#1A1A2E;
  --muted:#6C757D;
  --accent:#2ECC71;
  --danger:#E74C3C;
  --price-cheap:#2ECC71;
  --price-mid:#F39C12;
  --price-high:#E74C3C;
  --on-accent:#06210f;
  --fuel-gasoline:#3B82F6;
  --fuel-diesel:#8B5CF6;
  --series-a:#0d9488;
  --series-b:#ec4899;
  --series-median:#94a3b8;
  --radius:16px;  --border:#E3E5EA;
}

* { box-sizing: border-box; }

/* Cross-document View Transitions: soften MPA page swaps where supported.
   Older browsers and prefers-reduced-motion fall back to instant swaps. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

body {
  margin:0;
  font-family: system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--fg);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  /* viewport-fit=cover + safe-area insets: nothing hides under the notch
     or Dynamic Island in the installed standalone app. In-browser the env
     values are 0, so this is a no-op there. */
  padding:calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) 1rem calc(1rem + env(safe-area-inset-left));
  border-bottom:1px solid var(--border);
}

.wordmark { display:inline-flex; align-items:center; gap:.5rem; font-size:1.4rem; font-weight:700; letter-spacing:.01em; color:var(--fg); }
.wordmark svg { width:1.5rem; height:1.5rem; flex:none; }
.wordmark .wm-text { display:inline-flex; }
.wordmark .wm-accent { color:var(--accent); }

.login-link { color:var(--muted); font-size:.85rem; text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:.3rem .8rem; }
.login-link:hover { color:var(--fg); border-color:var(--accent); }

main { flex:1; max-width:640px; margin:0 auto; width:100%; display:flex; flex-direction:column; gap:1rem;
  padding:1rem calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left)); }

.back { display:block; text-align:center; color:var(--muted); font-size:.85rem; margin:.5rem 0 0; text-decoration:none; }
.empty { color:var(--muted); font-style:italic; }
.card { background:var(--card); border-radius:var(--radius); padding:1rem; border:1px solid var(--border); }
.card h2 { margin:.2rem 0 .8rem; font-size:1rem; color:var(--muted); font-weight:600; }
.error { color:var(--danger); font-size:.85rem; margin-top:.6rem; }
.notice { color:var(--accent); font-size:.85rem; margin-top:.6rem; }
.addr { color:var(--muted); font-size:.8rem; margin-top:.15rem; overflow-wrap:anywhere; }

/* Search + theme toggle pill in the header. */
.site-tools { display:flex; align-items:center; gap:.5rem; min-width:0; flex:1 1 auto; justify-content:flex-end; }
.search-form { display:flex; align-items:center; min-width:0; flex:1 1 auto; }
.search-input {
  flex:1 1 auto;
  min-width:0;
  background:var(--card);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.4rem .9rem;
  font-size:.85rem;
}
.search-input::placeholder { color:var(--muted); }
.theme-toggle {
  background:var(--card);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:999px;
  cursor:pointer;
  line-height:1;
  /* comfortable touch target (≥ 44px) */
  min-width:2.75rem;
  min-height:2.75rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.theme-toggle:hover { border-color:var(--accent); color:var(--accent); }

/* Ampel price tiers (computed in the view layer). */
.price-cheap { color:var(--price-cheap); }
.price-mid { color:var(--price-mid); }
.price-high { color:var(--price-high); }

/* Fuel identity bar on each price row (orthogonal to the ampel tier). */
.fuel-bar {
  display:inline-block;
  width:.35rem;
  height:1rem;
  border-radius:999px;
  flex:none;
}
.fuel-bar.gasoline { background:var(--fuel-gasoline); }
.fuel-bar.diesel { background:var(--fuel-diesel); }

.no-results { text-align:center; color:var(--muted); padding:2rem; font-style:italic; }

/* ---- time-filter chips + fuel tabs (detail + compare, ticket #39) ---- */
.filters { display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; }
.filters a, .tabs a { display:inline-flex; align-items:center; min-height:2.75rem; padding:.4rem 1rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); text-decoration:none; font-size:.9rem; }
.filters a.active, .tabs a.active { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
.pickers { display:flex; flex-direction:column; gap:.5rem; } /* compare selection card */

/* ---- charts (detail + compare) ---- */
svg.chart { width:100%; height:200px; display:block; touch-action:pan-y; }
.chart-axis { fill:var(--muted); font-size:5px; }

/* Scrubbing overlay (ticket #45). */
.scrub-line { stroke:var(--fg); stroke-width:.4; stroke-dasharray:2 2; opacity:.7; }
.scrub-bubble rect { fill:var(--fg); opacity:.94; }
.scrub-bubble text { fill:var(--bg); font-size:6px; font-weight:700; font-variant-numeric:tabular-nums; }
.scrub-bubble .scrub-time { font-weight:400; opacity:.85; }
.scrub-bubble.b rect { fill:var(--series-b); }
.scrub-bubble.m rect { fill:var(--series-median); }
.scrub-bubble.b text, .scrub-bubble.m text { fill:#fff; }

/* Chart series colors (ticket #44): detail lines carry their fuel's identity
   color inline as var(--fuel-<art>) in the SVG; compare lines draw in
   neutral --series-* variables so the ampel keeps price-only semantics. */

/* ---- detail series cards ---- */
.series + .series { margin-top:1.2rem; }
.series-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.series-name { font-weight:600; }
.series-price { font-variant-numeric:tabular-nums; font-weight:700; font-size:1.35rem; }
.series-stand { color:var(--muted); font-size:.75rem; }

/* ---- compare chart card ---- */
.selectors { display:flex; gap:.5rem; flex-wrap:wrap; }
.selectors select { flex:1; min-width:8rem; background:var(--card); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:.5rem; font-size:.9rem; }
select { max-width:100%; }
.legend { display:flex; gap:1rem; justify-content:center; font-size:.8rem; color:var(--muted); margin-bottom:.3rem; flex-wrap:wrap; }
.legend span::before { content:""; display:inline-block; width:.8rem; height:.8rem; border-radius:2px; margin-right:.3rem; vertical-align:middle; }
.legend .a::before { background:var(--series-a); }
.legend .b::before { background:var(--series-b); }
.legend .m::before { background:var(--series-median); }
.lines { display:flex; flex-direction:column; gap:.6rem; margin-top:.6rem; }
.line-row { display:flex; justify-content:space-between; align-items:baseline; }
.line-name { font-weight:600; }
.line-name.a { color:var(--series-a); }
.line-name.b { color:var(--series-b); }
.line-name.m { color:var(--series-median); }
.line-price { font-variant-numeric:tabular-nums; font-weight:700; font-size:1.35rem; }
.line-stand { color:var(--muted); font-size:.75rem; }
.no-data { text-align:center; color:var(--muted); padding:1rem; }

/* ---- "prices updated" banner (ticket #43) ---- */
.update-banner {
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:10;
  background:var(--card);
  border:1px solid var(--accent);
  border-radius:999px;
  padding:.6rem 1.2rem;
  font-size:.9rem;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.update-banner button {
  background:none;
  border:none;
  color:var(--accent);
  font-weight:700;
  cursor:pointer;
  font-size:.9rem;
  padding:0;
  min-height:2.75rem;
}

/* ---- detail page (ticket #39/#46 centralization) ---- */
/* Detail head is a plain block stack (name -> brand -> address -> button),
   NOT the global .station-head flex-row — that pushed the compare button
   to the far right and let long names overflow the card on mobile.
   ponytail: block + overflow-wrap beats flex gymnastics here. */
.station-head.block { display:block; }
.station-head h1 { margin:.2rem 0; font-size:1.2rem; overflow-wrap:anywhere; word-break:break-word; }
.station-head .brand { color:var(--muted); font-size:.85rem; }
.station-head .addr { color:var(--muted); font-size:.8rem; margin-top:.15rem; overflow-wrap:anywhere; }
.compare-btn { display:inline-block; margin-top:.6rem; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.85rem; text-decoration:none; border-radius:999px; padding:.35rem .9rem; }
.compare-btn:hover { filter:brightness(1.08); }
.notfound { text-align:center; color:var(--muted); padding:2rem; }
.stats { margin-top:1rem; }
.stats-title { font-size:1rem; margin:.4rem 0; }
.stat-group + .stat-group { margin-top:.8rem; border-top:1px solid var(--border); padding-top:.6rem; }
.stat-fuel { font-weight:600; font-size:.9rem; margin-bottom:.3rem; }
.stat-row { display:flex; flex-wrap:wrap; gap:.3rem .8rem; font-size:.85rem; font-variant-numeric:tabular-nums; padding:.15rem 0; }
.stat-win { color:var(--muted); min-width:5rem; }
.stat-when { color:var(--muted); font-size:.75rem; margin-left:.2rem; }
.stat-median { color:var(--muted); }

/* ---- Tankzeit-Heatmap "Wann tanken?" (ticket #47) ---- */
.heat-group + .heat-group { margin-top:.9rem; border-top:1px solid var(--border); padding-top:.7rem; }
.heat-caption { color:var(--muted); font-size:.85rem; margin:.15rem 0 .5rem; font-variant-numeric:tabular-nums; }
.heat-wrap { position:relative; }
svg.heat-svg { width:100%; height:auto; display:block; }
.heat-axis { fill:var(--muted); font-size:7px; }
/* Neutral gray for cells without measurement points (story 7): muted at low
   opacity reads as a gap in both themes, independent of the fuel hue. */
.heat-cell-empty { fill:var(--muted); fill-opacity:.25; }
.heat-min { stroke:var(--fg); stroke-width:1; }
.heat-dim svg.heat-svg { opacity:.3; }
.heat-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.heat-overlay span { background:var(--card); border:1px solid var(--border); border-radius:999px; padding:.35rem .9rem; font-size:.85rem; font-weight:700; }
.heat-legend { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; color:var(--muted); font-size:.68rem; margin-top:.4rem; letter-spacing:.015em; }
.heat-legend .heat-sep { opacity:.55; }
/* Swatches show instead of tell: the fuel ramp (15% -> full) and the gray
   gap color, so the legend reads at a glance without comparing words to
   cells. --heat-fuel is set per group in the template. */
.heat-swatch-ramp { width:1.5rem; height:.5rem; border-radius:3px; background:linear-gradient(to right, color-mix(in srgb, var(--heat-fuel) 15%, transparent), var(--heat-fuel)); }
.heat-swatch-empty { width:.6rem; height:.6rem; border-radius:2px; background:var(--muted); opacity:.25; }

/* ---- login (scoped under .auth so global inputs stay untouched) ---- */
main.auth { max-width:360px; margin:2rem auto; }
main.auth .card { padding:1.5rem; }
main.auth label { display:block; color:var(--muted); font-size:.85rem; margin:.8rem 0 .3rem; }
main.auth input { width:100%; padding:.6rem; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--fg); font-size:1rem; }
main.auth button { width:100%; margin-top:1.2rem; padding:.7rem; border:0; border-radius:8px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:1rem; cursor:pointer; }

/* ---- admin (scoped under .admin) ---- */
main.admin { gap:1.2rem; }
main.admin label { display:block; color:var(--muted); font-size:.8rem; margin:.6rem 0 .25rem; }
main.admin input[type=text] { width:100%; padding:.6rem; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--fg); font-size:1rem; }
.modes { display:flex; gap:.5rem; }
.modes label { flex:1; display:flex; align-items:center; gap:.4rem; margin:.4rem 0; color:var(--fg); font-size:.9rem; cursor:pointer; }
main.admin button { padding:.6rem 1rem; border:0; border-radius:8px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.95rem; cursor:pointer; }
main.admin button.danger { background:var(--danger); color:#2a0606; }
main.admin button.small { padding:.4rem .8rem; font-size:.85rem; }
main.admin button.small:disabled { background:var(--border); color:var(--muted); cursor:not-allowed; font-weight:600; }
.search-row { display:flex; gap:.5rem; align-items:flex-end; }
.search-row .field { flex:1; }
.result, .tracked { display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.6rem 0; border-top:1px solid var(--border); }
.result:first-of-type, .tracked:first-of-type { border-top:0; }
.meta { color:var(--muted); font-size:.8rem; }

/* ---- homepage-specific ---- */
.station { background:var(--card); border-radius:var(--radius); padding:1rem; border:1px solid var(--border); position:relative; }
.station.best { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.station-head { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; padding-right:3.1rem; }
.name { font-weight:600; font-size:1.1rem; overflow-wrap:anywhere; }
.brand { color:var(--muted); font-size:.85rem; }
.badge { background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.7rem; padding:.15rem .5rem; border-radius:999px; text-transform:uppercase; white-space:nowrap; flex:none; margin-left:.5rem; }
.prices { margin-top:.6rem; display:flex; flex-direction:column; gap:.2rem; }
.price-row { display:flex; align-items:center; gap:.4rem; }
.fuel { color:var(--muted); font-size:.85rem; min-width:3.5rem; }
/* Prices are the visually dominant figures: largest, bold, tabular digits
   so digits don't jitter when comparing (ticket #41). */
.price { font-variant-numeric:tabular-nums; font-weight:700; font-size:1.2rem; }
.stand { color:var(--muted); font-size:.75rem; }
.station-link { text-decoration:none; color:inherit; display:block; }
.station-link:hover .station { border-color:var(--accent); }
.fav-btn { position:absolute; top:.45rem; right:.45rem; background:none; border:none; cursor:pointer; line-height:0; z-index:1; width:2.75rem; height:2.75rem; display:flex; align-items:center; justify-content:center; }
.fav-btn svg { width:1.4rem; height:1.4rem; fill:none; stroke:var(--muted); stroke-width:2; transition:fill .12s, stroke .12s; }
.fav-btn[aria-pressed="true"] svg { fill:var(--accent); stroke:var(--accent); }
.compare-entry { display:block; text-align:center; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:.8rem; color:var(--fg); text-decoration:none; font-weight:600; }
.compare-entry:hover { border-color:var(--accent); color:var(--accent); }
@media (max-width:360px) {
  .station-head { flex-direction:column; align-items:flex-start; gap:.25rem; }
  .selectors { flex-direction:column; }
}