/* ============================================
   REVAMP PROBLEM (INTERACTIVE)
   Tabbed exploration of the same Body / Brain / Skin
   territory as revamp-problem-visual, but interactive:
   a vertical tab list on the left, a crossfading
   glyph panel on the right that re-animates per tab.
   Default bg: dark olive — gold accents per design guide §4.
   ============================================ */

.rpi {
  position: relative;
  overflow: hidden;
}

/* ─── Header (sits inside the left column) ─────────── */
.rpi__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  text-align: left;
  max-width: 56ch;
}

@media (min-width: 1024px) {
  .rpi__header {
    gap: var(--space-lg);
  }
}

.rpi__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-brand-accent);
  line-height: 1.4;
}

.rpi__heading {
  margin: 0;
  font-size: clamp(1.75rem, 3.5vw + 0.5rem, 3.5rem);
  line-height: 0.98;
  letter-spacing: 0.015em;
  color: var(--clr-text-inverse);
  display: flex;
  flex-direction: column;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.rpi__heading-line1 {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clr-text-inverse);
}

.rpi__heading-line2 {
  display: block;
  font-weight: 400;
  /* Upright Cormorant — never italic */
  color: var(--clr-brand-accent);
  letter-spacing: 0;
  font-size: 0.85em;
  line-height: 1.05;
  margin-top: var(--space-xs);
}

.rpi__lead {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.6;
  color: var(--clr-text-inverse);
  opacity: 0.82;
  text-wrap: pretty;
  max-width: 52ch;
}

@media (min-width: 1024px) {
  .rpi__lead { font-size: var(--font-size-lg); }
}

/* ============================================
   Tab interface
   Mobile: stacks as header → tabs → panels → closing.
   Desktop: 2-col grid via template areas — left column
   stacks header / tabs / closing; right column carries
   the panel card, narrower than before so the editorial
   left column has more presence.
   ============================================ */
.rpi__tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "header"
    "tabs"
    "panels"
    "closing";
  gap: var(--space-xl);
}

@media (min-width: 960px) {
  .rpi__tabs {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "header  panels"
      "tabs    panels"
      "closing panels";
    column-gap: var(--space-3xl);
    row-gap: var(--space-2xl);
    align-items: start;
  }
}

.rpi__header  { grid-area: header; }
.rpi__tablist { grid-area: tabs; }
.rpi__panels  { grid-area: panels; }
.rpi__closing { grid-area: closing; }

/* ─── Tab list ─── */
.rpi__tablist {
  display: flex;
  gap: var(--space-xs);
  /* Horizontal snap-scroll on mobile per design guide §9 */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-sm);
  margin-inline: calc(-1 * var(--space-lg));
  padding-inline: var(--space-lg);
}

.rpi__tablist::-webkit-scrollbar { display: none; }

@media (min-width: 960px) {
  .rpi__tablist {
    flex-direction: column;
    gap: 0;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    margin-inline: 0;
    padding-inline: 0;
    border-top: 1px solid rgba(253, 252, 250, 0.18);
  }
}

.rpi__tab {
  /* Reset button defaults */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-primary);
  color: var(--clr-text-inverse);
  text-align: left;

  /* Mobile: horizontal pill-ish chips */
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: rgba(45, 49, 34, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0.7;
  transition: opacity 240ms ease-out, background-color 240ms ease-out, color 240ms ease-out;
  min-width: 0;
}

@media (min-width: 960px) {
  .rpi__tab {
    /* Desktop: full-width rows in the vertical list */
    width: 100%;
    flex: initial;
    padding: var(--space-lg) var(--space-md) var(--space-lg) var(--space-lg);
    border-radius: 0;
    background: rgba(45, 49, 34, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(253, 252, 250, 0.22);
    border-left: 2px solid transparent;
    gap: var(--space-md);
  }
}

.rpi__tab:hover {
  opacity: 0.92;
}

.rpi__tab:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 3px;
}

.rpi__tab.is-active {
  opacity: 1;
  background: rgba(181, 168, 130, 0.28);
}

@media (min-width: 960px) {
  .rpi__tab.is-active {
    background: rgba(181, 168, 130, 0.18);
    border-left-color: var(--clr-brand-accent);
  }
}

.rpi__tab-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clr-brand-accent);
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .rpi__tab-num { font-size: 12px; }
}

.rpi__tab-label {
  font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
  white-space: nowrap;
}

