/* =========================
   Note Viewer — Dark Theme
   Cleaned + merged for index + detail pages
========================= */

/* Uses your main theme variables from styles.css (fallbacks included) */
:root{
  --nv-bg: var(--bg, #0D0E14);
  --nv-panel: var(--surface, #141824);
  --nv-border: var(--border, rgba(255,255,255,0.09));
  --nv-border-2: var(--border-strong, rgba(255,255,255,0.14));
  --nv-text: var(--text, rgba(245,247,255,0.92));
  --nv-muted: var(--text-muted, rgba(220,226,245,0.62));
  --nv-faint: var(--text-faint, rgba(220,226,245,0.38));
  --nv-accent: var(--accent, #5B8CFF);
  --nv-cyan: #22c1ff;
}

/* =========================
   Shared outer wrappers
========================= */

/* Old detail template layout support */
.layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: calc(100vh - 68px);
  align-items: start;
  background: var(--bg, #0d0e14);
}

/* New landing/index template layout support */
.noteviewer-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: calc(100vh - 68px);
  align-items: start;
}

/* Note detail shell — full-width flex: reading column | chapter rail */
/* max-width keeps the rail content-adjacent on wide monitors — not stranded at the browser edge */
.nv-canvas {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 68px);
  background: var(--bg, #0d0e14);
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM LEFT RESOURCE RAIL — 3-zone unified system
   Zone 1: Reading progress (notes/summaries, JS-driven)
   Zone 2: Chapter navigation (identity head + scrollable tree)
   Zone 3: Study actions (contextual resource links)
   Template: noteviewer/rail_sidebar.html
═══════════════════════════════════════════════════════════════════════════ */

/* Legacy noteviewer-sidebar (left-grid) retired — no longer in any template */
.noteviewer-sidebar { display: none; }

/* ── Rail panel ────────────────────────────────────────────────────────── */

/* Subtle top accent stripe — atmospheric cap, not a spotlight */

/* ══ Zone 1: Reading progress ─────────────────────────────────────────── */


/* ══ Tree nodes ───────────────────────────────────────────────────────── */


/* Leaf navigation link */


/* ── Active row — signature detail of the rail ───────────────────────── */

/* Ringed glowing dot — premium active indicator */

/* ── Locked (premium) rows — "valuable but gated" treatment ─────────── */


/* ── Chapter group toggle — structural section leader, not a card ──────── */


/* Open: minimal indigo wash, border accent fully lit, square bottom for guide connection */


/* ── Children container — connected inset below section leader ─────────── */

.sidebar-children.collapsed {
  /* hidden via the animated grid-template-rows collapse in chapter-navigator.css */
}

/* Leaf links inside children — tighter left margin, container handles indent */

/* ── Lock icon ────────────────────────────────────────────────────────── */
.lock-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: rgba(251, 191, 36, 0.55);
  opacity: 1;
}

/* ── Mobile trigger button (fixed FAB) ────────────────────────────────── */


/* ── Mobile backdrop ──────────────────────────────────────────────────── */
.nv-rail-backdrop {
  /* display toggle removed — fade handled by visibility in noteviewer-left-rail.css */
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.24s;
}

.nv-rail-backdrop.is-open {
  opacity: 1;
}

/* ── Mobile drawer ────────────────────────────────────────────────────── */

.nv-rail-drawer.is-open {
  transform: translateX(0);
}


/* Breadcrumbs — used in resource_index main area */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--faint);
  margin-bottom: 20px;
  padding: 0 2px;
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.1s;
  padding: 2px 4px;
  border-radius: 4px;
}

.breadcrumbs a:hover {
  color: var(--text-link-hover); /* PT-08 */
  background: rgba(91, 140, 255, 0.08);
}

.breadcrumb-sep {
  color: var(--faint);
  margin: 0 2px;
  font-size: 0.7rem;
}


/* =========================
   Main content wrappers
========================= */

/* ═══════════════════════════════════════════════════════════════════════════
   Reading column atmosphere — the premium reading surface.
   Previously the atmospheric gradients were on .note-main which is unused by
   the template. Moving them here so they actually render.
═══════════════════════════════════════════════════════════════════════════ */
.noteviewer-main {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: visible;
}

/* Crown glow — rich indigo-violet bloom at the top of the reading surface */
.noteviewer-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: 580px;
  background:
    radial-gradient(ellipse 72% 44% at 50% 0%,
      rgba(91,140,255,0.08) 0%,
      rgba(77,110,248,0.03) 48%,
      transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Mid-scroll warmth — barely perceptible indigo warmth that keeps the page
   feeling inviting after the crown glow fades */
.noteviewer-main::after {
  content: '';
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse at 50% 50%, rgba(91,140,255,0.025) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.note-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
  /* Generous horizontal breathing room — the reading column earns premium space */
  padding: 52px 72px 96px;
  position: relative;
  overflow: hidden;
}

.note-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 960px;
  height: 640px;
  /* Richer atmospheric crown — warmer blend of indigo + violet at the top,
     dissolving into the dark base. Provides subtle warmth without neon. */
  background:
    radial-gradient(ellipse 80% 46% at 50% 0%, rgba(91,140,255,0.07) 0%, rgba(77,110,248,0.025) 52%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Lower ambient glow — soft indigo warmth mid-scroll, barely perceptible */
.note-main::after {
  content: '';
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  width: 680px;
  height: 360px;
  background: radial-gradient(ellipse at 50% 50%, rgba(91,140,255,0.02) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Symmetric padding so .note-body can be properly centered within the column.
   Previous 64px left / 40px right asymmetry caused a large dead zone on the right. */
.noteviewer-main-inner {
  padding: 40px 44px 64px 44px;
  /* Very faint warm-indigo top haze — makes the reading entry point feel premium.
     Invisible unless looked for, but the absence would be felt. */
  position: relative;
}

/* Topic Questions / MCQ pages — slightly tighter horizontal padding so
   the practice column has more room to breathe (≈+24-32px per card) and
   the answer panel can stretch to a comfortable reading width. Scoped
   via :has() so notes / flashcards / videos keep their existing rhythm. */
.noteviewer-main-inner:has(.question-list),
.noteviewer-main-inner:has(.mcq-list) {
  padding-left: clamp(28px, 3vw, 36px);
  padding-right: clamp(28px, 3vw, 36px);
}

/* Theme-parity hoist (round-3): the reading-lane padding/border below comes
   from theme-dark.css's `.nv-canvas:has(.nv-rail) .noteviewer-main-inner`
   block. The unscoped layout half lives here so light inherits the same
   rect; theme-dark.css continues to carry dark's background/border-color,
   and the html.theme-light override below carries light's border-color. */
@media (min-width: 1280px) {
  .nv-canvas:has(.nv-rail) .noteviewer-main-inner {
    padding-top: 30px;
    padding-bottom: 72px;
    padding-left: clamp(28px, 2.4vw, 44px);
    padding-right: clamp(28px, 2.4vw, 44px);
    border-width: 1px;
    border-style: solid;
    border-radius: 20px;
  }
  html.theme-light .nv-canvas:has(.nv-rail) .noteviewer-main-inner {
    border-color: rgba(15, 23, 42, 0.06);
  }
}

/* Top atmospheric bleed within the inner wrapper — frames the opening composition */
.noteviewer-main-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(91,140,255,0.015) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.noteviewer-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.noteviewer-header h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 auto 8px;
  max-width: 720px;
  color: var(--text);
}

.noteviewer-meta {
  font-size: 0.9375rem; /* 15px — up from 14px, more present in the header composition */
  font-weight: 500;
  color: rgba(255,255,255,0.56); /* up from var(--muted) = 0.50 */
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.noteviewer-header h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--text);
}

.noteviewer-meta {
  font-size: 0.9375rem; /* 15px — up from 14px, more present in the header composition */
  font-weight: 500;
  color: rgba(255,255,255,0.56); /* up from var(--muted) = 0.50 */
  display: flex;
  gap: 6px;
  align-items: center;
}

.noteviewer-body {
  line-height: 1.80;
  color: var(--nv-text);
}

.nv-agg-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(91,140,255,0.14);
  color: rgba(169,190,255,0.85);
  border: 1px solid rgba(91,140,255,0.22);
  text-transform: uppercase;
}

/* =========================
   Breadcrumbs
========================= */

.breadcrumbs{
  margin-bottom:18px;
  font-size:0.8125rem;
  line-height:1.5;
}

.breadcrumbs a{
  color:rgba(255,255,255,0.38);
  text-decoration:none;
}

.breadcrumbs a:hover{
  color:rgba(255,255,255,0.58);
  text-decoration:none;
}

.breadcrumbs span{
  color:rgba(255,255,255,0.72);
  font-weight:500;
}

.breadcrumb-sep{
  margin:0 5px;
  color:rgba(255,255,255,0.18);
}

/* =========================
   Navigation context (breadcrumbs + back button)
========================= */


.note-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Canonical site breadcrumb — matches the notes header on every page:
     left-aligned, small, quiet uppercase. justify-content + text-align both
     left so a long crumb that wraps stays left-aligned line-for-line. */
  justify-content: flex-start;
  text-align: left;
  gap: 0;
  font-size: 0.6875rem;
  font-weight: 680;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nv-faint);
  line-height: 1.45;
}

/* Leading <h2> of a note (e.g. "2.1: CELL STRUCTURE AND FUNCTION") = the
   topic opener. Styled as a compact accent band with a soft glow so it reads
   as a designed section header, clearly subordinate to the page <h1> above it.
   --text keeps the label AA in both themes; band + glow are alpha-blue so they
   sit correctly on the dark surface and the warm light reading surface. */
.note-body--notes > h2:first-child {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 30px;
  padding: 18px 24px;
  border-radius: 16px;
  border: 1px solid var(--nv-accent-border);
  background:
    radial-gradient(150% 240% at 0% 0%, rgba(79,111,242,0.16), transparent 58%),
    linear-gradient(180deg, rgba(79,111,242,0.10), rgba(79,111,242,0.035));
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1.35;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}

/* Small glowing accent marker gives the band its header character. */
.note-body--notes > h2:first-child::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2.5px;
  transform: rotate(45deg);
  background: var(--nv-accent);
  box-shadow: 0 0 12px 1px rgba(79,111,242,0.5);
}

/* Linked high-level crumbs (Home / Programme / Board / Subject / Notes root) */
.note-breadcrumbs a {
  color: rgba(91,140,255,0.96);
  text-decoration: none;
  transition: color 0.15s;
  padding: 9px 0;  /* >=40px tap target (was ~23px) */
  border-radius: 0;
}

.note-breadcrumbs a:hover {
  color: rgba(169,190,255,0.98);
}

/* Non-linked note-tree path crumbs (middle, url=None)
   — plain white, dimmer: location context, not navigation */
.note-breadcrumbs span:not(.breadcrumb-sep):not(:last-child) {
  color: rgba(255,255,255,0.62);
  font-weight: 500;
  padding: 0;
}

/* Current page crumb (last item) — quietest of the three tiers */
.note-breadcrumbs span:not(.breadcrumb-sep):last-child {
  color: rgba(255,255,255,0.82);
  font-weight: 600;
  padding: 0;
}

.note-breadcrumbs .breadcrumb-sep {
  color: rgba(255,255,255,0.28);
  margin: 0 10px;
  padding: 0;
  font-weight: 500;
  font-size: 0.95em;
}

/* Back to resources button -- shared across every resource header (notes,
   flashcards, questions, MCQs, videos, topic landing, resource index).
   Dark glass secondary in the current ExamStudyAid product language:
   subtle periwinkle border, readable off-white text, soft hover lift. */
.note-resource-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  font-size: 0.8125rem;        /* 13px */
  font-weight: 740;
  color: #cbd7ea;
  text-decoration: none;
  padding: 7px 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 10px;
  background: rgba(8, 13, 26, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.005em;
}

.note-resource-back-btn:hover,
.note-resource-back-btn:focus-visible {
  color: #f3f7ff;
  border-color: rgba(129, 169, 255, 0.26);
  background: rgba(129, 169, 255, 0.075);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.note-resource-back-btn:focus-visible {
  outline: 2px solid rgba(120,158,255,0.72);
  outline-offset: 2px;
}

/* "Whole chapter ↑" jump — same skin as the back button, mirrored to the
   right end of the action row. On wrap it falls to its own line (back stays
   first in DOM order). */
.note-resource-back-btn--chapter {
  margin-left: auto;
}

/* Spacing when button is a direct child of the old noteviewer-main-inner shell */
.noteviewer-main-inner > .note-resource-back-btn {
  margin-bottom: 24px;
}

/* =========================
   Focus Mode — distraction-free notes reading
========================= */

/* ── Notes-scoped action row: Back on the left, Focus on the right.
   Other resource pages keep the default left-aligned .fc-page-action-row
   layout. The action row inherits .noteviewer-main-inner's reading width,
   so on ultra-wide screens it stays aligned to the centred content column. */
.fc-page-action-row--notes {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.fc-page-action-row--notes .note-resource-back-btn {
  margin-right: auto;
}

/* ── Focus mode entry button — subtle ghost pill.
   Transparent surface + var(--border) at rest. Hover lifts to the site's
   gold accent (rgba(197,160,40,…)) at low opacity. */
.note-focus-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.note-focus-toggle:hover,
.note-focus-toggle:focus-visible {
  color: var(--text);
  border-color: rgba(197, 160, 40, 0.40);
  background: rgba(197, 160, 40, 0.04);
}

.note-focus-toggle:focus-visible {
  outline: 2px solid rgba(197, 160, 40, 0.55);
  outline-offset: 2px;
}

.note-focus-toggle-icon {
  flex: 0 0 auto;
  color: currentColor;
  opacity: 0.85;
}

/* ── Dark-mode entry button — promoted from ghost to "active feature".
   Focus mode is a real product feature, not a sibling utility link, so in
   dark mode the entry pill carries a wash in the noteviewer's canonical
   brand blue (--nv-accent: #4f6ff2, defined at noteviewer.css:10390 and
   used by the h2 left accent rail at noteviewer.css:10444). This is the
   cleaner, bluer hue used on section accents — not the purple-indigo
   rgba(99,102,241,…) used by the homepage CTA. Light mode keeps the
   neutral ghost styling above. */
html.theme-dark .note-focus-toggle {
  background: rgba(79, 111, 242, 0.10);
  border-color: rgba(79, 111, 242, 0.32);
  color: var(--text);
  font-weight: 700;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

html.theme-dark .note-focus-toggle:hover,
html.theme-dark .note-focus-toggle:focus-visible {
  background: rgba(79, 111, 242, 0.18);
  border-color: rgba(79, 111, 242, 0.50);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 111, 242, 0.18);
}

html.theme-dark .note-focus-toggle:focus-visible {
  outline: 2px solid rgba(79, 111, 242, 0.55);
  outline-offset: 2px;
}

html.theme-dark .note-focus-toggle-icon {
  opacity: 1;
}

/* ── Exit focus pill — single fixed control at top-right.
   Hidden by default; revealed only under html.note-focus-mode.
   Premium dark glass: 4% white wash + var(--border) + 8px backdrop blur.
   Hover lifts to the site's gold accent (rgba(197,160,40,…)). */
.note-focus-exit {
  position: fixed;
  top: max(24px, env(safe-area-inset-top));
  right: max(32px, env(safe-area-inset-right));
  z-index: 220;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 10px 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.note-focus-exit:hover,
.note-focus-exit:focus-visible {
  color: var(--text);
  border-color: rgba(197, 160, 40, 0.40);
  background: rgba(197, 160, 40, 0.06);
}

.note-focus-exit:focus-visible {
  outline: 2px solid rgba(197, 160, 40, 0.55);
  outline-offset: 2px;
}

.note-focus-exit-icon {
  flex: 0 0 auto;
  color: currentColor;
  opacity: 0.85;
}

.note-focus-exit-label {
  flex: 0 0 auto;
}

/* ── Esc keycap — neutral, monospace, keeps its own styling on hover so it
   reads as a key rather than part of the button surface. */
.note-focus-exit-kbd {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  padding: 0 7px;
  margin-left: 1px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.30) inset;
}

/* Keep the keycap visually neutral when the surrounding button is hovered —
   don't let the gold wash bleed into the keycap. */
.note-focus-exit:hover .note-focus-exit-kbd,
.note-focus-exit:focus-visible .note-focus-exit-kbd {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
}

/* ── Active focus state — hide all global chrome and the resource header.
   .ft-theme-toggle is the floating theme button defined in styles.css. */
html.note-focus-mode .topbar,
html.note-focus-mode .nv-rail,
html.note-focus-mode .nv-rail-trigger,
html.note-focus-mode .nv-rail-backdrop,
html.note-focus-mode .nv-rail-drawer,
html.note-focus-mode .note-breadcrumbs,
html.note-focus-mode .note-resource-back-btn,
html.note-focus-mode .note-focus-toggle,
html.note-focus-mode .nt-top-progress,
html.note-focus-mode .ft-theme-toggle,
html.note-focus-mode .site-footer {
  display: none !important;
}

/* Theme toggle: Notes (and every page that is not the TQ app-shell) use the
   homepage corner — the floating control stays at the styles.css default (fixed
   bottom:24px right:24px), desktop and mobile alike. Notes used to be lifted
   here only to share the Topic-Questions offset; it has no pinned pager, so it
   now keeps the clean homepage corner. The Topic-Questions grader is the one
   exception (single-viewport app-shell with a pager pinned in the bottom
   corners): its toggle is relocated clear of that pager in grader.css
   (body:has(.tq-shell) .ft-theme-toggle). */

html.note-focus-mode .note-focus-exit {
  display: inline-flex;
}

/* ── Focus reading stage — one cohesive backdrop that fills the entire
   viewport edge-to-edge on any width. Painted via a fixed ::before layer
   so it can never be constrained by .nv-canvas's max-width, by the body's
   intrinsic height, or by any layout container's flex sizing.
   The background color itself is theme-scoped:
     - Dark: #05070d (matches html.theme-dark body at noteviewer.css:10358)
     - Light: #FFFBF5 (set in theme-light.css)
   Toggling focus mode on/off must produce zero color shift in the side
   regions on ultra-wide screens — that's the acceptance criterion. */
html.note-focus-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

html.theme-dark.note-focus-mode::before {
  background: #05070d;
}

html.note-focus-mode,
html.note-focus-mode body,
html.note-focus-mode .nv-canvas,
html.note-focus-mode .noteviewer-main {
  background: transparent !important;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Defensive flat-color guarantee for the empty viewport region.
   Audit of all gradients/shadows in noteviewer.css, styles.css,
   theme-dark.css, and noteviewer-left-rail.css confirmed that no
   focus-mode-scoped rule currently paints inside the empty viewport.
   Even so, every container between the fixed ::before backdrop and the
   content cards is explicitly stripped of background-image AND box-shadow
   here, so any future addition can't leak a vignette into the side
   regions on ultra-wide monitors. Cards (.nt-objectives-card, .note-callout,
   .note-key-idea) keep their own glows — those belong to the card, not
   the background. */
html.note-focus-mode body,
html.note-focus-mode .nv-canvas,
html.note-focus-mode .noteviewer-main,
html.note-focus-mode .noteviewer-main-inner,
html.note-focus-mode .note-body,
html.note-focus-mode .noteviewer-body {
  background-image: none !important;
  box-shadow: none !important;
}

/* ── Defensive side-border scrub for the structural focus-mode containers.
   In normal view a faint vertical line at the column's left edge can read
   as a sidebar/content seam; in focus mode (rail hidden) that line just
   bisects the viewport. Audit didn't find an explicit side border on any
   of these containers, but this guards against any cascade rule (current
   or future) painting one. Card-level borders are deliberately not in
   scope: .note-callout, .note-key-idea, .nt-objectives-card,
   .nt-objectives-main::before, .note-body h2 accent rail, and blockquotes
   keep their legitimate accents. */
html.note-focus-mode .nv-canvas,
html.note-focus-mode .noteviewer-main,
html.note-focus-mode .noteviewer-main-inner,
html.note-focus-mode .note-body,
html.note-focus-mode .noteviewer-body {
  border-left: 0 !important;
  border-right: 0 !important;
  border-inline-start: 0 !important;
  border-inline-end: 0 !important;
}

html.note-focus-mode .nv-canvas {
  display: block;
  max-width: none;
  width: 100%;
  margin: 0;
}

html.note-focus-mode .noteviewer-main {
  width: 100%;
  overflow: visible;
}

/* Suppress the noteviewer-main / noteviewer-main-inner atmospheric layers in
   focus mode — they were sized for a sidebar layout and look stretched on
   wide screens once the rail is gone. The viewport background above provides
   the only atmosphere we need. */
html.note-focus-mode .noteviewer-main::before,
html.note-focus-mode .noteviewer-main::after,
html.note-focus-mode .noteviewer-main-inner::before,
html.note-focus-mode .noteviewer-main-inner::after {
  content: none !important;
  background: none !important;
  display: none !important;
}

html.note-focus-mode .noteviewer-main-inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  /* 80px top — comfortable reading distance from the viewport top while
     clearing the fixed exit pill (24px top + ~38px height) with breathing
     room. Horizontal + bottom padding stay clamped for ultra-wide / mobile. */
  padding: 80px clamp(20px, 5vw, 64px) clamp(96px, 10vw, 140px);
  box-sizing: border-box;
}

html.note-focus-mode .nv-notes-header {
  display: none;
}

html.note-focus-mode .note-body,
html.note-focus-mode .note-body--notes,
html.note-focus-mode .noteviewer-body {
  max-width: min(100%, 1000px);
  margin-inline: auto;
}

html.note-focus-mode .note-body {
  padding-bottom: 0;
}

html.note-focus-mode .note-table-scroll,
html.note-focus-mode .note-body table,
html.note-focus-mode .note-body pre,
html.note-focus-mode .note-body img,
html.note-focus-mode .noteviewer-body table,
html.note-focus-mode .noteviewer-body pre,
html.note-focus-mode .noteviewer-body img {
  max-width: 100%;
}

/* ── Narrow viewports — stack the action row cleanly, move Exit pill to
   bottom-right with safe-area padding so it does not cover the note body. */
@media (max-width: 720px) {
  .fc-page-action-row--notes {
    justify-content: flex-start;
  }
  .fc-page-action-row--notes .note-resource-back-btn {
    margin-right: 0;
  }
  .fc-page-action-row--notes .note-focus-toggle {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .note-focus-exit {
    top: auto;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    min-height: 42px;
    padding: 8px 10px 8px 14px;
  }

  .note-focus-exit-kbd {
    display: none;
  }

  html.note-focus-mode .noteviewer-main-inner {
    padding: 64px 18px 110px;
  }
}

@media (max-width: 460px) {
  .fc-page-action-row--notes {
    flex-direction: column;
    align-items: stretch;
  }
  .fc-page-action-row--notes .note-resource-back-btn,
  .fc-page-action-row--notes .note-focus-toggle {
    width: 100%;
    margin: 0;
    justify-content: center;
  }
}

/* =========================
   Resource page header — notes detail and similar reading pages.
   Mirrors the fc-page-header / fc-page-title-row pattern used by Flashcards
   so breadcrumbs, meta, and back button share the same visual rhythm.
========================= */

.nv-resource-header {
  margin-bottom: 20px;
}

/* Breadcrumbs in their own row — full width, above the meta row */
.nv-resource-header .note-breadcrumbs {
  margin-bottom: 12px;
}

/* Meta row — program/board/subject on the left, back button on the right */
.nv-resource-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(91,140,255,0.16);
  margin-bottom: 36px;
}

/* Back button in the resource title row — sized down to match
   fc-page-title-row .note-resource-back-btn so it doesn't compete
   with the program/subject text for visual weight */
.nv-resource-title-row .note-resource-back-btn {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 11px 5px 9px;
}

.nv-resource-header--index .nv-resource-title-row {
  align-items: center;
  padding-bottom: 22px;
  margin-bottom: 32px;
}

.nv-resource-header--index .note-resource-back-btn {
  display: block;
  width: fit-content;
  margin: 16px 0 6px;
}

/* Title + meta group — left side of nv-resource-title-row (used by index pages) */
.nv-resource-title-group {
  flex: 1;
  min-width: 0;
}

.nv-resource-h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--text);
  line-height: 1.2;
}

/* Stack vertically on small screens */
@media (max-width: 520px) {
  .nv-resource-title-row {
    flex-direction: column;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 24px;
  }

  .nv-resource-h1 {
    font-size: 1.625rem;
  }
}

/* =========================
   Hero metadata block (above markdown H1)
========================= */

.nv-hero {
  margin-bottom: 36px;
  padding-bottom: 22px;
  /* Indigo-tinted metadata divider — consistent with the note's accent language */
  border-bottom: 1px solid rgba(91,140,255,0.18);
}

.nv-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Program/board tag — inline uppercase label */
.nv-hero-tag {
  font-size: 0.8125rem; /* 13px — up from 12px, more intentional */
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(169,190,255,0.82); /* up from 0.72 */
}

/* Separator dot */
.nv-hero-sep {
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255,255,255,0.24);
  user-select: none;
}

/* Subject text — slightly softer than the tags */
.nv-hero-subject {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52); /* up from 0.42 */
}

/* =========================
   Main readable notes styling
========================= */

.note-body {
  /* Controlled reading column — comfortable measure, no dead air on the right. */
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 80px 0;
  /* Restored to the original premium scale (≈17.25–18.65px) plus a hair
     of additional weight at the floor. The note body is the product; it
     must feel confident, not muted. */
  font-size: clamp(1.078rem, 1.015rem + 0.14vw, 1.166rem);
  /* 1.72 holds the calm rhythm without inflating paragraphs into slabs. */
  line-height: 1.72;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.note-body code {
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.875em;
  font-family: "SF Mono", "Fira Code", monospace;
}

.note-body pre {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 16px;
}

/* new landing/index template often renders html inside .noteviewer-body,
   so style both .note-body and content inside .noteviewer-body */
.note-body,
.noteviewer-body {
  font-size: clamp(1.078rem, 1.015rem + 0.14vw, 1.166rem); /* matched to restored note-body scale */
}

.note-body h1,
.note-body h2,
.note-body h3,
.noteviewer-body h1,
.noteviewer-body h2,
.noteviewer-body h3 {
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.2px;
}

/* Hide the markdown-rendered h1 — the title is now in .nt-hero-title.
   Two selectors so the rule applies whether the body H1 sits as a direct
   child of .note-body (legacy / non-notes resources) or wrapped inside
   .note-prose-surface (notes, after wrap_prose_surface()). Without the
   second selector the wrapped H1 surfaces as a large all-caps "1.6:
   NUCLEIC ACIDS" chapter-prefix at the top of each note. */
.note-body > h1:first-of-type,
.note-body > .note-prose-surface > h1:first-of-type { display: none; }

/* Gradient treatment targets markdown-rendered h1s only.                         */
/* .topic-landing-title is a template UI heading — excluded so it keeps its own   */
/* 1.875rem size and plain text colour without the note-content gradient/size.     */
.note-body h1:not(.topic-landing-title),
.noteviewer-body h1:not(.topic-landing-title) {
  font-size: 44px;
  line-height: 1.14;
  margin: 0 0 50px 0;
  padding-bottom: 30px;
  /* Stronger indigo bottom rule — anchors the title without feeling like a
     hard divider. Tighter, more intentional than a plain white line. */
  border-bottom: 1px solid rgba(91,140,255,0.20);
  font-weight: 800;
  letter-spacing: -0.038em;
  max-width: 680px;
  /* Richer, slightly warmer gradient: bright white → cool lavender → soft indigo.
     More depth and atmosphere than the previous flat two-stop gradient. */
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(210,218,255,0.96) 38%,
    rgba(180,194,255,0.91) 62%,
    rgba(148,164,254,0.85) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.note-body h2,
.noteviewer-body h2 {
  font-size: clamp(1.45rem, 1.18rem + 0.55vw, 1.7rem); /* responsive section anchor */
  line-height: 1.28;
  font-weight: 700;
  /* Top margin: 64px reads as a clean section break — 72px isolated the
     heading from the prose that follows. Bottom margin trimmed to 16px so
     the first paragraph feels like the section's opening, not an island. */
  margin: 64px 0 16px 0;
  padding: 12px 22px 12px 18px;
  border-left: 3px solid rgba(91,140,255,0.92);
  /* Glow wash fading right: reads as atmospheric light from the accent edge,
     not a rectangular label block. Same visual anchor, less clinical density. */
  background: linear-gradient(
    90deg,
    rgba(91,140,255,0.16) 0%,
    rgba(91,140,255,0.08) 44%,
    rgba(91,140,255,0.02) 76%,
    transparent 100%
  );
  border-radius: 0 8px 8px 0;
  letter-spacing: -0.022em;
  color: rgba(255,255,255,0.98);
  box-shadow: inset 0 1px 0 rgba(169,190,255,0.09);
}

/* First section heading immediately after the article title — no double gap */
.note-body h1:not(.topic-landing-title) + h2,
.noteviewer-body h1:not(.topic-landing-title) + h2 {
  margin-top: 40px;
}

.note-body h3,
.noteviewer-body h3 {
  /* Editorial subhead — hierarchy through size, weight, and tonal depth. */
  font-size: clamp(1.25rem, 1.08rem + 0.35vw, 1.45rem); /* responsive, controlled */
  line-height: 1.32;
  font-weight: 700;
  margin: 38px 0 12px 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  letter-spacing: -0.022em; /* slightly crisper tracking — feels more premium */
  color: rgba(228, 234, 255, 0.94); /* fractionally cooler/brighter — more presence */
  /* Barely-perceptible indigo bloom: adds depth without visible decoration */
  text-shadow: 0 0 28px rgba(91, 140, 255, 0.07);
  position: static;
}

/* No decorative marker — the size and weight speak for themselves. */
.note-body h3::before,
.noteviewer-body h3::before {
  display: none;
}

.note-body h4,
.noteviewer-body h4 {
  font-size: 0.8125rem; /* 13px — properly readable structural label */
  font-weight: 700;
  margin: 34px 0 10px 0;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* Bumped to 0.80 — MOMENTUM: / IMPULSE: labels must be instantly scannable */
  color: rgba(169,190,255,0.80);
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(91,140,255,0.15);
}

.note-body p,
.noteviewer-body p {
  /* Tight, intentional rhythm: enough breathing between paragraphs to keep
     them separable, but tight enough that long prose stops reading as a
     stack of slabs. Body size matches the restored note-body clamp. */
  margin-block: 0 1.24em;
  font-size: clamp(1.078rem, 1.015rem + 0.14vw, 1.166rem);
  line-height: 1.72;
  /* Slightly more luminous than --nv-text (0.90) — warmer reading contrast */
  color: rgba(242,244,255,0.92);
}

/* ── Unordered lists: editorial dash bullets with delicate left guide ── */
.note-body ul,
.noteviewer-body ul {
  list-style: none;
  padding-left: 18px;
  margin: 0 0 28px;
  color: var(--nv-text);
  border-left: 1px solid rgba(169,190,255,0.20);
}

.note-body ul > li,
.noteviewer-body ul > li {
  position: relative;
  padding-left: 22px;
  margin: 10px 0;
  line-height: 1.70;
  color: var(--nv-text);
}

.note-body ul > li::before,
.noteviewer-body ul > li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1.70;
  color: rgba(169,190,255,0.70); /* slightly more visible — harmonises with H4 at 0.80 */
  font-weight: 600;
}

/* Nested lists — even more delicate guide and markers */
.note-body ul ul,
.noteviewer-body ul ul {
  padding-left: 18px;
  margin: 8px 0 4px;
  border-left-color: rgba(169,190,255,0.09);
}

.note-body ul ul > li::before,
.noteviewer-body ul ul > li::before {
  content: "\2013";
  color: rgba(169,190,255,0.34);
}

/* Remove structural rail on lists inside callout bodies — they have their own left border */
.note-body .callout-body ul,
.noteviewer-body .callout-body ul {
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Summaries resource pages — reuse the notes editorial system
   ───────────────────────────────────────────────────────────────────────────
   The body of every summary is wrapped in <div class="note-prose-surface">
   by wrap_prose_surface() (rendering.py), and the first <p> after each
   h2/h3 is tagged with class="note-lead" by tag_lead_paragraphs(). This
   means the *entire* notes premium prose cascade ( signature h3 dot +
   trailing rule, h2 brand-blue rail + bottom hairline, .note-lead voice,
   brand-blue inline strong, prose typography ) applies to summaries
   verbatim — see the extended notes selectors further down this file.
   This block keeps only the small set of summary-specific affordances
   that don't exist on notes:
     · KEY DEFINITION callout-definition card (a flavoured callout)
     · Pandoc-style one-column "key definition" tables promoted to cards
     · h1 hide (matches notes' behaviour for the markdown title)
     · A few page-header layout tweaks
   ═══════════════════════════════════════════════════════════════════════════ */
body:has(.note-body--summaries) .nv-notes-header {
  margin-bottom: clamp(28px, 4vw, 44px);
}

body:has(.note-body--summaries) .fc-page-h1 {
  letter-spacing: -0.045em;
}

.note-body--summaries {
  /* Periwinkle primary + indigo secondary. Both intentionally on the cool
     side of the spectrum (H≈220°/222°), well away from teal (H≈170°), so
     summaries don't read as colour-coded like Questions. Earlier passes
     used a sky-blue secondary (96,165,250 ≈ H=210°) which read teal-ish
     at low alpha against the dark navy ground; the new indigo secondary
     (122,142,232 ≈ H=228°) sits closer to the periwinkle and the brand
     blue used for notes' inline term emphasis. */
  --summary-accent-rgb: 129, 169, 255;
  --summary-blue-rgb: 122, 142, 232;
}

.note-body--summaries > h1:first-of-type,
.note-body--summaries > .note-prose-surface > h1:first-of-type {
  display: none;
}

/* ── KEY DEFINITION — summary-flavour callout in the notes .note-key-idea
   family. Same geometry / weight as .note-key-idea (margin 18-24px, padding
   14-22px, 12px radius, 1px slate + 3px accent left rail, low-alpha
   gradient, subtle inset + tiny outer shadow). Only the accent hue shifts
   to periwinkle so the card stays in the cool palette but reads as a
   member of the notes callout family rather than a dominant summary panel.
   The base .callout-definition is rose/pink for notes; this override
   recolours it to periwinkle and tones the shadow/padding down. */
.note-body--summaries blockquote.callout-definition,
.note-body--summaries .note-callout.note-callout--definition {
  margin: 22px 0 26px;
  padding: 14px 22px 14px 20px;
  border-radius: 12px;
  border-color: rgba(148, 163, 184, 0.10);
  border-left: 3px solid rgba(var(--summary-accent-rgb), 0.62);
  background: linear-gradient(110deg,
    rgba(99, 130, 230, 0.060) 0%,
    rgba(15, 23, 42, 0.46) 68%,
    rgba(15, 23, 42, 0.20) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 2px 10px rgba(0, 0, 0, 0.16);
}

/* The pandoc-style definition row has an icon column on the left; in the
   notes callout family the equivalent component (.note-key-idea) doesn't
   show an icon at all — the eyebrow label carries the meaning. Hide the
   icon column so the card reads at the same weight as a key-idea strip. */
.note-body--summaries blockquote.callout-definition .callout-icon-col {
  display: none;
}

.note-body--summaries blockquote.callout-definition .callout-body p,
.note-body--summaries .note-callout.note-callout--definition > span {
  color: rgba(229, 235, 249, 0.93);
  font-size: 0.985rem;
  line-height: 1.66;
  font-weight: 500;
}

.note-body--summaries blockquote.callout-definition .callout-body p:first-child > strong:first-child,
.note-body--summaries .note-callout.note-callout--definition > strong {
  display: block;
  margin-bottom: 5px;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(var(--summary-accent-rgb), 0.86);
  border: 0;
}

/* ── Review sections: Quick Recap + Can I...? Progress Check ── */
.note-review-section {
  margin: 76px 0 64px;
}

.note-review-section + .note-review-section {
  margin-top: 56px;
}

.note-review-section + hr {
  display: none;
}

/* Layout half of theme-dark.css's body:has() review-section rule, hoisted so
   light reflows identically; each theme supplies its own border-top-color. */
body:has(.note-body) .note-review-section,
body:has(.noteviewer-body) .note-review-section {
  border-top-width: 1px;
  border-top-style: solid;
  padding-top: 1.25em;
}

html.theme-light body:has(.note-body) .note-review-section,
html.theme-light body:has(.noteviewer-body) .note-review-section {
  border-top-color: rgba(15, 23, 42, 0.08);
}

.note-body .note-review-heading,
.noteviewer-body .note-review-heading {
  margin: 0 0 22px 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: rgba(248, 250, 255, 0.96);
  font-family: Inter, Satoshi, Geist, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: clamp(1.1rem, 2.0vw, 1.375rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.2;
  text-shadow: none;
}

.note-review-panel {
  padding: 28px 30px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: none;
}

.note-review-section--recap .note-review-panel {
  border-color: rgba(45,212,191,0.15);
}

.note-review-section--progress .note-review-panel {
  border-color: rgba(91,140,255,0.15);
}

.note-body .note-review-kicker,
.noteviewer-body .note-review-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.note-review-kicker::before {
  content: '';
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.note-review-section--recap .note-review-kicker {
  color: var(--teal, #2DD4BF);
}

.note-review-section--progress .note-review-kicker {
  color: var(--text-link); /* PT-09 */
}

.note-body .note-review-list,
.noteviewer-body .note-review-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border-left: 0;
  list-style: none;
  color: var(--text-muted, rgba(220,226,245,0.62));
}

.note-body .note-review-list > li,
.noteviewer-body .note-review-list > li {
  position: relative;
  margin: 0;
  padding-left: 28px;
  color: inherit;
  font-size: 1rem;
  line-height: 1.68;
}

.note-review-section--progress .note-review-list > li {
  cursor: pointer;
  user-select: none;
}

.note-review-section--progress .note-review-list > li:hover::before {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.06);
}

.note-review-section--progress .note-review-list > li.is-checked::before {
  border-color: #22c55e;
  background: transparent;
}

.note-review-section--progress .note-review-list > li.is-checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.42em;
  width: 5px;
  height: 9px;
  border-right: 2px solid #22c55e;
  border-bottom: 2px solid #22c55e;
  transform: rotate(45deg);
  z-index: 1;
}

.note-body .note-review-list > li::before,
.noteviewer-body .note-review-list > li::before {
  position: absolute;
  left: 0;
  top: 0.06em;
  line-height: 1.62;
  pointer-events: none;
}

.note-review-section--recap .note-review-list > li::before {
  content: "\2022";
  color: var(--teal, #2DD4BF);
  font-size: 0.9em;
  font-weight: 800;
}

.note-review-section--progress .note-review-list > li::before {
  content: '';
  top: 0.18em;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--accent-border, rgba(169,190,255,0.28));
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* ── Ordered lists: accent-coloured counters ── */
.note-body ol,
.noteviewer-body ol {
  padding-left: 28px;
  margin: 0 0 28px;
  color: var(--nv-text);
}

.note-body ol > li,
.noteviewer-body ol > li {
  margin: 10px 0;
  line-height: 1.70;
  color: var(--nv-text);
  padding-left: 4px;
}

.note-body ol > li::marker,
.noteviewer-body ol > li::marker {
  color: rgba(169,190,255,0.78);
  font-weight: 700;
  font-size: 0.95em;
}

/* Slight breathing gap between a heading and its list — a 2px collapse
   looked too tight on learning-objectives / guide sections. 6px is still
   close but reads as intentional section-opener rather than an omission. */
.note-body h2 + ul,
.note-body h2 + ol,
.note-body h3 + ul,
.note-body h3 + ol,
.noteviewer-body h2 + ul,
.noteviewer-body h2 + ol,
.noteviewer-body h3 + ul,
.noteviewer-body h3 + ol {
  margin-top: 6px;
}

/* ── Inline emphasis ── */
.note-body strong,
.noteviewer-body strong {
  /* Pure white — maximum contrast within the dark surface.
     Important terms must punch through the body text hierarchy. */
  color: rgba(255,255,255,1.0);
  font-weight: 700;
}

.note-body em,
.noteviewer-body em {
  font-style: italic;
  color: rgba(220,228,255,0.84); /* very slight indigo tint — more editorial than plain grey */
}

/* Links */
.note-body a,
.noteviewer-body a {
  color: var(--nv-accent);
  text-decoration: none;
  font-weight: 650;
}

.note-body a:hover,
.noteviewer-body a:hover {
  color: #8fe6ff;
  text-decoration: underline;
}

/* Blockquotes — base style (generic, unlabelled).                           */
/* .note-callout blockquotes are excluded — they have their own complete     */
/* styling and must not inherit the white left-border / grey background.     */
.note-body blockquote:not(.note-callout),
.noteviewer-body blockquote:not(.note-callout) {
  margin: 36px 0;
  padding: 20px 26px;
  border-left: 3px solid rgba(169,190,255,0.30); /* indigo-tinted, not plain white */
  background: rgba(91,140,255,0.035);
  border-radius: 0 12px 12px 0;
  color: rgba(242,244,255,0.88);
  box-shadow: inset 0 1px 0 rgba(169,190,255,0.06);
}

.note-body blockquote p:last-child,
.noteviewer-body blockquote p:last-child {
  margin-bottom: 0;
}

/* ── Typed callout base — card shell with flex icon + body layout ── */
.note-body blockquote[class^="callout-"],
.noteviewer-body blockquote[class^="callout-"] {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  /* More arrival breathing room above — callouts feel intentionally inserted,
     not dropped into the flow. Less margin below to keep reading momentum. */
  margin: 52px 0 44px;
  padding: 26px 30px 26px 26px;
  border-radius: 18px;
  border-left: 4px solid rgba(255,255,255,0.12); /* overridden per type */
  background: rgba(9, 11, 22, 0.82); /* overridden per type */
  /* Three-layer shadow system: tight contact → ambient elevation → diffuse halo */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.34),
    0 24px 56px rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.90);
}

/* Icon column — empty div, content + colors set per callout type */
.note-body .callout-icon-col,
.noteviewer-body .callout-icon-col {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem; /* larger glyph — more presence */
  line-height: 1;
  margin-top: 2px; /* optically align with the label baseline */
  font-style: normal;
}

/* Body column */
.note-body .callout-body,
.noteviewer-body .callout-body {
  flex: 1;
  min-width: 0;
}

/* Callout body paragraphs — explicitly set so they feel as comfortable as note body */
.note-body .callout-body p,
.noteviewer-body .callout-body p {
  font-size: 1.035rem;   /* aligned with note-body reduction for visual cohesion */
  line-height: 1.72;     /* slightly airier than body (1.70) — callouts breathe a hair more */
  color: rgba(255,255,255,0.90);
  margin: 0 0 10px;
}

.note-body .callout-body p:last-child,
.noteviewer-body .callout-body p:last-child {
  margin-bottom: 0;
}

/* Shared callout label — first <strong> of first <p> inside the body column.
   This IS the heading of the callout card — it must look like one. */
.note-body blockquote[class^="callout-"] .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote[class^="callout-"] .callout-body p:first-child > strong:first-child {
  font-size: 0.8125rem; /* 13px — an actual label size, not a 11px whisper */
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 11px;
  padding-bottom: 11px;
  /* Separator between label and body — creates internal card hierarchy */
  border-bottom: 1px solid rgba(255,255,255,0.07); /* overridden per type for tonal match */
}

/* ── Callout: Key Point — indigo ── */
.note-body blockquote.callout-key-point,
.noteviewer-body blockquote.callout-key-point {
  background: linear-gradient(110deg, rgba(91,140,255,0.12) 0%, rgba(91,140,255,0.06) 44%, transparent 100%);
  border-left-color: rgba(91,140,255,0.90);
  box-shadow:
    inset 0 1px 0 rgba(169,190,255,0.13),
    inset 0 0 0 1px rgba(91,140,255,0.05),
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32),
    0 0 56px rgba(91,140,255,0.08);
}
.note-body .callout-key-point .callout-icon-col,
.noteviewer-body .callout-key-point .callout-icon-col {
  background: rgba(91,140,255,0.16);
  border: 1px solid rgba(91,140,255,0.30);
  color: rgba(169,190,255,0.96);
  box-shadow: inset 0 1px 0 rgba(169,190,255,0.12), 0 0 12px rgba(91,140,255,0.18);
}
.note-body .callout-key-point .callout-icon-col::before,
.noteviewer-body .callout-key-point .callout-icon-col::before { content: "\2605"; }
.note-body blockquote.callout-key-point .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote.callout-key-point .callout-body p:first-child > strong:first-child {
  color: rgba(169,190,255,0.98);
  border-bottom-color: rgba(91,140,255,0.20);
}

/* ── Callout: Examiner Insight — violet/indigo (elevated, insider-guidance feel) ── */
/* Redesigned from teal to premium violet: more depth, more "exclusive knowledge" */
.note-body blockquote.callout-examiner,
.noteviewer-body blockquote.callout-examiner {
  /* Gradient background: indigo wash from left edge to transparent — feels like
     a glow source from the accent border, not a flat tinted box */
  background: linear-gradient(
    110deg,
    rgba(91,140,255,0.13) 0%,
    rgba(91,140,255,0.07) 40%,
    rgba(91,140,255,0.04) 70%,
    transparent 100%
  );
  border-left-color: rgba(132,182,255,0.90);
  box-shadow:
    inset 0 1px 0 rgba(132,182,255,0.14),
    inset 0 0 0 1px rgba(91,140,255,0.06),
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32),
    0 0 64px rgba(91,140,255,0.08); /* faint violet halo — premium depth */
}
.note-body .callout-examiner .callout-icon-col,
.noteviewer-body .callout-examiner .callout-icon-col {
  background: rgba(91,140,255,0.16);
  border: 1px solid rgba(132,182,255,0.30);
  color: rgba(169,190,255,0.96);
  /* Subtle inner glow on the badge */
  box-shadow: inset 0 1px 0 rgba(169,190,255,0.12), 0 0 12px rgba(91,140,255,0.20);
}
.note-body .callout-examiner .callout-icon-col::before,
.noteviewer-body .callout-examiner .callout-icon-col::before { content: "\25C9"; }
.note-body blockquote.callout-examiner .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote.callout-examiner .callout-body p:first-child > strong:first-child {
  color: var(--text-link); /* PT-10 */
  border-bottom-color: rgba(91,140,255,0.20);
}
.note-body .callout-examiner .callout-body p,
.noteviewer-body .callout-examiner .callout-body p {
  color: rgba(212,222,255,0.88); /* very slight violet tint to body text — atmospheric */
}

/* ── Callout: Misconception — warm amber, refined academic warning ── */
/* Not a notification banner — a serious scholarly correction, rendered elegantly */
.note-body blockquote.callout-misconception,
.noteviewer-body blockquote.callout-misconception {
  background: linear-gradient(
    110deg,
    rgba(245,158,11,0.12) 0%,
    rgba(251,191,36,0.07) 42%,
    rgba(251,191,36,0.03) 72%,
    transparent 100%
  );
  border-left-color: rgba(251,191,36,0.88);
  box-shadow:
    inset 0 1px 0 rgba(253,224,71,0.12),
    inset 0 0 0 1px rgba(251,191,36,0.05),
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32),
    0 0 64px rgba(245,158,11,0.07); /* warm amber halo */
}
.note-body .callout-misconception .callout-icon-col,
.noteviewer-body .callout-misconception .callout-icon-col {
  background: rgba(245,158,11,0.16);
  border: 1px solid rgba(251,191,36,0.32);
  color: rgba(253,224,71,0.96);
  box-shadow: inset 0 1px 0 rgba(253,230,138,0.14), 0 0 12px rgba(245,158,11,0.18);
}
.note-body .callout-misconception .callout-icon-col::before,
.noteviewer-body .callout-misconception .callout-icon-col::before { content: "\26A0"; }
.note-body blockquote.callout-misconception .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote.callout-misconception .callout-body p:first-child > strong:first-child {
  color: rgba(253,224,71,0.98);
  border-bottom-color: rgba(245,158,11,0.22);
}
.note-body .callout-misconception .callout-body p,
.noteviewer-body .callout-misconception .callout-body p {
  color: rgba(255,251,235,0.88); /* very slight warm tint — amber family warmth */
}

