/* =============================================================================
   linkbuilding.wiki — production stylesheet
   Brand identity: "Folio" (design/concepts/folio/tokens.css), the concept the
   owner selected. A modern encyclopedia: cool-white canvas, graphite ink, a
   single oxblood accent, transitional serif titles, tabular figures.

   Fonts are NOT self-hosted. scripts/build.py copies only static/site.css into
   the build output, so a font file placed in static/ would never be served, and
   no OFL files ship in this tree. The Folio family stacks are therefore kept
   verbatim with their local fallbacks (Nimbus Roman / Nimbus Sans / Nimbus Mono
   PS), which is how the concept itself degrades.

   One light mode, per docs/build-runbook.md. Layouts: mobile <48rem,
   tablet 48-74rem, desktop >=74rem. Supported minimum viewport 320px.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Type families (verbatim from the Folio tokens) --------------------- */
  --font-serif: "Source Serif 4", "Newsreader", "Nimbus Roman", "Times New Roman", Times, serif;
  --font-sans:  "Source Sans 3", "IBM Plex Sans", "Nimbus Sans", Helvetica, Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", "Nimbus Mono PS", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Type scale (root 16px) -------------------------------------------- */
  --fs-100: 0.6875rem;
  --fs-200: 0.75rem;
  --fs-300: 0.8125rem;
  --fs-400: 0.875rem;
  --fs-500: 0.9375rem;
  --fs-600: 1rem;
  --fs-700: 1.0625rem;
  --fs-800: 1.25rem;
  --fs-900: 1.5rem;
  --fs-1000: 1.875rem;
  --fs-1100: 2.375rem;
  --fs-1200: 3rem;

  --lh-solid: 1;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-read: 1.65;
  --lh-loose: 1.75;

  --tr-tight: -0.011em;
  --tr-none: 0em;
  --tr-caps: 0.09em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Space scale (4px base) -------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* --- Layout ------------------------------------------------------------- */
  /* One column carries the copy, the lists and the tables at the same width;
     the reading measure is set by the column, never by capping the text inside
     it. --content-max only binds below the desktop breakpoint, where there is
     no aside to take the surplus width. */
  --content-max: 45rem;
  --rail-w: 13rem;
  --aside-w: 20rem;
  --gutter: 2.5rem;
  --page-max: 84rem;
  --sticky-top: var(--sp-6);

  /* --- Shape -------------------------------------------------------------- */
  --radius-1: 2px;
  --radius-2: 3px;
  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-accent: 3px;
  --focus-ring: 2px;
  --focus-offset: 2px;

  /* --- Score components --------------------------------------------------- */
  /* Production <meter> is bound min=0 max=4, so the band track carries four
     segments — one per band point — rather than the concept's five. */
  --meter-h: 0.5rem;
  --meter-gap: 3px;
  --meter-seg: 25%;
  --coverage-h: 0.625rem;
  --coverage-gap: 2px;
  --coverage-threshold: 70%;  /* SOP v1.0: ranked at coverage >= 70 */

  /* --- Light palette ------------------------------------------------------ */
  --canvas: #F7F8FA;
  --surface: #FFFFFF;
  --sunken: #EEF0F4;
  --tint: #F6EAEB;

  --ink: #1C1F24;
  --ink-strong: #0E1116;
  --ink-muted: #545C68;
  --ink-invert: #F7F8FA;
  --header-bg: #0E1116;
  --header-fg: #F7F8FA;

  --accent: #7A1C24;
  --accent-strong: #5E1219;
  --accent-tint: #F6EAEB;
  --visited: #5A2F40;

  --rule: #D3D8E0;
  --rule-strong: #B4BCC8;
  --edge-control: #79818E;

  --meter-empty: #E4E8EE;
  --meter-fill: #1C1F24;
  --meter-fill-lead: #7A1C24;
  --meter-unobserved: #79818E;

  --focus-color: #7A1C24;
  --selection-bg: #F6EAEB;
}

