/* Supplementary visualisations — quiet, print-like scientific layout.
   Colour roles (topological / trivial / critical) are duplicated in js/plot.js
   as MV.palette; both must stay in sync. */

:root {
  --ink:        #1b1b1b;
  --muted:      #6a7178;
  --line:       #d6d9dc;
  --line-soft:  #e9ebed;
  --bg:         #ffffff;
  --bg-soft:    #f7f8f9;

  --topological:      #9d1b3c;
  --topological-soft: #f6e7eb;
  --trivial:          #55606a;
  --trivial-soft:     #eef0f1;
  --critical:         #b5670c;
  --critical-soft:    #fbf0e2;

  --curve-1: #2b5d9e;
  --curve-2: #d97a26;
  --curve-3: #3f7d54;

  --font-ui: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

/* Always reserve the vertical scrollbar. Canvas height follows canvas width,
   so a scrollbar that comes and going with the content height would change
   the width, which changes the height again — the panels would oscillate. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-y: scroll;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------------------------------------------------------------- header */

.site-header {
  border-bottom: 1px solid var(--line);
  padding: 26px 24px 0;
}

.site-header__inner { max-width: 1180px; margin: 0 auto; }

.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.subtitle {
  margin: 2px 0 0;
  font-size: 16px;
  color: var(--muted);
}

/* Mit sechs Reitern passt die Leiste auf schmalen Fenstern nicht mehr in
   eine Zeile. Sie bricht jetzt um, statt die Seite waagerecht zu verschieben;
   die Reiter bleiben dabei alle sichtbar und erreichbar. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 20px;
}

.tabs a {
  display: block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--bg-soft);
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.tabs a:hover { color: var(--ink); }

.tabs a[aria-selected="true"] {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 0 0 var(--bg);
}

.context-line {
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 10px 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.context-line b {
  color: var(--ink);
  font-weight: 600;
}

.context-line .sep { padding: 0 8px; color: var(--line); }

/* ------------------------------------------------------------------ main */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px 64px;
}

.tab-panel[hidden] { display: none; }

/* -------------------------------------------------------------- controls */

/* The controls stay pinned to the top of the viewport while the page is
   scrolled, so a slider can be dragged with the figures in view. */
.controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-soft);
  padding: 13px 15px 14px;
  margin: 0;
}

/* Nothing may show through the pinned bar as the page scrolls under it. */


.controls__wide {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
}

/* The explanatory note under the buttons is the least important line in the
   pinned bar; it wraps to its own row only when there is no space beside. */
.controls__wide .note {
  margin: 0;
  flex: 1 1 340px;
  font-size: 11.5px;
  line-height: 1.4;
}

.slider__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}

.slider__name { color: var(--ink); }
.slider__hint { color: var(--muted); font-size: 12px; }

.slider__value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  /* Zahl und Einheit gehoeren zusammen: "0,10 µs" darf nicht umbrechen. */
  white-space: nowrap;
}

input[type="range"] {
  width: 100%;
  margin: 4px 0 0;
  accent-color: var(--trivial);
  cursor: pointer;
}

.buttonrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.buttonrow__label {
  font-size: 13px;
  color: var(--muted);
  margin-right: 2px;
}

button {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}

button:hover { border-color: var(--muted); }

button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------------------------------------------------------------- panels */

.panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 900px) {
  .panels { grid-template-columns: minmax(0, 1fr); }
}

.panel {
  grid-column: span 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  padding: 14px 16px 0;
  min-width: 0;
}

.panel--wide { grid-column: 1 / -1; }

.panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.panel__lead {
  margin: 2px 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.panel__canvas {
  display: block;
  width: 100%;
  height: auto;
}

.panel__controls {
  border-top: 1px solid var(--line-soft);
  padding: 10px 0 2px;
}

/* ------------------------------------------------------------- read-outs */

.readout {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 22px;
}

.readout__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 18px;
}

.readout__item {
  border-left: 2px solid var(--line);
  padding-left: 10px;
}

.readout__key {
  font-size: 12px;
  color: var(--muted);
}

.readout__val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.status {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
}

.status--topological { color: var(--topological); border-color: var(--topological); background: var(--topological-soft); }
.status--trivial     { color: var(--trivial);     border-color: var(--trivial);     background: var(--trivial-soft); }
.status--critical    { color: var(--critical);    border-color: var(--critical);    background: var(--critical-soft); }

.note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ------------------------------------------------------------ info panel */

.info {
  border-top: 1px solid var(--line-soft);
  margin: 12px -16px 0;
  padding: 0 16px;
}

