/* Maison Prestige · Playbooks · the account pages (sign in, the Starter sign-up, the links an email carries,
   paused). The demo's sign-in page with what real accounts add: a second field, a few links, a line that says
   what happened. Tones from app.css only; a status is never colour alone (an icon and words). */
.acct-form { display: grid; gap: 1rem; }
.acct-form .btn { justify-self: start; margin-block-start: .35rem; }
.acct-hint { font-size: .82rem; color: var(--muted); }
.acct-err { display: flex; gap: .45rem; align-items: flex-start; font-size: .86rem; color: var(--ink); }
.acct-err .ico { color: var(--brass); flex: none; margin-block-start: .1rem; }
.acct-note { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: .92rem; color: var(--ink); }
.acct-note .ico { color: var(--brass); flex: none; margin-block-start: .15rem; }
.acct-links { margin: 0; font-size: .95rem; display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; }
.acct-tick { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.acct-tick input { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .2rem; accent-color: var(--brass); flex: none; }
.input[readonly] { background: var(--linen); }

/* Before the script runs (portal.html): the brass wordmark alone on the page, and, when the start takes longer than
   it should, one line that offers to try again. The line appears by itself after 8 seconds, as a step with no
   movement (a timer, not a fade). The app replaces all of it as soon as it draws. */
.boot { min-block-size: 70dvh; display: grid; place-content: center; justify-items: center; gap: 1.5rem; padding-inline: var(--gutter); text-align: center; }
.boot-mark { block-size: 1.05rem; inline-size: auto; }
.boot-late { margin: 0; font-size: .92rem; color: var(--muted); visibility: hidden; animation: boot-late 1ms 8s forwards; }
@keyframes boot-late { to { visibility: visible; } }

/* While the server cannot be reached, or a change cannot be sent, one line says so (reader/app.js). At the foot of
   the screen, above the quick bar and a chapter's own buttons, so it never covers the header, Find or Close (notices,
   the toast, show at the top). */
.acct-line {
  position: fixed; z-index: 80; inset-inline: 0; margin-inline: auto; margin-block: 0; inline-size: max-content; max-inline-size: calc(100vw - 2rem);
  inset-block-end: calc(var(--tabs-h) + env(safe-area-inset-bottom) + .75rem);
  display: flex; gap: .45rem; align-items: center;
  background: var(--ink); color: var(--paper); padding: .45rem 1rem; border-radius: 999px; font-size: .82rem;
}