/* Grammar Quiz. "Tiles" design: tinted background, white tiles, ring beside a categories tile, pill buttons.
   One spacing scale (--s1..--s6, vertical ones follow the Spacing setting), one radius (--r, pills use --pill). */
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0;touch-action:manipulation}
:root{
  --u:.78;--fs:1;--accent:#e8590c;--on-accent:#fff;
  --s1:calc(4px*var(--u));--s2:calc(8px*var(--u));--s3:calc(12px*var(--u));--s4:calc(16px*var(--u));--s5:calc(24px*var(--u));--s6:calc(32px*var(--u));
  --pad:20px;--r:24px;--pill:999px;--tap:48px;
  --font:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;
  --surface:#fff;--ink:#14171c;--muted:#656c78;--line:#e1e4ea;--good:#2c8a5a;--bad:#cf4536;
  --bg:color-mix(in oklab,var(--accent) 12%,#f5f3ef);
  --accent-text:color-mix(in oklab,var(--accent) 72%,#000);
  --tile:color-mix(in oklab,var(--accent) 30%,var(--surface));
}
:root[data-density=regular]{--u:1}
:root[data-density=roomy]{--u:1.22}
:root[data-size=s]{--fs:.9}
:root[data-size=l]{--fs:1.14}
:root[data-theme=dark]{--surface:#1a1d22;--ink:#f1f3f6;--muted:#9aa2ae;--line:#2a2e36;--good:#4fb783;--bad:#ef6f5e;
  --bg:color-mix(in oklab,var(--accent) 7%,#0f1114);--accent-text:color-mix(in oklab,var(--accent) 80%,#fff)}
html{background:var(--bg);color-scheme:light}
html[data-theme=dark]{color-scheme:dark}
html,body{height:100%}
body{font:calc(16px*var(--fs))/1.4 var(--font);background:var(--bg);color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}

/* ---------- Screens ---------- */
.screen{display:none;height:100dvh;flex-direction:column;max-width:1040px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + var(--s4)) calc(var(--pad) + env(safe-area-inset-right)) 0 calc(var(--pad) + env(safe-area-inset-left))}
body[data-screen=home] #home,body[data-screen=quiz] #quiz,body[data-screen=done] #done,body[data-screen=cats] #cats,body[data-screen=settings] #settings{display:flex}
.scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{display:none}
.dock{display:flex;gap:var(--s3);padding:var(--s3) 0 calc(var(--s4) + env(safe-area-inset-bottom))}
.primary,.secondary{flex:1;min-height:max(var(--tap),calc(56px*var(--u)));border-radius:var(--pill);font-weight:700;font-size:calc(19px*var(--fs));display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:0 var(--s5)}
.primary{background:var(--accent);color:var(--on-accent)}
.primary small{font-weight:700;font-size:1em}
.primary:disabled{opacity:.45}
.secondary{background:var(--surface);border:1px solid var(--line)}
.iconbtn{width:max(var(--tap),calc(56px*var(--u)));flex:none;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center}
.iconbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button:active:not(:disabled){transform:scale(.985)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
h1{font:600 calc(20px*var(--fs))/1.2 var(--font);letter-spacing:-.01em}
h2{font-size:calc(12px*var(--fs));font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.muted{color:var(--muted)}
.tile{background:var(--surface);border-radius:var(--r);padding:var(--s5) var(--s4);box-shadow:0 1px 2px rgba(0,0,0,.04)}

/* ---------- Home ---------- */
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);padding-top:var(--s4)}
.side{grid-column:1/-1}
.stat{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center;position:relative;padding-inline:var(--s3)}
.ring{width:112px;height:112px;flex:none}
.ring circle{fill:none;stroke-width:9}
.big{font:700 calc(30px*var(--fs))/1 var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.big span{font-size:.5em;margin-left:2px;letter-spacing:0}
.stat .big{position:absolute;left:0;right:0;top:calc(var(--s5) + 56px);transform:translateY(-50%)}
.stat .label{font-size:calc(15px*var(--fs))}
.stat .sub{font-size:calc(13px*var(--fs));color:var(--muted);min-height:1.4em}
.tile-cats{display:flex;flex-direction:column;justify-content:space-between;text-align:left;background:var(--tile);border-radius:var(--r);padding:var(--s5) var(--s4);min-height:132px}
.tile-cats b{display:block;font-size:calc(46px*var(--fs));line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile-cats span{font-size:calc(15px*var(--fs))}
.tile-cats i{font-style:normal;align-self:flex-end;font-size:20px;line-height:1}
.check{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;min-height:var(--tap);font-size:calc(16px*var(--fs))}
.check i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted);flex:none;display:grid;place-items:center;transition:background .15s,border-color .15s}
.check[aria-checked=true] i{background:var(--accent);border-color:var(--accent)}
.check[aria-checked=true] i::after{content:"";width:9px;height:5px;border:solid var(--on-accent);border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-1px)}
.check[aria-checked=true] span{color:var(--muted);text-decoration:line-through}
.week{display:flex;gap:6px;margin-top:var(--s2)}
.week b{flex:1;height:4px;border-radius:2px;background:var(--line)}
.week b.on{background:var(--accent)}
.week b.today{outline:1.5px solid var(--muted);outline-offset:2px}

/* ---------- Quiz ---------- */
.qhead{display:flex;align-items:center;gap:var(--s4);height:var(--tap)}
.qhead .x{width:var(--tap);height:var(--tap);margin-left:calc(var(--s3)*-1);display:grid;place-items:center;font-size:20px;color:var(--muted)}
.bar{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease-out}
.count{font-size:calc(13px*var(--fs));color:var(--muted);font-variant-numeric:tabular-nums}
.qbody{flex:1;min-height:0;display:flex;flex-direction:column}
.q{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:var(--s3);background:var(--surface);border-radius:var(--r);padding:var(--s5) var(--s4);margin:var(--s3) 0;box-shadow:0 1px 2px rgba(0,0,0,.04);overflow-y:auto}
.cat{font-size:calc(12px*var(--fs));font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.ins{display:block;font-size:calc(14px*var(--fs));color:var(--muted);margin-bottom:var(--s2)}
.sent{display:block;font:600 calc(25px*var(--fs))/1.25 var(--font);letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.blank{display:inline-block;min-width:2.6em;border-bottom:2px solid var(--accent-text);text-align:center;color:var(--good);line-height:1}
.blank:empty::after{content:"\00a0"}
.explain{font-size:calc(15px*var(--fs));color:var(--muted);min-height:1.4em}
.explain.show{color:var(--bad)}
.explain b{color:var(--ink)}
.answers{display:grid;gap:var(--s3);padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
.ans{min-height:max(60px,calc(78px*var(--u)));padding:var(--s3) var(--s4);text-align:left;font-size:calc(20px*var(--fs));font-weight:600;line-height:1.25;border-radius:var(--r);background:var(--surface);border:1px solid transparent;box-shadow:0 1px 2px rgba(0,0,0,.05);display:flex;align-items:center;gap:var(--s3);overflow-wrap:anywhere}
.ans .key{display:grid;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);place-items:center;font-size:13px;color:var(--muted);flex:none}
[data-answers=grid] .answers{grid-template-columns:1fr 1fr}
[data-answers=grid] .ans{justify-content:center;text-align:center;min-height:max(var(--tap),calc(72px*var(--u)));font-size:calc(18px*var(--fs))}
[data-answers=grid] .ans .key{display:none}
[data-answers=list] .ans{min-height:max(var(--tap),calc(56px*var(--u)));font-size:calc(18px*var(--fs))}
[data-answers=list] .ans .key{display:none}
.ans.wrong{border-color:var(--bad);color:var(--bad);text-decoration:line-through;opacity:.75}
.ans.right{background:var(--good);border-color:var(--good);color:#fff}
.ans.right .key{border-color:#fff;color:#fff}
.ans:disabled{cursor:default}
.type{display:none;gap:var(--s3);padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
.typing .type{display:flex}
.typing.hide-choices .answers{display:none}
.typing .answers{padding-bottom:var(--s3)}
.typing .ans:not(.right){opacity:.45}
.type input{flex:1;min-width:0;height:var(--tap);border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);padding:0 var(--s4);font-size:20px}
.type input.bad{border-color:var(--bad)}
.type .primary{flex:none;padding:0 var(--s5)}

/* ---------- Done ---------- */
#done .scroll{display:flex;flex-direction:column}
.donecard{margin:var(--s3) 0}
.done-top{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.done-top .big{font-size:calc(56px*var(--fs))}
.up{font-size:calc(16px*var(--fs));display:flex;gap:var(--s2);align-items:baseline;margin-top:var(--s2)}
.up b{color:var(--accent-text)}
.up b.down{color:var(--bad)}
.missed{margin-top:var(--s5)}
.miss{padding:var(--s3) 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s1);overflow-wrap:anywhere}
.miss:first-of-type{border-top:0}
.miss .p{font-size:calc(15px*var(--fs));color:var(--muted)}
.miss .a{font-size:calc(18px*var(--fs));font-weight:600}
.miss .a em{font-style:normal;color:var(--good)}
.miss .w{font-size:calc(14px*var(--fs));color:var(--muted)}

/* ---------- Categories and settings ---------- */
.list,.setbox{background:var(--surface);border-radius:var(--r);padding:0 var(--s4);margin-top:var(--s3)}
.crow{display:flex;align-items:center;gap:var(--s4);min-height:max(56px,calc(64px*var(--u)));border-top:1px solid var(--line)}
.list .crow:first-child,.setbox .set:first-child{border-top:0}
.crow .main{flex:1;min-width:0;text-align:left;padding:var(--s2) 0}
.crow .name{font-size:calc(16px*var(--fs));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .meta{display:flex;align-items:center;gap:var(--s3);font-size:calc(13px*var(--fs));color:var(--muted);margin-top:var(--s1)}
.ticks{display:flex;gap:2px}
.ticks b{width:6px;height:6px;border-radius:50%;background:var(--line)}
.ticks b.on{background:var(--accent)}
.crow.off .main{opacity:.45}
.sw{width:48px;height:30px;border-radius:15px;background:var(--line);position:relative;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s ease-out}
.sw[aria-checked=true]{background:var(--accent)}
.sw[aria-checked=true]::after{transform:translateX(18px)}
.set{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:max(var(--tap),calc(58px*var(--u)));border-top:1px solid var(--line);font-size:calc(16px*var(--fs));padding:var(--s2) 0}
.set>:first-child{flex:none}
.set.col{flex-direction:column;align-items:stretch;justify-content:center;gap:var(--s2)}
.set.col input{flex:none}
.set input{flex:1;min-width:0;height:var(--tap);border-radius:var(--pill);border:1px solid var(--line);background:var(--bg);padding:0 var(--s4);font-size:16px}
.stepper{display:flex;align-items:center;gap:var(--s1)}
.stepper button{width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:20px}
.stepper span{min-width:40px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.pills{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:var(--pill);padding:3px;flex-wrap:wrap;justify-content:flex-end}
.pills button{padding:var(--s2) var(--s3);border-radius:var(--pill);font-size:calc(14px*var(--fs));min-height:40px}
.pills button.on{background:var(--accent);color:var(--on-accent)}
.swatches{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.swatches button{width:36px;height:36px;border-radius:50%;border:2px solid transparent;background:var(--c);outline-offset:2px}
.swatches button[aria-pressed=true]{border-color:var(--ink)}
.someday{margin-top:var(--s5)}
.someday ul{padding:0}
.someday li{list-style:none;padding:var(--s3) 0;border-top:1px solid var(--line);font-size:calc(15px*var(--fs))}
.someday li span{display:block;color:var(--muted);font-size:.88em}
.pad-b{height:var(--s4)}

/* ---------- Sheets and toasts ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:flex-end;justify-content:center;z-index:5}
.sheet-bg.open{display:flex}
.sheet{background:var(--bg);width:100%;max-width:560px;max-height:90dvh;overflow-y:auto;border-radius:var(--r) var(--r) 0 0;padding:var(--s5) var(--pad) calc(var(--s4) + env(safe-area-inset-bottom));animation:up .2s ease-out}
@keyframes up{from{transform:translateY(30px);opacity:0}}
.sheet input[type=text],.sheet input[type=password],.sheet textarea{width:100%;height:var(--tap);border-radius:var(--pill);border:1px solid var(--line);background:var(--surface);padding:0 var(--s4);margin:var(--s2) 0;font-size:17px}
.sheet textarea{height:132px;border-radius:var(--r);padding:var(--s3) var(--s4);resize:none}
.sheet p{font-size:calc(14px*var(--fs));color:var(--muted)}
.sheet .err{color:var(--bad);min-height:1.4em}
.sheet .dock{padding-bottom:0}
.sheet .del{color:var(--bad)}
.toast{position:fixed;left:50%;bottom:calc(var(--s6) + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:var(--s3) var(--s5);border-radius:var(--pill);font-size:15px;z-index:9;display:flex;gap:var(--s4);align-items:center;max-width:90vw}
.toast[hidden]{display:none}
.toast button{font-weight:700;color:var(--accent)}

/* ---------- Cover screen (short) ---------- */
@media (max-height:720px){
  .home-grid{gap:var(--s2)}
  .sent{font-size:calc(23px*var(--fs))}
  .tile-cats{min-height:0}
}
/* ---------- Open inner screen: two columns ---------- */
@media (min-width:600px) and (min-height:560px){
  :root{--pad:32px}
  body{font-size:calc(17.5px*var(--fs))}
  .home-grid{grid-template-columns:1fr 1fr 2fr;gap:var(--s4);align-items:stretch;padding-top:var(--s5)}
  .side{grid-column:auto}
  .list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6)}
  .list .crow:nth-child(2){border-top:0}
  .sent{font-size:calc(32px*var(--fs))}
  .dock{justify-content:flex-end}
  .dock .primary,.dock .secondary{flex:0 1 320px}
  .dock .iconbtn{margin-right:auto}
  #quiz,#done{max-width:720px}
  .set-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
  .someday{margin-top:0}
}
@media (min-width:860px) and (min-height:560px){
  #quiz{max-width:1040px}
  #quiz .qbody{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s6);align-items:center}
  #quiz .q{align-self:stretch}
  #quiz .qbody{padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom))}
  #quiz .answers,#quiz .type{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.noanim *{animation:none!important;transition:none!important}
[hidden]{display:none!important}