/* ══════════════════════════════════════════════════════════
   OpoCast — estils del motor de tests
   Van amb /assets/test.js. Les pàgines de tema i el generador
   encara porten la seva còpia dins d'un <style>; qui enllaci
   aquest fitxer ja no l'ha de portar.
   ══════════════════════════════════════════════════════════ */
.status{display:flex;justify-content:space-between;align-items:baseline;
  font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--ink-soft);margin-bottom:.4rem}
.ticks{display:flex;gap:2px;margin-bottom:1.75rem}
.ticks i{flex:1;height:5px;background:var(--rule);cursor:pointer}
.ticks i.done{background:var(--rule-strong)}
.ticks i.answered{background:var(--ok)}
.ticks i.now{background:var(--signal)}

.qnum{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--ink-soft);margin-bottom:.5rem}
.qtext{font-size:1.2rem;line-height:1.4;margin:0 0 1.4rem;font-weight:500}

.opts{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.opt{display:flex;gap:.85rem;width:100%;text-align:left;padding:.9rem .6rem .9rem .2rem;
  background:none;border:none;border-bottom:1px solid var(--rule);cursor:pointer;font:inherit;color:inherit}
.opt:hover{background:var(--field)}
.opt .key{font-family:"IBM Plex Mono",monospace;flex:none;width:1.6rem;height:1.6rem;
  border:1.5px solid var(--rule-strong);display:grid;place-items:center;font-size:.85rem;margin-top:.1rem}
.opt[aria-pressed="true"] .key{background:var(--accent);color:var(--on-brand);border-color:var(--accent)}
.opt[aria-pressed="true"]{background:var(--field)}
.blank{display:block;width:100%;background:none;border:none;padding:.9rem 0;font:inherit;
  color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.navrow{display:flex;gap:.65rem;margin-top:.2rem}
.navrow .btn{width:auto}
.navrow #prev{flex:0 0 auto;background:none;color:var(--ink);border:2px solid var(--rule-strong)}
.navrow #prev:disabled{opacity:.35}
.navrow #next{flex:1 1 auto}
.navhint{font-size:.82rem;color:var(--ink-soft);margin:.9rem 0 0}

.toggle{display:flex;align-items:center;gap:.7rem;cursor:pointer;
  padding:.8rem 0;border-bottom:1px solid var(--rule)}
.toggle input{width:1.15rem;height:1.15rem;accent-color:var(--signal);flex:none}
.toggle span{color:var(--ink-soft);font-size:.95rem}
.toggle:first-of-type{border-top:1px solid var(--rule)}

.score{display:flex;align-items:flex-end;gap:.6rem;margin:0 0 .3rem}
.score b{font-family:"IBM Plex Mono",monospace;font-size:4rem;line-height:.9;font-weight:500;letter-spacing:-.03em}
.score span{color:var(--ink-soft);padding-bottom:.4rem}
.verdict{font-weight:600;margin:0 0 1.5rem}
.verdict.pass{color:var(--ok)}
.verdict.fail{color:var(--signal)}

.tally{display:flex;border:1px solid var(--rule);margin-bottom:2rem}
.tally div{flex:1;padding:.7rem .5rem;text-align:center}
.tally div+div{border-left:1px solid var(--rule)}
.tally b{display:block;font-family:"IBM Plex Mono",monospace;font-size:1.4rem;font-weight:500}
.tally span{font-size:.78rem;color:var(--ink-soft)}

.review{list-style:none;margin:0 0 2rem;padding:0}
.review li{border-bottom:1px solid var(--rule);padding:1rem 0}
.review .q{font-weight:500;margin:0 0 .6rem}
.review .given{color:var(--signal);margin:0 0 .15rem;font-size:.95rem}
.review .right{color:var(--ok);margin:0 0 .6rem;font-size:.95rem}
.review .why{color:var(--ink-soft);margin:0 0 .6rem;font-size:.95rem}
.jump{display:inline-flex;gap:.5rem;align-items:center;font-family:"IBM Plex Mono",monospace;
  font-size:.82rem;color:var(--ink);border:1.5px solid var(--rule-strong);
  padding:.45rem .7rem;text-decoration:none;transition:border-color .15s,background .15s}
.jump:hover,.jump:focus-visible{border-color:var(--focus);background:var(--field)}
.tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.74rem;
  color:var(--ink-soft);border:1px solid var(--rule-strong);padding:.1rem .4rem;margin-bottom:.5rem}

/* ── configurador ─────────────────────────────────────────── */
.resum b{font-family:"IBM Plex Mono",monospace;font-size:1.25rem;font-weight:500}
.resum span{font-size:.85rem;color:var(--ink-soft);text-align:right}