/* Tokyo Night colors (tokyonight.nvim): light = Tokyo Night Day, with Tokyo Night Light's darker text (Day's
   `#3760bf` is hard to read in long text; code keeps it, `--code-fg`); dark = Tokyo Night. A plain `:root`, so the
   dark blocks below (more specific) win in dark mode. Until a theme is picked in the ◐ menu (no `data-theme`) it is
   Tokyo Day, or Nord Night (`setu_docs_web.zig`'s `default_theme`) when the system is dark. */
:root {
  --bg: #e1e2e7; --panel: #d0d5e3; --line: #c4c8da; --text: #343b58; --muted: #68709a;
  --accent: #2e7de9; --accent-soft: #b7c1e3; --code-bg: #e9e9ed; --ok: #587539; --bad: #f52a65; --warn: #8c6c3e;
  --kw: #9854f1; --str: #587539; --num: #b15c00; --com: #848cb5; --bi: #188092; --ref: #007197;
  --code-fg: #3760bf; --fn: #2e7de9;
  --con: #b15c00; --slf: #f52a65; --ty: #188092; --attr: #387068; --dec: #007197; --op: #006a83;
  --arg: #8c6c3e;
  --s1: #2e7de9; --s2: #b15c00; --s3: #587539; --s4: #8c6c3e; --s5: #9854f1; --s6: #118c74; --s7: #007197;
  --s8: #f52a65; --s-other: #a8aecb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #2e3440; --panel: #3b4252; --line: #434c5e; --text: #e5e9f0; --muted: #a0a8b7;
    --accent: #88c0d0; --accent-soft: #434c5e; --code-bg: #3b4252; --ok: #a3be8c; --bad: #bf616a; --warn: #ebcb8b;
    --kw: #81a1c1; --str: #a3be8c; --num: #b48ead; --com: #616e88; --bi: #88c0d0; --ref: #88c0d0;
    --code-fg: #d8dee9; --fn: #88c0d0;
    --con: #81a1c1; --slf: #d08770; --ty: #8fbcbb; --attr: #d8dee9; --dec: #d08770; --op: #81a1c1;
    --arg: #ebcb8b;
    --s1: #88c0d0; --s2: #d08770; --s3: #a3be8c; --s4: #ebcb8b; --s5: #b48ead; --s6: #8fbcbb; --s7: #5e81ac;
    --s8: #bf616a; --s-other: #4c566a;
  }
  :root:not([data-theme]) .run button { color: #2e3440; }
}
:root[data-theme="dark"] {
  --bg: #1a1b26; --panel: #16161e; --line: #292e42; --text: #c0caf5; --muted: #737aa2;
  --accent: #7aa2f7; --accent-soft: #283457; --code-bg: #16161e; --ok: #9ece6a; --bad: #f7768e; --warn: #e0af68;
  --kw: #bb9af7; --str: #9ece6a; --num: #ff9e64; --com: #565f89; --bi: #2ac3de; --ref: #7dcfff;
  --code-fg: #a9b1d6; --fn: #7aa2f7;
  --con: #ff9e64; --slf: #f7768e; --ty: #2ac3de; --attr: #73daca; --dec: #7dcfff; --op: #89ddff;
  --arg: #e0af68;
  --s1: #7aa2f7; --s2: #ff9e64; --s3: #9ece6a; --s4: #e0af68; --s5: #bb9af7; --s6: #73daca; --s7: #7dcfff;
  --s8: #f7768e; --s-other: #565f89;
}
:root[data-theme="dark"] .run button { color: #1a1b26; }
/* The other themes, picked in the header's ◐ menu (`<html data-palette="...">`, kept in localStorage); no
   `data-palette` is Tokyo. Each has a light and a dark set, switched by `data-theme` as above (a picked palette
   always comes with its `data-theme`). */
/* Nord (nordtheme.com): light = Snow Storm with Polar Night text (Aurora darkened to read on it), dark = Polar
   Night with Snow Storm text. */
:root[data-palette="nord"] {
  --bg: #eceff4; --panel: #e5e9f0; --line: #d8dee9; --text: #2e3440; --muted: #4c566a;
  --accent: #5e81ac; --accent-soft: #c9d4e5; --code-bg: #e5e9f0; --ok: #5a7a3a; --bad: #b0444e; --warn: #8a6d1f;
  --kw: #5e81ac; --str: #5a7a3a; --num: #8f5f88; --com: #7b88a1; --bi: #3f7f8a; --ref: #3e6a99;
  --code-fg: #2e3440; --fn: #3b7b8c;
  --con: #5e81ac; --slf: #b0573a; --ty: #3f7f7e; --attr: #3b4252; --dec: #b0573a; --op: #5e81ac;
  --arg: #8a6d1f;
  --s1: #5e81ac; --s2: #b0573a; --s3: #5a7a3a; --s4: #8a6d1f; --s5: #8f5f88; --s6: #3f7f7e; --s7: #3e6a99;
  --s8: #b0444e; --s-other: #c0c8d6;
}
:root[data-palette="nord"][data-theme="dark"] {
  --bg: #2e3440; --panel: #3b4252; --line: #434c5e; --text: #e5e9f0; --muted: #a0a8b7;
  --accent: #88c0d0; --accent-soft: #434c5e; --code-bg: #3b4252; --ok: #a3be8c; --bad: #bf616a; --warn: #ebcb8b;
  --kw: #81a1c1; --str: #a3be8c; --num: #b48ead; --com: #616e88; --bi: #88c0d0; --ref: #88c0d0;
  --code-fg: #d8dee9; --fn: #88c0d0;
  --con: #81a1c1; --slf: #d08770; --ty: #8fbcbb; --attr: #d8dee9; --dec: #d08770; --op: #81a1c1;
  --arg: #ebcb8b;
  --s1: #88c0d0; --s2: #d08770; --s3: #a3be8c; --s4: #ebcb8b; --s5: #b48ead; --s6: #8fbcbb; --s7: #5e81ac;
  --s8: #bf616a; --s-other: #4c566a;
}
:root[data-palette="nord"][data-theme="dark"] .run button { color: #2e3440; }
* { box-sizing: border-box; }
html { scroll-padding-top: 64px; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--ref); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, monospace; font-size: 15px; }
:not(pre) > code { background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.top { position: sticky; top: 0; z-index: 10; height: 52px; background: var(--panel);
  border-bottom: 1px solid var(--line); }
/* The bar's row is as wide as `.wrap`: the brand starts where `main`'s text does, the tools end where the nav's
   links do, and the search sits in the middle column, so it is centered whatever the two sides hold. */
.top-in { display: grid; grid-template-columns: 1fr minmax(0, 420px) 1fr; align-items: center; gap: 16px;
  max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 24px 0 40px; }
.brand { justify-self: start; font-weight: 700; font-size: 21px; color: var(--text); white-space: nowrap; }
.tools { justify-self: end; display: flex; align-items: center; gap: 12px;
  --icon: 20px; }  /* the height of every header icon (◐, the GitHub mark, ☰) */
.ver { font-weight: 400; color: var(--muted); font-size: 13px; }
.menu, .theme { display: flex; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; }
.menu { display: none; }
.menu svg, .theme svg { height: var(--icon); width: auto; }
.search { position: relative; }
.search input { width: 100%; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit; }
#hits { position: absolute; top: 38px; left: 0; right: 0; max-height: 60vh; overflow: auto; background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
#hits a { display: block; padding: 6px 10px; color: var(--text); border-bottom: 1px solid var(--line); }
#hits a.sel, #hits a:hover { background: var(--accent-soft); text-decoration: none; }
#hits small { display: block; color: var(--muted); }
.live { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px;
  padding: 1px 8px; white-space: nowrap; }
.live.on { color: var(--ok); border-color: var(--ok); }
/* The ◐ button's theme menu, under it at the right, boxed like the search hits; ✓ marks the theme shown. */
.themes { position: relative; display: flex; }
.theme-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 20; display: flex;
  flex-direction: column; padding: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.theme-menu[hidden] { display: none; }
.theme-menu button { position: relative; font: 13px system-ui, sans-serif; text-align: left; white-space: nowrap;
  color: var(--text); background: none; border: 0; border-radius: 4px; padding: 5px 12px 5px 24px; cursor: pointer; }
.theme-menu button:hover, .theme-menu button:focus-visible { background: var(--accent-soft); outline: none; }
.theme-menu button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 8px; color: var(--accent); }
.repo { display: flex; align-items: center; gap: 8px; color: var(--text); line-height: 1.25; white-space: nowrap; }
.repo:hover { text-decoration: none; opacity: .8; }
.repo .gh { height: var(--icon); width: auto; flex: none; }
.repo-in { display: flex; flex-direction: column; align-items: flex-start; }
.repo-name { font-size: 14px; font-weight: 600; }
.facts { display: flex; gap: 10px; font-size: 12px; color: var(--muted); }
.facts[hidden] { display: none; }
.fact { display: inline-flex; align-items: center; gap: 3px; }
.fact svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.fact:has(> span:empty) { display: none; }
.wrap { display: flex; max-width: 1280px; margin: 0 auto; }
.side { position: sticky; top: 52px; align-self: flex-start; width: 240px; flex: none; height: calc(100vh - 52px);
  overflow: auto; padding: 16px 16px 32px 8px; border-left: 1px solid var(--line); }
.side a { display: block; padding: 3px 8px; border-radius: 4px; color: var(--text); font-size: 16px; }
.side a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side a.live-only { display: none; } body.can-run .side a.live-only { display: block; }
.nav-h { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 8px 2px; }
.side a.sub { padding-left: 20px; font-size: 15px; }
.toc { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.toc a { font-family: ui-monospace, monospace; font-size: 14.5px; color: var(--muted); overflow-wrap: anywhere;
  padding-left: calc(8px + 2ch); text-indent: -2ch; }  /* a wrapped name lines up after its `- ` */
.toc a::before { content: '-'; display: inline-block; width: 2ch; text-indent: 0; }  /* inline-block: no underline */
.toc-h { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 8px 4px; }
main { flex: 1; min-width: 0; padding: 24px 40px 64px; }
h1 { margin: 8px 0 4px; font-size: 30px; }
h2 { margin-top: 36px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
h3 { font-size: 22px; }
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor { color: var(--muted); }
.lead { color: var(--muted); font-size: 16px; margin-top: 4px; }
.edit { float: right; font-size: 13px; margin-top: 14px; }
.pager { display: flex; gap: 16px; margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--line); }
.pager .next { margin-left: auto; text-align: right; }
.index { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; list-style: none; margin: 16px 0 8px; }
.entry { border-top: 1px solid var(--line); padding: 20px 0 8px; }
.entry h3 { margin: 0 0 8px; font: 600 15px/1.5 ui-monospace, monospace; word-break: break-word; }
.nm { color: var(--accent); }
.kind { color: var(--muted); font-weight: 400; font-style: italic; }
.badge { margin-left: 8px; font: 600 11px system-ui, sans-serif; color: var(--bi); border: 1px solid var(--bi);
  border-radius: 99px; padding: 0 6px; vertical-align: 2px; }
.anchor { margin-left: 8px; color: var(--line); font-weight: 400; }
.entry:hover .anchor, .member:hover .anchor { color: var(--muted); }
h4 { margin: 14px 0 4px; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
h4.mh { text-transform: none; letter-spacing: 0; font: 600 14px/1.5 ui-monospace, monospace; color: var(--text); }
.members { margin: 12px 0 0 0; padding-left: 16px; border-left: 3px solid var(--panel); }
.member { padding: 4px 0 8px; }
.bases { color: var(--muted); margin: 0; }
/* `pretty_html` puts a `<pre>`'s lines in `.ln` blocks, a line break between them: that one goes, the whitespace in
   them stays; an empty line keeps its height. */
pre:has(> .ln) { white-space: normal; } pre > .ln { display: block; white-space: pre; }
pre > .ln:empty::before { content: "\200b"; }
pre.code, pre.plain, pre.result { background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; overflow-x: auto; line-height: 1.5; margin: 6px 0; }
.codebox { position: relative; }
.codebox .copy { position: absolute; top: 6px; right: 6px; opacity: 0; font: 12px system-ui, sans-serif;
  padding: 1px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--muted);
  cursor: pointer; }
.codebox:hover .copy, .codebox .copy:focus { opacity: 1; } .codebox .copy[hidden] { display: none; }
.kw { color: var(--kw); } .str { color: var(--str); } .num { color: var(--num); } .com { color: var(--com); }
.bi { color: var(--bi); } a.ref { color: var(--ref); } .pr { color: var(--muted); user-select: none; }
/* Token kinds a `css` file may leave out (`--fn`, ...); without one they fall back to a color above or the text's. */
.fn { color: var(--fn, inherit); } .con { color: var(--con, var(--num)); } .slf { color: var(--slf, inherit); }
.ty { color: var(--ty, var(--bi)); } .attr { color: var(--attr, inherit); } .dec { color: var(--dec, var(--kw)); }
.op { color: var(--op, inherit); } .arg { color: var(--arg, inherit); }
/* Code blocks as in the Tokyo Night editor: API names (`a.ref`) in the function blue, comments italic, the rest
   in the editor's foreground; inline `code` keeps the text color. */
pre.code { color: var(--code-fg, var(--text)); } pre.code a.ref { color: var(--fn, var(--ref)); }
pre.code .com { font-style: italic; }
.out { color: var(--muted); }
table { border-collapse: collapse; margin: 4px 0; }
td, th { padding: 3px 14px 3px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; color: var(--muted); }
table.md { margin: 12px 0; display: block; overflow-x: auto; }
table.md th { text-transform: none; font-size: 14px; color: var(--text); }
.consts td:nth-child(2), .consts td:nth-child(3) { font-variant-numeric: tabular-nums; }
.consts tr:target { background: var(--accent-soft); }
/* The selected entry (or constants group): a 1px dashed bar on each side, centered in `main`'s left / right padding.
   A border, not a 1px wide background: borders snap to whole device pixels, so a bar on a half pixel (`.wrap` is
   centered) is not drawn 2px. The dashes (8px, 6px gap; `dashed` can not set a length) are a `border-image`, which
   snaps the same way. */
:is(.entry, .member, .group, .part):target { position: relative; }
:is(.entry, .member, .group, .part):target::before, :is(.entry, .member, .group, .part):target::after { content: "";
  position: absolute; top: 11px; bottom: 11px; width: 0; border-left: 1px solid var(--accent);
  border-image: repeating-linear-gradient(to bottom, var(--accent) 0 8px, transparent 8px 14px) 1; }
:is(.entry, .member, .group, .part):target::before { left: -20px; }
:is(.entry, .member, .group, .part):target::after { right: -20px; }
ul, ol { padding-left: 20px; } li { margin: 2px 0; }
ul.flags { list-style: none; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
ul.flags.described { display: block; }
blockquote { margin: 12px 0; padding: 2px 14px; border-left: 3px solid var(--accent); border-radius: 6px;
  background: var(--panel); }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
img { max-width: 100%; }
details.fixture summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.run { margin: 4px 0 8px; }
.run button { display: none; font: 600 13px system-ui, sans-serif; padding: 3px 12px; border-radius: 5px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
.run button:disabled { opacity: .6; cursor: progress; }
body.can-run .run button { display: inline-block; }
.run .status { margin-left: 10px; font-size: 13px; }
.status.ok { color: var(--ok); } .status.fail { color: var(--bad); }
.result .st-fail { color: var(--bad); } .result .st-skip, .result .st-loose { color: var(--warn); }
.result .exp { color: var(--bad); }
.muted { color: var(--muted); }
.needs { display: none; margin: 4px 0 8px; color: var(--muted); font-size: 13px; }
body.can-run .needs { display: block; }
.chart { margin: 12px 0 16px; }
.chart .legend { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-bottom: 8px; font-size: 13px; }
.chart .legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; }
.chart .bars { display: grid; grid-template-columns: max-content minmax(80px, 1fr) max-content; gap: 2px 10px;
  align-items: center; font-size: 13.5px; }
.chart .row { display: contents; }
.chart .row:hover > span { background: var(--panel); }
.chart .track { height: 16px; }
.chart .track i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; }
.chart .val { text-align: right; font-variant-numeric: tabular-nums; }
.chart figcaption { margin-top: 4px; color: var(--muted); font-size: 12px; text-align: right; }
.cov-pies { display: flex; flex-wrap: wrap; gap: 40px; margin: 16px 0; }
.cov-pies figure { margin: 0; text-align: center; }
.cov-pies svg { width: 144px; height: 144px; } .cov-pies svg.cov-history { width: 300px; }
.cov-pies svg.cov-history text { font: 11px system-ui, sans-serif; fill: var(--muted); }
.cov-pies text { font: bold 16px system-ui, sans-serif; fill: var(--text); }
.cov-pies figcaption { color: var(--muted); font-size: 13px; } .cov-pies strong { color: var(--text); }
table.cov td.pct { text-align: right; font-weight: bold; } table.cov td.num { text-align: right; white-space: nowrap; }
table.cov td.pct.ok { color: var(--ok); } table.cov td.pct.warn { color: var(--warn); }
table.cov td.pct.bad { color: var(--bad); } table.cov td.missed { color: var(--muted); font-size: 13px; }
table.cov .miss-fn { white-space: nowrap; margin-right: 10px; } table.cov small.never { color: var(--bad); }
table.cov small.runs { color: var(--warn); }
table.cov .bar { display: inline-block; width: 160px; height: 9px; border-radius: 3px; background: var(--line);
  overflow: hidden; vertical-align: middle; }
table.cov .bar > span { display: block; height: 100%; } table.cov .bar > .ok { background: var(--ok); }
table.cov .bar > .warn { background: var(--warn); } table.cov .bar > .bad { background: var(--bad); }
table.cov { width: 100%; } table.cov td:first-child > code { white-space: nowrap; }
table.cov td.num { color: inherit; } table.cov th:nth-child(2), table.cov th:nth-child(4) { text-align: right; }
/* The Coverage page's source viewer: a click on a file's row shows its source in a row under it, covered lines with a
   green bar, missed ones red; a file changed since the coverage run is flagged in the warning color. */
.src-hint { color: var(--muted); font-size: 13px; }
table.cov tr.src-row { cursor: pointer; } table.cov tr.src-row:hover td { background: var(--panel); }
table.cov tr.src-row code { color: var(--ref); } table.cov tr.src-view > td { padding: 0; }
pre.cov-src { margin: 0; max-height: 70vh; overflow: auto; padding: 6px 0; background: var(--code-bg);
  color: var(--code-fg, var(--text)); font-size: 13px; line-height: 1.45; position: relative; }
pre.cov-src > span { display: block; padding-right: 12px; border-left: 3px solid transparent; white-space: pre; }
/* A source under a row must not widen the table (its longest line would push the other columns out of view): no
   width of its own, it fills the cell the columns give it and scrolls inside. */
tr.src-view pre.cov-src { width: 0; min-width: 100%; box-sizing: border-box; }
pre.cov-src > span::before { content: attr(data-n); display: inline-block; width: 5ch; margin-right: 12px;
  padding-right: 6px; text-align: right; color: var(--muted); user-select: none; }
pre.cov-src > span.hit { border-left-color: var(--ok); }
table.cov small.stale, pre.cov-src > span.stale { color: var(--warn); }
pre.cov-src > span.miss { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
/* The Profile page: a bar per case and interpreter under its numbers (the extension's part dark); a click on a case
   shows its files' sources under it (`pre.cov-src`'s look), each costly line shaded with its cost in a gutter. */
.prof-wrap { overflow-x: auto; } table.prof { width: 100%; } table.prof td { vertical-align: middle; }
table.prof tr.prof-row { cursor: pointer; } table.prof tr.prof-row:hover td { background: var(--panel); }
table.prof tr.prof-row code { color: var(--ref); } table.prof tr.src-view > td { padding: 0 0 8px; }
.prof-cell { min-width: 84px; } .pnum { display: block; white-space: nowrap; }
.ptrack { display: block; height: 8px; margin-top: 3px; }
.pbar { display: block; height: 100%; min-width: 2px; border-radius: 3px; background: var(--accent-soft);
  overflow: hidden; } .pbar > i { display: block; height: 100%; background: var(--accent); }
.pnum { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); } .pnum b { color: var(--text); }
.prof-key { font-size: 13px; color: var(--muted); }
.prof-key i { display: inline-block; width: 12px; height: 10px; margin: 0 6px 0 14px; border-radius: 2px; }
.prof-key i:first-child { margin-left: 0; } .prof-key .ext { background: var(--accent); }
.prof-key .py { background: var(--accent-soft); }
.prof-file { margin: 10px 12px 4px; font-size: 13.5px; color: var(--muted); } .prof-file code { color: var(--text); }
pre.prof-src { max-height: 50vh; } pre.prof-src b.pc { display: inline-block; width: 5ch; margin-right: 10px;
  text-align: right; color: var(--text); }
footer { margin-top: 48px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 860px) {
  .menu { display: flex; }
  .side { position: fixed; right: 0; top: 52px; z-index: 9; background: var(--panel); transform: translateX(100%);
    transition: transform .15s; width: 260px; }
  body.nav-open .side { transform: none; }
  main { padding: 16px 16px 48px; }
  .top-in { padding: 0 16px; }
  :is(.entry, .member, .group, .part):target::before { left: -8px; }
  :is(.entry, .member, .group, .part):target::after { right: -8px; }
  .live { display: none; }
  .repo-in { display: none; }
}