/* The account box (public/register.js): the lead's personal page, the landing's wizard and the panel's "Ustaw hasło".
   Scoped to .acct-box, so each page's own forms keep their look; the tokens fall back to the panel's (styles.css).
   A page may restyle the box's heading and lead in its own context (the personal page's .step-pad). */
.acct-box { width: 100%; max-width: 400px; margin-inline: auto; text-align: left; }
.acct-box h2 { font-size: clamp(1.5rem, 3vw, 2rem); } /* weight, tracking and line height: the page's own h2 */
.acct-box h2, .acct-box .lead { text-align: center; }
/* p.lead: above the host page's own leads (the landing's .hero .lead) */
.acct-box p.lead { font-size: 1.0625rem; color: var(--ink-2, var(--muted)); line-height: 1.45; max-width: none; margin: 10px 0 24px; text-wrap: balance; }.acct-box .login h3 { text-align: center; margin-bottom: 18px; line-height: 24px; }

/* fields, errors and busy buttons as on the personal page */
.acct-box .field { display: grid; gap: 6px; margin-bottom: 14px; }
.acct-box .field label { font-size: .8125rem; color: var(--ink-2, var(--muted)); }
.acct-box .field input { width: 100%; height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--surface, #fff); color: var(--ink, var(--fg)); font: 400 .9375rem var(--sans); box-shadow: inset 0 0 0 1px var(--hair-2, var(--line)); transition: box-shadow .2s ease; }
.acct-box .field input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink, var(--fg)); }
.acct-box .hint { font-size: .8125rem; color: var(--ink-3, var(--faint)); }
.acct-box .error { color: var(--danger); font-size: .875rem; line-height: 22px; }
.acct-box .reveal .error { padding-bottom: 14px; }
.acct-box .spin { width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.acct-box .btn:has(> .spin) { position: relative; }
.acct-box .btn > .spin { position: absolute; left: 16px; top: calc(50% - 7px); opacity: 0; transition: opacity .2s ease; }
.acct-box .btn[aria-busy="true"] > .spin { opacity: 1; }
.acct-box .btn:disabled { opacity: .6; cursor: progress; }
.acct-box .btn.wide { width: 100%; white-space: normal; height: auto; min-height: 44px; padding: 10px 40px; text-align: center; } /* room for the spinner at the left */
.acct-box .link { background: none; border: 0; padding: 10px 0; font: inherit; font-size: .875rem; color: var(--ink-2, var(--muted)); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-2, var(--line)); cursor: pointer; }
.acct-box .link:hover { color: var(--ink, var(--fg)); text-decoration-color: var(--ink, var(--fg)); }
/* the main call to action: the gradient of cta.css, also on pages that do not load it (the landing) */
.acct-box .btn:not(.ghost, .secondary) { background: linear-gradient(135deg, #3b82f6 0%, #7c6cf2 100%); border-color: transparent; color: #fff; font-weight: 700; border-radius: 12px; box-shadow: 0 6px 16px rgba(76, 110, 245, .25); transition: transform .15s ease, opacity .2s ease, filter .2s ease, box-shadow .2s ease; }
.acct-box .btn:not(.ghost, .secondary):hover { opacity: 1; filter: brightness(1.07); box-shadow: 0 8px 20px rgba(76, 110, 245, .32); }

/* the wait for the e-mail link */
.pending { display: grid; justify-items: center; text-align: center; }
/* the address moves to the next line whole and breaks only when wider than the column; no break between it and the
   full stop after it (the break between two characters follows their common parent: .stick) */
.pending .stick { white-space: nowrap; }
.pending .addr { display: inline; font-size: inherit; white-space: normal; overflow-wrap: anywhere; font-weight: 500; color: var(--ink, var(--fg)); } /* site.css has its own .addr (the card's address row) */
.envelope { position: relative; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, #3b82f6 9%, var(--surface, #fff)); color: #3b82f6; }
.envelope svg { animation: float 2.4s ease-in-out infinite; }
.envelope i { position: absolute; top: 15px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: #7c6cf2; box-shadow: 0 0 0 2.5px var(--surface, #fff); animation: ping 1.8s ease-out infinite; }
@keyframes float { 50% { transform: translateY(-3px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.pending-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; }
.pending .reveal, #changeReveal { width: 100%; }
.change { text-align: left; padding-top: 18px; }
/* "Ustaw hasło": whose password this is */
.set-for { margin: -8px 0 20px; padding: 12px 16px; border-radius: 14px; background: var(--bg-2, var(--soft)); text-align: center; font-size: .9375rem; color: var(--ink-2, var(--muted)); }
.set-for strong { color: var(--ink, var(--fg)); font-weight: 600; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .envelope svg, .envelope i { animation: none; } }

/* motion helpers of common.js (fadeText, morph) and the reveal – the same as the personal page's and the panel's */
.swap { transition: opacity .2s ease; }
.swap.swapping { opacity: 0; }
.morph { transition: height .3s ease; }
.morph > * { transition: opacity .2s ease; }
.morph.morph-out > * { opacity: 0; }
.morph.morphing { overflow: hidden; }
.reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: opacity .2s ease, grid-template-rows .3s ease .2s; }
.reveal.open { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .3s ease, opacity .2s ease .25s; }
.reveal > * { overflow: hidden; min-height: 0; }