/*
 * PESO system-wide readability guard
 * ----------------------------------
 * Final presentation layer for public, authentication, jobseeker, employer,
 * and admin screens. It intentionally does not change layout or workflows;
 * it only establishes legible type, contrast, control, and focus floors after
 * older page-specific styles have loaded.
 */

html body[data-peso-page] {
    min-width: 320px;
    font-family: Inter, "Segoe UI Variable Text", Aptos, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html body[data-peso-page] :is(button, input, select, textarea) { font-family: inherit !important; }
html body[data-peso-page] :is(p, li, dd, .description, .subtitle, .helper-text, .supporting-text) { line-height: 1.58; }
html body[data-peso-page] :is(label, legend) { font-size: 14px !important; line-height: 1.4 !important; }
html body[data-peso-page] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 44px;
    font-size: 15px !important;
    line-height: 1.4 !important;
}
html body[data-peso-page] :is(input, textarea)::placeholder { opacity: 1 !important; }
html body[data-peso-page] :is(button, .btn, [role="button"], input[type="submit"], input[type="button"]) {
    min-height: 42px;
    font-size: 14px !important;
    line-height: 1.25 !important;
}
html body[data-peso-page] :is(small, .meta, .metadata, .caption, .hint, .field-hint, .help-text) {
    font-size: 13px !important;
    line-height: 1.5 !important;
}
html body[data-peso-page] :is(.badge, .pill, .chip, .tag, .status, .status-badge) {
    font-size: 12px !important;
    line-height: 1.3 !important;
}
html body[data-peso-page] :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid #d9ad20 !important;
    outline-offset: 3px !important;
}

/* White text on the previous bright green (#159159) measured below 4.5:1.
   Use the civic green for every primary action in both themes. */
