/* Adventure design system — extracted from Claude Design L01 reference. */
/* Source: CURRENT SYSTEM/design-reference/l01-design-reference.html */


/* ============================================================
   ADVENTURE DESIGN TOKENS  ────────────────────────────────────
   ============================================================ */
:root{
  --bg:        #fff8ee;
  --panel:     #ffffff;
  --soft:      #f3ecdc;
  --ink:       #1a1f2e;
  --ink-soft:  #5b6478;
  --muted:     #8a92a4;
  --rule:      #ece3cf;
  --teal:      #14b8a6;
  --teal-deep: #0e8a7d;
  --teal-soft: #d4f1ee;
  --coral:     #f97359;
  --coral-dk:  #c8442a;
  --coral-soft:#ffe2d8;
  --amber:     #f5a623;
  --amber-soft:#fde9c0;
  --navy:      #27314a;
  --rose:      #e11d48;
  --rose-soft: #ffe4e6;
  --display: 'Manrope', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;
  /* P1 visual-cohesion tokens */
  --p1-badge-h: 26px;
  --p1-badge-px: 11px;
  --p1-badge-radius: 99px;
  --p1-badge-fs: 11px;
  --p1-badge-icon: 14px;
  --p1-cardnum-size: 36px;
  --p1-cardnum-bg: var(--teal);
  --p1-cardnum-fg: #fff;
  --p1-ctag-h: 22px;
  --p1-ctag-radius: 6px;
  --p1-ctag-fs: 10.5px;
  --p1-tab-active-bg: rgba(20,184,166,.12);
  --p1-tab-active-bar: 3px;
  --p1-card-px: 28px;
  --p1-card-py: 24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-0.01em;margin:0}
a{color:inherit}
button{font-family:inherit;cursor:pointer}

/* progress bar */
.adv-progress{position:fixed;top:0;left:0;right:0;height:4px;background:transparent;z-index:50}
.adv-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--teal),var(--coral));transition:width .2s}

/* ============================================================
   TOP BAR  ────────────────────────────────────────────────────
   ============================================================ */
