/* ==========================================================
   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;
  /* supporting titles (charts, figures); --mrp-blue
     is too light for text at 2.9:1 on paper */
  --mrp-blue-dark: #356b89;
  --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.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--mrp-gold-dark, #a8893b);
  margin: 2em 0 0.6em;
}

.mrp-course h6 {
  font-family: var(--mrp-sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--mrp-navy, #003049);
  white-space: nowrap;
}

/* Hero eyebrow: one 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.9rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  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. */
@media (max-width: 600px) {
  .mrp-eyebrow,
  .mrp-course .mrp-eyebrow {
    white-space: normal;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
  }
}

.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);
}

/* a nested list beside a floated figure: as its own
   formatting context it sits clear of the float, so
   wrapped lines keep their indent instead of running
   back out under the figure */
.mrp-course li > ul,
.mrp-course li > ol {
  display: flow-root;
}

.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.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--mrp-gold-dark, #a8893b);
}

/* Statement — a quieter pullquote for a long
   explanatory sentence: upright Georgia, set left
   against a single gold rule instead of centred
   between hairlines. Bold stays in the serif so an
   emphasized phrase doesn't switch typefaces
   mid-sentence. */

.mrp-pullquote--statement {
  margin: 2rem 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--mrp-gold, #c2a14f);
  text-align: left;
  font-size: 1.25rem;
  line-height: 1.5;
  font-style: normal;
  text-wrap: pretty;
}

.mrp-pullquote--statement::before,
.mrp-pullquote--statement::after {
  content: none;
}

.mrp-course .mrp-pullquote--statement strong {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
}

@media (max-width: 600px) {
  .mrp-pullquote--statement {
    font-size: 1.125rem;
    line-height: 1.5556;
  }
}

/* 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);
  }
}

/* A run of first-person quotes gathered under one kicker,
   rather than hung one at a time off the points they
   illustrate. A .mrp-voice-quote carries a named speaker and
   earns its portrait; these are anonymous study participants,
   so the attribution is stated once above the band and each
   panel is left to be only the voice. The gold wash is the
   lightest tint in the palette — enough to read as a held
   aside, not so much that nine of them in a column turn into
   a slab. */

.mrp-quote-band {
  display: grid;
  gap: 14px;
  margin: 1.6em 0 2.2em;
}

