/* thepaygap.nyc
   ------------------------------------------------------------------
   One stylesheet, no build step, no webfonts. Light and dark are both
   first-class: every colour is a token, and the only thing the dark
   block does is repoint the tokens.

   The look borrows the restraint of late-2000s Apple (a lot of white,
   real hairlines, one accent, big confident headline type) and pairs it
   with things that era did not have: system fonts, a fluid grid, and a
   dark mode that is not an afterthought. */

/* ---- Tokens ---------------------------------------------------- */

:root {
  --paper:        #fbfaf7;   /* warm ivory, not clinical white */
  --paper-raised: #ffffff;
  --paper-sunken: #f2f0eb;
  --ink:          #16181d;
  --ink-soft:     #4a4f5a;
  /* Darkened from #7c828f: the lighter grey measured 3.7:1 against the paper,
     which fails WCAG AA for the small text it is used on (eyebrows, stat
     notes, captions). This is 4.7:1. */
  --ink-faint:    #6b7280;
  --rule:         #e0ddd6;
  --rule-strong:  #c9c5bb;

  --accent:       #1f4ed8;   /* civic blue */
  --on-accent:    #ffffff;   /* text that sits on --accent */
  --accent-soft:  #e8edfb;
  --accent-ink:   #163ba6;
  --warn:         #b4520a;   /* amber, for losses and gaps */
  --warn-soft:    #fdf0e4;
  --good:         #1c6b45;

  --series-1: #1f4ed8;
  --series-2: #b4520a;
  --series-3: #6b4bb8;
  --series-4: #1c6b45;

  --shadow: 0 1px 2px rgba(20,22,28,.05), 0 8px 24px -12px rgba(20,22,28,.18);

  --measure: 34rem;
  --wide:    72rem;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  /* Monospace carries identifiers, queries and readouts. It is the main
     signal that this is an instrument rather than an article. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --step: clamp(.25rem, .8vw, .5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #14161a;
    --paper-raised: #1b1e24;
    --paper-sunken: #101216;
    --ink:          #eceef2;
    --ink-soft:     #b3b9c4;
    --ink-faint:    #848b98;
    --rule:         #2b2f37;
    --rule-strong:  #3b414b;

    --accent:       #7fa2ff;
    --on-accent:    #10131a;
    --accent-soft:  #1b2540;
    --accent-ink:   #a8c0ff;
    --warn:         #f0954a;
    --warn-soft:    #33220f;
    --good:         #5cc596;

    --series-1: #7fa2ff;
    --series-2: #f0954a;
    --series-3: #b79bf0;
    --series-4: #5cc596;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

/* The toggle stamps data-theme on :root and must win over the OS in both
   directions, so each theme is also written out explicitly. */
:root[data-theme="dark"] {
  --paper:        #14161a;
  --paper-raised: #1b1e24;
  --paper-sunken: #101216;
  --ink:          #eceef2;
  --ink-soft:     #b3b9c4;
  --ink-faint:    #848b98;
  --rule:         #2b2f37;
  --rule-strong:  #3b414b;
  --accent:       #7fa2ff;
  --on-accent:    #10131a;
  --accent-soft:  #1b2540;
  --accent-ink:   #a8c0ff;
  --warn:         #f0954a;
  --warn-soft:    #33220f;
  --good:         #5cc596;
  --series-1: #7fa2ff;
  --series-2: #f0954a;
  --series-3: #b79bf0;
  --series-4: #5cc596;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* ---- Base ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -.022em; font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 2.5em; }
h3 { font-size: 1.1rem; letter-spacing: -.01em; margin-top: 2em; }

p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---- Layout ----------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }
.prose { max-width: var(--measure); }

/* .prose on the same element as .wrap would shrink the wrap to the reading
   measure, and the wrap's auto margins would then centre the whole column
   away from the page's left edge. Keep the wrap full width and constrain
   its children instead. */
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: var(--measure); }
main { padding-bottom: 5rem; }

