/* =====================================================================
   yournextjob — account area
   Jobseeker dashboard, saved jobs and applications. Tokens only.
   ===================================================================== */

.account{ padding:var(--space-8) var(--space-5) var(--space-16); }
.account-layout{ display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:start; }

/* ---------- Sidebar ---------- */
.account-side__card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-4); box-shadow:var(--shadow-sm);
}
.account-user{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-2) var(--space-4); }
.account-user__avatar{
  flex:none; width:44px; height:44px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-050); color:var(--accent-strong); font-weight:600; font-size:var(--text-lg);
}
.account-user__meta{ min-width:0; display:flex; flex-direction:column; }
.account-user__name{ font-weight:600; color:var(--ink); font-size:var(--text-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.account-user__email{ font-size:var(--text-xs); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.account-nav{ display:flex; flex-direction:column; gap:2px; }
.account-nav a{
  display:flex; align-items:center; gap:var(--space-3);
  padding:.6rem var(--space-3); border-radius:var(--radius);
  color:var(--ink-2); font-size:var(--text-sm); font-weight:500;
  transition:background .12s ease, color .12s ease;
}
.account-nav a:hover{ background:var(--page); color:var(--ink); text-decoration:none; }
.account-nav a svg{ flex:none; color:var(--ink-faint); }
.account-nav a.is-active{ background:var(--accent-050); color:var(--accent-strong); font-weight:600; }
.account-nav a.is-active svg{ color:var(--accent); }
.account-nav__count{
  margin-left:auto; min-width:22px; height:20px; padding:0 6px; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--page); border:1px solid var(--line-2); color:var(--ink-2);
  font-size:var(--text-xs); font-weight:600;
}
.account-nav a.is-active .account-nav__count{ background:var(--card); border-color:var(--accent); color:var(--accent-strong); }
.account-nav--sub a{ color:var(--ink-3); }
.account-side__rule{ border:0; border-top:1px solid var(--line); margin:var(--space-3) 0; }
.account-signout{ margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--line); }
.account-signout .btn{ color:var(--ink-2); }
.account-signout .btn:hover{ color:var(--red-strong); }

/* ---------- Main column ---------- */
.account-main{ min-width:0; display:flex; flex-direction:column; gap:var(--space-8); }
.account-head h1{ font-size:var(--text-2xl); margin-bottom:var(--space-1); }
.account-head p{ margin:0; }

/* Stats */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.stat-card{
  display:flex; flex-direction:column; gap:var(--space-1);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-5); color:var(--ink);
  transition:box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
.stat-card:hover{ text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--line-2); }
.stat-card__num{ font-size:var(--text-3xl); font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--ink); }
.stat-card__label{ font-size:var(--text-sm); color:var(--ink-2); }

/* Profile summary */
.profile-card__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.profile-card__head h2{ font-size:var(--text-lg); margin:0; }
.profile-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4) var(--space-6); margin:0; }
.profile-facts div{ min-width:0; }
.profile-facts dt{ font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); margin-bottom:2px; }
.profile-facts dd{ margin:0; font-size:var(--text-sm); color:var(--ink); font-weight:500; word-break:break-word; }

/* Section headers within the main column */
.account-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.account-section-head h2{ font-size:var(--text-xl); margin:0; }
.account-link-more{ font-size:var(--text-sm); font-weight:500; color:var(--accent-strong); white-space:nowrap; }

.empty-state--soft{ padding:var(--space-8) var(--space-6); }
.empty-state--soft h3{ font-size:var(--text-lg); margin-bottom:var(--space-2); }
.empty-state--soft p{ max-width:42ch; margin:0 auto var(--space-5); color:var(--ink-2); }

/* ---------- Saved jobs ---------- */
.saved-list{ display:flex; flex-direction:column; gap:var(--space-4); }
.saved-item{ position:relative; }
/* Reserve room on the card so the title/badges never run under the remove button. */
.saved-item > .job-card{ padding-right:calc(var(--space-5) + 104px); }
.saved-remove{
  position:absolute; top:var(--space-4); right:var(--space-4); z-index:2;
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:.35rem .7rem; border-radius:var(--radius-pill);
  border:1px solid var(--line-2); background:var(--card); color:var(--ink-2);
  font-size:var(--text-xs); font-weight:600; cursor:pointer;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
}
.saved-remove:hover{ color:var(--red-strong); border-color:var(--red); background:var(--red-050); }
.saved-remove:disabled{ opacity:.55; cursor:default; }
.saved-remove svg{ flex:none; }
.saved-item__note{
  margin:var(--space-2) 0 0; padding:var(--space-2) var(--space-4);
  font-size:var(--text-xs); color:var(--amber); background:var(--amber-050);
  border-radius:var(--radius-sm);
}

/* ---------- Applications + recent lists ---------- */
.app-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.app-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-4) var(--space-5);
}
.app-list--full .app-item{ border-radius:var(--radius-lg); }
.app-item__main{ min-width:0; }
.app-item__topline{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2) var(--space-3); }
.app-item__title{ font-size:var(--text-base); font-weight:600; color:var(--ink); }
.app-item__title:hover{ color:var(--accent-strong); text-decoration:none; }
.app-item__swipe{ font-weight:600; }
.app-item__sub{ margin:var(--space-1) 0 0; font-size:var(--text-sm); color:var(--ink-2); }
.app-item__date{ margin:var(--space-1) 0 0; font-size:var(--text-xs); color:var(--ink-3); }
.app-item__side{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-2); text-align:right; }
.app-item__view{ font-size:var(--text-sm); font-weight:500; color:var(--accent-strong); }
.app-item__closed{ font-size:var(--text-xs); color:var(--ink-faint); }

/* Status pills */
.app-status{
  display:inline-flex; align-items:center; padding:.24rem .7rem; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; white-space:nowrap; border:1px solid transparent;
}
.app-status.is-new{ background:var(--accent-050); color:var(--accent-strong); }
.app-status.is-viewed{ background:var(--amber-050); color:var(--ink); border-color:var(--amber); }
.app-status.is-shortlisted{ background:var(--apply-050); color:var(--apply-text); }
.app-status.is-rejected{ background:var(--red-050); color:var(--red-strong); }

/* ---------- Responsive ---------- */
@media (min-width:900px){
  .account-layout{ grid-template-columns:260px minmax(0,1fr); gap:var(--space-8); }
  .account-side{ position:sticky; top:calc(66px + var(--space-4)); }
}

@media (max-width:899px){
  .account-nav{ flex-direction:row; overflow-x:auto; gap:var(--space-2); padding-bottom:2px; -webkit-overflow-scrolling:touch; }
  .account-nav a{ white-space:nowrap; min-height:44px; }
  .account-nav__count{ margin-left:var(--space-1); }
  .account-nav--sub{ flex-wrap:wrap; overflow:visible; }
  .stat-card__num{ font-size:var(--text-2xl); }
}

@media (max-width:560px){
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .stat-grid > :first-child{ grid-column:1 / -1; }
  .profile-facts{ grid-template-columns:1fr; }
  .app-item{ flex-direction:column; }
  .app-item__side{ flex-direction:row; align-items:center; align-self:stretch; justify-content:space-between; text-align:left; width:100%; }
  .saved-remove span{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .saved-remove{ min-width:44px; min-height:44px; justify-content:center; padding:.4rem; }
  .saved-item > .job-card{ padding-right:calc(var(--space-5) + 48px); }
}
/* =====================================================================
   yournextjob — admin moderation views (AdminController).
   NEW page stylesheet, auto-loaded by the layout glob. Namespaced .adx-*
   so nothing leaks into public pages. Tokens only, no hardcoded colour.
   Complements the shared .admin-* components in pages/admin.css.
   ===================================================================== */

/* ---------- Compact buttons for dense moderation tables ---------- */
.adx-sm { padding: .4rem .75rem; font-size: var(--text-xs); }
.adx-approve { background: var(--apply-050); border-color: transparent; color: var(--apply-text); }
.adx-approve:hover { background: var(--apply-050); }
.adx-reject { background: var(--red-050); border-color: transparent; color: var(--red-strong); }
.adx-reject:hover { background: var(--red-050); }

/* ---------- Status filter tabs (jobs queue) ---------- */
.adx-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.adx-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  border: 1px solid var(--line-2); background: var(--card);
  color: var(--ink-2); font-size: var(--text-sm); font-weight: 600;
}
.adx-tab:hover { color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); }
.adx-tab.is-active { background: var(--accent-050); border-color: transparent; color: var(--link); }
.adx-tab__count { font-size: var(--text-xs); color: var(--ink-3); font-weight: 600; }
.adx-tab.is-active .adx-tab__count { color: var(--accent); }

/* ---------- Inline reject form inside a table row ---------- */
.adx-inline { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.adx-inline .form-input { max-width: 190px; padding: .4rem .6rem; font-size: var(--text-xs); }

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

/* ---------- Review moderation cards ---------- */
.adx-review__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.adx-review__who { font-weight: 600; color: var(--ink); }
.adx-review__meta { font-size: var(--text-sm); color: var(--ink-2); margin: 0 0 var(--space-2); }
.adx-review__meta a { font-weight: 600; }
.adx-review__title { font-size: var(--text-base); font-weight: 600; margin: 0 0 var(--space-1); }
.adx-review__body { color: var(--ink); margin: 0 0 var(--space-3); white-space: pre-line; }
.adx-review__pc { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (min-width: 640px) { .adx-review__pc { grid-template-columns: 1fr 1fr; } }
.adx-review__pc h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin: 0 0 2px; }
.adx-review__pc p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); white-space: pre-line; }

/* ---------- Recent-activity feed (overview aside) ---------- */
.adx-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.adx-feed__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.adx-feed__item:last-child { border-bottom: 0; padding-bottom: 0; }
.adx-feed__item:first-child { padding-top: 0; }
.adx-feed__main { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.adx-feed__action { font-size: var(--text-xs); font-weight: 600; color: var(--ink); background: var(--page); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 1px var(--space-2); }
.adx-feed__target { font-size: var(--text-sm); color: var(--ink-2); }
.adx-feed__meta { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--ink-3); }

/* ---------- Small helpers ---------- */
.adx-muted { color: var(--ink-2); }
.adx-nowrap { white-space: nowrap; }
.adx-count { color: var(--ink-2); font-size: var(--text-sm); }
/* =====================================================================
   yournextjob — back-office (admin / CSM / support) shell + components.
   Namespaced .admin-* so the global stylesheet glob never leaks into
   public pages. Tokens only, soft-premium.
   ===================================================================== */

.admin-body { background: var(--page); }

/* ---------- Shell ---------- */
.admin-shell { display: block; min-height: 100vh; }
.admin-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: 248px; z-index: var(--z-sticky);
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--card); border-right: 1px solid var(--line); overflow-y: auto;
}
.admin-main { margin-left: 248px; min-height: 100vh; padding: var(--space-8) var(--space-8) var(--space-16); }
.admin-main > main { max-width: 1080px; margin: 0 auto; }

.admin-nav__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.admin-nav__brand:hover { text-decoration: none; }
.admin-nav__brand b { color: var(--accent); }
.admin-nav__brand .brand__mark svg { width: 24px; height: 24px; display: block; }
.admin-nav__role { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.admin-nav__group { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-nav__label { margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.admin-nav__link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  color: var(--ink-2); font-size: var(--text-sm); font-weight: 500;
  background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
}
.admin-nav__link:hover { background: var(--page); color: var(--ink); text-decoration: none; }
.admin-nav__link.is-active { background: var(--accent-050); color: var(--link); font-weight: 600; }
.admin-nav__ic { display: inline-flex; color: var(--ink-faint); }
.admin-nav__link.is-active .admin-nav__ic { color: var(--accent); }
.admin-nav__foot { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.admin-nav__logout { color: var(--red-strong); }

/* ---------- Page header ---------- */
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.admin-head h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-1); }
.admin-head p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.admin-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Stat tiles ---------- */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.admin-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.admin-stat__label { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--ink-2); }
.admin-stat__value { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.admin-stat__sub { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.admin-stat--accent { background: linear-gradient(135deg, var(--accent-050), var(--card) 80%); }

/* ---------- Cards ---------- */
.admin-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5); }
.admin-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.admin-card__head h2 { font-size: var(--text-lg); margin: 0; }

/* ---------- Tables ---------- */
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.admin-table th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: var(--page); }
.admin-table__muted { color: var(--ink-2); }
.admin-table__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ---------- Status pills ---------- */
.admin-pill { display: inline-flex; align-items: center; gap: 4px; padding: .18rem .6rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }
.admin-pill--live, .admin-pill--approved, .admin-pill--active, .admin-pill--closed-ok { background: var(--apply-050); color: var(--apply-text); }
.admin-pill--pending, .admin-pill--open { background: var(--amber-050); color: var(--ink); border: 1px solid var(--amber); }
.admin-pill--rejected, .admin-pill--suspended { background: var(--red-050); color: var(--red-strong); }
.admin-pill--neutral { background: var(--page); border: 1px solid var(--line-2); color: var(--ink-2); }

/* ---------- Forms in the back office ---------- */
.admin-form { display: grid; gap: var(--space-5); }
.admin-form .form-row { grid-template-columns: 1fr 1fr; }
.admin-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }

/* ---------- Campaign performance ---------- */
.admin-num { text-align: right; white-space: nowrap; }
.camp-trend { }
.camp-trend__svg { width: 100%; height: 120px; display: block; }
.camp-trend__axis { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-2); }
.camp-bar { height: 5px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; margin: 4px 0 2px; max-width: 120px; }
.camp-bar span { display: block; height: 100%; background: var(--accent); }
.admin-plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.admin-plain-list li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Empty ---------- */
.admin-empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--ink-2); }
.admin-empty h2 { font-size: var(--text-lg); color: var(--ink); margin-bottom: var(--space-2); }

/* ---------- Two-column detail ---------- */
.admin-split { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .admin-split { grid-template-columns: minmax(0,1fr) 320px; align-items: start; } }

/* ---------- Scraper monitor (namespaced .scr-*) ---------- */
.scr-status { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); font-size: var(--text-sm); color: var(--ink-2); }
.scr-status__dot { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--apply); box-shadow: 0 0 0 0 var(--apply-050); animation: scr-pulse 2s ease-out infinite; }
.scr-status__at { margin-left: var(--space-1); }
@keyframes scr-pulse { 0% { box-shadow: 0 0 0 0 var(--apply-050); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Progress bars */
.scr-progress { display: flex; flex-direction: column; gap: var(--space-5); }
.scr-progress__row { display: flex; flex-direction: column; gap: var(--space-2); }
.scr-progress__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--ink); flex-wrap: wrap; }
.scr-progress__label .muted { font-weight: 500; }
.scr-bar { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.scr-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width .4s ease; }
.scr-fill--alt { background: var(--apply); }

/* ETA copy */
.scr-eta { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-2); }
.scr-eta__line { margin: 0; font-size: var(--text-sm); color: var(--ink-2); }
.scr-eta__line strong { color: var(--ink); }
.scr-eta__note { margin: var(--space-1) 0 0; font-size: var(--text-xs); }

/* Live columns */
.scr-live { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
@media (min-width: 760px) { .scr-live { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scr-col { margin-bottom: 0; }
.scr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-height: 420px; overflow-y: auto; }
.scr-item { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--page); }
.scr-item__top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.scr-item__name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); word-break: break-word; flex: 1 1 auto; min-width: 0; }
.scr-item__type { flex: 0 0 auto; }
.scr-item__count { flex: 0 0 auto; font-size: var(--text-xs); font-weight: 700; color: var(--apply-text); }
.scr-item__meta { margin-top: 2px; font-size: var(--text-xs); color: var(--ink-2); }
.scr-item__note { margin-top: 2px; font-size: var(--text-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-empty { padding: var(--space-5) var(--space-3); text-align: center; font-size: var(--text-sm); color: var(--ink-3); }

.scr-foot { font-size: var(--text-xs); margin-top: var(--space-4); }

/* Run-button spinner */
.scr-spin { width: 14px; height: 14px; border-radius: var(--radius-pill); border: 2px solid var(--line-2); border-top-color: var(--accent); animation: scr-rotate .7s linear infinite; }
.btn-accent .scr-spin { border-color: var(--accent-050); border-top-color: #fff; }
@keyframes scr-rotate { to { transform: rotate(360deg); } }

/* =====================================================================
   Agency-discovery pipeline (namespaced .pipe-*). Plain-English, visual.
   Stage colours: new=accent(blue), scraping=green, listed=amber,
   no_website=grey, unreachable=red. Tokens only.
   ===================================================================== */

.pipe-headline { margin: 0 0 var(--space-4); font-size: var(--text-xl); font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.pipe-headline strong { font-weight: 700; color: var(--accent); }

/* Stage dot + bar-fill colours (shared) */
.pipe-dot { width: 9px; height: 9px; border-radius: var(--radius-pill); display: inline-block; flex: 0 0 auto; background: var(--line-2); }
.pipe-dot--new         { background: var(--accent); }
.pipe-dot--scraping    { background: var(--apply); }
.pipe-dot--listed      { background: var(--amber); }
.pipe-dot--no_website  { background: var(--skip); }
.pipe-dot--unreachable { background: var(--red); }

.pipe-track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.pipe-track--lg { height: 12px; }
.pipe-track__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--accent); transition: width .4s ease; }
.pipe-fill--new         { background: var(--accent); }
.pipe-fill--scraping    { background: var(--apply); }
.pipe-fill--listed      { background: var(--amber); }
.pipe-fill--no_website  { background: var(--skip); }
.pipe-fill--unreachable { background: var(--red); }

/* Stage funnel */
.pipe-funnel { display: flex; flex-direction: column; gap: var(--space-5); }
.pipe-stage { display: flex; flex-direction: column; gap: var(--space-2); }
.pipe-stage__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.pipe-stage__name { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.pipe-stage__nums { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.pipe-stage__count { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pipe-stage__pct { font-size: var(--text-sm); }
.pipe-stage__next { margin: 0; font-size: var(--text-xs); }
.pipe-stage__next strong { color: var(--apply-text); font-weight: 700; }

/* Two-engine grid */
.pipe-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
@media (min-width: 760px) { .pipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.pipe-col { margin-bottom: 0; }
.pipe-col__lead { margin: 0 0 var(--space-4); font-size: var(--text-sm); }

/* Progress blocks (feed probe + register walk) */
.pipe-progress { display: flex; flex-direction: column; gap: var(--space-2); }
.pipe-progress__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--ink); flex-wrap: wrap; }
.pipe-progress__label .muted { font-weight: 500; }

/* ETA copy */
.pipe-eta { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-sm); color: var(--ink-2); }
.pipe-eta strong { color: var(--ink); }
.pipe-eta__note { margin: 0; font-size: var(--text-xs); }

/* Run buttons */
.pipe-actions { margin-top: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pipe-actions .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Companies House callout (no key yet) */
.pipe-callout { background: var(--accent-050); border: 1px solid var(--accent); border-radius: var(--radius-lg); padding: var(--space-5); }
.pipe-callout__title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.pipe-callout__body { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--ink-2); }
.pipe-callout__link { margin: 0; font-size: var(--text-sm); word-break: break-word; }

/* "Just looked at" list */
.pipe-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pipe-recent__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; font-size: var(--text-sm); }
.pipe-recent__item:last-child { border-bottom: 0; }
.pipe-recent__name { font-weight: 600; color: var(--ink); word-break: break-word; }
.pipe-recent__town { font-size: var(--text-xs); }
.pipe-recent__jobs { font-size: var(--text-xs); font-weight: 700; color: var(--apply-text); }
.pipe-recent__ago { margin-left: auto; font-size: var(--text-xs); white-space: nowrap; }
.pipe-recent__empty { padding: var(--space-5) 0; text-align: center; color: var(--ink-3); font-size: var(--text-sm); }

/* Stage pills (funnel + recent + table) */
.pipe-pill { display: inline-flex; align-items: center; gap: 4px; padding: .18rem .6rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.pipe-pill--new         { background: var(--accent-050); color: var(--link); }
.pipe-pill--scraping    { background: var(--apply-050); color: var(--apply-text); }
.pipe-pill--listed      { background: var(--amber-050); color: var(--ink); border: 1px solid var(--amber); }
.pipe-pill--no_website  { background: var(--page); color: var(--ink-2); border: 1px solid var(--line-2); }
.pipe-pill--unreachable { background: var(--red-050); color: var(--red-strong); }

/* Stage filter tabs */
.pipe-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.pipe-tab { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
.pipe-tab:hover { background: var(--page); color: var(--ink); text-decoration: none; }
.pipe-tab.is-active { background: var(--accent-050); border-color: var(--accent); color: var(--link); font-weight: 600; }
.pipe-tab__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; flex: 0 0 auto; }
.pipe-tab__c { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-3); }
.pipe-tab.is-active .pipe-tab__c { color: var(--link); }

/* Search row */
.pipe-search { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.pipe-search .form-input { max-width: 320px; }
.pipe-clear { font-size: var(--text-sm); color: var(--ink-2); }

.pipe-foot { margin: var(--space-3) 0 0; font-size: var(--text-xs); }

/* =====================================================================
   Command centre (namespaced .cmd-*). The big projection hero + the
   folded-in crawl-activity wrapper + the run-controls card. Tokens only.
   ===================================================================== */

/* Pipeline health banner: phone-glanceable green/amber/red. */
.cmd-health { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-md); margin-bottom: var(--space-4); background: var(--card); }
.cmd-health__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.cmd-health__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmd-health__label { font-size: var(--text-sm); font-weight: 700; }
.cmd-health__reasons { font-size: var(--text-xs); color: var(--ink-2); overflow-wrap: anywhere; }
.cmd-health__link { flex: 0 0 auto; font-size: var(--text-xs); color: var(--link); text-decoration: none; }
.cmd-health__link:hover { text-decoration: underline; }
.cmd-health--ok { border-left-color: var(--green); }
.cmd-health--ok .cmd-health__dot { background: var(--green); }
.cmd-health--warn { border-left-color: var(--amber, #d99000); background: var(--amber-050, var(--card)); }
.cmd-health--warn .cmd-health__dot { background: var(--amber, #d99000); }
.cmd-health--stale { border-left-color: var(--red); background: var(--red-050, var(--card)); }
.cmd-health--stale .cmd-health__dot { background: var(--red); animation: cmd-health-pulse 1.4s ease-in-out infinite; }
@keyframes cmd-health-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Hero: big, instantly-readable projection cards. */
.cmd-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-3); }
.cmd-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-1); }
.cmd-card--accent { background: linear-gradient(135deg, var(--accent-050), var(--card) 80%); border-color: var(--accent); }
.cmd-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.cmd-card__label { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.cmd-card__value { margin: var(--space-1) 0 0; font-size: var(--text-4xl); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmd-card__proj { margin: var(--space-2) 0 0; font-size: var(--text-base); font-weight: 500; color: var(--ink-2); display: flex; align-items: center; gap: var(--space-1); }
.cmd-card__proj strong { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.cmd-card__arrow { color: var(--accent); font-weight: 700; }
.cmd-card__sub { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.cmd-card__rate { flex: 0 0 auto; display: inline-flex; align-items: center; padding: .16rem .55rem; border-radius: var(--radius-pill); background: var(--apply-050); color: var(--apply-text); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmd-note { margin: 0 0 var(--space-6); font-size: var(--text-xs); }

/* Crawl-activity wrapper (holds the three live columns + by-type table). */
.cmd-activity .scr-live { margin-top: var(--space-1); }
.cmd-activity .scr-col { background: var(--page); }
.cmd-bytype { margin-top: var(--space-2); }
.cmd-subhead { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: 600; color: var(--ink); }

/* Run-controls card. */
.cmd-actions-lead { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.cmd-actions { margin-top: 0; }

@media (max-width: 640px) {
  .cmd-card__value { font-size: var(--text-3xl); }
}

/* ---------- Responsive: collapse the sidebar to a top bar ---------- */
@media (max-width: 860px) {
  .admin-nav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .admin-nav__group { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .admin-nav__label { display: none; }
  .admin-nav__role { display: none; }
  .admin-main { margin-left: 0; padding: var(--space-6) var(--space-4) var(--space-16); }
  .admin-nav__foot { flex-direction: row; margin-top: 0; padding-top: 0; border-top: 0; margin-left: auto; }
}

/* ---- Market intelligence ------------------------------------------------- */
.intel-scope { display: flex; align-items: center; gap: var(--space-2); }
.intel-scope .form-select { min-width: 180px; }
.intel-scopetag { font-size: var(--text-sm); color: var(--ink-2); margin: 0 0 var(--space-4); }
.intel-scopetag a { color: var(--link); }

.intel-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.intel-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.intel-stat__v { font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; display: flex; align-items: baseline; gap: var(--space-2); }
.intel-stat__l { font-size: var(--text-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.03em; }
.intel-spark { width: 54px; height: 18px; color: var(--accent); opacity: 0.8; }

.intel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); align-items: start; }
.intel-card { padding: var(--space-5); }
.intel-card--accent { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-050), var(--card) 60%); }
.intel-card__head { margin-bottom: var(--space-3); }
.intel-card__head--sub { margin-top: var(--space-5); }
.intel-card__head h2 { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.intel-card__head h3 { font-size: var(--text-base); margin: 0; }
.intel-card__head p { font-size: var(--text-sm); color: var(--ink-2); margin: 0; }
.intel-empty { font-size: var(--text-sm); color: var(--ink-3); padding: var(--space-4) 0; }

.intel-tablewrap { overflow-x: auto; }
.intel-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.intel-table th, .intel-table td { text-align: left; padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--line); vertical-align: middle; }
.intel-table thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-3); border-bottom-width: 2px; }
.intel-table tbody th { font-weight: 600; }
.intel-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.intel-table tbody tr:hover { background: var(--bg-subtle, rgba(0,0,0,0.02)); }

.intel-bar { display: inline-block; width: 64px; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: var(--space-2); }
.intel-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.intel-bar__v { font-variant-numeric: tabular-nums; }

.intel-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.intel-bars--compact { gap: 6px; }
.intel-bars li { display: grid; grid-template-columns: 130px 1fr 48px; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.intel-bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intel-bars__track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.intel-bars__track span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.intel-bars__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }

.intel-foot { font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-5); max-width: 60ch; }

@media (max-width: 640px) {
  .intel-bars li { grid-template-columns: 96px 1fr 40px; }
}

/* ---- Market intelligence: your agency vs the market ---------------------- */
.eyebrow--accent { color: var(--accent); }
.agc { margin-bottom: var(--space-6); }
.agc__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.agc__name { font-size: var(--text-2xl); margin: var(--space-1) 0 0; letter-spacing: -0.02em; }
.agc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.agc-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.agc-stat__v { font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; }
.agc-stat__l { font-size: var(--text-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.03em; }
.agc-stat--warn { border-color: var(--amber, #d99000); background: var(--amber-050, var(--card)); }
.agc-nudge { font-size: var(--text-sm); color: var(--ink-2); background: var(--amber-050, var(--card)); border: 1px solid var(--amber, #d99000); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.agc-nudge strong { color: var(--ink); }
.agc-wide { grid-column: 1 / -1; }
.agc-lowpay { color: var(--red-strong, var(--red)); font-weight: 600; }
.intel-div { border: 0; border-top: 1px solid var(--line); margin: var(--space-8) 0 var(--space-4); }
.intel-market-label { color: var(--ink-3); margin-bottom: var(--space-4); }
/* Sponsored (CPC/CPA) ad placements.
   Loaded globally via the pages/*.css glob, but every rule is scoped to promoted
   markup only, so organic cards are untouched. Design system vars only. */

/* "Promoted" label: reads as a paid placement but stays quiet next to the
   data-computed trust badges (New, Salary shown, etc). */
.badge-promoted{
  background:var(--accent-050);
  color:var(--link);
  border:1px solid var(--line-2);
}

/* Sponsored card: a subtle accent-tinted edge, lifting it just enough to feel
   distinct without shouting. Border only, so it never shifts the layout. */
.job-card--promoted{
  border-color:var(--accent-050);
}
.job-card--promoted:hover,
.job-card--promoted:focus-within{
  border-color:var(--accent);
}
/* =====================================================================
   Career advice — hub + article. Soft-premium, CSS vars only.
   ===================================================================== */

/* ---------- Hub hero ---------- */
.advice-hero{ padding:var(--space-10) 0 var(--space-8); }
.advice-hero h1{ font-size:clamp(2rem,5vw,var(--text-4xl)); max-width:16ch; margin-bottom:var(--space-4); }
.advice-hero .lead{ max-width:62ch; }
.advice-topics{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-6); }

/* ---------- Hub body ---------- */
.advice-body{ padding-bottom:var(--space-16); }
.advice-topic{ padding-top:var(--space-8); scroll-margin-top:calc(66px + var(--space-4)); }
.advice-topic__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4);
  margin-bottom:var(--space-5); padding-bottom:var(--space-3); border-bottom:1px solid var(--line); }
.advice-topic__head h2{ font-size:var(--text-2xl); margin:0; }
.advice-topic__count{ flex:none; font-size:var(--text-sm); color:var(--ink-3); }

/* ---------- Card grid ---------- */
.advice-grid{ display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }

.advice-card{ position:relative; display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  transition:box-shadow .14s ease, transform .14s ease, border-color .14s ease; }
.advice-card:hover,.advice-card:focus-within{ box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--line-2); }

.advice-card__media{ aspect-ratio:16/9; background:var(--accent-050); }
.advice-card__media img{ width:100%; height:100%; object-fit:cover; }
.advice-card__media--placeholder{ position:relative;
  background:linear-gradient(135deg, var(--accent-050) 0%, var(--card) 70%); }
.advice-card__glyph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--accent); opacity:.55; }

.advice-card__body{ display:flex; flex-direction:column; flex:1; padding:var(--space-5); }
.advice-card__cat{ align-self:flex-start; margin-bottom:var(--space-3); }
.advice-card__title{ font-size:var(--text-lg); line-height:1.3; margin:0 0 var(--space-2); }
.advice-card__title a{ color:var(--ink); }
.advice-card__title a:hover{ color:var(--accent-strong); text-decoration:none; }
/* Whole-card click target without nesting interactive elements. */
.advice-card__title a::after{ content:""; position:absolute; inset:0; border-radius:var(--radius-lg); }
.advice-card__excerpt{ font-size:var(--text-sm); color:var(--ink-2); margin:0 0 var(--space-4); }
.advice-card__more{ margin-top:auto; font-size:var(--text-sm); font-weight:600; color:var(--accent); }
.advice-card--compact .advice-card__excerpt{ margin-bottom:var(--space-3); }

/* ---------- Shared CTA ---------- */
.advice-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-5);
  background:var(--accent-050); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:var(--space-6) var(--space-8); }
