/* ══════════════════════════════════════════════════════════════════
   proof.css — the sentence it would not finish.

   The previous version of this section drew our benchmark: two models,
   coloured squares, a gate. It proved our rigour and communicated
   nothing, because a visitor cannot name what a red square is and no
   money was at stake in it.

   This shows one refusal, in the visitor's own vocabulary, at the size
   of a real decision. The four numbers then say it holds every time.
   ══════════════════════════════════════════════════════════════════ */

/* ── the panel ─────────────────────────────────────────────────── */

.refusal {
  position: relative;
  margin-top: clamp(30px, 3.6vw, 48px);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(184, 137, 42, 0.06), transparent 62%),
    var(--vault);
}

.rf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(18px, 2.4vw, 30px);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.rf-head .rf-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--silver);
}

.rf-head .rf-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--established);
}

.rf-body { padding: clamp(22px, 2.8vw, 38px) clamp(18px, 2.4vw, 30px); }

.rf-ask {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.rf-question {
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.35;
  color: var(--parchment);
  max-width: 30ch;
}

/* ── the answer, mid-sentence ──────────────────────────────────── */

.rf-answer {
  margin-top: clamp(22px, 2.6vw, 32px);
  padding: 18px 20px;
  border-left: 2px solid var(--rail);
  background: var(--deep);
  font-family: var(--mono);
  font-size: clamp(14px, 1.35vw, 16.5px);
  line-height: 1.7;
  color: var(--cream);
  min-height: 3.4em;
}

.refusal.is-stopped .rf-answer { border-left-color: var(--blocked); }

.rf-caret {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--gold);
  opacity: 0;
}

.refusal.is-typing .rf-caret,
.refusal.is-stopped .rf-caret { animation: rf-blink 1.05s steps(1) infinite; }

@keyframes rf-blink {
  0%, 50%   { opacity: .9; }
  51%, 100% { opacity: 0; }
}

/* ── the stop ──────────────────────────────────────────────────── */

.rf-stop {
  margin-top: 20px;
  border: 1px solid rgba(192, 57, 43, .34);
  background: rgba(192, 57, 43, .045);
}

/* Hidden, but still occupying its space. `display: none` here collapsed the
   section by ~250px while the answer typed and then restored it, so the whole
   page jumped twice as you scrolled past. visibility keeps the box reserved
   and hides its border and background with it, so nothing below ever moves. */
.rf-stop.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.rf-stop {
  transition: opacity .4s var(--ease);
}

.rf-stop-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(192, 57, 43, .24);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blocked);
}

.rf-stop-bar i {
  width: 7px;
  height: 7px;
  background: var(--blocked);
  flex: none;
}

.rf-rows { margin: 0; padding: 6px 18px 16px; }

.rf-rows > div {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.rf-rows > div:last-child { border-bottom: 0; }

.rf-rows dt {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}

.rf-rows dd {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cream);
}

.rf-rows dd b { color: var(--parchment); font-weight: 600; }
.rf-rows dd .dead { color: var(--superseded); text-decoration: line-through; }

/* Rows arrive one at a time, in the order a person would read them.

   Transitions, not keyframes, and hidden only under [data-armed] which
   proof.js sets. A keyframe with `both` fill stays stuck on its first
   frame wherever compositing is throttled, which would leave the reason
   for the refusal permanently blank. A transition that never runs still
   resolves to its end state, so the worst case here is no animation
   rather than no content. */
.rf-rows > div { opacity: 1; }

.refusal[data-armed] .rf-rows > div {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.refusal[data-armed].is-stopped .rf-rows > div { opacity: 1; transform: none; }

.refusal[data-armed].is-stopped .rf-rows > div:nth-child(1) { transition-delay: .10s; }
.refusal[data-armed].is-stopped .rf-rows > div:nth-child(2) { transition-delay: .28s; }
.refusal[data-armed].is-stopped .rf-rows > div:nth-child(3) { transition-delay: .46s; }

/* ── replay ────────────────────────────────────────────────────── */

.rf-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px clamp(18px, 2.4vw, 30px);
  border-top: 1px solid var(--border);
}

.rf-punch {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--silver);
  max-width: 52ch;
}

.rf-punch b { color: var(--parchment); font-weight: 600; }

.rf-replay {
  flex: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--silver);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), opacity .3s var(--ease);
}

.rf-replay:hover { border-color: var(--gold); color: var(--gold); }
.rf-replay:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* same reasoning: the footer must not change height when this appears */
.rf-replay.is-hidden {
  visibility: hidden;
  opacity: 0;
}

/* ── the four numbers, as the generalisation ───────────────────── */

.proof-nums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 3.4vw, 44px);
  background: var(--border);
  border: 1px solid var(--border);
}

.proof-nums > div {
  background: var(--vault);
  padding: clamp(20px, 2.4vw, 30px) clamp(16px, 1.8vw, 24px);
}

.proof-n {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: .95;
  color: var(--established);
  font-variant-numeric: tabular-nums;
}

.proof-n.neutral { color: var(--parchment); }

.proof-k {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}

.proof-d {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--silver);
  margin-top: 9px;
}

.proof-note {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 76ch;
}

.proof-note a { margin-left: 6px; }

/* ── responsive ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .proof-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .rf-rows > div { grid-template-columns: 1fr; gap: 5px; }
  .rf-head { font-size: 10px; letter-spacing: .1em; }
}

@media (max-width: 620px) {
  .proof-nums { grid-template-columns: 1fr; }
  .rf-answer { font-size: 13.5px; padding: 14px 15px; }
}

/* ── reduced motion: the finished refusal, held still ──────────── */

@media (prefers-reduced-motion: reduce) {
  .refusal.is-typing .rf-caret,
  .refusal.is-stopped .rf-caret { animation: none; opacity: .9; }
  .refusal[data-armed] .rf-rows > div {
    opacity: 1;
    transform: none;
    transition: none;
  }
}