/* =============================================================================
   25-start.css: /start/ signup refresh (WO-2026-3924, Design; follow-on to WO-2026-3905)

   TARGET: NEW partial
   sdpro-front/plugins/solodrive-front-css/assets/css/25-start.css, enqueued as the
   LAST entry of $files, after '24-managed-frame.css' (3905). See start/FOS-HANDOFF.md.

   STYLING ONLY. No selector here adds, removes, reorders or rewords a control. Every
   class it styles is emitted TODAY by class-sdfo-construction-sequence.php
   (origin/staging d932f32, which includes WO-2026-3937's split consent) or written by its JS. Nothing here is display:none on a
   field. The hidden location inputs (#sdcs-base-location-place-id / -lat / -lng) are
   type="hidden" and are not touched by any rule.

   SPECIFICITY. Every rule is prefixed `.sdcs.sd-r26-start` (two classes, same element).
   That outranks the inline <style> block in the PHP (L808-1034 at d932f32, prefixed
   `.sd-r26-start`, one class) even though the inline block comes LATER in the document.
   So this file works on its own, before or after FOS moves the inline block out
   (FOS-HANDOFF P1). No !important is used, except where an existing !important or an
   inline style is the thing being matched (none in this file).

   CONFIGURE-BEFORE-CSS: no WP setting, Customizer option or theme.json value reaches
   this markup. It is a shortcode renderer's own HTML, styled only by its own classes.
   The one config item that helps (Astra "underline content links", 3905 FOS-HANDOFF
   C1) is still recommended; section 4 below is the fallback if C1 is not done.

   TOKENS. Uses the --r26-* tokens from 14-refresh-2026-06.css (already loaded on
   /start/). Adds no colour except the three named below, all already in 3905:
     --clay-cta  #b8583a  filled-button fill (white on #c2613d = 4.14:1 fails AA)
     --sdcs-edge #8a90a4  = --r26-faint, used as the 3:1 input border (WCAG 1.4.11)
     --sdcs-err  #b3402a  the error red the inline block already uses
   No web font, no image, no request. The chevron and spinner are CSS / data: URI.
   ============================================================================= */

/* ------------------------------------------------------------------ 0. scope */
.sdcs.sd-r26-start {
  --clay-cta: #b8583a;
  --sdcs-edge: #8a90a4;
  --sdcs-err: #b3402a;
  --sdcs-err-soft: #fbece8;
  --sdcs-focus: 0 0 0 2px var(--r26-surface), 0 0 0 4px var(--clay-cta);
  --sdcs-tap: 44px;
  --sdcs-hdr: 76px;            /* sticky .sdc header (64-68px) + breathing room */
  --sdcs-sub: 0;               /* progress inside step 2, 0..1 (section 2) */
  max-width: 880px;
  padding: 20px 20px 72px;
}

/* ------------------------------------------------------------------ 1. top of page */
/* The in-page row ("SOLODRIVE.PRO  Setting up. About two minutes.") stays, smaller and
   on one line. It sits under the global header that now shows the wordmark too:
   Mike's Q2 decides whether the in-page wordmark stays (it is kept here). */
.sdcs.sd-r26-start .sdcs-chrome {
  align-items: center; gap: 8px 16px;
  padding-bottom: 12px; margin-bottom: 20px;
}
.sdcs.sd-r26-start .sdcs-chrome .brand { font-size: 15px; }
.sdcs.sd-r26-start .sdcs-chrome .fine { font-size: 13px; color: var(--r26-muted); }

.sdcs.sd-r26-start .sdcs-board { margin-bottom: 20px; }
.sdcs.sd-r26-start .sdcs-board .eyebrow { margin-bottom: 0; }
.sdcs.sd-r26-start .sdcs-board__h1 { font-size: clamp(27px, 7.4vw, 42px); margin: 6px 0 8px; }
.sdcs.sd-r26-start .sdcs-board .lead { font-size: 16px; line-height: 1.5; color: var(--r26-muted); }

