/* Scoped styles for the five-step Get Started wizard. Everything is
   namespaced under .onboarding so it never touches shared site.css/v3.css
   rules used by other pages.

   Visual gate fix (docs/RESUME-VISUAL-FINDINGS.md): the wizard previously
   used light-theme text colors on TRANSPARENT containers, so it rendered
   dark navy on the dark Floating Canvas stage, and inherited near-white
   body text inside its own light callout. The wizard is now one defined
   V3 "paper" floating surface (#F7F9FC) with explicit foreground tokens on
   every surface — nothing relies on the dark page body's inherited color.

   Contrast tokens (computed WCAG 2.x relative-luminance ratios):
     --ob-ink    #10234B  ~14.9:1 on #fff, ~14.1:1 on #F7F9FC
     --ob-muted  #475569   7.6:1 on #fff,  7.2:1 on #F7F9FC, 6.8:1 on #EDF2FF
     --ob-accent #2457F5   5.6:1 on #fff,  5.3:1 on #F7F9FC, 5.0:1 on #EDF2FF
     --ob-error  #B42318   6.6:1 on #fff,  6.2:1 on #F7F9FC
     white on --ob-accent  5.6:1 (primary button text)
   The previous #64748b secondary text (~4.5:1 on paper, below 4.5 on
   #EDF2FF) is no longer used for text. Parent measures actual rendered
   pairs in a real browser; this comment is the design intent, not proof. */
.onboarding{
  --ob-ink:#10234B;--ob-muted:#475569;--ob-accent:#2457F5;--ob-error:#B42318;
  --ob-paper:#F7F9FC;--ob-card:#FFFFFF;--ob-selected:#EDF2FF;
  --ob-line:#CBD5E1;--ob-control-line:#64748B;--ob-focus:#2457F5;
  max-width:820px;margin:0 auto;background:var(--ob-paper);color:var(--ob-ink);
  border-radius:18px;padding:44px 48px 48px;box-shadow:0 35px 80px #0008
}
.subpage .formpage>.onboarding{grid-column:1/-1;width:100%}

/* Page heading block inside the paper surface: override the dark-shell
   .subpage heading/eyebrow/lead colors, which assume a dark background. */
.subpage .onboarding h1,.subpage .onboarding h2,.subpage .onboarding h3{color:var(--ob-ink)}
.subpage .onboarding h1 em{color:var(--ob-accent)}
.subpage .onboarding .eyebrow{color:var(--ob-accent)}
.subpage .onboarding .lead{color:var(--ob-muted)}
.onboarding a:not(.button){color:var(--ob-accent);text-decoration:underline;text-underline-offset:3px}
.onboarding :focus-visible{outline:3px solid var(--ob-focus);outline-offset:3px}

.onboarding .progress-wrap{margin:28px 0 40px}
.onboarding .progress-meta{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;color:var(--ob-ink);margin-bottom:10px}
.onboarding .progress-bar-track{height:6px;border-radius:3px;background:var(--ob-line);overflow:hidden}
.onboarding .progress-bar-fill{height:100%;background:var(--ob-accent);transition:width .3s ease}
.onboarding .step-dots{display:flex;justify-content:space-between;margin-top:18px}
.onboarding .step-dot-item{display:flex;align-items:center;flex:1;min-width:0}
.onboarding .step-dot-item:last-child{flex:0 0 auto}
.onboarding .step-dot{display:flex;flex-direction:column;align-items:center;gap:6px}
.onboarding .step-dot-circle{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--ob-card);border:2px solid var(--ob-control-line);color:var(--ob-muted)}
.onboarding .step-dot-circle.active{border-color:var(--ob-accent);color:var(--ob-accent)}
.onboarding .step-dot-circle.done{background:var(--ob-accent);border-color:var(--ob-accent);color:#fff}
.onboarding .step-dot-label{font-size:11px;color:var(--ob-muted)}
.onboarding .step-dot-label.active{color:var(--ob-ink);font-weight:700}
.onboarding .step-dot-connector{flex:1;height:2px;background:var(--ob-line);margin:0 6px}
.onboarding .step-dot-connector.done{background:var(--ob-accent)}

.onboarding .step{display:none}
.onboarding .step.active{display:block}
.onboarding .step-badge{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--ob-accent);margin-bottom:14px;text-transform:uppercase}
.onboarding .step-title{color:var(--ob-ink)}
.onboarding .step-desc{color:var(--ob-muted);margin-bottom:28px}
.onboarding .form-group{margin-bottom:26px}
.onboarding .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.onboarding .required-note{font-size:13px;color:var(--ob-muted)}
.onboarding .req{color:var(--ob-error)}
.onboarding .opt{font-weight:400;color:var(--ob-muted)}
.onboarding label{display:block;font-weight:600;color:var(--ob-ink);font-size:14px;margin-bottom:8px}
.onboarding input:not([type=checkbox]):not([type=radio]),.onboarding select,.onboarding textarea{display:block;width:100%;border:1px solid var(--ob-control-line);border-radius:7px;padding:11px;background:var(--ob-card);color:var(--ob-ink);min-height:46px;font:inherit}
.onboarding ::placeholder{color:#5F6C80;opacity:1}
.onboarding input.error,.onboarding textarea.error,.onboarding select.error{border:2px solid var(--ob-error)}
.onboarding .field-error{display:none;color:var(--ob-error);font-size:13px;font-weight:600;margin-top:6px}
.onboarding .field-error.visible{display:block}
.onboarding .hint{font-size:13px;color:var(--ob-muted);margin-top:6px}
.onboarding #colorLimitHint{color:var(--ob-error)!important;font-weight:600}
.onboarding .section-divider{border-top:1px solid var(--ob-line);margin:26px 0}

/* Native checkbox/radio pills — the real input stays visible. */
.onboarding .checkbox-grid,.onboarding .radio-group{display:flex;flex-wrap:wrap;gap:10px}
.onboarding .checkbox-pill,.onboarding .radio-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ob-control-line);border-radius:20px;padding:9px 14px;min-height:44px;font-size:14px;font-weight:500;cursor:pointer;background:var(--ob-card);color:var(--ob-ink);margin:0}
.onboarding .checkbox-pill:has(input:checked),.onboarding .radio-btn:has(input:checked){border:2px solid var(--ob-accent);background:var(--ob-selected);font-weight:700}
.onboarding .checkbox-pill input,.onboarding .radio-btn input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--ob-accent)}

