/* ══════════════════════════════════════════
   SHARED STYLES — Learn More Pages
   ══════════════════════════════════════════ */

/* ── Design Tokens ──
   Source of truth: Figma "Remedy Foundation" library
   (nodes 669-60240, 669-60301, 669-60341 for light; 669-61050, 669-61112, 669-61152 for dark).
   See .claude/guidelines/learn-more-design-system.md for bundle pairing rules and component mapping.
*/
:root {
  /* ── Surfaces (dark mode) ── */
  --background-primary: #0F0F0F;
  --background-secondary: #2D2B28;
  --background-secondary-pressed: #45413E;
  --background-tertiary: #53504C;

  /* ── Text (dark mode) ── */
  --text-primary: #FFFFFF;
  --text-secondary: #DDD9D5;
  --text-placeholder: #A49F9B;

  /* ── Per-state status accents (dark mode) ── */
  --status-good: #6DAF6D;
  --status-info: #7F9BFF;
  --status-moderate: #FED557;
  --status-high: #FFB14C;
  --status-bad: #FF756F;
  --status-crisis: #FB4F4E;
  --status-balanced: #7F9C35;
  --status-undefined: #45413E;
  --dataviz-diverging-9: #987ED4;

  /* ── Action / interaction (dark mode) ── */
  --action-secondary: #263369;
  --action-secondary-hover: #2F3E7D;
  --action-secondary-press: #394B96;

  /* ── Divider (dark mode) ── */
  --divider: #45413E;
  /* Icon color that pairs with each status surface */
  --status-good-icon: #0F0F0F;
  --status-info-icon: #0F0F0F;
  --status-moderate-icon: #0F0F0F;
  --status-bad-icon: #0F0F0F;
  --status-undefined-icon: #FFFFFF;

  /* ── Per-state solid background fills (dark mode) — for status cards, burger active zones ── */
  --bg-good: #173E18;
  --bg-info: #263369;
  --bg-moderate: #433506;
  --bg-high: #4B2D02;
  --bg-bad: #6E0F14;
  --bg-balanced: #303C12;

  /* ── Per-state primary text (dark mode) — ON bg-<state> ── */
  --text-good: #E6F3E6;
  --text-info: #E7EEFF;
  --text-moderate: #FFEDBB;
  --text-high: #FFEBCE;       /* derived from light-mode bg-high, cross-swap rule */
  --text-bad: #FFEAE6;
  --text-balanced: #F8FEE8;   /* derived from light-mode bg-balanced, cross-swap rule */

  /* ── Per-state secondary text (dark mode) — muted variant on bg-<state> ── */
  --text-good-muted: #C4E2C2;
  --text-info-muted: #CBD9FF;
  --text-moderate-muted: #FED557;
  --text-high-muted: #FFD194;   /* derived, mirrors bad's primary→secondary drop */
  --text-bad-muted: #FFCFC8;
  --text-balanced-muted: #DBE9B8;  /* derived */

  /* ── Per-state low-opacity tints (matrix cells and similar) ── */
  --tint-good: rgba(109,175,109,0.18);
  --tint-info: rgba(127,155,255,0.15);
  --tint-moderate: rgba(254,213,87,0.15);
  --tint-high: rgba(255,177,76,0.15);
  --tint-bad: rgba(255,117,111,0.15);

  /* ── Per-state borders (derived from status-<state> at opacity) ── */
  --border-good: rgba(109,175,109,0.28);
  --border-info: rgba(127,155,255,0.25);
  --border-moderate: rgba(254,213,87,0.28);
  --border-high: rgba(255,177,76,0.28);
  --border-bad: rgba(255,117,111,0.25);

  /* ── Domain accents (not state; used on cardio/neuro feature pages) ── */
  --color-purple: #8372C2;

  /* ── Heart / cardio feature identity (dark mode) ── */
  --heart-icon: #FFACA3;
  --heart-text: #FFEAE6;
  --heart-text-muted: #FFEAE6;
  --heart-bg: #AE1E47;
  --heart-bg-hero: #69122A;
  --heart-bg-tint: #F3B9CA26;  /* pastel 15% overlay — hero-icon background */

  /* ── Backwards-compat aliases (kept for Burger/Gauge until Phase 3) ── */
  --bg-card-inner: rgba(255,255,255,0.04);
  --color-green: var(--status-good);
  --color-blue: var(--status-info);
  --color-orange: var(--status-high);
  --color-red: var(--status-bad);
  --background-good: var(--bg-good);
  --background-info: var(--bg-info);
  --background-moderate: var(--bg-moderate);
  --background-high: var(--bg-high);
  --background-bad: var(--bg-bad);

  /* Gauge widget aliases (all point at unified bundle) */
  --gauge-box-bg: var(--background-secondary);
  --gauge-bar-bg: var(--background-tertiary);
  --gauge-title: var(--text-secondary);
  --gauge-label: var(--text-secondary);
  --gauge-dot-bg: var(--gauge-box-bg);
  --gauge-shadow: 0 10px 24px rgba(0,0,0,0.35);
  --gauge-accent-good: var(--status-good);
  --gauge-accent-info: var(--status-info);
  --gauge-accent-moderate: var(--status-moderate);
  --gauge-accent-high: var(--status-high);
  --gauge-accent-bad: var(--status-bad);

  /* Spacing & radius */
  --radius-card: 16px;
  --radius-icon: 16px;
  --spacing-card: 16px;
  --spacing-section: 16px;
}