/* ---- Masthead --------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(180%) blur(12px);
}
.masthead-inner {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .7rem 0; flex-wrap: wrap;
}
.wordmark {
  font-weight: 700; letter-spacing: -.03em; font-size: 1.1rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark span { color: var(--accent); }

.nav { display: flex; gap: .15rem; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a {
  color: var(--ink-soft); text-decoration: none;
  padding: .35rem .6rem; border-radius: 6px;
  font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.nav a:hover { background: var(--paper-sunken); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

.theme-toggle {
  background: none; border: 1px solid var(--rule); color: var(--ink-soft);
  border-radius: 6px; cursor: pointer; padding: .3rem .5rem;
  font: inherit; font-size: .85rem; line-height: 1;
}
.theme-toggle:hover { border-color: var(--rule-strong); color: var(--ink); }

/* ---- Hero ------------------------------------------------------- */

.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 1rem; }
.hero .lede {
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  color: var(--ink-soft); max-width: 40rem; line-height: 1.5;
}
.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem;
}

.mono { font-family: var(--mono); font-size: .92em; }

/* ---- Console (landing) ------------------------------------------ */
/* Deliberately short: title, one sentence, then the input. The point of
   the page is the box, so nothing competes with it above the fold. */

.console { padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; }
.console-h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  letter-spacing: -.028em; margin-bottom: .5rem;
}
.console-sub {
  color: var(--ink-soft); max-width: 44rem;
  font-size: 1.02rem; margin-bottom: 1.75rem;
}
.statusline {
  color: var(--ink-faint); font-size: .8rem; margin: .9rem 0 0;
  max-width: none; letter-spacing: -.01em;
}

.section-label {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint);
  margin: 3rem 0 .3rem; border-bottom: 1px solid var(--rule);
  padding-bottom: .5rem;
}
.hint { font-size: .88rem; color: var(--ink-faint); margin: .6rem 0 1rem; }

/* ---- Search ------------------------------------------------------ */

.search-shell { position: relative; max-width: 42rem; }
.scope-tabs { display: flex; gap: .25rem; margin-bottom: .5rem; }
.scope-tabs button {
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: .3rem .8rem; border-radius: 6px;
  border: 1px solid var(--rule); background: var(--paper-raised);
  color: var(--ink-faint); cursor: pointer;
}
/* --accent is a deep blue in light mode and a pale blue in dark, so the
   text that sits on it has to flip too. White on the dark-mode accent
   measures 2.5:1, which fails. --on-accent carries the correct pairing. */
