/* svGolf site: the one stylesheet.

   A small design system: tokens first (colour, type, space, radii, shadow; light and dark), then
   the components the page builders in page.py emit (header, page head with big stats, cards,
   small-caps labels, buttons, badges, code blocks, tables, the two-column task layout, the
   leaderboard list, property cards, task cards), then the charts. System fonts only, no external
   files; every page reads without JavaScript (site.js adds copy buttons and the property tabs) and works at
   360 px without horizontal scrolling (wide tables and code scroll inside their own box).

   The look: a pixel golf course. A sky over the header, grass under the footer, the logo the SV
   chip in pixels (pixelart.logo), every page head's rule a fairway with the flag in its hole at the
   end (pixelart.hole_flag), and on the home page a hero drawn as a level of a retro game
   (pixelart.scene: the chip on the green by the flag; on a phone cut to its right side). Boxes have
   pixel-stepped frames: no border and no radius, but a ring of box-shadows, one "pixel" (--px)
   wide, that leaves the four corner pixels out, and a hard lip under it (the .pixel rule below;
   forced colours get a plain border). By night (prefers-color-scheme: dark) the sky is navy with a
   moon and stars. The art's colours are tokens too (--px-*), so the day and the night colour the
   same drawing. Nothing animates but a card's lift on hover and the disclosure arrows, and
   prefers-reduced-motion stills those.

   Colour: cream paper and green-black ink, grass greens, one orange accent. Charts and the identity dots of badges use the
   first three slots of a colour-blind-checked categorical palette (orange, blue, aqua: validated
   all-pairs, stepped separately for the light and the dark surface): orange is a submission (and
   the accent), blue a proved reference, aqua a baseline. Text never wears a series colour; marks
   carry shape as well as colour (filled, ringed, hollow, crossed). */

:root {
  color-scheme: light;
  /* surfaces and ink */
  --bg: #f5f4e8;
  --surface: #fffef7;
  --surface-2: #f7f6ea;          /* table heads, code, quiet fills */
  --sunken: #ebeedb;             /* inline code, bars' tracks */
  --text: #1c2416;
  --text-2: #4a5340;
  --text-3: #5a6350;             /* small-caps labels, notes (5.7:1 on the paper, 5.3:1 on inline code) */
  --border: #dfe3cc;
  --border-strong: #c3cba8;
  --ink-rule: #1c2416;           /* the heavy rule under a page head */
  --shadow: none;
  /* pixel frames (.pixel): the ring and the lip under it */
  --px: 3px;
  --px-line: #a9c785;
  --px-lip: #d6e4bf;
  --px-ink: #24331c;             /* the logo, the art's outlines */
  --px-bezel: #24331c;           /* the hero's frame (the game screen's bezel) */
  /* the accent */
  --accent: #eb6834;
  --accent-ink: #b4461b;         /* the accent as text on the paper (4.9:1) */
  --accent-soft: rgba(235, 104, 52, 0.10);
  --accent-line: rgba(235, 104, 52, 0.45);
  --on-accent: #1b1916;
  --btn: #c4470f;                /* the primary button: white text on it 4.9:1 */
  --btn-hover: #a93c0b;          /* ... pointed at: a step darker (6.3:1) */
  --on-btn: #ffffff;
  --btn-line: #7a2c09;
  --btn-lip: #8f3409;
  /* the greens: the course */
  --green-ink: #2b6a1f;          /* green small caps (6.0:1 on the paper, 4.9:1 on the sky) */
  --nav-on: #2e7d20;             /* the current page's pill: white text 5.2:1 */
  --nav-on-lip: #1d5214;
  --marker: #b6ec7c;             /* the highlighter behind the hero's second line (ink on it 11.6:1) */
  --on-marker: #1c2416;
  --sky-1: #bfe2f8;
  --sky-2: #cce8fa;
  --sky-3: #d8eefb;
  --sky-4: #e3f3fc;
  --foot: #2a5220;               /* the rough under the footer's grass: text on it 8.0:1 */
  --foot-text: #eaf5dc;
  --foot-text-2: #c4e3a6;
  --focus: #1d4fd1;
  /* the art (pixelart.py's classes) */
  --px-cloud: #ffffff;
  --px-cloud-2: #d3e3ee;
  --px-chip: #c9d0d6;
  --px-chip-hi: #e6eaee;
  --px-chip-lo: #9aa4ad;
  --px-face: #ffffff;
  --px-face-2: #d9e3ea;
  --px-frame: #3b4a33;
  --px-gold: #f2b33d;
  --px-gold-2: #c98a1f;
  --px-pole: #f6ead0;
  --px-flag: #ef5a2e;
  --px-flag-2: #c23f1b;
  --px-grass: #6cc04a;
  --px-grass-hi: #9be06a;
  --px-grass-lo: #4f9d34;
  --px-grass-2: #74c652;         /* the mowing stripes of the hero's green */
  --px-hill: #b2deb0;            /* far hills, pale in the haze */
  --px-tree: #3f8f3a;
  --px-tree-hi: #5aae4a;
  --px-tree-lo: #2d6e2c;
  --px-trunk: #7a5230;
  --px-hole: #1f3a17;
  --px-moon: transparent;        /* by day no moon, no stars */
  --px-moon-2: transparent;
  --px-star: transparent;
  /* status (never a series colour; always with a label) */
  --good: #3a9f2d;
  --good-ink: #23661c;
  --good-soft: rgba(58, 159, 45, 0.11);
  --bad: #d03b3b;
  --bad-ink: #b02e2e;
  --warn: #c98500;
  /* kinds of design, in charts and identity dots (categorical slots 2, 1, 3) */
  --kind-record: #eb6834;
  --kind-reference: #2a78d6;
  --kind-baseline: #17a06e;      /* a step darker than the palette's aqua: 3.3:1 on the cards (WCAG non-text) */
  /* charts */
  --grid: #e6e9d6;
  --axis: #c3cba8;
  --axis-ink: #646b58;            /* chart tick labels (5.5:1 on the surface) */
  --hover: rgba(235, 104, 52, 0.10);
  /* links */
  --link: #1d5aa6;
  /* highlighting (highlight.py's token kinds) */
  --hl-kw: #5040c0;
  --hl-str: #006300;
  --hl-com: #6a6e5e;
  --hl-num: #9a4a12;
  --hl-sys: #1c5cab;
  --hl-dir: #b33a3a;
  --hl-cmd: #1c5cab;
  --hl-var: #9a4a12;
  --hl-opt: #5040c0;
  --diff-add: rgba(12, 163, 12, 0.14);
  --diff-del: rgba(208, 59, 59, 0.14);
  /* type (system fonts only: the display face is the system's rounded one where it has one) */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.72rem;
  --fs-sm: 0.86rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.9rem;
  --fs-2xl: 2.6rem;
  --fs-stat: 2rem;
  /* space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  /* radii: pixels have none (kept for the few round things: the identity dots of charts) */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-pill: 0;
  /* the page */
  --page: 74rem;
  --gutter: 2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* night golf: a navy sky, the moon and stars over a dark green */
    --bg: #0e1626;
    --surface: #152036;
    --surface-2: #1a273f;
    --sunken: #213050;
    --text: #eef2e4;
    --text-2: #c5ccbb;
    --text-3: #9ba595;
    --border: #26344f;
    --border-strong: #34466a;
    --ink-rule: #eef2e4;
    --px-line: #35583e;
    --px-lip: #070b14;
    --px-ink: #0a0f1a;
    --px-bezel: #4f6694;         /* a near-black frame would vanish into the night: a slate one */
    --accent: #f07a45;
    --accent-ink: #f59a70;
    --accent-soft: rgba(240, 122, 69, 0.13);
    --accent-line: rgba(240, 122, 69, 0.5);
    --on-accent: #1b1916;
    --btn: #f07a45;
    --btn-hover: #f38c5c;        /* by night a step lighter (dark text on it 7.3:1) */
    --on-btn: #1b1916;
    --btn-line: #ffb48f;
    --btn-lip: #8a3812;
    --green-ink: #8fd86a;
    --nav-on: #2e7d20;
    --nav-on-lip: #164010;
    --marker: #9be06a;
    --on-marker: #14210c;
    --sky-1: #0b1530;
    --sky-2: #0f1c3d;
    --sky-3: #14244b;
    --sky-4: #1b2d58;
    --foot: #12301a;
    --foot-text: #e3f0d6;
    --foot-text-2: #a9d38a;
    --focus: #ffd447;
    --px-cloud: #3a4c75;
    --px-cloud-2: #2c3b5f;
    --px-chip: #aab3bd;
    --px-chip-hi: #c7ced6;
    --px-chip-lo: #7d8892;
    --px-face: #e8edf5;
    --px-face-2: #b7c3d1;
    --px-frame: #2a3524;
    --px-pole: #e9dcbf;
    --px-grass: #2f7a34;
    --px-grass-hi: #45a04a;
    --px-grass-lo: #235e28;
    --px-grass-2: #33813a;
    --px-hill: #1d3b4a;
    --px-tree: #1f4f2c;
    --px-tree-hi: #2c6838;
    --px-tree-lo: #163a22;
    --px-trunk: #4f3620;
    --px-hole: #08140a;
    --px-moon: #f4e9b0;
    --px-moon-2: #d8c98a;
    --px-star: #fff3b0;
    --good-ink: #7fd46a;
    --good-soft: rgba(79, 191, 63, 0.16);
    --bad-ink: #ef7a7a;
    --warn: #e0a42e;
    --kind-record: #d95926;
    --kind-reference: #3987e5;
    --kind-baseline: #199e70;
    --grid: #223050;
    --axis: #34466a;
    --axis-ink: #9ba595;
    --hover: rgba(240, 122, 69, 0.16);
    --link: #8dbcf5;
    --hl-kw: #9085e9;
    --hl-str: #5cc25c;
    --hl-com: #9a998f;
    --hl-num: #e0895a;
    --hl-sys: #6da7ec;
    --hl-dir: #e66767;
    --hl-cmd: #6da7ec;
    --hl-var: #e0895a;
    --hl-opt: #9085e9;
    --diff-add: rgba(12, 163, 12, 0.22);
    --diff-del: rgba(230, 103, 103, 0.22);
  }
}