/* ── Fonts ── */
@font-face {
  font-family: 'Aeonik';
  src: url('https://static.withings.com/content/fonts/Aeonik/aeonik-regular-webfont.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('https://static.withings.com/content/fonts/Aeonik/aeonik-medium-webfont.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Aeonik';
  src: url('https://static.withings.com/content/fonts/Aeonik/aeonik-bold-webfont.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--background-primary);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  font-family: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.phone {
  width: 100%;
  max-width: 600px;
  background: var(--background-primary);
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding-bottom: 80px;
}
.phone::-webkit-scrollbar { display: none; }

/* ── Section styling ── */
.section { padding: 0 var(--spacing-section); margin-bottom: var(--spacing-section); }

/* ── Card base ── */
.card {
  background: var(--background-secondary);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: var(--spacing-card);
  color: var(--text-secondary);
}
/* Status-row card: padding from the card, vertical handled by rows.
   Horizontal space also gives the active row's -10px outset room to breathe.
   Radius reduced to 12px so the active highlight can use a matching radius
   — avoiding the double-rounding effect of two close-but-different curves. */
.card:has(.status-row),
.card.card-status {
  padding: 6px 20px;
  border-radius: 12px;
}
.card:has(.status-row) > h3:first-child,
.card:has(.status-row) > p:first-child,
.card.card-status > h3:first-child,
.card.card-status > p:first-child { padding-top: var(--spacing-card); }
.card:has(.status-row) > p:last-of-type,
.card.card-status > p:last-of-type { padding-bottom: 4px; }
.card h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.card h3 { font-size: 16px; font-weight: 600; margin: 16px 0 6px; color: var(--text-primary); }
.card p { font-size: 15px; line-height: 1.5; margin-bottom: 8px; color: var(--text-secondary); }
.card p:last-child { margin-bottom: 0; }
.card a, .expand-text a { color: var(--status-info); text-decoration: underline; text-underline-offset: 2px; }
.card img { display: block; margin: 12px auto; max-width: 100%; height: auto; }
.card-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.card-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.card-list li:last-child { border-bottom: none; }
ol.card-list { counter-reset: list-counter; }
ol.card-list li { counter-increment: list-counter; }
ol.card-list li::before {
  content: counter(list-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-card-inner);
  color: var(--text-placeholder);
  font-size: 12px;
  font-weight: 600;
  margin-right: 10px;
  flex-shrink: 0;
  vertical-align: top;
}

/* ── Hero ── */
.hero {
  background: var(--background-primary);
  padding: var(--spacing-card) var(--spacing-card) 24px;
  text-align: center;
}
.hero-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.hero-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.hero-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 340px;
  margin: 0 auto;
}

/* ── Section eyebrow & header ── */
.section-eyebrow {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 var(--spacing-section);
  margin-bottom: 8px;
}
.section-header {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  padding: 0 var(--spacing-section);
  margin-bottom: 12px;
}

/* ── Status rows ── */
.status-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--divider);
  transition: background 0.2s;
}
.status-row:first-child { border-top: none; }
.status-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}
.status-content { flex: 1; }
.status-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.status-explanation {
  font-size: 13px;
  color: var(--text-placeholder);
  line-height: 1.5;
}
.status-explanation strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── Status row active (legend highlight) ── */
/* Mirrors .contrib-status-item.status-active recipe: rounded box + -10px
   horizontal outset into the card's padding, so the highlight reads as
   "lifted from the list" instead of "cell flush to card wall". */
.status-row.status-row-active {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 10px;
  margin: 2px -10px;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 2;
  box-shadow: 0 3px 14px rgba(0,0,0,0.18);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.status-row.status-row-active + .status-row {
  border-top-color: transparent;
}
/* Specificity fix — same pattern as contrib-status-item.status-active:first-child:
   `.status-row:first-child { border-top: none }` ties on specificity and wins
   on source order, which otherwise strips the highlight's top edge. */
.status-row.status-row-active:first-child {
  border-top: 1px solid rgba(255,255,255,0.1);
}
.status-row.status-row-active .status-dot {
  box-shadow: 0 0 8px currentColor;
}

/* ── Contributor row active highlight ── */
/* Visual lift is purely compositional (background + border + shadow + -10px
   horizontal outset) — no transform. A scale() here would overshoot the row's
   layout box by ~1.5px and collide with the card's rounded-corner clip when
   the active row is a first/last child of the list. */
.contrib-status-item.status-active {
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 10px 10px;
  margin: 2px -10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-top-color: rgba(255,255,255,0.1);
  position: relative;
  z-index: 2;
  box-shadow: 0 3px 14px rgba(0,0,0,0.18);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.contrib-status-item.status-active + .contrib-status-item {
  border-top-color: transparent;
}
/* Restore the top border on an active first-child. `.contrib-status-item:first-child
   { border-top: none }` ties on specificity with `.contrib-status-item.status-active`
   and wins on source order, which otherwise leaves the highlighted rounded rectangle
   missing its top edge. */
.contrib-status-item.status-active:first-child {
  border-top: 1px solid rgba(255,255,255,0.1);
}
.contrib-status-item.status-active .contrib-status-dot {
  width: 10px; height: 10px;
  box-shadow: 0 0 8px currentColor;
}
.contrib-status-item.status-active .contrib-status-text {
  color: rgba(255,255,255,0.7);
}
.contrib-status-item.status-active .contrib-status-text strong {
  color: white;
}

/* ── Contributor card ── */
.contrib-card {
  margin-bottom: 12px;
}
.contrib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--spacing-card) 10px;
}
.contrib-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.contrib-oneliner {
  font-size: 13px;
  color: var(--text-placeholder);
  padding: 0 var(--spacing-card) 12px;
  line-height: 1.45;
}