.info > summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 0;
  font-size: 13px;
  color: var(--muted);
  user-select: none;
}

.info > summary::-webkit-details-marker { display: none; }

.info > summary::before {
  content: "+";
  display: inline-block;
  width: 14px;
  font-family: var(--font-mono);
}

.info[open] > summary::before { content: "\2212"; }

.info > summary:hover { color: var(--ink); }

.info__body {
  border-top: 1px solid var(--line-soft);
  padding: 12px 0 14px;
  font-size: 13px;
}

.info__body h4 {
  margin: 14px 0 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.info__body h4:first-child { margin-top: 0; }

.info__body p { margin: 0 0 6px; }

.info__body ul {
  margin: 0 0 6px;
  padding-left: 18px;
}

.info__body li { margin-bottom: 2px; }

.eq {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-soft);
  border-left: 2px solid var(--line);
  padding: 6px 10px;
  margin: 6px 0;
  overflow-x: auto;
  white-space: pre;
}

code, .num {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-variant-numeric: tabular-nums;
}

.panel__status {
  margin: 0;
  padding: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
}

.panel__status:empty { display: none; }

/* Legend as a text line below the plot rather than a box inside it: a wide,
   flat panel has no free corner, and an overlaid box hides data. */
.legend-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 18px;
  font-size: 12px;
  color: var(--ink);
  padding: 6px 0 2px;
}

.legend-inline:empty { display: none; }

.legend-inline .lg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.legend-inline .lg::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 3px;
  background: var(--c);
}

.legend-inline .lg--dash::before {
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px);
}

.legend-inline .lg--dot::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
}

.legend-inline .lg--ring::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--c);
}

.legend-inline .lg--cross::before {
  width: 10px;
  height: 10px;
  background:
    linear-gradient(45deg, transparent 42%, var(--c) 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--c) 42% 58%, transparent 58%);
}

.legend-inline .lg--box::before {
  width: 16px;
  height: 10px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px var(--line);
}

footer.site-footer {
  border-top: 1px solid var(--line);
  padding: 16px 24px 40px;
  font-size: 12px;
  color: var(--muted);
}

.site-footer__inner { max-width: 1180px; margin: 0 auto; }

/* ------------------------------------------------- numeric result tables */

.panel__body { padding: 4px 0 2px; }

.numtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin: 6px 0 12px;
}

.numtable caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 0 5px;
}

.numtable th,
.numtable td {
  border-bottom: 1px solid var(--line-soft);
  padding: 4px 8px 4px 0;
  text-align: left;
  vertical-align: baseline;
}

/* Kein text-transform: uppercase. Es macht aus der Einheit "µeV" ein "MEV" --
   aus Mikro- wird Megaelektronenvolt. Eine Schriftauszeichnung darf keine
   Einheit veraendern. */
.numtable thead th {
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.03em;
}

.numtable td.num,
.numtable th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 14px;
}

.numtable tbody tr:last-child td { border-bottom: none; }

.matrix {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre;
  line-height: 1.45;
}

.callout {
  border: 1px solid var(--critical);
  border-left: 3px solid var(--critical);
  border-radius: 3px;
  background: var(--critical-soft);
  color: var(--ink);
  padding: 10px 14px;
  margin: 10px 0 0;
  font-size: 13px;
}

.callout b { color: var(--critical); }

/* ------------------------------------------------------- Leitsatz je Panel */

/* CLAUDE.md, Abschnitt 11: der Satz aus der Arbeit steht sichtbar ueber dem
   Bild, nicht im eingeklappten Info-Panel. Er ist die wichtigste Zeile des
   Panels und deshalb optisch vor der beschreibenden Zeile. */
.panel__quote {
  margin: 8px 0 2px;
  padding: 8px 0 8px 12px;
  border-left: 3px solid var(--topological);
  font-size: 13.5px;
  line-height: 1.5;
}

.panel__quote-text {
  color: var(--ink);
  font-style: italic;
}

.panel__quote-open {
  color: var(--critical);
  font-weight: 600;
}

.panel__quote-src {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-style: normal;
  color: var(--muted);
}

/* Ein Panel ohne Zitat faellt bewusst auf: es zeigt eine offene Stelle der
   Arbeit an und soll nicht wie eine gestaltete Randnotiz aussehen. */
.panel__quote:has(.panel__quote-open) {
  border-left-color: var(--critical);
  background: var(--critical-soft);
}

/* ------------------------------------------------- Vorfuehrung am Leitsatz */

