/* =====================================================================
   salary-template.css — The Nursing Directory · state salary template
   One stylesheet for all 51 /nursing-site/nurse-salary-<state> pages.
   Every module is optional. Prefix: .sal-   Modules: .sal-mod.sal-{name}
   JS hooks: data-sal-* (salary-template.js). Markup is written by
   scripts/merge-salary-pages.py; see CLAUDE.md before editing by hand.
   Tokens are scoped to .sal, not :root, so they cannot override the
   common.css values the canonical nav, footer and ads read on the page.
   ===================================================================== */

/* ---------- 1. Tokens (mirror of site tokens; do not add colors) ---------- */
.sal {
  --bg: #f5f1ea; --bg-soft: #efe9dd; --bg-card: #fbf8f2; --bg-input: #fffdf8;
  --bg-dark: #1f2a2a; --bg-dark-soft: #283434;
  --ink: #1f2a2a; --ink-soft: #4a5454; --ink-mute: #8a9292;
  --ink-on-dark: #fbf8f2; --ink-on-dark-soft: #c5cdcc;
  --teal: #1f8a7a; --teal-deep: #0f5f53; --teal-tint: #eaf4f1; --teal-wash: #d7ece6;
  --amber: #d98a4a; --amber-deep: #8a4f23; --amber-tint: #fbf0e1;
  --terracotta: #d97757;
  --rose: #c05b5b; --rose-tint: #f3d9d4;
  --rule: #e6dfd3; --rule-dark: #2f3b3b;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(31,42,42,.04), 0 1px 2px rgba(31,42,42,.04);
  --shadow-md: 0 1px 0 rgba(31,42,42,.04), 0 6px 20px -8px rgba(31,42,42,.18);
  --shadow-card: 0 1px 0 rgba(31,42,42,.03), 0 12px 32px -16px rgba(31,42,42,.22);

  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* salary-template tokens */
  --sal-max: 1240px;          /* page width */
  --sal-gutter: 20px;         /* page side padding */
  --sal-rail: 196px;          /* desktop jump-nav width */
  --sal-gap: 56px;            /* rail ↔ main gap */
  --sal-measure: 68ch;        /* prose measure */
  --sal-nav-h: 64px;          /* canonical site nav height (fixed, 60px under 821px) */
  --sal-dur: 150ms;           /* the only motion duration */
  --sal-ease: cubic-bezier(.2,.9,.25,1);
  --sal-mod-pad: 64px;        /* vertical rhythm between modules */
}

/* ---------- 2. Base ---------- */
.sal, .sal *, .sal *::before, .sal *::after { box-sizing: border-box; }
.sal { background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.sal h1, .sal h2, .sal h3, .sal p, .sal figure, .sal ol, .sal ul, .sal dl, .sal dd { margin: 0; }
.sal ol, .sal ul { padding: 0; list-style: none; }
.sal em { font-style: italic; color: var(--teal-deep); }
.sal a { color: var(--teal-deep); text-decoration: none; border-bottom: 1px solid var(--teal-wash);
  transition: color var(--sal-dur) var(--sal-ease), border-color var(--sal-dur) var(--sal-ease), background-color var(--sal-dur) var(--sal-ease); }
.sal a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.sal :focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 4px; }
.sal ::selection { background: var(--teal); color: var(--bg-card); }
.sal-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.sal-eyebrow { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); }
.sal-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .sal *, .sal *::before, .sal *::after { transition: none !important; } }

/* Headings */
.sal-h2 { font: 400 clamp(32px, 4vw, 46px)/1.06 var(--font-serif); letter-spacing: -.02em; text-wrap: balance; max-width: 24ch; }
.sal-h3 { font: 400 26px/1.15 var(--font-serif); letter-spacing: -.01em; }
.sal-lede { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: var(--sal-measure); text-wrap: pretty; }

/* Shape glyphs (never color alone) */
.sal-glyph { width: 10px; height: 10px; flex: none; fill: currentColor; }
.sal-up { color: var(--teal-deep); }
.sal-down { color: var(--amber-deep); }
.sal-flat { color: var(--ink-soft); }

