/* Self-hosted, because the content security policy admits fonts only from this origin and a
   retrieval product should not tell a third party which law a reader is looking at. The UX spec
   names Inter for chrome and Source Serif 4 for statutory text, with system-ui and Georgia as
   the fallbacks, and both as self-hostable.

   Four files, not eight. Both families are variable fonts: one file covers the whole weight
   range, and the upstream stylesheet declares each twice with different font-weight values
   pointing at identical bytes. Shipping the pair would have doubled the payload for nothing,
   which the digests showed and the file sizes did not.

   latin and latin-ext only. Those cover French, German, English and Luxembourgish, which are the
   four chrome languages and the languages of the statute this corpus holds. Cyrillic, Greek and
   Vietnamese are weight nobody here would render. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color: #17211b;
  background: #f4f1e8;
  font-family: Inter, system-ui, sans-serif;
}
body {
  margin: 0;
}

main {
  box-sizing: border-box;
  display: grid;
  min-block-size: 100vh;
  align-content: center;
  gap: 1rem;
  max-inline-size: 48rem;
  padding: clamp(2rem, 8vw, 6rem);
}

.eyebrow {
  margin: 0;
  color: #3f5d4a;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
p {
  margin: 0;
}

/* Links were never styled, so they fell back to the user agent blue. That is 8.32:1 on
   this light background but 1.93:1 on the dark one, a plain WCAG 1.4.3 failure that the
   evidence run could not see because the contrast sweep measured the parent li and not
   the anchor inside it. Both schemes now set the colour explicitly, and `a` is in the
   measured set. */
a {
  color: #14556b;
}

a:visited {
  color: #14556b;
}

h1 {
  font-family: Georgia, serif;
  font-size: clamp(3rem, 12vw, 7rem);
  line-height: 0.9;
}

main > p:last-child {
  max-inline-size: 42rem;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #edf2ec;
    background: #111713;
  }

  .eyebrow {
    color: #a5c9b0;
  }

  a,
  a:visited {
    color: #9ccfe0;
  }
}

/* State pages.
   Digests, coordinates and URIs are long unbreakable tokens. Left alone they set the
   page's minimum width and force horizontal scrolling on a narrow viewport, which also
   makes the scroll container itself a keyboard tab stop. Both were caught by the browser
   evidence run at 320px. The evaluation card's own prose names what it was run over by its
   corpus digest ("sha256:" and 64 hex), and its reasons and notes are the platform's: the
   image rehearsal's probes found the target at 668px in a 305px window (the journeys' card
   names no digest there). An act held only as first published prints its address as published and the publisher's
   consolidated versions by IRI, in its block and in the export's paragraph: the journeys found the export at 458px in a
   305px window (the review of #964's CI). Compare names the versions its publisher dates between two dates the same way
   (the review of #964). */
code,
dt,
dd,
.body,
[data-evaluation-card] p,
[data-evaluation-card] li,
[data-as-published] p,
[data-as-published] li,
[data-between-dates] p,
[data-between-dates] li,
[data-export-as-published] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.body {
  white-space: pre-wrap;
  margin: 0;
}

.result div,
.strip-row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.25rem 1rem;
  align-items: baseline;
}

