/*
 * Shared authenticated masthead tokens.
 *
 * Route files still own their page-specific color and layout. This imported
 * layer keeps the primary page title, eyebrow, description, and page-level
 * action hierarchy consistent across the authenticated workspaces, so a new
 * route does not invent another heading or button scale.
 */

#lerws-portal.lerws-portal {
    --lerws-masthead-eyebrow-size: 11px;
    --lerws-masthead-eyebrow-leading: 1.2;
    --lerws-masthead-eyebrow-spacing: .12em;
    --lerws-masthead-title-size: 56px;
    --lerws-masthead-title-mobile-size: 40px;
    --lerws-masthead-title-leading: 1;
    --lerws-masthead-subtitle-size: 14px;
    --lerws-masthead-subtitle-leading: 1.55;
    --lerws-masthead-content-gap: 24px;
    --lerws-section-gap: clamp(18px, 2.4vw, 28px);
}

/* Every authenticated workspace uses the same vertical rhythm. Route files
 * may still choose their own grid, but their top-level blocks must not touch
 * or invent a second page-shell spacing scale. */
#lerws-portal.lerws-portal .lerws-sites-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lerws-section-gap);
}

#lerws-portal.lerws-portal .lerws-sites-shell > * {
    min-width: 0;
}

#lerws-portal.lerws-portal .lerws-sites-shell > .lerws-sites-topbar {
    width: 100%;
    min-width: 0;
    margin: 0;
}

#lerws-portal.lerws-portal .lerws-sites-shell > .lerws-page-masthead,
#lerws-portal.lerws-portal .lerws-sites-shell > .lerws-sites-hero {
    margin: 0;
}

/* Hidden state/input controls must never inherit the visible field system. */
#lerws-portal.lerws-portal input[type="hidden"] {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Main workspace headers use three page-level action roles:
 * primary, secondary, and text link. Record-level danger/icon actions stay
 * local to their workflow and should not be promoted into this header. */
#lerws-portal.lerws-portal .lerws-page-masthead__copy {
    min-width: 0;
}

#lerws-portal.lerws-portal .lerws-page-masthead {
    margin: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ler-dashboard-line);
}

#lerws-portal.lerws-portal .st-header.lerws-page-masthead {
    margin-bottom: 0;
}

#lerws-portal.lerws-portal .lerws-project-masthead.lerws-page-masthead {
    display: block;
    margin-bottom: 0;
}

#lerws-portal.lerws-portal .lerws-project-masthead.lerws-page-masthead > .lerws-page-masthead__row {
    width: 100%;
}

/* Standalone page headers can opt into the standard gap before their first
 * content block. Headers followed immediately by tabs or a local toolbar
 * should keep the base treatment and let that component own the spacing. */
#lerws-portal.lerws-portal .lerws-page-masthead--spaced {
    margin-bottom: var(--lerws-masthead-content-gap);
}

#lerws-portal.lerws-portal .lerws-page-masthead__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    min-width: 0;
}

#lerws-portal.lerws-portal .lerws-page-masthead__eyebrow {
    display: block !important;
    margin: 0 0 8px !important;
    color: var(--ler-dashboard-muted) !important;
    font-family: var(--lerws-type-family, Matter, Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif) !important;
    font-size: var(--lerws-masthead-eyebrow-size) !important;
    font-weight: 600 !important;
    letter-spacing: var(--lerws-masthead-eyebrow-spacing) !important;
    line-height: var(--lerws-masthead-eyebrow-leading) !important;
    text-transform: uppercase !important;
}

#lerws-portal.lerws-portal .lerws-page-masthead__title {
    margin: 0 0 8px !important;
    color: var(--ler-dashboard-ink) !important;
    font-family: "Reckless Neue", Georgia, serif !important;
    font-size: var(--lerws-masthead-title-size) !important;
    font-weight: 400 !important;
    letter-spacing: -.04em !important;
    line-height: var(--lerws-masthead-title-leading) !important;
}

