/* CROWD · Punktefeld statt Balken.
   Ueberschrieben wird aus tokens.css NUR --accent und --accent-ink. */

:root { --hue: 205; }

:root {

  /* spiel-eigene Groessen, keine Shell-Tokens */
  --cell: 26px;
  --gap:  7px;
  --field: calc(10 * var(--cell) + 9 * var(--gap));
}


/* ---- Wer ist dran: ein Punkt = du, neun Punkte = die Menge ------------- */
.who {
  flex: 0 0 auto;
  display: block; width: 26px; height: 26px;
  color: var(--ink-3);
  transition: color var(--d-mid) var(--ease);
}
.app[data-phase="answer"] .who { color: var(--accent); }
.app[data-phase="done"]   .who { display: none; }

/* ---- Die Frage: EINE ruhige Zeile -------------------------------------
   Abstand kommt aus dem Buehnen-gap, nicht aus dem h1-Standardrand --
   sonst rechnet die Reserve unter dem Sheet daran vorbei. */
.prompt {
  margin-block: 0;
  transition: font-size var(--d-mid) var(--ease), color var(--d-mid) var(--ease);
}
.app[data-phase="guess"] .prompt,
.app[data-phase="reveal"] .prompt {
  font-size: var(--t-md);
  font-weight: 550;
  color: var(--ink-2);
  max-width: 27ch;
}
/* Phase 2 (#724): die Zeile ist jetzt die Aufforderung («Wie viele der 1'147
   Befragten haben «In Ordnung» gesagt?»), die Frage selbst steht als kleine
   Zeile DARUEBER, als Kontext. base.css setzt <small> unter den Satz; hier
   kommt es zuerst, darum der Rand nach unten statt nach oben. */
.app[data-phase="guess"] .prompt small { margin: 0 0 var(--s1); }
/* Im Reveal traegt die Aufforderung allein (sie nennt die Option, die man
   in den Punkten liest). Die Frage darueber kostete bei zweizeiligen Fragen
   die Quellen-Zeile im Blatt (gemessen: «Quelle ›» halb abgeschnitten, DE). */
.app[data-phase="reveal"] .prompt small { display: none; }
.app[data-phase="done"] .prompt { display: none; }

/* ---- Phase 1 · deine Antwort ------------------------------------------
   Die Wahl ist markiert, nicht abgeschickt: sie bleibt aenderbar, bis
   "Continue" im Dock gedrueckt wird. Vorher war der erste Klick endgueltig,
   und bei drei aehnlich klingenden Optionen ist das ein Fehler, kein Tempo. */
.opts {
  display: none;
  width: 100%;
  max-width: var(--field);
  flex-direction: column;
  gap: var(--s2);
}
.app[data-phase="answer"] .opts { display: flex; }

.opt {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; min-height: var(--tap);
  padding: var(--s3) var(--s4);
  text-align: left;
  background: var(--paper-2);
  border: 0;
  border-radius: var(--r-md);
  font-size: var(--t-md); font-weight: 500; letter-spacing: -.01em;
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
}
.opt:active { transform: scale(.985); }
.opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt__dot {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  border: 1.75px solid var(--line-strong); background: transparent;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
}
.opt[data-pick] { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.opt[data-pick] .opt__dot { background: var(--accent); border-color: var(--accent); transform: scale(1.12); }

/* ---- Phase 2+3 · das Punktefeld ---------------------------------------
   Dieses Feld IST die Verteilungskurve dieses Spiels. Sie ist echt: die
   Bloecke sind die veroeffentlichten Anteile einer Umfrage mit Institut,
   Jahr, n und Land. Deshalb keine simulierte Wolke und keine Log-Achse. */
.field {
  display: none;
  position: relative;
  width: var(--field);
  flex: 0 0 auto;
  touch-action: none;
  border-radius: var(--r-sm);
}
.app[data-phase="guess"] .field,
.app[data-phase="reveal"] .field { display: block; }
.field:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; }

