/* =====================================================================
   WellProd™ — PBL COMMON STYLESHEET  (pbl-common.css)
   ---------------------------------------------------------------------
   One shared design system for every Problem-Based Learning page
   (Hubs + Sub-Problems) under /pbls. Replaces the ~200-line inline
   <style> block previously duplicated in all 43 files.

   • Token-identical to wellprod-shell.css / topic-template.css so the
     PBLs read as the same platform: navy foundation, Source Serif 4
     display headings, Helvetica Neue body.
   • Colour scheme is TIER-DRIVEN. Set the tier on <body>:
         <body class="pbl" data-tier="t1">   (blue   — Foundation)
         <body class="pbl" data-tier="t2">   (teal   — Applied)
         <body class="pbl" data-tier="t3">   (amber  — Advanced)
         <body class="pbl" data-tier="t4">   (maroon — Mastery)
     Every accent (header gradient, section eyebrow, primary cards,
     links, launch tiles) re-colours automatically from the tier.
   • Legacy variable names used by existing inline style="" attributes
     (--b9..--b0, --g*, --t*, --a*, --r*, --p*, --bg*, --text*) are kept
     as aliases so pages drop in cleanly without find-replace.

   Bespoke per-sub-problem widgets (simulators, pipe diagrams, memo
   templates, risk matrices, etc.) keep their own local <style> blocks;
   this file owns only the shared scaffolding.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

/* ───────────────────────── FOUNDATION TOKENS ───────────────────────── */
:root{
  --navy:#04182f; --navy-2:#062746; --navy-3:#0a2c4d;

  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,Monaco,"Courier New",monospace;

  --wrap:1080px;
  --radius:14px; --radius-md:10px; --radius-sm:7px;
  --transition:.18s ease;
  --shadow-sm:0 1px 4px rgba(4,24,47,.06);
  --shadow-md:0 8px 24px rgba(4,24,47,.10);

  /* tier palette — identical hues to wellprod-shell.css */
  --t1a:#13496b; --t1b:#1d6fa5;   /* Foundation  · blue  */
  --t2a:#0f5b57; --t2b:#188f84;   /* Applied     · teal  */
  --t3a:#8a5a12; --t3b:#c08a2e;   /* Advanced    · amber */
  --t4a:#5a2746; --t4b:#8a3f6b;   /* Mastery     · maroon*/

  /* neutrals + text (shared verbatim with content pages) */
  --bg:#ffffff; --bgL:#f5f8fc; --bgB:#eef3f9; --bgG:#e7f4ee;
  --border:#dde5ee; --borderL:#e9eff6;
  --text:#0a1c30; --textM:#33414f; --textL:#5d6e80; --textF:#8593a3;

  /* fixed semantic accents (tier-independent) */
  --g8:#155c3a; --g7:#1f8f5f; --g6:#239268; --g5:#2faa78; --g1:#bfe6d4; --g0:#e7f4ee;
  --t7:#0e7490; --t5:#1597b8; --t0:#e0f2fe;
  --a7:#b9760f; --a0:#fff4e5;
  --r7:#c2410c; --r0:#fdecea;
  --p7:#7a3a86; --p0:#f4e9f6;
}

