/* ERZEUGT aus @plait/design-tokens · plaitDark — nicht von Hand ändern.
 * Quelle: platform/packages/design-tokens/src/sets/plait.ts */
:root {
  --plait-color-accent-muted: #6f7a84;
  --plait-color-accent: #8a9199;
  --plait-color-bg: #060606;
  --plait-color-border: #2a2a2a;
  --plait-color-danger: #ff4d4f;
  --plait-color-focus: #9aa3ad;
  --plait-color-icon-code: #4fc3b0;
  --plait-color-icon-data: #b18cf0;
  --plait-color-icon-folder: #e0b04a;
  --plait-color-icon-image: #6fbf73;
  --plait-color-icon-neutral: #6b6b6b;
  --plait-color-icon-system: #98a3b3;
  --plait-color-icon-text: #7fa8d4;
  --plait-color-info: #a487e6;
  --plait-color-monogram-gradient-1: #0a53ff;
  --plait-color-monogram-gradient-2: #0869ff;
  --plait-color-monogram-gradient-3: #00b8f4;
  --plait-color-monogram-gradient-4: #24d2ff;
  --plait-color-ok: #39c46a;
  --plait-color-on-accent: #0c0c0c;
  --plait-color-surface-elevated: #1a1a1a;
  --plait-color-surface: #111111;
  --plait-color-text-muted: #737373;
  --plait-color-text: #d4d4d4;
  --plait-color-tile-bevel-shade: rgba(0,0,0,.72);
  --plait-color-tile-border: rgba(255,255,255,.085);
  --plait-color-tile-gradient-1: #151515;
  --plait-color-tile-gradient-2: #050505;
  --plait-color-tile-gradient-3: #010101;
  --plait-color-warn: #ffb020;
  --plait-control-gap: 12px;
  --plait-control-height: 34px;
  --plait-control-radius: 8px;
  --plait-mark-glow-core-mix: 20%;
  --plait-mark-glow-core-width: 3px;
  --plait-mark-glow-intensity: 1;
  --plait-mark-glow-inward-from: 14%;
  --plait-mark-glow-inward-to: 0%;
  --plait-mark-glow-outward: 10%;
  --plait-mark-glow-scope: block;
  --plait-opacity-disabled: 0.5;
  --plait-opacity-veil-from: 22%;
  --plait-opacity-veil-to: 0%;
  --plait-radius-lg: 14px;
  --plait-radius-md: 10px;
  --plait-radius-sm: 6px;
  --plait-radius-xl: 18px;
  --plait-size-icon: 18px;
  --plait-space-lg: 24px;
  --plait-space-md: 16px;
  --plait-space-sm: 8px;
  --plait-space-tabs-content: 8px;
  --plait-space-tabs-stack: 12px;
  --plait-space-xl: 32px;
  --plait-space-xs: 4px;
  --plait-touch-gap: 8px;
  --plait-touch-min: 48px;
  --plait-type-body-line-height: 1.45;
  --plait-type-body-size: 0.9375rem;
  --plait-type-body-weight: 400;
  --plait-type-caption-size: 0.75rem;
  --plait-type-label-size: 0.8125rem;
  --plait-type-label-weight: 600;
  --plait-type-mono-family: ui-monospace, monospace;
  --plait-type-title-size: 1.125rem;
  --plait-type-title-weight: 700;
  --plait-type-tracking-label: 0.2em;
  --plait-type-ui-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* inspect-probe — die öffentliche Sondenseite.
 *
 * 🔴 KEIN Farb-, Abstands- oder Radiuswert steht in dieser Datei. Alles kommt
 * aus `--plait-*`, und die Variablen erzeugt api/tokens-css.ts aus
 * @plait/design-tokens. Die erste Fassung hatte einen eigenen `:root`-Block
 * mit neun erfundenen Farben (#0b0d10, #4da3ff …) — die Seite sah aus wie ein
 * fremdes Produkt, das zufällig auf derselben Domain liegt.
 *
 * Die zweite Regel: die Knöpfe sind Nachbauten, weil eine statische Seite
 * ohne React @plait/ui-web nicht laden kann. Sie nehmen deshalb dessen
 * Tokens, damit der Nachbau nicht in eine eigene Richtung driftet — ein
 * Nachbau mit eigenen Maßen ist keine Annäherung, sondern ein zweites Design.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--plait-space-md);
  background: var(--plait-color-bg);
  color: var(--plait-color-text);
  font-family: var(--plait-type-ui-family);
  font-size: var(--plait-type-body-size);
  line-height: var(--plait-type-body-line-height);
}