/* ── Callout: Exam Tip — emerald ── */
.note-body blockquote.callout-exam-tip,
.noteviewer-body blockquote.callout-exam-tip {
  background: linear-gradient(110deg, rgba(52,211,153,0.10) 0%, rgba(52,211,153,0.05) 44%, transparent 100%);
  border-left-color: rgba(52,211,153,0.86);
  box-shadow:
    inset 0 1px 0 rgba(110,231,183,0.13),
    inset 0 0 0 1px rgba(52,211,153,0.04),
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32),
    0 0 56px rgba(52,211,153,0.07);
}
.note-body .callout-exam-tip .callout-icon-col,
.noteviewer-body .callout-exam-tip .callout-icon-col {
  background: rgba(52,211,153,0.14);
  border: 1px solid rgba(52,211,153,0.28);
  color: rgba(110,231,183,0.96);
  box-shadow: inset 0 1px 0 rgba(167,243,208,0.12), 0 0 12px rgba(52,211,153,0.16);
}
.note-body .callout-exam-tip .callout-icon-col::before,
.noteviewer-body .callout-exam-tip .callout-icon-col::before { content: "\25CE"; }
.note-body blockquote.callout-exam-tip .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote.callout-exam-tip .callout-body p:first-child > strong:first-child {
  color: rgba(110,231,183,0.98);
  border-bottom-color: rgba(52,211,153,0.18);
}

/* ── Callout: Recap — violet ── */
.note-body blockquote.callout-recap,
.noteviewer-body blockquote.callout-recap {
  background: linear-gradient(110deg, rgba(132,182,255,0.11) 0%, rgba(132,182,255,0.05) 44%, transparent 100%);
  border-left-color: rgba(132,182,255,0.86);
  box-shadow:
    inset 0 1px 0 rgba(169,190,255,0.13),
    inset 0 0 0 1px rgba(132,182,255,0.04),
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32),
    0 0 56px rgba(132,182,255,0.07);
}
.note-body .callout-recap .callout-icon-col,
.noteviewer-body .callout-recap .callout-icon-col {
  background: rgba(132,182,255,0.15);
  border: 1px solid rgba(132,182,255,0.28);
  color: rgba(169,190,255,0.96);
  box-shadow: inset 0 1px 0 rgba(190,205,255,0.12), 0 0 12px rgba(132,182,255,0.16);
}
.note-body .callout-recap .callout-icon-col::before,
.noteviewer-body .callout-recap .callout-icon-col::before { content: "\21BA"; }
.note-body blockquote.callout-recap .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote.callout-recap .callout-body p:first-child > strong:first-child {
  color: var(--text-link); /* PT-10 */
  border-bottom-color: rgba(132,182,255,0.20);
}

/* ── Callout: Progress Check — sky ── */
.note-body blockquote.callout-progress-check,
.noteviewer-body blockquote.callout-progress-check {
  background: linear-gradient(110deg, rgba(56,189,248,0.10) 0%, rgba(56,189,248,0.05) 44%, transparent 100%);
  border-left-color: rgba(56,189,248,0.84);
  box-shadow:
    inset 0 1px 0 rgba(125,211,252,0.13),
    inset 0 0 0 1px rgba(56,189,248,0.04),
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32),
    0 0 56px rgba(56,189,248,0.07);
}
.note-body .callout-progress-check .callout-icon-col,
.noteviewer-body .callout-progress-check .callout-icon-col {
  background: rgba(56,189,248,0.14);
  border: 1px solid rgba(56,189,248,0.26);
  color: rgba(125,211,252,0.96);
  box-shadow: inset 0 1px 0 rgba(186,230,253,0.12), 0 0 12px rgba(56,189,248,0.16);
}
.note-body .callout-progress-check .callout-icon-col::before,
.noteviewer-body .callout-progress-check .callout-icon-col::before { content: "\2713"; }
.note-body blockquote.callout-progress-check .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote.callout-progress-check .callout-body p:first-child > strong:first-child {
  color: rgba(125,211,252,0.98);
  border-bottom-color: rgba(56,189,248,0.18);
}

/* ── Callout: Definition — rose ── */
.note-body blockquote.callout-definition,
.noteviewer-body blockquote.callout-definition {
  background: linear-gradient(110deg, rgba(251,113,133,0.10) 0%, rgba(251,113,133,0.05) 44%, transparent 100%);
  border-left-color: rgba(251,113,133,0.84);
  box-shadow:
    inset 0 1px 0 rgba(253,164,175,0.13),
    inset 0 0 0 1px rgba(251,113,133,0.04),
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32),
    0 0 56px rgba(251,113,133,0.07);
}
.note-body .callout-definition .callout-icon-col,
.noteviewer-body .callout-definition .callout-icon-col {
  background: rgba(251,113,133,0.14);
  border: 1px solid rgba(251,113,133,0.26);
  color: rgba(253,164,175,0.96);
  box-shadow: inset 0 1px 0 rgba(254,205,211,0.12), 0 0 12px rgba(251,113,133,0.16);
}
.note-body .callout-definition .callout-icon-col::before,
.noteviewer-body .callout-definition .callout-icon-col::before { content: "\2261"; }
.note-body blockquote.callout-definition .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote.callout-definition .callout-body p:first-child > strong:first-child {
  color: rgba(253,164,175,0.98);
  border-bottom-color: rgba(251,113,133,0.18);
}

/* ── Callout: Illustrative Example — pink-magenta ── */
.note-body blockquote.callout-illustrative-example,
.noteviewer-body blockquote.callout-illustrative-example {
  background: linear-gradient(110deg, rgba(236,72,153,0.11) 0%, rgba(236,72,153,0.05) 44%, transparent 100%);
  border-left-color: rgba(244,114,182,0.88);
  box-shadow:
    inset 0 1px 0 rgba(249,168,212,0.13),
    inset 0 0 0 1px rgba(236,72,153,0.05),
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32),
    0 0 56px rgba(236,72,153,0.07);
}
.note-body .callout-illustrative-example .callout-icon-col,
.noteviewer-body .callout-illustrative-example .callout-icon-col {
  background: rgba(236,72,153,0.15);
  border: 1px solid rgba(244,114,182,0.28);
  color: rgba(249,168,212,0.96);
  box-shadow: inset 0 1px 0 rgba(251,207,232,0.12), 0 0 12px rgba(236,72,153,0.16);
}
.note-body .callout-illustrative-example .callout-icon-col::before,
.noteviewer-body .callout-illustrative-example .callout-icon-col::before { content: "\25C6"; }
.note-body blockquote.callout-illustrative-example .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote.callout-illustrative-example .callout-body p:first-child > strong:first-child {
  color: rgba(249,168,212,0.98);
  border-bottom-color: rgba(236,72,153,0.18);
}

/* ── Callout: Out of Scope — red/crimson ── */
.note-body blockquote.callout-out-of-scope,
.noteviewer-body blockquote.callout-out-of-scope {
  background: linear-gradient(110deg, rgba(239,68,68,0.11) 0%, rgba(239,68,68,0.05) 44%, transparent 100%);
  border-left-color: rgba(248,113,113,0.88);
  box-shadow:
    inset 0 1px 0 rgba(252,165,165,0.13),
    inset 0 0 0 1px rgba(239,68,68,0.05),
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32),
    0 0 56px rgba(239,68,68,0.07);
}
.note-body .callout-out-of-scope .callout-icon-col,
.noteviewer-body .callout-out-of-scope .callout-icon-col {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(248,113,113,0.28);
  color: rgba(252,165,165,0.96);
  box-shadow: inset 0 1px 0 rgba(254,202,202,0.12), 0 0 12px rgba(239,68,68,0.16);
}
.note-body .callout-out-of-scope .callout-icon-col::before,
.noteviewer-body .callout-out-of-scope .callout-icon-col::before { content: "\2298"; }
.note-body blockquote.callout-out-of-scope .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote.callout-out-of-scope .callout-body p:first-child > strong:first-child {
  color: rgba(252,165,165,0.98);
  border-bottom-color: rgba(239,68,68,0.18);
}
.note-body .callout-out-of-scope .callout-body p,
.noteviewer-body .callout-out-of-scope .callout-body p {
  color: rgba(254,242,242,0.88);
}

/* ════════════════════════════════════════════════════════════════════════════
   Inline callouts — generated by promote_*_callouts() in rendering.py
   Triggered by: bold, emoji-plain, or bare label-colon paragraph patterns.
   Five variants:
     note-callout--misconception   (amber)
     note-callout--insight         (violet)
     note-callout--example         (pink-magenta)
     note-callout--out-of-scope    (red)
     note-callout--exam-tip        (blue)
════════════════════════════════════════════════════════════════════════════ */

/* ── Shared shell ──────────────────────────────────────────────────────── */
.note-body .note-callout,
.noteviewer-body .note-callout {
  position: relative;
  display: block;
  padding: 18px 22px 18px 58px;
  margin: 44px 0;
  border-width: 1px 1px 1px 4px;
  border-style: solid;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 8px rgba(0,0,0,0.24),
    0 8px 28px rgba(0,0,0,0.28);
}

/* Circular badge — icon glyph set per variant */
.note-body .note-callout::before,
.noteviewer-body .note-callout::before {
  position: absolute;
  left: 15px;
  top: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  text-align: center;
  line-height: 26px;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
}

/* Label — the heading of the inline callout */
.note-body .note-callout > strong,
.noteviewer-body .note-callout > strong {
  display: block;
  font-size: 0.8125rem; /* 13px — matches blockquote callout label size */
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  line-height: 1.3;
}

/* Body text */
.note-body .note-callout > span,
.noteviewer-body .note-callout > span {
  display: block;
  font-size: 1rem; /* 16px — comfortable inline callout reading */
  line-height: 1.72;
  color: rgba(255,255,255,0.88);
}

/* ── Variant: Misconception — warm amber ── */
.note-body .note-callout.note-callout--misconception,
.noteviewer-body .note-callout.note-callout--misconception {
  background: linear-gradient(110deg, rgba(245,158,11,0.11) 0%, rgba(251,191,36,0.05) 55%, transparent 100%);
  border-color: rgba(245,158,11,0.18);
  border-left-color: rgba(251,191,36,0.82);
  box-shadow:
    inset 0 1px 0 rgba(253,224,71,0.10),
    0 2px 8px rgba(0,0,0,0.24),
    0 8px 28px rgba(0,0,0,0.28),
    0 0 48px rgba(245,158,11,0.06);
}

.note-body .note-callout.note-callout--misconception::before,
.noteviewer-body .note-callout.note-callout--misconception::before {
  content: "!";
  background: rgba(245,158,11,0.16);
  color: rgba(253,224,71,0.96);
  box-shadow: inset 0 1px 0 rgba(253,230,138,0.14);
}

.note-body .note-callout.note-callout--misconception > strong,
.noteviewer-body .note-callout.note-callout--misconception > strong {
  color: rgba(253,224,71,0.95);
  border-bottom-color: rgba(245,158,11,0.20);
}

.note-body .note-callout.note-callout--misconception > span,
.noteviewer-body .note-callout.note-callout--misconception > span {
  color: rgba(255,251,235,0.88);
}

/* ── Variant: Examiner Insight — violet/indigo ── */
.note-body .note-callout.note-callout--insight,
.noteviewer-body .note-callout.note-callout--insight {
  background: linear-gradient(110deg, rgba(91,140,255,0.12) 0%, rgba(91,140,255,0.05) 55%, transparent 100%);
  border-color: rgba(91,140,255,0.18);
  border-left-color: rgba(132,182,255,0.84);
  box-shadow:
    inset 0 1px 0 rgba(169,190,255,0.12),
    0 2px 8px rgba(0,0,0,0.24),
    0 8px 28px rgba(0,0,0,0.28),
    0 0 48px rgba(91,140,255,0.07);
}

.note-body .note-callout.note-callout--insight::before,
.noteviewer-body .note-callout.note-callout--insight::before {
  content: "\2726";
  background: rgba(91,140,255,0.16);
  color: rgba(169,190,255,0.96);
  box-shadow: inset 0 1px 0 rgba(190,205,255,0.14);
}

.note-body .note-callout.note-callout--insight > strong,
.noteviewer-body .note-callout.note-callout--insight > strong {
  color: var(--text-link); /* PT-10 */
  border-bottom-color: rgba(91,140,255,0.22);
}

.note-body .note-callout.note-callout--insight > span,
.noteviewer-body .note-callout.note-callout--insight > span {
  color: rgba(212,222,255,0.88);
}

/* ── Variant: Illustrative Example — pink-magenta ── */
.note-body .note-callout.note-callout--example,
.noteviewer-body .note-callout.note-callout--example {
  background: linear-gradient(110deg, rgba(236,72,153,0.11) 0%, rgba(244,114,182,0.05) 55%, transparent 100%);
  border-color: rgba(236,72,153,0.18);
  border-left-color: rgba(244,114,182,0.82);
  box-shadow:
    inset 0 1px 0 rgba(249,168,212,0.10),
    0 2px 8px rgba(0,0,0,0.24),
    0 8px 28px rgba(0,0,0,0.28),
    0 0 48px rgba(236,72,153,0.06);
}
.note-body .note-callout.note-callout--example::before,
.noteviewer-body .note-callout.note-callout--example::before {
  content: "\25C6";
  background: rgba(236,72,153,0.16);
  color: rgba(249,168,212,0.96);
  box-shadow: inset 0 1px 0 rgba(251,207,232,0.14);
}
.note-body .note-callout.note-callout--example > strong,
.noteviewer-body .note-callout.note-callout--example > strong {
  color: rgba(249,168,212,0.95);
  border-bottom-color: rgba(236,72,153,0.20);
}
.note-body .note-callout.note-callout--example > span,
.noteviewer-body .note-callout.note-callout--example > span {
  color: rgba(253,242,248,0.88);
}

/* ── Variant: Out of Scope — red/crimson ── */
.note-body .note-callout.note-callout--out-of-scope,
.noteviewer-body .note-callout.note-callout--out-of-scope {
  background: linear-gradient(110deg, rgba(239,68,68,0.11) 0%, rgba(248,113,113,0.05) 55%, transparent 100%);
  border-color: rgba(239,68,68,0.18);
  border-left-color: rgba(248,113,113,0.82);
  box-shadow:
    inset 0 1px 0 rgba(252,165,165,0.10),
    0 2px 8px rgba(0,0,0,0.24),
    0 8px 28px rgba(0,0,0,0.28),
    0 0 48px rgba(239,68,68,0.06);
}
.note-body .note-callout.note-callout--out-of-scope::before,
.noteviewer-body .note-callout.note-callout--out-of-scope::before {
  content: "\2298";
  background: rgba(239,68,68,0.16);
  color: rgba(252,165,165,0.96);
  box-shadow: inset 0 1px 0 rgba(254,202,202,0.14);
}
.note-body .note-callout.note-callout--out-of-scope > strong,
.noteviewer-body .note-callout.note-callout--out-of-scope > strong {
  color: rgba(252,165,165,0.95);
  border-bottom-color: rgba(239,68,68,0.20);
}
.note-body .note-callout.note-callout--out-of-scope > span,
.noteviewer-body .note-callout.note-callout--out-of-scope > span {
  color: rgba(254,242,242,0.88);
}

/* ── Variant: Exam Tip — blue ── */
.note-body .note-callout.note-callout--exam-tip,
.noteviewer-body .note-callout.note-callout--exam-tip {
  background: linear-gradient(110deg, rgba(59,130,246,0.11) 0%, rgba(96,165,250,0.05) 55%, transparent 100%);
  border-color: rgba(59,130,246,0.18);
  border-left-color: rgba(96,165,250,0.82);
  box-shadow:
    inset 0 1px 0 rgba(147,197,253,0.10),
    0 2px 8px rgba(0,0,0,0.24),
    0 8px 28px rgba(0,0,0,0.28),
    0 0 48px rgba(59,130,246,0.06);
}
.note-body .note-callout.note-callout--exam-tip::before,
.noteviewer-body .note-callout.note-callout--exam-tip::before {
  content: "\25CE";
  background: rgba(59,130,246,0.16);
  color: rgba(147,197,253,0.96);
  box-shadow: inset 0 1px 0 rgba(191,219,254,0.14);
}
.note-body .note-callout.note-callout--exam-tip > strong,
.noteviewer-body .note-callout.note-callout--exam-tip > strong {
  color: rgba(147,197,253,0.95);
  border-bottom-color: rgba(59,130,246,0.20);
}
.note-body .note-callout.note-callout--exam-tip > span,
.noteviewer-body .note-callout.note-callout--exam-tip > span {
  color: rgba(239,246,255,0.88);
}

/* ── Key Idea strip + consecutive-callout grouping ────────────────────────
   Key Idea is a study anchor, not an alert banner. Back-to-back alert callouts
   still cluster below so stacked exam cues feel related rather than noisy. */
.note-body .note-key-idea,
.noteviewer-body .note-key-idea {
  display: block;
  max-width: 860px;
  margin: 18px 0 24px;
  padding: 14px 20px 14px 22px;
  border: 1px solid rgba(148, 163, 184, 0.10);
  border-left: 3px solid rgba(68, 215, 198, 0.70);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(20, 184, 166, 0.075) 0%, rgba(15, 23, 42, 0.48) 68%, rgba(15, 23, 42, 0.22) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 2px 10px rgba(0, 0, 0, 0.16);
}

.note-body h2 + .note-key-idea,
.noteviewer-body h2 + .note-key-idea,
.note-body h3 + .note-key-idea,
.noteviewer-body h3 + .note-key-idea {
  margin-top: 10px;
}

.note-body .note-key-idea-label,
.noteviewer-body .note-key-idea-label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(94, 234, 212, 0.84);
  font-weight: 720;
}

.note-body .note-key-idea-text,
.noteviewer-body .note-key-idea-text {
  display: block;
  font-size: 0.985rem;
  line-height: 1.66;
  color: rgba(229, 235, 249, 0.93);
  font-weight: 500;
}

.note-body .note-key-idea + p,
.noteviewer-body .note-key-idea + p {
  margin-top: 0;
}

/* ── Consecutive-callout grouping ──────────────────────────────────────────
   Two or more callouts in a row should read as related study cues, not as
   three independent banner interruptions. Tighten the gap between back-to-
   back callouts (block and inline shells). Same-type adjacency tightens
   further so a run of three Exam Tips reads as a clear cluster. */
.note-body .note-callout + .note-callout,
.noteviewer-body .note-callout + .note-callout,
.note-body blockquote[class^="callout-"] + blockquote[class^="callout-"],
.noteviewer-body blockquote[class^="callout-"] + blockquote[class^="callout-"] {
  margin-top: 16px;
}

/* Same-type runs read as a single cluster: shave another step off the gap. */
.note-body .note-callout.note-callout--misconception + .note-callout.note-callout--misconception,
.noteviewer-body .note-callout.note-callout--misconception + .note-callout.note-callout--misconception,
.note-body .note-callout.note-callout--exam-tip + .note-callout.note-callout--exam-tip,
.noteviewer-body .note-callout.note-callout--exam-tip + .note-callout.note-callout--exam-tip,
.note-body .note-callout.note-callout--insight + .note-callout.note-callout--insight,
.noteviewer-body .note-callout.note-callout--insight + .note-callout.note-callout--insight,
.note-body .note-callout.note-callout--example + .note-callout.note-callout--example,
.noteviewer-body .note-callout.note-callout--example + .note-callout.note-callout--example,
.note-body .note-callout.note-callout--key-idea + .note-callout.note-callout--key-idea,
.noteviewer-body .note-callout.note-callout--key-idea + .note-callout.note-callout--key-idea,
.note-body blockquote.callout-misconception + blockquote.callout-misconception,
.noteviewer-body blockquote.callout-misconception + blockquote.callout-misconception,
.note-body blockquote.callout-exam-tip + blockquote.callout-exam-tip,
.noteviewer-body blockquote.callout-exam-tip + blockquote.callout-exam-tip,
.note-body blockquote.callout-examiner + blockquote.callout-examiner,
.noteviewer-body blockquote.callout-examiner + blockquote.callout-examiner {
  margin-top: 12px;
}

/* ── Variant: Key Idea — slim indigo/periwinkle lede strip ──────────────────
   Lighter and quieter than other callouts. Reads as a section-anchoring
   one-sentence emphasis, not a banner. Slim left accent, soft navy surface,
   no badge — distinct from the badged warning/insight callouts above. */
.note-body .note-callout.note-callout--key-idea,
.noteviewer-body .note-callout.note-callout--key-idea {
  padding: 14px 20px 14px 22px;
  margin: 32px 0 28px;
  border-width: 1px 1px 1px 3px;
  border-color: rgba(148, 163, 184, 0.10);
  border-left-color: rgba(169, 190, 255, 0.74);
  background:
    linear-gradient(110deg, rgba(91, 140, 255, 0.07) 0%, rgba(91, 140, 255, 0.02) 55%, transparent 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 10px rgba(0, 0, 0, 0.18);
}
/* No badge — pseudo-element badge from the shared shell is hidden so the
   key-idea variant reads as a slim lede strip rather than a card. */
.note-body .note-callout.note-callout--key-idea::before,
.noteviewer-body .note-callout.note-callout--key-idea::before {
  content: none;
}
.note-body .note-callout.note-callout--key-idea > strong,
.noteviewer-body .note-callout.note-callout--key-idea > strong {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  padding-bottom: 6px;
  color: rgba(169, 190, 255, 0.90);
  border-bottom-color: rgba(169, 190, 255, 0.16);
}
.note-body .note-callout.note-callout--key-idea > span,
.noteviewer-body .note-callout.note-callout--key-idea > span {
  font-size: 0.985rem;
  line-height: 1.66;
  color: rgba(229, 235, 249, 0.92);
  font-weight: 500;
}

/* Block-quote variant: blockquote.callout-key-idea (from _CALLOUT_LABELS).
   Same visual language as the inline key-idea above, applied to the
   block-callout shell so authored "> **Key Idea:** ..." also renders slim. */
.note-body blockquote.callout-key-idea,
.noteviewer-body blockquote.callout-key-idea {
  padding: 14px 22px 14px 22px;
  margin: 32px 0 28px;
  border-left-width: 3px;
  border-left-color: rgba(169, 190, 255, 0.74);
  background:
    linear-gradient(110deg, rgba(91, 140, 255, 0.07) 0%, rgba(91, 140, 255, 0.02) 55%, transparent 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 10px rgba(0, 0, 0, 0.18);
}
.note-body blockquote.callout-key-idea .callout-icon-col,
.noteviewer-body blockquote.callout-key-idea .callout-icon-col {
  display: none;
}
.note-body blockquote.callout-key-idea .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote.callout-key-idea .callout-body p:first-child > strong:first-child {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  padding-bottom: 6px;
  color: rgba(169, 190, 255, 0.90);
  border-bottom-color: rgba(169, 190, 255, 0.16);
}
.note-body blockquote.callout-key-idea .callout-body p,
.noteviewer-body blockquote.callout-key-idea .callout-body p {
  font-size: 0.985rem;
  line-height: 1.66;
  color: rgba(229, 235, 249, 0.92);
}

/* Images — generic fallback (inline images, edge cases) */
.note-body img,
.noteviewer-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 28px auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

/* Figure block — wraps standalone images after rendering pipeline */
.note-body .note-figure,
.noteviewer-body .note-figure {
  margin: 62px 0;
  border: 1px solid rgba(91,140,255,0.28);
  border-top-color: rgba(91,140,255,0.40);
  border-radius: 16px;
  overflow: hidden;
  /* Multi-layer shadow: tight contact shadow + broad ambient depth + faint brand halo */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 2px 6px rgba(0,0,0,0.30),
    0 10px 36px rgba(0,0,0,0.46),
    0 24px 72px rgba(0,0,0,0.32),
    0 0 72px rgba(91,140,255,0.03);
}

/* Caption as top header bar — displayed before the image */
.note-body .note-figure-caption,
.noteviewer-body .note-figure-caption {
  display: block;
  padding: 15px 24px 16px;
  font-size: 0.875rem; /* 14px — more editorial presence, up from 13px */
  font-style: normal;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  line-height: 1.50;
  letter-spacing: 0.005em;
  /* Indigo-tinted header bar — consistent with the note's accent language */
  background: linear-gradient(
    90deg,
    rgba(91,140,255,0.14) 0%,
    rgba(91,140,255,0.06) 65%,
    transparent 100%
  );
  border-bottom: 1px solid rgba(91,140,255,0.18);
}

/* Image area wrapper. Keep diagrams at their original brightness; the frame
   should support the image without tinting or darkening it. */
.note-body .note-figure-img-area,
.noteviewer-body .note-figure-img-area {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.035);
  padding: 12px;
}

.note-body .note-figure-img-area::after,
.noteviewer-body .note-figure-img-area::after {
  display: none;
}

.note-body .note-figure-img-area img,
.noteviewer-body .note-figure-img-area img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: 6px; /* rounded corners within the dark mat — sits intentionally */
  border: none;
  box-shadow: none;
  filter: none;
  transition: transform 0.65s ease, filter 0.65s ease;
}