/* ───────────────────────── TIER ACCENT MAP ─────────────────────────── */
/* default (no data-tier) falls back to Tier 1 */
body.pbl{ --crest:var(--t1a); --accent-deep:var(--t1a); --accent:var(--t1b);
          --accent-soft:#e9f2f9; --accent-line:#c4ddee; }
body.pbl[data-tier="t1"]{ --crest:#0e3a57; --accent-deep:var(--t1a); --accent:var(--t1b);
          --accent-soft:#e9f2f9; --accent-line:#c4ddee; }
body.pbl[data-tier="t2"]{ --crest:#0a3f3c; --accent-deep:var(--t2a); --accent:var(--t2b);
          --accent-soft:#e3f4f1; --accent-line:#bce4dd; }
body.pbl[data-tier="t3"]{ --crest:#5f3e0c; --accent-deep:var(--t3a); --accent:var(--t3b);
          --accent-soft:#fbf0db; --accent-line:#ecd6a8; }
body.pbl[data-tier="t4"]{ --crest:#3f1b30; --accent-deep:var(--t4a); --accent:var(--t4b);
          --accent-soft:#f5e9f1; --accent-line:#e0c2d3; }

/* legacy blue-ramp aliases → re-pointed at the active tier accent
   so existing inline var(--b7)/var(--b0) references re-colour by tier */
body.pbl{
  --b9:var(--crest); --b7:var(--accent-deep); --b6:var(--accent);
  --b5:var(--accent); --b4:var(--accent); --b1:var(--accent-line); --b0:var(--accent-soft);
  --grad-header:linear-gradient(135deg,var(--crest) 0%,var(--accent-deep) 55%,var(--accent) 100%);
}

/* ───────────────────────── BASE ───────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.pbl{font-family:var(--sans);background:var(--bg);color:var(--text);
  line-height:1.72;font-size:14px;-webkit-font-smoothing:antialiased}
body.pbl ::-webkit-scrollbar{width:7px}
body.pbl ::-webkit-scrollbar-track{background:var(--bgL)}
body.pbl ::-webkit-scrollbar-thumb{background:var(--accent-line);border-radius:4px}
body.pbl ::selection{background:var(--accent);color:#fff}
body.pbl :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.pbl a{color:inherit}
.pbl img{max-width:100%;display:block}
.pbl sub,.pbl sup{line-height:0}
.pbl-hidden{display:none !important}

/* ───────────────────────── TOP BAR ───────────────────────── */
.topbar{height:54px;background:rgba(4,24,47,.97);backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;
  padding:0 28px;position:sticky;top:0;z-index:200}
.topbar-brand{display:flex;align-items:center;gap:11px;margin-right:36px}
.topbar-brand .icon{width:30px;height:30px;border-radius:7px;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff}
.topbar-brand span{font-size:14px;font-weight:800;letter-spacing:1.5px;color:#fff}
.topbar-nav{display:flex;height:54px}
.topbar-nav a{display:flex;align-items:center;padding:0 16px;font-size:12px;
  text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.74);
  text-decoration:none;font-weight:700;border-bottom:2px solid transparent;transition:var(--transition)}
.topbar-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.topbar-nav a.active{color:#fff;border-bottom-color:var(--accent)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}

/* ───────────────────────── PAGE / SP HEADER ───────────────────────── */
.page-header,.sp-header{background:var(--grad-header);color:#fff;padding:40px 32px 34px}
.page-header-inner,.sp-header-inner{max-width:var(--wrap);margin:0 auto}
.ctag,.sp-crumb,.sp-breadcrumb,.sp-eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:14px}
.ctag::before{content:'';display:inline-block;width:28px;height:2px;background:var(--accent)}
.ctag a,.sp-crumb a{color:rgba(255,255,255,.72);text-decoration:none}
.ctag a:hover,.sp-crumb a:hover{color:#fff;text-decoration:underline}
.page-header h1,.sp-header h1{font-family:var(--serif);font-weight:700;
  font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.22;max-width:900px;margin-bottom:12px}
.page-header p,.sp-header p,.sp-subtitle{font-size:14px;color:rgba(255,255,255,.84);
  max-width:820px;line-height:1.75}
.hbadges,.sp-badges,.sp-tags,.sp-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hbadge,.sp-badge,.sp-tag,.sp-meta-item{display:flex;align-items:center;gap:6px;font-size:11px;
  font-weight:600;color:rgba(255,255,255,.88);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:5px 14px}
.hbadge .d,.sp-badge .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--accent)}

/* ───────────────────────── LAYOUT ───────────────────────── */
.layout{display:flex;max-width:var(--wrap);margin:0 auto}
.side-left{width:240px;flex-shrink:0;position:sticky;top:54px;height:calc(100vh - 54px);
  overflow-y:auto;padding:24px 0 24px 16px;border-right:1px solid var(--borderL);background:var(--bg)}
.mn{flex:1;padding:40px 40px 80px;min-width:0}
.side-right{width:280px;flex-shrink:0;position:sticky;top:54px;height:calc(100vh - 54px);
  overflow-y:auto;padding:24px 16px 24px 0;border-left:1px solid var(--borderL);background:var(--bg)}
@media(max-width:960px){.side-left,.side-right{display:none}.mn{padding:28px 18px 48px}}

.ng{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--textF);padding:18px 12px 5px}
.na{display:block;padding:5px 12px;font-size:12px;color:var(--textL);text-decoration:none;
  border-radius:6px;border-left:2px solid transparent;cursor:pointer;transition:var(--transition);margin-bottom:1px}
.na:hover{color:var(--textM);background:var(--bgB)}
.na.ac,.na.active{font-weight:600;color:var(--accent-deep);border-left-color:var(--accent);background:var(--accent-soft)}
.na.done{color:var(--g7)}
.na.done::before{content:'✓ ';color:var(--g6);font-weight:700}

/* ───────────────────────── SECTIONS / TYPE ───────────────────────── */
.sec{margin-bottom:48px;scroll-margin-top:70px}
.sec-num{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:1.5px;
  margin-bottom:4px;text-transform:uppercase}
.sec h2{font-family:var(--serif);font-size:1.5rem;font-weight:700;line-height:1.25;color:var(--crest);margin-bottom:12px}
.sec h3{font-family:var(--serif);font-size:1.05rem;font-weight:700;color:var(--text);
  margin:24px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--accent-soft)}
.sec h4{font-size:13.5px;font-weight:700;color:var(--accent-deep);margin:18px 0 8px}
.sec p{color:var(--textM);margin-bottom:12px;font-size:14px;line-height:1.78}
.sec p strong{color:var(--text);font-weight:700}
.sec ol,.sec ul{margin:10px 0 14px 22px;color:var(--textM)}
.sec ol li,.sec ul li{margin-bottom:6px;font-size:13.5px;line-height:1.7}
.sec a{color:var(--accent-deep);font-weight:600;text-decoration:none}
.sec a:hover{text-decoration:underline}
.dv{height:1px;background:linear-gradient(90deg,var(--border),transparent 70%);margin:40px 0}

/* ───────────────────────── CARDS ───────────────────────── */
.cd{background:var(--bg);border:1px solid var(--borderL);border-radius:var(--radius-md);
  padding:20px 24px;margin:12px 0;box-shadow:var(--shadow-sm);transition:box-shadow .2s}
.cd:hover{box-shadow:var(--shadow-md)}
.cd.bb{border-left:3px solid var(--accent)}
.cd.bg{border-left:3px solid var(--g5)}.cd.bt{border-left:3px solid var(--t5)}
.cd.ba{border-left:3px solid var(--a7)}.cd.br{border-left:3px solid var(--r7)}.cd.bp{border-left:3px solid var(--p7)}
.cd.scenario{background:var(--accent-soft);border:1px solid var(--accent-line);border-left:4px solid var(--accent-deep)}
.ch{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ci{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;flex-shrink:0}
.ci.bl{background:var(--accent-soft);color:var(--accent-deep)}
.ci.gr{background:var(--g0);color:var(--g7)}.ci.tl{background:var(--t0);color:var(--t7)}
.ci.am{background:var(--a0);color:var(--a7)}.ci.rd{background:var(--r0);color:var(--r7)}.ci.pu{background:var(--p0);color:var(--p7)}
.ct{font-weight:700;font-size:14px;color:var(--text)}
.cs{font-size:11px;color:var(--textL);margin-top:2px}

/* ───────────────────────── CALLOUTS ───────────────────────── */
.co{border-radius:8px;padding:16px 20px;margin:16px 0;font-size:13.5px;line-height:1.75}
.co-l{font-weight:700;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}
.co.bl{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-deep)}
.co.gr{background:var(--g0);border:1px solid var(--g1);color:var(--g7)}
.co.tl{background:var(--t0);border:1px solid rgba(14,116,144,.2);color:var(--t7)}
.co.am{background:var(--a0);border:1px solid rgba(185,118,15,.25);color:var(--a7)}
.co.rd{background:var(--r0);border:1px solid rgba(194,65,12,.22);color:var(--r7)}
.co.pu{background:var(--p0);border:1px solid rgba(122,58,134,.22);color:var(--p7)}

/* ───────────────────────── EQUATIONS ───────────────────────── */
.eq{background:var(--navy);border-radius:8px;padding:16px 20px;margin:14px 0;
  font-family:var(--mono);font-size:13px;color:#8ed6a0;line-height:1.9;overflow-x:auto;white-space:pre-wrap}
.eq-l{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:rgba(255,255,255,.85);display:block;margin-bottom:6px}
.eq-note{font-size:11.5px;color:var(--textL);margin-top:6px}

/* ───────────────────────── TABLES ───────────────────────── */
.tw{overflow-x:auto;margin:12px 0;border-radius:8px;border:1px solid var(--borderL)}
table.dt{width:100%;border-collapse:collapse;font-size:12.5px}
table.dt thead{background:var(--bgB)}
table.dt th{padding:10px 14px;text-align:left;font-weight:700;font-size:11px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--textL);border-bottom:1px solid var(--border)}
table.dt td{padding:10px 14px;border-bottom:1px solid var(--borderL);color:var(--textM)}
table.dt tr:last-child td{border-bottom:none}
table.dt .v,table.dt .mn{font-family:var(--mono);color:var(--accent-deep);font-weight:600}
table.dt .vg{font-family:var(--mono);color:var(--g7);font-weight:600}
table.dt .va{font-family:var(--mono);color:var(--a7);font-weight:600}
table.dt .vr{font-family:var(--mono);color:var(--r7);font-weight:600}
table.dt .unit{font-size:10.5px;color:var(--textF)}
table.dt tr.hl,table.dt tr.hlb{background:var(--accent-soft);font-weight:700}
table.dt tr.hla{background:var(--a0)}table.dt tr.hlr{background:var(--r0)}table.dt tr.hlg{background:var(--g0)}

/* ───────────────────────── DETAILS / DISCLOSURE ───────────────────────── */
details.cl{background:var(--bgL);border:1px solid var(--borderL);border-radius:8px;margin:12px 0;overflow:hidden}
details.cl summary{padding:13px 18px;font-weight:600;font-size:13px;color:var(--text);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:10px;user-select:none}
details.cl summary::-webkit-details-marker{display:none}
details.cl summary::before{content:'▸';font-size:11px;color:var(--accent);transition:transform .2s;display:inline-block}
details.cl[open] summary::before{transform:rotate(90deg)}
details.cl .db{padding:0 18px 16px;color:var(--textM);font-size:13px;line-height:1.7}

/* ───────────────────────── TAGS / PILLS ───────────────────────── */
.tag,.regime-pill{display:inline-block;padding:3px 10px;border-radius:4px;font-size:10px;font-weight:700;margin-right:5px}
.tag.bl{background:var(--accent-soft);color:var(--accent-deep)}
.tag.gr{background:var(--g0);color:var(--g7)}.tag.tl{background:var(--t0);color:var(--t7)}
.tag.am{background:var(--a0);color:var(--a7)}.tag.rd{background:var(--r0);color:var(--r7)}.tag.pu{background:var(--p0);color:var(--p7)}

/* ───────────────────────── TASK LIST ───────────────────────── */
.tasklist{counter-reset:t;list-style:none;margin:16px 0;padding:0}
.tasklist li{counter-increment:t;padding:14px 20px 14px 56px;margin:10px 0;background:var(--bgL);
  border:1px solid var(--borderL);border-radius:var(--radius-md);position:relative;font-size:13.5px;line-height:1.7;color:var(--textM)}
.tasklist li::before{content:counter(t);position:absolute;left:14px;top:13px;width:28px;height:28px;
  background:var(--accent-soft);color:var(--accent-deep);border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-weight:700;font-size:12px}
.tasklist li strong{color:var(--text)}

/* ───────────────────────── RESULT / SCORE / KEY-VAL CARDS ───────────────────────── */
.results-grid,.score-grid,.rec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
@media(max-width:760px){.results-grid,.score-grid,.rec-grid{grid-template-columns:repeat(2,1fr)}}
.result-card,.score-card,.key-val{background:var(--bgL);border:1px solid var(--borderL);border-radius:8px;padding:12px 14px;text-align:center}
.result-card .lbl,.score-card .sc-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--textF);margin-bottom:4px}
.result-card .val,.score-card .sc-val{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--accent-deep)}
.result-card .sub,.score-card .sc-sub{font-size:10px;color:var(--textL);margin-top:2px}
.result-card.gr .val{color:var(--g7)}.result-card.am .val{color:var(--a7)}
.result-card.rd .val{color:var(--r7)}.result-card.tl .val{color:var(--t7)}

