/* Play patterns — der Laufzettel.
 *
 * Diese Seite ist nicht das Ergebnis, sondern das **Protokoll eines
 * Durchlaufs**. Das ist keine Verkleidung, sondern die Arithmetik selbst: Die
 * Vorher-Quote wird nacheinander mit drei Faktoren multipliziert — Historie,
 * Uhr, Züge —, und was herauskommt, ist die Summe.
 *
 * Der Aufbau zeigt das in drei Auflösungen:
 *   1. **Die Summe** als Hufeisen — ein Kreis, unten offen, der von unten
 *      links nach unten rechts voller wird. Daneben das Wort, das sie
 *      einordnet, und der Satz mit den echten Quoten.
 *   2. **Die drei Ebenen** als Leisten, die sich füllen. Voller und mint
 *      spricht für das Konto, leerer und coral nährt den Zweifel.
 *   3. **Die elf Messungen**, aus denen zwei der Ebenen bestehen, in zwei
 *      Spalten nebeneinander. Dort — und nur dort — gilt die feine Lesart:
 *      Band ist die Vergleichsgruppe, Punkt ist dieses Konto, links ist
 *      gewöhnlich und rechts auffällig.
 *
 * Die drei Auflösungen sehen bewusst verschieden aus. Bis zum 13. August 2026
 * trugen Ebene und Messung dieselbe Achse — damit sah eine Zusammenfassung aus
 * wie eines ihrer Teile.
 *
 * Der Fortschritt liegt *im* Dokument, an der Stelle, an der später die Summe
 * steht: Die Seite springt beim Ergebnis nicht um, sie füllt sich.
 *
 * Farben kommen ausschließlich aus tokens.css.
 */

.trustPage {
  /* Die Leiter reicht bis --fs-mega (40px) und ist für die eine Zeile des Hubs
     gebaut. Die Zahl im Hufeisen braucht einen Schritt darüber — hier, und
     nirgends sonst. Sie muss zusätzlich in den Ring passen, deshalb kein
     Riesenwert: Der Ring ist ihre Fassung, nicht ihr Rahmen. */
  --fs-total: clamp(46px, 5vw, 70px);
  /* Die Achse und die Ablesung einer Messzeile. */
  --axis-w: 168px;
  --read-w: 15ch;
}

#trustMain {
  max-width: 1120px;
  margin: 0 auto;
  padding: 7vh 24px 72px;
}
/* Beim Fragen ist die Fläche schmal, beim Antworten breit — wie in der Review.
   Ein Formular mit einem Feld braucht keine tausend Pixel. */
.trustPage:has(#trustEntry:not(.hidden)) #trustMain { max-width: 640px; }

/* ============================== DIE FRAGE ============================== */

.entry {
  background: var(--indigo-950);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-xs);
  padding: var(--sp-9);
}
.entry h2 {
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.3px;
  margin-bottom: var(--sp-3);
}
.entryLead {
  color: var(--text-dim);
  font-size: var(--fs-lead);
  line-height: 1.55;
  margin-bottom: var(--sp-7);
  max-width: 62ch;
}
#trustUser { font-family: inherit; }

/* Der Vorbehalt steht in der Karte, nicht am Fuß der Seite. Er ist keine
   Fußnote, sondern die Bedingung, unter der die Zahl zu lesen ist. */
.claim {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--panel-border);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-dim);
}
.entryFoot {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-dim);
  line-height: 1.5;
}
.entryFoot a { color: var(--text); }

#trustStatus { margin-top: var(--sp-4); font-size: var(--fs-base); line-height: 1.5; }
#trustStatus.error { color: var(--loss); }

/* Was der Lauf kostet, im selben leisen Register wie der Vorbehalt darunter –
   es ist eine Angabe, keine Warnung. */
.entryCost {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-dim);
  line-height: 1.5;
}

/* ============================ DER LAUFZETTEL ============================ */

.slip {
  background: var(--indigo-950);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-xs);
  padding: var(--sp-8) var(--sp-9);
}

.slipTop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--panel-border);
}
.slipStamp {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  min-width: 0;
}
.slipStamp #trustFor {
  color: var(--text);
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---- Der Lauf ---- */
.runline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5) var(--sp-6);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--panel-border);
}
.runNote {
  font-size: var(--fs-lead);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.runline > .bar { grid-column: 1 / -1; }
.slip .bar {
  height: 4px;
  background: var(--indigo-800);
  overflow: hidden;
}
.slip .bar > div { height: 100%; width: 0; background: var(--accent); }

/* ---- Die Summe: das Hufeisen ---- */
.total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-7) var(--sp-9);
  padding: var(--sp-8) 0;
  border-bottom: 2px solid var(--indigo-600);
}