html body[data-peso-page] :is(
    .btn-primary,
    .btn-success,
    .btn-search,
    .btn-view,
    .ref-button--primary,
    .auth-submit,
    .submit-btn,
    .save-btn,
    .apply-btn,
    .js-profile-cta,
    .js-filter-submit,
    .health-filter-submit,
    .peso-btn:not(.peso-btn--secondary):not(.peso-btn--ghost):not(.peso-btn--danger):not(.peso-btn--warning)
) {
    border-color: #087443 !important;
    background: #087443 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body[data-peso-page] :is(
    .btn-primary,
    .btn-success,
    .btn-search,
    .btn-view,
    .ref-button--primary,
    .auth-submit,
    .submit-btn,
    .save-btn,
    .apply-btn,
    .js-profile-cta,
    .js-filter-submit,
    .health-filter-submit,
    .peso-btn:not(.peso-btn--secondary):not(.peso-btn--ghost):not(.peso-btn--danger):not(.peso-btn--warning)
):is(:hover, :focus-visible) {
    border-color: #055f36 !important;
    background: #055f36 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body[data-peso-page="jobs"] .jobs-quick-paths a.is-active,
body[data-peso-page="jobs"] .pagination a.active,
body[data-peso-page="jobseeker-home"] .js-match-controls > a.is-active,
body[data-peso-page="jobseeker-home"] .js-journey-list li.is-active > span {
    border-color: #087443 !important;
    background: #087443 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Public discovery and authentication pages. */
html body[data-peso-page="index"] :is(.nav-link, .ref-nav__link, .ref-button, .ref-search__submit),
html body[data-peso-page="jobs"] :is(.nav-link, .jobs-quick-paths a) { font-size: 14px !important; }
html body[data-peso-page="index"] :is(.ref-job-card h3, .job-title) { font-size: 17px !important; line-height: 1.3 !important; }
html body[data-peso-page="index"] :is(.ref-job-card p, .ref-job-card small, .ref-job-card .meta) { font-size: 13px !important; line-height: 1.5 !important; }

html body.auth-page[data-peso-page] :is(.auth-role-badge, .auth-kicker, .admin-role-badge, .auth-showcase-identity small) {
    font-size: 12px !important;
    line-height: 1.35 !important;
}
html body.auth-page[data-peso-page] :is(.auth-description, .auth-subtitle, .auth-card__subtitle) {
    font-size: 14px !important;
    line-height: 1.55 !important;
}
html body.auth-page[data-peso-page] :is(.auth-secondary-action, .auth-secure-state, .admin-secure-state, .auth-footer, .auth-field small) {
    font-size: 13px !important;
    line-height: 1.5 !important;
}
html body.auth-page[data-peso-page] :is(.auth-toolbar-brand small, .auth-brand small) { font-size: 12px !important; }
html body.auth-page[data-peso-page] .auth-input-wrap input::placeholder { color: var(--auth-placeholder, var(--auth-muted)) !important; opacity: 1 !important; }

/* Authentication alignment polish
   Keep field labels left aligned for scanning, while centering identity,
   headings, helper actions, and the actual submit label. Decorative arrows
   are removed so they can no longer make the button copy look off-centre. */
html body.auth-page[data-peso-page$="-login"] :is(.auth-form-heading, .admin-form-marker) {
    text-align: center !important;
}
html body.auth-page[data-peso-page$="-login"] .admin-form-marker {
    justify-content: center !important;
}
html body.auth-page[data-peso-page$="-login"] :is(.auth-login-identity, .role-login-identity) {
    width: fit-content;
    margin-inline: auto !important;
}
html body.auth-page[data-peso-page$="-login"] .employer-login-identity > i {
    display: none !important;
}
html body.auth-page[data-peso-page$="-login"] .auth-submit,
html body[data-peso-page="forgot-password"] .auth-submit,
html body[data-peso-page="verify-email"] :is(.primary, .secondary) {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
html body.auth-page[data-peso-page$="-login"] .auth-submit > i,
html body[data-peso-page="forgot-password"] .auth-submit > i {
    display: none !important;
}
html body.auth-page[data-peso-page$="-login"] :is(.auth-secondary-action, .admin-login-help) {
    justify-content: center !important;
    flex-wrap: wrap;
    text-align: center !important;
}
html body[data-peso-page="forgot-password"] :is(.recovery-brand, .recovery-icon) {
    margin-inline: auto !important;
}
html body[data-peso-page="forgot-password"] .recovery-brand { width: fit-content; }
html body[data-peso-page="forgot-password"] .recovery-heading,
html body[data-peso-page="verify-email"] .verify-card {
    text-align: center !important;
}
html body[data-peso-page="jobseeker-register"] :is(
    .registration-step-button,
    .btn-submit,
    .registration-primary-link,
    .registration-secondary-link
) {
    justify-content: center !important;
    text-align: center !important;
}

/* Jobseeker suite: preserve the dashboard hierarchy while preventing tiny
   badges, helper copy, tabs, and mobile navigation labels. */
html body.peso-jobseeker-suite[data-peso-page] :is(.nav-link, .nav-item, .js-tutorial-button) { font-size: 14px !important; }
html body.peso-jobseeker-suite[data-peso-page] :is(.job-title, .card-title, .section-title) { line-height: 1.3 !important; }
html body.peso-jobseeker-suite[data-peso-page] :is(.job-meta, .job-meta span, .job-meta-item, .company-name, .profile-stat-label) {
    font-size: 14px !important;
    line-height: 1.5 !important;
}
html body.peso-jobseeker-suite[data-peso-page] :is(.js-job-badges span, .js-job-badges strong, .verified-badge, .match-badge) { font-size: 12px !important; }
html body.peso-jobseeker-suite[data-peso-page] .peso-mobile-jobseeker-nav span { font-size: 12px !important; font-weight: 700 !important; }

html body.dark-mode.peso-jobseeker-suite[data-peso-page] :is(
    .js-view-all,
    .js-job-footer .view-btn,
    .salary,
    .company-name,
    .filter-clear,
    .peso-breadcrumbs a,
    .job-meta i,
    .section-title i
) { color: #79dfaa !important; -webkit-text-fill-color: #79dfaa !important; }

/* Employer workspace: the previous 8–12px operational labels were difficult
   to read on normal desktop scaling. */
html body.peso-product-ui[data-peso-page^="employer-"]:not([data-peso-page="employer-login"]):not([data-peso-page="employer-register"]) {
    font-size: 16px !important;
    line-height: 1.55 !important;
}
html body.peso-product-ui[data-peso-page^="employer-"]:not([data-peso-page="employer-login"]):not([data-peso-page="employer-register"]) :is(.navbar .nav-link, .employer-shared-nav .nav-link) {
    font-size: 14px !important;
    line-height: 1.3 !important;
}
html body.peso-product-ui[data-peso-page^="employer-"]:not([data-peso-page="employer-login"]):not([data-peso-page="employer-register"]) :is(
    .cc-eyebrow,
    .cc-panel-heading .cc-eyebrow,
    .employer-page-header__eyebrow,
    .page-eyebrow,
    .peso-eyebrow
) { font-size: 12px !important; line-height: 1.35 !important; }
html body.peso-product-ui[data-peso-page^="employer-"]:not([data-peso-page="employer-login"]):not([data-peso-page="employer-register"]) :is(
    .cc-kpi em,
    .cc-candidate-copy small,
    .cc-stage-empty,
    .cc-stage-add,
    .cc-interview-copy small,
    .cc-interview-copy em,
    .cc-performance-table td:first-child small,
    .cc-row-action,
    .cc-empty-row span,
    .step-label,
    .toolbar-label
) { font-size: 13px !important; line-height: 1.45 !important; }
html body.peso-product-ui[data-peso-page^="employer-"]:not([data-peso-page="employer-login"]):not([data-peso-page="employer-register"]) :is(
    .cc-stage-heading b,
    .cc-status,
    .cc-avatar,
    .cc-interview-date b,
    .cc-interview-date small,
    .cc-performance-table th
) { font-size: 12px !important; line-height: 1.35 !important; }

html body.peso-product-ui:not(.light)[data-peso-page^="employer-"]:not([data-peso-page="employer-login"]):not([data-peso-page="employer-register"]) :is(
    .cc-text-link,
    .cc-icon-link,
    .cc-panel-footer-link,
    .cc-peso-panel a,
    .cc-row-action,
    .peso-breadcrumbs a,
    .peso-table a:not(.peso-btn),
    .jobs-table a:not(.btn),
    .applicants-table a:not(.btn),
    .cc-status
) { color: #79dfaa !important; -webkit-text-fill-color: #79dfaa !important; }

/* Admin workspace: enlarge command-bar, sidebar, chart, table, and status text
   without changing the sidebar or dashboard structure. */
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .sidebar-service-status__copy strong { font-size: 13px !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .sidebar-service-status__copy small { font-size: 12px !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .sidebar-service-status__live { font-size: 11px !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .sidebar-nav-group__label { min-height: 24px !important; font-size: 11px !important; line-height: 1.35 !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .admx-sidebar .nav-link { font-size: 14px !important; line-height: 1.35 !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .admin-topbar-heading span { font-size: 12px !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .admin-topbar-heading small { font-size: 12px !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .topbar .date-badge { font-size: 13px !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .topbar .peso-language-picker--inline select { font-size: 13px !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .admin-page-intro__eyebrow { font-size: 12px !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(th, .admx-status, .admx-readiness__list strong) { font-size: 12px !important; }
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) :is(td, .admx-activity__copy small, .admx-action-grid .quick-action-card small, .admx-readiness__score > div:last-child span) {
    font-size: 13px !important;
    line-height: 1.5 !important;
}
html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .admx-bars small { font-size: 11px !important; }

html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]):not(.light) :is(
    .admin-topbar-heading span,
    .admin-page-intro__eyebrow,
    .peso-breadcrumbs a,
    .breadcrumb a,
    .text-link,
    .view-details,
    .company-badge span,
    .admx-chart-empty a,
    .admx-readiness__list strong,
    table a:not(.btn):not(.action-btn):not([class*="-btn"]):not([class*="button"])
) { color: #7fe2ae !important; -webkit-text-fill-color: #7fe2ae !important; }

/* Shared overlays and injected controls must remain readable above every role. */
html body[data-peso-page] :is(.modal, .dialog, .dropdown, .toast, .peso-toast, .alert, .notification, .peso-assistant) {
    font-size: 14px;
    line-height: 1.5;
}
html body[data-peso-page] .peso-language-picker select { min-height: 42px; font-size: 14px !important; }
html body[data-peso-page] .peso-assistant__launcher-copy :is(strong, small) { font-size: 13px !important; line-height: 1.35 !important; }

/* Responsive safety net shared by every maintained route. These rules do not
   replace page layouts; they prevent fixed content, translated copy, media,
   tables, and dialogs from escaping their available viewport. */
html body[data-peso-page],
html body[data-peso-page] *,
html body[data-peso-page] *::before,
html body[data-peso-page] *::after { box-sizing: border-box; }

html body[data-peso-page] :is(main, section, article, aside, form, fieldset, header, footer, nav) {
    min-width: 0;
}
html body[data-peso-page] :is(img, video, canvas) {
    max-width: 100%;
    height: auto;
}
html body[data-peso-page] :is(input, select, textarea, button) { max-width: 100%; }
html body[data-peso-page] :is(li, td, th, label, a, button, .badge, .pill, .chip, .tag) {
    overflow-wrap: anywhere;
}
html body[data-peso-page] :is(h1, h2, h3, h4, h5, h6, p) {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
html body.peso-product-ui[data-peso-page="index"] .ref-hero h1 {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}
html body[data-peso-page] :is(pre, .code-block) {
    max-width: 100%;
    overflow: auto;
}
html body[data-peso-page] :is(
    .table-responsive,
    .table-wrapper,
    .table-container,
    .peso-table-wrap,
    .jobs-table-wrap,
    .applicants-table-wrap,
    .admx-table-wrap
) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
html body[data-peso-page] :is(.modal-container, .modal-content, .dialog, [role="dialog"]) {
    max-width: min(var(--dialog-max-width, 720px), calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
}
/* js/production-ui.js stamps role="dialog" onto any element that is exactly
   .modal or .modal-overlay and has no role yet — that is always the
   full-viewport OVERLAY, never an inner .modal-content/.modal-container
   panel (those get a different class token and are never matched by that
   script). The rule above then clamps that overlay itself to ~720px, pinning
   the whole dialog off-centre with its far side cut off, on every page whose
   modal markup never explicitly unsets max-width. Undo the clamp on exactly
   that outer-wrapper case; inner content panels keep the intended cap. */
html body[data-peso-page] :is(.modal, .modal-overlay)[role="dialog"] {
    max-width: none !important;
    max-height: none !important;
}
/* Center active modal shells while allowing tall content to scroll. Hidden
   dialogs remain governed by their existing display/hidden rules. */
html body[data-peso-page] :is(.modal.show, .modal.active, .modal.open,
    .modal-overlay.show, .modal-overlay.active, .modal-overlay.open,
    .dialog-overlay.show, .dialog-overlay.active, .dialog-overlay.open,
    .peso-modal-overlay.show, .peso-modal-overlay.active, .peso-modal-overlay.open,
    [data-alive-modal]:not([hidden]), [data-alive-jobmodal]:not([hidden])) {
    align-items: center !important;
    justify-content: center !important;
    place-items: center !important;
    padding: 12px !important;
}
html body[data-peso-page] :is(.modal-container, .modal-dialog, .modal-content,
    .dialog, [role="dialog"]) {
    margin-block: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}
html body[data-peso-page] .peso-skip-link {
    border-color: #006338 !important;
    background: #006338 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body[data-peso-page] .dashboard-sidebar-logout {
    border-color: #991b1b !important;
    background: #991b1b !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body[data-peso-page] .dashboard-sidebar-logout * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body[data-peso-page] .peso-timeline-dot {
    background-color: #087443 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body[data-peso-page] :is(.actions, .form-actions, .filter-actions, .toolbar-actions, .card-actions, .pagination) {
    flex-wrap: wrap;
}
html body[data-peso-page]:has(.peso-assistant) .peso-back-to-top {
    bottom: 96px !important;
}
html body[data-peso-page="jobseeker-register"] .peso-language-picker:not(.peso-language-picker--inline) {
    position: fixed !important;
    z-index: 2147482001 !important;
    top: 12px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

@media (max-width: 760px) {
    html body[data-peso-page] { font-size: 15px; }
    html body[data-peso-page] :is(label, legend, button, .btn, [role="button"]) { font-size: 14px !important; }
    html body[data-peso-page] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px !important; }
    html body.peso-product-ui[data-peso-page^="employer-"]:not([data-peso-page="employer-login"]):not([data-peso-page="employer-register"]) :is(.navbar .nav-link, .employer-shared-nav .nav-link) { font-size: 13px !important; }
    html body[data-peso-page^="admin-"]:not([data-peso-page="admin-login"]) .admx-sidebar .nav-link { font-size: 14px !important; }
    html body[data-peso-page] :is(.modal-overlay, .dialog-overlay, .peso-modal-overlay) { padding: 12px !important; }
    html body[data-peso-page] :is(.modal-container, .modal-content, .dialog, [role="dialog"]) {
        width: min(100%, calc(100vw - 24px)) !important;
    }
    html body.auth-page[data-peso-page$="-login"] :is(.auth-form-panel, .role-login-card, .auth-login-card) {
        padding-inline: clamp(20px, 6vw, 28px) !important;
    }
    html body.auth-page[data-peso-page$="-login"] :is(.auth-secondary-action, .admin-login-help) {
        gap: 6px 10px !important;
    }
    html body[data-peso-page="jobseeker-register"] .registration-step-actions > * {
        flex: 1 1 180px;
    }

    /* The shared locale control must stay inside the compact public landing
       header. The generic i18n layout previously forced the controls onto an
       oversized second row below 720px. */
    html body[data-peso-page="index"] .site-header.peso-public-header .container.header-inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        min-height: 68px !important;
        padding-block: 7px !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    html body[data-peso-page="index"] .site-header.peso-public-header .logo {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    html body[data-peso-page="index"] .site-header.peso-public-header .header-actions {
        display: flex !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        margin-left: 0 !important;
    }
    html body[data-peso-page="index"] .site-header.peso-public-header .site-menu-toggle {
        order: 1 !important;
        margin-left: 0 !important;
    }
    html body[data-peso-page="index"] .site-header.peso-public-header .theme-toggle {
        order: 2 !important;
        margin-left: 0 !important;
    }
    html body[data-peso-page="index"] .site-header.peso-public-header .peso-language-picker--inline {
        order: 3 !important;
        margin: 0 !important;
    }
    html body[data-peso-page="index"] .site-header.peso-public-header .peso-language-picker--inline select {
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        min-height: 43px !important;
        padding-inline: 10px 26px !important;
    }

    html body[data-peso-page="index"] .ref-hero h1 {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
        text-wrap: balance;
    }
}

@media (max-width: 600px) {
    html body[data-peso-page] :is(.peso-assistant, .peso-assistant__launcher) { right: 12px !important; }
    html body[data-peso-page] .peso-assistant__launcher {
        width: 56px !important;
        min-width: 56px !important;
        height: 56px !important;
        padding: 7px !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }
    html body[data-peso-page] .peso-assistant__launcher-mark {
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
    }
    html body[data-peso-page] .peso-assistant__launcher-copy { display: none !important; }
    html body[data-peso-page]:has(.peso-assistant) .peso-back-to-top { right: 12px !important; bottom: 88px !important; }
}

@media (max-width: 420px) {
    html body[data-peso-page="index"] .site-header.peso-public-header .logo-copy {
        display: none !important;
    }
    html body[data-peso-page="index"] .site-header.peso-public-header .logo img {
        width: 40px !important;
        height: 40px !important;
    }
    html body[data-peso-page="index"] .site-header.peso-public-header .peso-language-picker--inline select {
        width: 88px !important;
        min-width: 88px !important;
        max-width: 88px !important;
    }
    html body.auth-page[data-peso-page$="-login"] :is(.auth-login-identity, .role-login-identity) {
        max-width: 100%;
    }
    html body.auth-page[data-peso-page$="-login"] .auth-submit { min-height: 50px; }
    html body[data-peso-page="jobseeker-register"] .peso-language-picker:not(.peso-language-picker--inline) select {
        min-width: 112px !important;
        max-width: 124px !important;
    }
    html body[data-peso-page="jobseeker-register"] .registration-section-nav :is(a, button) {
        flex-direction: column;
        gap: 4px !important;
        min-height: 60px;
        padding-inline: 6px !important;
        font-size: .74rem !important;
        white-space: nowrap;
    }
}

@media (prefers-contrast: more) {
    html body[data-peso-page] { --peso-muted: currentColor; }
    html body[data-peso-page] :is(.muted, .text-muted, small, .meta, .metadata) { opacity: 1 !important; }
}