#lerws-portal.lerws-portal .lerws-page-masthead h1:not(.lerws-page-masthead__title) {
    margin: 0 0 8px !important;
    color: var(--ler-dashboard-ink) !important;
    font-family: "Reckless Neue", Georgia, serif !important;
    font-size: var(--lerws-masthead-title-size) !important;
    font-weight: 400 !important;
    letter-spacing: -.04em !important;
    line-height: var(--lerws-masthead-title-leading) !important;
}

#lerws-portal.lerws-portal .lerws-page-masthead__subtitle {
    max-width: 680px !important;
    margin: 0 !important;
    color: var(--ler-dashboard-muted) !important;
    font-family: var(--lerws-type-family, Matter, Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif) !important;
    font-size: var(--lerws-masthead-subtitle-size) !important;
    line-height: var(--lerws-masthead-subtitle-leading) !important;
}

/* Transitional headers that have not yet been fully renamed still inherit
 * the exact same typography while their route markup is migrated. */
#lerws-portal.lerws-portal .lerws-page-masthead .lerws-sites-hero__eyebrow,
#lerws-portal.lerws-portal .lerws-page-masthead > .lerws-page-masthead__row > .lerws-page-masthead__copy > p:first-of-type:not(.lerws-page-masthead__subtitle) {
    color: var(--ler-dashboard-muted) !important;
    font-family: var(--lerws-type-family, Matter, Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif) !important;
    font-size: var(--lerws-masthead-eyebrow-size) !important;
    font-weight: 600 !important;
    letter-spacing: var(--lerws-masthead-eyebrow-spacing) !important;
    line-height: var(--lerws-masthead-eyebrow-leading) !important;
    text-transform: uppercase !important;
}

#lerws-portal.lerws-portal .lerws-page-masthead .lerws-sites-hero__content > p:not(.lerws-page-masthead__subtitle),
#lerws-portal.lerws-portal .lerws-page-masthead > .lerws-page-masthead__row > .lerws-page-masthead__copy > p:last-child:not(.lerws-page-masthead__eyebrow):not(.lerws-page-masthead__subtitle) {
    max-width: 680px !important;
    margin: 0 !important;
    color: var(--ler-dashboard-muted) !important;
    font-family: var(--lerws-type-family, Matter, Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif) !important;
    font-size: var(--lerws-masthead-subtitle-size) !important;
    line-height: var(--lerws-masthead-subtitle-leading) !important;
}

/* Client workspaces that still use the transitional sites markup consume the
 * same masthead contract as the migrated pages. Keep their titles, subtitles,
 * and eyebrow labels out of route-local typography silos. */
#lerws-portal.lerws-portal .lerws-sites-shell.is-help-center > .lerws-sites-topbar > .lerws-sites-hero h1,
#lerws-portal.lerws-portal .lerws-sites-shell.is-my-websites .lerws-sites-hero h1,
#lerws-portal.lerws-portal .lerws-sites-shell.is-operations .lerws-sites-hero h1 {
    margin: 0 0 8px !important;
    color: var(--ler-dashboard-ink) !important;
    font-family: "Reckless Neue", Georgia, serif !important;
    font-size: var(--lerws-masthead-title-size) !important;
    font-weight: 400 !important;
    letter-spacing: -.04em !important;
    line-height: var(--lerws-masthead-title-leading) !important;
}

#lerws-portal.lerws-portal .lerws-sites-shell.is-help-center > .lerws-sites-topbar > .lerws-sites-hero p,
#lerws-portal.lerws-portal .lerws-sites-shell.is-my-websites .lerws-sites-hero p,
#lerws-portal.lerws-portal .lerws-sites-shell.is-operations .lerws-sites-hero p {
    max-width: 680px !important;
    margin: 0 !important;
    color: var(--ler-dashboard-muted) !important;
    font-family: var(--lerws-type-family, Matter, Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif) !important;
    font-size: var(--lerws-masthead-subtitle-size) !important;
    line-height: var(--lerws-masthead-subtitle-leading) !important;
}