/* ========================== Base ========================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--sp-4); }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-600);
  line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selection-bg); }

a { color: var(--accent); text-underline-offset: .16em; text-decoration-thickness: from-font; }
a:hover { color: var(--accent-strong); text-decoration-thickness: .12em; }
a:visited { color: var(--visited); }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-1);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
h1 {
  font-size: clamp(var(--fs-1000), 4vw, var(--fs-1100));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: var(--bw-hair) solid var(--rule-strong);
}
/* When a meta line follows, it carries the rule instead (Folio subtitle). */
h1:has(+ .dates) { padding-bottom: 0; border-bottom: 0; margin-bottom: var(--sp-2); }
h2 { font-size: var(--fs-1000); margin: var(--sp-10) 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: var(--bw-hair) solid var(--rule-strong); }
h3 { font-size: var(--fs-900); margin: var(--sp-6) 0 var(--sp-3); }
h4 { font-size: var(--fs-800); margin: var(--sp-5) 0 var(--sp-2); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }
pre { overflow: auto; background: var(--sunken); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-2); }
img { max-width: 100%; }
hr { border: 0; border-top: var(--bw-hair) solid var(--rule); margin: var(--sp-8) 0; }
blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-2) var(--sp-5);
  border-left: var(--bw-accent) solid var(--accent);
  color: var(--ink-strong);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--sp-4); top: -6rem; z-index: 5;
  background: var(--surface); color: var(--ink-strong);
  border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--radius-2);
  padding: var(--sp-2) var(--sp-4); font-weight: var(--fw-semibold);
}
.skip:focus { top: var(--sp-2); }

/* ========================== Masthead ====================================== */
.masthead { background: var(--surface); border-bottom: var(--bw-hair) solid var(--rule-strong); }
.masthead-in {
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--sp-4) var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); align-items: baseline;
}
.wordmark { display: block; text-decoration: none; }
.wordmark .lockup { display: block; width: 15.5rem; max-width: 100%; height: auto; }
.wordmark:focus-visible { outline-offset: 4px; }
/* The lockup is a brand asset: it recolours with the palette, never with data. */
.lockup .lbw-rule, .lockup .lbw-word path { fill: var(--ink); }
.lockup .lbw-rule--head { fill: var(--accent); }

.tagline { font-size: var(--fs-400); color: var(--ink-muted); line-height: var(--lh-snug); }

/* ========================== Page shell ==================================== */
.wiki-layout { max-width: var(--page-max); margin-inline: auto; }

.rail {
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-4); font-size: var(--fs-400);
}
.rail a {
  display: block; padding: var(--sp-1) var(--sp-2);
  color: var(--ink); text-decoration: none;
  border-radius: var(--radius-1); line-height: var(--lh-snug);
}
.rail a:hover { color: var(--accent-strong); background: var(--sunken); }

main { background: var(--surface); min-width: 0; padding: var(--sp-4); }

/* ========================== Tabs ========================================== */
.tabs {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 0 var(--sp-5);
  border-bottom: var(--bw-hair) solid var(--rule-strong);
}
.tabs a {
  display: block; padding: var(--sp-2) var(--sp-1) var(--sp-3);
  text-decoration: none; color: var(--ink-muted);
  font-size: var(--fs-400); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase;
  border-bottom: var(--bw-rule) solid transparent; margin-bottom: calc(-1 * var(--bw-hair));
}
.tabs a:hover { color: var(--accent-strong); border-bottom-color: var(--rule-strong); }
.tabs [aria-current] { color: var(--ink-strong); border-bottom-color: var(--ink-strong); }

/* ========================== Article ======================================= */
.dates {
  font-size: var(--fs-300); color: var(--ink-muted);
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: var(--bw-hair) solid var(--rule-strong);
}
.article-copy { min-width: 0; }
.article-copy > p { font-size: var(--fs-700); line-height: var(--lh-read); margin: var(--sp-4) 0; }
.article-copy > ul, .article-copy > ol { font-size: var(--fs-700); line-height: var(--lh-read); padding-left: var(--sp-5); }
.article-copy > ul li, .article-copy > ol li { margin: var(--sp-2) 0; }
/* Long provider and ranking articles: more air between sections at full width. */
.article-copy > h2 { margin-top: var(--sp-12); }
.article-copy > table { width: 100%; margin: var(--sp-6) 0; }

/* Questions and answers. `### ` headings occur only inside the
   "Frequently asked questions" section of an article, so the question/answer
   pair can be styled without a wrapper the Markdown does not carry. */
.article-copy h3 {
  font-family: var(--font-sans); font-size: var(--fs-700); font-weight: var(--fw-semibold);
  line-height: var(--lh-snug); color: var(--ink-strong);
  margin: var(--sp-6) 0 0; padding-left: var(--sp-4);
  border-left: var(--bw-accent) solid var(--accent);
}
.article-copy h3 + p {
  font-size: var(--fs-600); line-height: var(--lh-read); color: var(--ink);
  margin: var(--sp-2) 0 var(--sp-5); padding-left: var(--sp-4);
  border-left: var(--bw-hair) solid var(--rule);
}