.dots {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(10, var(--cell));
  gap: var(--gap);
}
/* Drei Zustaende, klare Rangfolge:
   on    = die Antwort, auf die getippt wird -- volle Groesse, Akzent
   other = eine andere belegte Antwort      -- kleiner, ruhiger Punkt
   none  = nicht belegt / niemand           -- nur ein feiner Ring        */
.dots i {
  width: var(--cell); aspect-ratio: 1; border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.25px var(--line);
  transform: scale(.52);
  transition: background var(--d-fast) var(--ease),
              box-shadow var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
}
.dots i[data-s="on"] {
  background: var(--accent);
  box-shadow: none;
  transform: scale(1);
}
.dots i[data-s="other"] {
  background: var(--line-strong);
  box-shadow: none;
  transform: scale(.56);
}
.dots i[data-you] {
  position: relative; z-index: 1;   /* der Ring darf von keinem Nachbarn beschnitten werden */
  transform: scale(1);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink);
}
.dots i[data-you][data-s="none"] { background: var(--paper-3); }

/* Die eigene Marke erscheint ERST im Reveal. Waehrend des Tippens ist die
   Punktemasse selbst die Ablesung -- eine zweite Linie waere doppelt und
   wuerde bei einer angebrochenen Reihe zwangslaeufig danebenliegen. */
.mark {
  position: absolute; z-index: 5; left: -10px; right: -10px;
  bottom: calc(var(--v, 0) * 1%);
  height: 0; border-top: 1.5px dashed var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-mid) var(--ease) 120ms;
}
.app[data-phase="reveal"] .mark { opacity: 1; }
/* Etikett sitzt MITTIG auf der Linie, als bewusst gesetzter Anschrieb --
   ein halb ueberdeckter Punkt sieht nach Fehler aus, ein Chip nicht. */
.mark__tag {
  position: absolute; right: -2px; bottom: -10px;
  padding: 3px 9px; border-radius: 10px;
  font-size: var(--t-xs); font-weight: 600;
  color: var(--ink); line-height: 1.25;
  background: var(--paper); border: 1.5px solid var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Die Luecke zwischen Tipp und Wahrheit: ein Dunst, keine Kante.
   Bewusst ohne harte Raender -- die Punkte fuellen reihenweise, eine
   gezogene Grenzlinie laege bei einer angebrochenen Reihe zwangslaeufig
   neben der Masse und wuerde falsch aussehen. */
.span {
  position: absolute; z-index: 1; left: -10px; right: -10px;
  bottom: calc(var(--lo, 0) * 1%);
  height: calc(var(--d, 0) * 1%);
  background: linear-gradient(to bottom,
              transparent, var(--accent-soft) 22%, var(--accent-soft) 78%, transparent);
  opacity: 0; transition: opacity var(--d-mid) var(--ease) 80ms;
}
.app[data-phase="reveal"] .span[data-on] { opacity: 1; }
/* Der Abstands-Anschrieb ist ein GESCHWISTER des Bandes, nicht sein Kind:
   das Band liegt hinter den Punkten, der Anschrieb muss darueber. */
.span__n {
  position: absolute; z-index: 6; left: 50%; bottom: var(--mid, 50%);
  transform: translate(-50%, 50%);
  opacity: 0; transition: opacity var(--d-mid) var(--ease) 120ms;
  padding: 4px 11px; border-radius: 11px;
  background: var(--ink); color: var(--paper);
  /* freier Rand, sonst flankieren zwei Punkte den Chip und es entsteht
     ungewollt eine Gesichts-Silhouette */
  box-shadow: 0 0 0 5px var(--paper);
  font-size: var(--t-xs); font-weight: 800; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.25;
}
.app[data-phase="reveal"] .span__n[data-on] { opacity: 1; }

/* Zieh-Hinweis, verschwindet nach der ersten Beruehrung */
.grab {
  position: absolute; z-index: 4; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent); opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-mid) var(--ease);
}
.app[data-phase="guess"] .grab { opacity: .9; animation: bob 2.4s var(--ease) infinite; }
.app[data-touched] .grab { opacity: 0 !important; animation: none; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, -50%); }
  35%      { transform: translate(-50%, calc(-50% - 9px)); }
  70%      { transform: translate(-50%, calc(-50% + 9px)); }
}

