/* ============================================================================
   PayLens signature sheet — Identity A, cluster WORK.
   AAA+++ STUDIO PREMIUM pass, 2026-08-04. (Supersedes the 2026-07-30 premium
   pass, whose two real findings are preserved and annotated below.)

   VOICE: broadsheet ledger. A financial paper's data page — sober, comparative,
   unexcited. Rules and ticks rather than boxes and fills; mono for every code,
   date, unit and vintage; the argument stated in type, not in colour.

   FLAG-FREE, on purpose. Countries are set as mono ISO-3166 alpha-3 codes
   (NZL AUS CAN GBR USA SGP IND) in the spec register. That is the design cue
   and the honest one at the same time: this site compares statistical series
   published by seven agencies, not nations — and the codes are what the
   agencies themselves use. A flag image would also breach the zero-new-request
   rule, and flag emoji render as a different typeface on every platform, which
   is exactly the "unmeasured" tell §3.4 exists to kill.

   THIS SHEET ADDS ONLY WHAT IS SITE-SPECIFIC. The AAA+++ mechanics (mono voice,
   keel rule, grain, reveal, draw-underline, one-shadow elevation, rel-cards,
   .method, .srcline, .answer.aaa, .breathe) all live in _shared/datasite.css
   §20, already propagated into /assets/data.css. Nothing here re-implements
   them; where a rule appears it is because PayLens's own components need it.
   ========================================================================== */

:root {
  --site-accent: #1F4E42;      /* deeper, inkier ledger green — reads printed */
  --accent-quiet: #5C7F75;     /* supporting marks that must not shout */
  --pay-up: #2F6B3F;
  --pay-down: #9B2C1F;

  /* Type scale — 1.25 major third, capped so headings never get shouty. */
  --step--1: clamp(.82rem, .8rem + .1vw, .875rem);
  --step-0:  clamp(1rem, .97rem + .15vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.13rem + .35vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.32rem + .6vw, 1.8rem);
  --step-3:  clamp(1.8rem, 1.55rem + 1.1vw, 2.4rem);

  --measure-prose: 68ch;
  --ease: var(--ease-out, cubic-bezier(.25, 1, .4, 1));
}

/* --------------------------------------------------------------- container
   ⚠ LOAD-BEARING — DO NOT DELETE. The ring convention is
   `<section class="section"><div class="wrap">`, and this build emits its body
   blocks as direct children of <main>. Without this rule every one of the 3,528
   pages runs edge-to-edge with no gutter and the headline block reads as a
   stray half-width card. Constraining <main> fixes it in one rule rather than
   threading a wrapper through nine templates. The shell's own header, hero,
   crumbs and footer carry their own `.wrap`; nesting inside this container is
   harmless because both resolve to the same measure. */
main {
  max-width: calc(var(--max, 1180px) + 2 * clamp(18px, 4vw, 44px));
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 44px);
}
main > .hero { padding-inline: 0; }
/* The pre-footer ad unit brings its own gutter (data.css .ad-slot--pre-footer);
   inside this container that would double it. */
main > .ad-slot--pre-footer { padding-inline: 0; }

