/* WoW Forever - Rechner (/tools/talentrechner, /tools/legacy-rechner).
   Baut auf den Tokens aus base.css und den Komponenten aus components.css
   auf. Praefix wf-tc- fuer den Talentrechner, wf-lc- fuer den
   Legacy-Rechner. Keine Inline-Styles: die CSP erlaubt nur style-src
   'self', deshalb liegen auch Rasterpositionen als Klassen hier. */

/* ============ Gemeinsames ============ */

.wf-tc-hint {
  border: 1px solid var(--wf-border);
  border-left: 3px solid var(--wf-accent-gold);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-card);
  padding: var(--wf-sp-3) var(--wf-sp-4);
  margin: 0 0 var(--wf-sp-5);
  font-size: var(--wf-fs-200);
  color: var(--wf-text-dim);
  max-width: 70ch;
}

.wf-tc-hint .wf-badge { margin-right: var(--wf-sp-2); }

.wf-tc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-sp-4);
  padding: var(--wf-sp-3) var(--wf-sp-4);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-card);
  margin-bottom: var(--wf-sp-3);
}

.wf-tc-level {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-sp-2);
  margin: 0;
  max-width: 100%;
}

.wf-tc-level select { max-width: 100%; }

.wf-tc-level label { font-size: var(--wf-fs-200); color: var(--wf-text-dim); }

.wf-tc-points {
  margin: 0;
  margin-right: auto;
  font-size: var(--wf-fs-200);
  color: var(--wf-text-dim);
}

.wf-tc-points strong {
  font-size: var(--wf-fs-500);
  color: var(--wf-accent-gold);
}

.wf-tc-summary {
  display: inline-block;
  margin-left: var(--wf-sp-3);
  padding: 2px var(--wf-sp-2);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-table-head);
  color: var(--wf-heading);
  font-variant-numeric: tabular-nums;
}

.wf-tc-actions {
  display: flex;
  flex-wrap: wrap; /* 320px / 400 % Zoom: zwei Knoepfe nebeneinander ragten aus der Seite */
  gap: var(--wf-sp-2);
  margin: 0;
}

.wf-tc-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-sp-2);
  margin-bottom: var(--wf-sp-5);
  font-size: var(--wf-fs-200);
}

.wf-tc-share label { color: var(--wf-text-dim); }

.wf-tc-share input {
  flex: 1 1 22rem;
  min-width: 0;
  padding: var(--wf-sp-2) var(--wf-sp-3);
  border: 1px solid var(--wf-control-border);
  border-radius: var(--wf-radius-md);
  background: var(--wf-control-bg);
  color: var(--wf-text);
  /* 16px: kleiner zoomt iOS beim Antippen hinein. */
  font-size: var(--wf-fs-300);
}

.wf-tc-copied { color: var(--wf-quality-uncommon); }

/* ============ Talentbaeume ============ */

.wf-tc-trees {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-sp-6);
  margin-bottom: var(--wf-sp-5);
}

.wf-tc-tree { min-width: 244px; }

.wf-tc-tree__head {
  display: flex;
  align-items: center;
  gap: var(--wf-sp-2);
  margin: 0 0 var(--wf-sp-3);
  font-size: var(--wf-fs-500);
}

.wf-tc-tree__head img { border-radius: var(--wf-radius-sm); }

.wf-tc-tree__points {
  margin-left: auto;
  min-width: 2.2em;
  text-align: center;
  padding: 1px var(--wf-sp-2);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-table-head);
  color: var(--wf-accent-gold);
  font-family: var(--wf-font-body);
  font-size: var(--wf-fs-200);
  font-variant-numeric: tabular-nums;
}

/* Rastermasse: 52 px Kachel, 12 px Abstand - dieselben Zahlen stehen als
   Konstanten in App\Tools\TalentCalculator (CELL/GAP), weil die
   SVG-Pfeilkoordinaten dort gerechnet werden. */
.wf-tc-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 52px);
  grid-auto-rows: 52px;
  gap: 12px;
  width: 244px;
}

.wf-tc-arrows {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.wf-tc-arrow {
  fill: none;
  stroke: var(--wf-border);
  stroke-width: 2;
}

.wf-tc-arrow[data-active] { stroke: var(--wf-quality-uncommon); }

.wf-tc-arrows marker path { fill: var(--wf-border); }

.wf-tc-r0 { grid-row: 1; }
.wf-tc-r1 { grid-row: 2; }
.wf-tc-r2 { grid-row: 3; }
.wf-tc-r3 { grid-row: 4; }
.wf-tc-r4 { grid-row: 5; }
.wf-tc-r5 { grid-row: 6; }
.wf-tc-r6 { grid-row: 7; }

.wf-tc-c0 { grid-column: 1; }
.wf-tc-c1 { grid-column: 2; }
.wf-tc-c2 { grid-column: 3; }
.wf-tc-c3 { grid-column: 4; }

.wf-tc-cell {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
}

.wf-tc-talent {
  display: block;
  width: 52px;
  height: 52px;
  padding: 3px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-card);
  box-sizing: border-box;
}

