/* ============================================================
   revision.css — Revision-notes-specific styles
   Loads after page.css on /resources pages.
============================================================ */

/* ============================================================
   META BADGES — for hero (AQA, Paper 1 etc)
============================================================ */
.rn-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.rn-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  border-radius: 999px;
  font-weight: 500;
  color: var(--ink-soft);
}
.rn-meta-badge.aqa {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.rn-meta-badge.paper1,
.rn-meta-badge.paper2 {
  color: var(--ink);
}
/* A-level-only topic badge (7405 content not examined at AS) — green reads
   as "Year 13"; pairs with .tag-alevel. */
.rn-meta-badge.alevel {
  color: oklch(0.40 0.08 165);
  border-color: oklch(0.78 0.07 165);
  background: oklch(0.96 0.02 165);
}
/* Muted "coming soon" variant of a meta badge (e.g. Paper 2 on the
   GCSE hub hero, where those notes are still in progress). */
.rn-meta-badge.is-coming {
  color: var(--muted);
  border-style: dashed;
}
/* Required-practical badge — sits on a section heading next to the RP that
   AQA names for that topic (RP1–RP8). Teal reads as "lab work". */
.rn-meta-badge.rp {
  color: oklch(0.42 0.09 195);
  border-color: oklch(0.78 0.06 195);
  background: oklch(0.96 0.025 195);
  font-size: 9.5px;
  vertical-align: middle;
}

/* Topic pager styles live in the TOPIC PAGER section lower in this file. */

/* ============================================================
   HERO MOTIF — chapter line art beside the heading
   Mirrors the OG card art (see assets/og/build-og.mjs). Turns the
   hero into two columns: text on the left, motif on the right.
============================================================ */
.rn-hero-inner {
  max-width: none;            /* span the full wrap, not the 880px article cap */
  display: flex;
  align-items: flex-end;      /* sit the art on the same baseline as the last text line (byline) */
  gap: clamp(28px, 5vw, 72px);
}
.rn-hero-main {
  flex: 1 1 0;
  min-width: 0;              /* let the text column shrink instead of overflowing */
  max-width: 820px;
}
.rn-hero-figure {
  flex: 0 0 auto;
  width: clamp(300px, 37vw, 500px);   /* large hero art — fills the right-hand space */
  display: flex;
  justify-content: center;
}
/* C4's motif is landscape (beaker + electrolysis cell) — give it more room */
.rn-hero-figure.is-wide {
  width: clamp(340px, 47vw, 620px);
}
.rn-hero-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

@media (max-width: 900px) {
  .rn-hero-inner { display: block; }
  .rn-hero-figure { display: none; }   /* decorative — drop it on narrow screens */
}

/* GCSE Chemistry hub — the page-hero reuses the two-column motif layout.
   page.css makes .page-hero-inner a flex column with a 12px gap, so restore
   the row here and move the column stacking into the text side. */
.page-hero-inner.rn-hero-inner {
  flex-direction: row;
  /* rn-hero-inner removes the article cap with max-width:none, but here the
     class sits on the .wrap element itself — restore the page cap. */
  max-width: var(--maxw);
}
.page-hero-inner.rn-hero-inner .rn-hero-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 900px) {
  /* keep the stacked text rhythm once the figure is dropped */
  .page-hero-inner.rn-hero-inner { display: flex; flex-direction: column; }
}

/* ============================================================
   LEGEND — explains badge meanings on topic index
============================================================ */
.rn-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  margin: 24px 0 40px;
  padding: 16px 20px;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.rn-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rn-legend .tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  border: 1px solid currentColor;
}

/* ============================================================
   TIER & SPEC TAGS — inline (Triple, Higher, Coming soon)
============================================================ */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  vertical-align: middle;
  margin-left: 6px;
  white-space: nowrap;
}
.tag-triple { color: oklch(0.42 0.10 290); }
.tag-higher { color: oklch(0.45 0.13 50); }
.tag-alevel { color: oklch(0.40 0.08 165); } /* A-level only (AS/A2 split, 7404/7405) */
.tag-coming { color: var(--muted); }

/* Compact single-letter tier badge (used in the TOC so long entries
   don't push the full-word pill onto its own line). */
.tag-dot,
.rn-legend .tag-dot {
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  padding: 0;
  line-height: 15px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}

/* ============================================================
   TOPIC INDEX (paper sections + grid)
============================================================ */
.rn-papers {
  padding: clamp(56px, 8vw, 100px) 0;
}
.rn-paper-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 48px 0 6px;
}
.rn-paper-heading:first-of-type { margin-top: 0; }
.rn-paper-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 24px;
}
.rn-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-bottom: 48px;
}
.rn-topic-card {
  background: var(--paper);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
  position: relative;
  min-height: 180px;
}
.rn-topic-card:hover {
  background: var(--paper-2);
}
.rn-topic-card:hover .rn-topic-link { color: var(--accent); }
.rn-topic-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
/* Card head row — topic number left, small chapter motif right.
   Motifs are injected by assets/og/inject-hero-motifs.mjs. */
.rn-topic-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.rn-topic-motif {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  opacity: 0.85;
  transition: opacity .15s;
}
.rn-topic-motif svg {
  width: 100%;
  height: 100%;
}
.rn-topic-card:hover .rn-topic-motif { opacity: 1; }
.rn-topic-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
}
.rn-topic-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  flex-grow: 1;
}
.rn-topic-link {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .15s;
}
/* "Coming soon" cards read as de-emphasised via a recessed background + muted
   heading, NOT a blanket opacity — opacity dropped the body text below WCAG AA
   (was ~2.5:1). Text now stays legible (ink-soft ≥ 11:1). */
.rn-topic-card-coming {
  background: var(--paper-2);
  cursor: default;
  pointer-events: none;
}
.rn-topic-card-coming h3 { color: var(--ink-soft); }
.rn-topic-card-coming .rn-topic-num { color: var(--muted); }
.rn-topic-card-coming::after {
  content: "Coming soon";
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 3px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

/* Cross-sell card in a topic grid — links out (e.g. GCSE hub → bridging course).
   A faint accent wash + accent top rule mark it as a next step, visually distinct
   from the ink topic cards around it. */
.rn-topic-card-crosslink {
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
  box-shadow: inset 0 3px 0 0 var(--accent);
}
.rn-topic-card-crosslink:hover {
  background: color-mix(in srgb, var(--accent) 11%, var(--paper));
}
.rn-topic-card-crosslink .rn-topic-num { color: var(--accent); }
.rn-topic-card-crosslink .rn-topic-link {
  color: var(--accent);
  border-top-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ============================================================
   BRIDGING BANNER (revision landing page)
   The GCSE→A-Level bridging course sits below the course grid as a
   full-width strip rather than inside it — it's a transition resource,
   not a specification. Shares the crosslink accent language (faint
   accent wash + accent top rule) so "next step" links read as one family.
============================================================ */
/* Course grid on the landing page — exactly three courses, so use fixed
   columns instead of auto-fill (auto-fill leaves an empty grey track when
   a row isn't full). Also tucks the banner up under the grid. */
.rn-course-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 16px;
}
@media (min-width: 640px) and (max-width: 980px) {
  .rn-course-grid { grid-template-columns: repeat(2, 1fr); }
  .rn-course-grid > :nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .rn-course-grid { grid-template-columns: 1fr; }
}
.rn-bridge-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px);
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
  border: 1px solid var(--hairline);
  box-shadow: inset 0 3px 0 0 var(--accent);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.rn-bridge-banner:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper));
}
.rn-bridge-banner .rn-topic-num { color: var(--accent); }
.rn-bridge-banner h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 8px 0;
  color: var(--ink);
}
.rn-bridge-banner p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
.rn-bridge-banner-btn { flex: 0 0 auto; }
.rn-bridge-banner:hover .rn-bridge-banner-btn { background: var(--accent); }
@media (max-width: 720px) {
  .rn-bridge-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .rn-bridge-banner-btn { align-self: stretch; }
}

/* Bridge hub standfirst — use the sans .page-lede treatment shared by the other
   revision hubs instead of the italic-serif article standfirst, so the section's
   hero intros read consistently. (Insights articles keep the italic style.) */
.rn-standfirst {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.5;
}

/* ============================================================
   REVISION NOTE ARTICLE — 2-col layout
============================================================ */
.rn-wrap {
  padding: clamp(48px, 7vw, 80px) 0 clamp(28px, 4vw, 48px);
}
.rn-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* ── Sticky TOC ────────────────────────────────────────── */
.rn-toc {
  position: sticky;
  top: 100px;
  /* Cap to the viewport so a long contents list scrolls within itself
     instead of being clipped at the bottom while reading the notes. */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 22px 22px 20px;
}
/* Slim, unobtrusive scrollbar for the contents panel */
.rn-toc {
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.rn-toc::-webkit-scrollbar {
  width: 8px;
}
.rn-toc::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: 999px;
  border: 2px solid var(--paper-2);
}
.rn-toc::-webkit-scrollbar-track {
  background: transparent;
}
.rn-toc-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 14px;
}
.rn-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: rn-toc;
}
.rn-toc-list li {
  counter-increment: rn-toc;
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}
.rn-toc-list li::before {
  content: counter(rn-toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.rn-toc-list a {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s;
}
.rn-toc-list a:hover,
.rn-toc-list a.is-active { color: var(--ink); }
.rn-toc-divider {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 16px 0;
}
.rn-toc-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.5;
}
.rn-toc-meta .tag {
  font-size: 9px;
  margin-left: 0;
}
.rn-toc-meta .tag-dot {
  font-size: 10px;
  margin-right: 7px;
}
/* Keep a pair of tier badges together so they wrap as one unit
   rather than splitting across two lines. */
.rn-toc-tags { white-space: nowrap; }

.rn-print-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rn-print-btn:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ── Main content ──────────────────────────────────────── */
.rn-content { min-width: 0; }
.rn-content > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 56px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 14px;
  scroll-margin-top: 100px;
}
.rn-content > h2:first-child { margin-top: 0; }
.section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.rn-content > h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 32px 0 10px;
}
.rn-content > p {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.rn-content > p strong { color: var(--ink); font-weight: 600; }
.rn-content > p em { color: var(--ink); font-style: italic; }
.rn-content > ul,
.rn-content > ol {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.rn-content > ul li,
.rn-content > ol li {
  position: relative;
  padding-left: 24px;
}
.rn-content > ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 12px; height: 1px;
  background: var(--accent);
}
.rn-content > ol {
  counter-reset: rn-ol;
}
.rn-content > ol > li {
  counter-increment: rn-ol;
}
.rn-content > ol > li::before {
  content: counter(rn-ol, decimal-leading-zero) ".";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent);
  font-weight: 500;
  line-height: 1.9;
}
.rn-content li strong { color: var(--ink); font-weight: 600; }
.rn-content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  transition: color .15s, text-decoration-color .15s;
}
.rn-content a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.rn-content sub, .rn-content sup {
  font-size: 0.72em;
  line-height: 0;
}
/* Subscripts/superscripts in the display-serif headings (Kc, Kp, Mr…): the
   browser-default vertical-align sits them too large and gappy in Instrument
   Serif, so position them explicitly and a touch smaller. */
.article-title sub, .rn-content h2 sub, .rn-content h3 sub {
  font-size: 0.58em; line-height: 0; position: relative; vertical-align: baseline; bottom: -0.14em;
}
.article-title sup, .rn-content h2 sup, .rn-content h3 sup {
  font-size: 0.58em; line-height: 0; position: relative; vertical-align: baseline; top: -0.42em;
}

/* Equation / formula highlight (e.g. <p style="background...") */
.rn-eq {
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  padding: 12px 18px;
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 18px;
}
/* Verbal-fraction equations (percentage by mass / yield / atom economy) have a
   long worded numerator. .rn-eq-fracmul keeps the fraction and its trailing
   "× 100" together as one unit — "× 100" sits to the RIGHT of the fraction,
   vertically centred, and never drops onto its own line (.rn-eq-mul is nowrap).
   On narrow screens the whole equation centres and the label wraps above the
   fraction; the numerator wraps to stay narrow so "× 100" always has room to its
   right. Desktop keeps the normal inline .rn-eq flow. */
.rn-eq-fracmul { display: inline-flex; align-items: center; gap: 6px; }
.rn-eq-fracmul .rn-eq-mul { white-space: nowrap; }
@media (max-width: 560px) {
  /* Centre equations on mobile. NB: do NOT make this a flex container —
     that turns each <sub>/<sup> into a flex item, which ignores
     vertical-align and breaks subscripts (e.g. C2H5OH). text-align keeps
     normal inline flow so subscripts render, and the inline-flex fraction
     unit (.rn-eq-fracmul) still centres and wraps correctly. */
  .rn-eq--center {
    text-align: center;
  }
  .rn-eq--center .rn-frac-num,
  .rn-eq--center .rn-frac-den { padding-left: 3px; padding-right: 3px; }
}

/* ============================================================
   CALLOUTS — definition / key / tip / warning
============================================================ */
.callout {
  border: 1px solid var(--hairline);
  border-left-width: 4px;
  border-radius: 0 4px 4px 0;
  padding: 18px 22px;
  margin: 24px 0;
  background: var(--paper-2);
  font-size: 15.5px;
}
.callout-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.callout p {
  margin: 0 0 8px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.callout p:last-child { margin-bottom: 0; }
.callout p strong { color: var(--ink); font-weight: 600; }
.callout p em { color: var(--ink); }
.callout ul,
.callout ol {
  padding-left: 0;
  list-style: none;
  margin: 8px 0 0;
  display: grid;
  gap: 6px;
}
.callout ul li,
.callout ol li {
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.callout ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 10px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.callout ol {
  counter-reset: cl-ol;
}
.callout ol > li {
  counter-increment: cl-ol;
}
.callout ol > li::before {
  content: counter(cl-ol) ".";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: currentColor;
  opacity: 0.7;
  line-height: 1.7;
}
.callout li strong { color: var(--ink); font-weight: 600; }

/* Variant colours: just the left border + title color */
.callout-def       { border-left-color: var(--ink); }
.callout-def .callout-title { color: var(--ink); }
.callout-key       { border-left-color: var(--accent); }
.callout-key .callout-title { color: var(--accent); }
.callout-tip       { border-left-color: oklch(0.55 0.11 75); }
.callout-tip .callout-title { color: oklch(0.45 0.11 75); }
.callout-warn      { border-left-color: oklch(0.55 0.15 25); }
.callout-warn .callout-title { color: oklch(0.45 0.15 25); }

/* ============================================================
   TABLES — editorial restyle
============================================================ */
.rn-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 28px;
  font-size: 14.5px;
  border: 1px solid var(--hairline);
}
.rn-table th {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.rn-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  line-height: 1.55;
  color: var(--ink-soft);
}
.rn-table tr:last-child td { border-bottom: 0; }
.rn-table tr:nth-child(even) td { background: var(--paper-2); }
.rn-table .highlight-col {
  font-weight: 500;
  color: var(--ink);
  font-family: var(--font-body);
}
.rn-table td strong { color: var(--ink); font-weight: 600; }

/* Wide tables (4+ dense columns) stay fully legible on narrow screens by
   scrolling sideways inside their own box rather than clipping or wrapping
   words mid-letter. No forced min-width: tables that fit the screen show no
   scrollbar; only genuinely wide ones scroll. An edge fade hints at the
   off-screen columns on touch devices, where scrollbars are hidden. */
.rn-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0 28px;
}
.rn-table-scroll > .rn-table {
  margin: 0;
}
/* Edge-fade cue: site.js toggles .has-more-left / .has-more-right on
   .rn-table-scroll whenever columns sit off-screen in that direction.
   The mask fades that edge so it is obvious the table scrolls. */
.rn-table-scroll { --fade-l: 0px; --fade-r: 0px; }
.rn-table-scroll.has-more-left  { --fade-l: 32px; }
.rn-table-scroll.has-more-right { --fade-r: 32px; }
.rn-table-scroll.has-more-left,
.rn-table-scroll.has-more-right {
  -webkit-mask-image: linear-gradient(to right,
    transparent, black var(--fade-l),
    black calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(to right,
    transparent, black var(--fade-l),
    black calc(100% - var(--fade-r)), transparent);
}

/* ============================================================
   TIMELINE — history of the atom
============================================================ */
.rn-timeline {
  list-style: none;
  padding: 0;
  margin: 16px 0 28px;
  border-left: 1px solid var(--hairline);
  position: relative;
}
.rn-timeline-item {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 24px 0 24px 24px;
  position: relative;
  border-bottom: 1px solid var(--hairline);
}
.rn-timeline-item:last-child { border-bottom: 0; }
.rn-timeline-item::before {
  content: "";
  position: absolute;
  left: -5px; top: 30px;
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--accent);
}
.rn-timeline-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--accent);
  padding-top: 2px;
}
.rn-timeline-scientist {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--ink);
}
.rn-timeline-body p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.rn-timeline-body p:last-child { margin-bottom: 0; }
.rn-timeline-body strong { color: var(--ink); font-weight: 600; }
.rn-timeline-body em { color: var(--ink); }
.rn-timeline-body ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
}
.rn-timeline-body ul li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.rn-timeline-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 10px; height: 1px;
  background: var(--accent);
}

.rn-portrait {
  float: right;
  margin: 0 0 12px 20px;
  text-align: center;
  width: 88px;
}
.rn-portrait img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--paper-2);
  display: block;
}
.rn-portrait figcaption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
}

/* ============================================================
   FIGURES & IMAGES
============================================================ */
.rn-img-figure {
  margin: 18px 0 22px;
}
.rn-img-figure.center { text-align: center; }
.rn-img-figure img {
  max-width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--paper-2);
  display: block;
}
.rn-img-figure.center img { margin: 0 auto; }
.rn-img-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.5;
  text-transform: uppercase;
}
/* Chemical formulae keep their correct case (e.g. SiO₂, NaCl, HCl) even inside
   uppercase editorial labels like .rn-img-caption, .callout-title and mono labels. */
.rn-chem { text-transform: none; letter-spacing: normal; }

/* Stacked nuclide notation — mass number over atomic number, both left of the
   symbol. Full markup, so the numbers can NEVER wrap apart from the symbol:
   <span class="rn-nuclide"><span class="rn-nuc"><sup>23</sup><sub>11</sub></span>Na</span>
   (any charge sup goes inside .rn-nuclide too). The .rn-nuc flex column stacks
   the sup/sub (as flex items their super/sub alignment is ignored, so they sit
   flush) and right-aligns them against the symbol; .rn-nuclide pins the whole
   unit to one line — an inline-flex box is otherwise a legal break point. */
.rn-nuclide { white-space: nowrap; }
.rn-nuc { display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; vertical-align: 0.32em; line-height: 1; margin-right: 1.5px; }
.rn-nuc sup, .rn-nuc sub { font-size: 0.68em; line-height: 1.12; position: static; vertical-align: baseline; }
/* Narrow figures (e.g. the ΔH⦵ symbol anatomy) — cap the drawing at a readable
   size on desktop instead of stretching to the full column; the 640px mobile
   full-bleed rule below still wins on small screens. */
.rn-img-figure--narrow > svg {
  max-width: 520px;
  display: block;
  margin-inline: auto;
}
/* Scrollable figures (e.g. full periodic table SVG) — scroll rather than shrink on mobile */
.rn-img-figure--scrollable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rn-img-figure--scrollable svg {
  min-width: 560px;
}
/* Mobile: figure SVGs bleed into the page gutter (~12% larger drawings, and
   SVG label text with them); the VSEPR matrix scroller bleeds the same amount
   but keeps the gutter as internal padding, so it aligns with the column at
   rest and pans edge-to-edge. Raster <img> figures keep their border and stay
   inside the column. */
@media (max-width: 640px) {
  .rn-content .rn-img-figure > svg {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    display: block;
  }
  .rn-content .am-matrix-scroll {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
}

/* Two-panel figure duo — a pair of sibling SVG panels (exo vs endo profiles,
   side-by-side definitions) drawn as two narrow SVGs in one figure: 2-up on
   desktop, stacked full-width on mobile, so panel text keeps its authored
   size instead of halving with one wide viewBox. */
.rn-figduo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; align-items: end; }
.rn-figduo svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .rn-figduo { grid-template-columns: 1fr; gap: 16px; }
  .rn-content .rn-img-figure > .rn-figduo {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
  }
}

/* Displayed-formula molecule grid — the CONVENTION for a series of displayed
   formulae (alkanes, alkenes, alcohols …): one panel per molecule, each its own
   SVG + label, that reflow from a row into stacked boxes on mobile. Build each
   panel SVG in the straight gapped-bond style (vertical C–H bonds, lines stopping
   short of every atom). The 1px grid gap over a hairline background draws the
   dividers, so reflow needs no per-cell border bookkeeping. Default 4-up; override
   grid-template-columns inline for a different molecule count. */
.rn-mgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.rn-mgrid-cell {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rn-mgrid-cell svg { display: block; width: 100%; height: auto; }
.rn-mgrid-lbl {
  text-align: center;
  padding: 8px 4px 11px;
  background: var(--paper-2);
  border-top: 1px solid var(--hairline);
}
.rn-mgrid-lbl b { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); }
.rn-mgrid-lbl span { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 720px) { .rn-mgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .rn-mgrid { grid-template-columns: 1fr; } }
/* Flame-tests variant: 5 cells on one desktop row (default 4-up orphans the 5th),
   reflowing 5→3→2 columns. Shared: used on C8 Part 3 + required-practicals
   (hoisted from inline copies the page-split had left stranded). */
