/* TOPPERWORK — PUBLIC PROFILE SHARE / MORE / REPORT */

.topperwork-public-profile-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
}

.topperwork-public-profile-actions__more,
.topperwork-public-profile-actions__share,
.topperwork-dashboard-profile-public-action {
    min-height: 44px;
    border: 1px solid rgba(168, 85, 247, .42);
    border-radius: 12px;
    background: rgba(139, 92, 246, .10);
    color: var(--color-text-primary);
    cursor: pointer;
}

.topperwork-public-profile-actions__more {
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.topperwork-public-profile-actions__share,
.topperwork-dashboard-profile-public-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1rem;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
}

@media (hover:hover) and (pointer:fine) {
    .topperwork-public-profile-actions__more:hover,
    .topperwork-public-profile-actions__share:hover,
    .topperwork-dashboard-profile-public-action:hover {
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: #fff;
    }
}

.topperwork-public-profile-actions__menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 40;
    min-width: 210px;
    padding: .5rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-elevated, var(--color-surface));
    box-shadow: var(--shadow-lg);
}

.topperwork-public-profile-actions__menu button {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
}

.topperwork-profile-interaction-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(2, 16, 32, .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.topperwork-profile-interaction-modal[hidden] { display: none !important; }

.topperwork-profile-interaction-modal__dialog {
    width: min(100%, 720px);
    max-height: min(88vh, 760px);
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-xl, var(--shadow-lg));
}

.topperwork-profile-interaction-modal__header,
.topperwork-profile-interaction-modal__body,
.topperwork-profile-interaction-modal__footer {
    padding: 1.25rem;
}

.topperwork-profile-interaction-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.topperwork-profile-interaction-modal__header h2 { margin: 0; }

.topperwork-profile-interaction-modal__close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    cursor: pointer;
}

.topperwork-profile-share-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

.topperwork-profile-share-grid button,
.topperwork-profile-share-grid a {
    min-height: 100px;
    padding: .75rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-decoration: none;
    cursor: pointer;
}

.topperwork-profile-report-reasons {
    display: grid;
    gap: .75rem;
}

.topperwork-profile-report-reason {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.topperwork-profile-report-details {
    margin-top: 1.25rem;
}

.topperwork-profile-report-details textarea {
    width: 100%;
    min-height: 130px;
    resize: vertical;
}

.topperwork-profile-interaction-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    border-top: 1px solid var(--color-border-soft);
}

@media (max-width: 700px) {
    .topperwork-profile-share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.topperwork-public-freelancer__identity {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.topperwork-public-freelancer__overview {
    grid-column: 2;
    grid-row: 2;
}

.topperwork-public-freelancer__hero-card > .topperwork-public-profile-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
}

@media (max-width: 760px) {
    .topperwork-public-freelancer__identity,
    .topperwork-public-freelancer__overview,
    .topperwork-public-freelancer__hero-card > .topperwork-public-profile-actions {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .topperwork-public-freelancer__hero-card > .topperwork-public-profile-actions {
        justify-content: flex-end;
    }
}

/* Dashboard Profile Hero actions */
.topperwork-client-profile__public-actions,
.topperwork-shared-profile__public-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: .65rem;
    flex: 0 0 auto;
    min-width: 160px;
}

.topperwork-dashboard-profile-public-action:disabled {
    opacity: .55;
    cursor: not-allowed;
}
/* ==========================================================================
   DASHBOARD PROFILE HERO — DESKTOP HEIGHT
   Client + Freelancer
   ========================================================================== */

@media (min-width: 721px) {

    [data-shared-workspace="profile"]
    .topperwork-client-profile__hero,

    [data-shared-workspace="profile"]
    .topperwork-shared-profile {
        min-height:
            210px;

        padding-top:
            32px;

        padding-bottom:
            32px;
    }

}
/* Shared stylish hero surface — Client + Freelancer */
[data-shared-workspace="profile"] .topperwork-client-profile__hero,
[data-shared-workspace="profile"] .topperwork-shared-profile {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 0%, rgba(59, 130, 246, .17), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(139, 92, 246, .18), transparent 36%),
        linear-gradient(145deg, var(--color-dashboard-surface) 0%, var(--color-dashboard-surface-secondary, var(--color-dashboard-surface)) 56%, rgba(59, 130, 246, .08) 100%);
}