.note-body .note-figure-img-area:hover img,
.noteviewer-body .note-figure-img-area:hover img {
  transform: scale(1.025);
  filter: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tables — premium dark-mode academic tables
   Structure:  .note-table-scroll  (server-added wrapper by wrap_tables_for_scroll)
               └── table > thead/tbody > tr > th / td
═══════════════════════════════════════════════════════════════════════════ */

/* ── Scroll wrapper — outer shell / framing ─────────────────────────────── */
.note-body .note-table-scroll,
.noteviewer-body .note-table-scroll {
  position: relative; /* anchors the ::before top-stripe pseudo-element */
  overflow-x: hidden;
  margin: 44px 0;
  border-radius: 14px;
  border: 1px solid rgba(91,140,255,0.28);
  border-top-color: rgba(91,140,255,0.36);
  background: rgba(6, 7, 16, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(169,190,255,0.07),
    0 4px 16px rgba(0,0,0,0.36),
    0 12px 48px rgba(0,0,0,0.42),
    0 0 0 1px rgba(91,140,255,0.05);
}

/* Top inner accent stripe — restrained lavender glow along the top edge,
   consistent with the rail sidebar's framing language. Gives the table
   surface a sense of intentional lighting without any overt glow effect. */
.note-body .note-table-scroll::before,
.noteviewer-body .note-table-scroll::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent         5%,
    rgba(169,190,255,0.10) 28%,
    rgba(91,140,255,0.15)  50%,
    rgba(169,190,255,0.10) 72%,
    transparent         95%
  );
  border-radius: 12px 12px 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Tighten gap when a heading immediately precedes a table — section composition */
.note-body h2 + .note-table-scroll,
.note-body h3 + .note-table-scroll,
.noteviewer-body h2 + .note-table-scroll,
.noteviewer-body h3 + .note-table-scroll {
  margin-top: 14px;
}

/* ── Table base ─────────────────────────────────────────────────────────── */
.note-body table,
.noteviewer-body table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ── Header row — confident column navigation.
   Previous headers at 0.93rem with 0.085em letter-spacing read as caption-
   sized metadata. This pass lifts the size to 1rem, tightens letter-spacing
   (because the larger size is the new hierarchy carrier), increases padding,
   and adds a thin top highlight + crisper bottom edge so the header band
   reads as authoritative table navigation. */
.note-body th,
.noteviewer-body th {
  padding: 18px 26px;
  text-align: left;
  vertical-align: bottom;
  font-size: 1rem;          /* 16px — confident column heading */
  font-weight: 760;
  letter-spacing: 0.06em;
  line-height: 1.32;
  text-transform: uppercase;
  color: rgba(214, 224, 255, 0.97);
  background: rgba(91, 140, 255, 0.18);
  border-bottom: 1px solid rgba(91, 140, 255, 0.46);
  border-right: 1px solid rgba(91, 140, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(199, 212, 252, 0.08);
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ── Body cells ─────────────────────────────────────────────────────────── */
.note-body td,
.noteviewer-body td {
  padding: 14px 22px;
  text-align: left;
  vertical-align: top;
  font-size: 1rem; /* 16px absolute — comfortable table reading */
  line-height: 1.72;
  color: rgba(229, 235, 247, 0.90);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  /* Vertical column divider — lighter than horizontal so columns whisper,
     rows speak: hierarchy of scanability is preserved. */
  border-right: 1px solid rgba(148, 163, 184, 0.07);
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ── Last column — no right border (container edge provides closure) ─────── */
.note-body th:last-child,
.noteviewer-body th:last-child,
.note-body td:last-child,
.noteviewer-body td:last-child {
  border-right: none;
}

/* First column keeps subtle emphasis, but must wrap/shrink so tables never
   require horizontal scrolling on phones. */
.note-body td:first-child,
.noteviewer-body td:first-child {
  font-weight: 660;
  color: rgba(232, 240, 255, 0.96);
  white-space: normal;
  min-width: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.16); /* stronger than 0.07 body dividers */
}

/* First-column header uses a proportional width hint only; it can wrap on
   narrow screens so the full table remains within the note column. */
.note-body th:first-child,
.noteviewer-body th:first-child {
  width: 25%;
  min-width: 0;
  white-space: normal;
  border-right: 1px solid rgba(91,140,255,0.38);
}

/* Second column: primary description column gets dominant share (~30%) */
.note-body th:nth-child(2),
.noteviewer-body th:nth-child(2) {
  width: 30%;
}

/* Summary markdown is imported from a compact/Pandoc-style source where
   one-column tables are used as a title card and as callout cards.  The
   normal academic table rules above assume real multi-column data tables;
   on these one-column summary cards they inherit uppercase + nowrap table
   header styling, causing labels like "Key Definition" and the definition
   body to render oversized and horizontally clipped.  Scope the correction
   to summary detail pages so notes/questions/flashcards/MCQs keep their
   existing table design. */
.note-body--summaries > .note-prose-surface > .note-table-scroll:first-child:has(th:only-child) {
  display: none;
}

/* Frame: compact notes-callout family geometry — 1px slate frame + 3px
   periwinkle left rail + 12px radius + subtle inset highlight + low outer
   shadow. Matches the .note-key-idea proportions so the card sits between
   paragraphs as a calm callout rather than a top-heavy panel. */
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) {
  overflow: visible;
  margin: 18px 0 22px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-left: 3px solid rgba(var(--summary-accent-rgb), 0.55);
  background: linear-gradient(110deg,
    rgba(99, 130, 230, 0.050) 0%,
    rgba(15, 23, 42, 0.38) 68%,
    rgba(15, 23, 42, 0.16) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.030),
    0 2px 8px rgba(0, 0, 0, 0.14);
}

.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child)::before {
  display: none;
}

.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) table,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) thead,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) tbody,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) tr,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) th,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) td {
  display: block;
  width: auto;
  min-width: 0;
}

/* Outer cell — tighter than before so the card doesn't feel oversized. */
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) th,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) td {
  padding: 12px 18px;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  background: transparent;
  border: 0;
  color: rgba(220, 228, 244, 0.88);
  font-size: 0.96rem;
  line-height: 1.62;
  font-weight: 440;
}

/* The h3 inside the card carries the "Key Definition" label. The base
   .note-body h3 rule gives it `padding-left: 28px`, `font-size:
   clamp(1.18rem, 1.42vw, 1.34rem)`, and `margin-top: 2.3em` (per the
   global cascade), which is what created the top-heavy empty-space-above-
   text feel. Override aggressively to make it a compact uppercase eyebrow
   in the same idiom as .note-key-idea-label. */
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) th h3,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) td h3 {
  display: block;
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(var(--summary-accent-rgb), 0.82);
  text-shadow: none;
}

/* Null out the inherited base-h3 horizontal-pill ::before marker so it
   doesn't add a stray dot left of "KEY DEFINITION". */
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) th h3::before,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) td h3::before,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) th h3::after,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) td h3::after {
  content: none;
  display: none;
}

.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) th p,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) td p {
  margin: 0 0 0.50em;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.96rem;
  line-height: 1.62;
  color: rgba(220, 228, 244, 0.88);
  font-weight: 440;
}

.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) th p:last-child,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) td p:last-child {
  margin-bottom: 0;
}

/* When the author wrote `**Key Definition** body…` instead of `### Key
   Definition\nbody`, the leading strong inside the first paragraph plays
   the same eyebrow role. Match the new h3 eyebrow weights/colour so both
   authoring forms look identical. */
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) th p:first-child > strong:first-child,
.note-body--summaries > .note-prose-surface > .note-table-scroll:not(:first-child):has(th:only-child) td p:first-child > strong:first-child {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  border: 0;
  color: rgba(var(--summary-accent-rgb), 0.86);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.note-body--summaries > .note-prose-surface > p:has(> strong:only-child) {
  margin: 34px 0 12px;
  color: rgba(228,234,255,0.94);
  font-size: clamp(1.15rem, 1.04rem + 0.24vw, 1.3rem);
  font-weight: 740;
  line-height: 1.35;
  letter-spacing: -0.018em;
}

.note-body--summaries > .note-prose-surface > p:has(> strong:only-child):first-of-type {
  margin-top: 0;
}

/* ── Utility columns (3rd and beyond) — compact decision columns ─────────── */
/* Equal share of remaining space (~22.5% each); left-aligned like all other
   columns so the table reads consistently regardless of cell content length. */
.note-body td:nth-child(n+3),
.noteviewer-body td:nth-child(n+3),
.note-body th:nth-child(n+3),
.noteviewer-body th:nth-child(n+3) {
  width: 22.5%;
  padding-left: 14px;
  padding-right: 14px;
}

/* ── Alternating row rhythm — extremely subtle, for scanability ─────────── */
.note-body tbody tr:nth-child(even) td,
.noteviewer-body tbody tr:nth-child(even) td {
  background: rgba(255,255,255,0.018);
}

/* ── Row hover — indigo-tinted, matches brand palette ───────────────────── */
.note-body tbody tr:hover td,
.noteviewer-body tbody tr:hover td {
  background: rgba(91,140,255,0.07);
}

/* ── Last row — no bottom border (container provides the edge) ──────────── */
.note-body tr:last-child td,
.noteviewer-body tr:last-child td {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Worked Example sections
   Structure:  .note-worked-example  (server-added by wrap_worked_examples)
               ├── h2 | h3 | h4          (card title — direct child)
               └── .note-worked-example-body
                   ├── p / blockquote / ul / ...
                   ├── h3 / h4            (nested step headings)
                   └── .note-table-scroll / figure / ...
═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer shell ─────────────────────────────────────────────────────────── */
.note-body .note-worked-example,
.noteviewer-body .note-worked-example {
  margin: 72px 0;
  border: 1px solid rgba(34, 211, 238, 0.20);
  border-left: 3px solid rgba(34, 211, 238, 0.70);
  border-radius: 16px;
  background: linear-gradient(
    170deg,
    rgba(8, 145, 178, 0.09) 0%,
    rgba(8, 145, 178, 0.04) 50%,
    rgba(8, 145, 178, 0.02) 100%
  );
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(34,211,238,0.10),
    0 4px 24px rgba(0,0,0,0.28),
    0 12px 48px rgba(0,0,0,0.18),
    0 0 60px rgba(8,145,178,0.03); /* subtle teal halo — marks it as special */
}

/* ── Card title (the triggering h2 / h3 / h4) ───────────────────────────── */
/* Override the global h2/h3/h4 banner styles inside the wrapper so the
   heading integrates with the card rather than floating as a page-level bar. */
.note-body .note-worked-example > h2,
.note-body .note-worked-example > h3,
.note-body .note-worked-example > h4,
.noteviewer-body .note-worked-example > h2,
.noteviewer-body .note-worked-example > h3,
.noteviewer-body .note-worked-example > h4 {
  margin: 0;
  padding: 18px 28px;
  font-size: 0.8125rem; /* 13px — readable eyebrow, up from invisible 11px */
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(34, 211, 238, 0.90); /* more confident presence */
  background: linear-gradient(
    90deg,
    rgba(8, 145, 178, 0.20) 0%,
    rgba(8, 145, 178, 0.09) 55%,
    transparent 100%
  );
  border: none;
  border-bottom: 1px solid rgba(34, 211, 238, 0.16);
  border-radius: 0;
  box-shadow: none;
  line-height: 1.4;
  position: relative;
  padding-left: 28px;
}

/* Remove the H3 decorative dash inside worked-example title headers */
.note-body .note-worked-example > h3::before,
.noteviewer-body .note-worked-example > h3::before {
  display: none;
}

/* ── Content area ────────────────────────────────────────────────────────── */
.note-body .note-worked-example-body,
.noteviewer-body .note-worked-example-body {
  padding: 26px 32px 32px;
  counter-reset: we-step; /* drives the step-number circles on nested h3s */
}

/* ── Nested step headings (h3 inside body) ───────────────────────────────── */
/* Each h3 is a solution step — styled as an editorial step marker with an
   auto-numbered circle so the reader always knows where they are in the solution. */
.note-body .note-worked-example-body h3,
.noteviewer-body .note-worked-example-body h3 {
  counter-increment: we-step;
  font-size: 0.875rem; /* 14px — legible step label */
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(34, 211, 238, 0.84);
  margin: 30px 0 10px 0;
  padding: 0 0 8px 0;
  border: none;
  border-bottom: 1px solid rgba(34, 211, 238, 0.12);
  background: none;
  border-radius: 0;
  line-height: 1.4;
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: none; /* suppress global h3 indigo bloom — teal context */
}

/* Auto-numbered step circle — replaces the suppressed global h3 dash */
.note-body .note-worked-example-body h3::before,
.noteviewer-body .note-worked-example-body h3::before {
  content: counter(we-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(34, 211, 238, 0.28);
  color: rgba(34, 211, 238, 0.92);
  font-size: 0.6875rem;  /* 11px inside the circle — properly readable */
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  position: static;
  padding: 0;
}

/* ── Nested label headings (h4 inside body) ──────────────────────────────── */
/* These are micro-labels like "Given:", "Find:", "Solution:" — must be legible */
.note-body .note-worked-example-body h4,
.noteviewer-body .note-worked-example-body h4 {
  font-size: 0.8125rem; /* 13px — up from invisible 11px, properly readable */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(34, 211, 238, 0.72);
  margin: 18px 0 7px 0;
  padding: 0;
  border: none;
  background: none;
}

/* ── Tables inside worked examples — reduce outer margin ─────────────────── */
.note-body .note-worked-example-body .note-table-scroll,
.noteviewer-body .note-worked-example-body .note-table-scroll {
  margin: 16px 0;
}

/* ── Equations inside worked examples — editorial proof-line style ───────── */
/* Bottom-only hairline: each equation ends with a natural separator, creating
   a flowing proof or ledger feel — not a stack of identical sandwiched chips.
   Consecutive equations no longer produce doubled dividers. */
.note-body .note-worked-example-body .katex-display,
.noteviewer-body .note-worked-example-body .katex-display {
  display: block;
  width: auto;            /* full-width ledger row (override the base fit-content) */
  margin: 0.75em 0 1.0em;   /* less above (flows from step head), more below */
  padding: 10px 0 12px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(34, 211, 238, 0.10); /* single bottom hairline only */
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

/* Horizontal rule — editorial divider, same accent language as note-main stripe */
.note-body hr,
.noteviewer-body hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(91,140,255,0.28) 20%,
    rgba(169,190,255,0.38) 50%,
    rgba(91,140,255,0.28) 80%,
    transparent 100%
  );
  margin: 52px 0;
}

/* Inline code */
.note-body code,
.noteviewer-body code {
  padding: 3px 7px;
  border-radius: 10px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);

  color: rgba(255,255,255,0.90);
  font-size: 0.95em;
}

/* Code blocks */
.note-body pre,
.noteviewer-body pre {
  padding: 14px 16px;
  border-radius: 14px;
  overflow-x: auto;

  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);

  margin: 14px 0;
}

.note-body pre code,
.noteviewer-body pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: rgba(255,255,255,0.88);
}

/* Small text / captions */
.note-body small,
.note-body .caption,
.noteviewer-body small,
.noteviewer-body .caption {
  color: var(--nv-muted);
}

/* (sidebar tree rules moved to Sidebar section above) */

/* =========================
   Chapter Study CTA (notes leaf pages)
========================= */

.note-chapter-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(91,140,255,0.06);
  border: 1px solid rgba(91,140,255,0.16);
}

.note-chapter-cta-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(169,190,255,0.60);
  white-space: nowrap;
}

.note-chapter-cta-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.note-chapter-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(169,190,255,0.85);
  background: rgba(91,140,255,0.10);
  border: 1px solid rgba(91,140,255,0.20);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.note-chapter-cta-link:hover {
  background: rgba(91,140,255,0.20);
  border-color: rgba(91,140,255,0.40);
  color: rgba(190,205,255,1);
}

.note-chapter-cta-icon {
  opacity: 0.7;
  flex-shrink: 0;
}

/* =========================
   Pagination
========================= */

.note-pagination {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.note-pagination > div {
  flex: 1 1 0;
  min-width: 0;
}

.note-pagination-link {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(50% - 7px);
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  color: inherit;
  padding: 17px 18px 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(7, 12, 24, 0.94)),
    rgba(15, 23, 42, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 14px 36px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.note-pagination-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.note-pagination-link:hover,
.note-pagination-link:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 44px rgba(0, 0, 0, 0.24);
}

.note-pagination-link.prev {
  text-align: left;
  border-color: rgba(148, 163, 184, 0.18);
}

.note-pagination-link.prev::before {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.16), rgba(91, 140, 255, 0.055));
}

.note-pagination-link.prev:hover,
.note-pagination-link.prev:focus-visible {
  border-color: rgba(203, 213, 225, 0.28);
}

.note-pagination-link.next {
  text-align: right;
  align-items: flex-end;
  margin-left: auto;
  border-color: rgba(91, 140, 255, 0.30);
  background:
    linear-gradient(180deg, rgba(31, 41, 77, 0.86), rgba(12, 18, 38, 0.96)),
    rgba(17, 24, 39, 0.92);
}

.note-pagination-link.next::before {
  background:
    radial-gradient(180px 100px at 100% 0%, rgba(45, 212, 191, 0.14), transparent 70%),
    linear-gradient(135deg, rgba(91, 140, 255, 0.24), rgba(59, 130, 246, 0.10));
}

.note-pagination-link.next:hover,
.note-pagination-link.next:focus-visible {
  border-color: rgba(91, 140, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 18px 46px rgba(77, 110, 248, 0.18),
    0 16px 40px rgba(0, 0, 0, 0.24);
}

.note-pagination-link:hover::before,
.note-pagination-link:focus-visible::before {
  opacity: 1;
}

.note-pagination-link span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: rgba(169, 190, 255, 0.70);
}

.note-pagination-link.prev span {
  color: rgba(203, 213, 225, 0.68);
}

.note-pagination-link.next span {
  color: rgba(169, 190, 255, 0.94);
}

.note-pagination-link strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.98rem;
  font-weight: 760;
  color: rgba(241, 245, 249, 0.92);
  line-height: 1.28;
}

.note-pagination-link.prev strong {
  color: rgba(226, 232, 240, 0.84);
}

.note-pagination-link.next strong {
  color: rgba(248, 250, 252, 0.98);
}

.note-pagination-link:hover strong,
.note-pagination-link:focus-visible strong {
  color: #ffffff;
}

/* =========================
   Compatibility with pages content card
========================= */

.content {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* =========================
   Responsive
========================= */

/* Tablet: narrow the rail and tighten the inner padding */
@media (max-width: 1100px) {
  .nv-rail {
    width: 280px;
    min-width: 280px;
    margin-left: 0;
    margin-right: 12px;
  }

  .noteviewer-main-inner {
    padding: 36px 36px 56px 36px;
  }
}

@media (min-width: 861px) and (max-width: 1080px) {
  .layout,
  .noteviewer-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .nv-rail {
    width: 260px;
    min-width: 260px;
  }
}

/* Small tablet / large mobile: hide the sticky rail, show mobile trigger */
@media (max-width: 860px) {
  /* Legacy grid layouts */
  .noteviewer-layout,
  .layout {
    grid-template-columns: 1fr;
  }

  /* Stack canvas vertically */
  .nv-canvas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .main-content:has(.nv-canvas) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .noteviewer-main {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .noteviewer-main::before,
  .noteviewer-main::after {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  .noteviewer-main-inner,
  .noteviewer-body,
  .note-body,
  .flashcard-viewer,
  .fc-study-zone,
  .fc-card-system,
  .question-list,
  .mcq-list,
  .question-card,
  .video-embed-wrapper,
  .sr-page,
  .sr-inner,
  .sr-card,
  .sr-card-row,
  .sr-card-body {
    max-width: 100%;
    min-width: 0;
  }

  .note-body .note-table-scroll,
  .noteviewer-body .note-table-scroll,
  .note-body pre,
  .noteviewer-body pre,
  .note-body .katex-display,
  .noteviewer-body .katex-display {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .note-body code,
  .noteviewer-body code {
    overflow-wrap: anywhere;
  }

  /* note-main is not the template class — update noteviewer-main-inner for mobile stacked view */
  .noteviewer-main-inner {
    padding: 32px 28px 56px 28px;
  }

  /* Hide desktop rail entirely */
  .nv-rail {
    display: none;
  }

  /* Show floating trigger button */
  .nv-rail-trigger {
    display: flex;
  }
}

@media (max-width: 700px) {
  .note-pagination {
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
  }

  .note-pagination-link {
    max-width: calc(50% - 5px);
    min-height: 74px;
    padding: 13px 12px 14px;
    border-radius: 15px;
  }

  .note-pagination-link.next {
    text-align: right;
    align-items: flex-end;
  }

  .note-pagination-link span {
    font-size: 0.64rem;
    letter-spacing: 0.055em;
  }

  .note-pagination-link strong {
    font-size: 0.84rem;
    line-height: 1.22;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 520px) {
  .note-body {
    padding: 0 0 40px 0;
    font-size: 16px; /* 16px on mobile — still comfortable, not 15px */
  }

  .note-main {
    padding: 24px 16px 48px;
  }


  .nv-hero {
    margin-bottom: 16px;
  }

  .note-resource-back-btn {
    font-size: 0.775rem;
  }

  .noteviewer-main-inner {
    padding: 20px 18px 96px;
  }

  .note-body h1:not(.topic-landing-title),
  .noteviewer-body h1:not(.topic-landing-title) {
    font-size: 28px;
  }

  .note-body h2,
  .noteviewer-body h2 {
    font-size: 1.25rem; /* 20px — clean step down from desktop 24px */
    padding: 11px 16px 11px 14px;
  }

  .note-body h3,
  .noteviewer-body h3 {
    font-size: 1.0625rem; /* 17px mobile */
  }

  /* Drawer fills screen width on very small screens */
  .nv-rail-drawer {
    width: 100%;
  }

  /* Move trigger button so it doesn't overlap pagination */
  .nv-rail-trigger {
    bottom: 16px;
    right: 16px;
  }

  /* Tables — tighter padding on very small screens */
  .note-body .note-table-scroll,
  .noteviewer-body .note-table-scroll {
    margin: 32px 0;
    border-radius: 10px;
  }
  .note-body th,
  .noteviewer-body th {
    padding: 11px 14px;
    font-size: 0.625rem;
  }
  .note-body td,
  .noteviewer-body td {
    padding: 12px 14px;
    font-size: 0.875em;
  }
}

/* =========================
   Flashcard Page Header
========================= */

.fc-page-header {
  margin-bottom: 28px;
}

.fc-page-header .note-breadcrumbs {
  /* Leaf study pages (notes/summaries/flashcards/questions/mcq/videos) have a
     centered title, so center the breadcrumb to match — both the wrapped flex
     lines (justify-content) and the text within a wrapping crumb (text-align).
     Index/nav pages keep their left-aligned crumb via .sr-breadcrumbs /
     .nv-resource-header overrides, matching their left-aligned titles. */
  justify-content: center;
  text-align: center;
  margin-bottom: 12px;
}

.fc-page-title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* ── Centred-only title row.
   The back button is no longer in the same row as the title — it lives on
   its own line below in .fc-page-action-row. This variant drops the grid
   and centres the title independently so length never affects centring.
   The bottom border / padding move to .fc-page-action-row so the divider
   appears under the back button row, not between title and back button. */
.fc-page-title-row--center-only {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.fc-page-title-row--center-only .fc-page-title-group {
  grid-column: auto;
  max-width: 900px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.fc-page-title-row--center-only .fc-page-h1 {
  text-align: center;
  margin-inline: auto;
}

/* Small optional meta row under the title (e.g. an "All subtopics" badge
   on aggregated MCQ / Questions). Sits cleanly under the centred title. */
.fc-page-h1-meta {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* ── Page action row — back button on its own line below the title.
   Left-aligned and carries the divider that used to live on the title row. */
.fc-page-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* Flashcards-only variant. The flashcard study zone is capped at 880px and
   centred inside .noteviewer-main-inner (which is wider for card resources),
   so the default left-aligned action row strands the back button ~100px to
   the left of the deck on wide desktop. Capping the action-row width to the
   same 880px and centring it keeps the back button (and divider) aligned
   with the deck's left edge. */
.fc-page-action-row--flashcards {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
}

/* Video page reuses the action-row pattern but keeps its own header class. */
.noteviewer-header--center-only {
  text-align: center;
}

.noteviewer-header--center-only h1 {
  text-align: center;
  margin-inline: auto;
}

.fc-page-title-group {
  grid-column: 2;
  text-align: center;
  min-width: 0;
}

/* Subunit kicker above the page title — replicates the demo notepage header
   (.note-kicker): small, bold, wide-tracked uppercase accent label, centered
   over the title. Shared by Notes / Topic Questions / MCQ via .fc-page-header
   (rendered from _page_eyebrow.html). --text-link is #84B6FF dark / #3B52D0
   light — the demo accent-text, correct in both themes. */
.fc-page-eyebrow {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-link);
  text-align: center;
}

.fc-page-h1 {
  /* ~36–45px premium resource title — readable from above the fold but
     still composed within the centred header column. */
  font-size: clamp(2.25rem, 1.85rem + 1.4vw, 2.8rem);
  font-weight: 760;
  letter-spacing: -0.028em;
  margin: 0 auto;
  max-width: 820px;
  color: var(--text);
  line-height: 1.12;
}

/* When the .fc-page-header pattern is reused on Topic Questions / MCQ
   pages it includes the meta line directly under the title. Add a small
   spacer so the meta doesn't sit flush against the h1. */
.fc-page-title-group .noteviewer-meta {
  margin-top: 8px;
  justify-content: center;
}


/* Back button placement inside the flashcard title row.
   `grid-row: 1` is REQUIRED -- the back button is the SECOND child in
   DOM order but needs to share row 1 with the title group (which has
   grid-column: 2). Without explicit row 1, CSS Grid auto-placement
   would push the back button to row 2 because the cursor doesn't move
   backward without `grid-auto-flow: dense`. The title stays centred
   thanks to align-items: center + grid-template-columns: 1fr auto 1fr. */
.fc-page-title-row .note-resource-back-btn {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

/* Narrow viewports -- stack the back button above the title.
   The grid layout can't keep the title visually centred once the button
   gets close in width to the title, so we collapse the row to a flex
   stack with the button on top. */
@media (max-width: 700px) {
  .fc-page-title-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .fc-page-title-row .note-resource-back-btn {
    align-self: flex-start;
    margin-top: 0;
  }
  .fc-page-title-group {
    text-align: center;
  }
}

/* =========================
   Flashcard Viewer
========================= */

/* Outer wrapper */
.flashcard-viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 48px;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────
   STUDY ZONE — the full hero stage
───────────────────────────────────────────────────────── */
/* Study shell -- intentionally quiet so the flashcard inside it reads as
   the hero. Background sits low, border and shadows are soft, the only
   structural lift is the ambient electric-blue bloom centered behind the
   card. Reduces the "container inside container inside container" feel. */
.fc-study-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 880px;
  padding: 30px 32px 26px;
  background: rgba(8, 10, 22, 0.55);
  border: 1px solid rgba(148,163,232,0.085);
  border-bottom: 1px solid rgba(132,182,255,0.12);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(132,182,255,0.05) inset,
    0 2px 8px rgba(0,0,0,0.30),
    0 10px 32px rgba(0,0,0,0.24),
    0 28px 60px rgba(0,0,0,0.18);
}

/* Ambient electric-blue bloom -- restrained, matches homepage atmosphere */
.fc-study-zone::before {
  content: '';
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 680px;
  height: 540px;
  background: radial-gradient(
    ellipse at center,
    rgba(91,140,255,0.075) 0%,
    rgba(91,140,255,0.025) 44%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

/* ─────────────────────────────────────────────────────────
   SESSION RAIL — counter pill + progress bar
───────────────────────────────────────────────────────── */
.fc-session-rail {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.flashcard-counter {
  display: inline-flex;
  align-items: center;
  padding: 7px 22px;
  background: rgba(255,255,255,0.062);
  border: 1px solid rgba(185,196,230,0.26);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: rgba(246,249,255,0.94);
  letter-spacing: 0.08em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.070),
    0 1px 3px rgba(0,0,0,0.20);
}

.fc-counter-sep {
  opacity: 0.44;
  margin: 0 4px;
}

/* Progress track -- subtle electric-blue */
.fc-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(132,182,255,0.16);
  border-radius: 999px;
  overflow: hidden;
}

/* Progress fill -- slightly more rewarding. Same homepage electric-blue
   gradient, but with a brighter glow + a top sheen so the filled portion
   feels satisfying without being loud. */
.fc-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4d6ef8 0%, #78aeff 100%);
  border-radius: 999px;
  box-shadow:
    0 0 14px rgba(77,110,248,0.58),
    inset 0 1px 0 rgba(255,255,255,0.36);
  transition: width 0.30s ease;
}

/* ─────────────────────────────────────────────────────────
   3-D STAGE — full-width hero card
───────────────────────────────────────────────────────── */
/* Layout/sizing rules use simple .flashcard-scene / .flashcard selectors so
   the @media (max-height: …) and @media (max-width: …) overrides below can
   override them via normal cascade source order. */
.flashcard-scene {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 520px;
  perspective: 1600px;
  cursor: pointer;
  margin: 0 auto;
}

.flashcard-scene:hover {
  transform: translateY(-5px);
}

/* Card shell -- 3D flip target. perspective is on .flashcard-scene above;
   here we preserve 3D and run the rotate transform when .is-flipped is set
   by the JS toggle in flashcards.js. */
.flashcard {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
  outline: none;
}

.flashcard.is-flipped {
  transform: rotateY(180deg);
}

/* ── Transition rules pulled out into their own block.
   These selectors carry the .fc-card-system / .flashcard-scene parent
   prefix so they reach specificity (0,2,0) and beat the universal
   `html.theme-transitions-enabled *` rule in styles.css (0,1,1) which
   otherwise overwrites `transition: transform …` with
   `transition: background-color/border-color` and breaks the flip.
   Layout values stay at low specificity so media queries still apply. */
.fc-card-system .flashcard-scene {
  transition: transform 0.18s ease;
}

.flashcard-scene .flashcard {
  transition: transform 0.58s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Keyboard focus ring -- electric blue */
.flashcard:focus-visible {
  outline: 2px solid rgba(120,158,255,0.80);
  outline-offset: 6px;
  border-radius: 22px;
}

/* Face -- shared base */
.flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 68px 76px 64px;
  border-radius: 20px;
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────────
   FRONT -- question surface. Deep near-black/ink + restrained electric-blue
   accent. Mirrors .acg-card / .cs-panel language so the card reads as a
   premium ExamStudyAid study object, not a purple modal.
   The colour energy comes from: a confident periwinkle top rail, a faint
   blue inner glow tracing the top edge, and a subtle corner radial. None
   of these tint the body of the card -- only the structure.
   ──────────────────────────────────────────────────────────────────────── */
.flashcard-front {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(91,140,255,0.090) 0%, transparent 58%),
    linear-gradient(180deg, rgba(16,20,42,0.99) 0%, rgba(9,11,24,0.99) 100%);
  border: 1px solid rgba(148,163,232,0.26);
  border-top: 2px solid rgba(132,182,255,0.78);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.62),
    0 12px 36px rgba(0,0,0,0.44),
    0 36px 80px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.075),
    inset 0 2px 18px rgba(132,182,255,0.085),
    inset 0 0 0 1px rgba(255,255,255,0.020);
}

/* ────────────────────────────────────────────────────────────────────────
   BACK -- answer surface. The card body is the SAME deep ink as the front.
   Green appears only in:
   - a barely-visible corner glow (0.038 alpha)
   - the smallest possible green hint on the otherwise-neutral border
   - the ANSWER micro-pill (see .flashcard-back .flashcard-label below)
   The full-width green top rail from previous passes is gone -- the answer
   state now reads from the label pill, not from card-edge colour.
   ──────────────────────────────────────────────────────────────────────── */
.flashcard-back {
  transform: rotateY(180deg);
  /* Background layers, top to bottom:
     1. PARTIAL emerald accent rail at the very top -- a 2px-tall horizontal
        stripe centered on the card, fading to transparent on both sides.
        This is painted as part of the back's own background so it inherits
        backface-visibility correctly (no ::before needed).
     2. Soft emerald corner glow at the top centre.
     3. Same deep ink base as the question side. */
  background:
    linear-gradient(90deg,
      transparent 30%,
      rgba(74,222,128,0.55) 42%,
      rgba(167,243,200,0.82) 50%,
      rgba(74,222,128,0.55) 58%,
      transparent 70%) center top / 100% 2px no-repeat,
    radial-gradient(80% 60% at 50% -10%, rgba(34,197,94,0.060) 0%, transparent 58%),
    linear-gradient(180deg, rgba(16,20,42,0.99) 0%, rgba(9,11,24,0.99) 100%);
  border: 1px solid rgba(86,176,128,0.22);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.62),
    0 12px 36px rgba(0,0,0,0.44),
    0 36px 80px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.075),
    inset 0 2px 18px rgba(34,197,94,0.075),
    inset 0 0 0 1px rgba(255,255,255,0.020);
}

/* Question text -- premium hero text. Tight max-width keeps long questions
   from spreading; line-height tuned for confident multi-line rhythm. */
.flashcard-face p {
  font-size: 1.5625rem;
  font-weight: 480;
  line-height: 1.48;
  letter-spacing: -0.014em;
  color: rgba(248,250,255,0.95);
  max-width: 560px;
  margin: 0;
}

/* Answer text -- equal presence to the question. Clean off-white, not
   green-tinted; slightly tighter line-height for a settled "this is the
   answer" feel without making the type bigger. */
.flashcard-back p {
  font-size: 1.5rem;
  font-weight: 480;
  line-height: 1.5;
  letter-spacing: -0.013em;
  color: rgba(248,250,255,0.95);
  max-width: 560px;
}

/* Flip affordance hint -- front */
.flashcard-front::after {
  content: "Click or Space to flip  \00B7  \2190 \2192 to navigate";
  position: absolute;
  bottom: 22px;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: rgba(184,207,255,0.48);
  font-weight: 500;
}

/* Flip affordance hint -- back. Muted neutral, not green; keeps the
   answer card from feeling like a coloured alert. */
.flashcard-back::after {
  content: "Click or Space to flip back  \00B7  \2190 \2192 to navigate";
  position: absolute;
  bottom: 22px;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: rgba(220,226,245,0.46);
  font-weight: 500;
}

/* Corner label -- micro-pill state marker. Same anatomy as .lp-stats-pill
   so it reads as an integrated product element, not floating type. */
.flashcard-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  position: absolute;
  top: 22px;
  left: 24px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

/* Periwinkle pill + dot for the question side. Slightly lifted from the
   previous pass: the pill background is a touch warmer, the dot has a
   stronger ring, and the colour reads as confident "active study" energy
   without pushing into bright blue. */
.flashcard-front .flashcard-label {
  background: rgba(132,182,255,0.13);
  border-color: rgba(132,182,255,0.34);
  color: rgba(206,224,255,0.98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.060),
    0 0 12px rgba(120,174,255,0.10);
}

.flashcard-front .flashcard-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(132,182,255,1);
  box-shadow:
    0 0 5px rgba(120,174,255,0.42),
    0 0 0 3px rgba(120,174,255,0.20);
}

/* Emerald pill + dot for the answer side. Slightly lifted in the same
   way -- the dot gets a more satisfying ring + outer glow, but the pill
   stays restrained so it doesn't compete with the partial top rail. */
.flashcard-back .flashcard-label {
  background: rgba(34,197,94,0.13);
  border-color: rgba(74,222,128,0.36);
  color: rgba(208,250,222,0.98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.060),
    0 0 12px rgba(34,197,94,0.10);
}

.flashcard-back .flashcard-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow:
    0 0 6px rgba(34,197,94,0.62),
    0 0 0 3px rgba(34,197,94,0.22);
}

/* ─────────────────────────────────────────────────────────
   CARD SYSTEM — scene + controls as one unified object
───────────────────────────────────────────────────────── */
.fc-card-system {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────
   CONTROLS DOCK — clean floating button row
───────────────────────────────────────────────────────── */
.flashcard-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Base control button -- dark outlined, in-study secondary language */
.fc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 26px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.060);
  color: rgba(244,247,255,0.84);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.005em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 1px 3px rgba(0,0,0,0.20);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.fc-btn:hover {
  background: rgba(255,255,255,0.095);
  color: #ffffff;
  border-color: rgba(255,255,255,0.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.060),
    0 4px 10px rgba(0,0,0,0.26);
  transform: translateY(-1px);
}

.fc-btn:focus-visible {
  outline: 2px solid rgba(120,158,255,0.72);
  outline-offset: 2px;
}

.fc-btn-icon {
  flex-shrink: 0;
  opacity: 0.78;
  transition: opacity 0.14s;
}

.fc-btn:hover .fc-btn-icon {
  opacity: 1;
}

/* Shuffle -- centre action with a small periwinkle marker. Targeted by
   ID because the template tags all three controls with the same class
   (`fc-btn fc-btn--secondary`); only the ID distinguishes the shuffle.
   Still a secondary in-study control; no full blue gradient that would
   compete with primary CTAs. Hover is periwinkle-tinted so the shuffle
   reads as the "special" action without becoming a loud primary button. */
#fc-shuffle {
  padding: 12px 28px 12px 24px;
  position: relative;
  border-color: rgba(132,182,255,0.22);
}

#fc-shuffle::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(132,182,255,1);
  box-shadow:
    0 0 5px rgba(120,174,255,0.42),
    0 0 0 3px rgba(120,174,255,0.18);
  flex-shrink: 0;
}

#fc-shuffle:hover {
  background: rgba(120,174,255,0.12);
  border-color: rgba(132,182,255,0.44);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.080),
    0 4px 12px rgba(60,90,200,0.26);
}

#fc-shuffle .fc-btn-icon {
  opacity: 0.88;
}