/* ───────────────────────── DELIVERABLE PANEL ───────────────────────── */
.deliverable,.deliverable-final{background:linear-gradient(135deg,var(--g0) 0%,var(--bgG) 100%);
  border:1px solid var(--g1);border-left:4px solid var(--g6);border-radius:var(--radius-md);padding:22px 26px;margin:20px 0}
.deliverable h4,.deliverable-final h4,.pbl-deliv-label{color:var(--g8);font-size:13px;text-transform:uppercase;
  letter-spacing:1.2px;margin-bottom:12px;font-weight:800}
.deliverable p{font-size:13.5px;color:var(--text)}

/* ───────────────────────── KWL PLANNER ───────────────────────── */
.kwl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
@media(max-width:760px){.kwl-grid{grid-template-columns:1fr}}
.kwl-col{background:var(--bgL);border:1px solid var(--borderL);border-radius:var(--radius-md);padding:14px 16px}
.kwl-head{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;padding:3px 8px;border-radius:4px;display:inline-block;margin-bottom:8px}
.kwl-head.k{background:var(--g0);color:var(--g7)}
.kwl-head.w{background:var(--accent-soft);color:var(--accent-deep)}
.kwl-head.l{background:var(--a0);color:var(--a7)}
.kwl-col ul{font-size:12.5px;margin:0 0 0 18px;color:var(--textM)}
.kwl-col li{margin-bottom:4px}

