/* RP Revision Practice — same palette as the module reference notes. */
:root{
  --ground:#f1f3f5; --paper:#ffffff; --panel:#e6eaee;
  --ink:#14181d; --ink-soft:#4b5460; --ink-faint:#78828e;
  --rule:#d5dbe1; --rule-soft:#e6eaee;
  --accent:#1c4f7c; --accent-lift:#2a6ba4; --accent-wash:#e6eef5; --on-accent:#ffffff; --series:#2a6ba4;
  --good:#1d7449; --good-wash:#e6f3ec; --good-edge:#8fc7a8;
  --bad:#a8321f; --bad-wash:#fbebe7; --bad-edge:#dea093;
  --warn:#8a5a0a; --warn-wash:#fbf3df; --warn-edge:#dcc07a;
  --sans:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","Cascadia Code",Consolas,ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0f1317; --paper:#161b21; --panel:#1d242b;
    --ink:#e4e9ee; --ink-soft:#a2aeb9; --ink-faint:#77838f;
    --rule:#29323b; --rule-soft:#1f272e;
    --accent:#6aa9dd; --accent-lift:#8dc0ea; --accent-wash:#132434; --on-accent:#0f1317; --series:#4f97d6;
    --good:#6fcf9b; --good-wash:#12261c; --good-edge:#2f6247;
    --bad:#f0907c; --bad-wash:#2a1612; --bad-edge:#7a3c30;
    --warn:#e3bd62; --warn-wash:#262010; --warn-edge:#6b5a26;
  }
}
:root[data-theme="dark"]{
  --ground:#0f1317; --paper:#161b21; --panel:#1d242b;
  --ink:#e4e9ee; --ink-soft:#a2aeb9; --ink-faint:#77838f;
  --rule:#29323b; --rule-soft:#1f272e;
  --accent:#6aa9dd; --accent-lift:#8dc0ea; --accent-wash:#132434; --on-accent:#0f1317; --series:#4f97d6;
  --good:#6fcf9b; --good-wash:#12261c; --good-edge:#2f6247;
  --bad:#f0907c; --bad-wash:#2a1612; --bad-edge:#7a3c30;
  --warn:#e3bd62; --warn-wash:#262010; --warn-edge:#6b5a26;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
}
.wrap{max-width:920px;margin:0 auto;padding:0 20px 64px}
a{color:var(--accent)}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:clamp(28px,5vw,38px);font-weight:700;letter-spacing:-.02em}
h2{font-size:20px;font-weight:650}
h3{font-size:16.5px;font-weight:600}
p{margin:0}
code,.mono{font-family:var(--mono);font-size:.92em}
code{background:var(--panel);padding:.1em .38em;border-radius:4px}
sub,sup{font-size:.72em;line-height:0}
[hidden]{display:none !important}

.eyebrow{
  font:500 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- header / footer ---------- */
.top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:28px 0 18px;border-bottom:1px solid var(--ink);margin-bottom:28px;
}
.brand{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.brand-name{font-size:22px;font-weight:700;letter-spacing:-.01em}
.foot{
  margin-top:56px;padding-top:16px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:13px;color:var(--ink-faint);
}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--ink-faint);text-decoration:underline;cursor:pointer}
.linkish:hover{color:var(--bad)}

/* ---------- buttons ---------- */
.btn{
  appearance:none;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);
  font:600 15px/1 var(--sans);padding:11px 18px;border-radius:8px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.btn:hover{background:var(--accent-lift);border-color:var(--accent-lift)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--rule)}
.btn.ghost:hover{background:var(--accent-wash);border-color:var(--accent)}
.btn.small{font-size:13px;padding:8px 12px;font-weight:500}
.btn:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--accent-lift);outline-offset:2px}

