/*
 * Sign-in screens: /login, the 2FA code screens, password reset.
 *
 * Self-contained on purpose: layouts/auth.blade.php loads no Vite bundle, so a
 * change here is live without a rebuild. Layout, spacing, type and motion follow
 * the v3 Flutter login (flutter_app/lib/features/auth/login_screen.dart); the
 * numbers below are its constants. Brand colours arrive as --auth-* from the
 * _brand_login partial. The neutrals are the v3 surface palette, with secondary
 * text held at #6b7280 so it clears 4.5:1 on the white card.
 */

:root {
    --auth-vw: 100vw;
    --auth-vh: 100vh;
    --auth-split-x: calc(var(--auth-vw) * 0.42);
    --auth-split-y: calc(var(--auth-vh) * 0.42);
    --auth-hpad: 20px;
    /* The phone's own edges (status bar, Dynamic Island when sideways, home
       indicator), from viewport-fit=cover in layouts/auth.blade.php. 0 in a
       browser tab and on every desktop. */
    --auth-safe-top: env(safe-area-inset-top, 0px);
    --auth-safe-right: env(safe-area-inset-right, 0px);
    --auth-safe-bottom: env(safe-area-inset-bottom, 0px);
    --auth-safe-left: env(safe-area-inset-left, 0px);
    --auth-surface: #f8f9fc;
    --auth-card: #ffffff;
    --auth-text: #1a1d26;
    --auth-text-2: #6b7280;
    --auth-text-3: #9ca3af;
    --auth-border: #e5e7eb;
    --auth-on-button: #ffffff;
    background: var(--auth-surface);
}

@media (min-width: 600px) {
    :root { --auth-hpad: 32px; }
}

[hidden] { display: none !important; }

/* TEXT SIZE (docs/superpowers/specs/2026-10-05-text-size-design.md): type is
   in rem, so it follows the phone's or browser's own size (the boot script in
   <head> sets the root before the first paint). Headings grow half as fast;
   the fields never go under 16px (an iPhone zooms in on a smaller one). */
