/* ═════════════════════════════════════════════════════════════════════════
   steps.css — THE HARD CALL, IN THREE STEPS (2026-09-30, js/83)

   The Intercept is the frozen benchmark (css §18, css/moments.css, the cube, the
   glass, the one pill, the discs). Nothing here draws anything new. It sets the
   ORDER of the card's own parts and which of them is on the face at each step of
   a hard call (.int-card[data-steps="1|2|3"]); an easy call carries no data-steps
   and is untouched.
     the step row   Manrope 400 13px ink3, sentence case         (.int-stamp)
     Back, Next     quiet text exits, Manrope 500 14px ink2       (.int-action-btn)
     the Next pill  the room's one pill, verbatim                 (.int-primary > .int-action-btn)
     the reveal     opacity and a 12px rise, 80ms apart, once     (§10, @keyframes oc-in)
   Rhythm 2 · 6 · 18 · 30 · 36.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── the step furniture is absent outside a hard call ─────────────────── */
#intercept-panel .int-steps, #intercept-panel .int-primary--next{ display:none; }

/* ── the frame stays one size while its content moves forward ─────────── */
.int-card[data-steps]{ min-height:min(640px, calc(100dvh - 48px)); display:flex !important; flex-direction:column; }
.int-card[data-steps] > .int-stack{ flex:1 0 auto; align-content:start; }

