/* ==========================================================================
   auswertung.css - Klassen fuer #/auswertung (js/ui/auswertung.js und
   js/ui/charts/{balken,donut,waage}.js). Ausschliesslich Tokens aus
   theme.css, keine Literalwerte. Mobile-first.
   ========================================================================== */

/* -- Score-Panel ----------------------------------------------------------- */

.auswertung__scorezeile {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.auswertung__scorehaupt {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.auswertung__scorewert {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-strong);
}

.auswertung__scorelabel {
  font-size: 1rem;
  color: var(--muted);
}

.auswertung__ausfuellgrad {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.95rem;
  color: var(--text-dim);
}

.auswertung__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.auswertung__tag--vorlaeufig {
  background: var(--warn-bg);
  color: var(--warn);
}

.auswertung__weiterlink {
  font-size: 0.9rem;
}

.auswertung__mittel {
  margin-top: var(--space-4);
  font-size: 0.92rem;
  color: var(--text-dim);
}

.auswertung__mittel small {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
}

.auswertung__einordnung {
  margin-top: var(--space-3);
  font-size: 0.9rem;
  color: var(--muted);
}

/* -- Grafik-Panels (gemeinsamer Rahmen fuer Balken/Donut/Waage) ------------ */

.auswertung__panelueberschrift {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--space-4);
}

/* -- Leerer Zustand ---------------------------------------------------------- */

.auswertung__leer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  color: var(--text-dim);
}

/* -- Fusszeile der Ansicht --------------------------------------------------- */

.auswertung__footerlinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   Balkenchart (charts/balken.js)
   ========================================================================== */

.balkenchart__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.balkenchart__ueberschrift {
  font-size: 0;
  /* Ueberschrift steckt bereits im umgebenden Panel (h2); dieser interne
     h3 bleibt nur fuer Screenreader-Struktur erhalten. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.balkenchart__sortbtn {
  font-size: 0.85rem;
}

.balkenchart__sortstatus {
  font-size: 0.78rem;
  color: var(--muted);
}

.balkenchart__liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.balkenchart__zeile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.balkenchart__zeile--klickbar {
  cursor: pointer;
  padding: var(--space-2);
  margin: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.balkenchart__zeile--klickbar:hover {
  background: var(--surface-alt);
}

.balkenchart__kopfzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.9rem;
}

.balkenchart__titel {
  color: var(--text);
}

.balkenchart__prozentzahl {
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

.balkenchart__track {
  height: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  overflow: hidden;
}

.balkenchart__fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--accent);
  transition: width var(--transition-slow);
}

.balkenchart__anzahl {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ==========================================================================
   Donutchart (charts/donut.js)
   ========================================================================== */

.donutchart {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Mobile-first: unter 480px zeigt der gestapelte Balken die Verteilung,
   der Donut ist zu klein, um lesbar zu bleiben. */
.donutchart__svgwrap {
  display: none;
}

.donutchart__balken {
  display: flex;
  width: 100%;
  height: 20px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-alt);
}

.donutchart__balkenteil {
  height: 100%;
  transition: width var(--transition-slow);
}

@media (min-width: 480px) {
  .donutchart__svgwrap {
    display: block;
    max-width: 220px;
    margin: 0 auto;
  }

  .donutchart__balken {
    display: none;
  }
}

.donutchart__svg {
  width: 100%;
  height: auto;
  display: block;
}

.donutchart__seg {
  fill: none;
  stroke-width: 16;
  stroke-linecap: butt;
  transition: stroke-dasharray var(--transition-slow), stroke-dashoffset var(--transition-slow);
}

.donutchart__seg--favorit,
.donutchart__balkenteil--favorit,
.donutchart__swatch--favorit {
  stroke: var(--ans-favorit);
  background: var(--ans-favorit);
}

.donutchart__seg--like,
.donutchart__balkenteil--like,
.donutchart__swatch--like {
  stroke: var(--ans-like);
  background: var(--ans-like);
}

.donutchart__seg--interessiert,
.donutchart__balkenteil--interessiert,
.donutchart__swatch--interessiert {
  stroke: var(--ans-interessiert);
  background: var(--ans-interessiert);
}

.donutchart__seg--vielleicht,
.donutchart__balkenteil--vielleicht,
.donutchart__swatch--vielleicht {
  stroke: var(--ans-vielleicht);
  background: var(--ans-vielleicht);
}

.donutchart__seg--nogo,
.donutchart__balkenteil--nogo,
.donutchart__swatch--nogo {
  stroke: var(--ans-nogo);
  background: var(--ans-nogo);
}

.donutchart__seg--offen,
.donutchart__balkenteil--offen,
.donutchart__swatch--offen {
  stroke: var(--ans-offen);
  background: var(--ans-offen);
}

.donutchart__legende {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.donutchart__legendeitem {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.88rem;
  color: var(--text-dim);
}

.donutchart__swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  flex: none;
}

/* ==========================================================================
   Waagechart (charts/waage.js)
   ========================================================================== */

.waagechart {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.waagechart__svg {
  width: 100%;
  height: auto;
  display: block;
}

.waagechart__balken {
  transition: width var(--transition-slow), x var(--transition-slow);
}

.waagechart__balken--aktiv {
  fill: var(--accent);
}

.waagechart__balken--passiv {
  fill: var(--ans-nogo);
}

.waagechart__achse {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.waagechart__legende {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 600;
}

.waagechart__label--passiv {
  color: var(--text-dim);
}

.waagechart__label--aktiv {
  color: var(--accent-strong);
}

.waagechart__basis {
  font-size: 0.82rem;
  color: var(--muted);
}

.waagechart__hinweis {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ==========================================================================
   Top-Listen (Favoriten / NoGos)
   ========================================================================== */

.topliste__ueberschrift {
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.topliste__liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.topliste__item {
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}

.topliste__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.topliste__titel {
  font-weight: 600;
}

.topliste__kategorie {
  font-size: 0.78rem;
  color: var(--muted);
}

.topliste__satz {
  margin-top: var(--space-1);
  font-size: 0.88rem;
  color: var(--text-dim);
}

.topliste__leer {
  margin-top: var(--space-3);
  font-size: 0.9rem;
  color: var(--muted);
}

/* ==========================================================================
   Reduced Motion - Balken-/Donut-/Waage-Animationen abschalten
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .balkenchart__fill,
  .donutchart__balkenteil,
  .donutchart__seg,
  .waagechart__balken {
    transition: none;
  }
}

/* ==========================================================================
   Responsive Feinschliff
   ========================================================================== */

@media (max-width: 600px) {
  .auswertung__scorewert {
    font-size: 2.1rem;
  }
}