/* ── Status pills ── */
.pills-row {
  display: flex;
  gap: 6px;
  padding: 0 var(--spacing-card) 14px;
  flex-wrap: wrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.pill-green, .semantic-good.pill, .semantic-optimal.pill { background: var(--tint-good); color: var(--status-good); }
.pill-blue, .semantic-info.pill, .semantic-normal.pill { background: var(--tint-info); color: var(--status-info); }
.pill-orange, .semantic-high.pill, .semantic-elevated.pill { background: var(--tint-high); color: var(--status-high); }
.pill-red, .semantic-bad.pill, .semantic-attention.pill { background: var(--tint-bad); color: var(--status-bad); }
.pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Contributor status list ── */
.contrib-status-list {
  padding: 0 var(--spacing-card) 4px;
}
.contrib-status-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.contrib-status-item:first-child { border-top: none; }
.contrib-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.contrib-status-text {
  font-size: 12px;
  color: var(--text-placeholder);
  line-height: 1.5;
}
.contrib-status-text strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── Expandable blurb ── */
.expand-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--spacing-card) 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--status-info);
  -webkit-tap-highlight-color: transparent;
}
.expand-toggle svg {
  transition: transform 0.3s;
}
.expand-toggle.open svg {
  transform: rotate(180deg);
}
.expand-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 var(--spacing-card);
}
.expand-content.open {
  max-height: 6000px;
  padding: 0 var(--spacing-card) var(--spacing-card);
}
.expand-content > .card + .card { margin-top: 12px; }
.expand-text {
  font-size: 13px;
  color: var(--text-placeholder);
  line-height: 1.6;
}
.expand-text strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── Educational footer ── */
.edu-body {
  font-size: 13px;
  color: var(--text-placeholder);
  line-height: 1.6;
  margin-bottom: 12px;
}
.edu-body strong {
  color: var(--text-secondary);
  font-weight: 600;
}
.edu-divider {
  height: 1px;
  background: var(--divider);
  margin-bottom: 12px;
}
.edu-disclaimer {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}
.edu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px var(--spacing-card);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.edu-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.edu-toggle svg {
  transition: transform 0.3s;
  opacity: 0.4;
  transform: rotate(-90deg);
}
.edu-toggle.open svg {
  transform: rotate(0deg);
}
.edu-collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.edu-collapsible.open {
  max-height: 400px;
}
.edu-collapsible-inner {
  padding: 0 var(--spacing-card) var(--spacing-card);
}

/* ── Link cells (navigation lists) ── */
.link-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--spacing-card);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid var(--divider);
  transition: background 0.15s;
}
.link-cell:active { background: rgba(255,255,255,0.06); }
.chevron-right {
  width: 7px; height: 12px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(-45deg);
  flex-shrink: 0;
  margin-left: 12px;
}

/* ── BP classification table ── */
.bp-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.bp-table th, .bp-table td { padding: 10px 8px; text-align: left; word-wrap: break-word; overflow-wrap: break-word; border-bottom: 1px solid var(--divider); }
.bp-table th { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-placeholder); }
.bp-table td { color: var(--text-secondary); }
.bp-table .color-cell { position: relative; border-bottom: none; background: none !important; min-width: 14px; }
.bp-table .color-cell::after { content: ''; position: absolute; top: 3px; bottom: 3px; left: 0; right: 0; border-radius: 8px; }
.color-cell.color-cell--good::after      { background: var(--status-good); }
.color-cell.color-cell--moderate::after  { background: var(--status-moderate); }
.color-cell.color-cell--high::after      { background: var(--status-high); }
.color-cell.color-cell--bad::after       { background: var(--status-bad); }
.color-cell.color-cell--crisis::after    { background: var(--status-crisis); }
.color-cell.color-cell--dataviz-9::after { background: var(--dataviz-diverging-9); }

/* ── BP display (understanding values) ── */
.bp-display { text-align: center; padding: var(--spacing-card) 0; }
.bp-label { font-size: 14px; font-weight: 500; letter-spacing: 1px; color: var(--text-placeholder); text-transform: uppercase; }
.bp-value { font-size: 64px; font-weight: 300; line-height: 1.2; color: var(--text-secondary); }
.bp-unit { font-size: 24px; font-weight: 400; margin-inline-start: 8px; color: var(--text-placeholder); }

/* ── Hero image ── */
.hero-image { width: 100%; border-radius: var(--radius-card); display: block; }

/* ── Region toggle (EU/US) ── */
.region-us { display: none; }
.region-ch { display: none; }

/* ── Platform toggle (iOS/Android) ── */
.platform-android { display: none; }

/* ── CTA button ── */
.cta-button {
  display: block; width: 100%; padding: 14px;
  border: none; border-radius: 12px;
  background: var(--action-secondary);
  color: var(--text-info);
  font-size: 15px; font-weight: 600;
  text-align: center; text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.cta-button:hover  { background: var(--action-secondary-hover); }
.cta-button:active { background: var(--action-secondary-press); }

/* ── SVG icon (sprite) ── */
.icon { display: inline-block; vertical-align: middle; fill: currentColor; flex-shrink: 0; }

/* ══════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ══════════════════════════════════════════ */

/* Scroll entrance — add .fade-up to any element */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}

/* Staggered entrance — wrap .fade-up children in a .stagger container */
.stagger > .fade-up:nth-child(1) { transition-delay: 0s; }
.stagger > .fade-up:nth-child(2) { transition-delay: 0.08s; }
.stagger > .fade-up:nth-child(3) { transition-delay: 0.16s; }
.stagger > .fade-up:nth-child(4) { transition-delay: 0.16s; }
.stagger > .fade-up:nth-child(5) { transition-delay: 0.24s; }
.stagger > .fade-up:nth-child(6) { transition-delay: 0.32s; }

/* ══════════════════════════════════════════
   MICRO-VISUALIZATION COMPONENTS
   ══════════════════════════════════════════ */