@media (max-width: 34rem) {
  .result div,
  .strip-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

dl {
  margin: 0;
}

dd {
  margin: 0;
  min-inline-size: 0;
}

.refusal-card,
.object,
.envelope-strip {
  min-inline-size: 0;
}

/* WCAG 1.4.10 reflow at 400% zoom, which is a 320 CSS px viewport; a vertical scrollbar
   leaves about 305. The page padding alone was consuming more than the content could
   give back, so it steps down before that point. Caught by the evidence run at
   zoom400, not by reading. */
@media (max-width: 30rem) {
  main {
    padding: 1rem 0.75rem;
    gap: 0.75rem;
  }
}


/* Statutory quotation. UX spec section 1 sets serif at 17px/1.65 with a 72ch measure; the
   measure is a maximum, so the block still reflows to a 320 CSS px viewport. */
blockquote.law {
  margin: 0;
  min-inline-size: 0;
  max-inline-size: 72ch;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  border-inline-start: 3px solid currentColor;
  padding-inline-start: 0.75rem;
}

/* UX spec section 1 sets statutory text at 17px/1.65 on desktop and 16px/1.6 on mobile. Only
   the desktop pair was set, so a phone rendered desktop metrics: the measure still reflowed,
   but the type did not step down, and the spec names two sizes because reading law on a
   handset is a different act from reading it on a desk. */
@media (max-width: 30rem) {
  blockquote.law,
  .reading-text {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* The lines that qualify something rather than assert it: the authenticity note, the
   contract notes the refusal card owes the reader, and the missing-translation state.
   They inherit the body colour rather than being greyed, because a qualification nobody
   can read is a qualification nobody made. */
.law-authenticity,
.localization-unavailable,
.refusal-note {
  min-inline-size: 0;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.refusal-candidates,
.refusal-anchors {
  min-inline-size: 0;
  margin: 0.5rem 0 0;
  padding-inline-start: 1.25rem;
  display: grid;
  gap: 0.35rem;
}

/* Readable separation.
   Contrast and overflow both pass on a page whose label, value and code are painted flush
   against each other, and that is what shipped: the components emitted adjacent spans with
   no whitespace between them and no layout rules, so Chrome rendered "legal timeApplicable
   from 2001-01-01" as one word. The browser evidence run now measures the gap between
   adjacent inline siblings, and these are the rules that give it one. */
.token,
.verify-hash,
.status-strip-flag,
.refusal-head,
.refusal-header {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  min-inline-size: 0;
}

.verify-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  min-inline-size: 0;
}

.token-label,
.verify-hash-kind,
.status-strip-caption {
  font-size: 0.85rem;
  font-weight: 600;
}

.verify-hash-value {
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.verify-hash-short {
  font-weight: 700;
}

.surface-block,
.state-banner,
.refusal-card {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
}

.refusal-card {
  padding: 0.75rem;
  border: 1px solid currentColor;
  border-radius: 2px;
}

/* A service failure (R60): one panel, its line first and in bold, so that nothing in it reads as an answer about the
   law; the screen's own sentence or the refusal card inside it; a retry and the publishers' official sites below. The
   panel is told apart by its words and its dashed edge, never by colour alone. */
.failure-panel {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
  padding: 0.75rem;
  border: 1px dashed currentColor;
  border-radius: 2px;
}

.failure-panel p,
.official-sites p {
  margin: 0;
}

.official-sites ul {
  margin: 0.25rem 0 0;
  padding-inline-start: 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.failure-retry {
  padding: 0.5rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 0.375rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.failure-retry:focus-visible {
  outline: 3px solid #14556b;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .failure-retry:focus-visible {
    outline-color: #9ccfe0;
  }
}

.envelope-strip summary > * + * {
  margin-inline-start: 1rem;
}

.strip-publisher,
.strip-semantics,
.strip-built,
.strip-stamp-valid,
.strip-stamp-invalid {
  display: inline-block;
}

/* Shell density. A shell chooses how densely one component library is laid out; it never
   chooses what is in it. Everything below is spacing and type, and the reflow rule above
   deliberately keeps ownership of `gap` so a density cannot reintroduce horizontal
   overflow at 320 CSS pixels. */
[data-density="comfortable"] main {
  line-height: 1.7;
}

[data-density="compact"] main {
  line-height: 1.4;
  font-size: 0.95rem;
}

[data-density="monospace"] main {
  line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The site around every live screen (Document.jsx): the header with the name, the menu and the
   interface languages, and the footer with what the site is not and which texts are authentic.
   Everything wraps, so the header reflows at 320 CSS pixels without horizontal scrolling. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  border-block-end: 1px solid #d6cfbb;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -10rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  border-radius: 0.375rem;
  background: #1f4d33;
  color: #ffffff;
  font-weight: 600;
}

.skip-link:focus,
.skip-link:visited:focus {
  inset-block-start: 0.5rem;
  color: #ffffff;
}

.site-brand {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  color: inherit;
  text-decoration: none;
}

.site-brand:visited {
  color: inherit;
}

.site-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.site-tagline {
  color: #44554a;
  font-size: 0.9rem;
}

.site-nav ul,
.site-header .locale-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration-thickness: 2px;
}

.site-header .locale-nav {
  font-size: 0.85rem;
}

/* Under the site's header a screen starts at the top and keeps a reading measure, rather than the
   preview's poster layout centred in the viewport. */
.site-header ~ main {
  min-block-size: auto;
  align-content: start;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 5vw, 3rem);
}

.site-header ~ main h1 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.75rem, 5vw, 2.6rem);
  line-height: 1.15;
}

.site-footer {
  display: grid;
  gap: 0.5rem;
  max-inline-size: 48rem;
  margin-inline: auto;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  border-block-start: 1px solid #d6cfbb;
  color: #44554a;
  font-size: 0.85rem;
  line-height: 1.55;
}

.site-footer p {
  margin: 0;
}

/* The legal pages' links in every footer (the plan's item 7.1), on one line that wraps, the current page in bold. */
.site-footer .legal-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .legal-nav a[aria-current="page"] {
  font-weight: 700;
}

/* How current the law is and which commits built and serve it (R87, R23): the footer's last strip, its lines plain text,
   each commit whole in code, broken anywhere on a narrow screen; and under the header, when a publisher's data is past the
   maximum age, a banner that says so in words, set apart by a rule and its weight as well as its colour (WCAG 1.4.1). */
.freshness-strip {
  display: grid;
  gap: 0.35rem;
  padding-block-start: 0.5rem;
  border-block-start: 1px dashed #d6cfbb;
}

.freshness-channels {
  margin: 0;
  padding-inline-start: 1.1rem;
}

.freshness-commits {
  display: grid;
  gap: 0.2rem;
  margin: 0;
}

.freshness-commits .strip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}

.freshness-commits dt {
  font-weight: 600;
}

.freshness-commits dd {
  margin: 0;
}

.freshness-commits .commit {
  overflow-wrap: anywhere;
  word-break: break-all;
}

.staleness-banner {
  max-inline-size: 48rem;
  margin: 0.5rem auto 0;
  padding: 0.4rem clamp(1rem, 4vw, 1.25rem);
  border: 2px solid #8a5a00;
  border-inline-start-width: 0.5rem;
  background: #fff6e0;
  color: #3d2a00;
}

.staleness-banner p {
  margin: 0.35rem 0 0;
}

.staleness-banner summary {
  cursor: pointer;
}

/* The forms of the live screens: each field under its label, full width up to a reading measure, and one
   clear primary button. Check boxes (the export composer's pins) keep their own size. Field borders keep
   3:1 against the ground (WCAG 1.4.11) and focus is always visible. */
.site-header ~ main form {
  display: grid;
  gap: 0.85rem;
  max-inline-size: 40rem;
}

