/*
 * Shared journal-inspired surface and typography treatment.
 * Page-specific styles still control layout, states, and semantic accents.
 */
:root {
  --theme-page: #eaf3f8;
  --theme-page-deep: #dcecf5;
  --theme-surface: #ffffff;
  --theme-surface-soft: #f4faff;
  --theme-border: #b9d9eb;
  --theme-border-strong: #7db8d8;
  --theme-ink: #18364b;
  --theme-muted: #58748a;
  --theme-blue: #287fb7;
  --theme-shadow: 0 8px 18px rgba(42, 91, 122, .12), 0 2px 4px rgba(42, 91, 122, .08);
}

/* The reader is an intentionally unstyled, print-like document surface. */
body:not(.reader-page) {
  --cr: var(--theme-ink);
  --m: var(--theme-muted);
  background: linear-gradient(180deg, var(--theme-page-deep) 0%, var(--theme-page) 100%) !important;
  color: var(--theme-ink);
  letter-spacing: -.01em;
  word-spacing: .06em;
}

body:not(.reader-page) :where(h1, h2, h3, h4) {
  color: var(--theme-ink);
  letter-spacing: -.025em;
  word-spacing: .04em;
}

body:not(.reader-page) h1 { margin-block: 0 1.25rem; }
body:not(.reader-page) h2 { margin-block: 2rem .75rem; }
body:not(.reader-page) h3 { margin-block: 1.5rem .55rem; }
body:not(.reader-page) h4 { margin-block: 1.15rem .4rem; }

/* Shared card/box vocabulary used across the individual pages. */
body:not(.reader-page) :where(
  [class*="card"], [class*="box"], [class*="panel"],
  .stat, .profile-hero, .qa-card, .pdf-card, .journal-card,
  .journal-sub-box, .qopt, .succard, .obox, .form-card,
  .score-box, .chart-box, .tbl-box, .insight-box, .warn-box, .tip-box,
  .plan, .sc, .feat
) {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 14px;
  box-shadow: var(--theme-shadow);
}

body:not(.reader-page) :where(
  [class*="card"], [class*="box"], [class*="panel"],
  .stat, .profile-hero, .qa-card, .pdf-card, .journal-card,
  .journal-sub-box, .qopt, .succard, .obox, .form-card,
  .score-box, .chart-box, .tbl-box, .insight-box, .warn-box, .tip-box,
  .plan, .sc, .feat
) :where(h1, h2, h3, h4, p) {
  letter-spacing: -.015em;
  word-spacing: .05em;
}

body:not(.reader-page) :where(
  [class*="card"], [class*="box"], [class*="panel"],
  .stat, .profile-hero, .qa-card, .pdf-card, .journal-card,
  .journal-sub-box, .qopt, .succard, .obox, .form-card,
  .score-box, .chart-box, .tbl-box, .insight-box, .warn-box, .tip-box,
  .plan, .sc, .feat
) :where(.sub, [class*="-sub"], [class*="-desc"], [class*="-text"], p) {
  color: var(--theme-muted);
}

body:not(.reader-page) :where(
  [class*="card"], [class*="box"], [class*="panel"],
  .stat, .profile-hero, .qa-card, .pdf-card, .journal-card,
  .journal-sub-box, .qopt, .succard, .obox, .form-card,
  .score-box, .chart-box, .tbl-box, .insight-box, .warn-box, .tip-box,
  .plan, .sc, .feat
):hover {
  border-color: var(--theme-border-strong) !important;
  box-shadow: 0 12px 24px rgba(42, 91, 122, .16), 0 3px 6px rgba(42, 91, 122, .08);
}

/* Keep nested media and interactive controls from becoming card surfaces. */
body:not(.reader-page) :where(img, svg, button, input, select, textarea) {
  box-shadow: none;
}