@media (min-width: 960px) {
  .rpi__tab-label {
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
    white-space: normal;
  }
}

.rpi__tab-arrow {
  margin-left: auto;
  width: 16px;
  height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--clr-brand-accent);
  transform: translateX(-4px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease-out;
  flex-shrink: 0;
}

@media (min-width: 960px) {
  .rpi__tab-arrow { display: inline-flex; }
}

.rpi__tab.is-active .rpi__tab-arrow {
  opacity: 1;
  transform: translateX(0);
}

.rpi__tab-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── Panels (stacked, crossfading) ─── */
.rpi__panels {
  /* Stack all panels in the same grid cell so they overlay;
     only the active one is visible. */
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  min-height: 340px;
  width: 100%;
}

@media (min-width: 768px) {
  .rpi__panels { min-height: 400px; }
}

@media (min-width: 960px) {
  .rpi__panels {
    min-height: 460px;
    /* Keep the panel from hugging the right edge on wide screens. */
    max-width: 500px;
    margin-left: auto;
    /* Sit at the panel's natural height, centered vertically across
       the three-row grid track (header / tabs / closing) so its
       centerline aligns with the left column's optical center. */
    align-self: center;
  }
}

.rpi__panel {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-md);
  border: 1px solid rgba(253, 252, 250, 0.28);
  border-radius: var(--radius-lg);
  background: rgba(45, 49, 34, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  .rpi__panel {
    padding: var(--space-2xl) var(--space-lg);
    gap: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .rpi__panel {
    padding: var(--space-3xl) var(--space-xl);
  }
}

.rpi__panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.rpi__panel[hidden] {
  display: flex;
}

.rpi__chart {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .rpi__chart { max-width: 300px; }
}

@media (min-width: 1024px) {
  .rpi__chart { max-width: 320px; }
}

/* ─── Panel copy ─── */
.rpi__panel-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  max-width: 48ch;
}

.rpi__panel-value {
  margin: 0;
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  font-weight: 400;
  /* Upright Cormorant — never italic */
  line-height: 1.2;
  color: var(--clr-brand-accent);
}

.rpi__panel-label {
  margin: 0;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-text-inverse);
  line-height: 1.05;
}

.rpi__panel-body {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.6;
  color: var(--clr-text-inverse);
  opacity: 0.82;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .rpi__panel-body { font-size: var(--font-size-lg); }
}

.rpi__panel-source {
  margin: var(--space-xs) 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clr-text-inverse);
  opacity: 0.55;
  line-height: 1.4;
}

/* ============================================
   Glyphs — same visual language as the visual section,
   sized for the larger interactive panel.
   ============================================ */

/* Rings */
.rpi__rings-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.rpi__rings-ring {
  stroke: var(--clr-brand-accent);
  transform-origin: 60px 60px;
  transform-box: view-box;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 540ms ease-out, transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rpi__rings-ring--1 { transition-delay: 0ms;   }
.rpi__rings-ring--2 { transition-delay: 90ms;  }
.rpi__rings-ring--3 { transition-delay: 180ms; }
.rpi__rings-ring--4 { transition-delay: 270ms; }
.rpi__rings-ring--5 { transition-delay: 360ms; }

.rpi__panel.is-visible .rpi__rings-ring { transform: scale(1); }
.rpi__panel.is-visible .rpi__rings-ring--1 { opacity: 1.0; }
.rpi__panel.is-visible .rpi__rings-ring--2 { opacity: 0.78; }
.rpi__panel.is-visible .rpi__rings-ring--3 { opacity: 0.55; }
.rpi__panel.is-visible .rpi__rings-ring--4 { opacity: 0.35; }
.rpi__panel.is-visible .rpi__rings-ring--5 { opacity: 0.18; }

/* Cluster */
.rpi__cluster-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rpi__cluster-dot {
  fill: var(--clr-brand-accent);
  opacity: 0;
  transform: scale(0.3);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 460ms ease-out, transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rpi-dot-delay, 0ms);
}

.rpi__panel.is-visible .rpi__cluster-dot { transform: scale(1); }
.rpi__panel.is-visible .rpi__cluster-dot--core { opacity: 1.0; }
.rpi__panel.is-visible .rpi__cluster-dot--mid  { opacity: 0.62; }
.rpi__panel.is-visible .rpi__cluster-dot--edge { opacity: 0.30; }