.scope-tabs button[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.scope-tabs button:hover[aria-selected="false"] { color: var(--ink); border-color: var(--rule-strong); }

/* Sans, not mono: you type into this, and a monospace field reads as a
   command line. Mono is for readouts, not for input. */
.search-row input[type="search"] {
  width: 100%; max-width: none;
  font-size: 1.05rem; padding: .7rem .9rem;
  border: 1.5px solid var(--rule-strong); border-radius: 9px;
}
.search-row input[type="search"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.results .r-name { font-weight: 500; }
.results .meta { color: var(--ink-faint); font-size: .8rem; white-space: nowrap; }

/* ---- Controls ---------------------------------------------------- */
/* A visible control strip is most of what separates a tool from a page.
   Query state belongs on screen, not buried in the pipeline. */

.controls {
  display: flex; flex-wrap: wrap; gap: .9rem;
  padding: .9rem 1rem; margin: 1.25rem 0 1rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: 9px;
}
.control { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 10rem; min-width: 0; }
.control label {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}
.control select { width: 100%; }

.entity-head { margin-bottom: 1.25rem; }
.entity-head .kind {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .25rem;
}
.entity-head h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: .3rem;
}

/* ---- Result cards ------------------------------------------------ */
/* A result, not a query. Scope tag, what it is about, the number, then
   what the number means. No syntax: there is no query language here, and
   implying one would send a technical reader looking for a box that does
   not exist. */

.query-grid {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.result-card {
  display: flex; flex-direction: column; gap: .28rem; height: 100%;
  padding: .95rem 1.1rem; text-decoration: none; color: inherit;
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong);
  border-radius: 0 8px 8px 0;
  transition: border-left-color .12s ease, background .12s ease;
}
.result-card:hover { border-left-color: var(--accent); background: var(--paper-sunken); }
.result-card .tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* Titles and agencies are set as the payroll writes them, in caps. That is
   the record's own spelling, not styling. */
.result-card .entity {
  font-size: .88rem; font-weight: 600; color: var(--ink);
  line-height: 1.3; overflow-wrap: anywhere;
}
.result-card .value {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.05; color: var(--ink); margin-top: .1rem;
}
.result-card .meaning {
  font-size: .86rem; color: var(--ink-soft); line-height: 1.4;
}
.result-card.small .entity { font-size: 1rem; }
.result-card.small .meaning { font-size: .84rem; }

/* ---- Stat tiles ------------------------------------------------- */

/* Hairlines come from a box-shadow on each tile rather than a 1px grid gap
   over a coloured container. The gap trick leaves a bare rectangle of
   container colour wherever the last row is short of a full set, which
   happens at any width where the tile count does not divide evenly.
   box-shadow takes no space and is clipped at the rounded corner. */
.stats {
  display: grid; gap: 0;
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin: 2rem 0;
}
.stat {
  padding: 1.1rem 1.2rem;
  box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule);
}
.stat dt {
  font-size: .78rem; color: var(--ink-faint); font-weight: 600;
  letter-spacing: .01em; margin-bottom: .3rem;
}
.stat dd {
  margin: 0; font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
}
.stat .note { font-size: .8rem; color: var(--ink-faint); font-weight: 400; letter-spacing: 0; }
.stat dd.up   { color: var(--good); }
.stat dd.down { color: var(--warn); }

/* ---- Figures and cards ------------------------------------------ */

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

figure { margin: 2rem 0; }

/* The caption under a chart is usually the actual finding, so it is set at
   reading size in body ink rather than as a footnote. The qualifying half
   (what the number cannot tell you) drops to footnote treatment inside
   .qual, which keeps the result and its caveat visibly different things. */
figcaption {
  font-size: 1rem; line-height: 1.5; color: var(--ink-soft);
  margin-top: .85rem; max-width: 46rem;
}
figcaption strong { color: var(--ink); font-weight: 700; }
figcaption .qual {
  display: block; margin-top: .45rem;
  font-size: .85rem; color: var(--ink-faint);
}

.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; }

.chart .grid line { stroke: var(--rule); stroke-width: 1; }
.chart .axis text { fill: var(--ink-faint); font-size: 12px; }
.chart .axis .axis-line { stroke: var(--rule-strong); }
.chart .series-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-area { opacity: .1; }
.chart .dot { stroke: var(--paper-raised); stroke-width: 1.5; }
.chart .bar { }
.chart .label { fill: var(--ink); font-size: 12px; }
.chart .value-label { fill: var(--ink-soft); font-size: 11.5px; font-weight: 600; }

.legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .5rem 0 0; font-size: .85rem; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-soft); }
.legend i { width: 1.1rem; height: 3px; border-radius: 2px; display: inline-block; }

