/* ==========================================================================
   Schranke Alsheim
   One glanceable answer: a compact traffic light, the state word and the
   minutes. Everything else (closures list, explanation) supports it.
   ========================================================================== */

/* Colour tokens (light mode); overridden for dark mode below.
   --sig-*  : lamp colours (only used on the dark housing and as tints)
   --*-ink  : text-safe variants of the signal colours (>= 4.5:1 on --surface) */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --ink: #15191e;
  --ink-2: #3c444f;    /* secondary text */
  --muted: #5a6370;    /* tertiary text, metadata */
  --line: #d9dde3;
  --housing: #1d2127;  /* traffic light case */
  --lamp-off: #3a4049; /* unlit lamp */
  --sig-red: #e5484d;
  --sig-yellow: #f5a623;
  --sig-green: #30a46c;
  --sig-off: #8b949e;
  --red-ink: #b42329;
  --yellow-ink: #855500;
  --green-ink: #1c7349;
  --focus: #2f6fdb;
  --tint: 11%;         /* how strongly the state colour tints the status panel */

  /* Spacing scale (4px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --radius: 16px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111418;
    --surface: #1a1e23;
    --ink: #e8eaed;
    --ink-2: #c3c9d1;
    --muted: #9aa4ae;
    --line: #2d333b;
    --housing: #0a0c0f;
    --lamp-off: #262b32;
    --red-ink: #ff9592;
    --yellow-ink: #f5c26b;
    --green-ink: #5fd39b;
    --focus: #79a8ff;
    --tint: 16%;
  }
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
}

p, h1, h2, ol, ul { margin: 0; }

::selection { background: color-mix(in srgb, var(--focus) 28%, transparent); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Page layout ---------- */

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: max(var(--s4), env(safe-area-inset-top)) max(var(--s4), env(safe-area-inset-right))
           max(var(--s5), env(safe-area-inset-bottom)) max(var(--s4), env(safe-area-inset-left));
  display: grid;
  gap: var(--s4);
}

/* Small, quiet title: the answer below is what matters */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s2);
  padding-block: var(--s1) var(--s1);
}
.masthead h1 { font-size: 1rem; font-weight: 700; }
.masthead p { font-size: .875rem; color: var(--muted); }
.masthead .sim {
  flex-basis: 100%;
  margin-top: var(--s2);
  font-size: .875rem;
  font-weight: 600;
  color: var(--yellow-ink);
}

/* ---------- Status panel ---------- */

/* --tone is the state colour; it tints the panel and its border */
.signal {
  --tone: var(--sig-off);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--s5);
  row-gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s4);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--tone) var(--tint), var(--surface));
  border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line));
  transition: background-color .25s ease-out, border-color .25s ease-out;
}
.signal[data-state="red"]       { --tone: var(--sig-red); }
.signal[data-state="redyellow"] { --tone: var(--sig-red); }
.signal[data-state="yellow"]    { --tone: var(--sig-yellow); }
.signal[data-state="green"]     { --tone: var(--sig-green); }
.signal[data-state="unknown"]   { border-style: dashed; }

/* Traffic light: compact vertical housing with three lamps */
.light {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 10px;
  border-radius: 18px;
  background: var(--housing);
}
.lamp {
  --c: var(--lamp-off);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lamp-off);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / .45);
  transition: background .2s ease-out, box-shadow .2s ease-out;
}
.lamp-red    { --c: var(--sig-red); }
.lamp-yellow { --c: var(--sig-yellow); }
.lamp-green  { --c: var(--sig-green); }

/* Lit lamp: a lens (light spot top-left) plus a thin ring, no outer glow */
.signal[data-state="red"] .lamp-red,
.signal[data-state="redyellow"] .lamp-red,
.signal[data-state="redyellow"] .lamp-yellow,
.signal[data-state="yellow"] .lamp-yellow,
.signal[data-state="green"] .lamp-green {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff) 0 12%, var(--c) 58%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent), inset 0 -3px 6px rgb(0 0 0 / .25);
}
@media (prefers-color-scheme: dark) {
  /* Slightly dimmer lamps so they don't glare in a dark car */
  .signal .lamp { filter: brightness(.88); }
}

/* Loading: lamps breathe softly; unknown: housing fades out */
.signal[data-state="loading"] .lamp { animation: breathe 1.4s ease-in-out infinite alternate; }
.signal[data-state="loading"] .lamp-yellow { animation-delay: .2s; }
.signal[data-state="loading"] .lamp-green { animation-delay: .4s; }
.signal[data-state="unknown"] .light { opacity: .5; }

