/* ─────────────────────────────────────────────────────────────
 * Chapters — "How it's built": 01-05 evidence chapters
 * ───────────────────────────────────────────────────────────── */

.chapters {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(96px, 14vh, 160px);
  /* Section signature. Stage runs indigo (239°) and the theme wall turns
   * coral peach (10°); rose at 350° is the boldest of the candidates and
   * sits ~20° off that peach, so the two warm sections meet warm-on-warm.
   * Chrome is rose; anything depicting the product keeps brand indigo. */
  --chapter-accent: #f43f5e;
  --chapter-accent-subtle: #ffe4e6;
  /* A hairline plus a one-step-recessed plane, so the section reads as a
   * different surface from the hero/stage sheet it follows. */
  border-top: 2px solid var(--chapter-accent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--dv-surface-code) 80%, var(--dv-bg-subtle)) 0%,
    var(--dv-bg-subtle) 22%,
    color-mix(in srgb, var(--dv-bg-base) 55%, var(--dv-bg-subtle)) 100%
  );
}

[data-theme="dark"] .chapters {
  --chapter-accent: #fb7185;
  --chapter-accent-subtle: color-mix(in srgb, var(--chapter-accent) 18%, transparent);
}

/* The light sheet names bg-subtle pure white, so the recessed top stop
 * that reads on the dark sheet disappears here. Give it more paint. */
:root:not([data-theme="dark"]) .chapters {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--dv-surface-code) 90%, var(--dv-bg-subtle)) 0%,
    var(--dv-bg-subtle) 22%,
    color-mix(in srgb, var(--dv-bg-base) 55%, var(--dv-bg-subtle)) 100%
  );
}

/* ── Backdrop — matrix, mini components, sparkles ─────────── */


.chapters-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* ── Mini UI confetti — tiny Dievas components, drifting ──── */

.mini {
  position: absolute;
  opacity: 0.2;
  user-select: none;
  animation: mini-drift 22s var(--ease) infinite;
}

.mini-btn {
  width: 64px;
  height: 22px;
  border-radius: 999px;
  background: var(--chapter-accent);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--chapter-accent) 70%, transparent);
}

.mini-switch {
  width: 36px;
  height: 21px;
  border-radius: 999px;
  background: var(--dv-switch-on);
  border: 1px solid var(--dv-switch-on);
}
.mini-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--dv-switch-thumb);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
}

/* Backdrop hairlines use border-hi, not border: on the light sheet
 * border is #e2e8f0 against a white section, so these shapes vanished. */
.mini-tabs {
  display: flex;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--dv-border-hi);
}
.mini-tabs .mtab {
  width: 18px;
  height: 6px;
  border-radius: 3px;
  background: var(--dv-border-hi);
}
.mini-tabs .mtab.on { background: var(--chapter-accent); }

.mini-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mini-dots .mdot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--dv-border-hi);
}
.mini-dots .mdot.on {
  width: 18px;
  background: var(--chapter-accent);
}

.mini-badge {
  width: 56px;
  height: 18px;
  border-radius: 999px;
  background: var(--chapter-accent-subtle);
}

.mini-field {
  width: 88px;
  height: 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--dv-border-hi);
  background: var(--dv-bg-base);
}

.mini-chip {
  width: 60px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--dv-border-hi);
}

@keyframes mini-drift {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}

/* ── Sparkles — twinkling geometry ────────────────────────── */

.sparkle {
  position: absolute;
  font-family: var(--font-mono);
  line-height: 1;
  color: var(--dv-text-hi);
  user-select: none;
  animation: sparkle-twinkle 6s var(--ease) infinite;
}
.sparkle.is-brand { color: var(--chapter-accent); }

@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.1; transform: scale(0.8); }
  50%      { opacity: 0.4; transform: scale(1.15); }
}

/* ── Reactive dot matrix ──────────────────────────────────── */

.chapters-matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .mini, .sparkle { animation: none; }
  .mini { opacity: 0.14; }
  .sparkle { opacity: 0.22; }
}

.chapters-intro {
  text-align: center;
  margin-bottom: clamp(56px, 8vh, 88px);
}

.chapters-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.6vw, 56px);
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--dv-text-hi);
}

.chapters-title-accent {
  color: var(--chapter-accent);
}

.chapters-lede {
  max-width: 52ch;
  margin: 18px auto 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--dv-text-mid);
}

/* ── Chapter row ───────────────────────────────────────────── */

.chapter {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(20px, 4vw, 56px);
  padding-block: clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--dv-border);
  position: relative;
}

.chapter-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.chapter-num {
  font-family: var(--font-display);
  font-size: clamp(52px, 5.4vw, 72px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--dv-text-lo);
  opacity: 0.45;
  user-select: none;
}

.chapter-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dv-text-lo);
}

