/* ============================================================================
   BioProfile - the stepped-flow chrome, ONE component (T243, 2026-09-08).

   Jesse, 2026-09-07 21:12: the expert registration should be "a process like
   the mini test is now, where it's showing a progress bar ... one smooth
   process, page to page ... one step at a time, one thing at a time".

   The mini test's rail is app/css/scan-v2.css (.v2-rail), scoped under .v2 and
   welded to the scan's own stage. This file is that geometry lifted out of the
   scan and made a component of the design system, so the login flow, the level
   step and the expert registration draw the SAME rail and the SAME one-question
   screen, and the scan can adopt it later without a redraw. Nothing here is
   scoped to a page; every value is a token.

   The grammar:

     .bp-steps                 the flow
       .bp-steps__rail           the progress bar, sticky at the top
         .bp-steps__back           the way back, 44 px on a phone
         .bp-steps__track          the groove
           .bp-steps__fill           the gradient, width from --pct
         .bp-steps__pct            the number
       .bp-steps__stage          what is left of the screen
         .bp-steps__screen         ONE thing: eyebrow, prompt, help, body, foot
           .bp-steps__opts           a list of choices, one per row
             .bp-steps__opt            one choice (the level cards too)
   ========================================================================== */

.bp-steps {
  --rail-gradient: linear-gradient(90deg, var(--bp-lime) 0%, var(--bp-olive) 26%,
                   var(--bp-emerald) 52%, var(--bp-forest) 76%, var(--bp-teal) 100%);
  --steps-w: 560px;
}

/* ---- the rail ------------------------------------------------------------- */
/* The scan's own rail bleeds past its stage with a negative margin, because the
   scan owns the padding it is bleeding into. A component cannot know that: it is
   mounted inside whatever container a page gives it, and a negative margin there
   is a bar hanging out over the edge of a card. So this one sits INSIDE its
   container and spans it, which reads the same and can never spill. */
.bp-steps__rail { background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:19; width:100%;
  padding:var(--s-3) 0 var(--s-2); }
.bp-steps__rail[hidden] { display:none; }
.bp-steps__row { display:flex; align-items:center; gap:var(--s-3);
  max-width:var(--steps-w); margin:0 auto; }
.bp-steps__back { flex:none; width:28px; height:28px; display:grid; place-items:center;
  border-radius:var(--r-pill); color:var(--ink-2); border:0; background:none; cursor:pointer;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.bp-steps__back:hover { background:var(--paper-3); color:var(--ink); }
.bp-steps__back:focus-visible { outline:2px solid var(--bp-teal); outline-offset:2px; }
.bp-steps__back[disabled] { opacity:0; pointer-events:none; }
.bp-steps__back svg { width:17px; height:17px; }
.bp-steps__track { position:relative; flex:1 1 auto; height:8px; border-radius:var(--r-pill);
  background:var(--viz-track); }
.bp-steps__fill { position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pill);
  width:calc(var(--pct) * 1%); background-image:var(--rail-gradient); background-repeat:no-repeat;
  background-size:calc(10000% / max(var(--pct), 1)) 100%;
  transition:width var(--dur-3) var(--ease-out), background-size var(--dur-3) var(--ease-out); }
.bp-steps__pct { flex:none; min-width:42px; text-align:right; font-variant-numeric:tabular-nums;
  font-weight:var(--w-semi); font-size:var(--t-sm); color:var(--bp-teal); }
.bp-steps__of { max-width:var(--steps-w); margin:var(--s-2) auto 0; padding-left:40px;
  font-size:var(--t-xs); color:var(--ink-3); }
.bp-steps__of[hidden] { display:none; }

/* ---- the stage: one thing on it ------------------------------------------- */
/* The screen starts under the rail rather than floating in the middle of the
   viewport: a step usually holds one question, and centring one question leaves
   a hole between the bar and the words. */
.bp-steps__stage { display:flex; align-items:flex-start; min-height:60vh;
  padding:var(--s-8) 0 var(--s-10); }
.bp-steps__shell { max-width:var(--steps-w); margin:0 auto; width:100%; }
.bp-steps__screen { animation:bpStepIn var(--dur-3) var(--ease-out) both; }
@keyframes bpStepIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.bp-steps__screen.is-back { animation-name:bpStepInBack; }
@keyframes bpStepInBack { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

.bp-steps__eyebrow { display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--t-eyebrow); text-transform:uppercase; letter-spacing:var(--ls-caps);
  font-weight:var(--w-semi); color:var(--bp-teal); }
