/* TIENGHANTOPIK — Luyện kỹ năng (skill library + practice session). Prototype. Reuses tokens.css, site.css, library.css, results.css. */
.lib{padding:var(--s-8) 0 0}
.badge.band{border-style:dashed}
.badge.pb{background:var(--bg-subtle);color:var(--text-primary);border-color:var(--n-900)}
.inl{font-weight:700;color:var(--coral-700);margin-left:var(--s-2)}
.notice.vs b{display:block}
.bfilter{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;margin:var(--s-6) 0 0}
.bfl{font-weight:700;font-size:var(--fs-14);color:var(--text-secondary)}
.bfilter .flt{margin:0}
.wnote{display:flex;gap:var(--s-2);align-items:flex-start;color:var(--text-secondary);font-size:var(--fs-14);margin:0 0 var(--s-4)}
.xgrid{list-style:none;margin:0;padding:0}
.rel{margin-top:var(--s-10)}
.leaf-row{list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-wrap:wrap;gap:var(--s-3)}
.leaf-row .leaf{min-height:48px;padding:var(--s-2) var(--s-4);justify-content:center}
.lib .sec-h{margin-top:var(--s-6)}
/* practice session */
.prac .ptitle h1{font-size:clamp(1.5rem,1.1rem + 1.5vw,2rem);margin:var(--s-2) 0}
.pbadge{margin:0}
.pmeta{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin:0}
.notex{margin-top:var(--s-3)}
.progress{margin:0 0 var(--s-4);font-weight:600;color:var(--text-secondary)}
.proto-btn{background:#fff;color:var(--n-900);border:0;border-radius:var(--r-sm);padding:2px 10px;font-size:var(--fs-12);font-weight:600;cursor:pointer}
.leave{margin:var(--s-4) 0 0;font-size:var(--fs-14);color:var(--text-secondary)}
/* status: icon + text + shape. none = dashed; answered = filled; viewed = double border + eye */
.cell.st-none{border-style:dashed}
.cell.st-ans{background:var(--state-answered-bg);border-color:var(--state-answered-bg);color:#fff}
.cell.st-ans .ci{color:#fff}
.cell.st-seen{background:var(--bg-surface);border:4px double var(--n-900)}
.cell.st-seen .ci{color:var(--coral-700)}
.rchip.pst-none{border-style:dashed;color:var(--text-secondary)}
.rchip.pst-ans{background:var(--n-900);border-color:var(--n-900);color:#fff}
.rchip.pst-seen{background:var(--action-tint);border-color:var(--coral-600);color:var(--coral-800)}
.lgd li svg{flex:none}
/* options */
.optset{border:0;margin:0;padding:0;min-width:0}
.opts{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;gap:var(--s-2)}
.opt.pick{cursor:pointer}
.opt.pick:hover{background:var(--bg-subtle)}
.opt.chosen{border:2px solid var(--state-selected-border);background:var(--state-selected-bg);padding:calc(var(--s-3) - 1px) calc(var(--s-4) - 1px)}
.opt.chosen .on{background:var(--action);border-color:var(--action);color:#fff}
.opt .chk{border-color:var(--action);color:var(--action);background:transparent;border:0;padding:0;margin-left:auto}
.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.opt.locked{cursor:default}
/* actions + reveal */
.act{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;margin:0 0 var(--s-4)}
.rhint{margin:0;color:var(--text-secondary);font-size:var(--fs-14)}
.seenmsg{display:flex;gap:var(--s-2);align-items:center;font-weight:700;margin:0 0 var(--s-2);color:var(--coral-800)}
.lockmsg{display:flex;gap:var(--s-2);align-items:flex-start;margin:0 0 var(--s-4);color:var(--text-secondary);font-size:var(--fs-14)}
.reveal{border-top:1px solid var(--border);padding-top:var(--s-4);margin-top:var(--s-2)}
.reveal:focus{outline:3px solid var(--focus);outline-offset:4px;border-radius:4px}
.wa{margin-bottom:var(--s-4)}
.wl{display:flex;gap:var(--s-2);align-items:center;font-weight:700;margin-bottom:var(--s-2)}
.wta{width:100%;border:1px solid var(--border-strong);border-radius:var(--r-md);padding:var(--s-3);font:400 var(--fs-18)/var(--lh-read-kr) var(--font-kr);background:#fff;resize:vertical}
.wta:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn .sr-only,.opt .sr-only{position:absolute}
@media (max-width:480px){.act .btn{width:100%}}
.sum .skey{border-color:var(--state-success)}
.badge.tgt{border-style:solid;border-color:var(--n-900);color:var(--n-900)}
.badge.tgt.unset{border-style:dashed;border-color:var(--border-strong);color:var(--text-secondary)}