/* New member onboarding (includes/onboarding.php): sign-up progress, Getting started checklist, sign-up form
   progress, live approval check, the profile picker's team hint and the "Welcome to the church team" dialog.
   Brand Style Guide tokens only (--brand-*), shades by color-mix. Mobbin: Meetup / Quo / Klaviyo sign-up progress,
   HoneyBook + Klaviyo setup guides, Calendly "Invite team members", SchoolAI welcome steps. */
.ob-steps,.ob-card,.ob-form-progress,.ob-live,.tw{
  --ob-ink:var(--brand-text,#1d1a21);--ob-muted:var(--brand-muted,#6b6570);--ob-line:var(--brand-line,#e6e2ea);
  --ob-soft:var(--brand-surface,#f4f1f7);--ob-bg:var(--brand-bg,#fff);--ob-primary:var(--brand-primary,#241236);
  --ob-primary-2:var(--brand-primary-2,#3a1f55);--ob-accent:var(--brand-accent,#d9b24c);--ob-accent-ink:var(--brand-accent-ink,#241236);
  --ob-accent-light:var(--brand-accent-light,#e9cb79);--ob-dark:var(--brand-dark,#170a24)}
.ob-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Step n of N */
.ob-steps{display:grid;gap:8px;margin:0 0 2px}
.ob-bar{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.ob-bar li{position:relative;flex:1;height:6px;border-radius:999px;background:var(--ob-line);overflow:hidden}
.ob-bar li::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ob-primary);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.ob-bar li.is-done::after{transform:scaleX(1)}
.ob-bar li.is-now::after{transform:scaleX(.55);animation:obFill 1s cubic-bezier(.22,1,.36,1) both}
.ob-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;font-size:13px;color:var(--ob-muted)}
.ob-meta strong{color:var(--ob-ink);font-weight:700}
.ob-note{margin:0;font-size:13px;line-height:1.5;color:var(--ob-muted)}
@keyframes obFill{from{transform:scaleX(0)}to{transform:scaleX(.55)}}

/* Sign-up form: x of 6 done, ticks on finished fields */
.ob-form-progress{display:grid;gap:6px;font-size:13px;color:var(--ob-muted)}
.ob-form-meter{height:4px;border-radius:999px;background:var(--ob-line);overflow:hidden}
.ob-form-meter i{display:block;height:100%;width:0;border-radius:inherit;background:var(--ob-primary);transition:width .35s ease}
.ob-form-progress.is-done{color:var(--ob-ink);font-weight:600}
.acct-field.ob-ok>span:first-child::after{content:"";display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-2px;border-radius:50%;
  background:var(--brand-primary,#241236) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat;animation:obPop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes obPop{from{transform:scale(0)}to{transform:scale(1)}}

/* Awaiting approval: live check */
.ob-live{display:flex;align-items:center;gap:10px;margin:0;padding:10px 14px;border-radius:12px;background:var(--ob-soft);font-size:14px;color:var(--ob-muted)}
.ob-pulse{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ob-accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--ob-accent) 60%,transparent);animation:obPulse 2s infinite}
.ob-live.is-good{background:color-mix(in srgb,var(--ob-primary) 10%,var(--ob-bg));color:var(--ob-ink);font-weight:600}
.ob-live.is-good .ob-pulse{background:var(--ob-primary);animation:none}
@keyframes obPulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Getting started card */
.ob-card{margin:0 0 24px;padding:22px 24px;border:1px solid var(--ob-line);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--ob-primary) 5%,var(--ob-bg)),var(--ob-bg) 60%);transition:opacity .3s,transform .3s}
.ob-card.is-leaving{opacity:0;transform:translateY(-8px)}
.ob-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.ob-kicker{display:inline-block;margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ob-primary-2)}
.ob-card h2{margin:0 0 4px!important;font-size:20px!important}
.ob-sub{margin:0;font-size:14px;color:var(--ob-muted)}
.ob-sub strong{color:var(--ob-ink)}
.ob-progress{display:grid;justify-items:center;gap:6px;flex:none}
.ob-ring{--p:0;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--ob-primary) calc(var(--p)*1%),var(--ob-line) 0)}
.ob-ring b{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ob-bg);font-size:14px;color:var(--ob-ink)}
.ob-hide{padding:2px 6px;border:0;background:none;color:var(--ob-muted);font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ob-meter{height:4px;margin:16px 0 10px;border-radius:999px;background:var(--ob-line);overflow:hidden}
.ob-meter i{display:block;height:100%;border-radius:inherit;background:var(--ob-primary);animation:obGrow .9s cubic-bezier(.22,1,.36,1) both}
@keyframes obGrow{from{width:0}}
.ob-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ob-item{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ob-line);border-radius:14px;background:var(--ob-bg);transition:border-color .3s,box-shadow .3s}
.ob-item.is-next{border-color:var(--ob-primary)}
.ob-item.is-glow{box-shadow:0 0 0 4px color-mix(in srgb,var(--ob-primary) 12%,transparent)}
.ob-item.is-team{border-color:var(--ob-accent);background:color-mix(in srgb,var(--ob-accent-light) 22%,var(--ob-bg))}
.ob-check{display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--ob-line);border-radius:50%}
.ob-check svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ob-item.is-done .ob-check{border-color:var(--ob-primary);background:var(--ob-primary)}
.ob-item.is-done .ob-text strong{color:var(--ob-muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ob-muted) 50%,transparent)}
.ob-text{display:grid;gap:2px;min-width:0}
.ob-text strong{font-size:15px;color:var(--ob-ink)}
.ob-text small{font-size:13px;line-height:1.45;color:var(--ob-muted)}
.ob-go{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 12px;border-radius:10px;background:var(--ob-soft);color:var(--ob-primary)!important;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.ob-item.is-next .ob-go,.ob-item.is-team .ob-go{background:var(--ob-primary);color:#fff!important}
.ob-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ob-state{font-size:12px;font-weight:600;color:var(--ob-muted)}
@media (max-width:640px){
  .ob-card{padding:18px}
  .ob-item{grid-template-columns:26px 1fr}
  .ob-go,.ob-state{grid-column:2;justify-self:start}
  .ob-ring{width:52px;height:52px}.ob-ring b{width:40px;height:40px;font-size:13px}
}

/* Profile picker (dark): stepper + team hint */
.pf .ob-steps{width:min(520px,100%);margin:0 auto 18px;--ob-line:#ffffff24;--ob-primary:var(--brand-accent,#d9b24c);--ob-ink:#f6f1fa;--ob-muted:#b9aac8}
.pf .ob-meta,.pf .ob-note{justify-content:center;text-align:center}
.ob-pf-team{display:flex;align-items:center;gap:12px;width:min(620px,100%);margin:0 auto 20px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--brand-accent,#d9b24c) 55%,transparent);border-radius:14px;background:color-mix(in srgb,var(--brand-accent,#d9b24c) 12%,transparent);color:#f6f1fa;font-size:14px;line-height:1.5;text-align:left}
.ob-pf-team-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--brand-accent,#d9b24c);color:var(--brand-accent-ink,#241236)}
.ob-pf-team-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Welcome to the church team */
.tw{position:fixed;inset:0;margin:auto;height:fit-content;width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:28px 26px 22px;border:0;border-radius:22px;background:var(--ob-bg);color:var(--ob-ink);font-family:var(--brand-font-body,"DM Sans",Arial,sans-serif);box-shadow:0 30px 80px color-mix(in srgb,var(--ob-dark) 45%,transparent);text-align:left}
.tw[open]{animation:twIn .45s cubic-bezier(.22,1,.36,1)}
.tw::backdrop{background:color-mix(in srgb,var(--ob-dark) 62%,transparent)}
.tw-art{display:grid;place-items:center;height:96px;margin:-28px -26px 18px;border-radius:22px 22px 0 0;background:radial-gradient(circle at 50% 120%,color-mix(in srgb,var(--ob-accent) 55%,transparent),transparent 65%),linear-gradient(135deg,var(--ob-primary),var(--ob-dark))}
.tw-seal{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--ob-accent);color:var(--ob-accent-ink);box-shadow:0 0 0 8px color-mix(in srgb,var(--ob-accent) 25%,transparent);animation:twSeal .6s .2s cubic-bezier(.34,1.56,.64,1) both}
.tw-seal svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tw-kicker{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ob-primary-2)}
.tw h2{margin:0 0 8px;font-family:inherit;font-size:24px;font-weight:700;letter-spacing:-.3px;text-transform:none;color:var(--ob-ink)}
.tw-lead{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--ob-muted)}
.tw-lead strong{color:var(--ob-ink)}
.tw-k{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--ob-ink)}
.tw-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px;padding:0;list-style:none}
.tw-chips li{padding:4px 10px;border-radius:999px;background:var(--ob-soft);font-size:12px;font-weight:600;color:var(--ob-primary)}
.tw-chips .tw-more{background:none;border:1px dashed var(--ob-line);color:var(--ob-muted)}
.tw-steps{display:grid;gap:0;margin:0 0 18px;padding:0;list-style:none}
.tw-steps li{position:relative;display:grid;grid-template-columns:28px 1fr;gap:12px;padding:0 0 14px}
.tw-steps li:not(:last-child)::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--ob-line)}
.tw-steps li.is-done::before{background:var(--ob-primary)}
.tw-steps b{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--ob-line);border-radius:50%;background:var(--ob-bg);font-size:12px;color:var(--ob-muted)}
.tw-steps b svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tw-steps li.is-done b{border-color:var(--ob-primary);background:var(--ob-primary)}
.tw-steps li.is-now b{border-color:var(--ob-accent);color:var(--ob-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--ob-accent) 25%,transparent)}
.tw-steps strong{display:block;font-size:14px}.tw-steps small{font-size:13px;color:var(--ob-muted)}
.tw-actions{display:flex;gap:10px;justify-content:flex-end}
.tw-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:1px solid var(--ob-line);border-radius:12px;background:var(--ob-bg);color:var(--ob-ink)!important;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.tw-btn--gold{flex:1;border-color:var(--ob-primary);background:var(--ob-primary);color:#fff!important}
.tw-btn--gold:hover{background:var(--ob-primary-2)}
.tw-fine{margin:12px 0 0;font-size:12px;text-align:center;color:var(--ob-muted)}
@keyframes twIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes twSeal{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.ob-bar li::after,.ob-meter i,.tw[open],.tw-seal,.ob-pulse,.acct-field.ob-ok>span:first-child::after{animation:none;transition:none}}