/* Quiz base (kit-spec-1, quiz-2): layout and shape components on the house tokens only. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bar{border-bottom:1px solid var(--line)}
.bar-in{display:flex;justify-content:space-between;align-items:center;min-height:56px;gap:var(--s-4)}
.brand{font:700 var(--t-md)/1.2 var(--serif)}
.bar-best{font-size:var(--t-sm);color:var(--ink-2)}
main.wrap{padding-block:var(--s-7) var(--s-8)}
.narrow{max-width:760px;margin-inline:auto}
/* first screen */
.hero{display:grid;gap:var(--s-7);align-items:center}
@media (min-width:880px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.hero h1{font-size:var(--t-hero);margin-top:var(--s-3)}
.lede{font-size:var(--t-lg);color:var(--ink-2);margin:var(--s-4) 0 0}
.meta{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:var(--s-5) 0 0;padding:0;font-size:var(--t-sm);color:var(--ink-2)}
.meta b{color:var(--ink);font-weight:650}
.btn-lg{min-height:52px;padding:0 var(--s-6);font-size:var(--t-md)}
.preview{margin:0;padding:var(--s-5);display:grid;gap:var(--s-3)}
.pv-q{margin:var(--s-2) 0 0;font:700 var(--t-xl)/1.2 var(--serif)}
.pv-options{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.pv-options li{display:flex;align-items:center;min-height:44px;padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r);color:var(--ink)}
.pv-cap{font-size:var(--t-sm);color:var(--ink-2)}
.below{display:grid;gap:var(--s-7);margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line)}
@media (min-width:880px){.below{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.sub{font-size:var(--t-lg);margin-bottom:var(--s-4)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chips li{display:inline-flex;gap:var(--s-2);align-items:center;min-height:36px;padding:0 var(--s-3);border:1px solid var(--accent-line);border-radius:var(--r-pill);background:var(--wash);font-size:var(--t-sm)}
.chips .num{color:var(--ink-2)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin:0;padding:0}
.facts div{border-top:1px solid var(--line);padding-top:var(--s-3)}
.facts dt{font-size:var(--t-sm);color:var(--ink-2)}
.facts dd{margin:var(--s-1) 0 0;font:700 var(--t-xl)/1.2 var(--serif)}
/* play */
.progress-row{display:flex;justify-content:space-between;font-size:var(--t-sm);color:var(--ink-2)}
.progress{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width var(--dur-2) var(--ease)}
#play .progress{margin-top:var(--s-2)}
.q-topic{margin:var(--s-6) 0 0}
.question{font-size:var(--t-2xl);margin:var(--s-2) 0 var(--s-2)}
.hint{color:var(--ink-2);margin:0 0 var(--s-4)}
.options{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.option{width:100%;min-height:52px;text-align:left;justify-content:flex-start;border:1px solid var(--edge);background:var(--surface);color:var(--ink);font-weight:500;padding:var(--s-3) var(--s-4)}
.option .key{display:inline-grid;place-items:center;min-width:28px;height:28px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--ink-2);margin-right:var(--s-3)}
.option:hover:not(:disabled){background:var(--sunk)}
.option[aria-pressed=true]{background:var(--wash);border-color:var(--accent)}
.option.is-right{border-color:var(--good);background:color-mix(in oklab,var(--good) 10%,var(--surface))}
.option.is-wrong{border-color:var(--bad);background:color-mix(in oklab,var(--bad) 8%,var(--surface))}
.option:disabled{opacity:1;cursor:default}
.feedback{min-height:1.6em;margin:var(--s-4) 0}
.feedback .status{font-weight:650}
.status.good{color:var(--good)}.status.bad{color:var(--bad)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
/* result */
.score{font-size:var(--t-hero);margin:var(--s-2) 0 var(--s-4)}
.result-bar{height:10px;max-width:420px}
.verdict{font-size:var(--t-lg);color:var(--ink-2);margin:var(--s-4) 0 0}
.review-h{margin:var(--s-7) 0 var(--s-3);padding-top:var(--s-5);border-top:1px solid var(--line)}
.review{margin:0;padding-left:var(--s-5);display:grid;gap:var(--s-4)}
.review li p{margin:var(--s-1) 0 0;color:var(--ink-2);font-size:var(--t-sm)}
@media (max-width:480px){main.wrap{padding-block:var(--s-5) var(--s-7)}.question{font-size:var(--t-xl)}.actions .btn{flex:1 1 100%}.facts{gap:var(--s-3)}.facts dd{font-size:var(--t-lg)}}
/* fixes: Start case; record never above the title */
#begin{text-transform:none;letter-spacing:0;font-size:var(--t-md)}
@media (min-width:880px){html[data-l-app=qz-wide] #start#start{grid-template-areas:"c p" "r p" "t t"}}
html[data-l-app=qz-wide] #start#start .below>section:last-child{padding:0;border:0}
html[data-l-app=qz-wide] #start#start .sub{display:block}
@media (max-width:879px){#start#start{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"c" "p" "r" "t";gap:var(--s-6)}#start :is(.hero,.below){display:contents}.hero-copy{grid-area:c}.preview{grid-area:p}#topics-sec{grid-area:t}#start .below>section:last-child{grid-area:r}}
/* tap-targets (phones only; desktop untouched): controls >= 44 px, inputs 16 px so iOS does not zoom */@media (max-width:600px){a[href]:not(p a,li p a,blockquote a,figcaption a,td a,dd a,label a),button,[role=button],[onclick],summary,select,input:not([type=hidden],[type=checkbox],[type=radio],[type=range]){min-height:44px!important;min-width:44px!important}input[type=range]{min-height:44px}:where(a[href]:not(p a,li p a,blockquote a,figcaption a,td a,dd a,label a)){display:inline-flex;align-items:center;justify-content:center}input,select,textarea{font-size:max(16px,1em)!important}}