.chapter-main {
  min-width: 0;
}

.chapter-heading {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.03em;
  color: var(--dv-text-hi);
  transition: color 260ms var(--ease);
}

/* 03 lets the demo drive the whole chapter: choose Disabled and the
 * heading goes disabled with it. */
.chapter:has(.state-demo[data-state="disabled"]) .chapter-heading {
  color: var(--dv-text-off);
}

.chapter-body {
  max-width: 46ch;
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--dv-text-mid);
}

.chapter-demo {
  margin-top: 28px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--dv-border);
  border-radius: var(--radius-2xl);
  background: var(--dv-bg-subtle);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03),
              0 12px 32px -20px rgba(15,23,42,0.10);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

/* ── 01 · token chain ──────────────────────────────────────── */

.chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.chain-step {
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--dv-border);
  background: var(--dv-bg-base);
  color: var(--dv-text-mid);
  letter-spacing: 0.04em;
}
.chain-step b {
  color: var(--dv-brand);
  font-weight: 500;
}

/* the pivot — the hop the whole system exists for */
.chain-step.sr-step {
  border-color: var(--dv-border-brand);
  background: color-mix(in srgb, var(--dv-brand) 7%, var(--dv-bg-base));
  color: var(--dv-text-hi);
}
.chain-step.sr-step b {
  color: var(--dv-brand);
  font-weight: 500;
}

.chain-arrow {
  color: var(--dv-text-lo);
}

/* ── 02 · rebuild readout ──────────────────────────────────── */

.rebuild-well {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rebuild-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--dv-border);
  background: var(--dv-bg-base);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dv-text-mid);
  transition: border-color 200ms var(--ease), opacity 200ms var(--ease);
}
.rebuild-item .liv {
  color: var(--dv-text-lo);
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
.rebuild-item.is-touched {
  border-color: var(--dv-border-brand);
}
.rebuild-item.is-touched .liv {
  opacity: 1;
  color: var(--dv-brand);
}

.touch-control {
  display: flex;
  justify-content: flex-end;
}

/* ── Pickers (shared by chapters 02, 03, 04) ──────────────── */

.brand-picker,
.state-picker,
.aspect-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.brand-btn,
.state-btn,
.aspect-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--dv-border);
  background: var(--dv-bg-base);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--dv-text-mid);
  transition: border-color 200ms var(--ease), color 200ms var(--ease),
    transform 110ms var(--ease), background 200ms var(--ease);
}
/* The pills are controls, but with no hover of their own they read as
 * chips. Answer the cursor here; the pressed ring below still wins. */
.brand-btn:hover,
.state-btn:hover,
.aspect-btn:hover {
  border-color: var(--dv-border-hi);
  background: var(--dv-bg-subtle);
  color: var(--dv-text-hi);
}
.brand-btn:active,
.state-btn:active,
.aspect-btn:active {
  transform: scale(0.96);
}
.brand-btn[aria-pressed="true"],
.state-btn[aria-pressed="true"],
.aspect-btn[aria-pressed="true"] {
  color: var(--dv-text-hi);
  border-color: var(--demo-accent, var(--dv-border-hi));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--demo-accent, var(--dv-border-hi)) 18%, transparent);
}

/* ── 03 · component state switcher ─────────────────────────── */

/* A hint, because a row of pills on its own does not say "pick one". */
.picker-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.picker-cue {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dv-text-lo);
}

.state-demo {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 24px;
  border: 1px solid var(--dv-border);
  border-radius: var(--radius-xl);
  background: var(--dv-bg-base);
  transition: border-color 200ms var(--ease);
}

/* One component, restated by the picker above it. */
.state-demo[data-state="hover"] {
  border-color: var(--dv-border-brand);
}
.state-demo[data-state="hover"] .dbtn-primary { background: var(--dv-action-hover); }
.state-demo[data-state="hover"] .dbtn-secondary { background: var(--dv-action-sec-hover); border-color: var(--dv-border-hi); }
.state-demo[data-state="hover"] .dbtn-text { background: var(--dv-brand-subtle); }
.state-demo[data-state="hover"] .dbtn-ghost { color: var(--dv-text-hi); border-color: var(--dv-border-hi); }
.state-demo[data-state="hover"] .t-switch .track { border-color: var(--dv-border-brand); }

.state-demo[data-state="pressed"] .dbtn { transform: scale(0.97); }
.state-demo[data-state="pressed"] .dbtn-primary { background: var(--dv-action-hover); box-shadow: none; }
.state-demo[data-state="pressed"] .t-switch .track { background: var(--dv-switch-on); border-color: var(--dv-switch-on); }
.state-demo[data-state="pressed"] .t-switch .knob { transform: translateX(16px); }

