/* Shared styles for the paper site. No external dependencies. */

:root {
  --bg: #fdfdfd;
  --bg-soft: #f6f7f9;
  --bg-inset: #eceff3;
  --fg: #111;
  --fg-soft: #181818;
  --border: #dde1e7;
  --accent: #0D6EFD;
  --accent-soft: #0dcaf0;
  --warn: #dc3545;
  --warn-soft: #ffc107;
  /* The one box that asks for an action rather than explaining something.
     Aqua so it does not read as either a warning or an aside. */
  --aqua: #0b6b6b;
  --aqua-soft: #e2f6f6;
  --good: #198754;
  /* A value a protection altered: compared, and tagged to say so. Lime
     rather than the darker --good, which marks a randomised value that
     cannot be compared at all -- the two are next to each other in the
     Protected Attributes section and have to be told apart. */
  --prot: #198754
  --prot-soft: #f8f9fa;
  /* Commonness scale for measured values: >40% / 10-40% / <10%. */
  /* Diagonal stripe for a derived ("combined") metric. */
  --stripe: rgba(30, 34, 40, 0.16);
  --pop-good: #14663a;
  --pop-mid: #8a4f00;
  --pop-bad: #b3251d;
  /* Not in the published data at all -- rarer than the anonymity threshold
     and the most identifying result the page can report. Darker than
     --pop-bad so the two are distinguishable side by side. */
  --pop-none: #7a0d0d;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --radius: 8px;
  /* The measure is the content width of .wrap (62rem less its 1.25rem of
     padding either side), so the prose lines up with the metric sections
     rather than stopping two thirds of the way across them. */
  --measure: 59.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #181818;
    --bg-soft: #1b1f25;
    --bg-inset: #23282f;
    --fg: #e8e8e8;
    --fg-soft: #a7b0bc;
    --border: #2e343c;
    --accent: #6ba8f5;
    --accent-soft: #1d2a3d;
    --warn: #e0b070;
    --warn-soft: #2c2418;
    --aqua: #63cfcf;
    --aqua-soft: #14292b;
    --good: #63c98d;
    --prot: #a5d558;
    --prot-soft: #212b16;
    /* Dark on dark is invisible, so the stripe lightens in dark mode. */
    --stripe: rgba(190, 200, 215, 0.13);
    --pop-good: #5fca8b;
    --pop-mid: #e5a23c;
    --pop-bad: #f0847c;
    /* On dark, "darker" would recede rather than intensify, so this goes
       the other way: hotter and more saturated than --pop-bad. */
    --pop-none: #ff5449;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
}

.prose { max-width: var(--measure); }

/* ---------- Header / nav ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}

.site-header .wrap {
  padding: 0.85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: baseline;
  justify-content: space-between;
}

.site-title {
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--fg);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-size: 0.9rem;
}

.site-nav a { color: var(--fg-soft); text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }

/* ---------- Typography ---------- */

h1 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 2.5rem 0 0.75rem;
  max-width: 46rem;
}

h2 {
  font-size: 1.3rem;
  letter-spacing: -0.008em;
  margin: 2.75rem 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
  max-width: var(--measure);
}

h3 { font-size: 1.02rem; margin: 1.75rem 0 0.4rem; }

p { margin: 0 0 1rem; }

a { color: var(--accent); }

.lede {
  font-size: 1.12rem;
  color: var(--fg);
  max-width: var(--measure);
}

/* The one-paragraph "what is this site" note between the byline and the
   lede. Italic and ruled off on both sides so it reads as a preface about
   the site rather than as the start of the paper's argument. */