.page { max-width: 60rem; margin: 0 auto; }

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
h1 {
  font-size: var(--plait-type-title-size);
  margin: 0 0 var(--plait-space-xs);
  font-weight: var(--plait-type-title-weight);
}
.sub {
  color: var(--plait-color-text-muted);
  margin: 0 0 var(--plait-space-lg);
}

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */
/* Zwei Reihen mit eigener Überschrift statt sieben Knöpfen in einem Block.
 * Im Screenshot des Owners war nicht erkennbar, welche eine Systemabfrage
 * auslösen und welche nur die Seite bedienen — sie unterschieden sich nur in
 * Füllfarbe und Symbol. */
.group { margin-bottom: var(--plait-space-lg); }
.group__label {
  color: var(--plait-color-text-muted);
  font-size: var(--plait-type-label-size);
  font-weight: var(--plait-type-label-weight);
  text-transform: uppercase;
  letter-spacing: var(--plait-type-tracking-label);
  margin-bottom: var(--plait-space-sm);
}
/* ── Zeilen ───────────────────────────────────────────────────────────────
 * 🔴 Ein Knopf je Zeile, und KEINE flaechige Akzentfuellung mehr.
 * `--plait-color-accent` ist ein gedaempftes Grau (#8a9199) — als Fuellung
 * ueber eine ganze Zeile gelegt liest es sich wie "deaktiviert", und genau so
 * sah die Seite im Screenshot des Owners aus: vier ausgegraute Kacheln, in
 * denen je ein schwarzer Kasten um die Breite kaempfte. Der Akzent ist eine
 * Farbe fuer KLEINE Flaechen; hier traegt er die falsche Aussage.
 *
 * Stattdessen ein Listenzeilen-Muster: eine ruhige Karte, Symbol links,
 * Beschriftung und Zustand UNTEREINANDER, ein Punkt rechts. Damit gibt es
 * keinen Breitenwettbewerb mehr — "Kamera / Mikrofon" brach zweizeilig um,
 * WEIL der Zustandskasten daneben die halbe Zeile belegte.
 */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--plait-space-sm);
}
button.row {
  display: flex;
  align-items: center;
  gap: var(--plait-space-md);
  width: 100%;
  text-align: left;
  /* Ausdrueckliche Abweichung von der Kontrollhoehen-Invariante, wie der
   * Token-Kommentar sie erlaubt: eine Zeile mit zwei Textzeilen kann nicht
   * 34px hoch sein. min-height haelt die Untergrenze, damit die Zeilen
   * untereinander weiter dasselbe Raster haben. */
  min-height: var(--plait-control-height);
  padding: var(--plait-space-sm) var(--plait-space-md);
  border-radius: var(--plait-radius-md);
  border: 1px solid var(--plait-color-border);
  background: var(--plait-color-surface);
  color: var(--plait-color-text);
  font: inherit;
  font-size: var(--plait-type-body-size);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
button.row:hover { background: var(--plait-color-surface-elevated); }
button.row:active { border-color: var(--plait-color-accent); }
button.row:focus-visible { outline: 2px solid var(--plait-color-focus); outline-offset: 2px; }

/* 🔴 Echte PLAIT-Icons statt Emoji (Owner-Go 10.08., item 12) — vorher hatte
 * jedes Symbol seine eigene Emoji-Metrik, im Screenshot war das Telefon
 * sichtbar groesser als der Pfeil und die Textkante sprang von Zeile zu
 * Zeile. `api/icons-html.ts` setzt beim Laden der Seite ein `<svg
 * class="row__icon">` an die Stelle jedes `{{icon:ui.name}}`-Platzhalters,
 * `fill="currentColor"` gezeichnet aus @plait/design-tokens — dieselbe
 * Zusage, die --plait-size-icon fuer jedes Icon in PLAIT gibt: exakt eine
 * Groesse, unabhaengig davon, was es zeichnet. */
.row__icon {
  flex: 0 0 var(--plait-size-icon);
  width: var(--plait-size-icon);
  height: var(--plait-size-icon);
  color: var(--plait-color-text);
}
.row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.row__label { font-weight: var(--plait-type-label-weight); }
/* Der Zustand als leise Unterzeile statt als Kasten: er gehoert zur Zeile,
 * konkurriert aber nicht mit ihr. */
.row__state {
  font-size: var(--plait-type-caption-size);
  color: var(--plait-color-text-muted);
  overflow-wrap: anywhere;
}
.row__state.ok { color: var(--plait-color-ok); }
.row__state.missing { color: var(--plait-color-danger); }
.row__state.poor { color: var(--plait-color-warn); }

/* Der Punkt sagt dasselbe in ueberfliegbarer Form. Er ist REDUNDANT zur
 * Unterzeile, nie die einzige Quelle — eine Aussage, die nur in einer Farbe
 * steckt, ist fuer Farbenblinde keine. */
.row__dot {
  flex: 0 0 auto;
  /* --plait-space-sm als DURCHMESSER: semantisch eine Dehnung (es ist ein
   * Abstands-Token), aber die Alternative waere eine erfundene Zahl, und
   * genau die soll diese Datei nicht enthalten. */
  width: var(--plait-space-sm); height: var(--plait-space-sm);
  border-radius: 50%;
  background: var(--plait-color-text-muted);
}
.row__dot.ok { background: var(--plait-color-ok); }
.row__dot.missing { background: var(--plait-color-danger); }
.row__dot.poor { background: var(--plait-color-warn); }

.row__go { flex: 0 0 auto; color: var(--plait-color-text-muted); }

/* ── Zustand + Bilanz ─────────────────────────────────────────────────────── */
.status {
  color: var(--plait-color-text-muted);
  margin-bottom: var(--plait-space-md);
}
/* Die Bilanz war im Screenshot eine umbrechende Textzeile ("… 78 eingeschränkt
 * ✕" / "25 fehlt"). Drei gleich breite Kacheln brechen nicht mehr um und
 * lassen sich auf einen Blick vergleichen. */
.tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--plait-space-sm);
  margin-bottom: var(--plait-space-md);
}
.tile {
  background: var(--plait-color-surface);
  border: 1px solid var(--plait-color-border);
  border-radius: var(--plait-radius-md);
  padding: var(--plait-space-sm);
  text-align: center;
}
.tile__n { font-size: var(--plait-type-title-size); font-weight: var(--plait-type-title-weight); line-height: 1.2; }
.tile__l { color: var(--plait-color-text-muted); font-size: var(--plait-type-caption-size); }