/* Wenn das Sheet hochfaehrt, reserviert die Buehne genau dessen Hoehe als
   Fusspolster: das Punktefeld zentriert sich dann im Rest und bleibt frei.
   crowd.js misst die Sheet-Hoehe am gerenderten Blatt (Verdikt kann umbrechen)
   und deckelt sie vorher auf den freien Rest. */
/* Die Reserve wird schlagartig gesetzt (Layout), der Weg dorthin laeuft als
   FLIP ueber transform -- kein animiertes Layout ueber 100 Punkte. */
.stage { transition: transform var(--d-slow) var(--ease-o); }
.app[data-phase="reveal"] .stage { gap: var(--s3); }
.app[data-phase="reveal"] .who { display: none; }

/* ---- Ablesung UND Eingabe ---------------------------------------------
   Dieselbe Zahl, zwei Wege: das Punktefeld ziehen oder den Prozentwert
   tippen. Erlaubt, weil es nur EINEN Schuss gibt -- ohne zweiten Versuch
   mit Rueckmeldung entsteht keine Binaersuche. */
.readout {
  display: none; flex-direction: column; align-items: center; gap: 2px;
  margin: 0; flex: 0 0 auto;
}
.app[data-phase="guess"] .readout { display: flex; }
.app[data-phase="done"]  .readout--score { display: flex; }
.readout .mega { color: var(--ink); }
/* --ink-3 misst 3.23:1 auf --paper und traegt darum keinen Text unter 24px.
   Diese Datei flickt das schon an drei Stellen lokal (Label, Quellen-Link,
   Punktezahl); die Regel gilt hier durchgehend. Wurzel siehe Meldung am
   Dateiende. */
/* Das Label ist seit #724 ein halber Satz («von ihnen sagten «In Ordnung»»),
   der sagt, was die grosse Zahl bedeutet; darum t-sm statt t-xs. */
.readout .label { color: var(--ink-2); font-size: var(--t-sm); text-align: center; max-width: 30ch; }
.readout .unit { color: var(--ink-2); }    /* 22px/600 ist WCAG kein "grosser Text" */
.readout--score .unit { margin-left: var(--s1); }   /* «27.6 Punkte», nicht «27.6Punkte» */

.numhost { display: flex; justify-content: center; }
.readout .numfield {
  gap: var(--s1);
  padding: 0 var(--s2) 4px;
  border-bottom-width: 2px;
}
.readout .numfield__in {
  /* `field-sizing: content` wuerde das Feld beim Ziehen mitwachsen lassen und
     die Einheit staendig verschieben. Feste drei Ziffern, tabellarisch. */
  field-sizing: fixed;
  width: 3.1ch; min-width: 3.1ch; max-width: 3.1ch;
  font-size: var(--t-mega); font-weight: 800;
  letter-spacing: var(--tight); line-height: 1;
  /* Der App-Rahmen sperrt Textauswahl fuer die Ziehflaeche -- ein Eingabefeld
     braucht sie zurueck, sonst kann man den eigenen Wert nicht korrigieren. */
  -webkit-user-select: text; user-select: text;
}
.readout .numfield__unit {
  font-size: calc(var(--t-mega) * .34); font-weight: 600; color: var(--ink-2);
}

/* ---- Ein Tipp pro Tag --------------------------------------------------
   Kostet nichts. Wo im Datensatz kein ehrlicher Anker steht, baut
   G.hintButton gar keinen Knopf -- abwesend, nicht ausgegraut. */
.aid {
  display: none; flex-direction: column; align-items: center; gap: var(--s2);
}
/* Von Rundenstart an sichtbar (Esteban #724), nicht erst beim Ziehen. */
.app[data-phase="answer"] .aid,
.app[data-phase="guess"] .aid { display: flex; }
.aid:empty { display: none; }
.aid .hint { margin: 0; max-width: 36ch; text-align: center; }