.site-intro {
  font-style: italic;
  color: var(--fg-soft);
  max-width: var(--measure);
  margin: 0 0 1.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.byline {
  color: var(--fg-soft);
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
  max-width: var(--measure);
}

.venue { color: var(--fg-soft); font-size: 0.88rem; margin: 0 0 1.75rem; }

code, kbd, samp, pre { font-family: var(--mono); font-size: 0.875em; }

code {
  background: var(--bg-inset);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

pre {
  background: var(--bg-inset);
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
  line-height: 1.5;
}

pre code { background: none; padding: 0; }

/* A command to copy, inside a callout: tighter than a standalone block,
   because the paragraph above it is the sentence it belongs to. */
.caveat-cmd {
  margin: 0.7rem 0;
  max-width: var(--measure);
  padding: 0.7rem 0.85rem;
}

/* ---------- Buttons & links ---------- */

/* A button that reads as a link, because it does what a link does. Used by
   the test page's hints and by the download page's copy buttons. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover { filter: brightness(1.15); }
.link-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0; }

.btn {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--fg);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover:not(:disabled) { filter: brightness(1.1); color: #fff; }

/* ---------- Cards / callouts ---------- */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  background: var(--bg-soft);
  margin: 1.25rem 0;
}

.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.85rem 1.1rem;
  margin: 1.25rem 0;
  max-width: var(--measure);
  font-size: 0.94rem;
}

.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }

/* Not a warning: the value in this row is the protection's, which is the
   value worth comparing. Same lime as the tag in the row's title, so the
   tag and its explanation are visibly the same thing. */
.callout.protected-value {
  border-left-color: var(--prot);
  background: var(--prot-soft);
}

/* The next step. Distinct from both the warning box and the explanatory
   ones, because it is the only thing on the page asking to be acted on,
   and rows point at it from a long way up the page. */
.callout.next-step {
  border-left-color: var(--aqua);
  background: var(--aqua-soft);
}
/* Flashed when a row's hint scrolls the reader here, so the landing is
   not silent. */
.callout.next-step.is-flagged {
  box-shadow: 0 0 0 2px var(--aqua);
  transition: box-shadow 0.2s ease-in;
}
.callout p:last-child { margin-bottom: 0; }

/* The combined browser-comparability box: a title, then one section per
   thing the visitor could address. The box is centred in the page and
   narrower than the results it sits among, so it reads as an aside about
   the whole page rather than as part of the list. Its text stays
   left-aligned -- it is prose and has to be read. */
/* Both boxes: the warning one above the results and the version note
   under them. */
#caveats > .callout, #version-note > .callout {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* Spaced off the last row, and off the notes that follow it. */
#version-note > .callout { margin-top: 2.5rem; }

