/* =========================================================
   EQUITYVOYAGE — SHARED COMPONENT CLASSES (Layer 2)
   =========================================================
   Consolidates the two duplicated structural patterns found in
   layer2-analysis.md: bordered content cards (Cluster B) and the
   segmented pill-toggle group+button pair (Cluster D).

   These rules use grouped selectors that list both the new shared
   class name (usable directly in future markup) AND every existing
   site-specific class that already implements the same recipe today
   (.s1-card, .lr-card, .horizon-btn, etc.). No HTML or JS template
   was touched to make this work — every existing element keeps its
   original class name unchanged, and now derives its shared
   properties from these grouped rules instead of repeating them.
   Each original per-file rule was trimmed down to keep only its own
   per-instance properties (padding, hover states, transitions, etc.)
   — see layer2-consolidation-verification.md for the full before/
   after per file.

   Loaded after tokens.css, before the page's own step/page CSS, on
   every page that uses one of these classes: index.html,
   research-center.html, rolling.html, data-methodology.html,
   knowledge.html. (philosophy.html doesn't use either pattern, so
   it isn't linked here.)
========================================================= */

/* -----------------------------------------------------------
   CLUSTER B — bordered content card
   9 files, 17 existing classes, all sharing this exact recipe.
   Padding (and any other per-instance property) stays in each
   class's own file. Five of these were previously drifted off the
   canonical border color/radius (.ev-panel's #e7e8eb + 16px radius,
   .lr-card's #e8edf3, .dm-*-card's #e2e7ee, .s3-event-card and
   .s6-crisis-card's 12px radius) — this consolidation intentionally
   converges all five to the canonical values below.
----------------------------------------------------------- */

.content-card,
.ev-panel,                 /* journey-layout.css */
.s1-card,                  /* step1.css */
.s2-compare-card,          /* step2.css */
.s3-range-card,            /* step3.css */
.s3-event-card,            /* step3.css — radius drift converged (was 12px) */
.s4-priority-card,         /* step4.css */
.s4-howitworks-card,       /* step4.css — keeps its own off-white background override below */
.s4-rank-card,             /* step4.css */
.s5-plan-card,              /* step5.css */
.s5-outcome-card,          /* step5.css */
.s6-behavior-card,         /* step6.css */
.s6-virtue-card,           /* step6.css */
.s6-crisis-card,           /* step6.css — radius drift converged (was 12px) */
.ev-rc-card,               /* research-center.css */
.lr-card,                  /* knowledge.css — border drift converged (was #e8edf3) */
.dm-principle-card,        /* data-methodology.css — border drift converged (was #e2e7ee) */
.dm-scope-card,            /* data-methodology.css — border drift converged (was #e2e7ee) */
.dm-method-card {          /* data-methodology.css — border drift converged (was #e2e7ee) */
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #e6e8ec);
  border-radius: var(--radius-14, 14px);
}

/* -----------------------------------------------------------
   CLUSTER D — segmented pill-toggle (group wrapper + button)
   3 files, 4 instances. display (flex vs inline-flex),
   margin-left/flex-shrink, padding, font-weight, and transition all
   stay per-instance — see each file for its own overrides.
----------------------------------------------------------- */

.pill-toggle-group,
.horizon-group,            /* rolling.css */
.speed-group,               /* rolling.css */
.ev-rc-view-toggle,        /* research-center.css */
.s1-toggle {                /* step1.css */
  border: 1px solid var(--color-border-alt, #e2e5ea);
  border-radius: var(--radius-10, 10px);
  overflow: hidden;
  background: var(--color-off-white, #f7f8fa);
}

.pill-toggle-btn,
.horizon-btn,               /* rolling.css */
.speed-btn,                  /* rolling.css */
.ev-rc-view-btn,            /* research-center.css */
.s1-toggle-btn {             /* step1.css */
  border: none;
  background: transparent;
  font-size: var(--font-size-11, 11px);
  color: var(--color-gray-blue, #5b6472);
  cursor: pointer;
}

.pill-toggle-btn.active,
.horizon-btn.active,        /* rolling.css */
.speed-btn.active,           /* rolling.css */
.ev-rc-view-btn.active,     /* research-center.css */
.s1-toggle-btn.is-active {  /* step1.css — same active state, different class name */
  background: var(--color-navy, #173763);
  color: var(--color-white, #fff);
}