.wf-tc-talent:hover,
.wf-tc-talent:focus-visible { border-color: var(--wf-accent); text-decoration: none; }

.wf-tc-talent img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 2px;
}

.wf-tc-talent[data-status="zu"] img { filter: grayscale(1) brightness(0.55); }
.wf-tc-talent[data-status="offen"] img { filter: grayscale(0.55) brightness(0.85); }
.wf-tc-talent[data-status="teil"] { border-color: var(--wf-quality-uncommon); }
.wf-tc-talent[data-status="voll"] { border-color: var(--wf-accent-gold); box-shadow: 0 0 6px var(--wf-gold-glow); }

.wf-tc-rank {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 1.6em;
  padding: 0 3px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-header);
  color: var(--wf-text-dim);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.wf-tc-talent[data-status="teil"] .wf-tc-rank { color: var(--wf-quality-uncommon); }
.wf-tc-talent[data-status="voll"] .wf-tc-rank { color: var(--wf-accent-gold); }

.wf-tc-minus {
  position: absolute;
  left: -8px;
  top: -8px;
  /* 24px sind die Untergrenze fuer Zielgroessen (WCAG 2.5.8); die
     Trefferflaeche reicht per ::after auf 44px (Touch). */
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid var(--wf-border);
  border-radius: 50%;
  background: var(--wf-bg-header);
  color: var(--wf-text-dim);
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  z-index: 2;
}

.wf-tc-minus::after { content: ""; position: absolute; inset: -10px; }

.wf-tc-minus:hover,
.wf-tc-minus:focus-visible { color: var(--wf-heading); border-color: var(--wf-accent); text-decoration: none; }

.wf-tc-legend {
  max-width: 70ch;
  font-size: var(--wf-fs-200);
  color: var(--wf-text-dim);
}

/* ============ Klassenwechsler ============ */

.wf-tc-classes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-sp-2);
  margin-top: var(--wf-sp-5);
}

.wf-tc-classlink {
  padding: var(--wf-sp-2) var(--wf-sp-3);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-card);
  font-size: var(--wf-fs-200);
}

.wf-tc-classes--gross .wf-tc-classlink {
  padding: var(--wf-sp-3) var(--wf-sp-4);
  font-size: var(--wf-fs-400);
}

.wf-tc-classlink:hover,
.wf-tc-classlink:focus-visible { border-color: var(--wf-accent); text-decoration: none; }

.wf-tc-classlink.is-active { border-color: var(--wf-accent-gold); }


/* ============ Legacy-Rechner: 4x4-Raster je Baum ============ */

.wf-lc-trees {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-sp-6);
  margin-bottom: var(--wf-sp-5);
}

/* Feste Breite: sonst zieht die Ueberschrift ("Berufe (Professions)" in
   der Display-Schrift) den Baum breiter als sein Raster, und schon passen
   nur noch zwei statt drei Baeume nebeneinander. */
.wf-lc-tree {
  flex: 0 0 340px;
  width: 340px;
  max-width: 100%;
}

.wf-lc-tree .wf-tc-tree__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.wf-lc-tree__kurz {
  margin: calc(var(--wf-sp-2) * -1) 0 var(--wf-sp-3);
  font-size: var(--wf-fs-200);
  color: var(--wf-text-dim);
}

/* Rastermasse: 76x96 px Kachel, 12 px Abstand - dieselben Zahlen stehen als
   Konstanten in App\Tools\LegacyCalculator (CELL_W/CELL_H/GAP), weil die
   SVG-Linienkoordinaten dort gerechnet werden. Hoeher als breit, weil unter
   dem Icon noch Name und Rang stehen. */
.wf-lc-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 76px);
  grid-auto-rows: minmax(96px, auto);
  gap: 12px;
  width: 340px;
}

/* Reflow (WCAG 1.4.10) auf schmalen Handys: das 340px breite Raster wuerde
   die Seite bei 320px (bzw. 200 % Zoom auf 640px) seitlich scrollbar machen.
   Es wird gleichmaessig verkleinert (Kacheln bleiben >= 44px breit), das
   Hinweisfeld gleicht den Faktor wieder aus und bleibt gut lesbar. */
