/* ============================================================================
 * blocks.css - tc-infobox / tc-callout / tc-banner
 * ----------------------------------------------------------------------------
 * SCHICHT 1 (geteilte Leicht-Bausteine fuer Spieltag-Screens: Pre-Game,
 * Match, Post-Game). Bewusst leichter als tc-card / tc-panel:
 *
 *   tc-infobox   Leichte Info-Box mit kleinem Titel + Label-Wert-Zeilen.
 *                Ersetzt bb-pg-winnings-card + bb-pg-fan-row.
 *   tc-callout   Hinweis-/Erklaerkasten mit Akzent-Kante links.
 *                Ersetzt bb-pg-hint.
 *   tc-banner    Status-/Ergebnis-Banner (success / danger / warning / neutral).
 *                Ersetzt bb-pg-summary-banner + bb-pg-result-*.
 *
 * THEME-GETRIEBEN: alle Farben aus --tc-* / aktivem .theme-*.
 * Erfolg/Gefahr-Fuellungen via color-mix (kein --tc-success-rgb vorhanden).
 * ============================================================================ */


/* ============================================================================
 * tc-infobox - leichte Info-Box
 * ============================================================================ */
.tc-infobox {
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  padding: var(--tc-space-3) var(--tc-space-4);
}

.tc-infobox__title {
  margin: 0 0 var(--tc-space-2);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-base);
  font-weight: var(--tc-weight-semibold);
  letter-spacing: var(--tc-tracking-wide);
  color: var(--tc-highlight);
}

/* h4 als Box-Titel (spart Markup-Umbau bei migrierten Karten) */
.tc-infobox > h4 {
  margin: 0 0 var(--tc-space-2);
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-base);
  font-weight: var(--tc-weight-semibold);
  letter-spacing: var(--tc-tracking-wide);
  color: var(--tc-highlight);
}

.tc-infobox__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tc-space-3);
  padding: 3px 0;
  font-size: var(--tc-text-sm);
}

.tc-infobox__row > span {
  color: var(--tc-text-muted);
}

.tc-infobox__row > strong {
  color: var(--tc-text-strong);
  font-variant-numeric: tabular-nums;
}

/* Betonte Zeile (z.B. Spielstand) */
.tc-infobox__row--lg {
  font-size: var(--tc-text-lg);
  padding-top: var(--tc-space-2);
}


/* ============================================================================
 * tc-callout - Hinweis-/Erklaerkasten
 * ============================================================================ */
.tc-callout {
  padding: var(--tc-space-3);
  background: color-mix(in srgb, var(--tc-accent) 7%, transparent);
  border-left: 3px solid var(--tc-accent);
  border-radius: var(--tc-radius-sm);
  color: var(--tc-text-default);
  font-size: var(--tc-text-sm);
  line-height: 1.5;
}

.tc-callout strong {
  color: var(--tc-text-strong);
}

/* ----------------------------------------------------------------------------
 * Varianten (22.08.2026, Taskwerk #122)
 * ----------------------------------------------------------------------------
 * ⚠️ SIE FEHLTEN — UND WURDEN TROTZDEM SCHON BENUTZT. `tc-callout--info` steht
 * seit dem 22.08.2026 in js/ui/social.js, ohne dass es die Regel gab: eine
 * Klasse ohne Wirkung, die nicht auffällt, weil die Basisklasse daneben steht
 * und alles trägt. Genau die Klasse Fehler aus CLAUDE.md §9 — ein erfundener
 * Name wird nicht rot, er wird unsichtbar.
 *
 * Aufbau wie bei `tc-banner` eine Sektion tiefer: Die Basis bleibt neutral
 * (Theme-Akzent), der Modifier färbt Fläche, Kante und Text.
 *
 * ⚠️ DIE FARBEN SIND DATENFARBEN (§9). „Achtung" und „Hinweis" bedeuten etwas
 * über den INHALT, nicht über die Stimmung — deshalb `--tc-warning` und
 * `--tc-info` statt des Theme-Akzents. Ein Warnhinweis, der in jedem System
 * anders aussieht, ist kein Warnhinweis mehr.
 *
 * ⚠️ NUR DIE LINKE KANTE WIRD GEFÄRBT, nicht der ganze Rahmen. `tc-callout`
 * ist der leise Erklärkasten im Fließtext; `tc-banner` ist die laute Meldung.
 * Wer beide gleich rahmt, nimmt dem Banner seine Stimme. */
.tc-callout--warning {
  background: color-mix(in srgb, var(--tc-warning) 10%, transparent);
  border-left-color: var(--tc-warning);
  color: var(--tc-warning);
}
.tc-callout--warning strong { color: var(--tc-warning); }

.tc-callout--danger {
  background: color-mix(in srgb, var(--tc-danger) 10%, transparent);
  border-left-color: var(--tc-danger);
  color: var(--tc-danger);
}
.tc-callout--danger strong { color: var(--tc-danger); }

.tc-callout--success {
  background: color-mix(in srgb, var(--tc-success) 10%, transparent);
  border-left-color: var(--tc-success);
  color: var(--tc-success);
}
.tc-callout--success strong { color: var(--tc-success); }

/* Info bleibt beim Textton — ein Hinweis, der bunt schreit, ist eine Warnung.
   Gefärbt wird nur die Kante. */
.tc-callout--info {
  background: color-mix(in srgb, var(--tc-info) 8%, transparent);
  border-left-color: var(--tc-info);
}

/* Der Icon-Kasten: Symbol links, Text rechts — für Hinweise, die ein Zeichen
   tragen (👑, ⚠️). Vorher baute das jede Stelle selbst nach; allein im
   Blood-Bowl-Pre-Game gab es dafür zwei eigene Klassenfamilien. */
.tc-callout--icon {
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-3);
}
.tc-callout__icon {
  flex: 0 0 auto;
  font-size: 1.3rem;
  line-height: 1.2;
}
.tc-callout__text { flex: 1 1 auto; }


/* ============================================================================
 * tc-banner - Status-/Ergebnis-Banner
 * ----------------------------------------------------------------------------
 * Basis = neutral. Modifier faerben Fuellung + Kante + Text.
 * ============================================================================ */
.tc-banner {
  padding: var(--tc-space-3) var(--tc-space-4);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-2);
  color: var(--tc-text-default);
  text-align: center;
  font-weight: var(--tc-weight-semibold);
  font-size: var(--tc-text-sm);
}

.tc-banner--success {
  background: color-mix(in srgb, var(--tc-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--tc-success) 40%, transparent);
  color: var(--tc-success);
}

.tc-banner--danger {
  background: color-mix(in srgb, var(--tc-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--tc-danger) 40%, transparent);
  color: var(--tc-danger);
}

.tc-banner--warning {
  background: color-mix(in srgb, var(--tc-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--tc-warning) 40%, transparent);
  color: var(--tc-warning);
}

.tc-banner--neutral {
  background: var(--tc-bg-surface-2);
  border-color: var(--tc-border-default);
  color: var(--tc-text-default);
}