/* PathwayJobs design system.
   Mobile-first: every rule below applies from the smallest viewport up;
   @media (min-width: ...) blocks add desktop enhancement, never the
   reverse. Two breakpoints only — tablet (640px) and desktop (960px) —
   deliberately not a dozen arbitrary ones; components adapt within that,
   not via a proliferation of one-off media queries.

   Palette/typography source of truth: the homepage (templates/home.html)
   — its indigo/slate palette and Inter typeface were established there
   first, then extracted into the semantic tokens below so the rest of
   the platform inherits the same visual language instead of the two
   drifting apart. The homepage's own <style> block keeps its literal
   values (by design, to guarantee it never drifts as this file changes)
   but every value here is the same color, just given a semantic name.

   Brand rebrand note: PathwayJobs' brand color is deliberately indigo
   (#4F46E5), not the green used by most hiring/recruitment/fintech
   platforms, with a violet (#7C3AED) used sparingly as a secondary
   accent (see the homepage's eyebrow-dot decoration for its one
   deliberate use — it is not wired into shared components here, since
   "sparingly" means it should stay rare, not become a second brand
   color competing with indigo).
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Light theme (default) and dark theme values for every semantic color
   token this file uses — see the matching dark block further down for
   why each one changed the way it did (not a blind invert; see Section
   19 concerns: text/border/status contrast were individually checked,
   not assumed). Every rule below reads one of these variables, never a
   literal hex color, which is what makes the dark theme a ~140-line
   token override rather than a second stylesheet or per-template dark
   classes.

   `--color-accent` (links, borders, badge text, tertiary buttons — text-
   level contexts sitting directly on a page/card background) and
   `--color-accent-solid` (filled button/badge backgrounds that carry
   *white* text on top) are separate tokens for historical reasons (a
   previous green brand needed two different shades to pass contrast in
   both roles); indigo #4F46E5 happens to pass contrast comfortably in
   both, so in light mode the two are now the same value — the split is
   kept so dark mode can still diverge, which it does (see below).

   `--color-info` is kept deliberately separate from `--color-accent`:
   the "open/shortlisted/offer" status badges and the info flash message
   need a hue that is neither the brand indigo nor `--color-success`'s
   green, so status meaning stays distinguishable by hue alone (not just
   label text) for colorblind users — see the `.status-*` and
   `.message-info` rules below. */
:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-bg: #ffffff;
    --color-bg-subtle: #f8fafc;
    --color-bg-raised: #ffffff;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;

    /* Brand indigo — see the file-level comment above. */
    --color-accent: #4f46e5;
    --color-accent-solid: #4f46e5;
    --color-accent-dark: #4338ca;
    --color-accent-subtle: #eef2ff;

    /* The secondary violet accent — defined for the one place it's
       actually used (the homepage's eyebrow-dot decoration) and kept
       available here rather than duplicated as a literal hex, but
       deliberately not wired into any shared component below: "used
       sparingly" means it stays rare, not that it becomes a second
       brand color running through every page. */
    --color-accent-2: #7c3aed;

    /* A distinct "info" hue (unrelated to brand indigo or success
       green) for the handful of components that need a third,
       neutral-toned accent — see the note above. */
    --color-info: #2b6cb0;
    --color-info-subtle: #e8f0fe;
    --color-info-border: #b6d0f5;

    --color-success: #1a7f37;
    --color-success-subtle: #eaf6ec;
    --color-success-border: #a7d7ae;
    --color-warning: #9a6700;
    --color-warning-subtle: #fff8e6;
    --color-warning-border: #f0d68a;
    --color-danger: #c0392b;
    --color-danger-subtle: #fdecea;
    --color-danger-border: #f0aca4;
    --color-danger-solid: #c0392b;
    --color-danger-solid-hover: #a53225;
    --color-neutral: #555b66;
    --color-neutral-subtle: #eef1f5;
    --color-neutral-border: #c9ced6;

    /* The homepage's dark slate band — used sparingly outside the
       homepage itself (nowhere yet; kept available for shared
       components that intentionally want the same "dark band" treatment
       rather than inventing a second dark color). */
    --color-navy: #0f172a;
    --color-navy-raised: #1e293b;

    /* Spacing scale — every margin/padding/gap in this file is one of
       these, so rhythm stays predictable instead of ad hoc per-template
       inline styles (a real inconsistency found across ~40 templates
       during the Phase 4.1 audit). */
    --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;

    /* Type scale — a small, deliberate set of sizes, mobile-first (the
       desktop breakpoint below nudges headings up slightly, never
       shrinks body text). */
    --text-xs: 0.8rem;
    --text-sm: 0.9rem;
    --text-base: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.4rem;
    --text-2xl: 1.75rem;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.08);
    --shadow: 0 4px 14px rgba(10, 22, 40, 0.10);

    /* Touch target floor (section 12 — ~44px). Applied to interactive
       controls' min-height/min-width, not a visual size. */
    --tap-target: 44px;

    --header-height: 56px;
}

