/* ============================================================================
 * COMPONENT · tc-button
 * ----------------------------------------------------------------------------
 * 7 Variants, 3 Groessen, mehrere States.
 * Loest die historischen .btn / .gm-btn / .pf-tool-btn + Inline-Button-Styles ab.
 *
 * Token-Abhaengigkeiten:
 *   --tc-accent, --tc-accent-light, --tc-accent-glow
 *   --tc-bg-surface-1, --tc-bg-surface-2
 *   --tc-text-strong, --tc-text-default, --tc-text-muted, --tc-text-on-accent
 *   --tc-deco-warm-bg, --tc-deco-warm-border, --tc-deco-ornament-*
 *   --tc-success/--tc-danger + -bg/-border
 *   --tc-space-*, --tc-radius-*, --tc-motion-*, --tc-touch-*
 *
 * Joy-of-Use-Patterns:
 *   - Hover-Glow auf primary + emphatic + tool
 *   - Bounce-Lift auf emphatic (translateY)
 *   - Spinner-Animation im .is-loading-State
 *   - Touch-Optimierung (auto-upgrade auf 44px Min-Height)
 *
 * Version: 1.0 (29. Mai 2026, Phase 2)
 * ============================================================================ */


/* ============================================================================
 * BASE — alle Buttons erben das hier
 * ============================================================================ */
.tc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tc-space-2);
  min-height: var(--tc-touch-min);
  padding: var(--tc-space-2) var(--tc-space-4);
  border: 1px solid transparent;
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-2);
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  transition: background var(--tc-motion-fast),
              border-color var(--tc-motion-fast),
              color var(--tc-motion-fast),
              box-shadow var(--tc-motion-fast),
              transform var(--tc-motion-fast);
}

/* ⚠️ `hidden` MUSS GEWINNEN (04.10.2026). `display: inline-flex` oben schlaegt
   die Browser-Regel `[hidden] { display: none }` — ein Knopf mit `hidden`
   blieb sichtbar. An der Spieluhr standen so in der Pause alle vier
   Pausenknoepfe statt nur „Weiter" da, und die Leiste sprengte das Handy
   (Marcus' Testabend). Der Fehdestein hatte sich lokal schon selbst geholfen
   (`.tc-schwur__fuss [hidden]`); jetzt gilt es fuer jeden tc-button. */
.tc-button[hidden] { display: none; }

.tc-button:hover {
  background: var(--tc-bg-surface-3);
  color: var(--tc-text-strong);
}

.tc-button:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
}

.tc-button[disabled],
.tc-button.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* ============================================================================
 * SIZES — sm, md (default), lg
 * ============================================================================ */
.tc-button--sm {
  min-height: 28px;
  padding: var(--tc-space-1) var(--tc-space-3);
  font-size: var(--tc-text-xs);
}

.tc-button--lg {
  min-height: var(--tc-touch-rec);
  padding: var(--tc-space-3) var(--tc-space-5);
  font-size: var(--tc-text-base);
}

/* Volle Breite (11.10.2026, #467): der eine Knopf, der ein Formular oder ein
   Fenster abschliesst. Stand bis dahin als `style="width:100%"` auf 16 Seiten
   und Modulen. Nur die Breite — der Abstand nach oben gehoert dem Ort. */
.tc-button--block { width: 100%; }


/* ============================================================================
 * VARIANTS — Tonalitaets-Spektrum von dezent bis CTA-Knall
 * ============================================================================ */

/* --- Ghost: kein Background, nur Text-Hover --- */
.tc-button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--tc-text-default);
}
.tc-button--ghost:hover {
  background: var(--tc-bg-surface-1);
  color: var(--tc-text-strong);
}

/* --- Link: sieht aus wie Hyperlink (Auszeichnungs-Gold fuer Kontrast) --- */
.tc-button--link {
  background: transparent;
  border-color: transparent;
  color: var(--tc-highlight);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  min-height: auto;
}
.tc-button--link:hover {
  background: transparent;
  color: var(--tc-highlight);
  filter: brightness(1.15);
}

/* --- Secondary: Standard mit Alpha-BG. Text = Auszeichnungs-Gold
       (--tc-highlight) fuer durchgehend guten Kontrast auf dunklem Grund,
       auch wenn der Primaer-Akzent dunkel ist (z.B. AoS-Rot). --- */
