/* /connect/onboard/onboard.css — Bible Connect Onboarding styles v3
 * Restyled to the shared Bible Connect design system ("Vibrant Community",
 * connect-tokens.css v3). Every colour, radius, shadow, spacing, type and
 * motion value comes from --bcc-* tokens; no palette literals are defined
 * here (the only literal is #fff used as text-on-primary contrast, matching
 * connect-tokens.css itself).
 *
 * NOTE ON SPECIFICITY: connect-tokens.css contains a global reset
 *   `.bcc-app button { background:none; border:none; padding:0; font:inherit; color:inherit }`
 * (specificity 0,1,1) which outranks the single-class component rules
 * (0,1,0) on <button> elements. Interactive onboarding elements are therefore
 * scoped under `.bcc-app` (0,2,0) and the primary submit surface is restated
 * from tokens so buttons are not flattened. No token file is modified.
 * ──────────────────────────────────────────────────────────────── */

/* ================================================================
   FULL-PAGE LAYOUT
   .bcc-app already sets font, colour and background; we layer a soft
   ambient wash and centre the onboarding card.
=============================================================== */
#bcc-body.bcc-app {
  display:         flex;
  min-height:      100dvh;
  padding:         clamp(var(--bcc-s5), 4vw, var(--bcc-s12)) var(--bcc-s4);
  overflow-x:      clip;
  background:
    radial-gradient(1100px 560px at 50% -10%, var(--bcc-primary-tint), transparent 62%),
    var(--bcc-bg);
}

/* Guard against any horizontal page scroll at 320px / 200% zoom. */
html { overflow-x: clip; }

/* HTML `hidden` must always win over display rules */
[hidden] { display: none !important; }

/* ================================================================
   LOADING SPINNER
=============================================================== */
.ob-loading-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100dvh;
  width:           100%;
}

.ob-spinner {
  width:            40px;
  height:           40px;
  border:           3px solid var(--bcc-border-strong);
  border-top-color: var(--bcc-primary);
  border-radius:    var(--bcc-r-pill);
  animation:        ob-spin .7s linear infinite;
}

@keyframes ob-spin {
  to { transform: rotate(360deg); }
}

/* ================================================================
   PAGE CONTAINER
=============================================================== */
.ob-page {
  width:     100%;
  max-width: 520px;
  margin:    auto;
}

/* ================================================================
   STEP CARD — fade + slide, soft rounded surface, top accent
=============================================================== */
.ob-step {
  position:      relative;
  overflow:      hidden;
  opacity:       0;
  transform:     translateY(14px);
  transition:    opacity   var(--bcc-dur-4) var(--bcc-ease),
                 transform var(--bcc-dur-4) var(--bcc-ease-spring);
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-xl);
  padding:       var(--bcc-s12) var(--bcc-s8);
  box-shadow:    var(--bcc-shadow-3);
}

/* Thin multi-hue progress accent across the top of the card */
.ob-step::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     3px;
  background: linear-gradient(90deg,
                 var(--bcc-primary),
                 var(--bcc-secondary) 55%,
                 var(--bcc-accent));
  opacity:    .9;
}

.ob-step.ob-step-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ================================================================
   LOGO WORDMARK — pill badge
=============================================================== */
.ob-logo {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--bcc-s2);
  padding:        var(--bcc-s1) var(--bcc-s3);
  background:     var(--bcc-primary-soft);
  border:         1px solid var(--bcc-primary-tint);
  border-radius:  var(--bcc-r-pill);
  font-size:      var(--bcc-t-xs);
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--bcc-primary);
  margin-bottom:  var(--bcc-s6);
}

/* ================================================================
   TITLE & SUBTITLE
=============================================================== */
.ob-title {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-3xl);
  font-weight:    600;
  letter-spacing: .002em;
  line-height:    1.2;
  color:          var(--bcc-ink);
  margin:         0 0 var(--bcc-s2);
}

.ob-subtitle {
  font-size:   var(--bcc-t-md);
  color:       var(--bcc-ink-2);
  margin:      0 0 var(--bcc-s6);
  line-height: 1.55;
}

/* ================================================================
   CHOICE GRID — path chooser (stack on mobile, side-by-side wider)
=============================================================== */
.ob-choice-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--bcc-s4);
  margin-bottom:         var(--bcc-s6);
}

.bcc-app .ob-choice-card {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--bcc-s3);
  min-height:     44px;
  padding:        var(--bcc-s6) var(--bcc-s5);
  background:     var(--bcc-surface-2);
  border:         1px solid var(--bcc-border);
  border-radius:  var(--bcc-r-lg);
  text-align:     left;
  color:          var(--bcc-ink);
  font-family:    inherit;
  transition:     border-color var(--bcc-dur-2) var(--bcc-ease),
                  box-shadow   var(--bcc-dur-2) var(--bcc-ease),
                  transform    var(--bcc-dur-2) var(--bcc-ease),
                  background   var(--bcc-dur-2) var(--bcc-ease);
}

