/* Permiso — DGT theory trainer (prueba común + A1). Vanilla CSS, no framework. */

:root {
  --bg:        #f7f5f2;
  --surface:   #ffffff;
  --surface-2: #f0ece6;
  --ink:       #1a1714;
  --ink-2:     #55504a;
  --ink-3:     #8a8279;
  --line:      #e2ddd5;
  --accent:    #c2410c;
  --accent-ink:#ffffff;
  --accent-soft:#fdf0e8;
  --ok:        #15803d;
  --ok-soft:   #eaf6ee;
  --warn:      #a16207;
  --warn-soft: #fdf6e3;
  --bad:       #b91c1c;
  --bad-soft:  #fdecec;
  --es:        #1d4ed8;
  --es-soft:   #eef2ff;
  --radius:    14px;
  --shadow:    0 1px 2px rgba(26,23,20,.06), 0 4px 16px rgba(26,23,20,.05);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #14120f;
    --surface:   #1d1a17;
    --surface-2: #262220;
    --ink:       #f2ede7;
    --ink-2:     #b8b0a6;
    --ink-3:     #857d73;
    --line:      #332e2a;
    --accent:    #fb923c;
    --accent-ink:#1a1714;
    --accent-soft:#2e2018;
    --ok:        #4ade80;
    --ok-soft:   #16241a;
    --warn:      #fbbf24;
    --warn-soft: #2a2212;
    --bad:       #f87171;
    --bad-soft:  #2c1818;
    --es:        #93b4fd;
    --es-soft:   #1a1f33;
    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"] {
  --bg:#14120f; --surface:#1d1a17; --surface-2:#262220; --ink:#f2ede7; --ink-2:#b8b0a6;
  --ink-3:#857d73; --line:#332e2a; --accent:#fb923c; --accent-ink:#1a1714; --accent-soft:#2e2018;
  --ok:#4ade80; --ok-soft:#16241a; --warn:#fbbf24; --warn-soft:#2a2212; --bad:#f87171;
  --bad-soft:#2c1818; --es:#93b4fd; --es-soft:#1a1f33;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  overscroll-behavior-y: none;
}
h1,h2,h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }

/* ---------- layout ---------- */
.wrap { max-width: 720px; margin: 0 auto; padding: 0 1rem 6rem; }

header.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in { max-width: 720px; margin: 0 auto; padding: .6rem 1rem;
  display: flex; align-items: center; gap: .6rem; }
/* The wordmark is the domain: permi.so. The dot is the only coloured thing in
   the header, which is what lets a plain text logo hold its own — it is the
   full stop of the domain and the mark at the same time, so it has to read as
   deliberate rather than as punctuation that happens to be orange. It is set
   slightly larger than the letters and nudged up off the baseline; below about
   1.1x it stops looking chosen and starts looking like a rendering accident. */
.brand {
  display: flex; flex-direction: column; gap: 0; line-height: 1.1;
  text-decoration: none; color: inherit;
}
.brand .wordmark {
  font-weight: 700; letter-spacing: -.03em; font-size: 1.2rem;
  color: var(--ink);
}
.brand .dot {
  color: #ff4700;
  /* A full stop is about 6px wide at this size — legible, but it reads as
     punctuation. Scaling the glyph is what turns it into the mark; line-height:0
     keeps the enlarged box from pushing the header taller, and the negative
     margins take back the space the wider glyph would otherwise add. */
  font-size: 2.2em;
  line-height: 0;
  margin: 0 -.02em 0 -.04em;
}
.brand small { font-weight: 500; color: var(--ink-3); font-size: .74rem; }
.top .spacer { flex: 1; }

/* The readiness score, kept in the top bar on every screen. It is the one
   number the site is about, and burying it on the home page meant he only met
   it when he went looking. Small, quiet, and it does not shout when it is 0 —
   a beginner does not need their zero emphasised on every screen. */
.scorechip {
  text-decoration: none;
  border: 1px solid var(--line); border-radius: 9px;
  height: 34px; min-width: 46px; padding: 0 .5rem;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.scorechip:hover { background: var(--surface-2); color: var(--ink); }
.scorechip.warm { color: #ff4700; border-color: color-mix(in srgb, #ff4700 40%, var(--line)); }

.iconbtn {
  background: transparent; border: 1px solid var(--line); border-radius: 9px;
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  color: var(--ink-2); font-size: .95rem;
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }

nav.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs-in { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(8,1fr); }
.tabs a {
  padding: .5rem .1rem .55rem; text-align: center; text-decoration: none;
  color: var(--ink-3); font-size: .6rem; font-weight: 550; letter-spacing: 0;
  display: flex; flex-direction: column; gap: .15rem; align-items: center;
  border-top: 2px solid transparent;
}
.tabs a .ic { font-size: 1.1rem; line-height: 1; }
.tabs a.on { color: var(--accent); border-top-color: var(--accent); }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin: .75rem 0;
  box-shadow: var(--shadow);
}
.card.tight { padding: .75rem .9rem; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }

.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); font-size: .85rem; }
.small { font-size: .85rem; }

