/* Layout: single reading column (max 720px), stacked "stations" a student works through top to bottom on a phone. */
:root{
  --bg:#eef2f6; --paper:#ffffff; --ink:#1b2430; --muted:#5f6b7a; --line:#dbe2ea;
  --accent:#20508a; --accent-soft:#e1eaf5;
  --inf:#d9ead3; --pres:#b6d7a8; --past:#93c47d; --adj:#f4cce0; --time:#c9e0f8;
  --ok:#2e7d4f; --ok-soft:#dcf1e4; --no:#b3392f; --no-soft:#f9dfdc;
  --display:"Jost",system-ui,sans-serif; --body:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12171d; --paper:#1a2129; --ink:#e6ebf1; --muted:#9aa6b4; --line:#2c3642; --accent:#8db6ee; --accent-soft:#1f2e42;
  --inf:#3a4d33; --pres:#466a38; --past:#5a8a45; --adj:#5c3248; --time:#29435f; --ok:#76d39b; --ok-soft:#1d3a2a; --no:#f29a8f; --no-soft:#422220; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12171d; --paper:#1a2129; --ink:#e6ebf1; --muted:#9aa6b4; --line:#2c3642; --accent:#8db6ee; --accent-soft:#1f2e42;
  --inf:#3a4d33; --pres:#466a38; --past:#5a8a45; --adj:#5c3248; --time:#29435f; --ok:#76d39b; --ok-soft:#1d3a2a; --no:#f29a8f; --no-soft:#422220; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body)}
.wrap{max-width:720px;margin:0 auto;padding-inline:16px;padding-block:24px 80px;display:flex;flex-direction:column;gap:18px}
header .eyebrow{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
h1{font:400 clamp(2rem,6vw,2.8rem)/1.1 var(--display);letter-spacing:-.01em;margin:6px 0 8px;text-wrap:balance}
header p{margin:0;color:var(--muted)}
.progress{display:flex;gap:6px;margin-top:14px}
.progress span{flex:1;height:6px;border-radius:9px;background:var(--line)}
.progress span.on{background:var(--accent)}
section.station{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 18px}
.station h2{font:500 1.35rem/1.2 var(--display);margin:0 0 4px;display:flex;gap:10px;align-items:baseline}
.station h2 .n{font:600 .85rem var(--body);color:var(--accent);background:var(--accent-soft);border-radius:99px;padding:1px 9px}
.station .lead{color:var(--muted);margin:0 0 14px;font-size:.95rem}
/* word bank */
.groups{display:flex;flex-direction:column;gap:14px}
.grp h3{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.cards{display:flex;flex-wrap:wrap;gap:8px}
.card{border:1px solid #111;background:#111;color:#fff;border-radius:10px;padding:10px 14px;font:inherit;cursor:pointer;min-width:96px;min-height:48px;text-align:center;transition:background .2s,border-color .2s}
.card .sv{display:none;font-size:1.2rem;font-weight:500}
.card .en{font-size:.85rem}
.card.flip{background:#e8f6e3;border-color:#bfe0b4;color:#1c2b18;animation:flipin .25s ease}
.mine{margin:6px 0 12px;font-weight:500;color:var(--muted)}.mine b{color:var(--ink)}
.card.flip .sv{display:inline}.card.flip .en{display:none}
@keyframes flipin{0%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
/* reading */
.key{display:flex;flex-wrap:wrap;gap:6px;font-size:.8rem;margin-bottom:14px}
.key span{border-radius:6px;padding:2px 8px}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tabs button{font:inherit;font-size:.9rem;border:1px solid var(--line);background:none;color:var(--ink);border-radius:99px;padding:4px 14px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.text{font-size:1.15rem;line-height:1.9}
.text .w{cursor:pointer;border-radius:4px;padding:0 2px}
.text .w:hover{outline:1px dashed var(--muted)}
.inf{background:var(--inf)}.pres{background:var(--pres)}.past{background:var(--past)}.adj{background:var(--adj)}.time{background:var(--time)}.ett{font-style:italic}
.gloss{min-height:1.6em;margin-top:10px;color:var(--accent);font-weight:700}
[hidden]{display:none!important}.listen{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.listen audio{flex:1;min-width:220px;height:40px}#slow[aria-pressed=true]{background:var(--ink,#222);color:var(--bg,#fff)}
.btn{font:inherit;font-weight:500;border:0;border-radius:10px;padding:9px 16px;background:var(--accent);color:var(--paper);cursor:pointer}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
/* cloze */
.cloze{display:flex;flex-direction:column;gap:12px}
.cl{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cl input{font:inherit;width:9.5em;border:0;border-bottom:2px solid var(--line);background:none;color:var(--ink);padding:2px 4px}
.cl input:focus{outline:none;border-color:var(--accent)}
.cl .hint{color:var(--muted);font-size:.85rem}
.cl.ok input{border-color:var(--ok);color:var(--ok);font-weight:700}
.cl.no input{border-color:var(--no);color:var(--no)}
.score{margin-top:12px;font-weight:700}
/* writing */
label.q{display:block;font-weight:700;margin:12px 0 4px}
input.ans,textarea{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg);color:var(--ink)}
textarea{min-height:150px;resize:vertical}
.helpers{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:.82rem;border-radius:99px;padding:2px 10px;border:1px solid var(--line);color:var(--muted)}
.chip.got{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.remember{background:var(--accent-soft);border-radius:12px;padding:12px 14px;font-size:.95rem}
.linkbtn{font:inherit;background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer}
.checks label{display:flex;gap:10px;align-items:flex-start;padding:5px 0}
.checks input{width:20px;height:20px;accent-color:var(--accent);margin-top:3px}
.send{position:sticky;bottom:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 18px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:0 -6px 24px rgba(20,40,70,.08)}
.send p{margin:0;font-size:.9rem;color:var(--muted);max-width:28em}
.toast{color:var(--ok);font-weight:700}
footer{text-align:center;color:var(--muted);font-size:.8rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opts{display:flex;flex-direction:column;gap:12px}
.opt{display:flex;flex-direction:column;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.opt:last-child{border-bottom:0}
.opt .s{font-size:1.05rem}.opt .s b{letter-spacing:.05em}
.opt .h{color:var(--muted);font-size:.85rem}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills label{position:relative}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills span{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:5px 14px;cursor:pointer;background:var(--bg)}
.pills input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.pills input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.opt.ok .pills input:checked+span{background:var(--ok);border-color:var(--ok)}
.opt.no .pills input:checked+span{background:var(--no);border-color:var(--no)}
.opt .why{display:none;font-size:.85rem;color:var(--muted)}.opt.no .why,.opt.ok .why{display:block}
.rule{background:var(--accent-soft);border-radius:12px;padding:12px 14px;font-size:.95rem;margin-bottom:14px}
.rule table{border-collapse:collapse;margin-top:6px;width:100%}.rule td{padding:2px 8px 2px 0;vertical-align:top}
.rule td:first-child{color:var(--muted);white-space:nowrap}
.checkrow{margin-top:14px;display:flex;gap:10px;align-items:center}
:root{--still:#ffd9a8;--move:#c4561a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--still:#6b4416;--move:#f0a36b}}
:root[data-theme="dark"]{--still:#6b4416;--move:#f0a36b}
.still{background:var(--still)}
.move{box-shadow:inset 0 -3px 0 var(--move);background:color-mix(in srgb,var(--still) 35%,transparent)}
.trick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.trick>div{border-radius:12px;padding:12px 14px;font-size:.95rem}
.trick .m{border:2px solid var(--move)}.trick .s{background:var(--still)}
.trick b.big{display:block;font-size:1.05rem;margin-bottom:4px}
.trick .ex{display:block;margin-top:6px;font-style:italic}
@media (max-width:480px){.trick{grid-template-columns:1fr}}

.note{font-size:.85rem;color:var(--muted);margin-top:8px}
a.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:.9rem;margin-bottom:4px}a.back:hover{color:var(--accent)}
/* library */
.lib-level{display:flex;flex-direction:column;gap:12px}
.lib-level>h2{font:500 1.1rem/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 0}
a.hw{display:block;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
a.hw:hover{border-color:var(--accent);transform:translateY(-1px)}
a.hw .tag{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
a.hw h3{font:500 1.3rem/1.2 var(--display);margin:4px 0 6px}
a.hw p{margin:0;color:var(--muted);font-size:.95rem}
a.hw .go{display:inline-block;margin-top:12px;font-weight:500;color:var(--accent)}
.soon{color:var(--muted);font-size:.95rem;text-align:center;margin:8px 0}

/* ---- design v2: day/dark mode, bigger card and rule text ---- */
:root{--bg:#f3f4f1;--paper:#ffffff;--line:#dfe3e7;--card:#1f2a36;--card-ink:#ffffff;--flip:#e6f4df;--flip-line:#bcdcae;--flip-ink:#1c2b18}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#15181c;--paper:#21262d;--line:#343d48;--card:#3b4654;--card-ink:#f3f5f7;--flip:#d9efd0;--flip-line:#9fcf8c;--flip-ink:#14210f}}
:root[data-theme="dark"]{--bg:#15181c;--paper:#21262d;--ink:#e6ebf1;--muted:#a3aebb;--line:#343d48;--accent:#8db6ee;--accent-soft:#25344a;
  --inf:#3a4d33;--pres:#466a38;--past:#5a8a45;--adj:#5c3248;--time:#29435f;--ok:#76d39b;--ok-soft:#1d3a2a;--no:#f29a8f;--no-soft:#422220;
  --still:#6b4416;--move:#f0a36b;--card:#3b4654;--card-ink:#f3f5f7;--flip:#d9efd0;--flip-line:#9fcf8c;--flip-ink:#14210f;color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
body{background:var(--bg);transition:background .2s,color .2s}
section.station{box-shadow:0 1px 2px rgba(20,30,40,.04)}
.card{background:var(--card);border-color:var(--card);color:var(--card-ink);padding:12px 16px;min-height:52px}
.card .en,.card .sv{font-size:1.1rem}
.card .en{font-weight:400}.card .sv{font-weight:500}
.card.flip{background:var(--flip);border-color:var(--flip-line);color:var(--flip-ink);animation:flipfade .2s ease}
@keyframes flipfade{from{opacity:.4}to{opacity:1}}
.card .sv{letter-spacing:.01em}
.station .lead{font-size:1.02rem}
.rule,.remember{font-size:1.06rem;line-height:1.7}
.rule td{padding:4px 10px 4px 0}
.trick>div{font-size:1.06rem;line-height:1.6}
.opt .h{font-size:.92rem}.opt .why{font-size:.92rem}
.note{font-size:.92rem}
.key{font-size:.85rem}
.theme-toggle{position:absolute;top:14px;right:14px;z-index:20;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.theme-toggle:hover{border-color:var(--accent)}
header{padding-right:48px}

/* v3: coloured show buttons, light-pink adjectives, highlights in rule boxes */
#show button[data-show=verbs]{background:var(--pres);border-color:var(--pres)}
#show button[data-show=time]{background:var(--time);border-color:var(--time)}
#show button[data-show=order]{border:2px solid #6a8fc7}
#show button.on{color:var(--ink);box-shadow:0 0 0 2px var(--ink);font-weight:600}
#show button[data-show=verbs].on{background:var(--pres)}#show button[data-show=time].on{background:var(--time)}
#show button[data-show=order].on{background:var(--paper)}
.hl{border-radius:5px;padding:1px 5px;font-style:normal}
.text.plain .w{color:inherit!important}
:root{--adj-ink:inherit}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--adj:#f3c6dc;--adj-ink:#2b1a22}}
:root[data-theme="dark"]{--adj:#f3c6dc;--adj-ink:#2b1a22}
.adj{color:var(--adj-ink)}

/* show buttons + plain text + word order */
.show{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.show button{font:inherit;font-size:.92rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:99px;padding:6px 14px;cursor:pointer}
.show button.on{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.prompt{background:var(--accent-soft);border-radius:10px;padding:9px 13px;font-size:.98rem;margin-bottom:14px}
.text.plain .w{background:none!important;font-style:normal!important}
.text.show-verbs .w.inf,.text.show-all .w.inf{background:var(--inf)!important}
.text.show-verbs .w.pres,.text.show-all .w.pres{background:var(--pres)!important}
.text.show-verbs .w.past,.text.show-all .w.past{background:var(--past)!important}
.text.show-time .w.time,.text.show-all .w.time{background:var(--time)!important}
.text.show-all .w.adj{background:var(--adj)!important}
.text.show-all .w.ett{font-style:italic!important}
.text.show-order{display:flex;flex-direction:column;gap:16px;line-height:2.1}
.text.show-order .pos1{border:2px solid #6a8fc7;border-radius:8px;padding:2px 5px;position:relative}
.text.show-order .pos2{background:var(--past);border-radius:6px;padding:2px 5px;position:relative;font-weight:500}
.text.show-order .pos1::before,.text.show-order .pos2::before{position:absolute;top:-12px;left:-6px;font-size:.68rem;font-weight:600;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:99px;padding:0 6px;line-height:1.4;white-space:nowrap}
.text.show-order .pos1::before{content:"1"}.text.show-order .pos2::before{content:"2"}
#key[data-mode=verbs] .adj,#key[data-mode=verbs] .time,#key[data-mode=verbs] .ett,#key[data-mode=time] span:not(.time){display:none}
.text.show-order .w.sa{font-style:italic!important;color:var(--muted)}
.rule table.order{margin:8px 0 10px}.rule table.order th{text-align:left;font-size:.8rem;color:var(--muted);font-weight:600;padding:0 10px 2px 0}
.rule+.rule{margin-top:10px}
.opt .pills span{border-radius:12px;text-align:left}
.rw{display:flex;flex-direction:column;gap:14px}
.rwi .q{color:var(--muted);margin-bottom:4px}
.rwi input{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--bg);color:var(--ink)}
.rwi.ok input{border-color:var(--ok);color:var(--ok)}.rwi.no input{border-color:var(--no);color:var(--no)}
details.model{margin-top:12px}details.model summary{cursor:pointer;color:var(--accent);font-weight:500}details.model p{background:var(--accent-soft);border-radius:10px;padding:10px 12px;margin:8px 0 0}