.bcc-app .ob-choice-card:hover {
  border-color: var(--bcc-primary);
  background:   var(--bcc-surface-3);
  box-shadow:   var(--bcc-shadow-2), 0 0 0 1px var(--bcc-primary-soft);
  transform:    translateY(-3px);
}

.bcc-app .ob-choice-card:active {
  transform: translateY(-1px);
}

.bcc-app .ob-choice-card:focus-visible {
  outline:       none;
  box-shadow:    var(--bcc-focus);
  border-radius: var(--bcc-r-lg);
}

.ob-choice-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           46px;
  height:          46px;
  border-radius:   var(--bcc-r-md);
  background:      var(--bcc-primary-soft);
  border:          1px solid var(--bcc-primary-tint);
  color:           var(--bcc-primary);
  font-size:       1.35rem;
  line-height:     1;
}

/* Join path uses the teal secondary to differentiate the two paths */
#ob-join-btn .ob-choice-icon {
  background:  var(--bcc-secondary-soft);
  border-color: transparent;
  color:       var(--bcc-secondary);
}

.ob-choice-title {
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
  color:       var(--bcc-ink);
  line-height: 1.3;
}

.ob-choice-desc {
  font-size:   var(--bcc-t-sm);
  color:       var(--bcc-ink-3);
  line-height: 1.5;
}

/* ================================================================
   SIGN IN HINT
=============================================================== */
.ob-signin-hint {
  text-align: center;
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
  margin:     var(--bcc-s5) 0 0;
}

.ob-signin-hint a {
  color:                    var(--bcc-primary);
  font-weight:              600;
  text-decoration:          underline;
  text-underline-offset:    3px;
  text-decoration-thickness: 1px;
}

.ob-signin-hint a:hover {
  color: var(--bcc-primary-hover);
}

/* ================================================================
   BACK BUTTON — 44px touch target
=============================================================== */
.bcc-app .ob-back-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--bcc-s1);
  min-height:     44px;
  margin:         0 0 var(--bcc-s4) calc(-1 * var(--bcc-s2));
  padding:        0 var(--bcc-s2);
  background:     none;
  border:         none;
  border-radius:  var(--bcc-r-sm);
  font-family:    inherit;
  font-size:      var(--bcc-t-sm);
  font-weight:    500;
  color:          var(--bcc-ink-3);
  cursor:         pointer;
  transition:     color var(--bcc-dur-1) var(--bcc-ease),
                  background var(--bcc-dur-1) var(--bcc-ease);
}

.bcc-app .ob-back-btn:hover {
  color:      var(--bcc-ink);
  background: var(--bcc-surface-2);
}

.bcc-app .ob-back-btn:focus-visible {
  outline:    none;
  box-shadow: var(--bcc-focus);
}

/* ================================================================
   FORM CONTROLS — comfortable 44px height on the wizard
=============================================================== */
.bcc-app .ob-step .bcc-input,
.bcc-app .ob-step .bcc-select {
  height:    44px;
  font-size: var(--bcc-t-md);
}

/* ================================================================
   SLUG WRAP — prefix + input inline
=============================================================== */
.ob-slug-wrap {
  display:     flex;
  align-items: stretch;
}

.ob-slug-prefix {
  display:       flex;
  align-items:   center;
  height:        44px;
  padding:       0 var(--bcc-s3);
  background:    var(--bcc-surface-3);
  border:        1px solid var(--bcc-border-strong);
  border-right:  none;
  border-radius: var(--bcc-r-sm) 0 0 var(--bcc-r-sm);
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink-3);
  white-space:   nowrap;
  flex-shrink:   0;
}

.ob-slug-input {
  flex:          1;
  border-radius: 0 var(--bcc-r-sm) var(--bcc-r-sm) 0 !important;
}

/* Slug availability status */
.ob-slug-status {
  display:     inline-flex;
  align-items: center;
  gap:         var(--bcc-s1);
  font-size:   var(--bcc-t-xs);
  font-weight: 600;
  margin-top:  var(--bcc-s2);
}

.ob-slug-checking  { color: var(--bcc-ink-3); }
.ob-slug-available { color: var(--bcc-success); }
.ob-slug-taken     { color: var(--bcc-danger); }

/* ================================================================
   JOIN TABS — segmented control, 44px targets
=============================================================== */
.ob-join-tabs {
  display:       flex;
  gap:           var(--bcc-s1);
  padding:       var(--bcc-s1);
  background:    var(--bcc-surface-3);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  margin-bottom: var(--bcc-s5);
}

