@font-face {
  font-family: "Emendrix Sans";
  src: url(sans-400.424f1d2e.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+0218-021B, U+2010-2027, U+202F,
    U+2032-2034, U+20AC, U+2190-2193, U+2197, U+2208, U+2212, U+221A, U+2260, U+2264-2265;
}
@font-face {
  font-family: "Emendrix Sans";
  src: url(sans-600.e2b79ccd.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+0218-021B, U+2010-2027, U+202F,
    U+2032-2034, U+20AC, U+2190-2193, U+2197, U+2208, U+2212, U+221A, U+2260, U+2264-2265;
}
@font-face {
  font-family: "Emendrix Serif";
  src: url(serif-400.de886d3d.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+0218-021B, U+0370-03FF, U+0400-045F,
    U+2010-2027, U+202F, U+2032-2034, U+20AC, U+2190-2193, U+2197, U+2208, U+2212, U+221A,
    U+2260, U+2264-2265;
}
@font-face {
  font-family: "Emendrix Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  font-weight: 400;
  size-adjust: 101.53%;
  ascent-override: 100.96%;
  descent-override: 27.09%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Emendrix Sans Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"),
    local("Arimo Bold");
  font-weight: 600;
  size-adjust: 98.06%;
  ascent-override: 104.53%;
  descent-override: 28.05%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Emendrix Serif Fallback";
  src: local("Georgia");
  font-weight: 400;
  size-adjust: 100.07%;
  ascent-override: 103.53%;
  descent-override: 33.48%;
  line-gap-override: 0%;
}
:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --fg: #161a21;
  --muted: #4e5664;
  --rule: #dde1e7;
  --edge: #7b8392;
  --panel: #ffffff;
  --mark: #e7ecf6;
  --notice: #eceef2;
  --ins: #d8efdf;
  --del: #f8dfe1;
  --link: #2a5fd6;
  --alert: #8a1c0e;
  --alert-tint: #fbe9e4;
  --provenance: #4e5664;
  --provenance-tint: #eef0f4;
  --kind-inserted: #17692f;
  --kind-inserted-tint: #e3f3e7;
  --kind-deleted: #a3244f;
  --kind-deleted-tint: #f9e6ed;
  --kind-modified: #3a4a66;
  --kind-modified-tint: #e8ecf3;
  --kind-deferred: #7a4f00;
  --kind-deferred-tint: #f8eed8;
  --type-act: #0c6b5f;
  --type-act-tint: #e2f0ec;
  --type-version: #5a3db0;
  --type-version-tint: #ebe7f7;
  --type-provision: #8a4b00;
  --type-provision-tint: #f6ebdb;
  --type-amending: #7e2a64;
  --type-amending-tint: #f4e5ef;

  --sans: "Emendrix Sans", "Emendrix Sans Fallback", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Emendrix Serif", "Emendrix Serif Fallback", Georgia, "Times New Roman", serif;

  --text-caption: .875rem;
  --text-h1: clamp(1.95rem, 1.45rem + 2vw, 2.75rem);
  --text-h2: clamp(1.4rem, 1.25rem + .6vw, 1.65rem);
  --text-h3: 1.3rem;
  --text-lede: clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --text-explain: 1.125rem;
  --text-body: 1.0625rem;
  --text-meta: .875rem;
  --text-label: .8125rem;
  --text-legal: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --text-code: .8125rem;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --shell: 76rem;
  --gutter: clamp(1rem, 3vw, 2rem);
  --measure: 68ch;
  --legal-measure: 40rem;
  --index-width: 19rem;
  --context-height: 2.75rem;
  --radius: 4px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171a21;
    --fg: #e7e9ee;
    --muted: #a4acba;
    --rule: #2c313c;
    --edge: #788192;
    --panel: #1e222b;
    --mark: #222a3f;
    --notice: #232833;
    --ins: #1d3d29;
    --del: #4a2230;
    --link: #b0caff;
    --alert: #f7704f;
    --alert-tint: #3a1e19;
    --provenance: #b2bac8;
    --provenance-tint: #232833;
    --kind-inserted: #70d18f;
    --kind-inserted-tint: #173222;
    --kind-deleted: #f490b4;
    --kind-deleted-tint: #3a1d2a;
    --kind-modified: #aebbd6;
    --kind-modified-tint: #252c3c;
    --kind-deferred: #e5b660;
    --kind-deferred-tint: #352a15;
    --type-act: #5fcfbb;
    --type-act-tint: #15282a;
    --type-version: #b9a8ff;
    --type-version-tint: #211f38;
    --type-provision: #eab46a;
    --type-provision-tint: #2c2418;
    --type-amending: #f19bd2;
    --type-amending-tint: #301c2c;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--text-body)/1.6 var(--sans);
  font-variant-ligatures: none;
  font-synthesis: none;
}
main { max-width: var(--shell); margin: 0 auto;
       padding: var(--space-5) var(--gutter) var(--space-6); }
h1, h2, h3, .display { font-family: var(--sans); font-weight: 600; color: var(--fg); }
h1 { font-size: var(--text-h1); line-height: 1.08; letter-spacing: -.018em;
     margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-h2); line-height: 1.2; letter-spacing: -.01em;
     margin: var(--space-5) 0 var(--space-3); }
h3 { font-size: var(--text-h3); line-height: 1.3; margin: 0 0 var(--space-2); }
p, ul, ol { margin: 0 0 var(--space-3); }
p { max-width: var(--measure); }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 2px; }
strong { font-weight: 600; }
/* Identifiers are set in the sans with its slashed zero rather than in a monospace face, and
   every figure a reader compares down a column is tabular. */
time, .date, .mag, code, .id { font-variant-numeric: tabular-nums lining-nums; }
code, .id {
  font-family: var(--sans);
  font-size: var(--text-code);
  font-feature-settings: "zero" 1;
  color: var(--muted);
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.lede { max-width: var(--measure); font-size: var(--text-body); }
.muted { color: var(--muted); }
.small { font-size: var(--text-meta); line-height: 1.5; }
/* A proper noun carrying a hyphen, kept off the line break that would read as two words. */
.nowrap { white-space: nowrap; }
.scroll { overflow-x: auto; }
.facts { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-meta); line-height: 1.55;
         color: var(--muted); }
.ident { font-size: var(--text-meta); color: var(--muted); }
.quoted { color: var(--muted); }
.none { color: var(--muted); }
/* A link that leaves the site says so with a drawn arrow; its words for a screen reader are
   in the markup (`outbound.py`). A drawn glyph is also read out unless its alternative text is
   empty (`/ ""`); each is declared twice, so a browser without that syntax keeps the glyph. */
.ext { white-space: nowrap; }
.ext::after { content: "\2197"; content: "\2197" / ""; display: inline-block;
              margin-left: .12em; font-size: .85em;
              text-decoration: none; }
/* A direction arrow beside a link's words is drawn here, silent in the same way, so the link's
   accessible name is its words alone. The no-break space keeps the underline unbroken and the
   arrow on its words' line. */
.go::after { content: "\00a0\2192"; content: "\00a0\2192" / ""; }
.back::before { content: "\2190\00a0"; content: "\2190\00a0" / ""; }
.up::before { content: "\2191\00a0"; content: "\2191\00a0" / ""; }
.up-after::after { content: "\00a0\2191"; content: "\00a0\2191" / ""; }
/* Off-screen until it takes focus, then placed over the header rather than moving it, so
   arriving at the page shifts nothing. It is the first focusable element on every page. */
.skip {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 30;
  padding: var(--space-2) var(--space-3);
  background: var(--panel);
  color: var(--link);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  font-size: var(--text-meta);
  transform: translateY(-300%);
}
.skip:focus { transform: none; }
/* Read aloud and never drawn: the search control's result count lives here. Clipped rather
   than hidden, because `display: none` and `visibility: hidden` take it out of the
   accessibility tree, which is the one place it exists to be. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* The header and the footer paint the full width and hold their content to the shell, so a
   wide screen shows no empty margins beside them. */
header.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.wordmark { font-weight: 600; font-size: var(--text-explain); letter-spacing: -.02em;
            color: var(--fg); text-decoration: none; margin-right: var(--space-2); }