[data-theme="light"] [data-shared-workspace="profile"] .topperwork-client-profile__hero,
[data-theme="light"] [data-shared-workspace="profile"] .topperwork-shared-profile {
    background:
        radial-gradient(circle at 8% 0%, rgba(37, 99, 235, .12), transparent 34%),
        radial-gradient(circle at 92% 8%, rgba(139, 92, 246, .12), transparent 36%),
        linear-gradient(145deg, #FFFFFF 0%, #F7FAFF 56%, #F4F0FF 100%);
}

@media (max-width: 720px) {
    .topperwork-client-profile__public-actions,
    .topperwork-shared-profile__public-actions {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .topperwork-dashboard-profile-public-action {
        flex: 1 1 150px;
    }
}


/* ==========================================================================
   9 OCT FIX PACK — PUBLIC PROFILE / DASHBOARD PROFILE POLISH
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dashboard Profile hero — taller, stronger gradient, larger identity name
   -------------------------------------------------------------------------- */

[data-shared-workspace="profile"]
.topperwork-client-profile__hero,
[data-shared-workspace="profile"]
.topperwork-shared-profile {
    min-height:
        210px;

    padding:
        clamp(
            30px,
            3vw,
            40px
        );

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(59, 130, 246, 0.24) 0%,
            rgba(59, 130, 246, 0.08) 24%,
            transparent 46%
        ),

        radial-gradient(
            circle at 86% 16%,
            rgba(139, 92, 246, 0.24) 0%,
            rgba(139, 92, 246, 0.08) 26%,
            transparent 48%
        ),

        radial-gradient(
            circle at 52% 115%,
            rgba(37, 99, 235, 0.15) 0%,
            transparent 44%
        ),

        linear-gradient(
            135deg,
            #061525 0%,
            #081D34 34%,
            #0C2140 58%,
            #151E48 78%,
            #211747 100%
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.025),

        0
        14px
        40px
        rgba(0, 0, 0, 0.10);
}

[data-shared-workspace="profile"]
.topperwork-client-profile__hero-copy h2,
[data-shared-workspace="profile"]
.topperwork-shared-profile__identity-copy h2 {
    font-size:
        clamp(
            1.7rem,
            2.55vw,
            2.2rem
        );

    line-height:
        1.16;
}

[data-theme="light"]
[data-shared-workspace="profile"]
.topperwork-client-profile__hero,
[data-theme="light"]
[data-shared-workspace="profile"]
.topperwork-shared-profile {
    border-color:
        rgba(37, 99, 235, 0.16);

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(37, 99, 235, 0.13) 0%,
            transparent 42%
        ),

        radial-gradient(
            circle at 86% 16%,
            rgba(139, 92, 246, 0.13) 0%,
            transparent 44%
        ),

        radial-gradient(
            circle at 52% 115%,
            rgba(59, 130, 246, 0.08) 0%,
            transparent 45%
        ),

        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F5F8FF 34%,
            #EEF4FF 62%,
            #F3F0FF 82%,
            #F8F5FF 100%
        );

    box-shadow:
        0
        14px
        38px
        rgba(15, 23, 42, 0.055),

        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.75);
}


/* --------------------------------------------------------------------------
   Public Profile actions — vertical layout
   More/Flag control on top, Share below.
   -------------------------------------------------------------------------- */

.topperwork-public-profile-actions {
    flex-direction:
        column;

    align-items:
        stretch;

    justify-content:
        flex-start;

    gap:
        0.7rem;

    min-width:
        154px;
}

