/*
Theme Name: TheJobsMarket
Theme URI: https://thejobsmarket.net/
Author: SitePlot Media
Description: Pay and the labor market. Ready-made authority theme — content, imagery, schema and tools all ship inside the theme. No companion plugin.
Version: 0.1.0
License: Proprietary
Text Domain: tjm
*/

/* ===========================================================================
   DESIGN SYSTEM

   The signature device is THE SPREAD. Every competitor answers "what does this
   job pay" with one median. This site answers it with a distribution, so the
   percentile bar is the brand mark, the chart, the table cell and the favicon —
   one shape at four scales.

   Structure is a DARK FRAME around WHITE WELLS: masthead, section heads and
   footer are the navy field, content sits on white. Deliberately not the
   single-ground banded document used on the previous builds.

   Chroma rule: the indigo ramp carries MAGNITUDE ONLY (low pay to high pay).
   It never carries good/bad — a 10th-percentile earner is not a failure state.
   =========================================================================== */

:root{
  --ink:#0E1B2A;          /* frame: masthead, section heads, footer */
  --ink-2:#17283C;        /* raised surface on the frame */
  --ink-3:#24384F;
  --paper:#FFFFFF;
  --sunk:#F1F4F8;         /* panels on white */
  --rule:#DCE3EC;
  --rule-dark:#2C4056;
  --body:#2B3A4D;
  --muted:#5C6C82;
  --muted-dark:#94A7BE;

  --accent:#4C3FD9;
  --accent-deep:#362BA8;
  --accent-tint:#EDEBFB;
  --accent-lift:#8E83EE;  /* accent legible on the navy field */

  /* the spread ramp — magnitude, never valence */
  --s1:#D3CFF4; --s2:#A79DEC; --s3:#7A6DE3; --s4:#5244DC; --s5:#2E2496;
  --s1-d:#4A4290; --s2-d:#6055C4; --s3-d:#8478E8; --s4-d:#A79DEC; --s5-d:#D3CFF4;

  --display:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --figure:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --shell:1200px;
  --measure:66ch;
  --gutter:20px;
  --r:10px;               /* corner radius, one value */
  --shadow:0 1px 2px rgba(14,27,42,.06),0 8px 24px -12px rgba(14,27,42,.18);
}
@media(min-width:760px){ :root{ --gutter:32px } }
@media(min-width:1100px){ :root{ --gutter:40px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--display); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block }
a{ color:var(--accent-deep); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ color:var(--accent) }

/* One shell rule. Every full-width band puts its inner content on THIS grid, so
   the wordmark, the H1 and every card share one left edge. Two grids maintained
   separately is what misaligned the last theme's masthead. */
.wrap{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter) }

h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); line-height:1.15;
  letter-spacing:-.021em; font-weight:700; margin:0 0 .5em }
h1{ font-size:clamp(2.1rem,1.35rem + 2.6vw,3.4rem); letter-spacing:-.03em }
h2{ font-size:clamp(1.5rem,1.2rem + 1.1vw,2.05rem) }
h3{ font-size:clamp(1.16rem,1.06rem + .42vw,1.36rem) }
h4{ font-size:1.02rem; font-weight:600 }
p{ margin:0 0 1.15em }
.lede{ font-size:clamp(1.08rem,1rem + .42vw,1.26rem); line-height:1.55; color:var(--body) }
.kicker{ font-family:var(--figure); font-size:.72rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted) }
.num{ font-family:var(--figure); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }

.btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600;
  font-size:.97rem; padding:.78rem 1.3rem; border-radius:var(--r);
  background:var(--accent); color:#fff; text-decoration:none; border:1px solid var(--accent);
  transition:background .14s ease }
