/* Bench: the v2 look, loaded after every page's stylesheets (layouts/partials/head.html). It restyles
   the chrome only: blue for links, chips and the current section; hairlines instead of heavy rules; a
   faint blue grid behind the header; quiet code panes. The figures are untouched: --accent (the warm
   ink the figure scripts and diagrams read) keeps its value, and the rules below move the chrome that
   used it onto --brand instead. Proposed changes against spec.md: docs/design-system/bench.md. */

:root {
  /* on :root, not body: the figure scripts read tokens from document.documentElement */
  --paper: #FBFBFA;         /* a faintly warm off-white, so white figure panels don't glare */
  --ink: #14161A;
  --dim: #5A6068;           /* metadata and captions (7:1 on paper) */
  --line: #C9D6EC;          /* hairlines, tinted with the brand */
  --signal: #4D8DFF;        /* bright blue: fills only, never text */
  --chip-bg: var(--brand);
}
body {
  background-color: var(--paper);
  background-image:
    linear-gradient(to bottom, rgba(251, 251, 250, 0) 0, var(--paper) 420px),
    linear-gradient(rgba(31, 95, 191, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 95, 191, 0.08) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  background-repeat: no-repeat, repeat, repeat;
}

/* links and the chrome that used the warm accent: brand blue */
a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--brand-press); text-decoration-color: currentColor; }
:where(.stamp, .cite-as-box, .post-figure, .entry) a { color: var(--brand-press); }
.wordmark, .wordmark:hover { color: var(--ink); }
.site-header nav a:hover, .site-header nav a[aria-current], .brand-row nav a:hover { color: var(--brand); }
.toc a:hover, .toc a[aria-current], .sidenav a:hover, .sidenav a[aria-current], .entry__title a:hover { color: var(--brand); }
@media (max-width: 640px) { .article > .toc { border-left-color: var(--brand); } }
.rose-caption a { color: var(--brand); }
.rose-caption a:hover { color: var(--brand-press); }
.readmore .bar-label { background: var(--brand); }
.readmore .bar-line { background: var(--brand); }
.readmore:hover .bar-label { background: var(--brand-press); }

/* eyebrow: a filled brand chip led by a bright square, then a brand hairline */
.eyebrow .chip { padding: var(--sp-1) var(--sp-2); }
.eyebrow .chip::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-2); background: var(--signal); vertical-align: 0; }
.eyebrow--bar::after { background: var(--brand); }

/* headlines: tighter; the statement square is the wordmark's mark, same ratio and spacing */
h1 { letter-spacing: -0.03em; }
.dot { width: 0.225em; height: 0.225em; margin-left: 0.09em; vertical-align: baseline; background: var(--brand); }

/* cards: paper on the page, a hairline frame, ink on hover */
.entry { background: var(--paper); border: 1px solid var(--line); transition: border-color 120ms; }
.entry:hover { border-color: var(--ink); }
.entry__meta { color: var(--dim); }
.entry__title a { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .entry { transition: none; } }

/* prose: section heads on a hairline, calm lists, inline code on the ground */
.prose h2 { padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.prose ul li::marker { color: var(--dim); }
.prose :not(pre) > code { font-size: 0.88em; background: var(--ground); padding: 1px 5px; }
.sidenote, .sidenote-number { color: var(--dim); }

/* the header with more nav items: on narrow screens, when they no longer fit beside the wordmark, the
   nav wraps onto its own row; no item ever wraps inside itself */
.site-header nav a { white-space: nowrap; }
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; row-gap: var(--sp-3); }
  .site-header nav { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
}