/* Dark theme. Applied either explicitly (`<html data-theme="dark">`,
   set by the toggle in base.html — see the inline script in <head> for
   how this is applied before first paint to avoid a flash) or
   automatically, for a visitor who has never chosen, by
   `prefers-color-scheme` below. Colors here are not inverted light-mode
   values — each one was picked for its own contrast requirement (see
   the "Dark Mode Contrast" notes throughout this block): body text is a
   soft off-white, not pure #fff; the page background is a dark
   blue-gray, not black; status/accent colors are individually
   lightened, since a color dark enough to read on a white page is
   usually too dark to read on a near-black one. */
:root[data-theme="dark"] {
    --color-text: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-bg: #1e293b;
    --color-bg-subtle: #0f172a;
    --color-bg-raised: #1e293b;
    --color-border: #263449;
    --color-border-strong: #334155;

    /* #6366f1 (indigo-500) is the brand's dark-mode primary, per the
       rebrand brief — but it only passes contrast comfortably as a
       *button fill* with white text on top (~4.5:1). Used directly as
       *text* on a card surface it drops to ~3.3:1, so `--color-accent`
       (the text/link/focus-ring token) instead uses a lighter tint,
       matching the same choice already made on the homepage's dark
       band (see its `.pj-section--dark` text color). */
    --color-accent: #a5b4fc;
    --color-accent-solid: #6366f1;
    --color-accent-dark: #818cf8;
    --color-accent-subtle: #1e1b4b;

    --color-accent-2: #a78bfa;

    --color-info: #7ab4e8;
    --color-info-subtle: #1c2f47;
    --color-info-border: #2d4a6b;

    --color-success: #5fc484;
    --color-success-subtle: #17301f;
    --color-success-border: #2d5c3b;
    --color-warning: #e8b653;
    --color-warning-subtle: #362a10;
    --color-warning-border: #5c481d;
    --color-danger: #ea8377;
    --color-danger-subtle: #35201d;
    --color-danger-border: #603430;
    --color-danger-solid: #c0392b;
    --color-danger-solid-hover: #b8493c;
    --color-neutral: #aab1bf;
    --color-neutral-subtle: #262a34;
    --color-neutral-border: #3a3f4a;

    --color-navy: #0f172a;
    --color-navy-raised: #1e293b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* A visitor who has never touched the toggle gets their OS preference —
   `:not([data-theme="light"])` is the important part: it means this
   only applies in the *absence* of an explicit choice, so a visitor who
   picked "Light" in a dark-OS browser isn't overridden back to dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --color-text: #f8fafc;
        --color-text-muted: #94a3b8;
        --color-bg: #1e293b;
        --color-bg-subtle: #0f172a;
        --color-bg-raised: #1e293b;
        --color-border: #263449;
        --color-border-strong: #334155;

        --color-accent: #a5b4fc;
        --color-accent-solid: #6366f1;
        --color-accent-dark: #818cf8;
        --color-accent-subtle: #1e1b4b;

        --color-accent-2: #a78bfa;

        --color-info: #7ab4e8;
        --color-info-subtle: #1c2f47;
        --color-info-border: #2d4a6b;

        --color-success: #5fc484;
        --color-success-subtle: #17301f;
        --color-success-border: #2d5c3b;
        --color-warning: #e8b653;
        --color-warning-subtle: #362a10;
        --color-warning-border: #5c481d;
        --color-danger: #ea8377;
        --color-danger-subtle: #35201d;
        --color-danger-border: #603430;
        --color-danger-solid: #c0392b;
        --color-danger-solid-hover: #b8493c;
        --color-neutral: #aab1bf;
        --color-neutral-subtle: #262a34;
        --color-neutral-border: #3a3f4a;

        --color-navy: #0f172a;
        --color-navy-raised: #1e293b;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Prevents iOS auto-zoom-on-focus for any input whose font-size
       would otherwise compute under 16px — see .form-control below,
       which also sets 16px explicitly as the real fix; this is a
       backstop. */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-bg-subtle);
    line-height: 1.55;
}

