/* ==========================================================================
   Card sequence — the pacing layer.

   docs/06-design-psychology.md: one idea per card, advanced by the reader.
   A scroll shows everything at once and leaves no open loop; this restores the
   anticipation the Peak-End and variable-reward principles depend on.
   ========================================================================== */

.seq {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: min(78dvh, 40rem);
  cursor: pointer;
  user-select: none;
}
.seq:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- Progress: segmented, Stories-legible ---- */

.seq__progress { display: flex; gap: 3px; padding-bottom: var(--s-3); }
.seq__progress i {
  flex: 1; height: 2px;
  background: var(--rule);
  transition: background var(--d-base) var(--ease);
}
.seq__progress i.is-done { background: var(--ink-soft); }
.seq__progress i.is-on { background: var(--stamp); }

/* Centred, not top-pinned: a story card holds ONE idea, so it should sit in
   the optical middle rather than leaving a void above the footer. */
.seq__card {
  display: grid;
  /* minmax(0, 1fr), not the default auto. A grid column's automatic minimum is
     min-content, so an unbreakable word like "NOCTURNAL" widens the column past
     its container instead of being constrained by it. Every child then measures
     itself against an already-inflated width, which is why shrink-to-fit kept
     reporting "fits" while the text was visibly sheared. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: var(--s-3);
}

/* ---- Footer: the open loop. "3 more" is the pull. ---- */

.seq__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-fine);
}
.seq__counter {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fade);
}
.seq__hint {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--fade);
  opacity: 0.6;
}

/* ---- Card typography ---- */

.card__kicker {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fade);
}
.card__stat {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 118, 'wght' 700;
  font-size: min(26cqw, 5.5rem);
  line-height: 0.84;
  letter-spacing: -0.05em;
  font-feature-settings: 'tnum';
}
.card__say {
  font-family: var(--f-serif);
  font-size: 1.1875rem;
  line-height: 1.45;
  text-wrap: balance;
}
.card__note { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }

/* ---- Hold to reveal ----
   Physical effort before a heavy finding. Creates investment, and makes
   seeing it an explicit choice rather than something that happened to you. */

.hold {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 3.25rem;
  border: 1px solid var(--rule);
  overflow: hidden;
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  touch-action: none;
}
.hold::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  background: var(--accent-wash);
  transition: width 60ms linear;
}
.hold > span { position: relative; }

/* ---- Verdict card: the payoff ---- */

.verdict { display: grid; gap: var(--s-2); padding-block: var(--s-2); }
.verdict__mark {
  font-family: var(--f-display);
  font-variation-settings: 'wdth' 112, 'wght' 700;
  font-size: 1.75rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.verdict--clear .verdict__mark { color: var(--calm-accent); }
.verdict__body { font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.55; }

/* ==========================================================================
   Charts. Marks stay thin; grid stays recessive; text never wears the
   series colour.
   ========================================================================== */

.chart { display: block; overflow: visible; }

.chart__axis { stroke: var(--rule); stroke-width: 1; }
.chart__line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { fill: var(--chart-1); opacity: 0.14; }
.chart__dot  { fill: var(--chart-1); stroke: var(--paper); stroke-width: 2; }

/* The silence itself, drawn as absence: hatched, not filled. */
.chart__void { fill: url(#hatch); opacity: 0.5; }

.chart__track { fill: var(--rule-fine); }
.chart__fill  { fill: var(--chart-1); }
.chart__mid   { stroke: var(--ink); stroke-width: 1; opacity: 0.5; }

.chart__cell { fill: var(--rule-fine); }
.chart__cell.is-active { fill: var(--chart-1); opacity: 0.85; }

.chart__label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--fade);
}

/* Validated steps — see js/charts.js for the validator output. */
:root { --chart-1: #ac312a; --chart-2: #b37900; }
.tier3    { --chart-1: #506b8a; --chart-2: #8d9aab; }

.chart-caption {
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--fade);
}

.chart__fill.is-muted { opacity: 0.42; }
.chart__val {
  font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: 0.06em; fill: var(--ink-soft);
}

/* ---- Additional chart marks ---- */
.chart__heat { fill: var(--chart-1); }
.chart__ring-track { fill: none; stroke: var(--rule-fine); stroke-width: 11; }
.chart__ring { fill: none; stroke: var(--chart-1); stroke-width: 11; stroke-linecap: butt; }
.chart__ring-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: 21px; fill: var(--ink);
}
.chart__ring-cap {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.04em; fill: var(--ink-soft);
}

/* An SVG that renders 11px wider than its column widens the whole document,
   which shifts the receipt past the viewport and clips everything on its right.
   The symptom looks like a text bug; the cause is the chart. */
.chart { max-width: 100%; }

/* ---- Desktop rail -------------------------------------------------------
   The receipt keeps its width; the empty space beside it carries the index.
   Below 64rem this does not exist and the dot row does the job.
   ------------------------------------------------------------------------ */

.rail { display: none; }

@media (min-width: 64rem) {
  .rail {
    display: grid;
    gap: 0.35rem;
    position: absolute;
    top: 0;
    right: calc(100% + 2.5rem);
    align-content: start;
  }

  .rail__step {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    padding: 0.3rem 0.6rem;
    min-width: 2.6rem;
    text-align: right;
    cursor: pointer;
    background: none;
    border: none;
    border-right: 2px solid oklch(100% 0 0 / 0.16);
    color: oklch(100% 0 0 / 0.32);
    transition: color 160ms ease, border-color 160ms ease;
  }

  .rail__step:hover,
  .rail__step:focus-visible { color: oklch(100% 0 0 / 0.75); border-right-color: var(--riso-pink, #ff2d87); }
  .rail__step.is-done { color: oklch(100% 0 0 / 0.45); border-right-color: oklch(100% 0 0 / 0.3); }

  /* The current card is the only thing on the rail with real weight. */
  .rail__step.is-on {
    color: #fff;
    border-right-color: var(--riso-pink, #ff2d87);
    border-right-width: 3px;
  }

  /* The receipt is the positioning context for the rail. */
  .receipt-shell { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .rail__step { transition: none; }
}