.topperwork-public-profile-actions__more {
    align-self:
        flex-end;
}

.topperwork-public-profile-actions__share {
    width:
        100%;
}

.topperwork-public-profile-actions__menu {
    top:
        0;

    right:
        calc(
            100%
            +
            0.75rem
        );

    min-width:
        max-content;

    max-width:
        min(
            280px,
            calc(100vw - 2rem)
        );
}

.topperwork-public-profile-actions__menu button {
    width:
        auto;

    min-width:
        max-content;

    padding:
        0.7rem
        0.9rem;

    white-space:
        nowrap;
}


/* --------------------------------------------------------------------------
   Compact global header on public Client/Freelancer profile pages.
   Dashboard topbar height = 60px.
   -------------------------------------------------------------------------- */

body.topperwork-public-profile-page {
    --topperwork-header-height:
        3.75rem;

    --topperwork-header-mobile-height:
        3.75rem;
}

body.topperwork-public-profile-page
.topperwork-header__brand-mark {
    width:
        2rem;

    height:
        2rem;
}

body.topperwork-public-profile-page
.topperwork-header__brand-text,
body.topperwork-public-profile-page
.topperwork-brand {
    font-size:
        0.95rem;
}

body.topperwork-public-profile-page
.topperwork-header__nav-link {
    padding:
        0.62rem
        0.9rem;

    font-size:
        0.875rem;
}

body.topperwork-public-profile-page
.topperwork-header__actions {
    gap:
        0.6rem;
}

body.topperwork-public-profile-page
.topperwork-header__actions .btn {
    min-height:
        40px;

    padding:
        0.55rem
        0.95rem;

    font-size:
        0.875rem;
}


/* --------------------------------------------------------------------------
   Mobile public-profile action positioning.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {

    .topperwork-public-profile-actions {
        width:
            100%;

        min-width:
            0;

        flex-direction:
            row;

        align-items:
            center;

        justify-content:
            flex-end;

        flex-wrap:
            wrap;
    }


    .topperwork-public-profile-actions__more {
        align-self:
            auto;
    }


    .topperwork-public-profile-actions__share {
        width:
            auto;
    }


    .topperwork-public-profile-actions__menu {
        top:
            calc(100% + 0.55rem);

        right:
            0;
    }

}

/* ==========================================================================
   TOPPERWORK — PUBLIC PROFILE REPORT MODAL
   Premium Dashboard-Matched Color System
   ========================================================================== */


/* ==========================================================================
   MODAL SURFACE
   ========================================================================== */

.topperwork-profile-interaction-modal__dialog {
    width:
        min(
            92vw,
            680px
        );

    max-height:
        min(
            88vh,
            820px
        );

    overflow:
        auto;

    border:
        1px solid
        #12304D;

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #07182A 0%,
            #061525 55%,
            #08182B 100%
        );

    box-shadow:
        0
        28px
        80px
        rgba(0, 0, 0, 0.48);
}


.topperwork-profile-interaction-modal__header {
    border-bottom:
        1px solid
        #102B46;
}


.topperwork-profile-interaction-modal__header h2 {
    margin:
        0;

    color:
        #FFFFFF;

    font-size:
        clamp(
            1.35rem,
            2vw,
            1.7rem
        );

    font-weight:
        800;

    line-height:
        1.25;
}


/* ==========================================================================
   CLOSE BUTTON
   ========================================================================== */

.topperwork-profile-interaction-modal__close {
    border:
        1px solid
        #173653;

    background:
        #0B2238;

    color:
        #C9D5E3;
}


@media (hover: hover) and (pointer: fine) {

    .topperwork-profile-interaction-modal__close:hover {
        border-color:
            rgba(96, 165, 250, 0.55);

        background:
            rgba(59, 130, 246, 0.16);

        color:
            #FFFFFF;
    }

}


/* ==========================================================================
   REPORT REASONS
   ========================================================================== */