.pill {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 650; letter-spacing: .02em;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.pill.comun { background: var(--accent-soft); color: var(--accent); }
.pill.esp   { background: var(--es-soft);     color: var(--es); }
.pill.ok    { background: var(--ok-soft);     color: var(--ok); }
.pill.bad   { background: var(--bad-soft);    color: var(--bad); }
.pill.warn  { background: var(--warn-soft);   color: var(--warn); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .68rem 1.05rem; border-radius: 11px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; font-weight: 600; font-size: .95rem;
  text-decoration: none; color: var(--ink); transition: transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.06); background: var(--accent); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; }
.btnrow { display: flex; gap: .5rem; flex-wrap: wrap; }
.btnrow .btn { flex: 1 1 auto; }

/* ---------- home ---------- */
.hero { display: flex; gap: 1rem; align-items: center; }
.ring { flex: 0 0 auto; width: 82px; height: 82px; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring .val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em;
}
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .9rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
  display: block;
}
.tile:hover { background: var(--surface-2); }
.tile .ic { font-size: 1.3rem; }
.tile b { display: block; margin-top: .3rem; font-size: .95rem; }
.tile span { color: var(--ink-3); font-size: .78rem; }

.stat { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.stat:last-child { border-bottom: 0; }
.stat b { font-variant-numeric: tabular-nums; }

/* ---------- explain-aloud ---------- */
.aloud {
  border: 1.5px dashed var(--accent); background: var(--accent-soft);
  border-radius: var(--radius); padding: .9rem; margin: .75rem 0;
}
.aloud .why { font-weight: 650; display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; }
.mic {
  width: 100%; padding: .9rem; border-radius: 11px; border: 1px solid var(--accent);
  background: var(--surface); color: var(--accent); font-weight: 650; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.mic.live { background: var(--accent); color: var(--accent-ink); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .72 } }
.transcript {
  margin-top: .6rem; padding: .6rem .7rem; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .92rem; min-height: 2.4rem; color: var(--ink-2);
}
.transcript.has { color: var(--ink); }
.ideas { list-style: none; padding: 0; margin: .6rem 0 0; }
.ideas li {
  display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0;
  font-size: .9rem; border-bottom: 1px solid var(--line);
}
.ideas li:last-child { border-bottom: 0; }
.ideas .tick { flex: 0 0 1.1rem; font-weight: 700; }
.ideas li.hit .tick { color: var(--ok); }
.ideas li.miss .tick { color: var(--ink-3); }
.ideas li.miss { color: var(--ink-2); }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; }