.auth {
    margin: 0;
    min-height: var(--auth-vh);
    overflow-x: hidden;
    background: var(--auth-surface);
    color: var(--auth-text);
    /* The install's body face, from <html style> (App\Support\BrandTypography).
       Weight synthesis off: only the two loaded weights ever render. */
    font-family: var(--mm-font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    font-synthesis: style;
    font-size: 0.875rem;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

.auth *, .auth *::before, .auth *::after { box-sizing: border-box; }

/* ---- Background: gradient fallback under the animated canvas ------------ */

.auth-bg,
.auth-flow {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.auth-bg {
    background:
        linear-gradient(to bottom right, var(--auth-panel-from), var(--auth-panel-to)) 0 0 / calc(var(--auth-split-x) + 20px) 100% no-repeat,
        var(--auth-surface);
}

.auth-flow { display: block; }

.auth-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Brand panel --------------------------------------------------------- */

.auth-brand {
    position: fixed;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
    pointer-events: none;
}

.auth-brand__logo {
    display: block;
    width: auto;
    object-fit: contain;
}

.auth-brand__logo.is-whitened { filter: brightness(0) invert(1); }

.auth-brand__name {
    margin: 0;
    color: #ffffff;
    font-family: var(--mm-font-display, inherit);
    font-weight: var(--mm-weight-light, 300);
    letter-spacing: var(--mm-track-tight, -0.025em);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.auth-brand__for {
    margin: 16px 0 0;
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* ---- Main column --------------------------------------------------------- */

.auth-main {
    position: relative;
    z-index: 2;
}

.auth-stage {
    position: relative;
    width: 100%;
}

/* Phone and tablet: brand on top, card straddling the wave (v3 < 900px). */
@media (max-width: 899.98px) {
    .auth-bg {
        background:
            linear-gradient(to bottom right, var(--auth-panel-from), var(--auth-panel-to)) 0 0 / 100% calc(var(--auth-split-y) + 16px) no-repeat,
            var(--auth-surface);
    }

    .auth-brand {
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--auth-split-y) - 16px);
        padding: var(--auth-safe-top) calc(var(--auth-hpad) + var(--auth-safe-right)) 0
            calc(var(--auth-hpad) + var(--auth-safe-left));
    }

    .auth-brand__logo {
        height: clamp(80px, calc(var(--auth-split-y) * 0.35), 160px);
        max-width: 100%;
    }

    .auth-brand__name {
        font-size: calc(28px * (1 + (var(--mm-text-scale, 1) - 1) * 0.5));
    }

    .auth-brand__for {
        margin-top: 8px;
        font-size: 0.875rem;
    }

    .auth-main {
        padding: calc(var(--auth-split-y) - 40px) calc(var(--auth-hpad) + var(--auth-safe-right))
            calc(20px + var(--auth-safe-bottom)) calc(var(--auth-hpad) + var(--auth-safe-left));
    }
}

/* Short landscape phones: the brand strip is only ~160px tall. */
@media (max-width: 899.98px) and (max-height: 480px) {
    .auth-brand__for { display: none; }
}

/* Desktop: brand panel left, wave divider, card centred on the right (v3 >= 900px). */
@media (min-width: 900px) {
    .auth-brand {
        top: 0;
        bottom: 0;
        left: 0;
        width: calc(var(--auth-split-x) - 20px);
        padding: var(--auth-safe-top) 40px var(--auth-safe-bottom) calc(40px + var(--auth-safe-left));
    }

    .auth-brand__logo {
        height: clamp(120px, calc(var(--auth-vh) * 0.22), 240px);
        max-width: 100%;
    }

    .auth-brand__name {
        font-size: calc(38px * (1 + (var(--mm-text-scale, 1) - 1) * 0.5));
    }

    .auth-main {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--auth-vh);
        margin-left: calc(var(--auth-split-x) - 40px);
        padding: calc(60px + var(--auth-safe-top)) calc(24px + var(--auth-safe-right))
            calc(60px + var(--auth-safe-bottom)) 24px;
    }

    .auth-stage { max-width: 420px; }
}

/* ---- Card ---------------------------------------------------------------- */

.auth-card {
    position: relative;
    margin: 0;
    padding: 32px;
    border-radius: 5px;
    background: var(--auth-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform-origin: 50% 50%;
}

.auth-card__face { position: relative; }

.auth-card__flash {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: var(--auth-surface);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.auth-card.is-flashing .auth-card__flash { opacity: 0.7; }

.auth-title {
    margin: 0;
    color: var(--auth-text);
    font-family: var(--mm-font-display, inherit);
    font-size: calc(22px * (1 + (var(--mm-text-scale, 1) - 1) * 0.5));
    font-weight: var(--mm-weight-light, 300);
    line-height: 1.15;
    letter-spacing: var(--mm-track-tight, -0.025em);
}

.auth-title--large { font-size: calc(24px * (1 + (var(--mm-text-scale, 1) - 1) * 0.5)); }

.auth-subtitle {
    margin: 6px 0 0;
    color: var(--auth-text-2);
    font-size: 0.875rem;
    line-height: 1.45;
}

.auth-subtitle--roomy { margin-top: 8px; }

/* Steps: without JavaScript both steps show and the form posts as-is. */
.js .auth-login[data-step="email"] [data-only-step="password"],
.js .auth-login[data-step="password"] [data-only-step="email"] { display: none; }

.no-js [data-js-only] { display: none !important; }

/* ---- Email chip (password step) ----------------------------------------- */

.auth-email-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 16px;
}

.auth-email-chip__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    padding: 6px 12px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--auth-brand) 8%, var(--auth-card));
    color: var(--auth-brand-ink);
    font-size: 0.8125rem;
    font-weight: 500;
}

.auth-email-chip__pill svg { flex: none; width: 16px; height: 16px; fill: currentColor; }

.auth-email-chip__pill span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Text fields (Material outlined, v3 _dec) ----------------------------- */

.auth-field {
    position: relative;
    margin-top: 28px;
}

.auth-email-chip + .auth-field { margin-top: 24px; }

.auth-field--stacked { margin-top: 20px; }

.auth-input {
    display: block;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 16px 0 48px;
    border: 1px solid var(--auth-border);
    border-radius: 12px;
    background: var(--auth-card);
    color: var(--auth-text);
    font: inherit;
    font-size: max(16px, 0.9375rem);
    caret-color: var(--auth-brand);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-input--with-toggle { padding-right: 56px; }

.auth-input:focus {
    outline: none;
    border-color: var(--auth-focus);
    box-shadow: inset 0 0 0 0.5px var(--auth-focus);
}

.auth-input:-webkit-autofill {
    -webkit-text-fill-color: var(--auth-text);
    box-shadow: inset 0 0 0 100px var(--auth-card);
}

.auth-input:-webkit-autofill:focus {
    box-shadow: inset 0 0 0 0.5px var(--auth-focus), inset 0 0 0 100px var(--auth-card);
}

.auth-input[aria-invalid="true"] { border-color: var(--auth-danger-ink); }

.auth-label {
    position: absolute;
    top: 28px;
    left: 44px;
    padding: 0 4px;
    transform: translateY(-50%);
    background: var(--auth-card);
    color: var(--auth-text-2);
    font-size: 0.875rem;
    line-height: 1;
    pointer-events: none;
    transition: top 0.15s ease, left 0.15s ease, font-size 0.15s ease;
}

.auth-input:focus + .auth-label,
.auth-input:not(:placeholder-shown) + .auth-label,
.auth-input:-webkit-autofill + .auth-label {
    top: 0;
    left: 12px;
    font-size: 0.75rem;
}

.auth-field__icon {
    position: absolute;
    top: 18px;
    left: 14px;
    width: 20px;
    height: 20px;
    fill: var(--auth-text-3);
    pointer-events: none;
}

.auth-field__toggle {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--auth-text-2);
    cursor: pointer;
}

