/* ── CALC-RESULTS — calculator-page-only results styling ─────────────────
   OWNERSHIP (the seam rule): this file is loaded by index.html ONLY, after
   results.css. It is the ONLY legal home for .rb-* overrides — results.css
   is shared with the /r/:id web report (report/web-template.html loads only
   runway.css + results.css), so a selector here physically cannot reach the
   report or the PDF. NEVER add this file to report/web-template.html or
   report/template.html.

   Motion tokens (--dur-1/2/3, --ease-out, --ease-spring) are defined ONCE in
   calculator.css :root — reference them, never re-declare.

   NOTE (render suite): scripts/run-render.js asserts classList / computed
   display / innerText — all opacity-blind. Keyframes here animate opacity +
   transform only; never `visibility` (innerText excludes visibility:hidden
   content) and never `display`. ─────────────────────────────────────────── */

/* ── Recap card: question → answer → levers (owner call 2026-07-07) ──
   The card's base styles live in results.css (shared, untouched); the new
   question/levers elements are calculator-only so their styles live HERE. */
.rb .recap-q {
  font-family: var(--serif); font-size: 17px; line-height: 1.5;
  color: var(--ink-dim); margin: 0 0 10px;
}
.rb .recap-q em { font-style: italic; }
.rb .recap-levers { margin: 0 0 16px; }
.rb .recap-levers-lab {
  font-family: var(--ui); font-size: 13px; line-height: 1.45;
  color: var(--ink-muted); margin: 0 0 8px;
}
.rb .recap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rb .recap-chip {
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  color: var(--blue-text);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent);
  border-radius: var(--rad-2, 6px); padding: 5px 11px;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}

/* ── Lever preview (Phase 2, Mock 03) — calculator-only ──
   The chips are now BUTTONS (renderLeverChips); results.css styles .rb-levchip
   generically, so only the button reset + interactive states live here.
   NOTE: do NOT use `font: inherit` here — the shorthand resets font-size to the
   inherited (section body) size, clobbering results.css's `.rb-levchip`
   font-size:var(--fs-mono-xs) and blowing the chips up. Reset only the button
   chrome + family; let font-size fall through from .rb-levchip. */
#plan-lever-chips button.rb-levchip {
  appearance: none; -webkit-appearance: none;
  font-family: var(--ui); font-weight: 500; line-height: 1.15; cursor: pointer;
}
#plan-lever-chips .rb-levchip[aria-pressed="true"] {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
@media (prefers-reduced-motion: no-preference) {
  #plan-lever-chips .rb-levchip {
    transition: background var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
  }
  #plan-lever-chips .rb-levchip:active { transform: scale(0.96); }
}
.levp {
  margin-top: 14px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent);
  border-radius: var(--rad-3, 10px); padding: 18px 20px;
  box-shadow: var(--shadow-2);
}
.levp-eye {
  font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue-text); margin: 0;
}
.levp-delta { display: flex; align-items: center; gap: 16px; margin: 12px 0 6px; font-variant-numeric: tabular-nums; }
.levp-from { font-family: var(--frau); font-size: 30px; color: var(--ink-muted); }
.levp-to   { font-family: var(--frau); font-size: 30px; font-weight: 600; color: var(--ink); }
.levp-arr  { color: var(--blue-bright); font-size: 22px; }
.levp-of   { font-family: var(--ui); font-size: 13px; line-height: 1.35; color: var(--ink-muted); }
.levp-note { font-family: var(--ui); font-size: 14px; line-height: 1.55; color: var(--ink-dim); max-width: 64ch; margin: 6px 0 0; }
.levp-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.levp-apply {
  appearance: none; border: none; cursor: pointer; font: inherit;
  font-family: var(--ui); font-size: 13.5px; font-weight: 600;
  background: var(--blue); color: #fff; border-radius: var(--rad-2, 6px); padding: 9px 18px;
}
.levp-dismiss {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--ui); font-size: 13.5px; color: var(--ink-muted);
  background: transparent; border: 1px solid var(--rule); border-radius: var(--rad-2, 6px); padding: 9px 18px;
}
@media (prefers-reduced-motion: no-preference) {
  .levp { animation: fadeRise var(--dur-2) var(--ease-out); }
}

/* Desktop input rail (Phase 2, Mock 02) REMOVED 2026-07-08 (owner: not a fan).
   Results stay a single centered column at all widths; the collapsed summary bar
   is the inputs representation everywhere again. The `.rb-shell` wrapper and its
   markup were removed with it. The sticky score dock (below) is kept, still gated
   to 900–1199px so it never appears at the desktop width where the rail used to. */

/* ── Sticky score dock (Phase 2, Mock 02) — calculator-only ──
   Hidden until the hero scrolls off (the IntersectionObserver in renderScoreDock
   adds .docked). Desktop (≥900px) only; the shared header is not sticky, so
   top:0 sits at the viewport top once the header has scrolled away. The number
   is single-sourced on the STRICT s1.specProb — the same one the hero shows. */
