.cb-account-header {
    padding-top: 24px;
    padding-bottom: 32px;
}

.cb-account-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
}

.cb-account-avatar {
    --cb-avatar: 56px;
    font-size: 20px;
    line-height: 28px;
}

.cb-account-identity-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* fixed heights: JS fills name and stats in, and the tabs below must not shift */
.entry-content .cb-account-name {
    min-height: 32px;
    margin: 0;
    overflow: hidden;
    color: var(--global-palette3);
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-content .cb-account-stats {
    min-height: 20px;
    margin: 0;
    color: var(--global-palette5);
    font-size: 14px;
    line-height: 20px;
}

/* the loading bars (shortcodes/account-header.php) centred in their lines, the stats bar as wide as a short stats line */
.cb-account-name .cb-skeleton-line {
    margin: 6px 0;
}

.cb-account-stats .cb-skeleton-line {
    width: 120px;
}

.entry-content .cb-account-title {
    margin: 24px 0 0;
    color: var(--global-palette3);
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
}

.entry-content .cb-account-intro {
    max-width: 720px;
    margin: 4px 0 0;
    color: var(--global-palette5);
    font-size: 14px;
    line-height: 20px;
}

@media (max-width: 850px) {
    .cb-account-header {
        padding-top: 16px;
    }

    .cb-account-tabs {
        gap: 24px;
    }

    .cb-account-identity {
        gap: 12px;
        padding-bottom: 16px;
    }

    .cb-account-avatar {
        --cb-avatar: 48px;
    }

    .entry-content .cb-account-name {
        min-height: 28px;
        font-size: 20px;
        line-height: 28px;
    }

    .cb-account-name .cb-skeleton-line {
        margin: 4px 0;
    }

    .entry-content .cb-account-title {
        margin-top: 16px;
    }
}

/* phones: bleeds into the 16px gutter so the tab row scrolls edge to edge */
@media (max-width: 767px) {
    /* 20, not 24: all four tabs fit from 381px wide (many phones are 384-392) */
    .cb-account-tabs {
        gap: 20px;
        margin: 0 -16px;
        padding: 0 16px;
        overscroll-behavior-x: contain;
        scroll-padding: 0 16px;
    }
}