/* ---------- Tokens: light (bare :root = complete palette) ---------- */
:root{
  --ink:#12232B;            /* deep sea ink */
  --ink-2:#3D555F;          /* secondary text */
  --ink-3:#6E858E;          /* muted */
  --ground:#FBFAF7;         /* paper */
  --surface:#FFFFFF;
  --surface-2:#F2F0EB;      /* tape body */
  --rule:#C6D2D6;           /* printed rule marks */
  --line:#E2E0DA;
  --accent:#C2452D;         /* pohutukawa - AUSSCHLIESSLICH der Schnittrand
                               des Massbands. Nicht fuer Knoepfe, nicht fuer
                               Rueckmeldung: kein Rot fuer Fehler. */
  --accent-ink:#FFFFFF;
  --teal:#1E6E6E;           /* progress, "sitzt" */
  --teal-soft:#DCEAE8;
  --amber:#9A6A1F;          /* "noch nicht" - never red */
  --amber-soft:#F6EBD8;
  --focus:#1E6E6E;
  --shadow:0 1px 2px rgba(18,35,43,.06),0 8px 24px -12px rgba(18,35,43,.18);
  --r:18px;

  /* Die Farbe ihrer Welt. Sie traegt alles, was Handlung ist: Knopf,
     Auswahl, Fortschritt auf dem Band. Bewusst NICHT --accent - das Rot
     gehoert allein dem Schnittrand des Massbands (Leitplanke), und bis
     hierher war der Startknopf faelschlich derselbe Ton.
     Keine der Weltfarben liegt in der Naehe von Teal (richtig) oder
     Bernstein (noch nicht), damit die Rueckmeldung eindeutig bleibt. */
  --world:#2C5F7C; --world-soft:#E3EDF3; --world-ink:#FFFFFF;
}
/* Basketball traegt die Farbe des Balls. Sie liegt naeher an Bernstein
   ("noch nicht") und am Rot des Schnittrands, als mir lieb ist - deshalb
   deutlich kraeftiger und dunkler als beide, und die Rueckmeldung an einer
   Antwort ueberschreibt die Auswahlfarbe ohnehin vollstaendig, sobald
   geprueft wurde. Nachgesehen: die beiden treffen nie gleichzeitig auf
   demselben Element zusammen. */
