:root {
  color-scheme: light dark;
  --rg-bg: light-dark(#ffffff, #0e1014);
  --rg-bg-subtle: light-dark(#f7f7f9, #13161b);
  --rg-surface: light-dark(#f3f4f7, #181c23);
  --rg-accent-bg: light-dark(#f1f0fd, #1d1b38);
  --rg-bad-bg: light-dark(#fff5f3, #2a1615);
  --rg-good-bg: light-dark(#f0fbf5, #10251b);
  --rg-del-bg: light-dark(#ffebe9, #3b1e20);
  --rg-ins-bg: light-dark(#e2f8e8, #173220);
  --rg-text: light-dark(#1c1e24, #e3e5ea);
  --rg-heading: light-dark(#0f1116, #f5f6f8);
  --rg-muted: light-dark(#585e6c, #a0a7b4);
  --rg-accent: light-dark(#4a3fc2, #b0aaff);
  --rg-accent-hover: light-dark(#33289e, #d2ceff);
  --rg-bad: light-dark(#b42318, #ff9186);
  --rg-good: light-dark(#0a7447, #64d69e);
  --rg-border: light-dark(#e3e5ea, #272c36);
  --rg-control: light-dark(#80869a, #737b8c);
  --rg-bad-line: light-dark(#f2c4bd, #5e2723);
  --rg-good-line: light-dark(#b4e5c9, #215c3f);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {
  --rg-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --rg-mono: ui-monospace, "JuliaMono", "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --rg-radius: 8px;
  /* A rounded square with ruler ticks cut out (even-odd), drawn as a mask in the accent colour. */
  --rg-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 0h12a6 6 0 0 1 6 6v12a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6V6a6 6 0 0 1 6-6ZM4 15h16v2H4ZM6 9h2v6H6Zm4 3h2v3h-2Zm4-3h2v6h-2Zm4 3h2v3h-2Z'/%3E%3C/svg%3E");
  --rg-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --search-bar-width: 17rem;

  /* Verso's own variables, mapped onto the tokens */
  --verso-structure-font-family: var(--rg-font);
  --verso-text-font-family: var(--rg-font);
  --verso-code-font-family: var(--rg-mono);
  --verso-text-color: var(--rg-text);
  --verso-code-color: var(--rg-text);
  --verso-structure-color: var(--rg-heading);
  --verso-background-color: var(--rg-bg);
  --verso-surface-color: var(--rg-surface);
  --verso-border-color: var(--rg-border);
  --verso-link-color: var(--rg-accent);
  --verso-muted-color: var(--rg-muted);
  --verso-selected-color: var(--rg-accent-bg);
  --verso-tooltip-color: var(--rg-text);
  --verso-tooltip-bg-color: var(--rg-surface);
  --verso-tooltip-border-color: var(--rg-border);
  --verso-toc-background-color: var(--rg-bg-subtle);
  --verso-toc-text-color: var(--rg-text);
  --verso-toc-border-color: var(--rg-border);
  --verso-toc-resize-handle-color: var(--rg-control);
  --verso-burger-toc-hidden-color: var(--rg-text);
  --verso-burger-toc-visible-color: var(--rg-text);
  --verso-burger-toc-hidden-shadow-color: transparent;
  --verso-burger-toc-visible-shadow-color: transparent;
  --verso-content-max-width: 46rem;
  --verso-toc-width: 16rem;
  --verso-header-height: 3.25rem;
}
@media (max-width: 700px) { :root { --search-bar-width: 8.5rem; } }
@media (prefers-reduced-motion: reduce) {
  :root { --verso-toc-transition-time: 0s; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Base */
html, body { background: var(--rg-bg); color: var(--rg-text); }
body { font-family: var(--rg-font); -webkit-font-smoothing: antialiased; }
p, dt, dd, li { line-height: 1.65; }
::selection { background: var(--rg-accent-bg); color: var(--rg-text); }
main a { color: var(--rg-accent); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
main a:hover { color: var(--rg-accent-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; border-radius: 3px; }
pre, code { font-family: var(--rg-mono); font-variant-ligatures: none; }
main :not(pre) > code { font-size: 0.875em; background: var(--rg-surface); border: 1px solid var(--rg-border);
  border-radius: 5px; padding: 0.05em 0.3em; overflow-wrap: anywhere; }
main :is(p, li, dd, a) { overflow-wrap: break-word; }

/* The standard's code blocks: a Lean example is a block-level `code`, any other block a plain
`pre`. Their lines are at most 100 characters (checked when the standard is built); at this
size nearly all fit the column, and a longer line wraps instead of scrolling sideways. */
main code.hl.lean.block, main pre:not([class]) { font-size: 0.8rem; line-height: 1.55; padding: 0.7rem 0.85rem;
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
/* An expected rejection: the rule pages' verdict, the example, then the error that is its evidence. */
.regula-rejected > code.hl.lean.block { margin: 0; border: 0; border-radius: 0; background: var(--rg-surface); }
.regula-rejected > .regula-evidence { margin: 0; padding: 0.45rem 0.85rem 0; font-size: 0.8rem; color: var(--rg-muted);
  border-top: 1px solid var(--rg-border); background: var(--rg-bg); }
.regula-rejected > pre.regula-code { background: var(--rg-bg); padding: 0.3rem 0.85rem 0.7rem; font-size: 0.8rem;
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }

/* Header: title, search, theme control */
header { background: var(--rg-bg); box-shadow: none; border-bottom: 1px solid var(--rg-border); gap: 0.75rem; padding-right: 1rem; }
.header-title { color: var(--rg-heading); font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.header-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-title h1::before { content: ""; display: inline-block; vertical-align: -0.3em; margin-right: 0.55rem;
  width: 1.4rem; height: 1.4rem; background: var(--rg-accent);
  -webkit-mask: var(--rg-mark) center / contain no-repeat; mask: var(--rg-mark) center / contain no-repeat; }
#search-wrapper { position: static; flex: none; padding: 0; background: none; }
#search-wrapper .combobox .group { position: relative; }
#search-wrapper .combobox .group::before { content: ""; position: absolute; left: 0.6rem; top: 50%; width: 1rem; height: 1rem;
  transform: translateY(-50%); background: var(--rg-muted); pointer-events: none; z-index: 1;
  -webkit-mask: var(--rg-search-icon) center / contain no-repeat; mask: var(--rg-search-icon) center / contain no-repeat; }
#search-wrapper .combobox .cb_edit { border: 1px solid var(--rg-control); border-radius: var(--rg-radius);
  background: var(--rg-bg); color: var(--rg-text); padding: 0.4rem 0.7rem 0.4rem 2rem; font: 0.9rem var(--rg-font);
  white-space: nowrap; overflow: hidden; }
#search-wrapper .combobox .group.focus .cb_edit, #search-wrapper .combobox .group .cb_edit:hover { background: var(--rg-bg); outline: none; border-color: var(--rg-accent); }
#search-wrapper .cb_edit:empty::before { color: var(--rg-muted); font-family: var(--rg-font); }
#search-wrapper .more-results { color: var(--rg-muted); }
.rg-theme { display: inline-flex; flex: none; border: 1px solid var(--rg-control); border-radius: 999px; padding: 2px; gap: 2px; background: var(--rg-bg); }
.rg-theme button { all: unset; box-sizing: border-box; width: 1.9rem; height: 1.6rem; display: grid; place-items: center;
  border-radius: 999px; color: var(--rg-muted); cursor: pointer; }
.rg-theme button:hover { color: var(--rg-text); }
.rg-theme button[aria-pressed="true"] { background: var(--rg-accent-bg); color: var(--rg-accent); }
.rg-theme button:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 1px; }
.rg-theme svg { width: 1rem; height: 1rem; }
#toc .rg-theme { display: none; }

/* Sidebar */
#toc { border-right: none; }
#toc a { color: var(--rg-text); }
#toc a:hover { color: var(--rg-accent); text-decoration: none; }
#toc .split-tocs { margin-top: 1.25rem; padding: 0 0.75rem 0 0.25rem; }
#toc .split-toc { font-size: 0.9rem; margin-bottom: 1.25rem; }
#toc .split-toc .title { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rg-muted); }
#toc .split-toc .title a { color: inherit; }
#toc .split-toc label.toggle-split-toc::before { background-color: var(--rg-muted); }
#toc .split-toc table { border-left: 1px solid var(--rg-border); padding-left: 0; border-spacing: 0; margin-top: 0.35rem; }
#toc .split-toc td a { display: block; padding: 0.2rem 0.75rem; border-left: 2px solid transparent; margin-left: -1px; }
#toc .split-toc .current td:not(.num), #toc .split-toc .title .current { text-decoration: none; }
#toc .split-toc tr.current td a { color: var(--rg-accent); border-left-color: var(--rg-accent); font-weight: 600; }
#toc .split-toc a[href*="/RG"] { font-family: var(--rg-mono); font-size: 0.85rem; }
#toc .split-toc a[href*="/RG"][href*="-"] { font-family: var(--rg-font); font-size: 0.9rem; }
#meta-links { font-size: 0.85rem; padding: 0.75rem 1rem; border-top: 1px solid var(--rg-border); margin: 0; }
#meta-links a { color: var(--rg-muted); }
body:has(#toggle-toc:checked) .toc-backdrop { background-color: color-mix(in srgb, var(--rg-heading) 35%, transparent); }

/* Content */
.content-wrapper { padding: 1.75rem 2rem 4rem; }
main h1, main h2, main h3 { color: var(--rg-heading); font-family: var(--rg-font); letter-spacing: -0.015em; }
main h1 { font-size: 1.95rem; line-height: 1.25; font-weight: 700; margin: 0.25rem 0 0.75rem; text-wrap: balance; }
main .titlepage h1 { text-align: left; }
main h2 { font-size: 1.3rem; line-height: 1.35; font-weight: 650; margin: 2.75rem 0 0.75rem; }
main h3 { font-size: 1.02rem; line-height: 1.4; font-weight: 650; margin: 1.5rem 0 0.5rem; }
section > p, section > ul, section > ol { margin: 0.85rem 0; }
.permalink-widget > a { text-shadow: 0 0 0 var(--rg-muted); }
.content-wrapper > .prev-next-buttons:first-child, .content-wrapper > .regula-outdated:first-child + .prev-next-buttons { display: none; }
.prev-next-buttons { gap: 0.75rem; margin-top: 3.5rem; font-weight: 500; }
.prev-next-buttons > * { flex: 1 1 14rem; color: var(--rg-text); border: 1px solid var(--rg-border); border-radius: var(--rg-radius);
  padding: 0.7rem 0.9rem; font-size: 0.92rem; text-decoration: none; }
.prev-next-buttons > *:hover { border-color: var(--rg-accent); color: var(--rg-accent); }
.prev-next-buttons .arrow { font-size: 1rem; color: var(--rg-muted); }

/* Edition line */
.regula-edition { margin: 0 0 1.25rem; font-size: 0.8rem; line-height: 1.6; color: var(--rg-muted); }
.regula-edition p { margin: 0; }
.regula-edition a { color: var(--rg-muted); }
.regula-edition code { font-size: 0.95em; }
.regula-pill { font-weight: 600; color: var(--rg-accent); background: var(--rg-accent-bg); border-radius: 999px; padding: 0.05rem 0.55rem; }

/* Note on every page of an earlier release, naming the latest release */
.regula-outdated { margin: 0 0 1.25rem; padding: 0.75rem 1rem; background: var(--rg-accent-bg); color: var(--rg-text); border: 1px solid var(--rg-border); border-left: 3px solid var(--rg-accent); border-radius: var(--rg-radius); font-size: 0.95rem; }
.regula-outdated p { margin: 0; }
.regula-outdated a { color: var(--rg-accent); font-weight: 600; }

/* Rule header: chips, then the problem as the lead and "What to do" (styled by adjacency) */
main section .regula-chips > li { margin: 0; }
.regula-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.regula-chip { font-size: 0.78rem; line-height: 1.5; border: 1px solid var(--rg-border); border-radius: 999px; padding: 0.05rem 0.6rem; color: var(--rg-muted); background: var(--rg-bg); }
.regula-chip strong { color: var(--rg-text); font-weight: 600; }
.regula-chip code { font-size: 0.95em; }
.regula-chips + p { font-size: 1.1rem; line-height: 1.6; margin: 0 0 1rem; }
.regula-chips + p + p { border: 1px solid var(--rg-border); border-left: 3px solid var(--rg-accent); background: var(--rg-accent-bg);
  border-radius: var(--rg-radius); padding: 0.75rem 1rem; margin: 0 0 1.25rem; }
.regula-chips + p + p > strong:first-child { display: block; font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--rg-accent); }
.regula-facts { display: grid; grid-template-columns: fit-content(12rem) minmax(0, 1fr); gap: 0.35rem 1.25rem; margin: 1rem 0; font-size: 0.92rem; }
.regula-facts dt { color: var(--rg-muted); font-weight: 500; }
.regula-facts dd { margin: 0; overflow-wrap: anywhere; }
.regula-tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.regula-tag { font-size: 0.72rem; border-radius: 4px; padding: 0.02rem 0.4rem; background: var(--rg-surface); border: 1px solid var(--rg-border); color: var(--rg-text); white-space: nowrap; }

/* Checked example */
.regula-example h3 { font-size: 0.95rem; margin: 1.4rem 0 0.4rem; }
.regula-file, .regula-diff-panel { margin: 0.75rem 0 1rem; border: 1px solid var(--rg-border); border-radius: var(--rg-radius); overflow: hidden; background: var(--rg-surface); }
.regula-file > figcaption, .regula-diff-panel > figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; padding: 0.45rem 0.85rem;
  font-size: 0.8rem; color: var(--rg-muted); border-bottom: 1px solid var(--rg-border); background: var(--rg-bg); overflow-wrap: anywhere; }
.regula-file > figcaption code, .regula-diff-panel > figcaption code { background: none; border: 0; padding: 0; color: var(--rg-text); }
.regula-file > figcaption .regula-src { margin-left: auto; }
.regula-file.is-bad { border-left: 3px solid var(--rg-bad); }
.regula-file.is-good { border-left: 3px solid var(--rg-good); }
.regula-verdict { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.05rem 0.55rem; }
.regula-verdict.is-bad { color: var(--rg-bad); background: var(--rg-bad-bg); border: 1px solid var(--rg-bad-line); }
.regula-verdict.is-good { color: var(--rg-good); background: var(--rg-good-bg); border: 1px solid var(--rg-good-line); }
pre.regula-code, pre.regula-diff { margin: 0; padding: 0.8rem 1rem; background: var(--rg-surface); color: var(--rg-text); border: 0; border-radius: 0;
  font-size: 0.85rem; line-height: 1.6; overflow-x: auto; white-space: pre; tab-size: 2; }
.regula-diff del, .regula-diff ins, .regula-diff .regula-keep { display: inline-block; box-sizing: border-box; min-width: calc(100% + 2rem);
  margin: 0 -1rem; padding: 0 1rem; text-decoration: none; color: var(--rg-text); }
.regula-diff del { background: var(--rg-del-bg); }
.regula-diff ins { background: var(--rg-ins-bg); }
.regula-diff .regula-keep { color: var(--rg-muted); }
.regula-finding { border: 1px solid var(--rg-bad-line); border-radius: var(--rg-radius); background: var(--rg-bad-bg); padding: 0.7rem 0.9rem; margin: 0.75rem 0 1rem; font-size: 0.9rem; }
.regula-finding p { margin: 0 0 0.35rem; overflow-wrap: anywhere; }
.regula-finding .regula-finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.regula-finding code { background: none; border: 0; padding: 0; }
.regula-finding pre.regula-code { background: var(--rg-bg); border: 1px solid var(--rg-bad-line); border-radius: 6px; margin-top: 0.5rem;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.82rem; }
.regula-badge { display: inline-block; border: 1px solid var(--rg-control); border-radius: 999px; padding: 0 0.5rem; font-size: 0.75rem; line-height: 1.55; color: var(--rg-text); background: var(--rg-bg); }
.regula-badge.is-error { border-color: var(--rg-bad-line); color: var(--rg-bad); font-weight: 600; }
.regula-impact-incomplete { border-style: dashed; }
.regula-run { font-size: 0.85rem; color: var(--rg-muted); }

/* Tables and the rule index */
.regula-scroll { overflow-x: auto; max-width: 100%; }
table.regula-rules { width: 100%; border-collapse: collapse; font-size: 0.93rem; margin: 0.5rem 0 1rem; }
table.regula-rules caption { text-align: left; font-size: 0.85rem; color: var(--rg-muted); padding: 0 0 0.5rem; }
table.regula-rules thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rg-muted); font-weight: 650;
  text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rg-border); }
table.regula-rules td, table.regula-rules th[scope=row] { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--rg-border); vertical-align: top; text-align: left; }
table.regula-rules tbody tr:hover { background: var(--rg-bg-subtle); }
table.regula-rules td code { white-space: nowrap; }
table.regula-rules th[scope=row] a { font-family: var(--rg-mono); font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
table.regula-rules th[scope=row] a code { background: none; border: 0; padding: 0; font-size: 1em; }
.regula-title { color: var(--rg-heading); font-weight: 550; }
main a.regula-title { color: var(--rg-heading); text-decoration: none; }
main a.regula-title:hover { color: var(--rg-accent); text-decoration: underline; }
.regula-sub { display: block; font-size: 0.78rem; color: var(--rg-muted); margin-top: 0.1rem; }
main:has(.regula-index) { --verso-content-max-width: 60rem; }
.regula-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin: 1.25rem 0 0.75rem; }
.regula-filters label { display: grid; gap: 0.2rem; font-size: 0.75rem; font-weight: 600; color: var(--rg-muted); letter-spacing: 0.02em; }
.regula-filters select, .regula-filters input[type=reset] { font: 0.88rem var(--rg-font); color: var(--rg-text); background: var(--rg-bg);
  border: 1px solid var(--rg-control); border-radius: var(--rg-radius); padding: 0.35rem 0.55rem; min-height: 2.1rem; }
.regula-filters input[type=reset] { cursor: pointer; background: var(--rg-surface); }
.regula-index td:nth-child(3) { white-space: nowrap; }
.regula-index td:nth-child(4) { min-width: 18rem; }
tr.regula-no-match { display: none; }
tr.regula-no-match td { font-weight: 600; }

/* Phones: the theme control moves to the table-of-contents drawer; index rows become cards */
@media (max-width: 700px) {
  header > .rg-theme { display: none; }
  #toc .last { display: flex; flex-direction: column; gap: 0.5rem; }
  #toc .rg-theme { display: inline-flex; align-self: flex-start; margin: 0.25rem 1rem 1rem; }
  .content-wrapper { padding: 1.25rem 1rem 3rem; }
  main h1 { font-size: 1.6rem; }
  .permalink-widget.inline { display: none; }
  .regula-facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .regula-facts dd { margin-bottom: 0.5rem; }
  .regula-index table.regula-rules thead { display: none; }
  .regula-index table.regula-rules, .regula-index table.regula-rules tbody, .regula-index table.regula-rules caption { display: block; }
  .regula-index table.regula-rules tr.regula-rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rg-border); }
  .regula-index table.regula-rules tr.regula-rule > * { border: 0; padding: 0; }
  .regula-index table.regula-rules tr.regula-rule > td:nth-child(n+3) { grid-column: 2; }
}