.rn-mgrid.rn-mgrid-flames { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 700px){
  .rn-mgrid.rn-mgrid-flames { grid-template-columns: repeat(3, 1fr); }
  /* the 5th cell would orphan a column — let it span so there is never an empty box */
  .rn-mgrid.rn-mgrid-flames .rn-mgrid-cell:last-child { grid-column: span 2; }
}
@media (max-width: 440px){ .rn-mgrid.rn-mgrid-flames { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   ATOM DIAGRAM
============================================================ */
.atom-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 28px 0 32px;
  padding: 28px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.atom-outer {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.atom-nucleus {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.atom-shell {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.atom-shell-1 { width: 100px; height: 100px; }
.atom-shell-2 { width: 170px; height: 170px; }
.atom-electron {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--paper);
}
.atom-caption {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
}

/* ============================================================
   ELECTRONIC CONFIG GRID
============================================================ */
.econfig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin: 18px 0 28px;
}
.econfig-card {
  background: var(--paper);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.econfig-symbol {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}
.econfig-config {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.econfig-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ── Periodic table layout ──────────────────────────────────── */
.econfig-ptable {
  display: grid;
  grid-template-columns: auto repeat(2, 1fr) 28px repeat(6, 1fr);
  gap: 4px;
  margin: 16px 0 24px;
  overflow-x: auto;
}
.econfig-period-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #6a7e88;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.econfig-gh {
  background: #e8f0f5;
  border: 1px solid #c8d8e4;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #3a5a6a;
  text-align: center;
  padding: 4px 2px;
  white-space: nowrap;
}
.econfig-ptable .econfig-card {
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  text-align: center;
}
.econfig-ptable .econfig-symbol {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0a2d4a;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
}
.econfig-name {
  font-size: 0.6rem;
  color: #4a6070;
  line-height: 1.2;
  text-transform: none;
  font-family: var(--font-body);
}
.econfig-ptable .econfig-config {
  font-size: 0.72rem;
  margin-top: 3px;
}
.econfig-ptable .econfig-note { display: none; }
.econfig-ptable-gap {
  border: 1px dashed #b8ccd4;
  border-radius: 6px;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(0,0,0,0.035) 3px, rgba(0,0,0,0.035) 6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.econfig-ptable-gap span {
  writing-mode: vertical-rl;
  font-size: 0.58rem;
  color: #7a9aaa;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.econfig-noble { background: #eef5f0; border-color: #afd0b8; }
.econfig-noble .econfig-symbol { color: #1c6040; }

.econfig-ptable .econfig-card { cursor: pointer; }

.econfig-popup {
  position: fixed;
  width: 140px;
  height: 140px;
  background: #f8f5ef;
  border: 1px solid #d4ccc4;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
  padding: 6px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.econfig-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.econfig-popup svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   ZOOMABLE FIGURE LIGHTBOX
   Tap a periodic-table figure to open a full-screen, pinch / drag /
   button zoom view. Reusable + opt-in via .rn-img-figure--zoom; the
   behaviour lives in site.js (mirrors the .rn-feedback shared pattern).
============================================================ */
.rn-img-figure--zoom { position: relative; }
/* Inline preview fits the column width (the whole table, scaled down) */
.rn-img-figure--zoom svg,
.rn-img-figure--zoom img { width: 100%; height: auto; display: block; }
.rn-zoom-trigger {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background .12s, color .12s, border-color .12s;
}
.rn-zoom-trigger:hover { background: var(--paper); color: var(--ink); border-color: var(--accent); }
/* Graph-figure variant: reserve a strip above the plot so the tap-to-enlarge
   button never covers the drawing or labels. Shared: used on C5 Part 2, C6
   Parts 1/3/4/5, required-practicals (hoisted from C5 Part 1's inline copy
   the page-split had left stranded). */
.rn-graphzoom { padding-top: 28px; }
.rn-graphzoom .rn-zoom-trigger { top: 2px; right: 8px; }

.rn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
}
.rn-lightbox[hidden] { display: none; }
.rn-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.18 0.02 250 / 0.86);
}
.rn-lightbox-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;            /* drive pan/zoom from JS, not native gestures */
  cursor: grab;
}
.rn-lightbox-stage:active { cursor: grabbing; }
.rn-lightbox-stage svg,
.rn-lightbox-stage img {
  max-width: 96vw;
  max-height: 100%;
  width: auto;
  height: auto;
  background: var(--paper);
  border-radius: 4px;
  transform-origin: center center;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}
.rn-lightbox-controls {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.rn-lightbox-controls button {
  font-family: var(--font-mono);
  font-size: 13px;
  min-width: 44px;
  height: 40px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.rn-lightbox-controls button:hover { border-color: var(--accent); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 960px) {
  .rn-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Single column: let the contents list flow naturally rather than
     becoming a cramped internal scroll box. */
  .rn-toc { position: static; max-height: none; overflow-y: visible; }
  /* Single-column timeline. minmax(0,1fr) + min-width:0 remove the implicit
     min-content floor so a wide child (e.g. a scrollable periodic-table figure
     nested in a timeline item) scrolls inside its frame instead of stretching
     the whole notes column and overflowing the page. */
  .rn-timeline-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .rn-timeline-body { min-width: 0; }
}
@media (max-width: 720px) {
  /* Tables fill the width and wrap to fit rather than scrolling sideways
     (with the cell content on these pages this fits without a horizontal bar). */
  .rn-table { font-size: 13.5px; }
  .rn-table th, .rn-table td { padding: 8px 9px; }
}
@media (max-width: 600px) {
  .rn-portrait { float: none; margin: 0 0 12px; width: 100%; max-width: 200px; }
  .rn-portrait img { height: auto; aspect-ratio: 1 / 1; }
  .rn-content > h2 { gap: 10px; font-size: 24px; }
  .section-num { width: 30px; height: 30px; font-size: 11px; }
  /* Clear inline floats on timeline figures (Thomson, Rutherford diagrams) */
  .rn-timeline-body .rn-img-figure {
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
  }
}

/* Make the small data widgets FIT on mobile instead of scrolling sideways.
   Scoped to these two widgets so the general .rn-table scroll fallback above
   (used by other, genuinely wide tables) is untouched. */
@media (max-width: 560px) {
  /* Protons / Neutrons / Electrons practice table — compact to fit the screen */
  .rn-subatomic-practice th,
  .rn-subatomic-practice td { padding: 6px 4px; font-size: 11.5px; }
  .rn-subatomic-practice .rn-particle-input {
    width: 40px; padding: 4px 2px; font-size: 12px;
  }
}
@media (max-width: 520px) {
  /* First-20-elements electronic-structure table — shrink cells so every group
     fits; hide the always-on "2,8,1" text and read it via the tap shell-diagram
     popup instead (the popup JS still reads .econfig-config, which stays in the
     DOM — only display is suppressed). */
  .econfig-ptable { gap: 2px; }
  .econfig-ptable .econfig-card { padding: 4px 1px; }
  .econfig-ptable .econfig-symbol { font-size: 0.85rem; }
  .econfig-ptable .econfig-name { font-size: 0.46rem; line-height: 1.1; }
  .econfig-ptable .econfig-config { display: none; }
  .econfig-period-label { font-size: 0.5rem; padding-right: 3px; white-space: normal; }
  /* Let "Group 1" headers wrap so they stop flooring the column width */
  .econfig-gh { font-size: 0.5rem; padding: 3px 1px; white-space: normal; }
  .econfig-ptable-gap span { font-size: 0.5rem; }
}

/* ============================================================
   TABLE UTILITY WIDTH CLASSES
============================================================ */
.rn-table--narrow { max-width: 420px; }
.rn-table--med    { max-width: 620px; }

/* ============================================================
   PRACTICE QUESTIONS — <details>/<summary> reveal component
============================================================ */
.rn-practice {
  border: 1px solid var(--hairline);
  border-left: 4px solid oklch(0.52 0.13 200);
  border-radius: 0 4px 4px 0;
  margin: 28px 0;
  background: var(--paper-2);
  overflow: hidden;
}
.rn-practice-header {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: oklch(0.40 0.12 200);
  padding: 14px 22px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rn-practice-q {
  padding: 0 22px 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.rn-practice-q strong { color: var(--ink); font-weight: 600; }
/* Descendant combinator so reveals nested inside .rn-exam-q (e.g. C4's
   per-question answers) get the same styling as direct children. */
.rn-practice details {
  border-top: 1px solid var(--hairline);
}
.rn-practice details > summary {
  padding: 10px 22px;
  cursor: pointer;
  font-family: var(--font-mono);
  /* font-size:0 hides the literal "Show answer" text node so it doesn't
     duplicate the ::after label; ::after restores its own size below. */
  font-size: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: oklch(0.40 0.12 200);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background .15s;
}
.rn-practice details > summary::-webkit-details-marker { display: none; }
.rn-practice details > summary::after {
  content: "Show answer →";
  font-size: 11px;
  margin-left: auto;
}
.rn-practice details[open] > summary::after { content: "Hide ↑"; }
.rn-practice details > summary:hover {
  background: color-mix(in srgb, oklch(0.52 0.13 200) 8%, transparent);
}
.rn-practice-answer {
  padding: 14px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  border-top: 1px solid var(--hairline);
}
.rn-practice-answer p { margin: 0 0 8px; }
.rn-practice-answer p:last-child { margin-bottom: 0; }
.rn-practice-answer strong { color: var(--ink); font-weight: 600; }
.rn-practice-answer ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  gap: 4px;
}
.rn-practice-answer ul li {
  position: relative;
  padding-left: 18px;
  line-height: 1.55;
}
.rn-practice-answer ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 10px; height: 1px;
  background: oklch(0.52 0.13 200);
}

/* ============================================================
   COLLAPSIBLE EXAM SECTIONS — testing practice tucked behind a bar
   (.rn-practice container upgraded from <div> to <details>; the
   header becomes a full-width clickable summary. Closed by default
   so teaching content isn't crowded by question banks.)
============================================================ */
details.rn-practice--collapsible > summary.rn-practice-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 13px 22px;          /* balanced bar when closed */
  align-items: center;
  transition: background .15s;
}
details.rn-practice--collapsible > summary.rn-practice-summary::-webkit-details-marker { display: none; }
details.rn-practice--collapsible > summary.rn-practice-summary::after {
  content: "Show questions ↓";
  margin-left: auto;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  flex: none;
}
details.rn-practice--collapsible[open] > summary.rn-practice-summary::after { content: "Hide ↑"; }
/* non-question collapsibles (e.g. a model answer) override the affordance
   label via data-reveal="Show … ↓" ON THE SUMMARY (attr() in a ::after can
   only read the summary's own attributes) — include the arrow in the value */
details.rn-practice--collapsible:not([open]) > summary.rn-practice-summary[data-reveal]::after { content: attr(data-reveal); }
details.rn-practice--collapsible > summary.rn-practice-summary:hover {
  background: color-mix(in srgb, oklch(0.52 0.13 200) 8%, transparent);
}
details.rn-practice--collapsible[open] > summary.rn-practice-summary {
  border-bottom: 1px solid var(--hairline);
}

/* ============================================================
   EXAM-STYLE QUESTIONS — builds on .rn-practice
   (interactive MCQ tick-boxes, type-in numeric, equation balancing)
============================================================ */
.rn-exam-q { padding: 15px 22px 17px; border-top: 1px solid var(--hairline); }
.rn-exam-qhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.rn-exam-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.05em;
  color: var(--paper); background: oklch(0.40 0.12 200);
  padding: 2px 8px; border-radius: 3px; flex: none;
}
.rn-exam-marks { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: auto; flex: none; }
.rn-exam-stem { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.rn-exam-stem + .rn-exam-stem { margin-top: 9px; }
.rn-exam-stem strong { color: var(--ink); font-weight: 600; }
.rn-exam-instr { display: block; margin-top: 5px; font-size: 13px; color: var(--muted); font-style: italic; }
.rn-exam-given {
  margin: 13px 0 0; padding: 9px 13px; border-left: 2px solid oklch(0.52 0.13 200);
  background: var(--paper); font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
  border-radius: 0 3px 3px 0;
}
.rn-exam-given strong { color: var(--ink); font-weight: 600; }
.rn-exam-eq, .rn-exam-work { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.rn-exam-mk { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.40 0.12 200); background: oklch(0.95 0.025 200); border: 1px solid oklch(0.82 0.04 200); border-radius: 3px; padding: 1px 5px; white-space: nowrap; }
.rn-exam-note { color: var(--muted); font-size: 13px; }
.rn-exam-src { margin: 14px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
/* Interactive tick-the-box options — feedback colours mirror .rn-classify */
.rn-exam-options { padding: 0; margin: 13px 0 0; display: grid; gap: 8px; }
.rn-exam-option {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font-family: inherit; font-size: 15px; color: var(--ink-soft);
  min-height: 44px;                 /* comfortable touch target on phones */
  padding: 8px 11px; border: 1px solid var(--hairline); border-radius: 4px;
  background: var(--paper); cursor: pointer; transition: background .12s, border-color .12s;
}
.rn-exam-option:hover:not(:disabled) { background: var(--paper-2); border-color: var(--ink-soft); }
.rn-exam-option:disabled { cursor: default; }
.rn-exam-option:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 2px; }
.rn-exam-box {
  flex: none; width: 17px; height: 17px; border: 1.5px solid var(--muted); border-radius: 3px;
  background: var(--paper); display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; color: var(--paper); font-weight: 700;
}
.rn-exam-option.opt-ok  { background: oklch(0.95 0.04 155); border-color: oklch(0.50 0.15 155); color: oklch(0.30 0.12 155); }
.rn-exam-option.opt-err { background: oklch(0.96 0.04 25);  border-color: oklch(0.55 0.15 25);  color: oklch(0.35 0.15 25); }
.rn-exam-option.opt-dim { opacity: 0.4; }
.rn-exam-option.opt-ok  .rn-exam-box { border-color: oklch(0.45 0.15 155); background: oklch(0.52 0.15 155); }
.rn-exam-option.opt-ok  .rn-exam-box::after { content: "✓"; }
.rn-exam-option.opt-err .rn-exam-box { border-color: oklch(0.55 0.15 25);  background: oklch(0.60 0.17 25); }
.rn-exam-option.opt-err .rn-exam-box::after { content: "✗"; }
/* select-two: in-progress "selected" state for a tick-two MCQ before grading */
.rn-exam-option.opt-sel { background: oklch(0.95 0.03 230); border-color: oklch(0.52 0.13 230); color: oklch(0.30 0.10 230); }
.rn-exam-option.opt-sel .rn-exam-box { border-color: oklch(0.48 0.13 230); background: oklch(0.52 0.13 230); }
.rn-exam-option.opt-sel .rn-exam-box::after { content: "\2713"; }
.rn-exam-feedback { margin: 12px 0 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.rn-exam-feedback:empty { display: none; }
.rn-exam-feedback.fc-ok  { color: oklch(0.38 0.13 155); }
.rn-exam-feedback.fc-err { color: oklch(0.45 0.15 25); }
.rn-exam-explanation {
  margin: 9px 0 0; padding: 11px 14px; border-radius: 3px; font-size: 14.5px; line-height: 1.6;
  border: 1px solid var(--hairline); background: var(--paper-2); color: var(--ink-soft);
}
.rn-exam-explanation.fc-ok  { background: oklch(0.95 0.04 155); color: oklch(0.30 0.12 155); border-color: oklch(0.50 0.15 155); }
.rn-exam-explanation.fc-err { background: oklch(0.96 0.04 25);  color: oklch(0.35 0.15 25);  border-color: oklch(0.55 0.15 25); }
.rn-exam-explanation strong { color: inherit; font-weight: 700; }
/* Type-in numeric answers */
.rn-exam-numeric { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 9px; margin: 13px 0 0; }
.rn-exam-numeric + .rn-exam-numeric { margin-top: 9px; }
.rn-exam-ilabel { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.rn-exam-field {
  font-family: var(--font-mono); font-size: 15px; color: var(--ink);
  width: 130px; max-width: 46vw; padding: 8px 11px;
  border: 1px solid var(--hairline); border-radius: 4px; background: var(--paper);
}
.rn-exam-field::placeholder { color: var(--muted); opacity: 0.55; }
.rn-exam-field:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 1px; border-color: oklch(0.52 0.13 200); }
.rn-exam-unit { font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft); }
.rn-exam-field.is-ok  { border-color: oklch(0.50 0.15 155); background: oklch(0.96 0.035 155); color: oklch(0.30 0.12 155); font-weight: 600; }
.rn-exam-field.is-err { border-color: oklch(0.58 0.16 25);  background: oklch(0.96 0.035 25);  color: oklch(0.38 0.16 25); }
.rn-exam-check {
  display: inline-block; margin-top: 11px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--paper); background: oklch(0.40 0.12 200); border: 1px solid oklch(0.40 0.12 200);
  padding: 9px 17px; border-radius: 4px; cursor: pointer; transition: background .12s;
}
.rn-exam-check:hover { background: oklch(0.34 0.12 200); }
.rn-exam-check:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 2px; }
/* When .rn-exam-check is an <a> inside article prose, `.article-body-inner a`
   (page.css) would otherwise force the dark --ink text onto the teal fill,
   making the button look muddy. Keep the white --paper label so an anchor CTA
   matches the <button> version (e.g. the diagnostic "Start" button). */
.article-body-inner a.rn-exam-check,
a.rn-exam-check { color: var(--paper); text-decoration: none; }
.article-body-inner a.rn-exam-check:hover,
a.rn-exam-check:hover { color: var(--paper); }
/* Interactive balancing. No column-gap: a bare formula like N<sub>2</sub>
   splits into separate anonymous flex items, so a gap would push the
   subscript away from its letter — horizontal spacing lives on the
   inputs/operators instead. */
.rn-exam-eqline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 14px 0 2px;
  font-family: var(--font-mono); font-size: 15.5px; color: var(--ink); line-height: 2;
}
.rn-exam-eqline .rn-exam-coef { margin-right: 7px; }
.rn-exam-eqline > span[aria-hidden="true"] { margin: 0 7px; }
.rn-exam-eqline .rn-exam-check { margin-top: 0; margin-left: 13px; }
.rn-exam-coef {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--accent);
  width: 40px; text-align: center; padding: 6px 2px;
  border: 1px solid var(--hairline); border-radius: 4px; background: var(--paper);
}
.rn-exam-coef::placeholder { color: var(--muted); opacity: 0.5; font-weight: 400; }
.rn-exam-coef:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 1px; border-color: oklch(0.52 0.13 200); }
.rn-exam-coef.is-ok  { border-color: oklch(0.50 0.15 155); background: oklch(0.96 0.035 155); color: oklch(0.30 0.12 155); }
.rn-exam-coef.is-err { border-color: oklch(0.58 0.16 25);  background: oklch(0.96 0.035 25);  color: oklch(0.38 0.16 25); }

/* ============================================================
   ASIDE — beyond-spec / interesting note
============================================================ */
.rn-aside {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  border-left: 2px solid var(--hairline);
  padding: 4px 14px;
  margin: 10px 0 12px;
  font-style: italic;
}
.rn-aside strong { color: var(--ink-soft); font-weight: 600; font-style: normal; }

/* ============================================================
   FORWARD LINK — "covered later" signposting banner
============================================================ */
.rn-forward-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  margin: 16px 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.rn-forward-link-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.rn-forward-link a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.rn-forward-link a:hover { text-decoration: underline; }
/* Backward "recap" variant — same component, signalled as looking back to a
   prerequisite topic (icon 🔗 in markup) rather than forward (📌). Cooler,
   slightly recessed so forward vs back reads at a glance. */
.rn-forward-link--recap {
  background: oklch(0.97 0.012 220);
  border-color: oklch(0.86 0.03 220);
}
.rn-forward-link--recap .rn-forward-link a { color: oklch(0.46 0.10 220); }

/* ============================================================
   RUTHERFORD DIAGRAM
============================================================ */
.rn-rutherford-svg {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--paper-2);
}

/* ============================================================
   INLINE FRACTION — for equation display
============================================================ */
.rn-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  line-height: 1.3;
  margin: 0 2px;
}
.rn-frac-num {
  border-bottom: 1.5px solid currentColor;
  padding: 0 6px 3px;
  text-align: center;
}
.rn-frac-den {
  padding: 3px 6px 0;
  text-align: center;
}

/* ============================================================
   PARTICLE INPUT TABLE — interactive practice
============================================================ */
.rn-practice-hint {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: -8px 0 14px;
  line-height: 1.55;
}
.rn-particle-input {
  width: 68px;
  padding: 5px 8px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  border-radius: 3px;
  text-align: center;
  outline: none;
  transition: border-color .15s, background .15s;
  -moz-appearance: textfield;
}
.rn-particle-input::-webkit-inner-spin-button,
.rn-particle-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rn-particle-input:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
}
.rn-particle-input.is-correct {
  border-color: oklch(0.50 0.15 155);
  background: oklch(0.95 0.04 155);
  color: oklch(0.30 0.12 155);
}
.rn-particle-input.is-incorrect {
  border-color: oklch(0.55 0.15 25);
  background: oklch(0.96 0.04 25);
  color: oklch(0.35 0.15 25);
}
.rn-practice-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -12px 0 28px;
  flex-wrap: wrap;
}
.rn-check-btn,
.rn-reset-btn {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rn-check-btn {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.rn-check-btn:hover {
  background: oklch(0.45 0.12 200);
  border-color: oklch(0.45 0.12 200);
}
.rn-reset-btn {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--hairline);
}
.rn-reset-btn:hover {
  background: var(--paper-2);
  border-color: var(--ink-soft);
  color: var(--ink);
}
.rn-score {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.rn-score.is-perfect { color: oklch(0.38 0.13 155); }
.rn-score.is-partial  { color: oklch(0.45 0.11 75); }
.rn-score.is-zero     { color: oklch(0.45 0.15 25); }

/* ============================================================
   TOC GROUP HEADINGS — subheadings between content-group lists
============================================================ */
.rn-toc-subheading {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin: 14px 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--hairline);
}
.rn-toc-subheading:first-of-type { margin-top: 0; }
.rn-toc-list + .rn-toc-subheading { margin-top: 14px; }
/* Capstone TOC entry: a standalone link styled as a subheading but WITHOUT the
   group-label underline, so it doesn't double up with the rn-toc-divider below it. */
.rn-toc-subheading--link { border-bottom: none; padding-bottom: 0; }

/* ============================================================
   DIAGRAM PLACEHOLDER — temporary marker for future diagrams
============================================================ */
.rn-diagram-placeholder {
  border: 1.5px dashed var(--hairline);
  border-radius: 4px;
  background: var(--paper-2);
  padding: 28px 20px;
  text-align: center;
  margin: 18px 0 24px;
}
.rn-diagram-placeholder p {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   FEEDBACK — report an error / suggestion (Formspree)
============================================================ */
.rn-feedback {
  padding: clamp(36px, 5vw, 60px) 0;
  border-top: 1px solid var(--hairline);
}
.rn-feedback-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
}
.rn-feedback-copy { max-width: 44ch; }
.rn-feedback-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--ink);
}
.rn-feedback-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.rn-feedback-toggle { flex: none; }
.rn-feedback-toggle[hidden] { display: none; }