/* ---------------------------------------------------------------- pixels */

/* A pixel frame: a ring of four shadows one --px wide that leaves the corner pixels out, and a lip
   of three more under it (the box seen from a little above). --pl and --ps colour them. No border,
   no radius; the shadows take no room, so a framed box keeps its margins clear of them. */
.pixel, .card, .task-card, .loop > li, .mcard, .props, .hero, .btn, .site-nav,
.chart-tip, ul.roadmap > li, .empty {
  border: 0;
  border-radius: 0;
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--pl, var(--px-line)),
    0 var(--px) 0 0 var(--pl, var(--px-line)),
    calc(-1 * var(--px)) 0 0 0 var(--pl, var(--px-line)),
    var(--px) 0 0 0 var(--pl, var(--px-line)),
    calc(-1 * var(--px)) var(--px) 0 0 var(--ps, var(--px-lip)),
    var(--px) var(--px) 0 0 var(--ps, var(--px-lip)),
    0 calc(2 * var(--px)) 0 0 var(--ps, var(--px-lip));
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base)/1.6 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 0; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--sp-2); top: var(--sp-2); background: var(--surface); padding: var(--sp-1) var(--sp-2); z-index: 3; }

/* headings in the system's rounded face, heavy: the game's title type */

h1, h2, h3, h4, h5, h6 { line-height: 1.25; letter-spacing: -0.01em; font-family: var(--font-display); font-weight: 800; }
h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); }
h3 { font-size: var(--fs-md); margin: var(--sp-5) 0 var(--sp-2); }
h4, h5, h6 { font-size: var(--fs-base); margin: var(--sp-4) 0 var(--sp-2); }
h1 code, h2 code, h3 code, h4 code { font-size: 0.88em; }
.anchor { visibility: hidden; text-decoration: none; color: var(--text-3); font-weight: 400; margin-left: var(--sp-1); }
:is(h1, h2, h3, h4):hover .anchor, .anchor:focus { visibility: visible; }

p, ul, ol, dl { margin: var(--sp-3) 0; }
ul, ol { padding-left: 1.4rem; }
li { margin: var(--sp-1) 0; }
li > p { margin: var(--sp-2) 0; }
strong { font-weight: 650; }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--sunken);
  padding: 0.08em 0.35em;
  border-radius: 0;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------- header, page, footer */

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* the header is the sky in two bands; by night a few stars in it (3 px squares, transparent by day) */
.site-header {
  position: relative; border-bottom: 0; margin-bottom: 9px;
  background:
    linear-gradient(var(--px-star) 0 0) 1.5% 40px / 3px 3px no-repeat,
    linear-gradient(var(--px-star) 0 0) 21% 8px / 3px 3px no-repeat,
    linear-gradient(var(--px-star) 0 0) 30% 10px / 3px 3px no-repeat,
    linear-gradient(var(--px-star) 0 0) 41% 34px / 3px 3px no-repeat,
    linear-gradient(var(--px-star) 0 0) 52% 8px / 3px 3px no-repeat,
    linear-gradient(var(--px-star) 0 0) 98% 70px / 3px 3px no-repeat,
    linear-gradient(var(--sky-1) 0 50%, var(--sky-2) 50%);
}
/* the grass under the sky: a band with a fringe of tufts on top (pixel squares, no image) */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--px-grass) 0 6px, transparent 6px 15px, var(--px-grass) 15px 18px, transparent 18px 24px) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--px-grass) 0 0) 0 3px / 100% 3px no-repeat,
    linear-gradient(var(--px-grass-lo) 0 0) 0 6px / 100% 3px no-repeat;
}
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--text); text-decoration: none; font: 800 1.2rem/1 var(--font-display); letter-spacing: -0.01em; }
/* the logo: the hero's chip, small (pixelart.logo, two CSS px to a pixel) */
.brand-mark { display: inline-flex; flex: none; }
.brand-mark .px { width: 34px; height: 28px; }
.site-nav { --px: 2px; --pl: var(--border-strong); --ps: transparent; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 2px; background: var(--surface); }
.site-nav a { position: relative; color: var(--text); text-decoration: none; font: 600 var(--fs-sm)/1 var(--font-display); padding: 0.6rem 0.95rem; }
.site-nav a:hover { background: var(--sunken); }
/* the current page: a green pixel button (its notched corners are a ring of its own colour) */
.site-nav a[aria-current="page"] {
  color: #fff; background: var(--nav-on); margin: 0 2px;
  box-shadow: 0 -2px 0 0 var(--nav-on), 0 2px 0 0 var(--nav-on-lip), -2px 0 0 0 var(--nav-on), 2px 0 0 0 var(--nav-on), inset 0 -3px 0 0 var(--nav-on-lip);
}
.site-nav a:focus-visible { outline-offset: 4px; z-index: 1; }

/* THE LIBRARY SELECTOR (decided 2026-11-09). Every golf score is on the page twice, in `.pdk.pdk-sky130` and in
   `.pdk.pdk-asap7` (site/build.py `dual`); <html data-pdk>, which pdk.js sets before the page is drawn, picks the one
   shown, sky130 without it. The wrappers draw no box (display: contents), so the cards, rows and grids around them lay
   out as before; a lone `.pdk-asap7` element (a note, the banner) is shown in the ASAP7 view only. */
.pdk { display: contents; }
html:not([data-pdk="asap7"]) .pdk-asap7, html[data-pdk="asap7"] .pdk-sky130 { display: none !important; }
.pdk-pick { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pdk-pick[hidden] { display: none; }
.site-header .pdk-pick, .site-header noscript { margin-left: auto; }
.pdk-pick label { font: 700 0.66rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.pdk-pick select {
  font: 600 var(--fs-sm)/1.2 var(--font-display); color: var(--text); background: var(--surface); cursor: pointer;
  border: 2px solid var(--border-strong); border-radius: 0; padding: 0.4rem 0.5rem; max-width: 100%;
}
.pdk-pick select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pdk-nojs { margin: 0; font: var(--fs-xs)/1.4 var(--mono); color: var(--text-2); }
.pdk-home { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); margin-left: auto; }
.pdk-home .pdk-what, .pdk-home .pdk-nojs { margin: 0; max-width: 30rem; text-align: right; }
.pdk-pick-home label { font-size: var(--fs-xs); color: var(--text); }
.pdk-pick-home select { font-size: var(--fs-md); border-color: var(--accent-line); }
.pdk-banner { margin: 0 0 var(--sp-4); }
.pdk-banner p { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--accent-soft); color: var(--text);
  border-left: 4px solid var(--accent); font-size: var(--fs-sm); }
.pdk-note { color: var(--text-2); margin: 0 0 var(--sp-3); }
html[data-pdk="asap7"] tr.par-row:not(.par-a7) td { background: none; }
html[data-pdk="asap7"] tr.par-row:not(.par-a7) td:first-child { box-shadow: none; }
html[data-pdk="asap7"] tr.par-a7 td { background: var(--surface-2); }
html[data-pdk="asap7"] tr.par-a7 td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 40rem) {
  .pdk-home { align-items: flex-start; margin-left: 0; }
  .pdk-home .pdk-what, .pdk-home .pdk-nojs { text-align: left; }
}

main { flex: 1; width: 100%; max-width: var(--page); margin: 0 auto; padding: var(--sp-5) var(--gutter) var(--sp-7); }

/* the footer: the course's rough, under a strip of grass */
.site-footer { position: relative; background: var(--foot); border-top: 0; color: var(--foot-text-2); font-size: var(--fs-sm); margin-top: 12px; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--px-grass-hi) 9px 12px, transparent 12px 21px, var(--px-grass) 21px 27px, transparent 27px 33px) 0 0 / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--px-grass) 0 18px, var(--px-grass-hi) 18px 24px) 0 3px / 100% 3px no-repeat,
    linear-gradient(var(--px-grass) 0 0) 0 6px / 100% 3px no-repeat,
    linear-gradient(var(--px-grass-lo) 0 0) 0 9px / 100% 3px no-repeat;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.foot-brand { display: flex; align-items: center; gap: var(--sp-3); }
.foot-brand p { margin: 0; }
.foot-brand strong { color: var(--foot-text); display: block; font-family: var(--font-display); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; padding: 0; list-style: none; font: var(--fs-xs)/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--foot-text-2); }
.foot-links li { margin: 0; }
.foot-links a { color: var(--foot-text); text-decoration-color: var(--foot-text-2); }
.foot-links code { text-transform: none; letter-spacing: 0; background: none; padding: 0; color: var(--foot-text); }
.site-footer :focus-visible { outline-color: var(--marker); }

/* ------------------------------------------------- labels and the page head */

.label {
  display: block;
  margin: 0 0 var(--sp-2);
  font: 600 var(--fs-xs)/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.label-accent { color: var(--green-ink); }
.label code { text-transform: none; letter-spacing: 0; }

.crumbs { margin: 0 0 var(--sp-3); font: var(--fs-sm)/1.4 var(--mono); color: var(--text-3); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.crumbs .back { color: var(--accent-ink); font-weight: 700; margin-right: 0.15rem; }

.page-head {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding-bottom: calc(var(--sp-4) + 6px); margin-bottom: var(--sp-5);
  border-bottom: 0;
  background:
    linear-gradient(var(--ink-rule) 0 0) left bottom 3px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--px-grass) 0 9px, transparent 9px 15px) left bottom / 100% 3px no-repeat;
}
.page-head h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.head-main { min-width: 0; flex: 1 1 26rem; }
.title-row { display: flex; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.title-row h1 { min-width: 0; }                 /* a long title wraps beside its number */
.task-no { font: 700 var(--fs-2xl)/1.25 var(--mono); color: var(--accent-ink); letter-spacing: -0.03em; }
.task-id { font-size: 0.42em; font-weight: 400; letter-spacing: 0; vertical-align: 0.35em; }
.page-head h1 > code { background: none; padding: 0; font-size: 0.86em; font-weight: 700; letter-spacing: -0.03em; }
.head-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-md); color: var(--text-2); max-width: 46rem; }
.head-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.head-lead { max-width: 46rem; }
/* the rule is the fairway, and at its end the flag stands in the hole (pixelart.hole_flag): the text
   and the numbers keep clear of it (on a phone, above it) */