/* ---------- home ---------- */
.lede{color:var(--ink-soft);max-width:60ch;margin-top:10px}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:10px;overflow:hidden;margin:26px 0 12px;
}
.stat{background:var(--paper);padding:14px 16px}
.stat b{display:block;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.stat span{font-size:13px;color:var(--ink-faint)}
.mistakes{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--warn-wash);border:1px solid var(--warn-edge);border-radius:10px;
  padding:12px 16px;margin-bottom:12px;font-size:15px;
}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 14px}
.section-head span{font-size:13px;color:var(--ink-faint)}

.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.mod{
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:18px;
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  transition:border-color .12s, transform .12s;
}
.mod:hover{border-color:var(--accent);transform:translateY(-1px)}
.mod .code{font:600 12.5px/1 var(--mono);letter-spacing:.08em;color:var(--accent)}
.mod p{font-size:14px;color:var(--ink-soft);flex:1}
.mod .row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}

.meter{height:6px;background:var(--panel);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--good);border-radius:99px;transition:width .3s}

.recent{list-style:none;margin:0;padding:0;border:1px solid var(--rule);border-radius:10px;background:var(--paper);overflow:hidden}
.recent li{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;font-size:14px;border-top:1px solid var(--rule-soft)}
.recent li:first-child{border-top:0}
.recent .when{color:var(--ink-faint);font-size:13px}
.recent .score{font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- module page ---------- */
.crumb{font-size:14px;text-decoration:none;display:inline-block;margin-bottom:14px}
.crumb:hover{text-decoration:underline}
.mod-head{display:flex;flex-direction:column;gap:8px}
.mod-head .code{font:600 13px/1 var(--mono);letter-spacing:.08em;color:var(--accent)}
.convention{font-size:14px;color:var(--ink-soft)}
.launch{
  margin:22px 0 6px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;justify-content:space-between;
}
.launch .left{display:flex;flex-direction:column;gap:4px}
.launch .left span{font-size:13.5px;color:var(--ink-soft)}
.launch .right{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.seg button{
  appearance:none;border:0;background:transparent;color:var(--ink-soft);
  font:500 14px/1 var(--sans);padding:10px 13px;cursor:pointer;border-left:1px solid var(--rule);
}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--accent-wash);color:var(--accent);font-weight:650}

