/* V07 – Satz von Steiner: Aufsicht-spezifisches Styling (Layout via spring_base.css). */

/* ── Farbidentität der beiden Zusatzkörper ──────────────────────────────
   Die zwei Gewichte sind Bauteile, keine Datenkanäle — ihre Farben sind
   deshalb Materialtöne (dunkles Teal, Ocker) und keine Chart-Tokens. Sie
   stehen hier EINMAL und werden überall referenziert: Gewicht auf dem
   Drehteller, Körperwahl, Standzeile über der Messtabelle und Chip im
   Regressionsmodal. Der „stark"-Ton ist derselbe Farbton, dunkel genug für
   weiße Schrift (der helle Ocker trägt sie nicht, Kontrast 3,0).
   Diese Datei wird nur für V07 geladen. */
:root {
  --koerper-homogen-rgb: 47, 111, 106;          /* #2f6f6a */
  --koerper-homogen-stark-rgb: 31, 75, 71;      /* #1f4b47 */
  --koerper-inhomogen-rgb: 192, 138, 62;        /* #c08a3e */
  --koerper-inhomogen-stark-rgb: 110, 71, 21;   /* #6e4715 */
}

/* Die Standzeile über der Messtabelle und der Chip im Regressionsmodal
   führen dieselben Farben. `pages/linearregression.css` wird NACH dieser
   Datei geladen und setzt dort teal/purple — deshalb ein Selektor mit
   `body` davor (0,2,1 gegen 0,2,0). */
body .series-state[data-serie-nr="0"],
body .series-state__andere[data-serie-nr="0"],
body .plot-series-label[data-serie-nr="0"] {
  --serie-rgb: var(--koerper-homogen-rgb);
  --serie-schrift-rgb: var(--koerper-homogen-stark-rgb);
}
body .series-state[data-serie-nr="1"],
body .series-state__andere[data-serie-nr="1"],
body .plot-series-label[data-serie-nr="1"] {
  --serie-rgb: var(--koerper-inhomogen-rgb);
  --serie-schrift-rgb: var(--koerper-inhomogen-stark-rgb);
}

/* ── Steuerleiste kompakt (exakt wie #pendel-controls beim phys. Pendel),
   damit Buttons + Stoppuhr + Schwingungszähler einzeilig nebeneinander passen ── */
#steiner-controls .exp-timer,
#steiner-controls .exp-oscillation-count {
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
}
#steiner-controls .exp-timer-value {
  font-size: 1rem;
}
#steiner-controls .exp-button-group {
  gap: 0.5rem;
}

/* ── Schritt-1-Leiste: Körper + Steckposition horizontal ── */
#steiner-bereich {
  display: flex;
  flex-direction: column;
}
#steiner-schritt1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--surface-border-light);
}
.steiner-control-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.steiner-group-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--textcolor-80contrast);
  white-space: nowrap;
}
.steiner-body-toggle,
.steiner-radius-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
.steiner-body-btn,
.steiner-radius-btn {
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  background: var(--surface-bg);
  color: var(--primary-color);
  min-width: 2.4rem;
}
.steiner-radius-btn.active {
  background: var(--primary-color);
  color: var(--neutrals-0);
  border-color: var(--primary-color);
}

/* Die Körperwahl trägt die Farbe IHRES Körpers auf dem Drehteller
   (Betreiber-Wunsch 04.09.2026): Wer den Knopf sieht, erkennt ohne Lesen,
   welches Gewicht steckt. Gefüllt wird mit dem kräftigen Ton — der helle
   Ocker des inhomogenen Körpers trägt keine weiße Schrift (Kontrast 3,0). */
