/* Settings: a left-aligned column of sections split by rules, like Progress */
.settings-layout h1 {
    margin: 0 0 var(--space-6);
    font-size: var(--fs-3xl);
}

.settings-section {
    padding-top: var(--space-5);
    margin-top: var(--space-6);
    border-top: 1px solid var(--hair);
}

.settings-section h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-lg);
}

.settings-note {
    margin: 0 0 var(--space-4);
    max-width: 60ch;
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

/* One sign-in banner at the top while signed out; the account sections are hidden */
.signin-banner {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--hair);
}

.signin-banner p {
    margin: 0;
}

.signed-out .signin-banner {
    display: flex;
}

.signed-out .account-only {
    display: none;
}

.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* The same swatches as the old account menu, larger */
.settings-themes .nav-board-theme {
    width: 72px;
    height: 44px;
}

.accounts-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin: 0;
}

.accounts-form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.verified-chip {
    color: var(--ink-2);
    font-size: var(--fs-xs, 0.75rem);
    border: 1px solid var(--line, currentColor);
    border-radius: 999px;
    padding: 0 var(--space-2, 8px);
}

.account-ratings {
    color: var(--ink-3);
    font-size: var(--fs-xs, 0.75rem);
}

.account-ratings:empty {
    display: none;
}

.accounts-verify {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.accounts-verify-note,
.accounts-verify-steps p {
    margin: 0;
    color: var(--ink-2);
    font-size: var(--fs-sm);
}

.accounts-verify-row,
.accounts-verify-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

@media (max-width: 760px) {
    .accounts-form label {
        flex: 1 1 100%;
    }
}