/* Form — revealed when the toggle is pressed */
.rn-feedback-form {
  flex-basis: 100%;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: rn-feedback-in .25s ease;
}
.rn-feedback-form[hidden] { display: none; }
@keyframes rn-feedback-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.rn-feedback-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rn-feedback-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.rn-feedback-opt { font-weight: 400; color: var(--muted); }
.rn-feedback-form textarea,
.rn-feedback-form input[type="email"] {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 10px 12px;
  width: 100%;
}
.rn-feedback-form textarea { resize: vertical; min-height: 92px; }
.rn-feedback-form textarea:focus,
.rn-feedback-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}
.rn-feedback-form textarea::placeholder,
.rn-feedback-form input::placeholder { color: var(--muted); }
.rn-feedback-actions {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
}
.rn-feedback-status {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.rn-feedback-status.is-err { color: var(--accent); }
.rn-feedback-thanks {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .rn-feedback-form { animation: none; }
}
@media (max-width: 560px) {
  .rn-feedback-inner { flex-direction: column; align-items: stretch; }
  .rn-feedback-toggle { width: 100%; }
}

/* ============================================================
   TOPIC PAGER — previous / next in the Paper 1 sequence
============================================================ */
.rn-pager-section { padding: 0; }
.rn-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.rn-pager-link {
  background: var(--paper);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.rn-pager-link:hover { background: var(--paper-2); }
.rn-pager-next { align-items: flex-end; text-align: right; }
.rn-pager-dir {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rn-pager-link:hover .rn-pager-dir { color: var(--ink-soft); }
.rn-pager-topic {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.rn-pager-link:hover .rn-pager-topic { color: var(--accent); }
@media (max-width: 600px) {
  .rn-pager { grid-template-columns: 1fr; }
  .rn-pager-next { align-items: flex-start; text-align: left; }
}

/* ============================================================
   PRINT
============================================================ */
@media print {
  .header, .footer, .rn-toc, .article-cta, .final-cta, .nav-cta, .rn-feedback, .rn-pager-section, .sticky-cta, .article-related { display: none !important; }
  .rn-grid { grid-template-columns: 1fr; }
  .rn-content > h2 { page-break-after: avoid; }
  .callout, .rn-table, .rn-timeline-item, .atom-diagram, .econfig-grid { break-inside: avoid; }
  body { background: white; color: black; }
}

/* ============================================================
   SKIP LINK — first focusable element in <body>; visually hidden
   until focused so keyboard users can jump past the header nav.
============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ============================================================
   CAPSTONE — shared drag-or-tap "sort the chips into bins" activity
   used by the ★ capstone on every topic page. Behaviour is in
   site.js (driven by .rn-cap-wrap / data-cat / data-bin). Was
   previously duplicated inline per page (cl-/cap-).
============================================================ */
.rn-cap-wrap { margin: 18px 0 28px; padding: 16px 16px 14px; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 6px; }
.rn-cap-lead { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.rn-cap-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px dashed var(--hairline); border-radius: 6px; background: var(--paper); margin-bottom: 14px; align-content: flex-start; min-height: 40px; }
.rn-cap-chip { font-family: var(--font-sans); font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--ink-soft); background: var(--paper); color: var(--ink); cursor: grab; line-height: 1; min-height: 38px; display: inline-flex; align-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
/* Subscripts/superscripts that read correctly inside the tight (line-height:1) pill:
   line-height:0 + relative offset, so the glyph lowers without inflating the chip. */
.rn-cap-chip sub, .rn-cap-chip sup { font-size: 0.72em; line-height: 0; position: relative; vertical-align: baseline; }
.rn-cap-chip sub { bottom: -0.22em; }
.rn-cap-chip sup { top: -0.45em; }
.rn-cap-chip:hover { border-color: var(--accent); }
.rn-cap-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rn-cap-chip.rn-cap-dragging { position: fixed; z-index: 9999; pointer-events: none; cursor: grabbing; box-shadow: 0 6px 18px oklch(0.2 0.02 250 / 0.25); opacity: 0.97; margin: 0; }
.rn-cap-chip.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); color: oklch(0.32 0.08 150); }
.rn-cap-chip.is-err { border-color: var(--accent); background: oklch(0.95 0.05 30); color: var(--accent); }
.rn-cap-tray.rn-cap-over, .rn-cap-bin.rn-cap-over { border-color: var(--accent); background: oklch(0.96 0.03 30); }
.rn-cap-bins { display: flex; gap: 10px; flex-wrap: wrap; }
.rn-cap-bin { flex: 1 1 150px; min-width: 138px; border: 1.5px solid var(--hairline); border-radius: 6px; overflow: hidden; background: var(--paper); cursor: pointer; }
.rn-cap-bin-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; padding: 8px; text-align: center; color: oklch(0.975 0.005 80); line-height: 1.3; background: oklch(0.45 0.03 250); }
/* Up to four bins get distinct heading colours by position. */
.rn-cap-bin:nth-of-type(1) .rn-cap-bin-h { background: oklch(0.52 0.13 38); }
.rn-cap-bin:nth-of-type(2) .rn-cap-bin-h { background: oklch(0.40 0.025 250); }
.rn-cap-bin:nth-of-type(3) .rn-cap-bin-h { background: oklch(0.48 0.07 200); }
.rn-cap-bin:nth-of-type(4) .rn-cap-bin-h { background: oklch(0.46 0.10 150); }
.rn-cap-bin-h span { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 9.5px; opacity: 0.85; margin-top: 1px; }
.rn-cap-bin-body { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px; min-height: 58px; align-content: flex-start; }
.rn-cap-controls { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.rn-cap-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--hairline); cursor: pointer; background: var(--paper); color: var(--ink-soft); min-height: 38px; }
.rn-cap-btn:hover { border-color: var(--ink-soft); color: var(--ink); }
.rn-cap-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rn-cap-score { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rn-cap-msg { font-size: 13px; color: var(--ink-soft); font-style: italic; margin: 10px 0 0; min-height: 1.4em; }


/* ============================================================
   GCSE topic-split components: cross-page sidebar nav (.rn-nav*),
   hub accordion (.rn-acc*) + hub pager, cluster pager (.rn-cluster-pager).
   Folded in from the C1 split prototype.
   ============================================================ */

/* The cross-page navigation sidebar (replaces the single-page .rn-toc).
   Mirrors .rn-toc so it looks native, but lists every sub-topic across
   all cluster pages, with the current page highlighted. */
.rn-nav {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 18px 18px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.rn-nav::-webkit-scrollbar { width: 8px; }
.rn-nav::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 8px; }

.rn-nav-title {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3, #69605a);
  margin: 0 0 12px;
}

/* Each cluster (= one page) is a group in the nav */
.rn-nav-group { margin: 0 0 6px; }
.rn-nav-grouphead {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.rn-nav-grouphead:hover { background: var(--paper, #fff); }
.rn-nav-group.is-current > .rn-nav-grouphead {
  background: var(--paper, #fff);
  border-color: var(--hairline);
  color: var(--accent, #b5462f);
}

/* Sub-topic links inside a cluster */
.rn-nav-list {
  list-style: none;
  margin: 2px 0 8px;
  padding: 0 0 0 2px;
  border-left: 2px solid var(--hairline);
  /* Collapsed by default for non-current groups to keep the list short */
}
.rn-nav-group:not(.is-current) .rn-nav-list { display: none; }
/* Single-page contents (.rn-nav--index, e.g. required practicals): there is no
   "current page" to collapse to, so keep every group's sub-list open. */
.rn-nav--index .rn-nav-group .rn-nav-list { display: block; }
/* Flex row so an A2 / tier dot appended after the link sits on the SAME line
   (aligned to the first line of the link text), not wrapped onto its own line. */
.rn-nav-list li { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.rn-nav-list li > a { flex: 1 1 auto; min-width: 0; }
.rn-nav-list li > .rn-toc-tags { flex: none; padding-right: 8px; }
.rn-nav-list a {
  display: block;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--ink-2, #4a443e);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
}
.rn-nav-list a:hover { color: var(--ink); background: var(--paper, #fff); }
.rn-nav-list a.is-active {
  color: var(--accent, #b5462f);
  font-weight: 600;
}

.rn-nav-divider { border: 0; border-top: 1px solid var(--hairline); margin: 14px 0 10px; }
.rn-nav-meta { display: flex; flex-direction: column; gap: 6px; font-size: 0.74rem; color: var(--ink-3, #69605a); }
.rn-nav-meta .tag { margin-right: 4px; }

/* Mobile toggle button — hidden on desktop */
.rn-nav-toggle { display: none; }

/* Cross-page pager between cluster pages */
.rn-cluster-pager .rn-pager-topic { display: block; }
.rn-cluster-pager .rn-pager-allbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
  font-size: 0.85rem;
  color: var(--ink-2, #4a443e);
  text-decoration: none;
}
.rn-cluster-pager .rn-pager-allbtn:hover { color: var(--accent, #b5462f); }

/* ---------- Hub: SaveMyExams-style accordion ---------- */
.rn-acc-list { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 32px; }

.rn-acc, .rn-acc-link {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--paper-2);
  transition: border-color .15s ease, background .15s ease;
}
.rn-acc[open] { background: var(--paper, #fff); }
.rn-acc:hover, .rn-acc-link:hover { border-color: var(--ink-3, #b8b1a8); }

.rn-acc-head, .rn-acc-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  text-decoration: none;
}
.rn-acc-head::-webkit-details-marker { display: none; }
.rn-acc-head::marker { content: ""; }

.rn-acc-title { flex: 1 1 auto; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.rn-acc-link:hover .rn-acc-title,
.rn-acc-head:hover .rn-acc-title { color: var(--accent, #b5462f); }

.rn-acc-chev { flex: 0 0 auto; color: var(--ink-3, #69605a); font-size: 0.9rem; transition: transform .18s ease; }
.rn-acc[open] .rn-acc-chev { transform: rotate(180deg); }
.rn-acc-arrow { flex: 0 0 auto; color: var(--accent, #b5462f); font-weight: 600; }
.rn-acc-flag {
  flex: 0 0 auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-3, #69605a);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 3px 9px;
}
.rn-acc-capstone { border-left: 3px solid var(--accent, #b5462f); }

.rn-acc-body { list-style: none; margin: 0; padding: 4px 24px 14px; }
.rn-acc-body li { border-top: 1px solid var(--hairline); }
.rn-acc-body a {
  display: block;
  padding: 12px 6px;
  color: var(--ink-2, #4a443e);
  text-decoration: none;
  font-size: 0.96rem;
}
.rn-acc-body a:hover { color: var(--accent, #b5462f); }

/* Tier note as a compact, muted collapsible above the parts list */
.rn-acc-tier { margin-bottom: 18px; border-style: dashed; background: transparent; }
.rn-acc-tier .rn-acc-title { font-weight: 600; font-size: 0.95rem; color: var(--ink-2, #4a443e); }
.rn-acc-tierbody { padding: 2px 24px 18px; color: var(--ink-2, #4a443e); font-size: 0.92rem; line-height: 1.55; }
.rn-acc-tierbody p { margin: 0 0 8px; }
.rn-acc-tierbody ul { margin: 8px 0 0; padding-left: 20px; }
.rn-acc-tierbody li { margin: 5px 0; }

/* Hub: trim the generous article padding so the short page isn't full of gaps */
.hub-page .rn-wrap { padding-top: clamp(28px, 4vw, 40px); padding-bottom: clamp(12px, 2vw, 20px); }
.hub-page .article-related { padding-top: clamp(36px, 5vw, 56px); }
/* Hub has no sidebar grid: let the contents column span the full wrap width
   so the accordion lines up with the hero/header (no lopsided right-hand gap).
   Keep the intro paragraph at a readable measure. */
.hub-page .rn-content { max-width: none; }

/* Beat the global `.rn-content a { text-decoration: underline; color: ink }` rule */
.rn-content a.rn-acc-link,
.rn-content .rn-acc-body a,
.rn-content a.rn-pager-link,
.rn-content a.btn { text-decoration: none; }
.rn-content a.rn-acc-link .rn-acc-title { color: var(--ink); }
.rn-content a.btn-primary { color: var(--paper); }   /* keep button label legible on dark fill */

/* ---------- Capstone row: same bar family, marked with a red box ---------- */
.rn-acc-capstone { border: 1.5px solid var(--accent, #b5462f); }
.rn-acc-capstone-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.rn-acc-capstone-eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #b5462f);
}

/* Topic pager on the hub */
.rn-hub-pager { margin-top: 30px; }

/* ---------- Mobile: collapse the nav into a sticky toggle ---------- */
@media (max-width: 960px) {
  .rn-nav {
    position: sticky;
    /* Sit flush against the mobile header, no gap. The header is 82-83px tall
       (46px hamburger/CTA + 18px top & bottom padding + 1px border), so 82px
       keeps the bar tight to its underside without clipping the toggle text. */
    top: 82px;
    z-index: 20;
    max-height: none;
    overflow: visible;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .rn-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 6px 4px;
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }
  .rn-nav-toggle .rn-nav-toggle-caret { transition: transform 0.18s ease; }
  .rn-nav[aria-expanded="true"] .rn-nav-toggle-caret { transform: rotate(180deg); }

  /* Hide the title + nav body until expanded */
  .rn-nav-title { display: none; }
  .rn-nav-body {
    display: none;
    margin-top: 8px;
    max-height: 65vh;
    overflow-y: auto;
  }
  .rn-nav.is-open .rn-nav-body { display: block; }

  /* When open on mobile, expand every group's list so all pages are reachable */
  .rn-nav.is-open .rn-nav-group .rn-nav-list { display: block; }
}

/* Split-page polish: let the breadcrumb wrap instead of clipping the
   last crumb on narrow screens (audit item). */
.breadcrumb { flex-wrap: wrap; row-gap: 4px; }

/* ============================================================
   TOF RACE — A-Level atomic structure §3: two isotope ions race
   down a flight tube at the same KE. Behaviour in site.js
   (driven by [data-tr] / .tr-*); chrome shared with .rn-cap-*.
============================================================ */
.tr-pairs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.tr-pair { text-transform: none; letter-spacing: 0.02em; font-size: 12.5px; }
.tr-pair sup { font-size: 0.72em; line-height: 0; position: relative; vertical-align: baseline; top: -0.45em; }
.tr-svg { display: block; width: 100%; height: auto; margin: 0 0 4px; }
.tr-spec { display: block; width: 100%; height: auto; }
.tr-caption sup { font-size: 0.78em; }

/* ============================================================
   SPECTRUM → Ar TRAINER — A-Level atomic structure §4: draggable
   mass-spectrum peaks with a live weighted-mean working line +
   guess-the-element mode. Behaviour in site.js ([data-sa] / .sa-*).
============================================================ */
.sa-blurb { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }
.sa-modes, .sa-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.sa-preset { text-transform: none; font-size: 12.5px; letter-spacing: 0.02em; }
.rn-cap-btn.is-on { border-color: var(--accent); color: var(--accent); background: oklch(0.96 0.03 30); }
.sa-svg { display: block; width: 100%; height: auto; }
.sa-hit { touch-action: none; }
.sa-steppers { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 0; }
.sa-step { display: inline-flex; align-items: center; gap: 7px; }
.sa-step-mz { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }
.sa-bump { min-width: 38px; padding: 6px 0; font-size: 14px; line-height: 1; }
.sa-eq { margin-top: 18px; }
.sa-eq-ar { font: inherit; font-weight: 700; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline dotted var(--muted) 1.5px; text-underline-offset: 3px; }
.sa-eq-ar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sa-guess-q { font-size: 14.5px; margin: 12px 0 8px; }
.sa-guess-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.sa-arlab { font-family: var(--font-mono); font-size: 13.5px; }
.sa-ar-in { width: 110px; }
.sa-el-q { font-size: 14.5px; font-weight: 600; margin: 4px 0 8px; }
.sa-el-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.sa-el-opts .rn-cap-btn.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); color: oklch(0.32 0.08 150); }
.sa-el-opts .rn-cap-btn.is-err { border-color: var(--accent); background: oklch(0.95 0.05 30); color: var(--accent); }

/* ============================================================
   ELECTRONS-IN-BOXES BUILDER — A-Level atomic structure §5:
   place electrons one tap at a time with aufbau / Pauli / Hund
   enforced and named. Behaviour in site.js ([data-eb] / .eb-*).
============================================================ */
.eb-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.eb-el-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.eb-el { font-family: var(--font-sans); font-size: 14px; padding: 8px 10px; border: 1.5px solid var(--hairline); border-radius: 6px; background: var(--paper); color: var(--ink); min-height: 38px; max-width: 230px; }
.eb-progress { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); margin: 0 0 12px; min-height: 1.4em; }
.eb-ladder { display: flex; flex-direction: column; gap: 13px; }
.eb-row { display: flex; align-items: center; gap: 12px; }
.eb-lab { font-family: var(--font-mono); font-size: 14px; width: 26px; flex: none; color: var(--ink); }
.eb-boxes { display: flex; }
.eb-box { width: 52px; height: 52px; flex: none; padding: 0; border: 3px solid oklch(0.20 0.018 250); border-radius: 0; background: var(--paper); cursor: pointer; display: block; }
.eb-box + .eb-box { margin-left: -3px; }
.eb-box:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; position: relative; z-index: 1; }
.eb-box svg { display: block; width: 100%; height: 100%; }
.eb-box path { fill: none; stroke: oklch(0.20 0.018 250); stroke-width: 2.8; stroke-linecap: round; opacity: 0; }
.eb-box.has1 .eb-up { opacity: 1; }
.eb-box.has2 .eb-up, .eb-box.has2 .eb-dn { opacity: 1; }
.eb-box path.is-new { stroke: oklch(0.52 0.165 30); }
.eb-box.is-err { border-color: var(--accent); background: oklch(0.95 0.05 30); z-index: 1; position: relative; }
.eb-out { margin-top: 18px; }
.eb-ion-q { font-size: 14.5px; font-weight: 600; margin: 14px 0 0; }
@media (max-width: 420px) {
  .eb-box { width: 44px; height: 44px; }
}

/* ============================================================
   PERIOD 3 IE GRAPH — A-Level atomic structure §6: progressive
   enhancement of the static first-IE graph (tappable points,
   config strip + reason panel, Group 2 view). site.js ([data-p3]).
============================================================ */
.p3-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
[data-p3] .p3-pt { cursor: pointer; outline: none; }
.p3-panel { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--paper-2); text-align: left; }
.p3-hint { font-size: 13px; font-style: italic; color: var(--muted); margin: 0; }
.p3-meta { font-family: var(--font-mono); font-size: 13px; margin: 0 0 10px; color: var(--ink); }
.p3-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.p3-sub { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.p3-sublab { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.p3-orbs { display: flex; }
.p3-box { width: 26px; height: 26px; border: 2px solid oklch(0.20 0.018 250); background: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: -1px; color: oklch(0.20 0.018 250); }
.p3-box + .p3-box { margin-left: -2px; }
.p3-out { color: oklch(0.52 0.165 30); font-weight: 700; }
.p3-why { font-size: 13.5px; color: var(--ink-soft); margin: 10px 0 0; }

/* ============================================================
   SAME-KE SPEED TOGGLE — A-Level atomic structure §3 stage 2:
   two ions at fixed kinetic energy; picking ion B's mass rescales
   its speed (and its CSS run animation). Behaviour in site.js
   ([data-ke] / .ke-*); the dots animate with pure CSS so the
   no-JS fallback still moves.
============================================================ */
.ke-blurb { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }
.ke-masses { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.ke-mlab { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.ke-lanes { display: flex; flex-direction: column; gap: 14px; margin: 0 0 14px; }
.ke-lane { display: grid; grid-template-columns: 108px 1fr minmax(150px, auto); align-items: center; gap: 12px; }
.ke-ion-lab { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.ke-track { position: relative; height: 16px; border-bottom: 2px solid var(--hairline); }
.ke-dot { position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; animation: ke-run var(--ke-dur, 1.8s) linear infinite; }
.ke-dot-a { background: oklch(0.52 0.165 30); }
.ke-dot-b { background: oklch(0.20 0.018 250); opacity: 0.85; }
.ke-v { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); text-align: right; }
@keyframes ke-run { from { left: 0; } to { left: calc(100% - 13px); } }
@media (prefers-reduced-motion: reduce) {
  .ke-dot { animation: none; left: calc(60% - 13px); }
  .ke-dot-a { left: calc(100% - 13px); }
}
@media (max-width: 560px) {
  .ke-lane { grid-template-columns: 90px 1fr; }
  .ke-v { grid-column: 1 / -1; text-align: left; margin-top: -6px; }
}

/* ============================================================
   GUIDED TOF CALCULATION — A-Level atomic structure §3: three
   gated steps (mass → speed → time), each answered as
   number × 10^power. Behaviour in site.js ([data-tc] / .tc-*).
============================================================ */
.tc-q { font-size: 14.5px; margin: 0 0 16px; }
.tc-q sup { font-size: 0.72em; }
.tc-steps { list-style: none; margin: 0 0 4px; padding: 0; }
.tc-step { margin: 0 0 12px; }
.tc-step[hidden] { display: none; }
.tc-step-lab { margin: 0 0 6px; font-size: 14px; }
.tc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.tc-eq { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
.tc-in { width: 84px; }
.tc-x10 { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); margin-right: -2px; }
.tc-in-exp { width: 56px; font-size: 12.5px; padding: 5px 7px; transform: translateY(-7px); }
.tc-unit { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-soft); }
.tc-hint { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.tc-hint:empty { display: none; }
.tc-done { font-size: 14px; font-weight: 500; margin: 10px 0 0; }

/* ============================================================
   ORBITAL SHAPES — A-Level atomic structure §5: static 3-panel
   figure (s sphere, p dumbbell, three p orbitals). No JS.
============================================================ */
.orb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.orb-panel svg { display: block; width: 100%; height: auto; }

/* ============================================================
   ATOM-MODEL TIMELINE — A-Level atomic structure §1: five mini
   models (Dalton → today) in a strip. No JS.
============================================================ */
/* Shape gallery grid (.am-grid, used on atomic-structure) + the VSEPR chart
   (.am-matrix on bonding: rows = charge clouds, columns = lone pairs; scrolls
   horizontally inside its own box on narrow screens). */
.am-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.am-matrix-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 4px 0; }
.am-matrix { display: grid; grid-template-columns: max-content repeat(4, 1fr); gap: 4px 10px; align-items: start; min-width: 560px; }
.am-colhead { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: center; align-self: end; padding-bottom: 4px; }
.am-rowhead { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--ink-soft); align-self: center; white-space: nowrap; padding-right: 6px; }
.am-panel svg { display: block; width: 100%; height: auto; }
.am-name { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); text-align: center; margin: 2px 0 2px; }
.am-idea { font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center; margin: 0; }
.am-legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; font-size: 11.5px; color: var(--muted); margin: 14px 0 2px; }
.am-legend span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 560px) {
  .am-grid { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
}

/* ============================================================
   SHIELDING COMPARISONS — A-Level atomic structure §6: static
   side-by-side atom panels (Na vs Ar, Be vs Ca). No JS.
============================================================ */
.sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; margin: 0 auto; }
.sh-panel svg { display: block; width: 100%; height: auto; }

/* ============================================================
   PERIODIC TABLE IN BLOCKS — A-Level atomic structure §5:
   block-coloured table; elements to Z = 36 are buttons that fill
   the panel with the configuration. site.js ([data-pt] / .pt-*).
============================================================ */
.pt-blurb { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pt-key { font-family: var(--font-mono); font-size: 11.5px; padding: 3px 10px; border-radius: 4px; border: 1px solid oklch(0.86 0.008 250); color: var(--ink); }
/* No scrollbar chrome — the shared .rn-table-scroll edge fade (also on this
   div) is the "more off-screen" cue, so mobile gets a clean swipeable table. */
.pt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 12px; scrollbar-width: none; }
.pt-scroll::-webkit-scrollbar { display: none; }
.pt-grid { display: grid; grid-template-columns: repeat(18, minmax(26px, 1fr)); grid-template-rows: repeat(7, auto) 10px repeat(2, auto); gap: 2px; min-width: 540px; }
.pt-el { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-family: var(--font-mono); font-size: 11px; line-height: 1; border: 1px solid oklch(0.86 0.008 250); border-radius: 3px; color: var(--ink); background: var(--paper); padding: 0; }
button.pt-el { cursor: pointer; font-weight: 600; }
button.pt-el:hover { border-color: var(--ink-soft); }
button.pt-el:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; position: relative; z-index: 1; }
button.pt-el.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pt-far { color: var(--muted); font-size: 10px; font-weight: 400; }
.pt-mark { font-size: 8.5px; color: var(--muted); border-style: dashed; letter-spacing: -0.02em; }
.pt-s { background: oklch(0.94 0.035 165); }
.pt-p { background: oklch(0.95 0.035 30); }
.pt-d { background: oklch(0.94 0.028 250); }
.pt-f { background: oklch(0.95 0.03 310); }
.pt-panel { margin: 0; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--paper-2); }
.pt-hint { font-size: 13px; font-style: italic; color: var(--muted); margin: 0; }
.pt-meta { font-family: var(--font-mono); font-size: 13px; margin: 0 0 8px; color: var(--ink); }
.pt-cfg { font-size: 15px; margin: 0 0 8px; }
.pt-why { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* ============================================================
   SUCCESSIVE-IE CAPSTONE — A-Level atomic structure §6: mystery
   element, log-scale successive-IE bars, pick the group.
   Behaviour in site.js ([data-ij] / .ij-*).
============================================================ */
.ij-blurb { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }
.ij-svg { display: block; width: 100%; height: auto; margin: 0 0 12px; }
.ij-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ij-g { text-transform: none; letter-spacing: 0.02em; font-size: 12.5px; }
.ij-g.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); color: oklch(0.32 0.08 150); }
.ij-g.is-err { border-color: oklch(0.55 0.15 25); background: oklch(0.96 0.04 25); color: oklch(0.35 0.15 25); }

/* ============================================================
   A-Level 3.1.2 widgets: SI-units drill (si-) + titre trainer (tt-)
   Chrome shared with .rn-cap-*; palette matches the sa-/tr- widgets.
   ============================================================ */
.si-given { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); margin: 0 0 12px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px; }
.si-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.si-lab { font-family: var(--font-mono); font-size: 12px; color: var(--muted); min-width: 62px; }
.si-opt { text-transform: none; letter-spacing: 0.02em; font-size: 12.5px; }
.si-opt.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); color: oklch(0.32 0.08 150); }
.si-opt.is-err { border-color: oklch(0.55 0.15 25); background: oklch(0.96 0.04 25); color: oklch(0.35 0.15 25); }
.si-opt:disabled:not(.is-ok) { opacity: 0.45; cursor: default; }
.si-hint { font-size: 12px; color: oklch(0.45 0.12 25); flex-basis: 100%; min-height: 1em; }
.si-hint:empty { display: none; }
.si-result { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--ink); margin: 12px 0 0; }
.si-result:empty { display: none; }
/* Shared widget button row (was .si-foot; now used by si-, tt-, sg-, be-) */
.rn-cap-foot { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Equation-line helpers: a small muted label prefix, and struck-out spectator
   ions in worked ionic-equation lines */
.rn-eqlab { display: inline-block; min-width: 172px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.rn-strike { text-decoration: line-through; text-decoration-color: oklch(0.52 0.165 30); text-decoration-thickness: 1.5px; color: var(--muted); }
@media (max-width: 560px) { .rn-eqlab { display: block; min-width: 0; margin-bottom: 2px; } }

.tt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
@media (max-width: 560px) { .tt-cards { grid-template-columns: repeat(2, 1fr); } }
.tt-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1.5px solid var(--hairline); border-radius: 6px; background: var(--paper); cursor: pointer; font-family: var(--font-mono); }
.tt-card:hover { border-color: var(--ink-soft); }
.tt-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tt-lab { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.tt-val { font-size: 16px; font-weight: 500; color: var(--ink); }
.tt-box { width: 15px; height: 15px; border: 1.5px solid var(--muted); border-radius: 3px; background: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: var(--paper); }
.tt-card[aria-pressed="true"] { border-color: oklch(0.52 0.13 230); background: oklch(0.96 0.02 230); }
.tt-card[aria-pressed="true"] .tt-box { border-color: oklch(0.48 0.13 230); background: oklch(0.52 0.13 230); }
.tt-card[aria-pressed="true"] .tt-box::after { content: "\2713"; }
.tt-card.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); }
.tt-card.is-err { border-color: oklch(0.55 0.15 25); background: oklch(0.96 0.04 25); }
.tt-feedback { font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px; min-height: 1em; }
.tt-feedback:empty { display: none; }
.tt-mean { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 14px; }
.tt-mean[hidden] { display: none; }
.tt-mean label { display: flex; align-items: center; gap: 8px; }
.tt-in { font-family: var(--font-mono); font-size: 14px; padding: 6px 8px; width: 84px; border: 1.5px solid var(--hairline); border-radius: 4px; background: var(--paper); color: var(--ink); }
.tt-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Virtual titration (A-Level 3.1.2) — .vt-* driven by [data-vt] in site.js.
   The burette level + phenolphthalein opacity are decorative; the reading is
   the truth. Static fallback = the apparatus/meniscus figures + tt- trainer. */
.vt-stage { display: flex; justify-content: center; margin: 4px 0 8px; }
.vt-svg { display: block; width: 100%; max-width: 340px; height: auto; touch-action: manipulation; }
.vt-read { font-family: var(--font-mono); font-size: 13px; color: var(--ink); text-align: center; margin: 0 0 4px; min-height: 1.3em; }
.vt-table { margin-top: 6px; }
.vt-table td, .vt-table th { text-align: center; }
.vt-table td:first-child, .vt-table th:first-child { text-align: left; }
.vt-table tr.is-rough td { color: var(--muted); }
.vt-table tr.is-over td { color: oklch(0.5 0.15 25); }
.vt-concord { font-size: 13.5px; line-height: 1.6; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 4px; padding: 10px 12px; margin: 12px 0 0; }
.vt-concord[hidden] { display: none; }

/* Auto-marked gated-step calculators (A-Level 3.1.2) — .tg-* titration grid
   [data-tg] and its sibling .gv-* gas-volumes drill [data-gv] in site.js.
   Gated step boxes; each unlocks the next; hint on a wrong value. */
.tg-q, .gv-q, .sg-q, .rt-q { font-size: 14px; line-height: 1.6; margin: 0 0 6px; }
.tg-steps, .gv-steps { margin: 8px 0 4px; }
.tg-step, .gv-step { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 8px; padding: 9px 11px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--paper); }
.tg-step[hidden], .gv-step[hidden] { display: none; }
.tg-step.is-done, .gv-step.is-done { border-color: oklch(0.55 0.11 150); background: oklch(0.97 0.03 150); }
.tg-lab, .gv-lab { font-size: 13px; flex: 1 1 210px; color: var(--ink); }
.tg-lab .tg-n, .gv-lab .gv-n { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-right: 4px; }
.tg-in, .gv-in, .sg-in, .be-in, .rt-in, .hs-in, .me-in, .gq-in, .ec-in { font-family: var(--font-mono); font-size: 14px; padding: 6px 8px; width: 130px; border: 1.5px solid var(--hairline); border-radius: 4px; background: var(--paper); color: var(--ink); }
.tg-in:focus-visible, .gv-in:focus-visible, .sg-in:focus-visible, .be-in:focus-visible, .rt-in:focus-visible, .hs-in:focus-visible, .me-in:focus-visible, .me-cin:focus-visible, .gq-in:focus-visible, .ec-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.tg-in.is-ok, .gv-in.is-ok, .sg-in.is-ok, .be-in.is-ok, .rt-in.is-ok, .hs-in.is-ok, .me-in.is-ok, .me-cin.is-ok, .gq-in.is-ok, .ec-in.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.96 0.045 150); }
.tg-in.is-err, .gv-in.is-err, .sg-in.is-err, .be-in.is-err, .rt-in.is-err, .hs-in.is-err, .me-in.is-err, .me-cin.is-err, .gq-in.is-err, .ec-in.is-err { border-color: oklch(0.55 0.15 25); background: oklch(0.97 0.04 25); }
.tg-unit, .gv-unit { font-size: 12px; color: var(--muted); }
.tg-check, .gv-check { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--hairline); cursor: pointer; background: var(--paper); color: var(--ink-soft); min-height: 34px; }
.tg-check:hover, .gv-check:hover { border-color: var(--ink-soft); color: var(--ink); }
.tg-check:focus-visible, .gv-check:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tg-hint, .gv-hint { font-size: 12px; color: oklch(0.5 0.12 25); flex-basis: 100%; min-height: 1em; }
.tg-hint:empty, .gv-hint:empty { display: none; }
.tg-done-note, .gv-done-note { flex-basis: 100%; font-size: 12.5px; color: oklch(0.4 0.09 150); font-weight: 500; }

/* Sig-figs & standard-form drill (A-Level 3.1.2) — .sg-* driven by [data-sg] */
.sg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-in { width: 150px; }
.sg-score { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.sg-score:empty { display: none; }

/* Balance-the-equation drill (A-Level 3.1.2) — .be-* driven by [data-be] */
.be-eq { line-height: 2.1; }
.be-sp { white-space: nowrap; }
.be-in { width: 46px; text-align: center; margin-right: 3px; }
.be-tally { max-width: 360px; }
.be-tally td, .be-tally th { text-align: center; }
.be-tally td:first-child, .be-tally th:first-child { text-align: left; }
.be-tally td.be-ok { color: oklch(0.45 0.11 150); font-weight: 700; }
.be-tally td.be-err { color: oklch(0.5 0.15 25); font-weight: 700; }

/* Three-step-method capstone (A-Level 3.1.2) — .rt-* driven by [data-rt].
   Tap step tiles into an ordered route, then a numeric answer + revealed
   working. Route chips reuse .rn-cap-chip; inputs share the .tg-in family. */
.rt-eqline { margin: 2px 0 14px; }
.rt-eqline[hidden] { display: none; }
.rt-route { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 50px; padding: 8px 10px; border: 1px dashed var(--hairline); border-radius: 6px; background: var(--paper); margin: 0 0 12px; }
.rt-route .rn-cap-chip { cursor: pointer; }
.rt-route .rn-cap-chip[disabled] { cursor: default; }
.rt-route-num { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-right: 7px; }
.rt-placeholder { font-size: 12.5px; font-style: italic; color: var(--muted); }
.rt-bank { display: flex; flex-direction: column; gap: 10px; }
.rt-bankgroup { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.rt-banklab { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); flex: 0 0 88px; padding-top: 10px; }
.rt-tiles { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 240px; }
.rt-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 7px 11px; border: 1.5px solid var(--ink-soft); border-radius: 6px; background: var(--paper); cursor: pointer; font-family: var(--font-sans); text-align: left; }
.rt-tile:hover { border-color: var(--accent); }
.rt-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rt-tile[disabled] { opacity: 0.38; cursor: default; border-color: var(--hairline); }
.rt-tile-f { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.rt-tile-f sub, .rt-tile-f sup { font-size: 0.72em; line-height: 0; }
.rt-tile-cap { font-size: 10.5px; color: var(--muted); }
.rt-run { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rt-run[hidden] { display: none; }
.rt-runlab { font-size: 13px; color: var(--ink); font-weight: 600; }
.rt-unit { font-size: 13px; color: var(--ink-soft); }
.rt-working { margin-top: 14px; padding: 12px 14px 6px; border-left: 3px solid oklch(0.55 0.11 150); background: var(--paper); border-radius: 0 6px 6px 0; }
.rt-working[hidden] { display: none; }
.rt-worklab { font-size: 13px; margin: 0 0 2px; }
.rt-worklab strong { font-weight: 600; }
.rt-coda { font-size: 13px; font-style: italic; color: var(--ink-soft); margin: 2px 0 8px; }
.rt-score { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.rt-score:empty { display: none; }
/* no-JS gating: without .rt-live the bank stays as a static map of the moves;
   the inert route/answer/controls stay hidden (same pattern as .vt-wrap) */
.rt-wrap:not(.rt-live) .rt-route,
.rt-wrap:not(.rt-live) .rt-run,
.rt-wrap:not(.rt-live) .rt-planlead,
.rt-wrap:not(.rt-live) .rn-cap-foot { display: none; }
@media (max-width: 560px) {
  .rt-banklab { flex-basis: 100%; padding-top: 0; }
}

/* Virtual titration no-JS gating: until site.js adds .vt-live, only the
   labelled apparatus figure + noscript note show (no inert controls). */
.vt-wrap:not(.vt-live) .rn-cap-controls,
.vt-wrap:not(.vt-live) .vt-read,
.vt-wrap:not(.vt-live) .rn-table-scroll { display: none; }

/* ============================================================
   BRIDGE THE GAP — GCSE → A-Level bridging course styles
   (.rn-bridge-* chrome · .rn-fml-* formula input · .rn-drill-*
    drill runner · .rn-diag-* diagnostic — engines in site.js)
============================================================ */

/* Worked-example stepper — a <details> chain inside prose */
.rn-bridge-steps {
  margin: 14px 0 2px; border: 1px solid var(--hairline); border-radius: 6px;
  background: var(--paper-2); padding: 0 14px;
}
.rn-bridge-steps > summary {
  cursor: pointer; padding: 10px 0;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft);
}
.rn-bridge-steps > summary:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 2px; }
.rn-bridge-steps[open] { padding-bottom: 10px; }
.rn-bridge-steps ol { margin: 4px 0 6px; padding-left: 22px; }
.rn-bridge-steps li { margin: 7px 0; }
.rn-bridge-steps li strong { font-weight: 600; }

/* Formula-input question */
.rn-fml-q { margin: 18px 0; }
.rn-fml-prompt { margin: 0 0 8px; font-weight: 600; }
.rn-fml-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rn-fml-in {
  font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.02em;
  width: 150px; padding: 8px 10px; border: 1.5px solid var(--hairline);
  border-radius: 4px; background: var(--paper); color: var(--ink);
}
.rn-fml-in:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 1px; border-color: oklch(0.52 0.13 200); }
.rn-fml-in.is-ok  { border-color: oklch(0.50 0.15 155); background: oklch(0.96 0.035 155); color: oklch(0.30 0.12 155); font-weight: 600; }
.rn-fml-in.is-err { border-color: oklch(0.58 0.16 25);  background: oklch(0.96 0.035 25);  color: oklch(0.38 0.16 25); }
.rn-fml-preview {
  min-width: 74px; font-size: 17px; color: var(--ink-soft);
  border-bottom: 1px dashed var(--hairline); padding: 2px 4px;
}
.rn-fml-preview:empty::before { content: "· · ·"; color: var(--muted); opacity: 0.5; }
.rn-fml-row .rn-fml-check { margin-top: 0; }
.rn-fml-check {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--paper); background: oklch(0.40 0.12 200); border: 1px solid oklch(0.40 0.12 200);
  padding: 9px 17px; border-radius: 4px; cursor: pointer; transition: background .12s;
}
.rn-fml-check:hover:not(:disabled) { background: oklch(0.34 0.12 200); }
.rn-fml-check:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 2px; }
.rn-fml-check:disabled { opacity: 0.5; cursor: default; }
.rn-fml-feedback { margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.rn-fml-feedback:empty { display: none; }
.rn-fml-feedback.fc-ok  { color: oklch(0.38 0.13 155); }
.rn-fml-feedback.fc-err { color: oklch(0.45 0.15 25); }
.rn-fml-feedback sub, .rn-drill-misses sub { font-size: 0.72em; }

/* Drill runner chrome */
[data-drill] {
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 16px 18px 18px; margin: 22px 0; background: var(--paper);
}
[data-drill] .rn-fml-q, [data-drill] .rn-exam-q { margin: 14px 0 4px; }
.rn-drill-hud {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
}
.rn-drill-title { font-weight: 600; color: var(--ink); }
.rn-drill-count { color: var(--ink-soft); }
.rn-drill-streak { color: var(--accent); font-weight: 600; margin-left: auto; }
.rn-drill-next {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--ink-soft);
  padding: 9px 17px; border-radius: 4px; cursor: pointer; transition: background .12s;
}
.rn-drill-next:hover { background: var(--paper-3); }
.rn-drill-next:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 2px; }
.rn-drill-end { margin-top: 12px; }
.rn-drill-end-score { font-size: 17px; }
.rn-drill-misses { margin: 6px 0 12px; padding-left: 22px; }
.rn-drill-misses li { margin: 5px 0; }
.rn-drill-retry {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--paper); background: oklch(0.40 0.12 200); border: 1px solid oklch(0.40 0.12 200);
  padding: 9px 17px; border-radius: 4px; cursor: pointer; transition: background .12s;
}
.rn-drill-retry:hover { background: oklch(0.34 0.12 200); }
.rn-drill-retry:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 2px; }

/* Diagnostic — two columns: the one-at-a-time quiz (left) + a slim "what it
   checks" panel (right), so the runner isn't a narrow column with a big empty
   right. Mirrors the two-column hero above. Stacks/drops the panel on mobile. */
.rn-diag-layout { display: flex; align-items: flex-start; gap: clamp(32px, 4vw, 56px); }
.rn-diag-layout > .article-body-inner[data-diag] { flex: 0 1 680px; min-width: 0; }
/* margin-left:auto sits the panel's right edge flush with the hero gauge above */
.rn-diag-aside { flex: 0 0 clamp(258px, 27vw, 336px); margin-left: auto; position: sticky; top: 96px; }
.rn-diag-aside-card {
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--paper-2); padding: 20px 22px 18px;
}
.rn-diag-aside-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 9px;
}
.rn-diag-aside-lead { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 12px; }
.rn-diag-aside-skills { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: dsk; }
.rn-diag-aside-skills li {
  counter-increment: dsk; display: flex; gap: 11px; align-items: baseline;
  font-size: 14.5px; color: var(--ink); padding: 8px 0; border-top: 1px solid var(--hairline);
}
.rn-diag-aside-skills li:first-child { border-top: 0; padding-top: 0; }
.rn-diag-aside-skills li::before {
  content: counter(dsk); font-family: var(--font-mono); font-size: 11px;
  font-weight: 500; color: var(--accent); flex: none;
}
.rn-diag-aside-foot {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--muted); margin: 0; line-height: 1.55;
}
@media (max-width: 820px) {
  .rn-diag-layout { display: block; }
  .rn-diag-aside { display: none; }   /* the intro prose already lists the skills */
}

/* Diagnostic runner */
.rn-diag-bar { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.rn-diag-bar-txt {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.rn-diag-bar-track {
  flex: 1; height: 6px; border-radius: 3px; background: var(--paper-3); overflow: hidden;
}
.rn-diag-bar-fill {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: var(--accent); transition: width .3s;
}
@media (prefers-reduced-motion: reduce) { .rn-diag-bar-fill { transition: none; } }
.rn-diag-skills { margin: 14px 0 18px; display: grid; gap: 8px; }
.rn-diag-skill {
  display: grid; grid-template-columns: minmax(150px, 1.4fr) 1fr auto;
  gap: 4px 12px; align-items: center;
  padding: 9px 12px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--paper);
}
.rn-diag-skill-name { font-weight: 600; font-size: 14.5px; }
.rn-diag-skill-name em { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.rn-diag-skill-bar { display: flex; gap: 3px; }
.rn-diag-skill-bar i {
  width: 14px; height: 8px; border-radius: 2px; background: var(--paper-3);
  border: 1px solid var(--hairline);
}
.rn-diag-skill-bar i.is-hit { background: oklch(0.52 0.15 155); border-color: oklch(0.50 0.15 155); }
.rn-diag-skill-verdict { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.rn-diag-skill.is-solid .rn-diag-skill-verdict { color: oklch(0.38 0.13 155); }
.rn-diag-skill.is-shaky .rn-diag-skill-verdict { color: oklch(0.55 0.12 75); }
.rn-diag-skill.is-start .rn-diag-skill-verdict { color: oklch(0.45 0.15 25); }
@media (max-width: 560px) {
  .rn-diag-skill { grid-template-columns: 1fr auto; }
  .rn-diag-skill-bar { grid-column: 1 / -1; }
}

/* Hub: progress rings + module cards + reset */
.rn-bridge-ring { width: 44px; height: 44px; flex: none; transform: rotate(-90deg); }
.rn-bridge-ring circle { fill: none; stroke-width: 3.4; }
.rn-bridge-ring-track { stroke: var(--paper-3); }
.rn-bridge-ring-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .4s; }
@media (prefers-reduced-motion: reduce) { .rn-bridge-ring-fill { transition: none; } }
.rn-bridge-card .rn-bridge-ring-wrap {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.rn-bridge-ring-txt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.rn-bridge-card.is-done .rn-bridge-ring-fill { stroke: oklch(0.52 0.15 155); }
.rn-bridge-card.is-done .rn-bridge-ring-txt { color: oklch(0.38 0.13 155); font-weight: 700; }
.rn-bridge-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.rn-bridge-reset {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em;
  color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
}
.rn-bridge-reset:hover { color: var(--ink-soft); }
.rn-bridge-reset:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 2px; }
.rn-bridge-score { min-height: 1.4em; }
.rn-bridge-score .fc-ok { color: oklch(0.38 0.13 155); }

/* Mole Maze — the answers sit ON the tiles; picking an answer picks a direction */
[data-maze] { margin: 22px 0; }
.rn-maze-qbox { font-weight: 600; font-size: 16.5px; margin: 0 0 12px; }
.rn-maze-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: 7px; width: min(430px, 94vw); aspect-ratio: 1; margin: 4px auto 14px;
}
.rn-maze-tile {
  border: 1.5px solid var(--hairline); border-radius: 7px; background: var(--paper-2);
  position: relative; transition: background .2s, border-color .2s;
}
@media (prefers-reduced-motion: reduce) { .rn-maze-tile { transition: none; } }
.rn-maze-tile.is-visited { background: oklch(0.91 0.055 80); border-color: oklch(0.72 0.1 70); }
.rn-maze-tile.is-here {
  outline: 3px solid var(--accent); outline-offset: 1.5px;
  background: oklch(0.87 0.08 75);
}
.rn-maze-tile.is-dead { background: oklch(0.96 0.035 25); border-color: oklch(0.58 0.16 25); }
/* blank wall squares — fill the 4×4 grid but carry no answer and aren't playable */
.rn-maze-tile.rn-maze-wall {
  background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 6px, var(--paper-3) 6px, var(--paper-3) 12px);
  border-style: dashed; border-color: var(--hairline); opacity: 0.6;
}
.rn-maze-tile[data-start]::after, .rn-maze-tile[data-finish]::after {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.rn-maze-tile[data-start]::after { content: "START"; }
.rn-maze-tile[data-finish]::after { content: "EXIT"; align-items: flex-start; padding-top: 5px; }
/* the START/EXIT label must never intercept a tap meant for an answer chip
   placed on that tile, nor draw over it — ignore pointer events, and hide it
   entirely once the engine flags a chip is present (.has-chip) */
.rn-maze-tile[data-start]::after, .rn-maze-tile[data-finish]::after { pointer-events: none; }
.rn-maze-tile.has-chip::after { display: none; }
/* answers placed on tiles by the engine */
.rn-maze-chips {
  position: absolute; inset: 5px; display: flex; flex-direction: column;
  gap: 4px; justify-content: center;
}
.rn-maze-chips .rn-maze-opt {
  min-height: 0; width: 100%; padding: 5px 4px; border-radius: 5px;
  font-size: clamp(10.5px, 2.9vw, 12.5px); line-height: 1.3; text-align: center;
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
}
.rn-maze-q { margin: 14px 0 4px; }
.rn-maze-stem { font-weight: 600; margin: 0 0 10px; }
.rn-maze-opts { display: grid; gap: 8px; }
.rn-maze-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--hairline); border-radius: 6px;
  padding: 11px 14px; min-height: 44px; transition: background .12s, border-color .12s;
}
.rn-maze-opt:hover:not(:disabled) { background: var(--paper-2); border-color: var(--ink-soft); }
.rn-maze-opt:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 2px; }
.rn-maze-opt:disabled { opacity: 0.45; cursor: default; text-decoration: line-through; }
.rn-maze-dead {
  border: 1.5px solid oklch(0.58 0.16 25); border-radius: 8px;
  background: oklch(0.96 0.035 25); padding: 14px 16px; margin: 14px 0;
}
.rn-maze-dead-fb { margin: 0; color: oklch(0.38 0.16 25); font-weight: 500; }
.rn-maze-status { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.rn-maze-end {
  border: 1.5px solid oklch(0.50 0.15 155); border-radius: 8px;
  background: oklch(0.95 0.04 155); padding: 16px 18px; margin: 14px 0;
}
.rn-maze-end-line { font-size: 16.5px; margin: 0 0 10px; }

/* Retrieval cards */
[data-cards] {
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 16px 18px 18px; margin: 22px 0; background: var(--paper);
}
.rn-card { margin: 16px 0 6px; }
.rn-card-front { font-weight: 600; font-size: 16.5px; margin: 0 0 10px; }
.rn-card-back {
  display: inline-block; margin: 0 0 4px; padding: 8px 16px;
  font-size: 18px; font-weight: 600; color: oklch(0.30 0.12 155);
  background: oklch(0.95 0.04 155); border: 1.5px solid oklch(0.50 0.15 155);
  border-radius: 6px;
}
/* The deck JS hides the answer with the `hidden` attribute; the author
   `display: inline-block` above out-specifies the UA `[hidden]` rule, so
   without this guard the answer would always show. */
.rn-card-back[hidden] { display: none; }

/* Dilution simulator — bridging concentration.html (data-dilution). Fixed
   solute, slider adds water: level rises, colour fades, c = n ÷ V falls. */
.dil-wrap {
  display: grid; grid-template-columns: minmax(0, 190px) 1fr; gap: 26px; align-items: center;
  margin: 24px 0; padding: 22px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--paper-2);
}
.dil-stage { display: flex; justify-content: center; }
.dil-stage svg { width: 100%; max-width: 180px; height: auto; }
.dil-liquid { transition: y .28s ease, height .28s ease, fill .28s ease; }
.dil-controls label { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.dil-slider { width: 100%; accent-color: oklch(0.52 0.18 330); }
.dil-readout { font-family: var(--font-mono); font-size: 15px; margin: 16px 0 6px; color: var(--ink); }
.dil-readout strong { font-size: 17px; }
.dil-note { font-size: 13.5px; color: var(--muted); margin: 0 0 16px; }
.dil-word { font-weight: 600; color: var(--ink); }
.dil-meter { position: relative; height: 9px; border-radius: 5px; background: linear-gradient(90deg, oklch(0.93 0.05 330), oklch(0.50 0.18 330)); }
.dil-band-marker { position: absolute; top: -3.5px; left: 100%; width: 4px; height: 16px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); transition: left .28s ease; }
.dil-meter-labels { display: flex; justify-content: space-between; margin-top: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) { .dil-wrap { grid-template-columns: 1fr; gap: 16px; } .dil-stage svg { max-width: 150px; } }
.rn-cards-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rn-cards-controls .rn-drill-next { margin-top: 0; }

/* Electron-config guided sequence (bridging M7) */
.eb-seq-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.eb-seq-chip {
  padding: 6px 14px; border: 1.5px solid var(--hairline); border-radius: 999px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted);
}
.eb-seq-chip.is-current { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.eb-seq-chip.is-done { border-color: oklch(0.50 0.15 155); color: oklch(0.38 0.13 155); }
.eb-seq-chip.is-done::after { content: " ✓"; }
.eb-seq-next { margin-top: 10px; }

/* ============================================================
   A-LEVEL 3.1.2 PORTED WIDGETS
   fb- ionic-formula builder (A-Level port of the GCSE C4 .sf- salt
   builder, fresh namespace) · lm- limiting-reagent simulator (port of
   the GCSE C3 .lr- sim) · .rn-rmt table-method grids (promoted from the
   GCSE per-page copies — those pages still carry their own inline CSS,
   which wins the cascade there; keep the two in step).
============================================================ */
.fb-wrap { margin: 24px 0 28px; padding: 16px 18px; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 4px; }
.fb-title { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); text-align: center; margin: 0 0 4px; }
.fb-intro { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin: 0 auto 16px; max-width: 560px; line-height: 1.45; }
.fb-step { margin-bottom: 14px; }
.fb-step-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 7px; }
.fb-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.fb-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; font-weight: 500; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--hairline); cursor: pointer; background: var(--paper); color: var(--ink-soft); transition: background .15s, border-color .15s, color .15s; }
.fb-btn:hover { background: var(--paper-2); border-color: var(--ink-soft); }
.fb-btn.is-on-pos { background: oklch(0.46 0.10 165); border-color: oklch(0.46 0.10 165); color: var(--paper); }
.fb-btn.is-on-neg { background: oklch(0.44 0.11 265); border-color: oklch(0.44 0.11 265); color: var(--paper); }
.fb-placeholder { font-size: 12.5px; color: var(--muted); font-style: italic; text-align: center; padding: 16px 0 4px; }
.fb-eqbox { background: var(--paper); border: 1.5px solid var(--hairline); border-radius: 4px; padding: 14px 12px 12px; }
.fb-formula { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); text-align: center; margin: 0 0 14px; }
.fb-cols { display: flex; align-items: stretch; justify-content: center; gap: 10px; }
.fb-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 11px 8px; border: 1.5px dashed var(--hairline); border-radius: 4px; background: var(--paper-2); }
.fb-colhead { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fb-ionrow { display: inline-flex; align-items: center; gap: 6px; }
.fb-count { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); min-width: 12px; text-align: right; }
.fb-times { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.fb-ionchip { font-family: var(--font-mono); font-size: 15px; font-weight: 600; padding: 4px 9px; border-radius: 4px; white-space: nowrap; }
.fb-ionchip--pos { background: oklch(0.93 0.05 165); border: 1.5px solid oklch(0.62 0.10 165); color: oklch(0.34 0.10 165); }
.fb-ionchip--neg { background: oklch(0.93 0.05 265); border: 1.5px solid oklch(0.62 0.11 265); color: oklch(0.36 0.12 265); }
.fb-stepper { display: inline-flex; align-items: center; gap: 9px; }
.fb-pm { width: 25px; height: 25px; border-radius: 50%; border: 1.5px solid var(--hairline); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fb-pm:hover { border-color: var(--ink-soft); background: var(--paper-2); }
.fb-pm:disabled { opacity: 0.4; cursor: not-allowed; }
.fb-coltot { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.fb-coltot b { color: var(--ink); font-size: 12.5px; }
.fb-readout { margin-top: 12px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.fb-readout.is-balanced { color: oklch(0.46 0.13 155); font-weight: 600; }
.fb-check { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.fb-ci { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.fb-cbox { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; margin-top: 1px; }
.fb-ci.is-done { color: var(--ink); }
.fb-ci.is-done .fb-cbox { background: oklch(0.52 0.15 155); border-color: oklch(0.52 0.15 155); color: var(--paper); }
.fb-ci .lab { font-weight: 600; }
.fb-ci .det { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; }
.fb-reveal { margin-top: 14px; padding: 13px 15px; border-radius: 4px; border: 1.5px solid oklch(0.60 0.13 155); background: oklch(0.96 0.035 155); }
.fb-reveal-title { font-family: var(--font-body); font-weight: 700; font-size: 15px; margin-bottom: 5px; color: oklch(0.42 0.13 155); }
.fb-reveal-title .fb-final { font-family: var(--font-mono); }
.fb-reveal p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.fb-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; }
.fb-foot { margin-top: 14px; text-align: center; }
.fb-reset { border-style: dashed; }
@media (max-width: 480px) {
  .fb-formula { font-size: 19px; }
  .fb-ionchip { font-size: 13px; }
}

/* lm- limiting-reagent simulator */
.lm-wrap { margin: 18px 0 26px; padding: 20px 16px 16px; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 4px; text-align: center; }
.lm-wrap svg.lm-stage { display: block; width: 100%; max-width: 600px; margin: 0 auto; overflow: visible; }
.lm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 12px auto 2px; max-width: 540px; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.lm-leg-item { display: inline-flex; align-items: center; gap: 7px; }
.lm-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; margin: 15px auto 6px; }
.lm-step { display: inline-flex; align-items: center; gap: 8px; }
.lm-step-label { font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.lm-step-btn { font-family: var(--font-mono); font-size: 17px; line-height: 1; font-weight: 500; width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid var(--hairline); background: var(--paper); color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lm-step-btn:hover:not(:disabled) { background: var(--paper-2); border-color: var(--ink-soft); }
.lm-step-btn:disabled { opacity: 0.35; cursor: default; }
.lm-count { min-width: 1.3em; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--ink); }
.lm-caption { font-size: 13px; color: var(--ink-soft); margin: 10px 0 8px; font-style: italic; min-height: 3.0em; }
.lm-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500; padding: 7px 20px; border-radius: 999px; border: 1.5px solid var(--hairline); cursor: pointer; background: var(--paper); color: var(--ink-soft); }
.lm-btn:hover:not(:disabled) { background: var(--paper-2); border-color: var(--ink-soft); }
.lm-btn:disabled { opacity: 0.5; cursor: default; }
.lm-result { max-width: 520px; margin: 10px auto 2px; padding: 11px 14px 12px; border-radius: 6px; border: 1.5px solid var(--hairline); background: var(--paper); text-align: left; }
.lm-result-title { display: block; font-family: "IBM Plex Sans", sans-serif; font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.lm-result-body { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.lm-result--lim { border-color: oklch(0.55 0.165 30 / 0.55); background: oklch(0.965 0.03 40); }
.lm-result--lim .lm-result-title { color: oklch(0.50 0.17 30); }
.lm-result--bal { border-color: oklch(0.52 0.10 165 / 0.6); background: oklch(0.965 0.03 165); }
.lm-result--bal .lm-result-title { color: oklch(0.42 0.11 165); }
.lm-quotient { display: block; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--hairline); font-size: 12.5px; color: var(--ink-soft); }
.lm-quotient code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); background: none; }

/* rn-rmt table-method grids (worked + one-box-at-a-time live variant) */
.rn-rmt-figure { margin: 16px 0 10px; }
.rn-rmt-figure .rn-rmt-eq { margin: 0; border-radius: 4px 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.rn-rmt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rn-rmt { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0; font-size: 14.5px; min-width: 340px; border: 1px solid var(--hairline); border-top: 0; }
.rn-rmt th, .rn-rmt td { border: 1px solid var(--hairline); padding: 8px 10px; text-align: center; vertical-align: middle; }
.rn-rmt thead th { background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none; line-height: 1.25; }
.rn-rmt thead .rn-rmt-corner { background: var(--ink-soft); }
.rn-rmt-role { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.82 0.02 250); }
.rn-rmt tbody th[scope="row"] { width: 74px; background: var(--paper-3); color: var(--ink); text-align: left; font-family: var(--font-mono); font-weight: 600; font-size: 12.5px; }
.rn-rmt tbody td { position: relative; background: var(--paper); color: var(--ink); font-family: var(--font-mono); }
.rn-rmt-num  { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.rn-rmt-work { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.rn-rmt-step { position: absolute; top: 3px; left: 4px; width: 15px; height: 15px; line-height: 15px; text-align: center; font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--paper); background: var(--muted); border-radius: 50%; }
.rn-rmt td.is-given  { background: oklch(0.96 0.022 200); }
.rn-rmt td.is-given .rn-rmt-work { color: oklch(0.50 0.05 200); }
.rn-rmt td.is-answer { background: oklch(0.95 0.045 30); }
.rn-rmt td.is-answer .rn-rmt-num  { color: var(--accent); }
.rn-rmt td.is-answer .rn-rmt-step { background: var(--accent); }
.rn-rmt-legend { margin: 8px 0 4px; font-weight: 600; color: var(--ink-soft); font-size: 14.5px; }
ol.rn-rmt-steps { margin: 0 0 4px; padding-left: 22px; }
ol.rn-rmt-steps li { margin: 3px 0; line-height: 1.55; }
.rn-rmt--live td { padding: 6px 7px; }
.rn-rmt td.is-answer-live { box-shadow: inset 0 0 0 2px oklch(0.85 0.06 30); }
.rn-rmt-input { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--accent); width: 100%; max-width: 78px; text-align: center; padding: 7px 4px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--paper); }
.rn-rmt-input:disabled { background: var(--paper-3); color: var(--muted); opacity: 0.55; cursor: not-allowed; }
.rn-rmt-input.is-active { border-color: oklch(0.52 0.13 200); box-shadow: 0 0 0 3px oklch(0.52 0.13 200 / 0.18); }
.rn-rmt-input.is-err { border-color: oklch(0.58 0.16 25); background: oklch(0.96 0.035 25); color: oklch(0.38 0.16 25); }
.rn-rmt-input.is-ok  { border-color: oklch(0.50 0.15 155); background: oklch(0.96 0.035 155); color: oklch(0.30 0.12 155); opacity: 1; cursor: default; }
.rn-rmt-unit { margin-left: 4px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
.rn-rmt-prompt { margin: 11px 0 0; min-height: 1.4em; padding: 9px 13px; border-left: 2px solid oklch(0.52 0.13 200); background: var(--paper-2); border-radius: 0 3px 3px 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.rn-rmt-prompt.is-done { border-left-color: oklch(0.50 0.15 155); background: oklch(0.96 0.035 155); color: oklch(0.30 0.12 155); font-weight: 600; }
.rn-rmt-prompt .rn-rmt-err { color: oklch(0.48 0.16 25); font-weight: 600; }
.rn-rmt-reset { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px; padding: 7px 13px; cursor: pointer; }
.rn-rmt-reset:hover { background: var(--paper-2); border-color: var(--ink-soft); }
@media (max-width: 560px) {
  .rn-rmt-scroll { overflow-x: visible; }
  .rn-rmt { min-width: 0; font-size: 12.5px; }
  .rn-rmt th, .rn-rmt td { padding: 6px 4px; }
  .rn-rmt thead th { font-size: 11.5px; }
  .rn-rmt-role { font-size: 8px; }
  .rn-rmt tbody th[scope="row"] { width: 50px; font-size: 10.5px; padding: 6px 3px; }
  .rn-rmt-num { font-size: 12.5px; }
  .rn-rmt-work { font-size: 9px; white-space: normal; }
  .rn-rmt-step { width: 13px; height: 13px; line-height: 13px; font-size: 8px; top: 2px; left: 2px; }
  .rn-rmt--live td { padding: 5px 3px; }
  .rn-rmt-input { font-size: 12.5px; max-width: 100%; padding: 6px 2px; }
  .rn-rmt-unit { font-size: 10px; margin-left: 2px; }
}

/* ============================================================
   COMMON-IONS REFERENCE CARD (.ion-*)
   Three-box ion-charges grid: metals / non-metals / molecular-
   or-polyatomic ions (emphasised memorise box), with a variable-
   metals sub-box. Used on GCSE C2 Part 2 (#ionic-formulae) and
   A-Level amount-of-substance (#formulae-first).
   ============================================================ */
.ion-charges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 22px;
}
@media (max-width: 720px) { .ion-charges { grid-template-columns: 1fr; } }

.ion-col {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 15px 16px 17px;
}
.ion-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 8px;
  margin-bottom: 11px;
  border-bottom: 1px solid var(--hairline);
}
.ion-rule {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 13px;
}
.ion-rule strong { color: var(--ink); font-weight: 600; }

.ion-group { margin-bottom: 9px; }
.ion-group:last-child { margin-bottom: 0; }
.ion-group-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.ion-f {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.ion-sep { color: oklch(0.72 0.01 250); margin: 0 3px; }

/* Variable/transition-metals sub-box — charge comes from the Roman numeral */
.ion-tmetals {
  margin-top: 13px;
  padding: 10px 12px 11px;
  background: var(--paper);
  border: 1.5px solid oklch(0.72 0.015 250);
  border-radius: 5px;
}
.ion-tmetals-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.ion-tmetals-note {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.ion-tmetals-note strong { color: var(--ink); font-weight: 600; }
.ion-tmetals-row {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.ion-tmetals-row:last-child { margin-bottom: 0; }
.ion-tmetals-row .ion-f { font-size: 14px; }

/* Molecular/polyatomic ions — the box to MEMORISE (emphasised) */
.ion-col-memorise {
  border: 2px solid oklch(0.74 0.11 80);
  background: oklch(0.965 0.035 88);
  box-shadow: 0 0 0 4px oklch(0.74 0.11 80 / 0.12);
}
.ion-col-memorise .ion-col-head {
  color: oklch(0.43 0.10 62);
  border-bottom-color: oklch(0.82 0.07 82);
}
.ion-memorise-flag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: oklch(0.40 0.12 52);
  background: oklch(0.91 0.075 86);
  border: 1px solid oklch(0.76 0.10 76);
  border-radius: 999px;
  padding: 2px 8px;
}
.ion-mol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.ion-mol-name {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: oklch(0.45 0.08 62);
  margin-bottom: 1px;
}
.ion-mol-grid .ion-f { color: oklch(0.30 0.04 60); }

/* ============================================================
   PERIODIC-TABLE COLLAPSIBLE (.rn-pt-*)
   <details> wrapper with a zoomable periodic-table figure.
   Used on GCSE C2 Parts 1 & 2. (Hoisted from inline copies —
   the split had left Part 2 without these rules.)
   ============================================================ */
.rn-pt-details { margin: 16px 0 24px; }
.rn-pt-details > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  list-style: none;
  user-select: none;
}
.rn-pt-details > summary::-webkit-details-marker { display: none; }
.rn-pt-details > summary:hover { background: var(--paper); }
.rn-pt-details[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; }
.rn-pt-details > summary::after { content: '\25B6'; margin-left: auto; font-size: 9px; transition: transform .15s; }
.rn-pt-details[open] > summary::after { transform: rotate(90deg); }
.rn-pt-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); font-family: var(--font-body); }
.rn-pt-fig {
  border: 1px solid var(--hairline);
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 12px 12px 4px;
}
.rn-pt-fig img { display: block; width: 100%; }

/* ============================================================
   CLASSIFY TASKS (.rn-classify-*, .rn-el-btn pill buttons)
   Click-to-classify cards inside .rn-practice (metal/non-metal,
   bond type, element/compound/mixture …). Used on GCSE C1 Part 1
   and C2 Parts 1 & 2. Page-specific: .rn-classify-task padding
   stays inline per page.
   ============================================================ */
.rn-classify-card {
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--paper);
}
.rn-classify-header { margin-bottom: 10px; line-height: 1.4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rn-classify-formula { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.rn-classify-cname { font-size: 13px; color: var(--ink-soft); }
.rn-classify-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.rn-classify-el { min-width: 110px; font-size: 14px; line-height: 1.3; }
.rn-classify-elname { color: var(--ink-soft); font-size: 12px; display: block; }
.rn-classify-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.rn-classify-feedback {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.rn-classify-feedback.fc-ok  { color: oklch(0.38 0.13 155); }
.rn-classify-feedback.fc-err { color: oklch(0.45 0.15 25); }
.rn-classify-explanation {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  color: var(--ink-soft);
}
.rn-classify-explanation.fc-ok  { background: oklch(0.95 0.04 155); color: oklch(0.30 0.12 155); border-color: oklch(0.50 0.15 155); }
.rn-classify-explanation.fc-err { background: oklch(0.96 0.04 25);  color: oklch(0.35 0.15 25);  border-color: oklch(0.55 0.15 25); }
.rn-el-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline);
  cursor: pointer;
  background: var(--paper);
  color: var(--ink-soft);
  transition: background .12s, border-color .12s;
}
.rn-el-btn:hover:not(:disabled) { background: var(--paper-2); border-color: var(--ink-soft); }
.rn-el-btn:disabled { cursor: default; }
.rn-el-btn:focus-visible { outline: 2px solid oklch(0.52 0.13 200); outline-offset: 2px; }
.rn-el-btn.b-ok  { background: oklch(0.95 0.04 155); border-color: oklch(0.50 0.15 155); color: oklch(0.30 0.12 155); }
.rn-el-btn.b-err { background: oklch(0.96 0.04 25);  border-color: oklch(0.55 0.15 25);  color: oklch(0.35 0.15 25); }
.rn-el-btn.b-dim { opacity: 0.35; }
.rn-bond-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ============================================================
   HALF-EQUATION BUILDER (.he-*)
   Shared by the C4 Part 1 displacement builder and the C4 Part 4
   molten-electrolysis builder (its markup reuses these classes).
   Hoisted from Part 1's inline copy — the split had left Part 4
   without these rules.
   ============================================================ */
.he-wrap { margin: 24px 0 28px; padding: 16px 18px; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 4px; }
.he-title { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); text-align: center; margin: 0 0 4px; }
.he-intro { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin: 0 auto 16px; max-width: 560px; line-height: 1.45; }
.he-step { margin-bottom: 14px; }
.he-step-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 7px; }
.he-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.he-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; font-weight: 500; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--hairline); cursor: pointer; background: var(--paper); color: var(--ink-soft); transition: background .15s, border-color .15s, color .15s; }
.he-btn:hover { background: var(--paper-2); border-color: var(--ink-soft); }
.he-btn.is-active { background: oklch(0.46 0.10 200); border-color: oklch(0.46 0.10 200); color: var(--paper); }
.he-rxn { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--paper); border-left: 3px solid oklch(0.46 0.10 200); padding: 8px 12px; border-radius: 0 3px 3px 0; margin: 8px 0 0; }
.he-hint { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.45; }
.he-placeholder { font-size: 12.5px; color: var(--muted); font-style: italic; text-align: center; padding: 16px 0 4px; }
.he-eqbox { background: var(--paper); border: 1.5px solid var(--hairline); border-radius: 4px; padding: 14px 12px 12px; }
.he-eq { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }
.he-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.he-zone { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; padding: 7px; border: 1.5px dashed var(--hairline); border-radius: 4px; background: var(--paper-2); }
.he-zone.is-empty::before { content: "empty"; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.he-plus { color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.he-arrow { align-self: center; font-size: 19px; color: var(--ink-soft); flex: 0 0 auto; padding-top: 12px; }
.he-chip { font-family: var(--font-mono); font-size: 14px; font-weight: 600; padding: 5px 9px; border-radius: 4px; white-space: nowrap; }
.he-chip--atom { background: oklch(0.93 0.03 250); border: 1.5px solid oklch(0.70 0.07 250); color: oklch(0.28 0.07 250); }
.he-chip--ion { background: oklch(0.93 0.05 320); border: 1.5px solid oklch(0.66 0.11 320); color: oklch(0.32 0.12 320); }
.he-chip--e { background: oklch(0.95 0.04 95); border: 1.5px solid oklch(0.72 0.11 95); color: oklch(0.40 0.10 95); }
.he-charge { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.he-charge b { color: var(--ink); font-size: 12.5px; }
.he-ctrl { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.he-ctrl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.he-ctrl-name { font-family: var(--font-mono); font-size: 12px; color: var(--ink); flex: 0 0 auto; min-width: 134px; }
.he-seg { display: inline-flex; border: 1.5px solid var(--hairline); border-radius: 999px; overflow: hidden; }
.he-seg button { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 5px 13px; border: none; background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s; }
.he-seg button + button { border-left: 1.5px solid var(--hairline); }
.he-seg button.is-on { background: oklch(0.46 0.10 200); color: var(--paper); }
.he-estep { display: inline-flex; align-items: center; gap: 16px; }
.he-estep .grp { display: inline-flex; align-items: center; gap: 7px; }
.he-estep .grp > span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.he-pm { width: 25px; height: 25px; border-radius: 50%; border: 1.5px solid var(--hairline); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.he-pm:hover { border-color: var(--ink-soft); background: var(--paper-2); }
.he-count { font-family: var(--font-mono); font-size: 13px; min-width: 14px; text-align: center; color: var(--ink); }
.he-check { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.he-ci { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.he-cbox { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--hairline); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; margin-top: 1px; }
.he-ci.is-done { color: var(--ink); }
.he-ci.is-done .he-cbox { background: oklch(0.52 0.15 155); border-color: oklch(0.52 0.15 155); color: var(--paper); }
.he-ci .lab { font-weight: 600; }
.he-ci .det { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; }
.he-reveal { margin-top: 14px; padding: 13px 15px; border-radius: 4px; border: 1.5px solid; }
/* correct answers (oxidation or reduction) → green; not-yet-right → amber */
.he-reveal--ox { background: oklch(0.96 0.03 155); border-color: oklch(0.64 0.12 155); }
.he-reveal--red { background: oklch(0.96 0.03 155); border-color: oklch(0.64 0.12 155); }
.he-reveal--nudge { background: oklch(0.96 0.03 85); border-color: oklch(0.74 0.10 85); }
.he-reveal-title { font-family: var(--font-body); font-weight: 700; font-size: 15px; margin-bottom: 5px; }
.he-reveal--ox .he-reveal-title { color: oklch(0.45 0.14 155); }
.he-reveal--red .he-reveal-title { color: oklch(0.45 0.14 155); }
.he-reveal--nudge .he-reveal-title { color: oklch(0.50 0.11 80); }
.he-reveal p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.he-final-eq { font-family: var(--font-mono); font-size: 14px; color: var(--ink) !important; margin-top: 8px !important; font-weight: 600; }
.he-foot { margin-top: 14px; text-align: center; }
.he-reset { border-style: dashed; }
@media (max-width: 480px) {
  .he-ctrl-name { min-width: 0; width: 100%; }
  .he-chip { font-size: 13px; }
  .he-estep { gap: 12px; }
}

/* Back-titration stage stepper (figure[data-bt], A-Level amount-of-substance).
   JS fades the inactive g[data-bt-stage] groups; buttons reuse .rn-cap-btn. */
[data-bt] [data-bt-stage] { transition: opacity 0.2s ease; }
[data-bt] .rn-bt-controls, [data-gs] .rn-gs-controls, [data-lp] .rn-lp-controls { justify-content: center; margin-top: 12px; }
.rn-bt-caption, .rn-lp-caption { text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 10px auto 0; max-width: 560px; }
/* Lone-pair squeeze (figure[data-lp], A-Level bonding) — stage fade; the
   centre-stage clone + tweened arc/number are built by site.js. */
[data-lp] [data-lp-mol], [data-lp] [data-lp-labels] { transition: opacity 0.25s ease; }

/* Metallic bonding Na/Mg toggle (figure[data-mb], A-Level bonding). The toggle is
   hidden until site.js reveals it; the ions and electrons are persistent elements so
   changing r / opacity animates the switch between the two metals. */
.mb-toggle { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 0 0 12px; }
.mb-toggle-lead { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.mb-ion { transition: r 0.4s ease; }
.mb-e { transition: opacity 0.35s ease; }
.mb-e-extra { transition: opacity 0.35s ease; }

/* Polar-or-not predict-then-reveal (figure[data-dp], A-Level bonding). The six
   molecule skeletons stay put; site.js spotlights one, hides the rest and each
   molecule's [data-dp-reveal] arrows/badge until the student commits. */
[data-dp] [data-dp-mol], [data-dp] [data-dp-reveal] { transition: opacity 0.25s ease; }
[data-dp] .rn-dp-controls { justify-content: center; margin-top: 6px; }
[data-vw] .rn-vw-controls { justify-content: center; margin-top: 12px; }
.rn-vw-caption { text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-soft); margin: 10px auto 0; max-width: 560px; min-height: 1.5em; }

/* Hydride bp predict-then-reveal (figure[data-bp], A-Level bonding). Trend
   lines stay put; site.js hides each [data-bp-anom] period-2 hydride until the
   student picks a band. The rise is an SVG-attribute tween (rAF) in site.js. */
[data-bp] [data-bp-series], [data-bp] [data-bp-anom] { transition: opacity 0.25s ease; }
[data-bp] .rn-bp-groups, [data-bp] .rn-bp-bands { justify-content: center; margin-top: 10px; }
[data-bp] .rn-bp-bands { margin-top: 8px; }
/* [hidden] must beat .rn-cap-controls' display:flex on the band row */
[data-bp] .rn-bp-bands[hidden] { display: none; }

/* Shape deducer drill (figure-less [data-sd], A-Level bonding). Step panels
   are plain blocks so [hidden] gates them; grids reuse .rn-cap-btn options. */
.sd-species { font-size: 15px; color: var(--ink); margin: 0 0 14px; }
.sd-step { padding: 12px 0; border-top: 1px dashed var(--hairline); }
.sd-step:first-child { border-top: 0; }
.sd-q { font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0 0 10px; }
.sd-hint { color: var(--muted); font-weight: 400; }
.sd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sd-lab { font-size: 13px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.sd-in { width: 76px; font-family: var(--font-mono); font-size: 15px; padding: 9px 10px; border: 1.5px solid var(--hairline); border-radius: 6px; background: var(--paper); color: var(--ink); min-height: 40px; }
.sd-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.sd-in.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.97 0.03 150); }
.sd-in.is-err { border-color: var(--accent); background: oklch(0.97 0.03 30); }
.sd-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sd-opt { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13px; }
.sd-opt.is-on { border-color: oklch(0.55 0.11 150); color: oklch(0.34 0.09 150); background: oklch(0.95 0.045 150); }
.sd-opt:disabled { cursor: default; opacity: 0.55; }
.sd-opt.is-on:disabled, .sd-opt.rn-dp-wrong:disabled { opacity: 1; }
.sd-fb { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 10px 0 0; min-height: 1em; }
.sd-done { margin-top: 16px; }
.sd-done .sd-model { margin: 0; }

/* Capstone name-the-attraction (figure-less [data-bs], A-Level bonding).
   Two phases: classify into 4 bins, then build the explanation from tiles. */
.bs-q { font-size: 15px; line-height: 1.5; color: var(--ink); margin: 4px 0 12px; }
.bs-chip { font-size: 1.05em; }
.bs-bins { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-bin { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13.5px; }
.bs-bin.is-on { border-color: oklch(0.55 0.11 150); color: oklch(0.34 0.09 150); background: oklch(0.95 0.045 150); }
.bs-build-lead { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.bs-answer { list-style: none; counter-reset: bs; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bs-answer li { counter-increment: bs; position: relative; padding: 9px 12px 9px 34px; background: oklch(0.95 0.045 150); border: 1px solid oklch(0.72 0.09 150); border-radius: 6px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.bs-answer li::before { content: counter(bs); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: oklch(0.4 0.09 150); }
.bs-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-opts { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bs-opt { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13.5px; text-align: left; max-width: 100%; white-space: normal; line-height: 1.35; padding: 10px 13px; }
.bs-opt.is-on { border-color: oklch(0.55 0.11 150); color: oklch(0.34 0.09 150); background: oklch(0.95 0.045 150); }
.bs-tile { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13px; text-align: left; max-width: 100%; white-space: normal; line-height: 1.35; padding: 10px 13px; }
.bs-tile.is-placed { display: none; }
.bs-tile.bs-nudge { border-color: var(--accent); }
.bs-fb { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; min-height: 1em; }

/* Strongest-force quick-fire (figure-less [data-fi], A-Level bonding). */
.fi-species { font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0 0 14px; }
.fi-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fi-opt { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13.5px; }
.fi-opt.is-on { border-color: oklch(0.55 0.11 150); color: oklch(0.34 0.09 150); background: oklch(0.95 0.045 150); }
.fi-opt.is-on:disabled, .fi-opt.rn-dp-wrong:disabled { opacity: 1; }
.fi-fb { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; min-height: 1.4em; }
.rn-bp-verdict { min-height: 1.5em; }
@media (prefers-reduced-motion: reduce) {
  [data-bp] [data-bp-series], [data-bp] [data-bp-anom] { transition: none; }
}
.rn-dp-prompt { text-align: center; font-size: 15px; color: var(--ink); margin: 12px auto 0; }
.rn-dp-prompt sub { font-size: 0.75em; }
.rn-cap-btn.rn-dp-wrong { border-color: var(--accent); color: var(--accent); background: oklch(0.95 0.05 30); }

@media (prefers-reduced-motion: reduce) {
  [data-bt] [data-bt-stage] { transition: none; }
  [data-lp] [data-lp-mol], [data-lp] [data-lp-labels] { transition: none; }
  [data-dp] [data-dp-mol], [data-dp] [data-dp-reveal] { transition: none; }
}

/* ============================================================
   A-Level ENERGETICS widgets (energetics.html) — driven by site.js:
   cal- run-the-calorimeter [data-cal], cc- cooling-curve drag [data-cc],
   hs- Hess route builder [data-hs], me- bond-enthalpy stepper [data-me],
   ec- capstone route runner [data-ec]. Mounts ship [hidden] in the page;
   each IIFE flips hidden off, so no-JS keeps the static figures and
   worked examples as the complete fallback.
   ============================================================ */
/* cal- run the calorimeter */
.cal-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cal-rx, .hs-tile, .ec-tile, .ec-m, .ec-dir { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13px; }
.cal-desc { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 12px; min-height: 1.4em; }
.cal-stage { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cal-svg { display: block; flex: 1 1 220px; max-width: 300px; height: auto; }
.cal-lines { flex: 1 1 250px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.cal-lines p { margin: 0; padding: 6px 9px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px; }
.cal-lines p.cal-final--exo { border-color: oklch(0.55 0.11 150); background: oklch(0.96 0.045 150); }
.cal-lines p.cal-final--endo { border-color: var(--accent); background: oklch(0.97 0.03 30); }
/* cc- cooling-curve extrapolation (controls live inside the F5 figure) */
.cc-controls { margin: 4px 0 8px; }
.cc-controls[hidden] { display: none; }
.cc-controls .rn-cap-controls { margin-top: 0; justify-content: center; }
.cc-controls .rn-cap-msg { text-align: center; margin-top: 8px; }
.cc-hit { touch-action: none; }
/* hs- Hess route builder + ec- capstone (rt-style tiles) */
.hs-q, .ec-q, .me-q, .gq-q { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0 0 6px; }
.hs-data, .ec-data, .me-data, .gq-data { font-size: 13px; font-family: var(--font-mono); color: var(--ink-soft); margin: 0 0 12px; }
.hs-planlead, .ec-plead { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 8px; }
.hs-bank, .ec-bank, .ec-methods, .ec-dirs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hs-tile[disabled], .ec-tile[disabled] { opacity: 0.38; }
.hs-tile sub, .hs-tile sup, .ec-tile sub, .ec-tile sup { font-size: 0.72em; line-height: 0; position: relative; vertical-align: baseline; }
.hs-tile sub, .ec-tile sub { bottom: -0.22em; }
.hs-tile sup, .ec-tile sup { top: -0.45em; }
.hs-route, .ec-route { margin-bottom: 12px; }
.hs-route .rn-cap-chip, .ec-route .rn-cap-chip { cursor: pointer; }
.hs-route-num, .ec-route-num { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-right: 6px; }
.hs-run, .ec-run { margin: 0 0 4px; }
.hs-run[hidden], .ec-run[hidden] { display: none; }
.hs-anslab, .ec-anslab { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.hs-working { font-family: var(--font-mono); font-size: 12.5px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 4px; padding: 10px 12px; margin-top: 12px; }
.hs-working[hidden] { display: none; }
.hs-working p { margin: 0 0 4px; }
.ec-methods .rn-cap-btn.is-ok, .ec-dirs .rn-cap-btn.is-ok { border-color: oklch(0.55 0.11 150); color: oklch(0.34 0.09 150); background: oklch(0.95 0.045 150); }
.ec-methods .rn-cap-btn.is-err, .ec-dirs .rn-cap-btn.is-err { border-color: var(--accent); color: var(--accent); background: oklch(0.95 0.05 30); }
.ec-m.is-ok:disabled, .ec-m.is-err:disabled, .ec-dir.is-ok:disabled, .ec-dir.is-err:disabled { opacity: 1; }
.ec-phase[hidden] { display: none; }
.ec-why { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--hairline); border-left: 3px solid oklch(0.55 0.11 150); background: var(--paper); }
.ec-why[hidden] { display: none; }
/* me- bond-enthalpy stepper */
.me-steps, .gq-steps { margin: 0 0 10px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.me-step, .gq-step { border-left: 3px solid var(--hairline); padding-left: 12px; }
.me-step[hidden], .gq-step[hidden] { display: none; }
.me-step.is-done, .gq-step.is-done { border-left-color: oklch(0.55 0.11 150); }
.me-step-lab, .gq-step-lab { margin: 0 0 6px; font-size: 13.5px; color: var(--ink); }
.me-row, .gq-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.me-eq, .gq-eq { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }
.me-counts { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.me-count { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); }
.me-cin { font-family: var(--font-mono); font-size: 14px; padding: 6px 4px; width: 46px; text-align: center; border: 1.5px solid var(--hairline); border-radius: 4px; background: var(--paper); color: var(--ink); }
.me-hint, .gq-hint { font-size: 12px; color: oklch(0.5 0.12 25); min-height: 1em; margin: 6px 0 0; }
.me-hint.is-ok, .gq-hint.is-ok { color: oklch(0.4 0.09 150); }
.me-hint:empty, .gq-hint:empty { display: none; }
.me-done, .gq-done { font-size: 13.5px; line-height: 1.55; padding: 10px 12px; border: 1.5px solid oklch(0.55 0.11 150); background: oklch(0.96 0.045 150); border-radius: 4px; }
.me-done[hidden], .gq-done[hidden] { display: none; }
.me-red { color: oklch(0.52 0.165 30); font-weight: 600; }
.me-grn { color: oklch(0.45 0.11 150); font-weight: 600; }

/* ============================================================
   Grade-boundary calculator + reference tables
   Page: insights/chemistry-grade-boundaries.html
   The interactive calculator is built by initGradeCalc() in site.js
   (progressive enhancement); the static .gb-tables stay visible as the
   no-JS fallback and on-page reference. All styling here uses the shared
   site tokens so the widget matches the article around it.
   ============================================================ */

/* --- Calculator card ------------------------------------------------------ */
.gb-calc {
  margin: 40px 0;
  padding: clamp(22px, 4vw, 34px);
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.gb-calc > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 6px;
}
.gb-calc-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 4px;
}

.gb-calc-ui { display: grid; gap: 20px; margin-top: 20px; }
.gb-field { display: grid; gap: 9px; }
.gb-field[hidden] { display: none; }
.gb-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Choice pills (level, board) ------------------------------------------ */
.gb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.gb-pill {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.gb-pill:hover { border-color: var(--ink); }
.gb-pill[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  color: var(--ink);
  font-weight: 600;
}
.gb-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Selects (tier, year) ------------------------------------------------- */
.gb-select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  border-radius: 6px;
  padding: 10px 12px;
  max-width: 240px;
  cursor: pointer;
}
.gb-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* --- Raw-mark inputs, one per paper --------------------------------------- */
.gb-hint { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 4px; }
.gb-papers-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.gb-paper { display: grid; gap: 6px; }
.gb-paper-label { display: flex; flex-direction: column; gap: 1px; }
.gb-paper-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.gb-paper-max {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.gb-input {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--hairline);
  border-radius: 6px;
  padding: 9px 11px;
  width: 100%;
}
.gb-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.gb-go { align-self: start; }

/* --- Result --------------------------------------------------------------- */
.gb-result:empty { display: none; }
.gb-result {
  margin-top: 22px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.gb-result-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.gb-result-grade {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
  color: var(--ink);
}
.gb-result-score {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.gb-result-dist { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin: 10px 0 0; }
.gb-result-msg { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* --- Boundary scale (0 .. total, tick + label per grade, marker at score) - */
.gb-scale { margin: 4px 0 2px; }
.gb-scale-track {
  position: relative;
  height: 6px;
  background: var(--paper-3);
  border-radius: 999px;
  margin: 46px 0 34px;
}
.gb-tick {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gb-tick-line { width: 2px; height: 9px; background: var(--hairline); }
.gb-tick-label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.gb-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gb-marker-line { width: 3px; height: 22px; background: var(--accent); border-radius: 2px; }
.gb-marker-val {
  position: absolute;
  bottom: calc(50% + 15px);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--paper);
  background: var(--accent);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.gb-scale-ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* --- Notes + tuition offer ------------------------------------------------ */
.gb-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--hairline);
}
.gb-note-approx { border-left-color: var(--accent-soft); }
.gb-offer {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.gb-offer-text { font-size: 15.5px; line-height: 1.55; color: var(--ink); margin: 0; flex: 1 1 240px; }
.gb-offer-btn { flex: 0 0 auto; }

/* --- Reference tables, as collapsible disclosures -------------------------
   Each qualification's table is tucked behind a clickable heading bar (native
   <details>, same idea as the collapsible exam sections in the revision
   notes). <details> needs no JavaScript, so the tables stay fully reachable
   with JS off too — the calculator's static fallback is intact. */
.gb-tables { margin: 8px 0; }
.gb-tables > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 46px 0 6px;
}
.gb-tables-intro { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; }

.gb-details {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  margin: 0 0 10px;
  background: var(--paper);
  overflow: hidden;
}
.gb-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .15s;
}
.gb-summary::-webkit-details-marker { display: none; }   /* hide Safari's default triangle */
.gb-summary::marker { content: ""; }
.gb-summary:hover { background: var(--paper-2); }
.gb-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gb-summary-title {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.gb-summary::after {
  content: "Show ↓";
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.gb-details[open] .gb-summary::after { content: "Hide ↑"; }
.gb-details[open] .gb-summary { border-bottom: 1px solid var(--hairline); background: var(--paper-2); }
.gb-details-body { padding: 18px 20px 8px; }
.gb-details-body > p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; }
.gb-details-body > p:first-child { margin-top: 0; }
.gb-details-body small { font-size: 12.5px; color: var(--muted); }
.gb-details-body table { font-variant-numeric: tabular-nums; margin-bottom: 6px; }

@media (max-width: 600px) {
  /* Wide 8-column tables would overflow the article column on a phone; let
     each scroll horizontally instead of forcing the whole page to. */
  .gb-details-body table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============================================================
   A-Level kinetics — figure trio grid + widget chrome
   (cs- collision sandbox, tan- draw-the-tangent, bz- M–B explorer,
    mk- mark-scheme tiles, cf- collision frequency, lev- capstone)
   ============================================================ */
.rn-figtrio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; }
.rn-figtrio svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .rn-figtrio { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }
}
.rn-cap-svg { display: block; width: 100%; height: auto; margin: 0 0 8px; }
.rn-cap-range-lab { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); }
.rn-cap-range { width: 168px; accent-color: var(--accent); min-height: 38px; }
.tan-ui { margin: 12px 0 4px; }
.tan-units-lab { font-size: 13px; color: var(--ink-soft); font-style: italic; }
.tan-h { cursor: grab; touch-action: none; }
.tan-h:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mk-q, .lev-q { font-size: 14.5px; margin: 0 0 4px; }
.lev-q { min-height: 2.8em; }
.mk-pool, .lev-crow { display: grid; gap: 8px; margin: 10px 0 2px; }
.mk-tile { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45; text-align: left; padding: 10px 14px; border-radius: 8px; border: 1.5px solid var(--hairline); background: var(--paper); color: var(--ink); cursor: pointer; }
.mk-tile:hover { border-color: var(--ink-soft); }
.mk-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mk-tile[aria-pressed="true"] { border-color: var(--ink-soft); background: oklch(0.945 0.012 250); }
.mk-tile.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); color: oklch(0.32 0.08 150); }
.mk-tile.is-err { border-color: var(--accent); background: oklch(0.95 0.05 30); color: var(--accent); }
.mk-tile:disabled { cursor: default; }
.mk-answer { font-size: 14px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px; padding: 12px 14px; margin: 0; }
.lev-step { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.rn-cap-controls[hidden] { display: none; }

/* ============================================================
   AS/A2 gateway + rail — mixed pages (AS content, then an
   A-level-only block). First used on chemical-equilibria (Kp).
   ============================================================ */
.rn-a2-gateway { margin: 44px 0 30px; padding: 18px 22px; border-block: 2px solid oklch(0.78 0.07 165); background: oklch(0.972 0.018 165); border-radius: 10px; }
.rn-a2-gateway-badge { display: inline-flex; align-items: center; gap: 8px; font: 700 0.78rem/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: oklch(0.40 0.08 165); }
.rn-a2-gateway p { margin: 0.55em 0 0; }
.rn-a2 { border-left: 4px solid oklch(0.82 0.06 165); padding-left: 22px; margin-top: 8px; }
@media (max-width: 600px) { .rn-a2 { padding-left: 14px; } }

/* ============================================================
   Chemical equilibria widgets (lc- Le Chatelier sandbox,
   kb- Kc builder, pc- position-vs-constant; kp- Kp stepper
   reuses the shared .me-* stepper chrome). Steppers, tiles,
   inputs and buttons all reuse the generic .rn-cap-*/.mk-tile/
   .me-* classes above — only the genuinely new pieces are here.
   ============================================================ */
/* W1 — the tipping balance. The beam <g> rotates about the pivot
   (viewBox point 200,150); reduced motion snaps instead of tweening. */
.lc-eq { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }
.lc-eq strong { color: var(--ink); }
.lc-beam { transform-box: view-box; transform-origin: 200px 150px; transition: transform 0.55s cubic-bezier(0.34, 1.12, 0.5, 1); }
@media (prefers-reduced-motion: reduce) { .lc-beam { transition: none; } }
.lc-read { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 12px; }
.lc-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--hairline); color: var(--ink-soft); background: var(--paper); }
.lc-chip b { color: var(--ink); font-weight: 600; }
.lc-chip.is-changed { border-color: oklch(0.62 0.15 30); background: oklch(0.96 0.04 30); color: var(--accent); }
.lc-chip.is-changed b { color: var(--accent); }

/* W2 — Kc builder: assign each species to the numerator or
   denominator, then read the assembled fraction back. */
.kb-rows { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.kb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kb-row-sp { font-family: var(--font-mono); font-size: 14px; color: var(--ink); min-width: 74px; }
.kb-sides { display: inline-flex; gap: 6px; }
.kb-side.is-on { border-color: var(--ink-soft); background: oklch(0.945 0.012 250); color: var(--ink); }
.kb-sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 8px; }
.kb-frac { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 16px; color: var(--ink); padding: 10px 16px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--paper); margin: 8px 0; }
.kb-fbox { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.kb-bar { align-self: stretch; border-top: 1.6px solid var(--ink); min-width: 96px; }
.kb-part { padding: 2px 8px; min-height: 1.3em; text-align: center; }
.kb-empty { color: var(--muted); font-size: 12px; }
.kb-vlab, .kb-lhs { font-family: var(--font-mono); }

/* W-CAP — two-decision grid (effect on position, effect on K). */
.pc-decisions { display: grid; gap: 14px; margin: 12px 0 2px; }
@media (min-width: 560px) { .pc-decisions { grid-template-columns: 1fr 1fr; } }
.pc-dec-lab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.pc-opts { display: grid; gap: 8px; }
.pc-intro { font-size: 13px; color: var(--ink-soft); margin: 0 0 10px; }
.pc-q, .lc-q, .kb-q { font-size: 15px; line-height: 1.5; color: var(--ink); font-weight: 500; margin: 4px 0 8px; }
.pc-opt.mk-tile[aria-pressed="true"] { border-color: oklch(0.5 0.14 255); background: oklch(0.95 0.03 255); }
/* W1 lever buttons: a toggled lever gets the accent-on state (reused .is-on) */
.lc-levers { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.lc-svg { max-width: 360px; margin: 6px auto 2px; }

/* ============================================================
   Inorganic A-level widgets (periodicity: bl block finder,
   ar radius explorer, ie/mp Period-3 explorers, tq trend quiz;
   reused by group 2 / group 7). Chrome reuses .rn-cap-*/.mk-tile.
   ============================================================ */
.bl-q, .tq-q, .ar-q, .p3-q { font-size: 15px; line-height: 1.5; color: var(--ink); font-weight: 500; margin: 4px 0 10px; }
.bl-opts, .tq-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 2px; }
.tq-reasons { display: grid; gap: 8px; margin: 4px 0 2px; }
.bl-q .rn-chem, .p3-q .rn-chem { font-weight: 600; }
/* Period-3 element chooser: a row of small square element buttons. */
.p3-els { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.p3-els[hidden] { display: none; }
.p3-el { font-family: var(--font-mono); font-size: 13px; min-width: 40px; min-height: 40px; padding: 4px 6px; border-radius: 8px; border: 1.5px solid var(--hairline); background: var(--paper); color: var(--ink); cursor: pointer; text-align: center; }
.p3-el:hover { border-color: var(--ink-soft); }
.p3-el:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.p3-el.is-on { border-color: var(--accent); background: oklch(0.96 0.03 30); color: var(--accent); font-weight: 600; }
/* readout panel for the explorers */
.p3-read { border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--paper); padding: 12px 14px; margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.p3-read[hidden] { display: none; }
.p3-read .p3-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--muted); display: block; margin-bottom: 4px; }
.p3-read strong { color: var(--ink); }
/* W2 radius explorer: the atom circle scales smoothly (reduced motion snaps). */
.ar-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 4px auto 6px; }
.ar-atom { transition: r 0.4s cubic-bezier(0.34, 1.05, 0.5, 1); }
@media (prefers-reduced-motion: reduce) { .ar-atom { transition: none; } }
.ar-read { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-top: 6px; }
.ar-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--hairline); color: var(--ink-soft); background: var(--paper); }
.ar-chip b { color: var(--ink); font-weight: 600; }
/* A small mono lead line inside a figure (e.g. the reaction a multi-panel
   figure is drawn for), above the drawing. */
.rn-fig-lead { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); text-align: center; margin: 0 auto 8px; max-width: 60ch; }
.rn-fig-lead strong { color: var(--ink); }
/* Group 7: result-colour swatch in the displacement-lab readout. */
.ox-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; border: 1px solid oklch(0.7 0.02 250); }
/* W3 group-2 solubility bar (fills the opposite way for hydroxides vs sulfates). */
.sol-bar-wrap { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.sol-track { flex: 1; max-width: 340px; height: 22px; background: var(--paper); border: 1.5px solid var(--hairline); border-radius: 6px; overflow: hidden; }
.sol-bar { height: 100%; width: 8%; background: oklch(0.6 0.12 255); transition: width 0.4s cubic-bezier(0.34, 1.05, 0.5, 1), background-color 0.3s; }
@media (prefers-reduced-motion: reduce) { .sol-bar { transition: none; } }
.sol-bar-lab { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink); min-width: 92px; }

/* ============================================================
   Redox A-level widgets (3.1.7): os oxidation-state checker,
   hb half-equation builder, cb combine, oa analyser.
   Chrome reuses .rn-cap-* / .mk-tile / .pc-*.
   ============================================================ */
.os-bank, .os-opts, .hb-bank { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.os-opts { margin-top: 8px; }
.os-opts .mk-tile { font-family: var(--font-mono); min-width: 46px; text-align: center; }
.os-q, .hb-task { font-size: 15px; line-height: 1.5; color: var(--ink); font-weight: 500; margin: 12px 0 4px; }
.os-q .rn-chem, .hb-eq .rn-chem { font-weight: 600; }
.os-work { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--hairline); border-left: 3px solid oklch(0.46 0.14 255); border-radius: 0 4px 4px 0; padding: 10px 13px; margin-top: 12px; line-height: 1.75; }
.os-work:empty { display: none; }
.os-work b { color: var(--ink); }

/* live equation display (hb builder) */
.hb-eq { font-family: var(--font-mono); font-size: 15px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; padding: 12px 14px; margin: 10px 0 12px; text-align: center; line-height: 1.7; }
.hb-eq .hb-add { color: oklch(0.46 0.14 255); font-weight: 700; }
.hb-eq .hb-add-e { color: oklch(0.40 0.11 150); font-weight: 700; }
.hb-steps { display: flex; flex-direction: column; gap: 10px; }
.hb-step { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--hairline); border-radius: 8px; background: var(--paper); }
.hb-step[hidden] { display: none; }
.hb-step.is-done { border-color: oklch(0.55 0.11 150); background: oklch(0.97 0.02 150); }
.hb-step-lab { font-size: 13.5px; color: var(--ink); flex: 1 1 190px; min-width: 150px; line-height: 1.45; }

/* stepper shared by hb + cb */
.rx-stp { display: inline-flex; align-items: center; border: 1.5px solid var(--hairline); border-radius: 999px; overflow: hidden; background: var(--paper); }
.rx-stp button { font-family: var(--font-mono); font-size: 15px; width: 34px; height: 34px; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; line-height: 1; }
.rx-stp button:hover { background: var(--paper-2); }
.rx-stp button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rx-stp-n { font-family: var(--font-mono); font-size: 14px; min-width: 30px; text-align: center; color: var(--ink); font-weight: 600; }
.hb-side { display: inline-flex; gap: 6px; }
.hb-go { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--hairline); background: var(--paper); color: var(--ink-soft); cursor: pointer; min-height: 34px; }
.hb-go:hover { border-color: var(--ink-soft); color: var(--ink); }
.hb-go:disabled { opacity: 0.5; cursor: default; }

/* cb combine */
.cb-halves { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.cb-half { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 12px; border: 1.5px solid var(--hairline); border-radius: 8px; background: var(--paper); }
.cb-half-eq { font-family: var(--font-mono); font-size: 14px; color: var(--ink); flex: 1 1 260px; min-width: 190px; }
.cb-mult { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.cb-tally { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); margin: 2px 0 0; }
.cb-tally b { color: var(--ink); }
.cb-tally.is-match b { color: oklch(0.42 0.10 150); }
.cb-result { font-family: var(--font-mono); font-size: 15px; text-align: center; color: var(--ink); background: oklch(0.95 0.05 150); border: 1.5px solid oklch(0.50 0.12 150); border-radius: 8px; padding: 12px 14px; margin-top: 12px; line-height: 1.7; }
.cb-result:empty { display: none; }

/* oa analyser */
.oa-eq { font-family: var(--font-mono); font-size: 15px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; padding: 12px 14px; margin: 6px 0 4px; text-align: center; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════════════
   A-Level 3.3.1 intro-to-organic ChemDraw-style suite (.oc-* / per-widget
   sk- dw- nom- iso- ez- mech- fg-). Driven by site.js off the mounts
   [data-sk] [data-draw] [data-nom] [data-iso] [data-ez] [data-mech] [data-fg];
   chrome extends .rn-cap-* / .mk-tile.
   ══════════════════════════════════════════════════════════════════════════ */
.oc-stage { margin-top: 12px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; padding: 10px 8px; }
.oc-stage svg { display: block; width: 100%; height: auto; max-height: 300px; margin-inline: auto; touch-action: manipulation; }
.oc-h { fill: transparent; stroke: transparent; stroke-width: 2; cursor: pointer; outline: none; }
.oc-h:hover { stroke: var(--hairline); }
.oc-h:focus-visible { stroke: var(--ink); stroke-dasharray: 3 2; }
.oc-h.is-sel { stroke: var(--accent); stroke-width: 2.5; }
.oc-h.is-ring { stroke: oklch(0.55 0.11 150); stroke-dasharray: 4 3; }
.oc-h.is-ok { stroke: oklch(0.55 0.11 150); stroke-width: 2.5; fill: oklch(0.95 0.045 150 / 0.3); }
.oc-h.is-err { stroke: var(--accent); stroke-width: 2.5; fill: oklch(0.95 0.05 30 / 0.3); }
.oc-h.is-missed { stroke: oklch(0.55 0.11 150); stroke-width: 2.5; stroke-dasharray: 3 3; }
.dw-pick[aria-pressed="true"] { stroke: var(--ink); fill: oklch(0.945 0.012 250 / 0.35); }
.oc-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.oc-palette[hidden] { display: none; }
.oc-chip { min-width: 44px; min-height: 40px; text-align: center; font-weight: 600; padding: 8px 10px; }
.oc-chip[aria-pressed="true"] { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); }
.oc-target { margin: 2px 0 0; font-size: 15px; }
.oc-target-name { color: var(--accent); }
.oc-target-fig { display: block; max-width: 320px; margin: 10px auto 0; padding: 8px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; }
.oc-target-fig svg { display: block; width: 100%; height: auto; max-height: 170px; }
.oc-readout { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.oc-readout-note { color: var(--muted); font-size: 12.5px; }
.oc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.oc-msg-area .is-ok, .rn-cap-msg.is-ok { color: oklch(0.34 0.09 150); font-style: normal; }
.oc-msg-area .is-err, .rn-cap-msg.is-err { color: var(--accent); font-style: normal; }
.oc-step { display: inline-flex; align-items: center; gap: 8px; margin: 8px 14px 0 0; padding: 6px 10px; border: 1.5px solid var(--hairline); border-radius: 8px; background: var(--paper); }
.oc-step-lab { font-size: 13px; color: var(--ink-soft); }
.oc-step-val { min-width: 1.4em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.oc-step-unit { font-size: 13px; color: var(--muted); }
.oc-step .rn-cap-btn { min-height: 32px; padding: 4px 12px; }
.oc-step.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); }
.oc-step.is-err { border-color: var(--accent); background: oklch(0.95 0.05 30); }
.dw-controls[hidden] { display: none; }
.dw-reveal { opacity: 0; transition: opacity 0.45s ease; margin-top: 4px; }
.dw-reveal.is-shown { opacity: 1; }
.dw-reveal-lab { font-size: 13px; color: var(--ink-soft); margin: 10px 0 4px; }
.dw-reveal svg { display: block; width: 100%; max-width: 340px; height: auto; max-height: 190px; margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
  .dw-reveal { transition: none; }
}

/* W3 name-builder chips + W4 isomer studio */
.oc-chip-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }
.oc-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.nom-chip[aria-pressed="true"] { border-color: var(--accent); background: oklch(0.96 0.03 30); }
.nom-built { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.nom-nameui[hidden], .nom-drawui[hidden], .nom-stage[hidden], .iso-quiz[hidden] { display: none; }
.nom-stage svg, .iso-found svg { display: block; margin-inline: auto; }
.iso-bank { display: flex; flex-wrap: wrap; gap: 8px; }
.iso-quiz { margin-top: 12px; padding: 12px 14px; border: 1.5px solid var(--hairline); border-radius: 8px; background: var(--paper); }
.iso-quiz-q { margin: 0 0 8px; font-size: 14.5px; }
.iso-quiz-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.iso-quiz-opt.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); }
.iso-quiz-opt.is-err { border-color: var(--accent); background: oklch(0.95 0.05 30); }
.iso-found { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.iso-card { margin: 0; padding: 8px 10px 6px; border: 1.5px solid var(--hairline); border-radius: 8px; background: var(--paper); width: 128px; }
.iso-card svg { width: 100%; height: 58px; }
.iso-card figcaption { font-size: 11.5px; color: var(--ink-soft); text-align: center; margin-top: 4px; line-height: 1.3; }
.iso-card-missed { border-style: dashed; border-color: var(--accent); }
.iso-missed-tag { color: var(--accent); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; }

/* W5 E/Z picker + W6 arrow checker + W-CAP option tiles */
.ez-chip { font-size: 13px; }
.ez-stage svg, .mech-stage svg { display: block; margin-inline: auto; }
.mech-ghost { cursor: pointer; outline: none; }
.mech-ghost:focus-visible path { stroke: var(--ink); }
.mech-ghost:hover path:first-child { stroke: var(--ink-soft); }
.mech-ghost-dim { opacity: 0.3; }
.mech-ghost-bad path:first-child { stroke: var(--accent); opacity: 0.55; }
.fg-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.fg-opts[hidden] { display: none; }
.fg-opt { display: flex; align-items: center; justify-content: center; min-height: 86px; padding: 10px; }
.fg-opt svg { width: 100%; max-width: 170px; max-height: 92px; height: auto; }
.fg-opt .fg-text { font-size: 15px; font-weight: 600; }
.fg-opt.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); }
.fg-opt.is-err { border-color: var(--accent); background: oklch(0.95 0.05 30); }
.fg-build[hidden] { display: none; }
.fg-inline-fig { display: block; max-width: 240px; margin: 8px auto 0; }
.fg-inline-fig svg { width: 100%; height: auto; max-height: 110px; display: block; }