.page-head > .hole-flag { position: absolute; right: var(--sp-2); bottom: 4px; width: 32px; height: 40px; }
.head-main { padding-right: 48px; }

/* big stats (zk-style: value over a small-caps label) */
.stats { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: 0; }
.stat { margin: 0; text-align: right; display: flex; flex-direction: column-reverse; }
.stat dt { font: 600 var(--fs-xs)/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.stat dd { margin: 0; font: 700 var(--fs-stat)/1.15 var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat dd .unit { font-size: 0.45em; font-weight: 500; color: var(--text-3); margin-left: 0.25em; letter-spacing: 0; }
.stat .stat-note { display: block; font: var(--fs-xs)/1.4 var(--font); color: var(--text-3); letter-spacing: 0; text-transform: none; margin-top: 2px; }
/* a page head's numbers: a scoreboard, the game's HUD, in a pixel frame */
.page-head > .stats, .page-head > #numbers > .stats, .page-head > #numbers > .pdk > .stats { --pl: var(--text); --ps: var(--px-grass-lo); background: var(--surface); padding: var(--sp-3) var(--sp-4); margin: var(--px) var(--px) calc(3 * var(--px));
  box-shadow:
    0 calc(-1 * var(--px)) 0 0 var(--pl), 0 var(--px) 0 0 var(--pl), calc(-1 * var(--px)) 0 0 0 var(--pl), var(--px) 0 0 0 var(--pl),
    calc(-1 * var(--px)) var(--px) 0 0 var(--ps), var(--px) var(--px) 0 0 var(--ps), 0 calc(2 * var(--px)) 0 0 var(--ps); }
/* the numbers keep clear of the flag at the end of the rule */
.page-head > .stats, .page-head > #numbers { margin-right: 56px; }
.stat-good dd { color: var(--good-ink); }
.stat-accent dd { color: var(--accent-ink); }
.stat-empty dd { color: var(--text-3); }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  padding: var(--sp-5) var(--sp-6);
  margin: 0 0 calc(var(--sp-5) + 6px);
  min-width: 0;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); }
.card-head > * { margin: 0; }
.card-head h2, .card-title { font-size: var(--fs-md); margin: 0; }
.card-head .label { margin: 0; }
.card h2:not(.card-title) { font-size: var(--fs-lg); }
.card-flush { padding: 0; overflow: hidden; }
.card-flush > .card-head { padding: var(--sp-4) var(--sp-5); margin: 0; border-bottom: 3px solid var(--ink-rule); }
.card-foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2); font: var(--fs-xs)/1.5 var(--mono); color: var(--text-3); }
.card-foot > :first-child { margin-top: 0; }
.card-foot > :last-child { margin-bottom: 0; }

/* the section heads of a long card ("Interface", "How to participate") */
.card h3 { font-size: var(--fs-md); margin-top: var(--sp-6); }

/* two columns that stack on phones: the task body and the leaderboard */
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.split > * { min-width: 0; }
.col > .card:last-child, .col > section:last-child > .card:last-child { margin-bottom: 0; }
.split + * { margin-top: var(--sp-5); }

/* --------------------------------------------------------------- buttons */

/* a button is a pixel block: a ring, a lip that it sinks into when pressed */
.btn {
  --pl: var(--accent-line); --ps: color-mix(in srgb, var(--accent) 35%, var(--surface));
  display: inline-flex; align-items: center; gap: 0.45em;
  font: 700 var(--fs-sm)/1 var(--font-display);
  padding: 0.75rem 1.15rem;
  margin: var(--px) var(--px) calc(3 * var(--px));
  color: var(--accent-ink);
  background: var(--surface);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); text-decoration: none; top: -1px; }
.btn:active { top: var(--px); --ps: transparent; }
.btn:focus-visible { outline-offset: calc(3 * var(--px)); }
.btn-primary { --pl: var(--btn-line); --ps: var(--btn-lip); background: var(--btn); color: var(--on-btn); }
.btn-primary:hover { background: var(--btn-hover); }   /* not a brightness filter: brighter, white text fell under 4.5:1 */
.btn-quiet { --pl: var(--border-strong); --ps: color-mix(in srgb, var(--border-strong) 60%, var(--surface)); color: var(--text); }
.btn-quiet:hover { background: var(--surface-2); }
.btn-sm { --px: 2px; padding: 0.45rem 0.7rem; font-size: var(--fs-xs); }
.btn .arrow { font-family: var(--mono); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-4) 0; }

/* a static segmented control (LINEAR | log2, latest | impact): the next phase wires it */
.seg { display: inline-flex; padding: 2px; margin: 2px; gap: 2px; background: var(--surface);
  box-shadow: 0 -2px 0 0 var(--accent-line), 0 2px 0 0 var(--accent-line), -2px 0 0 0 var(--accent-line), 2px 0 0 0 var(--accent-line); }
.seg > * { font: 700 0.66rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0.5rem; border-radius: 0; color: var(--accent-ink); background: none; border: 0; }
.seg > [aria-pressed="true"], .seg > .on { background: var(--accent); color: var(--on-accent); }

/* ---------------------------------------------------------------- badges */

/* a badge: a small pixel tag (a 2 px ring with its corners left out) with a square identity dot */
.badge {
  --bl: var(--border-strong);
  display: inline-flex; align-items: center; gap: 0.45em;
  font: 700 0.68rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.34em 0.6em;
  margin: 2px;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text-2);
  box-shadow: 0 -2px 0 0 var(--bl), 0 2px 0 0 var(--bl), -2px 0 0 0 var(--bl), 2px 0 0 0 var(--bl);
  vertical-align: 0.12em;
  white-space: nowrap;
}
.badge::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 0; background: var(--text-3); flex: none; }
.preview-note {
  margin: 0; padding: 0.7rem 0.9rem; max-width: 36rem;
  font-size: var(--fs-sm); color: var(--text-2);
  border: 2px dashed var(--border-strong); border-radius: 0; background: var(--surface-2);
}
.badge-open, .badge-done, .badge-proved { color: var(--good-ink); --bl: color-mix(in srgb, var(--good) 55%, transparent); background: color-mix(in srgb, var(--good) 11%, var(--surface)); }
.badge-open::before, .badge-done::before, .badge-proved::before { background: var(--good); }
.badge-par::before, .badge-reference::before { background: var(--kind-reference); }
.badge-frontier::before, .badge-record::before, .badge-in-progress::before { background: var(--kind-record); }
.badge-frontier, .badge-in-progress { color: var(--accent-ink); --bl: var(--accent-line); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.badge-baseline::before { background: var(--kind-baseline); }
.badge-banned, .badge-cat-never, .badge-refuted { color: var(--bad-ink); --bl: color-mix(in srgb, var(--bad) 45%, transparent); }
.badge-banned::before, .badge-cat-never::before, .badge-refuted::before { background: var(--bad); }
.badge-open-question::before, .badge-cat-refused-pending::before { background: var(--warn); }
.badge-cat-later::before { background: var(--kind-reference); }
.badge-plain::before { display: none; }
.badge-tutorial { --bl: color-mix(in srgb, var(--px-gold-2) 60%, transparent); background: color-mix(in srgb, var(--px-gold) 12%, var(--surface)); color: var(--text-2); }
.badge-tutorial::before { background: var(--px-gold-2); }

/* ----------------------------------------------------------- code blocks */

pre.code {
  margin: var(--sp-3) 0;
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-radius: 0;
  padding: var(--sp-4) var(--sp-4);
  overflow-x: auto;
  font: 0.84rem/1.6 var(--mono);
  tab-size: 4;
}
pre.code code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; border-radius: 0; }
pre.code[data-src] { max-height: 40rem; }       /* whole files: scroll inside the block */
/* "Start a new design": its first commands wrap in the narrow column (each starts with python3.12) rather than
   hide their options past the edge; the copy button copies them unwrapped */
#new-design > pre.code[data-lang="bash"], #new-design > .codebox > pre.code[data-lang="bash"] {
  white-space: pre-wrap; overflow-wrap: anywhere; }
#new-design pre.code[data-lang="bash"] .hl-opt { white-space: nowrap; }   /* never "--" | "task" */

/* a code block with a head (file name, language, actions); site.js adds a copy button */
.codebox { position: relative; margin: var(--sp-3) 0; }
.codebox > pre.code { margin: 0; }
.codebox-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border: 2px solid var(--border); border-bottom: 0;
  border-radius: 0;
  background: var(--sunken);
  font: var(--fs-xs)/1.4 var(--mono); color: var(--text-2);
}
.codebox-head + pre.code { border-top-left-radius: 0; border-top-right-radius: 0; }
.codebox-name { overflow-wrap: anywhere; }
.codebox-actions { display: flex; gap: var(--sp-2); align-items: center; }
.copy {
  font: 600 var(--fs-xs)/1 var(--mono); letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem; border-radius: 0;
  border: 2px solid var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer;
}
.copy:hover { color: var(--text); border-color: var(--text-3); }
.copy.done { color: var(--good-ink); border-color: var(--good); }
.codebox > .copy { position: absolute; top: var(--sp-2); right: var(--sp-2); opacity: 0; transition: opacity 0.12s; }
.codebox:hover > .copy, .codebox > .copy:focus-visible, .codebox > .copy.done { opacity: 1; }
@media (hover: none) {
  .codebox > .copy { opacity: 1; }
  /* a box with no head: the always-shown button sits in a strip above the code, not over its first line */
  .codebox > pre.code:has(+ .copy) { padding-top: calc(2 * var(--sp-2) + 1.75rem); }
}

