/*
 * Stetworth /app — the mock sign-in screens (#/login, #/login/sent),
 * cut from style.css's "Mock sign-in (magic link)" section unchanged
 * and in the original order.  The .page-nav-session rule that closed
 * that section stays behind in style.css with the header cluster it
 * belongs to.
 */
/*
 * Load order is load-bearing: the /app shell links every split sheet
 * BEFORE style.css.  That keeps both source-order contracts intact —
 * a rule kept behind in style.css still beats its shared group there
 * by file order, and the responsive tail at the end of style.css
 * still overrides this sheet's base rules at equal specificity.
 * This sheet declares no design-token block of its own and carries
 * no media block of any kind — every width, motion and paged
 * override for these rules lives in style.css's responsive tail
 * (docs/APP.md#the-split-stylesheets).
 */

/* ============================================================
 * Mock sign-in (magic link)
 *
 * The gate screens for the simulated email/magic-link flow.  Both
 * the sign-in form (`#/login`) and the awaiting screen
 * (`#/login/sent`) reuse the composer's cream-well form surface,
 * the modal field styles, and the base card — only the narrow
 * wrapper and a few text treatments are new.
 * ============================================================ */

.login {
    max-width: 480px;
    margin: var(--s-7) auto;
    padding: 0 var(--s-3);
}

.login-lede {
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--c-ink-muted);
    margin: 0;
}

/* The echoed address on the awaiting screen.  Long addresses must
 * wrap rather than overflow the narrow card. */
.login-email {
    font-weight: 600;
    color: var(--c-ink);
    word-break: break-all;
}