/* Deliberately plain: system fonts, high contrast, no web fonts or tracking.
   Colours are checked against WCAG AA at the sizes they are used. */

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --bg-muted: #f4f5f7;
  --bg-notice: #fdf6e3;
  --ink: #17191c;
  --ink-muted: #55595f;
  --line: #d3d6da;
  --link: #0b4f8a;
  --link-visited: #5b3a8e;
  --accent: #00695c;
  --tag-new-bg: #e2f2ec;
  --tag-new-ink: #10503f;
  --tag-amended-bg: #fdf0d8;
  --tag-amended-ink: #6b4708;
  --mark-bg: #ffe58a;
  --mark-ink: #17191c;
  --ins-bg: #dff0e4;
  --ins-ink: #10401f;
  --del-bg: #fbe3e3;
  --del-ink: #6d1d1d;
  --focus: #ffbf47;
  --max: 76rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --bg-muted: #1e2126;
    --bg-notice: #2a2418;
    --ink: #eceef1;
    --ink-muted: #a9aeb6;
    --line: #3a3f47;
    --link: #7db8ec;
    --link-visited: #c1a6ee;
    --accent: #63c8b5;
    --tag-new-bg: #163b32;
    --tag-new-ink: #97e0cb;
    --tag-amended-bg: #3d3116;
    --tag-amended-ink: #f0cd8a;
    --mark-bg: #6b5410;
    --mark-ink: #fff6d6;
    --ins-bg: #17351f;
    --ins-ink: #a6e3b8;
    --del-bg: #3a1c1c;
    --del-ink: #f0aaaa;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  background: var(--focus);
  color: #000;
  text-decoration: none;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--focus); color: #000; padding: 0.75rem 1rem; z-index: 10;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Header ------------------------------------------------------------------ */

.site-header { border-bottom: 4px solid var(--accent); background: var(--bg-muted); }
.site-header .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: baseline; padding-top: 1rem; padding-bottom: 1rem; }
.site-title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.site-title a { color: var(--ink); text-decoration: none; }
.site-title a:hover { text-decoration: underline; }
.site-header nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-header nav a[aria-current] { color: var(--ink); font-weight: 700; text-decoration-thickness: 3px; }
.site-search { display: flex; gap: 0.375rem; flex: 1 1 13rem; max-width: 22rem; margin-left: auto; }
.site-search input, .home-search input { font: inherit; padding: 0.375rem 0.5rem; border: 2px solid var(--ink); border-radius: 3px; background: var(--bg); color: var(--ink); min-width: 0; }
.site-search input { flex: 1 1 auto; width: 100%; }
.site-search button { flex: none; }
.site-search button, .home-search button { font: inherit; padding: 0.375rem 0.875rem; border: 2px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 3px; cursor: pointer; }
.home-search { margin: 1.5rem 0 2rem; max-width: 40rem; }
.home-search label { display: block; font-weight: 700; margin-bottom: 0.375rem; }
.home-search-row { display: flex; gap: 0.5rem; }
.home-search-row input { flex: 1; font-size: 1.125rem; padding: 0.5rem 0.75rem; }
.name-matches { margin: 0 0 1rem; padding: 0.5rem 1rem; border-left: 4px solid var(--accent); background: var(--bg-muted); }
.name-matches p { margin: 0.25rem 0; }

.notice-bar { background: var(--bg-notice); border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.notice-bar p { margin: 0; padding: 0.75rem 0; }
.notice { background: var(--bg-notice); border: 1px solid var(--line); border-radius: 4px; padding: 0.75rem 1rem; margin: 1rem 0; }

/* Layout ------------------------------------------------------------------ */

main { padding: 2rem 1.25rem 4rem; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.2; margin: 0 0 1rem; }
h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.1875rem; margin: 1.75rem 0 0.5rem; }
h4 { font-size: 1.0625rem; margin: 1.25rem 0 0.25rem; }
p, li { max-width: 68ch; }
.lede { font-size: 1.1875rem; color: var(--ink-muted); max-width: 60ch; }
.empty, .hint { color: var(--ink-muted); font-size: 0.9375rem; }
.stat-note { color: var(--ink-muted); font-size: 0.9375rem; max-width: 70ch; }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.9375rem; }
.breadcrumb li + li::before { content: "›"; margin-right: 0.5rem; color: var(--ink-muted); }

.related { margin: 1rem 0 1.5rem; }
.related h2 { font-size: 1.125rem; margin: 0 0 0.25rem; }
.contents { border-left: 4px solid var(--line); padding: 0.25rem 0 0.25rem 1rem; margin: 1.5rem 0; }
.contents-title { font-size: 1rem; margin: 0 0 0.25rem; }
.contents ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.edition-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; list-style: none; margin: 0 0 1rem; padding: 0; }