.bcc-app .ob-join-tab {
  flex:           1;
  height:         44px;
  background:     transparent;
  border:         none;
  border-radius:  var(--bcc-r-sm);
  font-family:    inherit;
  font-size:      var(--bcc-t-sm);
  font-weight:    600;
  color:          var(--bcc-ink-2);
  cursor:         pointer;
  transition:     background var(--bcc-dur-1) var(--bcc-ease),
                  color      var(--bcc-dur-1) var(--bcc-ease),
                  box-shadow var(--bcc-dur-1) var(--bcc-ease);
}

.bcc-app .ob-join-tab:hover {
  color: var(--bcc-ink);
}

.bcc-app .ob-join-tab.active {
  background: var(--bcc-primary);
  color:      #fff; /* text-on-primary contrast */
  box-shadow: var(--bcc-shadow-1);
}

.bcc-app .ob-join-tab:focus-visible {
  outline:    none;
  box-shadow: var(--bcc-focus);
}

/* ================================================================
   CODE INPUT — larger, spaced, tabular
=============================================================== */
.ob-code-input {
  font-size:              1.375rem !important;
  letter-spacing:         .28em;
  padding-left:           .28em;
  text-align:             center;
  text-transform:         uppercase;
  font-weight:            700;
  font-variant-numeric:   tabular-nums;
}

/* ================================================================
   CHURCH PREVIEW CARD
=============================================================== */
.ob-church-preview {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s4);
  padding:       var(--bcc-s4) var(--bcc-s5);
  margin:        var(--bcc-s5) 0;
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-left:   3px solid var(--bcc-primary);
  border-radius: var(--bcc-r-lg);
  box-shadow:    var(--bcc-shadow-1);
}

.ob-preview-logo {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           52px;
  height:          52px;
  flex-shrink:     0;
  border-radius:   var(--bcc-r-md);
  background:      var(--bcc-primary);
  color:           #fff; /* text-on-primary contrast */
  font-size:       1.1rem;
  font-weight:     700;
  letter-spacing:  .02em;
  box-shadow:      var(--bcc-shadow-glow);
}

.ob-preview-name {
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
  color:       var(--bcc-ink);
  line-height: 1.3;
}

.ob-preview-meta {
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
  margin-top: 3px;
}

/* ================================================================
   SEARCH RESULTS
=============================================================== */
.ob-search-results {
  display:         flex;
  flex-direction:  column;
  gap:             var(--bcc-s2);
  margin-top:      var(--bcc-s3);
  max-height:      300px;
  overflow-y:      auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bcc-surface-4) transparent;
}

.ob-search-results::-webkit-scrollbar { width: 6px; }
.ob-search-results::-webkit-scrollbar-thumb {
  background:    var(--bcc-surface-4);
  border-radius: var(--bcc-r-pill);
}

.bcc-app .ob-search-result-item {
  display:       flex;
  align-items:   center;
  gap:           var(--bcc-s3);
  width:         100%;
  min-height:    44px;
  padding:       var(--bcc-s3) var(--bcc-s4);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  text-align:    left;
  font-family:   inherit;
  color:         var(--bcc-ink);
  cursor:        pointer;
  transition:    border-color var(--bcc-dur-1) var(--bcc-ease),
                 background   var(--bcc-dur-1) var(--bcc-ease),
                 box-shadow   var(--bcc-dur-1) var(--bcc-ease);
}

.bcc-app .ob-search-result-item:hover {
  border-color: var(--bcc-border-strong);
  background:   var(--bcc-surface-3);
}

.bcc-app .ob-search-result-item.selected {
  border-color: var(--bcc-primary);
  background:   var(--bcc-primary-tint);
  box-shadow:   0 0 0 1px var(--bcc-primary-soft);
}

.bcc-app .ob-search-result-item:focus-visible {
  outline:    none;
  box-shadow: var(--bcc-focus);
}

.ob-result-logo {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  flex-shrink:     0;
  border-radius:   var(--bcc-r-sm);
  background:      var(--bcc-primary-soft);
  color:           var(--bcc-primary);
  font-size:       .8rem;
  font-weight:     700;
}

.ob-result-name {
  font-size:   var(--bcc-t-sm);
  font-weight: 600;
  color:       var(--bcc-ink);
}

.ob-result-meta {
  font-size:  var(--bcc-t-xs);
  color:      var(--bcc-ink-3);
  margin-top: 2px;
}

.ob-search-empty {
  padding:    var(--bcc-s5) var(--bcc-s4);
  font-size:  var(--bcc-t-sm);
  color:      var(--bcc-ink-3);
  text-align: center;
}

