/* ===========================================================================
   Notes & Summaries — exam-paper reading skin  (.notes-shell)
   ---------------------------------------------------------------------------
   Page-scoped: loaded only by resource_detail.html (notes + summaries), and
   scoped under .notes-shell (added to .nv-canvas) so NOTHING leaks to the MCQ /
   Topic-Questions / index pages that share .nv-canvas, .noteviewer-main(-inner),
   .fc-page-header, .note-pagination, etc.

   Mirrors grader.css (.tq-shell) / mcq.css (.mcq-list): dark is the canonical
   base; light is colour-only via tokens + html.theme-light overrides. Royal
   blue is the only accent; teal = key/recap, amber = caution. It RE-SKINS the
   real classes the markdown pipeline (noteviewer/rendering.py) already emits —
   it does NOT change markup. Loads AFTER noteviewer.css/theme-*.css (base.html
   block head renders last), so equal-specificity rules win by source order; the
   colour rules are html.theme-* qualified to beat the per-theme sheets.
   Contracts kept: #nt-top-progress-fill, .note-body, .note-focus-toggle/-exit +
   html.note-focus-mode cascade, .note-resource-back-btn (no --chapter on notes).
   =========================================================================== */

/* ── Tokens: dark (canonical) ─────────────────────────────────────────────*/
.notes-shell {
  --ng-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --ng-ink:        #eef4ff;
  --ng-ink-2:      rgba(232, 238, 255, 0.92);
  --ng-body:       rgba(214, 223, 242, 0.86);
  --ng-muted:      rgba(220, 226, 245, 0.66);
  --ng-faint:      rgba(220, 226, 245, 0.42);

  --ng-accent:        #5b8cff;
  --ng-accent-text:   #84b6ff;
  --ng-accent-soft:   rgba(91, 140, 255, 0.16);
  --ng-accent-border: rgba(169, 190, 255, 0.28);

  --ng-teal:        #34d399;
  --ng-teal-text:   #9ff5e9;
  --ng-teal-bg:     rgba(45, 212, 191, 0.10);
  --ng-teal-border: rgba(45, 212, 191, 0.28);

  --ng-amber:        #fbbf24;
  --ng-amber-text:   #fcd34d;
  --ng-amber-bg:     rgba(251, 191, 36, 0.10);
  --ng-amber-border: rgba(251, 191, 36, 0.30);

  --ng-line:      rgba(255, 255, 255, 0.11);
  --ng-line-soft: rgba(255, 255, 255, 0.07);
  --ng-card-bg:   linear-gradient(180deg, rgba(18, 22, 36, 0.62) 0%, rgba(11, 15, 26, 0.92) 100%);
  --ng-card-border: rgba(255, 255, 255, 0.09);
  --ng-sub-bg:    rgba(255, 255, 255, 0.03);

  --ng-shadow:   0 18px 48px -14px rgba(0, 0, 0, 0.60), 0 2px 8px rgba(0, 0, 0, 0.32);
  --ng-edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --ng-panel-glow:
    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%);

  --ng-r-card: 18px; --ng-r-md: 12px;
  --ng-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ng-dur: 0.26s; --ng-dur-fast: 0.14s;
}

/* ── Tokens: light (colour-only) ──────────────────────────────────────────*/
html.theme-light .notes-shell {
  --ng-ink:        #0f172a;
  --ng-ink-2:      #1f2940;
  --ng-body:       #36425a;
  --ng-muted:      #5D6878;
  --ng-faint:      #8a94a6;

  --ng-accent:        #3b52d0;
  --ng-accent-text:   #3b52d0;
  --ng-accent-soft:   rgba(59, 82, 208, 0.09);
  --ng-accent-border: rgba(59, 82, 208, 0.26);

  --ng-teal:        #0B8F83;
  --ng-teal-text:   #0B756E;
  --ng-teal-bg:     rgba(11, 143, 131, 0.09);
  --ng-teal-border: rgba(11, 117, 110, 0.24);

  --ng-amber:        #B45309;
  --ng-amber-text:   #B45309;
  --ng-amber-bg:     #FEF6E0;
  --ng-amber-border: #FBD888;

  --ng-line:      rgba(21, 26, 45, 0.12);
  --ng-line-soft: rgba(21, 26, 45, 0.07);
  --ng-card-bg:   #ffffff;
  --ng-card-border: rgba(15, 23, 42, 0.08);
  --ng-sub-bg:    #f3f6fc;

  --ng-shadow:   0 1px 2px rgba(15, 23, 42, 0.05), 0 14px 34px -10px rgba(15, 23, 42, 0.16);
  --ng-edge-top: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ng-panel-glow:
    radial-gradient(1000px 440px at 84% -12%, rgba(59, 82, 208, 0.07), transparent 60%),
    radial-gradient(720px 360px at -4% -6%, rgba(11, 143, 131, 0.05), transparent 58%);
}

