/* Prognosen (#/prognosen, views/markets.js) – Siegchancen laut Polymarket. Nur Bausteine und Tokens aus app.css
   (DESIGN.md). Gold = Favorit, Live-Rot = läuft, Grün/Rot nur für Veränderungen (13 px fett). */

/* ---------- Navigation: 6. Punkt „Prognosen“ ----------
   Liegt hier, weil diese Datei global geladen wird und der Punkt mit dieser Seite kam (Kern: app.css).
   Handy: Tab-Leiste bleibt bei 5 Einträgen (DESIGN.md 3.1), „Einstellungen“ wandert als Symbol in die Kopfzeile. */
.app-header .nav-link--head { display: none; }

/* Desktop 760–1099 px: sechs Punkte passen nicht mit Text neben die Marke → Einstellungen nur als Symbol */
@media (min-width: 760px) and (max-width: 1099.98px) {
  .app-nav .nav-link--settings { width: 36px; padding: 0; justify-content: center; }
  .app-nav .nav-link--settings .nav-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (min-width: 760px) and (max-width: 899.98px) {
  .app-nav .nav-link { padding: 0 10px; gap: 6px; }
}

@media (max-width: 759.98px) {
  .app-nav .nav-link--settings { display: none; }
  .app-header .nav-link--head {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    margin-right: -10px;
    padding: 0;
    border-radius: var(--r-sm);
    color: var(--text-2);
  }
  /* Steht eine Seiten-Aktion im Slot, schiebt die schon nach rechts */
  .app-header .header-action:not(:empty) ~ .nav-link--head { margin-left: 0; }
  .app-header .nav-link--head:hover { color: var(--text); background: var(--surface-2); }
  .app-header .nav-link--head[aria-current="page"] { color: var(--accent); background: none; }
}

/* ---------- Seite ---------- */

.pm-pagehead { flex-wrap: nowrap; }
.pm-notes { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.pm-notes:empty { display: none; }
.pm-legal .notice-text { color: var(--text-2); }
.pm-legal .notice-text strong { color: var(--text); font-weight: 600; }

/* Werkzeuge: Liga-Chips links (wischbar), Suche rechts */
.pm-tools { display: flex; align-items: center; gap: var(--s-3) var(--s-4); min-width: 0; }
.pm-filter { flex: 1 1 auto; min-width: 0; }
.pm-search { flex: 0 0 260px; }
.pm-chips { margin: -2px 0; padding-top: 2px; }
.pm-chip-n { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.chip.active .pm-chip-n { color: var(--text-2); }

.pm-content { display: flex; flex-direction: column; gap: var(--s-10); min-width: 0; }
.pm-sec { gap: var(--s-4); }
.pm-day { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pm-day + .pm-day { margin-top: var(--s-3); }

/* ---------- Liste und Zeile ---------- */

.pm-list {
  container: pm / inline-size;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

/* Schmal (Handy): Zeile 1 Zeit · Zusatz | Veränderung + Verlauf, Zeile 2 Team A – Siegchance – Team B */
.pm-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head trend" "match match";
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-1);
}
.pm-row:last-child { border-bottom: 0; }
.pm-row:has(.pm-link):hover { background: var(--surface-2); }
.pm-row.is-favteam { box-shadow: inset 3px 0 0 var(--accent); }
.pm-row.is-live { box-shadow: inset 3px 0 0 var(--live); }

.pm-link { position: absolute; inset: 0; z-index: 1; }
.pm-link:focus-visible { outline-offset: -2px; border-radius: inherit; }
.pm-row button { position: relative; z-index: 2; }

.pm-head { grid-area: head; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }

/* Gruppentitel je Liga · Abschnitt · Format (DESIGN.md 3.4 „row“, Tabellenkopf-Stil) */
.pm-group {
  display: flex;
  gap: .4em;
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  white-space: nowrap;
}
.pm-group-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pm-group-bo { flex: none; text-transform: none; letter-spacing: 0; }

/* Zeit */
.pm-when { display: inline-flex; align-items: baseline; gap: 6px; flex: none; min-width: 0; }
.pm-when-main { color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pm-when-sub { color: var(--muted); font-size: var(--fs-caption); font-weight: 500; white-space: nowrap; }
.pm-when.is-done .pm-when-main { color: var(--text-2); }
.pm-when.is-live { align-items: center; }
.pm-when.is-live .pm-when-main { color: var(--live); font-size: 13px; }

/* Teams | Siegchance */
.pm-match {
  grid-area: match;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(64px, 1.1fr) 44px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.pm-match.is-done { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }

.pm-team { display: flex; align-items: center; gap: var(--s-2); min-width: 0; color: var(--text); }
.pm-team-a { flex-direction: row-reverse; text-align: right; }
.pm-name { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pm-name-short { display: none; }
.pm-team.is-fav .pm-name { font-weight: 700; }
.pm-team.is-win .pm-name { font-weight: 700; }
.pm-team.is-loss .pm-name { color: var(--muted); }
.pm-team.is-loss .tlogo { opacity: .55; }

.pm-pct { color: var(--text-2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.pm-pct-a { text-align: right; }
.pm-pct.is-fav { color: var(--text); font-weight: 700; }

.pm-mid { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.pm-mid-note {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.pm-row.is-live .pm-mid-note { color: var(--text-2); }

/* Siegchance-Balken: Favorit Gold, Gegenseite neutral */
.pm-bar { display: flex; gap: 2px; height: 8px; min-width: 0; border-radius: var(--r-pill); overflow: hidden; }
.pm-bar > span { flex: 1 1 0; min-width: 2px; background: color-mix(in srgb, var(--text-2) 32%, transparent); transition: flex-grow var(--dur-3) var(--ease); }
.pm-bar > .is-fav { background: var(--accent); }
.pm-bar.is-empty { background: transparent; border: 1px dashed var(--border-strong); height: 8px; box-sizing: border-box; }

/* Beendet: Serienstand mittig, darunter Prognose vor dem Start */
.pm-score { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; padding: 0 var(--s-2); }
.pm-score-main { display: inline-flex; align-items: baseline; gap: 6px; color: var(--text-2); font-size: var(--fs-num-lg); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.pm-score-main .is-win { color: var(--accent); }
.pm-score-sep { color: var(--muted); font-weight: 500; }
.pm-score.is-hidden .pm-score-main { color: var(--muted); }
.pm-score-pre { min-height: 15px; color: var(--muted); font-size: var(--fs-caption); font-weight: 500; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-score-pre-word { margin-right: .3em; }
.pm-meta-part { white-space: nowrap; }

/* Rechts: Veränderung + Verlauf */
.pm-trend { grid-area: trend; display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); min-width: 0; }
.pm-trend.is-empty { display: none; }
.pm-trend-in { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 30px; }
.pm-trend-skel { display: block; width: 136px; height: 26px; } /* + .skel (Schimmer, app.css) */
.pm-deltas { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pm-delta { display: inline-flex; align-items: baseline; gap: 6px; line-height: 1.15; white-space: nowrap; }
.pm-delta-label { color: var(--muted); font-size: var(--fs-caption); font-weight: 500; }
.pm-delta-val { display: inline-flex; align-items: center; gap: 3px; min-width: 30px; justify-content: flex-end; color: var(--text-2); font-size: 13px; font-weight: 700; }
.pm-delta.is-up .pm-delta-val { color: var(--win); }
.pm-delta.is-down .pm-delta-val { color: var(--red); }
.pm-delta.is-unknown .pm-delta-val { color: var(--muted); font-weight: 500; }
.pm-arrow { flex: none; }

.pm-spark { display: block; flex: none; overflow: visible; color: var(--accent); }
.pm-spark-mid { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.pm-spark-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pm-spark-area { fill: currentColor; opacity: .12; stroke: none; }
.pm-spark-dot { fill: currentColor; stroke: var(--surface); stroke-width: 1.5; }
.pm-row:hover .pm-spark-dot { stroke: var(--surface-2); }
:root[data-theme="light"] .pm-row:hover .pm-spark-dot { stroke: var(--surface-2); }

.pm-row .spoiler-reveal { min-height: 30px; }

/* Sehr schmal (Handy): Kürzel statt Namen */
@container pm (max-width: 559.98px) {
  .pm-name-long { display: none; }
  .pm-name-short { display: inline; }
  .pm-match { grid-template-columns: minmax(0, 1fr) 40px minmax(56px, 1.2fr) 40px minmax(0, 1fr); gap: 6px; }
  .pm-match.is-done { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .pm-trend-skel { width: 100px; }
  .pm-delta-1h { display: none; }
  .pm-kills { display: none; }
  .pm-trend-in { gap: var(--s-2); }
  .pm-row .spoiler-reveal-label { display: none; }
  /* Prognose vor dem Start: Wort über den Werten („pre-match“ ist breiter als „vorher“) */
  .pm-score-pre { display: flex; flex-direction: column; align-items: center; }
  .pm-score-pre-word { margin-right: 0; }
  /* „no prediction yet“ / „noch keine Prognose“ darf zweizeilig werden statt abgeschnitten */
  .pm-mid-note.is-none { white-space: normal; }
}

/* Breit (Desktop): eine Zeile – Zeit | Team A – Siegchance – Team B | Veränderung + Verlauf (Liga im Gruppentitel) */
@container pm (min-width: 860px) {
  .pm-group { padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5); }
  .pm-row {
    grid-template-columns: 72px minmax(0, 1fr) 156px;
    grid-template-areas: "when match trend";
    gap: 0 var(--s-5);
    min-height: 64px;
    padding: var(--s-2) var(--s-4) var(--s-2) var(--s-5);
  }
  .pm-head { display: contents; }
  .pm-when { grid-area: when; flex-direction: column; align-items: flex-start; gap: 2px; }
  .pm-when.is-live { flex-direction: row; align-items: center; }
  .pm-trend { justify-content: flex-start; }
  .pm-trend.is-empty { display: flex; visibility: hidden; }
  .pm-match { grid-template-columns: minmax(0, 1fr) 44px minmax(88px, 150px) 44px minmax(0, 1fr); gap: var(--s-3); }
  .pm-match.is-done { grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1fr); }
}

/* ---------- Langfristig ---------- */

.pm-futures { align-items: start; }
.pm-future { display: flex; flex-direction: column; gap: var(--s-3); }
.pm-future-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-future-title { font-size: var(--fs-h3); font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.pm-future-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pm-future-item { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pm-future-row { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.pm-future-name { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pm-future-item:not(.is-top) .pm-future-name { font-weight: 500; color: var(--text-2); }
.pm-future-pct { flex: none; color: var(--text-2); font-size: 14px; font-weight: 600; }
.pm-future-item.is-top .pm-future-pct { color: var(--text); font-weight: 700; }
.pm-future-bar { display: block; height: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.pm-future-bar > span { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--text-2) 45%, transparent); transition: width var(--dur-3) var(--ease); }
.pm-future-item.is-top .pm-future-bar > span { background: var(--accent); }
.pm-future-note { margin-top: calc(var(--s-1) * -1); }
/* Spoiler-Schutz: „Langfristig“ verdeckt, bis man es aufdeckt */
.pm-futures-cover { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.pm-futures-cover-icon { display: inline-flex; flex: none; color: var(--muted); }
.pm-futures-cover-text { display: flex; flex: 1 1 220px; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.pm-futures-cover-text strong { color: var(--text); font-size: 14px; font-weight: 600; }
.pm-futures-reveal { flex: none; }

/* ---------- Handy ---------- */

@media (max-width: 759.98px) {
  .pm-refresh { display: none; }
  .pm-tools { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .pm-search { flex: none; }
  .pm-content { gap: var(--s-8); }
}

/* ---------- Prognosen ausgeschaltet (store 'markets') ---------- */

.pm-off-body { display: flex; flex-direction: column; gap: var(--s-3); }
.pm-off-body .state-text { max-width: 52ch; }
.pm-off-note { max-width: 60ch; margin: 0 auto; padding: 0 var(--s-4); text-align: center; }