/* ============================================================================
 * tc-facets — Facettenfilter
 * ============================================================================
 * Eine Leiste aus aufklappbaren Facetten plus die aktive Auswahl als
 * entfernbare Chips. Fuer Ansichten, die man aus mehreren Richtungen
 * gleichzeitig einschraenken will — Achievements nach Bereich UND Wertigkeit
 * UND Zeitraum, so wie man es aus Shop-Filtern kennt.
 *
 * WARUM NICHT WEITER PILLENREIHEN (20.08.2026, Tim: „Das sollte
 * multifacettiert filterbar sein."):
 * Das Achievement-Fenster trug vier Reihen Filterpillen uebereinander, alle
 * dauerhaft offen. Gemessen bei 1039x781: 182 px Leiste, danach war fuer die
 * Karten selbst noch 1,2 Reihen Platz. Jede neue Dimension machte es
 * schlimmer — und Filtern ist genau die Funktion, die mit der Zahl der
 * Dimensionen BESSER werden sollte, nicht schlechter.
 *
 * ⚠ DER ENTSCHEIDENDE UNTERSCHIED IST NICHT DIE HOEHE, SONDERN DASS DIE
 * LEISTE NICHT MEHR MITWAECHST. Eine Reihe Pillen kostet Platz pro Wert,
 * eine Facette kostet Platz pro DIMENSION — und ihre Werte liegen im Menue.
 * Deshalb aendert die sechste Facette nichts an der Hoehe.
 *
 * Verhalten: TC.Facets in js/tc-ui.js. Demonstriert in library-navigation.html.
 * ========================================================================= */

.tc-facets {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
}

.tc-facets__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2);
}

/* ----------------------------------------------------------------------------
   DIE FACETTE — Name und aktueller Wert stehen zusammen auf dem Knopf
   ----------------------------------------------------------------------------
   Beides sichtbar zu lassen ist der ganze Zweck: Eine Facettenleiste, die nur
   „Bereich" zeigt, zwingt zum Aufklappen, um den eigenen Filter zu lesen —
   dann kann man auch bei Pillenreihen bleiben.
   -------------------------------------------------------------------------- */
.tc-facet { position: relative; }

.tc-facet__knopf {
  display: inline-flex;
  align-items: baseline;
  gap: var(--tc-space-2);
  min-height: 36px;                /* Touch-Ziel (CLAUDE.md §3, Heuristik 5) */
  padding: var(--tc-space-2) var(--tc-space-3);
  background: var(--tc-bg-input);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-md);
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--tc-motion-fast),
              background var(--tc-motion-fast);
}

.tc-facet__knopf::after {
  content: '\25BE';                /* CSS-Escape statt Zeichen (CLAUDE.md §6) */
  margin-left: var(--tc-space-1);
  font-size: 0.7em;
  opacity: 0.7;
}

.tc-facet__knopf:hover { border-color: var(--tc-border-strong); }

.tc-facet__knopf:focus-visible {
  outline: none;
  border-color: var(--tc-accent);
  box-shadow: 0 0 0 3px var(--tc-accent-glow);
}

.tc-facet__name {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tc-text-muted);
}

.tc-facet__wert { font-weight: 600; color: var(--tc-text-strong); }

/* Eine Facette, die gerade einschraenkt, traegt den Akzent als RAND und
   Flaeche — nie als Schriftfarbe (CLAUDE.md §9, gemessen am 17.08.2026). */
.tc-facet.is-gesetzt .tc-facet__knopf {
  border-color: var(--tc-accent);
  background: rgba(var(--tc-accent-rgb), 0.12);
}

.tc-facet__knopf[aria-expanded="true"] { border-color: var(--tc-accent); }

/* ----------------------------------------------------------------------------
   DAS MENUE — fixed, nicht absolute
   ----------------------------------------------------------------------------
   ⚠ `.tc-modal__body` hat `overflow-y: auto`. Ein absolut positioniertes
   Menue wuerde dort am Rand abgeschnitten und beim Scrollen mitwandern —
   und die Facetten sitzen fast immer in genau so einem Behaelter.
   `position: fixed` steht ausserhalb dieses Clippings; die Koordinaten
   rechnet TC.Facets beim Oeffnen aus.

   ⚠ Der z-index bleibt bewusst klein: Das Menue ist ein NACHFAHRE seines
   Overlays und liegt damit in dessen Stapelkontext. Es konkurriert nur mit
   Geschwistern, nicht mit dem Modal selbst — ein Wettruesten auf 99999 waere
   genau die Sorte Zahl, die spaeter niemand mehr zurueckdrehen kann.
   -------------------------------------------------------------------------- */