@media (max-width: 371px) {
  .wf-lc-grid { zoom: 0.9; }
  .wf-lc-tip { zoom: 1.111; }
}
@media (max-width: 339px) {
  .wf-lc-grid { zoom: 0.84; }
  .wf-lc-tip { zoom: 1.19; }
}

.wf-lc-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.wf-lc-line {
  fill: none;
  stroke: var(--wf-border);
  stroke-width: 2;
}

.wf-lc-line[data-active] { stroke: var(--wf-quality-uncommon); }

.wf-lc-r0 { grid-row: 1; }
.wf-lc-r1 { grid-row: 2; }
.wf-lc-r2 { grid-row: 3; }
.wf-lc-r3 { grid-row: 4; }

.wf-lc-c0 { grid-column: 1; }
.wf-lc-c1 { grid-column: 2; }
.wf-lc-c2 { grid-column: 3; }
.wf-lc-c3 { grid-column: 4; }

.wf-lc-cell {
  position: relative;
  z-index: 1;
  display: flex;
  width: 76px;
  /* min-height statt height: mit groesserem Zeilen-/Buchstabenabstand
     (WCAG 1.4.12) waechst die Kachel, statt Text abzuschneiden. */
  min-height: 96px;
}

/* Die Kachel selbst ist der Plus-Link: Klick setzt einen Punkt. */
.wf-lc-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  width: 76px;
  min-height: 96px;
  flex: 1 1 auto;
  padding: 5px 3px 4px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-card);
  box-sizing: border-box;
  text-align: center;
  color: var(--wf-text);
}

.wf-lc-node:hover,
.wf-lc-node:focus-visible { border-color: var(--wf-accent); text-decoration: none; color: var(--wf-heading); }

.wf-lc-node__icon {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 2px;
  flex: none;
}

.wf-lc-node__name {
  font-size: 10px;
  line-height: 1.15;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.wf-lc-node__rank { margin-top: auto; }

.wf-lc-node__rank {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--wf-text-dim);
}

/* Gesperrte und noch nicht belegte Kacheln zeigen sich ueber die
   abgedunkelte Grafik (und die gestrichelte Kante bei "leer") - nicht mehr
   ueber Opazitaet: sie drueckte Name und Rang auf unter 3,7:1. Der Text
   bleibt in der Nebentextfarbe (>= 4,5:1), der Name der Kachel (aria-label)
   sagt "gerade nicht moeglich". */
.wf-lc-node[data-status="zu"] { color: var(--wf-text-dim); }
.wf-lc-node[data-status="zu"] .wf-lc-node__icon { filter: grayscale(1) brightness(0.6); }
.wf-lc-node[data-status="offen"] { color: var(--wf-text-dim); }
.wf-lc-node[data-status="offen"] .wf-lc-node__icon { filter: grayscale(0.55) brightness(0.85); }
.wf-lc-node[data-status="teil"] { border-color: var(--wf-quality-uncommon); }
.wf-lc-node[data-status="teil"] .wf-lc-node__rank { color: var(--wf-quality-uncommon); }
.wf-lc-node[data-status="voll"] { border-color: var(--wf-accent-gold); box-shadow: 0 0 6px var(--wf-gold-glow); }
.wf-lc-node[data-status="voll"] .wf-lc-node__rank { color: var(--wf-accent-gold); }

/* Plaetze, die Blizzard selbst noch leer laesst. */
.wf-lc-node[data-status="leer"] {
  border-style: dashed;
  color: var(--wf-text-dim);
  cursor: default;
}

.wf-lc-node[data-status="leer"] .wf-lc-node__icon { filter: grayscale(1) brightness(0.6); }
.wf-lc-node[data-status="leer"] .wf-lc-node__rank { display: none; }

.wf-lc-node__minus {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid var(--wf-border);
  border-radius: 50%;
  background: var(--wf-bg-header);
  color: var(--wf-text-dim);
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  z-index: 3;
}

.wf-lc-node__minus::after { content: ""; position: absolute; inset: -10px; }

.wf-lc-node__minus:hover,
.wf-lc-node__minus:focus-visible { color: var(--wf-heading); border-color: var(--wf-accent); text-decoration: none; }

/* Hinweisfeld: erscheint beim Zeigen und beim Tastaturfokus. Reines CSS,
   damit es ohne JavaScript funktioniert; fuer Vorlesesoftware haengt es
   ueber aria-describedby an der Kachel und bleibt deshalb im Baum stehen
   (visibility statt display:none waere sonst noetig - hier reicht die
   Positionierung ausserhalb des Sichtfelds nicht, weil der Kasten sichtbar
   werden soll). */