/* a terminal: shell commands on a dark block, in both modes */
.term {
  --surface-2: #1d1b18; --border: #1d1b18; --sunken: #2a2724; --text-2: #b9b2a5;
  --hl-kw: #b3a9ff; --hl-str: #8fd18f; --hl-com: #8c867b; --hl-num: #f0a46e; --hl-sys: #8cbcf2;
  --hl-dir: #f08a8a; --hl-cmd: #8cbcf2; --hl-var: #f0a46e; --hl-opt: #b3a9ff;
  color: #f1ede6;
}
.term pre.code { color: #f1ede6; }
.term .copy { background: #2a2724; border-color: #4a453e; color: #d6cfc2; }
.term .copy:focus-visible { outline-color: #ffd447; }   /* the day's blue ring is 2.2:1 on the terminal; the night's yellow 10:1 */

/* highlighting (highlight.py's token kinds) */
.hl-kw { color: var(--hl-kw); font-weight: 600; }
.hl-str { color: var(--hl-str); }
.hl-com { color: var(--hl-com); font-style: italic; }
.hl-num { color: var(--hl-num); }
.hl-sys { color: var(--hl-sys); }
.hl-dir { color: var(--hl-dir); }
.hl-cmd { color: var(--hl-cmd); font-weight: 600; }
.hl-var { color: var(--hl-var); }
.hl-opt { color: var(--hl-opt); }

.diff-add { background: var(--diff-add); }
.diff-del { background: var(--diff-del); }
.diff-hunk { color: var(--kind-reference); }
.diff-head { color: var(--text-2); }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; margin: var(--sp-3) 0; border: 2px solid var(--border-strong); border-radius: 0; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); }
thead th { font: 700 var(--fs-xs)/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); background: var(--sunken); white-space: nowrap; border-bottom: 2px solid var(--border-strong); }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.num { font-family: var(--mono); font-size: 0.82rem; }
td.al-right, th.al-right { text-align: right; }
td.al-center, th.al-center { text-align: center; }
tr.par-row td, tr.frontier-row td { background: var(--surface-2); }
tr.par-row td:first-child, tr.frontier-row td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
tr:target td { outline: 2px solid var(--accent); outline-offset: -2px; }
td code { overflow-wrap: break-word; }
.doc-body td code { overflow-wrap: anywhere; }      /* a hash in a document's table wraps, not the table */
td > a > code, td:first-child > code { white-space: nowrap; overflow-wrap: normal; }
caption { caption-side: bottom; text-align: left; padding: var(--sp-2) var(--sp-3); color: var(--text-3); font-size: var(--fs-sm); }

/* the references and baselines (build.py design_cell): the name with its badges, what the design
   is, and a muted line under it, in one cell; the numbers in the columns beside it */
table.designs-list td:first-child { min-width: 16rem; }
.cell-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.cell-what { display: block; margin-top: var(--sp-1); color: var(--text-2); line-height: 1.5; }
.cell-meta { display: block; margin-top: var(--sp-1); font: var(--fs-xs)/1.5 var(--mono); color: var(--text-3); }
table.closure td:last-child code { white-space: nowrap; }
table.closure .cell-meta { overflow-wrap: anywhere; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: var(--sp-3) 0; border-top: 1px solid var(--border); }
dl.facts dt, dl.facts dd { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
dl.facts dt { color: var(--text-3); font: 600 var(--fs-xs)/1.9 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding-right: var(--sp-5); }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-sm); }
dl.facts dd > p { margin: var(--sp-1) 0 0; }
/* stacked: a term over its value (a narrow column) */
.col dl.facts { grid-template-columns: minmax(0, 1fr); }
.col dl.facts dt { padding-bottom: 0; border-bottom: 0; }

/* ------------------------------------------------------- empty, details, steps */

.empty { --pl: var(--border-strong); --ps: transparent; padding: var(--sp-4) var(--sp-5); margin: var(--px); background: var(--surface-2); color: var(--text-2); }
.empty > :first-child { margin-top: 0; }
.empty > :last-child { margin-bottom: 0; }

details { border: 2px solid var(--border); border-radius: 0; background: var(--surface); margin: var(--sp-2) 0; }
details > summary { cursor: pointer; padding: 0.6rem var(--sp-4); font-size: var(--fs-sm); color: var(--text-2); list-style-position: inside; }
details > summary:hover { color: var(--text); }
details[open] > summary { border-bottom: 1px solid var(--border); }
details > :not(summary) { margin-left: var(--sp-4); margin-right: var(--sp-4); }
details > pre.code:last-child, details > .codebox:last-child, details > .table-wrap:last-child { margin-bottom: var(--sp-4); }
/* "Start a new design": the rest of the README's card, folded; under the title, the parts it holds */
details.nd-detail > summary { color: var(--text); font-weight: 600; }
.nd-more { display: block; margin-top: 0.2rem; font-weight: 400; font-size: var(--fs-xs); color: var(--text-2); }
details.nd-detail > .codebox, details.nd-detail > pre.code { margin-left: var(--sp-4); margin-right: var(--sp-4); }

ol.steps { list-style: none; padding: 0; counter-reset: step; margin: var(--sp-4) 0; }
ol.steps > li { counter-increment: step; position: relative; padding: 0 0 0 2.4rem; margin: 0 0 var(--sp-3); min-height: 1.7rem; }
ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  border-radius: 0; border: 0; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: 0 -2px 0 0 var(--accent-line), 0 2px 0 0 var(--accent-line), -2px 0 0 0 var(--accent-line), 2px 0 0 0 var(--accent-line);
  font: 700 var(--fs-xs)/1 var(--mono);
}

/* ------------------------------------------------- in-page navigation, docs */

.toc { margin: var(--sp-4) 0; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.toc li { margin: 0; }
.toc a { display: inline-block; padding: 0.35rem 0.75rem; margin: 2px; border: 0; border-radius: 0; background: var(--surface); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm);
  box-shadow: 0 -2px 0 0 var(--border-strong), 0 2px 0 0 var(--border-strong), -2px 0 0 0 var(--border-strong), 2px 0 0 0 var(--border-strong); }
.toc a:hover { color: var(--accent-ink); border-color: var(--accent-line); }

/* a document page: its contents beside it on wide screens */
.doc { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.doc-side { position: sticky; top: var(--sp-4); max-height: calc(100vh - 2rem); overflow-y: auto; }
.doc-side .toc { margin: 0; }
.doc-side .toc ul { display: block; border-left: 3px dashed var(--px-line); }
.doc-side .toc a { display: block; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0.3rem var(--sp-2) 0.3rem var(--sp-3); margin: 0 0 0 -3px; border-left: 3px solid transparent; line-height: 1.35; }
/* the contents scroll in their own box, which would clip a ring drawn outside a link: inside it */
.doc-side .toc a:focus-visible { outline-offset: -3px; }
.doc-side .toc a:hover { border-left-color: var(--accent); color: var(--text); background: var(--surface); }
.doc-body { max-width: 52rem; }
.doc-body h2 { padding-top: var(--sp-5); border-top: 3px dotted var(--px-line); }
.doc-body > h2:first-child, .doc-body > section:first-child > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.doc-wide .doc-body { max-width: none; }

ul.rejects { list-style: none; padding: 0; }
ul.rejects > li { border-top: 1px solid var(--border); padding: var(--sp-3) 0; margin: 0; }
.reject-head { margin: 0; }

/* a quiet disclosure: a small link-like toggle, no box (the rejected designs' sources) */
details.reveal { border: 0; border-radius: 0; background: none; margin: var(--sp-1) 0 0; }
details.reveal > summary { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0; list-style: none; font: var(--fs-xs)/1.4 var(--mono); color: var(--text-2); }
details.reveal > summary::-webkit-details-marker { display: none; }
details.reveal > summary::before { content: "›"; font-weight: 700; transition: transform 0.12s; }
details.reveal[open] > summary::before { transform: rotate(90deg); }
details.reveal > summary:hover { color: var(--accent-ink); }
details.reveal[open] > summary { border-bottom: 0; }
details.reveal > :not(summary) { margin-left: 0; margin-right: 0; }
details.reveal > .codebox:last-child, details.reveal > pre.code:last-child { margin: var(--sp-2) 0 var(--sp-1); }

ul.roadmap { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
ul.roadmap > li { background: var(--surface); padding: var(--sp-3) var(--sp-4); margin: 0 var(--px) calc(2 * var(--px)); }
ul.roadmap > li > div { color: var(--text-2); margin-top: var(--sp-1); font-size: var(--fs-sm); }

/* ---------------------------------------------------- the leaderboard list */

ol.board { list-style: none; margin: 0; padding: 0; }
ol.board > li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); margin: 0; }
ol.board > li:last-child { border-bottom: 0; }
ol.board > li.lead { background: var(--good-soft); }
ol.board > li.par { background: var(--surface-2); }
.board-rank { font: 700 var(--fs-sm)/1 var(--mono); color: var(--text-3); text-align: center; }
.lead .board-rank { width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: 0; color: var(--good-ink); background: var(--surface);
  box-shadow: 0 -2px 0 0 var(--good), 0 2px 0 0 var(--good), -2px 0 0 0 var(--good), 2px 0 0 0 var(--good); }
.board-who { min-width: 0; }
.board-name { font-weight: 650; overflow-wrap: anywhere; }
.board-name a { color: var(--text); text-decoration: none; }
.board-name a:hover { color: var(--accent-ink); text-decoration: underline; }
.board-meta { font: var(--fs-xs)/1.5 var(--mono); color: var(--text-3); }
.board-score { text-align: right; font: 700 var(--fs-md)/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-score small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.bar { display: block; height: 6px; margin-top: 6px; border-radius: 0; background: var(--sunken); overflow: hidden; max-width: 14rem; }
/* the fill in pixel steps: a gap every 6 px */
.bar > span { display: block; height: 100%; border-radius: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 6px); }
.par .bar > span { background: repeating-linear-gradient(90deg, var(--text-3) 0 4px, transparent 4px 6px); }
.board-empty { padding: var(--sp-4) var(--sp-5); color: var(--text-2); border-bottom: 1px solid var(--border); }
.board-empty p { margin: 0; }
.legend-row { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.legend-row span::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.4rem; border-radius: 0; background: var(--accent); vertical-align: 0.02em; }
.legend-row .lg-par::before { background: var(--text-3); }

/* --------------------------------------------------------- property cards */

/* The panel (props.py): a head with the tabs and the counters, a pane per tab, a foot with the
   theorem that ties the cards to the statement. Without JavaScript the tabs are links and the
   panes stand one under the other, each under its title; site.js adds .js-tabs and hides all
   panes but the chosen one. */
/* no overflow: hidden (it clipped the focus rings of the tabs and the cards; with square corners nothing
   needs it): a card's ring is drawn inside its row */
