/* =====================================================================
   yournextjob — design system  ·  "Soft premium"
   Warm-white, airy, refined indigo accent, mobile-first.
   CSS variables only — never hardcode hex in markup.
   ===================================================================== */

:root{
  /* Brand */
  --accent:#6D5CFF; --accent-strong:#5A45E8; --accent-050:#EFECFF; --link:#4E37D6;
  --ink:#211E2E; --ink-2:#605C6B; --ink-3:#6E6A7A;
  /* Decorative-only muted (icons, dividers) — not for text that must pass AA. */
  --ink-faint:#9995A6;
  --page:#FBFAF8; --card:#FFFFFF; --line:#ECE9F5; --line-2:#E4E0F0;
  --apply:#12B981; --apply-text:#0F6E56; --apply-050:#E1F5EE;
  --skip:#B6B2C4; --red:#E24B4A; --red-strong:#A32D2D; --red-050:#FBECEC; --amber:#D99413; --amber-050:#FBF3E0;

  /* Type */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --text-xs:.8125rem; --text-sm:.9rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:3.75rem;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem;

  /* Radius */
  --radius-sm:9px; --radius:14px; --radius-lg:20px; --radius-xl:26px; --radius-pill:999px;

  /* Shadow (soft, low-contrast) */
  --shadow-sm:0 1px 2px rgba(33,30,46,.05);
  --shadow-md:0 8px 28px rgba(33,30,46,.08);
  --shadow-lg:0 20px 48px rgba(33,30,46,.12);
  --focus-ring:0 0 0 3px rgba(109,92,255,.34);

  /* Layout */
  --container:1120px; --container-narrow:760px;

  /* Z */
  --z-dropdown:1000; --z-sticky:1020; --z-banner:1030; --z-modal:1050; --z-toast:1080;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; font-family:var(--font-sans); font-size:var(--text-base); line-height:1.6;
  color:var(--ink); background:var(--page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font-family:inherit; }
h1,h2,h3,h4{ margin:0 0 var(--space-4); line-height:1.1; letter-spacing:-.02em; font-weight:600; color:var(--ink); }
h1{ font-size:var(--text-4xl); } h2{ font-size:var(--text-2xl); } h3{ font-size:var(--text-xl); }
p{ margin:0 0 var(--space-4); }
/* Transparent outline is invisible normally but forced-colors (Windows High
   Contrast) promotes it to a real focus ring, so keyboard focus never vanishes. */
:focus-visible{ outline:2px solid transparent; outline-offset:2px; box-shadow:var(--focus-ring); border-radius:var(--radius-sm); }

.skip-link{ position:absolute; left:var(--space-4); top:-60px; z-index:var(--z-toast); background:var(--accent); color:#fff; padding:.7rem 1.1rem; border-radius:var(--radius); font-weight:600; transition:top .15s ease; }
.skip-link:focus{ top:var(--space-3); text-decoration:none; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--space-5); }
.container-narrow{ max-width:var(--container-narrow); }
.section{ padding:var(--space-16) 0; }
.eyebrow{ font-size:var(--text-sm); font-weight:600; color:var(--link); letter-spacing:.02em; margin:0 0 var(--space-2); }
.lead{ font-size:var(--text-lg); color:var(--ink-2); }
.muted{ color:var(--ink-2); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:.7rem 1.15rem; border-radius:var(--radius); border:1px solid var(--line-2);
  background:var(--card); color:var(--ink); font-weight:600; font-size:var(--text-sm);
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn:hover{ text-decoration:none; box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.btn-accent{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-strong); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-lg{ padding:.9rem 1.5rem; font-size:var(--text-base); border-radius:var(--radius); }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:var(--z-sticky); background:var(--header-bg);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); }
.site-header .container{ display:flex; align-items:center; gap:var(--space-6); height:66px; }
.brand{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-xl); font-weight:600; letter-spacing:-.03em; color:var(--ink); }
.brand:hover{ text-decoration:none; }
.brand b{ color:var(--accent); font-weight:600; }
.brand__mark{ display:inline-flex; flex:none; }
.brand__mark svg{ display:block; width:26px; height:26px; }
.nav{ display:flex; align-items:center; gap:var(--space-4); margin-left:var(--space-2); }
.nav a{ color:var(--ink-2); font-weight:500; font-size:var(--text-sm); white-space:nowrap; }
.nav a:hover{ color:var(--ink); text-decoration:none; }
/* "For employers" is the other audience: sit it at the end of the nav behind a
   quiet divider AND colour it in the accent, so it visually pairs with the accent
   "Post a job" button. Colour does the audience-signalling. (.nav a is more
   specific than the class alone, so qualify the selector to win the cascade.) */