.score-dock {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: none; align-items: center; gap: 18px;
  padding: 10px clamp(20px, 5vw, 60px);
  background: rgba(251,250,247,0.97); border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-1); pointer-events: none;
}
@media (prefers-color-scheme: dark) { .score-dock { background: rgba(22,20,15,0.97); } }
/* Only in the desktop band WITHOUT the input rail (900–1199px). At ≥1200px the
   sticky rail already keeps the plan on screen, so a second sticky element up top
   is redundant/distracting — the dock stays hidden there (the IO still toggles
   .docked, but it produces no box at that width). */
@media (min-width: 900px) and (max-width: 1199px) {
  .score-dock.docked { display: flex; pointer-events: auto; }
}
.sd-mini { flex: 0 0 200px; }
.sd-text { font-family: var(--ui); font-size: 14px; color: var(--ink-dim); display: flex; flex-direction: column; line-height: 1.3; }
.sd-text b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sd-caveat { font-size: 11px; font-weight: 400; color: var(--ink-muted); }
.sd-edit {
  appearance: none; cursor: pointer; font: inherit; font-family: var(--ui);
  margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--blue-text);
  background: transparent; border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
  border-radius: var(--rad-2, 6px); padding: 6px 13px; white-space: nowrap;
}
.score-dock.stale { filter: saturate(0.85); }
/* mini spectrum track inside the dock — mirrors the results track opacity ramp;
   marker left:{pct}% is set inline by renderScoreDock. */
.sd-track { position: relative; height: 10px; display: flex; border-radius: 3px; }
.sd-track b { height: 100%; }
.sd-track .sdt1 { width: 55%; background: color-mix(in srgb, var(--blue) 7%, transparent); }
.sd-track .sdt2 { width: 15%; background: color-mix(in srgb, var(--blue) 13%, transparent); }
.sd-track .sdt3 { width: 15%; background: color-mix(in srgb, var(--blue) 20%, transparent); }
.sd-track .sdt4 { width: 10%; background: color-mix(in srgb, var(--blue) 30%, transparent); }
.sd-track .sdt5 { width: 5%;  background: color-mix(in srgb, var(--blue) 40%, transparent); }
.sd-track .sd-target { position: absolute; left: 85%; top: -4px; bottom: -4px; border-left: 2px dashed var(--blue-text); }
.sd-track .sd-mark { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue); border: 2px solid var(--bg); transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgba(22,20,15,.25); }

/* ── Shared keyframes (results choreography) ── */
@media (prefers-reduced-motion: no-preference) {

  /* Section / element entrance: fade + gentle rise. */
  @keyframes fadeRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* SVG band draw-in: scale from the left edge (pair with
     transform-box:fill-box; transform-origin:left center on the target). */
  @keyframes scaleXIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* Line/track draw (pair with stroke-dasharray/-offset set inline). */
  @keyframes drawIn {
    to { stroke-dashoffset: 0; }
  }

  /* ── Results reveal choreography (first run only) ──
     setPhase('RESULTS',{animate:true}) stamps --sec-i (viewport-aware index) and
     .sec-reveal on the sections in view; below-fold sections appear instantly.
     Classes are applied synchronously — suite classList/display asserts unaffected. */
  .sec-reveal {
    animation: fadeRise var(--dur-3) var(--ease-out) both;
    animation-delay: calc(var(--sec-i, 0) * 90ms);
  }

  /* ── Spectrum-track draw-in (first run only) ──
     #hero-track exists only on the calculator page. Armed by renderTrack from the
     SAME in-view trigger as the hero count-up (animateHeroCount onStart), so the
     number and the track always move together. Bands sweep in left→right, the
     separators + labels fade in late, and the score marker pops last — the ONLY
     element allowed spring/overshoot (never a numeral). */
  @keyframes trackPop {
    from { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1.12); }
    to   { opacity: 1; transform: scale(1); }
  }
  #hero-track.track-draw rect {
    transform-box: fill-box; transform-origin: left center;
    animation: scaleXIn 420ms var(--ease-out) both;
  }
  #hero-track.track-draw rect:nth-of-type(2) { animation-delay: 60ms; }
  #hero-track.track-draw rect:nth-of-type(3) { animation-delay: 120ms; }
  #hero-track.track-draw rect:nth-of-type(4) { animation-delay: 180ms; }
  #hero-track.track-draw rect:nth-of-type(5) { animation-delay: 240ms; }
  #hero-track.track-draw line,
  #hero-track.track-draw text {
    animation: fadeRise 320ms var(--ease-out) 380ms both;
  }
  #hero-track.track-draw circle {
    transform-box: fill-box; transform-origin: center;
    animation: trackPop 360ms var(--ease-spring) 520ms both;
  }

  /* ── Stale results (inputs edited) ──
     results.css owns the base .rb.results-stale { opacity:.5 } (shared with the
     report and untouched). Calculator-only: ease the dim, add a MILD desaturation
     — never grayscale; the track band opacities and chart fills are data encoding. */
  main.rb,
  main.rb.results-stale {   /* results.css sets its own transition on .rb.results-stale — out-specify it */
    transition: opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
  }
  main.rb.results-stale { filter: saturate(0.85); }
}