/* Circle-arrow ornament */
.sal-orb { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--teal); color: var(--bg-card); font: 500 14px/1 var(--font-sans); flex: none;
  transition: background-color var(--sal-dur) var(--sal-ease), color var(--sal-dur) var(--sal-ease); }

/* Pill CTA */
.sal .sal-cta { display: inline-flex; align-items: center; gap: 14px; padding: 8px 8px 8px 22px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--bg-card); border: 0; font: 500 15px/1.2 var(--font-sans); box-shadow: var(--shadow-md); }
.sal .sal-cta:hover { background: var(--teal-deep); color: var(--bg-card); }
.sal .sal-cta:hover .sal-orb { background: var(--bg-card); color: var(--teal-deep); }

/* ---------- 3. Page layout ---------- */
.sal-page { max-width: var(--sal-max); margin: 0 auto; padding: 0 var(--sal-gutter); }
.sal-body { display: grid; grid-template-columns: var(--sal-rail) minmax(0, 1fr); gap: var(--sal-gap); align-items: start; }
.sal-main { min-width: 0; }
.sal-mod { padding: var(--sal-mod-pad) 0; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--sal-nav-h) + 16px); }
.sal-main > .sal-mod:first-child { border-top: 0; padding-top: 8px; }
.sal-mod-head { display: grid; gap: 14px; margin-bottom: 32px; }
.sal-mod-head .sal-eyebrow { display: flex; gap: 10px; }
.sal-mod-head .sal-eyebrow b { font-weight: 500; color: var(--ink-soft); }

/* ---------- 4. Module 01 · Hero (.sal-hero) ---------- */
.sal-hero { padding: 48px 0 40px; }
.sal-hero-kicker { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.sal-hero-kicker .sal-crumbs { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.sal-hero-kicker .sal-crumbs a { color: var(--ink-soft); border: 0; }
.sal-hero h1 { font: 400 clamp(40px, 5.4vw, 68px)/1.02 var(--font-serif); letter-spacing: -.02em; margin: 18px 0 36px; max-width: 20ch; text-wrap: balance; }
.sal-answer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px 56px; align-items: end;
  border-top: 2px solid var(--ink); padding-top: 28px; }
.sal-answer-label { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; }
.sal-answer-fig { font: 400 clamp(88px, 11vw, 148px)/.86 var(--font-serif); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
.sal-answer-fig .cur { font-size: .5em; vertical-align: .62em; margin-right: .04em; color: var(--teal-deep); }
.sal-answer-sub { margin-top: 14px; font: 400 14px/1.4 var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sal-answer-say { font: 400 clamp(24px, 2.6vw, 32px)/1.28 var(--font-serif); letter-spacing: -.01em; max-width: 30ch; text-wrap: pretty; }
.sal-answer-say .sal-num { font-size: .72em; letter-spacing: 0; }
.sal-answer-meta { display: grid; gap: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--rule); }
.sal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sal .sal-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--rule); background: var(--bg-card); font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.sal .sal-chip:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
.sal-chip-date { background: var(--teal-tint) !important; border-color: var(--teal-wash) !important; color: var(--teal-deep) !important; }
.sal-byline { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.sal-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-deep); color: var(--bg-card); display: grid; place-items: center;
  font: 400 18px/1 var(--font-serif); font-style: italic; flex: none; }
.sal-byline strong { color: var(--ink); font-weight: 600; }