.props { margin: var(--sp-4) var(--px) calc(var(--sp-4) + 2 * var(--px)); background: var(--surface); }
.props-head { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.props-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); }
.props-tabs > a { display: inline-flex; align-items: center; gap: 0.45rem; font: 700 var(--fs-xs)/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); padding: 0.95rem 0 0.7rem; border-bottom: 3px solid transparent; text-decoration: none; }
.props-tabs > a:hover { color: var(--text); }
.props-tabs > a.on, .props-tabs > a[aria-selected="true"] { color: var(--text); border-bottom: 3px solid var(--nav-on); }
.js-tabs .props-tabs > a.on[aria-selected="false"] { color: var(--text-3); border-bottom-color: transparent; }
.props-n { font-weight: 600; letter-spacing: 0; padding: 0.15rem 0.4rem; border-radius: 0; background: var(--sunken); color: var(--text-2); }
.props-tabs > a { margin-bottom: -1px; }
.props-count { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); padding: 0.6rem var(--sp-4); font: 700 var(--fs-xs)/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.props-count:empty { display: none; }
.props-count > * { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.props-count > *::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 0; background: currentColor; }
.props-count .proved { color: var(--good-ink); }
.props-count .todo { color: var(--text-3); }
.props-count .rejected { color: var(--text-2); }
.props-count a.rejected::before { background: var(--text-3); }
.props-count a:hover { color: var(--text); text-decoration: underline; }
.props-pane { padding: var(--sp-4) 0 0; }
.props-pane + .props-pane { border-top: 1px solid var(--border); }
.js-tabs .props-pane + .props-pane { border-top: 0; }
.props-pane[hidden] { display: none; }
.props-pane-title { margin: 0 var(--sp-4) var(--sp-2); font: 700 var(--fs-xs)/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
/* with the tabs, the tab names the pane: its title stays for assistive technology only (a heading where the panel
   sits under one, so that heading navigation keeps its levels), out of sight */
.js-tabs .props-pane-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.props-intro { margin: 0 var(--sp-4) var(--sp-3); font-size: var(--fs-sm); color: var(--text-2); }
.props-group { margin: var(--sp-4) var(--sp-4) var(--sp-2); }
/* a pane of running text (the task page's "What does not count"): the pane's own side margins, the text's size */
.props-text { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-sm); }
.props-text > :first-child { margin-top: 0; }
.props-text h5 { margin: var(--sp-5) 0 var(--sp-1); }
.prop-list { border-top: 1px solid var(--border); }
.props-foot { padding: var(--sp-4); background: var(--surface-2); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-2); }
.props-foot > :first-child { margin-top: 0; }
.props-foot > :last-child { margin-bottom: 0; }
.props-check { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-right: 0.3rem; border-radius: 0; background: var(--good-soft); color: var(--good-ink); font: 700 0.7rem/1 var(--mono); }
.prop { border: 0; border-radius: 0; margin: 0; border-bottom: 1px solid var(--border); background: none; scroll-margin-top: var(--sp-4); }
.prop:last-child { border-bottom: 0; }
.prop:target { box-shadow: inset 4px 0 0 var(--accent); }
.prop > summary { display: block; position: relative; padding: var(--sp-3) calc(var(--sp-4) + 1.4rem) var(--sp-3) var(--sp-4); list-style: none; color: var(--text); }
.prop > summary::-webkit-details-marker { display: none; }
.prop > summary:focus-visible { outline-offset: -3px; }
.prop > summary::after { content: "›"; position: absolute; right: var(--sp-4); top: 0.85rem; font: 700 1.1rem/1 var(--mono); color: var(--text-3); transition: transform 0.12s; }
.prop > summary:hover { background: var(--surface-2); }
.prop > summary:hover::after { color: var(--accent-ink); }
.prop[open] > summary::after { transform: rotate(90deg); }
.prop[open] > summary { border-bottom: 0; }
.prop-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.prop-name { font: 700 var(--fs-sm)/1.3 var(--mono); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.prop-gist { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.prop-body { padding: 0 var(--sp-4) var(--sp-4); margin: 0 !important; }
.prop-body > p { font-size: var(--fs-sm); }
.prop-body > p:first-child { margin-top: 0; }
.prop-path { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); font: var(--fs-xs)/1.4 var(--mono); color: var(--text-3); overflow-wrap: anywhere; }
pre.code.excerpt { max-height: 24rem; font-size: 0.8rem; }
.badge-file { text-transform: none; letter-spacing: 0; font-weight: 500; }
.badge-file::before { display: none; }

/* a source view (leansrc.anchored_html): a number before each line, the target line or
   declaration marked; the numbers are drawn, never copied */
pre.code.source { max-height: none; padding-left: var(--sp-2); }
pre.code.source .ln { display: inline-block; min-width: 100%; padding-right: var(--sp-4); }
pre.code.source .ln::before { content: attr(data-n); display: inline-block; width: 4ch; margin-right: 2ch; text-align: right; color: var(--text-3); opacity: 0.7; font-style: normal; font-weight: 400; }
pre.code.source .ln:target, pre.code.source .decl:target .ln { background: var(--accent-soft); }
pre.code.source .decl:target .ln:first-child::before, pre.code.source .ln:target::before { color: var(--accent-ink); opacity: 1; }
.ln, .decl { scroll-margin-top: var(--sp-6); }

/* ------------------------------------------------------------ home page */

/* the hero: a level of a pixel golf game. The text in a banded sky beside the drawn green
   (pixelart.scene, decorative), the three numbers on a strip of mown grass under both, the whole in a
   heavy pixel frame. */
.hero { --px: 4px; --pl: var(--px-bezel); --ps: var(--px-ink); position: relative; margin: var(--px) var(--px) calc(var(--sp-6) + 3 * var(--px)); overflow: hidden; background: var(--px-grass); }
.hero-sky {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0 var(--sp-5); align-items: end;
  padding: var(--sp-6) 0 0 var(--sp-6);
  /* far hills along the foot of the sky: stepped domes of squares, one every 220 px */
  background:
    repeating-linear-gradient(90deg, transparent 0 86px, var(--px-hill) 86px 134px, transparent 134px 220px) left bottom 24px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 70px, var(--px-hill) 70px 150px, transparent 150px 220px) left bottom 20px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 54px, var(--px-hill) 54px 166px, transparent 166px 220px) left bottom 16px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 38px, var(--px-hill) 38px 182px, transparent 182px 220px) left bottom 12px / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 22px, var(--px-hill) 22px 198px, transparent 198px 220px) left bottom 8px / 100% 4px no-repeat,
    linear-gradient(var(--px-hill) 0 0) left bottom / 100% 8px no-repeat,
    linear-gradient(var(--sky-1) 0 24%, var(--sky-2) 24% 48%, var(--sky-3) 48% 72%, var(--sky-4) 72%);
}
.hero-text { padding-bottom: var(--sp-6); min-width: 0; }
.hero-text > .label { margin-bottom: var(--sp-3); }
.hero h1 { font-size: clamp(2rem, 4.1vw, 3rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 var(--sp-4); }
/* the second line on a green highlighter with pixel-stepped ends */
.hero h1 .accent {
  display: block; width: fit-content; max-width: calc(100% + 0.2em);
  color: var(--on-marker); padding: 0 0.22em; margin: 0.06em 0 0 -0.22em;
  background:
    linear-gradient(var(--marker) 0 0) 0 55% / 100% 64% no-repeat,
    linear-gradient(var(--marker) 0 0) 0.11em 55% / calc(100% - 0.22em) 84% no-repeat;
}
.hero-lead { font-size: var(--fs-md); color: var(--text-2); max-width: 38rem; margin: 0; }
.hero-lead p { margin: 0; }
.hero .btn-row { margin: var(--sp-5) 0 0; }
.hero-art { align-self: end; min-width: 0; display: flex; justify-content: flex-end; margin-left: -7rem; }
.hero-text { position: relative; z-index: 1; }
.px { display: block; }
.hero-art .px { width: 600px; max-width: 100%; height: auto; }
/* the grass under the sky: mowing stripes, a fringe of tufts on top */
.hero-ground {
  position: relative; padding: var(--sp-5) var(--sp-6) calc(var(--sp-5) + 2px);
  background: repeating-linear-gradient(90deg, var(--px-grass) 0 48px, var(--px-grass-2) 48px 96px);
}
.hero-ground::before {
  content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--px-grass) 0 8px, transparent 8px 20px, var(--px-grass) 20px 24px, transparent 24px 32px);
}
/* the home page: the hero compact (the title on one line, the buttons under the lead, the drawing small, no grass
   strip); the note on par and record under the task cards; after them (decided 2026-11-06), the steps on the adder
   in two columns (step 1, the design, on the left; the proof and the check on the right) */
.hero-compact { margin-bottom: var(--sp-4); }
.hero-compact .hero-sky { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); padding-top: var(--sp-4); }
.hero-compact .hero-text { padding-bottom: var(--sp-4); }
.hero-compact h1 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: var(--sp-2); }
.hero-compact h1 .accent { display: inline; }
.hero-compact .hero-lead { max-width: 52rem; font-size: var(--fs-base); }
.hero-compact .btn-row { margin-top: var(--sp-4); }
.hero-compact .hero-art .px { width: 260px; }
.how { margin: 0 var(--px) var(--sp-5); }
.how > h2 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-4); }
.how-steps { list-style: none; counter-reset: how; padding: 0; margin: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: var(--sp-2) var(--sp-5); }
.how-steps > li { counter-increment: how; font-size: var(--fs-sm); min-width: 0; margin: 0; }
.how-steps > li:first-child { grid-row: span 2; }
.how-steps > li > p:first-child::before { content: counter(how) ". "; font-weight: 800; }
.how-steps > li p { margin: 0 0 var(--sp-1); }
.how pre.code { font-size: 12px; line-height: 1.3; margin: 0 0 var(--sp-2); white-space: pre-wrap; }
.how > p { font-size: var(--fs-sm); margin: var(--sp-2) 0 0; }
@media (max-width: 56rem) {
  .hero-compact .hero-sky { grid-template-columns: minmax(0, 1fr); padding-right: var(--sp-4); }
  .hero-compact .hero-art { display: none; }
  .how-steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .how-steps > li:first-child { grid-row: auto; }
}

