/* Onboarding v3: the two-step sign-up's chip, the link mode on /connect, the wallet app's confirm screen, the no-account screen,
   and the dashboard's welcome card, setup ring and link card. Loaded only by /connect and /dashboard ("styles": ["onboard"] in
   their page settings). Every rule is scoped under its own class (.su-later, .link-top, .link-in, .no-account, .wcard, .ring,
   .welcome): nothing else on the site changes. Colours come from style.css's tokens, so the light theme follows by itself. */

/* ---- the wizard (design v4): Location → Account → Wallet (optional, later). Three equal columns on one row at every width; each step
   is an icon in a 32-px circle, its label and a few muted words. signup.js drawSteps() sets the states (.is-active, .is-done,
   aria-current, disabled); nothing here changes them. Upcoming: a quiet ring (--field-line, 3:1); current: the teal ring on a soft
   teal fill; done: a filled mint disc (--ok-text) with a navy check (design v5's filled-status pattern, one rule for both themes). The
   2-px track between two circles fills (scaleX) once the step before it is
   done; the wallet's track and ring are dashed: it is not part of the sign-up. ---- */
.stepper--two { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; align-items: start; }
.stepper--two > li { position: relative; display: block; min-width: 0; text-align: center; color: var(--muted); font-size: inherit; }
.stepper--two .stepper__btn, .stepper--two > .su-later { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; min-height: 44px; padding: 0 4px 4px; border-radius: var(--r-chip, 12px); }
.stepper--two .stepper__n { position: relative; z-index: 1; width: 32px; height: 32px; margin-bottom: 8px; border: 1.5px solid var(--field-line); border-radius: 50%; background: transparent; color: var(--muted); font-size: 0; display: grid; place-items: center; transition: none; }
.stepper--two .stepper__n svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.stepper--two .stepper__ok { display: none; }
.stepper--two .stepper__label { font: 600 .875rem/1.25 var(--body); letter-spacing: -.005em; color: var(--muted); overflow-wrap: anywhere; }
.stepper--two .stepper__sub { margin-top: 2px; font: 500 .75rem/1.3 var(--body); color: var(--muted); text-wrap: balance; }
.stepper--two > li.is-active .stepper__n { border-color: var(--pin-2); background: var(--accent-soft); color: var(--pin-2); box-shadow: 0 0 0 4px var(--accent-soft); }
.stepper--two > li.is-active .stepper__label { color: var(--text); }
.stepper--two > li.is-done .stepper__n { border-color: var(--ok-text); background: var(--ok-text); color: var(--on-accent); font-size: 0; }
.stepper--two > li.is-done .stepper__n::after { content: none; }
.stepper--two > li.is-done .stepper__ico { display: none; }
.stepper--two > li.is-done .stepper__ok { display: block; }
.stepper--two > li.is-done .stepper__label { color: var(--text); }
.stepper--two .stepper__btn:not(:disabled):hover .stepper__n { border-color: var(--ok-text); box-shadow: 0 0 0 4px var(--ok-soft, rgba(52,211,153,.14)); }
/* the track between two circles: from the edge of the circle before to the edge of this one (columns of equal width, no gap) */
.stepper--two > li + li::before, .stepper--two > li + li::after { content: ""; position: absolute; top: 15px; left: calc(-50% + 24px); right: calc(50% + 24px); height: 2px; border-radius: 2px; pointer-events: none; }
.stepper--two > li + li::before { background: var(--line-2); }
.stepper--two > li + li::after { background: var(--ok-text); transform: scaleX(0); transform-origin: left center; }
.stepper--two > li.is-done + li::after { transform: scaleX(1); }
.stepper--two > .su-later { cursor: help; }
.stepper--two > .su-later .stepper__n { border-style: dashed; }
.stepper--two > .su-later::before { background: none; border-top: 2px dashed var(--line-2); height: 0; }
.stepper--two > .su-later::after { content: none; }
@media (prefers-reduced-motion: no-preference) {
  .stepper--two .stepper__n { transition: border-color var(--dur-2, .18s) var(--ease-out, ease-out), background-color var(--dur-2, .18s) var(--ease-out, ease-out), color var(--dur-2, .18s) var(--ease-out, ease-out), box-shadow var(--dur-2, .18s) var(--ease-out, ease-out); }
  .stepper--two > li + li::after { transition: transform var(--dur-3, .32s) var(--ease-out, ease-out); }
  .stepper--two > li.is-done .stepper__ok { animation: suStepOk var(--dur-3, .32s) var(--ease-spring, ease-out) both; }
}
@keyframes suStepOk { from { transform: scale(.4); opacity: 0; } }
/* forced colours: the rings and the track stay visible, the done circle is a filled system mark */
@media (forced-colors: active) {
  .stepper--two .stepper__n, .su-later .stepper__n { border-color: CanvasText; }
  .stepper--two > li.is-done .stepper__n { background: Highlight; color: HighlightText; }
  .stepper--two > li + li::before, .stepper--two > li + li::after { background: CanvasText; }
}
/* a narrow phone: the small words go, the three labels stay on one row */
@media (max-width: 360px) { .stepper--two .stepper__sub { display: none; } .stepper--two .stepper__label { font-size: .8125rem; } }