.wf-lc-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  width: 250px;
  max-width: 78vw;
  padding: var(--wf-sp-3);
  border: 1px solid var(--wf-gold-line);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-header);
  box-shadow: var(--wf-frame-shadow);
  font-size: var(--wf-fs-200);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
}

/* Jede Kachel ist ein eigener Stapelkontext (z-index: 1): ohne Anheben
   legten sich die spaeteren Kacheln ueber das Hinweisfeld der fruehen. */
.wf-lc-cell:hover,
.wf-lc-cell:focus-within { z-index: 5; }

.wf-lc-cell:hover .wf-lc-tip,
.wf-lc-cell:focus-within .wf-lc-tip {
  opacity: 1;
  visibility: visible;
}

/* WCAG 1.4.13: Der Mauszeiger darf in das Hinweisfeld wandern (es lag
   vorher mit pointer-events: none "unter" dem Zeiger und verschwand beim
   Hinueberfahren). Die unsichtbare Bruecke ueberspannt den 6px-Spalt. */
.wf-lc-cell:hover .wf-lc-tip,
.wf-lc-cell:focus-within .wf-lc-tip { pointer-events: auto; }

.wf-lc-tip::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.wf-lc-r3 .wf-lc-tip::before { top: auto; bottom: -8px; }

/* Escape schliesst das Feld (legacyrechner.js setzt die Klasse), bis der
   Zeiger oder der Fokus die Kachel verlaesst. */
.wf-lc-cell.is-dismissed .wf-lc-tip { opacity: 0; visibility: hidden; pointer-events: none; }

/* In der letzten Rasterreihe klappt der Kasten nach oben auf, damit er
   nicht unten aus dem Baum herausragt. */
.wf-lc-r3 .wf-lc-tip {
  top: auto;
  bottom: calc(100% + 6px);
}

/* Am linken und rechten Rand haengt der Kasten an der Kachelkante statt
   mittig. Sonst ragt er auch im unsichtbaren Zustand ueber den Bildschirm
   hinaus - `visibility: hidden` nimmt zwar die Sicht, nicht aber den Platz,
   und die Seite liesse sich auf dem Handy zur Seite schieben. */
.wf-lc-c0 .wf-lc-tip {
  left: 0;
  transform: none;
}

.wf-lc-c3 .wf-lc-tip {
  left: auto;
  right: 0;
  transform: none;
}

.wf-lc-tip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-sp-2);
  margin: 0 0 var(--wf-sp-2);
}

.wf-lc-tip__head strong { color: var(--wf-heading); }

.wf-lc-tip__effect {
  margin: 0 0 var(--wf-sp-2);
  color: var(--wf-text);
}

.wf-lc-tip__effect--leer { font-style: italic; color: var(--wf-text-dim); }

.wf-lc-tip__meta {
  margin: 0;
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
}

/* ============ Baum ohne veroeffentlichte Eintraege ============ */

.wf-lc-freeform {
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-card);
  padding: var(--wf-sp-4);
  width: 340px;
  max-width: 100%;
  box-sizing: border-box;
}

.wf-lc-freeform__note {
  margin: 0 0 var(--wf-sp-3);
  font-size: var(--wf-fs-200);
  color: var(--wf-text-dim);
}

.wf-lc-controls {
  display: flex;
  align-items: center;
  gap: var(--wf-sp-2);
}

.wf-lc-step {
  display: inline-block;
  width: 26px;
  height: 26px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-card);
  color: var(--wf-text);
  font-size: var(--wf-fs-400);
  line-height: 24px;
  text-align: center;
}

.wf-lc-step:hover,
.wf-lc-step:focus-visible { border-color: var(--wf-accent); color: var(--wf-heading); text-decoration: none; }

.wf-lc-step.is-off { opacity: 0.35; pointer-events: none; }

.wf-lc-rank {
  min-width: 2.6em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--wf-accent-gold);
}

/* ============ Listen unter den Baeumen ============ */

.wf-lc-kategorien {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-sp-2);
  list-style: none;
  padding: 0;
}

.wf-lc-kategorien li {
  padding: var(--wf-sp-2) var(--wf-sp-3);
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-card);
  font-size: var(--wf-fs-200);
}

.wf-lc-liste {
  max-width: 70ch;
  padding-left: var(--wf-sp-5);
}

.wf-lc-liste li { margin-bottom: var(--wf-sp-2); }

/* Die Quellen sind lange URLs ohne Leerzeichen - ohne Umbruchregel schieben
   sie auf schmalen Bildschirmen die ganze Seite zur Seite. */
.wf-sources__url { overflow-wrap: break-word; }