/* Der Knopf steht in derselben Leiste wie der Satz, den er vorfuehrt, und die
   Ergebniszeile darunter. Gruen wie curve-3, aber die Farbe traegt nichts:
   die Beschriftung nennt Handlung und Abschnitt. */
.panel__demo {
  display: block;
  margin-top: 8px;
}

.demo-btn {
  font-size: 12.5px;
  padding: 5px 11px;
  border-color: var(--curve-3);
  color: var(--curve-3);
}

.demo-btn:hover:not(:disabled) {
  background: var(--curve-3);
  border-color: var(--curve-3);
  color: #fff;
}

.demo-btn[aria-pressed="true"] {
  background: var(--curve-3);
  border-color: var(--curve-3);
  color: #fff;
}

.demo-btn--locked,
.demo-btn:disabled {
  border-color: var(--critical);
  color: var(--critical);
  background: var(--critical-soft);
  cursor: not-allowed;
}

.demo-result {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-style: normal;
  color: var(--ink);
}

.demo-result--bad {
  color: var(--critical);
  font-weight: 600;
}

/* -------------------------------------------- Statusworte in Ergebnistabellen */

.verdict {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.verdict--topological { color: var(--topological); border-color: var(--topological); background: var(--topological-soft); }
.verdict--trivial     { color: var(--trivial);     border-color: var(--trivial);     background: var(--trivial-soft); }
.verdict--critical    { color: var(--critical);    border-color: var(--critical);    background: var(--critical-soft); }

.numtable__sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.numtable__binding { background: var(--critical-soft); }

/* Hervorhebung durch eine Vorfuehrung: zeigt, welche Zeile gerade gemeint
   ist. Bewusst keine der drei Zustandsfarben und kein zweiter Hintergrund,
   damit sie sich mit "bindend" vertraegt und nichts bewertet. */
.numtable__marked > td {
  border-top: 1px dashed var(--muted);
  border-bottom: 1px dashed var(--muted);
}

.numtable__marked > td:first-child { border-left: 1px dashed var(--muted); }
.numtable__marked > td:last-child  { border-right: 1px dashed var(--muted); }

.tag {
  display: inline-block;
  padding: 0 6px;
  border-radius: 2px;
  background: var(--critical);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  vertical-align: 1px;
}

/* ------------------------------------------------- Spaltenlayout je Reiter */

/* Regler links, Abbildungen rechts. Die linke Spalte bleibt beim Scrollen
   stehen, damit beim Ziehen eines Reglers die Grafik im Blick bleibt. Ist
   sie höher als das Fenster, scrollt sie für sich. */
.tab-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.tab-layout__controls {
  position: sticky;
  top: 0;
  align-self: start;
  z-index: 20;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--bg);
  padding: 10px 0;
}

.tab-layout__main { min-width: 0; }

/* Schmales Fenster: die Spalte klappt über die Abbildungen und steht dort
   wieder als waagerechtes Raster, weil eine einspaltige Liste über die
   volle Breite unnötig hoch würde. */
@media (max-width: 1000px) {
  .tab-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tab-layout__controls {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0 0 18px;
  }
  .controls {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 24px;
  }
}

/* ------------------------------------------- Paarauswahl und Matrizen (#tetron) */

.pairhost { margin: 2px 0 14px; }

.pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
}

.pairs__axis {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pairs__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  min-width: 5.6em;
}

.pairs__geo {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
}

/* Ein Chip je Paar. Ausprobierte Paare bleiben markiert — daran liest man ab,
   dass die sechs Paare auf drei Achsen fallen. */
.pairs__chip {
  font: inherit;
  font-size: 13px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}

.pairs__chip:hover { border-color: var(--muted); }

.pairs__chip.is-visited {
  color: var(--ink);
  border-color: var(--muted);
}

.pairs__chip.is-current {
  color: var(--topological);
  border-color: var(--topological);
  background: var(--topological-soft);
  font-weight: 600;
}

.pairs__count {
  margin: 9px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* Eine 2×2-Matrix in Klammern. */
.mat2 {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 2px 9px;
  margin: 0 2px;
}

.mat2::before,
.mat2::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  border: 1.4px solid var(--ink);
}

.mat2::before { left: 0; border-right: none; }
.mat2::after { right: 0; border-left: none; }

.mat2--ref::before,
.mat2--ref::after { border-color: var(--muted); }

.mat2__grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 12px;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-align: center;
}

.mat2--ref .mat2__grid { color: var(--muted); }

.sector {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 13px;
  margin: 0 0 12px;
  background: var(--bg-soft);
}

.sector__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 5px 0;
}

.sector__row + .sector__row { border-top: 1px solid var(--line-soft); }

