/* ════════════════════════════════════════════════════════════════════════════════════════════
   RECOVERY-WALK-DESIGN-0925 · fs-recover-0925.css — THE /recover WALK, ON THE SIGN-IN DOOR.
   DRAFT for P2 (ships as public_html/static/fs/css/fs-recover-0925.css). It loads AFTER
   fs-auth-0919.css and BEFORE the two accessibility sheets (fs-a11y-0918.css and
   fs-a11y-contrast-0918.css), so the accessibility floor still wins over this paint.

   NO NEW COLOUR. Every value is a token that fs-auth-0919.css already declares for dark, and
   re-declares for the light twin: --a-bg, --ap-bg, --ap-bg-2, --a-surface, --a-surface-2,
   --a-line, --a-line-2, --a-ink, --a-ink-2, --a-muted, --a-muted-2, --a-brand, --a-brand-h,
   --a-accent, --a-or, --fsc-ok, --fsc-warn, --a-err-*, --a-r (3px). So both schemes follow
   without a single theme rule in this file.

   NOT A CARD STACK. The choices are rows ruled by hairlines, the way a ledger is ruled. They are
   not rounded tiles. A 2px brand rule on the left marks hover and focus. That is the sign-in
   door's own vocabulary: the assent block's left rule and the ribbon's left rule.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the rail: seven segments, the founder's "seven questions in a row" ─────────────────────── */
.rw-rail{display:flex;gap:4px;margin:0 0 22px;padding:0;list-style:none}
.rw-rail li{flex:1;height:3px;border-radius:1px;background:var(--a-line)}
.rw-rail li.is-done{background:var(--a-brand)}
.rw-rail li.is-now{background:var(--a-accent)}
.rw-rail li.is-skip{background:repeating-linear-gradient(90deg,var(--a-line-2) 0 3px,transparent 3px 6px)}

/* ── the choices ────────────────────────────────────────────────────────────────────────────── */
.rw-choices{list-style:none;margin:0 0 4px;padding:0;border-top:1px solid var(--a-line)}
.rw-choices li{margin:0}
.rw-choice{display:grid;grid-template-columns:22px minmax(0,1fr) 16px;gap:14px;align-items:start;
  width:100%;margin:0;padding:15px 14px 15px 12px;text-align:left;cursor:pointer;
  background:transparent;color:var(--a-ink);font:inherit;
  border:0;border-bottom:1px solid var(--a-line);border-left:2px solid transparent;
  transition:background-color .12s,border-color .12s}
.rw-choice:hover{background:var(--a-surface);border-left-color:var(--a-brand)}
.rw-choice:focus-visible{outline:none;background:var(--a-surface);border-left-color:var(--a-brand);
  box-shadow:inset 0 0 0 1px var(--a-brand)}
.rw-choice svg{width:20px;height:20px;margin-top:1px;color:var(--a-accent);stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rw-choice .rw-go{width:16px;height:16px;margin-top:3px;color:var(--a-muted)}
.rw-choice:hover .rw-go{color:var(--a-accent)}
.rw-ct{display:block;font:600 14.5px/1.35 'Inter',sans-serif;color:var(--a-ink);letter-spacing:-.003em}
.rw-cd{display:block;margin-top:3px;font:400 12.75px/1.5 'Inter',sans-serif;color:var(--a-muted)}
.rw-choice.is-done{cursor:default;color:var(--a-muted)}
.rw-choice.is-done:hover{background:transparent;border-left-color:transparent}
.rw-choice.is-done svg{color:var(--fsc-ok)}
.rw-choice.is-done .rw-ct{color:var(--a-muted)}
.rw-tag{display:inline-block;margin-left:8px;padding:1px 6px;border:1px solid var(--a-line-2);border-radius:var(--a-r);
  font:600 10.5px/1.5 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--a-muted);vertical-align:1px}
.rw-choices--none{margin-top:18px}
.rw-choices--none .rw-choice svg{color:var(--a-muted)}

/* ── codes ──────────────────────────────────────────────────────────────────────────────────── */
.rw-pin input{height:62px;padding:0 0 0 .42em;text-align:center;letter-spacing:.42em;
  font:600 26px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums}