/* ───────────────────────── SUB-PROBLEM LAUNCH CARDS (Hub) ───────────────────────── */
.sp-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:16px 0}
.sp-card-launch{display:block;background:var(--bg);border:1px solid var(--borderL);border-radius:var(--radius-md);
  padding:18px 20px;text-decoration:none;color:inherit;transition:var(--transition);position:relative;overflow:hidden}
.sp-card-launch::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.sp-card-launch.c1::before{background:var(--accent)}
.sp-card-launch.c2::before{background:var(--g5)}.sp-card-launch.c3::before{background:var(--t5)}
.sp-card-launch.c4::before{background:var(--a7)}.sp-card-launch.c5::before{background:var(--r7)}.sp-card-launch.c6::before{background:var(--p7)}
.sp-card-launch:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.sp-card-launch .sp-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sp-card-launch .sp-num{width:36px;height:36px;border-radius:8px;color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;background:var(--accent-deep)}
.sp-card-launch.c2 .sp-num{background:var(--g7)}.sp-card-launch.c3 .sp-num{background:var(--t7)}
.sp-card-launch.c4 .sp-num{background:var(--a7)}.sp-card-launch.c5 .sp-num{background:var(--r7)}.sp-card-launch.c6 .sp-num{background:var(--p7)}
.sp-card-launch .sp-topic-tag,.sp-card-launch .sp-topic{font-size:9.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--textF);margin-bottom:2px}
.sp-card-launch .sp-title{font-family:var(--serif);font-size:1rem;font-weight:700;color:var(--text);line-height:1.3}
.sp-card-launch .sp-desc{font-size:12.5px;color:var(--textM);line-height:1.6;margin-bottom:12px}
.sp-card-launch .sp-foot{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--borderL);font-size:11px}
.sp-card-launch .sp-dur{color:var(--textF)}
.sp-card-launch .sp-cta{color:var(--accent-deep);font-weight:700}
.sec a.sp-card-launch {
  font-weight: 400;
  text-decoration: none;
}