/* ---- Tables ----------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-raised);
}
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: .55rem .8rem; text-align: left; white-space: nowrap; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--rule-strong);
  font-size: .78rem; letter-spacing: .02em; color: var(--ink-soft);
  font-weight: 700;
}
tbody tr + tr td { border-top: 1px solid var(--rule); }
tbody tr:hover td { background: var(--paper-sunken); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.name { white-space: normal; min-width: 15rem; }

th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable::after { content: "\2195"; opacity: .3; margin-left: .35rem; font-size: .9em; }
th[aria-sort="ascending"]::after  { content: "\2191"; opacity: 1; }
th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; }

.table-tools {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  margin-bottom: .75rem;
}
input[type="search"], input[type="text"], select {
  font: inherit; font-size: .92rem;
  padding: .45rem .7rem;
  border: 1px solid var(--rule-strong); border-radius: 7px;
  background: var(--paper-raised); color: var(--ink);
  min-width: 0;
}
input[type="search"] { flex: 1 1 16rem; max-width: 26rem; }
.count { font-size: .85rem; color: var(--ink-faint); }

.neg { color: var(--warn); }
.pos { color: var(--good); }
.muted { color: var(--ink-faint); }

code {
  font-family: var(--mono); font-size: .9em;
  background: var(--paper-sunken); padding: .1em .35em;
  border-radius: 4px; border: 1px solid var(--rule);
}
.code-block {
  background: var(--paper-sunken); border: 1px solid var(--rule);
  border-radius: 8px; padding: .9rem 1rem; overflow-x: auto;
  max-width: var(--measure);
}
.code-block code { background: none; border: 0; padding: 0; }

/* ---- Notes ------------------------------------------------------ */

/* Methodology notes sit next to the numbers, never only in About. */
.note-box {
  border-left: 3px solid var(--rule-strong);
  background: var(--paper-sunken);
  padding: .85rem 1rem;
  border-radius: 0 8px 8px 0;
  font-size: .89rem;
  color: var(--ink-soft);
  margin: 1.5rem 0;
  max-width: 44rem;
}
.note-box strong { color: var(--ink); }
.note-box.caution { border-left-color: var(--warn); background: var(--warn-soft); }
.note-box p:last-child { margin-bottom: 0; }

/* ---- Chapter index ---------------------------------------------- */

.chapters {
  display: grid; gap: 1rem; margin: 2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  padding: 0; list-style: none;
}
.chapters a {
  display: block; height: 100%;
  background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.chapters a:hover { border-color: var(--accent); transform: translateY(-2px); }
.chapters h3 { margin: 0 0 .3rem; font-size: 1.02rem; color: var(--ink); }
.chapters p { margin: 0; font-size: .89rem; color: var(--ink-soft); max-width: none; }

/* ---- Explorer --------------------------------------------------- */

.search-shell { position: relative; max-width: 34rem; }
.results {
  list-style: none; margin: .3rem 0 0; padding: 0;
  border: 1px solid var(--rule); border-radius: 9px;
  background: var(--paper-raised); box-shadow: var(--shadow);
  max-height: 20rem; overflow-y: auto;
  position: absolute; width: 100%; z-index: 15;
}
.results:empty { display: none; }
.results li { border-bottom: 1px solid var(--rule); }
.results li:last-child { border-bottom: 0; }
.results button {
  width: 100%; text-align: left; background: none; border: 0;
  font: inherit; padding: .55rem .8rem; cursor: pointer; color: var(--ink);
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.results button:hover, .results li.active button { background: var(--accent-soft); }
.results .meta { color: var(--ink-faint); font-size: .82rem; white-space: nowrap; }

.pill-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; }
.pill {
  background: var(--paper-sunken); border: 1px solid var(--rule);
  border-radius: 999px; padding: .25rem .7rem; font-size: .84rem;
  color: var(--ink-soft); cursor: pointer; font-family: inherit;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }

.hidden { display: none !important; }

/* ---- Footer ----------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  margin-top: 4rem; padding: 2rem 0 3rem;
  font-size: .87rem; color: var(--ink-faint);
}
.footer p { max-width: 40rem; }
.footer a { color: var(--ink-soft); }
.footer a:hover { color: var(--accent); }
.footer-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.footer h4 {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-faint); margin: 0 0 .5rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .25rem; }

/* A small thing for anyone who reads the seams. */
.colophon { margin-top: 1.5rem; font-size: .82rem; }
.colophon .wink { cursor: help; border-bottom: 1px dotted var(--rule-strong); }

@media print {
  .masthead, .nav, .theme-toggle, .table-tools { display: none; }
  body { background: #fff; color: #000; }
  .card, .table-wrap { box-shadow: none; }
}