/* ---------- 5. Module 02 · At a glance (.sal-glance) ---------- */
.sal-glance { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 0 0 56px; }
.sal-glance[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sal-role { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; background: var(--bg-card);
  border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.sal-role.is-lead::before { content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 2px; background: var(--terracotta); border-radius: 0 0 2px 2px; }
.sal-role-name { font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sal-role-val { font: 400 34px/1 var(--font-serif); letter-spacing: -.02em; white-space: nowrap; }
.sal-role-val small { font: 400 13px/1 var(--font-mono); letter-spacing: 0; color: var(--ink-soft); margin-left: 2px; }
.sal-role-delta { display: flex; align-items: center; gap: 6px; font: 400 12px/1.35 var(--font-mono); font-variant-numeric: tabular-nums; }
.sal-role-delta span { color: var(--ink-soft); }
.sal-role-rank { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--rule); font: 400 12px/1.3 var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sal-role-rank b { color: var(--ink); font-weight: 600; }
.sal-role-src { color: var(--ink-mute); letter-spacing: .06em; }
.sal-glance-note { grid-column: 1 / -1; margin: 2px 0 0; max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---------- 6. Module 03 · Jump nav (.sal-jump) ---------- */
.sal-jump { position: sticky; top: calc(var(--sal-nav-h) + 24px); padding-top: 8px; }
.sal-jump-title { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.sal-jump ol { display: grid; gap: 2px; counter-reset: j; }
.sal .sal-jump a { display: grid; grid-template-columns: 24px 1fr; gap: 6px; padding: 7px 10px; border: 0; border-left: 2px solid var(--rule);
  font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.sal .sal-jump a::before { counter-increment: j; content: counter(j, decimal-leading-zero); font: 400 11px/1.9 var(--font-mono); color: var(--ink-soft); }
.sal .sal-jump a:hover { color: var(--ink); border-left-color: var(--ink-soft); }
.sal .sal-jump a[aria-current="true"] { color: var(--teal-deep); border-left-color: var(--teal-deep); background: var(--teal-tint); font-weight: 500; }

/* ---------- 7. Module 04 · Pay position band (.sal-band) ---------- */
.sal-band-card { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 32px; }
.sal-band-top { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 40px; }
.sal-seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--bg-soft); border: 1px solid var(--rule); margin-bottom: 14px; }
.sal-seg button { appearance: none; border: 0; background: transparent; padding: 7px 16px; border-radius: var(--radius-pill); font: 500 13px/1 var(--font-sans); color: var(--ink-soft); cursor: pointer;
  transition: background-color var(--sal-dur) var(--sal-ease), color var(--sal-dur) var(--sal-ease); }
.sal-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg-card); }
.sal-field-label { display: block; font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.sal-field { display: flex; align-items: center; gap: 6px; background: var(--bg-input); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 0 16px; height: 60px;
  transition: border-color var(--sal-dur) var(--sal-ease); }
.sal-field:focus-within { border-color: var(--teal-deep); }
.sal-field span { font: 400 20px/1 var(--font-mono); color: var(--ink-soft); }
.sal-field input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; font: 500 26px/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.sal-band-read { font: 400 clamp(24px, 2.6vw, 30px)/1.3 var(--font-serif); letter-spacing: -.01em; text-wrap: pretty; }
.sal-band-read .sal-num { font-size: .72em; letter-spacing: 0; }
.sal-band-next { margin-top: 12px; font-size: 15px; color: var(--ink-soft); }
.sal-dist { position: relative; padding: 44px 0 64px; }
.sal-dist svg { display: block; width: 100%; height: 36px; }
.sal-dist .t-tail { fill: var(--bg-soft); stroke: var(--rule); }
.sal-dist .t-mid { fill: var(--teal-wash); }
.sal-dist .t-core { fill: var(--teal); }
.sal-dist .t-med { stroke: var(--bg-card); stroke-width: 2; vector-effect: non-scaling-stroke; }
.sal-tick { position: absolute; top: 88px; transform: translateX(-50%); display: grid; justify-items: center; font: 400 11px/1.35 var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sal-tick::before { content: ""; width: 1px; height: 8px; background: var(--ink-soft); margin-bottom: 4px; }
.sal-tick b { font-weight: 500; color: var(--ink); }
.sal-tick.is-low { top: 88px; } .sal-tick.is-alt { top: 118px; }
.sal-tick.is-alt::before { height: 38px; margin-top: -30px; }
.sal-you { position: absolute; top: 0; bottom: 60px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none;
  transition: none; }
.sal-you-tag { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--amber-deep); color: var(--bg-card); font: 500 12px/1.2 var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sal-you-stem { width: 2px; flex: 1; background: var(--ink); }
.sal-you-stem::after { content: ""; display: block; width: 10px; height: 10px; margin: 0 0 0 -4px; transform: translateY(-2px); }
.sal-you svg { width: 12px; height: 8px; fill: var(--amber-deep); margin-top: -1px; }
.sal-band-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 400 12px/1.4 var(--font-mono); color: var(--ink-soft); border-top: 1px dashed var(--rule); padding-top: 16px; }
.sal-key { display: inline-flex; align-items: center; gap: 8px; }
.sal-key i { width: 18px; height: 10px; border-radius: 2px; display: inline-block; }

/* ---------- 8. Charts, shared (.sal-chart) ---------- */
.sal-chart { margin: 0; }
.sal-chart-note { margin-top: 18px; font: 400 12px/1.5 var(--font-mono); color: var(--ink-soft); }

/* Module 05 · Metro bars (.sal-bars) */
/* --x on .sal-bars-ref = reference value ÷ chart max (0–1). Bar rect widths use the same max. */
.sal-bars { display: grid; grid-template-columns: 170px minmax(0, 1fr) 96px 104px; column-gap: 16px; row-gap: 0; align-items: center; position: relative; }
.sal-bars-ref { position: absolute; top: 0; bottom: 5px; left: calc(186px + (100% - 434px) * var(--x)); width: 0; pointer-events: none; z-index: 1; }
.sal-bars-ref::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 0; border-left: 1.5px dashed var(--ink); }
.sal-bars-ref span { position: absolute; left: 0; top: 0; transform: translateX(-50%); font: 500 11px/1.4 var(--font-mono); white-space: nowrap; color: var(--ink); background: var(--bg); padding: 0 6px; }
.sal-bars-head { grid-column: 1 / -1; height: 22px; }
.sal-bar-label { font-size: 15px; line-height: 1.3; color: var(--ink); }
.sal-bar-track { display: block; width: 100%; height: 26px; margin: 5px 0; }
.sal-bar-track rect.bg { fill: var(--bg-soft); }
.sal-bar-track rect.v { fill: var(--teal-deep); }
.sal-bar-track rect.v.is-state { fill: var(--ink-soft); }
.sal-bar-val { text-align: right; font: 500 15px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.sal-bar-delta { text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font: 400 12px/1 var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Module 06 · Specialty table (.sal-table) */
.sal-table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--bg-card); }
.sal-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sal-table th { text-align: left; font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding: 0; border-bottom: 1px solid var(--rule); background: var(--bg-soft); }
.sal-table th button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 18px; cursor: pointer; transition: color var(--sal-dur) var(--sal-ease); }
.sal-table th button:hover { color: var(--ink); }
.sal-table th button:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: -2px; }
.sal-table th.num button { justify-content: flex-end; }
.sal-table th .sort { width: 8px; height: 10px; fill: currentColor; opacity: .35; }
.sal-table th[aria-sort] { color: var(--teal-deep); }
.sal-table th[aria-sort] .sort { opacity: 1; }
.sal-table th[aria-sort="descending"] .sort { transform: rotate(180deg); }
.sal-table td { padding: 14px 18px; border-bottom: 1px dashed var(--rule); }
.sal-table tr:last-child td { border-bottom: 0; }
.sal-table td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sal-table td.delta { text-align: right; white-space: nowrap; font: 400 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.sal-table td.delta > span { display: inline-flex; align-items: center; gap: 6px; }
.sal-table td.delta em { font-style: normal; color: var(--ink-soft); }
.sal-table tr.is-ref td { background: var(--teal-tint); font-weight: 500; }

/* Module 07 · Raw vs adjusted rank (.sal-rank) — dark slab */
.sal-rank-slab { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; background: var(--bg-dark); color: var(--ink-on-dark);
  border-radius: var(--radius-xl); padding: 40px; }
.sal-rank-slab .sal-eyebrow { color: var(--terracotta); }
.sal-rank-slab .sal-h2 { color: var(--ink-on-dark); margin: 14px 0 18px; }
.sal-rank-slab .sal-h2 em { color: var(--terracotta); }
.sal-rank-slab p { color: var(--ink-on-dark-soft); font-size: 16px; max-width: 46ch; }
.sal-rank-slab p .sal-num { color: var(--ink-on-dark); }
.sal .sal-copy { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--ink-on-dark); border: 1px solid var(--rule-dark);
  border-radius: var(--radius-pill); padding: 9px 16px; font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: border-color var(--sal-dur) var(--sal-ease), color var(--sal-dur) var(--sal-ease); }