.caveat-title {
  font-size: 1.02rem;
  line-height: 1.35;
  margin: 0 0 0.6rem;
}
.caveat-item {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.caveat-item ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* Hand-drawn flow diagram. Colours come from the theme variables so it
   follows light and dark without a second copy; inline SVG inherits
   custom properties from the document. */
.flow-figure {
  margin: 1.5rem 0;
  max-width: var(--measure);
  /* The drawing is narrower than the measure, so it is centred inside it
     rather than left against the text. */
  text-align: center;
}
/* Capped rather than stretched: the measure is now as wide as the metric
   sections, and the drawing has a natural size well under that. */
.flow-figure svg {
  display: block;
  width: 100%;
  max-width: 42rem;
  height: auto;
  margin: 0 auto;
}
.flow-group {
  fill: var(--bg-soft);
  stroke: var(--border);
  stroke-dasharray: 5 4;
}
.flow-box {
  fill: var(--bg-inset);
  stroke: var(--border);
}
.flow-box-out {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.flow-label {
  fill: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  text-anchor: middle;
}
.flow-line {
  fill: none;
  stroke: var(--fg-soft);
  stroke-width: 1.5;
}
.flow-arrow { marker-end: url(#flow-head); }
#flow-head path { fill: var(--fg-soft); }
.caveat-item li { margin-bottom: 0.2rem; }

/* A claim and the case for it, nine times over. The term carries the
   weight and spacing the <h3> it replaced had, and the definition is
   indented under it: the indent is what makes the pairing visible, and
   without it a <dl> reads as the run of headings this used to be.
   Written out rather than left to the browser's 40px default so it scales
   with the text and cannot vary by engine. */
.findings-list { margin: 1.5rem 0 0; max-width: var(--measure); }

.findings-list dt {
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.35;
  margin: 1.75rem 0 0.4rem;
}

.findings-list dt:first-of-type { margin-top: 0; }

.findings-list dd { margin: 0 0 0 2.5rem; }
.findings-list dd > p:last-child { margin-bottom: 0; }

/* The front page's one figure. Full bleed to the prose column, with the
   caption doing the work the four stat tiles used to: it carries the
   population size and the characteristic count. */
.hero-figure { margin: 1.5rem 0 2rem; }

.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.hero-figure figcaption {
  margin-top: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: var(--measure, 42rem);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.5rem 0 2rem;
}

.stat { background: var(--bg-soft); padding: 0.9rem 1rem; }
.stat dt { color: var(--fg-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.stat dd { margin: 0.2rem 0 0; font-size: 1.35rem; font-weight: 620; font-variant-numeric: tabular-nums; }

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

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0.75rem 0 1.25rem;
}

.data-table th, .data-table td {
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.data-table th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--fg-soft);
  font-weight: 600;
  white-space: nowrap;
}

.data-table td.num, .data-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.data-table td.mono { font-family: var(--mono); font-size: 0.82rem; word-break: break-all; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tr.is-you { background: var(--accent-soft); }
.data-table tr.is-you td { font-weight: 600; }

.table-scroll { overflow-x: auto; }

/* ---------- Footnotes ---------- */

.fn-ref {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  font-weight: 700;
  padding: 0 0.1em;
}

.footnotes {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--fg-soft);
  max-width: var(--measure);
}

.section-declined {
  max-width: var(--measure);
  margin: 1.2rem 0 0.6rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--border);
  font-size: 0.9rem;
  color: var(--fg-soft);
}

.test-tools {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  max-width: var(--measure);
}
.test-tools h2 { margin-bottom: 0.4rem; }
.test-tools p { margin-bottom: 1rem; }
.test-tools textarea {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--fg);
  font-family: var(--mono, monospace);
  font-size: 0.8rem;
  white-space: pre;
}

.footnotes ol { padding-left: 1.4rem; margin: 0; }
.footnotes li { margin-bottom: 0.6rem; }
.footnotes li:target { background: var(--accent-soft); border-radius: 4px; }

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding: 1.5rem 0 3rem;
  color: var(--fg-soft);
  font-size: 0.85rem;
}

/* ---------- Commonness scale ---------- */

.pop-good { color: var(--pop-good); font-weight: 600; }
.pop-mid  { color: var(--pop-mid);  font-weight: 600; }
.pop-bad  { color: var(--pop-bad);  font-weight: 600; }
.pop-none { color: var(--pop-none); font-weight: 700; }

/* The value chip itself, tinted to match. */
code.pop-good, code.pop-mid, code.pop-bad { font-weight: 600; }
code.pop-none { font-weight: 700; }

.pop-legend {
  font-size: 0.88rem;
  color: var(--fg-soft);
  margin: 0.75rem 0 0;
}

/* The sentence on its own line, then all four keys together on the next
   one, wrapping only if the window makes them. */
.pop-legend-intro { margin: 0 0 0.35rem; }
.pop-legend ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
}
.pop-legend li { margin: 0; white-space: nowrap; }

.pop-legend .swatch {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  border-radius: 2px;
  margin-right: 0.3em;
  vertical-align: baseline;
}

.swatch-good { background: var(--pop-good); }
.swatch-mid  { background: var(--pop-mid); }
.swatch-bad  { background: var(--pop-bad); }
.swatch-none { background: var(--pop-none); }

.muted { color: var(--fg-soft); }
.faint { color: var(--fg-soft); }
.nowrap { white-space: nowrap; }