/* ---------- questions ---------- */
.stem { font-size: 1.05rem; font-weight: 550; margin-bottom: .2rem; }
.stem-es {
  font-size: .95rem; color: var(--es); background: var(--es-soft);
  padding: .5rem .65rem; border-radius: 9px; margin: .5rem 0; border: 1px solid color-mix(in srgb, var(--es) 22%, transparent);
}
.opts { display: grid; gap: .45rem; margin: .8rem 0 0; }
.opt {
  text-align: left; padding: .7rem .8rem; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem;
}
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt .k {
  flex: 0 0 1.4rem; height: 1.4rem; border-radius: 6px; background: var(--surface-2);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: var(--ink-2);
}
.opt .txt { flex: 1; }
.opt .txt em { display: block; font-style: normal; color: var(--es); font-size: .85rem; margin-top: .15rem; }
.opt.correct { border-color: var(--ok); background: var(--ok-soft); }
.opt.correct .k { background: var(--ok); color: #fff; }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.wrong .k { background: var(--bad); color: #fff; }
.opt:disabled { cursor: default; }

.explain { margin-top: .8rem; padding: .8rem; border-radius: 11px; background: var(--surface-2); font-size: .93rem; }
.explain h4 { margin: 0 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.explain + .explain { margin-top: .5rem; }

.terms { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.term {
  font-size: .8rem; padding: .2rem .5rem; border-radius: 7px;
  background: var(--es-soft); color: var(--es); border: 1px solid color-mix(in srgb, var(--es) 20%, transparent);
}
.term b { font-weight: 650; }
.term span { opacity: .75; }

.es-lead {
  font-size: 1.06rem; font-weight: 550; color: var(--ink);
  border-left: 3px solid var(--es); padding-left: .65rem; margin-bottom: .1rem;
}
.peek {
  background: transparent; border: 1px solid var(--line); color: var(--ink-3);
  font-size: .74rem; padding: .12rem .5rem; border-radius: 7px; cursor: pointer;
  margin: .35rem 0 .1rem;
}
.peek:hover { border-color: var(--es); color: var(--es); }
.peeked {
  font-size: .9rem; color: var(--ink-2); padding: .35rem .6rem;
  background: var(--surface-2); border-radius: 8px; margin-bottom: .3rem;
}

/* ---------- progress bar ---------- */
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: .5rem 0; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.bar.ok > i { background: var(--ok); }

/* ---------- route checklist ---------- */
.step { border-left: 2px solid var(--line); padding: 0 0 1rem 1rem; margin-left: .5rem; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--line);
}
.step.done::before { background: var(--ok); border-color: var(--ok); }
.step.done > .sh > b { text-decoration: line-through; color: var(--ink-3); }
.sh { display: flex; gap: .5rem; align-items: baseline; cursor: pointer; }
.sh b { flex: 1; font-size: .98rem; }
.sbody { font-size: .9rem; color: var(--ink-2); margin-top: .4rem; }
.sbody ul { margin: .4rem 0; padding-left: 1.1rem; }
.sbody li { margin: .2rem 0; }

/* ---------- exam ---------- */
.examhead {
  position: sticky; top: 48px; z-index: 30; background: var(--bg);
  padding: .5rem 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .75rem; font-size: .9rem;
}
.examhead .timer.low { color: var(--bad); }

.result-big { font-size: 2.6rem; font-weight: 750; letter-spacing: -.03em; line-height: 1; }

/* ---------- vocab ---------- */
.vrow {
  display: flex; gap: .6rem; align-items: center; padding: .5rem 0;
  border-bottom: 1px solid var(--line);
}
.vrow:last-child { border-bottom: 0; }
.vrow .es { font-weight: 620; color: var(--es); flex: 0 0 42%; }
.vrow .en { flex: 1; color: var(--ink-2); font-size: .92rem; }

.flash { text-align: center; padding: 1.5rem .5rem; }
.flash .big { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.flash .sub { color: var(--ink-3); margin-top: .3rem; font-size: .9rem; }

.trap { border-left: 3px solid var(--warn); background: var(--warn-soft); padding: .6rem .75rem; border-radius: 0 9px 9px 0; margin: .5rem 0; font-size: .9rem; }
.trap b { color: var(--warn); }

label.field { display: block; margin: .6rem 0; font-size: .9rem; font-weight: 600; }
label.field input, label.field select {
  display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-size: .95rem;
}

.notice { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: .7rem .85rem; border-radius: 0 9px 9px 0; font-size: .9rem; margin: .6rem 0; }
.notice b { color: var(--accent); }

footer.foot { text-align: center; color: var(--ink-3); font-size: .78rem; padding: 1.5rem 0 .5rem; line-height: 1.5; }
footer.foot a { color: var(--ink-3); }

.hidden { display: none !important; }

/* ---------- diagrams ---------- */
.diagram {
  margin: .8rem 0; padding: .6rem; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--line);
  overflow-x: auto;
}
.diagram svg { display: block; width: 100%; height: auto; min-width: 300px; }

/* ---------- signs ---------- */
.signgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .55rem; }
.signcell {
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  padding: .55rem .35rem; text-align: center; cursor: pointer; color: inherit;
}
.signcell:hover { border-color: var(--accent); background: var(--surface-2); }
.signcell img { width: 52px; height: 52px; object-fit: contain; display: block; margin: 0 auto .3rem; }
.signcell b { display: block; font-size: .68rem; color: var(--ink-3); font-weight: 650; letter-spacing: .02em; }
.signcell span { display: block; font-size: .7rem; margin-top: .12rem; line-height: 1.25; }

.signbig { text-align: center; padding: .5rem 0 .2rem; }
.signbig img { width: 128px; height: 128px; object-fit: contain; }
.signbig .code { font-size: .72rem; color: var(--ink-3); font-weight: 650; letter-spacing: .04em; margin-top: .4rem; }

.credit { font-size: .72rem; color: var(--ink-3); line-height: 1.5; }
.credit a { color: var(--ink-3); }

@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(3,1fr); }
}


/* ---------- readiness ring ---------- */
.ring.big { width: 96px; height: 96px; }
.ring.big .val { font-size: 1.35rem; }