/* intro-organic figure grids (F1–F6) */
.oc-figgrid { display: grid; gap: 10px; margin-top: 10px; grid-template-columns: 1fr; }
.oc-figgrid-2 { grid-template-columns: repeat(2, 1fr); }
.oc-figgrid-3 { grid-template-columns: repeat(3, 1fr); }
.oc-figgrid-fg { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.oc-figcell { border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper); padding: 10px 12px 8px; min-width: 0; }
.oc-figcell svg { display: block; width: 100%; height: auto; max-height: 150px; margin-inline: auto; }
/* taller cap for full-width diagram cells (tube rows, flowcharts) that would
   otherwise be squished by the 150px molecule-diagram cap */
.oc-figcell--tall svg { max-height: 340px; }
/* wide diagram (e.g. the identification flowchart) — scroll horizontally on
   narrow screens instead of shrinking the text to nothing */
.oc-figscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
.oc-figscroll svg { display: block; width: 100%; height: auto; max-height: 340px; min-width: 560px; margin-inline: auto; }
.oc-figcell-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.oc-figcell-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }
.oc-figcell-x { border: 1.5px dashed var(--accent); }
.oc-figcell-x .oc-figcell-head { color: var(--accent); }
.oc-f1-title { font-size: 14.5px; font-weight: 600; margin: 0 0 4px; }
.oc-f1-formula { font-size: 17px; margin: 18px 0; text-align: center; }
.oc-f1-wrong { max-width: 560px; }
.oc-fgcard svg { max-height: 62px; }
.oc-fgcard-gf { font-size: 13.5px; margin: 6px 0 0; text-align: center; }
.oc-f4pair { display: flex; align-items: center; gap: 8px; }
.oc-f4pair svg { flex: 1; min-width: 0; }
.oc-f4vs { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex: none; }
.oc-f4names { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin: 6px 0 0; }
.oc-pri1 { color: var(--accent); }
@media (max-width: 640px) {
  .oc-figgrid-3 { grid-template-columns: 1fr; }
  .oc-figcell svg { max-height: 120px; }
}