.tc-button--secondary {
  background: var(--tc-deco-warm-bg);
  border-color: var(--tc-deco-warm-border);
  color: var(--tc-highlight);
}
.tc-button--secondary:hover {
  background: rgba(var(--tc-highlight-rgb), 0.12);
  border-color: var(--tc-highlight);
  color: var(--tc-highlight);
}

/* --- Primary: deutliche CTA mit vollem Akzent --- */
.tc-button--primary {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: var(--tc-text-on-accent);
  font-weight: var(--tc-weight-bold);
}
.tc-button--primary:hover {
  background: var(--tc-accent-light);
  border-color: var(--tc-accent-light);
  color: var(--tc-text-on-accent);
  box-shadow: 0 0 12px var(--tc-accent-glow);
}

/* --- Success: positive Confirmation --- */
.tc-button--success {
  background: var(--tc-success-bg);
  border-color: var(--tc-success-border);
  color: var(--tc-success);
}
.tc-button--success:hover {
  background: rgba(74, 222, 128, 0.18);
  border-color: var(--tc-success);
  color: var(--tc-success);
}

/* --- Danger: destruktive Aktion --- */
.tc-button--danger {
  background: var(--tc-danger-bg);
  border-color: var(--tc-danger-border);
  color: var(--tc-danger);
}
.tc-button--danger:hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: var(--tc-danger);
  color: var(--tc-danger);
}

/* --- Emphatic: Top-CTA mit Cinzel + Gradient + Glow + Bounce-Lift --- */
.tc-button--emphatic {
  background: linear-gradient(135deg, var(--tc-accent), var(--tc-accent-dark));
  border-color: var(--tc-accent);
  color: var(--tc-text-on-accent);
  font-family: var(--tc-font-display);
  font-weight: var(--tc-weight-bold);
  letter-spacing: var(--tc-tracking-wide);
  box-shadow: 0 0 16px var(--tc-accent-glow);
  transition: all var(--tc-motion-bounce);
}
.tc-button--emphatic:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--tc-accent-glow);
}
.tc-button--emphatic:active {
  transform: translateY(0);
}


/* ============================================================================
 * tc-button--tool — eigene Tool-Button-Komponente
 * Icon links, Label + Sub-Label rechts. Variant C aus dem Audit
 * (.pf-tool-btn) wird zur ersten Klasse.
 * ============================================================================ */
.tc-button--tool {
  display: flex;
  align-items: center;
  gap: var(--tc-space-3);
  min-height: 56px;
  padding: var(--tc-space-3) var(--tc-space-4);
  text-align: left;
  background: var(--tc-bg-surface-1);
  border-color: var(--tc-deco-ornament-border);
  white-space: normal;
}
.tc-button--tool:hover {
  background: var(--tc-bg-surface-2);
  border-color: var(--tc-accent);
  box-shadow: 0 0 12px var(--tc-deco-ornament-glow);
}

.tc-button__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1;
}

.tc-button__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

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

.tc-button__sub {
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
}


/* ============================================================================
 * STATES — is-loading, is-active
 * ============================================================================ */
.tc-button.is-loading {
  cursor: wait;
  pointer-events: none;
}

.tc-button.is-loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--tc-space-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tc-button-spin 0.8s linear infinite;
}

@keyframes tc-button-spin {
  to { transform: rotate(360deg); }
}

.tc-button.is-active {
  background: var(--tc-bg-surface-3);
  color: var(--tc-text-strong);
  border-color: var(--tc-deco-ornament-border);
}

/* DRUECKEN (#933, 07.10.2026): Jeder Knopf gibt beim Tippen nach, nicht nur
   --emphatic. Dezent, damit eine Leiste aus Knoepfen nicht wackelt. */
.tc-button:active:not([disabled]):not(.is-loading):not(.is-done) {
  transform: scale(0.97);
}

/* ERLEDIGT AM KNOPF (#933): Der Knopf selbst sagt „gespeichert“, statt eines
   Toasts am Bildrand (Leitregel 4, §9 „Toast nur als Ausnahme“). Gesetzt von
   TC.knopfFertig(knopf, {text, dauer}) NACH dem bestaetigten Speichern
   (#946), danach steht der Knopf wieder wie vorher. Erfolgsgruen ist eine
   Datenfarbe (§9). */
.tc-button.is-done {
  pointer-events: none;
  color: var(--tc-text-strong);
  border-color: var(--tc-success);
  background: color-mix(in srgb, var(--tc-success) 16%, var(--tc-bg-surface-2));
}
.tc-button.is-done::before {
  content: '\2713';
  display: inline-block;
  font-weight: 700;
  color: var(--tc-success);
  animation: tc-haken var(--tc-duration-bounce) var(--tc-ease-bounce) both;
}


/* ============================================================================
 * SPIELZUSTAENDE — Datenfarben (Taskwerk #290, 12.08.2026)
 * ----------------------------------------------------------------------------
 * Drei Modifier fuer Momente, die im Spiel etwas bedeuten. Nach §9 sind das
 * DATEN-Farben, keine Stimmung: Sie sagen aus, WAS fuer eine Faehigkeit da
 * gewaehlt wird. Deshalb hart kodiert und nicht aus dem Theme.
 *
 * Vorgeschichte: Diese Zustaende gab es als .btn-legendary, .btn-special und
 * .btn-mutation in admin-styles.css / css-fixes.css — sie waren seit
 * Einfuehrung von btn-compat.css WIRKUNGSLOS. btn-compat wird spaeter geladen
 * und setzt .btn mit gleicher Spezifitaet; bei Gleichstand gewinnt die spaetere
 * Regel. Eine legendaere Faehigkeit sah deshalb aus wie ein normaler Knopf.
 *
 * Die Toene sind so gewaehlt, dass sie sich UNTEREINANDER und von den
 * semantischen Farben unterscheiden lassen:
 *   Erfolg #4ade80 · Warnung #fbbf24 · Gefahr #f87171 · Info #60a5fa
 * ========================================================================== */

/* Arkanes — Zauber und besondere Faehigkeiten.
   #c4b5fd ist die plattformweit etablierte "Skill-Lila" (badge.css,
   organisms.css, threat.css, btn-compat.css). Beides sind Faehigkeiten, also
   dieselbe Farbe: Wer den Ton kennt, erkennt ihn ueberall wieder. */
.tc-button--arcane {
  background: rgba(163, 119, 255, 0.10);
  border-color: rgba(163, 119, 255, 0.35);
  color: #c4b5fd;
}
.tc-button--arcane:hover:not(:disabled) {
  background: rgba(163, 119, 255, 0.18);
  border-color: rgba(163, 119, 255, 0.55);
}

/* Legendaer — der seltene Hoehepunkt.
   Das Original war #f59e0b. Aufgehellt auf #f8b544, weil #f59e0b auf der
   hellsten Plattformflaeche (#3a3a3a) nur 4.31 erreichte — unter WCAG AA.
   Jetzt 4.95. Eine Verwechslung mit dem Warnung-Gelb ist ausgeschlossen: Es
   gibt kein tc-button--warning, die beiden treffen sich also nie. */
.tc-button--legendary {
  background: rgba(248, 181, 68, 0.12);
  border-color: rgba(248, 181, 68, 0.45);
  color: #f8b544;
}
.tc-button--legendary:hover:not(:disabled) {
  background: rgba(248, 181, 68, 0.20);
  border-color: rgba(248, 181, 68, 0.65);
}

/* Mutation — Verderbnis durch Wyrdstone. Magenta statt des urspruenglichen
   Violetts: Das lag zu nah an der Skill-Lila, und "Mutation" und "Zauber"
   sollen sich auf einen Blick unterscheiden. Gruen waere lore-naeher am
   Wyrdstone, kollidiert aber mit --tc-success.
   Aufgehellt von #f472b6 auf #f9a8d4 aus demselben Grund wie beim Gold: 3.62
   lag unter AA (und gleichauf mit --danger, das den Wert historisch
   mitschleppt). Jetzt 4.90 — und gegen das Rot von --danger klar abgesetzt. */
.tc-button--mutation {
  background: rgba(249, 168, 212, 0.12);
  border-color: rgba(249, 168, 212, 0.45);
  color: #f9a8d4;
}
.tc-button--mutation:hover:not(:disabled) {
  background: rgba(249, 168, 212, 0.20);
  border-color: rgba(249, 168, 212, 0.65);
}

/* ============================================================================
 * --icon — der quadratische Knopf, der nur ein Zeichen trägt
 * ============================================================================
 * (21.08.2026) Er hat der Library gefehlt, und das war teuer: Projektweit
 * standen **28 eigene Fassungen** desselben Musters, mit Kantenlängen von
 * 18px bis 52px — `.btn-icon`, `.btn-xp` (einmal 28, einmal 32), `.stepper-btn`
 * (einmal 42, einmal 32), `.bb-btn-mini`, `.legend-edit-btn`, `.tooltip-btn`
 * und so weiter.
 *
 * ⚠️ ÜBER DIE HÄLFTE DAVON LAG UNTER 36px und verletzte damit Heuristik 5.
 * Das fällt am Schreibtisch nie auf — nur am Tisch, mit dem Finger, neben
 * einer Armee aus Zinn.
 *
 * ⚠️ `--sm` MACHT HIER DAS ZEICHEN KLEINER, NICHT DIE TREFFERFLÄCHE. Bei
 * Textknöpfen ist eine geringere Höhe unkritisch, weil die Breite trägt; ein
 * Icon-Knopf ist aber in beiden Richtungen so groß, wie er aussieht. Wer eine
 * kleinere Kante will, bekommt sie nicht — das ist die Regel, nicht ein
 * Versehen.
 *
 * Farbe kommt wie bei jedem anderen Knopf aus der Variante (`--ghost`,
 * `--danger`, …). `--icon` entscheidet nur die Geometrie.
 *
 * ⚠️ EIN KNOPF OHNE TEXT BRAUCHT EIN `aria-label`. Ohne das heißt er für
 * einen Screenreader „🗑️" oder gar nichts. `title` allein reicht nicht — auf
 * dem Tablet gibt es keinen Hover, an dem er erscheinen könnte.
 * ========================================================================== */
.tc-button--icon {
  width: var(--tc-touch-min);
  height: var(--tc-touch-min);
  min-height: var(--tc-touch-min);
  padding: 0;
  gap: 0;
  flex-shrink: 0;
  font-size: var(--tc-text-base);
  line-height: 1;
}
.tc-button--icon.tc-button--lg {
  width: var(--tc-touch-rec);
  height: var(--tc-touch-rec);
  min-height: var(--tc-touch-rec);
  font-size: var(--tc-text-lg);
}
.tc-button--icon.tc-button--sm {
  width: var(--tc-touch-min);
  height: var(--tc-touch-min);
  min-height: var(--tc-touch-min);
  font-size: var(--tc-text-xs);
}

/* ============================================================================
 * TOUCH-OPTIMIERUNG
 * Auf Touch-Geraeten alle Buttons auf 44px Mindesthoehe ziehen.
 * ============================================================================ */
