/* ============================================================
   PSY 652 — "Nordic Ink"
   A graduate course in applied data analysis
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,600;1,9..144,700&family=Outfit:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');


/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* ── Nordic Ink palette (graph-optimized) ── */
  --teal:     #348C9E;   /* ocean teal   — primary, Part 2, links */
  --rose:     #C05852;   /* terra rose   — APA reporting          */
  --gold:     #AD872B;   /* Nordic gold  — Interlude, datasets    */
  --indigo:   #4E5EAA;   /* indigo       — Part 1, advanced       */
  --heather:  #945297;   /* heather      — Part 2, thinking       */
  --spruce:   #3A8055;   /* spruce green — closing section        */

  /* Tints & accents */
  --teal-mid:    #6FB4C4;   /* mid teal (hover, highlight) */
  --teal-light:  #A8D0DC;   /* light teal (badge, label)   */
  --gold-lt:     #D4BC72;   /* pale gold (hero accent)     */
  --lavender:    #A494C2;   /* soft violet (gradient)      */
  --midnight:    #0C1620;   /* hero / navbar dark bg       */
  --medium-pink: #D99A7D;
  --soft-pink:   #F2DDDC;
  --minty-green: #9CBFAA;
  --soft-green:  #D7E5DD;
  --soft-indigo: #D2D6EA;

  /* Neutrals — cool undertone */
  --paper:     #FCFDFD;
  --sand:      #E8ECF1;
  --parchment: #D5DAE2;
  --border:    #D5DAE2;
  --surface:   #FFFFFF;

  /* Ink */
  --ink:     #1C2433;
  --ink-mid: #3A4458;
  --muted:   #6B7489;

  /* Fonts */
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans:    'Outfit', system-ui, sans-serif;
  --font-mono:    'Fira Code', monospace;

  /* Table body size. Tables carry more glyphs per line than prose, so they
     read better a step down from body copy. Change this one value to resize
     every table on the site: gt/gtsummary output, plain markdown tables, and
     df-print paged tables. 11pt is about 14.7px against a 16px body. */
  --table-font-size: 11pt;

  /* Shadows (primary-tinted, layered for more pop on lighter bg) */
  --shadow-sm: 0 2px 10px rgba(52,140,158,.14), 0 1px 3px rgba(28,36,51,.06);
  --shadow-md: 0 8px 28px rgba(52,140,158,.20), 0 3px 8px rgba(28,36,51,.08);
  --shadow-lg: 0 20px 56px rgba(52,140,158,.26);

  --radius:    10px;
  --radius-lg: 18px;
}

/* ── Base ─────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans) !important;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  background: #0C1620 !important;
  padding: 0.5rem 1.5rem !important;
  border-bottom: none !important;
}

body:has(.hero-section) {
  background: #0C1620 !important;
}
body:has(.hero-section) #quarto-content {
  background: var(--paper);
}
.navbar-logo { max-height: 34px; }
.navbar-title { font-family: var(--font-sans) !important; font-weight: 700; }
.navbar .nav-link { font-weight: 500; font-size: .88rem; }

/* ── Typography ───────────────────────────────────────────── */
h1, h1.title {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.15;
  color: var(--ink);
}

h1.title {
  font-size: 2.5rem !important;
}

h2 {
  font-family: var(--font-sans) !important;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
  margin-top: 2.5rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--border);
}

h3 {
  font-family: var(--font-sans) !important;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink-mid);
  margin-top: 1.75rem;
}

/* h4–h6 explicitly use the sans family. Without these rules the headings fall
   back to Bootstrap's default heading rule (Playfair Display, italic), which
   looks like a display-font leak. Fraunces is reserved for h1 / h1.title only. */
h4 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 1rem;
  color: var(--ink-mid);
  margin-top: 1.5rem;
  line-height: 1.35;
}

h5 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: .9rem;
  color: var(--ink-mid);
  margin-top: 1.25rem;
  line-height: 1.35;
}

h6 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: .85rem;
  color: var(--ink-mid);
  margin-top: 1.25rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .04em;
}