/* ── Range Bar ── */
.range-bar {
  position: relative;
  height: 32px;
  background: var(--bg-card-inner);
  border-radius: 10px;
  overflow: hidden;
}
.range-bar-zone {
  position: absolute;
  height: 100%;
  background: rgba(109,175,109,0.1);
  border-left: 1px dashed rgba(109,175,109,0.3);
  border-right: 1px dashed rgba(109,175,109,0.3);
}
.range-bar-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-secondary);
  box-shadow: 0 0 8px rgba(221,217,213,0.5);
  transition: left 0.8s ease-out;
}
.range-bar-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 10px;
  border-radius: 5px;
  transition: width 0.8s ease-out;
}
.range-bar-labels {
  display: flex;
  justify-content: space-between;
  padding: 6px 0 0;
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.range-bar-zone-label {
  font-size: 9px;
  color: var(--color-green);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
}

/* ── Pulse Track ── */
.pulse-track {
  padding: var(--spacing-card);
}
.pulse-track-bar {
  position: relative;
  height: 56px;
  margin-bottom: 6px;
}
.pulse-track-tube {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 20px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(221,217,213,0.12) 0%, rgba(221,217,213,0.06) 100%);
  border-radius: 10px;
  border: 1px solid rgba(221,217,213,0.1);
  overflow: hidden;
}
.pulse-track-inner {
  position: absolute;
  inset: 2px;
  border-radius: 8px;
  background: rgba(15,15,15,0.6);
  overflow: hidden;
}
.pulse-track-zone {
  position: absolute;
  height: 100%;
  background: rgba(109,175,109,0.08);
  border-left: 1px dashed rgba(109,175,109,0.25);
  border-right: 1px dashed rgba(109,175,109,0.25);
}
.pulse-track-dot {
  position: absolute;
  width: 14px; height: 14px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--text-secondary) 30%, rgba(221,217,213,0.3) 100%);
  box-shadow: 0 0 12px rgba(221,217,213,0.5), 0 0 4px rgba(221,217,213,0.8);
  animation: pulseTravel 3s ease-in-out infinite;
}
@keyframes pulseTravel {
  0%   { left: -14px; opacity: 0; }
  5%   { opacity: 1; }
  80%  { left: calc(100% - 0px); opacity: 1; }
  90%  { left: calc(100% - 0px); opacity: 0; }
  100% { left: calc(100% - 0px); opacity: 0; }
}
.pulse-track-ripple {
  position: absolute;
  width: 14px; height: 14px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid rgba(221,217,213,0.2);
  animation: pulseTravel 3s ease-in-out infinite, pulseRipple 3s ease-in-out infinite;
}
@keyframes pulseRipple {
  0%   { width: 14px; height: 14px; opacity: 0; }
  5%   { opacity: 0.4; }
  50%  { width: 28px; height: 28px; opacity: 0.1; margin-left: -7px; margin-top: -7px; }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}