/* Layers */
.rpi__layers-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rpi__layers-line {
  stroke: var(--clr-brand-accent);
  stroke-linecap: round;
  opacity: 0;
  transform: translateX(-12%);
  transform-origin: left center;
  transform-box: view-box;
  transition: opacity 520ms ease-out, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rpi__layers-line--1 { transition-delay: 0ms;   }
.rpi__layers-line--2 { transition-delay: 80ms;  }
.rpi__layers-line--3 { transition-delay: 160ms; }
.rpi__layers-line--4 { transition-delay: 240ms; }
.rpi__layers-line--5 { transition-delay: 320ms; }
.rpi__layers-line--6 { transition-delay: 400ms; }
.rpi__layers-line--7 { transition-delay: 480ms; }
.rpi__layers-line--8 { transition-delay: 560ms; }

.rpi__panel.is-visible .rpi__layers-line { transform: translateX(0); }
.rpi__panel.is-visible .rpi__layers-line--1 { opacity: 1.0; }
.rpi__panel.is-visible .rpi__layers-line--2 { opacity: 0.88; }
.rpi__panel.is-visible .rpi__layers-line--3 { opacity: 0.76; }
.rpi__panel.is-visible .rpi__layers-line--4 { opacity: 0.62; }
.rpi__panel.is-visible .rpi__layers-line--5 { opacity: 0.48; }
.rpi__panel.is-visible .rpi__layers-line--6 { opacity: 0.36; }
.rpi__panel.is-visible .rpi__layers-line--7 { opacity: 0.25; }
.rpi__panel.is-visible .rpi__layers-line--8 { opacity: 0.16; }

/* ─── Closing accent line — the final punch ─── */
.rpi__closing {
  margin: 0;
  padding-top: var(--space-md);
  font-size: clamp(1.375rem, 1.75vw + 0.5rem, 2.125rem);
  font-weight: 400;
  /* Upright Cormorant — never italic */
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--clr-brand-accent);
  text-wrap: balance;
  text-align: left;
}

@media (min-width: 960px) {
  .rpi__closing {
    align-self: end;
    padding-top: var(--space-lg);
  }
}

/* ============================================
   LIGHT BACKGROUND VARIANTS — per design guide §4
   gold accents only on dark backgrounds; switch to
   primary olive on every light surface.
   ============================================ */
.rpi.bg-white .rpi__eyebrow,
.rpi.bg-page .rpi__eyebrow,
.rpi.bg-surface .rpi__eyebrow,
.rpi.bg-card-primary .rpi__eyebrow,
.rpi.bg-card-secondary .rpi__eyebrow,
.rpi.bg-accent-soft .rpi__eyebrow,
.rpi.bg-accent-warm .rpi__eyebrow,
.rpi.bg-neutral-light .rpi__eyebrow,
.rpi.bg-neutral-lighter .rpi__eyebrow { color: var(--clr-primary); }

.rpi.bg-white .rpi__heading,
.rpi.bg-page .rpi__heading,
.rpi.bg-surface .rpi__heading,
.rpi.bg-card-primary .rpi__heading,
.rpi.bg-card-secondary .rpi__heading,
.rpi.bg-accent-soft .rpi__heading,
.rpi.bg-accent-warm .rpi__heading,
.rpi.bg-neutral-light .rpi__heading,
.rpi.bg-neutral-lighter .rpi__heading { color: var(--clr-primary); }

.rpi.bg-white .rpi__heading-line1,
.rpi.bg-page .rpi__heading-line1,
.rpi.bg-surface .rpi__heading-line1,
.rpi.bg-card-primary .rpi__heading-line1,
.rpi.bg-card-secondary .rpi__heading-line1,
.rpi.bg-accent-soft .rpi__heading-line1,
.rpi.bg-accent-warm .rpi__heading-line1,
.rpi.bg-neutral-light .rpi__heading-line1,
.rpi.bg-neutral-lighter .rpi__heading-line1 { color: var(--clr-primary); }

.rpi.bg-white .rpi__heading-line2,
.rpi.bg-page .rpi__heading-line2,
.rpi.bg-surface .rpi__heading-line2,
.rpi.bg-card-primary .rpi__heading-line2,
.rpi.bg-card-secondary .rpi__heading-line2,
.rpi.bg-accent-soft .rpi__heading-line2,
.rpi.bg-accent-warm .rpi__heading-line2,
.rpi.bg-neutral-light .rpi__heading-line2,
.rpi.bg-neutral-lighter .rpi__heading-line2 { color: var(--clr-primary); }

