/* ==========================================================
   MRP Course Design System
   Meditation Research Program — Massachusetts General
   Hospital / Harvard Medical School

   Scope rules
   -----------
   - Every class is namespaced `mrp-`. Nothing here styles
     bare elements outside `.mrp-course`, so the sheet is
     safe to enqueue site-wide in WordPress next to the
     existing `mrp` theme.
   - Design tokens live on :root with `--mrp-` prefixes.
     Components read tokens with baked-in fallbacks, so a
     single pattern pasted into any WP block renders
     correctly even outside a `.mrp-course` wrapper.
   - Interactive behavior (scrollspy, quizzes, footnotes,
     autosave) lives in mrp-course.js and hooks on
     data-mrp-* attributes only.
   ========================================================== */

/* ----------------------------------------------------------
   01 · Tokens
   ---------------------------------------------------------- */

:root {
  /* brand color */
  --mrp-navy: #003049;
  --mrp-navy-deep: #00243a;
  --mrp-blue: #669bbc;
  --mrp-blue-light: #d4eaf7;
  --mrp-sky: #eef5fb;
  --mrp-cream: #fdf0d5;
  /* the page ground — paper; cream is an accent */
  --mrp-page: #fafaf8;
  --mrp-gold: #c2a14f;
  --mrp-gold-dark: #a8893b;
  --mrp-gold-soft: #faf3e0;

  /* text + surface */
  --mrp-ink: #18191c;
  --mrp-ink-2: #3a3d42;
  --mrp-ink-3: #555860;
  --mrp-muted: #6b6e76;
  --mrp-line: #e4e2dd;
  --mrp-paper: #fafaf8;
  --mrp-bg-alt: #f2f0eb;

  /* feedback (kept muted, never alarm-red) */
  --mrp-ok: #3e6b4f;
  --mrp-ok-soft: #e9f0ea;
  --mrp-clay: #a2543f;
  --mrp-clay-soft: #f7e9e3;

  /* type */
  --mrp-sans: "TeXGyreHeros", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --mrp-serif: Georgia, "Times New Roman", serif;

  /* layout */
  --mrp-col: 700px;
  --mrp-map-w: 240px;
  --mrp-gap: 56px;
  --mrp-header-h: 64px;

  /* shape + depth */
  --mrp-radius: 10px;
  --mrp-radius-sm: 7px;
  --mrp-shadow:
    0 1px 2px rgba(0, 48, 73, 0.05),
    0 6px 22px rgba(0, 48, 73, 0.07);
  --mrp-shadow-pop:
    0 2px 6px rgba(0, 48, 73, 0.12),
    0 14px 34px rgba(0, 48, 73, 0.16);
}

/* header slides off via transform (see .mrp-header.is-hidden),
   so it stays in the layout — this var lets anything computing
   an offset from the header's height (e.g. .mrp-map's sticky
   top) collapse to 0 in step with it */
body.mrp-header-hidden {
  --mrp-header-h: 0px;
}

/* ----------------------------------------------------------
   02 · Brand font (self-hosted, from the mrp WP theme)
   ---------------------------------------------------------- */

