/* ROI Prep guide theme. Load after site.css and after the guide's own <style>.
   Maps the guide tokens onto ROI Prep’s palette; the course colour comes from --h on <body> (same hue as the catalog card). */
:root{
  --sunk:color-mix(in srgb,var(--ink) 4%,var(--bg));
  --accent:hsl(var(--h) 72% 42%); --accent-ink:#fff; --accent-soft:hsl(var(--h) 80% 95%);
  --hl:#eefbc4; --hl-ink:#263000;
  --good:#1f8a4c; --good-soft:#e1f5e9; --bad:#d0342c; --bad-soft:#fde7e5; --warn:#a86400;
  --gridline:hsl(var(--h) 60% 45% / .07); --cellhead:color-mix(in srgb,var(--ink) 7%,var(--bg));
  --s1:#4b3df5; --s2:#e8590c; --s3:#0b8a7a; --s4:#c2255c; --s5:#7048e8; --s6:#5c940d; --wait:#d4d2cb;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root{
  --accent:hsl(var(--h) 90% 72%); --accent-ink:#0d0f14; --accent-soft:hsl(var(--h) 35% 18%);
  --hl:#232a10; --hl-ink:#e4ff9c;
  --good:#4cc985; --good-soft:#12291c; --bad:#ff8178; --bad-soft:#331816; --warn:#f2b94a;
  --s1:#8f86ff; --s2:#ff9a5c; --s3:#3fd0bd; --s4:#f27aa5; --s5:#b197fc; --s6:#9bd35a; --wait:#2e3442;}}

/* top bar comes from site.css; keep it full-width like the hub and above the topic tabs */
.bar{z-index:30}
.bar .wrap{max-width:1120px;padding:0 16px}
@media (max-width:420px){.bar .beta{display:none}} /* room for the course button + Sign in on phones */

/* hero = the hub's course banner */
header.hero{background:none;border:0}
header.hero .wrap{padding-block:24px 8px;display:block}
.banner{position:relative;border-radius:20px;overflow:hidden;padding:28px;display:grid;gap:14px;isolation:isolate;color:#fff;
  background:radial-gradient(90% 160% at 100% 0%,hsl(calc(var(--h) + 25) 75% 52%) 0%,transparent 60%),linear-gradient(135deg,hsl(var(--h) 60% 22%),hsl(var(--h) 65% 38%))}
.banner .photo{position:absolute;inset:0;z-index:-2;background:var(--photo) center/cover no-repeat}
.banner .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,16,.9) 0%,rgba(8,10,16,.62) 55%,rgba(8,10,16,.2) 100%)}
.banner .crumbs{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.banner .crumbs a{color:#fff;text-decoration:none}
.banner .crumbs a:hover{text-decoration:underline}
.banner h1{font-size:clamp(2.6rem,6vw,4.2rem);font-weight:700}
.banner .hero-sub{color:rgba(255,255,255,.85);max-width:62ch}
.banner .facts{display:flex;flex-wrap:wrap;gap:8px}
.banner .fact{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px);border-radius:999px;padding:5px 12px;font-size:.92rem}
.banner .fbar{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.2);color:#fff}
.banner .fbar .cell{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.2)}
.banner .fbar .fx{color:var(--lime);border-color:rgba(255,255,255,.2)}

/* topic tabs: pill nav under the bar */
nav.tabs{top:60px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
nav.tabs a{border-radius:999px;font-family:var(--f-body);font-size:.95rem}
nav.tabs a:hover{background:var(--surface);border-color:var(--line)}
section.topic{scroll-margin-top:120px}

/* sections and cards: softer, rounder, like the hub */
.topic-head{border-bottom:1px solid var(--line);padding-bottom:14px}
.topic-head h2{font-size:clamp(2rem,4.5vw,2.6rem)}
.idea,details.worked,.q,.card,.tbl,.svgbox{border-radius:var(--r)}
.idea,details.worked,.q{box-shadow:0 1px 2px rgba(20,22,28,.04)}
.formula{border-radius:var(--r);border-left:4px solid var(--lime)}
.lab{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.lab-head{background:linear-gradient(135deg,hsl(var(--h) 60% 26%),hsl(var(--h) 65% 40%));color:#fff}
.lab-head select{color:var(--ink)}
button,a.btn{border-radius:999px}
select,input[type=number],input[type=text],textarea{border-radius:8px}
.traps{border-radius:var(--r)}
.chip{border-radius:999px}
footer{border-top:1px solid var(--line);padding:24px 0 48px}

/* difficulty badges come from site.css (.diff[data-level]) */
.bar .btn.primary{background:var(--brand);color:var(--brand-ink);border:0;padding:10px 18px;font-size:1rem}
.idea{align-content:start}

/* LabKit (labkit.js): blanks, the last revealed value, and quiz inputs */
.kit-blank{color:var(--muted);font-weight:600}
.kit-last{background:var(--hl);color:var(--hl-ink);border-radius:6px}
.kit-in{width:6.5em;font-family:var(--f-mono);font-size:.88rem;color:var(--ink);background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:3px 6px}
.kit-in.right{border-color:var(--good);background:var(--good-soft)}
.kit-in.wrong{border-color:var(--bad);background:var(--bad-soft)}
.stat .v .kit-in{width:100%}