/* WoW Forever - Tools und kuratierte Seiten (/tools/*, /zeitplan,
   /dungeons, /raids, /camp-boni). Baut auf den Tokens aus base.css und den
   Komponenten aus components.css auf; ergaenzt nur, was dort noch fehlt
   (Timeline, Matrix-Feinschliff, Hinweisbox). Praefix wf- wie im Kern. */

/* ============ Countdown-Raster (mehr als 2 Karten) ============ */
.wf-countdowns--tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-sp-4);
}

@media (min-width: 640px) {
  .wf-countdowns--tools { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .wf-countdowns--tools { grid-template-columns: repeat(3, 1fr); }
}

.wf-countdown__done {
  font-size: var(--wf-fs-600);
  font-weight: 700;
  color: var(--wf-accent-gold);
  text-align: center;
  padding: var(--wf-sp-4) 0;
  margin: 0;
}

.wf-countdown__done--offen {
  color: var(--wf-text-dim);
  font-size: var(--wf-fs-400);
}

/* ============ Rassen-Klassen-Matrix ============ */
/* Beschriftung ausserhalb der Tabelle (statt <caption>): eine <caption>
   erbt die Breite der (breiten, eigenstaendig scrollenden) Matrix und
   bricht deshalb im 375px-Ausschnitt nicht um - wirkt abgeschnitten. Die
   Tabelle bindet den Text stattdessen per aria-labelledby ein. */
.wf-matrix-caption { margin: var(--wf-sp-4) 0 var(--wf-sp-2); padding: 0; color: var(--wf-text-dim); font-size: var(--wf-fs-100); }

.wf-matrix-wrap { overflow-x: auto; }

.wf-matrix { min-width: 760px; }

.wf-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.wf-matrix .wf-matrix__rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--wf-bg-card);
  text-align: left;
  white-space: nowrap;
}

/* Schmal: lange Rassennamen ("Skyborne (Arbeitsübersetzung: ...)") machten
   die feststehende Spalte breiter als den sichtbaren Ausschnitt - auf 375px
   war dann nie eine Klassenspalte zu sehen. */
@media (max-width: 767px) {
  .wf-matrix .wf-matrix__rowhead {
    white-space: normal;
    min-width: 7rem;
    max-width: 9rem;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* Sticky Zeilenkopf deckt die Zebra-Zeile ab - er braucht dieselbe Farbe
   wie seine Zeile, sonst steht links ein Streifen in anderer Tonlage. */
.wf-matrix tbody tr:nth-child(even) .wf-matrix__rowhead { background: var(--wf-bg-table-row-alt); }

.wf-matrix thead th.wf-matrix__rowhead {
  z-index: 3;
  background: var(--wf-bg-table-head);
}

.wf-matrix__grouphead th {
  position: static;
  background: var(--wf-bg-table-head);
  color: var(--wf-accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--wf-fs-100);
  text-align: left;
}

.wf-matrix-cell { text-align: center; }
.wf-matrix-cell--neu { background: rgba(240, 180, 41, 0.1); }

/* "Nur neue Kombinationen hervorheben": dimmt alle anderen Zellen, statt
   Spalten/Zeilen zu entfernen - Tabellenstruktur bleibt erhalten. */
.wf-matrix[data-filter-new="1"] .wf-matrix-cell:not(.wf-matrix-cell--neu) {
  opacity: 0.25;
}

.wf-matrix-cell__note {
  display: block;
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
}

.wf-matrix-legend { margin: var(--wf-sp-5) 0; }
.wf-matrix-legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-sp-2) var(--wf-sp-5);
  font-size: var(--wf-fs-200);
  color: var(--wf-text-dim);
}

.wf-filterfield--checkbox { display: flex; align-items: center; }
.wf-filterfield--checkbox label { display: flex; align-items: center; gap: var(--wf-sp-3); min-height: 44px; color: var(--wf-text); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--wf-fs-200); cursor: pointer; }

/* ============ Werkzeug-Uebersicht (/tools) ============ */
.wf-toolcard__meta {
  display: flex;
  /* Immer zwei Zeilen (Reifegrad, darunter Datenstand): bei laengeren
     Angaben ("Forever 1.60.1 + Classic 1.15.9") brach sonst nur diese Karte
     um, die anderen blieben einzeilig. */
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wf-sp-1);
}

.wf-toolcard__datenstand {
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
}

/* ============ Quellenlisten mit nackten URLs ============ */
/* Linktexte sind seit Str::quelleLabel Woerter statt nackter URLs:
   normal umbrechen, nicht mitten im Wort. */
.wf-sources__url { overflow-wrap: break-word; }

/* ============ Hinweisbox (z. B. Widerspruch 7 vs. 9 Dungeons) ============ */
.wf-hint-box {
  background: var(--wf-badge-unbestaetigt-bg);
  border: 1px solid var(--wf-border);
  border-left: 4px solid var(--wf-accent-gold);
  border-radius: var(--wf-radius-md);
  padding: var(--wf-card-pad);
  margin-bottom: var(--wf-sp-5);
  font-size: var(--wf-fs-200);
  line-height: 1.6;
  /* Quellenangaben in Zitaten (Widerspruch-Hinweis) sind kuratierter Text
     ohne Umbruchgarantie - lange Klammerzusaetze sprengen sonst die Box
     (gemessen: /dungeons). */
  overflow-wrap: anywhere;
}

