/* helpKNX foundation styles. Milestone A: brand tokens, typography, header/footer
   chrome, button + card + form systems. Marketplace components (hero photography,
   benefit cards, job cards, profile preview, testimonials, FAQ, newsletter) land
   in Milestone B. Anchored to docs/HelpKNX_homepage_brand_design_guide.txt.

   NOTE: this is plain CSS, NOT a Razor file. Write at-rules as `@media`, never
   `@@media`. The `@@` Razor-escape is invalid CSS and silently disables the rule. */

/* ---------------------------------------------------------------------------
   1. Brand tokens
   --------------------------------------------------------------------------- */
:root {
    --green-900: #063b2c;
    --green-800: #0b4b36;
    --green-700: #115740;
    --green-100: #e8f3ec;
    --green-050: #f3f9f5;
    --gold-500: #f5c83b;
    --gold-600: #d6a51d;
    /* --gold-700 is the text-safe variant: 4.5:1 contrast on white per WCAG 1.4.3 AA.
       Use this instead of --gold-500/600 for any gold text rendered on a light bg
       (eyebrows, accents). The brighter shades are reserved for backgrounds and for
       text on dark bg (footer, hero) where their contrast comfortably exceeds 4.5:1. */
    --gold-700: #8a6210;
    --ink: #17231f;
    --muted: #65736d;
    --surface: #fbfaf5;
    --white: #ffffff;
    --border: #dde5de;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 2px rgba(6, 59, 44, 0.06);
    --shadow-md: 0 8px 24px rgba(6, 59, 44, 0.06);
    --shadow-lg: 0 16px 48px rgba(6, 59, 44, 0.08);

    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
}

/* ---------------------------------------------------------------------------
   2. Reset + base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip; /* match body; required so 100vw breakout bands can't be horizontally scrolled on mobile */
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-800); text-decoration: none; }
a:hover { color: var(--green-900); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }

/* ---------------------------------------------------------------------------
   3. Typography
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.15;
    margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; }

p { margin: 0 0 var(--space-4); }

.lead {
    font-size: 1.125rem;
    color: var(--muted);
    max-width: 38rem;
}

.muted { color: var(--muted); }

.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-700); /* WCAG 1.4.3 AA — 4.5:1 vs white */
    margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------------------
   4. Container
   --------------------------------------------------------------------------- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.container-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* ---------------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------------- */
.btn,
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.625rem 1.125rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
    text-decoration: none;
}
.btn:hover,
.cta:hover { text-decoration: none !important; }
.btn:active,
.cta:active { transform: translateY(1px); }
.btn:focus-visible,
.cta:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

.btn-primary,
.cta {
    background: var(--gold-500);
    color: var(--green-900) !important;
    border-color: var(--gold-500);
}
.btn-primary:hover,
.cta:hover {
    background: var(--gold-600);
    border-color: var(--gold-600);
    color: var(--green-900) !important;
}

.btn-secondary {
    background: transparent;
    color: var(--green-900);
    border-color: var(--green-800);
}
.btn-secondary:hover {
    background: var(--green-100);
}

.btn-green {
    background: var(--green-800);
    color: var(--white) !important;
    border-color: var(--green-800);
}
.btn-green:hover {
    background: var(--green-900);
    border-color: var(--green-900);
}

.btn-ghost {
    background: transparent;
    color: var(--green-800);
    border-color: transparent;
    padding-inline: 0.25rem;
}
.btn-ghost:hover { color: var(--green-900); text-decoration: underline !important; }

.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.875rem; }

/* Plain button-as-link (used for the Sign out form-submit) */
.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--green-800);
    cursor: pointer;
    font: inherit;
}
.link-button:hover { color: var(--green-900); text-decoration: underline; }

.inline-form { display: inline; }

/* ---------------------------------------------------------------------------
   6. Cards
   --------------------------------------------------------------------------- */
.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
}

.card h2, .card h3 { color: var(--green-900); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0;
}

/* Choice cards on /Account/RegisterChoice */
.choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin: var(--space-6) 0;
}
@media (max-width: 720px) {
    .choice-grid { grid-template-columns: 1fr; }
}
.choice-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--ink);
    transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.choice-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--green-700);
    text-decoration: none;
}
.choice-card h2 {
    margin: 0;
    font-size: 1.5rem;
}
.choice-card p {
    margin: 0;
    color: var(--muted);
    flex: 1;
}
.choice-card .cta {
    align-self: flex-start;
}

/* ---------------------------------------------------------------------------
   7. Forms
   --------------------------------------------------------------------------- */
.form-stacked {
    max-width: 28rem;
    margin: var(--space-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-row label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row input[type="number"],
.form-row input:not([type]),
.form-row textarea,
.form-row select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font: inherit;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-row input:focus-visible,
.form-row textarea:focus-visible,
.form-row select:focus-visible {
    outline: 2px solid var(--gold-500); /* WCAG 2.4.7 — visible focus indicator on light bg */
    outline-offset: 2px;
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
    outline: none;
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px rgba(11, 75, 54, 0.12);
}

.form-row .field-validation-error,
.form-row .text-danger,
.form-row span[asp-validation-for] {
    color: #a72a2a;
    font-size: 0.85rem;
}

.form-row-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 400;
    color: var(--ink);
    cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--green-700);
}

.form-summary {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: #fdecec;
    border-left: 4px solid #a72a2a;
    color: #6b1f1f;
    font-size: 0.9rem;
}
/* :empty alone is not enough — asp-validation-summary always renders an inner
   <ul><li style="display:none"></li></ul>, so :empty never matches. The framework
   adds .validation-summary-valid when there are no errors; hide on that. */
.form-summary:empty,
.form-summary.validation-summary-valid { display: none; }

/* Form section dividers (Phase 2 candidate profile editor).
   Editorial uppercase gold label with a hairline rule above, used inside
   a .form-stacked to group long forms. First section drops the divider. */
.form-section-heading {
    margin: var(--space-6) 0 var(--space-2);
    padding-top: var(--space-4);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-700); /* WCAG 1.4.3 AA — 4.5:1 vs white */
    border-top: 1px solid var(--border);
}
.form-section-heading:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Employer locations list (Phase 2). One card per EmployerLocation row,
   plus a small primary-marker pill in gold for the IsPrimary location. */
.location-list-head {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-4);
}
.location-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}
.location-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.location-card-city {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--green-900);
    margin: 0;
}
.location-card-address {
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}
.location-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: flex-end;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.location-card-actions a,
.location-card-actions button {
    font-size: 0.9rem;
    font-weight: 600;
}
.location-card-actions form { display: inline; margin: 0; }
.location-card-actions .btn-link {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: var(--green-800);
}
.location-card-actions .btn-link:hover { color: var(--green-900); text-decoration: underline; }
.location-card-actions .btn-danger {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: #a72a2a;
}
.location-card-actions .btn-danger:hover { text-decoration: underline; }

.badge-primary {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    background: var(--gold-500);
    color: var(--green-900);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Employer jobs list (Phase 2) — list page with filter pills + job cards.
   Status badges share the pill shape with .badge-primary but use status-
   specific color combinations composed from existing brand tokens. */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.filter-pill {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
.filter-pill:hover { border-color: var(--green-700); text-decoration: none; }
.filter-pill.is-active {
    background: var(--green-900);
    color: var(--white);
    border-color: var(--green-900);
}

.job-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.job-card:hover {
    border-color: var(--green-700);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.job-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.job-card-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--green-900);
    margin: 0;
}
.job-card-meta {
    color: var(--ink);
    margin: 0;
    font-size: 0.95rem;
}
.job-card-foot {
    color: var(--muted);
    margin: var(--space-2) 0 0;
    font-size: 0.85rem;
}

.job-status {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.job-status-draft    { background: var(--border);            color: var(--ink); }
.job-status-open     { background: var(--green-100);         color: var(--green-900); }
.job-status-closed   { background: rgba(245, 200, 59, 0.22); color: var(--gold-700); }
.job-status-archived { background: #ededed;                  color: var(--muted); }

/* Application status badges — same dimensions as .job-status, different palette
   focused on the candidate-side journey (Submitted → UnderReview → Shortlisted | Declined → Hired). */
.app-status {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.app-status-submitted   { background: var(--border);                color: var(--ink); }
.app-status-underreview { background: rgba(245, 200, 59, 0.22);     color: var(--gold-700); }
.app-status-shortlisted { background: var(--green-100);             color: var(--green-900); }
.app-status-declined    { background: #ededed;                      color: var(--muted); }
.app-status-hired       { background: var(--green-900);             color: var(--white); }
.app-status-withdrawn   { background: #e8eaed;                      color: #5f6368; }

/* Withdraw confirmation dialog */
.withdraw-dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: 28rem;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.withdraw-dialog::backdrop {
    background: rgba(6, 59, 44, 0.35);
}
.withdraw-dialog-body {
    padding: var(--space-5) var(--space-5) var(--space-3);
}
.withdraw-dialog-body h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    margin: 0 0 var(--space-2);
    color: var(--ink);
}
.withdraw-dialog-body p {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}
.withdraw-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    background: #fafbfa;
}
.btn-danger-subtle {
    background: #dc3545;
    color: var(--white);
    border: 1px solid #dc3545;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.btn-danger-subtle:hover { background: #c82333; border-color: #c82333; }
.job-card-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 var(--space-4) var(--space-3);
    margin-top: calc(-1 * var(--space-2));
}
.job-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.job-card-link:hover { text-decoration: none; }

/* Employer logo preview + upload */
.logo-preview { margin-bottom: var(--space-3); }
.logo-preview-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fafbfa;
}
.logo-upload-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.logo-upload-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.logo-delete-form { display: inline; }
/* Standalone logo block — sibling of (not nested in) the company edit form.
   Mirrors the separation used by .resume-section / .work-history-section. */
.logo-section { margin-top: var(--space-6); }
.form-hint { font-size: 0.82rem; color: var(--muted); }

/* UAT-24 — employer-signup "same as my login email" mirror. While ticked, the
   company-contact field is locked (readonly + dimmed) and shows the mirrored
   login email so the user sees exactly what will be used. JS toggles .is-locked;
   the value still posts because readonly (not disabled) inputs submit. No new
   tokens — reuses --muted / --space-2 / existing .form-checkbox + .form-hint. */
[data-email-mirror] .form-checkbox { margin: var(--space-2) 0; }
input.is-locked {
    background: #f3f5f4;
    color: var(--muted);
    cursor: not-allowed;
}

/* Logo thumbnail on job cards */
.job-card-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.job-card-head-with-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Bulk applicant status change */
.bulk-action-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--green-100);
    border: 1px solid var(--green-700);
    border-radius: var(--radius-md);
}
.bulk-count { font-weight: 600; font-size: 0.9rem; color: var(--green-900); }
.bulk-status-select {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}
.applicant-card-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.bulk-checkbox-label {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    cursor: pointer;
}
.bulk-checkbox { width: 1.1rem; height: 1.1rem; cursor: pointer; }
.applicant-card-row .job-card-link { flex: 1; }

/* Messaging thread */
.msg-thread {
    margin-top: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    display: flex;
    flex-direction: column;
    max-height: 28rem;
}
.msg-thread-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: var(--green-900);
}
.msg-thread-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.msg-bubble {
    max-width: 75%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    line-height: 1.55;
}
.msg-bubble-received {
    align-self: flex-start;
    background: var(--green-100);
    border-bottom-left-radius: var(--radius-sm);
}
.msg-bubble-sent {
    align-self: flex-end;
    background: #f5f0e4;
    border-bottom-right-radius: var(--radius-sm);
}
.msg-bubble-meta {
    font-size: 0.75rem;
    color: var(--muted);
    margin: 0 0 0.25rem;
}
.msg-bubble-sender { font-weight: 600; color: var(--ink); }
.msg-bubble p:last-child { margin: 0; }
.msg-compose {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
}
.msg-compose textarea {
    flex: 1;
    resize: none;
    min-height: 2.5rem;
    max-height: 6rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
}
.msg-compose textarea:focus { outline: none; border-color: var(--green-700); }
.msg-closed {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    font-style: italic;
}

