/* Semantisches Differential: Gerüst und Arbeitsflächen.
   Farben, Abstände, Radien und Schrift kommen aus den --wa-* Tokens (theme.css bildet das
   Designsystem darauf ab). Eigene Tokens nur für Dinge, die Web Awesome nicht kennt.
   Regeln über das Designsystem hinaus (siehe SPEC.md, Abschnitt 7):
   - Pink flächig nur bei Hover, Fokus und während des Ziehens, nie für einen ausgewählten Zustand.
   - Ausgewählt und markiert ist Dunkelblau (--app-ergebnis).
   ------------------------------------------------------------------------ */

:root {
  --app-ergebnis: var(--headline-color);      /* Profillinie, markierte Punkte */
  --app-kern: var(--decoration-color);         /* Kreis mit dem Markennamen, Text schwarz (weiß auf Grün ist zu kontrastarm) */
  --app-band: var(--surface-dark-color);       /* Skalen-Vorschau in Schritt 2 */
  --app-auf-band: var(--color-white);
  --app-panel-breite: 24rem;
}

html, body { height: 100%; margin: 0; overflow: hidden; }

.material {
  font-family: var(--font-icons);
  font-feature-settings: "liga";
  font-size: 1.25em;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  vertical-align: middle;
}

/* Gerüst -------------------------------------------------------------- */

.app {
  display: grid;
  height: 100dvh;
  grid-template:
    "kopf    kopf"  auto
    "flaeche panel" minmax(0, 1fr)
    "fuss    fuss"  auto
    / minmax(0, 1fr) var(--app-panel-breite);
}

.app-kopf {
  grid-area: kopf;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--wa-space-l);
  padding: var(--wa-space-s) var(--wa-space-l);
  border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-default);
}
.app-titel { margin: 0; font-size: var(--wa-font-size-l); font-weight: var(--wa-font-weight-heading); }
.app-schritte { min-inline-size: 24rem; font-size: var(--wa-font-size-s); }

/* Alle Schritte gleich breit und zentriert. Web Awesome richtet den ersten Schritt links und den
   letzten rechts aus; dort ist jeweils eine Linienhälfte ausgeblendet, deshalb trifft ::part(connector)
   bei ihnen genau die sichtbare Hälfte. */
.app-schritte wa-step { flex: 1 1 0; }
.app-schritte wa-step::part(button) { align-items: center; text-align: center; }
.app-schritte wa-step:first-child::part(connector) {
  inset-inline-start: calc(50% + var(--marker-size) / 2 + var(--connector-gap));
}
.app-schritte wa-step:last-child::part(connector) {
  inset-inline-end: calc(50% + var(--marker-size) / 2 + var(--connector-gap));
}
.app-aktionen { justify-content: flex-end; }
/* Die Icon-Schrift ist dünn (wght 200), deshalb die Symbole der Kopfleiste größer und in voller Textfarbe. */
.app-aktionen wa-button::part(button) { color: var(--wa-color-text-normal); }
.app-aktionen wa-button .material { font-size: var(--wa-font-size-2xl); }

.app-flaeche {
  grid-area: flaeche;
  position: relative;
  overflow: auto;
  background: var(--wa-color-surface-lowered);
}

.app-panel {
  grid-area: panel;
  overflow-y: auto;
  padding: var(--wa-space-l);
  border-left: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-default);
}
.app-panel h2 { margin: 0; font-size: var(--wa-font-size-m); }
.app-panel p { margin: 0; }
.panel-abschnitt + .panel-abschnitt {
  padding-top: var(--wa-space-l);
  border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}
.hinweis { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }

.app-fuss {
  grid-area: fuss;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-m);
  padding: var(--wa-space-s) var(--wa-space-l);
  border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  background: var(--wa-color-surface-default);
}

/* Schritt 1: Kern, Kernzone, Sammelfläche ---------------------------- */

/* --r ist der Radius der Kernzone. Die Sammelfläche reicht bis 1,9 × --r (AUSSEN_RADIUS in zustand.js). */
.kreisflaeche {
  position: absolute;
  inset: 0;
  container-type: size;
  --r: calc(100cqmin / 3.8);
  user-select: none;
}

.ring, .kern, .begriff {
  position: absolute;
  left: calc(50% + var(--x, 0) * var(--r));
  top: calc(50% + var(--y, 0) * var(--r));
  transform: translate(-50%, -50%);
}

/* Kreise mit ausdrücklicher Breite und Höhe: Safari rechnet aspect-ratio bei Inhalt sonst zum Ei. */
.ring {
  width: calc(2 * var(--r));
  height: calc(2 * var(--r));
  border: var(--wa-border-width-m) dotted var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-circle);
  background: var(--wa-color-surface-default);
  transition: background-color var(--wa-transition-fast);
}
.kreisflaeche.ziel-kernzone .ring { background: var(--wa-color-brand-fill-quiet); }

/* Radius des Kerns: KERN_RADIUS in zustand.js */
.kern {
  display: grid;
  width: calc(0.6 * var(--r));
  height: calc(0.6 * var(--r));
  place-items: center;
  padding: var(--wa-space-xs);
  border-radius: var(--wa-border-radius-circle);
  background: var(--app-kern);
  font-weight: var(--wa-font-weight-heading);
  line-height: var(--wa-line-height-condensed);
  text-align: center;
  hyphens: auto;
  overflow-wrap: break-word;
}