/* the art's colours (pixelart.INKS): the theme's tokens */
.px-k { fill: var(--px-ink); }
.px-k2 { fill: var(--px-frame); }
.px-w { fill: var(--px-face); }
.px-c { fill: var(--px-face-2); }
.px-C { fill: var(--px-cloud); }
.px-x { fill: var(--px-cloud-2); }
.px-g { fill: var(--px-chip); }
.px-h { fill: var(--px-chip-hi); }
.px-G { fill: var(--px-chip-lo); }
.px-p { fill: var(--px-gold); }
.px-P { fill: var(--px-gold-2); }
.px-o { fill: var(--px-pole); }
.px-f { fill: var(--px-flag); }
.px-F { fill: var(--px-flag-2); }
.px-q { fill: var(--px-grass); }
.px-l { fill: var(--px-grass-hi); }
.px-v { fill: var(--px-grass-lo); }
.px-T { fill: var(--px-tree); }
.px-t { fill: var(--px-tree-hi); }
.px-D { fill: var(--px-tree-lo); }
.px-b { fill: var(--px-trunk); }
.px-d { fill: var(--px-hole); }
.px-m { fill: var(--px-moon); }
.px-M { fill: var(--px-moon-2); }
.px-s { fill: var(--px-star); }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-5); margin: var(--sp-6) 0 var(--sp-4); }
.section-head h2 { margin: 0; font-size: var(--fs-lg); }
.section-head p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); max-width: 44rem; }
.section-head .label { margin: 0 0 var(--sp-1); }

/* the course: the task cards in a dashed panel with a strip of grass along its foot */
.course {
  position: relative; margin: 0 0 var(--sp-6); padding: var(--sp-5) var(--sp-5) calc(var(--sp-6) + 18px);
  background:
    repeating-linear-gradient(90deg, var(--px-grass) 0 6px, transparent 6px 12px, var(--px-grass-hi) 12px 15px, transparent 15px 24px) left bottom 12px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--px-grass) 0 30px, var(--px-grass-2) 30px 60px) left bottom / 100% 12px no-repeat,
    var(--surface-2);
  border: 3px dashed var(--px-line);
}
.course > .section-head { margin-top: 0; }
.course > .section-head h2 { font-size: var(--fs-xl); }
.course > .section-head > div { flex: 0 0 auto; }
/* the library selector beside the heading takes the rest of the line and may shrink below its one-line
   width (a phone) */
.course > .section-head > .pdk-home { flex: 1 1 auto; min-width: 0; }
.course-note { margin: var(--sp-5) var(--px) 0; color: var(--text-2); font-size: var(--fs-sm); max-width: 60rem; }

.task-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: calc(var(--sp-4) + 6px) var(--sp-4); }
.task-card { margin: 0 var(--px); position: relative; display: flex; flex-direction: column; gap: var(--sp-3); background: var(--surface); padding: var(--sp-5); transition: transform 0.12s; }
.task-card:hover { --pl: var(--px-grass-lo); transform: translateY(-2px); }
.task-card:focus-within { --pl: var(--focus); }
.task-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.task-card .task-no { font-size: var(--fs-lg); }
.task-card h3 { margin: 0; font-size: var(--fs-md); }
.task-card h3 a { color: var(--text); text-decoration: none; }
.task-card h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.task-card h3 a:hover { color: var(--accent-ink); }
.task-card p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.task-card .stats { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 3px dotted var(--border-strong); }
.task-card .stat { text-align: left; }
.task-card .stat dd { font-size: var(--fs-base); white-space: normal; }
/* in a narrow card a long number's unit drops under it rather than run into the next number */
.task-card .stat dd .unit { display: inline-block; }
.task-card .tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); position: relative; }

.loop { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--sp-4) + 6px) var(--sp-4); counter-reset: loop; }
.loop > li { counter-increment: loop; margin: 0 var(--px); background: var(--surface); padding: var(--sp-5); }
.loop > li::before { content: "0" counter(loop); display: block; font: 700 var(--fs-lg)/1 var(--mono); color: var(--accent-ink); margin-bottom: var(--sp-3); }
.loop > li > p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.loop > li > p strong:first-child { display: block; color: var(--text); font: 800 var(--fs-md)/1.3 var(--font-display); margin-bottom: var(--sp-2); }

/* -------------------------------------------------- charts (svgplot.py) */

.chart-figure { margin: var(--sp-3) 0; }
.chart-figure figcaption { color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.chart-slot { min-height: 6rem; }
svg.chart { display: block; width: 100%; height: auto; max-width: 52rem; }
svg.chart text { font-family: var(--mono); font-size: 11px; fill: var(--text-2); }
svg.chart .axis-title { font-family: var(--font); font-size: 12px; }
svg.chart .grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
svg.chart .axis { stroke: var(--axis); stroke-width: 2; shape-rendering: crispEdges; }
svg.chart .tick { fill: var(--axis-ink); }
svg.chart .value { fill: var(--text); }
.frontier { fill: none; stroke: var(--kind-record); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hit { fill: transparent; }
.mark:hover .hit { fill: var(--hover); }
.m-record { fill: var(--kind-record); stroke: var(--surface); stroke-width: 2; }
.m-reference { fill: var(--kind-reference); }
.m-reference-ring { fill: none; stroke: var(--kind-reference); stroke-width: 2; }
.m-baseline { fill: var(--surface); stroke: var(--kind-baseline); stroke-width: 2; }
.m-banned { fill: none; stroke: var(--kind-baseline); stroke-width: 2; stroke-linecap: round; }
svg.bars .bar { fill: var(--accent); }

ul.legend { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); font-size: var(--fs-sm); color: var(--text-2); }
ul.legend li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.legend-icon { flex: none; }

/* the score chart and the explorer (svgplot.score_chart, scatter_chart; charts.js) */
.chart-box { position: relative; overflow-x: auto; overflow-y: hidden; }
.chart-box svg.chart { max-width: none; }
.nocase { text-transform: none; letter-spacing: 0.02em; }
.chart-variant[hidden], .chart-variant[data-size="compact"], .compact-only { display: none; }
.chart-box svg.chart.compact { max-width: 36rem; }
@media (max-width: 52rem) {             /* the compact drawings (svgplot's *_COMPACT frames) */
  .chart-variant[data-size="wide"] { display: none; }
  .chart-variant[data-size="compact"]:not([hidden]), .compact-only { display: block; }
}
ul.levels-list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--text-2); }
ul.levels-list li { display: flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0; }
.chart-tools { display: inline-flex; }
.chart-tools[hidden], .explorer-controls[hidden] { display: none; }
svg.chart .par-line { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 6 4; fill: none; }
svg.chart .level { stroke: var(--kind-baseline); stroke-width: 1; stroke-dasharray: 1 4; stroke-linecap: round; opacity: 0.9; }
svg.chart .level-hit { stroke: transparent; stroke-width: 12; fill: none; }   /* easy to point at */
svg.chart .level-mark:hover .level { stroke-width: 2; opacity: 1; }
svg.chart .lv-label { cursor: default; }
svg.chart .leader { stroke: var(--axis); stroke-width: 1; fill: none; }
svg.chart .drop { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 2 3; }
svg.chart .lv-name { font-size: 11px; fill: var(--text); }
svg.chart .lv-par { font-weight: 700; letter-spacing: 0.08em; }
svg.chart .lv-note { font-size: 9.5px; fill: var(--text-3); }
svg.chart .mark:not(.best) .m-record { opacity: 0.75; }
svg.chart .mark.off-front { opacity: 0.45; }
svg.chart .mark.off-front:hover, svg.chart a:focus .mark { opacity: 1; }
svg.chart a { cursor: pointer; }
svg.chart a:focus { outline: none; }
svg.chart a:focus .hit, svg.chart a:focus-visible .hit { fill: var(--hover); stroke: var(--accent); stroke-width: 1.5; }
.legend-icon .par-line { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.legend-icon .level { stroke: var(--kind-baseline); stroke-width: 1.5; stroke-dasharray: 1 3; stroke-linecap: round; fill: none; }
.chart-tip {
  --px: 2px; --pl: var(--text); --ps: var(--border-strong);
  position: absolute; z-index: 2; pointer-events: none; min-width: 9rem; max-width: 18rem;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  font: var(--fs-xs)/1.5 var(--mono); color: var(--text-2);
}
.chart-tip[hidden] { display: none; }
.chart-tip strong { display: block; color: var(--text); font-size: var(--fs-sm); font-family: var(--font); }
.chart-tip span { display: block; white-space: nowrap; }
.explorer-controls { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: end; margin: 0 0 var(--sp-3); }
.axis-control { display: grid; grid-template-columns: auto auto; gap: var(--sp-1) var(--sp-3); align-items: center; }
.axis-control .label { grid-column: 1 / -1; margin: 0; }
.axis-control select {
  font: 500 var(--fs-sm)/1.2 var(--font); color: var(--text); background: var(--surface);
  border: 2px solid var(--border-strong); border-radius: 0; padding: 0.45rem 0.6rem; max-width: 100%;
}
.axis-control select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.log-toggle { display: inline-flex; align-items: center; gap: 0.35rem; font: 600 var(--fs-xs)/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); cursor: pointer; }
.log-toggle input { accent-color: var(--accent); margin: 0; }
.log-toggle:has(input:disabled) { opacity: 0.5; cursor: default; }
.seg > button { cursor: pointer; }
.seg > button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
table.designs td:first-child { white-space: nowrap; }