.auth-field__toggle svg { width: 20px; height: 20px; fill: currentColor; }

/* ---- Options row, links, text buttons ------------------------------------ */

.auth-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 8px;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    color: var(--auth-text);
    font-size: 0.8125rem;
    cursor: pointer;
}

.auth-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--auth-brand-ink);
    cursor: pointer;
}

.auth-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border-radius: 4px;
    color: var(--auth-brand-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.auth-link:hover { text-decoration: underline; }

.auth-options .auth-link { margin-left: auto; }

.auth-text-button {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 4px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--auth-brand-ink);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.auth-secondary {
    margin: 16px 0 0;
    text-align: center;
}

.auth-secondary .auth-link { padding: 0 8px; }

/* ---- Buttons (v3 _Btn: 48px, radius 12) ---------------------------------- */

.auth-actions { margin-top: 24px; }

.auth-actions--after-options { margin-top: 16px; }

.auth-actions--after-choices { margin-top: 16px; }

.auth-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--auth-brand-ink);
    color: var(--auth-on-button);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.15s, background-color 0.15s;
}

.auth-button:hover { filter: brightness(0.94); }

.auth-button:active { filter: brightness(0.88); }

.auth-button[aria-busy="true"] {
    background: color-mix(in srgb, var(--auth-brand-ink) 60%, var(--auth-card));
    cursor: progress;
}

.auth-button[aria-busy="true"] .auth-button__label { visibility: hidden; }

.auth-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid color-mix(in srgb, var(--auth-on-button) 35%, transparent);
    border-top-color: var(--auth-on-button);
    border-radius: 50%;
    opacity: 0;
}

.auth-button[aria-busy="true"] .auth-spinner {
    opacity: 1;
    animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
    to { transform: rotate(360deg); }
}

/* ---- Focus: always visible, brand focus colour (>= 3:1 on white) --------- */

.auth a:focus-visible,
.auth button:focus-visible,
.auth-check input:focus-visible,
.auth-choice input:focus-visible + .auth-choice__body {
    outline: 2px solid var(--auth-focus);
    outline-offset: 2px;
}

/* ---- Messages (v3 _Err) --------------------------------------------------- */

.auth-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.auth-message p { margin: 0; }

.auth-message__icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    fill: currentColor;
}

.auth-message--danger {
    border-color: var(--auth-danger-border);
    background: var(--auth-danger-soft);
    color: var(--auth-danger-ink);
}

.auth-message--success {
    border-color: var(--auth-success-border);
    background: var(--auth-success-soft);
    color: var(--auth-success-ink);
}

.auth-message--warning {
    border-color: var(--auth-warning-border);
    background: var(--auth-warning-soft);
    color: var(--auth-warning-ink);
}

/* ---- Code delivery choices (v3 delivery step) ----------------------------- */

.auth-choices {
    min-width: 0;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
}

.auth-choice {
    position: relative;
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
}

.auth-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.auth-choice__body {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 14px 16px;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    background: var(--auth-card);
}

.auth-choice input:checked + .auth-choice__body {
    padding: 13px 15px;
    border: 2px solid var(--auth-brand-ink);
    background: color-mix(in srgb, var(--auth-brand) 5%, var(--auth-card));
}

.auth-choice__icon,
.auth-choice__check {
    flex: none;
    width: 22px;
    height: 22px;
}

.auth-choice__icon { fill: var(--auth-text-2); }

.auth-choice__check {
    fill: var(--auth-brand-ink);
    visibility: hidden;
}

.auth-choice input:checked + .auth-choice__body .auth-choice__icon { fill: var(--auth-brand-ink); }

.auth-choice input:checked + .auth-choice__body .auth-choice__check { visibility: visible; }