.advice-cta h2{ font-size:var(--text-xl); margin:0 0 var(--space-1); }
.advice-cta p{ margin:0; color:var(--ink-2); font-size:var(--text-sm); }
.advice-cta .btn{ flex:none; }
.advice-cta--hub{ margin-top:var(--space-10); }

/* ---------- Article ---------- */
.advice-article{ padding-bottom:var(--space-16); }
.advice-article__header{ margin-bottom:var(--space-6); }
.advice-article__header .eyebrow{ margin-bottom:var(--space-3); }
.advice-article h1{ font-size:clamp(1.8rem,4.5vw,var(--text-3xl)); margin-bottom:var(--space-4); }
.advice-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-3);
  font-size:var(--text-sm); color:var(--ink-3); }
.advice-meta span{ display:inline-flex; align-items:center; gap:var(--space-1); }

.advice-article__media{ aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
  margin-bottom:var(--space-8); background:var(--accent-050); }
.advice-article__media img{ width:100%; height:100%; object-fit:cover; }
.advice-article__media--placeholder{ display:flex; align-items:center; justify-content:center;
  color:var(--accent); background:linear-gradient(135deg, var(--accent-050) 0%, var(--card) 72%); }
.advice-article__media--placeholder svg{ opacity:.5; }

/* Long-form prose sizing (builds on app.css .prose). */
.advice-prose{ font-size:var(--text-lg); }
.advice-prose h2{ font-size:var(--text-2xl); margin:var(--space-10) 0 var(--space-4); }
.advice-prose h3{ font-size:var(--text-lg); margin:var(--space-6) 0 var(--space-3); }
.advice-prose ul,.advice-prose ol{ padding-left:1.4rem; }
.advice-prose li{ margin-bottom:var(--space-2); }
.advice-prose table{ font-size:var(--text-base); }

/* ---------- FAQ ---------- */
.advice-faq{ margin-top:var(--space-12); }
.advice-faq > h2{ font-size:var(--text-2xl); margin-bottom:var(--space-5); }
.advice-faq__item{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:var(--space-3); }
.advice-faq__item summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-4) var(--space-5); font-weight:600; cursor:pointer; list-style:none; }
.advice-faq__item summary::-webkit-details-marker{ display:none; }
.advice-faq__item summary svg{ flex:none; color:var(--ink-faint); transition:transform .15s ease; }
.advice-faq__item[open] summary svg{ transform:rotate(180deg); }
.advice-faq__answer{ padding:0 var(--space-5) var(--space-5); }
.advice-faq__answer p{ margin:0; color:var(--ink-2); }

/* ---------- Related ---------- */
.advice-related{ margin-top:var(--space-12); }
.advice-related > h2{ font-size:var(--text-xl); margin-bottom:var(--space-4); }

/* ---------- Responsive ---------- */
@media (max-width:560px){
  .advice-cta{ padding:var(--space-5) var(--space-6); }
  .advice-cta .btn{ width:100%; }
  .advice-prose{ font-size:var(--text-base); }
}
/* /for-agencies — self-serve agency listing page. Tokens only, no hardcoded hex. */

/* ---- Hero ------------------------------------------------------------- */
.ag-hero { padding: var(--space-12) 0 var(--space-10); }
.ag-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-12);
  align-items: center;
}
.ag-hero__copy .breadcrumb { margin-bottom: var(--space-4); }
.ag-hero h1 { font-size: var(--text-4xl); max-width: 15ch; }
.ag-hero h1 b { color: var(--accent); }
.ag-hero .lead { max-width: 46ch; }
.ag-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
}
.ag-hero__meta { font-size: var(--text-sm); color: var(--ink-3); margin: 0; }

.ag-hero__aside { display: flex; justify-content: center; }
.ag-hero__card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}
.ag-hero__role { font-weight: 600; font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-1); }
.ag-hero__sub { color: var(--ink-3); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.ag-hero__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ag-hero__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
  padding: var(--space-2) var(--space-3);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.ag-hero__list li span {
  width: 8px; height: 8px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.ag-pill {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.ag-pill--live { background: var(--accent-050); color: var(--link); }

/* ---- Trust band ------------------------------------------------------- */
.ag-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); }
.ag-trust {
  list-style: none; margin: 0; padding: var(--space-5) 0;
  display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8);
  justify-content: center;
}
.ag-trust li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; font-size: var(--text-sm); color: var(--ink);
}
.ag-trust svg { color: var(--accent); flex: none; }

/* ---- Section scaffolding --------------------------------------------- */
.ag-section { padding: var(--space-16) 0; }
.ag-head { max-width: 62ch; margin: 0 auto var(--space-10); text-align: center; }
.ag-head h2 { font-size: var(--text-3xl); }
.ag-head .lead { color: var(--ink-2); }

/* ---- Steps ------------------------------------------------------------ */
.ag-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  counter-reset: ag;
}
.ag-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.ag-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent-050); color: var(--link);
  font-weight: 600; font-size: var(--text-lg);
}
.ag-step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.ag-step p { margin: 0; font-size: var(--text-sm); }

/* ---- Form ------------------------------------------------------------- */
.ag-section--form { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ag-form-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start;
}
.ag-form-intro h2 { font-size: var(--text-2xl); }
.ag-form-intro .muted { max-width: 46ch; }
.ag-form-points { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.ag-form-points li {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--ink);
}
.ag-form-points svg { color: var(--accent); flex: none; }

.ag-form-card { padding: var(--space-8); }
.ag-form-card .form-group { margin-bottom: var(--space-5); }
.ag-form-card .btn-block { margin-top: var(--space-2); }
.ag-form-legal { font-size: var(--text-xs); margin: var(--space-4) 0 0; text-align: center; }

/* ---- Reasons ---------------------------------------------------------- */
.ag-reasons {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6);
}
.ag-reason { padding: var(--space-6); }
.ag-reason:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ag-reason__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--space-4);
  border-radius: var(--radius); background: var(--accent-050); color: var(--accent);
}
.ag-reason h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.ag-reason p { margin: 0; font-size: var(--text-sm); }

/* ---- Final CTA -------------------------------------------------------- */
.ag-final__band {
  background: var(--accent);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  color: #fff;
}
.ag-final__band h2 { color: #fff; font-size: var(--text-3xl); }
.ag-final__band p { color: rgba(255, 255, 255, .9); max-width: 52ch; margin: 0 auto var(--space-6); }
.ag-final__btn { background: #fff; border-color: #fff; color: var(--accent-strong); }
.ag-final__btn:hover { background: var(--accent-050); border-color: var(--accent-050); color: var(--accent-strong); }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .ag-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .ag-hero__aside { order: -1; }
  .ag-steps { grid-template-columns: 1fr; }
  .ag-form-wrap { grid-template-columns: 1fr; gap: var(--space-8); }
  .ag-reasons { grid-template-columns: 1fr; }
}

/* Mobile: the hero + section headings are fixed at text-4xl/3xl, which is
   oversized (and can crowd 360px). Clamp them down on phones only. */
@media (max-width: 560px) {
  .ag-hero h1 { font-size: clamp(1.9rem, 8vw, var(--text-4xl)); }
  .ag-head h2, .ag-final__band h2 { font-size: var(--text-2xl); }
  /* Full-bleed CTA buttons read as intentional, not stray, on a narrow column. */
  .ag-hero__actions .btn { width: 100%; }
}
/* =====================================================================
   Job alerts — create page, result pages, and the inline capture unit.
   Tokens only; matches the soft-premium system.
   ===================================================================== */

/* ---------- Create page: hero + form ---------- */
.alerts-hero{ padding:var(--space-12) 0 var(--space-10); }
.alerts-hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-12);
  align-items:start;
}
.alerts-hero__intro h1{ font-size:clamp(2rem,4.5vw,var(--text-4xl)); max-width:16ch; }
.alerts-hero__intro .lead{ max-width:48ch; margin-bottom:var(--space-6); }
.alerts-hero__points{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
.alerts-hero__points li{
  display:flex; align-items:flex-start; gap:var(--space-3);
  font-size:var(--text-base); color:var(--ink); font-weight:500;
}
.alerts-hero__points svg{
  flex:none; width:22px; height:22px; margin-top:1px; padding:3px;
  border-radius:var(--radius-pill); background:var(--apply-050); color:var(--apply-text);
}

.alerts-form-card{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius-xl);
  padding:var(--space-8); box-shadow:var(--shadow-md);
}
.alerts-form-card__title{ font-size:var(--text-xl); margin-bottom:var(--space-6); }
.alerts-form .form-group:last-of-type{ margin-bottom:var(--space-6); }
.alerts-form__consent{ margin-top:var(--space-4); text-align:center; }

/* ---------- Your active alerts ---------- */
.alerts-mine{ padding-top:var(--space-12); }
.alerts-list{ list-style:none; margin:var(--space-6) 0 0; padding:0; display:grid; gap:var(--space-3); }
.alerts-list__item{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) var(--space-5); background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-lg);
}
.alerts-list__title{ font-weight:600; margin:0 0 var(--space-1); color:var(--ink); }
.alerts-list__meta{ margin:0; font-size:var(--text-sm); color:var(--ink-2); }
.alerts-list__off{ flex:none; }
.alerts-list__off:hover{ border-color:var(--red); color:var(--red); }

/* ---------- How it works ---------- */
.alerts-how{ background:var(--accent-050); }
.alerts-how__heading{ text-align:center; margin-bottom:var(--space-10); }
.alerts-steps{
  list-style:none; margin:0; padding:0; counter-reset:step;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6);
}
.alerts-step{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:var(--space-6);
}
.alerts-step__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--radius-pill);
  background:var(--accent); color:#fff; font-weight:700; font-size:var(--text-lg);
  margin-bottom:var(--space-4);
}
.alerts-step h3{ font-size:var(--text-lg); margin-bottom:var(--space-2); }
.alerts-step p{ margin:0; color:var(--ink-2); }

/* ---------- Result pages (confirmed / unsubscribed) ---------- */
.alerts-result{ text-align:center; }
.alerts-result .lead{ max-width:52ch; margin:0 auto var(--space-8); }
.alerts-result__icon{
  width:76px; height:76px; margin:0 auto var(--space-5);
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill);
}
.alerts-result__icon--ok{ background:var(--apply-050); color:var(--apply-text); }
.alerts-result__icon--warn{ background:var(--amber-050); color:var(--amber); }
.alerts-result__icon--muted{ background:var(--page); border:1px solid var(--line-2); color:var(--ink-3); }
.alerts-result__actions{
  display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center;
  margin-bottom:var(--space-6);
}
.alerts-result__note{ font-size:var(--text-sm); color:var(--ink-2); max-width:52ch; margin:0 auto; }

/* ---------- Inline capture unit (search results, etc.) ---------- */
.alert-cta{
  display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-6) var(--space-8);
  align-items:center; margin:var(--space-6) 0;
  padding:var(--space-6) var(--space-8);
  background:var(--accent-050); border:1px solid var(--line-2);
  border-radius:var(--radius-xl);
}
.alert-cta__eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  margin:0 0 var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--accent);
}
.alert-cta__eyebrow svg{ color:var(--accent); }
.alert-cta__title{ font-size:var(--text-xl); margin:0 0 var(--space-2); }
.alert-cta__sub{ margin:0; color:var(--ink-2); font-size:var(--text-sm); max-width:44ch; }
.alert-cta__form{ margin:0; }
.alert-cta__row{ display:flex; gap:var(--space-2); }
.alert-cta__row .form-input{ flex:1; background:var(--card); }
.alert-cta__row .btn{ flex:none; white-space:nowrap; }
.alert-cta__hint{ margin:var(--space-3) 0 0; font-size:var(--text-xs); color:var(--ink-3); }
.alert-cta__hint a{ color:var(--ink-2); text-decoration:underline; }

/* ---------- Responsive ---------- */
@media (max-width:899px){
  .alerts-hero__grid{ grid-template-columns:1fr; gap:var(--space-8); }
  .alerts-steps{ grid-template-columns:1fr; gap:var(--space-4); }
  .alert-cta{ grid-template-columns:1fr; padding:var(--space-6); }
}
@media (max-width:560px){
  .alerts-form-card{ padding:var(--space-6); }
  .alerts-list__item{ flex-direction:column; align-items:flex-start; }
  .alerts-list__off{ align-self:stretch; text-align:center; }
  .alert-cta__row{ flex-direction:column; }
  .alert-cta__row .btn{ width:100%; }
}
/* =====================================================================
   Employer applicants — overview, kanban board, single application.
   Namespaced: .apl* (overview), .kanban* (board), .appl* (detail).
   CSS variables only. Auto-loaded site-wide, so every class is prefixed.
   ===================================================================== */

/* ---- shared: stage dots + stars ------------------------------------ */
.apl-dot{ display:inline-block; width:9px; height:9px; border-radius:var(--radius-pill); background:var(--ink-faint); flex:0 0 auto; }
.apl-dot--new{ background:var(--ink-faint); }
.apl-dot--reviewed{ background:var(--link); }
.apl-dot--shortlisted{ background:var(--accent); }
.apl-dot--interviewing{ background:var(--amber); }
.apl-dot--offered{ background:var(--apply-text); }
.apl-dot--hired{ background:var(--apply); }
.apl-dot--rejected{ background:var(--red); }
.apl-dot--closed{ background:var(--skip); }

.apl-star{ display:inline-block; }
.apl-star--off{ color:var(--line-2); }

/* ---- overview page (.apl) ------------------------------------------ */
.apl{ padding-bottom:var(--space-16); }
.apl-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-6); }
.apl-head h1{ font-size:var(--text-3xl); margin:0 0 var(--space-2); }
.apl-head__sub{ color:var(--ink-2); margin:0; max-width:52ch; }

.apl-summary{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:var(--space-5); display:flex; align-items:center; gap:var(--space-8); flex-wrap:wrap; margin-bottom:var(--space-6); }
.apl-summary__total{ display:flex; flex-direction:column; padding-right:var(--space-8); border-right:1px solid var(--line); }
.apl-summary__num{ font-size:var(--text-3xl); font-weight:600; line-height:1; color:var(--ink); }
.apl-summary__label{ font-size:var(--text-sm); color:var(--ink-2); margin-top:var(--space-1); }
.apl-summary__stages{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-5); }
.apl-summary__stage{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--ink-2); }
.apl-summary__count{ font-weight:600; color:var(--ink); }

.apl-jobs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-4); }
.apl-job{ display:flex; align-items:stretch; justify-content:space-between; gap:var(--space-5); padding:var(--space-5); }
.apl-job__body{ min-width:0; flex:1; }
.apl-job__top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); }
.apl-job__title{ font-size:var(--text-lg); margin:0; }
.apl-job__title a{ color:var(--ink); }
.apl-job__title a:hover{ color:var(--link); text-decoration:none; }
.apl-job__count{ flex:0 0 auto; font-size:var(--text-sm); font-weight:600; color:var(--accent); background:var(--accent-050); padding:.15rem .6rem; border-radius:var(--radius-pill); }
.apl-job__meta{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; font-size:var(--text-sm); color:var(--ink-3); margin:var(--space-2) 0 0; }
.apl-job__flag{ font-weight:600; color:var(--amber); background:var(--amber-050); padding:.05rem .5rem; border-radius:var(--radius-pill); font-size:var(--text-xs); }
.apl-job__posted{ color:var(--ink-faint); }
.apl-job__stages{ list-style:none; margin:var(--space-4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); }
.apl-chip{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); color:var(--ink-2);
  background:var(--page); border:1px solid var(--line); border-radius:var(--radius-pill); padding:.2rem .6rem; }
.apl-job__none{ font-size:var(--text-sm); color:var(--ink-faint); margin:var(--space-4) 0 0; }
.apl-job__actions{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:var(--space-2); flex:0 0 auto; }
.apl-job__view{ font-size:var(--text-xs); color:var(--ink-3); }

@media (max-width:640px){
  .apl-job{ flex-direction:column; }
  .apl-job__actions{ align-items:stretch; flex-direction:row; }
  .apl-summary__total{ border-right:0; padding-right:0; }
}

/* ---- kanban board (.kanban) ---------------------------------------- */
.kanban{ padding-bottom:var(--space-16); }
.kanban__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-6); }
.kanban__head h1{ font-size:var(--text-2xl); margin:var(--space-1) 0 var(--space-2); }
.kanban__back{ color:var(--accent); }
.kanban__meta{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; color:var(--ink-3); font-size:var(--text-sm); margin:0; }

.kanban__board{ display:flex; gap:var(--space-4); overflow-x:auto; padding-bottom:var(--space-4);
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.kanban__col{ flex:0 0 288px; max-width:288px; background:var(--page); border:1px solid var(--line);
  border-radius:var(--radius-lg); display:flex; flex-direction:column; scroll-snap-align:start; --kb-accent:var(--ink-faint); }
.kanban__col--new{ --kb-accent:var(--ink-faint); }
.kanban__col--reviewed{ --kb-accent:var(--link); }
.kanban__col--shortlisted{ --kb-accent:var(--accent); }
.kanban__col--interviewing{ --kb-accent:var(--amber); }
.kanban__col--offered{ --kb-accent:var(--apply-text); }
.kanban__col--hired{ --kb-accent:var(--apply); }
.kanban__col--rejected{ --kb-accent:var(--red); }
.kanban__col--closed{ --kb-accent:var(--skip); }

.kanban__col-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  padding:var(--space-3) var(--space-4); border-top:3px solid var(--kb-accent); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.kanban__col-title{ font-size:var(--text-sm); font-weight:600; color:var(--ink); }
.kanban__count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px;
  font-size:var(--text-xs); font-weight:700; color:#fff; background:var(--kb-accent); border-radius:var(--radius-pill); }
.kanban__list{ display:flex; flex-direction:column; gap:var(--space-3); padding:0 var(--space-3) var(--space-3);
  min-height:60px; flex:1; }
.kanban__empty{ font-size:var(--text-xs); color:var(--ink-faint); text-align:center; padding:var(--space-4) 0; margin:0; }

.kanban-card{ background:var(--card); border:1px solid var(--line); border-left:3px solid var(--kb-accent);
  border-radius:var(--radius); padding:var(--space-3); box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease, transform .15s ease; }
.kanban-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.kanban-card__name{ display:block; font-weight:600; color:var(--ink); font-size:var(--text-sm); }
.kanban-card__name:hover{ color:var(--link); text-decoration:none; }
.kanban-card__meta{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; font-size:var(--text-xs); color:var(--ink-3); margin:var(--space-1) 0 0; }
.kanban-card__swipe{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent);
  background:var(--accent-050); padding:.05rem .35rem; border-radius:var(--radius-pill); }
.kanban-card__rating{ margin-top:var(--space-2); }
.kanban-card__move{ display:flex; gap:var(--space-2); margin-top:var(--space-3); }
.kanban-card__stage{ flex:1; min-width:0; padding:.4rem .55rem; font-size:var(--text-xs); }
.kanban-card__move-btn{ flex:0 0 auto; padding:.4rem .7rem; font-size:var(--text-xs); }
.kanban--js .kanban-card__move-btn{ display:none; }
.kanban-card.is-moving{ opacity:.5; }

@media (max-width:640px){
  .kanban__col{ flex-basis:82vw; max-width:82vw; }
}

/* ---- single application (.appl) ------------------------------------ */
.appl{ padding-bottom:var(--space-16); }
.appl-crumb{ font-size:var(--text-sm); color:var(--ink-3); margin:0 0 var(--space-4); }
.appl-crumb span{ margin:0 var(--space-1); color:var(--ink-faint); }

.appl-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--space-5); align-items:start; }
.appl-main{ display:flex; flex-direction:column; gap:var(--space-4); min-width:0; }
.appl-side{ display:flex; flex-direction:column; gap:var(--space-4); }

.appl-head{ padding:var(--space-5); }
.appl-head__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); }
.appl-name{ font-size:var(--text-2xl); margin:0 0 var(--space-1); }
.appl-applied{ font-size:var(--text-sm); color:var(--ink-3); margin:0; display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.appl-applied a{ color:var(--link); }

.appl-stage-pill{ flex:0 0 auto; font-size:var(--text-xs); font-weight:600; padding:.25rem .7rem; border-radius:var(--radius-pill);
  color:var(--ink); background:var(--line); }
.appl-stage-pill--new{ color:var(--ink-2); background:var(--line-2); }
.appl-stage-pill--reviewed{ color:var(--link); background:var(--accent-050); }
.appl-stage-pill--shortlisted{ color:var(--accent-strong); background:var(--accent-050); }
.appl-stage-pill--interviewing{ color:var(--amber); background:var(--amber-050); }
.appl-stage-pill--offered{ color:var(--apply-text); background:var(--apply-050); }
.appl-stage-pill--hired{ color:var(--apply-text); background:var(--apply-050); }
.appl-stage-pill--rejected{ color:var(--red-strong); background:var(--red-050); }
.appl-stage-pill--closed{ color:var(--ink-3); background:var(--line); }

.appl-rating-line{ display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-4); }
.appl-rating-line__txt{ font-size:var(--text-sm); color:var(--ink-3); }

.appl-contact{ margin:var(--space-4) 0 0; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) var(--space-4); }
.appl-contact__row{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.appl-contact dt{ font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin:0; }
.appl-contact dd{ margin:0; font-size:var(--text-sm); color:var(--ink); word-break:break-word; }
.appl-ref{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--text-xs); background:var(--page);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:.1rem .4rem; }
.appl-cv{ margin-top:var(--space-4); display:inline-flex; align-items:center; gap:var(--space-2); }

.appl-card{ padding:var(--space-5); }
.appl-card__title{ font-size:var(--text-lg); margin:0 0 var(--space-3); }
.appl-cover{ font-size:var(--text-sm); color:var(--ink); line-height:1.7; white-space:normal; }
.appl-muted{ color:var(--ink-faint); font-size:var(--text-sm); margin:0; }

.appl-timeline{ list-style:none; margin:0; padding:0; }
.appl-event{ position:relative; display:flex; gap:var(--space-3); padding:0 0 var(--space-4) var(--space-1); }
.appl-event:last-child{ padding-bottom:0; }
.appl-event__dot{ flex:0 0 auto; width:11px; height:11px; margin-top:5px; border-radius:var(--radius-pill);
  background:var(--ink-faint); box-shadow:0 0 0 3px var(--card); z-index:1; }
.appl-event::before{ content:""; position:absolute; left:6px; top:16px; bottom:0; width:1px; background:var(--line-2); }
.appl-event:last-child::before{ display:none; }
.appl-event--status .appl-event__dot{ background:var(--accent); }
.appl-event--note .appl-event__dot{ background:var(--amber); }
.appl-event--rating .appl-event__dot{ background:var(--apply); }
.appl-event--message .appl-event__dot{ background:var(--link); }
.appl-event__body{ min-width:0; flex:1; }
.appl-event__title{ font-size:var(--text-sm); margin:0; color:var(--ink); }
.appl-event__arrow{ margin:0 var(--space-1); color:var(--ink-faint); }
.appl-event__note{ font-size:var(--text-sm); color:var(--ink-2); margin:var(--space-1) 0 0; line-height:1.6; }
.appl-event__foot{ font-size:var(--text-xs); color:var(--ink-faint); margin:var(--space-1) 0 0; }

.appl-panel{ padding:var(--space-4) var(--space-5) var(--space-5); }
.appl-panel__title{ font-size:var(--text-base); margin:0 0 var(--space-3); }
.appl-panel__hint{ font-size:var(--text-xs); color:var(--ink-3); margin:0 0 var(--space-3); line-height:1.5; }
.appl-form{ display:flex; flex-direction:column; gap:var(--space-3); }
.appl-panel--danger{ border-color:var(--red-050); }
.appl-archive-btn{ color:var(--red-strong); border-color:var(--red-050); }
.appl-archive-btn:hover{ background:var(--red-050); }

.appl-rate__stars{ display:flex; flex-direction:column; gap:var(--space-1); }
.appl-rate__opt{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--ink-2); cursor:pointer; padding:.15rem 0; }
.appl-rate__opt input{ accent-color:var(--accent); }

@media (max-width:900px){
  .appl-grid{ grid-template-columns:1fr; }
  .appl-side{ order:-1; }
}
@media (max-width:560px){
  .appl-contact{ grid-template-columns:1fr; }
  .appl-side{ order:0; }
}
/* =====================================================================
   yournextjob — auth pages (sign in, register, forgot, reset)
   Centred soft-premium cards. CSS variables only.
   ===================================================================== */

.auth{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:center;
  padding:var(--space-12) var(--space-5) var(--space-16);
}
/* Soft accent glow behind the card. */
.auth::before{
  content:"";
  position:absolute;
  z-index:0;
  top:-8%;
  left:50%;
  transform:translateX(-50%);
  width:min(720px, 130%);
  height:440px;
  background:radial-gradient(58% 60% at 50% 40%, var(--accent-050), transparent 72%);
  pointer-events:none;
}

.auth-shell{ position:relative; z-index:1; width:100%; max-width:462px; }

.auth-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:var(--space-8);
  box-shadow:var(--shadow-lg);
}

/* ---------- Head ---------- */
.auth-head{ text-align:center; margin-bottom:var(--space-6); }
.auth-mark{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; margin:0 auto var(--space-4);
  border-radius:var(--radius-lg);
  background:var(--accent-050); color:var(--accent);
}
.auth-head h1{ font-size:var(--text-2xl); margin-bottom:var(--space-2); }
.auth-sub{ margin:0 auto; max-width:40ch; color:var(--ink-2); font-size:var(--text-sm); }

/* ---------- Role tabs ---------- */
.auth-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-1);
  padding:var(--space-1);
  background:var(--page);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  margin-bottom:var(--space-6);
}
.auth-tab{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:.6rem var(--space-3);
  border-radius:calc(var(--radius) - 5px);
  font-size:var(--text-sm); font-weight:600; color:var(--ink-2);
  transition:background .12s ease, color .12s ease, box-shadow .12s ease;
}
.auth-tab:hover{ text-decoration:none; color:var(--ink); }
.auth-tab svg{ flex:none; color:var(--ink-faint); }
.auth-tab.is-active{ background:var(--card); color:var(--accent); box-shadow:var(--shadow-sm); }
.auth-tab.is-active svg{ color:var(--accent); }

/* ---------- Form ---------- */
.auth-form .form-group{ margin-bottom:var(--space-5); }
.auth-form .form-group:last-of-type{ margin-bottom:var(--space-6); }
.auth-optional{ font-weight:500; color:var(--ink-3); }

.auth-label-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); }
.auth-mini-link{ font-size:var(--text-xs); font-weight:600; white-space:nowrap; }

/* Password field with reveal toggle */
.pw-field{ position:relative; }
.pw-field .form-input{ padding-right:2.9rem; }
.pw-toggle{
  position:absolute; top:50%; right:.4rem; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem;
  border:0; background:transparent; color:var(--ink-3);
  border-radius:var(--radius-sm); cursor:pointer;
  transition:color .12s ease, background .12s ease;
}
.pw-toggle:hover{ color:var(--ink); background:var(--accent-050); }
.pw-toggle svg{ display:block; }

/* Password strength meter (decorative; hint text carries the guidance) */
.pw-meter{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-3); }
.pw-meter__bar{
  position:relative; flex:1; height:6px; overflow:hidden;
  border-radius:var(--radius-pill); background:var(--line-2);
}
.pw-meter__bar i{
  position:absolute; top:0; bottom:0; left:0; width:0;
  border-radius:inherit; background:var(--skip);
  transition:width .2s ease, background .2s ease;
}
.pw-meter__label{
  min-width:6ch; text-align:right;
  font-size:var(--text-xs); font-weight:600; color:var(--ink-3);
}
.pw-meter[data-level="1"] .pw-meter__bar i{ width:28%; background:var(--red); }
.pw-meter[data-level="2"] .pw-meter__bar i{ width:52%; background:var(--amber); }
.pw-meter[data-level="3"] .pw-meter__bar i{ width:78%; background:var(--apply); }
.pw-meter[data-level="4"] .pw-meter__bar i{ width:100%; background:var(--apply); }
.pw-meter[data-level="1"] .pw-meter__label{ color:var(--red-strong); }
.pw-meter[data-level="2"] .pw-meter__label{ color:var(--amber); }
.pw-meter[data-level="3"] .pw-meter__label,
.pw-meter[data-level="4"] .pw-meter__label{ color:var(--apply-text); }

/* Checkboxes (terms / marketing) */
.auth-check{ align-items:flex-start; gap:var(--space-3); font-size:var(--text-sm); color:var(--ink-2); font-weight:500; }
.auth-check input{ margin-top:3px; }
.auth-check a{ font-weight:600; }

/* ---------- Between-block links ---------- */
.auth-divider{
  display:flex; align-items:center; gap:var(--space-3);
  margin:var(--space-6) 0;
  color:var(--ink-3); font-size:var(--text-xs); font-weight:500;
}
.auth-divider::before, .auth-divider::after{
  content:""; flex:1; height:1px; background:var(--line-2);
}
.auth-alt{ margin:var(--space-6) 0 0; text-align:center; font-size:var(--text-sm); color:var(--ink-2); }
.auth-alt a{ font-weight:600; }

.auth-foot{ margin:var(--space-6) 0 0; text-align:center; font-size:var(--text-xs); color:var(--ink-3); }
.auth-foot a{ color:var(--ink-3); text-decoration:underline; }
.auth-foot a:hover{ color:var(--ink-2); }

/* ---------- Small screens ---------- */
@media (max-width:520px){
  .auth{ padding:var(--space-8) var(--space-4) var(--space-12); }
  .auth-card{ padding:var(--space-6); border-radius:var(--radius-lg); }
}