/* the explorer's point selector and the scaling view (svgplot.line_chart; charts.js) */
.point-control { display: grid; gap: var(--sp-1); align-items: center; }
.point-control .label { margin: 0; }
.point-control .seg { flex-wrap: wrap; }
.point-note { color: var(--text-2); margin: 0 0 var(--sp-2); }
.point-note .measured { color: var(--accent-ink); font-weight: 600; }
#scaling { margin-top: var(--sp-6); }
svg.chart .series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .s-reference { stroke: var(--kind-reference); }
svg.chart .s-record { stroke: var(--kind-record); }
svg.chart .s-baseline { stroke: var(--kind-baseline); stroke-dasharray: 5 4; }
svg.chart .series-hit { fill: none; stroke: transparent; stroke-width: 12; }
svg.chart .series-name .lv-name { font-size: 11px; fill: var(--text); }
svg.chart.lines .series { transition: opacity 0.12s; }
/* pointing at (or focusing) a line picks it out; pointing at empty plot dims nothing */
svg.chart.lines:has(.series:hover) .series:not(:hover),
svg.chart.lines:has(.series:focus-within) .series:not(:focus-within) { opacity: 0.3; }
svg.chart.lines .series:hover .series-line, svg.chart.lines .series:focus-within .series-line { stroke-width: 3; }
svg.chart.lines .series:hover .series-name .lv-name,
svg.chart.lines .series:focus-within .series-name .lv-name { font-weight: 700; }
/* a name's leader is dotted, so a line that ends early (not measured further) does not seem to run on */
svg.chart.lines .leader { stroke-dasharray: 1 3; stroke-linecap: round; }
ul.legend li[hidden] { display: none; }

/* a detail page (build.py record_page, reference_detail_page): the overview's three cards, the two columns, the
   netlist card's tabs, the area-time plot, the schematic (gen_schematics.py's SVG, inline: its own scoped style
   reads these tokens), the critical path */
.dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-2); }
@media (max-width: 66rem) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash .score-card { grid-column: 1 / -1; } }
@media (max-width: 42rem) { .dash { grid-template-columns: minmax(0, 1fr); } }
/* side by side, the cards share their five rows (label, number, the line under it, the field's line, the body:
   build.py mcard), so a line that wraps in one card moves its neighbours' parts with it and the rules line up;
   in two columns the score card takes the next five rows, its own gap above it */
@media (min-width: 42.01rem) {
  .dash { row-gap: 0; }
  .dash > .mcard { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}
@media (min-width: 42.01rem) and (max-width: 66rem) { .dash > .score-card { margin-top: calc(var(--sp-4) + var(--px)); } }
.mcard { background: var(--surface); margin: var(--px) var(--px) calc(3 * var(--px));
  padding: var(--sp-4) 1.15rem 1rem; min-width: 0; }
.mcard > .label { margin: 0 0 0.2rem; }
.mcard .big { margin: 0; font: 700 2.15rem/1.1 var(--mono); letter-spacing: -0.02em; color: var(--text); overflow-wrap: anywhere; }
/* a digit group's narrow space: the monospace face draws it a whole figure wide (0.6em), so "2 479" read as two
   numbers; a negative letter-spacing leaves it about a quarter of an em */
.mcard .big .g { letter-spacing: -0.33em; }
.mcard .big .unit { font-size: 0.45em; font-weight: 500; color: var(--text-3); margin-left: 0.3em; letter-spacing: 0; }
.mcard .sub { margin: 0.2rem 0 0.7rem; font-size: 0.8rem; color: var(--text-2); line-height: 1.45; }
/* a card's rows: a quiet term beside its value, one typeface (figures tabular), no small capitals */
dl.mrows { display: grid; grid-template-columns: 5.8rem minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0;
  padding: 0.6rem 0 0; border-top: 1px solid var(--border); font-size: 0.86rem; line-height: 1.45;
  font-variant-numeric: tabular-nums; }
dl.mrows dt { color: var(--text-3); font-size: 0.8rem; }
dl.mrows dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dl.mrows .mpar { display: block; font-size: 0.8rem; color: var(--text-3); }   /* par's name and number, under */
dl.mrows dd a { white-space: nowrap; }             /* a design's name ("late-carry") never breaks at its hyphen */
dl.mrows + dl.mrows { margin-top: 0.6rem; }
dl.mfacts { font-size: 0.8rem; }
dl.mfacts dd { color: var(--text-2); }
.tag { font-size: 0.72rem; color: var(--text-3); }
.meter { display: flex; gap: 2px; height: 8px; border-radius: 0; background: var(--sunken); overflow: hidden; margin: 0 0 0.35rem; }
.meter > span { display: block; flex-basis: 0; min-width: 4px; }
.meter .m-beat { background: var(--accent); }
.meter .m-tie { background: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
.meter .m-trade { background: var(--axis); }
.meter .m-behind { background: transparent; }
.beats { margin: 0; font-size: 0.92rem; }
.mcard .beats + .fine { margin: 0.1rem 0 0.6rem; }
.mboard { margin: 0.6rem 0 0; }       /* across the card under the rows, as the beats/matches line above them */
.mboard .fine { margin: 0; }
.fine { margin: 0.3rem 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-2); }
.dash-note { margin: 0 0 var(--sp-5); max-width: 62rem; }     /* the next card's frame keeps clear */
.dash-note .fine { margin: 0.2rem 0; }
.dash-note details.reveal { margin: 0; }
.dash-note details.reveal > summary { font: 0.78rem/1.5 var(--font); }     /* the note's face, as the line above it */
.dash-note details.reveal > .fine { margin: 0.35rem 0; }
/* the two columns of a detail page, under the sources (across the page): the netlist takes the room, the record's
   facts a rail beside it; both shrink together (a rail held at its widest left the netlist's tables to scroll),
   and under 72rem they stand one under the other, the netlist first */
.split-detail { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 72.01rem) {
  .split-detail { grid-template-columns: minmax(0, 2.25fr) minmax(15rem, 1fr); }
  /* a record's checker card (build.py detail_layout's `more`) goes under the netlist, beside the rest of the side
     column: the first row is the netlist's height, the second takes the rest */
  .split-more { grid-template-rows: auto 1fr; }
  .split-more > .col-main { grid-column: 1; grid-row: 1; }
  .split-more > .col-side { grid-column: 2; grid-row: 1 / span 2; }
  .split-more > .col-more { grid-column: 1; grid-row: 2; }
}
#sources .codebox-dl { font: 600 var(--fs-xs)/1 var(--mono); color: var(--link); }
@media (min-width: 40.01rem) {           /* the main column is wide enough for a term beside its value */
  .col-main dl.facts { grid-template-columns: max-content minmax(0, 1fr); }
  .col-main dl.facts dt { padding-bottom: 0.55rem; border-bottom: 1px solid var(--border); }
}
.col-side dl.facts dt { padding-top: 0.45rem; }
.col-side dl.facts dd { padding: 0.1rem 0 0.45rem; }
/* tabs in a card (page.py's tabs; site.js): without the script, links to panes that stand one under the other */
.tabs-nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin: 0 0 var(--sp-4); border-bottom: 1px solid var(--border); }
.tabs-nav > a { display: inline-flex; align-items: center; font: 700 var(--fs-xs)/1 var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-3); padding: 0.7rem 0 0.6rem; margin-bottom: -1px;
  border-bottom: 3px solid transparent; text-decoration: none; }
.tabs-nav > a:hover { color: var(--text); }
.tabs-nav > a[aria-selected="true"] { color: var(--text); border-bottom-color: var(--nav-on); }
.tabs-pane[hidden] { display: none; }
.tabs-pane + .tabs-pane { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.js-tabs > .tabs-pane + .tabs-pane { margin-top: 0; padding-top: 0; border-top: 0; }
.tabs-pane > .tabs-pane-title { margin: 0 0 var(--sp-2); font: 700 var(--fs-xs)/1.4 var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-ink); }
/* with the tabs, the tab names the pane: its title stays for assistive technology (heading navigation), out of
   sight, as the property panel's */
.js-tabs .tabs-pane-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tabs-pane { position: relative; }
.tabs-pane > :last-child { margin-bottom: 0; }
/* the size a pane shows (build.py scale_label), at its top right; a drawing or a box below it starts under it */
.tabs-pane > .pane-scale { float: right; margin: 0.3rem 0 0 var(--sp-4); }      /* beside the first line only */
.tabs-pane > .pane-scale + :is(figure, .empty, .table-wrap, details) { clear: right; }
@media (max-width: 40rem) { .tabs-pane > .pane-scale { float: none; margin: 0 0 var(--sp-2); } }   /* its own line */
svg.chart.pa .iso { fill: none; stroke: var(--kind-reference); stroke-width: 1; opacity: 0.55; }
svg.chart.pa .halo, .legend-icon .halo { fill: none; stroke: var(--text); stroke-width: 1.6; }
.legend-icon .iso { fill: none; stroke: var(--kind-reference); stroke-width: 1.2; opacity: 0.7; }
svg.chart.pa .dlabel { fill: var(--text); font-family: var(--font); font-size: 12px; font-weight: 600; }
svg.chart.pa .ctr { fill: var(--text-2); font-size: 11px; font-weight: 600; }
svg.chart.pa .mark.subject { opacity: 1; }
svg.chart.pa .mark.clamped { opacity: 0.55; }
tr.is-subject td { background: var(--surface-2); }
tr.is-subject td:first-child { box-shadow: inset 3px 0 0 var(--text); }
.sch-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-2); }
.sch-tools[hidden] { display: none; }
.sch-tools button { font: 600 var(--fs-xs)/1 var(--mono); padding: 0.45rem 0.65rem; border-radius: 0;
  border: 2px solid var(--border-strong); border-bottom-width: 4px; background: var(--surface); color: var(--text); cursor: pointer; }
