/* Marktampel auf der Makro-Seite (Ä-52, macro/_ampel.html): Checkliste mit Signalkarte links,
   SPY-Chart mit Phasenband rechts (≤ 1100 px darunter, wie die Uhr). Formensprache des
   Quadranten-Modells: kleine Gruppenüberschriften, ruhiger Zeilenrhythmus ohne Trennlinien,
   getönte Karte für die Phase. Die Phasenfarben sind bewusst Richtungsfarben (Ausnahme von
   DESIGN 2.3 wie die Quadranten, Ä-52): Positiv --pos, Neutral gedämpftes --sky, Negativ --neg –
   Tokens --ampel-<phase>-rgb, immer mit Namen daneben. Status der Prüfpunkte: erfüllt --pos,
   Warnung --accent, nicht erfüllt --neg, ohne Wertung --text-2 (als RGB für Tönungen). */

.ampel-tone--positive { --tone-rgb: var(--ampel-positive-rgb); }
.ampel-tone--neutral { --tone-rgb: var(--ampel-neutral-rgb); }
.ampel-tone--negative { --tone-rgb: var(--ampel-negative-rgb); }

.ampel-card [data-status="pass"] { --status-rgb: var(--ampel-positive-rgb); }
.ampel-card [data-status="warn"] { --status-rgb: 240, 174, 102; }
.ampel-card [data-status="fail"] { --status-rgb: var(--ampel-negative-rgb); }
.ampel-card [data-status="info"] { --status-rgb: 154, 154, 160; }

.ampel-card {
  margin-bottom: var(--grid-gap);
}

.ampel-card__skeleton {
  max-width: 640px;
}

.ampel-card__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: var(--space-8);
  align-items: stretch;
}

/* --- Checkliste ------------------------------------------------------------------------------ */

.ampel-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.ampel-group__title {
  margin: 0 0 var(--space-2);
  font: var(--text-h3);
}

.ampel-group__note {
  color: var(--text-2);
  font-weight: 400;
}

/* Rundes, getöntes Symbol für den Status; der Text steht für Bildschirmleser daneben. */
.ampel-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--status-rgb), 0.14);
  box-shadow: 0 0 12px rgba(var(--status-rgb), 0.14);
  color: rgb(var(--status-rgb));
  vertical-align: middle;
}

.ampel-status .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.75;
}

/* Indizes als 2×2-Matrix aus ruhigen Kacheln. */
.ampel-matrix {
  width: calc(100% + 2 * var(--space-2));
  margin: calc(-1 * var(--space-2));
  border-collapse: separate;
  border-spacing: var(--space-2);
  table-layout: fixed;
}

.ampel-matrix thead td {
  width: 3em;
}

.ampel-matrix thead th {
  padding: 0 var(--space-3);
  color: var(--text-2);
  font: var(--text-label);
  text-align: left;
}

.ampel-matrix tbody th {
  color: var(--text-1);
  font: 600 0.8125rem/1rem var(--font-sans);
  letter-spacing: 0.04em;
  text-align: left;
}

.ampel-cell {
  padding: 10px var(--space-3);
  border-radius: var(--r-input);
  background: linear-gradient(180deg, rgba(var(--status-rgb), 0.07), rgba(var(--status-rgb), 0.02));
  box-shadow: inset 0 0 0 1px rgba(var(--status-rgb), 0.12);
  white-space: nowrap;
}

.ampel-cell__value {
  margin-left: var(--space-2);
  color: var(--text-1);
  font: 600 0.9375rem/1.25rem var(--font-sans);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* Zeilen im Rhythmus der Uhr (clock-row), ohne Trennlinien. */
.ampel-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ampel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: var(--space-3);
  min-height: 30px;
  padding: 2px 0;
  font: var(--text-table);
}

.ampel-row--bar {
  grid-template-columns: minmax(0, 1fr) minmax(72px, 1fr) 4.5em 20px;
}

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

.ampel-row__value {
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Breite als feiner Balken 0–100 % mit Marken bei den Schwellen 40 und 50 %. */
.ampel-bar {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-pill);
}

.ampel-bar__track { fill: rgba(255, 255, 255, 0.07); }
.ampel-bar__fill { fill: rgba(var(--status-rgb), 0.8); }

.ampel-bar__tick {
  stroke: var(--text-1);
  stroke-opacity: 0.5;
  stroke-width: 1.5;
}