.sec a.sp-card-launch:hover {
  text-decoration: none;
}

.sp-card-launch .sp-desc {
  font-size: 12.5px;
  color: var(--textM);
  line-height: 1.45;
  margin-bottom: 12px;
  font-weight: 400;
}
.sp-card-launch .sp-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

/* ───────────────────────── WORKFLOW STEPS ───────────────────────── */
.wf-steps,.flow-steps{list-style:none;margin:18px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.wf-steps li,.flow-step{background:var(--bgL);border:1px solid var(--borderL);border-radius:var(--radius-md);padding:12px 14px}
.wf-step-num,.wf-step-label{font-family:var(--mono);font-size:10px;color:var(--accent-deep);font-weight:700;letter-spacing:.08em;margin-bottom:4px;display:block}
.wf-step-txt{font-size:12.5px;color:var(--text);font-weight:600;line-height:1.4}
.wf-step-sub{font-size:11px;color:var(--textL);margin-top:3px}

/* ═════════════════════════ JUST-IN-TIME RESOURCES ═════════════════════════
   Standardised card grid. Recommended markup:
     <div class="jit-grid">
       <a class="jit-card study" href="…">
         <span class="jit-kind">Study</span>
         <span class="jit-title">Topic 4.5 — Fetkovich Deliverability</span>
         <span class="jit-note">Theory page · the method behind this SP</span>
       </a>
       … watch / check …
     </div>
   Kinds: .study (tier accent) · .watch (amber) · .check / .selfcheck (teal) ═══ */
.jit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:16px 0}
.jit-card{display:flex;flex-direction:column;gap:7px;background:var(--bg);border:1px solid var(--borderL);
  border-top:3px solid var(--accent);border-radius:var(--radius-md);padding:16px 18px;
  text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:var(--transition);min-height:100%}
.jit-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--accent-line)}
.jit-card .jit-kind,.jit-kind{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent)}
.jit-card .jit-kind::before{content:'';display:inline-block;width:14px;height:14px;margin-right:7px;vertical-align:-2px;
  background-size:contain;background-repeat:no-repeat;opacity:.9}