.wordmark:hover { color: var(--link); }
header.bar nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); flex: 1 1 auto; }
header.bar nav a { color: var(--fg); text-decoration: none; font-size: var(--text-meta);
                   padding: .7rem 0; border-bottom: 2px solid transparent; }
header.bar nav a:hover { color: var(--link); border-bottom-color: currentColor; }
/* It does not grow: a search box that takes half of a wide header reads as the page's main
   business, and it is a shortcut past navigation that already works. */
#search { position: relative; flex: 0 1 20rem; min-width: 12rem; margin-left: auto; }
/* A form control's boundary is the information, so it is `--edge`, at 3:1 or better. */
#search input {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font: 400 var(--text-meta)/1.4 var(--sans);
}
#search input::placeholder { color: var(--muted); opacity: 1; }
#search .results {
  position: absolute;
  z-index: 20;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  font-size: var(--text-meta);
}
#search .results:empty { display: none; }
/* The label and the kind share the first line; a provision's title, where it has one, takes a
   line of its own under both. */
#search .results a { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                     align-items: baseline; gap: 0 var(--space-3); padding: .45rem .75rem;
                     color: var(--fg); text-decoration: none; }
/* One declaration for three states, so the row the arrow keys highlight and the row the
   pointer is over cannot come to look different from each other. */
#search .results a:hover, #search .results a:focus,
#search .results li.active a { background: var(--mark); }
/* What kind of thing a result is, said once at the end of the row rather than under it. */
#search .results .kind { grid-area: 1 / 2; font-size: var(--text-label); font-weight: 600;
                        color: var(--muted); }
/* Cut to one line by the sheet only: the whole title stays in the row's accessible name. */
#search .results .ttl { grid-area: 2 / 1 / 3 / -1; overflow: hidden; white-space: nowrap;
                       text-overflow: ellipsis; color: var(--muted); line-height: 1.35; }
/* A query that found nothing says so in the panel, as a row that is not an option. */
#search .results .empty { padding: .45rem .75rem; color: var(--muted); }
/* How far in the phone nav row's start fade reaches: 0 at rest, grown by scrolling below.
   Registered as a length so the scroll timeline interpolates it rather than flipping it. */
@property --fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* A phone gets two rows: the wordmark with the navigation beside it, then the search box
   across the width rather than the sliver left beside the links. The header stays under a
   sixth of the screen, and every link stays in the markup and on screen, never in a menu. */
@media (max-width: 40rem) {
  header.bar { gap: var(--space-2); padding-top: var(--space-1); padding-bottom: var(--space-2); }
  .wordmark { flex: none; }
  /* One row that scrolls sideways to the screen's edge, faded at its end so the cut reads as
     more to come. The fade is a fixed 2.5rem and the row's end padding as wide, so the last
     link scrolls clear of it at full contrast. A scroll box clips a focus ring, so the row
     keeps 5px of room on the other three sides and gives it back in margin. */
  header.bar nav {
    flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; gap: 0 var(--space-3);
    scrollbar-width: none; margin: -5px calc(-1 * var(--gutter)) -5px -5px;
    padding: 5px 2.5rem 5px 5px;
    mask-image: linear-gradient(to right, transparent 0, black var(--fade-start, 0px),
                                black calc(100% - 2.5rem), transparent);
  }
  /* Once scrolled, the row fades at its start as well, so the cut there reads as more behind.
     Where scroll timelines are unsupported the start stop stays at 0 and only the end fades. */
  @supports (animation-timeline: scroll()) {
    header.bar nav { animation: nav-fade-start linear both;
                     animation-timeline: scroll(self inline); animation-range: 0 2.5rem; }
    @keyframes nav-fade-start { to { --fade-start: 2.5rem; } }
  }
  header.bar nav a { white-space: nowrap; padding: .75rem 0; }
  #search { flex: 1 1 100%; margin-left: 0; }
}
footer {
  padding: var(--space-5) max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)))
    var(--space-6);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--text-meta);
  line-height: 1.55;
}
footer p { max-width: 62ch; }
/* The not-legal-advice notice: its own surface, an `--edge` boundary and a drawn `!` in the
   text colour, and the only block on the site that looks like it. */
.disclaimer {
  position: relative;
  max-width: 62ch;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) 3.25rem;
  background: var(--notice);
  color: var(--fg);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  font-size: var(--text-meta);
  line-height: 1.55;
}
.disclaimer::before {
  content: "!";
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--fg);
  border-radius: 50%;
  font-weight: 600;
  line-height: 1.2rem;
  text-align: center;
}
header.bar nav a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--link); }
.masthead {
  --type: var(--muted);
  --type-tint: var(--bg);
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
  background: var(--type-tint);
  border-top: 4px solid var(--type);
  border-image: conic-gradient(var(--type) 0 0) 1 / 4px 0 0 0 / 0 100vmax;
  box-shadow: 0 0 0 100vmax var(--type-tint);
  clip-path: inset(0 -100vmax);
}
/* The band meets the header bar: `main`'s top padding is for pages that open without one. */
main > .masthead:first-child { margin-top: calc(-1 * var(--space-5)); }
.masthead--act { --type: var(--type-act); --type-tint: var(--type-act-tint); }
.masthead--version { --type: var(--type-version); --type-tint: var(--type-version-tint); }
.masthead--provision { --type: var(--type-provision); --type-tint: var(--type-provision-tint); }
.masthead--amending { --type: var(--type-amending); --type-tint: var(--type-amending-tint); }
.masthead--index, .masthead--prose {
  --type: var(--muted);
  --type-tint: var(--bg);
  border-image: conic-gradient(var(--rule) 0 0) 1 / 4px 0 0 0 / 0 100vmax;
}
.masthead h1 { max-width: 21em; margin: 0; }
.masthead--provision h1 { max-width: 24em; }
.trail ol {
  display: flex; flex-wrap: wrap; gap: 0 .45rem;
  list-style: none; padding: 0; margin: 0 0 var(--space-4);
  font-size: var(--text-meta); line-height: 1.5; color: var(--muted);
}
.trail li + li::before { content: "\203A"; content: "\203A" / ""; margin-right: .45rem;
                         color: var(--muted); }
.trail a { color: var(--muted); text-decoration-color: var(--edge); }
.trail a:hover { color: var(--link); text-decoration-color: currentColor; }
.trail [aria-current="page"] { color: var(--fg); }
.caption {
  display: flex; align-items: center; gap: .5rem;
  font: 600 var(--text-caption)/1.3 var(--sans);
  color: var(--type);
  margin: 0 0 var(--space-2);
  letter-spacing: .01em;
}
.caption::before {
  content: "";
  flex: none;
  width: .7rem;
  height: .7rem;
  border: 2px solid var(--type);
  background: var(--type);
}
.masthead--act .caption::before { border-radius: 1px; }
.masthead--version .caption::before { border-radius: 50%; }
.masthead--provision .caption::before { width: .45rem; height: .9rem; border-radius: 1px; }
.masthead--amending .caption::before { transform: rotate(45deg) scale(.85); border-radius: 1px; }
.masthead--index .caption::before, .masthead--prose .caption::before { display: none; }
.caption a { color: var(--link); font-weight: 600; }
@media (max-width: 40rem) {
  .trail li { display: none; }
  .trail li:nth-last-child(2) { display: block; }
  .trail li:nth-last-child(2)::before { content: "\2190"; content: "\2190" / "";
                                        margin-right: .35rem; }
  .trail ol { margin-bottom: var(--space-3); }
  .masthead { padding: var(--space-3) 0 var(--space-4); }
}
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0;
        margin: 0 0 var(--space-3); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font: 600 var(--text-label)/1.25 var(--sans);
  padding: .12rem .45rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  white-space: nowrap;
  vertical-align: .1em;
  font-variant-numeric: tabular-nums;
}
.tag--kind-inserted { color: var(--kind-inserted); background: var(--kind-inserted-tint);
                      border-color: var(--kind-inserted); }
.tag--kind-inserted::before { content: "+"; }
.tag--kind-deleted { color: var(--kind-deleted); background: var(--kind-deleted-tint);
                     border-color: var(--kind-deleted); }
