/* 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;
   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);
}

/* 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); }
/* Keep the launch actions on the same blue palette as the rest of the chrome. */
.site-header nav .nav-chip:hover { background: var(--brand-press); color: var(--chip-ink); }
.signup__send { background: var(--brand); }
.signup__send:hover { background: var(--brand-press); }
.signup__choice input { accent-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 phone menu keeps the wordmark, action and menu button on one row. */
.site-header nav a { white-space: nowrap; }
@media (max-width: 640px) {
  .site-header, .site-header nav { flex-wrap: nowrap; }
}
@media (max-width: 360px) {
  .site-header nav.nav-phone { gap: var(--sp-3); }
}

/* 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; } }

/* 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); }

/* blog cards: each post carries a palette ink (front matter `ink: 0-5`: plum, blue, green,
   olive, yellow, accent orange; the class entry--ink-N). The card is a text column beside a solid plate of that ink
   holding the post's peek glyph in paper; READ takes the ink (olive and yellow are too light for
   text, so theirs is the ink colour). The whole card is the title's link. */
.entry--ink-0 { --entry-ink: var(--plum); } .entry--ink-1 { --entry-ink: var(--brand); } .entry--ink-2 { --entry-ink: var(--green); }
.entry--ink-3 { --entry-ink: var(--olive); --entry-text: var(--ink); } .entry--ink-4 { --entry-ink: var(--yellow); --entry-text: var(--ink); }
.entry--ink-5 { --entry-ink: var(--accent); }
.entry--card {
  --entry-ink-or: var(--entry-ink, var(--brand));
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 13rem;
  padding: 0; border-color: var(--line);
}
.entry--card:hover { border-color: var(--entry-ink-or); }
.entry--card .entry__body { padding: var(--sp-6) var(--sp-8) var(--sp-5); }
.entry--card .entry__title a { color: var(--ink); }
.entry--card .entry__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.entry--card .entry__title a:focus-visible { outline: none; }
.entry--card:focus-within { outline: 2px solid var(--entry-ink-or); outline-offset: 2px; }
.entry--card:hover .entry__title a { color: var(--entry-text, var(--entry-ink-or)); }
.entry__more {
  display: inline-block; margin-top: var(--sp-2);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--entry-text, var(--entry-ink-or));
}
.entry__plate {
  --ground: var(--entry-ink-or);   /* the glyphs' washes mix toward the plate */
  display: grid; place-items: center; overflow: hidden;
  background: var(--entry-ink-or); color: var(--paper);
}
.entry__plate svg { display: block; width: 62%; height: auto; transition: transform 200ms; }
.entry--card:hover .entry__plate svg { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) { .entry__plate svg { transition: none; } .entry--card:hover .entry__plate svg { transform: none; } }
@media (max-width: 640px) {
  /* phone: the plate is a band across the top of the card */
  .entry--card { grid-template-columns: minmax(0, 1fr); }
  .entry--card .entry__plate { order: -1; height: 112px; }
  .entry__plate svg { width: auto; height: 84px; }
  .entry--card .entry__body { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
}