/* ==========================================================================
   AUTH SHELL — the frame every account screen shares, plus the wizard

   Loaded by sign-up.html (create account), sign-in.html, forgot-password.html
   and onboarding.html (the three-step wizard). The shell, the card, the fields
   and the primary button are common to all four; the stepper, panels and
   option rows below are the wizard's alone and could move to their own sheet
   if this one grows.

   Ported from the Claude Design handoff (Bamboo Sign Up.dc.html). The mockup
   carried every value as a style="" attribute and its logic as an inline
   <script>; check-csp forbids both, so the values live here as classes and the
   behaviour lives in js/onboarding.js.

   The primary blue is the site's own #4d76ec, so the header bar, the CTA and
   every blue accent match the marketing pages, and the type is the site's pair
   too: Inter for text, Magra for the card's h1. The mockup's Manrope is gone.
   Only the lime is still the mockup's — #c8f53a against the site's #c6f91f —
   so the tokens stay scoped to this page under --su-*.
   ========================================================================== */

:root {
  --su-ink: #1b1f4b;
  /* Primary. The same pair the marketing pages use as --bam-blue /
     --bam-blue-hover, so the wizard reads as part of the site. */
  --su-blue: #4d76ec;
  --su-blue-hover: #3d63d4;
  --su-lime: #c8f53a;
  --su-lime-wash: #f7fce3;
  --su-muted: #7b819f;
  --su-muted-soft: #a0a6c2;
  /* Bluer than --su-muted: the line under each step's title, and the voice
     descriptions on step 3. The -soft pair is the sample line beneath those. */
  --su-muted-blue: #6270a8;
  --su-muted-blue-soft: #8892c2;
  --su-border: #e3e6f0;
  --su-border-strong: #c9cddd;
  --su-field: #fafbfd;
  --su-divider: #eef0f6;
  --su-header: var(--su-blue);
  --su-page: #101533;
  --su-icon-wash: #eef1fd;
  /* Shared so the full-bleed divider can cancel exactly this much padding. */
  /* The card is a hair cooler than pure white, so the white Google button and
     the checkbox faces read as raised out of it. */
  --su-card-face: #fcfdff;

  --su-card-pad: clamp(20px, 4vw, 32px);
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: Inter, sans-serif;
  color: var(--su-ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--su-blue); text-decoration: none; }
a:hover { color: var(--su-blue-hover); }

input,
textarea { font-family: inherit; }

input::placeholder,
textarea::placeholder { color: var(--su-muted-soft); }

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--su-blue);
  box-shadow: 0 0 0 3px rgba(77, 118, 236, 0.15);
}

/* Panels are display:flex, which would win over the hidden attribute. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Page shell — blurred storefront photo under a navy gradient
   -------------------------------------------------------------------------- */

.su-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--su-page);
  position: relative;
  /* Not for the photo any more — a fixed child is not clipped by this. It only
     keeps anything unexpectedly wide from scrolling the page sideways. */
  overflow: hidden;
}

/* Pinned to the viewport, not to the page.

   Positioned absolutely, these two took their height from .su-page, which
   grows with the card. A taller step re-solved background-size:cover against a
   taller box, so the photo shifted as you clicked from one screen to the next,
   and it scrolled away on a short window. Fixed, the box is the viewport, so
   the framing is decided once and holds.

   The size is 100vw/100vh rather than inset:0 because the containing block for
   a fixed element leaves out a classic scrollbar: a step long enough to scroll
   would otherwise narrow the box by ~15px and slide the image sideways. A
   fixed element wider than the viewport adds no scrollbar of its own.

   100vh, not 100dvh: on a phone the dynamic unit shrinks as the address bar
   collapses, which is exactly the movement being fixed here. */
.su-bg,
.su-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.su-bg {
  background-image: url("/assets/dispensary-bg.jpeg");
  background-size: cover;
  background-position: center;
  filter: blur(6px) saturate(0.85);
  /* Scaled past its box so the 6px blur has pixels to sample at the edges
     instead of fading out to the background. */
  transform: scale(1.05);
}