/* ------------------------------------------------------------------ canvas */
body {
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A hairline of accent along the very top — the masthead rule of a broadsheet.
   ⚠ This is `::after`, NOT `::before`: data.css §20.5 owns body::before for the
   paper-grain layer, and the previous pass silently overwrote it, so this site
   was the one Identity A property rendering on dead-flat ground. */
body::after {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 40;
  background: linear-gradient(90deg, var(--accent), var(--accent-quiet) 60%, transparent);
  pointer-events: none;
}

/* ---------------------------------------------------------------- numerals
   Numbers are the entire product, and this is the most tabular-critical site
   in the portfolio: every page exists to set figures from different countries
   in a column and let a reader compare them. Anything comparable is tabular. */
.num, td.n, .unitfig, .stat, .progress-row .num, .cc,
table td.num, table th.num, table td.n, .figure text, .plx text, .tnote {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
table td.num, table th.num, table td.n, table th.n { text-align: right; white-space: nowrap; }

/* ------------------------------------------------------ mono country codes
   The spec register. Never a flag, never a coloured chip — a code, set in the
   mono voice at the same size as every other piece of provenance on the site. */
.cc {
  font-family: var(--mono);
  font-size: .78em;
  letter-spacing: .1em;
  color: var(--muted);
  margin-right: .55em;
  white-space: nowrap;
}
td .cc, th .cc { color: var(--faint); }
.ring-card .cc, .plx text.cc { color: var(--accent-deep); }

/* ------------------------------------------------------------ the headline
   data.css constrains .answer to a narrower measure than the sections below
   it, which made the headline block read as a stray card. It spans the
   container here; the LEDE keeps its own reading measure. */
.answer, .answer.aaa {
  max-width: none;
  margin: clamp(28px, 5vw, 52px) 0 clamp(24px, 4vw, 40px);
}
/* The wage figure. .stat-display + a mono currency unit (§4). */
.answer .stat-display, .answer p.stat-display {
  color: var(--accent);
  margin: 0 0 .22em;
  max-width: none;
  text-wrap: balance;
}
.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2, var(--ink));
  max-width: var(--measure-prose);
  text-wrap: pretty;
}
h1 {
  font-family: var(--serif, Fraunces), Georgia, serif;
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h2, h2.sec {
  font-family: var(--serif, Fraunces), Georgia, serif;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.014em;
  text-wrap: balance;
  margin-bottom: .5em;
  padding-bottom: 0;
  border-bottom: 0;   /* the keel rule above it is the datum, not a rule under it */
}
p { max-width: var(--measure-prose); text-wrap: pretty; }

/* ------------------------------------------------------------------ rhythm */
.section {
  margin-top: clamp(40px, 6vw, 76px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line);
}
.section:first-of-type { border-top: 0; padding-top: 0; }
.method { margin-top: clamp(40px, 6vw, 76px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); }

/* --------------------------------------------------------- the stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(16px, 2.5vw, 32px);
  margin: clamp(28px, 4vw, 44px) 0;
  padding: clamp(20px, 3vw, 28px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats .stat { min-width: 0; border: 0; padding: 0; }
.stats .figure-unit {
  font-family: var(--mono);
  font-size: var(--fs-mono, .8125rem);
  text-transform: uppercase; letter-spacing: var(--track-label, .11em);
  color: var(--faint); margin-bottom: 6px;
}
.stats .unitfig {
  font-size: var(--step-1); font-weight: 600;
  color: var(--ink); line-height: 1.1;
  letter-spacing: -.01em;
}
.stats .tnote { font-size: var(--step--1); color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* ============================================================================
   THE SET PIECE — "the two readings"  (.plx)
   ----------------------------------------------------------------------------
   PayLens's whole argument in one drawing: a wage converted at the exchange
   rate is NOT what that wage is worth once local prices are accounted for, and
   the DISAGREEMENT between the two readings is the subject — not either
   number on its own.

   The drawing hand, and why it is nobody else's in the portfolio:
     · a printed MEASURING RULE, not a bar chart. There is no fill growing from
       zero; there is a scale with ticks, and two readings taken against it.
     · square butt-cap terminals and 1px hairlines throughout — a ledger rule,
       set with a ruling pen. (fuel/burn use a 1.4px round-cap hand; the trades
       pair uses a 2.2px nib; the dial sites use arcs. None of them rule.)
     · the gap between the two readings is drawn as a HATCHED SPAN, the way a
       surveyor's plan marks a discrepancy, and it is the only hatched object
       on the site.
     · every label is mono, every country is an ISO-3 code, and the multiple is
       printed at the open end of the span because that is the reading.
   Server-rendered SVG. No script, no external request, no layout shift: the
   viewBox fixes the aspect ratio before any style resolves.
   ========================================================================== */
.plx {
  margin: clamp(26px, 4vw, 44px) 0 0;
  max-width: none;
}
.plx svg { display: block; width: 100%; height: auto; overflow: visible; }
.plx text {
  font-family: var(--mono);
  letter-spacing: .06em;
  fill: var(--muted);
}
/* The generic `.cc` rule sets a relative font-size, and a CSS declaration beats
   an SVG presentation attribute — so the code inside the drawing is pinned to a
   rem here rather than inheriting a compounding em. */
.plx text.cc { fill: var(--accent-deep); letter-spacing: .12em; font-size: .78rem; margin: 0; }
.plx text.rd { fill: var(--ink); letter-spacing: .02em; }
.plx text.gp { fill: var(--accent-deep); letter-spacing: .04em; }
.plx .rule { stroke: var(--line-2); stroke-width: 1; }
.plx .tick { stroke: var(--line-2); stroke-width: 1; }
.plx .stem { stroke: var(--ink-2); stroke-width: 1; }
.plx .mk-fx { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.4; }
.plx .mk-ppp { fill: var(--accent); stroke: var(--accent); stroke-width: 1.4; }
.plx .span-edge { stroke: var(--accent); stroke-width: 1.4; }
.plx-legend {
  display: flex; flex-wrap: wrap; gap: 6px 22px; max-width: none;
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-mono, .8125rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.plx-legend b { font-weight: inherit; color: var(--ink-2); }
.plx-key { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: baseline; }
.plx-key.k-fx { background: var(--paper); border: 1.4px solid var(--ink-2); }
.plx-key.k-ppp { background: var(--accent); border: 1.4px solid var(--accent); }
.plx-key.k-gap { background: var(--accent-wash); border: 1px solid var(--accent); }
.plx-cap {
  font-size: var(--step--1); line-height: 1.55; color: var(--muted);
  margin-top: 14px; max-width: 66ch;
  padding-left: 14px; border-left: 2px solid var(--line-2, var(--line));
}
@media (max-width: 560px) {
  /* Below the fold of a phone the seven-row rule needs its labels to breathe;
     the SVG scales, so only the type is re-set. */
  .plx svg { font-size: 1.08em; }
}

/* --------------------------------------------------- the percentile figure */
.figure { margin: clamp(30px, 4.5vw, 52px) 0; }
.figure svg { display: block; overflow: visible; }
.figure text { font-family: var(--sans, Inter), system-ui, sans-serif; }
.figure-cap {
  font-size: var(--step--1); line-height: 1.55; color: var(--muted);
  margin-top: 14px; max-width: 64ch;
  padding-left: 14px; border-left: 2px solid var(--line-2, var(--line));
}

/* -------------------------------------------------------------- the tables
   On a reference site the table IS the interface, so it gets the most care:
   a sticky head for long lists, generous row height, and rules that carry the
   eye across without caging every value. */
.tablewrap {
  overflow-x: auto;
  margin: clamp(18px, 2.5vw, 26px) 0;
  border: 1px solid var(--line);
  border-radius: var(--radius, 10px);
  background: var(--surface);
  box-shadow: none;
}
.tablewrap table {
  width: 100%; border-collapse: collapse;
  font-size: var(--step--1);
}
.tablewrap th, .tablewrap td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.tablewrap thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-tint);
  font-family: var(--mono);
  font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-2, var(--muted));
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2, var(--line));
}
.tablewrap tbody tr:last-child td { border-bottom: 0; }
.tablewrap tbody tr { transition: background var(--t-fast, .14s) var(--ease); }
.tablewrap tbody tr:hover { background: var(--accent-soft); }
.tablewrap td a { color: var(--accent); font-weight: 550; text-decoration: none; }
.tablewrap td a:hover { text-decoration: underline; text-underline-offset: 2px; }
.tablewrap td .tnote { font-size: .76rem; color: var(--muted); }
/* The vintage chip in a caption position — the table's own dated provenance. */
.tcap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-top: clamp(18px, 2.5vw, 26px);
}
.tcap .vintage {
  display: inline-block;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm, 8px);
  padding: 2px 8px;
  color: var(--muted);
  text-transform: uppercase;
}

