/* Crane WPT results: a living standard.
   Faces - Source Serif 4 for prose: a transitional book face drawn for continuous
   screen reading, whose optical-size axis gives captions, prose and headings each
   their own cut, the way a printed standard is set. Public Sans for data: drawn for
   the U.S. Web Design System, a public-standards document system; neutral, with
   tabular lining figures for columns of counts. Source Code Pro for paths: it shares
   Source Serif's proportions, so a path set inside a sentence does not jump. */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/public-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/public-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/source-code-pro-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/source-code-pro-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --paper: #ffffff;
  --paper-2: #f7f8f9;      /* the rail, table heads */
  --ink: #202124;
  --ink-2: #5a5e63;        /* secondary text, 6.5:1 on paper */
  --rule: #d9dce0;         /* hairlines */
  --rule-strong: #b9bec4;
  --link: #0b57a8;
  --link-visited: #5a3d99;
  --pass: #2e7d32;         /* conformance green */
  --pass-2: #a9cfab;       /* some passing */
  --fail: #b3261e;         /* red is failure: failed subtests, not passing */
  --fail-wash: #fbeceb;
  --block: #5b6168;        /* grey is blocking: the four blocking standings */
  --block-wash: #e7e9ec;
  --block-seg: #7c828a;    /* blocking in meters, darker than "no subtests" */
  --note: #f4ecd2;         /* pale amber notes */
  --note-ink: #5c4a12;
  --note-rule: #e2d5ab;
  --empty: #c9cdd2;
  --unrun: #eceef0;
  --focus: #0b57a8;
  --here: #e8f0fa;         /* the rail's current entry */
  --select: #cfe0f5;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  --rail: 17.5rem;
  --gutter: 3.25rem;       /* the numbered margin */
  --measure: 68ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15171a; --paper-2: #1c1f23; --ink: #e6e7e9; --ink-2: #a9adb3;
    --rule: #33373c; --rule-strong: #4a4f55; --link: #8fb8f0; --link-visited: #b9a3e8;
    --pass: #79c07d; --pass-2: #3d6b40; --fail: #f08a80; --fail-wash: #3a2220;
    --block: #b8bdc3; --block-wash: #2c3035; --block-seg: #9aa0a7;
    --note: #2d2818; --note-ink: #e6d7a4; --note-rule: #4c4326;
    --empty: #5b6067; --unrun: #2a2d31; --focus: #8fb8f0; --here: #1f2a38; --select: #2b4263;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #15171a; --paper-2: #1c1f23; --ink: #e6e7e9; --ink-2: #a9adb3;
  --rule: #33373c; --rule-strong: #4a4f55; --link: #8fb8f0; --link-visited: #b9a3e8;
  --pass: #79c07d; --pass-2: #3d6b40; --fail: #f08a80; --fail-wash: #3a2220;
  --block: #b8bdc3; --block-wash: #2c3035; --block-seg: #9aa0a7;
  --note: #2d2818; --note-ink: #e6d7a4; --note-rule: #4c4326;
  --empty: #5b6067; --unrun: #2a2d31; --focus: #8fb8f0; --here: #1f2a38; --select: #2b4263;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.25rem; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--serif);
  font-optical-sizing: auto; font-kerning: normal;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--select); color: var(--ink); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