.tc-facet__menu {
  position: fixed;
  z-index: var(--tc-z-popover);
  min-width: 200px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(60vh, 380px);
  overflow-y: auto;
  padding: var(--tc-space-2);
  background: var(--tc-bg-surface-2);
  border: 1px solid var(--tc-border-strong);
  border-radius: var(--tc-radius-md);
  box-shadow: var(--tc-shadow-lg);
}

.tc-facet__menu[hidden] { display: none; }

.tc-facet__opt {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  width: 100%;
  min-height: 36px;
  padding: var(--tc-space-2);
  background: none;
  border: none;
  border-radius: var(--tc-radius-sm);
  color: var(--tc-text-default);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  text-align: left;
  cursor: pointer;
}

.tc-facet__opt:hover { background: var(--tc-bg-surface-3); }

.tc-facet__opt:focus-visible {
  outline: none;
  background: var(--tc-bg-surface-3);
  box-shadow: inset 0 0 0 2px var(--tc-accent);
}

.tc-facet__opt.is-active {
  background: rgba(var(--tc-accent-rgb), 0.12);
  color: var(--tc-text-strong);
}

.tc-facet__opt-text { flex: 1 1 auto; }

.tc-facet__opt-zahl {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   EINFACH- ODER MEHRFACHAUSWAHL MUSS MAN VOR DEM KLICK SEHEN
   ----------------------------------------------------------------------------
   Die Lehre vom 20.08.2026 aus derselben Ansicht: Drei Zeilen sahen identisch
   aus und verhielten sich verschieden — die einen ERSETZTEN die Auswahl, die
   andere LEGTE DAZU. Das Kaestchen ist derselbe Unterschied, den Formulare
   seit jeher zwischen Kaestchen und Radioknopf machen, und es steht auch im
   nicht gewaehlten Zustand da; nur so verraet es die Auswahlart vorher.
   -------------------------------------------------------------------------- */
.tc-facet__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.66rem;
  line-height: 1;
  opacity: 0.5;
}

.tc-facet__opt.is-active .tc-facet__box { opacity: 1; }

/* Einfachauswahl bekommt einen Punkt statt eines Kaestchens — und nur, wenn
   sie gewaehlt ist. Ein leerer Kreis vor jeder Zeile waere ein Kaestchen mit
   anderer Ecke; der Unterschied muss deutlich sein, nicht dekorativ. */
.tc-facet__haken { flex: 0 0 auto; width: 14px; text-align: center; opacity: 0; }
.tc-facet__opt.is-active .tc-facet__haken { opacity: 1; }

/* ----------------------------------------------------------------------------
   DIE CHIPS — was gerade einschraenkt, und wie man es loswird
   ----------------------------------------------------------------------------
   Ohne sie muesste man jede Facette einzeln aufklappen, um zu sehen, warum
   nur noch fuenf Karten dastehen. Der Chip nennt die Facette mit, weil „Gold"
   allein nicht sagt, welche Dimension gemeint ist.
   -------------------------------------------------------------------------- */
.tc-facets__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tc-space-2);
}

.tc-facets__chips:empty { display: none; }

.tc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-space-1);
  min-height: 28px;
  padding: 2px 2px 2px var(--tc-space-3);
  background: rgba(var(--tc-accent-rgb), 0.12);
  border: 1px solid var(--tc-border-default);
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--tc-text-default);
}

.tc-chip__was {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tc-text-muted);
}

.tc-chip__weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--tc-text-muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.tc-chip__weg:hover { background: rgba(255, 255, 255, 0.1); color: var(--tc-text-strong); }

.tc-chip__weg:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tc-accent);
}

.tc-facets__reset {
  min-height: 36px;
  padding: var(--tc-space-2) var(--tc-space-3);
  background: none;
  border: none;
  color: var(--tc-text-muted);
  font-family: var(--tc-font-body);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}

.tc-facets__reset:hover { color: var(--tc-highlight); }

/* ----------------------------------------------------------------------------
   AM HANDY
   ----------------------------------------------------------------------------
   Die Facetten bleiben nebeneinander und brechen um — kein horizontales
   Scrollen. Das war Tims ausdrueckliche Beschwerde vom 16.08.2026, und sie
   gilt weiter: Was seitlich aus dem Bild laeuft, findet niemand.
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .tc-facet__knopf,
  .tc-facet__opt { min-height: var(--tc-touch-rec); }
  .tc-chip__weg { width: 32px; height: 32px; }
}

@media (max-width: 480px) {
  .tc-facet__knopf { flex: 1 1 auto; }
  .tc-facet__menu { max-width: calc(100vw - 16px); }
}

/* Reduced Motion: nur Dauern kappen, keinen Endzustand wegnehmen
   (CLAUDE.md §9 — `animation: none` verschluckt das Ergebnis mit). */
@media (prefers-reduced-motion: reduce) {
  .tc-facet__knopf { transition-duration: 0.01ms; }
}