.pulse-track-wall-top, .pulse-track-wall-bottom {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
}
.pulse-track-wall-top {
  top: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(221,217,213,0.08) 20%, rgba(221,217,213,0.12) 50%, rgba(221,217,213,0.08) 80%, transparent 100%);
}
.pulse-track-wall-bottom {
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(221,217,213,0.08) 20%, rgba(221,217,213,0.12) 50%, rgba(221,217,213,0.08) 80%, transparent 100%);
}
.pulse-track-labels {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2px 0 0;
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Metric Highlight ── */
.metric-highlight { text-align: center; padding: var(--spacing-card) 0; }
.metric-highlight-label { font-size: 14px; font-weight: 500; letter-spacing: 1px; color: var(--text-placeholder); text-transform: uppercase; }
.metric-highlight-value { font-size: 48px; font-weight: 300; line-height: 1.2; color: var(--text-secondary); }
.metric-highlight-unit { font-size: 20px; font-weight: 400; margin-inline-start: 6px; color: var(--text-placeholder); }

/* ── Zone Legend ── */
.zone-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 4px;
  flex-wrap: wrap;
}
.zone-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: var(--text-secondary);
}
.zone-legend-dot {
  width: 8px; height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   SEMANTIC COLOR SCALE
   ══════════════════════════════════════════ */

/* Semantic dot/legend/contrib colors. Single canonical vocabulary, Figma-aligned. */
.semantic-good > .status-dot,
.semantic-good > .zone-legend-dot,
.semantic-good > .contrib-status-dot { background: var(--status-good); box-shadow: 0 0 6px rgba(109,175,109,0.4); }
.semantic-info > .status-dot,
.semantic-info > .zone-legend-dot,
.semantic-info > .contrib-status-dot { background: var(--status-info); box-shadow: 0 0 6px rgba(127,155,255,0.4); }
.semantic-moderate > .status-dot,
.semantic-moderate > .zone-legend-dot,
.semantic-moderate > .contrib-status-dot { background: var(--status-moderate); box-shadow: 0 0 6px rgba(254,213,87,0.4); }
.semantic-high > .status-dot,
.semantic-high > .zone-legend-dot,
.semantic-high > .contrib-status-dot { background: var(--status-high); box-shadow: 0 0 6px rgba(255,177,76,0.4); }
.semantic-bad > .status-dot,
.semantic-bad > .zone-legend-dot,
.semantic-bad > .contrib-status-dot { background: var(--status-bad); box-shadow: 0 0 6px rgba(255,117,111,0.4); }
.semantic-crisis > .status-dot,
.semantic-crisis > .zone-legend-dot,
.semantic-crisis > .contrib-status-dot { background: var(--status-crisis); box-shadow: 0 0 6px rgba(251,79,78,0.4); }
.semantic-balanced > .status-dot,
.semantic-balanced > .zone-legend-dot,
.semantic-balanced > .contrib-status-dot { background: var(--status-balanced); box-shadow: 0 0 6px rgba(127,156,53,0.4); }
.semantic-undefined > .status-dot,
.semantic-undefined > .zone-legend-dot,
.semantic-undefined > .contrib-status-dot { background: var(--status-undefined); box-shadow: none; }
.semantic-neutral > .status-dot,
.semantic-neutral > .zone-legend-dot,
.semantic-neutral > .contrib-status-dot { background: var(--text-placeholder); box-shadow: none; }
.semantic-cardio > .status-dot,
.semantic-cardio > .zone-legend-dot,
.semantic-cardio > .contrib-status-dot { background: var(--heart-icon); box-shadow: 0 0 6px rgba(243,185,202,0.4); }
.semantic-neuro > .status-dot,
.semantic-neuro > .zone-legend-dot,
.semantic-neuro > .contrib-status-dot { background: var(--dataviz-diverging-9); box-shadow: 0 0 6px rgba(152,126,212,0.4); }

/* Semantic .status-label tinting — pairs the label text color with its dot
   so the row reads as a single state signal. .status-explanation stays default. */
.semantic-good      .status-label { color: var(--status-good); }
.semantic-info      .status-label { color: var(--status-info); }
.semantic-moderate  .status-label { color: var(--status-moderate); }
.semantic-high      .status-label { color: var(--status-high); }
.semantic-bad       .status-label { color: var(--status-bad); }
.semantic-crisis    .status-label { color: var(--status-crisis); }
.semantic-balanced  .status-label { color: var(--status-balanced); }
.semantic-undefined .status-label { color: var(--status-undefined); }
.semantic-neutral   .status-label { color: var(--text-placeholder); }
.semantic-cardio    .status-label { color: var(--heart-icon); }
.semantic-neuro     .status-label { color: var(--dataviz-diverging-9); }

/* Semantic range-bar fills */
.range-bar-fill.semantic-good { background: var(--status-good); }
.range-bar-fill.semantic-info { background: var(--status-info); }
.range-bar-fill.semantic-moderate { background: var(--status-moderate); }
.range-bar-fill.semantic-high { background: var(--status-high); }
.range-bar-fill.semantic-bad { background: var(--status-bad); }
.range-bar-fill.semantic-crisis { background: var(--status-crisis); }
.range-bar-fill.semantic-balanced { background: var(--status-balanced); }
.range-bar-fill.semantic-undefined { background: var(--status-undefined); }
.range-bar-fill.semantic-cardio { background: linear-gradient(90deg, var(--heart-icon), var(--heart-bg-hero)); }
.range-bar-fill.semantic-neuro { background: var(--dataviz-diverging-9); }

/* ══════════════════════════════════════════
   BURGER WIDGET (stacked-zone mini widget)
   ══════════════════════════════════════════
   Declarative component: author writes only the head markup +
   data-burger-* attributes on the root. Zones, dot, and the
   optional info button are generated by shared/js/burger-widget.js.
   See: .claude/guidelines/learn-more-design-system.md#burger-widget */
.burger-widget {
  --burger-widget-bg: var(--background-secondary);
  --burger-widget-border: transparent;
  --burger-widget-tile-bg: var(--background-secondary-pressed);
  --burger-widget-tile-icon: var(--text-secondary);
  --burger-widget-zone-bg: var(--background-secondary-pressed);
  --burger-widget-info-bg: #B3AFAB;
  --burger-widget-label: var(--text-secondary);
  --burger-widget-text: var(--text-primary);
  --burger-widget-dot-bg: var(--burger-widget-bg);
  --burger-widget-shadow: 0 10px 24px rgba(0,0,0,0.35);
  --burger-widget-accent: var(--status-good);
  --burger-widget-active-bg: var(--bg-good);

  background: var(--burger-widget-bg);
  border: 1px solid var(--burger-widget-border);
  border-radius: 24px;
  padding: 16px;
  width: 200px;
  margin: 0 auto 24px;
  box-shadow: var(--burger-widget-shadow);
  color: var(--burger-widget-text);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.burger-widget-head { display: flex; align-items: center; gap: 10px; position: relative; }
.burger-widget-tile {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--burger-widget-tile-bg);
  color: var(--burger-widget-tile-icon);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.burger-widget-tile svg { display: block; }
.burger-widget-labels { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.burger-widget-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--burger-widget-label);
  text-transform: uppercase; line-height: 1.2;
}
.burger-widget-status {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; line-height: 1.2;
  color: var(--burger-widget-accent);
}
.burger-widget-info {
  position: absolute; top: 0; right: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--burger-widget-info-bg);
  color: #FFFFFF;
  font-size: 11px; font-weight: 700; font-style: italic;
  font-family: Georgia, serif;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  text-decoration: none;
}
.burger-widget-info:focus-visible { outline: 2px solid var(--burger-widget-text); outline-offset: 2px; }
.burger-widget-info[hidden] { display: none; }
.burger-widget-zones { display: flex; flex-direction: column; gap: 3px; position: relative; }
.burger-widget-zone {
  height: 8px; border-radius: 4px;
  background: var(--burger-widget-zone-bg);
  transform: scaleY(0); transform-origin: center;
  animation: burger-widget-zone-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  /* Height + background-color transitions let the active zone smoothly
     grow/shrink when the prev → current stepper (burger-widget.js) moves
     the active state between zones. The initial entrance is handled by the
     keyframe above; these transitions only kick in on subsequent changes. */
  transition: height 0.4s cubic-bezier(.3,.9,.35,1.1), background-color 0.25s ease;
}
.burger-widget-zone--active { height: 45px; background: var(--burger-widget-active-bg); }

@keyframes burger-widget-zone-pop {
  0%   { transform: scaleY(0); }
  70%  { transform: scaleY(1.12); }
  100% { transform: scaleY(1); }
}

.burger-widget-dot {
  position: absolute;
  left: 50%;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--burger-widget-dot-bg);
  border: 2px solid var(--burger-widget-accent);
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  animation: burger-widget-dot-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.85s both;
  /* Smoothly glide between zones during the prev → current stepper. */
  transition: top 0.4s cubic-bezier(.3,.9,.35,1.1), border-color 0.25s ease;
}

