/* ═══════════════════════════════════════════════════════════════════════
   SoloCogs — SECTIONS-based Resource Shell stylesheet (chemistry variant)
   ────────────────────────────────────────────────────────────────────────
   Shared by chemistry-c1-resource, chemistry-c2-resource, chemistry-c3-resource.
   Extracted 2026-05-16 from the inline <style> block that was duplicated
   (within 7 bytes) across all three. Includes amber sidebar/breadcrumb
   overrides that work alongside body[data-subject="chemistry"]'s palette
   swap (centralised in solocogs-theme.css).

   cell-biology-resource and organisation-resource use a sibling but
   slightly different CSS; they stay inline for now.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Chemistry amber accent overrides (Chem Amber per Zen Lab brief) ── */
:root {
  --chem-amber:      var(--solo-mastery-deep, #B45309);   /* deep amber - was Bio's #2A7F7F slot */
  --chem-amber-pale: var(--solo-mastery-pale, #FEF3C7);   /* pale amber wash - card hovers, focus rings */
  --chem-amber-soft: var(--solo-mastery, #FCD34D);   /* glow / accent */
}
/* ── SHELL ── */
#resource-shell { min-height:100vh; background:var(--off-white); padding-bottom:4rem; overflow:visible; }
/* Phase A8.10 - anchor the working area to a viewport-fitting height so short content
   doesn't make the page jump as you advance. Long content scrolls naturally. */
#resource-content {
  min-height: calc(100dvh - 220px);
}
@supports not (min-height: 100dvh) {
  #resource-content { min-height: calc(100vh - 220px); }
}
#resource-progress { background:var(--white); border-bottom:1px solid var(--border); padding:0.65rem 1.25rem; display:flex; align-items:center; gap:0.9rem; position:sticky; top:0; z-index:100; }
.rp-label { font-size:11px; font-weight:700; color:var(--text-mid); white-space:nowrap; min-width:80px; }
.rp-track { flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.rp-fill { height:100%; background:var(--solo-mastery-deep, #B45309); border-radius:4px; transition:width 0.4s; }
.rp-frac { font-size:11px; color:var(--text-mid); white-space:nowrap; }

.rs-unit-header { background:linear-gradient(135deg,#1E293B 0%,#0F172A 100%); color:white; padding:2rem 1.5rem; text-align:center; }
.rs-unit-badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; opacity:.75; margin-bottom:.4rem; }
.rs-unit-title { font-family:var(--solo-font-head); font-size:1.8rem; margin-bottom:.3rem; }
.rs-unit-sub { font-size:13px; opacity:.8; }

#resource-main { flex:1; min-width:0; padding:0; }
.rs-card { background:var(--white); border:1px solid var(--border); border-radius:14px; padding:2rem; margin-bottom:1.5rem; animation:rsIn .3s ease; }
@keyframes rsIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.rs-sec-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--solo-mastery-deep, #B45309); margin-bottom:.4rem; }
.rs-title { font-family:var(--solo-font-head); font-size:1.3rem; color: var(--solo-heading-color, var(--navy)); margin-bottom:.75rem; }
.rs-body { font-size:15px; line-height:1.75; color:var(--text-mid); }

/* Friendly "Loading..." card shown by SoloSectionRenderer when bespoke
   widget JS is being lazy-loaded in the background and the student has
   landed on a section whose widget hasn't been registered yet. Swapped
   for the real widget automatically by the renderer's late-register
   re-render hook. */
.rs-widget-loading {
  text-align: center;
  padding: 2.4rem 1.4rem;
  background: var(--solo-bg, #F8FAFC);
  border: 1.5px dashed var(--solo-divider, #E2E8F0);
  border-radius: 12px;
  color: var(--solo-text-mute, #64748B);
}
.rs-widget-loading p { margin: .3rem 0; }
.rs-widget-loading-spinner {
  font-size: 1.8rem;
  animation: rsWidgetSpin 1.4s ease-in-out infinite;
  display: inline-block;
}
@keyframes rsWidgetSpin {
  0%, 100% { transform: rotate(0); opacity: .55; }
  50%      { transform: rotate(20deg); opacity: 1; }
}
.rs-instr { font-size:13px; background:#e8f7f4; border-left:3px solid var(--solo-mastery-deep, #B45309); border-radius:6px; padding:.55rem .9rem; color: var(--solo-heading-color, var(--navy)); margin-bottom:1.1rem; }

/* "Did you know?" / Beyond-the-spec callouts. Used for relatable, recent
   science findings or news stories that connect to what the student is
   learning - even where the topic isn't in the AQA spec. Visually
   distinct from the regular content so they read as a deliberate sidebar.
   Pair with .rs-dyk__icon (small magnifier SVG) for the leading visual.
   .rs-dyk--news adds a slimmer accent for news-of-the-day callouts. */
.rs-dyk {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.85rem;
  align-items: start;
  background: linear-gradient(135deg, #F0FDFA 0%, #ECFDF5 100%);
  border: 1px solid #5EEAD4;
  border-left: 4px solid #0F766E;
  border-radius: 12px;
  padding: 1rem 1.15rem 1rem 1rem;
  margin: 1.1rem 0;
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.06);
}
.rs-dyk__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--solo-bg-elevated, #FFFFFF);
  border: 1px solid #5EEAD4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rs-dyk__icon svg {
  width: 18px; height: 18px;
  stroke: #0F766E; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.rs-dyk__body { color: var(--solo-heading-color, var(--navy, #1B3A6B)); font-size: 14.5px; line-height: 1.55; }
.rs-dyk__eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0F766E;
  margin: 0 0 0.25rem;
}
.rs-dyk__title {
  font-family: var(--solo-font-head, 'Lexend', sans-serif);
  font-size: 1rem; font-weight: 700;
  color: #1E293B;
  margin: 0 0 0.4rem;
}
.rs-dyk__body p { margin: 0 0 0.45rem; }
.rs-dyk__body p:last-child { margin: 0; }
.rs-dyk__body strong { color: #0F766E; font-weight: 700; }
.rs-dyk__source {
  font-size: 0.78rem;
  color: var(--text-mid, #475569);
  font-style: italic;
  display: block;
  margin-top: 0.3rem;
}
.rs-dyk--news {
  background: linear-gradient(135deg, #FEFCE8 0%, var(--solo-mastery-pale, #FEF3C7) 100%);
  border-color: var(--solo-mastery, #FCD34D);
  border-left-color: var(--solo-mastery-deep, #B45309);
}
.rs-dyk--news .rs-dyk__icon { border-color: var(--solo-mastery, #FCD34D); }
.rs-dyk--news .rs-dyk__icon svg { stroke: var(--solo-mastery-deep, #B45309); }
.rs-dyk--news .rs-dyk__eyebrow { color: var(--solo-mastery-deep, #B45309); }
.rs-dyk--news .rs-dyk__body strong { color: var(--solo-mastery-deep, #B45309); }

/* Optional thumbnail at the bottom of a callout. Sits below the body text;
   on wider viewports floats inline at the right so it doesn't dominate. */
.rs-dyk__thumb {
  display: block;
  margin: 0.7rem 0 0;
  border-radius: 8px;
  overflow: hidden;
  max-width: 280px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.rs-dyk__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.rs-dyk__thumb figcaption {
  font-size: 0.74rem;
  color: var(--text-mid, #475569);
  padding: 0.45rem 0.6rem;
  background: var(--solo-bg);
  font-style: italic;
  line-height: 1.4;
}
.rs-btn { background:var(--navy); color:white; border:none; border-radius:8px; padding:11px 22px; font-size:14px; font-weight:600; cursor:pointer; margin-top:1.1rem; display:inline-block; text-decoration:none; }
.rs-btn:hover { background:#0f2548; }
.rs-btn:disabled { background:#aaa; cursor:default; }
.rs-btn-teal { background:var(--solo-mastery-deep, #B45309); } .rs-btn-teal:hover { background:var(--solo-mastery-deep, #92400E); }
.rs-fb { margin-top:.9rem; padding:.85rem 1rem; border-radius:10px; font-size:14px; line-height:1.6; display:none; }
.rs-fb.vis { display:block; }
.rs-fb.ok { background:#D8F0E0; border:1px solid #80cca8; color:#1a5a38; }
.rs-fb.part { background:#FFF3CD; border:1px solid #ffd54f; color:#7a5500; }
.rs-fb.bad { background:#FDDCDC; border:1px solid #f48080; color:#7a0000; }
/* Dark-mode versions of the semantic feedback / status boxes (were light
   pastels on a dark page). Translucent colour + light text keeps the
   green/amber/red meaning while matching the dark theme. */
body.dark-mode .rs-fb.ok, body.dark-mode .ld-res.ok, body.dark-mode .zor-green { background:rgba(34,197,94,0.16); border-color:rgba(34,197,94,0.40); color:#86EFAC; }
body.dark-mode .rs-fb.part, body.dark-mode .ld-res.near, body.dark-mode .zor-yellow { background:rgba(234,179,8,0.16); border-color:rgba(234,179,8,0.40); color:#FDE68A; }
body.dark-mode .rs-fb.bad, body.dark-mode .vt-opt.bad, body.dark-mode .zor-red { background:rgba(239,68,68,0.16); border-color:rgba(239,68,68,0.40); color:#FCA5A5; }
body.dark-mode .zor-blue { background:rgba(59,130,246,0.16); color:#93C5FD; }
body.dark-mode .eval-ma, body.dark-mode .sd-info-panel.active { background:rgba(45,212,191,0.12); border-color:rgba(45,212,191,0.35); color:#CBD5E1; }
@media (prefers-color-scheme: dark) {
  body:not(.light-mode):not(.dark-mode) .rs-fb.ok, body:not(.light-mode):not(.dark-mode) .ld-res.ok, body:not(.light-mode):not(.dark-mode) .zor-green { background:rgba(34,197,94,0.16); border-color:rgba(34,197,94,0.40); color:#86EFAC; }
  body:not(.light-mode):not(.dark-mode) .rs-fb.part, body:not(.light-mode):not(.dark-mode) .ld-res.near, body:not(.light-mode):not(.dark-mode) .zor-yellow { background:rgba(234,179,8,0.16); border-color:rgba(234,179,8,0.40); color:#FDE68A; }
  body:not(.light-mode):not(.dark-mode) .rs-fb.bad, body:not(.light-mode):not(.dark-mode) .vt-opt.bad, body:not(.light-mode):not(.dark-mode) .zor-red { background:rgba(239,68,68,0.16); border-color:rgba(239,68,68,0.40); color:#FCA5A5; }
  body:not(.light-mode):not(.dark-mode) .eval-ma, body:not(.light-mode):not(.dark-mode) .sd-info-panel.active { background:rgba(45,212,191,0.12); border-color:rgba(45,212,191,0.35); color:#CBD5E1; }
}

/* ── ZOR ── */
.zor-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:1rem 0; }
.zor-card { border:2px solid transparent; border-radius:12px; padding:.9rem; cursor:pointer; text-align:center; transition:all .15s; }
.zor-card:hover { filter:brightness(.95); }
.zor-card.sel { border-color:var(--navy)!important; box-shadow:0 0 0 2px var(--navy); }
.zor-blue{background:#DEEAF7} .zor-green{background:#D8F0E0} .zor-yellow{background:#FFF3CD} .zor-red{background:#FDDCDC}
.zor-emoji { font-size:1.9rem; display:block; margin-bottom:.3rem; }
.zor-name { font-size:13px; font-weight:700; color: var(--solo-heading-color, var(--navy)); }
.zor-desc { font-size:11px; color:var(--text-mid); line-height:1.4; margin-top:.2rem; }
.zor-msg { margin-top:.9rem; padding:.75rem 1rem; border-radius:8px; font-size:14px; line-height:1.6; display:none; }
.zor-msg.vis { display:block; }
.zor-readiness-q{font-size:14px;font-weight:700;color: var(--solo-heading-color, var(--navy));margin-bottom:.6rem;}
.zor-option{display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;margin-bottom:.45rem;transition:all .15s;background:var(--solo-bg-elevated, #FFFFFF);}
.zor-option:hover{border-color:var(--chem-amber);background:rgba(42,127,127,.04);}
.zor-opt-icon{font-size:1.4rem;flex-shrink:0;width:28px;text-align:center;}
.zor-opt-label{font-size:13.5px;font-weight:700;color: var(--solo-heading-color, var(--navy));line-height:1.3;}
.zor-opt-sub{font-size:12px;color:var(--text-mid);margin-top:.1rem;}
.zor-support-item{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;border-top:1px solid rgba(0,0,0,.07);}
.zor-support-item:first-of-type{border-top:none;}
.zor-support-icon{font-size:1.3rem;flex-shrink:0;margin-top:.1rem;}
.zor-support-body{font-size:13px;line-height:1.55;color: var(--solo-heading-color, var(--navy));}

/* ── OBJECTIVES ── */
.obj-list { list-style:none; padding:0; margin:.75rem 0; }
.obj-item { display:flex; gap:10px; align-items:flex-start; padding:.55rem 0; border-bottom:1px solid var(--border); }
.obj-item:last-child { border-bottom:none; }
.obj-num { background:var(--solo-mastery-deep, #B45309); color:white; border-radius:50%; width:23px; height:23px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; margin-top:1px; }
.obj-text { font-size:14px; color: var(--solo-heading-color, var(--navy)); line-height:1.5; }

/* Flashcards now use the SoloCogs Universal Flashcard component
   (.sc-fc-*) - styles defined in css/solocogs-theme.css. */

/* ── VOCAB TEST ── */
.vt-q { font-size:1.05rem; font-family:var(--solo-font-head); color: var(--solo-heading-color, var(--navy)); margin-bottom:1.1rem; font-weight:500; }
.vt-opts { display:flex; flex-direction:column; gap:9px; }
.vt-opt { padding:11px 15px; border:2px solid var(--border); border-radius:10px; cursor:pointer; font-size:14px; color: var(--solo-heading-color, var(--navy)); text-align:left; background:var(--solo-bg-elevated, #FFFFFF); transition:all .15s; }
.vt-opt:hover:not(:disabled) { border-color:var(--solo-mastery-deep, #B45309); background:#f0faf7; }
.vt-opt.ok { background:#D8F0E0; border-color:var(--solo-mastery-deep, #B45309); }
.vt-opt.bad { background:#FDDCDC; border-color:#e05353; }
.vt-score { text-align:center; padding:1rem 0; }
.vt-score-num { font-size:3rem; font-weight:700; color:var(--solo-mastery-deep, #B45309); }
.vt-score-lbl { font-size:14px; color:var(--text-mid); margin-top:.3rem; }

/* ── CONTENT BODY ── */
.cb h3 { font-family:var(--solo-font-head); font-size:1.05rem; color: var(--solo-heading-color, var(--navy)); margin:1.1rem 0 .45rem; }
.cb p { font-size:14.5px; line-height:1.75; color: var(--solo-heading-color, var(--navy)); margin:0 0 .65rem; }
.cb ul,.cb ol { padding-left:1.25rem; margin:0 0 .65rem; font-size:14.5px; line-height:1.8; color: var(--solo-heading-color, var(--navy)); }
.cb li { margin-bottom:.3rem; }
.cb table { width:100%; border-collapse:collapse; margin:.85rem 0; font-size:13.5px; }
.cb th { background:var(--navy); color:white; padding:7px 11px; text-align:left; }
.cb td { padding:6px 11px; border-bottom:1px solid var(--border); color: var(--solo-heading-color, var(--navy)); background:transparent; }
.cb tr:nth-child(even) td { background:rgba(0,0,0,0.04); }
.cb .hl-box { background:rgba(42,127,127,0.1); border-left:3px solid var(--solo-mastery-deep, #B45309); border-radius:6px; padding:.65rem .9rem; margin:.85rem 0; font-size:13.5px; color: var(--solo-heading-color, var(--navy)); line-height:1.6; }
.cb .kt { font-weight:600; color:var(--solo-mastery-deep, #B45309); }

/* ── STUDY DIAGRAM ── */
.sd-legend { display:flex; flex-direction:column; gap:0; margin:1.1rem 0; }
.sd-legend-row { display:flex; align-items:flex-start; gap:12px; padding:.75rem 0; border-bottom:1px solid var(--border); }
.sd-legend-row:last-child { border-bottom:none; }
.sd-num { background:var(--navy); color:white; width:27px; height:27px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; margin-top:1px; }
.sd-name { font-size:14px; font-weight:600; color: var(--solo-heading-color, var(--navy)); margin-bottom:3px; }
.sd-fn { font-size:13px; color:var(--text-mid); line-height:1.6; }
/* Interactive study diagram info panel */
.sd-info-panel { margin:1rem 0 .5rem; padding:1rem 1.1rem; background:var(--off-white); border-radius:10px; min-height:72px; border:2px solid transparent; transition:background .2s, border-color .2s; }
.sd-info-panel.active { background:#e8f7f4; border-color:#b0dada; }
.sd-info-ph { font-size:13px; color:var(--text-mid); font-style:italic; display:flex; align-items:center; gap:8px; }
.sd-info-row { display:none; align-items:flex-start; gap:12px; }
.sd-info-row.vis { display:flex; }
.sd-info-badge { background:var(--navy); color:white; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; margin-top:2px; transition:background .2s; }
.sd-info-name { font-size:15px; font-weight:600; color: var(--solo-heading-color, var(--navy)); margin-bottom:4px; }
.sd-info-fn { font-size:13.5px; color:var(--text-mid); line-height:1.65; }
.sd-show-all-btn { background:none; border:1px solid var(--border); border-radius:8px; padding:7px 14px; font-size:12px; color:var(--text-mid); cursor:pointer; font-family:var(--solo-font-body); margin-top:.35rem; }
.sd-show-all-btn:hover { background:var(--off-white); color: var(--solo-heading-color, var(--navy)); }

/* ── LABEL DIAGRAM ── */
.ld-svg { overflow-x:auto; margin-bottom:1.25rem; }
.ld-svg svg { max-width:100%; display:block; margin:0 auto; }
.ld-rows { display:flex; flex-direction:column; gap:9px; margin-bottom:1.1rem; }
.ld-row { display:flex; align-items:center; gap:10px; }
.ld-num { background:var(--navy); color:white; width:27px; height:27px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.ld-sel,.ld-inp { flex:1; padding:8px 11px; border:2px solid var(--border); border-radius:8px; font-size:14px; font-family:var(--solo-font-body); background:var(--solo-bg-elevated, #FFFFFF); }
.ld-sel:focus,.ld-inp:focus { border-color:var(--solo-mastery-deep, #B45309); outline:none; }
.ld-res { font-size:12px; padding:2px 7px; border-radius:5px; white-space:nowrap; }
.ld-res.ok { background:#D8F0E0; color:#1a6a40; }
.ld-res.near { background:#FFF3CD; color:#7a5500; }
.ld-res.bad { background:#FDDCDC; color:#8b0000; }

/* ── SORT CARDS ── */
.sort-pool { display:flex; flex-wrap:wrap; gap:8px; min-height:55px; background:var(--off-white); border:2px dashed var(--border); border-radius:10px; padding:10px; margin-bottom:1.1rem; transition:background .12s,outline .12s; }
.sc { padding:7px 13px; background:var(--solo-bg-elevated, #FFFFFF); border:2px solid var(--border); border-radius:8px; font-size:13px; cursor:grab; color: var(--solo-heading-color, var(--navy)); user-select:none; transition:all .12s; }
.sc:hover, .sc:active { border-color:var(--solo-mastery-deep, #B45309); }
.sc.sel { border-color:var(--solo-mastery-deep, #B45309); background:#e8f7f4; }
.sc.ok { background:#D8F0E0; border-color:var(--solo-mastery-deep, #B45309); cursor:default; }
.sc.bad { background:#FDDCDC; border-color:#e05353; cursor:default; }
.sc.dragging { opacity:0.35; transform:scale(0.96); }
.sort-cols { display:grid; gap:10px; margin-bottom:1.1rem; }
.sort-col { border:2px solid var(--border); border-radius:10px; overflow:hidden; }
.sort-col-hd { padding:7px 13px; font-size:13px; font-weight:700; color:white; }
.sort-col-bd { min-height:70px; padding:9px; display:flex; flex-wrap:wrap; gap:7px; cursor:pointer; transition:background .12s; }
.sort-col-bd:hover { background:#f5f5f5; }
.sort-col-bd.drag-over { background:#e8f7f4 !important; outline:2px dashed var(--solo-mastery-deep, #B45309); outline-offset:-2px; }
.sort-pool.drag-over { background:rgba(42,127,127,0.07); border-color:var(--solo-mastery-deep, #B45309); }

/* ── SEQUENCE ── */
.seq-list { display:flex; flex-direction:column; gap:8px; margin-bottom:1.1rem; }
.seq-item { display:flex; align-items:center; gap:10px; padding:10px 13px; background:var(--solo-bg-elevated, #FFFFFF); border:2px solid var(--border); border-radius:10px; }
.seq-txt { flex:1; font-size:14px; color: var(--solo-heading-color, var(--navy)); line-height:1.4; }
.seq-btns { display:flex; flex-direction:column; gap:2px; }
.seq-btn { background:none; border:1px solid var(--border); border-radius:4px; width:27px; height:22px; cursor:pointer; font-size:12px; }
.seq-btn:hover { background:var(--off-white); }
.seq-btn:disabled { opacity:.25; cursor:default; }
.seq-item.ok { border-color:var(--solo-mastery-deep, #B45309); background:#D8F0E0; }
.seq-item.bad { border-color:#e05353; background:#FDDCDC; }

/* ── HIGHLIGHT ── */
.hl-passage { font-size:15px; line-height:2.1; color: var(--solo-heading-color, var(--navy)); margin-bottom:1rem; }
.hl-w { cursor:pointer; border-radius:3px; padding:1px 0; }
.hl-w.on { background:#FFE082; }
.hl-w.ok { background:#A5D6A7; }
.hl-w.miss { background:#FFCC80; text-decoration:underline dotted; }
.hl-w.bad { background:#EF9A9A; }

/* ── CALCULATION ── */
/* Calculation cards - Zen Lab. White card, charcoal type, mastery accents. */
.calc-box { background:var(--solo-navy); color:#FFFFFF; border-radius:14px; padding:1.1rem 1.25rem; margin:.85rem 0; text-align:center; box-shadow:var(--solo-shadow-1); }
.calc-f { font-size:1.35rem; font-family:var(--solo-font-head); font-weight:600; letter-spacing:-0.01em; }
.calc-r { font-size:13px; opacity:.82; margin-top:.5rem; font-family:var(--solo-font-body); }
.calc-worked { background:var(--solo-bg-elevated, #FFFFFF); border:1px solid var(--solo-divider); border-left:4px solid var(--solo-mastery); border-radius:12px; padding:.95rem 1.1rem; margin:.85rem 0; box-shadow:var(--solo-shadow-1); }
.calc-wlbl { font-family:var(--solo-font-head); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--solo-mastery-deep); margin-bottom:.4rem; }
.calc-wbody { font-family:var(--solo-font-body); font-size:14px; color:var(--solo-text); line-height:1.85; }
.calc-wbody strong { color: var(--solo-heading-color, var(--solo-navy)); }
.calc-q { margin:.85rem 0; padding:.95rem 1.1rem; border:1px solid var(--solo-divider); border-radius:12px; background:var(--solo-bg-elevated, #FFFFFF); box-shadow:var(--solo-shadow-1); }
.calc-qtxt { font-family:var(--solo-font-head); font-size:14px; color: var(--solo-heading-color, var(--solo-navy)); margin-bottom:.65rem; line-height:1.6; }
.calc-inp { padding:9px 12px; border:1.5px solid var(--solo-divider); border-radius:8px; font-family:var(--solo-font-body); font-size:14px; width:150px; background:var(--solo-bg-elevated, #FFFFFF); color: var(--solo-heading-color, var(--solo-navy)); }
.calc-inp:focus { border-color:var(--solo-mastery); outline:none; box-shadow:0 0 0 3px rgba(45,212,191,0.18); }
.calc-inp.calc-targeted { border-color:var(--solo-mastery); box-shadow:0 0 0 3px rgba(45,212,191,0.22); }
.calc-fb { margin-top:.5rem; font-size:13px; font-weight:500; font-family:var(--solo-font-body); }

/* ── MATCH-UP ── */
.mu-tbl { width:100%; border-collapse:collapse; margin:.85rem 0; }
.mu-tbl td { padding:8px 10px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:middle; }
.mu-tbl .mu-term { font-weight:500; color: var(--solo-heading-color, var(--navy)); padding-right:12px; }
.mu-tbl select { width:100%; padding:6px 9px; border:2px solid var(--border); border-radius:8px; font-size:13px; font-family:var(--solo-font-body); }
.mu-tbl select.ok { border-color:var(--solo-mastery-deep, #B45309); background:#D8F0E0; }
.mu-tbl select.bad { border-color:#e05353; background:#FDDCDC; }

/* ── EVALUATION ── */
.eval-cmd { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--solo-mastery-deep, #B45309); margin-bottom:.3rem; }
.eval-qtxt { font-size:15px; color: var(--solo-heading-color, var(--navy)); font-weight:500; margin-bottom:.65rem; line-height:1.5; }
.eval-ta { width:100%; padding:9px 11px; border:2px solid var(--border); border-radius:8px; font-size:14px; font-family:var(--solo-font-body); resize:vertical; min-height:90px; box-sizing:border-box; }
.eval-ta:focus { border-color:var(--solo-mastery-deep, #B45309); outline:none; }
.eval-mbtn { background:none; border:none; color:var(--solo-mastery-deep, #B45309); font-size:13px; cursor:pointer; text-decoration:underline; padding:3px 0; }
.eval-ma { display:none; margin-top:.65rem; padding:.65rem .9rem; background:#e8f7f4; border-radius:8px; font-size:13.5px; color: var(--solo-heading-color, var(--navy)); line-height:1.6; }
.eval-ma.vis { display:block; }
.eval-cinp { padding:8px 11px; border:2px solid var(--border); border-radius:8px; font-size:14px; width:140px; font-family:var(--solo-font-body); }
.eval-progress { display:flex; gap:6px; margin-bottom:1.1rem; }
.eval-pip { height:5px; flex:1; border-radius:3px; background:var(--border); transition:background .25s; }
.eval-pip.done { background:var(--solo-mastery-deep, #B45309); }
.eval-pip.active { background:#1E293B; }
/* ── MINI CALCULATOR ── */
.mc-wrap { background:#1c1c1e; border-radius:14px; padding:.8rem; max-width:240px; margin:.75rem 0 .9rem; user-select:none; }
.mc-display { color:white; font-size:1.65rem; text-align:right; padding:.1rem .3rem .35rem; font-family:var(--solo-font-body); word-break:break-all; min-height:2.2rem; }
.mc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.mc-btn { background:#3a3a3c; color:white; border:none; border-radius:50%; width:44px; height:44px; font-size:.95rem; font-weight:500; cursor:pointer; font-family:var(--solo-font-body); transition:opacity .1s; display:flex; align-items:center; justify-content:center; }
.mc-btn:active { opacity:.65; }
.mc-btn.mc-op { background:#ff9f0a; }
.mc-btn.mc-top { background:#636366; }
.mc-btn.mc-zero { border-radius:22px; grid-column:span 2; width:auto; justify-content:flex-start; padding-left:16px; }

/* ── TICK LIST ── */
.tick-list { list-style:none; padding:0; margin:.75rem 0; }
.tick-item { display:flex; align-items:flex-start; gap:11px; padding:.75rem 0; border-bottom:1px solid var(--border); }
.tick-item:last-child { border-bottom:none; }
.tick-box { width:23px; height:23px; border:2px solid var(--border); border-radius:6px; flex-shrink:0; cursor:default; display:flex; align-items:center; justify-content:center; font-size:13px; transition:all .15s; margin-top:1px; }
.tick-box.auto { background:#1E293B; border-color:#1E293B; color:white; }
.tick-txt { font-size:14px; color: var(--solo-heading-color, var(--navy)); line-height:1.5; flex:1; cursor:default; }
.tick-auto-badge { display:inline-block; font-size:10px; font-weight:700; background:#1E293B; color:white; border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:middle; letter-spacing:.03em; }
.tick-done { text-align:center; padding:2rem 1rem; display:none; }
.tick-done.vis { display:block; }
.tick-done-emoji { font-size:2.8rem; margin-bottom:.65rem; }
.tick-done-title { font-family:var(--solo-font-head); font-size:1.35rem; color: var(--solo-heading-color, var(--navy)); margin-bottom:.45rem; }
.tick-done-txt { font-size:14px; color:var(--text-mid); line-height:1.6; }

/* ── ACCESSIBILITY TOOLBAR ── */
#access-bar {
  background: var(--navy);
  padding: 0.5rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  position: sticky;
  top: 53px; /* sits below progress bar */
  z-index: 99;
}
.ab-label { font-size: 11px; color: rgba(255,255,255,0.5); white-space: nowrap; }
.ab-swatches { display: flex; align-items: center; gap: 6px; }
.ab-swatch {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: border-color .15s, transform .15s; flex-shrink: 0;
}
.ab-swatch:hover { transform: scale(1.2); border-color: rgba(255,255,255,0.55); }
.ab-swatch.active { border-color: #fff; outline: 2px solid #222; outline-offset: 1px; transform: scale(1.2); }
.ab-divider { width: 1px; height: 20px; background: rgba(255,255,255,0.15); flex-shrink: 0; }
.btn-read-aloud {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px; /* PILL - locked button-shape rule */ padding: 4px 10px; color: white; font-size: 12px;
  font-family: var(--solo-font-body); cursor: pointer; transition: background .15s;
  white-space: nowrap;
}
.btn-read-aloud:hover { background: rgba(255,255,255,0.2); }
.btn-read-aloud.reading { background: rgba(255,100,100,0.3); border-color: rgba(255,120,120,0.5); }
.btn-read-aloud.muted { background: rgba(255,255,255,0.08); opacity: 0.55; }
/* SoloCalc's default floating FAB lands bottom-right next to Cogs.
   On this page we surface the calculator from the access bar
   instead (#ab-calc-btn), so hide the floating one. The panel itself
   still works - SoloCalc.open() is called from the bar button. */
.sc-fab { display: none !important; }

/* ── CARD BACKGROUND (acetate overlay) ── */
.rs-card { --card-bg: #ffffff; }

/* ── COGS MASCOT ── */
#cogs-wrap{position:fixed;bottom:20px;left:calc(50% + 516px);z-index:200;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none;}
/* Hide this legacy in-page Cogs while the welcome tour is running -
   the tour spawns its own Cogs character, and seeing two on screen at
   once is jarring. The global SoloCogs gets unpinned by the tour
   engine; this rule covers the page-specific legacy widget too. */
body.solo-tour-active #cogs-wrap{display:none !important;}

/* Confetti easter egg: subtle pulse on Cogs when the egg is armed
   (just after a celebration) so the student notices he's tappable
   for more confetti. Fades after a few seconds via JS so he doesn't
   sit there pulsing forever. */
#cogs-char.cogs-egg-armed { animation: cogsEggPulse 1.4s ease-in-out 3; cursor: pointer; }
@keyframes cogsEggPulse {
  0%, 100% { filter: drop-shadow(0 3px 8px rgba(0,0,0,0.18)); }
  50%      { filter: drop-shadow(0 4px 14px rgba(45,212,191,0.55))
                     drop-shadow(0 0 8px rgba(45,212,191,0.45)); }
}

/* "Stop Cogs movement" toggle - persisted via localStorage 'cogs-still'.
   When the user opts out of motion, every animation on Cogs (float,
   wave, dance, etc.) is paused at its current frame. Sounds + bubbles
   still work; this only kills movement. Honoured everywhere on the
   page where Cogs animates. */
body.cogs-still #cogs-float,
body.cogs-still #cogs-char,
body.cogs-still #cogs-char *,
body.cogs-still #cogs-wrap,
body.cogs-still .solo-cogs-host,
body.cogs-still .solo-cogs-host *,
body.cogs-still #cogs-bubble {
  animation: none !important;
  transition: none !important;
}
.btn-read-aloud.cogs-still-active {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
}
/* Float lives on wrapper so wave on inner char never displaces the bubble */
#cogs-float{animation:cogsFloat 3s ease-in-out infinite;display:inline-block;pointer-events:auto;}
#cogs-char{width:76px;cursor:pointer;display:block;transform-origin:center bottom;filter:drop-shadow(0 3px 8px rgba(0,0,0,0.18));}
#cogs-char:hover,#cogs-char:active{filter:drop-shadow(0 4px 12px rgba(0,0,0,0.25)) brightness(1.05);}
#cogs-char.waving{animation:cogsWave 0.6s ease-in-out forwards;}
#cogs-char.pop-in{animation:cogsPop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;}
@keyframes cogsFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes cogsWave{0%,100%{transform:rotate(0deg);}35%{transform:rotate(-12deg);}70%{transform:rotate(12deg);}}
@keyframes cogsPop{0%{transform:scale(0);}100%{transform:scale(1);}}
/* ── COGS INTRO MODAL ── */
#cogs-intro-modal{position:fixed;inset:0;background:rgba(10,20,40,0.6);z-index:600;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
#cogs-intro-modal.hidden{display:none;}
#cogs-intro-modal.flying{animation:cimodalFly 0.55s ease-in forwards;pointer-events:none;}
@keyframes cimodalFly{0%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(0.05) translate(40vw,40vh);}}
#cogs-intro-box{background:var(--solo-bg-elevated, #FFFFFF);border-radius:22px;padding:2.2rem 2rem 1.8rem;max-width:400px;width:88%;text-align:center;box-shadow:0 12px 48px rgba(0,0,0,0.22);animation:rsIn .35s ease;}
#cogs-intro-big{width:110px;margin:0 auto .6rem;animation:cogsFloat 3s ease-in-out infinite;}
.ci-title{font-family:var(--solo-font-head);font-size:1.35rem;color: var(--solo-heading-color, var(--navy));margin-bottom:.6rem;}
.ci-msg{font-size:14.5px;line-height:1.7;color:var(--text-mid);min-height:68px;margin-bottom:1.1rem;}
.ci-dots{display:flex;justify-content:center;gap:7px;margin-bottom:1.2rem;}
.ci-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s;}
.ci-dot.active{background:var(--navy);}
.ci-btn{background:var(--solo-mastery);color:#FFFFFF;text-shadow:0 1px 1px rgba(15,23,42,0.15);border:none;border-radius:999px;padding:11px 24px;font-size:14px;font-weight:700;font-family:var(--solo-font-head);cursor:pointer;width:100%;box-shadow:0 1px 2px rgba(15,23,42,0.04);transition:transform .12s ease,box-shadow .12s ease;}
.ci-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(45,212,191,0.35);}
.ci-skip{display:block;margin-top:.75rem;font-size:12px;color:var(--text-mid);background:none;border:none;cursor:pointer;font-family:var(--solo-font-body);}
.ci-skip:hover{color: var(--solo-heading-color, var(--navy));text-decoration:underline;}
#cogs-bubble{background:var(--solo-bg-elevated, #FFFFFF);border:2px solid var(--solo-mastery);border-radius:14px 14px 4px 14px;padding:12px 14px;max-width:220px;min-width:140px;font-family:var(--solo-font-body);font-size:14px;line-height:1.5;color: var(--solo-heading-color, var(--navy));pointer-events:auto;box-shadow:0 4px 18px rgba(15,23,42,0.13),0 0 0 4px var(--solo-mastery-aura, rgba(45,212,191,0.12));display:none;animation:rsIn .25s ease;}
body[data-subject="chemistry"] #cogs-bubble{--solo-mastery-aura: rgba(245,158,11,0.18);}
body[data-subject="physics"]   #cogs-bubble{--solo-mastery-aura: rgba(99,102,241,0.16);}
#cogs-bubble.vis{display:block;}
#cogs-bubble strong{color: var(--solo-heading-color, var(--navy));}
.cogs-bact{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.cogs-abtn{background:var(--navy);color:white;border:none;border-radius:6px;padding:5px 11px;font-size:12px;font-family:var(--solo-font-body);cursor:pointer;}
.cogs-dbtn{background:none;color:var(--text-mid);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:12px;font-family:var(--solo-font-body);cursor:pointer;}
.cogs-abtn:hover{background:#0f2548;} .cogs-dbtn:hover{background:var(--off-white);}

/* ── WAVING INTRO HANDS ── */
@keyframes ciHandL{0%,100%{transform:translate(0,0) rotate(0deg);}40%{transform:translate(-6px,-10px) rotate(-20deg);}}
@keyframes ciHandR{0%,100%{transform:translate(0,0) rotate(0deg);}40%{transform:translate(6px,-10px) rotate(20deg);}}
#cogs-intro-big .ci-hand-l{animation:ciHandL 0.85s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
#cogs-intro-big .ci-hand-r{animation:ciHandR 0.85s ease-in-out infinite 0.2s;transform-box:fill-box;transform-origin:center;}

/* ── COGS IDLE ANIMATIONS ── */
/* Hand elements can be targeted directly inside inline SVG */
#cogs-hand-l,#cogs-hand-r{transform-box:fill-box;transform-origin:center;}

/* Jump */
#cogs-char.jumping{animation:cogsJump 0.65s cubic-bezier(0.36,0.07,0.19,0.97) forwards;}
@keyframes cogsJump{0%{transform:translateY(0) scaleX(1);}25%{transform:translateY(-22px) scaleX(0.92);}50%{transform:translateY(-30px) scaleX(0.88) rotate(-3deg);}75%{transform:translateY(-6px) scaleX(1.06);}88%{transform:translateY(4px) scaleX(0.97);}100%{transform:translateY(0) scaleX(1);}}

/* Wiggle */
#cogs-char.wiggling{animation:cogsWiggle 0.55s ease-in-out forwards;}
@keyframes cogsWiggle{0%,100%{transform:rotate(0);}14%{transform:rotate(-9deg) scaleY(0.97);}28%{transform:rotate(9deg) scaleY(0.97);}42%{transform:rotate(-9deg) scaleY(0.97);}57%{transform:rotate(9deg) scaleY(0.97);}72%{transform:rotate(-5deg);}86%{transform:rotate(5deg);}}

/* Spin */
#cogs-char.spinning{animation:cogsSpin360 0.75s cubic-bezier(0.36,0.07,0.19,0.97) forwards;}
@keyframes cogsSpin360{from{transform:rotate(0deg) scale(1);}50%{transform:rotate(180deg) scale(1.08);}to{transform:rotate(360deg) scale(1);}}

/* Dance 1 - happy bounce side to side */
#cogs-char.dancing1{animation:cogsDance1 0.9s ease-in-out forwards;}
@keyframes cogsDance1{0%,100%{transform:translateX(0) translateY(0) rotate(0);}20%{transform:translateX(-9px) translateY(-4px) rotate(-6deg) scaleY(0.95);}40%{transform:translateX(0) translateY(-10px) scaleY(1.06);}60%{transform:translateX(9px) translateY(-4px) rotate(6deg) scaleY(0.95);}80%{transform:translateX(0) translateY(-6px) scaleY(1.04);}}

/* Dance 2 - shimmy */
#cogs-char.dancing2{animation:cogsDance2 1.1s ease-in-out forwards;}
@keyframes cogsDance2{0%,100%{transform:rotate(0) scaleX(1);}10%{transform:rotate(-7deg) scaleX(0.95) translateY(-3px);}20%{transform:rotate(0) scaleX(1.06) translateY(-8px);}30%{transform:rotate(7deg) scaleX(0.95) translateY(-3px);}40%{transform:rotate(0) scaleX(1) translateY(-12px);}55%{transform:rotate(-5deg) scaleX(0.97) translateY(-5px);}70%{transform:rotate(5deg) scaleX(0.97) translateY(-5px);}85%{transform:rotate(-3deg) scaleX(1) translateY(-2px);}}

/* Cheer - whole body jumps, hands fly up */
#cogs-char.cheering{animation:cogsCheer 0.9s cubic-bezier(0.34,1.56,0.64,1) forwards;}
@keyframes cogsCheer{0%{transform:translateY(0) scale(1);}30%{transform:translateY(-26px) scale(1.08);}55%{transform:translateY(-32px) scale(1.12);}75%{transform:translateY(-18px) scale(1.05);}88%{transform:translateY(-4px) scale(0.98);}100%{transform:translateY(0) scale(1);}}
#cogs-char.cheering #cogs-hand-l{animation:cogsHandUp 0.9s ease forwards;}
#cogs-char.cheering #cogs-hand-r{animation:cogsHandUp 0.9s ease 0.07s forwards;}
@keyframes cogsHandUp{0%,100%{transform:translateY(0) rotate(0);}30%,65%{transform:translateY(-34px) rotate(-15deg);}}

/* Wave - hand-specific wave on the right hand */
#cogs-char.waving #cogs-hand-r{animation:cogsHandWave 0.6s ease-in-out forwards;}
@keyframes cogsHandWave{0%,100%{transform:translateY(0) rotate(0);}25%{transform:translateY(-18px) rotate(-22deg);}50%{transform:translateY(-22px) rotate(18deg);}75%{transform:translateY(-14px) rotate(-12deg);}}

/* Tap feet - subtle weight-shift between feet, idle-friendly */
#cogs-char.tapping{animation:cogsTap 1.0s ease-in-out forwards;}
@keyframes cogsTap{0%,100%{transform:translateY(0) rotate(0);}15%{transform:translateY(-1px) translateX(-2px) rotate(-2deg);}30%{transform:translateY(0) translateX(0) rotate(0);}50%{transform:translateY(-1px) translateX(2px) rotate(2deg);}70%{transform:translateY(0) translateX(0) rotate(0);}85%{transform:translateY(-1px) translateX(-2px) rotate(-2deg);}}

/* Sway - gentle side-to-side bob */
#cogs-char.swaying{animation:cogsSway 1.6s ease-in-out forwards;}
@keyframes cogsSway{0%,100%{transform:translateX(0) rotate(0);}25%{transform:translateX(-4px) rotate(-3deg);}50%{transform:translateX(0) rotate(0);}75%{transform:translateX(4px) rotate(3deg);}}

/* Nod - friendly little head-bob */
#cogs-char.nodding{animation:cogsNod 0.85s ease-in-out forwards;}
@keyframes cogsNod{0%,100%{transform:translateY(0);}30%{transform:translateY(-3px);}60%{transform:translateY(2px);}85%{transform:translateY(-1px);}}

/* ── CONFETTI (lab complete - falls near Cogs) ── */
.rv-confetti-piece{position:fixed;pointer-events:none;z-index:9999;animation:rvConfettiFall linear forwards;}
@keyframes rvConfettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1;}100%{transform:translateY(260px) rotate(540deg);opacity:0;}}

/* ── SNF (Saturday Night Fever) dance ── */
#cogs-char.snf{animation:cogsSnf 1.3s cubic-bezier(0.34,1.2,0.64,1) forwards;}
@keyframes cogsSnf{0%{transform:translateY(0) rotate(0) scale(1);}20%{transform:translateY(-18px) rotate(-18deg) scale(1.07);}50%{transform:translateY(-28px) rotate(20deg) scale(1.1);}75%{transform:translateY(-12px) rotate(-8deg) scale(1.04);}100%{transform:translateY(0) rotate(0) scale(1);}}
#cogs-char.snf #cogs-hand-r{animation:cogsSnfArm 1.3s ease-in-out forwards;}
@keyframes cogsSnfArm{0%,100%{transform:translateY(0) rotate(0);}30%{transform:translateY(-52px) rotate(-55deg);}60%{transform:translateY(-48px) rotate(-40deg);}}

/* ── Robot / Moonwalk / Funky Chicken / Punching celebrations ── */
#cogs-char.robot{animation:cogsRobot 1.0s steps(8,end) forwards;}
@keyframes cogsRobot{0%{transform:translate(0,0) rotate(0);}12%{transform:translate(-5px,-10px) rotate(-8deg);}25%{transform:translate(5px,-18px) rotate(8deg);}37%{transform:translate(-5px,-10px) rotate(-8deg);}50%{transform:translate(5px,-20px) rotate(8deg);}62%{transform:translate(-3px,-10px) rotate(-5deg);}75%{transform:translate(3px,-6px) rotate(5deg);}88%{transform:translate(-2px,-3px) rotate(-2deg);}100%{transform:translate(0,0) rotate(0);}}
#cogs-char.moonwalk{animation:cogsMoonwalk 0.95s ease-in-out forwards;}
@keyframes cogsMoonwalk{0%{transform:translateX(0) scaleX(1) skewX(0);}20%{transform:translateX(10px) scaleX(0.93) skewX(-5deg) translateY(-4px);}40%{transform:translateX(20px) scaleX(0.88) skewX(-8deg) translateY(-8px);}60%{transform:translateX(12px) scaleX(0.93) skewX(-4deg) translateY(-4px);}80%{transform:translateX(4px) scaleX(0.97) skewX(-2deg) translateY(-1px);}100%{transform:translateX(0) scaleX(1) skewX(0);}}
#cogs-char.funky{animation:cogsFunky 1.1s ease-in-out forwards;}
@keyframes cogsFunky{0%,100%{transform:rotate(0) scaleX(1);}12%{transform:rotate(-14deg) scaleX(0.88) translateY(-4px);}25%{transform:rotate(0) scaleX(1.12) translateY(-12px);}37%{transform:rotate(14deg) scaleX(0.88) translateY(-4px);}50%{transform:rotate(0) scaleX(1) translateY(-16px);}62%{transform:rotate(-11deg) scaleX(0.91) translateY(-7px);}75%{transform:rotate(11deg) scaleX(0.91) translateY(-7px);}88%{transform:rotate(-4deg) scaleX(1) translateY(-2px);}}
#cogs-char.punching{animation:cogsPunching 0.85s cubic-bezier(0.34,1.56,0.64,1) forwards;}
#cogs-char.punching #cogs-hand-r{animation:cogsPunchArm 0.85s ease-in-out forwards;}
@keyframes cogsPunching{0%{transform:translateY(0) rotate(0) scale(1);}25%{transform:translateY(-30px) rotate(-6deg) scale(1.06);}45%{transform:translateY(-42px) rotate(10deg) scale(1.1);}60%{transform:translateY(-34px) rotate(-4deg) scale(1.07);}78%{transform:translateY(-14px) rotate(2deg) scale(1.02);}90%{transform:translateY(-3px) rotate(-1deg);}100%{transform:translateY(0) rotate(0) scale(1);}}
@keyframes cogsPunchArm{0%,100%{transform:translateY(0) rotate(0);}35%{transform:translateY(-60px) rotate(-70deg);}55%{transform:translateY(-55px) rotate(-60deg);}}

/* ── LAYOUT: two columns using Grid so there is no overlap ── */
#resource-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  max-width: 1060px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  box-sizing: border-box;
}
/* Sidebar - reset global nav styles, then apply our own */
#resource-nav {
  /* Reset what styles.css nav{} rule applies to all <nav> elements */
  position: static;
  top: auto;
  z-index: auto;
  display: block;
  align-items: initial;
  justify-content: initial;
  height: auto;
  padding: 0;
  /* Our sidebar styles */
  background: var(--solo-bg-elevated, #FFFFFF);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.07);
  overflow: hidden;
}
/* ─── ISOLATED FOCUSED-ROOM SIDEBAR ───
   Filters to the current sub-unit only. Minimalist vertical path with small
   numbered circles (current = Solo Teal, completed = grey tick, locked =
   padlock). A "Topic Hub" back-button at the top is the safety valve. */
#resource-nav { background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 14px; padding: 1.1rem 1.1rem 1.25rem; box-shadow: var(--solo-shadow-1); align-self: start; }
.rn-back-btn { display: inline-flex; align-items: center; gap: .45rem; background: var(--solo-bg); border: 1px solid var(--solo-divider); border-radius: 999px; padding: .42rem .9rem; font-family: var(--solo-font-head); font-size: .78rem; font-weight: 600; color: var(--solo-text); text-decoration: none; margin-bottom: 1.25rem; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.rn-back-btn:hover { border-color: var(--solo-mastery); color: var(--solo-mastery-deep); background: var(--solo-bg-elevated, #FFFFFF); }
.rn-back-btn svg { stroke: currentColor; width: 14px; height: 14px; }
.rn-eyebrow { font-family: var(--solo-font-head); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--solo-text-mute); margin: 0 0 .35rem; }
.rn-subunit-title { font-family: var(--solo-font-head); font-size: 1.05rem; font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); letter-spacing: -0.01em; margin: 0 0 1rem; line-height: 1.25; }
.rn-path { position: relative; }
.rn-path::before { content: ''; position: absolute; top: 18px; bottom: 18px; left: 11px; width: 2px; background: var(--solo-divider); border-radius: 2px; }
.rn-step { position: relative; display: flex; align-items: center; gap: .65rem; padding: .42rem .35rem; border-radius: 8px; cursor: pointer; text-decoration: none; font-family: var(--solo-font-body); font-size: .85rem; color: var(--solo-text); transition: background .12s ease, color .12s ease; line-height: 1.35; }
.rn-step:hover { background: var(--solo-bg); }
.rn-step-circle { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--solo-bg-elevated, #FFFFFF); border: 2px solid var(--solo-divider); display: inline-flex; align-items: center; justify-content: center; font-family: var(--solo-font-head); font-size: .68rem; font-weight: 700; color: var(--solo-text-mute); position: relative; z-index: 1; transition: all .15s ease; }
.rn-step.is-current .rn-step-circle { background: var(--solo-mastery); border-color: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); box-shadow: 0 0 0 4px rgba(45, 212, 191, .18); }
.rn-step.is-current { color: var(--solo-heading-color, var(--solo-navy)); font-weight: 600; }
.rn-step.is-done .rn-step-circle { background: #94A3B8; border-color: #94A3B8; color: #FFFFFF; }
.rn-step.is-done .rn-step-circle svg { stroke: currentColor; width: 11px; height: 11px; }
.rn-step.is-done { color: var(--solo-text-mute); }
.rn-step.is-locked { opacity: .5; cursor: not-allowed; pointer-events: none; }
.rn-step.is-locked .rn-step-circle svg { stroke: currentColor; width: 11px; height: 11px; color: var(--solo-text-soft); }
.rn-restart-row { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--solo-divider); }
.rn-restart-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-family: var(--solo-font-head); font-size: .75rem; font-weight: 600; color: var(--solo-text-mute); background: none; border: 1px solid var(--solo-divider); border-radius: 8px; padding: .55rem .8rem; cursor: pointer; transition: color .12s ease, border-color .12s ease; }
.rn-restart-btn:hover { color: var(--solo-text); border-color: var(--solo-text-soft); }

/* ─── BREADCRUMB ─── */
.rs-breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-family: var(--solo-font-head); font-size: .78rem; font-weight: 600; margin: 0 0 1rem; }
.rs-breadcrumb a { color: var(--solo-mastery-deep); text-decoration: none; transition: text-decoration-thickness .12s ease; }
.rs-breadcrumb a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rs-breadcrumb-sep { color: var(--solo-text-soft); font-weight: 500; }
.rs-breadcrumb-current { color: #64748B; }

/* ─── HUB-STYLE BANNER (hidden in focused workspace) ─── */
.rs-unit-header { display: none; }

/* ─── SUB-UNIT MASTERED - full-content transition card ─── */
.solo-mastered-card { position: relative; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 22px; padding: 3rem 2.5rem 2.75rem; max-width: 720px; margin: 2rem auto; text-align: center; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); overflow: hidden; }
.solo-mastered-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent 0%, var(--solo-mastery) 50%, transparent 100%); }
.solo-mastered-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 20px; background: var(--solo-mastery-pale); color: var(--solo-mastery-deep); margin-bottom: 1rem; box-shadow: 0 0 0 8px rgba(45,212,191,.12); }
.solo-mastered-card__icon svg { stroke: currentColor; width: 36px; height: 36px; }
.solo-mastered-card__eyebrow { font-family: var(--solo-font-head); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--solo-mastery-deep); margin: 0 0 .45rem; }
.solo-mastered-card__title { font-family: var(--solo-font-head); font-size: clamp(1.6rem, 3.5vw, 2.1rem); font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); letter-spacing: -0.02em; margin: 0 0 .65rem; line-height: 1.15; }
.solo-mastered-card__desc { font-family: var(--solo-font-body); font-size: 1rem; color: var(--solo-text); line-height: 1.6; margin: 0 auto 1.6rem; max-width: 50ch; }
.solo-mastered-card__actions { display: flex; align-items: center; justify-content: center; gap: .65rem; flex-wrap: wrap; }
.solo-mastered-card__btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--solo-font-head); font-weight: 700; font-size: .95rem; padding: .8rem 1.4rem; border-radius: 999px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .12s ease, color .12s ease, border-color .12s ease, transform .1s ease, box-shadow .12s ease; }
.solo-mastered-card__btn--primary { background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); }
.solo-mastered-card__btn--primary:hover { background: var(--solo-mastery-deep); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(45,212,191,.40); }
.solo-mastered-card__btn--ghost { background: transparent; color: var(--solo-text); border-color: var(--solo-divider); }
.solo-mastered-card__btn--ghost:hover { border-color: var(--solo-text-mute); color: var(--solo-heading-color, var(--solo-navy)); background: var(--solo-bg); }
.solo-mastered-card__btn svg { stroke: currentColor; width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 480px) { .solo-mastered-card { padding: 2.25rem 1.4rem 1.85rem; margin: 1rem auto; } .solo-mastered-card__btn { width: 100%; justify-content: center; } }
.rn-restart-btn:hover{background:#fff3cd;border-color:#ffd54f;color:#7a5500;}
/* ── Chemistry sidebar accents ─────────────────────────────────────────
   C1/C2/C3 resource pages were templated from cell-biology-resource.html,
   so they pull in teal (--solo-mastery) accents on the sidebar steps and
   back button. Per the locked brief Chemistry uses Chem Amber. These
   rules sit AFTER the .rn-* declarations so they override them. */
.rn-back-btn { color: var(--solo-mastery-deep, #92400E); }
.rn-back-btn:hover { border-color: var(--solo-mastery-deep, #B45309); color: var(--solo-mastery-deep, #92400E); background: var(--solo-mastery-pale, #FEF3C7); }
.rn-step.is-current .rn-step-circle {
  background: var(--solo-mastery-deep, #B45309);
  border-color: var(--solo-mastery-deep, #B45309);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.18);
}
.rn-step.is-current { color: var(--solo-mastery-deep, #92400E); }
.rn-step.is-done .rn-step-circle { background: var(--solo-mastery, #FCD34D); border-color: var(--solo-mastery, #FCD34D); color: var(--solo-mastery-deep, #92400E); }
/* Inner content-area breadcrumb (.rs-breadcrumb) — chemistry amber. */
.rs-breadcrumb a { color: var(--solo-mastery-deep, #B45309); }
.rs-breadcrumb a:hover { text-decoration-color: var(--solo-mastery-deep, #B45309); }
/* Toggle shown only on mobile */
#rn-toggle{display:none;width:100%;align-items:center;gap:7px;background:var(--solo-bg-elevated, #FFFFFF);border:1px solid var(--border);border-radius:8px;padding:9px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--solo-font-body);color: var(--solo-heading-color, var(--navy));margin-bottom:.75rem;box-sizing:border-box;}

/* ── ERROR SPOT ── */
.es-grid{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0;}
.es-stmt{background:var(--solo-bg-elevated, #FFFFFF);border:2px solid var(--border);border-radius:10px;padding:.75rem 1rem;font-size:14px;line-height:1.5;cursor:pointer;transition:all .18s;user-select:none;}
.es-stmt:hover{border-color:#1E293B;background:var(--solo-bg);}
.es-stmt.selected{border-color:#dc2626;background:#fee2e2;}
.es-stmt.revealed-wrong{border-color:#dc2626;background:#fee2e2;}
.es-stmt.revealed-right{border-color:#22c55e;background:#dcfce7;cursor:default;}
.es-correction{font-size:12.5px;color:#991b1b;margin-top:.4rem;font-style:italic;}

/* ── CROSSWORD ── */
.xw-wrap{max-width:100%;}
.xw-grid-wrap{overflow-x:auto;margin:.75rem 0;}
.xw-table{border-collapse:collapse;margin:0 auto;}
.xw-table td{width:30px;height:30px;padding:0;position:relative;}
.xw-black{background:#1E293B;}
.xw-white{background:white;border:1.5px solid #94a3b8; /* darkmode-ok */}
.xw-white.hl{background:#dbeafe!important;border-color:#3b82f6!important;}
.xw-white.ok{background:#dcfce7!important;border-color:#22c55e!important;}
.xw-white.wrong{background:#fee2e2!important;border-color:#ef4444!important;}
.xw-inp{position:absolute;inset:0;width:100%;height:100%;border:none;background:transparent;text-align:center;font-size:13px;font-weight:700;text-transform:uppercase;font-family:var(--solo-font-body);color:#1E293B;padding:0;padding-top:8px;box-sizing:border-box;cursor:pointer;caret-color:var(--solo-mastery-deep, #B45309);}
.xw-inp:focus{outline:none;background:rgba(42,127,127,.12);}
.xw-num{position:absolute;top:1px;left:1px;font-size:6.5px;font-weight:700;color:#64748b;line-height:1;pointer-events:none;z-index:1;}
.xw-clues-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:.9rem 0;}
.xw-clue-hd{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--solo-mastery-deep, #B45309);margin-bottom:.4rem;padding-bottom:.25rem;border-bottom:2px solid var(--solo-mastery-deep, #B45309);}
.xw-clue{font-size:13px;color: var(--solo-heading-color, var(--navy));padding:.35rem .4rem;border-radius:6px;cursor:pointer;line-height:1.45;margin-bottom:.2rem;}
.xw-clue:hover{background:var(--off-white);}
.xw-clue.active{background:#dbeafe;color:#1e3a8a;font-weight:500;}
.xw-inp.xw-hint-letter{color:#B95F14!important;font-weight:800!important;}
.xw-white.xw-pick{background:#fef3c7!important;border-color:#f59e0b!important;cursor:crosshair!important;animation:xw-pulse .7s ease-in-out infinite alternate;}
@keyframes xw-pulse{from{background:#fef3c7!important;}to{background:#fde68a!important;}}
.xw-hint-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:.6rem 0 .3rem;}
.xw-hbtn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1.5px solid var(--border);border-radius:7px;font-size:12.5px;font-weight:600;font-family:var(--solo-font-body);cursor:pointer;transition:all .12s;background:var(--solo-bg-elevated, #FFFFFF);color: var(--solo-heading-color, var(--navy));}
.xw-hbtn:hover:not(:disabled){background:var(--off-white);border-color:var(--navy);}
.xw-hbtn:disabled{opacity:.35;cursor:not-allowed;}
.xw-hbtn-count{font-size:11px;font-weight:400;color:var(--text-mid);margin-left:2px;}
.xw-pick-msg{font-size:13px;color:#92400e;font-weight:600;padding:.35rem .6rem;background:#fef3c7;border-radius:6px;border:1px solid #f59e0b;margin:.3rem 0;display:none;}
.xw-clue-phase2{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--solo-mastery-deep, #B45309);margin-left:.4rem;background:rgba(42,127,127,.1);border-radius:4px;padding:1px 5px;}
@media(max-width:560px){.xw-clues-wrap{grid-template-columns:1fr;}}

/* ── VENN DIAGRAM ── */
.vd-pool-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-mid);width:100%;margin-bottom:6px;}
.vd-pool-wrap{display:flex;flex-wrap:wrap;gap:8px;background:var(--off-white);border:2px dashed var(--border);border-radius:10px;padding:10px;margin-bottom:1rem;}
.vd-pool{display:flex;flex-wrap:wrap;gap:8px;min-height:30px;width:100%;}
.vd-chip{padding:7px 13px;background:var(--solo-bg-elevated, #FFFFFF);border:2px solid var(--border);border-radius:8px;font-size:13px;cursor:pointer;color: var(--solo-heading-color, var(--navy));user-select:none;transition:all .12s;}
.vd-chip:hover{border-color:var(--solo-mastery-deep, #B45309);}
.vd-chip.sel{border-color:var(--solo-mastery-deep, #B45309);background:#e8f7f4;}
.vd-chip.ok{background:#D8F0E0;border-color:var(--solo-mastery-deep, #B45309);cursor:default;}
.vd-chip.bad{background:#FDDCDC;border-color:#e05353;cursor:default;}
.vd-venn{position:relative;width:100%;height:280px;margin:.5rem 0 .75rem;}
.vd-circle{position:absolute;width:64%;top:0;bottom:0;border-radius:50%;pointer-events:none;z-index:0;}
.vd-circle-l{left:0;background:rgba(24,90,168,.1);border:3px solid rgba(24,90,168,.55);}
.vd-circle-r{right:0;background:rgba(185,95,20,.1);border:3px solid rgba(185,95,20,.55);}
.vd-vlbl{position:absolute;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;pointer-events:none;z-index:3;line-height:1.35;text-align:center;transform:translate(-50%,-50%);}
.vd-vlbl-l{left:18%;top:50%;color:rgba(24,90,168,.6);}
.vd-vlbl-c{left:50%;top:50%;color:rgba(42,127,127,.75);}
.vd-vlbl-r{left:82%;top:50%;color:rgba(185,95,20,.65);}
.vd-drop{position:absolute;z-index:2;display:flex;flex-wrap:wrap;gap:4px;padding:6px;transition:background .15s;}
/* All three zones: transparent rect; shape lives on ::before so chips are never clipped */
.vd-drop-l,.vd-drop-r,.vd-drop-c{background:transparent;overflow:visible;}
.vd-drop-l,.vd-drop-r{align-content:center;justify-content:center;}
.vd-drop-l::before,.vd-drop-r::before,.vd-drop-c::before{
  content:'';position:absolute;inset:0;background:transparent;
  pointer-events:none;transition:background .15s;}
/* Left crescent - zone covers full left ellipse (0–65% of container).
   Polygon traced clockwise: outer-right curve → inner curve → outer-left curve back.
   Points computed from: left-ellipse right-boundary = 0.32+0.32√(1−u²),
   inner (left-side of right ellipse) = 0.68−0.32√(1−u²), converted to zone-% = x/0.65 */
.vd-drop-l::before{clip-path:polygon(
  49%  0%,  71%  5%,  77%  9%,
  65% 20%,  60% 30%,  56% 40%,  55% 50%,  56% 60%,  60% 70%,  65% 80%,
  77% 91%,  71% 95%,  49% 100%,
  28% 95%,  20% 90%,  10% 80%,   4% 70%,   1% 60%,   0% 50%,
   1% 40%,   4% 30%,  10% 20%,  20% 10%,  28%  5%);}
/* Right crescent - zone covers full right ellipse (35–100% of container).
   Mirror logic: inner = right-side of left ellipse = (0.32+0.32√(1−u²)−0.35)/0.65,
   outer-left = (0.68−0.32√(1−u²)−0.35)/0.65, outer-right = (0.68+0.32√(1−u²)−0.35)/0.65 */
.vd-drop-r::before{clip-path:polygon(
  51%  0%,  29%  5%,  23%  9%,
  35% 20%,  41% 30%,  44% 40%,  45% 50%,  44% 60%,  41% 70%,  35% 80%,
  23% 91%,  29% 95%,  51% 100%,
  72% 95%,  80% 90%,  90% 80%,  96% 70%,  99% 60%, 100% 50%,
  99% 40%,  96% 30%,  90% 20%,  80% 10%,  72%  5%);}
/* Centre lens - same as before */
.vd-drop-c{justify-content:center;align-content:center;}
.vd-drop-c::before{background:rgba(42,127,127,.06);clip-path:polygon(
  50%  1%,  60%  5%,  69% 10%,  82% 20%,  90% 30%,
  95% 40%,  97% 50%,  95% 60%,  90% 70%,  82% 80%,
  69% 90%,  60% 95%,  50% 99%,  40% 95%,  31% 90%,
  18% 80%,  10% 70%,   5% 60%,   3% 50%,   5% 40%,
  10% 30%,  18% 20%,  31% 10%,  40%  5%);}
/* Drag-over highlights use each circle's own colour */
.vd-drop-l.drag-over::before{background:rgba(24,90,168,.15);}
.vd-drop-r.drag-over::before{background:rgba(185,95,20,.15);}
.vd-drop-c.drag-over::before{background:rgba(42,127,127,.22);}
/* Positions: left/right cover their full ellipse; centre on top (z-index) */
.vd-drop-l{left:0;top:0;bottom:0;right:35%;}
.vd-drop-c{left:35%;right:35%;top:9%;bottom:9%;z-index:3;}
.vd-drop-r{left:35%;top:0;bottom:0;right:0;}
.vd-chip.vd-placed{font-size:11px;padding:4px 8px;}
.vd-chip[draggable="true"]{cursor:grab;}
.vd-chip.dragging{opacity:.35;cursor:grabbing;}
.vd-pool-wrap.drag-over{border-color:var(--solo-mastery-deep, #B45309);background:rgba(42,127,127,.05);}
.vd-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:.25rem 0 .75rem;}
.vd-btn-sm{background:none;border:1.5px solid var(--border);color:var(--text-mid);border-radius:7px;padding:5px 12px;font-size:12px;font-family:var(--solo-font-body);cursor:pointer;transition:all .12s;}
.vd-btn-sm:hover:not(:disabled){background:var(--off-white);border-color:var(--navy);color: var(--solo-heading-color, var(--navy));}
.vd-btn-sm:disabled{opacity:.35;cursor:not-allowed;}
@media(max-width:500px){.vd-venn{height:340px;}}

/* ── IDENTIFY ME ── */
.im-round-badge{display:inline-block;background:var(--navy);color:white;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:4px 12px;border-radius:20px;margin-bottom:.75rem;}
.im-round-badge-r3{background:#B95F14;}
.im-stage{display:flex;gap:1rem;align-items:flex-start;margin:.5rem 0 .75rem;}
.im-avatar{width:120px;min-width:120px;flex-shrink:0;}
.im-avatar svg{width:100%;height:auto;}
.im-avatar-blur{filter:blur(8px);transition:filter .4s;}
.im-bubble-wrap{flex:1;background:var(--off-white);border:2px solid var(--border);border-radius:12px;padding:.75rem 1rem;position:relative;}
.im-bubble-wrap::before{content:'';position:absolute;left:-12px;top:24px;border:6px solid transparent;border-right-color:var(--border);}
.im-bubble-wrap::after{content:'';position:absolute;left:-9px;top:25px;border:5px solid transparent;border-right-color:var(--off-white);}
.im-name{font-size:13px;font-weight:700;color: var(--solo-heading-color, var(--navy));font-style:italic;margin-bottom:3px;}
.im-common{font-weight:400;font-style:normal;color:var(--text-mid);font-size:12px;}
.im-intro-txt{font-size:13px;color: var(--solo-heading-color, var(--navy));margin-bottom:.4rem;line-height:1.55;}
.im-clues-list{display:flex;flex-direction:column;gap:.3rem;margin-top:.25rem;}
.im-clue{font-size:13px;color: var(--solo-heading-color, var(--navy));line-height:1.5;padding:.3rem .5rem;background:var(--solo-bg-elevated, #FFFFFF);border-radius:6px;border:1px solid var(--border);animation:im-pop .2s ease;}
@keyframes im-pop{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.im-clue-num{font-weight:700;color:var(--solo-mastery-deep, #B45309);margin-right:.35rem;}
.im-ctrl{margin:.5rem 0;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.im-guess-btn{padding:9px 20px;border:2px solid var(--border);border-radius:8px;font-size:13px;font-family:var(--solo-font-body);cursor:pointer;font-weight:600;transition:all .12s;}
.im-guess-pro{background:#D4E8FF;border-color:#185AA8;color:#1E293B;}
.im-guess-pro:hover{background:#185AA8;color:white;}
.im-guess-eu{background:#FFF0E0;border-color:#B95F14;color:#7B3A0A;}
.im-guess-eu:hover{background:#B95F14;color:white;}
.im-result-correct{background:#D8F0E0;border:1px solid var(--solo-mastery-deep, #B45309);color:#1a5c3a;border-radius:8px;padding:.65rem 1rem;font-size:13.5px;line-height:1.6;margin:.5rem 0;}
.im-result-wrong{background:#FDDCDC;border:1px solid #e05353;color:#7a2020;border-radius:8px;padding:.65rem 1rem;font-size:13.5px;line-height:1.6;margin:.5rem 0;}
.im-summary{background:var(--off-white);border:2px solid var(--border);border-radius:10px;padding:1rem 1.25rem;}
.im-summary-title{font-size:15px;font-weight:700;color: var(--solo-heading-color, var(--navy));margin-bottom:.75rem;}
.im-summary-row{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--border);font-size:13.5px;color: var(--solo-heading-color, var(--navy));}
.im-summary-row:last-of-type{border-bottom:none;}
.im-ok{color:#1a7a4a;font-weight:600;}
.im-bad{color:#c0392b;font-weight:600;}
@media(max-width:480px){.im-stage{flex-direction:column;}.im-avatar{width:80px;min-width:80px;}}

/* ── SPEAK BUTTON ── */
.speak-btn{background:none;border:none;cursor:pointer;padding:2px 5px;opacity:.45;transition:opacity .15s;line-height:1;vertical-align:middle;font-size:13px;}
.speak-btn:hover{opacity:1;}
.vt-opt-row{display:flex;align-items:center;gap:4px;margin-bottom:9px;}
.vt-opt-row .vt-opt{flex:1;margin-bottom:0;}

/* Cogs: falls back to bottom-right on narrower screens */
@media(max-width:1160px){#cogs-wrap{left:auto;right:14px;}}
/* Mobile: single-column, sidebar behind toggle */
@media(max-width:840px){
  #resource-body{grid-template-columns:1fr;padding:.75rem 1rem 6rem;} /* extra bottom so Cogs doesn't cover Continue */
  #resource-nav{display:none;}
  #resource-nav.open{display:block;}
  #rn-toggle{display:flex;}
  /* Cogs: fade to 60% opacity when no bubble is showing - less intrusive over content */
  #cogs-wrap{align-items:flex-end;opacity:.6;transition:opacity .2s;}
  #cogs-wrap:has(#cogs-bubble.vis){opacity:1;}
  #cogs-bubble{max-width:min(220px, calc(100vw - 30px));}
  /* Sequence up/down buttons: larger touch target */
  .seq-btn{width:36px;height:36px;font-size:14px;}
  .rpo-mv{padding:6px 10px;font-size:13px;}
}
@media(max-width:600px){
  .rs-card{padding:1.25rem;}
  .sort-cols{grid-template-columns:1fr!important;}
  .zor-grid{gap:8px;}
  /* Sort cards: larger pool cards and drop zones for touch */
  .sc{padding:10px 14px;font-size:14px;}
  .sort-col-bd{min-height:120px;padding:10px;}
  .sort-pool{gap:8px;}
  /* Venn placed chips: slightly larger for touch */
  .vd-chip.vd-placed{font-size:12px;padding:6px 10px;}
}
@media(max-width:480px){#access-bar{top:49px;}#cogs-char{width:58px;}#cogs-bubble{max-width:min(200px,calc(100vw - 28px));font-size:13px;}}

/* ── Touch :active mirrors for hover states (devices with no hover) ── */
@media(hover:none){
  .vt-opt:active:not(:disabled){border-color:var(--solo-mastery-deep, #B45309);background:#f0faf7;}
  .zor-option:active{border-color:var(--teal,var(--solo-mastery-deep, #B45309));background:rgba(42,127,127,.08);}
  .zor-card:active{filter:brightness(.93);}
  .es-stmt:active:not(.revealed-right):not(.revealed-wrong){border-color:#1E293B;background:var(--solo-bg);}
  .dr-opt:active:not([disabled]){border-color:#3b82f6;background:#dbeafe;}
  .dr-cell.available:active{background:#bfdbfe;transform:scale(1.05);}
  .sz-opt:active:not([disabled]){border-color:#3b82f6;background:#dbeafe;}
  .rv-safety-opt:active:not(:disabled){border-color:#6366f1;background:#eef2ff;}
  .im-guess-pro:active{background:#185AA8;color:white;}
  .im-guess-eu:active{background:#B95F14;color:white;}
  .sort-col-bd:active{background:#f5f5f5;}
  .rn-item.clickable:active{background:var(--off-white);color: var(--solo-heading-color, var(--navy));}
  .rn-group-hd:active{background:var(--off-white);}
  .xw-clue:active{background:var(--off-white);}
  .sd-show-all-btn:active{background:var(--off-white);color: var(--solo-heading-color, var(--navy));}
  .rs-btn:active{background:#0f2548;}
  .rs-btn-teal:active{background:var(--solo-mastery-deep, #92400E);}
  .rpo-item:active{border-color:var(--solo-mastery-deep, #B45309);}
  .rpo-mv:active:not([disabled]){background:#e2e8f0;border-color:#94a3b8;}
  .seq-btn:active:not(:disabled){background:var(--off-white);}
  .vd-chip:active:not(.ok):not(.bad){border-color:var(--solo-mastery-deep, #B45309);}
  .rv-equip:active:not(.rv-equip-used){border-color:#38bdf8;background:#3b82f6;transform:translateY(-2px);}
  .rv-mount-slide-drag:active{box-shadow:0 4px 12px rgba(59,130,246,.25);border-color:#3b82f6;}
  .rv-label-tag:active:not(.done){border-color:#6366f1;background:#eef2ff;}
}

/* ── MITOSIS STAGE EXPLORER ── */
#mit-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start;}
@media(max-width:600px){#mit-layout{grid-template-columns:1fr;}}

/* ── DICE REVIEW GAME ── */
.dr-wrap{max-width:520px;margin:0 auto;}
.dr-status{text-align:center;font-size:13px;color:var(--text-mid);margin-bottom:.5rem;}
.dr-progress{height:6px;background:var(--border);border-radius:3px;margin-bottom:1.4rem;overflow:hidden;}
.dr-progress-fill{height:100%;background:var(--solo-mastery-deep, #B45309);border-radius:3px;transition:width .4s;}
.dr-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:1.4rem;}
.dr-cell{aspect-ratio:1;border-radius:7px;border:2px solid #e2e8f0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;color:#cbd5e1;font-weight:700;transition:all .18s;position:relative;background:#f8fafc; /* darkmode-ok */ user-select:none;}
.dr-cell-coord{font-size:8px;color:#d1d5db;position:absolute;top:2px;left:3px;line-height:1;font-weight:600;}
.dr-cell.available{background:#dbeafe;border-color:#3b82f6;cursor:pointer;animation:drPulse .9s ease-in-out infinite;}
.dr-cell.available:hover{background:#bfdbfe;transform:scale(1.07);}
.dr-cell.answering{background:#fef9c3;border-color:#f59e0b;color:#92400e;box-shadow:0 0 0 3px rgba(245,158,11,.25);}
.dr-cell.correct{background:#dcfce7;border-color:#22c55e;color:#166534;}
.dr-cell.wrong{background:#fff7ed;border-color:#f97316;color:#9a3412;}
.dr-cell.done-ok{background:#dcfce7;border-color:#22c55e;display:flex;align-items:center;justify-content:center;}
.dr-cell.done-ok::after{content:'✔';font-size:1.6rem;color:#22c55e;font-weight:900;line-height:1;filter:drop-shadow(0 1px 2px rgba(34,197,94,.35));}
.dr-cell.come-back{background:#fef9c3;border-color:#f59e0b;border-width:2.5px;display:flex;align-items:center;justify-content:center;}
.dr-cell.come-back::after{content:'?';font-size:1.5rem;color:#d97706;font-weight:900;line-height:1;font-family:var(--solo-font-head);}
@keyframes drPulse{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.5)}50%{box-shadow:0 0 0 6px rgba(59,130,246,0)}}
.dr-dice-row{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1rem;}
.dr-die-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;}
.dr-die-label{font-size:10px;font-weight:700;color:var(--text-mid);text-transform:uppercase;letter-spacing:.05em;}
.dr-die{width:54px;height:54px;cursor:pointer;filter:drop-shadow(0 2px 6px rgba(0,0,0,.14));transition:transform .1s;}
.dr-die:active{transform:scale(.92);}
.dr-die.rolling{animation:drSpin .1s linear infinite;}
@keyframes drSpin{from{transform:rotate(-15deg)scale(1.1)}to{transform:rotate(15deg)scale(1.1)}}
.dr-roll-btn{background:var(--navy);color:white;border:none;border-radius:10px;padding:.65rem 1.8rem;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--solo-font-body);transition:background .15s;}
.dr-roll-btn:hover{background:#0F172A;}
.dr-roll-btn:disabled{background:#94a3b8;cursor:default;}
.dr-instr{text-align:center;font-size:13px;color:var(--text-mid);margin-bottom:.75rem;min-height:1.3em;line-height:1.4;}
.dr-panel{background:#f0f9ff;border:2px solid #3b82f6;border-radius:12px;padding:1.1rem 1.25rem;margin-top:.75rem;animation:rsIn .2s ease;}
.dr-clue-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#3b82f6;margin-bottom:.3rem;}
.dr-clue{font-size:15px;font-weight:600;color: var(--solo-heading-color, var(--navy));margin-bottom:.9rem;line-height:1.45;}
.dr-opts{display:flex;flex-direction:column;gap:6px;}
.dr-opt{background:var(--solo-bg-elevated, #FFFFFF);border:2px solid #e2e8f0;border-radius:8px;padding:.55rem .85rem;font-size:13px;text-align:left;cursor:pointer;font-family:var(--solo-font-body);transition:all .15s;line-height:1.4;}
.dr-opt:hover:not([disabled]){border-color:#3b82f6;background:#dbeafe;}
.dr-opt.correct{border-color:#22c55e!important;background:#dcfce7!important;color:#166534;font-weight:600;}
.dr-opt.wrong{border-color:#ef4444!important;background:#fee2e2!important;color:#991b1b;}
.dr-feedback{margin-top:.8rem;padding:.6rem .8rem;border-radius:7px;font-size:13px;font-weight:600;text-align:center;}
.dr-feedback.ok{background:#dcfce7;color:#166534;}
.dr-feedback.no{background:#fff7ed;color:#9a3412;}
.dr-complete{text-align:center;padding:1.75rem 1rem 1.5rem;background:linear-gradient(135deg,#dcfce7,#d1fae5);border-radius:12px;border:2px solid #22c55e;margin-top:1rem;}
.dr-complete-title{font-family:var(--solo-font-head);font-size:1.35rem;color:#166534;margin-bottom:.4rem;}
.dr-complete-sub{font-size:13.5px;color:#166534;opacity:.85;}

/* ── SCOPE ZOOM ── */
.sz-bench{text-align:center;padding:2rem 1rem;background:#f0f9ff;border:2px dashed #3b82f6;border-radius:12px;margin-bottom:1rem;}
.sz-eye-icon{font-size:3rem;margin-bottom:.75rem;display:block;}
.sz-view{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:flex-start;margin-top:.75rem;}
.sz-eyepiece{flex:0 0 260px;}
.sz-svg{width:100%;border-radius:50%;display:block;filter:drop-shadow(0 4px 18px rgba(0,0,0,0.3));}
.sz-info{flex:1;min-width:200px;}
.sz-badge{display:inline-block;background:#1E293B;color:white;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:.7rem;}
.sz-desc{font-size:13.5px;color:var(--text-mid);margin-bottom:.5rem;line-height:1.6;}
.sz-list{font-size:13.5px;color:var(--text-mid);line-height:2;padding-left:1.25rem;margin:0;}
.sz-calcs{margin-top:.5rem;}
.sz-q-block{background:var(--solo-bg);border:1px solid var(--border);border-radius:10px;padding:.9rem 1rem;margin-bottom:.75rem;}
.sz-q-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--solo-mastery-deep, #B45309);margin-bottom:.3rem;}
.sz-q-text{font-size:14px;color: var(--solo-heading-color, var(--navy));font-weight:500;margin-bottom:.4rem;line-height:1.5;}
.sz-q-hint{font-size:12px;color:var(--text-mid);font-style:italic;margin-bottom:.5rem;}
.sz-inp{width:120px;padding:6px 10px;border:2px solid var(--border);border-radius:7px;font-size:14px;font-family:var(--solo-font-body);}
.sz-inp:focus{outline:none;border-color:var(--solo-mastery-deep, #B45309);}
/* On-screen calculator - Zen Lab. White card, charcoal display, mastery teal "Use" CTA. */
.oe-calc-wrap{background:var(--solo-bg-elevated, #FFFFFF);border:1px solid var(--solo-divider);border-radius:14px;padding:.7rem;margin:.5rem 0;width:230px;box-shadow:var(--solo-shadow-2);}
.oe-calc-display{background:var(--solo-bg);color: var(--solo-heading-color, var(--solo-navy));font-family:'JetBrains Mono','DM Mono',ui-monospace,monospace;font-weight:700;font-size:1.1rem;text-align:right;padding:.45rem .65rem;border-radius:8px;margin-bottom:.5rem;min-height:2.1rem;word-break:break-all;line-height:1.3;border:1px solid var(--solo-divider);}
.oe-calc-display .oe-calc-expr{font-size:.7rem;font-weight:500;color:var(--solo-text-mute);display:block;min-height:.9rem;font-family:var(--solo-font-body);}
.oe-calc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.32rem;}
.oe-calc-btn{background:var(--solo-bg-elevated, #FFFFFF);color: var(--solo-heading-color, var(--solo-navy));border:1px solid var(--solo-divider);border-radius:8px;padding:.45rem .2rem;font-size:.92rem;font-family:var(--solo-font-head);font-weight:600;cursor:pointer;transition:background .1s,transform .08s;}
.oe-calc-btn:hover{background:var(--solo-bg);}
.oe-calc-btn:active{transform:translateY(1px);background:var(--solo-divider);}
.oe-calc-btn.op{background:var(--solo-bg);color:var(--solo-mastery-deep);border-color:rgba(45,212,191,0.4);font-size:.78rem;}
.oe-calc-btn.op:hover{background:var(--solo-mastery-pale);}
.oe-calc-btn.op-add{background:var(--solo-bg);color:var(--solo-mastery-deep);border-color:rgba(45,212,191,0.4);font-size:.78rem;}
.oe-calc-btn.op-add:hover{background:var(--solo-mastery-pale);}
.oe-calc-btn.op-sub{background:var(--solo-bg);color:var(--solo-mastery-deep);border-color:rgba(45,212,191,0.4);font-size:.78rem;}
.oe-calc-btn.op-sub:hover{background:var(--solo-mastery-pale);}
.oe-calc-btn.eq{background:var(--solo-mastery);color: var(--solo-heading-color, var(--solo-navy));border-color:transparent;grid-column:span 2;font-size:.85rem;font-weight:700;}
.oe-calc-btn.eq:hover{background:var(--solo-mastery-deep);color: var(--solo-heading-color, var(--solo-navy));}
.oe-calc-btn.clr{background:#FEE2E2;color:#991B1B;border-color:#FECACA;}
.oe-calc-btn.clr:hover{background:#FECACA;}
/* Calculator panel toggle on Magnification page */
.calc-toggle-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(99,102,241,0.10);border:1.5px solid #a5b4fc;color:#3730a3;border-radius:18px;padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--solo-font-body);transition:background .15s;}
.calc-toggle-btn:hover{background:rgba(99,102,241,0.20);}
#calc-panel{display:none;margin:.6rem 0 1rem;}
#calc-panel.open{display:flex;justify-content:center;animation:rsIn .25s ease;}
.calc-inp.calc-targeted{border-color:#6366f1!important;box-shadow:0 0 0 3px rgba(99,102,241,0.18);background:#eef2ff;}
.sz-q-opts{display:flex;flex-direction:column;gap:6px;margin-top:.5rem;}
.sz-opt{background:var(--solo-bg-elevated, #FFFFFF);border:2px solid #e2e8f0;border-radius:8px;padding:.5rem .85rem;font-size:13px;text-align:left;cursor:pointer;font-family:var(--solo-font-body);transition:all .15s;}
.sz-opt:hover:not([disabled]){border-color:#3b82f6;background:#dbeafe;}
.sz-opt.correct{border-color:#22c55e!important;background:#dcfce7!important;font-weight:600;}
.sz-opt.wrong{border-color:#ef4444!important;background:#fee2e2!important;}
/* Tutorial slideshow */
.sz-tut-title{font-size:.98rem;font-weight:700;color: var(--solo-heading-color, var(--navy));margin-bottom:.5rem;line-height:1.35;}
.sz-tut-body{font-size:13.5px;color:var(--text-mid);line-height:1.7;}
.sz-tut-card{background:var(--solo-bg-elevated, #FFFFFF);border:1.5px solid #e0e7ff;border-radius:10px;padding:.65rem .9rem;margin:.5rem 0;font-size:13px;line-height:2;color: var(--solo-heading-color, var(--navy));}
.sz-tut-prac{background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;padding:.6rem .85rem;margin:.5rem 0;}
.sz-tut-q{font-size:13.5px;font-weight:600;color: var(--solo-heading-color, var(--navy));margin-bottom:.45rem;line-height:1.4;}
.sz-tut-inp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:.4rem;}
.sz-tut-dots{display:flex;gap:5px;align-items:center;}
.sz-tut-dot{width:8px;height:8px;border-radius:50%;background:#e2e8f0;display:inline-block;}
.sz-tut-dot.active{background:#6366f1;}
.sz-tut-dot.done{background:#22c55e;}
.sz-formula-rows{display:flex;flex-direction:column;gap:.3rem;margin:.45rem 0;}
.sz-formula-row{background:var(--solo-bg-elevated, #FFFFFF);border:1.5px solid #c7d2fe;border-radius:8px;padding:.3rem .65rem;font-size:13px;color:#1e1b4b;}
.sz-step{display:flex;gap:.4rem;margin:.1rem 0;font-size:13px;align-items:baseline;}
.sz-step-n{color:#6366f1;font-weight:700;min-width:20px;flex-shrink:0;}
.sz-step-t{color: var(--solo-heading-color, var(--navy));line-height:1.6;}
.sz-hl{background:#fef9c3;border-radius:3px;padding:1px 4px;font-weight:600;}
/* Drawing stage enhancements */
.rv-step-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#6366f1;margin:.9rem 0 .4rem;display:flex;align-items:center;gap:.4rem;}
.rv-step-head::before{content:'';display:inline-block;width:20px;height:2px;background:#6366f1;}
.rv-scale-panel{background:#f5f3ff;border:1.5px solid #e0e7ff;border-radius:10px;padding:.75rem 1rem;margin-bottom:.7rem;}
.rv-scale-row{font-size:13.5px;color: var(--solo-heading-color, var(--navy));margin-bottom:.4rem;}
.rv-scale-card{background:var(--solo-bg-elevated, #FFFFFF);border:1.5px solid #e0e7ff;border-radius:8px;padding:.6rem .85rem;margin-top:.4rem;font-size:13px;line-height:2;color: var(--solo-heading-color, var(--navy));}
.rv-scale-result{font-weight:700;font-size:14px;color:#4338ca;margin:.2rem 0;}
.rv-scale-bar{background:#eef2ff;border:1.5px solid #c7d2fe;border-radius:7px;padding:.4rem .75rem;font-size:13px;margin-top:.3rem;}
.rv-label-bank{background:var(--solo-bg);border:1.5px solid var(--border);border-radius:10px;padding:.7rem 1rem;margin-top:.6rem;}
.rv-label-tag{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border:1.5px solid #e2e8f0;border-radius:20px;font-size:13px;font-family:var(--solo-font-body);cursor:pointer;background:var(--solo-bg-elevated, #FFFFFF);transition:all .15s;margin:.2rem;}
.rv-label-tag:hover{border-color:#6366f1;background:#eef2ff;}
.rv-label-tag.done{border-color:#22c55e!important;background:#dcfce7!important;font-weight:600;color:#15803d;}
.rv-label-tag.rv-label-active{border-color:#4338ca!important;background:#eef2ff!important;font-weight:700;color:#3730a3;box-shadow:0 0 0 2px #818cf8;}
.rv-label-note{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border:1.5px dashed #cbd5e1;border-radius:20px;font-size:12.5px;color:#64748b;margin:.2rem;}
#rv-grid-ov{position:absolute;top:20px;left:20px;width:480px;height:320px;pointer-events:none;display:none;background-image:linear-gradient(rgba(99,102,241,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.12) 1px,transparent 1px),linear-gradient(rgba(99,102,241,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.22) 1px,transparent 1px);background-size:40px 40px,40px 40px,200px 200px,200px 200px;}
#rv-grid-ov.on{display:block;}
/* Safety quiz elements */
.rv-safety-opt{display:block;width:100%;text-align:left;padding:.55rem .85rem;border:1.5px solid #e2e8f0;border-radius:8px;background:var(--solo-bg-elevated, #FFFFFF);font-family:var(--solo-font-body);font-size:13.5px;color: var(--solo-heading-color, var(--navy));cursor:pointer;transition:all .15s;margin-bottom:.35rem;}
.rv-safety-opt:hover:not(:disabled){border-color:#6366f1;background:#eef2ff;}
.rv-safety-opt:disabled{cursor:default;}
.rv-safety-opt.rv-safety-correct{border-color:#22c55e!important;background:#dcfce7!important;color:#15803d!important;font-weight:700;}
.rv-safety-opt.rv-safety-wrong{border-color:#ef4444!important;background:#fee2e2!important;color:#dc2626!important;}
.rv-safety-tf{display:flex;gap:.6rem;}
.rv-safety-tf .rv-safety-opt{flex:1;text-align:center;font-weight:700;font-size:14px;}
.rv-safety-prog{display:flex;gap:6px;justify-content:center;margin:.3rem 0 .6rem;}
.rv-safety-prog span{display:inline-block;width:11px;height:11px;border-radius:50%;transition:background .2s;}

/* ── RP2 Osmosis Explorer ───────────────────────────────────────── */
.oe-wrap{max-width:560px;margin:0 auto;}
.oe-cell-stage{background:#f0f9ff;border:2px solid #bae6fd;border-radius:14px;padding:1rem;margin:.75rem 0;position:relative;overflow:hidden;}
.oe-slider-row{display:flex;align-items:center;gap:.75rem;margin:.5rem 0;flex-wrap:wrap;}
.oe-slider-row input[type=range]{flex:1;min-width:160px;accent-color:#6366f1;}
.oe-conc-label{font-size:13px;font-weight:700;color:#1e1b4b;min-width:60px;}
.oe-status{font-size:13.5px;font-weight:600;padding:.4rem .75rem;border-radius:8px;margin:.4rem 0;text-align:center;}
.oe-status.in{background:#dcfce7;color:#15803d;}
.oe-status.out{background:#fee2e2;color:#dc2626;}
.oe-status.balanced{background:#fef3c7;color:#92400e;}
.oe-teach-card{background:var(--solo-bg-elevated, #FFFFFF);border:1.5px solid #c7d2fe;border-radius:12px;padding:.85rem 1rem;margin:.75rem 0;font-size:13.5px;line-height:1.6;color: var(--solo-heading-color, var(--navy));}
.oe-teach-card strong{color:#4338ca;}
.oe-why-panel{background:var(--solo-bg);border:1.5px solid #e2e8f0;border-radius:12px;padding:.85rem 1rem;margin:.6rem 0;}
/* ── RP2 Virtual Lab ────────────────────────────────────────────── */
/* RP2 work area - aligned with RP1's slate lab-bench look so the
   two practicals feel like part of the same product family.
   Stage card, badge, bench gradient, dark slate shelf and equip
   cards all mirror the rv- pattern below for visual consistency. */
.r2-stage{background:var(--solo-bg-elevated, #FFFFFF);border:1.5px solid var(--border);border-radius:14px;padding:1rem 1.1rem;margin:.5rem 0;}
.r2-stage-badge{display:inline-block;background:#e0f2fe;color:#0369a1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:3px 10px;border-radius:20px;margin-bottom:.7rem;}
/* Outer bench frame - subtle dark slate so the inner bench surface
   has something to sit on. */
.r2-bench{background:#1E293B;border-radius:10px;padding:.7rem;position:relative;}
/* Inner bench surface - light gradient + 3D perspective tilt to
   match RP1's .rv-bench-surface. The slight rotateX gives it the
   "looking down at the bench" feel without being disorienting. */
.r2-bench-surface{background:linear-gradient(170deg,#e2e8f0 0%,#f1f5f9 60%,#cbd5e1 100%);border-radius:8px 8px 4px 4px;min-height:120px;padding:.7rem .9rem 1rem;position:relative;box-shadow:inset 0 -6px 16px rgba(0,0,0,0.10),0 6px 16px rgba(0,0,0,.20);}
/* Shelf - dark slate strip at the top with a row of equipment
   cards. Matches RP1's .rv-shelf. */
.r2-shelf{background:#334155;border-radius:8px;padding:.5rem .7rem;margin-bottom:.5rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
/* Equipment card - dark slate body, light border, cyan accent on
   hover. Matches RP1's .rv-equip exactly. */
.r2-equip{display:flex;flex-direction:column;align-items:center;gap:3px;background:#475569;border:2px solid #64748b;border-radius:9px;padding:.45rem .55rem;cursor:pointer;font-size:11px;color:#E2E8F0;font-weight:700;transition:all .12s;min-width:70px;user-select:none;position:relative;}
.r2-equip:hover:not(.used){border-color:#38bdf8;background:#3b82f6;transform:translateY(-2px);}
.r2-equip.used{opacity:.4;cursor:default;border-color:#374151;}
.r2-equip-icon{font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center;height:32px;}
.r2-equip-icon svg{width:32px;height:32px;display:block;filter:drop-shadow(0 1px 2px rgba(15,23,42,.35));}
.r2-equip:hover:not(.used) .r2-equip-icon svg{filter:drop-shadow(0 2px 4px rgba(56,189,248,.45));}
.r2-consequence{background:#fff7ed;border:1.5px solid #fed7aa;border-radius:8px;padding:.5rem .75rem;margin:.4rem 0;font-size:13px;color:#9a3412;}
.r2-tool-prompt{background:#f0f9ff;border:1.5px solid #bae6fd;border-radius:10px;padding:.65rem 1rem;margin:.5rem 0;display:flex;align-items:center;gap:.5rem;}
.r2-data-table{width:100%;border-collapse:collapse;font-size:13px;margin:.5rem 0;}
.r2-data-table th{background:#1e3a5f;color:white;padding:.4rem .6rem;text-align:left;font-weight:600;}
.r2-data-table td{padding:.35rem .6rem;border-bottom:1px solid #e2e8f0;vertical-align:middle;}
.r2-data-table tr:nth-child(even) td{background:var(--solo-bg);}
.r2-data-table input{width:70px;padding:.2rem .35rem;border:1.5px solid #e2e8f0;border-radius:5px;font-size:12.5px;font-family:var(--solo-font-body);text-align:center;}
.r2-data-table input.r2-ok{border-color:#22c55e;background:#dcfce7;}
.r2-data-table input.r2-err{border-color:#ef4444;background:#fee2e2;}
.r2-balance{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin:.5rem auto;width:180px;}
.r2-balance-top{width:140px;height:14px;background:#94a3b8;border-radius:3px 3px 0 0;}
.r2-balance-platform{width:140px;height:22px;background:#cbd5e1;border-radius:4px;display:flex;align-items:center;justify-content:center;}
.r2-balance-display{background:#1e3a5f;color:#4ade80;font-family:'DM Mono',monospace,sans-serif;font-size:1.05rem;font-weight:700;padding:.3rem .75rem;border-radius:6px;letter-spacing:.05em;text-align:center;min-width:90px;}
.r2-balance-tare{background:#475569;color:white;border:none;border-radius:5px;padding:.25rem .65rem;font-size:12px;font-family:var(--solo-font-body);cursor:pointer;margin-top:.2rem;}
.r2-balance-tare:hover{background:#334155;}
.r2-tube-rack{display:flex;gap:.4rem;flex-wrap:wrap;align-items:flex-end;margin:.5rem 0;}
.r2-tube{display:flex;flex-direction:column;align-items:center;gap:.15rem;cursor:pointer;transition:transform .12s;}
.r2-tube.r2-drop-target{cursor:copy;}
.r2-tube.r2-drop-over{transform:translateY(-4px);outline:2px dashed #6366f1;outline-offset:3px;border-radius:4px;}
.r2-tube-label{font-size:10px;font-weight:700;color:#1e3a5f;text-align:center;}
.r2-lbl-pill{display:inline-block;background:#1e3a5f;color:white;font-size:11px;font-weight:700;border-radius:14px;padding:.25rem .65rem;cursor:grab;user-select:none;transition:opacity .15s,transform .12s;}
.r2-lbl-pill:active{cursor:grabbing;transform:scale(1.06);}
.r2-lbl-pill:hover{opacity:.85;}
.r2-tube-glass{width:32px;height:80px;border:2px solid #94a3b8;border-top:none;border-radius:0 0 6px 6px;position:relative;overflow:hidden;background:var(--solo-bg-elevated, #FFFFFF);}
.r2-tube-liquid{position:absolute;bottom:0;left:0;right:0;border-radius:0 0 4px 4px;transition:height .3s;}
.r2-tube-cylinder{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:12px;border-radius:2px;transition:all .5s;}
.r2-cyl-normal{background:linear-gradient(90deg,#f5e6c8,#e8d5a8);}
.r2-cyl-turgid{background:linear-gradient(90deg,#fef3c7,#fde68a);}
.r2-cyl-flaccid{background:linear-gradient(90deg,#e2c89a,#c9a97a);}
.r2-timer{display:flex;flex-direction:column;align-items:center;gap:.35rem;background:#1e3a5f;border-radius:12px;padding:.7rem 1.2rem;margin:.5rem auto;width:fit-content;}
.r2-timer-display{font-family:'DM Mono',monospace,sans-serif;font-size:1.8rem;color:#4ade80;font-weight:700;letter-spacing:.1em;}
.r2-timer-btns{display:flex;gap:.4rem;}
.r2-step-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6366f1;margin:.65rem 0 .3rem;border-bottom:1.5px solid #e0e7ff;padding-bottom:.25rem;}
/* RP2 graph canvas - Zen Lab styling, bigger touch targets */
.r2-graph-wrap{position:relative;display:block;max-width:100%;width:fit-content;margin:0 auto;}
#r2-graph-canvas{border:1.5px solid var(--solo-divider);border-radius:12px;cursor:crosshair;touch-action:none;background:var(--solo-bg-elevated, #FFFFFF);display:block;width:100%;height:auto;max-width:560px;box-shadow:var(--solo-shadow-1);}
.r2-graph-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin:.55rem 0;}
.r2-graph-btns .rs-btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--solo-font-head);font-weight:600;}
.r2-graph-btns .rs-btn svg{stroke:currentColor;width:16px;height:16px;flex-shrink:0;}
/* Iso slider - Zen Lab styling for the final slider */
.r2-iso-slider-wrap{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:var(--solo-bg-elevated, #FFFFFF);border:1px solid var(--solo-divider);border-radius:12px;padding:.85rem 1rem;margin:.5rem 0;box-shadow:var(--solo-shadow-1);}
.r2-iso-slider-wrap input[type="range"]{accent-color:var(--solo-mastery);width:200px;height:24px;}
.r2-iso-readout{font-family:var(--solo-font-head);font-weight:700;color: var(--solo-heading-color, var(--solo-navy));font-size:.95rem;}
.r2-iso-readout strong{color:#DC2626;font-family:var(--solo-font-head);}
/* RP2 exam practice */
.r2e-hero{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:2px solid #6ee7b7;border-radius:16px;padding:1.2rem 1.4rem;margin:.5rem 0 1rem;text-align:center;}
.r2e-q-block{background:var(--solo-bg);border:1.5px solid #e2e8f0;border-radius:10px;padding:.8rem 1rem;margin:.6rem 0;}
.r2e-q-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6366f1;margin-bottom:.35rem;}
.r2e-q-text{font-size:13.5px;color: var(--solo-heading-color, var(--navy));line-height:1.5;margin-bottom:.5rem;}
.hidden{display:none!important;}
/* ── SAFETY MODAL ── */
/* Safety check is now an EMBEDDED inline card (slides down from the
   top of the working area) instead of a fullscreen blocking modal.
   The page underneath stays visible and the student keeps their
   place. Same data path - just a different render. */
#safety-modal{position:fixed;top:68px;left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 16px));z-index:500;background:transparent;padding:0;pointer-events:none;}
#safety-modal:not(.hidden){pointer-events:auto;animation:safetyIn .35s cubic-bezier(0.34,1.56,0.64,1);}
#safety-modal.hidden{display:none;}
#sq-card{background:var(--solo-bg-elevated, #FFFFFF);border:1px solid #FDE68A;border-left:4px solid #D97706;border-radius:14px;padding:1.1rem 1.25rem;width:100%;box-shadow:0 14px 36px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.08);}
@keyframes safetyIn{from{opacity:0;transform:translate(-50%,-12px);}to{opacity:1;transform:translate(-50%,0);}}
#sq-badge{display:inline-block;background:#fff3cd;color:#92400e;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:3px 10px;border-radius:20px;margin-bottom:.75rem;}
#sq-hazard{font-size:1.05rem;font-weight:700;color: var(--solo-heading-color, var(--navy));margin-bottom:.35rem;}
#sq-context{font-size:13px;color:var(--text-mid);margin:0 0 .85rem;line-height:1.5;}
#sq-q-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--solo-mastery-deep, #B45309);margin-bottom:.35rem;}
#sq-q{font-size:15px;font-weight:600;color: var(--solo-heading-color, var(--navy));margin-bottom:.9rem;line-height:1.5;}
.sq-opt{width:100%;text-align:left;background:var(--solo-bg-elevated, #FFFFFF);border:2px solid #e2e8f0;border-radius:10px;padding:.65rem .9rem;font-size:13.5px;cursor:pointer;font-family:var(--solo-font-body);display:block;margin-bottom:.4rem;transition:border-color .12s,background .12s;color: var(--solo-heading-color, var(--navy));}
.sq-opt:hover:not([disabled]){border-color:var(--solo-mastery-deep, #B45309);background:#f0fafa;}
.sq-opt[disabled]{cursor:default;}
.sq-opt.sq-correct{border-color:#22c55e!important;background:#dcfce7!important;font-weight:600;}
.sq-opt.sq-wrong{border-color:#ef4444!important;background:#fee2e2!important;}
#sq-explanation{font-size:13px;background:#f0fdf4;border:1px solid #d1fae5;border-radius:8px;padding:.7rem 1rem;margin:.5rem 0;line-height:1.6;color:#166534;}
/* ── RAG CONFIDENCE MODAL (Phase A6) ── */
#rag-modal{position:fixed;inset:0;background:rgba(10,20,40,0.72);z-index:500;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);padding:1rem;}
#rag-modal.hidden{display:none;}
#rag-card{background:var(--solo-bg-elevated, #FFFFFF);border-radius:16px;padding:1.6rem 1.5rem;max-width:480px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.3);animation:rsIn .25s ease;text-align:center;}
#rag-badge{display:inline-block;background:#e0f2fe;color:#075985;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:3px 10px;border-radius:20px;margin-bottom:.75rem;}
#rag-prompt{font-size:1.05rem;font-weight:700;color: var(--solo-heading-color, var(--navy));margin-bottom:.45rem;line-height:1.4;}
#rag-context{font-size:13px;color:var(--text-mid);margin:0 0 1.05rem;line-height:1.55;}
.rag-opt-row{display:grid;grid-template-columns:1fr;gap:.55rem;margin-top:.3rem;}
.rag-opt{padding:.7rem 1rem;border-radius:10px;border:2px solid;font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--solo-font-body);text-align:left;transition:transform .12s,box-shadow .12s,filter .12s;display:flex;align-items:center;gap:.7rem;}
.rag-opt:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,0.10);filter:brightness(1.02);}
.rag-opt-emoji{font-size:1.4rem;flex-shrink:0;}
.rag-opt-green{background:#dcfce7;border-color:#86efac;color:#166534;}
.rag-opt-yellow{background:#fef9c3;border-color:#fde68a;color:#854d0e;}
.rag-opt-red{background:#fee2e2;border-color:#fca5a5;color:#991b1b;}
/* ── READING OVERLAY (Phase A8.9) - coloured-sheet effect over the WORKING AREA only ──
   Centred rectangle that sits above the content, with mix-blend-mode multiply.
   Stays below the top blue nav bar, doesn't cover side sidebars / progress trackers. */
#reading-overlay {
  position: fixed;
  top: 60px;                                     /* below the top nav */
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, calc(100vw - 40px));        /* rectangle around the working area */
  bottom: 0;                                      /* extends to viewport bottom */
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: multiply;
  background: var(--solo-bg-elevated, #FFFFFF);
  transition: background 0.2s ease;
}
@media (max-width: 768px) {
  /* On mobile, overlay just covers the working area below the nav */
  #reading-overlay { width: calc(100vw - 16px); }
}
/* ── RP SLIDES ── */
/* (no extra CSS needed - uses existing rs-card, rs-btn) */
/* ── RP ORDER ── */
.rpo-item{display:flex;align-items:center;gap:.75rem;background:var(--solo-bg);border:2px solid var(--border);border-radius:10px;padding:.65rem .85rem;cursor:default;transition:border-color .15s,background .15s,transform .12s,opacity .15s;}
.rpo-item:hover:not(.rpo-correct):not(.rpo-wrong){border-color:var(--solo-mastery-deep, #B45309);}
.rpo-item.rpo-correct{border-color:#22c55e!important;background:#dcfce7!important;}
.rpo-item.rpo-wrong{border-color:#ef4444!important;background:#fee2e2!important;}
.rpo-item.rpo-dragging{opacity:.35;border-style:dashed;border-color:#6366f1;}
.rpo-item.rpo-drag-over{border-color:#6366f1;background:#eef2ff;transform:translateY(-2px);}
.rpo-handle{color:#94a3b8;cursor:grab;flex-shrink:0;user-select:none;font-size:1.1rem;line-height:1;padding:2px 4px 2px 0;touch-action:none;}
.rpo-handle:active{cursor:grabbing;}
.rpo-mv{background:transparent;border:1px solid var(--border);border-radius:5px;padding:2px 6px;font-size:11px;cursor:pointer;color:var(--text-mid);line-height:1.2;}
.rpo-mv:hover:not([disabled]){background:#e2e8f0;border-color:#94a3b8;}
.rpo-mv[disabled]{opacity:.3;cursor:default;}
/* ── RP BLANKS ── */
.rpb-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;padding:.6rem .85rem;background:var(--solo-bg);border:2px solid var(--border);border-radius:10px;font-size:14px;line-height:1.6;transition:border-color .15s,background .15s;}
.rpb-row.rpb-correct{border-color:#22c55e!important;background:#dcfce7!important;}
.rpb-row.rpb-wrong{border-color:#ef4444!important;background:#fee2e2!important;}
.rpb-txt{color:var(--text);}
.rpb-inp{padding:4px 8px;border:2px solid #94a3b8;border-radius:7px;font-size:14px;font-family:var(--solo-font-body);min-width:120px;max-width:200px;background:var(--solo-bg-elevated, #FFFFFF);}
.rpb-inp:focus{outline:none;border-color:var(--solo-mastery-deep, #B45309);}
.rpb-inp[disabled]{background:var(--solo-bg);}
.rpb-res{font-size:13px;font-weight:600;}
.rpb-res.ok{color:#16a34a;}
.rpb-res.bad{color:#dc2626;}
.rpb-wb-btn{background:rgba(42,127,127,.1);border:1px solid #3a9e9e;border-radius:8px;padding:5px 14px;font-size:13px;color:var(--solo-mastery-deep, #B45309);cursor:pointer;font-family:var(--solo-font-body);margin-bottom:.5rem;}
.rpb-wb-btn:hover{background:rgba(42,127,127,.18);}
.rpb-wb-tag{background:var(--solo-bg-elevated, #FFFFFF);border:1.5px solid #3a9e9e;border-radius:20px;padding:3px 12px;font-size:13px;color:var(--solo-mastery-deep, #B45309);cursor:pointer;font-family:var(--solo-font-body);transition:all .12s;}
.rpb-wb-tag:hover{background:var(--solo-mastery-deep, #B45309);color:white;}
/* ── RP VIRTUAL LAB ── */
.rv-chip{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:.04em;flex-shrink:0;}
.rv-at-bio{background:#dbeafe;color:#1d4ed8;border:1.5px solid #bfdbfe;}
.rv-ms{background:#f0fafa;color:#1d6b6b;border:1.5px solid #b2e0e0;}
.rv-achieved{background:#dcfce7!important;color:#15803d!important;border:1.5px solid #86efac!important;}
.rv-stage-badge{display:inline-block;background:#e0f2fe;color:#0369a1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:3px 10px;border-radius:20px;margin-bottom:.7rem;}
.rv-desc{font-size:14px;color:var(--text-mid);line-height:1.6;margin-bottom:.9rem;}
.rv-msg-ok{color:#16a34a;font-weight:600;font-size:13px;}
.rv-warn{background:#fff3cd;border:1px solid #fde68a;border-radius:8px;padding:.45rem .8rem;font-size:13px;color:#92400e;margin:.5rem 0;}
/* bench top-down 3D perspective */
.rv-lab-wrap{background:#1e293b;border-radius:14px;padding:.75rem .75rem .5rem;margin:.5rem 0;}
.rv-lab-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;flex-wrap:wrap;gap:.4rem;}
.rv-lab-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8;}
.rv-bench-3d{perspective:600px;perspective-origin:50% 0%;}
.rv-bench-surface{background:linear-gradient(170deg,#e2e8f0 0%,#f1f5f9 60%,#cbd5e1 100%);border-radius:8px 8px 4px 4px;transform:rotateX(18deg);transform-origin:top center;padding:.9rem 1rem 1.4rem;min-height:220px;position:relative;box-shadow:inset 0 -8px 20px rgba(0,0,0,0.12),0 8px 24px rgba(0,0,0,0.35);}
.rv-bench-grid{position:absolute;inset:0;border-radius:8px 8px 4px 4px;background-image:linear-gradient(rgba(255,255,255,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;}
.rv-shelf{display:flex;gap:.5rem;flex-wrap:wrap;background:#334155;border-radius:8px;padding:.5rem .6rem;margin-bottom:.6rem;}
.rv-shelf-label{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;align-self:center;flex-shrink:0;margin-right:.2rem;}
.rv-equip{display:flex;flex-direction:column;align-items:center;gap:3px;background:#475569;border:2px solid #64748b;border-radius:9px;padding:.45rem .55rem;cursor:grab;transition:all .12s;min-width:70px;user-select:none;position:relative;}
.rv-equip:hover:not(.rv-equip-used){border-color:#38bdf8;background:#3b82f6;transform:translateY(-2px);}
.rv-equip.rv-equip-used{opacity:.35;cursor:not-allowed;border-color:#374151;}
.rv-equip.rv-equip-dragging{opacity:.5;transform:scale(1.08);}
.rv-equip-icon{font-size:1.55rem;line-height:1;display:flex;align-items:center;justify-content:center;height:32px;}
.rv-equip-icon svg{width:32px;height:32px;display:block;filter:drop-shadow(0 1px 2px rgba(15,23,42,.35));}
.rv-equip:hover:not(.rv-equip-used) .rv-equip-icon svg{filter:drop-shadow(0 2px 4px rgba(56,189,248,.45));}
.rv-equip-name{font-size:10px;font-weight:700;color:#e2e8f0;text-align:center;line-height:1.2;}
/* drop zones on bench */
.rv-drop-zone{border:2px dashed #94a3b8;border-radius:10px;min-height:64px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#94a3b8;transition:all .15s;background:rgba(255,255,255,.15);padding:.4rem;text-align:center;}
.rv-drop-zone.rv-dz-hover{border-color:#38bdf8;background:rgba(56,189,248,.12);color:#38bdf8;}
.rv-drop-zone.rv-dz-filled{border-color:#22c55e;background:rgba(34,197,94,.1);border-style:solid;color:#166534;}
.rv-drop-zone.rv-dz-error{border-color:#ef4444;background:rgba(239,68,68,.1);border-style:solid;color:#dc2626;}
.rv-bench-areas{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.2rem;}
.rv-bench-area-label{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem;}
/* consequence banner */
.rv-consequence{background:#fee2e2;border:1px solid #fca5a5;border-radius:8px;padding:.5rem .8rem;font-size:13px;color:#991b1b;margin:.5rem 0;animation:rsIn .2s ease;}
.rv-consequence-ok{background:#dcfce7;border-color:#86efac;color:#166534;}
/* slider */
.rv-slider-wrap{margin:.6rem 0;}
.rv-slider{width:100%;accent-color:var(--solo-mastery-deep, #B45309);cursor:pointer;}
.rv-slider-labels{display:flex;justify-content:space-between;font-size:10px;color:#64748b;margin-top:2px;}
/* assembled slide visual */
.rv-slide-visual{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.5rem 0;flex-wrap:wrap;}
/* focus stage */
.rv-focus-layout{display:flex;gap:1.2rem;flex-wrap:wrap;margin:.7rem 0;align-items:flex-start;}
.rv-eyepiece-wrap{flex:0 0 auto;}
.rv-eyepiece-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-mid);margin-bottom:.4rem;text-align:center;}
.rv-eyepiece{width:200px;height:200px;border-radius:50%;overflow:hidden;border:6px solid #1E293B;box-shadow:0 4px 18px rgba(0,0,0,0.28),0 0 0 4px rgba(45,212,191,0.10),0 0 24px rgba(45,212,191,0.18);background:#1a1a1a;transition:box-shadow .35s ease;}
.rv-eyepiece:hover{box-shadow:0 4px 18px rgba(0,0,0,0.32),0 0 0 4px rgba(45,212,191,0.18),0 0 32px rgba(45,212,191,0.30);}

/* Cell view zoom - when objective changes, the new SVG gets the .rv-zoom-in
   class for a single ~0.45s ease-in-out scale-up, then settles. */
@keyframes rvZoomIn {
  0%   { transform: scale(0.78); opacity: 0; filter: blur(6px); }
  60%  { opacity: 1; }
  100% { transform: scale(1);    opacity: 1; filter: blur(0); }
}
.rv-eyepiece > svg { transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.rv-eyepiece.is-zooming > svg { animation: rvZoomIn .55s cubic-bezier(.22,1,.36,1) 1; }

/* Skeuomorphic lab piece - base styling for inline iodine bottle / pipette */
.rv-glass-piece {
  display: block;
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.18));
  transition: transform .35s cubic-bezier(.22,1,.36,1), filter .35s ease;
}
.rv-glass-piece:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.22)); }
.rv-glass-piece.is-loaded { filter: drop-shadow(0 4px 10px rgba(45, 212, 191, 0.45)); }

/* Slide on the microscope stage - glide into position with weight */
.rv-stage-slide-anim {
  transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.rv-stage-slide-anim.is-stained .rv-slide-fluid {
  transition: fill .35s ease, filter .35s ease;
}
.rv-knobs-wrap{flex:1;min-width:190px;}
.rv-knob-group{margin-bottom:.9rem;}
.rv-knob-label{font-size:13px;font-weight:700;color: var(--solo-heading-color, var(--navy));margin-bottom:2px;}
.rv-knob-hint{font-size:11px;color:var(--text-mid);margin-bottom:.35rem;}
.rv-knob-row{display:flex;align-items:center;gap:.45rem;}
.rv-knob-btn{width:32px;height:32px;border-radius:50%;border:2px solid var(--solo-mastery-deep, #B45309);background:var(--solo-bg-elevated, #FFFFFF);font-size:18px;font-weight:700;color:var(--solo-mastery-deep, #B45309);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .1s;font-family:var(--solo-font-body);flex-shrink:0;}
.rv-knob-btn:hover{background:var(--solo-mastery-deep, #B45309);color:white;}
.rv-knob-bar{flex:1;height:9px;background:#e2e8f0;border-radius:5px;overflow:hidden;}
.rv-knob-fill{height:100%;background:var(--solo-mastery-deep, #B45309);border-radius:5px;transition:width .12s;}
.rv-obj-btns{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.5rem;}
.rv-obj-btn{background:var(--solo-bg);border:2px solid var(--border);border-radius:8px;padding:.4rem .8rem;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--solo-font-body);transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:1px;}
.rv-obj-btn:hover:not(.rv-obj-active){border-color:var(--solo-mastery-deep, #B45309);}
.rv-obj-btn.rv-obj-active{border-color:var(--navy);background:var(--navy);color:white;}
.rv-obj-sub{font-size:10px;font-weight:400;opacity:.8;}
.rv-focus-status{font-size:13px;margin:.5rem 0;min-height:1.3em;line-height:1.5;}
/* results */
.rv-results-box{background:var(--solo-bg);border:1px solid var(--border);border-radius:10px;padding:.9rem;margin:.65rem 0;}
.rv-res-row{display:flex;align-items:center;gap:.7rem;padding:.4rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.rv-res-row:last-child{border-bottom:none;}
.rv-res-label{font-size:13px;font-weight:600;color:var(--text-mid);flex:0 0 auto;min-width:160px;}
.rv-res-val{font-size:14px;color: var(--solo-heading-color, var(--navy));font-weight:600;}
.rv-res-val small{font-size:11px;color:var(--text-mid);font-weight:400;}
.rv-res-inp{padding:5px 8px;border:2px solid var(--border);border-radius:7px;font-size:14px;font-family:var(--solo-font-body);width:100px;}
.rv-res-inp:focus{outline:none;border-color:var(--solo-mastery-deep, #B45309);}
.rv-calc-box{background:#f0fafa;border:1px solid #b2e0e0;border-radius:8px;padding:.55rem .8rem;margin:.5rem 0;}
.rv-calc-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--solo-mastery-deep, #B45309);margin-bottom:.25rem;}
.rv-calc-steps{display:flex;flex-direction:column;gap:.15rem;font-size:13.5px;color: var(--solo-heading-color, var(--navy));}
/* animated ruler */
@keyframes rvRulerLine{0%{stroke-dashoffset:220;opacity:0}10%{opacity:1}68%{stroke-dashoffset:0;opacity:1}84%{stroke-dashoffset:0;opacity:1}96%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:220;opacity:0}}
@keyframes rvRulerBracket{0%,8%{transform:translateX(0);opacity:0}10%{opacity:1}68%{transform:translateX(220px);opacity:1}84%{transform:translateX(220px);opacity:1}96%{transform:translateX(220px);opacity:0}100%{transform:translateX(0);opacity:0}}
@keyframes rvRulerLabel{0%,62%{opacity:0}72%{opacity:1}84%{opacity:1}96%{opacity:0}100%{opacity:0}}
@keyframes rvRulerArrow{0%,62%{transform:translateY(0);opacity:0}72%{opacity:1}78%{transform:translateY(-4px)}84%{transform:translateY(0);opacity:1}96%{opacity:0}100%{opacity:0}}
.rv-ruler-line{stroke-dasharray:220;stroke-dashoffset:220;animation:rvRulerLine 3.5s ease-in-out infinite}
.rv-ruler-rbracket{animation:rvRulerBracket 3.5s ease-in-out infinite}
.rv-ruler-label{animation:rvRulerLabel 3.5s ease-in-out infinite}
.rv-ruler-arrow{animation:rvRulerArrow 3.5s ease-in-out infinite}
/* drawing pad */
.rv-pad-wrap{border:2px solid var(--border);border-radius:10px;overflow:hidden;margin:.6rem 0;position:relative;background:var(--solo-bg-elevated, #FFFFFF);}
.rv-pad-toolbar{display:flex;gap:.35rem;flex-wrap:wrap;background:var(--solo-bg);border-bottom:1px solid var(--border);padding:.45rem .6rem;align-items:center;}
.rv-pad-btn{background:var(--solo-bg-elevated, #FFFFFF);border:1.5px solid var(--border);border-radius:7px;padding:4px 9px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--solo-font-body);color: var(--solo-heading-color, var(--navy));transition:all .12s;display:flex;align-items:center;gap:4px;}
.rv-pad-btn:hover{border-color:var(--solo-mastery-deep, #B45309);color:var(--solo-mastery-deep, #B45309);}
.rv-pad-btn.active{background:var(--solo-mastery-deep, #B45309);border-color:var(--solo-mastery-deep, #B45309);color:white;}
.rv-pad-sep{width:1px;height:22px;background:var(--border);flex-shrink:0;}
.rv-pad-swatch{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);cursor:pointer;transition:transform .12s;flex-shrink:0;}
.rv-pad-swatch:hover,.rv-pad-swatch.active{transform:scale(1.2);border-color:var(--solo-mastery-deep, #B45309);}
.rv-pad-canvas-wrap{position:relative;cursor:crosshair;}
/* The Digital Canvas - subtle technical-grid background under the live
   canvas so it reads as graph paper at all times (the on-canvas grid
   overlay still toggles independently). */
.solo-digital-canvas{
  border-radius:10px;
  background-color:#FAFCFE;
  background-image:
    linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size:10px 10px;
  background-position:0 0;
  box-shadow:0 0 0 1px rgba(148,163,184,0.18) inset;
  transition:box-shadow .25s ease;
}
.solo-digital-canvas.is-scanning{
  box-shadow:0 0 0 2px rgba(56, 189, 248, 0.55) inset,
             0 0 24px rgba(56, 189, 248, 0.30);
}

/* ── Sleek Lab Physics ──────────────────────────────────────
   The Phase 3 weighted-motion language. Every interactive lab
   element snaps with 'physical' momentum (slight overshoot at
   the end). Applied as a global rule + a utility class so any
   later-added equipment can opt in by adding .solo-physics.

   Spec (locked): all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) */
.rv-stage,
.rv-equip,
.rv-equip:hover,
.rv-equip:active,
.rv-stage-slide-anim,
.rv-stage-slide-anim .rv-slide-fluid,
.rv-glass-piece,
.solo-glass,
.solo-physics,
#rv-pad-wrap,
#rv-canvas,
.rv-pad-btn,
.rv-knob-btn,
.rv-obj-btn,
.rv-eyepiece,
.rv-pad-toolbar .rv-pad-swatch,
.rv-pad-toolbar .rv-pad-bg-swatch {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Honour reduced-motion preferences - drop the spring overshoot. */
@media (prefers-reduced-motion: reduce) {
  .rv-stage, .rv-equip, .rv-equip:hover, .rv-equip:active,
  .rv-stage-slide-anim, .rv-stage-slide-anim .rv-slide-fluid,
  .rv-glass-piece, .solo-glass, .solo-physics,
  #rv-pad-wrap, #rv-canvas, .rv-pad-btn, .rv-knob-btn,
  .rv-obj-btn, .rv-eyepiece,
  .rv-pad-toolbar .rv-pad-swatch, .rv-pad-toolbar .rv-pad-bg-swatch {
    transition: all 0.15s ease-out;
  }
}

/* Cogs blue-laser scan - horizontal beam sweeps top → bottom over the
   canvas when the student saves an observation. Pure CSS animation,
   triggered by adding .is-scanning to #rv-laser. */
.solo-canvas-laser{
  position:absolute;
  left:0; right:0;
  top:0;
  height:3px;
  pointer-events:none;
  z-index:5;
  opacity:0;
  background:linear-gradient(90deg,
    rgba(56, 189, 248, 0) 0%,
    rgba(56, 189, 248, 0.95) 30%,
    rgba(125, 211, 252, 1) 50%,
    rgba(56, 189, 248, 0.95) 70%,
    rgba(56, 189, 248, 0) 100%);
  box-shadow:
    0 0 8px rgba(56, 189, 248, 0.85),
    0 0 18px rgba(56, 189, 248, 0.55),
    0 0 36px rgba(125, 211, 252, 0.35);
}
.solo-canvas-laser.is-scanning{
  animation:solo-laser-sweep 1.3s cubic-bezier(0.22, 1, 0.36, 1) 1;
}
@keyframes solo-laser-sweep{
  0%   { transform:translateY(0);              opacity:0; }
  10%  { opacity:1; }
  92%  { opacity:1; }
  100% { transform:translateY(calc(100% - 3px)); opacity:0; }
}
.rv-ruler-h,.rv-ruler-v{position:absolute;background:#f1f5f9; /* darkmode-ok */ border-color:var(--border);z-index:2;pointer-events:none;}
.rv-ruler-h{top:0;left:20px;right:0;height:20px;border-bottom:1px solid var(--border);}
.rv-ruler-v{left:0;top:20px;bottom:0;width:20px;border-right:1px solid var(--border);}
.rv-canvas{display:block;cursor:crosshair;}
.rv-pad-bg-row{display:flex;gap:.4rem;align-items:center;padding:.35rem .6rem;background:var(--solo-bg);border-top:1px solid var(--border);flex-wrap:wrap;}
.rv-pad-bg-label{font-size:11px;color:var(--text-mid);font-weight:600;}
.rv-pad-bg-swatch{width:20px;height:20px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:transform .1s;}
.rv-pad-bg-swatch:hover,.rv-pad-bg-swatch.active{border-color:var(--solo-mastery-deep, #B45309);transform:scale(1.15);}
/* skills celebration */
.rv-skills-celebrate{text-align:center;padding:.5rem 0;}
.rv-skill-tick-row{display:flex;align-items:center;gap:.75rem;padding:.65rem .9rem;background:var(--solo-bg);border:2px solid var(--border);border-radius:10px;margin-bottom:.5rem;opacity:0;transform:translateX(-18px);transition:opacity .4s,transform .4s,border-color .3s,background .3s;}
.rv-skill-tick-row.rv-tick-show{opacity:1;transform:translateX(0);}
.rv-skill-tick-row.rv-tick-done{border-color:#22c55e;background:#dcfce7;}
.rv-tick-icon{font-size:1.4rem;width:28px;text-align:center;flex-shrink:0;}
.rv-tick-text{font-size:13.5px;color: var(--solo-heading-color, var(--navy));flex:1;line-height:1.4;}
.rv-tick-chip{flex-shrink:0;}
/* log + summary */
.rv-log-box,.rv-results-summary{background:var(--solo-bg);border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;margin:.5rem 0;text-align:left;}
.rv-log-row{display:flex;gap:.45rem;font-size:12.5px;color: var(--solo-heading-color, var(--navy));margin-bottom:.25rem;align-items:flex-start;line-height:1.4;}
.rv-log-tick-icon{color:#16a34a;font-weight:700;flex-shrink:0;}
/* ── RP EQUIPMENT TOOLTIPS ── */
.rp-tip{position:relative;cursor:help;font-weight:700;border-bottom:2px dotted var(--solo-mastery-deep, #B45309);color:inherit;}
.rp-tip:hover .rp-tip-card,.rp-tip:focus-within .rp-tip-card{opacity:1;visibility:visible;transform:translateY(0);}
.rp-tip-card{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--solo-bg-elevated, #FFFFFF);border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.14);padding:.6rem .75rem;min-width:160px;max-width:220px;z-index:200;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s;pointer-events:none;text-align:center;}
.rp-tip-card::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--border);}
.rp-tip-svg{display:block;margin:0 auto .35rem;}
.rp-tip-name{font-size:12px;font-weight:700;color: var(--solo-heading-color, var(--navy));margin-bottom:2px;}
.rp-tip-desc{font-size:11px;color:var(--text-mid);line-height:1.4;}
/* ── MOUNT STAGE ── */
.rv-mount-layout{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start;margin:.7rem 0;}
.rv-mount-left{flex:0 0 130px;background:var(--solo-bg);border:1.5px solid var(--border);border-radius:12px;padding:.75rem;text-align:center;}
.rv-mount-bench-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mid);margin-bottom:.5rem;}
.rv-mount-right{flex:1;min-width:280px;overflow:hidden;}
.rv-mount-slide-drag{display:inline-block;cursor:grab;border:2px dashed #7dd3fc;border-radius:8px;padding:.45rem .55rem;background:var(--solo-bg-elevated, #FFFFFF);transition:box-shadow .15s;user-select:none;-webkit-user-select:none;}
.rv-mount-slide-drag:hover{box-shadow:0 4px 12px rgba(59,130,246,.25);border-color:#3b82f6;}
.rv-mount-slide-drag:active{cursor:grabbing;}
.rv-mount-status{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem;}
.rv-mount-chk{display:flex;align-items:center;gap:.45rem;font-size:12.5px;color: var(--solo-heading-color, var(--navy));background:var(--solo-bg);border:1.5px solid var(--border);border-radius:8px;padding:.38rem .65rem;flex:1;min-width:180px;transition:all .25s;line-height:1.3;}
.rv-mount-chk span{font-size:1.1rem;flex-shrink:0;}
.rv-mount-chk.done{background:#dcfce7;border-color:#86efac;color:#166534;}
.rv-mount-chk.partial{background:#fef9c3;border-color:#fde68a;color:#854d0e;}
.rv-drop-active{background:rgba(96,165,250,.18)!important;border-color:#3b82f6!important;}
/* ── RP FIELD MANUAL (right-side slide-in panel) ──
   Replaces the old centred method modal. Same trigger buttons; the
   panel glides in from the right with a weighted spring while a soft
   backdrop fades in. Esc + outside-click still dismiss. */
#rv-method-modal,#r2-method-modal{
  position:fixed; inset:0; z-index:500;
  background:rgba(10,20,40,0);          /* backdrop fades in below */
  display:flex; align-items:stretch; justify-content:flex-end;
  padding:0;
  pointer-events:none;
  transition:background 0.35s ease;
}
#rv-method-modal:not(.hidden), #r2-method-modal:not(.hidden){
  pointer-events:auto;
  background:rgba(10,20,40,0.42);
  backdrop-filter:blur(3px);
}
#rv-method-modal.hidden, #r2-method-modal.hidden{
  background:rgba(10,20,40,0);
  pointer-events:none;
}
#rv-method-modal .rs-field-card,
#r2-method-modal .rs-field-card,
#rvm-card,#r2m-card{
  background:var(--solo-bg-elevated, #FFFFFF);
  border-left:1px solid var(--solo-divider);
  border-radius:0;
  padding:1.5rem 1.5rem 2rem;
  max-width:460px; width:100%;
  height:100vh;
  box-shadow:-20px 0 60px rgba(15,23,42,0.18);
  overflow-y:auto;
  transform:translateX(110%);
  transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#rv-method-modal:not(.hidden) #rvm-card,
#r2-method-modal:not(.hidden) #r2m-card{ transform:translateX(0); }
#rvm-card::before, #r2m-card::before{
  content:'Method';
  display:block;
  font-family:var(--solo-font-head);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--solo-mastery-deep);
  padding-bottom:.3rem;
  border-bottom:1px solid var(--solo-mastery-pale);
  margin-bottom:.85rem;
}
/* ── PLAIN ENGLISH MODE TOGGLE ── */
.rs-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;flex-wrap:wrap;margin-bottom:.4rem;}
.rs-title-row .rs-title{margin-bottom:0;flex:1 1 auto;min-width:0;}
.plain-toggle{display:inline-flex;align-items:center;gap:6px;background:rgba(42,127,127,0.08);border:1.5px solid #b0dada;border-radius:20px;padding:5px 12px;font-size:12px;color:#1E293B;cursor:pointer;font-family:var(--solo-font-body);font-weight:500;transition:all .15s;white-space:nowrap;flex-shrink:0;}
.plain-toggle:hover{background:rgba(42,127,127,0.18);border-color:var(--solo-mastery-deep, #B45309);}
.plain-toggle.on{background:var(--solo-mastery-deep, #B45309);border-color:var(--solo-mastery-deep, #B45309);color:white;}
.plain-toggle.on strong{color:white;}
.plain-mode-active-banner{font-size:11.5px;color:var(--solo-mastery-deep, #B45309);background:rgba(42,127,127,0.06);border:1px dashed #b0dada;border-radius:6px;padding:5px 10px;margin-bottom:.85rem;display:flex;align-items:center;gap:6px;}
/* ── CONTENT SLIDES ── */
.cb-slide{display:none;}
.cb-slide.active{display:block;animation:rsIn .25s ease;}
.cb-slide-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:1.4rem;padding-top:.95rem;border-top:1px dashed var(--border);flex-wrap:wrap;}
.cb-slide-meta{display:flex;align-items:center;gap:12px;flex:1 1 auto;justify-content:center;}
.cb-slide-counter{font-size:11.5px;color:var(--text-light);font-weight:600;letter-spacing:.04em;white-space:nowrap;}
.cb-slide-dots{display:flex;gap:6px;align-items:center;}
.cb-slide-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .2s;cursor:pointer;border:none;padding:0;}
.cb-slide-dot:hover{background:#9bbacb;}
.cb-slide-dot.active{background:var(--chem-amber);transform:scale(1.35);}
.cb-slide-btn{background:var(--chem-amber);color:white;border:none;border-radius:8px;padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--solo-font-body);transition:opacity .15s,background .15s;flex-shrink:0;}
.cb-slide-btn:hover:not(:disabled){background:#2d6435;}
.cb-slide-btn:disabled{opacity:0.3;cursor:not-allowed;}
.cb-slide-prev{background:transparent;color:var(--text-mid);border:1.5px solid var(--border);}
.cb-slide-prev:hover:not(:disabled){border-color:var(--chem-amber);color:var(--chem-amber);background:transparent;}
@media(max-width:520px){.cb-slide-nav{justify-content:center;}.cb-slide-meta{order:3;width:100%;}}
/* ── KEY TERM DEFINITIONS (auto-enhanced) ── */
.kt-def, .kt.kt-auto{border-bottom:1.5px dotted var(--solo-mastery-deep, #B45309);cursor:help;border-radius:2px;padding:0 1px;transition:background .15s;outline:none;}
.kt-def:hover{background:rgba(42,127,127,0.10);}
.kt-def:focus-visible{outline:2px solid var(--solo-mastery-deep, #B45309);outline-offset:2px;}
.kt-def.active{background:rgba(42,127,127,0.18);}
.kt-def-popup{position:absolute;z-index:200;background:var(--solo-bg-elevated, #FFFFFF);border:2px solid var(--solo-mastery-deep, #B45309);border-radius:12px;box-shadow:0 10px 30px rgba(27,58,107,0.22);padding:10px 14px 12px;max-width:300px;font-family:var(--solo-font-body);font-size:13px;line-height:1.55;color:var(--text-mid);animation:rsIn .18s ease;}
.kt-def-popup-arrow{position:absolute;top:-9px;width:14px;height:14px;background:var(--solo-bg-elevated, #FFFFFF);border-top:2px solid var(--solo-mastery-deep, #B45309);border-left:2px solid var(--solo-mastery-deep, #B45309);transform:rotate(45deg);}
.kt-def-close{position:absolute;top:3px;right:5px;background:none;border:none;font-size:22px;line-height:1;color:var(--text-light);cursor:pointer;padding:2px 7px;font-family:inherit;}
.kt-def-close:hover{color: var(--solo-heading-color, var(--navy));}
.kt-def-term{font-weight:700;color:var(--solo-mastery-deep, #B45309);margin-bottom:5px;padding-right:18px;font-size:13.5px;}
.kt-def-text{font-size:12.5px;color:var(--text-mid);line-height:1.55;}
.kt-def-img{margin-top:8px;max-width:100%;border-radius:6px;display:block;}
@media(max-width:520px){.kt-def-popup{max-width:calc(100vw - 24px);}}
/* ── SCIENTIST POPOVER (richer - portrait + facts) ── */
.sci-link{border-bottom:1.5px dotted #B95F14;cursor:pointer;border-radius:2px;padding:0 1px;transition:background .15s;outline:none;position:relative;}
.sci-link::before{content:'👤 ';font-size:0.85em;opacity:0.75;}
.sci-link:hover{background:rgba(185,95,20,0.10);}
.sci-link:focus-visible{outline:2px solid #B95F14;outline-offset:2px;}
.sci-link.active{background:rgba(185,95,20,0.18);}
/* --sci-wing-color is set per-popup by showSciPopup() based on which wing
   the scientist belongs to. Defaults to the legacy chemistry amber so any
   scientist not yet wing-mapped still renders. The 5px left rail is the
   wing-colour signal; the rest of the border is subtle slate. */
.sci-popup{--sci-wing-color:#B95F14;--sci-wing-soft:rgba(185,95,20,0.30);position:absolute;z-index:200;background:var(--solo-bg-elevated, #FFFFFF);border:1.5px solid var(--solo-divider,#E2E8F0);border-left:5px solid var(--sci-wing-color);border-radius:14px;box-shadow:0 12px 32px rgba(27,58,107,0.24),0 0 0 4px var(--sci-wing-soft);padding:0;max-width:340px;width:90vw;font-family:var(--solo-font-body);font-size:13px;line-height:1.55;color:var(--text-mid);animation:rsIn .2s ease;overflow:hidden;}
.sci-popup-arrow{position:absolute;top:-9px;width:14px;height:14px;background:var(--solo-bg-elevated, #FFFFFF);border-top:1.5px solid var(--sci-wing-color);border-left:1.5px solid var(--sci-wing-color);transform:rotate(45deg);}
.sci-popup-close{position:absolute;top:0;right:0;background:rgba(255,255,255,0.85);border:none;font-size:22px;line-height:1;color:var(--text-light);cursor:pointer;padding:0;font-family:inherit;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;z-index:2;margin:6px 8px;}
.sci-popup-close:hover{color: var(--solo-heading-color, var(--navy));background:var(--solo-bg-elevated, #FFFFFF);}
.sci-popup-imgwrap{width:100%;background:#f4eee6;border-bottom:1.5px solid #efd9bc;height:240px;overflow:hidden;}
.sci-popup-img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;}
.sci-popup-img-placeholder{font-size:48px;color:#c79568;padding:30px 0;}
.sci-popup-body{padding:12px 16px 14px;}
.sci-popup-name{font-weight:700;color:var(--sci-wing-color);font-size:15px;margin-bottom:2px;font-family:var(--solo-font-head);}
.sci-popup-meta{font-size:11.5px;color:var(--text-light);margin-bottom:9px;letter-spacing:.02em;}
.sci-popup-section-label{font-size:10.5px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;}
.sci-popup-facts{margin:0;padding-left:18px;font-size:12.5px;color:var(--text-mid);line-height:1.55;}
.sci-popup-facts li{margin-bottom:4px;}
.sci-popup-facts li:last-child{margin-bottom:0;}
@media(max-width:520px){.sci-popup{max-width:calc(100vw - 24px);}}
/* ── EXAM PRACTICE ── */
.ep-shell{}
.ep-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:.85rem;}
.ep-cmd-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:14px;font-family:var(--solo-font-body);}
.ep-cmd-suggest{background:#fef3c7;color:#92400e;border:1.5px solid #fde68a;}
.ep-cmd-evaluate{background:#ede9fe;color:#5b21b6;border:1.5px solid #ddd6fe;}
.ep-cmd-explain{background:#dcfce7;color:#166534;border:1.5px solid #bbf7d0;}
.ep-cmd-describe{background:#dbeafe;color:#1e40af;border:1.5px solid #bfdbfe;}
.ep-cmd-default{background:#f1f5f9; /* darkmode-ok */ color:#334155;border:1.5px solid #cbd5e1;}
.ep-marks{font-size:11.5px;font-weight:600;color:var(--text-light);background:var(--solo-bg);border:1px solid var(--border);border-radius:10px;padding:3px 9px;letter-spacing:.02em;}
.ep-q-counter{margin-left:auto;font-size:11.5px;color:var(--text-light);font-weight:600;letter-spacing:.04em;}
.ep-question{font-size:15.5px;font-weight:500;color: var(--solo-heading-color, var(--navy));line-height:1.6;background:#fcfaf6;border-left:3.5px solid #B95F14;border-radius:0 10px 10px 0;padding:12px 16px;margin-bottom:.95rem;}
.ep-hint-toggle{display:inline-flex;align-items:center;gap:6px;background:rgba(42,127,127,0.08);border:1.5px solid #b0dada;color:#1E293B;border-radius:18px;padding:5px 12px;font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--solo-font-body);transition:background .15s;margin-bottom:.5rem;}
.ep-hint-toggle:hover{background:rgba(42,127,127,0.16);}
.ep-hint-toggle.open{background:var(--solo-mastery-deep, #B45309);color:white;border-color:var(--solo-mastery-deep, #B45309);}
.ep-hints{display:none;background:rgba(42,127,127,0.06);border:1px dashed #b0dada;border-radius:8px;padding:.65rem .9rem;margin-bottom:.85rem;font-size:13px;color:var(--text-mid);line-height:1.55;}
.ep-hints.open{display:block;animation:rsIn .2s ease;}
.ep-hints ul{margin:0;padding-left:18px;}
.ep-hints li{margin-bottom:3px;}
.ep-tips{background:#fff8e6;border:1.5px solid #fde68a;border-radius:10px;padding:.7rem .95rem;margin-bottom:.85rem;font-size:13px;color:#7c4a03;}
.ep-tips-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#92400e;margin-bottom:5px;}
.ep-tips ul{margin:0;padding-left:18px;}
.ep-tips li{margin-bottom:3px;line-height:1.5;}
.ep-textarea{width:100%;min-height:90px;border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;font-size:13.5px;color: var(--solo-heading-color, var(--navy));background:var(--off-white);font-family:inherit;resize:vertical;box-sizing:border-box;line-height:1.6;transition:border-color .15s;margin-bottom:.4rem;}
.ep-textarea:focus{outline:none;border-color:var(--solo-mastery-deep, #B45309);background:var(--solo-bg-elevated, #FFFFFF);}
.ep-textarea-hint{font-size:11.5px;color:var(--text-light);font-style:italic;margin-bottom:.85rem;}
.ep-coach{margin:.4rem 0 .85rem;padding:10px 12px;border-radius:8px;background:var(--solo-mastery-pale, #FEF3C7);border:1px solid var(--solo-mastery, #FCD34D);color:#78350F;font-size:12.5px;line-height:1.45;}
.ep-coach[hidden]{display:none;}
.ep-coach strong{color:var(--solo-mastery-deep, #92400E);}
.ep-coach em{font-style:normal;font-weight:600;color:#166534;}
.ep-reveal-btn{background:var(--chem-amber);color:white;border:none;border-radius:10px;padding:10px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--solo-font-body);transition:opacity .15s,background .15s;display:inline-flex;align-items:center;gap:6px;}
.ep-reveal-btn:hover:not(:disabled){background:#2d6435;}
.ep-reveal-btn:disabled{opacity:0.35;cursor:not-allowed;}
.ep-model{display:none;background:#f0f9f4;border:1.5px solid #bbf7d0;border-radius:12px;padding:.95rem 1.1rem 1rem;margin-top:.85rem;animation:rsIn .25s ease;}
.ep-model.open{display:block;}
.ep-model-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#166534;margin-bottom:7px;}
.ep-model-points{margin:0;padding:0;list-style:none;}
.ep-model-points li{padding:6px 0 6px 26px;position:relative;font-size:13.5px;color:var(--text-mid);line-height:1.55;border-bottom:1px dashed #bbf7d0;}
.ep-model-points li:last-child{border-bottom:none;}
.ep-model-points li::before{content:'✓';position:absolute;left:0;top:6px;width:20px;height:20px;color:#166534;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;}
.ep-model-notes{margin-top:.7rem;padding-top:.55rem;border-top:1px solid #bbf7d0;font-size:12px;color:var(--text-light);line-height:1.55;font-style:italic;}
.ep-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:1.2rem;padding-top:.85rem;border-top:1px dashed var(--border);flex-wrap:wrap;}
.ep-nav-btn{background:var(--chem-amber);color:white;border:none;border-radius:8px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--solo-font-body);transition:opacity .15s,background .15s;}
.ep-nav-btn:hover:not(:disabled){background:#2d6435;}
.ep-nav-btn:disabled{opacity:0.35;cursor:not-allowed;}
.ep-nav-prev{background:transparent;color:var(--text-mid);border:1.5px solid var(--border);}
.ep-nav-prev:hover:not(:disabled){border-color:var(--chem-amber);color:var(--chem-amber);background:transparent;}
/* ── FIGURES (image + caption) ── */
.cb-fig{margin:1rem auto;text-align:center;}
.cb-fig img{max-width:100%;max-height:340px;height:auto;width:auto;border-radius:10px;display:block;margin:0 auto 8px;box-shadow:0 3px 14px rgba(27,58,107,0.14);}
.cb-fig figcaption,.cb-fig .cb-fig-cap{font-size:11.5px;color:var(--text-light);font-style:italic;line-height:1.5;max-width:520px;margin:0 auto;}
.img-ph{background:var(--solo-bg);border:2px dashed var(--solo-divider);border-radius:10px;padding:1.6rem 1rem;text-align:center;font-size:13px;color:var(--solo-text-mute);font-weight:500;font-family:var(--solo-font-body);line-height:1.5;margin:0 auto 6px;}
.img-ph::before{
  content:'';
  display:inline-block;
  width:28px;height:28px;
  margin-bottom:6px;
  background-color:var(--solo-mastery-deep);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='14' rx='2'/><circle cx='12' cy='13' r='4'/><path d='M7 6l2-3h6l2 3'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='14' rx='2'/><circle cx='12' cy='13' r='4'/><path d='M7 6l2-3h6l2 3'/></svg>") center/contain no-repeat;
}

/* ── Mission Accomplished module ──
   Shown at every sub-unit boundary in place of the generic Next nav. Centred
   white card with a mastery-teal halo, Lexend heading, primary teal pill +
   ghost "Return to Chemistry Hub" button. */
.solo-mission-acc{
  position:relative;
  background:var(--solo-bg-elevated, #FFFFFF);
  border:1px solid var(--solo-divider);
  border-radius:18px;
  padding:1.75rem 1.85rem 1.6rem;
  margin:2rem auto 1rem;
  max-width:640px;
  text-align:center;
  box-shadow:var(--solo-shadow-2);
  overflow:hidden;
}
.solo-mission-acc::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg, transparent 0%, var(--solo-mastery) 50%, transparent 100%);
}
.solo-mission-acc__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;
  border-radius:16px;
  background:var(--solo-mastery-pale);
  color:var(--solo-mastery-deep);
  margin-bottom:.85rem;
  box-shadow:0 0 0 6px rgba(45,212,191,0.12);
}
.solo-mission-acc__icon svg{ stroke:currentColor; width:30px; height:30px; }
.solo-mission-acc__eyebrow{
  font-family:var(--solo-font-head);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--solo-mastery-deep);
  margin:0 0 .4rem;
}
.solo-mission-acc__title{
  font-family:var(--solo-font-head);
  font-weight:700;
  font-size:1.45rem;
  color: var(--solo-heading-color, var(--solo-navy));
  letter-spacing:-0.015em;
  margin:0 0 .55rem;
  line-height:1.2;
}
.solo-mission-acc__desc{
  font-family:var(--solo-font-body);
  font-size:.95rem;
  color:var(--solo-text);
  line-height:1.6;
  margin:0 auto 1.3rem;
  max-width:46ch;
}
.solo-mission-acc__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.solo-mission-acc__btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--solo-font-head);
  font-weight:700;
  font-size:.92rem;
  padding:.7rem 1.2rem;
  border-radius:999px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  letter-spacing:.005em;
  transition:background var(--solo-fast) var(--solo-ease),
             color var(--solo-fast) var(--solo-ease),
             border-color var(--solo-fast) var(--solo-ease),
             transform var(--solo-fast) var(--solo-ease),
             box-shadow var(--solo-fast) var(--solo-ease);
}
.solo-mission-acc__btn--primary{
  background:var(--solo-mastery);
  color: var(--solo-heading-color, var(--solo-navy));                       /* Deep Charcoal - Contrast Pass (9.3:1 AAA) */
}
.solo-mission-acc__btn--primary:hover{
  background:var(--solo-mastery-deep);
  color: var(--solo-heading-color, var(--solo-navy));
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(45,212,191,0.40);
}
.solo-mission-acc__btn--ghost{
  background:transparent;
  color:var(--solo-text);
  border-color:var(--solo-divider);
}
.solo-mission-acc__btn--ghost:hover{
  border-color:var(--solo-mastery-deep);
  color:var(--solo-mastery-deep);
  background:var(--solo-bg);
}
.solo-mission-acc__btn svg{ stroke:currentColor; width:14px; height:14px; flex-shrink:0; }
@media (max-width:480px){
  .solo-mission-acc{ padding:1.4rem 1.2rem 1.2rem; }
  .solo-mission-acc__title{ font-size:1.2rem; }
  .solo-mission-acc__btn{ width:100%; justify-content:center; }
}

/* ─── SOLO 2027 OVERRIDES ─────────────────────────────────
   Re-point legacy CSS variables to Solo brand values so the entire
   resource UI inherits the new palette without rewriting selectors.
   Then patch a few high-visibility components (unit header, flashcards,
   primary buttons) with Solo polish. */
body.theme-solo {
  --navy:        #1E293B;
  --teal-pale:   #CCFBF1;
  --bio:         #14B8A6;
  --bio-pale:    #CCFBF1;
  --sand-pale:   var(--solo-mastery-pale, #FEF3C7);
  --white:       #FFFFFF;
  --off-white:   #F8FAFC;
  --text-mid:    #334155;
  --text-light:  #64748B;
  --border:      #E2E8F0;

  background: var(--solo-bg);
  font-family: var(--solo-font-body);
  color: var(--solo-text);
}
body.theme-solo .rs-unit-header {
  background:
    radial-gradient(ellipse 600px 320px at 50% 30%, rgba(45, 212, 191, 0.18) 0%, transparent 70%),
    linear-gradient(135deg, var(--solo-navy) 0%, #0F172A 100%);
}
body.theme-solo .rs-unit-title {
  font-family: var(--solo-font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.theme-solo .rs-unit-badge,
body.theme-solo .rs-unit-sub { font-family: var(--solo-font-head); }

/* ──────────────────────────────────────────────────────────────────────
   SHARED PAGE LAYOUT - two-column resource page shell.
   Lifted out of every bio resource page's inline <style> so the
   SoloSectionRenderer-mounted pages get the layout for free
   (2026-05-22). Affected: cell-biology, organisation, bioenergetics,
   homeostasis, infection, ecology, inheritance, chemistry-c1 through
   c10 (as they migrate), and the renderer smoke test.
   ────────────────────────────────────────────────────────────────────── */

.rs-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.4rem;
  align-items: start;
}
@media (max-width: 900px) {
  .rs-layout { grid-template-columns: 200px 1fr; gap: 1rem; }
}
@media (max-width: 720px) {
  .rs-layout { grid-template-columns: 1fr; }
  #resource-nav { display: none; }
  #resource-nav.open { display: block; }
}

/* Immersive mode - applied for section types whose internal layout
   needs the full content width (e.g. interactive labs). Sidebar
   collapses to its toggle. */
.rs-layout.is-immersive { grid-template-columns: 1fr; }
.rs-layout.is-immersive #resource-nav { display: none; }
.rs-layout.is-immersive #resource-nav.open { display: block; }
body.is-immersive .rn-toggle { display: inline-flex; }

.rn-toggle {
  display: none;
  background: var(--solo-mastery);
  color: var(--solo-heading-color, var(--solo-navy));
  border: none;
  border-radius: 8px;
  font-family: var(--solo-font-head);
  font-size: .85rem;
  font-weight: 700;
  padding: .5rem 1rem;
  margin-bottom: .85rem;
  cursor: pointer;
}
@media (max-width: 900px) { .rn-toggle { display: inline-flex; } }

/* Sticky sidebar position - extends the shared #resource-nav block. */
#resource-nav {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* Main content card. */
.rs-shell {
  background: var(--solo-bg-elevated, #FFFFFF);
  border: 1px solid var(--solo-divider);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  box-shadow: var(--solo-shadow-1);
}

/* Step pill - uppercase chip above the section title. */
.rs-step-pill {
  display: inline-block;
  font-family: var(--solo-font-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--solo-mastery-deep);
  margin-bottom: .55rem;
}

/* Action row at bottom of card (Back / Continue buttons). */
.rs-actions {
  display: flex;
  gap: .65rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--solo-divider);
}

/* Ghost button - the "← Back" complement to the teal Continue. */
.rs-btn-ghost {
  background: transparent;
  border: 1px solid var(--solo-divider);
  color: var(--solo-text);
}
.rs-btn-ghost:hover { background: var(--solo-bg); }

/* ──────────────────────────────────────────────────────────────────────
   SECTION-TYPE COMPONENTS - styling for the universal renderers in
   js/solo-section-renderer.js. Match-up, sort-cards, rp-order,
   rp-blanks, study-diagram, label-diagram, calculation, error-spot,
   exam-practice, knowledge-check.
   ────────────────────────────────────────────────────────────────────── */

/* Objectives bullet list. */
.rs-objectives { padding-left: 1.4rem; margin: 0; }
.rs-objectives li { margin: .35rem 0; }

/* Plain/rich content toggle. */
.rs-plain-toggle { display: inline-flex; gap: .35rem; background: var(--solo-bg); padding: .25rem; border-radius: 999px; margin-bottom: 1rem; }
.rs-plain-toggle button { background: transparent; border: none; padding: .35rem .85rem; border-radius: 999px; font-family: var(--solo-font-head); font-size: .76rem; font-weight: 600; color: var(--solo-text-mute); cursor: pointer; }
.rs-plain-toggle button.is-active { background: var(--solo-bg-elevated, #FFFFFF); color: var(--solo-heading-color, var(--solo-navy)); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* SoloCogs Universal Flashcard component. */
.sc-fc { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: .5rem 0; }
.sc-fc-deck { position: relative; width: 100%; max-width: 360px; min-height: 180px; }
/* The card is a flex container that centres a single text element.
   JS swaps the text content (term <-> definition) on click. Term is
   shown by default; .is-flipped means definition is showing. */
.sc-fc-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 180px;
  padding: 1.4rem;
  box-sizing: border-box;
  background: var(--solo-bg-elevated, #FFFFFF);
  border: 1px solid var(--solo-divider);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, background .2s ease, border-color .15s ease, box-shadow .2s ease;
  transform-origin: center;
}
.sc-fc-card:hover { transform: scale(1.02); border-color: var(--solo-mastery); box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.sc-fc-card:active { transform: scale(0.99); }
.sc-fc-card:hover, .sc-fc-card.is-flipped { background: var(--solo-bg); }
.sc-fc-text {
  font-family: var(--solo-font-head);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--solo-heading-color, var(--solo-navy));
}
.sc-fc-card.is-flipped .sc-fc-text {
  font-family: var(--solo-font-body);
  font-size: .98rem;
  font-weight: 400;
  color: var(--solo-text);
  line-height: 1.55;
}
.sc-fc-pager { display: inline-flex; align-items: center; gap: .85rem; }
.sc-fc-pager button { background: var(--solo-bg); border: 1px solid var(--solo-divider); border-radius: 999px; width: 36px; height: 36px; font-size: 1.15rem; color: var(--solo-text); cursor: pointer; }
.sc-fc-pager button:hover { background: var(--solo-bg-elevated, #FFFFFF); border-color: var(--solo-mastery); color: var(--solo-mastery-deep); }
.sc-fc-counter { font-family: var(--solo-font-head); font-size: .78rem; font-weight: 600; color: var(--solo-text-mute); min-width: 3.5em; text-align: center; }

/* Recall ladder. Stacked Q+A rungs the student climbs as a progressive
   recall check after a teaching block. Each rung is independently revealable.
   Teal left-rail accent acts as the "ladder" visual; the rail deepens on
   reveal so the student can see at a glance how many rungs they've cleared. */
.sc-rl { padding: .25rem 0; }
.sc-rl-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: .75rem;
}
.sc-rl-rung {
  background: var(--solo-bg-elevated, #FFFFFF);
  border: 1px solid var(--solo-divider);
  border-left: 4px solid var(--solo-mastery);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sc-rl-rung:hover { border-color: var(--solo-mastery); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.sc-rl-rung.is-revealed { border-left-color: var(--solo-mastery-deep); }
.sc-rl-num {
  font-family: var(--solo-font-head);
  font-size: .68rem; font-weight: 700;
  color: var(--solo-mastery-deep);
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .35rem;
}
.sc-rl-q {
  font-family: var(--solo-font-head);
  font-size: 1rem; font-weight: 600;
  color: var(--solo-heading-color, var(--solo-navy));
  line-height: 1.45;
  margin-bottom: .65rem;
}
.sc-rl-reveal {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: .45rem 1rem;
  background: transparent;
  border: 1.5px solid var(--solo-mastery);
  border-radius: 999px;
  color: var(--solo-mastery-deep);
  font-family: var(--solo-font-head);
  font-size: .82rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sc-rl-reveal:hover { background: rgba(45, 212, 191, .1); }
.sc-rl-rung.is-revealed .sc-rl-reveal { color: var(--solo-text-mute); border-color: var(--solo-divider); }
.sc-rl-a {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed rgba(45, 212, 191, .35);
  font-family: var(--solo-font-body);
  font-size: .95rem;
  color: var(--solo-text);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Knowledge check. */
.rs-kc-q { margin: 1rem 0 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--solo-divider); }
.rs-kc-q:last-child { border-bottom: 0; }
.rs-kc-prompt { font-family: var(--solo-font-head); font-weight: 600; color: var(--solo-heading-color, var(--solo-navy)); margin: 0 0 .65rem; }
.rs-kc-opts { display: grid; grid-template-columns: 1fr; gap: .45rem; }
@media (min-width: 700px) { .rs-kc-opts { grid-template-columns: 1fr 1fr; } }
.rs-kc-opt { text-align: left; padding: .7rem .9rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 10px; font-family: var(--solo-font-body); font-size: .95rem; color: var(--solo-text); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.rs-kc-opt:hover:not(:disabled) { border-color: var(--solo-mastery); background: var(--solo-bg); }
.rs-kc-opt.is-correct { background: #DCFCE7; border-color: #4ADE80; color: #166534; }
.rs-kc-opt.is-wrong   { background: #FEE2E2; border-color: #F87171; color: #991B1B; }
.rs-kc-opt.is-reveal  { background: #ECFDF5; border-color: #6EE7B7; color: #047857; font-style: italic; }
.rs-kc-fb { font-size: .88rem; color: var(--solo-text-mute); background: var(--solo-bg); border-left: 3px solid var(--solo-mastery-deep); padding: .55rem .85rem; border-radius: 0 8px 8px 0; margin-top: .55rem; }
.rs-kc-score { font-family: var(--solo-font-head); font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); margin: .8rem 0 0; }
.rs-kc-pips { display: flex; gap: .4rem; margin-bottom: .6rem; }
.rs-kc-pip { width: 28px; height: 5px; background: var(--solo-divider, #E2E8F0); border-radius: 999px; transition: background .15s ease; }
.rs-kc-pip.is-active { background: var(--solo-mastery); }
.rs-kc-pip.is-done { background: var(--solo-mastery-deep); }
.rs-kc-pos { font-size: .82rem; color: var(--solo-text-mute, #64748B); margin: 0 0 .9rem; font-weight: 600; letter-spacing: .02em; }
.rs-kc-prompt { font-family: var(--solo-font-head); font-weight: 600; color: var(--solo-heading-color, var(--solo-navy, #1E293B)); font-size: 1.05rem; margin: 0 0 .85rem; line-height: 1.45; }
.rs-kc-q .rs-btn-teal { margin-top: 1rem; }
.rs-kc-result { text-align: center; padding: 1.4rem 1rem; }
.rs-kc-result.is-perfect { background: linear-gradient(135deg, #ECFDF5, #DCFCE7); border-radius: 14px; padding: 1.6rem 1rem; }
.rs-kc-score-big { font-family: var(--solo-font-head); font-weight: 700; font-size: 2.4rem; color: var(--solo-mastery-deep, #14B8A6); margin: 0 0 .4rem; line-height: 1; }
.rs-kc-score-msg { color: var(--solo-text, #334155); margin: 0 0 1rem; }

/* Error spot - "spot the misconception". */
.rs-es-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-es-row { padding: .85rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 12px; margin-bottom: .7rem; }
.rs-es-row.is-correct { border-color: #4ADE80; background: #F0FDF4; }
.rs-es-row.is-wrong   { border-color: #F87171; background: #FEF2F2; }
.rs-es-text { margin: 0 0 .55rem; font-style: italic; color: var(--solo-heading-color, var(--solo-navy)); }
.rs-es-actions { display: inline-flex; gap: .45rem; }
.rs-es-btn { padding: .4rem .85rem; background: var(--solo-bg); border: 1px solid var(--solo-divider); border-radius: 999px; font-family: var(--solo-font-head); font-size: .8rem; font-weight: 600; color: var(--solo-text); cursor: pointer; }
.rs-es-btn:hover:not(:disabled) { background: var(--solo-bg-elevated, #FFFFFF); border-color: var(--solo-mastery); }
.rs-es-fb { font-size: .88rem; color: var(--solo-text-mute); margin: .55rem 0 0; }

/* Exam practice. */
.rs-ep-desc { color: var(--solo-text-mute); margin: 0 0 1rem; }
.rs-ep-card { padding: 1.05rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 14px; margin-bottom: 1rem; }
.rs-ep-meta { display: inline-flex; gap: .5rem; margin-bottom: .65rem; }
.rs-ep-cmd { background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); padding: .2rem .65rem; border-radius: 999px; font-family: var(--solo-font-head); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rs-ep-marks { background: var(--solo-bg); color: var(--solo-text-mute); padding: .2rem .65rem; border-radius: 999px; font-family: var(--solo-font-head); font-size: .7rem; font-weight: 600; }
.rs-ep-q { font-family: var(--solo-font-head); font-weight: 600; color: var(--solo-heading-color, var(--solo-navy)); margin: 0 0 .7rem; }
.rs-ep-textarea { width: 100%; min-height: 110px; padding: .65rem .8rem; border: 1px solid var(--solo-divider); border-radius: 10px; font-family: var(--solo-font-body); font-size: .95rem; line-height: 1.5; color: var(--solo-text); resize: vertical; box-sizing: border-box; }
.rs-ep-textarea:focus { outline: 2px solid var(--solo-mastery); outline-offset: 1px; border-color: var(--solo-mastery-deep); }
.rs-ep-hints { margin: .7rem 0; }
.rs-ep-hints summary { font-family: var(--solo-font-head); font-size: .82rem; font-weight: 600; color: var(--solo-mastery-deep); cursor: pointer; }
.rs-ep-hints ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .88rem; color: var(--solo-text-mute); }
.rs-ep-model { margin-top: .85rem; padding: .85rem 1rem; background: var(--solo-bg); border-left: 3px solid var(--solo-mastery); border-radius: 0 10px 10px 0; }
.rs-ep-model-eyebrow { font-family: var(--solo-font-head); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--solo-mastery-deep); margin: 0 0 .35rem; }
.rs-ep-model ul { margin: 0 0 .65rem; padding-left: 1.2rem; }
.rs-ep-notes { font-size: .82rem; color: var(--solo-text-mute); margin: 0; }

/* Match-up + sort-cards (shared - sort-cards delegates to match-up). */
.rs-mu-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-mu-row { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: center; padding: .75rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 12px; margin-bottom: .55rem; }
.rs-mu-row.is-correct { border-color: #4ADE80; background: #F0FDF4; }
.rs-mu-row.is-wrong   { border-color: #F87171; background: #FEF2F2; }
.rs-mu-item { font-weight: 500; color: var(--solo-heading-color, var(--solo-navy)); }
.rs-mu-cols { display: inline-flex; gap: .35rem; }
.rs-mu-col { padding: .35rem .85rem; background: var(--solo-bg); border: 1px solid var(--solo-divider); border-radius: 999px; font-family: var(--solo-font-head); font-size: .78rem; font-weight: 600; color: var(--solo-text); cursor: pointer; }
.rs-mu-col:hover:not(:disabled) { background: var(--solo-bg-elevated, #FFFFFF); border-color: var(--solo-mastery); }
.rs-mu-col.is-selected { background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); border-color: var(--solo-mastery-deep); }
.rs-mu-col.is-correct { background: #4ADE80; color: #052E16; border-color: #16A34A; }
.rs-mu-col.is-wrong   { background: #F87171; color: #450A0A; border-color: #DC2626; }
.rs-mu-reveal { font-size: .8rem; color: var(--solo-text-mute); grid-column: 1 / -1; }
.rs-mu-score { font-family: var(--solo-font-head); font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); margin: .8rem 0 0; }
/* Pair-matching variant - <select> dropdown per row (chem C1-C3 pattern). */
.rs-mu-pair-select { padding: .4rem .65rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1.5px solid var(--solo-divider); border-radius: 8px; font-family: var(--solo-font-body); font-size: .9rem; color: var(--solo-heading-color, var(--solo-navy)); cursor: pointer; min-width: 130px; font-weight: 500; }
.rs-mu-pair-select:hover:not(:disabled) { border-color: var(--solo-mastery); }
.rs-mu-pair-select:focus { outline: none; border-color: var(--solo-mastery-deep); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18); }
.rs-mu-pair-select:disabled { opacity: 0.85; cursor: default; background: var(--solo-bg); }
.rs-mu-row.is-correct .rs-mu-pair-select { border-color: #16A34A; background: #DCFCE7; color: #14532D; }
.rs-mu-row.is-wrong   .rs-mu-pair-select { border-color: #DC2626; background: #FEE2E2; color: #7F1D1D; }

/* C3 calculation widget (chemistry-specific shape). */
.rs-c3calc { display: flex; flex-direction: column; gap: 1rem; }
.rs-c3calc-eyebrow { font-family: var(--solo-font-head); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--solo-mastery-deep, #B45309); display: block; margin-bottom: .35rem; }
.rs-c3calc-formula { background: var(--solo-mastery-pale, #FEF3C7); border: 1px solid var(--solo-mastery, #FCD34D); border-left: 4px solid var(--solo-mastery-deep, #B45309); border-radius: 10px; padding: .75rem 1rem; }
.rs-c3calc-formula-body { font-family: 'DM Sans', var(--solo-font-body); font-size: 1.05rem; font-weight: 700; color: #1E293B; }
.rs-c3calc-rearr { background: #F0FDFA; border: 1px solid #5EEAD4; border-radius: 10px; padding: .75rem 1rem; }
.rs-c3calc-rearr ol { padding-left: 1.2rem; margin: 0; }
.rs-c3calc-rearr li { font-size: .92rem; color: var(--solo-text); margin-bottom: .25rem; font-family: var(--solo-font-body); }
.rs-c3calc-worked { background: #ECFEFF; border: 1px solid #67E8F9; border-radius: 10px; padding: .75rem 1rem; }
.rs-c3calc-worked-q { font-weight: 600; color: var(--solo-heading-color, var(--solo-navy)); margin: 0 0 .55rem; font-family: var(--solo-font-body); }
.rs-c3calc-steps-toggle summary { cursor: pointer; font-weight: 600; color: #0E7490; font-size: .88rem; }
.rs-c3calc-steps-toggle summary:hover { color: #155E75; }
.rs-c3calc-steps { padding-left: 1.2rem; margin: .55rem 0 0; }
.rs-c3calc-steps li { font-family: 'DM Sans', var(--solo-font-body); font-size: .95rem; color: var(--solo-heading-color, var(--solo-navy)); margin-bottom: .35rem; }
.rs-c3calc-practice { background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 10px; padding: .85rem 1rem; }
.rs-c3calc-q { padding: .65rem .75rem; margin: .55rem 0; border-radius: 8px; border: 1px solid var(--solo-divider); background: var(--solo-bg); transition: background .15s, border-color .15s; }
.rs-c3calc-q.is-correct { background: #DCFCE7; border-color: #4ADE80; }
.rs-c3calc-q.is-wrong   { background: #FEE2E2; border-color: #FCA5A5; }
.rs-c3calc-q-text { margin: 0 0 .35rem; font-size: .93rem; color: var(--solo-heading-color, var(--solo-navy)); }
.rs-c3calc-hint { margin: 0 0 .45rem; }
.rs-c3calc-hint summary { cursor: pointer; font-size: .8rem; color: var(--solo-text-mute); font-style: italic; }
.rs-c3calc-hint p { margin: .25rem 0 0; font-size: .82rem; color: var(--solo-text-mute); font-style: italic; }
.rs-c3calc-input-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rs-c3calc-input { padding: .35rem .6rem; border: 1.5px solid var(--solo-divider); border-radius: 6px; font-family: 'DM Sans', monospace; font-size: .95rem; width: 110px; background: var(--solo-bg-elevated, #FFFFFF); color: var(--solo-heading-color, var(--solo-navy)); }
.rs-c3calc-input:focus { outline: none; border-color: var(--solo-mastery-deep, #B45309); box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18); }
.rs-c3calc-input:disabled { background: #F0FDF4; color: #15803D; font-weight: 600; }
.rs-c3calc-unit { font-size: .85rem; color: var(--solo-text-mute); font-weight: 500; }
.rs-c3calc-fb { margin: .35rem 0 0; font-size: .82rem; font-weight: 600; }
.rs-c3calc-q.is-correct .rs-c3calc-fb { color: #15803D; }
.rs-c3calc-q.is-wrong .rs-c3calc-fb   { color: #B91C1C; }

/* RP order - put method steps in sequence. */
.rs-ro-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-ro-placed { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .85rem; }
.rs-ro-slot { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: center; padding: .65rem .85rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 10px; }
.rs-ro-slot.is-correct { border-color: #4ADE80; background: #F0FDF4; }
.rs-ro-slot.is-wrong   { border-color: #F87171; background: #FEF2F2; }
.rs-ro-num { width: 26px; height: 26px; border-radius: 50%; background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--solo-font-head); font-size: .8rem; font-weight: 700; }
.rs-ro-text { color: var(--solo-text); }
.rs-ro-reveal { font-size: .8rem; color: var(--solo-text-mute); grid-column: 1 / -1; padding-left: 36px; }
.rs-ro-bank { padding: .85rem; background: var(--solo-bg); border-radius: 12px; }
.rs-ro-bank-eyebrow { font-family: var(--solo-font-head); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--solo-text-mute); margin: 0 0 .55rem; }
.rs-ro-chip { display: inline-block; margin: .25rem; padding: .5rem .85rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 999px; font-family: var(--solo-font-body); font-size: .88rem; color: var(--solo-text); cursor: pointer; text-align: left; max-width: 100%; }
.rs-ro-chip:hover { border-color: var(--solo-mastery); background: var(--solo-bg); }
.rs-ro-score { font-family: var(--solo-font-head); font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); margin: .8rem 0 0; }
.rs-ro-reset { margin-top: .85rem; }

/* RP blanks - sentences with wordbank fill. */
.rs-rb-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-rb-bank { padding: .85rem; background: var(--solo-bg); border-radius: 12px; margin-bottom: .85rem; }
.rs-rb-bank-eyebrow { font-family: var(--solo-font-head); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--solo-text-mute); margin: 0 0 .55rem; }
.rs-rb-chip { display: inline-block; margin: .25rem; padding: .4rem .85rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 999px; font-family: var(--solo-font-head); font-size: .82rem; font-weight: 600; color: var(--solo-text); cursor: pointer; }
.rs-rb-chip:hover:not(:disabled) { border-color: var(--solo-mastery); }
.rs-rb-chip.is-active { background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); border-color: var(--solo-mastery-deep); }
.rs-rb-chip.is-used { opacity: .35; cursor: default; }
.rs-rb-sentences { display: flex; flex-direction: column; gap: .55rem; }
.rs-rb-line { padding: .55rem .85rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 10px; line-height: 1.6; }
.rs-rb-line.is-correct { border-color: #4ADE80; background: #F0FDF4; }
.rs-rb-line.is-wrong   { border-color: #F87171; background: #FEF2F2; }
.rs-rb-blank { display: inline-block; min-width: 6em; padding: .15rem .55rem; margin: 0 .15rem; background: var(--solo-bg); border: 1px dashed var(--solo-divider); border-radius: 6px; font-family: var(--solo-font-head); font-weight: 600; color: var(--solo-mastery-deep); cursor: pointer; }
.rs-rb-blank:hover:not(:disabled) { border-color: var(--solo-mastery); background: var(--solo-bg-elevated, #FFFFFF); }
.rs-rb-blank.is-filled { background: var(--solo-bg-elevated, #FFFFFF); border-style: solid; border-color: var(--solo-mastery); }
.rs-rb-blank-placeholder { font-family: ui-monospace, monospace; opacity: .6; }
.rs-rb-reveal { display: block; font-size: .8rem; color: var(--solo-text-mute); margin-top: .35rem; }
.rs-rb-score { font-family: var(--solo-font-head); font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); margin: .8rem 0 0; }
.rs-rb-reset { margin-top: .85rem; }

/* Study + label diagram. */
.rs-study-diagram { margin: .85rem 0; text-align: center; }
.rs-study-diagram svg { max-width: 100%; height: auto; }
.rs-study-diagram figcaption { font-size: .85rem; color: var(--solo-text-mute); margin-top: .55rem; font-style: italic; }
.rs-ld-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-ld-figure { margin: 0 0 1rem; text-align: center; }
.rs-ld-figure svg { max-width: 100%; height: auto; }
.rs-ld-bank { padding: .85rem; background: var(--solo-bg); border-radius: 12px; margin-bottom: .85rem; }
.rs-ld-bank-eyebrow { font-family: var(--solo-font-head); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--solo-text-mute); margin: 0 0 .55rem; }
.rs-ld-chip { display: inline-block; margin: .25rem; padding: .4rem .85rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 999px; font-family: var(--solo-font-head); font-size: .82rem; font-weight: 600; color: var(--solo-text); cursor: pointer; }
.rs-ld-chip:hover { border-color: var(--solo-mastery); }
.rs-ld-chip.is-active { background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); border-color: var(--solo-mastery-deep); }
.rs-ld-rows { display: flex; flex-direction: column; gap: .45rem; }
.rs-ld-row { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: center; padding: .55rem .85rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 10px; }
.rs-ld-row.is-correct { border-color: #4ADE80; background: #F0FDF4; }
.rs-ld-row.is-wrong   { border-color: #F87171; background: #FEF2F2; }
.rs-ld-marker { display: inline-flex; align-items: center; gap: .55rem; background: transparent; border: 1px solid var(--solo-divider); border-radius: 8px; padding: .35rem .65rem; font-family: var(--solo-font-body); font-size: .9rem; color: var(--solo-text); cursor: pointer; }
.rs-ld-marker:hover:not(:disabled) { border-color: var(--solo-mastery); }
.rs-ld-num { width: 24px; height: 24px; border-radius: 50%; background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--solo-font-head); font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.rs-ld-slot { font-weight: 600; color: var(--solo-heading-color, var(--solo-navy)); }
.rs-ld-hint { font-size: .82rem; color: var(--solo-text-mute); font-style: italic; }
.rs-ld-reveal { font-size: .8rem; color: var(--solo-text-mute); grid-column: 1 / -1; }
.rs-ld-score { font-family: var(--solo-font-head); font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); margin: .8rem 0 0; }
.rs-ld-reset { margin-top: .85rem; }

/* Calculation - worked example with practice block. */
.rs-calc-desc { color: var(--solo-text-mute); margin: 0 0 1rem; }
.rs-calc-card { padding: 1rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 14px; margin-bottom: .85rem; }
.rs-calc-q { font-family: var(--solo-font-head); font-weight: 600; color: var(--solo-heading-color, var(--solo-navy)); margin: 0 0 .65rem; }
.rs-calc-textarea { width: 100%; min-height: 80px; padding: .55rem .7rem; border: 1px solid var(--solo-divider); border-radius: 10px; font-family: ui-monospace, monospace; font-size: .92rem; box-sizing: border-box; }
.rs-calc-reveal { margin-top: .85rem; padding: .85rem 1rem; background: var(--solo-bg); border-left: 3px solid var(--solo-mastery); border-radius: 0 10px 10px 0; }
.rs-calc-steps { margin: 0 0 .55rem; padding-left: 1.4rem; }
.rs-calc-answer { font-family: var(--solo-font-head); margin: 0; color: var(--solo-heading-color, var(--solo-navy)); }

/* Sort-sequence - rearrange items via up/down buttons. */
.rs-ss-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-ss-list { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .85rem; }
.rs-ss-row { display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: center; padding: .65rem .85rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 10px; }
.rs-ss-row.is-correct { border-color: #4ADE80; background: #F0FDF4; }
.rs-ss-row.is-wrong { border-color: #F87171; background: #FEF2F2; }
.rs-ss-num { width: 26px; height: 26px; border-radius: 50%; background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--solo-font-head); font-size: .8rem; font-weight: 700; }
.rs-ss-text { color: var(--solo-text); }
.rs-ss-btns { display: inline-flex; gap: .25rem; }
.rs-ss-btn { width: 32px; height: 32px; background: var(--solo-bg); border: 1px solid var(--solo-divider); border-radius: 8px; font-size: 1rem; color: var(--solo-text); cursor: pointer; }
.rs-ss-btn:hover:not(:disabled) { background: var(--solo-bg-elevated, #FFFFFF); border-color: var(--solo-mastery); }
.rs-ss-btn:disabled { opacity: .35; cursor: default; }
.rs-ss-score { font-family: var(--solo-font-head); font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); margin: .8rem 0 0; }
.rs-ss-score.is-perfect { color: #15803D; }
.rs-ss-reveal { margin: .35rem 0 0; padding-left: 1.2rem; }
.rs-ss-reveal li { margin-bottom: .25rem; }

/* Tick-list - read-only objective checklist (auto-ticks as KCs complete). */
.rs-tl-hint { font-size: .85rem; color: var(--solo-text-mute); margin: 0 0 .85rem; font-style: italic; }
.rs-tl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.rs-tl-row { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem .85rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 10px; }
.rs-tl-box { flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; background: var(--solo-bg-elevated, #FFFFFF); border: 2px solid var(--solo-divider); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--solo-text-mute); }
.rs-tl-box.is-done { background: var(--solo-mastery); border-color: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); }
.rs-tl-text { color: var(--solo-text); padding-top: .15rem; }
.rs-tl-done { text-align: center; padding: 1.4rem 1.2rem; background: linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 100%); border: 1px solid var(--solo-divider); border-radius: 14px; margin-bottom: 1rem; }
.rs-tl-done-emoji { font-size: 2rem; margin-bottom: .4rem; }

/* Highlight - click words to mark them; submit reveals key terms. */
.rs-hl-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-hl-passage { padding: 1rem 1.1rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 12px; line-height: 1.85; margin-bottom: .85rem; }
.rs-hl-w { cursor: pointer; padding: 0 1px; border-radius: 4px; transition: background .12s ease; }
.rs-hl-w:hover { background: var(--solo-bg); }
.rs-hl-w.is-on { background: var(--solo-mastery-pale, #FEF3C7); color: var(--solo-mastery-deep, #92400E); font-weight: 600; }
.rs-hl-w.is-ok { background: #DCFCE7; color: #166534; font-weight: 600; }
.rs-hl-w.is-bad { background: #FEE2E2; color: #991B1B; font-weight: 600; text-decoration: line-through; }
.rs-hl-w.is-miss { background: #FED7AA; color: #9A3412; font-weight: 600; }
.rs-hl-w[aria-disabled="true"] { cursor: default; }
.rs-hl-w[aria-disabled="true"]:hover { background: inherit; }
.rs-hl-score { font-family: var(--solo-font-head); font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); margin: .8rem 0 0; }
.rs-hl-score.is-perfect { color: #15803D; }

/* Vocab Test - definition-recall quiz. */
.rs-vt-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-vt-pos { font-family: var(--solo-font-head); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--solo-mastery-deep); margin: 0 0 .5rem; }
.rs-vt-q { font-family: var(--solo-font-head); font-size: 1.05rem; font-weight: 600; color: var(--solo-heading-color, var(--solo-navy)); margin: 0 0 .85rem; }
.rs-vt-opts { display: grid; grid-template-columns: 1fr; gap: .45rem; margin-bottom: .85rem; }
@media (min-width: 700px) { .rs-vt-opts { grid-template-columns: 1fr 1fr; } }
.rs-vt-opt { text-align: left; padding: .7rem .9rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 10px; font-family: var(--solo-font-body); font-size: .92rem; color: var(--solo-text); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.rs-vt-opt:hover:not(:disabled) { border-color: var(--solo-mastery); background: var(--solo-bg); }
.rs-vt-opt.is-correct { background: #DCFCE7; border-color: #4ADE80; color: #166534; font-weight: 500; }
.rs-vt-opt.is-wrong { background: #FEE2E2; border-color: #F87171; color: #991B1B; }
.rs-vt-opt.is-reveal { background: #ECFDF5; border-color: #6EE7B7; color: #047857; font-style: italic; }
.rs-vt-fb { padding: .55rem .85rem; border-radius: 8px; font-weight: 500; margin-bottom: .85rem; }
.rs-vt-fb.is-correct { background: #DCFCE7; color: #166534; }
.rs-vt-fb.is-wrong { background: #FEE2E2; color: #991B1B; }
.rs-vt-score { text-align: center; padding: 2rem 1.4rem; background: linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 100%); border: 1px solid var(--solo-divider); border-radius: 14px; }
.rs-vt-score-num { font-family: var(--solo-font-head); font-size: 2.5rem; font-weight: 700; color: var(--solo-mastery-deep); margin: 0 0 .55rem; }
.rs-vt-score-msg { font-family: var(--solo-font-body); font-size: .95rem; color: var(--solo-text); margin: 0 0 1.1rem; }

/* Dice Review - 6x6 grid + 2 dice + vocab Qs to clear cells. */
.rs-dr-instr-top { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-dr-status { font-family: var(--solo-font-head); font-size: .9rem; font-weight: 600; color: var(--solo-heading-color, var(--solo-navy)); margin-bottom: .35rem; }
.rs-dr-progress { width: 100%; height: 6px; background: var(--solo-divider); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; }
.rs-dr-progress-fill { height: 100%; background: linear-gradient(90deg, var(--solo-mastery), var(--solo-mastery-deep)); transition: width .3s ease; }
.rs-dr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; margin-bottom: 1rem; }
.rs-dr-cell { aspect-ratio: 1; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: var(--solo-font-head); font-size: .75rem; color: var(--solo-text-mute); position: relative; transition: background .12s ease, border-color .12s ease; }
.rs-dr-coord { font-size: .6rem; opacity: .5; position: absolute; top: 3px; left: 4px; }
.rs-dr-pick { font-size: .68rem; font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); }
.rs-dr-cell.is-available { background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); border-color: var(--solo-mastery-deep); cursor: pointer; font-weight: 700; }
.rs-dr-cell.is-available:hover { background: var(--solo-mastery-deep); color: #FFFFFF; }
.rs-dr-cell.is-answering { background: var(--solo-mastery, #FCD34D); border-color: var(--solo-mastery-deep, #B45309); color: var(--solo-mastery-deep, #92400E); }
.rs-dr-cell.is-done { background: #DCFCE7; border-color: #4ADE80; color: #166534; }
.rs-dr-cell.is-done::after { content: '✓'; font-size: 1rem; font-weight: 700; color: #16A34A; }
.rs-dr-dice-row { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-bottom: .85rem; }
.rs-dr-die-wrap { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.rs-dr-die-lbl { font-family: var(--solo-font-head); font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--solo-text-mute); }
.rs-dr-die { width: 48px; height: 48px; color: var(--solo-heading-color, var(--solo-navy)); }
.rs-dr-roll { padding: .65rem 1.3rem; }
.rs-dr-instr { text-align: center; font-size: .92rem; color: var(--solo-text); margin-bottom: 1rem; }
.rs-dr-panel { background: var(--solo-bg); border: 1px solid var(--solo-divider); border-radius: 12px; padding: 1rem 1.2rem; }
.rs-dr-clue-lbl { font-family: var(--solo-font-head); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--solo-mastery-deep); margin-bottom: .35rem; }
.rs-dr-clue { font-family: var(--solo-font-head); font-size: 1.05rem; font-weight: 600; color: var(--solo-heading-color, var(--solo-navy)); margin-bottom: .85rem; }
.rs-dr-opts { display: grid; grid-template-columns: 1fr; gap: .45rem; margin-bottom: .85rem; }
@media (min-width: 700px) { .rs-dr-opts { grid-template-columns: 1fr 1fr; } }
.rs-dr-opt { text-align: left; padding: .7rem .9rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 10px; font-family: var(--solo-font-body); font-size: .92rem; color: var(--solo-text); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.rs-dr-opt:hover:not(:disabled) { border-color: var(--solo-mastery); background: var(--solo-bg); }
.rs-dr-opt.is-correct { background: #DCFCE7; border-color: #4ADE80; color: #166534; font-weight: 500; }
.rs-dr-opt.is-wrong { background: #FEE2E2; border-color: #F87171; color: #991B1B; }
.rs-dr-opt.is-reveal { background: #ECFDF5; border-color: #6EE7B7; color: #047857; font-style: italic; }

/* Venn Diagram - tap chips into left/both/right zones. */
.rs-vd-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-vd-pool { padding: .85rem; background: var(--solo-bg); border-radius: 12px; margin-bottom: .85rem; }
.rs-vd-pool-lbl { font-family: var(--solo-font-head); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--solo-text-mute); margin-bottom: .55rem; }
.rs-vd-zones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .55rem; margin-bottom: .85rem; }
@media (max-width: 600px) { .rs-vd-zones { grid-template-columns: 1fr; } }
.rs-vd-zone { background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 12px; padding: .65rem .8rem; min-height: 110px; cursor: pointer; transition: border-color .12s ease; }
.rs-vd-zone:hover { border-color: var(--solo-mastery); }
.rs-vd-zone.is-left .rs-vd-zone-hd { color: #0EA5E9; }
.rs-vd-zone.is-both .rs-vd-zone-hd { color: var(--solo-mastery-deep); }
.rs-vd-zone.is-right .rs-vd-zone-hd { color: #F59E0B; }
.rs-vd-zone-hd { font-family: var(--solo-font-head); font-size: .85rem; font-weight: 700; margin-bottom: .55rem; text-align: center; }
.rs-vd-zone-bd { min-height: 64px; display: flex; flex-wrap: wrap; gap: .35rem; align-content: flex-start; }
.rs-vd-chip { display: inline-block; padding: .4rem .75rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 999px; font-family: var(--solo-font-body); font-size: .87rem; color: var(--solo-text); cursor: pointer; margin: .15rem; transition: border-color .1s ease, background .1s ease; }
.rs-vd-chip:hover:not(:disabled) { border-color: var(--solo-mastery); background: var(--solo-bg); }
.rs-vd-chip.is-sel { background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); border-color: var(--solo-mastery-deep); font-weight: 600; }
.rs-vd-chip.is-placed { font-size: .82rem; }
.rs-vd-chip.is-correct { background: #DCFCE7; border-color: #4ADE80; color: #166534; }
.rs-vd-chip.is-wrong { background: #FEE2E2; border-color: #F87171; color: #991B1B; }
.rs-vd-actions { display: flex; gap: .55rem; }
.rs-vd-fb { margin-top: .85rem; padding: .65rem .9rem; background: var(--solo-bg); border-left: 3px solid var(--solo-mastery-deep); border-radius: 0 8px 8px 0; font-size: .92rem; }
.rs-vd-fb.is-perfect { background: #F0FDF4; border-left-color: #16A34A; color: #166534; }

/* Evaluation - self-reflection multi-question walker. */
.rs-ev-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-ev-pips { display: flex; gap: .4rem; margin-bottom: .6rem; }
.rs-ev-pip { width: 28px; height: 5px; background: var(--solo-divider); border-radius: 999px; }
.rs-ev-pip.is-active { background: var(--solo-mastery); }
.rs-ev-pip.is-done { background: var(--solo-mastery-deep); }
.rs-ev-pos { font-family: var(--solo-font-head); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--solo-text-mute); margin: 0 0 .55rem; }
.rs-ev-cmd { display: inline-block; background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); padding: .2rem .65rem; border-radius: 999px; font-family: var(--solo-font-head); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .55rem; }
.rs-ev-q { font-family: var(--solo-font-head); font-size: 1.05rem; font-weight: 600; color: var(--solo-heading-color, var(--solo-navy)); margin: 0 0 .55rem; }
.rs-ev-hint { font-size: .85rem; color: var(--solo-text-mute); margin: 0 0 .55rem; }
.rs-ev-calc-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .55rem; }
.rs-ev-cinp { padding: .55rem .8rem; border: 1px solid var(--solo-divider); border-radius: 8px; font-family: var(--solo-font-body); font-size: 1rem; width: 12rem; }
.rs-ev-cinp:focus { outline: 2px solid var(--solo-mastery); outline-offset: 1px; border-color: var(--solo-mastery-deep); }
.rs-ev-unit { font-size: .88rem; color: var(--solo-text-mute); }
.rs-ev-ta { width: 100%; min-height: 110px; padding: .65rem .8rem; border: 1px solid var(--solo-divider); border-radius: 10px; font-family: var(--solo-font-body); font-size: .95rem; line-height: 1.5; resize: vertical; box-sizing: border-box; margin-bottom: .55rem; }
.rs-ev-ta:focus { outline: 2px solid var(--solo-mastery); outline-offset: 1px; border-color: var(--solo-mastery-deep); }
.rs-ev-ma { padding: .85rem 1rem; background: var(--solo-bg); border-left: 3px solid var(--solo-mastery-deep); border-radius: 0 10px 10px 0; margin-top: .55rem; font-size: .93rem; }
.rs-ev-ma.is-correct { border-left-color: #16A34A; color: #166534; background: #F0FDF4; }
.rs-ev-ma.is-wrong { border-left-color: #DC2626; color: #991B1B; background: #FEF2F2; }
.rs-ev-ma.is-visible { animation: rsIn .18s ease; }
.rs-ev-actions { display: flex; gap: .65rem; margin-top: 1.1rem; }
.rs-ev-done { padding: 1.4rem 1.5rem; background: linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 100%); border: 1px solid var(--solo-divider); border-radius: 14px; text-align: center; }

/* Identify-Me - clue-drip mystery rounds. */
.rs-im-instr { color: var(--solo-text-mute); font-size: .9rem; margin: 0 0 .85rem; }
.rs-im-badge { display: inline-block; background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); padding: .25rem .75rem; border-radius: 999px; font-family: var(--solo-font-head); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .65rem; }
.rs-im-bubble { background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.rs-im-mystery { font-family: var(--solo-font-head); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--solo-mastery-deep); margin: 0 0 .35rem; }
.rs-im-intro { color: var(--solo-text); margin: 0 0 .85rem; font-style: italic; }
.rs-im-clues { display: flex; flex-direction: column; gap: .45rem; }
.rs-im-clue { background: var(--solo-bg); padding: .55rem .85rem; border-radius: 8px; font-size: .92rem; color: var(--solo-text); animation: rsIn .2s ease; }
.rs-im-clue-num { font-family: var(--solo-font-head); font-weight: 700; color: var(--solo-mastery-deep); margin-right: .45rem; }
.rs-im-ctrl { margin-top: 1rem; }
.rs-im-cats { display: grid; grid-template-columns: 1fr; gap: .45rem; }
@media (min-width: 700px) { .rs-im-cats { grid-template-columns: 1fr 1fr; } }
.rs-im-cat { padding: .65rem .9rem; background: var(--solo-bg-elevated, #FFFFFF); border: 1px solid var(--solo-divider); border-radius: 10px; font-family: var(--solo-font-head); font-weight: 600; color: var(--solo-text); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.rs-im-cat:hover { border-color: var(--solo-mastery); background: var(--solo-bg); }
.rs-im-feedback { padding: .7rem .95rem; border-radius: 10px; margin-bottom: .65rem; font-size: .95rem; }
.rs-im-feedback.is-correct { background: #DCFCE7; color: #166534; }
.rs-im-feedback.is-wrong { background: #FEE2E2; color: #991B1B; }
.rs-im-result { padding: 1.4rem 1.5rem; background: var(--solo-bg); border: 1px solid var(--solo-divider); border-radius: 14px; text-align: center; }
.rs-im-result.is-perfect { background: linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 100%); border-color: #6EE7B7; }

/* Lab Legend - scientist spotlight card. */
.rs-lab-legend { background: linear-gradient(135deg, var(--solo-mastery-pale, #FEF3C7) 0%, #FFFFFF 100%); border: 1px solid var(--solo-mastery, #FCD34D); border-radius: 16px; padding: 1.25rem 1.4rem; margin: 1rem 0; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.rs-lab-legend[data-legend-id]:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(180, 83, 9, .12); border-color: #F59E0B; }
.rs-legend-eyebrow { font-family: var(--solo-font-head); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--solo-mastery-deep, #92400E); margin: 0 0 .85rem; }
.rs-legend-card { display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 600px) {
  .rs-legend-card { grid-template-columns: 72px 1fr; gap: .85rem; }
}
.rs-legend-portrait { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--solo-mastery, #FCD34D); background: var(--solo-bg-elevated, #FFFFFF); }
.rs-legend-portrait-placeholder { width: 96px; height: 96px; border-radius: 50%; background: var(--solo-mastery-deep, #B45309); color: var(--solo-mastery-pale, #FEF3C7); display: inline-flex; align-items: center; justify-content: center; font-family: var(--solo-font-head); font-size: 2.2rem; font-weight: 700; border: 3px solid var(--solo-mastery, #FCD34D); }
@media (max-width: 600px) {
  .rs-legend-portrait, .rs-legend-portrait-placeholder { width: 72px; height: 72px; font-size: 1.6rem; }
}
.rs-legend-body { min-width: 0; }
.rs-legend-name { font-family: var(--solo-font-head); font-size: 1.2rem; font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); margin: 0 0 .25rem; line-height: 1.15; }
.rs-legend-wing { font-family: var(--solo-font-head); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--solo-mastery-deep, #B45309); margin: 0 0 .15rem; }
.rs-legend-dates { font-family: var(--solo-font-body); font-size: .85rem; color: var(--solo-text-mute); margin: 0 0 .55rem; font-style: italic; }
.rs-legend-contribution { color: var(--solo-text); line-height: 1.55; margin: 0 0 .5rem; }
.rs-legend-cta { font-family: var(--solo-font-head); font-size: .78rem; font-weight: 600; color: var(--solo-mastery-deep); margin: 0; }
body[data-subject="chemistry"] .rs-legend-cta { color: var(--solo-mastery-deep, #B45309); }

/* Mission + mastery close-out cards. */
.rs-mission, .rs-mastery { text-align: center; padding: 2rem 1.5rem; background: linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 100%); border: 1px solid var(--solo-divider); border-radius: 16px; }
.rs-mission-badge, .rs-mastery-badge { display: inline-block; width: 56px; height: 56px; line-height: 56px; border-radius: 50%; background: var(--solo-mastery); color: var(--solo-heading-color, var(--solo-navy)); font-size: 1.6rem; font-weight: 700; margin: 0 auto .85rem; }
.rs-mastery-badge { background: linear-gradient(135deg, var(--solo-mastery) 0%, var(--solo-mastery, #FCD34D) 100%); font-size: 1.8rem; }
.rs-mission-tag, .rs-mastery-tag { font-family: var(--solo-font-head); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--solo-mastery-deep); margin: 0 0 .35rem; }
.rs-mission h2, .rs-mastery h2 { font-family: var(--solo-font-head); font-size: 1.4rem; font-weight: 700; color: var(--solo-heading-color, var(--solo-navy)); margin: 0 0 .65rem; }
.rs-mission p, .rs-mastery p { color: var(--solo-text); margin: 0 0 1rem; }
.rs-mission-xp { font-family: var(--solo-font-head); font-size: 1.2rem; color: var(--solo-mastery-deep); margin: -.2rem 0 .85rem !important; }
.rs-mission-xp strong { font-size: 1.4rem; color: var(--solo-mastery-deep); }

/* "Section N of M" beacon - reassures ADHD / working-memory students they
   haven't lost track. Renders inline inside the section pill, but in a
   softer weight + colour so it reads as supporting info, not as the label. */
.rs-section-progress {
  font-weight: 500;
  font-size: .85em;
  color: var(--solo-text-mute, #64748B);
  margin-left: .3rem;
  white-space: nowrap;
}

/* Chemistry-formula clickable chip. Wraps formulas like Cu²⁺ / H₂O in a
   subtle underline + cursor so dyslexic / EAL students know they can tap
   it for a plain-English translation. The tooltip + aria-label are set
   by SoloFormulaReader.decorateLab() per element. Cognition-side stays
   plain text (decoration is lab-only). */
.solo-formula {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--solo-mastery-deep, #0F766E);
  text-underline-offset: 2px;
  cursor: help;
}
.solo-formula:hover, .solo-formula:focus-visible {
  background: rgba(45, 212, 191, 0.12);
  outline: none;
  border-radius: 3px;
}
body.dark-mode .solo-formula:hover, body.dark-mode .solo-formula:focus-visible {
  background: rgba(45, 212, 191, 0.22);
}

/* Crossword (renderer v0.9.0) */
.rs-xw { max-width: 100%; }
.rs-xw-intro { margin: 0 0 .6rem; color: var(--solo-text); }
.rs-xw-grid-wrap { overflow-x: auto; margin: .85rem 0; }
.rs-xw-table { border-collapse: collapse; margin: 0 auto; }
.rs-xw-table td { width: 32px; height: 32px; padding: 0; position: relative; }
.rs-xw-black { background: var(--solo-navy); }
.rs-xw-white { background: var(--solo-bg-elevated, #FFFFFF); border: 1.5px solid var(--solo-divider); }
.rs-xw-white.is-hl    { background: var(--solo-mastery-pale) !important; border-color: var(--solo-mastery) !important; }
.rs-xw-white.is-ok    { background: #DCFCE7 !important; border-color: #22C55E !important; }
.rs-xw-white.is-wrong { background: #FEE2E2 !important; border-color: #EF4444 !important; }
.rs-xw-white.is-pick  { background: var(--solo-mastery-pale, #FEF3C7) !important; border-color: #F59E0B !important; cursor: crosshair !important; }
.rs-xw-inp {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: transparent;
  text-align: center; font-size: .88rem; font-weight: 700;
  text-transform: uppercase;
  font-family: var(--solo-font-body); color: var(--solo-heading-color, var(--solo-navy));
  padding: 0; padding-top: 9px; box-sizing: border-box;
  cursor: pointer; caret-color: var(--solo-mastery-deep);
}
.rs-xw-inp:focus { outline: none; background: rgba(45, 212, 191, 0.14); }
.rs-xw-inp.is-hint { color: var(--solo-mastery-deep, #B45309) !important; font-weight: 800 !important; }
.rs-xw-num { position: absolute; top: 1px; left: 2px; font-size: 7px; font-weight: 700; color: var(--solo-text-mute); line-height: 1; pointer-events: none; z-index: 1; font-family: var(--solo-font-head); }
.rs-xw-clues-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1rem 0; }
.rs-xw-clue-hd { font-family: var(--solo-font-head); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--solo-mastery-deep); margin-bottom: .45rem; padding-bottom: .25rem; border-bottom: 2px solid var(--solo-mastery); }
.rs-xw-clue { font-size: .92rem; color: var(--solo-heading-color, var(--solo-navy)); padding: .35rem .45rem; border-radius: 6px; cursor: pointer; line-height: 1.45; margin-bottom: .2rem; font-family: var(--solo-font-body); }
.rs-xw-clue:hover  { background: var(--solo-bg); }
.rs-xw-clue.is-active { background: var(--solo-mastery-pale); font-weight: 600; }
.rs-xw-hint-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .7rem 0 .4rem; }
.rs-xw-hbtn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .4rem .8rem;
  border: 1.5px solid var(--solo-divider); border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  font-family: var(--solo-font-head);
  cursor: pointer; background: var(--solo-bg-elevated, #FFFFFF); color: var(--solo-heading-color, var(--solo-navy));
  min-height: 36px;
  transition: background .12s ease, border-color .12s ease;
}
.rs-xw-hbtn:hover:not(:disabled) { background: var(--solo-bg); border-color: var(--solo-text-mute); }
.rs-xw-hbtn:disabled { opacity: .35; cursor: not-allowed; }
.rs-xw-hbtn-count { font-size: .72rem; font-weight: 400; color: var(--solo-text-mute); margin-left: 2px; }
.rs-xw-pick-msg { font-size: .85rem; color: var(--solo-mastery-deep, #92400E); font-weight: 600; padding: .35rem .65rem; background: var(--solo-mastery-pale, #FEF3C7); border-radius: 6px; border: 1px solid #F59E0B; margin: .35rem 0; display: none; }
.rs-xw-pick-msg.vis { display: block; }
@media (max-width: 560px) { .rs-xw-clues-wrap { grid-template-columns: 1fr; } }

/* ──────────────────────────────────────────────────────────────────────
   Content tables - .cb-tbl + plain <table> inside .cb / .rs-body. Screen
   styling only (print styles for these live in css/solocogs-theme.css).
   ────────────────────────────────────────────────────────────────────── */
.cb table, .cb .cb-tbl, .rs-body table, .rs-body .cb-tbl {
  width: 100%;
  margin: 1rem 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--solo-divider, #E2E8F0);
  border-radius: 10px;
  overflow: hidden;
  font-size: .92rem;
  line-height: 1.5;
  background: var(--solo-bg-elevated, #FFFFFF);
}
.cb table thead, .cb .cb-tbl thead, .rs-body table thead, .rs-body .cb-tbl thead {
  background: var(--solo-bg, #F8FAFC);
}
.cb table th, .cb .cb-tbl th, .rs-body table th, .rs-body .cb-tbl th {
  text-align: left;
  font-weight: 700;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--solo-divider, #E2E8F0);
  color: var(--solo-text, #334155);
}
.cb table td, .cb .cb-tbl td, .rs-body table td, .rs-body .cb-tbl td {
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--solo-divider, #E2E8F0);
  vertical-align: top;
}
.cb table tbody tr:last-child td,
.cb .cb-tbl tbody tr:last-child td,
.rs-body table tbody tr:last-child td,
.rs-body .cb-tbl tbody tr:last-child td { border-bottom: 0; }
.cb table tbody tr:nth-child(even) td,
.cb .cb-tbl tbody tr:nth-child(even) td,
.rs-body table tbody tr:nth-child(even) td,
.rs-body .cb-tbl tbody tr:nth-child(even) td {
  background: rgba(248, 250, 252, .5);
}
@media (max-width: 560px) {
  .cb table, .cb .cb-tbl, .rs-body table, .rs-body .cb-tbl {
    display: block;
    overflow-x: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Shell Builder (.spb-*) - periodic table modal with click-to-place
   electron-dot/cross practice. Launched by SoloShellBuilder.open().
   ────────────────────────────────────────────────────────────────────── */
.spb-launcher {
  position: fixed; left: 14px; bottom: 14px; z-index: 220;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--solo-mastery-deep, var(--solo-mastery-deep, #B45309));
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: .65rem 1.05rem;
  font-family: var(--solo-font-head, 'Lexend', sans-serif);
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(180, 83, 9, 0.32), 0 0 0 4px rgba(245, 158, 11, 0.18);
  transition: transform .15s, box-shadow .15s;
}
.spb-launcher:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(180, 83, 9, 0.38), 0 0 0 5px rgba(245, 158, 11, 0.22); }
.spb-launcher-icon { font-size: 1.05rem; line-height: 1; }
@media (max-width: 560px) { .spb-launcher-label { display: none; } .spb-launcher { padding: .6rem .75rem; } }

.spb-modal {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(15, 23, 42, 0.55);
  display: none; align-items: center; justify-content: center;
  padding: 1rem;
}
.spb-modal.is-open { display: flex; animation: spbFade .18s ease; }
@keyframes spbFade { from { opacity: 0; } to { opacity: 1; } }
body.spb-modal-open { overflow: hidden; }

.spb-card {
  background: var(--solo-bg-elevated, #FFFFFF);
  border-radius: 16px;
  width: 100%;
  max-width: 1080px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
}
.spb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--solo-divider, #E2E8F0);
}
.spb-title {
  margin: 0;
  font-family: var(--solo-font-head, 'Lexend', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--solo-heading-color, var(--solo-navy, #1E293B));
}
.spb-close {
  background: none; border: none;
  font-size: 1.7rem; line-height: 1;
  color: var(--solo-text-mute, #64748B);
  cursor: pointer;
  padding: 0 .35rem;
  border-radius: 6px;
}
.spb-close:hover { background: var(--solo-bg, #F8FAFC); color: var(--solo-heading-color, var(--solo-navy, #1E293B)); }

/* Tab bar (Single atoms / Covalent molecules) - sits between title + close */
.spb-tabs { display: inline-flex; gap: 4px; padding: 3px; background: var(--solo-bg, #F8FAFC); border-radius: 999px; margin: 0 auto 0 1rem; }
.spb-tab {
  background: transparent; border: none;
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--solo-font-head, 'Lexend', sans-serif);
  font-size: .82rem; font-weight: 600;
  color: var(--solo-text-mute, #64748B);
  cursor: pointer; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.spb-tab.is-active { background: var(--solo-bg-elevated, #FFFFFF); color: var(--solo-heading-color, var(--solo-navy, #1E293B)); box-shadow: 0 1px 3px rgba(15,23,42,.1); }
@media (max-width: 560px) { .spb-tab { padding: 6px 10px; font-size: .76rem; } }

/* Covalent molecule picker (left pane) */
.spb-mol-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.spb-mol-cell {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: .6rem .75rem;
  border: 1.5px solid var(--solo-divider, #E2E8F0);
  border-radius: 10px;
  background: var(--solo-bg-elevated, #FFFFFF);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.spb-mol-cell:hover { transform: translateY(-1px); border-color: var(--solo-mastery, #2DD4BF); }
.spb-mol-cell.is-selected { border-color: var(--solo-mastery-deep, #14B8A6); box-shadow: 0 0 0 2px var(--solo-mastery-pale, #CCFBF1); }
.spb-mol-formula { font-family: var(--solo-font-head, 'Lexend', sans-serif); font-weight: 700; font-size: 1rem; color: var(--solo-heading-color, var(--solo-navy, #1E293B)); }
.spb-mol-name { font-size: .74rem; color: var(--solo-text-mute, #64748B); }
.spb-mol-hint { font-size: .78rem; color: var(--solo-text-mute, #64748B); line-height: 1.5; margin: .85rem 0 0; }
.spb-mol-svg { width: 100%; max-width: 360px; height: auto; }
@media (max-width: 560px) { .spb-mol-list { grid-template-columns: 1fr; } }

.spb-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem;
  overflow-y: auto;
}
@media (max-width: 760px) { .spb-split { grid-template-columns: 1fr; } }

/* ── Periodic table (left pane) ── */
.spb-pt-grid {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 4px;
  min-height: 280px;
}
.spb-pt-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1.5px solid transparent;
  border-radius: 6px;
  padding: 4px 2px;
  cursor: pointer;
  font-family: var(--solo-font-head, 'Lexend', sans-serif);
  color: var(--solo-heading-color, var(--solo-navy, #1E293B));
  transition: transform .12s, border-color .12s;
  min-height: 42px;
}
.spb-pt-cell:hover { transform: translateY(-1px); border-color: var(--solo-navy, #1E293B); }
.spb-pt-cell.is-selected { border-color: var(--solo-navy, #1E293B); box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.18); }
.spb-pt-z { font-size: .58rem; font-weight: 500; opacity: .75; line-height: 1; }
.spb-pt-sym { font-size: .92rem; font-weight: 700; line-height: 1.1; }
@media (max-width: 760px) {
  .spb-pt-grid { min-height: 220px; }
  .spb-pt-cell { min-height: 32px; padding: 2px 1px; }
  .spb-pt-z { font-size: .48rem; }
  .spb-pt-sym { font-size: .75rem; }
}

.spb-pt-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: .85rem;
}
.spb-pt-legend-item {
  font-size: .72rem;
  font-weight: 600;
  color: var(--solo-heading-color, var(--solo-navy, #1E293B));
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.15);
}

/* ── Atom display (right pane) ── */
.spb-right { display: flex; flex-direction: column; }
.spb-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--solo-text-mute, #64748B);
  font-style: italic;
  background: var(--solo-bg, #F8FAFC);
  border-radius: 10px;
}
.spb-atom-header { margin-bottom: .55rem; }
.spb-atom-name {
  font-family: var(--solo-font-head, 'Lexend', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--solo-heading-color, var(--solo-navy, #1E293B));
}
.spb-atom-meta {
  font-size: .82rem;
  color: var(--solo-text-mute, #64748B);
  margin-top: 2px;
}
.spb-mode-tabs {
  display: flex; gap: 4px;
  margin: .55rem 0;
  padding: 3px;
  background: var(--solo-bg, #F8FAFC);
  border-radius: 999px;
  width: fit-content;
}
.spb-mode-tab {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--solo-font-body, system-ui, sans-serif);
  font-size: .82rem;
  font-weight: 600;
  color: var(--solo-text-mute, #64748B);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.spb-mode-tab.is-active {
  background: var(--solo-bg-elevated, #FFFFFF);
  color: var(--solo-heading-color, var(--solo-navy, #1E293B));
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}
.spb-atom-host {
  display: flex; justify-content: center;
  margin: .5rem 0;
}
.spb-atom-svg { width: 100%; max-width: 360px; height: auto; }
.spb-slot { cursor: pointer; transition: fill .1s, stroke .1s; }
.spb-slot:hover { fill: rgba(245, 158, 11, 0.25); stroke: var(--solo-mastery-deep, #B45309); }

.spb-tray {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: .25rem 0 .65rem;
}
.spb-tray-label { font-size: .82rem; color: var(--solo-text-mute, #64748B); margin-right: .25rem; }
.spb-token {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: 6px 12px;
  border: 1.5px solid var(--solo-divider, #E2E8F0);
  background: var(--solo-bg-elevated, #FFFFFF);
  border-radius: 999px;
  font-family: var(--solo-font-body, system-ui, sans-serif);
  font-size: .82rem;
  font-weight: 600;
  color: var(--solo-text, #334155);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.spb-token:hover { border-color: var(--solo-navy, #1E293B); }
.spb-token.is-active { border-color: var(--solo-navy, #1E293B); background: var(--solo-navy, #1E293B); color: #FFFFFF; }
.spb-token-reset { color: var(--solo-mastery-deep, #B45309); border-color: rgba(180, 83, 9, .35); }
.spb-token-check { color: #FFFFFF; background: var(--solo-mastery-deep, var(--solo-mastery-deep, #B45309)); border-color: var(--solo-mastery-deep, var(--solo-mastery-deep, #B45309)); }
.spb-token-check:hover { background: var(--solo-mastery-deep, #92400E); border-color: var(--solo-mastery-deep, #92400E); color: #FFFFFF; }

.spb-hint {
  font-size: .8rem;
  color: var(--solo-text-mute, #64748B);
  margin: .45rem 0;
  line-height: 1.5;
}
.spb-feedback {
  margin-top: .55rem;
  padding: .65rem .85rem;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
}
.spb-feedback:empty { display: none; }
.spb-feedback.is-correct { background: #DCFCE7; color: #166534; border-left: 3px solid #22C55E; }
.spb-feedback.is-wrong { background: #FEE2E2; color: #991B1B; border-left: 3px solid #EF4444; }