h1, h2, h3, h4 {
    line-height: 1.25;
    margin: 0 0 var(--space-3);
    font-weight: 700;
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: 1.05rem; }
h4 { font-size: var(--text-base); }

@media (min-width: 640px) {
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
}

p {
    margin: 0 0 var(--space-3);
    max-width: 68ch;
}

small, .text-small { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

ul, ol {
    padding-left: 1.25rem;
}

img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-accent-solid);
    color: #fff;
    padding: var(--space-2) var(--space-4);
    z-index: 200;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    left: 0;
}

.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;
}

a {
    color: var(--color-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Header / navigation — mobile-first: a compact bar with a hamburger
   toggle by default; the full inline link row only appears at desktop
   widths. No JS framework — a single checkbox-driven toggle (see
   base.html) plus this CSS, so it degrades gracefully with JS disabled
   (the menu just stays link-accessible via normal document flow — see
   base.html's noscript handling).
   ========================================================================== */

.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-nav {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    gap: var(--space-3);
    position: relative;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--color-text);
    padding: var(--space-2) 0;
    flex-shrink: 0;
}

.brand-mark {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* Theme toggle — always visible in the header bar (not tucked inside
   the mobile menu), since switching theme is something a visitor
   reasonably wants to do before they've looked at anything else.
   Cycles light/dark/system on click (see static/js/theme.js); the
   visible text label is the accessible name, not an icon alone
   (section 25's explicit requirement). */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.theme-toggle:hover {
    border-color: var(--color-accent);
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    cursor: pointer;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
}

.nav-toggle-icon {
    position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }

/* The checkbox itself is visually hidden but keyboard/screen-reader
   reachable via its label (.nav-toggle) — the standard "checkbox hack"
   for a no-JS-required disclosure menu. */
#nav-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--space-2) 0 var(--space-4);
    width: 100%;

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow);

    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
    transition: max-height 0.2s ease;
}

#nav-toggle-input:checked ~ .nav-links {
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--space-2) 0 var(--space-4);
    border-bottom-width: 1px;
}

.nav-links li {
    width: 100%;
}

.nav-links a,
.nav-links .link-button {
    display: block;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    min-height: var(--tap-target);
    display: flex;
    align-items: center;
}

.nav-links a:hover,
.nav-links .link-button:hover {
    background: var(--color-bg-subtle);
}

/* A handful of nav items ("Find Jobs", "Find Internships", "Log in",
   "Register") rendered as solid brand-color pill buttons rather than
   plain text links — deliberately higher specificity than `.nav-links
   a` above (two classes vs one) so it wins without needing `!important`. */
.nav-links a.nav-cta {
    justify-content: center;
    margin: 0 var(--space-4);
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent-solid);
    color: #fff;
    font-weight: 700;
}

.nav-links a.nav-cta:hover {
    background: var(--color-accent-dark);
    color: #fff;
}

.nav-user {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-4) !important;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    margin-left: var(--space-2);
    background: var(--color-accent-solid);
    color: #fff;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 700;
}

.link-button {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
}

.nav-links .link-button {
    color: var(--color-text);
    text-decoration: none;
    width: 100%;
    text-align: left;
}

.inline-form {
    display: inline;
}

@media (min-width: 960px) {
    .nav-toggle { display: none; }

    .nav-links {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4);
        width: auto;
        max-height: none;
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .nav-links li { width: auto; }

    .nav-links a,
    .nav-links .link-button {
        padding: var(--space-2) 0;
        min-height: 0;
    }

    .nav-links a:hover,
    .nav-links .link-button:hover {
        background: none;
        text-decoration: underline;
    }

    .nav-links a.nav-cta {
        margin: 0;
        padding: 0.5rem 1.1rem;
        min-height: 0;
    }

    .nav-links a.nav-cta:hover {
        background: var(--color-accent-dark);
        text-decoration: none;
    }

    .nav-user { padding: 0 !important; }
}

.site-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-7);
}

/* ==========================================================================
   Page header — a consistent title + optional description + optional
   action row, used instead of each template inventing its own ad hoc
   <h1> placement/spacing.
   ========================================================================== */

.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.page-header-text h1 {
    margin-bottom: var(--space-1);
}