/* ---------- achievements ---------- */
.badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--ok-soft); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
  border-radius: 999px; padding: .2rem .6rem; font-size: .78rem; font-weight: 600;
}
.badge .ic { font-size: .95rem; }

.toast {
  position: fixed; left: 50%; bottom: 76px; transform: translate(-50%, 20px);
  z-index: 90; background: var(--surface); border: 1px solid var(--ok);
  border-radius: 12px; padding: .6rem .85rem; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: .6rem; font-size: .88rem;
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
  max-width: min(90vw, 340px);
}
.toast.in { opacity: 1; transform: translate(-50%, 0); }
.toast .ic { font-size: 1.4rem; }

/* ---------- sparkline ---------- */
.spark { width: 100%; height: 44px; display: block; margin: .3rem 0; }

/* ---------- word glossing ---------- */
.gl {
  border-bottom: 1px dotted var(--es); cursor: pointer; position: relative;
}
.gl.on { background: var(--es-soft); border-radius: 3px; }
.glpop {
  position: absolute; left: 50%; bottom: 130%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: .25rem .5rem; border-radius: 7px;
  font-size: .78rem; white-space: nowrap; z-index: 60; font-weight: 500;
  pointer-events: none; box-shadow: var(--shadow);
}


/* ---------- scene illustrations ---------- */
:root {
  --sc-road:   #4a4a4a;
  --sc-edge:   #f2f2f2;
  --sc-mark:   #f2f2f2;
  --sc-ground: #ddd6c9;
  --sc-kerb:   #b9b1a3;
  --sc-car:    #6b7f95;
  --sc-lorry:  #8a8f96;
  --sc-glass:  #cfe0ee;
  --sc-lamp:   #ffe9a8;
  --sc-halo:   rgba(247,245,242,.85);
  --sc-pill:   #fbfaf8;
  --sc-tyre:   #2b2b2d;
  --sc-helmet: #f4f1ec;
  --sc-sky:    #bcd4e6;
  --sc-build:  #c4b8a6;
  --sc-car2:   #8d6f6f;
  --sc-lorry2: #a8adb4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sc-road:#3a3a3c; --sc-edge:#d6d6d6; --sc-mark:#d6d6d6;
    --sc-ground:#241f1b; --sc-kerb:#4a423a; --sc-car:#5d7186;
    --sc-lorry:#767c84; --sc-glass:#9dc0da; --sc-lamp:#f5d98a; --sc-halo:rgba(20,18,15,.8); --sc-pill:#1d1a17; --sc-tyre:#141416; --sc-helmet:#e8e3dc; --sc-sky:#22303c; --sc-build:#33302b; --sc-car2:#7a5f5f; --sc-lorry2:#8b9098;
  }
}
:root[data-theme="dark"] {
  --sc-road:#3a3a3c; --sc-edge:#d6d6d6; --sc-mark:#d6d6d6;
  --sc-ground:#241f1b; --sc-kerb:#4a423a; --sc-car:#5d7186;
  --sc-lorry:#767c84; --sc-glass:#9dc0da; --sc-lamp:#f5d98a; --sc-halo:rgba(20,18,15,.8); --sc-pill:#1d1a17; --sc-tyre:#141416; --sc-helmet:#e8e3dc; --sc-sky:#22303c; --sc-build:#33302b; --sc-car2:#7a5f5f; --sc-lorry2:#8b9098;
}
.scene {
  width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--line); background: var(--sc-ground);
}
.card .scene { margin: .8rem 0; }


/* ---------- reading size ----------
   Set on the root element, so every rem-based size in the sheet scales with it.
   Kept in localStorage rather than a cookie: preferences never need to reach the
   server, and adding preference cookies would break the privacy notice's claim
   that there is exactly one strictly-necessary cookie. */
:root { font-size: 16px; }
:root[data-size="s"]  { font-size: 14.5px; }
:root[data-size="m"]  { font-size: 16px; }
:root[data-size="l"]  { font-size: 18px; }
:root[data-size="xl"] { font-size: 20.5px; }