/* ---------- Touch tap targets ---------- */
@media (max-width:640px){
  /* Jobseeker / employer role switch — full-height tappable tabs. */
  .auth-tab{ min-height:44px; }
  /* Password reveal toggle to a 44px target (widen field padding to clear it). */
  .pw-field .form-input{ padding-right:3.4rem; }
  .pw-toggle{ width:44px; height:44px; right:var(--space-1); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pw-toggle, .pw-meter__bar i, .auth-tab{ transition:none; }
}
/* ==========================================================================
   Automations (employer tool). Classes namespaced .auto-* so they never leak
   into other pages via the global stylesheet glob. Design tokens only.
   ========================================================================== */

.auto-page{ padding:var(--space-6) 0 var(--space-16); }

/* --- List header ---------------------------------------------------------- */
.auto-head{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:var(--space-6); flex-wrap:wrap; margin-bottom:var(--space-8); }
.auto-head__intro{ max-width:62ch; }
.auto-head__intro h1{ margin-bottom:var(--space-3); }
.auto-head__actions{ flex-shrink:0; }

/* --- Rule list ------------------------------------------------------------ */
.auto-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-4); }

.auto-item{ display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--space-5); flex-wrap:wrap; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6); }
.auto-item--off{ background:var(--page); }
.auto-item--off .auto-item__sentence{ color:var(--ink-2); }

.auto-item__main{ flex:1 1 320px; min-width:0; }
.auto-item__top{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-2); }
.auto-item__name{ font-size:var(--text-lg); margin:0; }

.auto-badge{ display:inline-flex; align-items:center; padding:.15rem .6rem; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:700; letter-spacing:.02em; }
.auto-badge--on{ background:var(--apply-050); color:var(--apply-text); }
.auto-badge--off{ background:var(--card); color:var(--ink-3); border:1px solid var(--line-2); }

.auto-item__sentence{ margin:0 0 var(--space-3); color:var(--ink); font-size:var(--text-base); }
.auto-item__meta{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5);
  font-size:var(--text-sm); color:var(--ink-2); }
.auto-scope, .auto-lastrun{ display:inline-flex; align-items:center; gap:var(--space-2); min-width:0; }
.auto-scope svg{ color:var(--ink-faint); flex-shrink:0; }
.auto-scope strong{ color:var(--ink); font-weight:600; }

.auto-item__actions{ display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }
.auto-inline-form{ margin:0; }

/* On / off switch (a real submit button, works without JS) */
.auto-switch{ display:inline-flex; align-items:center; gap:var(--space-2); border:0; background:transparent;
  cursor:pointer; font:inherit; font-size:var(--text-sm); font-weight:600; color:var(--ink-3);
  padding:var(--space-2); border-radius:var(--radius); }
.auto-switch__track{ position:relative; width:40px; height:22px; border-radius:var(--radius-pill);
  background:var(--line-2); transition:background .15s ease; flex:none; }
.auto-switch__thumb{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:var(--radius-pill);
  background:var(--card); box-shadow:var(--shadow-sm); transition:left .15s ease; }
.auto-switch__text{ min-width:1.6em; text-align:left; }
.auto-switch[aria-checked="true"]{ color:var(--apply-text); }
.auto-switch[aria-checked="true"] .auto-switch__track{ background:var(--apply); }
.auto-switch[aria-checked="true"] .auto-switch__thumb{ left:20px; }
.auto-switch:hover .auto-switch__track{ box-shadow:var(--shadow-sm); }

/* Delete */
.auto-delete{ display:inline-flex; align-items:center; gap:var(--space-2); border:1px solid var(--line-2);
  background:var(--card); color:var(--ink-2); font:inherit; font-size:var(--text-sm); font-weight:600;
  padding:.5rem .8rem; border-radius:var(--radius); cursor:pointer; transition:all .12s ease; }
.auto-delete:hover{ border-color:var(--red); color:var(--red-strong); background:var(--red-050); }

.auto-page__foot{ margin-top:var(--space-6); font-size:var(--text-sm); color:var(--ink-3); max-width:72ch; }

/* --- Builder form --------------------------------------------------------- */
.auto-form-page .breadcrumb{ margin-bottom:var(--space-5); }
.auto-form__grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--space-8); align-items:start; }
.auto-form__main{ min-width:0; }
.auto-form__main h1{ font-size:var(--text-3xl); }
.auto-form__main .lead{ max-width:58ch; margin-bottom:var(--space-8); }

.auto-fieldset{ border:0; margin:0; padding:0; }
.auto-fieldset + .auto-fieldset{ margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--line); }
.auto-fieldset legend{ display:flex; align-items:center; gap:var(--space-3); font-size:var(--text-lg);
  font-weight:600; letter-spacing:-.01em; color:var(--ink); margin-bottom:var(--space-4); padding:0; }
.auto-step{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:var(--radius-pill); background:var(--accent-050); color:var(--accent);
  font-size:var(--text-sm); font-weight:700; flex:none; }

/* Radio option cards */
.auto-options{ display:flex; flex-direction:column; gap:var(--space-3); }
.auto-option{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4);
  border:1px solid var(--line-2); border-radius:var(--radius); cursor:pointer; background:var(--card);
  transition:border-color .12s ease, background .12s ease; }
.auto-option:hover{ border-color:var(--accent); }
.auto-option:focus-within{ box-shadow:var(--focus-ring); border-color:var(--accent); }
.auto-option:has(input:checked), .auto-option.is-selected{ border-color:var(--accent); background:var(--accent-050); }
.auto-option input{ width:18px; height:18px; margin-top:2px; accent-color:var(--accent); flex:none; }
.auto-option__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.auto-option__title{ font-weight:600; color:var(--ink); font-size:var(--text-base); }
.auto-option__hint{ font-size:var(--text-sm); color:var(--ink-2); }

/* Conditional groups (start visible; JS hides the ones that do not apply) */
.auto-conditional{ margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px dashed var(--line-2); }
.auto-conditional[hidden]{ display:none; }

.auto-days{ display:inline-flex; align-items:center; gap:var(--space-3); }
.auto-days .form-input{ width:120px; }
.auto-days__unit{ color:var(--ink-2); font-weight:500; }

.auto-form__submit{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-8); }

/* Side helper */
.auto-form__side{ position:sticky; top:calc(66px + var(--space-4)); }
.auto-side-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); }
.auto-side-card h2{ font-size:var(--text-lg); margin:0 0 var(--space-3); }
.auto-side-list{ margin:0 0 var(--space-4); padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.auto-side-list li{ position:relative; padding-left:var(--space-5); font-size:var(--text-sm); color:var(--ink-2); }
.auto-side-list li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border-radius:var(--radius-pill); background:var(--accent); }
.auto-side-note{ margin:0; font-size:var(--text-sm); color:var(--ink-3); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 880px){
  .auto-form__grid{ grid-template-columns:1fr; }
  .auto-form__side{ position:static; }
}
@media (max-width: 560px){
  .auto-item{ padding:var(--space-4) var(--space-5); }
  .auto-item__actions{ width:100%; justify-content:space-between; }
}

@media (prefers-reduced-motion: reduce){
  .auto-switch__track, .auto-switch__thumb, .auto-option, .auto-delete{ transition:none; }
}
/* =====================================================================
   yournextjob - awareness quiz tests (manual handling, food safety)
   Styles for the shared quiz engine (public/assets/js/quiz.js) and the
   short training blocks above each quiz. Tokens only, all scoped under
   .qz / .qz-result / .qz-tile so nothing leaks to other pages (this
   sheet is globbed onto every page in dev).
   ===================================================================== */

/* ---------- Training helpers ---------- */

/* TILE cards (Task, Individual, Load, Environment). */
.qz-tile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.qz-tile__item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.qz-tile__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--accent-050);
  color: var(--accent-strong);
  font-weight: 800;
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.qz-tile__term {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.qz-tile__desc {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Allergen chip list. */
.qz-allergens {
  list-style: none;
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Compact "steps" list for safe lifting technique / key rules. */
.qz-steps {
  margin: var(--space-4) 0 var(--space-6);
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
}
.qz-steps li {
  color: var(--ink-2);
  line-height: 1.55;
}
.qz-steps li strong { color: var(--ink); }

/* ---------- Quiz form ---------- */

/* Section heading that sits outside .tools-prose (which owns its own spacing). */
.qz-heading {
  margin-top: var(--space-12);
}

.qz {
  margin: var(--space-6) 0 var(--space-8);
}
.qz__intro {
  color: var(--ink-2);
  margin-bottom: var(--space-5);
}
.qz__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  counter-reset: qz;
}
.qz__q {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.qz__q fieldset {
  border: 0;
  margin: 0;
  padding: var(--space-5);
}
.qz__q legend.qz__q-text {
  padding: 0;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: var(--space-4);
  counter-increment: qz;
}
.qz__q-num {
  display: inline-block;
  min-width: 1.6em;
  color: var(--accent-strong);
  font-weight: 800;
}

/* Left accent bar once a question has been marked. */
.qz__q--right { border-color: var(--apply); box-shadow: inset 3px 0 0 var(--apply); }
.qz__q--wrong { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }

.qz__opts {
  display: grid;
  gap: var(--space-2);
}
.qz__opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.qz__opt:hover { border-color: var(--accent); }
.qz__opt:focus-within { box-shadow: var(--focus-ring); border-color: var(--accent); }
.qz__opt input[type="radio"] {
  margin-top: 0.2em;
  accent-color: var(--accent);
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}
.qz__opt-text {
  color: var(--ink);
  line-height: 1.45;
}
.qz__opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-050);
}

/* Post-marking option states. */
.qz__opt--correct {
  border-color: var(--apply);
  background: var(--apply-050);
}
.qz__opt--correct .qz__opt-text { color: var(--apply-text); font-weight: 600; }
.qz__opt--chosen-wrong {
  border-color: var(--red);
  background: var(--red-050);
}
.qz__opt--chosen-wrong .qz__opt-text { color: var(--red-strong); }

/* Per-question feedback line. */
.qz__feedback {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.qz__feedback--right { background: var(--apply-050); color: var(--apply-text); }
.qz__feedback--wrong { background: var(--red-050); color: var(--red-strong); }
.qz__feedback strong { display: inline; }

/* ---------- Single-question navigation (optional mode) ---------- */
.qz__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.qz__progress {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: 600;
}
.qz__nav-btn { min-width: 6rem; }

/* ---------- Actions ---------- */
.qz__actions {
  margin-top: var(--space-5);
}

/* ---------- Result panel ---------- */
.qz-result {
  margin: var(--space-6) 0 var(--space-8);
  scroll-margin-top: var(--space-16);
  outline: none;
}
.qz-result__card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--card);
  padding: var(--space-6);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.qz-result__card--pass { border-color: var(--apply); background: var(--apply-050); }
.qz-result__card--fail { border-color: var(--amber); background: var(--amber-050); }
.qz-result__eyebrow {
  margin: 0 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--ink-3);
}
.qz-result__score {
  margin: 0;
  font-size: var(--text-5xl);
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.qz-result__card--pass .qz-result__score { color: var(--apply-text); }
.qz-result__verdict {
  margin: var(--space-3) auto var(--space-5);
  max-width: 34rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.qz-result__actions {
  display: grid;
  gap: var(--space-3);
  max-width: 24rem;
  margin: 0 auto;
}
.qz-result__retry {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink);
}
.qz-result__retry:hover { border-color: var(--accent); color: var(--accent-strong); }

@media (max-width: 640px) {
  .qz__q legend.qz__q-text { font-size: var(--text-base); }
  .qz-result__score { font-size: var(--text-4xl); }
}
/* =====================================================================
   yournextjob — Campaigns (employer self-serve CPC/CPA management)
   Soft-premium, mobile-first. CSS variables only.
   ===================================================================== */

.camp{ padding:var(--space-10) 0 var(--space-16); }
.camp .breadcrumb{ margin-bottom:var(--space-5); }

/* ---------- List head ---------- */
.camp__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-6);
  flex-wrap:wrap; margin-bottom:var(--space-8); }
.camp__head h1{ font-size:var(--text-3xl); margin-bottom:var(--space-3); }
.camp__head .lead{ max-width:52ch; margin:0; }
.camp__head-actions{ display:flex; gap:var(--space-3); flex:none; }

/* Small button size, self-contained (no global .btn-sm exists). */
.btn-sm{ padding:.45rem .85rem; font-size:var(--text-sm); border-radius:var(--radius-sm); }

/* ---------- Wallet strip ---------- */
.camp-wallet{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-6);
  flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6); box-shadow:var(--shadow-sm); margin-bottom:var(--space-6); }
.camp-wallet--low{ border-color:var(--amber); background:var(--amber-050); }
.camp-wallet__main{ display:flex; flex-direction:column; gap:2px; }
.camp-wallet__label{ font-size:var(--text-sm); color:var(--ink-2); font-weight:500; }
.camp-wallet__amount{ font-size:var(--text-2xl); font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1.1; }
.camp-wallet__aside{ display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap; }
.camp-wallet__note{ margin:0; font-size:var(--text-sm); color:var(--ink-2); max-width:34ch; }
.camp-wallet__links{ display:flex; gap:var(--space-3); flex:none; }

/* ---------- Totals summary ---------- */
.camp-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-bottom:var(--space-6); }
.camp-summary__item{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-4) var(--space-5); }
.camp-summary__num{ display:block; font-size:var(--text-2xl); font-weight:600; letter-spacing:-.02em;
  color:var(--ink); line-height:1.1; }
.camp-summary__label{ display:block; margin-top:var(--space-1); font-size:var(--text-sm); color:var(--ink-2); }

/* ---------- Campaign list ---------- */
.camp-list{ list-style:none; margin:0 0 var(--space-6); padding:0; display:flex; flex-direction:column; gap:var(--space-5); }
.camp-item{ 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; }
.camp-item:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.camp-item__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);
  flex-wrap:wrap; }
.camp-item__tags{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); flex-wrap:wrap; }
.camp-item__name{ font-size:var(--text-xl); margin:0 0 var(--space-1); }
.camp-item__target{ margin:0; font-size:var(--text-sm); color:var(--ink-2); }
.camp-item__target strong{ color:var(--ink); font-weight:600; }
.camp-item__actions{ display:flex; gap:var(--space-2); align-items:center; flex:none; }
.camp-inline-form{ margin:0; }

/* ---------- Status + objective pills ---------- */
.camp-status{ display:inline-flex; align-items:center; gap:4px; padding:.2rem .65rem; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; letter-spacing:.01em; }
.camp-status--active{ background:var(--apply-050); color:var(--apply-text); }
.camp-status--paused{ background:var(--amber-050); color:var(--ink); border:1px solid var(--amber); }
.camp-status--draft{ background:var(--page); color:var(--ink-2); border:1px solid var(--line-2); }
.camp-status--depleted{ background:var(--red-050); color:var(--red-strong); }
.camp-status--ended{ background:var(--page); color:var(--ink-3); border:1px solid var(--line-2); }
.camp-obj{ display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:700; letter-spacing:.03em; background:var(--accent-050); color:var(--link); }

/* ---------- Metrics ---------- */
.camp-metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4) var(--space-5);
  margin:var(--space-5) 0 0; padding-top:var(--space-5); border-top:1px solid var(--line); }
.camp-metric dt{ font-size:var(--text-xs); color:var(--ink-3); font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.camp-metric dd{ margin:var(--space-1) 0 0; font-size:var(--text-lg); font-weight:600; color:var(--ink); }
.camp-metric__unit{ display:inline; font-size:var(--text-xs); font-weight:500; color:var(--ink-3); }

/* ---------- Total-budget progress ---------- */
.camp-progress{ margin-top:var(--space-5); }
.camp-progress__bar{ height:8px; border-radius:var(--radius-pill); background:var(--line); overflow:hidden; }
.camp-progress__fill{ display:block; height:100%; border-radius:var(--radius-pill); background:var(--accent); }
.camp-progress__label{ display:block; margin-top:var(--space-2); font-size:var(--text-xs); color:var(--ink-3); }

.camp__foot-note{ font-size:var(--text-sm); color:var(--ink-2); margin:0; }

/* ---------- Campaign code + copy ---------- */
.camp-code{ display:inline-flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2); }
.camp-code__label{ font-size:var(--text-xs); color:var(--ink-3); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.camp-code__value{ display:inline-flex; align-items:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--text-sm); font-weight:700; letter-spacing:.06em; color:var(--link);
  background:var(--accent-050); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.3rem .6rem; }
.camp-code--lg{ margin-top:var(--space-4); }
.camp-code--lg .camp-code__value{ font-size:var(--text-xl); letter-spacing:.1em; padding:.55rem 1rem; border-radius:var(--radius); }
.camp-code__copy{ display:inline-flex; align-items:center; gap:var(--space-1); padding:.3rem .6rem;
  border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--card); color:var(--ink-2);
  font-size:var(--text-xs); font-weight:600; cursor:pointer; transition:border-color .12s ease, color .12s ease; }
.camp-code__copy:hover{ border-color:var(--accent); color:var(--accent); }
.copy-btn{ cursor:pointer; }
.copy-btn svg{ flex:none; }

/* Small pill tag (e.g. "no adverts enrolled yet") */
.camp-tag{ display:inline-flex; align-items:center; padding:.2rem .6rem; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; background:var(--page); color:var(--ink-2); border:1px solid var(--line-2); }
.camp-tag--warn{ background:var(--amber-050); color:var(--ink); border-color:var(--amber); }

.camp-enrol-note{ margin:var(--space-4) 0 0; padding:var(--space-3) var(--space-4); font-size:var(--text-sm);
  color:var(--ink-2); background:var(--accent-050); border:1px solid var(--line-2); border-radius:var(--radius); }
.camp-enrol-note code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700;
  letter-spacing:.06em; color:var(--link); }

/* ---------- Just-created callout ---------- */
.camp-created{ background:linear-gradient(160deg, var(--accent-050), var(--card)); border:1px solid var(--line-2);
  border-radius:var(--radius-lg); padding:var(--space-6); margin-bottom:var(--space-6);
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap;
  box-shadow:var(--shadow-sm); }
.camp-created__body{ min-width:0; flex:1 1 340px; }
.camp-created__eyebrow{ margin:0 0 var(--space-1); font-size:var(--text-sm); font-weight:600; color:var(--accent); }
.camp-created__title{ font-size:var(--text-xl); margin:0 0 var(--space-2); }
.camp-created__lead{ margin:0; font-size:var(--text-sm); color:var(--ink-2); max-width:56ch; }
.camp-created__actions{ display:flex; flex-direction:column; gap:var(--space-2); flex:none; }

/* ---------- Budget slider (create + edit) ---------- */
.camp-budget{ display:flex; flex-direction:column; gap:var(--space-4); background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); }
.camp-budget__value{ display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
.camp-budget__amount{ font-size:var(--text-4xl); font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1; }
.camp-budget__over{ font-size:var(--text-sm); color:var(--ink-2); }
.camp-slider{ width:100%; accent-color:var(--accent); height:6px; cursor:pointer; }
.camp-budget__input{ max-width:260px; }
.camp-budget__helper{ margin:0; font-size:var(--text-sm); color:var(--ink-2); padding-top:var(--space-2);
  border-top:1px solid var(--line); }
.camp-budget__facts{ display:flex; flex-wrap:wrap; gap:var(--space-3); list-style:none; margin:0; padding:0; }
.camp-budget__facts li{ flex:1 1 140px; background:var(--accent-050); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:var(--space-3) var(--space-4); }
.camp-budget__fact-num{ display:block; font-size:var(--text-xl); font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1.1; }
.camp-budget__fact-lbl{ display:block; margin-top:2px; font-size:var(--text-xs); color:var(--ink-3); }

/* =====================================================================
   Campaign builder (create + edit)
   ===================================================================== */
.camp-form__grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--space-8); align-items:start; }
.camp-form__main{ min-width:0; }
.camp-form-page .breadcrumb{ margin-bottom:var(--space-4); }
.camp-form__main h1{ font-size:var(--text-3xl); }
.camp-form__main .lead{ max-width:56ch; margin-bottom:var(--space-8); }
.camp-form__title{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.camp-form__title h1{ margin-bottom:var(--space-3); }

.camp-fieldset{ border:0; margin:0 0 var(--space-6); padding:0; }
.camp-fieldset legend{ font-size:var(--text-lg); font-weight:600; letter-spacing:-.01em; color:var(--ink);
  margin-bottom:var(--space-4); padding:0; }

/* Radio cards (objective + scope) */
.camp-radio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.camp-scope{ display:flex; flex-direction:column; gap:var(--space-3); }
.camp-radio{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4);
  border:1px solid var(--line-2); border-radius:var(--radius); cursor:pointer;
  transition:border-color .12s ease, background .12s ease; }
.camp-radio:hover{ border-color:var(--accent); }
.camp-radio:has(input:checked){ border-color:var(--accent); background:var(--accent-050); }
.camp-radio:has(input:disabled){ opacity:.6; cursor:not-allowed; }
.camp-radio input{ width:18px; height:18px; margin-top:2px; accent-color:var(--accent); flex:none; }
.camp-radio__body{ display:flex; flex-direction:column; gap:2px; }
.camp-radio__title{ font-weight:600; }
.camp-radio__desc{ font-size:var(--text-sm); color:var(--ink-2); }
.camp-radio--slim{ padding:var(--space-3) var(--space-4); }

.camp-scope__job{ padding:var(--space-4); border-left:2px solid var(--line-2); margin-left:var(--space-2); }

/* Money + budget rows */
.camp-input-money{ max-width:220px; }
.camp-budget-row,.camp-date-row{ grid-template-columns:1fr 1fr; }

.camp-draft-toggle{ margin-bottom:var(--space-6); }
.camp-form__submit{ display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* ---------- Builder side panel ---------- */
.camp-form__side{ position:sticky; top:calc(66px + var(--space-4)); }
.camp-side-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-sm); }
.camp-side-card h2{ font-size:var(--text-lg); margin:var(--space-5) 0 var(--space-3); }
.camp-side-wallet{ background:var(--accent-050); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }
.camp-side-wallet--low{ background:var(--amber-050); border-color:var(--amber); }
.camp-side-wallet__label{ font-size:var(--text-sm); color:var(--ink-2); font-weight:500; }
.camp-side-wallet__amount{ font-size:var(--text-2xl); font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1; }
.camp-side-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--space-3); }
.camp-side-list li{ position:relative; padding-left:var(--space-5); font-size:var(--text-sm); color:var(--ink-2); }
.camp-side-list li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px;
  border-radius:50%; background:var(--accent); }
.camp-side-note{ margin:var(--space-4) 0 0; font-size:var(--text-sm); color:var(--ink-3); }
.camp-side-note--warn{ color:var(--red-strong); font-weight:500; }
.camp-side-facts{ margin:0; display:flex; flex-direction:column; gap:var(--space-2); }
.camp-side-facts div{ display:flex; justify-content:space-between; gap:var(--space-3);
  padding-bottom:var(--space-2); border-bottom:1px solid var(--line); }
.camp-side-facts div:last-child{ border-bottom:0; padding-bottom:0; }
.camp-side-facts dt{ font-size:var(--text-sm); color:var(--ink-2); }
.camp-side-facts dd{ margin:0; font-size:var(--text-sm); font-weight:600; color:var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .camp-form__grid{ grid-template-columns:1fr; }
  .camp-form__side{ position:static; }
  .camp-metrics{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .camp-summary{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .camp__head-actions{ width:100%; }
  .camp__head-actions .btn{ width:100%; }
  .camp-radio-grid{ grid-template-columns:1fr; }
  .camp-budget-row,.camp-date-row{ grid-template-columns:1fr; }
  .camp-metrics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .camp-input-money{ max-width:none; }
  .camp-item__actions{ width:100%; }
  .camp-item__actions .btn,.camp-inline-form{ flex:1; }
  .camp-inline-form .btn{ width:100%; }
  .camp-created__actions{ width:100%; }
  .camp-created__actions .btn{ width:100%; }
  .camp-budget__input{ max-width:none; }
  .camp-budget__amount{ font-size:var(--text-3xl); }
}

@media (prefers-reduced-motion:reduce){
  .camp-item,.camp-radio{ transition:none; }
}
/* ==========================================================================
   Candidate profile + CV (account) and the public candidate profile.
   Namespaced .profile-* and .cand-* so nothing leaks via the global glob.
   ========================================================================== */

/* ---------- Account: Profile and CV ---------- */
.profile-page{ padding-block:var(--space-8) var(--space-16); }
.profile-page__head{ margin-bottom:var(--space-6); }
.profile-page__head h1{ font-size:var(--text-3xl); margin-bottom:var(--space-2); }

.profile-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:var(--space-6);
  align-items:start;
}
.profile-form{ display:flex; flex-direction:column; gap:var(--space-5); min-width:0; }
.profile-side{ display:flex; flex-direction:column; gap:var(--space-5); min-width:0; }

.profile-card{ padding:var(--space-6); }
.profile-card__title{ font-size:var(--text-xl); margin-bottom:var(--space-5); }

/* Visibility opt-in card */
.profile-visible{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  padding:var(--space-5) var(--space-6);
  border-color:var(--line-2);
}
.profile-visible.is-on{
  border-color:var(--accent);
  background:linear-gradient(180deg, var(--accent-050), var(--card));
}
.profile-visible__text{ min-width:0; }
.profile-visible__text h2{ font-size:var(--text-lg); margin-bottom:var(--space-1); }
.profile-visible__note{ margin:0; font-size:var(--text-sm); color:var(--ink-2); max-width:52ch; }

/* Toggle switch (scoped under the visibility card so it cannot leak) */
.profile-visible .switch{
  display:inline-flex; align-items:center; gap:var(--space-3);
  cursor:pointer; flex:none; user-select:none;
}
.profile-visible .switch__input{ position:absolute; opacity:0; width:1px; height:1px; }
.profile-visible .switch__track{
  position:relative; width:52px; height:30px; flex:none;
  background:var(--skip); border-radius:var(--radius-pill);
  transition:background .18s ease;
}
.profile-visible .switch__thumb{
  position:absolute; top:3px; left:3px; width:24px; height:24px;
  background:#fff; border-radius:50%; box-shadow:var(--shadow-sm);
  transition:transform .18s ease;
}
.profile-visible .switch__input:checked + .switch__track{ background:var(--accent); }
.profile-visible .switch__input:checked + .switch__track .switch__thumb{ transform:translateX(22px); }
.profile-visible .switch__input:focus-visible + .switch__track{ box-shadow:var(--focus-ring); }
.profile-visible .switch__state{ font-size:var(--text-sm); font-weight:600; color:var(--ink-2); min-width:3.5em; }

/* Field pairs + salary */
.profile-form__pair{ grid-template-columns:1fr 1fr; }
.profile-form__pair .form-group{ margin-bottom:0; }
.profile-form__skills{ min-height:88px; }
.profile-form__opt{ font-weight:400; color:var(--ink-3); font-size:var(--text-xs); }

.profile-salary{ display:flex; align-items:stretch; gap:var(--space-2); }
.profile-salary__prefix{
  display:inline-flex; align-items:center; padding:0 var(--space-3);
  background:var(--page); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  color:var(--ink-2); font-weight:600;
}
.profile-salary__amount{ flex:1 1 auto; min-width:0; }
.profile-salary__period{ flex:0 0 auto; width:auto; }

.profile-form__actions{ margin-top:var(--space-5); }

/* CV card */
.profile-cv__empty{ font-size:var(--text-sm); color:var(--ink-2); }
.profile-cv__current{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--page); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:var(--space-4);
}
.profile-cv__badge{
  display:inline-flex; align-items:center; justify-content:center;
  flex:none; width:44px; height:44px; border-radius:var(--radius-sm);
  background:var(--accent-050); color:var(--accent-strong);
  font-size:var(--text-xs); font-weight:700; letter-spacing:.03em;
}
.profile-cv__meta{ display:flex; flex-direction:column; min-width:0; }
.profile-cv__name{ font-weight:600; }
.profile-cv__when{ font-size:var(--text-xs); color:var(--ink-3); }
.profile-cv__actions{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-5); }
.profile-cv__delete{ margin:0; }

.profile-cv__parsed{
  border-top:1px solid var(--line); padding-top:var(--space-5); margin-bottom:var(--space-5);
}
.profile-cv__parsed-head{ font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:var(--space-3); }
.profile-cv__years{ font-size:var(--text-sm); color:var(--ink-2); margin-bottom:var(--space-3); }
.profile-cv__chips{ gap:var(--space-2); margin-bottom:var(--space-3); }

.profile-cv__upload{
  border-top:1px solid var(--line); padding-top:var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-2);
}
.profile-cv__file{ padding:var(--space-3); font-size:var(--text-sm); }
.profile-cv__upload .btn{ margin-top:var(--space-2); }

/* Non-interactive chip variant (used on profile + candidate pages) */
.chip--static{ cursor:default; }
.chip--static:hover{ border-color:var(--line-2); color:var(--ink-2); box-shadow:none; transform:none; }

/* ---------- Public candidate profile ---------- */
.cand-page{ padding-block:var(--space-8) var(--space-16); max-width:var(--container-narrow); }
.cand-card{ padding:var(--space-8); }
.cand-card:hover{ box-shadow:none; transform:none; }

.cand-hero{ display:flex; gap:var(--space-5); align-items:flex-start; margin-bottom:var(--space-6); }
.cand-hero__avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:64px; height:64px; border-radius:50%;
  background:var(--accent-050); color:var(--accent-strong);
  font-size:var(--text-2xl); font-weight:700;
}
.cand-hero__body{ min-width:0; }
.cand-hero__name{ font-size:var(--text-2xl); margin:var(--space-2) 0 var(--space-1); }
.cand-hero__title{ margin:0 0 var(--space-3); font-size:var(--text-lg); color:var(--ink-2); font-weight:500; }
.cand-hero__meta{ display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); }
.cand-hero__metaitem{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-sm); color:var(--ink-2);
}
.cand-hero__metaitem svg{ color:var(--accent); flex:none; }

.cand-section{ border-top:1px solid var(--line); padding-top:var(--space-5); margin-top:var(--space-5); }
.cand-section__head{ font-size:var(--text-sm); text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:var(--space-3); }
.cand-summary{ margin:0; font-size:var(--text-lg); line-height:1.55; color:var(--ink); }
.cand-avail{ margin:0; color:var(--ink-2); }
.cand-skills{ gap:var(--space-2); }

