.account-page {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--wa-space-l) var(--wa-space-l) var(--wa-space-3xl);
}

.account-anon-callout p {
    margin: var(--wa-space-xs) 0 var(--wa-space-s);
}

/* ── Identity row ─────────────────────────────────────────────── */
.account-identity {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
}
.account-identity-title {
    margin: 0;
    font-size: var(--wa-font-size-l);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
}
.account-identity-email {
    margin: 0;
    color: var(--wa-color-text-normal);
    font-size: var(--wa-font-size-s);
}
.account-identity-guest {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-xs);
    color: var(--wa-color-warning-on-quiet);
    font-size: var(--wa-font-size-s);
}

/* ── Active brand section ─────────────────────────────────────── */
.account-brand-active {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-l);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    overflow: hidden;
    background: var(--wa-color-surface-default);
}

.account-brand-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-m);
    padding: var(--wa-space-m) var(--wa-space-l);
    background: var(--brand-primary);
    color: var(--card-fg);
}
.account-brand-hero-body {
    display: flex;
    align-items: center;
    gap: var(--wa-space-m);
    min-width: 0;
    flex: 1;
}
.account-brand-hero-logo {
    height: 40px;
    max-width: 180px;
    object-fit: contain;
    flex-shrink: 0;
}
.account-brand-hero-title {
    font-size: var(--wa-font-size-l);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-brand-hero-remove {
    --wa-color-neutral-on-quiet: var(--card-fg);
    color: var(--card-fg);
    flex-shrink: 0;
}

/* ── Editable fields ──────────────────────────────────────────── */
.account-brand-fields {
    padding: 0 var(--wa-space-l) var(--wa-space-l);
}

.account-field {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
}
.account-field > label {
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    color: var(--wa-color-text-normal);
}
.account-field-hint {
    margin: 0;
    font-size: var(--wa-font-size-2xs);
    color: var(--wa-color-text-quiet);
    line-height: var(--wa-line-height-normal);
}

.account-address-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--wa-space-xs);
}
@media (max-width: 580px) {
    .account-address-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* ── Other brands list ────────────────────────────────────────── */
.account-section-title {
    margin: 0 0 var(--wa-space-s);
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-semibold);
    color: var(--wa-color-text-normal);
}
.account-other-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    overflow: hidden;
}
.account-other-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-m);
    padding: var(--wa-space-s) var(--wa-space-m);
    border-bottom: 1px solid var(--wa-color-surface-border);
}
.account-other-item:last-child {
    border-bottom: none;
}
.account-other-label {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    min-width: 0;
    flex: 1;
}
.account-other-name {
    font-weight: var(--wa-font-weight-semibold);
    font-size: var(--wa-font-size-s);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Empty state (zero brands) ───────────────────────────────── */
.account-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-2xl) var(--wa-space-l);
    border: 1px dashed var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    background: var(--wa-color-surface-default);
}
.account-empty-icon {
    font-size: 40px;
    color: var(--wa-color-text-quiet);
}
.account-empty-title {
    margin: 0;
    font-size: var(--wa-font-size-m);
    font-weight: var(--wa-font-weight-semibold);
}
.account-empty-body {
    margin: 0 0 var(--wa-space-xs);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

/* ── Footer rows ─────────────────────────────────────────────── */
.account-add-row {
    padding-top: var(--wa-space-m);
    border-top: 1px solid var(--wa-color-surface-border);
}
.account-signout-row {
    padding-top: var(--wa-space-s);
}

.account-remove-note {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-2xs);
    margin: 0;
}

/* ── Account dialog — settings-app shell ─────────────────────────── */

#account-dialog {
    --height: min(640px, 88vh);
}
#account-dialog::part(body) {
    padding: 0;
    overflow: hidden;
}

.account-shell {
    display: grid;
    grid-template-columns: 250px 1fr;
    height: 100%;
    color: var(--wa-color-text-normal);
}

.account-sidebar {
    background: transparent;
    border-right: 1px solid var(--wa-color-surface-border);
    display: flex;
    flex-direction: column;
    padding: var(--wa-space-m) 0;
    overflow-y: auto;
}

.account-side-divider {
    margin: var(--wa-space-2xs) var(--wa-space-s);
}

