/* base.css — Structural CSS shared across all themes.
   Tokens come from tokens.css; themes override via theme-*.css.
   ============================================================= */

/* ── Fallback Custom Properties ────────────────────── */
:root {
  --shadow-card:        var(--t-shadow, none);
  --shadow-card-hover:  var(--t-shadow-hover, none);
  --color-spinner:      var(--t-accent, #4a9eff);
  --color-clock:        var(--t-text-1, #fff);
  --font-weight-clock:  400;
  --size-label:         var(--t-label, 0.72rem);
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ──────────────────────────────────────────── */
html {
  height: 100%;
  height: -webkit-fill-available;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--t-font, system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif);
  font-size: var(--t-font-size, 100%);
  background: var(--t-bg);
  color: var(--t-text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
}

/* ── App Grid ──────────────────────────────────────── */
#app {
  display: grid;
  /* minmax(0,1fr): mittlere Zeile darf schrumpfen — sonst wächst #main mit dem Inhalt
     über den Viewport und overflow-y auf Mobile greift nicht (html/body: overflow hidden). */
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--t-bg);
}

/* ── Header ────────────────────────────────────────── */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--t-pad-bar, 0.95% 2.8%);
  padding-top: max(1.1%, env(safe-area-inset-top, 0px));
  background: var(--t-surface);
  border-bottom: var(--t-hairline, min(0.09em, 0.22vw)) solid var(--t-border);
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: visible;
  animation: appFadeIn calc(var(--_enter-dur, 0.38s)) ease-out both;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-title {
  font-size: var(--t-label, 0.68rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-text-3);
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
}

.clock {
  font-size: var(--t-clock, 2.8rem);
  font-weight: var(--font-weight-clock, 400);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--color-clock, var(--t-text-1));
}

/* ── Transit-Kacheluhr (Flip wie Temp-Referenz, Perspektive auf Kachel) ── */
.clock-transit {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  max-width: 100%;
  flex-shrink: 1;
  min-width: 0;
  color: var(--color-clock, var(--t-text-1));
  font-size: clamp(1.55rem, 6.6vw, 2.55rem);
  font-weight: var(--font-weight-clock, 600);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  /* Abstand zu Viewport-Kante / Safe Area (oben rechts im Header) */
  margin-top: 0.2rem;
  margin-inline-end: max(0.2rem, env(safe-area-inset-right, 0px));
}

.clock-display {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  font-variant-numeric: tabular-nums;
}

.clock-seg {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  flex-shrink: 0;
}

.clock-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  line-height: 1;
  padding: 0 0.06em;
  margin: 0 -0.02em;
  font-weight: 500;
  font-size: 0.72em;
  opacity: 0.42;
  user-select: none;
  flex-shrink: 0;
}

/* Eine Ziffer pro Slot: nur Typo, keine Kachel-Rahmen; Abstand über Padding */
.clock-tile {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  padding: 0 0.11em;
  flex-shrink: 0;
  perspective: 40em;
  -webkit-perspective: 40em;
  perspective-origin: 50% 100%;
}

.clock-tile__digit {
  display: block;
  box-sizing: border-box;
  min-width: 0.62em;
  text-align: center;
  font-size: 1em;
  font-weight: var(--font-weight-clock, 600);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  color: inherit;
  opacity: 1;
  border: none;
  background: none;
  transform: translateZ(0) rotateX(0deg);
  -webkit-transform: translateZ(0) rotateX(0deg);
  transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .clock-tile__digit {
    transition: none !important;
  }
}

.header-meta {
  font-size: var(--t-meta, 0.75rem);
  color: var(--t-text-3);
}

/* ── Main ──────────────────────────────────────────── */
/* Scrollen läuft auf #main (volle Viewport-Breite) — der Scrollbalken sitzt
   damit am rechten Viewport-Rand und nicht direkt neben den zentrierten
   Karten. Vertikale Zentrierung bei wenig Inhalt erfolgt über margin-block:auto
   auf .departures-container (kompatibler mit overflow als justify-content). */