/* ─────────────────────────────────────────────────────────
   REDUCED MOTION — instant flip, no lift
───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Specificity bumped to match base rules above so this still overrides
     for reduced-motion users (universal theme-transitions rule is 0,1,1). */
  .fc-card-system .flashcard-scene,
  .flashcard-scene .flashcard,
  .fc-progress-fill,
  .fc-btn,
  .fc-btn-icon {
    transition: none;
  }
  .fc-card-system .flashcard-scene:hover {
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────
   VIEWPORT-HEIGHT ADAPTIVE — laptop / short-screen fit
   Progressively compact the study stack on shorter screens
   so the card + controls fit within the first screenful.
───────────────────────────────────────────────────────── */

/* Short desktop / laptop (≤ 860px viewport height, e.g. 1366×768) */
@media (max-height: 860px) {
  /* Compact header + page padding so the study zone + controls fit
     within the viewport without scroll. */
  .noteviewer-main-inner {
    padding-top: 20px;
    padding-bottom: 36px;
  }
  .fc-page-header {
    margin-bottom: 12px;
  }
  .fc-page-header .note-breadcrumbs {
    margin-bottom: 8px;
  }
  .fc-page-title-row {
    padding-bottom: 8px;
  }
  .fc-page-h1 {
    font-size: 1.75rem;
  }
  .flashcard-viewer {
    padding-bottom: 16px;
  }

  .fc-study-zone {
    gap: 14px;
    padding: 16px 30px 14px;
  }
  .flashcard-scene {
    height: 432px;
  }
  .flashcard-face {
    padding: 56px 68px 52px;
  }
  .flashcard-face p {
    font-size: 1.5rem;
  }
  .flashcard-back p {
    font-size: 1.4375rem;
  }
  .fc-btn {
    padding: 10px 22px;
  }
  .fc-btn--shuffle {
    padding: 10px 26px;
  }
}

/* Compact laptop / tablet landscape (≤ 760px viewport height) */
@media (max-height: 760px) {
  .noteviewer-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
  .noteviewer-header h1 {
    font-size: 1.625rem;
    margin-bottom: 4px;
  }
  .fc-page-header {
    margin-bottom: 12px;
  }
  .fc-page-title-row {
    padding-bottom: 12px;
  }
  .fc-page-h1 {
    font-size: 1.625rem;
    margin-bottom: 4px;
  }
  .fc-study-zone {
    gap: 14px;
    padding: 16px 28px 14px;
  }
  .fc-session-rail {
    gap: 8px;
  }
  .flashcard-counter {
    padding: 5px 18px;
    font-size: 0.75rem;
  }
  .flashcard-scene {
    height: 340px;
  }
  .flashcard-face {
    padding: 44px 56px 40px;
  }
  .flashcard-face p {
    font-size: 1.375rem;
    line-height: 1.50;
  }
  .flashcard-back p {
    font-size: 1.25rem;
  }
  .fc-btn {
    padding: 9px 20px;
    font-size: 0.8125rem;
  }
  .fc-btn--shuffle {
    padding: 9px 24px;
  }
}

/* Very short screens — minimal stack (≤ 660px viewport height) */
@media (max-height: 660px) {
  .noteviewer-main-inner {
    padding-top: 16px;
  }
  .noteviewer-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .fc-page-header {
    margin-bottom: 8px;
  }
  .fc-page-title-row {
    padding-bottom: 8px;
  }
  .fc-page-h1 {
    font-size: 1.375rem;
    margin-bottom: 2px;
  }
  .fc-study-zone {
    gap: 12px;
    padding: 14px 24px 12px;
  }
  .flashcard-scene {
    height: 290px;
  }
  .flashcard-face {
    padding: 36px 48px 32px;
  }
  .flashcard-face p {
    font-size: 1.25rem;
  }
  .flashcard-back p {
    font-size: 1.125rem;
  }
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE (width-based) — runs after height queries
   so width breakpoints override height values on narrow screens
───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fc-study-zone {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .fc-study-zone {
    padding: 24px 20px 20px;
    border-radius: 18px;
    gap: 16px;
  }
  .fc-study-zone::before {
    width: 420px;
    height: 360px;
  }
  .flashcard-scene {
    height: 420px;
  }
  /* No persistent hover lift on touch */
  .flashcard-scene:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  .flashcard-scene {
    height: 360px;
  }
  .flashcard-face {
    padding: 52px 28px 48px;
    border-radius: 16px;
  }
  .flashcard-face p {
    font-size: 1.25rem;
    max-width: 100%;
  }
  .flashcard-back p {
    font-size: 1.1875rem;
  }
  .flashcard-controls {
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }
  .fc-btn {
    padding: 10px 18px;
    font-size: 0.8125rem;
  }
  .fc-btn--shuffle {
    padding: 10px 22px;
  }
}

@media (max-width: 480px) {
  .flashcard-scene {
    height: 300px;
  }
  .flashcard-face {
    padding: 44px 20px 40px;
  }
  .flashcard-face p {
    font-size: 1.125rem;
    line-height: 1.55;
  }
  .flashcard-back p {
    font-size: 1.0625rem;
  }
}

/* =========================
   Flashcard Light-Mode Port
   Scoped to the flashcard page so notes/questions/MCQ keep their current system.
========================= */

html.theme-light body:has(.noteviewer-body--flashcards) .nv-canvas {
  background: #FFFBF5;
}

html.theme-light body:has(.noteviewer-body--flashcards) .noteviewer-main::before,
html.theme-light body:has(.noteviewer-body--flashcards) .noteviewer-main::after,
html.theme-light body:has(.noteviewer-body--flashcards) .noteviewer-main-inner::before {
  display: none;
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-page-h1 {
  color: #1B1B2F;
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-page-title-row .note-resource-back-btn {
  color: rgba(27,27,47,0.42);
  border-color: rgba(180,160,120,0.12);
  background: #FFFFFF;
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-page-title-row .note-resource-back-btn:hover {
  color: #1B1B2F;
  border-color: rgba(197,160,40,0.28);
  background: #FFFDF9;
}

/* Flashcards now uses the standard noteviewer rail; legacy flashcard-specific
   rail/drawer overrides were removed so .nv-rail stays shared everywhere. */

html.theme-light body:has(.noteviewer-body--flashcards) .fc-study-zone,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-card-system {
  height: auto;
  overflow: visible;
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-study-zone {
  background: #FFFFFF;
  border-color: #E7DFD1;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(26,18,6,0.06), 0 16px 48px rgba(26,18,6,0.04);
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-study-zone::before {
  display: none;
}

/* Layout half of theme-dark.css's mastery-indicator rules, hoisted so light
   positions and sizes the badge identically; each theme keeps its colors. */
body:has(.noteviewer-body--flashcards) .fc-mastery-indicator {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
}

body:has(.noteviewer-body--flashcards) .fc-mastery-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-mastery-indicator {
  color: rgba(27,27,47,0.55);
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-mastery-pct {
  color: #1B1B2F;
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-mastery-label {
  color: #4B5563;
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-counter {
  background: #F6EBD2;
  border-color: #C89A3D;
  color: #4F4A42;
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-progress-track {
  background: #E7DFD1;
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-progress-fill {
  background: #0F8B83;
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-face {
  overflow: hidden;
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-front {
  background: #FFFFFF;
  border: 1px solid #E7DFD1;
  border-top: 2px solid #D8CFBF;
  box-shadow: 0 4px 16px rgba(26,18,6,0.06), 0 1px 0 #F6EBD2 inset;
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-back {
  background: #FFFFFF;
  border: 1px solid #E6F5F2;
  border-top-color: #0B756E; /* keep teal accent; dark's top border is 1px */
  box-shadow: 0 4px 16px rgba(26,18,6,0.06), 0 1px 0 #E6F5F2 inset;
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-front::after,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-back::after {
  content: none;
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-face p {
  color: #151515;
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-back p {
  color: #181512;
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-label {
  color: #4B5563;
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-divider {
  background: rgba(197,160,40,0.28);
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-hint {
  color: rgba(27,27,47,0.50);
}

html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-hint:empty,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-hint:has(span:empty),
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-hint span:empty {
  display: none;
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-helper-row {
  color: rgba(27,27,47,0.40);
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-helper-icon {
  flex-shrink: 0;
  opacity: 0.50;
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-btn,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-btn--shuffle,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-btn--secondary,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-btn--nav {
  border-color: var(--border-control); /* #E7DFD1 = 1.32:1 boundary [R-contrast] */
  background: #FFFFFF;
  color: #4F4A42;
  box-shadow: none;
}

/* #fc-shuffle ID rules (unscoped, ~4570) outrank every class rule and leak
   the dark periwinkle border + white hover text into light mode
   [R-contrast fc-shuffle, R-hover-AA] */
html.theme-light #fc-shuffle {
  border-color: var(--border-control);
}

html.theme-light #fc-shuffle::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

html.theme-light #fc-shuffle:hover {
  background: var(--accent-soft);
  border-color: var(--border-control);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-btn:hover,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-btn--shuffle:hover,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-btn--secondary:hover,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-btn--nav:hover {
  background: #FFFDF9;
  border-color: #D8CFBF;
  color: #151515;
  box-shadow: 0 2px 8px rgba(26,18,6,0.05);
}

html.theme-light body:has(.noteviewer-body--flashcards) .fc-btn:focus-visible {
  outline: 2px solid var(--focus-ring); /* gold #C89A3D ring was ~2.1:1 [R-focus] */
}

/* Light flashcard responsive tiers removed: geometry now comes from the
   shared base height/width tiers above (same cascade as dark). Light keeps
   color-only overrides in the main block. */

/* =========================
   Question Cards
   Locally scoped tokens. Card surface is NEUTRAL midnight ink — only
   marginally lifted off the page background. Periwinkle (rgba(132,
   182, 255, …)) appears only on borders, the open-state top rail, the
   badge and answer-panel border. The card is never a blue fill.
========================= */

.question-list,
.mcq-list,
.question-card {
  --qc-surface-1:        rgba(17, 20, 34, 0.94);
  --qc-surface-2:        rgba(12, 15, 26, 0.97);
  --qc-surface-1-hover:  rgba(20, 24, 40, 0.96);
  --qc-surface-2-hover:  rgba(13, 17, 30, 0.97);
  --qc-surface-1-open:   rgba(20, 24, 40, 0.96);
  --qc-surface-2-open:   rgba(13, 17, 30, 0.97);

  --qc-border:        rgba(148, 163, 184, 0.16);
  --qc-border-hover:  rgba(132, 182, 255, 0.30);
  --qc-border-open:   rgba(132, 182, 255, 0.42);

  --qc-text:          rgba(232, 238, 255, 0.92);
  --qc-text-strong:   rgba(245, 248, 255, 0.98);

  --qc-system-accent:        rgba(132, 182, 255, 1);
  --qc-system-accent-soft:   rgba(132, 182, 255, 0.12);

  --qc-shadow-rest:   0 14px 36px rgba(0, 0, 0, 0.28);
  --qc-shadow-hover:  0 18px 44px rgba(0, 0, 0, 0.32);
  --qc-shadow-open:   0 20px 50px rgba(0, 0, 0, 0.36);

  /* Answer panel — lifted slate "explanation sheet" surface. Visibly
     brighter than the card body so the reveal feels rewarding. The
     border is a near-invisible neutral hairline; the panel's identity
     comes from the lifted fill + the cyan top-edge accent (::before).
     Slightly more neutral than Pass 6/7 — the previous value leaned
     too "navy slate" against the rest of the product. */
  --qc-answer-surface-1: rgba(28, 33, 50, 0.97);
  --qc-answer-surface-2: rgba(20, 25, 40, 0.98);
  --qc-answer-border:    rgba(148, 163, 184, 0.12);
  --qc-answer-text:      #f2f7ff;
}

/* Resource-identity tokens — Topic Questions (champagne/gold) on
   .question-list, Multiple Choice (raspberry/rose) on .mcq-list.
   These mirror the landing-page .lp-stats-item--questions / --mcqs
   tokens so each resource keeps a consistent identity across the
   product. The card surface stays neutral; these accents only appear
   on small premium details (badge, top rail, answer label, answer
   panel top strip, hover affordances). */
.question-list {
  /* Topic Questions identity — clean teal-cyan, fresh and academic.
     Mirrors the cyan/teal accents used elsewhere on the product (study
     modes, biology accents). Bright cyan #22d3ee for thin highlights,
     teal-300 #5eead4 for the secondary warmer mid-tone. */
  --qc-resource-accent:        rgba(34, 211, 238, 1);
  --qc-resource-accent-2:      rgba(94, 234, 212, 0.92);
  --qc-resource-soft:          rgba(34, 211, 238, 0.10);
  --qc-resource-glow:          rgba(20, 184, 166, 0.08);
  --qc-resource-border:        rgba(34, 211, 238, 0.28);
  --qc-resource-border-strong: rgba(34, 211, 238, 0.46);
  --qc-resource-text-warm:     rgba(186, 230, 253, 0.96);
  --qc-resource-text-bright:   #e0f7fa;
}

.mcq-list {
  /* Multiple Choice identity — refined emerald/teal-green. Distinct
     from the cyan Topic-Questions accent and from the Tailwind-green
     used by the .is-correct option state (that one is rgb(34,197,94)
     — pure green). Emerald-500 (#10b981) and teal-300 (#5eead4) keep
     the MCQ tab feeling premium, not like a "correct" alert. */
  --qc-resource-accent:        rgba(16, 185, 129, 1);
  --qc-resource-accent-2:      rgba(94, 234, 212, 0.92);
  --qc-resource-soft:          rgba(16, 185, 129, 0.10);
  --qc-resource-glow:          rgba(16, 185, 129, 0.06);
  --qc-resource-border:        rgba(52, 211, 153, 0.28);
  --qc-resource-border-strong: rgba(52, 211, 153, 0.42);
  --qc-resource-text-warm:     rgba(167, 243, 208, 0.96);
  --qc-resource-text-bright:   #ecfdf5;
}

/* ── Question list ── */
.question-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Reset noteviewer-body margins/sizes within cards */
.question-card p {
  margin: 0;
  line-height: inherit;
  font-size: inherit;
}

/* ── Card shell ──
   Calm raised dark-glass surface — sits ABOVE the page background but
   never reads as blue. Periwinkle is reserved for borders and the
   open-state top rail. Soft black depth shadow, no coloured glow. */
.question-card {
  position: relative;
  background: linear-gradient(180deg, var(--qc-surface-1) 0%, var(--qc-surface-2) 100%);
  border: 1px solid var(--qc-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    var(--qc-shadow-rest),
    inset 0 1px 0 rgba(255, 255, 255, 0.040);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

/* Subtle 1px lift on hover — modern SaaS-style feedback without
   becoming a glow. Open cards stay grounded so the answer panel
   beneath the header stays visually anchored. */
.question-card:not(.is-open):hover {
  border-color: var(--qc-border-hover);
  background: linear-gradient(180deg, var(--qc-surface-1-hover) 0%, var(--qc-surface-2-hover) 100%);
  box-shadow:
    var(--qc-shadow-hover),
    inset 0 1px 0 rgba(255, 255, 255, 0.050);
  transform: translateY(-1px);
}

/* MCQ cards aren't an interactive surface — don't lift. */
.question-card[data-mcq]:hover {
  transform: none;
}

.question-card.is-open {
  border-color: var(--qc-border-open);
  background: linear-gradient(180deg, var(--qc-surface-1-open) 0%, var(--qc-surface-2-open) 100%);
  box-shadow:
    var(--qc-shadow-open),
    0 0 0 1px rgba(132, 182, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.question-card.is-open:hover {
  border-color: rgba(132, 182, 255, 0.52);
}

/* Top accent rail — only on open state. Restrained periwinkle gradient,
   fades at edges. Says "this card is active", not "this is a CTA". */
.question-card.is-open::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(132, 182, 255, 0.78) 30%,
    rgba(180, 200, 255, 0.92) 50%,
    rgba(132, 182, 255, 0.78) 70%,
    transparent 100%);
  opacity: 0.65;
  pointer-events: none;
  z-index: 2;
}

/* ── Card header row — full row is the click target ── */
.question-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.question-card.is-open .question-header {
  border-bottom: 1px solid rgba(132, 182, 255, 0.16);
  padding-bottom: 22px;
}

/* ── Question number badge ──
   Refined dark-glass marker with a periwinkle hairline. Reads as a
   premium index marker, not a button. Brightens softly on open state. */
.question-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(132, 182, 255, 0.10), rgba(20, 26, 46, 0.42));
  border: 1px solid rgba(132, 182, 255, 0.22);
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(206, 224, 255, 0.92);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.050);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}

.question-card:hover .question-num {
  border-color: rgba(132, 182, 255, 0.34);
  color: rgba(218, 232, 255, 0.96);
}

.question-card.is-open .question-num {
  background: linear-gradient(180deg, rgba(132, 182, 255, 0.18), rgba(20, 26, 46, 0.42));
  border-color: rgba(132, 182, 255, 0.46);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 0 0 3px rgba(132, 182, 255, 0.10);
}

/* ── Question text ──
   The hero of the card. Bright off-white, semibold, comfortable line-
   height. Scales subtly with viewport so phones don't shrink too small. */
.question-text {
  flex: 1;
  min-width: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.22vw, 1.125rem);
  font-weight: 600;
  color: var(--qc-text);
  line-height: 1.55;
  margin: 0;
  letter-spacing: -0.005em;
  transition: color 0.22s ease;
}

.question-card:hover .question-text {
  color: rgba(238, 244, 255, 0.96);
}

.question-card.is-open .question-text {
  color: var(--qc-text-strong);
}

/* ── Reveal button — neutral dark-glass pill ──
   Sits as a quiet but obvious control inside the card. Periwinkle is
   the HOVER accent, not the rest fill — at rest it's a clean dark pill
   so it never competes with the card chrome. */
.btn-reveal {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 20px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(216, 228, 255, 0.92);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.question-header:hover .btn-reveal,
.btn-reveal:hover {
  background: rgba(132, 182, 255, 0.12);
  border-color: rgba(132, 182, 255, 0.38);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.060),
    0 2px 10px rgba(120, 174, 255, 0.14);
}

.question-header:active .btn-reveal,
.btn-reveal:active {
  transform: translateY(1px);
}

.btn-reveal.is-open {
  background: rgba(132, 182, 255, 0.10);
  border-color: rgba(132, 182, 255, 0.34);
  color: rgba(228, 238, 255, 0.98);
}

.question-header:hover .btn-reveal.is-open,
.btn-reveal.is-open:hover {
  background: rgba(132, 182, 255, 0.18);
  border-color: rgba(132, 182, 255, 0.48);
  color: #ffffff;
}

.btn-reveal-label {
  /* text label inside the pill — updated by JS */
}

.btn-reveal-icon {
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}

.btn-reveal.is-open .btn-reveal-icon {
  transform: rotate(180deg);
}

/* ── Answer reveal — smooth height animation ── */
.qa-reveal-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.36s cubic-bezier(.4,0,.2,1);
}

.qa-reveal-wrap.is-open {
  grid-template-rows: 1fr;
}

.qa-inner {
  overflow: hidden;
  min-height: 0;
}

/* ── Answer content ──
   Symmetric padding so the answer panel fills the card width and reads
   as a full "revealed explanation" surface, not a tucked-in inset.
   Padding scales with viewport via clamp(). */
.question-answer {
  padding: clamp(20px, 2vw, 26px)
           clamp(26px, 2.6vw, 32px)
           clamp(28px, 2.8vw, 34px)
           clamp(26px, 2.6vw, 32px);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.28s ease 0.08s, transform 0.28s ease 0.08s;
}

.qa-reveal-wrap.is-open .question-answer {
  opacity: 1;
  transform: translateY(0);
}

.answer-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78125rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a5f3fc;
  margin-bottom: 14px;
}

.answer-label::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.85), rgba(34, 211, 238, 0));
}

/* Explanation panel — lifted slate study surface. Distinctly brighter
   than the card body so the reveal feels valuable. The border is a
   near-invisible neutral hairline; the panel's identity comes from
   the lifted fill, a brighter inner top highlight, and a cyan top
   accent strip (::before). This keeps it from feeling like "another
   box inside a box". */
.answer-body {
  position: relative;
  font-size: clamp(1.0625rem, 1.0rem + 0.18vw, 1.125rem);
  color: var(--qc-answer-text);
  line-height: 1.82;
  font-weight: 450;
  padding: clamp(26px, 2.6vw, 32px) clamp(28px, 2.8vw, 34px);
  background: linear-gradient(180deg, var(--qc-answer-surface-1) 0%, var(--qc-answer-surface-2) 100%);
  border: 1px solid var(--qc-answer-border);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 8px 24px rgba(0, 0, 0, 0.30);
}

/* Force the strong answer text colour to win over .noteviewer-body p
   (specificity 0,2,0 — same as the tied selector but later in cascade)
   so paragraph rendering inside the panel matches the panel intent. */
.answer-body p,
.answer-body li,
.answer-body span:not([class*="katex"]) {
  color: var(--qc-answer-text);
  font-weight: 450;
}

.answer-body::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.70) 18%,
    rgba(94, 234, 212, 0.95) 50%,
    rgba(34, 211, 238, 0.70) 82%,
    transparent 100%);
  opacity: 0.95;
  pointer-events: none;
}

/* Inline emphasis stays bright against the slate fill. */
.answer-body strong,
.answer-body b {
  color: #ffffff;
  font-weight: 700;
}

.answer-body em,
.answer-body i {
  color: rgba(232, 240, 255, 0.94);
}

/* ── Focus states ── */
.btn-reveal:focus-visible {
  outline: 2px solid rgba(132, 182, 255, 0.78);
  outline-offset: 3px;
}

/* ═════════════════════════════════════════════════════════════════
   Resource identity — Topic Questions teal-cyan accents
   Surgical overrides scoped to .question-list so MCQ pages keep
   their own identity. Card surface stays neutral; the cyan accent
   lives only in: number badge, hover affordances, open-card top
   rail + faint glow, answer panel top strip + corner glow + label.
   ═════════════════════════════════════════════════════════════════ */

/* Badge → dark glass with cool cyan hairline. Pale aqua number. */
.question-list .question-num {
  background: linear-gradient(180deg, var(--qc-resource-soft), rgba(20, 26, 46, 0.42));
  border-color: var(--qc-resource-border);
  color: var(--qc-resource-text-warm);
}

.question-list .question-card:hover .question-num {
  border-color: rgba(34, 211, 238, 0.40);
  color: var(--qc-resource-text-bright);
}

.question-list .question-card.is-open .question-num {
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.22), rgba(20, 26, 46, 0.42));
  border-color: var(--qc-resource-border-strong);
  color: var(--qc-resource-text-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.090),
    0 0 0 3px rgba(34, 211, 238, 0.12);
}

/* Hover border picks up a hint of cyan (still mostly neutral). */
.question-list .question-card:hover {
  border-color: rgba(34, 211, 238, 0.26);
}

/* Open card → cool cyan border, faint teal wash near the top edge,
   cyan top rail. The card body never becomes cyan; only the top edge
   carries the resource identity. Border alphas softened slightly from
   Pass 7 so the cyan reads as "selected" rather than "outlined". */
.question-list .question-card.is-open {
  border-color: rgba(34, 211, 238, 0.30);
  background:
    radial-gradient(ellipse 70% 28% at 50% 0%, var(--qc-resource-glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--qc-surface-1-open) 0%, var(--qc-surface-2-open) 100%);
}

.question-list .question-card.is-open:hover {
  border-color: rgba(34, 211, 238, 0.46);
}

.question-list .question-card.is-open .question-header {
  border-bottom-color: rgba(34, 211, 238, 0.18);
}

.question-list .question-card.is-open::before {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--qc-resource-accent) 30%,
    var(--qc-resource-accent-2) 50%,
    var(--qc-resource-accent) 70%,
    transparent 100%);
  opacity: 0.72;
}

/* Reveal pill → keep the neutral rest state. Hover picks up cyan so
   the resource identity shows up in the active gesture. The open
   "Hide" state stays on the system cool periwinkle for affordance
   clarity (so the user can tell the answer is currently visible). */
.question-list .question-header:hover .btn-reveal:not(.is-open),
.question-list .btn-reveal:not(.is-open):hover {
  background: rgba(34, 211, 238, 0.10);
  border-color: var(--qc-resource-border-strong);
  color: var(--qc-resource-text-bright);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.060),
    0 2px 12px rgba(34, 211, 238, 0.16);
}

/* Answer label → pale cyan. Tick mark scaled up slightly. */
.question-list .answer-label {
  color: var(--qc-resource-text-warm);
}

.question-list .answer-label::before {
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--qc-resource-accent), rgba(34, 211, 238, 0));
}

/* Answer panel → cyan top strip + faint teal corner glow on the lifted
   slate surface. The body fill stays neutral; only the top edge and
   corner carry the resource accent. */
.question-list .answer-body {
  background:
    radial-gradient(ellipse 65% 80% at 0% 0%, var(--qc-resource-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--qc-answer-surface-1) 0%, var(--qc-answer-surface-2) 100%);
}

.question-list .answer-body::before {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--qc-resource-accent) 20%,
    var(--qc-resource-accent-2) 50%,
    var(--qc-resource-accent) 80%,
    transparent 100%);
  opacity: 0.92;
}

/* ── Responsive — tablet ──
   The answer indent collapses early so long explanations have room to
   breathe before the page narrows further. */
@media (max-width: 900px) {
  .question-answer {
    padding: 20px 24px 24px 24px;
  }
}

/* ── Responsive — narrow screens ──
   Cards become near-full-width within the safe page padding. The header
   wraps the reveal button onto a second line so it never collides with
   long question text on phones. */
@media (max-width: 640px) {
  .question-list {
    gap: 14px;
  }
  .question-header {
    gap: 14px;
    padding: 18px 18px;
    flex-wrap: wrap;
  }
  .question-card.is-open .question-header {
    padding-bottom: 16px;
  }
  .question-num {
    min-width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.8125rem;
  }
  .question-text {
    font-size: 1rem;
    flex: 1 1 60%;
  }
  .btn-reveal {
    padding: 9px 16px;
    min-height: 38px;
    font-size: 0.8125rem;
    /* Once wrapped onto its own row, align the button with the question
       column (badge width + gap) so the second row reads cleanly. */
    margin-left: 48px;
  }
  .question-answer {
    padding: 18px 18px 22px 18px;
  }
  .answer-body {
    padding: 22px;
    font-size: 1rem;
    line-height: 1.78;
    border-radius: 14px;
  }
  .questions-mode-tabs {
    width: 100%;
    justify-content: stretch;
    margin-bottom: 22px;
  }
  .questions-mode-tab {
    flex: 1;
    height: 40px;
    padding: 0 12px;
  }
}

.empty-message {
  color: var(--nv-muted);
  font-size: 0.95rem;
}

/* =========================
   Premium Gate — locked content state
   Sits inside .note-body / .noteviewer-body for fully-paywalled resources.
   Surface, typography and accents mirror .sr-card / .lp-step-card so the
   gate reads as native chrome, not a marketing card.
========================= */

.premium-gate {
  /* exam-paper serif (Palatino on Windows), matching notes / TQ / MCQ. Self-
     contained because --ng-serif is only defined under .notes-shell. */
  --pg-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  margin: 1.75rem auto 0.75rem;
  width: 100%;
  /* Scales with the available reading column. On note pages the parent
     `.note-body` (880px) caps it; on resource index pages it can stretch
     up to 960px on wide viewports without crashing into the rail. */
  max-width: min(960px, calc(100vw - 420px));
  padding: 0 4px;
}

.premium-gate__surface {
  position: relative;
  padding: clamp(34px, 4vw, 52px) clamp(36px, 4.2vw, 56px) clamp(28px, 3.4vw, 42px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  /* exam-paper panel: periwinkle + teal corner glow over the dark paper, same
     recipe as the notes --ng-panel-glow / --ng-card-bg. */
  background:
    radial-gradient(1100px 480px at 84% -12%, rgba(91, 140, 255, 0.13), transparent 60%),
    radial-gradient(760px 380px at -4% -6%, rgba(45, 212, 191, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(18, 22, 36, 0.92) 0%, rgba(11, 15, 26, 0.97) 100%);
  box-shadow:
    0 18px 48px -14px rgba(0, 0, 0, 0.60),
    0 2px 8px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  text-align: left;
}

/* Top accent rail — periwinkle gradient, fades at edges. Matches .sr-card */
.premium-gate__surface::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(91, 140, 255, 0.62) 30%,
    rgba(169, 190, 255, 0.78) 50%,
    rgba(91, 140, 255, 0.62) 70%,
    transparent 100%);
  opacity: 0.55;
}

/* ── Status badge ──────────────────────────────────────────── */
.premium-gate__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  margin: 0 0 24px;
  border-radius: 999px;
  background: rgba(91, 140, 255, 0.10);
  border: 1px solid rgba(91, 140, 255, 0.24);
  color: rgba(190, 205, 255, 0.92);
  font-size: 0.71875rem;
  font-weight: 650;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
}

.premium-gate__badge-icon {
  flex-shrink: 0;
  color: rgba(169, 190, 255, 0.95);
}

.premium-gate__badge-label {
  line-height: 1;
}

/* ── Hero content ──────────────────────────────────────────── */
.premium-gate__content {
  margin-bottom: clamp(28px, 2.8vw, 36px);
  max-width: 650px;
}

/* Title override scoped to outrank `.note-body h2` / `.noteviewer-body h2`
   section-heading styling (left rail, gradient wash, 88px top margin). */
.premium-gate__title,
.note-body .premium-gate__title,
.noteviewer-body .premium-gate__title {
  display: block;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--pg-serif);
  font-size: clamp(2rem, 3vw, 2.45rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: rgba(245, 248, 255, 0.97);
  -webkit-text-fill-color: currentColor;
}

/* Suppress the inherited h2 accents — `.note-body h2::before` draws a vertical
   left-rail pill and `h2::after` a short underline bar; both bleed into the
   gate title on the .noteviewer-body surfaces (flashcards / TQ / MCQ). */
.premium-gate__title::before,
.note-body .premium-gate__title::before,
.noteviewer-body .premium-gate__title::before,
.premium-gate__title::after,
.note-body .premium-gate__title::after,
.noteviewer-body .premium-gate__title::after {
  content: none;
}

/* Lede + trust paragraph overrides — outrank `.note-body p` (0,1,1)
   which would otherwise inject larger font-size, deeper line-height
   and a 22px bottom margin. */
.premium-gate__lede,
.note-body .premium-gate__lede,
.noteviewer-body .premium-gate__lede {
  margin: 0;
  max-width: 650px;
  font-family: var(--pg-serif);
  font-size: clamp(1.05rem, 0.4vw + 0.97rem, 1.15rem);
  line-height: 1.65;
  color: rgba(214, 223, 242, 0.86);
}

/* ── Benefit chips ─────────────────────────────────────────── */
/* Override .note-body / .noteviewer-body list rail + en-dash bullets. */
.premium-gate__benefits,
.note-body .premium-gate__benefits,
.noteviewer-body .premium-gate__benefits {
  list-style: none;
  margin: 0 0 clamp(28px, 2.8vw, 36px);
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.note-body .premium-gate__benefits > li::before,
.noteviewer-body .premium-gate__benefits > li::before {
  content: none;
}

/* Clean check-listed benefits — no cards (matches the notes' plain-points
   exam-paper style); teal tick + serif label. */
.premium-gate__benefit,
.note-body .premium-gate__benefits > .premium-gate__benefit,
.noteviewer-body .premium-gate__benefits > .premium-gate__benefit {
  position: static;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--pg-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(232, 238, 255, 0.90);
  line-height: 1.45;
  text-align: left;
}

.premium-gate__check {
  flex-shrink: 0;
  color: #34d399;
}

.premium-gate__benefit-text {
  min-width: 0;
}

/* ── Action row ────────────────────────────────────────────── */
.premium-gate__action {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 clamp(22px, 2.2vw, 28px);
}

/* Primary CTA — mirrors .nav-cta gradient so the lock screen feels
   native to the navbar Get Premium button. Scoped as `a.premium-gate__cta`
   to outrank .note-body a (0,2,1) without resorting to !important. */
a.premium-gate__cta,
a.premium-gate__cta:link,
a.premium-gate__cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  background: linear-gradient(180deg, #4d6ef8 0%, #3a56e0 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(130, 158, 255, 0.34);
  cursor: pointer;
  box-shadow:
    0 14px 34px rgba(50, 76, 210, 0.32),
    0 3px 8px rgba(50, 76, 210, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

a.premium-gate__cta:hover {
  background: linear-gradient(180deg, #5d7eff 0%, #4464f0 100%);
  border-color: rgba(150, 175, 255, 0.46);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px rgba(50, 76, 210, 0.40),
    0 3px 8px rgba(50, 76, 210, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

a.premium-gate__cta:active {
  transform: translateY(0);
  background: linear-gradient(180deg, #4259d6 0%, #2f44bf 100%);
  color: #ffffff;
  text-decoration: none;
  box-shadow:
    0 6px 16px rgba(50, 76, 210, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

a.premium-gate__cta:focus-visible {
  outline: 2px solid rgba(120, 152, 255, 0.7);
  outline-offset: 3px;
  color: #ffffff;
  text-decoration: none;
}

.premium-gate__cta-arrow {
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

a.premium-gate__cta:hover .premium-gate__cta-arrow {
  transform: translateX(2px);
}

/* Defensive: .note-body a:hover changes link colour to cyan. Keep `!important`
   only on text colour + opacity so the CTA never reads as "faded/disabled"
   under unexpected cascade. Everything else stays cascade-clean. */
.note-body .premium-gate a.premium-gate__cta,
.note-body .premium-gate a.premium-gate__cta:link,
.note-body .premium-gate a.premium-gate__cta:visited,
.note-body .premium-gate a.premium-gate__cta:hover,
.note-body .premium-gate a.premium-gate__cta:active,
.note-body .premium-gate a.premium-gate__cta:focus-visible,
.noteviewer-body .premium-gate a.premium-gate__cta,
.noteviewer-body .premium-gate a.premium-gate__cta:link,
.noteviewer-body .premium-gate a.premium-gate__cta:visited,
.noteviewer-body .premium-gate a.premium-gate__cta:hover,
.noteviewer-body .premium-gate a.premium-gate__cta:active,
.noteviewer-body .premium-gate a.premium-gate__cta:focus-visible {
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none;
  pointer-events: auto;
  text-decoration: none;
}

/* Secondary link — quiet supporting action */
a.premium-gate__secondary,
a.premium-gate__secondary:link,
a.premium-gate__secondary:visited {
  font-size: 0.9375rem;
  font-weight: 580;
  color: rgba(190, 205, 255, 0.80);
  text-decoration: none;
  letter-spacing: 0.005em;
  border-bottom: 1px solid rgba(91, 140, 255, 0.24);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}

a.premium-gate__secondary:hover {
  color: rgba(224, 230, 255, 0.95);
  border-bottom-color: rgba(169, 190, 255, 0.55);
  text-decoration: none;
}

a.premium-gate__secondary:focus-visible {
  outline: 2px solid rgba(120, 152, 255, 0.7);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Trust line ────────────────────────────────────────────── */
.premium-gate__trust,
.note-body .premium-gate__trust,
.noteviewer-body .premium-gate__trust {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(148, 163, 184, 0.10);
  font-size: 0.8438rem;
  line-height: 1.5;
  color: rgba(210, 218, 240, 0.60);
}

.premium-gate__trust-icon {
  flex-shrink: 0;
  color: rgba(91, 140, 255, 0.78);
}

/* ── Responsive ────────────────────────────────────────────── */
/* Tablet — once the rail collapses (~860px) the gate gets the full column,
   so re-cap to a comfortable tablet width and tighten internal scale. */
@media (max-width: 880px) {
  .premium-gate {
    max-width: 720px;
  }
  .premium-gate__surface {
    padding: 32px 30px 26px;
    border-radius: 20px;
  }
  .premium-gate__badge {
    margin-bottom: 20px;
  }
  .premium-gate__content {
    margin-bottom: 24px;
  }
  .premium-gate__title {
    font-size: 1.85rem;
    line-height: 1.08;
  }
  .premium-gate__lede {
    font-size: 1rem;
  }
  .premium-gate__benefits,
  .note-body .premium-gate__benefits,
  .noteviewer-body .premium-gate__benefits {
    margin-bottom: 24px;
    gap: 11px;
  }
  .premium-gate__benefit,
  .note-body .premium-gate__benefits > .premium-gate__benefit,
  .noteviewer-body .premium-gate__benefits > .premium-gate__benefit {
    min-height: 0;
    padding: 0;
    font-size: 1rem;
  }
  a.premium-gate__cta,
  a.premium-gate__cta:link,
  a.premium-gate__cta:visited {
    min-height: 50px;
    padding: 0 24px;
    font-size: 0.96875rem;
  }
}

@media (max-width: 600px) {
  .premium-gate {
    margin-top: 1.25rem;
    padding: 0;
  }
  .premium-gate__surface {
    padding: 22px 20px 18px;
    border-radius: 16px;
  }
  .premium-gate__badge {
    margin-bottom: 14px;
  }
  .premium-gate__content {
    margin-bottom: 18px;
  }
  .premium-gate__title {
    font-size: 1.55rem;
    line-height: 1.12;
  }
  .premium-gate__lede {
    font-size: 0.9375rem;
    line-height: 1.6;
  }
  .premium-gate__benefits,
  .note-body .premium-gate__benefits,
  .noteviewer-body .premium-gate__benefits {
    gap: 10px;
    margin-bottom: 20px;
  }
  .premium-gate__benefit,
  .note-body .premium-gate__benefits > .premium-gate__benefit,
  .noteviewer-body .premium-gate__benefits > .premium-gate__benefit {
    min-height: 0;
    padding: 0;
    font-size: 0.95rem;
  }
  .premium-gate__action {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }
  a.premium-gate__cta,
  a.premium-gate__cta:link,
  a.premium-gate__cta:visited {
    width: 100%;
    min-height: 48px;
    padding: 0 22px;
    font-size: 0.9375rem;
  }
  .premium-gate__secondary {
    text-align: center;
    align-self: center;
  }
  .premium-gate__trust {
    padding-top: 14px;
    font-size: 0.8125rem;
  }
}

/* =========================
   Billing Status Pages
========================= */

.billing-status-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

.billing-status-card {
  text-align: center;
  max-width: 480px;
  width: 100%;
}

.billing-status-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 auto 1.5rem;
}

.billing-status-icon--success {
  background: var(--success-subtle-bg);
  color: var(--success);
}

.billing-status-icon--cancel {
  background: var(--surface-soft);
  color: var(--faint);
}

.billing-status-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.75rem;
}

.billing-status-body {
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 2rem;
  line-height: 1.6;
}

.billing-status-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.billing-status-btn {
  display: inline-block;
  padding: 0.65rem 2rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.billing-status-btn:hover {
  background: var(--accent-hover);
}

.billing-status-btn--secondary {
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--border);
}

.billing-status-btn--secondary:hover {
  background: var(--surface-elevated);
}

/* =========================
   Video Player
========================= */

.video-embed-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio */
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.video-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

.noteviewer-empty-message {
  color: var(--nv-muted);
  font-size: 0.95rem;
}

/* ── Questions mode tabs ─────────────────────────────────────
   Refined glass switch. The container sits as a quiet dark plate; the
   active tab carries a soft cyan or rose selected surface (per resource
   modifier) so the choice is unambiguous — but it never reads as a
   chunky blue slab. Centered above the card column so header → tabs →
   cards form one clean vertical system. */
.questions-mode-tabs {
  display: flex;
  gap: 4px;
  margin: 0 auto 22px;
  padding: 5px;
  background: rgba(12, 15, 28, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 13px;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.040);
  width: fit-content;
}

.questions-mode-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 22px;
  border-radius: 9px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: rgba(220, 226, 245, 0.62);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
  white-space: nowrap;
}

.questions-mode-tab:hover {
  background: rgba(132, 182, 255, 0.06);
  color: rgba(232, 238, 255, 0.92);
}

.questions-mode-tab.is-active,
.questions-mode-tab.is-active:hover {
  color: rgba(245, 248, 255, 1);
  background: rgba(132, 182, 255, 0.12);
  border-color: rgba(132, 182, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 2px 10px rgba(120, 174, 255, 0.10);
}

/* Per-resource active state — each tab carries its resource colour
   when selected, mirroring the landing page's resource-coloured stat
   cards. Inactive tabs stay neutral so the segmented control still
   reads as one calm unit. */
.questions-mode-tab--topic.is-active,
.questions-mode-tab--topic.is-active:hover {
  color: #e0f7fa;
  background: rgba(34, 211, 238, 0.13);
  border-color: rgba(34, 211, 238, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.070),
    0 2px 12px rgba(34, 211, 238, 0.16);
}

.questions-mode-tab--mcq.is-active,
.questions-mode-tab--mcq.is-active:hover {
  color: #d1fae5;
  background: rgba(16, 185, 129, 0.13);
  border-color: rgba(52, 211, 153, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.060),
    0 2px 12px rgba(16, 185, 129, 0.16);
}

.questions-mode-tab:focus-visible {
  outline: 2px solid rgba(132, 182, 255, 0.62);
  outline-offset: 3px;
}

/* ── Header mode switcher — questions-mode-tabs skin hoisted into the page
   header (template: noteviewer/resource_switcher.html). Layout-only deltas;
   all colors ride the shared .questions-mode-tab classes above and their
   theme-light.css overrides. */
.nv-switch {
  margin: 14px auto 2px;
  flex-wrap: wrap;
  justify-content: center;
}

.nv-switch .questions-mode-tab {
  padding: 0 16px;
}

@media (max-width: 700px) {
  .nv-switch {
    width: 100%;
  }
  .nv-switch .questions-mode-tab {
    flex: 1 1 auto;
    height: 36px;
    padding: 0 10px;
  }
}

/* "Whole chapter" eyebrow that precedes the chapter-scope pills. */
.nv-switch-scope {
  align-self: center;
  padding: 0 8px 0 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Provenance chip: which topic a merged question/card/MCQ came from.
   Theme-portable muted pill on defined surface/border/text tokens. */
.nv-topic-tag {
  display: inline-flex;
  align-items: center;
  flex: none;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* On the flashcard faces the chip sits beside the QUESTION/ANSWER label. */
.flashcard-face .fc-topic-tag {
  position: absolute;
  top: 18px;
  right: 18px;
}

/* MCQ Cards — moved to page-scoped pages/css/mcq.css (exam-paper theme matching
   Topic Questions; dark + light). Kept out of this shared file on purpose. */

/* ── Flashcard deck label ───────────────────────────────── */
.flashcard-deck-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.flashcard-deck-count {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* (sidebar-link.is-paid and lock-icon defined in Sidebar section above) */

/* =========================
   Topic Landing Page (Notes Overview)
   Token-driven: every colour resolves from :root tokens (styles.css dark /
   theme-light.css light), so both themes work with no per-theme overrides.
   Number tiles + arrow buttons reuse the rail's cn-chip--*/cn-tint-* palette
   (chapter-navigator.css), scope-extended to .tlo-page — same hash, same
   colours as the sidebar.
========================= */

.tlo-page {
  padding: 12px 0 80px;
}

/* ── Hero header ─────────────────────────────────────────────────────── */
.tlo-hero {
  position: relative;
  margin-bottom: 26px;
}

.tlo-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 56ch;
}

/* Decorative per-subject art. Background-image: absent asset = empty box,
   zero layout impact (absolutely positioned behind the copy column). */
.tlo-hero-art {
  position: absolute;
  top: -10px;
  right: 0;
  width: min(330px, 30vw);
  height: 230px;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.tlo-eyebrow {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.tlo-title {
  margin: 0 0 14px;
  font-size: clamp(2.1rem, 4.5vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--text);
  text-wrap: balance;
}

.tlo-tagline {
  margin: 0 0 18px;
  max-width: 48ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muted);
}

.tlo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tlo-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}

.tlo-pill svg {
  flex-shrink: 0;
  color: var(--accent);
}

/* Optional intro (root index.md) — rules preserved from the previous design;
   the theme-light override for this block still applies. */
.note-body .tl-content-note {
  margin-bottom: 36px;
  padding: 14px 20px;
  border-left: 3px solid rgba(91,140,255,0.38);
  background: rgba(91,140,255,0.030);
  border-radius: 0 6px 6px 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
}

.note-body .tl-content-note h2,
.note-body .tl-content-note h3 {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.75);
  margin: 16px 0 6px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  position: static;
}

.note-body .tl-content-note h3::before {
  display: none;
}

/* ── Stat strip (2-up: Chapters / Topics — real metrics only) ────────── */
.tlo-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tlo-stat {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
}

.tlo-stat + .tlo-stat {
  border-left: 1px solid var(--border);
}

.tlo-stat-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.tlo-stat-icon--chapters {
  background: var(--accent-soft);
  color: var(--accent);
}

.tlo-stat-icon--topics {
  background: var(--info-subtle-bg);
  color: var(--info);
}

.tlo-stat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tlo-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.tlo-stat-label {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ── Chapters section head + search ──────────────────────────────────── */
.tlo-chapters-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 18px;
}

.tlo-h2 {
  margin: 0 0 4px;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.tlo-subhead {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ── Chapter cards ────────────────────────────────────────────────────── */
.tlo-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tlo-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px 18px;
  transition: border-color 160ms ease;
}

.tlo-card:hover {
  border-color: var(--border-2);
}

.tlo-card-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tlo-num {
  width: 48px;
  height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  font-size: 1.0625rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tlo-card-main {
  flex: 1 1 auto;
  min-width: 0;
}

.tlo-card-title {
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}

/* Locked chapters mirror the sidebar's muted-title treatment. The note-body
   heading rules (theme-dark/-light.css) colour every .note-body h3 at high
   specificity (0,3,3), so match that scope + the locked class to win in both
   themes. Same --cn-text-secondary value as the rail (re-exposed on .tlo-page);
   .cn-badge / .cn-lock keep their own colours. */
html.theme-dark .note-body .tlo-card--locked .tlo-card-title,
html.theme-light .note-body .tlo-card--locked .tlo-card-title {
  color: var(--cn-text-secondary);
}

.tlo-preview {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--success-subtle-bg);
  color: var(--success);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tlo-cluster {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
}

.tlo-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
}

.tlo-meta-item svg {
  flex-shrink: 0;
}

.tlo-meta-item + .tlo-meta-item {
  padding-left: 16px;
  border-left: 1px solid var(--border);
}

.tlo-arrow {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 160ms ease;
}

.tlo-arrow:hover svg {
  transform: translateX(2px);
}

.tlo-arrow svg {
  transition: transform 160ms ease;
}

.tlo-arrow:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Collapsible topic deep-links (collapsed by default) ─────────────── */
.tlo-topics {
  margin-top: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.tlo-topics-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-link);
  border-radius: var(--r-sm);
}

.tlo-topics-toggle::-webkit-details-marker {
  display: none;
}

.tlo-topics-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.tlo-topics-chevron {
  flex: none;
  transition: transform 160ms ease;
}

.tlo-topics[open] .tlo-topics-chevron {
  transform: rotate(90deg);
}

.tlo-topic-list {
  padding: 2px 0 6px;
}

.tlo-topic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
}

.tlo-topic-row:hover {
  background: var(--accent-soft);
}

.tlo-topic-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.tlo-topic-num {
  flex: none;
  min-width: 34px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-link);
  font-variant-numeric: tabular-nums;
}

.tlo-topic-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  color: var(--text);
}

.tlo-topic-arrow {
  flex: none;
  color: var(--text-faint);
}

.tlo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tlo-empty {
  color: var(--text-faint);
  font-size: 0.875rem;
  margin: 24px 0;
}

/* AA gate: the rail tint palette was calibrated for 18px icons at 3:1; as
   17px text in light mode several hues fall below 4.5:1. Light theme keeps
   the per-chapter tinted tile but renders the numeral/arrow glyph in ink. */
html.theme-light .tlo-page span.tlo-num,
html.theme-light .tlo-page a.tlo-arrow {
  color: var(--text);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tlo-hero-art {
    display: none;
  }

  .tlo-hero-copy {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .tlo-card-row {
    flex-wrap: wrap;
  }

  .tlo-card-main {
    flex-basis: calc(100% - 64px);
  }

  .tlo-cluster {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .tlo-stats {
    grid-template-columns: 1fr;
  }

  .tlo-stat + .tlo-stat {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlo-card,
  .tlo-arrow,
  .tlo-arrow svg,
  .tlo-topics-chevron {
    transition: none !important;
  }
}

/* =========================
   Math — KaTeX rendering
   Applied only inside .note-body via client-side auto-render.
   No server-side math processing; bleach sanitization is unaffected.
========================= */

/* Display (block) equations — fit-content width so a short equation like
   "p = mv" doesn't sit inside a 880px-wide empty bar.
   max-width: 100% + overflow-x: auto ensures wide equations still scroll. */
.note-body .katex-display {
  display: block;
  width: fit-content;     /* snug, centred box (display:table ignored max-width + overflow-x) */
  margin: 1.8em auto;     /* centred on the column */
  max-width: 100%;        /* never wider than the note body */
  overflow-x: auto;       /* wide equations scroll within the box, never clip via the ancestor overflow:clip */
  overflow-y: hidden;
  padding: 16px 36px 14px; /* generous horizontal padding frames the equation */
  background: rgba(91,140,255,0.055);
  border: 1px solid rgba(91,140,255,0.16);
  border-radius: 10px;
  text-align: center;
  /* Subtle inset highlight — gives the container a sense of intentional depth */
  box-shadow: inset 0 1px 0 rgba(169,190,255,0.08);
}

/* Inline math — slightly enlarged to sit well against 18px body text */
.note-body .katex {
  font-size: 1.05em;
}

/* Display-equation math scale: noticeably larger than body for prominence */
.note-body .katex-display .katex {
  font-size: 1.18em;
}

/* Prevent display math from being clipped on narrow screens */
.note-body .katex-display > .katex {
  white-space: nowrap;
}


/* =========================
   Subject Resources Hub
   Internal dashboard surface — inherits the site midnight base,
   keeps the premium card language without landing-page atmosphere.
========================= */

/* ⚑ THE RESERVATION BELOW IS FOR PAGES WITH CONTENT. A subject page with
   nothing published opts out via .sr-page--empty (rule directly after this
   block). The reservation keeps the footer off the fold, which was settled
   deliberately and more than once, but it was settled for a page carrying a
   card grid. On a page whose whole body is one sentence and one link it
   produced roughly 600px of empty ground between the sentence and the footer,
   which reads as a page that failed to load rather than as a page that is
   honestly empty. Sixteen of the thirty-seven subject pages are in that state
   (measured 2026-09-16). Relaxing it there is a new case, not a re-opening of
   the old one, and every page WITH cards is untouched. */
.sr-page {
  min-height: calc(100vh - 68px);
  background: transparent;
  display: flex;
  justify-content: center;
  padding: 36px 48px 56px;
  position: relative;
}

/* The opt-out. Set by subject_resources.html when the view returns no
   resource_cards, i.e. the subject has nothing published at all.
   min-height:0 and the page is simply as tall as its content: heading,
   one sentence, one link, then the footer. No filler, because a page with
   nothing to show should be short rather than padded out to look busy. */
.sr-page--empty {
  min-height: 0;
}

/* Phones: the topbar is 64px at 767px and below (chrome-navbar.css, the
   max-width: 767px .topbar rule), not the 68 subtracted above, so a hub
   shorter than the screen left a 4px strip of footer at the bottom of the
   first screen (audit K-016). Same fix as the pickers' .si-page in
   styles.css. The :not() is load-bearing: a bare .sr-page here would
   outrank the .sr-page--empty opt-out on source order and pad the empty
   hubs out again. 768 and up keep the rule above (72px bar, no strip). */
@media (max-width: 767px) {
  .sr-page:not(.sr-page--empty) {
    min-height: calc(100svh - 64px);
  }
}

/* Atmosphere/glow layers intentionally disabled — this is an internal page,
   not a marketing hero. Cards carry the depth instead of the background. */
.sr-page::before,
.sr-page::after {
  content: none;
  background: none;
}

.sr-inner {
  width: 100%;
  max-width: 1080px;
  position: relative;
  z-index: 1;
}

/* ── Breadcrumb row ─────────────────────────────────────── */
.sr-nav-row {
  margin-bottom: 18px;
}

/* Left-align breadcrumbs, soften size — they're navigation, not a billboard */
.sr-breadcrumbs {
  justify-content: flex-start;
  text-align: left;   /* inherits the canonical .note-breadcrumbs (notes) size/spacing */
}

.sr-breadcrumbs .breadcrumb-sep {
  margin: 0 8px;
}

/* The separator ENDS the crumb before it (audit K-011, the twin of the nb
   crumb fix in notebook-components.css). As its own flex item the
   separator could close one line or open the next, indented by its margin
   ("· RESOURCES"). Drawn inside the crumb it follows, it stays glued to
   that crumb's last word, so a wrapped trail never starts or ends a line
   on a lone dot. The column gap stands in for the separator's right
   margin, so the rhythm is unchanged: crumb, 8px, dot, 8px, crumb. The
   separator spans stay in the markup (and in every :last-child rule).
   Inside a link the dot also widens its tap target (AP: 20px to 33px).
   Up to 1080px only: the longest hub trail is about 545px, so it never
   wraps in the desktop column, and the desktop keeps its exact pixels
   (drawn inline, the dot lands a fraction of a pixel away in WebKit).
   Tablets are in, because larger text wraps the trail there too. */
@media (max-width: 1080px) {
  .sr-breadcrumbs {
    column-gap: 8px;
  }
  .sr-breadcrumbs .breadcrumb-sep {
    display: none;
  }
  /* a word wider than the column (very large text or zoom) breaks inside
     its own crumb instead of pushing the page sideways */
  .sr-breadcrumbs > * {
    min-width: 0;
    overflow-wrap: break-word;
  }
  .sr-breadcrumbs > :not(.breadcrumb-sep):not(:last-child)::after {
    content: "\00B7";
    content: "\00B7" / "";
    margin-left: 8px;
    font-weight: 500;
    font-size: 0.95em;
    line-height: 0; /* the smaller glyph must not stretch the crumb's line box */
    color: rgba(255, 255, 255, 0.28);
  }
  html.theme-light .sr-breadcrumbs > :not(.breadcrumb-sep):not(:last-child)::after {
    color: rgba(21, 26, 45, 0.30);
  }
}

/* ── Header block ──────────────────────────────────────── */
.sr-header {
  margin-bottom: 22px;
  max-width: 720px;
}

/* Page title — internal dashboard heading, premium but not hero-scale */
.sr-title {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 760;
  letter-spacing: -0.028em;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.12;
}

.sr-title-accent {
  background: linear-gradient(to right, #f0f4ff 0%, #b8cfff 50%, #78aeff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sr-subtitle {
  font-size: 0.9375rem;
  color: rgba(228, 234, 255, 0.70);
  margin: 0;
  line-height: 1.55;
  max-width: 580px;
}

/* ── Card grid ──────────────────────────────────────────── */
.sr-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 26px;
}

/* Base card — mirrors lp-step-card / lp-proof glass surface */
.sr-card {
  --sr-card-accent: rgba(169, 190, 255, 1);
  --sr-card-soft: rgba(91, 140, 255, 0.12);
  --sr-card-border: rgba(91, 140, 255, 0.22);
  --sr-card-border-hover: rgba(91, 140, 255, 0.34);

  position: relative;
  display: block;
  padding: 24px 28px 24px;
  background: linear-gradient(180deg, rgba(18, 25, 46, 0.94), rgba(10, 15, 30, 0.97));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition:
    border-color var(--hover-dur) var(--hover-ease),
    background var(--hover-dur) var(--hover-ease),
    box-shadow var(--hover-dur) var(--hover-ease),
    transform var(--hover-dur) var(--hover-ease);
  outline-offset: 3px;
}

/* Resource not yet available: same card anatomy, visibly inert. */
.sr-card--soon {
  opacity: 0.55;
  cursor: default;
}

.sr-card--soon:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

.sr-soon-tag {
  flex: none;
  align-self: center;
  padding: 3px 9px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Top accent rail — accent colour fading out at both edges */
.sr-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--sr-card-accent) 30%, var(--sr-card-accent) 70%, transparent 100%);
  opacity: 0.42;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.sr-card > * {
  position: relative;
  z-index: 1;
}

/* Horizontal tile row — icon chip + text body + arrow */
.sr-card-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Featured card aligns icon to top so it sits with the label/title */
.sr-card--featured .sr-card-row {
  align-items: flex-start;
}

/* Text block that grows to fill available space */
.sr-card-body {
  flex: 1;
  min-width: 0;
}

.sr-card:hover,
.sr-card:focus-visible {
  border-color: var(--sr-card-border-hover);
  background: linear-gradient(180deg, rgba(21, 29, 52, 0.97), rgba(11, 17, 34, 0.99));
  box-shadow: var(--card-hover-shadow);
  text-decoration: none;
}

.sr-card:hover::before,
.sr-card:focus-visible::before {
  opacity: 0.82;
  background: linear-gradient(90deg, transparent 0%, var(--sr-card-accent) 30%, var(--sr-card-accent) 70%, transparent 100%);
}

.sr-card:focus-visible {
  outline: 2px solid var(--sr-card-border-hover);
}

/* Featured Notes card — full-width, stronger accent rail, more presence */
.sr-card--featured {
  grid-column: 1 / -1;
  padding: 28px 32px 28px;
  --sr-card-accent: rgba(91, 140, 255, 1);
  --sr-card-soft: rgba(91, 140, 255, 0.14);
  --sr-card-border: rgba(91, 140, 255, 0.30);
  --sr-card-border-hover: rgba(91, 140, 255, 0.46);
  background: linear-gradient(180deg, rgba(22, 32, 60, 0.95), rgba(10, 16, 34, 0.97));
}

.sr-card--featured::before {
  height: 3px;
  opacity: 0.65;
  background: linear-gradient(90deg, transparent 0%, var(--sr-card-accent) 20%, var(--sr-card-accent) 80%, transparent 100%);
}

.sr-card--featured:hover,
.sr-card--featured:focus-visible {
  background: linear-gradient(180deg, rgba(26, 38, 70, 0.97), rgba(12, 18, 38, 0.99));
}

/* Per-resource accent tokens */
.sr-card--flashcards {
  --sr-card-accent: rgba(91, 140, 255, 1);
  --sr-card-soft: rgba(91, 140, 255, 0.12);
  --sr-card-border: rgba(91, 140, 255, 0.22);
  --sr-card-border-hover: rgba(91, 140, 255, 0.34);
}

.sr-card--questions {
  --sr-card-accent: rgba(243, 189, 99, 1);
  --sr-card-soft: rgba(243, 189, 99, 0.10);
  --sr-card-border: rgba(243, 189, 99, 0.20);
  --sr-card-border-hover: rgba(243, 189, 99, 0.32);
}

.sr-card--summaries {
  --sr-card-accent: rgba(20, 184, 166, 1);
  --sr-card-soft: rgba(20, 184, 166, 0.10);
  --sr-card-border: rgba(20, 184, 166, 0.20);
  --sr-card-border-hover: rgba(20, 184, 166, 0.32);
}

.sr-card--videos {
  --sr-card-accent: rgba(242, 139, 139, 1);
  --sr-card-soft: rgba(242, 139, 139, 0.10);
  --sr-card-border: rgba(242, 139, 139, 0.20);
  --sr-card-border-hover: rgba(242, 139, 139, 0.32);
}

/* Icon chip — mirrors lp-step-icon / lp-proof-icon */
.sr-card-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(180deg, var(--sr-card-soft), rgba(15, 23, 42, 0.42));
  border: 1px solid var(--sr-card-border);
  color: var(--sr-card-accent);
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 6px 16px rgba(0, 0, 0, 0.18);
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.sr-card-icon svg {
  width: 24px;
  height: 24px;
}

.sr-card--featured .sr-card-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  margin-top: 3px;
}

.sr-card--featured .sr-card-icon svg {
  width: 32px;
  height: 32px;
}

.sr-card:hover .sr-card-icon,
.sr-card:focus-visible .sr-card-icon {
  border-color: var(--sr-card-border-hover);
  background: linear-gradient(180deg, var(--sr-card-soft), rgba(15, 23, 42, 0.50));
}

/* "Start here" eyebrow — small kicker label like lp-step-kicker */
.sr-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(169, 190, 255, 0.86);
  margin: 0 0 8px;
  line-height: 1;
}

/* Card heading */
.sr-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: rgba(241, 245, 255, 0.96);
  margin: 0 0 5px;
  line-height: 1.3;
}

.sr-card--featured .sr-card-title {
  font-size: clamp(1.5rem, 2vw, 1.625rem);
  font-weight: 720;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: #ffffff;
  margin-bottom: 6px;
}

.sr-card-desc {
  font-size: 0.9375rem;
  color: rgba(200, 214, 245, 0.72);
  line-height: 1.55;
  margin: 0;
}

.sr-card--featured .sr-card-desc {
  font-size: 1rem;
  color: rgba(215, 225, 245, 0.72);
  line-height: 1.6;
  max-width: 560px;
}

/* CTA — featured card */
.sr-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 620;
  color: rgba(169, 190, 255, 0.90);
  letter-spacing: 0.01em;
  transition: color 0.14s;
}

.sr-card-cta-arrow {
  display: inline-block;
  transition: transform 0.16s ease;
}

.sr-card--featured:hover .sr-card-cta,
.sr-card--featured:focus-visible .sr-card-cta {
  color: rgba(212, 222, 255, 1.0);
}

.sr-card--featured:hover .sr-card-cta-arrow,
.sr-card--featured:focus-visible .sr-card-cta-arrow {
  transform: translateX(3px);
}

/* Subtle arrow indicator for secondary cards — sits at far right of flex row */
.sr-card-arrow {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  color: rgba(200, 214, 245, 0.55); /* AA UI glyph >=3:1 on dark card (was 0.28 = 1.97:1) */
  transition: color 0.14s ease, transform 0.16s ease;
  pointer-events: none;
}

.sr-card:hover .sr-card-arrow,
.sr-card:focus-visible .sr-card-arrow {
  color: var(--sr-card-accent);
  transform: translateX(3px);
}

/* ── Tip strip ─────────────────────────────────────────── */
.sr-tips {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 30px;
  background: linear-gradient(180deg, rgba(18, 25, 46, 0.92), rgba(10, 15, 30, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 14px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.sr-tips::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(91, 140, 255, 0.30) 50%, transparent 100%);
}

.sr-tips-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(169, 190, 255, 0.86);
  flex-shrink: 0;
  white-space: nowrap;
}

.sr-tips p {
  font-size: 1rem;
  color: rgba(210, 220, 240, 0.78);
  margin: 0;
  line-height: 1.55;
}

/* ── Tutor row ─────────────────────────────────────────
   {% if show_tutor_link %} in subject_resources.html: signed in AND enrolled
   in this subject. Two pills on one line between the card grid and the tip
   strip (owner, 2026-09-23: "more pronounced and visible yet subtle, no grey
   at all"): a studying badge with a check, and the tutor as a real control,
   its nib mark in a filled disc. Still not a card: the featured Notes card
   keeps the page's one call to action. Colour is the legacy token set both
   themes define; notebook-hub-skin.css re-inks it under nb_active. The link
   rides .sr-page so it outranks the bare a:hover rule in styles.css. */
.sr-tutor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 26px;
  padding: 0;
}

.sr-tutor-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  background: color-mix(in srgb, var(--text-link) 12%, transparent);
  color: var(--text-link);
}

.sr-tutor-nib {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text-link);
  color: var(--bg, #0b1020);
}

.sr-page .sr-tutor-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border: 1px solid color-mix(in srgb, var(--text-link) 40%, transparent);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-link);
  text-decoration: none;
  transition: background-color 0.16s, border-color 0.16s, transform 0.2s, box-shadow 0.2s;
}

.sr-tutor-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text-link);
  color: var(--bg, #0b1020);
}

.sr-page .sr-tutor-link:hover {
  background: color-mix(in srgb, var(--text-link) 10%, transparent);
  border-color: var(--text-link);
  transform: translateY(-1px);
}

.sr-tutor-arrow {
  display: inline-block;
  transition: transform 0.16s;
}

.sr-page .sr-tutor-link:hover .sr-tutor-arrow {
  transform: translateX(3px);
}

.sr-page .sr-tutor-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Once, on arrival: the nib's disc rings, so a student notices the tutor is
   here without the row ever moving again. */
@keyframes sr-tutor-hello {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--text-link) 45%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--text-link) 0%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .sr-tutor-ic { animation: sr-tutor-hello 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.7s 2; }
}

@media (max-width: 560px) {
  .sr-tutor { flex-direction: column; align-items: stretch; }
  .sr-tutor-text { align-self: flex-start; }
  .sr-page .sr-tutor-link { justify-content: flex-start; }
  .sr-tutor-arrow { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sr-tutor-arrow, .sr-page .sr-tutor-link { transition: none; }
  .sr-page .sr-tutor-link:hover, .sr-page .sr-tutor-link:hover .sr-tutor-arrow { transform: none; }
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 980px) {
  .sr-page {
    padding: 32px 32px 56px;
  }
}

@media (max-width: 700px) {
  .sr-page {
    padding: 24px 20px 48px;
  }

  .sr-header {
    margin-bottom: 20px;
  }

  .sr-title {
    font-size: clamp(1.75rem, 7vw, 2rem);
  }

  .sr-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sr-card--featured {
    grid-column: auto;
    padding: 24px 22px 24px;
  }

  .sr-tips {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 20px 22px;
  }

  /* The empty hub's one link wraps on a phone. As inline-flex its text was
     one flex item and the arrow a second one, stranded at the far right
     (audit K-012). In inline flow the arrow follows the last word, and
     with no space between them in the template it cannot wrap onto a line
     of its own; its 6px margin is the flex gap it had. An inline box drops
     the link's 12px top margin, so the paragraph takes 9px of padding to
     keep the text where it sat. */
  .sr-empty-action {
    padding-top: 9px;
  }
  .sr-empty-action .sr-card-cta {
    display: inline;
  }
  .sr-empty-action .sr-card-cta-arrow {
    display: inline;
    margin-left: 6px;
  }
}

/* Touch: the empty hub's only action gets a 44px tap height (audit
   K-004b) with nothing moving. Inline (phones) the padding does not touch
   the line; inline-flex (tablets) the negative margins give back exactly
   what the padding adds, and the 12px top margin is kept. */
@media (pointer: coarse) {
  .sr-empty-action .sr-card-cta {
    padding-block: 13px;
    margin-block: -1px -13px;
  }
}

/* Small phones (audit K-010): at 320-375px the cards' 28px padding, 20px
   gap and 52px plate squeezed the descriptions into a 117px column, three
   to five lines each. Tighter chrome gives the text about 48px back. From
   390px the column is comfortable and the cards keep their chrome. */
@media (max-width: 380px) {
  .sr-card {
    padding: 18px 16px;
  }
  .sr-card-row {
    gap: 12px;
  }
  .sr-card-icon {
    width: 44px;
    height: 44px;
  }
  .sr-card--featured {
    padding: 22px 18px;
  }
  .sr-card--featured .sr-card-row {
    gap: 14px;
  }
  .sr-card--featured .sr-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }
  .sr-card--featured .sr-card-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* =========================
   Coming Soon / In Preparation Page
   Colour system mirrors the homepage (.lp-*) so the page reads as a direct
   continuation of the marketing surface, not the noteviewer card system.
   Reference selectors: .lp-atmosphere, .lp-headline, .lp-subline, .lp-eyebrow,
   .lp-cta-primary, .lp-showcase-wrap, .lp-step-card, .lp-stats-inner.
========================= */

.cs-page {
  /* TRANSPARENT -- the global html/body gradient (styles.css:76-81:
     linear-gradient(165deg, #0e1128 0%, #0a0c1a 52%, #070810 100%))
     shows through. No local atmosphere, no purple/blue radials. This is
     the same base the landing page reads against. */
  background: transparent;
  min-height: calc(100svh - 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vh, 56px) clamp(20px, 3vw, 40px);
  position: relative;
}

/* Two-column desktop layout
   Target at 1366px: shell 1260, sidebar 380, gap 28 → main column ≈ 852px.
   The grid uses minmax(0, 1fr) so the main column flexes within the shell. */
.cs-inner {
  width: 100%;
  max-width: 1260px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
  position: relative;
}

/* ── Main hero panel ──
   Mirrors .lp-showcase-wrap (styles.css:3347) -- the deep premium card the
   homepage uses for its 4-step showcase. */
.cs-panel {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(91,140,255,0.045) 0%, transparent 58%),
    linear-gradient(180deg, rgba(15,18,38,0.99) 0%, rgba(9,11,24,0.99) 100%);
  border: 1px solid rgba(148,163,232,0.18);
  border-radius: 22px;
  padding: clamp(32px, 3.4vw, 48px);
  box-shadow:
    0 36px 84px rgba(0,0,0,0.44),
    0 2px 12px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 0 1px rgba(255,255,255,0.020);
  overflow: hidden;
}

/* Top accent rail -- periwinkle, very subtle */
.cs-panel::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(120,174,255,0.55) 30%,
    rgba(184,207,255,0.75) 50%,
    rgba(120,174,255,0.55) 70%,
    transparent 100%);
  opacity: 0.50;
}

