/* =====================================================================
   Account dialogs (web redesign "Instrument", Task 10; SCREENS.md
   sections 2 and 3): sign up, sign in, password reset, link expired,
   verify your email, and the landing page's other dialogs. Built on the
   design system's .c-dialog (design-system.css, loaded after this file);
   the "Create new password" dialog is shared with the app page
   (templates/partials/reset_password_dialog.html), so index.html loads
   this file too.

   A 460px dialog (.c-dialog--460; .c-dialog--560 for the wider ones) with
   a 3px top rule (.c-dialog--accent; .c-dialog--caution for an expired
   link), a top row with the logo and x, and a body padded 24 x 28 with a
   gap of 18. Tokens only.
   ===================================================================== */

/* Focus is put on the dialog itself when it has no field to start in (its
   title and description are announced); the box draws no ring for that. */
.account-dialog-scrim [role="dialog"]:focus { outline: none; }

.account-dialog__top {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
}
.account-dialog__logo { display: inline-flex; height: 28px; }
.account-dialog__logo img { height: 28px; width: auto; }
/* (0,2,0): in the top row rather than the component's absolute corner. */
.account-dialog .account-dialog__close {
    position: static;
    margin: -10px -14px -10px 0;
}

/* The columns' gap (body, sign-in form, sign-up form): one value, which the
   empty live region below takes back. On the scrim, which holds every one
   of these dialogs (the sign-up dialog is not an .account-dialog). */
.account-dialog-scrim {
    --account-dialog-gap: 18px;
}

.account-dialog__body {
    display: flex;
    flex-direction: column;
    gap: var(--account-dialog-gap);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px 28px 28px;
}
.account-dialog__body[hidden] { display: none; }

.account-dialog__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.account-dialog__eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
}
.account-dialog__eyebrow:empty { display: none; }
.c-dialog--caution .account-dialog__eyebrow { color: var(--status-caution); }
/* An email address: may break anywhere rather than overflow. */
.account-dialog__eyebrow--email { overflow-wrap: anywhere; }
.account-dialog__title {
    margin: 0;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.account-dialog__help,
.account-dialog__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-muted);
    text-wrap: pretty;
}
.account-dialog__text strong { color: var(--text-primary); font-weight: 500; }
.account-dialog__lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-primary);
}
.account-dialog__lede strong { font-weight: 600; overflow-wrap: anywhere; }
.account-dialog__note {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}
.account-dialog__center { margin: 0; text-align: center; }
.account-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.account-dialog__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}
/* Live regions (role="status"/"alert"): kept rendered while empty, so
   what is written into them is announced; the negative margin takes back
   the column's gap (--account-dialog-gap), so an empty one adds no space. */
.account-dialog__message:empty { margin-top: calc(-1 * var(--account-dialog-gap)); }

/* Banners: ok (email verified, password updated) and danger (a refusal). */
.account-banner {
    --c-tone: var(--text-muted);
    margin: 0;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1px solid var(--c-tone, var(--border));
    border-left-width: 3px;
}
.account-banner[hidden] { display: none; }
.account-banner--ok { --c-tone: var(--status-ok); }
.account-banner--danger { --c-tone: var(--status-danger); }

/* Create account | Sign in: each a button that opens the other dialog. */
.account-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
}
.account-tab {
    margin: 0 0 -1px;
    padding: 0 0 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
}
.account-tab:hover:not([aria-current]) { color: var(--text-primary); }
.account-tab[aria-current="true"] {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
    cursor: default;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: var(--account-dialog-gap);
}
/* A label with a link on the right ("Forgot password?"). */
.account-field-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.account-link {
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}
.account-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.account-link--muted {
    font-size: 14px;
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.account-remember { font-size: 14px; color: var(--text-muted); }
.account-remember label { cursor: pointer; }

.account-secure {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* "Nothing arrived? …" */
.account-tip {
    margin: 0;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
}

/* Verify your email: 01 / 02 */
.account-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}
.account-steps li {
    padding: 12px 0;
    font-size: 15px;
    line-height: 1.45;
    border-bottom: 1px solid var(--border);
}

/* Create new password: the live checklist (password-checklist.js). */
.password-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 14px 0 0;
    font-size: 14px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}
.password-checklist li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
}
.password-checklist__mark { font-family: var(--font-mono); }
.password-checklist [data-state="ok"] { color: var(--text-primary); }
.password-checklist [data-state="ok"] .password-checklist__mark { color: var(--status-ok); }
.password-checklist [data-state="bad"],
.password-checklist [data-state="bad"] .password-checklist__mark { color: var(--status-danger); }

/* Sign-up: "Passwords match" under the pair (auth-handlers.js). */
.password-feedback { margin-top: -8px; font-size: 13px; color: var(--text-muted); }
.password-feedback.match { color: var(--status-ok); }
.password-feedback.mismatch { color: var(--status-danger); }

/* ----- Sign-up: 800px with the 300px inverse aside ----- */
.signup-aside__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.4;
    border-top: 1px solid color-mix(in srgb, var(--text-inverse) 25%, transparent);
}
.signup-aside__list li {
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text-inverse) 25%, transparent);
}
.signup-main {
    gap: var(--account-dialog-gap);
    padding: 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.signup-main .account-tabs { margin-right: 32px; }
.signup-form {
    display: flex;
    flex-direction: column;
    gap: var(--account-dialog-gap);
}
.signup-form__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

/* ----- Phone width: the component makes these bottom sheets ----- */
@media (max-width: 600px) {
    .account-dialog__top { padding: 12px 16px; }
    /* The top row (logo, close) stays put; the body is what scrolls. */
    .account-dialog__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
    }
    .account-dialog__pair { grid-template-columns: 1fr; }
    .account-tab { padding-top: 12px; padding-bottom: 12px; }
    .signup-main { padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); overflow: visible; }
    .signup-form__pair { grid-template-columns: 1fr; gap: 18px; }
}