.cand-actions{ border-top:1px solid var(--line); padding-top:var(--space-6); margin-top:var(--space-6); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.cand-actions__msg{ margin:0; }
.cand-actions__note{ flex-basis:100%; margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--ink-3); }
.cand-actions--guest{ flex-direction:column; align-items:flex-start; }
.cand-actions--guest .cand-actions__note{ margin:0; }

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .profile-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .profile-visible{ flex-direction:column; align-items:flex-start; }
  .profile-form__pair{ grid-template-columns:1fr; gap:var(--space-5); }
  .profile-form__pair .form-group{ margin-bottom:0; }
  .cand-card{ padding:var(--space-6); }
  .cand-hero{ flex-direction:column; }
}
/* =====================================================================
   Weekend, casual & event work hub. Energetic but on the soft-premium
   system: accent-led hero, quick chips, sector tiles, a card grid.
   Tokens only.
   ===================================================================== */

.casual-hero {
  background:
    radial-gradient(120% 90% at 88% -10%, var(--accent-050), transparent 60%),
    linear-gradient(180deg, var(--surface, var(--card)), var(--page));
  border-bottom: 1px solid var(--line);
  padding: var(--space-12) 0 var(--space-10);
}
.casual-hero .eyebrow { color: var(--accent); }
.casual-hero h1 {
  font-size: clamp(var(--text-3xl), 6vw, 3rem);
  line-height: 1.05; letter-spacing: -0.02em; margin: var(--space-3) 0 var(--space-3);
  max-width: 16ch;
}
.casual-hero .lead { max-width: 52ch; color: var(--ink-2); font-size: var(--text-lg); }

.casual-search { display: flex; gap: var(--space-2); margin: var(--space-6) 0 var(--space-5); max-width: 520px; flex-wrap: wrap; }
.casual-search__field { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.casual-search__field svg { position: absolute; left: var(--space-3); color: var(--ink-faint); pointer-events: none; }
.casual-search__field .form-input { width: 100%; padding-left: calc(var(--space-3) * 2 + 18px); }
.casual-search .btn { flex: 0 0 auto; }

.casual-trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; }
.casual-trust li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.casual-trust svg { color: var(--accent); flex: none; }

.casual-body { padding: var(--space-8) 0 var(--space-16); }

/* Quick-filter chips */
.casual-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.casual-chip {
  display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-2, var(--line)); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); background: var(--card);
  text-decoration: none; white-space: nowrap; transition: border-color .12s, color .12s, background .12s;
}
.casual-chip:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.casual-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Sector tiles */
.casual-sectors { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.casual-sector {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--text-sm); color: var(--ink-2); background: var(--card); text-decoration: none;
}
.casual-sector:hover { border-color: var(--accent); color: var(--link); background: var(--accent-050); text-decoration: none; }

.casual-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.casual-results-head h2 { font-size: var(--text-xl); font-weight: 650; margin: 0; }
.casual-results-head h2 strong { color: var(--link); }
.casual-clear { font-size: var(--text-sm); color: var(--link); }

.casual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
@media (max-width: 560px) { .casual-grid { grid-template-columns: 1fr; } }

.casual-empty { text-align: center; padding: var(--space-12) var(--space-4); color: var(--ink-2); }
.casual-empty h3 { color: var(--ink); font-size: var(--text-lg); margin-bottom: var(--space-2); }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.pagination__at { font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Safety reassurance */
.casual-safe {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin-top: var(--space-8); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); background: var(--accent-050);
  font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5;
}
.casual-safe svg { color: var(--accent); flex: none; margin-top: 1px; }
.casual-safe strong { color: var(--ink); }
/* =====================================================================
   Recruiter directory + company profiles. Soft-premium, CSS vars only.
   ===================================================================== */

/* ---------- Shared: star rating ---------- */
.stars{ position:relative; display:inline-block; white-space:nowrap; line-height:1;
  font-size:var(--text-base); letter-spacing:2px; vertical-align:middle; }
.stars__base{ color:var(--skip); }
.stars__fill{ position:absolute; inset:0; overflow:hidden; width:var(--star-pct,0%); color:var(--amber); }
.stars--lg{ font-size:var(--text-xl); letter-spacing:3px; }
.muted-inline{ color:var(--ink-3); font-size:var(--text-sm); font-weight:400; }

/* Shared avatar (logo or initial) */
.company-avatar{ flex:none; width:52px; height:52px; border-radius:var(--radius);
  object-fit:cover; background:var(--card); border:1px solid var(--line); }
.company-avatar--initial{ display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-050); color:var(--accent); font-weight:700; font-size:var(--text-xl);
  border-color:var(--line-2); }
.verified-tick{ flex:none; color:var(--accent); vertical-align:middle; }

.companies-section__head{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-5); }
.companies-section__head h2{ margin:0; font-size:var(--text-2xl); }
.companies-section__note{ font-size:var(--text-sm); font-weight:500; color:var(--ink-3); }

/* ---------- Hub hero ---------- */
.companies-hero{ padding:var(--space-8) 0 var(--space-6); }
.companies-hero .breadcrumb{ margin-bottom:var(--space-4); }
.companies-hero h1{ font-size:clamp(2rem,5vw,var(--text-4xl)); max-width:18ch; margin-bottom:var(--space-4); }
.companies-hero .lead{ max-width:64ch; }

/* Filter form */
.companies-filter{ margin-top:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); }
.companies-filter__search{ display:flex; align-items:center; gap:var(--space-3);
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:0 var(--space-4); box-shadow:var(--shadow-sm); max-width:640px; }
.companies-filter__search svg{ flex:none; color:var(--ink-faint); }
.companies-filter__search input{ width:100%; border:0; background:transparent; padding:.85rem 0;
  font-size:var(--text-base); color:var(--ink); }
.companies-filter__search input::placeholder{ color:var(--ink-3); }
.companies-filter__search input:focus{ outline:none; }
.companies-filter__selects{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.companies-filter__selects .form-select{ width:auto; min-width:150px; flex:1 1 150px; max-width:220px; }
.companies-filter__selects .btn{ flex:none; }

/* ---------- Body ---------- */
.companies-body{ padding-bottom:var(--space-16); }

/* A-Z jumplist */
.az-nav{ display:flex; flex-wrap:wrap; gap:var(--space-1); margin:var(--space-6) 0 var(--space-8);
  padding-bottom:var(--space-5); border-bottom:1px solid var(--line); }
.az-nav__item{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px;
  padding:0 var(--space-2); border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:600;
  color:var(--ink-2); transition:background .12s ease, color .12s ease; }
a.az-nav__item:hover{ background:var(--accent-050); color:var(--accent); text-decoration:none; }
.az-nav__item.is-active{ background:var(--accent); color:#fff; }
.az-nav__item.is-empty{ color:var(--line-2); cursor:default; }

/* Top-rated strip */
.companies-toprated{ margin-bottom:var(--space-10); }
.toprated-grid{ display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.toprated-card{ display:flex; gap:var(--space-3); align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4);
  color:inherit; transition:box-shadow .14s ease, transform .14s ease, border-color .14s ease; }
.toprated-card:hover{ text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--line-2); }
.toprated-card .company-avatar{ width:44px; height:44px; }
.toprated-card .company-avatar--initial{ font-size:var(--text-lg); }
.toprated-card__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.toprated-card__name{ font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:var(--space-1);
  overflow:hidden; text-overflow:ellipsis; }
.toprated-card__rating{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); }
.toprated-card__rating b{ color:var(--ink); }
.toprated-card__loc{ font-size:var(--text-sm); color:var(--ink-3); }

/* Toolbar */
.companies-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  flex-wrap:wrap; margin-bottom:var(--space-5); }
.companies-count{ margin:0; color:var(--ink-2); font-size:var(--text-sm); }
.companies-count strong{ color:var(--ink); }
.companies-clear{ font-size:var(--text-sm); font-weight:600; color:var(--accent); }

/* Directory grid */
.companies-grid{ display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.company-card{ position:relative; display:flex; flex-direction:column; gap:var(--space-4);
  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; }
.company-card:hover,.company-card:focus-within{ box-shadow:var(--shadow-md); transform:translateY(-1px); border-color:var(--line-2); }
.company-card__head{ display:flex; gap:var(--space-3); align-items:flex-start; }
.company-card__titles{ min-width:0; }
.company-card__name{ font-size:var(--text-lg); line-height:1.25; margin:0 0 var(--space-1);
  display:flex; align-items:center; gap:var(--space-1); }
.company-card__link{ color:var(--ink); }
.company-card__link:hover{ color:var(--accent-strong); text-decoration:none; }
.company-card__link::after{ content:""; position:absolute; inset:0; border-radius:var(--radius-lg); }
.company-card__meta{ margin:0; font-size:var(--text-sm); color:var(--ink-3); display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--space-1); }
.company-card__type{ font-weight:600; color:var(--ink-2); }
.company-card__rating{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); }
.company-card__rating b{ color:var(--ink); }
.company-card__norating{ font-size:var(--text-sm); color:var(--ink-faint); }
.company-card__sectors{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.company-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  margin-top:auto; padding-top:var(--space-3); border-top:1px solid var(--line); }
.company-card__jobs{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm);
  font-weight:600; color:var(--apply-text); }
.company-card__jobs--none{ color:var(--ink-3); font-weight:500; }
.company-card__jobs .dot{ width:8px; height:8px; border-radius:50%; background:var(--apply); flex:none;
  box-shadow:0 0 0 3px var(--apply-050); }
.company-card__more{ color:var(--ink-faint); font-size:var(--text-lg); transition:transform .12s ease; }
.company-card:hover .company-card__more{ transform:translateX(3px); color:var(--accent); }

/* Claim banner */
.companies-claim{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-5); margin-top:var(--space-12); padding:var(--space-8);
  background:var(--accent-050); border:1px solid var(--line-2); border-radius:var(--radius-lg); }
.companies-claim h2{ font-size:var(--text-xl); margin:0 0 var(--space-1); }
.companies-claim p{ margin:0; color:var(--ink-2); font-size:var(--text-sm); max-width:52ch; }
.companies-claim .btn{ flex:none; }

/* =====================================================================
   Profile
   ===================================================================== */
/* Longhands only, so the container's horizontal gutters (padding:0 var(--space-5))
   are preserved. A `padding` shorthand here would zero the side padding and
   break alignment with every other .container page. */
.company-profile{ padding-top:var(--space-6); padding-bottom:var(--space-16); }
.company-profile .breadcrumb{ margin-bottom:var(--space-5); }

.company-hero{ display:flex; gap:var(--space-5); align-items:flex-start; padding-bottom:var(--space-8);
  border-bottom:1px solid var(--line); margin-bottom:var(--space-8); }
.company-hero__logo{ flex:none; width:76px; height:76px; border-radius:var(--radius-lg);
  object-fit:cover; background:var(--card); border:1px solid var(--line); }
.company-hero__logo--initial{ display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-050); color:var(--accent); font-weight:700; font-size:var(--text-3xl); border-color:var(--line-2); }
.company-hero__body{ min-width:0; flex:1; }
.company-hero__badges{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
.company-hero__body h1{ font-size:clamp(1.75rem,4vw,var(--text-3xl)); margin:0 0 var(--space-2); }
.company-hero__headline{ font-size:var(--text-lg); color:var(--ink-2); margin:0 0 var(--space-3); max-width:60ch; }
.company-hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-5);
  margin-bottom:var(--space-5); }
.company-hero__loc{ display:inline-flex; align-items:center; gap:var(--space-2); color:var(--ink-2); font-size:var(--text-sm); }
.company-hero__loc svg{ color:var(--ink-faint); }
.company-hero__rating{ display:inline-flex; align-items:center; gap:var(--space-2); color:var(--ink); }
.company-hero__rating:hover{ text-decoration:none; }
.company-hero__rating b{ font-size:var(--text-base); }
.company-hero__rating--none{ color:var(--ink-faint); font-size:var(--text-sm); }
.company-hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }

.badge-verified{ background:var(--accent-050); color:var(--accent-strong); border:1px solid var(--line-2); }
.badge-verified svg{ color:var(--accent); }

/* Layout */
.company-layout{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:start; }
.company-main{ min-width:0; }
.company-block{ margin-bottom:var(--space-10); scroll-margin-top:calc(66px + var(--space-4)); }
.company-block h2{ font-size:var(--text-2xl); }
.company-about{ color:var(--ink-2); font-size:var(--text-lg); line-height:1.7; }

.empty-state--inset{ text-align:center; padding:var(--space-8); }
.empty-state--inset h3{ font-size:var(--text-lg); margin-bottom:var(--space-2); }
.empty-state--inset p{ max-width:46ch; margin:0 auto var(--space-5); color:var(--ink-2); }
.btn-sm-inline{ flex:none; padding:.5rem .9rem; font-size:var(--text-sm); }

/* Review summary */
.review-summary{ display:grid; grid-template-columns:1fr; gap:var(--space-6); align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-6); margin-bottom:var(--space-6); }
.review-summary__score{ text-align:center; }
.review-summary__avg{ font-size:var(--text-4xl); font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--ink); }
.review-summary__score .stars{ margin-top:var(--space-2); }
.review-summary__count{ margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--ink-3); }
.review-summary__recommend{ margin:var(--space-1) 0 0; font-size:var(--text-sm); color:var(--ink-2); }
.review-summary__recommend b{ color:var(--apply-text); }
.review-summary__bars{ display:flex; flex-direction:column; gap:var(--space-2); }
.review-bar{ display:grid; grid-template-columns:14px 1fr 34px; align-items:center; gap:var(--space-3); }
.review-bar__label{ font-size:var(--text-sm); color:var(--ink-3); font-weight:600; text-align:right; }
.review-bar__track{ height:8px; border-radius:var(--radius-pill); background:var(--page); overflow:hidden; border:1px solid var(--line); }
.review-bar__fill{ display:block; height:100%; background:var(--amber); border-radius:var(--radius-pill); }
.review-bar__count{ font-size:var(--text-sm); color:var(--ink-3); text-align:right; }

/* Review list */
.review-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-4); }
.review-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); }
.review-card__top{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3); }
.review-card__recommend{ display:inline-flex; align-items:center; gap:var(--space-1);
  font-size:var(--text-xs); font-weight:600; color:var(--apply-text); background:var(--apply-050);
  padding:.2rem .55rem; border-radius:var(--radius-pill); }
.review-card__recommend svg{ color:var(--apply); }
.review-card__title{ font-size:var(--text-lg); margin:0 0 var(--space-2); }
.review-card__body{ color:var(--ink-2); margin:0 0 var(--space-4); }
.review-card__pc{ display:grid; gap:var(--space-3); margin-bottom:var(--space-4); }
.review-pc{ border-radius:var(--radius); padding:var(--space-3) var(--space-4); border:1px solid var(--line); }
.review-pc__label{ display:block; font-size:var(--text-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:var(--space-1); }
.review-pc p{ margin:0; font-size:var(--text-sm); color:var(--ink-2); }
.review-pc--pro{ background:var(--apply-050); border-color:transparent; }
.review-pc--pro .review-pc__label{ color:var(--apply-text); }
.review-pc--con{ background:var(--red-050); border-color:transparent; }
.review-pc--con .review-pc__label{ color:var(--red-strong); }
.review-card__meta{ margin:0; font-size:var(--text-sm); color:var(--ink-3); display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--space-1) var(--space-2); }

/* Aside */
.company-aside{ display:flex; flex-direction:column; gap:var(--space-5); }
.company-facts{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); }
.company-facts__head{ font-size:var(--text-base); margin:0 0 var(--space-4);
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.company-facts__list{ margin:0 0 var(--space-4); }
.company-facts__list div{ display:flex; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-3) 0; border-bottom:1px solid var(--line); }
.company-facts__list div:last-child{ border-bottom:0; }
.company-facts__list dt{ color:var(--ink-3); font-size:var(--text-sm); flex:none; }
.company-facts__list dd{ margin:0; text-align:right; font-weight:600; font-size:var(--text-sm); color:var(--ink); }

.company-claim-card{ background:var(--accent-050); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:var(--space-5); }
.company-claim-card h2{ font-size:var(--text-lg); margin:0 0 var(--space-2); }
.company-claim-card p{ margin:0 0 var(--space-4); font-size:var(--text-sm); color:var(--ink-2); }

/* ---------- Responsive ---------- */
@media (min-width:600px){
  .review-summary{ grid-template-columns:180px 1fr; }
  .review-card__pc{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  .company-layout{ grid-template-columns:minmax(0,1fr) 320px; }
  .company-aside{ position:sticky; top:calc(66px + var(--space-4)); }
}
@media (max-width:560px){
  .company-hero{ flex-direction:column; gap:var(--space-4); }
  .company-hero__actions .btn{ flex:1 1 auto; }
  .companies-claim{ padding:var(--space-6); }
  .companies-claim .btn{ width:100%; }
}
/* =====================================================================
   yournextjob content + legal pages
   About, contact and the legal suite. Soft premium, design tokens only.
   ===================================================================== */

/* ---------- Page header band ---------- */
.content-head{
  background:linear-gradient(180deg, var(--accent-050), var(--page));
  border-bottom:1px solid var(--line);
  padding:var(--space-10) 0 var(--space-8);
}
.content-head .breadcrumb{ padding:0 0 var(--space-3); }
.content-head .eyebrow{ margin-bottom:var(--space-2); }
.content-head h1{ font-size:clamp(2rem, 5vw, var(--text-3xl)); margin-bottom:var(--space-3); }
.content-head .lead{ max-width:58ch; margin:0; }
.content-updated{ margin:var(--space-5) 0 0; font-size:var(--text-sm); color:var(--ink-3); }

/* ---------- Prose body ---------- */
.content-body{ padding:var(--space-12) 0 var(--space-16); }
.content-prose{ color:var(--ink); }
.content-prose > p:first-of-type{ font-size:var(--text-lg); color:var(--ink-2); }
.content-prose h2{
  font-size:var(--text-xl); margin:var(--space-10) 0 var(--space-3);
  scroll-margin-top:84px;
}
.content-prose h2:first-child{ margin-top:0; }
.content-prose h3{ font-size:var(--text-lg); margin:var(--space-6) 0 var(--space-2); }
.content-prose p{ margin:0 0 var(--space-4); }
.content-prose ul,.content-prose ol{ margin:0 0 var(--space-5); padding-left:1.25rem; }
.content-prose li{ margin-bottom:var(--space-2); }
.content-prose li::marker{ color:var(--accent); }
.content-prose a{ color:var(--link); text-decoration:underline; text-underline-offset:2px; }
.content-prose a:hover{ color:var(--accent-strong); }
.content-prose strong{ color:var(--ink); font-weight:600; }

/* Tables (cookie policy) */
.content-prose .table-wrap{ overflow-x:auto; margin:0 0 var(--space-5); }
.content-prose table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.content-prose th,.content-prose td{
  border:1px solid var(--line-2); padding:var(--space-3);
  text-align:left; vertical-align:top;
}
.content-prose thead th{ background:var(--accent-050); font-weight:600; }
.content-prose code{
  background:var(--accent-050); color:var(--accent-strong);
  padding:.1rem .4rem; border-radius:var(--radius-sm); font-size:.88em;
}

/* ---------- Callout ---------- */
.content-callout{
  background:var(--accent-050); border:1px solid var(--line-2);
  border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6);
  margin:0 0 var(--space-8);
}
.content-callout p{ margin:0; color:var(--ink-2); }
.content-callout p + p{ margin-top:var(--space-3); }

/* ---------- "On this page" mini-nav ---------- */
.content-toc{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--card); padding:var(--space-4) var(--space-5);
  margin:0 0 var(--space-8);
}
.content-toc h2{
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); margin:0 0 var(--space-3);
}
.content-toc ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5);
}
.content-toc li{ margin:0; }
.content-toc a{ font-size:var(--text-sm); color:var(--ink-2); text-decoration:none; }
.content-toc a:hover{ color:var(--accent); text-decoration:underline; }

/* ---------- Legal cross-links footer ---------- */
.legal-nav{ margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--line); }
.legal-nav h2{
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); margin-bottom:var(--space-3);
}
.legal-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5); }
.legal-nav li{ margin:0; }
.legal-nav a{ font-size:var(--text-sm); color:var(--ink-2); }
.legal-nav a:hover{ color:var(--accent); }
.legal-nav a[aria-current="page"]{ color:var(--accent); font-weight:600; }

/* ---------- About: belief cards ---------- */
.belief-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-4);
  margin:var(--space-8) 0;
}
.belief{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-5);
}
.belief__ic{
  width:42px; height:42px; border-radius:var(--radius); background:var(--accent-050);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-3);
}
.belief h3{ font-size:var(--text-base); margin-bottom:var(--space-2); }
.belief p{ margin:0; font-size:var(--text-sm); color:var(--ink-2); }

/* ---------- About: honest stats ---------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4);
  margin:var(--space-8) 0;
}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-5); text-align:center;
}
.stat b{ display:block; font-size:var(--text-2xl); color:var(--ink); letter-spacing:-.02em; line-height:1.1; }
.stat span{ display:block; margin-top:var(--space-2); font-size:var(--text-sm); color:var(--ink-2); }

/* ---------- CTA card ---------- */
.content-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-5); background:var(--accent-050); border:1px solid var(--line-2);
  border-radius:var(--radius-lg); padding:var(--space-6) var(--space-8);
  margin-top:var(--space-10);
}
.content-cta h2{ margin:0 0 var(--space-1); font-size:var(--text-xl); }
.content-cta p{ margin:0; color:var(--ink-2); }
.content-cta__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* ---------- Contact layout ---------- */
.contact-grid{ display:grid; gap:var(--space-8); align-items:start; }
.contact-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-6);
}
.contact-card h2{ font-size:var(--text-lg); margin-bottom:var(--space-5); }
.contact-aside > * + *{ margin-top:var(--space-4); }
.contact-aside .card h2{ font-size:var(--text-base); margin-bottom:var(--space-3); }
.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ display:flex; gap:var(--space-3); align-items:flex-start; }
.contact-list li + li{ margin-top:var(--space-4); }
.contact-list svg{ flex:none; color:var(--accent); margin-top:2px; }
.contact-list b{ display:block; font-size:var(--text-sm); color:var(--ink); }
.contact-list a,.contact-list span{ font-size:var(--text-sm); color:var(--ink-2); }
.contact-links{ list-style:none; margin:0; padding:0; }
.contact-links li + li{ margin-top:var(--space-2); }
.contact-links a{ font-size:var(--text-sm); color:var(--ink-2); }
.contact-links a:hover{ color:var(--accent); }

/* ---------- Honeypot (bot trap; hidden from people + assistive tech) ---------- */
.hp-field{
  position:absolute !important; left:-9999px !important; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .belief-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:repeat(2, 1fr); }
  .content-cta{ padding:var(--space-5) var(--space-6); }
}
@media (min-width:860px){
  .contact-grid{ grid-template-columns:1.5fr 1fr; }
}
/* =====================================================================
   yournextjob - Discover (personalised feed, reels, Today's 10)
   Tokens only, soft-premium, mobile-first. All selectors namespaced so
   the globally-loaded sheet cannot leak onto other pages.
   ===================================================================== */

/* ---------- Shared: match ring ---------- */
.d-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: conic-gradient(var(--d-ring-c, var(--accent)) calc(var(--pct, 0) * 3.6deg), var(--line-2) 0);
}
.d-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: var(--card);
}
.d-ring__n {
  position: relative;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.d-ring__n small { font-size: .62em; font-weight: 600; color: var(--ink-3); }
.d-ring.is-high { --d-ring-c: var(--apply); }
.d-ring.is-mid  { --d-ring-c: var(--accent); }
.d-ring.is-low  { --d-ring-c: var(--amber); }

/* ---------- Shared: reason chips ---------- */
.d-reasons {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.d-reason {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--accent-050);
  color: var(--link);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.35;
}

/* =====================================================================
   /discover - personalised feed
   ===================================================================== */
.discover {
  padding: var(--space-8) var(--space-5) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.discover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.discover-head .eyebrow { margin-bottom: var(--space-1); }
.discover-title { font-size: var(--text-2xl); margin: 0 0 var(--space-1); }
.discover-sub { margin: 0; font-size: var(--text-sm); max-width: 46ch; }
.discover-refine { flex: none; padding: .5rem .9rem; font-size: var(--text-sm); }

.discover-modes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.discover-mode {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--ink);
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
.discover-mode:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--accent); }
.discover-mode__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--accent-050);
  color: var(--accent);
}
.discover-mode__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.discover-mode__text strong { font-size: var(--text-base); }
.discover-mode__text small { color: var(--ink-2); font-size: var(--text-xs); line-height: 1.3; }

.discover-quizcard {
  display: flex;
  flex-direction: column;      /* stack on mobile so the copy is not crushed */
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-050), var(--card) 82%);
}
.discover-quizcard .btn { width: 100%; }
.discover-quizcard__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
}
.discover-quizcard__text { flex: 1; min-width: 0; }
.discover-quizcard__text h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.discover-quizcard__text p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.discover-quizcard .btn { flex: none; }

.discover-count { margin: 0; color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }

.discover-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.discover-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
.discover-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--line-2); }
.discover-card__logo, .discover-card__avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
}
.discover-card__logo { object-fit: cover; background: var(--card); border: 1px solid var(--line-2); }
.discover-card__avatar { display: grid; place-items: center; background: var(--accent); color: #fff; font-size: var(--text-xl); font-weight: 600; }
.discover-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.discover-card__title { margin: 0; font-size: var(--text-base); line-height: 1.3; }
.discover-card__link { color: var(--ink); }
.discover-card__link:hover { color: var(--link); text-decoration: none; }
.discover-card__company { margin: 0; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
.discover-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); color: var(--ink-2); font-size: var(--text-sm); }
.discover-card__meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.discover-card__meta svg { color: var(--ink-faint); }
.discover-card__pay { color: var(--ink) !important; font-weight: 600; }
.discover-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.discover-card__ring { flex: none; align-self: center; }

.discover-more { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }

.discover-empty, .today-empty {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.discover-empty h2, .today-empty h2 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.discover-empty p, .today-empty p { margin: 0 auto var(--space-4); max-width: 40ch; }
.discover-empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* =====================================================================
   /discover/reels - full-screen vertical feed
   ===================================================================== */
body.page-reels { overflow: hidden; }
.page-reels main { padding: 0; }

.reels {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  background: var(--page);
}
.reels__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.reels__back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  background: var(--page);
}
.reels__back:hover { color: var(--accent); background: var(--accent-050); }
.reels__heading { margin: 0; font-weight: 700; font-size: var(--text-base); }
.reels__refine {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--link);
}

.reels__feed {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reels__feed::-webkit-scrollbar { display: none; }
.reels__sentinel { height: 1px; scroll-snap-align: none; }

.reel {
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
}
.reel:focus-visible { outline: none; }
.reel__card {
  width: 100%;
  max-width: 480px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transition: opacity .2s ease;
}
.reel.is-skipped .reel__card { opacity: .5; }

.reel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.reel__logo, .reel__avatar { flex: none; width: 56px; height: 56px; border-radius: var(--radius); }
.reel__logo { object-fit: cover; border: 1px solid var(--line-2); background: var(--card); }
.reel__avatar { display: grid; place-items: center; background: var(--accent); color: #fff; font-size: var(--text-2xl); font-weight: 600; }
.reel__ring { width: 64px; height: 64px; }
.reel__ring::after { inset: 6px; }
.reel__ring .d-ring__n { font-size: var(--text-base); }
.reel__unlock {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--link);
  padding: .35rem .7rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-pill);
}
.reel__unlock:hover { border-color: var(--accent); text-decoration: none; }

.reel__body { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
.reel__title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reel__company { margin: 0; color: var(--ink-2); font-weight: 500; }
.reel__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.reel__facts li { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-2); font-size: var(--text-sm); }
.reel__facts svg { flex: none; color: var(--ink-faint); }
.reel__pay { color: var(--ink) !important; font-weight: 600; }
.reel__pay svg { color: var(--apply-text) !important; }
.reel__summary {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reel__more { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--link); font-size: var(--text-sm); font-weight: 600; }
.reel__more:hover { text-decoration: none; }

.reel__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin-top: auto; }
.reel__btn {
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 2px solid var(--line-2);
  background: var(--card);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.reel__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.reel__btn:active { transform: translateY(0); }
.reel__btn--skip { width: 58px; height: 58px; color: var(--skip); }
.reel__btn--skip:hover { color: var(--red); border-color: var(--red); }
.reel__btn--save { width: 52px; height: 52px; color: var(--accent); }
.reel__btn--save:hover { border-color: var(--accent); background: var(--accent-050); }
.reel.is-saved .reel__btn--save { color: #fff; background: var(--accent); border-color: var(--accent); }
.reel__btn--apply { width: 68px; height: 68px; color: #fff; background: var(--accent); border-color: var(--accent); }
.reel__btn--apply:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.reel--empty .reel__card--empty { text-align: center; align-items: center; }
.reel__emptyicon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-pill);
  background: var(--apply-050);
  color: var(--apply-text);
}
.reel__card--empty h2 { margin: 0; font-size: var(--text-xl); }
.reel__card--empty p { margin: 0; max-width: 34ch; }
.reel__emptyactions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

.reels__hint { flex: none; margin: 0; text-align: center; color: var(--ink-3); font-size: var(--text-xs); padding: var(--space-2) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); }

/* =====================================================================
   /discover/today - "Today's 10"
   ===================================================================== */
.today { padding: var(--space-8) var(--space-5) var(--space-16); display: flex; flex-direction: column; gap: var(--space-6); }
.today-head .eyebrow { margin-bottom: var(--space-1); }
.today-title { margin: 0 0 var(--space-1); font-size: var(--text-2xl); }
.today-sub { margin: 0; font-size: var(--text-sm); max-width: 52ch; }

.today-nudge {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-050);
}
.today-nudge p { margin: 0; font-size: var(--text-sm); color: var(--ink); }

.today-list { list-style: none; margin: 0; padding: 0; counter-reset: today; display: flex; flex-direction: column; gap: var(--space-4); }
.today-card { display: flex; align-items: stretch; gap: var(--space-3); }
.today-card__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--page);
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  font-size: var(--text-sm);
  font-weight: 700;
}
.today-card__inner {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
.today-card__inner:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--line-2); }
.today-card__logo, .today-card__avatar { flex: none; width: 48px; height: 48px; border-radius: var(--radius); }
.today-card__logo { object-fit: cover; border: 1px solid var(--line-2); background: var(--card); }
.today-card__avatar { display: grid; place-items: center; background: var(--accent); color: #fff; font-size: var(--text-lg); font-weight: 600; }
.today-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.today-card__title { margin: 0; font-size: var(--text-base); line-height: 1.3; }
.today-card__link { color: var(--ink); }
.today-card__link:hover { color: var(--link); text-decoration: none; }
.today-card__company { margin: 0; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
.today-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); color: var(--ink-2); font-size: var(--text-sm); }
.today-card__meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.today-card__meta svg { color: var(--ink-faint); }
.today-card__pay { color: var(--ink) !important; font-weight: 600; }
.today-card__ring { flex: none; align-self: center; }