/* structure figures inside exam questions */
.rn-exam-fig { margin: 10px auto 14px; padding: 10px; max-width: 300px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; }
.rn-exam-fig svg { display: block; width: 100%; height: auto; margin-inline: auto; }

.oc-hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

/* W-ROT rotation panels */
.rb-wrap .oc-figcell svg { max-height: 200px; }
.rb-wrap .rn-cap-controls { justify-content: center; margin-top: 4px; }
.rb-wrap .rn-cap-msg { min-height: 3.6em; }

/* ============================================================
   ALKANES page (3.3.2). fd- animated fractional distillation —
   HOISTED from the GCSE crude-oil page (c7…/1-crude-oil-fuels-
   and-feedstock.html) so the SAME figure runs there and on the
   A-level alkanes page: markup stays per page, style lives here,
   script in site.js (guarded by #fdSvg). Also frs- radical-step
   sorter [data-frs] and alk- build-the-mechanism [data-alk];
   both mounts ship [hidden] (no-JS fallback: F4 + the mechanism
   callout), chrome reuses .rn-cap-*.
   ============================================================ */
/* fd- fractional distillation (shared GCSE + A-level) */
.fd-wrap { margin: 24px 0 28px; padding: 16px 12px 12px; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 4px; text-align: center; }
.fd-stage { display: block; width: 100%; max-width: 560px; margin: 0 auto 6px; overflow: visible; }
.fd-btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 500; padding: 7px 18px; border-radius: 999px; border: 1.5px solid var(--hairline); cursor: pointer; background: var(--paper); color: var(--ink-soft); }
.fd-btn:hover:not(:disabled) { border-color: var(--ink-soft); color: var(--ink); }
.fd-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fd-btn:disabled { opacity: 0.5; cursor: default; }
.fd-wrap .rn-img-caption { text-align: left; margin-top: 12px; }
/* frs- + alk- mechanism widgets */
.frs-q, .alk-q { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0 0 10px; }
.frs-eq { font-size: 17px; color: var(--ink); text-align: center; padding: 14px 10px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px; margin: 0 0 12px; }
.frs-opts, .frs-bank, .alk-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.frs-tile, .alk-tile { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13px; }
.frs-tile[disabled], .alk-tile[disabled], .frs-lab[disabled] { opacity: 0.38; }
.frs-tile sub, .frs-tile sup, .alk-tile sub, .alk-tile sup, .frs-eq sub, .frs-eq sup { font-size: 0.72em; line-height: 0; position: relative; vertical-align: baseline; }
.frs-tile sub, .alk-tile sub, .frs-eq sub { bottom: -0.22em; }
.frs-tile sup, .alk-tile sup, .frs-eq sup { top: -0.45em; }
.frs-lab { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.frs-route, .alk-route { margin-bottom: 12px; }
.frs-route .rn-cap-chip, .alk-route .rn-cap-chip { cursor: pointer; }
.frs-route-num, .alk-route-num { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-right: 6px; text-transform: uppercase; }
.frs-build[hidden] { display: none; }
.frs-planlead, .alk-planlead { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 8px; }
/* F3 combustion panel grid — 2-up that stacks on small phones */
.alkx-grid { display: grid; gap: 10px; margin-top: 10px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .alkx-grid { grid-template-columns: 1fr; } }
/* rn-oa — condition written OVER the reaction arrow (e.g. UV light above
   initiation). Reusable in .rn-eq lines and inside .rn-cap-chip/-btn tiles;
   sizes in em so it follows the surrounding font. */
.rn-oa { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 4px; position: relative; top: -0.1em; }
.rn-oa-cond { font-family: var(--font-mono); font-size: 0.58em; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); white-space: nowrap; padding: 0 3px 2px; text-transform: uppercase; }
.rn-oa-line { position: relative; height: 0; border-top: 1.8px solid currentColor; align-self: stretch; min-width: 3.2em; }
.rn-oa-line::after { content: ""; position: absolute; right: -1px; top: -4.3px; border-left: 0.42em solid currentColor; border-top: 0.24em solid transparent; border-bottom: 0.24em solid transparent; }