.cs-hero {
  display: block;
  padding: 0;
}

.cs-hero-copy {
  min-width: 0;
}

/* ── Hero hierarchy ── */

.cs-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

/* Status badge -- scaled-up sibling of .lp-eyebrow (styles.css:2661).
   Promoted to be the first thing the eye reaches: larger font, deeper padding,
   slightly stronger border + inset highlight, vivid green status dot. */
.cs-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(185,196,230,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.060),
    0 1px 4px rgba(0,0,0,0.20);
  color: rgba(246,249,255,0.96);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  text-transform: none;
}

.cs-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow:
    0 0 6px rgba(34,197,94,0.45),
    0 0 0 3px rgba(34,197,94,0.10);
  flex-shrink: 0;
}

/* Subject title -- matches .lp-headline (styles.css:2722): pure white, 800 */
.cs-heading {
  margin: 0 0 16px;
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.05;
  color: #ffffff;
  max-width: 18ch;
}

/* Supporting copy -- matches .lp-subline (styles.css:2746) */
.cs-body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(230,236,255,0.84);
  max-width: 54ch;
}

/* ── Process cards (01 / 02 / 03) ──
   Surfaces match .lp-step-card (styles.css:5453) -- homepage feature card. */

.cs-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(24px, 2.6vw, 34px) 0 0;
}

/* Process card -- borrows .lp-stats-item language (styles.css:4979):
   accent CSS variables, soft radial tint, left vertical accent rail,
   accent-tinted blurred halo. Each card sets its own accent via :nth-child. */
.cs-proof-item {
  --proof-accent: rgba(91, 140, 255, 1);
  --proof-accent-2: rgba(169, 190, 255, 1);
  --proof-soft: rgba(91, 140, 255, 0.10);
  --proof-border: rgba(91, 140, 255, 0.28);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px 22px 24px;
  min-height: 132px;
  background:
    radial-gradient(circle at 88% 0%, var(--proof-soft), transparent 52%),
    linear-gradient(180deg, rgba(18,25,46,0.96) 0%, rgba(9,14,28,0.985) 100%);
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 14px;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/* Thin coloured rail flush to the left edge */
.cs-proof-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  width: 2px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--proof-accent), var(--proof-accent-2));
  opacity: 0.62;
}

/* Soft accent halo in the top-right corner */
.cs-proof-item::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 104px;
  height: 104px;
  border-radius: 999px;
  background: var(--proof-soft);
  filter: blur(22px);
  opacity: 0.30;
  pointer-events: none;
}

.cs-proof-item > * {
  position: relative;
  z-index: 1;
}

.cs-proof-item:hover {
  transform: translateY(-2px);
  border-color: var(--proof-border);
  background:
    radial-gradient(circle at 88% 0%, var(--proof-soft), transparent 54%),
    linear-gradient(180deg, rgba(21,29,52,0.97) 0%, rgba(11,17,34,0.99) 100%);
  box-shadow:
    0 22px 58px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.cs-proof-item > div {
  display: block;
}

/* Per-card accents -- echoes .lp-stats-item--primary / --questions / --mcqs
   (styles.css:5051+). Subtle accents only; surfaces stay near-black. */
.cs-proof-item:nth-child(1) {
  --proof-accent: rgba(91, 140, 255, 1);
  --proof-accent-2: rgba(169, 190, 255, 1);
  --proof-soft: rgba(91, 140, 255, 0.10);
  --proof-border: rgba(91, 140, 255, 0.30);
}

.cs-proof-item:nth-child(2) {
  --proof-accent: rgba(217, 164, 65, 1);
  --proof-accent-2: rgba(250, 204, 21, 0.88);
  --proof-soft: rgba(217, 164, 65, 0.085);
  --proof-border: rgba(217, 164, 65, 0.28);
}

.cs-proof-item:nth-child(3) {
  --proof-accent: rgba(225, 85, 120, 1);
  --proof-accent-2: rgba(244, 114, 182, 0.86);
  --proof-soft: rgba(225, 85, 120, 0.075);
  --proof-border: rgba(225, 85, 120, 0.26);
}

/* Numbered badge -- harmonised with each card's accent */
.cs-proof-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, var(--proof-soft), rgba(255,255,255,0.012));
  border: 1px solid var(--proof-border);
  color: var(--proof-accent-2);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.cs-proof-title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 620;
  color: #ffffff;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.cs-proof-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(220,226,245,0.68);
}

/* ── Actions row -- primary CTA mirrors .lp-cta-primary (styles.css:2776) ── */

.cs-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: clamp(22px, 2.4vw, 32px) 0 0;
}

a.cs-btn,
a.cs-btn:link,
a.cs-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #4d6ef8 0%, #3855e0 46%, #2840c8 100%);
  border: 1px solid rgba(110,138,248,0.32);
  color: #ffffff;
  padding: 17px 56px;
  min-width: 260px;
  text-align: center;
  border-radius: 11px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 6px 22px rgba(42,64,188,0.38),
    0 1px 4px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.cs-btn:hover,
a.cs-btn:focus-visible {
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(130,158,255,0.44);
  box-shadow:
    0 10px 28px rgba(42,64,188,0.46),
    0 2px 6px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}

a.cs-btn:focus-visible {
  outline: 2px solid rgba(130,158,255,0.55);
  outline-offset: 3px;
}

.cs-inline-note {
  margin: 0;
  max-width: 300px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(220,226,245,0.64);
}

/* ── Right sidebar ──
   Surfaces match .lp-stats-inner (styles.css:4848) -- the homepage's lower
   premium panel. Same crown radial, same border, same shadow. */

.cs-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-support-panel {
  position: relative;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(91,140,255,0.045) 0%, transparent 38%),
    linear-gradient(180deg, rgba(18,25,46,0.92) 0%, rgba(8,12,24,0.96) 100%);
  border: 1px solid rgba(148,163,184,0.17);
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.055);
  min-height: 0;
}

/* Variants -- subtle differentiation only; same family */
.cs-support-panel--accent {
  background:
    radial-gradient(circle at 50% 0%, rgba(91,140,255,0.055) 0%, transparent 38%),
    linear-gradient(180deg, rgba(18,25,46,0.92) 0%, rgba(8,12,24,0.96) 100%);
}

.cs-support-panel--glow {
  background:
    radial-gradient(circle at 50% 0%, rgba(91,140,255,0.045) 0%, transparent 38%),
    linear-gradient(180deg, rgba(18,25,46,0.92) 0%, rgba(8,12,24,0.96) 100%);
}

/* Section label -- small uppercase eyebrow tone, set locally. */
.cs-support-label {
  margin: 0 0 14px;
  font-size: 0.7188rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(184,199,255,0.86);
  line-height: 1.1;
}

.cs-support-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(232,238,255,0.76);
}

/* ── Planned resource tiles --
   Premium dark surface with a small periwinkle status dot. Mirrors the
   .lp-stats-pill dot language (styles.css:4964) but at full tile scale. */

.cs-chip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.cs-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 11px 14px;
  border-radius: 12px;
  /* Decorative "planned resources" labels — flat at rest (no drop shadow, no
     hover/press affordance) so they read as a static list, not tappable cards.
     Same quiet surface language as the de-emphasized .pg-bcard-chip. */
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
  border: 1px solid var(--border-2);
  color: rgba(244,247,255,0.92);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.3;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.cs-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(120,174,255,0.92);
  box-shadow: 0 0 0 3px rgba(120,174,255,0.10);
  flex-shrink: 0;
}

.cs-chip:nth-child(5):last-child {
  grid-column: 1 / -1;
}

a.cs-chip--link,
a.cs-chip--link:link,
a.cs-chip--link:visited {
  color: rgba(244,247,255,0.92);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

a.cs-chip--link:hover {
  color: #ffffff;
  border-color: rgba(120,174,255,0.42);
  background: linear-gradient(180deg, rgba(120,174,255,0.13), rgba(120,174,255,0.04));
}

a.cs-chip--link:focus-visible {
  outline: 2px solid rgba(120,174,255,0.72);
  outline-offset: 2px;
}

/* ── Development progress panel ── */

.cs-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.cs-timeline-head .cs-support-label {
  margin-bottom: 0;
}

.cs-timeline-meta {
  font-size: 0.78125rem;
  font-weight: 580;
  color: rgba(184,207,255,0.80);
  letter-spacing: 0.005em;
}

/* Progress bar -- subtle track + indigo fill matching homepage accents */
.cs-progress-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(120,174,255,0.18) 0%, rgba(120,174,255,0.08) 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.24);
  overflow: hidden;
}

.cs-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 58%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4d6ef8 0%, #78aeff 100%);
  box-shadow: 0 0 8px rgba(77,110,248,0.42);
}

.cs-stage-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.cs-stage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  padding-left: 18px;
}

.cs-stage strong {
  font-size: 0.875rem;
  font-weight: 620;
  color: rgba(240,244,255,0.88);
  letter-spacing: 0.002em;
}

.cs-stage span:not(.cs-stage-dot) {
  font-size: 0.78125rem;
  color: rgba(220,226,245,0.58);
}

/* Stage dot -- three states */
.cs-stage-dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(148,163,184,0.20);
  border: 1px solid rgba(148,163,184,0.34);
}

/* Complete -- green ring (matches homepage success/free language) */
.cs-stage.is-complete .cs-stage-dot {
  background: #22c55e;
  border-color: rgba(74,222,128,0.55);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.16);
}

.cs-stage.is-complete strong {
  color: #ffffff;
}

.cs-stage.is-complete span:not(.cs-stage-dot) {
  color: rgba(187,247,208,0.74);
}