code, .path { font-family: var(--mono); font-size: 0.88em; font-variant-ligatures: none; }
strong { font-weight: 650; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

html { scrollbar-color: var(--rule-strong) transparent; }

/* ------------------------------------------------------------------ frame */
/* The document comes first in the source (numbers first, for every reader); the
   contents rail is placed in the left column by the grid. */
.frame { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.frame > .doc { grid-column: 2; grid-row: 1; }
.frame > .toc { grid-column: 1; grid-row: 1; }

.toc {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper-2); border-right: 1px solid var(--rule);
  font: 400 0.875rem/1.35 var(--sans); font-variant-numeric: tabular-nums;
  padding: 1.6rem 0 2rem;
}
.toc-title { margin: 0; padding: 0 1.25rem 0.75rem; font: 600 0.8rem/1 var(--sans); letter-spacing: 0.02em; color: var(--ink-2); text-transform: uppercase; }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list a {
  display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: baseline; column-gap: 0.25rem;
  padding: 0.3rem 1.25rem 0.3rem 1rem; color: var(--ink); text-decoration: none;
}
.toc-list a:hover { background: color-mix(in srgb, var(--here) 70%, transparent); }
.toc-list a[aria-current="page"] { background: var(--here); color: var(--link); }
.toc-list a[aria-current="page"] .toc-name { font-weight: 600; }
.toc-list .secno { color: var(--ink-2); text-align: right; padding-right: 0.45rem; }
.toc-list a[aria-current="page"] .secno { color: var(--link); }
.toc-name { overflow-wrap: anywhere; }
.toc-list .toc-suite .toc-name { font-family: var(--mono); font-size: 0.82rem; }
.toc-count { color: var(--ink-2); font-size: 0.8rem; }
.toc-back { margin-top: 0.35rem; border-top: 1px solid var(--rule); padding-top: 0.35rem; }

/* ------------------------------------------------------------------ document */
.doc { padding: 2.25rem clamp(1rem, 4vw, 3.5rem) 4rem calc(var(--gutter) + clamp(1rem, 3vw, 2.5rem)); max-width: 78rem; min-width: 0; }

.head { border-bottom: 1px solid var(--rule); padding-bottom: 1.2rem; margin-bottom: 1.6rem; }
.head h1 {
  margin: 0; font: 620 clamp(2.1rem, 1.3rem + 2.6vw, 3.05rem)/1.06 var(--serif);
  font-variation-settings: "opsz" 60; letter-spacing: -0.018em;
}
.head .h1-rest { font-weight: 380; }
.subtitle { margin: 0 0 0.9rem; font: 500 1.02rem/1.4 var(--sans); color: var(--ink-2); }
.nowrap { white-space: nowrap; }
.quiet { color: var(--ink-2); }
.head-meta { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0.45rem; font: 400 0.875rem/1.45 var(--sans); }
.head-meta > div { display: contents; }
.head-meta dt { color: var(--ink-2); font-weight: 500; }
.head-meta dd { margin: 0; padding-right: 1.5rem; font-variant-numeric: tabular-nums; }
.head-meta dd code { font-size: 0.86rem; }

/* The headline: the WPT subtest totals, in numbers, before anything else. */
.headline { margin: 1.2rem 0 1.3rem; padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.headline-figure { margin: 0; font: 600 clamp(2.4rem, 6.2vw, 4.4rem)/1.02 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.hl-of { font-weight: 400; color: var(--ink-2); }
.headline-label { margin: 0.35rem 0 0.9rem; font: 600 0.82rem/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.headline-counts, .figures-counts { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2.2rem; font: 400 0.9rem/1.35 var(--sans); }
.headline-counts > div, .figures-counts > div { display: flex; flex-direction: column-reverse; }
.headline-counts dt, .figures-counts dt { color: var(--ink-2); font-size: 0.8rem; }
.headline-counts dd { margin: 0; font: 600 1.15rem/1.25 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.headline-counts .blk dd, .figures-counts .blk dd { color: var(--block); }
.headline-counts .fail dd, .figures-counts .fail dd { color: var(--fail); }

/* A suite's, directory's or file's own numbers, opening its section. */
.figures { margin: 0.2rem 0 1rem; }
.figures-main { margin: 0 0 0.45rem; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; font-variant-numeric: tabular-nums lining-nums; }
.fg-pass { font: 600 clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem)/1.05 var(--serif); letter-spacing: -0.015em; }
.fg-of { font: 400 clamp(1.15rem, 1rem + 0.6vw, 1.4rem)/1.1 var(--serif); color: var(--ink-2); margin-left: -0.35rem; }
.fg-label { font: 600 0.74rem/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.figures-counts { gap: 0.35rem 1.8rem; }
.figures-counts dd { margin: 0; font: 600 1rem/1.25 var(--serif); font-variant-numeric: tabular-nums lining-nums; }

.spark-link { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); }
.spark-link:hover .spark-text { text-decoration: underline; text-underline-offset: 0.18em; }
.spark-link svg { display: block; border-bottom: 1px solid var(--rule-strong); }
.spark-text { color: var(--link); }

/* sections: numbered margins */
h2 { position: relative; font: 600 1.6rem/1.2 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -0.01em; margin: 0 0 0.7rem; }
h2 .secno {
  position: absolute; right: calc(100% + 0.9rem); top: 0.3rem; width: var(--gutter); text-align: right;
  font: 500 1.05rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2);
}
h2 .secno:empty { display: none; }
h2 code { font-size: 0.92em; font-weight: 600; }
.h-link { color: var(--ink); text-decoration: none; }
.h-link:hover { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.self {
  font: 400 0.95rem var(--sans); color: var(--ink-2); text-decoration: none; margin-left: 0.4rem;
  opacity: 0; transition: opacity 120ms ease-out;
}
h2:hover .self, .self:focus-visible, .sub:hover .self { opacity: 1; }
.self:hover { color: var(--link); }
@media (hover: none) { .self { opacity: 0.55; } }

.front, .contents, .suite, .back { margin: 0 0 3rem; }
.front > .front-prose > p, .back > p { max-width: var(--measure); margin: 0 0 0.75rem; }
.front { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(15rem, 21rem); column-gap: 2.75rem; align-items: start; }
.front > h2 { grid-column: 1 / -1; }
.front > .note { margin: 0.2rem 0 0; }
.front-prose { font-size: 1rem; line-height: 1.58; }
.front .note p { font-size: 0.95rem; line-height: 1.5; }
.suite { padding-top: 1.4rem; border-top: 1px solid var(--rule); }

/* the numbered contents */
.contents-list { list-style: none; margin: 0; padding: 0; max-width: 52rem; font: 400 0.9rem/1.35 var(--sans); font-variant-numeric: tabular-nums; border-top: 1px solid var(--rule); }
.contents-list > li { display: grid; grid-template-columns: minmax(10rem, 1fr) auto 6.5rem 6.5rem; align-items: baseline; column-gap: 1.25rem; padding: 0.4rem 0.25rem; border-bottom: 1px solid var(--rule); }
.contents-list a { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.contents-list .secno { display: inline-block; min-width: 1.6rem; text-align: right; color: var(--ink-2); font-weight: 500; }
.contents-list a:hover .secno { color: var(--link); }
.contents-list code { font-size: 0.86rem; }
.cl-figs, .cl-files, .cl-blk { text-align: right; white-space: nowrap; color: var(--ink-2); font-size: 0.84rem; }
.cl-figs b { color: var(--ink); font-weight: 600; }
.cl-back { grid-template-columns: 1fr; }

.st { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.04em; white-space: nowrap; }
.st-issue { color: var(--block); }
.blk { color: var(--block); }
.fail { color: var(--fail); }

.note { background: var(--note); border: 1px solid var(--note-rule); border-radius: 3px; padding: 1rem 1.25rem 1.05rem; max-width: 52rem; margin: 1.5rem 0 0; }
.note p { margin: 0 0 0.6rem; max-width: var(--measure); }
.note p:last-child { margin-bottom: 0; }
.note-label { font: 600 0.82rem/1.3 var(--sans); color: var(--note-ink); }
.self-demo { font-family: var(--sans); color: var(--ink-2); }
.legend { margin: 0.8rem 0 0; display: grid; gap: 0.35rem; font: 400 0.84rem/1.35 var(--sans); }
.legend dt { font-weight: 600; display: flex; align-items: center; gap: 0.45rem; }
.legend dd { margin: 0.1rem 0 0 1.4rem; color: color-mix(in srgb, var(--ink) 80%, var(--note)); }
.key { display: inline-block; width: 0.85rem; height: 0.55rem; border-radius: 1px; flex: none; }
.key-clean { background: var(--pass); }
.key-partial { background: var(--pass-2); }
.key-blocking { background: var(--block-seg); }
.key-pass { background: var(--pass); }
.key-fail { background: var(--fail); }
.key-total { height: 0; width: 0.95rem; border-top: 2px solid var(--ink); border-radius: 0; }
.key-empty { background: var(--empty); }
.key-unrun { background: var(--unrun); box-shadow: inset 0 0 0 1px var(--rule-strong); }

/* ------------------------------------------------------------------ boxes */
.boxes { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 0.9rem; }
.box { border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); font: 400 0.9rem/1.4 var(--sans); font-variant-numeric: tabular-nums; min-width: 0; }
.box-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem 0.6rem; border-bottom: 1px solid var(--rule); }
.box-title { margin: 0; font: 650 0.8rem/1.2 var(--sans); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); }
.box-sub { color: var(--ink-2); font-size: 0.82rem; }
a.box-sub { color: var(--link); }
a.box-sub code { font-size: 0.8rem; }

.conf { position: sticky; top: 1rem; }
.conf-body { padding: 0.85rem 1rem 1rem; }
.meter { display: flex; height: 0.5rem; border-radius: 1px; overflow: hidden; background: var(--unrun); margin: 0 0 0.9rem; }
.meter > span, .mini > span { display: block; height: 100%; }
.m-clean { background: var(--pass); }
.m-partial { background: var(--pass-2); }
.m-empty { background: var(--empty); }
.m-blocking { background: var(--block-seg); }
.m-unrun { background: var(--unrun); }
.conf dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35rem; column-gap: 0.75rem; }
.conf dl > div { display: contents; }
.conf dt { display: flex; align-items: center; gap: 0.45rem; }
.conf dd { margin: 0; text-align: right; font-weight: 600; }
.conf .kinds { grid-column: 1 / -1; margin: -0.1rem 0 0.2rem 1.3rem; color: var(--ink-2); font-size: 0.8rem; line-height: 1.5; }
.conf .kinds b { font-weight: 600; color: var(--block); }
.conf .blk dd { color: var(--block); }

/* the tests tables */
.listing { width: 100%; border-collapse: collapse; }
.listing + .listing { border-top: 1px solid var(--rule-strong); }
.listing th, .listing td { padding: 0.32rem 0.75rem; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--rule); }
.listing tbody tr:last-child > * { border-bottom: 0; }
.listing thead th { font: 600 0.74rem/1.3 var(--sans); color: var(--ink-2); background: var(--paper-2); letter-spacing: 0.01em; white-space: nowrap; }
.listing tbody th { font-weight: 400; width: 55%; }
.listing tbody th a { display: inline-flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.listing tbody th code { font-size: 0.83rem; overflow-wrap: break-word; min-width: 0; }
.listing-dirs tbody th code { font-weight: 600; }
.listing .n { text-align: right; white-space: nowrap; color: var(--ink-2); }
.listing .n b { color: var(--ink); font-weight: 600; }
.listing tbody tr:hover > * { background: color-mix(in srgb, var(--paper-2) 80%, transparent); }
.listing tbody tr:target > * { background: var(--here); }
.dir-no { flex: none; font: 500 0.78rem var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); min-width: 2.2rem; }
.tally { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-2); font-size: 0.8rem; white-space: nowrap; }
.tally .blk { font-weight: 600; }
.mini { display: flex; width: 4.5rem; height: 0.35rem; border-radius: 1px; overflow: hidden; background: var(--unrun); flex: none; }
.more-files { margin: 0; padding: 0.6rem 0.75rem 0.7rem; border-top: 1px solid var(--rule-strong); font-size: 0.86rem; color: var(--ink-2); }
.more-files b { color: var(--ink); }