/* Stats and cards --------------------------------------------------------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.stat { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 4px; padding: 1rem; }
.stat-number { display: block; font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--ink-muted); font-size: 0.9375rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; margin: 2rem 0; }
.card { border: 1px solid var(--line); border-radius: 4px; padding: 1.25rem; }
.card h2 { margin: 0 0 0.5rem; font-size: 1.1875rem; }
.card p { margin: 0; font-size: 0.9375rem; color: var(--ink-muted); }

/* Definition lists -------------------------------------------------------- */

/* 1px gaps over a page-coloured background, with each cell drawing its own
   hairline, so a part-filled last row doesn't leave a block of grid colour. */
.key-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1px; background: var(--bg); margin: 1.5rem 0; }
.key-facts.wide { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }
.key-facts > div { background: var(--bg); padding: 0.75rem 1rem; box-shadow: 0 0 0 1px var(--line); }
.key-facts dt { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.key-facts dd { margin: 0.25rem 0 0; font-weight: 600; }
.key-facts.compact { margin: 0.75rem 0; }
.value-list { margin: 0; padding-left: 1.125rem; font-weight: 400; }
.value-list li { padding: 0.125rem 0; }

/* Tables ------------------------------------------------------------------ */

.table-scroll { overflow-x: auto; margin: 1rem 0 2rem; border: 1px solid var(--line); border-radius: 4px; }
.data-table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.data-table caption { text-align: left; padding: 0.75rem 1rem; color: var(--ink-muted); }
.data-table th, .data-table td { text-align: left; padding: 0.625rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table thead th { position: sticky; top: 0; background: var(--bg-muted); border-bottom: 2px solid var(--line); font-size: 0.875rem; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--bg-muted); }
.data-table thead th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; cursor: pointer; }
.data-table thead th button:hover { text-decoration: underline; }
.data-table thead th button::after { content: "\00a0\2195"; color: var(--ink-muted); }
.data-table thead th[aria-sort="ascending"] button::after { content: "\00a0\25b2"; color: var(--ink); }
.data-table thead th[aria-sort="descending"] button::after { content: "\00a0\25bc"; color: var(--ink); }
.data-table th[scope="row"] { font-weight: 600; min-width: 16rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.ref, .ref-cell { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; font-weight: 400; color: var(--ink-muted); }

/* Filters ----------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; background: var(--bg-muted); border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.25rem; margin: 1.5rem 0 1rem; }
/* A field, and the control in it, never grow wider than the form: a select is
   otherwise as wide as its longest option, which is wider than a phone. */
.filters .field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; max-width: 100%; }
.filters label, .filters legend { font-weight: 600; font-size: 0.9375rem; }
.filters input[type="search"], .filters select {
  font: inherit; padding: 0.5rem 0.625rem; min-width: min(16rem, 100%); max-width: 100%;
  border: 2px solid var(--ink-muted); border-radius: 3px; background: var(--bg); color: var(--ink);
}
.filters fieldset { border: 0; margin: 0; padding: 0; }
.filters .checkboxes label { display: block; font-weight: 400; }
.filters .checkboxes input { margin-right: 0.375rem; }
.filters button { font: inherit; padding: 0.5rem 1rem; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); border-radius: 3px; cursor: pointer; }
.filters button:hover { background: var(--ink); color: var(--bg); }
.filter-actions { margin: 0; }
.result-count { font-weight: 600; margin: 0 0 0.5rem; }
.hint { margin: 0; }

/* Agreement detail -------------------------------------------------------- */

/* A custom chevron replaces the browser's native <details> marker for both
   accordion types on this page. The native marker is inconsistent across
   browsers (size, vertical alignment) and disappears entirely once a summary
   is set to display: flex, as the version list below needs — so rather than
   fight that per element, hide it everywhere and draw one shape ourselves. */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

.prose-block summary,
details.version summary,
details.diff summary {
  position: relative;
  padding-left: 1.375rem;
}
.prose-block summary::before,
details.version summary::before,
details.diff summary::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: translateY(-60%) rotate(-45deg);
  transition: transform 0.15s ease;
}
details[open] > summary::before { transform: translateY(-40%) rotate(45deg); }