/* ── A-Level halogenoalkanes (3.3.3): responsive 2-panel figure grid + the
   halo/hydro chip groups, ozone counters and reveal panel. The -2m grid is
   the stacking variant of .oc-figgrid-2 (2-up on desktop, 1-up on phones)
   for panels too tall for the 150px figcell cap. */
.oc-figgrid-2m { grid-template-columns: repeat(2, 1fr); }
.oc-figgrid-2m .oc-figcell svg { max-height: 340px; }
@media (max-width: 640px) { .oc-figgrid-2m { grid-template-columns: 1fr; } }
.halo-groups { display: grid; gap: 12px; margin: 12px 0 2px; }
.halo-grouphead { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; }
.halo-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.elim-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.oz-state { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.oz-counts { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 10px 0 2px; font-size: 13.5px; color: var(--ink-soft); }
.oz-count-num { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--ink); }
.hydro-reveal { margin-top: 12px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; font-size: 14px; line-height: 1.55; }

/* ── A-Level alkenes (3.3.4): the four widgets reuse the .rn-cap-* / .oc-* /
   .mk-tile chrome wholesale; the only new piece is the small mono label
   above a chip group ("Arrow 1 starts from…"). */
.rn-cap-sublead { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 12px 0 2px; }
.nuc-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.nuc-opt[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: oklch(0.96 0.03 30); }
/* Two-arrow progress: each mechanism needs BOTH arrows, so surface which one is
   still owed and keep a half-finished mechanism from being skipped by accident. */