.account-side-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wa-space-xs);
    padding: var(--wa-space-2xs) var(--wa-space-s);
    margin: 1px var(--wa-space-2xs);
    border: none;
    border-radius: var(--wa-border-radius-m);
    background: transparent;
    color: var(--wa-color-text-normal);
    font: inherit;
    font-size: var(--wa-font-size-s);
    text-align: left;
    cursor: pointer;
    width: calc(100% - var(--wa-space-xs));
}
.account-side-item:hover {
    background: color-mix(in oklab, var(--wa-color-surface-default) 55%, transparent);
}

/* Currently-shown section: subtle translucent chip. Distinct from the
   active-brand dot (persistent app-wide marker) — this one moves as
   you click around, the dot doesn't. */
.account-side-item[aria-current="true"] {
    background: color-mix(in oklab, var(--wa-color-surface-default) 75%, transparent);
}

/* "Currently active brand" — single persistent indicator, never moves
   when the user clicks around. Pushed to the row's right edge by the
   .account-side-name flex:1 above. */
.account-side-active-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wa-color-text-normal);
    flex-shrink: 0;
}

/* Icon glyph fills the same 18px box as .account-side-swatch so labels
   align flush-left across icon-bearing and swatch-bearing rows. */
.account-side-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--wa-color-text-quiet);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.account-side-swatch {
    width: 18px;
    height: 18px;
    border-radius: var(--wa-border-radius-s);
    flex-shrink: 0;
}

.account-side-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-side-add {
    color: var(--wa-color-text-quiet);
}

/* Pin My Account + its divider to the bottom of the sidebar flex column. */
.account-side-divider--pin {
    margin-top: auto;
}

.account-content-pane {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.account-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.account-section-titlebar {
    padding: var(--wa-space-l) var(--wa-space-l) var(--wa-space-s);
    display: flex;
    align-items: center;
    gap: var(--wa-space-m);
}

.account-logo-chip {
    width: 52px;
    height: 52px;
    border-radius: var(--wa-border-radius-m);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.account-logo-chip--on-white {
    background: var(--wa-color-surface-default);
    box-shadow:
        var(--wa-shadow-s),
        0 0 0 1px var(--wa-color-surface-border);
}
.account-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.account-section-title {
    font-size: var(--wa-font-size-2xl);
    font-weight: var(--wa-font-weight-bold);
    line-height: var(--wa-line-height-condensed);
    margin: 0;
}

.account-section-form {
    padding: var(--wa-space-2xs) var(--wa-space-l) var(--wa-space-m);
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-m);
    max-width: 510px;
    flex: 1;
}

/* Short fields — apt/suite, phone — visually narrower so they don't
   read as full-width inputs that you should type a long string into. */
.account-address-line2,
.account-phone {
    max-width: 50%;
}

.account-field-label {
    font-family: var(--is-font-condensed);
    font-size: var(--wa-font-size-l);
    font-weight: 700;
    line-height: var(--wa-line-height-condensed);
    letter-spacing: 0.01em;
    color: var(--wa-color-text-normal);
}

.account-field-readonly {
    padding: var(--wa-space-2xs) var(--wa-space-s);
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-s);
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.account-newsletter {
    padding: var(--wa-space-s) 0;
    border-top: 1px solid var(--wa-color-surface-border);
}

.account-section-footer {
    padding: var(--wa-space-s) var(--wa-space-l);
    border-top: 1px solid var(--wa-color-surface-border);
    background: var(--wa-color-surface-default);
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    max-width: 510px;
}
.account-section-footer-spacer {
    flex: 1;
}

@media (max-width: 640px) {
    #account-dialog {
        --height: auto;
    }
    #account-dialog::part(body) {
        overflow: auto;
    }
    .account-shell {
        grid-template-columns: 1fr;
        height: auto;
    }
    .account-sidebar,
    .account-content-pane {
        overflow-y: visible;
    }
    .account-sidebar {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--wa-color-surface-default);
        border-right: none;
        border-bottom: 1px solid var(--wa-color-surface-border);
        padding: var(--wa-space-2xs) 0;
    }
    .account-section-form {
        max-width: none;
    }
}