.tag--kind-deleted::before { content: "\2212"; }
.tag--kind-modified { color: var(--kind-modified); background: var(--kind-modified-tint);
                      border-color: var(--kind-modified); }
.tag--kind-renumbered { color: var(--kind-modified); background: transparent;
                        border: 1px dashed var(--kind-modified); }
.tag--kind-deferred { color: var(--kind-deferred); background: var(--kind-deferred-tint);
                      border: 1px dotted var(--kind-deferred); }
.tag--differ, .tag--differ-text { color: var(--provenance); background: var(--provenance-tint);
                                  border-color: var(--edge); }
.tag--no-text, .tag--differ-none { color: var(--provenance); background: var(--provenance-tint);
                                   border: 1px dashed var(--edge); }
.tag--differ-kind { color: var(--alert); background: var(--alert-tint);
                    border: 2px solid var(--alert); padding: .06rem .4rem; }
.tag--differ-kind::before { content: "\2260"; }
.tag--unattributed { color: var(--provenance); background: transparent;
                     border: 1px dashed var(--edge); }
.tag--substantive, .tag--dates-only, .tag--all-explained, .tag--unexplained, .tag--quoted,
.tag--diff-only { color: var(--muted); background: transparent; border-color: var(--edge); }
.tags-help { font-size: var(--text-meta); margin: 0 0 var(--space-3); }
/* The small link to a definition, beside the tag or the value it defines; never the tag. */
.define { margin-left: var(--space-2); font-size: var(--text-meta); font-weight: 400; }
.hero { padding: var(--space-4) 0 var(--space-3); text-align: center; }
.hero h1 { max-width: none; margin-bottom: var(--space-3); }
.hero p { max-width: 42rem; margin: 0 auto var(--space-3); }
/* Home: a version card led by its act, then the stat strip after the list. */
.cardrow { padding: var(--space-3) 0 var(--space-4); border-top: 1px solid var(--rule); }
.cardrow:last-of-type { border-bottom: 1px solid var(--rule); }
/* Two stacked links, the act and its version: the gap keeps a 24px target around each
   (WCAG 2.5.8), which the caption's own line box is too short to give. */
.cardrow .caption { margin-bottom: var(--space-2); --type: var(--type-act); }
.cardrow .caption::before { border-radius: 1px; }
.cardrow h3 { font-size: var(--text-h3); margin: 0 0 var(--space-1); }
.cardrow .made { font-size: var(--text-meta); color: var(--muted); margin-bottom: var(--space-2); }
.cardrow .tally { display: inline; font-size: var(--text-meta); font-weight: 600;
                  margin-right: var(--space-2); }
.cardrow .tally + .tags { display: inline-flex; vertical-align: middle;
                          margin-bottom: var(--space-2); }
.cardrow .ident { display: block; font-size: var(--text-meta); color: var(--muted); margin: 0; }
/* A measured figure, not a warning: a panel with a rule in the act colour, never the notice
   surface the disclaimer owns. */
.stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  max-width: 62ch;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--type-act);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-5) 0;
  font-size: var(--text-meta);
}
.stat strong { font-size: var(--text-h2); line-height: 1; font-variant-numeric: tabular-nums; }
/* The ways to take the record away: a rule in the text colour over each door and no fill, so
   it is neither the stat panel nor the notice, and print and forced colours keep it as drawn. */
.doors { margin: var(--space-5) 0; }
.doors h2 { margin: 0 0 var(--space-3); }
.doors ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
            gap: var(--space-4); max-width: 62rem; list-style: none; padding: 0; margin: 0; }
.doors li { border-top: 2px solid var(--fg); padding-top: var(--space-2); }
.doors li > a { font-size: var(--text-explain); font-weight: 600; }
.doors li > span { display: block; max-width: 40ch; margin-top: var(--space-1);
                   font-size: var(--text-meta); line-height: 1.5; color: var(--muted); }
/* Rosters (acts, amending acts): one row per object, name first, identifier demoted. */
.sectors ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none;
              padding: 0; margin: 0 0 var(--space-5); font-size: var(--text-meta); }
.sectors a { font-weight: 600; }
.sectors .small { color: var(--muted); margin-left: .25rem; }
.roster { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.roster li { padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.roster li:last-child { border-bottom: 1px solid var(--rule); }
.roster > li > a:first-child { font-weight: 600; font-size: var(--text-body); }
.roster .ident { margin-left: .35rem; }
.roster .sub { display: block; max-width: 82ch; margin-top: .15rem; font-family: var(--serif);
               font-size: var(--text-meta); color: var(--fg); }
.roster .facts { display: block; margin: .15rem 0 0; }
/* A roster folded by year: the summary is the year's heading, so it keeps the heading's look and
   trades the default marker for a drawn one with empty alternative text, turned when open. The
   selectors outrank the generic `summary` and `details[open] > summary` rules in `evidence`. */
details.year { margin: var(--space-2) 0 0; }
details.year > summary { list-style: none; color: var(--fg); }
details.year > summary::-webkit-details-marker { display: none; }
details.year[open] > summary { margin-bottom: var(--space-3); }
details.year h2 { margin: 0; }
details.year h2::before { content: "\25B8"; content: "\25B8" / ""; display: inline-block;
                          width: 1.1em; font-size: .75em; line-height: 1; text-align: center;
                          vertical-align: .1em; color: var(--link); }
details.year[open] h2::before { transform: rotate(90deg); }
details.year .count { margin-left: .35rem; font-size: var(--text-meta); font-weight: 400;
                      letter-spacing: 0; color: var(--muted); }
td.result { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.meaning { color: var(--muted); }
.caveats { margin: var(--space-3) 0 0; padding-left: 1.1rem; font-size: var(--text-meta);
           color: var(--muted); }
.caveats li { margin: .3rem 0; max-width: var(--measure); }
/* A list of caveats can sit between two paragraphs, which own only the space below them. */
.caveats + p { margin-top: var(--space-3); }
.loop { list-style: none; display: grid; gap: .75rem; padding: 0; margin: var(--space-3) 0;
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.loop li { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
           padding: .7rem .8rem; font-size: var(--text-meta); }
.loop b { display: block; font-size: var(--text-label); font-weight: 600; color: var(--fg); }
/* The glossary: one definition per term, each term addressable and lit when a link lands on it. */
.glossary dt { font-weight: 600; margin-top: var(--space-3); scroll-margin-top: var(--space-3); }
.glossary dt:target { background: var(--mark); box-shadow: 0 0 0 .3rem var(--mark); }
.glossary dd { margin: .2rem 0 0; max-width: var(--measure); }
form.stack { display: grid; gap: var(--space-3); max-width: var(--measure);
             margin: 0 0 var(--space-4); }
form.stack > * { margin: 0; }
label { display: block; font-weight: 600; font-size: var(--text-meta); }
label .hint { display: block; font-weight: 400; color: var(--muted); }
input[type="email"], input[type="text"], select {
  display: block;
  width: 100%;
  max-width: var(--measure);
  margin-top: var(--space-1);
  padding: .55rem .75rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font: 400 var(--text-body)/1.4 var(--sans);
}
input[type="email"]:focus-visible, input[type="text"]:focus-visible, select:focus-visible
  { outline: 3px solid var(--link); outline-offset: 1px; }
button, .button {
  display: inline-block;
  padding: .55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--link);
  color: var(--bg);
  font: 600 var(--text-meta)/1.4 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
button:hover, .button:hover { text-decoration: underline; }
button:focus-visible, .button:focus-visible
  { outline: 3px solid var(--link); outline-offset: 2px; }
button.secondary, .button.secondary { background: transparent; color: var(--link);
                                      border-color: var(--edge); }
button.danger, .button.danger { background: var(--alert); color: var(--bg); }
.check { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 400; }
.check input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--link); }
.notice {
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--edge);
  border-left: 4px solid var(--link);
  border-radius: var(--radius);
}
.notice.alert { background: var(--alert-tint); border-left-color: var(--alert); }
.notice > :last-child { margin-bottom: 0; }
table.list { width: 100%; max-width: var(--measure); border-collapse: collapse;
             margin: 0 0 var(--space-4); font-size: var(--text-meta); }
table.list th, table.list td { padding: var(--space-2); text-align: left; vertical-align: top;
                               border-bottom: 1px solid var(--rule); }
table.list th { color: var(--muted); font-weight: 600; }
table.list td:last-child { text-align: right; }
@media (max-width: 40rem) {
  form.stack button, form.stack .button { width: 100%; text-align: center; }
}
header.bar .account {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: .45rem .9rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font: 600 var(--text-meta)/1.4 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
header.bar .account:hover { border-color: var(--link); color: var(--link); }
header.bar .account:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
header.bar .account--in { padding: .2rem .75rem .2rem .2rem; border-color: var(--fg); }
.account-initial {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--mark);
  color: var(--link);
  font-size: var(--text-label);
}
.account-email { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
/* A named reader's link is wider than the word, so the search box gives up its width rather
   than push the link onto a row of its own on a wide screen. */
header.bar:has(> .account--in) #search { flex-basis: 12rem; }
.account-head { margin: 0 0 var(--space-4); }
.account-eyebrow { margin: 0 0 var(--space-1); color: var(--muted);
                   font: 600 var(--text-caption)/1.3 var(--sans); }
.account-head h1 { margin-bottom: var(--space-2); }
.account-lede { max-width: var(--measure); margin: 0; color: var(--muted);
                font-size: var(--text-lede); line-height: 1.45; }
.tabs {
  display: flex;
  gap: 0 var(--space-5);
  margin: 0 0 var(--space-5);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: -1px;
  padding: .75rem 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--text-meta);
  text-decoration: none;
  white-space: nowrap;
}
.tabs a:hover { color: var(--fg); }
.tabs a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--fg); }
.tabs .count {
  padding: .05rem .45rem;
  border-radius: var(--radius);
  background: var(--mark);
  color: var(--link);
  font-size: var(--text-label);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
/* A panel on the page ground is a small step in the dark scheme, so its hairline carries it. */
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); }
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 1.25rem;
  border: 1px solid var(--edge);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
}
.banner p { flex: 1 1 30rem; margin: 0; font-size: var(--text-meta); line-height: 1.5; }
.banner form { margin: 0; }
.banner--alert { background: var(--alert-tint); border-color: var(--alert); }
.banner--info { border-left-color: var(--link); }
.banner--ok { background: var(--kind-inserted-tint); border-color: var(--kind-inserted); }
.lists { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
         margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.lists a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: var(--space-2) .9rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font-weight: 600;
  font-size: var(--text-meta);
  text-decoration: none;
}
.lists a:hover { border-color: var(--link); }
.lists a[aria-current="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.lists .new { border-style: dashed; border-color: var(--link); background: transparent;
              color: var(--link); }