.rw-code input{height:56px;text-align:center;letter-spacing:.12em;
  font:600 20px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:lowercase}
.rw-echo{color:var(--a-ink-2);font-weight:600;overflow-wrap:anywhere}
.rw-nb{white-space:nowrap}

/* ── the secondary line under a button: "Try another way" · "Send a new code" ────────────────── */
.rw-alt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 16px;margin:16px 0 0;
  font:500 13px/1.5 'Inter',sans-serif;color:var(--a-muted)}
.rw-alt a,.rw-alt button{color:var(--a-accent);font:600 13px/1.5 'Inter',sans-serif;text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer}
.rw-alt a:hover,.rw-alt button:hover{text-decoration:underline;text-underline-offset:3px}
.rw-alt .is-wait{color:var(--a-muted);font-weight:500;cursor:default}
.rw-alt .is-wait:hover{text-decoration:none}

/* ── device approval: the number to pick on the other screen ─────────────────────────────────── */
.rw-number{display:flex;align-items:center;justify-content:center;width:136px;height:136px;margin:4px 0 20px;
  border:1px solid var(--a-line-2);border-left:2px solid var(--a-brand);border-radius:var(--a-r);
  background:var(--a-surface);font:700 64px/1 'Sora','Inter',sans-serif;letter-spacing:-.035em;
  color:var(--a-ink);font-variant-numeric:tabular-nums}
.rw-wait{display:flex;align-items:center;gap:10px;font:500 13px/1.5 'Inter',sans-serif;color:var(--a-muted)}
.rw-wait::before{content:"";flex:0 0 44px;height:2px;background:linear-gradient(90deg,var(--a-brand) 0 40%,var(--a-line) 40% 100%);
  background-size:200% 100%;animation:rw-scan 1.6s linear infinite}
@keyframes rw-scan{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.rw-wait::before{animation:none}}

/* ── the ledger: consequences before, and what happened after ────────────────────────────────── */
.rw-ledger{list-style:none;margin:0 0 4px;padding:0;border-top:1px solid var(--a-line)}
.rw-ledger li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:13px 0;border-bottom:1px solid var(--a-line)}
.rw-ledger svg{width:18px;height:18px;margin-top:1px;color:var(--a-accent);stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rw-ledger .is-ok svg{color:var(--fsc-ok)}
.rw-ledger .is-part svg{color:var(--fsc-warn)}
.rw-lt{display:block;font:600 14px/1.4 'Inter',sans-serif;color:var(--a-ink)}
.rw-ld{display:block;margin-top:2px;font:400 12.75px/1.55 'Inter',sans-serif;color:var(--a-muted)}
.rw-nudge{margin:18px 0 0;padding:12px 14px;border:1px solid var(--a-line);border-left:2px solid var(--a-brand);
  border-radius:var(--a-r);background:var(--a-surface);font:500 13px/1.55 'Inter',sans-serif;color:var(--a-ink-2)}
.rw-nudge a{color:var(--a-accent);font-weight:600;text-decoration:none}

/* ── the clock: the hour's wait, and the assisted road's 72 hours ───────────────────────────── */
.rw-clock{list-style:none;margin:0 0 6px;padding:0}
.rw-clock li{position:relative;padding:0 0 18px 30px;border-left:1px solid var(--a-line);margin-left:6px}
.rw-clock li:last-child{padding-bottom:2px;border-left-color:transparent}
.rw-clock li::before{content:"";position:absolute;left:-6px;top:3px;width:11px;height:11px;border-radius:2px;
  background:var(--a-bg);border:1px solid var(--a-line-2)}
.rw-clock li.is-now::before{background:var(--a-brand);border-color:var(--a-brand)}
.rw-clock b{display:block;font:600 11.5px/1.3 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--a-accent);margin-bottom:3px}
.rw-clock span{display:block;font:400 13.5px/1.55 'Inter',sans-serif;color:var(--a-ink-2)}
.rw-ref{font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--a-ink)}
.rw-promise{margin:14px 0 0;font:500 12.5px/1.55 'Inter',sans-serif;color:var(--a-muted)}
.af-q textarea.rw-what,.af-g textarea{width:100%;min-height:84px;padding:12px 14px;border:1px solid var(--a-line);
  border-radius:var(--a-r);background:var(--a-surface);color:var(--a-ink);font:500 14.5px/1.55 'Inter',sans-serif;resize:vertical;outline:none}