/* Drei Viertel eines Kreises, unten offen. Die Öffnung ist der Grund, warum
   die Zahl hineinpasst, ohne dass der Ring sie einsperrt. */
.gauge {
  position: relative;
  flex: 0 0 auto;
  width: clamp(156px, 18vw, 196px);
  aspect-ratio: 1;
}
.gauge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gauge path {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
}
.gTrack { stroke: var(--indigo-800); }
/* Die Spanne liegt als breiterer Strich unter dem Wert und schaut damit
   beidseitig hervor – sichtbar nur auf Nachfrage. */
.gRange {
  stroke: var(--indigo-200);
  stroke-width: 23;
  opacity: 0;
}
.showSpread .gRange { opacity: .4; }
.gArc {
  stroke: var(--indigo-200);
  transition: stroke-dashoffset var(--mo-calm) var(--mo-ease);
}
.total[data-tone="low"] .gArc { stroke: var(--node-hole); }
.total[data-tone="high"] .gArc { stroke: var(--node-pulsar); }

/* Die Zahl sitzt im Hufeisen, nicht daneben. */
.gNum {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  align-items: baseline;
  align-content: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--fs-total);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.gOf {
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-dim);
}

.totalSide { flex: 1 1 22rem; min-width: 0; }
.totalLevel {
  font-size: var(--fs-display);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}
.total[data-tone="low"] .totalLevel { color: var(--node-hole); }
.total[data-tone="high"] .totalLevel { color: var(--node-pulsar); }
.totalSay {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: 62ch;
}
.totalRead {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* ---- Die Überschrift der Herleitung ---- */
.ledgerHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-7) 0 var(--sp-5);
}
.ledgerLegend {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 74ch;
}
.spreadNote {
  margin-bottom: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--indigo-900);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 78ch;
}

/* ---- Die drei Ebenen als Leisten ---- */
.layers {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--panel-border);
}
.layer { min-width: 0; }
.layerName {
  font-size: var(--fs-title);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}
/* Die Nummer trägt Information: Die Ebenen stehen in der Reihenfolge, in der
   gerechnet wird, und die Quote wird in dieser Reihenfolge fortgeschrieben. */
.layerNo {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* Feste Mindesthöhe für die Beschreibung: Die drei Leisten sind zum Vergleichen
   da, und drei Balken auf drei verschiedenen Höhen vergleicht niemand. */
.layerMeta {
  margin-top: 2px;
  min-height: 2.9em;
  font-size: var(--fs-small);
  color: var(--text-dim);
  line-height: 1.45;
}
.layerBar {
  height: 12px;
  margin-top: var(--sp-3);
  background: var(--indigo-900);
}
.layerBar i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: var(--indigo-200);
  transition: transform var(--mo-calm) var(--mo-ease);
}
.layer[data-tone="low"] .layerBar i { background: var(--node-hole); }
.layer[data-tone="high"] .layerBar i { background: var(--node-pulsar); }
.layerRead {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.layerRead b { color: var(--text); font-weight: 600; }
.layer[data-tone="low"] .layerWord { color: var(--node-hole); }
.layer[data-tone="high"] .layerWord { color: var(--node-pulsar); }

/* ---- Die beiden Kategorien, nebeneinander ---- */
.detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8) var(--sp-9);
  padding-top: var(--sp-7);
}
/* 901, nicht 900: Die Gegenrichtung der Bruchstelle liegt einen Pixel höher,
   sonst greifen bei genau 900 px beide Abfragen. Gemessen: zwei Spalten zu
   273 px in der Detailfläche, während die drei Ebenen darüber einspaltig
   blieben und die Ränder auf den Telefonwerten standen. Die Regel steht in
   tokens.css bei den Bruchstellen; review.css macht es mit 900/901 richtig. */
@media (min-width: 901px) {
  .detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Die Zeile richtet sich nach der Breite ihrer eigenen Spalte, nicht nach der
   des Fensters. Eine Medienabfrage kann das nicht: Dieselbe Spalte ist bei
   1900 px Fenster breit und bei 900 px schmal, und beides ist derselbe Punkt. */
.group { container-type: inline-size; min-width: 0; }
.groupName { font-size: var(--fs-title); font-weight: 600; }
.groupNote {
  margin: var(--sp-2) 0 var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-dim);
  line-height: 1.55;
}

/* ---- Die Messzeilen ---- */
.mRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-5);
  row-gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--rule-faint);
}
.mLbl { grid-column: 1; grid-row: 1; font-size: var(--fs-base); line-height: 1.4; }
.mRead { grid-column: 2; grid-row: 1; }
.mScale { grid-column: 1 / -1; grid-row: 2; }