.site-header ~ main form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.site-header ~ main form input:not([type="checkbox"]):not([type="radio"]),
.site-header ~ main form select {
  min-inline-size: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid #7d8274;
  border-radius: 0.375rem;
  background: #fffdf7;
  color: inherit;
  font: inherit;
  font-weight: 400;
}

.site-header ~ main form button[type="submit"] {
  justify-self: start;
  padding: 0.6rem 1.4rem;
  border: 0;
  border-radius: 0.375rem;
  background: #1f4d33;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.site-header ~ main form input:focus-visible,
.site-header ~ main form select:focus-visible,
.site-header ~ main form button:focus-visible {
  outline: 3px solid #14556b;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .site-header ~ main form input:not([type="checkbox"]):not([type="radio"]),
  .site-header ~ main form select {
    border-color: #7f9184;
    background: #18201b;
  }

  .site-header ~ main form button[type="submit"] {
    background: #7fd3a3;
    color: #111713;
  }

  .site-header ~ main form input:focus-visible,
  .site-header ~ main form select:focus-visible,
  .site-header ~ main form button:focus-visible {
    outline-color: #9ccfe0;
  }
}

@media (prefers-color-scheme: dark) {
  .site-header,
  .site-footer {
    border-color: #2f3d33;
  }

  .site-tagline,
  .site-footer {
    color: #b8c6bc;
  }

  .freshness-strip {
    border-color: #2f3d33;
  }

  .staleness-banner {
    border-color: #e0b04a;
    background: #2b2310;
    color: #f4e6c4;
  }
}

/* Beside a search's date field, today in Luxembourg (R13); under a search or a reading form, the sentence that says what
   Lex is not (R50), set apart by a rule as well as by its place; the home page's coverage line (R11), what Lex is and is
   not, and its links (R47). */
.site-header ~ main .field-hint {
  margin: -0.45rem 0 0;
  color: #44554a;
  font-size: 0.85rem;
  line-height: 1.4;
}

.not-advice {
  max-inline-size: 40rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 3px solid #3f5d4a;
  font-size: 0.95rem;
  line-height: 1.5;
}

.search-scope {
  max-inline-size: 40rem;
  color: #44554a;
  font-size: 0.9rem;
  line-height: 1.5;
}

.coverage-line {
  max-inline-size: 40rem;
  color: #44554a;
  font-size: 0.95rem;
  line-height: 1.5;
}

.home-about {
  display: grid;
  gap: 0.4rem;
  max-inline-size: 42rem;
}

.home-about h2 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.25rem;
}

.home-about p {
  line-height: 1.55;
}

.home-examples {
  display: grid;
  gap: 0.4rem;
  max-inline-size: 42rem;
}

.home-examples h2 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.25rem;
}

.home-examples ul {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.home-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The home page's form: the box across the row, then its date and its language side by side, then today and the
   button, so the box and the sentence under the form are in view on a small phone (R47). */
.site-header ~ main .search-home form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}

.site-header ~ main .search-home form > label:first-child,
.site-header ~ main .search-home form > .field-hint,
.site-header ~ main .search-home form > button[type="submit"] {
  grid-column: 1 / -1;
}

@media (prefers-color-scheme: dark) {
  .site-header ~ main .field-hint,
  .search-scope,
  .coverage-line {
    color: #b8c6bc;
  }

  .not-advice {
    border-color: #a5c9b0;
  }
}

/* On a phone the site's header and the home page's heading step down, so the box comes first and the sentence under
   the form stays in view without scrolling (R47; measured at 320 by 640 CSS pixels by the journeys' home step). */
@media (max-width: 30rem) {
  .site-header {
    gap: 0.35rem 1rem;
    padding: 0.55rem 0.75rem;
  }

  .site-name {
    font-size: 1.25rem;
  }

  .site-tagline {
    font-size: 0.8rem;
  }

  .site-nav ul {
    gap: 0 0.5rem;
  }

  .site-header .locale-nav ul {
    gap: 0 0.5rem;
  }

  .site-nav {
    font-size: 0.8rem;
  }

  .site-header .locale-nav {
    font-size: 0.8rem;
  }

  /* The menu's and the languages' links keep their 44 pixel targets (R62), so the rest of the first screen gives way: the
     tagline (the home page's heading says the same) steps out, the gaps close, the menu's words step down so its links take
     two rows rather than three, and the main column keeps the header's gutter, so the sentence under the box ends within 640 pixels (the journeys' home step, the combine of
     #1003 and #1004, found it at 720 px once the targets grew to 44). */
  .site-header {
    row-gap: 0.1rem;
    padding-block: 0.35rem;
  }

  .site-tagline {
    display: none;
  }

  .site-header ~ main {
    padding-block: 0.5rem 1.5rem;
    padding-inline: 0.75rem;
    gap: 0.5rem;
  }

  [data-preview-state="live-home"] main > .eyebrow {
    display: none;
  }

  [data-preview-state="live-home"] main > h1 {
    font-size: 1.3rem;
    line-height: 1.1;
  }

  .site-header ~ main .search-home form {
    gap: 0.45rem 0.75rem;
  }

  .site-header ~ main form label {
    gap: 0.15rem;
  }

  .not-advice {
    line-height: 1.4;
  }

  .site-header ~ main .search-home form > .field-hint {
    margin-block-start: -0.3rem;
  }
}

.shell-switcher {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
}

.shell-switcher li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
  min-inline-size: 0;
}

.shell-audience,
.shell-neutrality {
  font-size: 0.9rem;
  line-height: 1.5;
  min-inline-size: 0;
}

/* The refusal catalog. Nineteen entries on one page, so each needs a visible boundary and
   the facts table needs the same reflow behaviour as every other definition list here. */