.application-status-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--green-700);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
.application-status-blurb {
    font-size: 1rem;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}
.application-status-meta {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0;
}
.application-note {
    background: var(--green-050);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}

/* /Employer/Dashboard summary strip + section heading */
.dash-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin: var(--space-5) 0;
}
@media (max-width: 720px) {
    .dash-summary { grid-template-columns: 1fr; }
}
.dash-summary-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}
.dash-summary-action {
    border-left: 4px solid var(--gold-500);
}
.dash-summary-value {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--green-900);
    line-height: 1;
}
.dash-summary-label {
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.4rem;
}
.dash-section-h {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--green-900);
    margin: 0;
}
.dash-action-pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(245, 200, 59, 0.22);
    color: var(--gold-700);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* =============================================================================
   /Employer/Dashboard redesign (approved-employer view).
   Ported from docs/mockups/employer-dashboard.html (mk-* → real classes).
   Existing brand tokens only — no new tokens or new aesthetic direction.
   ============================================================================= */

/* Hero enhancement: company monogram/logo + Post-a-job CTA inside the single
   existing .page-hero band (no second hero). */
.dash-hero-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.dash-hero-logo {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.dash-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dash-hero-logo--mono {
    background: linear-gradient(145deg, var(--gold-500), var(--gold-600));
    color: var(--green-900);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.7rem;
}
.dash-hero-text {
    min-width: 0;
}
.dash-hero-text h1 {
    margin-bottom: var(--space-2);
}
.dash-hero-text .page-hero-sub {
    margin-top: var(--space-3);
}
.dash-hero-cta {
    margin-left: auto;
}
@media (max-width: 640px) {
    .dash-hero-cta { margin-left: 0; }
}

/* 4-up stat band. Pulled up over the hero edge like the mockup. */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: calc(-1 * var(--space-6)) 0 var(--space-6);
    position: relative;
}
@media (max-width: 780px) {
    .dash-stats { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
}
.dash-stat {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(6, 59, 44, 0.06);
    padding: var(--space-4) var(--space-5);
}
.dash-stat.is-action {
    border-left: 4px solid var(--gold-500);
}
.dash-stat-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    color: var(--green-900);
    line-height: 1;
}
.dash-stat.is-action .dash-stat-value {
    color: var(--gold-700);
}
.dash-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
    margin-top: 0.4rem;
}

/* Attention callout — renders only when TotalPendingAction > 0. */
.dash-attn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-left: 4px solid var(--gold-500);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}
.dash-attn-icon {
    color: var(--gold-700);
    font-size: 1.2rem;
}
.dash-attn-text strong {
    color: var(--green-900);
}
.dash-attn-link {
    margin-left: auto;
    color: var(--green-700);
    font-weight: 700;
    text-decoration: none;
}
.dash-attn-link:hover { text-decoration: underline; }
.dash-section-link {
    color: var(--green-700);
    font-weight: 600;
    text-decoration: none;
}
.dash-section-link:hover { text-decoration: underline; }

/* Rich job rows. */
.dash-jobs {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
}
.dash-jobrow {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-5);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dash-jobrow:hover {
    box-shadow: 0 8px 24px rgba(6, 59, 44, 0.06);
    transform: translateY(-1px);
}
@media (max-width: 720px) {
    .dash-jobrow { grid-template-columns: 1fr; gap: var(--space-3); }
}
.dash-jobrow-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.dash-job-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--green-900);
    margin: 0;
    width: 100%;
}
.dash-pend-pill {
    display: inline-block;
    background: var(--gold-500);
    color: var(--green-900);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
}
.dash-jobrow-metrics {
    display: flex;
    gap: var(--space-5);
    align-items: center;
}
.dash-metric {
    text-align: center;
}
.dash-metric-n {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--green-800);
    line-height: 1;
    white-space: nowrap;
}
.dash-metric.is-pending .dash-metric-n {
    color: var(--gold-700);
}
.dash-metric-l {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 700;
    margin-top: 0.25rem;
}
.dash-jobrow-right {
    text-align: right;
}
@media (max-width: 720px) {
    .dash-jobrow-right { text-align: left; }
}
.dash-job-last {
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 0.4rem;
}
.dash-review {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--green-900);
    color: var(--white);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.dash-review:hover {
    background: var(--green-800);
    text-decoration: none;
}

/* Candidate dashboard application rows. Mirrors .dash-jobs/.dash-jobrow for
   the employer surface, sized for the candidate's title / status / actions
   layout. Existing brand tokens only — no new aesthetic direction. */
.dash-apps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
}
.dash-approw {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-5);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dash-approw:hover {
    box-shadow: 0 8px 24px rgba(6, 59, 44, 0.06);
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    .dash-approw { grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); }
}
/* Per-row employer logo/monogram square — reuses the .company-logo green/gold
   treatment, sized down from the 64px company-card variant to suit the row. */
.dash-approw-logo {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
}
.dash-approw-main {
    min-width: 0;
}
.dash-app-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--green-900);
    margin: 0 0 0.25rem;
}
.dash-app-meta {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0;
}
.dash-approw-right {
    text-align: right;
}
@media (max-width: 640px) {
    .dash-approw-right { text-align: left; }
}
.dash-app-applied {
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 0.4rem;
}
.dash-approw-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
@media (max-width: 640px) {
    .dash-approw-actions { flex-wrap: wrap; }
}

/* /Employer/Applicants/{id} transition actions + email visibility */
.transition-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.transition-foot {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0;
}
.applicant-profile-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 var(--space-3);
    font-size: 0.92rem;
}
.applicant-profile-label {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.email-revealed {
    background: var(--green-050);
    border-left: 4px solid var(--green-700);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    margin: var(--space-4) 0;
    font-size: 0.95rem;
}
.email-revealed a { color: var(--green-900); font-weight: 600; }
.email-gated {
    background: #f6f5f0;
    border-left: 4px solid var(--border);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--muted);
    margin: var(--space-4) 0;
    font-size: 0.9rem;
}

/* State-machine action row on the Job Edit page. Sits below the main Save
   button as a separate group. */
.transition-actions {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.transition-actions h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-700);
    margin: 0 0 var(--space-3);
}
.transition-actions form { display: block; margin: 0 0 var(--space-3); }

/* ---------------------------------------------------------------------------
   7b. Public job search (/FindJobs) + Job detail (/Jobs/{id}) — Phase 2
   --------------------------------------------------------------------------- */
.search-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-6);
    margin-top: var(--space-6);
}
@media (max-width: 880px) {
    .search-layout { grid-template-columns: 1fr; }
}

.search-filters {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    align-self: start;
    position: sticky;
    top: var(--space-5);
}
.search-filters .filter-group {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-5);
}
.search-filters legend {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--green-900);
    margin-bottom: var(--space-2);
    padding: 0;
}
.filter-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.92rem;
    color: var(--ink);
    padding: 0.2rem 0;
    cursor: pointer;
}
.filter-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--green-700);
    flex-shrink: 0;
}
.filter-pay {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    background: var(--white);
}
.filter-pay input {
    border: 0;
    padding: 0;
    font: inherit;
    width: 6rem;
    background: transparent;
}
.filter-pay input:focus { outline: none; }
.filter-pay-unit {
    font-size: 0.78rem;
    color: var(--muted);
}

/* Phase 4B §B.3 — pay-range two-input row. Compact + balanced; mirrors
   .filter-pay's hosting affordance (border + bg) so both inputs feel
   like one control. */
.filter-pay-range {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    background: var(--white);
}
.filter-pay-input {
    border: 0;
    padding: 0;
    font: inherit;
    width: 4rem;
    background: transparent;
    min-width: 0;
}
.filter-pay-input:focus { outline: none; }
.filter-pay-symbol {
    color: var(--muted);
    font-size: 0.85rem;
}
.filter-pay-dash {
    color: var(--muted);
    font-weight: 600;
    padding: 0 2px;
}

/* Phase 4B §B.3 — sidebar select + text input pattern (used by posted-within
   and employer-name filters). Visually matches .filter-pay's border/padding
   so the entire sidebar feels uniform. */
.filter-select,
.filter-text-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
}
.filter-select:focus-visible,
.filter-text-input:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}
.search-filter-submit { width: 100%; margin-top: var(--space-2); }
.search-filter-clear {
    display: block;
    text-align: center;
    margin-top: var(--space-3);
    font-size: 0.85rem;
    color: var(--gold-700);
}

.search-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.search-results-count { margin: 0; color: var(--ink); }
.search-results-count strong { color: var(--green-900); }
.search-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}
.search-sort select {
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    font: inherit;
    color: var(--ink);
}

.search-results-list { display: block; }
.search-pay-pill {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--green-100);
    color: var(--green-900);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin: var(--space-6) 0;
    color: var(--ink);
}
.pagination-link {
    padding: 0.45rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--green-900);
    font-weight: 600;
    text-decoration: none;
}
.pagination-link:hover { border-color: var(--green-700); }
.pagination-current { color: var(--muted); font-size: 0.9rem; }

/* /Jobs/{id} */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-6);
    margin-top: var(--space-6);
    /* default align-items: stretch — lets .detail-rail fill the row height so the
       sticky .apply-card engages across the whole article scroll. */
}
@media (max-width: 880px) {
    .detail-layout { grid-template-columns: 1fr; }
}
.detail-section-h {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--green-900);
    margin: 0 0 var(--space-3);
}
.detail-posted {
    color: var(--muted);
    font-size: 0.9rem;
    margin: var(--space-4) 0;
}
.employer-summary {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    position: sticky;
    top: var(--space-5);
}
.employer-summary-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
}
.employer-summary-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--green-900);
    margin: 0 0 var(--space-2);
}
.employer-summary-short {
    color: var(--ink);
    margin: 0 0 var(--space-3);
}
.employer-summary-long { font-size: 0.92rem; }
.employer-summary-long p { margin: 0 0 var(--space-2); }
.employer-summary-link {
    margin: var(--space-3) 0 0;
    font-weight: 600;
}
.employer-summary-link a { color: var(--gold-700); }

/* /Jobs/{id} redesign — branded hero, meta chips, sticky apply rail.
   Reuses .detail-layout / .detail-section-h / .detail-posted above; brand
   tokens only (--green-*, --gold-*, --space-*, --radius-*, Playfair). */
.detail-back { margin-top: var(--space-6); }
.detail-back a { font-weight: 600; }

.job-hero-head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.job-hero-logo {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.job-hero-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.job-hero-headtext { min-width: 0; }

.job-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.job-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
.job-meta-chip--pay {
    background: var(--gold-500);
    color: var(--green-900);
    border-color: var(--gold-500);
}

.detail-rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.apply-card {
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-left: 4px solid var(--gold-500);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    position: sticky;
    top: var(--space-5);
}
@media (max-width: 880px) { .apply-card { position: static; } }
.apply-card-h {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--green-900);
    margin: 0 0 var(--space-2);
}
.apply-card-lede { color: var(--ink); font-size: 0.95rem; margin: 0 0 var(--space-4); }
.apply-card-cta { width: 100%; padding-top: 0.8rem; padding-bottom: 0.8rem; }
.apply-card-alt {
    display: inline-block;
    margin-top: var(--space-3);
    font-weight: 600;
    color: var(--gold-700);
    font-size: 0.92rem;
}
.apply-card-foot { color: var(--muted); font-size: 0.85rem; margin: var(--space-2) 0 0; }
.apply-card--notice { background: var(--white); border-left-color: var(--green-700); }