.sch-tools button:focus-visible, .sch-box:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sch-find { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.sch-find input { font: var(--fs-xs)/1.2 var(--mono); padding: 0.4rem 0.55rem; width: 14rem; max-width: 100%;
  border: 2px solid var(--border-strong); border-radius: 0; background: var(--surface); color: var(--text); }
.sch-find input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sch-find .fine { margin: 0; }
.sch-box { overflow: auto; max-height: 70vh; border: 2px solid var(--border-strong); border-radius: 0;
  background: var(--surface); padding: var(--sp-2); }
/* without the script the drawing is shrunk to the box (a blank corner of a large drawing tells nothing); the
   script's zoom sets its size */
.sch-box svg.sch { display: block; max-width: 100%; height: auto; }
.sch-box.zoomable svg.sch { max-width: none; }
/* shown smaller than its size, the critical path keeps its width on screen */
.sch-box:not(.zoomable) svg.sch line.crit, .sch-box.zoomed-out svg.sch line.crit,
.sch-box:not(.zoomable) svg.sch .c.crit path, .sch-box.zoomed-out svg.sch .c.crit path,
.sch-box:not(.zoomable) svg.sch .c.crit circle, .sch-box.zoomed-out svg.sch .c.crit circle {
  vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.sch-box.no-crit svg.sch .crit path, .sch-box.no-crit svg.sch .crit circle, .sch-box.no-crit svg.sch .crit rect,
.sch-box.no-crit svg.sch line.crit { stroke: var(--text-2); stroke-width: 1; vector-effect: none; }
.sch-box.no-crit svg.sch circle.j.crit { fill: var(--text-2); }
.sch-box.no-crit svg.sch .crit .cellref { fill: var(--text-3); }
.sch-box svg.sch .c:hover path, .sch-box svg.sch .c:hover circle { stroke: var(--link); stroke-width: 2; }
.sch-box svg.sch .c { scroll-margin: 25vh 0; }              /* a followed link leaves its cell clear of the edge */
/* the finder's hits; the cell a critical-path link (or the finder's Enter) points at, with the script or as the
   URL's target, is filled as well */
.sch-box svg.sch .c.hit path, .sch-box svg.sch .c.hit circle {
  stroke: var(--link); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sch-box svg.sch .c.hit .cellref { fill: var(--link); }
.sch-box svg.sch .c.picked path, .sch-box svg.sch .c.picked circle,
.sch-box svg.sch .c:target path, .sch-box svg.sch .c:target circle {
  stroke: var(--link); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.sch-box svg.sch .c.picked path, .sch-box svg.sch .c:target path { fill: color-mix(in srgb, var(--link) 25%, transparent); }
.sch-box svg.sch .c.picked .cellref, .sch-box svg.sch .c:target .cellref { fill: var(--link); font-weight: 700; }
table.path td:nth-child(2), table.path td:nth-child(4) { white-space: nowrap; }
/* eight columns beside the record's rail: a head may take two lines ("arrival / (ps)"), the cells less padding */
table.path thead th { white-space: normal; vertical-align: bottom; }
table.path th, table.path td { padding-left: 0.55rem; padding-right: 0.55rem; }
/* the checker's files beside the record's rail: a whole sha256 on one line, a long name broken after a slash */
table.hashes th, table.hashes td { padding-left: 0.6rem; padding-right: 0.6rem; }
table.hashes td:first-child > code { white-space: normal; }
ol.chain { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0; margin: 0 0 var(--sp-4);
  padding: 0; font-size: var(--fs-sm); line-height: 1.6; }
ol.chain li { white-space: nowrap; }
ol.chain li + li::before { content: "→"; color: var(--text-3); margin: 0 0.45rem; }
ol.chain .muted { font-family: var(--mono); font-size: 0.78rem; }
.licence { padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-left: 4px solid var(--kind-reference);
  border-radius: 0; font-size: var(--fs-sm); }

.unlinked { border-bottom: 1px dotted var(--border-strong); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc-side { position: static; max-height: none; }
  .doc-side .toc ul { display: flex; flex-wrap: nowrap; overflow-x: auto; border-left: 0; padding-bottom: var(--sp-2); }
  .doc-side .toc li { flex: none; }
  .doc-side .toc a { display: inline-block; white-space: nowrap; border: 0; background: var(--surface); padding: 0.3rem 0.7rem; margin: 2px;
    box-shadow: 0 -2px 0 0 var(--border-strong), 0 2px 0 0 var(--border-strong), -2px 0 0 0 var(--border-strong), 2px 0 0 0 var(--border-strong); }
  .doc-side .toc a:hover { border: 0; }
  /* the hero: the text over the art */
  .hero-sky { grid-template-columns: minmax(0, 1fr); }
  .hero-art { margin-left: 0; }
  .hero-text { padding: 0 var(--sp-6) var(--sp-4) 0; }
  .hero-art { justify-content: flex-end; }
  .loop { grid-template-columns: minmax(0, 1fr); }
}

/* where the three buttons just fit beside the art, the art reaches less far under the text: at -7rem the
   far tree stood behind "The proving guide" (about 1080-1140 px wide) */
@media (min-width: 62.01rem) and (max-width: 72rem) {
  .hero-art { margin-left: -4rem; }
}

@media (max-width: 40rem) {
  :root { --gutter: 1rem; --fs-2xl: 1.9rem; --fs-xl: 1.6rem; --fs-lg: 1.25rem; --fs-stat: 1.5rem; }
  body { font-size: 15px; }
  .site-header .wrap { padding-top: var(--sp-2); padding-bottom: var(--sp-2); gap: var(--sp-2); }
  .site-nav { width: calc(100% - 4px); flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; gap: 0; padding: 3px; }
  .site-nav a { padding: 0.5rem 0.36rem; font: 600 0.78rem/1 var(--font-display); flex: none; }
  .site-nav a[aria-current="page"] { margin: 0 2px; }
  .site-nav a:focus-visible { outline-offset: -3px; }    /* inside the strip, which scrolls and so clips */
  main { padding-top: var(--sp-4); }
  .card { padding: var(--sp-4); }
  /* the hero on a phone: tighter, the art smaller, the numbers in a row of three */
  .hero { --px: 3px; }
  .hero-sky { padding: var(--sp-5) 0 0 var(--sp-4); }
  .hero-text { padding-right: var(--sp-4); }
  .hero h1 { font-size: 1.85rem; }
  .hero-lead { font-size: var(--fs-base); }
  .hero .btn-row { gap: var(--sp-2) var(--sp-3); }
  /* the drawing cut to its right side (pixelart.scene's slice): the chip, the ball, the flag */
  .hero-art .px { width: 100%; aspect-ratio: 94 / 66; }
  .hero-ground { padding: var(--sp-4) var(--sp-3); }
  .course { padding: var(--sp-4) var(--sp-3) calc(var(--sp-5) + 18px); border-width: 2px; }
  .course > .section-head h2 { font-size: var(--fs-lg); }
  .task-card { padding: var(--sp-4); }
  .card-flush { padding: 0; }
  .card-flush > .card-head, ol.board > li, .board-empty, .card-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .page-head { gap: var(--sp-3); padding-bottom: 52px; }
  .head-main { padding-right: 0; }
  .page-head > .stats, .page-head > #numbers { margin-right: var(--px); }
  .stats { gap: var(--sp-2) var(--sp-5); }
  .stat { text-align: left; }
  /* the page head's Par and Record lines ("87 174 µm² × 4 cycles × 10.7 ns period") wrap rather than widen the page */
  .stat .stat-note { white-space: normal; }
  pre.code { font-size: 0.76rem; padding: var(--sp-3); }
  table.wide { min-width: 40rem; }      /* many columns: scroll rather than squeeze the prose */
  /* page.table(stack=True): each row a small card, the first cell on top, every other cell under
     its column's name, three to a line */
  table.stack, table.stack tbody { display: block; }
  table.stack thead { display: none; }
  table.stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; white-space: normal; }
  table.stack td:first-child { grid-column: 1 / -1; min-width: 0; }
  table.stack td:not(:first-child)::before { content: attr(data-label); display: block; font: 600 0.66rem/1.4 var(--mono); letter-spacing: 0.06em; color: var(--text-3); }
  table.stack.closure td:last-child code { white-space: normal; overflow-wrap: anywhere; }   /* a hash in a third of a row */
  table.stack tr.par-row { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--accent); }
  table.stack tr.par-row td, table.stack tr.par-row td:first-child { background: none; box-shadow: none; }
  dl.facts { grid-template-columns: minmax(0, 1fr); }
  dl.facts dt { padding-bottom: 0; border-bottom: 0; }
  ol.board > li { grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: var(--sp-2); }
  /* charts: the compact drawings' text set larger */
  .chart-box svg.chart text { font-size: 15px; }
  .chart-box svg.chart .axis-title { font-size: 15px; }
  .chart-box svg.chart .series-name .lv-name { font-size: 13px; }
}

/* a small phone (360 px): the six nav items still fit without scrolling "About" out of sight */
@media (max-width: 24rem) {
  .site-nav a { padding-left: 0.2rem; padding-right: 0.2rem; }
}
@media (max-width: 21rem) {
  .site-nav a { font-size: 0.7rem; padding-left: 0.15rem; padding-right: 0.15rem; }
  /* a task card's three numbers in a 320 px column ("3 729 636" twice, then the share): a smaller figure, and the
     share's column at its narrowest ("UNDER" over "PAR", as it wraps here anyway), so the numbers keep their gap */
  .task-card .stats { grid-template-columns: minmax(0, auto) minmax(0, auto) min-content; }
  .task-card .stat dd { font-size: var(--fs-sm); }
}

@media (forced-colors: active) {
  .m-record, .m-reference { fill: CanvasText; }
  .m-baseline, .m-reference-ring, .m-banned, .frontier { stroke: CanvasText; }
  .badge::before, .bar > span { background: CanvasText; }
  /* the pixel frames are shadows, which forced colours drop: a plain border instead */
  .card, .task-card, .loop > li, .mcard, .props, .hero, .btn, .site-nav, .chart-tip, ul.roadmap > li,
  .empty, .badge, .seg, .toc a, .page-head > .stats, .page-head > #numbers > .stats,
  .page-head > #numbers > .pdk > .stats { border: 2px solid CanvasText; }
  .page-head { border-bottom: 3px solid CanvasText; }
  .site-nav a[aria-current="page"], .seg > [aria-pressed="true"], .seg > .on {
    forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

@media print {
  .site-header, .site-footer, .copy, .doc-side, .hero-art { display: none; }
  /* a detail page's netlist prints its three panes, each under its title, as without the script */
  .tabs-nav, .sch-tools { display: none; }
  .tabs-pane[hidden] { display: block; }
  .js-tabs > .tabs-pane + .tabs-pane { margin-top: var(--sp-5); padding-top: var(--sp-4);
    border-top: 1px solid var(--border); }
  .js-tabs .tabs-pane-title { position: static; width: auto; height: auto; margin: 0 0 var(--sp-2); overflow: visible;
    clip: auto; clip-path: none; }
  .sch-box { max-height: none; overflow: visible; }
  .sch-box.zoomable svg.sch { max-width: 100%; height: auto; }      /* the whole drawing, whatever its zoom */
  body { background: #fff; }
  .card { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* nothing moves: no lift on hover, no turning disclosure arrows, no fades */
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .task-card:hover, .btn:hover { transform: none; top: 0; }
}