@media (hover: none) and (pointer: coarse) {
  .tc-button { min-height: var(--tc-touch-rec); }

  /* ⚠️ KLICKBARE PILLEN SIND BEDIENELEMENTE (04.09.2026, Taskwerk #425).
   *
   * `ability-pill`, `merc-skill-pill` und `bb-trait-pill` messen 27, 19 und
   * 22px — und sie stehen dutzendfach in einer Spielerzeile, die am Tablet
   * ueber einem echten Spielfeld bedient wird.
   *
   * ⚠️ DER VORSCHLAG IM TICKET WAR EIN VERGROESSERTER HITBEREICH
   * (`::after { inset: -7px }`) — GEMESSEN IST DAS FALSCH. Der Container
   * `.tc-roster-row__skills` hat `gap: 3px` bei `flex-wrap: wrap`: Zwei
   * benachbarte Pillen mit je 7px Ueberstand ueberlappen sich um 11px, und
   * in der Ueberlappung gewinnt die spaeter gezeichnete. Man tippt auf A und
   * trifft B — das ist schlimmer als eine kleine Flaeche, weil es falsch
   * reagiert statt gar nicht.
   *
   * ⚠️ UND NUR UNTER `pointer: coarse`. Am Schreibtisch trifft die Maus auch
   * 27px, und die Zeile bleibt so hoch, wie Tim sie abgenommen hat. Das
   * Problem ist der Finger, nicht die Pille.
   *
   * ⚠️ `[onclick]` TRIFFT GENAU DIE KLICKBAREN. An allen vier Erzeugern
   * nachgesehen: Die Anzeige-Pille in `bb-pre-game.js:734` hat keins und
   * bleibt damit unberuehrt. Ein `.pill { min-height }` ohne diese
   * Bedingung haette jede Anzeige mitgezogen. */
  .ability-pill[onclick],
  .merc-skill-pill[onclick],
  .bb-trait-pill[onclick],
  .skill-pill[onclick],
  /* ⚠️ `.cond-stats-info-btn` IST TROTZ DES NAMENS EINE PILLE (07.09.2026,
     #195). border-radius 12px, vertical-align: middle, inline in der
     Statszeile, Inhalt ist ⚡ plus Zaehler — dieselbe Gattung wie die vier
     darueber, nicht ein Knopf. Gemessen 30x50px, also unter Heuristik 5; der
     `[onclick]`-Filter greift, das Attribut steht in
     js/ui/conditional-stats.js:1017. Sie zu `tc-button` zu machen haette die
     Statszeile am Schreibtisch aufgerissen. */
  .cond-stats-info-btn[onclick],
  .spell-pill[onclick] {
    /* ⚠️ `--tc-touch-min` (36px), NICHT `--tc-touch-rec` (44). Eine Pille ist
       kein Knopf: 27 → 44 sprengt die Spielerzeile, 27 → 36 erfuellt
       Heuristik 5 und kostet neun Pixel. */
    min-height: var(--tc-touch-min);
    /* Die Pillen sind `inline-flex` mit `align-items: center` — die groessere
       Hoehe zentriert den Text von selbst. */
    box-sizing: border-box;
  }
  /* ⚠️ 36px, nicht 32 (29.08.2026). Hier standen 32px — vier Pixel unter
     --tc-touch-min, das in tokens.css woertlich "Web-Standard" heisst, und
     unter Heuristik 5 (Hit-Targets >= 36px). Die Bibliothek hat damit ihre
     eigene Regel gebrochen, und zwar an den Knoepfen, die man am haeufigsten
     danebentrifft. Aufgefallen beim Messen von mordheim.html: neun sichtbare
     Knoepfe unter 36px, darunter "Schlacht starten" und "Ausfall bestaetigen"
     — beides Handlungen am Spieltisch, auf dem Tablet, mit dem Daumen.
     Betrifft rund 250 Textknoepfe; Icon-Knoepfe stehen ohnehin schon auf 44. */
  .tc-button--sm { min-height: var(--tc-touch-min); }
  /* ⚠️ BEIM ICON-KNOPF MUSS DIE BREITE MIT. Nur die Höhe zu ziehen macht aus
     dem Quadrat ein Rechteck — und zwar genau dort, wo man es am wenigsten
     sieht und am meisten trifft. */
  .tc-button--icon,
  .tc-button--icon.tc-button--sm {
    width: var(--tc-touch-rec);
    height: var(--tc-touch-rec);
    min-height: var(--tc-touch-rec);
  }
  .tc-button--icon.tc-button--lg { width: 52px; height: 52px; min-height: 52px; }
  .tc-button--lg { min-height: 52px; }
  .tc-button--tool { min-height: 64px; }

  /* Hover-Effekte auf Touch deaktivieren (sonst stuck-hover) */
  .tc-button--emphatic:hover { transform: none; }
}

/* ============================================================================
 * REDUCED MOTION
 * ============================================================================
 * ⚠️ HAT GEFEHLT (21.08.2026, beim Zusammenlegen der Listen-Stilblätter
 * aufgefallen). `tc-button` hat fünf Transitions, `--emphatic` einen
 * `transform` im Hover, und `is-loading` eine ENDLOSANIMATION — die Sorte, die
 * bei „Bewegung reduzieren" einfach weiterläuft.
 *
 * ⚠️ DER SPINNER WIRD LANGSAMER, NICHT ANGEHALTEN. Die Vorlage aus CLAUDE.md §9
 * (`animation-duration: 0.01ms`) passt für Ein- und Ausblendungen: Dort ist der
 * Endzustand das Ziel. Ein Ladeindikator IST die Bewegung — steht er still, ist
 * er ein Kreis und sagt nichts mehr. Reduzieren heißt hier verlangsamen, nicht
 * abschalten.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tc-button {
    transition-duration: 0.01ms;
  }
  .tc-button--emphatic:hover,
  .tc-button--emphatic:active {
    transform: none;
  }
  .tc-button.is-loading::after {
    animation-duration: 2.4s;
  }
}