.employer-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.employer-card-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--green-900);
    margin: 0 0 var(--space-2);
}
.employer-card-short { color: var(--ink); margin: 0 0 var(--space-3); }
.employer-card-long { font-size: 0.92rem; }
.employer-card-long p { margin: 0 0 var(--space-2); }
.employer-card-link { margin: var(--space-3) 0 0; font-weight: 600; }
.employer-card-link a { color: var(--gold-700); }

/* /Jobs/{id} content-complete redesign (v2). Branded job-detail components —
   key-facts grid, company profile, map placeholder, more-jobs cards. Brand
   tokens only (--green-*, --gold-*, --ink, --muted, --border, --space-*,
   --radius-*, --shadow-*); stacks under 880px to match .detail-layout. */

/* Monogram fallback for the hero logo when the company has no LogoUrl. */
.job-hero-logo--mono {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--green-900);
    background: linear-gradient(145deg, var(--gold-500), var(--gold-600));
    border: 2px solid rgba(255, 255, 255, 0.2);
}
.job-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.job-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(245, 200, 59, 0.16);
    color: var(--gold-500);
    border: 1px solid rgba(245, 200, 59, 0.4);
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Card shell shared by every main-column section on the page. */
.detail-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
.detail-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-700);
    margin: 0 0 0.35rem;
}

/* Key facts grid — hairline-separated cells. */
.job-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 0;
}
.job-fact { background: var(--white); padding: var(--space-3) var(--space-4); }
.job-fact dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
    margin: 0;
}
.job-fact dd {
    margin: 0.3rem 0 0;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink);
}
.job-fact dd small { font-weight: 400; color: var(--muted); }
@media (max-width: 520px) {
    .job-facts { grid-template-columns: 1fr; }
}

/* Location block — map placeholder + full address. */
.job-loc {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-5);
    align-items: start;
}
@media (max-width: 620px) {
    .job-loc { grid-template-columns: 1fr; }
}
.job-map {
    position: relative;
    min-height: 170px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(17, 87, 64, 0.06), rgba(17, 87, 64, 0.02)),
        repeating-linear-gradient(0deg, var(--green-050), var(--green-050) 22px, var(--green-100) 22px, var(--green-100) 23px),
        repeating-linear-gradient(90deg, var(--green-050), var(--green-050) 22px, var(--green-100) 22px, var(--green-100) 23px);
}
.job-map-pin {
    width: 26px;
    height: 26px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--gold-500);
    border: 2px solid var(--green-900);
    box-shadow: var(--shadow-md);
}
.job-map small {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 0.66rem;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.8);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
}
.job-addr { font-style: normal; line-height: 1.65; color: var(--ink); }
.job-addr-nm { font-weight: 700; color: var(--green-900); }
.job-loc-tag {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--green-700);
    background: var(--green-100);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    margin-left: 0.4rem;
}

/* Company profile block. */
.company-head {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-4);
}
.company-logo {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--green-700), var(--green-900));
    color: var(--gold-500);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    overflow: hidden;
}
.company-logo--img { background: var(--white); border: 1px solid var(--border); }
.company-logo--img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.company-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--green-900);
    margin: 0;
}
.company-tag { color: var(--muted); margin: 0.2rem 0 0; font-size: 0.95rem; }
.company-long { font-size: 0.95rem; }
.company-long p { margin: 0 0 var(--space-3); line-height: 1.7; }

.company-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
.company-stat {
    flex: 1 1 140px;
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.company-stat-n {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--green-800);
}
.company-stat-l {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}
.company-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--green-700);
    color: var(--green-800);
    background: var(--green-050);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 var(--space-2);
}
.company-loc-kicker { margin-top: var(--space-4); }
.company-loclist {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}
.company-loclist li {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    line-height: 1.5;
    color: var(--ink);
}
.company-loclist li:first-child { border-top: 0; }
.company-loclist-ic { color: var(--gold-600); margin-top: 0.15rem; }
.company-links {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}
.company-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--green-700);
    font-weight: 600;
    text-decoration: none;
}
.company-link:hover { color: var(--gold-700); }

/* More jobs from this employer. */
.more-jobs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}
.more-jobcard {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--white);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.more-jobcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.more-jobcard h4 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.08rem;
    margin: 0 0 var(--space-2);
}
.more-jobcard-row { font-size: 0.82rem; color: var(--muted); margin: 0.2rem 0; }
.more-jobcard-pay {
    color: var(--green-800);
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: var(--space-2);
}
.more-jobcard a {
    display: inline-block;
    margin-top: 0.7rem;
    color: var(--green-700);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
}
.more-jobcard a:hover { color: var(--gold-700); }

/* Sticky job snapshot in the rail. */
.job-snapshot {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
}
.job-snapshot-h {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.05rem;
    margin: 0 0 var(--space-3);
}
.job-snapshot-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.45rem 0;
    border-top: 1px dashed var(--border);
    font-size: 0.9rem;
}
.job-snapshot-row:first-of-type { border-top: 0; }
.job-snapshot-row .k { color: var(--muted); }
.job-snapshot-row .v { font-weight: 600; color: var(--ink); text-align: right; }

@media (prefers-reduced-motion: no-preference) {
    .job-hero-head, .job-meta-chip { animation: jobHeroReveal 420ms ease both; }
    .job-meta-chip:nth-child(1) { animation-delay: 60ms; }
    .job-meta-chip:nth-child(2) { animation-delay: 110ms; }
    .job-meta-chip:nth-child(3) { animation-delay: 160ms; }
    .job-meta-chip:nth-child(4) { animation-delay: 210ms; }
    @keyframes jobHeroReveal {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* /Jobs/{id}/Apply */
.apply-lede {
    color: var(--ink);
    margin: 0 0 var(--space-5);
}
.form-row-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: 0.35rem;
}
.char-counter {
    font-size: 0.8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.apply-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.apply-cancel {
    color: var(--muted);
    font-weight: 600;
}
.apply-cancel:hover { color: var(--green-900); }

/* ---------------------------------------------------------------------------
   8. Notice
   --------------------------------------------------------------------------- */
.notice {
    background: var(--green-050);
    border-left: 4px solid var(--gold-500);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
    color: var(--ink);
}
.notice strong { color: var(--green-900); }

/* ---------------------------------------------------------------------------
   9. Header
   --------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--green-900);
    color: var(--white);
    padding: var(--space-2) var(--space-4);
    z-index: 100;
}
.skip-link:focus { left: 0; }

.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(180%) blur(6px);
}

.site-header .container {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-height: 76px;
    padding-block: var(--space-3);
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--green-900);
    font-family: var(--font-display);
    font-weight: 600;
    flex-shrink: 0;
}
.brand img {
    height: 44px;
    width: auto;
    display: block;
}
.brand:hover { text-decoration: none; }

.primary-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 1;
}
.primary-nav a {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.95rem;
    padding: var(--space-2) 0;
    text-decoration: none;
    position: relative;
}
.primary-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 160ms ease;
}
.primary-nav a:hover {
    color: var(--green-900);
    text-decoration: none;
}
.primary-nav a:hover::after { transform: scaleX(1); }

.auth-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}
.auth-nav a:not(.cta):not(.btn) {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.95rem;
}
.auth-nav a:not(.cta):not(.btn):hover { color: var(--green-900); text-decoration: none; }

.user-greeting {
    color: var(--muted);
    font-size: 0.9rem;
}

@media (max-width: 880px) {
    .site-header .container {
        flex-wrap: wrap;
        gap: var(--space-4);
    }
    .primary-nav {
        order: 3;
        width: 100%;
        gap: var(--space-4);
        overflow-x: auto;
    }
}

/* ---------------------------------------------------------------------------
   9b. Notification bell (Phase 4A §B.9)
   Authenticated-only bell + gold unread badge + dropdown panel.
   Lives inside .auth-nav; markup in _Layout.cshtml; behavior in site.js.
   --------------------------------------------------------------------------- */
.notif-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notif-bell {
    appearance: none;
    background: transparent;
    border: 0;
    padding: var(--space-2);
    margin: 0;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 6px);
    position: relative;
    transition: color 120ms ease;
}
.notif-bell:hover { color: var(--green-900); }
.notif-bell:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}
.notif-bell[aria-expanded="true"] { color: var(--green-900); }
.notif-bell[aria-expanded="true"]::after {
    content: '';
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    bottom: -2px;
    height: 2px;
    background: var(--gold-500);
}

.notif-bell-icon {
    display: block;
    pointer-events: none;
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold-500);
    color: var(--green-900);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--white);
    pointer-events: none;
}
.notif-badge[hidden] { display: none; }

.notif-panel {
    position: absolute;
    top: calc(100% + var(--space-3));
    right: 0;
    width: min(360px, calc(100vw - var(--space-5) * 2));
    max-height: 70vh;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px -16px rgba(6, 59, 44, 0.25), 0 4px 12px -6px rgba(6, 59, 44, 0.15);
    z-index: 60;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 140ms ease-out, transform 140ms ease-out;
    display: flex;
    flex-direction: column;
}
.notif-panel:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
}
.notif-panel[hidden] {
    display: none;
}

.notif-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border);
    gap: var(--space-3);
    flex-shrink: 0;
}
.notif-panel-head h3 {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--green-900);
}
.notif-panel-head .link-button {
    font-size: 0.85rem;
}

.notif-panel-body {
    overflow-y: auto;
    flex: 1;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    text-decoration: none;
    transition: background 100ms ease;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover,
.notif-item:focus-visible {
    background: var(--green-050);
    text-decoration: none;
    color: var(--ink);
}
.notif-item:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: -2px;
}

.notif-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: transparent;
}
.notif-item.is-unread .notif-dot {
    background: var(--gold-500);
}

.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
    display: block;
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.notif-item.is-unread .notif-item-title { color: var(--green-900); }
.notif-item-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--muted);
}
.notif-item-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--muted);
}

.notif-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.notif-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
}
.notif-skeleton span {
    display: block;
    height: 14px;
    background: linear-gradient(90deg, var(--green-050) 0%, var(--green-100) 50%, var(--green-050) 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: notif-skeleton-shimmer 1.4s ease-in-out infinite;
}
.notif-skeleton span:nth-child(2) { width: 80%; }
.notif-skeleton span:nth-child(3) { width: 60%; }

@keyframes notif-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .notif-panel { transition: none; }
    .notif-skeleton span { animation: none; }
}

@media (max-width: 640px) {
    .notif-panel {
        position: fixed;
        top: 76px;
        left: var(--space-3);
        right: var(--space-3);
        width: auto;
        max-height: calc(100vh - 92px);
    }
}

/* ---------------------------------------------------------------------------
   10. Main
   --------------------------------------------------------------------------- */
.site-main {
    padding: var(--space-7) 0 var(--space-8);
    min-height: calc(100vh - 76px - 320px);
}

/* ---------------------------------------------------------------------------
   11. Hero (legacy textual hero — kept for any pages that still use .hero;
       the homepage now uses .hero-band below, section 13)
   --------------------------------------------------------------------------- */
.hero {
    padding: var(--space-7) 0 var(--space-8);
}
.hero h1 {
    font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
    max-width: 22ch;
    margin-bottom: var(--space-5);
}
.hero .lead {
    font-size: 1.125rem;
    max-width: 40rem;
    margin-bottom: var(--space-6);
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

/* ---------------------------------------------------------------------------
   13. Visually hidden helper
   --------------------------------------------------------------------------- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   14. Full-bleed section breakout
   The site layout wraps <main> content in .container. A "band" element uses
   the 100vw breakout trick to span edge-to-edge while content inside stays
   constrained. Body overflow-x is clipped so the breakout never produces a
   horizontal scrollbar.
   --------------------------------------------------------------------------- */
body { overflow-x: clip; }

.band-bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
}

/* ---------------------------------------------------------------------------
   15. Hero band (homepage)
   --------------------------------------------------------------------------- */
.hero-band {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    /* cancel .site-main top padding so the band sits flush under the header */
    margin-top: calc(-1 * var(--space-7));
    background: var(--green-900);
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
}