.topperwork-profile-report-reasons {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    width:
        100%;
}


.topperwork-profile-report-reason {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    width:
        100%;

    padding:
        13px 14px;

    border:
        1px solid
        #14324E;

    border-radius:
        12px;

    background:
        #091D30;

    color:
        #FFFFFF;

    cursor:
        pointer;

    box-sizing:
        border-box;

    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}


.topperwork-profile-report-reason input[type="radio"] {
    flex:
        0 0 auto;

    width:
        18px;

    height:
        18px;

    margin:
        2px 0 0;

    accent-color:
        #3B82F6;

    cursor:
        pointer;
}


.topperwork-profile-report-reason span {
    min-width:
        0;

    color:
        #DDE7F2;

    font-size:
        0.9375rem;

    font-weight:
        500;

    line-height:
        1.45;
}


/* Selected */

.topperwork-profile-report-reason:has(
    input[type="radio"]:checked
) {
    border-color:
        #5B7CFA;

    background:
        linear-gradient(
            90deg,
            rgba(59, 130, 246, 0.18) 0%,
            rgba(139, 92, 246, 0.14) 100%
        );

    box-shadow:
        0
        0
        0
        1px
        rgba(96, 165, 250, 0.12),
        inset
        3px
        0
        0
        #8B5CF6;
}


.topperwork-profile-report-reason:has(
    input[type="radio"]:checked
)
span {
    color:
        #FFFFFF;
}


@media (hover: hover) and (pointer: fine) {

    .topperwork-profile-report-reason:hover {
        border-color:
            #365A7C;

        background:
            #0C2740;

        transform:
            translateY(-1px);
    }

}


/* ==========================================================================
   DETAILS FIELD
   ========================================================================== */

.topperwork-profile-report-details {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    width:
        100%;

    margin-top:
        22px;
}


.topperwork-profile-report-details label {
    color:
        #FFFFFF;

    font-size:
        0.875rem;

    font-weight:
        700;

    line-height:
        1.4;
}


.topperwork-profile-report-details textarea {
    display:
        block;

    width:
        100%;

    min-height:
        140px;

    max-height:
        320px;

    padding:
        14px 15px;

    border:
        1px solid
        #173955;

    border-radius:
        12px;

    outline:
        none;

    background:
        #051321;

    color:
        #FFFFFF;

    caret-color:
        #60A5FA;

    font:
        inherit;

    font-size:
        0.9375rem;

    line-height:
        1.5;

    resize:
        vertical;

    box-sizing:
        border-box;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background 160ms ease;
}


.topperwork-profile-report-details textarea::placeholder {
    color:
        #71849B;

    opacity:
        1;
}


.topperwork-profile-report-details textarea:focus {
    border-color:
        #3B82F6;

    background:
        #071A2B;

    box-shadow:
        0
        0
        0
        3px
        rgba(59, 130, 246, 0.13);
}


.topperwork-profile-report-details small {
    align-self:
        flex-end;

    color:
        #7F90A8;

    font-size:
        0.75rem;

    line-height:
        1.4;
}


/* ==========================================================================
   ERROR
   ========================================================================== */

.topperwork-profile-interaction-modal__body
.topperwork-profile-editor__error {
    margin:
        12px
        0
        0;

    color:
        #F87171;

    font-size:
        0.8125rem;

    line-height:
        1.45;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.topperwork-profile-interaction-modal__footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    padding-top:
        20px;

    border-top:
        1px solid
        #102B46;
}


/* Submit gets TopperWork brand gradient */

.topperwork-profile-interaction-modal__footer
.btn-primary {
    border-color:
        transparent;

    background:
        linear-gradient(
            90deg,
            #3B82F6 0%,
            #6D5DFB 52%,
            #A855F7 100%
        );

    color:
        #FFFFFF;

    box-shadow:
        0
        8px
        24px
        rgba(59, 130, 246, 0.18);
}