/* Lead paragraphs (ranking pages, homepage) match article body copy so every page reads the same. */
.lead, .article-lead p {
  font-family: var(--font-sans); font-size: var(--fs-700); line-height: var(--lh-read);
  color: var(--ink); margin: var(--sp-4) 0;
}

/* Contents box */
.toc-box {
  background: var(--sunken);
  border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--radius-2);
  padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-6);
  font-size: var(--fs-400);
}
/* Contents is collapsed by default so the score box and the copy are never pushed
   out of view; when opened it scrolls inside itself. */
.toc-box > summary {
  cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-200);
  font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); padding: var(--sp-1) 0; list-style: none;
}
.toc-box > summary::-webkit-details-marker { display: none; }
.toc-box > summary::before { content: "▸ "; }
.toc-box[open] > summary::before { content: "▾ "; }
.toc-box[open] > summary { margin-bottom: var(--sp-2); border-bottom: var(--bw-hair) solid var(--rule); }
.toc-box > .toc { max-height: 40vh; overflow: auto; }
.toc-box ul { padding-left: var(--sp-5); margin: var(--sp-1) 0; list-style: none; counter-reset: toc; }
.toc-box li { counter-increment: toc; margin: var(--sp-1) 0; line-height: var(--lh-snug); }
.toc-box li::before {
  content: counter(toc) ". "; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; margin-left: calc(-1 * var(--sp-5));
  display: inline-block; width: var(--sp-5);
}
.toc-box a { color: var(--ink); text-decoration: none; }
.toc-box a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ========================== Article shell ================================= */
/* Every content surface uses the same two-part shell: one column for the copy,
   the lists and the tables, and one aside for the contents box, the infobox or
   the round facts. Nothing in the copy column is narrower than the tables. */
.article-layout { min-width: 0; }
.article-main, .article-aside { min-width: 0; }
.article-lead, .article-main, .article-copy, .article-aside { max-width: var(--content-max); }
.article-aside > * + * { margin-top: var(--sp-6); }
.article-main > .article-copy { max-width: none; }

/* ========================== Infobox ======================================= */
.infobox {
  background: var(--surface);
  border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--radius-2);
  padding: var(--sp-4); min-width: 0; margin-bottom: var(--sp-6);
  font-size: var(--fs-300); line-height: var(--lh-snug);
}
.infobox > h2:first-child {
  background: var(--header-bg); color: var(--header-fg);
  font-size: var(--fs-800); line-height: var(--lh-snug);
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 0; border-radius: var(--radius-2) var(--radius-2) 0 0;
}
.infobox h3 {
  font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-muted);
  margin: var(--sp-5) 0 var(--sp-2);
  padding-top: var(--sp-4); border-top: var(--bw-hair) solid var(--rule);
}
.infobox dl { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr; gap: var(--sp-2) var(--sp-3); margin: 0; }
.infobox dd { overflow-wrap: anywhere; }
.infobox > p { margin: var(--sp-3) 0; }
.infobox ul { margin: var(--sp-2) 0; padding-left: var(--sp-5); }
.infobox li { margin: var(--sp-1) 0; }
.infobox > a { display: inline-block; margin-top: var(--sp-3); font-weight: var(--fw-semibold); }
dl { margin: 0; }
dt { color: var(--ink-muted); }
dd { margin: 0 0 var(--sp-2); }
.infobox dd { margin-bottom: 0; }