/* ================================================================
   FORM ERROR (below the form)
=============================================================== */
.ob-form-error {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--bcc-s2);
  margin-top:    var(--bcc-s3);
  padding:       var(--bcc-s3) var(--bcc-s4);
  background:    var(--bcc-danger-soft);
  border:        1px solid transparent;
  border-left:   3px solid var(--bcc-danger);
  border-radius: var(--bcc-r-sm);
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-danger);
  line-height:   1.5;
}

/* ================================================================
   SUBMIT BUTTON — full-width, 46px
   The `.bcc-app` scope restores the primary surface that the global
   `.bcc-app button` reset flattens on <button> elements.
=============================================================== */
.ob-submit-btn {
  width:           100% !important;
  justify-content: center;
  margin-top:      var(--bcc-s5);
  height:          46px !important;
  font-size:       var(--bcc-t-md) !important;
  font-weight:     600;
}

/* Stacked secondary action (replaces the old inline margin style) */
.ob-submit-btn + .ob-submit-btn {
  margin-top: var(--bcc-s3);
}

.bcc-app .ob-submit-btn {
  padding:     0 var(--bcc-s5);
  border:      1px solid transparent;
  font-family: inherit;
  font-weight: 600;
}

.bcc-app .ob-submit-btn.bcc-btn-primary {
  background:   linear-gradient(180deg, var(--bcc-primary), var(--bcc-primary-hover));
  color:        #fff; /* text-on-primary contrast */
  border-color: transparent;
}

.bcc-app .ob-submit-btn.bcc-btn-primary:hover {
  background: linear-gradient(180deg, var(--bcc-primary-hover), var(--bcc-primary-hover));
}

.bcc-app .ob-submit-btn.bcc-btn-primary:active {
  background: var(--bcc-primary-hover);
}

/* ================================================================
   SUCCESS STEP
=============================================================== */
.ob-success-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           72px;
  height:          72px;
  margin:          0 0 var(--bcc-s5);
  border-radius:   var(--bcc-r-pill);
  background:      var(--bcc-success-soft);
  border:          1px solid var(--bcc-success);
  color:           var(--bcc-success);
  font-size:       2rem;
  line-height:     1;
}

/* Terminal screens read best centred */
#ob-has-church .ob-step,
#ob-step-success { text-align: center; }

#ob-has-church .ob-success-icon,
#ob-step-success .ob-success-icon {
  margin-left:  auto;
  margin-right: auto;
}

/* ================================================================
   SUCCESS ADMIN BLOCK
=============================================================== */
.ob-success-admin-block {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s3);
  width:          100%;
  margin-top:     var(--bcc-s5);
}

.ob-success-role-badge {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--bcc-s3);
  padding:       var(--bcc-s4) var(--bcc-s5);
  background:    var(--bcc-primary-soft);
  border:        1px solid var(--bcc-primary-tint);
  border-left:   3px solid var(--bcc-primary);
  border-radius: var(--bcc-r-md);
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink-2);
  line-height:   1.55;
  text-align:    left;
}

.ob-success-role-badge strong {
  color:       var(--bcc-primary);
  font-weight: 600;
}

.ob-role-icon {
  flex-shrink: 0;
  margin-top:  1px;
  font-size:   1.15rem;
  color:       var(--bcc-primary);
}

/* ================================================================
   LIGHT MODE — tokens handle the palette; soften card elevation
=============================================================== */
.bcc-app.bcc-light .ob-step,
body.theme-light .bcc-app .ob-step {
  box-shadow: var(--bcc-shadow-2);
}

/* ================================================================
   RESPONSIVE
   Mobile (<=480): stack, tighter padding, top-aligned.
=============================================================== */
@media (max-width: 480px) {
  .ob-step {
    padding:       var(--bcc-s8) var(--bcc-s5);
    border-radius: var(--bcc-r-lg);
  }

  .ob-choice-grid {
    grid-template-columns: 1fr;
  }

  .ob-title {
    font-size: var(--bcc-t-2xl);
  }

  #bcc-body.bcc-app {
    align-items:  flex-start;
    padding-top:  var(--bcc-s6);
  }
}

@media (max-width: 520px) {
  .ob-slug-prefix {
    font-size: .72rem;
    padding:   0 var(--bcc-s2);
  }
}

/* Tablet + desktop (>=481): side-by-side path cards */
@media (min-width: 481px) {
  .ob-choice-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Wider canvas from tablet up */
@media (min-width: 768px) {
  .ob-page {
    max-width: 600px;
  }
}

/* Desktop: generous card breathing room */
@media (min-width: 1024px) {
  .ob-choice-grid {
    gap: var(--bcc-s5);
  }

  .ob-step {
    padding: var(--bcc-s16) var(--bcc-s12);
  }
}

/* iOS focus zoom: keep wizard controls at >=16px on small screens. */
@media (max-width: 767px) {
  .bcc-app .ob-step .bcc-input,
  .bcc-app .ob-step .bcc-select { font-size: 16px; }
}