@media (hover: hover) and (pointer: fine) {

    .topperwork-profile-interaction-modal__footer
    .btn-primary:hover {
        background:
            linear-gradient(
                90deg,
                #60A5FA 0%,
                #7C6AFD 52%,
                #B467F8 100%
            );

        box-shadow:
            0
            10px
            28px
            rgba(96, 165, 250, 0.24);
    }

}


/* Cancel */

.topperwork-profile-interaction-modal__footer
.btn-outline {
    border-color:
        #28465F;

    background:
        #0A2034;

    color:
        #D5E0EC;
}


@media (hover: hover) and (pointer: fine) {

    .topperwork-profile-interaction-modal__footer
    .btn-outline:hover {
        border-color:
            #3B82F6;

        background:
            #102A43;

        color:
            #FFFFFF;
    }

}


/* ==========================================================================
   LIGHT THEME
   ========================================================================== */

[data-theme="light"]
.topperwork-profile-interaction-modal__dialog {
    border-color:
        #DCE5EF;

    background:
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F8FAFC 100%
        );

    box-shadow:
        0
        24px
        70px
        rgba(15, 23, 42, 0.16);
}


[data-theme="light"]
.topperwork-profile-interaction-modal__header,
[data-theme="light"]
.topperwork-profile-interaction-modal__footer {
    border-color:
        #E2E8F0;
}


[data-theme="light"]
.topperwork-profile-interaction-modal__header h2 {
    color:
        #0F172A;
}


[data-theme="light"]
.topperwork-profile-report-reason {
    border-color:
        #DCE5EF;

    background:
        #F8FAFC;
}


[data-theme="light"]
.topperwork-profile-report-reason span {
    color:
        #334155;
}


[data-theme="light"]
.topperwork-profile-report-reason:has(
    input[type="radio"]:checked
) {
    border-color:
        #4F7CF7;

    background:
        linear-gradient(
            90deg,
            rgba(37, 99, 235, 0.09) 0%,
            rgba(139, 92, 246, 0.08) 100%
        );

    box-shadow:
        inset
        3px
        0
        0
        #8B5CF6;
}


[data-theme="light"]
.topperwork-profile-report-reason:has(
    input[type="radio"]:checked
)
span {
    color:
        #0F172A;
}


[data-theme="light"]
.topperwork-profile-report-details label {
    color:
        #0F172A;
}


[data-theme="light"]
.topperwork-profile-report-details textarea {
    border-color:
        #CBD5E1;

    background:
        #FFFFFF;

    color:
        #0F172A;
}


[data-theme="light"]
.topperwork-profile-report-details textarea::placeholder {
    color:
        #94A3B8;
}


[data-theme="light"]
.topperwork-profile-report-details textarea:focus {
    border-color:
        #2563EB;

    background:
        #FFFFFF;

    box-shadow:
        0
        0
        0
        3px
        rgba(37, 99, 235, 0.10);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    .topperwork-profile-interaction-modal__dialog {
        width:
            calc(
                100vw
                -
                24px
            );

        max-height:
            calc(
                100vh
                -
                24px
            );

        border-radius:
            16px;
    }


    .topperwork-profile-report-reason {
        padding:
            12px;
    }


    .topperwork-profile-report-reason span {
        font-size:
            0.875rem;
    }


    .topperwork-profile-report-details textarea {
        min-height:
            120px;
    }


    .topperwork-profile-interaction-modal__footer {
        flex-direction:
            column-reverse;

        align-items:
            stretch;
    }


    .topperwork-profile-interaction-modal__footer
    .btn {
        width:
            100%;

        min-height:
            44px;
    }

}

/* ==========================================================================
   DASHBOARD PROFILE HERO — MOBILE LAYOUT FIX
   Client + Freelancer
   ========================================================================== */