/* Active -- electric blue ring (matches the CTA gradient blue) */
.cs-stage.is-active .cs-stage-dot {
  background: #4d6ef8;
  border-color: rgba(120,174,255,0.55);
  box-shadow:
    0 0 0 4px rgba(77,110,248,0.18),
    0 0 12px rgba(120,174,255,0.42);
}

.cs-stage.is-active strong {
  color: #ffffff;
}

.cs-stage.is-active span:not(.cs-stage-dot) {
  color: rgba(184,207,255,0.86);
}

/* ── Responsive ── */

/* Wide desktop -- bump shell + sidebar a touch */
@media (min-width: 1440px) {
  .cs-inner {
    max-width: 1300px;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 30px;
  }
  .cs-panel {
    padding: 48px;
  }
}

/* Tablet (single column) -- sidebar drops below as 2-col row */
@media (max-width: 1080px) {
  .cs-page {
    justify-content: flex-start;
    padding: clamp(28px, 3.5vh, 52px) clamp(20px, 3vw, 32px) clamp(32px, 4vh, 56px);
  }
  .cs-inner {
    grid-template-columns: 1fr;
    max-width: 820px;
    gap: 18px;
  }
  .cs-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .cs-support-panel--timeline {
    grid-column: 1 / -1;
  }
}

/* Compact tablet -- collapse process cards before they cramp */
@media (max-width: 820px) {
  .cs-proof-grid {
    grid-template-columns: 1fr;
  }
  .cs-proof-item {
    min-height: 0;
  }
}

/* Mobile -- full stack */
@media (max-width: 640px) {
  .cs-page {
    padding: 28px 16px 48px;
  }
  .cs-panel {
    padding: 26px 22px;
    border-radius: 18px;
  }
  .cs-heading {
    font-size: clamp(1.8rem, 6.4vw, 2.25rem);
    max-width: none;
    margin-bottom: 14px;
  }
  .cs-body {
    font-size: 0.9625rem;
    max-width: none;
  }
  .cs-meta-row {
    margin-bottom: 14px;
  }
  .cs-status {
    margin: 0 0 16px;
    padding: 8px 15px;
    font-size: 0.875rem;
    gap: 8px;
  }
  .cs-status::before {
    width: 7px;
    height: 7px;
  }
  .cs-aside {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cs-support-panel {
    padding: 20px;
    border-radius: 16px;
  }
  .cs-chip-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cs-chip:nth-child(5):last-child {
    grid-column: auto;
  }
  .cs-stage-row {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 18px;
  }
  .cs-timeline-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .cs-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  a.cs-btn,
  a.cs-btn:link,
  a.cs-btn:visited {
    width: 100%;
    min-width: 0;
    padding: 15px 24px;
  }
  .cs-inline-note {
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTE READING REVAMP — hero block, progress bar, section navigator
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Top viewport progress bar ── */
.nt-top-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

.nt-top-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgb(91,140,255) 0%, rgba(169,190,255,0.88) 100%);
  border-radius: 0 2px 2px 0;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(91,140,255,0.25);
}

/* ── Hero block ── */
/* ── Title block — no container, no tint, just content on the page background ── */
.nt-hero {
  text-align: center;
  margin: 4px 0 32px 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  position: relative;
}

.nt-hero::before {
  display: none;
}

.nt-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}

.nt-hero-path {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nt-hero-path-link {
  color: rgba(169,190,255,0.92);
}

.nt-hero-path-current {
  color: rgba(255,255,255,0.62);
}

.nt-hero-eyebrow-sep {
  color: rgba(255,255,255,0.20);
  margin: 0 6px;
  user-select: none;
}

.nt-hero-context-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.nt-hero-context-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(91,140,255,0.22);
  background: rgba(91,140,255,0.10);
  color: rgba(190,205,255,0.88);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nt-hero-title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 auto 18px;
  max-width: 720px;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(210,218,255,0.96) 45%,
    rgba(148,164,254,0.88) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nt-hero-divider {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, rgba(91,140,255,0.60), rgba(169,190,255,0.30));
  border-radius: 2px;
  margin: 0 auto 16px;
}

.nt-hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,0.40);
}

.nt-hero-dot {
  color: rgba(255,255,255,0.18);
  user-select: none;
}

.nt-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(91,140,255,0.12);
  color: rgba(169,190,255,0.80);
  border: 1px solid rgba(91,140,255,0.22);
}

/* ── Rail sections navigator ── */

/* ── Responsive ── */
@media (max-width: 860px) {
  .nt-hero {
    margin-bottom: 28px;
  }
  .nt-hero-eyebrow {
    gap: 10px;
  }
  .nt-hero-path {
    font-size: 0.72rem;
  }
  .nt-hero-title {
    font-size: 1.625rem;
  }
  .nt-top-progress {
    height: 2px;
  }
}

