/* S12 self-assessment. On tokens/tokens.css and tokens/app.css, inside the student shell (css/shell.css).
   Tokens only; no raw hex. */
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.s12 h2{color:var(--color-ink);font-size:var(--t-xl);margin:0 0 var(--s-3);line-height:1.25}
.s12 a:focus-visible,.s12 button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.45)}
.s12-note{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--color-warning-wash);color:var(--color-warning-ink);border:1px solid var(--color-line);border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4);font-size:var(--t-sm);margin:var(--s-5) 0 0}
.s12-note b{white-space:nowrap}
.s12-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);list-style:none;margin:0 0 var(--s-5);padding:0}
.s12-facts li{background:var(--color-bg);border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4);font-size:var(--t-sm)}
.s12-facts strong{display:block;color:var(--color-ink);font-size:var(--t-xl);line-height:1.1}
.s12-actions{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-top:var(--s-5)}
.s12 .btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* progress */
.s12-prog{margin:0 0 var(--s-5)}
.s12-prog-top{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-sm);color:var(--color-muted);margin-bottom:var(--s-2)}
.s12-prog-top b{color:var(--color-ink)}
.s12-bar{height:8px;border-radius:99px;background:var(--color-line);overflow:hidden}
.s12-bar>i{display:block;height:100%;width:0;background:var(--color-accent);border-radius:99px;transition:width .25s ease}
.s12-dots{display:flex;gap:6px;margin-top:var(--s-3);flex-wrap:wrap}
.s12-dots button{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--color-line);background:var(--color-card);color:var(--color-muted);font:600 var(--t-xs) var(--font-body);cursor:pointer;padding:0}
.s12-dots button.is-done{background:var(--color-accent-wash);border-color:var(--color-accent);color:var(--color-accent-text)}
.s12-dots button.is-now{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-on-accent)}

/* question */
.s12-topic{display:inline-block;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-text);margin-bottom:var(--s-2)}
.s12-q{font-size:var(--t-xl);margin:0 0 var(--s-5)}
.s12-opts{display:grid;gap:var(--s-3);margin:0;padding:0;border:0}
.s12-opt{display:flex;gap:var(--s-3);align-items:flex-start;width:100%;text-align:left;background:var(--color-card);border:1.5px solid var(--color-line);border-radius:var(--radius);padding:var(--s-4);font:500 var(--t-base)/1.45 var(--font-body);color:var(--color-ink);cursor:pointer;transition:border-color .15s,background .15s}
.s12-opt:hover{border-color:var(--color-muted)}
.s12-key{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--color-line);display:grid;place-items:center;font-size:var(--t-sm);font-weight:700;color:var(--color-muted);background:var(--color-card)}
.s12-opt[aria-checked="true"]{border-color:var(--color-accent);background:var(--color-accent-wash);box-shadow:inset 4px 0 0 var(--color-accent)}
.s12-opt[aria-checked="true"] .s12-key{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
.s12-nav{display:flex;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--color-line)}
.s12-warn{color:var(--color-danger-ink);background:var(--color-danger-wash);border-radius:var(--radius-sm);padding:var(--s-2) var(--s-3);font-size:var(--t-sm);margin-top:var(--s-4)}
.s12-hidden{display:none!important}

/* result */
.s12-score{display:grid;grid-template-columns:auto 1fr;gap:var(--s-6);align-items:center}
.s12-ring{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--color-accent) calc(var(--pct,0) * 1%),var(--color-line) 0)}
.s12-ring span{width:100px;height:100px;border-radius:50%;background:var(--color-card);display:grid;place-items:center;text-align:center;color:var(--color-ink);font-size:var(--t-2xl);font-weight:800;line-height:1}
.s12-ring small{display:block;font-size:var(--t-xs);font-weight:600;color:var(--color-muted);margin-top:4px}
.s12-topics{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-3)}
.s12-topics>li{background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius);padding:var(--s-4) var(--s-5)}
.s12-trow{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.s12-trow h3{margin:0;font-size:var(--t-lg);color:var(--color-ink)}
.s12-tag{font-size:var(--t-xs);font-weight:700;border-radius:99px;padding:3px 10px}
.s12-tag.good{background:var(--color-success-wash);color:var(--color-success-ink)}
.s12-tag.mid{background:var(--color-warning-wash);color:var(--color-warning-ink)}
.s12-tag.low{background:var(--color-danger-wash);color:var(--color-danger-ink)}
.s12-tbar{height:6px;border-radius:99px;background:var(--color-line);margin:var(--s-3) 0;overflow:hidden}
.s12-tbar i{display:block;height:100%;background:var(--color-success);border-radius:99px}
.s12-tbar.mid i{background:var(--color-warning)}.s12-tbar.low i{background:var(--color-danger)}
.s12-topics p{margin:0 0 var(--s-2);font-size:var(--t-sm)}
.s12-read{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.s12-read a{display:inline-block;font-size:var(--t-sm);font-weight:600;color:var(--color-accent-text);border:1.5px solid var(--color-line);border-radius:99px;padding:4px 12px;text-decoration:none;background:var(--color-card)}
.s12-read a:hover{border-color:var(--color-accent)}
.s12-review{margin-top:var(--s-3)}
.s12-review summary{cursor:pointer;font-size:var(--t-sm);font-weight:600;color:var(--color-accent-text)}
.s12-review ul{margin:var(--s-2) 0 0;padding-left:1.1rem;font-size:var(--t-sm)}
.s12-review .ok{color:var(--color-success-ink)}.s12-review .no{color:var(--color-danger-ink)}

@media (max-width:600px){
 .s12{padding:var(--s-4) var(--s-3) var(--s-7)}
 .s12-card{padding:var(--s-4)}
 .s12 h1{font-size:var(--t-xl)}
 .s12-facts{grid-template-columns:1fr}
 .s12-q{font-size:var(--t-lg)}
 .s12-score{grid-template-columns:1fr;justify-items:center;text-align:center}
 .s12-nav .btn{flex:1;justify-content:center}
}
.s12-q:focus,.s12-q:focus-visible{outline:none;box-shadow:none}