.nav a.nav__employers{ margin-left:var(--space-1); padding-left:var(--space-4); border-left:1px solid var(--line); color:var(--link); font-weight:600; }
.nav a.nav__employers:hover{ color:var(--accent-strong); }
.header-actions{ margin-left:auto; display:flex; align-items:center; gap:var(--space-3); }
.header-bell{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-pill); color:var(--ink-2); }
.header-bell:hover{ background:var(--page); color:var(--ink); text-decoration:none; }
.header-bell__dot{ position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); background:var(--red); color:#fff; font-size:11px; font-weight:700; line-height:1; }
.nav-toggle{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius); border:1px solid var(--line-2); background:var(--card); color:var(--ink); cursor:pointer; }

/* ---------- Mobile slide-in menu ---------- */
.mobile-menu{ position:fixed; inset:0; z-index:var(--z-modal); }
.mobile-menu[hidden]{ display:none; }
.mobile-menu::before{ content:""; position:absolute; inset:0; background:rgba(33,30,46,.5); }
.mobile-menu__panel{ position:absolute; top:0; right:0; bottom:0; width:min(320px,86vw);
  background:var(--card); box-shadow:var(--shadow-lg); padding:var(--space-5);
  display:flex; flex-direction:column; overflow-y:auto; }
.mobile-menu__close{ align-self:flex-end; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:0; background:none; color:var(--ink-2); cursor:pointer; border-radius:var(--radius); }
.mobile-menu__nav{ display:flex; flex-direction:column; margin:var(--space-2) 0 var(--space-5); }
.mobile-menu__nav a{ display:flex; align-items:center; min-height:52px; padding:0 var(--space-1); color:var(--ink); font-weight:600; font-size:var(--text-lg); border-bottom:1px solid var(--line); }
.mobile-menu__nav a:hover{ color:var(--accent); text-decoration:none; }

/* ---------- Hero ---------- */
.hero{ padding:var(--space-16) 0 var(--space-12); }
.hero h1{ font-size:clamp(2.4rem,6vw,var(--text-5xl)); max-width:12ch; }
.hero h1 b{ color:var(--accent); font-weight:600; }
.hero .lead{ max-width:46ch; margin-bottom:var(--space-8); }

/* Search bar */
.search-bar{ display:flex; align-items:stretch; gap:var(--space-2); background:var(--card);
  border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:var(--space-2);
  box-shadow:var(--shadow-md); max-width:640px; }
.search-field{ flex:1; display:flex; align-items:center; gap:var(--space-2); padding:0 var(--space-3); }
.search-field + .search-field{ border-left:1px solid var(--line); }
.search-field i{ color:var(--ink-faint); font-size:1.2rem; }
.search-field input{ width:100%; border:0; background:transparent; padding:.7rem 0; font-size:var(--text-base); color:var(--ink); }
.search-field input::placeholder{ color:var(--ink-3); }
.search-field input:focus{ outline:none; }
.search-bar .btn-accent{ padding:0 var(--space-6); border-radius:var(--radius); }
.hero-meta{ margin-top:var(--space-4); font-size:var(--text-sm); color:var(--ink-2); }

/* ---------- Chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.chip{ display:inline-flex; align-items:center; gap:var(--space-2); padding:.5rem .9rem;
  border-radius:var(--radius-pill); border:1px solid var(--line-2); background:var(--card);
  color:var(--ink); font-size:var(--text-sm); font-weight:500; transition:all .12s ease; }
.chip:hover{ text-decoration:none; border-color:var(--accent); color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.chip i{ color:var(--accent); font-size:1.05rem; }

/* ---------- Cards ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-6); transition:box-shadow .14s ease, transform .14s ease; }
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }

/* Value props */
.grid{ display:grid; gap:var(--space-5); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.feature .ic{ width:46px; height:46px; border-radius:var(--radius); background:var(--accent-050);
  color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:var(--space-4); }
.feature h3{ font-size:var(--text-lg); }
.feature p{ color:var(--ink-2); font-size:var(--text-sm); margin:0; }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); margin-top:var(--space-20); padding:var(--space-12) 0 var(--space-16); }
.site-footer .cols{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--space-8); }
.site-footer h4{ font-size:var(--text-sm); color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--space-3); }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:var(--space-2); }
.site-footer a{ color:var(--ink-2); font-size:var(--text-sm); }
.footer-bottom{ margin-top:var(--space-10); padding-top:var(--space-5); border-top:1px solid var(--line); font-size:var(--text-sm); color:var(--ink-3); }

/* ---------- Toast (showToast, not alert) ---------- */
.toast-wrap{ position:fixed; left:50%; bottom:calc(var(--space-6) + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:var(--z-toast); display:flex; flex-direction:column; gap:var(--space-2); }
.toast{ background:var(--ink); color:#fff; padding:.8rem 1.1rem; border-radius:var(--radius); box-shadow:var(--shadow-lg); font-size:var(--text-sm); font-weight:500; }
/* Darker fills so white toast text clears WCAG AA (4.5:1). */
.toast.success{ background:var(--apply-text); } .toast.error{ background:var(--red-strong); }

/* ---------- Mobile bottom nav ---------- */
.mobile-nav{ display:none; }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .site-footer .cols{ grid-template-columns:1fr 1fr; }
  .grid-3{ grid-template-columns:1fr; }
}
/* Collapse to the drawer while there is not comfortably room for the full nav,
   so a cramped, wrapping top bar never shows. The 6 primary links + the actions
   cluster need ~1000px inside the 1120px container. */
@media (max-width:1024px){
  .nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  /* Ghost links live in the drawer here; keep bell + Post a job + toggle. */
  .header-actions .btn-ghost{ display:none; }
}
@media (max-width:640px){
  .hero{ padding:var(--space-10) 0 var(--space-8); }
  .search-bar{ flex-direction:column; box-shadow:var(--shadow-md); }
  .search-field + .search-field{ border-left:0; border-top:1px solid var(--line); }
  .search-bar .btn-accent{ padding:.9rem; }
  /* Clear the fixed bottom nav (~60px once items are full 44px targets) with a
     comfortable buffer so the last content never tucks under it. */
  body{ padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .mobile-nav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky);
    background:var(--card); border-top:1px solid var(--line); justify-content:space-around;
    padding:var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom)); }
  .mobile-nav a{ display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ink-3); font-size:var(--text-xs); font-weight:500; }
  .mobile-nav a.active{ color:var(--accent); }
  .mobile-nav i{ font-size:1.35rem; }
}

/* =====================================================================
   Public board (Phase 2) — jobs index, job cards, detail + apply.
   Appended component styles. Mobile-first, CSS vars only.
   ===================================================================== */

/* ---------- Utilities ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Sub-navigation tab bar (employer tools / account) ---------- */
.subnav{ border-bottom:1px solid var(--line); margin-bottom:var(--space-6); }
.subnav__inner{ display:flex; gap:var(--space-1); overflow-x:auto; max-width:var(--container); margin:0 auto; padding:0 var(--space-5); scrollbar-width:none; }
.subnav__inner::-webkit-scrollbar{ display:none; }
.subnav__tab{ position:relative; display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--space-4) var(--space-3); color:var(--ink-2); font-size:var(--text-sm); font-weight:500; white-space:nowrap; border-bottom:2px solid transparent; }
.subnav__tab:hover{ color:var(--ink); text-decoration:none; }
.subnav__tab.is-active{ color:var(--link); font-weight:600; border-bottom-color:var(--accent); }
.subnav__badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:var(--radius-pill); background:var(--red); color:#fff; font-size:11px; font-weight:700; }

/* ---------- Star rating (applicant rating, reviews) ---------- */
.stars{ display:inline-flex; gap:2px; color:var(--amber); }
.stars--muted{ color:var(--line-2); }

/* ---------- Share this job block (job detail) ---------- */
.job-share{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3);
  margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--line); }
.job-share__text{ display:flex; flex-direction:column; gap:2px; }
.job-share__label{ font-size:var(--text-sm); font-weight:600; color:var(--ink); }
.job-share__more{ font-size:var(--text-sm); color:var(--link); }

/* ---------- Jobs index head ---------- */
.jobs-head{ padding:var(--space-10) 0 var(--space-6); }
.jobs-head h1{ font-size:var(--text-3xl); margin-bottom:var(--space-5); }
.search-bar--wide{ max-width:none; }

/* ---------- Board layout (sidebar + results) ---------- */
.jobs-layout{ display:flex; flex-direction:column; gap:var(--space-5); padding-bottom:var(--space-16); }
.jobs-results{ min-width:0; }

/* ---------- Licensed feed overlay (Adzuna) ----------
   Clearly separate from first-party jobs: muted card, attribution badge, links
   open out. Compliant with the API terms (badge + click-back). */
.licensed{ margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--line); }
.licensed__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-4); }
.licensed__title{ font-size:var(--text-lg); margin:0; }
.licensed__badge{ font-size:var(--text-xs); font-weight:600; color:var(--ink-2); background:var(--page); border:1px solid var(--line-2); border-radius:var(--radius); padding:.3rem .6rem; }
.licensed__badge:hover{ text-decoration:none; color:var(--ink); }
.licensed__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); }
.licensed__link{ display:block; padding:var(--space-3) var(--space-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--page); }
.licensed__link:hover{ text-decoration:none; box-shadow:var(--shadow-sm); transform:translateY(-1px); border-color:var(--line-2); }
.licensed__role{ display:block; font-weight:600; color:var(--ink); }
.licensed__meta{ display:block; font-size:var(--text-sm); color:var(--ink-2); margin-top:2px; }
.licensed__pay{ display:inline-block; font-size:var(--text-sm); font-weight:600; color:var(--apply-text); margin-top:var(--space-1); }
.licensed__note{ font-size:var(--text-xs); color:var(--ink-3); margin:var(--space-3) 0 0; }

/* ---------- Filters (collapsible <details>) ---------- */
.filters{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); }
.filters summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-4) var(--space-5); cursor:pointer; font-weight:600; list-style:none; border-radius:var(--radius-lg); }
.filters summary::-webkit-details-marker{ display:none; }
.filters summary svg{ flex:none; color:var(--ink-faint); transition:transform .15s ease; }
.filters[open] summary svg{ transform:rotate(180deg); }
.filters__body{ padding:0 var(--space-5) var(--space-5); }
.filter-group{ margin-bottom:var(--space-4); }
.filters__clear{ display:inline-block; margin-top:var(--space-4); font-size:var(--text-sm); color:var(--ink-2); }
.filters__clear:hover{ color:var(--accent); }
.check-label{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:500; cursor:pointer; }
.check-label input{ width:18px; height:18px; accent-color:var(--accent); }

/* ---------- Form controls ---------- */
.form-label{ display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2); }
.form-input,.form-select,.form-textarea{ width:100%; padding:.65rem .85rem; font-family:inherit; font-size:var(--text-base);
  color:var(--ink); background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius);
  transition:border-color .12s ease, box-shadow .12s ease; }
.form-input:focus,.form-select:focus,.form-textarea:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.form-input.error,.form-select.error,.form-textarea.error{ border-color:var(--red); }
.form-textarea{ min-height:120px; resize:vertical; }
.form-group{ margin-bottom:var(--space-5); }
.form-row{ display:grid; gap:var(--space-5) var(--space-4); }
.form-hint{ font-size:var(--text-xs); color:var(--ink-3); margin:var(--space-2) 0 0; }
.form-hint a{ color:var(--ink-2); text-decoration:underline; }
.field-error{ font-size:var(--text-sm); font-weight:500; color:var(--red); margin:var(--space-2) 0 0; }

/* ---------- Results toolbar ---------- */
.jobs-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-4); }
.jobs-count{ margin:0; font-size:var(--text-sm); color:var(--ink-2); }
.jobs-count strong{ font-size:var(--text-lg); font-weight:600; color:var(--ink); }
.jobs-sort{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--ink-2); white-space:nowrap; }
.jobs-sort .form-select{ width:auto; padding:.45rem .7rem; font-size:var(--text-sm); }

/* ---------- Job cards ---------- */
.job-list{ display:flex; flex-direction:column; gap:var(--space-4); }
.job-card{ position:relative; display:flex; gap:var(--space-4); align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5);
  transition:box-shadow .14s ease, transform .14s ease, border-color .14s ease; }
.job-card:hover,.job-card:focus-within{ box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--line-2); }
.job-card__logo,.job-card__avatar{ flex:none; width:52px; height:52px; border-radius:var(--radius); }
.job-card__logo{ object-fit:contain; background:var(--page); border:1px solid var(--line); padding:4px; }
.job-card__avatar{ display:flex; align-items:center; justify-content:center; background:var(--accent-050);
  color:var(--accent-strong); font-weight:600; font-size:var(--text-lg); }
.job-card__body{ flex:1; min-width:0; padding-right:var(--space-8); }
.job-save{ position:absolute; top:var(--space-4); right:var(--space-4); z-index:2;
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:var(--radius-pill); border:1px solid var(--line-2); background:var(--card);
  color:var(--ink-3); cursor:pointer; transition:color .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease; }
.job-save:hover{ color:var(--accent); border-color:var(--accent); box-shadow:var(--shadow-sm); }
.job-save[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); background:var(--accent-050); }
.job-head__cta{ display:flex; align-items:center; gap:var(--space-3); }
.job-save-btn[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); background:var(--accent-050); }
.job-card__badges{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-2); }
.job-card__title{ font-size:var(--text-lg); line-height:1.3; margin:0 0 var(--space-1); }
.job-card__link{ color:var(--ink); }
.job-card__link:hover{ color:var(--accent-strong); text-decoration:none; }
.job-card__link::after{ content:""; position:absolute; inset:0; border-radius:var(--radius-lg); }
.job-card__company{ margin:0 0 var(--space-2); font-size:var(--text-sm); font-weight:500; color:var(--ink-2); }
.job-card__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4); font-size:var(--text-sm); color:var(--ink-2); }
.job-card__meta span{ display:inline-flex; align-items:center; gap:var(--space-1); }
.job-card__meta svg{ flex:none; color:var(--ink-faint); }
.job-card__pay{ font-weight:600; color:var(--apply-text); }
.job-card__tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:4px; padding:.18rem .6rem; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; line-height:1.5; }
.badge-boosted{ background:var(--accent); color:#fff; }
.badge-featured{ background:var(--amber-050); color:var(--ink); border:1px solid var(--amber); }
.badge-new{ background:var(--apply-050); color:var(--apply-text); }
.badge-soft{ background:var(--page); border:1px solid var(--line-2); color:var(--ink-2); }
.badge-immediate{ background:var(--amber-050); color:var(--ink); border:1px solid var(--amber); }

/* ---------- Pagination ---------- */
.pagination{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-8); }
.pagination a,.pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px;
  padding:0 var(--space-2); border-radius:var(--radius); font-size:var(--text-sm); font-weight:500; color:var(--ink-2); }
.pagination a{ border:1px solid transparent; }
.pagination a:hover{ text-decoration:none; background:var(--card); border-color:var(--line-2); color:var(--ink); box-shadow:var(--shadow-sm); }
.pagination .is-current{ background:var(--accent); color:#fff; font-weight:600; }
.pagination__gap{ min-width:auto; color:var(--ink-3); }

/* ---------- Empty state ---------- */
.empty-state{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-12) var(--space-6); text-align:center; }
.empty-state__icon{ display:flex; align-items:center; justify-content:center; width:56px; height:56px;
  margin:0 auto var(--space-4); border-radius:var(--radius-pill); background:var(--accent-050); color:var(--accent); }
.empty-state h2{ font-size:var(--text-xl); margin-bottom:var(--space-2); }
.empty-state p{ max-width:44ch; margin:0 auto var(--space-6); color:var(--ink-2); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2);
  padding:var(--space-6) 0 var(--space-4); font-size:var(--text-sm); color:var(--ink-3); }
.breadcrumb a{ color:var(--ink-2); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb__sep{ color:var(--ink-faint); }
.breadcrumb__current{ color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:36ch; }

/* ---------- Job detail ---------- */
.job-detail{ max-width:820px; margin:0 auto; padding-bottom:var(--space-16); }
.job-detail > .card{ margin-bottom:var(--space-5); }
.job-head h1{ font-size:clamp(1.6rem, 4.5vw, var(--text-3xl)); margin-bottom:var(--space-2); }
.job-head__badges{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
.job-head__company{ font-size:var(--text-lg); color:var(--ink-2); margin:0 0 var(--space-4); }
.job-head__facts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-bottom:var(--space-5); }
.job-head__pay{ font-size:var(--text-lg); font-weight:600; color:var(--apply-text); margin-right:var(--space-2); }
.job-head__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4);
  border-top:1px solid var(--line); padding-top:var(--space-5); }
.job-head__posted{ margin:0; font-size:var(--text-sm); color:var(--ink-3); }

.job-section h2{ font-size:var(--text-xl); margin-bottom:var(--space-4); }
.job-section__sub{ margin-top:var(--space-8); }
.prose p{ margin:0 0 var(--space-4); }
.prose p:last-child{ margin-bottom:0; }
.prose h2,.prose h3,.prose h4{ font-size:var(--text-lg); margin:var(--space-6) 0 var(--space-3); }
.prose ul,.prose ol{ margin:0 0 var(--space-4); padding-left:1.25rem; }
.prose li{ margin-bottom:var(--space-1); }
.prose blockquote{ margin:0 0 var(--space-4); padding:var(--space-2) var(--space-4); border-left:3px solid var(--line-2); color:var(--ink-2); }
.prose table{ width:100%; border-collapse:collapse; margin-bottom:var(--space-4); font-size:var(--text-sm); }
.prose th,.prose td{ border:1px solid var(--line-2); padding:var(--space-2) var(--space-3); text-align:left; }
.job-ref{ margin:var(--space-6) 0 0; padding-top:var(--space-4); border-top:1px solid var(--line);
  font-size:var(--text-sm); color:var(--ink-3); }

/* ---------- Apply ---------- */
.apply-form h2,.apply-out h2{ font-size:var(--text-xl); }
.apply-out{ text-align:center; padding:var(--space-8) var(--space-6); }
.apply-out .muted{ max-width:48ch; margin:0 auto var(--space-5); }
.apply-out .form-hint{ margin-top:var(--space-3); }
.job-related h2{ font-size:var(--text-xl); margin-bottom:var(--space-4); }

/* ---------- Board responsive ---------- */
@media (min-width:640px){
  .form-row{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  .jobs-layout{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:var(--space-8); align-items:start; }
  .jobs-side{ position:sticky; top:calc(66px + var(--space-4)); }
}

/* =====================================================================
   Mobile / touch tap-comfort layer
   Every interactive control clears the 44px minimum touch target
   (WCAG 2.5.5 / Apple HIG). Scoped to touch breakpoints so the desktop
   layout is unchanged. Tokens only — px used only for structural
   heights/offsets, matching the existing 66px/56px layout literals.
   ===================================================================== */
@media (max-width:820px){
  /* Buttons — consistent, comfortable heights across touch devices. */
  .btn{ min-height:44px; }
  .btn-lg{ min-height:48px; }

  /* Form controls — comfortably tappable. Textarea keeps its taller min. */
  .form-input,.form-select{ min-height:46px; }

  /* Chips act as tappable filters/links. */
  .chip{ min-height:44px; padding:.55rem 1rem; }

  /* Pagination — full targets; the "…" gap keeps its auto width. */
  .pagination a,.pagination span{ height:44px; }
  .pagination a,.pagination .is-current{ min-width:44px; }

  /* Sub-navigation tabs (employer tools / account / reports). */
  .subnav__tab{ min-height:44px; }

  /* Icon button — header notification bell. */
  .header-bell{ width:44px; height:44px; }

  /* Filters — the disclosure toggle and each checkbox row. */
  .filters summary{ min-height:44px; }
  .check-label{ min-height:44px; }
}

@media (max-width:640px){
  /* Bottom nav — each item a full-height, evenly spread target.
     Item height 44 + nav padding (2*space-2) => ~60px bar (see body pad above). */
  .mobile-nav a{ flex:1; min-height:44px; justify-content:center; padding:var(--space-1); }

  /* Stacked hero search — tall thumb-friendly rows + full-width CTA. */
  .search-bar .search-field{ min-height:50px; }
  .search-bar .btn-accent{ min-height:48px; }

  /* "Clear all" filter reset as a real target, not a hairline link. */
  .filters__clear{ display:inline-flex; align-items:center; min-height:44px; }

  /* Wide rich-text tables scroll inside themselves, never the page. */
  .prose table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* =====================================================================
   Colourful backdrops — reusable, tokens only.
   Namespaced .bg-* utilities for a warm brand mesh (heroes) and soft
   full-bleed section tints. Each layer is a solid token tint fading to
   `transparent`, so the effect stays low-opacity without hardcoded alpha.
   ===================================================================== */
.bg-mesh{
  background-color:var(--page);
  background-image:
    radial-gradient(46% 42% at 12% 8%,  var(--accent-050) 0%, transparent 60%),
    radial-gradient(42% 40% at 92% 6%,  var(--apply-050)  0%, transparent 62%),
    radial-gradient(40% 44% at 4% 90%,  var(--accent-050) 0%, transparent 60%);
  background-repeat:no-repeat;
}
.bg-tint-warm{ background:linear-gradient(180deg, var(--amber-050) 0%, var(--page) 82%); }
.bg-tint-accent{ background:linear-gradient(180deg, var(--accent-050) 0%, var(--page) 82%); }

/* =====================================================================
   Mobile overflow guard — long unbroken strings must wrap, never scroll.
   A single un-spaced token (a pasted URL, a run-on company name, a licensed
   feed title) is the one thing that can force a 360px page to scroll
   sideways. These are pure wrapping rules on text that already lives in
   min-width:0 flex/grid cells, so normal-length copy and the desktop
   layout are completely unaffected.
   ===================================================================== */
.job-card__title, .job-card__company,
.licensed__role, .licensed__meta,
.job-head h1, .job-head__company{ overflow-wrap:break-word; }

/* ---- Scam Shield (job detail safety note + report) ---------------------- */
.scamshield { margin-top: var(--space-6); }
.scamshield__note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-subtle, var(--page)); font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5; }
.scamshield__note svg { color: var(--green, var(--accent)); flex: none; margin-top: 2px; }
.scamshield__note strong { color: var(--ink); }
.scamshield__report { margin-top: var(--space-2); }
.scamshield__report > summary { cursor: pointer; font-size: var(--text-sm); color: var(--ink-3); padding: var(--space-2) 0; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.scamshield__report > summary::-webkit-details-marker { display: none; }
.scamshield__report > summary::before { content: "\26A0"; font-size: 13px; }
.scamshield__report > summary:hover { color: var(--link); }
.scamshield__form { display: flex; flex-direction: column; gap: var(--space-2); max-width: 460px; margin-top: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.scamshield__form .btn { align-self: flex-start; margin-top: var(--space-1); }

/* ---- Scam Shield leaving interstitial ---------------------------------- */
.leaving { max-width: 620px; padding-top: var(--space-10); padding-bottom: var(--space-16); }
.leaving__card { text-align: center; padding: var(--space-8) var(--space-6); }
.leaving__icon { color: var(--amber, #d99000); display: flex; justify-content: center; margin-bottom: var(--space-3); }
.leaving__card h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.leaving__lead { color: var(--ink-2); font-size: var(--text-lg); margin: 0 auto var(--space-5); max-width: 44ch; }
.leaving__rule { text-align: left; background: var(--amber-050, var(--page)); border: 1px solid var(--amber, var(--line)); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); font-size: var(--text-sm); }
.leaving__rule ul { margin: var(--space-2) 0; padding-left: var(--space-5); color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.leaving__muted { color: var(--ink-3); font-size: var(--text-sm); margin: var(--space-2) 0 0; }
.leaving__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.leaving__report { margin: 0; }
.leaving__reportbtn { background: none; border: 0; color: var(--red-strong, var(--red)); font-size: var(--text-sm); cursor: pointer; text-decoration: underline; font-family: inherit; }

/* ============================================================================
   PREMIUM FOUNDATION — motion, depth, skeletons, dark mode. Additive + safe;
   the light theme stays the default for everyone (dark is opt-in via toggle).
   ========================================================================== */
:root{ color-scheme:light; --skeleton-shine:rgba(255,255,255,.62); --header-bg:rgba(251,250,248,.85); }

/* Sharper headings read more considered. */
h1,h2,h3{ letter-spacing:-.015em; }

/* Clear, on-brand keyboard focus everywhere. */
a:focus-visible,button:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); }

@media (prefers-reduced-motion: no-preference){
  /* Smooth cross-page navigation where supported (progressive enhancement). */
  @view-transition{ navigation:auto; }
  html{ scroll-behavior:smooth; }
  /* Scroll-reveal: content arrives, it doesn't just appear. Opt-in via data-reveal.
     Gated on .js so content is NEVER hidden when JavaScript is off/blocked. */
  .js [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
  .js [data-reveal].is-in{ opacity:1; transform:none; }
  .js [data-reveal][data-reveal-delay="1"]{ transition-delay:.08s; }
  .js [data-reveal][data-reveal-delay="2"]{ transition-delay:.16s; }
  .js [data-reveal][data-reveal-delay="3"]{ transition-delay:.24s; }
}

/* Skeleton loader — show the SHAPE of content, never a blank flash. */
.skeleton{ position:relative; overflow:hidden; background:var(--line); border-radius:var(--radius); min-height:1em; }
.skeleton--text{ height:.8em; margin:.35em 0; border-radius:6px; }
.skeleton--w70{ width:70%; } .skeleton--w40{ width:40%; }
.skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,var(--skeleton-shine),transparent); transform:translateX(-100%); animation:yjn-shimmer 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .skeleton::after{ animation:none; } }
@keyframes yjn-shimmer{ 100%{ transform:translateX(100%); } }

/* ---- Dark mode (opt-in; remaps the semantic tokens the whole app already uses) ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --accent:#8B78FF; --accent-strong:#A091FF; --accent-050:#221F33; --link:#AC9FFF;
  --ink:#ECEAF4; --ink-2:#B7B2C6; --ink-3:#9A95AA; --ink-faint:#726D80;
  --page:#131218; --card:#1C1A24; --line:#2B2936; --line-2:#37333F;
  --apply:#2FD39A; --apply-text:#8DEFCC; --apply-050:#13291F;
  --red:#F26E6D; --red-strong:#FF9E9D; --red-050:#2E1A1B; --amber:#E8AB3E; --amber-050:#2C2413;
  --skip:#4A4658; --skeleton-shine:rgba(255,255,255,.06); --header-bg:rgba(20,19,26,.82);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 10px 30px rgba(0,0,0,.5); --shadow-lg:0 24px 56px rgba(0,0,0,.62);
  --focus-ring:0 0 0 3px rgba(139,120,255,.42);
}

/* Theme toggle button (sun/moon), matches the ghost-button language. */
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-pill); border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); cursor:pointer; transition:color .2s,border-color .2s,background .2s,transform .2s; }
.theme-toggle:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle__moon{ display:none; }
:root[data-theme="dark"] .theme-toggle__sun{ display:none; }
:root[data-theme="dark"] .theme-toggle__moon{ display:block; }