a {
  color: var(--teal);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
a:hover { color: var(--spruce); text-decoration-color: var(--teal); }

code {
  font-family: var(--font-mono) !important;
  font-size: .875em;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
code:not(pre code) {
  background: #e8ecf1 !important;
  border-radius: 4px;
  padding: .15em .4em;
  color: #2a3544 !important;
}
pre code { background: transparent; padding: 0; color: inherit; }

/* ── Dark code blocks (Nord palette) ──────────────────────── */
/* Dark Nord background applies to every static code chunk site-wide.
   Pandoc's `highlight-style: monokai` setting (in _quarto.yml) still
   runs during render and generates the `<span class="kw">…</span>`
   syntax markup, but we override its colors below with the Nord
   palette so static chunks match the WebR editor (see the WebR
   exercise editors section further down). Unifies the course's two
   code-display contexts to a single palette. */
div.sourceCode,
pre.sourceCode {
  background: #2E3440 !important;
  border-radius: 6px;
  border: none;
}
pre.sourceCode code {
  color: #D8DEE9 !important;
  background: transparent !important;
}

/* ── Nord token palette for static code chunks ─────────────────
   Overrides whatever colors Pandoc's monokai assigns to each token
   class, pinning them to the same Nord values the WebR editor uses.
   Every selector covers both `pre.sourceCode span.XX` and
   `code.sourceCode span.XX` to match the two DOM shapes Pandoc can
   produce. All !important because Quarto injects high-specificity
   inline rules at render time. */
pre.sourceCode code span.op,
code.sourceCode span.op,
pre.sourceCode code span.ot,
code.sourceCode span.ot {
  color: #ECEFF4 !important;           /* operators / "other": -, +, |>, ==, <-  (snow-storm lightest) */
}
pre.sourceCode code span.kw,
code.sourceCode span.kw,
pre.sourceCode code span.cf,
code.sourceCode span.cf {
  color: #81A1C1 !important;           /* keywords / control-flow (frost blue) */
}
pre.sourceCode code span.fu,
code.sourceCode span.fu,
pre.sourceCode code span.bu,
code.sourceCode span.bu {
  color: #88C0D0 !important;           /* function names / built-ins (frost light cyan) */
}
pre.sourceCode code span.st,
code.sourceCode span.st,
pre.sourceCode code span.ss,
code.sourceCode span.ss,
pre.sourceCode code span.ch,
code.sourceCode span.ch,
pre.sourceCode code span.vs,
code.sourceCode span.vs,
pre.sourceCode code span.sc,
code.sourceCode span.sc {
  color: #A3BE8C !important;           /* strings / characters (aurora green) */
}
pre.sourceCode code span.dv,
code.sourceCode span.dv,
pre.sourceCode code span.fl,
code.sourceCode span.fl,
pre.sourceCode code span.bn,
code.sourceCode span.bn,
pre.sourceCode code span.cn,
code.sourceCode span.cn {
  color: #B48EAD !important;           /* numerics / constants: 0.95, TRUE, FALSE, NA, NULL (aurora purple) */
}
pre.sourceCode code span.va,
code.sourceCode span.va,
pre.sourceCode code span.at,
code.sourceCode span.at {
  color: #D8DEE9 !important;           /* variable & attribute names (snow-storm darkest — default text color) */
}
pre.sourceCode code span.co,
code.sourceCode span.co,
pre.sourceCode code span.cv,
code.sourceCode span.cv,
pre.sourceCode code span.do,
code.sourceCode span.do,
pre.sourceCode code span.an,
code.sourceCode span.an,
pre.sourceCode code span.in,
code.sourceCode span.in {
  color: #6C7A94 !important;           /* comments / documentation / annotations (polar-night lighter) */
  font-style: italic;
}
pre.sourceCode code span.dt,
code.sourceCode span.dt,
pre.sourceCode code span.im,
code.sourceCode span.im {
  color: #EBCB8B !important;           /* data types / imports (aurora yellow) */
}
pre.sourceCode code span.al,
code.sourceCode span.al,
pre.sourceCode code span.er,
code.sourceCode span.er {
  color: #BF616A !important;           /* alerts / errors (aurora red) */
}
pre.sourceCode code span.wa,
code.sourceCode span.wa,
pre.sourceCode code span.pp,
code.sourceCode span.pp {
  color: #D08770 !important;           /* warnings / preprocessor (aurora orange) */
}


.katex { font-size: .9em; }


/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   Deep midnight base with full-palette Nordic glows
═══════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  padding: 7.5rem max(3rem, calc((100vw - 64rem) / 2)) 11rem;
  background: #0C1620;
  background-image:
    radial-gradient(ellipse 680px 540px at 90%  6%,  rgba(52,140,158,.38)  0%, transparent 60%),
    radial-gradient(ellipse 480px 360px at  6% 82%,  rgba(148,82,151,.28)  0%, transparent 55%),
    radial-gradient(ellipse 400px 300px at 52% 90%,  rgba(78,94,170,.22)   0%, transparent 55%),
    radial-gradient(ellipse 320px 240px at 74% 52%,  rgba(173,135,43,.18)  0%, transparent 50%);
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 560px; height: 480px;
  border-radius: 62% 38% 46% 54% / 58% 44% 56% 42%;
  background: radial-gradient(ellipse at 40% 40%,
    rgba(52,140,158,.28) 0%,
    rgba(111,180,196,.10) 45%,
    transparent 70%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C180,100 360,0 540,50 C720,100 900,0 1080,50 C1260,100 1380,20 1440,50 L1440,100 L0,100 Z' fill='%23FCFDFD'/%3E%3C/svg%3E") no-repeat bottom center;
  background-size: 100% 100%;
}

.hero-wave { display: none; }

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(52,140,158,.09);
  border: 1px solid rgba(52,140,158,.22);
  border-radius: 3px;
  padding: 4px 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2.8rem, 5.5vw, 4.6rem) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.05 !important;
  color: #f0ebe0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 .1rem !important;
}

/* "in Psychology I" — editorial gold accent */
.hero-accent {
  font-weight: 600 !important;
  color: var(--gold-lt) !important;
  display: block;
}

.hero-subtitle {
  font-size: 1rem;
  color: rgba(111,180,196,.65);
  max-width: 460px;
  line-height: 1.75;
  margin: 1.25rem 0 2rem;
  font-weight: 300;
}

.hero-cta { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.hero-cta-row { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }

.btn-start {
  display: inline-block;
  background: var(--teal);
  color: #0C1620 !important;
  padding: .7rem 1.75rem;
  border-radius: 3px;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none !important;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 3px 14px rgba(52,140,158,.35);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.btn-start:hover {
  background: var(--teal-mid);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(52,140,158,.45);
  color: #0C1620 !important;
}

.btn-ghost {
  display: inline-block;
  color: #0C1620 !important;
  padding: .7rem 1.75rem;
  border-radius: 3px;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none !important;
  letter-spacing: .04em;
  white-space: nowrap;
  background: var(--teal);
  box-shadow: 0 3px 14px rgba(52,140,158,.35);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.btn-ghost:hover {
  background: var(--teal-mid);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(52,140,158,.45);
  color: #0C1620 !important;
}

/* Stats strip — Fraunces italic numerals */
.hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2.5rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(52,140,158,.15);
  flex-wrap: wrap;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  font-style: italic;
  color: var(--gold-lt);
  line-height: 1;
  margin-bottom: .1rem;
}
.stat-label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(111,180,196,.55);
}


/* ═══════════════════════════════════════════════════════════
   UNIT CARDS
═══════════════════════════════════════════════════════════ */
.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0 3rem;
}