.btn:hover{ background:var(--accent-deep); color:#fff }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--rule) }
.btn--ghost:hover{ background:var(--sunk); color:var(--ink) }
.btn--on-dark{ background:#fff; color:var(--ink); border-color:#fff }
.btn--on-dark:hover{ background:var(--s1); color:var(--ink) }

/* ---- THE SPREAD BAR — the signature device -------------------------------
   Five stops, low to high, with a median marker. Used inline in prose (sm),
   in tables (sm), on cards (md), and at hero scale (lg). The brand mark is
   this same shape compressed to five bars. */
.spread{ display:block; width:100%; }
.spread__track{ display:flex; height:12px; border-radius:99px; overflow:hidden; background:var(--sunk) }
.spread--md .spread__track{ height:18px }
.spread--lg .spread__track{ height:30px; border-radius:8px }
.spread__seg{ flex:1 }
.spread__seg--1{ background:var(--s1) } .spread__seg--2{ background:var(--s2) }
.spread__seg--3{ background:var(--s3) } .spread__seg--4{ background:var(--s4) }
.spread__seg--5{ background:var(--s5) }
.spread__scale{ display:flex; justify-content:space-between; margin-top:.5rem;
  font-family:var(--figure); font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums }
.spread--lg .spread__scale{ font-size:.95rem }
/* THE MEDIAN MARKER WAS DRAWN THROUGH ITS OWN LABEL — a 2px rule running from
   -6px to +6px of the span put a line straight through "$97,550", which read as
   "$97|550". The tick belongs BETWEEN the bar and the label, not across it. */
.spread__med{ position:relative; font-weight:600; color:var(--ink) }
.spread__med::after{ content:""; position:absolute; left:50%; bottom:100%;
  height:9px; margin-bottom:2px; width:2px; background:var(--ink); transform:translateX(-50%) }
.on-dark .spread__med{ color:var(--ink) }
/* ON A DARK GROUND THE SPREAD SITS ON A WHITE PLATE.
   The first version re-mapped the ramp for contrast, which inverted it: pale
   meant HIGH on navy and LOW on white, so the same device carried opposite
   meanings on the two grounds. Re-tinting was the wrong fix — one ramp, one
   direction, everywhere, and the ground changes underneath it instead. */
.on-dark .spread{ background:#fff; padding:.85rem .9rem .7rem; border-radius:10px }
.on-dark .spread__track{ background:var(--sunk) }
.on-dark .spread__scale{ color:var(--muted) }
.on-dark .spread + .src{ margin-top:.7rem }

/* ---- source tag: every figure says where it came from and when ----------- */
.src{ display:inline-flex; align-items:center; gap:.36rem; font-family:var(--figure);
  font-size:.72rem; color:var(--muted); text-decoration:none; border-bottom:1px dotted var(--rule) }
.src:hover{ color:var(--accent-deep); border-bottom-color:var(--accent) }
.src__dot{ width:6px; height:6px; border-radius:99px; background:var(--s4); flex:none }
.on-dark .src{ color:var(--muted-dark); border-bottom-color:var(--rule-dark) }

/* ---- MASTHEAD ----------------------------------------------------------- */
.masthead{ background:var(--ink); color:#fff; position:sticky; top:0; z-index:60 }
.masthead__bar{ max-width:var(--shell); margin-inline:auto; padding:0 var(--gutter);
  display:flex; align-items:center; gap:1.5rem; height:74px }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; flex:none }
.brand__mark{ flex:none }
.brand__name{ font-weight:700; font-size:1.22rem; letter-spacing:-.028em; line-height:1 }
.brand__name b{ font-weight:700 } .brand__name span{ font-weight:400; color:var(--muted-dark) }
.nav{ margin-left:auto; display:none; align-items:center; gap:.3rem }
@media(min-width:1000px){ .nav{ display:flex } }
.nav__item{ position:relative }
.nav__link{ display:block; padding:.6rem .8rem; color:#E7EDF5; text-decoration:none;
  font-weight:500; font-size:.97rem; border-radius:8px }
.nav__link:hover,.nav__item:hover .nav__link{ background:var(--ink-2); color:#fff }
.nav__panel{ position:absolute; top:100%; left:0; min-width:660px; background:var(--ink-2);
  border:1px solid var(--rule-dark); border-radius:12px; padding:1.4rem; display:none;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6) }
.nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{ display:grid;
  grid-template-columns:1fr 1fr; gap:1.4rem 2rem }
.nav__panel--right{ left:auto; right:0 }
.nav__group h4{ color:#fff; font-size:.83rem; margin:0 0 .55rem; letter-spacing:.04em;
  text-transform:uppercase; font-family:var(--figure); font-weight:500; color:var(--muted-dark) }
.nav__panel a{ display:block; color:#DDE6F0; text-decoration:none; font-size:.94rem;
  padding:.26rem 0; border-radius:6px }
.nav__panel a:hover{ color:#fff; text-decoration:underline }
.nav__cta{ margin-left:.5rem }
.burger{ margin-left:auto; display:inline-flex; background:var(--ink-2); border:1px solid var(--rule-dark);
  color:#fff; border-radius:9px; padding:.55rem .8rem; font:inherit; font-size:.92rem;
  font-weight:600; gap:.5rem; align-items:center; cursor:pointer }
@media(min-width:1000px){ .burger{ display:none } }

/* ---- HERO --------------------------------------------------------------- */
.hero{ background:var(--ink); color:#fff; padding:clamp(2.4rem,1.4rem + 3.4vw,4.2rem) 0
  clamp(3rem,2rem + 4vw,5rem) }
.hero h1{ color:#fff; max-width:15ch }
.hero .lede{ color:#C6D3E2; max-width:52ch }
.hero__grid{ display:grid; gap:2.4rem }
@media(min-width:960px){ .hero__grid{ grid-template-columns:1.05fr .95fr; gap:3.4rem; align-items:center } }
.hero__panel{ background:var(--ink-2); border:1px solid var(--rule-dark); border-radius:14px;
  padding:1.5rem 1.5rem 1.3rem }
.hero__panel h3{ color:#fff; font-size:1.02rem; margin-bottom:.2rem }
.hero__panel .kicker{ color:var(--muted-dark) }
.hero__figs{ display:flex; gap:1.5rem; margin:1.1rem 0 .3rem; flex-wrap:wrap }
.hero__fig .num{ display:block; font-size:1.6rem; font-weight:600; color:#fff; line-height:1.1 }
.hero__fig small{ display:block; font-size:.78rem; color:var(--muted-dark); margin-top:.15rem }
.hero__actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem }

/* ---- LOOKUP STRIP ------------------------------------------------------- */
.lookup{ background:var(--paper); margin-top:-2.2rem; position:relative; z-index:2 }
.lookup__inner{ background:#fff; border:1px solid var(--rule); border-radius:14px;
  box-shadow:var(--shadow); padding:1.15rem }
.lookup__row{ display:grid; gap:.7rem }
@media(min-width:820px){ .lookup__row{ grid-template-columns:1fr 1fr auto; align-items:end } }
.field label{ display:block; font-size:.78rem; font-weight:600; color:var(--ink); margin-bottom:.3rem }
.field input,.field select{ width:100%; font:inherit; font-size:.98rem; padding:.72rem .85rem;
  border:1px solid var(--rule); border-radius:9px; background:#fff; color:var(--ink) }
.field input:focus,.field select:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent) }

/* ---- SECTIONS ----------------------------------------------------------- */
.band{ padding:clamp(2.8rem,2rem + 3vw,4.4rem) 0 }
.band--sunk{ background:var(--sunk); border-block:1px solid var(--rule) }
.band--dark{ background:var(--ink); color:#DDE6F0 }
.band--dark h2,.band--dark h3{ color:#fff }
.band__head{ max-width:60ch; margin-bottom:2rem }
.band__head p{ color:var(--muted); font-size:1.04rem }
.band--dark .band__head p{ color:var(--muted-dark) }

.grid{ display:grid; gap:1.1rem }
.grid--2{ grid-template-columns:1fr }
.grid--3{ grid-template-columns:1fr }
.grid--4{ grid-template-columns:1fr }
@media(min-width:700px){ .grid--2,.grid--4{ grid-template-columns:repeat(2,1fr) } .grid--3{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){ .grid--3{ grid-template-columns:repeat(3,1fr) } .grid--4{ grid-template-columns:repeat(4,1fr) } }

.card{ background:#fff; border:1px solid var(--rule); border-radius:var(--r); padding:1.3rem;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease }
.card:hover{ border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow) }
.card__icon{ margin-bottom:.85rem; color:var(--accent) }
.card h3{ margin-bottom:.35rem }
.card p{ color:var(--muted); font-size:.95rem; margin:0 0 1rem }
.card__more{ margin-top:auto; font-weight:600; font-size:.92rem; color:var(--accent-deep) }
.card--dark{ background:var(--ink-2); border-color:var(--rule-dark) }
.card--dark p{ color:var(--muted-dark) }

/* ---- ARTICLE LAYOUT ----------------------------------------------------- */
.crumbs{ background:var(--sunk); border-bottom:1px solid var(--rule); font-size:.86rem }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; margin:0; padding:.7rem 0 }
.crumbs li::after{ content:"/"; margin-left:.45rem; color:var(--rule) }
.crumbs li:last-child::after{ content:"" }
.crumbs a{ color:var(--muted); text-decoration:none } .crumbs a:hover{ color:var(--accent-deep) }

.arthead{ background:var(--ink); color:#fff; padding:clamp(2rem,1.4rem + 2.4vw,3.2rem) 0 }
.arthead h1{ color:#fff; max-width:20ch }
.arthead .kicker{ color:var(--accent-lift); margin-bottom:.7rem; display:block }
.arthead .lede{ color:#C6D3E2; max-width:58ch; margin-bottom:0 }
.byline{ display:flex; align-items:center; gap:.8rem; margin-top:1.6rem;
  padding-top:1.3rem; border-top:1px solid var(--rule-dark) }
.byline__av{ width:44px; height:44px; border-radius:99px; flex:none; background:var(--ink-3) }
.byline__who{ font-size:.92rem; line-height:1.4 }
.byline__who b{ color:#fff; font-weight:600 }
/* The role line is a BLOCK and the credential chip is INLINE, and they are both
   spans inside .byline__who — so a blanket `span{display:block}` turned the EA
   chip into a full-width bar. Scope the base rule so the modifier is not fighting
   it: a modifier must not have to out-specify its own container. */
.byline__who > span{ display:block; color:var(--muted-dark); font-size:.85rem }
.byline__who > span.byline__cred{ display:inline-block }
.byline__cred{ font-family:var(--figure); font-size:.66rem; letter-spacing:.09em;
  text-transform:uppercase; background:var(--accent); color:#fff; padding:.14rem .44rem;
  border-radius:4px; margin-left:.45rem; vertical-align:.12em; width:auto }

.layout{ display:block; padding:2.4rem 0 3.4rem }
/* THE GRID ONLY APPLIES WHEN THERE IS A TOC TO PUT IN THE FIRST COLUMN.
   Without this the .prose element becomes the first grid child and renders in
   the 250px rail — which is what every tool page and every short policy page
   was doing: a full article squeezed into a sidebar with the rest of the row
   empty beside it. A layout that assumes a companion element must check that
   the companion is there. */
@media(min-width:1100px){
  .layout--toc{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:3rem; align-items:start }
}
.layout:not(.layout--toc) > .prose,
.layout:not(.layout--toc) > div{ margin-inline:0 }
/* THE MEASURE BELONGS TO THE PROSE ELEMENTS, NOT THE CONTAINER.
   Capping .prose itself meant a .breakout child could never exceed it —
   max-width:none does not make a child wider than its parent — so a calculator
   or a wide table sat in a 726px column with half the page empty beside it.
   The container runs full width and only the things you READ take the measure,
   which also keeps every element on one left edge. */
.prose{ max-width:none }
.prose > p,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > .answer,
.prose > .authorbox,
.prose > .share,
.prose > .faq{ max-width:var(--measure) }
.prose h2{ margin-top:2.4rem; scroll-margin-top:96px }
.prose h3{ margin-top:1.8rem; scroll-margin-top:96px }
.prose ul,.prose ol{ margin:0 0 1.15em; padding-left:1.2rem }
.prose li{ margin-bottom:.4em }
/* figures BREAK OUT of the measure — a data site's charts should not be
   constrained to the reading column */
.breakout{ max-width:none; margin:2rem 0 }

.answer{ background:var(--accent-tint); border:1px solid #D6D1F6; border-left:4px solid var(--accent);
  border-radius:var(--r); padding:1.25rem 1.4rem; margin:0 0 2rem }
.answer .kicker{ color:var(--accent-deep); display:block; margin-bottom:.45rem }
.answer p{ margin:0; font-size:1.06rem; line-height:1.55; color:var(--ink) }

.toc{ font-size:.92rem }
@media(min-width:1100px){ .toc{ position:sticky; top:96px; max-height:calc(100vh - 120px); overflow:auto } }
.toc__label{ font-family:var(--figure); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .7rem; display:block }
.toc__list{ list-style:none; margin:0; padding:0; border-left:2px solid var(--rule) }
.toc__list li{ margin:0 }
.toc__list a{ display:block; padding:.34rem 0 .34rem .9rem; margin-left:-2px;
  border-left:2px solid transparent; color:var(--muted); text-decoration:none; line-height:1.35 }
.toc__list a:hover{ color:var(--ink); border-left-color:var(--rule) }
.toc__list a[aria-current="true"]{ color:var(--accent-deep); border-left-color:var(--accent); font-weight:600 }
@media(max-width:1099px){
  .toc{ background:var(--sunk); border:1px solid var(--rule); border-radius:var(--r);
    padding:1.1rem 1.2rem; margin:0 0 2rem }
}

/* data table */
.dtable{ width:100%; border-collapse:collapse; font-size:.94rem; margin:0 }
.dtable th,.dtable td{ text-align:left; padding:.66rem .7rem; border-bottom:1px solid var(--rule) }
.dtable thead th{ font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  font-family:var(--figure); font-weight:500; color:var(--muted); background:var(--sunk) }
.dtable td.n{ font-family:var(--figure); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap }
.dtable tbody tr:hover{ background:var(--sunk) }
.tablewrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:var(--r) }
.figcap{ font-size:.82rem; color:var(--muted); margin-top:.6rem; display:flex; gap:.8rem;
  flex-wrap:wrap; align-items:center }

/* FAQ accordion */
.faq{ margin:2.6rem 0 0 }
.faq__item{ border:1px solid var(--rule); border-radius:var(--r); margin-bottom:.6rem; background:#fff }
.faq__item[open]{ border-color:var(--accent) }
.faq__item summary{ cursor:pointer; list-style:none; padding:1rem 1.2rem; font-weight:600;
  color:var(--ink); display:flex; justify-content:space-between; gap:1rem; align-items:flex-start }
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{ content:"+"; font-family:var(--figure); color:var(--accent);
  font-size:1.15rem; line-height:1; flex:none }
.faq__item[open] summary::after{ content:"\2212" }
.faq__body{ padding:0 1.2rem 1.1rem; color:var(--body) }
.faq__body p:last-child{ margin-bottom:0 }

/* share */
.share{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:2rem 0;
  padding:1rem 0; border-block:1px solid var(--rule) }
.share__label{ font-family:var(--figure); font-size:.72rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-right:.3rem }
.share a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--rule); border-radius:9px; color:var(--ink); text-decoration:none }
.share a:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-tint) }
.share a.is-pin:hover{ border-color:#C2001D; color:#C2001D; background:#FFF1F3 }

/* author box + author archive */
.authorbox{ display:flex; gap:1.2rem; background:var(--sunk); border:1px solid var(--rule);
  border-radius:var(--r); padding:1.4rem; margin:2.4rem 0 0 }
.authorbox__av{ width:64px; height:64px; border-radius:99px; flex:none; background:var(--ink) }
.authorbox h3{ margin:0 0 .1rem; font-size:1.06rem }
.authorbox .role{ font-size:.86rem; color:var(--muted); margin:0 0 .6rem }
.authorbox p{ font-size:.94rem; margin:0 0 .5rem }
.arts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.arts li{ border-bottom:1px solid var(--rule) }
.arts a{ display:grid; gap:.15rem .9rem; padding:.95rem .2rem; text-decoration:none; color:inherit }
@media(min-width:700px){ .arts a{ grid-template-columns:1fr auto; align-items:baseline } }
.arts a:hover{ background:var(--sunk) }
.arts b{ font-weight:600; color:var(--ink); line-height:1.35 }
.arts span{ font-family:var(--figure); font-size:.76rem; color:var(--muted); white-space:nowrap }

/* footer */
.site-footer{ background:var(--ink); color:#B9C8DA; padding:3.2rem 0 2rem; margin-top:0 }
.site-footer h4{ color:#fff; font-size:.8rem; font-family:var(--figure); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 .8rem }
.site-footer a{ color:#B9C8DA; text-decoration:none; font-size:.93rem }
.site-footer a:hover{ color:#fff; text-decoration:underline }
.footcols{ display:grid; gap:2rem; margin-bottom:2.4rem }
@media(min-width:760px){ .footcols{ grid-template-columns:1.5fr 1fr 1fr 1fr } }
.footcols ul{ list-style:none; margin:0; padding:0 } .footcols li{ margin-bottom:.42rem }
.foot-legal{ border-top:1px solid var(--rule-dark); padding-top:1.4rem; text-align:center;
  font-size:.84rem; color:#8FA3BA }
.social{ display:flex; gap:.55rem; margin-top:1rem }
.social a{ width:36px; height:36px; border:1px solid var(--rule-dark); border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; color:#B9C8DA }
.social a:hover{ border-color:var(--accent-lift); color:#fff }

.skip{ position:absolute; left:-9999px }
.skip:focus{ left:1rem; top:1rem; background:#fff; padding:.6rem 1rem; z-index:100; border-radius:8px }

/* Five currency labels do not fit under a phone-width spread bar — measured at
   403px in a 390px viewport. The BAR keeps all five segments because the shape
   is the information; the p25 and p75 LABELS drop, leaving low / median / high,
   which is what a reader can act on anyway. */
@media(max-width:620px){
  .spread__scale span:nth-child(2),
  .spread__scale span:nth-child(4){ display:none }
  .spread--lg .spread__scale{ font-size:.86rem }
  .hero__panel{ padding:1.2rem }
}
.byline__who > span.byline__name{ display:block; color:#fff; font-size:.95rem }

/* ---- TOOLS --------------------------------------------------------------- */
.tool{ background:var(--sunk); border:1px solid var(--rule); border-radius:var(--r);
  padding:1.5rem; margin:2rem 0 }
.tool__grid{ display:grid; gap:1.4rem }
@media(min-width:720px){ .tool__grid{ grid-template-columns:1fr 1fr } }
.tool__col{ background:#fff; border:1px solid var(--rule); border-radius:8px; padding:1.1rem }
.tool__col h3{ margin:0 0 .8rem; font-size:1rem }
.tool label{ display:block; font-size:.86rem; font-weight:600; color:var(--ink); margin-bottom:.8rem }
.tool input[type=number],.tool input[type=text],.tool select{ display:block; width:100%;
  font:inherit; font-size:.98rem; font-weight:400; margin-top:.28rem; padding:.6rem .7rem;
  border:1px solid var(--rule); border-radius:8px; background:#fff; color:var(--ink) }
.tool input:focus,.tool select:focus{ outline:2px solid var(--accent); outline-offset:1px }
.tool fieldset{ border:1px solid var(--rule); border-radius:8px; padding:1rem; margin:0 0 1rem;
  background:#fff }
.tool legend{ font-size:.8rem; font-weight:600; color:var(--muted); padding:0 .4rem }
.tool__check{ display:flex !important; gap:.6rem; align-items:flex-start; font-weight:400;
  font-size:.94rem; line-height:1.4 }
.tool__check input{ width:auto !important; margin-top:.25rem; flex:none }
.tool__out{ margin-top:1.3rem; background:#fff; border:1px solid var(--rule);
  border-radius:8px; padding:1.2rem }
.tool__out .dtable{ margin-top:.6rem }
.tool__out h4{ margin:0 0 .4rem }
.tool__lead{ font-size:1.08rem; line-height:1.5; margin:0 0 .8rem; color:var(--ink) }
.tool__warn{ font-size:.9rem; color:var(--body); background:var(--accent-tint);
  border-left:3px solid var(--accent); padding:.7rem .9rem; border-radius:0 6px 6px 0; margin:1rem 0 0 }
.tool__note{ font-size:.87rem; color:var(--muted); margin:1rem 0 0 }
.tool__src{ font-family:var(--figure); font-size:.76rem; color:var(--muted); margin:.7rem 0 0 }
.next-step{ margin-top:2.6rem; background:var(--accent-tint); border-color:#D6D1F6 }
.next-step .kicker{ color:var(--accent-deep); margin-bottom:.4rem; display:block }
.fig{ font-family:var(--figure); font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink) }
.fig + .src{ margin-left:.4rem }

/* contact form — the honeypot must be unreachable, not merely invisible */
.contact__form{max-width:34rem}
.contact__field{display:flex;flex-direction:column;gap:.35rem;margin:0 0 1.1rem}
.contact__field label{font-weight:600;font-size:.95rem}
.contact__field input,.contact__field textarea{padding:.65rem .75rem;border:1px solid var(--rule);border-radius:.35rem;font:inherit;background:var(--paper)}
.contact__field input:focus,.contact__field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.contact__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact__ok{padding:1rem 1.15rem;border-left:3px solid var(--accent);background:var(--sunk)}
.contact__err{padding:.85rem 1.15rem;border-left:3px solid #b3261e;background:var(--sunk)}
.contact__note{font-size:.85rem;color:var(--muted);margin-top:1rem}

/* tools index — icon, title, lede, button. The page shipped with none of this */
.toolindex{display:grid;gap:1.25rem;margin:2rem 0}
.toolindex__item{display:flex;flex-direction:column;padding:1.5rem 1.6rem;background:var(--sunk);
  border:1px solid var(--rule);border-radius:var(--r)}
.toolindex__head{display:flex;gap:.95rem;align-items:flex-start;margin:0 0 .85rem}
.toolindex__icon{flex:none;width:38px;height:38px;margin-top:.15rem}
.toolindex__title{margin:0 0 .15rem;font-size:1.22rem;line-height:1.25}
.toolindex__title a{text-decoration:none;color:inherit}
.toolindex__title a:hover{color:var(--accent)}
.toolindex__q{margin:0;color:var(--muted);font-size:.95rem;line-height:1.4}
.toolindex__lede{margin:0 0 .9rem;font-size:.97rem}
.toolindex__note{margin:0 0 .9rem;font-size:.84rem;color:var(--muted)}
/* the button sits on the bottom edge so every card's CTA lines up */
.toolindex__cta{margin:auto 0 0}
/* reuses the theme's existing .btn — the header's "Look up a salary" button —
   rather than defining a second button style that would drift from it */
@media(min-width:52rem){.toolindex{grid-template-columns:1fr 1fr;gap:1.5rem}}

/* A `display` declaration outranks the UA stylesheet's [hidden]{display:none},
   so any component that sets display and is also toggled with the hidden
   attribute stays on screen. That shipped: the consent categories panel and its
   Save button were always visible. This is the standard normalization and it
   belongs once, globally, rather than being remembered per component. */
[hidden]{display:none!important}

/* ---------------------------------------------------------------- consent
   Fixed to the bottom rather than a full-screen overlay: the reader can still
   read the page while deciding, which is the honest posture for a site whose
   optional cookies genuinely do nothing until allowed. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--ink);
  color:#B9C8DA;border-top:3px solid var(--accent);box-shadow:0 -8px 30px rgba(0,0,0,.28)}
.consent[hidden]{display:none}
.consent__inner{max-width:64rem;margin:0 auto;padding:1.25rem 1.25rem 1.4rem}
.consent__h{margin:0 0 .4rem;font-size:1.1rem;line-height:1.3;color:#fff}
.consent__p{margin:0 0 .9rem;font-size:.92rem;line-height:1.55;max-width:60ch;opacity:.92}
.consent__p a{color:inherit;text-decoration:underline}
.consent__acts{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.consent__link{background:none;border:0;color:inherit;text-decoration:underline;
  cursor:pointer;font:inherit;padding:.35rem .1rem}
.consent__cats{display:grid;gap:.85rem;margin:0 0 1rem;padding:.95rem 1rem;
  background:rgba(255,255,255,.06);border-radius:.4rem}
.consent__catlab{display:flex;gap:.6rem;align-items:center;font-weight:600}
.consent__catlab em{font-weight:400;opacity:.7;font-style:normal}
.consent__catblurb{margin:.25rem 0 0 1.75rem;font-size:.85rem;opacity:.85;max-width:62ch}
.consent__prefslink{background:none;border:0;padding:0;color:inherit;font:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.consent__prefslink:hover{text-decoration-thickness:2px}
@media(max-width:36rem){.consent__acts .btn{flex:1 1 auto}}

/* embed placeholders — nothing is requested from the third party until asked */
.embedhold{display:flex;flex-direction:column;justify-content:center;gap:.5rem;
  padding:1.5rem;border:1px dashed var(--rule);border-radius:.5rem;background:var(--sunk);text-align:center}
.embedhold__t{margin:0;font-weight:600}
.embedhold__b{margin:0 auto;max-width:46ch;font-size:.88rem;color:var(--muted)}