.bp-steps__prompt { font-size:1.375rem; line-height:var(--lh-snug); font-weight:var(--w-semi);
  color:var(--ink); margin-top:var(--s-3); text-wrap:pretty; }
.bp-steps__help { margin-top:var(--s-2); font-size:var(--t-sm); color:var(--ink-2);
  line-height:var(--lh-body); text-wrap:pretty; }
.bp-steps__body { margin-top:var(--s-6); display:grid; gap:var(--s-4); }
.bp-steps__body .field > .eyebrow { display:block; margin-bottom:var(--s-1); }
.bp-steps__body small { display:block; margin-top:var(--s-1); font-size:var(--t-xs);
  color:var(--ink-3); line-height:var(--lh-snug); }

/* ---- a list of choices ----------------------------------------------------- */
.bp-steps__opts { display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-6); }
.bp-steps__opt { position:relative; display:flex; align-items:center; gap:var(--s-3); width:100%;
  text-align:left; min-height:64px; padding:var(--s-4); border-radius:var(--r-lg);
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink); cursor:pointer;
  text-decoration:none; transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.bp-steps__opt:hover { border-color:var(--bp-teal); box-shadow:var(--sh-2); color:var(--ink); }
.bp-steps__opt:focus-visible { outline:2px solid var(--bp-teal); outline-offset:2px; }
.bp-steps__opt.is-on { border-color:var(--bp-teal); box-shadow:inset 0 0 0 1px var(--bp-teal), var(--sh-2);
  background:var(--bp-teal-08); }
.bp-steps__opt__ico { flex:none; width:38px; height:38px; border-radius:var(--r-pill);
  display:grid; place-items:center; background:var(--bp-teal-08); color:var(--bp-teal); }
.bp-steps__opt__ico svg { width:18px; height:18px; }
.bp-steps__opt.is-on .bp-steps__opt__ico { background:var(--bp-teal); color:#fff; }
.bp-steps__opt__text { flex:1 1 auto; min-width:0; }
.bp-steps__opt__text b { display:block; font-size:var(--t-body); font-weight:var(--w-semi);
  line-height:var(--lh-snug); }
.bp-steps__opt__text span { display:block; margin-top:2px; font-size:var(--t-sm); color:var(--ink-2);
  line-height:var(--lh-snug); }
.bp-steps__opt__mark { flex:none; width:22px; height:22px; display:grid; place-items:center;
  color:var(--ink-4); }
.bp-steps__opt__mark svg { width:18px; height:18px; }
.bp-steps__opt.is-on .bp-steps__opt__mark { color:var(--bp-teal); }
.bp-steps__tag { flex:none; font-size:var(--t-xs); font-weight:var(--w-semi);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--bp-teal);
  background:var(--bp-teal-08); border-radius:var(--r-pill); padding:4px 10px; }

/* ---- the foot: one forward action, always in the same place ---------------- */
.bp-steps__foot { display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center;
  margin-top:var(--s-6); }
.bp-steps__foot .btn { min-height:52px; }
.bp-steps__foot .btn--block { flex:1 1 100%; }
.bp-steps__skip { display:block; margin:var(--s-4) auto 0; min-height:44px; padding:0 var(--s-3);
  font-size:var(--t-sm); font-weight:var(--w-med); color:var(--ink-3); background:none; border:0;
  cursor:pointer; }
.bp-steps__skip:hover { color:var(--ink); }
.bp-steps__skip:focus-visible { outline:2px solid var(--bp-teal); outline-offset:2px; border-radius:var(--r-sm); }
.bp-steps__err { margin-top:var(--s-3); font-size:var(--t-sm); color:var(--alert);
  line-height:var(--lh-body); }
.bp-steps__err[hidden] { display:none; }
.bp-steps__note { margin-top:var(--s-4); padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  background:var(--bp-teal-08); font-size:var(--t-sm); line-height:var(--lh-body); color:var(--ink-2); }
.bp-steps__terms { margin-top:var(--s-3); font-size:var(--t-xs); color:var(--ink-3);
  line-height:var(--lh-body); }
.bp-steps__terms a { color:var(--bp-teal); font-weight:var(--w-semi); }

/* the 44 px rule at 390 and 375 (design-system/css/components.css 1141) */
@media (max-width:560px) {
  .bp-steps__back { width:44px; height:44px; }
  .bp-steps__opt { min-height:64px; }
  .bp-steps__foot .btn { min-height:52px; width:100%; }
}