#main {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--t-pad-page, 2.1% 3.4%);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

/* ── Departures Container ──────────────────────────── */
.departures-container {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  /* Kein % row-gap: bei column + auto-Höhe oft zyklisch → 0. Abstände über Stack-Tokens + Margins. */
  gap: 0;
  max-width: var(--layout-board-max, min(90%, 62.5vw));
  width: 100%;
  margin-inline: auto;
  margin-block: auto;
}

.departures-container > .departure-group + .departure-group {
  margin-top: var(--t-stack-between-cards, max(0.58em, min(0.72rem, 1.05vw)));
}

.departures-container > .station-section + .station-section {
  margin-top: var(--t-stack-between-regions, max(0.78em, min(0.95rem, 1.55vw)));
}

/* ── Station Section ───────────────────────────────── */
.station-section {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Überschrift: enger zum Inhalt darunter, Abstand nach oben über Regions-Token (Zwischen-Sektionen). */
.station-section > .station-header {
  margin-bottom: var(--t-stack-after-heading, min(0.38em, 0.52rem));
}

.station-section > .departure-group + .departure-group,
.station-section > .departure-group + .disruption-inline,
.station-section > .disruption-inline + .departure-group,
.station-section > .disruption-inline + .disruption-inline {
  margin-top: var(--t-stack-between-cards, max(0.58em, min(0.72rem, 1.05vw)));
}

.station-section > .station-header + .departure-group,
.station-section > .station-header + .disruption-inline {
  margin-top: 0;
}

/* ── Station Header — prominent, not uppercase label ─ */
.station-header {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--t-text-1);
  padding: 0.3rem 0.1rem 0.4rem;
  border-bottom: max(var(--t-hairline, min(0.09em, 0.22vw)), 0.1em) solid var(--t-border-strong, var(--t-border));
  margin-bottom: 0.1rem;
  line-height: 1.2;
}

/* ── Departure Card ────────────────────────────────── */
.departure-group {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--t-gap, 1.35%);
  padding: var(--t-pad-card, 1.6% 2.2%);
  background: var(--t-surface);
  border: var(--t-hairline, min(0.09em, 0.22vw)) solid var(--t-border);
  border-radius: var(--t-radius, min(3.4vw, 0.9em));
  box-shadow: var(--t-shadow, none);
  transition:
    transform calc(var(--_speed, 0.2s)) ease,
    box-shadow calc(var(--_speed, 0.2s)) ease,
    border-color calc(var(--_speed, 0.2s)) ease;
  --enter-i: 0;
}

.departure-group:hover {
  transform: translateY(calc(-1 * var(--t-hairline, min(0.09em, 0.22vw))));
  box-shadow: var(--t-shadow-hover, none);
}

/* ── Line Badge ────────────────────────────────────── */
.line-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--t-badge, 2.6rem);
  height: var(--t-badge, 2.6rem);
  flex-shrink: 0;
  border-radius: var(--t-radius-sm, min(2.1vw, 0.58em));
  font-size: var(--t-badge-font, 1.05rem);
  font-weight: 800;
  color: #fff;
  padding: 0 0.25rem;
}

.line-badge.type-metro   { background: var(--t-metro); }
.line-badge.type-tram    { background: var(--t-tram); }
.line-badge.type-bus     { background: var(--t-bus); }
.line-badge.type-train   { background: var(--t-train); }
.line-badge.type-unknown { background: var(--t-text-3); }

/* U-Bahn: circle badge with official color */
.line-badge.line-badge--ubahn {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: #fff;
  padding: 0;
  border-radius: 50%;
}

/* SVG icon badges */
.line-badge.line-badge--svg {
  background: transparent !important;
  padding: 0;
  border-radius: 0;
}

.line-badge.line-badge--svg .line-badge__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transform: scale(1.18);
  transform-origin: center center;
}