/* ---- step 2: one primary action, the Terms box under it, the e-mail way folded ---- */
.su-why { margin: 0; }
.su-alt { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0 14px; }
.su-alt > summary { cursor: pointer; list-style: none; padding: 14px 0; font-weight: 600; color: var(--text-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.su-alt > summary::-webkit-details-marker { display: none; }
.su-alt > summary::after { content: "+"; font-size: 1.1rem; color: var(--muted); }
.su-alt[open] > summary::after { content: "−"; }
.su-alt[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.su-alt .su-form { padding-bottom: 14px; }

/* ---- the link mode's top (a member without a wallet) ---- */
.link-top { display: grid; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.link-top .kicker { margin-bottom: 0; }
.link-top h2 { margin: 0; }
.link-skip { text-align: center; }
.alt-ways .link-skip { justify-self: center; margin-top: 4px; }

/* ---- the wallet app's confirm screen (/connect?link=): a mini pass of the account the wallet joins ---- */
.link-in .su-carry { display: grid; gap: 12px; }
.link-in__pass { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-2); }
.link-in__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 1.1rem var(--display); background: var(--gold); color: var(--on-gold); box-shadow: 0 10px 24px -10px rgba(var(--gold-rgb),.55); }
.link-in__who { display: grid; gap: 2px; min-width: 0; }
.link-in__who strong { font-size: 1.05rem; overflow-wrap: anywhere; }
.link-in #carry-in-wallets { margin-top: 4px; }

/* ---- the link mode on a phone: the wallet apps first, the ones to install behind a second "More wallets" ---- */
.more-wallets--inner { margin-top: 10px; }
.more-wallets--inner > summary { font-size: .92rem; }

/* ---- a wallet nobody owns, or a dead link inside the wallet app (one screen, never step 1 by surprise) ---- */
.no-account { justify-items: center; text-align: center; }
.no-account .verified-badge.is-plain { color: var(--muted); background: var(--card-2); box-shadow: 0 0 0 10px var(--card); }
.no-account .btn { width: 100%; }

/* ---- the dashboard: the welcome card and the link card take the whole row of the Home panel (two columns on wide screens) ---- */
.welcome, .wcard { grid-column: 1 / -1; }

/* ---- the dashboard: the welcome card ---- */
.welcome { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: linear-gradient(135deg, rgba(var(--accent-rgb),.14), rgba(var(--gold-rgb),.08)), var(--card); border: 1px solid rgba(var(--gold-rgb),.35); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--e1); }
.welcome__disc { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 800 1.4rem var(--display); color: var(--on-gold); background: var(--gold); box-shadow: 0 14px 30px -14px rgba(var(--gold-rgb),.8), inset 0 1px 0 rgba(255,255,255,.35); }
.welcome__text { display: grid; gap: 4px; min-width: 0; }
.welcome__text .kicker { margin-bottom: 0; }
.welcome__text h2 { margin: 0; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.welcome__text p { margin: 0; color: var(--muted); }
.welcome__ring { align-self: center; }
.welcome__close { position: absolute; top: 8px; right: 8px; }
@media (max-width: 640px) { .welcome { grid-template-columns: auto 1fr; } .welcome__ring { grid-column: 1 / -1; } }
@media (max-width: 480px) { .welcome { grid-template-columns: 1fr; justify-items: start; } }

/* ---- the setup ring (2 of 3 → 3 of 3). The sweep is a CSS variable the page sets (no inline style): --ring-done 0..1 ---- */
.ring { display: inline-grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.ring__svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--line-2); stroke-width: 6; }
.ring__arc { fill: none; stroke: var(--pin); stroke-width: 6; stroke-linecap: round; stroke-dasharray: calc(var(--ring-done, 0) * 163) 163; transition: stroke-dasharray .6s ease; }
.ring__num { font: 800 .95rem var(--display); fill: var(--text); transform: rotate(90deg); transform-origin: 32px 32px; }
.ring__ticks { display: grid; gap: 2px; font-size: .84rem; color: var(--muted); margin: 0; padding: 0; list-style: none; }
.ring__ticks li::before { content: "○ "; color: var(--muted); }
.ring__ticks li.is-done::before { content: "✓ "; color: var(--ok-text); }
.ring--sm .ring__svg { width: 36px; height: 36px; }
.ring--sm .ring__num { font-size: 22px; transform-origin: 32px 32px; }
@media (prefers-reduced-motion: reduce) { .ring__arc { transition: none; } }

/* ---- the dashboard's link card ---- */
.wcard { background: linear-gradient(180deg, rgba(var(--ink),.06), rgba(var(--ink),.02)); border: 1px solid rgba(var(--gold-rgb),.35); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; display: grid; gap: 12px; box-shadow: var(--e1); }
.wcard[hidden] { display: none; }
.wcard .kicker { margin-bottom: 0; }
.wcard h2 { margin: 0; font-size: 1.35rem; }
.wcard__lead { margin: 0; color: var(--text-2); }
.wcard__perks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--text-2); font-size: .95rem; }
/* a block with the mark hung in its padding (not a flex row: that cut "The founder path for <city> and your city coin" into three columns) */
.wcard__perks li { position: relative; padding-left: 22px; }
.wcard__perks li::before { content: "✦"; color: var(--gold-text); position: absolute; left: 0; top: 0; }
.wcard__actions { display: grid; gap: 8px; }
.wcard__actions .btn { width: 100%; }
.wcard__other { text-align: center; }
.wcard__wait { margin: 0; color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.wcard__tiny { margin: 0; color: var(--faint); font-size: .8rem; }
.wcard.is-done { border-color: rgba(var(--ok-rgb),.45); }
.wcard.is-done .kicker { color: var(--ok-text); }
.wcard--folded { padding: 14px 18px; }

/* ---- the pass: the small ring by the role pill (white on the pass's own colours); .ring-row holds the ring and the pill ---- */
.ring-row { display: inline-flex; align-items: center; gap: 10px; }
.ring--pass { grid-template-columns: auto; gap: 0; }
.ring--pass .ring__svg { width: 30px; height: 30px; }
.ring--pass .ring__track { stroke: rgba(255,255,255,.28); }
.ring--pass .ring__arc { stroke: #fff; }
.ring--pass .ring__num { fill: #fff; }

/* ---- the link card folded (Skip for now): one line and a smaller button, never a dead end ---- */
.wcard--folded { padding: 14px 18px; gap: 8px; }
.wcard--folded h2 { font-size: 1.1rem; }
.wcard--folded .wcard__actions { grid-template-columns: auto 1fr; align-items: center; justify-items: start; }
.wcard--folded .wcard__actions .btn { width: auto; padding: 10px 16px; font-size: .95rem; }
.wcard.is-done h2 { color: var(--ok-text); }

/* ---- phones live inside the wallet app (owner decision F4): the wallet card's app chips, "Wasn't you? Remove it", the next-time tip ---- */
.wcard__apps { margin: 0; }
/* a wallet-app chip is a full touch target (44 px, like the site's other buttons on a phone) */
.wcard__apps .chip-link, #proof-apps .chip-link { min-height: 44px; display: inline-flex; align-items: center; }
.wcard__note { margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-size: .92rem; }
.wcard__tip { margin: 0; color: var(--text-2); font-size: .92rem; line-height: 1.45; }
.wcard__note .link-btn, .wcard__tip .link-btn { white-space: nowrap; }

/* ---- the wallet app's confirm screen: the warning in large type; a link code's page never flashes the sign-up's hero first ---- */
.link-in__warn { font-size: 1rem; line-height: 1.45; }
.link-in__warn strong { color: var(--text); }
.has-link .connect__intro { display: none; }