.su-overlay {
  background: linear-gradient(180deg, rgba(22, 30, 86, 0.78) 0%, rgba(16, 21, 51, 0.72) 100%);
}

/* --------------------------------------------------------------------------
   Header + brand block
   -------------------------------------------------------------------------- */

.su-header {
  position: relative;
  z-index: 1;
  background: var(--su-header);
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 4vw, 40px);
}

.su-header-logo { display: block; }

.su-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 5vh, 48px) 16px clamp(32px, 6vh, 64px);
  box-sizing: border-box;
}

.su-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(20px, 4vh, 36px);
  text-align: center;
}

.su-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.su-brand-logo { display: block; }

.su-wordmark {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.su-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--su-lime);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.su-card {
  width: 100%;
  max-width: 560px;
  background: var(--su-card-face);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: var(--su-card-pad);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- step indicator --- */

.su-stepper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.su-steps {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Figma builds the track as three equal Fill columns, each one a dot followed
   by its own line — so step 3 gets a trailing line too, and the dots sit
   left-aligned inside their column rather than spread end to end. The line
   keeps 8px clear of the dot on both sides: the gap before it, the margin
   after it, so it never touches the next column's dot. */
.su-step-group {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.su-step-line {
  flex: 1;
  margin-right: 8px;
  height: 2px;
  background: var(--su-border);
  border-radius: 1px;
}

.su-step-line.is-filled { background: var(--su-lime); }

.su-step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 800;
  background: #fcfdff;
  color: var(--su-muted-soft);
  border: 2px solid var(--su-border);
  box-shadow: 0 5px 15px rgba(23, 44, 74, 0.08);
}

.su-step.is-active {
  color: var(--su-blue);
  border-color: var(--su-lime);
}

/* The number is hidden here, so the colour only reaches the check mark. */
.su-step.is-done {
  background: var(--su-lime);
  border-color: var(--su-lime);
  color: var(--su-blue);
}

.su-step-check { display: none; }
.su-step.is-done .su-step-check { display: block; }
.su-step.is-done .su-step-num { display: none; }

/* Lifted out of the flow into the empty run after the third dot, so the three
   columns keep the full card width on step 3 exactly as on steps 1 and 2
   instead of being squeezed inward when the pill appears. */
.su-optional {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--su-lime);
  color: var(--su-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}

/* Below this the trailing run is shorter than the pill, which would have it
   sitting on top of the third dot. Put it back in the flow and accept the
   shorter track on small screens. */
@media (max-width: 520px) {
  .su-optional {
    position: static;
    transform: none;
  }
}

/* --- heading --- */

.su-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* The card's h1 is the one thing set in Magra, as the headings are on the
   marketing pages. Magra ships 400 and 700, so 700 is its bold — asking for
   800 would get the same face and risk a synthetic emboldening. */
.su-title {
  margin: 0;
  font-family: Magra, serif;
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.su-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--su-muted-blue);
  font-weight: 500;
}

/* Runs the full width of the card, so it cancels the card's own padding
   instead of stopping short of it like the rest of the content. */
.su-divider {
  height: 1px;
  background: var(--su-divider);
  margin-left: calc(-1 * var(--su-card-pad));
  margin-right: calc(-1 * var(--su-card-pad));
}

/* The rule above the buttons sits 28px under the step's last field and 8px
   over the buttons themselves: the card's 20px gap, plus 8 here. */
.su-panel + .su-divider { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Steps — each panel sets its own rhythm, as the mockup did
   -------------------------------------------------------------------------- */

.su-panel {
  display: flex;
  flex-direction: column;
}

.su-panel[data-step="1"] { gap: 18px; }
.su-panel[data-step="2"] { gap: 22px; }
.su-panel[data-step="3"] { gap: 20px; }

.su-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.su-input {
  height: 46px;
  border: 1px solid var(--su-border);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--su-ink);
  background: var(--su-field);
}

.su-textarea {
  resize: vertical;
  border: 1px solid var(--su-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--su-ink);
  background: var(--su-field);
}

.su-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.su-group-title {
  font-size: 14px;
  font-weight: 600;
}

/* The field labels on steps 2 and 3 run a notch larger than step 1's, which
   stay at the 13px the mockup used. */
/* --- the three option-row shapes share a base --- */

.su-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--su-ink);
  background: var(--su-field);
  border: 1.5px solid var(--su-border);
  box-sizing: border-box;
}