@media (max-width: 720px) {

    /* ----------------------------------------------------------------------
       Client hero
       ---------------------------------------------------------------------- */

    [data-shared-workspace="profile"]
    .topperwork-client-profile__hero {
        display:
            grid;

        grid-template-columns:
            minmax(0, 1fr);

        align-items:
            stretch;

        justify-content:
            initial;

        gap:
            18px;

        width:
            100%;

        min-width:
            0;

        min-height:
            0;

        padding:
            20px;
    }


    [data-shared-workspace="profile"]
    .topperwork-client-profile__hero-main {
        display:
            grid;

        grid-template-columns:
            auto
            minmax(0, 1fr);

        align-items:
            center;

        gap:
            14px;

        width:
            100%;

        min-width:
            0;
    }


    [data-shared-workspace="profile"]
    .topperwork-client-profile__hero-copy {
        width:
            100%;

        min-width:
            0;
    }


    [data-shared-workspace="profile"]
    .topperwork-client-profile__title-row {
        display:
            flex;

        align-items:
            center;

        flex-wrap:
            wrap;

        gap:
            8px;

        width:
            100%;

        min-width:
            0;
    }


    [data-shared-workspace="profile"]
    .topperwork-client-profile__hero-copy h2 {
        max-width:
            100%;

        overflow-wrap:
            break-word;

        word-break:
            normal;

        hyphens:
            auto;

        font-size:
            clamp(
                1.25rem,
                6vw,
                1.65rem
            );

        line-height:
            1.22;
    }


    [data-shared-workspace="profile"]
    .topperwork-client-profile__hero-copy > p {
        max-width:
            100%;

        overflow-wrap:
            break-word;

        word-break:
            normal;

        line-height:
            1.45;
    }


    /* ----------------------------------------------------------------------
       Public actions no longer steal width from identity
       ---------------------------------------------------------------------- */

    [data-shared-workspace="profile"]
    .topperwork-client-profile__public-actions {
        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            10px;

        width:
            100%;

        min-width:
            0;
    }


    [data-shared-workspace="profile"]
    .topperwork-client-profile__public-actions
    .topperwork-dashboard-profile-public-action {
        width:
            100%;

        min-width:
            0;

        min-height:
            44px;
    }


    /* ----------------------------------------------------------------------
       Freelancer shared hero
       ---------------------------------------------------------------------- */

    [data-shared-workspace="profile"]
    .topperwork-shared-profile {
        min-height:
            0;

        padding:
            20px;
    }


    [data-shared-workspace="profile"]
    .topperwork-shared-profile__identity {
        width:
            100%;

        min-width:
            0;
    }


    [data-shared-workspace="profile"]
    .topperwork-shared-profile__identity-copy {
        flex:
            1 1 auto;

        width:
            auto;

        min-width:
            0;
    }


    [data-shared-workspace="profile"]
    .topperwork-shared-profile__identity-copy h2 {
        max-width:
            100%;

        overflow:
            visible;

        overflow-wrap:
            break-word;

        word-break:
            normal;

        text-overflow:
            clip;
    }


    [data-shared-workspace="profile"]
    .topperwork-shared-profile__public-actions {
        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            10px;

        width:
            100%;

        min-width:
            0;

        margin-top:
            18px;
    }


    [data-shared-workspace="profile"]
    .topperwork-shared-profile__public-actions
    .topperwork-dashboard-profile-public-action {
        width:
            100%;

        min-width:
            0;

        min-height:
            44px;
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

    [data-shared-workspace="profile"]
    .topperwork-client-profile__hero {
        padding:
            16px;
    }


    [data-shared-workspace="profile"]
    .topperwork-client-profile__hero-main {
        grid-template-columns:
            54px
            minmax(0, 1fr);

        gap:
            12px;
    }


    [data-shared-workspace="profile"]
    .topperwork-client-profile__public-actions,

    [data-shared-workspace="profile"]
    .topperwork-shared-profile__public-actions {
        grid-template-columns:
            1fr;
    }

}