@keyframes breathe {
  from { background: var(--lamp-off); }
  to { background: color-mix(in srgb, var(--lamp-off) 70%, #fff); }
}

/* Readout: state word, qualifier, then the minutes as the hero */
.readout { min-width: 0; }

.state {
  font-size: clamp(1.75rem, 8.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.qualifier {
  margin-top: var(--s1);
  font-size: .9375rem;
  color: var(--ink-2);
}

.countdown {
  margin-top: var(--s4);
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
}
.countdown-value {
  font-size: clamp(3.25rem, 17vw, 4.75rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.countdown-unit {
  font-size: 1.5rem;
  font-weight: 700;
}

.caveat {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid color-mix(in srgb, var(--tone) 30%, var(--line));
  font-size: .875rem;
  color: var(--ink-2);
}

/* ---------- Refresh + timestamp ---------- */

.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.reload {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s5) 0 var(--s4);
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color .15s ease-out, transform .1s ease-out;
}
.reload:hover { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); }
.reload:active { transform: scale(.97); }
.reload[aria-busy="true"] .icon { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.updated {
  font-size: .875rem;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Closures list ---------- */

.closures h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--s2);
}
.closures h2 span { font-weight: 400; color: var(--muted); }

.closure-list { list-style: none; padding: 0; }

.closure {
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
}
.closure-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.closure-time {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.closure-len {
  font-size: .875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Closure in progress: text badge + marker, not colour alone */
.closure.active .closure-len {
  padding: 2px var(--s2);
  border-radius: 6px;
  font-weight: 700;
  color: var(--red-ink);
  background: color-mix(in srgb, var(--sig-red) 14%, transparent);
}

.closure-trains {
  list-style: none;
  padding: 0;
  margin-top: var(--s1);
  font-size: .9375rem;
  color: var(--ink-2);
}
/* Columns: line · official arrival ("an 16:08") · direction · delay */
.closure-trains li {
  display: grid;
  grid-template-columns: 3.25rem 4.25rem 1fr auto;
  gap: var(--s2);
}
.closure-trains .at { font-variant-numeric: tabular-nums; }
.closure-trains .line { font-weight: 700; color: var(--ink); }
.closure-trains .dir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closure-trains .delay { font-variant-numeric: tabular-nums; }
.closure-trains .late { color: var(--red-ink); font-weight: 600; }
.closure-trains .ontime { color: var(--green-ink); }

.closure.cancelled .closure-time s { color: var(--muted); }
.closure.cancelled .closure-len { color: var(--red-ink); font-weight: 600; }

.closure.empty { color: var(--ink-2); }

/* ---------- Explanation ---------- */

.explain {
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
  font-size: .9375rem;
  color: var(--ink-2);
}
.explain summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.explain p { margin-top: var(--s2); max-width: 65ch; }
.legend { list-style: none; padding: 0; margin-top: var(--s3); display: grid; gap: var(--s2); }
.legend li { display: flex; align-items: center; gap: var(--s3); }

/* Mini traffic light in the legend (horizontal, three dots drawn as gradients) */
.dot {
  --r: var(--lamp-off);
  --y: var(--lamp-off);
  --g: var(--lamp-off);
  flex: none;
  border-radius: 8px;
  width: 42px;
  height: 16px;
  background:
    radial-gradient(circle at 8px 8px, var(--r) 5px, transparent 5.5px),
    radial-gradient(circle at 21px 8px, var(--y) 5px, transparent 5.5px),
    radial-gradient(circle at 34px 8px, var(--g) 5px, transparent 5.5px),
    var(--housing);
}
.dot[data-lamps="red"]       { --r: var(--sig-red); }
.dot[data-lamps="redyellow"] { --r: var(--sig-red); --y: var(--sig-yellow); }
.dot[data-lamps="yellow"]    { --y: var(--sig-yellow); }
.dot[data-lamps="green"]     { --g: var(--sig-green); }
.dot[data-lamps="none"]      { opacity: .5; }

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2);
  font-size: .8125rem;
  color: var(--muted);
}
.footer .detail { overflow-wrap: anywhere; }

/* ---------- Landscape phone (car mount): answer left, details right ---------- */

@media (orientation: landscape) and (max-height: 560px) {
  .app {
    max-width: 960px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: var(--s5);
    align-items: start;
  }
  .masthead, .signal, .actions { grid-column: 1; }
  .closures, .explain, .footer { grid-column: 2; }
  .closures { grid-row: 1 / span 3; }
  .signal { padding: var(--s4); }
  .lamp { width: 40px; height: 40px; }
  .countdown { margin-top: var(--s2); }
  .countdown-value { font-size: clamp(3rem, 10vh, 4rem); }
}

/* ---------- Reduced motion ---------- */

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