@keyframes burger-widget-dot-pop {
  0%   { transform: translate(-50%, -50%) scale(0); }
  70%  { transform: translate(-50%, -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Color variants — drive the accent (dot border) and the active-zone fill via the unified bundle. */
.burger-widget--good     { --burger-widget-accent: var(--status-good);     --burger-widget-active-bg: var(--bg-good); }
.burger-widget--info     { --burger-widget-accent: var(--status-info);     --burger-widget-active-bg: var(--bg-info); }
.burger-widget--moderate { --burger-widget-accent: var(--status-moderate); --burger-widget-active-bg: var(--bg-moderate); }
.burger-widget--high     { --burger-widget-accent: var(--status-high);     --burger-widget-active-bg: var(--bg-high); }
.burger-widget--bad      { --burger-widget-accent: var(--status-bad);      --burger-widget-active-bg: var(--bg-bad); }

/* Optional value + trend slot — rendered by burger-widget.js between the head and zones
   when data-burger-value is set. Typography mirrors Figma "Data 4" (29px Bold) and
   "Data Unit 4" (16px Black). */
.burger-widget-value-row {
  display: flex;
  justify-content: start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: -4px 0 -2px;
}
.burger-widget-number {
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
  color: var(--burger-widget-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.burger-widget-unit {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  color: var(--burger-widget-label);
}

/* Animated prev → current transition (see burger-widget.js scheduleTransition).
   The trend chip is hidden until the stepper settles on the current zone, at
   which point burger-widget.js swaps .burger-widget-trend-pending for
   .burger-widget-trend-revealed to play the fade-in. */
.burger-widget .trend-chip {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.burger-widget-trend-pending .trend-chip {
  opacity: 0;
  transform: translateY(4px);
}
.burger-widget-trend-revealed .trend-chip {
  opacity: 1;
  transform: translateY(0);
}
.burger-widget-i18n-sink { display: none; }

/* Soft status-label crossfade as the stepper walks between zones. */
.burger-widget-status { transition: color 0.25s ease; }

/* ══════════════════════════════════════════
   TREND CHIP — small delta indicator reused by burger widgets,
   dynamic heroes, and status cards. Variants: good, bad, moderate,
   neutral, info. Pages should prefer these shared rules over
   page-local overrides.
   ══════════════════════════════════════════ */
.trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
}
.trend-chip.trend-good     { background: var(--tint-good);     color: var(--status-good); }
.trend-chip.trend-bad      { background: var(--tint-bad);      color: var(--status-bad); }
.trend-chip.trend-moderate { background: var(--tint-moderate); color: var(--status-moderate); }
.trend-chip.trend-info     { background: var(--tint-info);     color: var(--status-info); }
.trend-chip.trend-neutral  { background: rgba(255,255,255,0.06); color: var(--text-placeholder); }
@media (prefers-color-scheme: light) {
  .trend-chip.trend-neutral { background: rgba(0,0,0,0.05); color: var(--text-placeholder); }
}

/* ══════════════════════════════════════════
   MINI-BURGER — inline SVG replica for status rows.
   Shape is authored inline per page; colors come from here.
   ══════════════════════════════════════════ */
.mini-burger {
  flex-shrink: 0;
  display: block;
  --mini-burger-active-bg: var(--bg-good);
  --mini-burger-accent: var(--status-good);
  --mini-burger-dot-bg: var(--background-primary);
  --mini-burger-zone-bg: var(--divider);
}
.mini-burger--good     { --mini-burger-active-bg: var(--bg-good);     --mini-burger-accent: var(--status-good); }
.mini-burger--info     { --mini-burger-active-bg: var(--bg-info);     --mini-burger-accent: var(--status-info); }
.mini-burger--moderate { --mini-burger-active-bg: var(--bg-moderate); --mini-burger-accent: var(--status-moderate); }
.mini-burger--high     { --mini-burger-active-bg: var(--bg-high);     --mini-burger-accent: var(--status-high); }
.mini-burger--bad      { --mini-burger-active-bg: var(--bg-bad);      --mini-burger-accent: var(--status-bad); }
.mini-burger .mini-burger-thin   { fill: var(--mini-burger-zone-bg); }
.mini-burger .mini-burger-active { fill: var(--mini-burger-active-bg); }
.mini-burger .mini-burger-dot    { fill: var(--mini-burger-dot-bg); stroke: var(--mini-burger-accent); }
.contrib-status-item.status-active .mini-burger {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.25));
}

/* ══════════════════════════════════════════
   GAUGE WIDGET — horizontal N-zone gauge with marker dot.
   Bar, fill, and dot are generated by shared/js/gauge-widget.js.
   See: .claude/guidelines/learn-more-design-system.md#gauge-widget
   ══════════════════════════════════════════ */
.gauge-widget {
  --gauge-accent: var(--gauge-accent-info);
  --gauge-active-bg: var(--background-info);

  background: var(--gauge-box-bg);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 18px 20px 14px;
  margin: 0 auto 24px;
  box-shadow: var(--gauge-shadow);
  color: var(--gauge-title);
  max-width: 320px;
}
.gauge-widget--unboxed {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.gauge-widget-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--gauge-title);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
}
.gauge-widget-bar {
  position: relative;
  height: 16px;
  border-radius: 8px;
  background: var(--gauge-bar-bg);
  margin-bottom: 10px;
}
.gauge-widget-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 8px;
  background: var(--gauge-active-bg);
  animation: gauge-fill-unfurl 1s cubic-bezier(0.34, 1.3, 0.64, 1) 0.35s both;
}
.gauge-widget-fill--left  { transform-origin: right center; }
.gauge-widget-fill--right { transform-origin: left  center; }
.gauge-widget-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gauge-dot-bg);
  border: 2.5px solid var(--gauge-accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  animation: gauge-dot-slide 1s cubic-bezier(0.34, 1.3, 0.64, 1) 0.35s both;
}
@keyframes gauge-dot-slide {
  0%   { left: 50%; }
  100% { left: var(--gauge-dot-pos, 50%); }
}
@keyframes gauge-fill-unfurl {
  0%   { transform: scaleX(0); opacity: 0.4; }
  100% { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gauge-widget-fill, .gauge-widget-dot { animation: none; }
  .gauge-widget-dot { left: var(--gauge-dot-pos, 50%); }
}
.gauge-widget-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gauge-label);
}
.gauge-widget-labels > .is-active { color: var(--gauge-accent); }

