/* WHEN · nur der Akzent wird ueberschrieben, sonst nichts aus tokens.css.
   Bernstein, wie in der Spec (Teil-Artefakt, ein Akzent-Ton und leer). */
:root { --hue: 75; }

:root{

  --rib-h: 56px;      /* Hoehe des Bandes            */
  --loupe-h: 74px;    /* reservierter Slot ueber dem Band, damit nichts springt */
  --ico: 116px;       /* Piktogramm                  */
}
/* ---------------------------------------------------------------- Buehne */
.stage{
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
}

/* ------------------------------------------------------------- Das Objekt */
.subject{
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s4);
  min-height: 0;
  width: 100%;
}
.subject__ico{
  width: var(--ico); height: var(--ico);
  color: var(--ink);
  transition: color var(--d-mid) var(--ease);
}
.subject__ico svg{ width:100%; height:100%; display:block; }
.subject .prompt{ margin: 0; }

/* Reveal: das Objekt tritt zurueck, das Band bleibt sichtbar */
.app[data-phase="reveal"] .stage{ justify-content: flex-end; }
.app[data-phase="reveal"] .subject{ flex: 0 0 auto; gap: var(--s2); }
.app[data-phase="reveal"] .subject__ico{ width: 40px; height: 40px; color: var(--ink-3); }
.app[data-phase="reveal"] .subject .prompt{ font-size: var(--t-md); font-weight: 600; }
/* Beim Reveal braucht der Slot ueber dem Band nur noch die Verdikt-Zeile. */
.app[data-phase="reveal"] .loupe,
.app[data-phase="reveal"] .verdictline{ height: 28px; }

/* ------------------------------------------------------------------ Band */
.ribbonwrap{ position: relative; flex: 0 0 auto; width: 100%; }

.ribbon{
  position: relative;
  padding-block: 12px;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  cursor: ew-resize;
  outline: none;
}
.ribbon:focus-visible .rib{ box-shadow: 0 0 0 2px var(--accent); }

.rib{
  position: relative;
  height: var(--rib-h);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-2);
  overflow: visible;
}
.rib__weave{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  clip-path: inset(0 round 7px);
}
.rib__weave .z0{ fill: var(--paper-2); }
.rib__weave .z1{ fill: var(--paper-3); }
.rib__weave .comb{ stroke: var(--ink-3); stroke-width: 1; opacity: .17; }
.rib__weave .seam{ stroke: var(--line-strong); stroke-width: 1; opacity: .8; }