.adv-topbar{
  padding:12px 28px;background:var(--panel);border-bottom:2px solid var(--rule);
  display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:40;
}
.adv-brand{font-family:var(--display);font-weight:800;font-size:18px;display:flex;align-items:center;gap:8px;letter-spacing:-0.02em}
.adv-brand-mark{width:26px;height:26px;background:var(--teal);color:#fff;border-radius:7px;display:grid;place-items:center;font-size:14px;font-weight:800}
.adv-topbar-spacer{flex:1}
.adv-pill{display:inline-flex;align-items:center;gap:6px;height:var(--p1-badge-h);padding:0 var(--p1-badge-px);border-radius:var(--p1-badge-radius);font-weight:800;font-size:var(--p1-badge-fs);font-family:var(--body)}
.adv-pill .adv-icon{width:var(--p1-badge-icon);height:var(--p1-badge-icon)}
.adv-pill.streak{background:var(--coral-soft);color:var(--coral-dk)}
.adv-pill.coins{background:var(--amber-soft);color:#7a4f00}
.adv-pill.xp{background:#e7e8f5;color:var(--navy)}
.adv-pill.level{background:var(--teal-soft);color:var(--teal-deep)}
.adv-avatar{width:34px;height:34px;border-radius:99px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;font-family:var(--display)}

.adv-shell{max-width:1080px;margin:0 auto;padding:20px 20px 80px}

/* ============================================================
   HERO  ───────────────────────────────────────────────────────
   ============================================================ */
.adv-hero{
  position:relative;overflow:hidden;border-radius:24px;padding:32px 36px;color:#fff;
  background:linear-gradient(135deg,var(--teal) 0%,var(--teal-deep) 70%, #0b6f63 100%);
  box-shadow:0 8px 0 rgba(11,111,99,0.18);
}
.adv-hero-bg{position:absolute;inset:0;pointer-events:none;opacity:.18}
.adv-hero-bg svg{position:absolute;top:-40px;right:-30px}
.adv-hero-inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.adv-hero-art{width:220px;max-width:28vw;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.adv-hero-art object,.adv-hero-art img,.adv-hero-art svg{width:100%;height:auto;display:block}
.adv-mascot{flex-shrink:0}
.adv-hero-text h1{font-size:42px;font-weight:800;line-height:1.05;margin:0 0 8px;letter-spacing:-0.02em}
.adv-hero-desc{font-size:15px;opacity:0.92;max-width:48ch;margin:0;line-height:1.55;text-wrap:balance}
.adv-hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.adv-hero-badge{height:var(--p1-badge-h);padding:0 var(--p1-badge-px);background:rgba(255,255,255,0.18);border-radius:var(--p1-badge-radius);font-size:var(--p1-badge-fs);font-weight:800;display:inline-flex;gap:5px;align-items:center}
.adv-hero-badge.gold{background:var(--amber);color:#3d2700}
.adv-ring{position:relative;width:96px;height:96px}
.adv-ring svg{transform:rotate(-90deg)}
.adv-ring-text{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.adv-ring-text strong{display:block;font-family:var(--display);font-size:20px;font-weight:800}
.adv-ring-text small{display:block;font-size:9px;letter-spacing:1.5px;opacity:0.8;margin-top:2px}

.adv-hero-ring-row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:stretch;margin-top:18px}
.adv-hook{
  position:relative;padding:14px 18px;background:rgba(255,255,255,0.14);
  border-radius:14px;display:flex;align-items:center;gap:14px;
}
.adv-hook-icon{
  width:44px;height:44px;background:rgba(255,255,255,0.18);border-radius:12px;
  display:grid;place-items:center;flex-shrink:0;color:#fff;
}
.adv-hook-body{flex:1;font-size:13.5px;line-height:1.5}
.adv-hook p{margin:0}
.adv-hook button{padding:10px 14px;background:#fff;color:var(--teal-deep);border:none;border-radius:99px;font-weight:800;font-size:13px;font-family:var(--display);box-shadow:0 2px 0 rgba(0,0,0,0.15);flex-shrink:0}
.adv-hook button:hover{transform:translateY(-1px)}
.adv-hook-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.adv-hook-btn .adv-icon{width:14px;height:14px;flex-shrink:0}

/* SVG icon sizing — without these <svg class="adv-icon"> elements default to ~300×150
   and blow out every pill/tab/badge they sit in. Stroke colour inherits via currentColor. */
.adv-icon{width:16px;height:16px;flex-shrink:0;display:inline-block;vertical-align:-3px}
.adv-pill .adv-icon{width:14px;height:14px;vertical-align:-2px}
.adv-tab-icon .adv-icon{width:22px;height:22px;vertical-align:-4px}
.adv-hero-badge .adv-icon{width:12px;height:12px;vertical-align:-1px}
.adv-hook-icon .adv-icon{width:28px;height:28px}

/* ============================================================
   TABS  ───────────────────────────────────────────────────────
   ============================================================ */
.adv-tabs{display:flex;gap:10px;margin:22px 0 6px}
.adv-tab{
  flex:1;padding:14px 18px;border-radius:16px;background:transparent;border:2px solid transparent;
  text-align:left;display:flex;align-items:center;gap:12px;transition:all .15s;
}
.adv-tab-icon{font-size:24px;line-height:1}
.adv-tab-label{display:block;font-family:var(--display);font-size:16px;font-weight:800;color:var(--ink-soft)}
.adv-tab-count{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:1px}
.adv-tab{position:relative;transition:background .15s}
.adv-tab:not(.active):hover{background:rgba(0,0,0,.03)}
.adv-tab.active{background:var(--p1-tab-active-bg)}
.adv-tab.active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:0;
  height:var(--p1-tab-active-bar);
  background:var(--teal);border-radius:3px 3px 0 0;
}
.adv-tab.active .adv-tab-label{font-weight:800;color:var(--teal-deep)}
.adv-tab:not(.active):hover .adv-tab-label{color:var(--ink)}

.phase{display:none}
.phase.active{display:block;animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   CARDS  ──────────────────────────────────────────────────────
   ============================================================ */
.card{
  background:var(--panel);border:2px solid var(--rule);border-radius:20px;padding:var(--p1-card-py) var(--p1-card-px);
  margin-top:18px;box-shadow:0 4px 0 var(--rule);
}
.card.tint-soft{background:var(--soft);border-color:#e5d8b5}
.card.tint-teal{background:var(--teal-soft);border-color:#aedfd8;box-shadow:0 4px 0 #b9d9d4}
.card.tint-coral{background:var(--coral-soft);border-color:#f7c2b1;box-shadow:0 4px 0 #e7b9a8}
.card.tint-amber{background:var(--amber-soft);border-color:#f0d488;box-shadow:0 4px 0 #e0c478}

.card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card-num{
  width:var(--p1-cardnum-size);height:var(--p1-cardnum-size);
  border-radius:50%;
  background:var(--p1-cardnum-bg);color:var(--p1-cardnum-fg);
  display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:16px;
  flex-shrink:0;
}
.card-num.teal{background:var(--teal);box-shadow:0 2px 0 var(--teal-deep)}
.card-num.amber{background:var(--amber);box-shadow:0 2px 0 #b87f1a}
.card-num.navy{background:var(--navy);box-shadow:0 2px 0 #161e30}
.card-num svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.card-title{font-family:var(--display);font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-0.01em;line-height:1.2;flex:1}
.card-eyebrow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;font-weight:800;color:var(--muted);margin-bottom:2px}
.xp-tag{font-size:11px;font-weight:800;padding:5px 10px;border-radius:99px;font-family:var(--body);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.xp-tag.teal{background:var(--teal-soft);color:var(--teal-deep)}
.xp-tag.amber{background:var(--amber-soft);color:#7a4f00}
.xp-tag.rose{background:var(--rose-soft);color:#9f1239}
.xp-tag.plum{background:#ede9fe;color:#6d28d9}
.think-first .xp-tag.amber{background:var(--amber);color:#1a1207;box-shadow:0 0 0 2px rgba(255,255,255,.15) inset}

.card p{color:var(--ink-soft);margin:0 0 12px;line-height:1.6}
.card p:last-child{margin-bottom:0}
.card ul{color:var(--ink-soft);margin:0 0 12px;padding-left:22px;line-height:1.7}
.card ul li{margin-bottom:3px}
.card strong{color:var(--ink)}
.card em{font-style:italic;color:var(--teal-deep);font-weight:600}

.section-label{
  display:block;font-size:11px;font-weight:800;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--muted);margin:32px 8px 4px;
}

/* ============================================================
   THINK FIRST  ────────────────────────────────────────────────
   ============================================================ */
.think-first{
  background:linear-gradient(135deg,#0e3a35 0%,#0e8a7d 100%);color:#fff;
  border:none;box-shadow:0 6px 0 rgba(11,80,72,0.4);position:relative;overflow:hidden;
}
.think-first::before{
  content:"";position:absolute;top:-30px;right:-30px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,255,255,0.12) 0%,transparent 70%);
}
.think-first .card-title{color:#fff}
.think-first p{color:rgba(255,255,255,0.92)}
.think-first .card-num{background:var(--amber);box-shadow:0 2px 0 #b87f1a}
.tf-q{position:relative;margin-bottom:18px}
.tf-q:last-child{margin-bottom:0}
.tf-q h4,.think-first .tf-q h4{font-size:16px;color:#fff;font-weight:700;line-height:1.45;letter-spacing:.005em;margin:0 0 10px;padding:0;background:none;border-left:none}

textarea.adv-textarea{
  width:100%;min-height:140px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,0.10);border:2px solid rgba(255,255,255,0.24);
  color:#fff;font-family:var(--body);font-size:14px;line-height:1.6;
  resize:vertical;outline:none;transition:border-color .15s;
}
textarea.adv-textarea::-webkit-resizer{display:none}
textarea.adv-textarea::placeholder{color:rgba(255,255,255,0.55)}
textarea.adv-textarea:focus{border-color:var(--amber);background:rgba(255,255,255,0.14)}
.card:not(.think-first) textarea.adv-textarea{
  background:#fffaf0;border:2px solid var(--rule);color:var(--ink);
}
.card:not(.think-first) textarea.adv-textarea::placeholder{color:var(--muted)}
.card:not(.think-first) textarea.adv-textarea:focus{border-color:var(--teal);background:#fff}

.autosave{position:absolute;right:14px;bottom:14px;font-size:11px;color:var(--muted);font-weight:700;letter-spacing:0.04em}
.think-first .autosave{color:rgba(255,255,255,0.7)}

/* ============================================================
   INTENTIONS — KNOW / UNDERSTAND / DO  ────────────────────────
   ============================================================ */
.intent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.intent-card{
  padding:16px 18px;border-radius:14px;border:2px solid var(--rule);
  background:var(--panel);position:relative;
}
.intent-card.know{background:#f0ecff;border-color:#cdc1ef}
.intent-card.under{background:#ffeae3;border-color:#f5c4b3}
.intent-card.do{background:#fff1c9;border-color:#ecd28a}
.intent-card h4{font-size:11px;letter-spacing:0.15em;text-transform:uppercase;font-weight:800;color:var(--ink);margin:0 0 10px;display:inline-flex;align-items:center;gap:6px}
.intent-card.know h4{color:#5b3fb0}
.intent-card.under h4{color:#b04420}
.intent-card.do h4{color:#7a5a14}
.intent-card ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink);line-height:1.55}
.intent-card ul li{margin-bottom:5px}
.intent-card a,.intent-card strong{
  color:var(--ink);font-weight:700;
  text-decoration:underline;text-decoration-color:var(--teal-deep);
  text-decoration-thickness:2px;text-underline-offset:2px;
}

/* ============================================================
   KEY TERMS — flip cards  ─────────────────────────────────────
   ============================================================ */
.kt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kt{height:118px;perspective:900px;cursor:pointer}
.kt-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,1.4,.4,1)}
.kt.flip .kt-inner{transform:rotateY(180deg)}
.kt-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between}
.kt-front{background:var(--soft);border:2px solid var(--rule)}
.kt-back{background:var(--teal-deep);color:#fff;transform:rotateY(180deg)}
.kt-term{font-family:var(--display);font-size:14px;font-weight:800;color:var(--ink)}
/* Hide the literal HTML text "tap →" so ::before can render a pointer-aware
   label (tap on touch, click on mouse) without needing per-lesson markup changes. */
.kt-flip-hint{font-size:0;color:transparent;position:relative;line-height:0}
.kt-flip-hint::before{
  content:"tap →";
  font-size:11px;color:var(--ink-soft);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;line-height:1;
}
/* Devices with a precise pointer (desktop mouse, trackpad) — swap "tap" for "click". */
@media (hover:hover) and (pointer:fine){
  .kt-flip-hint::before{content:"click →"}
}
.kt-back .kt-term{color:#fff}
.kt-def{font-size:12.5px;color:#fff;line-height:1.45;margin:6px 0}
.kt-back-hint{font-size:10px;color:rgba(255,255,255,0.65);letter-spacing:.08em;text-transform:uppercase}
.kt-dot{width:8px;height:8px;border-radius:99px;background:var(--coral);display:inline-block;margin-right:6px;vertical-align:1px}
.kt-legend{
  display:flex;flex-wrap:wrap;gap:14px;margin:0 0 14px;
  font-size:11.5px;color:var(--ink-soft);font-weight:600;
}
.kt-legend-key{display:inline-flex;align-items:center;gap:6px}
.kt-legend-key .kt-dot{width:8px;height:8px;border-radius:99px;display:inline-block}

/* ============================================================
   SPOT THE TRAP — pair cards  ─────────────────────────────────
   ============================================================ */
.trap-grid{display:grid;gap:10px}
.trap-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.trap-card{padding:14px 16px;border-radius:14px;display:flex;gap:12px;align-items:flex-start;border:2px solid}
.trap-card.wrong{background:#fff0ed;border-color:#f5c4b3}
.trap-card.right{background:#e7f7f4;border-color:#aedfd8}
.trap-mark{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;flex-shrink:0;font-weight:800;font-size:14px;color:#fff}
.trap-card.wrong .trap-mark{background:var(--coral)}
.trap-card.right .trap-mark{background:var(--teal)}
.trap-card p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.trap-card strong{color:var(--ink)}
.trap-card.wrong strong{color:var(--coral-dk)}
.trap-card.right strong{color:var(--teal-deep)}

/* ============================================================
   ORG-STACK DIAGRAM  ──────────────────────────────────────────
   ============================================================ */
.org-stack{display:grid;grid-template-columns:1fr 1.1fr;gap:22px;align-items:center;padding:18px;background:var(--soft);border-radius:14px;margin:14px 0}
.org-stack-visual{background:#fff;border-radius:12px;padding:16px;border:2px solid var(--rule)}
.org-stack-list{display:flex;flex-direction:column;gap:8px}
.org-stack-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-radius:10px;border:2px solid var(--rule);border-left-width:6px}
.org-stack-row[data-lvl="1"]{border-left-color:var(--coral)}
.org-stack-row[data-lvl="2"]{border-left-color:var(--amber)}
.org-stack-row[data-lvl="3"]{border-left-color:var(--teal)}
.org-stack-row[data-lvl="4"]{border-left-color:var(--navy)}
.org-stack-num{width:22px;height:22px;border-radius:99px;background:var(--ink);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;font-family:var(--display);flex-shrink:0}
.org-stack-row[data-lvl="1"] .org-stack-num{background:var(--coral)}
.org-stack-row[data-lvl="2"] .org-stack-num{background:var(--amber)}
.org-stack-row[data-lvl="3"] .org-stack-num{background:var(--teal)}
.org-stack-row[data-lvl="4"] .org-stack-num{background:var(--navy)}
.org-stack-row strong{font-family:var(--display);font-size:14px;color:var(--ink)}
.org-stack-row span{font-size:12.5px;color:var(--ink-soft);margin-left:4px}

/* ============================================================
   CALLOUTS — Anchor / Plant link / Misconception  ────────────
   ============================================================ */
.callout{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;
  margin:14px 0;border-left:4px solid;background:#fff;
}
.callout-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;color:#fff;align-self:center}
.callout-icon svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.callout-tag{
  height:var(--p1-ctag-h);padding:0 8px;
  border-radius:var(--p1-ctag-radius);
  font-size:var(--p1-ctag-fs);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;
}
.callout-body{flex:1;color:var(--ink-soft);font-size:13.5px;line-height:1.55}
.callout-body strong{color:var(--ink)}

.callout.anchor{background:#fff7e6;border-color:var(--amber)}
.callout.anchor .callout-icon{background:var(--amber)}
.callout-anchor .callout-tag,.callout.anchor .callout-tag{
  background:var(--amber-soft);color:var(--adv-gold-deep,#7a4f00);
}

.callout.misc{background:#f3eeff;border-color:#9379d8}
.callout.misc .callout-icon{background:#7a5fc4}
.callout.misc .callout-tag{background:#7a5fc4;color:#fff}

.callout.plant{background:#e7f7f4;border-color:var(--teal)}
.callout.plant .callout-icon{background:var(--teal)}
.callout.plant .callout-tag{background:var(--teal);color:#fff}

/* Worked-example callout — teal-ish */
.callout.callout-example,
.callout-example{
  background:#eaf6f3;border-color:var(--teal,#14b8a6);border-left-width:4px;border-left-style:solid;
}
.callout-example .callout-tag{background:var(--teal-soft);color:var(--teal-deep)}

/* Misconception / "watch out" callout — coral */
.callout.callout-trap,
.callout-trap{
  background:#fff0ea;border-color:var(--coral,#f97359);border-left-width:4px;border-left-style:solid;
}
.callout-trap .callout-tag{background:var(--coral,#f97359);color:#fff}

/* Card body teaching content — main concept explanation */
.card-teach{
  font-size:14.5px;line-height:1.65;color:var(--ink);
  margin:6px 0 12px;
}
.card-teach p{margin:0 0 10px}
.card-teach p:last-child{margin-bottom:0}
.card-teach h4{
  font-family:var(--display,Outfit,sans-serif);font-size:14px;font-weight:700;
  margin:14px 0 6px;color:var(--ink);
}
.card-teach ul,.card-teach ol{margin:4px 0 10px;padding-left:22px}
.card-teach li{margin-bottom:4px;line-height:1.5}
.card-teach strong{color:var(--ink);font-weight:700}
.card-teach em{color:var(--ink-soft);font-style:italic}

/* ============================================================
   ACTIVITY CARDS  ─────────────────────────────────────────────
   ============================================================ */
.activity{
  background:#fff8f0;border:2px dashed #f0c89a;box-shadow:0 4px 0 #e8be8e;
}
.activity .card-num{background:var(--amber);box-shadow:0 2px 0 #b87f1a}
.activity-mascot{
  display:flex;gap:14px;align-items:flex-start;padding:14px;background:#fff;border-radius:12px;
  border:2px solid var(--rule);margin-bottom:14px;
}
.activity-mascot-text{flex:1}
.activity-eyebrow{display:block;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:800;color:var(--amber);margin-bottom:3px}
.activity-mascot p{margin:0;font-size:14px;color:var(--ink);line-height:1.55}

/* CER frame */
.cer{background:#fff;border:2px solid var(--rule);border-radius:12px;padding:14px 16px;margin:14px 0}
.cer h4{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;font-weight:800}
.cer p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.7}
.cer p strong{display:inline-block;min-width:80px;color:var(--teal-deep)}

/* ============================================================
   COPY INTO BOOKS  ────────────────────────────────────────────
   ============================================================ */
.copy-box{
  background:var(--amber-soft);border:2px solid #f0d488;border-radius:14px;margin-top:18px;
  overflow:hidden;box-shadow:0 3px 0 #e0c478;
}
.copy-box summary{
  list-style:none;padding:14px 18px;cursor:pointer;display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:14px;font-weight:800;color:#7a4f00;
}
.copy-box summary::-webkit-details-marker{display:none}
.copy-box summary::before{content:"📝";font-size:18px}
.copy-box summary::after{content:"+";margin-left:auto;font-size:22px;font-weight:800;transition:transform .2s}
.copy-box[open] summary::after{content:"−"}
.copy-grid{padding:0 18px 18px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.copy-item{background:#fff;border-radius:10px;padding:12px 14px;border:1.5px solid #f0d488}
.copy-item h4{font-size:12.5px;font-weight:800;color:var(--ink);margin:0 0 4px}
.copy-item p{font-size:12.5px;color:var(--ink-soft);margin:0;line-height:1.5}

/* ============================================================
   MULTIPLE CHOICE  ────────────────────────────────────────────
   ============================================================ */
.mc-q{margin-top:18px}
.mc-q:first-child{margin-top:0}
.mc-stem{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.mc-stem-num{width:30px;height:30px;border-radius:10px;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:14px;flex-shrink:0;box-shadow:0 2px 0 var(--teal-deep)}
.mc-stem p{margin:5px 0 0;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.5}
.mc-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;margin-left:40px}
.mc-badge{display:inline-block;padding:3px 9px;border-radius:99px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.06em}
.mc-badge.understand{background:#dbeafe;color:#1d4ed8}
.mc-badge.apply{background:#dcfce7;color:#15803d}
.mc-badge.analyse{background:#ede9fe;color:#6d28d9}
.mc-badge.core{background:#e0f2fe;color:#0369a1}
.mc-badge.reasoning{background:#fef3c7;color:#92400e}

.mc-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-left:40px}
.mc-opt{
  display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;
  border:2px solid var(--rule);background:var(--panel);text-align:left;
  font-family:var(--body);font-size:14px;color:var(--ink);
  box-shadow:0 3px 0 var(--rule);transition:all .12s;
}
.mc-opt:hover:not(:disabled){border-color:var(--teal);transform:translateY(-1px);box-shadow:0 4px 0 var(--rule)}
.mc-opt:disabled{cursor:default;opacity:1}
.mc-letter{width:26px;height:26px;border-radius:99px;background:var(--soft);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0;font-family:var(--display)}
.mc-opt.correct{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 3px 0 #aedfd8}
.mc-opt.correct .mc-letter{background:var(--teal);color:#fff}
.mc-opt.incorrect{border-color:var(--coral);background:var(--coral-soft);box-shadow:0 3px 0 #f7c2b1}
.mc-opt.incorrect .mc-letter{background:var(--coral);color:#fff}

.mc-feedback{display:none;margin:12px 0 0 40px;padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.55;display:flex;gap:10px;align-items:flex-start}
.mc-feedback.show{display:flex}
.mc-feedback.correct{background:var(--teal-soft);color:var(--teal-deep);border:1.5px solid #aedfd8}
.mc-feedback.incorrect{background:var(--coral-soft);color:#8b2f1a;border:1.5px solid #f7c2b1}
.mc-feedback strong{font-weight:800}
.mc-feedback-mascot{flex-shrink:0}

.score-banner{display:none;margin-top:18px;padding:16px 20px;border-radius:14px;text-align:center;font-family:var(--display);font-weight:800;font-size:16px}
.score-banner.show{display:block}
.score-banner.pass{background:var(--teal-soft);color:var(--teal-deep);border:2px solid #aedfd8;box-shadow:0 3px 0 #b9d9d4}
.score-banner.fail{background:var(--coral-soft);color:#8b2f1a;border:2px solid #f7c2b1;box-shadow:0 3px 0 #e7b9a8}

/* ============================================================
   SHORT ANSWER  ───────────────────────────────────────────────
   ============================================================ */
.saq{margin-top:18px;padding-top:18px;border-top:1.5px dashed var(--rule)}
.saq:first-of-type{margin-top:0;padding-top:0;border-top:none}
.saq-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.marks{margin-left:auto;font-weight:800;color:var(--teal-deep);font-size:12px}
.saq-q{font-size:15px;color:var(--ink);font-weight:600;line-height:1.55;margin:0 0 4px}
.saq-marks-note{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-bottom:10px;font-style:italic}

/* ============================================================
   REVIEW TILES + BADGES + COMPLETE  ───────────────────────────
   ============================================================ */
.review-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
.review-tile{padding:14px 16px;border-radius:12px;border:2px solid var(--rule);background:var(--soft)}
.review-tile h4{font-family:var(--display);font-size:14px;font-weight:800;color:var(--ink);margin:0 0 4px}
.review-tile p{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.5}

.badge-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:6px}
.badge{padding:12px 8px;border-radius:14px;text-align:center;border:2px solid;background:var(--soft)}
.badge.got{background:var(--amber-soft);border-color:var(--amber)}
.badge:not(.got){border-color:var(--rule);opacity:0.85}
.badge-icon{font-size:28px;margin-bottom:3px;line-height:1}
.badge:not(.got) .badge-icon{filter:grayscale(85%)}
.badge-name{font-size:10.5px;font-weight:800;color:var(--ink);line-height:1.2}
.badge-prog{height:4px;background:#fff;border-radius:99px;overflow:hidden;margin-top:6px}
.badge-prog-fill{height:100%;background:var(--teal)}

.complete-box{
  display:flex;gap:14px;align-items:center;padding:18px 22px;background:var(--panel);
  border:2px solid var(--rule);border-radius:16px;margin-top:18px;box-shadow:0 4px 0 var(--rule);
}
.complete-checkbox{
  width:32px;height:32px;border-radius:9px;border:2.5px solid var(--teal);
  cursor:pointer;display:grid;place-items:center;font-weight:800;color:#fff;
  transition:background .15s;flex-shrink:0;
}
.complete-checkbox.done{background:var(--teal);box-shadow:0 2px 0 var(--teal-deep)}
.complete-box strong{font-family:var(--display);font-size:15px;color:var(--ink);display:block}
.complete-box small{color:var(--ink-soft);font-size:13px;line-height:1.5}

.lesson-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.lesson-nav a{
  flex:1;text-decoration:none;padding:14px 18px;border-radius:14px;background:var(--panel);
  border:2px solid var(--rule);color:var(--ink);font-family:var(--display);font-weight:800;
  font-size:14px;text-align:center;box-shadow:0 3px 0 var(--rule);transition:all .12s;
}
.lesson-nav a.next{background:var(--coral);color:#fff;border-color:var(--coral);box-shadow:0 3px 0 var(--coral-dk)}
.lesson-nav a:hover{transform:translateY(-1px)}

/* answers details */
.answers-box{margin-top:18px;background:var(--panel);border:2px solid var(--rule);border-radius:16px;box-shadow:0 4px 0 var(--rule);overflow:hidden}
.answers-box summary{list-style:none;padding:18px 22px;cursor:pointer;display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:16px;font-weight:800;color:var(--ink)}
.answers-box summary::-webkit-details-marker{display:none}
.answers-box summary::after{content:"+";margin-left:auto;font-size:22px;font-weight:800}
.answers-box[open] summary::after{content:"−"}
.answers-body{padding:0 22px 22px}
.answers-body h3{font-size:14px;color:var(--teal-deep);margin:16px 0 6px;font-weight:800}
.answers-body h3:first-child{margin-top:0}
.answers-body p{font-size:13.5px;color:var(--ink-soft);margin:0 0 8px;line-height:1.6}

/* ============================================================
   RESPONSIVE  ────────────────────────────────────────────────
   ============================================================ */
@media (max-width:780px){
  .adv-shell{padding:12px 12px 60px}
  .adv-topbar{padding:10px 14px;gap:6px;overflow-x:auto;white-space:nowrap}
  .adv-pill{font-size:11px;padding:5px 9px}
  .adv-hero{padding:22px 22px}
  .adv-hero-inner{grid-template-columns:auto 1fr;gap:14px}
  .adv-ring{display:none}
  .adv-hero-text h1{font-size:30px}
  .adv-tabs{flex-wrap:wrap;gap:6px}
  .adv-tab{flex:1 1 30%;padding:10px;flex-direction:column;align-items:flex-start;gap:4px}
  .adv-tab-icon{font-size:20px}
  .intent-grid,.kt-grid,.mc-options,.review-grid,.copy-grid,.org-stack{grid-template-columns:1fr}
  .trap-pair{grid-template-columns:1fr}
  .badge-wall{grid-template-columns:repeat(3,1fr)}
  .mc-options{margin-left:0}
  .mc-meta{margin-left:0}
  .mc-feedback{margin-left:0}
  .card{padding:18px}
  .card-title{font-size:18px}
}

/* ============================================================
   GAMIFICATION SUPPLEMENT (lock pill + pulse animations)
   Added by the script after extracting Claude Design's CSS.
   ============================================================ */
.adv-pill-lock{background:#fef3c7;color:#92400e;border:1.5px solid #fcd34d}
.adv-pill-lock.mastered{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;border-color:#d97706}
@keyframes adv-pulse-xp-kf{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(245,166,35,0.6)}
  50%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(245,166,35,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(245,166,35,0)}
}
.adv-pulse-xp{animation:adv-pulse-xp-kf .8s ease-out}
.adv-pulse-coins{animation:adv-pulse-xp-kf .8s ease-out}

/* MC click feedback */
.mc-opt.chosen-right{background:#ecfdf5;border-color:#10b981;color:#065f46}
.mc-opt.chosen-wrong{background:#fef2f2;border-color:#dc2626;color:#991b1b;opacity:.7}
.mc-feedback{display:none;padding:12px 14px;border-radius:10px;margin-top:12px;font-size:13.5px;line-height:1.55}
.mc-feedback.show{display:block}
.mc-feedback.right{background:#ecfdf5;color:#065f46;border:1px solid #6ee7b7}
.mc-feedback.wrong{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5}

/* ============================================================
   LAYOUT CLARITY SUPPLEMENTS (added 2026-05-20)
   Visual treatments for self-paced study: clear "what next" cues
   between content card -> book notes -> microtask.
   ============================================================ */

/* Next-step hand-off line at the bottom of each content card */
.card-nextstep{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 -4px;
  padding:10px 14px;
  background:linear-gradient(90deg, var(--teal-soft) 0%, transparent 100%);
  border-radius:8px;
  border-left:3px solid var(--teal);
  font-size:13px;
  color:var(--ink-soft);
  font-style:italic;
}
.card-nextstep-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background:var(--teal);
  color:#fff;
  font-weight:800;
  font-size:14px;
  flex-shrink:0;
}

/* Book-notes "copy-box" — make it inviting when collapsed */
.copy-box.adv-book-notes{
  margin:14px 0;
  border:1.5px solid var(--amber-soft);
  border-radius:12px;
  background:linear-gradient(90deg, #fffaf0 0%, #fff5e1 100%);
  overflow:hidden;
  transition: box-shadow 0.2s;
}
.copy-box.adv-book-notes:hover{
  box-shadow:0 4px 14px rgba(245,166,35,0.18);
}
.copy-box.adv-book-notes > summary{
  cursor:pointer;
  padding:12px 18px;
  font-weight:700;
  color:#7a4f00;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
}
.copy-box.adv-book-notes > summary::-webkit-details-marker{display:none}
.copy-box.adv-book-notes > summary::after{
  content:"▾";
  margin-left:auto;
  font-size:16px;
  transition: transform 0.2s;
}
.copy-box.adv-book-notes[open] > summary::after{
  transform: rotate(180deg);
}
.copy-box-icon{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  background:var(--amber);
  color:#fff;
  border-radius:8px;
  font-size:14px;
  flex-shrink:0;
}
.copy-box-xp{
  margin-left:auto;
  font-size:11px;
  font-weight:800;
  padding:3px 9px;
  border-radius:99px;
  background:rgba(245,166,35,0.18);
  color:#7a4f00;
  letter-spacing:0.04em;
}
.copy-box.adv-book-notes ul{
  margin:0;
  padding:0 24px 16px 38px;
  color:var(--ink);
  font-size:14px;
  line-height:1.7;
}
.copy-box.adv-book-notes ul li{
  margin-bottom:6px;
}

/* Microtask widget — visual separation from card above + step header */
.adv-microtask{
  margin:14px 0 24px;
  padding:18px 20px;
  background:linear-gradient(135deg, #f6fcfb 0%, #ecfdf5 100%);
  border:1.5px solid var(--teal-soft);
  border-radius:12px;
  position:relative;
}
.adv-microtask::before{
  content:"Step 2 · Check your understanding";
  position:absolute;
  top:-12px;
  left:18px;
  background:var(--teal);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:99px;
}
.adv-microtask .mt-prompt{
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  margin-bottom:14px;
  margin-top:6px;
}

/* ============================================================
   MICROTASK WIDGET STYLES (overrides for Claude Design context)
   junior-adventure-microtasks.css uses --adv-* vars from
   junior-adventure.css (not loaded). These rules supply the
   visual treatments those rules expected, in Claude Design tokens.
   ============================================================ */

/* CSS variable aliases so junior-adventure-microtasks.css rules resolve */
:root{
  --adv-rule: var(--rule);
  --adv-coral: var(--coral);
  --adv-coral-soft: var(--coral-soft);
  --adv-green: #10b981;
  --adv-green-soft: #ecfdf5;
  --adv-rose: var(--coral);
  --adv-rose-soft: var(--coral-soft);
  --adv-rose-deep: var(--coral-dk);
  --adv-gold: var(--amber);
  --adv-gold-soft: var(--amber-soft);
  --adv-gold-deep: #7a4f00;
  --adv-ink: var(--ink);
  --adv-ink-soft: var(--ink-soft);
  --adv-display: var(--display);
  --adv-body: var(--body);
}

/* MC buttons — proper card-like options */
.adv-microtask[data-microtask="mc"] .mt-body[data-mc]{
  display:flex; flex-direction:column; gap:8px;
}
.adv-microtask .mt-opt{
  display:block; width:100%; text-align:left;
  padding:12px 16px;
  background:#fff;
  border:1.5px solid var(--rule);
  border-radius:10px;
  font-family:var(--body); font-size:14.5px;
  color:var(--ink); cursor:pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.adv-microtask .mt-opt:hover:not(:disabled){
  border-color:var(--teal); background:var(--teal-soft);
}
.adv-microtask .mt-opt:active:not(:disabled){
  transform: translateY(1px);
}
.adv-microtask .mt-opt.chosen-right{
  border-color:#10b981; background:#ecfdf5; color:#065f46;
}
.adv-microtask .mt-opt.chosen-wrong{
  border-color:#dc2626; background:#fef2f2; color:#991b1b; opacity:0.7;
}

/* TF buttons */
.adv-microtask[data-microtask="tf"] .mt-tf-controls{
  display:flex; gap:10px; margin-top:14px;
}
.adv-microtask .mt-tf{
  flex:1;
  padding:12px 18px;
  background:#fff;
  border:1.5px solid var(--rule);
  border-radius:10px;
  font-family:var(--body); font-size:15px; font-weight:700;
  color:var(--ink); cursor:pointer;
  transition: all 0.15s;
}
.adv-microtask .mt-tf:hover:not(:disabled){
  border-color:var(--teal); background:var(--teal-soft);
}
.adv-microtask .mt-tf.chosen-right{
  border-color:#10b981; background:#ecfdf5; color:#065f46;
}
.adv-microtask .mt-tf.chosen-wrong{
  border-color:#dc2626; background:#fef2f2; color:#991b1b;
}

/* TTL statements */
.adv-microtask .mt-stmt{
  display:block; width:100%; text-align:left;
  padding:12px 16px; margin-bottom:8px;
  background:#fff;
  border:1.5px solid var(--rule);
  border-radius:10px;
  font-family:var(--body); font-size:14.5px;
  color:var(--ink); cursor:pointer;
}
.adv-microtask .mt-stmt:hover:not(:disabled){ border-color:var(--teal); background:var(--teal-soft); }
.adv-microtask .mt-stmt.chosen-right{ border-color:#10b981; background:#ecfdf5; color:#065f46; }
.adv-microtask .mt-stmt.chosen-wrong{ border-color:#dc2626; background:#fef2f2; color:#991b1b; }

/* Odd one out items */
.adv-microtask .mt-item{
  padding:12px 16px; margin-bottom:8px;
  background:#fff;
  border:1.5px solid var(--rule);
  border-radius:10px;
  font-family:var(--body); font-size:14.5px;
  color:var(--ink); cursor:pointer; display:block; width:100%; text-align:left;
}
.adv-microtask .mt-item:hover:not(:disabled){ border-color:var(--teal); background:var(--teal-soft); }
.adv-microtask .mt-item.chosen-right{ border-color:#10b981; background:#ecfdf5; }
.adv-microtask .mt-item.chosen-wrong{ border-color:#dc2626; background:#fef2f2; }

/* Cloze blanks + tokens */
.adv-microtask [data-blank]{
  display:inline-block; min-width:80px; padding:2px 10px;
  margin:0 4px; border-bottom:2px dashed var(--ink-soft);
  background:rgba(20,184,166,0.07); color:var(--teal-deep);
  font-weight:700; cursor:pointer; vertical-align:baseline;
}
.adv-microtask [data-blank].filled-right{
  background:#ecfdf5; border-bottom-color:#10b981; color:#065f46;
}
.adv-microtask [data-blank].filled-wrong{
  background:#fef2f2; border-bottom-color:#dc2626; color:#991b1b;
}
.adv-microtask .mt-tokens{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.adv-microtask .mt-tok{
  padding:8px 14px;
  background:#fff;
  border:1.5px solid var(--rule);
  border-radius:99px;
  font-family:var(--body); font-size:13.5px; font-weight:600;
  color:var(--ink); cursor:pointer;
}
.adv-microtask .mt-tok:hover:not(:disabled){ border-color:var(--teal); background:var(--teal-soft); }
.adv-microtask .mt-tok.selected{ border-color:var(--coral); background:var(--coral-soft); color:var(--coral-dk); }
.adv-microtask .mt-tok.used{ opacity:0.4; cursor:default; }

/* Match — 2-column grid */
.adv-microtask[data-microtask="match"] .mt-body{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.adv-microtask .mt-col-left,
.adv-microtask .mt-col-right{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
}
.adv-microtask .mt-col-left li,
.adv-microtask .mt-col-right li{
  padding:10px 14px;
  background:#fff;
  border:1.5px solid var(--rule);
  border-radius:10px;
  font-family:var(--body); font-size:14px;
  color:var(--ink); cursor:pointer;
}
.adv-microtask .mt-col-left li:hover:not(.matched),
.adv-microtask .mt-col-right li:hover:not(.matched){
  border-color:var(--teal); background:var(--teal-soft);
}
.adv-microtask .mt-col-left li.selected{
  border-color:var(--coral); background:var(--coral-soft);
}
.adv-microtask .mt-col-left li.matched,
.adv-microtask .mt-col-right li.matched{
  border-color:#10b981; background:#ecfdf5; color:#065f46; cursor:default;
}
.adv-microtask .mt-col-right li.mismatch{
  border-color:#dc2626; background:#fef2f2;
}

/* Activity (write-then-lock-in) */
.adv-microtask .mt-activity-input{
  width:100%; min-height:96px;
  padding:12px 14px;
  background:#fff;
  border:1.5px solid var(--rule);
  border-radius:10px;
  font-family:var(--body); font-size:14.5px;
  color:var(--ink); resize:vertical;
}
.adv-microtask .mt-activity-input:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft);
}
.adv-microtask .mt-activity-lockin{
  margin-top:12px;
  padding:10px 18px;
  background:var(--teal); color:#fff;
  border:none; border-radius:10px;
  font-family:var(--body); font-weight:700; font-size:14px;
  cursor:pointer;
}
.adv-microtask .mt-activity-lockin:disabled{
  background:var(--rule); color:var(--ink-soft); cursor:not-allowed;
}
.adv-microtask .mt-activity-model{
  margin-top:14px; padding:14px;
  background:#ecfdf5; border-left:3px solid #10b981;
  border-radius:8px;
  font-size:14px; line-height:1.6; color:#065f46;
}

/* Feedback area */
.adv-microtask .mt-feedback{
  margin-top:14px;
  padding:12px 14px;
  border-radius:10px;
  font-size:13.5px; line-height:1.55;
}
.adv-microtask .mt-feedback[data-feedback="right"]{
  background:#ecfdf5; color:#065f46; border:1px solid #6ee7b7;
}
.adv-microtask .mt-feedback[data-feedback="wrong"]{
  background:#fef2f2; color:#991b1b; border:1px solid #fca5a5;
}
.adv-microtask .mt-feedback[data-feedback="reveal"]{
  background:#fff7e6; color:#7a4f00; border:1px solid var(--amber);
}

/* Meta strip (TYPE pill + XP pill injected by JS).
   The ::before "Step 2" badge above signals STAGE; this strip signals widget
   TYPE + XP. They complement each other. */
.adv-microtask .mt-meta{
  display:flex; align-items:center; gap:10px;
  margin-top:6px; margin-bottom:14px;
}
.adv-microtask .mt-type-pill{
  display:inline-flex; align-items:center;
  padding:5px 14px;
  background:linear-gradient(180deg, var(--amber) 0%, #c47f08 100%);
  color:#fff;
  font-family:var(--display); font-size:11px; font-weight:800;
  letter-spacing:0.14em; text-transform:uppercase;
  border-radius:99px;
}
.adv-microtask .mt-xp-pill{
  margin-left:auto;
  padding:5px 12px;
  background:var(--amber-soft);
  color:#7a4f00;
  font-family:var(--body); font-size:12px; font-weight:800;
  border-radius:99px;
}


/* ============================================================
   CLAUDE DESIGN POLISH PASS 2 (extracted 2026-05-20)
   12 sections covering content-card personality, card-to-notes-
   to-microtask flow, and all 7 microtask widget types.
   Source: CURRENT SYSTEM/design-reference/I)2-polished-sample.html
   ============================================================ */

    /* ───────── 1. CONTENT CARD PERSONALITY ───────────────────────────────── */
    /* Subtle alternation of paper tone on plain cards. Skips special cards. */
    .phase > .card:not(.think-first):not(.activity):not(.adv-mc):not([class*="tint-"]):nth-of-type(odd){
      background: linear-gradient(180deg, #fffdf6 0%, var(--panel,#fff) 100%);
    }
    .phase > .card:not(.think-first):not(.activity):not(.adv-mc):not([class*="tint-"]):nth-of-type(even){
      background: linear-gradient(180deg, #fdf6e3 0%, var(--panel,#fff) 100%);
      border-color: #ead9b0;
    }

    /* Decorative dotted corner accent on plain content cards. */
    .phase > .card:not(.think-first):not(.activity):not(.adv-mc):not([class*="tint-"]):not(:has(.card-num.teal)){
      position: relative;
      overflow: hidden;
    }
    .phase > .card:not(.think-first):not(.activity):not(.adv-mc):not([class*="tint-"]):not(:has(.card-num.teal))::after{
      content: "";
      position: absolute;
      top: -14px;
      right: -14px;
      width: 90px;
      height: 90px;
      background-image: radial-gradient(circle, rgba(26,31,46,0.10) 1.1px, transparent 1.4px);
      background-size: 10px 10px;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0.55;
    }

    /* Stronger title hierarchy when there's a card-eyebrow above the title. */
    .card-head .card-eyebrow{
      font-size: 10.5px;
      letter-spacing: 0.14em;
      margin-bottom: 4px;
    }
    .card-head .card-title{
      letter-spacing: -0.012em;
    }

    /* Breathing room between paragraph blocks and embedded callouts. */
    .card p + .callout,
    .card ul + .callout,
    .card .compare-grid + .callout,
    .card .diagram-wrap + .callout{
      margin-top: 20px;
    }
    .card .callout + .callout{ margin-top: 10px; }

    /* ───────── 2. CARD → BOOK-NOTES → MICROTASK FLOW ─────────────────────── */
    /* Tighten the visual gap so the trio reads as one connected unit. */
    .card:has(+ .adv-book-notes){ margin-bottom: 4px; }
    .adv-book-notes{
      position: relative;
      margin-top: 14px !important;
    }
    /* dashed connector from card down into book-notes */
    .adv-book-notes::before{
      content: "";
      position: absolute;
      left: 32px;
      top: -12px;
      width: 2px;
      height: 14px;
      background: repeating-linear-gradient(180deg, #d8be78 0 4px, transparent 4px 7px);
      border-radius: 2px;
      z-index: 2;
    }

    /* "Write this down" type pill on the book-notes summary, plus +3 XP chip. */
    .adv-book-notes > summary{
      gap: 10px !important;
      padding-left: 18px !important;
      padding-right: 14px !important;
      position: relative;
      display: flex !important;
      align-items: center !important;
    }
    .adv-book-notes > summary::before{
      content: "Write this down" !important;
      display: inline-flex !important;
      align-items: center;
      padding: 5px 11px !important;
      border-radius: 99px;
      background: var(--amber,#f5a623);
      color: #3d2700;
      font-family: var(--display,Manrope), system-ui, sans-serif;
      font-weight: 800;
      font-size: 10.5px !important;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      box-shadow: 0 2px 0 #b87f1a;
    }
    /* push the summary label slightly right of the pill */
    .adv-book-notes > summary{
      font-size: 13.5px !important;
      color: #7a4f00 !important;
    }
    /* +3 XP chip floats before the existing +/− indicator */
    .adv-book-notes > summary::after{
      content: "+3 XP";
      margin-left: auto;
      padding: 4px 10px;
      border-radius: 99px;
      background: #fff;
      color: var(--amber,#b87f1a);
      border: 1.5px solid #f0d488;
      font-family: var(--display,Manrope), system-ui, sans-serif;
      font-weight: 800;
      font-size: 11px;
      letter-spacing: 0.04em;
      transform: none;
    }
    .adv-book-notes[open] > summary::after{
      background: var(--amber,#f5a623);
      color: #fff;
    }
    /* book-notes body list — clean uniform pills inside, not a flat ul */
    .adv-book-notes ul{
      list-style: none;
      margin: 0 18px 14px;
      padding: 0;
      display: grid;
      gap: 8px;
    }
    .adv-book-notes ul li{
      background: #fff;
      border: 1.5px solid #f0d488;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      line-height: 1.5;
      color: #5b6478;
      position: relative;
      padding-left: 30px;
    }
    .adv-book-notes ul li::before{
      content: "▸";
      position: absolute;
      left: 12px;
      top: 9px;
      color: var(--amber,#f5a623);
      font-weight: 800;
    }

    /* ───────── 3. MICROTASK WRAPPER ──────────────────────────────────────── */
    .adv-microtask{
      position: relative;
      margin: 22px 0 28px;
      padding: 34px 22px 22px;
      border-radius: 18px;
      background: linear-gradient(180deg, #fff2cc 0%, #fde9c0 100%);
      border: 2px solid #e9cf85;
      box-shadow: 0 4px 0 #d8be78;
    }
    /* dashed connector from book-notes down into the microtask */
    .adv-book-notes + .adv-microtask{ margin-top: 26px; }
    .adv-book-notes + .adv-microtask::before{
      content: "";
      position: absolute;
      left: 32px;
      top: -16px;
      width: 2px;
      height: 16px;
      background: repeating-linear-gradient(180deg, var(--teal,#14b8a6) 0 4px, transparent 4px 7px);
      border-radius: 2px;
      z-index: 2;
    }
    /* "Step 2 · Check your understanding" banner */
    .adv-microtask::after{
      content: "Step 2 · Check your understanding";
      position: absolute;
      top: -11px;
      left: 18px;
      padding: 5px 12px;
      border-radius: 99px;
      background: var(--teal-deep,#0e8a7d);
      color: #fff;
      font-family: var(--display,Manrope), system-ui, sans-serif;
      font-weight: 800;
      font-size: 10.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      box-shadow: 0 2px 0 rgba(11,80,72,0.4);
    }

    /* Type-pill + XP chip row using .mt-prompt as anchor */
    .mt-prompt{
      position: relative;
      margin: 0 0 14px;
      padding: 38px 0 0;
      font-family: var(--display,Manrope), system-ui, sans-serif;
      font-weight: 700;
      font-size: 16.5px;
      color: var(--ink,#1a1f2e);
      line-height: 1.45;
    }
    /* type pill (left) */
    .adv-microtask .mt-prompt::before{
      position: absolute;
      top: 0;
      left: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 99px;
      background: var(--amber,#f5a623);
      color: #3d2700;
      font-family: var(--display,Manrope), system-ui, sans-serif;
      font-weight: 800;
      font-size: 10.5px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      box-shadow: 0 2px 0 #b87f1a;
    }
    .adv-microtask[data-microtask="mc"]      .mt-prompt::before{ content: "◆  Quick check"; }
    .adv-microtask[data-microtask="tf"]      .mt-prompt::before{ content: "✓✗  True or false"; }
    .adv-microtask[data-microtask="ttl"]     .mt-prompt::before{ content: "🔍  Spot the lie"; background: #7a5fc4; color: #fff; box-shadow: 0 2px 0 #5b3fb0; }
    .adv-microtask[data-microtask="odd"]     .mt-prompt::before{ content: "◇  Odd one out"; background: var(--coral,#f97359); color: #fff; box-shadow: 0 2px 0 var(--coral-dk,#c8442a); }
    .adv-microtask[data-microtask="cloze"]   .mt-prompt::before{ content: "▭  Fill the blanks"; background: var(--teal,#14b8a6); color: #fff; box-shadow: 0 2px 0 var(--teal-deep,#0e8a7d); }
    .adv-microtask[data-microtask="match"]   .mt-prompt::before{ content: "⇄  Match it up"; background: var(--navy,#27314a); color: #fff; box-shadow: 0 2px 0 #161e30; }
    .adv-microtask[data-microtask="activity"] .mt-prompt::before{ content: "✎  In your words"; background: var(--rose,#e11d48); color: #fff; box-shadow: 0 2px 0 #9f1239; }

    /* XP chip (right) */
    .mt-prompt::after{
      content: "+5 XP";
      position: absolute;
      top: 0;
      right: 0;
      padding: 5px 11px;
      border-radius: 99px;
      background: #fff;
      color: var(--amber,#b87f1a);
      border: 1.5px solid #f0d488;
      font-family: var(--display,Manrope), system-ui, sans-serif;
      font-weight: 800;
      font-size: 11px;
      letter-spacing: 0.04em;
    }
    .adv-microtask[data-microtask="match"]   .mt-prompt::after{ content: "+10 XP"; }
    .adv-microtask[data-microtask="activity"] .mt-prompt::after{ content: "+8 XP";  }
    .adv-microtask[data-microtask="tf"]      .mt-prompt::after{ content: "+3 XP";  }

    /* ───────── 4. MC (.mt-opt) ──────────────────────────────────────────── */
    .adv-microtask[data-microtask="mc"] .mt-body{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .mt-opt{
      position: relative;
      display: flex;
      align-items: center;
      padding: 14px 16px 14px 52px;
      border-radius: 14px;
      background: #fff;
      border: 2px solid var(--rule,#ece3cf);
      box-shadow: 0 3px 0 #e3d9be;
      font-family: var(--body,Inter), system-ui, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink,#1a1f2e);
      text-align: left;
      line-height: 1.4;
      cursor: pointer;
      transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
    }
    .mt-opt::before{
      content: "?";
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      border-radius: 99px;
      background: #faf2dc;
      color: var(--ink,#1a1f2e);
      font-family: var(--display,Manrope), system-ui, sans-serif;
      font-weight: 800;
      font-size: 13px;
      display: grid;
      place-items: center;
      border: 1.5px solid #e6dec1;
      transition: background .12s, color .12s, border-color .12s;
    }
    .adv-microtask[data-microtask="mc"] .mt-opt:nth-of-type(1)::before{ content: "A"; }
    .adv-microtask[data-microtask="mc"] .mt-opt:nth-of-type(2)::before{ content: "B"; }
    .adv-microtask[data-microtask="mc"] .mt-opt:nth-of-type(3)::before{ content: "C"; }
    .adv-microtask[data-microtask="mc"] .mt-opt:nth-of-type(4)::before{ content: "D"; }
    .mt-opt:hover:not(:disabled):not(.correct):not(.wrong):not(.incorrect){
      border-color: var(--teal,#14b8a6);
      transform: translateY(-1px);
      box-shadow: 0 4px 0 #e3d9be;
    }
    .mt-opt:hover:not(:disabled)::before{ background: var(--teal,#14b8a6); color: #fff; border-color: var(--teal-deep,#0e8a7d); }
    .mt-opt:active{ transform: translateY(1px); box-shadow: 0 2px 0 #e3d9be; }
    .mt-opt.correct,
    .mt-opt[data-state="correct"]{
      border-color: var(--teal,#14b8a6);
      background: var(--teal-soft,#d4f1ee);
      box-shadow: 0 3px 0 #aedfd8;
    }
    .mt-opt.correct::before,
    .mt-opt[data-state="correct"]::before{
      background: var(--teal,#14b8a6); color: #fff; border-color: var(--teal-deep,#0e8a7d);
    }
    .mt-opt.wrong, .mt-opt.incorrect,
    .mt-opt[data-state="wrong"], .mt-opt[data-state="incorrect"]{
      border-color: var(--coral,#f97359);
      background: var(--coral-soft,#ffe2d8);
      box-shadow: 0 3px 0 #f3b9a4;
    }
    .mt-opt.wrong::before, .mt-opt.incorrect::before,
    .mt-opt[data-state="wrong"]::before, .mt-opt[data-state="incorrect"]::before{
      background: var(--coral,#f97359); color: #fff; border-color: var(--coral-dk,#c8442a);
    }
    .mt-opt:disabled{ cursor: default; opacity: 1; }

    /* ───────── 5. TF (.mt-tf) ──────────────────────────────────────────── */
    .adv-microtask[data-microtask="tf"] .mt-body{
      background: #fff;
      border: 1.5px dashed #e9cf85;
      border-radius: 12px;
      padding: 16px 18px;
      font-size: 15px;
      color: var(--ink,#1a1f2e);
      line-height: 1.55;
    }
    .mt-tf-controls{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 14px;
    }
    .mt-tf{
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px 18px;
      border-radius: 16px;
      border: 2px solid var(--rule,#ece3cf);
      background: #fff;
      font-family: var(--display,Manrope), system-ui, sans-serif;
      font-weight: 800;
      font-size: 17px;
      color: var(--ink,#1a1f2e);
      cursor: pointer;
      box-shadow: 0 4px 0 #e3d9be;
      transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
    }
    .mt-tf::before{
      width: 22px; height: 22px;
      display: inline-block;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 22px 22px;
      flex-shrink: 0;
    }
    .mt-tf[data-choice="true"]::before{
      content: "";
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314b8a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 11v9H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h3z'/><path d='M7 11l4-8a3 3 0 0 1 3 3v3h5a2 2 0 0 1 2 2.3l-1.5 6A2 2 0 0 1 17.5 19H7'/></svg>");
    }
    .mt-tf[data-choice="false"]::before{
      content: "";
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f97359' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M17 13V4h3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-3z'/><path d='M17 13l-4 8a3 3 0 0 1-3-3v-3H5a2 2 0 0 1-2-2.3l1.5-6A2 2 0 0 1 6.5 5H17'/></svg>");
    }
    .mt-tf:hover:not(.correct):not(.wrong):not(.incorrect){
      transform: translateY(-1px);
      box-shadow: 0 5px 0 #e3d9be;
    }
    .mt-tf[data-choice="true"]:hover:not(.correct):not(.wrong):not(.incorrect){ border-color: var(--teal,#14b8a6); background: #ecfaf8; }
    .mt-tf[data-choice="false"]:hover:not(.correct):not(.wrong):not(.incorrect){ border-color: var(--coral,#f97359); background: #fff3ee; }
    .mt-tf.correct{ border-color: var(--teal,#14b8a6); background: var(--teal-soft,#d4f1ee); }
    .mt-tf.wrong, .mt-tf.incorrect{ border-color: var(--coral,#f97359); background: var(--coral-soft,#ffe2d8); }

    /* ───────── 6. TTL (.mt-stmt) ───────────────────────────────────────── */
    .adv-microtask[data-microtask="ttl"] .mt-body{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .mt-stmt{
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 18px 14px 56px;
      border-radius: 14px;
      background: #fff;
      border: 2px solid var(--rule,#ece3cf);
      box-shadow: 0 3px 0 #e3d9be;
      font-family: var(--body,Inter), system-ui, sans-serif;
      font-size: 14.5px;
      line-height: 1.5;
      color: var(--ink,#1a1f2e);
      text-align: left;
      cursor: pointer;
      transition: transform .12s, border-color .12s, background .12s;
    }
    .mt-stmt::before{
      content: "";
      position: absolute;
      left: 14px;
      top: 14px;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: #f3eeff;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5fc4' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='6'/><path d='M16 16l4 4'/></svg>");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 18px 18px;
      border: 1.5px solid #d9cef0;
    }
    .mt-stmt::after{
      content: "“";
      position: absolute;
      right: 16px;
      top: 6px;
      font-family: 'Georgia', serif;
      font-size: 28px;
      line-height: 1;
      color: #d9cef0;
      pointer-events: none;
    }
    .mt-stmt:hover:not(.correct):not(.wrong){
      border-color: #7a5fc4;
      transform: translateY(-1px);
    }
    .mt-stmt.correct{ border-color: var(--teal,#14b8a6); background: var(--teal-soft,#d4f1ee); }
    .mt-stmt.correct::before{ background-color: var(--teal-soft,#d4f1ee); }
    .mt-stmt.wrong{ border-color: var(--coral,#f97359); background: var(--coral-soft,#ffe2d8); }

    /* ───────── 7. ODD ONE OUT (.mt-item) ───────────────────────────────── */
    .adv-microtask[data-microtask="odd"] .mt-body{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .mt-item{
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 18px 16px;
      border-radius: 14px;
      background: #fff;
      border: 2px solid var(--rule,#ece3cf);
      box-shadow: 0 3px 0 #e3d9be;
      font-family: var(--body,Inter), system-ui, sans-serif;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--ink,#1a1f2e);
      cursor: pointer;
      transition: transform .12s, border-color .12s, background .12s;
    }
    .mt-item::before{
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 99px;
      border: 2px solid #c8442a;
      background: transparent;
      transition: background .12s;
    }
    .mt-item:hover:not(.correct):not(.wrong){
      transform: translateY(-1px);
      border-color: var(--coral,#f97359);
      background: #fffaf3;
    }
    .mt-item:hover:not(.correct):not(.wrong)::before{ background: var(--coral,#f97359); }
    .mt-item.correct{ border-color: var(--teal,#14b8a6); background: var(--teal-soft,#d4f1ee); }
    .mt-item.correct::before{ background: var(--teal,#14b8a6); border-color: var(--teal-deep,#0e8a7d); }
    .mt-item.wrong{ border-color: var(--coral,#f97359); background: var(--coral-soft,#ffe2d8); }
    .mt-item.wrong::before{ background: var(--coral,#f97359); }

    /* ───────── 8. CLOZE (.mt-tok / [data-blank]) ───────────────────────── */
    .adv-microtask[data-microtask="cloze"] .mt-body p{
      font-size: 15.5px;
      line-height: 2.1;
      color: var(--ink,#1a1f2e);
      margin: 0 0 18px;
      background: #fff;
      border: 1.5px dashed #e9cf85;
      border-radius: 12px;
      padding: 16px 18px;
    }
    .adv-microtask[data-microtask="cloze"] [data-blank]{
      display: inline-block;
      min-width: 110px;
      min-height: 28px;
      margin: 0 3px;
      padding: 3px 12px;
      vertical-align: -2px;
      border-radius: 8px;
      background: #fdf6e3;
      border: 2px dashed #e0a800;
      font-family: var(--body,Inter), system-ui, sans-serif;
      font-weight: 700;
      font-size: 13.5px;
      color: #b87f1a;
      text-align: center;
      letter-spacing: 0.02em;
      transition: all .25s;
    }
    .adv-microtask[data-microtask="cloze"] [data-blank]:not(:empty){
      background: var(--teal,#14b8a6);
      border-style: solid;
      border-color: var(--teal-deep,#0e8a7d);
      color: #fff;
      box-shadow: 0 2px 0 var(--teal-deep,#0e8a7d);
      animation: mtTokenSnap .35s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes mtTokenSnap{
      0%   { transform: scale(.6); opacity: 0; }
      55%  { transform: scale(1.12); opacity: 1; }
      100% { transform: scale(1); }
    }
    .mt-tokens{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .mt-tok{
      background: #fff;
      border: 2px solid #e9cf85;
      border-radius: 10px;
      padding: 9px 14px;
      font-family: var(--body,Inter), system-ui, sans-serif;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink,#1a1f2e);
      cursor: pointer;
      box-shadow: 0 2px 0 #d8be78;
      transition: transform .12s, background .12s, color .12s, border-color .12s;
    }
    .mt-tok:hover:not(.is-used):not(.is-active){
      transform: translateY(-1px);
      border-color: var(--teal,#14b8a6);
    }
    .mt-tok.is-active,
    .mt-tok[aria-pressed="true"]{
      background: var(--teal-deep,#0e8a7d);
      color: #fff;
      border-color: var(--teal-deep,#0e8a7d);
      box-shadow: 0 2px 0 #0a665b;
    }
    .mt-tok.is-used{
      opacity: 0.45;
      cursor: default;
      text-decoration: line-through;
    }

    /* ───────── 9. MATCH (.mt-col-left / .mt-col-right) ─────────────────── */
    .adv-microtask[data-microtask="match"] .mt-body{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 40px;
      position: relative;
    }
    .mt-col-left, .mt-col-right{
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .mt-col-left li, .mt-col-right li{
      position: relative;
      background: #fff;
      border: 2px solid var(--rule,#ece3cf);
      border-radius: 12px;
      padding: 13px 16px;
      font-family: var(--body,Inter), system-ui, sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink,#1a1f2e);
      cursor: pointer;
      box-shadow: 0 2px 0 #e3d9be;
      transition: transform .12s, border-color .12s, background .12s;
    }
    .mt-col-left li{
      border-left: 4px solid var(--teal,#14b8a6);
      padding-left: 14px;
    }
    .mt-col-right li{
      border-right: 4px solid var(--coral,#f97359);
    }
    /* arrow connector on the right edge of left-column rows */
    .mt-col-left li::after{
      content: "";
      position: absolute;
      right: -28px;
      top: 50%;
      width: 18px;
      height: 2px;
      background: var(--rule,#ece3cf);
      transform: translateY(-50%);
      transition: background .15s;
    }
    .mt-col-left li::before{
      content: "";
      position: absolute;
      right: -16px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-top: 2px solid var(--rule,#ece3cf);
      border-right: 2px solid var(--rule,#ece3cf);
      transform: translateY(-50%) rotate(45deg);
      transition: border-color .15s;
    }
    .mt-col-left li.is-selected, .mt-col-right li.is-selected{
      border-color: var(--teal,#14b8a6);
      box-shadow: 0 0 0 3px var(--teal-soft,#d4f1ee), 0 2px 0 #aedfd8;
      transform: translateY(-1px);
    }
    .mt-col-left li.is-matched, .mt-col-right li.is-matched{
      background: var(--teal-soft,#d4f1ee);
      border-color: var(--teal,#14b8a6);
      cursor: default;
    }
    .mt-col-left li.is-matched::after{ background: var(--teal,#14b8a6); }
    .mt-col-left li.is-matched::before{ border-color: var(--teal,#14b8a6); }
    .mt-col-left li.is-wrong, .mt-col-right li.is-wrong{
      animation: mtMatchShake .35s;
      border-color: var(--coral,#f97359);
    }
    @keyframes mtMatchShake{
      0%, 100%{ transform: translateX(0); }
      25%{ transform: translateX(-4px); }
      75%{ transform: translateX(4px); }
    }

    /* ───────── 10. ACTIVITY (.mt-activity-input / .mt-activity-lockin) ─── */
    .adv-microtask[data-microtask="activity"] .mt-body{
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .mt-activity-input{
      width: 100%;
      min-height: 110px;
      padding: 14px 16px;
      border-radius: 14px;
      background: #fff;
      border: 2px dashed #e9cf85;
      font-family: var(--body,Inter), system-ui, sans-serif;
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--ink,#1a1f2e);
      resize: vertical;
      outline: none;
      transition: border-color .15s, background .15s, box-shadow .15s, border-style .15s;
    }
    .mt-activity-input::placeholder{
      color: #a09678;
      font-style: italic;
    }
    .mt-activity-input:hover{
      background: #fffefb;
    }
    .mt-activity-input:focus{
      border-style: solid;
      border-color: var(--teal,#14b8a6);
      background: #fff;
      box-shadow: 0 0 0 4px var(--teal-soft,#d4f1ee);
    }
    .mt-activity-lockin{
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 22px;
      border-radius: 14px;
      background: linear-gradient(180deg, #f97359 0%, #e85d3f 100%);
      color: #fff;
      border: none;
      font-family: var(--display,Manrope), system-ui, sans-serif;
      font-weight: 800;
      font-size: 14px;
      letter-spacing: 0.01em;
      cursor: pointer;
      box-shadow: 0 4px 0 var(--coral-dk,#c8442a);
      transition: transform .1s, box-shadow .1s, filter .15s;
    }
    .mt-activity-lockin::before{
      content: "";
      width: 16px;
      height: 16px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 16px 16px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 1 1 8 0v4'/></svg>");
    }
    .mt-activity-lockin:not(:disabled):hover{
      transform: translateY(-1px);
      filter: brightness(1.04);
      box-shadow: 0 5px 0 var(--coral-dk,#c8442a);
    }
    .mt-activity-lockin:not(:disabled):active{
      transform: translateY(2px);
      box-shadow: 0 2px 0 var(--coral-dk,#c8442a);
    }
    .mt-activity-lockin:disabled{
      background: linear-gradient(180deg, #d8c69a 0%, #c8b485 100%);
      color: rgba(255,255,255,0.9);
      box-shadow: 0 4px 0 #a39468;
      cursor: not-allowed;
    }
    .mt-activity-lockin.is-locked,
    .mt-activity-lockin[data-locked]{
      background: linear-gradient(180deg, var(--teal,#14b8a6) 0%, var(--teal-deep,#0e8a7d) 100%);
      box-shadow: 0 4px 0 #0a665b;
    }
    .mt-activity-lockin.is-locked::before,
    .mt-activity-lockin[data-locked]::before{
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
    }
    .mt-activity-model{
      margin-top: 12px;
      padding: 14px 16px;
      background: #fff;
      border-radius: 12px;
      border: 1.5px solid var(--rule,#ece3cf);
      font-size: 13.5px;
      line-height: 1.6;
      color: #5b6478;
    }
    .mt-activity-model strong{ color: var(--teal-deep,#0e8a7d); }

    /* ───────── 11. SHARED FEEDBACK ─────────────────────────────────────── */
    .mt-feedback{
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 12px;
      background: rgba(255,255,255,0.7);
      border: 1.5px solid #e9cf85;
      font-family: var(--body,Inter), system-ui, sans-serif;
      font-size: 13.5px;
      line-height: 1.55;
      color: var(--ink-soft,#5b6478);
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .mt-feedback[hidden]{ display: none; }
    .mt-feedback.correct{
      background: var(--teal-soft,#d4f1ee);
      border-color: #aedfd8;
      color: var(--teal-deep,#0e8a7d);
    }
    .mt-feedback.wrong, .mt-feedback.incorrect{
      background: var(--coral-soft,#ffe2d8);
      border-color: #f7c2b1;
      color: #8b2f1a;
    }
    .mt-feedback::before{
      content: "💬";
      flex-shrink: 0;
      font-size: 18px;
      line-height: 1.2;
    }
    .mt-feedback.correct::before{ content: "✓"; color: var(--teal,#14b8a6); font-weight: 800; font-size: 18px; }
    .mt-feedback.wrong::before, .mt-feedback.incorrect::before{ content: "✗"; color: var(--coral,#f97359); font-weight: 800; font-size: 18px; }

    /* ───────── 12. ACTIVITY · "EDITOR ANNOTATING A DRAFT" ─────────────────
       The activity card and activity microtask are where a student writes —
       so we lean into the metaphor: notebook paper with red margin rule,
       hand-drawn squiggle underlines on key phrases, marker-style label
       chips on the CER frame, a tilted "DRAFT" stamp, and a celebratory
       lock-in button. All decorations are inline SVG data URIs — no new
       external assets.
       ─────────────────────────────────────────────────────────────────── */

    /* --- Activity card body — notebook paper + margin rule + draft stamp --- */
    .card.activity{
      position: relative;
      background:
        /* faint horizontal rules */
        repeating-linear-gradient(180deg, transparent 0 28px, rgba(14,138,125,0.06) 28px 29px),
        /* paper gradient */
        linear-gradient(180deg, #fffdf3 0%, #fff6e4 100%);
      border: 2px dashed #e6b772;
      box-shadow:
        0 4px 0 #e0c478,
        inset 4px 0 0 rgba(225,29,72,0.08);
      transition: transform .15s, box-shadow .15s;
    }
    .card.activity:hover{
      transform: translateY(-1px);
      box-shadow:
        0 5px 0 #e0c478,
        inset 4px 0 0 rgba(225,29,72,0.12);
    }
    .card.activity > .card-head{
      position: relative;
      z-index: 2;
    }
    /* Red vertical margin rule on the left edge */
    .card.activity::before{
      content: "";
      position: absolute;
      left: 14px;
      top: 18px;
      bottom: 18px;
      width: 2px;
      background: rgba(225,29,72,0.45);
      border-radius: 2px;
      pointer-events: none;
    }
    /* Tilted "DRAFT v1" rubber stamp */
    .card.activity::after{
      content: "Draft v1";
      position: absolute;
      top: 18px;
      right: 22px;
      padding: 4px 10px;
      font-family: var(--mono,'JetBrains Mono'), monospace;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(225,29,72,0.72);
      border: 1.5px dashed rgba(225,29,72,0.55);
      border-radius: 4px;
      transform: rotate(-4deg);
      pointer-events: none;
      background: rgba(255,255,255,0.6);
      z-index: 1;
    }
    /* push the card eyebrow + title clear of the stamp visually */
    .card.activity .card-head .xp-tag{
      position: relative;
      z-index: 3;
      margin-right: 76px;
    }

    /* The body inside the activity card sits comfortably above the margin */
    .card.activity .activity-item{
      position: relative;
      padding-left: 16px;
      z-index: 1;
    }
    .card.activity .activity-item > p{
      font-size: 15px;
      line-height: 1.7;
      color: var(--ink,#1a1f2e);
      margin: 0 0 14px;
    }
    /* The student's *quoted weak answer* gets a hand-drawn squiggle underline +
       a floating red editor's note arrow pointing at it.
       Scoped to activity cards that contain a CER frame (Activity 2 pattern)
       so the multi-strong prompt in Activity 1 (Classify) is left alone. */
    .card.activity:has(.cer-frame) .activity-item > p > strong{
      position: relative;
      display: inline;
      color: var(--coral-dk,#c8442a);
      padding: 1px 4px 6px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'><path d='M2 7 Q 25 2 50 6 T 100 6 T 150 6 T 200 6 T 250 6 T 298 5' fill='none' stroke='%23e11d48' stroke-width='2.2' stroke-linecap='round' opacity='0.85'/></svg>");
      background-repeat: no-repeat;
      background-position: 0 100%;
      background-size: 100% 7px;
    }
    .card.activity:has(.cer-frame) .activity-item > p > strong::after{
      content: "rewrite this →";
      position: absolute;
      top: -22px;
      right: -8px;
      font-family: var(--mono,'JetBrains Mono'), monospace;
      font-size: 10.5px;
      font-weight: 700;
      color: var(--rose,#e11d48);
      background: #fff;
      padding: 3px 8px;
      border-radius: 4px;
      border: 1px dashed rgba(225,29,72,0.6);
      transform: rotate(-3deg);
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(225,29,72,0.15);
      pointer-events: none;
    }

    /* --- CER frame — sticky-note feel with marker-highlight labels --- */
    .card.activity .cer-frame{
      position: relative;
      background:
        /* faint grid */
        linear-gradient(180deg, #fffef6 0%, #fffaeb 100%);
      border: none;
      border-radius: 14px;
      padding: 18px 22px 18px 50px;
      margin: 18px 0;
      box-shadow:
        0 2px 0 rgba(0,0,0,0.05),
        0 12px 28px -10px rgba(122,79,0,0.18),
        inset 0 0 0 1.5px #f0d488;
      transform: rotate(-0.4deg);
      transition: transform .2s, box-shadow .2s;
    }
    .card.activity .cer-frame:hover{
      transform: rotate(0deg) translateY(-1px);
      box-shadow:
        0 2px 0 rgba(0,0,0,0.05),
        0 14px 32px -10px rgba(122,79,0,0.24),
        inset 0 0 0 1.5px var(--amber,#f5a623);
    }
    /* Tape stuck on top-left corner */
    .card.activity .cer-frame::before{
      content: "";
      position: absolute;
      top: -8px;
      left: 24px;
      width: 56px;
      height: 18px;
      background: rgba(245,166,35,0.5);
      border-left: 1px dashed rgba(122,79,0,0.3);
      border-right: 1px dashed rgba(122,79,0,0.3);
      transform: rotate(-2deg);
      box-shadow: 0 2px 4px rgba(0,0,0,0.06);
      pointer-events: none;
    }
    /* Pencil glyph in the left margin */
    .card.activity .cer-frame::after{
      content: "";
      position: absolute;
      left: 16px;
      top: 22px;
      width: 22px;
      height: 22px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b87f1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19l7-7 3 3-7 7-3-3z'/><path d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/><path d='M2 2l7.586 7.586'/><circle cx='11' cy='11' r='2'/></svg>");
      background-repeat: no-repeat;
      background-size: contain;
      transform: rotate(-12deg);
    }
    .card.activity .cer-frame h4{
      font-family: var(--display,Manrope), system-ui, sans-serif;
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #7a4f00;
      margin: 0 0 12px;
      font-weight: 800;
    }
    .card.activity .cer-frame p{
      font-size: 14px;
      line-height: 1.85;
      color: var(--ink,#1a1f2e);
      margin: 0;
    }
    /* Color-coded label chips for Claim · Evidence · Reasoning */
    .card.activity .cer-frame p strong{
      display: inline-block;
      font-family: var(--mono,'JetBrains Mono'), monospace;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 5px;
      margin-right: 6px;
      vertical-align: 1px;
      box-shadow: 0 2px 0 rgba(0,0,0,0.06);
      transition: transform .15s, box-shadow .15s;
    }
    .card.activity .cer-frame p strong:nth-of-type(1){
      background: #ffe2d8;
      color: var(--coral-dk,#c8442a);
      box-shadow: 0 2px 0 #f3b9a4;
    }
    .card.activity .cer-frame p strong:nth-of-type(2){
      background: #fde9c0;
      color: #7a4f00;
      box-shadow: 0 2px 0 #d8be78;
    }
    .card.activity .cer-frame p strong:nth-of-type(3){
      background: var(--teal-soft,#d4f1ee);
      color: var(--teal-deep,#0e8a7d);
      box-shadow: 0 2px 0 #aedfd8;
    }
    .card.activity .cer-frame p strong:hover{
      transform: translateY(-1px);
      box-shadow: 0 3px 0 rgba(0,0,0,0.10);
    }

    /* --- Activity textarea inside the card — handwriting feel --- */
    .card.activity .activity-item textarea.adv-textarea{
      background:
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(20,184,166,0.13) 27px 28px),
        linear-gradient(180deg, #fffefb 0%, #fffaf0 100%);
      border: 2.5px dashed #d4a04a;
      border-radius: 14px;
      padding: 14px 18px;
      min-height: 130px;
      font-family: var(--body,Inter), system-ui, sans-serif;
      font-size: 14.5px;
      line-height: 28px;
      color: var(--ink,#1a1f2e);
      transition: border-color .2s, background .2s, box-shadow .2s, border-style .2s;
    }
    .card.activity .activity-item textarea.adv-textarea::placeholder{
      color: #a09678;
      font-style: italic;
      line-height: 28px;
    }
    .card.activity .activity-item textarea.adv-textarea:hover{
      border-color: #c89030;
      background:
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(20,184,166,0.17) 27px 28px),
        linear-gradient(180deg, #fffefb 0%, #fffaf0 100%);
    }
    .card.activity .activity-item textarea.adv-textarea:focus{
      border-style: solid;
      border-color: var(--teal,#14b8a6);
      background:
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(20,184,166,0.16) 27px 28px),
        linear-gradient(180deg, #fff 0%, #f0fdfc 100%);
      box-shadow: 0 0 0 4px var(--teal-soft,#d4f1ee);
    }

    /* --- Activity MICROTASK — "in your words" annotated draft --- */
    .adv-microtask[data-microtask="activity"]{
      background:
        radial-gradient(120% 60% at 100% 0%, rgba(225,29,72,0.10) 0%, transparent 55%),
        linear-gradient(180deg, #fff5d8 0%, #fde0a3 100%);
      border-color: #d8a957;
      box-shadow: 0 4px 0 #c89030;
    }
    /* Scribbled doodle in the top-right corner */
    .adv-microtask[data-microtask="activity"] > .mt-prompt::before{
      animation: nudge 2.6s ease-in-out infinite;
    }
    @keyframes nudge{
      0%, 100%{ transform: translateY(0); }
      50%{ transform: translateY(-2px); }
    }
    /* A floating margin annotation: "show your reasoning →" near the prompt */
    .adv-microtask[data-microtask="activity"] .mt-prompt{
      padding-right: 24px;
    }

    /* Textarea inside the activity microtask — paper-lined */
    .mt-activity-input{
      background:
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(20,184,166,0.13) 27px 28px),
        linear-gradient(180deg, #fffefb 0%, #fffaf0 100%);
      line-height: 28px;
      padding: 16px 18px;
      min-height: 140px;
      box-shadow: inset 0 1px 3px rgba(122,79,0,0.06);
      position: relative;
    }
    .mt-activity-input::placeholder{
      line-height: 28px;
    }
    .mt-activity-input:hover{
      border-color: #c89030;
      background:
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(20,184,166,0.16) 27px 28px),
        linear-gradient(180deg, #fffefb 0%, #fffaf0 100%);
    }
    .mt-activity-input:focus{
      background:
        repeating-linear-gradient(180deg, transparent 0 27px, rgba(20,184,166,0.16) 27px 28px),
        linear-gradient(180deg, #fff 0%, #f0fdfc 100%);
    }

    /* "🖋 your turn" annotation that sits above the textarea */
    .adv-microtask[data-microtask="activity"] .mt-body{
      position: relative;
    }
    .adv-microtask[data-microtask="activity"] .mt-body::before{
      content: "your turn";
      position: absolute;
      top: -8px;
      left: 18px;
      padding: 3px 10px;
      background: #fff;
      color: var(--rose,#e11d48);
      font-family: var(--mono,'JetBrains Mono'), monospace;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border: 1.5px dashed rgba(225,29,72,0.55);
      border-radius: 4px;
      transform: rotate(-2deg);
      z-index: 2;
      pointer-events: none;
    }
    .adv-microtask[data-microtask="activity"] .mt-body::after{
      content: "";
      position: absolute;
      top: 4px;
      left: 90px;
      width: 26px;
      height: 18px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' fill='none' stroke='%23e11d48' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12 Q 12 12 22 16 Q 26 18 32 16'/><path d='M28 12 L 34 16 L 28 20'/></svg>");
      background-repeat: no-repeat;
      background-size: contain;
      opacity: 0.8;
      pointer-events: none;
    }

    /* Lock-in button — celebratory animated shimmer when ready */
    .mt-activity-lockin{
      position: relative;
      overflow: hidden;
    }
    .mt-activity-lockin:not(:disabled)::after{
      content: "";
      position: absolute;
      top: 0;
      left: -120%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
      transform: skewX(-20deg);
      animation: lockinShimmer 2.8s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes lockinShimmer{
      0%   { left: -120%; }
      60%  { left: 130%; }
      100% { left: 130%; }
    }
    .mt-activity-lockin:not(:disabled):not(.is-locked):not([data-locked]){
      animation: lockinPulse 1.8s ease-in-out infinite;
    }
    @keyframes lockinPulse{
      0%, 100%{ box-shadow: 0 4px 0 var(--coral-dk,#c8442a), 0 0 0 0 rgba(249,115,89,0.0); }
      50%     { box-shadow: 0 4px 0 var(--coral-dk,#c8442a), 0 0 0 8px rgba(249,115,89,0.18); }
    }
    .mt-activity-lockin.is-locked,
    .mt-activity-lockin[data-locked]{
      animation: none;
    }
    .mt-activity-lockin.is-locked::after,
    .mt-activity-lockin[data-locked]::after{
      animation: none;
      display: none;
    }
    .mt-activity-model{
      background:
        repeating-linear-gradient(180deg, transparent 0 26px, rgba(14,138,125,0.06) 26px 27px),
        linear-gradient(180deg, #f6fdfc 0%, #ecfaf8 100%);
      border: 1.5px solid #aedfd8;
      border-left: 4px solid var(--teal,#14b8a6);
      padding: 14px 16px;
      line-height: 1.7;
    }
    .mt-activity-model strong{
      display: inline-block;
      background: var(--teal-soft,#d4f1ee);
      color: var(--teal-deep,#0e8a7d);
      padding: 2px 8px;
      border-radius: 5px;
      font-family: var(--mono,'JetBrains Mono'), monospace;
      font-size: 10.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-right: 6px;
      vertical-align: 1px;
    }

    /* ───────── 13. RESPONSIVE ──────────────────────────────────────────── */
    @media (max-width: 760px){
      .adv-microtask{ padding: 30px 16px 18px; }
      .adv-microtask[data-microtask="mc"] .mt-body,
      .adv-microtask[data-microtask="odd"] .mt-body,
      .adv-microtask[data-microtask="match"] .mt-body{
        grid-template-columns: 1fr;
      }
      .mt-col-left li::after, .mt-col-left li::before{ display: none; }
      .mt-tf-controls{ grid-template-columns: 1fr; }
      .mt-prompt::after{ display: none; }
      /* Activity polish — hide non-essential decorations on narrow screens */
      .card.activity::after{ display: none; }
      .card.activity .card-head .xp-tag{ margin-right: 0; }
      .card.activity:has(.cer-frame) .activity-item > p > strong::after{ display: none; }
      .card.activity .cer-frame{ padding: 18px 18px 18px 18px; transform: none; }
      .card.activity .cer-frame::after{ display: none; }
      .adv-microtask[data-microtask="activity"] .mt-body::after{ display: none; }
    }
  

/* ============================================================
   FIX-UP PASS (2026-05-20) — patch issues introduced by the
   Claude Design polish layer interacting with the earlier
   widget CSS in this file.
   ============================================================ */

/* --- ISSUE 1: Duplicate "Step 2" banners (both ::before and ::after) --- */
.adv-microtask::before{ content: none !important; }
.adv-microtask::after{ content: none !important; }

/* --- ISSUE 2: Doubled type pill (gold JS-injected + teal Claude Design ::before) --- */
/* Hide the JS-injected gold .mt-meta strip. Keep Claude Design's prompt-anchored teal pill. */
.adv-microtask .mt-meta{ display: none !important; }

/* --- ISSUE 6: A/B/C/D circular badges overlapping option text --- */
/* My earlier .adv-microtask .mt-opt rule had no padding-left for the badge.
   Claude Design's .mt-opt rule has padding: 14px 16px 14px 52px — the 52px is the
   slot for the A/B/C/D badge. Override our rule to honour that slot. */
.adv-microtask .mt-opt{
  padding-left: 52px !important;
  position: relative !important;
}
/* Same for TTL statements (their ::before badge sits in the same slot) */
.adv-microtask .mt-stmt{
  position: relative;
}
/* And odd-one-out items */
.adv-microtask .mt-item{
  position: relative;
}

/* --- ISSUE 4: Intentions stacking as rows instead of 3 columns --- */
/* Some rule in Claude Design's polish reset .intentions to default block layout.
   Force 3-column grid (stack on narrow screens). */
.intentions{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}
@media (max-width: 760px){
  .intentions{ grid-template-columns: 1fr !important; }
}

/* --- ISSUE 5: Vocab tap-to-flip cards uniformly beige --- */
/* Add gradient + colour variation to .kt cards by position so the grid feels alive. */
.kt-grid .kt:nth-child(6n+1) .kt-inner{
  background: linear-gradient(135deg, #fff7e6 0%, #fde9c0 100%);
  border-color: #f5a623;
}
.kt-grid .kt:nth-child(6n+2) .kt-inner{
  background: linear-gradient(135deg, #ecfdf5 0%, #d4f1ee 100%);
  border-color: #14b8a6;
}
.kt-grid .kt:nth-child(6n+3) .kt-inner{
  background: linear-gradient(135deg, #fef2f2 0%, #ffe2d8 100%);
  border-color: #f97359;
}
.kt-grid .kt:nth-child(6n+4) .kt-inner{
  background: linear-gradient(135deg, #f0ecff 0%, #e3dbef 100%);
  border-color: #9379d8;
}
.kt-grid .kt:nth-child(6n+5) .kt-inner{
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  border-color: #e11d48;
}
.kt-grid .kt:nth-child(6n+6) .kt-inner{
  background: linear-gradient(135deg, #e7e8f5 0%, #d2d4ee 100%);
  border-color: #27314a;
}
.kt-grid .kt:hover .kt-inner{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.kt-grid .kt .kt-inner{
  transition: transform 0.18s, box-shadow 0.18s;
}

/* --- ISSUE 3: Content card body — plain text + ↓ arrow paragraphs --- */
/* Bold-prefix paragraphs ("Component 1: Heart", "Cell · the basic unit") get
   a coral accent on the leading bold word + a left-tinted bar */
.card > p > strong:first-child{
  color: var(--coral-dk);
  font-weight: 800;
}
/* Group bold-prefix paragraphs into card-like blocks via background */
.card > p:has(> strong:first-child){
  background: linear-gradient(90deg, rgba(20,184,166,0.05) 0%, transparent 80%);
  padding: 8px 12px;
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  margin: 6px 0;
}
/* A "Role:" / "↓" line directly after a bold-prefix paragraph attaches visually */
.card > p:has(> strong:first-child) + p:not(:has(strong)){
  margin-top: -6px;
  padding: 0 12px 8px;
  background: linear-gradient(90deg, rgba(20,184,166,0.05) 0%, transparent 80%);
  border-left: 3px solid var(--teal);
  border-radius: 0 0 8px 0;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ============================================================
   CONTENT CARD BODY — RICHER STYLING FOR COMMON PATTERNS
   ============================================================ */

/* Pattern: <h3>/<h4> subheading followed by <ul> bullets
   (used in cards like "Different organ systems do different major jobs")
   Give each subheading + list pair a card-like rhythm with accent colour. */
.card:not(.think-first) h3,
.card:not(.think-first) h4 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: var(--coral-dk);
  letter-spacing: -0.01em;
  margin: 18px 0 8px;
  padding: 6px 12px;
  background: linear-gradient(90deg, var(--coral-soft) 0%, transparent 70%);
  border-left: 4px solid var(--coral);
  border-radius: 0 8px 8px 0;
  display: inline-block;
}

/* Cycle subheading accent colours by position so adjacent subheadings differ */
.card:not(.think-first) h3:nth-of-type(3n+1),
.card:not(.think-first) h4:nth-of-type(3n+1) {
  color: var(--coral-dk);
  background: linear-gradient(90deg, var(--coral-soft) 0%, transparent 70%);
  border-left-color: var(--coral);
}
.card:not(.think-first) h3:nth-of-type(3n+2),
.card:not(.think-first) h4:nth-of-type(3n+2) {
  color: var(--teal-deep);
  background: linear-gradient(90deg, var(--teal-soft) 0%, transparent 70%);
  border-left-color: var(--teal);
}
.card:not(.think-first) h3:nth-of-type(3n+3),
.card:not(.think-first) h4:nth-of-type(3n+3) {
  color: #7a4f00;
  background: linear-gradient(90deg, var(--amber-soft) 0%, transparent 70%);
  border-left-color: var(--amber);
}

/* The <ul> immediately after a subheading sits tight + uses a coloured marker */
.card h3 + ul,
.card h4 + ul {
  margin: 0 0 12px;
  padding-left: 28px;
  list-style: none;
}
.card h3 + ul li,
.card h4 + ul li {
  position: relative;
  margin-bottom: 4px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-size: 14px;
}
.card h3 + ul li::before,
.card h4 + ul li::before {
  content: "→";
  position: absolute;
  left: -20px;
  color: var(--teal);
  font-weight: 800;
}

/* Bold leading word inside list items ("major job:", "example components:")
   gets a slightly stronger accent */
.card li > strong:first-child,
.card li::first-line {
  color: var(--ink);
}

/* Underline-as-emphasis pattern: existing <em> in body content gets a subtle
   wavy underline to look annotated (not too aggressive) */
.card p em,
.card li em {
  font-style: normal;
  background-image: linear-gradient(180deg, transparent 65%, var(--amber-soft) 65%);
  padding: 0 2px;
}

/* Doodle accents on every content card — small SVG-like decorative element
   in the top-right corner, using pure CSS (no images). */
.card:not(.think-first):not(.activity):not(.adv-mc):not([class*="tint-"]):not(.kt-grid){
  position: relative;
}

/* ============================================================
   FINAL FIX-UP — match Claude Design's selector specificity to
   actually override its rules where mine were losing.
   ============================================================ */

/* Banner: Claude Design has '.adv-book-notes + .adv-microtask::before'
   which is more specific than my '.adv-microtask::before'. Match it. */
.adv-book-notes + .adv-microtask::before,
.adv-microtask::before,
.adv-microtask::after{
  content: none !important;
}

/* The JS-injected .mt-meta should hide. Make sure with maximum specificity. */
body .adv-microtask .mt-meta,
.adv-microtask > .mt-meta,
.adv-microtask .mt-meta{
  display: none !important;
}

/* Force the correct padding-left on options/statements/items so the A/B/C/D
   and TTL detective icons don't overlap text. Claude Design's defaults:
   - .mt-opt:  52px (for A/B/C/D circle)
   - .mt-stmt: 56px (for magnifying-glass icon)
   - .mt-item: needs icon space too
*/
.adv-microtask .mt-opt{
  padding: 14px 16px 14px 52px !important;
  position: relative !important;
}
.adv-microtask .mt-stmt{
  padding: 14px 18px 14px 56px !important;
  position: relative !important;
}
.adv-microtask .mt-item{
  padding: 14px 18px 14px 56px !important;
  position: relative !important;
}

/* Kill the polish-CSS ::before "red ring" indicators on odd/ttl items —
   they render badly under our display:block parent and create stray red
   bars on the left edge of each option. */
.adv-microtask .mt-item::before,
.adv-microtask .mt-stmt::before,
.adv-microtask .mt-item::after,
.adv-microtask .mt-stmt::after{
  content: none !important;
  display: none !important;
}
.adv-microtask .mt-item,
.adv-microtask .mt-stmt{
  padding-left: 18px !important;
}
.reflect-quote,.card.reflect blockquote{
  font-style:italic;color:var(--teal-deep);opacity:.9;
  font-size:14px;line-height:1.55;
  padding:4px 12px;margin:0 0 14px;
  border-left:3px solid var(--teal-soft);
  position:relative;
}
.reflect-quote::before,.card.reflect blockquote::before{
  content:"\201C";font-size:28px;font-style:normal;
  color:var(--teal-soft);position:absolute;left:4px;top:-4px;line-height:1;
}
.adv-microtask[data-microtask="odd"] .mt-body{counter-reset:oddopt}
.adv-microtask[data-microtask="odd"] .mt-item::before{
  counter-increment:oddopt;
  content:counter(oddopt,upper-alpha) ". ";
  font-weight:800;color:var(--teal-deep);
  margin-right:6px;
}
.adv-blank{
  display:inline-block;min-width:80px;width:auto;padding:2px 8px;
  background:var(--soft);border:none;border-bottom:2px solid var(--teal);
  border-radius:4px 4px 0 0;
  font-family:var(--body);font-weight:700;font-size:14px;color:var(--ink);
  cursor:text;
}
.adv-blank:focus{outline:none;border-bottom-color:var(--teal-deep);background:#fff}
.adv-card input[type="checkbox"]:not(.adv-bn-check input[type="checkbox"]){
  appearance:none;width:18px;height:18px;
  border:2px solid var(--rule);border-radius:4px;
  background:#fff;cursor:pointer;position:relative;
  vertical-align:-3px;
}
.adv-card input[type="checkbox"]:not(.adv-bn-check input[type="checkbox"]):checked{
  background:var(--teal);border-color:var(--teal-deep);
}
.adv-card input[type="checkbox"]:not(.adv-bn-check input[type="checkbox"]):checked::after{
  content:"\2713";position:absolute;inset:0;
  display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:12px;
}

/* ───── Type-in cloze microtask (input boxes + check button) ───── */
.cloze-input{
  display:inline-block;min-width:80px;width:auto;padding:2px 8px;
  background:var(--soft);border:none;border-bottom:2px solid var(--teal);
  border-radius:4px 4px 0 0;
  font-family:var(--body);font-weight:700;font-size:14px;color:var(--ink);
  transition:border-color .15s, background .15s, color .15s;
}
.cloze-input:focus{outline:none;border-bottom-color:var(--teal-deep);background:#fff}
.cloze-input.is-correct{background:var(--teal-soft);border-bottom-color:var(--teal-deep);color:var(--teal-deep)}
.cloze-input.is-wrong{background:var(--coral-soft);border-bottom-color:var(--coral-dk);color:var(--coral-dk);animation:clozeShake .35s ease-in-out}
@keyframes clozeShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
.mt-cloze-check{
  display:inline-block;margin-top:12px;
  padding:8px 16px;
  background:var(--teal);color:#fff;border:none;border-radius:8px;
  font-family:var(--display);font-weight:800;font-size:13px;
  cursor:pointer;transition:background .15s, transform .1s;
}
.mt-cloze-check:hover{background:var(--teal-deep)}
.mt-cloze-check:active{transform:translateY(1px)}
.mt-cloze-check[disabled]{opacity:.5;cursor:not-allowed}