/* feel (hover, press, verdict motion, confetti), long lists (filter chips, year groups) */
/* ---------- feel: hover, press, verdict motion, confetti ---------- */
.btn{transition:transform .12s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease}
.btn-acc:hover:not(:disabled),.btn-good:hover:not(:disabled){background:var(--acc-h)}
.btn-ghost:hover:not(:disabled){background:var(--acc-w)}
.ch:hover,.ex:hover{border-color:var(--acc-l)}
.tm-card,.sp-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.tm-card:hover,.sp-card:hover{border-color:var(--acc-l)}
.sl-row{transition:background-color .15s ease}
.sl-row:hover{background:var(--acc-w)}
.f input,.sq-a input,.tm-name input,.yours textarea{transition:border-color .15s ease,box-shadow .15s ease}
.f input:focus,.sq-a input:focus,.tm-name input:focus,.yours textarea:focus{box-shadow:0 0 0 4px var(--acc-w)}
.cf{position:fixed;z-index:300;width:8px;height:10px;border-radius:2px;pointer-events:none;animation:cf .9s cubic-bezier(.15,.7,.35,1) forwards}
.cfr{position:fixed;top:-24px;z-index:300;pointer-events:none;will-change:transform}
.fsh{position:fixed;left:0;right:0;bottom:0;z-index:280;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:2px solid;border-radius:18px 18px 0 0;
  box-shadow:0 -8px 24px rgba(0,0,0,.12);animation:fshin .32s cubic-bezier(.2,.85,.25,1)}
.fsh.ok{background:var(--good-w);border-color:var(--good)}
.fsh.no{background:var(--bad-w);border-color:var(--bad)}
.fsh-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-right:40px}
.fsh-c{position:absolute;top:10px;right:10px;width:38px;height:38px;border:none;border-radius:50%;background:transparent;font-size:28px;line-height:1;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.fsh-c:active{background:rgba(0,0,0,.06)}
/* the ✓ / ✗ is a button too: it closes the panel, so it looks pressable (a rim, a raised edge, a press) */
.fsh-i{width:48px;height:48px;padding:0;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--card);border:2.5px solid currentColor;
  box-shadow:0 4px 0 currentColor;cursor:pointer;animation:fshpop .45s .12s cubic-bezier(.3,1.6,.5,1) backwards;transition:transform .08s ease,box-shadow .08s ease;margin-bottom:4px}