#lerws-portal.lerws-portal .lerws-sites-shell.is-help-tickets .lerws-help-ticket-header h1 {
    margin: 0 0 8px !important;
    color: var(--ler-dashboard-ink) !important;
    font-family: "Reckless Neue", Georgia, serif !important;
    font-size: var(--lerws-masthead-title-size) !important;
    font-weight: 400 !important;
    letter-spacing: -.04em !important;
    line-height: var(--lerws-masthead-title-leading) !important;
}

#lerws-portal.lerws-portal .lerws-sites-shell.is-my-websites .lerws-core-eyebrow,
#lerws-portal.lerws-portal .lerws-sites-shell.is-operations .lerws-core-eyebrow {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ler-dashboard-muted) !important;
    font-family: var(--lerws-type-family, Matter, Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif) !important;
    font-size: var(--lerws-masthead-eyebrow-size) !important;
    font-weight: 600 !important;
    letter-spacing: var(--lerws-masthead-eyebrow-spacing) !important;
    line-height: var(--lerws-masthead-eyebrow-leading) !important;
    text-transform: uppercase !important;
}

/* Agreements still use a compact legacy template, but keep its page-level
 * hierarchy aligned with every other workspace until the markup is split. */
#lerws-portal.lerws-portal .lerws-agreement-admin-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 var(--lerws-masthead-content-gap);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ler-dashboard-line);
}

#lerws-portal.lerws-portal .lerws-agreement-admin-head > div:first-child {
    min-width: 0;
}

#lerws-portal.lerws-portal .lerws-agreement-admin-head .lerws-agreement-eyebrow {
    display: block;
    margin: 0 0 8px;
    color: var(--ler-dashboard-muted);
    font-family: var(--lerws-type-family, Matter, Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-size: var(--lerws-masthead-eyebrow-size);
    font-weight: 600;
    letter-spacing: var(--lerws-masthead-eyebrow-spacing);
    line-height: var(--lerws-masthead-eyebrow-leading);
    text-transform: uppercase;
}

#lerws-portal.lerws-portal .lerws-agreement-admin-head h1 {
    margin: 0 0 8px;
    color: var(--ler-dashboard-ink);
    font-family: "Reckless Neue", Georgia, serif;
    font-size: var(--lerws-masthead-title-size);
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: var(--lerws-masthead-title-leading);
}

#lerws-portal.lerws-portal .lerws-agreement-admin-head > div:first-child > p:last-child {
    max-width: 680px;
    margin: 0;
    color: var(--ler-dashboard-muted);
    font-size: var(--lerws-masthead-subtitle-size);
    line-height: var(--lerws-masthead-subtitle-leading);
}

/* Keep the agreement route on the shared title scale while its legacy
 * renderer is being migrated to the full masthead markup. */
#lerws-portal.lerws-portal .lerws-agreement-admin-head h1 {
    margin: 0 0 8px !important;
    font-family: "Reckless Neue", Georgia, serif !important;
    font-size: var(--lerws-masthead-title-size) !important;
    font-weight: 400 !important;
    line-height: var(--lerws-masthead-title-leading) !important;
}

#lerws-portal.lerws-portal .lerws-agreement-admin-head .lerws-agreement-eyebrow {
    margin: 0 0 8px !important;
    font-size: var(--lerws-masthead-eyebrow-size) !important;
    line-height: var(--lerws-masthead-eyebrow-leading) !important;
}

#lerws-portal.lerws-portal .lerws-agreement-admin-head > div:first-child > p:last-child {
    margin: 0 !important;
    font-size: var(--lerws-masthead-subtitle-size) !important;
    line-height: var(--lerws-masthead-subtitle-leading) !important;
}

#lerws-portal.lerws-portal .lerws-page-masthead__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 800px) {
    #lerws-portal.lerws-portal .lerws-page-masthead__row {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    #lerws-portal.lerws-portal .lerws-page-masthead__copy,
    #lerws-portal.lerws-portal .lerws-page-masthead__actions {
        width: 100%;
        min-width: 0;
    }

    #lerws-portal.lerws-portal .lerws-page-masthead__actions {
        justify-content: flex-start;
    }
}

