/* --- Regime-Farben und Zeitleiste (AP 4.4, DESIGN 2.3 und 5) ---------------------------------- */

/* Kategoriale Farben in fester Reihenfolge – nie Rot/Grün. Setzen `color`; SVG-Flächen und
   Farbfelder übernehmen sie über `currentColor`. `--0`: ein Regime, das das Modell nicht mehr
   kennt (alte Version), neutral. */
.regime-tone--0 {
  color: var(--text-2);
}

.regime-tone--1 {
  color: var(--accent);
}

.regime-tone--2 {
  color: var(--sky);
}

.regime-tone--3 {
  color: var(--violet);
}

.regime-tone--4 {
  color: var(--gold);
}

.regime-tone--5 {
  color: var(--teal);
}

.timeline {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
}

.timeline__band {
  display: block;
  border-radius: 6px;
  background: var(--surface-pill);
  overflow: hidden;
}

.timeline__segment {
  fill: currentColor;
  fill-opacity: 0.85;
  transition: fill-opacity var(--ease);
}

.timeline__segment:hover {
  fill-opacity: 1;
}

/* Ein Tag in 44 Jahren ist schmaler als ein Pixel: der Rand in der eigenen Farbe (1 px je Seite)
   gibt ihm mindestens 2 px, ohne Lage und Achse zu verschieben. */
.timeline__segment--narrow {
  stroke: currentColor;
  stroke-width: 2px;
  stroke-opacity: 0.85;
}

.timeline__segment--narrow:hover {
  stroke-opacity: 1;
}

.timeline__axis {
  display: block;
  overflow: visible;
  color: var(--text-2);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.timeline__axis text {
  fill: currentColor;
}

.timeline__tick {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.timeline__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  color: var(--text-2);
  font-size: 0.75rem;
}

.timeline__range {
  font-variant-numeric: tabular-nums;
}

.timeline__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__legend-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--text-1);
}

.timeline__hint {
  color: var(--text-2);
}

.timeline__swatch {
  flex: none;
  align-self: center;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: currentColor;
}