/* PES badge */
.pes-badge {
  display: flex; align-items: baseline; gap: var(--sp-3);
  background: var(--surface);
  border: var(--bw-hair) solid var(--rule-strong);
  border-left: var(--bw-accent) solid var(--accent);
  border-radius: var(--radius-2);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-3);
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-muted);
}
.pes-badge strong {
  margin-left: auto;
  font-family: var(--font-serif); font-size: var(--fs-1100); line-height: var(--lh-solid);
  font-weight: var(--fw-semibold); letter-spacing: var(--tr-none); color: var(--ink-strong);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Evidence coverage: ten segments of ten weight points, marked at 70. */
.coverage-block { margin: var(--sp-3) 0 var(--sp-4); }
.coverage {
  position: relative; height: var(--coverage-h);
  background: var(--meter-empty); border-radius: var(--radius-1);
  box-shadow: inset 0 0 0 1px var(--edge-control);
}
.coverage > span {
  display: block; height: 100%; background: var(--meter-fill);
  border-radius: var(--radius-1) 0 0 var(--radius-1);
}
.coverage--unranked > span { background: var(--edge-control); }
.coverage::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  border-radius: var(--radius-1);
  background: repeating-linear-gradient(to right,
    transparent 0 calc(10% - var(--coverage-gap)),
    var(--surface) calc(10% - var(--coverage-gap)) 10%);
}
.coverage::before {
  content: ''; position: absolute; z-index: 2;
  left: var(--coverage-threshold); top: -5px; bottom: -5px;
  width: 2px; margin-left: -1px;
  background: var(--accent); border-radius: 1px;
}
.coverage-scale {
  position: relative; display: flex; justify-content: space-between;
  margin: var(--sp-2) 0 0; font-size: var(--fs-100); color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.coverage-scale .threshold {
  position: absolute; left: var(--coverage-threshold); transform: translateX(-50%);
  color: var(--accent); font-weight: var(--fw-semibold);
}

/* Criterion bands: label / meter / value */
.criterion {
  display: grid; grid-template-columns: minmax(0, 1fr) 4.75rem 2.5rem;
  gap: var(--sp-1) var(--sp-3); align-items: center;
  padding: var(--sp-2) 0; border-bottom: var(--bw-hair) solid var(--rule);
  font-size: var(--fs-300); line-height: var(--lh-snug);
}
.criterion:last-of-type { border-bottom: 0; }
.criterion > span:last-child { text-align: right; font-variant-numeric: tabular-nums lining-nums; color: var(--ink-muted); }
.criterion .band-off { grid-column: 2 / -1; text-align: right; font-style: italic; color: var(--ink-muted); }

.band-meter { position: relative; display: block; height: var(--meter-h); }
.band-meter::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to right,
    transparent 0 calc(var(--meter-seg) - var(--meter-gap)),
    var(--surface) calc(var(--meter-seg) - var(--meter-gap)) var(--meter-seg));
}
meter {
  display: block; width: 100%; height: var(--meter-h);
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--meter-empty); border: 0; border-radius: var(--radius-1);
  box-shadow: inset 0 0 0 1px var(--edge-control);
}
meter::-webkit-meter-bar {
  background: var(--meter-empty); border: 0; border-radius: var(--radius-1);
  height: var(--meter-h); box-shadow: inset 0 0 0 1px var(--edge-control);
}
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
  background: var(--meter-fill); border-radius: var(--radius-1) 0 0 var(--radius-1);
}
meter::-moz-meter-bar { background: var(--meter-fill); border-radius: var(--radius-1) 0 0 var(--radius-1); }

/* ========================== Tables ======================================== */
.table-scroll { overflow-x: auto; max-width: 100%; margin: var(--sp-6) 0; }
.table-scroll:focus-visible { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--focus-offset); }
/* Column floors by column count: a data table scrolls inside its region rather
   than crushing its columns when the viewport is narrower than it reads well. */
.table-scroll > table:has(thead th:nth-child(3)) { min-width: 28rem; }
.table-scroll > table:has(thead th:nth-child(4)) { min-width: 34rem; }
.table-scroll > table:has(thead th:nth-child(6)) { min-width: 40rem; }
table {
  border-collapse: collapse; width: 100%;
  background: var(--surface); font-size: var(--fs-500);
  border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--radius-2);
  font-variant-numeric: tabular-nums lining-nums;
}
caption {
  caption-side: top; text-align: left;
  font-size: var(--fs-300); color: var(--ink-muted);
  padding-bottom: var(--sp-2);
}
th, td {
  padding: var(--sp-3); text-align: left; vertical-align: middle;
  border-bottom: var(--bw-hair) solid var(--rule); line-height: var(--lh-snug);
}
thead th {
  background: var(--sunken); color: var(--ink-muted);
  font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; white-space: nowrap;
  border-bottom: var(--bw-hair) solid var(--rule-strong);
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th[scope="row"] { font-weight: var(--fw-semibold); color: var(--ink-strong); }
[data-score], .tabular { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
td[data-score="rank"] {
  font-family: var(--font-serif); font-size: var(--fs-800); color: var(--ink-strong);
  width: 1px; padding-right: var(--sp-5);
}
td.rank-lead { color: var(--accent); }
tbody tr:has(td.rank-lead) { background: var(--tint); }

/* ========================== Citations and references ====================== */
.citation { font-size: .72em; line-height: 0; vertical-align: .42em; white-space: nowrap; }
.citation a { text-decoration: none; font-variant-numeric: lining-nums; }
.citation a::before { content: "["; }
.citation a::after { content: "]"; }
.citation a:hover { text-decoration: underline; }

/* An article carries 20–90 sources, so the list is an apparatus, not a section: collapsed by
   default, small type, one entry per line, no URL strings wrapping down the page. The citation
   superscripts still resolve into it — base.html opens the details before the jump. */
details.references {
  margin-top: var(--sp-12); padding: var(--sp-2) var(--sp-4) var(--sp-3);
}
details.references[open] { padding-bottom: var(--sp-4); }
.references > summary { padding: var(--sp-2) 0; }
.references[open] > summary {
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-2);
  border-bottom: var(--bw-hair) solid var(--rule);
}
.references ol { padding-left: 2.2em; margin: 0; column-gap: var(--sp-8); }
.references li {
  padding: var(--sp-1) 0; break-inside: avoid;
  font-size: var(--fs-300); line-height: var(--lh-snug); color: var(--ink-muted);
}
.references li::marker { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.references li a { font-weight: var(--fw-medium); }
.ref-accessed { white-space: nowrap; }

/* ========================== Footer furniture ============================== */
details {
  background: var(--sunken);
  border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--radius-2);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-6); font-size: var(--fs-400);
}
summary {
  cursor: pointer; font-weight: var(--fw-semibold); color: var(--ink-strong);
  letter-spacing: var(--tr-caps); text-transform: uppercase; font-size: var(--fs-200);
}
details p { margin: var(--sp-3) 0 0; }