/* ---- Job card polish (Phase 2): make salary pop, delight the save, refine hover ---- */
.job-card__pay{ background:var(--apply-050); color:var(--apply-text); font-weight:700; padding:2px 10px; border-radius:var(--radius-pill); }
/* A stated figure earns the green pill; "Competitive" stays quiet + honest. */
.job-card__pay--soft{ background:transparent; color:var(--ink-3); font-weight:600; padding:0; }
/* Title grows an accent underline on hover — a small, considered flourish. */
.job-card__title a{ background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100% / 0% 2px; transition:background-size .3s cubic-bezier(.22,1,.36,1); }
.job-card:hover .job-card__title a,.job-card__title a:hover,.job-card__title a:focus-visible{ background-size:100% 2px; }
/* Satisfying pop when a job is saved (fires on the JS-added .is-saved class). */
.job-save svg{ transition:transform .2s ease; }
@media (prefers-reduced-motion: no-preference){
  .job-save.is-saved svg{ animation:yjn-save-pop .42s cubic-bezier(.2,1.5,.5,1); }
  @keyframes yjn-save-pop{ 0%{ transform:scale(1); } 35%{ transform:scale(1.45); } 100%{ transform:scale(1); } }
}

/* Salary-insight callout on the job detail — the market benchmark, seeker-facing.
   Sits on its own line under the facts so it reads as a clean, single-line note. */
.pay-insight{ display:inline-flex; align-items:center; gap:8px; margin-top:var(--space-3); padding:8px 14px; border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:600; line-height:1.4; max-width:100%; }
.pay-insight svg{ flex:none; opacity:.85; }
.pay-insight--good{ background:var(--apply-050); color:var(--apply-text); }
.pay-insight--ok{ background:var(--accent-050); color:var(--link); }
.pay-insight--low{ background:var(--amber-050); color:var(--amber); }

/* ---- Mobile header: keep "Post a job" on one line; dark toggle moves to the drawer ---- */
.header-actions .btn{ white-space:nowrap; }
@media (max-width:640px){
  .header-actions{ gap:var(--space-2); }
  .header-actions .btn-accent{ padding:.5rem .85rem; font-size:var(--text-sm); line-height:1.2; }
  .header-actions .theme-toggle{ display:none; } /* it lives in the drawer on mobile instead */
  /* Sort row: stack the count above the sort control and let the select flex so
     the "Go" button is never clipped off the right edge. */
  .jobs-toolbar{ flex-direction:column; align-items:stretch; gap:var(--space-2); }
  .jobs-sort{ justify-content:flex-start; }
  .jobs-sort .form-select{ flex:1 1 auto; min-width:0; }
}
/* The dark-mode toggle rendered as a row inside the mobile drawer. */
.mobile-menu__theme{ display:flex; align-items:center; gap:var(--space-3); min-height:52px; padding:0 var(--space-1); width:100%; background:none; border:0; border-bottom:1px solid var(--line); color:var(--ink); font-weight:600; font-size:var(--text-lg); cursor:pointer; }