.gate { font: 600 0.74rem/1 var(--sans); letter-spacing: 0.02em; white-space: nowrap; padding: 0.2rem 0.35rem; border-radius: 2px; color: var(--ink-2); }
.gate-clean { color: var(--pass); }
.g-block { color: var(--block); background: var(--block-wash); letter-spacing: 0.04em; }

/* ------------------------------------------------------------------ directory and file pages */
.crumbs ol { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0; font: 400 0.86rem/1.4 var(--sans); }
.crumbs li { display: inline-flex; align-items: baseline; }
.crumbs li + li::before {
  content: ""; display: inline-block; width: 0.38rem; height: 0.38rem; margin: 0 0.6rem 0.08rem 0.45rem;
  border-right: 1.4px solid var(--ink-2); border-top: 1.4px solid var(--ink-2); transform: rotate(45deg);
}
.crumbs code { font-size: 0.82rem; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.head-page .page-title { margin: 0 0 0.9rem; font: 600 clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem)/1.15 var(--serif); letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; }
.page-title code { font-size: 0.86em; font-weight: 600; overflow-wrap: anywhere; }
.page-title .secno { font: 500 1.05rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.head-page .figures { margin-bottom: 0.2rem; }
.file-meta { margin: 1rem 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0.45rem; font: 400 0.875rem/1.45 var(--sans); }
.file-meta > div { display: contents; }
.file-meta dt { color: var(--ink-2); font-weight: 500; }
.file-meta dd { margin: 0; overflow-wrap: anywhere; }
.file-meta code { font-size: 0.84rem; }
.file-meta .gate:not(.g-block) { padding-left: 0; }
.harness { margin: 1rem 0 0; max-width: 60rem; }
.harness-label { margin: 0 0 0.3rem; font: 600 0.8rem/1.3 var(--sans); color: var(--ink-2); }
.msg { font-family: var(--mono); font-size: 0.78rem; line-height: 1.45; margin: 0.2rem 0 0.05rem; padding: 0.4rem 0.6rem; background: var(--paper-2); border-radius: 2px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); max-height: 18rem; overflow: auto; }