@container (min-width: 520px) {
  .mRow {
    grid-template-columns: minmax(0, 1fr) var(--axis-w) var(--read-w);
    column-gap: var(--sp-6);
  }
  .mScale { grid-column: 2; grid-row: 1; }
  .mRead { grid-column: 3; grid-row: 1; }
}

.mFlag {
  margin-left: var(--sp-3);
  font-size: var(--fs-micro);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-xs);
  padding: 1px 5px;
  white-space: nowrap;
}
/* Die drei Zeilen, die nichts zur Zahl beitragen, stehen leiser da — aber sie
   stehen da. Eine still ausgelassene Messung liest sich wie eine bestandene. */
.mRow.context .mLbl { color: var(--text-dim); }

.mScale {
  position: relative;
  height: 16px;
  border-bottom: 1px solid var(--indigo-800);
}
.mTick { position: absolute; top: 8px; bottom: 0; width: 1px; background: var(--indigo-800); }
.mBand { position: absolute; top: 4px; bottom: 0; background: var(--indigo-800); }
.mRef { position: absolute; top: 2px; bottom: 0; width: 1px; background: var(--indigo-400); }
.mErr {
  position: absolute;
  top: 7px;
  height: 3px;
  background: var(--indigo-200);
  opacity: .5;
  display: none;
}
.showSpread .mErr { display: block; }
.mDot {
  position: absolute;
  top: 3px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--indigo-100);
}
.mDot[data-tone="against"] { background: var(--node-hole); }
.mDot[data-tone="favour"] { background: var(--node-pulsar); }

.mRead {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
  font-size: var(--fs-small);
}
.mWhere { color: var(--text-dim); }
.mRead[data-tone="against"] .mWhere { color: var(--node-hole); }
.mRead[data-tone="favour"] .mWhere { color: var(--node-pulsar); }
.mNums { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mRow.pending .mNums { font-style: italic; }

/* ---- Der Tiefenlauf, in der Spalte der Züge ---- */
.deepRow {
  margin-bottom: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--indigo-900);
}
.deepHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.deepRow .runNote { font-size: var(--fs-base); }
/* Steht der Lauf, gibt es nichts mehr zu füllen und nichts mehr zu stoppen. */
.deepRow.waiting > .bar,
.deepRow.waiting #trustDeepStop { display: none; }
.deepRow.waiting .deepHead { margin-bottom: 0; }
/* page.js setzt die Zeile direkt unter die Summe. Dort trennt sie nur die
   2-px-Linie der Summe vom Text; ohne diesen Abstand klebte sie daran. */
.total + .deepRow { margin-top: var(--sp-6); }

/* ---- Der Fuß ---- */
.slipFoot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 2px solid var(--indigo-600);
}
.notes:empty { display: none; }
.notes { margin-bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
/* Ein Vorbehalt ist kein Fehler. Er bekommt eine Kante, damit man ihn findet,
   und keine Fläche, damit er nicht wie eine Warnung schreit. */
.notes p {
  padding-left: var(--sp-6);
  border-left: 1px solid var(--gold-600);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 82ch;
}
.footClaim {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 82ch;
}
.trustActions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
}
#trustClearNote { font-size: var(--fs-small); color: var(--text-dim); }

/* Die Anleitung liegt unter der Karte und trägt dieselbe Fläche. */
.howCard { margin-top: var(--sp-6); }
.trustPage .howCard { width: 100%; }

/* ============================ SCHMALE SCHIRME ============================ */

@media (max-width: 900px) {
  #trustMain { padding: var(--sp-7) 14px 56px; }
  .slip { padding: var(--sp-6); }
  .entry { padding: var(--sp-6); }
  /* Drei Leisten nebeneinander sind auf dem Telefon drei Streifen. */
  .layers { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .layerMeta { min-height: 0; }
}

@media (max-width: 560px) {
  .slipTop { flex-direction: column; align-items: stretch; }
  .runline { grid-template-columns: minmax(0, 1fr); }
  .runline #trustStop { grid-column: 1; justify-self: start; }
  .total { gap: var(--sp-6); }
}

@media (pointer: coarse) {
  .ghostBtn.small { min-height: 44px; }
}

/* Der eine gestaltete Moment dieser Seite ist, wie der Bogen seine Länge
   findet, während die Ziffern hochzählen. Wer reduzierte Bewegung eingestellt
   hat, bekommt beides sofort — countTo hält sich in page.js an dieselbe Regel. */
@media (prefers-reduced-motion: reduce) {
  .gArc, .layerBar i { transition: none; }
}