/* Sign-in screen, account sheet and payment return (signin.js). The sign-in screen is the shell's #step-signin
   (app.css v2: one keylined card on the board, no tab bar; brief §3b.6) and the account sheet is the unlock dialog's
   sheet (dialog.unlock); this file adds only what signin.js draws inside them. Tokens from app.css. */

/* ---------- the sign-in screen's layout (designer, 2026-10-28 fix: off-centre on a desktop, a long address ran off
   a phone). One invitation-style card, centred: on a phone it fills the width inside the shell's 16px margins and
   sits under the bar; from 640px it is a 460px card in the middle of the space under the bar, a little above
   centre. The tab bar and the desktop rail are hidden on this screen, so the rail's column is taken away and the
   bar carries the compact wordmark at every width. Scoped to #step-signin:target so no other screen moves. */
body:has(#step-signin:target) .screens { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
#step-signin { max-width: none; align-content: start; }
#step-signin .signin { --sp-gap: 16px; width: 100%; max-width: 460px; margin: 4px auto 0; padding: 28px 20px 22px; gap: var(--sp-gap); }
#step-signin .signin-wm { justify-self: center; justify-content: center; }
#step-signin .signin-wm svg { width: 200px; }
#step-signin .signin h1 { font-size: 26px; line-height: 1.2; overflow-wrap: break-word; max-width: 100%; }
#step-signin .sp-live { gap: 8px; max-width: 38ch; justify-self: center; }
#step-signin .sp-live:not(:has(> :not([hidden]))) { margin-top: calc(-1 * var(--sp-gap)); }   /* nothing to say: no empty gap (stays rendered: it is the live region) */
#step-signin .sp-live .small { padding-top: 4px; }                     /* "Nothing there?…" sits apart from the body */
#step-signin .sp-form { gap: 8px; margin-top: 4px; }
#step-signin .sp-form .btn-block { margin-top: 6px; }
#step-signin .sp-card > .btn-block { margin-top: 4px; }
#step-signin .sp-card > .btn-quiet { margin-top: -4px; }
#step-signin .demo-note { justify-self: stretch; }
@media (min-width: 640px) {
  body:has(#step-signin:target) .screens { padding-top: 32px; padding-bottom: 32px; }
  #step-signin:target { min-height: calc(100dvh - var(--bar) - 64px); align-content: center; padding-bottom: 6vh; }
  #step-signin .signin { --sp-gap: 18px; margin-top: 0; padding: 40px 44px 34px; }
  #step-signin .signin-wm svg { width: 232px; }
  #step-signin .signin h1 { font-size: 30px; }
}
@media (min-width: 960px) {
  body:has(#step-signin:target) { grid-template-columns: minmax(0, 1fr); }
  body:has(#step-signin:target) .bar,
  body:has(#step-signin:target) .screens { grid-column: 1; }
  body:has(#step-signin:target) .bar { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: 32px; padding-right: 32px; }
  body:has(#step-signin:target) .bar .wm { display: inline-flex; }
}

.sp-card h1:focus, .sp-card h1:focus-visible { outline: none; }   /* focused by script so screen readers hear the new state */
.sp-live { display: grid; gap: 10px; }
.sp-card .lead { overflow-wrap: anywhere; }
.sp-form { display: grid; gap: 10px; text-align: left; width: 100%; }
.sp-form .field-label { margin-bottom: 0; }
#sp-email[aria-invalid="true"] { border-color: var(--bad); }
#sp-email:disabled { opacity: .6; }
.sp-card .btn-quiet { justify-self: center; }
.sp-card .demo-note, .sp-sheet .demo-note { font-size: 13px; color: var(--muted); }
.sp-card [hidden] { display: none !important; }

/* busy: a turning ring with a foil arc (static under reduced motion) */
.sp-spin { justify-self: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--foil); animation: sp-turn 1s linear infinite; }
@keyframes sp-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sp-spin { animation: none; border-top-color: var(--rule); border-right-color: var(--foil); } }

/* header account button: icon + email, never wider than the bar */
#account-btn { display: inline-flex; align-items: center; gap: 6px; max-width: min(46vw, 320px); }
#account-btn .ico { width: 18px; height: 18px; flex: none; }
#account-btn .ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sp-acct-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* account sheet (dialog.unlock styles from app.css, plus a close button) */
.sp-sheet-in { padding-top: 34px; }
.sp-sheet h2 { padding-right: 40px; }
.sp-sheet h2:focus, .sp-sheet h2:focus-visible { outline: none; }
.sp-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--radius); color: var(--fg); }
.sp-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.sp-acct-email { font-weight: 500; overflow-wrap: anywhere; }
.sp-sheet .small.sp-good { color: var(--good); display: flex; gap: 6px; align-items: center; }
.sp-sheet .small .ico svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; width: 100%; height: 100%; }
.sp-sheet .btn-quiet { justify-self: start; }

/* the unlock panel's "Already unlocked? Sign in" */
#unlock-have-it { justify-self: start; }