.steiner-body-btn[data-body="homogen"] {
  border-color: rgba(var(--koerper-homogen-rgb), 0.55);
  color: rgb(var(--koerper-homogen-stark-rgb));
}
.steiner-body-btn[data-body="inhomogen"] {
  border-color: rgba(var(--koerper-inhomogen-rgb), 0.65);
  color: rgb(var(--koerper-inhomogen-stark-rgb));
}
.steiner-body-btn[data-body="homogen"].active {
  background: rgb(var(--koerper-homogen-stark-rgb));
  border-color: rgb(var(--koerper-homogen-stark-rgb));
  color: var(--neutrals-0);
}
.steiner-body-btn[data-body="inhomogen"].active {
  background: rgb(var(--koerper-inhomogen-stark-rgb));
  border-color: rgb(var(--koerper-inhomogen-stark-rgb));
  color: var(--neutrals-0);
}

/* ── SVG-Bühne ── */
.pendulum-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: var(--spacing-sm);
}
.steiner-view-badge {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--textcolor-50contrast);
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid var(--surface-border-light);
  border-radius: var(--radius-md);
  padding: 3px 8px;
}
#steiner-svg {
  width: 100%;
  height: auto;
  max-height: 480px;
}

/* Drehung GPU-kompositiert: Scheibe wird einmal gerastert und als Ebene gedreht,
   statt das komplexe SVG (Gradient/Spirale/Rillen) pro Frame neu zu zeichnen. */
#steiner-disc-group {
  transform-box: view-box;
  transform-origin: center;
  will-change: transform;
}

/* ── Drehteller-Elemente ── */
.steiner-groove {
  fill: none;
  stroke: rgba(0, 0, 0, 0.10);
  stroke-width: 1.5;
}
.steiner-hole {
  fill: #3b4048;
  stroke: #e5e7eb;
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill 0.15s ease;
}
.steiner-hole:hover { fill: #555c66; }
.steiner-hole.active {
  fill: rgb(var(--chart-orange-rgb));
  stroke: var(--neutrals-0);
}
.steiner-pointer {
  fill: rgb(var(--chart-orange-rgb));
  stroke: var(--neutrals-0);
  stroke-width: 1;
}
.steiner-spring {
  stroke: #d7dce3;
  stroke-width: 2.2;
  opacity: 0.9;
}

/* ── Zusatzgewicht: homogen vs. inhomogen ── */
.puck-homogen .ph-body { fill: rgb(var(--koerper-homogen-rgb)); stroke: rgb(var(--koerper-homogen-stark-rgb)); stroke-width: 2; }
.puck-homogen .ph-ring { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.5; }
.puck-homogen .ph-com  { fill: var(--neutrals-0); }

.puck-inhomogen .pi-body  { fill: rgb(var(--koerper-inhomogen-rgb)); stroke: rgb(var(--koerper-inhomogen-stark-rgb)); stroke-width: 2; }
.puck-inhomogen .pi-heavy { fill: rgb(var(--koerper-inhomogen-stark-rgb)); }
.puck-inhomogen .pi-com   { fill: var(--neutrals-0); }

/* Umschaltung homogen/inhomogen */
#steiner-weight-puck .puck-inhomogen { display: none; }
#steiner-weight-puck.inhomogen .puck-homogen { display: none; }
#steiner-weight-puck.inhomogen .puck-inhomogen { display: inline; }

/* ── Kompass-Teilkreis um die Drehscheibe ── */
/* Feste Strichteilung: fein (5°) hell, Dekaden (10°) dunkler, 0° (Ruhelage) am kräftigsten. */
.steiner-tick {
  stroke: var(--textcolor-10contrast);
  stroke-width: 1.2;
}
.steiner-tick--major {
  stroke: var(--textcolor-50contrast);
  stroke-width: 1.8;
}
.steiner-tick--zero {
  stroke: var(--textcolor-80contrast);
  stroke-width: 2.4;
}
.steiner-tick-label {
  fill: var(--textcolor-50contrast);
  font-size: 11px;
  font-weight: 600;
}
.steiner-tick-label--zero {
  fill: var(--textcolor-80contrast);
  font-weight: 700;
}
#steiner-ruhelage-label {
  fill: var(--textcolor-50contrast);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
/* Bewegliche Ziffern-Auslenkung in Zeiger-Orange. */
.steiner-angle-readout {
  fill: rgb(var(--chart-orange-rgb));
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* stabile Zifferbreite, kein Zappeln */
}