.begriff {
  z-index: 1;
  padding: var(--wa-space-2xs) var(--wa-space-s);
  border: none;
  border-bottom: var(--border-width-accent) solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-s) var(--wa-border-radius-s) 0 0;
  background: var(--wa-color-surface-raised);
  box-shadow: var(--wa-shadow-s);
  color: var(--wa-color-text-quiet);
  font: inherit;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  transition: transform var(--wa-transition-fast), box-shadow var(--wa-transition-fast), border-color var(--wa-transition-fast);
}
.begriff.in-kernzone { border-bottom-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-text-normal); }
.begriff:hover, .begriff:focus-visible {
  z-index: 2;
  border-bottom-color: var(--wa-color-brand-fill-loud);
  transform: translate(-50%, -50%) rotate(2deg);
}
.begriff:focus-visible { outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); }
.begriff[aria-pressed="true"] {
  z-index: 2;
  outline: var(--wa-border-width-m) solid var(--app-ergebnis);
  outline-offset: var(--wa-space-3xs);
  font-weight: var(--wa-font-weight-semibold);
}
.begriff.zieht {
  z-index: 3;
  box-shadow: var(--wa-shadow-l);
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.02);
}
.begriff.abgewiesen { animation: wackeln var(--wa-transition-slow); }

@keyframes wackeln {
  20%, 60% { transform: translate(calc(-50% - var(--wa-space-xs)), -50%); }
  40%, 80% { transform: translate(calc(-50% + var(--wa-space-xs)), -50%); }
}

/* Kleine Auswahlknöpfe: Anregungen und Nachbarbegriffe */
/* Die Anregungen nehmen den ganzen Platz bis zum Ende des Panels; es scrollt nur das Panel, nicht die Liste. */
.knopfliste { margin: 0; padding: 0; list-style: none; }

/* Schritt 2: Paare ---------------------------------------------------- */

.seite {
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--wa-space-xl) var(--wa-space-l);
}
.seite h1 { margin: 0; font-size: var(--wa-font-size-xl); }

.paar::part(body) { display: flex; flex-direction: column; gap: var(--wa-space-m); }

/* Vorschau der Skala aus Schritt 3: Pol, fünf blasse Punkte, Pol oder Lücke */
.paar-vorschau {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--wa-space-l);
}

/* Die Vorschau steht als dunkles Band im Kopf der Karte (Band dunkel aus dem Designsystem).
   Der Gegenpol ist hier grün, weil Dunkelblau auf dem dunklen Grund nicht lesbar ist. */
.paar::part(header) {
  padding-block: var(--wa-space-l);
  border-bottom: none;
  background: var(--app-band);
}
.paar-vorschau { color: var(--app-auf-band); }
.paar-vorschau .paar-begriff, .paar-vorschau .paar-gegenpol, .paar-vorschau .paar-luecke { font-size: var(--wa-font-size-2xl); }
.paar-vorschau .punkte { opacity: 0.6; }
.paar-vorschau .punkt { border-color: var(--app-auf-band); background: transparent; }
.paar-vorschau .paar-gegenpol { color: var(--app-kern); }
.paar-vorschau .paar-luecke { border-color: var(--app-auf-band); color: var(--app-auf-band); }
.paar-vorschau > :first-child { justify-self: end; text-align: right; }
.paar-vorschau > :last-child { justify-self: start; }
/* Abstand so, dass die Punkte so weit auseinander stehen wie in Schritt 3 (dort steckt jeder in einem breiteren Label) */
.paar-vorschau .punkte { align-items: center; gap: var(--wa-space-xl); opacity: 0.5; }
.paar-begriff, .paar-gegenpol { margin: 0; font-size: var(--wa-font-size-l); font-weight: var(--wa-font-weight-body); }
.paar-gegenpol { color: var(--app-ergebnis); font-weight: var(--wa-font-weight-heading); }
.paar-luecke {
  padding: var(--wa-space-2xs) var(--wa-space-s);
  border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-loud);
  border-radius: var(--wa-border-radius-s);
  color: var(--wa-color-text-quiet);
}
.paar wa-radio-group::part(form-control-input) { flex-wrap: wrap; gap: var(--wa-space-xs); }
.paar-eigener { flex: 1 1 14rem; }

/* Schritt 3: Profil --------------------------------------------------- */

.profil { position: relative; }

.skala {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--wa-space-l);
  margin: 0;
  padding: var(--wa-space-s) 0;
  border: none;
}
.skala + .skala { border-top: var(--wa-border-width-m) dotted var(--wa-color-surface-border); }
.pol { font-size: var(--wa-font-size-l); }
.pol.links { text-align: right; }

.punkte { display: flex; gap: var(--wa-space-m); }
.punkte label { position: relative; display: grid; width: var(--wa-space-2xl); height: var(--wa-space-2xl); place-items: center; cursor: pointer; }
.punkte input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.punkt {
  width: var(--wa-space-l);
  height: var(--wa-space-l);
  border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud);
  border-radius: var(--wa-border-radius-circle);
  background: var(--wa-color-surface-default);
  transition: all var(--wa-transition-fast);
}
.mitte .punkt, .punkt.mitte { width: var(--wa-space-xl); height: var(--wa-space-xl); border-width: var(--wa-border-width-m); }
label:hover .punkt { border-color: var(--wa-color-brand-fill-loud); background: var(--wa-color-brand-fill-loud); }
input:focus-visible + .punkt { outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); }
input:checked + .punkt { border-color: var(--app-ergebnis); background: var(--app-ergebnis); }

.profillinie { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.profillinie polyline { fill: none; stroke: var(--app-ergebnis); stroke-width: 3; }