.hero-band::after {
    /* subtle vignette in the bottom-left to keep copy legible */
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.22));
    pointer-events: none;
    z-index: 0;
}

.hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    z-index: 0;
}
/* Three crossfading image layers. Pure CSS: the keyframe loop lives in the
   prefers-reduced-motion block below, so motion-sensitive users get a single
   static image (slide 1). The gradient pseudo-elements sit above the slides. */
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    z-index: 0;
}
.hero-slide-1 { background-image: url('/img/hero/banner_image4.webp'); opacity: 1; }
.hero-slide-2 { background-image: url('/img/hero/banner_image1.webp'); opacity: 0; }
.hero-slide-3 { background-image: url('/img/hero/banner_image7.webp'); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    .hero-slide { animation: heroCrossfade 18s infinite; }
    .hero-slide-1 { animation-delay: -2s; }
    .hero-slide-2 { animation-delay: 4s; }
    .hero-slide-3 { animation-delay: 10s; }
    @keyframes heroCrossfade {
        0%   { opacity: 0; }
        11%  { opacity: 1; }
        28%  { opacity: 1; }
        39%  { opacity: 0; }
        100% { opacity: 0; }
    }
}
.hero-photo::before {
    /* fade the photo into the green band on its left edge */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg,
        var(--green-900) 0%,
        rgba(6, 59, 44, 0.92) 8%,
        rgba(6, 59, 44, 0.55) 20%,
        rgba(6, 59, 44, 0.15) 38%,
        rgba(6, 59, 44, 0) 55%);
    pointer-events: none;
}
.hero-photo::after {
    /* warm tint over the photo to harmonise with the green */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(6, 59, 44, 0.05), rgba(6, 59, 44, 0.25));
    pointer-events: none;
    mix-blend-mode: multiply;
}

.hero-band-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(2.5rem, 4vw + 1rem, 5rem) var(--space-5) clamp(2.5rem, 4vw + 1rem, 4.5rem);
}

.hero-copy {
    max-width: 36rem;
}

.hero-headline {
    font-family: var(--font-display);
    color: var(--white);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.005em;
    font-size: clamp(2.25rem, 1.6rem + 3.2vw, 3.85rem);
    margin: 0 0 var(--space-4);
}

.hero-sub {
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.1rem);
    max-width: 32rem;
    margin: 0 0 var(--space-6);
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: clamp(2rem, 3vw, 3rem);
}

.btn-lg {
    padding: 0.85rem 1.4rem;
    font-size: 1rem;
}

.btn-outline-light {
    background: transparent;
    color: var(--white) !important;
    border-color: rgba(255, 255, 255, 0.7);
}
.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--white);
    color: var(--white) !important;
}

/* Hero search bar */
.hero-search {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-radius: 999px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    padding: 0.35rem 0.35rem 0.35rem 0.5rem;
    max-width: 56rem;
    margin: 0 0 var(--space-5);
}
.hero-search-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.55rem 0.9rem;
    min-width: 0;
}
.hero-search-icon {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    color: var(--muted);
}
.hero-search-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.98rem;
    color: var(--ink);
    padding: 0.25rem 0;
}
.hero-search-field input::placeholder { color: var(--muted); }
.hero-search-field input:focus { outline: none; }
.hero-search-field input:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; border-radius: 4px; }
.hero-search-field:focus-within { box-shadow: inset 0 0 0 2px var(--green-100); border-radius: 999px; }
.hero-search-divider {
    width: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}
.hero-search-submit {
    background: var(--green-800);
    color: var(--white);
    border: 0;
    border-radius: 999px;
    padding: 0 1.6rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.98rem;
    cursor: pointer;
    transition: background-color 120ms ease;
}
.hero-search-submit:hover { background: var(--green-900); }
.hero-search-submit:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

/* Hero chip nav */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.hero-chips .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}
.hero-chips .chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--gold-500);
    color: var(--white);
    text-decoration: none;
}
.chip-icon {
    width: 1rem;
    height: 1rem;
    color: var(--gold-500);
}

/* Hero responsive */
@media (max-width: 880px) {
    .hero-photo { width: 100%; opacity: 0.35; }
    .hero-photo::before {
        background: linear-gradient(180deg,
            rgba(6, 59, 44, 0.55) 0%,
            rgba(6, 59, 44, 0.85) 60%,
            var(--green-900) 100%);
    }
    .hero-copy { max-width: 100%; }
    .hero-search {
        grid-template-columns: 1fr;
        border-radius: var(--radius-md);
        padding: var(--space-2);
        gap: var(--space-2);
    }
    .hero-search-divider { display: none; }
    .hero-search-field { padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .hero-search-submit { padding: 0.75rem 1.2rem; border-radius: var(--radius-md); }
}

/* ---------------------------------------------------------------------------
   16. Sections (generic light/surface band wrappers used below the hero)
   --------------------------------------------------------------------------- */
.section {
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.section-light { background: var(--white); }
.section-surface { background: var(--surface); }
.section-green {
    background: var(--green-900);
    color: var(--white);
}

.section-head {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto var(--space-7);
}
.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
    color: var(--green-900);
    margin: 0 0 var(--space-3);
}
.section-lede {
    color: var(--muted);
    font-size: 1.05rem;
    margin: 0;
}

/* full-bleed wrapper for sections that need to break out of .container */
.section.band-bleed {
    /* same as .band-bleed but already a section */
    padding: clamp(3rem, 6vw, 5rem) var(--space-5);
}

/* ---------------------------------------------------------------------------
   17. Benefit cards (homepage)
   --------------------------------------------------------------------------- */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
@media (max-width: 980px) {
    .benefit-grid { grid-template-columns: 1fr; }
}

.benefit-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.benefit-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--green-100);
    color: var(--green-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}
.benefit-icon svg {
    width: 22px;
    height: 22px;
}

.benefit-title {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--green-900);
    margin: 0;
}
.benefit-body {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0 0 var(--space-4);
    line-height: 1.55;
}

/* Inline preview panel inside each benefit card */
.benefit-preview {
    margin-top: auto;
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: 0.9rem;
}

.preview-label {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: var(--space-2);
}
.preview-label + .preview-label {
    margin-top: var(--space-4);
}

/* Preview 1: profile mini */
.preview-profile-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.preview-profile-name {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.98rem;
}
.preview-profile-role {
    color: var(--green-800);
    font-size: 0.85rem;
    font-weight: 500;
}
.preview-profile-meta {
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Chip system used inside previews */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--border);
}
.chip-soft {
    background: var(--white);
    color: var(--ink);
    border-color: var(--border);
}
.chip-on {
    background: var(--green-800);
    color: var(--white);
    border-color: var(--green-800);
}

/* Preview 2: availability */
.dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-bottom: var(--space-3);
}
.dow {
    text-align: center;
    padding: 0.35rem 0;
    border-radius: var(--radius-sm);
    background: var(--white);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink);
}
.dow-on {
    background: var(--green-800);
    color: var(--white);
    border-color: var(--green-800);
}

/* Preview 3: badges */
.badge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--space-3);
}
.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--border);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink);
}
.badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.preview-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--green-800);
    text-decoration: none;
}
.preview-link:hover { color: var(--green-900); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   18. Section heads — left-aligned variant with right-side link
   --------------------------------------------------------------------------- */
.section-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.section-title-left {
    text-align: left;
    margin: 0;
}
.section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--green-800);
    text-decoration: none;
    white-space: nowrap;
}
.section-link:hover {
    color: var(--green-900);
    text-decoration: underline;
    text-decoration-color: var(--gold-500);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   19. Gold rule (small accent underline used in split sections + employer)
   --------------------------------------------------------------------------- */
.gold-rule {
    display: block;
    width: 56px;
    height: 3px;
    background: var(--gold-500);
    border-radius: 2px;
    margin: 0 0 var(--space-5);
}
.gold-rule-light { background: var(--gold-500); }

/* ---------------------------------------------------------------------------
   20. Job cards
   --------------------------------------------------------------------------- */
.job-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
@media (max-width: 980px) { .job-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .job-grid { grid-template-columns: 1fr; } }

.job-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.job-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.job-photo {
    position: relative;
    aspect-ratio: 16 / 9;
    background-color: var(--green-100);
    background-size: cover;
    background-position: center;
}
.job-save {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green-800);
    transition: background-color 140ms ease, color 140ms ease;
    padding: 0;
}
.job-save:hover { background: var(--white); color: var(--green-900); }
.job-save svg { width: 18px; height: 18px; }

.job-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.job-title {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--green-900);
    margin: 0;
}
.job-employer {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: -0.25rem;
}

.job-meta {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    color: var(--ink);
    font-size: 0.88rem;
}
.job-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.job-meta-item svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--green-700);
    flex-shrink: 0;
}
.job-meta-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
}

.job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.job-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-3);
}
.job-actions .btn { padding: 0.55rem 1rem; font-size: 0.9rem; }

.btn-outline-save {
    background: transparent;
    color: var(--green-800) !important;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.btn-outline-save:hover {
    background: var(--green-050);
    border-color: var(--green-700);
}
.btn-outline-save svg {
    width: 1rem;
    height: 1rem;
}
.job-apply { flex: 1; justify-content: center; }

/* ---------------------------------------------------------------------------
   21. Two-column split section (profile preview)
   --------------------------------------------------------------------------- */
.split-2 {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-7);
    align-items: start;
}
@media (max-width: 980px) {
    .split-2 { grid-template-columns: 1fr; gap: var(--space-6); }
}

.split-left { padding-top: var(--space-2); }

.numbered-points {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.numbered-points li {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}
.num-badge {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--green-800);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
}
.num-body { flex: 1; }
.num-title {
    font-weight: 600;
    color: var(--green-900);
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}
.num-text {
    color: var(--muted);
    margin: 0;
    font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
   22. Profile preview card (Jordan Lee)
   --------------------------------------------------------------------------- */
.profile-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.profile-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}
.profile-name {
    font-weight: 600;
    color: var(--green-900);
    font-size: 1.1rem;
}
.profile-role {
    color: var(--green-800);
    font-size: 0.9rem;
    font-weight: 500;
}
.profile-meta {
    color: var(--muted);
    font-size: 0.82rem;
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.profile-actions .btn[disabled],
.profile-actions .btn[aria-disabled="true"] {
    opacity: 0.85;
    cursor: not-allowed;
}

.profile-sub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
@media (max-width: 720px) {
    .profile-sub-grid { grid-template-columns: 1fr; }
}
.profile-sub { display: flex; flex-direction: column; gap: var(--space-2); }
.profile-sub .preview-label { margin-bottom: 0; }

.skill-meter {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.skill-meter li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--ink);
    gap: var(--space-3);
}
.skill-name { font-weight: 500; }
.dot-meter {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
}
.dot-meter span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green-700);
    display: inline-block;
}
.dot-meter span:nth-child(n+1):nth-last-child(-n+0) { background: var(--border); }
/* Variant rules — N filled dots */
.dot-meter-4 span:nth-child(5) { background: var(--border); }
.dot-meter-3 span:nth-child(4),
.dot-meter-3 span:nth-child(5) { background: var(--border); }