.topics{list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.topic{
  display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:16px;align-items:center;
  padding:14px 18px;border-top:1px solid var(--rule-soft);
}
.topic:first-child{border-top:0}
.topic .lessons{font:500 12px/1 var(--mono);color:var(--ink-faint);letter-spacing:.06em}
.topic .t-name{display:flex;flex-direction:column;gap:6px;min-width:0}
.topic .t-prog{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
@media (max-width:620px){
  .topic{grid-template-columns:minmax(0,1fr) auto}
  .topic .t-prog{grid-column:1 / -1;grid-row:2}
  .stats{grid-template-columns:1fr}
  .top{align-items:flex-start}
}

/* ---------- practice ---------- */
.p-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft);margin-bottom:10px}
.p-top .count{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.p-bar{height:4px;background:var(--panel);border-radius:99px;overflow:hidden;margin-bottom:22px}
.p-bar i{display:block;height:100%;background:var(--accent);transition:width .25s}

.qcard{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:26px 26px 22px}
@media (max-width:620px){.qcard{padding:20px 16px 18px}}
.q-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tag{font:500 11.5px/1 var(--mono);letter-spacing:.06em;padding:6px 9px;border-radius:99px;background:var(--accent-wash);color:var(--accent)}
.tag.ghost{background:transparent;border:1px solid var(--rule);color:var(--ink-faint)}
.q-body{font-size:18px;line-height:1.55}
.q-body b{font-weight:650}
.q-body table{border-collapse:collapse;margin:14px 0 2px;font-size:15px;font-variant-numeric:tabular-nums}
.q-body th,.q-body td{border:1px solid var(--rule);padding:6px 12px;text-align:right}
.q-body th{background:var(--panel);font-weight:600}
.q-body th:first-child,.q-body td:first-child{text-align:left}
.q-body ul{margin:10px 0 0;padding-left:22px;font-size:16.5px}
.table-scroll{overflow-x:auto}

pre.code{
  font:500 14.5px/1.55 var(--mono);background:var(--panel);border-radius:8px;
  padding:14px 16px;margin:14px 0 0;overflow-x:auto;white-space:pre;tab-size:4;
}
.sets{font-family:var(--mono);font-size:15.5px;margin-top:12px;line-height:1.8}

.resistor{display:flex;align-items:center;margin:18px 0 6px;max-width:300px}
.resistor .lead{flex:1;height:3px;background:var(--ink-faint)}
.resistor .body{
  display:flex;gap:11px;align-items:stretch;height:38px;padding:0 20px;border-radius:12px;
  background:#d9c39a;border:1px solid rgba(0,0,0,.25);
}
.resistor .band{width:11px;border-left:1px solid rgba(0,0,0,.25);border-right:1px solid rgba(0,0,0,.25)}
.resistor .band.gap{margin-left:14px}
.bands-text{font-size:14px;color:var(--ink-soft)}

.answer-row{display:flex;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}
.answer-row input{
  font:500 18px/1 var(--mono);color:var(--ink);background:var(--ground);
  border:1.5px solid var(--rule);border-radius:8px;padding:12px 14px;width:min(100%,260px);
}
.answer-row input.wide{width:min(100%,420px)}
.answer-row input:focus{outline:none;border-color:var(--accent);background:var(--paper)}
.answer-row input:disabled{opacity:.75}
.answer-row .unit{font:500 17px/1 var(--mono);color:var(--ink-soft)}
.fine{font-size:13px;color:var(--ink-faint);margin-top:8px}

.opts{display:grid;gap:10px;margin-top:20px}
.opt{
  appearance:none;text-align:left;width:100%;cursor:pointer;
  display:flex;gap:12px;align-items:baseline;
  font:400 16px/1.45 var(--sans);color:var(--ink);
  background:var(--ground);border:1.5px solid var(--rule);border-radius:10px;padding:12px 14px;
}
.opt:hover:not(:disabled){border-color:var(--accent);background:var(--accent-wash)}
.opt kbd{font:600 12px/1 var(--mono);color:var(--ink-faint);border:1px solid var(--rule);border-radius:5px;padding:4px 6px;flex:none}
.opt:disabled{cursor:default}
.opt.is-right{border-color:var(--good);background:var(--good-wash)}
.opt.is-wrong{border-color:var(--bad);background:var(--bad-wash)}
.opt.is-dim{opacity:.6}

.q-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hint{
  margin-top:16px;padding:12px 14px;border-radius:8px;font-size:15px;
  background:var(--warn-wash);border:1px solid var(--warn-edge);
}
.hint b{color:var(--warn)}

.feedback{margin-top:22px;border-radius:10px;padding:16px 18px;border:1px solid}
.feedback.ok{background:var(--good-wash);border-color:var(--good-edge)}
.feedback.bad{background:var(--bad-wash);border-color:var(--bad-edge)}
.verdict{font-weight:700;font-size:17px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.feedback.ok .verdict{color:var(--good)}
.feedback.bad .verdict{color:var(--bad)}
.verdict .note{font-weight:500;font-size:14.5px;color:var(--ink-soft)}
.correct-line{margin-top:8px;font-size:15.5px}
.correct-line .mono{font-weight:600}
.working{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule)}
.working h4{margin:0 0 6px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.working ol{margin:0;padding-left:20px;font-family:var(--mono);font-size:14.5px;line-height:1.75}
.working p{font-size:15px}
.trap{margin-top:12px;font-size:14.5px;color:var(--ink-soft)}
.trap b{color:var(--warn)}
.next-row{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.next-row .fine{margin:0}

/* ---------- results ---------- */
.result-head{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-bottom:22px}
.ring{
  --p:0;width:112px;height:112px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--good) calc(var(--p)*1%), var(--panel) 0);
}
.ring > div{width:88px;height:88px;border-radius:50%;background:var(--ground);display:grid;place-items:center;
  font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.result-head p{color:var(--ink-soft);margin-top:6px}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 6px}
.review{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.review li{background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--bad);border-radius:8px;padding:12px 16px;font-size:15px}
.review li.ok{border-left-color:var(--good)}
.review .rq{font-size:15px}
.review .rq pre.code{font-size:13px;padding:10px 12px;margin-top:8px}
.review .ra{margin-top:8px;font-size:14px;color:var(--ink-soft)}
.review .ra b{color:var(--ink);font-family:var(--mono);font-weight:600}
.breakdown{border-collapse:collapse;width:100%;font-size:14.5px;background:var(--paper);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.breakdown td{padding:9px 16px;border-top:1px solid var(--rule-soft);font-variant-numeric:tabular-nums}
.breakdown tr:first-child td{border-top:0}
.breakdown td:last-child{text-align:right;font-weight:600}
.empty{padding:28px;text-align:center;color:var(--ink-soft);background:var(--paper);border:1px dashed var(--rule);border-radius:12px}

/* ---------- endless session: recent answers ---------- */
.pips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:22px;margin-bottom:18px;font-size:13px;color:var(--ink-faint)}
.pips i{
  font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;line-height:1;border:1px solid;
}
.pips i.ok{background:var(--good-wash);color:var(--good);border-color:var(--good-edge)}
.pips i.no{background:var(--bad-wash);color:var(--bad);border-color:var(--bad-edge)}

/* ---------- accuracy trend ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  appearance:none;border:1px solid var(--rule);background:transparent;color:var(--ink-soft);
  font:500 13px/1 var(--sans);padding:8px 11px;border-radius:99px;cursor:pointer;
}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent-wash);border-color:var(--accent);color:var(--accent);font-weight:650}
.seg button{font-size:13px;padding:9px 12px}
.trend-card{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:16px 18px 14px}
.trend-sum{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;font-size:14px;color:var(--ink-soft);margin-bottom:10px}
.trend-sum b{font-size:24px;font-weight:700;color:var(--ink);line-height:1.1}
.trend-sum .delta{color:var(--ink)}
.chart{position:relative;border-radius:6px;touch-action:pan-y;cursor:crosshair}
.chart svg{display:block;max-width:100%}
.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .axis{fill:var(--ink-faint);font:500 11px var(--sans);font-variant-numeric:tabular-nums}
.chart .area{fill:var(--series);fill-opacity:.1}
.chart .line{fill:none;stroke:var(--series);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot,.chart .hot{fill:var(--series);stroke:var(--paper);stroke-width:2}
.chart .end{fill:var(--ink);font:650 12.5px var(--sans)}
.chart .cross{stroke:var(--ink-faint);stroke-width:1}
.tip{
  position:absolute;pointer-events:none;display:flex;flex-direction:column;white-space:nowrap;
  background:var(--ink);color:var(--paper);border-radius:8px;padding:8px 11px;font-size:12.5px;line-height:1.4;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.tip b{font-size:16px;line-height:1.2}
.tip span{opacity:.8}
.chart-cap{font-size:12.5px;color:var(--ink-faint);margin-top:6px}
.chart-table summary{font-size:13px;color:var(--accent);cursor:pointer;margin-top:10px;width:max-content}
.chart-table table{border-collapse:collapse;margin-top:8px;font-size:13.5px;font-variant-numeric:tabular-nums}
.chart-table th,.chart-table td{text-align:left;padding:5px 18px 5px 0;border-bottom:1px solid var(--rule-soft)}
.chart-table th{font-weight:600;color:var(--ink-soft)}
.empty.plain{border:0;padding:22px 8px;background:transparent}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }