/* GovJobs GTA — plain CSS, mobile-first, no framework, no CDN.
   Type: Plus Jakarta Sans, self-hosted (OFL). Colour: deep violet with a persimmon call to action.
   Shapes: pills for anything you type into or press, 14px corners for anything that holds content. */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-Italic.woff2") format("woff2");
}

:root {
    color-scheme: light dark;

    --bg: #ffffff;
    --surface: #f6f5fa;
    --surface-2: #ecebf3;
    --text: #1d1a2e;
    --muted: #5f5b74;
    --border: #e2dfec;
    --border-strong: #c9c4d9;

    --accent: #4b2a85;           /* deep violet: brand, links, active states */
    --accent-hover: #3a1f68;
    --accent-soft: #efe9fa;      /* violet wash for selected chips and banners */
    --accent-text: #ffffff;
    --link: #4b2a85;

    --cta: #e0562e;              /* persimmon: the one thing to press on a page */
    --cta-hover: #c4461f;
    --cta-text: #ffffff;
    --cta-soft: #fdeee8;

    --focus: #ff9d3f;
    --warn-bg: #fdf3e3;
    --warn-border: #c08a3e;
    --warn-text: #5a3a08;
    --urgent-fg: #b42318;
    --ok-bg: #e3f5ea;
    --ok-fg: #14532d;

    /* Employment-type chips. Each pair clears WCAG AA (4.5:1) in both themes. */
    --type-fulltime-bg: #dcf1e3;  --type-fulltime-fg: #135229;
    --type-parttime-bg: #dde9f8;  --type-parttime-fg: #173f6e;
    --type-contract-bg: #fbeccd;  --type-contract-fg: #633f00;
    --type-temporary-bg: #fbe2d6; --type-temporary-fg: #7a2e0e;
    --type-seasonal-bg: #d6f0ed;  --type-seasonal-fg: #0c4f4a;
    --type-casual-bg: #ece3fa;    --type-casual-fg: #4a2a7a;
    --type-student-bg: #f9e0ec;   --type-student-fg: #7a1f4d;

    --salary-fg: #0b5a2a;

    --gutter: 16px;
    --radius: 14px;
    --radius-sm: 10px;
    --pill: 999px;
    --maxw: 72rem;
    --shadow: 0 1px 2px rgba(29, 26, 46, .06), 0 6px 20px rgba(29, 26, 46, .06);
    --shadow-lift: 0 2px 6px rgba(29, 26, 46, .08), 0 14px 32px rgba(75, 42, 133, .12);
    --control-h: 3rem;

    /* Logo: ink, two violets for the people and text lines, the maple leaf's red, the
       wordmark's orange "gta", and the page colour behind the document and lens */
    --logo-ink: #2e1a57;
    --logo-mid: #6f4bb0;
    --logo-light: #9b7fdb;
    --logo-maple: #d52b1e;
    --logo-leaf: #e0562e;
    --logo-paper: var(--bg);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --logo-ink: #ebe8f5;
        --logo-mid: #9d80d9;
        --logo-light: #c4b0f0;
        --logo-maple: #ff5a4f;
        --logo-leaf: #f0683f;
        --bg: #141222;
        --surface: #1c1930;
        --surface-2: #26223d;
        --text: #ebe8f5;
        --muted: #aaa5c2;
        --border: #34304d;
        --border-strong: #4a4566;

        --accent: #b9a3ea;
        --accent-hover: #d0c2f3;
        --accent-soft: #2b2347;
        --accent-text: #15102a;
        --link: #c3b0f0;

        --cta: #f0683f;
        --cta-hover: #f5845f;
        --cta-text: #1a0d07;
        --cta-soft: #3b2119;

        --focus: #ffb454;
        --warn-bg: #2e2415;
        --warn-border: #b98c46;
        --warn-text: #f3ddb4;
        --urgent-fg: #ff8a80;
        --ok-bg: #173a24;
        --ok-fg: #a8e3bb;

        --type-fulltime-bg: #173a24;  --type-fulltime-fg: #a8e3bb;
        --type-parttime-bg: #1a3150;  --type-parttime-fg: #b3d2f5;
        --type-contract-bg: #3d2e10;  --type-contract-fg: #f5d58e;
        --type-temporary-bg: #45241a; --type-temporary-fg: #f7bfa6;
        --type-seasonal-bg: #123d3a;  --type-seasonal-fg: #9fe0d8;
        --type-casual-bg: #2f2349;    --type-casual-fg: #d3c0f5;
        --type-student-bg: #45192f;   --type-student-fg: #f5b8d5;

        --salary-fg: #b3ecc4;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
        --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .4);
    }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.6 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip; /* the full-bleed hero uses 100vw, which includes the scrollbar */
}

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
@media (min-width: 48rem) { .wrap { padding-inline: 1.5rem; } }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 6px;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }

@media (min-width: 48rem) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.5rem; }
}

.lede, .lead { font-size: 1.1rem; color: var(--muted); max-width: 44rem; }
.hint { color: var(--muted); font-size: .9rem; margin-bottom: .75rem; }
.stale-note { color: var(--muted); font-size: .875rem; }
.text-danger { color: var(--urgent-fg); }

/* ---------- skip link ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--accent);
    color: var(--accent-text);
    padding: .7rem 1rem;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--accent-text); }

/* ---------- header / nav ---------- */
.site-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
}
.site-header .wrap {
    display: flex;
    align-items: center;
    gap: .5rem 1.5rem;
    min-height: 4rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1;
    text-decoration: none;
    color: var(--logo-ink);
    letter-spacing: -.045em;
    white-space: nowrap;
}
.brand-word span { color: var(--logo-leaf); }
.brand:hover { color: var(--logo-ink); }
/* Logo mark (wwwroot/img/logo.svg is the same drawing in fixed colours). Colours come from
   the --logo-* tokens so the inline copy in the header follows dark mode. */
.brand-mark { width: 2.4rem; height: 2.4rem; flex: none; }
.brand-mark .logo-doc{fill:var(--logo-paper);stroke:var(--logo-ink);stroke-width:3.7px;stroke-linejoin:round}
.brand-mark .logo-ink{fill:var(--logo-ink)}
.brand-mark .logo-rule{fill:none;stroke:var(--logo-mid);stroke-width:2.6px;stroke-linecap:round}
.brand-mark .logo-gap{fill:var(--logo-paper)}
.brand-mark .logo-neck{stroke:var(--logo-ink);stroke-width:5.2px}
.brand-mark .logo-handle{stroke:var(--logo-ink);stroke-width:7.3px;stroke-linecap:round}
.brand-mark .logo-ring{fill:var(--logo-paper);stroke:var(--logo-ink);stroke-width:3.5px}
.brand-mark .logo-light{fill:var(--logo-light)}
.brand-mark .logo-mid{fill:var(--logo-mid)}
.brand-mark .logo-body{fill:var(--logo-ink);stroke:var(--logo-paper);stroke-width:1.2px;paint-order:stroke}
.brand-mark .logo-cut{fill:var(--logo-paper)}
.brand-mark .logo-maple{fill:var(--logo-maple)}
.site-nav { min-width: 0; flex: 1 1 auto; }
.site-nav ul {
    list-style: none;
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: 0;
}
.site-nav a {
    display: inline-block;
    padding: .45rem .8rem;
    border-radius: var(--pill);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    color: var(--muted);
    white-space: nowrap;
}
.site-nav a:hover { color: var(--accent); background: var(--accent-soft); }
.site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.nav-end { margin-left: auto; display: flex; gap: .35rem; align-items: center; }
.nav-end > a:not(.btn) {
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    color: var(--muted);
    padding: .45rem .8rem;
    border-radius: var(--pill);
    white-space: nowrap;
}
.nav-end > a:not(.btn):hover { color: var(--accent); background: var(--accent-soft); }
.nav-end .btn { padding: .5rem 1.1rem; font-size: .95rem; }
.nav-signout { display: inline; margin: 0; }
.nav-saved { display: inline-flex; align-items: center; gap: .4rem; }
.nav-saved svg { width: 1.05rem; height: 1.05rem; color: var(--cta); flex: none; }

/* Desktop "Account" dropdown: alerts, preferences, admin and sign-out live behind one word so
   the top bar keeps fitting. On phones the drawer lists the same links, so the menu is hidden. */
.account-menu { position: relative; }
.account-dd-face {
    display: inline-block;
    padding: .45rem 1.7rem .45rem .8rem;
    border-radius: var(--pill);
    font-weight: 600;
    font-size: .95rem;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235f5b74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .55rem center;
    background-size: .8rem;
}
.account-dd-face::-webkit-details-marker { display: none; }
.account-dd-face:hover, .account-dd[open] .account-dd-face { color: var(--accent); background-color: var(--accent-soft); }
.account-dd-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + .4rem);
    right: 0;
    min-width: 11rem;
    display: grid;
    gap: .1rem;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: .4rem;
}
.account-dd-panel > a {
    display: block;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    color: var(--text);
    white-space: nowrap;
}
.account-dd-panel > a:hover { color: var(--accent); background: var(--accent-soft); }
.account-dd-panel .nav-signout { display: block; margin-top: .25rem; padding-top: .35rem; border-top: 1px solid var(--border); }
.account-dd-panel .nav-signout .btn {
    width: 100%;
    justify-content: flex-start;
    padding: .5rem .75rem;
    min-height: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font-size: .95rem;
    color: var(--text);
}
.account-dd-panel .nav-signout .btn:hover { color: var(--accent); background: var(--accent-soft); }

/* Phone: brand, a couple of account links and the menu button on one line; the menu
   button opens a panel with every link stacked (site.js toggles .nav-open). */
.nav-toggle { display: none; }
@media (max-width: 47.99rem) {
    .site-header .wrap { flex-wrap: wrap; gap: .25rem .5rem; min-height: 3.5rem; padding-block: .5rem; }
    .brand { margin-right: auto; font-size: 1.2rem; gap: .3rem; }
    .brand-mark { width: 2rem; height: 2rem; }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 1.5px solid var(--border-strong);
        border-radius: 50%;
        background: var(--bg);
        color: var(--text);
        cursor: pointer;
        order: 3;
    }
    .nav-toggle svg { width: 1.3rem; height: 1.3rem; }
    .nav-toggle-close { display: none; }
    .nav-open .nav-toggle-open { display: none; }
    .nav-open .nav-toggle-close { display: block; }
    .nav-end { margin-left: 0; order: 2; gap: .25rem; }
    .nav-end > a:not(.btn) { display: none; }
    .account-menu { display: none; }
    .nav-end .btn { padding: .4rem .85rem; font-size: .9rem; min-height: 2.4rem; }
    .site-nav { order: 4; flex-basis: 100%; display: none; padding: .5rem 0 .75rem; border-top: 1px solid var(--border); margin-top: .5rem; }
    .nav-open .site-nav { display: block; }
    .site-nav ul { flex-direction: column; gap: .1rem; }
    .site-nav a { display: block; padding: .6rem .75rem; font-size: 1rem; }
    .site-nav .nav-account { display: block; }
    /* The account area is a box of its own, so it does not read as more site links. */
    .nav-account-box {
        display: grid;
        gap: .1rem;
        margin-top: .75rem;
        padding: .9rem .75rem .75rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    .nav-account-heading { padding: 0 .25rem .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
    .site-nav .nav-account-box .btn { display: flex; width: 100%; padding: .55rem 1.35rem; background: var(--bg); color: var(--accent); }
    .site-nav .nav-account-box .btn:hover { background: var(--accent-soft); }
    .site-nav .nav-account-box .nav-saved { margin-bottom: .35rem; }
    .site-nav .nav-signout { display: block; margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--border); }
    .site-nav .nav-account-box .nav-signout .btn { color: var(--text); }
}
@media (min-width: 48rem) { .site-nav .nav-account { display: none; } }

/* ---------- footer ---------- */
.site-footer {
    margin-top: 4rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-block: 2rem 2.5rem;
    color: var(--muted);
    font-size: .9rem;
}
.site-footer ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.site-footer a { color: var(--text); text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer p { max-width: 48rem; }

main { display: block; padding-block: 1.75rem 2rem; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.75rem;
    padding: .55rem 1.35rem;
    border-radius: var(--pill);
    border: 1.5px solid var(--accent);
    background: var(--accent);
    color: var(--accent-text);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
.btn-primary { background: var(--cta); border-color: var(--cta); color: var(--cta-text); }
.btn-primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: var(--cta-text); }
.btn-secondary { background: transparent; color: var(--accent); }
.btn-secondary:hover { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent); }
.btn-quiet { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-quiet:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.btn-lg { min-height: 3.25rem; padding: .8rem 1.75rem; font-size: 1.05rem; width: 100%; }
@media (min-width: 30rem) { .btn-lg { width: auto; } }
.btn-small { min-height: 2rem; padding: .25rem .8rem; font-size: .82rem; background: transparent; color: var(--accent); border-color: var(--border-strong); }
.btn-small:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-danger { background: var(--urgent-fg); border-color: var(--urgent-fg); color: #fff; }
.btn-danger:hover { background: #912018; border-color: #912018; }
.btn-quiet-danger { color: var(--urgent-fg); }
.btn-quiet-danger:hover { background: var(--type-temporary-bg); border-color: var(--urgent-fg); color: var(--urgent-fg); }

/* ---------- inputs ---------- */
input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], select, textarea {
    width: 100%;
    min-height: var(--control-h);
    padding: .6rem 1.1rem;
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--pill);
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { border-radius: var(--radius); }
input::placeholder { color: var(--muted); opacity: .9; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235f5b74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}
.field { margin-bottom: 1rem; }
.field label, .filters label {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    margin-bottom: .35rem;
}
.field-error { display: block; color: var(--urgent-fg); font-size: .85rem; margin-top: .3rem; }
.validation-summary ul { margin: 0 0 1rem; padding: .75rem 1rem .75rem 2rem; background: var(--cta-soft); border: 1px solid var(--urgent-fg); border-radius: var(--radius-sm); color: var(--urgent-fg); font-size: .9rem; }
.validation-summary:empty, .validation-summary-valid { display: none; }
.notice {
    background: var(--ok-bg);
    color: var(--ok-fg);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    font-weight: 500;
}
.notice-error { background: var(--cta-soft); color: var(--urgent-fg); }

/* ---------- hero (home and /jobs) ---------- */
.hero {
    background: var(--surface);
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    margin-top: -1.75rem;
    padding-block: 2rem 1.5rem;
    margin-bottom: 1.75rem;
}
@media (min-width: 48rem) { .hero { padding-block: 3rem 2rem; } }
.hero h1 { margin-bottom: .35rem; }
@media (min-width: 64rem) { .hero h1 { font-size: 2.35rem; white-space: nowrap; } }
.hero .lead { margin-bottom: .35rem; max-width: none; font-size: 1.05rem; }
.hero .stale-note { margin-bottom: 1.25rem; font-size: .85rem; }
.lead-toggle { display: none; }
@media (max-width: 47.99rem) {
    .hero .lead { font-size: 1rem; }
    .lead:not(.is-open) .lead-more { display: none; }
    .lead-toggle {
        display: inline;
        background: none;
        border: 0;
        padding: 0;
        margin-left: .25rem;
        font: inherit;
        font-weight: 700;
        color: var(--accent);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .lead-toggle[hidden] { display: none; }
}
.hero .filters { margin-bottom: 0; }
.hero-detail h1 { white-space: normal; }
.hero > p:last-child, .hero .lead:last-child { margin-bottom: 0; }
.hero .lead strong { color: var(--text); }

/* ---------- home hero: employers -> wires -> one feed ---------- */
/* The picture is decoration (aria-hidden); the heading, the sentence and the counts carry the
   message. site.js draws the wires from the measured rows, so nothing here knows how many
   employers there are. Without script the employers and the first cards still show.
   --hf-flow tells the script which way the wires run: down the page on a phone (employers
   above the feed), across it from 48rem (employers beside the feed). */
.hero-home { padding-block: 2rem; }
.hero-home h1 {
    text-align: center;
    font-size: clamp(1.9rem, .9rem + 4.4vw, 4rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.05;
    white-space: normal;
    text-wrap: balance;
    margin-bottom: 1.75rem;
}
.hf-count { color: var(--accent); font-variant-numeric: tabular-nums; }
.hf-grid { display: grid; gap: 2rem; align-items: center; }
.hf-pitch { min-width: 0; text-align: center; }
.hf-one {
    margin: 0 0 .75rem;
    font-size: clamp(2.75rem, 1.6rem + 5vw, 4.75rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}
.hf-line { margin: 0 0 1rem; color: var(--muted); font-size: 1.05rem; }
.hf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.hf-stats div { border-top: 2px solid var(--border-strong); padding-top: .55rem; }
.hf-stats b { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hf-stats span { font-size: .85rem; color: var(--muted); }

.hf-merge { --hf-flow: column; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; max-width: 26rem; margin-inline: auto; width: 100%; }
.hf-emps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.hf-emps li { min-width: 0; display: flex; }
@media (max-width: 47.99rem) { .hf-emps li:nth-child(n+6):not(:last-child) { display: none; } }
.hf-emp {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
    font-weight: 700;
    padding: .3rem .65rem;
    border-radius: var(--pill);
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: background .24s, color .24s, border-color .24s;
}
.hf-emp.is-hit { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.hf-emp-more { background: transparent; box-shadow: none; border-style: dashed; color: var(--muted); }
.hf-wires { display: block; width: 100%; height: 3.25rem; overflow: visible; }
.hf-wire { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.hf-comet { fill: none; stroke: var(--cta); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 400; stroke-dashoffset: 18; opacity: 0; }
.hf-comet.is-go { animation: hf-comet .56s linear forwards; }
@keyframes hf-comet { 0% { stroke-dashoffset: 18; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -150; opacity: 0; } }
.hf-hub { fill: var(--accent); }
.hf-ring { fill: none; stroke: var(--logo-mid); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: hf-ring 2.4s ease-out infinite; }
@keyframes hf-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.hf-feed { display: grid; gap: .5rem; min-width: 0; margin-top: .35rem; }
.hf-feed-head { margin: 0; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hf-list {
    display: grid;
    gap: .5rem;
    align-content: start;
    height: 11.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
}
.hf-card {
    display: grid;
    gap: .1rem;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: .6rem .8rem;
    box-shadow: var(--shadow);
    font-size: .8rem;
    line-height: 1.4;
}
.hf-card b { font-size: .9rem; line-height: 1.25; color: var(--link); overflow-wrap: anywhere; }
.hf-meta { color: var(--muted); }
.hf-row { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; margin-top: .2rem; }
.hf-row .tag { font-size: .68rem; padding: .05rem .5rem; }
.hf-pay { color: var(--salary-fg); font-weight: 700; font-size: .72rem; }
.hf-card.is-new { animation: hf-enter .36s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hf-enter { from { transform: translateX(-18px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 48rem) {
    .hf-merge { --hf-flow: row; grid-template-columns: minmax(0, 12.5rem) 6rem minmax(0, 1fr); max-width: 40rem; }
    .hf-emps { display: grid; grid-auto-rows: 2.5rem; align-items: center; gap: 0; }
    .hf-emps li { justify-content: flex-end; }
    .hf-emp { font-size: .8rem; padding: .35rem .75rem; }
    .hf-wires { height: 0; }
    .hf-feed { margin-top: 0; padding-left: .5rem; }
    .hf-feed-head { text-align: left; }
    .hf-list { height: 20rem; }
    .hf-card { font-size: .82rem; padding: .65rem .85rem; }
}
@media (min-width: 72rem) {
    .hero-home { padding-block: 3rem 2.5rem; }
    .hero-home h1 { margin-bottom: 2.5rem; }
    .hf-grid { grid-template-columns: max-content minmax(0, 1fr); gap: 2.5rem; }
    .hf-pitch { text-align: left; }
    .hf-line { white-space: nowrap; font-size: 1rem; }
    .hf-merge { margin-inline: 0; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
    .hf-ring, .hf-comet.is-go, .hf-card.is-new { animation: none; }
}

/* ---------- search form ---------- */
.filters { margin-bottom: 1.5rem; }
.filters .field { margin-bottom: 0; }
.job-search-row {
    display: grid;
    gap: .5rem;
    align-items: stretch;
}
@media (min-width: 48rem) {
    .job-search-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
    .job-search-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .job-search-row > .search-field:first-child { grid-column: 1 / -1; }
    .job-search-row > .btn { grid-column: 1 / -1; }
}
.search-field { position: relative; }
.search-field > svg {
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 1.15rem;
    height: 1.15rem;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.search-field > input, .search-field > select { padding-left: 2.6rem; }
.job-search-row .btn { min-height: var(--control-h); white-space: nowrap; }
.filter-chip-clear { border-style: dashed; color: var(--muted); }
.filter-chip-clear:hover { color: var(--urgent-fg); border-color: var(--urgent-fg); }
@media (max-width: 30rem) { .wide-only { display: none; } }

/* Multi-select pill dropdowns (location on the search row, employer in the filter panel).
   The summary is drawn like an input; the panel floats below it. */
.picker-dd { position: relative; }
.picker-dd-face {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--control-h);
    padding: .6rem 2.6rem .6rem 1.1rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--pill);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    list-style: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235f5b74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}
.picker-dd-face::-webkit-details-marker { display: none; }
.picker-dd-face > svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--muted); }
.search-field.picker-dd > .picker-dd-face { padding-left: 1rem; }
.picker-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-dd.has-value .picker-dd-face { border-color: var(--accent); }
.picker-dd.has-value .picker-dd-label { font-weight: 600; color: var(--accent); }
.picker-dd[open] .picker-dd-face { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.picker-dd-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + .4rem);
    left: 0;
    min-width: 100%;
    width: max(100%, 18rem);
    max-width: calc(100vw - 2 * var(--gutter));
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: .6rem;
}
.picker-dd-search { min-height: 2.5rem; padding: .4rem .9rem; margin-bottom: .5rem; font-size: .92rem; }
.picker-dd-list { max-height: 16rem; overflow-y: auto; display: grid; gap: .1rem; }
.filters .picker-dd-item, .picker-dd-item {
    display: flex;
    margin: 0;
    align-items: center;
    gap: .6rem;
    padding: .4rem .6rem;
    border-radius: var(--radius-sm);
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
}
.picker-dd-item[hidden] { display: none; }
.picker-dd-item:hover { background: var(--surface); }
.picker-dd-item input { width: 1.05rem; height: 1.05rem; margin: 0; flex: none; accent-color: var(--accent); }
.picker-dd-item:has(input:checked) { background: var(--accent-soft); color: var(--accent); }
.picker-dd-foot { display: flex; justify-content: space-between; gap: .5rem; padding-top: .5rem; margin-top: .4rem; border-top: 1px solid var(--border); }
.picker-dd-foot .btn-apply { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.picker-dd-foot .btn-apply:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
.field-label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }

/* Filter chips: one scrolling row of pills. Selected pills go violet. */
.filter-line { margin-top: .75rem; }
.filter-more > summary { list-style: none; cursor: pointer; }
.filter-more > summary::-webkit-details-marker { display: none; }
.chip-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: .15rem;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
}
.chip-row::-webkit-scrollbar { display: none; }
@media (min-width: 48rem) { .chip-row { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.5rem;
    padding: .4rem 1rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--pill);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    flex: 0 0 auto;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.filter-chip svg { width: .9rem; height: .9rem; }
.filter-more[open] > summary .filter-chip:first-child { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.filter-grid { display: grid; gap: .6rem; margin-top: .75rem; }
@media (min-width: 42rem) { .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.filter-more .admin-only { margin: .6rem 0 0; }
.check-inline { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; cursor: pointer; }
.check-inline .hint { margin: 0; }

/* ---------- job list ---------- */
.result-count { color: var(--muted); margin-bottom: 1rem; font-size: .95rem; }
.result-count strong { color: var(--text); }
.job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.job-card {
    position: relative;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.job-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.job-card h2, .job-card h3 { margin-bottom: .2rem; font-size: 1.1rem; line-height: 1.3; }
.job-card h2 a, .job-card h3 a { text-decoration: none; color: var(--accent); }
.job-card h2 a:hover, .job-card h3 a:hover { text-decoration: underline; }
.job-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .25rem 1rem; }
.job-card-head h3 { flex: 1 1 18rem; }
.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    color: var(--muted);
    font-size: .92rem;
    margin: 0;
}
.job-meta > * { display: inline-flex; align-items: center; gap: .3rem; }
.job-meta a { color: var(--text); text-decoration: none; font-weight: 600; }
.job-meta a:hover { color: var(--accent); text-decoration: underline; }
.job-meta-detail { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .85rem; }
.job-meta-detail a { font-weight: 500; color: var(--muted); }
.job-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.job-chips-flush { margin: 0; }
.job-chips-list { list-style: none; padding: 0; }
.job-salary {
    margin: 0;
    white-space: nowrap;
    color: var(--salary-fg);
    background: var(--ok-bg);
    border-radius: var(--pill);
    padding: .2rem .7rem;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.job-source { margin-left: auto; }
@media (max-width: 40rem) { .job-source { margin-left: 0; } }
.tag {
    display: inline-block;
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--pill);
    padding: .2rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}
a.tag:hover { background: var(--accent-soft); color: var(--accent); }
.tag-fulltime  { background: var(--type-fulltime-bg);  color: var(--type-fulltime-fg); }
.tag-parttime  { background: var(--type-parttime-bg);  color: var(--type-parttime-fg); }
.tag-contract  { background: var(--type-contract-bg);  color: var(--type-contract-fg); }
.tag-temporary { background: var(--type-temporary-bg); color: var(--type-temporary-fg); }
.tag-seasonal  { background: var(--type-seasonal-bg);  color: var(--type-seasonal-fg); }
.tag-casual    { background: var(--type-casual-bg);    color: var(--type-casual-fg); }
.tag-student   { background: var(--type-student-bg);   color: var(--type-student-fg); }
/* "Experience not stated" under the Entry level filter: a caveat, not a fact about the job. */
.tag-muted { background: transparent; color: var(--muted); border: 1px dashed var(--border); font-weight: 500; }
.tag-closed { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); margin-right: .4rem; vertical-align: middle; }
.closing-soon { color: var(--urgent-fg); font-weight: 700; }
.empty {
    background: var(--surface);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    padding: 1.75rem 1.25rem;
    color: var(--muted);
}
.empty p:last-child { margin-bottom: 0; }

/* ---------- pagination ---------- */
.pager { margin-top: 2rem; }
.pager ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.pager a, .pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: .35rem .8rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--pill);
    text-decoration: none;
    font-weight: 600;
    background: var(--bg);
    color: var(--text);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* ---------- two-column pages ---------- */
.layout-2col { display: grid; gap: 1.75rem; }
@media (min-width: 58rem) {
    .layout-2col { grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); align-items: start; }
    .layout-2col > aside { position: sticky; top: 5rem; }
}
.panel {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.panel h2, .panel h3 { font-size: 1.1rem; margin-bottom: .65rem; }
.panel p:last-child { margin-bottom: 0; }
.panel .btn { width: 100%; }
.panel-cta { background: var(--accent); color: var(--accent-text); }
.panel-cta h2, .panel-cta h3 { color: inherit; }
.panel-cta p { color: inherit; opacity: .9; }
.panel-cta .btn { background: var(--bg); border-color: var(--bg); color: var(--accent); }
.panel-cta .btn:hover { background: var(--surface); border-color: var(--surface); color: var(--accent-hover); }
.link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.link-list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.link-list a { text-decoration: none; font-weight: 500; font-size: .92rem; color: var(--text); padding: .2rem 0; min-width: 0; }
.link-list a:hover { color: var(--accent); text-decoration: underline; }
.link-list .tag { flex: none; font-variant-numeric: tabular-nums; font-size: .75rem; padding: .1rem .55rem; color: var(--muted); }
.panel .more-link { display: inline-block; margin-top: .75rem; font-weight: 600; font-size: .9rem; }
.facts { margin: 0; }
.facts div { display: flex; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-weight: 600; min-width: 8.5rem; margin: 0; color: var(--muted); font-size: .9rem; }
.facts dd { margin: 0; color: var(--text); }
.apply-closes { margin: .9rem 0 0; font-weight: 500; }
.banner {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-left-width: 5px;
    color: var(--warn-text);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
    margin-bottom: 1.25rem;
}
.banner strong { display: block; font-size: 1.05rem; }
.banner a { color: inherit; }
/* Descriptions arrive in the cleaner's dialect (p, lists, h3/h4, tables, dl, links);
   everything here is the one typographic scale they all share. */
.job-body { overflow-wrap: break-word; max-width: 70ch; line-height: 1.55; }
.job-body p, .job-body ul, .job-body ol, .job-body dl, .job-body table, .job-body blockquote { margin: 0 0 .9em; }
.job-body h3 { font-size: 1.1rem; margin: 1.5em 0 .5em; }
.job-body h4 { font-size: 1rem; margin: 1.25em 0 .4em; }
.job-body h3:first-child, .job-body h4:first-child { margin-top: 0; }
.job-body ul, .job-body ol { padding-left: 1.25rem; }
.job-body li { margin-bottom: .25em; }
.job-body li > p { margin: 0; }
.job-body table { max-width: 100%; border-collapse: collapse; font-size: .95em; }
.job-body th, .job-body td { border: 1px solid var(--border, #ddd); padding: .35em .6em; text-align: left; vertical-align: top; }
.job-body dl { display: grid; grid-template-columns: max-content 1fr; gap: .2em .9em; }
.job-body dt { font-weight: 600; }
.job-body dd { margin: 0; }
.job-body blockquote { border-left: 3px solid var(--border, #ddd); padding-left: .9em; color: var(--muted); }
.job-body hr { border: 0; border-top: 1px solid var(--border, #ddd); margin: 1.25em 0; }

/* Job detail header */
.job-head h1 { max-width: 30ch; }
.job-head .job-meta { font-size: 1rem; }
.job-head .job-chips { margin-top: .75rem; }
.apply-panel { background: var(--bg); border: 1.5px solid var(--border); box-shadow: var(--shadow); }
.job-chips-save { align-items: center; }
.job-chips-save .save-btn { width: 2.1rem; height: 2.1rem; }
.job-chips-save .save-btn svg { width: 1rem; height: 1rem; }
/* On a phone the Apply card comes before the description, so the button is not a screen of text away. */
@media (max-width: 57.99rem) { .layout-detail > aside { order: -1; } .layout-detail > aside .panel:not(.apply-panel) { display: none; } }
.apply-panel .btn { width: 100%; margin-bottom: 1.1rem; }
.apply-panel .apply-closes { margin-top: 0; }
.apply-panel .stale-note { margin-top: .5rem; }
.apply-panel .stale-note + .stale-note { padding-top: .75rem; border-top: 1px solid var(--border); }

/* Home page personalised heading and banner */
.latest-for h2 { margin-bottom: .25rem; }
.profile-banner {
    margin: 0 0 1rem;
    font-size: .95rem;
    color: var(--muted);
}
.profile-banner strong { color: var(--text); }
.latest-for .profile-banner { margin-top: .5rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.section-head a:hover { text-decoration: underline; }
.list-foot { margin-top: 1.25rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- card grids (categories) ---------- */
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-grid li {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.2rem;
    background: var(--bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.card-grid li:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.card-grid h2, .card-grid h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.card-grid h2 a { text-decoration: none; }
.card-grid h2 a:hover { text-decoration: underline; }
.card-grid p { margin: 0; color: var(--muted); font-size: .9rem; }
.card-grid p + p { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.child-list { color: var(--muted); font-size: .9rem; }

.child-link {
    display: inline-block;
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--pill);
    padding: .15rem .65rem;
    font-size: .8rem;
    font-weight: 500;
    text-decoration: none;
}
.child-link:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- /programs ---------- */
.program-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .85rem; }
.program-list .job-card p { margin: 0 0 .5rem; }
.program-list .job-card p:last-child { margin-bottom: 0; }
.program-employer { color: var(--muted); font-size: .9rem; font-weight: 600; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Register's bot trap: off-screen rather than display:none, which some bots skip. */
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- cards (forms, account, preferences) ---------- */
.card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.card > h2:first-child { margin-bottom: .5rem; }
.card > p:last-child { margin-bottom: 0; }
.danger-zone { border-color: var(--type-temporary-bg); }
.danger-zone h2 { color: var(--urgent-fg); }

/* ---------- page head with an action (alert profiles) ---------- */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1.5rem;
}
.page-head h1 { margin-bottom: .25rem; }
.page-head .lede { margin: 0; }
.page-head .btn { white-space: nowrap; }

/* ---------- alert profiles ---------- */
.profile-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.profile-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.4rem 1.1rem;
}
.profile-card-paused { box-shadow: none; background: var(--surface); }
.profile-card-paused .profile-title h2 { color: var(--muted); }
.profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.profile-title { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.profile-title h2 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.profile-cadence { color: var(--muted); font-size: .875rem; }
.profile-detail { margin: 1rem 0 0; display: grid; gap: .6rem; }
.profile-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: .25rem .75rem; align-items: baseline; }
.profile-row dt { font-size: .85rem; font-weight: 600; color: var(--muted); padding-top: .25rem; }
.profile-row dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
@media (max-width: 34rem) { .profile-row { grid-template-columns: 1fr; gap: .2rem; } }

.chip {
    display: inline-block;
    background: var(--surface-2);
    color: var(--text);
    border-radius: var(--pill);
    padding: .2rem .75rem;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.chip-any { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--muted); }
.chip-include { background: var(--type-fulltime-bg); color: var(--type-fulltime-fg); }
.chip-exclude { background: var(--type-temporary-bg); color: var(--type-temporary-fg); text-decoration: line-through; }
.chip-more { background: transparent; border: 1.5px solid var(--border-strong); color: var(--accent); font-weight: 600; cursor: pointer; }
.chip-more:hover { background: var(--accent-soft); border-color: var(--accent); }
.chip-fold-wrap, .chip-fold { display: contents; }
.chip-fold > summary { display: contents; list-style: none; }
.chip-fold > summary::-webkit-details-marker { display: none; }
.chip-more-close { display: none; }
.chip-fold[open] .chip-more-open { display: none; }
.chip-fold[open] .chip-more-close { display: inline-block; }
.chip-rest { display: contents; }

.profile-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.profile-stat { color: var(--muted); font-size: .9rem; }
.profile-stat strong { color: var(--text); font-size: 1.15rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.actions form { margin: 0; display: inline-flex; }
.actions .btn { min-height: 2.4rem; padding: .35rem 1rem; font-size: .9rem; }
.admin-links { margin-bottom: 1.25rem; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .75rem;
    border-radius: var(--pill);
    font-size: .8125rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.badge-on { background: var(--ok-bg); color: var(--ok-fg); }
.badge-off { background: var(--surface-2); color: var(--muted); }
.empty-alerts { text-align: center; padding: 3rem 1rem; }
.empty-alerts p { max-width: 30rem; margin: 0 auto .75rem; }
.empty-alerts .btn { margin-top: .5rem; }
.profile-footnote { margin-top: 1.5rem; font-size: .9rem; }

/* ---------- alert profile form ---------- */
.form-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.form-actions .btn { min-width: 0; }
.form-actions-foot { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.advanced { margin: .5rem 0 0; }
.advanced > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--accent);
    padding: .25rem 0;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::before {
    content: "";
    width: .5rem; height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.advanced[open] > summary::before { transform: rotate(45deg); }
.advanced-body { margin-top: 1.25rem; }

/* ---------- multi-select pickers (alert profile form) ---------- */
.picker {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem 1.1rem;
    margin: 0 0 1.25rem;
    min-width: 0;
}
.picker legend { font-weight: 700; font-size: 1rem; padding: 0 .4rem; }
.picker .hint { margin: 0 0 .6rem; }
.picker-toolbar { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.picker-count { color: var(--muted); font-size: .8rem; margin-left: auto; }
.check-grid { display: grid; gap: .3rem .9rem; }
@media (min-width: 38rem) { .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 58rem) { .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check-groups { display: grid; gap: .9rem; }
@media (min-width: 38rem) { .check-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 58rem) { .check-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.check-group { min-width: 0; }
.check-region { margin-bottom: .2rem; }
.check-group .check:not(.check-region) { padding-left: 1.1rem; }
.subpicker summary { padding-left: 1.1rem; color: var(--muted); font-size: .85rem; cursor: pointer; }
.check { display: flex; align-items: baseline; gap: .45rem; }
.check input[type="checkbox"] { width: auto; margin: 0; flex: none; accent-color: var(--accent); }
.check label { display: inline; font-weight: 400; font-size: .9rem; margin: 0; cursor: pointer; }
.check .count { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.check .count::before { content: "("; }
.check .count::after { content: ")"; }

/* ---------- account forms ---------- */
.form { max-width: 26rem; margin-bottom: 1.25rem; }
.form .field { margin-bottom: 1rem; }
.form .checkbox { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .9rem; }
.form .checkbox input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--accent); flex: none; }
.form .checkbox label { font-weight: 500; }
.form .btn { min-width: 9rem; }
.form.form-wide { max-width: none; }
.form-wide > .field { max-width: 26rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1.25rem; }
.consents { border: 0; padding: 0; margin: 0 0 1.25rem; }
.consents legend { font-weight: 700; padding: 0; margin-bottom: .25rem; }
.external-logins { display: grid; gap: .6rem; margin-bottom: .9rem; }
.card:has(> form > .external-logins) { max-width: 26rem; }
.card:has(> form > .external-logins) .hint:last-child { margin-bottom: 0; }
.btn-external {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    max-width: 22rem;
    min-height: 44px;
    padding: .55rem 1rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--pill);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.btn-external:hover { box-shadow: var(--shadow); }
.btn-external:active { background: var(--surface-2); }
.btn-google::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-google { background: #ffffff; border-color: #747775; color: #1f1f1f; }
.btn-google:hover { background: #f8faff; }
.btn-google:active { background: #eef2fb; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
    :root:not([data-theme="light"]) .btn-google:hover { background: #1f2022; }
    :root:not([data-theme="light"]) .btn-google:active { background: #2a2b2e; }
}
:root[data-theme="dark"] .btn-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }

/* ---------- employer list ---------- */
.employer-search { margin-bottom: 1.25rem; }
.employer-search label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.search-links { margin-top: .75rem; }
.search-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.search-row input[type="search"] { flex: 1 1 14rem; width: auto; }
.search-row .btn { min-height: var(--control-h); }
.table-scroll { overflow-x: auto; border: 1.5px solid var(--border); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 1.5rem; }
.table-scroll .data-table { margin-bottom: 0; }
.data-table th, .data-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; }
.data-table thead th { background: var(--surface); font-weight: 700; font-size: .82rem; color: var(--muted); }
.data-table tbody tr:hover { background: var(--surface); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.employer-table tbody th { font-weight: 600; text-align: left; }
.employer-table tbody th a { text-decoration: none; }
.employer-table tbody th a:hover { text-decoration: underline; }
.employer-table td, .employer-table th { white-space: normal; }
.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.sort-link:hover, .sort-link:focus-visible { color: var(--accent); text-decoration: underline; }
.sort-arrow { font-size: .7rem; min-width: .7rem; }
.sort-arrow:empty { display: none; }

/* ---------- admin ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 2rem; }
.metric { background: var(--surface); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.metric-value { font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.metric-label { font-size: .8rem; color: var(--muted); font-weight: 600; }
.row-alert td { background: var(--warn-bg); color: var(--warn-text); }
.crawl-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.crawl-toolbar .crawl-status { margin: 0; }
.crawl-status { color: var(--muted); font-size: .8rem; white-space: normal; }
.crawl-ok { color: var(--text); }
.crawl-bad { color: var(--warn-text); }
.data-table .inline-form { display: inline; margin: 0; }
.sample { white-space: pre-wrap; font-size: .85rem; background: var(--surface); border-radius: var(--radius-sm); padding: .75rem 1rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* ---------- split view: results beside the open posting (/jobs) ---------- */
.split { display: grid; gap: 1.5rem; align-items: start; }
.split-pane { display: none; }
@media (min-width: 64rem) {
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .split-pane {
        display: block;
        position: sticky;
        top: 4.75rem;
        max-height: calc(100vh - 5.5rem);
        overflow-y: auto;
        background: var(--bg);
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        padding: 1.5rem 1.6rem 1.75rem;
        scrollbar-width: thin;
    }
    .split .job-list { gap: .6rem; }
    .split .job-card { padding: .95rem 1.1rem; }
    .split .job-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
    .split .job-card h3 { font-size: 1.02rem; }
    .split .job-source { display: none; }
}
.split-pane.is-loading { opacity: .5; }
.pane-head { padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.pane-title { font-size: 1.35rem; margin-bottom: .35rem; }
.pane-title a { text-decoration: none; }
.pane-title a:hover { text-decoration: underline; }
.pane-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }
.pane-actions .btn { min-height: 2.75rem; }
.pane-open { margin-left: auto; font-size: .9rem; font-weight: 600; text-decoration: none; }
.pane-open:hover { text-decoration: underline; }
.pane-facts { margin-bottom: 1.25rem; }
.pane-facts dt { min-width: 9.5rem; }
.pane-section { font-size: 1.05rem; margin-bottom: .5rem; }
.pane-sunshine { margin-top: 1.5rem; }
.pane .job-body { max-width: none; }

/* "Create a job alert for this search" banner */
/* "Filtering by" chips on /jobs: each chip removes its own filter. */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-bottom: 1.25rem;
}
.active-filters-title { color: var(--muted); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.active-filters ul { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; margin-inline: 0; padding-inline: 0; }
.active-filters li { display: inline-flex; }
.active-filters .filter-chip svg { width: .8rem; height: .8rem; opacity: .7; }
.active-filters .filter-chip.is-on:hover { background: var(--bg); color: var(--urgent-fg); border-color: var(--urgent-fg); }
.active-filters .filter-chip.is-on:hover svg { opacity: 1; }

/* Heart */
.save-form { margin: 0; display: inline-flex; }
.save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--bg);
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.save-btn svg { width: 1.2rem; height: 1.2rem; }
.save-btn:hover { color: var(--cta); border-color: var(--cta); }
.save-btn.is-saved { color: var(--cta); border-color: var(--cta); background: var(--cta-soft); }
.save-btn.is-saved svg { fill: currentColor; }
.job-card > .save-form, .job-card > a.save-btn { position: absolute; top: .9rem; right: .9rem; }
.job-card h3 { padding-right: 3rem; }

/* Share menu beside the heart (_ShareButton) */
.share { position: relative; display: inline-flex; }
.share-dd > summary { list-style: none; }
.share-dd > summary::-webkit-details-marker { display: none; }
.share-dd[open] > summary { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.share-menu {
    position: absolute;
    top: calc(100% + .4rem);
    left: 0;
    z-index: 30;
    min-width: 12rem;
    margin: 0;
    padding: .35rem 0;
    list-style: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lift);
}
.share-menu li + li { border-top: 1px solid var(--border); }
.share-menu a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .9rem;
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.share-menu a:hover, .share-menu a:focus-visible { background: var(--surface); }
.share-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
}
.share-ico svg { width: 1rem; height: 1rem; }
.share-ico-plain { color: var(--text); border: 1.5px solid var(--border-strong); }
.share-ico-plain svg { width: .9rem; height: .9rem; }
.share-ico-linkedin { background: #0a66c2; }
.share-ico-facebook { background: #1877f2; font-family: Arial, sans-serif; font-size: 1rem; }
.share-ico-x { background: #000; }
.share-ico-whatsapp { background: #25d366; }
.share-email-form { display: grid; gap: .5rem; padding: .25rem .9rem .8rem; width: 16rem; }
.share-email-form[hidden] { display: none; }
.share-email-form label { display: grid; gap: .2rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.share-email-form input { font: inherit; font-weight: 400; color: var(--text); padding: .4rem .6rem; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); }
.share-note { margin: 0; font-size: .78rem; color: var(--muted); }

/* Title autocomplete */
.suggest {
    position: absolute;
    z-index: 30;
    top: calc(100% + .4rem);
    left: 0;
    right: 0;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: .4rem;
    margin: 0;
    list-style: none;
}
.suggest[hidden] { display: none; }
.suggest li {
    padding: .5rem .8rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.suggest li svg { width: .9rem; height: .9rem; color: var(--muted); flex: none; }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.suggest mark { background: none; color: inherit; font-weight: 700; }

/* Places index: the cities inside a region, inline under its card. */
.card-grid ul.child-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .7rem; color: var(--muted); font-size: .9rem; }
.card-grid ul.child-list li { border: 0; padding: 0; box-shadow: none; background: none; }
.card-grid ul.child-list li:hover { border: 0; box-shadow: none; }
.card-grid ul.child-list a { color: inherit; }

/* Admin: manual email confirmation beside the "unconfirmed" badge. */
.confirm-form { display: flex; gap: .4rem; margin-top: .4rem; }
.confirm-form input { min-width: 12rem; }