.su-option.is-on {
  background: var(--su-lime-wash);
  border-color: var(--su-lime);
}

/* call types: one line, the same 46px as an input */
.su-option--check {
  height: 46px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
}

/* schedules and voices: two stacked lines, so padded rather than fixed-height */
.su-option--row { padding: 12px 14px; }
.su-option--voice { align-items: flex-start; }

.su-option-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--su-icon-wash);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--su-blue);
}

/* The call-type and schedule titles are set in Magra, as on the marketing
   pages; their hints and the rest of the card stay Inter. */
.su-option-label {
  flex: 1;
  font-family: Magra, serif;
}

.su-checkbox {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid var(--su-border-strong);
}

/* Centred by transform rather than by flex: a 2px border leaves 14px of content
   for an odd-sized mark, and the half-pixel left over rounds to one side. */
.su-checkbox svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.su-option.is-on .su-checkbox {
  background: var(--su-blue);
  border-color: var(--su-blue);
}

.su-checkbox svg { display: none; }
.su-option.is-on .su-checkbox svg { display: block; }

.su-radio {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  border: 2px solid var(--su-border-strong);
}

.su-option.is-on .su-radio { border-color: var(--su-blue); }

/* 10px, not the mockup's 9: inside an 18px ring with a 2px border, an odd size
   lands on half pixels (4.5 to 13.5) and antialiases unevenly, which reads as
   off-centre at 1x. At 10px every edge is a whole pixel — 4 to 14, a 2px gap
   all round. */
.su-radio-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
}

.su-option.is-on .su-radio-dot { background: var(--su-blue); }

/* the voice rows sit the radio beside a two-line block, so it needs nudging
   down onto the first line's optical centre */
.su-option--voice .su-radio { margin-top: 2px; }

.su-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.su-option-name {
  font-size: 14px;
  font-weight: 700;
  font-family: Magra, serif;
}

.su-option-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--su-blue);
}

.su-voice-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* the name and its description share one line and wrap together */
.su-voice-head {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

/* Magra, like the option titles on step 2; the description beside it and the
   sample line below stay Inter. */
.su-voice-name {
  font-weight: 800;
  font-family: Magra, serif;
}

/* The middle dot between the voice's name and its description. */
.su-voice-sep {
  color: var(--su-muted-soft);
  font-weight: 600;
}

.su-voice-desc {
  font-weight: 600;
  color: var(--su-muted-blue);
  font-size: 13px;
}

.su-voice-sample {
  font-size: 12px;
  font-weight: 600;
  color: var(--su-muted-blue-soft);
  font-style: italic;
}

/* --- phone field with a leading icon --- */

.su-phone { position: relative; }

/* The path paints with currentColor, so this sets color rather than fill. */
.su-phone-icon {
  position: absolute;
  left: 14px;
  top: 15px;
  color: var(--su-blue);
}

.su-input--phone {
  width: 100%;
  box-sizing: border-box;
  padding: 0 14px 0 40px;
}

/* --------------------------------------------------------------------------
   Footer actions
   -------------------------------------------------------------------------- */

.su-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  /* 15px below the rule, the same as on the auth screens: the card's 20px
     gap pulled back by 5. */
  margin-top: -5px;
}

.su-spacer { flex: 1; }

.su-back,
.su-skip {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
}

.su-back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--su-blue);
  padding: 8px 4px;
}

.su-skip {
  color: var(--su-blue);
  padding: 8px 12px;
}

.su-next {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: var(--su-blue);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  transition: filter 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The colour is restated because on the create-account page this is an <a>,
   and the sheet's own a:hover rule outranks .su-next's white on specificity. */
.su-next:hover {
  filter: brightness(1.06);
  color: #fff;
}

.su-next:active {
  filter: brightness(0.92);
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .su-next { transition: none; }
  .su-next:active { transform: none; }
}