.af-g textarea:focus{border-color:var(--a-brand);background:var(--a-surface-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-brand) 26%,transparent)}
.af-help{display:block;margin-top:6px;font:400 12px/1.5 'Inter',sans-serif;color:var(--a-muted)}

/* ── the panel: the seven steps, with where you are ─────────────────────────────────────────── */
.ap--walk{justify-content:center;gap:34px;margin:auto 0}
.ap--walk .ap-seq li.is-done::before{background:color-mix(in srgb,var(--a-brand) 22%,transparent);border-color:var(--a-brand);color:var(--a-accent)}
.ap--walk .ap-seq li.is-now::before{background:var(--a-brand);border-color:var(--a-brand);color:#fff}
.ap--walk .ap-seq li.is-now .ap-q{color:var(--a-ink)}
.ap--walk .ap-seq li:not(.is-now):not(.is-done) .ap-q{color:var(--a-ink-2)}
.ap--walk .ap-seq li.is-skip .ap-q{color:var(--a-muted);text-decoration:line-through;text-decoration-color:var(--a-line-2)}
.ap--walk .ap-seq li.is-done{border-left-color:var(--a-brand)}
.ap-seq li.is-done:last-child{border-left-color:transparent}

@media (max-width:1180px){
  .ap--walk .ap-seq{display:none}           /* the rail on the form carries progress on a phone */
  .ap--walk{gap:0}
}
@media (max-width:600px){
  .rw-choice{padding:14px 10px 14px 8px;gap:12px}
  .rw-number{width:118px;height:118px;font-size:56px}
  .rw-pin input{font-size:24px}
}
@media (forced-colors:active){
  .rw-rail li{border:1px solid CanvasText}
  .rw-rail li.is-now,.rw-rail li.is-done{background:Highlight}
  .rw-choice{border:1px solid ButtonText}
}

/* a choice list followed directly by the footer: one rule, not two */
.rw-choices + .af-foot{border-top:0;padding-top:4px}

/* ════════════════════════════════════════════════════════════════════════════════════════════
   RECOVERY-WALK-0925 · the BUILD's additions to the design draft above (which ships byte-for-byte).
   Still no new colour — tokens only.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* The F mark shows on screen 1 and the two plain end states only (SPEC §3: "No af-fmark after screen 1").
   fs_auth_page() prints the mark on every non-registration door, so this sheet — which only /recover
   loads — hides the door's own mark, and the walk prints a second, identical one (.rw-fmark) exactly
   where the first sat on the screens that keep it. No :has(), so every browser gets the same page. */
.af-card > .af-fmark:not(.rw-fmark){display:none}

/* Secondary actions are real <button>s inside the one form (so "Try another way" keeps what passed and
   carries the walk's CSRF value) — styled as the draft's links. */
.rw-alt button[disabled]{color:var(--a-muted);cursor:default}
.rw-alt button:focus-visible{outline:2px solid var(--a-accent);outline-offset:3px;border-radius:2px}

/* Screen 6: the "Show" toggle sits inside the first field's frame, right-aligned. */
.af-g{position:relative}
.rw-show{position:absolute;right:10px;top:31px;height:30px;padding:0 10px;background:transparent;border:0;
  border-radius:var(--a-r);color:var(--a-accent);font:600 12.5px/1 'Inter',sans-serif;cursor:pointer}
.rw-show:hover{text-decoration:underline;text-underline-offset:3px}
.rw-show:focus-visible{outline:2px solid var(--a-accent);outline-offset:1px}
.af-g input[name="password"]{padding-right:64px}

/* The draft's ".rw-choices + .af-foot" rule assumed the foot inside the form; fs_auth_page() prints it right
   AFTER the form. The same rule for the real structure (browsers without :has() keep the door's own spacing). */
.af-card form:has(> .rw-choices:last-child) + .af-foot{border-top:0;padding-top:4px}
.rw-clock time{font:inherit;color:inherit}
/* "· optional" on A1: the door's .af-qopt is painted in the placeholder token (--a-or), 1.98:1 on the light twin
   (measured, proof/plates/CONTRAST.txt, first render). Text that carries meaning gets the muted token. */
.af-g .af-qopt{color:var(--a-muted)}
/* RECOVERY-CARDSTACK-0926 BEGIN cardstack ═══════════════════════════════════════════════════
   v4 — THE APPROVED SPLIT SCREEN (design/recover-flow-mock-APPROVED.html, the founder's pick,
   26 Sep late). No deck, no tilted cards: everything straight and level.
   LEFT  a light periwinkle → light pink panel (her palette 7: linear-gradient(160deg,#c9c6ff 0%,
         #dcd3ff 45%,#ffd1e4 100%) on #e6e4ff, a slow drifting blur, dark ink #1d1b3a) carrying the
         F mark, "Let's get you back in." + the reassurance line, the seven steps as a vertical
         TIMELINE (done = indigo #615dfa dot with a tick and an indigo line, current = an indigo
         ring), and "Stuck? Ask our team for help" at the bottom.
   RIGHT one question at a time: a thin gradient progress line at the top, a small "N → step"
         kicker, the large Sora question, a muted sub-line, an underline-style big input, choices
         as lettered rows (A/B/C…), a six-box code field, an indigo Continue with an arrow, quiet
         Back / Try another way, a strength meter on the new password, and on the last screen a
         gradient circle whose tick draws itself.
   PHONE the timeline collapses to a row of numbered dots at the top; one column.

   HOW, with no change to _auth.php's markup: the door prints the form column FIRST in the DOM and
   the brand panel second and orders them with CSS; this sheet re-orders them (panel left / top),
   which keeps the form first for the keyboard and a screen reader. The panel's seven steps are
   the door's own <ol class="ap-seq"> (states printed by recover.php); the line is each <li>'s
   border-left, so the indigo fill is simply every done step's border. The progress line, the
   "N → step" kicker, the done-mark and the help link are printed by recover.php (server-rendered,
   right with no script). The question's entrance is THIS SHEET's (v4.2): every child of the card but the progress line
   slides up and fades in on load, so it never waits for the script (a deferred script had let the question paint, vanish
   and fade back — a flash, measured in the v4 clip); fs-recover-cards-0926.js only adds the leave on submit and mirrors
   (transform + opacity; off under prefers-reduced-motion). The walk's fields, forms and words are the live ones.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --rw-ind:#615dfa;
  --rw-grad:linear-gradient(160deg,#f56890 0%,#9772be 48%,#1178fe 100%);   /* the F's gradient, the mock's --grad */
  --rw-pbg:#e6e4ff;                                                        /* her palette 7 */
  --rw-pgrad:linear-gradient(160deg,#c9c6ff 0%,#dcd3ff 45%,#ffd1e4 100%);
  --rw-pink:#1d1b3a;  --rw-pmut:#4a4870;  --rw-plink:#3f3bd6;  --rw-pline:rgba(29,27,58,.15);  --rw-pdim:rgba(29,27,58,.74);   /* 4.34:1 at .62 on the pastel (measured) — .74 clears 4.5 */
  --rw-r:14px; --rw-ease:cubic-bezier(.2,.8,.2,1);
  --rw-soft:color-mix(in srgb,var(--rw-ind) 10%,transparent);
  --rw-go-shadow:0 10px 24px rgba(97,93,250,.3);
}

/* ── the split ─────────────────────────────────────────────────────────────────────────────── */
.auth{min-height:100vh}
.auth-brand{order:0;flex:0 1 380px;min-width:300px;max-width:380px;box-sizing:border-box;position:relative;overflow:hidden;isolation:isolate;
  background:var(--rw-pbg);color:var(--rw-pink);border-left:0;border-right:1px solid var(--rw-pline);
  padding:36px 34px;display:flex;flex-direction:column}
.auth-brand::before{content:"";position:absolute;inset:-15%;z-index:-1;background:var(--rw-pgrad);filter:blur(40px);
  animation:rw-drift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes rw-drift{to{transform:translate(8%,-6%) rotate(8deg)}}
/* the mock's stage: the question vertically centred, LEFT-aligned at clamp(24px,7vw,110px) from the panel, 620 px wide at most */
.auth-form{order:1;flex:1 1 auto;min-width:0;position:relative;align-items:center;justify-content:flex-start;
  padding:56px clamp(24px,7vw,110px) 60px;background:var(--a-bg)}
.af-card{width:100%;max-width:620px;margin:0;position:static}
.af-card > .af-fmark{display:none}   /* the mark lives on the panel now (the door's hidden one and the walk's own) */

/* ── LEFT: the panel ───────────────────────────────────────────────────────────────────────── */
.ap--walk{justify-content:flex-start;gap:0;margin:0;max-width:none;height:100%}
.ap--walk .ap-head{margin:0 0 28px}
.ap--walk .ap-head::before{content:"";display:block;width:34px;height:54px;margin:0 0 42px;
  background:url('/assets/fs/focalshift-f-mark.svg') center/contain no-repeat}
.ap--walk .ap-h1{font:600 26px/1.25 'Sora','Inter',sans-serif;color:var(--rw-pink);margin:0 0 8px;max-width:none;letter-spacing:0}
.ap--walk .ap-p{font:400 15px/1.55 'Inter',sans-serif;color:var(--rw-pmut);margin:0;max-width:34ch}
.ap--walk .ap-p .rw-help{position:absolute;left:34px;bottom:34px;font:500 14px/1.5 'Inter',sans-serif;color:var(--rw-pmut);text-decoration:none}   /* the mock: at the panel's foot */
.ap--walk .ap-p .rw-help b{font-weight:600;color:var(--rw-plink)}
.ap--walk .ap-p .rw-help:hover b{text-decoration:underline;text-underline-offset:3px}
/* the timeline: each step's left border is the line; a done step's border is the indigo fill */
.auth-brand .ap--walk .ap-seq{counter-reset:aps;margin:0;padding:0;list-style:none}
.auth-brand .ap--walk .ap-seq li{counter-increment:aps;position:relative;margin:0 0 0 13px;padding:9px 0 9px 32px;
  border-left:2px solid var(--rw-pline);font:500 15px/1.4 'Inter',sans-serif;color:var(--rw-pdim);min-height:46px;display:flex;align-items:center}
.auth-brand .ap--walk .ap-seq li:last-child{border-left-color:transparent}
.auth-brand .ap--walk .ap-seq li.is-done{border-left-color:var(--rw-ind);color:rgba(29,27,58,.82)}
.auth-brand .ap--walk .ap-seq li.is-now{color:var(--rw-pink);font-weight:600}
.auth-brand .ap--walk .ap-seq li::before{content:counter(aps);position:absolute;left:-15px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;box-sizing:border-box;border-radius:50%;border:2px solid rgba(29,27,58,.3);background:var(--rw-pbg);
  color:var(--rw-pink);font:600 12px/24px 'Inter',sans-serif;text-align:center;box-shadow:none}
.auth-brand .ap--walk .ap-seq li.is-done::before{content:"";background:var(--rw-ind);border-color:var(--rw-ind)}
.auth-brand .ap--walk .ap-seq li.is-done::after{content:"";position:absolute;left:-6px;top:calc(50% - 8px);width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.auth-brand .ap--walk .ap-seq li.is-now::before{border-color:var(--rw-ind);box-shadow:0 0 0 6px rgba(97,93,250,.18)}
.auth-brand .ap--walk .ap-seq li.is-skip .ap-q{text-decoration:line-through;text-decoration-color:rgba(29,27,58,.35)}
/* every panel head on this page — the walk's AND the assisted road's plain .ap--quiet head ("A person can help.") — takes the
   panel's ink: the door paints --a-ink, light in the dark scheme, which measured 1.09:1 on the pastel */
.auth-brand .ap .ap-h1,.auth-brand .ap .ap-head .ap-h1,.auth-brand .ap--quiet .ap-head .ap-h1{color:var(--rw-pink)}
.auth-brand .ap .ap-p,.auth-brand .ap .ap-head .ap-p,.auth-brand .ap--quiet .ap-head .ap-p{color:var(--rw-pmut)}
.auth-brand .ap--quiet:not(.ap--walk){justify-content:flex-start;margin:0}
.auth-brand .ap--quiet:not(.ap--walk) .ap-head::before{content:"";display:block;width:34px;height:54px;margin:0 0 42px;background:url('/assets/fs/focalshift-f-mark.svg') center/contain no-repeat}
/* outranks the P2 sheet's .ap--walk .ap-seq li.is-now .ap-q / li:not(.is-now):not(.is-done) .ap-q (they paint the door's ink; this panel is pastel in BOTH schemes) */
.auth-brand .ap--walk .ap-seq li .ap-q,.auth-brand .ap--walk .ap-seq li.is-now .ap-q,.auth-brand .ap--walk .ap-seq li.is-done .ap-q,
.auth-brand .ap--walk .ap-seq li:not(.is-now):not(.is-done) .ap-q,.auth-brand .ap--walk .ap-seq li.is-skip .ap-q{display:block;font:inherit;color:inherit;margin:0}
.auth-brand .ap--walk .ap-seq .ap-d{display:none}   /* the mock's timeline names the steps only */

/* ── RIGHT: the stage ──────────────────────────────────────────────────────────────────────── */
.rw-prog{position:absolute;left:0;right:0;top:0;height:3px;background:var(--a-line)}
.rw-prog b{display:block;height:100%;background:var(--rw-grad)}
.rw-step{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--rw-ind);font:600 14px/1.4 'Inter',sans-serif}
.rw-step b{font-weight:600}
.rw-step .rw-arr{font-weight:500}
/* the mock's kicker is indigo on light (#615dfa, 4.71:1 on white); on the DARK ground that indigo measures 4.16:1, so the dark
   scheme takes the door's own accent token (#8b87ff) — v4.3, contrast measured on the aria-hidden text too */
:root[data-fs-auth="dark"] .rw-step{color:var(--a-accent)}
/* the door's "Account recovery · N of 7" kicker: visually hidden, STILL ANNOUNCED (v4.3: v4's `.rw-step ~ .af-kicker{display:none}`
   removed it from the accessibility tree too, while the visible "N → step" kicker is aria-hidden — a screen reader heard no step) */
.af-card .af-kicker{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;margin:-1px}
.af-card .af-h{font:600 clamp(28px,3.4vw,40px)/1.18 'Sora','Inter',sans-serif;letter-spacing:-.01em;margin:0 0 12px;color:var(--a-ink)}
.af-card .af-sub{font-size:18px;line-height:1.5;color:var(--a-muted);margin:0 0 30px;max-width:540px}
.af-card .af-sub a{color:var(--a-accent)}
.rw-rail{display:none}
/* the big underline field */
.af-g{margin-bottom:22px}
.af-g label{font:500 13px/1.4 'Inter',sans-serif;color:var(--a-muted);letter-spacing:0;margin-bottom:6px}
.af-card .af-g input,.af-card .af-q textarea,.af-card .af-q select{width:100%;height:auto;border:0;border-bottom:2px solid var(--a-line);border-radius:0;
  background:transparent;color:var(--a-ink);font:500 26px/1.3 'Sora','Inter',sans-serif;padding:8px 0;outline:none;box-shadow:none;transition:border-color .3s}
.af-card .af-g input:focus,.af-card .af-q textarea:focus{border-color:var(--rw-ind);background:transparent;box-shadow:none}
.af-card .af-g input::placeholder,.af-card .af-q textarea::placeholder{color:color-mix(in srgb,var(--a-muted) 55%,transparent)}
.af-card .af-q textarea{font-size:18px;min-height:72px}
.rw-show{top:auto;bottom:10px;right:0}
.af-g input[name="password"]{padding-right:56px}
/* the six-box code (with script: six boxes mirror the real field; without: the underline field) */
.rw-pin input,.rw-code input{text-align:left;letter-spacing:.12em;font:600 28px/1.3 'Sora','Inter',sans-serif;height:auto;padding:8px 0}
.rw-boxes{display:flex;gap:10px;margin:6px 0 2px;cursor:text}
.rw-boxes i{width:56px;height:66px;display:grid;place-items:center;font:600 28px 'Sora','Inter',sans-serif;font-style:normal;color:var(--a-ink);
  border:1.5px solid var(--a-line);border-radius:var(--rw-r);background:var(--a-surface);transition:border-color .2s,box-shadow .2s}
.rw-boxes i.is-on{border-color:var(--rw-ind);box-shadow:0 0 0 4px var(--rw-soft)}
.rw-pin.rw-js input{position:absolute;opacity:0;width:1px;height:1px;left:0;bottom:0;pointer-events:none}
.rw-pin.rw-js{position:relative}
/* the choices: lettered rows */
.af-card form{counter-reset:opt}
.rw-choices{border-top:0;display:grid;gap:10px;margin:0 0 6px}
.rw-choices--none{margin-top:18px}
.rw-choices li{counter-increment:opt}
.af-card .rw-choice{grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;
  border:1.5px solid var(--a-line);border-left-width:1.5px;border-radius:var(--rw-r);background:var(--a-surface);
  transition:border-color .2s,background-color .2s,transform .2s}
.af-card .rw-choice::before{content:counter(opt,upper-alpha);width:28px;height:28px;box-sizing:border-box;border-radius:8px;border:1.5px solid var(--a-line);
  display:grid;place-items:center;font:600 13px/1 'Inter',sans-serif;color:var(--a-muted);background:var(--a-bg)}
.af-card .rw-choice > svg:not(.rw-go){display:none}
.af-card .rw-choice .rw-go{display:none}
.af-card .rw-choice:hover,.af-card .rw-choice:focus-visible{border-color:var(--rw-ind);background:var(--rw-soft);transform:translateX(4px);box-shadow:none;border-left-color:var(--rw-ind)}
.af-card .rw-choice:hover::before,.af-card .rw-choice:focus-visible::before{border-color:var(--rw-ind);color:var(--rw-ind)}
.af-card .rw-choice:focus-visible{outline:2px solid var(--rw-ind);outline-offset:2px}
.af-card .rw-ct{font:500 17px/1.35 'Inter',sans-serif;color:var(--a-ink)}
.af-card .rw-cd{font:400 14px/1.45 'Inter',sans-serif;color:var(--a-muted);margin-top:2px}
.rw-choices + .af-foot,.af-card form:has(> .rw-choices:last-child) + .af-foot{border-top:0;padding-top:0}
/* the primary button, and the quiet links beside it */
.af-card .af-btn{width:auto;height:auto;padding:14px 22px;border-radius:12px;background:var(--rw-ind);color:#fff;font:600 16px/1 'Inter',sans-serif;
  margin-top:30px;gap:10px;box-shadow:var(--rw-go-shadow);transition:transform .2s,background-color .13s}
.af-card .af-btn:hover{transform:translateY(-2px);background:var(--a-brand-h)}
.af-card .af-btn:active{transform:none}
.rw-alt{margin-top:18px;font:500 14px/1.5 'Inter',sans-serif;color:var(--a-muted)}
.rw-alt a,.rw-alt button{font:500 14px/1.5 'Inter',sans-serif;color:var(--a-muted)}
.rw-alt a:hover,.rw-alt button:hover{color:var(--a-accent)}
.af-card .af-foot{margin-top:28px;font-size:14px;color:var(--a-muted);border-top:0;padding-top:0}
.af-card .af-foot a{font-weight:500;color:var(--a-muted)}
.af-card .af-foot a:hover{color:var(--a-accent)}
/* the strength meter (script) */
.rw-meter{height:6px;border-radius:6px;background:var(--a-line);margin:-8px 0 22px;overflow:hidden}
.rw-meter b{display:block;height:100%;background:var(--rw-grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
/* the error band, the ledgers, the clock, the device number — softened to the mock's radius */
.af-card .af-err{border-radius:var(--rw-r)}
.rw-ledger{border-top:0}
.rw-ledger li{padding:14px 0}
.rw-nudge,.rw-number{border-radius:var(--rw-r);border-left-width:1px}
.rw-number{border-color:var(--a-line);width:150px;height:150px;font-size:72px;background:var(--a-surface)}
.rw-clock b{color:var(--a-accent)}   /* the walk's own accent token: 4.16:1 with the indigo on the dark ground, measured */
/* the done screen: a gradient circle whose tick draws itself — drawn by TRANSFORM only: the svg (which clips its own content)
   slides in from the left as a window while the tick counter-slides by the same distance, so the tick stays still and is
   revealed left to right, stroke by stroke */
.rw-done{width:84px;height:84px;border-radius:50%;background:var(--rw-grad);display:grid;place-items:center;margin:0 0 24px;
  animation:rw-pop .7s cubic-bezier(.2,1.4,.3,1) both}
.rw-done svg{width:40px;height:40px;overflow:hidden;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;
  animation:rw-wipe .6s .35s ease both}
.rw-done svg path{transform-box:view-box;animation:rw-wipe-in .6s .35s ease both}
@keyframes rw-pop{from{transform:scale(.4);opacity:0}}
@keyframes rw-wipe{from{transform:translateX(-100%)}}
@keyframes rw-wipe-in{from{transform:translateX(100%)}}

/* ── motion: each question slides up and fades in; the one before slides up and out (transform + opacity only) ── */
@keyframes rw-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes rw-out{to{opacity:0;transform:translateY(-22px)}}
/* v4.2: the card's children move in step (one timing, one curve), the progress line stays put; the done-mark keeps its pop */
.af-card>:not(.rw-prog):not(.rw-done):not(script){animation:rw-in .55s var(--rw-ease) both}
.af-card.rw-leave>:not(.rw-prog):not(script){animation:rw-out .3s ease forwards}
@media (prefers-reduced-motion:reduce){
  .af-card>:not(.rw-prog):not(.rw-done):not(script),.af-card.rw-leave>:not(.rw-prog):not(script),
  .rw-done,.rw-done svg,.rw-done svg path,.auth-brand::before{animation:none}
  .af-card .rw-choice,.af-card .af-btn,.rw-meter b{transition:none}
}

/* ── the stacked layout: the panel becomes a row of numbered dots at the top; one column ─────── */
@media (max-width:1180px){
  .auth-brand{order:0;flex:0 0 auto;border-right:0;border-bottom:1px solid var(--rw-pline);padding:20px 20px 18px}
  .auth-form{order:1;padding:28px 22px 40px;align-items:flex-start}
  .af-card{margin:0}
  .ap--walk{height:auto;gap:0}
  .ap--walk .ap-head{display:none}
  .ap--walk .ap-p .rw-help{display:none}
  .auth-brand .ap--walk .ap-seq{display:flex;justify-content:space-between;margin:0;padding:0 4px}
  .auth-brand .ap--walk .ap-seq li{margin:0;padding:0;border:0;min-height:28px;width:28px;flex:0 0 28px;position:relative}
  .auth-brand .ap--walk .ap-seq li::before{position:static;transform:none}
  .auth-brand .ap--walk .ap-seq li.is-done::after{left:11px;top:8px}
  .auth-brand .ap--walk .ap-seq .ap-q{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rw-boxes i{width:44px;height:56px;font-size:24px}
  .af-card .af-h{font-size:28px}
  .af-card .af-sub{font-size:16px}
}
@media (max-width:600px){
  .auth-form{padding:22px 18px 36px}
  .rw-boxes{gap:7px}.rw-boxes i{width:calc((100% - 35px) / 6);max-width:44px;height:52px;font-size:22px}
  .af-card .af-g input{font-size:22px}
  .rw-number{width:120px;height:120px;font-size:56px}
}
@media (forced-colors:active){
  .auth-brand::before{display:none}
  .auth-brand .ap--walk .ap-seq li.is-done::before{background:Highlight;border-color:Highlight}
  .rw-prog b,.rw-done{background:Highlight}
  .af-card .rw-choice{border:1px solid ButtonText}
}
/* RECOVERY-CARDSTACK-0926 END cardstack */