/* Epochen-Namen: sechs stille Woerter, im Band, kein Fachbegriff */
.rib__names{ position:absolute; inset:0; pointer-events:none; }
.rib__names span{
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0; text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ---- Marken: Form unterscheidet, nicht nur Farbe ---------------------- */
.rib__mark{ position:absolute; top:-9px; bottom:-9px; width:0; z-index:3; pointer-events:none; }
.rib__mark::before{
  content:''; position:absolute; top:0; bottom:0; left:-1px;
  width:2px; border-radius:1px; background: currentColor;
}
.rib__mark i{ position:absolute; left:50%; transform: translateX(-50%); }

.rib__mark--pin{ color: var(--accent); }
.rib__mark--pin i{
  top:-6px; width:12px; height:12px; border-radius:4px;
  background: var(--accent); box-shadow: var(--shadow-1);
}
.rib__mark--truth{ color: var(--ink); z-index:4; }
.rib__mark--truth i{
  top:-8px; width:0; height:0;
  border-left:7px solid transparent; border-right:7px solid transparent;
  border-top:9px solid var(--ink);
}
.rib__mark--near{ color: var(--ink-3); }
.rib__mark--near::before{
  background: none;
  border-left: 2px dotted currentColor; width:0;
}
.rib__mark--near i{
  bottom:-7px; width:8px; height:8px; border-radius:50%;
  border:2px solid var(--ink-3); background: var(--paper);
}

/* ---- Die Luecke: der vorzeichenbehaftete Fehler ----------------------- */
.rib__gap{
  position:absolute; top:0; bottom:0; z-index:2; pointer-events:none;
  color: var(--ink-2); opacity:.34;
  background-image: repeating-linear-gradient(var(--hatch,45deg),
    transparent 0 4px, currentColor 4px 5px);
  border-left:1px solid currentColor; border-right:1px solid currentColor;
}

/* ---- Jahres-Marken unter dem Band: drei, mehr nicht ------------------- */
.footrow{ position: relative; height: 13px; margin-top: 3px; }
/* --ink-3 traegt auf Papier nur 3.2:1 und faellt bei 9-11 px durch (gemessen,
   hell wie dunkel). Wo der Text ORIENTIERUNG oder einen BELEG traegt, steht
   hier --ink-2 (6.8:1 hell / 7.4:1 dunkel). Das Token selbst liegt im
   geteilten Ordner und wird nicht angefasst. */
.years, .nearlabel{
  position: absolute; inset: 0;
  font-size: var(--t-micro); font-weight: 500;
  color: var(--ink-2);
}
/* Nur die drei Marken selbst, nicht die data-l-Sprachspans darin (#724): sonst
   kollabiert die rechte Marke auf 0 px und «heute» laeuft ueber die Kante. */
.years > span{ position:absolute; top:0; white-space:nowrap; }
.years__a{ left:0; }
.years__b{ left:16%; transform: translateX(-50%); }
.years__c{ right:0; }
/* Auf schmalen Schirmen kollidiert «AD 1» mit «3000 BC»: eine Zeile tiefer (#721) */
@media (max-width: 440px){ .years .years__b{ top: 1.3em; } }

.nearlabel{ font-weight: 700; }
.nearlabel span{
  position:absolute; top:0; white-space:nowrap; transform: translateX(-50%);
  letter-spacing: 0; font-size: var(--t-micro);
}

/* ---- Die Wolke der Mitspieler, auf DEMSELBEN Band --------------------
   Bewusst NICHT G.drawDistribution: das zeichnet auf einer log-Achse, und
   Jahreszahlen haben keine sinnvollen Verhaeltnisse. Hier liegt die Dichte
   ueber genau der x-Abbildung des Bandes, mit seiner Stauchung. Sie waechst
   von der Grundlinie zum Band hin, damit der Gipfel auf das Band zeigt. */
.crowd{ margin-top: 4px; }
.crowd__svg{ width:100%; height:26px; display:block; }
.crowd__area{ fill: var(--accent-soft); stroke: var(--accent-line); stroke-width:1; }
.crowd__base{ stroke: var(--line); stroke-width:1; }
.crowd__truth{ stroke: var(--ink); stroke-width:1; }
.crowd__mine{ stroke: var(--accent); stroke-width:1.5; stroke-dasharray:3 2.5; }
/* Pflicht: die Wolke ist simuliert, und das steht unter ihr. */
.crowd .dist__note{ text-align:center; margin-top:2px; color: var(--ink-2); }

/* ---------------------------------------------------------------- Lupe */
.loupe{
  position: relative;
  height: var(--loupe-h);
  opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease),
              visibility 0s linear var(--d-fast);
}
.loupe[data-on]{ opacity:1; visibility:visible; transform:none; transition-delay: 0s; }
.loupe__card{
  position:absolute; top:0; bottom:10px; left:0; width:212px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.loupe__year{
  position:absolute; inset: 9px 0 auto 0; text-align:center;
  font-size: var(--t-lg); font-weight: 700; letter-spacing: var(--tight);
  font-variant-numeric: tabular-nums; color: var(--ink);
  line-height: 1;
}
.loupe__ticks{ position:absolute; inset: auto 0 19px 0; height: 9px; }
.loupe__ticks i{
  position:absolute; bottom:0; width:1px; height:5px; background: var(--line-strong);
}
.loupe__ticks i[data-big]{ height:9px; }
.loupe__span{
  position:absolute; inset: auto 11px 4px 11px;
  display:flex; justify-content:space-between;
  font-size: var(--t-micro); font-weight:500; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space:nowrap;
}
.loupe__mid{
  position:absolute; left:50%; top:31px; bottom:17px; width:2px;
  margin-left:-1px; border-radius:1px; background: var(--accent);
}
/* Der Zapfen verbindet die Lupe mit dem Pin: zwei Dreiecke, damit die
   Kontur des Kaertchens durchlaeuft und die Verbindung sichtbar ist. */
.loupe__tail{
  position:absolute; bottom:0; width:0; height:0;
  transform: translateX(-50%);
  border-left:9px solid transparent; border-right:9px solid transparent;
  border-top:11px solid var(--line);
}
.loupe__tail::after{
  content:''; position:absolute; left:-8px; top:-12px; width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-top:10px solid var(--paper);
}

/* Verdikt ueber dem Band, im Lupen-Slot (der ist beim Reveal frei) */
.verdictline{
  position: absolute; left:0; right:0; top:0;
  height: var(--loupe-h); pointer-events:none; z-index:5;
}
.verdictline b{
  position: absolute; bottom: 4px; transform: translateX(-50%);
  font-size: var(--t-xs); font-weight:600; letter-spacing:0;
  color: var(--ink); background: var(--paper); padding: 2px 7px;
  border-radius: var(--r-full);
  white-space:nowrap;
}

/* Erster Hinweis ohne Worte: ein Schimmer laeuft einmal ueber das Band */
.rib.is-hint::after{
  content:''; position:absolute; inset:0; border-radius:7px; pointer-events:none;
  background: linear-gradient(90deg, transparent 40%, var(--accent-line) 50%, transparent 60%);
  opacity:.55; animation: sweep 4s var(--ease) 3 forwards;
}
@keyframes sweep{
  0%   { transform: translateX(-100%); }
  35%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ---------------------------------------------------------------- Dock */
/* Zwei Wege auf denselben Pin. Die Geste traegt das Bild, die getippte
   Jahreszahl ist der Praezisions-Weg -- erlaubt, weil es nur EINEN Schuss
   gibt und ohne zweiten Versuch keine Binaersuche entsteht. */
.dock__row{
  display:flex; align-items:center; justify-content:center;
  gap: var(--s3); min-height: 42px;
  /* Deutsch (#724): «Tipp heute gebraucht» + «Jahr v./n. Chr.» sind zusammen
     breiter als 342 px. Statt dass beide Pillen innen umbrechen, bricht die
     Zeile: eine Pille pro Zeile, beide ganz. Auf Englisch bleibt es eine Zeile. */
  flex-wrap: wrap;
}
.dock__row > *{ flex: 0 0 auto; white-space: nowrap; }
.dock__row:empty{ display:none; }
.numfield{ padding-block: 6px; }
.numfield__in{ width:7ch; min-width:7ch; max-width:12ch; }

/* Der Tipp-Kasten sitzt beim Objekt, nicht im Dock: dort schaut der Spieler hin. */
.subject .hint{ margin:0; max-width: 30ch; text-align:center; }

/* Ruecksage-Zeile. Hiess frueher .hint -- der Name gehoert jetzt dem Tipp-Kasten. */
.say{
  min-height: 16px; text-align:center;
  font-size: var(--t-xs); color: var(--ink-2);
}
.streak{
  display:inline-flex; align-items:center; gap:4px;
  font-weight:700; color: var(--accent);
}
.streak::before{
  content:''; width:5px; height:5px; border-radius:50%; background: var(--accent);
}

/* ---------------------------------------------------------------- Sheet
   Die Hoehe kommt zur Laufzeit aus fitStage (gemessen, damit das Band nie
   verdeckt wird); hier steht nur der Notnagel fuer den Moment vor der Messung. */
.sheet{ max-height: 74dvh; overflow-y: auto; padding-bottom: 0; }

/* Klebender Fuss. Das Polster, das sonst am Sheet haengt, sitzt hier -- so
   liegt der Knopf immer auf Papier und der Text laeuft weich darunter aus. */
.sheet__foot{
  position: sticky; bottom: 0; z-index: 2;
  margin: var(--s3) calc(-1 * var(--s4)) 0;
  padding: var(--s2) var(--s4) max(var(--s4), env(safe-area-inset-bottom));
  background: var(--paper);
}
.sheet__foot::before{
  content:''; position:absolute; left:0; right:0; top: calc(-1 * var(--s5)); height: var(--s5);
  background: linear-gradient(to top, var(--paper), transparent);
  pointer-events:none;
}
/* Der Beleg-Satz darf die volle Breite nehmen. Auf 358 px sind 40ch eine
   schmale Saeule, die eine Zeile mehr kostet, als das Sheet hergibt. */
.sheet__fact{ max-width: none; margin-bottom: var(--s3); }

/* Die eine grosse Zahl des Reveals. Bei WHEN ist das der vorzeichenbehaftete
   Abstand in JAHREN, nicht ein Faktor: Jahreszahlen haben keine sinnvollen
   Verhaeltnisse (1850 gegen 1900 waere "1,03x daneben", also Unsinn). Die
   FORM ist die der Familie, die Fuellung ist die ehrliche Waehrung. */
.factor{ margin-bottom: var(--s3); flex-wrap: wrap; row-gap: 0; }
.factor__dir{ color: var(--ink-2); }
.factor--spot .factor__dir{ color: var(--good); }

.scoreline{ display:flex; align-items:center; gap: var(--s3); margin-bottom: var(--s2); }
.blocks{ display:flex; gap:3px; flex: 1 1 auto; min-width: 96px; }
.blocks i{
  flex:1 1 0; height:14px; border-radius:2px;
  background: var(--paper-3);
}
.blocks i[data-on]{ background: var(--accent); }
/* Der Rang sagt, wie gut der Zug FUER DIESE EPOCHE war -- 40 Jahre daneben
   sind beim iPhone schlecht und bei der Pyramide ein Volltreffer. Der Jahres-
   Abstand allein kann das nicht sagen, darum stehen beide nebeneinander. */
.grade{ flex: 0 0 auto; margin: 0; font-size: var(--t-md); font-weight:400; color: var(--ink-2); white-space:nowrap; }
.beat{ margin: 0 0 var(--s3); }
.hr{ border:0; border-top:1px solid var(--line); margin: 0 0 var(--s3); }
.truthline{ margin: 0 0 var(--s2); }
.truthline b{ display:block; font-weight:500; }
.anchor{
  margin: 0 0 var(--s3);
  font-size: var(--t-sm); font-weight:500; color: var(--ink-2);
}
/* Der Rechenweg: wie man selbst draufgekommen waere. Der wichtigste Block. */
.napkin{ margin-top: 0; }
.napkin__label{ color: var(--ink-2); }
.sheet__next{ display:block; width:100%; margin-top: 0; }

/* ------------------------------------------------------------ Tag zu */
.done{
  flex: 1 1 auto; width:100%; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--s5); text-align:center;
}
.clockblock{ display:flex; flex-direction:column; align-items:center; gap: var(--s2); }
.clockline{
  display:flex; flex-direction:column; align-items:center;
  margin:0; gap: 2px;
}
.clockline__a{
  font-size: var(--t-md); font-weight:600; color: var(--ink-2);
  letter-spacing: var(--tight);
}
.clockline .mega{ line-height: 1; }
.clockline__b{
  font-size: var(--t-lg); font-weight:700; color: var(--ink);
  letter-spacing: var(--tight);
}
.clockline__a:empty, .clockline__b:empty{ display:none; }
.clock{
  margin:0; max-width: 30ch;
  font-size: var(--t-sm); font-weight:600; color: var(--ink-2);
  text-wrap: balance;
}

/* Alle fuenf Runden auf einen Blick: was es war, wie gut fuer die Epoche,
   und wie viele Jahre daneben mit Richtung. */
.summary{ max-width: 340px; }
.srow{ text-align:left; padding: 10px 0; }
.srow__what{ font-size: var(--t-sm); color: var(--ink-2); line-height:1.25; }
.srow__bar{ display:flex; gap:2px; width:104px; margin-top:7px; }
.srow__bar i{ flex:1 1 0; height:6px; border-radius:2px; background: var(--paper-3); }
.srow__bar i[data-on]{ background: var(--accent); }
.srow__f{ font-size: var(--t-sm); }

.shareblock{ display:flex; flex-direction:column; align-items:center; gap: var(--s2); }
.shareblock .say{ min-height: 14px; }

/* -------------------------------------------------- kurze Buehne (620px) */
@media (max-height: 700px){
  :root{ --ico: 72px; --loupe-h: 66px; }
  .done{ gap: var(--s4); }
}
@media (max-height: 620px){
  :root{ --ico: 56px; --loupe-h: 60px; --rib-h: 46px; }
  .done{ gap: var(--s3); }
  .srow{ padding: 7px 0; }
  .srow__bar{ margin-top: 4px; }
  .crowd__svg{ height: 20px; }
  .sheet{ max-height: 66dvh; padding-top: var(--s4); }
  .factor{ font-size: var(--t-lg); margin-bottom: var(--s2); }
  .beat{ margin-bottom: var(--s3); }
  .sheet__fact{ font-size: var(--t-xs); line-height: 1.45; margin-bottom: var(--s3); }
  .hr, .anchor{ margin-bottom: var(--s3); }
  .truthline{ margin-bottom: var(--s2); }
  .truthline b{ font-size: var(--t-md); }
  .napkin{ padding: var(--s2) var(--s3); font-size: var(--t-xs); line-height:1.5; }
  .sheet__next{ margin-top: var(--s3); }
  .sheet__src{ margin-top: var(--s3); }
  /* Auf der kurzen Buehne bleibt der Name, das Piktogramm geht. */
  .app[data-phase="reveal"] .subject__ico{ display:none; }
  /* Der Tipp-Kasten darf die kurze Buehne nicht sprengen. */
  .subject .hint{ padding: var(--s2) var(--s3); font-size: var(--t-xs); }
}