.state-on, .state-off {
  display: inline-flex;
  align-items: center;
  padding: .12rem .45rem;
  border: 1px solid;
  border-radius: var(--radius);
  font: 600 var(--text-label)/1.25 var(--sans);
  white-space: nowrap;
}
.state-on { color: var(--kind-inserted); background: var(--kind-inserted-tint);
            border-color: var(--kind-inserted); }
.state-off { color: var(--provenance); background: var(--provenance-tint);
             border-color: var(--edge); }
.button.small, button.small { padding: .3rem .75rem; font-size: var(--text-label); }
/* `margin` is reset because the bare `.quiet` of an event page sets one. */
.button.quiet, button.quiet {
  margin: 0;
  padding: .3rem var(--space-2);
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-label);
}
.button.quiet:hover, button.quiet:hover { color: var(--fg); text-decoration: underline; }
textarea {
  display: block;
  width: 100%;
  max-width: var(--measure);
  min-height: 8rem;
  margin-top: var(--space-1);
  padding: .55rem .75rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font: 400 var(--text-body)/1.5 var(--sans);
  resize: vertical;
}
textarea:focus-visible { outline: 3px solid var(--link); outline-offset: 1px; }
/* The arrow is `base`'s `.back::before`, silent to a screen reader like every drawn arrow. */
.back { display: inline-block; margin: 0 0 var(--space-3); font-size: var(--text-meta); }
@media (max-width: 40rem) {
  #search, header.bar:has(> .account--in) #search { order: 1; flex-basis: 100%; }
  header.bar .account { flex: none; position: relative; }
  header.bar:has(> .account) nav { margin-right: 0; }
  header.bar .account--in { padding: .2rem; }
  .account-email {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .tabs { gap: 0 var(--space-4); margin-bottom: var(--space-4); }
  .account-lede { font-size: var(--text-body); }
}
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
         margin: 0 0 var(--space-5); padding: var(--space-3) 1.25rem; }
.strip-item { display: flex; align-items: center; gap: .75rem; }
.strip-icon { display: inline-grid; place-items: center; flex: none; width: 2.25rem;
              height: 2.25rem; border-radius: var(--radius); background: var(--mark);
              color: var(--link); }
.strip-label { display: block; color: var(--muted); font: 600 var(--text-label)/1.3 var(--sans); }
.strip-value { display: block; font-size: var(--text-meta); line-height: 1.35; }
.strip-more { margin-left: auto; font-weight: 600; font-size: var(--text-meta); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end;
                justify-content: space-between; gap: .75rem var(--space-4);
                margin: 0 0 var(--space-3); }
.section-head h2 { margin: 0; }
.section-head p { margin: var(--space-1) 0 0; }
.act-group { margin: 0 0 var(--space-3); overflow: hidden; }
.act-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem;
                  padding: .9rem 1.25rem; background: var(--notice);
                  border-bottom: 1px solid var(--rule); }
.act-name { color: var(--fg); font-size: var(--text-explain); font-weight: 600;
            line-height: 1.3; text-decoration: none; }
.act-name:hover { color: var(--link); text-decoration: underline; }
.act-coverage { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto;
                color: var(--muted); font-size: var(--text-label);
                font-variant-numeric: tabular-nums; }
.act-coverage::before { content: ""; flex: none; width: .5rem; height: .5rem;
                        border-radius: 50%; background: var(--kind-inserted); }
.act-coverage--waiting::before { background: var(--kind-deferred); }
.act-coverage-note { flex-basis: 100%; margin: 0; color: var(--muted);
                     font-size: var(--text-meta); line-height: 1.5; }
.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "what latest remove";
  align-items: center;
  gap: .4rem var(--space-4);
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.item:last-child { border-bottom: 0; }
.item-what { grid-area: what; display: flex; flex-wrap: wrap; align-items: baseline;
             gap: var(--space-1) .75rem; min-width: 0; }
.item-what a { color: var(--fg); text-decoration: none; }
.item-what a:hover { color: var(--link); text-decoration: underline; }
.item-latest { grid-area: latest; color: var(--muted); font-size: var(--text-meta);
               white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-remove { grid-area: remove; }
.item-remove form { margin: 0; }
.settings { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
            gap: var(--space-3) var(--space-5); padding: var(--space-4) 0; }
.settings + .settings { padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.settings-intro h2 { margin: 0; font-size: var(--text-h3); }
.settings-intro p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-meta);
                    line-height: 1.5; }
.choice-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
                margin: 0; padding: 0; border: 0; }
.choice {
  position: relative;
  display: block;
  padding: var(--space-3) var(--space-3) var(--space-3) 3rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--panel);
  font-weight: 400;
  cursor: pointer;
}
.choice input { position: absolute; left: 1.1rem; top: 1.3rem; width: 1.1rem; height: 1.1rem;
                margin: 0; accent-color: var(--link); }
.choice strong { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
                 font-size: var(--text-body); line-height: 1.35; }
.choice:hover { border-color: var(--link); }
.choice:has(input:checked) { border-color: var(--link); box-shadow: inset 0 0 0 1px var(--link);
                             background: var(--mark); }
.option-rows { overflow: hidden; }
.option {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin: 0;
  padding: var(--space-3) 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
  cursor: pointer;
}
.option:last-child { border-bottom: 0; }
.option input { flex: none; width: 1.1rem; height: 1.1rem; margin: .2rem 0 0;
                accent-color: var(--link); }
.option strong { display: block; font-size: var(--text-body); line-height: 1.4; }
.rows { overflow: hidden; }
.row-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
            gap: .75rem var(--space-4); padding: 1.1rem 1.25rem;
            border-bottom: 1px solid var(--rule); }
.row-line:last-child { border-bottom: 0; }
.row-line > * { margin: 0; }
.row-line p { color: var(--muted); font-size: var(--text-meta); line-height: 1.5; }
.danger-zone { padding: 1.25rem; border: 1px solid var(--alert); border-radius: var(--radius);
               background: var(--alert-tint); color: var(--fg); }
.danger-zone h2, .danger-zone h3 { margin: 0 0 var(--space-2); color: var(--alert); }
.danger-zone p { max-width: var(--measure); }
.danger-zone form { margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3);
         margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.steps > .step { padding: 1.4rem 1.4rem var(--space-4); }
.steps > .step h3 { margin: 0; }
.steps > .step p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-meta);
                   line-height: 1.5; }
.step-number { display: grid; place-items: center; width: 2rem; height: 2rem;
               margin: 0 0 .9rem; border: 2px solid var(--link); border-radius: 50%;
               color: var(--link); font-weight: 600; font-size: var(--text-meta); }
.aside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
         gap: .75rem var(--space-4); margin-top: var(--space-5); padding: 1.1rem 1.25rem;
         border: 1px dashed var(--edge); border-radius: var(--radius); }
.aside > * { margin: 0; }
@media (max-width: 40rem) {
  .strip { flex-direction: column; align-items: flex-start; }
  .strip-more { margin-left: 0; }
  .act-group-head { padding: .75rem var(--space-3); }
  .act-coverage { margin-left: 0; flex-basis: 100%; }
  .item { grid-template-columns: minmax(0, 1fr) auto;
          grid-template-areas: "what remove" "latest remove"; padding: .75rem var(--space-3); }
  .item-latest { white-space: normal; }
  .settings { grid-template-columns: minmax(0, 1fr); }
  .choice-cards { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .row-line { padding: var(--space-3); }
}
/* An official title or heading, in the law's own words: the serif, one step down. */
.official {
  margin: 0 0 var(--space-3);
  max-width: 82ch;
  font-family: var(--serif);
  font-size: var(--text-meta);
  line-height: 1.55;
  color: var(--muted);
}
.links { margin: var(--space-1) 0 var(--space-4); font-size: var(--text-meta); line-height: 1.55; }
/* The neighbours line closes the header, so its gap above is the links line's own. */
.related { margin: 0 0 var(--space-4); font-size: var(--text-meta); color: var(--muted); }
.layout { display: block; }
/* The index is bounded at every width. An act with hundreds of provisions renders hundreds
   of links, and `<details open>` opens them all: unbounded, the CRR index stands 20510px tall
   on a 390px screen, and the dates list that follows it on a phone starts below all of it. */
.sidebar {
  margin: var(--space-4) 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: var(--text-meta);
  line-height: 1.45;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar summary { padding: var(--space-2) 0; font-weight: 600; color: var(--fg); }
.sidebar h2 {
  margin: var(--space-3) 0 var(--space-2);
  padding: 0;
  border: 0;
  font-size: var(--text-label);
  letter-spacing: .01em;
  color: var(--muted);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem;
              padding: .3rem 0; border-top: 1px solid var(--rule); }
.sidebar li:first-child { border-top: 0; }
/* A provision's title under its coordinate, one line, cut by the sheet and never the markup. */
.sidebar li .ttl { flex: 1 1 100%; min-width: 0; overflow: hidden; white-space: nowrap;
                   text-overflow: ellipsis; color: var(--muted); }
.sidebar li > a + .tag { margin-left: auto; }
.sidebar .versions a { font-weight: 600; }
.sidebar .versions .small { flex: 1 1 100%; color: var(--muted); }
/* The markup runs timeline, index, dates, which is the order a phone reads in; a wide screen
   places the index in the left column by area, beside both, and caps it at the viewport so a
   short timeline never stands beside a taller box of links. */
@media (min-width: 60rem) {
  .layout {
    display: grid;
    grid-template-columns: var(--index-width) minmax(0, 1fr);
    grid-template-areas: "index main" "index dates";
    gap: var(--space-5);
    align-items: start;
  }
  .layout > .sidebar { grid-area: index; }
  .layout > .timeline { grid-area: main; }
  .layout > .dates-named { grid-area: dates; }
  .sidebar { position: sticky; top: var(--space-3); max-height: calc(100vh - 2rem);
             margin: 0; overflow-y: auto; }
}
/* The rail and its nodes: an act's history is a sequence, and each version on it is a point.
   Each card draws its own stretch of the line, so a heading above the cards stands clear of
   it, and the last card's stretch is transparent so the line ends at the last node. */
.timeline { min-width: 0; }
.event {
  position: relative;
  min-width: 0;
  padding: 0 0 var(--space-5) var(--space-5);
  border-left: 2px solid var(--rule);
  margin-left: .45rem;
}
.event:last-of-type { border-left-color: transparent; padding-bottom: var(--space-3); }
.event::before {
  content: "";
  position: absolute;
  left: calc(-.45rem - 1px);
  top: .45rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: 2px solid var(--type-version);
  background: var(--bg);
}
.event:first-of-type::before { background: var(--type-version); }
/* A card: the version's name as its one link, what made it, its tally, its identifiers. */
.event > h2, .event > h3 { font-size: var(--text-h3); line-height: 1.3;
                           margin: 0 0 var(--space-2); }
.event .amending { font-size: var(--text-meta); color: var(--muted);
                   margin-bottom: var(--space-1); }
.event .amending a:first-of-type { font-weight: 600; }
.event .subject {
  font-family: var(--serif);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--fg);
  max-width: 66ch;
  margin-bottom: var(--space-2);
}
.event .tally, .version-masthead .tally { display: inline; font-weight: 600;
                                          margin-right: var(--space-2); }
.event .tally { font-size: var(--text-meta); }
.event .tally + .tags, .version-masthead .tally + .tags { display: inline-flex;
                                                          vertical-align: middle;
                                                          margin-bottom: var(--space-2); }
.event .ident, .event .note { font-size: var(--text-meta); color: var(--muted); margin-bottom: 0; }
.event .note { margin-top: var(--space-1); }
.timeline > .section { margin: 0 0 var(--space-2); }
.timeline > .tags-help { margin-bottom: var(--space-4); }
/* A phone gives the rail less of its narrow column. */
@media (max-width: 40rem) {
  .event { padding-left: var(--space-4); }
}
/* The version masthead continues the version band below the header: a page's subject, not a
   card. Its facts sit in two groups, side by side where there is room. */
.version-masthead {
  margin-top: calc(-1 * var(--space-4));
  padding: 0 0 var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--type-version-tint);
  border-bottom: 1px solid var(--rule);
  border-image: conic-gradient(var(--rule) 0 0) 0 0 1 0 / 0 0 1px 0 / 0 100vmax;
  box-shadow: 0 0 0 100vmax var(--type-version-tint);
  clip-path: inset(0 -100vmax -1px);
}
.version-masthead .amending { font-size: var(--text-body); margin-bottom: var(--space-2); }
.version-masthead .amending a:first-of-type { font-weight: 600; }
/* A short version's changes, named first so a phone's first screen says what changed. The
   lead is set as a caption, the coordinates are the links, and a long title wraps. */
.changes-line { font-size: var(--text-body); line-height: 1.5; max-width: 80ch;
                margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.changes-line p { margin: 0; }
.changes-line .lead { font: 600 var(--text-caption)/1.3 var(--sans); color: var(--fg);
                      margin-right: .15rem; }
.changes-line a { font-weight: 600; }
.changes-line .ttl { color: var(--fg); }
/* The amending act's official title: the law's words, so the serif, at a readable size. */
.version-masthead .lede { font-family: var(--serif); font-size: var(--text-lede); line-height: 1.45;
                          color: var(--fg); max-width: 66ch; }
.version-masthead .dates { font-size: var(--text-meta); color: var(--muted); }
.version-masthead .ident, .version-masthead .instruments { font-size: var(--text-meta);
                                                           color: var(--muted); max-width: 80ch; }
.version-masthead .ident code { color: var(--fg); }
/* Why a version's code can carry a date it is not in force from, under the codes it explains. */
.version-masthead .ident .note { display: block; margin-top: var(--space-1); }
.summary {
  display: grid;
  gap: 0 var(--space-5);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}
@media (min-width: 60rem) {
  .summary { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); }
}
.status { font-weight: 600; margin-bottom: var(--space-2); }
.section { font-size: var(--text-h2); margin: 0 0 var(--space-4); }
/* Every date one act's text names, under its timeline. A list rather than a table: a row is a
   date and the two places it can be checked, and columns would promise a structure the corpus
   never wrote. The date leads each row in tabular figures, so the dates scan as a column
   while the words around them stay prose. */