.profile-experience {
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
}
.experience-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.experience-list li {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-4);
    position: relative;
}
.experience-list li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: -16px;
    width: 2px;
    background: var(--green-100);
}
.experience-list li:last-child::before { display: none; }
.exp-role {
    position: relative;
    padding-left: var(--space-4);
}
.exp-role::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green-800);
    border: 2px solid var(--white);
    box-shadow: 0 0 0 2px var(--green-100);
}
.exp-role-title { font-weight: 600; color: var(--green-900); }
.exp-role-co { color: var(--muted); font-size: 0.88rem; }
.exp-detail ul {
    margin: 0 0 var(--space-2);
    padding-left: 1.1rem;
    color: var(--ink);
    font-size: 0.88rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.exp-dates { color: var(--muted); font-size: 0.82rem; }

@media (max-width: 720px) {
    .experience-list li { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   23. Employer band (full-bleed dark green panel with dashboard mockup)
   --------------------------------------------------------------------------- */
.employer-band {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    background: var(--green-900);
    color: var(--white);
    padding: clamp(3rem, 6vw, 5rem) var(--space-5);
}
.employer-band-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-7);
    align-items: center;
}
@media (max-width: 980px) {
    .employer-band-inner { grid-template-columns: 1fr; }
}

.employer-title {
    font-family: var(--font-display);
    color: var(--white);
    font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.25rem);
    line-height: 1.15;
    margin: 0 0 var(--space-3);
}
.employer-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin: 0 0 var(--space-5);
    max-width: 32rem;
}
.employer-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Dashboard mockup */
.dashboard-mock { display: block; }
.dashboard-card {
    background: var(--white);
    color: var(--ink);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    display: grid;
    grid-template-columns: 200px 1fr;
    overflow: hidden;
    min-height: 360px;
}
@media (max-width: 640px) {
    .dashboard-card { grid-template-columns: 1fr; }
}
.dashboard-nav {
    background: var(--green-050);
    border-right: 1px solid var(--border);
    padding: var(--space-4);
}
.dashboard-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-4);
}
.dashboard-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--green-800);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}
.dashboard-brand-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--green-900);
}
.dashboard-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dashboard-nav-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: default;
}
.dashboard-nav-list li.is-active {
    background: var(--green-800);
    color: var(--white);
}
.dashboard-nav-icon {
    width: 1rem;
    text-align: center;
    font-size: 0.85rem;
}

.dashboard-main {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.dashboard-main-title {
    font-weight: 600;
    color: var(--green-900);
    font-size: 1rem;
    margin-bottom: var(--space-2);
}
.dashboard-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}
.d-pill {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--white);
    color: var(--muted);
    border: 1px solid var(--border);
}
.d-pill-on { background: var(--green-800); color: var(--white); border-color: var(--green-800); }

.applicant-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.applicant-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--space-3);
    align-items: center;
    padding: 0.5rem 0.4rem;
    border-radius: var(--radius-sm);
}
.applicant-row + .applicant-row { border-top: 1px solid var(--green-050); }
.applicant-name { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.applicant-meta { font-size: 0.78rem; color: var(--muted); margin-top: 1px; }
.applicant-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.3rem;
}
.applicant-tags .chip { padding: 0.15rem 0.55rem; font-size: 0.75rem; }
.status-pill {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
}
.status-new       { background: #e6f1ff; color: #1f4b8a; }
.status-screening { background: #fff5dc; color: #8a6a16; }
.status-interview { background: #ecf6ef; color: #1f6b41; }
.applicant-actions {
    display: flex;
    gap: 0.55rem;
    color: var(--muted);
    font-size: 0.95rem;
    cursor: default;
}

/* ---------------------------------------------------------------------------
   24. Testimonials
   --------------------------------------------------------------------------- */
.testimonial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}
@media (max-width: 720px) { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial {
    margin: 0;
    padding: var(--space-5) var(--space-6);
    background: var(--white);
    border-left: 3px solid var(--gold-500);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.testimonial-quote-mark {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 0.5;
    color: var(--gold-500);
    margin: 0;
}
.testimonial-quote {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--ink);
    margin: 0;
    line-height: 1.55;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: var(--space-2);
}
.testimonial-name { font-weight: 600; color: var(--green-900); font-size: 0.92rem; }
.testimonial-role { color: var(--muted); font-size: 0.82rem; }

/* ---------------------------------------------------------------------------
   25. FAQ + Newsletter (two-column)
   --------------------------------------------------------------------------- */
.faq-newsletter {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-7);
    align-items: start;
}
@media (max-width: 880px) {
    .faq-newsletter { grid-template-columns: 1fr; gap: var(--space-6); }
}

.faq-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.faq-title {
    font-family: var(--font-body);
    color: var(--green-900);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}
.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}
.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-item details summary {
    list-style: none;
    cursor: pointer;
    padding: var(--space-4) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--green-900);
    font-weight: 500;
    font-size: 1rem;
}
.faq-item details summary::-webkit-details-marker { display: none; }
.faq-q { flex: 1; }
.faq-chev {
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--green-800);
    transition: transform 200ms ease;
}
.faq-item details[open] .faq-chev { transform: rotate(90deg); }
.faq-a {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0 0 var(--space-4);
    max-width: 38rem;
}

.newsletter-col {
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}
.newsletter-title {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.4rem;
    margin: 0 0 var(--space-3);
}
.newsletter-sub {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0 0 var(--space-4);
}
.newsletter-form {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
}
.newsletter-form input[type="email"]:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}
.newsletter-form input[type="email"]:focus {
    outline: none;
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px rgba(11, 75, 54, 0.12);
}
.newsletter-form .btn { padding: 0.75rem 1.25rem; }

/* ---------------------------------------------------------------------------
   26. Page hero (inner pages — narrower than the homepage band, no photo)
   --------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    margin-top: calc(-1 * var(--space-7));
    margin-bottom: var(--space-7);
    background: var(--green-900);
    color: var(--white);
    padding: clamp(2.5rem, 4vw + 1rem, 4rem) var(--space-5) clamp(2.5rem, 4vw + 1rem, 3.5rem);
}
.page-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.page-hero-eyebrow {
    color: var(--gold-500);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    display: inline-block;
    margin-bottom: var(--space-3);
}
.page-hero h1 {
    font-family: var(--font-display);
    color: var(--white);
    font-size: clamp(1.95rem, 1.4rem + 1.8vw, 2.85rem);
    line-height: 1.1;
    margin: 0 0 var(--space-3);
    max-width: 26ch;
}
.page-hero-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    margin: 0;
    max-width: 38rem;
}
.page-hero-search {
    margin-top: var(--space-5);
    max-width: 56rem;
}

/* ---------------------------------------------------------------------------
   27. Auth + content cards on inner pages
   --------------------------------------------------------------------------- */
.auth-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-7);
    align-items: start;
    margin: 0 auto;
    max-width: 920px;
}
@media (max-width: 880px) {
    .auth-split { grid-template-columns: 1fr; gap: var(--space-5); }
}

.auth-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
}
.auth-card h2 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.5rem;
    margin: 0 0 var(--space-4);
}
.auth-card .form-stacked { margin: 0; max-width: none; }
.auth-card .cta,
.auth-card .btn { width: 100%; padding-top: 0.85rem; padding-bottom: 0.85rem; }
.auth-foot {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.92rem;
}
.auth-foot a { font-weight: 600; }

.auth-side {
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}
.auth-side h3 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.2rem;
    margin: 0 0 var(--space-3);
}
.auth-side ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* Hanging-indent marker (NOT flex): a flex <li> turns every inline child into
   its own flex item, so a list item containing <strong> split into side-by-side
   columns. Absolute-positioned ✓ + padding-left lets the text (incl. inline
   markup) flow as a normal sentence. */
.auth-side ul li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--ink);
    font-size: 0.95rem;
    line-height: 1.5;
}
.auth-side ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--green-800);
    font-weight: 700;
    line-height: 1.5;
}

/* Context-note banner shown above RegisterChoice when arriving from
   newsletter, hero search, etc. */
.context-note {
    background: var(--green-100);
    border-left: 4px solid var(--gold-500);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin: 0 auto var(--space-5);
    max-width: 56rem;
    color: var(--ink);
    font-size: 0.95rem;
}
.context-note strong { color: var(--green-900); }

/* Pre-highlight one of the choice cards when ?as=candidate / ?as=employer */
.choice-card.is-suggested {
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px var(--green-100), var(--shadow-md);
}
.choice-card-eyebrow {
    color: var(--gold-600);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   28. Value-prop card row (used on /ForEmployers and similar)
   --------------------------------------------------------------------------- */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
@media (max-width: 880px) { .value-grid { grid-template-columns: 1fr; } }

.value-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.value-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--green-100);
    color: var(--green-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}
.value-card-icon svg { width: 22px; height: 22px; }
.value-card h3 {
    font-family: var(--font-body);
    color: var(--green-900);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--space-2);
}
.value-card p {
    color: var(--muted);
    margin: 0;
    font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
   29. Page-hero search bar (re-uses the hero-search look on inner pages)
   --------------------------------------------------------------------------- */
.page-hero .hero-search {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   30. Form helpers (used across all auth + content pages)
   --------------------------------------------------------------------------- */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 560px) { .form-grid-2 { grid-template-columns: 1fr; } }

.form-fineprint {
    margin: calc(-1 * var(--space-1)) 0 var(--space-3);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.form-section-divider {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.25rem;
}

/* Wider auth-split for the employer registration (two-section form) */
.auth-split-wide {
    max-width: 1040px;
}
.auth-split-wide .auth-card { padding: clamp(1.5rem, 2vw + 0.5rem, 2.5rem); }

/* ---------------------------------------------------------------------------
   31. Directory empty state (/CompanyDirectory)
   --------------------------------------------------------------------------- */
.directory-empty {
    text-align: center;
    max-width: 38rem;
    margin: 0 auto;
    padding: var(--space-7) var(--space-5);
    background: var(--green-050);
    border: 1px dashed var(--green-100);
    border-radius: var(--radius-md);
}
.directory-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--white);
    color: var(--green-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    box-shadow: var(--shadow-sm);
}
.directory-empty-icon svg { width: 28px; height: 28px; }
.directory-empty h2 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.35rem;
    margin: 0 0 var(--space-3);
}
.directory-empty p {
    color: var(--muted);
    margin: 0 0 var(--space-5);
}
.directory-empty-ctas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   32. Contact channel card (/Contact)
   --------------------------------------------------------------------------- */