#lerws-portal.lerws-portal .lerws-page-masthead__text-link {
    display: inline-flex;
    min-height: var(--lerws-ui-button-height, 40px);
    align-items: center;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--ler-dashboard-ink);
    font-family: var(--lerws-type-family, Matter, Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-underline-offset: 3px;
}

#lerws-portal.lerws-portal .lerws-page-masthead__text-link:hover,
#lerws-portal.lerws-portal .lerws-page-masthead__text-link:focus-visible {
    color: var(--ler-dashboard-ink);
    text-decoration: underline;
}

#lerws-portal.lerws-portal .lerws-page-masthead__text-link:focus-visible {
    outline: 2px solid var(--ler-dashboard-ink);
    outline-offset: 3px;
}

#lerws-portal[data-page="dashboard"] .lerws-ac--modern .lerws-ac__hero h1,
#lerws-portal[data-page="work"] .lerws-work-overview__hero h1,
#lerws-portal[data-page="sales"] .lerws-portal-hub__header h1,
#lerws-portal[data-page="growth"] .lerws-portal-hub__header h1,
#lerws-portal[data-page="users"] .lerws-sites-hero h1,
#lerws-portal[data-page="leads"] .lerws-sites-hero h1,
#lerws-portal[data-page="quotes"] .lerws-sites-hero h1,
#lerws-portal[data-page="project_packages"] .lerws-project-masthead h1,
#lerws-portal[data-page="agreements"] .lerws-agreement-admin h1,
#lerws-portal[data-page="file_requests"] .lerws-sites-hero h1,
#lerws-portal[data-page="help_manager"] .lerws-sites-hero h1,
#lerws-portal[data-page="settings"] .st-title,
#lerws-portal[data-page="payment-methods"] .pm-title,
#lerws-portal[data-page="subscriptions"] .ls-title,
#lerws-portal[data-page="referrals"] .lerws-rf-heading h1,
#lerws-portal[data-page="orders"] .lerws-sites-hero h1,
#lerws-portal[data-page="projects"] .lerws-sites-shell.is-projects .lerws-sites-hero h1,
#lerws-portal[data-page="requests"] .lerws-requests__header h1,
#lerws-portal[data-page="admin_billing"] .lerws-admin-billing__hero h1,
#lerws-portal[data-page="admin_subscriptions"] .lerws-sites-hero h1,
#lerws-portal[data-page="orders"][data-admin-billing-context="orders"] .lerws-sites-hero h1 {
    margin: 0 0 8px !important;
    font-family: "Reckless Neue", Georgia, serif !important;
    font-size: 56px !important;
    font-weight: 400 !important;
    letter-spacing: -.04em !important;
    line-height: 1 !important;
}

#lerws-portal[data-page="dashboard"] .lerws-ac--modern .lerws-ac__hero h1 + p,
#lerws-portal[data-page="work"] .lerws-work-overview__hero h1 + p,
#lerws-portal[data-page="sales"] .lerws-portal-hub__header h1 + p,
#lerws-portal[data-page="growth"] .lerws-portal-hub__header h1 + p,
#lerws-portal[data-page="users"] .lerws-sites-hero h1 + p,
#lerws-portal[data-page="leads"] .lerws-sites-hero h1 + p,
#lerws-portal[data-page="quotes"] .lerws-sites-hero h1 + p,
#lerws-portal[data-page="project_packages"] .lerws-project-masthead h1 + p,
#lerws-portal[data-page="agreements"] .lerws-agreement-admin h1 + p,
#lerws-portal[data-page="file_requests"] .lerws-sites-hero h1 + p,
#lerws-portal[data-page="help_manager"] .lerws-sites-hero h1 + p,
#lerws-portal[data-page="settings"] .st-title + .st-subtitle,
#lerws-portal[data-page="payment-methods"] .pm-title + .pm-subtitle,
#lerws-portal[data-page="subscriptions"] .ls-title + .ls-subtitle,
#lerws-portal[data-page="referrals"] .lerws-rf-heading h1 + p,
#lerws-portal[data-page="orders"] .lerws-sites-hero h1 + p,
#lerws-portal[data-page="projects"] .lerws-sites-shell.is-projects .lerws-sites-hero h1 + p,
#lerws-portal[data-page="requests"] .lerws-requests__header h1 + p,
#lerws-portal[data-page="admin_billing"] .lerws-admin-billing__hero h1 + p,
#lerws-portal[data-page="admin_subscriptions"] .lerws-sites-hero h1 + p,
#lerws-portal[data-page="orders"][data-admin-billing-context="orders"] .lerws-sites-hero h1 + p {
    margin-top: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