.categories {
  background: var(--sunken);
  border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--radius-2);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4);
  font-size: var(--fs-400); color: var(--ink-muted);
}
.categories a { margin-left: var(--sp-2); font-weight: var(--fw-semibold); }
.related {
  border-top: var(--bw-hair) solid var(--rule-strong);
  padding-top: var(--sp-3); margin-top: var(--sp-5);
  font-size: var(--fs-400); color: var(--ink-muted);
}
.related p { margin: 0 0 var(--sp-2); }
.related-label { font-weight: var(--fw-semibold); color: var(--ink-strong); }
.related a { margin-left: var(--sp-2); font-weight: var(--fw-semibold); }

footer.site-footer {
  border-top: var(--bw-hair) solid var(--rule-strong);
  background: var(--surface); margin-top: var(--sp-10);
}
.site-footer-in {
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--sp-6) var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); align-items: center;
  font-size: var(--fs-400); color: var(--ink-muted);
}
.footer-mark { display: block; width: 2.75rem; height: auto; color: var(--ink-muted); flex: none; }

/* ========================== Index and main page =========================== */
/* Reference panel: a bordered block that carries its own heading. */
.panel {
  background: var(--surface);
  border: var(--bw-hair) solid var(--rule-strong);
  border-left: var(--bw-accent) solid var(--rule-strong);
  border-radius: var(--radius-2);
  padding: var(--sp-5); margin: var(--sp-8) 0;
}
.panel > h2 {
  font-size: var(--fs-900); margin: 0 0 var(--sp-2);
  padding-bottom: 0; border-bottom: 0;
}
.panel > p { margin: 0; font-size: var(--fs-500); color: var(--ink-muted); line-height: var(--lh-normal); }

/* The eight evidence criteria, keyed as they are on the scorecards. */
.criteria-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0 var(--sp-6); margin: var(--sp-4) 0 0; padding: 0; list-style: none;
}
.criteria-list li {
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) 0; border-bottom: var(--bw-hair) solid var(--rule);
  font-size: var(--fs-400); line-height: var(--lh-snug);
}
.criteria-list .key {
  flex: none; width: 1.75rem;
  font-family: var(--font-mono); font-size: var(--fs-300);
  font-weight: var(--fw-semibold); color: var(--accent);
}

/* Concept index: a dense grid of article links, alphabetical. */
.concept-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0 var(--sp-6); margin: var(--sp-4) 0; padding: 0; list-style: none;
}
.concept-grid li {
  padding: var(--sp-2) 0; border-bottom: var(--bw-hair) solid var(--rule);
  font-size: var(--fs-400); line-height: var(--lh-snug);
}
.concept-grid a { font-weight: var(--fw-medium); }

/* Recent changes: a list in tabular dress — a fixed date column, then the
   article and the note on one row. */
.changes { list-style: none; margin: var(--sp-4) 0; padding: 0; }
.changes li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-1); border-bottom: var(--bw-hair) solid var(--rule);
  font-size: var(--fs-400); line-height: var(--lh-snug); color: var(--ink-muted);
}
.changes li:nth-child(odd) { background: var(--sunken); }
.changes li:last-child { border-bottom: 0; }
.changes time {
  flex: none; width: 6rem;
  font-family: var(--font-mono); font-size: var(--fs-300); color: var(--ink-muted);
}
.changes a { font-weight: var(--fw-semibold); }