[data-world="basketball"]{ --world:#CC5A18; --world-soft:#FBEADF; }
[data-world="nz"]        { --world:#3F7D2F; --world-soft:#E8F1E3; }
[data-world="studio"]    { --world:#9C3E96; --world-soft:#F6E6F5; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EEF3F4; --ink-2:#B4C4CA; --ink-3:#8598A0;
    --ground:#0E1A20; --surface:#152730; --surface-2:#1C333D;
    --rule:#33525E; --line:#254049;
    --accent:#E4694F; --accent-ink:#14232A;
    --teal:#67C3B8; --teal-soft:#173B3C;
    --amber:#D9A45B; --amber-soft:#33291A;
    --focus:#67C3B8;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
    --world:#7FB3D5; --world-soft:#172A36; --world-ink:#0E1A20;
  }
  :root:not([data-theme="light"])[data-world="basketball"]{ --world:#F08B4A; --world-soft:#3A2418; }
  :root:not([data-theme="light"])[data-world="nz"]        { --world:#93C97C; --world-soft:#1E2E18; }
  :root:not([data-theme="light"])[data-world="studio"]    { --world:#DE8FD8; --world-soft:#331A31; }
}
:root[data-theme="dark"]{
  --ink:#EEF3F4; --ink-2:#B4C4CA; --ink-3:#8598A0;
  --ground:#0E1A20; --surface:#152730; --surface-2:#1C333D;
  --rule:#33525E; --line:#254049;
  --accent:#E4694F; --accent-ink:#14232A;
  --teal:#67C3B8; --teal-soft:#173B3C;
  --amber:#D9A45B; --amber-soft:#33291A;
  --focus:#67C3B8;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
  --world:#7FB3D5; --world-soft:#172A36; --world-ink:#0E1A20;
}
:root[data-theme="dark"][data-world="basketball"]{ --world:#F08B4A; --world-soft:#3A2418; }
:root[data-theme="dark"][data-world="nz"]        { --world:#93C97C; --world-soft:#1E2E18; }
:root[data-theme="dark"][data-world="studio"]    { --world:#DE8FD8; --world-soft:#331A31; }

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.45; -webkit-text-size-adjust:100%;
}
.wrap{max-width:27rem;margin:0 auto;padding:0 18px 96px;}
/* Ueberschriften in der Groteske statt in der Serife: die Serife sah nach
   Zeitung aus, das hier ist Annies App. */
h1,h2,h3{font-family:inherit;font-weight:700;text-wrap:balance;margin:0}
h1{font-size:1.8rem;letter-spacing:-.02em;line-height:1.15}
h2{font-size:1.3rem;letter-spacing:-.01em}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.muted{color:var(--ink-2)}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:6px}

/* ---------- Tape rail ---------- */
.rail{position:sticky;top:0;z-index:20;background:var(--ground);padding:10px 18px 8px;border-bottom:1px solid var(--line)}
.rail-in{max-width:27rem;margin:0 auto}
.rail-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
.rail-name{font-weight:700;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px}
.rail-name svg{width:17px;height:17px;flex:0 0 auto;color:var(--world)}
.rail-num{font-size:.8rem;color:var(--ink-2)}
/* Drei Baender nebeneinander - dasselbe Bild wie an der Wand. */
.tapes{display:flex;gap:5px}
/* Drei Baender messen drei verschiedene Dinge - ohne Beschriftung
   sieht es aus wie eine Strecke in drei Teilen. */
.tape-labels{display:flex;gap:5px;margin-top:3px}
/* Drei Staende nebeneinander - auf dem Abschlussbildschirm und im Stand. */
.split{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.9rem;color:var(--muted)}
/* Die Ansage am Ende: welches Band, wie viele Zentimeter. */
/* "Zeig mir, wie das geht" - Regel, Rechenweg, Falle. Der Rechenweg ist
   nummeriert, weil die Reihenfolge hier wirklich Information ist. */
.regel{font-size:1.08rem;font-weight:600;line-height:1.45;margin:12px 0 0}
.schritte{margin:14px 0 0;padding-left:0;list-style:none;counter-reset:sr}
.schritte li{counter-increment:sr;position:relative;padding:8px 0 8px 34px;
  border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.schritte li::before{content:counter(sr);position:absolute;left:0;top:8px;
  width:22px;height:22px;border-radius:50%;background:var(--world);color:#fff;
  font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.falle{margin-top:16px;padding:12px 14px;border-radius:8px;background:var(--surface-2);
  border-left:3px solid var(--amber)}
.cut{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);text-align:left}
.cut-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 0;font-weight:600}
.cut-row + .cut-row{border-top:1px solid var(--line)}
.split b{color:var(--fg)}
.tape-labels span{flex:1 1 0;font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.tape{position:relative;flex:1 1 0;height:26px;border-radius:5px;background:var(--surface-2);
  overflow:hidden;border:1px solid var(--line)}
.tape.voll{border-color:var(--world)}
/* Ein Wochen-Check wartet. Nicht rot - Rot ist der Schnittrand und sonst
   nichts; die Weltfarbe traegt alles, was Handlung ist. */
.tape.offen{border-color:var(--world)}
.tape.offen::after{content:"";position:absolute;top:-4px;right:-4px;
  width:9px;height:9px;border-radius:50%;background:var(--world);
  box-shadow:0 0 0 2px var(--bg)}
.tape-ticks{position:absolute;inset:0;
  background-image:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 10px),
                   repeating-linear-gradient(to right,var(--rule) 0 1.5px,transparent 1.5px 50px);
  background-size:100% 9px,100% 15px;background-position:0 100%,0 100%;background-repeat:repeat-x;opacity:.85}
.tape-done{position:absolute;inset:0 auto 0 0;background:var(--world);opacity:.2;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.tape-edge{position:absolute;top:0;bottom:0;width:3px;background:var(--accent);transition:left .7s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.tape-done,.tape-edge{transition:none}}

/* ---------- Cards & buttons ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:16px 18px;border-radius:14px;border:1px solid transparent;background:var(--world);
  color:var(--world-ink);font-weight:700;cursor:pointer;min-height:54px;
  letter-spacing:-.01em;transition:transform .12s ease, filter .12s ease}
.btn:active{transform:scale(.97)}
.btn:not(.ghost):not(.quiet):hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.quiet{background:var(--surface-2);color:var(--ink);border-color:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}
.linkish{background:none;border:0;padding:6px 2px;color:var(--ink-3);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;font-size:.85rem}

/* ---------- Task ---------- */
/* Der Rueckweg. Leise, aber immer da - eine Aufgabe, aus der es kein
   Zurueck gibt, macht aus der Runde eine Pflichtstrecke. */
.backlink{background:none;border:0;padding:2px 0 10px;margin:-4px 0 0;cursor:pointer;
  color:var(--ink-3);font-size:.85rem;display:inline-flex;align-items:center;gap:6px}
.backlink::before{content:"←";font-size:1rem;line-height:1}
.backlink:hover{color:var(--ink-2)}
/* Blockfolge einer Stunde: ein Strich je Aufgabe, groessere Luecke zwischen
   Aufwaermen, Kern und Anwenden. Bewusst ohne Zahl und ohne Uhr - sie soll
   sehen, wo sie ist, nicht wie lange es noch dauert. */
.phases{display:flex;align-items:center;gap:3px;margin-bottom:12px}
.ph{flex:1 1 auto;height:4px;border-radius:2px;background:var(--line);
    transition:background .25s ease}
.ph.gap{margin-left:11px}
.ph.done{background:var(--world);opacity:.45}
.ph.now{background:var(--world)}
.qnum{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.stem{font-size:1.18rem;line-height:1.4;margin:10px 0 4px}
.stem .expr{font-family:"IBM Plex Mono",monospace;font-size:1.05em;white-space:nowrap}
.opts{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.opt{display:flex;gap:11px;align-items:center;text-align:left;width:100%;padding:15px 16px;
  border:1.5px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;
  min-height:54px;transition:transform .12s ease,border-color .12s ease,background .12s ease}
.opt:active{transform:scale(.985)}
.opt .key{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--rule);
  display:grid;place-items:center;font-size:.78rem;font-weight:600;color:var(--ink-2)}
/* Ausgewaehlt ist nicht dasselbe wie richtig. Bis hierher sahen beide gleich
   aus - eine angetippte Antwort trug schon die Farbe von "stimmt", bevor
   ueberhaupt jemand geprueft hatte. Auswahl traegt jetzt die Weltfarbe,
   Teal bleibt allein der richtigen Antwort. */
.opt[aria-pressed="true"]{border-color:var(--world);background:var(--world-soft)}
.opt[aria-pressed="true"] .key{border-color:var(--world);background:var(--world);color:var(--world-ink)}
.opt.locked{cursor:default}
.opt.right{border-color:var(--teal);background:var(--teal-soft)}
.opt.right .key{border-color:var(--teal);background:var(--teal);color:var(--surface)}
.opt.chosen:not(.right){border-color:var(--amber);background:var(--amber-soft)}
.opt .mark{margin-left:auto;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.opt.right .mark{color:var(--teal)}
.opt.chosen:not(.right) .mark{color:var(--amber)}
.numrow{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
input[type="text"],input[type="number"]{
  font:inherit;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  padding:13px 14px;border:1.5px solid var(--rule);border-radius:10px;background:var(--surface);
  color:var(--ink);width:9.5rem;min-height:52px}
input::placeholder{color:var(--ink-3);opacity:.7}
.unit{color:var(--ink-2);font-weight:600}
.fracin{display:inline-flex;flex-direction:column;align-items:center;gap:5px}
.fracin input{width:5.5rem;text-align:center}
.fracbar{height:2px;width:5.5rem;background:var(--ink)}

/* ---------- Hints & feedback ---------- */
.hints{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.hint{border-left:3px solid var(--rule);padding:2px 0 2px 12px;color:var(--ink-2);font-size:.95rem}
.hint b{color:var(--ink)}
.fb{margin-top:16px;border-radius:11px;padding:14px 15px;border:1px solid var(--line)}
.fb.ok{background:var(--teal-soft);border-color:transparent}
.fb.near{background:var(--amber-soft);border-color:transparent}
.fb h3{font-size:1rem;margin-bottom:4px;font-family:inherit;font-weight:700}
.fb p{margin:0;font-size:.95rem;color:var(--ink-2)}
.fb .de{margin-top:8px;font-size:.88rem;color:var(--ink-3)}
.selfcheck{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);
  cursor:pointer;font-size:.9rem;min-height:44px;transition:transform .12s ease}
.chip:active{transform:scale(.95)}
.chip[aria-pressed="true"]{border-color:var(--world);background:var(--world-soft);
  color:var(--world);font-weight:700}

/* ---------- Number line ---------- */
.nl{width:100%;height:66px;margin-top:12px;display:block}
.nl line{stroke:var(--rule)}
.nl .axis{stroke:var(--ink-2);stroke-width:1.4}
.nl text{fill:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:9px}

/* ---------- Parent view ---------- */
.grid2{display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:.78rem;font-weight:600;white-space:nowrap}
.pill.s{background:var(--teal-soft);color:var(--teal)}
.pill.u{background:var(--amber-soft);color:var(--amber)}
.pill.n{background:var(--surface-2);color:var(--ink-3)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.scroll{overflow-x:auto}
.crow{padding:11px 0;border-bottom:1px solid var(--line)}
.crow:last-child{border-bottom:0}

/* ---------- World picker ---------- */
.worlds{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.world{text-align:left;padding:16px;border:1.5px solid var(--line);border-radius:16px;
  background:var(--surface);cursor:pointer;position:relative;padding-left:46px;
  transition:transform .12s ease,border-color .12s ease}
.world:active{transform:scale(.99)}
/* Jede Welt zeigt Zeichen und Farbe schon vor der Wahl - sonst ist die
   Entscheidung abstrakt, und genau sie soll sich nach etwas anfuehlen. */
.world .wmark{position:absolute;left:16px;top:17px;color:var(--wc,var(--world));
  display:block;width:21px;height:21px}
.world .wmark svg{width:21px;height:21px;display:block}
.world[data-world="basketball"]{--wc:#CC5A18}
.world[data-world="nz"]        {--wc:#3F7D2F}
.world[data-world="studio"]    {--wc:#9C3E96}
.world[aria-pressed="true"]{border-color:var(--wc);box-shadow:0 0 0 3px var(--world-soft)}
.world .wt{font-weight:700;font-size:1.05rem}
.world .wd{font-size:.88rem;color:var(--ink-2);margin-top:3px}
.hide{display:none !important}
.center{text-align:center}
.big{font-family:"IBM Plex Mono",monospace;font-size:3rem;font-weight:600;letter-spacing:-.03em;
  color:var(--world);line-height:1}
.foot{margin-top:26px;text-align:center}

/* Beschriftete Punkte auf der Zahlengeraden - fuer den Dezimal-Vorlaeufer,
   wo beide Zahlen sichtbar liegen muessen, bevor gefragt wird. */
.nl .nl-mark{font-size:9px;font-weight:700;fill:var(--world)}