/* ---------- the quick panel behind Aa ---------- */
.pop {
  position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.35);
  display: grid; place-items: start center; padding-top: 56px;
}
.pop .inner {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); width: min(92vw, 380px); padding: .9rem 1rem 1rem;
  max-height: 80vh; overflow-y: auto;
}
.pop h3 { margin: .2rem 0 .5rem; font-size: .95rem; }
.sizerow { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.sizerow button {
  border: 1px solid var(--line); background: var(--surface); border-radius: 10px;
  padding: .5rem .2rem; cursor: pointer; color: var(--ink); line-height: 1;
}
.sizerow button.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.sizerow button span { display: block; font-size: .62rem; color: var(--ink-3); margin-top: .25rem; font-weight: 500; }
.langlist { display: grid; gap: .3rem; margin-top: .3rem; }
.langlist button {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--line); background: var(--surface); border-radius: 10px;
  padding: .5rem .7rem; cursor: pointer; color: var(--ink); font-size: .9rem;
}
.langlist button.on { border-color: var(--accent); color: var(--accent); font-weight: 650; }
.langlist button .pc { font-size: .72rem; color: var(--ink-3); font-weight: 500; }

/* The one offer. Deliberately quiet: a left rule and the page's own colours,
   no box shadow, no accent fill. It appears at most once, on a result that has
   just told the learner their Spanish reading is what cost them — so it has to
   read as the next sentence of that result, not as an advert interrupting it. */
.card.offer {
  border-left: 3px solid var(--es);
  background: transparent;
}
.card.offer .btn { font-size: .85rem; padding: .35rem .7rem; }

/* The confidence question. Deliberately plain and deliberately in the flow
   rather than a modal: it is one tap between committing to an answer and
   learning whether it was right, and anything heavier would make people start
   clicking through it without reading. */
.conf { margin: .8rem 0; padding: .7rem; border: 1px dashed var(--line); border-radius: 10px; }

/* An option he has picked but whose verdict he has not seen yet. It must not
   look right or wrong — that is the whole point of the beat. */
.opt.chosen { border-color: var(--ink-3); background: var(--surface-2); }
.btn.warm { border-color: color-mix(in srgb, #ff4700 45%, var(--line)); color: #ff4700; }

/* The typed explanation. Sized so three lines of reasoning fit without
   scrolling, because the exercise is a sentence or two, not an essay — a big
   empty box asks for more than the task needs and gets less. */
.explainbox {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: .95rem; line-height: 1.45;
  padding: .6rem .7rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  resize: vertical; min-height: 4.5rem;
}
.explainbox:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.explainbox:disabled { background: var(--surface-2); color: var(--ink-2); }

/* ---------- the instructor's sentence ----------
   Deliberately quiet: it is a remark from somebody sitting beside you, not a
   score. The three states differ by border colour only — a big green tick
   would turn the exercise back into something to win. */
.coach {
  margin-top: .6rem; padding: .6rem .7rem; border-radius: 10px;
  font-size: .92rem; line-height: 1.45;
  background: var(--surface-2); border-left: 3px solid var(--line);
}
.coach b { font-weight: 650; }
.coach.thinking { color: var(--ink-3); font-style: italic; }
.coach.full    { border-left-color: var(--ok); }
.coach.partial { border-left-color: var(--warn); }
.coach.none    { border-left-color: var(--accent); }

/* ---------- the front door ---------- */
.landing { max-width: 34rem; margin: 0 auto; }
.landing-brand {
  font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; text-align: center; margin: 1.2rem 0 .3rem;
}
.landing-brand .dot { color: #ff4700; }
.promise { text-align: center; color: var(--ink-2); font-size: 1.02rem; margin: 0 auto 1.1rem; max-width: 30rem; line-height: 1.5; }
.wizard h2 { font-size: 1.15rem; margin: .2rem 0 .5rem; }
.dots { display: flex; gap: .4rem; justify-content: center; margin-bottom: .9rem; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: block; }
.dots i.done { background: var(--ink-3); }
.dots i.on { background: var(--accent); width: 22px; border-radius: 4px; }
.langlist.wiz button, .sizerow.wiz button { font-size: 1.05rem; padding: .7rem .8rem; }
.choices { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; margin: .6rem 0; }
.choices.col { grid-template-columns: 1fr; }
.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left;
  padding: .8rem .9rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer;
}
.choice b { font-size: 1.3rem; }
.choice span { font-weight: 600; }
.choice small { color: var(--ink-3); font-size: .8rem; line-height: 1.35; }
.choice.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.landing-points { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .6rem; }
.landing-points li { font-size: .92rem; color: var(--ink-2); line-height: 1.45; padding-left: 1rem; border-left: 3px solid var(--line); }
.landing-points li b { color: var(--ink); }
@media (max-width: 420px) { .choices { grid-template-columns: 1fr; } }

/* ---------- how you explain: chosen per question ---------- */
.modeswitch { display: flex; gap: .3rem; margin-bottom: .7rem; }
.modeswitch button {
  flex: 1; padding: .4rem .3rem; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); font-size: .82rem; cursor: pointer; color: var(--ink-2);
}
.modeswitch button.on { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-weight: 600; }