.fsh-i:active{transform:translateY(3px);box-shadow:0 1px 0 currentColor}
.fsh-i svg{width:26px;height:26px}
.fsh.ok .fsh-i,.fsh.ok .fsh-h b{color:var(--good)}
.fsh.no .fsh-i,.fsh.no .fsh-h b{color:var(--bad)}
.fsh-h b{display:block;font-size:21px;line-height:26px;font-weight:900}
.fsh-h div>span{display:block;font-size:14.5px;line-height:20px;color:var(--ink);margin-top:2px}
.fsh-x{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;padding:8px 12px;border-radius:12px;background:var(--card);font-size:13.5px;line-height:18px;color:var(--ink)}
.fsh-x b{font-weight:800}
.fsh-x svg{width:18px;height:18px;flex:none;color:var(--sun)}
.fsh-a{display:flex;gap:10px;align-items:stretch}
.fsh-b{flex:1;min-height:52px;border:none;border-radius:14px;font:800 17px var(--font);letter-spacing:.01em;cursor:pointer;color:var(--on-good);box-shadow:0 4px 0 rgba(0,0,0,.2);transition:transform .08s ease,box-shadow .08s ease}
.fsh-b:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.fsh.ok .fsh-b{background:var(--good)}
.fsh.no .fsh-b{background:var(--bad)}
.fsh-s{flex:none;min-height:52px;padding:0 14px;border-radius:14px;border:2px solid;background:transparent;font:800 14.5px var(--font);cursor:pointer}
.fsh.ok .fsh-s{color:var(--good)}
.fsh.no .fsh-s{color:var(--tm)}
body.has-sheet .hb-toast{bottom:calc(var(--shh,170px) + 12px)}
@keyframes fshin{from{transform:translateY(105%)}to{transform:none}}
@keyframes fshpop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.fsh{animation:fshfade .2s ease}.fsh-i{animation:none}@keyframes fshfade{from{opacity:0}to{opacity:1}}}
@keyframes cf{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) + 70px)) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .btn:hover:not(:disabled){transform:translateY(-1px)}
  .btn-acc:hover:not(:disabled),.btn-good:hover:not(:disabled){box-shadow:0 4px 12px rgba(44,86,214,.28)}
  .btn:active:not(:disabled){transform:translateY(1px) scale(.97);box-shadow:none}
  .ch{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
  .ch:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(42,38,34,.08)}
  .tm-card:hover,.sp-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(42,38,34,.1)}
  .ex{transition:transform .15s ease,border-color .15s ease,background-color .15s ease}
  .ex:hover{transform:translateX(3px)}
  .ex.off:hover{transform:none}
  .tcard,.sc{transition:transform .2s ease,box-shadow .2s ease}
  .tcard:hover,.sc:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(42,38,34,.07)}
  .linkbtn,.xf button,.tm-pills button,.sn-row button,.sgrade button,.ptsel button,.qnav button,.sd-arr,.hint-btn{transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .12s ease}
  .linkbtn:active,.xf button:active,.tm-pills button:active,.sn-row button:active,.sgrade button:active,.ptsel button:active,.qnav button:active,.sd-arr:active{transform:scale(.93)}
  .side li button{transition:background-color .15s ease}
  .brand .logo{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
  .brand:hover .logo{transform:rotate(-10deg) scale(1.1)}
  .pop{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
  @keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
  .shake{animation:shake .42s ease-in-out}
  @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
}

/* ---------- long lists: filter chips, year groups ---------- */
.xf{display:flex;flex-wrap:wrap;gap:6px}
.xf button{border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:4px 11px;font:700 12.5px var(--font);color:var(--muted);cursor:pointer}
.xf button:hover{color:var(--ink)}
.xf button[aria-pressed="true"]{background:var(--acc-w);border-color:var(--acc);color:var(--acc)}
.side .sd-f{padding:8px 12px;border-bottom:1px solid var(--line)}
.side ol{position:relative}
.side .sd-y{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;gap:8px;padding:6px 16px;background:var(--panel);border-bottom:1px solid var(--line);font-size:12px;line-height:16px;font-weight:800;color:var(--muted)}
.side .sd-y span:last-child{font-weight:600}
.exh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.exh h2{margin:0}
.yr{border-top:1px solid var(--line)}
.yr:first-of-type{border-top:none}
.yr>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding:10px 4px;list-style:none}
.yr>summary::-webkit-details-marker{display:none}
.yr>summary b{font-size:15px}
.yr>summary b::before{content:'';display:inline-block;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);margin:0 10px 2px 2px;transition:transform .15s}
.yr[open]>summary b::before{transform:rotate(45deg)}
.yr>summary span{font-size:13px;color:var(--muted)}
.yr[open]{padding-bottom:6px}
.dlg .xf{margin-top:-4px}
.dtab .yrow td{background:var(--panel);font-size:12px;font-weight:800;color:var(--muted);padding:6px 10px;cursor:default}
.dtab .yrow span{margin-left:10px;font-weight:600}
.dtab tbody tr.yrow:hover td{background:var(--panel)}
.tm-ch>summary{list-style:none;cursor:pointer}
.tm-ch>summary::-webkit-details-marker{display:none}
.tm-ch>summary b:first-of-type::after{content:'';display:inline-block;width:6px;height:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 0 3px 10px;transition:transform .15s}
.tm-ch[open]>summary b:first-of-type::after{transform:rotate(225deg);margin-bottom:-1px}
.tm-ch .tm-ns{color:var(--acc);font-size:13px}
.tm-chh{margin-bottom:0;padding:4px 0}
.tm-ch[open] .tm-chh{margin-bottom:6px}
.tm-ch{padding:10px 0}
.tm-more{display:block;width:100%;margin-top:6px;border:1.5px dashed var(--line);background:none;border-radius:10px;padding:9px;font:700 13.5px var(--font);color:var(--acc);cursor:pointer}
.tm-more:hover{background:var(--acc-w)}
.tm-filt select{max-width:100%}
.sl-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:28px 0 12px}
.sl-h h2{margin:0}
.sim-list{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sl-y{padding:7px 18px;background:var(--panel);border-top:1px solid var(--line);font-size:12px;font-weight:800;letter-spacing:.05em;color:var(--muted)}
.sl-y:first-child{border-top:none}
.sl-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-top:1px solid var(--line)}
.sl-y+.sl-row{border-top:none}
.sl-row b{display:block;font-size:15px;line-height:21px}
.sl-row span{font-size:13px;color:var(--muted)}
.sl-row .nb{display:inline;font-size:13px;color:var(--acc)}


/* a right answer on a phone: a slim panel (it covers less of the exercise), "+15 XP" next to the title, and the main
   button says where it goes, with the arrow nudging forward */
.fsh.ok{padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px))}
.fsh.ok .fsh-h{margin-bottom:10px;gap:10px}
.fsh.ok .fsh-i{width:38px;height:38px;border-width:2px}.fsh.ok .fsh-i svg{width:21px;height:21px}
.fsh.ok .fsh-h b{font-size:19px;line-height:24px}
.fsh.ok .fsh-b,.fsh.ok .fsh-s{min-height:46px}
.fsh-xp{margin-left:auto;flex:none;padding:4px 10px;border-radius:999px;background:var(--sun);color:#2a2622;font:900 14px var(--font);animation:fshxp .5s .15s cubic-bezier(.3,1.6,.5,1) both}
@keyframes fshxp{from{transform:scale(.3) translateY(8px);opacity:0}to{transform:none;opacity:1}}
.fsh-ar{display:inline-block;margin-left:4px;animation:fshar 1s ease-in-out .4s infinite}
@keyframes fshar{0%,100%{transform:none}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.fsh-xp,.fsh-ar{animation:none}}