.dates-named { margin: var(--space-5) 0 0; }
.dates-named ul { list-style: none; margin: 0; padding: 0; font-size: var(--text-meta); }
.dates-named li { padding: .2rem 0; }
.dates-named .on { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
/* Dates ahead gathers its list by sector, then by year. A sector is a heading a reader jumps
   to from the list above it, so it opens under a rule; the year beneath it is a marker in the
   body size, and a far year's qualifier is set quieter than the year it qualifies. */
.dates-named .sectors ul { margin: 0 0 var(--space-4); }
.dates-named .sectors li { padding: 0; }
.dates-named h3 { margin: var(--space-4) 0 var(--space-2); padding-top: var(--space-3);
                  border-top: 1px solid var(--rule); scroll-margin-top: var(--space-3); }
.dates-named h4 { font-family: var(--sans); font-size: var(--text-body); font-weight: 600;
                  line-height: 1.3; color: var(--fg); margin: var(--space-3) 0 var(--space-1);
                  font-variant-numeric: tabular-nums lining-nums; }
.dates-named h3 + h4 { margin-top: 0; }
.dates-named h4 .small { font-weight: 400; margin-left: var(--space-2); }
/* One watched act on an amending instrument's page: its own heading, then the rail of events
   that instrument produced there. The heading carries the act, so it is set as a page heading
   rather than as a card's. */
.amended { margin: var(--space-5) 0 0; }
.amended > h2 a { text-decoration: none; }
.amended > h2 a:hover { text-decoration: underline; }
/* The versions either side of this one: quiet local navigation, each direction's date under
   it, at the two ends of the line so the direction is visible before the words are. */
.pager { display: flex; justify-content: space-between; gap: var(--space-3);
         font-size: var(--text-meta); line-height: 1.4; margin: 0; }
.pager a { text-decoration: none; display: inline-flex; flex-direction: column; }
.pager a > span:first-child { text-decoration: underline; text-underline-offset: .18em;
                              text-decoration-thickness: 1px; }
.pager a:hover > span:first-child { text-decoration-thickness: 2px; }
.pager .small { color: var(--muted); }
.pager [rel="next"] { margin-left: auto; text-align: right; }
.pager--foot { border-top: 1px solid var(--rule); padding-top: var(--space-3);
               margin-top: var(--space-5); }
/* The amending act that made a version or moved a provision: its name in the semibold, its
   identifier small beside it, EUR-Lex last. */
.amending { font-size: var(--text-meta); color: var(--muted); margin-bottom: var(--space-1); }
.amending a:first-of-type { font-weight: 600; }
.chg {
  padding: var(--space-4) 0 var(--space-3);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--space-3);
}
.chg:target { background: var(--mark); box-shadow: 0 0 0 var(--space-3) var(--mark); }
.chg h3, .chg.step h2 { margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap;
                        align-items: baseline; gap: .15rem .6rem; padding: 0; border: 0;
                        font-size: var(--text-h3); line-height: 1.3; }
.chg h3 .tag, .chg.step h2 .tag { align-self: center; }
.chg .loc { font-weight: 600; }
/* The coordinate in a change heading leads to that provision's own history. It keeps the
   weight and the colour it had as a span: it is still the heading of the block, not an
   invitation to leave it. */
a.loc { color: inherit; font-weight: 600; }
.chg .ttl { font-weight: 600; color: var(--fg); }
/* A title printed in capitals, as Formex prints an annex's subject, set in small capitals so
   it does not shout. The characters stay the law's; only their size changes. The faces carry
   no small capitals, so this one synthesis is let back in: scaled capitals are the same
   letters, where a synthesised weight or slant would not be. */
.ttl--caps { font-variant-caps: all-small-caps; font-synthesis-small-caps: auto;
             letter-spacing: .02em; }
.chg.step h2 .mag { font-size: var(--text-meta); }
/* The source that named a row with no text, on the heading that is the whole of that row
   until it is opened. Smaller and muted, so the heading stays one coordinate. */
.chg .by { font-weight: 400; font-size: var(--text-meta); color: var(--muted); }
/* One change's own address, at the end of the heading that names it: furniture beside a
   coordinate that is not, so muted and pushed to the end of the row by the heading's flex. */
.permalink { margin-left: auto; padding: 0 .25rem; color: var(--muted); font-weight: 400;
             font-size: var(--text-meta); text-decoration: none; }
.permalink:hover, .permalink:focus { color: var(--link); }
/* How much moved and when it applies, one line of facts under the heading. A real date is
   lifted out of the muted colour; the two stated non-answers keep it. */
.chg .meta { margin: 0 0 var(--space-2); font-size: var(--text-meta); color: var(--muted); }
.chg .meta .date { color: var(--fg); }
.chg .amending { margin-bottom: var(--space-1); font-size: var(--text-meta); color: var(--muted); }
/* The dates a change moved, set like the facts line above them and in tabular figures, so a
   column of ISO dates reads as a column. */
.dates { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-meta);
         color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
/* Where the sources differ: the shape's tag, then the lead and the detail. Plain text for the
   two presence shapes; only the contradiction takes the alert's tint and rule. */
.differ { margin: var(--space-2) 0; font-size: var(--text-meta); line-height: 1.5;
          color: var(--fg); }
.differ-kind .differ { padding: var(--space-2) var(--space-3); background: var(--alert-tint);
                       border-left: 3px solid var(--alert); }
.differ-kind .differ strong { color: var(--alert); }
/* The machine's register: a label saying who wrote the sentences under it, drawn with a small
   open diamond, then the sentences in the sans behind a rule, the largest text on the block. */
.register {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--muted);
}
.register::before {
  content: "";
  width: .8rem;
  height: .8rem;
  border: 2px solid var(--muted);
  border-radius: 2px;
  transform: rotate(45deg) scale(.75);
}
.register ~ p:not([class]) {
  max-width: 64ch;
  margin: 0;
  padding: 0 0 var(--space-2) var(--space-3);
  border-left: 3px solid var(--edge);
  font-size: var(--text-explain);
  line-height: 1.55;
}
/* The citations of one change, once, under its sentences, and what `v1` and `v2` in them
   mean, under the row that uses them. */
.cites { margin: var(--space-3) 0 0; font-size: var(--text-meta); color: var(--muted); }
.cites-key { margin-bottom: var(--space-3); color: var(--muted); }
/* One step of a provision's history: a change block on the same rail an act's timeline is
   drawn as, one node per version, the newest filled. */
.chg.step {
  position: relative;
  margin-left: .45rem;
  padding: 0 0 var(--space-5) var(--space-5);
  border-top: 0;
  border-left: 2px solid var(--rule);
}
.chg.step:last-of-type { border-left-color: transparent; }
.chg.step::before {
  content: "";
  position: absolute;
  left: calc(-.45rem - 1px);
  top: .5rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  border: 2px solid var(--type-version);
  background: var(--bg);
}
.chg.step:first-of-type::before { background: var(--type-version); }
.chg.step:target { background: transparent; box-shadow: none; }
.chg.step:target > h2 { background: var(--mark); box-shadow: 0 0 0 .4rem var(--mark); }
/* How much of the provision moved, in characters. Never wrapped: `+1,204` alone at the end
   of a row would read as the whole count. */
.mag { font-size: var(--text-label); font-weight: 400; color: var(--muted);
       white-space: nowrap; }
/* The line pinned while a long version page scrolls: the act, the version, the way back to the
   index. It exists only where the index does, so the sticky column's offset below makes room
   for it unconditionally. Painted full-bleed the way the masthead band is. */
.context {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: var(--context-height);
  display: flex;
  align-items: center;
  margin: 0 0 var(--space-4);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax -1px);
}
.context p { flex: 1; margin: 0; max-width: none; font-size: var(--text-meta); line-height: 1.3;
             padding: .5rem 0; }
.context p::before { content: ""; display: inline-block; width: .55rem; height: .55rem;
                     border-radius: 50%; margin-right: .5rem; background: var(--type-version);
                     border: 1px solid var(--type-version); }
.context a { font-weight: 600; }
.context a[href="#changes-index"]::before { content: "\2191"; content: "\2191" / "";
                                            margin-right: .3rem; display: inline-block; }
.version-masthead + .context { margin-top: calc(-1 * var(--space-5)); }
/* Anything the page scrolls to, a fragment or a focused link, lands below the bar rather
   than under it; a change's own margin then clears its highlight. */
html:has(.context) { scroll-padding-top: var(--context-height); }
.to-index { text-align: right; font-size: var(--text-meta); margin: var(--space-2) 0 0;
            max-width: none; }
.to-index a { text-decoration: none; }
.to-index a:hover { text-decoration: underline; }
/* A map of the page, not a second copy of it. Below the two-column width it is a grid of
   coordinates, each marked by its kind's glyph, so forty-five changes cost a few lines. */
.touched { margin: var(--space-3) 0 var(--space-4); padding: var(--space-3);
           background: var(--panel); border: 1px solid var(--rule);
           border-radius: var(--radius); font-size: var(--text-meta); line-height: 1.35;
           scroll-margin-top: var(--space-2); }
.touched p { margin: 0 0 var(--space-2); }
.touched ol { list-style: none; margin: 0; padding: 0; }
.touched li > a .loc { font-weight: inherit; }
/* The decade of characters a change moved, as weight on its link, so the index reads as a map
   of where the text is rather than only of where a change is. Two weights are loaded, so the
   four decades fall into two; the count beside each one is the fact, and the classes claim
   nothing about importance. */
.touched .mag-1 a { font-weight: 400; }
.touched .mag-2 a { font-weight: 400; }
.touched .mag-3 a { font-weight: 600; }
.touched .mag-4 a { font-weight: 600; }
@media (max-width: 59.99rem) {
  .touched ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
                gap: 0 .75rem; }
  .touched li { display: flex; align-items: baseline; gap: .3rem; padding: .4rem 0;
                border-bottom: 1px solid var(--rule); }
  .touched li > a .ttl, .touched li .mag { display: none; }
  /* The tag's words stay in the accessibility tree at no size; its glyph shows the kind, and
     a modified change, the common case, is left unmarked. */
  .touched li .tag { order: -1; font-size: 0; padding: 0; border: 0; background: none; gap: 0; }
  .touched li .tag::before { font-size: var(--text-meta); font-weight: 600; min-width: .7em; }
  .touched li .tag--kind-modified::before { content: ""; }
  .touched li .tag--kind-renumbered::before { content: "#"; }
  .touched li .tag--kind-deferred::before { content: "\00bb"; }
}
/* The same grid the act page draws, with the event's index as the left column, at the one
   width the act page becomes two columns. The `.sidebar` cap above is deliberately not reused:
   that one bounds a `<details>` of hundreds of links at every width, where this is a grid of
   forty coordinates that costs a few lines until it stands as a column. It sticks below the
   context bar, which every page with this index carries. */
@media (min-width: 60rem) {
  .event-layout { grid-template-areas: none; }
  .event-layout .touched {
    position: sticky;
    top: calc(var(--context-height) + var(--space-3));
    max-height: calc(100vh - var(--context-height) - 2rem);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .event-layout .touched li { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                              gap: .1rem .5rem; padding: .45rem 0;
                              border-top: 1px solid var(--rule); }
  .event-layout .touched li:first-child { border-top: 0; }
  .event-layout .touched li > a { grid-row: span 2; min-width: 0; text-decoration: none; }
  .event-layout .touched li > a .loc { text-decoration: underline; text-underline-offset: .18em;
                                       text-decoration-thickness: 1px; }
  .event-layout .touched li > a:hover .loc { text-decoration-thickness: 2px; }
  .event-layout .touched li > a .ttl { display: block; overflow: hidden; margin-top: .1rem;
                                       color: var(--muted); font-size: var(--text-label);
                                       font-weight: 400; line-height: 1.35;
                                       text-overflow: ellipsis; white-space: nowrap; }
  .event-layout .touched li .tag, .event-layout .touched li .mag { justify-self: end;
                                                                   align-self: start; }
  .event-layout .touched li .mag { grid-column: 2; }
  .changes { min-width: 0; }
  .changes > .chg:first-child { border-top: 0; padding-top: 0; }
}
/* The changes with no text to show, gathered at the foot of an event: one line each, with the
   rest of the block hidden until the row is the fragment target. `:target` is what a permalink
   into this list sets, so the link that names a row is the link that opens it, with no script
   and nothing dropped from the markup. */
.quiet { margin: var(--space-5) 0 0; }
.quiet .chg { padding: .2rem 0; border-top: 0; }
.quiet .chg > *:not(h3) { display: none; }
.quiet .chg:target { padding: var(--space-3) 0; }
.quiet .chg:target > *:not(h3) { display: block; }
details { margin: var(--space-3) 0 var(--space-2); }
summary { cursor: pointer; width: fit-content; padding: .35rem 0; font-weight: 600;
          font-size: var(--text-meta); color: var(--link); }
summary::marker { color: var(--link); }
summary:hover { text-decoration: underline; }
details[open] > summary { margin-bottom: var(--space-2); }
/* The strip above a diff or a whole provision: which versions it compares, joined to the box
   under it and exactly as wide, which is why the legal measure is set in `rem`. */
.lbl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
  max-width: var(--legal-measure);
  margin: 0;
  padding: .5rem .9rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: var(--text-label);
  color: var(--muted);
}
/* The two sides compared, named, and each marked with the glyph and tint its text carries
   below, so the label is also the legend. */
.lbl .side-before, .lbl .side-after { padding: 0 .2rem; border-radius: 2px; color: var(--fg);
                                      font-weight: 600; }
.lbl .side-before { background: var(--del); }
.lbl .side-after { background: var(--ins); }
.lbl .side-before::before { content: "\2212\00a0"; }
.lbl .side-after::before { content: "+\00a0"; }
/* The law's own words: the serif, held to the legal measure, with no ligature and tabular
   figures, so the text reads as EUR-Lex wrote it and no two characters can merge. */
.diff, .verbatim {
  max-width: var(--legal-measure);
  margin: 0 0 var(--space-3);
  padding: .9rem 1.1rem 1rem;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--edge);
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--serif);
  font-size: var(--text-legal);
  line-height: 1.7;
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums lining-nums;
  font-kerning: normal;
  /* The stored text breaks at every block boundary the source document opened, and the
     unified view emits those breaks. Without this they would collapse and a provision would
     read as one wall of prose. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Both tints carry foreground text, so what is readable never depends on a coloured
   foreground surviving a theme swap, and both marks also say which they are without their
   tint: an insertion is underlined and a deletion struck through, on screen as on paper. A
   diff block holds no links, so an underline inside one can mean only the one thing. */
.diff ins, .diff del { padding: 0 .1em; border-radius: 2px; color: var(--fg); }
.diff ins { background: var(--ins); text-decoration: underline; text-underline-offset: .2em;
            text-decoration-thickness: 1px; }
.diff del { background: var(--del); text-decoration: line-through;
            text-decoration-thickness: 1px; }
/* The site's interruption of the text rather than part of it: the sans, in a chip whose
   `--edge` border is visible at 3:1. */
