/* YOU · nur die eigene Schicht. Aus tokens.css wird NUR der Akzent gesetzt. */

:root { --hue: 300; }

/* Der Rahmen soll exakt den Schirm fuellen, nie mehr: sonst treibt die SVG
   die Layouthoehe und die Seite scrollt. min-height allein reicht dafuer nicht. */
.app { max-height: 100dvh; }

/* ---- Views: immer genau eine sichtbar ---------------------------------- */
.view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.micro {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
  text-align: center;
  letter-spacing: .01em;
}

/* ---- you-chip: auf JEDEM Bildschirm, nie in einem Menue ---------------- */
.me {
  display: inline-flex; align-items: center; gap: 6px;
  appearance: none; border: 1px solid var(--line); cursor: pointer;
  padding: 4px 10px 4px 7px;
  border-radius: var(--r-full);
  background: var(--paper-2);
  font-size: var(--t-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ink);
  transition: border-color var(--d-fast) var(--ease);
}
.me small { font-weight: 600; color: var(--ink-3); margin-left: 2px; }
.me__fig { width: 8px; height: 18px; color: var(--accent); }
.me:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.me[data-pulse] { animation: mePulse 900ms var(--ease) 1; }
@keyframes mePulse {
  0%,100% { border-color: var(--line); }
  40%     { border-color: var(--accent); }
}

/* ---- Kalibrierung: eine Messzeichnung, kein Formular ------------------- */
.cal {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: block;
  touch-action: none;
  cursor: ns-resize;
}
.cal__ruler { position: absolute; inset: 0; pointer-events: none; }
.cal__tick {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line); opacity: .55;
}
.cal__tick[data-major] { background: var(--line-strong); opacity: .5; }
.cal__num {
  position: absolute; left: 0;
  transform: translateY(50%);
  font-size: var(--t-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  background: var(--paper); padding-right: 6px;
}
.cal__fig {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  color: var(--accent);
  pointer-events: none;
}
.cal__head {
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--accent);
  pointer-events: none;
}
.cal__read {
  position: absolute; right: 0;
  text-align: right;
  pointer-events: none;
  line-height: 1;
}
.cal__read .mega { display: block; line-height: .88; }
.cal__read .unit { display: inline-block; margin-left: 4px; font-size: var(--t-sm); }
.cal__alt {
  pointer-events: auto;
  appearance: none; border: 0; background: var(--paper); cursor: pointer;
  margin-top: var(--s2); padding: 3px 0;
  font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.cal__alt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Tipp-Zeile: nur da, wenn es einen Tipp gibt ----------------------- */
/* Leer heisst wirklich leer: keine Hoehe, kein Platzhalter, kein Grau.
   Ein ausgegrauter Knopf waere ein Versprechen, das das Item nicht haelt. */
.hintrow {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s2); width: 100%;
}
.hintrow:empty { display: none; }
.hintrow .hint { max-width: 34ch; text-align: center; margin: 0; }

/* ---- Runde: eine Zahl, ein Bild --------------------------------------- */
.count {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: var(--s2);
  align-self: flex-start;
}
.count .mega { color: var(--ink); }
.count .unit {
  font-size: var(--t-md); font-weight: 650;
  color: var(--ink-3); letter-spacing: 0;
  transform: translateY(-4px);
}
.app[data-phase="reveal"] .count .mega { color: var(--accent); }

.scene {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  touch-action: none;
  cursor: ns-resize;
}