/* draft labels: on pages that are not published yet */
.draft-notice, .placeholder { font-family: var(--font-mono); font-size: 12px; color: #8A4B00; }
.draft-notice { padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-6); background: #FFF4D6; outline: 1px solid #E6C977; }

/* the 404 */
.nf-goal { padding: var(--sp-4) var(--sp-5); background: var(--ground); outline: 1px solid var(--line); font-family: var(--font-mono); font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.nf-path { color: var(--brand); }

/* ---------- the full v2: posts, glossary, home, careers ---------- */

/* the brand blue washed into the paper: figure panels, code and cards read as Theorem, not as grey */
:root { --ground: #E3ECFA; --wash: #CFDDF5; }

/* numbered sections: a brand number in the margin of the hairline */
body { counter-reset: sec; }
.prose h2 { counter-increment: sec; font-size: 1.6rem; letter-spacing: -0.02em; margin-top: var(--sp-12); }
.prose h2::before {
  content: counter(sec, decimal-leading-zero); display: inline-block; min-width: 2.6em; vertical-align: 0.35em;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--brand);
}
.prose h3 { font-size: 1.1rem; font-weight: 650; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose ul { padding-left: 1.2em; }
.prose ul li::marker { content: '\2013  '; font-family: var(--font-mono); }

/* code: a quiet pane labelled with its language */
.prose .highlight { border: 1px solid var(--line); margin: var(--sp-6) 0; }
.prose .highlight, .prose .highlight pre, .prose pre, .prose .chroma { background: var(--ground) !important; border: 0 !important; }
.prose pre { position: relative; padding: var(--sp-8) var(--sp-5) var(--sp-4) !important; }
.prose pre code[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 0; left: 0; right: 0; padding: 4px var(--sp-5);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--brand);
  border-bottom: 1px solid var(--line); background: var(--paper);
}
.prose .chroma .nt, .prose .chroma .k, .prose .chroma .kd, .prose .chroma .nd { color: var(--brand); }
.prose .chroma .s, .prose .chroma .s1, .prose .chroma .s2 { color: #8A4B00; }
.prose .chroma .l, .prose .chroma .mi, .prose .chroma .mf, .prose .chroma .kc { color: #2F55B5; }

/* figures, callouts, citation: the same ground and hairline as code. Only the figures post.css boxes:
   the Nix, Plotly, roadmap and explorer figures lay themselves out and stay unboxed. */
.prose .post-figure:not(.plotly-figure):not(.explorer-figure):not(.roadmap-figure):not(.nix-figure),
.stamp, .cite-as-box, .cite-as-bibtex, .prose-callout { background: var(--ground); outline: 1px solid var(--line); outline-offset: -1px; }
.prose .post-figure.nix-shared .stamp, .prose .post-figure.nix-atlas .stamp { background: none; outline: 0; }
.stamp__header, .stamp__header--fig { color: var(--ink); }
.stamp__caption { color: var(--dim); }
.toc a { text-decoration: none; }
.prose-end::after { background: var(--signal); }

/* glossary terms in prose (static/js/glossary.js): a faint dotted underline, the definition on hover or focus */
.gloss { position: relative; text-decoration: underline dotted var(--line); text-decoration-skip-ink: none;
  text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: help; }
.gloss::after {
  content: attr(data-def); position: absolute; left: 0; top: calc(100% + var(--sp-1)); z-index: 20; width: max-content; max-width: min(320px, 80vw);
  padding: var(--sp-2) var(--sp-3); background: var(--paper); outline: 1px solid var(--ink);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; font-weight: 400; font-style: normal; color: var(--ink);
  display: none;   /* not visibility: a hidden box near the right edge still widens the page */
}
.gloss:hover::after, .gloss:focus-visible::after { display: block; }

/* the glossary page */
.glossary dt { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-weight: 650; font-size: 1.05rem; }
.glossary dt:first-child { margin-top: 0; }
.glossary dd { margin: var(--sp-1) 0 0; }

.rose path { transition: opacity 160ms; }
@media (prefers-reduced-motion: reduce) { .rose path { transition: none; } }

/* blog index: a reading path for newcomers */
.start-here { margin: 0 0 var(--sp-8); }
.start-here__label { display: block; margin-bottom: var(--sp-2); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.start-here ol { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0; padding: 0; counter-reset: read; }
.start-here li { counter-increment: read; margin: 0; }
.start-here li a { display: block; height: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-left-width: 0; background: var(--paper); color: var(--dim); text-decoration: none; font-size: 13px; line-height: 1.4; }
.start-here li:first-child a { border-left-width: 1px; }
.start-here li a:hover { background: var(--ground); }
.start-here b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.start-here b::before { content: counter(read, decimal-leading-zero) '\00A0\00A0'; font-family: var(--font-mono); font-size: 12px; color: var(--brand); }
@media (max-width: 640px) { .start-here ol { grid-template-columns: 1fr; } .start-here li a { border-left-width: 1px; border-top-width: 0; } .start-here li:first-child a { border-top-width: 1px; } }

/* Careers: keep main's current role content and heading hierarchy, styled as v2 hairline rows.
   The heading and salary share a row; descriptions stay readable beneath them. */
.careers-index .prose h3 { font-size: 20px; }
.role-list { gap: 0; border-top: 1px solid var(--ink); }
.role-summary {
  grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-4) 0;
  background: none; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.role-summary__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-4); }
.role-summary h4 { margin: 0; font-weight: 650; }
.role-summary .role-summary__salary { color: var(--dim); }
.glossary dd.analogy { margin-top: var(--sp-1); color: var(--dim); font-style: italic; }

/* Careers fit criteria use round bullets rather than the prose dash marker. */
.careers-index .cols ul { list-style-type: disc; }
.careers-index .cols ul li::marker { content: normal; color: var(--ink); }