.unit-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.75rem 1.75rem 1.5rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform .22s, box-shadow .22s;
}
.unit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Color top bar */
.unit-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.unit-card.unit-1::after { background: linear-gradient(90deg, var(--indigo), var(--lavender)); }
.unit-card.unit-2::after { background: linear-gradient(90deg, var(--heather), var(--rose)); }
.unit-card.unit-3::after { background: linear-gradient(90deg, var(--teal), var(--teal-mid)); }


.unit-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.unit-card.unit-1 .unit-label { color: var(--indigo); }
.unit-card.unit-2 .unit-label { color: var(--heather); }
.unit-card.unit-3 .unit-label { color: var(--teal); }

.unit-card h3 {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  font-style: italic !important;
  color: var(--ink) !important;
  margin: 0 0 .6rem !important;
  border: none !important;
  padding: 0 !important;
}

.unit-card p {
  font-size: .875rem;
  color: var(--ink-mid);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.unit-meta {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--sand);
  padding: 3px 10px;
  border-radius: 3px;
}


/* ═══════════════════════════════════════════════════════════
   MODULE CARDS
═══════════════════════════════════════════════════════════ */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .85rem;
  margin: 1.25rem 0 2rem;
}

.module-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  box-shadow: var(--shadow-sm);
  text-decoration: none !important;
  color: var(--ink) !important;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  transition: border-left-color .18s, box-shadow .18s, transform .18s;
}
.module-card:hover { box-shadow: var(--shadow-md); transform: translateX(3px); }
.module-card.unit-1:hover { border-left-color: var(--indigo); }
.module-card.unit-2:hover { border-left-color: var(--heather); }
.module-card.unit-3:hover { border-left-color: var(--teal); }

.module-card strong {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .15rem;
}

.module-desc {
  font-size: .8rem;
  color: var(--muted);
  display: block;
  margin-top: .15rem;
  line-height: 1.45;
}

.module-num {
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .04em;
  color: white;
  flex-shrink: 0;
}
.module-card.unit-1 .module-num { background: var(--indigo); }
.module-card.unit-2 .module-num { background: var(--heather); }
.module-card.unit-3 .module-num { background: var(--teal); }


/* ═══════════════════════════════════════════════════════════
   SCHEDULE SECTION
═══════════════════════════════════════════════════════════ */
.schedule-header {
  background: var(--midnight);
  border-radius: var(--radius);
  padding: 1.25rem 1.75rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--teal);
}
.schedule-header p { color: rgba(159,223,196,.70); font-size: .9rem; margin: 0; }
.schedule-header h2 {
  color: var(--teal-light);
  font-size: 1rem;
  font-weight: 700;
  border: none; padding: 0;
  margin: 0 0 .35rem;
}


/* ═══════════════════════════════════════════════════════════
   TOC
═══════════════════════════════════════════════════════════ */
#TOC { font-size: .83rem; border-left: 3px solid var(--border); padding-left: 1rem; }

/* Base: all levels */
#TOC .nav-link { color: var(--muted); font-weight: 400; padding: .18rem 0; line-height: 1.4; }

/* H2 — top-level: bolder, darker, full-size */
#TOC > ul > li > .nav-link {
  color: var(--ink-mid);
  font-weight: 600;
  font-size: .84rem;
}

/* H3 — first nested: standard weight, slightly smaller */
#TOC ul ul > li > .nav-link {
  font-size: .79rem;
  padding-left: .25rem;
}

/* H4 — second nested: even smaller, more receded */
#TOC ul ul ul > li > .nav-link {
  font-size: .75rem;
  padding-left: .25rem;
  opacity: .8;
}

/* Active and hover: all levels */
#TOC .nav-link.active,
#TOC .nav-link:hover { color: var(--teal); font-weight: 600; opacity: 1; }


/* ═══════════════════════════════════════════════════════════
   CUSTOM CALLOUT BOXES — pill-box card style
   All types share the same shape; color encodes purpose.
     summary-box      → teal      #348C9E  core concepts / takeaways
     dataset-box      → gold      #AD872B  dataset descriptions
     advanced-box     → indigo    #4E5EAA  deep technical dives
     learning-check   → heather   #945297  student checkpoints
     apa-box          → rose      #C05852  APA-style reporting / write-ups
     whole-class-box  → soft pink #F2DDDC  whole-class moments / in-class activity
     pair-share-box   → lavender  #A494C2  pause-and-talk-to-a-partner moments
═══════════════════════════════════════════════════════════ */

/* ── Shared shape ── */
.summary-box, .dataset-box, .advanced-box, .learning-check, .apa-box, .whole-class-box, .pair-share-box, .scratchpad-box {
  border-radius: var(--radius);
  padding: 1.25rem 1.65rem;
  margin: 2rem 0;
  box-shadow: var(--shadow-sm);
}

/* ── Shared title style (applied via type-specific selectors below) ──
   Each callout-box class styles its h2/h3 directly so plain `### Title`
   works inside any box. Dedicated `.*-title` span classes remain
   available as inline overrides (e.g. to style only part of a title). */
.summary-title, .summary-box h2, .summary-box h3,
.advanced-title, .advanced-box h2, .advanced-box h3,
.learning-title, .learning-check h2, .learning-check h3,
.apa-title, .apa-box h2, .apa-box h3,
.whole-class-title, .whole-class-box h2, .whole-class-box h3,
.pair-share-title, .pair-share-box h2, .pair-share-box h3,
.dataset-box h2, .dataset-box h3,
.scratchpad-box h2, .scratchpad-box h3 {
  font-family: var(--font-sans) !important;
  font-size: .73rem !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: none !important;
  margin: 0 0 .7rem !important;
  padding: 0 !important;
}