.rpi.bg-white .rpi__lead,
.rpi.bg-page .rpi__lead,
.rpi.bg-surface .rpi__lead,
.rpi.bg-card-primary .rpi__lead,
.rpi.bg-card-secondary .rpi__lead,
.rpi.bg-accent-soft .rpi__lead,
.rpi.bg-accent-warm .rpi__lead,
.rpi.bg-neutral-light .rpi__lead,
.rpi.bg-neutral-lighter .rpi__lead { color: var(--clr-text-secondary); opacity: 1; }

/* Tabs on light bg */
.rpi.bg-white .rpi__tabs,
.rpi.bg-page .rpi__tabs,
.rpi.bg-surface .rpi__tabs,
.rpi.bg-card-primary .rpi__tabs,
.rpi.bg-card-secondary .rpi__tabs,
.rpi.bg-accent-soft .rpi__tabs,
.rpi.bg-accent-warm .rpi__tabs,
.rpi.bg-neutral-light .rpi__tabs,
.rpi.bg-neutral-lighter .rpi__tabs { border-top-color: rgba(60, 66, 46, 0.22); }

.rpi.bg-white .rpi__tab,
.rpi.bg-page .rpi__tab,
.rpi.bg-surface .rpi__tab,
.rpi.bg-card-primary .rpi__tab,
.rpi.bg-card-secondary .rpi__tab,
.rpi.bg-accent-soft .rpi__tab,
.rpi.bg-accent-warm .rpi__tab,
.rpi.bg-neutral-light .rpi__tab,
.rpi.bg-neutral-lighter .rpi__tab {
  color: var(--clr-primary);
  background: rgba(253, 252, 250, 0.72);
}

@media (min-width: 960px) {
  .rpi.bg-white .rpi__tab,
  .rpi.bg-page .rpi__tab,
  .rpi.bg-surface .rpi__tab,
  .rpi.bg-card-primary .rpi__tab,
  .rpi.bg-card-secondary .rpi__tab,
  .rpi.bg-accent-soft .rpi__tab,
  .rpi.bg-accent-warm .rpi__tab,
  .rpi.bg-neutral-light .rpi__tab,
  .rpi.bg-neutral-lighter .rpi__tab {
    background: rgba(253, 252, 250, 0.60);
    border-bottom-color: rgba(60, 66, 46, 0.28);
  }
}

.rpi.bg-white .rpi__tablist,
.rpi.bg-page .rpi__tablist,
.rpi.bg-surface .rpi__tablist,
.rpi.bg-card-primary .rpi__tablist,
.rpi.bg-card-secondary .rpi__tablist,
.rpi.bg-accent-soft .rpi__tablist,
.rpi.bg-accent-warm .rpi__tablist,
.rpi.bg-neutral-light .rpi__tablist,
.rpi.bg-neutral-lighter .rpi__tablist {
  border-top: 0;
}

@media (min-width: 960px) {
  .rpi.bg-white .rpi__tablist,
  .rpi.bg-page .rpi__tablist,
  .rpi.bg-surface .rpi__tablist,
  .rpi.bg-card-primary .rpi__tablist,
  .rpi.bg-card-secondary .rpi__tablist,
  .rpi.bg-accent-soft .rpi__tablist,
  .rpi.bg-accent-warm .rpi__tablist,
  .rpi.bg-neutral-light .rpi__tablist,
  .rpi.bg-neutral-lighter .rpi__tablist { border-top-color: rgba(60, 66, 46, 0.22); }
}

.rpi.bg-white .rpi__tab.is-active,
.rpi.bg-page .rpi__tab.is-active,
.rpi.bg-surface .rpi__tab.is-active,
.rpi.bg-card-primary .rpi__tab.is-active,
.rpi.bg-card-secondary .rpi__tab.is-active,
.rpi.bg-accent-soft .rpi__tab.is-active,
.rpi.bg-accent-warm .rpi__tab.is-active,
.rpi.bg-neutral-light .rpi__tab.is-active,
.rpi.bg-neutral-lighter .rpi__tab.is-active { background: rgba(253, 252, 250, 0.92); }