/* ── Group Info ────────────────────────────────────── */
.group-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.group-direction {
  font-size: var(--t-direction, 1.1rem);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--t-text-1);
  letter-spacing: -0.01em;
}

.group-note {
  font-size: var(--t-meta, 0.75rem);
  color: var(--t-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Group Times ───────────────────────────────────── */
.departure-group > .group-times {
  justify-self: end;
}

/* WL: keine Abfahrt im Datenfenster (Nacht o. Ä.) — Hinweis rechts, klein */
.group-no-data-notes {
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  gap: 0.2rem;
  max-width: min(22rem, 100%);
}

.group-no-data-note-primary {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--t-text-2);
  line-height: 1.25;
}

.group-no-data-note-secondary {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--t-text-3);
  line-height: 1.3;
}

.departure-group--no-data:hover {
  transform: none;
  box-shadow: var(--t-shadow, none);
}

.group-times {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}

/* ── Time Chip ─────────────────────────────────────── */
.time-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  padding: 0.38rem 0.5rem;
  border-radius: var(--t-radius-sm, min(2.1vw, 0.58em));
  border: var(--t-hairline, min(0.09em, 0.22vw)) solid var(--t-border);
  background: var(--t-surface-2);
  position: relative;
  transition: opacity calc(var(--_speed, 0.2s)) ease;
}

.time-chip.secondary {
  opacity: 0.42;
}

.time-chip--service-gap {
  align-items: flex-end;
  margin-left: auto;
  min-width: min(100%, 9.5rem);
  max-width: min(100%, 18rem);
}

.time-chip--service-gap .chip-countdown--service-gap {
  font-size: max(0.72rem, calc(var(--t-meta, 0.75rem) * 1.05));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: right;
  white-space: normal;
  hyphens: auto;
  color: var(--t-text-1);
}

.chip-service-gap-detail {
  font-size: max(0.58rem, calc(var(--t-meta, 0.75rem) * 0.82));
  font-weight: 500;
  line-height: 1.35;
  text-align: right;
  color: var(--t-text-3);
  margin-top: 0.12rem;
  max-width: 16rem;
}

.time-chip.departed {
  display: none;
}

.chip-countdown {
  font-size: var(--t-countdown, 1.95rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--t-text-1);
}

.chip-countdown.chip-countdown--long {
  font-size: max(0.95rem, calc(var(--t-countdown, 1.95rem) * 0.72));
  letter-spacing: -0.02em;
  text-align: center;
}

.chip-countdown.departing {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--t-realtime);
  animation: pulse-realtime calc(2.5s * var(--t-motion, 1)) ease-in-out infinite;
}

.chip-clock {
  font-size: var(--t-meta, 0.75rem);
  color: var(--t-text-3);
  font-variant-numeric: tabular-nums;
  margin-top: 0.08rem;
}

.chip-unit {
  font-size: 0.6rem;
  color: var(--t-text-3);
  letter-spacing: 0.04em;
  min-height: 1em;
  margin-top: 0.02rem;
  font-weight: 500;
}

.chip-dot {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 50%;
}

.chip-dot.is-realtime { background: var(--t-realtime); }
.chip-dot.is-planned  { background: var(--t-planned); }

/* ── Loading / Empty ───────────────────────────────── */
.loading-placeholder {
  display: flex;
  justify-content: center;
  padding: min(14%, 4.5em);
}

.loading-spinner {
  width: 1.8rem;
  height: 1.8rem;
  border: max(var(--t-hairline, min(0.09em, 0.22vw)), 0.1em) solid var(--t-border);
  border-top-color: var(--color-spinner, var(--t-accent));
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--t-text-3);
  font-size: 1rem;
}

