/* Pruefstand 1.6.0 — nur Layout und Schriftrollen.
   Farben kommen ausschliesslich aus den mz-Tokens, damit der Theme-Wechsel
   auch dieses Blatt mitnimmt. */

:root {
  --mz-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mz-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bench-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.mz-title,
.mz-h2,
.mz-h3 {
  font-family: var(--bench-display);
  letter-spacing: -0.02em;
}

.mz-title { font-weight: 700; }

/* Kopf: Titelblock links, Werkzeuge rechts, Haarlinie darunter. */
.bench-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mz-border);
}

.bench-head__tools { margin: 0; }

.bench-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 4px;
}

/* Der Pruefstand: Quelle links, vier Fenster rechts. */
.bench-rack {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin: var(--mz-gap) 0;
}

@media (min-width: 1000px) {
  .bench-rack { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr); }
}

.bench-source {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 999px) {
  .bench-source { position: static; }
}

/* Der Wirt der Quelle. Bewusst ohne eigenen Rahmen: was hier drin steht,
   ist die Vorlage, und ein zusaetzlicher Rahmen waere im Filter zu sehen. */
.bench-specimen {
  background: var(--mz-surface);
  border-radius: var(--mz-radius-sm);
  padding: 4px;
}

.bench-specimen .mz-card { margin: 0; }
.bench-specimen .mz-grid { margin: 12px 0 0; }

#quelle-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mz-radius-sm);
}

.bench-source__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bench-source__foot .mz-small { margin: 0; }
.bench-source__foot .mz-controls { margin: 0; }

/* Vier Fenster auf dieselbe Quelle. */
.bench-windows {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.bench-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.bench-stage {
  margin: 0;
  min-height: 190px;
  padding: 0;
  background: var(--mz-surface-alt);
}

.bench-cell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bench-cell__head .mz-eyebrow { margin: 0; }

.bench-cell .mz-control { margin: 0; }

/* Die Schriftgroessen-Rampe: Rolle, Muster, gemessener Wert. */
.bench-ramp {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bench-ramp li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--mz-border-soft);
}

.bench-ramp li:last-child { border-bottom: 0; }

.bench-ramp span,
.bench-ramp em {
  font-family: var(--mz-mono);
  font-size: var(--mz-fs-xs);
  font-style: normal;
  color: var(--mz-text-muted);
}

.bench-ramp em { justify-self: end; }

.bench-ramp b {
  font-family: var(--bench-display);
  font-weight: 500;
  color: var(--mz-text-strong);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bench-ramp li[data-token="--mz-fs-xl"]   b { font-size: var(--mz-fs-xl); }
.bench-ramp li[data-token="--mz-fs-lg"]   b { font-size: var(--mz-fs-lg); }
.bench-ramp li[data-token="--mz-fs-md"]   b { font-size: var(--mz-fs-md); }
.bench-ramp li[data-token="--mz-fs-base"] b { font-size: var(--mz-fs-base); }
.bench-ramp li[data-token="--mz-fs-sm"]   b { font-size: var(--mz-fs-sm); }
.bench-ramp li[data-token="--mz-fs-xs"]   b { font-size: var(--mz-fs-xs); }
.bench-ramp li[data-token="--mz-fs-2xs"]  b { font-size: var(--mz-fs-2xs); }

/* Bento-Kacheln tragen ihren eigenen Innenabstand schon; nur die
   Kennzahlen darin sollen nicht auseinanderfallen. */
#bento .mz-kv { display: flex; justify-content: space-between; margin: 6px 0 0; }

.mz-footer { margin-top: 32px; }

/* Messwerte der Quelle: bewusst Monospace, damit rgba-Werte untereinander
   stehen und ein Sprung von Alpha 255 auf 0 auffaellt. */
.bench-diagnose {
  font-family: var(--mz-mono);
  color: var(--mz-text-muted);
  margin: 0;
}