@font-face {
  font-family: "TeXGyreHeros";
  src: url("fonts/TeXGyreHeros-Regular.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TeXGyreHeros";
  src: url("fonts/TeXGyreHeros-Italic.woff")
    format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "TeXGyreHeros";
  src: url("fonts/TeXGyreHeros-Bold.woff")
    format("woff");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TeXGyreHeros";
  src: url("fonts/texgyreheros-bolditalic.otf")
    format("opentype");
  font-weight: 700 900;
  font-style: italic;
  font-display: swap;
}

/* ----------------------------------------------------------
   03 · Page scope — reading defaults
   ---------------------------------------------------------- */

.mrp-course {
  margin: 0;
  font-family: var(--mrp-sans);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--mrp-ink, #18191c);
  background: var(--mrp-page, #fdf0d5);
  -webkit-font-smoothing: antialiased;
  /* the scroll-driven header hide/show and the sticky sidebar
     map both resize/reposition on scroll (via --mrp-header-h);
     browsers "fix" that self-inflicted shift by nudging
     window.scrollY, which re-triggers the scroll handler in
     the opposite direction — a feedback loop that shows up as
     the header rapidly flickering a few px up and down. Scroll
     position and progress are already fully JS-managed here,
     so the browser's auto-compensation has no upside. */
  overflow-anchor: none;
}

.mrp-course *,
.mrp-course *::before,
.mrp-course *::after {
  box-sizing: border-box;
}

.mrp-course p {
  margin: 0 0 1.15em;
  font-family: var(--mrp-serif);
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-lead {
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-course a {
  color: var(--mrp-navy, #003049);
  text-decoration: underline;
  text-decoration-color: var(--mrp-blue, #669bbc);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.mrp-course a:hover {
  color: var(--mrp-gold-dark, #a8893b);
  text-decoration-color: var(--mrp-gold, #c2a14f);
}

/* ----------------------------------------------------------
   04 · Headings
   H1 course title · H2 section · H3 sub-section ·
   H4 run-in · H5 kicker · H6 fine label
   ---------------------------------------------------------- */

.mrp-course h1,
.mrp-course h2,
.mrp-course h3,
.mrp-course h4 {
  font-family: var(--mrp-sans);
  color: var(--mrp-navy, #003049);
  margin: 0 0 0.5em;
}

.mrp-course h1 {
  font-size: clamp(1.85rem, 5vw, 3.1rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.mrp-course h2 {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}

.mrp-course h3 {
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 34px 0 12px;
}

.mrp-course h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mrp-ink-2, #3a3d42);
  margin-top: 1.8em;
}

/* Heading highlights — partial-height marker bar behind
   text, for calling out a phrase within h1/h2 titles */

.mrp-title-hl {
  position: relative;
  display: inline;
}

.mrp-title-hl::after {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  bottom: 2px;
  height: 38%;
  background: var(--mrp-blue-light, #d4eaf7);
  z-index: -1;
  border-radius: 2px;
}

.mrp-course h5,
.mrp-kicker,
.mrp-course .mrp-kicker {
  font-family: var(--mrp-sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mrp-gold-dark, #a8893b);
  margin: 2em 0 0.6em;
}

.mrp-course h6 {
  font-family: var(--mrp-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mrp-muted, #6b6e76);
  margin: 1.8em 0 0.5em;
}

/* Section head: kicker + title + short gold rule.
   The core wayfinding unit of a course page. */

.mrp-section-head {
  margin: 0 0 1.6rem;
}

.mrp-section-head .mrp-kicker {
  margin: 0 0 0.45rem;
}

.mrp-page-head .mrp-kicker {
  font-weight: 700;
  color: var(--mrp-muted, #6b6e76);
  margin: 0;
}

.mrp-hero-meta {
  display: flex;
  align-items: center;
  row-gap: 1rem;
  column-gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.mrp-class-badge {
  display: inline-block;
  padding: 0em 0.5em;
  border: 1.5px solid var(--mrp-navy, #003049);
  border-radius: 0;
  font-family: var(--mrp-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mrp-navy, #003049);
  white-space: nowrap;
}

/* Hero eyebrow: one uppercase line above the page title.
   Reusable across Classes 1-6 — only the numeral inside
   .mrp-eyebrow-class changes from page to page. */

.mrp-eyebrow,
.mrp-course .mrp-eyebrow {
  font-family: var(--mrp-sans);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mrp-navy, #003049);
  white-space: nowrap;
  margin: 0 0 1rem;
}

/* TeXGyreHeros ships 400 and 700 only, so semibold resolves
   to the bold cut. */
.mrp-eyebrow-course {
  font-weight: 700;
}

.mrp-eyebrow-class {
  font-weight: 400;
  color: var(--mrp-muted, #6b6e76);
  white-space: nowrap;
}

/* Narrow screens: let the line wrap rather than overflow, and
   ease the tracking so uppercase stays readable when small. */
@media (max-width: 600px) {
  .mrp-eyebrow,
  .mrp-course .mrp-eyebrow {
    white-space: normal;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }
}

.mrp-section-head h1,
.mrp-section-head h2 {
  width: fit-content;
  margin: 0;
}

.mrp-page-head h1 {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
}

.mrp-section-head--center {
  text-align: center;
}

.mrp-section-head--center h1,
.mrp-section-head--center h2 {
  margin-inline: auto;
}

/* ----------------------------------------------------------
   05 · Inline elements
   ---------------------------------------------------------- */

.mrp-course strong { font-family: var(--mrp-sans); font-size: 0.965em; font-weight: 700; }
.mrp-course em { font-style: italic; }

.mrp-course mark,
.mrp-hl {
  background:
    linear-gradient(transparent 55%,
      color-mix(in srgb,
        var(--mrp-gold, #c2a14f) 32%, #fff) 55%);
  color: inherit;
  padding: 0 0.1em;
}

.mrp-course del {
  color: var(--mrp-muted, #6b6e76);
  text-decoration-color: var(--mrp-clay, #a2543f);
}

.mrp-course code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
  background: var(--mrp-bg-alt, #f2f0eb);
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: 4px;
  padding: 0.08em 0.35em;
  color: var(--mrp-navy, #003049);
}

/* Key term — first introduction of vocabulary */

.mrp-term {
  position: relative;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  border-bottom: 2px dotted var(--mrp-gold, #c2a14f);
  cursor: help;
}

/* optional styled definition: give a term a
   .mrp-term-tip child (footnote-popover dress)
   and it opens on hover or keyboard focus */

.mrp-term-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: -2px;
  width: max-content;
  max-width: min(300px, 80vw);
  /* a long definition (a figure's full sourcing, say) would otherwise run off
     the bottom of the viewport with its last lines unreachable */
  max-height: min(50vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-top: 3px solid var(--mrp-gold, #c2a14f);
  border-radius: 7px;
  box-shadow: var(--mrp-shadow-pop);
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--mrp-ink-2, #3a3d42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.15s ease,
    transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
  z-index: 300;
}

.mrp-term-tip b {
  color: var(--mrp-navy, #003049);
}

.mrp-term:hover .mrp-term-tip,
.mrp-term:focus-visible .mrp-term-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Key term variant — thinner underline, hover color shift,
   directional (bottom-right) soft shadow, square corners,
   closeable popover */

.mrp-term--dir {
  border-bottom-width: 1.5px;
  cursor: help;
  transition: color 0.15s ease, border-bottom-color 0.15s ease;
}

.mrp-term--dir:hover,
.mrp-term--dir:focus-visible {
  color: var(--mrp-clay, #a2543f);
  border-bottom-color: var(--mrp-clay, #a2543f);
}

.mrp-term-tip--dir {
  top: calc(100% + 9px);
  bottom: auto;
  border-radius: 0;
  box-shadow: 4px 5px 12px rgba(0, 48, 73, 0.25);
  cursor: auto;
}

/* the tip nested in the term is only ever a template now —
   initTermPopovers() clones it into a detached, JS-positioned
   .mrp-term-pop on hover/click (see mrp-course.js), the same way
   footnotes work. Cancel the base hover/focus reveal so this
   original copy never shows in place. */

.mrp-term:hover .mrp-term-tip--dir,
.mrp-term:focus-visible .mrp-term-tip--dir {
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
}

/* the detached popover clone — always visible while it exists,
   since JS adds/removes it rather than toggling a class */

.mrp-term-pop {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  animation: mrp-pop-in 0.16s ease-out;
}

/* slightly smaller, darker shadow than the base --dir popup */

.mrp-term-tip--dir-alt {
  font-family: var(--mrp-sans);
  box-shadow: 3px 4px 9px rgba(0, 0, 0, 0.4);
}

/* Inline citation (Author, year) */

.mrp-cite {
  color: var(--mrp-ink-3, #555860);
  font-size: 0.92em;
}

/* ----------------------------------------------------------
   06 · Lists
   ---------------------------------------------------------- */

.mrp-course ul,
.mrp-course ol {
  margin: 0 0 1.15em;
  padding-left: 1.5em;
}

/* plain body lists read as prose, so they take the
   serif like paragraphs — but not lists that are
   really UI components (syllabus, checklist) or
   sit inside a table cell */

.mrp-main section[data-mrp-region] > ul:not([class]),
.mrp-main section[data-mrp-region] > ol:not([class]) {
  font-family: var(--mrp-serif);
}

.mrp-course li {
  margin: 0 0 0.45em;
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-course ul > li::marker {
  color: var(--mrp-gold, #c2a14f);
}

/* numbers read as part of the sentence they head, so they take the item's own
   body ink rather than the gold the bullets carry */

.mrp-course ol > li::marker {
  color: var(--mrp-ink-2, #3a3d42);
  font-weight: 700;
  font-size: 0.92em;
}

/* Practice checklist */

.mrp-checklist {
  list-style: none;
  padding-left: 0;
}

.mrp-checklist li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.6em;
}

.mrp-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid var(--mrp-blue, #669bbc);
  border-radius: 4px;
  background: #fff;
}

.mrp-checklist li.is-done::before {
  background: var(--mrp-navy, #003049);
  border-color: var(--mrp-navy, #003049);
}

.mrp-checklist li.is-done::after {
  content: "";
  position: absolute;
  left: 0.28em;
  top: 0.42em;
  width: 0.5em;
  height: 0.28em;
  border-left: 2px solid var(--mrp-cream, #fdf0d5);
  border-bottom: 2px solid var(--mrp-cream, #fdf0d5);
  transform: rotate(-45deg);
}

.mrp-checklist li.is-done {
  color: var(--mrp-muted, #6b6e76);
}

/* Definition list — key terms block */

.mrp-terms {
  margin: 1.6em 0;
  border-top: 1px solid var(--mrp-navy, #003049);
}

.mrp-terms dt {
  font-weight: 700;
  color: var(--mrp-navy, #003049);
  padding-top: 0.85em;
}

.mrp-terms dd {
  margin: 0.15em 0 0.85em;
  padding-bottom: 0.85em;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
  color: var(--mrp-ink-2, #3a3d42);
}

/* ----------------------------------------------------------
   07 · Quotes
   ---------------------------------------------------------- */

.mrp-course blockquote {
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 1.4em;
  border-left: 3px solid var(--mrp-gold, #c2a14f);
  color: var(--mrp-ink-2, #3a3d42);
  font-style: italic;
}

.mrp-course blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-style: normal;
  font-size: 0.88rem;
  color: var(--mrp-muted, #6b6e76);
}

.mrp-pullquote {
  margin: 2.4em 0;
  padding: 0 1em;
  text-align: center;
  font-family: var(--mrp-serif);
  font-size: 1.45rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--mrp-navy, #003049);
}

/* short gold hairlines above and below — no quote
   mark; the rules set the passage apart without
   spanning the measure */

.mrp-pullquote::before,
.mrp-pullquote::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto;
  border-radius: 1px;
  background:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 55%,
      transparent);
}

.mrp-pullquote::before {
  margin-bottom: 1.1em;
}

.mrp-pullquote::after {
  margin-top: 1.1em;
}

.mrp-pullquote cite {
  display: block;
  margin-top: 0.7em;
  font-family: var(--mrp-sans);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mrp-gold-dark, #a8893b);
}

/* Voice — a portrait beside a quotation: the
   teacher, the researcher, the practitioner whose
   words open a section. The quote takes the
   pullquote's treatment (serif italic between two
   short gold hairlines) but sets left, since it
   has a face to sit beside. Source goes in a
   footnote so the attribution line stays a name,
   not a citation. */

.mrp-voice {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 32px;
  align-items: center;
  margin: 2.6em 0;
}

.mrp-voice-portrait {
  margin: 0;
}

.mrp-voice-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mrp-radius, 10px);
  border: 1px solid var(--mrp-line, #e4e2dd);
  box-shadow: var(--mrp-shadow);
}

.mrp-voice-quote,
.mrp-course .mrp-voice-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  color: inherit;
}

.mrp-voice-quote::before,
.mrp-voice-quote::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  border-radius: 1px;
  background:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 55%,
      transparent);
}

.mrp-voice-quote::before {
  margin-bottom: 1em;
}

.mrp-voice-quote::after {
  margin-top: 1em;
}

.mrp-voice-quote p,
.mrp-course .mrp-voice-quote p {
  margin: 0;
  font-family: var(--mrp-serif);
  font-size: 1.3rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--mrp-navy, #003049);
}

/* the source marker is a reference, not part of
   the quotation: keep it small and upright even
   inside the serif italic */

.mrp-voice-quote .mrp-fn-ref sup {
  font-family: var(--mrp-sans);
  font-style: normal;
  font-size: 0.46em;
}

/* a name, so sentence case — never forced caps */

.mrp-voice-quote cite,
.mrp-course .mrp-voice-quote cite {
  display: block;
  margin-top: 0.85em;
  font-family: var(--mrp-sans);
  font-style: normal;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--mrp-gold-dark, #a8893b);
}

.mrp-voice-quote cite b {
  font-weight: 700;
}

@media (max-width: 640px) {
  .mrp-voice {
    grid-template-columns: 1fr;
    gap: 22px;
    justify-items: start;
  }
  .mrp-voice-portrait {
    width: min(60%, 180px);
  }
}

/* ----------------------------------------------------------
   08 · Tables
   ---------------------------------------------------------- */

.mrp-table-scroll {
  overflow-x: auto;
  margin: 1.8em 0;
}

.mrp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}

.mrp-table caption {
  caption-side: bottom;
  text-align: left;
  padding-top: 0.7em;
  font-size: 0.85rem;
  color: var(--mrp-muted, #6b6e76);
}

.mrp-table th {
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mrp-navy, #003049);
  text-align: left;
  padding: 0.6em 0.9em;
  border-bottom: 1px solid var(--mrp-navy, #003049);
}

.mrp-table td {
  padding: 0.65em 0.9em;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
  vertical-align: top;
}

/* Row-label cells: semantic <th scope="row">, but read as body
   text rather than picking up the uppercase column-header
   treatment (and its navy rule on every row). */

.mrp-table tbody th {
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.65em 0.9em;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
  vertical-align: top;
}

/* Two-tier header: a spanning group label above the column
   headers, so only one navy rule lands under the header block. */

.mrp-table th.mrp-table-group {
  text-align: center;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-table th.mrp-table-group--blank {
  border-bottom: none;
}

/* Plain-language gloss under a column or row label: keeps the
   label itself short and scannable while saying, in ordinary
   words, what the term means. */

.mrp-table .mrp-table-sub {
  display: block;
  margin-top: 0.4em;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mrp-muted, #6b6e76);
}

.mrp-table thead .mrp-table-sub {
  font-size: 0.78rem;
}

/* Everyday example under a cell's headline term — quiet enough
   that the terms still carry the grid at a glance. */

.mrp-table .mrp-cell-note {
  display: block;
  margin-top: 0.4em;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--mrp-muted, #6b6e76);
}

/* Roomier rows, for tables whose cells carry a sentence rather
   than a value. */

.mrp-table--roomy th,
.mrp-table--roomy td {
  padding-top: 0.95em;
  padding-bottom: 0.95em;
}

/* Hold the row-label column wide enough that the labels do not
   break mid-phrase, and let the whole table scroll rather than
   squeeze into unreadable columns on a phone. */

.mrp-table--roomy {
  min-width: 34rem;
}

.mrp-table--roomy tr > *:first-child {
  width: 26%;
}

.mrp-table tbody tr:hover td,
.mrp-table tbody tr:hover th {
  background: var(--mrp-sky, #eef5fb);
}

/* Ruled columns, for a cross-tabulation. A list-style
   table needs no verticals — the eye reads down one
   column at a time and the row rules are enough. A
   2×2 is read both ways at once, so the columns get
   their own hairlines, in the quiet line grey rather
   than the navy that closes the header: the grid is
   scaffolding, not an emphasis. Every cell after the
   first in its row takes a left rule, which leaves
   the spanning group header correctly unruled across
   the columns it covers. */

.mrp-table--ruled tr > * + * {
  border-left: 1px solid var(--mrp-line, #e4e2dd);
}

/* A table's own <caption> takes the same voice as a
   figure's figcaption: a run-in that states the
   point, then the credit. The figure rules cannot be
   reused directly — they are scoped to .mrp-figure
   figcaption — so the two that matter are restated
   here rather than the whole caption treatment. */

.mrp-table caption b.mrp-caption-title {
  color: var(--mrp-navy, #003049);
  font-weight: 700;
}

.mrp-table caption .mrp-credit {
  display: block;
  margin-top: 0.25em;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--mrp-muted, #6b6e76);
}

.mrp-table caption .mrp-credit--inline {
  display: inline;
  margin-top: 0;
  margin-left: 0.3em;
}

.mrp-table caption .mrp-credit .mrp-term {
  border-bottom: 1px dotted
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 55%, transparent);
}

/* Contrast card: Ordinary vs. deliberate practice, by
   domain. A card (not a bare table) so the Ordinary/
   Deliberate column headers can carry solid clay/ok-green
   fills with white text, and the row-label column reads
   as a soft warm rail rather than the sky/navy treatment
   used elsewhere. No caption and no card title — the
   surrounding prose already frames the comparison. */

.mrp-contrast-card {
  background: var(--mrp-paper, #fafaf8);
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: var(--mrp-radius, 10px);
  overflow: hidden;
  box-shadow: var(--mrp-shadow);
  margin: 1.8em 0;
}

.mrp-contrast-card-table {
  display: grid;
  row-gap: 10px;
  padding: 18px;
}

.mrp-contrast-card-row {
  display: grid;
  grid-template-columns: minmax(88px, 150px) 1fr 1fr;
  column-gap: 10px;
  row-gap: 10px;
  align-items: stretch;
}

.mrp-contrast-card-head,
.mrp-contrast-card-label,
.mrp-contrast-card-body {
  border-radius: var(--mrp-radius-sm, 7px);
  overflow-wrap: break-word;
}

.mrp-contrast-card-head {
  padding: 11px 8px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.3;
}

.mrp-contrast-card-head--ordinary { background: var(--mrp-clay, #a2543f); }
.mrp-contrast-card-head--deliberate { background: var(--mrp-ok, #3e6b4f); }

/* Aliases for the same two-tone treatment, named for the other contrast this
   card is used for: wholesome vs unwholesome motivation. Same colours, but the
   markup does not have to claim a row is about "deliberate practice" when it
   is not. */
.mrp-contrast-card-head--wholesome { background: var(--mrp-ok, #3e6b4f); }
.mrp-contrast-card-head--unwholesome { background: var(--mrp-clay, #a2543f); }

.mrp-contrast-card-label {
  background: #faf4e5;
  color: var(--mrp-navy, #003049);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  display: flex;
  align-items: center;
  padding: 12px 14px;
}

.mrp-contrast-card-body {
  border: 1px solid var(--mrp-line, #e4e2dd);
  background: #fdfdfe;
  padding: 13px 16px;
  font-size: 0.97rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* All four columns read at full ink. Muting one side made it look like the
   afterthought before a reader had read a word of it — but "ordinary" and
   "unwholesome" are the halves of the contrast that need reading most
   carefully. The header pills carry the distinction on their own. */
.mrp-contrast-card-body--ordinary,
.mrp-contrast-card-body--deliberate,
.mrp-contrast-card-body--wholesome,
.mrp-contrast-card-body--unwholesome { color: var(--mrp-ink, #18191c); }

.mrp-contrast-card-body ul {
  margin: 0;
  padding-left: 1.1em;
}

.mrp-contrast-card-body li {
  margin-bottom: 0.35em;
}

.mrp-contrast-card-body li:last-child {
  margin-bottom: 0;
}

/* column name inside each cell: screen-reader-only while
   the header pills are visible, revealed once the row
   stacks on narrow screens */

.mrp-contrast-card-tag {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .mrp-contrast-card-row {
    grid-template-columns: 1fr;
  }
  .mrp-contrast-card-row--head {
    display: none;
  }
  .mrp-contrast-card-tag {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0.45em;
    clip: auto;
    overflow: visible;
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mrp-clay, #a2543f);
  }
  .mrp-contrast-card-body--deliberate .mrp-contrast-card-tag,
  .mrp-contrast-card-body--wholesome .mrp-contrast-card-tag {
    color: var(--mrp-ok, #3e6b4f);
  }
}

/* ----------------------------------------------------------
   09 · Figures, captions, and figure callouts
   ---------------------------------------------------------- */

/* Figures are never numbered. A caption opens with
   its key phrase in gold — the caption's own
   headline — and continues in plain text. */

/* figures sit in the prose column on the same rhythm as the
   paragraphs around them — matches the 1.15em of .mrp-course p
   above, so a figure reads as one more block in the flow rather
   than a break in it. The floated variants below keep their own
   tighter margins. */

/* and they clear. A full-measure figure cannot share a
   line with a floated portrait: its image or SVG is 100%
   wide, so instead of moving below the float it slides
   under it and renders at whatever width is left beside
   it — a chart squeezed into 60% of the column with no
   visible reason why. The floated variants already clear
   for the same reason; this puts every figure on the
   same footing. A figure that IS meant to sit beside the
   prose uses --inset-left/right, which floats. */

.mrp-figure {
  margin: 1.15em 0;
  clear: both;
}

.mrp-figure img,
.mrp-figure svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mrp-radius, 10px);
}

.mrp-figure figcaption {
  margin-top: 0.75em;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--mrp-ink-3, #555860);
  border-left: 2px solid var(--mrp-gold, #c2a14f);
  padding-left: 0.85em;
}

/* the highlight: run-in key text, in gold */

.mrp-figure figcaption b,
.mrp-figure figcaption strong,
.mrp-caption-key {
  color: var(--mrp-gold-dark, #a8893b);
  font-weight: 700;
}

/* when the run-in IS the chart's title (the chart has
   no title above it), it wears the heading navy rather
   than the gold used for an ordinary caption highlight,
   so it reads as the chart's name and sits in the same
   voice as the h2/h3 above it */

.mrp-figure figcaption b.mrp-caption-title {
  color: var(--mrp-navy, #003049);
}

/* for a figure whose chart title above the graphic has been removed: the
   caption lead-in becomes the figure's only heading, so it takes the chart
   title's blue rather than the darker caption navy */

.mrp-figure figcaption b.mrp-caption-title--blue {
  color:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 65%,
      var(--mrp-navy, #003049));
}

.mrp-figure figcaption .mrp-credit {
  display: block;
  margin-top: 0.25em;
  font-size: 0.78rem;
  color: var(--mrp-muted, #6b6e76);
  font-style: italic;
}

/* Variant: runs on from the caption sentence instead of dropping to its own
   line — for a caption short enough that a separate credit line reads as an
   orphan */

.mrp-figure figcaption .mrp-credit--inline {
  display: inline;
  margin-top: 0;
  margin-left: 0.3em;
}

/* the credit's tooltip link keeps the dotted underline that marks it
   as one, but thinner and fainter than an in-text term: it should be
   findable, not the first thing the caption shows */

.mrp-figure figcaption .mrp-credit .mrp-term {
  border-bottom: 1px dotted
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 55%, transparent);
}

/* Variant: framed — white mat + border + shadow, for
   diagrams and plates (the infographic treatment) */

.mrp-figure--framed img,
.mrp-figure--framed svg,
.mrp-figure--framed .mrp-plate {
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  padding: 14px;
  box-shadow: var(--mrp-shadow);
}

/* Variant: medium — an image that earns its place in
   the flow but not the whole measure. Centred at a
   little under two thirds. Clearing comes from the
   base .mrp-figure. */

.mrp-figure--medium {
  width: min(62%, 420px);
  margin: 1.6em auto;
}

/* Variant: portrait — people and sketches. Centered,
   the name in gold, role after it */

.mrp-figure--portrait {
  float: right;
  clear: both;
  width: min(40%, 260px);
  margin: 0.4em 0 1em 1.6em;
}

.mrp-figure--portrait.mrp-figure--left {
  float: left;
  margin: 0.4em 1.6em 1em 0;
}

.mrp-figure--portrait img {
  border: 1px solid var(--mrp-line, #e4e2dd);
  box-shadow: var(--mrp-shadow);
}

/* the caption is the standard one — gold left
   rule, left aligned, name in gold — so a portrait
   sits in the same voice as the photographs
   around it */

/* Variant: wide — kept for compatibility. Nothing
   in the system leaves the text column: a "wide"
   figure is simply the full reading measure. */

.mrp-figure--wide {
  width: 100%;
}

/* Variant: inset — floated small figure in the prose */

.mrp-figure--inset-right,
.mrp-figure--inset-left {
  width: min(46%, 300px);
  margin-top: 0.4em;
  margin-bottom: 1em;
  /* consecutive insets stack instead of pinching
     the prose between two floats */
  clear: both;
}

.mrp-figure--inset-right {
  float: right;
  margin-left: 1.6em;
}

.mrp-figure--inset-left {
  float: left;
  margin-right: 1.6em;
}

/* Two-up comparison grid */

.mrp-figure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 2.2em 0;
}

.mrp-figure-grid .mrp-figure {
  margin: 0;
}

@media (max-width: 640px) {
  .mrp-figure-grid {
    grid-template-columns: 1fr;
  }
  .mrp-figure--inset-right,
  .mrp-figure--inset-left {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  /* the --left variant is a two-class selector, so it
     outranks a single-class rule here and would keep
     its float; it has to be named explicitly to be
     unfloated with the rest */
  .mrp-figure--portrait,
  .mrp-figure--portrait.mrp-figure--left {
    float: none;
    width: min(78%, 320px);
    margin: 0.4em auto 1em;
  }
}

/* Inline figure reference — names the figure
   instead of numbering it: "the relaxation
   spectrum below" */

.mrp-figref {
  color: var(--mrp-gold-dark, #a8893b) !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 50%,
      transparent);
  transition: background 0.12s,
    border-color 0.12s;
}

.mrp-figref:hover {
  border-bottom-color: var(--mrp-gold, #c2a14f);
  background: var(--mrp-gold-soft, #faf3e0);
}

/* Figure callout — a block that points the reader at a
   figure and says why it matters */

.mrp-fig-callout {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  align-items: center;
  margin: 1.8em 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-left: 3px solid var(--mrp-gold, #c2a14f);
  border-radius: var(--mrp-radius-sm, 7px);
  box-shadow: var(--mrp-shadow);
}

.mrp-fig-callout img,
.mrp-fig-callout svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-fig-callout p {
  margin: 0.3em 0 0;
  font-size: 0.95rem;
  color: var(--mrp-ink-2, #3a3d42);
}

@media (max-width: 560px) {
  .mrp-fig-callout {
    grid-template-columns: 1fr;
  }
}

/* Target highlight when a figref is followed */

.mrp-figure:target {
  animation: mrp-fig-flash 1.6s ease-out 1;
}

@keyframes mrp-fig-flash {
  0%, 45% {
    outline: 3px solid var(--mrp-gold, #c2a14f);
    outline-offset: 6px;
  }
  100% {
    outline: 3px solid transparent;
    outline-offset: 6px;
  }
}

/* ----------------------------------------------------------
   10 · Media — video and guided-audio
   ---------------------------------------------------------- */

.mrp-video {
  margin: 2.2em 0;
  border-radius: var(--mrp-radius, 10px);
  overflow: hidden;
  background: var(--mrp-navy-deep, #00243a);
  box-shadow: var(--mrp-shadow);
}

/* No forced aspect-ratio here: width:100% + height:auto lets each
   iframe/video size itself from its own intrinsic width/height
   (attributes on <iframe>, decoded metadata or poster on <video>),
   so the frame always matches the actual embed instead of a
   guessed ratio. */
.mrp-video iframe,
.mrp-video video {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

.mrp-audio {
  margin: 1.8em 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: var(--mrp-radius, 10px);
  box-shadow: var(--mrp-shadow);
}

.mrp-audio-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mrp-audio-title {
  font-weight: 700;
  color: var(--mrp-navy, #003049);
}

.mrp-audio-title::before {
  content: "▸ ";
  color: var(--mrp-gold, #c2a14f);
}

.mrp-audio-len {
  font-size: 0.8rem;
  color: var(--mrp-muted, #6b6e76);
  white-space: nowrap;
}

.mrp-audio audio {
  width: 100%;
  display: block;
}

/* ----------------------------------------------------------
   11 · Callouts
   ---------------------------------------------------------- */

.mrp-callout {
  margin: 1.8em 0;
  padding: 18px 20px 14px;
  border-radius: var(--mrp-radius-sm, 7px);
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-left-width: 3px;
  background: #fff;
}

.mrp-callout-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.55em;
}

.mrp-callout p,
.mrp-course .mrp-callout p {
  font-family: var(--mrp-sans);
  margin: 0 0 0.6em;
}

.mrp-callout p:last-child {
  margin-bottom: 0.2em;
}

/* Key study — evidence on the record (white) */

.mrp-callout--study {
  border-left-color: var(--mrp-navy, #003049);
}

.mrp-callout--study .mrp-callout-label {
  color: var(--mrp-navy, #003049);
}

/* Key point — the one-sentence takeaway (gold) */

.mrp-callout--point {
  border-left-color: var(--mrp-gold, #c2a14f);
  background: var(--mrp-gold-soft, #faf3e0);
}

.mrp-callout--point .mrp-callout-label {
  color: var(--mrp-gold-dark, #a8893b);
}

/* Definition — a term fixed precisely (blue) */

.mrp-callout--definition {
  border-left-color: var(--mrp-blue, #669bbc);
  background: var(--mrp-sky, #eef5fb);
}

.mrp-callout--definition .mrp-callout-label {
  color: var(--mrp-navy, #003049);
}

.mrp-callout--definition b {
  color: var(--mrp-navy, #003049);
}

/* register accents as custom props, consumed by
   the alternative dresses below */

.mrp-callout--study {
  --co-rule: var(--mrp-navy, #003049);
  --co-label: var(--mrp-navy, #003049);
}

.mrp-callout--point {
  --co-rule: var(--mrp-gold, #c2a14f);
  --co-label: var(--mrp-gold-dark, #a8893b);
}

.mrp-callout--definition {
  --co-rule: var(--mrp-blue, #669bbc);
  --co-label: color-mix(in srgb,
    var(--mrp-blue, #669bbc) 65%,
    var(--mrp-navy, #003049));
}

/* Treatment B (draft): no box — a set-off passage
   between two short rules, the pullquote's grammar
   in sans with a caps label. Register color lives
   only in the rules and the label. */

.mrp-callout--bare,
.mrp-course .mrp-callout--bare {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.mrp-callout--bare.mrp-callout--point,
.mrp-callout--bare.mrp-callout--definition {
  background: transparent;
}

.mrp-callout--bare::before,
.mrp-callout--bare::after {
  content: "";
  display: block;
  width: 56px;
  height: 1.5px;
  background: color-mix(in srgb, var(--co-rule) 70%,
    transparent);
}

.mrp-callout--bare::before {
  margin-bottom: 1em;
}

.mrp-callout--bare::after {
  margin-top: 1.1em;
}

.mrp-callout--bare .mrp-callout-label {
  color: var(--co-label);
}

/* Treatment C (draft): the footnote popover's
   dress in the text column — neutral hairline
   frame, register-colored top rule, whisper
   grounds */

.mrp-callout--pop,
.mrp-course .mrp-callout--pop {
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-top: 3px solid var(--co-rule);
  border-radius: 7px;
  background: #fff;
  padding: 16px 20px 14px;
}

.mrp-callout--pop.mrp-callout--point {
  background: color-mix(in srgb,
    var(--mrp-gold-soft, #faf3e0) 45%, #fff);
}

.mrp-callout--pop.mrp-callout--definition {
  background: color-mix(in srgb,
    var(--mrp-sky, #eef5fb) 55%, #fff);
}

.mrp-callout--pop .mrp-callout-label {
  color: var(--co-label);
}

/* Key figure — one statistic lifted out of the
   prose and floated beside it: a navy numeral over
   a gold hairline, the claim beneath, the source
   under that. Use it when a number is the point of
   the paragraph; the sentence should still read
   whole without it. */

.mrp-stat {
  width: min(44%, 232px);
  margin: 0.4em 0 1.1em;
}

.mrp-stat--right {
  float: right;
  clear: right;
  margin-left: 1.9em;
}

.mrp-stat--left {
  float: left;
  clear: left;
  margin-right: 1.9em;
}

.mrp-stat-num,
.mrp-course .mrp-stat-num {
  font-family: var(--mrp-sans);
  font-size: 2.9rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mrp-navy, #003049);
  margin: 0;
  padding-bottom: 0.22em;
  border-bottom: 1px solid
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 55%,
      transparent);
}

.mrp-stat-label,
.mrp-course .mrp-stat-label {
  margin: 0.65em 0 0;
  font-family: var(--mrp-sans);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--mrp-ink-2, #3a3d42);
}

/* the source is a footnote on the claim, not a
   line of its own — keep the marker small and
   upright */

.mrp-stat-label .mrp-fn-ref sup {
  font-size: 0.62em;
}

@media (max-width: 640px) {
  .mrp-stat--right,
  .mrp-stat--left {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ----------------------------------------------------------
   12 · Cards and numbered grids
   ---------------------------------------------------------- */

.mrp-cards {
  display: grid;
  gap: 18px;
  margin: 2em 0;
}

.mrp-cards--2 { grid-template-columns: repeat(2, 1fr); }
.mrp-cards--3 { grid-template-columns: repeat(3, 1fr); }
.mrp-cards--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .mrp-cards--3,
  .mrp-cards--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .mrp-cards--2,
  .mrp-cards--3,
  .mrp-cards--4 {
    grid-template-columns: 1fr;
  }
}

.mrp-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: var(--mrp-radius, 10px);
  padding: 20px 20px 16px;
  box-shadow: var(--mrp-shadow);
  transition: background 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease;
}

/* same "warms and lifts" answer as .mrp-skill-col, so a card behaves the same
   way wherever it appears */

.mrp-card:hover {
  background: #fffdf7;
  border-color:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 38%,
      var(--mrp-line, #e4e2dd));
  box-shadow: var(--mrp-shadow-pop);
}

@media (prefers-reduced-motion: reduce) {
  .mrp-card { transition: none; }
}

/* a shared title above a card group, so the cards read as one labelled set
   rather than three loose panels */

/* scoped to .mrp-course so it outranks the `.mrp-course p` base rule, which
   would otherwise reset this to serif body ink */

.mrp-course .mrp-cards-head {
  margin: 2em 0 0.9em;
  font-family: var(--mrp-sans);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 65%,
      var(--mrp-navy, #003049));
}

.mrp-cards-head + .mrp-cards { margin-top: 0; }


.mrp-card-num {
  font-family: var(--mrp-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mrp-gold-dark, #a8893b);
  margin-bottom: 0.35em;
}

.mrp-card-title {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--mrp-navy, #003049);
  margin: 0 0 0.5em;
}

.mrp-card p,
.mrp-course .mrp-card p {
  font-family: var(--mrp-sans);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--mrp-ink-2, #3a3d42);
  margin: 0 0 0.6em;
}

.mrp-card ul {
  /* explicit disc: inside the spectrum's ol the
     browser would otherwise demote these to
     hollow "nested" circles */
  list-style: disc;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--mrp-ink-2, #3a3d42);
  padding-left: 1.2em;
  margin: 0;
}

.mrp-card li {
  margin-bottom: 0.4em;
}

.mrp-card--active {
  border-color: var(--mrp-gold, #c2a14f);
  background: #fffdf6;
  box-shadow:
    0 0 0 1px var(--mrp-gold, #c2a14f),
    var(--mrp-shadow-pop);
}

/* Near-enemy grid — an alternative to the spectrum
   axis for near-enemy sets that don't read as a
   strict order. Cards sit under a labeled band,
   resolving to a second band and the highlighted
   target card. Row placement is left to grid
   auto-flow so the 2-col → 1-col breakpoint just
   works without renumbering rows. */

/* The "Genuine skill" band sits one row-gap below the cards above it. The
   "Near enemies" band heads the grid, so its gap comes from the figure's top
   margin instead — same number, driven from one variable so the two cannot
   drift apart and leave the two bands sitting at different heights. */

.mrp-figure:has(> .mrp-enemy-grid) {
  --enemy-row-gap: 14px;
  /* The paragraph above contributes its own 1.15em bottom margin, and adjacent
     margins collapse to the larger of the two — so any smaller positive value
     here is simply ignored. Subtracting that 1.15em makes the collapsed result
     land exactly on the row gap. */
  margin-top: calc(var(--enemy-row-gap) - 1.15em);
}

.mrp-enemy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--enemy-row-gap, 14px) 18px;
  /* top margin lives on the figure above, so the band's gap survives margin
     collapsing instead of the larger of the two winning */
  margin: 0 0 2em;
}

@media (max-width: 560px) {
  .mrp-enemy-grid {
    grid-template-columns: 1fr;
  }
}

/* The two band labels head the columns of cards below them, so they are sized
   off .mrp-card-title (1.06rem) rather than set independently: 1.06 x 1.35,
   then trimmed 20% -- landing a little above the card titles rather than well
   above them. Mixed case, so the caps tracking comes off with the caps. */

.mrp-enemy-band {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--mrp-sans);
  font-size: 1.145rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.mrp-enemy-band--enemies {
  color: var(--mrp-clay, #a2543f);
}

.mrp-enemy-band--target {
  color: var(--mrp-ok, #3e6b4f);
}

.mrp-enemy-grid .mrp-card--active {
  grid-column: 1 / -1;
}

/* An odd card count leaves a hole in the last row of near enemies. Marking that
   card --full lets it span both columns instead, so the row reads as finished. */

.mrp-enemy-grid .mrp-card--full {
  grid-column: 1 / -1;
}


/* ----------------------------------------------------------
   13 · Nodes, spectrum, and wave timeline
   The numbered-circle motif is shared by the spectrum
   figure, the wave timeline, and the course map.
   ---------------------------------------------------------- */

.mrp-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  background: #fff;
  border: 2px solid var(--mrp-blue, #669bbc);
  color: var(--mrp-blue, #669bbc);
  flex: none;
}

.mrp-node--current {
  border-color: var(--mrp-gold, #c2a14f);
  color: var(--mrp-gold-dark, #a8893b);
  background: #fff;
  box-shadow:
    0 0 0 4px
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 25%,
      transparent);
}

.mrp-node--done {
  background: var(--mrp-navy, #003049);
  border-color: var(--mrp-navy, #003049);
  color: var(--mrp-cream, #fdf0d5);
}

/* Spectrum — a vertical axis from too little to
   too much of a quality, one station card per
   point, a dotted leader tying each card to the
   line. The dots carry no numbers: this is a
   gradient, not a sequence — hollow at the faint
   pole, filling to solid navy at the heavy pole,
   with a gold ring on the skillful point.
   Inherently vertical; no breakpoint needed. */

.mrp-spectrum {
  --sp-rail: 26px;
  --sp-gutter: 64px;
  max-width: 480px;
  margin: 2.4em auto;
}

/* Pole labels — the axis's organizing idea, so
   they speak at display size: sentence case,
   Regular weight, navy, larger than the card
   titles they preside over. No caps. */

.mrp-spectrum-pole,
.mrp-course .mrp-spectrum-pole {
  position: relative;
  font-family: var(--mrp-sans);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--mrp-navy, #003049);
}

.mrp-spectrum-pole--top,
.mrp-course .mrp-spectrum-pole--top {
  margin: 0 0 30px;
}

.mrp-spectrum-pole--bottom,
.mrp-course .mrp-spectrum-pole--bottom {
  margin: 30px 0 0;
}

/* arrowheads: open chevrons drawn at the same
   2px weight as the line, so the axis ends the
   way it travels */

.mrp-spectrum-pole--top::after,
.mrp-spectrum-pole--bottom::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-rail) - 4.5px);
  width: 9px;
  height: 9px;
}

.mrp-spectrum-pole--top::after {
  bottom: -16px;
  border-left: 2px solid
    color-mix(in srgb, var(--mrp-blue, #669bbc) 70%,
      var(--mrp-page, #fafaf8));
  border-top: 2px solid
    color-mix(in srgb, var(--mrp-blue, #669bbc) 70%,
      var(--mrp-page, #fafaf8));
  transform: rotate(45deg);
}

.mrp-spectrum-pole--bottom::before {
  top: -16px;
  border-left: 2px solid var(--mrp-navy, #003049);
  border-top: 2px solid var(--mrp-navy, #003049);
  transform: rotate(225deg);
}

.mrp-spectrum-stations,
.mrp-course .mrp-spectrum-stations {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--sp-gutter);
  display: grid;
  gap: 16px;
}

/* the axis line: faint where the quality is
   absent, solid navy where it is heavy */

.mrp-spectrum-stations::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-rail) - 1px);
  top: -25px;
  bottom: -25px;
  width: 2px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,
        var(--mrp-blue, #669bbc) 50%,
        var(--mrp-page, #fafaf8)),
      var(--mrp-blue, #669bbc) 45%,
      var(--mrp-navy, #003049));
}

.mrp-spectrum-station,
.mrp-course .mrp-spectrum-station {
  position: relative;
  margin: 0;
}

/* dotted leader from the axis to the card */

.mrp-spectrum-station::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--sp-rail) - var(--sp-gutter)
    + 12px);
  width:
    calc(var(--sp-gutter) - var(--sp-rail) - 18px);
  border-top: 2px dotted
    color-mix(in srgb, var(--mrp-blue, #669bbc) 55%,
      transparent);
}

.mrp-spectrum-dot {
  position: absolute;
  top: 50%;
  left: calc(var(--sp-rail) - var(--sp-gutter)
    - 8px);
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mrp-page, #fafaf8);
  border: 2px solid var(--mrp-blue, #669bbc);
}

/* the skillful point: solid gold, with the halo */

.mrp-spectrum-dot--target {
  background: var(--mrp-gold, #c2a14f);
  border-color: var(--mrp-gold, #c2a14f);
  box-shadow:
    0 0 0 4px
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 25%,
      transparent);
}

/* Near-enemy modes — the four ways a skill goes
   wrong, as small line icons with hover tooltips.
   Icons classify; the legend defines. */

.mrp-modes {
  display: flex;
  gap: 6px;
  flex: none;
}

.mrp-mode {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: help;
}

.mrp-mode svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* one chip for every failure mode, in the clay that
   marks the unwholesome everywhere else in the course
   — the icon shape differentiates, the colour says
   which side of the ledger these live on */

.mrp-mode--craving,
.mrp-mode--aversion,
.mrp-mode--contact,
.mrp-mode--confusion {
  color: var(--mrp-clay, #a2543f);
  background:
    color-mix(in srgb, var(--mrp-clay, #a2543f) 8%,
      #fff);
}

.mrp-mode:hover {
  box-shadow:
    0 0 0 3px
    color-mix(in srgb, currentColor 18%,
      transparent);
}

/* the tooltip: the key's full definition, in the
   footnote popover's own dress — white card, gold
   top rule — with the mode name bold up front */

.mrp-mode-tip {
  position: absolute;
  bottom: calc(100% + 9px);
  right: -2px;
  width: max-content;
  max-width: 270px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-top: 3px solid var(--mrp-gold, #c2a14f);
  border-radius: 7px;
  box-shadow: var(--mrp-shadow-pop);
  font-family: var(--mrp-sans);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mrp-ink-2, #3a3d42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.15s ease,
    transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
  z-index: 300;
}

.mrp-mode-tip b {
  color: var(--mrp-navy, #003049);
}

.mrp-mode:hover .mrp-mode-tip {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* narrow screens: a chip-anchored tooltip can run
   off the edge, so it anchors to the card instead
   and spans its width */

@media (max-width: 640px) {
  .mrp-mode {
    position: static;
  }
  .mrp-mode-tip {
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    bottom: calc(100% + 8px);
  }
}

/* card head: title left, mode chips right */

.mrp-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.5em;
}

.mrp-card-top .mrp-card-title {
  margin-bottom: 0;
}

/* run-in enemy definition: the name stays bold
   navy with a colon, the sentence carries on in
   body ink — the same shape as the caption key
   and the mode tooltips */

.mrp-card-top .mrp-enemy,
.mrp-course .mrp-card-top .mrp-enemy {
  margin: 0;
}

.mrp-card .mrp-enemy b {
  color: var(--mrp-navy, #003049);
}

/* the schema legend, defined once per page */

.mrp-mode-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 28px;
  margin: 1.6em 0 2.2em;
}

.mrp-mode-key {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 11px;
  align-items: start;
}

.mrp-mode-key .mrp-mode {
  cursor: default;
}

.mrp-mode-key b {
  display: block;
  font-size: 0.92rem;
  color: var(--mrp-navy, #003049);
}

.mrp-mode-key p {
  margin: 0.15em 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mrp-muted, #6b6e76);
}

@media (max-width: 640px) {
  .mrp-mode-legend {
    grid-template-columns: 1fr;
  }
}



/* Zoned spectrum — the pole labels become zones
   that contain their cards. --zones-fill wraps
   each failure direction in a very pale panel
   (clay = too much force first, blue = too
   little contact below), its label centered
   inside, resolving to the gold target last. */

.mrp-spectrum--zones {
  --sp-zblue:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 65%,
      var(--mrp-navy, #003049));
  --sp-zclay: var(--mrp-clay, #a2543f);
  --sp-pad: 14px;
}

.mrp-spectrum--zones .mrp-spectrum-stations {
  gap: 26px;
}

/* no continuous line: each zone tints its own
   stretch of rail, the target stretch goes gold */

.mrp-spectrum--zones .mrp-spectrum-stations::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-rail) - 4.5px);
  top: -18px;
  bottom: auto;
  width: 9px;
  height: 9px;
  background: none;
  border-left: 2px solid
    color-mix(in srgb, var(--mrp-blue, #669bbc) 70%,
      var(--mrp-page, #fafaf8));
  border-top: 2px solid
    color-mix(in srgb, var(--mrp-blue, #669bbc) 70%,
      var(--mrp-page, #fafaf8));
  transform: rotate(45deg);
}

.mrp-spectrum--zones .mrp-spectrum-stations::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-rail) - 4.5px);
  bottom: -18px;
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--sp-zclay);
  border-top: 2px solid var(--sp-zclay);
  transform: rotate(225deg);
}

.mrp-spectrum-zone {
  position: relative;
  margin: 0;
}

.mrp-spectrum-zone::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-rail) - var(--sp-gutter)
    - 1px);
  top: -10px;
  bottom: -10px;
  width: 2px;
}

.mrp-spectrum-zone--low::before {
  top: -14px;
  background:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 55%,
      var(--mrp-page, #fafaf8));
}

.mrp-spectrum-zone--high::before {
  bottom: -14px;
  background:
    color-mix(in srgb, var(--sp-zclay) 55%,
      var(--mrp-page, #fafaf8));
}

.mrp-spectrum--zones
  .mrp-spectrum-station--target {
  position: relative;
}

.mrp-spectrum--zones
  .mrp-spectrum-station--target::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-rail) - var(--sp-gutter)
    - 1px);
  top: -18px;
  bottom: -18px;
  width: 2px;
  background:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 55%,
      transparent);
}

/* dots and leaders shift for the panel inset */

.mrp-zone-panel {
  border-radius: 12px;
  padding: var(--sp-pad);
  display: grid;
  gap: 14px;
}

.mrp-zone-panel .mrp-spectrum-station::before {
  left: calc(var(--sp-rail) - var(--sp-gutter)
    - var(--sp-pad) - 1px + 12px);
  width: calc(var(--sp-gutter) - var(--sp-rail)
    + var(--sp-pad) + 1px - 18px);
}

.mrp-zone-panel .mrp-spectrum-dot {
  left: calc(var(--sp-rail) - var(--sp-gutter)
    - var(--sp-pad) - 1px - 8px);
}

/* the label */

.mrp-zone-tab {
  font-family: var(--mrp-sans);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.3;
}

.mrp-spectrum-zone--low .mrp-zone-tab {
  color: var(--sp-zblue);
}

.mrp-spectrum-zone--high .mrp-zone-tab {
  color: var(--sp-zclay);
}

.mrp-spectrum-zone--target .mrp-zone-tab {
  color: var(--mrp-gold-dark, #a8893b);
}

/* version 1: filled panels, folder tabs */

.mrp-spectrum--zones-fill
  .mrp-spectrum-zone--low .mrp-zone-panel {
  background:
    color-mix(in srgb,
      var(--mrp-blue-light, #d4eaf7) 40%,
      var(--mrp-page, #fafaf8));
  border: 1px solid
    color-mix(in srgb, var(--mrp-blue, #669bbc) 28%,
      transparent);
}

.mrp-spectrum--zones-fill
  .mrp-spectrum-zone--high .mrp-zone-panel {
  background:
    color-mix(in srgb,
      var(--mrp-clay-soft, #f7e9e3) 55%,
      var(--mrp-page, #fafaf8));
  border: 1px solid
    color-mix(in srgb, var(--sp-zclay) 24%,
      transparent);
}

.mrp-spectrum--zones-fill
  .mrp-spectrum-zone--target .mrp-zone-panel {
  background:
    color-mix(in srgb,
      var(--mrp-gold-soft, #faf3e0) 62%,
      var(--mrp-page, #fafaf8));
  border: 1px solid
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 32%,
      transparent);
}

.mrp-spectrum--zones-fill .mrp-zone-tab {
  display: block;
  width: max-content;
  position: relative;
  top: 1px;
  margin-left: 18px;
  padding: 5px 14px 4px;
  border-radius: 8px 8px 0 0;
}

/* version 1 revisions: no arrowheads; the label
   moves inside the panel as a heading at
   card-title size; the sequence resolves downward
   to the gold ideal, so the target's rail segment
   ends at its dot */

.mrp-spectrum--zones-fill
  .mrp-spectrum-stations::before,
.mrp-spectrum--zones-fill
  .mrp-spectrum-stations::after {
  content: none;
}

.mrp-spectrum--zones-fill .mrp-zone-tab {
  position: static;
  top: 0;
  width: auto;
  margin: 8px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3;
}

/* no rail in version 1: the zones carry the
   structure alone */

.mrp-spectrum--zones-fill .mrp-spectrum-stations {
  padding-left: 0;
}

.mrp-spectrum--zones-fill
  .mrp-spectrum-zone::before,
.mrp-spectrum--zones-fill
  .mrp-spectrum-station::before,
.mrp-spectrum--zones-fill
  .mrp-spectrum-station--target::after {
  content: none;
}

.mrp-spectrum--zones-fill .mrp-spectrum-dot {
  display: none;
}

.mrp-spectrum--zones-fill
  .mrp-spectrum-zone--high::before {
  top: -6px;
  bottom: -10px;
}

.mrp-spectrum--zones-fill
  .mrp-spectrum-zone--low::before {
  top: -10px;
  bottom: -10px;
}

.mrp-spectrum--zones-fill
  .mrp-spectrum-station--target::after {
  top: -18px;
  bottom: 50%;
}

/* run-in summary on the card title line, joined
   by a colon at the name: one size throughout,
   color and weight carry the differentiation */

.mrp-card .mrp-card-sub,
.mrp-course .mrp-card .mrp-card-sub {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mrp-ink-3, #555860);
}


/* Syllabus — a major enumerated sequence: the six
   classes of a course, the stages of a protocol.
   Kin to the spectrum — same rail and stations —
   but plainly ordered: numbered nodes on a solid
   spine, quiet hairline rows instead of cards.
   Numbers fill automatically and belong here:
   classes happen in order. */

.mrp-syllabus,
.mrp-course .mrp-syllabus {
  list-style: none;
  margin: 1.5em 0;
  padding: 0;
  counter-reset: mrp-class;
}

.mrp-syllabus-item,
.mrp-course .mrp-syllabus-item {
  counter-increment: mrp-class;
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 20px;
  margin: 0;
}

/* the spine: solid and sequential, drawn per item
   so it spans exactly node to node */

.mrp-syllabus-item::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--mrp-line, #e4e2dd);
}

.mrp-syllabus-item:first-child::before {
  top: 24px;
}

.mrp-syllabus-item:last-child::before {
  bottom: calc(100% - 24px);
}

.mrp-syllabus-item > .mrp-node {
  position: relative;
  margin-top: 8px;
}

.mrp-syllabus-item > .mrp-node::before {
  content: counter(mrp-class);
}

.mrp-syllabus-body {
  padding: 13px 0 15px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--mrp-line, #e4e2dd) 55%,
      transparent);
}

.mrp-syllabus-item:last-child .mrp-syllabus-body {
  border-bottom: 0;
}

.mrp-syllabus-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--mrp-navy, #003049);
}

.mrp-syllabus-title a {
  color: inherit;
  text-decoration: none;
}

.mrp-syllabus-title a:hover {
  color: var(--mrp-gold-dark, #a8893b);
}

.mrp-syllabus-body p,
.mrp-course .mrp-syllabus-body p {
  margin: 0.25em 0 0;
  font-family: var(--mrp-sans);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--mrp-ink-3, #555860);
}

/* Goals — a serif lead-in over rule-separated items,
   each numbered by CSS counter in a gold ring. Reads
   as prose (serif body) rather than as a UI list. */

.mrp-goals {
  margin: 1.8em 0;
}

.mrp-goals-head,
.mrp-course .mrp-goals-head {
  font-family: var(--mrp-serif);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--mrp-ink, #18191c);
  margin: 0 0 0.1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-goals-list,
.mrp-course .mrp-goals-list {
  font-family: var(--mrp-serif);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mrp-goal;
}

/* the ring is absolutely positioned rather than a grid
   column, so inline <strong> inside the item stays in
   the text flow instead of becoming its own track */

.mrp-goals-list > li,
.mrp-course .mrp-goals-list > li {
  counter-increment: mrp-goal;
  position: relative;
  margin: 0;
  padding: 1.1em 0 1.1em 52px;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-goals-list > li::before {
  content: counter(mrp-goal, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--mrp-gold, #c2a14f);
  border-radius: 50%;
  font-family: var(--mrp-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mrp-gold-dark, #a8893b);
  background: #fff;
}

@media (max-width: 560px) {
  .mrp-goals-list > li,
  .mrp-course .mrp-goals-list > li {
    padding-left: 40px;
  }

  .mrp-goals-list > li::before {
    width: 26px;
    height: 26px;
    font-size: 0.66rem;
  }
}

/* Numbered points — a titled block (kicker, serif title,
   lead) over rule-separated points, each carrying its own
   heading and optional callout. Same gold-ring counter and
   hairline rules as .mrp-goals, one level richer. */

.mrp-points {
  margin: 2.2em 0;
}

.mrp-points-title,
.mrp-course .mrp-points-title {
  font-family: var(--mrp-serif);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--mrp-ink, #18191c);
  margin: 0 0 0.3em;
}

.mrp-points-lead,
.mrp-course .mrp-points-lead {
  font-family: var(--mrp-serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--mrp-ink-2, #3a3d42);
  margin: 0;
  padding-bottom: 0.9em;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-points-list,
.mrp-course .mrp-points-list {
  font-family: var(--mrp-serif);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mrp-point;
}

.mrp-points-list > li,
.mrp-course .mrp-points-list > li {
  counter-increment: mrp-point;
  position: relative;
  margin: 0;
  padding: 1.3em 0 1.4em 52px;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-points-list > li::before {
  content: counter(mrp-point, decimal-leading-zero);
  position: absolute;
  left: 0;
  /* em resolves against this pseudo-element's own 0.72rem,
     so this centres the ring on the point title */
  top: 1.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid var(--mrp-gold, #c2a14f);
  border-radius: 50%;
  font-family: var(--mrp-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mrp-gold-dark, #a8893b);
  background: #fff;
}

/* h5 doubles as a kicker style in this sheet, so a point
   title has to reset the caps and tracking it inherits */

.mrp-point-title,
.mrp-course .mrp-point-title {
  font-family: var(--mrp-serif);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mrp-ink, #18191c);
  margin: 0 0 0.35em;
}

.mrp-points-list > li > p,
.mrp-course .mrp-points-list > li > p {
  margin: 0 0 0.6em;
}

.mrp-points-list > li > p:last-child,
.mrp-course .mrp-points-list > li > p:last-child {
  margin-bottom: 0;
}

/* a callout nested in a point sits tighter than a
   standalone one */

.mrp-points-list .mrp-callout {
  margin: 1.1em 0 0.2em;
}

/* Kicker variant with a short leading rule */

.mrp-kicker--rule,
.mrp-course .mrp-kicker--rule {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  margin: 0 0 0.5em;
}

.mrp-kicker--rule::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--mrp-gold, #c2a14f);
  flex: none;
}

@media (max-width: 560px) {
  .mrp-points-list > li,
  .mrp-course .mrp-points-list > li {
    padding-left: 40px;
  }

  .mrp-points-list > li::before {
    width: 26px;
    height: 26px;
    font-size: 0.66rem;
  }
}

/* Wave timeline — eras building toward the present.
   Nodes number themselves (CSS counter). The spine
   fades in from the past, darkens toward now, and the
   arrow continues beyond the last wave. By default
   the LAST wave is current (gold ring); set
   .is-current on any wave to move the marker — waves
   after it render as upcoming. */

.mrp-waves {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 26px;
  margin: 2.2em 0;
  counter-reset: mrp-wave;
  /* node diameter, shared with the spine offsets below
     so the line stays centered on the circle even as
     text-size settings scale the digit and its node */
  --mrp-wave-d: 1.627rem;
}

/* the spine: past fades in, present is solid */

.mrp-waves::before {
  content: "";
  position: absolute;
  left: 0;
  right: 14px;
  top: calc(var(--mrp-wave-d) / 2);
  height: 2px;
  background:
    linear-gradient(90deg,
      var(--mrp-line, #e4e2dd),
      var(--mrp-blue, #669bbc) 55%,
      var(--mrp-navy, #003049));
}

/* time continues past the last wave */

.mrp-waves::after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(var(--mrp-wave-d) / 2);
  transform: translateY(-50%);
  border-left: 9px solid var(--mrp-navy, #003049);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.mrp-wave {
  counter-increment: mrp-wave;
  position: relative;
  padding-top: 40px;
}

/* numbered node on the spine; past = filled navy */

.mrp-wave::before {
  content: counter(mrp-wave);
  position: absolute;
  top: 0;
  left: 0;
  width: var(--mrp-wave-d);
  height: var(--mrp-wave-d);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--mrp-navy, #003049);
  border: 2px solid var(--mrp-navy, #003049);
  color: var(--mrp-cream, #fdf0d5);
}

.mrp-wave-era {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mrp-muted, #6b6e76);
  margin-bottom: 0.3em;
}

.mrp-wave-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--mrp-ink-2, #3a3d42);
  margin-bottom: 0.4em;
}

.mrp-wave p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mrp-ink-2, #3a3d42);
  margin: 0;
}

/* current wave: gold ring, warm labels */

.mrp-wave:last-child::before,
.mrp-wave.is-current::before {
  background: #fff;
  border-color: var(--mrp-gold, #c2a14f);
  color: var(--mrp-gold-dark, #a8893b);
  box-shadow:
    0 0 0 4px
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 25%,
      transparent);
}

.mrp-wave:last-child .mrp-wave-era,
.mrp-wave.is-current .mrp-wave-era {
  color: var(--mrp-gold-dark, #a8893b);
}

.mrp-wave:last-child .mrp-wave-title,
.mrp-wave.is-current .mrp-wave-title {
  color: var(--mrp-navy, #003049);
}

/* waves after an explicit current are upcoming */

.mrp-wave.is-current ~ .mrp-wave::before {
  background: var(--mrp-page, #fafaf8);
  border-color: var(--mrp-line, #e4e2dd);
  color: var(--mrp-muted, #6b6e76);
  box-shadow: none;
}

.mrp-wave.is-current ~ .mrp-wave .mrp-wave-era {
  color: var(--mrp-muted, #6b6e76);
}

.mrp-wave.is-current ~ .mrp-wave .mrp-wave-title {
  color: var(--mrp-ink-2, #3a3d42);
}

@media (max-width: 760px) {
  .mrp-waves {
    grid-auto-flow: row;
    gap: 22px;
    padding-bottom: 20px;
  }
  .mrp-waves::before {
    left: calc(var(--mrp-wave-d) / 2);
    right: auto;
    top: 0;
    bottom: 14px;
    width: 2px;
    height: auto;
    background:
      linear-gradient(180deg,
        var(--mrp-line, #e4e2dd),
        var(--mrp-blue, #669bbc) 55%,
        var(--mrp-navy, #003049));
  }
  .mrp-waves::after {
    left: calc(var(--mrp-wave-d) / 2);
    right: auto;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 9px solid var(--mrp-navy, #003049);
    border-bottom: 0;
  }
  .mrp-wave {
    padding-top: 0;
    padding-left: calc(var(--mrp-wave-d) + 16px);
  }
}

/* Group subhead — titles a component (a card set,
   a skills panel, a contrast table), sentence case
   over a light gold hairline beneath. Quieter than
   a section head: no kicker, no caps, and it never
   appears in the course map. */

.mrp-subhead {
  margin: 2.6em 0 1.1em;
}

/* doubled selector so a heading inside keeps the
   subhead's own size, weight, and color */

.mrp-subhead > *,
.mrp-course .mrp-subhead > * {
  margin: 0;
  font-family: var(--mrp-sans);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--mrp-navy, #003049);
}

.mrp-subhead::after {
  content: "";
  display: block;
  margin-top: 0.55em;
  height: 1px;
  border-radius: 1px;
  background:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 30%,
      transparent);
}

/* Skill columns — parallel taxonomies, one rounded
   card per family: the three families of practice,
   three kinds of evidence, any set of comparable
   lists. Rows are plain hairline-separated lines,
   never bulleted — these are names, not
   instructions. Card counts and list lengths may
   differ. */

.mrp-skills {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 18px;
  margin: 2.2em 0;
}

.mrp-skill-col {
  position: relative;
  /* side padding matches the top rather than
     exceeding it, which also buys the head enough
     measure to keep a two-word family name on one
     line at the narrowest three-column width */
  padding: 20px 18px 18px;
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: var(--mrp-radius, 10px);
  box-shadow: var(--mrp-shadow);
  transition: background 0.18s ease,
    border-color 0.18s ease, box-shadow 0.18s ease;
}

/* hover: the card warms and lifts, and its rules
   come up to strength — a whole family answering
   at once */

.mrp-skill-col:hover {
  background: #fffdf7;
  border-color:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 38%,
      var(--mrp-line, #e4e2dd));
  box-shadow: var(--mrp-shadow-pop);
}

.mrp-skill-col:hover .mrp-skill-head {
  border-bottom-color:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 75%,
      transparent);
}



/* The family is the whole; its skills are parts.
   The head carries the weight — a bold navy title
   set above the items it governs — while every
   rule inside the card stays faint, so the items
   read as one body rather than a stack of
   separate cells. */

.mrp-skill-head {
  font-family: var(--mrp-sans);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--mrp-navy, #003049);
  margin: 0 0 0.15em;
  padding-bottom: 0.7em;
  border-bottom: 1px solid
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 40%,
      transparent);
}

/* doubled selector to beat the course's list
   indent, so rows and their rules run flush with
   the column head */

.mrp-skill-list,
.mrp-course .mrp-skill-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mrp-skill-list li {
  margin: 0;
  padding: 0.55em 0;
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--mrp-ink-2, #3a3d42);
  border-bottom: 1px solid
    color-mix(in srgb, var(--mrp-line, #e4e2dd) 55%,
      transparent);
}

.mrp-skill-list li::marker {
  content: none;
}

.mrp-skill-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* the family under discussion */

.mrp-skill-col--active {
  background: #fffdf6;
  border-color: var(--mrp-gold, #c2a14f);
  box-shadow:
    0 0 0 1px var(--mrp-gold, #c2a14f),
    var(--mrp-shadow-pop);
}


.mrp-skill-col--active .mrp-skill-head {
  color: var(--mrp-gold-dark, #a8893b);
  border-bottom-color: var(--mrp-gold, #c2a14f);
}

@media (max-width: 760px) {
  .mrp-skills {
    grid-auto-flow: row;
  }
}

/* Contrast table — one idea done two ways across
   several domains. Built as a table, not a stack
   of panels: the two column labels are stated once
   at the top, the domains run down the left as row
   headers, and nothing is filled. The target
   column is marked only by a sage hairline and by
   text set at full strength while the ordinary
   column recedes to a lighter gray. */

.mrp-contrast {
  margin: 2.4em 0;
}

.mrp-contrast-row {
  display: grid;
  grid-template-columns:
    minmax(84px, 0.5fr) 1fr 1fr;
  column-gap: 30px;
  padding: 18px 0;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-contrast-row:last-child {
  border-bottom: 0;
}

/* header row: the only place the two modes are
   named, and the only place they carry color */

.mrp-contrast-row--head {
  padding: 0 0 0.7em;
  border-bottom: 1px solid var(--mrp-navy, #003049);
}

.mrp-contrast-head {
  font-family: var(--mrp-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mrp-clay, #a2543f);
}

.mrp-contrast-head--target {
  color: var(--mrp-ok, #3e6b4f);
}

.mrp-contrast-domain {
  font-family: var(--mrp-sans);
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--mrp-navy, #003049);
  padding-top: 0.15em;
}

.mrp-contrast-cell p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--mrp-muted, #6b6e76);
}

/* the target: a quiet sage spine, and prose at
   full ink — present where the default recedes */

.mrp-contrast-cell--target {
  padding-left: 22px;
  border-left: 1.5px solid
    color-mix(in srgb, var(--mrp-ok, #3e6b4f) 60%,
      transparent);
}

.mrp-contrast-row--head .mrp-contrast-head--target {
  padding-left: 22px;
}

.mrp-contrast-cell--target p {
  color: var(--mrp-ink, #18191c);
}

/* per-cell labels carry the column names to screen
   readers, and become visible when stacked */

.mrp-contrast-cell .mrp-contrast-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .mrp-contrast-row--head {
    display: none;
  }
  .mrp-contrast-row {
    grid-template-columns: 1fr;
    row-gap: 14px;
    padding: 20px 0;
  }
  .mrp-contrast-cell--target {
    padding-left: 18px;
  }
  .mrp-contrast-cell .mrp-contrast-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0.45em;
    clip: auto;
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--mrp-clay, #a2543f);
  }
  .mrp-contrast-cell--target .mrp-contrast-label {
    color: var(--mrp-ok, #3e6b4f);
  }
}


/* Charts — research figures redrawn as inline
   SVG so they inherit the course type, hold the
   palette, and carry a text alternative. Series
   colors are one step deeper than their brand
   values: the checked steps that clear the
   colorblind-separation and contrast tests on the
   paper ground. Identity is never color alone —
   every series also owns a dash and a marker. */

.mrp-chart {
  --ch-a: #1a6b43;
  --ch-b: #2f8fc4;
  --ch-c: #a2543f;
  margin: 0.4em 0 0;
  overflow-x: auto;
  /* a swipe on a chart must never chain into the
     browser's back-gesture */
  overscroll-behavior-x: contain;
  /* the chart is its own container-query subject:
     the SVG text tiers below key off the width the
     chart actually renders at — so a narrow paged
     column, a split screen, or a rotated phone all
     resolve correctly without any viewport math */
  container-type: inline-size;
}

.mrp-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--mrp-sans);
}

/* the burnout trend runs in the MRP blue rather than
   the clay this slot carries elsewhere. the marks take
   the light blue directly; its key text takes a
   navy-weighted mix of the same hue, because #669bbc
   on paper is about 2.9:1 — fine for a 2px line, too
   pale to read at label size */

#fig-burnout .mrp-chart {
  --ch-c: var(--mrp-blue, #669bbc);
  --ch-c-label:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 65%,
      var(--mrp-navy, #003049));
}

/* the Class 3 variance inset carries its value as text in
   the series colour, and the palette's --ch-b is 3.4:1 on
   paper — clear for a bar, short of the 4.5:1 a small
   label needs. the slot is darkened for this figure only,
   to the same blue the skill-family badges use */

#fig-kg-variance .mrp-chart {
  --ch-b: #2f6f9e;
}

/* the Class 3 anxiety chart keeps its gridlines a step
   lighter than the default, for this figure only */

#fig-hofmann-anxiety .mrp-chart-grid {
  stroke: color-mix(in srgb, var(--mrp-line, #e4e2dd) 40%,
    transparent);
}

/* its axis title reads as a sentence, a step quieter than
   the uppercase default */

/* its gap annotation sits a step below the direct line
   labels at every width */

#fig-hofmann-anxiety .mrp-chart-siglab {
  font-size: 12px;
}

@container (max-width: 660px) {
  #fig-hofmann-anxiety .mrp-chart-siglab { font-size: 13.5px; }
}

@container (max-width: 470px) {
  #fig-hofmann-anxiety .mrp-chart-siglab { font-size: 14px; }
}

#fig-hofmann-anxiety .mrp-chart-axistitle {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  /* the y title matches the x tick labels: same grey,
     sentence case, quiet */
  fill: var(--mrp-muted, #6b6e76);
}

/* Before-and-after dots — a mean at two time
   points with the spread it sits in. The spread
   bar is the point of the chart rather than a
   caveat on it, so it is drawn thick and
   translucent, wide enough to read as a cloud of
   people rather than as an error bar. */

.mrp-spread {
  stroke-width: 9;
  stroke-linecap: round;
}

.mrp-spread--pre {
  stroke:
    color-mix(in srgb, var(--ch-b, #2f8fc4) 22%,
      transparent);
}

.mrp-spread--post {
  stroke:
    color-mix(in srgb, var(--ch-b, #2f8fc4) 38%,
      transparent);
}

/* the two means. week 1 is drawn hollow and week 7
   filled, so the pair reads as before and after
   without relying on the legend */

.mrp-dot {
  stroke: var(--mrp-paper, #fafaf8);
  stroke-width: 1.5;
}

.mrp-dot--pre {
  fill:
    color-mix(in srgb, var(--ch-b, #2f8fc4) 45%,
      var(--mrp-paper, #fafaf8));
}

.mrp-dot--post {
  fill: var(--ch-b, #2f8fc4);
}

/* the move between the two means. it is the small
   quantity on a chart of wide spreads, so it gets
   drawn rather than left to be inferred — a hairline
   in ink, which keeps it legible without competing
   with the bars it crosses */

.mrp-shift {
  stroke:
    color-mix(in srgb, var(--mrp-navy, #003049) 45%,
      transparent);
  stroke-width: 1.6;
}

/* the fitted growth curve traced from the source
   figure, and the standard-error band around it.
   the band is the curve's own uncertainty, not the
   spread between people — so it stays tight to the
   line and much fainter than the spread bar it sits
   beside, which is a different quantity entirely */

.mrp-pq-band {
  /* the uncertainty sits below the data in the hierarchy
     (trend, then participants, then this, then the grid) */
  fill:
    color-mix(in srgb, var(--mrp-navy, #003049) 6%,
      transparent);
  stroke: none;
}

/* the in-chart note: quieter than a title, louder
   than a tick — it names the shape of the trend for
   a reader who takes the figure in before the
   caption */

.mrp-pq-note {
  font-family: var(--mrp-sans);
  font-size: 12.5px;
  font-weight: 700;
  fill:
    color-mix(in srgb, var(--ch-b, #2f8fc4) 70%,
      var(--mrp-navy, #003049));
}

/* the fitted trend, as a fine dotted line: round caps
   + hairline dashes render as a string of small dots,
   so it reads as an estimated path, not data points */

.mrp-pq-line {
  /* solid and medium-weight: the estimated trend, not a
     reference line or a projection */
  fill: none;
  stroke: var(--ch-b, #2f8fc4);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* the savoring trial sets two control conditions
   against three savoring ones, so colour carries
   that split: the savouring arms take the series
   blue, the controls a neutral grey that reads as
   "comparison" rather than as a fourth series */

#fig-savoring-time3 .mrp-chart {
  --ch-ctrl:
    color-mix(in srgb, var(--mrp-navy, #003049) 30%,
      transparent);
}

/* The naming-and-regulating figure and the
   self-compassion one both hold their comparison
   arm in the same neutral grey, so the grey reads
   as "what this is measured against" wherever it
   appears rather than as a series of its own. */

#fig-naming-regulating .mrp-chart,
#fig-self-compassion-msc .mrp-chart {
  --ch-ctrl:
    color-mix(in srgb, var(--mrp-navy, #003049) 30%,
      transparent);
}

/* The valuing-happiness chart is the exception: its
   comparison arm is drawn in the checked green
   rather than the grey, because on this figure the
   control cell is not merely a baseline — it is the
   wholesome case, the state the near enemy costs
   you. So the pair takes the same green-and-clay
   reading as the near-enemy diagrams earlier in the
   class: green for what savoring actually does,
   clay for the arm the manipulation moved the wrong
   way. Never colour alone, though — both bars print
   their value, and the gap between them is drawn
   and named. */

/* On the naming-and-regulating chart the grey holds
   the control cell — no label — and colour is spent
   only on the arm that was acted on, where it names
   the STATE that arm was in: the series blue where
   the feeling was simply sat with, green where it
   was let go. Those fills are set inline on the
   bars, since the hue changes from group to group
   within one chart rather than per figure.

   The legend follows: one grey chip for the
   control, and a split chip for the acted-on arm,
   which is the same two-tone key the self-compassion
   chart uses when one series is drawn in two hues. */

/* The affect-labeling chart plots the difference
   naming made rather than the two cells it was
   computed from, so it has no control arm to grey
   out. Its two bars are one measure pointing
   opposite ways, and hue names which way HELPED —
   clay where naming added distress, green where it
   eased it — not which way the number went. That is
   the opposite convention to the self-compassion
   chart below, where hue tracks rise and fall, so
   neither chart leaves it to colour: each bar here
   also wears its sign and a sentence saying whether
   naming added or eased. */

#fig-affect-labeling .mrp-chart {
  --ch-worse: var(--ch-c, #a2543f);
  --ch-better: var(--ch-a, #1a6b43);
}

/* The probe-trend panels run green against orange:
   green for the experienced meditators, the warm
   hue for the beginners. #a2543f, the palette's
   usual warm step, sits too close to brown beside
   a dark green at 2px, so this figure takes a step
   further round toward orange — still deep enough
   to hold about 4.3:1 on the paper ground, well
   past the 3:1 a line needs. Hue is not doing the
   work alone: each series also owns a dash and an
   end marker, per the palette rule above.

   The panels are 245-unit drawings that render at
   about 220px three-across, so their type is set
   larger in drawing units than a 700-unit chart's
   would be, to land at the same on-screen size.
   These win over the generic type tiers on
   specificity, which is what we want — the grid
   already changes the panels' scale, so the tiers
   would double-count. */

#fig-probe-trends .mrp-chart {
  --ch-warm: #bf5b1b;
}

/* four series: the unforgiving pair (hurt, grudge) takes
   the warm tones, the forgiving pair (empathy, forgive)
   takes the palette's default green/blue, so color alone
   signals which condition a line belongs to */

#fig-witvliet2001-fig2 .mrp-chart {
  --ch-warm: #bf5b1b;
}

#fig-probe-trends .mrp-chart-tick {
  font-size: 14px;
}

/* the per-probe means. forty marks in a 187-unit
   panel land about 10 units apart, so they carry a
   hairline of paper: where two probes nearly
   coincide the pair still reads as two, and where
   the trend line crosses the cloud it does not fuse
   with the dots it is drawn over */

#fig-probe-trends .mrp-chart-dots > * {
  stroke: var(--mrp-page, #fafaf8);
  stroke-width: 0.7;
}

/* the probe-to-probe path. thinner than the trend
   and held at half opacity, so the three layers
   stay in order as you read down through them: the
   fitted line first, then the marks it was fitted
   to, then the jitter between them */

#fig-probe-trends .mrp-chart-raw {
  stroke-width: 1.2;
  opacity: 0.5;
}

#fig-probe-trends .mrp-chart-axistitle--plain {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  fill: var(--mrp-muted, #6b6e76);
}

/* the Class 4 forgiveness-trial panels are the same
   245-unit drawings in the same three-across grid, so
   they take the same type sizes — set larger in
   drawing units to land at the same size on screen as
   a 700-unit chart's would. */

#fig-haroon-promis .mrp-chart-tick {
  font-size: 14px;
}

#fig-haroon-promis .mrp-chart-axistitle--plain {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  fill: var(--mrp-muted, #6b6e76);
}

/* The shaded gap on the anxiety chart. It is an area,
   not a mark, so it takes the series green at a low
   enough mix to sit under both lines and their error
   bars without competing: the number the reader wants
   is printed, and the shape only says which way the
   difference runs and where it is widest. */

#fig-hofmann-anxiety .mrp-chart-gapband {
  fill: color-mix(in srgb, var(--ch-a, #1a6b43) 12%,
    transparent);
}

/* the gratitude figure carries three series where the
   others carry two, and the third is the point of it:
   obligation moves with indebtedness, not with
   gratitude. So the two that travel together are given
   neighbouring warms — the clay and the orange the
   probe chart already uses — and gratitude keeps the
   green on its own. The lines are solid and unmarked
   at the course's request, which is affordable here
   only because each one is named at its own right end:
   the reading never rests on telling two hues apart,
   and the labels carry those hues so the name and the
   line agree. */

#fig-gratitude-indebtedness .mrp-chart {
  --ch-warm: #bf5b1b;
}

/* the self-compassion figure is the one chart here
   whose two halves point opposite ways, so the
   course bars take their color from direction
   rather than from series: the checked green for
   what rose, the clay for what fell. Both are the
   deepened palette steps, so they hold contrast on
   paper and stay separable for red-green viewers —
   and direction is never carried by color alone,
   since every value also wears its sign */

#fig-self-compassion-msc .mrp-chart {
  --ch-up: var(--ch-a, #1a6b43);
  --ch-down: var(--ch-c, #a2543f);
}

/* the two meditation names on the first-sitting
   figure are its category axis, not incidental
   labels — the whole chart is a comparison between
   them. They are set up from the bar-label default
   and carry their series hue, and unlike the shared
   bar-label class they get the narrow-width tiers,
   so they stay readable when the 700-unit drawing
   is squeezed into a phone column */

#fig-lkm-passage .mrp-chart-barlab {
  font-size: 15px;
  font-weight: 700;
}

@container (max-width: 660px) {
  #fig-lkm-passage .mrp-chart-barlab { font-size: 18px; }
}

@container (max-width: 470px) {
  #fig-lkm-passage .mrp-chart-barlab { font-size: 22px; }
}

/* the gratitude-correlates figure is the only chart
   whose measure names AND its values are both read
   off the plot rather than off an axis — every bar
   carries its own r. So it takes the same narrow-
   width treatment the shared ticks get: set larger
   in SVG units as the 700-unit drawing shrinks, so
   the on-screen size holds. The sizes are set by the
   longest label, "Spiritual transcendence", which at
   22px would run past the left edge of the viewBox
   from its anchor at x=296; 18px clears it. Half the
   tick labels carry --dense and drop out at phone
   width, leaving the .20 steps. */

@container (max-width: 660px) {
  #fig-gratitude-correlates .mrp-chart-barlab,
  #fig-gratitude-correlates .mrp-chart-val { font-size: 15px; }
}

@container (max-width: 470px) {
  #fig-gratitude-correlates .mrp-chart-barlab { font-size: 18px; }

  /* the two values in a pair are baselined 19 units
     apart, so they take a smaller step than the name
     beside them: at 18px the pair reads as one block
     of digits rather than as two readings */
  #fig-gratitude-correlates .mrp-chart-val { font-size: 16px; }
}

/* the plot frame: hairlines only, the baseline a
   shade stronger than the grid above it */

.mrp-chart-grid {
  stroke: var(--mrp-line, #e4e2dd);
  stroke-width: 1;
}

.mrp-chart-axisline {
  stroke: color-mix(in srgb, var(--mrp-navy, #003049) 30%,
    transparent);
  stroke-width: 1;
}

.mrp-chart-tickmark {
  stroke: color-mix(in srgb, var(--mrp-navy, #003049) 30%,
    transparent);
  stroke-width: 1;
}

/* the head on an axis that carries a direction — the
   scan clock in Class 2. it is the same hairline the
   axis is, so it takes that tint as fill rather than
   inheriting the ink of whatever it points across */

.mrp-chart-axishead {
  fill: color-mix(in srgb, var(--mrp-navy, #003049) 30%,
    transparent);
}

/* the performance period: a pale band, the same
   whisper the zone panels use */

.mrp-chart-band {
  fill: color-mix(in srgb, var(--mrp-navy, #003049) 6%,
    transparent);
}

.mrp-chart-bandlab {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--mrp-muted, #6b6e76);
}

/* type wears text colors, never the series color;
   the colored swatch beside a name carries
   identity */

.mrp-chart-tick {
  font-size: 12px;
  fill: var(--mrp-muted, #6b6e76);
}

.mrp-chart-tick--sub {
  font-size: 11px;
}

.mrp-chart-axistitle {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--mrp-navy, #003049);
}

/* plain variant: sentence case, no tracking — for a plot whose
   axis name would otherwise read heavier than the figure around it */

.mrp-chart-axistitle--plain {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  fill: var(--mrp-ink-2, #3a3d42);
}

.mrp-chart-key {
  font-size: 13px;
  fill: var(--mrp-ink-2, #3a3d42);
}

/* marks: 2px lines, error bars a hair lighter so
   the trend reads before the uncertainty does */

.mrp-chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Small multiples. The other two-panel chart in the
   course draws both panels inside one fixed viewBox,
   which is simpler — but a fixed viewBox cannot
   reflow, and three panels across a phone would be
   unreadable. So each panel here is its own SVG and
   the grid does the arranging: three across while
   the chart is wide, stacked below 660px, which is
   the same width the type tiers already turn on.
   Stacked, a panel is capped rather than allowed to
   fill the column — a 245-unit drawing at 660px
   would scale its own labels to nearly 40px. */

.mrp-chart-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2em 1.1em;
  align-items: start;
}

@container (max-width: 660px) {
  .mrp-chart-panels {
    grid-template-columns: 1fr;
    gap: 1em;
  }

  .mrp-chart-panels > * {
    max-width: 340px;
    margin-inline: auto;
  }
}

/* One key for the whole grid. The series mean the
   same thing in all three panels, so it is stated
   once above them rather than drawn into each — and
   it is HTML rather than an SVG row, so it keeps a
   readable size when the panels stack instead of
   scaling down with a 700-unit drawing. */

.mrp-course .mrp-chart-keyrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 1.5em;
  margin: 0 0 0.9em;
  font-family: var(--mrp-sans);
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-chart-keyrow > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

/* scoped through .mrp-figure to outrank the
   `.mrp-figure svg { width: 100% }` rule that makes
   every other SVG in a figure fill its column —
   this one is a 26px chip, not a plot */

.mrp-figure .mrp-chart-keyswatch {
  flex: none;
  width: 26px;
  height: 8px;
  overflow: visible;
}

/* point markers grow on hover so the exact
   reading is easy to land on with a mouse. the
   visible dot is small, but it sits inside a
   wider invisible hit circle so the hover (and
   its tooltip) fires a few px out, not just on
   the exact pixel */

.mrp-chart-ptwrap {
  cursor: default;
}

.mrp-chart-pt {
  transition: r 0.12s ease-out;
}

.mrp-chart-pthit {
  fill: transparent;
}

.mrp-chart-ptwrap:hover .mrp-chart-pt {
  r: 6;
}

/* the value itself, on hover — a halo instead of
   a background chip, so it stays legible over a
   line without needing a measured-width box */

.mrp-chart-pttip {
  font-family: var(--mrp-sans);
  font-size: 12px;
  font-weight: 700;
  fill: var(--mrp-ink, #18191c);
  paint-order: stroke;
  stroke: var(--mrp-page, #fafaf8);
  stroke-width: 4px;
  stroke-linejoin: round;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease-out;
}

.mrp-chart-ptwrap:hover .mrp-chart-pttip {
  opacity: 1;
}

.mrp-chart-err {
  stroke-width: 1.25;
  opacity: 0.75;
}

/* narrow-chart type tiers. the SVGs are fixed
   700-unit drawings that scale down with the
   column, and their text scales down with them —
   so as the rendered width shrinks, the labels
   are set LARGER in SVG units to hold a readable
   on-screen size. two tiers: a mild one as the
   column first tightens, and a stronger one at
   phone widths, which also drops the ticks marked
   --dense so the sparser labels can breathe.
   sizes are calibrated against the widest label
   in each chart (legend text near x=576 on the
   700-unit drawings) so nothing grows past the
   right edge of its viewBox */

@container (max-width: 660px) {
  .mrp-chart-tick { font-size: 15px; }
  .mrp-chart-tick--sub { font-size: 12.5px; }
  .mrp-chart-key { font-size: 14.5px; }
  .mrp-chart-bandlab { font-size: 12.5px; }
  .mrp-chart-axistitle { font-size: 13px; }
  .mrp-band-lab { font-size: 12px; }
  .mrp-cycle-code { font-size: 12px; }
  .mrp-scan-note { font-size: 12.5px; }
}

@container (max-width: 470px) {
  .mrp-chart-tick { font-size: 19px; }
  .mrp-chart-key { font-size: 15px; }
  .mrp-chart-bandlab { font-size: 15px; }
  .mrp-chart-axistitle { font-size: 15px; }
  .mrp-chart-pttip { font-size: 15px; }
  .mrp-band-lab { font-size: 14px; }
  .mrp-cycle-code { font-size: 13px; }
  .mrp-scan-note { font-size: 14px; }
  /* the state names are NOT bumped: they sit inside
     fixed-width cards drawn in user units, and any
     growth pushes the longest name ("Awareness of
     wandering") past its card's right edge */
  /* sub-labels ("post-mTSST") collide with their
     neighbors once the primary ticks grow; at
     phone widths the caption and data table carry
     that qualifier instead */
  .mrp-chart-tick--sub,
  .mrp-chart-tick--dense,
  .mrp-chart-tickmark--dense { display: none; }
}

/* the compact variant: an inset chart floats in
   the prose at ~300px, letting the marks breathe */

.mrp-chart--compact {
  overflow: visible;
}

/* a chart title states the finding, so it sets
   like a small heading — sentence case, bold, in
   the blue mixed toward navy that reads as a
   label rather than a link */

.mrp-chart-title,
/* a compact inset chart is narrow enough that a left-aligned title reads as
   detached from it; centring ties the title to the plot below */

.mrp-course .mrp-chart--compact .mrp-chart-title {
  text-align: center;
}

.mrp-course .mrp-chart-title {
  /* 0.7em sat the title close enough to the topmost bar label that the two
     read as one block of text rather than as a title over a plot */
  margin: 0 0 1em;
  font-family: var(--mrp-sans);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 65%,
      var(--mrp-navy, #003049));
}

.mrp-chart-barlab {
  font-size: 13px;
  fill: var(--mrp-ink-2, #3a3d42);
}

.mrp-chart-val {
  font-size: 13px;
  fill: var(--mrp-ink, #18191c);
}

/* significance bracket spanning a pair of bars —
   a hairline in muted ink with its label centred on
   it, so the comparison the study actually ran is
   readable off the plot and not only from the
   caption. Deliberately quieter than the error bars:
   the data comes first, the annotation second */

.mrp-chart-sig {
  stroke: var(--mrp-muted, #6b6e76);
  stroke-width: 1;
}

.mrp-chart-siglab {
  font-size: 11px;
  fill: var(--mrp-muted, #6b6e76);
}

/* the narrow-chart tiers again, for the annotation.
   they sit here rather than up with the others
   because this rule is declared after that block and
   would otherwise win on source order. the steps are
   smaller than a tick's: the annotation is meant to
   stay quieter than the axis, and its longest line
   has to clear the right edge of the 700-unit
   drawing at every size */

@container (max-width: 660px) {
  .mrp-chart-siglab { font-size: 12.5px; }
}

@container (max-width: 470px) {
  .mrp-chart-siglab { font-size: 14px; }
}

/* On the valuing-happiness, anxiety and negative-affect
   charts the annotation is not a significance bracket but
   the finding said in words, so it is lifted out of the muted default
   and set as an in-chart note — the same treatment
   .mrp-pq-note carries: the series blue weighted
   toward navy, at 700. The weight is what lets the
   hue register at all; the title's paler mix of
   #669bbc reads grey at this size, and #669bbc on
   its own is about 2.9:1 on paper. This mix holds
   about 5:1. It keeps its own narrow-width tiers,
   since the ID here outranks the generic ones
   above, and the steps stop where the longest line
   still clears the right edge of the 700-unit
   drawing. */

#fig-valuing-happiness .mrp-chart-siglab,
#fig-hofmann-anxiety .mrp-chart-siglab,
#fig-butler-rapport .mrp-chart-siglab,
#fig-gratitude-indebtedness .mrp-chart-siglab,
#fig-panas-acceptance .mrp-chart-siglab {
  font-size: 15px;
  font-weight: 700;
  fill:
    color-mix(in srgb, var(--ch-b, #2f8fc4) 70%,
      var(--mrp-navy, #003049));
}

@container (max-width: 660px) {
  #fig-valuing-happiness .mrp-chart-siglab,
  #fig-hofmann-anxiety .mrp-chart-siglab,
  #fig-butler-rapport .mrp-chart-siglab,
  #fig-gratitude-indebtedness .mrp-chart-siglab,
  #fig-panas-acceptance .mrp-chart-siglab {
    font-size: 15.5px;
  }
}

@container (max-width: 470px) {
  #fig-valuing-happiness .mrp-chart-siglab,
  #fig-hofmann-anxiety .mrp-chart-siglab,
  #fig-butler-rapport .mrp-chart-siglab,
  #fig-gratitude-indebtedness .mrp-chart-siglab,
  #fig-panas-acceptance .mrp-chart-siglab {
    font-size: 16px;
  }
}

/* arrowhead for an annotation that measures a gap
   between two bars — same muted ink as the line it
   terminates */

.mrp-chart-arrow {
  fill: var(--mrp-muted, #6b6e76);
}

/* error bars on a filled bar read in ink, not in
   the bar's own color, so they stay legible where
   they cross it */

.mrp-chart-err--bar {
  stroke: var(--mrp-ink-2, #3a3d42);
  opacity: 0.85;
}

/* Cycle diagram — a state loop over a scan
   timeline (Class 2, the mind-wandering cycle).
   Same rule as the plots: the phase color rides
   on a swatch or a filled block, never on the
   type, so every label keeps ink contrast
   whatever hue it names. */

.mrp-cycle-node rect {
  fill: var(--mrp-paper, #fafaf8);
  stroke-width: 1.6;
}

.mrp-cycle-name {
  font-size: 14.5px;
  font-weight: 600;
  fill: var(--mrp-navy, #003049);
}

/* the paper's own shorthand for each state, kept
   because the timeline and the brain figure both
   label by it — set as a quiet second line under the
   plain-English name, in the same small-caps voice
   the timeline below uses for the same word */

.mrp-cycle-code {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--mrp-muted, #6b6e76);
}

/* the arrows carry structure, not identity, so
   they stay neutral rather than taking either
   state's color.

   the fade lives on the group, not on the line and
   the head separately: a line and its arrowhead
   overlap by design, and two translucent paints
   stacked there double up into a dark wedge inside
   the head. one opaque paint faded once composites
   the pair as a single shape, so the overlap is
   invisible at any background. same rendered tone
   as the 38% it replaces. */

.mrp-cycle-arrow {
  opacity: 0.38;
}

.mrp-cycle-arrow path {
  fill: none;
  stroke: var(--mrp-navy, #003049);
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* the analytical windows in Panel B */

.mrp-band-lab {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--mrp-ink-2, #3a3d42);
}

/* the window durations and the TR note. these are
   the sub-labels of this drawing, but they do NOT
   take .mrp-chart-tick--sub: that class is dropped
   at phone widths because a plot's qualifiers
   collide there, whereas each duration here has its
   own window to sit over and the TR is the whole
   point of the timeline */

.mrp-scan-note {
  font-size: 11px;
  fill: var(--mrp-muted, #6b6e76);
}

/* Glass brain — the clusters reported for each
   phase of that same cycle, drawn flat (Class 2).
   Four phases across, two views down, every cluster
   in a phase projected onto one silhouette. Each
   panel takes the hue its phase already owns in the
   cycle diagram above it and the 3-D viewer below,
   so the three figures read as one set — and, as
   everywhere else here, the hue rides on the marks
   and a swatch, never on the type. */

.mrp-brain-shell {
  fill: color-mix(in srgb, var(--mrp-navy, #003049) 4%,
    transparent);
  stroke: color-mix(in srgb, var(--mrp-navy, #003049) 26%,
    transparent);
  stroke-width: 1.2;
}

/* two schematic landmarks — the lateral fissure and
   the line above the cerebellum. They carry no data
   and are traced from nothing; they are there so a
   smooth outline reads as a brain rather than a
   bean, which is why they set fainter than it */

.mrp-brain-sulcus {
  fill: none;
  stroke: color-mix(in srgb, var(--mrp-navy, #003049) 16%,
    transparent);
  stroke-width: 1;
  stroke-linecap: round;
}

/* the midline on the view from above. it is what
   tells a reader which marks are left and which are
   right, so it is drawn — but as an annotation,
   lighter and dashed against the solid outline */

.mrp-brain-mid {
  stroke: color-mix(in srgb, var(--mrp-navy, #003049) 16%,
    transparent);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

/* a cluster: the published peak and the published
   volume, and nothing else. Real clusters are not
   round, so the fill is translucent and the edge
   soft — it should read as a region of activity
   rather than as a boundary, and where two circles
   overlap that is the flattening, not a reported
   conjunction. currentColor lets a whole panel be
   tinted from the one group that wraps it */

.mrp-brain-cluster circle {
  fill: currentColor;
  fill-opacity: 0.3;
  stroke: currentColor;
  stroke-opacity: 0.75;
  stroke-width: 1.2;
}

.mrp-brain-swatch {
  fill: currentColor;
}

/* set well down from the cycle diagram's state
   names: four of these sit side by side in one
   700-unit row, and "Awareness of wandering" runs
   into the next column's swatch at any more */

.mrp-brain-name {
  font-size: 12px;
  font-weight: 600;
  fill: var(--mrp-navy, #003049);
}

/* the paper's contrast code, then the network the
   authors placed it in. The second is the reason
   the figure is here, so it sets in ink while the
   code above it stays a quiet cross-reference to
   the cycle diagram and the viewer */

.mrp-brain-sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  fill: var(--mrp-muted, #6b6e76);
}

.mrp-brain-sub--net {
  letter-spacing: 0;
  fill: var(--mrp-ink-2, #3a3d42);
}

/* which way each row is looking, named once at the
   left edge rather than four times across */

.mrp-brain-view {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--mrp-muted, #6b6e76);
}

/* which end is the front, and which side is which.
   Also spelled out on the first column only: the
   other three repeat its geometry exactly, so
   repeating the labels would be four times the ink
   for one fact */

.mrp-brain-orient {
  font-size: 10px;
  font-weight: 600;
  fill: var(--mrp-muted, #6b6e76);
}

/* the same two tiers the charts above use, kept
   HERE rather than in that shared block: these
   rules and the ones they override carry equal
   specificity, so the later of the two wins, and
   the shared block sits earlier in the file than
   the .mrp-brain-* bases do.

   the column names are not bumped. "Awareness of
   wandering" already stops ten units short of the
   next column's swatch at 12, so it is the one
   label here with nowhere to grow — the same
   constraint the cycle diagram's cards hit. */

@container (max-width: 660px) {
  .mrp-brain-sub { font-size: 11.5px; }
  .mrp-brain-view { font-size: 11.5px; }
  .mrp-brain-orient { font-size: 11.5px; }
}

@container (max-width: 470px) {
  .mrp-brain-sub { font-size: 13px; }
  .mrp-brain-view { font-size: 13px; }
  .mrp-brain-orient { font-size: 13px; }
}

/* Upward spiral — the same loop drawn as a coil
   that climbs, so the repetition and the gain are
   one mark rather than two. The near half of each
   turn is drawn solid and the far half pale, which
   is what gives a flat path its depth. */

.mrp-spiral--front,
.mrp-spiral--back {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.mrp-spiral--front {
  stroke:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 55%,
      var(--mrp-navy, #003049));
}

.mrp-spiral--back {
  stroke:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 40%,
      transparent);
}

.mrp-spiral-arrow {
  fill:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 55%,
      var(--mrp-navy, #003049));
}

/* a station on the coil. the paper-colored ring
   keeps the dot legible where the coil's far half
   passes behind it */

.mrp-spiral-dot {
  fill: var(--mrp-navy, #003049);
  stroke: var(--mrp-paper, #fafaf8);
  stroke-width: 2;
}

/* the button press: the one event in the figure
   that is a measurement rather than a model, so it
   is the heaviest mark on the drawing */

.mrp-cycle-press {
  stroke: var(--mrp-ink, #18191c);
  stroke-width: 3.4;
}

/* Six core skills — the class's own map of the
   practice: the four R's drawn as a closed loop,
   the two S's branching off it. Unlike the plots,
   colour here groups rather than identifies: one
   hue for the whole 4R family, one for the 2S
   family, because the 4-plus-2 split IS the
   finding. The split is never left to colour
   alone — a bracket names each family in type,
   and the warm family also carries a tinted
   fill. */

.mrp-skill-node rect {
  fill: var(--mrp-paper, #fafaf8);
  stroke: var(--ch-b, #2f8fc4);
  stroke-width: 1.6;
}

.mrp-skill-node--warm rect {
  fill:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 15%,
      var(--mrp-paper, #fafaf8));
  stroke: var(--mrp-gold, #c2a14f);
}

/* the family name, set in the same small-caps
   voice the state codes use, and its one-line
   gloss underneath */

.mrp-skill-group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--mrp-navy, #003049);
}

.mrp-skill-groupsub {
  font-size: 11.5px;
  fill: var(--mrp-muted, #6b6e76);
}

.mrp-skill-bracket {
  fill: none;
  stroke:
    color-mix(in srgb, var(--mrp-navy, #003049) 28%,
      transparent);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

/* the long way round — Savor back to Recognize, which
   is what closes the six into one cycle rather than a
   loop with two cards hanging off it. it dots because
   it restates at full scale the passage the loop's own
   Return-to-Recognize arrow already makes: the same
   move, not a further step. lighter and thinner than
   the solid arrows for the same reason, so the loop
   still reads first */

/* faded on the group for the same reason the solid
   arrows are — see .mrp-cycle-arrow. the head no
   longer needs its own tint to match this line's
   weight: it now takes the same one by construction */

.mrp-skill-return {
  opacity: 0.3;
}

.mrp-skill-return path {
  fill: none;
  stroke: var(--mrp-navy, #003049);
  stroke-width: 2;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}

/* the two scopes in the second drawing: what the
   practice actually is, and the smaller thing
   people take it to be. both are annotations laid
   over the model rather than parts of it, so both
   dash — the wider one fainter, so the drawing it
   contains still reads first */

.mrp-skill-scope {
  fill: none;
  stroke:
    color-mix(in srgb, var(--mrp-navy, #003049) 30%,
      transparent);
  stroke-width: 1.5;
  stroke-dasharray: 8 6;
}

/* the wider claim is the one that needs to read as a
   place rather than a line, so it takes a ground: the
   sky the palette already carries. It is drawn before
   everything else in the figure, so the fill sits
   behind the cards, arrows and headings inside it. */

.mrp-skill-scope--all {
  fill: var(--mrp-sky, #eef5fb);
  stroke:
    color-mix(in srgb, var(--mrp-navy, #003049) 20%,
      transparent);
}

.mrp-skill-scope--part {
  fill:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 7%,
      transparent);
  stroke:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 75%,
      var(--mrp-navy, #003049));
}

.mrp-skill-scopelab {
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--mrp-navy, #003049);
}

/* the inner scope's label is the misconception the
   figure is there to correct, so it is not an aside:
   it heads the column in the gold its box carries,
   bold enough to be read before the cards under it.
   Size still comes from the base class, so it grows
   with the other scope label at narrow widths and
   never outruns the wider claim above it. */

.mrp-skill-scopelab--part {
  font-weight: 700;
  fill: var(--mrp-gold-dark, #a8893b);
}

/* the outer scope's answering label: same weight and voice as the
   gold misconception it faces, in the blue of the cards it heads */

.mrp-skill-scopelab--all {
  font-weight: 700;
  fill: color-mix(in srgb, var(--mrp-blue, #669bbc) 65%,
    var(--mrp-navy, #003049));
}

/* these names DO get the narrow-width bump the
   cycle's state names are denied: the longest of
   them is one short word, so even at 17px it clears
   its 150-unit card by a wide margin. the baselines
   are drawn at the card centre plus 5, tuned for
   14.5px — at 17px the optical centre wants 6, and
   that one unit inside a 44-unit card is not a
   shift the eye can find */

@container (max-width: 660px) {
  .mrp-skill-node .mrp-cycle-name { font-size: 15.5px; }
  .mrp-skill-group { font-size: 12px; }
  .mrp-skill-groupsub { font-size: 13px; }
  .mrp-skill-scopelab { font-size: 13.5px; }
}

@container (max-width: 470px) {
  .mrp-skill-node .mrp-cycle-name { font-size: 17px; }
  .mrp-skill-group { font-size: 13.5px; }
  .mrp-skill-groupsub { font-size: 14.5px; }
  /* the scope labels are the widest type in the
     drawing and sit against the dashed edge they
     annotate, so they take the smaller of the two
     phone-width steps */
  .mrp-skill-scopelab { font-size: 14px; }
}

/* an inset figure's caption is the sentence beside
   it, so it sets a shade smaller */

.mrp-figure--inset-right .mrp-chart + figcaption,
.mrp-figure--inset-left .mrp-chart + figcaption {
  font-size: 0.82rem;
}

/* same reasoning for a medium figure: the caption is
   narrower than the measure, so it sets a shade
   smaller rather than running to twice the depth of
   the image above it */

.mrp-figure--medium figcaption {
  font-size: 0.82rem;
}

/* Variant: side caption — the chart takes two
   thirds of the column and the caption holds the
   left third, aligned to the top of the plot.
   For figures whose explanation deserves to be
   read beside them rather than after them. */

.mrp-figure--sidecap {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 26px;
  align-items: start;
}

.mrp-figure--sidecap .mrp-chart {
  margin-top: 0;
}

/* the caption's first line sits on the chart's
   first line — the title when there is one, the
   first bar label when there is not */

.mrp-figure--sidecap figcaption,
.mrp-course .mrp-figure--sidecap figcaption {
  margin: 3px 0 0;
  font-size: 0.84rem;
}

.mrp-figure--sidecap:has(.mrp-chart-title) figcaption,
.mrp-course .mrp-figure--sidecap:has(.mrp-chart-title)
  figcaption {
  margin-top: 0;
}

@media (max-width: 640px) {
  .mrp-figure--sidecap {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .mrp-figure--sidecap figcaption {
    order: 2;
  }
}

/* the table view, folded away under the figure */

.mrp-chart-data {
  margin: 0 0 1.6em;
}

/* inside a figure it hangs off the caption, so it
   trades the standalone bottom margin for a top one */

.mrp-figure .mrp-chart-data {
  margin: 1.1em 0 0;
}

.mrp-chart-data summary {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mrp-muted, #6b6e76);
  cursor: pointer;
}

.mrp-chart-data summary:hover {
  color: var(--mrp-blue, #669bbc);
}

.mrp-chart-data .mrp-table-scroll {
  margin: 0;
}

.mrp-chart-data .mrp-table {
  margin-top: 1em;
}

.mrp-chart-se {
  color: var(--mrp-muted, #6b6e76);
  font-size: 0.86em;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   13a2 · Region matrix — for an imaging result whose
   finding is categorical rather than spatial: which
   systems engage under which condition, not where they
   sit in the skull. A brain plate spends nearly all its
   ink on anatomy the reader cannot use; this spends it
   on the comparison instead. Regions run down in named
   functional bands, conditions run across, and one dot
   marks an activation. Colour carries the skill family
   — cool for attentional, warm for constructive — so
   the two families separate at a glance and a column
   with nothing in it reads as a finding, not an
   oversight.
   ---------------------------------------------------------- */

/* the legend and the paired cards sit outside the table,
   so the family colours are declared on all three or
   their badges paint white text onto nothing */

.mrp-matrix,
.mrp-matrix-legend,
.mrp-skills--pair,
.mrp-xtab {
  --mx-fam: #2f6f9e;
  --mx-lk: #3f8a4e;
}

/* the plain-language pair: the same finding as the grid
   below it, read as two lists instead of a matrix. the
   function is the visible label and the anatomy lives in
   the term popover, so a reader gets the point without
   meeting a single Latin name */

.mrp-skills--pair .mrp-skill-head {
  display: flex;
  align-items: center;
  gap: 0.55em;
}


/* the two entries that appear in both lists are marked
   rather than silently repeated — the overlap is part of
   the finding, not a duplication to be hidden */

.mx-shared {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.1em 0.5em;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: 999px;
  font-family: var(--mrp-sans);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mrp-muted, #6b6e76);
  vertical-align: 0.12em;
}

/* variants of the .mx-shared pill, for a result whose two columns rest on
   different KINDS of evidence rather than on one study's two conditions.
   --count carries "3 of 5 studies"; --down marks the one finding that went
   the other way, because "activated" and "deactivated" must never be told
   apart by position in a list alone */

.mx-shared--count {
  letter-spacing: 0.04em;
  text-transform: none;
}

.mx-shared--down {
  border-color: var(--mx-fam, #2f6f9e);
  color: var(--mx-fam, #2f6f9e);
}

/* direction of activation, marked on EVERY row rather than only on the one
   that went the other way. The arrow is decorative; each row also carries
   visually hidden words, so direction never rests on a glyph or on colour */

.mx-dir {
  display: inline-block;
  width: 1.1em;
  margin-right: 0.4em;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: 0.04em;
  color: var(--mrp-muted, #6b6e76);
}

.mx-dir--up { color: var(--mrp-ink-2, #3a3d42); }

/* the anatomical parcels sitting under an umbrella term, muted so the card
   still reads as a short list rather than a taxonomy */

.mx-sub {
  display: block;
  margin-top: 0.25em;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--mrp-muted, #6b6e76);
}

/* the evidence strip under each card head: the single most important thing
   about this figure is that the two columns are not equally supported, so it
   is stated on the card itself and not only in the caption */

.mx-evidence {
  margin: 0 0 0.2em;
  font-family: var(--mrp-sans);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--mrp-muted, #6b6e76);
}

.mx-evidence b {
  font-weight: 700;
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mrp-sans);
  font-size: 0.86rem;
}

/* the key is read before the grid, each family shown as
   the same badge that appears in the cells */

.mrp-matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em 1.9em;
  margin: 0 0 1.2em;
  font-family: var(--mrp-sans);
  font-size: 0.84rem;
}

.mrp-matrix-key {
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-matrix-key b {
  font-weight: 700;
  color: var(--mrp-navy, #003049);
}

/* the badge: family initials inside a filled disc, so the
   family survives greyscale and colour-blindness — colour
   and label say the same thing twice */

.mx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--mrp-sans);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  flex: none;
}

.mx-badge--fam { background: var(--mx-fam); }
.mx-badge--lk { background: var(--mx-lk); }

/* the card heads carry the same badge at a smaller size;
   declared after the base rule so it actually wins */

.mx-badge--sm {
  width: 26px;
  height: 26px;
  font-size: 0.54rem;
}

/* ----------------------------------------------------------
   13a3 · Practice x task cross-tab — the same result read
   the other way round: each practice gets a row, each task
   a column, and the regions are listed inside the cell.
   Two rows instead of nine, and the one condition that
   returned nothing becomes a single empty cell rather than
   a column of blanks.
   ---------------------------------------------------------- */

.mrp-xtab {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mrp-sans);
  font-size: 0.86rem;
  margin: 0 0 0.4em;
}

.mrp-xtab thead th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mrp-navy, #003049);
  text-align: left;
  padding: 0 0.9em 0.6em;
  border-bottom: 1px solid var(--mrp-navy, #003049);
}

.mrp-xtab .xt-practice {
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  padding: 1em 1.1em 1em 0;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

/* badge over name rather than beside it: the row label
   column stays narrow so the cells get the width */

.mrp-xtab .xt-practice .mx-badge {
  display: flex;
  margin-bottom: 0.45em;
}

.mrp-xtab .xt-name {
  display: block;
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-xtab td {
  vertical-align: top;
  padding: 1em 0.9em;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
  border-left: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-xtab .xt-list,
.mrp-course .mrp-xtab .xt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mrp-xtab .xt-list li {
  margin: 0 0 0.42em;
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-xtab .xt-list li:last-child { margin-bottom: 0; }

/* the condition that produced nothing is said, not left
   blank, so it cannot be mistaken for missing data */

.mrp-xtab .xt-none {
  font-style: italic;
  color: var(--mrp-muted, #6b6e76);
}

@media (max-width: 560px) {
  .mrp-xtab { font-size: 0.78rem; }
  .mrp-xtab thead th { font-size: 0.62rem; padding: 0 0.5em 0.5em; }
  .mrp-xtab td { padding: 0.8em 0.5em; }
  .mrp-xtab .xt-practice { padding-right: 0.6em; }
}

/* one header per task now: the two families share a
   column, which is what makes an empty cell legible as
   "neither" and a single badge as "only this one" */

.mrp-matrix .mx-task {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mrp-navy, #003049);
  text-align: center;
  padding: 0 0.5em 0.7em;
  border-bottom: 1px solid var(--mrp-navy, #003049);
}

/* the functional band label — the same kicker voice the
   callouts use, so a band reads as a heading inside the
   grid rather than as another data row */

.mrp-matrix .mx-band th {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mrp-gold-dark, #a8893b);
  text-align: left;
  padding: 1.6em 0 0.5em;
}

.mrp-matrix tbody tr:first-child th {
  padding-top: 1em;
}

.mrp-matrix .mx-region {
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  color: var(--mrp-ink-2, #3a3d42);
  padding: 0.3em 0 0.3em 0;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

/* the region names carry their plain-language meaning in
   a term popover rather than in a gloss column: nine
   glosses set beside nine names was a second column of
   type competing with the badges, and the meaning is
   what a reader wants on demand, not permanently */

.mrp-matrix .mx-region .mrp-term {
  font-weight: inherit;
}

.mrp-matrix td {
  text-align: center;
  padding: 0.3em 0.4em;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

/* the column that returned nothing for one family is
   stated rather than left to inference */

.mrp-matrix .mx-nullnote {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--mrp-muted, #6b6e76);
  text-align: center;
  padding-top: 0.8em;
  border-bottom: 0;
}

.mrp-matrix tbody tr:not(.mx-band):hover td,
.mrp-matrix tbody tr:not(.mx-band):hover .mx-region {
  background: var(--mrp-sky, #eef5fb);
}

@media (max-width: 560px) {
  .mrp-matrix { font-size: 0.8rem; }
  .mrp-matrix .mx-region {
    white-space: normal;
    padding-right: 0.6em;
  }
  .mrp-matrix .mx-task {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }
  .mx-badge {
    width: 30px;
    height: 30px;
    font-size: 0.58rem;
  }
}

/* ----------------------------------------------------------
   13a4 · Embedded 3D brain — an interactive figure served
   from its own page and framed in an iframe, so the
   WebGL canvas, its vendored library and its ~3.6MB of
   mesh assets stay entirely outside this document. The
   iframe also isolates the tool's stylesheet from this
   one, which matters because the tool is not built on
   these tokens.

   The height here is ONLY a fallback for the moment before
   the embed reports its real height, and for the case where
   the script never runs. The embed measures itself and posts
   its height — see initEmbedAutoHeight in mrp-course.js.

   Do not be tempted to "simplify" this back to a fixed
   height. The content height is not monotonic in width:
   measured at 340/400/520/635/700px the figure wants
   469/497/552/498/518px. It peaks in the MIDDLE, around
   520px, where the stage is still fairly tall and the
   caption has begun to wrap. A fixed 520 — which looks
   generous against the 518 the widest column needs —
   clips by 32px at that middle width. That bug is exactly
   why the measurement moved into the embed.

   470 is used below because it clears the measured peak
   of 462px. Re-measure if the embed's own markup changes:
   removing its caption dropped the peak from 552 to 462.

   loading="lazy" on the element keeps the mesh payload
   off the wire for readers who never scroll this far.
   ---------------------------------------------------------- */

.mrp-embed-3d {
  display: block;
  width: 100%;
  max-width: var(--mrp-col, 700px);
  height: 470px;
  margin: 0 auto;
  border: 0;
  /* the embed paints its own frame and rounded corners */
  background: transparent;
  color-scheme: light;
}

/* ----------------------------------------------------------
   13b · Figure 1 plates — the source paper's own
   slice thumbnails, cropped from the published figure
   and padded to a uniform square with black (their
   native ground), rather than redrawn. Colors and
   pixel content are untouched; only the crop and the
   scale label are ours. Kept inside the framed
   "research plate" treatment (.mrp-plate) so the set
   reads as evidence, not as a house-style diagram.
   ---------------------------------------------------------- */

.mrp-fig1-scale {
  margin: 0 0 24px;
}

.mrp-fig1-scale-labs {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 7px;
}

.mrp-fig1-scale-lab {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mrp-muted, #6b6e76);
}

/* stops sampled at their true proportional position
   in the source colorbar, not evenly spaced: the
   source spends nearly all its length on red↔orange
   and blue↔cyan, with the hue itself flipping over a
   sliver of green in the middle ~2% of the bar. Even
   spacing had stretched that sliver into a visible
   rainbow band; this keeps the two ramps reading as
   red and blue, exactly as in the source. */

.mrp-fig1-scale-bar {
  display: block;
  width: 100%;
  height: 16px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to right,
    #1b00ff 0%, #1040ff 10%, #2c76fc 21%,
    #5db8f1 36%, #65e9fb 46%, #78e9fb 48.7%,
    #78e9fb 49.9%,#555555 50.0%, #fff849 50.1%,
    #fff849 51.3%, #faf04a 54%, #fcc23e 64%,
    #e58331 80%, #f1341b 100%);
}

.mrp-fig1-scale-note,
.mrp-course .mrp-fig1-scale-note {
  margin: 7px 0 0;
  text-align: center;
  font-family: var(--mrp-sans);
  font-size: 0.76rem;
  font-style: italic;
  color: var(--mrp-muted, #6b6e76);
}

.mrp-fig1-group {
  margin: 0 0 20px;
}

.mrp-fig1-group:last-child {
  margin-bottom: 0;
}

.mrp-fig1-group-title,
.mrp-course .mrp-fig1-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mrp-sans);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--mrp-navy, #003049);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-fig1-group-n {
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--mrp-muted, #6b6e76);
  white-space: nowrap;
}

.mrp-fig1-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* each source crop is trimmed tight to the brain
   itself (native aspect ratio, not square) — the
   square is added live here, in CSS: a fixed square
   window with the paper's own black ground, and the
   image laid inside with object-fit so it letterboxes
   rather than stretching. Nothing is baked into the
   exported pixels, so the padding can be revisited
   without re-cropping. */

.mrp-fig1-thumb {
  display: block;
  width: calc(20% - 6.4px);
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: 4px;
}

/* .mrp-figure--framed img (the research-plate rule,
   for a single framed photo) also matches these
   nested thumbnails and would paint them white with
   14px of padding — that rule was never meant to
   reach inside a plate holding a grid of its own
   images, so it's overridden here with equal
   specificity, declared later. */

.mrp-plate .mrp-fig1-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

@media (max-width: 640px) {
  .mrp-fig1-thumb {
    width: calc(33.333% - 6px);
  }
}

/* Contrast alternatives (drafts) — three other
   settings of the same this-not-that lesson.
   A "turn": ordinary -> deliberate as a movement
   behind a gold arrow. B "mirror": opposition
   around a center axis. C "rather-than":
   deliberate prose with the default demoted to a
   trailing gray clause. Pick one. */

.mrp-turn {
  margin: 2.4em 0;
}

.mrp-turn-row {
  display: grid;
  grid-template-columns:
    minmax(76px, 0.42fr) 1fr 30px 1.12fr;
  column-gap: 14px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-turn-row:last-child {
  border-bottom: 0;
}

.mrp-turn-row--head {
  padding: 0 0 0.7em;
  border-bottom: 1px solid var(--mrp-navy, #003049);
}

.mrp-turn-mode {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mrp-clay, #a2543f);
}

.mrp-turn-mode--target {
  color: var(--mrp-ok, #3e6b4f);
}

.mrp-turn-domain {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--mrp-navy, #003049);
}

.mrp-turn-from,
.mrp-course .mrp-turn-from,
.mrp-turn-to,
.mrp-course .mrp-turn-to {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
}

.mrp-turn-from,
.mrp-course .mrp-turn-from {
  color: var(--mrp-muted, #6b6e76);
}

.mrp-turn-to,
.mrp-course .mrp-turn-to {
  color: var(--mrp-ink, #18191c);
}

.mrp-turn-arrow {
  justify-self: center;
  color: var(--mrp-gold-dark, #a8893b);
  font-size: 1.05rem;
  line-height: 1;
}

@media (max-width: 640px) {
  .mrp-turn-row--head {
    display: none;
  }
  .mrp-turn-row {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding: 14px 0;
  }
  .mrp-turn-arrow {
    justify-self: start;
    transform: rotate(90deg);
  }
}

.mrp-mirror {
  margin: 2.4em 0;
}

.mrp-mirror-row {
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  column-gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-mirror-row:last-child {
  border-bottom: 0;
}

.mrp-mirror-row--head {
  padding: 0 0 0.7em;
  border-bottom: 1px solid var(--mrp-navy, #003049);
}

.mrp-mirror-mode {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mrp-clay, #a2543f);
  text-align: right;
}

.mrp-mirror-mode--target {
  color: var(--mrp-ok, #3e6b4f);
  text-align: left;
}

.mrp-mirror-domain {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--mrp-muted, #6b6e76);
  text-align: center;
  padding-top: 0.2em;
}

.mrp-mirror-cell,
.mrp-course .mrp-mirror-cell {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--mrp-muted, #6b6e76);
  text-align: right;
}

.mrp-mirror-cell--target,
.mrp-course .mrp-mirror-cell--target {
  color: var(--mrp-ink, #18191c);
  text-align: left;
}

@media (max-width: 640px) {
  .mrp-mirror-row--head {
    display: none;
  }
  .mrp-mirror-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
  .mrp-mirror-domain {
    order: -1;
    text-align: left;
    padding: 0 0 2px;
  }
  .mrp-mirror-cell {
    text-align: left;
  }
}

.mrp-rather {
  margin: 2.2em 0;
}

.mrp-rather-item,
.mrp-course .mrp-rather-item {
  margin: 0 0 1.05em;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--mrp-ink, #18191c);
}

.mrp-rather-item:last-child {
  margin-bottom: 0;
}

.mrp-rather-item b {
  color: var(--mrp-navy, #003049);
}

.mrp-rather-not {
  color: var(--mrp-ink-3, #555860);
}

/* ----------------------------------------------------------
   14 · Buttons and chips
   ---------------------------------------------------------- */

.mrp-btn {
  display: inline-block;
  font-family: var(--mrp-sans);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.72em 1.25em;
  border-radius: 8px;
  border: 2px solid var(--mrp-navy, #003049);
  background: var(--mrp-navy, #003049);
  color: var(--mrp-cream, #fdf0d5);
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s,
    color 0.15s, transform 0.06s;
}

.mrp-btn:hover {
  background: var(--mrp-navy-deep, #00243a);
  border-color: var(--mrp-navy-deep, #00243a);
  color: var(--mrp-cream, #fdf0d5);
}

.mrp-btn:active {
  transform: translateY(1px);
}

.mrp-btn--gold {
  background: var(--mrp-gold, #c2a14f);
  border-color: var(--mrp-gold, #c2a14f);
  color: var(--mrp-navy, #003049);
}

.mrp-btn--gold:hover {
  background: var(--mrp-gold-dark, #a8893b);
  border-color: var(--mrp-gold-dark, #a8893b);
  color: #fff;
}

.mrp-btn--ghost {
  background: transparent;
  color: var(--mrp-navy, #003049);
}

.mrp-btn--ghost:hover {
  background: var(--mrp-sky, #eef5fb);
  color: var(--mrp-navy, #003049);
}

.mrp-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.mrp-btn[hidden] {
  display: none;
}

[data-mrp-retry]::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.45em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.mrp-chip {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: var(--mrp-bg-alt, #f2f0eb);
  border: 1px solid var(--mrp-line, #e4e2dd);
  color: var(--mrp-ink-3, #555860);
}

.mrp-chip--gold {
  background: var(--mrp-gold-soft, #faf3e0);
  border-color: var(--mrp-gold, #c2a14f);
  color: var(--mrp-gold-dark, #a8893b);
}

.mrp-chip--ok {
  background: var(--mrp-ok-soft, #e9f0ea);
  border-color: var(--mrp-ok, #3e6b4f);
  color: var(--mrp-ok, #3e6b4f);
}

/* ----------------------------------------------------------
   15 · Quiz (functional via mrp-course.js)
   ---------------------------------------------------------- */

.mrp-quiz {
  margin: 2.2em 0;
  padding: 22px 22px 18px;
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-top: 2px solid var(--mrp-navy, #003049);
  border-radius: var(--mrp-radius, 10px);
  box-shadow: var(--mrp-shadow);
  /* a quiz is a full-measure card: it never sits beside a
     floated figure, it starts below one */
  clear: both;
}

/* everything in a quiz is sans, overriding the serif `p` default */
.mrp-quiz p {
  font-family: var(--mrp-sans);
}

.mrp-quiz fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.mrp-quiz-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mrp-gold-dark, #a8893b);
  margin-bottom: 0.6em;
}

.mrp-quiz legend,
.mrp-quiz-q {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--mrp-navy, #003049);
  line-height: 1.4;
  margin-bottom: 0.9em;
  padding: 0;
}

.mrp-quiz-hint {
  font-size: 0.85rem;
  color: var(--mrp-muted, #6b6e76);
  margin: -0.5em 0 0.9em;
}

.mrp-choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1.5px solid var(--mrp-line, #e4e2dd);
  border-radius: var(--mrp-radius-sm, 7px);
  cursor: pointer;
  font-size: 0.98rem;
  line-height: 1.5;
  transition: border-color 0.12s, background 0.12s;
}

.mrp-choice:hover {
  border-color: var(--mrp-blue, #669bbc);
  background: var(--mrp-sky, #eef5fb);
}

.mrp-choice input {
  margin-top: 0.28em;
  accent-color: var(--mrp-navy, #003049);
  flex: none;
  width: 1.05em;
  height: 1.05em;
}

.mrp-choice:has(input:checked) {
  border-color: var(--mrp-navy, #003049);
  background: var(--mrp-sky, #eef5fb);
}

/* graded states (set by JS) */

.mrp-quiz.is-graded .mrp-choice {
  cursor: default;
}

.mrp-choice.is-correct {
  border-color: var(--mrp-ok, #3e6b4f);
  background: var(--mrp-ok-soft, #e9f0ea);
}

.mrp-choice.is-incorrect {
  border-color: var(--mrp-clay, #a2543f);
  background: var(--mrp-clay-soft, #f7e9e3);
}

.mrp-choice .mrp-choice-tag {
  margin-left: auto;
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: center;
}

.mrp-choice.is-correct .mrp-choice-tag {
  color: var(--mrp-ok, #3e6b4f);
}

.mrp-choice.is-incorrect .mrp-choice-tag {
  color: var(--mrp-clay, #a2543f);
}

.mrp-quiz-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.mrp-quiz-feedback {
  font-weight: 700;
  font-size: 0.95rem;
}

.mrp-quiz-feedback.is-ok {
  color: var(--mrp-ok, #3e6b4f);
}

.mrp-quiz-feedback.is-err {
  color: var(--mrp-clay, #a2543f);
}

.mrp-quiz-expl {
  display: none;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--mrp-radius-sm, 7px);
  background: var(--mrp-gold-soft, #faf3e0);
  border-left: 3px solid var(--mrp-gold, #c2a14f);
  font-size: 0.95rem;
}

.mrp-quiz.is-graded .mrp-quiz-expl {
  display: block;
}

.mrp-quiz-expl p {
  margin: 0 0 0.5em;
}

.mrp-quiz-expl p:last-child {
  margin: 0;
}

/* ----------------------------------------------------------
   16 · Reflection / submission box
   Styled to match LifterLMS assignment surfaces; the
   same tokens skin .llms-* below.
   ---------------------------------------------------------- */

.mrp-submit {
  margin: 2.2em 0;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-top: 2px solid var(--mrp-gold, #c2a14f);
  border-radius: var(--mrp-radius, 10px);
  box-shadow: var(--mrp-shadow);
}

.mrp-submit-label {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mrp-gold-dark, #a8893b);
  margin-bottom: 0.6em;
}

/* The prompt sits at normal weight so a whole reflection box
   doesn't read as one block of bold; <strong> inside it carries
   the one or two phrases the learner should actually anchor on. */

.mrp-submit-q,
.mrp-course .mrp-submit-q {
  font-family: var(--mrp-sans);
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--mrp-navy, #003049);
  line-height: 1.4;
  margin: 0 0 0.9em;
}

.mrp-submit-q strong,
.mrp-course .mrp-submit-q strong {
  font-weight: 700;
}

.mrp-submit textarea {
  display: block;
  width: 100%;
  min-height: 160px;
  resize: vertical;
  font-family: var(--mrp-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mrp-ink, #18191c);
  background: var(--mrp-paper, #fafaf8);
  border: 1.5px solid var(--mrp-line, #e4e2dd);
  border-radius: var(--mrp-radius-sm, 7px);
  padding: 14px 16px;
}

.mrp-submit textarea:focus {
  outline: none;
  border-color: var(--mrp-gold, #c2a14f);
  box-shadow:
    0 0 0 3px
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 22%,
      transparent);
  background: #fff;
}

.mrp-submit-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.mrp-submit-count {
  font-size: 0.82rem;
  color: var(--mrp-muted, #6b6e76);
}

.mrp-submit-status {
  font-size: 0.82rem;
  color: var(--mrp-muted, #6b6e76);
  margin-left: auto;
}

.mrp-submit-status.is-saved {
  color: var(--mrp-ok, #3e6b4f);
  font-weight: 700;
}

/* ----------------------------------------------------------
   17 · Footnotes with popovers
   ---------------------------------------------------------- */

/* markers are blue, so a reference never reads as
   one of the gold accents around it */

.mrp-fn-ref {
  display: inline;
  font: inherit;
  font-family: var(--mrp-sans);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 75%,
      var(--mrp-navy, #003049));
}

.mrp-fn-ref sup {
  font-size: 0.72em;
  font-weight: 700;
  line-height: 0;
  padding: 0 0.15em;
}

.mrp-fn-ref:hover sup {
  text-decoration: underline;
}

.mrp-fn-pop {
  position: absolute;
  z-index: 400;
  animation: mrp-pop-in 0.16s ease-out;
  max-width: 340px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-top: 3px solid var(--mrp-gold, #c2a14f);
  border-radius: 0;
  box-shadow: 3px 4px 9px rgba(0, 0, 0, 0.4);
  font-family: var(--mrp-sans);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-fn-pop-num {
  font-weight: 700;
  color:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 75%,
      var(--mrp-navy, #003049));
  margin-right: 0.5em;
}

@keyframes mrp-pop-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mrp-endnotes {
  /* not rendered — it's kept in the DOM purely as the data
     source footnote popovers clone from (see initFootnotes()
     in mrp-course.js, which reads #fn-N by id regardless of
     visibility), so the reference list itself never shows */
  display: none;
}

.mrp-endnotes ol {
  font-size: 0.9rem;
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-endnotes li {
  margin-bottom: 0.7em;
}

.mrp-endnotes li:target {
  background: var(--mrp-gold-soft, #faf3e0);
  outline: 6px solid var(--mrp-gold-soft, #faf3e0);
  border-radius: 2px;
}

.mrp-fn-back {
  text-decoration: none !important;
  color: var(--mrp-gold-dark, #a8893b) !important;
  margin-left: 0.35em;
}

/* ----------------------------------------------------------
   18 · Course header + progress
   ---------------------------------------------------------- */

/* White bar; steps aside while reading down and
   returns the moment the reader scrolls up
   (.is-hidden toggled by mrp-course.js) */

.mrp-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
  transition: transform 0.28s ease;
  /* the hide/show toggle nudges this box's rendered size by a
     px or two (min-height swap via --mrp-header-h), which the
     browser's scroll anchoring "corrects" by silently shifting
     window.scrollY — that shift then re-triggers the scroll
     handler in the opposite direction, causing a feedback loop
     that looks like the header rapidly jittering up and down */
  overflow-anchor: none;
}

.mrp-header.is-hidden {
  transform: translateY(-100%);
}

/* progress bar rides along with the header's own
   translate, so counter-shift it by its own height
   to keep it pinned to the top of the viewport */

.mrp-progress {
  transition: transform 0.28s ease;
}

.mrp-header.is-hidden .mrp-progress {
  transform: translateY(100%);
}

.mrp-header-inner {
  max-width:
    calc(var(--mrp-map-w, 240px) + var(--mrp-col, 700px)
      + var(--mrp-gap, 56px) * 2);
  margin: 0 auto;
  min-height: var(--mrp-header-h, 64px);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.mrp-header-logo {
  flex: none;
  display: block;
}

.mrp-header-logo img,
.mrp-header-logo svg {
  display: block;
  height: 40px;
  width: auto;
}

/* nav links, matching the live MRP site: dark ink
   that turns blue on hover and for the current
   page */

.mrp-header-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
}

.mrp-header-nav a {
  font-family: var(--mrp-sans);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mrp-ink, #18191c);
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.mrp-header-nav a:hover,
.mrp-header-nav a[aria-current="page"] {
  color: var(--mrp-blue, #669bbc);
}

/* thin gold progress bar along the header's bottom edge */

.mrp-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 6px;
  width: 100%;
  background: transparent;
}

.mrp-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background:
    linear-gradient(90deg,
      var(--mrp-gold, #c2a14f),
      var(--mrp-gold-dark, #a8893b));
  transition: width 0.12s linear;
}

/* mobile nav toggle — hidden and inert above 900px; below
   that it replaces the always-visible nav with a hamburger
   that opens a dropdown (see initNavToggle() in mrp-course.js).
   900px lines up with the .mrp-layout breakpoint below, so the
   hamburger appears exactly when the course-map sidebar stacks —
   no gap where neither is present. */

.mrp-nav-toggle {
  display: none;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}

.mrp-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--mrp-navy, #003049);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mrp-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mrp-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.mrp-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* the cloned contents (divider, label, list) only make sense
   inside the mobile dropdown — above 900px .mrp-header-nav is
   an always-visible row and these stay out of it entirely.
   the back link's wording swaps the same way: "Dashboard" in
   the always-visible desktop row, "← Back to dashboard" once
   it's a standalone item in the mobile dropdown. */
.mrp-nav-divider,
.mrp-nav-contents-label,
.mrp-nav-contents,
.mrp-nav-back-mobile,
.mrp-nav-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .mrp-nav-divider,
  .mrp-nav-contents-label,
  .mrp-nav-contents {
    display: block;
  }
  .mrp-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    top: var(--mrp-header-h, 64px);
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    /* higher than every other z-index in this file (footnote
       and term popovers run up to 400) so the scrim can never
       be poked through by content on the page. The header only
       climbs this high while its own drawer is open (below), so
       this doesn't disturb the header's normal z-index:200,
       which popovers rely on being able to sit above. */
    z-index: 490;
  }
  .mrp-header.is-nav-open {
    z-index: 500;
  }
  .mrp-header.is-nav-open + .mrp-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .mrp-nav-back-mobile {
    display: inline;
  }
  .mrp-nav-back-desktop {
    display: none;
  }
  /* Resources is a desktop-row link, same as the old layout —
     the mobile drawer only carries the dashboard link and this
     page's own contents, so it stays out of the drawer */
  .mrp-nav-resources {
    display: none;
  }
  .mrp-nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .mrp-header-inner {
    position: relative;
  }
  /* a full-height drawer, flush against the header's bottom
     edge and the viewport's right edge, rather than a floating
     card — it reads as part of the header, not a popup hovering
     below it */
  .mrp-header-nav {
    margin-left: 0;
    position: fixed;
    top: var(--mrp-header-h, 64px);
    right: 0;
    left: auto;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border: 1px solid var(--mrp-line, #e4e2dd);
    padding: 18px 18px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.22s ease;
  }
  .mrp-header-nav a {
    padding: 12px 0;
    border-top: 1px solid var(--mrp-line, #e4e2dd);
    font-size: 0.95rem;
  }
  .mrp-header-nav a:first-child,
  .mrp-header-nav a.mrp-nav-back {
    border-top: 0;
    padding-top: 0;
  }
  .mrp-header.is-nav-open .mrp-header-nav {
    transform: translateX(0);
  }
  .mrp-nav-divider {
    border: 0;
    height: 1px;
    margin: 4px 0 14px;
    background: var(--mrp-line, #e4e2dd);
  }
  .mrp-course .mrp-nav-contents-label {
    margin: 0 0 14px;
    font-family: var(--mrp-sans);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mrp-muted, #6b6e76);
  }
  /* the cloned course map reuses .mrp-map's own list/node
     styling (see section 19) — it just needs to give up the
     sidebar's sticky positioning inside this dropdown */
  .mrp-nav-contents {
    position: static;
  }
  /* the horizontal logo lockup is ~8:1 — at the fixed 40px
     header height it runs ~320px wide and shoves the toggle
     off-screen. Scale it with viewport width instead of a flat
     height, so it's only as small as it needs to be to clear
     the toggle (24px at a 320px-wide phone, growing to 32px
     by ~400px and up). */
  .mrp-header-logo img {
    height: clamp(24px, 8vw, 32px);
  }
}

/* ----------------------------------------------------------
   19 · Layout + course map (scrollspy sidebar)
   ---------------------------------------------------------- */

/* Page head: breadcrumb + title, full-width above the
   course map and body columns. */

.mrp-page-head {
  max-width:
    calc(var(--mrp-map-w, 240px) + var(--mrp-col, 700px)
      + var(--mrp-gap, 56px) * 2);
  margin: 0 auto;
  padding: 50px 24px 42px;
}

.mrp-layout {
  max-width:
    calc(var(--mrp-map-w, 240px) + var(--mrp-col, 700px)
      + var(--mrp-gap, 56px) * 2);
  margin: 0 auto;
  padding: 24px 24px 80px;
  display: grid;
  grid-template-columns: var(--mrp-map-w, 240px)
    minmax(0, var(--mrp-col, 700px));
  gap: var(--mrp-gap, 56px);
  align-items: start;
}

.mrp-main {
  min-width: 0;
}

@media (max-width: 640px) {
  .mrp-page-head {
    padding: 32px 20px 20px;
  }
  .mrp-layout {
    padding-top: 8px;
  }
}

/* generous breathing room between top-level sections,
   with a hairline rule marking each new one */

.mrp-main section[data-mrp-region] + section[data-mrp-region] {
  border-top: 1px solid var(--mrp-line, #e4e2dd);
  margin-top: 52px;
  padding-top: 52px;
}

/* the section's own trailing paragraph shouldn't add
   its own margin on top of the divider above */

.mrp-main section[data-mrp-region] > p:last-child {
  margin-bottom: 0;
}

/* Paged / micro-consumption mode (?view=paged) — only the
   current section renders; mrp-course.js toggles which one
   carries .is-mrp-current. The built-in end-of-course pager
   (inside the last section) is replaced by a dynamically
   built one, so it's hidden here. */

html.mrp-paged .mrp-main > section[data-mrp-region] {
  display: none;
}

html.mrp-paged .mrp-main > section[data-mrp-region].is-mrp-current {
  display: block;
}

/* the current page is always the only thing on screen, so it
   should read like the very first section — no divider or
   top spacing left over from whichever hidden section happens
   to precede it in the DOM */

html.mrp-paged .mrp-main > section[data-mrp-region].is-mrp-current {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

html.mrp-paged .mrp-main > section[data-mrp-region] > nav.mrp-pager {
  display: none;
}

.mrp-map {
  position: sticky;
  top: calc(var(--mrp-header-h, 64px) + 28px);
  transition: top 0.28s ease;
}

.mrp-map summary {
  list-style: none;
  cursor: default;
}

.mrp-map summary::-webkit-details-marker {
  display: none;
}

.mrp-map-head {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mrp-muted, #6b6e76);
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-map ol {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* spine connecting the nodes */

.mrp-map ol::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--mrp-line, #e4e2dd);
}

.mrp-map li {
  position: relative;
  margin: 0;
}

.mrp-map a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 8px 7px 0;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--mrp-ink-3, #555860);
  text-decoration: none !important;
}

.mrp-map .mrp-node {
  width: 28px;
  height: 28px;
  font-size: 0.74rem;
  border-color:
    color-mix(in srgb, var(--mrp-muted, #6b6e76) 32%,
      var(--mrp-page, #fdf0d5));
  color: var(--mrp-muted, #6b6e76);
  background: var(--mrp-page, #fdf0d5);
}

.mrp-map a:hover {
  color: var(--mrp-navy, #003049);
}

.mrp-map a:hover .mrp-node {
  border-color: var(--mrp-blue, #669bbc);
  color: var(--mrp-blue, #669bbc);
}

/* done + current states (set by scrollspy) */

.mrp-map li.is-done a {
  color: var(--mrp-muted, #6b6e76);
}

.mrp-map li.is-done .mrp-node {
  background: var(--mrp-navy, #003049);
  border-color: var(--mrp-navy, #003049);
  color: var(--mrp-cream, #fdf0d5);
}

.mrp-map li.is-current a {
  color: var(--mrp-navy, #003049);
  font-weight: 700;
}

.mrp-map li.is-current .mrp-node {
  border-color: var(--mrp-gold, #c2a14f);
  color: var(--mrp-gold-dark, #a8893b);
  background: #fff;
  box-shadow:
    0 0 0 4px
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 25%,
      transparent);
}

/* sub-entries (h3-level). In accordion mode — set
   by mrp-course.js, so no-JS readers keep the full
   contents — only the section you are in shows its
   sub-entries. */

/* minmax(0, …) is required — a bare 0fr still
   floors at the row's min-content height */

.mrp-map.is-accordion li.mrp-map-sub {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  opacity: 0;
  transition: grid-template-rows 0.3s ease,
    opacity 0.2s ease;
}

.mrp-map.is-accordion li.mrp-map-sub > a {
  min-height: 0;
  overflow: hidden;
}

.mrp-map.is-accordion li.mrp-map-sub.is-open {
  grid-template-rows: minmax(0, 1fr);
  opacity: 1;
}

.mrp-map li.mrp-map-sub a {
  padding-left: 40px;
  font-size: 0.82rem;
}

.mrp-map li.mrp-map-sub a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mrp-line, #e4e2dd);
  transform: translate(0, -50%);
}

.mrp-map li.mrp-map-sub.is-current a::before {
  background: var(--mrp-gold, #c2a14f);
}

/* mobile: the sidebar map is replaced by the hamburger's own
   contents list (cloned into .mrp-nav-contents — see
   initNavToggle() in mrp-course.js), so the sidebar itself
   just gets out of the way */

@media (max-width: 900px) {
  .mrp-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  [data-mrp-map] {
    display: none;
  }
}

/* ----------------------------------------------------------
   20 · Wayfinding — breadcrumb, divider, pagination,
        footer band
   ---------------------------------------------------------- */

.mrp-crumbs {
  font-size: 0.82rem;
  color: var(--mrp-muted, #6b6e76);
  margin-bottom: 1.6em;
}

.mrp-crumbs a {
  color: var(--mrp-ink-3, #555860);
  text-decoration: none;
}

.mrp-crumbs a:hover {
  color: var(--mrp-gold-dark, #a8893b);
  text-decoration: underline;
}

.mrp-crumbs .mrp-crumbs-sep {
  margin: 0 0.45em;
  color: var(--mrp-line, #cfccc4);
}

.mrp-divider {
  border: 0;
  margin: 2.6em 0;
  text-align: center;
  height: auto;
}

.mrp-divider::before {
  content: "· · ·";
  letter-spacing: 0.9em;
  margin-left: 0.9em;
  font-size: 0.95rem;
  font-weight: 400;
  color:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 80%,
      transparent);
}

.mrp-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 3em 0 0;
}

.mrp-pager a {
  display: block;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: var(--mrp-radius, 10px);
  text-decoration: none !important;
  box-shadow: var(--mrp-shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mrp-pager a:hover {
  border-color: var(--mrp-gold, #c2a14f);
  box-shadow: var(--mrp-shadow-pop);
}

.mrp-pager .mrp-pager-dir {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mrp-gold-dark, #a8893b);
  margin-bottom: 4px;
}

.mrp-pager .mrp-pager-title {
  font-weight: 700;
  color: var(--mrp-navy, #003049);
  font-size: 0.98rem;
  line-height: 1.35;
}

.mrp-pager .mrp-pager-next {
  text-align: right;
}

@media (max-width: 560px) {
  .mrp-pager {
    grid-template-columns: 1fr;
  }
}

.mrp-footer {
  margin-top: 60px;
  background: var(--mrp-navy, #003049);
  color: var(--mrp-cream, #fdf0d5);
}

.mrp-footer-inner {
  max-width:
    calc(var(--mrp-map-w, 240px) + var(--mrp-col, 700px)
      + var(--mrp-gap, 56px) * 2);
  margin: 0 auto;
  padding: 44px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.mrp-footer img,
.mrp-footer svg {
  display: block;
  height: 72px;
  width: auto;
}

.mrp-footer p {
  margin: 0;
  font-family: var(--mrp-sans);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--mrp-cream, #fdf0d5);
}

.mrp-footer a {
  color: var(--mrp-cream, #fdf0d5);
  text-decoration-color: var(--mrp-gold, #c2a14f);
}

/* ----------------------------------------------------------
   21 · Spec annotation (used by the brand guide itself;
        harmless if it ships)
   ---------------------------------------------------------- */

.mrp-spec {
  margin: 1.2em 0 2.6em;
  padding: 12px 16px;
  background: var(--mrp-bg-alt, #f2f0eb);
  border: 1px dashed
    color-mix(in srgb, var(--mrp-muted, #6b6e76) 45%,
      transparent);
  border-radius: var(--mrp-radius-sm, 7px);
  font-size: 0.85rem;
  color: var(--mrp-ink-3, #555860);
}

.mrp-spec code {
  background: #fff;
}

.mrp-spec-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--mrp-navy, #003049);
  margin-bottom: 0.35em;
}

.mrp-spec summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--mrp-ink-3, #555860);
}

.mrp-spec pre {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--mrp-navy-deep, #00243a);
  color: #cfe3ef;
  font-size: 0.78rem;
  line-height: 1.55;
  border-radius: 6px;
  overflow-x: auto;
}

/* ----------------------------------------------------------
   22 · Utilities
   ---------------------------------------------------------- */

/* anchored jumps land below the sticky header */

.mrp-course [id],
.mrp-endnotes li[id] {
  scroll-margin-top:
    calc(var(--mrp-header-h, 64px) + 24px);
}

/* binds a trailing footnote marker to its last
   word so it can never orphan onto its own line */

.mrp-nowrap {
  white-space: nowrap;
}

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

/* WP alignment interop: wide/full alignments from
   the block editor are clamped — course content
   never leaves the text column */

.mrp-course .alignwide,
.mrp-course .alignfull {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ----------------------------------------------------------
   23 · Focus + motion
   ---------------------------------------------------------- */

.mrp-course :focus-visible,
.mrp-btn:focus-visible,
.mrp-fn-ref:focus-visible {
  outline: 3px solid
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 65%,
      transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .mrp-progress-fill,
  .mrp-btn,
  .mrp-choice,
  .mrp-header,
  .mrp-skill-col,
  .mrp-map.is-accordion li.mrp-map-sub,
  .mrp-mode-tip {
    transition: none;
  }
  .mrp-figure:target,
  .mrp-fn-pop {
    animation: none;
  }
}

/* ----------------------------------------------------------
   24 · LifterLMS skin
   Maps the same tokens onto LifterLMS surfaces so plugin
   output matches the kit. Selectors cover stable Lifter
   markup (buttons, progress, syllabus, quiz, notices);
   verify against your install and extend as needed.
   ---------------------------------------------------------- */

.llms-button-primary,
.llms-button-action {
  background: var(--mrp-navy, #003049) !important;
  border: 2px solid var(--mrp-navy, #003049) !important;
  color: var(--mrp-cream, #fdf0d5) !important;
  border-radius: 8px !important;
  font-family: var(--mrp-sans) !important;
  font-weight: 700 !important;
}

.llms-button-primary:hover,
.llms-button-action:hover {
  background: var(--mrp-navy-deep, #00243a) !important;
  border-color: var(--mrp-navy-deep, #00243a) !important;
}

.llms-button-secondary {
  background: transparent !important;
  border: 2px solid var(--mrp-navy, #003049) !important;
  color: var(--mrp-navy, #003049) !important;
  border-radius: 8px !important;
  font-family: var(--mrp-sans) !important;
  font-weight: 700 !important;
}

.llms-progress {
  background: var(--mrp-bg-alt, #f2f0eb);
  border-radius: 999px;
}

.llms-progress .llms-progress-bar {
  background: var(--mrp-bg-alt, #f2f0eb);
  border-radius: 999px;
}

.llms-progress .progress-bar-complete {
  background:
    linear-gradient(90deg,
      var(--mrp-gold, #c2a14f),
      var(--mrp-gold-dark, #a8893b)) !important;
  border-radius: 999px;
}

.llms-syllabus-wrapper .llms-lesson-preview
  .llms-lesson-link {
  background: #fff;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: var(--mrp-radius, 10px);
  box-shadow: var(--mrp-shadow);
}

.llms-syllabus-wrapper .llms-lesson-preview
  .llms-lesson-title {
  color: var(--mrp-navy, #003049);
  font-family: var(--mrp-sans);
  font-weight: 700;
}

.llms-syllabus-wrapper
  .llms-lesson-preview.is-complete
  .llms-lesson-complete {
  color: var(--mrp-gold, #c2a14f);
}

.llms-quiz-ui {
  background: transparent;
}

.llms-quiz-ui .llms-question-wrapper
  .llms-question-text {
  color: var(--mrp-navy, #003049);
  font-family: var(--mrp-sans);
  font-weight: 700;
}

.llms-quiz-ui ol.llms-question-choices
  li.llms-choice .llms-choice-text {
  font-family: var(--mrp-sans);
}

.llms-quiz-ui ol.llms-question-choices li.llms-choice
  input:checked + .llms-marker {
  background: var(--mrp-navy, #003049) !important;
  color: var(--mrp-cream, #fdf0d5) !important;
}

.llms-notice {
  border-left: 3px solid var(--mrp-blue, #669bbc);
  background: var(--mrp-sky, #eef5fb);
  color: var(--mrp-ink-2, #3a3d42);
  border-radius: var(--mrp-radius-sm, 7px);
}

.llms-field-textarea textarea,
.llms-assignment-field textarea {
  font-family: var(--mrp-sans);
  background: var(--mrp-paper, #fafaf8);
  border: 1.5px solid var(--mrp-line, #e4e2dd);
  border-radius: var(--mrp-radius-sm, 7px);
}

.llms-field-textarea textarea:focus,
.llms-assignment-field textarea:focus {
  border-color: var(--mrp-gold, #c2a14f);
  box-shadow:
    0 0 0 3px
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 22%,
      transparent);
}