/*
 * Gemeinsame Grundlage beider Oberflaechen.
 *
 * Lag vorher als demo/styles.css im Verzeichnis einer der Anwendungen, und
 * die anderen beiden luden sie als Basis - mit dem Ergebnis, dass jede Seite
 * auch die Bauteile mitlud, die nur die Demo braucht, und dass das
 * Design-System keinen eigenen Ort hatte.
 *
 * Optik ist laut Aufgabenstellung zweitrangig; Ziel ist gute Ablesbarkeit der
 * Messwerte.
 */

:root {
  --bg: #14171c;
  --panel: #1c2027;
  --border: #2b313b;
  --text: #e6e9ee;
  --muted: #98a1ae;
  --accent: #4ade80;
  --accent-2: #60a5fa;
  --warn: #fbbf24;
  --error: #f87171;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss gewinnen, immer.
   Die Browservorgabe dafuer ist [hidden] { display: none } - aber die steht
   im Vorgabe-Stylesheet, und JEDE Regel aus diesem Projekt schlaegt sie.
   Weiter unten steht `canvas { display: block }`, in der Uebung
   `.griff { display: flex }`: Beide machen `el.hidden = true` wirkungslos,
   ohne dass irgendetwas auffaellt - das Attribut steht im DOM, die Abfrage
   `el.hidden` sagt true, und das Element ist trotzdem zu sehen. Gefunden an
   einer Uebung, die Griffbrett UND Klaviatur gleichzeitig zeigte und bei
   "nur Noten" beides behielt.
   !important ist hier kein Notnagel, sondern die Aussage: Sichtbarkeit wird
   im Javascript entschieden, nicht durch die Reihenfolge der Stylesheets.
   Wer ein verstecktes Element gestalten will, nimmt eine eigene Klasse. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 1.5rem;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

h1 { font-size: 1.25rem; margin: 0 0 0.75rem; }
h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em;
     color: var(--muted); margin: 0 0 0.75rem; font-weight: 600; }

header, main, footer, .shell-nav { max-width: 980px; margin: 0 auto; }
footer { margin-top: 1.5rem; }
a { color: var(--accent-2); }

/* --- Navigation -----------------------------------------------------------
   Vorher gab es drei: ein Hinweis im Kopf, ein Link mitten in einem
   Erklaerabsatz und eine Fusszeile. Kein gemeinsames Element, kein
   Aktiv-Zustand, und drei Bezeichnungen fuer zwei Werkzeuge. */
.shell-nav {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.shell-nav a {
  padding: 0.45rem 0.9rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.shell-nav a:hover { color: var(--text); }
.shell-nav a[aria-current='page'] {
  color: var(--text);
  border-bottom-color: var(--accent-2);
}

/* --- Bedienelemente ------------------------------------------------------- */
.controls { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.9rem;
  font: inherit;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.active { border-color: var(--error); color: var(--error); }
.btn--small { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
.btn--danger:hover:not(:disabled) { border-color: var(--error); color: var(--error); }

input[type="text"] {
  background: #0f1216; color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.85rem;
  min-width: 16rem;
}
.filebtn { display: inline-block; background: var(--panel); border: 1px solid var(--border);
           border-radius: 6px; padding: 0.5rem 0.9rem; font-size: 0.85rem; cursor: pointer; }
.filebtn:hover { border-color: var(--accent); color: var(--accent); }
.filebtn input { display: none; }
kbd { background: #0f1216; border: 1px solid var(--border); border-radius: 3px;
      padding: 0 0.3rem; font-size: 0.9em; }

/* --- Zustandsanzeige ------------------------------------------------------
   EINE Bedeutung je Farbe. Vorher hiess dasselbe Gruen in der Demo "Engine
   laeuft", im Aufnahmewerkzeug "Aufnahme laeuft" und im Studio "angemeldet" -
   drei Aussagen, ein Aussehen.

   Gruen heisst jetzt ausschliesslich: Audio laeuft. Eine laufende Aufnahme
   ist rot und pulsiert, weil sie etwas anderes ist als ein offenes Mikrofon.
   Die Anmeldung ist gar kein Zustand in diesem Sinne und bekommt einen
   neutralen Chip. */
.pill {
  font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--border); white-space: nowrap;
}
.pill--idle { color: var(--muted); }
.pill--busy { color: var(--warn); border-color: var(--warn); }
.pill--live { color: var(--accent); border-color: var(--accent); }
.pill--error { color: var(--error); border-color: var(--error); }
.pill--rec { color: var(--error); border-color: var(--error); }
.pill--rec::before {
  content: '●';
  margin-right: 0.35rem;
  animation: pulsieren 1.4s ease-in-out infinite;
}
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .pill--rec::before { animation: none; }
}

/* Wer angemeldet ist - eine Tatsache, kein Betriebszustand. */
.identity {
  font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
}

/* --- Meldungen ------------------------------------------------------------
   Vorher dreimal verschieden: einmal style.color direkt gesetzt, einmal ueber
   den Statustext, einmal eine eigene Funktion mit Inline-CSS. */
.notice { margin: 0.5rem 0 0; font-size: 0.85rem; }
.notice:empty { display: none; }
.notice--info { color: var(--muted); }
.notice--warn { color: var(--warn); }
.notice--error { color: var(--error); }

/* --- Bausteine ------------------------------------------------------------ */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.hint { font-size: 0.75rem; color: var(--muted); margin: 0.5rem 0 0; }
.muted { color: var(--muted); }
code { color: var(--accent-2); }

.toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem;
          color: var(--muted); cursor: pointer; }
.toggle input { accent-color: var(--accent); cursor: pointer; }

canvas {
  display: block;
  width: 100%;
  background: #0f1216;
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* --- Tabellen ------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table.notes { width: 100%; border-collapse: collapse; font-size: 0.8rem;
              font-variant-numeric: tabular-nums; }
table.notes th { text-align: right; color: var(--muted); font-weight: 600;
                 padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border);
                 white-space: nowrap; }
table.notes th:nth-child(3), table.notes th:last-child { text-align: left; }
table.notes td { text-align: right; padding: 0.25rem 0.5rem;
                 border-bottom: 1px solid #232830; white-space: nowrap; }
table.notes td:nth-child(3) { text-align: left; color: var(--accent); font-weight: 700; }
table.notes td:last-child { text-align: left; color: var(--muted); }
table.notes tr.fresh td { background: #1f2a24; }