/* ========================== Ranked first ================================== */
/* The leader block shares the summary box's frame; its copy runs at reading size. */
.leader-box {
  background: var(--surface);
  border: var(--bw-hair) solid var(--rule-strong);
  border-left: var(--bw-accent) solid var(--accent);
  border-radius: var(--radius-2);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-6) 0 0;
}
.leader-box > h2 {
  font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 var(--sp-3); padding-bottom: 0; border-bottom: 0;
}
.leader-box > h2 a { color: var(--ink-strong); text-decoration: none; }
.leader-box > h2 a:hover { text-decoration: underline; }
.leader-facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: var(--bw-hair) solid var(--rule);
  font-size: var(--fs-300); color: var(--ink-muted); font-variant-numeric: tabular-nums lining-nums;
}
.leader-facts b { font-weight: var(--fw-semibold); color: var(--ink-strong); }
.leader-copy p {
  margin: 0; font-size: var(--fs-600); line-height: var(--lh-read); color: var(--ink-strong);
}
.leader-copy p + p { margin-top: var(--sp-4); }
.leader-best-for {
  margin: var(--sp-4) 0 0;
  background: var(--accent-tint);
  border-left: var(--bw-accent) solid var(--accent);
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-600); line-height: var(--lh-normal); color: var(--ink-strong);
}
.leader-box + .summary-box { margin-top: var(--sp-4); }

/* ========================== Round summary ================================= */
.summary-box {
  background: var(--sunken);
  border: var(--bw-hair) solid var(--rule-strong);
  border-left: var(--bw-accent) solid var(--accent);
  border-radius: var(--radius-2);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-6) 0;
}
.summary-box > h2 {
  font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 var(--sp-3); padding-bottom: 0; border-bottom: 0;
}
.summary-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--sp-4) var(--sp-5); margin: 0;
}
.summary-facts dt {
  font-size: var(--fs-200); letter-spacing: var(--tr-caps); text-transform: uppercase;
  color: var(--ink-muted);
}
.summary-facts dd {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-serif); font-size: var(--fs-800); line-height: var(--lh-snug);
  color: var(--ink-strong); font-variant-numeric: tabular-nums lining-nums;
}
.summary-note {
  margin: var(--sp-4) 0 0; padding-top: var(--sp-3);
  border-top: var(--bw-hair) solid var(--rule);
  font-size: var(--fs-300); color: var(--ink-muted);
}

/* ========================== History and talk ============================== */
.history { list-style: none; margin: var(--sp-4) 0; padding: 0; }
.history li {
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  border-bottom: var(--bw-hair) solid var(--rule);
  border-left: var(--bw-rule) solid var(--rule);
  font-size: var(--fs-500); line-height: var(--lh-normal);
}
.history li:last-child { border-bottom: 0; }
.history li[data-editor] { border-left-color: var(--accent); }
.history li[data-editor="build"] { border-left-color: var(--rule-strong); color: var(--ink-muted); }
.history time { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--ink-muted); }

.talk-note {
  background: var(--surface);
  border: var(--bw-hair) solid var(--rule-strong);
  border-left: var(--bw-accent) solid var(--accent);
  border-radius: var(--radius-2);
  padding: var(--sp-4) var(--sp-5); margin: var(--sp-6) 0;
}
.talk-note h2 {
  font-size: var(--fs-800); margin: 0 0 var(--sp-2);
  padding: 0; border: 0;
}
.talk-note p { margin: var(--sp-2) 0 0; line-height: var(--lh-read); }
.talk-note p:first-of-type { font-size: var(--fs-300); color: var(--ink-muted); }

/* ========================== Editors ======================================= */
.editor-image {
  max-width: 100%; object-fit: cover; border-radius: var(--radius-2);
  border: var(--bw-hair) solid var(--rule-strong); margin-bottom: var(--sp-4);
}

/* ========================== Ranking extras ================================ */
.unranked { margin-top: var(--sp-10); }
.unranked ul { list-style: none; margin: var(--sp-4) 0; padding: 0; }
.unranked li {
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
  border-bottom: var(--bw-hair) solid var(--rule);
  border-left: var(--bw-rule) solid var(--edge-control);
  font-size: var(--fs-500); color: var(--ink-muted); line-height: var(--lh-normal);
}
.unranked li:last-child { border-bottom: 0; }