/* ---- Szene: SVG-Rollen ------------------------------------------------- */
.scene__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; color: var(--accent);
}
.scene__svg .obj      { color: var(--line-strong); }
.scene__svg .gl       { fill: var(--accent); color: var(--accent); }
.scene__svg .gl--soft { fill: var(--accent-line); }
.scene__svg .cell     { fill: var(--paper); }
.scene__svg .ground   { stroke: var(--line-strong); stroke-width: 1; }
.scene__svg .field    { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.scene__svg .fieldMid { stroke: var(--line); stroke-width: 1; }
.scene__svg .mark     { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; }
.scene__svg .markT    { fill: var(--ink); }
.scene__svg .unitBar  { fill: var(--ink); }
.scene__svg .markBox  { fill: var(--accent); stroke: var(--ink); stroke-width: 1.6; }
.scene__svg .glKey    { fill: var(--accent); color: var(--accent); }
.scene__svg .lbl {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .03em;
  fill: var(--ink-3);
  font-family: var(--font);
}
.scene__svg .lbl--name { display: none; }   /* #725: der Name steht jetzt oben (#objName), nicht mehr unten rechts */
.scene__svg .lbl--said { fill: var(--ink); text-anchor: end; letter-spacing: .06em; }
.scene__svg .lblAcc { fill: var(--accent); font-weight: 800; }

/* ---- Dock: Zahlenfeld und der eine Knopf in EINER Reihe ---------------- */
/* Kostet keine Bauhoehe: die Eingabe teilt sich die Zeile mit dem Knopf,
   statt eine eigene aufzumachen. Sie steht damit dort, wo der Daumen ohnehin
   liegt, und Enter im Feld ist derselbe Griff wie der Knopf. */
.dock__row { display: flex; align-items: stretch; gap: var(--s3); }
.dock__row .btn { flex: 1 1 auto; }
.dock__num { flex: 0 0 auto; display: flex; }
.dock__num:empty, .app[data-phase="reveal"] .dock__num { display: none; }
.dock .numfield {
  align-items: center;
  padding: 0 var(--s2) 0 0;
  border-bottom-color: var(--line-strong);
}
.dock .numfield__in { width: 5ch; min-width: 4ch; max-width: 9ch; font-size: var(--t-md); }
.dock .numfield__unit { white-space: nowrap; }

/* ---- Reveal-Sheet ------------------------------------------------------ */
/* Der eine Knopf bleibt der eine Knopf: der Dock liegt ueber dem Sheet,
   das Sheet haelt sich unten frei. Kein zweiter Knopf, kein Modal. */
.dock { position: relative; z-index: 30; }
.app[data-phase="reveal"] .sheet {
  padding: var(--s6) var(--s5) calc(var(--tap) + var(--s5));
}
/* Das Bild ist die Pointe: das Sheet darf nie den ganzen Schirm nehmen.
   Reicht der Inhalt darueber hinaus, rollt er INNEN -- lieber ein Stueck
   Rechenweg unter der Kante als eine Szene, die es nicht mehr gibt. */
.sheet {
  max-height: calc(100% - 190px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet__line { margin: 0 0 var(--s1); color: var(--ink); font-weight: 500; }
.beat { margin: var(--s1) 0 0; }
/* Die Notiz gehoert direkt an die Kurve, nicht 24 px darunter. */
.sheet .dist { margin: var(--s3) 0 0; }
.sheet .dist__svg { height: 42px; }
/* Liegt die eigene Marke auf einer Quantil-Marke, ueberdrucken sich zwei
   Beschriftungen zu Buchstabenbrei ("6you"). Die eigene gewinnt: sie steht
   im DOM zuletzt und bekommt hier den Grund mit. Das ist die oertliche
   Notbremse, nicht die Reparatur -- die gehoert in G.drawDistribution. */
.sheet .napkin { margin-top: var(--s4); }
.sheet__fact { margin: var(--s3) 0 var(--s3); }
.sheet__row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4);
}
.basis { display: none; }
.sheet__row { display: block; }

/* ---- Tagesabschluss ---------------------------------------------------- */
.view--end { justify-content: center; gap: var(--s4); }
/* Das kleine × klebt an der Zahl, das Wort danach nicht: "2.2× on average",
   nicht "2.2 × on average". */
.view--end .count { align-self: center; gap: 2px; }
.view--end .count .unit { transform: none; }
.summary { max-width: 340px; }
.srow__what { padding-right: var(--s2); }

/* ---- Kurze Buehne ------------------------------------------------------ */
@media (max-height: 668px) {
  /* Der Dock liegt UEBER dem Sheet. Sein Fussraum muss ihn ganz freihalten,
     sonst schiebt sich die letzte Zeile unter den Knopf (gemessen: 4 px). */
  .app[data-phase="reveal"] .sheet {
    padding: var(--s5) var(--s5) calc(var(--tap) + var(--s5));
    max-height: calc(100% - 150px);
  }
  /* Die Frage steht im Sheet schon als "You said X. It takes Y." -- zweimal
     dieselbe Zeile ist auf einer kurzen Buehne der teuerste Platz. Das Bild
     bekommt sie. */
  .app[data-phase="reveal"] .prompt { display: none; }
  .sheet__fact { margin: var(--s2) 0; }
  .basis { max-width: 26ch; }
  .sheet .napkin { margin-top: var(--s3); }
}
@media (max-height: 620px) {
  .view { gap: var(--s3); }
  .srow { padding: var(--s2) 0; }
  /* Der Fakt ist die Zugabe, der Rechenweg die Lehre. Wird es eng,
     faellt die Zugabe -- nicht der Rechenweg. */
  .app[data-phase="reveal"] .sheet__fact { display: none; }
}

/* #725: der Name des Vergleichs-Objekts, gross und mittig unter der Frage (wie der Tiername bei Where?) */
.objname { flex: 0 0 auto; margin: 0; text-align: center; font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.objname:empty { display: none; }