/* ── Footer ────────────────────────────────────────── */
#footer {
  background: var(--t-surface);
  border-top: var(--t-hairline, min(0.09em, 0.22vw)) solid var(--t-border);
  animation: appFadeIn calc(var(--_enter-dur, 0.38s)) ease-out 0.08s both;
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: var(--t-pad-bar, 0.95% 2.8%);
  font-size: var(--t-meta, 0.75rem);
  color: var(--t-text-3);
}

.stale-indicator {
  color: var(--t-stale, var(--t-text-2));
  background: var(--t-stale-bg, transparent);
  padding: 0.12rem 0.5rem;
  border-radius: var(--t-radius-sm, min(2.1vw, 0.58em));
}

.error-indicator { color: var(--t-error); }
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════ */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes appFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(0.65em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.departure-group.entering {
  animation: cardEnter var(--_enter-dur, 0.38s) cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--enter-i, 0) * 55ms * var(--t-motion, 1));
}

@keyframes cardExit {
  to {
    opacity: 0;
    transform: translateY(-0.4em);
  }
}

.departure-group.exiting {
  animation: cardExit var(--_exit-dur, 0.18s) ease-in forwards;
  pointer-events: none;
}

@keyframes countdownTick {
  0%   { transform: scale(1.05); opacity: 0.55; }
  100% { transform: scale(1);    opacity: 1; }
}

.chip-countdown.changed {
  animation: countdownTick calc(0.32s * var(--t-motion, 1)) ease-out forwards;
}

@keyframes pulse-realtime {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes disruptionAppear {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   ══════════════════════════════════════════════════════ */

@media (max-width: 45em) {
  #main {
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    /* Platz für fixes Zahnrad (shared.css) + Home-Indikator */
    padding-bottom: calc(min(18%, 4.5em) + env(safe-area-inset-bottom, 0px));
  }

  .departures-container {
    max-width: 100%;
    padding-bottom: 0.5rem;
  }

  #header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .header-right {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.12rem;
    margin-left: auto;
  }

  .clock:not(.clock-transit) {
    font-size: clamp(1.65rem, 7.5vw, 2.35rem);
  }

  .clock-transit {
    font-size: clamp(1.42rem, 7.2vw, 2.2rem);
  }

  .clock-tile {
    padding: 0 0.09em;
  }

  /* Footer-Zeile: Text darf schrumpfen, nichts wird horizontal abgeschnitten */
  .status-bar {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.35rem;
    column-gap: 0.5rem;
  }

  .status-bar .stale-indicator,
  .status-bar .error-indicator {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  /*
   * Abfahrtskarten: Richtung vollständig (kein Ellipsis), Zeiten darunter.
   * Countdown skaliert mit clamp (min/max), Zeilenumbruch nur bei Bedarf.
   */
  .departure-group {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: var(--t-gap, 1.35%);
    row-gap: 0.45rem;
  }

  .departure-group > .line-badge {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .departure-group > .group-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: center;
  }

  .departure-group > .group-times {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    max-width: 100%;
  }

  .departure-group > .disruption-indicator {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    margin-left: 0;
  }

  .group-direction {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.3;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .group-note {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
    line-height: 1.35;
  }

  .group-times {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.35rem;
    column-gap: 0.35rem;
  }

  .time-chip {
    min-width: clamp(2.45rem, 14vw, 3.4rem);
    padding: 0.3rem 0.42rem;
  }

  .chip-countdown {
    font-size: clamp(0.92rem, 2.5vw + 0.55rem, 1.75rem);
  }

  .chip-countdown.chip-countdown--long {
    font-size: clamp(0.72rem, 1.8vw + 0.42rem, 1.28rem);
    letter-spacing: -0.03em;
  }

  .chip-countdown.departing {
    font-size: clamp(0.72rem, 1.5vw + 0.35rem, 0.88rem);
  }

  .chip-clock {
    font-size: clamp(0.62rem, 1.2vw + 0.5rem, 0.74rem);
  }

  .chip-unit {
    font-size: clamp(0.52rem, 1vw + 0.38rem, 0.58rem);
  }
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}