/* ══ GENESIS — control.css · Szene 05 „Die Kontrolle" ══
   Das Protokoll schreibt sich selbst: Endlosdrucker-Papier (Traktor-
   Lochrand, zarte Belegbahnen), Zeilen tippen sich mit Block-Cursor,
   der Zähler zählt jede dokumentierte Entscheidung. Daneben die
   Siegel-Wand: fünf Grenzen, gestempelt wie im Zollamt. */

.ctl {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2.2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(3.2rem, 8vh, 5.5rem);
  max-width: 82rem;
}

/* ── Logbuch-Kopf ── */
.ctl__head {
  display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: space-between;
  font-size: var(--fs-micro);
  margin-bottom: .9rem;
}
.ctl__title { color: var(--fg); font-weight: 500; }
.ctl__sim { color: var(--brass); }

/* ── Endlosdrucker-Papier ── */
.ctl__paper {
  position: relative;
  background:
    /* Belegbahnen (zarte Messing-Waschung statt Green-Bar) */
    repeating-linear-gradient(180deg,
      transparent 0, transparent 2.68em,
      color-mix(in srgb, var(--brass-srf) 8%, transparent) 2.68em,
      color-mix(in srgb, var(--brass-srf) 8%, transparent) 5.36em),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 22px 54px rgba(27, 24, 19, .16), 0 3px 10px rgba(27, 24, 19, .08);
  transform: rotate(-.4deg);
  padding: 1.3rem 2.6rem;
  font-size: var(--fs-micro);
}
/* Traktor-Lochränder links + rechts */
.ctl__paper::before, .ctl__paper::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1.7rem;
  background-image: radial-gradient(circle, var(--bg) 2.4px, transparent 3.2px);
  background-size: 1.7rem 1.34rem;
  background-position: center .6rem;
  border-right: 1px dashed var(--line-soft);
}
.ctl__paper::before { left: 0; }
.ctl__paper::after  { right: 0; border-right: 0; border-left: 1px dashed var(--line-soft); }

/* ── Die Protokoll-Zeilen: neue unten, Papier schiebt nach oben ── */
.ctl__screen {
  display: flex; flex-direction: column; justify-content: flex-end;
  height: calc(9 * 2.68em);
  overflow: hidden;
}
.ctl__line {
  font-family: var(--f-mono); letter-spacing: .05em; text-transform: uppercase;
  line-height: 2.68em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  color: var(--fg-dim);
}
.ctl__line--lrn { color: var(--brass); }
.ctl__time { color: var(--brass); }

/* Zustands-Wort im Log — Punkt direkt nach dem letzten Buchstaben (Punkt-4-Signatur) */
.ctl__st { font-weight: 700; color: var(--stc, var(--fg)); }
.ctl__st i {
  display: inline-block; vertical-align: baseline;
  width: .45em; height: .45em; margin-left: .3em; border-radius: 50%;
  background: var(--stc, var(--fg));
}
.ctl__st--clear { --stc: var(--st-clear); }
.ctl__st--cpa   { --stc: var(--st-cpa); }
.ctl__st--dok   { --stc: var(--st-dok); }
.ctl__st--phy   { --stc: var(--st-phy); }
.ctl__st--xray  { --stc: var(--st-xray); }
.ctl__st--block { --stc: var(--st-block); }

/* Block-Cursor */
.ctl__cursor {
  display: inline-block; width: .62em; height: 1.1em;
  margin-left: .18em; vertical-align: text-bottom;
  background: var(--fg);
  animation: ctlBlink 1.05s steps(2, start) infinite;
}
@keyframes ctlBlink { 50% { opacity: 0; } }

/* ── Zähler: jede Zeile eine dokumentierte Entscheidung ── */
.ctl__count {
  display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-micro);
}
.ctl__count b {
  font-family: var(--f-disp); font-stretch: 124%; font-weight: 900;
  font-size: clamp(2.3rem, 4.6vw, 4.2rem); line-height: 1;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: var(--brass-disp);
}

/* ── Siegel-Wand: gestempelte Grenzen ── */
.ctl__seals { display: flex; flex-direction: column; gap: clamp(1.3rem, 3vh, 2rem); }
.seal {
  --rot: -1deg;
  position: relative;
  max-width: 34rem;
  padding: 1.05rem 1.3rem;
  border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  outline: 1px solid color-mix(in srgb, var(--brass) 26%, transparent);
  outline-offset: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  transform: rotate(var(--rot));
}
.seal:nth-child(2) { --rot: .8deg;  margin-left: clamp(0rem, 3vw, 2.6rem); }
.seal:nth-child(3) { --rot: -.5deg; }
.seal:nth-child(4) { --rot: .6deg;  margin-left: clamp(0rem, 2vw, 1.8rem); }
.seal:nth-child(5) { --rot: -.9deg; }
.seal__k { color: var(--brass); font-size: calc(var(--fs-mono) * 1.05); letter-spacing: .15em; }
.seal p { color: var(--fg-dim); font-size: .92rem; margin-top: .4rem; max-width: 46ch; }

/* Stempel-Reveal: schlägt auf, statt zu gleiten
   (Amplitude 1.12: bleibt auch bei 360px innerhalb des Viewports) */
.rv-init .seal { opacity: 0; transform: rotate(var(--rot)) scale(1.12); }
.rv-init .seal.in {
  opacity: 1; transform: rotate(var(--rot)) scale(1);
  transition: opacity .26s ease-out, transform .4s cubic-bezier(.2, 1.55, .36, 1);
  transition-delay: var(--d, 0s);
}

.ctl__foot { margin-top: clamp(2.4rem, 6vh, 4rem); font-size: var(--fs-micro); color: var(--fg-dim); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .ctl { grid-template-columns: minmax(0, 1fr); }  /* nowrap-Logzeilen dürfen den Track nicht sprengen */
  .seal { margin-left: 0 !important; }
}
@media (max-width: 560px) {
  .ctl__paper { padding: 1rem 1.9rem; }
  .ctl__paper::before, .ctl__paper::after { width: 1.2rem; background-size: 1.2rem 1.34rem; }
  .ctl__screen { height: calc(7 * 2.68em); }
}

/* ── Reduced Motion: fertiges Protokoll, ruhender Cursor ── */
@media (prefers-reduced-motion: reduce) {
  .ctl__cursor { animation: none; }
  .ctl__paper { transform: none; }
  .seal { transform: none; }
}