/* Distribution Days als Punkte: vier Plätze (ddMax), nach einer kleinen Lücke rot darüber. */
.ampel-pips {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ampel-pip {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.ampel-pip:nth-child(4) { margin-right: 6px; }
.ampel-pip--on { background: rgba(var(--status-rgb), 0.85); }

.ampel-pip--over {
  background: rgb(var(--ampel-negative-rgb));
  box-shadow: 0 0 6px rgba(var(--ampel-negative-rgb), 0.45);
}

/* --- Signalkarte (wie das Quadranten-Banner der Uhr; keine Straßenampel-Grafik) --------------- */

.ampel-signal {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid rgb(var(--tone-rgb));
  border-radius: var(--r-input);
  background-color: rgba(var(--tone-rgb), 0.1);
  background-image: radial-gradient(
    120% 160% at 0% 0%,
    rgba(var(--tone-rgb), 0.12),
    rgba(var(--tone-rgb), 0) 60%
  );
}

.ampel-signal p {
  margin: 0;
}

.ampel-signal__label {
  color: var(--text-2);
  font: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ampel-signal__phase {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ampel-signal__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(var(--tone-rgb));
  box-shadow: 0 0 0 4px rgba(var(--tone-rgb), 0.16), 0 0 18px rgba(var(--tone-rgb), 0.55);
}

.ampel-signal__name {
  color: rgb(var(--tone-rgb));
  font: var(--text-h1);
}

.ampel-signal__since {
  color: var(--text-2);
  font: var(--text-table);
  font-variant-numeric: tabular-nums;
}

.ampel-signal__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(var(--tone-rgb), 0.16);
  color: var(--text-2);
  font: var(--text-label);
}

.ampel-signal__next > .icon { color: var(--pos); }

.ampel-signal__missing {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ampel-signal__missing li {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  color: var(--text-1);
}

.ampel-card__foot {
  margin: 0;
  color: var(--text-3);
  font: var(--text-label);
}

/* --- Marktbild (Ä-67): abgesetzt unter der Signalkarte, fließt nicht in die Ampel ------------ */

.ampel-picture {
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border-subtle);
}

.ampel-picture__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ampel-picture__item {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px var(--space-3);
  border-radius: var(--r-input);
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.ampel-picture__label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font: var(--text-label);
}

.ampel-picture__value {
  color: var(--text-2);
  font: var(--text-table);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ampel-picture__count {
  color: var(--text-1);
  font: 600 0.9375rem/1.25rem var(--font-sans);
}

.ampel-spark {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: var(--space-1);
}

.ampel-spark__line {
  fill: none;
  stroke: var(--sky);
  stroke-opacity: 0.7;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.ampel-picture__foot,
.ampel-picture__empty {
  margin: var(--space-2) 0 0;
  color: var(--text-3);
  font: var(--text-label);
}

/* --- Chart ----------------------------------------------------------------------------------- */

.ampel-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
}

.ampel-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.ampel-quote {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.ampel-quote__symbol {
  color: var(--text-2);
  font: 600 0.8125rem/1rem var(--font-sans);
  letter-spacing: 0.06em;
}

.ampel-quote__price {
  color: var(--text-1);
  font: 600 2rem/2.25rem var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.ampel-quote__change {
  font: 600 0.9375rem/1.25rem var(--font-sans);
}

/* Der Chart füllt die Höhe der Checkliste; Lightweight Charts misst den Rahmen (autoSize). */
.ampel-chart__plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 420px;
}

.ampel-chart__canvas {
  position: absolute;
  inset: 0;
  height: auto;
}

/* Schwebende Karte am Fadenkreuz; Lage setzt pages/macro_ampel.js über CSSOM (transform). */
.ampel-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: grid;
  gap: 4px;
  min-width: 9.5rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: rgba(27, 27, 30, 0.9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  color: var(--text-2);
  font: var(--text-label);
  pointer-events: none;
}

.ampel-tooltip[hidden] {
  display: none;
}

.ampel-tooltip__price {
  color: var(--text-1);
  font: 600 0.875rem/1.25rem var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.ampel-tooltip__phase {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(var(--tone-rgb, 154, 154, 160), 0.16);
  color: rgb(var(--tone-rgb, 154, 154, 160));
  font-weight: 600;
}

.ampel-tooltip__phase::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.ampel-tooltip__marker--dd_aktiv { color: var(--neg-soft); }
.ampel-tooltip__marker--dd_alt { color: var(--text-2); }
.ampel-tooltip__marker--ftd { color: var(--pos-soft); }

/* Legende als kleine Chips. */
.ampel-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.ampel-legend__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ampel-legend__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  font: var(--text-label);
}

.ampel-legend__mark { font-size: 0.625rem; }
.ampel-legend__mark--dd { color: var(--neg); }
.ampel-legend__mark--old { color: var(--text-3); }
.ampel-legend__mark--ftd { color: var(--pos); }

.ampel-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--tone-rgb), 0.75);
  box-shadow: 0 0 8px rgba(var(--tone-rgb), 0.5);
}

@media (max-width: 1100px) {
  .ampel-card__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .ampel-chart__plot {
    min-height: 380px;
  }
}

@media (max-width: 600px) {
  .ampel-card__body {
    gap: var(--space-6);
  }

  .ampel-chart__plot {
    min-height: 300px;
  }

  .ampel-quote__price {
    font: var(--text-h1);
  }

  .ampel-row,
  .ampel-row--bar {
    gap: var(--space-2);
  }

  .ampel-row--bar {
    grid-template-columns: minmax(0, 1fr) 72px 4.25em 20px;
  }

  .ampel-pips { gap: 2px; }
  .ampel-pip { width: 6px; height: 6px; }
  .ampel-pip:nth-child(4) { margin-right: 4px; }

  /* Ein langer Wert („Defensiv vorn · 0,6 %“) bricht um, statt die Beschriftung zu zerlegen. */
  .ampel-row__value {
    white-space: normal;
  }
}

/* --- Festgehaltener Tag (Ä-79) ---------------------------------------------------------------
   Ein Klick in den Chart hält einen Tag fest: gestrichelte Linie in --accent (pages/
   macro_ampel_pin.js), im Kopf „Stand: TT.MM.JJJJ“ in Akzentfarbe und ein kleiner Knopf „Zurück zu
   heute“. Laden und Fehler leise im selben Text. */

.ampel-stand[data-state="pinned"] {
  color: var(--accent);
}

.ampel-stand[data-state="loading"],
.ampel-stand[data-state="empty"],
.ampel-stand[data-state="error"] {
  color: var(--text-3);
}

.ampel-back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 2px 10px 2px 6px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font: var(--text-label);
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}

.ampel-back:hover {
  background: var(--surface-pill);
  color: var(--text-1);
}

.ampel-back[hidden] {
  display: none;
}

.ampel-checks[aria-busy="true"] {
  opacity: 0.6;
  transition: opacity var(--ease);
}

.ampel-legend__pin {
  display: inline-block;
  width: 0;
  height: 10px;
  border-left: 1.5px dashed var(--accent);
}