.auth-choice__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.auth-choice__title {
    color: var(--auth-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.auth-choice input:checked + .auth-choice__body .auth-choice__title { color: var(--auth-brand-ink); }

.auth-choice__detail {
    color: var(--auth-text-2);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

/* ---- Six-box code entry (v3 OTP step): one real input over six boxes ------ */

.auth-otp {
    position: relative;
    margin-top: 28px;
}

.auth-otp__boxes {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.auth-otp__box {
    display: grid;
    flex: 0 1 48px;
    place-items: center;
    min-width: 0;
    height: 56px;
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    background: var(--auth-card);
    color: var(--auth-text);
    font-size: 1.375rem;
    font-weight: 700;
}

.auth-otp__box.is-filled { border-color: color-mix(in srgb, var(--auth-brand) 50%, var(--auth-card)); }

.auth-otp__box.is-current {
    border: 2px solid var(--auth-focus);
}

.auth-otp__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: max(16px, 1rem);
    caret-color: transparent;
    opacity: 0;
    cursor: text;
}

.no-js .auth-otp__boxes { display: none; }

.no-js .auth-otp__input {
    position: static;
    height: 56px;
    border: 1px solid var(--auth-border);
    border-radius: 12px;
    color: var(--auth-text);
    font-size: 1.375rem;
    letter-spacing: 0.4em;
    text-align: center;
    opacity: 1;
}

/* ---- Utilities ----------------------------------------------------------- */

.auth-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 44px tap targets on touch screens and phones. */
@media (pointer: coarse), (max-width: 599.98px) {
    .auth-check,
    .auth-link,
    .auth-text-button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth *,
    .auth *::before,
    .auth *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ---- Passkeys: "Use Face ID or Fingerprint" and the offer after sign-in -- */

.auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 0;
    color: var(--auth-text-2);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--auth-border);
}

.auth-actions--after-or { margin-top: 16px; }

/* A second button beside or under the brand one: outlined, same size. */
.auth-button--outline {
    border: 1.5px solid var(--auth-brand-ink);
    background: var(--auth-card);
    color: var(--auth-brand-ink);
}

.auth-button--outline[aria-busy="true"] {
    background: var(--auth-card);
}

.auth-button--outline .auth-spinner {
    border-color: color-mix(in srgb, var(--auth-brand-ink) 30%, transparent);
    border-top-color: var(--auth-brand-ink);
}

.auth-button__icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    fill: currentColor;
}

.auth-button[aria-busy="true"] .auth-button__icon { visibility: hidden; }

/* "Use Face ID or Fingerprint" fits one line on a phone (measured: 264px
   of 284 at 390 wide; 13px below 370). When it cannot — a narrower phone, or
   larger text (Text Size) — it takes a second line rather than running out of
   its button: see the Text Size block at the end. */

@media (max-width: 480px) {
    .auth-button--outline { padding: 0 12px; font-size: 0.875rem; letter-spacing: 0.02em; }
}

@media (max-width: 369px) {
    .auth-button--outline { font-size: 0.8125rem; }
}

/* Cancel-style button left, go button right, equal widths (owner rule
   2026-09-24). A grid, not flex: with flex-basis 0 a <button> child keeps its
   own padding on top of its share while a <form> child does not, so the two
   came out 32px apart. A lone child takes the whole row. */
.auth-action-pair {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 12px;
}

.auth-action-pair > * { min-width: 0; }

.auth-action-pair .auth-button { padding: 0 12px; }

.auth-action-pair form { margin: 0; }

.auth-offer__art {
    display: flex;
    justify-content: center;
    margin: 0 0 12px;
    color: var(--auth-brand-ink);
}

.auth-offer__art svg {
    width: 56px;
    height: 56px;
    fill: currentColor;
}

.auth-offer__note {
    margin: 12px 0 0;
    color: var(--auth-text-2);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* The offer stays invisible until the script has checked the device, so a
   computer with no Face ID / fingerprint / screen lock never flashes it. */
.js [data-auth-passkey-offer]:not(.is-ready) { visibility: hidden; }

a.auth-button { text-decoration: none; }

.auth-actions--after-or + .auth-offer__note { text-align: center; }

/* ---- Text Size ------------------------------------------------------------
   A label that no longer fits its button on one line ("Use Face ID or
   Fingerprint" at 320, or once the words are larger) takes a second line and
   the button grows to hold it, rather than running out of its button and off
   the screen. At 390 and the standard size every label still fits one line
   (264px of 284 measured), so nothing changes there. */
.auth-button {
    height: auto;
    min-height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.2;
}

/* From Largest up (<html data-text-size>, set by the boot script) the email
   on its chip wraps instead of being cut to "…". */
html[data-text-size] .auth-email-chip__pill span {
    white-space: normal;
    overflow-wrap: anywhere;
}