/* ----------------------------------------------------- occupation lists */
.soc-links {
  list-style: none; padding: 0; margin: clamp(14px, 2vw, 20px) 0 0;
  columns: 2; column-gap: clamp(28px, 4vw, 48px);
}
.soc-links li {
  break-inside: avoid; margin: 0 0 9px;
  font-size: var(--step--1); line-height: 1.45;
}
.soc-links .soc-link {
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast, .14s) var(--ease), color var(--t-fast, .14s) var(--ease);
}
.soc-links .soc-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.soc-links .tnote { color: var(--muted); font-size: .8rem; margin-left: .4em; }
@media (max-width: 680px) { .soc-links { columns: 1; } }

/* --------------------------------------------------------- editorial notes
   A stated limitation is a trust signal, so it is set as a real aside rather
   than hidden in small grey print. Ruled, never a coloured alert box. */
.assume {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(14px, 2vw, 18px) 0;
  margin: clamp(22px, 3vw, 32px) 0;
  font-size: var(--step-0); line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure-prose);
}
.assume strong { color: var(--ink); }
.sec-note {
  font-size: var(--step--1); line-height: 1.55; color: var(--muted);
  max-width: 66ch; margin-top: 12px;
}

/* ------------------------------------------------------------ the FAQ block */
.faq { margin-top: clamp(14px, 2vw, 20px); max-width: var(--measure-prose); }
.faq dt {
  font-weight: 600; color: var(--ink);
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px;
}
.faq dt:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.faq dd { margin: 7px 0 0; color: var(--ink-2); font-size: var(--step--1); line-height: 1.6; }

/* --------------------------------------------------------- country cards
   Rules and a code, not flags and shadows. The top rule is the accent; the
   hover darkens the hairline and nothing moves (§3.6 — motion here costs CLS
   and reads as a template). */