/* Exempt inline math from the uppercase transform on callout headers,
   so case-sensitive symbols (e.g. n vs. N, p vs. P) render correctly. */
.summary-title .math, .summary-box h2 .math, .summary-box h3 .math,
.advanced-title .math, .advanced-box h2 .math, .advanced-box h3 .math,
.learning-title .math, .learning-check h2 .math, .learning-check h3 .math,
.apa-title .math, .apa-box h2 .math, .apa-box h3 .math,
.whole-class-title .math, .whole-class-box h2 .math, .whole-class-box h3 .math,
.pair-share-title .math, .pair-share-box h2 .math, .pair-share-box h3 .math,
.dataset-box h2 .math, .dataset-box h3 .math,
.summary-title mjx-container, .summary-box h2 mjx-container, .summary-box h3 mjx-container,
.advanced-title mjx-container, .advanced-box h2 mjx-container, .advanced-box h3 mjx-container,
.learning-title mjx-container, .learning-check h2 mjx-container, .learning-check h3 mjx-container,
.apa-title mjx-container, .apa-box h2 mjx-container, .apa-box h3 mjx-container,
.whole-class-title mjx-container, .whole-class-box h2 mjx-container, .whole-class-box h3 mjx-container,
.pair-share-title mjx-container, .pair-share-box h2 mjx-container, .pair-share-box h3 mjx-container,
.dataset-box h2 mjx-container, .dataset-box h3 mjx-container {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Exempt inline code from the uppercase transform on callout headings.
   Code is case-sensitive, so uppercasing it makes it WRONG, not merely
   restyled: `data/wdi_2022.Rds` became DATA/WDI_2022.RDS, a path that does
   not exist on a case-sensitive filesystem. Same hazard for argument names
   (`pooled_sd = FALSE`), shell commands, and error strings students copy.
   The semantic spans (.fxn-name, .df-name, …) already opt out individually;
   this closes the gap for plain backticked code. */
.summary-title code, .summary-box h2 code, .summary-box h3 code,
.advanced-title code, .advanced-box h2 code, .advanced-box h3 code,
.learning-title code, .learning-check h2 code, .learning-check h3 code,
.apa-title code, .apa-box h2 code, .apa-box h3 code,
.whole-class-title code, .whole-class-box h2 code, .whole-class-box h3 code,
.pair-share-title code, .pair-share-box h2 code, .pair-share-box h3 code,
.dataset-box h2 code, .dataset-box h3 code,
.scratchpad-box h2 code, .scratchpad-box h3 code {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Summary / Core Concepts — teal ── */
.summary-box {
  background: #f0faf6;
  border: 1px solid #b8e8d8;
  border-top: 3px solid var(--teal);
}
.summary-title, .summary-box h2, .summary-box h3 { color: var(--teal) !important; }

/* ── Scratchpad — by-hand worksheet · neutral slate ── */
.scratchpad-box {
  background: var(--surface);
  border: 1px solid var(--sand);
  border-top: 3px solid var(--ink-mid);
}
.scratchpad-box h2, .scratchpad-box h3 { color: var(--ink-mid) !important; }

/* ── Dataset — gold ──
   Every .dataset-box carries a small "Meet the data" eyebrow so students
   recognize it as the description of a dataset they're about to work with
   (mirrors the "Going deeper" eyebrow on .advanced-box). */
.dataset-box {
  background: #fdf7ee;
  border: 1px solid #f0d4a0;
  border-top: 3px solid var(--gold);
}
.dataset-box::before {
  content: "Meet the data";
  display: block;
  padding-left: 1.6em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23AD872B"><path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/></svg>') no-repeat left center;
  background-size: 1.05em 1.05em;
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .9;
  margin-bottom: .6rem;
  line-height: 1.35;
}
.dataset-box h2, .dataset-box h3 { color: var(--gold) !important; }
.dataset-name {
  font-family: var(--font-mono) !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0;
  text-transform: none !important;
  color: var(--gold) !important;
  border: none !important;
  margin: 0 0 .7rem !important;
  padding: 0 !important;
}

/* ── Advanced / Deep Dive — indigo ──
   Every .advanced-box carries a small "Going deeper" eyebrow so students
   recognize it as supplementary depth — the main thread stands without it.
   (What the eyebrow means is explained on the site-guide nav page.) */
.advanced-box {
  background: #eff4ff;
  border: 1px solid #bdd0f8;
  border-top: 3px solid var(--indigo);
}
.advanced-box::before {
  content: "Going further";
  display: block;
  padding-left: 1.6em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%234E5EAA"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/></svg>') no-repeat left center;
  background-size: 1.05em 1.05em;
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--indigo);
  opacity: .9;
  margin-bottom: .6rem;
  line-height: 1.35;
}

/* One exception to the default label. A handful of lab boxes are pure drilling --
   the same skill again on different data -- rather than an extension, and their
   section heading says "More practice". Tag those `::: {.advanced-box .practice}`
   so the box label matches the heading above it. Everything else uses the
   default "Going further". */
.advanced-box.practice::before { content: "More practice"; }

.advanced-title, .advanced-box h2, .advanced-box h3 { color: var(--indigo) !important; }

/* ── Learning Check — neutral grey ──
   Deliberately the quietest box on the page: a learning check interrupts
   reading to ask the student to do something, and a neutral field keeps it
   from competing with the colour-coded boxes around it. Title is #5B6474
   (5.47:1) rather than the stripe grey, which would only reach 2.84:1. */
.learning-check {
  background: #F4F5F7;
  border: 1px solid #D3D7DE;
  border-top: 3px solid #8A93A3;
}
.learning-title, .learning-check h2, .learning-check h3 { color: #5B6474 !important; }

/* ── APA-style reporting / write-ups — rose ──
   Reserve strictly for APA reporting templates and result paragraphs. */
.apa-box {
  background: #fef2f2;
  border: 1px solid #f8c0c0;
  border-top: 3px solid var(--rose);
  font-size: .87rem;
}
.apa-title, .apa-box h2, .apa-box h3 { color: var(--rose) !important; }

/* ── Whole-class moment / in-class activity — warm amber ──
   Use for class-wide gathering moments: "look up from your screens and
   work through this together," shared activities, and class discussions.

   WHY AMBER, AND WHY NOT A COOL COLOUR (tested 2026-08-17).
   This box lives only in lectures, where it sits beside .summary-box
   (2-11 per page), .pair-share-box, and sometimes .advanced-box. So it has
   to stay clearly distinct from mint-green, lavender, and indigo, which
   rules out the cool half of the palette. Spruce was tried and failed:
   .summary-box's field is #f0faf6, already a pale mint, and spruce at a
   comparable tint lands on #EDF4F0 -- effectively the same colour.
   Amber also harmonises by sitting in the warm gap between the two warm
   brand colours, --rose (#C05852) and --gold (#AD872B).
   Collisions with those two are rare: .dataset-box (gold) and .apa-box
   (rose) each appear in exactly one lecture.
   Title #9A551A on this field is 4.98:1 -- clears the 4.5:1 AA floor,
   which matters because .73rem bold counts as "normal" text, not "large". */
.whole-class-box {
  background: #FBEEDB;
  border: 1px solid #ECC98F;
  border-top: 3px solid #C97E2C;
  font-size: .87rem;
}
.whole-class-title, .whole-class-box h2, .whole-class-box h3 { color: #9A551A !important; }

/* ── Pair-and-share — lavender ──
   Use for pause-and-talk-to-a-partner moments inside an activity (NOT
   class-wide gathering moments — those use .whole-class-box). */
.pair-share-box {
  background: #f5f1f9;
  border: 1px solid #d4c8e4;
  border-top: 3px solid var(--lavender);
  font-size: .87rem;
}
.pair-share-title, .pair-share-box h2, .pair-share-box h3 { color: var(--lavender) !important; }

/* ── Guiding question · spruce ──
   A slim guidepost (NOT a padded callout box) that opens a section by stating,
   in plain words, the question it answers — so students see exactly where a rule
   or concept is headed before the formalism arrives. Deliberately lighter than
   the callout boxes so it orients without competing with them. Authoring:
     ::: guiding-question
     ### <i class="bi bi-signpost-2-fill" aria-hidden="true"></i> The question we're answering
     *…the plain-language question…*
     :::                                                                        */
.guiding-question {
  background: #eef6f1;
  border-left: 4px solid var(--spruce);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .8rem 1.15rem .9rem;
  margin: 1.1rem 0 1.6rem;
  box-shadow: var(--shadow-sm);
}
.guiding-question h3 {
  font-family: var(--font-sans) !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--spruce) !important;
  border: none !important;
  margin: 0 0 .35rem !important;
  padding: 0 !important;
}
.guiding-question p {
  margin: 0;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
/* keep an emphasized word (or/and) upright inside the italic question */
.guiding-question p strong { font-style: normal; font-weight: 700; }

/* ── Concept-card grid · for small taxonomies of typed concepts ──
   Use for "here are 4 types of X, each with a core question and a one-line
   example" displays. Each card is a semantic <div> with bold title, italic
   question, and plain-text example — fully readable by screen readers. The
   icon is decorative (mark with aria-hidden="true"). Color variants:
   .concept-grid.teal / .rose / .indigo / .heather / .spruce / .gold. */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.concept-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.concept-card-icon {
  font-size: 1.5rem;
  color: var(--teal);
  line-height: 1;
}
.concept-card-title {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.concept-card-question {
  font-style: italic;
  color: var(--teal);
  font-weight: 500;
  font-size: .92rem;
  line-height: 1.35;
  margin: 0;
}
.concept-card-example {
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.45;
  margin: 0;
}

/* Color variants — change the accent stripe + icon + question color */
.concept-grid.rose .concept-card { border-top-color: var(--rose); }
.concept-grid.rose .concept-card-icon,
.concept-grid.rose .concept-card-question { color: var(--rose); }

.concept-grid.indigo .concept-card { border-top-color: var(--indigo); }
.concept-grid.indigo .concept-card-icon,
.concept-grid.indigo .concept-card-question { color: var(--indigo); }

.concept-grid.heather .concept-card { border-top-color: var(--heather); }
.concept-grid.heather .concept-card-icon,
.concept-grid.heather .concept-card-question { color: var(--heather); }

.concept-grid.spruce .concept-card { border-top-color: var(--spruce); }
.concept-grid.spruce .concept-card-icon,
.concept-grid.spruce .concept-card-question { color: var(--spruce); }

.concept-grid.gold .concept-card { border-top-color: var(--gold); }
.concept-grid.gold .concept-card-icon,
.concept-grid.gold .concept-card-question { color: var(--gold); }

/* ── Section-opener · designed introduction block for a major section ──
   Use sparingly — at the top of a major H1 section that benefits from
   a stronger visual lead-in. Markup:
     ::: {.section-opener .spruce}
     [Essential question]{.section-kicker}
     ## The big question for this section
     One short framing paragraph.
     ::: {.section-opener-grid}
     ::: {.section-opener-card}
     [What this section gives you]{.section-opener-label}
     - bullets…
     :::
     ::: {.section-opener-card}
     [Why it matters]{.section-opener-label}
     paragraph…
     :::
     :::
     :::
   Color variants on the outer wrapper: .teal (default), .rose, .indigo,
   .heather, .spruce, .gold — sets the top accent stripe + kicker color. */
.section-opener {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem 1.75rem;
  margin: 2rem 0 2.5rem;
  box-shadow: var(--shadow-sm);
}

.section-kicker {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 .55rem;
}

/* The h2 inside .section-opener is the "essential question" — display font,
   italic, smaller than a top-of-page h1. Overrides the global h2 rule
   (sans, weight 700, border-bottom) for this scoped use only. */
.section-opener h2 {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.55rem !important;
  color: var(--ink) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 0 .9rem !important;
  line-height: 1.25;
}

.section-opener > p {
  font-size: .95rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}

.section-opener-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.section-opener-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}

.section-opener-card p,
.section-opener-card ul,
.section-opener-card ol {
  font-size: .9rem;
  line-height: 1.5;
  margin: 0;
}

.section-opener-card ul,
.section-opener-card ol {
  padding-left: 1.15rem;
}

.section-opener-card ul li + li,
.section-opener-card ol li + li {
  margin-top: .25rem;
}

.section-opener-label {
  display: block;
  font-family: var(--font-sans) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0 0 .55rem;
}

/* Color variants — accent stripe + kicker color */
.section-opener.rose    { border-top-color: var(--rose); }
.section-opener.rose    .section-kicker { color: var(--rose); }

.section-opener.indigo  { border-top-color: var(--indigo); }
.section-opener.indigo  .section-kicker { color: var(--indigo); }

.section-opener.heather { border-top-color: var(--heather); }
.section-opener.heather .section-kicker { color: var(--heather); }

.section-opener.spruce  { border-top-color: var(--spruce); }
.section-opener.spruce  .section-kicker { color: var(--spruce); }

.section-opener.gold    { border-top-color: var(--gold); }
.section-opener.gold    .section-kicker { color: var(--gold); }

.recap {
  background: linear-gradient(135deg, #f0faf6 0%, #fdf7ee 50%, #eff4ff 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  box-shadow: var(--shadow-sm);
}


/* ═══════════════════════════════════════════════════════════
   SEMANTIC INLINE SPANS
═══════════════════════════════════════════════════════════ */
.fxn-name {
  color: #348C9E; font-weight: bold;
  font-family: var(--font-mono); font-size: .875em;
  background: #e8f3f6; border-radius: 4px; padding: .1em .35em;
  text-transform: none !important; letter-spacing: 0 !important;
}
.pkg-name {
  color: #C05852; font-weight: bold;
  font-family: var(--font-mono); font-size: .875em;
  background: #faeeed; border-radius: 4px; padding: .1em .35em;
  text-transform: none !important; letter-spacing: 0 !important;
}
.arg-name {
  color: #4E5EAA; font-weight: 600;
  font-family: var(--font-mono); font-size: .875em;
  background: #eff1fa; border-radius: 4px; padding: .1em .35em;
  text-transform: none !important; letter-spacing: 0 !important;
}
.variable-name {
  color: #945297; font-weight: bold;
  font-family: var(--font-mono); font-size: .875em;
  background: #f5f0f6; border-radius: 4px; padding: .1em .35em;
  text-transform: none !important; letter-spacing: 0 !important;
}
.df-name {
  color: #AD872B; font-weight: bold;
  font-family: var(--font-mono); font-size: .875em;
  background: #f8f3e8; border-radius: 4px; padding: .1em .35em;
  text-transform: none !important; letter-spacing: 0 !important;
}
.var-type {
  font-family: var(--font-mono);
  font-size: .72em;
  font-weight: 600;
  color: var(--ink-mid);
  background: var(--sand);
  border-radius: 3px;
  padding: .08em .35em;
  vertical-align: middle;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.fxn-name a, .pkg-name a, .arg-name a, .variable-name a, .df-name a {
  color: inherit; text-decoration: underline;
}

/* Disable Fira Code programming ligatures inside the semantic spans
   (|>, <-, !=, ->, ==, etc.) — we want students to see each glyph literally,
   not a triangle or arrow replacement. */
.fxn-name, .pkg-name, .arg-name, .variable-name, .df-name, .var-type {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}


/* Plot PNGs render with transparent backgrounds (via
   theme_set(..., fill = "transparent") plus knitr's dev.args bg =
   "transparent" — see module-setup chunks and include/_webr_theme.qmd),
   so no mix-blend-mode is needed. The page's --paper color shows
   through the transparent edges directly. */


/* ── gt / gtsummary table theming ─────────────────────────── */
/* Make gt/gtsummary DEFAULT cells transparent so the page's --paper
   color shows through (no visible white rectangle behind the table).
   `!important` is needed because gt scopes its built-in #id .gt_*
   rules more specifically than plain class selectors, so without
   !important gt's default #FFFFFF wins.

   The `:not([style*="background"])` guard excludes cells that set
   their own inline background-color via tab_style() / cell_fill()
   (e.g., highlighted cross-tab headers). Those keep their custom
   palette because the !important class rule would otherwise beat
   inline styles without !important — which would erase intended
   color coding like row/column-type banner headers. */
table.gt_table:not([style*="background"]),
.gt_table_body:not([style*="background"]),
.gt_heading:not([style*="background"]),
.gt_caption:not([style*="background"]),
.gt_col_headings:not([style*="background"]),
.gt_col_heading:not([style*="background"]),
.gt_column_spanner_outer:not([style*="background"]),
.gt_empty_group_heading:not([style*="background"]),
.gt_stub:not([style*="background"]),
.gt_stub_row_group:not([style*="background"]),
.gt_grand_summary_row:not([style*="background"]),
.gt_first_grand_summary_row:not([style*="background"]),
.gt_summary_row:not([style*="background"]),
.gt_first_summary_row:not([style*="background"]),
.gt_group_heading:not([style*="background"]),
.gt_footnotes:not([style*="background"]),
.gt_footnote:not([style*="background"]),
.gt_sourcenotes:not([style*="background"]),
.gt_sourcenote:not([style*="background"]),
.gt_row:not([style*="background"]) {
  background-color: transparent !important;
}
.gt_striped:not([style*="background"]) {
  background-color: rgba(0, 0, 0, 0.03) !important;
}


/* ── Misc ─────────────────────────────────────────────────── */
.footnote-ref { color: var(--teal); font-weight: 600; }

/* Blockquotes — the brand theme colors quote text orange (secondary #F29C6B),
   which is low-contrast on light and tinted backgrounds. Use a readable dark
   grey site-wide (children inherit it). */
blockquote,
.blockquote {
  color: var(--ink-mid) !important;
}
.session-date { font-size: .72rem; font-weight: 600; color: var(--muted); letter-spacing: .03em; margin-bottom: .3rem; }
.tbd { color: var(--muted); font-style: italic; font-size: .85em; }
.nav-footer { font-size: .83rem; background: #0C1620 !important; }
.dropdown-menu { max-height: 420px; overflow-y: auto; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); }


/* ── WebR exercise editors ────────────────────────────────── */
/* The r-wasm/live extension drives its editor theme through CSS custom
   properties (see resources/live-runtime.css: --exercise-main-bg,
   --exercise-main-color, --exercise-editor-hl-*). Overriding those vars
   at the .card.exercise-editor scope is the cleanest way to re-theme
   the whole editor — the extension's built-in rules then pick up our
   Nord palette via the cascade, without having to beat its per-token
   specificity directly. */

.card.exercise-editor {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);

  /* ── Nord-palette editor vars (override the extension's defaults) ── */
  /* Background + default text (Nord polar-night + snow-storm) */
  --exercise-main-bg:          #2E3440;
  --exercise-main-color:       #D8DEE9;
  --exercise-code-block-bg:    #2E3440;
  --exercise-code-block-color: #D8DEE9;
  --exercise-cap-bg:           #3B4252;
  --exercise-gray:             #434C5E;
  --exercise-line-bg:          rgba(129, 161, 193, 0.10);
  --exercise-line-gutter-bg:   rgba(129, 161, 193, 0.18);

  /* ── Token colors. These bypass the extension's `--quarto-hl-*-color`
        fallbacks (monokai on Pandoc's side doesn't always propagate
        light-on-dark operator colors) and ensure every character is
        visible on the #2E3440 surface. ─────────────────────────────── */
  --exercise-editor-hl-op:  #ECEFF4 !important;  /* operators: - + * / |> = < > %>%  (FIXES missing minus, pipe, ==) */
  --exercise-editor-hl-ot:  #ECEFF4 !important;  /* "other": compareOperator (==, !=), definitionOperator (<-, =) */
  --exercise-editor-hl-kw:  #81A1C1 !important;  /* keywords (if, function, return, ...) → Nord frost blue */
  --exercise-editor-hl-cf:  #81A1C1 !important;  /* control flow (if/else/for/while) → Nord frost blue */
  --exercise-editor-hl-fu:  #88C0D0 !important;  /* function names → Nord frost light cyan */
  --exercise-editor-hl-st:  #A3BE8C !important;  /* strings → Nord aurora green */
  --exercise-editor-hl-ss:  #A3BE8C !important;  /* string2 / specialString → Nord aurora green */
  --exercise-editor-hl-ch:  #A3BE8C !important;  /* characters → Nord aurora green */
  --exercise-editor-hl-vs:  #A3BE8C !important;  /* verbatim string → Nord aurora green */
  --exercise-editor-hl-sc:  #A3BE8C !important;  /* special char → Nord aurora green */
  --exercise-editor-hl-dv:  #B48EAD !important;  /* numbers / decimals → Nord aurora purple */
  --exercise-editor-hl-fl:  #B48EAD !important;  /* floats → Nord aurora purple */
  --exercise-editor-hl-bn:  #B48EAD !important;  /* base-N numbers → Nord aurora purple */
  --exercise-editor-hl-cn:  #B48EAD !important;  /* constants (TRUE, FALSE, NA, NULL) → Nord aurora purple */
  --exercise-editor-hl-va:  #D8DEE9 !important;  /* variable names → Nord snow-storm */
  --exercise-editor-hl-at:  #D8DEE9 !important;  /* attribute names → Nord snow-storm */
  --exercise-editor-hl-co:  #6C7A94 !important;  /* comments → Nord polar-night lighter (readable but recessed) */
  --exercise-editor-hl-cv:  #6C7A94 !important;  /* comment vars → Nord polar-night lighter */
  --exercise-editor-hl-do:  #6C7A94 !important;  /* documentation → Nord polar-night lighter */
  --exercise-editor-hl-an:  #6C7A94 !important;  /* annotations → Nord polar-night lighter */
  --exercise-editor-hl-dt:  #EBCB8B !important;  /* data types → Nord aurora yellow */
  --exercise-editor-hl-im:  #EBCB8B !important;  /* imports → Nord aurora yellow */
  --exercise-editor-hl-al:  #BF616A !important;  /* alerts/errors → Nord aurora red */
  --exercise-editor-hl-er:  #BF616A !important;  /* errors → Nord aurora red */
  --exercise-editor-hl-wa:  #D08770 !important;  /* warnings → Nord aurora orange */
  --exercise-editor-hl-pp:  #D08770 !important;  /* preprocessor → Nord aurora orange */
  --exercise-editor-hl-in:  #6C7A94 !important;  /* information → Nord polar-night lighter */
}

/* Header bar: teal "Run Code" / "Show Hint" action strip. */
.card.exercise-editor .card-header {
  background: var(--teal-mid);
  border-bottom: 1px solid var(--teal-mid);
  color: #FFFFFF;
}
.card.exercise-editor .card-header .btn.btn-outline-dark {
  --bs-btn-color: #FFFFFF;
  --bs-btn-border-color: rgba(255,255,255,0.5);
  --bs-btn-hover-bg: rgba(255,255,255,0.15);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-border-color: #FFFFFF;
}

/* Text cursor — Nord snow-storm, clearly visible against dark bg. */
.card.exercise-editor .cm-editor .cm-cursor,
.card.exercise-editor .cm-editor .cm-dropCursor {
  border-left-color: #ECEFF4 !important;
}

/* Selection — Nord frost blue at moderate alpha so highlighted text stays readable. */
.card.exercise-editor .cm-editor .cm-selectionBackground,
.card.exercise-editor .cm-editor .cm-focused .cm-selectionBackground,
.card.exercise-editor .cm-editor ::selection {
  background: rgba(94, 129, 172, 0.55) !important;
}

/* Soften plot edges — no background color (transparent PNGs show the
   page's --paper through directly), just rounded corners. */
div.cell-output-display img,
div.exercise-cell-output img {
  border-radius: var(--radius);
}

/* ── Table body size ──────────────────────────────────────── */
/* Applies to all three kinds of table the course emits:
     .gt_table   gt / gtsummary, built at render time by knitr
     table.table plain markdown tables (Quarto gives them Bootstrap's class)
     .cell-output-display table   webr tables written into the page at runtime
   gt scopes its own sizing through `#id .gt_*`, which outranks a plain class
   selector, so !important is required here for the same reason it is required
   for the background rules above. Cells inherit unless gt set them inline. */
table.gt_table,
table.gt_table .gt_row,
table.gt_table .gt_col_heading,
table.gt_table .gt_stub,
table.gt_table .gt_group_heading,
table.gt_table .gt_summary_row,
table.gt_table .gt_grand_summary_row,
table.gt_table .gt_footnote,
table.gt_table .gt_sourcenote,
table.table,
table.table th,
table.table td,
div.cell-output-display table {
  font-size: var(--table-font-size) !important;
}

/* Headings and captions stay proportional rather than shrinking to nothing. */
table.gt_table .gt_heading,
table.gt_table .gt_title {
  font-size: calc(var(--table-font-size) * 1.1) !important;
}

/* ── Center images, plots, and tables site-wide ──────────── */
div.cell-output-display,
.quarto-figure {
  text-align: center;
}
/* Plots (cell output), Quarto figures, AND plain markdown images. A bare
   ![](x.png) with no fig-align renders as <p><img class="img-fluid"> and would
   otherwise sit left — `p > img.img-fluid` centers those by default too. */
div.cell-output-display img,
.quarto-figure img,
p > img.img-fluid {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
div.cell-output-display table,
.quarto-figure table,
table.gt_table:not(div.exercise-cell-output table) {
  margin-left: auto;
  margin-right: auto;
}

/* gt footnotes / source notes carry no explicit text-align, so they inherit the
   `text-align: center` used above to center table/plot blocks. Restore gt's
   intended LEFT alignment (the table itself is still centered via margin: auto). */
.gt_footnotes,
.gt_footnote,
.gt_sourcenotes,
.gt_sourcenote {
  text-align: left;
}

/* ── WebR output: left-justify to mirror the RStudio console ── */
div.exercise-cell-output {
  text-align: left;
}
div.exercise-cell-output img {
  margin-left: 0;
  margin-right: auto;
  display: block;
}
div.exercise-cell-output table {
  margin-left: 0;
  margin-right: auto;
}


/* ── Student in-class input fields ─────────────────────────
   For whole-class moments where students type their own values
   directly on the page (no pen-and-paper required). Values are
   not persisted across sessions — meant for single-class use. */
.student-input {
  width: 100%;
  padding: 0.4em 0.6em;
  border: 1px solid #C5CAD2;
  border-radius: 4px;
  background-color: #FFFFFF;
  font-family: var(--font-sans, inherit);
  font-size: 0.95em;
  color: var(--midnight, #2E3440);
  box-sizing: border-box;
}
.student-input::placeholder {
  color: #9AA3B0;
  font-style: italic;
}
.student-input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(52, 140, 158, 0.2);
}
textarea.student-input {
  min-height: 3em;
  resize: vertical;
  font-family: var(--font-sans, inherit);
}

/* ── Allison Horst illustrations · blend white background ── */
/* mix-blend-mode: multiply makes pure-white pixels effectively */
/* transparent against the page background, while keeping the   */
/* colored line art and fills unchanged. Eliminates the visible */
/* square outline that appears when a white-background PNG sits */
/* on the page's off-white #FCFDFD body color.                  */
img.horst {
  mix-blend-mode: multiply;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-section { padding: 3.5rem 1.5rem 7rem; }
  .hero-title { font-size: 2.6rem !important; }
  .hero-stats { gap: 1.5rem; }
  .units-grid, .module-grid { grid-template-columns: 1fr; }
}

/* ── Project release gate ─────────────────────────────────── */
/* include/project-gate.js swaps a held-back project link for a span with     */
/* this class. Grey, non-underlined text reads as "a topic, not yet a link."  */
/* index.qmd carries a more specific rule for the schedule table, which wins  */
/* there. Delete nothing when the projects are released -- the script simply  */
/* stops creating these spans.                                               */
.locked-topic {
  color: #94a3b8;
  cursor: help;
}