/* Word collections (words.js). Uses the tokens and components of index.html. */
.wrow{padding:var(--s3) var(--s3) var(--s3) var(--s4)}
.wrow.mode:hover{border-color:var(--line)}
.wtg{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;padding:0}
.wtg svg{width:20px;height:20px}
.wtg.ok{border-color:transparent;background:var(--ok-soft);color:var(--ok)}
.mt8{margin-top:var(--s2)}
.wdash{margin-top:var(--s3)}
.wd-top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3)}
.wd-n{font:700 var(--t-xxl)/1 var(--ru)}
.wd-n span{font:400 var(--t-l) var(--ru);color:var(--muted)}
.wd-wk{text-align:right}
.wd-wk b{display:block;font:700 var(--t-xl) var(--ru);color:var(--ok)}
.wd-wk small{font:400 var(--t-s) var(--ru);color:var(--muted)}
.wbar{display:flex;height:10px;border-radius:var(--r-p);background:var(--line);overflow:hidden;margin-top:var(--s3)}
.wbar i{display:block;height:100%;background:var(--accent)}
.wbar i.b{opacity:.35}
.wleg{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2);font:400 var(--t-s) var(--ru);color:var(--muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;background:var(--accent)}
.dot.b{opacity:.35}
.dot.c{background:var(--line)}
.wblock{margin-top:var(--s4);background:var(--paper);border:1px solid var(--accent);border-radius:var(--r);padding:var(--s4);font-family:var(--ru)}
.wb-h{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s3)}
.wb-h .mt{flex:1;min-width:0}
.wb-h b{display:block;font:700 var(--t-l) var(--ru)}
.wb-h small{color:var(--muted);font:400 var(--t-s) var(--ru)}
.wb-w{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.wlist{padding:0 var(--s4)}
.wrw{padding:var(--s3) 0;border-bottom:1px solid var(--line);font:400 var(--t-m) var(--ru)}
.wrw:last-child{border-bottom:0}
.wrw .kaw{font-weight:700}
.wrw small{color:var(--muted);font-size:var(--t-m)}
.wfoot{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
.wset-h{display:flex;justify-content:space-between;align-items:baseline}
.acc-t{color:var(--accent)}
.wslider{width:100%;accent-color:var(--accent);margin:var(--s3) 0}
/* card session */
.wprog{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.wprog .prog{flex:1;margin:0}
.wprog span{font:700 var(--t-s) var(--ru);color:var(--muted)}
.wcard{flex:1;min-height:52vh;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:var(--s4);display:flex;flex-direction:column;cursor:pointer;margin-bottom:var(--s3)}
.wcard.back{cursor:default}
.wtag{display:flex;gap:var(--s2);min-height:24px}
.wmid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s2)}
.wword{font:700 40px/1.2 var(--ka);overflow-wrap:anywhere}
.wread{font:400 var(--t-l) var(--ru);color:var(--muted)}
.wtr{font:700 var(--t-xxl)/1.2 var(--ru);margin-top:var(--s3)}
.wtap{color:var(--muted);font:400 var(--t-m) var(--ru);margin-top:var(--s4)}
.wqs{margin-top:var(--s4);text-align:center}
.wqs small{display:block;color:var(--muted);font:400 var(--t-s) var(--ru);margin-bottom:var(--s2)}
.wqs .qchips{justify-content:center}
.wgrade{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.wgrade.hid{visibility:hidden}
.wgrade .wno{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.wgrade .wyes{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.sumrow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin:var(--s4) 0}
.sumrow div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s2);text-align:center}
.sumrow b{display:block;font:700 var(--t-xl) var(--ru)}
.sumrow .okc{color:var(--ok)}
.sumrow .badc{color:var(--bad)}
.sumrow small{color:var(--muted);font:400 var(--t-s) var(--ru)}