.contact-channel {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
}
.contact-channel-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--green-800);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-channel-icon svg { width: 22px; height: 22px; }
.contact-channel-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 0.15rem;
}
.contact-channel-value {
    display: inline-block;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--green-900);
    text-decoration: none;
}
.contact-channel-value:hover {
    color: var(--green-700);
    text-decoration: underline;
    text-decoration-color: var(--gold-500);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.contact-channel-note {
    margin: var(--space-1) 0 0;
    font-size: 0.88rem;
}

/* ---------------------------------------------------------------------------
   33. Status card (confirmation / success / error / access-denied pages)
   --------------------------------------------------------------------------- */
.status-page {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}
.status-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: clamp(2rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}
.status-icon svg { width: 32px; height: 32px; }
.status-icon-success { background: var(--green-100); color: var(--green-800); }
.status-icon-info    { background: #e6f1ff; color: #1f4b8a; }
.status-icon-warn    { background: #fff5dc; color: #8a6a16; }
.status-icon-error   { background: #fdecec; color: #a72a2a; }

.status-card h2 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.55rem;
    margin: 0;
}
.status-card .status-detail {
    color: var(--muted);
    margin: 0;
    max-width: 30rem;
}
.status-card .status-detail strong { color: var(--ink); }
.status-card-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-3);
}
.status-foot {
    margin-top: var(--space-4);
    color: var(--muted);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   34. Single-column auth layout (utility forms — Forgot/Reset Password)
   --------------------------------------------------------------------------- */
.auth-single {
    max-width: 480px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   35. Prose / long-form copy (Privacy, Terms, and future content pages)
   --------------------------------------------------------------------------- */
.prose {
    max-width: 42rem;
    margin: 0 auto;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.7;
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.45rem;
    margin-top: var(--space-6);
    margin-bottom: 0;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
    font-family: var(--font-body);
    color: var(--green-900);
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: var(--space-5);
    margin-bottom: 0;
}
.prose p {
    margin: 0;
    color: var(--ink);
}
.prose ul, .prose ol {
    margin: 0;
    padding-left: 1.4rem;
    color: var(--ink);
}
.prose li + li { margin-top: var(--space-2); }
.prose a {
    color: var(--green-800);
    text-decoration: underline;
    text-decoration-color: var(--gold-500);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.prose a:hover { color: var(--green-900); }
.prose .prose-note {
    background: var(--green-050);
    border-left: 4px solid var(--gold-500);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    color: var(--ink);
}

/* ---------------------------------------------------------------------------
   36. Dashboards (Candidate, Employer — authenticated landing pages)
   --------------------------------------------------------------------------- */

/* Status banner — surfaces EmployerCompany.Status (PendingReview / Approved / etc.) */
.status-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: var(--space-5);
}
.status-banner::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.status-pending   { background: #fff5dc; color: #8a6a16; }
.status-approved  { background: var(--green-100); color: var(--green-800); }
.status-rejected  { background: #fdecec; color: #a72a2a; }
.status-suspended { background: #f1f0e8; color: #65603a; }
.status-unknown   { background: var(--border); color: var(--ink); }

/* Stat-card grid */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .dash-grid { grid-template-columns: 1fr; } }

.dash-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 138px;
}
.dash-card-label {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.dash-card-value {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 2rem;
    line-height: 1;
    font-weight: 600;
}
.dash-card-meta {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0;
}
.dash-card-cta {
    margin-top: auto;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--green-800);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.dash-card-cta:hover {
    color: var(--green-900);
    text-decoration: underline;
    text-decoration-color: var(--gold-500);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* "What's next" / next-steps panel */
.dash-next {
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}
.dash-next h2 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.3rem;
    margin: 0 0 var(--space-2);
}
.dash-next-sub {
    color: var(--muted);
    margin: 0 0 var(--space-4);
}
.dash-next-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
@media (max-width: 720px) { .dash-next-list { grid-template-columns: 1fr; } }
.dash-next-list li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--ink);
    font-size: 0.95rem;
}
.dash-next-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--green-800);
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Identity / account row at the bottom of the dashboard */
.dash-account {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.dash-account-id { display: flex; flex-direction: column; }
.dash-account-name {
    font-weight: 600;
    color: var(--green-900);
    font-size: 1rem;
}
.dash-account-email {
    color: var(--muted);
    font-size: 0.88rem;
}
.dash-account-role {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--green-100);
    color: var(--green-800);
    font-size: 0.85rem;
    font-weight: 600;
}
@media (max-width: 560px) {
    .dash-account { grid-template-columns: auto 1fr; }
    .dash-account-role { grid-column: 1 / -1; justify-self: start; }
}

/* ---------------------------------------------------------------------------
   37. Admin shell + sub-nav
   --------------------------------------------------------------------------- */
.admin-nav {
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-md);
    padding: 0.4rem;
    margin-bottom: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    overflow-x: auto;
}
.admin-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-weight: 500;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
}
.admin-nav a:hover {
    background: var(--white);
    color: var(--green-900);
    text-decoration: none;
}
.admin-nav a.is-active {
    background: var(--green-800);
    color: var(--white);
}
.admin-nav-icon {
    width: 1rem;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   38. Data tables (admin)
   --------------------------------------------------------------------------- */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.data-table thead th {
    background: var(--green-050);
    color: var(--green-900);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--green-100);
}
.data-table tbody td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border);
    color: var(--ink);
    font-size: 0.92rem;
    vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:nth-child(even) td { background: rgba(243, 249, 245, 0.55); }
.data-table tbody tr:hover td { background: var(--green-050); }
.data-table td code,
.data-table td small {
    font-size: 0.85rem;
    color: var(--muted);
}
.data-table-empty {
    color: var(--muted);
    text-align: center;
    padding: var(--space-5);
}

/* Admin-side row action group (Employers approve/reject/suspend, etc.) */
.admin-row-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 14rem;
}
.admin-row-action {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}
.admin-row-action .btn {
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
.admin-row-reason {
    flex: 1;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.85rem;
    min-width: 9rem;
}

/* Nested table inside <details> (Employers history, Notification history) */
.data-table details summary {
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--green-800);
    font-weight: 600;
}
.data-table details[open] summary { margin-bottom: var(--space-2); }
.data-table details > table {
    width: 100%;
    border-collapse: collapse;
    background: var(--green-050);
    border-radius: var(--radius-sm);
    margin-top: var(--space-2);
}
.data-table details > table th,
.data-table details > table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--green-100);
    font-size: 0.85rem;
    text-align: left;
}
.data-table details > table thead th {
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--ink);
}

/* ---------------------------------------------------------------------------
   39. Filter bar (admin tables — Employers, ActivityLog, NotificationLog)
   --------------------------------------------------------------------------- */
.filter-bar {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3);
    align-items: end;
    box-shadow: var(--shadow-sm);
}
.filter-bar label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--muted);
    display: block;
    margin-bottom: 0.25rem;
}
.filter-bar input[type="text"],
.filter-bar input[type="datetime-local"],
.filter-bar select {
    width: 100%;
    padding: 0.5rem 0.65rem;
    font: inherit;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.filter-bar input:focus-visible,
.filter-bar select:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}
.filter-bar input:focus,
.filter-bar select:focus {
    outline: none;
    border-color: var(--green-700);
    box-shadow: 0 0 0 3px rgba(11, 75, 54, 0.12);
}
.filter-bar button {
    padding: 0.55rem 1rem;
    border: 1px solid var(--green-800);
    background: var(--green-800);
    color: var(--white);
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.filter-bar button:hover { background: var(--green-900); border-color: var(--green-900); }
.filter-bar a {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.85rem;
    color: var(--green-800);
    font-weight: 500;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   40. Pager (Prev / page X of Y / Next)
   --------------------------------------------------------------------------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--muted);
    font-size: 0.9rem;
    margin: var(--space-5) 0;
}
.pager a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--green-800);
    text-decoration: none;
    font-weight: 600;
    background: var(--white);
}
.pager a:hover {
    background: var(--green-050);
    border-color: var(--green-700);
    color: var(--green-900);
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   41. Admin definition list (Diagnostics, Dashboard summary)
   --------------------------------------------------------------------------- */
.admin-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-5);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-5);
    box-shadow: var(--shadow-sm);
}
.admin-dl dt {
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    align-self: center;
}
.admin-dl dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
    align-self: center;
}
.admin-dl dd code,
.admin-dl dd small { color: var(--muted); font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
   42. Small stat tiles (Admin Dashboard top row)
   --------------------------------------------------------------------------- */
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 720px) { .admin-stat-grid { grid-template-columns: 1fr; } }

/* Phase 4B §B.4 — 4-column variant for the activity stats row. Wraps to 2-col
   on medium screens, 1-col on narrow. */
.admin-stat-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .admin-stat-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .admin-stat-grid-4 { grid-template-columns: 1fr; } }

.admin-stat {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.admin-stat-label {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.admin-stat-value {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.85rem;
    line-height: 1;
    font-weight: 600;
}
.admin-stat-meta {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0;
}

.admin-section {
    margin-bottom: var(--space-6);
}
.admin-section > h2 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.25rem;
    margin: 0 0 var(--space-3);
}
.admin-section > p { color: var(--muted); margin: 0 0 var(--space-3); }
.admin-section > h3 {
    font-family: var(--font-body);
    color: var(--green-900);
    font-size: 1rem;
    font-weight: 600;
    margin: var(--space-4) 0 var(--space-2);
}
.admin-section > h3:first-of-type { margin-top: 0; }
.admin-section > p + table,
.admin-section > h2 + table { margin-top: 0; }

.admin-section-fineprint {
    font-size: 0.82rem;
    color: var(--muted);
    margin: var(--space-3) 0 0;
}

/* ---------------------------------------------------------------------------
   Conversion funnel (Phase 4B §B.4 — admin dashboard)
   3 horizontal step-cards with arrow separators that stack vertically on
   mobile. No charting library per locked decision D3 — pure CSS, server-
   rendered numbers.
   --------------------------------------------------------------------------- */
.funnel-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.funnel-step {
    position: relative;
    background: var(--green-800);
    color: var(--white);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-4);
    border-left: 4px solid var(--gold-500);
    box-shadow: var(--shadow-sm);
}
.funnel-step-baseline {
    /* Baseline step gets a slightly different accent so the eye reads the
       leftmost card as "the starting cohort" without color noise. */
    border-left-color: var(--gold-600);
}
.funnel-step-value {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: var(--space-2);
}
.funnel-step-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--green-100);
    margin-bottom: var(--space-2);
}
.funnel-step-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--green-100);
    opacity: 0.92;
}

/* Arrow separator between steps. Uses ::after on every funnel-step except the
   last; absolutely positioned to bridge the gap to the next card. The
   pseudo-element is a small filled chevron rendered with a CSS clip-path so
   no Unicode/font dependency. */
.funnel-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(var(--space-4) * -1);
    width: var(--space-4);
    height: 12px;
    transform: translate(0, -50%);
    background: var(--gold-500);
    clip-path: polygon(0 35%, 60% 35%, 60% 0, 100% 50%, 60% 100%, 60% 65%, 0 65%);
    pointer-events: none;
}

@media (max-width: 720px) {
    .funnel-row {
        grid-template-columns: 1fr;
    }
    /* On mobile vertical stack, hide the arrow — visual flow is obvious top→bottom. */
    .funnel-step:not(:last-child)::after { display: none; }
}
.site-footer {
    background: var(--green-800);
    color: var(--white);
    padding: var(--space-8) 0 var(--space-6);
    margin-top: var(--space-9);
}

.site-footer .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: var(--space-6);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 280px;
}
.footer-brand img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}
.footer-brand p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    margin: 0;
}

.footer-col h4 {
    color: var(--gold-500);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 var(--space-4);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-col a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   34. Section row, hero status chip, onboarding checklist, empty-state card
       (Employer Dashboard polish; reusable across Candidate/Employer surfaces)
   --------------------------------------------------------------------------- */

/* Standard "heading + trailing CTA" row. Use anywhere you have a section
   title on the left and an action button on the right. Replaces ad-hoc
   uses of .location-list-head which was flex-end-only. */
.section-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-6) 0 var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.section-row > h2,
.section-row > h3 {
    margin: 0;
}
@media (max-width: 540px) {
    .section-row { flex-wrap: wrap; }
}

/* Status chip that lives inside .page-hero next to the eyebrow.
   Smaller than .status-banner, fits the dark hero context, color-coded
   by status. */
.hero-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid currentColor;
    margin-left: var(--space-3);
    vertical-align: 0.18em;
}
.hero-status-chip::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}
.hero-status-chip-approved  { color: #9ad9b1; }   /* green-tinted on dark hero */
.hero-status-chip-pending   { color: var(--gold-500); }
.hero-status-chip-rejected,
.hero-status-chip-suspended { color: #f5a5a5; }

/* Onboarding checklist — replaces the empty-state stat cards.
   Numbered steps with completion ticks. Each step is its own clickable
   row that takes the employer to the action page. */
.onboarding-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    box-shadow: var(--shadow-sm);
    margin: var(--space-5) 0;
    position: relative;
    overflow: hidden;
}
.onboarding-card::before {
    /* subtle gold accent strip down the left edge */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, var(--gold-500) 0%, var(--green-700) 100%);
}
.onboarding-card-eyebrow {
    color: var(--gold-700);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin: 0 0 var(--space-2);
}
.onboarding-card-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--green-900);
    margin: 0 0 var(--space-2);
}
.onboarding-card-lede {
    color: var(--muted);
    margin: 0 0 var(--space-5);
    max-width: 48ch;
}
.onboarding-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: onboarding;
}
.onboarding-checklist > li {
    counter-increment: onboarding;
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    border-top: 1px solid var(--border);
}
.onboarding-checklist > li:first-child { border-top: none; }
.onboarding-checklist .ob-step {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--green-900);
    background: #eef5ee;
    border: 1px solid var(--border);
}
.onboarding-checklist > li.is-done .ob-step {
    background: var(--green-700);
    color: var(--white);
    border-color: var(--green-700);
}
.onboarding-checklist > li.is-done .ob-step::before {
    content: '✓';
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
}
.onboarding-checklist > li.is-done .ob-step span { display: none; }
.onboarding-checklist .ob-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.onboarding-checklist .ob-title {
    font-weight: 600;
    color: var(--ink);
}
.onboarding-checklist > li.is-done .ob-title {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.25);
}
.onboarding-checklist .ob-hint {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.onboarding-checklist .ob-action {
    font-weight: 600;
    white-space: nowrap;
}
.onboarding-checklist .ob-action.is-muted {
    color: var(--muted);
    pointer-events: none;
}

/* Polished empty-state card — used when the dashboard onboarding is
   already complete but the employer hasn't posted a job yet. Replaces
   the thin yellow-stripe .notice for this specific surface. */
.empty-state-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    text-align: center;
    margin: var(--space-4) 0;
}
.empty-state-card h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--green-900);
    margin: 0 0 var(--space-2);
}
.empty-state-card p {
    color: var(--muted);
    margin: 0 auto var(--space-4);
    max-width: 42ch;
}
.footer-col a:hover {
    color: var(--white);
    text-decoration: underline;
    text-decoration-color: var(--gold-500);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.footer-col .pending {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9rem;
    cursor: default;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.footer-socials {
    display: flex;
    gap: var(--space-3);
}
.footer-socials a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85);
    transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}