@media (min-width: 960px) {
  .rpi.bg-white .rpi__tab.is-active,
  .rpi.bg-page .rpi__tab.is-active,
  .rpi.bg-surface .rpi__tab.is-active,
  .rpi.bg-card-primary .rpi__tab.is-active,
  .rpi.bg-card-secondary .rpi__tab.is-active,
  .rpi.bg-accent-soft .rpi__tab.is-active,
  .rpi.bg-accent-warm .rpi__tab.is-active,
  .rpi.bg-neutral-light .rpi__tab.is-active,
  .rpi.bg-neutral-lighter .rpi__tab.is-active {
    background: rgba(253, 252, 250, 0.85);
    border-left-color: var(--clr-primary);
  }
}

.rpi.bg-white .rpi__tab-num,
.rpi.bg-page .rpi__tab-num,
.rpi.bg-surface .rpi__tab-num,
.rpi.bg-card-primary .rpi__tab-num,
.rpi.bg-card-secondary .rpi__tab-num,
.rpi.bg-accent-soft .rpi__tab-num,
.rpi.bg-accent-warm .rpi__tab-num,
.rpi.bg-neutral-light .rpi__tab-num,
.rpi.bg-neutral-lighter .rpi__tab-num { color: var(--clr-brand-alt); }

.rpi.bg-white .rpi__tab-arrow,
.rpi.bg-page .rpi__tab-arrow,
.rpi.bg-surface .rpi__tab-arrow,
.rpi.bg-card-primary .rpi__tab-arrow,
.rpi.bg-card-secondary .rpi__tab-arrow,
.rpi.bg-accent-soft .rpi__tab-arrow,
.rpi.bg-accent-warm .rpi__tab-arrow,
.rpi.bg-neutral-light .rpi__tab-arrow,
.rpi.bg-neutral-lighter .rpi__tab-arrow { color: var(--clr-primary); }

/* Panel chrome on light bg */
.rpi.bg-white .rpi__panel,
.rpi.bg-page .rpi__panel,
.rpi.bg-surface .rpi__panel,
.rpi.bg-card-primary .rpi__panel,
.rpi.bg-card-secondary .rpi__panel,
.rpi.bg-accent-soft .rpi__panel,
.rpi.bg-accent-warm .rpi__panel,
.rpi.bg-neutral-light .rpi__panel,
.rpi.bg-neutral-lighter .rpi__panel {
  border-color: rgba(60, 66, 46, 0.28);
  background: rgba(253, 252, 250, 0.78);
}

.rpi.bg-white .rpi__panel-value,
.rpi.bg-page .rpi__panel-value,
.rpi.bg-surface .rpi__panel-value,
.rpi.bg-card-primary .rpi__panel-value,
.rpi.bg-card-secondary .rpi__panel-value,
.rpi.bg-accent-soft .rpi__panel-value,
.rpi.bg-accent-warm .rpi__panel-value,
.rpi.bg-neutral-light .rpi__panel-value,
.rpi.bg-neutral-lighter .rpi__panel-value { color: var(--clr-brand-alt); }

.rpi.bg-white .rpi__panel-label,
.rpi.bg-page .rpi__panel-label,
.rpi.bg-surface .rpi__panel-label,
.rpi.bg-card-primary .rpi__panel-label,
.rpi.bg-card-secondary .rpi__panel-label,
.rpi.bg-accent-soft .rpi__panel-label,
.rpi.bg-accent-warm .rpi__panel-label,
.rpi.bg-neutral-light .rpi__panel-label,
.rpi.bg-neutral-lighter .rpi__panel-label { color: var(--clr-primary); }

.rpi.bg-white .rpi__panel-body,
.rpi.bg-page .rpi__panel-body,
.rpi.bg-surface .rpi__panel-body,
.rpi.bg-card-primary .rpi__panel-body,
.rpi.bg-card-secondary .rpi__panel-body,
.rpi.bg-accent-soft .rpi__panel-body,
.rpi.bg-accent-warm .rpi__panel-body,
.rpi.bg-neutral-light .rpi__panel-body,
.rpi.bg-neutral-lighter .rpi__panel-body { color: var(--clr-text-secondary); opacity: 1; }

.rpi.bg-white .rpi__panel-source,
.rpi.bg-page .rpi__panel-source,
.rpi.bg-surface .rpi__panel-source,
.rpi.bg-card-primary .rpi__panel-source,
.rpi.bg-card-secondary .rpi__panel-source,
.rpi.bg-accent-soft .rpi__panel-source,
.rpi.bg-accent-warm .rpi__panel-source,
.rpi.bg-neutral-light .rpi__panel-source,
.rpi.bg-neutral-lighter .rpi__panel-source { color: var(--clr-text-muted); opacity: 1; }