.nuc-pip { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 9px; margin-left: 6px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted); vertical-align: middle; }
.nuc-pip.is-done { border-color: var(--accent); color: var(--accent); }
.nuc-pip.is-done::before { content: "\2713\00a0"; }
.nuc-pip.is-now { background: var(--accent); color: #fff; border-color: var(--accent); }
.nuc-need2 .nuc-prompt { border-left: 3px solid var(--accent); background: oklch(0.96 0.03 30); padding: 8px 12px; border-radius: 0 6px 6px 0; }
.nuc-need2 .nuc-check { border-color: var(--accent); color: var(--accent); }
.nuc-need2 .nuc-new { opacity: 0.5; }

/* ── Greenhouse-effect animation (ghe) — shared by GCSE C9 Part 2 and
   A-Level organic-analysis (3.3.6, IR & global warming). JS in site.js. ── */
.ghe-wrap{margin:24px 0 28px;padding:16px 14px 14px;background:var(--paper-2);border:1px solid var(--hairline);border-radius:4px;text-align:center;}
.ghe-stage{display:block;width:100%;max-width:560px;margin:0 auto 4px;overflow:visible;}
.ghe-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;max-width:520px;margin:6px auto 0;}
.ghe-slider{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-soft);}
.ghe-slider input[type=range]{width:140px;accent-color:oklch(0.52 0.165 30);cursor:pointer;}
.ghe-lvl{min-width:3.4em;text-align:left;font-weight:600;color:var(--ink);}
.ghe-caption{font-size:13px;color:var(--ink-soft);margin:9px auto 9px;font-style:italic;min-height:3.4em;max-width:520px;line-height:1.45;}
.ghe-btn{font-family:var(--font-mono);font-size:11px;letter-spacing:0.07em;text-transform:uppercase;font-weight:500;padding:7px 18px;border-radius:999px;border:1.5px solid var(--hairline);cursor:pointer;background:var(--paper);color:var(--ink-soft);}
.ghe-btn:hover:not(:disabled){border-color:var(--ink-soft);color:var(--ink);}
.ghe-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.ghe-btn:disabled{opacity:0.5;cursor:default;}

/* organic-analysis W1 test-tube identifier — reagent-chip verdicts */
.ttr-opts .rn-cap-btn.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); color: oklch(0.32 0.08 150); }
.ttr-opts .rn-cap-btn.is-err { border-color: var(--accent); background: oklch(0.95 0.05 30); color: var(--accent); }

/* =========================================================================
   Whole-topic A2 pages — the LOCKED "subtle green accent" standard.
   .rn-hero--a2 goes on .article-hero: a faint green eyebrow rule above the
   hero text column + a green-tinted category chip (pairs with the green
   .rn-meta-badge.alevel that draft pages already ship). First used on nmr;
   thermodynamics et al. adopt the same class at ship.
   ========================================================================= */
.rn-hero--a2 .rn-hero-main::before { content: ""; display: block; width: 58px; height: 3px; border-radius: 2px; background: oklch(0.78 0.07 165); margin-bottom: 6px; }
.rn-hero--a2 .article-category { color: oklch(0.40 0.08 165); border-color: oklch(0.40 0.08 165 / 0.35); }

/* Hub A2 tile treatment: thin green top border + a small green "A2" chip
   (append <span class="rn-topic-a2">A2</span> inside .rn-topic-num when the
   card flips live; the "· A2" plain-text marker stays on coming-soon cards). */
.rn-topic-card--a2 { border-top: 3px solid oklch(0.78 0.07 165); }
.rn-topic-a2 { display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.05em; line-height: 1; padding: 3px 5px; border-radius: 4px; color: oklch(0.40 0.08 165); background: oklch(0.955 0.025 165); border: 1px solid oklch(0.82 0.06 165); vertical-align: 1px; }

/* =========================================================================
   NMR (3.3.15) — W1 shift-band explorer [data-nshift], W2 integration
   ratios [data-nint], W3 n+1 sandbox [data-nsplit], W4 flagship analyser
   [data-nmr], W5 mark scheme (.mknm-wrap). Chrome reuses .rn-cap-* /
   .elim-opts / .oc-stage / .mk-tile; everything below is nmr-specific.
   ========================================================================= */
.nmr-wrap [hidden] { display: none !important; }
.nmr-head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 12px 0 10px; }
.nmr-pick-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.nmr-pick { font: 500 13.5px/1.3 var(--font-sans); padding: 8px 10px; border: 1.5px solid var(--hairline); border-radius: 8px; background: var(--paper); color: var(--ink); max-width: 230px; }
.nmr-head .elim-opts { margin: 0; }
.nmr-booklet { margin: 10px 0; border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper); }
.nmr-booklet > summary { cursor: pointer; padding: 9px 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }
.nmr-booklet-tables { display: grid; gap: 14px; padding: 4px 12px 12px; }
@media (min-width: 700px) { .nmr-booklet-tables { grid-template-columns: 1fr 1fr; align-items: start; } }
.nmr-booklet-tables table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nmr-booklet-tables caption { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: left; padding-bottom: 5px; }
.nmr-booklet-tables th, .nmr-booklet-tables td { text-align: left; padding: 3px 8px 3px 0; border-bottom: 1px solid var(--hairline); font-weight: 400; }
.nmr-booklet-tables th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--muted); }
.nmr-stage { background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; padding: 8px 8px 4px; margin: 10px 0; }
.nmr-stage svg { display: block; width: 100%; height: auto; }
.nmr-panel { border: 1px solid var(--hairline); border-radius: 8px; padding: 12px 14px; background: var(--paper); margin: 10px 0; }
.nmr-panel-title { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink); margin: 0 0 8px; font-weight: 600; }
.nmr-row { display: grid; gap: 10px; margin: 8px 0 4px; }
@media (min-width: 640px) { .nmr-row { grid-template-columns: repeat(3, 1fr); } }
/* Read-a-spectrum panel has FOUR fields: three short selects on one line,
   the long Table-B select on its own full-width line */
