/*
 * Bauteile, die nur das Analysewerkzeug braucht: Tonhoehenanzeige,
 * Cent-Nadel, Latenzkennzahlen, Phasenfarben.
 *
 * Alles Gemeinsame steht in apps/shared/base.css. Vorher lag beides hier,
 * mit der Folge, dass Aufnahmewerkzeug und Studio die Bauteile der Demo
 * mitluden und nie benutzten.
 */

/* --- Tonhöhen-Panel --- */
.panel--pitch { display: block; }
.pitch-readout { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; }
.note { font-size: 3.5rem; font-weight: 700; line-height: 1; min-width: 4.5ch; color: var(--accent); }
.note.is-silent { color: #4a5361; }
.pitch-numbers { font-size: 1.1rem; }
.pitch-numbers small { color: var(--muted); font-size: 0.7em; }
.pitch-numbers .muted { font-size: 0.85rem; }

.cents-meter { margin-top: 1rem; }
.cents-meter__scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); }
.cents-meter__track { position: relative; height: 14px; background: #0f1216;
                      border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.cents-meter__center { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--muted); }
.cents-meter__needle { position: absolute; top: 0; bottom: 0; width: 3px;
                       background: var(--accent); left: 50%; transition: left 60ms linear; }

/* --- Latenz-Kennzahlen --- */
.metrics { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.metric { display: flex; flex-direction: column; }
.metric__label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.metric__value { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.metric__unit { font-size: 0.7rem; color: var(--muted); }
.metric--warn .metric__value { color: var(--error); }

.verdict { display: block; margin-top: 0.35rem; font-weight: 600; }
.verdict.ok { color: var(--accent); }
.verdict.bad { color: var(--error); }

/* --- Phasen eines Tons (nur hier sichtbar) --- */
.phase-attack { color: var(--warn); }
.phase-sustain { color: var(--accent); }
.phase-release { color: var(--accent-2); }
.phase-silence { color: var(--muted); }

/* --- Proportionen der Messflächen ------------------------------------------
   Das Seitenverhältnis steht hier, nicht in den Puffergrößen. Zwei Gründe:

   1. Ein Canvas ohne CSS-Höhe leitet sie aus der Puffergröße ab – und die
      setzt setupCanvas() wiederum aus der gemessenen Höhe. Dieser Kreis hat
      sich aufgeschaukelt: gemessen wurde inklusive Rahmen, gesetzt wurde der
      Inhalt, und jede Runde kam zwei Pixel drauf.
   2. Eine feste Höhe wäre die falsche Korrektur. Sie würde die Flächen auf
      breiten Fenstern flach quetschen; vorher wuchsen sie mit der Breite mit.

   Die Werte sind die ursprünglichen Puffergrößen, das Bild sieht also aus
   wie zuvor – nur in der Auflösung des Bildschirms statt hochskaliert. */
#level-canvas     { aspect-ratio: 600 / 90;  height: auto; }
#spectrum-canvas  { aspect-ratio: 900 / 220; height: auto; }
#waterfall-canvas { aspect-ratio: 900 / 200; height: auto; }
#latency-canvas   { aspect-ratio: 900 / 140; height: auto; }