/* ========================== Provider listicle ============================= */
/* The ranked table carries the numbers; this section carries the reading. Each entry is a
   numbered write-up — position, name, the "Best for" judgement, the cited description, the
   pros/cons split and the "Use when" note. Blocks are optional: a provider with only a
   description renders as name + description and nothing else. */
.listicle { margin-top: var(--sp-10); }
.listicle-entry {
  position: relative;
  padding: var(--sp-6) 0 var(--sp-8);
  border-top: var(--bw-hair) solid var(--rule);
}
.listicle-entry:first-of-type { border-top: var(--bw-rule) solid var(--rule-strong); }
.listicle-entry:last-child { padding-bottom: var(--sp-4); }

.listicle-title {
  display: flex; align-items: baseline; gap: var(--sp-3);
  font-size: var(--fs-900); margin: 0;
}
.listicle-title a { text-decoration: none; }
.listicle-title a:hover { text-decoration: underline; }
.listicle-num {
  font-family: var(--font-serif); font-size: var(--fs-1000); line-height: var(--lh-solid);
  font-weight: var(--fw-semibold); color: var(--ink-strong);
  font-variant-numeric: tabular-nums lining-nums;
}
/* The leader is marked the same way the ranked table marks rank 1. */
.listicle-entry--lead .listicle-num { color: var(--accent); }

.listicle-best-for {
  margin: var(--sp-4) 0 0;
  background: var(--accent-tint);
  border-left: var(--bw-accent) solid var(--accent);
  border-radius: 0 var(--radius-2) var(--radius-2) 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-600); line-height: var(--lh-normal); color: var(--ink-strong);
}
.best-for-label {
  display: block;
  font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--sp-1);
}

.listicle-desc p { font-size: var(--fs-600); line-height: var(--lh-read); margin: var(--sp-4) 0 0; }

