/* =============================================================================
   Profile page — overlap header (option 1b)
   -----------------------------------------------------------------------------
   Appended to the mf-* layer. Nothing existing is overridden except the hero
   height, via a --profile modifier. All values are existing tokens.
   ========================================================================== */

.mf-profile-head {
    overflow: hidden;
    padding: 0;
}

/* The record hero is 220px and carries text on its left third. Here the text
   sits below the cover, so it is shorter and the directional scrim is dropped
   in favour of an even one — the avatar straddles the bottom edge and needs
   consistent tone behind its white ring, not a gradient that fades out. */
.mf-hero--profile img {
    height: 200px;
}

.mf-hero--profile::after {
    background: linear-gradient(180deg, rgba(20,26,34,.25) 0%, rgba(20,26,34,.55) 100%);
}

.mf-profile-cover-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    background: rgba(13,16,21,.72);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

    .mf-profile-cover-btn:hover,
    .mf-profile-cover-btn:focus-visible {
        background: rgba(13,16,21,.88);
    }

/* -------- Identity row -------- */
.mf-profile-identity {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    padding: 0 1.75rem 1.25rem;
    /* Pulls the row up so the avatar overlaps the cover by 56px. */
    margin-top: -56px;
}

.mf-profile-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.mf-profile-avatar {
    display: block;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--mf-surface);
    /* Hairline outside the ring so the circle still separates from the cover
       under the light themes, where surface is white and parts of the photo
       are pale. */
    box-shadow: 0 0 0 1px rgba(20,26,34,.14), 0 6px 18px -8px rgba(20,26,34,.55);
}

.mf-profile-avatar-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--mf-surface);
    background: var(--mf-accent, #B0332E);
    color: #fff;
    font-size: .85rem;
    cursor: pointer;
}

.mf-profile-titles {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: .35rem;
}

.mf-profile-nameline {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.mf-profile-alias {
    font-family: Consolas, 'Courier New', monospace;
    font-size: .8rem;
    color: var(--mf-muted);
}

.mf-profile-actions {
    flex: 0 0 auto;
    display: flex;
    gap: .5rem;
    padding-bottom: .35rem;
}

.mf-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    border: 1px solid var(--mf-border);
    border-radius: 999px;
    background: var(--mf-surface);
    color: var(--mf-ink);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .mf-profile-btn:hover,
    .mf-profile-btn:focus-visible {
        background: var(--mf-canvas);
        color: var(--mf-ink);
    }

.mf-profile-btn--primary {
    border-color: var(--mf-accent, #B0332E);
    background: var(--mf-accent, #B0332E);
    color: #fff;
}

    .mf-profile-btn--primary:hover,
    .mf-profile-btn--primary:focus-visible {
        background: color-mix(in oklab, var(--mf-accent, #B0332E) 88%, #000 12%);
        color: #fff;
    }

/* -------- Responsive -------- */
/* Under 768 the row stacks and centres: a 132px avatar plus a name plus two
   buttons cannot share a phone-width line. */
@media (max-width: 767.98px) {
    .mf-profile-identity {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .75rem;
        padding: 0 1rem 1.25rem;
        margin-top: -48px;
    }

    .mf-profile-avatar {
        width: 108px;
        height: 108px;
    }

    .mf-profile-nameline {
        justify-content: center;
    }

    .mf-profile-titles,
    .mf-profile-actions {
        padding-bottom: 0;
    }

    .mf-profile-actions {
        width: 100%;
    }

    .mf-profile-btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .mf-hero--profile img {
        height: 150px;
    }
}