.jit-card .jit-title,.jit-title{font-weight:700;font-size:13.5px;line-height:1.45;color:var(--text)}
.jit-card:hover .jit-title{color:var(--accent-deep)}
.jit-card .jit-note,.jit-note{font-size:11.5px;color:var(--textL);line-height:1.55;margin-top:auto}
.jit-card code{font-family:var(--mono);font-size:11.5px;color:var(--accent-deep);background:var(--accent-soft);padding:1px 6px;border-radius:4px}
/* kind colours */
.jit-card.study{border-top-color:var(--accent)}.jit-card.study .jit-kind{color:var(--accent-deep)}
.jit-card.watch{border-top-color:var(--a7)}.jit-card.watch .jit-kind{color:var(--a7)}
.jit-card.check,.jit-card.selfcheck{border-top-color:var(--t5)}
.jit-card.check .jit-kind,.jit-card.selfcheck .jit-kind{color:var(--t7)}

/* ───────────────────────── QUIZ / KNOWLEDGE CHECK ─────────────────────────
   Two quiz systems exist in the corpus (button-based .qopt + pf(),
   div-based .quiz-card + pick()). Both are styled here. */
.quiz-block{margin:14px 0}
.qn,.quiz-q{margin:18px 0;padding:16px 18px;background:var(--bgL);border:1px solid var(--borderL);border-radius:var(--radius-md)}
.qt,.qq{font-weight:700;font-size:13.5px;color:var(--text);margin-bottom:10px;line-height:1.55}
.qopt,.quiz-card,.quiz-opt,.qo{display:block;width:100%;text-align:left;font-family:var(--sans);
  font-size:13px;color:var(--textM);background:var(--bg);border:1px solid var(--border);border-radius:8px;
  padding:11px 15px;margin:8px 0;cursor:pointer;transition:var(--transition);line-height:1.5}
.qopt:hover,.quiz-card:hover,.quiz-opt:hover,.qo:hover{border-color:var(--accent);background:var(--accent-soft)}
.qopt.correct,.quiz-card.correct,.quiz-opt.correct,.qo.correct{border-color:var(--g6);background:var(--g0);color:var(--g8);font-weight:600}
.qopt.wrong,.quiz-card.wrong,.quiz-opt.wrong,.qo.wrong{border-color:var(--r7);background:var(--r0);color:var(--r7)}
.qopt.selected,.quiz-card.selected,.quiz-opt.selected{border-color:var(--accent);background:var(--accent-soft)}
.qfb,.quiz-fb,.qfeedback,.fb{display:none;margin:8px 0 2px;padding:12px 15px;border-radius:8px;font-size:12.5px;line-height:1.7;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-deep)}
.qfb.show,.quiz-fb.show,.qfeedback.show,.fb.show{display:block}

/* ───────────────────────── BOTTOM SP NAV ───────────────────────── */
.spnav{display:flex;justify-content:space-between;gap:14px;margin-top:40px;padding-top:24px;
  border-top:1px solid var(--borderL);flex-wrap:wrap}
.spnav a{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:var(--radius-md);
  background:var(--bgL);border:1px solid var(--borderL);color:var(--text);text-decoration:none;font-size:13px;font-weight:600;transition:var(--transition)}
.spnav a:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.spnav a.prev{color:var(--textL)}
.spnav a.next{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep);flex-direction:row-reverse;text-align:right}
.spnav a.next:hover{background:var(--crest);border-color:var(--crest)}
.spnav .lbl{display:block;font-size:10px;font-weight:700;color:var(--textF);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.spnav a.next .lbl{color:rgba(255,255,255,.6)}

/* ───────────────────────── BUTTONS ───────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
  font-size:14px;font-weight:700;cursor:pointer;padding:11px 22px;border-radius:9px;border:1.5px solid transparent;transition:var(--transition)}
.btn.primary,.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(4,24,47,.18)}
.btn.primary:hover,.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-outline{background:#fff;color:var(--accent-deep);border-color:var(--border)}
.btn-outline:hover{border-color:var(--accent)}

/* ───────────────────────── FOOTER ───────────────────────── */
.footer{border-top:1px solid var(--borderL);padding:24px;text-align:center;font-size:11px;color:var(--textF);max-width:var(--wrap);margin:0 auto;line-height:1.7}

canvas{max-width:100%;border-radius:8px}
