/* ==========================================================================
   TOPPERWORK — PUBLIC JOB DETAIL
   Phase: 6H
   ========================================================================== */

.topperwork-public-job {
    width: 100%;
    min-width: 0;
    padding:
        clamp(1.25rem, 3vw, 2rem)
        var(--space-6)
        clamp(3rem, 6vw, 5rem);
    box-sizing: border-box;
}

.topperwork-public-job__container {
    width: 100%;
    max-width: var(--container-max-width);
    min-width: 0;
    margin: 0 auto;
}

.topperwork-public-job__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1rem;
    color: var(--color-text-muted);
    font-size: 0.86rem;
}

.topperwork-public-job__breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
}

.topperwork-public-job__breadcrumb a:hover {
    color: var(--color-primary-hover);
}

.topperwork-public-job__breadcrumb i {
    font-size: 0.66rem;
}

.topperwork-public-job__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(1rem, 2.4vw, 1.5rem);
    align-items: start;
}

.topperwork-public-job__main,
.topperwork-public-job__aside {
    min-width: 0;
}

.topperwork-public-job__hero,
.topperwork-public-job__card,
.topperwork-public-job__client-card,
.topperwork-public-job__action-card {
    border:
        1px solid
        var(--color-dashboard-border, var(--color-border));
    border-radius: 22px;
    background:
        var(--color-dashboard-surface, var(--color-surface));
    box-shadow: var(--shadow-lg);
}

.topperwork-public-job__hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.4rem, 3.2vw, 2.35rem);
    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(59, 130, 246, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(139, 92, 246, 0.18),
            transparent 38%
        ),
        var(--color-dashboard-surface, var(--color-surface));
}

.topperwork-public-job__hero-topline,
.topperwork-public-job__hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.topperwork-public-job__hero-topline {
    justify-content: space-between;
}

.topperwork-public-job__status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border:
        1px solid
        var(--color-success-border);
    border-radius: 999px;
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: 0.78rem;
    font-weight: 800;
}

