/* Rolig, stor tekst, få elementer pr. skærm. Én handling ad gangen. */
:root{
  --bg:#f5f7f6; --surface:#fff; --ink:#17302d; --muted:#53655f; --line:#d6dfdb;
  --accent:#0f7a6c; --accent-ink:#fff; --soft:#dcefeb; --now:#d9822b;
  font-family:"Atkinson Hyperlegible",-apple-system,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1716; --surface:#16211f; --ink:#e3ece9; --muted:#9db0aa; --line:#2a3a37;
  --accent:#4fc3b0; --accent-ink:#0f1716; --soft:#16342f; --now:#f0a55a; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-size:19px;line-height:1.5;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0) max(16px,env(safe-area-inset-right,0)) env(safe-area-inset-bottom,0) max(16px,env(safe-area-inset-left,0))}
.top{display:flex;align-items:center;gap:12px;max-width:560px;width:100%;margin:0 auto;padding-block:14px}
.progress{flex:1;height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--now);border-radius:4px;transition:width .3s}
.count{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:3.5em;text-align:right}
.screen{flex:1;max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding-block:12px 32px}
.group{font-size:.95rem;color:var(--muted);margin:0}
h1{font-size:1.6rem;line-height:1.25;margin:0;text-wrap:balance}
.hint{color:var(--muted);font-size:.95rem;margin:0}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{font:inherit;text-align:left;padding:16px 18px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--soft)}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale .opt{text-align:center;font-size:1.3rem;font-weight:700;padding:18px 0}
.ends{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted)}
textarea{font:inherit;width:100%;min-height:140px;padding:14px;border-radius:12px;border:2px solid var(--line);background:var(--surface);color:var(--ink);resize:vertical}
textarea:focus,.opt:focus-visible,button:focus-visible{outline:3px solid var(--now);outline-offset:2px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}
.primary{font:inherit;font-weight:700;padding:16px 24px;border-radius:12px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;flex:1}
.ghost{font:inherit;padding:10px 6px;border:0;background:none;color:var(--muted);cursor:pointer}
.skip{font:inherit;padding:16px 18px;border-radius:12px;border:2px solid var(--line);background:none;color:var(--muted);cursor:pointer}
.err{color:var(--now);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.progress span{transition:none}}