/* After step 1 the board has done its job: the heading, eyebrow and lead fold away
   VISUALLY so the card sits under the stepper, and they stay in the accessibility tree
   (clip, not display:none). Nothing is reworded or deleted. Mike's Q3. */
.sdcs.sd-r26-start:has(.sdcs-steps__i[data-step="1"]:not(.is-on)) .sdcs-board :is(.eyebrow, .sdcs-board__h1, .lead) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ 2. the stepper */
/* Three steps on one connected track: a numbered dot, the step name under it, and a
   rail between dots. It fits one line at 360px (today it wraps to two rows).
   The rail from dot 2 to dot 3 FILLS as the driver moves through step 2's screens, so
   seven screens under one step still read as progress. Driven by which screen is
   visible (:has), so it needs no markup or JS change. */
.sdcs.sd-r26-start .sdcs-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; max-width: 440px; margin: 18px auto 0; padding: 0;
}
.sdcs.sd-r26-start .sdcs-steps__i {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 4px; border: 0; border-radius: 0; background: none;
  font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center;
  color: var(--r26-muted);
}
.sdcs.sd-r26-start .sdcs-steps__n {
  position: relative; z-index: 1;
  width: 30px; height: 30px; font-size: 13px; font-weight: 700;
  background: var(--r26-surface); color: var(--r26-muted);
  box-shadow: inset 0 0 0 2px var(--sdcs-edge);
}
.sdcs.sd-r26-start .sdcs-steps__i.is-on { color: var(--r26-ink); font-weight: 700; }
.sdcs.sd-r26-start .sdcs-steps__i.is-on .sdcs-steps__n {
  background: var(--clay-cta); color: #fff;
  box-shadow: 0 0 0 4px var(--r26-clay-soft);
}
.sdcs.sd-r26-start .sdcs-steps__i.is-done { color: var(--r26-ink); }
.sdcs.sd-r26-start .sdcs-steps__i.is-done .sdcs-steps__n { background: var(--r26-navy); color: #fff; box-shadow: none; }

/* the rail: drawn by each step from the previous dot's centre to its own */
.sdcs.sd-r26-start .sdcs-steps__i + .sdcs-steps__i::before,
.sdcs.sd-r26-start .sdcs-steps__i + .sdcs-steps__i::after {
  content: ""; position: absolute; top: 14px; right: 50%; width: 100%; height: 3px;
  border-radius: 3px;
}
.sdcs.sd-r26-start .sdcs-steps__i + .sdcs-steps__i::before { background: var(--r26-paper-2); }
.sdcs.sd-r26-start .sdcs-steps__i + .sdcs-steps__i::after {
  background: var(--r26-navy);
  transform-origin: left center; transform: scaleX(0);
  transition: transform .35s ease;
}
/* rail 1 -> 2 is full once step 2 is reached */
.sdcs.sd-r26-start .sdcs-steps__i[data-step="2"]:is(.is-on, .is-done)::after { transform: scaleX(1); }
/* rail 2 -> 3 fills with progress inside step 2, and is full at step 3 */
.sdcs.sd-r26-start .sdcs-steps__i[data-step="3"]::after { transform: scaleX(var(--sdcs-sub)); background: var(--clay-cta); }
.sdcs.sd-r26-start .sdcs-steps__i[data-step="3"].is-on::after { transform: scaleX(1); background: var(--r26-navy); }

/* Which step-2 screen is showing, in typed-email flow order 9 7 8 2 3 4 5.
   Midpoints of seven slices, so the rail is never empty in step 2 and never full
   before step 3. On the Google/Meta path screen 9 is skipped and the rail simply
   starts at its second slice. */
.sdcs.sd-r26-start:has(#sdcs-phase-9:not(.sdcs-phase--hidden)) { --sdcs-sub: .071; }
.sdcs.sd-r26-start:has(#sdcs-phase-7:not(.sdcs-phase--hidden)) { --sdcs-sub: .214; }
.sdcs.sd-r26-start:has(#sdcs-phase-8:not(.sdcs-phase--hidden)) { --sdcs-sub: .357; }
.sdcs.sd-r26-start:has(#sdcs-phase-2:not(.sdcs-phase--hidden)) { --sdcs-sub: .5; }
.sdcs.sd-r26-start:has(#sdcs-phase-3:not(.sdcs-phase--hidden)) { --sdcs-sub: .643; }
.sdcs.sd-r26-start:has(#sdcs-phase-4:not(.sdcs-phase--hidden)) { --sdcs-sub: .786; }
.sdcs.sd-r26-start:has(#sdcs-phase-5:not(.sdcs-phase--hidden)) { --sdcs-sub: .929; }
/* advanceToPhase() hides the old screen 1.5s before it shows the next one. During that
   gap no screen matches, --sdcs-sub falls to 0, and the rail would drop and refill.
   A 2s delay on the way DOWN holds it; the next screen's rule re-targets the transition
   before the delay runs out. */
.sdcs.sd-r26-start:not(:has(.sdcs-phase:not(.sdcs-phase--hidden))) .sdcs-steps__i[data-step="3"]::after {
  transition-delay: 2s;
}

/* ------------------------------------------------------------------ 3. the card */
.sdcs.sd-r26-start .sdcs-stage { margin-top: 20px; }
.sdcs.sd-r26-start :is(.sdcs-scr, .sdcs-phase) {
  max-width: 560px;
  padding: clamp(22px, 5.6vw, 40px) clamp(20px, 5.6vw, 40px);
  border-radius: 22px;
  /* advanceToPhase() / returnToPhase() call scrollIntoView({block:'start'}); without
     this the card's top lands under the sticky header. */
  scroll-margin-top: var(--sdcs-hdr);
}
/* "Step 2", "Step 2 · set up your storefront": an eyebrow, 6.1:1 on white (was --r26-faint, 3.2:1) */
.sdcs.sd-r26-start .sdcs-scr__no {
  font-family: var(--r26-sans); font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--r26-clay-ink);
}
.sdcs.sd-r26-start :is(.sdcs-scr__h, .sdcs-phase-title) { font-size: clamp(24px, 6.4vw, 30px); margin: 6px 0 8px; text-wrap: balance; }
.sdcs.sd-r26-start :is(.sdcs-scr__body, .sdcs-phase-note) { font-size: 15.5px; margin-bottom: 20px; }
.sdcs.sd-r26-start .sdcs-dest { font-weight: 600; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ 4. buttons */
/* Astra prints `.ast-single-post .entry-content a{text-decoration:underline}` (3905
   FOS-HANDOFF C1). /start/ has .ast-single-post on <body>, so every <a> button here is
   underlined today (measured: Continue with Google, Continue with Meta). */
body .sdcs.sd-r26-start a:is(.idbtn, .sdcs-btn),
body .sdcs.sd-r26-start a:is(.idbtn, .sdcs-btn):hover { text-decoration: none; }

/* entry routes: same buttons as the home hero (14-refresh .idbtn), sized for thumbs */
.sdcs.sd-r26-start .sdcs-idcta { gap: 10px; margin-bottom: 20px; }
.sdcs.sd-r26-start .idbtn { min-height: 52px; font-size: 16px; font-weight: 600; border-color: var(--sdcs-edge); }
.sdcs.sd-r26-start .idbtn--primary { background: var(--clay-cta); border-color: var(--clay-cta); color: #fff; }
.sdcs.sd-r26-start .idbtn--primary:hover { background: var(--r26-clay-hover); border-color: var(--r26-clay-hover); }
.sdcs.sd-r26-start .sdcs-or { font-size: 13px; color: var(--r26-muted); margin: 0 0 18px; }

/* primary action */
.sdcs.sd-r26-start .sdcs-btn {
  min-height: 54px; margin-top: 8px; font-size: 16px;
  background: var(--clay-cta); color: #fff;
  box-shadow: 0 8px 20px rgba(184, 88, 58, .26);
}
.sdcs.sd-r26-start .sdcs-btn:hover { background: var(--r26-clay-hover); color: #fff; }
/* Disabled (empty code, "Working…") reads as NOT YET, not as a faded clay button
   with white text at ~1.8:1. */
.sdcs.sd-r26-start .sdcs-btn:disabled {
  opacity: 1; background: var(--r26-paper-2); color: var(--r26-muted);
  box-shadow: inset 0 0 0 1px var(--r26-line-2);
}

/* secondary actions: Resend the code, Use a different email / number.
   Text buttons, ink with a clay underline, 44px tall. */
.sdcs.sd-r26-start .sdcs-linkline { margin: 6px 0 0; font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; }
.sdcs.sd-r26-start .sdcs-linkline + .sdcs-linkline { margin-top: 0; }
/* the account_exists branch hides the Resend line by setting [hidden] on this <p>;
   display:flex above would beat the UA rule without this */
.sdcs.sd-r26-start .sdcs-linkline[hidden] { display: none; }
.sdcs.sd-r26-start .sdcs-linkbtn {
  display: inline-flex; align-items: center; min-height: var(--sdcs-tap); padding: 0 2px;
  font-size: 14.5px; font-weight: 600; color: var(--r26-ink);
  text-decoration: underline; text-decoration-color: var(--clay-cta);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.sdcs.sd-r26-start .sdcs-linkbtn:hover { color: var(--r26-clay-ink); }
.sdcs.sd-r26-start .sdcs-linkbtn:disabled { color: var(--r26-muted); text-decoration: none; }
.sdcs.sd-r26-start .sdcs-linkhint { color: var(--r26-muted); }
.sdcs.sd-r26-start :is(.sdcs-recover__act, .sdcs-slug-recover__act) {
  display: inline-flex; align-items: center; min-height: var(--sdcs-tap);
  font-weight: 600; text-decoration-color: var(--clay-cta); text-underline-offset: 4px;
}

/* ------------------------------------------------------------------ 5. fields */
/* One column at every width. The two-column grid was built for name + phone side by
   side; WO-2026-2379 moved phone to screen 3, which left "Operator name" alone at half
   width on desktop (measured, 1280). */
.sdcs.sd-r26-start .sdcs-form { grid-template-columns: 1fr; gap: 16px; }
.sdcs.sd-r26-start .sdcs-field-group { margin-bottom: 16px; }
.sdcs.sd-r26-start label { font-size: 14px; font-weight: 600; }
/* "(optional, …)" was --r26-faint, 3.2:1 on white , which failed AA for text; now --r26-muted, 6.2:1 */
.sdcs.sd-r26-start .sdcs-optional { color: var(--r26-muted); }

.sdcs.sd-r26-start :is(input, textarea, select) {
  min-height: 50px;
  font-size: 16px;               /* 15px made iOS Safari zoom the page on focus */
  background: var(--r26-surface);
  border: 1px solid var(--sdcs-edge);   /* was rgba .16 = ~1.4:1, fails WCAG 1.4.11 */
  border-radius: 12px;
}
.sdcs.sd-r26-start textarea { min-height: 96px; line-height: 1.45; }
.sdcs.sd-r26-start :is(input, textarea, select):focus { border-color: var(--clay-cta); box-shadow: var(--sdcs-focus); }
.sdcs.sd-r26-start :is(input, textarea)::placeholder { color: #7a8095; }   /* 3.9:1, was 3.2:1 (placeholder text, not a label) */
.sdcs.sd-r26-start .sdcs-divider { margin: 4px 0; }

/* the two 6-digit code fields: one input (autocomplete="one-time-code" keeps working),
   set large and spaced so six digits read as six boxes' worth */
.sdcs.sd-r26-start .sdcs-code-input {
  min-height: 64px; font-size: 28px; font-weight: 600;
  letter-spacing: .42em; padding-left: calc(14px + .42em);
  font-variant-numeric: tabular-nums;
}
.sdcs.sd-r26-start .sdcs-code-input::placeholder { color: #c9ccd6; letter-spacing: .42em; }

/* SMS (ride-alert) consent. POSITION, ORDER AND WORDING UNCHANGED: it stays an unchecked,
   standalone checkbox under the number and above the OTP disclosure and "Text me the code",
   never merged with anything. (Since WO-2026-3937 it no longer gates the code send; this
   file neither depends on that nor changes it.)
   Only the hit area, spacing and contrast change. The whole row is the label's tap target. */
.sdcs.sd-r26-start .sdcs-consent {
  gap: 12px; margin: 14px 0 6px; padding: 12px 14px;
  border: 1px solid var(--r26-line-2); border-radius: 12px; background: var(--r26-surface-soft);
}
.sdcs.sd-r26-start .sdcs-consent input[type="checkbox"] {
  width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; padding: 0;
  accent-color: var(--clay-cta); border-radius: 4px;
}
.sdcs.sd-r26-start .sdcs-consent input[type="checkbox"]:focus-visible { box-shadow: var(--sdcs-focus); }
.sdcs.sd-r26-start .sdcs-consent label { font-size: 13.5px; font-weight: 400; line-height: 1.5; min-height: 24px; }
.sdcs.sd-r26-start .sdcs-consent a { text-decoration-color: var(--clay-cta); text-underline-offset: 3px; font-weight: 600; }

/* The OTP disclosure (WO-2026-3937, "We'll text a one-time code to this number…").
   It is the disclosure FOR the button directly under it, so it sits tight to that button,
   set apart from the optional ride-alert box above. Ink, not grey: a disclosure has to be
   readable (it was 12px; now 13.5px). 3937's rule is marked "placeholder styling, 3924
   owns the look"; this is that look. Position and wording untouched. */
.sdcs.sd-r26-start .sdcs-otp-note {
  margin: 18px 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--r26-ink);
}
.sdcs.sd-r26-start .sdcs-otp-note a { color: var(--r26-ink); font-weight: 600; text-decoration-color: var(--clay-cta); text-underline-offset: 3px; }
.sdcs.sd-r26-start .sdcs-otp-note + .sdcs-btn { margin-top: 10px; }

/* handle row: prefix + input as one control, with a visible focus ring
   (today `.sdcs-slug-row input:focus{box-shadow:none}` leaves NO focus indicator) */
.sdcs.sd-r26-start .sdcs-slug-row { border: 1px solid var(--sdcs-edge); border-radius: 12px; background: var(--r26-surface); margin-bottom: 10px; }
.sdcs.sd-r26-start .sdcs-slug-row:focus-within { border-color: var(--clay-cta); box-shadow: var(--sdcs-focus); }
.sdcs.sd-r26-start .sdcs-slug-prefix { padding: 0 2px 0 12px; background: var(--r26-paper-2); color: var(--r26-muted); font-size: 13px; }
.sdcs.sd-r26-start .sdcs-slug-row input { min-height: 52px; border: 0; background: var(--r26-surface); padding-left: 8px; color: var(--r26-ink); font-weight: 600; }
.sdcs.sd-r26-start .sdcs-slug-row input:focus { box-shadow: none; }
/* Phones: the 20-character prefix left ~90px for the handle at 390 (measured: the handle
   is cut off after 7 characters). The prefix becomes a strip ON TOP of the same control, so
   the full URL still reads left to right, top to bottom, and the handle gets the full width. */
@media (max-width: 520px) {
  .sdcs.sd-r26-start .sdcs-slug-row { flex-direction: column; }
  .sdcs.sd-r26-start .sdcs-slug-prefix { padding: 8px 12px 6px; font-size: 12.5px; }
  .sdcs.sd-r26-start .sdcs-slug-row input { padding-left: 12px; }
}
/* availability hint states (class set by setSlugHint(); text unchanged) */
.sdcs.sd-r26-start .sdcs-slug-hint { font-size: 14px; line-height: 1.45; margin: 0 0 16px; min-height: 1.45em; }
.sdcs.sd-r26-start .sdcs-slug-hint--ok { color: var(--r26-green); font-weight: 600; }
.sdcs.sd-r26-start .sdcs-slug-hint--taken { color: var(--sdcs-err); font-weight: 600; }
.sdcs.sd-r26-start .sdcs-slug-hint--warn { color: var(--r26-ink); }
/* "Checking availability…" carries no modifier: a quiet spinner marks it.
   The neutral class is shared with "At least 3 characters.", so the spinner keys off
   [aria-busy] if FOS adds it (FOS-HANDOFF P4); until then it is inert. */
.sdcs.sd-r26-start .sdcs-slug-hint[aria-busy="true"]::before,
.sdcs.sd-r26-start .sdcs-loading::before {
  content: ""; display: inline-block; vertical-align: -2px; width: 12px; height: 12px; margin-right: 8px;
  border: 2px solid var(--r26-line-2); border-top-color: var(--clay-cta); border-radius: 50%;
  animation: sdcs-spin .8s linear infinite;
}
@keyframes sdcs-spin { to { transform: rotate(360deg); } }
.sdcs.sd-r26-start .sdcs-slug-recover { margin: -10px 0 12px; }

/* storefront preview card on screen 5: unchanged content, frame matched to the card */
.sdcs.sd-r26-start .sdcs-preview { border-radius: 16px; margin-bottom: 20px; box-shadow: var(--r26-shadow-card); }
.sdcs.sd-r26-start .sdcs-preview__row { color: var(--r26-ink); }
.sdcs.sd-r26-start .sdcs-preview__cta { color: var(--r26-muted); }

/* rates: two columns from 340px up (the four values are short numbers) */
@media (min-width: 340px) {
  .sdcs.sd-r26-start .sdcs-pricing-grid { grid-template-columns: 1fr 1fr; gap: 0 12px; }
}
.sdcs.sd-r26-start .sdcs-pricing-grid input { font-variant-numeric: tabular-nums; }
/* a label that wraps ("Per-minute rate ($)" at 390) must not push its input out of line */
.sdcs.sd-r26-start .sdcs-pricing-grid .sdcs-field-group { justify-content: flex-end; }
/* live fare preview: a receipt line, ink on a teal rule */
.sdcs.sd-r26-start .sdcs-fare-preview {
  font-size: 15px; font-weight: 600; color: var(--r26-ink);
  background: var(--r26-surface-soft); border: 0; border-left: 3px solid var(--r26-teal-ink);
  border-radius: 0 12px 12px 0; padding: 12px 14px; margin: 0 0 16px;
}

/* brand: larger swatch, select with a drawn chevron (data: URI, no request) */
.sdcs.sd-r26-start .sdcs-color-row { gap: 10px; }
.sdcs.sd-r26-start .sdcs-color-row input[type="color"] {
  width: 50px; height: 50px; min-height: 0; padding: 4px; border-radius: 12px; background: var(--r26-surface);
}
.sdcs.sd-r26-start .sdcs-color-row input[type="text"] { font-family: var(--r26-mono); text-transform: lowercase; }
.sdcs.sd-r26-start select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314182b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
/* screen 8: the two selects sit side by side when there is room */
@media (min-width: 340px) {
  .sdcs.sd-r26-start #sdcs-phase-5 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .sdcs.sd-r26-start #sdcs-phase-5 > * { grid-column: 1 / -1; }
  .sdcs.sd-r26-start #sdcs-phase-5 > .sdcs-field-group:has(select) { grid-column: auto; }
  .sdcs.sd-r26-start #sdcs-phase-5.sdcs-phase--hidden { display: none; }
}

/* ------------------------------------------------------------------ 6. messages */
/* errors: an inline alert block when there is text, nothing when empty */
.sdcs.sd-r26-start .sdcs-error { margin: 0; min-height: 0; font-size: 14px; line-height: 1.45; color: var(--sdcs-err); }
.sdcs.sd-r26-start .sdcs-error:not(:empty) {
  margin: 4px 0 12px; padding: 10px 12px 10px 14px;
  background: var(--sdcs-err-soft); border-left: 3px solid var(--sdcs-err); border-radius: 0 10px 10px 0;
  font-weight: 500;
}
.sdcs.sd-r26-start .sdcs-spamnote { font-size: 14px; }

/* "account exists": a calm way in, not an error. Navy action, because this person is
   already a customer (same reasoning as the signed-in Dashboard pill in 3905). */
.sdcs.sd-r26-start .sdcs-exists:not([hidden]) {
  margin: 4px 0 14px; padding: 16px;
  background: #eef0f6; border: 1px solid rgba(18, 27, 54, .14); border-radius: 14px;
}
.sdcs.sd-r26-start .sdcs-exists__msg { font-size: 16px; font-weight: 600; line-height: 1.4; }
.sdcs.sd-r26-start .sdcs-exists__hint { font-size: 14px; color: var(--r26-ink); overflow-wrap: anywhere; }
.sdcs.sd-r26-start .sdcs-exists .sdcs-btn { background: var(--r26-navy); box-shadow: 0 8px 20px rgba(18, 27, 54, .22); }
.sdcs.sd-r26-start .sdcs-exists .sdcs-btn:hover { background: var(--r26-navy-2); }

/* the status line. ⚠ #sdcs-status carries an INLINE style="display:none" in the PHP
   (L390) that nothing ever removes, so setStatus() has never been visible. This rule
   is ready and inert. Whether it should show is Mike's Q5; un-hiding it is FOS P3. */
.sdcs.sd-r26-start #sdcs-status {
  width: fit-content; max-width: 560px; margin: 0 auto 14px; padding: 8px 14px;
  font-size: 14px; font-weight: 600; color: var(--r26-navy);
  background: rgba(43, 154, 134, .12); border-radius: 999px;
}

/* screen 9 */
.sdcs.sd-r26-start .sdcs-stripe-card { border-radius: 14px; }
.sdcs.sd-r26-start .sdcs-stripe-card__copy { font-size: 14px; color: var(--r26-ink); line-height: 1.5; }
.sdcs.sd-r26-start .sdcs-inspection { border: 1px solid var(--r26-line); border-radius: 14px; padding: 4px 14px; margin-bottom: 14px; }
.sdcs.sd-r26-start .sdcs-inspection:has(.sdcs-loading) { padding: 12px 14px; }
.sdcs.sd-r26-start .sdcs-loading { margin: 0; color: var(--r26-muted); }
.sdcs.sd-r26-start .sdcs-inspection-row { font-size: 14px; padding: 10px 0; align-items: baseline; }
.sdcs.sd-r26-start .sdcs-inspection-value { overflow-wrap: anywhere; }
/* phones: label over value, so an email or a handle URL is not broken mid-word in a 60% column */
@media (max-width: 520px) {
  .sdcs.sd-r26-start .sdcs-inspection-row { flex-direction: column; gap: 2px; align-items: flex-start; }
  .sdcs.sd-r26-start .sdcs-inspection-label { font-size: 12.5px; }
  .sdcs.sd-r26-start .sdcs-inspection-value { max-width: none; text-align: left; }
}
.sdcs.sd-r26-start .sd-launch__permit-line { font-size: 14px; font-weight: 600; color: var(--r26-green); }
.sdcs.sd-r26-start .sd-launch__swatch { width: 24px; height: 24px; }
.sdcs.sd-r26-start .sd-launch__brand-label { font-size: 13px; color: var(--r26-muted); }

/* You give / You get: AA labels (were --r26-faint on paper-2, ~3:1) */
.sdcs.sd-r26-start .sdcs-exch { margin-top: 20px; border-radius: 14px; }
.sdcs.sd-r26-start .sdcs-exch h5 { font-size: 11px; font-weight: 700; color: var(--r26-muted); }
.sdcs.sd-r26-start .sdcs-exch p { font-size: 14px; }

/* ------------------------------------------------------------------ 7. focus + motion */
.sdcs.sd-r26-start :is(a, button):focus-visible { outline: 2px solid var(--clay-cta); outline-offset: 3px; }
.sdcs.sd-r26-start :is(.idbtn, .sdcs-btn):focus-visible { outline-offset: 3px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .sdcs.sd-r26-start .sdcs-btn,
  .sdcs.sd-r26-start .sdcs-btn:hover { transform: none; transition: none; }
  .sdcs.sd-r26-start .sdcs-steps__i + .sdcs-steps__i::after { transition-duration: .01s; }
  .sdcs.sd-r26-start .sdcs-slug-hint[aria-busy="true"]::before,
  .sdcs.sd-r26-start .sdcs-loading::before { animation: none; }
}

/* ------------------------------------------------------------------ 8. desktop */
/* From 1024px: the board (eyebrow, heading, lead, stepper) is a left column that stays
   in view, and the card is the right column. The first screen then shows the whole of
   screen 1's entry routes without scrolling past a centred heading. */
@media (min-width: 1024px) {
  .sdcs.sd-r26-start {
    max-width: 1120px; padding: 28px 32px 96px;
    display: grid; grid-template-columns: minmax(0, 1fr) 560px; column-gap: 64px; align-items: start;
  }
  .sdcs.sd-r26-start .sdcs-chrome { grid-column: 1 / -1; }
  .sdcs.sd-r26-start .sdcs-board {
    position: sticky; top: calc(var(--sdcs-hdr) + 16px);
    text-align: left; margin: 0; padding-top: 24px; max-width: none;
  }
  .sdcs.sd-r26-start .sdcs-board .eyebrow { justify-content: flex-start; }
  .sdcs.sd-r26-start .sdcs-board .lead { margin: 0; }
  .sdcs.sd-r26-start .sdcs-steps { margin: 28px 0 0; }
  .sdcs.sd-r26-start .sdcs-stage { margin-top: 0; }
  .sdcs.sd-r26-start :is(.sdcs-scr, .sdcs-phase) { margin: 0; }
  /* on desktop the board keeps its heading on every screen: there is room for it */
  .sdcs.sd-r26-start:has(.sdcs-steps__i[data-step="1"]:not(.is-on)) .sdcs-board :is(.eyebrow, .sdcs-board__h1, .lead) {
    position: static; width: auto; height: auto; margin: revert; overflow: visible;
    clip: auto; clip-path: none; white-space: normal;
  }
  .sdcs.sd-r26-start:has(.sdcs-steps__i[data-step="1"]:not(.is-on)) .sdcs-board__h1 { margin: 6px 0 8px; }
}

/* ------------------------------------------------------------------ 9. Places dropdown */
/* Google appends .pac-container to <body>, outside .sdcs. Scoped to pages that carry the
   funnel. The "powered by Google" mark (.pac-logo::after) is LEFT AS IS: the Places
   terms require it. */
body:has(.sdcs.sd-r26-start) .pac-container {
  margin-top: 6px; border: 1px solid var(--r26-line-2, rgba(20,24,43,.16)); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(20, 24, 43, .14);
  font-family: var(--r26-sans, Inter, system-ui, sans-serif); overflow: hidden;
}
body:has(.sdcs.sd-r26-start) .pac-item {
  display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 6px 14px;
  font-size: 14px; line-height: 1.3; color: #5b6076; border-top-color: rgba(20, 24, 43, .08); cursor: pointer;
}
body:has(.sdcs.sd-r26-start) .pac-item:first-child { border-top: 0; }
body:has(.sdcs.sd-r26-start) .pac-item-query { font-size: 15px; color: #14182b; padding-right: 4px; }
body:has(.sdcs.sd-r26-start) .pac-matched { font-weight: 700; }
body:has(.sdcs.sd-r26-start) :is(.pac-item:hover, .pac-item-selected) { background: #f4f1ea; }

/* ------------------------------------------------------------------ 10. the chrome on /start/ */
/* The header "Start" pill links to the page you are already on. On /start/ it reads as
   the CURRENT page (an outline, ink text), so the only clay action on screen is the
   card's. Same size and slot: nothing reflows. Mike's Q1. When the renderer emits
   aria-current="page" (3905 FOS-HANDOFF H2) this can key off that instead of :has(). */
body:has(.sdcs.sd-r26-start) .sdc a.btn--pill-sm[data-sd-when="signed-out"] {
  background: transparent; color: var(--ink, #14182b);
  box-shadow: inset 0 0 0 1.5px rgba(20, 24, 43, .28);
}
body:has(.sdcs.sd-r26-start) .sdc a.btn--pill-sm[data-sd-when="signed-out"]:hover { background: rgba(20, 24, 43, .05); }