.topperwork-public-job__published,
.topperwork-public-job__hero-meta {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.topperwork-public-job__published time {
    color: var(--color-text-secondary);
    font-weight: 700;
}

.topperwork-public-job__hero h1 {
    max-width: 920px;
    margin: 1.15rem 0 0.8rem;
    color: var(--color-text-primary);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.topperwork-public-job__hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.topperwork-public-job__hero-meta i {
    color: var(--color-primary);
}

.topperwork-public-job__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.topperwork-public-job__metric {
    min-width: 0;
    padding: 1rem;
    border:
        1px solid
        var(--color-dashboard-divider, var(--color-border-soft));
    border-radius: 15px;
    background:
        var(--color-dashboard-surface-hover, var(--color-surface-secondary));
}

.topperwork-public-job__metric span,
.topperwork-public-job__preference-grid span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.topperwork-public-job__metric strong,
.topperwork-public-job__preference-grid strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.topperwork-public-job__weekly-limit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.topperwork-public-job__weekly-limit i {
    color: var(--color-accent);
}

.topperwork-public-job__card {
    margin-top: 1rem;
    padding: clamp(1.25rem, 2.8vw, 1.85rem);
}

.topperwork-public-job__card h2,
.topperwork-public-job__client-card h2,
.topperwork-public-job__action-card h2 {
    margin: 0;
    color: var(--color-text-primary);
}

.topperwork-public-job__card h2 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.topperwork-public-job__description {
    margin-top: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.topperwork-public-job__description > :first-child {
    margin-top: 0;
}

.topperwork-public-job__description > :last-child {
    margin-bottom: 0;
}

.topperwork-public-job__description ul,
.topperwork-public-job__description ol {
    padding-left: 1.35rem;
}

.topperwork-public-job__taxonomy-group +
.topperwork-public-job__taxonomy-group {
    margin-top: 1.35rem;
}

.topperwork-public-job__taxonomy-group h3,
.topperwork-public-job__preferred-locations h3 {
    margin: 10px 0 0.7rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.topperwork-public-job__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.topperwork-public-job__pills > span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.4rem 0.75rem;
    border:
        1px solid
        var(--color-dashboard-divider, var(--color-border-soft));
    border-radius: 999px;
    background:
        var(--color-dashboard-surface-hover, var(--color-surface-secondary));
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.topperwork-public-job__supporting-copy {
    margin: 0.55rem 0 0;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.topperwork-public-job__questions {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding-left: 1.4rem;
    color: var(--color-text-secondary);
}

.topperwork-public-job__questions li {
    padding-left: 0.35rem;
    line-height: 1.55;
}

.topperwork-public-job__preference-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.topperwork-public-job__preference-grid > div {
    padding: 0.9rem;
    border:
        1px solid
        var(--color-dashboard-divider, var(--color-border-soft));
    border-radius: 14px;
    background:
        var(--color-dashboard-surface-hover, var(--color-surface-secondary));
}

.topperwork-public-job__preferred-locations {
    margin-top: 1.2rem;
}

.topperwork-public-job__aside-sticky {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
}

.topperwork-public-job__client-card,
.topperwork-public-job__action-card {
    padding: 1.25rem;
}

.topperwork-public-job__aside-eyebrow {
    display: inline-block;
    margin-bottom: 0.45rem;
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.topperwork-public-job__client-card h2,
.topperwork-public-job__action-card h2 {
    font-size: 1.15rem;
}

.topperwork-public-job__client-facts {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.topperwork-public-job__client-facts > div {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.topperwork-public-job__client-facts i {
    width: 18px;
    margin-top: 0.15rem;
    color: var(--color-primary);
    text-align: center;
}

.topperwork-public-job__client-facts
.topperwork-verification-badge {
    margin-top: 0.08rem;
}

.topperwork-public-job__client-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 800;
}

.topperwork-public-job__client-link:hover {
    color: var(--color-primary-hover);
}

.topperwork-public-job__action-card p {
    margin: 0.55rem 0 1rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

.topperwork-public-job__primary-action,
.topperwork-public-job__secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 800;
}

.topperwork-public-job__primary-action {
    border: 0;
    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-accent)
        );
    color: var(--color-text-on-primary);
}

.topperwork-public-job__primary-action:hover {
    filter: brightness(1.06);
}

.topperwork-public-job__primary-action--disabled {
    cursor: not-allowed;
    opacity: 0.58;
    filter: none;
}

.topperwork-public-job__secondary-action {
    margin-top: 0.65rem;
    border:
        1px solid
        var(--color-dashboard-border, var(--color-border));
    background: transparent;
    color: var(--color-text-secondary);
}

.topperwork-public-job__secondary-action:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 980px) {
    .topperwork-public-job__layout {
        grid-template-columns: 1fr;
    }

    .topperwork-public-job__aside-sticky {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .topperwork-public-job__metrics,
    .topperwork-public-job__preference-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topperwork-public-job__aside-sticky {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .topperwork-public-job {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .topperwork-public-job__hero,
    .topperwork-public-job__card,
    .topperwork-public-job__client-card,
    .topperwork-public-job__action-card {
        border-radius: 16px;
    }

    .topperwork-public-job__hero-topline {
        align-items: flex-start;
        flex-direction: column;
    }

    .topperwork-public-job__metrics,
    .topperwork-public-job__preference-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topperwork-public-job__primary-action,
    .topperwork-public-job__secondary-action,
    .topperwork-public-job__client-link,
    .topperwork-public-job__breadcrumb a {
        transition: none;
    }
}

/* ========================================================================== 
   PHASE 6 ADDENDUM — JOB DETAIL UX / VIEWER CONTEXT
   ========================================================================== */

.topperwork-public-job--client_owner,
.topperwork-public-job--freelancer {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.topperwork-public-job__layout--single {
    grid-template-columns: minmax(0, 1fr);
}

.topperwork-public-job__status--active {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.topperwork-public-job__status--closed {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.topperwork-public-job__description-shell {
    position: relative;
    margin-top: 1rem;
}

.topperwork-public-job__description {
    margin-top: 0;
}

.topperwork-public-job__description-shell:not([data-expanded="true"]) {
    max-height: 17.5em;
    overflow: hidden;
}

.topperwork-public-job__description-shell:not([data-expanded="true"])::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2.75em;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--color-dashboard-surface, var(--color-surface))
    );
}

.topperwork-public-job__description-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.8rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
}

.topperwork-public-job__description-toggle:hover {
    color: var(--color-primary-hover);
}

.topperwork-public-job__description-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.topperwork-public-job__pills--specializations {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.topperwork-public-job__pills--specializations > span {
    flex: 0 0 auto;
    white-space: nowrap;
}

.topperwork-public-job__pills--skills {
    display: grid;
    grid-template-rows: repeat(2, minmax(34px, auto));
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.topperwork-public-job__pills--skills > span {
    white-space: nowrap;
}

.topperwork-public-job__questions {
    list-style: decimal outside !important;
    list-style-position: outside !important;
}

.topperwork-public-job__questions > li {
    display: list-item !important;
    list-style: decimal outside !important;
}

.topperwork-public-job__aside-sticky {
    position: static;
}

.topperwork-public-job__job-link,
.topperwork-job-owner-rail__job-link {
    margin-top: 1rem;
}

.topperwork-public-job__job-link > span,
.topperwork-job-owner-rail__job-link > span {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.topperwork-public-job__job-link > div,
.topperwork-job-owner-rail__job-link > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
}

.topperwork-public-job__job-link input,
.topperwork-job-owner-rail__job-link input {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-dashboard-border, var(--color-border));
    border-radius: 10px;
    background: var(--color-dashboard-surface-hover, var(--color-surface-secondary));
    color: var(--color-text-secondary);
    box-sizing: border-box;
    font: inherit;
    font-size: 0.78rem;
}

.topperwork-public-job__job-link button,
.topperwork-job-owner-rail__job-link button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-dashboard-border, var(--color-border));
    border-radius: 10px;
    background: var(--color-dashboard-surface-hover, var(--color-surface-secondary));
    color: var(--color-primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
}

.topperwork-public-job__job-link button:hover,
.topperwork-job-owner-rail__job-link button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

.topperwork-public-job__freelancer-action {
    border-color: var(--color-primary-soft-border, var(--color-dashboard-border, var(--color-border)));
}

.topperwork-public-job__action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.topperwork-public-job__action-row > div {
    min-width: 0;
}

.topperwork-public-job__primary-action--inline {
    width: auto;
    flex: 0 0 auto;
}


/* ========================================================================== 
   CLIENT OWNER — JOB-SPECIFIC DASHBOARD RIGHT RAIL
   ========================================================================== */

.topperwork-job-owner-rail__card {
    display: grid;
    gap: 0.9rem;
}

.topperwork-job-owner-rail__eyebrow {
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.topperwork-job-owner-rail__title {
    margin: -0.2rem 0 0;
    color: var(--color-text-primary);
    font-size: 1rem;
}

.topperwork-job-owner-rail__facts {
    display: grid;
    gap: 0.72rem;
}

.topperwork-job-owner-rail__facts > div {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.topperwork-job-owner-rail__facts i {
    flex: 0 0 17px;
    width: 17px;
    margin-top: 0.16rem;
    color: var(--color-primary);
    text-align: center;
}

.topperwork-job-owner-rail__facts
.topperwork-verification-badge {
    margin-top: 0.08rem;
}

.topperwork-job-owner-rail__activity,
.topperwork-job-owner-rail__status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.topperwork-job-owner-rail__activity span,
.topperwork-job-owner-rail__status-row > span {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.topperwork-job-owner-rail__activity strong {
    color: var(--color-text-primary);
    font-size: 0.82rem;
    text-align: right;
}

.topperwork-job-owner-rail__note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.topperwork-job-owner-rail__status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0.25rem 0.58rem;
    border: 1px solid;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
}

.topperwork-job-owner-rail__status--active {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success);
}

.topperwork-job-owner-rail__status--closed {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.topperwork-job-owner-rail__primary,
.topperwork-job-owner-rail__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 42px;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    box-sizing: border-box;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 800;
}

.topperwork-job-owner-rail__primary {
    border: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: var(--color-text-on-primary);
}

.topperwork-job-owner-rail__secondary {
    border: 1px solid var(--color-dashboard-border, var(--color-border));
    background: var(--color-dashboard-surface-hover, var(--color-surface-secondary));
    color: var(--color-text-secondary);
}

.topperwork-job-owner-rail__secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 760px) {
    .topperwork-public-job__action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .topperwork-public-job__primary-action--inline {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .topperwork-public-job--client_owner,
    .topperwork-public-job--freelancer {
        padding-left: 0;
        padding-right: 0;
    }

    .topperwork-public-job__job-link > div,
    .topperwork-job-owner-rail__job-link > div {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== 
   PHASE 6H2 — POLISH / HOVER / RICH TEXT NORMALIZATION
   ========================================================================== */

.topperwork-public-job__hero,
.topperwork-public-job__card,
.topperwork-public-job__client-card,
.topperwork-public-job__action-card,
.topperwork-public-job__metric,
.topperwork-public-job__pills > span,
.topperwork-public-job__preference-grid > div,
.topperwork-public-job__job-link button,
.topperwork-job-owner-rail__job-link button {
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease,
        color 0.18s ease;
}

.topperwork-public-job__card:hover,
.topperwork-public-job__client-card:hover,
.topperwork-public-job__action-card:hover,
.topperwork-public-job__metric:hover,
.topperwork-public-job__preference-grid > div:hover,
.topperwork-public-job__pills > span:hover {
    border-color: rgba(96, 165, 250, 0.28);
    box-shadow: 0 18px 36px rgba(2, 12, 27, 0.16);
}

.topperwork-public-job__metric,
.topperwork-public-job__preference-grid > div,
.topperwork-public-job__pills > span,
.topperwork-public-job__client-card,
.topperwork-public-job__action-card,
.topperwork-job-owner-rail__secondary,
.topperwork-public-job__job-link input,
.topperwork-job-owner-rail__job-link input,
.topperwork-public-job__job-link button,
.topperwork-job-owner-rail__job-link button {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.02)
        ),
        var(--color-dashboard-surface-hover, var(--color-surface-secondary));
}

.topperwork-public-job__metric--budget strong {
    font-size: 1.1rem;
    font-weight: 900;
}

.topperwork-public-job__description font,
.topperwork-public-job__description font[size],
.topperwork-public-job__description [style*="font-size"],
.topperwork-public-job__description-shell font,
.topperwork-public-job__description-shell font[size],
.topperwork-public-job__description-shell [style*="font-size"] {
    font-size: inherit !important;
    line-height: inherit !important;
}

.topperwork-public-job__description img.topperwork-custom-emoji,
.topperwork-public-job__description-shell img.topperwork-custom-emoji {
    vertical-align: -0.2em;
}

/* ==========================================================================
   JOB CLIENT REVIEW STARS
   ========================================================================== */

.topperwork-job-owner-rail__stars,
.topperwork-public-job__stars {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        2px;

    margin-right:
        5px;

    color:
        #ebd71d;
}


/*
 * Star icons need an explicit color because the generic
 * Client Facts icon rules apply var(--color-primary)
 * directly to every <i> element.
 */

.topperwork-job-owner-rail__facts
.topperwork-job-owner-rail__stars
i.fa-star,
.topperwork-public-job__client-facts
.topperwork-public-job__stars
i.fa-star {
    color:
        #ebd71d;
}


.topperwork-job-owner-rail__stars--active,
.topperwork-public-job__stars--active {
    color:
        #ebd71d;
}


.topperwork-job-owner-rail__facts
.topperwork-job-owner-rail__stars--active
i.fa-star,
.topperwork-public-job__client-facts
.topperwork-public-job__stars--active
i.fa-star {
    color:
        #ebd71d;
}

/* ==========================================================================
   TOPPERWORK — PUBLIC JOB CLIENT REVIEW + JOB ACTIVITY
   ========================================================================== */


/* ==========================================================================
   CLIENT REVIEW
   ========================================================================== */

.topperwork-public-job__review-fact {
    align-items:
        flex-start;
}


.topperwork-public-job__review-summary {
    display:
        grid;

    gap:
        0.28rem;

    min-width:
        0;
}


.topperwork-public-job__stars {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        2px;

    width:
        max-content;

    color:
        #ebd71d;
}


.topperwork-public-job__stars--active {
    color:
        #ebd71d;
}


.topperwork-public-job__stars i {
    width:
        auto;

    margin:
        0;

    color:
        inherit;

    font-size:
        0.78rem;
}


/* ==========================================================================
   RECENT ACTIVITY CARD
   ========================================================================== */

.topperwork-public-job__activity-card {
    display:
        grid;

    gap:
        0.9rem;
}


.topperwork-public-job__activity-list {
    display:
        grid;

    gap:
        0.72rem;
}


.topperwork-public-job__activity-row {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        0.85rem;
}


.topperwork-public-job__activity-row > span {
    min-width:
        0;

    color:
        var(--color-text-muted);

    font-size:
        0.78rem;

    font-weight:
        700;

    line-height:
        1.45;
}


.topperwork-public-job__activity-row > strong {
    flex:
        0 0 auto;

    max-width:
        52%;

    color:
        var(--color-text-primary);

    font-size:
        0.82rem;

    font-weight:
        800;

    line-height:
        1.45;

    text-align:
        right;
}


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

@media (max-width: 520px) {

    .topperwork-public-job__activity-row {
        gap:
            0.65rem;
    }


    .topperwork-public-job__activity-row > strong {
        max-width:
            50%;

        font-size:
            0.78rem;
    }

}


/* ==========================================================================
   FREELANCER JOB VIEW — CLIENT + JOB ACTIVITY SUMMARY
   ========================================================================== */

.topperwork-public-job__freelancer-summary-grid {
    display:
        grid;

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

    align-items:
        stretch;

    gap:
        1rem;

    margin-top:
        1rem;
}


.topperwork-public-job__freelancer-summary-grid
> .topperwork-dashboard-rail__card {
    min-width:
        0;

    height:
        100%;

    padding:
        clamp(1.25rem, 2.8vw, 1.85rem);

    border:
        1px solid
        var(--color-dashboard-border, var(--color-border));

    border-radius:
        22px;

    background:
        var(--color-dashboard-surface, var(--color-surface));

    box-shadow:
        var(--shadow-lg);
}


@media (max-width: 860px) {

    .topperwork-public-job__freelancer-summary-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

}