.subtests-section { max-width: 60rem; }
.subtests-section > h2 { margin-bottom: 0.4rem; }
.sub-hint { margin: 0 0 0.9rem; font: 400 0.86rem var(--sans); color: var(--ink-2); }
.no-detail { margin: 0; max-width: 60ch; font-size: 1rem; }
.no-detail strong { font-family: var(--sans); font-size: 0.9rem; }
.run + .run { margin-top: 1.4rem; }
.run-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.8rem; margin: 0 0 0.45rem; font: 600 0.9rem/1.4 var(--sans); }
.run-head code { font-weight: 500; font-size: 0.82rem; overflow-wrap: anywhere; }
.run-head .fcount { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.run-head .fcount b { color: var(--ink); }
.subtests { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); font-size: 0.85rem; }
.sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 0.4rem; padding: 0.28rem 0.25rem; border-bottom: 1px solid var(--rule); }
.sub:target { background: var(--here); }
.sub > details > summary, .sub-line { display: grid; grid-template-columns: 1rem 4.6rem minmax(0, 1fr); column-gap: 0.35rem; align-items: baseline; }
.sub > details > summary { list-style: none; cursor: pointer; border-radius: 2px; }
.sub > details > summary::-webkit-details-marker { display: none; }
.sub > details > summary::before {
  content: ""; justify-self: center; width: 0.4rem; height: 0.4rem; margin-bottom: 0.1rem;
  border-right: 1.4px solid var(--ink-2); border-bottom: 1.4px solid var(--ink-2); transform: rotate(-45deg);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sub > details[open] > summary::before { transform: rotate(45deg); }
.sub > details > summary:hover .sub-name { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.18em; }
.sub-line::before { content: ""; }
.sub > details > .msg { margin-left: 5.95rem; }
.mark { font: 650 0.72rem/1.4 var(--sans); letter-spacing: 0.05em; }
.s-pass .mark { color: var(--pass); }
.s-fail .mark { color: var(--fail); }
.s-timeout .mark, .s-notrun .mark, .s-other .mark { color: var(--ink-2); }
.sub-name { overflow-wrap: anywhere; font-family: var(--serif); font-size: 0.92rem; line-height: 1.4; }
.omitted { margin: 0.55rem 0 0; font: 400 0.85rem var(--sans); color: var(--ink-2); }

/* ------------------------------------------------------------------ history */
.chart { margin: 1.4rem 0 0; max-width: 60rem; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-narrow { display: none; }
.chart-svg text { font: 400 11px var(--sans); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart-svg .axis { stroke: var(--rule-strong); stroke-width: 1; }
.chart-svg .mark-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.55; }
.chart-svg .grid { stroke: var(--rule); stroke-width: 1; }
.chart-svg .hit { fill: transparent; }
.chart-svg .hit:hover { fill: color-mix(in srgb, var(--ink) 10%, transparent); }
.band-pass { fill: var(--pass); }
.band-fail { fill: var(--fail); }
.line-total { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.chart-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 0.6rem; font: 400 0.8rem var(--sans); color: var(--ink-2); }
.chart-key > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.gens { margin-top: 1.5rem; font: 400 0.88rem var(--sans); }
.gens > summary { cursor: pointer; color: var(--link); font-weight: 500; list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.gens > summary::-webkit-details-marker { display: none; }
.twisty { flex: none; width: 0.9rem; height: 0.9rem; color: var(--ink-2); transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
.gens[open] > summary .twisty { transform: rotate(90deg); }
.table-wrap { overflow-x: auto; margin-top: 0.8rem; max-height: 32rem; overflow-y: auto; border: 1px solid var(--rule); border-radius: 3px; }
.gens table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.gens th, .gens td { padding: 0.35rem 0.7rem; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.gens th:nth-child(-n+3), .gens td:nth-child(-n+3) { text-align: left; }
.gens thead th { position: sticky; top: 0; background: var(--paper-2); font-weight: 600; color: var(--ink-2); font-size: 0.8rem; }
.gens td.blk { color: var(--block); }
.gens td.fail { color: var(--fail); }
.gens td.est { font-style: italic; }
.gens tr.recon td { color: var(--ink-2); }

/* ------------------------------------------------------------------ what site.js adds
   Everything below styles elements the script creates; without script none of
   them exist and the page is whole. */
[hidden] { display: none !important; }

/* the interactive history chart */
.chart-live { max-width: 64rem; }
.chart-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.8rem 1.5rem; margin: 0 0 0.9rem; }
.readout { min-width: 0; flex: 1 1 28rem; min-height: 5.6rem; }
.readout p { margin: 0; }
.ro-figure { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.55rem; font-variant-numeric: tabular-nums lining-nums; }
.ro-figure b { font: 600 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem)/1.1 var(--serif); letter-spacing: -0.015em; }
.ro-of { font: 400 clamp(1.1rem, 1rem + 0.5vw, 1.35rem)/1.1 var(--serif); color: var(--ink-2); margin-left: -0.3rem; }
.ro-label { font: 600 0.72rem/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.ro-meta { margin-top: 0.3rem !important; font: 500 0.86rem/1.45 var(--sans); font-variant-numeric: tabular-nums; }
.ro-meta code { font-size: 0.82rem; }
.ro-detail { margin-top: 0.15rem !important; font: 400 0.82rem/1.5 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ro-detail .fail, .ro-detail .blk { font-weight: 600; }
.ro-event { color: var(--ink); }
.range { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; flex: none; }
.range button { font: 500 0.8rem/1 var(--sans); padding: 0.45rem 0.7rem; border: 0; background: var(--paper); color: var(--ink-2); cursor: pointer; }
.range button + button { border-left: 1px solid var(--rule-strong); }
.range button:hover { color: var(--ink); background: var(--paper-2); }
.range button[aria-pressed="true"] { background: var(--here); color: var(--link); font-weight: 600; }
.chart-plot { position: relative; touch-action: pan-y; cursor: crosshair; border-radius: 2px; }
.chart-plot:focus-visible { outline-offset: 4px; }
.chart-js { display: block; width: 100%; height: auto; overflow: visible; }
.chart-js text { font: 400 11px var(--sans); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart-js .axis { stroke: var(--rule-strong); stroke-width: 1; }
.chart-js .grid { stroke: var(--rule); stroke-width: 1; }
.chart-js .mark-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
.chart-js .mark-label { font-size: 10.5px; fill: var(--ink); }
.chart-js .recon-zone { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.chart-js .band-pass, .chart-svg .band-pass { fill: color-mix(in srgb, var(--pass) 72%, var(--paper)); }
.chart-js .band-fail, .chart-svg .band-fail { fill: color-mix(in srgb, var(--fail) 78%, var(--paper)); }
.chart-js .line-pass { fill: none; stroke: var(--pass); stroke-width: 2; stroke-linejoin: round; }
.chart-js .line-total { stroke-width: 1.5; }
.cross line { stroke: var(--ink); stroke-width: 1; opacity: 0.55; }
.cross .dot-pass { fill: var(--paper); stroke: var(--pass); stroke-width: 2.25; }
.cross .dot-total { fill: var(--paper); stroke: var(--ink); stroke-width: 1.75; }

/* sortable columns */
.listing thead th { padding: 0; }
.sort {
  all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 0.3rem; width: 100%;
  padding: 0.32rem 0.75rem; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit;
}
.listing thead th.n .sort { justify-content: flex-end; }
.sort:hover { color: var(--ink); }
.sort:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sort-ind { display: inline-block; width: 0.6rem; color: var(--link); }
[aria-sort="ascending"] .sort-ind::after { content: "\2191"; }
[aria-sort="descending"] .sort-ind::after { content: "\2193"; }
[aria-sort] .sort { color: var(--ink); }

/* filters: a directory's tests, a file's subtests */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.9rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--rule); font: 400 0.85rem/1.3 var(--sans); }
.toolbar-subs { padding: 0 0 0.8rem; border-bottom: 0; }
.filter, .find-input {
  font: 400 0.875rem/1.3 var(--sans); color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0.4rem 0.6rem; min-width: 0;
}
.filter { width: min(17rem, 100%); }
.filter::placeholder, .find-input::placeholder { color: var(--ink-2); }
.filter:focus-visible, .find-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
  font: 500 0.8rem/1 var(--sans); color: var(--ink); background: var(--paper); cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0.38rem 0.55rem; display: inline-flex; align-items: baseline; gap: 0.4rem;
}
.chip:hover { background: var(--paper-2); }
.chip[aria-pressed="true"] { background: var(--here); border-color: var(--link); color: var(--link); font-weight: 600; }
.chips-label { align-self: center; margin-right: 0.15rem; color: var(--ink-2); font-size: 0.8rem; }
.chip-n { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip-blocking .chip-n { color: var(--block); font-weight: 650; }
.chip-partial .chip-n, .chip-fail .chip-n { color: var(--fail); font-weight: 650; }
.chip-clean .chip-n, .chip-pass .chip-n { color: var(--pass); }
.shown { margin: 0 0 0 auto; color: var(--ink-2); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.none-shown { margin: 0; padding: 0.9rem 1rem; color: var(--ink-2); font-size: 0.86rem; }
.msg-buttons { display: flex; gap: 1rem; flex-basis: 100%; }
.text-button { font: 500 0.82rem var(--sans); color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-underline-offset: 0.18em; }
.text-button:hover { text-decoration-color: currentColor; }
.sub.is-target { background: var(--here); }

/* the search */
.find { padding: 0 1.25rem 1.1rem; margin: 0 0 0.9rem; border-bottom: 1px solid var(--rule); position: relative; }
.find-label { display: flex; justify-content: space-between; align-items: center; margin: 0 0 0.45rem; font: 600 0.8rem/1 var(--sans); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); }
.find-label kbd { font: 500 0.72rem/1 var(--mono); text-transform: none; border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 3px; padding: 0.12rem 0.32rem; color: var(--ink-2); background: var(--paper); }
.find-input { display: block; width: 100%; }
@media (hover: none) { .find-label kbd { display: none; } }
.find-results { list-style: none; margin: 0.45rem 0 0; padding: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; max-height: 24rem; overflow-y: auto; }
.find-results li + li { border-top: 1px solid var(--rule); }
.find-results a { display: block; padding: 0.38rem 0.6rem; color: var(--ink); text-decoration: none; }
.find-results [aria-selected="true"] a, .find-results a:hover { background: var(--here); }
.find-base { display: block; font-size: 0.8rem; font-weight: 600; overflow-wrap: anywhere; }
.find-parent { display: block; font: 400 0.74rem/1.35 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.find-note { margin: 0.4rem 0 0; font: 400 0.76rem/1.3 var(--sans); color: var(--ink-2); }
.doc > .find { padding: 0 0 1.1rem; margin: 0 0 1.3rem; }

/* the rail follows the section being read */
.toc-list a.is-here { background: color-mix(in srgb, var(--here) 80%, transparent); }
.toc-list a.is-here .toc-name, .toc-list a.is-here .secno { color: var(--link); }

.foot { border-top: 1px solid var(--rule); padding-top: 1.2rem; font: 400 0.82rem/1.5 var(--sans); color: var(--ink-2); max-width: 60rem; }

/* ------------------------------------------------------------------ narrow */
@media (max-width: 82rem) {
  .front { grid-template-columns: minmax(0, var(--measure)); }
  .front > .note { margin-top: 0.6rem; max-width: var(--measure); }
  .head-meta { grid-template-columns: max-content minmax(0, 1fr); }
}
@media (max-width: 60rem) {
  .boxes { grid-template-columns: minmax(0, 1fr); }
  .conf { position: static; }
  .contents-list > li { grid-template-columns: minmax(0, 1fr) auto; }
  .cl-files { display: none; }
  .cl-blk { grid-column: 2; }
  .cl-figs { grid-column: 1 / -1; grid-row: 2; text-align: left; padding-left: 2.2rem; }
}
@media (max-width: 52rem) {
  :root { --gutter: 0rem; }
  /* The rail follows the document as its closing contents list. */
  .frame { display: block; }
  .toc { position: static; height: auto; border-right: 0; border-top: 1px solid var(--rule); padding: 1.2rem 0 1.4rem; }
  .doc { padding: 1.6rem 1rem 2.5rem; }
  h2 .secno { position: static; display: inline; width: auto; margin-right: 0.5rem; font-size: 1.05rem; }
  .head-meta { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .head-meta dt { margin-top: 0.55rem; }
  .headline-counts { gap: 0.5rem 1.4rem; }
  /* Each row becomes two lines: the name, then its numbers and standing. */
  .listing thead { display: none; }
  .listing tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: baseline; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule); }
  .listing tbody tr:last-child { border-bottom: 0; }
  .listing tbody th, .listing tbody td { padding: 0; border: 0; width: auto; }
  .listing tbody th { grid-column: 1 / -1; margin-bottom: 0.15rem; }
  .listing tbody td:nth-child(2) { grid-column: 1; text-align: left; }
  .listing tbody td:nth-child(3) { display: none; }
  .listing tbody td:nth-child(4) { grid-column: 2; }
  .listing .mini { display: none; }
  .sub > details > summary, .sub-line { grid-template-columns: 0.9rem 3.4rem minmax(0, 1fr); }
  .sub > details > .msg { margin-left: 0; }
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .twisty, .self, .sub > details > summary::before { transition: none; }
}

@media print {
  .toc, .self, .toolbar, .find, .range { display: none; }
  .frame { display: block; }
}