/* Crestide account/profile/password lifecycle surfaces. */

.account-lifecycle-page .auth-layout-single {
    align-items: center;
    display: flex;
    justify-content: center;
    max-width: none;
    padding: clamp(2rem, 6vh, 4rem) 1.25rem 5rem;
    width: 100%;
}

.account-lifecycle-page .auth-layout-single .account-main {
    max-width: 31rem;
    width: 100%;
}

.account-lifecycle-page .account-layout-wide .account-main {
    max-width: 46rem;
}

.auth-field-label-row {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.auth-field-label-row a,
.account-lifecycle-page a:not(.button) {
    color: var(--color-primary-strong);
    font-size: 0.78rem;
    font-weight: 680;
    text-decoration: none;
}

.auth-field-label-row a:hover,
.auth-field-label-row a:focus-visible,
.account-lifecycle-page a:not(.button):hover,
.account-lifecycle-page a:not(.button):focus-visible {
    text-decoration: underline;
}

.auth-help-text {
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

.auth-help-text ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

.auth-state-block {
    display: grid;
    gap: 1rem;
}

.auth-state-block p {
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0;
}

.account-heading-row {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.account-heading-row > div {
    min-width: 0;
}

.account-back-link {
    flex: 0 0 auto;
    margin: 0;
}

.account-message-stack {
    margin-bottom: 1rem;
}

.account-message {
    background: color-mix(in srgb, var(--color-success) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-success) 18%, var(--color-border));
    border-radius: var(--radius-control);
    color: var(--color-text);
    font-size: 0.8rem;
    padding: 0.7rem 0.8rem;
}

.account-section {
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: 1rem;
    padding: 1.15rem 0 0;
}

.account-section + .account-section {
    margin-top: 1.25rem;
}

.account-section-heading h2 {
    color: var(--color-text);
    font-size: 0.95rem;
    margin: 0;
}

.account-section-heading p {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0.3rem 0 0;
}

.account-readonly-field {
    background: var(--color-surface-soft);
    border-radius: var(--radius-control);
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 0.85rem;
}

.account-readonly-field span {
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 680;
}

.account-readonly-field strong {
    color: var(--color-text);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.account-two-column-fields {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-form-actions {
    display: flex;
    justify-content: flex-end;
}

.account-form-actions .button,
.account-security-row > .button {
    margin: 0;
}

.account-security-row {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
}

.account-membership-list {
    display: grid;
}

.account-membership-row {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: 3.5rem;
    padding: 0.45rem 0;
}

.account-membership-row + .account-membership-row {
    border-top: 1px solid var(--color-border);
}

.account-membership-row > div {
    display: grid;
    gap: 0.15rem;
}

.account-membership-row strong {
    color: var(--color-text);
    font-size: 0.84rem;
}

.account-membership-row span {
    color: var(--color-muted);
    font-size: 0.75rem;
}

.account-membership-row form,
.account-membership-row .button {
    margin: 0;
}

@media (min-width: 821px) {
    .account-lifecycle-page .account-panel {
        padding: 1.75rem;
    }
}

@media (max-width: 620px) {
    .account-lifecycle-page .auth-layout-single {
        align-items: start;
        padding: 1.5rem 0.85rem 3rem;
    }

    .account-heading-row {
        display: grid;
    }

    .account-back-link {
        justify-self: start;
    }

    .account-two-column-fields,
    .account-security-row {
        grid-template-columns: 1fr;
    }

    .account-security-row > .button {
        justify-self: start;
    }
}

/* Account settings use one surface with aligned section rows. */
.account-page.account-settings-page { background: var(--color-surface); }
.account-settings-page .auth-layout-single { align-items: start; padding: 2.5rem 1.5rem 3rem; }
.account-settings-page .account-layout-wide .account-main { max-width: 56rem; }
.account-settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 0; padding: 1.5rem 1.75rem; }
.account-settings-heading > div { min-width: 0; }
.account-settings-heading h1 { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.35; letter-spacing: -.025em; }
.account-settings-heading p { margin: .5rem 0 0; color: var(--color-text-secondary); font-size: .875rem; line-height: 1.6; }
.account-settings-page .account-settings-heading .account-back-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--color-text-secondary); font-size: .875rem; font-weight: 500; line-height: 1.5; text-decoration: none; }
.account-back-link svg { width: 18px; height: 18px; flex: none; }
.account-settings-page .account-panel { padding: 0; background: var(--color-surface-card); box-shadow: var(--shadow-card); }
.account-settings-page .account-section { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: start; gap: 2rem; margin: 0; padding: 1.75rem; }
.account-settings-page .account-section:first-child { border-top: 0; }
.account-settings-page .account-section-heading h2 { font-size: 1rem; font-weight: 600; line-height: 1.5; }
.account-settings-page .account-section-heading p { margin-top: .5rem; font-size: .875rem; line-height: 1.6; }
.account-section-body { display: grid; gap: 1rem; min-width: 0; }
.account-settings-page .account-readonly-field { gap: .25rem; padding: 0; background: transparent; }
.account-settings-page .account-readonly-field span,
.account-settings-page .auth-field label { font-size: .875rem; font-weight: 500; line-height: 1.5; }
.account-settings-page .account-readonly-field strong { font-size: .875rem; font-weight: 500; line-height: 1.5; }
.account-field-help { margin: -.5rem 0 0; color: var(--color-muted); font-size: .8125rem; line-height: 1.6; }
.account-settings-page .auth-form { display: grid; gap: 1rem; }
.account-settings-page .auth-field { display: grid; gap: .5rem; min-width: 0; }
.account-settings-page .auth-field input { min-height: 44px; width: 100%; margin: 0; font-size: 1rem; }
.account-settings-page .account-form-actions { justify-content: flex-start; }
.account-settings-page .account-panel .button { min-height: 44px; margin: 0; font-size: .875rem; font-weight: 500; line-height: 1.5; }
.account-settings-page .errorlist { margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-danger); font-size: .875rem; list-style: none; }
.account-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; }
.account-setting-label { font-size: .875rem; font-weight: 500; }
.account-password-row { margin-top: .25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.account-settings-page .account-message-stack { margin: 0 1.75rem 1.25rem; }
.account-settings-page .push-notification-status { margin: 0; font-size: .875rem; line-height: 1.6; }
.account-settings-page .push-notification-actions { margin: 0; gap: .75rem; }
.account-settings-page [data-push-notifications] [hidden] { display: none !important; }
.account-settings-page .account-panel .account-quiet-action { border-color: transparent; background: transparent; color: var(--color-text-secondary); box-shadow: none; }
.account-settings-page .account-panel .account-quiet-action:hover { background: var(--color-surface-soft); color: var(--color-text); }
.tenant-page.account-settings-page .page-content { padding-top: 1.5rem; }
.account-password-shell { max-width: 36rem; }
.account-security-content { padding: 1.75rem; }
.account-security-content .auth-content-header { margin-bottom: 1.5rem; }
.account-security-content .auth-content-kicker { display: none; }
.account-security-content h1 { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.35; letter-spacing: -.025em; }
.account-security-content .auth-content-header > p { margin: .5rem 0 0; color: var(--color-text-secondary); font-size: .875rem; line-height: 1.6; }
.account-security-content .auth-secondary-actions { margin-top: 1rem; }
@media (max-width: 700px) {
    .account-settings-page .auth-layout-single { padding: 1.5rem 1rem 2rem; }
    .account-settings-heading { align-items: stretch; flex-direction: column; gap: 1rem; padding: 1.5rem 1.25rem; }
    .account-settings-page .account-settings-heading .account-back-link { align-self: flex-start; }
    .account-settings-page .account-section { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 1.25rem; }
    .account-settings-page .account-two-column-fields { grid-template-columns: minmax(0, 1fr); }
    .account-security-content { padding: 1.5rem 1.25rem; }
}
@media (max-width: 400px) {
    .account-settings-page .account-section { padding-inline: 1rem; }
    .account-settings-heading { padding-inline: 1rem; }
    .account-settings-page .account-form-actions .button { width: 100%; }
}