.sector__lab { font-size: 12.5px; color: var(--ink); }
.sector__eq { font-size: 15px; color: var(--muted); }

.sector__dev {
  font-size: 12px;
  color: var(--muted);
  flex: 1 1 14em;
  min-width: 12em;
}

.cyclicrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 2px 0 10px;
}

.cyclichost { margin-bottom: 4px; }

/* Hinweis, dass eine Verdrahtung über Abb. 5.1 hinausgeht. Zurückhaltender
   als der Warnhinweis in Panel B: es ist kein Fehler, sondern eine Angabe
   über die Quelle. */
.callout--soft {
  border-color: var(--line);
  background: var(--bg-soft);
  color: var(--muted);
}

.callout--soft b { color: var(--critical); }

/* ------------------------------------------- drei Teilgrafiken nebeneinander */

/* Panel C des Auslese-Reiters: die drei Verfahren stehen nebeneinander, damit
   man sieht, dass sie gleichzeitig blind werden. Auf schmalen Fenstern
   untereinander. */
.triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 6px;
}

.triptych__cell { min-width: 0; }

.triptych__title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.triptych__sub {
  margin: 0 0 6px;
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 900px) {
  .triptych { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ #gatter */

/* Zwischenüberschrift in der Bedienspalte. Der Reiter hat drei Gruppen von
   Bedienelementen — Startzustand, Gatter, Protokoll —, die ohne Trennung
   ineinanderliefen. */
.controls__head {
  grid-column: 1 / -1;
  margin: 4px 0 -4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.controls__head:first-child { margin-top: 0; }

/* Die angewandte Gatterfolge. Sie steht bei den Knöpfen und nicht unter der
   Abbildung, weil sie zum Drücken gehört und nicht zum Bild. */
.gateseq {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 12.5px;
  color: var(--muted);
}

.gateseq__item {
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.gateseq__empty { font-style: italic; }

/* Die Gattertabelle steht unter Panel A und ist breit; auf schmalen Fenstern
   scrollt sie für sich, statt das Panel zu sprengen. */
.gatetable-host {
  margin-top: 12px;
  overflow-x: auto;
}

.gatetable { font-size: 12.5px; }
.gatetable .mat2 { padding: 2px 7px; }
.gatetable .mat2__grid { font-size: 12px; gap: 0 9px; }

/* Die Schritte eines Protokolls als Leiter. Der laufende Schritt ist
   markiert, damit die Kugeln darüber zuzuordnen sind. */
.ladder-host { margin: 12px 0 14px; }

.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.ladder__item {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--muted);
}

.ladder__item:last-child { border-bottom: none; }

.ladder__item.is-current {
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 500;
}

.ladder__n {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--muted);
}

.ladder__item.is-current .ladder__n { color: var(--topological); font-weight: 600; }

.ladder__r {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------- #pb-tetron */

/* Zwei Zellen statt drei — die beiden Objekte in Panel B und die beiden
   Achsen in Panel C. */
.triptych--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .triptych--two { grid-template-columns: 1fr; }
}

/* Was an welchem Draht gemessen wurde. Bewusst eine schlichte Liste und
   keine Tabelle mit Statusspalte: dieser Reiter urteilt nicht. */
.objlist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.objlist li {
  position: relative;
  margin: 0 0 7px;
  padding: 0 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}

.objlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 1px;
  background: var(--muted);
}

/* Hervorhebung durch die Vorfuehrung an Panel B: ein Rahmen, sonst nichts.
   Bewusst keine der drei Zustandsfarben — sie zeigt, welche Zeilen zu welchem
   Draht gehoeren, und faellt kein Urteil (CLAUDE.md, Abschnitt 13). */
.objlist li.is-marked {
  margin-left: -8px;
  padding-left: 24px;
  border: 1px dashed var(--muted);
  border-radius: 3px;
  background: var(--bg-soft);
}

.objlist li.is-marked::before { left: 8px; }

.materials-host { margin-top: 16px; }

/* ----------------------------------------------- Wiedergabeleiste (#gatter) */

/* Einzige Ausnahme vom Links-Layout (CLAUDE.md §12): eine Wiedergabeleiste
   sitzt direkt unter der Grafik, die sie abspielt — wie bei einem Player. */
.playbar {
  display: grid;
  gap: 10px;
  margin: 2px 0 14px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-soft);
}

.playbar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
}

.playbar .slider { margin: 0; }

/* „Läufe: n · Ziel erreicht: m" — zählt jeden Lauf einmal, sobald sein Ende
   angezeigt wurde. */
.counter {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.site-footer__credit { margin: 8px 0 0; }