.catalog-entry {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
  padding-block: 1rem;
  border-block-start: 1px solid currentColor;
}

.catalog-facts,
.catalog-honesty {
  min-inline-size: 0;
}

.catalog-honesty {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* The typed no-hit card. Three blocks that must each be readable on their own, because a
   reader deciding whether the law exists reads exactly one of them and stops. */
.no-hit-card,
.no-hit-layers,
.no-hit-population,
.no-hit-expansions,
.no-hit-routes {
  display: grid;
  gap: 0.35rem;
  min-inline-size: 0;
}

.no-hit-card {
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.no-hit-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  min-inline-size: 0;
}

.no-hit-card li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
  min-inline-size: 0;
}

.no-hit-card h3 {
  margin: 0;
  font-size: 0.95rem;
}

.no-hit-caution,
.no-hit-inert {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* The notice a permalink's reading shows when the version served is not the one the link pins: set apart above the
   reading, in words and by its rule (never by colour alone), so a reader brought to it cannot take what follows for the
   pinned version. */
[data-pin-replaced] {
  margin-block: 0 var(--space-4, 1rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-inline-start: 4px solid currentColor;
  font-weight: 600;
}

/* Relaxation disclosures. Three independent blocks, visually distinct, each with its own
   revert. Merged into one they would read as a single setting, and the cheapest way to undo
   one relaxation would be to undo all three. */
.relaxations {
  display: grid;
  gap: 0.75rem;
  min-inline-size: 0;
}

.relaxation {
  display: grid;
  gap: 0.35rem;
  min-inline-size: 0;
  padding: 0.5rem 0.75rem;
  border-inline-start: 3px solid currentColor;
}

.relaxation-heading {
  margin: 0;
  font-weight: 600;
}

.relaxation-note,
.relaxation-revert {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.relaxation-expansions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

/* Touch targets of at least 44 by 44 CSS pixels (the specification of record's R62, above WCAG 2.2 SC 2.5.8's 24, which the
   browser run measures). A link in a sentence takes the inline exception; a link in a list is a target somebody has to hit,
   and every one of them was 21 px tall because line-height was setting their height. Lighthouse found three of these. The
   content is centred in the taller box where the browser supports align-content on a block, and stays at the top elsewhere. */
li > a,
summary,
.verify-cluster a {
  display: inline-block;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-block: 0.15rem;
  align-content: center;
}

/* Controls.
 *
 * WCAG 2.2 target size (minimum), 2.5.8, is AA and asks for 24 by 24 CSS pixels, and R62 asks for 44. Nothing in this
 * package had ever put a control on a built page, so there was no control sizing at all and every
 * button, chip and input rendered 21 pixels tall on the first screen that did. The browser gate
 * measures this, which is how it was found rather than shipped.
 *
 * The floor is set on the elements rather than on a class, because a control added later should
 * be large enough by default and not by remembering. Padding sets the comfortable size; the two
 * min-* properties are the floor that cannot be styled away by a shorter line height. The select and the checkbox are
 * controls too (the review of #1004, F5: a select in a form was about 40 pixels tall). */
button,
.filter-chip,
select,
input[type='checkbox'],
input[type='text'],
input[type='search'],
input[type='date'] {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font: inherit;
  line-height: 1.2;
}

/* A disabled control still has to be reachable and readable.
 *
 * `disabled` removes a control from the tab order entirely, so a keyboard reader never learns the
 * control exists or why it refuses. On the compare control that is the whole point of it: it
 * refuses early precisely so the reader is told why while both rows are still on screen. The
 * components use aria-disabled with a real tab stop instead, and this is the styling that keeps
 * that legible rather than looking like a control that is simply broken. */
[aria-disabled='true'] {
  opacity: 0.62;
  cursor: not-allowed;
}

summary {
  display: list-item;
}

/* Spacing as well as size: adjacent targets in a list need room between them, or a 24 px
   pointer aimed at one lands on its neighbour. */
.refusal-handoff,
.refusal-candidates,
.refusal-anchors,
.shell-switcher,
.no-hit-card ul,
.superseded-siblings {
  gap: 0.5rem;
}

/* An unofficial rendering. Structurally distinct from a quotation, because the difference
   between the authentic text and a convenience is the difference this product exists for.
   It is a closed disclosure (S5-A10), so the grid sits on the body inside it: a `details`
   element is not reliably a grid container, and its closed state must stay the browser's. */
.unofficial-rendering {
  min-inline-size: 0;
  padding: 0.75rem;
  border: 1px dashed currentColor;
}

.unofficial-body {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
  margin-block-start: 0.5rem;
}

.unofficial-head,
.unofficial-note,
.unofficial-official {
  margin: 0;
  min-inline-size: 0;
}

.unofficial-note {
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Claims above the audit fold, the trace inside it. A reader who wants the answer gets the
   answer; a reader who wants to check it gets everything needed to re-run it. */
.answer-dossier,
.claims,
.claim,
.trace,
.trace-operation {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
}

.claims,
.trace,
.claim-chips {
  list-style: none;
  margin: 0;
  padding: 0;
}

.claim-line,
.claim-exclusion,
.trace-call,
.trace-result {
  margin: 0;
  min-inline-size: 0;
}

.claim-exclusion {
  font-size: 0.9rem;
  line-height: 1.5;
}

.claim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-inline-size: 0;
}

.claim-chip > a {
  border: 1px solid currentColor;
  border-radius: 2px;
  padding-inline: 0.4rem;
  font-size: 0.85rem;
}

.trace-operation {
  padding-block: 0.5rem;
  border-block-start: 1px solid currentColor;
}

/* The three qualifications on a dated object. Each is a sentence a reader has to be able to
   read at a glance, so they get their own line rather than being folded into a row. */
.validity-conflict,
.provisional-watermark,
.hole {
  margin: 0;
  min-inline-size: 0;
  line-height: 1.5;
}

.hole {
  border-inline-start: 3px dashed currentColor;
  padding-inline-start: 0.75rem;
}

/* The evidence bundle. It leaves and is read by people who were not here, so every item has
   to stand on its own and the register has to survive a narrow screen. */
.evidence-bundle,
.bundle-item,
.bundle-verification {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
}

.bundle-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
}

.bundle-item {
  padding: 0.75rem;
  border: 1px solid currentColor;
  border-radius: 2px;
}

.bundle-watermark {
  margin: 0;
  font-weight: 600;
}

.bundle-citation,
.bundle-withheld,
.bundle-attribution,
.bundle-official,
.bundle-recipe,
.bundle-key,
.bundle-fetch {
  margin: 0;
  min-inline-size: 0;
}

.bundle-text {
  margin: 0;
  min-inline-size: 0;
  max-inline-size: 72ch;
  border-inline-start: 3px solid currentColor;
  padding-inline-start: 0.75rem;
}

/* A register is wide by nature. It scrolls inside its own box rather than making the page
   scroll, which is the reflow rule for tabular content. */
.bundle-register-scroll {
  overflow-x: auto;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.bundle-register {
  border-collapse: collapse;
}

.bundle-register th,
.bundle-register td {
  text-align: start;
  padding: 0.25rem 0.5rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}

/* A prefix the screen reader needs and the eye does not. The diff shows removal and addition
   with strikethrough and underline, which a sighted reader takes at a glance; a linear reading
   needs the words. Clipped rather than display:none, because display:none is removed from the
   accessibility tree along with everything it was meant to say. */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.compare-case {
  margin-block: var(--space-6, 2rem);
}

.compare-side {
  border: 1px solid var(--border, #8a8a8a);
  border-radius: 4px;
  padding: var(--space-3, 0.75rem);
  margin-block: var(--space-2, 0.5rem);
}

.compare-record-time,
.compare-renumber-basis {
  font-size: 0.875em;
}

.compare-blocks {
  margin: 0;
  padding-inline-start: var(--space-4, 1rem);
}

.compare-block {
  margin-block: var(--space-3, 0.75rem);
}

.compare-removed del {
  text-decoration: line-through;
}

.compare-added ins {
  text-decoration: underline;
}

/* A changed article's wording on the live compare page (R57): one column, the words deleted struck through and the words
   inserted underlined, each also said in hidden words, so no change is shown by colour alone; the text's own paragraph
   breaks are kept. */
.wording-diff {
  white-space: pre-wrap;
}

.wording-diff del {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.wording-diff ins {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.change-nav {
  font-size: 0.875em;
}

.compare-note {
  font-weight: 600;
}

.compare-axis,
.compare-profile-unknown,
.compare-no-panes,
.compare-note-basis {
  border-inline-start: 3px solid var(--border, #8a8a8a);
  padding-inline-start: var(--space-3, 0.75rem);
}

.timeline-case {
  margin-block: var(--space-6, 2rem);
}

.timeline-table {
  border-collapse: collapse;
  inline-size: 100%;
}

.timeline-table th,
.timeline-table td {
  border: 1px solid var(--border, #8a8a8a);
  padding: var(--space-2, 0.5rem);
  vertical-align: top;
  text-align: start;
}

.timeline-record-time,
.timeline-derived,
.timeline-title-distrust,
.timeline-population {
  font-size: 0.875em;
}

.timeline-provisional,
.timeline-withdrawn {
  font-weight: 600;
}

.timeline-row[data-withdrawn="true"] .timeline-interval {
  text-decoration: line-through;
}

.timeline-hole td {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    var(--border, #8a8a8a) 6px,
    var(--border, #8a8a8a) 7px
  );
}

.timeline-legend,
.timeline-single,
.timeline-pager,
.timeline-as-of {
  border-inline-start: 3px solid var(--border, #8a8a8a);
  padding-inline-start: var(--space-3, 0.75rem);
}

.timeline-scroll {
  overflow-x: auto;
  max-inline-size: 100%;
  min-inline-size: 0;
}

/* An identifier is one long unbreakable token, and outside the scrolling table it pushed the
   page sideways at 320 CSS pixels. It wraps rather than scrolls here because it sits in prose:
   a sentence that scrolls away is worse than one that runs onto a second line. */
.timeline-overlaps code,
.timeline-hole code,
.compare-side-id code {
  overflow-wrap: anywhere;
}

/* A grid item will not shrink below its own min-content unless told to, so a wide table
   inside one pushes the page sideways however carefully the table itself scrolls. */
.timeline-case,
.compare-case,
.timeline,
.compare {
  min-inline-size: 0;
}

.coverage-case,
.coverage {
  min-inline-size: 0;
  margin-block: var(--space-6, 2rem);
}

/* The page is a run of blocks, each a heading over its own rows or table. The gap is what keeps
   one block's counts from reading as part of the next block's. */
.coverage-block {
  display: grid;
  /* One column that never grows past the page: an auto column took the widest unbreakable word of any block as its floor. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
  min-inline-size: 0;
}

/* The platform's sentences on Coverage name its tokens in plain text (the declared scope's rule names every disposition, such
   as admitted_where_regulatory_awaiting_a_run), and one such word set the page's minimum width: the journeys' coverage step
   found main at 331 px in a 305 px window (the combine of #1003 and #1004). Each sentence wraps anywhere; a table still
   scrolls inside its own region. */
.coverage-scope,
.coverage-note,
.coverage-held {
  overflow-wrap: anywhere;
}

/* The export composer's JSON, shown as it will be saved: wrapped within the page, so opening it never widens the page
   (WCAG 2.2, 1.4.10; review of #957: its longest line made the page 9,518 pixels wide at 320). */
[data-export-state] pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.coverage-scroll,
.table-scroll {
  overflow-x: auto;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.coverage-table {
  border-collapse: collapse;
  inline-size: 100%;
}

.coverage-table caption {
  text-align: start;
  padding-block-end: var(--space-2, 0.5rem);
  font-size: 0.875em;
}

.coverage-table th,
.coverage-table td {
  border: 1px solid var(--border, #8a8a8a);
  padding: var(--space-2, 0.5rem);
  text-align: start;
}

/* Set off from the counts, because each of these is a sentence about how to read them. The four
   selectors that used to be here -- `.coverage-as-of`, `.coverage-retention`, `.coverage-truncated`
   and `.coverage-build` -- were for a build instant, a retention claim and a truncated facet table,
   and the V3 answer holds none of those. */
.coverage-scope,
.coverage-note,
.coverage-held,
.coverage-case-note {
  border-inline-start: 3px solid var(--border, #8a8a8a);
  padding-inline-start: var(--space-3, 0.75rem);
  font-size: 0.9375em;
}

.results-case,
.results {
  min-inline-size: 0;
  margin-block: var(--space-6, 2rem);
}

.hits {
  margin: 0;
  padding-inline-start: var(--space-4, 1rem);
}

.hit {
  border-inline-start: 3px solid var(--border, #8a8a8a);
  padding-inline-start: var(--space-3, 0.75rem);
  margin-block: var(--space-4, 1rem);
}

.hit-record-time,
.hit-text,
.hit-badges {
  font-size: 0.875em;
}

.hit-badges {
  list-style: none;
  margin: 0;
  padding: 0;
}

.governing {
  border: 1px solid var(--border, #8a8a8a);
  border-radius: 4px;
  padding: var(--space-3, 0.75rem);
}

.results-scope,
.results-pager,
.results-query {
  border-inline-start: 3px solid var(--border, #8a8a8a);
  padding-inline-start: var(--space-3, 0.75rem);
}

.hit-link a,
.results-population a {
  overflow-wrap: anywhere;
}

/* A long word in a heading is not an edge case once more than one language is measured.
   "Luxembourgish" overflowed a 320 CSS pixel viewport the first time this page was built,
   which is the defect an English-only measurement cannot find. */
h1,
h2,
h3,
.locale-code {
  /* `anywhere` rather than `break-word`: only the first reduces the min-content width a grid
     item is sized by, and `main` is a grid whose items default to min-width auto. With
     `break-word` the heading still wrapped and the page still overflowed, which is a fix that
     looks right and measures wrong. */
  overflow-wrap: anywhere;
}

main > * {
  min-inline-size: 0;
}

.dossier-case,
.dossier {
  min-inline-size: 0;
  margin-block: var(--space-6, 2rem);
}

.dossier-scroll {
  overflow-x: auto;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.dossier-dates {
  border-collapse: collapse;
  inline-size: 100%;
}

.dossier-dates th,
.dossier-dates td {
  border: 1px solid var(--border, #8a8a8a);
  padding: var(--space-2, 0.5rem);
  text-align: start;
}

.dossier-status,
.dossier-coverage {
  border-inline-start: 3px solid var(--border, #8a8a8a);
  padding-inline-start: var(--space-3, 0.75rem);
  margin-block: var(--space-4, 1rem);
}

.dossier-status-caption,
.dossier-case-note,
.dossier-holes,
.dossier-slots {
  font-size: 0.9375em;
}

.dossier-identifier code {
  overflow-wrap: anywhere;
}

/* Reading. The text column is the page, so everything else on it is a line about the text
   rather than a box around it. The provision card is separated by rule and space rather than
   by a border, because a page of statute with a frame around every article reads as a form. */
.reading-case,
.reading {
  min-inline-size: 0;
  margin-block: var(--space-6, 2rem);
}

.reading-provision {
  min-inline-size: 0;
  margin-block: var(--space-5, 1.5rem);
  padding-block-start: var(--space-4, 1rem);
  border-block-start: 1px solid var(--border, #8a8a8a);
}

/* The number is the publisher's own citation handle, so it is set in the same face as the
   text it names rather than in the chrome face. */
.reading-num {
  margin: 0 0 var(--space-2, 0.5rem);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.0625rem;
}

/* The lines that qualify the text: the dating badge, the authenticity footing, the operative
   date. They inherit the body colour, because a qualification nobody can read is a
   qualification nobody made, and they keep the text measure so they read as part of it. */
.reading-as-of,
.reading-unchanged,
.reading-no-legal-effect,
.reading-case-note {
  min-inline-size: 0;
  max-inline-size: 72ch;
  margin: var(--space-2, 0.5rem) 0 0;
  font-size: 0.9375em;
  line-height: 1.5;
}

/* The permalink is evidence, so the whole URL is on the page as selectable text rather than
   hidden behind the word. A 64 character digest is one unbreakable token and sets the page's
   minimum width if it is left alone. */
.reading-permalink {
  min-inline-size: 0;
  margin: var(--space-3, 0.75rem) 0 0;
  font-size: 0.9375em;
}

.reading-permalink code {
  overflow-wrap: anywhere;
}

/* Provenance. The stamp public key is PEM, so its line structure is part of the value and is
   kept rather than collapsed; the `code` rule at the top of this file already breaks the
   base64 runs, so a 320 CSS pixel viewport still does not scroll sideways. Truncating either
   value would leave a reader something they cannot verify with, which is the same defect the
   verify cluster's eight character hash chip had. */
.provenance-pem {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The proof chain is a list of records, each a block of labelled rows. The gap is what keeps
   one observation from reading as part of the next one. */
.provenance,
.provenance-block,
.provenance-events,
.provenance-observations {
  display: grid;
  gap: var(--space-3, 0.75rem);
  min-inline-size: 0;
}

.provenance-events,
.provenance-observations {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.provenance-event,
.provenance-observation {
  min-inline-size: 0;
}

.provenance-note,
.provenance-count,
.provenance-holdings {
  min-inline-size: 0;
  max-inline-size: 72ch;
  margin: 0;
  font-size: 0.9375em;
  line-height: 1.5;
}

/* Provision history rows.
 *
 * The browser run caught these painted flush at 400 percent zoom: the interval, the digest and the
 * conflict sentence ran together, so "Applicable from 2023-07-01 to 2024-06-30" and an eight
 * character hash read as one string. Three separate claims need three separate shapes, and a gap
 * is the cheapest one that survives reflow. */
.provision-state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  padding-block: var(--space-2, 0.5rem);
}

.provision-conflict {
  flex-basis: 100%;
  max-inline-size: 72ch;
}

/* Citation checker cards.
 *
 * The official link failed WCAG 2.2 target size at 19 CSS px tall. Worth stating where: it is the
 * link on the out-of-corpus card, which is the one control a reader reaches for after being told
 * this corpus does not hold their citation. A destination too small to hit is a second refusal.
 * Padded to clear 24 px, and the card rows are spaced for the same flush-paint reason as the
 * timeline and composer rows. */
.check-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding-block: var(--space-2, 0.5rem);
}

.check-official {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-block: var(--space-1, 0.25rem);
  padding-inline: var(--space-2, 0.5rem);
  margin-inline-start: calc(-1 * var(--space-2, 0.5rem));
}

.check-candidates {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding-inline-start: var(--space-4, 1rem);
}

.check-candidate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}

/* The extraction profile cell.
 *
 * Two claims in one cell: which profile produced the text, and what that profile means. Added
 * proactively rather than after the browser run, because this is the fourth cell today whose
 * adjacent children would have painted flush, and the failure is always the same: an identifier
 * and a sentence read as one string. The identifier stays monospace and the sentence wraps under
 * it, so the two are never mistaken for one value. */
.timeline-profile-id {
  display: block;
}

.timeline-profile-note {
  display: block;
  margin-block-start: var(--space-1, 0.25rem);
  max-inline-size: 46ch;
}

/* An undescribed profile is a gap in this page, so it is marked as one rather than styled to look
 * like an answer. No colour alone: the sentence itself says what it is. */
.timeline-profile-undescribed {
  font-style: italic;
}

/* Export composer rows.
 *
 * The same flush-paint defect the provision rows had, found the same way and fixed the same way.
 * A cart row carries six separate claims: identity, interval, digest, licence, what the item will
 * contribute, and its official link. Painted flush, an identifier and a date range read as one
 * string, and a licence name sitting against a rights sentence reads as if the licence were the
 * reason. The rights sentence takes its own line because it is prose beside labels, and because
 * the whole point of this screen is that the reason is stated rather than inferred from what it
 * happens to sit next to. */
.compose-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  padding-block: var(--space-2, 0.5rem);
}

.compose-disposition {
  flex-basis: 100%;
  max-inline-size: 72ch;
}

.compose-items,
.compose-columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding-inline-start: var(--space-4, 1rem);
}

.compose-matter {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}

.provision-states,
.get-help-counters,
.get-help-official {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding-inline-start: var(--space-4, 1rem);
}

/* Search results by act (the plan's item 4.3): each act's passages below its title, each version's below its date, and
   each passage's extract set as statutory text. A matched word is marked in weight as well as in its highlight, so the
   mark never rests on colour alone (the launch contract's accessibility line); an elision says the text goes on. */
.acts,
.passages {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.acts > li {
  margin-block: var(--space-6, 2rem);
}

.act-title {
  font-size: 1.125rem;
  margin-block: 0 var(--space-2, 0.5rem);
}

.act-facts,
.version-line {
  font-size: 0.9375em;
  margin-block: var(--space-2, 0.5rem);
}

.passages > li {
  border-inline-start: 3px solid var(--border, #8a8a8a);
  padding-inline-start: var(--space-3, 0.75rem);
  margin-block: var(--space-3, 0.75rem);
}

.extract {
  margin-block: var(--space-2, 0.5rem) 0;
  max-inline-size: 72ch;
  font-family: "Source Serif 4", Georgia, serif;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.extract mark {
  font-weight: 700;
  padding-inline: 0.05em;
}

.no-hit-card {
  border-inline-start: 3px solid var(--border, #8a8a8a);
  padding-inline-start: var(--space-3, 0.75rem);
  margin-block: var(--space-6, 2rem);
}

/* The three reference pages (Get help, How to read Lex, Developers): each part under its heading, a long page's contents
   as one line that wraps, the glossary's terms in bold, each operation of the Developers page set apart by a rule, its
   facts in the strip rows the state pages use, and code whole: a block wraps rather than scrolls, so it is never a
   scroll container and never a tab stop of its own, and a schema's digest breaks anywhere on a narrow screen. */
.reference-section {
  display: grid;
  gap: 0.75rem;
}

.reference-section h2 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.25rem;
}

.reference-section h3 {
  margin: 0;
  font-size: 1.05rem;
}

.reference-section p,
.reference-section li,
.reference-section dd {
  line-height: 1.55;
}

.reference-section ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-inline-start: 1.25rem;
}

.reference-contents ul,
.site-footer .reference-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .reference-nav a[aria-current="page"] {
  font-weight: 700;
}

.glossary {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.glossary dt {
  font-weight: 700;
}

.glossary dt::first-letter {
  text-transform: uppercase;
}

.glossary dd {
  margin: 0.15rem 0 0;
}

.api-operation {
  display: grid;
  gap: 0.5rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid #d6cfbb;
}

.api-facts,
.api-members {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.api-facts dd,
.api-members dd {
  margin: 0;
}

.reference-section ul.api-parameters {
  padding-inline-start: 1rem;
}

.reference-code {
  margin: 0;
  padding: 0.75rem;
  border-inline-start: 3px solid currentColor;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.9rem;
}

.reference-quote {
  margin: 0;
  padding-inline-start: 0.75rem;
  border-inline-start: 3px solid currentColor;
}

.reference-section code,
.reference-code code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The breadcrumbs of a law's pages (R48; Breadcrumbs.jsx): one line that wraps, the marks between the crumbs drawn here
   and silent to a screen reader (an empty alternative text), and the page's own crumb in bold. */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.breadcrumbs li + li::before {
  content: "\203A";
  content: "\203A" / "";
  margin-inline-end: 0.4rem;
}

.breadcrumbs li[aria-current="page"] {
  font-weight: 700;
}

.breadcrumbs code {
  overflow-wrap: anywhere;
}

/* A banner's info control (R48; GuideLink.jsx): a small link to How to read Lex, marked by the information sign, which a
   screen reader does not read (the link's name says where it leads). Alone on its line, it keeps the 44 pixel target (R62). */
.info-control {
  display: inline-block;
  min-block-size: 44px;
  min-inline-size: 44px;
  align-content: center;
  padding-block: 0.15rem;
  font-size: 0.85rem;
}

.info-control::before {
  content: "\24D8\00a0";
  content: "\24D8\00a0" / "";
}

/* The print view of Reading (R62's fifth item, "a clean print view of Reading", pack 33 section 7 rule 9; UX spec section 3:
   "print stylesheet strips chrome, keeps banner, hashes and citation strings"). On paper the site's chrome goes: the skip
   link, the menu and the languages, every form and button, the pager and the contents, the info controls, the home page's
   links and the footer's menus. What stays: the site's name, the breadcrumbs (where the text stands), the banners (the
   staleness banner, the as-published label, the EU statements), each version's heading with its date said by its role,
   the text, every digest, source and permalink, the citation forms, and the footer's lines (what Lex is not, which texts
   are authentic, where the texts come from) with how current the answer is. Black on white in either colour scheme, the
   page's full width, no poster layout, long digests and addresses wrapped inside the page. */
/* The copy button under a citation form (R65; PinnedReading.jsx): only a browser running the page's script shows it, on its
   own line, with the status that says the copy is done. */
.copy-citation-row {
  margin-inline-start: 0;
}

.copy-citation-status {
  font-size: 0.9rem;
}

@media print {
  :root,
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  a,
  a:visited {
    color: #000000 !important;
  }

  .skip-link,
  .site-nav,
  .site-header .locale-nav,
  .site-tagline,
  main form,
  button,
  .failure-retry,
  [data-pager],
  details[data-contents],
  .info-control,
  .copy-citation-row,
  [data-guide-note],
  .home-links,
  .site-footer .reference-nav,
  .site-footer .legal-nav {
    display: none !important;
  }

  .site-header,
  .site-footer,
  .freshness-strip,
  .staleness-banner {
    border-color: #000000 !important;
    background: none !important;
    color: #000000 !important;
  }

  main,
  .site-header ~ main {
    display: block;
    min-block-size: auto;
    max-inline-size: none;
    margin: 0;
    padding: 0;
  }

  main > * + * {
    margin-block-start: 0.75rem;
  }

  .site-header ~ main h1 {
    font-size: 1.5rem;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  [data-quote-evidence],
  [data-citation-form],
  .breadcrumbs {
    break-inside: avoid;
  }

  code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
}

/* Semantic tokens, generated from scripts/design-tokens.mjs. */
:root {
  --time-legal: #1f4d33;
  --time-record: #4a4230;
  --provisional: #6b4512;
  --conflict: #8a2f1a;
  --derived: #3b4176;
  --unofficial: #5b3a6b;
  --refusal: #1f4a5c;
  --hole: #4c4740;
}

@media (prefers-color-scheme: dark) {
  :root {
    --time-legal: #7fd3a3;
    --time-record: #cbbf9a;
    --provisional: #e3b567;
    --conflict: #f0a08c;
    --derived: #a8b0ee;
    --unofficial: #d0a8e0;
    --refusal: #8fd0e6;
    --hole: #bdb6ac;
  }
}

.token--time-legal { color: var(--time-legal); }
.token--time-record { color: var(--time-record); }
.token--provisional { color: var(--provisional); }
.token--conflict { color: var(--conflict); }
.token--derived { color: var(--derived); }
.token--unofficial { color: var(--unofficial); }
.token--refusal { color: var(--refusal); }
.token--hole { color: var(--hole); }