.footer-socials a svg {
    display: block;
}
.footer-socials a:hover,
.footer-socials a:focus-visible {
    border-color: var(--gold-500);
    color: var(--gold-500);
    background-color: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

@media (max-width: 980px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
    .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
    .footer-top { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   15.1 Check list — used on /Accessibility "what's in place" inventory.
   Replaces the default disc bullet with a small gold check mark to give the
   list visual weight without using an icon library.
   --------------------------------------------------------------------------- */
.prose .check-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    gap: var(--space-3);
}
.prose .check-list li {
    position: relative;
    padding-left: 2rem;
    line-height: 1.55;
}
.prose .check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: var(--green-100);
    box-shadow: inset 0 0 0 1px var(--green-700);
}
.prose .check-list li::after {
    content: '';
    position: absolute;
    left: 0.32rem;
    top: 0.7em;
    width: 0.5rem;
    height: 0.28rem;
    border-left: 2px solid var(--green-900);
    border-bottom: 2px solid var(--green-900);
    transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   16. Cookie consent banner
   Brand-tuned: slim accent rule + Playfair heading to match the site voice,
   slide-in entrance so it doesn't snap into view, generous spacing on desktop
   without crowding the viewport on mobile.
   --------------------------------------------------------------------------- */
@keyframes helpknx-cookie-banner-rise {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--cream-050, #fbf9f2);
    border-top: 1px solid rgba(6, 59, 44, 0.08);
    box-shadow: 0 -12px 36px rgba(6, 59, 44, 0.14);
    padding: var(--space-5) var(--space-5);
    animation: helpknx-cookie-banner-rise 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cookie-banner::before {
    /* slim brand accent rule, gold-tipped — matches the Milestone-C accent language */
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--green-900) 0%, var(--green-700) 60%, var(--gold-500) 100%);
}
.cookie-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5) var(--space-6);
}
.cookie-banner-copy {
    flex: 1 1 320px;
}
.cookie-banner-copy h2 {
    font-family: var(--font-display, 'Playfair Display', serif);
    font-weight: 600;
    margin: 0 0 var(--space-2);
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--green-900);
    letter-spacing: 0.005em;
}
.cookie-banner-copy p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.55;
}
.cookie-banner-copy a {
    color: var(--green-700);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.cookie-banner-copy a:hover { color: var(--green-900); text-decoration-thickness: 2px; }
.cookie-banner-actions {
    display: flex;
    gap: var(--space-3);
    flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) {
    .cookie-banner { animation: none; }
}
@media (max-width: 560px) {
    .cookie-banner { padding: var(--space-4); }
    .cookie-banner-actions {
        flex: 1 1 100%;
    }
    .cookie-banner-actions .btn {
        flex: 1 1 0;
    }
}

/* ---------------------------------------------------------------------------
   Applicant detail extras (Phase 3 /Employer/Applicants/{id}) — resume row +
   work history list in the candidate-profile aside.
   --------------------------------------------------------------------------- */
.applicant-extras-h {
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--green-900);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.applicant-resume-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}
.applicant-resume-meta {
    color: var(--muted);
    font-size: 0.82rem;
}

.applicant-work-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.applicant-work-entry {
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.applicant-work-entry p { margin: 0 0 var(--space-1); }
.applicant-work-entry p:last-child { margin: 0; }
.applicant-work-title {
    color: var(--ink);
    font-weight: 600;
    font-size: 0.95rem;
}
.applicant-work-employer {
    color: var(--muted);
    font-weight: 400;
}
.applicant-work-dates {
    color: var(--muted);
    font-size: 0.82rem;
}
.applicant-work-description {
    color: var(--ink);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   Resume section (Phase 3 candidate profile) — drop zone + filled-state row
   --------------------------------------------------------------------------- */
.resume-section {
    margin-top: var(--space-6);
}

.resume-form {
    margin: 0;
}

.resume-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.resume-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: clamp(2rem, 4vw, 3rem) var(--space-5);
    background: var(--green-050);
    border: 2px dashed var(--green-100);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, border-style 150ms ease;
}
.resume-dropzone:hover,
.resume-dropzone:focus-within {
    background: var(--green-100);
    border-color: var(--green-700);
}
.resume-dropzone.is-drag-over {
    background: var(--green-100);
    border-style: solid;
    border-color: var(--green-700);
}

.resume-dropzone-icon {
    color: var(--green-700);
    line-height: 0;
}

.resume-dropzone-headline {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: var(--space-2);
}

.resume-dropzone-sub {
    color: var(--muted);
    font-size: 0.92rem;
}

.resume-hint {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--green-100);
    color: var(--muted);
    font-size: 0.82rem;
    max-width: 40rem;
    line-height: 1.5;
}

.resume-upload-btn {
    margin-top: var(--space-4);
}

.resume-current {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.resume-current-icon {
    flex: 0 0 auto;
    color: var(--green-700);
    line-height: 0;
}

.resume-current-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.resume-current-name {
    color: var(--ink);
    font-weight: 600;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resume-current-sub {
    color: var(--muted);
    font-size: 0.82rem;
}

.resume-current-actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.resume-current-actions .resume-replace-form,
.resume-current-actions .resume-delete-form {
    margin: 0;
}

.resume-current-actions label.btn {
    cursor: pointer;
    margin: 0;
}

@media (max-width: 560px) {
    .resume-current {
        flex-direction: column;
        align-items: flex-start;
    }
    .resume-current-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------------------------
   Skills section (Phase 3 candidate profile) — fallback select + chip UI
   --------------------------------------------------------------------------- */
.skills-lead {
    margin-top: calc(-1 * var(--space-2));
    margin-bottom: var(--space-4);
}

.skills-fallback-select {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
}

.skills-chips {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.skills-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.9rem;
}

.skills-counter-text [data-skills-count] {
    color: var(--green-900);
    font-weight: 600;
}

.skill-category {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.skill-category-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-700);
}

.skill-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.skill-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.4rem 0.875rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.skill-chip:hover {
    background: var(--green-050);
    border-color: var(--green-100);
}
.skill-chip:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}
.skill-chip[aria-pressed="true"] {
    background: var(--green-700);
    border-color: var(--green-700);
    color: var(--white);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.skill-chip[aria-pressed="true"]:hover {
    background: var(--green-800);
    border-color: var(--green-800);
}

/* ---------------------------------------------------------------------------
   Work history (Phase 3 candidate profile) — fieldset entry cards
   --------------------------------------------------------------------------- */
.work-history-section {
    margin-top: var(--space-6);
}

.work-history-lead {
    margin-top: calc(-1 * var(--space-2));
    margin-bottom: var(--space-4);
}

.work-history-form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.work-history-empty {
    padding: var(--space-5) var(--space-4);
    background: var(--green-050);
    border: 1px dashed var(--green-100);
    border-radius: var(--radius-md);
    color: var(--muted);
    font-size: 0.95rem;
    text-align: center;
}
.work-history-empty p { margin: 0; }

.work-entry {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.work-entry-legend {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0 var(--space-2);
    margin-left: calc(-1 * var(--space-2));
}

.work-entry-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.work-history-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
}

.work-history-add {
    flex: 0 0 auto;
}

.work-history-save {
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    .work-history-controls .btn,
    .work-history-controls .cta {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Admin modal — native <dialog> brand chrome (Phase 3 /Admin/Skills)
   --------------------------------------------------------------------------- */
.admin-modal {
    border: none;
    border-radius: var(--radius-md);
    padding: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
    max-width: 32rem;
    width: 90vw;
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}
.admin-modal::backdrop {
    background: rgba(6, 59, 44, 0.55);
}
.admin-modal h2 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.5rem;
    margin: 0 0 var(--space-2);
}
.admin-modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.admin-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.skills-add-btn {
    margin-left: auto;
}

/* ---------------------------------------------------------------------------
   Password show/hide toggle
   --------------------------------------------------------------------------- */
.password-toggle-wrap {
    position: relative;
}
.password-toggle-wrap input {
    padding-right: 2.75rem;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.625rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 0.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
}
.password-toggle:hover {
    color: var(--ink);
}
.password-toggle svg {
    display: block;
}

/* ---------------------------------------------------------------------------
   Role category chip selectors (candidate profile + search filters)
   --------------------------------------------------------------------------- */
.role-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.role-chip-label {
    cursor: pointer;
}
.role-chip-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.role-chip {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem;
    font-family: var(--font-body);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    user-select: none;
}
.role-chip-input:checked + .role-chip {
    background: var(--green-800);
    border-color: var(--green-800);
    color: var(--white);
}
.role-chip-input:focus-visible + .role-chip {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Opt-in card (Phase 4A §B.10)
   Used on /Candidate/Profile + /Employer/Company for the SMS opt-in checkbox.
   Frames the consent gesture as a tactile choice rather than a bare checkbox;
   the :has(:checked) state lights up a gold left-bar + green border so the
   active state is visible without needing JS.
   --------------------------------------------------------------------------- */
.opt-in-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-3) 0 var(--space-5);
    background: var(--green-050);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}
.opt-in-card:hover {
    border-color: var(--green-700);
}
.opt-in-card input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--green-700);
    cursor: pointer;
}
.opt-in-card:has(input[type="checkbox"]:checked) {
    background: var(--white);
    border-color: var(--green-700);
    border-left-color: var(--gold-500);
}
.opt-in-card:has(input[type="checkbox"]:focus-visible) {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}
.opt-in-card-text {
    flex: 1;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink);
}
.opt-in-card-text strong {
    display: block;
    color: var(--green-900);
    margin-bottom: 2px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Distance filter (Phase 4B)
   Used on /FindJobs filter sidebar + job-card distance pill. The distance pill
   mirrors the existing .search-pay-pill rhythm so the card stays consistent
   when the filter is active.
   --------------------------------------------------------------------------- */
.filter-distance {
    margin-top: var(--space-2);
}
.filter-distance select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.9rem;
}
.filter-distance select:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}

.filter-distance-hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
}
.filter-distance-hint a {
    color: var(--green-800);
    font-weight: 500;
}

.distance-pill {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--gold-500);
    color: var(--green-900);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
}

.search-sort-locked {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   Save-this-search callout (Phase 4B §B.1)
   Used on /FindJobs between the results header and the result list, rendered
   only for authenticated Candidates with active filters. Mirrors the
   .opt-in-card visual rhythm (green-050 bg + gold-500 left-bar) so the
   "this is an action you can take here" cue is consistent across the app.
   --------------------------------------------------------------------------- */
.save-search-callout {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-5);
    background: var(--green-050);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-500);
    border-radius: var(--radius-md);
}
.save-search-callout-text {
    flex: 1 1 240px;
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.45;
}
.save-search-callout-text strong {
    color: var(--green-900);
    font-weight: 600;
}
.save-search-callout-fields {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.save-search-name-input {
    min-width: 220px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: var(--white);
    color: var(--ink);
}
.save-search-name-input:focus-visible,
.save-search-freq-select:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}
.save-search-freq-select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    background: var(--white);
    color: var(--ink);
}