.ring-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 20px); margin-top: clamp(16px, 2.5vw, 24px);
}
.ring-card {
  display: block; padding: clamp(18px, 3vw, 24px);
  background: var(--surface); border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 0 0 var(--radius, 10px) var(--radius, 10px);
  text-decoration: none; color: inherit; box-shadow: none;
  transition: border-color var(--t-fast, .14s) var(--ease);
}
.ring-card:hover { border-color: var(--line-2); border-top-color: var(--accent); }
.ring-card .ring-h {
  font-family: var(--serif, Fraunces), Georgia, serif;
  font-size: var(--step-1); font-weight: 500; letter-spacing: -.012em;
  margin-bottom: 6px;
}
.ring-card .hub-blurb { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }

/* ------------------------------------------------------ cross-site bridge */
.entity-bridge {
  margin: clamp(30px, 4vw, 48px) 0;
  padding: clamp(18px, 3vw, 24px) 0;
  border-top: 1px solid var(--line-2, var(--line));
  border-bottom: 1px solid var(--line-2, var(--line));
  background: none;
  max-width: var(--measure-prose);
}
.eb-kicker {
  font-family: var(--mono);
  font-size: var(--fs-mono, .8125rem);
  text-transform: uppercase; letter-spacing: var(--track-label, .11em);
  color: var(--accent-deep); margin-bottom: 8px;
}
.eb-body { font-size: var(--step-0); line-height: 1.55; margin-bottom: 12px; }
.eb-go { font-weight: 600; color: var(--accent); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.15em; border-radius: var(--radius-sm, 8px);
  font-size: var(--step--1); font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast, .14s) var(--ease), border-color var(--t-fast, .14s) var(--ease);
}
.btn-primary { background: var(--accent); color: var(--on-accent, #fff); border: 1px solid var(--accent); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* NOTE — there is deliberately no mobile-header override here. An earlier pass
   added one on the belief that the header forced a 30px horizontal scroll on
   phones. It does not: styles.css already hides `.head-nav` below 900px, and a
   real 375px viewport measures no overflow. The apparent 420px was a
   measurement artefact — setting `documentElement.style.width` resizes the
   element but NOT the viewport, so media queries never fire and you end up
   reading the desktop header's min-content width.

   Nor is there an `overflow-x: hidden` on html/body. It would have hidden that
   phantom scrollbar, and would go on hiding any real overflow introduced later
   instead of letting it be caught. */

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

/* -------------------------------------------------------------- dark mode
   Warm basalt comes from data.css §2.1b; what is site-local is the accent,
   which has to lift off #161512 or the ledger green disappears. */
:root[data-theme="dark"] {
  --site-accent: #6FB3A0;
  --accent-quiet: #4E8377;
  --pay-up: #6FBF84;
  --pay-down: #E38377;
}
/* ⚠ MEASURED BUG, fixed here because the shared sheet may not be edited.
   datasite.css §19 carries a `:root[data-theme="dark"] body[data-site="…"]`
   block that lifts each site's accent for dark mode — and PayLens is not in
   it, because salary was added to the ring after that list was written. The
   consequence is not cosmetic: shell() writes `--site-accent` as an INLINE
   style on <body>, inline outranks any stylesheet, and datasite.css re-derives
   `--accent` from it on <body> — so the :root override above never reached the
   page. Measured in the browser, dark PayLens was painting the LIGHT ledger
   green #2F5D50 on #161512: a contrast ratio of 2.5:1, well under the 4.5:1
   floor. `contrast-check.mjs` cannot see this — it validates the value the
   registry intends, not the value the cascade delivers.
   #6FB3A0 on #161512 measures 7.5:1. Overriding --accent (not --site-accent),
   because only the former is reachable from a stylesheet. */
:root[data-theme="dark"] body[data-site="salary"] {
  --accent: #6FB3A0;
  --accent-2: #6FB3A0;
  --accent-3: #6FB3A0;
  --accent-soft: color-mix(in srgb, #6FB3A0 14%, var(--paper));
  --accent-wash: color-mix(in srgb, #6FB3A0 10%, var(--paper));
  --accent-deep: color-mix(in srgb, #6FB3A0 88%, var(--ink));
}
:root[data-theme="dark"] .plx .mk-fx { fill: var(--paper); stroke: var(--ink-2); }
:root[data-theme="dark"] .plx-key.k-fx { background: var(--paper); border-color: var(--ink-2); }
/* Dark elevation is a surface step and a hairline, never a shadow. */
:root[data-theme="dark"] .tablewrap,
:root[data-theme="dark"] .ring-card { box-shadow: none; border-color: var(--line-2); }

/* --------------------------------------------------------------- print
   A reference page should print like one. */
@media print {
  body::after, body::before, .ad-slot, .pf-cinema, .entity-bridge, .ring { display: none !important; }
  main { max-width: none; padding-inline: 0; }
  .section, .plx, .method { break-inside: avoid; }
  .tablewrap { overflow: visible; border: 0; }
  .tablewrap thead th { position: static; }
}