.proscons { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.proscons-col {
  background: var(--surface);
  border: var(--bw-hair) solid var(--rule);
  border-top: var(--bw-rule) solid var(--rule-strong);
  border-radius: var(--radius-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.proscons-col--pros { border-top-color: var(--accent); }
.proscons-col--cons { border-top-color: var(--edge-control); }
.proscons h4, .use-when h4 {
  font-family: var(--font-sans); font-size: var(--fs-200); font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-muted);
  margin: 0;
}
.proscons ul { list-style: none; margin: 0; padding: 0; }
.proscons li {
  position: relative; padding-left: var(--sp-5); margin-top: var(--sp-3);
  font-size: var(--fs-500); line-height: var(--lh-normal);
}
.proscons li::before {
  position: absolute; left: 0; top: 0;
  font-weight: var(--fw-bold); font-size: var(--fs-600); line-height: var(--lh-normal);
}
.proscons-col--pros li::before { content: "+"; color: var(--accent); }
.proscons-col--cons li::before { content: "\2212"; color: var(--edge-control); }

.use-when {
  margin-top: var(--sp-5); padding-left: var(--sp-4);
  border-left: var(--bw-hair) solid var(--rule-strong);
}
.use-when p { font-size: var(--fs-600); line-height: var(--lh-read); margin: var(--sp-2) 0 0; }

/* ========================== Other providers =============================== */
.other-providers { margin-top: var(--sp-10); }
.other-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.other-list li {
  padding: var(--sp-3) 0;
  border-bottom: var(--bw-hair) solid var(--rule);
  font-size: var(--fs-500); line-height: var(--lh-normal);
}
.other-list li:last-child { border-bottom: 0; }
.other-list a { font-weight: var(--fw-semibold); text-decoration: none; }
.other-list a:hover { text-decoration: underline; }
.other-note { color: var(--ink-muted); }

/* ========================== Breakpoints =================================== */
@media (min-width: 48rem) {
  .masthead-in, .site-footer-in { padding-inline: var(--sp-6); }
  .tagline { padding-left: var(--sp-6); border-left: var(--bw-hair) solid var(--rule); }
  .wiki-layout { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .rail {
    display: flex; flex-direction: column; gap: var(--sp-1);
    align-self: start; position: sticky; top: var(--sticky-top);
    padding: var(--sp-6) var(--sp-4);
  }
  main { padding: var(--sp-6) var(--sp-8) var(--sp-12); border-left: var(--bw-hair) solid var(--rule); }
  .toc-box { position: sticky; top: var(--sticky-top); z-index: 1; width: fit-content; min-width: 14rem; }
  /* From tablet up the position number hangs in its own gutter beside the write-up;
     below this it stays inline with the provider name. */
  .listicle-entry { padding-left: 4.5rem; }
  .listicle-num {
    position: absolute; left: 0; top: var(--sp-6);
    width: 3.5rem; text-align: right;
    font-size: var(--fs-1100);
  }
  .proscons { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .references ol { column-count: 2; }
}

@media (min-width: 74rem) {
  .article-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w);
    gap: var(--gutter); align-items: start;
  }
  /* The grid tracks own the widths from here up, so the copy column and every
     table inside it end on the same line. */
  .article-main, .article-copy, .article-aside { max-width: none; }
  /* The aside sticks, but never grows past the viewport: a tall infobox scrolls
     inside the aside instead of hiding its lower half until the page bottom. */
  .article-aside {
    grid-column: 2; grid-row: 1; position: sticky; top: var(--sticky-top);
    max-height: calc(100vh - 2 * var(--sticky-top)); overflow-y: auto;
    scrollbar-width: thin;
  }
  .article-main, .article-layout > .article-copy { grid-column: 1; grid-row: 1; }
  .article-aside .toc-box, .article-aside .infobox { position: static; }
  /* In the aside the contents box owns the column, and stays inside the
     viewport so the sticky aside can hold its position. */
  .article-aside .toc-box { width: auto; margin-bottom: 0; }
  .article-aside .infobox { margin-bottom: 0; }
  /* A lead rendered above the shell keeps the copy column's width. */
  main > .article-lead { max-width: calc(100% - var(--aside-w) - var(--gutter)); }
  /* The reference apparatus sits outside the article shell, so it has the full main width. */
  .references ol { column-count: 3; }
}

/* Footer link row sits beside the mark. */
.site-footer-in p { margin: 0; }

/* ========================== Ranked table collapse ========================= */
/* The table shows the top ten (joint tenth included); the remaining rows are
   hidden until the reader asks for them. Without JS every row stays visible. */
.table-collapsed tr.table-rest { display: none; }
.table-more-row { margin: var(--sp-2) 0 var(--sp-6); }
.table-more {
  font-family: var(--font-sans); font-size: var(--fs-300); font-weight: var(--fw-semibold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted);
  background: var(--sunken); border: var(--bw-hair) solid var(--rule-strong);
  border-radius: var(--radius-2); padding: var(--sp-2) var(--sp-4); cursor: pointer;
}
.table-more::before { content: "▸ "; }
.table-more[aria-expanded="true"]::before { content: "▾ "; }
.table-more:hover { color: var(--ink); }

/* ===================== Recent changes, roster, last edited ================ */
.rc-meta { font-size: var(--fs-300); color: var(--ink-muted); margin: var(--sp-2) 0 var(--sp-4); }
.rc-list li { display: grid; grid-template-columns: 1fr; gap: var(--sp-1) var(--sp-3); }
.rc-list li time { width: auto; }
.rc-list .rc-article { font-weight: var(--fw-semibold); }
.rc-list .rc-hist {
  font-family: var(--font-mono); font-size: var(--fs-200); font-weight: var(--fw-regular);
  color: var(--ink-muted); margin-left: var(--sp-1);
}
.rc-list .rc-editor { font-size: var(--fs-300); }
.rc-list .rc-note { color: var(--ink); }
.rc-list li[data-editor="build"] .rc-editor,
.rc-list li[data-editor="build"] .rc-note { color: var(--ink-muted); }
@media (min-width: 48rem) {
  .rc-list li { grid-template-columns: minmax(12rem, 1fr) 9rem 2fr; }
  .rc-list--dated li { grid-template-columns: 6rem minmax(12rem, 1fr) 2fr; }
}
.roster { list-style: none; margin: var(--sp-4) 0; padding: 0; }
.roster li { padding: var(--sp-4) 0; border-bottom: var(--bw-hair) solid var(--rule); }
.roster li:last-child { border-bottom: 0; }
.roster h2 { margin: 0 0 var(--sp-1); padding: 0; border: 0; font-size: var(--fs-700); }
.editor-meta { font-size: var(--fs-300); color: var(--ink-muted); margin: 0 0 var(--sp-2); }
.last-edited {
  margin: var(--sp-6) 0 0; padding-top: var(--sp-3);
  border-top: var(--bw-hair) solid var(--rule);
  font-size: var(--fs-300); color: var(--ink-muted);
}
.more { font-size: var(--fs-300); margin: var(--sp-2) 0 0; }
.rc-toggle {
  margin-left: var(--sp-2); padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-200);
  color: var(--ink); background: var(--surface); border: var(--bw-hair) solid var(--rule-strong);
  border-radius: var(--radius-2); cursor: pointer;
}
.rc-hide-build li[data-editor="build"] { display: none; }