.sal .sal-copy:hover { border-color: var(--terracotta); color: var(--bg-card); }
.sal-slope { width: 100%; height: auto; display: block; }
.sal-slope .grid { stroke: var(--rule-dark); stroke-width: 1; }
.sal-slope .axis { fill: var(--ink-on-dark-soft); font: 400 11px var(--font-mono); }
.sal-slope .col { fill: var(--ink-on-dark-soft); font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.sal-slope .line { stroke: var(--terracotta); stroke-width: 3; fill: none; stroke-linecap: round; }
.sal-slope .dot-raw { fill: var(--bg-dark); stroke: var(--ink-on-dark); stroke-width: 2.5; }
.sal-slope .dot-adj { fill: var(--terracotta); stroke: var(--bg-dark); stroke-width: 2.5; }
.sal-slope .big { fill: var(--ink-on-dark); font: 400 34px var(--font-serif); }
.sal-slope .small { fill: var(--ink-on-dark-soft); font: 400 12px var(--font-mono); }

/* Module 08 · Travel (.sal-travel) */
.sal-travel-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; }
.sal-travel-fig { background: var(--amber-tint); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 12px; align-content: start; }
.sal-travel-fig .sal-eyebrow { color: var(--amber-deep); }
.sal-travel-fig .big { font: 400 72px/.95 var(--font-serif); letter-spacing: -.03em; }
.sal-travel-fig .big small { font: 400 18px/1 var(--font-mono); letter-spacing: 0; color: var(--amber-deep); }
.sal-travel-fig .calc { font: 400 13px/1.55 var(--font-mono); color: var(--ink-soft); padding-top: 12px; border-top: 1px dashed rgba(138,79,35,.3); font-variant-numeric: tabular-nums; }
.sal-note { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 28px; display: grid; gap: 14px; align-content: start; }
.sal-note-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.sal-note-i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font: italic 400 14px/1 var(--font-serif); flex: none; }
.sal-note p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* Module 09 · Context facts (.sal-facts) */
.sal-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sal-fact { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.sal-fact dt { font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sal-fact-val { display: flex; align-items: center; gap: 10px; font: 400 30px/1.1 var(--font-serif); letter-spacing: -.01em; }
.sal-fact-val svg { width: 18px; height: 18px; flex: none; }
.sal-fact p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.sal-shape { stroke: var(--ink); stroke-width: 2; }
.sal-shape.is-yes { fill: var(--teal-deep); stroke: var(--teal-deep); }
.sal-shape.is-no { fill: none; }
.sal-shape.is-part { fill: none; }
.sal-shape-half { fill: var(--ink); }
.sal-facts-key { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; font: 400 12px/1.4 var(--font-mono); color: var(--ink-soft); padding-top: 6px; }
.sal-facts-key span { display: inline-flex; align-items: center; gap: 6px; }
.sal-facts-key svg { width: 12px; height: 12px; }

/* Module 10 · Prose (.sal-prose) */
.sal-prose-body { max-width: var(--sal-measure); }
.sal-prose-body > * + * { margin-top: 1.1em; }
.sal-prose-body p { color: var(--ink-soft); text-wrap: pretty; }
.sal-prose-body p strong { color: var(--ink); font-weight: 600; }
.sal-prose-body > p:first-of-type::first-letter { float: left; font: 400 5.4em/.82 var(--font-serif); color: var(--teal-deep); margin: .06em .1em 0 0; }
.sal-prose-body h3 { font: 400 28px/1.15 var(--font-serif); letter-spacing: -.01em; margin-top: 1.8em; color: var(--ink); }
.sal-prose-body .sal-num { font-size: .92em; color: var(--ink); }
.sal-pull { margin: 2em 0 !important; padding: 26px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.sal-pull blockquote { margin: 0; font: italic 400 clamp(26px, 3vw, 34px)/1.25 var(--font-serif); color: var(--teal-deep); letter-spacing: -.01em; text-wrap: balance; }
.sal-pull figcaption { margin-top: 14px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sal-bedside { margin: 2em 0 !important; background: var(--bg-soft); border-radius: var(--radius-lg); padding: 28px 30px; display: grid; gap: 16px; }
.sal-bedside-head { display: flex; align-items: center; gap: 12px; }
.sal-bedside-head .sal-eyebrow { color: var(--terracotta); color: var(--amber-deep); }
.sal-bedside-head .who { font: 400 12px/1.4 var(--font-mono); color: var(--ink-soft); }
.sal-bedside p { font: 400 22px/1.45 var(--font-serif) !important; color: var(--ink) !important; letter-spacing: -.005em; }
.sal-bedside p::first-letter { all: unset; }

/* Module 11 · FAQ (.sal-faq) */
.sal-faq-list { border-top: 1px solid var(--rule); max-width: 820px; }
.sal-faq details { border-bottom: 1px dashed var(--rule); }
.sal-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 4px;
  font: 400 23px/1.25 var(--font-serif); color: var(--ink); transition: color var(--sal-dur) var(--sal-ease); }
.sal-faq summary::-webkit-details-marker { display: none; }
.sal-faq summary:hover { color: var(--teal-deep); }
.sal-faq summary svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sal-faq details[open] summary svg { transform: rotate(180deg); }
.sal-faq-a { padding: 0 4px 22px; max-width: var(--sal-measure); color: var(--ink-soft); font-size: 16px; }

/* Module 12 · Neighbours + related (.sal-near) */
.sal-near-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sal .sal-state { display: grid; gap: 6px; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); color: var(--ink); }
.sal .sal-state:hover { border-color: var(--teal-deep); background: var(--teal-tint); color: var(--ink); }
.sal-state-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sal-state-name { font: 400 24px/1.1 var(--font-serif); }
.sal-state-abbr { font: 500 11px/1 var(--font-mono); letter-spacing: .12em; color: var(--ink-soft); }
.sal-state-val { font: 500 16px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.sal-state-cmp { display: flex; align-items: center; gap: 6px; font: 400 12px/1.3 var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sal-related { margin-top: 40px; }
.sal-related h3 { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.sal-related ul { border-top: 1px solid var(--rule); }
.sal .sal-related a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 12px; border: 0; border-bottom: 1px dashed var(--rule); color: var(--ink); font-size: 16px; }
.sal .sal-related a:hover { background: var(--teal-tint); color: var(--teal-deep); }
.sal .sal-related a:hover .sal-orb { background: var(--teal-deep); }
.sal-related .kind { font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-right: 14px; }

/* Module 13 · Sources (.sal-sources) */
.sal-sources-card { background: var(--bg-soft); border-radius: var(--radius-xl); padding: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.sal-sources-card h3 { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.sal-src li { padding: 12px 0; border-top: 1px dashed var(--rule); font-size: 15px; line-height: 1.45; }
.sal-src li span { display: block; font: 400 12px/1.4 var(--font-mono); color: var(--ink-soft); margin-top: 2px; }
.sal-method p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.sal-method p + p { margin-top: 12px; }
.sal-disclaim { grid-column: 1 / -1; font: italic 400 18px/1.4 var(--font-serif); color: var(--ink-soft); padding-top: 18px; border-top: 1px solid var(--rule); }

/* Thin-state variant: tighter rhythm, glance becomes 4-up + the rank slab reads as the centrepiece */
.sal[data-depth="thin"] { --sal-mod-pad: 56px; }

.sal-chip, .sal-answer-sub span, .sal-crumbs, .sal-role-delta, .sal-role-rank { white-space: nowrap; }

/* ---------- 9. Responsive ---------- */
@media (max-width: 1080px) {
  .sal-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sal-rank-slab { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sal { --sal-mod-pad: 48px; }
  .sal-body { display: block; }
  .sal-jump { position: sticky; top: var(--sal-nav-h); z-index: 20; margin: 0 calc(var(--sal-gutter) * -1); padding: 10px var(--sal-gutter);
    background: rgba(245,241,234,.92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--rule); }
  .sal-jump-title { display: none; }
  .sal-jump ol { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-padding-left: var(--sal-gutter); }
  .sal-jump ol::-webkit-scrollbar { display: none; }
  .sal .sal-jump a { display: block; white-space: nowrap; border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 14px; background: var(--bg-card); min-height: 36px; }
  .sal .sal-jump a::before { display: none; }
  .sal .sal-jump a[aria-current="true"] { background: var(--ink); color: var(--bg-card); border-color: var(--ink); }
  .sal-main > .sal-mod:first-child { padding-top: 40px; }
  .sal-mod { scroll-margin-top: calc(var(--sal-nav-h) + 72px); }
  .sal-answer { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sal-band-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sal-travel-grid, .sal-sources-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sal { font-size: 17px; }
  .sal-hero { padding: 28px 0 28px; }
  .sal-hero h1 { margin: 14px 0 24px; }
  .sal-answer-fig { font-size: 96px; }
  .sal-glance, .sal-glance[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 36px; }
  .sal-role { padding: 16px 14px 14px; }
  .sal-role-val { font-size: 30px; }
  .sal-band-card, .sal-rank-slab, .sal-sources-card { padding: 22px; border-radius: var(--radius-lg); }
  .sal-dist { padding-top: 40px; }
  .sal-bars { grid-template-columns: minmax(0, 1fr) 84px; row-gap: 4px; }
  .sal-bars-ref { left: calc((100% - 100px) * var(--x)); }
  .sal-bars-head { grid-column: 1 / -1; }
  .sal-bar-label { grid-column: 1 / -1; font-size: 14px; margin-top: 8px; }
  .sal-bar-track { grid-column: 1; }
  .sal-bar-val { grid-column: 2; font-size: 14px; }
  .sal-bar-delta { display: none; }
  .sal-table { font-size: 14px; }
  .sal-table th button, .sal-table td { padding: 12px; }
  .sal-table .hide-sm { display: none; }
  .sal-facts { grid-template-columns: 1fr; }
  .sal-near-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sal .sal-state { padding: 14px; }
  .sal-state-name { font-size: 21px; }
  .sal-travel-fig .big { font-size: 60px; }
  .sal-bedside { padding: 22px; }
  .sal-bedside p { font-size: 20px !important; }
  .sal-faq summary { font-size: 20px; }
}

/* ---------- 10. Site integration ---------- */
/* The page is cream edge to edge, not just the 1240px column. */
body:has(> main.sal-page) { background: #f5f1ea; margin: 0; }
/* The canonical nav is fixed at 64px, and 60px under 821px. */
@media (max-width: 820px) { .sal { --sal-nav-h: 60px; } }
.sal-page { display: block; }
.sal .sal-byline a { color: var(--ink); border-bottom-color: var(--rule); }
.sal-role-delta .sal-flat + span, .sal-role-delta.is-none { color: var(--ink-soft); }

/* Legacy prose, lifted from the hand-authored pages. Headings arrive as h3
   (was h2) and h4 (was h3); tables, lists and callouts keep their content and
   lose their inline styles, so the look comes from here. */
.sal-prose-body :is(p, ul, ol, figure, div, table) + :is(p, ul, ol, h4, figure, div, table) { margin-top: 1.1em; }
.sal-prose-body .sal-callout :is(p, ul, ol, div) + :is(p, ul, ol, div) { margin-top: 0; }
.sal-prose-body .sal-callout table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sal-prose-body .sal-callout td { padding: 6px 0; border-bottom: 1px dashed var(--rule); color: var(--ink); }
.sal-prose-body .sal-callout td + td { font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; padding-left: 16px; }
.sal-prose-body .sal-callout td:nth-child(2):last-child { text-align: right; }
.sal-prose-body .sal-callout tr:last-child td { border-bottom: 0; }
.sal-facts[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .sal-facts[data-count="3"] { grid-template-columns: minmax(0, 1fr); } }
.sal-prose-body h3 { scroll-margin-top: calc(var(--sal-nav-h) + 72px); }
.sal-prose-body h4 { font: 600 17px/1.35 var(--font-sans); color: var(--ink); margin-top: 1.6em; }
.sal-prose-body ul, .sal-prose-body ol { padding-left: 1.3em; color: var(--ink-soft); }
.sal-prose-body ul { list-style: disc; }
.sal-prose-body ol { list-style: decimal; }
.sal-prose-body li + li { margin-top: .4em; }
.sal-prose-body li::marker { color: var(--teal-deep); }
.sal-prose-body li strong { color: var(--ink); font-weight: 600; }
.sal-prose-body img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.sal-prose-body .sal-table-wrap { margin-top: 1.4em; }
.sal-prose-body .sal-table caption { caption-side: bottom; padding: 12px 18px; text-align: left; font: 400 12px/1.5 var(--font-mono); color: var(--ink-soft); }
.sal-prose-body .sal-table th { padding: 14px 18px; }
.sal-prose-body .sal-table td { color: var(--ink); vertical-align: top; }
.sal-prose-body .sal-table td:not(:first-child) { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.sal-callout { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 22px 24px; display: grid; gap: 10px; }
.sal-callout > * + * { margin-top: 0 !important; }
.sal-callout p, .sal-callout li, .sal-callout div { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.sal-callout strong, .sal-callout b { color: var(--ink); font-weight: 600; }
.sal-callout .title, .sal-callout h3, .sal-callout h4 { font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); margin: 0; }
.sal-callout.is-warn { background: var(--amber-tint); border-color: transparent; }
.sal-callout.is-warn .title, .sal-callout.is-warn h3, .sal-callout.is-warn h4 { color: var(--amber-deep); }
.sal-callout.is-cta { background: var(--teal-tint); border-color: var(--teal-wash); }
.sal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.sal-grid > * { background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px 18px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.sal-grid > * > :first-child { font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sal-grid > * > :nth-child(2) { font: 400 28px/1.05 var(--font-serif); letter-spacing: -.02em; color: var(--ink); }
.sal-grid > * > :nth-child(n+3) { font: 400 12px/1.4 var(--font-mono); color: var(--ink-soft); }
.sal-prose-body .sal-bedside p { margin: 0; }
.sal-prose-body .sal-bedside .title { display: none; }

/* Sources quoted by the original guide, kept under the methodology. */
.sal-cited { grid-column: 1 / -1; padding-top: 18px; border-top: 1px dashed var(--rule); font-size: 14px; line-height: 1.6; color: var(--ink-soft); display: grid; gap: 8px; }
.sal-cited h3 { margin-bottom: 4px; }
.sal-cited ul, .sal-cited ol { display: grid; gap: 6px; }
.sal-cited p, .sal-cited li, .sal-cited div { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* The related-links cluster block (scripts/build-related-links.py owns its
   markup and inline style) reads as the design's related list here. */
.sal .tnd-related { max-width: none; margin: 32px 0 0; padding: 0; }
.sal .tnd-related-in { background: transparent; border: 0; border-radius: 0; padding: 0; }
.sal .tnd-related-h { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
.sal .tnd-related-list { display: block; border-top: 1px solid var(--rule); }
.sal .tnd-related-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 12px; border: 0; border-bottom: 1px dashed var(--rule);
  color: var(--ink); font: 400 16px/1.4 var(--font-sans); text-decoration: none; }
.sal .tnd-related-list a::after { content: "\2192"; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: var(--bg-card); font: 500 14px/1 var(--font-sans); flex: none;
  transition: background-color var(--sal-dur) var(--sal-ease); }
.sal .tnd-related-list a:hover { background: var(--teal-tint); color: var(--teal-deep); }
.sal .tnd-related-list a:hover::after { background: var(--teal-deep); }
.sal-near-grid[data-count="4"], .sal-near-grid[data-count="7"], .sal-near-grid[data-count="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sal-near-grid[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sal-glance[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .sal-glance[data-count="4"], .sal-glance[data-count="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sal-near-grid[data-count] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sal-glance[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sal-near-grid[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sal-callout { padding: 18px; }
  .sal-prose-body .sal-table th, .sal-prose-body .sal-table td { padding: 12px; }
}