/* FinanzHub — Monte-Carlo-Schirm
   Nur was es im Bestand nicht gibt. Layout, KPI-Karten, Szenario-Karten und
   Chart-Rahmen kommen aus css/rechner.css (.rechner/.r-*).

   Neu hier: ein Segment-Umschalter aus echten Radios (die cselect-Dropdowns der
   anderen Rechner sind nicht tastaturbedienbar), der Fächer-Legendenpunkt, die
   Modellvergleichs-Balken, der Seed-Block und die Textfassung. */

/* ── Segment-Umschalter ──
   Der Radio bleibt im DOM und fokussierbar; sichtbar ist das Label. */
.mc-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--heat-bg-input, #0F0F0F);
  border: 1px solid var(--line, rgba(255,255,255,.07));
  border-radius: 8px;
}
.mc-seg-in {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Der Nachfahren-Selektor ist Absicht: `.fh-field label` in css/modal.css:377
   hat Spezifität 0-1-1 und würde eine einfache Klasse schlagen — dann stünden
   die Optionen in 10,5px Großbuchstaben in --ink-mute (gemessen 2,57:1) statt
   lesbar. Zusätzlich lädt diese Datei in index.html bewusst zuletzt. */
.mc-seg .mc-seg-lb {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px Mindesthöhe nach DESIGN.md — die Zielgruppe bedient die App überwiegend
     auf dem Telefon. Mit 8px Padding waren es 31px. */
  min-height: 44px;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--heat-ink-soft, #999);
  cursor: pointer;
  margin: 0;
  transition: background .18s ease, color .18s ease, transform .1s ease-out;
  font-variant-numeric: tabular-nums;
}
.mc-seg .mc-seg-lb:hover { color: var(--heat-ink, #fff); background: rgba(255,255,255,.04); }
/* Rückmeldung beim Drücken, nicht erst beim Loslassen — auf Touch gibt es kein
   :hover, sonst passiert bis zum Ende der Rechnung sichtbar nichts. */
.mc-seg .mc-seg-lb:active { transform: scale(.97); }
.mc-seg-in:checked + .mc-seg-lb {
  background: var(--heat-warm, #fff);
  color: var(--heat-warm-ink, #060606);
}
/* Fokusring am Label, weil der Radio selbst unsichtbar ist. */
.mc-seg-in:focus-visible + .mc-seg-lb {
  outline: 2px solid var(--accent, #fff);
  outline-offset: 2px;
}
.mc-seed-btn:active { transform: scale(.97); }
.mc-seed-btn { transition: transform .1s ease-out; }

/* ── Chart ──
   Feste Mindesthöhe, damit zwischen zwei Läufen nichts springt. */
.mc-chart-host { min-height: 428px; }
/* Abblenden signalisiert „diese Zahlen sind gerade nicht aktuell" — gilt für
   alle Ergebnis-Container, nicht nur das Diagramm, damit im Fehlerfall nicht
   Zahlen vom letzten Lauf als aktuelles Ergebnis dastehen. */
.mc-chart-host,
#mc-kpis, #mc-sc, #mc-seed, #mc-tabelle { transition: opacity .18s ease; }
.is-stale { opacity: .45; }

/* Nur für Screenreader. Eigene schlanke Region statt aria-live am ganzen
   KPI-Block, der sonst bei jedem Tastendruck komplett vorgelesen würde. */
.mc-ansage {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mc-klemm { color: var(--heat-warm, #fff); }
.mc-runmeta {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--heat-ink-mute, #555);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mc-legend-band {
  display: inline-block;
  width: 14px; height: 10px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent, #fff) 22%, transparent),
    color-mix(in srgb, var(--accent, #fff) 55%, transparent));
  border: 1px solid var(--line-hi, rgba(255,255,255,.13));
}

/* ── Modellvergleich ── */
.mc-cmp { display: flex; flex-direction: column; gap: 10px; }
.mc-cmp-row {
  display: grid;
  grid-template-columns: 136px 1fr 110px 128px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.mc-cmp-row.is-active {
  border-color: var(--line-hi, rgba(255,255,255,.13));
  background: rgba(255,255,255,.03);
}
.mc-cmp-name { font-size: 13.5px; font-weight: 600; color: var(--heat-ink, #fff); }
.mc-cmp-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.mc-cmp-fill { display: block; height: 100%; background: var(--accent, #fff); border-radius: 999px; }
.mc-cmp-val {
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: var(--heat-ink, #fff);
  font-variant-numeric: tabular-nums;
}
.mc-cmp-diff {
  text-align: right;
  font-size: 12px;
  color: var(--heat-ink-mute, #555);
  font-variant-numeric: tabular-nums;
}

/* ── Fußbereich: Seed, Textfassung, Quelle ── */
.mc-footer { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.mc-seed {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(255,255,255,.07));
  border-radius: 8px;
  background: var(--heat-bg-card, #181818);
}
.mc-seed-label {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--heat-ink-mute, #555);
}
.mc-seed-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--heat-ink, #fff);
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  user-select: all;
}
.mc-seed-meta {
  font-size: 12px;
  color: var(--heat-ink-soft, #999);
  font-variant-numeric: tabular-nums;
}
.mc-seed-btn { margin-left: auto; }
.mc-seed-btn + .mc-seed-btn { margin-left: 0; }

.mc-text > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--heat-ink-soft, #999);
  padding: 10px 0;
}
.mc-text > summary:hover { color: var(--heat-ink, #fff); }
.mc-text[open] > summary { color: var(--heat-ink, #fff); }

.mc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mc-table caption {
  caption-side: top;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  color: var(--heat-ink-soft, #999);
  padding-bottom: 12px;
}
.mc-table th,
.mc-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.07));
  font-size: 13px;
  text-align: left;
}
.mc-table th {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--heat-ink-mute, #555);
  font-weight: 600;
}
.mc-table .num { text-align: right; }
.mc-table tbody tr:last-child td { border-bottom: 0; font-weight: 600; }
.mc-table-foot {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--heat-ink-soft, #999);
  font-variant-numeric: tabular-nums;
}
.mc-quelle {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--heat-ink-mute, #555);
  max-width: 76ch;
  font-variant-numeric: tabular-nums;
}

/* Mobil: Ergebnis vor Eingaben.
   Bei ≤980px wird .rechner einspaltig (css/rechner.css:15) und die Sidebar steht
   oben — auf einem Telefon scrollt man dann an zehn Eingabefeldern vorbei, bevor
   die Antwort kommt. Hier kommt sie zuerst, die Regler danach. Bewusst nur für
   diesen Schirm, damit die anderen dreizehn Rechner unverändert bleiben. */
@media (max-width: 980px) {
  body.view-monte-carlo .rechner { display: flex; flex-direction: column; }
  body.view-monte-carlo .r-content { order: 1; }
  body.view-monte-carlo .r-sidebar { order: 2; position: static; }
}

/* Der Rechner-Kopf ist eine flex-Zeile mit rechtsbündigem Fließtext
   (css/rechner.css:160,184). Auf einem Telefon quetscht sich der Satz dadurch
   in eine schmale, rechts ausgerissene Spalte. Hier stapelt er unter die
   Headline und wird linksbündig. */
@media (max-width: 760px) {
  body.view-monte-carlo .r-head { flex-direction: column; align-items: stretch; gap: 14px; }
  body.view-monte-carlo .r-head .meta { text-align: left; max-width: 46ch; }
}

@media (max-width: 768px) {
  .mc-chart-host { min-height: 360px; }
  /* .r-card-head bleibt sonst eine Flexzeile; zusammen mit dem nowrap der
     Lauf-Angabe schrumpft der Untertitel auf ~18 Zeichen Zeilenlänge und
     bricht mitten im Wort. */
  body.view-monte-carlo .r-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.view-monte-carlo .mc-runmeta { white-space: normal; }
  .mc-cmp-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name val' 'bar bar' 'diff diff';
    gap: 6px 12px;
  }
  .mc-cmp-name { grid-area: name; }
  .mc-cmp-val  { grid-area: val; }
  .mc-cmp-bar  { grid-area: bar; }
  .mc-cmp-diff { grid-area: diff; text-align: left; }
  .mc-seed { gap: 8px; }
  .mc-seed-btn, .mc-seed-btn + .mc-seed-btn { margin-left: 0; flex: 1 1 auto; }
  .mc-table th, .mc-table td { padding: 7px 6px; font-size: 12px; }
}

/* Reduced Motion: Guards gehören in dieser Codebase ins CSS, nicht nach JS
   (siehe js/motion.js). Übergänge weg, Zustände bleiben erkennbar. */
@media (prefers-reduced-motion: reduce) {
  .mc-seg .mc-seg-lb,
  .mc-seed-btn,
  .mc-chart-host,
  #mc-kpis, #mc-sc, #mc-seed, #mc-tabelle { transition: none; }
  .mc-seg .mc-seg-lb:active,
  .mc-seed-btn:active { transform: none; }
}