@media (min-width: 640px) { .nmr-row--4 .nmr-field:last-child { grid-column: 1 / -1; } }
.nmr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.nmr-field select { font: 500 13px/1.3 var(--font-sans); padding: 7px 8px; border: 1.5px solid var(--hairline); border-radius: 7px; background: var(--paper); color: var(--ink); width: 100%; min-width: 0; }
.nmr-field.is-ok select { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); }
.nmr-field.is-err select { border-color: var(--accent); background: oklch(0.95 0.05 30); }
.nmr-log { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.nmr-log li { font-size: 13px; line-height: 1.5; padding: 8px 12px; border-left: 3px solid oklch(0.55 0.11 150); background: oklch(0.97 0.02 150); border-radius: 0 6px 6px 0; }
/* solved-peak line + its colour-coded fragment reveal side by side */
.nmr-log li.nmr-log-flex { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.nmr-log-flex .nmr-log-text { flex: 1 1 250px; min-width: 0; }
.nmr-fragmol { flex: 0 0 auto; }
.nmr-fragmol svg { display: block; }
.nmr-log-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 14px 0 0; }
.nmr-log-legend { font-size: 11.5px; color: var(--muted); margin: 3px 0 0; }
.nmr-reveal { border: 1.5px solid var(--hairline); border-radius: 8px; padding: 14px; margin: 12px 0 4px; background: var(--paper); text-align: center; }
.nmr-struct { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--ink); margin: 6px 0 2px; }
.nmr-struct-name { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 4px; }
.nmr-arow { display: grid; gap: 10px; align-items: end; grid-template-columns: minmax(96px, 130px) 1fr; margin: 8px 0; }
.nmr-arow .nmr-row { margin: 0; }
.nmr-arow-tag { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); padding-bottom: 9px; }
.nmr-arow-tag .nmr-tick { color: oklch(0.45 0.11 150); }
@media (max-width: 560px) { .nmr-arow { grid-template-columns: 1fr; gap: 4px; } .nmr-arow-tag { padding-bottom: 0; } }

/* nmr chips — solved/wrong states (scoped so .nuc-opt[aria-pressed] can't
   out-specify them, per the redox gotcha) */
.nmr-wrap .rn-cap-btn.is-ok, .nin-wrap .rn-cap-btn.is-ok, .nsp-wrap .rn-cap-btn.is-ok, .nsh-wrap .rn-cap-btn.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.95 0.045 150); color: oklch(0.32 0.08 150); }
.nmr-wrap .rn-cap-btn.is-err, .nin-wrap .rn-cap-btn.is-err, .nsp-wrap .rn-cap-btn.is-err, .nsh-wrap .rn-cap-btn.is-err { border-color: var(--accent); background: oklch(0.95 0.05 30); color: var(--accent); }

/* Greek/maths symbols inside Instrument Serif display headings: the display
   face has no Greek glyphs, so a bare δ falls back with mismatched metrics
   and stray letter-spacing. Render the symbol in the sans face, slightly
   reduced, so it reads as deliberate notation. */
.rn-hsym { font-family: var(--font-sans); font-weight: 500; font-size: 0.78em; line-height: 1; }

/* peak chips carry a lowercase delta — never uppercase them */
.nmr-wrap .nmr-peakchip { text-transform: none; letter-spacing: 0.03em; font-size: 12px; }
/* isotope tokens in Instrument Serif headings: keep the heading's own serif
   face (its lining digits scale fine) — only raise and shrink the mass
   number. Never use Unicode ¹³ here (the serif lacks those glyphs and the
   fallback mixes fonts); never swap the token to the sans face (reads as a
   pasted-in foreign letter next to the serif). */
.rn-hiso { letter-spacing: 0; }
.rn-hiso sup { font-size: 0.55em; line-height: 0; position: relative; top: -0.48em; vertical-align: baseline; letter-spacing: 0; margin-right: 0.04em; }
/* isotope tokens inside mono/uppercase chrome (.rn-chem host): kill the
   letter-spacing that spreads the digits from the element symbol */
.rn-chem sup, .rn-chem sub { letter-spacing: 0; }

/* nmr — red/blue H convention (red = the H giving the signal, blue = the
   neighbour H doing the splitting; mirrors the Data Booklet's bold H) */
.nmr-hobs { color: oklch(0.52 0.165 30); font-weight: 600; }
.nmr-hnbr { color: oklch(0.44 0.10 250); font-weight: 600; }
/* displayed-formula blocks rendered by site.js molSvg() */
.nmr-mol { margin: 8px 0 4px; }
.nmr-mol svg { display: block; height: auto; margin-inline: auto; }
/* delta-window zoom control on the Read-a-spectrum stage */
.nmr-zoom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--muted); }
.nmr-zoom label { display: inline-flex; align-items: center; gap: 8px; }
.nmr-zoom input[type="range"] { width: min(240px, 50vw); accent-color: oklch(0.52 0.165 30); }
.nmr-zoomlab { color: var(--ink-soft); }

/* =========================================================================
   TRANSITION METALS (3.2.5) — W1 shape viewer [data-complex], W2 ligand-
   substitution explorer [data-ligand], W3 colour/ΔE explorer [data-colour],
   W6 substitution colour quiz [data-subquiz], W4 vanadium ladder
   [data-ox-state], W7 mark scheme (.mktm-wrap) and W5 redox titration
   (.rtitr-wrap, reusing the vt-* engine chrome). Buttons/chips/tiles all
   reuse the generic .rn-cap-* / .elim-opts / .mk-tile family.
   ========================================================================= */
/* mounts and sub-rows ship [hidden]; some (.elim-opts) have display rules
   that would defeat the attribute, so make [hidden] absolute in tm wraps */
.tmc-wrap [hidden], .tml-wrap [hidden], .tmk-wrap [hidden],
.tmq-wrap [hidden], .tmv-wrap [hidden] { display: none !important; }
.tm-stage { background: var(--paper); border: 1px solid var(--hairline); border-radius: 8px; padding: 10px 8px 6px; margin: 10px 0; }
.tm-stage svg { display: block; width: 100%; height: auto; max-width: 340px; margin-inline: auto; }
.tm-stage svg.tm-wide { max-width: 500px; }
.tm-swatch { display: inline-block; width: 20px; height: 14px; border-radius: 4px; border: 1px solid oklch(0.4 0.01 250 / 0.4); vertical-align: -2px; }
.rn-cap-chip .tm-swatch { margin-right: 7px; }
.tm-groups { display: grid; gap: 12px; margin: 0 0 10px; }
.rn-cap-chip.is-sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tmk-modes .rn-cap-btn[aria-pressed="true"], .tmq-modes .rn-cap-btn[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: oklch(0.95 0.01 250); }
/* W1 readout facts */
.tmc-read { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; margin: 8px 0 2px; }
.tmc-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
/* W2 result panel */
.tml-result { border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper); padding: 12px 14px; margin-top: 10px; font-size: 14px; }
.tml-result p { margin: 0 0 8px; }
.tml-result p:last-child { margin-bottom: 0; }
.tml-colline { font-weight: 600; }
.tml-arrow { margin: 0 6px; }
/* W6 quiz */
.tmq-q { font-size: 15px; font-weight: 600; margin: 4px 0 10px; }
.tmq-group { margin-bottom: 10px; }
.tml-eqinline { display: block; margin-top: 6px; font-size: 13.5px; }
/* W4 vanadium ladder */
.tmv-flex { display: grid; gap: 14px; align-items: center; }
@media (min-width: 640px) { .tmv-flex { grid-template-columns: 170px 1fr; } }
.tmv-stage svg { max-width: 120px; }
.tmv-state { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.tmv-chip { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 3px 8px; border: 1.5px solid var(--ink-soft); border-radius: 6px; margin-right: 6px; }
.tmv-eq { margin: 8px 0; }
.tmv-note { font-size: 13px; color: var(--ink-soft); margin: 0; }
/* W3 colorimetry slider */
.tmk-slider { display: flex; gap: 10px; align-items: center; font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); max-width: 420px; margin: 4px auto 6px; }
.tmk-slider input[type="range"] { flex: 1; accent-color: oklch(0.52 0.165 30); }
.tmk-aval { font-size: 12px; color: var(--ink); }
/* W5 redox titration: gate the interactive chrome until site.js adds
   .vt-live (same no-JS pattern as the AS .vt-wrap) */
.rtitr-wrap:not(.vt-live) .rn-cap-controls,
.rtitr-wrap:not(.vt-live) .vt-read,
.rtitr-wrap:not(.vt-live) .rn-table-scroll,
.rtitr-wrap:not(.vt-live) .rtitr-modes { display: none; }
.rtitr-wrap .vt-svg { max-width: 390px; }

/* tm chips act as buttons, not drag handles — kill the inherited grab cursor */
.tmc-wrap .rn-cap-chip, .tml-wrap .rn-cap-chip, .tmk-wrap .rn-cap-chip,
.tmq-wrap .rn-cap-chip, .rtitr-wrap .rn-cap-chip { cursor: pointer; }

/* ── Reactions of Ions in Solution (3.2.6): aqq-/amp-/aqp-/mkai- widgets.
   All chrome reuses the generic .rn-cap-* / .tm-* / .mk-* families; the
   rules below are the only page-specific bits. */
.aqq-wrap [hidden], .amp-wrap [hidden], .aqp-wrap [hidden] { display: none !important; }
.aqq-wrap .rn-cap-chip, .amp-wrap .rn-cap-chip, .aqp-wrap .rn-cap-chip { cursor: pointer; }
.amp-stage svg { max-width: 460px; }
.amp-eq[hidden] { display: none; }

/* ── Organic Synthesis (3.3.14): F1 map + syn- pathway builder + mksy-.
   Widget chrome reuses the generic .rn-cap-* / .mk-* families; below is the
   page-specific layer only. */
/* F1 panels are tall node-and-arrow maps — lift the 340px figcell cap so the
   labels stay legible at full column width */
.syn-map .oc-figcell svg { max-height: 560px; }
/* each panel is the anchor for its own top-right zoom trigger */
.syn-map .oc-figcell { position: relative; }
/* F1 legend — arrow colour = reaction type (colours match the generator FAM map) */
.syn-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 10px; }
.syn-leg-item { white-space: nowrap; }
.syn-leg-dash { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; position: relative; top: -1px; }
/* syn- pathway builder (data-synthesis). Chrome reuses .rn-cap-*; below is the
   widget-specific layer. Chips act as buttons, not drag handles. */
.syn-wrap .rn-cap-chip { cursor: pointer; }
.syn-wrap [hidden] { display: none !important; }
.syn-wrap .rn-cap-chip[aria-pressed="true"] { border-color: var(--accent); background: oklch(0.96 0.03 30); color: var(--accent); }
.syn-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; margin: 12px 0 10px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper); }
.syn-banner-goal { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.syn-banner-count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.syn-goal-f { font-weight: 600; }
.syn-goal-arrow { color: var(--muted); }
.syn-stage { display: grid; grid-template-columns: minmax(190px, 240px) 1fr; gap: 12px; margin: 12px 0; align-items: stretch; }
@media (max-width: 560px) { .syn-stage { grid-template-columns: 1fr; } }
.syn-mol { border: 1.5px solid var(--ink-soft); border-radius: 10px; background: var(--paper); padding: 14px 16px; text-align: center; }
.syn-mol-name { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.syn-mol-f { font-size: 24px; font-weight: 600; margin: 6px 0; overflow-wrap: anywhere; }
.syn-mol-meta { font-size: 12px; color: var(--muted); margin: 0; }
.syn-mol.is-new { animation: syn-pop 0.45s ease; }
@keyframes syn-pop { 0% { transform: scale(0.96); border-color: oklch(0.55 0.11 150); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
.syn-mol.is-shake { animation: syn-shake 0.4s ease; }
@keyframes syn-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .syn-mol.is-new, .syn-mol.is-shake { animation: none; } }
.syn-feed { border: 1px solid var(--hairline); border-radius: 10px; background: var(--paper); padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); display: flex; align-items: center; min-height: 76px; }
.syn-feed.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.97 0.025 150); color: oklch(0.30 0.07 150); }
.syn-feed.is-nr { border-color: var(--accent); background: oklch(0.97 0.025 30); color: oklch(0.36 0.11 30); }
.syn-feed.is-off { border-color: oklch(0.62 0.09 70); background: oklch(0.975 0.02 80); color: oklch(0.36 0.06 70); }
.syn-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px; margin: 10px 0 2px; }
.syn-rg { font-family: var(--font-sans); text-align: left; padding: 8px 11px; border-radius: 8px; border: 1.5px solid var(--hairline); background: var(--paper); color: var(--ink); cursor: pointer; line-height: 1.35; }
.syn-rg:hover { border-color: var(--ink-soft); }
.syn-rg:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.syn-rg:disabled { opacity: 0.55; cursor: default; }
.syn-rg-l { display: block; font-size: 13px; font-weight: 600; }
.syn-rg-c { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.syn-plus1 { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: var(--accent); background: oklch(0.95 0.05 30); border: 1px solid var(--accent); vertical-align: 1px; }
.syn-log-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
.syn-log { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.syn-log li { padding: 7px 2px; border-bottom: 1px dashed var(--hairline); overflow-wrap: anywhere; }
.syn-log-r { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.syn-log-m { color: var(--muted); }
.syn-done { border: 1.5px solid oklch(0.55 0.11 150); border-radius: 10px; background: oklch(0.97 0.025 150); padding: 14px 16px; margin-top: 14px; font-size: 14px; }
.syn-done-h { font-weight: 700; color: oklch(0.30 0.07 150); margin: 0 0 6px; }
.syn-done ul { margin: 6px 0 0; padding-left: 20px; }
.syn-done li { margin: 3px 0; font-size: 13px; }
.syn-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
/* review round: chip-tray reagent system builder */
.syn-tray-h { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 12px 0 6px; }
.syn-tray { margin-bottom: 4px; }
.syn-tray .rn-cap-chip { font-weight: 500; font-size: 12.5px; min-height: 34px; padding: 6px 11px; }
.syn-sel { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; min-height: 1.4em; }
.syn-react { border-color: var(--accent); color: var(--accent); }
.syn-react:hover { background: oklch(0.96 0.03 30); color: var(--accent); }

/* ── 3.1.11 Electrode potentials & cells — W1/W2/W3 widget furniture ──────
   (mark-scheme W4 reuses the shared .mk-pool/.mk-tile classes) */
.epc-intro { font-size: 14px; margin: 0 0 10px; }
.epc-svg { display: block; width: 100%; max-width: 560px; margin: 6px auto 2px; }
.epc-read { display: grid; gap: 7px; margin-top: 12px; }
.epc-read p { margin: 0; font-size: 14px; }
.epc-read .epc-eq { font-family: var(--font-mono); font-size: 13.5px; }
.epc-dim { color: var(--muted); font-size: 12px; }
.epc-note { font-size: 13px; color: var(--ink-soft); font-style: italic; margin: 10px 0 0; min-height: 1.4em; }
.epc-verdict { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-right: 8px; }
.epc-verdict.is-yes { color: oklch(0.32 0.08 150); background: oklch(0.95 0.045 150); border: 1px solid oklch(0.55 0.11 150); }
.epc-verdict.is-no { color: var(--accent); background: oklch(0.95 0.05 30); border: 1px solid var(--accent); }
.epc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 640px) { .epc-cols { grid-template-columns: 1fr; } }
.epc-series { margin: 10px 0 14px; border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; }
.epc-series-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 12px; font-family: var(--font-mono); font-size: 12.5px; border-top: 1px solid var(--hairline); background: var(--paper); }
.epc-series-row:first-child { border-top: 0; }
.epc-series-row > span:last-child { white-space: nowrap; font-weight: 600; }

/* ── Hydrogen fuel-cell animation (.hf-*) — hoisted from GCSE C5 Part 3 so the
   A-level electrode-potentials page can share it (same ghe- hoist pattern).
   JS in site.js, gated on #hfSvg; [data-alevel] on the svg switches the caption
   terminology to negative/positive electrode. ─────────────────────────────── */
.hf-wrap { max-width: 460px; margin: 22px auto 26px; padding: 20px 16px 14px; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 4px; text-align: center; }
.hf-wrap svg.hf-stage { display: block; width: 100%; max-width: 330px; margin: 0 auto; overflow: visible; }
.hf-caption { font-size: 15px; color: var(--ink-soft); margin: 2px auto 14px; font-style: italic; line-height: 1.5; min-height: 4.6em; max-width: 600px; }
.hf-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px auto 2px; }
.hf-mode { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--hairline); cursor: pointer; background: var(--paper); color: var(--ink-soft); transition: background .15s, border-color .15s, color .15s; }
.hf-mode:hover { border-color: var(--ink-soft); }
.hf-mode.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hf-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 16px; margin: 14px auto 0; max-width: 560px; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.hf-leg { display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================================
   SHARED CALCULATOR-WIDGET CHROME — blurb / input row / mode chips / working
   output. Introduced for acids & bases (3.1.12) as .ab-*; generalised to the
   neutral .rn-calc-* names when thermodynamics (3.1.8) and rate equations
   (3.1.9) needed the same chrome. Both name sets are the same rules — use
   .rn-calc-* on any NEW widget; .ab-* is retained for acids & bases.
   Wider chrome (buttons, wrap, messages, plots) reuses .rn-cap-* / .me-in / .mk-*.
   ========================================================================= */
.ab-blurb, .rn-calc-blurb { font-size: 13px; color: var(--muted); margin: 8px 0 4px; }
.ab-inrow, .rn-calc-inrow { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 8px 0 2px; }
.ab-inlab, .rn-calc-inlab { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.ab-in, .rn-calc-in { width: 110px; }
.ab-chips, .rn-calc-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ab-chip[aria-pressed="true"], .rn-calc-chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: oklch(0.96 0.03 30); }
.ab-out, .rn-calc-out { margin-top: 12px; border-left: 3px solid var(--hairline); padding: 2px 0 2px 14px; }
.ab-out[hidden], .rn-calc-out[hidden] { display: none; }
.ab-wline, .rn-calc-wline { margin: 4px 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.ab-wline strong, .rn-calc-wline strong { color: var(--ink); font-size: 14px; }
.ab-wnote, .rn-calc-note { margin: 7px 0 0; font-size: 12px; color: var(--muted); }
.ab-err, .rn-calc-err { margin: 6px 0 0; font-size: 12.5px; color: oklch(0.5 0.12 25); }
.ab-picklab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.abt-stage { margin: 12px 0 4px; }
.abt-stage svg { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; }
.abt-ind[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: oklch(0.96 0.03 30); }

/* =========================================================================
   THERMODYNAMICS (3.1.8) + RATE EQUATIONS (3.1.9) widget layout.
   Chrome (wrap, buttons, chips, inputs, working lines, plots, mark-scheme
   tiles) all comes from .rn-cap-* / .rn-calc-* / .mk-* / .me-in above — the
   rules below are only the per-widget LAYOUT those shared pieces sit in.
   ========================================================================= */

/* shared: any widget that renders an inline SVG stage */
.bh-stage, .cd-ion, .en-ladder, .gib-stage, .hl-stage, .og-stage, .ar-stage { margin: 14px 0 4px; }
.cd-ion svg, .en-ladder svg, .gib-stage svg, .hl-stage svg, .og-stage svg, .ar-stage svg { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; }

/* W1 Born–Haber cycle builder — one grid row per cycle step */
.bh-target { font-size: 15px; margin: 10px 0 4px; }
.bh-rows { display: grid; gap: 8px; margin: 12px 0 2px; }
.bh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--hairline); border-radius: 8px; background: var(--paper); }
.bh-row.is-ok { border-color: oklch(0.55 0.11 150); background: oklch(0.97 0.03 150); }
.bh-row.is-err { border-color: var(--accent); background: oklch(0.97 0.03 30); }
.bh-desc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; min-width: 0; }
.bh-name { font-size: 13.5px; color: var(--ink); }
.bh-eq { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.bh-val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bh-pick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bh-mark { font-family: var(--font-mono); font-size: 11.5px; }
.bh-row.is-ok .bh-mark { color: oklch(0.42 0.09 150); }
.bh-row.is-err .bh-mark { color: var(--accent); }
@media (min-width: 620px) {
  .bh-row { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .bh-pick { grid-column: auto; }
}

/* W2 solution / hydration cycle solver */
.hy-egs { margin-top: 10px; }
.rn-calc-eglab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* W3 entropy calculator + disorder ladder */
.en-eq { margin: 10px 0 6px; }
.en-tablewrap { margin: 4px 0 2px; }
.en-tbl td { vertical-align: middle; }
.en-tbl .en-in { width: 78px; }
.en-grp td { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); }
.en-ladcap { text-align: center; }

/* W5 charge-density comparator */
.cd-presets-lab { margin: 12px 0 4px; }
.cd-read { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 4px; }
.cd-val { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.cd-val b { color: var(--ink); }
.cd-bars { display: grid; gap: 14px; margin: 14px 0 4px; }
.cd-bar-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 5px; }
.cd-bar-track { height: 12px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.cd-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.18s ease; }
.cd-bar-why { font-size: 12px; color: var(--muted); margin: 5px 0 0; }
.cd-scalenote, .cd-defn { margin-top: 6px; }

/* W1 rate-equation & units-of-k builder */
.rq-row { display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 10px 0 2px; }
.rq-field p { margin: 0 0 6px; }

/* W2 initial-rates order finder */
.ir-table { margin: 8px 0 4px; }
.ir-pick { display: grid; gap: 6px; margin: 12px 0 2px; }
.ir-picklab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 6px 0 0; }
.ir-orders { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); margin: 10px 0 0; }

/* W3 order-graph explorer */
.og-picks { margin-top: 4px; }
.og-opts { margin-top: 4px; }
.og-nextwrap[hidden] { display: none; }

/* W4 half-life reader */
.hl-slide { margin-top: 6px; }
.hl-range { width: 190px; }
.hl-read { margin: 8px 0 2px; }
.hl-guess[hidden] { display: none; }
.hl-table { margin: 8px 0 2px; }
.hl-table table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.hl-table th, .hl-table td { text-align: left; padding: 5px 9px; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); }
.hl-table th { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* W5 Arrhenius tool */
.ar-const { text-align: center; }

/* ── Optical isomerism (3.3.7) W1: spot-the-chiral-centre ([data-chiral]) ──
   The molecule is a displayed formula (SVG) whose carbons are clickable;
   everything else reuses the generic .rn-cap-* / .oc-stage chrome. */
.chc-mol { margin: 12px 0 2px; }
.chc-hit { cursor: pointer; outline: none; }
.chc-hit circle { fill: transparent; }
.chc-hit:hover circle { stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chc-hit:focus-visible circle { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 4; }
.chc-hit.is-err circle { stroke: var(--accent); stroke-width: 2; }

/* ── Optical isomerism (3.3.7) W2: non-superimposable demo ([data-super]) ──
   A fixed enantiomer beside its rotatable mirror image; chrome reuses the
   generic .rn-cap-* family. */
.chs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; align-items: start; margin-top: 10px; }
.chs-cap { font: 600 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 2px; text-align: center; }
.chs-cell svg { width: 100%; max-width: 230px; display: block; margin-inline: auto; }
.chs-slots { font-size: 14.5px; margin: 10px 0 0; }
.chs-ok { color: oklch(0.42 0.10 155); font-weight: 600; }
.chs-no { color: var(--accent); font-weight: 600; }
.chs-anim-x { animation: chs-spin-x .4s ease; }
.chs-anim-y { animation: chs-spin-y .4s ease; }
@keyframes chs-spin-x { 0% { transform: scaleX(1); } 50% { transform: scaleX(0.12); } 100% { transform: scaleX(1); } }
@keyframes chs-spin-y { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.12); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .chs-anim-x, .chs-anim-y { animation: none; }
}