/* ============================================================
   THE STROOP STUDY — components.css
   The visible skin: the conflict motif, buttons, tags, callouts,
   stats, figure frames, nav/badge/toggle furniture. tokens only.
   ============================================================ */

/* ════════════ THE SIGNATURE MOTIF ════════════
   A live Stroop on the reader: the word names one colour, its ink
   is another. Used ONLY here and in figures. The caption beneath
   the hero names the effect so the trick is honest, not decorative. */
.stroop-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1;
  /* a faint baseline so the mismatched words read as set type */
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.04em;
}
.stroop-word--red    { color: var(--stroop-red); }
.stroop-word--green  { color: var(--stroop-green); }
.stroop-word--blue   { color: var(--stroop-blue); }
.stroop-word--amber  { color: var(--stroop-amber); }

/* Inline conflict mark reusable by prose (E may apply it sparingly):
   text whose ink fights its meaning, e.g. the word "red" in green. */
.conflict {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-incongruent);
}
.conflict--easy { color: var(--c-congruent); }

/* ════════════ BUTTONS ════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-fine);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 0.72em 1.35em;
  border: var(--hair) solid var(--ink);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: var(--shadow-card);
}
.btn--primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
  box-shadow: var(--shadow-lift);
}

.btn--ghost { border-color: var(--rule-strong); color: var(--ink-soft); }
.btn--ghost:hover { border-color: var(--ink); color: var(--paper); }

.btn--sm { padding: 0.5em 0.95em; font-size: var(--t-micro); }

/* ════════════ TAGS / CHIPS ════════════ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: var(--hair) solid var(--rule);
  border-radius: 999px;
  padding: 0.3em 0.7em;
  white-space: nowrap;
}
.tag--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); }

/* ════════════ NAV LINKS ════════════ */
.nav__link {
  position: relative;
  font-family: var(--font-ui);
  font-size: var(--t-fine);
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.35em 0;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.05em;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }

/* ════════════ LIVE BADGE / COHORT STATE ════════════ */
.livebadge__n { color: var(--ink); font-weight: 600; }
[data-live-n] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.livebadge__cohort,
[data-cohort-badge] {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
}
/* When live data is in view the badge stops being amber/illustrative. */
[data-cohort-badge][data-state="live"] { color: var(--ok); }
.livebadge:has([data-cohort-badge][data-state="live"]) {
  border-color: color-mix(in srgb, var(--ok) 38%, var(--rule));
}

/* The cohort toggle (placed in figure regions by E; styled here). */
[data-cohort-toggle] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-raised);
  border: var(--hair) solid var(--rule);
  border-radius: 999px;
  padding: 0.45em 0.9em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
[data-cohort-toggle]::before {
  content: "";
  width: 0.55em; height: 0.55em;
  border-radius: 999px;
  background: var(--example-edge);
  flex: 0 0 auto;
}
[data-cohort-toggle][data-cohort="live"]::before { background: var(--ok); }
[data-cohort-toggle]:hover { border-color: var(--ink); color: var(--ink); }
[data-cohort-toggle][disabled] { opacity: 0.5; cursor: not-allowed; }

/* ════════════ CALLOUT ════════════ */
.callout {
  border: var(--hair) solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  background: var(--paper-raised);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 3vw, var(--s-6));
  font-size: var(--t-fine);
  color: var(--ink-soft);
}
.callout > * + * { margin-top: var(--s-3); }
.callout__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-fine);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: none;
}

/* The "this is simulated, not human data" variant — amber-tinted,
   the same signal used everywhere the example cohort appears. */
.callout--example {
  background: var(--example-tint);
  border-color: color-mix(in srgb, var(--example-edge) 30%, var(--rule));
  border-left-color: var(--example-edge);
  color: var(--ink-soft);
}
.callout--example .callout__title { color: var(--warn); }
.callout--example .callout__title::before {
  content: "Example — simulated";
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
  background: color-mix(in srgb, var(--example-edge) 18%, transparent);
  border: var(--hair) solid color-mix(in srgb, var(--example-edge) 45%, transparent);
  border-radius: 999px;
  padding: 0.2em 0.6em;
  margin-right: 0.6em;
  vertical-align: 0.06em;
}

.callout--note   { border-left-color: var(--accent); }
.callout--method { border-left-color: var(--stroop-blue); }

/* ════════════ STAT ════════════ */
.stat {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
[data-stat] {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}
/* Before D3 fills it, an em-dash placeholder keeps prose from jumping. */
[data-stat]:empty::before { content: "—"; color: var(--ink-faint); }

/* Big pulled figures (E may wrap a .stat-block around label+number). */
.stat-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-5) 0;
}
.stat-block__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1;
  color: var(--ink);
}
.stat-block__label {
  font-family: var(--font-ui);
  font-size: var(--t-fine);
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s-5) var(--s-7);
  border-top: var(--hair) solid var(--rule);
}
.stat-grid .stat-block { border-bottom: var(--hair) solid var(--rule); }

/* ════════════ FIGURE FRAME ════════════ */
.figure-frame {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0;
}
.figure-frame__body {
  position: relative;
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: clamp(var(--s-4), 2.5vw, var(--s-6));
  overflow: hidden;
}
.figure-frame__cap,
.figure-frame figcaption {
  font-family: var(--font-ui);
  font-size: var(--t-fine);
  color: var(--ink-faint);
  line-height: var(--lh-snug);
  max-width: var(--measure);
}
.figure-frame__cap b,
.figure-frame figcaption b { color: var(--ink-soft); font-weight: 600; }
.figure-frame__num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
/* A figure showing the example cohort wears the amber edge too. */
.figure-frame[data-cohort="example"] .figure-frame__body {
  border-color: color-mix(in srgb, var(--example-edge) 28%, var(--rule));
  box-shadow: inset 3px 0 0 var(--example-edge);
}

/* ════════════ SMALL PRINT / META ROW ════════════ */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--t-fine);
  color: var(--ink-faint);
}
.meta-row .rule-dot { width: 3px; height: 3px; border-radius: 999px; background: var(--rule-strong); }