/* ---- Phase 4 · Tagesabschluss ------------------------------------------
   Die Breite haengt hier NICHT mehr am Punktefeld. Auf einer kurzen Buehne
   schrumpft `--field` auf 186px, und eine Frage pro Zeile in 186px zu setzen
   ist unlesbar -- das Feld ist auf diesem Blatt ohnehin nicht zu sehen. */
.done { display: none; width: 100%; max-width: 340px; flex-direction: column; gap: var(--s5); }
.app[data-phase="done"] .done { display: flex; }
/* Ergebnis oben verankern: EIN Weissraum unten statt zwei halbe */
.app[data-phase="done"] .stage { justify-content: flex-start; padding-top: var(--s6); }
/* Auf einer kurzen Buehne ist die Tagesliste laenger als der Schirm. Sie
   rollt dann in sich -- das Dock mit dem Teilen-Knopf bleibt stehen.
   Braucht die Deckelung unten, sonst waechst .app ueber den Schirm hinaus
   und schiebt das Dock ins Nichts (Flex schrumpft erst bei fester Hoehe). */
.app[data-phase="done"] .stage { overflow-y: auto; overscroll-behavior: contain; }
.done .rule { margin: 0; width: 100%; }
/* Die Zeilenform hat auf dem Blatt das Textlineal abgeloest: sie sagt, WELCHE
   Frage das war. Das Lineal lebt auf der Teil-Karte weiter, wo genau das
   umgekehrt richtig ist. */