/* ---------------------------------------------------------------------------
   /Candidate/SavedSearches list (Phase 4B §B.1)
   Vertical stack of cards — varying chip counts handle elastically, mobile
   friendly. Reuses .skill-chip read-only for filter summary. Per Step 8
   design: gold-500 left-bar marks the card edge (the saved-search analog of
   the .save-search-callout / .opt-in-card visual rhythm), badge variants
   color-code alert frequency.
   --------------------------------------------------------------------------- */
/* Centered reading column for the list, matching the page-hero-inner width
   so the cards sit under the hero with consistent gutters. */
.saved-searches-wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* Top row: "{count} of {max} saved" counter + "New search" CTA. */
.saved-searches-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-5) 0 var(--space-4);
}
.saved-searches-count {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--green-900);
    font-size: 1.35rem;
    line-height: 1;
}
.saved-searches-count small {
    font-family: var(--font-body);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.saved-searches-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
}
.saved-search-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(6, 59, 44, 0.06);
    padding: var(--space-4) var(--space-5);
}
/* Left-accent bar by alert tier: none = neutral border, daily = gold,
   weekly = green (mirrors the frequency badge color intent). */
.saved-search-card.is-none   { border-left-color: var(--border); }
.saved-search-card.is-daily  { border-left-color: var(--gold-500); }
.saved-search-card.is-weekly { border-left-color: var(--green-700); }

.saved-search-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.saved-search-name {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--green-900);
    line-height: 1.3;
}

.saved-search-freq-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
    white-space: nowrap;
}
.saved-search-freq-badge.is-none {
    background: var(--green-050);
    color: var(--muted);
    border: 1px solid var(--border);
}
.saved-search-freq-badge.is-daily {
    background: var(--gold-500);
    color: var(--green-900);
}
.saved-search-freq-badge.is-weekly {
    background: var(--green-700);
    color: var(--white);
}

.saved-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.saved-search-chips .skill-chip {
    cursor: default; /* read-only chips on this page */
}

.saved-search-meta {
    margin: 0 0 var(--space-4);
    font-size: 0.82rem;
    color: var(--muted);
}

.saved-search-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}

/* "Edit alerts" affordance: a <details> whose summary is styled as a ghost
   button; opening it reveals the preserved edit-frequency form inline.
   Native disclosure, no JS. */
.saved-search-freq-edit {
    position: relative;
}
.saved-search-freq-edit summary {
    list-style: none;
    cursor: pointer;
}
.saved-search-freq-edit summary::-webkit-details-marker {
    display: none;
}
.saved-search-freq-edit[open] > summary {
    outline: 2px solid var(--gold-500);
    outline-offset: 2px;
}
.saved-search-freq-form {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-radius: var(--radius-sm);
}
.saved-search-freq-form select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.85rem;
}

/* Delete: text-style destructive affordance, pushed to the right of the row. */
.saved-search-delete {
    margin-left: auto;
    background: none;
    border: 0;
    color: var(--danger, #9a3b2f);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    padding: var(--space-2);
}
.saved-search-delete:hover {
    text-decoration: underline;
}

.saved-searches-empty {
    margin: var(--space-6) auto;
    max-width: 560px;
}

/* ---------------------------------------------------------------------------
   Generic confirmation dialog (Phase 4B)
   First introduced for /Candidate/SavedSearches delete confirm. Mirrors the
   shape of .withdraw-dialog (Phase 4A Step 5) but with feature-neutral class
   names so future confirmation dialogs reuse it instead of inventing more
   feature-specific .withdraw-style siblings. Existing .withdraw-dialog usage
   stays unchanged for now — refactor that to .confirm-dialog when a third
   surface needs the same pattern.
   --------------------------------------------------------------------------- */
.confirm-dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    max-width: 440px;
    background: var(--white);
    color: var(--ink);
}
.confirm-dialog::backdrop {
    background: rgba(6, 59, 44, 0.35);
}
.confirm-dialog-body {
    padding: var(--space-5) var(--space-5) var(--space-3);
}
.confirm-dialog-body h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    margin: 0 0 var(--space-2);
    color: var(--green-900);
}
.confirm-dialog-body p {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}
.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5) var(--space-5);
    background: var(--green-050);
    border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------------------
   /FindJobs search result card (visual-polish batch)
   Richer layout on the existing .job-card link: employer logo (image or brand
   monogram) on the left, title + company + chips + posted on the right. Reuses
   the established tokens, the .company-logo green/gold monogram treatment (sized
   down for the card), .chip / .search-pay-pill / .distance-pill systems, and the
   .more-jobcard hover-lift rhythm. No new tokens introduced.
   --------------------------------------------------------------------------- */
/* ===== rich .job-card--search: full-height SQUARE logo column ===== */
.job-card--search {
    display: grid;
    grid-template-columns: auto 1fr;   /* col 1 width follows the square */
    padding: 0;
    overflow: hidden;
    align-items: stretch;
}
.job-card--search:hover {
    transform: translateY(-2px);
}

/* Logo column = a SQUARE that's the full height of the card (aspect-ratio 1).
   Width therefore always equals card height -> never a portrait strip. */
.job-card-logo-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    height: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--green-700), var(--green-900));
}
.job-card-logo-wrap.is-img {
    background: var(--white);
    border-right: 1px solid var(--border);
}
.job-card-logo--mono {
    color: var(--gold-500);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
}
/* Absolutely positioned so the image never drives the grid column width
   (otherwise the logo's intrinsic size balloons the whole card). */
.job-card-logo-wrap.is-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16%;
    box-sizing: border-box;
}

/* Text column */
.job-card-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    padding: var(--space-4) var(--space-5);
}
.job-card--search .job-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    margin: 0;
}
.job-card-title {
    margin: 0;
}
.search-pay-pill {
    white-space: nowrap;
}

.job-card-company {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    font-size: 0.92rem;
    color: var(--muted);
}
.job-card-company strong {
    color: var(--ink);
    font-weight: 600;
}
.jc-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--green-050);
    color: var(--green-800);
    border: 1px solid var(--green-100);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
}
.job-card-loc {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.job-card-loc svg {
    width: 14px;
    height: 14px;
    color: var(--green-700);
}
.jc-sep {
    color: var(--border);
}

.job-card-snippet {
    margin: 0.15rem 0 0.1rem;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-card-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.25rem 0 0;
}
.jc-posted {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Constrain the results column so a short list reads as an intentional,
   scannable stack rather than a sparse full-width grid. Row gap gives each
   .job-card--search breathing room consistent with the home job-grid. */
.search-results-list {
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Action row for the branded .empty-state-card (Clear filters / Browse all).
   Used on /FindJobs when a search returns nothing. Mirrors .hero-ctas rhythm. */
.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

/* ── Employer · Applicants pipeline + rows ──────────────────────────────────
   Funnel (per-stage counts) and restyled applicant rows for
   /Employer/Jobs/Applicants/{id}. Reuses brand tokens + the existing
   .app-status* badge palette (no new badge rules here). */
.applicant-funnel {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
}
.applicant-stage {
    display: block;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.applicant-stage:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}
.applicant-stage.is-active {
    border-color: var(--green-700);
    box-shadow: 0 0 0 2px var(--green-100);
}
.applicant-stage-n {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--green-900);
}
.applicant-stage.is-hired .applicant-stage-n { color: var(--green-800); }
.applicant-stage.is-declined .applicant-stage-n { color: var(--muted); }
.applicant-stage-l {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.applicant-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.applicant-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    gap: var(--space-4);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.applicant-row:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.applicant-row.is-new { border-left: 4px solid var(--gold-500); }
.applicant-ava {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--green-700), var(--green-900));
    color: var(--gold-500);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
}
.applicant-name {
    font-family: var(--font-display);
    font-size: 1.12rem;
    color: var(--green-900);
    margin: 0;
}
.applicant-headline {
    color: var(--muted);
    font-size: 0.88rem;
    margin: var(--space-1) 0 0;
}
.applicant-applied {
    color: var(--muted);
    font-size: 0.8rem;
    margin: var(--space-2) 0 0;
}
.applicant-new-tag {
    display: inline-block;
    background: var(--gold-500);
    color: var(--green-900);
    border-radius: 999px;
    padding: 0.02rem 0.4rem;
    margin-left: var(--space-2);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.applicant-row-right { text-align: right; }
.applicant-review {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--green-900);
    color: var(--white);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.applicant-review:hover { background: var(--green-800); text-decoration: none; }

@media (max-width: 760px) {
    .applicant-funnel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .applicant-row { grid-template-columns: auto 1fr; }
    .applicant-row .app-status,
    .applicant-row .applicant-row-right {
        grid-column: 1 / -1;
        text-align: left;
        justify-self: start;
    }
}

/* ---------------------------------------------------------------------------
   /Jobs/{id}/Apply — apply-gating: profile review (State A) + completeness
   gate (State B). Ported from docs/mockups/jobs-apply.html (mk-* → real
   classes). Existing brand tokens only.
   --------------------------------------------------------------------------- */
.apply-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-8);
}
.apply-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-5);
    align-items: start;
}
.apply-layout > div > .card + .card { margin-top: var(--space-5); }

/* Profile review (State A) */
.apply-edit,
.apply-fix {
    color: var(--green-700);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}
.apply-rev-head {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
}
.apply-ava {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--green-700), var(--green-900));
    color: var(--gold-500);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    flex: none;
}
.apply-rev-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--green-900);
    margin: 0;
}
.apply-rev-meta {
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0.1rem 0 0;
}
.apply-field { margin: var(--space-4) 0; }
.apply-field-l {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: var(--space-1);
}
.apply-field-v { font-size: 0.94rem; line-height: 1.55; }
.apply-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.apply-chip {
    background: var(--green-050);
    border: 1px solid var(--green-100);
    color: var(--green-800);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.apply-work {
    border-top: 1px solid var(--border);
    padding: 0.6rem 0;
}
.apply-work:first-of-type { border-top: 0; }
.apply-work-t { font-weight: 700; font-size: 0.92rem; }
.apply-work-m { color: var(--muted); font-size: 0.82rem; }
.apply-resume {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--green-050);
    border: 1px solid var(--green-100);
    border-left: 4px solid var(--green-700);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
}
.apply-resume b { color: var(--green-900); }

/* Optional note card */
.apply-note-opt { font-weight: 400; color: var(--muted); }

/* Job-summary sidebar (State A) */
.apply-side h3 {
    font-family: var(--font-display);
    color: var(--green-900);
    font-size: 1.05rem;
    margin: 0 0 var(--space-3);
}
.apply-side-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.4rem 0;
    border-top: 1px dashed var(--border);
    font-size: 0.88rem;
}
.apply-side-row:first-of-type { border-top: 0; }
.apply-side-row .k { color: var(--muted); }
.apply-side-row .v { font-weight: 600; text-align: right; }

/* Completeness gate (State B) */
.apply-checklist {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 var(--space-5);
}
.apply-checklist li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--border);
}
.apply-checklist li:first-child { border-top: 0; }
.apply-tick {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex: none;
}
.apply-tick.ok { background: var(--green-100); color: var(--green-800); }
.apply-tick.no { background: #fdecea; color: #9a3b2f; }
.apply-what { flex: 1; }
.apply-what .t { font-weight: 600; }
.apply-what .s { color: var(--muted); font-size: 0.82rem; }

@media (max-width: 820px) {
    .apply-layout { grid-template-columns: 1fr; }
    .apply-side-row .v { text-align: left; }
}