.today-end {
  margin-top: var(--space-4);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--accent-050), var(--card) 55%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.today-end:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.today-end__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--apply-050); color: var(--apply-text); }
.today-end h2 { margin: 0; font-size: var(--text-2xl); }
.today-end > p { margin: 0; max-width: 42ch; }
.today-end .alert-cta { width: 100%; margin-top: var(--space-2); text-align: left; }
.today-end__links { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .discover-mode, .discover-card, .today-card__inner, .reel__btn { transition: none; }
  .discover-mode:hover, .discover-card:hover, .today-card__inner:hover, .reel__btn:hover { transform: none; }
}

/* ---------- Larger screens ---------- */
@media (min-width: 640px) {
  .discover-quizcard { flex-direction: row; align-items: center; gap: var(--space-5); }
  .discover-quizcard .btn { width: auto; }
  .discover-quizcard__text h2 { font-size: var(--text-xl); }
  .today-card__num { width: 34px; height: 34px; }
}
@media (max-width: 400px) {
  .discover-modes { grid-template-columns: 1fr; }
}

/* Two-up mode cards ("Reels" / "Today's 10") cram + wrap their labels on any
   phone wider than 400px; stack them full-width up to 600px so they read cleanly. */
@media (max-width: 600px) {
  .discover-modes { grid-template-columns: 1fr; }
}
/* =====================================================================
   yournextjob - employers area
   Marketing landing, pricing, post-a-job form, dashboard, thanks.
   CSS variables only. Mobile-first.
   ===================================================================== */

/* ---------- Shared bits ---------- */
.emp-section-head{ max-width:56ch; margin-bottom:var(--space-8); }
.emp-section-head h2{ margin-bottom:var(--space-3); }
.emp-section-head .lead{ margin:0; }

.req{ color:var(--red); font-weight:700; }
.form-hint-inline{ font-weight:400; color:var(--ink-3); font-size:var(--text-sm); }

/* Section rhythm helpers: stack sections without doubling top padding.
   Replaces per-section inline padding-top overrides on the employers pages. */
.section--flush{ padding-top:0; }
.section--tight{ padding-top:var(--space-8); }

/* ---------- Hero ---------- */
.emp-hero{ padding:var(--space-16) 0 var(--space-12); }
.emp-hero__inner{ display:grid; gap:var(--space-10); align-items:center; }
.emp-hero__copy h1{ font-size:clamp(2.2rem,5.5vw,var(--text-5xl)); max-width:15ch; margin-bottom:var(--space-5); }
.emp-hero__copy h1 b{ color:var(--accent); font-weight:600; }
.emp-hero__copy .lead{ max-width:52ch; margin-bottom:var(--space-6); }
.emp-hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-4); }

/* Framed image crop, consistent with the home hero (.hero-media): rounded,
   bordered, clipped, soft shadow. Aspect ratio matches the 560x620 source so
   object-fit:cover reframes cleanly without an unwanted crop. */
.emp-hero__media--framed{ border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:28 / 31;
  border:1px solid var(--line-2); box-shadow:var(--shadow-md);
  background:linear-gradient(135deg, var(--accent-050), var(--card) 70%); }
.emp-hero__media--framed img{ width:100%; height:100%; object-fit:cover; }
.emp-hero__placeholder{ position:relative; display:flex; flex-direction:column; gap:var(--space-4);
  padding:var(--space-8); border-radius:var(--radius-xl);
  background:linear-gradient(160deg, var(--accent-050), var(--card)); border:1px solid var(--line-2); box-shadow:var(--shadow-md); }
.emp-hero__card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-5); box-shadow:var(--shadow-sm); }
.emp-hero__card--muted{ opacity:.9; }
.emp-hero__role{ font-weight:600; color:var(--ink); margin:var(--space-3) 0 var(--space-1); }
.emp-hero__pay{ color:var(--apply-text); font-weight:600; margin:0 0 var(--space-1); }
.emp-hero__loc{ color:var(--ink-2); font-size:var(--text-sm); margin:0; }

/* ---------- Trust band ---------- */
.emp-trust-band{ padding:var(--space-8) 0; }
.emp-trust{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-8);
  justify-content:center; }
.emp-trust li{ display:inline-flex; align-items:center; gap:var(--space-2); font-weight:600; color:var(--ink); font-size:var(--text-sm); }
.emp-trust svg{ color:var(--apply-text); flex:none; }

/* ---------- Feature grid ---------- */
.emp-feature-grid .feature.card{ padding:var(--space-6); }
.emp-feature-grid .feature h3{ margin-bottom:var(--space-2); }

/* ---------- How it works ---------- */
.emp-steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-5); counter-reset:none; }
.emp-step{ 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-6); }
.emp-step__num{ flex:none; width:38px; height:38px; border-radius:var(--radius-pill);
  background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--text-lg); }
.emp-step h3{ font-size:var(--text-lg); margin-bottom:var(--space-1); }
.emp-step p{ color:var(--ink-2); margin:0; }
.emp-steps__cta{ text-align:center; margin-top:var(--space-8); }

/* ---------- Reach (upsell) ---------- */
.emp-reach{ display:grid; gap:var(--space-8); padding:var(--space-10); background:var(--accent-050); border-color:var(--line-2); }
.emp-reach:hover{ transform:none; box-shadow:none; }
.emp-reach__copy h2{ margin-bottom:var(--space-3); }
.emp-reach__copy .muted{ max-width:60ch; margin-bottom:var(--space-5); }
.emp-reach__cards{ display:grid; gap:var(--space-4); }
.emp-reach__mini{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:var(--space-5); }
.emp-reach__mini h4{ font-size:var(--text-base); margin:var(--space-3) 0 var(--space-1); }
.emp-reach__mini p{ color:var(--ink-2); font-size:var(--text-sm); margin:0; }

/* ---------- Labelled trust panel ---------- */
.emp-labelled{ display:flex; gap:var(--space-5); align-items:flex-start; background:var(--card);
  border:1px solid var(--line-2); border-left:4px solid var(--accent); border-radius:var(--radius-lg); padding:var(--space-8); }
.emp-labelled__icon{ flex:none; width:52px; height:52px; border-radius:var(--radius); background:var(--accent-050);
  color:var(--accent); display:flex; align-items:center; justify-content:center; }
.emp-labelled h2{ font-size:var(--text-xl); margin-bottom:var(--space-2); }
.emp-labelled .muted{ margin:0; max-width:70ch; }

/* ---------- Final CTA band ---------- */
.emp-final__band{ text-align:center; padding:var(--space-12) var(--space-6);
  background:linear-gradient(135deg, var(--accent), var(--accent-strong)); border-radius:var(--radius-xl); }
.emp-final__band h2{ color:#fff; font-size:var(--text-3xl); margin-bottom:var(--space-3); }
.emp-final__band p{ color:#fff; opacity:.92; max-width:52ch; margin:0 auto var(--space-6); }
.emp-final__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; }
.emp-btn-invert{ background:var(--card); border-color:var(--card); color:var(--accent-strong); }
.emp-btn-invert:hover{ background:var(--card); color:var(--accent); }
.emp-btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); background:transparent; }
.emp-btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* ---------- Pricing ---------- */
.emp-pricing-hero{ padding:var(--space-16) 0 var(--space-4); text-align:center; }
.emp-pricing-hero h1{ max-width:20ch; margin:0 auto var(--space-4); }
.emp-pricing-hero .lead{ max-width:60ch; margin:0 auto; }

.emp-tiers{ display:grid; gap:var(--space-5); align-items:start; }
.emp-tier{ position:relative; background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-6); }
.emp-tier--featured{ border-color:var(--accent); box-shadow:var(--shadow-md); }
.emp-tier__tag{ position:absolute; top:0; left:50%; transform:translate(-50%,-50%); background:var(--accent);
  color:#fff; font-size:var(--text-xs); font-weight:600; padding:.25rem .8rem; border-radius:var(--radius-pill); }
.emp-tier__name{ font-size:var(--text-xl); margin-bottom:var(--space-2); }
.emp-tier__price{ font-size:var(--text-3xl); font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:0 0 var(--space-1); }
.emp-tier__price span{ display:block; font-size:var(--text-sm); font-weight:500; color:var(--ink-3); letter-spacing:0; }
.emp-tier__blurb{ color:var(--ink-2); font-size:var(--text-sm); margin:var(--space-3) 0 var(--space-5); min-height:2.5em; }
.emp-tier__list{ list-style:none; margin:var(--space-6) 0 0; padding:0; display:grid; gap:var(--space-3); }
.emp-tier__list li{ display:flex; gap:var(--space-2); align-items:flex-start; font-size:var(--text-sm); color:var(--ink); }
.emp-tier__list svg{ flex:none; color:var(--apply-text); margin-top:2px; }
.emp-pricing-note{ text-align:center; color:var(--ink-3); font-size:var(--text-sm); margin-top:var(--space-6); }

/* ---------- FAQ ---------- */
.emp-faq{ margin:var(--space-6) 0 var(--space-8); border-top:1px solid var(--line); }
.emp-faq__item{ border-bottom:1px solid var(--line); }
.emp-faq__item summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-4) 0; cursor:pointer; font-weight:600; list-style:none; }
.emp-faq__item summary::-webkit-details-marker{ display:none; }
.emp-faq__item summary svg{ flex:none; color:var(--ink-faint); transition:transform .15s ease; }
.emp-faq__item[open] summary svg{ transform:rotate(180deg); }
.emp-faq__item p{ margin:0 0 var(--space-4); color:var(--ink-2); max-width:66ch; }

/* ---------- Post a job ---------- */
.emp-post{ padding:var(--space-6) 0 var(--space-16); }
.emp-post__grid{ display:grid; gap:var(--space-8); align-items:start; }
.emp-post__main{ min-width:0; }
.emp-post__main h1{ font-size:var(--text-3xl); margin-bottom:var(--space-3); }
.emp-post__main .lead{ max-width:60ch; }
.emp-post__signed{ font-size:var(--text-sm); color:var(--ink-2); background:var(--accent-050);
  border:1px solid var(--line-2); border-radius:var(--radius); padding:var(--space-3) var(--space-4); }

.emp-fieldset{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6);
  margin:0 0 var(--space-5); background:var(--card); min-width:0; }
.emp-fieldset legend{ font-weight:600; font-size:var(--text-lg); color:var(--ink); padding:0 var(--space-2);
  margin-left:calc(var(--space-2) * -1); }
.emp-fieldset__intro{ margin-top:0; margin-bottom:var(--space-4); }
.emp-form__terms{ margin:var(--space-2) 0 var(--space-5); }

/* Salary block */
.emp-salary__figures{ align-items:end; transition:opacity .15s ease; }
.emp-salary__figures.is-disabled{ opacity:.45; }
.emp-salary__competitive{ margin-top:var(--space-2); }
.emp-input-prefix{ position:relative; }
.emp-input-prefix > span{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%);
  color:var(--ink-3); pointer-events:none; }
.emp-input-prefix .form-input{ padding-left:1.7rem; }
.emp-textarea-tall{ min-height:180px; }

/* Apply method radios */
.emp-apply{ display:grid; gap:var(--space-3); }
.emp-radio{ display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-4);
  border:1px solid var(--line-2); border-radius:var(--radius); cursor:pointer; transition:border-color .12s ease, background .12s ease; }
.emp-radio:hover{ border-color:var(--accent); }
.emp-radio input{ width:18px; height:18px; margin-top:2px; accent-color:var(--accent); flex:none; }
.emp-radio:has(input:checked){ border-color:var(--accent); background:var(--accent-050); }
.emp-radio__body{ display:flex; flex-direction:column; gap:2px; }
.emp-radio__title{ font-weight:600; display:inline-flex; align-items:center; gap:var(--space-2); }
.emp-radio__desc{ font-size:var(--text-sm); color:var(--ink-2); }
.emp-apply__extra{ padding:var(--space-4) var(--space-4) var(--space-1); border-left:2px solid var(--line-2); margin-left:var(--space-2); }

/* Side card */
.emp-side-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); }
.emp-side-card h2{ font-size:var(--text-lg); margin-bottom:var(--space-4); }
.emp-side-list{ list-style:none; margin:0 0 var(--space-5); padding:0; display:grid; gap:var(--space-3); }
.emp-side-list li{ display:flex; gap:var(--space-2); align-items:flex-start; font-size:var(--text-sm); color:var(--ink-2); }
.emp-side-list svg{ flex:none; color:var(--apply-text); margin-top:2px; }
.emp-side-note{ margin:0; font-size:var(--text-sm); color:var(--ink-2); border-top:1px solid var(--line); padding-top:var(--space-4); }

/* ---------- Dashboard ---------- */
.emp-dash{ padding:var(--space-10) 0 var(--space-16); }
.emp-dash__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4);
  margin-bottom:var(--space-8); }
.emp-dash__head h1{ font-size:var(--text-3xl); margin:0; }
.emp-dash__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-bottom:var(--space-8); }
.emp-stat{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); text-align:center; }
.emp-stat__num{ display:block; font-size:var(--text-3xl); font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1; }
.emp-stat__label{ display:block; margin-top:var(--space-2); font-size:var(--text-sm); color:var(--ink-2); }

.emp-jobs__wrap{ overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); }
.emp-jobs__table{ width:100%; border-collapse:collapse; min-width:560px; }
.emp-jobs__table thead th{ text-align:left; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-3); font-weight:600; padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--line); }
.emp-jobs__table td{ padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--line); vertical-align:middle; font-size:var(--text-sm); }
.emp-jobs__table tr:last-child td{ border-bottom:0; }
.emp-jobs__title strong{ display:block; color:var(--ink); font-weight:600; }
.emp-jobs__meta{ color:var(--ink-3); font-size:var(--text-xs); }
.emp-jobs__date{ color:var(--ink-2); white-space:nowrap; }
.emp-jobs__action{ text-align:right; }
.emp-jobs__pending{ color:var(--ink-3); font-size:var(--text-xs); }

.emp-status{ display:inline-flex; align-items:center; gap:4px; padding:.2rem .65rem; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; white-space:nowrap; }
.emp-status--live{ background:var(--apply-050); color:var(--apply-text); }
.emp-status--pending{ background:var(--amber-050); color:var(--ink); border:1px solid var(--amber); }
.emp-status--closed{ background:var(--page); color:var(--ink-2); border:1px solid var(--line-2); }
.emp-status--rejected{ background:var(--red-050); color:var(--red-strong); }

.btn-sm-inline{ padding:.4rem .8rem; font-size:var(--text-xs); }
.emp-dash__note{ margin-top:var(--space-5); font-size:var(--text-sm); color:var(--ink-3); }

/* ---------- Thanks ---------- */
.emp-thanks{ padding:var(--space-16) 0; }
.emp-thanks__card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:var(--space-12) var(--space-8); text-align:center; }
.emp-thanks__icon{ width:68px; height:68px; margin:0 auto var(--space-5); border-radius:var(--radius-pill);
  background:var(--apply-050); color:var(--apply-text); display:flex; align-items:center; justify-content:center; }
.emp-thanks__card h1{ font-size:var(--text-3xl); margin-bottom:var(--space-3); }
.emp-thanks__card .lead{ margin-bottom:var(--space-3); }
.emp-thanks__card .muted{ max-width:60ch; margin:0 auto var(--space-8); }
.emp-thanks__next{ text-align:left; max-width:44ch; margin:0 auto var(--space-8);
  background:var(--page); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); }
.emp-thanks__next h2{ font-size:var(--text-lg); margin-bottom:var(--space-4); }
.emp-thanks__next .emp-side-list{ margin-bottom:0; }
.emp-thanks__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; }

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .emp-hero__media{ display:none; }
  .emp-dash__stats{ grid-template-columns:1fr; }
  .emp-labelled{ flex-direction:column; gap:var(--space-4); padding:var(--space-6); }
  .emp-tier__blurb{ min-height:0; }
}

@media (min-width:760px){
  .emp-salary__figures{ grid-template-columns:1fr 1fr 1fr; }
}

@media (min-width:900px){
  .emp-hero__inner{ grid-template-columns:1.05fr .95fr; }
  .emp-steps{ grid-template-columns:repeat(3,1fr); }
  .emp-reach{ grid-template-columns:1.2fr .8fr; align-items:center; }
  .emp-reach__cards{ grid-template-columns:1fr; }
  .emp-tiers{ grid-template-columns:repeat(3,1fr); }
  .emp-post__grid{ grid-template-columns:minmax(0,1fr) 300px; }
  .emp-post__side{ position:sticky; top:calc(66px + var(--space-4)); }
}

@media (prefers-reduced-motion:reduce){
  .emp-salary__figures,.emp-faq__item summary svg,.emp-radio{ transition:none; }
}
/* =====================================================================
   home.css — homepage showcase sections.
   Namespaced .home-* classes (the hero grid itself lives in seo.css).
   CSS variables only; reuses .card / .feature / .ic / .badge from app.css
   and the swipe-card visual language from swipe.css.
   ===================================================================== */

/* A touch more air around the hero so it reads spacious and premium. */
.page-home .hero { padding-bottom: var(--space-8); }
.page-home .hero h1 { letter-spacing: -.02em; }

/* Plain sections that follow a full-padded band sit tight to it, keeping the
   original page's grouped rhythm (coloured bands own the generous spacing). */
.home-flush-top { padding-top: 0; }

/* ---------------------------------------------------------------------
   Hero trust row — three quick, honest reassurances under the search bar.
   Colourful little glyphs, calm neutral text.
   --------------------------------------------------------------------- */
.hero-trust {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.hero-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.hero-trust__item svg { flex: none; }
.hero-trust__item--accent svg { color: var(--accent); }
.hero-trust__item--apply svg  { color: var(--apply-text); }
.hero-trust__item--amber svg  { color: var(--amber); }

/* ---------------------------------------------------------------------
   Hero visual — just the signature swipe deck, clean and on its own.
   Centred under the copy on mobile, sitting in the right column on desktop.
   --------------------------------------------------------------------- */
.hero-visual { position: relative; }

/* Top-align the hero so the heading sits at the top-left, consistent with the
   section headings below (not vertically floated). The deck centres itself. */
@media (min-width: 900px) {
  .hero-grid { align-items: start; }
  .hero-visual { align-self: center; }
  .hero-visual .home-mock { margin: 0 auto; }
}

/* ---------------------------------------------------------------------
   Hero swipe-card mock — a small tilted deck that mirrors the real
   .swipe-card look and shows a job "mid-swipe" with an Apply stamp.
   --------------------------------------------------------------------- */
.home-mock {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: var(--space-10) auto 0;
  aspect-ratio: 4 / 5;
}

.home-mock__card {
  position: absolute;
  inset: 4% 8%;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* Fanned stack: two cards peek from behind the fully-detailed front one.
   Scaled down + modest tilt so rotated corners never force a scrollbar. */
.home-mock__card--c3 { transform: rotate(-7deg) scale(.9);  z-index: 1; opacity: .8; }
.home-mock__card--c2 { transform: rotate(4deg)  scale(.95); z-index: 2; opacity: .92; }
.home-mock__card--c1 { transform: rotate(-2deg) translateX(2%); z-index: 3; box-shadow: var(--shadow-lg); }

.home-mock__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: linear-gradient(135deg, var(--accent-050), var(--card) 78%);
  border-bottom: 1px solid var(--line);
}
.home-mock__avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 600;
}
.home-mock__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}
.home-mock__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}
.home-mock__title { margin: 0; font-size: var(--text-lg); line-height: 1.25; }
.home-mock__company { margin: 0; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; }
.home-mock__facts {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.home-mock__facts li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-sm);
}
.home-mock__facts svg { color: var(--ink-faint); flex: none; }
.home-mock__facts .pay { color: var(--ink); font-weight: 600; }
.home-mock__facts .pay svg { color: var(--apply-text); }

/* "Apply" stamp, straight from the swipe deck's visual language. */
.home-mock__stamp {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 5;
  padding: var(--space-1) var(--space-4);
  border: 3px solid var(--apply);
  border-radius: var(--radius);
  color: var(--apply);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: rotate(-14deg);
}

/* Small caption under the deck, so the gesture is unmistakable. */
.home-mock__hint {
  position: absolute;
  left: 0; right: 0;
  bottom: -6%;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 500;
}

@media (min-width: 900px) {
  .home-mock { margin: 0 auto; max-width: 380px; }
}

/* ---------------------------------------------------------------------
   Stats band
   --------------------------------------------------------------------- */
.home-statband { padding: var(--space-6) 0 var(--space-4); }
.home-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
  padding: var(--space-6);
  background: linear-gradient(150deg, var(--accent-050), var(--card) 68%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.home-stat { text-align: center; min-width: 0; }
.home-stat__num {
  font-size: clamp(2rem, 6vw, var(--text-4xl));
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--accent-strong);
}
.home-stat__plus { color: var(--accent); }
.home-stat__label {
  margin-top: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
}
.home-stat__sub {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

@media (min-width: 760px) {
  .home-stats { grid-template-columns: repeat(4, 1fr); padding: var(--space-8) var(--space-6); }
  .home-stat + .home-stat { border-left: 1px solid var(--line); }
}

/* Tabular figures so the number never jiggles while it counts up. */
.home-stat__count { font-variant-numeric: tabular-nums; }

/* "Updating live" badge under the stats. Hidden by default and only revealed
   by home.js once it is actually polling, so the label is never a false claim.
   A calm green dot with a soft outward pulse signals a live feed. */
.home-live {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 500;
}
.home-live.is-on { display: flex; }
.home-live__dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--apply);
}
.home-live__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--apply);
  animation: home-live-pulse 1.8s ease-out infinite;
}
@keyframes home-live-pulse {
  0%   { transform: scale(1); opacity: .55; }
  70%  { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-live__dot::after { animation: none; }
}

/* ---------------------------------------------------------------------
   Feature grid (the six differentiators)
   --------------------------------------------------------------------- */
.home-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.home-feature {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
/* Colourful icon chips — one hue per differentiator. The doubled .ic.ic--*
   selector outranks the base `.feature .ic` fill regardless of load order. */
.home-feature .ic.ic--accent { background: var(--accent-050); color: var(--accent); }
.home-feature .ic.ic--apply  { background: var(--apply-050);  color: var(--apply-text); }
.home-feature .ic.ic--amber  { background: var(--amber-050);  color: var(--amber); }
.home-feature .ic.ic--red    { background: var(--red-050);    color: var(--red); }
.home-feature h3 { margin: 0 0 var(--space-2); }
.home-feature p { margin: 0 0 var(--space-4); }
.home-feature__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  color: var(--link);
  font-size: var(--text-sm);
  font-weight: 600;
}
.home-feature__go svg { transition: transform .14s ease; }
.home-feature:hover { text-decoration: none; }
.home-feature:hover .home-feature__go svg { transform: translateX(3px); }

@media (min-width: 560px) { .home-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .home-features { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------
   How-it-works strip
   --------------------------------------------------------------------- */
.home-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.home-step {
  padding: var(--space-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.home-step__n {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent-050);
  color: var(--accent);
  font-size: var(--text-lg);
  font-weight: 700;
}
/* Walk the three steps through the brand hues for a little warmth. */
.home-step:nth-child(2) .home-step__n { background: var(--apply-050); color: var(--apply-text); }
.home-step:nth-child(3) .home-step__n { background: var(--amber-050); color: var(--amber); }
.home-step h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.home-step p { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }

@media (min-width: 760px) { .home-steps { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------
   Closing CTA band
   --------------------------------------------------------------------- */
.home-cta {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--accent-050), var(--card) 66%);
  box-shadow: var(--shadow-sm);
}
.home-cta h2 { margin: 0 0 var(--space-3); }
.home-cta .lead { margin: 0 auto var(--space-6); max-width: 48ch; }
.home-cta .search-bar { margin: 0 auto var(--space-5); }
.home-cta__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.home-cta__pwa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) auto 0;
  color: var(--ink-3);
  font-size: var(--text-sm);
}
.home-cta__pwa svg { color: var(--accent); flex: none; }

@media (min-width: 560px) { .home-cta { padding: var(--space-16) var(--space-10); } }

/* ---------------------------------------------------------------------
   Sector tiles — a colourful "browse by sector" grid. Each tile carries a
   soft brand tint + an icon chip; four tints rotate across the grid so it
   feels vibrant while staying strictly on the token palette.
   --------------------------------------------------------------------- */
.home-sectors {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 480px) { .home-sectors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .home-sectors { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 1000px){ .home-sectors { grid-template-columns: repeat(4, 1fr); } }

.home-sector {
  --hue: var(--accent);
  --hue-050: var(--accent-050);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--hue-050);
  border: 1px solid var(--line-2);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
.home-sector:hover {
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--hue);
}
.home-sector__ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--hue);
  box-shadow: var(--shadow-sm);
}
.home-sector__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-sector__name { font-weight: 600; font-size: var(--text-sm); line-height: 1.25; color: var(--ink); }
/* Neutral affordance text so it clears AA on every tint; the colour comes
   from the icon chip, the tile tint and the hover border. */
.home-sector__go { font-size: var(--text-xs); font-weight: 600; color: var(--ink-2); }

.home-sector--apply { --hue: var(--apply-text); --hue-050: var(--apply-050); }
.home-sector--amber { --hue: var(--amber);      --hue-050: var(--amber-050); }
.home-sector--red   { --hue: var(--red);        --hue-050: var(--red-050); }

/* ---------------------------------------------------------------------
   Photo showcase strip — real workplace imagery, each card a rounded,
   shadowed photo with a legible label linking into that sector.
   --------------------------------------------------------------------- */
.home-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 760px) { .home-showcase { grid-template-columns: repeat(4, 1fr); } }

.home-showcase__card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  aspect-ratio: 3 / 4;
  text-decoration: none;
  transition: box-shadow .14s ease, transform .14s ease;
}
.home-showcase__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
/* Dark scrim under the label keeps white text well clear of AA over any photo. */
.home-showcase__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, var(--ink));
  opacity: .82;
}
.home-showcase__label {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 1;
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.3;
}
.home-showcase__card:hover {
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.home-showcase__card:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .home-showcase__card:hover img { transform: none; }
}
/* ============================================================
   Employer Insights (analytics dashboard)
   All classes namespaced .ins* to avoid leaking into other pages.
   Tokens only (var(--...)); no hardcoded hex except #fff on fills.
   ============================================================ */

.ins { padding: var(--space-10) 0 var(--space-16); }

.ins__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-8);
}
.ins__head h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-2); }
.ins__sub { max-width: 56ch; margin: 0; font-size: var(--text-sm); }

/* ---------- Headline tiles ---------- */
.ins-tiles {
  display: grid; gap: var(--space-4); margin-bottom: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ins-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1);
  transition: box-shadow .14s ease, transform .14s ease;
}
.ins-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ins-tile__label {
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.ins-tile__num {
  font-size: var(--text-3xl); font-weight: 700; line-height: 1; color: var(--ink);
  letter-spacing: -.02em;
}
.ins-tile__num--good { color: var(--apply-text); }
.ins-tile__unit { font-size: var(--text-xl); font-weight: 600; color: var(--ink-2); margin-left: 1px; }
.ins-tile__foot { font-size: var(--text-xs); color: var(--ink-3); }

/* ---------- Card grid ---------- */
.ins-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ins-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.ins-card--wide { grid-column: 1 / -1; }
.ins-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.ins-card__title { font-size: var(--text-lg); margin: 0; }
.ins-card__hint { font-size: var(--text-xs); color: var(--ink-3); font-weight: 500; }
.ins-card__empty { font-size: var(--text-sm); color: var(--ink-2); margin: 0; padding: var(--space-4) 0; }

/* ---------- Applications-over-time bars ---------- */
.ins-bars {
  display: flex; align-items: flex-end; gap: 2px; height: 160px;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--line);
}
.ins-bars__col {
  flex: 1 1 0; height: 100%; display: flex; align-items: flex-end;
  min-width: 0; border-radius: var(--radius-sm);
}
.ins-bars__col:hover { background: var(--accent-050); }
.ins-bars__fill {
  width: 100%; min-height: 2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--accent); transition: height .3s ease;
}
.ins-bars__fill.is-zero { background: var(--line-2); min-height: 2px; }
.ins-bars__axis {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-3);
}
.ins-bars__peak { color: var(--ink-2); font-weight: 600; }

/* ---------- Pipeline funnel ---------- */
.ins-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ins-funnel__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-2);
}
.ins-funnel__label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500; color: var(--ink);
}
.ins-funnel__count { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.ins-funnel__pct { font-size: var(--text-xs); font-weight: 500; color: var(--ink-3); margin-left: var(--space-2); }
.ins-funnel__track {
  height: 10px; background: var(--page); border: 1px solid var(--line);
  border-radius: var(--radius-pill); overflow: hidden;
}
.ins-funnel__bar {
  display: block; height: 100%; min-width: 0; border-radius: var(--radius-pill);
  background: var(--accent); transition: width .35s ease;
}

/* Stage colour coding (dots + funnel bars) */
.ins-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--ink-3); }

.ins-dot--new,          .ins-funnel__bar--new          { background: var(--ink-3); }
.ins-dot--reviewed,     .ins-funnel__bar--reviewed     { background: var(--link); }
.ins-dot--shortlisted,  .ins-funnel__bar--shortlisted  { background: var(--accent); }
.ins-dot--interviewing, .ins-funnel__bar--interviewing { background: var(--accent-strong); }
.ins-dot--offered,      .ins-funnel__bar--offered      { background: var(--amber); }
.ins-dot--hired,        .ins-funnel__bar--hired        { background: var(--apply); }
.ins-dot--rejected,     .ins-funnel__bar--rejected     { background: var(--red); }
.ins-dot--closed,       .ins-funnel__bar--closed       { background: var(--skip); }

/* ---------- Source mix ---------- */
.ins-split {
  display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--page); border: 1px solid var(--line); margin-bottom: var(--space-5);
}
.ins-split__seg { min-width: 3px; }
.ins-split__seg--swipe { background: var(--accent); }
.ins-split__seg--form  { background: var(--link); }