.prose-block { border: 1px solid var(--line); border-radius: 4px; padding: 0.25rem 1rem; margin-bottom: 0.75rem; }
.prose-block summary { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.prose-block summary h3 { display: inline; margin: 0; font-size: 1.0625rem; }
.prose-block[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 0.5rem; }
.prose-block p { white-space: pre-wrap; }
.plain { list-style: none; padding: 0; }
.plain li { padding: 0.25rem 0; border-bottom: 1px solid var(--line); max-width: 60ch; }

.pill-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.pill-list li { border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.875rem; max-width: none; }

details.version { border: 1px solid var(--line); border-radius: 4px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
details.version summary { font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; }
details.version summary::before { top: 0.85rem; }
.version-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.version-term { font-weight: 400; color: var(--ink-muted); font-size: 0.9375rem; }
.dataset-line { font-size: 0.9375rem; }

mark { background: var(--mark-bg); color: var(--mark-ink); border-radius: 2px; padding: 0 0.1em; }
.search-note { background: var(--bg-notice); border-left: 4px solid var(--mark-bg); padding: 0.5rem 0.75rem; max-width: 70ch; }
.tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 3px; padding: 0.125rem 0.5rem; }
.tag-new { background: var(--tag-new-bg); color: var(--tag-new-ink); }
.tag-amended { background: var(--tag-amended-bg); color: var(--tag-amended-ink); }
.tag-in-term { background: var(--tag-new-bg); color: var(--tag-new-ink); }
.tag-expired { background: var(--bg-muted); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }
.term-status .tag { margin-right: 0.5rem; }
td .tag { white-space: nowrap; }

.cite { margin-top: 2.5rem; }
.cite summary h2 { font-size: 1.125rem; margin: 0; }
.cite-text { max-width: 70ch; }
.cite-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.cite-actions button { font: inherit; padding: 0.375rem 0.875rem; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); border-radius: 3px; cursor: pointer; }
.cite-actions button:hover { background: var(--ink); color: var(--bg); }
.source-note { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-muted); max-width: 70ch; }
.download { border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.download h2 { margin-bottom: 0.25rem; }
.filesize { font-weight: 400; font-size: 0.9375rem; color: var(--ink-muted); }
.columns { font-size: 0.875rem; color: var(--ink-muted); max-width: 80ch; }

/* Footer ------------------------------------------------------------------ */

.site-footer { border-top: 1px solid var(--line); background: var(--bg-muted); padding: 1.5rem 0 3rem; font-size: 0.9375rem; color: var(--ink-muted); }
.site-footer p { margin: 0.5rem 0; max-width: 80ch; }

@media print {
  .site-header nav, .site-search, .filters, .notice-bar { display: none; }
  body { font-size: 11pt; }
}

/* Version-to-version diffs -------------------------------------------------
   Colour is never the only signal: <ins> keeps its underline and <del> its
   strikethrough, so the diff survives greyscale, high-contrast mode and
   colour blindness. */

details.diff { border-left: 3px solid var(--accent); padding: 0.25rem 0 0.25rem 0.875rem; margin: 0.75rem 0; }
details.diff summary { font-weight: 600; color: var(--accent); }
details.diff summary::before { border-color: var(--accent); }
details.diff h4 { margin: 0.875rem 0 0.25rem; font-size: 0.9375rem; }
details.diff .hint { margin: 0.25rem 0 0.5rem; }

.diff-text { line-height: 1.7; }
.diff-text ins, .diff-list ins, .data-table ins { background: var(--ins-bg); color: var(--ins-ink); text-decoration: underline; padding: 0 0.15em; }
.diff-text del, .diff-list del, .data-table del { background: var(--del-bg); color: var(--del-ink); text-decoration: line-through; padding: 0 0.15em; }
.diff-elided { color: var(--ink-muted); font-size: 0.8125rem; font-style: italic; white-space: nowrap; }
.diff-list { margin: 0.35rem 0; }
.change-list { list-style: none; margin: 0.25rem 0; padding: 0; }
.change-list li { margin: 0.2rem 0; overflow-wrap: anywhere; }
.change-list ins { background: var(--ins-bg); color: var(--ins-ink); text-decoration: underline; padding: 0 0.15em; }
.change-list del { background: var(--del-bg); color: var(--del-ink); text-decoration: line-through; padding: 0 0.15em; }
.data-table.compact th, .data-table.compact td { padding: 0.35rem 0.5rem; font-size: 0.875rem; }

.timeline { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.timeline li { padding: 0.4rem 0 0.4rem 0.875rem; border-left: 2px solid var(--line); }
.timeline li:first-child { border-left-color: var(--accent); }
.timeline-line { margin: 0.3rem 0 0; font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.timeline .version-ref { font-size: 0.875rem; color: var(--ink-muted); }