@media (max-width: 800px) {
    #lerws-portal.lerws-portal {
        --lerws-masthead-title-size: var(--lerws-masthead-title-mobile-size);
    }

    #lerws-portal.lerws-portal .lerws-page-masthead__title {
        font-size: var(--lerws-masthead-title-mobile-size) !important;
        line-height: 1 !important;
    }

    #lerws-portal.lerws-portal .lerws-page-masthead__actions {
        justify-content: flex-start;
    }

    #lerws-portal.lerws-portal .lerws-page-masthead__text-link {
        min-height: 44px;
    }

    #lerws-portal.lerws-portal .lerws-page-masthead__row {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    #lerws-portal[data-page="dashboard"] .lerws-ac--modern .lerws-ac__hero h1,
    #lerws-portal[data-page="work"] .lerws-work-overview__hero h1,
    #lerws-portal[data-page="sales"] .lerws-portal-hub__header h1,
    #lerws-portal[data-page="growth"] .lerws-portal-hub__header h1,
    #lerws-portal[data-page="users"] .lerws-sites-hero h1,
    #lerws-portal[data-page="leads"] .lerws-sites-hero h1,
    #lerws-portal[data-page="quotes"] .lerws-sites-hero h1,
    #lerws-portal[data-page="project_packages"] .lerws-project-masthead h1,
    #lerws-portal[data-page="agreements"] .lerws-agreement-admin h1,
    #lerws-portal[data-page="file_requests"] .lerws-sites-hero h1,
    #lerws-portal[data-page="help_manager"] .lerws-sites-hero h1,
    #lerws-portal[data-page="settings"] .st-title,
    #lerws-portal[data-page="payment-methods"] .pm-title,
    #lerws-portal[data-page="subscriptions"] .ls-title,
    #lerws-portal[data-page="referrals"] .lerws-rf-heading h1,
    #lerws-portal[data-page="orders"] .lerws-sites-hero h1,
    #lerws-portal[data-page="projects"] .lerws-sites-shell.is-projects .lerws-sites-hero h1,
    #lerws-portal[data-page="requests"] .lerws-requests__header h1,
    #lerws-portal[data-page="admin_billing"] .lerws-admin-billing__hero h1,
    #lerws-portal[data-page="admin_subscriptions"] .lerws-sites-hero h1,
    #lerws-portal[data-page="orders"][data-admin-billing-context="orders"] .lerws-sites-hero h1 {
        font-size: var(--lerws-masthead-title-mobile-size) !important;
        line-height: 1 !important;
    }

    #lerws-portal.lerws-portal .lerws-sites-shell.is-help-center > .lerws-sites-topbar > .lerws-sites-hero h1,
    #lerws-portal.lerws-portal .lerws-sites-shell.is-my-websites .lerws-sites-hero h1,
    #lerws-portal.lerws-portal .lerws-sites-shell.is-operations .lerws-sites-hero h1,
    #lerws-portal.lerws-portal .lerws-sites-shell.is-help-tickets .lerws-help-ticket-header h1 {
        font-size: var(--lerws-masthead-title-mobile-size) !important;
        line-height: 1 !important;
    }

    /* Wide admin tables must scroll inside their cards, never widen the page. */
    #lerws-portal[data-page="quotes"] .lerws-ui-table-wrap {
        contain: paint;
    }
}