.state-demo[data-state="disabled"] .dbtn {
  color: var(--dv-text-off);
  background: var(--dv-action-disabled);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.state-demo[data-state="disabled"] .t-switch {
  opacity: 0.5;
  pointer-events: none;
}

/* Indigo is the resting brand, so its trio is both the default and the
 * explicit [data-brand] case — all three brands now read as the same kind
 * of card instead of Indigo falling back to the page surface. */
.brand-demo {
  --demo-accent: #6366f1;
  --demo-bg: #1e1b4b;
  --demo-fg: #eef2ff;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.brand-demo .bd-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-demo .bd-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--demo-accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
}
.brand-demo .bd-name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.02em;
}
.brand-demo .bd-card {
  border-radius: var(--radius-xl);
  background: var(--demo-bg);
  border: 1px solid var(--demo-accent);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--demo-fg);
  transition: background 260ms var(--ease), border-color 260ms var(--ease);
}
.brand-demo .bd-btn {
  padding: 9px 16px;
  border-radius: var(--radius-md);
  background: var(--demo-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: transform 110ms var(--ease), filter 160ms var(--ease);
}
.brand-demo .bd-btn:active { transform: scale(0.97); }
.brand-demo .bd-btn:hover { filter: brightness(1.06); }

.brand-demo[data-brand="indigo"] { --demo-accent: #6366f1; --demo-bg: #1e1b4b; --demo-fg: #eef2ff; }
.brand-demo[data-brand="timber"] { --demo-accent: #2f7d5f; --demo-bg: #0f2a20; --demo-fg: #eef7f2; }
.brand-demo[data-brand="ember"]  { --demo-accent: #d4552f; --demo-bg: #331409; --demo-fg: #fdf0ea; }

/* The pill for each brand wears that brand's colour once it is the
 * pressed one — previously all three fell back to the neutral hairline. */
.brand-btn[data-brand-trigger="indigo"] { --demo-accent: #6366f1; }
.brand-btn[data-brand-trigger="timber"] { --demo-accent: #2f7d5f; }
.brand-btn[data-brand-trigger="ember"]  { --demo-accent: #d4552f; }

/* The well around the demo takes the same edge, and so does the 04: the
 * accent is set on the chapter row so both can read it. */
.chapter:has(.brand-demo[data-brand="indigo"]) { --well-accent: #6366f1; }
.chapter:has(.brand-demo[data-brand="timber"]) { --well-accent: #2f7d5f; }
.chapter:has(.brand-demo[data-brand="ember"])  { --well-accent: #d4552f; }
.chapter:has(.brand-demo[data-brand]) .chapter-demo {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--well-accent) 40%, var(--dv-border));
  transition: border-color 260ms var(--ease);
}
.chapter:has(.brand-demo[data-brand]) .chapter-num {
  color: var(--well-accent);
  opacity: 1;
  transition: color 260ms var(--ease), opacity 260ms var(--ease);
}

/* ── 05 · gallery handoff ──────────────────────────────────── */

/* Six previews, three across. The strip is the whole handoff now — the
 * hand-rolled "view the gallery" pill that used to sit seventh in the row
 * is gone, so the tiles carry the chapter on their own. */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 520px;
}

.gal-tile {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--dv-border);
  background: var(--dv-bg-base);
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.gal-tile:hover {
  border-color: var(--dv-border-hi);
  transform: translateY(-2px);
}

.gal-preview {
  height: 34px;
  display: grid;
  place-items: center start;
}

.gal-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dv-text-lo);
}

/* Miniature component previews */

.gp-btn {
  padding: 7px 14px;
  border-radius: var(--radius-md);
  background: var(--dv-action);
  color: var(--dv-on-brand);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.gp-switch {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--dv-switch-on);
  position: relative;
}
.gp-switch .gp-knob {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--dv-switch-thumb);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}

.gp-field {
  width: 92px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--dv-border);
  color: var(--dv-text-lo);
  font-family: var(--font-mono);
  font-size: 10px;
}

.gp-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--dv-brand-subtle);
  color: var(--dv-brand);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gp-chip {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--dv-border);
  color: var(--dv-text-mid);
  font-family: var(--font-mono);
  font-size: 10px;
}

.gp-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--dv-border);
}
.gp-tabs .gp-tab {
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dv-text-lo);
  border-bottom: 2px solid transparent;
}
.gp-tabs .gp-tab.is-active {
  color: var(--dv-text-hi);
  border-bottom-color: var(--dv-brand);
}

/* Mobile */
@media (max-width: 760px) {
  .chapter {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .chapter-side {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
  }
  .chapter-num { font-size: 44px; }
  /* Three across is too tight for the 92px field preview. */
  .gallery-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Centred pickers leave a ragged left edge once they wrap. */
  .state-picker,
  .aspect-picker { justify-content: flex-start; }
  .state-demo { align-items: flex-start; }
}