.panel {
  background: var(--plait-color-surface);
  border: 1px solid var(--plait-color-border);
  border-radius: var(--plait-radius-md);
  padding: var(--plait-space-md);
  margin-bottom: var(--plait-space-md);
}

/* item 11: die Standbild-Vorschau. Der Hinweis steht ÜBER dem Bild, nicht
 * darunter — wer eine Kamera-Aufnahme sieht, soll die Grenze lesen, BEVOR er
 * das Bild selbst ansieht, nicht danach. */
.snapshot__note {
  margin: 0 0 var(--plait-space-sm);
  color: var(--plait-color-ok);
  font-size: var(--plait-type-caption-size);
}
.snapshot__img {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  border-radius: var(--plait-radius-md);
  margin-bottom: var(--plait-space-md);
}

/* ── Tabelle ──────────────────────────────────────────────────────────────── */
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--plait-color-surface);
  border: 1px solid var(--plait-color-border);
  border-radius: var(--plait-radius-md);
  overflow: hidden;
}
/* 🔴 Feste Spaltenbreiten, und die linke ist BREITER als vorher (32 %).
 * Im Screenshot brach "resourceTiming" mitten im Wort zu "resourceTimi/ng" —
 * die Schlüssel sind lange zusammengesetzte Namen ohne Trennstellen, und
 * overflow-wrap:anywhere schneidet sie irgendwo. Jetzt: mehr Platz UND ein
 * Bruch nur, wenn es wirklich nicht reicht. */
col.k { width: 38%; }
col.m { width: 3rem; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--plait-space-xs) var(--plait-space-sm);
  border-bottom: 1px solid var(--plait-color-border);
}
thead th {
  background: var(--plait-color-surface-elevated);
  color: var(--plait-color-text-muted);
  font-size: var(--plait-type-label-size);
  font-weight: var(--plait-type-label-weight);
  text-transform: none;
  letter-spacing: 0;
  position: sticky;
  top: 0;
}
tr.sec td {
  background: var(--plait-color-surface-elevated);
  color: var(--plait-color-text);
  font-weight: var(--plait-type-label-weight);
  font-size: var(--plait-type-label-size);
  text-transform: none;
  letter-spacing: 0;
}
/* Die Gruppen-Erklärung stand im Screenshot als dritte GROSSBUCHSTABEN-Zeile
 * in derselben Zelle und war länger als die Überschrift selbst. */
tr.sec .sec__note {
  display: block;
  font-weight: 400;
  color: var(--plait-color-text-muted);
  margin-top: var(--plait-space-xs);
}
td.k { color: var(--plait-color-text-muted); overflow-wrap: break-word; }
td.v {
  font-family: var(--plait-type-mono-family);
  font-size: var(--plait-type-caption-size);
  overflow-wrap: anywhere;
}
td.m { text-align: center; font-weight: 700; }

.ok { color: var(--plait-color-ok); }
.poor { color: var(--plait-color-warn); }
.missing { color: var(--plait-color-danger); }

footer {
  margin-top: var(--plait-space-xl);
  color: var(--plait-color-text-muted);
  font-size: var(--plait-type-caption-size);
}

/* Am Telefon ist die Bilanz dreispaltig zu eng, sobald eine Zahl vierstellig
 * wird — dann untereinander statt abgeschnitten. */
@media (max-width: 20rem) {
  .tally { grid-template-columns: 1fr; }
}