.elided {
  display: inline-block;
  margin: 0 .15rem;
  padding: 0 .45rem;
  border: 1px dashed var(--edge);
  border-radius: var(--radius);
  font: 400 var(--text-label)/1.4 var(--sans);
  color: var(--muted);
  white-space: nowrap;
}
.verbatim.ins { background: var(--ins); border-left-color: var(--kind-inserted); }
.verbatim.del { background: var(--del); border-left-color: var(--kind-deleted); }
/* A phone gives the step rail and the legal text less padding and more of the line. */
@media (max-width: 40rem) {
  .chg.step { padding-left: var(--space-4); }
  .diff, .verbatim { padding: .75rem .8rem; }
}
table { border-collapse: collapse; width: 100%; font-size: var(--text-meta); min-width: 40rem; }
th, td { text-align: left; vertical-align: top; padding: .5rem .6rem;
         border-bottom: 1px solid var(--rule); }
th { font-size: var(--text-label); font-weight: 600; color: var(--muted); }
/* A phone stacks each row into a block under the measure it scores, every other cell under
   its column's words, read from `data-label`; the header row stays for a screen reader. */
@media (max-width: 40rem) {
  .scroll:has(> table) { overflow-x: visible; }
  table { min-width: 0; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table, tbody, tr, td { display: block; }
  tr { border-bottom: 1px solid var(--rule); padding-block: .5rem; }
  td { border: 0; padding: .15rem 0; }
  td[data-label]::before { content: attr(data-label); display: block;
                           font-size: var(--text-label); color: var(--muted); font-weight: 600; }
  td:first-child { font-weight: 600; }
  td:first-child::before { content: none; }
}
.entries { margin: var(--space-3) 0; }
.entries-count { margin: 0 0 var(--space-2); font-size: var(--text-meta); font-weight: 600; }
.entries h4 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-body); }
.entries details { margin: var(--space-2) 0; }
.entries summary { font-size: var(--text-meta); cursor: pointer; }
/* A wide table scrolls inside its own box, never the page. */
.entries-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 var(--space-3); }
/* Named with the class so these outrank the phone rule that stacks a generic table. */
.entries table { display: table; width: auto; min-width: 100%; font-size: var(--text-meta); }
.entries caption { padding: 0 0 var(--space-1); text-align: left; font-size: var(--text-label);
                   color: var(--muted); caption-side: top; }
.entries thead { position: static; width: auto; height: auto; overflow: visible;
                 clip-path: none; display: table-header-group; }
.entries tbody { display: table-row-group; }
.entries tr { display: table-row; padding: 0; border: 0; }
.entries th, .entries td { display: table-cell; padding: .35rem .5rem; vertical-align: top;
                           border: 1px solid var(--rule); font-weight: 400; }
.entries thead th { color: var(--muted); font-weight: 600; white-space: pre-wrap; }
/* The row as printed: the serif, its own line breaks kept. */
.entries td { font-family: var(--serif); white-space: pre-wrap; overflow-wrap: anywhere;
              min-width: 6rem; color: var(--fg); }
.entries tbody th { font-family: var(--sans); text-align: left; white-space: nowrap;
                    color: var(--fg); }
.entries tbody th span { display: block; }
.entries tbody th span:first-child { font-weight: 600; }
.entries td.side { font-family: var(--sans); color: var(--muted); min-width: 0;
                   white-space: nowrap; }
/* A cell that differs keeps its marks as a diff does: a tint, and an underline or a strike. */
.entries td.differs { border-left: 3px solid var(--edge); }
.entries ins, .entries del { padding: 0 .1em; border-radius: 2px; color: var(--fg); }
.entries ins { background: var(--ins); text-decoration: underline; text-underline-offset: .2em; }
.entries del { background: var(--del); text-decoration: line-through; }
.entry-keys { columns: 16rem; margin: 0 0 var(--space-2); font-size: var(--text-meta); }
@media print {
  #search, header.bar nav, header.bar .account, .skip, .tabs { display: none; }
  body { background: white; color: black; }
  main, header.bar, footer { max-width: none; padding-left: 0; padding-right: 0; }
  /* A scroll box cannot be scrolled on paper, so both indexes print whole. */
  .sidebar { max-height: none; overflow: visible; }
  .event-layout .touched { position: static; max-height: none; overflow: visible; }
  /* Navigation, like the header's: a permalink, a pinned line and a way back to the top or to
     the index of a sheet of paper are all instructions a printed page cannot carry out. */
  .permalink, .backtop, .context, .to-index, .pager, .tags-help, .define { display: none; }
  /* A row cannot be opened on paper either, so the gathered ones print whole, for the reason
     both indexes do. Named with the same two classes the screen rule uses, since a shorter
     selector would not outrank it. */
  .quiet .chg > *:not(h3) { display: block; }
  .quiet .chg > .to-index { display: none; }
  .stat, .disclaimer, .sidebar, .touched, .diff, .verbatim, .lbl, .loop li, .tag
    { background: transparent; }
  /* Named again because a two-class or pseudo-class selector outranks a one-class one
     whatever the order: what these tints say is already written beside them, in the label
     above a whole inserted or deleted provision, in the name of each side, and in the
     fragment that brought a reader to one block. */
  .verbatim.ins, .verbatim.del, .lbl .side-before, .lbl .side-after, .chg:target
    { background: transparent; }
  .chg:target, .chg.step:target > h2 { box-shadow: none; }
  .glossary dt:target { background: transparent; box-shadow: none; }
  /* And the tinted note of the one shape that is an alert, for the same reason and by the
     same rule: what its tint says is written in it, in its lead and beside it in its tag. */
  .differ-kind .differ { background: transparent; }
  /* The tints inside a diff are the only ones that say something no word beside them does,
     so they stay, and nothing is redeclared for them: the screen rules already underline an
     insertion and strike a deletion, which is what a printer with no colour reads. */
  a { color: inherit; }
  /* The band is a tint and costs ink; its top rule is what says where the page begins. */
  .masthead { background: none; box-shadow: none; clip-path: none; border-image: none;
              border-top: 2px solid currentColor; }
  .version-masthead { background: none; box-shadow: none; clip-path: none; }
  /* An entry table cannot scroll on paper, so it prints whole; its marks keep their lines. */
  .entries-scroll { overflow: visible; }
}
/* Forced colours replace every colour with the reader's own, and a mark drawn only as a
   background vanishes. So every boundary that is the information becomes `CanvasText`, and the
   rail's nodes are drawn as rings the system palette keeps, the newest still filled. */
@media (forced-colors: active) {
  .tag, .elided, .disclaimer, .touched, .sidebar, .diff, .verbatim, #search input
    { border-color: CanvasText; }
  .tag--differ-kind, .differ-kind .differ { border-width: 2px; }
  .differ-kind .differ { border-left-width: 3px; border-left-color: CanvasText; }
  .event::before, .chg.step::before {
    background: Canvas; border-color: CanvasText; forced-color-adjust: none;
  }
  .event:first-of-type::before, .chg.step:first-of-type::before
    { background: CanvasText; }
  .diff ins { text-decoration: underline; }
  .diff del { text-decoration: line-through; }
  /* The caption's shape is a fill, so it is drawn as a ring the system palette keeps. */
  .caption::before, .context p::before
    { background: Canvas; border-color: CanvasText; forced-color-adjust: none; }
  .masthead { border-image: none; border-top-color: CanvasText; }
  /* A transparent border is painted in the system colour too, so every other item's is
     drawn as the ground and only the current one stays underlined. */
  header.bar nav a { border-bottom-color: Canvas; }
  header.bar nav a[aria-current="page"] { border-bottom-color: CanvasText; }
  /* The account pages' states, each kept as a line: the current tab its underline, the
     current list and the chosen card a doubled border, the coverage dot a ring. */
  .tabs a { border-bottom-color: Canvas; }
  .tabs a[aria-current="page"] { border-bottom-color: CanvasText; }
  .lists a[aria-current="true"], .choice:has(input:checked)
    { border: 2px solid CanvasText; box-shadow: none; }
  .act-coverage::before { border: 1px solid CanvasText; }
  header.bar .account, .panel, .banner, .choice, .danger-zone, .state-on, .state-off, textarea
    { border-color: CanvasText; }
  /* An entry table's grid and its differing cells, and the marks inside them. */
  .entries th, .entries td, .entries td.differs { border-color: CanvasText; }
  .entries ins { text-decoration: underline; }
  .entries del { text-decoration: line-through; }
}