.srow__what {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.srow__f[data-dir="spot"] { color: var(--good); }
.foot {
  margin: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55;
  max-width: 40ch;
}

/* ---- Dock --------------------------------------------------------------
   Im Reveal traegt das Sheet den Knopf -- der Platz gehoert dem Punktefeld. */
.app[data-phase="reveal"] .dock { display: none; }
.dock .share { width: 100%; }

/* ---- Reveal-Sheet ------------------------------------------------------ */
/* geschlossen wirft es keinen Schatten, sonst leuchtet der Rand von unten
   in die Buehne hinein */
.sheet {
  box-shadow: none;
  display: flex; flex-direction: column;
}
.sheet[data-open] { box-shadow: var(--shadow-up); }
/* Der Rechenweg macht das Blatt hoeher. Statt das Punktefeld zu verdecken,
   rollt der Inhalt in sich; der Weiter-Knopf bleibt immer am Fuss stehen. */
.sheet__body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Der Verlauf sagt: hier kommt noch etwas. crowd.js setzt ihn nur, solange
   wirklich noch etwas kommt. */
.sheet[data-more] .sheet__body {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.sheet .btn { margin-top: var(--s3); width: 100%; flex: 0 0 auto; }

/* Beschriftung der Verteilung: WESSEN Antworten das sind. Steht ueber dem
   Ergebnis, weil es der Vorteil dieses Spiels gegenueber jeder simulierten
   Kurve ist -- und traegt den Quellen-Link, damit der Beleg nie wegrollt. */
.prov {
  margin: var(--s3) 0 0;
  font-size: var(--t-xs); line-height: 1.5; color: var(--ink-3);
}
.prov b { display: inline; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.factor__flav { display: none !important; }
.prov__note { display: block; }

/* Der Fehler in der Form des Faktors, aber in der ehrlichen Waehrung:
   Prozentpunkte mit Richtung. Ein Verhaeltnis waere hier eine Luege --
   80 gegen 95 ist "1.19x" und trotzdem grob daneben. */
.factor { margin: 0 0 var(--s2); flex-wrap: wrap; }
.factor__n { line-height: 1.05; }
/* Ein Wort («Volltreffer», «Bull’s eye») traegt die Ziffern-Spationierung
   (--tight) nicht: die Buchstaben kleben. Titel-Tracking wie die Frage. */
.factor--spot .factor__n { font-size: var(--t-lg); letter-spacing: -0.02em; }
.factor__flav {
  margin-left: auto; align-self: center;
  padding: 4px var(--s3); border-radius: var(--r-full);
  background: var(--paper-2); color: var(--ink-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0;
  white-space: nowrap;
}

.belong {
  margin: 0 0 var(--s2);
  max-width: 34ch;
}
.belong { color: var(--ink); font-weight: 500; }
.belong q { quotes: auto; font-weight: 500; }
/* Schweizer Anfuehrung: «…», nicht die deutschen „…“, die der Browser bei lang=de setzt. */
html[lang="de"] .belong q { quotes: "«" "»"; }

.napkin { margin-top: var(--s2); }
.napkin__label { color: var(--ink-2); }   /* 11px/700 in --ink-3 misst 2.94:1 */

.sheet__fact { margin: var(--s2) 0 0; }
.prov .sheet__src { display: block; width: auto; min-height: 0; padding: 0; border: 0; }
.sheet__src:hover, .sheet__src:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Browser-Oberflaechen gehoeren auch zum Entwurf ------------------- */
::selection { background: var(--accent-soft); color: var(--ink); }
.app { caret-color: var(--accent); }

/* Der Rahmen aus base.css setzt nur `min-height`. Ohne Obergrenze waechst er
   auf kurzen Schirmen ueber den Viewport hinaus, statt dass die Buehne
   schrumpft -- Flex schrumpft erst, wenn der Behaelter eine feste Hoehe hat.
   Wirkung ohne diese Zeile: das Dock (und damit der Teilen-Knopf) rutscht
   unter die Bildkante. Gemessen bei 390x620. */
.app { max-height: 100vh; max-height: 100dvh; }

/* Das geschlossene Sheet steht auf translateY(101%) UNTER der Unterkante und
   macht `.app` damit zu einem Scroll-Behaelter mit rund 280px Ueberhang
   (gemessen: scrollHeight 1121 bei clientHeight 844). `overflow:hidden` aus
   base.css verhindert nur das Scrollen VON HAND -- `scrollIntoView` scrollt
   trotzdem, und genau das loest der Fokus auf das neue Zahlenfeld aus. Dann
   rutscht die ganze Buehne nach oben aus dem Bild (gemessen: Punktefeld bei
   y=-174, also Frage und obere Reihen unsichtbar, Geste tot).
   `overflow: clip` macht daraus gar keinen Scroll-Behaelter mehr. Fuer aeltere
   Safari faengt crowd.js zusaetzlich jedes Scrollen ab. */
@supports (overflow: clip) {
  .app { overflow: clip; }
}

/* Eine Ziehflaeche darf keine Textauswahl starten: der Browser bricht
   sonst mitten im Zug den Pointer ab (pointercancel) und der Tipp haengt.
   Der Beleg-Satz bleibt bewusst markierbar -- man soll ihn kopieren koennen. */
.app { -webkit-user-select: none; user-select: none; }
.sheet__fact, .sheet__src, .prov, .napkin, .summary { -webkit-user-select: text; user-select: text; }
.dots i, .who svg { -webkit-user-drag: none; }

/* ---- Enge Buehne ------------------------------------------------------- */
@media (max-height: 760px) { :root { --cell: 22px; --gap: 6px; } }
@media (max-height: 660px) {
  :root { --cell: 15px; --gap: 4px; }
  .sheet { padding: var(--s4) var(--s4) max(var(--s4), env(safe-area-inset-bottom)); }
  .prov { margin-bottom: var(--s2); }
  .factor { font-size: var(--t-lg); }
  .factor--spot .factor__n { font-size: var(--t-md); }
  .belong { font-size: var(--t-sm); margin-bottom: var(--s2); }
  .napkin { margin-top: var(--s2); padding: var(--s2) var(--s3); }
  .sheet__fact { margin-top: var(--s3); }
  .sheet .btn { margin-top: var(--s3); min-height: 44px; }
  .who { width: 20px; height: 20px; }
  .done { gap: var(--s4); }
  .srow { padding: var(--s2) 0; }
  .readout .numfield__in { font-size: var(--t-xl); }
  .readout .numfield__unit { font-size: var(--t-sm); }
}
@media (max-width: 360px) { :root { --cell: 23px; --gap: 6px; } }