.wf-hint-box p { margin: 0; }

/* ============ Zeitleiste (/zeitplan) ============ */
.wf-timeline {
  list-style: none;
  margin: 0 0 var(--wf-sp-6);
  padding: 0;
  border-left: 2px solid var(--wf-border);
}

.wf-timeline__item {
  position: relative;
  padding: 0 0 var(--wf-sp-5) var(--wf-sp-5);
}

.wf-timeline__item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wf-accent);
  border: 2px solid var(--wf-bg-body);
}

/* Vergangene Termine abblenden, ohne die Deckkraft zu senken: opacity 0.6
   drueckte Text und Kennzeichen unter 4,5:1 (gemessen: Badge "Bestätigt"
   4,01:1). Jetzt nur Titel und Text in der Nebenfarbe (~7,4:1). */
.wf-timeline__item--vergangen h2,
.wf-timeline__item--vergangen > p:not(:has(.wf-badge)) { color: var(--wf-text-dim); }
.wf-timeline__item--vergangen::before { background: var(--wf-text-dim); }

.wf-timeline__item h2 { line-height: 1.3; }

.wf-timeline__item--heute::before {
  background: var(--wf-accent-gold);
  box-shadow: 0 0 0 4px rgba(240, 180, 41, 0.25);
}

.wf-timeline__item--offen::before { background: transparent; border-color: var(--wf-border); }

.wf-timeline__date {
  font-weight: 700;
  color: var(--wf-heading);
  margin: 0 0 2px;
  font-size: var(--wf-fs-100);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wf-timeline__item h2 { margin: 0 0 var(--wf-sp-2); font-size: var(--wf-fs-500); }

/* ============ Camp-Boni je Beruf (/camp-boni) ============
   Karte je Beruf statt einer Tabelle: zu jedem Camp-Objekt gehoeren
   Wirkung, Freischaltung, Konfidenz und Quelle, und das bekommt eine
   Tabellenzeile auf dem Handy nicht lesbar unter. Kopfzeile, Name und
   Zusatz kommen aus beute.css (.wf-boss__kopf/__name/__zusatz/__anzahl),
   das die Seite zusaetzlich laedt - deshalb hier nur das Eigene. */

.wf-campgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wf-sp-4);
  margin: var(--wf-sp-4) 0 var(--wf-sp-6);
}

@media (min-width: 900px) {
  .wf-campgrid { grid-template-columns: 1fr 1fr; }
}

.wf-campberuf {
  background: var(--wf-bg-card);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  overflow: hidden;
  box-shadow: var(--wf-shadow-card);
  display: flex;
  flex-direction: column;
}

/* Berufe ohne belegtes Objekt bleiben sichtbar, treten aber zurueck - ueber
   gestrichelten Rand und Hintergrund, nicht ueber Deckkraft (die haette
   die Schrift unter 4,5:1 gedrueckt). */
.wf-campberuf--leer { border-style: dashed; background: transparent; box-shadow: none; }

.wf-campberuf__leer,
.wf-campberuf__hinweis {
  margin: 0;
  padding: var(--wf-sp-3) var(--wf-sp-4);
  font-size: var(--wf-fs-200);
  color: var(--wf-text-dim);
}

.wf-campberuf__hinweis { border-top: 1px dashed var(--wf-border); }

.wf-campobjekte {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wf-campobjekt {
  padding: var(--wf-sp-3) var(--wf-sp-4);
  border-bottom: 1px solid var(--wf-border);
}

.wf-campobjekt:last-child { border-bottom: 0; }

.wf-campobjekt__name {
  margin: 0 0 var(--wf-sp-1);
  font-weight: 700;
  color: var(--wf-gold-bright);
}

.wf-campobjekt__de {
  font-weight: 400;
  color: var(--wf-text-dim);
  font-size: var(--wf-fs-200);
}

.wf-campobjekt__de::before { content: "· "; }

.wf-campobjekt__wirkung {
  margin: 0 0 var(--wf-sp-2);
  font-size: var(--wf-fs-200);
  color: var(--wf-text);
}

.wf-campobjekt__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-sp-2);
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
}

.wf-campobjekt__frei,
.wf-campobjekt__zutaten {
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  padding: 1px var(--wf-sp-2);
}

.wf-campobjekt__zutaten { border-style: dashed; }

.wf-campobjekt__quellen { word-break: break-word; }
.wf-campobjekt__quelle { color: var(--wf-text-dim); position: relative; text-decoration: underline; text-underline-offset: 3px; } /* Link im Fliesstext: nie nur durch Farbe erkennbar (WCAG 1.4.1) */
.wf-campobjekt__quelle::after { content: ""; position: absolute; inset: -14px -4px; }
.wf-campobjekt__quelle:hover { color: var(--wf-accent-gold); }

.wf-campregeln {
  list-style: none;
  margin: 0 0 var(--wf-sp-6);
  padding: 0;
  display: grid;
  gap: var(--wf-sp-3);
}

.wf-campregeln__eintrag {
  border-left: 3px solid var(--wf-gold-line);
  padding-left: var(--wf-sp-3);
}

.wf-campregeln__text { display: block; margin-bottom: var(--wf-sp-1); }