/* Glyphs on light bg — stroke/fill from gold to primary olive */
.rpi.bg-white .rpi__rings-ring,
.rpi.bg-page .rpi__rings-ring,
.rpi.bg-surface .rpi__rings-ring,
.rpi.bg-card-primary .rpi__rings-ring,
.rpi.bg-card-secondary .rpi__rings-ring,
.rpi.bg-accent-soft .rpi__rings-ring,
.rpi.bg-accent-warm .rpi__rings-ring,
.rpi.bg-neutral-light .rpi__rings-ring,
.rpi.bg-neutral-lighter .rpi__rings-ring { stroke: var(--clr-primary); }

.rpi.bg-white .rpi__cluster-dot,
.rpi.bg-page .rpi__cluster-dot,
.rpi.bg-surface .rpi__cluster-dot,
.rpi.bg-card-primary .rpi__cluster-dot,
.rpi.bg-card-secondary .rpi__cluster-dot,
.rpi.bg-accent-soft .rpi__cluster-dot,
.rpi.bg-accent-warm .rpi__cluster-dot,
.rpi.bg-neutral-light .rpi__cluster-dot,
.rpi.bg-neutral-lighter .rpi__cluster-dot { fill: var(--clr-primary); }

.rpi.bg-white .rpi__layers-line,
.rpi.bg-page .rpi__layers-line,
.rpi.bg-surface .rpi__layers-line,
.rpi.bg-card-primary .rpi__layers-line,
.rpi.bg-card-secondary .rpi__layers-line,
.rpi.bg-accent-soft .rpi__layers-line,
.rpi.bg-accent-warm .rpi__layers-line,
.rpi.bg-neutral-light .rpi__layers-line,
.rpi.bg-neutral-lighter .rpi__layers-line { stroke: var(--clr-primary); }

.rpi.bg-white .rpi__closing,
.rpi.bg-page .rpi__closing,
.rpi.bg-surface .rpi__closing,
.rpi.bg-card-primary .rpi__closing,
.rpi.bg-card-secondary .rpi__closing,
.rpi.bg-accent-soft .rpi__closing,
.rpi.bg-accent-warm .rpi__closing,
.rpi.bg-neutral-light .rpi__closing,
.rpi.bg-neutral-lighter .rpi__closing { color: var(--clr-brand-alt); }

/* ─── Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rpi__panel,
  .rpi__rings-ring,
  .rpi__cluster-dot,
  .rpi__layers-line,
  .rpi__tab,
  .rpi__tab-arrow {
    transition: none !important;
  }
  /* Render glyphs immediately at their final state when active. */
  .rpi__panel.is-active .rpi__rings-ring,
  .rpi__panel.is-active .rpi__cluster-dot,
  .rpi__panel.is-active .rpi__layers-line { transform: none; }
  .rpi__panel.is-active .rpi__rings-ring--1 { opacity: 1.0; }
  .rpi__panel.is-active .rpi__rings-ring--2 { opacity: 0.78; }
  .rpi__panel.is-active .rpi__rings-ring--3 { opacity: 0.55; }
  .rpi__panel.is-active .rpi__rings-ring--4 { opacity: 0.35; }
  .rpi__panel.is-active .rpi__rings-ring--5 { opacity: 0.18; }
  .rpi__panel.is-active .rpi__cluster-dot--core { opacity: 1.0; }
  .rpi__panel.is-active .rpi__cluster-dot--mid  { opacity: 0.62; }
  .rpi__panel.is-active .rpi__cluster-dot--edge { opacity: 0.30; }
  .rpi__panel.is-active .rpi__layers-line--1 { opacity: 1.0; }
  .rpi__panel.is-active .rpi__layers-line--2 { opacity: 0.88; }
  .rpi__panel.is-active .rpi__layers-line--3 { opacity: 0.76; }
  .rpi__panel.is-active .rpi__layers-line--4 { opacity: 0.62; }
  .rpi__panel.is-active .rpi__layers-line--5 { opacity: 0.48; }
  .rpi__panel.is-active .rpi__layers-line--6 { opacity: 0.36; }
  .rpi__panel.is-active .rpi__layers-line--7 { opacity: 0.25; }
  .rpi__panel.is-active .rpi__layers-line--8 { opacity: 0.16; }
}