.gauge-widget--good     { --gauge-accent: var(--gauge-accent-good);     --gauge-active-bg: var(--background-good); }
.gauge-widget--info     { --gauge-accent: var(--gauge-accent-info);     --gauge-active-bg: var(--background-info); }
.gauge-widget--moderate { --gauge-accent: var(--gauge-accent-moderate); --gauge-active-bg: var(--background-moderate); }
.gauge-widget--high     { --gauge-accent: var(--gauge-accent-high);     --gauge-active-bg: var(--background-high); }
.gauge-widget--bad      { --gauge-accent: var(--gauge-accent-bad);      --gauge-active-bg: var(--background-bad); }

/* ── Mini gauge (scaled-down replica for status rows) ── */
.mini-gauge {
  --mini-gauge-accent: var(--gauge-accent-info);
}
.mini-gauge--good     { --mini-gauge-accent: var(--gauge-accent-good); }
.mini-gauge--info     { --mini-gauge-accent: var(--gauge-accent-info); }
.mini-gauge--moderate { --mini-gauge-accent: var(--gauge-accent-moderate); }
.mini-gauge--high     { --mini-gauge-accent: var(--gauge-accent-high); }
.mini-gauge--bad      { --mini-gauge-accent: var(--gauge-accent-bad); }
.mini-gauge .mini-gauge-box   { fill: var(--gauge-box-bg); stroke: rgba(255,255,255,0.06); }
.mini-gauge .mini-gauge-track { fill: var(--gauge-bar-bg); }
.mini-gauge .mini-gauge-fill  { fill: var(--mini-gauge-accent); }
.mini-gauge .mini-gauge-dot   { fill: var(--gauge-box-bg); stroke: var(--mini-gauge-accent); stroke-width: 1.3; }

/* ══════════════════════════════════════════
   RTL SUPPORT
   ══════════════════════════════════════════ */