.ins-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ins-legend__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.ins-legend__label { color: var(--ink); }
.ins-legend__val { margin-left: auto; font-weight: 600; color: var(--ink); }
.ins-legend__item--ref { padding-top: var(--space-3); border-top: 1px solid var(--line); }

.ins-dot--swipe { background: var(--accent); }
.ins-dot--form  { background: var(--link); }
.ins-dot--ref   { background: var(--apply); }

/* ---------- Response speed ---------- */
.ins-metric {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) 0;
}
.ins-metric + .ins-metric { border-top: 1px solid var(--line); }
.ins-metric__label { font-size: var(--text-sm); color: var(--ink-2); }
.ins-metric__val { font-size: var(--text-2xl); font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.ins-metric__foot { font-size: var(--text-xs); color: var(--ink-3); }
.ins-note { font-size: var(--text-xs); margin: var(--space-3) 0 0; }

/* ---------- Top jobs table ---------- */
.ins-table__wrap { overflow-x: auto; }
.ins-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ins-table th {
  text-align: left; font-size: var(--text-xs); font-weight: 600; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .03em;
  padding: 0 var(--space-3) var(--space-3); border-bottom: 1px solid var(--line);
}
.ins-table td { padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.ins-table tbody tr:last-child td { border-bottom: 0; }
.ins-table__num { text-align: right; white-space: nowrap; }
.ins-table__job { font-weight: 600; color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .ins-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-grid { grid-template-columns: 1fr; }
  .ins-card--wide { grid-column: auto; }
}
@media (min-width: 560px) {
  .ins-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ins-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* ============================================================
   Interview scheduling — employer application page + applicant
   applications list. All classes are namespaced .iv* because this
   file is auto-loaded on every page.
   ============================================================ */

/* ---------- Section shell (employer) ---------- */
.iv-head{ margin-bottom:var(--space-4); }
.iv-head__hint{ margin:var(--space-1) 0 0; font-size:var(--text-sm); color:var(--ink-2); }
.iv-empty{ margin:0 0 var(--space-4); font-size:var(--text-sm); color:var(--ink-2); }

/* ---------- Interview list ---------- */
.iv-list{ list-style:none; margin:0 0 var(--space-5); padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.iv-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);
  background:var(--page); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-4);
}
.iv-item__main{ min-width:0; }
.iv-when{ margin:0; font-size:var(--text-base); font-weight:600; color:var(--ink); }
.iv-meta{ margin:var(--space-1) 0 0; font-size:var(--text-sm); color:var(--ink-2); word-break:break-word; }
.iv-notes{ margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--ink-2); }
.iv-item__side{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-2); text-align:right; }

/* ---------- Status pills (reuse accent / amber / green / red) ---------- */
.iv-pill{
  display:inline-flex; align-items:center; padding:.24rem .7rem; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; white-space:nowrap; border:1px solid transparent;
}
.iv-pill--proposed{ background:var(--amber-050); color:var(--ink); border-color:var(--amber); }
.iv-pill--confirmed{ background:var(--apply-050); color:var(--apply-text); }
.iv-pill--declined{ background:var(--red-050); color:var(--red-strong); }
.iv-pill--cancelled{ background:var(--page); color:var(--ink-3); border-color:var(--line-2); }
.iv-pill--completed{ background:var(--accent-050); color:var(--accent-strong); }

/* ---------- Inline actions ---------- */
.iv-inline{ margin:0; }
.iv-textbtn{
  background:none; border:none; padding:0; cursor:pointer;
  font-size:var(--text-sm); font-weight:600; color:var(--ink-2); font-family:inherit;
}
.iv-textbtn:hover{ text-decoration:underline; }
.iv-textbtn--danger{ color:var(--red-strong); }

.iv-actions{ display:flex; gap:var(--space-2); }
.iv-btn{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  padding:.45rem .9rem; border-radius:var(--radius); font-size:var(--text-sm); font-weight:600;
  font-family:inherit; border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  transition:box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.iv-btn:hover{ box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.iv-btn--confirm{ background:var(--apply); border-color:var(--apply); color:#fff; }
.iv-btn--confirm:hover{ background:var(--apply-text); border-color:var(--apply-text); }
.iv-btn--decline{ background:var(--card); border-color:var(--red); color:var(--red-strong); }
.iv-btn--decline:hover{ background:var(--red-050); }

/* ---------- Schedule form (employer) ---------- */
.iv-form{ border-top:1px solid var(--line); padding-top:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.iv-form__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-4); }
.iv-field{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.iv-label{ font-size:var(--text-sm); font-weight:600; color:var(--ink-2); }
.iv-hint{ margin:var(--space-1) 0 0; font-size:var(--text-xs); color:var(--ink-3); }

.iv-modes{ border:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); }
.iv-modes .iv-label{ flex-basis:100%; margin-bottom:var(--space-1); }
.iv-mode{
  display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer;
  padding:.5rem .9rem; border:1px solid var(--line-2); border-radius:var(--radius);
  font-size:var(--text-sm); font-weight:500; color:var(--ink); background:var(--card);
}
.iv-mode input{ accent-color:var(--accent); }
.iv-mode:has(input:checked){ border-color:var(--accent); color:var(--accent-strong); background:var(--accent-050); }

@media (min-width:560px){
  .iv-form__grid{ grid-template-columns:1fr 200px; }
}

/* ---------- Applicant applications list ---------- */
/* .iv-host lets .app-item wrap so the interviews block sits on its own row. */
.iv-host{ flex-wrap:wrap; }
.iv-apps{
  width:100%; flex-basis:100%;
  margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--line);
}
.iv-apps__label{
  margin:0 0 var(--space-3); font-size:var(--text-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3);
}
.iv-list--seeker{ margin-bottom:0; }

/* ---------- Small screens ---------- */
@media (max-width:560px){
  .iv-item{ flex-direction:column; }
  .iv-item__side{ flex-direction:row; align-items:center; align-self:stretch; justify-content:space-between; text-align:left; width:100%; }
  .iv-actions{ flex:none; }
}
/* =====================================================================
   landing.css — programmatic SEO pages (role x location + browse hubs).
   Owned by the SEO landing area. CSS variables only; extends app.css.
   Mobile-first, soft-premium.
   ===================================================================== */

/* ---------- Hero ---------- */
.landing-hero{ padding:var(--space-10) 0 var(--space-6); }
.landing-hero .breadcrumb{ margin-bottom:var(--space-4); }
.landing-hero h1{ font-size:var(--text-3xl); max-width:22ch; margin-bottom:var(--space-4); }
.landing-hero .lead{ max-width:60ch; margin-bottom:var(--space-6); }
.landing-search{ margin-top:var(--space-2); }

/* ---------- Body + two-column layout ---------- */
.landing-body{ padding-bottom:var(--space-16); }
.landing-layout{ display:grid; grid-template-columns:1fr; gap:var(--space-8); }
.landing-main{ min-width:0; }
.landing-aside{ min-width:0; display:flex; flex-direction:column; gap:var(--space-5); }

@media (min-width:900px){
  .landing-layout{ grid-template-columns:minmax(0,1fr) 320px; align-items:start; }
}

/* ---------- Salary insight ---------- */
.salary-insight{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
  padding:var(--space-6);
  margin-bottom:var(--space-6);
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--accent-050), var(--card) 72%);
  box-shadow:var(--shadow-sm);
}
.salary-insight__eyebrow{
  margin:0 0 var(--space-2);
  font-size:var(--text-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--accent);
}
.salary-insight__figure{
  display:flex;
  align-items:baseline;
  gap:var(--space-2);
  margin:0 0 var(--space-2);
  font-size:var(--text-3xl);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--ink);
}
.salary-insight__figure span{
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--ink-2);
}
.salary-insight__note{ margin:0; font-size:var(--text-sm); color:var(--ink-2); }
.salary-insight__facts{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-5) var(--space-8);
  margin:0;
  padding-top:var(--space-4);
  border-top:1px solid var(--line);
}
.salary-insight__facts dt{
  margin:0 0 var(--space-1);
  font-size:var(--text-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-3);
}
.salary-insight__facts dd{ margin:0; font-size:var(--text-base); font-weight:600; color:var(--ink); }

@media (min-width:640px){
  .salary-insight{ grid-template-columns:1.3fr 1fr; align-items:center; }
  .salary-insight__facts{ border-top:0; border-left:1px solid var(--line); padding-top:0; padding-left:var(--space-6); flex-direction:column; gap:var(--space-4); }
}

/* ---------- Results head ---------- */
.landing-results__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-bottom:var(--space-5);
}
.landing-results__all{ font-size:var(--text-sm); font-weight:600; color:var(--accent); }

/* ---------- Aside cards ---------- */
.landing-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
}
.landing-card__head{
  font-size:var(--text-lg);
  margin:0 0 var(--space-4);
}
.landing-card__links{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.landing-card--cta p{ font-size:var(--text-sm); margin:0 0 var(--space-3); }

/* ---------- Who's hiring ---------- */
.hiring-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-1); }
.hiring-item__link{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-2);
  margin:0 calc(var(--space-2) * -1);
  border-radius:var(--radius);
  color:var(--ink);
  transition:background .12s ease;
}
.hiring-item__link:hover{ text-decoration:none; background:var(--page); }
.hiring-item__logo{
  width:40px; height:40px; flex:none;
  border-radius:var(--radius-sm);
  object-fit:cover;
  border:1px solid var(--line);
  background:var(--card);
}
.hiring-item__logo--initial{
  display:flex; align-items:center; justify-content:center;
  font-weight:600; color:var(--accent); background:var(--accent-050); border-color:var(--line-2);
}
.hiring-item__body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.hiring-item__name{
  display:flex; align-items:center; gap:var(--space-1);
  font-weight:600; font-size:var(--text-sm); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hiring-item__name .verified-tick{ flex:none; color:var(--accent); }
.hiring-item__meta{ font-size:var(--text-xs); color:var(--ink-2); }
.hiring-item__rating{ color:var(--amber); font-weight:600; }

/* ---------- Hub: sectors grid ---------- */
.hub-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
  margin-bottom:var(--space-12);
}
.hub-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;
}
.hub-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.hub-card__title{ font-size:var(--text-lg); margin:0 0 var(--space-2); }
.hub-card__title a{ color:var(--ink); }
.hub-card__title a:hover{ color:var(--accent); text-decoration:none; }
.hub-card__desc{ font-size:var(--text-sm); color:var(--ink-2); margin:0 0 var(--space-4); }
.hub-card__links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-4); }
.hub-card__links a{ font-size:var(--text-sm); color:var(--ink-2); }
.hub-card__links a:hover{ color:var(--accent); }

@media (min-width:640px){ .hub-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .hub-grid{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Hub: locations by region ---------- */
.hub-regions{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-8);
  margin-bottom:var(--space-12);
}
.hub-region__title{
  font-size:var(--text-lg);
  margin:0 0 var(--space-3);
  padding-bottom:var(--space-2);
  border-bottom:1px solid var(--line);
}
.hub-region__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-1); }
.hub-region__links a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-2) 0;
  color:var(--ink-2); font-size:var(--text-sm);
}
.hub-region__links a:hover{ color:var(--accent); text-decoration:none; }
.hub-region__count{
  flex:none;
  font-size:var(--text-xs); font-weight:600; color:var(--ink-3);
  background:var(--page); border:1px solid var(--line); border-radius:var(--radius-pill);
  padding:.1rem .5rem;
}

@media (min-width:640px){ .hub-regions{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .hub-regions{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Hub: popular searches ---------- */
.hub-popular{ margin-bottom:var(--space-12); }
.hub-popular__head{ font-size:var(--text-xl); margin-bottom:var(--space-5); }

/* ---------- Hub CTA banner ---------- */
.hub-cta{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--space-5);
  padding:var(--space-8);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, var(--accent-050), var(--card) 72%);
  border:1px solid var(--line-2);
}
.hub-cta h2{ font-size:var(--text-xl); margin:0 0 var(--space-1); }
.hub-cta p{ margin:0; color:var(--ink-2); font-size:var(--text-sm); }
/* =====================================================================
   yournextjob legal suite extras
   Cookie notice + legal hub cards. Design tokens only, namespaced
   (.cookie-consent* / .lgl*) so nothing leaks into other pages.
   ===================================================================== */

/* ---------- Cookie notice ---------- */
.cookie-consent{
  position:fixed; left:0; right:0; bottom:0;
  z-index:var(--z-banner);
  background:var(--card);
  border-top:1px solid var(--line-2);
  box-shadow:var(--shadow-lg);
  animation:cookieUp .28s ease both;
}
.cookie-consent[hidden]{ display:none; }

.cookie-consent__inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--space-3) var(--space-6);
  padding:var(--space-4) var(--space-4);
}
.cookie-consent__text{
  margin:0; flex:1 1 30ch; min-width:min(100%, 30ch);
  font-size:var(--text-sm); color:var(--ink-2); line-height:1.5;
}
.cookie-consent__text a{ color:var(--link); text-decoration:underline; text-underline-offset:2px; }
.cookie-consent__text a:hover{ color:var(--accent-strong); }

.cookie-consent__actions{
  display:flex; align-items:center; gap:var(--space-4);
  flex:none;
}
.cookie-consent__link{
  font-size:var(--text-sm); color:var(--ink-2); white-space:nowrap;
}
.cookie-consent__link:hover{ color:var(--accent); }
.cookie-consent__accept{ white-space:nowrap; }

@keyframes cookieUp{
  from{ transform:translateY(100%); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .cookie-consent{ animation:none; }
}

/* Sit above the fixed mobile bottom nav on small screens. */
@media (max-width:640px){
  .cookie-consent{ bottom:calc(68px + env(safe-area-inset-bottom)); }
  .cookie-consent__inner{ padding:var(--space-4); }
  .cookie-consent__actions{ width:100%; justify-content:space-between; }
}

/* ---------- Legal hub cards ---------- */
.content-prose .lgl-hub{
  list-style:none; margin:0 0 var(--space-8); padding:0;
  display:grid; gap:var(--space-3);
}
.content-prose .lgl-hub li{ margin:0; }

.content-prose .lgl-doc{
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  color:var(--ink); text-decoration:none;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.content-prose .lgl-doc:hover{
  box-shadow:var(--shadow-md); transform:translateY(-1px);
  border-color:var(--line-2); color:var(--ink);
}
.lgl-doc__ic{
  flex:none; width:42px; height:42px; border-radius:var(--radius);
  background:var(--accent-050); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.lgl-doc__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.lgl-doc__title{ font-size:var(--text-base); font-weight:600; color:var(--ink); }
.lgl-doc__desc{ font-size:var(--text-sm); color:var(--ink-2); line-height:1.45; }
.lgl-doc__go{
  flex:none; margin-left:auto; color:var(--ink-3);
  display:flex; align-items:center;
  transition:transform .15s ease, color .15s ease;
}
.content-prose .lgl-doc:hover .lgl-doc__go{ color:var(--accent); transform:translateX(3px); }

@media (max-width:520px){
  .content-prose .lgl-doc__go{ display:none; }
}

/* ---------- Table caption (employer pricing) ---------- */
.content-prose .lgl-caption{
  caption-side:top; text-align:left;
  font-size:var(--text-sm); color:var(--ink-3);
  margin-bottom:var(--space-3);
}

/* ---------- Footer legal sub-heading (scoped to the footer) ---------- */
.site-footer .footer-subhead{ margin-top:var(--space-6); }
/* yournextjob - personalised match layer (Wave D).
   A small match% ring + reason chips that surface on any card once the visitor
   has a seeker profile. Everything here is scoped to the matched modifiers, so
   a non-personalised page never touches these rules. */

/* ---------- Match ring (inline SVG donut) ---------- */
.match-ring {
  --ring-size: 46px;
  --ring: var(--accent);
  --ring-ink: var(--accent-strong);
  position: relative;
  flex: none;
  width: var(--ring-size);
  height: var(--ring-size);
}
.match-ring--strong { --ring: var(--apply);      --ring-ink: var(--apply-text); }
.match-ring--good   { --ring: var(--accent);     --ring-ink: var(--accent-strong); }
.match-ring--fair   { --ring: var(--ink-3);      --ring-ink: var(--ink-2); }

.match-ring__svg {
  display: block;
  width: var(--ring-size);
  height: var(--ring-size);
}
.match-ring__track { stroke: var(--line-2); }
.match-ring__meter { stroke: var(--ring); }

.match-ring__num {
  position: absolute;
  inset: 0;
  /* flex (not grid) so the number and the "%" sit inline on one centred line,
     rather than stacking as two separate grid items. */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--ring-size) * .3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ring-ink);
}
.match-ring__pct {
  font-size: .62em;
  font-weight: 600;
  margin-left: .5px;
}

/* Gentle entrance, kept out of the way for reduced-motion visitors. */
@media (prefers-reduced-motion: no-preference) {
  .match-ring__meter {
    transform-box: view-box;
    transform-origin: center;
    animation: match-ring-draw .6s ease both;
  }
}
@keyframes match-ring-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* ---------- Ring placement: job-card (grid/list surfaces) ---------- */
.job-card--matched {
  /* the card is already position:relative; pin the ring into the top corner */
}
.job-card--matched .match-ring {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 1;
}
/* Reserve room so the badges/title never run under the corner ring. */
.job-card--matched .job-card__body {
  padding-right: calc(var(--space-12) + var(--space-2));
}
/* The ring owns the top-right corner on a matched card, so drop the save button
   below it — otherwise the opaque save button sat on top of the ring and hid its
   number, leaving a broken-looking empty circle. */
.job-card--matched .job-save {
  top: calc(var(--space-5) + 50px);
  right: var(--space-5);
}

/* ---------- Ring placement: swipe deck card ---------- */
.match-ring--oncard { --ring-size: 52px; }
.swipe-card--matched .match-ring--oncard {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2; /* below the swipe stamps (z-index:5) so they still read over it */
}
/* Give the header band's right side room for the ring; the logo (left) is
   untouched and the freshness/salary badges simply shift clear of it. */
.swipe-card--matched .swipe-card__top {
  padding-right: calc(52px + var(--space-6));
}

/* ---------- Reason chips ---------- */
.match-reasons {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
}
.match-reasons__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: .2rem .55rem;
  border-radius: var(--radius-pill);
  background: var(--accent-050);
  border: 1px solid var(--line-2);
  color: var(--link);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.25;
}
.match-reasons__tick { flex: none; color: var(--accent); }

/* On the swipe card the body is a flex column with its own gap, so drop the
   chip row's extra top margin to keep the rhythm even. */
.swipe-card__body .match-reasons { margin-top: 0; }
/* Messaging: inbox (.msgs*) + conversation thread (.thread*).
   Namespaced to avoid leaking, since page CSS is auto-loaded site-wide.
   CSS variables only. */

/* ------------------------------------------------------------------ */
/* Inbox                                                              */
/* ------------------------------------------------------------------ */
.msgs {
  padding: var(--space-8) 0 var(--space-16);
}
.msgs__head {
  margin-bottom: var(--space-6);
}
.msgs__head h1 {
  font-size: var(--text-2xl);
  margin: 0;
}
.msgs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 720px;
}
.msgs__item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: box-shadow .14s ease, transform .14s ease;
}
.msgs__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.msgs__item.is-unread {
  border-color: var(--line-2);
  background: var(--accent-050);
}
.msgs__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: var(--ink);
}
.msgs__avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--accent-050);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-lg);
}
.msgs__body {
  flex: 1 1 auto;
  min-width: 0;
}
.msgs__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.msgs__name {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msgs__item.is-unread .msgs__name {
  font-weight: 700;
}
.msgs__time {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.msgs__job {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.msgs__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
}
.msgs__chevron {
  flex: 0 0 auto;
  color: var(--ink-faint);
  display: flex;
}

/* ------------------------------------------------------------------ */
/* Thread                                                            */
/* ------------------------------------------------------------------ */
.thread {
  padding: var(--space-6) 0 var(--space-8);
}
.thread__container {
  max-width: 760px;
}
.thread__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.thread__back {
  flex: 0 0 auto;
  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);
  text-decoration: none;
}
.thread__back:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.thread__head-text {
  min-width: 0;
}
.thread__with {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.thread__job {
  display: inline-block;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.thread__job:hover {
  text-decoration: underline;
}
.thread__job--plain {
  color: var(--ink);
}

.thread__list {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  min-height: 220px;
  max-height: calc(100vh - 320px);
}
.thread__empty {
  margin: auto;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--text-sm);
}

.thread__msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 70%;
  align-self: flex-start;
}
.thread__msg--own {
  align-self: flex-end;
  align-items: flex-end;
}
.thread__bubble {
  background: var(--page);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
}
.thread__msg--own .thread__bubble {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-sm);
}
.thread__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.thread__meta {
  margin: var(--space-1) var(--space-1) 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
  display: flex;
  gap: var(--space-1);
  align-items: center;
}
.thread__sender {
  font-weight: 600;
}
.thread__dot {
  color: var(--ink-faint);
}

.thread__reply {
  position: sticky;
  bottom: var(--space-4);
  margin-top: var(--space-4);
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.thread__input {
  flex: 1 1 auto;
  min-height: 44px;
  margin: 0;
}
.thread__send {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 640px) {
  .thread__msg {
    max-width: 82%;
  }
  .thread__list {
    max-height: calc(100vh - 280px);
  }
  .thread__send-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}
/* Notifications — centre + preferences. Namespaced .ntf* to avoid leaks. */

/* ---- Notification centre ---------------------------------------------- */
.ntf{ padding-block:var(--space-8) var(--space-16); max-width:var(--container-narrow); }

.ntf__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4);
  margin-bottom:var(--space-6);
}
.ntf__title{ font-size:var(--text-2xl); margin:0 0 var(--space-1); }
.ntf__head .muted{ margin:0; }
.ntf__markall{ flex:none; }

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

.ntf-item{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; transition:box-shadow .18s ease, transform .18s ease;
}
.ntf-item.is-unread{ border-color:var(--line-2); background:var(--accent-050); }

.ntf-item__link{
  display:flex; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  color:inherit; text-decoration:none;
}
a.ntf-item__link:hover{ text-decoration:none; }
.ntf-item:has(a.ntf-item__link:hover){ box-shadow:var(--shadow-md); transform:translateY(-1px); }
a.ntf-item__link:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-lg); }

.ntf-item__icon{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius);
  background:var(--page); border:1px solid var(--line); color:var(--ink-2);
}
.ntf-item.is-unread .ntf-item__icon{ background:var(--card); color:var(--accent); border-color:var(--line-2); }
.ntf-item__icon--message{ color:var(--accent); }
.ntf-item__icon--billing{ color:var(--amber); }
.ntf-item__icon--review{ color:var(--amber); }

.ntf-item__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ntf-item__title{ font-weight:600; color:var(--ink); line-height:1.35; }
.ntf-item.is-unread .ntf-item__title{ font-weight:700; }
.ntf-item__text{
  color:var(--ink-2); font-size:var(--text-sm); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ntf-item__time{ color:var(--ink-3); font-size:var(--text-xs); margin-top:var(--space-1); }

.ntf-item__dot{
  flex:none; width:9px; height:9px; margin-top:var(--space-2);
  border-radius:50%; background:var(--accent);
}

.ntf-item__read{ padding:0 var(--space-5) var(--space-4); margin-top:calc(-1 * var(--space-2)); }

/* ---- Preferences ------------------------------------------------------ */
.ntf-prefs{ padding-block:var(--space-8) var(--space-16); max-width:var(--container-narrow); }
.ntf-prefs__head{ margin-bottom:var(--space-6); }
.ntf-prefs__title{ font-size:var(--text-2xl); margin:0 0 var(--space-1); }
.ntf-prefs__head .muted{ margin:0; }

.ntf-prefs__form{ display:flex; flex-direction:column; gap:var(--space-5); }
.ntf-prefs__group{ padding:var(--space-6); border:0; margin:0; }
.ntf-prefs__legend{ font-size:var(--text-lg); font-weight:700; color:var(--ink); padding:0; }
.ntf-prefs__intro{ color:var(--ink-2); font-size:var(--text-sm); margin:var(--space-1) 0 var(--space-4); }

.ntf-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-3) 0;
}
.ntf-toggle + .ntf-toggle{ border-top:1px solid var(--line); }
.ntf-toggle__copy{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ntf-toggle__label{ font-weight:600; color:var(--ink); }
.ntf-toggle__hint{ color:var(--ink-3); font-size:var(--text-sm); }

.ntf-toggle__control{ position:relative; flex:none; width:46px; height:28px; }
.ntf-toggle__control input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1;
}
.ntf-toggle__track{
  position:relative; display:block; width:46px; height:28px; border-radius:var(--radius-pill);
  background:var(--line-2); transition:background .18s ease;
}
.ntf-toggle__track::after{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:var(--card); box-shadow:var(--shadow-sm);
  transition:transform .18s ease;
}
.ntf-toggle__control input:checked + .ntf-toggle__track{ background:var(--accent); }
.ntf-toggle__control input:checked + .ntf-toggle__track::after{ transform:translateX(18px); }
.ntf-toggle__control input:focus-visible + .ntf-toggle__track{ box-shadow:var(--focus-ring); }

.ntf-prefs__field{ margin-top:var(--space-5); }
.ntf-prefs__actions{ display:flex; justify-content:flex-end; }

@media (max-width:640px){
  .ntf__head{ flex-direction:column; align-items:flex-start; }
  .ntf-prefs__actions{ justify-content:stretch; }
  .ntf-prefs__actions .btn{ width:100%; }
}
/* =====================================================================
   Admin — Agency outreach engine
   Uses design-system variables only. No hardcoded hex.
   ===================================================================== */

/* The unmissable arm-state banner. */
.otr-gate{
  display:flex; align-items:flex-start; gap:var(--space-4);
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6); margin-bottom:var(--space-6);
}
.otr-gate__badge{
  flex:none; font-weight:800; letter-spacing:.04em; font-size:var(--text-sm);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill);
  text-transform:uppercase; white-space:nowrap;
}
.otr-gate__body h2{ margin:0 0 var(--space-1); font-size:var(--text-lg); }
.otr-gate__body p{ margin:0; color:var(--ink-2); font-size:var(--text-sm); }
.otr-gate__meta{ margin-top:var(--space-2); font-size:var(--text-xs); color:var(--ink-3); }

/* OFF = safe (amber). ARMED = live (red). */
.otr-gate--off{ background:var(--amber-050); border-color:var(--amber); }
.otr-gate--off .otr-gate__badge{ background:var(--amber); color:#fff; }
.otr-gate--armed{ background:var(--red-050); border-color:var(--red); }
.otr-gate--armed .otr-gate__badge{ background:var(--red); color:#fff; }

/* Stat tiles. */
.otr-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-4); margin-bottom:var(--space-5); }
.otr-tile{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); }
.otr-tile__value{ font-size:var(--text-2xl); font-weight:700; line-height:1.1; color:var(--ink); }
.otr-tile__label{ margin-top:var(--space-1); font-size:var(--text-xs); color:var(--ink-2); }

/* Build + tools forms. */
.otr-form{ display:grid; gap:var(--space-4); }
.otr-form__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-4); }
.otr-field label{ display:block; font-size:var(--text-xs); font-weight:600; color:var(--ink-2); margin-bottom:var(--space-1); }
.otr-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }

/* Status pills for campaign + send rows. */
.otr-pill{ display:inline-block; padding:2px var(--space-2); border-radius:var(--radius-pill); font-size:var(--text-xs); font-weight:600; border:1px solid var(--line-2); background:var(--card); color:var(--ink-2); }
.otr-pill--queued{ background:var(--accent-050); color:var(--link); border-color:var(--accent-050); }
.otr-pill--sent{ background:var(--apply-050); color:var(--apply-text); border-color:var(--apply-050); }
.otr-pill--done{ background:var(--apply-050); color:var(--apply-text); border-color:var(--apply-050); }
.otr-pill--paused{ background:var(--amber-050); color:var(--amber); border-color:var(--amber-050); }
.otr-pill--failed,.otr-pill--suppressed{ background:var(--red-050); color:var(--red-strong); border-color:var(--red-050); }
/* =====================================================================
   yournextjob - discovery preferences wizard
   Full-screen, app-like, one question at a time. Tokens only.
   Degrades to a single scrollable form when JavaScript is off.
   ===================================================================== */

.page-quiz main { padding: 0; }

.quiz {
  padding: var(--space-5) var(--space-5) var(--space-16);
}
.quiz-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 66px - var(--space-5));
}

/* ---------- Header + progress ---------- */
.quiz-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.quiz-eyebrow {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
}
.quiz-skip-all {
  font-size: var(--text-sm);
  color: var(--ink-3);
  font-weight: 500;
}
.quiz-skip-all:hover { color: var(--accent); text-decoration: none; }
.quiz-count {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-3);
}
.quiz-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.quiz-progress__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width .34s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Intro ---------- */
.quiz-intro { margin: var(--space-6) 0 var(--space-2); }
.quiz-lede {
  font-size: clamp(1.6rem, 5vw, var(--text-3xl));
  margin: 0 0 var(--space-2);
}
.quiz-sub { margin: 0; color: var(--ink-2); }

/* ---------- Form + steps ---------- */
.quiz-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  margin-top: var(--space-6);
}

/* No-JS: every step stacks. With JS: only the active one shows. */
.quiz.js .quiz-step { display: none; }
.quiz.js .quiz-step.is-active {
  display: block;
  animation: quizStepIn .32s ease;
}
.quiz-step + .quiz-step { margin-top: var(--space-8); }
.quiz.js .quiz-step + .quiz-step { margin-top: 0; }