/* ══════════════════════════════════════════════════════════════════════════
   Reading lane — content on the page under a soft top glow, no card frame.
   Neutralise the shared crown/lane chrome from noteviewer.css + theme-*.css.
   ══════════════════════════════════════════════════════════════════════════ */
.notes-shell .noteviewer-main { position: relative; }
.notes-shell .noteviewer-main::before { background: var(--ng-panel-glow) !important; opacity: 1 !important; }
.notes-shell .noteviewer-main::after { content: none !important; }

html.theme-dark .notes-shell .noteviewer-main-inner,
html.theme-light .notes-shell .noteviewer-main-inner {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.notes-shell .noteviewer-main-inner::before { content: none !important; }
.notes-shell .noteviewer-main-inner { padding: clamp(18px, 3vw, 38px) clamp(16px, 4vw, 52px) 110px; }

/* ── Top reading-progress bar (honest scroll position) ────────────────────*/
html.theme-dark .notes-shell .nt-top-progress-fill,
html.theme-light .notes-shell .nt-top-progress-fill {
  background: linear-gradient(90deg, var(--ng-accent), var(--ng-teal)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Header — centred title, faint breadcrumb, ghost control row
   ══════════════════════════════════════════════════════════════════════════ */
.notes-shell .fc-page-header { margin-bottom: clamp(20px, 2.6vw, 30px); }

html.theme-dark .notes-shell .note-breadcrumbs,
html.theme-light .notes-shell .note-breadcrumbs,
html.theme-dark .notes-shell .note-breadcrumbs a,
html.theme-light .notes-shell .note-breadcrumbs a,
html.theme-dark .notes-shell .note-breadcrumbs .breadcrumb-sep,
html.theme-light .notes-shell .note-breadcrumbs .breadcrumb-sep {
  color: var(--ng-faint) !important;
}
html.theme-dark .notes-shell .note-breadcrumbs a:hover,
html.theme-light .notes-shell .note-breadcrumbs a:hover { color: var(--ng-accent-text) !important; }

html.theme-dark .notes-shell .fc-page-h1,
html.theme-light .notes-shell .fc-page-h1 {
  color: var(--ng-ink) !important;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* control row → matches the demo's ghost buttons (Back left, Focus right) */
html.theme-dark .notes-shell .note-resource-back-btn,
html.theme-light .notes-shell .note-resource-back-btn,
html.theme-dark .notes-shell .note-focus-toggle,
html.theme-light .notes-shell .note-focus-toggle {
  border: 1px solid var(--ng-line) !important;
  background: var(--ng-sub-bg) !important;
  color: var(--ng-ink-2) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 600;
  transition: border-color var(--ng-dur-fast) var(--ng-ease), color var(--ng-dur-fast) var(--ng-ease), background var(--ng-dur-fast) var(--ng-ease);
}
html.theme-dark .notes-shell .note-resource-back-btn:hover,
html.theme-light .notes-shell .note-resource-back-btn:hover,
html.theme-dark .notes-shell .note-focus-toggle:hover,
html.theme-light .notes-shell .note-focus-toggle:hover {
  border-color: var(--ng-accent-border) !important;
  color: var(--ng-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   The paper — serif reading column
   ══════════════════════════════════════════════════════════════════════════ */
.notes-shell .note-body { max-width: 720px; margin-inline: auto; }
.notes-shell .note-prose-surface { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

html.theme-dark .notes-shell .note-body,
html.theme-light .notes-shell .note-body,
html.theme-dark .notes-shell .note-body p,
html.theme-light .notes-shell .note-body p {
  font-family: var(--ng-serif);
  color: var(--ng-body) !important;
}
.notes-shell .note-body p { font-size: 1.075rem; line-height: 1.72; margin: 1em 0 0; text-wrap: pretty; }
.notes-shell .note-body > :first-child,
.notes-shell .note-prose-surface > :first-child { margin-top: 0; }

/* lead paragraph — the opener after a heading */
html.theme-dark .notes-shell .note-body p.note-lead,
html.theme-light .notes-shell .note-body p.note-lead { color: var(--ng-ink-2) !important; }
.notes-shell .note-body p.note-lead { font-size: 1.16rem; line-height: 1.66; }

/* emphasis + links */
html.theme-dark .notes-shell .note-body strong,
html.theme-light .notes-shell .note-body strong { color: var(--ng-ink) !important; font-weight: 700; }
html.theme-dark .notes-shell .note-body em,
html.theme-light .notes-shell .note-body em { color: var(--ng-ink-2) !important; font-style: italic; }
html.theme-dark .notes-shell .note-body a,
html.theme-light .notes-shell .note-body a { color: var(--ng-accent-text) !important; text-underline-offset: 3px; text-decoration-color: var(--ng-accent-border); }
html.theme-dark .notes-shell .note-body a:hover,
html.theme-light .notes-shell .note-body a:hover { color: var(--ng-accent) !important; }

/* ── Headings: h2 starts a ruled section, h3 a sub-head, h4 a small label ──*/
html.theme-dark .notes-shell .note-body h2,
html.theme-light .notes-shell .note-body h2 {
  font-family: var(--ng-serif) !important;
  color: var(--ng-ink) !important;
  font-weight: 600 !important;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: clamp(30px, 3.6vw, 44px) 0 0 !important;
  padding: clamp(22px, 2.6vw, 28px) 0 0 !important;
  border-top: 1px solid var(--ng-line) !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-wrap: balance;
}
.notes-shell .note-body h2::before,
.notes-shell .note-body h2::after { content: none !important; }
/* The article's first heading repeats the page-header title verbatim
   ("1.1: Characteristics of Living Organisms" ≈ the header). Hide it so the
   page shows ONE title. Kept in the DOM (display:none) so note-reading.js can
   still build the section nav from it. The next visible block (the LEARNING
   OBJECTIVES h3) loses its top rule below. */
/* theme-prefixed so this out-specifies the `.note-body h2 { display:block !important }`
   visibility rule further down (both !important → specificity decides). */
html.theme-dark .notes-shell .note-body > h1:first-child, html.theme-light .notes-shell .note-body > h1:first-child,
html.theme-dark .notes-shell .note-body > h2:first-child, html.theme-light .notes-shell .note-body > h2:first-child,
html.theme-dark .notes-shell .note-prose-surface > h1:first-child, html.theme-light .notes-shell .note-prose-surface > h1:first-child,
html.theme-dark .notes-shell .note-prose-surface > h2:first-child, html.theme-light .notes-shell .note-prose-surface > h2:first-child,
html.theme-dark .notes-shell .note-body--notes > h1:first-child, html.theme-light .notes-shell .note-body--notes > h1:first-child,
html.theme-dark .notes-shell .note-body--notes > h2:first-child, html.theme-light .notes-shell .note-body--notes > h2:first-child { display: none !important; }
/* first VISIBLE heading: drop the section top-rule so it doesn't float on a line */
.notes-shell .note-prose-surface > h2:first-child + h3,
.notes-shell .note-body--notes > h2:first-child + h3 { margin-top: 4px !important; }

html.theme-dark .notes-shell .note-body h3,
html.theme-light .notes-shell .note-body h3 {
  font-family: var(--ng-serif) !important;
  color: var(--ng-ink) !important;
  font-weight: 600 !important;
  font-size: 1.24rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-shadow: none !important;
}
.notes-shell .note-body h3::before { content: none !important; }

html.theme-dark .notes-shell .note-body h4,
html.theme-light .notes-shell .note-body h4 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  color: var(--ng-faint) !important;
  font-weight: 800 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ── Lists ────────────────────────────────────────────────────────────────*/
.notes-shell .note-body ul { list-style: none; margin: 12px 0 0; padding: 0; }
.notes-shell .note-body ul > li { position: relative; padding-left: 19px; margin: 6px 0 0; }
/* the LEARNING-OBJECTIVES list is a gapped grid (ul.nt-objective-list); zero
   its item margins so the grid gap alone sets an even, tight rhythm instead of
   gap + inherited li margins stacking into a big space. */
.notes-shell .note-body ul.nt-objective-list { gap: 9px !important; }
.notes-shell .note-body ul.nt-objective-list > li { margin: 0 !important; }
.notes-shell .note-body ul > li::before {
  content: "" !important;
  position: absolute; left: 2px; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ng-accent) !important;
  border: 0 !important;
}
.notes-shell .note-body ol { margin: 12px 0 0; padding-left: 1.3em; }
.notes-shell .note-body ol > li { margin-top: 6px; padding-left: 4px; }
/* Note authors often wrap each list item's text in a <p>. Its default block
   margins drop the text below the bullet and balloon the gaps between items —
   flatten them so the dot sits on the first line and items sit tight. */
.notes-shell .note-body li > p { margin: 0 !important; }
.notes-shell .note-body li > p + p { margin-top: 0.5em !important; }
html.theme-dark .notes-shell .note-body ol > li::marker,
html.theme-light .notes-shell .note-body ol > li::marker { color: var(--ng-accent-text); font-variant-numeric: tabular-nums; }

html.theme-dark .notes-shell .note-body hr,
html.theme-light .notes-shell .note-body hr { border: 0 !important; height: 1px !important; background: var(--ng-line) !important; margin: clamp(22px, 2.6vw, 30px) 0 !important; }

/* ── Inline definitions / key terms / chemistry ───────────────────────────*/
html.theme-dark .notes-shell .note-concept-def,
html.theme-light .notes-shell .note-concept-def { color: var(--ng-accent-text) !important; font-weight: 600; }
html.theme-dark .notes-shell .note-body p.note-concept,
html.theme-light .notes-shell .note-body p.note-concept { color: var(--ng-body) !important; }
html.theme-dark .notes-shell .note-body p.note-concept > strong:first-child,
html.theme-light .notes-shell .note-body p.note-concept > strong:first-child { color: var(--ng-accent-text) !important; }
html.theme-dark .notes-shell .esa-chem,
html.theme-light .notes-shell .esa-chem { color: var(--ng-ink) !important; font-variant-numeric: normal; }

/* ══════════════════════════════════════════════════════════════════════════
   Learning objectives — plain points (user request: no ticks, no checkboxes)
   ══════════════════════════════════════════════════════════════════════════ */
html.theme-dark .notes-shell .nt-objectives-card,
html.theme-light .notes-shell .nt-objectives-card {
  background: var(--ng-sub-bg) !important;
  border: 1px solid var(--ng-line) !important;
  border-radius: var(--ng-r-card) !important;
  box-shadow: none !important;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px) !important;
  margin: 0 0 6px !important;
}
.notes-shell .nt-objectives-card::before,
.notes-shell .nt-objectives-card::after { content: none !important; }
.notes-shell .nt-objectives-shell { display: block !important; grid-template-columns: none !important; }
.notes-shell .nt-objectives-icon-column { display: none !important; }
.notes-shell .nt-objectives-main::before { content: none !important; }
.notes-shell .nt-objectives-rule { display: none !important; }
.notes-shell .nt-objectives-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* Scoped with .note-body so it out-specifies the generic `.note-body h3` rule
   (0,3,2), which was forcing a 26px section top-margin + 1.24rem size onto this
   <h3> kicker — that was the "big gap at the top" of the card. */
html.theme-dark .notes-shell .note-body .nt-objective-heading,
html.theme-light .notes-shell .note-body .nt-objective-heading {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.09em !important;
  text-transform: uppercase !important; color: var(--ng-faint) !important;
  line-height: 1.2 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; text-shadow: none !important;
}
.notes-shell .nt-objectives-count { display: none !important; }
.notes-shell .nt-objectives-subtitle { display: none !important; }

.notes-shell .nt-objective-list { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.notes-shell .nt-objective-item {
  display: block !important; position: relative !important;
  padding: 0 0 0 22px !important; margin: 0 !important; border: 0 !important; background: none !important;
  /* the old tick-gutter layout forced min-height:50px; the gutter is hidden now,
     so collapse to content height and let the grid gap own the rhythm */
  min-height: 0 !important;
}
.notes-shell .nt-objective-item::before {
  content: "" !important; position: absolute; left: 4px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ng-accent) !important;
}
/* hide the tick/number/status gutter machinery — plain points only */
.notes-shell .nt-objective-gutter,
.notes-shell .nt-objective-check,
.notes-shell .nt-objective-status,
.notes-shell .nt-objective-status-icon,
.notes-shell .nt-objective-dash { display: none !important; }
.notes-shell .nt-objective-copy { display: block !important; padding: 0 !important; }
html.theme-dark .notes-shell .nt-objective-text,
html.theme-light .notes-shell .nt-objective-text {
  font-family: var(--ng-serif) !important; font-size: 1.02rem; line-height: 1.5; color: var(--ng-body) !important;
}
html.theme-dark .notes-shell .nt-objective-text strong,
html.theme-light .notes-shell .nt-objective-text strong { color: var(--ng-ink) !important; }
html.theme-dark .notes-shell .obj-code,
html.theme-light .notes-shell .obj-code { color: var(--ng-accent-text) !important; font-family: -apple-system, system-ui, sans-serif !important; font-weight: 700; font-size: 0.82em; margin-right: 6px; }

/* ══════════════════════════════════════════════════════════════════════════
   Callouts — tinted hairline panels (misconception=amber, exam-tip=blue,
   insight=teal, key-idea=teal, example/out-of-scope=neutral). No side stripes.
   ══════════════════════════════════════════════════════════════════════════ */
html.theme-dark .notes-shell .note-callout,
html.theme-light .notes-shell .note-callout {
  display: block !important;
  margin: 22px 0 0 !important;
  padding: 15px 18px !important;
  border: 1px solid var(--ng-line) !important;
  border-radius: var(--ng-r-md) !important;
  background: var(--ng-sub-bg) !important;
  box-shadow: none !important;
  font-family: var(--ng-serif) !important;
  color: var(--ng-ink-2) !important;
}
.notes-shell .note-callout::before { content: none !important; }
.notes-shell .note-callout > strong,
.notes-shell .note-callout > strong:first-child {
  display: flex !important; align-items: center; gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.09em !important;
  text-transform: uppercase !important; margin: 0 0 7px !important;
}
/* Restore the per-type icon the label used to carry (was a glowing badge in
   the old skin; here it's a small inline emoji that suits the exam-paper look).
   On the label row so it inherits the type colour and sits beside the title. */
.notes-shell .note-callout > strong::before {
  font-size: 0.98rem; line-height: 1; letter-spacing: 0;
  text-transform: none; flex: 0 0 auto;
}
.notes-shell .note-callout--misconception > strong::before { content: "⚠️"; }
.notes-shell .note-callout--exam-tip > strong::before { content: "💡"; }
.notes-shell .note-callout--insight > strong::before { content: "🔎"; }
.notes-shell .note-callout--key-idea > strong::before,
.notes-shell .note-key-idea > strong::before { content: "🔑"; }
.notes-shell .note-callout--example > strong::before { content: "✏️"; }
.notes-shell .note-callout--out-of-scope > strong::before { content: "⛔"; }
html.theme-dark .notes-shell .note-callout > span,
html.theme-light .notes-shell .note-callout > span { color: var(--ng-ink-2) !important; font-size: 1.04rem; line-height: 1.6; }

html.theme-dark .notes-shell .note-callout--misconception,
html.theme-light .notes-shell .note-callout--misconception { background: var(--ng-amber-bg) !important; border-color: var(--ng-amber-border) !important; }
.notes-shell .note-callout--misconception > strong { color: var(--ng-amber-text) !important; }

html.theme-dark .notes-shell .note-callout--exam-tip,
html.theme-light .notes-shell .note-callout--exam-tip { background: var(--ng-accent-soft) !important; border-color: var(--ng-accent-border) !important; }
.notes-shell .note-callout--exam-tip > strong { color: var(--ng-accent-text) !important; }

html.theme-dark .notes-shell .note-callout--insight,
html.theme-light .notes-shell .note-callout--insight,
html.theme-dark .notes-shell .note-callout--key-idea,
html.theme-light .notes-shell .note-callout--key-idea,
html.theme-dark .notes-shell .note-key-idea,
html.theme-light .notes-shell .note-key-idea { background: var(--ng-teal-bg) !important; border-color: var(--ng-teal-border) !important; }
.notes-shell .note-callout--insight > strong,
.notes-shell .note-callout--key-idea > strong,
.notes-shell .note-key-idea > strong { color: var(--ng-teal-text) !important; }

/* ── Unified box geometry — every callout / card / panel reads as ONE component:
   same full-column width, same 14px corner radius, same inner padding (user
   request: "all boxes the same length"). The +.note-body in each selector lifts
   specificity above the per-component width/radius/padding rules so this wins
   regardless of source order; border-left:1px drops the legacy accent bars so
   every box has a uniform 1px frame. ──────────────────────────────────────── */
html.theme-dark .notes-shell .note-body .note-callout,
html.theme-light .notes-shell .note-body .note-callout,
html.theme-dark .notes-shell .note-body .note-key-idea,
html.theme-light .notes-shell .note-body .note-key-idea,
html.theme-dark .notes-shell .note-body .nt-objectives-card,
html.theme-light .notes-shell .note-body .nt-objectives-card,
html.theme-dark .notes-shell .note-body .note-review-panel,
html.theme-light .notes-shell .note-body .note-review-panel,
html.theme-dark .notes-shell .note-body .note-key-definition,
html.theme-light .notes-shell .note-body .note-key-definition,
html.theme-dark .notes-shell .note-body .note-chapter-cta,
html.theme-light .notes-shell .note-body .note-chapter-cta {
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  border-left-width: 1px !important;
  padding: clamp(16px, 2vw, 20px) clamp(18px, 2.2vw, 22px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Figures — framed only when there's a real image; graceful when empty/broken
   ══════════════════════════════════════════════════════════════════════════ */
html.theme-dark .notes-shell .note-figure,
html.theme-light .notes-shell .note-figure {
  margin: 24px 0 0 !important;
  border: 1px solid var(--ng-line) !important;
  border-radius: var(--ng-r-card) !important;
  background: var(--ng-card-bg) !important;
  box-shadow: var(--ng-edge-top) !important;
  padding: 16px !important;
  overflow: hidden;
}
.notes-shell .note-figure-img-area { background: none !important; }
.notes-shell .note-figure img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 8px; }
/* image stripped to empty src (real broken-image artifact): collapse entirely,
   don't draw an empty framed box. [src]:not([src=""]) = a real, non-empty src. */
.notes-shell .note-figure:not(:has(img[src]:not([src=""]))) { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.notes-shell .note-figure:not(:has(img[src]:not([src=""]))) .note-figure-img-area { display: none !important; }
html.theme-dark .notes-shell .note-figure-caption,
html.theme-light .notes-shell .note-figure-caption { color: var(--ng-muted) !important; font-family: -apple-system, system-ui, sans-serif !important; font-size: 0.82rem; text-align: center; margin-top: 12px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Tables — exam-paper hairline table inside the scroll shell
   ══════════════════════════════════════════════════════════════════════════ */
html.theme-dark .notes-shell .note-table-scroll,
html.theme-light .notes-shell .note-table-scroll {
  margin: 22px 0 0 !important;
  border: 1px solid var(--ng-line) !important;
  border-radius: var(--ng-r-md) !important;
  background: none !important;
  box-shadow: none !important;
}
.notes-shell .note-table-scroll::before { content: none !important; }
.notes-shell .note-table-scroll table { width: 100%; border-collapse: collapse; font-family: var(--ng-serif); }
html.theme-dark .notes-shell .note-table-scroll th,
html.theme-light .notes-shell .note-table-scroll th {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 0.7rem !important; font-weight: 800 !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; text-align: left !important;
  color: var(--ng-faint) !important; background: var(--ng-sub-bg) !important;
  border-bottom: 1px solid var(--ng-line) !important; padding: 11px 15px !important;
}
html.theme-dark .notes-shell .note-table-scroll td,
html.theme-light .notes-shell .note-table-scroll td {
  color: var(--ng-body) !important; background: none !important;
  border-bottom: 1px solid var(--ng-line-soft) !important; padding: 11px 15px !important; vertical-align: top;
}
.notes-shell .note-table-scroll tbody tr:last-child td { border-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Recap / Progress-check review sections — ruled panels (keep checkbox JS)
   ══════════════════════════════════════════════════════════════════════════ */
html.theme-dark .notes-shell .note-review-section,
html.theme-light .notes-shell .note-review-section {
  margin: clamp(28px, 3.4vw, 40px) 0 0 !important;
  padding: clamp(20px, 2.6vw, 28px) 0 0 !important;
  border-top: 1px solid var(--ng-line) !important;
  background: none !important;
}
html.theme-dark .notes-shell .note-review-heading,
html.theme-light .notes-shell .note-review-heading {
  font-family: -apple-system, system-ui, sans-serif !important;
  font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.09em !important;
  text-transform: uppercase !important; color: var(--ng-faint) !important;
  margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; text-shadow: none !important;
}
html.theme-dark .notes-shell .note-review-panel,
html.theme-light .notes-shell .note-review-panel {
  background: var(--ng-sub-bg) !important; border: 1px solid var(--ng-line) !important;
  border-radius: var(--ng-r-card) !important; box-shadow: none !important; padding: clamp(16px, 2vw, 20px) !important;
}
html.theme-dark .notes-shell .note-review-kicker,
html.theme-light .notes-shell .note-review-kicker { color: var(--ng-muted) !important; font-family: -apple-system, system-ui, sans-serif !important; }
.notes-shell .note-review-section--recap .note-review-panel { border-color: var(--ng-teal-border) !important; background: var(--ng-teal-bg) !important; }
html.theme-dark .notes-shell .note-review-list,
html.theme-light .notes-shell .note-review-list { font-family: var(--ng-serif) !important; }
html.theme-dark .notes-shell .note-review-list li,
html.theme-light .notes-shell .note-review-list li { color: var(--ng-ink-2) !important; }
/* Row layout: checkbox (or recap bullet) and its sentence on ONE line. The
   sentence is wrapped in a <p> whose default margin was dropping it onto a
   second line under the control; a tight 2-col grid + zeroed <p> margin fixes
   it for both the progress checkboxes and the recap bullets. */
.notes-shell .note-review-list > li {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  column-gap: 11px !important;
  align-items: start !important;
  padding-left: 0 !important;
  margin: 0 0 11px !important;
}
.notes-shell .note-review-list > li > p,
.notes-shell .note-review-list > li p { margin: 0 !important; }
.notes-shell .note-review-list > li .esa-check { width: 19px !important; height: 19px !important; margin-top: 0.08em; }

/* ── Quick Recap — compact density (user request). Scoped to --recap so the
   Progress-Check list keeps its 22px checkbox column + roomier spacing. Tighten
   the section top gap, the heading gap, the inter-item gap, and the line-height;
   the panel's outer padding stays the shared box value. ───────────────────── */
html.theme-dark .notes-shell .note-review-section--recap,
html.theme-light .notes-shell .note-review-section--recap {
  margin: clamp(16px, 2vw, 24px) 0 0 !important;
  padding: clamp(12px, 1.4vw, 16px) 0 0 !important;
}
html.theme-dark .notes-shell .note-review-section--recap .note-review-heading,
html.theme-light .notes-shell .note-review-section--recap .note-review-heading {
  margin: 0 0 8px !important;
}
.notes-shell .note-review-section--recap .note-review-list { gap: 4px !important; }
.notes-shell .note-review-section--recap .note-review-list > li {
  grid-template-columns: 16px minmax(0, 1fr) !important;
  column-gap: 8px !important;
  margin: 0 !important;
  line-height: 1.35 !important;   /* points stack like consecutive lines: one sentence then a break */
}

/* progress-check checkboxes (note-reading.js injects .esa-check) — tint on-brand */
html.theme-dark .notes-shell .esa-check-box,
html.theme-light .notes-shell .esa-check-box { stroke: var(--ng-accent-border) !important; }
html.theme-dark .notes-shell .is-checked .esa-check-box,
html.theme-light .notes-shell .is-checked .esa-check-box { fill: var(--ng-accent-soft) !important; stroke: var(--ng-accent) !important; }
html.theme-dark .notes-shell .esa-check-tick,
html.theme-light .notes-shell .esa-check-tick { stroke: var(--ng-accent) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Worked example (physics) — calm teal-keyed panel
   ══════════════════════════════════════════════════════════════════════════ */
html.theme-dark .notes-shell .note-worked-example,
html.theme-light .notes-shell .note-worked-example {
  margin: 24px 0 0 !important; padding: clamp(16px, 2vw, 22px) !important;
  border: 1px solid var(--ng-teal-border) !important; border-radius: var(--ng-r-card) !important;
  background: var(--ng-teal-bg) !important; box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Chapter CTA ("Practice this chapter") + prev/next pagination
   ══════════════════════════════════════════════════════════════════════════ */
html.theme-dark .notes-shell .note-chapter-cta,
html.theme-light .notes-shell .note-chapter-cta {
  margin: clamp(30px, 4vw, 46px) 0 0 !important; padding: 24px 0 0 !important;
  border-top: 1px solid var(--ng-line) !important; background: none !important; box-shadow: none !important;
  display: flex; flex-direction: column; gap: 14px;
}
html.theme-dark .notes-shell .note-chapter-cta-label,
html.theme-light .notes-shell .note-chapter-cta-label {
  font-family: -apple-system, system-ui, sans-serif !important; font-size: 0.72rem !important;
  font-weight: 800 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important;
  color: var(--ng-faint) !important; text-align: center;
}
.notes-shell .note-chapter-cta-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
html.theme-dark .notes-shell .note-chapter-cta-link,
html.theme-light .notes-shell .note-chapter-cta-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 16px !important; border: 1px solid var(--ng-line) !important; border-radius: var(--ng-r-md) !important;
  background: var(--ng-card-bg) !important; box-shadow: var(--ng-edge-top) !important;
  color: var(--ng-accent-text) !important; font-family: -apple-system, system-ui, sans-serif !important;
  font-weight: 700 !important; text-decoration: none !important;
  transition: border-color var(--ng-dur) var(--ng-ease), transform var(--ng-dur-fast) var(--ng-ease);
}
html.theme-dark .notes-shell .note-chapter-cta-link:hover,
html.theme-light .notes-shell .note-chapter-cta-link:hover { border-color: var(--ng-accent-border) !important; transform: translateY(-2px); }

html.theme-dark .notes-shell .note-pagination,
html.theme-light .notes-shell .note-pagination {
  margin: clamp(24px, 3vw, 34px) 0 0 !important; padding-top: 22px !important;
  border-top: 1px solid var(--ng-line) !important; gap: 14px;
}
html.theme-dark .notes-shell .note-pagination-link,
html.theme-light .notes-shell .note-pagination-link {
  border: 1px solid var(--ng-line) !important; border-radius: var(--ng-r-md) !important;
  background: var(--ng-card-bg) !important; box-shadow: var(--ng-edge-top) !important;
  transition: border-color var(--ng-dur) var(--ng-ease), transform var(--ng-dur-fast) var(--ng-ease);
}
html.theme-dark .notes-shell .note-pagination-link:hover,
html.theme-light .notes-shell .note-pagination-link:hover { border-color: var(--ng-accent-border) !important; transform: translateY(-2px); }
html.theme-dark .notes-shell .note-pagination-link span,
html.theme-light .notes-shell .note-pagination-link span { color: var(--ng-faint) !important; }
html.theme-dark .notes-shell .note-pagination-link strong,
html.theme-light .notes-shell .note-pagination-link strong { color: var(--ng-ink) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Focus mode — keep distraction-free reading clean (drop the glow + paper bg)
   ══════════════════════════════════════════════════════════════════════════ */
html.note-focus-mode .notes-shell .noteviewer-main::before { background: none !important; }

/* Focus mode reads edge-to-edge (rail + chrome hidden) and the column widens to
   1000px, so the default clamp(20px,5vw,64px) inner padding lets prose run to
   the viewport edge on mid widths. Give the reading lane generous, guaranteed
   side padding (high specificity beats the html.note-focus-mode rule in
   noteviewer.css) and never let a long word/URL/formula overflow the column. */
html.note-focus-mode .notes-shell .noteviewer-main-inner {
  padding-left: clamp(32px, 6vw, 96px) !important;
  padding-right: clamp(32px, 6vw, 96px) !important;
}
html.note-focus-mode .notes-shell .note-body { overflow-wrap: break-word; }

/* Kill any inherited "heading + trailing rule" flex decoration so headings read
   cleanly (our section divider is the rule ABOVE h2, not beside it). */
html.theme-dark .notes-shell .note-body h2, html.theme-light .notes-shell .note-body h2,
html.theme-dark .notes-shell .note-body h3, html.theme-light .notes-shell .note-body h3,
html.theme-dark .notes-shell .nt-objective-heading, html.theme-light .notes-shell .nt-objective-heading,
html.theme-dark .notes-shell .note-review-heading, html.theme-light .notes-shell .note-review-heading { display: block !important; }
.notes-shell .note-body h3::after,
.notes-shell .nt-objective-heading::before, .notes-shell .nt-objective-heading::after,
.notes-shell .note-review-heading::before, .notes-shell .note-review-heading::after { content: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Responsive + reduced motion
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .notes-shell .note-chapter-cta-links { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .notes-shell .note-resource-back-btn,
  .notes-shell .note-focus-toggle,
  .notes-shell .note-chapter-cta-link,
  .notes-shell .note-pagination-link { transition: none !important; }
  .notes-shell .note-chapter-cta-link:hover,
  .notes-shell .note-pagination-link:hover { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Premium gate (paywall) — keep IDENTICAL to the other study surfaces.
   The .premium-gate overlay is shared (noteviewer/paywall_overlay.html) and
   self-styled in noteviewer.css, but here it sits inside .notes-shell .note-body,
   so the exam-paper prose rules above (h2 size + 44px top margin, p size, ul
   margin) win by equal specificity + later source order and restyle its title /
   lede / list. Re-assert the component's own type at higher specificity so the
   notes paywall matches flashcards / TQ / MCQ at every breakpoint.
   ══════════════════════════════════════════════════════════════════════════ */
html.theme-dark .notes-shell .note-body .premium-gate__title,
html.theme-light .notes-shell .note-body .premium-gate__title {
  /* !important to beat the section-heading h2 rule above (it sets size, the
     44px top margin, top padding and a border-top rule — all !important). */
  margin: 0 0 14px !important;
  padding: 0 !important;
  border-top: 0 !important;
  font-size: clamp(2rem, 3vw, 2.45rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.1 !important;
}
.notes-shell .note-body .premium-gate__lede {
  margin: 0;
  font-size: clamp(1.05rem, 0.4vw + 0.97rem, 1.15rem);
  line-height: 1.65;
}
/* Colour parity with the flashcards / TQ / MCQ paywall: notes.css's h2 rule
   forces --ng-ink on the title, and the lede otherwise keeps the component's
   own 0.86 alpha vs the .noteviewer-body 0.96 — pin both to the other surfaces'
   exact rendered values so the gate is a true 1:1 copy in both themes. */
html.theme-dark .notes-shell .note-body .premium-gate__title { color: rgb(245, 247, 255) !important; }
html.theme-light .notes-shell .note-body .premium-gate__title { color: var(--text) !important; }
html.theme-dark .notes-shell .note-body .premium-gate__lede { color: rgba(238, 245, 255, 0.96) !important; }
html.theme-light .notes-shell .note-body .premium-gate__lede { color: var(--muted) !important; }
.notes-shell .note-body .premium-gate__benefits {
  margin: 0 0 clamp(28px, 2.8vw, 36px);
}
/* The notes reading column is capped at 720px for prose measure, but the paywall
   isn't prose — when the body IS the gate, lift the cap so the gate fills the
   content column (its own max-width then governs) and matches the wider
   flashcards / TQ / MCQ gate instead of floating as a small card in the cream. */
.notes-shell .note-body:has(.premium-gate) {
  max-width: none;
}
@media (max-width: 880px) {
  html.theme-dark .notes-shell .note-body .premium-gate__title,
  html.theme-light .notes-shell .note-body .premium-gate__title { font-size: 1.85rem !important; line-height: 1.08 !important; }
  .notes-shell .note-body .premium-gate__lede { font-size: 1rem; }
  .notes-shell .note-body .premium-gate__benefits { margin-bottom: 24px; }
}
@media (max-width: 600px) {
  html.theme-dark .notes-shell .note-body .premium-gate__title,
  html.theme-light .notes-shell .note-body .premium-gate__title { font-size: 1.55rem !important; line-height: 1.12 !important; }
  .notes-shell .note-body .premium-gate__lede { font-size: 0.9375rem; line-height: 1.6; }
  .notes-shell .note-body .premium-gate__benefits { margin-bottom: 20px; }
}