.mrp-quote-band-panel {
  position: relative;
  padding: 20px 22px 16px 52px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--mrp-gold, #c2a14f) 6%, transparent);
  font-family: var(--mrp-serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--mrp-navy, #003049);
}

.mrp-quote-band-panel::before {
  content: "\201C";
  position: absolute;
  left: 16px;
  top: 6px;
  font-size: 2.8em;
  line-height: 1;
  font-style: normal;
  color: color-mix(in srgb, var(--mrp-gold, #c2a14f) 45%, transparent);
}

/* The opening mark is set in a size that would crowd the
   first line on a narrow column, so it steps back and the
   text reclaims the indent. */

@media (max-width: 560px) {
  .mrp-quote-band-panel {
    padding: 18px 18px 14px 40px;
    font-size: 1rem;
  }
  .mrp-quote-band-panel::before {
    left: 12px;
    font-size: 2.2em;
  }
}

/* ----------------------------------------------------------
   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.85rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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 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;
}

/* The headline term in a cell. The bold already carries the
   emphasis, so the colour is not doing that work — it matches
   the row labels and the caption lead-in, so every bold word
   in a table is the one navy and the grid reads in a single
   voice rather than two. */

.mrp-table td strong {
  color: var(--mrp-navy, #003049);
}

/* 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);
}

/* A short list of everyday examples under a cell's term, set
   in the same quiet voice as the cell note. */

.mrp-table .mrp-cell-examples {
  margin: 0.5em 0 0;
  padding: 0 0 0 1.1em;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--mrp-ink-3, #555860);
}

.mrp-table .mrp-cell-examples li + li {
  margin-top: 0.45em;
}

/* 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);
}

/* Self and other, banded. The two halves of the skills
   matrix ask the same four questions in two directions,
   and are told apart by tint whether they share one
   table or sit in two. Gold is the care turned inward
   and blue the care turned outward — the same pairing
   the course uses elsewhere for one's own practice
   versus the work with patients. The band row carries
   the name; the cells under it take the same hue at a
   wash, light enough that the navy cell terms still
   lead. */

.mrp-table .mrp-table-band {
  text-align: left;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--mrp-navy, #003049);
  padding: 0.55em 0.9em;
  border-bottom: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-table .mrp-table-band .mrp-table-sub {
  display: inline;
  margin: 0 0 0 0.6em;
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.mrp-matrix-self .mrp-table-band {
  background: color-mix(in srgb, var(--mrp-gold, #c2a14f) 26%, transparent);
}

.mrp-matrix-other .mrp-table-band {
  background: color-mix(in srgb, var(--mrp-blue, #669bbc) 30%, transparent);
}

.mrp-matrix-self td,
.mrp-matrix-self tbody th {
  background: color-mix(in srgb, var(--mrp-gold, #c2a14f) 7%, transparent);
}

.mrp-matrix-other td,
.mrp-matrix-other tbody th {
  background: color-mix(in srgb, var(--mrp-blue, #669bbc) 8%, transparent);
}

/* The row-hover wash would erase the banding, so the
   two halves keep their own hue on hover as well. */

.mrp-matrix-self tbody tr:hover td,
.mrp-matrix-self tbody tr:hover th {
  background: color-mix(in srgb, var(--mrp-gold, #c2a14f) 14%, transparent);
}

.mrp-matrix-other tbody tr:hover td,
.mrp-matrix-other tbody tr:hover th {
  background: color-mix(in srgb, var(--mrp-blue, #669bbc) 16%, transparent);
}

/* 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 — set as a typeset table on the same warm-gray
   panel as the skill families (.mrp-skills--open), not
   as a card of boxed cells. No shadow, no cell borders,
   no filled header pills: the two column names take the
   skill-family heading in their own accent (ok-green /
   clay) over a thin rule of the same colour, rows split
   on hairlines (here the rows do correspond one to one),
   and one hairline down the middle carries the "versus".
   No caption and no card title — the surrounding prose
   already frames the comparison. */

.mrp-contrast-card {
  background: color-mix(in srgb,
    var(--mrp-bg-alt, #f2f0eb) 75%,
    var(--mrp-page, #fafaf8));
  border-radius: var(--mrp-radius-sm, 7px);
  overflow: hidden;
  margin: 2em 0;
}

.mrp-contrast-card-table {
  --cc-pad: 28px;
  --cc-gap: 32px;
  --cc-rule: color-mix(in srgb,
    var(--mrp-line, #e4e2dd) 80%,
    var(--mrp-muted, #6b6e76));
  display: grid;
  padding: 26px var(--cc-pad) 6px;
}

.mrp-contrast-card-row {
  position: relative;
  display: grid;
  grid-template-columns: 112px 1fr 1fr;
  column-gap: var(--cc-gap);
  align-items: stretch;
  padding: 18px 0;
  border-top: 1px solid var(--cc-rule);
}

/* the column-name rules already close the header, so the
   first row opens without a hairline of its own */

.mrp-contrast-card-row--head,
.mrp-contrast-card-row--head + .mrp-contrast-card-row {
  border-top: 0;
}

.mrp-contrast-card-row--head {
  align-items: end;
  padding: 0;
}

.mrp-contrast-card-head,
.mrp-contrast-card-label,
.mrp-contrast-card-body {
  overflow-wrap: break-word;
}

/* column name: 18px bold, as a skill-family name, in the
   column's accent over a 55% rule of the same colour.
   Clay is the default; the "good" side of each pairing
   switches to ok-green below */

.mrp-contrast-card-head {
  --cc-accent: var(--mrp-clay, #a2543f);
  padding: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cc-accent);
  border-bottom: 1.5px solid
    color-mix(in srgb, var(--cc-accent) 55%, transparent);
}

.mrp-contrast-card-head--deliberate { --cc-accent: 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. Clay sides need no rule of their own. */
.mrp-contrast-card-head--wholesome { --cc-accent: var(--mrp-ok, #3e6b4f); }

/* and again for compassion vs empathic distress */
.mrp-contrast-card-head--compassion { --cc-accent: var(--mrp-ok, #3e6b4f); }

/* and again for with vs without equanimity */
.mrp-contrast-card-head--with-equanimity { --cc-accent: var(--mrp-ok, #3e6b4f); }

/* --neutral: a plain two-way grid (e.g. challenge x consistency)
   where neither column is the "good" side. Column names take the
   row labels' navy bold at the same size, over a neutral rule */
.mrp-contrast-card--neutral .mrp-contrast-card-head {
  --cc-accent: var(--mrp-navy, #003049);
  font-size: 0.95rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  border-bottom-color: var(--cc-rule);
}

/* --axes: a two-way grid whose columns and rows are the two
   ends of one dimension each (class 1, deliberate x
   consistency). Each dimension is named once: across the top
   over both column names, and up the side beside both row
   labels, which shrink to "Low" and "High". On phones the
   grid stacks, so the names drop out and each label and tag
   spells its dimension out instead. */

.mrp-contrast-card--axes .mrp-contrast-card-table {
  --cc-axis: 28px;
  padding-left: calc(var(--cc-pad) + var(--cc-axis));
}

.mrp-contrast-card--axes .mrp-contrast-card-row {
  grid-template-columns: 56px 1fr 1fr;
}

.mrp-contrast-card-row--axis {
  align-items: end;
  padding: 0 0 10px;
  border-top: 0;
}

.mrp-contrast-card-axis {
  grid-column: 2 / span 2;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--mrp-ink-3, #555860);
}

.mrp-contrast-card-rows {
  position: relative;
}

.mrp-contrast-card-rows > .mrp-contrast-card-axis--y + .mrp-contrast-card-row {
  border-top: 0;
}

/* the side name runs bottom to top, centered on the two rows */

.mrp-contrast-card-axis--y {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--cc-axis) * -1);
  width: var(--cc-axis);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

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

@media (max-width: 700px) {
  .mrp-contrast-card--axes .mrp-contrast-card-table {
    padding-left: var(--cc-pad);
  }
  .mrp-contrast-card--axes .mrp-contrast-card-row {
    grid-template-columns: 1fr;
  }
  .mrp-contrast-card-row--axis,
  .mrp-contrast-card-axis--y {
    display: none;
  }
  .mrp-contrast-card-labelaxis {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

/* row label: a stub column in bold navy, set on the same
   24px line as the cell text so it sits level with each
   row's first line rather than centred in the row */

.mrp-contrast-card-label {
  color: var(--mrp-navy, #003049);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5rem;
}

/* All four columns read at the same ink (the skill-list
   charcoal). 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 column
   names carry the distinction on their own. */

.mrp-contrast-card-body {
  position: relative;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--mrp-ink-2, #3a3d42);
}

/* the "versus" hairline, centred in the gap and run
   through the row's padding so it meets the row rules */

.mrp-contrast-card-body + .mrp-contrast-card-body::before {
  content: "";
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: calc(var(--cc-gap) / -2);
  width: 1px;
  background: var(--cc-rule);
}

.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;
}

/* Focus row — the row the comparison exists for (in Class
   1, Meditation, after four other domains). Opt-in on the
   markup, and meant for the last row: a pale-gold band
   bled to the panel's edges, under a gold rule, with the
   cell text at full ink. The label stays navy; gold-dark
   on gold-soft is ~3:1, too faint for 15px text. */

.mrp-contrast-card-row--focus {
  margin: 0 calc(var(--cc-pad) * -1) -6px;
  padding: 20px var(--cc-pad) 24px;
  border-top-color:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 60%, transparent);
  background: var(--mrp-gold-soft, #faf3e0);
}

.mrp-contrast-card-row--focus .mrp-contrast-card-body {
  color: var(--mrp-ink, #18191c);
}

.mrp-contrast-card-row--focus .mrp-contrast-card-body + .mrp-contrast-card-body::before {
  top: -20px;
  bottom: -24px;
  background:
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 40%, transparent);
}

/* column name inside each cell: screen-reader-only while
   the column names 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;
}

/* stacked: label, then each side under its own small
   uppercase tag in the column accent; the "versus"
   hairline drops out and space does the dividing */

@media (max-width: 700px) {
  .mrp-contrast-card-table {
    --cc-pad: 20px;
    padding-bottom: 4px;
  }
  .mrp-contrast-card-row {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .mrp-contrast-card-row--head {
    display: none;
  }
  .mrp-contrast-card-row--focus {
    margin-bottom: -4px;
    padding-top: 18px;
    padding-bottom: 22px;
  }
  .mrp-contrast-card-body + .mrp-contrast-card-body::before {
    display: none;
  }
  .mrp-contrast-card-tag {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 2px;
    clip: auto;
    overflow: visible;
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    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,
  .mrp-contrast-card-body--compassion .mrp-contrast-card-tag,
  .mrp-contrast-card-body--with-equanimity .mrp-contrast-card-tag {
    color: var(--mrp-ok, #3e6b4f);
  }
  .mrp-contrast-card--neutral .mrp-contrast-card-tag {
    color: var(--mrp-navy, #003049);
  }
}

/* Contrast matrix: the contrast card above with two
   experiences side by side ("Equanimity as a unifying theme",
   class 6, which asks the same skillful-or-not question of a
   pleasant experience and of a difficult one). Same panel,
   column colours and row labels as the card. Each experience
   is named once over its pair of columns, 18px bold navy, and
   one hairline divides the two halves. The title is centred
   over the panel, which balances either side of that line.

   It is a real <table> with explicit ARIA roles: both layouts
   restyle the table elements, and some browsers drop a
   table's semantics when that happens. Every row is a grid
   on the same template, so the columns line up without
   table layout, as the card's rows do. */

.mrp-figure--contrast-matrix {
  container: mrp-contrast-matrix / inline-size;
}

.mrp-figure--contrast-matrix > p.mrp-table-title {
  text-align: center;
}

.mrp-contrast-matrix {
  --cm-pad: 28px;
  --cm-gap: 18px;
  --cm-rule: color-mix(in srgb,
    var(--mrp-line, #e4e2dd) 80%,
    var(--mrp-muted, #6b6e76));
  overflow: hidden;
  padding: 26px var(--cm-pad) 8px;
  background: color-mix(in srgb,
    var(--mrp-bg-alt, #f2f0eb) 75%,
    var(--mrp-page, #fafaf8));
  border-radius: var(--mrp-radius-sm, 7px);
}

.mrp-contrast-matrix table,
.mrp-contrast-matrix thead,
.mrp-contrast-matrix tbody {
  display: block;
  width: 100%;
  margin: 0;
  font-family: var(--mrp-sans);
}

/* the 90px label column and 18px gaps hold each term column
   at 113px or more, wide enough for the longest word
   ("Compassionate", 111px) */

.mrp-contrast-matrix tr {
  position: relative;
  display: grid;
  grid-template-columns: 90px repeat(4, minmax(0, 1fr));
  column-gap: var(--cm-gap);
  padding: 16px 0;
  border-top: 1px solid var(--cm-rule);
}

.mrp-contrast-matrix th,
.mrp-contrast-matrix td {
  padding: 0;
  border: 0;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

/* the experience over its pair of columns, then each
   column's name in its accent over a rule of the same
   colour: ok-green for skillful, clay for unskillful. The
   first row opens under those rules without a hairline.
   16px from the experience to the column names, 12px from
   each name to its rule, as for the card's column names: a
   name sits nearer its own rule than the heading above it. */

.mrp-contrast-matrix thead tr,
.mrp-contrast-matrix tbody tr:first-child {
  border-top: 0;
}

.mrp-contrast-matrix thead tr {
  align-items: end;
  padding: 0;
}

.mrp-contrast-matrix thead tr:first-child th {
  grid-column: span 2;
  padding-bottom: 16px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--mrp-navy, #003049);
}

.mrp-contrast-matrix thead tr + tr th {
  --cm-accent: var(--mrp-clay, #a2543f);
  padding-bottom: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--cm-accent);
  border-bottom: 1.5px solid
    color-mix(in srgb, var(--cm-accent) 55%, transparent);
}

.mrp-contrast-matrix thead tr + tr th:first-child {
  border-bottom: 0;
}

.mrp-contrast-matrix th.mrp-contrast-matrix-head--ok {
  --cm-accent: var(--mrp-ok, #3e6b4f);
}

/* the dimension in bold navy and the terms in the skill-list
   charcoal, on one 24px line so each row's first lines sit
   level */

.mrp-contrast-matrix tbody th {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: var(--mrp-navy, #003049);
}

/* a two-word term sets one word to a line (min-content), so
   the terms in a row wrap alike: "Appreciative / joy" beside
   "Compassionate / presence", rather than whichever happens to
   fit the column */

.mrp-contrast-matrix tbody td {
  position: relative;
  width: min-content;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--mrp-ink-2, #3a3d42);
}

/* the one hairline, between the two experiences: centred in
   the gap and run through the row's padding to meet the row
   rules */

.mrp-contrast-matrix tbody td:nth-child(4)::before {
  content: "";
  position: absolute;
  top: -16px;
  bottom: -16px;
  left: calc(var(--cm-gap) / -2);
  width: 1px;
  background: var(--cm-rule);
}

/* focus row: what each column comes down to, read as a
   summary. A heavier navy rule and a little more space set it
   off from the rows above, and its terms are in italic at full
   strength (unlike the card's focus row: no gold band, no
   bold). The skillful answer is the same on both sides, so it
   takes the navy. */

.mrp-contrast-matrix tr.mrp-contrast-matrix-focus {
  padding-top: 20px;
  border-top: 1.5px solid
    color-mix(in srgb, var(--mrp-navy, #003049) 22%, transparent);
}

.mrp-contrast-matrix tr.mrp-contrast-matrix-focus td {
  font-style: italic;
  color: var(--mrp-ink, #18191c);
}

.mrp-contrast-matrix tr.mrp-contrast-matrix-focus td:nth-child(2),
.mrp-contrast-matrix tr.mrp-contrast-matrix-focus td:nth-child(4) {
  color: var(--mrp-navy, #003049);
}

.mrp-contrast-matrix tr.mrp-contrast-matrix-focus td:nth-child(4)::before {
  top: -20px;
}

/* Phones: one half under the other rather than a table that
   scrolls sideways. The table becomes a single two-column grid
   (skillful, unskillful) and every cell is placed: the
   positive half in rows 1-10, the challenging half in rows
   11-20, with each row's name on its own line above its pair
   of terms, so the terms get the full width ("Compassionate"
   needs 104px at 15px). Rows and row groups drop their boxes,
   so the rules move onto the cells and the gutter becomes
   padding. It switches below 670px, where four term columns
   would drop under that longest word. */

@container mrp-contrast-matrix (max-width: 669px) {
  .mrp-contrast-matrix {
    --cm-pad: 20px;
    padding-top: 22px;
  }

  .mrp-contrast-matrix table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mrp-contrast-matrix thead,
  .mrp-contrast-matrix tbody,
  .mrp-contrast-matrix tr {
    display: contents;
  }

  .mrp-contrast-matrix thead tr:first-child > td,
  .mrp-contrast-matrix thead tr + tr > th:first-child {
    display: none;
  }

  .mrp-contrast-matrix thead tr:first-child > th:nth-child(2) {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .mrp-contrast-matrix thead tr:first-child > th:nth-child(3) {
    grid-row: 11;
    grid-column: 1 / -1;
    margin-top: 28px;
  }

  .mrp-contrast-matrix thead tr + tr > th:nth-child(2) { grid-row: 2; grid-column: 1; }
  .mrp-contrast-matrix thead tr + tr > th:nth-child(3) { grid-row: 2; grid-column: 2; }
  .mrp-contrast-matrix thead tr + tr > th:nth-child(4) { grid-row: 12; grid-column: 1; }
  .mrp-contrast-matrix thead tr + tr > th:nth-child(5) { grid-row: 12; grid-column: 2; }

  /* a gap between the two accent rules of each half */

  .mrp-contrast-matrix thead tr + tr > th:nth-child(2),
  .mrp-contrast-matrix thead tr + tr > th:nth-child(4) {
    margin-right: 12px;
  }

  /* each row's two lines in each half: its name (r), then
     its terms (t) */

  .mrp-contrast-matrix tbody tr:nth-child(1) { --cm-r: 3; --cm-t: 4; --cm-r2: 13; --cm-t2: 14; }
  .mrp-contrast-matrix tbody tr:nth-child(2) { --cm-r: 5; --cm-t: 6; --cm-r2: 15; --cm-t2: 16; }
  .mrp-contrast-matrix tbody tr:nth-child(3) { --cm-r: 7; --cm-t: 8; --cm-r2: 17; --cm-t2: 18; }
  .mrp-contrast-matrix tbody tr:nth-child(4) { --cm-r: 9; --cm-t: 10; --cm-r2: 19; --cm-t2: 20; }

  .mrp-contrast-matrix tbody tr > :nth-child(1) { grid-row: var(--cm-r); grid-column: 1 / -1; }
  .mrp-contrast-matrix tbody tr > :nth-child(2) { grid-row: var(--cm-t); grid-column: 1; }
  .mrp-contrast-matrix tbody tr > :nth-child(3) { grid-row: var(--cm-t); grid-column: 2; }
  .mrp-contrast-matrix tbody tr > :nth-child(4) { grid-row: var(--cm-t2); grid-column: 1; }
  .mrp-contrast-matrix tbody tr > :nth-child(5) { grid-row: var(--cm-t2); grid-column: 2; }

  /* the challenging half needs the row names again. They are
     drawn from data-label, with empty alternative text so a
     screen reader, which already has the row header, does not
     hear each name twice */

  .mrp-contrast-matrix tbody tr::after {
    content: attr(data-label);
    content: attr(data-label) / "";
    grid-row: var(--cm-r2);
    grid-column: 1 / -1;
    font-weight: 700;
    color: var(--mrp-navy, #003049);
  }

  /* the name opens each row under a hairline; its terms
     follow, and wrap only where the column runs out */

  .mrp-contrast-matrix tbody th,
  .mrp-contrast-matrix tbody tr::after {
    padding: 12px 0 4px;
    font-size: 0.875rem;
    line-height: 1.3rem;
    border-top: 1px solid var(--cm-rule);
  }

  .mrp-contrast-matrix tbody td {
    width: auto;
    padding: 0 0 12px;
    font-size: 0.9375rem;
    hyphens: auto;
  }

  .mrp-contrast-matrix tbody tr > :nth-child(2),
  .mrp-contrast-matrix tbody tr > :nth-child(4) {
    padding-right: 12px;
  }

  .mrp-contrast-matrix tbody tr:first-child > th,
  .mrp-contrast-matrix tbody tr:first-child::after {
    border-top: 0;
  }

  /* each half's summary row keeps its heavier rule */

  .mrp-contrast-matrix tr.mrp-contrast-matrix-focus > th,
  .mrp-contrast-matrix tr.mrp-contrast-matrix-focus::after {
    padding-top: 16px;
    border-top: 1.5px solid
      color-mix(in srgb, var(--mrp-navy, #003049) 22%, transparent);
  }

  .mrp-contrast-matrix tbody td:nth-child(4)::before {
    content: none;
  }
}

/* ----------------------------------------------------------
   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);
}

/* svg clips to its own box, so a rounded corner shaves off any label
   drawn near the edge (e.g. a bar label at x=0); keep svgs square */
.mrp-figure svg {
  border-radius: 0;
}

.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 */

/* The top margin is 0 because a float's vertical margin
   collapses with the adjacent block's to the LARGER of the
   two (it does not add to it), so the gap above a portrait is
   whatever the preceding element's bottom margin happens to
   be. That lands on 1.15em — in step with the paragraph
   rhythm and matching the bottom — after a paragraph, and
   nowhere near it after anything else. The charcoal-portrait
   rule below takes both gaps into its own hands; a portrait
   that is not a charcoal face still inherits the predecessor. */

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

.mrp-figure--portrait.mrp-figure--left {
  float: left;
  margin: 0 1.6em 1.15em 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 */

/* Charcoal faces: the portrait's top edge lines up with the
   top of the text block it floats beside.

   The predecessor's bottom margin already opens the gap above
   — the float sits below it, and the paragraph that wraps
   around the portrait starts at exactly the same line. Adding
   a top margin on the figure on top of that pushed the
   portrait a full line-and-a-bit below the prose it belongs
   to, so it reads as drifting. Zero here means the two start
   together, and the predecessor keeps its own rhythm.

   (An earlier attempt zeroed the predecessor's margin instead,
   via `*:has(+ .mrp-figure:has(img[...]))`. That selector is
   invalid — :has() cannot nest inside :has() — so the rule was
   dropped by the parser and never had any effect. Written the
   legal way it would also squeeze the h3 against the paragraph
   after the figure, which shares that same margin.) */

.mrp-course .mrp-figure:has(img[src*="charcoal-faces"]) {
  margin-top: 0;
  margin-bottom: 0.7em;
}

/* A portrait that leads into a new sub-section keeps the h3's
   larger lead-in below it — that gap marks the sub-section
   break and is worth more than the 1.15em rhythm — so the
   figure matches it above rather than fighting it. Same value
   as .mrp-course h3's margin-top. */

.mrp-course .mrp-figure:has(img[src*="charcoal-faces"]):has(+ h3) {
  margin-top: 34px;
}

/* 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);
    /* unfloated here, so these margins do collapse with the
       neighbouring paragraphs' 1.15em — same 1.15em either side */
    margin: 0 auto 1.15em;
  }
}

/* Triptych — three square panels of one illustration
   in a row, stacked one per line on a phone */

.mrp-figure--triptych .mrp-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.mrp-figure--triptych .mrp-triptych img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* equation: + and = sit in the gaps as page text,
   which has no direction, so it still reads top to
   bottom once the panels stack */

.mrp-figure--triptych .mrp-triptych--equation {
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 6px;
  align-items: center;
}

.mrp-triptych-op {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--mrp-ink-3, #555860);
}

@media (max-width: 640px) {
  .mrp-figure--triptych .mrp-triptych {
    grid-template-columns: 1fr;
    gap: 14px;
    width: min(100%, 380px);
    margin: 0 auto;
  }
  .mrp-figure--triptych .mrp-triptych--equation {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* 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 {
  position: relative;
  margin: 2.2em 0;
  border-radius: var(--mrp-radius, 10px);
  overflow: hidden;
  background: transparent;
  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;
}

/* a video cut short with data-mrp-video-end fades to black
   behind this, opacity set by mrp-course.js */
.mrp-video-fade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  /* timeupdate only fires a few times a second; this smooths the steps */
  transition: opacity 0.3s linear;
  pointer-events: none;
}

.mrp-video-fade.is-done {
  pointer-events: auto;
}

.mrp-video-again {
  padding: 9px 18px;
  font-family: var(--mrp-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mrp-navy, #003049);
  background: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mrp-video-fade.is-done .mrp-video-again {
  opacity: 1;
}

.mrp-video-again:focus-visible {
  outline: 2px solid var(--mrp-gold, #c2a14f);
  outline-offset: 3px;
}

.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.83rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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; }

/* progression: stacked cards that build on one another. The gap
   between two cards holds a connector: a pale spine (::before) running
   card edge to card edge, and on it a small white node (::after) with a
   gold ring and a down chevron, the same node-on-a-spine motif as the
   Course Outline, so the eye is carried from each card to the next. */

.mrp-cards--progression {
  --mrp-prog-gap: 44px;
  --mrp-prog-node: 28px;
  gap: var(--mrp-prog-gap);
}

.mrp-cards--progression > .mrp-card:not(:last-child)::before,
.mrp-cards--progression > .mrp-card:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.mrp-cards--progression > .mrp-card:not(:last-child)::before {
  /* from just under this card's border to just over the next one's */
  top: calc(100% + 1px);
  height: var(--mrp-prog-gap);
  width: 2px;
  background: color-mix(in srgb,
    var(--mrp-gold, #c2a14f) 40%,
    var(--mrp-page, #fafaf8));
}

/* the node: centered in the gap, chevron drawn as an inline SVG */

.mrp-cards--progression > .mrp-card:not(:last-child)::after {
  top: calc(100% + 1px + (var(--mrp-prog-gap) - var(--mrp-prog-node)) / 2);
  width: var(--mrp-prog-node);
  height: var(--mrp-prog-node);
  box-sizing: border-box;
  border: 2px solid var(--mrp-gold, #c2a14f);
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8893b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 1px 3px rgba(0, 48, 73, 0.10);
}

.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;
}

/* Where a card set's titles differ by a single word — the preposition that
   separates compassion for others, from others, and for self — that word is the
   whole distinction. Accent it so the set is scannable at a glance. */

.mrp-card-title em,
.mrp-course .mrp-card-title em {
  color: var(--mrp-gold-dark, #a8893b);
}

.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);
}

/* Lead-in naming the skill ("Savoring is not these") ahead of the orange "near enemies". */
.mrp-enemy-band .mrp-enemy-band-lead {
  color:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 65%,
      var(--mrp-navy, #003049));
}

.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;
}

/* Boxed variant (Class 3 savoring). The whole set sits in one
   green-trimmed box: the skill first, as a large green heading over
   plain text, then the near enemies in orange-trimmed cards. Green is
   the target-state sage the "Genuine skill" band already uses; orange
   is the warm chart orange (--ch-warm). The mode chips keep the clay
   that marks failure modes everywhere else. */

.mrp-enemy-box {
  --enemy-green: var(--mrp-ok, #3e6b4f);
  --enemy-orange: #bf5b1b;
  padding: 18px 20px 22px;
  border: 1.5px solid var(--enemy-green);
  border-radius: 14px;
  background:
    color-mix(in srgb, var(--mrp-ok-soft, #e9f0ea) 35%,
      var(--mrp-paper, #fafaf8));
}

.mrp-enemy-box .mrp-enemy-grid {
  margin: 0;
}

/* the skill: no card of its own. Its title is the green band label set
   30% larger (1.145rem x 1.3), and its text starts where the card text
   below it starts */

.mrp-enemy-skill {
  grid-column: 1 / -1;
  padding: 0 21px;
}

.mrp-enemy-box .mrp-enemy-skill-title {
  margin: 0 0 0.4em;
  font-size: 1.49rem;
  color: var(--enemy-green);
}

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

.mrp-enemy-box .mrp-enemy-band--enemies {
  margin-top: 0.5em;
  color: var(--enemy-orange);
}

.mrp-enemy-box .mrp-card {
  border-color:
    color-mix(in srgb, var(--enemy-orange) 70%, #fff);
}

.mrp-enemy-box .mrp-card:hover {
  border-color: var(--enemy-orange);
  background: #fffaf6;
}

@media (max-width: 560px) {
  .mrp-enemy-box {
    padding: 14px 12px 16px;
  }

  .mrp-enemy-skill {
    padding: 0 8px;
  }
}


/* ----------------------------------------------------------
   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);
}

/* the number sits on the title's baseline: a circle
   about the title's line height, the digit near the
   title's size, and grid baseline alignment doing the
   placing (the roadmap centres its nodes instead) */
.mrp-syllabus:not(.mrp-syllabus--roadmap) .mrp-syllabus-item {
  align-items: baseline;
}

.mrp-syllabus:not(.mrp-syllabus--roadmap) .mrp-syllabus-item > .mrp-node {
  justify-self: center;
  width: 26px;
  height: 26px;
  margin-top: 0;
  font-size: 0.95rem;
}

.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);
}

/* run-in gloss on the title line — the researcher's
   term beside the plain-language name. Same answer as
   .mrp-card-sub: one size throughout, color and weight
   carry the differentiation */

.mrp-syllabus-sub,
.mrp-course .mrp-syllabus-sub {
  font-weight: 400;
  color: var(--mrp-ink-3, #555860);
}

.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);
}

/* Course Outline (roadmap) — the syllabus's rail and
   nodes, set as one contained element: a pale warm-gray
   panel, no hairlines between rows, a tighter rhythm,
   and the current class carried by a faint gold band
   behind its title and gloss rather than by the node
   alone. Its h4 title (.mrp-outline-head) is centered
   over the panel. Each body is padded on all sides so the
   band has room to breathe; the panel's own padding is
   reduced by the same amount so the text still sits
   one inset from every edge. */

.mrp-syllabus--roadmap,
.mrp-course .mrp-syllabus--roadmap {
  --rm-inset: 24px;
  --rm-node: 30px;
  --rm-gap: 8px;
  --rm-pad-x: 10px;
  --rm-pad-y: 10px;
  padding:
    calc(var(--rm-inset) - var(--rm-pad-y))
    calc(var(--rm-inset) - var(--rm-pad-x))
    calc(var(--rm-inset) - var(--rm-pad-y))
    var(--rm-inset);
  background: color-mix(in srgb,
    var(--mrp-bg-alt, #f2f0eb) 75%,
    var(--mrp-page, #fafaf8));
  border-radius: var(--mrp-radius-sm, 7px);
}

.mrp-syllabus--roadmap .mrp-syllabus-item {
  grid-template-columns: var(--rm-node) 1fr;
  column-gap: var(--rm-gap);
}

/* the spine: a continuous line struck through the
   node centers, dark enough to read as one path. Each
   node is centered on its whole entry (title and gloss
   together), so the spine ends at 50% */

.mrp-syllabus--roadmap .mrp-syllabus-item::before {
  left: calc(var(--rm-node) / 2 - 1px);
  background: color-mix(in srgb,
    var(--mrp-blue, #669bbc) 42%,
    var(--mrp-bg-alt, #f2f0eb));
}

.mrp-syllabus--roadmap
  .mrp-syllabus-item:first-child::before {
  top: 50%;
}

.mrp-syllabus--roadmap
  .mrp-syllabus-item:last-child::before {
  bottom: 50%;
}

.mrp-syllabus--roadmap .mrp-syllabus-item > .mrp-node {
  width: var(--rm-node);
  height: var(--rm-node);
  margin-top: 0;
  align-self: center;
  font-size: 0.82rem;
}

/* current: gold ring, no halo — the band beside it
   does the rest */

.mrp-syllabus--roadmap .mrp-node--current {
  box-shadow: none;
}

.mrp-syllabus--roadmap .mrp-syllabus-body,
.mrp-syllabus--roadmap
  .mrp-syllabus-item:last-child .mrp-syllabus-body {
  padding: var(--rm-pad-y) var(--rm-pad-x);
  border: 0;
  border-radius: 6px;
}

.mrp-syllabus--roadmap .mrp-syllabus-body p,
.mrp-course .mrp-syllabus--roadmap .mrp-syllabus-body p {
  margin-top: 4px;
}

.mrp-syllabus--roadmap
  .mrp-node--current + .mrp-syllabus-body {
  background: color-mix(in srgb,
    var(--mrp-gold, #c2a14f) 17%,
    #fff);
}

.mrp-course .mrp-syllabus--roadmap
  .mrp-node--current + .mrp-syllabus-body p {
  color: var(--mrp-ink-2, #3a3d42);
}

@media (max-width: 560px) {
  .mrp-syllabus--roadmap,
  .mrp-course .mrp-syllabus--roadmap {
    --rm-inset: 16px;
  }
}

.mrp-course .mrp-outline-head {
  text-align: center;
}

/* 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;
  /* the hairline rules run the full measure, so the list starts below a
     floated portrait rather than letting them disappear behind it */
  clear: both;
}

.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 — an editorial timeline of research
   eras: dates above the line, themes below it, each
   column starting on its own marker. "Wave 1, 2, 3" in
   the dates carries the sequence, so the markers are
   plain dots, and the themes are bold text in one ink so
   earlier waves keep their importance.
   By default the LAST wave is current: a gold dot, and
   the line carries on past it in gold, softening toward
   an arrowhead that says the wave is still under way
   (its date says how it ends, e.g. "2020–Ongoing").
   Set .is-current on any wave to move that; waves after
   it render as upcoming.
   Each wave draws the segment of line from its own dot
   to the next one, so the line stays on the dots however
   the dates wrap. It lives in a figure.mrp-figure--waves,
   which is also its size container: when the figure is
   too narrow for three columns, the same hierarchy runs
   down a vertical line. */

.mrp-waves {
  --mrp-wave-dot: 10px;
  /* length of the arrowhead on the last wave's line
     (it is as tall as the dot) */
  --mrp-wave-arrow: 8px;
  --mrp-wave-gap: 24px;
  --mrp-wave-row-gap: 20px;
  /* one line of date text, for centering the dot on it
     in the vertical layout */
  --mrp-wave-era-lh: calc(0.875rem * 1.4);
  --mrp-wave-line:
    color-mix(in srgb, var(--mrp-blue, #669bbc) 45%,
      var(--mrp-page, #fafaf8));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--mrp-wave-dot) auto;
  column-gap: var(--mrp-wave-gap);
  margin: 32px 0;
}

.mrp-wave {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
}

/* dates above the line: 14px gray, bottom-aligned so a
   date that wraps grows upward; 8px to the dot, 12px
   to the line */

.mrp-wave-era {
  grid-row: 1;
  align-self: end;
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--mrp-muted, #6b6e76);
}

/* themes below the line: set as bold text, not as
   headings: 16px bold in the body ink, the way the prose
   bolds the same phrases, and below the 18px figure
   title. 10px under the dot, 14px from the line. */

.mrp-wave-title {
  grid-row: 3;
  align-self: start;
  margin: 10px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mrp-ink-2, #3a3d42);
}

/* the marker: a 10px dot, navy for past waves. The
   dot and the line share one cell, so both are placed
   explicitly (auto-placement would refuse to overlap
   them and open a new column for the line). */

.mrp-wave::before {
  content: "";
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  justify-self: start;
  z-index: 1;
  width: var(--mrp-wave-dot);
  height: var(--mrp-wave-dot);
  border-radius: 50%;
  background: var(--mrp-navy, #003049);
}

/* the line: this wave's dot to the next wave's */

.mrp-wave::after {
  content: "";
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  justify-self: start;
  width: calc(100% + var(--mrp-wave-gap));
  height: 2px;
  margin-left: calc(var(--mrp-wave-dot) / 2);
  background: var(--mrp-wave-line);
}

/* the current wave: a gold dot, and the line goes on
   in gold, softening as it runs */

.mrp-wave:last-child::before,
.mrp-wave.is-current::before {
  background: var(--mrp-gold, #c2a14f);
}

.mrp-wave:last-child::after,
.mrp-wave.is-current::after {
  background:
    linear-gradient(90deg, var(--mrp-gold, #c2a14f),
      color-mix(in srgb, var(--mrp-gold, #c2a14f) 55%,
        var(--mrp-page, #fafaf8)));
}

/* the last wave's line runs to the figure's edge and
   ends in an arrowhead: the box is as tall as the dot,
   and a clip-path cuts the 2px line and the head out of
   it, so both take the same gradient */

.mrp-wave:last-child::after {
  width: calc(100% - var(--mrp-wave-dot) / 2);
  height: var(--mrp-wave-dot);
  clip-path: polygon(
    0 calc(50% - 1px),
    calc(100% - var(--mrp-wave-arrow)) calc(50% - 1px),
    calc(100% - var(--mrp-wave-arrow)) 0,
    100% 50%,
    calc(100% - var(--mrp-wave-arrow)) 100%,
    calc(100% - var(--mrp-wave-arrow)) calc(50% + 1px),
    0 calc(50% + 1px));
}

/* waves after an explicit current are upcoming */

.mrp-wave.is-current ~ .mrp-wave::before {
  background: var(--mrp-page, #fafaf8);
  box-shadow: inset 0 0 0 2px var(--mrp-wave-line);
}

.mrp-wave.is-current ~ .mrp-wave::after {
  background: var(--mrp-wave-line);
}

.mrp-wave.is-current ~ .mrp-wave:last-child::after {
  background: var(--mrp-wave-line);
}

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

/* as a titled figure: 32px clear of the prose either
   side, and 12px from the title to the dates as seen:
   the date text's own line spacing supplies about 6px
   of that, so the title gives only 6px */

.mrp-figure--waves {
  container: mrp-waves / inline-size;
  /* a full beat of air above and below: the timeline
     reads as its own moment, not a line squeezed
     between paragraphs */
  margin: 52px 0;
}

.mrp-figure.mrp-figure--waves > .mrp-chart-title {
  margin-bottom: 6px;
}

.mrp-figure--waves > .mrp-waves {
  margin: 0;
}

/* under ~520px three columns can't hold a theme on one
   line: run the same hierarchy down a vertical line */

@container mrp-waves (max-width: 520px) {
  .mrp-waves {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--mrp-wave-row-gap);
  }

  .mrp-wave {
    position: relative;
    grid-row: auto;
    grid-template-rows: auto auto;
    grid-template-columns: var(--mrp-wave-dot) minmax(0, 1fr);
  }

  .mrp-wave-era,
  .mrp-wave-title {
    grid-column: 2;
    margin-left: 16px;
  }

  .mrp-wave-era {
    grid-row: 1;
    align-self: start;
    margin-bottom: 0;
  }

  .mrp-wave-title {
    grid-row: 2;
    margin-top: 2px;
  }

  /* dot centered on the date's first line */
  .mrp-wave::before {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    margin-top:
      calc((var(--mrp-wave-era-lh) - var(--mrp-wave-dot)) / 2);
  }

  /* the line runs down from this dot to the next */
  .mrp-wave::after,
  .mrp-wave:last-child::after {
    position: absolute;
    grid-area: auto;
    left: calc(var(--mrp-wave-dot) / 2 - 1px);
    top: calc(var(--mrp-wave-era-lh) / 2);
    width: 2px;
    height: calc(100% + var(--mrp-wave-row-gap));
    margin: 0;
  }

  .mrp-wave:last-child::after,
  .mrp-wave.is-current::after {
    background:
      linear-gradient(180deg, var(--mrp-gold, #c2a14f),
        color-mix(in srgb, var(--mrp-gold, #c2a14f) 55%,
          var(--mrp-page, #fafaf8)));
  }

  /* the arrowhead turns to point down the line; its box
     is the dot's width, so it sits on the dot's column */
  .mrp-wave:last-child::after {
    left: 0;
    width: var(--mrp-wave-dot);
    height: 44px;
    clip-path: polygon(
      calc(50% - 1px) 0,
      calc(50% + 1px) 0,
      calc(50% + 1px) calc(100% - var(--mrp-wave-arrow)),
      100% calc(100% - var(--mrp-wave-arrow)),
      50% 100%,
      0 calc(100% - var(--mrp-wave-arrow)),
      calc(50% - 1px) calc(100% - var(--mrp-wave-arrow)));
  }

  .mrp-wave.is-current ~ .mrp-wave:last-child::after {
    background: var(--mrp-wave-line);
  }
}

/* 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;
  /* the cards use the whole measure, so they drop below a
     floated portrait rather than sliding under it — same
     clearing the figures give each other */
  clear: both;
}

.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;
  }
}

/* Skill families, open columns — the skill columns set
   as a titled figure (figure.mrp-figure--skills) like a
   typeset table rather than a row of floating cards:
   three open columns on one warm-gray panel (the same
   panel as the Course Outline), split by hairline
   separators. No shadows and no hover lift (nothing
   here is clickable), and no hairline under every
   skill, which read as settings rows and implied a
   row-by-row correspondence the lists don't have. One
   pale-gold rule under each family name; whitespace
   separates the skills. A qualifier drops to its own
   quieter line (.mrp-skill-note), and each list ends
   where it ends. The columns stack when their figure is
   under ~560px. */

.mrp-figure--skills {
  container: mrp-skills / inline-size;
}

.mrp-skills--open {
  --sk-gap: 28px;
  grid-auto-flow: column;
  /* a shared header row: every column's family name and
     rule sit on the same line, and every first skill
     starts level, even when one name wraps */
  grid-template-rows: auto auto;
  gap: 0 var(--sk-gap);
  margin: 0;
  padding: 28px;
  background: color-mix(in srgb,
    var(--mrp-bg-alt, #f2f0eb) 75%,
    var(--mrp-page, #fafaf8));
  border-radius: var(--mrp-radius-sm, 7px);
}

.mrp-skills--open .mrp-skill-col,
.mrp-skills--open .mrp-skill-col:hover {
  display: grid;
  grid-row: 1 / span 2;
  grid-template-rows: subgrid;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

/* the separator sits in the middle of the gap */

.mrp-skills--open .mrp-skill-col + .mrp-skill-col::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--sk-gap) / -2);
  width: 1px;
  background: color-mix(in srgb,
    var(--mrp-line, #e4e2dd) 75%,
    var(--mrp-muted, #6b6e76));
}

/* family name: 18px bold navy over one thin pale-gold
   rule, 12px to the rule and 20px to the first skill.
   18px keeps a two-word name ("Advanced meditation") on
   one line in a full-width column. Set on the rule
   (bottom-aligned in the shared row), so a name that
   still wraps in a narrower figure grows upward */

.mrp-skills--open .mrp-skill-head,
.mrp-skills--open .mrp-skill-col:hover .mrp-skill-head {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 0 20px;
  padding: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--mrp-navy, #003049);
  border-bottom: 1px solid
    color-mix(in srgb, var(--mrp-gold, #c2a14f) 55%,
      transparent);
}

/* skills: 16px regular in the body ink, 14px apart,
   wrapped lines kept close so each reads as one unit */

.mrp-skills--open .mrp-skill-list li {
  margin: 0 0 14px;
  padding: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--mrp-ink-2, #3a3d42);
  border-bottom: 0;
}

.mrp-skills--open .mrp-skill-list li:last-child {
  margin-bottom: 0;
}

/* or a short description in place of a list (the
   three needs of self-determination theory): the same
   16px sans in the body ink, on a looser line */

.mrp-course .mrp-skills--open .mrp-skill-col > p {
  margin: 0;
  font-family: var(--mrp-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--mrp-ink-2, #3a3d42);
}

/* a qualifier on its own line, in the caption setting:
   14px charcoal. The markup keeps it in the same item
   ("Decentering <span>story → sensation</span>") so it
   still reads as one phrase without the styles. */

.mrp-skill-note {
  display: block;
  margin-top: 2px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--mrp-ink-3, #555860);
}

.mrp-skill-note::first-letter {
  text-transform: uppercase;
}

/* stacked, each family already sits under its own gold
   rule, so the separators drop out and space does the
   dividing */

@container mrp-skills (max-width: 560px) {
  .mrp-skills--open {
    grid-auto-flow: row;
    grid-template-rows: none;
    row-gap: 32px;
    padding: 24px 20px;
  }

  .mrp-skills--open .mrp-skill-col,
  .mrp-skills--open .mrp-skill-col:hover {
    display: block;
    grid-row: auto;
  }

  .mrp-skills--open .mrp-skill-col + .mrp-skill-col::before {
    content: none;
  }
}

/* Stacked (.mrp-skills--stacked) — for families whose
   items are sentences rather than names (Gilbert's three
   fears of compassion, class 6). Three columns at the
   700px measure would leave about four words a line, so
   the families run one under the next on the same panel,
   with no separators: space and each family's gold rule
   do the dividing. The items keep their gold bullets and
   bold lead terms, in the 16px sans of the open style. */

.mrp-skills--open.mrp-skills--stacked {
  grid-auto-flow: row;
  grid-template-rows: none;
  row-gap: 32px;
}

.mrp-skills--stacked .mrp-skill-col,
.mrp-skills--stacked .mrp-skill-col:hover {
  display: block;
  grid-row: auto;
}

.mrp-skills--stacked .mrp-skill-col + .mrp-skill-col::before {
  content: none;
}

/* a block head, not the bottom-aligned flex one: no
   shared row to align to, and a flex head would split
   "Compassion <em>for</em> others" into three items */

.mrp-skills--stacked .mrp-skill-head,
.mrp-skills--stacked .mrp-skill-col:hover .mrp-skill-head {
  display: block;
  margin-bottom: 16px;
}

.mrp-course .mrp-skills--stacked .mrp-skill-col > ul {
  margin: 0;
  padding-left: 1.2em;
  font-family: var(--mrp-sans);
  font-size: 1rem;
  line-height: 1.5;
}

.mrp-skills--stacked .mrp-skill-col > ul > li {
  margin: 0 0 10px;
}

.mrp-skills--stacked .mrp-skill-col > ul > li:last-child {
  margin-bottom: 0;
}

/* 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.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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.83rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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.82rem;
    letter-spacing: 0.01em;
    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 1 effect-size inset: two unit normals half an SD
   apart, drawn from the density itself. Each curve keeps a
   whisper of its series colour as fill, so the overlap reads
   as the mix of the two; the direct labels take the darker
   step of each hue, since --ch-b is short of 4.5:1 as type */

#fig-cohens-d .cd-fill--ctrl {
  fill: color-mix(in srgb, var(--ch-b) 16%, transparent);
}

#fig-cohens-d .cd-fill--mind {
  fill: color-mix(in srgb, var(--ch-a) 16%, transparent);
}

#fig-cohens-d .cd-curve {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#fig-cohens-d .cd-mean {
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

#fig-cohens-d .cd-mean--ctrl { stroke: var(--ch-b); }
#fig-cohens-d .cd-mean--mind { stroke: var(--ch-a); }

/* the title sits right over the peaks so it reads as the
   label of the two hills, not a heading above a gap */
.mrp-course #fig-cohens-d .mrp-chart-title { margin-bottom: 0.25em; }

#fig-cohens-d .cd-label {
  font-size: 13px;
  font-weight: 700;
}

#fig-cohens-d .cd-label--ctrl { fill: #2f6f9e; }
#fig-cohens-d .cd-label--mind { fill: var(--ch-a); }

/* the drawing is 300 units wide and renders at about that
   size at every width, so the narrow-chart type tiers (sized
   for 660-unit drawings) would blow its labels up; its type
   is pinned instead */

#fig-cohens-d .mrp-chart-tick { font-size: 11px; }
#fig-cohens-d .mrp-chart-axistitle { font-size: 11.5px; }

/* the Class 5 flow channel. The band is the figure's whole
   subject rather than a backdrop behind marks, so it carries
   the sage the course gives a target state instead of the
   neutral whisper .mrp-chart-band uses elsewhere. Its label
   stays navy: the band carries the identity, type does not. */

#fig-flow-channel .mrp-chart-band {
  fill: color-mix(in srgb, var(--mrp-ok, #3e6b4f) 13%,
    transparent);
}

#fig-flow-channel .fc-flow-label {
  letter-spacing: 0.01em;
  fill: var(--mrp-navy, #003049);
}

/* 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.
   The bars take pastel fills, each hue mixed into the
   paper, with a fine outline in the full hue, the way
   the skill cards are drawn: the outline keeps each
   bar's edge clear of the ground, and the sentences
   stay in the full hues, where text needs the depth. */

#fig-affect-labeling .mrp-chart {
  --ch-worse: var(--ch-c, #a2543f);
  --ch-better: var(--ch-a, #1a6b43);
  --ch-worse-soft: color-mix(in srgb, var(--ch-worse) 38%, var(--mrp-paper, #fafaf8));
  --ch-better-soft: color-mix(in srgb, var(--ch-better) 34%, var(--mrp-paper, #fafaf8));
}

#fig-affect-labeling .mrp-chart-bar {
  stroke-width: 1.4;
  stroke-linejoin: round;
}

/* 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.
   Its type is sized panel by panel (--pw). */

#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;
}

/* 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 {
  letter-spacing: 0;
  text-transform: none;
  fill: var(--mrp-muted, #6b6e76);
}

/* the Class 5 cessation spectra. */

/* what each panel was recorded with, under its name.
   it is a sub-label, but it does NOT take
   .mrp-chart-tick--sub: that class is dropped at phone
   widths, and this line is the reason the five vertical
   scales cannot be compared — it has to survive the
   stack. it sits under a title of its own rather than
   beside a tick, so nothing is there to collide with. */

#fig-shinozuka2025-power .mrp-chart-panelsub {
  fill: var(--mrp-muted, #6b6e76);
}

#fig-shinozuka2025-power .mrp-chart-axistitle--plain {
  letter-spacing: 0;
  text-transform: none;
  fill: var(--mrp-muted, #6b6e76);
}

/* a power spectrum is a spiky curve read for where its
   peaks sit, and three of them share a panel this wide:
   at the chart default of 2 units the alpha peaks fuse
   into each other, so the lines here run thinner. the
   two control dashes are tighter than the course's usual
   pair for the same reason — a 4.5-unit gap on a curve
   this steep can skip the apex the reader came for. */

#fig-shinozuka2025-power .mrp-chart-line {
  stroke-width: 1.8;
}

/* 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 once carried a third series and
   an orange to hold it beside the clay; with the
   indebtedness line dropped it is an ordinary two-series
   chart and takes the shared green and clay, so no
   override is needed here. Its lines are solid and
   unmarked at the course's request, which is affordable
   because each 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. */

/* 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 pitch-discrimination chart names its reference line on the plot
   rather than in a key row.

   Its blue is darkened from the palette's --ch-b for the same reason
   #fig-kg-variance darkens it: #2f8fc4 is 3.4:1 on paper, clear for a
   mark but short of the 4.5:1 the "Musicians" label needs. Here the
   dashed reference line takes the darker blue too — a 1px dashed line
   wants the extra weight, and line and label reading as one thing is
   the point. */

#fig-micheyl-pitch .mrp-chart {
  --ch-b: #2f6f9e;
}

/* 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.01em;
  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);
}

/* Fine linework (.mrp-chart--fine on the .mrp-chart
   wrapper): every rule is exactly 1px on screen however
   the drawing scales, the grid steps back toward the
   paper, and the zero baseline sits only a shade above
   it. Tick labels stay regular; the data carries the
   weight. */

.mrp-chart--fine .mrp-chart-grid {
  stroke: color-mix(in srgb, var(--mrp-line, #e4e2dd) 75%,
    transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.mrp-chart--fine .mrp-chart-axisline {
  stroke: color-mix(in srgb, var(--mrp-navy, #003049) 22%,
    transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.mrp-chart--fine .mrp-chart-tick,
.mrp-chart--fine .mrp-chart-key,
.mrp-chart--fine .mrp-chart-axistitle,
.mrp-chart--fine .mrp-chart-barlab,
.mrp-chart--fine .mrp-chart-bandlab,
.mrp-chart--fine .mrp-pq-note {
  font-weight: 400;
}

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

.mrp-chart-axistitle {
  font-size: 11px;
  letter-spacing: 0.01em;
  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;
}

/* two panels rather than three — a published figure's
   (a) and (b) side by side */

.mrp-chart-panels--2 {
  grid-template-columns: repeat(2, 1fr);
}

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

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

  /* the gratitude-diary pair reads as a comparison,
     so it stays side by side however narrow */
  #fig-gratitude-diary .mrp-chart-panels--2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2em 0.8em;
  }
}

/* Panel titles name each small multiple: a step below the
   chart title, in the bold navy of the page's structure. */

.mrp-chart-paneltitle {
  font-family: var(--mrp-sans);
  font-weight: 700;
  fill: var(--mrp-navy, #003049);
}

/* Class 6's two panel charts set each kind of text at one
   reading size whatever their panels scale to. Sizes are in
   drawing units (target px / scale): the gratitude pair draws
   at about 1.37x on a desktop and stays side by side on a
   phone (about 0.64-0.85x); the ICU trio draws at about 0.89x
   three across and stacks to about 1.3-1.39x below 660px.
   Targets: ticks and labels 13px, sub-labels 12px (10px
   three across, where four occasions share a ~210px panel),
   panel titles 13.5px. Without these, the same labels ran
   from 6.7px to 25px across the two charts. */

/* The gratitude viewBox is trimmed so the phone's larger
   panel titles just clear its top edge; at wider tiers the
   titles are smaller in drawing units and sit lower, so the
   panels are drawn up a few px to keep the subtitle-to-panel
   gap near the 12px the other charts keep. */

@container (min-width: 661px) {
  #fig-gratitude-diary .mrp-chart-panels--2 > svg { margin-top: -6px; }
  #fig-gratitude-diary .mrp-chart-tick,
  #fig-gratitude-diary .mrp-chart-key { font-size: 9.5px; }
  #fig-gratitude-diary .mrp-chart-paneltitle { font-size: 9.9px; }
  #fig-xie-icu .mrp-chart-tick { font-size: 14.6px; }
  /* three across, "1 month" and the right-aligned "3 months"
     share 62 units; at 13.5 they overlapped by 6px */
  #fig-xie-icu .mrp-chart-tick--sub { font-size: 11.5px; }
  #fig-xie-icu .mrp-chart-paneltitle { font-size: 15.2px; }
}

@container (max-width: 660px) and (min-width: 471px) {
  #fig-gratitude-diary .mrp-chart-panels--2 > svg { margin-top: -4px; }
}

@container (max-width: 660px) {
  #fig-gratitude-diary .mrp-chart-tick,
  #fig-gratitude-diary .mrp-chart-key { font-size: 11.8px; }
  #fig-gratitude-diary .mrp-chart-paneltitle { font-size: 12.2px; }
  #fig-xie-icu .mrp-chart-tick { font-size: 9.4px; }
  #fig-xie-icu .mrp-chart-tick--sub { font-size: 8.6px; }
  #fig-xie-icu .mrp-chart-paneltitle { font-size: 9.7px; }
}

@container (max-width: 470px) {
  #fig-gratitude-diary .mrp-chart-tick,
  #fig-gratitude-diary .mrp-chart-key { font-size: 17px; }
  #fig-gratitude-diary .mrp-chart-paneltitle { font-size: 18px; }
  #fig-xie-icu .mrp-chart-tick { font-size: 10px; }
  #fig-xie-icu .mrp-chart-paneltitle { font-size: 10.3px; }
  /* the phone tier hides sub-labels for fear of collisions,
     but here they are the whole time axis, and a stacked
     panel draws larger than three across, so they stay */
  #fig-xie-icu .mrp-chart-tick--sub { display: inline; font-size: 9px; }
}

/* A tick label a short step from its neighbour sits centred
   at the wider tiers but touches it in the phone tier's
   larger type. There it leans left, ending at its own tick
   (Class 6's 2021, just before 2023); one crowded from the
   left (Class 4's "1 month", just after "Baseline") leans
   right instead. A label only one step from both neighbours
   (Class 6's 2020) shows on a wide chart only
   (.mrp-chart-wideonly). */

@container (max-width: 470px) {
  .mrp-chart-tick--lean-l { text-anchor: end; }
  .mrp-chart-tick--lean-r { text-anchor: start; }
}

/* 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;
}

/* a region on a map is an area, not a line, so its
   key takes a dot */

.mrp-figure .mrp-chart-keyswatch--dot {
  width: 10px;
  height: 10px;
}

/* A region map beside its key (Class 3's DAN and DMN):
   the image takes the room, the key stacks to its right
   and drops underneath it on a phone. */

.mrp-chart--mapkey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
}

.mrp-chart--mapkey > img {
  flex: 1 1 320px;
  width: 100%;
  max-width: 380px;
  height: auto;
}

.mrp-course .mrp-chart-keyrow--stack {
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}

/* a bar series' key takes a small bar */

.mrp-figure .mrp-chart-keyswatch--bar {
  width: 14px;
  height: 10px;
}

/* Rows of bars beside the scans they were measured in
   (Class 3's Farb regions). The columns are proportional,
   so each scan stays beside its row on a phone instead of
   pushing the plot off the side; the header over the bars
   splits at their zero line, which sits at the drawing's
   center. */

.mrp-chart-rows {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 6px 16px;
}

.mrp-chart-rows > img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.mrp-course .mrp-chart-rowshead {
  align-self: end;
  margin: 0 0 4px;
  font-family: var(--mrp-sans);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--mrp-ink-2, #3a3d42);
  text-align: center;
}

.mrp-chart-rowshead--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mrp-chart-rowshead--split > span:first-child {
  padding-right: 8px;
  text-align: right;
}

.mrp-chart-rowshead--split > span:last-child {
  padding-left: 8px;
  text-align: left;
}

/* a scan shorter than its row sits on its own black
   ground, which fills the row's height */

.mrp-chart-rowsscan {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background: #0d0d0d;
}

.mrp-chart-rowsscan > img {
  width: 100%;
  height: auto;
}

/* several bar pairs in one row: their names spread down
   the row's height, one beside each pair */

.mrp-chart-rowslabels {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: space-around;
}

.mrp-chart-rowslabels > .mrp-chart-rowslabel {
  padding: 3px 0;
}

/* a row's name beside its bars, keyed by the dot the
   brain uses for it */

.mrp-course .mrp-chart-rowslabel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--mrp-sans);
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--mrp-ink-2, #3a3d42);
}

/* a hairline between two encodings sharing one key row */

.mrp-chart-keyrow > .mrp-chart-keysep {
  width: 1px;
  height: 16px;
  background: var(--mrp-line, #e4e2dd);
}

/* once the row wraps, the hairline would dangle at a line
   end; it becomes the break instead, one encoding a line */

@container (max-width: 560px) {
  .mrp-chart-keyrow > .mrp-chart-keysep {
    flex-basis: 100%;
    height: 0;
  }
}

@container (max-width: 470px) {
  .mrp-chart-rows { column-gap: 10px; }
}

/* A note that only fits beside wide bars. Below a 661px
   chart the key and the caption say the same thing. */

@container (max-width: 660px) {
  .mrp-chart-wideonly { display: none; }
}

/* Category names under a plot, set in HTML because they
   have to wrap (Class 5's four DLPFC groups, each a name
   and its hours). A drawing can't wrap its text, and its
   height is fixed, so names stacked for a phone would
   leave an empty band under the plot on a desktop. The
   row starts at the first category's left edge (--xl, as
   a share of the drawing's width) and gives each category
   an equal column, so each name centers on its mark.
   Sizes follow the sized-chart tiers. */

.mrp-course .mrp-chart-xcats {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  margin: 4px 0 0 var(--xl, 0);
  font-family: var(--mrp-sans);
  font-size: 12px;
  line-height: 1.3;
  color: var(--mrp-ink-2, #3a3d42);
  text-align: center;
}

.mrp-chart-xcats > span {
  padding: 0 3px;
}

.mrp-chart-xcats small {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: var(--mrp-muted, #6b6e76);
}

@container (max-width: 470px) {
  .mrp-course .mrp-chart-xcats { font-size: 11px; }
  .mrp-chart-xcats small { font-size: 10px; }
}

@container (max-width: 400px) {
  .mrp-course .mrp-chart-xcats { font-size: 10px; }
  .mrp-chart-xcats small { font-size: 9px; }
}

/* 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; }
}

/* Sized charts. A drawing's text scales with the drawing, so a
   700-unit chart set in 12-unit labels reads at 12px on a
   desktop and at 5-6px on a phone, and the fixed tiers above
   only go part of the way. A chart opts in with
   .mrp-chart--sized on its wrapper and its drawing width as
   --vb (the viewBox width, a bare number, inline). Each tier
   then sets its label sizes in drawing units from the narrowest
   container in the tier, so on screen a label never drops below
   its target and is at most about a fifth larger.
   Targets: labels (ticks, keys, axis names, bar and value
   labels, findings) 12px, notes 11px, panel titles 13px;
   under a 400px column, 10px, 9px and 11px. A font size set
   on one figure's id outranks these and undoes them, so a
   sized chart has none: it makes room in its drawing instead
   (brand guide, Phone sizes). */

@container (min-width: 661px) {
  .mrp-chart--sized :is(.mrp-chart-tick, .mrp-chart-key, .mrp-chart-axistitle,
    .mrp-chart-axistitle--plain, .mrp-chart-barlab, .mrp-chart-bandlab, .mrp-chart-val, .mrp-chart-finding) { font-size: calc(var(--vb) * 12px / 661); }
  .mrp-chart--sized :is(.mrp-chart-tick--sub, .mrp-chart-note, .mrp-chart-siglab,
    .mrp-scan-note, .mrp-pq-note, .mrp-chart-pttip, .mrp-chart-panelsub) { font-size: calc(var(--vb) * 11px / 661); }
  .mrp-chart--sized .mrp-chart-paneltitle { font-size: calc(var(--vb) * 13px / 661); }
}

@container (min-width: 561px) and (max-width: 660px) {
  .mrp-chart--sized :is(.mrp-chart-tick, .mrp-chart-key, .mrp-chart-axistitle,
    .mrp-chart-axistitle--plain, .mrp-chart-barlab, .mrp-chart-bandlab, .mrp-chart-val, .mrp-chart-finding) { font-size: calc(var(--vb) * 12px / 561); }
  .mrp-chart--sized :is(.mrp-chart-tick--sub, .mrp-chart-note, .mrp-chart-siglab,
    .mrp-scan-note, .mrp-pq-note, .mrp-chart-pttip, .mrp-chart-panelsub) { font-size: calc(var(--vb) * 11px / 561); }
  .mrp-chart--sized .mrp-chart-paneltitle { font-size: calc(var(--vb) * 13px / 561); }
}

@container (min-width: 471px) and (max-width: 560px) {
  .mrp-chart--sized :is(.mrp-chart-tick, .mrp-chart-key, .mrp-chart-axistitle,
    .mrp-chart-axistitle--plain, .mrp-chart-barlab, .mrp-chart-bandlab, .mrp-chart-val, .mrp-chart-finding) { font-size: calc(var(--vb) * 12px / 471); }
  .mrp-chart--sized :is(.mrp-chart-tick--sub, .mrp-chart-note, .mrp-chart-siglab,
    .mrp-scan-note, .mrp-pq-note, .mrp-chart-pttip, .mrp-chart-panelsub) { font-size: calc(var(--vb) * 11px / 471); }
  .mrp-chart--sized .mrp-chart-paneltitle { font-size: calc(var(--vb) * 13px / 471); }
}

@container (min-width: 401px) and (max-width: 470px) {
  .mrp-chart--sized :is(.mrp-chart-tick, .mrp-chart-key, .mrp-chart-axistitle,
    .mrp-chart-axistitle--plain, .mrp-chart-barlab, .mrp-chart-bandlab, .mrp-chart-val, .mrp-chart-finding) { font-size: calc(var(--vb) * 11px / 401); }
  .mrp-chart--sized :is(.mrp-chart-tick--sub, .mrp-chart-note, .mrp-chart-siglab,
    .mrp-scan-note, .mrp-pq-note, .mrp-chart-pttip, .mrp-chart-panelsub) { font-size: calc(var(--vb) * 10px / 401); }
  .mrp-chart--sized .mrp-chart-paneltitle { font-size: calc(var(--vb) * 12px / 401); }
}

@container (max-width: 400px) {
  .mrp-chart--sized :is(.mrp-chart-tick, .mrp-chart-key, .mrp-chart-axistitle,
    .mrp-chart-axistitle--plain, .mrp-chart-barlab, .mrp-chart-bandlab, .mrp-chart-val, .mrp-chart-finding) { font-size: calc(var(--vb) * 10px / 327); }
  .mrp-chart--sized :is(.mrp-chart-tick--sub, .mrp-chart-note, .mrp-chart-siglab,
    .mrp-scan-note, .mrp-pq-note, .mrp-chart-pttip, .mrp-chart-panelsub) { font-size: calc(var(--vb) * 9px / 327); }
  .mrp-chart--sized .mrp-chart-paneltitle { font-size: calc(var(--vb) * 11px / 327); }
}

/* Sized panels. In a small-multiples grid each panel SVG gives
   its own drawing width as --pw, and the grid's layout sets the
   --vb the rules above divide by: two or three across while the
   chart is wide, then stacked and capped at 340px, where a panel
   is about as wide as its column. */

@container (min-width: 661px) {
  .mrp-chart--sized .mrp-chart-panels > svg { --vb: calc(var(--pw) * 3.15); }
  .mrp-chart--sized .mrp-chart-panels--2 > svg { --vb: calc(var(--pw) * 2.06); }
}

@container (min-width: 561px) and (max-width: 660px) {
  .mrp-chart--sized .mrp-chart-panels > svg { --vb: calc(var(--pw) * 561 / 340); }
}

@container (min-width: 471px) and (max-width: 560px) {
  .mrp-chart--sized .mrp-chart-panels > svg { --vb: calc(var(--pw) * 471 / 340); }
}

@container (min-width: 401px) and (max-width: 470px) {
  .mrp-chart--sized .mrp-chart-panels > svg { --vb: calc(var(--pw) * 401 / 340); }
}

@container (max-width: 400px) {
  .mrp-chart--sized .mrp-chart-panels > svg { --vb: var(--pw); }
}

/* Labels hung from the top. The topmost label in a sized
   chart (an axis name, a phase or panel name) hangs from its
   y with dy="0.75em", the font's ascent: its top edge stays
   at y whatever size the tier sets, so the drawing can start
   right there and keep 12px to the title at every width. A
   label that has to sit on its baseline (a bar's name, a
   unit's step above its bar) can't hang; its chart takes
   .mrp-chart--toplabel instead. The drawing starts at that
   label's top in the phone tier, where the type is largest
   in drawing units, and at the wider tiers, where the label
   is smaller and sits lower, it moves up by the difference:
   0.73em of ascent times the change in size, which works out
   to a share of the chart's width. */

@container (min-width: 661px) {
  .mrp-chart--toplabel > .mrp-chart-svg { margin-top: -0.907cqw; }
}

@container (min-width: 561px) and (max-width: 660px) {
  .mrp-chart--toplabel > .mrp-chart-svg { margin-top: -0.671cqw; }
}

@container (min-width: 471px) and (max-width: 560px) {
  .mrp-chart--toplabel > .mrp-chart-svg { margin-top: -0.372cqw; }
}

@container (min-width: 401px) and (max-width: 470px) {
  .mrp-chart--toplabel > .mrp-chart-svg { margin-top: -0.23cqw; }
}

/* a note inside a plot: an annotation, a source line or a
   qualifier, quieter than the labels it sits among */

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

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

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

/* its first tick label centres on the plot's left edge,
   so it reaches a unit or two past the drawing */

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

/* Unfloated on a narrow screen, an inset chart keeps close
   to its drawn size rather than stretching across the
   column: a 320-unit drawing at 600px would set its labels
   near 18px and open its title gap to 22px. */

@media (max-width: 640px) {
  .mrp-figure--inset-right > .mrp-chart--compact,
  .mrp-figure--inset-left > .mrp-chart--compact {
    max-width: 360px;
    margin-inline: auto;
  }
}

/* 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; }
}

/* A finding said in words inside a plot (.mrp-chart-finding):
   the valuing-happiness, anxiety, rapport, negative-affect and
   indebtedness charts each name what the gap between their bars
   means. It is not a significance bracket's quiet note, so it
   takes the series blue weighted toward navy, which holds about
   5:1 on paper where #669bbc alone is about 2.9:1, at a label's
   size and weight. Sized charts set its size with their labels. */

.mrp-chart-finding {
  font-family: var(--mrp-sans);
  font-size: 13px;
  fill:
    color-mix(in srgb, var(--ch-b, #2f8fc4) 70%,
      var(--mrp-navy, #003049));
}

/* 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.01em;
  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.01em;
  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: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  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.01em;
  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 cool counterpart: the 4 R cards washed with their blue at the
   same strength the warm pair carries its gold */

.mrp-skill-node--cool rect {
  fill:
    color-mix(in srgb, var(--ch-b, #2f8fc4) 15%,
      var(--mrp-paper, #fafaf8));
}

/* the branching variant sets its solid arrows a step lighter; the
   heads ride markerUnits, so they slim with the lines */

#fig-six-skills-branch .mrp-cycle-arrow path,
#fig-six-skills-gratitude .mrp-cycle-arrow path,
#fig-six-skills-forgiveness .mrp-cycle-arrow path,
#fig-six-skills-objects .mrp-cycle-arrow path {
  stroke-width: 1.9;
}

/* 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.01em;
  fill: var(--mrp-navy, #003049);
}

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

/* the gratitude and forgiveness variants of the six-skill
   map name what Spark and Savor mean in the practice at
   hand, on a second line inside the warm card. it is a
   gloss rather than a second name, so it takes the muted
   voice the group glosses use and a step down in size:
   the card's own word still reads first. it also grows
   more slowly than those glosses at narrow widths,
   because this line has only its 150-unit card to sit in
   rather than open ground */

.mrp-skill-cardsub {
  font-size: 10.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-cardsub { font-size: 11.5px; }
  .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; }
  .mrp-skill-cardsub { font-size: 12.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.87rem;
  letter-spacing: 0.01em;
  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;
}

/* ----------------------------------------------------------
   13a1 · Spirals — an upward and a downward spiral side by
   side (class 3, the upward spiral). Each spiral is a column
   of numbered steps on a ribbon coiled round an upright
   cylinder: the upward one reads bottom to top in ok-green,
   the downward one top to bottom in clay, and each ribbon
   ends in an arrowhead pointing the way it turns. A leader
   runs from each node to its step. Steps are HTML, so they
   wrap at any width; under 640px the two spirals stack.
   mrp-course.js draws the ribbon; without it the spine is a
   plain wave with a chevron.
   ---------------------------------------------------------- */

.mrp-spirals {
  --sp-spine: 100px;
  --sp-node: 30px;
  --sp-gap: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  padding: 26px 28px 28px;
  background: color-mix(in srgb,
    var(--mrp-bg-alt, #f2f0eb) 75%,
    var(--mrp-page, #fafaf8));
  border-radius: var(--mrp-radius-sm, 7px);
}

.mrp-spiral {
  --sp-accent: var(--mrp-ok, #3e6b4f);
  display: flex;
  flex-direction: column;
}

.mrp-spiral--down {
  --sp-accent: var(--mrp-clay, #a2543f);
}

/* a hairline between the two spirals */
.mrp-spiral + .mrp-spiral {
  padding-left: 32px;
  margin-left: -1px;
  border-left: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-spiral-head,
.mrp-course .mrp-spiral-head {
  margin: 0 0 2px;
  font-family: var(--mrp-sans);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sp-accent);
}

.mrp-spiral-read,
.mrp-course .mrp-spiral-read {
  margin: 0 0 14px;
  font-family: var(--mrp-sans);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--mrp-ink-3, #555860);
}

.mrp-spiral-body {
  position: relative;
  flex: 1;
  padding-left: calc(var(--sp-spine) + var(--sp-gap));
}

/* the spine, stretched to the column's height */

.mrp-figure svg.mrp-spiral-spine {
  position: absolute;
  left: 0;
  top: 8px;
  width: var(--sp-spine);
  height: calc(100% - 16px);
  border-radius: 0;
  overflow: visible;
  color: color-mix(in srgb, var(--sp-accent) 55%,
    var(--mrp-page, #fafaf8));
}

/* the ribbon: the inside of each turn deeper, the outside
   lit from the left and falling off toward the right */
.mrp-spiral-spine .mrp-spiral-back {
  fill: color-mix(in srgb, var(--sp-accent) 62%, var(--mrp-page, #fafaf8));
  stroke: color-mix(in srgb, var(--sp-accent) 62%, var(--mrp-page, #fafaf8));
  stroke-width: 0.75;
  stroke-linejoin: round;
}

.mrp-spiral-spine .mrp-spiral-front {
  stroke: color-mix(in srgb, var(--sp-accent) 40%, var(--mrp-page, #fafaf8));
  stroke-width: 0.75;
  stroke-linejoin: round;
}

.mrp-spiral-spine .mrp-spiral-stop--edge {
  stop-color: color-mix(in srgb, var(--sp-accent) 46%, var(--mrp-page, #fafaf8));
}

.mrp-spiral-spine .mrp-spiral-stop--lit {
  stop-color: color-mix(in srgb, var(--sp-accent) 24%, var(--mrp-page, #fafaf8));
}

.mrp-spiral-spine .mrp-spiral-stop--shade {
  stop-color: color-mix(in srgb, var(--sp-accent) 58%, var(--mrp-page, #fafaf8));
}

.mrp-spiral-spine .mrp-spiral-arrow {
  fill: color-mix(in srgb, var(--sp-accent) 80%, var(--mrp-page, #fafaf8));
}

.mrp-spiral-spine .mrp-spiral-lead {
  fill: none;
  stroke: var(--sp-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.mrp-spiral-spine .mrp-spiral-dot {
  fill: var(--sp-accent);
}

/* no-JS fallback arrowhead */
.mrp-spiral-body::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-spine) / 2 - 7px);
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-left: 2.5px solid var(--sp-accent);
  border-top: 2.5px solid var(--sp-accent);
}

.mrp-spiral-body.is-coiled::after {
  display: none;
}

.mrp-spiral--up .mrp-spiral-body::after {
  top: 2px;
  transform: rotate(45deg);
}

.mrp-spiral--down .mrp-spiral-body::after {
  bottom: 2px;
  transform: rotate(225deg);
}

.mrp-spiral-steps,
.mrp-course .mrp-spiral-steps {
  list-style: none;
  margin: 0;
  padding: 48px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.mrp-spiral--down .mrp-spiral-steps {
  padding: 40px 0 48px;
}

/* the upward spiral starts at the bottom */

.mrp-spiral--up .mrp-spiral-steps {
  flex-direction: column-reverse;
}

.mrp-spiral-step,
.mrp-course .mrp-spiral-step {
  position: relative;
  margin: 0;
  padding: 0;
}

.mrp-spiral-step::before {
  content: attr(data-step);
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(-1 * var(--sp-gap) - var(--sp-spine) / 2 - var(--sp-node) / 2);
  width: var(--sp-node);
  height: var(--sp-node);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  background: #fff;
  border: 2px solid var(--sp-accent);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--sp-accent);
}

.mrp-spiral-step b {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--mrp-navy, #003049);
}

.mrp-spiral-step span {
  display: block;
  margin-top: 3px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--mrp-ink-3, #555860);
}

@media (max-width: 640px) {
  .mrp-spirals {
    --sp-spine: 92px;
    --sp-gap: 36px;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 20px 16px;
  }

  .mrp-spiral + .mrp-spiral {
    padding-left: 0;
    margin-left: 0;
    padding-top: 28px;
    border-left: 0;
    border-top: 1px solid var(--mrp-line, #e4e2dd);
  }
}

/* ----------------------------------------------------------
   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;
}

/* set as open columns, the dot stays beside the name and the
   name still sits on its gold rule */

.mrp-skills--pair.mrp-skills--open .mrp-skill-head,
.mrp-skills--pair.mrp-skills--open .mrp-skill-col:hover .mrp-skill-head {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}

/* under a 3D brain, whose tray paints to the iframe's edge,
   the panel keeps the figure's 12px rather than butting
   against the tray in a near-matching gray */

.mrp-embed-3d + .mrp-skills--open {
  margin-top: 12px;
}


/* 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.82rem;
  letter-spacing: 0.01em;
  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.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  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.83rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  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.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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.82rem;
  letter-spacing: 0.01em;
  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;
}

/* Brain-linked rows (figure[data-brain-link], see
   initBrainLinks): the row whose region the brain is
   showing takes a faint wash in its practice colour. The
   wash is widened with side shadows rather than padding so
   the rows and their rules do not move. A single word in a
   row (the four prefrontal parts) gets the same wash, a
   step stronger, when it alone is lit. */

[data-brain-link] [data-brain-region] {
  --brain-wash: color-mix(in srgb,
    var(--mx-fam, #2f6f9e) 10%, #fff);
  --brain-wash-strong: color-mix(in srgb,
    var(--mx-fam, #2f6f9e) 20%, #fff);
  cursor: pointer;
  transition: background-color 0.15s ease,
    box-shadow 0.15s ease;
}

[data-brain-link] [data-brain-region^="lkm-"] {
  --brain-wash: color-mix(in srgb,
    var(--mx-lk, #3f8a4e) 10%, #fff);
  --brain-wash-strong: color-mix(in srgb,
    var(--mx-lk, #3f8a4e) 20%, #fff);
}

[data-brain-link] [data-brain-region^="emp-"] {
  --brain-wash: color-mix(in srgb,
    var(--mrp-clay, #a2543f) 10%, #fff);
}

[data-brain-link] [data-brain-region^="comp-"] {
  --brain-wash: color-mix(in srgb,
    var(--mx-lk, #3f8a4e) 10%, #fff);
}

[data-brain-link] li.is-brain-lit {
  background: var(--brain-wash);
  box-shadow:
    -8px 0 0 var(--brain-wash),
    8px 0 0 var(--brain-wash);
}

[data-brain-link] li.is-brain-lit span.is-brain-lit {
  background: var(--brain-wash-strong);
  box-shadow:
    -2px 0 0 var(--brain-wash-strong),
    2px 0 0 var(--brain-wash-strong);
  border-radius: 2px;
}

/* other linked elements (chart rows, table rows): the same
   wash, in a neutral ink, since a chart row's colour already
   belongs to its bars */

[data-brain-link] [data-brain-region]:not(li):not(span) {
  --brain-wash: color-mix(in srgb,
    var(--mrp-navy, #003049) 6%, transparent);
  border-radius: 6px;
}

[data-brain-link] [data-brain-region].is-brain-lit:not(li):not(span) {
  background: var(--brain-wash);
  box-shadow:
    -6px 0 0 var(--brain-wash),
    6px 0 0 var(--brain-wash);
}

/* bars inside a chart take no background, so a lit bar
   group is outlined instead */

[data-brain-link] g.is-brain-lit .mrp-chart-bar {
  stroke: var(--mrp-navy, #003049);
  stroke-width: 1.5px;
}

/* ----------------------------------------------------------
   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.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  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.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--mrp-clay, #a2543f);
}

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

.mrp-turn-domain {
  font-size: 0.83rem;
  letter-spacing: 0.01em;
  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.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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.83rem;
  letter-spacing: 0.01em;
  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.83rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  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.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  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);
  /* a reflection box is a full-measure card: it never sits beside a
     floated figure, it starts below one — same as the quiz */
  clear: both;
}

.mrp-submit-label {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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;
}

/* the learner reflects off the page, in whatever form suits
   them; the note under the questions says so, quieter than
   the questions themselves */

.mrp-submit-note,
.mrp-course .mrp-submit-note {
  font-family: var(--mrp-sans);
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--mrp-ink-3, #555860);
  margin: 0.2em 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--mrp-line, #e4e2dd);
}

.mrp-submit-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* Completed: the status line sits left, the button right */

.mrp-submit-foot [data-mrp-complete] {
  margin-left: auto;
}

.mrp-submit-foot .mrp-submit-status {
  margin-left: 0;
}

.mrp-btn--ghost[aria-pressed="true"],
.mrp-btn--ghost[aria-pressed="true"]:hover {
  background: var(--mrp-ok, #3e6b4f);
  border-color: var(--mrp-ok, #3e6b4f);
  color: #fff;
}

.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.82rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    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.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  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);
}


/* the savoring balance (Class 2): a seesaw that finds its level by
   ever-finer corrections, rests, drifts off, and begins again. no
   controls: the loop is the lesson. under reduced motion the beam
   simply rests level, the state the animation is seeking. */

#fig-savoring-balance .mrp-bal-beam {
  transform-box: view-box;
  transform-origin: 350px 190px;
  animation: mrp-bal-tilt 14s ease-in-out infinite;
}

@keyframes mrp-bal-tilt {
  0%       { transform: rotate(-9deg); }
  12%      { transform: rotate(6.5deg); }
  24%      { transform: rotate(-4.5deg); }
  35%      { transform: rotate(3deg); }
  45%      { transform: rotate(-2deg); }
  54%      { transform: rotate(1.2deg); }
  62%      { transform: rotate(-0.7deg); }
  69%      { transform: rotate(0.35deg); }
  75%, 90% { transform: rotate(0deg); }
  100%     { transform: rotate(-9deg); }
}

@media (prefers-reduced-motion: reduce) {
  #fig-savoring-balance .mrp-bal-beam {
    animation: none;
  }
}

/* Object switch: the six-skill map with a row of practice
   buttons under it (Class 6). Pressing one rewrites only the
   Spark and Savor cards; the 4 R's never move. The pressed
   button takes the warm card fill so the link between the
   button and the cards it changes is visible. */

.mrp-object-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  margin: 1.2em 0 0;
}

.mrp-object-btn {
  font-family: var(--mrp-sans);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.6em 1em;
  border-radius: 999px;
  border: 1px solid var(--mrp-line, #e4e2dd);
  background: var(--mrp-paper, #fafaf8);
  color: var(--mrp-navy, #003049);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.mrp-object-btn:hover {
  border-color: var(--mrp-gold, #c2a14f);
}

.mrp-object-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mrp-gold, #c2a14f) 22%,
    var(--mrp-paper, #fafaf8));
  border-color: var(--mrp-gold, #c2a14f);
}

.mrp-object-btn:focus-visible {
  outline: 2px solid var(--mrp-navy, #003049);
  outline-offset: 2px;
}

.mrp-course .mrp-object-desc {
  max-width: 36em;
  min-height: 3.4em;
  margin: 0.9em auto 0;
  font-family: var(--mrp-sans);
  font-size: 0.92rem;
  text-align: center;
  color: var(--mrp-ink-2, #3a3d42);
}

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

/* Scrub figure (Class 3, factoring out the unskillful): one range
   input moves the drawing from the beginning of a meditation to its
   end. The track runs from clay to green because that is the
   direction of travel; the thumb is the course's paper card. The
   stage line under it takes the object picker's centred voice. */

.mrp-scrub {
  max-width: 30em;
  margin: 0.6em auto 0;
}

.mrp-scrub-ends {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.2em;
  font-family: var(--mrp-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mrp-navy, #003049);
}

.mrp-scrub-ends span:last-child {
  text-align: right;
}

.mrp-scrub-input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.mrp-scrub-input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--mrp-clay, #a2543f) 55%, #fff),
    color-mix(in srgb, var(--mrp-ok, #3e6b4f) 70%, #fff));
}

.mrp-scrub-input::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--mrp-clay, #a2543f) 55%, #fff),
    color-mix(in srgb, var(--mrp-ok, #3e6b4f) 70%, #fff));
}

.mrp-scrub-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--mrp-paper, #fafaf8);
  border: 2px solid var(--mrp-navy, #003049);
  box-shadow: var(--mrp-shadow);
}

.mrp-scrub-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mrp-paper, #fafaf8);
  border: 2px solid var(--mrp-navy, #003049);
  box-shadow: var(--mrp-shadow);
}

.mrp-scrub-input:focus-visible {
  outline: 2px solid var(--mrp-navy, #003049);
  outline-offset: 3px;
  border-radius: 999px;
}

.mrp-course .mrp-scrub-hint {
  margin: 0.2em 0 0;
  text-align: center;
  font-family: var(--mrp-sans);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--mrp-muted, #6b6e76);
}

.mrp-course .mrp-scrub-stage {
  max-width: 36em;
  min-height: 4.6em;
  margin: 0.7em auto 0;
  font-family: var(--mrp-sans);
  font-size: 0.92rem;
  text-align: center;
  color: var(--mrp-ink-2, #3a3d42);
}

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

[data-mrp-scrub] [data-fx] {
  transition: opacity 0.1s linear, transform 0.1s linear;
}

[data-mrp-scrub] [data-fx="rust"],
[data-mrp-scrub] [data-fx="grow"] {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  [data-mrp-scrub] [data-fx] {
    transition: none;
  }
}

[data-mrp-object-switch].is-swapping .mrp-skill-node--warm {
  animation: mrp-object-swap 0.45s ease-out;
}

@keyframes mrp-object-swap {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-mrp-object-switch].is-swapping .mrp-skill-node--warm {
    animation: none;
  }
}

/* Walk through the practice (Class 2's six-skill map,
   [data-mrp-walk]). The map opens with every card showing, just
   as it reads on its own. On a step (playing, or picked from a
   bar or a card) it adds .is-active: the card you're on comes
   forward with a slow breathing halo in its family's color, the
   line you came along darkens, and the rest of the map steps
   back without disappearing. Stop, picking the step again, or
   clicking anywhere off the controls and cards shows all six.
   Gold is the 2 S's and blue the 4 R's, the colors the cards
   already carry; type stays in navy and muted gray, since
   neither hue is dark enough for text. */

.mrp-walk {
  --walk-s: var(--mrp-gold, #c2a14f);
  --walk-r: #2f8fc4;
  --walk-c: var(--walk-s);
}

.mrp-walk[data-walk-fam="r"] {
  --walk-c: var(--walk-r);
}

/* --- the map: where you are --- */

.mrp-walk.is-ready .mrp-skill-node,
.mrp-walk.is-ready [data-walk-fam],
.mrp-walk.is-ready [data-walk-label] {
  transition: opacity 0.4s ease;
}

.mrp-walk.is-ready .mrp-skill-node {
  cursor: pointer;
}

.mrp-walk.is-active .mrp-skill-node {
  opacity: 0.42;
}

.mrp-walk.is-active .mrp-skill-node.is-current {
  opacity: 1;
}

.mrp-walk .mrp-skill-node rect:not(.mrp-walk-halo) {
  transition: fill 0.4s ease, stroke-width 0.4s ease;
}

.mrp-walk .mrp-skill-node.is-current rect:not(.mrp-walk-halo) {
  stroke-width: 2.4;
}

.mrp-walk .mrp-skill-node--warm.is-current rect:not(.mrp-walk-halo) {
  fill: color-mix(in srgb, var(--walk-s) 30%, var(--mrp-paper, #fafaf8));
}

.mrp-walk .mrp-skill-node--cool.is-current rect:not(.mrp-walk-halo) {
  fill: color-mix(in srgb, var(--walk-r) 26%, var(--mrp-paper, #fafaf8));
}

/* scoped through the card so it outranks the card's own rect rule */
.mrp-skill-node .mrp-walk-halo {
  fill: none;
  stroke-width: 6;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mrp-skill-node--warm .mrp-walk-halo { stroke: var(--walk-s); }
.mrp-skill-node--cool .mrp-walk-halo { stroke: var(--walk-r); }

.mrp-skill-node.is-current .mrp-walk-halo {
  opacity: 0.5;
  animation: mrp-walk-breathe 4.8s ease-in-out infinite;
}

@keyframes mrp-walk-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.7; }
}

/* the lines: each carries its own fade now, so the one you came
   along can darken alone (opacity on the line takes its head with
   it, as one shape, the way the group's fade did). With all six
   showing they keep the strengths their groups give them on the
   plain map: .38 for the solid lines, .3 for the dotted one. These
   hold from the first paint, not from .is-ready, so nothing fades
   in as the script starts */

.mrp-walk .mrp-cycle-arrow,
.mrp-walk .mrp-skill-return {
  opacity: 1;
}

.mrp-walk [data-walk-edge] {
  opacity: 0.38;
}

.mrp-walk .mrp-skill-return [data-walk-edge] {
  opacity: 0.3;
}

.mrp-walk.is-ready [data-walk-edge] {
  transition: opacity 0.4s ease;
}

.mrp-walk.is-active [data-walk-edge] {
  opacity: 0.2;
}

.mrp-walk.is-active .mrp-skill-return [data-walk-edge] {
  opacity: 0.18;
}

.mrp-walk.is-active [data-walk-edge].is-path {
  opacity: 0.9;
}

.mrp-walk.is-active .mrp-skill-return [data-walk-edge].is-path {
  opacity: 0.75;
}

/* the family you're in, and the words on the line you took */

.mrp-walk.is-active [data-walk-fam],
.mrp-walk.is-active [data-walk-label] {
  opacity: 0.45;
}

.mrp-walk.is-active [data-walk-fam].is-on,
.mrp-walk.is-active [data-walk-label].is-on {
  opacity: 1;
}

.mrp-walk [data-walk-label].is-on {
  fill: var(--mrp-navy, #003049);
}

/* --- the controls: the carousel's play button and story bars.
   Play walks the cycle on a loop, each bar filling while its card
   is lit; Stop ends the walk and shows all six again. A bar you
   pick by hand sits full, with play off. --- */

.mrp-walk-ui {
  max-width: 36rem;
  margin: 20px auto 0;
}

.mrp-walk:not(.is-ready) .mrp-walk-ui {
  display: none;
}

/* through the figure, to outrank .mrp-figure svg's display: block */
.mrp-walk .mrp-walk-icon-stop { display: none; }
.mrp-walk.is-playing .mrp-walk-icon-stop { display: block; }
.mrp-walk.is-playing .mrp-walk-icon-play { display: none; }

.mrp-walk:not(.is-playing) .mrp-sixanim-step.is-current .mrp-sixanim-bar::after {
  animation: none;
  transform: none;
}

.mrp-walk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .mrp-skill-node.is-current .mrp-walk-halo { animation: none; }
}

/* The six skills, animated (Class 2, [data-mrp-sixanim]). One
   cartoon panel in the course's cartoon idiom; the figure's
   data-step (1-6) says which scene shows. Every scene is drawn
   into the one SVG: an element marked .ssa-v with .ssa-on-N
   shows on step N and fades out otherwise, so the meditator
   stays put while the cloud, the arrows, the face and the glow
   change around them. initSixAnim steps the figure on a timer,
   cross-fading scene to scene, and pauses it on request or out of
   view. */

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

.mrp-sixanim .ssa-v {
  opacity: 0;
  transition: opacity 1.1s ease-in-out;
}

.mrp-sixanim[data-step="1"] .ssa-on-1,
.mrp-sixanim[data-step="2"] .ssa-on-2,
.mrp-sixanim[data-step="3"] .ssa-on-3,
.mrp-sixanim[data-step="4"] .ssa-on-4,
.mrp-sixanim[data-step="5"] .ssa-on-5,
.mrp-sixanim[data-step="6"] .ssa-on-6 {
  opacity: 1;
}

/* the titles share one spot, so they hand over instead of
   crossing: the old one is gone before the new one comes in,
   and the letters never sit on top of each other */
.mrp-sixanim .ssa-v.ssa-title {
  transition: opacity 0.45s ease-in;
}

.mrp-sixanim[data-step="1"] .ssa-title.ssa-on-1,
.mrp-sixanim[data-step="2"] .ssa-title.ssa-on-2,
.mrp-sixanim[data-step="3"] .ssa-title.ssa-on-3,
.mrp-sixanim[data-step="4"] .ssa-title.ssa-on-4,
.mrp-sixanim[data-step="5"] .ssa-title.ssa-on-5,
.mrp-sixanim[data-step="6"] .ssa-title.ssa-on-6 {
  transition: opacity 0.65s ease-out 0.45s;
}

/* savor: the memory fades back while the feeling stays */
.mrp-sixanim[data-step="2"] .ssa-cloud-warm {
  opacity: 0.32;
}

/* the bubbles rise one after another, from the head up */
.mrp-sixanim .ssa-bubble {
  opacity: 0;
  transition: opacity 0.45s ease calc(0.3s + var(--i) * 0.25s);
}

.mrp-sixanim[data-step="1"] .ssa-cloud-warm .ssa-bubble,
.mrp-sixanim[data-step="2"] .ssa-cloud-warm .ssa-bubble,
.mrp-sixanim[data-step="3"] .ssa-cloud-busy .ssa-bubble {
  opacity: 1;
}

/* an arrow draws itself, then takes its head */
.mrp-sixanim .ssa-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.mrp-sixanim .ssa-head {
  opacity: 0;
}

.mrp-sixanim[data-step="2"] .ssa-on-2 .ssa-draw,
.mrp-sixanim[data-step="6"] .ssa-on-6 .ssa-draw {
  animation: ssa-draw 1.4s ease-in-out 0.5s forwards;
}

.mrp-sixanim[data-step="2"] .ssa-on-2 .ssa-head,
.mrp-sixanim[data-step="6"] .ssa-on-6 .ssa-head {
  animation: ssa-show 0.3s ease 1.8s forwards;
}

/* relax: the tangle loosens and runs out as a thread */
.mrp-sixanim .ssa-thread {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.mrp-sixanim[data-step="4"] .ssa-thread {
  animation: ssa-draw 2.6s ease-in-out 0.5s forwards;
}

.mrp-sixanim .ssa-loosen-tangle {
  transform-box: fill-box;
  transform-origin: center;
}

.mrp-sixanim[data-step="4"] .ssa-loosen-tangle {
  animation: ssa-loosen 3s ease-in-out 0.4s forwards;
}

/* the warmth in the chest: faint at the spark, full while
   savoring, nearly gone while distracted, back on return */
.mrp-sixanim .ssa-glow {
  opacity: 0.3;
  transition: opacity 1.4s ease;
}

.mrp-sixanim[data-step="2"] .ssa-glow,
.mrp-sixanim[data-step="6"] .ssa-glow { opacity: 1; }
.mrp-sixanim[data-step="3"] .ssa-glow { opacity: 0.08; }
.mrp-sixanim[data-step="4"] .ssa-glow { opacity: 0.14; }
.mrp-sixanim[data-step="5"] .ssa-glow { opacity: 0.4; }

.mrp-sixanim .ssa-glow-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: ssa-breathe 5s ease-in-out infinite;
}

.mrp-sixanim .ssa-cheek {
  opacity: 0.45;
  transition: opacity 0.9s ease;
}

.mrp-sixanim[data-step="5"] .ssa-cheek { opacity: 0.85; }

.mrp-sixanim[data-step="1"] .ssa-sparks {
  animation: ssa-twinkle 1.8s ease-in-out infinite;
}

.mrp-sixanim[data-step="4"] .ssa-breath {
  animation: ssa-breathout 3.2s ease-in-out infinite;
}

/* relief: the last of the loosened thread drifts away */
.mrp-sixanim[data-step="5"] .ssa-drift {
  animation: ssa-driftoff 4.5s ease-out 0.3s forwards;
}

@keyframes ssa-driftoff {
  from { transform: translate(0, 0); opacity: 1; }
  to { transform: translate(26px, -8px); opacity: 0; }
}

@keyframes ssa-draw { to { stroke-dashoffset: 0; } }
@keyframes ssa-show { to { opacity: 1; } }
@keyframes ssa-loosen { to { opacity: 0.2; transform: scale(0.82) rotate(-12deg); } }
@keyframes ssa-breathe {
  0%, 100% { transform: scale(0.9); }
  50% { transform: scale(1.1); }
}
@keyframes ssa-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@keyframes ssa-breathout {
  0% { transform: translateX(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(8px); opacity: 0; }
}

/* --- the controls: play or pause, and the six steps as a row of
   story-style bars, each filling while its scene plays --- */

.mrp-sixanim-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  max-width: 36rem;
  margin: 14px auto 0;
  container-type: inline-size;
}

.mrp-sixanim-play {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: 50%;
  background: var(--mrp-paper, #fafaf8);
  color: var(--mrp-navy, #003049);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.mrp-sixanim-play:hover {
  border-color: var(--mrp-navy, #003049);
}

.mrp-sixanim-play:focus-visible {
  outline: 2px solid var(--mrp-navy, #003049);
  outline-offset: 2px;
}

.mrp-sixanim-play svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* through the figure, to outrank .mrp-figure svg's display: block */
.mrp-sixanim .mrp-sixanim-icon-play { display: none; }
.mrp-sixanim.is-paused .mrp-sixanim-icon-play { display: block; }
.mrp-sixanim.is-paused .mrp-sixanim-icon-pause { display: none; }

/* scoped through the figure to outrank the page's own list margins */
.mrp-course .mrp-sixanim .mrp-sixanim-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mrp-sixanim-step {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mrp-sans);
  font-size: 12px;
  line-height: 1.2;
  color: var(--mrp-muted, #6b6e76);
  text-align: center;
  cursor: pointer;
}

.mrp-sixanim-step--s { --bar: var(--mrp-gold, #c2a14f); }
.mrp-sixanim-step--r { --bar: #2f8fc4; }

.mrp-sixanim-bar {
  position: relative;
  display: block;
  height: 3px;
  margin-bottom: 6px;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--bar) 22%, transparent);
}

.mrp-sixanim-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bar);
  transform: scaleX(0);
  transform-origin: left;
}

.mrp-sixanim-step.is-done .mrp-sixanim-bar::after {
  transform: none;
}

.mrp-sixanim-step.is-current .mrp-sixanim-bar::after {
  animation: ssa-fill var(--ssa-dur, 5s) linear forwards;
}

.mrp-sixanim.is-paused .mrp-sixanim-step.is-current .mrp-sixanim-bar::after {
  animation-play-state: paused;
}

/* the carousel, stopped on a step someone picked: its bar is full */
.mrp-sixcar.is-stopped .mrp-sixanim-step.is-current .mrp-sixanim-bar::after {
  animation: none;
  transform: none;
}

.mrp-sixanim-step.is-current {
  font-weight: 700;
  color: var(--mrp-navy, #003049);
}

.mrp-sixanim-step:hover {
  color: var(--mrp-navy, #003049);
}

.mrp-sixanim-step:focus-visible {
  outline: 2px solid var(--mrp-navy, #003049);
  outline-offset: 3px;
  border-radius: 3px;
}

@keyframes ssa-fill { to { transform: none; } }

@container (max-width: 400px) {
  .mrp-sixanim-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .mrp-sixanim-bar { margin-bottom: 0; }
  .mrp-sixanim-step { padding: 8px 0; }
}

/* reduced motion: the scenes still cross-fade (a fade is the
   transition that setting asks for), but nothing moves inside
   them; each shows its end state. The step rules above are more
   specific, so these need !important. */
@media (prefers-reduced-motion: reduce) {
  .mrp-sixanim .ssa-bubble { transition: opacity 1.1s ease-in-out !important; }
  .mrp-sixanim .ssa-glow-core,
  .mrp-sixanim .ssa-sparks,
  .mrp-sixanim .ssa-breath,
  .mrp-sixanim .ssa-drift,
  .mrp-sixanim .ssa-loosen-tangle,
  .mrp-sixanim .ssa-draw,
  .mrp-sixanim .ssa-thread,
  .mrp-sixanim .ssa-head,
  .mrp-sixanim-step.is-current .mrp-sixanim-bar::after {
    animation: none !important;
  }
  .mrp-sixanim .ssa-draw,
  .mrp-sixanim .ssa-thread { stroke-dashoffset: 0; }
  .mrp-sixanim .ssa-head { opacity: 1; }
  .mrp-sixanim[data-step="4"] .ssa-loosen-tangle { opacity: 0.25; }
  .mrp-sixanim-step.is-current .mrp-sixanim-bar::after { transform: none; }
}

/* The six skills as a cartoon carousel (Class 2, review,
   [data-mrp-sixcar]). Six square cartoon panels on a 3:2 stage.
   At data-step="all" they sit three over three, filling it; at a
   step the picked panel grows to the stage's full height in the
   middle while the one before and after it in the loop shrink to
   the edges and the rest slide out of sight, so Return always has
   Spark waiting to its right. The figure also carries the
   .mrp-sixanim class so the story bars below are the animated
   version's. It has no play button and no per-step captions:
   it plays on its own, and the figcaption under it stays put. */

.mrp-sixcar-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
  background: #f4eee4;
}

.mrp-sixcar-tile {
  position: absolute;
  z-index: 1;
  padding: 0.4%;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 1;
  transition:
    left 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.75s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s ease;
}

.mrp-sixcar-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 2px;
}

.mrp-sixcar-tile:focus-visible {
  outline: 2px solid var(--mrp-navy, #003049);
  outline-offset: -3px;
}

/* all six: three over three */
.mrp-sixcar-tile[data-pos="grid"] { width: 33.333%; height: 50%; }
.mrp-sixcar-tile[data-pos="grid"]:nth-child(1) { left: 0;       top: 0; }
.mrp-sixcar-tile[data-pos="grid"]:nth-child(2) { left: 33.333%; top: 0; }
.mrp-sixcar-tile[data-pos="grid"]:nth-child(3) { left: 66.667%; top: 0; }
.mrp-sixcar-tile[data-pos="grid"]:nth-child(4) { left: 0;       top: 50%; }
.mrp-sixcar-tile[data-pos="grid"]:nth-child(5) { left: 33.333%; top: 50%; }
.mrp-sixcar-tile[data-pos="grid"]:nth-child(6) { left: 66.667%; top: 50%; }

.mrp-sixcar-tile[data-pos="grid"]:hover img {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mrp-navy, #003049) 25%, transparent);
}

/* one skill: the picked panel at full height in the middle */
.mrp-sixcar-tile[data-pos="cur"] {
  z-index: 3;
  left: 16.667%;
  top: 0;
  width: 66.667%;
  height: 100%;
  cursor: zoom-out;
}

/* its neighbours in the loop, small at either edge */
.mrp-sixcar-tile[data-pos="prev"],
.mrp-sixcar-tile[data-pos="next"] {
  z-index: 2;
  top: 20%;
  width: 40%;
  height: 60%;
  opacity: 0.42;
}
.mrp-sixcar-tile[data-pos="prev"] { left: -26%; }
.mrp-sixcar-tile[data-pos="next"] { left: 86%; }
.mrp-sixcar-tile[data-pos="prev"]:hover,
.mrp-sixcar-tile[data-pos="next"]:hover { opacity: 0.75; }

/* the rest wait off stage, on the side they will come in from */
.mrp-sixcar-tile[data-pos="before"],
.mrp-sixcar-tile[data-pos="after"] {
  top: 27.5%;
  width: 30%;
  height: 45%;
  opacity: 0;
  pointer-events: none;
}
.mrp-sixcar-tile[data-pos="before"] { left: -44%; }
.mrp-sixcar-tile[data-pos="after"] { left: 114%; }

/* controls: the animated version's story bars, with All at the
   end of the row */
.mrp-sixcar .mrp-sixanim-controls {
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 40rem;
}

.mrp-sixcar-all {
  padding: 5px 12px;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: 999px;
  background: var(--mrp-paper, #fafaf8);
  font-family: var(--mrp-sans);
  font-size: 12px;
  line-height: 1.2;
  color: var(--mrp-muted, #6b6e76);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.mrp-sixcar-all:hover {
  border-color: var(--mrp-navy, #003049);
  color: var(--mrp-navy, #003049);
}

.mrp-sixcar-all.is-current {
  border-color: var(--mrp-navy, #003049);
  background: var(--mrp-navy, #003049);
  color: #fff;
  font-weight: 700;
}

.mrp-sixcar-all:focus-visible {
  outline: 2px solid var(--mrp-navy, #003049);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .mrp-sixcar-tile {
    transition: opacity 0.6s ease;
  }
}


/* ----------------------------------------------------------
   25 · Type scale (opt-in)
   The standardized hierarchy documented in brand-guide.html:
   48 → 32 → 24 → 18, every heading bold navy, figure titles
   in --mrp-blue-dark. A page opts in with
   .mrp-course--type-scale on <body>; all six class pages and
   the guide do now, so the next step is to fold this section
   into the base rules and retire the class.
   Spacing values are the visible gaps. Vertical margins
   collapse, so where a heading's margin meets a paragraph's
   the larger one is what shows, not the sum.
   The .mrp-type-* classes give the same looks without
   heading semantics, for specimens.
   ---------------------------------------------------------- */

/* H1 · page / class title: 48px, 36px on phones */

.mrp-course--type-scale .mrp-page-head h1,
.mrp-course--type-scale .mrp-type-h1 {
  font-family: var(--mrp-sans);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--mrp-navy, #003049);
}

/* 12px from the eyebrow to the title; 40px from the
   title block to the first section (16px here plus the
   layout's own 24px top padding) */

.mrp-course--type-scale .mrp-page-head .mrp-eyebrow {
  margin-bottom: 12px;
}

.mrp-course--type-scale .mrp-page-head .mrp-section-head {
  margin-bottom: 0;
}

.mrp-course--type-scale .mrp-page-head {
  padding-bottom: 16px;
}

/* H2 · section: 32px, 28px on phones; 16px to the
   section's content */

.mrp-course--type-scale .mrp-main .mrp-section-head h2,
.mrp-course--type-scale .mrp-type-h2 {
  font-family: var(--mrp-sans);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mrp-navy, #003049);
}

.mrp-course--type-scale .mrp-main .mrp-section-head {
  margin-bottom: 16px;
}

/* 64px between sections, split 32px either side of
   the rule. Paged mode shows one section at a time and
   keeps its own reset, so it is left out here. */

html:not(.mrp-paged) .mrp-course--type-scale .mrp-main
  section[data-mrp-region] + section[data-mrp-region] {
  margin-top: 32px;
  padding-top: 32px;
}

/* H3 · subsection: 24px, 22px on phones; 40px above,
   12px below. Only headings in the prose flow (direct
   children of a section), so components that set their
   own h3 keep it. */

.mrp-course--type-scale .mrp-main
  section[data-mrp-region] > h3,
.mrp-course--type-scale .mrp-type-h3 {
  font-family: var(--mrp-sans);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mrp-navy, #003049);
}

.mrp-course--type-scale .mrp-main
  section[data-mrp-region] > h3 {
  margin: 40px 0 12px;
}

/* H4 · minor heading: 18px; 24px above, 8px below.
   Sparingly, for genuine subdivisions. */

.mrp-course--type-scale .mrp-main
  section[data-mrp-region] > h4,
.mrp-course--type-scale .mrp-type-h4 {
  font-family: var(--mrp-sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--mrp-navy, #003049);
}

.mrp-course--type-scale .mrp-main
  section[data-mrp-region] > h4 {
  margin: 24px 0 8px;
}

/* a component titled by an h4 sits the heading's 8px
   below it, not its own top margin */

.mrp-course--type-scale h4 + .mrp-syllabus {
  margin-top: 0;
}

/* Figure title: 18px regular in the darker blue (color
   and centering, not weight, set it apart), centered over
   the figure (compact insets included) so it reads as
   the figure's name rather than another heading in the
   left-aligned flow; 12px to the plot, or 6px to a
   subtitle that then takes the 12px. The gap is to the
   first drawn mark, so a chart's SVG viewBox starts at
   its topmost mark: no empty band built into the top
   of the drawing for the title to float above. */

.mrp-course--type-scale .mrp-chart-title,
.mrp-course--type-scale .mrp-chart--compact .mrp-chart-title,
.mrp-course--type-scale .mrp-type-figure-title {
  margin: 0 0 12px;
  font-family: var(--mrp-sans);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--mrp-blue-dark, #356b89);
  text-align: center;
  text-wrap: balance;
}

.mrp-course--type-scale
  .mrp-chart-title:has(+ .mrp-chart-subtitle) {
  margin-bottom: 6px;
}

/* an HTML key row under a centered title centers with it */

.mrp-course--type-scale .mrp-chart-keyrow {
  justify-content: center;
}

/* Table title: a table (skill columns, a contrast table)
   is titled in the voice of its own column headings,
   18px bold navy, and sits left on the table's outer
   edge like a caption over its rows; charts keep the
   centered regular title above. 12px to the panel. */

.mrp-course--type-scale .mrp-table-title,
.mrp-course--type-scale .mrp-type-table-title {
  margin: 0 0 12px;
  font-family: var(--mrp-sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--mrp-navy, #003049);
  text-align: left;
}

/* a data table's scroll box carries its own top margin; under a
   table title the title's 12px is the gap */

.mrp-course--type-scale .mrp-table-title + .mrp-table-scroll {
  margin-top: 0;
}

/* subtitles and captions share one setting: 14px sans
   on a 21px line, in charcoal */

.mrp-course--type-scale .mrp-chart-subtitle,
.mrp-course--type-scale .mrp-type-caption {
  font-family: var(--mrp-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--mrp-ink-3, #555860);
}

.mrp-course--type-scale .mrp-chart-subtitle {
  margin: 0 0 12px;
  text-align: center;
  text-wrap: balance;
}

/* Title air: 20px from a chart title (or its subtitle)
   to the plot, so the title sits up with the figure's
   top rather than resting on the drawing. Opt-in with
   mrp-course--title-air on <body>, beside the type
   scale; every class page but class 2 has it. The waves
   timeline's date line supplies about 6px of its own,
   so its title gives 14px. Class 2 also keeps regular
   chart titles (see below). */

.mrp-course--type-scale.mrp-course--title-air
  .mrp-chart-title:not(:has(+ .mrp-chart-subtitle)),
.mrp-course--type-scale.mrp-course--title-air
  .mrp-type-figure-title,
.mrp-course--type-scale.mrp-course--title-air
  .mrp-chart-subtitle {
  margin-bottom: 20px;
}

.mrp-course--type-scale.mrp-course--title-air
  .mrp-figure.mrp-figure--waves > .mrp-chart-title {
  margin-bottom: 14px;
}

/* on the same pages, chart titles are bold: still the
   darker blue and centered, but with the weight to read
   as the figure's name at a glance. Subtitles stay
   regular. */

.mrp-course--type-scale.mrp-course--title-air .mrp-chart-title,
.mrp-course--type-scale.mrp-course--title-air
  .mrp-type-figure-title {
  font-weight: 700;
}

/* and table titles are centered over their table, in
   their own bold navy, rather than set on its left
   edge: the title reads as the name of the whole
   panel, as it already did over a contrast matrix */

.mrp-course--type-scale.mrp-course--title-air .mrp-table-title,
.mrp-course--type-scale.mrp-course--title-air
  .mrp-type-table-title {
  text-align: center;
  text-wrap: balance;
}

.mrp-course--type-scale .mrp-figure figcaption {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* side-caption figures set their caption beside the
   plot, so they keep their own top margin */

.mrp-course--type-scale
  .mrp-figure:not(.mrp-figure--sidecap) > figcaption {
  margin-top: 12px;
}

/* a caption lead-in standing in as the figure's title
   takes the figure-title blue */

.mrp-course--type-scale .mrp-figure figcaption
  b.mrp-caption-title--blue {
  color: var(--mrp-blue-dark, #356b89);
}

/* 32px before an in-flow figure; floated portraits and
   insets keep their own margins */

.mrp-course--type-scale .mrp-main .mrp-figure:not(
  .mrp-figure--portrait,
  .mrp-figure--inset-right,
  .mrp-figure--inset-left) {
  margin-top: 32px;
}

/* a data table titled in the flow rather than inside a
   figure (class 6) is a figure all the same: 32px before
   its title */

.mrp-course--type-scale .mrp-main
  .mrp-table-title:not(.mrp-figure .mrp-table-title) {
  margin-top: 32px;
}

/* the waves timeline is a thin band that crowds the
   prose at 32px; it takes the same 52px above that it
   has below (see .mrp-figure--waves) */

.mrp-course--type-scale .mrp-main .mrp-figure.mrp-figure--waves {
  margin-top: 52px;
}

/* eyebrows and small labels: 14px, 13px on phones. A
   label is a class (.mrp-kicker), not an h5 or h6
   chosen for its size. */

.mrp-course--type-scale .mrp-eyebrow,
.mrp-course--type-scale .mrp-kicker {
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .mrp-course--type-scale .mrp-page-head h1,
  .mrp-course--type-scale .mrp-type-h1 {
    font-size: 2.25rem;
  }

  .mrp-course--type-scale .mrp-main .mrp-section-head h2,
  .mrp-course--type-scale .mrp-type-h2 {
    font-size: 1.75rem;
  }

  .mrp-course--type-scale .mrp-main
    section[data-mrp-region] > h3,
  .mrp-course--type-scale .mrp-type-h3 {
    font-size: 1.375rem;
  }

  .mrp-course--type-scale .mrp-eyebrow,
  .mrp-course--type-scale .mrp-kicker {
    font-size: 0.8125rem;
  }
}

/* Expanding circle of care (Class 6). A soft glow over the illustration
   reaches one figure further right at each stop. Every position
   and size is a percentage of the stage, so the glow scales with
   the image. JS only sets each blob's --x/--y/--w/--h/--o; the
   CSS transition does the movement. */

.mrp-coc {
  /* Glow and slider color: soft earthy coral, for hearts, warmth
     and felt emotion. Swap here to retune. */
  --mrp-coc-glow: 212, 102, 74;
  --mrp-coc-blur: 28px;
  /* where the first and last labels sit, as % of image width;
     the slider track spans between them */
  --mrp-coc-track-l: 8.9%;
  --mrp-coc-track-r: 9.6%;
}

.mrp-coc-stage {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #f7efe4;
}

.mrp-coc-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mrp-coc-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.mrp-coc-blob {
  position: absolute;
  left: calc(var(--x) - var(--w) / 2);
  top: calc(var(--y) - var(--h) / 2);
  width: var(--w);
  height: var(--h);
  opacity: var(--o);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(var(--mrp-coc-glow), 0.55) 0%,
    rgba(var(--mrp-coc-glow), 0.35) 50%,
    rgba(var(--mrp-coc-glow), 0) 100%);
  filter: blur(var(--mrp-coc-blur));
  transition: left 700ms ease, top 700ms ease, width 700ms ease,
    height 700ms ease, opacity 700ms ease;
  animation: mrp-coc-drift-a 31s ease-in-out infinite alternate;
}

/* The band is the one continuous glow: a flat-filled capsule from
   the left edge to the current reach, softened only by blur, so
   there are no gaps between figures. The heart blob sits on top
   as a gentle accent. */
.mrp-coc-blob.band {
  border-radius: 9999px;
  background: rgba(var(--mrp-coc-glow), 0.6);
  filter: blur(calc(var(--mrp-coc-blur) * 1.3));
  animation-name: mrp-coc-drift-band;
  animation-duration: 37s;
}

@keyframes mrp-coc-drift-band {
  0%   { border-radius: 48% 52% 50% 50% / 50% 46% 54% 50%; transform: translate(0, 0) scale(1); }
  50%  { border-radius: 52% 48% 46% 54% / 46% 54% 50% 52%; transform: translate(0.5%, -2%) scale(1.01); }
  100% { border-radius: 50% 50% 54% 46% / 54% 50% 46% 50%; transform: translate(-0.5%, 2%) scale(0.995); }
}

@keyframes mrp-coc-drift-a {
  0%   { border-radius: 50% 46% 54% 50% / 52% 50% 48% 50%; transform: translate(0, 0) scale(1); }
  50%  { border-radius: 44% 56% 48% 52% / 46% 54% 50% 48%; transform: translate(2%, -2%) scale(1.03); }
  100% { border-radius: 54% 48% 50% 46% / 50% 46% 54% 52%; transform: translate(-2%, 1.5%) scale(0.98); }
}



/* Clickable areas over the labels already drawn in the image */
.mrp-coc-hit {
  position: absolute;
  top: 78%;
  height: 11%;
  width: 13%;
  transform: translateX(-50%);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.mrp-coc-hit:focus-visible {
  outline: 2px solid rgba(var(--mrp-coc-glow), 0.9);
  outline-offset: -2px;
}

/* Slider. The track spans from the first label's center to the
   last label's, so each tick sits under its figure. */
.mrp-coc-slider {
  position: relative;
  margin: 14px var(--mrp-coc-track-r) 0 var(--mrp-coc-track-l);
  height: 28px;
}

.mrp-coc-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mrp-coc-tick {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #cfc6b8;
  transition: background 300ms ease, transform 300ms ease;
}

.mrp-coc-tick.is-on {
  background: rgb(var(--mrp-coc-glow));
}

.mrp-coc-tick.is-current {
  transform: scale(1.35);
}

.mrp-coc-range {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  width: calc(100% + 22px);
  margin: 0 -11px;
  height: 28px;
  background: transparent;
  cursor: pointer;
}

.mrp-coc-range:focus {
  outline: none;
}

.mrp-coc-range::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right,
    rgb(var(--mrp-coc-glow)) var(--fill, 0%), #ddd5c8 var(--fill, 0%));
}

.mrp-coc-range::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: #ddd5c8;
}

.mrp-coc-range::-moz-range-progress {
  height: 2px;
  border-radius: 1px;
  background: rgb(var(--mrp-coc-glow));
}

.mrp-coc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -10px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgb(var(--mrp-coc-glow));
  box-shadow: 0 1px 4px rgba(60, 40, 10, 0.3);
}

.mrp-coc-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgb(var(--mrp-coc-glow));
  box-shadow: 0 1px 4px rgba(60, 40, 10, 0.3);
}

.mrp-coc-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(var(--mrp-coc-glow), 0.45);
}

.mrp-coc-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(var(--mrp-coc-glow), 0.45);
}

.mrp-coc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .mrp-coc-blob {
    animation: none;
    transition-duration: 1ms;
  }
}

/* Orbits version (data-mrp-coc-orbits): nested rings over the
   same illustration, and a disc that widens through them. Rings
   not yet reached are faint pencil dots; reached rings turn coral. */
.mrp-coc-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.mrp-coc-ring {
  fill: none;
  stroke: rgba(70, 60, 50, 0.32);
  stroke-width: 1.1px;
  stroke-dasharray: 1.5 4;
  stroke-linecap: round;
  transition: stroke 400ms ease;
}

.mrp-coc-ring.is-on {
  stroke: rgba(var(--mrp-coc-glow), 0.6);
}

.mrp-coc-disc {
  fill: rgba(var(--mrp-coc-glow), 0.26);
  filter: blur(6px);
}

.mrp-coc-front {
  fill: none;
  stroke: rgb(var(--mrp-coc-glow));
  stroke-width: 2.2px;
}

/* Glow + moving front version (data-mrp-coc-orbits="front"): the
   front is a coral dashed line riding the edge of the glow */
.mrp-coc-front.is-dashed {
  stroke: rgba(var(--mrp-coc-glow), 0.85);
  stroke-width: 1.8px;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
}

/* Smooth version (data-mrp-coc-smooth): while the thumb is dragged
   the glow tracks it directly, with no transition to lag behind; on
   release it settles on the stop as usual. */
.mrp-coc.is-sliding .mrp-coc-blob {
  transition: none;
}

/* 3D version (data-mrp-coc-3d): on the last stop the rings swell out
   from the heart until they fill the frame, the picture and its glow
   fade, and the canvas scene fades in on the same paper. */
.mrp-coc-stage img,
.mrp-coc-stage .mrp-coc-glow,
.mrp-coc-stage .mrp-coc-orbits {
  transition: opacity 900ms ease, transform 1400ms cubic-bezier(0.3, 0, 0.2, 1);
}

.mrp-coc-stage .mrp-coc-orbits {
  transform-origin: 7% 59%;
}

.mrp-coc-stage.is-3d img,
.mrp-coc-stage.is-3d .mrp-coc-glow {
  opacity: 0;
}

.mrp-coc-stage.is-3d .mrp-coc-orbits {
  opacity: 0;
  transform: scale(3.2);
  transition-delay: 0ms, 0ms;
}

.mrp-coc-stage.is-3d .mrp-coc-hits {
  visibility: hidden;
}

.mrp-coc-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  touch-action: pan-y;
  transition: opacity 900ms ease;
}

.mrp-coc-stage.is-3d .mrp-coc-3d {
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  transition-delay: 450ms;
}

.mrp-coc-3d.is-dragging {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  .mrp-coc-stage img,
  .mrp-coc-stage .mrp-coc-glow,
  .mrp-coc-stage .mrp-coc-orbits,
  .mrp-coc-3d {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }
}

.mrp-coc-stop {
  min-height: 3em;
  margin: 10px 0 0;
  font-family: var(--mrp-sans);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--mrp-ink-2, #3a3d42);
  text-align: center;
}

.mrp-coc-stop b {
  color: rgb(var(--mrp-coc-glow));
}

/* Body maps (Class 2, fig-nummenmaa-bodily-maps) — the Nummenmaa
   silhouettes recolored into the class ramp, with the emotion names
   set in the course sans over a seven-column grid that matches the
   evenly spaced figures in each row image */

.mrp-bodymap-labels,
.mrp-course .mrp-bodymap-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}

.mrp-bodymap-labels li,
.mrp-course .mrp-bodymap-labels li {
  margin: 0;
  padding: 0;
  font-family: var(--mrp-sans);
  font-size: clamp(8.5px, 1.8vw, 12px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--mrp-ink-2, #3a3d42);
}

.mrp-figure--framed .mrp-bodymap img,
.mrp-bodymap img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.mrp-bodymap-key {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--mrp-sans);
  font-size: 11px;
  color: var(--mrp-muted, #6b6e76);
}

/* same stops as the recolor, so the key reads the figures directly */
.mrp-bodymap-ramp {
  width: min(220px, 45%);
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    #00243a 0%, #356b89 16.7%, #669bbc 30%, #b7d0e1 41.7%,
    #ddd6ca 50%,
    #ecd29a 58.3%, #d8a256 70%, #b8623f 83.3%, #6a2618 100%);
}

/* Duchenne smiles (Class 2, fig-duchenne-smile) — the pair split into
   two portraits, each labelled above, so the eyes can be compared
   side by side. A little wider than a single portrait so each face
   stays legible. */

.mrp-figure--portrait.mrp-figure--smiles {
  width: min(52%, 340px);
}

.mrp-smile-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mrp-smile img {
  display: block;
  width: 100%;
  height: auto;
}

.mrp-smile-label,
.mrp-course .mrp-smile-label {
  margin: 0 0 6px;
  font-family: var(--mrp-sans);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--mrp-muted, #6b6e76);
}

.mrp-smile-label--true,
.mrp-course .mrp-smile-label--true {
  color: var(--mrp-gold-dark, #a8893b);
}

/* ==========================================================
   Tease apart (.mrp-tease, Class 2 near enemies)
   A play button and a scrub slider carry the near-enemy blend
   apart: the two travel the trunk together, then at the fork
   relaxation rises and clarity grows in it, while dullness drops
   away, its outline loosening into dashes as it fades. A dimmed
   copy of that end state (.mrp-tease-ghost, made by the script)
   waits at the branch ends from the start and fades as the parts
   arrive. Without script the controls are hidden and the static
   figure stands.
   ========================================================== */

.mrp-tease-ui {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  max-width: 28rem;
  margin: 16px auto 0;
}

.mrp-tease.is-ready .mrp-tease-ui {
  display: grid;
}

.mrp-tease-play {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--mrp-line, #e4e2dd);
  border-radius: 50%;
  background: var(--mrp-paper, #fafaf8);
  color: var(--mrp-navy, #003049);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mrp-tease-play:hover {
  border-color: var(--mrp-ok, #3e6b4f);
  background: color-mix(in srgb, var(--mrp-ok, #3e6b4f) 10%, var(--mrp-paper, #fafaf8));
}

.mrp-tease-play:focus-visible {
  outline: 2px solid var(--mrp-navy, #003049);
  outline-offset: 2px;
}

.mrp-tease-play svg {
  display: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mrp-tease-icon-play path {
  fill: currentColor;
}

.mrp-tease-play[data-state="play"] .mrp-tease-icon-play,
.mrp-tease-play[data-state="pause"] .mrp-tease-icon-pause,
.mrp-tease-play[data-state="replay"] .mrp-tease-icon-replay {
  display: block;
}

/* the track fills green up to the thumb */

.mrp-tease-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  --fill: 0%;
}

.mrp-tease-range:focus {
  outline: none;
}

.mrp-tease-range::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg,
    var(--mrp-ok, #3e6b4f) var(--fill),
    color-mix(in srgb, var(--mrp-ok, #3e6b4f) 25%, transparent) var(--fill));
}

.mrp-tease-range::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg,
    var(--mrp-ok, #3e6b4f) var(--fill),
    color-mix(in srgb, var(--mrp-ok, #3e6b4f) 25%, transparent) var(--fill));
}

.mrp-tease-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--mrp-ok, #3e6b4f);
  box-shadow: 0 1px 4px rgba(0, 30, 50, 0.3);
}

.mrp-tease-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--mrp-ok, #3e6b4f);
  box-shadow: 0 1px 4px rgba(0, 30, 50, 0.3);
}

.mrp-tease-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mrp-ok, #3e6b4f) 45%, transparent);
}

.mrp-tease-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mrp-ok, #3e6b4f) 45%, transparent);
}

/* once live, the blend left behind is only a faint dashed trace */

.mrp-tease.is-ready .mrp-tease-origin {
  opacity: 0.22;
}

.mrp-tease.is-ready .mrp-tease-origin circle {
  stroke-dasharray: 3 5;
}

.mrp-tease.is-ready .mrp-tease-origin text {
  display: none;
}

.mrp-tease [data-tease-label] {
  transition: opacity 0.3s ease;
}