@keyframes quizStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.quiz-step__kicker {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.quiz-step__title {
  font-size: clamp(1.35rem, 4.5vw, var(--text-2xl));
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}
.quiz-step__title:focus { outline: none; }
.quiz-step__hint {
  margin: 0 0 var(--space-6);
  color: var(--ink-2);
  font-size: var(--text-sm);
}

/* ---------- Selectable chips (multi-select) ---------- */
.quiz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.quiz-chip {
  position: relative;
  display: inline-flex;
}
.quiz-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.quiz-chip__face {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .65rem 1.05rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  font-weight: 500;
  font-size: var(--text-sm);
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.quiz-chip:hover .quiz-chip__face {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.quiz-chip input:checked + .quiz-chip__face {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.quiz-chip input:checked + .quiz-chip__face::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.quiz-chip input:focus-visible + .quiz-chip__face {
  box-shadow: var(--focus-ring);
}

/* ---------- Sliders ---------- */
.quiz-slider { margin-top: var(--space-4); }
.quiz-slider--distance {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.quiz-slider__value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-5);
}
.quiz-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--line-2);
  outline: none;
  cursor: pointer;
}
.quiz-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  border: 4px solid var(--card);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.quiz-range::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  border: 4px solid var(--card);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.quiz-range:focus-visible { box-shadow: var(--focus-ring); }
.quiz-slider__scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* ---------- Location input ---------- */
.quiz-input {
  font-size: var(--text-lg);
  padding: .85rem 1rem;
}

/* ---------- Radio option cards (single-select) ---------- */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-option {
  position: relative;
  display: block;
  cursor: pointer;
}
.quiz-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.quiz-option__face {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--line-2);
  background: var(--card);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.quiz-option__label { font-weight: 600; color: var(--ink); }
.quiz-option__desc { font-size: var(--text-sm); color: var(--ink-2); }
.quiz-option:hover .quiz-option__face { border-color: var(--accent); }
.quiz-option input:checked + .quiz-option__face {
  border-color: var(--accent);
  background: var(--accent-050);
  box-shadow: var(--shadow-sm);
}
.quiz-option input:focus-visible + .quiz-option__face { box-shadow: var(--focus-ring); }

/* ---------- Bottom nav ---------- */
.quiz-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-8);
}
.quiz-nav__spacer { flex: 1 1 auto; }
.quiz-btn { font-size: var(--text-base); }
.quiz-btn--next { padding: .85rem 1.6rem; min-width: 150px; }
/* Back + Skip only steer the JS wizard; hidden in the no-JS fallback. */
.quiz-btn--back,
.quiz-btn--skip { display: none; }
.quiz.js .quiz-btn--back,
.quiz.js .quiz-btn--skip { display: inline-flex; }
.quiz-btn--skip { color: var(--ink-2); }

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

/* ---------- Small screens: clear the fixed mobile nav ---------- */
@media (max-width: 767px) {
  /* Multi-select answer chips are full tap targets on touch. */
  .quiz-chip__face { min-height: 44px; }
  .quiz { padding-bottom: calc(var(--space-16) + 60px); }
  .quiz-shell { min-height: calc(100dvh - 66px - 60px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .quiz.js .quiz-step.is-active { animation: none; }
  .quiz-progress__fill { transition: none; }
  .quiz-chip:hover .quiz-chip__face { transform: none; }
}
/* =====================================================================
   yournextjob — Employer reporting + wallet  ·  "soft premium"
   Scopes: .rpt-*  (campaign reports)   .bill-*  (ad wallet + billing)
   CSS variables only. The seller's daily surface — clear, calm, premium.
   ===================================================================== */

.rpt,
.bill,
.bill-result{ padding:var(--space-10) 0 var(--space-16); }

/* ---------- Shared header ---------- */
.rpt__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--space-4) var(--space-6); flex-wrap:wrap; margin-bottom:var(--space-5);
}
.rpt__head h1{ font-size:var(--text-3xl); margin:0; }
.rpt__sub{ margin:var(--space-2) 0 0; font-size:var(--text-sm); }

/* ---------- Section tabs ---------- */
.rpt-tabs{
  display:flex; gap:var(--space-1); margin-bottom:var(--space-8);
  border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.rpt-tabs a{
  flex:0 0 auto; padding:var(--space-3) var(--space-4); font-size:var(--text-sm);
  font-weight:600; color:var(--ink-2); border-bottom:2px solid transparent;
  margin-bottom:-1px; white-space:nowrap;
}
.rpt-tabs a:hover{ color:var(--ink); text-decoration:none; }
.rpt-tabs a.is-active{ color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- Toolbar ---------- */
.rpt-toolbar{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  margin-bottom:var(--space-6);
}
.rpt-range{
  display:inline-flex; background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--radius-pill); padding:var(--space-1);
}
.rpt-range__opt{
  padding:.42rem .95rem; border-radius:var(--radius-pill); font-size:var(--text-sm);
  font-weight:600; color:var(--ink-2); transition:background .12s ease, color .12s ease;
}
.rpt-range__opt:hover{ color:var(--ink); text-decoration:none; }
.rpt-range__opt.is-active{ background:var(--accent); color:#fff; }
.rpt-range__opt.is-active:hover{ color:#fff; }
.rpt-filter{ display:flex; align-items:center; gap:var(--space-2); }
.rpt-filter .form-select{ min-width:180px; padding-top:.5rem; padding-bottom:.5rem; }
.rpt-export{ margin-left:auto; }
.rpt-export svg{ flex:0 0 auto; }

/* ---------- KPI cards ---------- */
.rpt-kpis{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-4);
  margin-bottom:var(--space-8);
}
.rpt-kpi{
  display:flex; flex-direction:column; gap:var(--space-1);
  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;
}
.rpt-kpi:hover{ box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.rpt-kpi__label{ font-size:var(--text-xs); font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }
.rpt-kpi__value{ font-size:var(--text-2xl); font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1.1; }
.rpt-kpi__note{ font-size:var(--text-xs); color:var(--ink-3); }
.rpt-kpi--accent{
  background:linear-gradient(180deg, var(--accent-050), var(--card));
  border-color:var(--line-2);
}
.rpt-kpi--accent .rpt-kpi__value{ color:var(--accent-strong); }

/* ---------- Chart ---------- */
.rpt-chart{
  margin:0 0 var(--space-8); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-5) var(--space-5) var(--space-4);
}
.rpt-chart__cap{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  flex-wrap:wrap; margin-bottom:var(--space-4); font-size:var(--text-sm);
  font-weight:600; color:var(--ink);
}
.rpt-legend{ display:flex; gap:var(--space-4); font-weight:500; color:var(--ink-2); }
.rpt-legend__item{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-xs); }
.rpt-sw{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.rpt-sw--imp{ background:var(--accent-050); border:1px solid var(--line-2); }
.rpt-sw--clk{ background:var(--accent); }
.rpt-sw--spend{ background:var(--accent-strong); border-radius:var(--radius-pill); height:4px; width:16px; }
.rpt-chart__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.rpt-chart__svg{ display:block; width:100%; min-width:520px; height:300px; }
.rpt-chart__empty{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:200px; padding:var(--space-6);
}
.rpt-chart__empty p{ max-width:44ch; color:var(--ink-2); margin:0; }
.rpt-chart__scale{ margin:var(--space-3) 0 0; font-size:var(--text-xs); color:var(--ink-3); text-align:right; }

/* ---------- Data blocks + tables ---------- */
.rpt-block{ margin-bottom:var(--space-8); }
.rpt-block__title{ font-size:var(--text-lg); margin:0 0 var(--space-4); }
.rpt-block__empty{ font-size:var(--text-sm); margin:0; }
.rpt-table__wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.rpt-table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); min-width:640px; }
.rpt-table thead th{
  text-align:left; padding:var(--space-3) var(--space-4); font-size:var(--text-xs);
  font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.rpt-table tbody td{ padding:var(--space-4); border-bottom:1px solid var(--line); vertical-align:middle; }
.rpt-table tbody tr:last-child td{ border-bottom:0; }
.rpt-table tbody tr:hover{ background:var(--page); }
.rpt-table tbody tr.is-selected{ background:var(--accent-050); }
.rpt-num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rpt-num--spend{ font-weight:600; color:var(--ink); }
.rpt-table__name strong{ display:block; color:var(--ink); font-weight:600; }
.rpt-table__name a{ font-weight:600; color:var(--link); }
.rpt-obj{ display:block; font-size:var(--text-xs); color:var(--ink-3); margin-top:2px; text-transform:uppercase; letter-spacing:.03em; }
.rpt-table__act{ text-align:right; white-space:nowrap; }
.rpt-link{ font-size:var(--text-sm); font-weight:600; color:var(--accent); }

/* Status badges */
.rpt-badge{
  display:inline-block; padding:.25rem .6rem; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; white-space:nowrap; border:1px solid transparent;
}
.rpt-badge--active{ background:var(--apply-050); color:var(--apply-text); }
.rpt-badge--paused{ background:var(--amber-050); color:var(--amber); }
.rpt-badge--depleted{ background:var(--red-050); color:var(--red-strong); }
.rpt-badge--draft{ background:var(--page); color:var(--ink-2); border-color:var(--line-2); }
.rpt-badge--ended{ background:var(--page); color:var(--ink-3); border-color:var(--line-2); }

.rpt-foot{ font-size:var(--text-sm); margin:var(--space-6) 0 0; }

/* =====================================================================
   Billing / wallet
   ===================================================================== */
.bill-grid{
  display:grid; grid-template-columns:minmax(0, 360px) minmax(0, 1fr);
  gap:var(--space-6); align-items:start;
}

/* Balance card */
.bill-wallet{ display:flex; flex-direction:column; gap:var(--space-5); }
.bill-balance{
  background:linear-gradient(160deg, var(--accent), var(--accent-strong));
  color:#fff; border-radius:var(--radius-lg); padding:var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-2); box-shadow:var(--shadow-md);
}
.bill-balance.is-low{ background:linear-gradient(160deg, var(--amber), var(--red)); }
.bill-balance__label{ font-size:var(--text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.05em; opacity:.85; }
.bill-balance__value{ font-size:var(--text-4xl); font-weight:600; letter-spacing:-.03em; line-height:1; }
.bill-balance__note{ font-size:var(--text-sm); opacity:.92; }

.bill-demo{
  background:var(--amber-050); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:var(--space-3) var(--space-4); font-size:var(--text-sm); color:var(--ink-2); margin:0;
}
.bill-demo strong{ color:var(--ink); }

/* Top-up */
.bill-topup{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-5);
}
.bill-topup__title{ font-size:var(--text-lg); margin:0 0 var(--space-4); }
.bill-presets{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-3); margin-bottom:var(--space-5); }
.bill-preset{
  padding:var(--space-4) var(--space-2); border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--card); color:var(--ink); font-weight:600; font-size:var(--text-lg);
  cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.bill-preset:hover{ border-color:var(--accent); color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-1px); }

.bill-custom__label{ display:block; font-size:var(--text-sm); font-weight:600; color:var(--ink-2); margin-bottom:var(--space-2); }
.bill-custom__row{ display:flex; align-items:stretch; gap:var(--space-2); }
.bill-custom__prefix{
  display:flex; align-items:center; padding:0 var(--space-3); font-weight:600; color:var(--ink-2);
  background:var(--page); border:1px solid var(--line-2); border-radius:var(--radius);
}
.bill-custom__input{ flex:1; min-width:0; }
.bill-custom__hint{ margin:var(--space-2) 0 0; font-size:var(--text-xs); color:var(--ink-3); }

/* Ledger */
.bill-ledger__title{ font-size:var(--text-lg); margin:0 0 var(--space-4); }
.bill-ledger__empty{
  background:var(--card); border:1px dashed var(--line-2); border-radius:var(--radius-lg);
  padding:var(--space-8); text-align:center;
}
.bill-ledger__foot{ font-size:var(--text-xs); margin:var(--space-3) 0 0; }
.bill-tx-table{ min-width:520px; }
.bill-tx__date{ color:var(--ink-2); white-space:nowrap; }
.bill-tx__detail{ color:var(--ink-2); }
.bill-tx-badge{
  display:inline-block; padding:.22rem .55rem; border-radius:var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; white-space:nowrap;
}
.bill-tx--in{ background:var(--apply-050); color:var(--apply-text); }
.bill-tx--out{ background:var(--accent-050); color:var(--link); }
.bill-tx--adj{ background:var(--page); color:var(--ink-2); border:1px solid var(--line-2); }
.bill-amt--in{ color:var(--apply-text); font-weight:600; }
.bill-amt--out{ color:var(--ink); font-weight:600; }

/* Result pages (success / cancel) */
.bill-result__card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:var(--space-10) var(--space-8); text-align:center; box-shadow:var(--shadow-sm);
}
.bill-result__icon{
  width:64px; height:64px; border-radius:var(--radius-pill); margin:0 auto var(--space-5);
  display:flex; align-items:center; justify-content:center;
}
.bill-result__icon--ok{ background:var(--apply-050); color:var(--apply-text); }
.bill-result__icon--neutral{ background:var(--page); color:var(--ink-2); border:1px solid var(--line-2); }
.bill-result__card h1{ font-size:var(--text-3xl); }
.bill-result__balance{
  display:inline-flex; align-items:baseline; gap:var(--space-3);
  background:var(--page); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-3) var(--space-5); margin:var(--space-5) 0;
}
.bill-result__balance span{ font-size:var(--text-sm); color:var(--ink-2); }
.bill-result__balance strong{ font-size:var(--text-xl); color:var(--ink); }
.bill-result__actions{ display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .rpt-kpis{ grid-template-columns:repeat(2, 1fr); }
  .bill-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .rpt__head h1{ font-size:var(--text-2xl); }
  .rpt-export{ margin-left:0; }
  .rpt-toolbar{ gap:var(--space-2); }
  .rpt-filter .form-select{ min-width:150px; }
  .bill-balance__value{ font-size:var(--text-3xl); }
}
@media (max-width:420px){
  .rpt-kpis{ grid-template-columns:1fr; }
  .bill-presets{ grid-template-columns:1fr; }
  .bill-result__actions .btn{ width:100%; }
}
/* =====================================================================
   yournextjob — Reviews + Claim  ·  write-a-review, claim a profile
   Soft-premium, mobile-first. CSS variables only.
   Scoped to .page-review-write and .page-company-claim plus shared bits.
   ===================================================================== */

/* ---------- Shared company identity block ---------- */
.company-ident{ display:flex; align-items:center; gap:var(--space-4); }
.company-ident > div{ min-width:0; }
.company-ident h1{ font-size:clamp(1.5rem, 4vw, var(--text-2xl)); margin:0 0 var(--space-1); }
.company-ident .eyebrow{ margin-bottom:var(--space-1); }
.company-ident__logo{ flex:none; width:52px; height:52px; border-radius:var(--radius);
  object-fit:contain; background:var(--page); border:1px solid var(--line); padding:4px; }
.company-ident__avatar{ flex:none; width:52px; height:52px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; background:var(--accent-050);
  color:var(--accent-strong); font-weight:600; font-size:var(--text-xl); }

/* ---------- Write a review ---------- */
.review-write{ padding-bottom:var(--space-16); }
.review-write__head{ margin-bottom:var(--space-6); }
.review-write__place{ margin:0; font-size:var(--text-sm); }
.review-write__intro{ margin:var(--space-5) 0 0; max-width:60ch; color:var(--ink-2); }

.review-write__grid{ display:grid; gap:var(--space-6); align-items:start; }

.review-form{ padding:var(--space-6); }
.review-form .form-group:last-of-type{ margin-bottom:var(--space-5); }
.review-form__opt{ font-weight:500; color:var(--ink-3); }
.review-form__pc{ min-height:88px; }
.review-form__recommend{ font-size:var(--text-base); font-weight:500; }
.review-form__rule{ border:0; border-top:1px solid var(--line); margin:var(--space-2) 0 var(--space-6); }
.review-form__legal{ margin:var(--space-4) 0 0; font-size:var(--text-xs); color:var(--ink-3); text-align:center; }
.review-form__legal a{ color:var(--ink-2); text-decoration:underline; }

/* Honeypot — visually removed, kept in the DOM for bots to trip over. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Star rating input (keyboard + ARIA, no JS) ---------- */
.rating-field{ border:0; margin:0 0 var(--space-6); padding:0; min-width:0; }
.rating-field legend{ padding:0; }
.rating-field .form-hint{ margin-top:var(--space-1); }

/* row-reverse so the pure-CSS "fill lower stars" sibling logic reads left→right */
.star-rating{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-start;
  gap:var(--space-1); margin-top:var(--space-1); }
.star-rating__star{ display:inline-flex; color:var(--line-2); cursor:pointer; line-height:0;
  padding:3px; border-radius:var(--radius-sm);
  transition:color .12s ease, transform .12s ease; }
.star-rating__star svg{ display:block; }
.star-rating__star:hover{ transform:scale(1.06); }
/* Chosen star + every lower one (its DOM-following siblings). */
.star-rating__input:checked ~ .star-rating__star{ color:var(--amber); }
/* While hovering the row, drop the persisted fill then paint the hover preview. */
.star-rating:hover .star-rating__star{ color:var(--line-2); }
.star-rating__star:hover,
.star-rating__star:hover ~ .star-rating__star{ color:var(--amber); }
/* Keyboard focus lands on the visible star, not the hidden radio. */
.star-rating__input:focus-visible + .star-rating__star{ box-shadow:var(--focus-ring); }
.rating-field.is-invalid .star-rating__star{ color:var(--red); }

/* ---------- Review guidelines aside ---------- */
.review-guide{ background:var(--accent-050); border:1px solid var(--line-2);
  border-radius:var(--radius-lg); padding:var(--space-6); }
.review-guide__title{ font-size:var(--text-lg); margin-bottom:var(--space-4); }
.review-guide__list{ list-style:none; margin:0 0 var(--space-4); padding:0;
  display:flex; flex-direction:column; gap:var(--space-3); }
.review-guide__list li{ display:flex; gap:var(--space-3); font-size:var(--text-sm); color:var(--ink-2); }
.review-guide__list svg{ flex:none; margin-top:2px; color:var(--accent-strong); }
.review-guide__note{ margin:0; font-size:var(--text-xs); color:var(--ink-3); }

/* ---------- Claim a profile ---------- */
.company-claim{ padding-bottom:var(--space-16); }
.company-claim__grid{ display:grid; gap:var(--space-6); align-items:start; }
.company-claim__main{ padding:var(--space-8) var(--space-6); }
.company-claim__lead{ margin:var(--space-5) 0 var(--space-6); color:var(--ink-2); max-width:56ch; }
.company-claim__form{ margin:0; }
.company-claim__reassure{ margin:var(--space-4) 0 0; font-size:var(--text-xs); color:var(--ink-3); }
.company-claim__nodomain{ background:var(--page); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:var(--space-5); }
.company-claim__nodomain p{ margin:0 0 var(--space-2); font-size:var(--text-sm); color:var(--ink-2); }
.company-claim__nodomain p:last-child{ margin-bottom:0; }

.company-claim__side{ background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-6); }
.company-claim__side-title{ font-size:var(--text-lg); margin-bottom:var(--space-4); }
.company-claim__benefits{ list-style:none; margin:0 0 var(--space-4); padding:0;
  display:flex; flex-direction:column; gap:var(--space-4); }
.company-claim__benefits li{ display:flex; gap:var(--space-3); }
.company-claim__benefits div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.company-claim__benefits strong{ font-size:var(--text-sm); color:var(--ink); }
.company-claim__benefits span span,
.company-claim__benefits div span{ font-size:var(--text-sm); color:var(--ink-2); }
.company-claim__ic{ flex:none; width:34px; height:34px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-050); color:var(--accent-strong); }
.company-claim__side-note{ margin:0; font-size:var(--text-xs); color:var(--ink-3); }

/* ---------- Responsive: form + aside two-up on wider screens ---------- */
@media (min-width:900px){
  .review-write__grid{ grid-template-columns:minmax(0,1fr) 300px; gap:var(--space-8); }
  .company-claim__grid{ grid-template-columns:minmax(0,1fr) 320px; gap:var(--space-8); }
}
/* =====================================================================
   seo.css — job-page polish + home hero media + computed card badges.
   Owned by the SEO area. CSS variables only; extends app.css tokens.
   ===================================================================== */

/* ---------- Home hero: copy + live swipe-card mock ----------
   The mock deck itself is styled in pages/home.css (.home-mock*). */
.hero-grid{ display:block; }
.hero-copy{ min-width:0; }

@media (min-width:900px){
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:var(--space-12);
    align-items:center;
  }
}

/* ---------- Job detail: key-facts grid ---------- */
.job-facts{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--space-4) var(--space-6);
  margin:0 0 var(--space-5);
  padding:var(--space-5) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.job-facts__item{ min-width:0; }
.job-facts__item dt{
  margin:0 0 var(--space-1);
  font-size:var(--text-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-3);
}
.job-facts__item dd{
  margin:0;
  font-size:var(--text-base);
  font-weight:600;
  color:var(--ink);
  overflow-wrap:break-word;
}
.job-facts__pay{ color:var(--apply-text); }

@media (min-width:560px){
  .job-facts{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ---------- Computed card badges ---------- */
/* Green "salary shown" chip — an outlined variant so it reads distinctly
   from the solid "New" badge while staying AA on the pale-green fill. */
.badge-salary{ background:var(--apply-050); color:var(--apply-text); border:1px solid var(--apply); }
/* Neutral freshness chip for re-verified listings. */
.badge-checked{ background:var(--page); color:var(--ink-2); border:1px solid var(--line-2); }

/* ---------- Mobile sticky apply bar ---------- */
.apply-bar{ display:none; }

@media (max-width:640px){
  .apply-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    position:fixed;
    left:0;
    right:0;
    /* Sit directly above the (now ~60px) mobile bottom nav. */
    bottom:calc(60px + env(safe-area-inset-bottom));
    z-index:var(--z-sticky);
    padding:var(--space-3) var(--space-4);
    background:var(--card);
    border-top:1px solid var(--line);
    box-shadow:var(--shadow-lg);
  }
  .apply-bar__pay{ display:flex; flex-direction:column; min-width:0; }
  .apply-bar__label{ font-size:var(--text-xs); color:var(--ink-3); }
  .apply-bar__amount{
    font-size:var(--text-base);
    font-weight:600;
    color:var(--apply-text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .apply-bar__cta{ flex:none; }

  /* Clear both the apply bar (~69px) stacked on the bottom nav (~60px)
     so content is never hidden behind either. */
  body.page-job-detail{ padding-bottom:calc(136px + env(safe-area-inset-bottom)); }
}
/* ==========================================================================
   Reusable social share bar (partials/share-bar.php) + tool "Share my result".
   Namespaced: .share-bar*, .share-result-btn. Tokens only, no hardcoded hex.
   ========================================================================== */

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

/* Native-share button (revealed by share.js when navigator.share exists). */
.share-bar__native {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: box-shadow .14s ease, transform .14s ease, background .14s ease;
}
.share-bar__native:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.share-bar__native[hidden] { display: none; }

/* Round network / copy / download buttons. */
.share-bar__net {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
  transition: box-shadow .14s ease, transform .14s ease, color .14s ease, border-color .14s ease;
}
.share-bar__net:hover {
  text-decoration: none;
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.share-bar__net svg { flex: none; }

/* "Share my result" pill sits happily inside a tool's dark result panel. */
.share-result-btn {
  margin-top: var(--space-5);
}
.share-result-btn[hidden] { display: none; }

/* ---- Mobile: full 44px tap targets (WCAG 2.5.5 / Apple HIG) ----
   The round network/copy/download buttons are 42px on desktop; nudge them
   and the native-share pill to 44px on touch widths only. */
@media (max-width: 820px) {
  .share-bar__net { width: 44px; height: 44px; }
  .share-bar__native { min-height: 44px; }
}
/* ==========================================================================
   Social share landing page + reusable share buttons.
   Namespaced: .share-page*, .share-block*, .share-net*, .share-copy*,
   .refer*, and the reusable .share-btns* row.
   Tokens only - no hardcoded colours.
   ========================================================================== */

.share-page { padding: var(--space-10) 0 var(--space-16); }

.share-page__back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--ink-2); font-weight: 500; font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}
.share-page__back:hover { color: var(--ink); text-decoration: none; }

.share-page__head { max-width: 46ch; margin-bottom: var(--space-10); }
.share-page__head h1 { font-size: clamp(1.9rem, 4.5vw, var(--text-3xl)); }
.share-page__head .lead { margin-bottom: 0; }

.share-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

/* Card preview -------------------------------------------------------------- */
.share-page__preview { position: sticky; top: calc(66px + var(--space-6)); }
.share-card-img {
  display: block; width: 100%; height: auto; max-width: 320px;
  aspect-ratio: 9 / 16; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); background: var(--accent-050);
}

/* Action blocks ------------------------------------------------------------- */
.share-page__actions { display: flex; flex-direction: column; gap: var(--space-5); }

.share-block__title { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.share-block__hint { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.share-block__label {
  display: block; font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-2); margin: var(--space-5) 0 var(--space-2);
}

.btn-block { display: flex; width: 100%; }
.share-native { margin-bottom: var(--space-4); }

/* Network buttons ----------------------------------------------------------- */
.share-net {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.share-net__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: .7rem 1rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  font-weight: 600; font-size: var(--text-sm);
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease, color .14s ease;
}
.share-net__btn:hover {
  text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px);
  border-color: var(--accent); color: var(--accent);
}
.share-net__btn svg { flex: none; }

/* Copy field ---------------------------------------------------------------- */
.share-copy { display: flex; gap: var(--space-2); align-items: stretch; }
.share-copy .form-input {
  flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--ink-2);
}
.share-copy__btn { flex: none; }

/* Refer a mate -------------------------------------------------------------- */
.refer__result { margin-top: var(--space-5); }

@media (max-width: 760px) {
  .share-page__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .share-page__preview { position: static; margin: 0 auto; }
  .share-card-img { max-width: 260px; margin: 0 auto; }
}

/* ==========================================================================
   Reusable compact share row (partials/share-buttons.php).
   Loaded globally so it works on the job detail + swipe cards too.
   ========================================================================== */

.share-btns { position: relative; display: inline-flex; align-items: center; }

.share-btns__row { display: inline-flex; align-items: center; gap: var(--space-2); }

.share-btns__net {
  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: box-shadow .14s ease, transform .14s ease, color .14s ease, border-color .14s ease;
}
.share-btns__net:hover {
  text-decoration: none; color: var(--accent); border-color: var(--accent);
  box-shadow: var(--shadow-sm); transform: translateY(-1px);
}

/* Single Share button (revealed by share.js) */
.share-btns__toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .55rem 1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-2); background: var(--card);
  color: var(--ink); font-weight: 600; font-size: var(--text-sm); cursor: pointer;
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
.share-btns__toggle:hover {
  box-shadow: var(--shadow-sm); transform: translateY(-1px); border-color: var(--accent);
}

/* When enhanced, collapse the raw row into the single Share button. */
.share-btns.is-enhanced .share-btns__row { display: none; }

/* Popover fallback (no navigator.share) */
.share-btns__pop {
  position: absolute; top: calc(100% + var(--space-2)); right: 0;
  z-index: var(--z-dropdown); min-width: 180px;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-lg);
}
.share-btns__popitem {
  display: flex; align-items: center; gap: var(--space-3);
  padding: .55rem .7rem; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); text-align: left;
  font-weight: 500; font-size: var(--text-sm); cursor: pointer; width: 100%;
}
.share-btns__popitem:hover { background: var(--accent-050); color: var(--accent); text-decoration: none; }
.share-btns__popitem svg { flex: none; color: var(--ink-3); }
.share-btns__popitem:hover svg { color: var(--accent); }
/* =====================================================================
   yournextjob - swipe-to-apply deck
   Full-bleed mobile card stack. Tokens only, soft-premium.
   ===================================================================== */

.page-swipe main { padding: 0; }

.swipe-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: var(--space-5) 0 var(--space-6);
}

/* ---------- Top bar ---------- */
.swipe-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.swipe-title { font-size: var(--text-2xl); margin: 0 0 var(--space-1); }
.swipe-context { font-size: var(--text-sm); margin: 0; }
.swipe-progress {
  flex: none;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-050);
  color: var(--link);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Stage + deck ---------- */
.swipe-stage {
  position: relative;
  height: clamp(340px, 52vh, 480px);
  overflow: clip;
  overflow-clip-margin: 26px;
}
.swipe-deck { position: absolute; inset: 0; }

.swipe-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  touch-action: none;
  transform-origin: center bottom;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}
.swipe-card.is-top { cursor: grab; will-change: transform; box-shadow: var(--shadow-md); }
.swipe-card.is-dragging { cursor: grabbing; transition: none; }
.swipe-card.is-gone { pointer-events: none; }

/* ---------- Card header band ---------- */
.swipe-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: linear-gradient(135deg, var(--accent-050), var(--card) 78%);
  border-bottom: 1px solid var(--line);
}
.swipe-card__logo {
  width: 60px; height: 60px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--card);
  border: 1px solid var(--line-2);
}
.swipe-card__avatar {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-2xl);
  font-weight: 600;
}
.swipe-card__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  max-width: 60%;
}
.badge-pay {
  background: var(--apply-050);
  color: var(--apply-text);
  border-color: transparent;
}

/* ---------- Card body ---------- */
.swipe-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  overflow: hidden;
}
.swipe-card__title {
  font-size: var(--text-xl);
  line-height: 1.3;
  margin: 0;
  flex-shrink: 0;              /* the title must never be squeezed or top-clipped */
  padding-top: 2px;           /* headroom so the first line's ascenders never clip */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.swipe-card__company { margin: 0; color: var(--ink-2); font-weight: 500; flex-shrink: 0; }
.swipe-card__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.swipe-card__facts li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
  font-size: var(--text-sm);
}
.swipe-card__facts svg { color: var(--ink-faint); flex: none; }
.swipe-card__pay { color: var(--ink) !important; font-weight: 600; }
.swipe-card__pay svg { color: var(--apply-text) !important; }
.swipe-card__summary {
  margin: 0;
  min-height: 0;
  flex: 1 1 auto;             /* the description is the flexible part that clips, not the title */
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.swipe-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

.swipe-card__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--link);
  font-size: var(--text-sm);
  font-weight: 600;
}
.swipe-card__more:hover { text-decoration: none; background: var(--accent-050); }