/* ── the order on the face of a hard call ─────────────────────────────── */
.int-card[data-steps] .int-stack > *{ order:5; }
.int-card[data-steps] #intercept-input{ order:0; }
.int-card[data-steps] .int-stack > .int-facts:not(#int-diff){ order:1; }
.int-card[data-steps] #int-conf-wrap{ order:1; }
.int-card[data-steps] #int-want-wrap{ order:2; }
.int-card[data-steps] #int-case{ order:1; }
.int-card[data-steps] #int-habit{ order:2; }
.int-card[data-steps] #int-check{ order:3; }
.int-card[data-steps] #int-cube{ order:4; }
.int-card[data-steps] .int-numrow{ order:5; }
.int-card[data-steps] #int-verdict{ order:6; }
.int-card[data-steps] #int-close{ order:7; }
.int-card[data-steps] .int-actions{ order:8; }
.int-card[data-steps] #int-log-msg{ order:9; }
/* behind the cube and Why: after the exits, above the evidence rows */
.int-card[data-steps] #int-diff, .int-card[data-steps] #int-bs, .int-card[data-steps] #int-model, .int-card[data-steps] #int-recurrence{ order:10; }

/* ── what each step shows ─────────────────────────────────────────────── */
.int-card[data-steps]:not([data-steps="1"]) .int-stack > .int-facts:not(#int-diff),
.int-card[data-steps]:not([data-steps="2"]) #int-conf-wrap,
.int-card[data-steps]:not([data-steps="2"]) #int-want-wrap,
.int-card[data-steps]:not([data-steps="3"]) #int-case,
.int-card[data-steps]:not([data-steps="3"]) #int-habit,
.int-card[data-steps]:not([data-steps="3"]) #int-check,
.int-card[data-steps]:not([data-steps="3"]) .int-numrow,
.int-card[data-steps]:not([data-steps="3"]) #int-verdict,
.int-card[data-steps]:not([data-steps="3"]) #int-close{ display:none; }
/* the actions: the Next pill on step 1, nothing but the step row on step 2, the room's own on step 3 */
#intercept-panel .int-card[data-steps="1"] .int-actions .int-primary--next{ display:flex; }
.int-card[data-steps="1"] .int-actions .int-primary:not(.int-primary--next),
.int-card[data-steps="1"] .int-actions .int-quiet,
.int-card[data-steps="2"] .int-actions .int-row,
.int-card[data-steps="2"] .int-actions .int-quiet{ display:none; }
#intercept-panel .int-card[data-steps] .int-steps{ display:flex; }
.int-actions .int-primary--next > .int-action-btn:disabled{ opacity:.35; cursor:default; transform:none; }
/* not on the face; opened with the cube or Why */
.int-card[data-steps]:not([data-why="1"]) #int-diff,
.int-card[data-steps]:not([data-why="1"]) #int-bs,
.int-card[data-steps]:not([data-why="1"]) #int-model,
.int-card[data-steps]:not([data-why="1"]) #int-recurrence,
.int-card[data-steps]:not([data-why="1"]) .int-habit__label,
.int-card[data-steps]:not([data-why="1"]) .int-habit__proof,
.int-card[data-steps]:not([data-why="1"]) .int-habit__say,
.int-card[data-steps]:not([data-why="1"]) .int-habit__fine,
.int-card[data-steps]:not([data-why="1"]) #int-habit:not(:has(#int-falsifier)){ display:none; }
/* the price of their certainty is check D on a hard call, and a row in Why */
.int-card[data-steps] #int-rate{ display:none; }

/* ── the rhythm of each step, from the Intercept's own gaps ───────────── */
.int-card[data-steps="2"] #int-conf-wrap{ margin-top:36px; }
.int-card[data-steps="2"] #int-want-wrap{ margin-top:30px; }
.int-card[data-steps="3"] #int-case{ margin-top:30px; }
.int-card[data-steps="3"] #int-habit{ margin-top:18px; }
.int-card[data-steps="3"] #int-habit .int-habit__field{ margin-top:0; }
.int-card[data-steps="3"] #int-close{ margin-top:18px; }
.int-card[data-steps="2"] .int-actions{ margin-top:auto; padding-top:30px; }

/* ── the cube is the card's one object on every step; on step 3 it is held smaller,
   beside the number and the verdict it now carries ───────────────────────── */
.int-card[data-steps="1"] #int-cube, .int-card[data-steps="2"] #int-cube{ margin-top:18px; }
.int-card[data-steps] #int-cube{ cursor:pointer; }
.int-card[data-steps="3"] #int-cube{ width:234px; height:200px; margin-top:18px; }
.int-card[data-steps="3"] #int-cube .ic-origin{ transform:scale(.78); }
.int-card[data-steps="3"] .int-numrow{ margin-top:0; }
.int-card[data-steps="3"] .int-num{ font-size:56px; }
.int-card[data-steps="3"] #int-verdict{ margin-top:14px; }

/* ── when will you know: one quiet word on a hard call, a tap moves it on ── */
.int-card[data-steps] #int-close .int-pill:not(.sel){ display:none; }
.int-card[data-steps] #int-close .int-pill + .int-pill::before{ content:none; }
.int-card[data-steps] #int-close .int-pill{ margin-left:0; }

/* ── the step row: Back · 2 of 3 · Next, in the stamp's voice ─────────── */
.int-steps{ align-items:center; justify-content:center; gap:0 28px; min-height:44px; }
.int-steps__at{ font:400 13px var(--f-body); color:rgb(var(--ink3)); letter-spacing:0; text-transform:none; }
.int-steps .int-action-btn[hidden]{ display:none; }
.int-card[data-steps] .int-actions{ gap:6px; }

/* ── the reveal ───────────────────────────────────────────────────────── */
.int-card[data-steps] .st-in{ animation:oc-in var(--dur-3,600ms) cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion:reduce){ .int-card[data-steps] .st-in{ animation:none; } }

/* ── phone: the frame already fills the screen; the cube keeps its phone size, held smaller ── */
@media (max-width:767px){
  .int-card[data-steps]{ min-height:0; }
  .int-card[data-steps="3"] #int-cube, .int-card[data-steps="2"] #int-cube{ width:204px; height:180px; margin-top:12px; }
  .int-card[data-steps="3"] #int-cube .ic-origin, .int-card[data-steps="2"] #int-cube .ic-origin{ transform:scale(.78); }
  .int-card[data-steps="2"] #int-conf-wrap{ margin-top:30px; }
  .int-card[data-steps="2"] .int-actions{ padding-top:14px; }
  .int-card[data-steps] .int-steps{ min-height:40px; }
  /* step 1 holds three things on a tall screen: they sit in its middle, not at its top */
  .int-card[data-steps="1"] > .int-stack{ align-content:center; }
}
@media (min-width:768px) and (max-height:820px){ .int-card[data-steps="3"] #int-cube{ width:208px; height:180px; } .int-card[data-steps="3"] #int-cube .ic-origin{ transform:scale(.72); } }

/* founder 2026-09-30: "the two lines under what would change your mind" look machine-made.
   The field reads as words, like "In a line or two", with no rule under it; the check
   arrives on space, not behind a hairline. Focus still shows, as a brighter placeholder. */
.int-card #int-habit .int-habit__field{ border-bottom:0; }
.int-card #int-habit .int-habit__field:focus-visible::placeholder{ color:rgb(var(--ink2)); }
.int-card .oc{ border-top:0; padding-top:0; }