@media (max-width: 520px) {
  .nt-hero {
    margin-bottom: 24px;
  }
  .nt-hero-context-chip {
    min-height: 26px;
    padding: 4px 10px;
    font-size: 0.68rem;
  }
  .nt-hero-title {
    font-size: 1.375rem;
  }
  .nt-hero-meta {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Learning Objectives — final component
   ═══════════════════════════════════════════════════════════════════════════ */

.note-body .nt-objectives-card,
.noteviewer-body .nt-objectives-card {
  width: 100%;
  margin: 48px 0 44px;
  padding: 20px 26px 20px;
  border: 1px solid rgba(124, 146, 255, 0.16);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(18, 24, 52, 0.985) 0%, rgba(11, 15, 36, 0.985) 100%);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.note-body .nt-objectives-shell,
.noteviewer-body .nt-objectives-shell {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.note-body .nt-objectives-icon-column,
.noteviewer-body .nt-objectives-icon-column {
  display: flex;
  justify-content: center;
  padding-top: 18px;
}

.note-body .nt-objectives-icon-badge,
.noteviewer-body .nt-objectives-icon-badge {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(73, 97, 214, 0.22);
  color: #c8d6ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.note-body .nt-objectives-icon-svg,
.noteviewer-body .nt-objectives-icon-svg {
  width: 42px;
  height: 42px;
}

.note-body .nt-objectives-main,
.noteviewer-body .nt-objectives-main {
  position: relative;
  min-width: 0;
  padding-left: 28px;
}

.note-body .nt-objectives-main::before,
.noteviewer-body .nt-objectives-main::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(130, 151, 255, 0.26);
}

.note-body .nt-objectives-head,
.noteviewer-body .nt-objectives-head {
  padding-top: 6px;
}

/* Small kicker above the title — frames the panel as a curriculum
   contract rather than a generic card. Restrained periwinkle, tracked,
   uppercase. */
.note-body .nt-objectives-kicker,
.noteviewer-body .nt-objectives-kicker {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(169, 190, 255, 0.82);
  margin-bottom: 8px;
}

.note-body .nt-objectives-title-row,
.noteviewer-body .nt-objectives-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.note-body .nt-objective-heading,
.noteviewer-body .nt-objective-heading {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  box-shadow: none;
  text-shadow: none;
  color: rgba(250, 251, 255, 0.98);
  -webkit-text-fill-color: rgba(250, 251, 255, 0.98);
  font-family: Inter, Satoshi, Geist, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: clamp(1.15rem, 2.0vw, 1.5rem);
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-transform: none;
}

.note-body .nt-objectives-count,
.noteviewer-body .nt-objectives-count {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(122, 144, 255, 0.16);
  border-radius: 12px;
  background: rgba(68, 92, 196, 0.24);
  color: #8fb1ff;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.note-body .nt-objectives-subtitle,
.noteviewer-body .nt-objectives-subtitle {
  margin: 0;
  color: rgba(193, 201, 225, 0.82);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.58;
}

.note-body .nt-objectives-rule,
.noteviewer-body .nt-objectives-rule {
  height: 1px;
  margin: 20px 0 14px;
  background: linear-gradient(90deg, rgba(130, 151, 255, 0.24), rgba(130, 151, 255, 0.06));
}

.note-body .nt-objective-list,
.note-body .nt-objective-body,
.noteviewer-body .nt-objective-list,
.noteviewer-body .nt-objective-body {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.note-body .nt-objective-item,
.noteviewer-body .nt-objective-item {
  display: grid;
  grid-template-columns: 36px 1px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  margin: 0;
  padding: 14px 18px 14px 20px;
  border: 1px solid rgba(124, 146, 255, 0.15);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 29, 60, 0.86) 0%, rgba(18, 24, 49, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.note-body .nt-objective-item::before,
.noteviewer-body .nt-objective-item::before {
  content: none;
}

.note-body .nt-objective-check,
.noteviewer-body .nt-objective-check {
  width: 32px;
  height: 32px;
  display: block;
  border: 2.5px solid #6f8fff;
  border-radius: 999px;
}

.note-body .nt-objective-gutter,
.noteviewer-body .nt-objective-gutter {
  width: 1px;
  align-self: stretch;
  min-height: 42px;
  background: rgba(130, 151, 255, 0.22);
}

.note-body .nt-objective-copy,
.noteviewer-body .nt-objective-copy {
  min-width: 0;
  color: rgba(244, 247, 255, 0.98);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.48;
}

.note-body .nt-objective-copy .obj-code,
.noteviewer-body .nt-objective-copy .obj-code {
  display: inline-block;
  margin: 0 8px 0 0;
  padding: 2px 7px;
  border: 1px solid rgba(169, 190, 255, 0.22);
  border-radius: 5px;
  background: rgba(91, 140, 255, 0.10);
  box-shadow: none;
  color: rgba(196, 207, 230, 0.92);
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  vertical-align: 0.05em;
}

.note-body .nt-objective-dash,
.noteviewer-body .nt-objective-dash {
  display: inline-block;
  margin: 0 10px;
  color: rgba(221, 228, 252, 0.88);
}

.note-body .nt-objective-text,
.noteviewer-body .nt-objective-text {
  color: inherit;
}

.note-body .nt-objective-status,
.noteviewer-body .nt-objective-status {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(101, 128, 240, 0.18);
  border-radius: 15px;
  background: rgba(46, 61, 126, 0.28);
  color: #7ea6ff;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.note-body .nt-objective-status-icon,
.noteviewer-body .nt-objective-status-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  border-radius: 999px;
}

.note-body .nt-objective-status-icon::after,
.noteviewer-body .nt-objective-status-icon::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
}

.note-body .nt-objective-item.obj--extended .nt-objective-check,
.noteviewer-body .nt-objective-item.obj--extended .nt-objective-check {
  border-color: #d5a84e;
}

.note-body .nt-objective-item.obj--extended .nt-objective-status,
.noteviewer-body .nt-objective-item.obj--extended .nt-objective-status {
  border-color: rgba(213, 168, 78, 0.22);
  background: rgba(213, 168, 78, 0.14);
  color: #e0b960;
}

@media (max-width: 780px) {
  .note-body .nt-objectives-card,
  .noteviewer-body .nt-objectives-card {
    width: 100%;
    padding: 22px 18px 20px;
    border-radius: 22px;
  }

  .note-body .nt-objectives-shell,
  .noteviewer-body .nt-objectives-shell {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .note-body .nt-objectives-icon-column,
  .noteviewer-body .nt-objectives-icon-column {
    justify-content: flex-start;
    padding-top: 0;
  }

  .note-body .nt-objectives-icon-badge,
  .noteviewer-body .nt-objectives-icon-badge {
    width: 84px;
    height: 84px;
  }

  .note-body .nt-objectives-icon-svg,
  .noteviewer-body .nt-objectives-icon-svg {
    width: 38px;
    height: 38px;
  }

  .note-body .nt-objectives-main,
  .noteviewer-body .nt-objectives-main {
    padding-left: 0;
  }

  .note-body .nt-objectives-main::before,
  .noteviewer-body .nt-objectives-main::before {
    display: none;
  }

  .note-body .nt-objective-heading,
  .noteviewer-body .nt-objective-heading {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }

  .note-body .nt-objectives-subtitle,
  .noteviewer-body .nt-objectives-subtitle {
    font-size: 1rem;
  }

  .note-body .nt-objectives-rule,
  .noteviewer-body .nt-objectives-rule {
    margin: 24px 0 18px;
  }

  .note-body .nt-objective-item,
  .noteviewer-body .nt-objective-item {
    grid-template-columns: 38px 1px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  .note-body .nt-objective-status,
  .noteviewer-body .nt-objective-status {
    grid-column: 3;
    justify-self: start;
    margin-top: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premium reader structure — compact header, checkpoint, and content rhythm.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --nv-reader-width: 920px;
}

.noteviewer-main-inner {
  padding-top: 28px;
  padding-right: clamp(22px, 4vw, 52px);
  padding-bottom: 58px;
}

.nv-resource-header,
.note-body,
.noteviewer-body {
  max-width: var(--nv-reader-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.nv-resource-header {
  margin-bottom: 14px;
}

.nv-resource-header .note-breadcrumbs {
  justify-content: flex-start;
  text-align: left;   /* intentionally left-aligned (notes header) — keep wrap left */
  margin-bottom: 8px;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
}

.nt-hero {
  text-align: left;
  margin: 0 0 18px;
}

.nt-hero-eyebrow {
  margin-bottom: 8px;
  gap: 10px;
}

.nt-hero-path {
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
}

.nt-hero-context-chip {
  min-height: 22px;
  padding: 3px 8px;
  font-size: 0.625rem;
}

.nt-hero-title {
  max-width: 820px;
  margin: 0 0 10px;
  font-size: clamp(1.72rem, 2.6vw, 2.22rem);
  line-height: 1.12;
}

.nt-hero-divider {
  width: 28px;
  height: 1px;
  margin: 0 0 10px;
}

.nt-hero-meta {
  justify-content: flex-start;
  font-size: 0.75rem;
}

.note-body,
.noteviewer-body {
  font-size: 1.0625rem;
  line-height: 1.76;
  padding-bottom: 68px;
}

.note-body h2,
.noteviewer-body h2 {
  margin-top: 2.05em;
  margin-bottom: 0.72em;
  font-size: clamp(1.34rem, 1.8vw, 1.62rem);
  letter-spacing: -0.015em;
}

.note-body h3,
.noteviewer-body h3 {
  margin-top: 1.65em;
  margin-bottom: 0.55em;
  font-size: clamp(1.12rem, 1.35vw, 1.28rem);
}

.note-body p,
.noteviewer-body p {
  margin-bottom: 1.05em;
}

.note-body .nt-objectives-card,
.noteviewer-body .nt-objectives-card {
  margin: 18px auto 28px;
  padding: 14px 16px;
  border-radius: 16px;
  box-shadow: none;
}

.note-body .nt-objectives-shell,
.noteviewer-body .nt-objectives-shell,
.note-body .nt-objectives-card--multi .nt-objectives-shell,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-shell {
  grid-template-columns: 1fr;
  gap: 0;
}

.note-body .nt-objectives-icon-column,
.noteviewer-body .nt-objectives-icon-column,
.note-body .nt-objectives-card--multi .nt-objectives-icon-column,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-icon-column {
  display: none;
}

.note-body .nt-objectives-main,
.noteviewer-body .nt-objectives-main,
.note-body .nt-objectives-card--multi .nt-objectives-main,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-main {
  padding-left: 0;
}

.note-body .nt-objectives-main::before,
.noteviewer-body .nt-objectives-main::before,
.note-body .nt-objectives-card--multi .nt-objectives-main::before,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-main::before {
  content: none;
}

.note-body .nt-objectives-head,
.noteviewer-body .nt-objectives-head,
.note-body .nt-objectives-card--multi .nt-objectives-head,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-head {
  padding-top: 0;
}

.note-body .nt-objectives-title-row,
.noteviewer-body .nt-objectives-title-row,
.note-body .nt-objectives-card--multi .nt-objectives-title-row,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-title-row {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.note-body .nt-objective-heading,
.noteviewer-body .nt-objective-heading,
.note-body .nt-objectives-card--multi .nt-objective-heading,
.noteviewer-body .nt-objectives-card--multi .nt-objective-heading {
  font-size: 0.875rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.note-body .nt-objectives-count,
.noteviewer-body .nt-objectives-count,
.note-body .nt-objectives-card--multi .nt-objectives-count,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-count {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 640;
}

.note-body .nt-objectives-subtitle,
.noteviewer-body .nt-objectives-subtitle,
.note-body .nt-objectives-card--multi .nt-objectives-subtitle,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-subtitle {
  font-size: 0.8125rem;
  line-height: 1.38;
}

.note-body .nt-objectives-rule,
.noteviewer-body .nt-objectives-rule,
.note-body .nt-objectives-card--multi .nt-objectives-rule,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-rule {
  margin: 10px 0 8px;
}

.note-body .nt-objective-list,
.note-body .nt-objective-body,
.noteviewer-body .nt-objective-list,
.noteviewer-body .nt-objective-body {
  gap: 6px;
}

.note-body .nt-objective-item,
.noteviewer-body .nt-objective-item,
.note-body .nt-objectives-card--multi .nt-objective-item,
.noteviewer-body .nt-objectives-card--multi .nt-objective-item {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 11px;
}

.note-body .nt-objective-check,
.noteviewer-body .nt-objective-check,
.note-body .nt-objectives-card--multi .nt-objective-check,
.noteviewer-body .nt-objectives-card--multi .nt-objective-check {
  width: 14px;
  height: 14px;
  border-width: 1.5px;
}

.note-body .nt-objective-gutter,
.noteviewer-body .nt-objective-gutter,
.note-body .nt-objectives-card--multi .nt-objective-gutter,
.noteviewer-body .nt-objectives-card--multi .nt-objective-gutter {
  display: none;
}

.note-body .nt-objective-copy,
.noteviewer-body .nt-objective-copy,
.note-body .nt-objectives-card--multi .nt-objective-copy,
.noteviewer-body .nt-objectives-card--multi .nt-objective-copy {
  font-size: 0.84375rem;
  line-height: 1.35;
}

.note-body .nt-objective-dash,
.noteviewer-body .nt-objective-dash,
.note-body .nt-objectives-card--multi .nt-objective-dash,
.noteviewer-body .nt-objectives-card--multi .nt-objective-dash {
  margin: 0 5px;
}

.note-body .nt-objective-status,
.noteviewer-body .nt-objective-status,
.note-body .nt-objectives-card--multi .nt-objective-status,
.noteviewer-body .nt-objectives-card--multi .nt-objective-status {
  gap: 5px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 640;
}

.note-body .nt-objective-status-icon,
.noteviewer-body .nt-objective-status-icon,
.note-body .nt-objectives-card--multi .nt-objective-status-icon,
.noteviewer-body .nt-objectives-card--multi .nt-objective-status-icon {
  width: 10px;
  height: 10px;
  border-width: 1.5px;
}

.note-body blockquote[class^="callout-"],
.noteviewer-body blockquote[class^="callout-"],
.note-body .note-callout,
.noteviewer-body .note-callout {
  margin-top: 1.25em;
  margin-bottom: 1.35em;
  padding-top: 14px;
  padding-bottom: 14px;
  box-shadow: none;
}

.note-body .note-table-scroll,
.noteviewer-body .note-table-scroll,
.note-body .note-figure,
.noteviewer-body .note-figure {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 780px) {
  .noteviewer-main-inner {
    padding-top: 22px;
  }

  .nv-resource-header .note-breadcrumbs,
  .nt-hero {
    text-align: left;
  }

  .nt-hero-title {
    font-size: 1.55rem;
  }

  .note-body .nt-objective-item,
  .noteviewer-body .nt-objective-item {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .note-body .nt-objective-status,
  .noteviewer-body .nt-objective-status {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premium study document experience
   Keeps the page note-like: strong hierarchy, compact study tools, academic
   tables, refined callouts, and integrated figures.

   Typography intentionally lifted for a premium reading product — body text
   sits at ~18–19.5px so long study sessions stay comfortable. Heading scale
   matches the MCQ/Questions resource pages so all resources read as one
   product family.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --nv-reader-width: 900px;
}

.noteviewer-main-inner {
  padding-top: 26px;
}

.nv-resource-header {
  position: relative;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.nv-resource-header .note-breadcrumbs {
  margin-bottom: 10px;
  font-size: 0.6875rem;
  font-weight: 680;
  letter-spacing: 0.135em;
  line-height: 1.45;
}

.nt-hero {
  margin-bottom: 0;
}

.nt-hero-title {
  max-width: 860px;
  margin: 0;
  font-size: clamp(1.88rem, 2.7vw, 2.46rem);
  font-weight: 760;
  letter-spacing: -0.032em;
  line-height: 1.18;
  padding-bottom: 0.1em;
  overflow: visible;
}

.nt-hero-divider {
  display: none;
}

.note-body,
.noteviewer-body {
  max-width: var(--nv-reader-width);
  /* 18.5–19.85px — premium reading scale for long study sessions. */
  font-size: clamp(1.15625rem, 1.075rem + 0.22vw, 1.24rem);
  line-height: 1.74;
}

.note-body > *:first-child,
.noteviewer-body > *:first-child {
  margin-top: 0;
}

.note-body p,
.noteviewer-body p {
  margin-block: 0 1.42em;
  line-height: 1.74;
}

/* Tables — slightly smaller than the body so dense data rows stay scannable
   without ballooning beyond the reading column. */
.note-body table,
.noteviewer-body table {
  font-size: 0.93em;
}

.note-body strong,
.noteviewer-body strong {
  font-weight: 760;
}

.note-body h2,
.noteviewer-body h2 {
  margin: 2.4em 0 0.7em;
  padding: 0 0 0 16px;
  border-left-width: 2px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  /* ~24.8–29.6px — confident section anchor above the lifted body scale. */
  font-size: clamp(1.55rem, 1.4rem + 0.65vw, 1.85rem);
  font-weight: 760;
  letter-spacing: -0.018em;
  line-height: 1.24;
}

.note-body .nt-objectives-card + h2,
.noteviewer-body .nt-objectives-card + h2,
.note-body > h2:first-of-type,
.noteviewer-body > h2:first-of-type {
  /* ~42–48px from objectives card to the first section heading. */
  margin-top: 2.3em;
}

.note-body h3,
.noteviewer-body h3 {
  margin: 1.85em 0 0.55em;
  /* ~21–24px — distinct from H2 and from the larger body. */
  font-size: clamp(1.32rem, 1.2rem + 0.45vw, 1.5rem);
  font-weight: 720;
  letter-spacing: -0.014em;
  line-height: 1.3;
}

.note-body h4,
.noteviewer-body h4 {
  margin: 1.72em 0 0.55em;
  padding: 0;
  border-bottom: 0;
  font-size: 0.875rem;
  font-weight: 740;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: none;
}

.note-body h2 + p,
.noteviewer-body h2 + p,
.note-body h3 + p,
.noteviewer-body h3 + p,
.note-body h4 + p,
.noteviewer-body h4 + p {
  margin-top: 0;
}

.note-body ul,
.noteviewer-body ul {
  margin: 0 0 1.45em;
  padding-left: 0;
  border-left: 0;
}

.note-body ul > li,
.noteviewer-body ul > li {
  margin: 0.58em 0;
  padding-left: 1.35em;
  line-height: 1.68;
}

.note-body ul > li::before,
.noteviewer-body ul > li::before {
  content: '';
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  line-height: 1;
}

.note-body ul ul,
.noteviewer-body ul ul {
  margin: 0.4em 0 0.2em;
  padding-left: 1.05em;
  border-left-width: 1px;
}

.note-body ol,
.noteviewer-body ol {
  margin: 0 0 1.45em;
  padding-left: 1.45em;
}

.note-body ol > li,
.noteviewer-body ol > li {
  margin: 0.58em 0;
  padding-left: 0.25em;
  line-height: 1.68;
}

.note-body .nt-objectives-card,
.noteviewer-body .nt-objectives-card {
  margin: 16px auto 24px;
  padding: 13px 14px;
  border-radius: 14px;
}

.note-body .nt-objective-heading,
.noteviewer-body .nt-objective-heading,
.note-body .nt-objectives-card--multi .nt-objective-heading,
.noteviewer-body .nt-objectives-card--multi .nt-objective-heading {
  font-size: 0.8125rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.note-body .nt-objectives-subtitle,
.noteviewer-body .nt-objectives-subtitle {
  margin-top: 2px;
}

.note-body .nt-objective-item,
.noteviewer-body .nt-objective-item,
.note-body .nt-objectives-card--multi .nt-objective-item,
.noteviewer-body .nt-objectives-card--multi .nt-objective-item {
  min-height: 39px;
  padding: 8px 9px;
}

.note-body .nt-objective-check,
.noteviewer-body .nt-objective-check {
  cursor: pointer;
}

.note-body blockquote[class^="callout-"],
.noteviewer-body blockquote[class^="callout-"] {
  gap: 13px;
  margin: 1.65em 0 1.7em;
  padding: 15px 17px 15px 15px;
  border-left-width: 3px;
  border-radius: 13px;
}

.note-body .callout-icon-col,
.noteviewer-body .callout-icon-col {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.75rem;
  margin-top: 1px;
}

.note-body .callout-body p,
.noteviewer-body .callout-body p {
  font-size: 0.953125rem;
  line-height: 1.64;
  margin-bottom: 0.72em;
}

.note-body blockquote[class^="callout-"] .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote[class^="callout-"] .callout-body p:first-child > strong:first-child {
  margin-bottom: 0.55em;
  padding-bottom: 0.5em;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}

.note-body .note-callout,
.noteviewer-body .note-callout {
  margin: 1.5em 0 1.55em;
  padding: 14px 16px 14px 46px;
  border-left-width: 3px;
  border-radius: 13px;
}

.note-body .note-callout::before,
.noteviewer-body .note-callout::before {
  left: 14px;
  top: 15px;
  width: 21px;
  height: 21px;
  font-size: 9px;
  line-height: 21px;
}

.note-body .note-callout > strong,
.noteviewer-body .note-callout > strong {
  margin-bottom: 0.55em;
  padding-bottom: 0.5em;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}

.note-body .note-callout > span,
.noteviewer-body .note-callout > span {
  font-size: 0.953125rem;
  line-height: 1.64;
}

.note-body .note-table-scroll,
.noteviewer-body .note-table-scroll {
  margin: 1.75em auto 1.95em;
  border-radius: 12px;
}

.note-body th,
.noteviewer-body th {
  padding: 11px 16px;
  font-size: 0.6875rem;
  letter-spacing: 0.095em;
}

.note-body td,
.noteviewer-body td {
  padding: 12px 16px;
  font-size: 0.90625em;
  line-height: 1.58;
}

.note-body .note-figure,
.noteviewer-body .note-figure {
  margin: 2em auto;
  border-radius: 14px;
}

.note-body .note-figure-caption,
.noteviewer-body .note-figure-caption {
  padding: 11px 16px 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.note-body .note-figure-img-area,
.noteviewer-body .note-figure-img-area {
  padding: 10px;
}

.note-body .note-figure-img-area:hover img,
.noteviewer-body .note-figure-img-area:hover img {
  transform: none;
}

.note-review-section {
  margin: 2.6em 0 2.7em;
}

.note-review-section + .note-review-section {
  margin-top: 2em;
}

.note-body .note-review-heading,
.noteviewer-body .note-review-heading {
  margin-bottom: 0.8em;
  font-size: clamp(1.18rem, 1.55vw, 1.42rem);
  font-weight: 760;
}

.note-review-panel {
  padding: 18px 20px;
  border-radius: 14px;
}

.note-body .note-review-kicker,
.noteviewer-body .note-review-kicker {
  margin-bottom: 12px;
  font-size: 0.65625rem;
  letter-spacing: 0.15em;
}

.note-body .note-review-list,
.noteviewer-body .note-review-list {
  gap: 8px;
}

.note-body .note-review-list > li,
.noteviewer-body .note-review-list > li {
  padding-left: 24px;
  font-size: 0.96875rem;
  line-height: 1.55;
}

@media (max-width: 780px) {
  .nv-resource-header {
    padding-bottom: 14px;
  }

  .nt-hero-title {
    font-size: 1.62rem;
    line-height: 1.18;
  }

  .note-body,
  .noteviewer-body {
    font-size: 1rem;
    line-height: 1.72;
  }

  .note-body h2,
  .noteviewer-body h2 {
    padding-left: 12px;
  }

  .note-body blockquote[class^="callout-"],
  .noteviewer-body blockquote[class^="callout-"] {
    display: block;
  }

  .note-body .callout-icon-col,
  .noteviewer-body .callout-icon-col {
    margin: 0 0 10px;
  }
}

/* Study usability pass: stronger scan anchors without turning notes into UI cards.
   H2 weight tuned to behave as a chapter break inside the same book —
   font-size dropped ~12% from the previous (1.42–1.68rem) range so headings
   stop reading as posters, and weight relaxed from 820 → 720 so the type
   feels confident rather than bashing. The border-left accent rail is the
   primary anchor; the ::after underline stub is dimmed to a hint. */
.note-body h2,
.noteviewer-body h2 {
  position: relative;
  margin-top: 3.05em;
  margin-bottom: 1.02em;
  padding: 0 0 12px 18px;
  border-left-width: 3px;
  font-size: clamp(1.25rem, 1.65vw, 1.48rem);
  font-weight: 720;
  line-height: 1.22;
}

.note-body h2::after,
.noteviewer-body h2::after {
  content: '';
  position: absolute;
  left: 18px;
  bottom: 0;
  width: min(96px, 24%);
  height: 1px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.18;
}

.note-body .nt-objectives-card + h2,
.noteviewer-body .nt-objectives-card + h2,
.note-body > h2:first-of-type,
.noteviewer-body > h2:first-of-type {
  margin-top: 1.95em;
}

.note-body h3,
.noteviewer-body h3 {
  position: relative;
  margin-top: 2.3em;
  margin-bottom: 0.76em;
  padding-left: 13px;
  font-size: clamp(1.18rem, 1.42vw, 1.34rem);
  font-weight: 780;
}

.note-body h3::before,
.noteviewer-body h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 3px;
  height: 0.85em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.42;
  display: block;
}

.note-body h4,
.noteviewer-body h4 {
  margin-top: 1.95em;
  margin-bottom: 0.68em;
  font-size: 0.8125rem;
  font-weight: 820;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.note-body p,
.noteviewer-body p {
  margin-bottom: 1.18em;
}

.note-body strong,
.noteviewer-body strong {
  font-weight: 800;
}

.note-body ul > li,
.noteviewer-body ul > li,
.note-body ol > li,
.noteviewer-body ol > li {
  margin: 0.68em 0;
}

.note-body ul > li::before,
.noteviewer-body ul > li::before {
  width: 6px;
  height: 6px;
}

.note-body .nt-objectives-card,
.noteviewer-body .nt-objectives-card {
  padding: 15px 16px;
  border-left-width: 3px;
}

.note-body .nt-objective-heading,
.noteviewer-body .nt-objective-heading,
.note-body .nt-objectives-card--multi .nt-objective-heading,
.noteviewer-body .nt-objectives-card--multi .nt-objective-heading {
  font-size: 0.875rem;
  letter-spacing: 0.075em;
}

.note-body .nt-objective-item,
.noteviewer-body .nt-objective-item,
.note-body .nt-objectives-card--multi .nt-objective-item,
.noteviewer-body .nt-objectives-card--multi .nt-objective-item {
  min-height: 44px;
  padding: 9px 11px;
}

.note-body .nt-objective-check,
.noteviewer-body .nt-objective-check {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.note-body blockquote[class^="callout-"],
.noteviewer-body blockquote[class^="callout-"] {
  gap: 15px;
  margin: 1.9em 0 1.95em;
  padding: 17px 19px 17px 16px;
  border-left-width: 4px;
  border-radius: 14px;
}

.note-body .callout-icon-col,
.noteviewer-body .callout-icon-col {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 0.8125rem;
}

.note-body blockquote[class^="callout-"] .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote[class^="callout-"] .callout-body p:first-child > strong:first-child {
  margin-bottom: 0.68em;
  padding-bottom: 0.62em;
  font-size: 0.75rem;
  font-weight: 860;
}

.note-body .callout-body p,
.noteviewer-body .callout-body p,
.note-body .note-callout > span,
.noteviewer-body .note-callout > span {
  font-size: 0.984375rem;
  line-height: 1.68;
}

.note-body .note-callout,
.noteviewer-body .note-callout {
  margin: 1.78em 0 1.82em;
  padding: 16px 18px 16px 50px;
  border-left-width: 4px;
}

.note-body .note-callout::before,
.noteviewer-body .note-callout::before {
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 10px;
}

.note-body .note-callout > strong,
.noteviewer-body .note-callout > strong {
  font-size: 0.75rem;
  font-weight: 860;
}

.note-body .note-table-scroll,
.noteviewer-body .note-table-scroll {
  margin-top: 2.05em;
  margin-bottom: 2.15em;
}

.note-body th,
.noteviewer-body th {
  padding: 12px 17px;
  font-size: 0.71875rem;
  font-weight: 820;
}

.note-body td,
.noteviewer-body td {
  padding: 13px 17px;
}

.note-body td:first-child,
.noteviewer-body td:first-child {
  font-weight: 740;
}

.note-body .note-figure,
.noteviewer-body .note-figure {
  margin-top: 2.25em;
  margin-bottom: 2.25em;
}

.note-body .note-figure-caption,
.noteviewer-body .note-figure-caption {
  font-weight: 680;
}

.note-review-section {
  margin-top: 3.05em;
  margin-bottom: 3em;
}

.note-review-panel {
  padding: 20px 22px;
  border-left-width: 4px;
}

.note-body .note-review-heading,
.noteviewer-body .note-review-heading {
  font-size: clamp(1.28rem, 1.72vw, 1.55rem);
  font-weight: 820;
}

.note-body .note-review-list > li,
.noteviewer-body .note-review-list > li {
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 780px) {
  .note-body h2,
  .noteviewer-body h2 {
    padding-left: 14px;
    font-size: 1.36rem;
  }

  .note-body h2::after,
  .noteviewer-body h2::after {
    left: 14px;
    width: 104px;
  }

  .note-body h3,
  .noteviewer-body h3 {
    padding-left: 11px;
  }
}

/* Premium exam-note identity pass: stronger study anchors and clean checklists. */
.note-body h2,
.noteviewer-body h2 {
  border-left: 0;
  padding-left: 24px;
  padding-bottom: 14px;
}

.note-body h2::before,
.noteviewer-body h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.06em;
  width: 5px;
  height: 1.1em;
  border-radius: 999px;
  background: currentColor;
}

.note-body h2::after,
.noteviewer-body h2::after {
  left: 24px;
  width: min(148px, 38%);
}

.note-body h3,
.noteviewer-body h3 {
  padding-left: 28px;
}

.note-body h3::before,
.noteviewer-body h3::before {
  top: 0.66em;
  width: 18px;
  height: 2px;
}

.note-body h4,
.noteviewer-body h4 {
  padding-left: 0;
}

.note-body strong,
.noteviewer-body strong {
  text-underline-offset: 0.18em;
}

.note-body .nt-objectives-card,
.noteviewer-body .nt-objectives-card {
  position: relative;
  overflow: hidden;
}

.note-body .nt-objectives-card::before,
.noteviewer-body .nt-objectives-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: inherit;
}

.note-body .nt-objective-item,
.noteviewer-body .nt-objective-item {
  align-items: center;
}

.note-body blockquote[class^="callout-"],
.noteviewer-body blockquote[class^="callout-"],
.note-body .note-callout,
.noteviewer-body .note-callout {
  position: relative;
  overflow: hidden;
}

.note-body blockquote[class^="callout-"]::after,
.noteviewer-body blockquote[class^="callout-"]::after,
.note-body .note-callout::after,
.noteviewer-body .note-callout::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.18;
}

.note-body .note-worked-example,
.noteviewer-body .note-worked-example {
  border-radius: 15px;
  overflow: hidden;
}

.note-body .note-worked-example > h2,
.note-body .note-worked-example > h3,
.note-body .note-worked-example > h4,
.noteviewer-body .note-worked-example > h2,
.noteviewer-body .note-worked-example > h3,
.noteviewer-body .note-worked-example > h4 {
  padding: 15px 20px;
  font-size: 0.75rem;
  font-weight: 840;
  letter-spacing: 0.12em;
}

.note-body .note-worked-example > h2::before,
.note-body .note-worked-example > h3::before,
.note-body .note-worked-example > h4::before,
.note-body .note-worked-example > h2::after,
.note-body .note-worked-example > h3::after,
.note-body .note-worked-example > h4::after,
.noteviewer-body .note-worked-example > h2::before,
.noteviewer-body .note-worked-example > h3::before,
.noteviewer-body .note-worked-example > h4::before,
.noteviewer-body .note-worked-example > h2::after,
.noteviewer-body .note-worked-example > h3::after,
.noteviewer-body .note-worked-example > h4::after {
  content: none;
}

.note-body .note-review-list,
.noteviewer-body .note-review-list,
.note-body .note-review-list > li,
.noteviewer-body .note-review-list > li {
  list-style: none;
}

.note-body .note-review-list,
.noteviewer-body .note-review-list {
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}

.note-body .note-review-list > li,
.noteviewer-body .note-review-list > li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 8px;
  align-items: start;
  padding-left: 0;
}

.note-body .note-review-list > li::marker,
.noteviewer-body .note-review-list > li::marker {
  content: '';
  font-size: 0;
}

.note-body .note-review-list > li::before,
.noteviewer-body .note-review-list > li::before {
  position: static;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  margin-top: 0.24em;
}

/* The li's sentence is wrapped server-side in one .note-review-text span
   (rendering.py) — pin marker and sentence to their tracks so inline KaTeX
   spans can never auto-flow into the 20px marker column. */
.note-body .note-review-list > li > .esa-check,
.noteviewer-body .note-review-list > li > .esa-check {
  grid-column: 1;
  grid-row: 1;
}
.note-body .note-review-list > li > .note-review-text,
.noteviewer-body .note-review-list > li > .note-review-text {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
}

.note-review-section--recap .note-review-list > li::before {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
}

.note-review-section--progress .note-review-list > li::before {
  grid-column: 1;
  grid-row: 1;
}

.note-review-section--progress .note-review-list > li.is-checked::after {
  left: 7px;
  top: 0.34em;
}

.note-body .note-table-scroll,
.noteviewer-body .note-table-scroll,
.note-body .note-figure,
.noteviewer-body .note-figure {
  overflow: hidden;
}

@media (max-width: 780px) {
  .note-body h2,
  .noteviewer-body h2 {
    padding-left: 18px;
  }

  .note-body h2::after,
  .noteviewer-body h2::after {
    left: 18px;
  }

  .note-body h3,
  .noteviewer-body h3 {
    padding-left: 23px;
  }

  .note-body h3::before,
  .noteviewer-body h3::before {
    width: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark-mode colour lock — final midnight neutral palette.
   Rule: large surfaces = neutral midnight. Blue = tiny accents only.
   95% midnight / 4% slate borders+text / 1% blue accent.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Noteviewer-scoped variable overrides ── */
html.theme-dark {
  --nv-accent: #4f6ff2;
  --nv-accent-strong: #6f8cff;
  --nv-accent-soft: rgba(79,111,242,0.055);
  --nv-accent-faint: rgba(79,111,242,0.03);
  --nv-accent-border: rgba(79,111,242,0.15);
  --nv-teal: #35d4c0;
  --nv-amber: #f0b35a;
}

/* ── Body: true midnight — no blue-navy bleed from body background ── */
html.theme-dark body {
  background: #05070d;
}

/* ── Page canvas: true midnight ── */
html.theme-dark .nv-canvas {
  background: #05070d;
}

/* ── Atmospheric glows: removed entirely in dark mode ── */
html.theme-dark .noteviewer-main::before {
  background: none;
}

html.theme-dark .noteviewer-main::after {
  background: none;
}

html.theme-dark .note-main::before {
  background: none;
}

html.theme-dark .note-main::after {
  background: none;
}

html.theme-dark .noteviewer-main-inner::before {
  background: none;
}

/* ── H1: solid near-white — no gradient tint ── */
html.theme-dark .note-body h1:not(.topic-landing-title),
html.theme-dark .noteviewer-body h1:not(.topic-landing-title) {
  border-bottom-color: rgba(148,163,184,0.12);
  color: #f1f4fb;
  -webkit-text-fill-color: #f1f4fb;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

/* ── H2 section bar: thin blue left accent, near-neutral background wash ── */
html.theme-dark .note-body h2,
html.theme-dark .noteviewer-body h2 {
  border-left-color: rgba(79,111,242,0.60);
  background: linear-gradient(
    90deg,
    rgba(148,163,184,0.06) 0%,
    transparent 60%
  );
  box-shadow: none;
}

/* ── H3: no tinted glow ── */
html.theme-dark .note-body h3,
html.theme-dark .noteviewer-body h3 {
  text-shadow: none;
}

/* ── H4: muted slate, not bright blue ── */
html.theme-dark .note-body h4,
html.theme-dark .noteviewer-body h4 {
  color: rgba(148,163,184,0.74);
  border-bottom-color: rgba(148,163,184,0.12);
}

/* ── OL counters: muted slate ── */
html.theme-dark .note-body ol > li::marker,
html.theme-dark .noteviewer-body ol > li::marker {
  color: rgba(148,163,184,0.62);
}

/* ── UL guides and dash bullets: slate, not lavender ── */
html.theme-dark .note-body ul,
html.theme-dark .noteviewer-body ul {
  border-left-color: rgba(148,163,184,0.12);
}

html.theme-dark .note-body ul > li::before,
html.theme-dark .noteviewer-body ul > li::before {
  color: rgba(148,163,184,0.55);
}

html.theme-dark .note-body ul ul,
html.theme-dark .noteviewer-body ul ul {
  border-left-color: rgba(148,163,184,0.07);
}

html.theme-dark .note-body ul ul > li::before,
html.theme-dark .noteviewer-body ul ul > li::before {
  color: rgba(148,163,184,0.32);
}

/* ── Italic text: near-white, no indigo tint ── */
html.theme-dark .note-body em,
html.theme-dark .noteviewer-body em {
  color: rgba(220,228,240,0.84);
}

/* ── Generic blockquote: neutral surface, slate border ── */
html.theme-dark .note-body blockquote:not(.note-callout),
html.theme-dark .noteviewer-body blockquote:not(.note-callout) {
  border-left-color: rgba(148,163,184,0.24);
  background: rgba(12,16,27,0.60);
  box-shadow: none;
}

/* ── Breadcrumb links: muted periwinkle, not bright blue ── */
html.theme-dark .note-breadcrumbs a {
  color: rgba(148,163,200,0.70);
}

html.theme-dark .note-breadcrumbs a:hover {
  color: rgba(180,195,220,0.88);
}

/* ── Tables: neutral slate borders, neutral header ── */
html.theme-dark .note-body .note-table-scroll,
html.theme-dark .noteviewer-body .note-table-scroll {
  border-color: rgba(148,163,184,0.10);
  border-top-color: rgba(148,163,184,0.14);
  background: rgba(7,9,15,0.96);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.36),
    0 12px 48px rgba(0,0,0,0.42);
}

html.theme-dark .note-body .note-table-scroll::before,
html.theme-dark .noteviewer-body .note-table-scroll::before {
  background: linear-gradient(
    90deg,
    transparent 5%,
    rgba(148,163,184,0.06) 50%,
    transparent 95%
  );
}

html.theme-dark .note-body th,
html.theme-dark .noteviewer-body th {
  background: rgba(10,13,22,0.96);
  border-bottom: 2px solid rgba(148,163,184,0.14);
  border-right-color: rgba(148,163,184,0.08);
  color: rgba(148,163,184,0.78);
}

html.theme-dark .note-body th:first-child,
html.theme-dark .noteviewer-body th:first-child {
  border-right-color: rgba(148,163,184,0.12);
}

html.theme-dark .note-body tbody tr:hover td,
html.theme-dark .noteviewer-body tbody tr:hover td {
  background: rgba(148,163,184,0.03);
}

/* ── Image figures: neutral slate border, no colour wash ── */
html.theme-dark .note-body .note-figure,
html.theme-dark .noteviewer-body .note-figure {
  border-color: rgba(148,163,184,0.12);
  border-top-color: rgba(148,163,184,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 2px 6px rgba(0,0,0,0.28),
    0 10px 36px rgba(0,0,0,0.44),
    0 24px 72px rgba(0,0,0,0.30);
}

html.theme-dark .note-body .note-figure-caption,
html.theme-dark .noteviewer-body .note-figure-caption {
  background: rgba(8,11,18,0.80);
  border-bottom-color: rgba(148,163,184,0.10);
}

/* ── Chapter CTA: neutral surface, slate chips ── */
html.theme-dark .note-chapter-cta {
  background: rgba(10,13,22,0.78);
  border-color: rgba(148,163,184,0.10);
}

html.theme-dark .note-chapter-cta-label {
  color: rgba(148,163,184,0.58);
}

html.theme-dark .note-chapter-cta-link {
  background: rgba(13,17,28,0.88);
  border-color: rgba(148,163,184,0.12);
  color: rgba(199,207,223,0.82);
}

html.theme-dark .note-chapter-cta-link:hover {
  background: rgba(16,21,34,0.90);
  border-color: rgba(148,163,184,0.18);
  color: rgba(220,228,240,0.92);
  box-shadow: none;
}

/* ── Callout: Key Point — neutral card + thin blue left border ── */
html.theme-dark .note-body blockquote.callout-key-point,
html.theme-dark .noteviewer-body blockquote.callout-key-point {
  background: rgba(8,11,18,0.94);
  border-left-color: rgba(79,111,242,0.55);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32);
}

html.theme-dark .note-body .callout-key-point .callout-icon-col,
html.theme-dark .noteviewer-body .callout-key-point .callout-icon-col {
  background: rgba(79,111,242,0.07);
  border-color: rgba(79,111,242,0.16);
  color: rgba(111,140,255,0.88);
  box-shadow: none;
}

html.theme-dark .note-body blockquote.callout-key-point .callout-body p:first-child > strong:first-child,
html.theme-dark .noteviewer-body blockquote.callout-key-point .callout-body p:first-child > strong:first-child {
  color: rgba(111,140,255,0.88);
  border-bottom-color: rgba(148,163,184,0.12);
}

/* ── Callout: Examiner — neutral card + thin teal left border ── */
html.theme-dark .note-body blockquote.callout-examiner,
html.theme-dark .noteviewer-body blockquote.callout-examiner {
  background: rgba(8,11,18,0.94);
  border-left-color: rgba(53,212,192,0.55);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32);
}

html.theme-dark .note-body .callout-examiner .callout-icon-col,
html.theme-dark .noteviewer-body .callout-examiner .callout-icon-col {
  background: rgba(54,215,194,0.08);
  border-color: rgba(54,215,194,0.22);
  color: rgba(94,234,212,0.88);
  box-shadow: none;
}

html.theme-dark .note-body blockquote.callout-examiner .callout-body p:first-child > strong:first-child,
html.theme-dark .noteviewer-body blockquote.callout-examiner .callout-body p:first-child > strong:first-child {
  color: rgba(94,234,212,0.88);
  border-bottom-color: rgba(148,163,184,0.12);
}

html.theme-dark .note-body .callout-examiner .callout-body p,
html.theme-dark .noteviewer-body .callout-examiner .callout-body p {
  color: rgba(220,230,228,0.88);
}

/* ── Callout: Recap — neutral card + thin blue left border ── */
html.theme-dark .note-body blockquote.callout-recap,
html.theme-dark .noteviewer-body blockquote.callout-recap {
  background: rgba(8,11,18,0.94);
  border-left-color: rgba(79,111,242,0.48);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.28),
    0 8px 32px rgba(0,0,0,0.32);
}

html.theme-dark .note-body .callout-recap .callout-icon-col,
html.theme-dark .noteviewer-body .callout-recap .callout-icon-col {
  background: rgba(79,111,242,0.07);
  border-color: rgba(79,111,242,0.16);
  color: rgba(111,140,255,0.86);
  box-shadow: none;
}

html.theme-dark .note-body blockquote.callout-recap .callout-body p:first-child > strong:first-child,
html.theme-dark .noteviewer-body blockquote.callout-recap .callout-body p:first-child > strong:first-child {
  color: rgba(111,140,255,0.88);
  border-bottom-color: rgba(148,163,184,0.12);
}

/* ── Inline callout: Insight — neutral card + thin teal accent ── */
html.theme-dark .note-body .note-callout.note-callout--insight,
html.theme-dark .noteviewer-body .note-callout.note-callout--insight {
  background: rgba(8,11,18,0.88);
  border-color: rgba(148,163,184,0.095);
  border-left-color: rgba(53,212,192,0.55);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.24),
    0 8px 28px rgba(0,0,0,0.28);
}

html.theme-dark .note-body .note-callout.note-callout--insight::before,
html.theme-dark .noteviewer-body .note-callout.note-callout--insight::before {
  background: rgba(54,215,194,0.10);
  color: rgba(94,234,212,0.88);
  box-shadow: none;
}

html.theme-dark .note-body .note-callout.note-callout--insight > strong,
html.theme-dark .noteviewer-body .note-callout.note-callout--insight > strong {
  color: rgba(94,234,212,0.88);
  border-bottom-color: rgba(148,163,184,0.10);
}

html.theme-dark .note-body .note-callout.note-callout--insight > span,
html.theme-dark .noteviewer-body .note-callout.note-callout--insight > span {
  color: rgba(220,230,228,0.86);
}

/* ── Review sections: subtle blue accent on small elements only ── */
html.theme-dark .note-review-section--progress .note-review-kicker {
  color: rgba(79,111,242,0.72);
}

html.theme-dark .note-review-section--progress .note-review-list > li::before {
  border-color: rgba(79,111,242,0.20);
}

html.theme-dark .note-review-section--progress .note-review-panel {
  border-color: rgba(148,163,184,0.12);
}

html.theme-dark .note-review-section--recap .note-review-panel {
  border-color: rgba(148,163,184,0.12);
}

/* ── Learning Objectives: hide icon column, collapse grid ── */
html.theme-dark .note-body .nt-objectives-icon-column,
html.theme-dark .noteviewer-body .nt-objectives-icon-column {
  display: none;
}

html.theme-dark .note-body .nt-objectives-shell,
html.theme-dark .noteviewer-body .nt-objectives-shell {
  grid-template-columns: 1fr;
}

html.theme-dark .note-body .nt-objectives-main,
html.theme-dark .noteviewer-body .nt-objectives-main {
  padding-left: 0;
}

html.theme-dark .note-body .nt-objectives-main::before,
html.theme-dark .noteviewer-body .nt-objectives-main::before {
  display: none;
}

/* ── LO card: neutral dark surface ── */
html.theme-dark .note-body .nt-objectives-card,
html.theme-dark .noteviewer-body .nt-objectives-card {
  border-color: rgba(148,163,184,0.095);
  background: rgba(8,11,18,0.96);
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
}

/* "1 objective" pill: neutral muted — not a blue blob */
html.theme-dark .note-body .nt-objectives-count,
html.theme-dark .noteviewer-body .nt-objectives-count {
  border-color: rgba(148,163,184,0.09);
  background: rgba(148,163,184,0.07);
  color: rgba(199,207,223,0.76);
}

html.theme-dark .note-body .nt-objectives-rule,
html.theme-dark .noteviewer-body .nt-objectives-rule {
  background: linear-gradient(90deg, rgba(148,163,184,0.14), transparent);
}

/* Objective row: neutral raised surface */
html.theme-dark .note-body .nt-objective-item,
html.theme-dark .noteviewer-body .nt-objective-item {
  border-color: rgba(148,163,184,0.10);
  background: rgba(13,17,28,0.88);
}

/* Checkbox circle: small — subtle blue border is OK */
html.theme-dark .note-body .nt-objective-check,
html.theme-dark .noteviewer-body .nt-objective-check {
  border-color: rgba(79,111,242,0.45);
  box-shadow: none;
}

html.theme-dark .note-body .nt-objective-gutter,
html.theme-dark .noteviewer-body .nt-objective-gutter {
  background: rgba(148,163,184,0.12);
}

/* "Not started" pill: muted neutral */
html.theme-dark .note-body .nt-objective-status,
html.theme-dark .noteviewer-body .nt-objective-status {
  border-color: rgba(79,111,242,0.14);
  background: rgba(10,13,22,0.72);
  color: rgba(180,195,235,0.82);
}

/* ── Progress fills: thin fills — intentional blue accent ── */

/* ── Top reading progress bar ── */
html.theme-dark .nt-top-progress-fill {
  background: linear-gradient(90deg, #3b5bdb 0%, #4f6ff2 100%);
  box-shadow: none;
}

/* ── Hero: muted breadcrumb path, neutral context chip ── */
html.theme-dark .nt-hero-path-link {
  color: rgba(148,163,200,0.68);
}

html.theme-dark .nt-hero-context-chip {
  border-color: rgba(148,163,184,0.14);
  background: rgba(15,20,36,0.60);
  color: rgba(148,163,184,0.70);
}

/* Hero title: solid near-white — no gradient wash, no blue tint */
html.theme-dark .nt-hero-title {
  color: #f1f4fb;
  -webkit-text-fill-color: #f1f4fb;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: none;
}

/* Hero divider: faint slate bar */
html.theme-dark .nt-hero-divider {
  background: rgba(148,163,184,0.16);
}

/* ── Resource title row + hero bottom rule: neutral slate ── */
html.theme-dark .nv-resource-title-row {
  border-bottom-color: rgba(148,163,184,0.10);
}

html.theme-dark .nv-hero {
  border-bottom-color: rgba(148,163,184,0.10);
}

/* ── Review panels: override var(--surface) which resolves to #131827 (blue) ── */
html.theme-dark .note-review-panel {
  background: rgba(8,11,18,0.96);
  border-color: rgba(148,163,184,0.10);
}

html.theme-dark .note-review-section--recap .note-review-panel {
  border-color: rgba(53,212,192,0.14);
}

/* Pagination hover uses the shared button styling above; keep this late block
   intentionally empty so it does not flatten the previous/next distinction. */

/* ═══════════════════════════════════════════════════════════════════════════
   Premium textbook note refinement — structural polish only.
   Final dark colours live in theme-dark.css, which loads after this file.
   ═══════════════════════════════════════════════════════════════════════════ */

.note-body h2,
.noteviewer-body h2 {
  position: relative;
  margin-top: 3.35em;
  margin-bottom: 0.92em;
  padding: 0 0 15px 22px;
  border: 0;
  background: none;
  box-shadow: none;
  line-height: 1.16;
}

.note-body h2::before,
.noteviewer-body h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.08em;
  width: 3px;
  height: 24px;
  border-radius: 999px;
}

.note-body h2::after,
.noteviewer-body h2::after {
  content: '';
  position: absolute;
  left: 22px;
  bottom: 0;
  width: clamp(92px, 17%, 136px);
  height: 2px;
  border-radius: 999px;
}

.note-body .nt-objectives-card + h2,
.noteviewer-body .nt-objectives-card + h2,
.note-body > h2:first-of-type,
.noteviewer-body > h2:first-of-type {
  margin-top: 2.18em;
}

.note-body h3,
.noteviewer-body h3 {
  position: relative;
  margin-top: 2.45em;
  margin-bottom: 0.72em;
  padding-left: 18px;
  font-weight: 790;
  line-height: 1.25;
}

.note-body h3::before,
.noteviewer-body h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.57em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.note-body h3::after,
.noteviewer-body h3::after {
  content: '';
  position: absolute;
  left: 18px;
  right: auto;
  bottom: -0.38em;
  width: 58px;
  height: 1px;
  border-radius: 999px;
}

.note-body h4,
.noteviewer-body h4 {
  margin-top: 2.05em;
  margin-bottom: 0.66em;
  padding-left: 0;
  font-size: 0.84rem;
  font-weight: 830;
  letter-spacing: 0.075em;
  line-height: 1.32;
  text-transform: uppercase;
}

.note-body p,
.noteviewer-body p {
  margin-bottom: 1.22em;
}

.note-body strong,
.noteviewer-body strong {
  font-weight: 800;
  text-underline-offset: 0.18em;
}

.note-body ul > li,
.noteviewer-body ul > li,
.note-body ol > li,
.noteviewer-body ol > li {
  margin: 0.72em 0;
}

.note-body .nt-objectives-card,
.noteviewer-body .nt-objectives-card {
  position: relative;
  margin-top: 30px;
  margin-bottom: 34px;
  padding: 16px 18px;
  border-radius: 16px;
  overflow: hidden;
}

.note-body .nt-objectives-card::before,
.noteviewer-body .nt-objectives-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: inherit;
}

.note-body .nt-objectives-shell,
.noteviewer-body .nt-objectives-shell,
.note-body .nt-objectives-card--multi .nt-objectives-shell,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-shell {
  grid-template-columns: 1fr;
  gap: 0;
}

.note-body .nt-objectives-icon-column,
.noteviewer-body .nt-objectives-icon-column {
  display: none;
}

.note-body .nt-objectives-main,
.noteviewer-body .nt-objectives-main,
.note-body .nt-objectives-card--multi .nt-objectives-main,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-main {
  padding-left: 0;
}

.note-body .nt-objectives-main::before,
.noteviewer-body .nt-objectives-main::before {
  display: none;
}

.note-body .nt-objectives-head,
.noteviewer-body .nt-objectives-head {
  padding-top: 0;
}

.note-body .nt-objectives-title-row,
.noteviewer-body .nt-objectives-title-row,
.note-body .nt-objectives-card--multi .nt-objectives-title-row,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-title-row {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.note-body .nt-objective-heading,
.noteviewer-body .nt-objective-heading,
.note-body .nt-objectives-card--multi .nt-objective-heading,
.noteviewer-body .nt-objectives-card--multi .nt-objective-heading {
  font-size: 0.78rem;
  font-weight: 840;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.note-body .nt-objectives-count,
.noteviewer-body .nt-objectives-count,
.note-body .nt-objectives-card--multi .nt-objectives-count,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-count {
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 780;
}

.note-body .nt-objectives-subtitle,
.noteviewer-body .nt-objectives-subtitle,
.note-body .nt-objectives-card--multi .nt-objectives-subtitle,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-subtitle {
  font-size: 0.88rem;
  line-height: 1.45;
}

.note-body .nt-objectives-rule,
.noteviewer-body .nt-objectives-rule,
.note-body .nt-objectives-card--multi .nt-objectives-rule,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-rule {
  margin: 12px 0 10px;
}

.note-body .nt-objective-list,
.note-body .nt-objective-body,
.noteviewer-body .nt-objective-list,
.noteviewer-body .nt-objective-body {
  gap: 8px;
}

.note-body .nt-objective-item,
.noteviewer-body .nt-objective-item,
.note-body .nt-objectives-card--multi .nt-objective-item,
.noteviewer-body .nt-objectives-card--multi .nt-objective-item {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 9px 10px;
  border-radius: 12px;
}

.note-body .nt-objective-gutter,
.noteviewer-body .nt-objective-gutter {
  display: none;
}

.note-body .nt-objective-check,
.noteviewer-body .nt-objective-check,
.note-body .nt-objectives-card--multi .nt-objective-check,
.noteviewer-body .nt-objectives-card--multi .nt-objective-check {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.note-body .nt-objective-copy,
.noteviewer-body .nt-objective-copy,
.note-body .nt-objectives-card--multi .nt-objective-copy,
.noteviewer-body .nt-objectives-card--multi .nt-objective-copy {
  font-size: 0.91rem;
  line-height: 1.42;
}

.note-body .nt-objective-status,
.noteviewer-body .nt-objective-status,
.note-body .nt-objectives-card--multi .nt-objective-status,
.noteviewer-body .nt-objectives-card--multi .nt-objective-status {
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 740;
}

.note-body .nt-objective-status-icon,
.noteviewer-body .nt-objective-status-icon,
.note-body .nt-objectives-card--multi .nt-objective-status-icon,
.noteviewer-body .nt-objectives-card--multi .nt-objective-status-icon {
  width: 11px;
  height: 11px;
  border-width: 1.5px;
}

.note-body blockquote[class^="callout-"],
.noteviewer-body blockquote[class^="callout-"],
.note-body .note-callout,
.noteviewer-body .note-callout {
  position: relative;
  overflow: hidden;
  border-left-width: 3px;
  border-radius: 16px;
  box-shadow: none;
}

.note-body blockquote[class^="callout-"],
.noteviewer-body blockquote[class^="callout-"] {
  gap: 14px;
  margin: 2.1em 0 2.05em;
  padding: 18px 21px 18px 18px;
}

.note-body .callout-icon-col,
.noteviewer-body .callout-icon-col {
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 9px;
  font-size: 0.8rem;
}

.note-body blockquote[class^="callout-"] .callout-body p:first-child > strong:first-child,
.noteviewer-body blockquote[class^="callout-"] .callout-body p:first-child > strong:first-child,
.note-body .note-callout > strong,
.noteviewer-body .note-callout > strong {
  margin-bottom: 0.62em;
  padding-bottom: 0.58em;
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.13em;
}

.note-body .callout-body p,
.noteviewer-body .callout-body p,
.note-body .note-callout > span,
.noteviewer-body .note-callout > span {
  font-size: 0.99rem;
  line-height: 1.72;
}

.note-body .note-callout,
.noteviewer-body .note-callout {
  margin: 1.85em 0;
  padding: 15px 18px 15px 48px;
}

.note-body .note-callout::before,
.noteviewer-body .note-callout::before {
  width: 23px;
  height: 23px;
  line-height: 23px;
  border-radius: 8px;
}

.note-body .note-worked-example,
.noteviewer-body .note-worked-example {
  border-radius: 16px;
}

.note-body .note-table-scroll,
.noteviewer-body .note-table-scroll {
  margin: 2.25em 0 2.35em;
  border-radius: 16px;
}

.note-body th,
.noteviewer-body th {
  padding: 13px 18px;
  font-size: 0.7rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.note-body td,
.noteviewer-body td {
  padding: 14px 18px;
  line-height: 1.58;
}

.note-body td:first-child,
.noteviewer-body td:first-child {
  font-weight: 790;
}

.note-body .note-figure,
.noteviewer-body .note-figure {
  margin: 2.55em 0;
  border-radius: 17px;
}

.note-body .note-figure-caption,
.noteviewer-body .note-figure-caption {
  padding: 12px 17px;
  font-size: 0.78rem;
  font-weight: 720;
  letter-spacing: 0.04em;
}

.note-body .note-figure-img-area,
.noteviewer-body .note-figure-img-area {
  padding: 10px;
}

.note-body .note-figure-img-area img,
.noteviewer-body .note-figure-img-area img {
  border-radius: 8px;
  transition: none;
}

.note-body .note-figure-img-area:hover img,
.noteviewer-body .note-figure-img-area:hover img {
  transform: none;
}

.note-review-section {
  margin-top: 3.15em;
  margin-bottom: 3em;
}

.note-review-panel {
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  border-left-width: 3px;
  border-radius: 17px;
}

.note-body .note-review-heading,
.noteviewer-body .note-review-heading {
  margin-bottom: 18px;
  font-size: clamp(1.22rem, 1.66vw, 1.48rem);
  font-weight: 830;
  letter-spacing: -0.025em;
}

.note-body .note-review-kicker,
.noteviewer-body .note-review-kicker {
  gap: 9px;
  margin-bottom: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}

.note-review-kicker::before {
  width: 18px;
  height: 2px;
}

.note-body .note-review-list,
.noteviewer-body .note-review-list,
.note-body .note-review-list > li,
.noteviewer-body .note-review-list > li {
  list-style: none;
}

.note-body .note-review-list,
.noteviewer-body .note-review-list {
  gap: 9px;
  padding-left: 0;
  margin-left: 0;
  border-left: 0;
}

.note-body .note-review-list > li,
.noteviewer-body .note-review-list > li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 9px;
  align-items: start;
  margin: 0;
  padding-left: 0;
  font-size: 1rem;
  line-height: 1.62;
}

.note-body .note-review-list > li::marker,
.noteviewer-body .note-review-list > li::marker {
  content: '';
  font-size: 0;
}

.note-body .note-review-list > li::before,
.noteviewer-body .note-review-list > li::before {
  position: static;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  margin-top: 0.23em;
}

.note-review-section--recap .note-review-list > li::before {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
}

.note-review-section--progress .note-review-list > li::before {
  grid-column: 1;
  grid-row: 1;
}

.note-review-section--progress .note-review-list > li.is-checked::after {
  left: 7px;
  top: 0.34em;
}

.note-body .nt-objective-heading,
.noteviewer-body .nt-objective-heading,
.note-body .note-review-heading,
.noteviewer-body .note-review-heading,
.note-body .note-worked-example > h2,
.noteviewer-body .note-worked-example > h2,
.note-body .note-worked-example > h3,
.noteviewer-body .note-worked-example > h3,
.note-body .note-worked-example > h4,
.noteviewer-body .note-worked-example > h4 {
  padding-left: 0;
  padding-bottom: 0;
}

.note-body .nt-objective-heading::before,
.noteviewer-body .nt-objective-heading::before,
.note-body .nt-objective-heading::after,
.noteviewer-body .nt-objective-heading::after,
.note-body .note-review-heading::before,
.noteviewer-body .note-review-heading::before,
.note-body .note-review-heading::after,
.noteviewer-body .note-review-heading::after,
.note-body .note-worked-example > h2::before,
.noteviewer-body .note-worked-example > h2::before,
.note-body .note-worked-example > h2::after,
.noteviewer-body .note-worked-example > h2::after,
.note-body .note-worked-example > h3::before,
.noteviewer-body .note-worked-example > h3::before,
.note-body .note-worked-example > h3::after,
.noteviewer-body .note-worked-example > h3::after,
.note-body .note-worked-example > h4::before,
.noteviewer-body .note-worked-example > h4::before,
.note-body .note-worked-example > h4::after,
.noteviewer-body .note-worked-example > h4::after {
  content: none;
}

@media (max-width: 780px) {
  .note-body h2,
  .noteviewer-body h2 {
    padding-left: 18px;
  }

  .note-body h2::before,
  .noteviewer-body h2::before {
    height: 21px;
  }

  .note-body h2::after,
  .noteviewer-body h2::after {
    left: 18px;
    width: 100px;
  }

  .note-body h3,
  .noteviewer-body h3 {
    padding-left: 16px;
  }

  .note-body h3::after,
  .noteviewer-body h3::after {
    left: 16px;
    width: 48px;
  }

  .note-body .nt-objective-item,
  .noteviewer-body .nt-objective-item {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .note-body .nt-objective-status,
  .noteviewer-body .nt-objective-status {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }
}

/* Final noteviewer micro-polish: density and study rhythm. */
.note-body h2,
.noteviewer-body h2 {
  margin-top: 3.05em;
  margin-bottom: 0.82em;
  padding-left: 20px;
  padding-bottom: 13px;
}

.note-body h2::before,
.noteviewer-body h2::before {
  top: 0.12em;
  width: 4px;
  height: 22px;
  border-radius: 2px 999px 999px 2px;
}

.note-body h2::after,
.noteviewer-body h2::after {
  left: 20px;
  width: clamp(86px, 15%, 124px);
}

.note-body h3,
.noteviewer-body h3 {
  margin-top: 2.18em;
  margin-bottom: 0.66em;
}

.note-body h4,
.noteviewer-body h4 {
  margin-top: 1.82em;
}

.note-body h2 + p,
.noteviewer-body h2 + p,
.note-body h3 + p,
.noteviewer-body h3 + p,
.note-body h4 + p,
.noteviewer-body h4 + p {
  margin-top: 0;
}

.note-body blockquote[class^="callout-"],
.noteviewer-body blockquote[class^="callout-"] {
  max-width: 860px;
  margin-top: 1.9em;
  margin-bottom: 1.9em;
  padding: 16px 19px 16px 17px;
}

.note-body .note-callout,
.noteviewer-body .note-callout {
  max-width: 860px;
  margin-top: 1.75em;
  margin-bottom: 1.75em;
  padding-top: 14px;
  padding-bottom: 14px;
}

.note-body blockquote.callout-misconception,
.noteviewer-body blockquote.callout-misconception,
.note-body .note-callout.note-callout--misconception,
.noteviewer-body .note-callout.note-callout--misconception {
  max-width: 880px;
}

.note-body .callout-body p,
.noteviewer-body .callout-body p,
.note-body .note-callout > span,
.noteviewer-body .note-callout > span {
  line-height: 1.68;
}

.note-body .note-table-scroll,
.noteviewer-body .note-table-scroll {
  margin-top: 2.05em;
  margin-bottom: 2.2em;
}

.note-body th,
.noteviewer-body th {
  padding-top: 12px;
  padding-bottom: 12px;
}

.note-body td,
.noteviewer-body td {
  padding-top: 13px;
  padding-bottom: 13px;
}

.note-body .note-figure,
.noteviewer-body .note-figure {
  margin-top: 2.35em;
  margin-bottom: 2.35em;
}

.note-review-section {
  margin-top: 2.85em;
}

.note-review-panel {
  padding: 19px 21px;
}

@media (max-width: 780px) {
  .note-body h2,
  .noteviewer-body h2 {
    padding-left: 18px;
  }

  .note-body h2::after,
  .noteviewer-body h2::after {
    left: 18px;
  }
}

/* ── Note header: more breathing room between breadcrumbs and title ── */
.nt-hero {
  margin-top: 14px;
}

/* ── Learning Objectives: two-column layout — left accent rule + text ── */
/* The nt-objective-check and nt-objective-status elements are no longer
   emitted by the renderer. These rules are a CSS safety net. */
.note-body .nt-objective-check,
.noteviewer-body .nt-objective-check,
.note-body .nt-objective-status,
.noteviewer-body .nt-objective-status,
.note-body .nt-objective-status-icon,
.noteviewer-body .nt-objective-status-icon {
  display: none;
}

/* Grid: 3px accent column + full-width text column */
.note-body .nt-objective-item,
.noteviewer-body .nt-objective-item,
.note-body .nt-objectives-card--multi .nt-objective-item,
.noteviewer-body .nt-objectives-card--multi .nt-objective-item {
  display: grid;
  grid-template-columns: 3px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  min-height: 52px;
  padding: 12px 18px 12px 14px;
  border-radius: 14px;
}

/* Gutter: restore display (earlier layers set display:none), make it the accent rail */
.note-body .nt-objective-gutter,
.noteviewer-body .nt-objective-gutter,
.note-body .nt-objectives-card--multi .nt-objective-gutter,
.noteviewer-body .nt-objectives-card--multi .nt-objective-gutter {
  display: block;
  grid-column: 1;
  width: 3px;
  min-height: 28px;
  align-self: stretch;
  background: linear-gradient(180deg, rgba(111, 140, 255, 0.62), rgba(68, 215, 198, 0.30));
  border-radius: 2px;
}

/* Copy: flex row so code + dash + text all render inline, wrapping naturally */
.note-body .nt-objective-copy,
.noteviewer-body .nt-objective-copy,
.note-body .nt-objectives-card--multi .nt-objective-copy,
.noteviewer-body .nt-objectives-card--multi .nt-objective-copy {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3rem;
  min-width: 0;
  width: 100%;
  line-height: 1.45;
}

/* Code badge: stays on same line as dash, no break */
.note-body .nt-objective-copy .obj-code,
.noteviewer-body .nt-objective-copy .obj-code,
.note-body .nt-objectives-card--multi .nt-objective-copy .obj-code,
.noteviewer-body .nt-objectives-card--multi .nt-objective-copy .obj-code {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Em-dash: stays pinned to the code */
.note-body .nt-objective-dash,
.noteviewer-body .nt-objective-dash,
.note-body .nt-objectives-card--multi .nt-objective-dash,
.noteviewer-body .nt-objectives-card--multi .nt-objective-dash {
  flex: 0 0 auto;
  white-space: nowrap;
  margin: 0 0.15rem;
}

/* Objective text: fills remaining width, wraps normally */
.note-body .nt-objective-text,
.noteviewer-body .nt-objective-text,
.note-body .nt-objectives-card--multi .nt-objective-text,
.noteviewer-body .nt-objectives-card--multi .nt-objective-text {
  flex: 1 1 auto;
  min-width: 160px;
  white-space: normal;
}

/* =========================================================================
   Notes & summaries textbook reader — shared editorial prose system
   -------------------------------------------------------------------------
   Selectors scoped to (.note-body--notes, .note-body--summaries) so the two
   resource types share one premium prose design language. Helper classes
   .note-lead and .note-prose-surface are emitted by rendering.py for both
   `notes` and `summaries`; .note-concept / .note-concept-def / .esa-chem
   are emitted for notes only (the summary cascade ignores them safely).
   Other surfaces (flashcards, questions, MCQs, videos, indexes) are
   unaffected — they have neither .note-body--notes nor .note-body--summaries.

     · article width      ~1000px on desktop, full container width on mobile
     · prose              one consistent flowing system at ~18.8px
     · h3                 small calm indigo dot + soft hairline trailing right
     · .note-lead         first-paragraph editorial bump only, no block
     · .note-concept      no panel/card/border/background — just inline term
                          emphasis so concept paragraphs flow with the prose
     · tables/callouts    untouched; inherit the wider article naturally

   Notes-only structural components (.nt-objectives-card, .note-review-section,
   .note-worked-example) intentionally stay in the notes-only branch of
   render_safe_markdown(); summaries never get them.
   ========================================================================= */

/* Widen the article past .note-body's base 820px so the prose feels like a
   real textbook surface, not a narrow column. The main panel can host this
   comfortably: 1440 canvas − 320 rail − 16 rail margin − 88 inner padding ≈
   1016px of room. Prose fills the same width — no internal spine narrowing —
   so the article feels substantial instead of like a column floating in
   empty space. Tables / figures / callouts / recap inherit this wider width
   naturally without any per-block override. */
.note-body--notes,
.note-body--summaries {
  --notes-reader-strong: rgba(248, 251, 255, 0.98);
  --notes-reader-soft: rgba(181, 194, 216, 0.78);
  --notes-reader-indigo: 148, 163, 244;
  --notes-reader-term: 198, 215, 250;
  --notes-reader-def-line: rgba(181, 194, 216, 0.22);
  --notes-reader-divider: rgba(148, 163, 184, 0.32);
  --notes-reader-divider-soft: rgba(148, 163, 184, 0.18);
  --notes-reader-h3-rule: rgba(148, 163, 184, 0.16);
  /* Surface horizontal padding token. The surface no longer paints any
     visual chrome (background/border/shadow stripped — see .note-prose-
     surface block below), so this token is now 0. Kept as a token rather
     than hard-coded so the break-out negative-margin rules continue to
     resolve cleanly (they compute to 0 with this value). */
  --notes-surface-pad-x: 0px;
  max-width: 1000px;
  width: 100%;
  margin-inline: auto;
  font-size: clamp(1.15625rem, 1.10rem + 0.08vw, 1.1875rem);
  line-height: 1.72;
}

/* ── Unified reading panel.
   One continuous surface that wraps all body prose between the Learning
   Objectives card (above) and the Quick Recap / Progress Check sections
   (below). The wrapper is inserted by wrap_prose_surface() in rendering.py.
   Visual specification (calibrated to be detectable on the #05070d body):
     - Background:  rgba(255,255,255,0.035) — resolves to ~#0d1019, a real
                    tonal lift from the surrounding midnight surface.
     - Top edge:    inset 1px highlight at 0.06 alpha — catches "ambient
                    light" so the surface reads as a 3D object resting on
                    the page, not just a tinted rectangle.
     - Border:      1px solid rgba(255,255,255,0.08) — visible edge,
                    not harsh.
     - Outer:       0 32px 64px -32px rgba(0,0,0,0.60) — the surface
                    visibly lifts off the page background.
     - Radius:      12px — soft, in keeping with other cards on the page.
     - Padding:     48px 56px desktop, 40px 32px tablet, 32px 24px mobile.
   Callouts, figures, and worked examples extend back to the original
   content-column width via negative horizontal margins below. Tables sit
   at the surface's full interior width without breaking out. */
/* The .note-prose-surface wrapper is intentionally transparent and edgeless.
   It exists only as a DOM grouping for the prose run (between the LO card
   and the review sections), inserted by wrap_prose_surface() in
   noteviewer/rendering.py. Three prior passes tried to paint visible
   chrome here (background card, border, inset highlight, shadow); none
   landed as a "premium card resting on the page" — every variant
   perceived as a grey wash across content. The wrapper now keeps only
   the margin so the prose run has breathing space from siblings above
   and below. */
.note-prose-surface {
  margin: 28px 0 36px;
}

/* ── Break-out elements — visually escape the surface back to the article's
   full content-column width. Negative horizontal margins match the surface's
   horizontal padding so the outer edge of each block aligns with the outer
   edge of the surface (i.e. its border). The reader's eye reads the prose
   inside the calm reading panel, then a callout / figure / worked example
   visually punctures the wall, then prose resumes. */
.note-body--notes > .note-prose-surface > blockquote[class^="callout-"],
.note-body--summaries > .note-prose-surface > blockquote[class^="callout-"],
.note-body--notes > .note-prose-surface > figure,
.note-body--summaries > .note-prose-surface > figure,
.note-body--notes > .note-prose-surface > .note-figure,
.note-body--summaries > .note-prose-surface > .note-figure,
.note-body--notes > .note-prose-surface > .note-worked-example {
  margin-left: calc(-1 * var(--notes-surface-pad-x, 56px));
  margin-right: calc(-1 * var(--notes-surface-pad-x, 56px));
  max-width: none;
}

/* Tables stay INSIDE the surface at its full interior width — not capped to
   the 68ch prose column, not broken out. The wrapper handles horizontal
   scroll if a table is too wide for narrow viewports. */
.note-body--notes > .note-prose-surface > .note-table-scroll,
.note-body--summaries > .note-prose-surface > .note-table-scroll {
  max-width: none;
  margin-inline: 0;
}

/* Explicit font-size + line-height here because the earlier generic
   `.note-body p` rule already sets an explicit clamp (~1.15rem) — without an
   explicit override on this selector, inheritance from .note-body--notes
   would lose. */
.note-body--notes > .note-prose-surface > p,
.note-body--summaries > .note-prose-surface > p {
  /* 1.75em paragraph spacing — each paragraph reads as a discrete thought
     unit with a clear vertical pause between thoughts. With line-height
     1.72 the within-paragraph gap is ~1.72em; the 1.75em between-paragraph
     gap is just enough larger to register the boundary without feeling
     loose. Previous 1.50em was too close to line-height and read as merged. */
  margin-block: 0 1.75em;
  font-size: clamp(1.15625rem, 1.10rem + 0.08vw, 1.1875rem);
  line-height: 1.72;
  color: rgba(236, 242, 252, 0.96);
}

.note-body--notes > .note-prose-surface > h2,
.note-body--summaries > .note-prose-surface > h2 {
  margin-top: 96px;
}

/* H3 — premium section anchor.
   Title and dot live on one flex row; the hairline `::after` is the **last**
   flex child, so it sits to the right of the title and fades into the column
   margin — editorial, not utility. The previous full-width bottom rule read
   as a generic <hr>; this version anchors the rule to the title baseline.
   Resets earlier generic .note-body h3 rules (position: relative + padding-
   left: 18px + absolutely-positioned ::before) so the dot lives in flex flow. */
.note-body--notes > .note-prose-surface > h3,
.note-body--summaries > .note-prose-surface > h3 {
  position: static;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 92px 0 22px;
  padding: 0;
  border-bottom: 0;
  font-size: clamp(1.46rem, 1.21rem + 0.50vw, 1.72rem);
  line-height: 1.26;
  font-weight: 720;
  letter-spacing: -0.022em;
  color: rgba(240, 246, 255, 0.99);
  text-shadow: none;
}

/* `display: block` + `position: static` explicitly override the earlier
   generic `.note-body h3::before { display: none }` and `position: absolute;
   left: 0;` rules in this same file. The dot is a hair quieter than the
   previous pass — integrates with the title instead of competing. */
.note-body--notes > .note-prose-surface > h3::before,
.note-body--summaries > .note-prose-surface > h3::before {
  content: "";
  display: block;
  position: static;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--notes-reader-indigo), 0.78);
  box-shadow: 0 0 0 3px rgba(var(--notes-reader-indigo), 0.07);
  transform: translateY(-0.42em); /* nudge to cap-height */
}

/* Trailing editorial hairline — flex sibling, sits *after* the title and
   fades into the margin. Aligned to the heading baseline (not the bottom of
   the box) so it reads as a typographic ornament under the title type. */
.note-body--notes > .note-prose-surface > h3::after,
.note-body--summaries > .note-prose-surface > h3::after {
  content: "";
  display: block;
  position: static;
  flex: 1 1 0;
  min-width: 40px;
  height: 1px;
  align-self: center;
  transform: translateY(0.34em);
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.22) 0%,
    rgba(148, 163, 184, 0.08) 55%,
    transparent 100%
  );
  pointer-events: none;
}

.note-body--notes > .note-prose-surface > h4,
.note-body--summaries > .note-prose-surface > h4 {
  margin-top: 46px;
}

/* Lead paragraph — section-intro voice as inline editorial emphasis only.
   Still no panel, but visibly distinct from prose: larger type, brighter ink,
   and a hair tighter tracking so the opening sentence after the heading reads
   as a deliberate section-opening voice. */
.note-body--notes > .note-prose-surface > p.note-lead,
.note-body--summaries > .note-prose-surface > p.note-lead {
  margin-top: 2px;
  margin-bottom: 36px;
  font-size: clamp(1.30rem, 1.155rem + 0.42vw, 1.42rem);
  line-height: 1.74;
  letter-spacing: -0.006em;
  color: rgba(241, 246, 254, 0.96);
}

.note-body--notes > .note-prose-surface > p.note-lead > strong,
.note-body--summaries > .note-prose-surface > p.note-lead > strong {
  color: var(--notes-reader-strong);
  font-weight: 680;
}

/* Concept paragraphs — inline emphasis only. NO panel surface, NO border, NO
   background. Spacing and a low-key 88px hairline divider provide the rhythm
   instead. The paragraph itself flows as plain prose. */
.note-body--notes > .note-prose-surface > p.note-concept {
  position: relative;
  /* margin-inline: auto preserves the centering set by the more-general
     `> p` rule so concept paragraphs stay aligned with the prose column. */
  margin: 1.55em auto 1.50em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: clamp(1.15625rem, 1.10rem + 0.08vw, 1.1875rem);
  line-height: 1.72;
  color: rgba(236, 242, 252, 0.96);
}

.note-body--notes > .note-prose-surface > p.note-concept::after {
  content: none;
}

/* Editorial transition: lead → first concept. The transition between section
   opening voice and the term/definition rows gets extra breathing room and a
   short 88px hairline anchor so the eye registers the switch. */
.note-body--notes > .note-prose-surface > p.note-lead + p.note-concept {
  margin-top: 2.10em;
}

.note-body--notes > .note-prose-surface > p.note-lead + p.note-concept::before,
.note-body--notes > .note-prose-surface > p.note-concept + p.note-concept::before {
  content: "";
  position: absolute;
  top: -1.10em;
  left: 0;
  width: 110px;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--notes-reader-divider) 0%,
    rgba(148, 163, 184, 0.12) 55%,
    transparent 100%
  );
}

/* Between two concept rows — slightly more space than the lead→concept jump. */
.note-body--notes > .note-prose-surface > p.note-concept + p.note-concept {
  margin-top: 2.0em;
}

/* Continuation prose after a concept cluster (e.g. the "Because dehydration
   synthesis…" paragraph) — generous breathing room only, no separator line.
   The previous extra hairline here read as scripted decoration on a flowing
   page; spacing carries the transition more naturally. */
.note-body--notes > .note-prose-surface > p.note-concept + p:not(.note-concept):not(.note-lead) {
  margin-top: 1.85em;
}

/* Leading bold term — labelled emphasis in the brand blue (#4f6ff2, same as
   --nv-accent at noteviewer.css:10390 and the h2 left accent rail at :10444).
   Reads as "vocabulary signal" rather than "shouting emphasis": the eye
   recognises it as a term name and keeps moving through the connecting
   prose instead of bouncing between bolds. */
.note-body--notes > .note-prose-surface > p.note-concept > strong:first-child {
  color: rgb(79, 111, 242);
  /* parity: theme-dark.css line 1537 bumps all .note-body strongs to 810;
     mirror that here so light inherits the same width and text doesn't reflow. */
  font-weight: 810;
  letter-spacing: -0.005em;
}

/* Bracketed definition span — secondary voice rendered as a soft inline
   chip: slightly smaller than body, italic, muted, with a barely-there
   inline surface that lets the eye chunk the gloss without reading the
   span as a UI pill. Wraps naturally with the surrounding prose.

   Selector loosened from `> p.note-concept .note-concept-def` to all body
   paragraphs because tag_concept_definitions() now wraps brackets after any
   `<strong>…</strong>` — not only concept paragraphs. Every inline
   definition across every note now reads the same way. */
.note-body--notes .note-concept-def {
  color: var(--notes-reader-soft);
  font-style: italic;
  font-weight: 430;
  font-size: 0.95em;
  letter-spacing: 0;
  text-decoration: none;
  padding: 1px 6px;
  border-radius: 5px;
}

/* General inline strong inside notes prose — vocabulary signal in the brand
   blue (#4f6ff2). Unified with the leading-concept bold above so every bold
   term across every note reads identically as "this is a term name."
   The reader's eye glides through the paragraph instead of jumping between
   bolds; weight 660 holds the term apart from prose without bulking it into
   a headline. */
.note-body--notes > .note-prose-surface > p > strong,
.note-body--summaries > .note-prose-surface > p > strong,
.note-body--notes > .note-prose-surface > ul strong,
.note-body--summaries > .note-prose-surface > ul strong,
.note-body--notes > .note-prose-surface > ol strong,
.note-body--summaries > .note-prose-surface > ol strong {
  color: rgb(79, 111, 242);
  /* parity: matches theme-dark.css line 1537 bump from 760 to 810. */
  font-weight: 810;
  letter-spacing: -0.003em;
}

/* Italic text inside body paragraphs — muted parenthetical / aside voice.
   Scoped to direct-child <p> so italics inside callouts (.callout-body p em)
   stay at their default brightness — those are often the primary content of
   an Examiner Insight / Misconception block and must not recede. The
   global html.theme-dark .note-body em rule (at :10536) keeps em at 0.84
   everywhere else; this rule overrides for body-prose italics only. */
.note-body--notes > .note-prose-surface > p em,
.note-body--summaries > .note-prose-surface > p em {
  color: rgba(220, 228, 240, 0.74);
}

/* Inline chemistry notation — wrapped by wrap_inline_chemistry() in
   rendering.py.  Catches (–H), (–OH), (δ⁻), (δ⁺), and bare subscripted
   formulas like H₂O / CO₂ / C₆H₁₂O₆.  Visual treatment: subtle slate wash
   + tighter tracking + thin padding so the eye registers "notation" without
   shouting "code." Same font as body — chemistry isn't code. */
.note-body--notes .esa-chem {
  display: inline-block;
  padding: 0 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  letter-spacing: -0.005em;
  color: rgba(243, 247, 255, 0.96);
  /* Keep the inline baseline so wrapped tokens flow with surrounding prose. */
  vertical-align: baseline;
  line-height: inherit;
}

/* ── Quick Recap — visual reward for the most important list on the page.
   Larger brand-blue checkmark, generous vertical rhythm between items,
   and slightly heavier item weight than body prose. Scoped to the
   --recap variant only so the Progress Check list keeps its circular-
   tick treatment unchanged. */
.note-body--notes .note-review-section--recap .note-review-list {
  display: block;
  gap: 0;
}

.note-body--notes .note-review-section--recap .note-review-list > li {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 86px;
  margin: 0;
  padding: 22px 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(241, 246, 255, 0.94);
}

.note-body--notes .note-review-section--recap .note-review-list > li + li {
  /* Hairline divider between items — same slate token as the notes-reader
     divider system. Row breathing belongs to the li's balanced padding;
     this selector must not add top-only spacing. */
  border-top: 1px solid var(--notes-reader-divider-soft);
}

.note-body--notes .note-review-section--recap .note-review-list > li > p,
.note-body--notes .note-review-section--recap .note-review-list > li > .note-review-text {
  min-width: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
  color: inherit;
}

.note-body--notes .note-review-section--recap .note-review-list > li::before {
  content: "\2022";
  position: static;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  /* Brand blue checkmark (#4f6ff2) — ties Quick Recap to h2 rails, focus
     mode entry button, and inline bold terms. */
  color: rgb(79, 111, 242);
  font-size: 1.05em;
  font-weight: 800;
  line-height: 1;
}

/* theme-dark.css gives the recap check-bullet a 1px border; carry the box
   size in the shared layer so light's text column starts at the same x.
   Light keeps its borderless look via a transparent border-color. */
body:has(.note-body) .note-review-section--recap .note-review-list > li::before,
body:has(.noteviewer-body) .note-review-section--recap .note-review-list > li::before {
  border-width: 1px;
  border-style: solid;
}

html.theme-light .note-review-section--recap .note-review-list > li::before {
  border-color: transparent;
}

/* Tables / figures / callouts / recap inherit the article's 1000px width
   automatically (they have no max-width of their own) — no per-block override
   needed. A modest top-margin keeps the rhythm consistent. */
.note-body--notes > .note-prose-surface > .note-table-scroll,
.note-body--summaries > .note-prose-surface > .note-table-scroll,
.note-body--notes > .note-prose-surface > .note-figure,
.note-body--summaries > .note-prose-surface > .note-figure {
  margin-top: 40px;
}

/* Editorial features removed (drop cap, section ornament, left spine).
   Three passes were unable to land them cleanly:
     - Drop cap / ornament: visibility could not be confirmed without browser
       DevTools, and on the rendered page they did not appear.
     - Spine: the `left: calc(50% - 33ch)` math placed the vertical line
       inside the prose text (sliced through paragraphs and headings) — the
       single most visually-broken artefact across the work. Math depends on
       computed `ch` and surface padding at the user's viewport, not
       verifiable without DevTools.
   Per the explicit exit-door instruction, these features are dropped
   permanently. The prose now sits directly on the page background with
   only the typography pass (brand-blue bolds, italic mute, paragraph
   rhythm) and the H2 brand-blue accent rail providing structure. Prose
   flows to the full article width (1000px); no internal column cap. */

@media (max-width: 1080px) {
  .note-body--notes,
  .note-body--summaries {
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .note-body--notes,
  .note-body--summaries {
    font-size: 1.075rem;
    line-height: 1.74;
  }

  .note-body--notes > .note-prose-surface > p,
  .note-body--summaries > .note-prose-surface > p {
    font-size: 1.075rem;
    line-height: 1.74;
  }

  .note-body--notes > .note-prose-surface > h2,
  .note-body--summaries > .note-prose-surface > h2 {
    margin-top: 60px;
  }

  .note-body--notes > .note-prose-surface > h3,
  .note-body--summaries > .note-prose-surface > h3 {
    margin: 50px 0 18px;
    padding-bottom: 10px;
    gap: 10px;
    font-size: 1.215rem;
  }

  .note-body--notes > .note-prose-surface > h3::before,
  .note-body--summaries > .note-prose-surface > h3::before {
    width: 6px;
    height: 6px;
  }

  .note-body--notes > .note-prose-surface > p.note-lead,
  .note-body--summaries > .note-prose-surface > p.note-lead {
    margin-bottom: 22px;
    font-size: 1.155rem;
    line-height: 1.72;
  }

  .note-body--notes > .note-prose-surface > p.note-concept {
    margin: 1.4em 0 1.35em;
    font-size: 1.075rem;
    line-height: 1.74;
  }

  .note-body--notes > .note-prose-surface > p.note-lead + p.note-concept,
  .note-body--notes > .note-prose-surface > p.note-concept + p.note-concept {
    margin-top: 1.7em;
  }

  .note-body--notes > .note-prose-surface > p.note-concept + p:not(.note-concept):not(.note-lead) {
    margin-top: 1.7em;
  }

  .note-body--notes > .note-prose-surface > p.note-lead + p.note-concept::before,
  .note-body--notes > .note-prose-surface > p.note-concept + p.note-concept::before,
  .note-body--notes > .note-prose-surface > p.note-concept + p:not(.note-concept):not(.note-lead)::before {
    top: -0.85em;
    width: 56px;
  }
}

/* =========================================================================
   Summaries — tighter rhythm + heading-system alignment
   Summaries inherit the shared notes editorial prose system above, but
   compress vertical pacing and align the h2 treatment with the h3
   signature (dot + trailing fading rule) so the whole page reads as one
   coherent heading system rather than h2-rail + h3-dot mismatch.
   These rules sit AFTER the shared block so they win the cascade for
   `.note-body--summaries` only at the same specificity. Notes selectors
   are untouched.

   Compression targets (vs the shared notes values, in parens):
     · h2 margin-top    : 44px   (vs 96px)
     · h2 margin-bottom : 10px   (vs ~14px inherited)
     · h3 margin-top    : 32px   (vs 92px)
     · h3 margin-bottom : 10px   (vs 22px)
     · p  margin-bottom : 1.20em (vs 1.75em)
     · .note-lead size  : ~1.16rem (vs ~1.38rem)
     · .note-lead margin-bottom: 16px (vs 36px)
     · h4 margin-top    : 24px   (vs 46px)
     · ul/ol margin     : 6px 0 16px
   ========================================================================= */

/* Align the h2 with the h3 signature (dot + trailing fading rule). The
   base notes h2 uses a thin left pill rail + short bottom hairline; on
   summary pages that read as a different system than the h3 below. This
   override gives the h2 the same flex-row dot+rule layout as the
   signature h3, just larger, so the heading hierarchy reads as one
   family (big-dot for h2, small-dot for h3). */
.note-body--summaries > .note-prose-surface > h2 {
  position: static;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 40px 0 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(1.32rem, 1.14rem + 0.40vw, 1.48rem);
  font-weight: 720;
  letter-spacing: -0.022em;
  line-height: 1.24;
  color: rgba(244, 250, 255, 0.99);
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

.note-body--summaries > .note-prose-surface > h2::before {
  content: '';
  display: block;
  position: static;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(var(--notes-reader-indigo), 0.88);
  box-shadow: 0 0 0 3px rgba(var(--notes-reader-indigo), 0.08);
  transform: translateY(-0.30em);
}

/* Trailing rule — slightly finer / shorter taper than the previous pass so
   the line reads as a typographic ornament under the heading rather than a
   strong divider. */
.note-body--summaries > .note-prose-surface > h2::after {
  content: '';
  display: block;
  position: static;
  flex: 1 1 0;
  min-width: 40px;
  height: 1px;
  align-self: center;
  transform: translateY(0.30em);
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.26) 0%,
    rgba(148, 163, 184, 0.08) 45%,
    transparent 85%
  );
  pointer-events: none;
}

/* Opening "Summary" heading — calmer than subsequent section headings.
   Smaller dot, dimmer rule, no extra glow so it reads as a quiet page
   opener rather than a landmark. */
.note-body--summaries > .note-prose-surface > h2:first-child,
.note-body--summaries > .note-prose-surface > .note-table-scroll:first-child + h2 {
  margin-top: 4px;
  font-size: clamp(1.22rem, 1.10rem + 0.30vw, 1.36rem);
}

.note-body--summaries > .note-prose-surface > h2:first-child::before,
.note-body--summaries > .note-prose-surface > .note-table-scroll:first-child + h2::before {
  width: 6px;
  height: 6px;
  background: rgba(var(--notes-reader-indigo), 0.72);
  box-shadow: 0 0 0 3px rgba(var(--notes-reader-indigo), 0.06);
}

.note-body--summaries > .note-prose-surface > h2:first-child::after,
.note-body--summaries > .note-prose-surface > .note-table-scroll:first-child + h2::after {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.20) 0%,
    rgba(148, 163, 184, 0.06) 45%,
    transparent 85%
  );
}

.note-body--summaries > .note-prose-surface > h3 {
  margin: 28px 0 8px;
}

/* h3 trailing rule — match the slightly finer/shorter taper used by h2. */
.note-body--summaries > .note-prose-surface > h3::after {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.24) 0%,
    rgba(148, 163, 184, 0.08) 45%,
    transparent 85%
  );
}

.note-body--summaries > .note-prose-surface > h4 {
  margin-top: 20px;
}

.note-body--summaries > .note-prose-surface > p {
  margin-block: 0 1.10em;
  font-size: clamp(1.06rem, 1.03rem + 0.05vw, 1.105rem);
  line-height: 1.60;
}

/* Lead paragraph — tighter than notes' lecture-opening voice. Smaller,
   calmer; still distinguishes the first paragraph after a heading. */
.note-body--summaries > .note-prose-surface > p.note-lead {
  margin-top: 2px;
  margin-bottom: 14px;
  font-size: clamp(1.09rem, 1.04rem + 0.18vw, 1.17rem);
  line-height: 1.60;
  letter-spacing: -0.004em;
}

/* Bullet lists — tighter list margins and a hair tighter row spacing so
   bullet-heavy summary pages read as a compact list rather than a
   scattered paragraph. */
.note-body--summaries > .note-prose-surface > ul,
.note-body--summaries > .note-prose-surface > ol {
  margin: 4px 0 14px;
}

.note-body--summaries > .note-prose-surface > ul > li,
.note-body--summaries > .note-prose-surface > ol > li {
  margin: 3px 0;
  line-height: 1.58;
}

/* Bullet marker — match the heading family (calm indigo dot, no glow,
   sits at the same hue/temperature as the h2/h3 ::before dots). Inherits
   the base shape (5px round) so wrapping/alignment is unchanged. */
.note-body--summaries > .note-prose-surface > ul > li::before {
  background: rgba(var(--notes-reader-indigo), 0.72);
  box-shadow: none;
  opacity: 1;
}

/* When a heading is immediately followed by a list, tighten the gap so
   the list reads as an extension of the heading rather than a detached
   block. */
.note-body--summaries > .note-prose-surface > h2 + ul,
.note-body--summaries > .note-prose-surface > h2 + ol,
.note-body--summaries > .note-prose-surface > h3 + ul,
.note-body--summaries > .note-prose-surface > h3 + ol,
.note-body--summaries > .note-prose-surface > h4 + ul,
.note-body--summaries > .note-prose-surface > h4 + ol {
  margin-top: 4px;
}

/* When a heading lands first inside the prose surface (no preceding
   block), drop the heavy top margin entirely. */
.note-body--summaries > .note-prose-surface > h2:first-child,
.note-body--summaries > .note-prose-surface > h3:first-child {
  margin-top: 4px;
}

/* When a heading lands right after the hidden Pandoc title table, drop
   the top margin so the page doesn't start with a stretch of empty
   space. (The title table is `display:none` via the earlier rule, but
   it still counts as a sibling for `:first-child` checks.) */
.note-body--summaries > .note-prose-surface > .note-table-scroll:first-child + h2,
.note-body--summaries > .note-prose-surface > .note-table-scroll:first-child + h3 {
  margin-top: 4px;
}

/* Mobile: keep the rhythm tighter still. */
@media (max-width: 520px) {
  .note-body--summaries > .note-prose-surface > h2 {
    margin: 30px 0 8px;
    gap: 12px;
    font-size: 1.22rem;
  }
  .note-body--summaries > .note-prose-surface > h2::before {
    width: 7px;
    height: 7px;
  }
  .note-body--summaries > .note-prose-surface > h3 {
    margin: 24px 0 8px;
  }
  .note-body--summaries > .note-prose-surface > p {
    margin-block: 0 1.10em;
  }
  .note-body--summaries > .note-prose-surface > p.note-lead {
    margin-bottom: 12px;
    font-size: 1.10rem;
    line-height: 1.60;
  }
}

/* Core-reader cleanup — right rail removed; restore note body priority. */
.note-body .nt-objectives-kicker,
.noteviewer-body .nt-objectives-kicker,
.note-body .nt-objectives-card--multi .nt-objectives-kicker,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-kicker {
  display: none;
}

.note-body .nt-objectives-card,
.noteviewer-body .nt-objectives-card,
.note-body .nt-objectives-card--multi,
.noteviewer-body .nt-objectives-card--multi {
  margin: 36px auto 42px;
  padding: 22px 24px;
  border-radius: 22px;
  border-color: rgba(148, 163, 184, 0.16);
  background:
    linear-gradient(180deg, rgba(17, 23, 42, 0.94) 0%, rgba(12, 17, 32, 0.96) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.note-body .nt-objectives-title-row,
.noteviewer-body .nt-objectives-title-row,
.note-body .nt-objectives-card--multi .nt-objectives-title-row,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-title-row {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.note-body .nt-objective-heading,
.noteviewer-body .nt-objective-heading,
.note-body .nt-objectives-card--multi .nt-objective-heading,
.noteviewer-body .nt-objectives-card--multi .nt-objective-heading {
  font-size: clamp(1.28rem, 1.05rem + 0.45vw, 1.48rem);
  font-weight: 760;
  letter-spacing: -0.022em;
  line-height: 1.18;
  color: rgba(250, 251, 255, 0.98);
  -webkit-text-fill-color: rgba(250, 251, 255, 0.98);
}

.note-body .nt-objectives-count,
.noteviewer-body .nt-objectives-count,
.note-body .nt-objectives-card--multi .nt-objectives-count,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-count {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(148, 163, 184, 0.07);
  color: rgba(196, 207, 224, 0.80);
  font-size: 0.72rem;
  font-weight: 640;
}

.note-body .nt-objectives-subtitle,
.noteviewer-body .nt-objectives-subtitle,
.note-body .nt-objectives-card--multi .nt-objectives-subtitle,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-subtitle {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.48;
  color: rgba(203, 213, 225, 0.84);
}

.note-body .nt-objectives-rule,
.noteviewer-body .nt-objectives-rule,
.note-body .nt-objectives-card--multi .nt-objectives-rule,
.noteviewer-body .nt-objectives-card--multi .nt-objectives-rule {
  margin: 16px 0 12px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.04));
}

.note-body .nt-objective-item,
.noteviewer-body .nt-objective-item,
.note-body .nt-objectives-card--multi .nt-objective-item,
.noteviewer-body .nt-objectives-card--multi .nt-objective-item {
  min-height: 50px;
  padding: 11px 14px;
  border-radius: 13px;
  border-color: rgba(148, 163, 184, 0.13);
  background: rgba(15, 23, 42, 0.56);
}

.note-body .nt-objective-copy,
.noteviewer-body .nt-objective-copy,
.note-body .nt-objectives-card--multi .nt-objective-copy,
.noteviewer-body .nt-objectives-card--multi .nt-objective-copy {
  font-size: 0.94rem;
  line-height: 1.48;
  color: rgba(238, 243, 252, 0.95);
}

.note-body .nt-objective-copy .obj-code,
.noteviewer-body .nt-objective-copy .obj-code,
.note-body .nt-objectives-card--multi .nt-objective-copy .obj-code,
.noteviewer-body .nt-objectives-card--multi .nt-objective-copy .obj-code {
  padding: 2px 6px;
  border-radius: 6px;
  border-color: rgba(148, 163, 184, 0.20);
  background: rgba(148, 163, 184, 0.08);
  color: rgba(214, 226, 245, 0.92);
  font-size: 0.78em;
  font-weight: 620;
}

/* =========================================================================
   Notes & Summaries — table column / wrap refinement
   -------------------------------------------------------------------------
   Earlier cascade layers gave multi-col data tables rigid percentage widths
   (col1 25 %, col2 30 %, every col 3+ exactly 22.5 %) with the table at
   width:100 %. On a ~900–1000px reader the tail columns end up ~200 px and
   long phrases (e.g. the "Role" column on the DNA/RNA summary) wrap almost
   word-by-word, producing very tall rows.

   This block keeps the existing visual language but:
     · sets a sensible table min-width so wide tables scroll horizontally
       inside .note-table-scroll instead of being crushed,
     · drops the equal-width clamp on the 3rd+ columns so each cell sizes
       to its content with a reasonable floor,
     · forces phrase-level wrapping (no word stacking) on body cells,
     · tightens cell padding a touch for a more compact study-table feel,
     · shrinks the header letter-spacing slightly so uppercase headers stop
       eating column width.

   Scoped strictly to .note-body--notes and .note-body--summaries — other
   resource types (flashcards, MCQs, questions, indexes) and global site
   tables are untouched. The summary one-column "Key Definition" cards
   (which redeclare display:block on th/td) are unaffected because their
   overrides sit on a more specific selector chain.
   ========================================================================= */

/* Wrapper: no horizontal table scrollbar. Tables must fit the reader column
   and wrap their content inside cells. */
.note-body--notes .note-table-scroll,
.note-body--summaries .note-table-scroll {
  overflow-x: hidden;
}

/* Table: keep every table inside the note column. Fixed layout prevents
   individual columns/content from forcing the table wider than its wrapper. */
.note-body--notes .note-table-scroll > table,
.note-body--summaries .note-table-scroll > table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
}

/* Cells: wrap content rather than creating horizontal overflow. */
.note-body--notes .note-table-scroll > table th,
.note-body--notes .note-table-scroll > table td,
.note-body--summaries .note-table-scroll > table th,
.note-body--summaries .note-table-scroll > table td {
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* No column is allowed to reserve fixed horizontal width. */
.note-body--notes .note-table-scroll > table th:nth-child(n+2),
.note-body--notes .note-table-scroll > table td:nth-child(n+2),
.note-body--summaries .note-table-scroll > table th:nth-child(n+2),
.note-body--summaries .note-table-scroll > table td:nth-child(n+2),
.note-body--notes .note-table-scroll > table th:nth-child(n+3),
.note-body--notes .note-table-scroll > table td:nth-child(n+3),
.note-body--summaries .note-table-scroll > table th:nth-child(n+3),
.note-body--summaries .note-table-scroll > table td:nth-child(n+3),
.note-body--notes .note-table-scroll > table th:first-child,
.note-body--notes .note-table-scroll > table td:first-child,
.note-body--summaries .note-table-scroll > table th:first-child,
.note-body--summaries .note-table-scroll > table td:first-child {
  width: auto;
  min-width: 0;
  white-space: normal;
}

/* Header row: trim padding and letter-spacing so uppercase headers can wrap
   cleanly in narrow columns. */
.note-body--notes .note-table-scroll > table th,
.note-body--summaries .note-table-scroll > table th {
  padding: 11px 12px;
  letter-spacing: 0.035em;
  line-height: 1.3;
}

/* Body cells: compact padding leaves more room for wrapped content. */
.note-body--notes .note-table-scroll > table td,
.note-body--summaries .note-table-scroll > table td {
  padding: 11px 12px;
  line-height: 1.55;
}

@media (max-width: 520px) {
  .note-body--notes .note-table-scroll,
  .note-body--summaries .note-table-scroll {
    overflow-x: hidden;
    border-radius: 14px;
    background: transparent;
  }

  .note-body--notes .note-table-scroll > table,
  .note-body--summaries .note-table-scroll > table,
  .note-body--notes .note-table-scroll > table thead,
  .note-body--summaries .note-table-scroll > table thead,
  .note-body--notes .note-table-scroll > table tbody,
  .note-body--summaries .note-table-scroll > table tbody,
  .note-body--notes .note-table-scroll > table tr,
  .note-body--summaries .note-table-scroll > table tr,
  .note-body--notes .note-table-scroll > table th,
  .note-body--notes .note-table-scroll > table td,
  .note-body--summaries .note-table-scroll > table th,
  .note-body--summaries .note-table-scroll > table td {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .note-body--notes .note-table-scroll > table thead,
  .note-body--summaries .note-table-scroll > table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .note-body--notes .note-table-scroll > table tr,
  .note-body--summaries .note-table-scroll > table tr {
    margin: 0 0 12px;
    border: 1px solid rgba(91, 140, 255, 0.24);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(7, 10, 16, 0.92);
  }

  .note-body--notes .note-table-scroll > table tr:last-child,
  .note-body--summaries .note-table-scroll > table tr:last-child {
    margin-bottom: 0;
  }

  .note-body--notes .note-table-scroll > table td,
  .note-body--summaries .note-table-scroll > table td {
    display: grid;
    grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    font-size: 0.9375rem;
    line-height: 1.45;
    letter-spacing: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    overflow-wrap: anywhere;
  }

  .note-body--notes .note-table-scroll > table td:last-child,
  .note-body--summaries .note-table-scroll > table td:last-child {
    border-bottom: 0;
  }

  .note-body--notes .note-table-scroll > table td::before,
  .note-body--summaries .note-table-scroll > table td::before {
    content: attr(data-label);
    min-width: 0;
    color: rgba(169, 190, 255, 0.92);
    font-size: 0.72rem;
    line-height: 1.25;
    font-weight: 780;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .note-body--notes .note-table-scroll > table td:not([data-label])::before,
  .note-body--summaries .note-table-scroll > table td:not([data-label])::before {
    content: none;
  }
}


/* ── Mobile audit fixes: unavailable video + fixed bottom control clearance ── */
.video-unavailable-card {
  width: min(100%, 680px);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 40px);
  text-align: center;
  border: 1px solid var(--nv-border);
  border-radius: 24px;
  background: var(--nv-surface);
  box-shadow: var(--nv-shadow-soft);
}

.video-unavailable-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 999px;
  color: var(--text-link); /* PT-12 */
  background: rgba(197, 160, 40, 0.12);
  border: 1px solid rgba(197, 160, 40, 0.24);
}

.video-unavailable-card h2 {
  margin: 0 0 10px;
  color: var(--nv-text);
  font-size: clamp(1.35rem, 4vw, 2rem);
}

.video-unavailable-card p {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--nv-muted);
  line-height: 1.7;
}

.video-unavailable-actions .note-resource-back-btn {
  min-height: 44px;
  justify-content: center;
}

.note-resource-back-btn--secondary {
  background: transparent;
}

@media (max-width: 820px) {
  .noteviewer-main-inner:has(.noteviewer-body--flashcards) {
    padding-bottom: calc(168px + env(safe-area-inset-bottom)) !important;
  }

  .noteviewer-body--flashcards {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .flashcard-viewer {
    margin-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 820px) and (max-height: 480px) {
  .noteviewer-main-inner:has(.noteviewer-body--flashcards) {
    padding-bottom: calc(184px + env(safe-area-inset-bottom)) !important;
  }
}

/* Author-set red math (R2 content; inline color:rgb(204,0,0)/#cc0000 from KaTeX) is
   too dark on the dark canvas (3.27:1). No repo token exists, so lighten every such
   inline red-math token in dark mode generally (not just one formula). */
html.theme-dark .note-body .katex [style*="204, 0, 0"],
html.theme-dark .note-body .katex [style*="#cc0000"] { color: #ff8585 !important; }

/* === Progress-check checkboxes: motion.dev-style SVG tick (JS-injected) ======
   note-reading.js injects an inline <svg> per progress <li> and adds
   .has-svg-checks to the <ul>, suppressing the legacy ::before box + ::after
   tick below (no-JS keeps the pseudo-element checkbox). The tick draws in via
   Motion strokeDashoffset; CSS owns the resting/restored state (instant) using
   --esa-tick-len (set per path from getTotalLength). Theme colours live in
   theme-dark.css / theme-light.css; this is the shared structure + green base. */
.note-review-section--progress .note-review-list.has-svg-checks > li::before,
.note-review-section--progress .note-review-list.has-svg-checks > li.is-checked::after {
  content: none !important;
}
.note-review-section--progress .note-review-list.has-svg-checks > li > .esa-check {
  /* In-flow grid item: fills the box column (grid-template-columns 20px ...) the
     legacy ::before used to occupy, so removing ::before doesn't collapse text. */
  width: 18px;
  height: 18px;
  align-self: start;
  margin-top: 0.18em;
  overflow: visible;
  pointer-events: none;
  transform-origin: center;
  transition: transform 0.12s ease; /* press feedback; only fires on :active, never on load */
}
.note-review-section--progress .note-review-list > li:active > .esa-check {
  transform: scale(0.9);
}
.esa-check-g {
  transform-box: fill-box;
  transform-origin: center;
}
.esa-check-box {
  fill: transparent;
  stroke: var(--accent-border, rgba(169,190,255,0.28));
  stroke-width: 1.7;
}
.note-review-section--progress .note-review-list.has-svg-checks.anim-ready > li > .esa-check .esa-check-box {
  transition: stroke 0.18s ease, fill 0.18s ease;
}
.note-review-section--progress .note-review-list > li:hover .esa-check-box {
  stroke: #22c55e;
  fill: rgba(34,197,94,0.06);
}
.note-review-section--progress .note-review-list > li.is-checked .esa-check-box {
  stroke: #22c55e;
  fill: rgba(34,197,94,0.10);
}
.esa-check-tick {
  fill: none;
  stroke: #22c55e;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--esa-tick-len, 16);
  stroke-dashoffset: var(--esa-tick-len, 16); /* hidden when unchecked */
}
.note-review-section--progress .note-review-list > li.is-checked .esa-check-tick {
  stroke-dashoffset: 0; /* drawn (instant on restore; the draw-in transition only fires after .anim-ready) */
}
.note-review-section--progress .note-review-list.has-svg-checks.anim-ready > li > .esa-check .esa-check-tick {
  transition: stroke-dashoffset 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
/* One-shot box pop on a fresh check (JS adds .is-popping only on interaction,
   so a restored check never replays it). */
@keyframes esa-check-pop {
  0% { transform: scale(0.55); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.esa-check-g.is-popping {
  animation: esa-check-pop 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .note-review-section--progress .note-review-list > li > .esa-check,
  .note-review-section--progress .note-review-list .esa-check-tick,
  .note-review-section--progress .note-review-list .esa-check-box { transition: none !important; }
  .note-review-section--progress .note-review-list > li:active > .esa-check { transform: none; }
  .esa-check-g.is-popping { animation: none !important; }
}