/* ---------- Swipe stamps ---------- */
.swipe-card__stamp {
  position: absolute;
  top: var(--space-6);
  z-index: 5;
  padding: var(--space-1) var(--space-4);
  border: 3px solid currentColor;
  border-radius: var(--radius);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.swipe-card__stamp--apply { left: var(--space-6); color: var(--apply); transform: rotate(-14deg); }
.swipe-card__stamp--pass  { right: var(--space-6); color: var(--red); transform: rotate(14deg); }
.swipe-card__stamp--save  {
  left: 50%;
  top: auto;
  bottom: var(--space-10);
  color: var(--accent);
  transform: translateX(-50%) rotate(-4deg);
}

/* ---------- Controls ---------- */
.swipe-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}
.swipe-btn {
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 2px solid var(--line-2);
  background: var(--card);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.swipe-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.swipe-btn:active { transform: translateY(0); }
.swipe-btn--skip { width: 60px; height: 60px; color: var(--skip); }
.swipe-btn--skip:hover { color: var(--red); border-color: var(--red); }
.swipe-btn--save { width: 54px; height: 54px; color: var(--accent); }
.swipe-btn--save:hover { border-color: var(--accent); background: var(--accent-050); }
.swipe-btn--apply {
  width: 72px; height: 72px;
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.swipe-btn--apply:hover { background: var(--accent-strong); border-color: var(--accent-strong); }

.swipe-hint {
  margin: 0;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* ---------- End state ---------- */
.swipe-end {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.swipe-end:focus-visible { box-shadow: var(--focus-ring); }
.swipe-end__icon {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: var(--radius-pill);
  background: var(--apply-050);
  color: var(--apply-text);
}
.swipe-end h2 { margin: 0; font-size: var(--text-2xl); }
.swipe-end p { margin: 0; max-width: 34ch; }
.swipe-end__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .swipe-card { transition: opacity .28s ease; }
  .swipe-btn { transition: none; }
  .swipe-btn:hover { transform: none; }
}

/* ---------- Larger screens ---------- */
@media (min-width: 700px) {
  .swipe-page { padding-top: var(--space-8); }
  .swipe-stage { height: clamp(400px, 56vh, 500px); }
}
/* =====================================================================
   Talent database (employer). All selectors namespaced .talent* so the
   auto-loaded glob cannot leak onto other pages. Design-system tokens only.
   ===================================================================== */

.talent { padding: var(--space-8) 0 var(--space-16); }

.talent__head { margin-bottom: var(--space-6); }
.talent__intro { max-width: 62ch; color: var(--ink-2); font-size: var(--text-base); margin: 0; }

/* ---------- Filter bar ---------- */
.talent-filter { margin: var(--space-6) 0 var(--space-4); }
.talent-filter__row {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-3);
}
.talent-filter__field { flex: 0 1 220px; }
.talent-filter__field--grow { flex: 1 1 280px; }

.talent__count {
  color: var(--ink-2); font-size: var(--text-sm); font-weight: 500;
  margin: 0 0 var(--space-5);
}

/* ---------- Results grid ---------- */
.talent-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.talent-card {
  display: flex; flex-direction: column; gap: var(--space-4);
  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;
}
.talent-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ---------- Identity ---------- */
.talent-card__top { display: flex; align-items: flex-start; gap: var(--space-3); }
.talent-card__avatar {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-050); color: var(--accent);
  font-weight: 600; font-size: var(--text-lg);
}
.talent-card__id { flex: 1 1 auto; min-width: 0; }
.talent-card__name { font-size: var(--text-lg); margin: 0; line-height: 1.25; }
.talent-card__name a { color: var(--ink); }
.talent-card__name a:hover { color: var(--link); }
.talent-card__role { margin: var(--space-1) 0 0; color: var(--ink-2); font-size: var(--text-sm); }

.talent-card__saved-flag {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: .18rem .55rem; border-radius: var(--radius-pill);
  background: var(--accent-050); color: var(--accent);
  font-size: var(--text-xs); font-weight: 600;
}

/* ---------- Meta ---------- */
.talent-card__meta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
}
.talent-card__meta li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--ink-2); font-size: var(--text-sm);
}
.talent-card__meta svg { color: var(--ink-faint); flex: none; }

.talent-card__headline {
  margin: 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.5;
}

/* ---------- Skills ---------- */
.talent-card__skills {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.talent-skill {
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-2); background: var(--page);
  color: var(--ink-2); font-size: var(--text-xs); font-weight: 500;
}
.talent-skill--more { border-style: dashed; color: var(--ink-3); }

/* ---------- Actions ---------- */
.talent-card__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: auto; padding-top: var(--space-2);
}
.talent-card__actions .btn { flex: 0 0 auto; }
.talent-save.is-saved,
.talent-save[disabled] {
  background: var(--apply-050); border-color: var(--apply-050);
  color: var(--apply-text); cursor: default; opacity: 1;
}
.talent-save.is-saved:hover { box-shadow: none; transform: none; }

/* Message disclosure. summary carries .btn so hide the default marker. */
.talent-message { position: relative; }
.talent-message__toggle { list-style: none; cursor: pointer; }
.talent-message__toggle::-webkit-details-marker { display: none; }
.talent-message__form {
  margin-top: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.talent-message__body { width: 100%; resize: vertical; min-height: 68px; }
.talent-message__form .btn { align-self: flex-start; }

@media (max-width: 560px) {
  .talent-grid { grid-template-columns: 1fr; }
  .talent-filter__field,
  .talent-filter__field--grow { flex: 1 1 100%; }
}

/* =====================================================================
   Appended: shortlist tab toggle, shortlist card extras, and the premium
   lock / upgrade page. All namespaced; none of the rules above change.
   ===================================================================== */

/* ---------- Talent / Shortlist tab toggle ---------- */
.talent-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  border-bottom: 1px solid var(--line);
  margin: 0 0 var(--space-5);
}
.talent-tabs__tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--ink-2); font-size: var(--text-sm); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.talent-tabs__tab:hover { color: var(--ink); text-decoration: none; }
.talent-tabs__tab.is-active { color: var(--link); font-weight: 600; border-bottom-color: var(--accent); }
.talent-tabs__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-050); color: var(--accent);
  font-size: var(--text-xs); font-weight: 700;
}

/* ---------- Shortlist card extras ---------- */
.shortlist-card__saved {
  flex: none; color: var(--ink-faint); font-size: var(--text-xs);
  font-weight: 500; white-space: nowrap;
}
.shortlist-card__note {
  margin: 0; padding: var(--space-3) var(--space-4);
  background: var(--page); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink);
  font-size: var(--text-sm); line-height: 1.5;
}
.shortlist-card__note-label {
  display: block; color: var(--ink-3); font-size: var(--text-xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: var(--space-1);
}
.shortlist-remove-form { display: inline-flex; margin: 0; }
.shortlist-remove { color: var(--ink-3); }
.shortlist-remove:hover { color: var(--red); border-color: var(--red-050); }
.talent-card.is-removing {
  opacity: 0; transform: scale(.98);
  transition: opacity .16s ease, transform .16s ease;
}

/* ---------- Premium lock / upgrade page ---------- */
.talent-lock__panel {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-8);
  align-items: stretch;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-8);
}
.talent-lock__pitch { display: flex; flex-direction: column; align-items: flex-start; }
.talent-lock__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  background: var(--accent-050); color: var(--accent);
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.talent-lock__title { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-2xl); }
.talent-lock__lead { margin: 0; color: var(--ink-2); font-size: var(--text-base); line-height: 1.55; max-width: 46ch; }

.talent-lock__features { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-4); }
.talent-lock__feature { display: flex; gap: var(--space-3); align-items: flex-start; }
.talent-lock__feature strong { display: block; color: var(--ink); font-size: var(--text-base); }
.talent-lock__feature-body { display: block; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; margin-top: 2px; }
.talent-lock__tick {
  flex: none; width: 26px; height: 26px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--apply-050); color: var(--apply-text);
}

.talent-lock__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; }

/* Blurred teaser column */
.talent-lock__teaser { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 260px; }
.talent-lock__teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-2); filter: blur(3px); }
.talent-lock__ghost {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--page); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-4);
}
.talent-lock__ghost-top { display: flex; align-items: center; gap: var(--space-3); }
.talent-lock__ghost-avatar { flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--line-2); }
.talent-lock__ghost-lines { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.talent-lock__ghost-bar { height: 9px; border-radius: var(--radius-pill); background: var(--line-2); }
.talent-lock__ghost-bar--wide { width: 80%; }
.talent-lock__ghost-bar--mid { width: 65%; }
.talent-lock__ghost-bar--narrow { width: 45%; }
.talent-lock__ghost-chips { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.talent-lock__ghost-chip { width: 46px; height: 18px; border-radius: var(--radius-pill); background: var(--line); }

.talent-lock__veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); text-align: center;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--card) 45%, transparent),
    color-mix(in srgb, var(--card) 88%, transparent));
}
.talent-lock__veil-lock {
  width: 54px; height: 54px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  box-shadow: var(--shadow-md);
}
.talent-lock__veil-text { margin: 0; color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; }

@media (max-width: 720px) {
  .talent-lock__panel { grid-template-columns: 1fr; padding: var(--space-6); }
  .talent-lock__teaser { order: -1; min-height: 200px; }
}
/* yournextjob — free tools hub + tool pages. Namespaced: tools-, tool-,
   thp-/thp__, cl-/cl__, iq-, cv-/cv__, salary-. Tokens only, mobile-first. */

/* ---------- Shared shells ---------- */
.tools-hero{ padding:var(--space-12) 0 var(--space-8); }
.tools-hero .breadcrumb{ margin-bottom:var(--space-5); }
.tools-hero h1{ font-size:clamp(2.1rem,5.5vw,var(--text-4xl)); }
.tools-hero .lead{ max-width:60ch; }
.tools-hero--tool{ border-bottom:1px solid var(--line); }

.tools-body{ padding-bottom:var(--space-16); }

/* Full width + left-aligned, consistent with the hero (was capped at
   container-narrow + centred, which left the content floating in the middle
   with big side margins). */
.tools-prose{ margin:var(--space-12) 0 0; }
.tools-prose h2{ margin-top:var(--space-10); }
.tools-prose h3{ margin-top:var(--space-8); font-size:var(--text-lg); }
.tools-prose p, .tools-prose li{ color:var(--ink-2); }
.tools-prose a{ color:var(--link); font-weight:600; }

.tools-note{ background:var(--amber-050); border:1px solid var(--line-2); border-left:3px solid var(--amber);
  border-radius:var(--radius); padding:var(--space-4) var(--space-5); margin:var(--space-6) 0;
  font-size:var(--text-sm); color:var(--ink-2); }
.tools-note strong{ color:var(--ink); }

.tools-tips{ list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; gap:var(--space-3); }
.tools-tips li{ position:relative; padding-left:var(--space-6); color:var(--ink-2); }
.tools-tips li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-radius:var(--radius-pill); background:var(--accent); }

.tools-cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-5);
  margin-top:var(--space-12); padding:var(--space-8); background:var(--accent-050);
  border:1px solid var(--line-2); border-radius:var(--radius-lg); }
.tools-cta h2{ margin:0 0 var(--space-1); font-size:var(--text-xl); }
.tools-cta p{ margin:0; color:var(--ink-2); }
.tools-cta .btn{ flex-shrink:0; }

/* ---------- Shared tables ---------- */
.tools-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line);
  border-radius:var(--radius); margin:var(--space-4) 0; }
.tools-table{ width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.tools-table th, .tools-table td{ text-align:left; padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--line); white-space:nowrap; }
.tools-table thead th{ background:var(--page); color:var(--ink-2); font-weight:600; font-size:var(--text-xs);
  text-transform:uppercase; letter-spacing:.03em; }
.tools-table tbody tr:last-child th, .tools-table tbody tr:last-child td{ border-bottom:0; }

/* ---------- Hub grid ---------- */
.tools-grid{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4);
  grid-template-columns:1fr; }
.tool-card{ display:flex; }
.tool-card__link{ display:flex; align-items:flex-start; gap:var(--space-4); width:100%;
  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; }
.tool-card__link:hover{ text-decoration:none; box-shadow:var(--shadow-md); transform:translateY(-1px);
  border-color:var(--line-2); }
.tool-card__icon{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:var(--radius); background:var(--accent-050); color:var(--accent); }
.tool-card__body{ display:flex; flex-direction:column; gap:var(--space-1); flex:1; }
.tool-card__title{ font-weight:600; color:var(--ink); font-size:var(--text-lg); }
.tool-card__desc{ color:var(--ink-2); font-size:var(--text-sm); line-height:1.5; }
.tool-card__go{ flex-shrink:0; align-self:center; color:var(--ink-faint); transition:color .14s ease, transform .14s ease; }
.tool-card__link:hover .tool-card__go{ color:var(--accent); transform:translateX(2px); }

@media (min-width:640px){
  .tools-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Take-home pay ---------- */
.thp{ display:grid; gap:var(--space-6); grid-template-columns:1fr; align-items:start; }
.thp__form{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); }
.thp__modes{ display:flex; gap:var(--space-2); background:var(--page); border:1px solid var(--line-2);
  border-radius:var(--radius-pill); padding:var(--space-1); margin-bottom:var(--space-5); }
.thp__mode{ flex:1; }
.thp__mode input{ position:absolute; opacity:0; width:1px; height:1px; }
.thp__mode span{ display:block; text-align:center; padding:.55rem .75rem; border-radius:var(--radius-pill);
  font-size:var(--text-sm); font-weight:600; color:var(--ink-2); cursor:pointer; transition:background .14s ease, color .14s ease; }
.thp__mode input:checked + span{ background:var(--card); color:var(--accent); box-shadow:var(--shadow-sm); }
.thp__mode input:focus-visible + span{ box-shadow:var(--focus-ring); }

.thp__fields{ display:grid; gap:var(--space-4); }
.thp__field{ display:flex; flex-direction:column; gap:var(--space-2); }
.thp__label{ font-weight:600; font-size:var(--text-sm); color:var(--ink); }
.thp__input{ display:flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--card); overflow:hidden; transition:border-color .14s ease, box-shadow .14s ease; }
.thp__input:focus-within{ border-color:var(--accent); box-shadow:var(--focus-ring); }
.thp__prefix{ padding:0 var(--space-3); color:var(--ink-3); font-weight:600; border-right:1px solid var(--line); align-self:stretch;
  display:flex; align-items:center; background:var(--page); }
.thp__input input{ flex:1; width:100%; border:0; background:transparent; padding:.7rem .85rem;
  font-size:var(--text-lg); font-weight:600; color:var(--ink); min-width:0; }
.thp__input input:focus{ outline:none; }
.thp__hint{ margin:var(--space-5) 0 0; font-size:var(--text-xs); }

.thp__results{ background:var(--ink); color:var(--card); border-radius:var(--radius-lg); padding:var(--space-6);
  background:linear-gradient(160deg, var(--accent-strong), var(--accent)); }
.thp__headline-label{ margin:0 0 var(--space-1); font-size:var(--text-sm); opacity:.85; color:#fff; }
.thp__net{ margin:0; font-size:clamp(2.4rem,8vw,var(--text-4xl)); font-weight:700; letter-spacing:-.02em; color:#fff; line-height:1; }
.thp__net-sub{ margin:var(--space-1) 0 0; opacity:.85; color:#fff; font-size:var(--text-sm); }
.thp__cadence{ display:flex; gap:var(--space-3); margin:var(--space-5) 0; }
.thp__cad{ flex:1; background:rgba(255,255,255,.14); border-radius:var(--radius); padding:var(--space-3) var(--space-4); }
.thp__cad-val{ display:block; font-size:var(--text-lg); font-weight:700; color:#fff; }
.thp__cad-lab{ display:block; font-size:var(--text-xs); opacity:.85; color:#fff; }

.thp__breakdown{ width:100%; border-collapse:collapse; margin-top:var(--space-2); }
.thp__breakdown th, .thp__breakdown td{ padding:var(--space-3) 0; text-align:left; font-size:var(--text-sm);
  border-bottom:1px solid rgba(255,255,255,.18); color:#fff; }
.thp__breakdown td{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.thp__breakdown th{ font-weight:500; opacity:.9; }
.thp__row--minus td{ opacity:.9; }
.thp__row--total th, .thp__row--total td{ border-bottom:0; font-size:var(--text-base); font-weight:700; opacity:1; padding-top:var(--space-4); }

@media (min-width:820px){
  .thp{ grid-template-columns:1fr 1fr; }
}

/* ---------- Cover letter ---------- */
.cl{ display:grid; gap:var(--space-6); grid-template-columns:1fr; align-items:start; }
.cl__form{ display:grid; gap:var(--space-4); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-6); }
.cl__field{ display:flex; flex-direction:column; gap:var(--space-2); border:0; padding:0; margin:0; min-width:0; }
.cl__label{ font-weight:600; font-size:var(--text-sm); color:var(--ink); padding:0; }
.cl__strengths{ gap:var(--space-2); }
.cl__tones{ display:flex; gap:var(--space-2); }
.cl__tone{ flex:1; }
.cl__tone input{ position:absolute; opacity:0; width:1px; height:1px; }
.cl__tone span{ display:block; text-align:center; padding:.6rem .75rem; border:1px solid var(--line-2);
  border-radius:var(--radius); font-size:var(--text-sm); font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:all .14s ease; }
.cl__tone input:checked + span{ border-color:var(--accent); color:var(--accent); background:var(--accent-050); }
.cl__tone input:focus-visible + span{ box-shadow:var(--focus-ring); }

.cl__preview{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-6); position:sticky; top:calc(66px + var(--space-4)); }
.cl__preview-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  margin-bottom:var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--line); }
.cl__preview-title{ margin:0; font-size:var(--text-lg); }
.cl__copy{ flex-shrink:0; }
.cl__letter{ font-size:var(--text-sm); line-height:1.7; color:var(--ink); }
.cl__letter p{ margin:0 0 var(--space-4); }
.cl__letter p:last-child{ margin-bottom:0; }
.cl__letter b{ font-weight:600; }

@media (min-width:820px){
  .cl{ grid-template-columns:1fr 1fr; }
}

/* ---------- Salary guide ---------- */
.salary-sector{ margin-top:var(--space-8); }
.salary-sector:first-of-type{ margin-top:var(--space-6); }
.salary-sector__head{ font-size:var(--text-xl); margin-bottom:var(--space-3); }
.salary-table__role{ font-weight:600; color:var(--ink); white-space:normal; }
.salary-table td{ font-variant-numeric:tabular-nums; }
.salary-table__dash{ color:var(--ink-faint); margin:0 .15em; }
.salary-table__cta{ text-align:right; }
.salary-table__link{ display:inline-flex; align-items:center; gap:var(--space-1); font-weight:600;
  color:var(--accent); font-size:var(--text-sm); }
.salary-table__link:hover{ text-decoration:none; color:var(--accent-strong); }

/* ---------- Interview questions ---------- */
.iq-jump{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-8); }
.iq-group{ margin-top:var(--space-10); scroll-margin-top:calc(66px + var(--space-4)); }
.iq-group:first-of-type{ margin-top:var(--space-4); }
.iq-group__head{ margin-bottom:var(--space-5); }
.iq-group__head h2{ margin:0 0 var(--space-2); }
.iq-group__head p{ margin:0; max-width:64ch; }
.iq-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4); }
.iq-item{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-5); }
.iq-item__q{ margin:0 0 var(--space-2); font-size:var(--text-base); font-weight:600; color:var(--ink); }
.iq-item__tip{ margin:0; color:var(--ink-2); font-size:var(--text-sm); line-height:1.6; }
.iq-item__tag{ display:inline-block; margin-right:var(--space-2); padding:.12rem .5rem; border-radius:var(--radius-pill);
  background:var(--apply-050); color:var(--apply-text); font-size:var(--text-xs); font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; vertical-align:middle; }

@media (min-width:720px){
  .iq-list{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- FAQ ---------- */
.tools-faq{ display:grid; gap:var(--space-3); margin-top:var(--space-4); }
.tools-faq__item{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  overflow:hidden; }
.tools-faq__q{ list-style:none; cursor:pointer; padding:var(--space-4) var(--space-5); font-weight:600;
  color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.tools-faq__q::-webkit-details-marker{ display:none; }
.tools-faq__q::after{ content:"+"; font-size:var(--text-xl); color:var(--accent); line-height:1; flex-shrink:0; }
.tools-faq__item[open] .tools-faq__q::after{ content:"\2212"; }
.tools-faq__a{ padding:0 var(--space-5) var(--space-5); }
.tools-faq__a p{ margin:0; color:var(--ink-2); font-size:var(--text-sm); line-height:1.7; }

/* ---------- CV checklist ---------- */
.cv{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); }
.cv__progress{ position:sticky; top:calc(66px + var(--space-2)); z-index:var(--z-sticky); background:var(--card);
  padding:var(--space-2) 0 var(--space-3); }
.cv__progress-bar{ height:10px; background:var(--page); border:1px solid var(--line-2); border-radius:var(--radius-pill); overflow:hidden; }
.cv__progress-fill{ display:block; height:100%; width:0; background:var(--apply); border-radius:var(--radius-pill);
  transition:width .25s ease; }
.cv__progress-text{ margin:var(--space-2) 0 0; font-size:var(--text-sm); font-weight:600; color:var(--ink-2); }
.cv__actions{ margin:var(--space-2) 0 var(--space-6); }
.cv__reset{ font-size:var(--text-sm); }

.cv__section{ margin-top:var(--space-6); }
.cv__section-head{ font-size:var(--text-lg); margin-bottom:var(--space-3); padding-bottom:var(--space-2);
  border-bottom:1px solid var(--line); }
.cv__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-1); }
.cv__check{ display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3);
  border-radius:var(--radius); cursor:pointer; transition:background .12s ease; }
.cv__check:hover{ background:var(--page); }
.cv__box{ position:absolute; opacity:0; width:1px; height:1px; }
.cv__box-face{ flex-shrink:0; width:24px; height:24px; border:2px solid var(--line-2); border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; background:var(--card);
  transition:background .14s ease, border-color .14s ease; margin-top:1px; }
.cv__box-face svg{ opacity:0; transition:opacity .1s ease; }
.cv__box:checked + .cv__box-face{ background:var(--apply); border-color:var(--apply); }
.cv__box:checked + .cv__box-face svg{ opacity:1; }
.cv__box:focus-visible + .cv__box-face{ box-shadow:var(--focus-ring); }
.cv__label{ color:var(--ink); font-size:var(--text-sm); line-height:1.5; padding-top:2px; }
.cv__box:checked ~ .cv__label{ color:var(--ink-3); text-decoration:line-through; }

.cv__tips{ display:grid; gap:var(--space-4); grid-template-columns:1fr; margin-top:var(--space-8); }
.cv__tip{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); background:var(--card); }
.cv__tip-head{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-lg); margin-bottom:var(--space-2); }
.cv__tip--do .cv__tip-head{ color:var(--apply-text); }
.cv__tip--dont .cv__tip-head{ color:var(--red-strong); }

@media (min-width:720px){
  .cv__tips{ grid-template-columns:1fr 1fr; }
}

/* ---------- Shared tool extras (pay rise, holiday, redundancy) ---------- */
/* Suffix unit (e.g. %) sits on the right of the input instead of a £ prefix. */
.thp__prefix--suffix{ border-right:0; border-left:1px solid var(--line); }
/* A small footnote inside the accent results panel. */
.thp__foot{ margin:var(--space-4) 0 0; font-size:var(--text-xs); color:#fff; opacity:.85; line-height:1.5; }

/* ---------- Umbrella vs PAYE ---------- */
.uvp{ display:grid; gap:var(--space-6); }
.uvp__form{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); }
.uvp__inputs{ display:grid; gap:var(--space-4); margin-top:var(--space-5); }

.uvp__compare{ display:grid; gap:var(--space-4); grid-template-columns:1fr; align-items:start; }
.uvp__card{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6); background:var(--card); }
.uvp__card--umb{ border-color:transparent; color:#fff;
  background:linear-gradient(160deg, var(--accent-strong), var(--accent)); }
.uvp__card-tag{ margin:0 0 var(--space-2); font-size:var(--text-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-3); }
.uvp__card--umb .uvp__card-tag{ color:#fff; opacity:.85; }
.uvp__card-net{ margin:0; font-size:clamp(1.9rem,6vw,var(--text-3xl)); font-weight:700; letter-spacing:-.02em;
  line-height:1; color:var(--ink); }
.uvp__card--umb .uvp__card-net{ color:#fff; }
.uvp__card-sub{ margin:var(--space-1) 0 var(--space-4); font-size:var(--text-sm); color:var(--ink-2); }
.uvp__card--umb .uvp__card-sub{ color:#fff; opacity:.85; }

.uvp__lines{ width:100%; border-collapse:collapse; }
.uvp__lines th, .uvp__lines td{ padding:var(--space-2) 0; text-align:left; font-size:var(--text-sm);
  border-bottom:1px solid var(--line); color:var(--ink); }
.uvp__lines td{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.uvp__lines th{ font-weight:500; color:var(--ink-2); }
.uvp__line--minus td{ color:var(--ink-3); }
.uvp__line--total th, .uvp__line--total td{ border-bottom:0; font-weight:700; font-size:var(--text-base); padding-top:var(--space-3); }
.uvp__card--umb .uvp__lines th, .uvp__card--umb .uvp__lines td{ border-bottom-color:rgba(255,255,255,.18); color:#fff; }
.uvp__card--umb .uvp__lines th{ opacity:.9; }
.uvp__card--umb .uvp__line--minus td{ opacity:.9; }

.uvp__diff{ margin:0; padding:var(--space-4) var(--space-5); background:var(--accent-050); border:1px solid var(--line-2);
  border-radius:var(--radius); font-size:var(--text-sm); font-weight:600; color:var(--ink); text-align:center; }

@media (min-width:560px){
  .uvp__inputs [data-uvp-day], .uvp__inputs [data-uvp-hour]{ grid-template-columns:1fr 1fr; }
}
@media (min-width:720px){
  .uvp__compare{ grid-template-columns:1fr 1fr; }
}

/* =====================================================================
   Mobile tap-comfort + overflow safety (<=820px, touch widths only).
   Desktop layout is untouched. Tokens only; px used only for the 44px
   minimum touch target, matching the sitewide tap-comfort layer.
   ===================================================================== */
@media (max-width:820px){
  /* Segmented radio toggles (Annual/Hourly, Day/Hourly, %/amount, Days/Hours):
     the coloured <span> is the tap target, so give it a full 44px height and
     centre its label vertically. */
  .thp__mode span, .cl__tone span{ min-height:44px; display:flex;
    align-items:center; justify-content:center; }

  /* Number inputs comfortably clear 44px on touch. */
  .thp__input input{ min-height:44px; }

  /* Result-panel breakdown tables must wrap their own labels, never push the
     dark panel (and the page) sideways. */
  .thp__breakdown th, .thp__breakdown td,
  .uvp__lines th, .uvp__lines td{ overflow-wrap:break-word; }

  /* Hub cards: let the "go" chevron hold its column so a long title wraps
     instead of shoving the row wider than the screen. */
  .tool-card__body{ min-width:0; }
  .tool-card__title, .tool-card__desc{ overflow-wrap:break-word; }
}
/* Typing speed test tool. Uses app.css design tokens only. Scoped to .tt so it
   never leaks into the shared tools styles (tools.css owns the hero/prose). */

.tt {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-8);
}

@media (min-width: 620px) {
  .tt { padding: var(--space-6); }
}

/* --- Mode toggle (segmented control) ------------------------------------- */
.tt-modes {
  display: flex;
  gap: var(--space-1);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  margin-bottom: var(--space-5);
}

.tt-mode {
  flex: 1 1 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.tt-mode input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.tt-mode:hover { color: var(--ink); }

.tt-mode:has(input:checked) {
  background: var(--card);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
}

.tt-mode:has(input:focus-visible) {
  box-shadow: var(--focus-ring);
}

/* --- Live stats ---------------------------------------------------------- */
.tt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.tt-stat {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-2);
  text-align: center;
}

.tt-stat__val {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tt-stat--wpm .tt-stat__val { color: var(--accent-strong); }

.tt-stat__lab {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tt-stat__sub { color: var(--ink-faint); text-transform: none; letter-spacing: 0; }

/* --- Typing area --------------------------------------------------------- */
.tt-typing {
  position: relative;
  border: 2px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--page);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.tt-typing:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.tt-display {
  position: relative;
  height: 8.1rem;
  overflow: hidden;
  padding: var(--space-4);
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
  font-size: 1.3rem;
  line-height: 2;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--ink-faint);
  cursor: text;
  user-select: none;
}

@media (max-width: 480px) {
  .tt-display { font-size: 1.1rem; height: 8.4rem; padding: var(--space-3); }
}

/* The real textarea sits on top, invisible, and captures typing + focus. */
.tt-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--space-4);
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  resize: none;
  outline: none;
  overflow: hidden;
}

.tt-char { position: relative; }

.tt-char--correct { color: var(--ink); }

.tt-char--wrong {
  color: var(--red-strong);
  background: var(--red-050);
  border-radius: 3px;
}

.tt-char--wrong.tt-char--space { color: transparent; }

.tt-char--caret::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.15em;
  bottom: 0.15em;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  animation: tt-blink 1s steps(2, start) infinite;
}

@keyframes tt-blink { 50% { opacity: 0; } }

.tt-word--active {
  box-shadow: inset 0 -2px 0 var(--line-2);
}

@media (prefers-reduced-motion: reduce) {
  .tt-char--caret::before { animation: none; }
}

/* --- Controls ------------------------------------------------------------ */
.tt-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.tt-hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.tt-restart {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}

.tt-restart:hover { color: var(--ink); border-color: var(--ink-faint); }
.tt-restart:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* --- Results ------------------------------------------------------------- */
.tt-results {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  text-align: center;
}

.tt-results__wpm {
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

.tt-results__unit {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink-3);
  margin-left: var(--space-1);
}

.tt-results__label {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

.tt-band {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--text-sm);
  background: var(--accent-050);
  color: var(--accent-strong);
}

.tt-band--beginner { background: var(--amber-050); color: var(--amber); }
.tt-band--average  { background: var(--accent-050); color: var(--accent-strong); }
.tt-band--fast     { background: var(--apply-050); color: var(--apply-text); }
.tt-band--pro      { background: var(--apply-050); color: var(--apply-text); }

.tt-results__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin: var(--space-4) 0;
}

.tt-results__meta div { text-align: center; }

.tt-results__meta strong {
  display: block;
  font-size: var(--text-xl);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tt-results__meta span {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
}

.tt-band-desc {
  max-width: 34rem;
  margin: 0 auto var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.tt-results__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 26rem;
  margin: 0 auto;
}

@media (min-width: 520px) {
  .tt-results__actions { flex-direction: row; }
  .tt-results__actions .btn { flex: 1 1 0; }
}

/* --- Inline tips --------------------------------------------------------- */
.tt-tips {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.tt-tips li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.tt-tips li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}