.onboarding .slide-section{max-height:0;overflow:hidden;transition:max-height .25s ease}
.onboarding .slide-section.open{max-height:900px}
.onboarding .slide-section-inner{padding-top:16px}

/* Card-style radios (style vibe, font feel) and colour pills: the native
   input is visually hidden (opacity 0) but stays in the tab order, so the
   card itself must show focus. :has(:focus-visible) shows a ring only for
   keyboard focus; the :focus-within fallback is for engines without :has. */
.onboarding .vibe-grid,.onboarding .font-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.onboarding .vibe-card,.onboarding .font-card{position:relative;border:1px solid var(--ob-control-line);border-radius:12px;padding:16px 10px;text-align:center;cursor:pointer;background:var(--ob-card);color:var(--ob-ink);margin:0}
.onboarding .vibe-card input,.onboarding .font-card input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.onboarding .vibe-card:has(input:checked),.onboarding .font-card:has(input:checked){border-color:var(--ob-accent);background:var(--ob-selected);box-shadow:0 0 0 2px var(--ob-accent) inset}
.onboarding .vibe-card:has(input:checked) .vibe-card-title,.onboarding .font-card:has(input:checked) .font-card-name{text-decoration:underline;text-underline-offset:3px}
.onboarding .vibe-card-emoji{display:block;font-size:22px;margin-bottom:6px}
.onboarding .vibe-card-title,.onboarding .font-card-name{font-size:13px;font-weight:600;color:var(--ob-ink)}
.onboarding .font-card-preview{display:block;font-size:22px;margin-bottom:6px;color:var(--ob-ink)}
.onboarding .color-pills{display:flex;flex-wrap:wrap;gap:10px}
.onboarding .color-pill{position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ob-control-line);border-radius:20px;padding:9px 13px;min-height:44px;font-size:13px;font-weight:500;cursor:pointer;background:var(--ob-card);color:var(--ob-ink);margin:0}
.onboarding .color-pill:has(input:checked){border:2px solid var(--ob-accent);background:var(--ob-selected);font-weight:700}
.onboarding .color-pill:has(input:checked)::after{content:'✓';color:var(--ob-accent);font-weight:700}
.onboarding .color-pill:has(input:disabled){opacity:.55;cursor:not-allowed}
.onboarding .color-pill input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.onboarding .color-pill-dot{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid #0003;flex-shrink:0}
.onboarding .vibe-card:has(input:focus-visible),.onboarding .font-card:has(input:focus-visible),.onboarding .color-pill:has(input:focus-visible),.onboarding .addon-card:has(input:focus-visible){outline:3px solid var(--ob-focus);outline-offset:3px}
@supports not selector(:has(*)){.onboarding .vibe-card:focus-within,.onboarding .font-card:focus-within,.onboarding .color-pill:focus-within,.onboarding .addon-card:focus-within{outline:3px solid var(--ob-focus);outline-offset:3px}}

/* Add-ons: native checkbox wrapped by its <label> card. */
.onboarding .addon-grid{display:grid;gap:12px}
.onboarding .addon-card{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;border:1px solid var(--ob-control-line);border-radius:12px;padding:16px;cursor:pointer;background:var(--ob-card);color:var(--ob-ink);margin:0;font-weight:400}
.onboarding .addon-card.selected{border:2px solid var(--ob-accent);background:var(--ob-selected)}
.onboarding .addon-card input{position:absolute;top:14px;right:14px;width:20px;height:20px;opacity:0;margin:0}
.onboarding .addon-emoji{font-size:22px}
.onboarding .addon-title{font-weight:700;color:var(--ob-ink);font-size:14px}
.onboarding .addon-desc{font-size:13px;color:var(--ob-muted)}
.onboarding .addon-price{font-weight:700;color:var(--ob-accent);font-size:13px;white-space:nowrap}
.onboarding .addon-toggle{width:24px;height:24px;border:2px solid var(--ob-control-line);border-radius:6px;display:flex;align-items:center;justify-content:center;background:var(--ob-card)}
.onboarding .addon-toggle-icon{opacity:0;font-weight:700}
.onboarding .addon-card.selected .addon-toggle{border-color:var(--ob-accent);background:var(--ob-accent)}
.onboarding .addon-card.selected .addon-toggle-icon{opacity:1;color:#fff}
.onboarding .social-platforms{max-height:0;overflow:hidden;transition:max-height .25s ease}
.onboarding .social-platforms.open{max-height:600px}

.onboarding .package-total{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--ob-card);border:1px solid var(--ob-line);border-radius:12px;padding:18px 20px;margin-top:20px;color:var(--ob-ink)}
.onboarding .package-total-label{font-size:12px;color:var(--ob-muted)}
.onboarding .package-total-heading{font-weight:700;color:var(--ob-ink)}
.onboarding .package-total-amounts{text-align:right}
.onboarding .package-monthly{font-weight:700;color:var(--ob-accent)}
.onboarding .package-onetime{font-size:13px;color:var(--ob-muted)}

/* Review summary: dark text on explicit white cards. */
.onboarding .summary-card{background:var(--ob-card);color:var(--ob-ink);border:1px solid var(--ob-line);border-radius:12px;padding:18px 20px;margin-bottom:16px}
.onboarding .summary-section-title{font-weight:700;color:var(--ob-ink)}
.onboarding .summary-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid #E2E8F0;font-size:14px}
.onboarding .summary-row:first-child{border-top:0}
.onboarding .summary-key{color:var(--ob-muted);flex-shrink:0}
.onboarding .summary-val{text-align:right;color:var(--ob-ink);overflow-wrap:anywhere;min-width:0}
.onboarding .contact-callout{display:flex;gap:12px;align-items:center;background:var(--ob-card);color:var(--ob-ink);border:1px solid var(--ob-line);border-left:3px solid var(--ob-accent);border-radius:12px;padding:16px 18px;margin-top:20px;font-size:14px}
.onboarding .contact-callout strong{color:var(--ob-ink)}
.onboarding #submitStatus{color:var(--ob-ink);font-weight:600;min-height:1.6em}

.onboarding .step-nav{display:flex;justify-content:space-between;gap:16px;margin-top:32px;flex-wrap:wrap}
.onboarding .btn-secondary{background:var(--ob-card);color:var(--ob-ink);border:1px solid var(--ob-control-line);border-radius:9px;padding:15px 22px;font-weight:650;cursor:pointer;min-height:48px}
.onboarding .btn-submit{background:var(--ob-accent);color:#fff;border:1px solid var(--ob-accent);border-radius:9px;padding:15px 26px;font-weight:650;cursor:pointer;min-height:48px}
.onboarding .btn-submit:disabled,.onboarding .btn-secondary:disabled{opacity:.6;cursor:not-allowed}

.onboarding .success-screen{display:none;text-align:center;padding:40px 12px;color:var(--ob-ink)}
.onboarding .success-screen.active{display:block}
.onboarding .success-title{color:var(--ob-ink)}
.onboarding .success-message{color:var(--ob-muted)}
.onboarding .success-icon{font-size:48px;display:block;margin-bottom:16px}
.onboarding .success-badge{display:inline-block;margin-top:16px;background:var(--ob-selected);color:var(--ob-accent);border-radius:20px;padding:8px 16px;font-size:13px;font-weight:700}

@media(max-width:700px){
  .onboarding{padding:28px 20px 32px;border-radius:14px}
  .onboarding .form-row,.onboarding .vibe-grid,.onboarding .font-cards{grid-template-columns:1fr}
  .onboarding .addon-card{grid-template-columns:auto 1fr auto;gap:10px}
  .onboarding .addon-card .addon-price{grid-column:2}
  .onboarding .summary-row{flex-direction:column;gap:2px}
  .onboarding .summary-val{text-align:left}
  .onboarding .package-total{flex-direction:column;align-items:flex-start}
  .onboarding .package-total-amounts{text-align:left}
  .onboarding .step-nav>*{flex:1 1 auto}
}
@media(max-width:420px){
  .onboarding{padding:24px 14px 28px}
  /* Progress stays readable via the "Step n of 5 / step name" meta row. */
  .onboarding .step-dot-label{display:none}
  .onboarding .step-dot-connector{margin:0 3px}
}