[dir="rtl"] .status-row { flex-direction: row-reverse; }
[dir="rtl"] .status-content { text-align: right; }
[dir="rtl"] .contrib-status-item { flex-direction: row-reverse; }
[dir="rtl"] .contrib-status-text { text-align: right; }
[dir="rtl"] .expand-toggle { flex-direction: row-reverse; }
[dir="rtl"] .expand-text { text-align: right; }
[dir="rtl"] .pills-row { flex-direction: row-reverse; }
[dir="rtl"] .edu-toggle { flex-direction: row-reverse; }
[dir="rtl"] .edu-body { text-align: right; }
[dir="rtl"] .edu-disclaimer { text-align: right; }
[dir="rtl"] .contrib-oneliner { text-align: right; }
[dir="rtl"] .hero-subtitle { text-align: center; }
[dir="rtl"] .link-cell { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] ol.card-list li::before { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .chevron-right { transform: rotate(135deg); margin-left: 0; margin-right: 12px; }
[dir="rtl"] .bp-table th, [dir="rtl"] .bp-table td { text-align: right; }
/* RTL: micro-viz */
[dir="rtl"] .range-bar-labels { flex-direction: row-reverse; }
[dir="rtl"] .pulse-track-labels { flex-direction: row-reverse; }
[dir="rtl"] .zone-legend { flex-direction: row-reverse; }
[dir="rtl"] .zone-legend-item { flex-direction: row-reverse; }
/* RTL: burger widget */
[dir="rtl"] .burger-widget-head { flex-direction: row-reverse; }
[dir="rtl"] .burger-widget-info { right: auto; left: 0; }
[dir="rtl"] .burger-widget-label,
[dir="rtl"] .burger-widget-status { text-align: right; }
/* RTL: gauge widget */
[dir="rtl"] .gauge-widget-labels { flex-direction: row-reverse; }

/* ══════════════════════════════════════════
   LIGHT MODE
   ══════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root {
    /* Surfaces */
    --background-primary: #F7F5F3;
    --background-secondary: #FFFFFF;
    --background-secondary-pressed: #F2EEEA;
    --background-tertiary: #DDD9D5;

    /* Text */
    --text-primary: #0F0F0F;
    --text-secondary: #45413E;
    --text-placeholder: #918C88;

    /* Per-state status accents */
    --status-good: #3D7D3E;
    --status-info: #5168CC;
    --status-moderate: #FED557;
    --status-high: #E88900;
    --status-bad: #CF3336;
    --status-crisis: #6E0F14;
    --status-balanced: #7F9C35;
    --status-undefined: #A49F9B;
    --dataviz-diverging-9: #3B3985;

    /* Action / interaction */
    --action-secondary: #E7EEFF;
    --action-secondary-hover: #CBD9FF;
    --action-secondary-press: #AABFFF;

    /* Divider */
    --divider: #DDD9D5;
    --status-good-icon: #FFFFFF;
    --status-info-icon: #FFFFFF;
    --status-moderate-icon: #0F0F0F;
    --status-bad-icon: #FFFFFF;
    --status-undefined-icon: #0F0F0F;

    /* Per-state solid background fills */
    --bg-good: #E6F3E6;
    --bg-info: #E7EEFF;
    --bg-moderate: #FFEDBB;
    --bg-high: #FFEBCE;
    --bg-bad: #FFEAE6;
    --bg-balanced: #F8FEE8;

    /* Per-state primary text (= opposite-mode bg-<state>) */
    --text-good: #173E18;
    --text-info: #263369;
    --text-moderate: #433506;
    --text-high: #4B2D02;       /* derived, cross-swap rule */
    --text-bad: #6E0F14;
    --text-balanced: #303C12;   /* derived */

    /* Per-state secondary text */
    --text-good-muted: #1E4B1F;
    --text-info-muted: #2F3E7D;
    --text-moderate-muted: #514009;
    --text-high-muted: #5A3706;   /* derived, mirrors moderate primary→secondary lift */
    --text-bad-muted: #83151A;
    --text-balanced-muted: #3D4A17;  /* derived */

    /* Per-state low-opacity tints */
    --tint-good: rgba(61,125,62,0.14);
    --tint-info: rgba(81,104,204,0.12);
    --tint-moderate: rgba(254,213,87,0.22);
    --tint-high: rgba(232,137,0,0.16);
    --tint-bad: rgba(207,51,54,0.10);

    /* Per-state borders */
    --border-good: rgba(61,125,62,0.30);
    --border-info: rgba(81,104,204,0.25);
    --border-moderate: rgba(232,169,0,0.35);
    --border-high: rgba(232,137,0,0.30);
    --border-bad: rgba(207,51,54,0.22);

    /* Heart / cardio feature identity (light) */
    --heart-icon: #DC2E5F;
    --heart-text: #8C1838;
    --heart-text-muted: #8C1838;
    --heart-bg: #F9DCE4;
    --heart-bg-hero: #F3B9CA;
    --heart-bg-tint: #F3B9CA26;

    /* Aliases (backwards-compat) */
    --bg-card-inner: rgba(0,0,0,0.04);
    --color-green: var(--status-good);
    --color-blue: var(--status-info);
    --color-orange: var(--status-high);
    --color-red: var(--status-bad);
    --background-good: var(--bg-good);
    --background-info: var(--bg-info);
    --background-moderate: var(--bg-moderate);
    --background-high: var(--bg-high);
    --background-bad: var(--bg-bad);

    /* Gauge widget aliases (light) */
    --gauge-box-bg: var(--background-secondary);
    --gauge-bar-bg: var(--background-tertiary);
    --gauge-title: var(--text-secondary);
    --gauge-label: var(--text-secondary);
    --gauge-shadow: 0 4px 14px rgba(0,0,0,0.08);
    --gauge-accent-good: var(--status-good);
    --gauge-accent-info: var(--status-info);
    --gauge-accent-moderate: var(--status-moderate);
    --gauge-accent-high: var(--status-high);
    --gauge-accent-bad: var(--status-bad);
  }

  /* Gauge widget light-mode: white card on white page needs a visible border + mini-gauge stroke */
  .gauge-widget { border-color: #E5E5EA; }
  .mini-gauge .mini-gauge-box { stroke: rgba(0,0,0,0.08); }

  /* Pill text colors in light mode (Figma status-<state> light values) */
  .pill-green, .semantic-optimal.pill, .semantic-good.pill { color: var(--status-good); }
  .pill-blue, .semantic-normal.pill, .semantic-info.pill { color: var(--status-info); }
  .pill-orange, .semantic-elevated.pill, .semantic-high.pill { color: var(--status-high); }
  .pill-red, .semantic-attention.pill, .semantic-bad.pill { color: var(--status-bad); }

  /* Mini-burger active-row glow in light mode */
  .contrib-status-item.status-active .mini-burger {
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.12));
  }

  /* Status row active (legend highlight) — light mode */
  .status-row.status-row-active {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  .status-row.status-row-active:first-child {
    border-top-color: rgba(0,0,0,0.1);
  }

  /* Contributor row active highlight — light mode */
  .contrib-status-item.status-active {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  /* First-child override also needs the light-mode border colour. */
  .contrib-status-item.status-active:first-child {
    border-top-color: rgba(0,0,0,0.1);
  }
  .contrib-status-item.status-active .contrib-status-text { color: rgba(0,0,0,0.7); }
  .contrib-status-item.status-active .contrib-status-text strong { color: var(--text-primary); }

  /* Link cell active */
  .link-cell:active { background: rgba(0,0,0,0.04); }

  /* Ordered list badge */
  ol.card-list li::before { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.4); }

  /* Chevron */
  .chevron-right { border-right-color: rgba(0,0,0,0.3); border-bottom-color: rgba(0,0,0,0.3); }

  /* Edu toggle stroke */
  .edu-toggle svg path { stroke: var(--text-primary); }

  /* Contributor status border */
  .contrib-status-item { border-top-color: rgba(0,0,0,0.06); }

  /* Pulse track light mode */
  .pulse-track-tube {
    background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.04) 100%);
    border-color: rgba(0,0,0,0.1);
  }
  .pulse-track-inner { background: rgba(255,255,255,0.6); }
  .pulse-track-zone { background: rgba(52,199,89,0.08); border-color: rgba(52,199,89,0.25); }
  .pulse-track-dot {
    background: radial-gradient(circle, #3A3A3C 30%, rgba(58,58,60,0.3) 100%);
    box-shadow: 0 0 12px rgba(0,0,0,0.2), 0 0 4px rgba(0,0,0,0.4);
  }
  .pulse-track-ripple { border-color: rgba(0,0,0,0.15); }
  .pulse-track-wall-top {
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.06) 20%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.06) 80%, transparent 100%);
  }
  .pulse-track-wall-bottom {
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.06) 20%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.06) 80%, transparent 100%);
  }

  /* Range bar light mode */
  .range-bar { background: rgba(0,0,0,0.04); }
  .range-bar-zone { background: rgba(52,199,89,0.08); border-color: rgba(52,199,89,0.25); }
  .range-bar-marker {
    background: #3A3A3C;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
  }
  .range-bar-zone-label { color: #248A3D; }

  /* Zone legend light mode */
  .zone-legend-item { color: rgba(0,0,0,0.5); }

  /* Burger widget light mode: white card on white page needs a visible border */
  .burger-widget {
    --burger-widget-border: #E5E5EA;
    --burger-widget-shadow: 0 4px 14px rgba(0,0,0,0.08);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}