.page-header-text p {
    color: var(--color-text-muted);
    margin: 0;
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (min-width: 640px) {
    .page-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: var(--space-1);
    color: var(--color-border-strong);
}

.breadcrumbs a { color: var(--color-text-muted); }

/* ==========================================================================
   Alerts / flash messages
   ========================================================================== */

.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.message {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
}

.message-error {
    border-color: var(--color-danger);
    background: var(--color-danger-subtle);
}

.message-success {
    border-color: var(--color-success);
    background: var(--color-success-subtle);
}

.message-warning {
    border-color: var(--color-warning);
    background: var(--color-warning-subtle);
}

.message-info {
    border-color: var(--color-info);
    background: var(--color-info-subtle);
}

/* ==========================================================================
   Cards — simple, flat, used only to group genuinely related content.
   No nested-card shadows, no decorative gradients.
   ========================================================================== */

.card {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

@media (min-width: 640px) {
    .card { padding: var(--space-5); }
}

.card > *:last-child { margin-bottom: 0; }

/* A subtle, nested surface inside a card — grouping a sub-section (an
   evaluation's rating scale, an assessment's locked-questions notice)
   without a second bordered card-in-a-card. */
.card-subtle {
    background: var(--color-bg-subtle);
}

/* A separated action area within a card (e.g. the apply CTA on an
   opportunity page) — a top border and spacing, never a nested card. */
.action-panel {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

.company-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

.company-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    object-fit: cover;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.company-logo-fallback {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    background: var(--color-accent-subtle);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-accent);
    flex-shrink: 0;
}

.company-meta h1 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xl);
}

.company-meta p {
    margin: 0;
    color: var(--color-text-muted);
}

@media (min-width: 640px) {
    .company-logo, .company-logo-fallback { width: 72px; height: 72px; }
}

/* ==========================================================================
   Status badges — color communicates meaning, never decoration. Each
   status also gets a leading symbol (not color alone) so meaning
   survives without color vision — see the shared glyphs below.
   ========================================================================== */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-pending,
.status-under_review,
.status-interview,
.status-in_progress,
.status-in-progress,
.status-awaiting-review,
.status-paused {
    background: var(--color-warning-subtle);
    color: var(--color-warning);
    border-color: var(--color-warning-border);
}

.status-verified,
.status-published,
.status-hired,
.status-accepted,
.status-resolved,
.status-completed,
.status-passed,
.status-supported,
.status-active {
    background: var(--color-success-subtle);
    color: var(--color-success);
    border-color: var(--color-success-border);
}

.status-rejected,
.status-suspended,
.status-declined,
.status-dismissed,
.status-closed,
.status-cancelled,
.status-expired,
.status-not-passed,
.status-not_supported {
    background: var(--color-danger-subtle);
    color: var(--color-danger);
    border-color: var(--color-danger-border);
}

.status-draft,
.status-archived,
.status-applied,
.status-withdrawn,
.status-inactive,
.status-not_enough_information,
.status-not_assessable,
.status-none,
.badge-neutral {
    background: var(--color-neutral-subtle);
    color: var(--color-neutral);
    border-color: var(--color-neutral-border);
}

.status-shortlisted,
.status-offer,
.status-escalated,
.status-active,
.status-open {
    background: var(--color-info-subtle);
    color: var(--color-info);
    border-color: var(--color-info-border);
}

/* ==========================================================================
   Buttons — a real hierarchy (primary / secondary / tertiary / danger),
   which did not exist before Phase 4.1 (only primary+danger did). Every
   variant meets the ~44px touch-target floor.
   ========================================================================== */

.btn,
.btn-secondary,
.btn-tertiary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 700;
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn {
    background: var(--color-accent-solid);
    border-color: var(--color-accent-solid);
    color: #fff;
}

.btn:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }

.btn-secondary {
    background: var(--color-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.btn-secondary:hover { background: var(--color-bg-subtle); }

.btn-tertiary {
    background: transparent;
    border-color: transparent;
    color: var(--color-accent);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

.btn-tertiary:hover { text-decoration: underline; }

.btn-danger {
    background: var(--color-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-danger:hover { background: var(--color-danger-subtle); }

.btn-danger-solid {
    background: var(--color-danger-solid);
    border-color: var(--color-danger-solid);
    color: #fff;
}

.btn-danger-solid:hover { background: var(--color-danger-solid-hover); }

.btn-sm {
    min-height: 36px;
    padding: 0.4rem 0.8rem;
    font-size: var(--text-xs);
}

.btn-block { display: flex; width: 100%; }

.btn[disabled],
.btn-disabled {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.btn[disabled]:hover { background: var(--color-bg-subtle); }

.badge-soon {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: var(--space-2);
    color: var(--color-text-muted);
}

/* ==========================================================================
   Forms — 16px minimum input font-size (prevents iOS auto-zoom-on-focus,
   section 11/12's mobile keyboard requirement), full-width fields that
   stay comfortable at 360px, visible labels always (never
   placeholder-as-label), errors rendered close to their field.
   ========================================================================== */

.form-field {
    margin-bottom: var(--space-4);
}

.form-field label,
.form-field legend {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
}

.form-field .field-hint {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin: var(--space-1) 0 0;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="url"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="password"],
.form-field input[type="search"],
.form-field select,
.form-field textarea,
.form-control {
    width: 100%;
    min-height: var(--tap-target);
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 16px; /* deliberate literal px, not var(--text-base) — see comment above */
    background: var(--color-bg);
    color: var(--color-text);
}

.form-field textarea { min-height: 6rem; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.form-control:focus {
    border-color: var(--color-accent);
}

.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-right: var(--space-2);
    vertical-align: middle;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: var(--tap-target);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    border-color: var(--color-danger);
}

.form-field .errorlist {
    color: var(--color-danger);
    list-style: none;
    padding: 0;
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.form-field .errorlist li::before {
    content: "! ";
    font-weight: 700;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin: 0 0 var(--space-4);
}

/* ==========================================================================
   Responsive tables — desktop keeps a normal <table>; on narrow screens
   each row becomes a small stacked card, using a `data-label` attribute
   on each <td> (progressive enhancement: a table without data-label
   attributes just falls back to horizontal scroll, which is why
   .table-scroll exists separately below for the cases that weren't
   converted this phase).
   ========================================================================== */

table.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.data-table th { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; }

/* Horizontal-scroll fallback — used where a table is left in its plain
   desktop form; the scroll is visually obvious (not clipped silently). */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-4);
}

/* Safety net: every `.data-table` gets horizontal scroll on narrow
   screens by default, even with no other markup change — so no table
   in this codebase can silently overflow the viewport. `.table-stack`
   (below) replaces this with true per-row stacking for the
   highest-traffic pages; every other table at minimum gets this. */
@media (max-width: 639px) {
    .data-table:not(.table-stack) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 639px) {
    .table-stack thead { display: none; }

    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td {
        display: block;
        width: 100%;
    }

    .table-stack tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: var(--space-3);
        padding: var(--space-2) var(--space-3);
    }

    .table-stack td {
        border-bottom: 0;
        padding: var(--space-1) 0;
        display: flex;
        justify-content: space-between;
        gap: var(--space-3);
        text-align: right;
    }

    .table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-muted);
        text-align: left;
        font-size: var(--text-sm);
    }

    .table-stack td:empty { display: none; }
}

/* ==========================================================================
   Grids, stat tiles, filter bars, pagination
   ========================================================================== */

.opportunity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .opportunity-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

.opportunity-card h3 {
    margin: 0 0 var(--space-1);
    font-size: 1.05rem;
}

.opportunity-card p {
    margin: 0.2rem 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.filter-bar .form-field {
    margin-bottom: 0;
}

@media (min-width: 640px) {
    .filter-bar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: end;
    }

    .filter-bar .form-field { min-width: 160px; }
}

.pagination {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

.pagination a,
.pagination span {
    min-height: var(--tap-target);
    display: inline-flex;
    align-items: center;
}

.progress-track {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-pill);
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.progress-fill {
    background: var(--color-accent-solid);
    height: 100%;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 640px) {
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.stat-tile {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
    text-align: left;
}

.stat-tile .stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    display: block;
}

.stat-tile .stat-label {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.stack > * + * {
    margin-top: var(--space-3);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.section-title {
    font-size: 1.05rem;
    margin: 0 0 var(--space-3);
}

/* ==========================================================================
   Messaging — a plain, professional two-column-on-mobile thread. Not a
   consumer chat-app skin (no avatars/reactions/typing indicators), but
   still a familiar sender/received bubble pattern per section 28.
   ========================================================================== */

.message-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.message-row {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    align-self: flex-start;
}

@media (min-width: 640px) {
    .message-row { max-width: 70%; }
}

.message-row--mine {
    align-self: flex-end;
    align-items: flex-end;
}

.message-bubble {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    background: var(--color-bg-subtle);
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.message-row--mine .message-bubble {
    background: var(--color-accent-solid);
    color: #fff;
}

/* The specific reported message in a staff moderation review — a
   distinct highlight, never relying on the surrounding "Reported
   message" text label alone. */
.message-row--flagged { max-width: 100%; }

.message-bubble--flagged {
    background: var(--color-warning-subtle);
    border: 1px solid var(--color-warning-border);
}

.message-meta {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* A flush (no-padding) card containing a list of clickable rows — the
   conversation list, notification list, etc. */
.list-flush { padding: 0; }

.list-row {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.list-row:last-child { border-bottom: 0; }

.list-row--unread { background: var(--color-accent-subtle); }

/* ==========================================================================
   Footer — mobile-first: stacked, generous tap targets; a simple row on
   desktop. Deliberately small — brand/tagline, the handful of links that
   actually exist elsewhere in this app, and a copyright line. No
   invented About/Privacy/Terms pages.
   ========================================================================== */

/* The footer always uses the homepage's dark navy band, regardless of
   the light/dark theme toggle — the same deliberate "dark bookend"
   treatment the homepage itself uses for its employer section and
   closing CTA (see templates/home.html's `.pj-section--dark`). Because
   this surface never changes with the theme, its text/link colors below
   are fixed light-on-navy values, not the theme-aware `--color-*`
   tokens the rest of this file uses — using those here would fail
   contrast in light mode, where `--color-text-muted` is a dark gray
   meant for a light background. */
.site-footer {
    margin-top: var(--space-7);
    background: var(--color-navy);
}

.site-footer,
.site-footer p,
.site-footer .text-muted {
    color: #aab4c4;
}

.site-footer .brand { color: #ffffff; }

.site-footer a:focus-visible,
.site-footer button:focus-visible {
    outline-color: #a5b4fc;
}

.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.site-footer-brand p { margin: var(--space-1) 0 0; max-width: 40ch; }

/* Mission/Vision, condensed — one line of label, one or two of copy;
   see the homepage's own full-size Mission/Vision section for the
   complete statement. A footer is not the place for a wall of text. */
.site-footer-statement {
    margin-top: var(--space-3);
    max-width: 36ch;
}

.site-footer-statement h2 {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7c8aa0;
    margin: 0 0 var(--space-1);
}

.site-footer-statement p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
}

.site-footer-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.site-footer-group h2 {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7c8aa0;
    margin: 0 0 var(--space-2);
}

.site-footer-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer-group a {
    color: #c7cedb;
    text-decoration: none;
    padding: var(--space-2) 0;
    min-height: var(--tap-target);
    display: flex;
    align-items: center;
}

.site-footer-group a:hover { color: #a5b4fc; text-decoration: underline; }

.site-footer-legal {
    padding-top: 0;
    padding-bottom: var(--space-4);
}

@media (min-width: 640px) {
    .site-footer-inner {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
        padding-top: var(--space-6);
    }

    .site-footer-groups {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .site-footer-group a { min-height: 0; padding: 0 0 var(--space-2); }
}

/* ==========================================================================
   Auth pages (login/register) — a narrow, centered card; the same
   `.card` visual language as everywhere else, not a special "auth
   template."
   ========================================================================== */

.auth-card {
    max-width: 440px;
    margin: var(--space-6) auto;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-5);
}

.role-choice {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.role-choice-option {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    min-height: var(--tap-target);
}

.role-choice-option:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-subtle);
}

/* ==========================================================================
   Empty states — always answer "what's empty, why, what can I do."
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-muted);
}

.empty-state p:first-child {
    color: var(--color-text);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

/* ==========================================================================
   Error pages — deliberately simple, on-brand, human copy.
   ========================================================================== */

.error-page {
    max-width: 480px;
    margin: var(--space-7) auto;
    text-align: center;
    padding: 0 var(--space-4);
}

.error-page .error-code {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.error-page p { max-width: none; }

.error-page .quick-actions {
    justify-content: center;
    margin-top: var(--space-4);
}

/* Utility spacing — a small escape hatch for one-off adjustments,
   replacing ad hoc inline `style="margin-top:..."` attributes. */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--space-1) !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-1 { margin-bottom: var(--space-1) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-justify-center { justify-content: center !important; }
.text-preserve-lines { white-space: pre-wrap; }