/* Report page: one report, every edition held, read verbatim; history band, redline in place,
   saved highlights and citations. Everything above the text keeps one height whatever the edition shown
   (single lines cut with an ellipsis, a caption box of fixed height), so stepping between editions moves nothing.
   Tokens, fonts and components (.tag, .eyebrow, .btn, .numeral, .pop-in) come from ../shared/theme.css;
   the slider and rolling digits from ../shared/timeline.css; link status tags from ../shared/link-status.css.
   The saved page (../saved/) reuses the header, footer, citation and segmented-control styles. */

:root {
  --top-h: 3.75rem;
  --doc-fs: 1.06rem;
  --doc-lh: 1.7;
  --measure: 70ch;
  --gutter: 4.4rem;                        /* hanging paragraph numbers */
  --toc-w: clamp(13rem, 14vw, 17rem);
  --rail-w: clamp(17rem, 18vw, 22rem);
  --pad-x: clamp(1rem, 2.4vw, 2.75rem);
  --shadow: 0 1px 2px rgb(16 24 40 / .04), 0 14px 36px -14px rgb(16 24 40 / .22);
  --mark: var(--ins-wash);                 /* saved highlights: the redline's insertion wash + a blue underline */
  --mark-strong: color-mix(in oklab, var(--blue) 22%, var(--bg));
}
:root[data-theme="dark"] { --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 36px -14px rgb(0 0 0 / .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 14px 36px -14px rgb(0 0 0 / .7); } }

html { scroll-padding-top: calc(var(--stick-top, var(--top-h)) + var(--bar-h, 0px) + 1.25rem); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.spacer { flex: 1; }
/* Several bands precede the reader. A three-row grid stretched the empty masthead while
   data loaded, then moved the whole reading area when that row acquired its text. */
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
body > main { flex: 1; }
body > .top, body > .foot { flex-shrink: 0; }
body.is-loading > :not(.top, .skip) { visibility: hidden; }
body > * { min-width: 0; }                 /* a one-line caption or bar must never widen the page: it is cut short instead */
.skip { position: absolute; left: -999px; top: .5rem; z-index: 60; display: flex; align-items: center; height: calc(1.55em + 1rem); background: var(--blue); color: var(--blue-ink); padding: 0 .8rem; font-family: var(--font-mono); font-size: .8rem; line-height: normal; }
.skip:focus { left: .5rem; }

/* --- Header (as the dashboard) ----------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .9rem;
  height: var(--top-h); padding: 0 var(--pad-x);
  background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .65rem; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 1.9rem; height: auto; }
.brand-name { font-family: var(--font-pixel); font-size: .82rem; letter-spacing: .16em; white-space: nowrap; }
.theme-btn { min-height: 2.35rem; font-family: var(--font-pixel); font-size: .7rem; letter-spacing: .1em; min-width: 4.6rem; }
.saved-link { min-height: 2.35rem; font-family: var(--font-pixel); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; gap: .55rem; }
.saved-link:hover { text-decoration: none; }
.saved-link svg { width: .85rem; height: .85rem; flex: none; }
.saved-count { min-width: 1.3rem; padding: .28em .4em .24em; background: var(--blue); color: var(--blue-ink); font-size: .66rem; line-height: 1; text-align: center; transition: transform var(--t) var(--ease); }
.saved-count.bump { animation: bump var(--t-slow) var(--ease); }
@keyframes bump { 30% { transform: scale(1.35); } }

.find {
  margin-left: auto; display: flex; align-items: center; gap: .45rem; width: min(30rem, 36vw); height: 2.35rem;
  padding: 0 .35rem 0 .7rem; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), width var(--t) var(--ease);
}
.find:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); color: var(--blue); }
.find svg { width: 1rem; height: 1rem; flex: none; }
.find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: .9rem; }
.find input::placeholder { color: var(--ink-3); }
.find input::-webkit-search-cancel-button { display: none; }
.find-count { font-size: .7rem; color: var(--ink-2); white-space: nowrap; min-width: 0; opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.find-count.on { opacity: 1; }
.find-count.none { color: var(--ink-3); }
.find-step { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.find-step svg { width: .95rem; height: .95rem; }
.find-step:hover:not(:disabled) { color: var(--blue); background: var(--blue-wash); }
.find-step:disabled { opacity: .35; cursor: default; }
.find-kbd { margin-right: .25rem; }
.find:focus-within .find-kbd { display: none; }

.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }

/* --- Layout: contents | note | saved ---------------------------------------------------------- */
.reader {
  display: grid; align-items: start; gap: 0 clamp(1.5rem, 2.6vw, 3.5rem);
  grid-template-columns: var(--toc-w) minmax(0, 1fr) var(--rail-w);
  padding: 2rem var(--pad-x) 6rem;
}
/* The measure is set where the reading font size applies, so 70ch means 70 characters of the note. */
.center { min-width: 0; width: 100%; max-width: calc(var(--measure) + var(--gutter)); margin-inline: auto; font-size: var(--doc-fs); }
.note-head, .doc { padding-left: var(--gutter); }
.note-head { font-size: 1rem; }

/* --- Contents ------------------------------------------------------------------------------------ */
.toc, .rail { position: sticky; top: calc(var(--stick-top, var(--top-h)) + var(--bar-h, 0px) + 1.4rem); max-height: calc(100vh - var(--stick-top, var(--top-h)) - var(--bar-h, 0px) - 2.8rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.toc { font-size: .8rem; padding-right: .3rem; }
.toc .eyebrow, .rail .eyebrow { margin: 0 0 .75rem; }
.toc-list { position: relative; list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc-ind { position: absolute; left: -1px; top: 0; width: 2px; height: 0; background: var(--blue); transition: transform var(--t) var(--ease), height var(--t) var(--ease), opacity var(--t) var(--ease); opacity: 0; }
.toc li { margin: 0; }
.toc a {
  display: flex; align-items: center; gap: .5rem; padding: .34rem .6rem; color: var(--ink-2); line-height: normal;   /* no leading: the words sit in the middle of the entry's highlight, level with its count (see .tag in theme.css) */
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.toc a:hover { color: var(--ink); background: var(--sunken); text-decoration: none; }
.toc a.is-active { color: var(--blue); background: var(--blue-wash); }
.toc li.l3 a { padding-left: 1.25rem; font-size: .77rem; }
.toc .cnt { margin-left: auto; display: flex; align-items: center; height: 1.6em; font-family: var(--font-pixel); font-size: .62rem; line-height: normal; letter-spacing: .04em; padding: 0 .4em; background: var(--blue); color: var(--blue-ink); }
.toc .toc-label { min-width: 0; }

/* --- Note head ------------------------------------------------------------------------------------ */
.back { margin-bottom: 1.4rem; }
.back:hover { text-decoration: none; }
.note-hero { display: flex; align-items: center; gap: 1.3rem; }
canvas.dotflag { display: inline-block; flex: none; aspect-ratio: 4 / 3; height: auto; }
.dotflag--hero { width: clamp(5rem, 6.4vw, 7.4rem); }
.dotflag--row { width: 1.35rem; }
.dotflag--tag { width: 1.25em; }
.note-hero .eyebrow { margin-bottom: .45rem; }
.note-title { margin: 0; font-size: clamp(1.9rem, 2.5vw, 2.7rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 620; text-wrap: balance; }
.note-verbatim { margin: .55rem 0 0; font-family: var(--font-mono); font-size: .76rem; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.note-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin: 1.4rem 0 0; padding: .9rem 0; border-block: 1px solid var(--line); }
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em; color: var(--ink-2); text-transform: uppercase; }
.meta-line > * + *::before { content: "·"; margin-right: .6rem; color: var(--ink-3); display: inline-block; text-decoration: none; }
.meta-line b { font-weight: 500; color: var(--ink); }
.notice { --words: .84rem; display: flex; gap: .7rem; align-items: baseline; margin: 1rem 0 0; font-size: .84rem; line-height: 1.5; color: var(--ink-2); }
.notice .tag { flex: none; position: relative; top: var(--rise); }   /* level with the first line's capitals (--rise: theme.css) */
.notice--gone { padding: .8rem .9rem; border-left: 2px solid var(--blue); background: var(--blue-wash); color: var(--ink); }
.notice strong { font-weight: 600; color: var(--ink); }
.note-head { margin-bottom: 2.4rem; }
.note-head > * { animation: pop-in var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* --- The note: verbatim govspeak --------------------------------------------------------------- */
.doc { font-family: var(--font-text); font-size: var(--doc-fs); line-height: var(--doc-lh); color: var(--ink); letter-spacing: 0; outline: none; }
/* The first screenful fades and lifts in; the rest of a long note is never animated (or blurred) as one layer. */
.doc .govspeak > .cv:nth-child(-n+3) { animation: doc-in var(--t-slow) var(--ease) both; }
.doc .govspeak > .cv:nth-child(2) { animation-delay: 60ms; }
.doc .govspeak > .cv:nth-child(3) { animation-delay: 120ms; }
@keyframes doc-in { from { opacity: 0; transform: translateY(.6rem); filter: blur(3px); } }
.doc.is-entered .govspeak > .cv:nth-child(-n+3) { animation: none; }     /* another edition: no lift, the text keeps its place */
/* Long notes: top-level chunks skip rendering while off screen. Each chunk reaches into the gutter so
   hanging paragraph numbers sit inside its paint box. */
.doc .cv { display: flow-root; content-visibility: auto; margin-left: calc(-1 * var(--gutter)); padding-left: var(--gutter); }
.doc .cv.warm { content-visibility: visible; }
.doc a { text-decoration: underline; text-decoration-color: var(--blue-line); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.doc a:hover { text-decoration-color: currentColor; }
.doc a.ext::after { content: "\2197"; font-family: var(--font-mono); font-size: .72em; margin-left: .12em; display: inline-block; opacity: .65; text-decoration: none; }
.doc h2, .doc h3, .doc h4 { scroll-margin-top: calc(var(--stick-top, var(--top-h)) + var(--bar-h, 0px) + 1.4rem); text-wrap: balance; }
.doc h2 { font-size: 1.5rem; line-height: 1.25; font-weight: 620; letter-spacing: -.022em; margin: 3rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.doc .cv:first-child h2:first-child, .doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 1.16rem; line-height: 1.35; font-weight: 620; letter-spacing: -.012em; margin: 2.2rem 0 .7rem; }
.doc h4 { font-size: 1.03rem; line-height: 1.4; font-weight: 600; margin: 1.8rem 0 .55rem; color: var(--ink); }
.doc h5, .doc h6 { font-size: .96rem; font-weight: 600; margin: 1.4rem 0 .4rem; }
.doc p { margin: 0 0 1.05rem; }
.doc p.np { position: relative; }
.pnum {
  position: absolute; right: calc(100% + 1.15rem); top: 0; white-space: nowrap;
  font-family: var(--font-mono); font-size: .72rem; line-height: calc(var(--doc-fs) * var(--doc-lh)); letter-spacing: 0;
  color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color var(--t-fast) var(--ease);
}
.doc p.np:hover .pnum { color: var(--blue); }
.doc ul, .doc ol { margin: 0 0 1.05rem; padding-left: 1.4rem; }
.doc ul { list-style: square; }
.doc li { margin: .32rem 0; }
.doc ul > li::marker { color: var(--blue); }
.doc ol > li::marker { font-family: var(--font-mono); font-size: .8em; color: var(--ink-3); }
.doc li > p { margin: 0 0 .4rem; }
.doc li > p:last-child { margin-bottom: 0; }
.doc blockquote { margin: 1.2rem 0 1.4rem; padding: .1rem 0 .1rem 1.2rem; border-left: 2px solid var(--line-strong); }
.doc blockquote p { margin: 0 0 .5rem; }
/* GOV.UK takes the quotation marks off a block quote's paragraphs and draws them itself. So do we: drawn, never part of a selection or a citation. */
.doc blockquote > p { position: relative; }
.doc blockquote > p::before { content: "\201C"; position: absolute; right: 100%; }
.doc blockquote > p.last-child::after { content: "\201D"; }
/* A long web address typed into the text breaks rather than running off a phone's screen (table cells still scroll). */
.doc { overflow-wrap: break-word; }
/* Reading aids (../shared/display-format.js). Display only: the characters are the note's own, wrapped or classed. */
/* Typed spaces of another width are shown as a word space. In Geist a narrow no-break space is .125em narrower than one, a thin space .049em and a hair space .187em; an en space is .25em wider. */
.doc .sp-nn { letter-spacing: .125em; }
.doc .sp-th { letter-spacing: .049em; }
.doc .sp-hr { letter-spacing: .187em; }
.doc .sp-en { letter-spacing: -.25em; }
/* A quoted run (a lead-in, then paragraphs in quotation marks) is ruled like the Home Office's own <blockquote>. */
.doc .qr { --qi: 1.2rem; border-left: 2px solid var(--line-strong); }
.doc .qr:not(.qr-z) { margin-bottom: 0; padding-bottom: 1.05rem; }
.doc.is-sbs .sbs-cell > .qr { padding-bottom: 0; }
.doc p.qr { padding-left: var(--qi); }
.doc ul.qr, .doc ol.qr { padding-left: calc(1.4rem + var(--qi)); }
/* A typed enumerator ("(1)", "a.") hangs beside its text, a list inside a list further in (--en-in). */
.doc p.en { padding-left: calc(var(--qi, 0rem) + var(--en-in, 0em) + var(--en-n) * .468em + .5em); text-indent: calc(var(--en-n) * -.468em - .5em); }
.doc p.en > * { text-indent: 0; }
.doc .enum { display: inline-block; width: calc(var(--en-n) * .6em + .27em); font-family: var(--font-mono); font-size: .78em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.doc sup { line-height: 0; font-size: .64em; font-family: var(--font-mono); font-weight: 500; vertical-align: super; }
.doc sup a { text-decoration: none; padding: 0 .08em; white-space: nowrap; }   /* "[footnote 83]" is never split over two lines */
.doc sup a:hover { background: var(--blue-wash); }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.doc abbr { text-decoration: underline dotted var(--ink-3); }
.doc .info-notice, .doc .call-to-action, .doc .help-notice, .doc .application-notice {
  margin: 0 0 1.6rem; padding: .6rem .9rem; border: 1px solid var(--line); background: var(--sunken);
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.5; color: var(--ink-2);
}
.doc .info-notice p, .doc .call-to-action p, .doc .application-notice p { margin: 0; }
.doc .info-notice p + p, .doc .call-to-action p + p { margin-top: .4rem; }
.doc .address { margin: 0 0 1.2rem; padding: .55rem .9rem; border: 1px solid var(--line); font-size: .92rem; }
.doc .address p { margin: 0; }
.tbl-scroll { margin: 1.3rem 0 1.6rem; overflow-x: auto; border: 1px solid var(--line); background: var(--surface); scrollbar-width: thin; }
.doc table { border-collapse: collapse; width: 100%; font-size: .86rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.doc th, .doc td { text-align: left; padding: .5rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .02em; color: var(--ink-2); background: var(--sunken); }
.doc tbody th { background: transparent; color: var(--ink); }
.doc tr:last-child > * { border-bottom: 0; }
.doc table p { margin: 0 0 .4rem; }
.doc table p:last-child { margin: 0; }
/* Charts and maps are drawn for white paper: they keep a white plate in dark mode. */
.doc figure { margin: 1.6rem 0; }
.doc figure .img, .doc p > img, .doc .img { display: block; }
.doc img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; border: 1px solid var(--line); opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.doc ins img, .doc del img { display: inline-block; }
.doc img.loaded { opacity: 1; }
.doc figcaption { margin-top: .5rem; font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); }
/* A picture only the PDF has, set beside the web text (pdf-figures.js). Its caption is ours, not the note's:
   it cannot be selected, so a quote taken across the picture is still the published text. */
.doc .pdf-fig { padding-left: .9rem; border-left: 1px solid var(--line-strong); }
.doc .pdf-fig img { margin: 0; }
.doc .pdf-fig figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; min-height: calc(var(--doc-lh) * 1em); line-height: normal; -webkit-user-select: none; user-select: none; }   /* no leading, so the words and the tag share a centre line; as tall as its line was */
.doc li > .pdf-fig { margin: .9rem 0; }
/* The tags this site adds inside the text (highlights.js: SITE_TAGS) are not the note's words: none can be selected.
   That is for the eye only. What keeps them out of a copy is the copy handler in reader.js (Safari copies unselectable text). */
.doc .linkstatus, .doc .lc, .doc .badge, .doc .pdf-fig { -webkit-user-select: none; user-select: none; }
.doc .footnotes { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--top-h) + 1.4rem); }
.doc .footnotes::before { content: "Footnotes"; display: block; margin-bottom: .9rem; font-family: var(--font-pixel); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.doc .footnotes ol { font-size: .86rem; line-height: 1.55; color: var(--ink-2); }
.doc .footnotes li { scroll-margin-top: calc(var(--top-h) + 4rem); }
.doc .footnotes li > p { margin: 0; }
.doc .footnotes a[role="doc-backlink"], .doc .footnotes .reversefootnote { text-decoration: none; }
.doc .footnotes li.is-target { background: var(--blue-wash); box-shadow: -.6rem 0 0 var(--blue-wash), .6rem 0 0 var(--blue-wash); transition: background var(--t-slow) var(--ease); }

/* Loading */
.skeleton { display: grid; gap: .9rem; padding-top: .4rem; }
.skeleton i { display: block; height: .9rem; background: var(--sunken); animation: shimmer 1.4s var(--ease-in-out) infinite alternate; }
.skeleton i:nth-child(3n) { width: 82%; } .skeleton i:nth-child(4n) { width: 64%; } .skeleton i:nth-child(5n) { width: 91%; }
@keyframes shimmer { from { opacity: .55; } to { opacity: 1; } }
.load-error { padding: 1.2rem 1.3rem; border: 1px solid var(--line-strong); }
.load-error h2 { margin: .4rem 0 .5rem; font-size: 1.2rem; font-weight: 620; }
.load-error p { margin: 0 0 .9rem; color: var(--ink-2); }

/* --- Saved highlights in the text ------------------------------------------------------------- */
mark.hl {
  background-color: var(--mark); color: inherit; cursor: pointer; padding: .06em 0;
  text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: .24em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
mark.hl mark.hl { background-color: var(--mark-strong); }
mark.hl.is-hot, mark.hl:hover { background-color: var(--mark-strong); }
mark.hl.is-new { animation: hl-in .7s var(--ease) both; }
@keyframes hl-in { from { background-color: transparent; text-decoration-color: transparent; } }
mark.hl.is-flash { animation: hl-flash 1.4s var(--ease) both; }
@keyframes hl-flash { 0%, 40% { background-color: color-mix(in oklab, var(--blue) 34%, var(--bg)); } }
mark.hl:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
::highlight(cpin-find) { background-color: color-mix(in oklab, var(--blue) 17%, transparent); text-decoration: underline dotted var(--blue); }
::highlight(cpin-find-current) { background-color: var(--blue); color: var(--blue-ink); }

/* --- Selection toolbar (desktop: floats over the selection; touch: a sheet along the bottom of the screen, or
   under the sticky bar when the bottom would put it on the selection, its handles or the system's menu) --- */
.seltool {
  position: absolute; z-index: 40; left: 0; top: 0; display: flex; align-items: stretch;
  background: var(--blue); color: var(--blue-ink); box-shadow: var(--shadow);
  font-family: var(--font-mono); font-size: .76rem; line-height: normal; letter-spacing: .01em;
  transform-origin: var(--ox, 50%) 100%;
}
.seltool[hidden] { display: none; }
.seltool.is-in { animation: tool-in var(--t) var(--ease) both; }
.seltool.is-out { animation: tool-out var(--t-fast) var(--ease) both; pointer-events: none; }
.seltool.is-below { transform-origin: var(--ox, 50%) 0; }
@keyframes tool-in { from { opacity: 0; transform: translateY(var(--tool-dy, .3rem)) scale(.96); filter: blur(3px); } }
@keyframes tool-out { to { opacity: 0; transform: translateY(var(--tool-dy, .3rem)) scale(.96); filter: blur(3px); } }
.seltool::after { content: ""; position: absolute; left: var(--ox, 50%); top: 100%; width: 1px; height: .55rem; background: var(--blue); }
.seltool.is-below::after { top: auto; bottom: 100%; }
.seltool .st-pin { display: flex; align-items: center; padding: 0 .75rem; font-family: var(--font-pixel); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border-right: 1px solid color-mix(in oklab, var(--blue-ink) 28%, transparent); }
.seltool button {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.35rem; padding: 0 .8rem; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease);
}
.seltool button + button { border-left: 1px solid color-mix(in oklab, var(--blue-ink) 22%, transparent); }
.seltool button:hover, .seltool button:focus-visible { background: color-mix(in oklab, #000 16%, var(--blue)); outline: none; }
.seltool svg { width: .9rem; height: .9rem; flex: none; }
.seltool.is-touch {
  position: fixed; left: max(.6rem, env(safe-area-inset-left)); right: max(.6rem, env(safe-area-inset-right)); top: auto;
  bottom: calc(.6rem + env(safe-area-inset-bottom)); flex-wrap: wrap; transform-origin: 50% 100%; --tool-dy: .6rem;
}
.seltool.is-touch.is-top { top: calc(var(--tool-top, 6.6rem) + .6rem); bottom: auto; transform-origin: 50% 0; --tool-dy: -.6rem; }
.seltool.is-touch::after { display: none; }
.seltool.is-touch .st-pin { flex-basis: 100%; min-height: 2rem; border-right: 0; border-bottom: 1px solid color-mix(in oklab, var(--blue-ink) 28%, transparent); }
.seltool.is-touch button { flex: 1; justify-content: center; min-height: 2.9rem; padding: 0 .5rem; font-size: .74rem; }

/* --- Link card (link-card.js): where a link in the text leads, shown once the pointer rests on it -- */
.link-card {
  position: absolute; z-index: 40; width: max-content; max-width: min(24rem, calc(100vw - 24px)); padding: .6rem .75rem .65rem;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 12px 32px -14px rgb(10 14 30 / .3);
  font-size: .8rem; line-height: 1.4; color: var(--ink-2);
  opacity: 0; transform: translateY(.25rem) scale(.985); filter: blur(3px); pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.link-card[data-side="above"] { transform: translateY(-.25rem) scale(.985); }
.link-card.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.link-card p { margin: 0; }
.lk-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; line-height: normal; }
.lk-top .eyebrow { font-size: .58rem; color: var(--ink-3); }
.lk-tag { font-size: .5rem; background: var(--sunken); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.lk-tag--ok { background: var(--surface); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-line); }
.lk-tag--dead { background: var(--surface); color: var(--del); box-shadow: inset 0 0 0 1px currentColor; }
.lk-title { font-weight: 600; font-size: .9rem; color: var(--ink); overflow-wrap: anywhere; }
.lk-line { margin-top: .15rem; font-family: var(--font-mono); font-size: .68rem; overflow-wrap: anywhere; }
.lk-title + .lk-line { margin-top: .25rem; }
.link-card .lk-more { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .68rem; }
.lk-more a { color: var(--blue); text-decoration: underline; text-decoration-color: var(--blue-line); text-underline-offset: .18em; }
.lk-more a:hover { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .link-card { transition: none; } }

/* --- Popover (saved highlight, footnote) --------------------------------------------------------- */
.pop {
  position: absolute; z-index: 45; left: 0; top: 0; width: min(28rem, calc(100vw - 1.5rem));
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  font-size: .86rem; line-height: 1.5;
}
.pop[hidden] { display: none; }
.pop.is-sheet { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; border-inline: 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
.pop.is-sheet.is-in { animation: sheet-in var(--t-slow) var(--ease) both; }
@keyframes sheet-in { from { transform: translateY(100%); } }
.pop.is-in { animation: pop-in var(--t) var(--ease) both; }
.pop-head { display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem .6rem; border-bottom: 1px solid var(--line); line-height: normal; }
.pop-head .eyebrow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-x { margin-left: auto; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 0; background: none; color: var(--ink-2); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.pop-x:hover { color: var(--blue); background: var(--blue-wash); }
.pop-body { padding: .8rem .85rem .9rem; display: grid; gap: .8rem; max-height: min(70vh, 34rem); overflow: auto; }
.pop-status { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-2); }
.pop-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.pop-actions .btn { min-height: 2.15rem; font-size: .74rem; }
.btn svg { width: .9rem; height: .9rem; flex: none; }
.pop-actions .btn-del { margin-left: auto; color: var(--ink-2); border-color: transparent; }
.pop-actions .btn-del:hover { color: var(--ink); border-color: var(--line-strong); }
.pop-fn { display: grid; gap: .55rem; }
.pop-fn p { margin: 0; }
.source-reviews { border-top: 1px solid var(--line); padding-top: .65rem; }
.source-review-badge { display: inline-flex; align-items: baseline; justify-content: center; min-width: 1em; margin-inline-start: .35rem; font-family: var(--font-mono); font-size: 1rem; line-height: 1; }
.sr-red { color: var(--del); }
.sr-yellow { color: var(--review-yellow, #946300); }
.sr-green { color: var(--review-green, #137447); }
.sr-grey { color: var(--ink-2); }
:root[data-theme="dark"] { --review-yellow: #e8bb55; --review-green: #68d6a0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --review-yellow: #e8bb55; --review-green: #68d6a0; }
}
.sr-source { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.sr-source p { margin: .35rem 0; }
.sr-source > .source-review-badge { margin-inline-start: 0; }
.sr-scope, .sr-meta { color: var(--ink-2); font-size: .74rem; }
.sr-review-group { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .65rem; }
.sr-group-heading { margin: 0 0 .45rem; font-family: var(--font-mono); font-size: .8rem; font-weight: 500; }
.sr-record { margin: .7rem 0; padding: .55rem; background: var(--bg); border: 1px solid var(--line); }
.sr-evidence blockquote { margin: .5rem 0; padding-left: .7rem; border-left: 2px solid var(--blue); white-space: pre-wrap; overflow-wrap: anywhere; }
.sr-source summary { cursor: pointer; color: var(--blue); margin-top: .6rem; }
.sr-form { display: grid; gap: .65rem; margin-top: .6rem; }
.sr-form label { display: grid; gap: .25rem; font-size: .76rem; }
.sr-form input, .sr-form textarea, .sr-form select { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--line-strong); padding: .45rem; border-radius: 0; background: var(--surface); color: var(--ink); font: inherit; }
.sr-form textarea { resize: vertical; }
.sr-form .btn { justify-self: start; }
.sr-form-result { overflow-wrap: anywhere; }
.field-label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.field-label .saved-flag { font-family: var(--font-mono); font-size: .68rem; color: var(--blue); opacity: 0; transition: opacity var(--t) var(--ease); }
.field-label .saved-flag.on { opacity: 1; }
.comment {
  display: block; width: 100%; min-height: 4.2rem; resize: vertical; padding: .55rem .65rem; border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--bg); color: var(--ink); font: inherit; font-size: .86rem; line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.comment:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }

/* --- Citation block and style switch (shared with the saved page) ------------------------------- */
.cite { position: relative; padding: .7rem .8rem; background: var(--sunken); border: 1px solid var(--line); font-size: .82rem; line-height: 1.55; overflow-wrap: anywhere; }
.cite a { color: var(--blue); }
.cite i { font-style: italic; }
.cite.swap { animation: cite-swap var(--t) var(--ease) both; }
@keyframes cite-swap { from { opacity: 0; filter: blur(3px); } }
.sources { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--ink-2); }
.sources summary { cursor: pointer; font-family: var(--font-pixel); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); list-style: none; display: flex; align-items: baseline; gap: .45rem; }   /* on one baseline, the + (drawn about .295em up, at .8rem) is level with the capitals (.361em, at .64rem) */
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: "+"; font-family: var(--font-mono); font-size: .8rem; color: var(--blue); width: .7rem; transition: transform var(--t) var(--ease); }
.sources[open] summary::before { content: "−"; }
.sources ol { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.sources li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .3rem; overflow-wrap: anywhere; }
.sources li b { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; color: var(--blue); }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-strong); background: var(--surface); isolation: isolate; }
.seg button {
  position: relative; z-index: 1; min-height: 1.9rem; padding: 0 .7rem; border: 0; border-radius: 0; background: none; cursor: pointer;
  font-family: var(--font-pixel); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.seg button[aria-checked="true"] { color: var(--blue-ink); }
.seg-thumb { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 50%; background: var(--blue); transition: transform var(--t) var(--ease); }
.seg[data-value="tribunal"] .seg-thumb { transform: translateX(100%); }

/* --- Saved from this note (right rail and sheet) ------------------------------------------------ */
.rail { font-size: .84rem; }
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding-bottom: .55rem; margin-bottom: .75rem; border-bottom: 1px solid var(--line); }
.rail-head .eyebrow { margin: 0; }
.rail-head .numeral { font-size: 1.1rem; color: var(--blue); line-height: 1; }
/* Citation style: "Full (OSCOLA)" | "Short (tribunal)", and one line saying what the chosen one produces. */
.rail-style { display: grid; gap: .5rem; margin-bottom: .9rem; }
.rail-style .eyebrow { margin: 0; }
.rail-style .seg { width: 100%; }
.pop .rail-style { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 0; line-height: normal; }
.pop .rail-style .seg { width: auto; }
.seg-hint { margin: 0; font-family: var(--font-mono); font-size: .7rem; line-height: 1.45; color: var(--ink-2); }
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.saved-item {
  display: grid; gap: .45rem; padding: .7rem .75rem .75rem; border: 1px solid var(--line); background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  animation: pop-in var(--t) var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms);
}
.saved-item:hover, .saved-item:focus-within, .saved-item.is-lit { border-color: var(--blue); }
.saved-item.is-hot { border-color: var(--blue); background: var(--blue-wash); }
.saved-open { display: grid; gap: .4rem; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.saved-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.saved-status { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; }
.badge-link { font-family: var(--font-mono); font-size: .68rem; }
.saved-item.is-changed { background: var(--sunken); }
.saved-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .5rem; }   /* the tag's lettering and the date beside it are of a size: one baseline levels them */
.saved-quote { margin: 0; font-size: .86rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.saved-comment { margin: 0; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.saved-when { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-3); }
.badge { display: inline-flex; align-items: baseline; gap: .35em; font-family: var(--font-mono); font-size: .68rem; line-height: 1.3; color: var(--ink-2); }
.badge::before { content: ""; width: .45rem; height: .45rem; background: var(--blue); flex: none; position: relative; top: calc(.225rem - var(--half-cap)); }   /* on the words' baseline, level with their capitals (see --half-cap in theme.css) */
.badge--changed { color: var(--ink); }
.badge--changed::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--blue); }
.badge a { font-family: var(--font-mono); }
.rail-empty { margin: 0; padding: 1rem .9rem; border: 1px dashed var(--line-strong); color: var(--ink-2); font-size: .84rem; line-height: 1.55; }
.rail-empty b { color: var(--ink); font-weight: 600; }
.rail-foot { margin-top: 1rem; font-family: var(--font-mono); font-size: .74rem; }

/* --- Toasts --------------------------------------------------------------------------------------- */
.toasts { position: fixed; z-index: 70; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: .45rem; justify-items: center; pointer-events: none; }
.toast {
  display: inline-flex; align-items: center; gap: .9rem; padding: .6rem .7rem .6rem .9rem; pointer-events: auto;
  background: var(--ink); color: var(--bg); box-shadow: var(--shadow); font-family: var(--font-mono); font-size: .78rem;
  animation: pop-in var(--t) var(--ease) both;
}
.toast.out { animation: toast-out var(--t) var(--ease) both; }
@keyframes toast-out { to { opacity: 0; transform: translateY(.4rem) scale(.98); filter: blur(3px); } }
.toast button { border: 0; padding: .25rem .5rem; background: var(--blue); color: var(--blue-ink); font-family: var(--font-pixel); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

/* --- Footer ----------------------------------------------------------------------------------------- */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding: 1.1rem var(--pad-x); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .7rem; line-height: 1.6; color: var(--ink-2); }
.foot-rm { font-family: var(--font-pixel); letter-spacing: .08em; }
.noscript { padding: 2rem; }

/* --- Dock and sheet (below 1200px for saved, below 900px for contents) ---------------------------- */
.dock { display: none; }
.sheet, .sheet-backdrop { display: none; }
@media (max-width: 1199px) {
  .reader { grid-template-columns: var(--toc-w) minmax(0, 1fr); }
  .rail { display: none; }
  .dock {
    position: fixed; z-index: 35; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
    display: flex; background: var(--blue); box-shadow: var(--shadow); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
  }
  .dock.is-hidden { transform: translate(-50%, 150%); opacity: 0; }
  .dock-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: 0 1rem; border: 0; background: none; color: var(--blue-ink); cursor: pointer; font-family: var(--font-pixel); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
  .dock-btn + .dock-btn { border-left: 1px solid color-mix(in oklab, var(--blue-ink) 28%, transparent); }
  .dock-btn:hover { background: color-mix(in oklab, #000 14%, var(--blue)); }
  .dock-btn .numeral { padding: .2em .35em; background: var(--blue-ink); color: var(--blue); font-size: .62rem; }
  .dock-btn[data-sheet="toc"] { display: none; }
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 50; background: rgb(10 12 16 / .28); opacity: 0; transition: opacity var(--t) var(--ease); }
  .sheet-backdrop.on { opacity: 1; }
  .sheet-backdrop[hidden] { display: none; }
  .sheet {
    display: flex; flex-direction: column; position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; max-height: 82vh;
    background: var(--surface); border-top: 1px solid var(--line-strong); box-shadow: var(--shadow);
    transform: translateY(102%); transition: transform var(--t-slow) var(--ease); padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet.on { transform: none; }
  .sheet-grip { width: 2.6rem; height: 3px; margin: .55rem auto .2rem; background: var(--line-strong); }
  .sheet-tabs { display: flex; align-items: center; gap: 1.2rem; padding: .2rem var(--pad-x) 0; border-bottom: 1px solid var(--line); }
  .sheet-tab { border: 0; background: none; padding: .7rem 0 .6rem; cursor: pointer; font-family: var(--font-pixel); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t) var(--ease); }
  .sheet-tab[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
  /* The guide and glossary, reachable from the sheet: on a phone the footer is a whole report away. */
  .sheet-link { margin-left: auto; padding: .7rem 0 .6rem; font-family: var(--font-pixel); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; }
  .sheet-link::after { content: " ?"; color: var(--blue); }
  .sheet-link + .sheet-close { margin-left: 0; }
  .sheet-close { margin-left: auto; width: 2.2rem; height: 2.2rem; border: 0; background: none; color: var(--ink-2); font-size: 1.3rem; cursor: pointer; }
  .sheet-body { overflow: auto; overscroll-behavior: contain; padding: 1rem var(--pad-x) 1.5rem; }
  .sheet-body .rail, .sheet-body .toc { display: block; position: static; max-height: none; overflow: visible; }
  .sheet-body .toc-list { border-left: 0; }
  .sheet-body .toc a { padding-block: .55rem; font-size: .9rem; }
  .sheet-body .toc li.l3 a { font-size: .85rem; }
}
@media (max-width: 899px) {
  :root { --gutter: 0rem; }
  .top { flex-wrap: wrap; height: auto; padding-top: .6rem; padding-bottom: .6rem; row-gap: .6rem; }
  .find { order: 3; width: 100%; margin-left: 0; display: none; }
  .top.find-open .find { display: flex; animation: pop-in var(--t) var(--ease) both; }
  .find-toggle { display: inline-flex; margin-left: auto; }
  .top.find-open .find-toggle { color: var(--blue); border-color: var(--blue); }
  .find-kbd { display: none; }
  .saved-link { margin-left: 0; }
  .reader { grid-template-columns: minmax(0, 1fr); padding-top: 1.4rem; }
  .reader > .toc { display: none; }
  .dock-btn[data-sheet="toc"] { display: inline-flex; }
  .pnum { position: static; margin-right: .5em; color: var(--blue); font-size: .78rem; line-height: inherit; }
  .doc .cv { margin-left: 0; padding-left: 0; }
  .doc .footnotes ol { padding-left: 2.35rem; }                   /* no gutter to hang in here: room for a three-digit number */
  .note-hero { gap: .9rem; }
  .doc h2 { font-size: 1.32rem; }
}
@media (max-width: 520px) {
  .brand-name { font-size: .74rem; letter-spacing: .12em; }
  .theme-btn { min-width: 0; padding: 0 .6rem; }
  .saved-link > span:first-of-type { display: none; }
  .note-meta { flex-direction: column; align-items: flex-start; }
  .note-hero { align-items: flex-start; flex-direction: column; }
  .dotflag--hero { width: 5rem; }
  .pop { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .doc img { opacity: 1; }
}
@media print {
  .top, .toc, .rail, .dock, .sheet, .seltool, .pop, .toasts, .note-meta .btn { display: none !important; }
  .reader { display: block; padding: 0; }
  .doc .cv { content-visibility: visible; }
  mark.hl { background: none; text-decoration: underline; }
}

/* =================================================================================================
   Report page: masthead, history band, sticky bar, redline in place
   ================================================================================================= */
.find-toggle { min-height: 2.35rem; min-width: 2.35rem; padding: 0; }
@media (min-width: 900px) { .find-toggle { display: none; } }
.find-toggle svg { width: 1rem; height: 1rem; }
.linklike { border: 0; padding: 0; background: none; color: var(--blue); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--blue-line); text-underline-offset: .2em; }
.linklike:hover { text-decoration-color: currentColor; }
.wide { width: 100%; padding-inline: var(--pad-x); }

/* --- Masthead: the flag, the title, and one quiet line about the edition shown ------------------------
   Every line has a fixed height (the line about the edition is one line, cut with an ellipsis if it must be),
   so nothing below moves when the edition changes. "Verbatim" and "Sources" are chips that open a small panel. */
.masthead { padding-top: 1.6rem; }
.masthead > * { animation: pop-in var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.mh-row { position: relative; z-index: 27; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .4rem 1.5rem; }
.mh-row > .mh-id:first-child { grid-column: 1 / -1; }
.mh-id { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.mh-eyebrow { display: flex; align-items: center; gap: .6rem; height: 1.1rem; margin: 0; white-space: nowrap; }
/* The way back to the country: a plain link, no box (country names are never boxed). */
.mh-back { color: var(--blue); }
.mh-back:hover { text-decoration: underline; text-underline-offset: .25em; }
.mh-back { flex: none; }
.mh-kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mh-kind::before { content: "·"; margin-right: .6rem; color: var(--ink-3); }
.report-title {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 3.1vw, 3.8rem); line-height: 1.02;
  letter-spacing: .06em; color: var(--blue); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere;
}
.mh-meta { display: flex; align-items: center; gap: .5rem 1rem; min-height: 1.9rem; }
.masthead .meta-line { flex: 1 1 auto; min-width: 0; display: block; margin: 0; line-height: 1.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.masthead .meta-line > * + * { margin-left: .6rem; }
.meta-line a { white-space: nowrap; }
.meta-line .m-s { display: none; }
.mh-chips { position: relative; flex: none; display: flex; align-items: center; gap: .45rem; }
.chip {
  display: inline-flex; align-items: center; gap: .55em; height: 1.75rem; padding: 0 .6rem; border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap;
  font-family: var(--font-pixel); font-size: .62rem; line-height: normal; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.chip[hidden] { display: none; }
/* The chevron is the lower half of a turned square. The middle of that V lies below the square's own middle
   by (side - stroke) x 0.354 (a quarter of root two), so it is lifted by that to sit level with the label,
   and lowered by it when turned over. */
.chip::after {
  --side: .32rem; --stroke: 1.5px; --lift: calc((var(--side) - var(--stroke)) * .354);
  content: ""; width: var(--side); height: var(--side); margin-left: .1rem; border: solid currentColor; border-width: 0 var(--stroke) var(--stroke) 0;
  transform: translateY(calc(-1 * var(--lift))) rotate(45deg); opacity: .7; transition: transform var(--t) var(--ease);
}
.chip[aria-expanded="true"]::after { transform: translateY(var(--lift)) rotate(225deg); }
.chip:hover, .chip[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }
.chip[aria-expanded="true"] { background: var(--blue-wash); }
#verbatimChip { border-color: var(--blue); color: var(--blue); }
.chip-v { color: var(--ink); }
.chip-v::before { content: "·"; margin-right: .55em; color: var(--ink-3); }
.chip-v.is-dead { color: var(--del); }
.chip:hover .chip-v:not(.is-dead), .chip[aria-expanded="true"] .chip-v:not(.is-dead) { color: inherit; }
/* The panel a chip opens: under the chips, right-aligned, over whatever is below (nothing is pushed down). */
.hpop {
  position: absolute; z-index: 2; top: calc(100% + .55rem); right: 0; width: min(27rem, calc(100vw - 2 * var(--pad-x)));
  display: grid; gap: .65rem; padding: .85rem .95rem .95rem; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  font-family: var(--font-text); font-size: .84rem; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-2); white-space: normal;
  transform-origin: 100% 0;
}
.hpop[hidden] { display: none; }
.hpop.is-in { animation: pop-in var(--t) var(--ease) both; }
.hpop p { margin: 0; }
.hpop b { font-weight: 600; color: var(--ink); }
.hpop a { text-decoration: underline; text-decoration-color: var(--blue-line); text-underline-offset: .2em; }
.hpop-head { display: flex; align-items: center; gap: .6rem; min-height: 1.5em; font-family: var(--font-mono); font-size: .74rem; line-height: normal; }
.hpop-head .tag { font-size: .58rem; }
.hpop-kv { display: grid; gap: .25rem; padding: .55rem .65rem; border: 1px solid var(--line); background: var(--sunken); font-family: var(--font-mono); font-size: .74rem; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.hpop-kv .eyebrow { font-size: .56rem; }
.hpop-note { font-size: .78rem; }
.hpop-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.hpop-counts li { padding: .22rem .5rem; border: 1px solid var(--line); font-family: var(--font-mono); font-size: .74rem; color: var(--ink); white-space: nowrap; }
.hpop-counts li.is-dead { color: var(--del); border-color: color-mix(in oklab, var(--del) 45%, var(--bg)); background: var(--del-wash); }
.hpop .btn { min-height: 2.1rem; font-size: .74rem; }
/* Where the PDF of the edition differs (pdf-differences.js): a longer panel, so it scrolls within itself. */
.hpop[data-kind="pdf"] { width: min(34rem, calc(100vw - 2 * var(--pad-x))); max-height: min(72vh, 38rem); overflow: auto; overscroll-behavior: contain; }
.pd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pd-list li { display: grid; gap: .3rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.pd-go { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; font-family: var(--font-mono); font-size: .74rem; color: var(--blue); }
.pd-go:hover .pd-where { text-decoration: underline; text-underline-offset: .2em; }
.pd-side { color: var(--ink-2); }
.pd-words { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .5rem; align-items: baseline; font-size: .8rem; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.pd-words .eyebrow { font-size: .56rem; }
.pd-ctx { color: var(--ink-3); }
.pd-words b { font-weight: 600; color: var(--ink); }
.pd-words .pd-none { font-weight: 400; font-style: italic; color: var(--ink-2); }
.masthead .notice--gone { max-width: 120ch; margin-top: 1.1rem; }

/* --- History band -----------------------------------------------------------------------------------
   Head: the title, how much is held, then All editions (a drop-down) and Hide. Body: the date the handle
   is on, what changed then (the Home Office's words), and the timeline. The date column, the caption and each
   of its lines have fixed sizes, so stepping through editions moves nothing. */
.history { margin-top: 1.4rem; --asat-fs: clamp(1.7rem, 1.05rem + 1.2vw, 2.6rem); }
.history[hidden] { display: none; }
.hist-frame { border: 1px solid var(--line); background: var(--surface); }
.hist-head { position: relative; display: flex; align-items: center; gap: .4rem .5rem; min-height: 3.5rem; padding: .6rem 1.1rem; }
.hist-head > .eyebrow, .hist-head > .hist-count, .hist-head > .hist-mini { line-height: normal; }   /* one-line labels beside the buttons: no leading (see .tag in theme.css) */
.hist-head .eyebrow { color: var(--blue); margin-right: .4rem; }
.hist-count { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hist-mini { display: none; margin-left: .4rem; font-family: var(--font-pixel); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.hist-closed .hist-mini { display: inline; animation: pop-in var(--t) var(--ease) both; }
.hist-instant .hist-mini { animation: none; }
.hist-head .btn { min-height: 2.25rem; flex: none; }
/* Both buttons are quiet: no box until hovered. */
.clog-btn, .hist-toggle { gap: .35rem; padding: 0 .65rem; border-color: transparent; background: none; color: var(--ink-2); }
.clog-btn:hover, .hist-toggle:hover, .clog-btn[aria-expanded="true"] { border-color: transparent; background: var(--blue-wash); color: var(--blue); }
.clog-btn svg, .hist-toggle svg { width: .85rem; height: .85rem; transition: transform var(--t) var(--ease); }
.clog-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.clog-btn .lbl-short { display: none; }
.hist-closed .clog-wrap { display: none; }
.hist-closed .hist-toggle svg { transform: rotate(180deg); }
.hist-body { display: grid; grid-template-rows: 1fr; border-top: 1px solid var(--line); transition: grid-template-rows var(--t-slow) var(--ease), border-color var(--t) var(--ease); }
.hist-closed .hist-body { grid-template-rows: 0fr; border-top-color: transparent; }
.hist-instant .hist-body { transition: none; }
.hist-clip { min-height: 0; overflow: hidden; }
.hist-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem clamp(1.6rem, 3.2vw, 4rem); align-items: start; padding: 1.15rem 1.1rem 0; }
.hist-clip > .rs { margin: .1rem 1.1rem .7rem; }
.asat { display: grid; gap: .6rem; justify-items: start; align-content: start; width: calc(var(--asat-fs) * 6.5); margin: 0; }
.asat-label { min-width: 4.7em; justify-content: center; font-size: .62rem; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.asat-label.is-from { background: var(--surface); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.asat-roll { font-family: var(--font-pixel); font-size: var(--asat-fs); line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }

/* What changed: the Home Office's statement (or GOV.UK's note), verbatim, then a short computed line. Old and
   new captions share one grid cell and crossfade. The box has one height: a label line, room for two lines of
   statement (95% of them fit; three lines on phones), the computed line. A longer statement, or a table, fades
   out and offers "More", which opens it. */
.wc {
  --wc-lines: 2; --wc-fs: clamp(1rem, .9rem + .26vw, 1.22rem); --wc-lh: calc(var(--wc-fs) * 1.36); --wc-text-h: calc(var(--wc-lines) * var(--wc-lh) + .1rem);
  --wc-calc-h: 1.4rem;
  display: grid; align-content: start; max-width: 74rem; margin: 0; overflow: hidden;
  height: calc(1.5rem + .45rem + var(--wc-text-h) + .5rem + var(--wc-calc-h));
}
.wc.is-open { height: auto; }
.wc-in { grid-area: 1 / 1; min-width: 0; }
.wc-meta { display: flex; align-items: center; gap: .6rem; height: 1.5rem; min-height: 1.55em; margin: 0 0 .45rem; overflow: hidden; white-space: nowrap; font-family: var(--font-mono); font-size: .74rem; line-height: normal; color: var(--ink-2); }
.wc-meta > * { flex: none; }
.wc-meta .tag { font-size: .58rem; }
.wc-meta b { color: var(--ink); font-weight: 500; }
.wc-note { color: var(--ink-3); }
.wc-box { position: relative; }
.wc-text {
  max-height: var(--wc-text-h); margin: 0; padding: .05rem 0 .05rem .95rem; overflow: hidden; border-left: 2px solid var(--blue);
  font-size: var(--wc-fs); line-height: 1.36; letter-spacing: -.01em; font-weight: 500; color: var(--ink); text-wrap: pretty;
}
.wc-in.is-clipped .wc-text { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.7rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 1.7rem), transparent); }
.wc.is-open .wc-text { max-height: none; -webkit-mask-image: none; mask-image: none; }
.wc-more {
  display: none; position: absolute; right: 0; bottom: 0; align-items: center; height: 1.5rem; padding: 0 .55rem; border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--surface); color: var(--blue); cursor: pointer; font-family: var(--font-mono); font-size: .7rem;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.wc-in.is-clipped .wc-more { box-shadow: -.9rem 0 .8rem .1rem var(--surface); }      /* the words run out softly under it */
.wc.is-open .wc-more { box-shadow: none; }
.wc-more:hover { border-color: var(--blue); background: var(--blue-wash); }
.wc-in.is-clipped .wc-more { display: inline-flex; }
.wc.is-open .wc-more { position: static; margin: .45rem 0 0 .95rem; }
.wc-text p { margin: 0 0 .4rem; }
.wc-text > :last-child, .wc-text li > p:last-child { margin-bottom: 0; }
.wc-text ul, .wc-text ol { margin: .15rem 0 .45rem; padding-left: 1.2rem; }
.wc-text ul { list-style: square; }
.wc-text li { margin: .12rem 0; }
.wc-text li::marker { color: var(--blue); }
.wc-text li > p { margin: 0; }
.wc-text.none { color: var(--ink-3); font-weight: 400; border-left-color: var(--line-strong); }
.wc-date { font-family: var(--font-mono); font-size: .68rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
/* A statement with a table (Sudan v3.0: where "15c" is met, by state): the words on the left, the table beside
   them in its own scroller (stacked on narrow screens). */
.wc-text:has(> .wc-tbl) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: start; }
.wc-text:has(> .wc-tbl) > :not(.wc-tbl) { grid-column: 1; }
.wc-text:has(> .wc-tbl) > .wc-tbl { grid-column: 2; grid-row: 1 / span 12; margin: 0; }
.wc-tbl { width: max-content; max-width: 100%; max-height: var(--wc-text-h); margin: .6rem 0 .35rem; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); background: var(--bg); scrollbar-width: thin; }
.wc.is-open .wc-tbl { max-height: 15.5rem; }
.wc-tbl table { border-collapse: collapse; font-family: var(--font-mono); font-size: .74rem; font-weight: 400; line-height: 1.35; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.wc-tbl th, .wc-tbl td { padding: .24rem .8rem .22rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.wc-tbl thead th { position: sticky; top: 0; z-index: 1; background: var(--sunken); font-family: var(--font-pixel); font-weight: 400; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); box-shadow: inset 0 -1px 0 var(--line); }
.wc-tbl tbody th { font-weight: 500; color: var(--ink); }
.wc-tbl td { color: var(--ink-2); }
.wc-tbl tr:last-child > * { border-bottom: 0; }
.wc-tbl tbody tr:hover > * { background: var(--blue-wash); }
.wc-tbl:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The computed line: one line, secondary; the fuller version is its tooltip. */
.wc-calc { --words: .74rem; display: flex; align-items: center; gap: .55rem; height: var(--wc-calc-h); margin: .5rem 0 0; white-space: nowrap; font-family: var(--font-mono); font-size: .74rem; line-height: normal; color: var(--ink-2); }
.wc-calc .tag { flex: none; font-size: .52rem; }
.wc-calc-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wc-calc .rw { font-weight: 500; color: var(--ink); }
.tag--calc { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ni { color: var(--ins); } .nd { color: var(--del); }
a.ref { color: var(--blue); text-decoration: underline; text-decoration-color: var(--blue-line); text-decoration-thickness: 1px; text-underline-offset: .18em; cursor: pointer; transition: background-color var(--t-fast) var(--ease); }
a.ref:hover { text-decoration-color: currentColor; background: var(--blue-wash); }

/* All editions: every edition and update, newest first, in a drop-down under its button. */
.clog-wrap { position: relative; flex: none; }
.clog-wrap[hidden] { display: none; }
.clog {
  position: absolute; z-index: 27; top: calc(100% + .45rem); right: 0; width: min(31rem, calc(100vw - 2 * var(--pad-x) - 2rem)); min-width: 0;
  padding: .8rem 0 0; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); transform-origin: 100% 0;
}
.clog[hidden] { display: none; }
.clog.is-in { animation: pop-in var(--t) var(--ease) both; }
.clog .eyebrow { margin: 0 .85rem .6rem; font-size: .6rem; color: var(--ink-2); }
.clog ol { list-style: none; margin: 0; padding: 0; max-height: min(24rem, 54vh); overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); scrollbar-width: thin; position: relative; }
.clog li { margin: 0; }
.clog button {
  display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); align-items: baseline; gap: .12rem .7rem; width: 100%; text-align: left; font: inherit; color: inherit;
  padding: .55rem .8rem .55rem .75rem; border: 0; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; background: none; cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.clog li:last-child button { border-bottom: 0; }
.clog button:hover { background: var(--sunken); }
.clog button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.clog .cl-v { grid-row: 1 / span 2; font-family: var(--font-pixel); font-size: .78rem; line-height: 1; letter-spacing: .05em; color: var(--ink-2); transition: color var(--t) var(--ease); }   /* on the date's baseline (the row aligns baselines); a 1em line, so the row is no taller for it */
.clog .cl-m { display: flex; flex-wrap: wrap; gap: .2rem .45rem; align-items: center; font-family: var(--font-mono); font-size: .66rem; color: var(--ink-3); }
.clog .cl-m .tag { font-size: .5rem; }
.clog .cl-m > span:empty { display: none; }
.clog .cl-t { font-size: .82rem; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--t) var(--ease); }
.clog .cl-t.none { color: var(--ink-3); }
.clog li.is-ev .cl-v { color: var(--ink-3); font-family: var(--font-mono); position: relative; top: calc(.26em - .355 * .66rem); }   /* the ◇ is drawn about a point .26em above the baseline: moved to the middle of the date's capitals (.355em of their .66rem) */
/* An update whose edition is a PDF only: the row still shows the edition then in force; the PDF's link sits at its foot. */
.clog li.has-pdf { position: relative; }
.clog li.has-pdf button { padding-bottom: 2rem; }
.clog .cl-pdf { position: absolute; left: calc(4.55rem + 2px); bottom: .6rem; font-family: var(--font-mono); font-size: .68rem; color: var(--blue); text-decoration: underline; text-decoration-color: var(--blue-line); text-underline-offset: .18em; }
.clog .cl-pdf:hover { text-decoration-color: currentColor; }
.clog li.is-ev .cl-t { color: var(--ink-3); }
.clog li.in-range button { border-left-color: var(--blue-line); }
.clog li.in-range .cl-v, .clog li.is-old .cl-v { color: var(--blue); }
.clog li.is-new button { border-left-color: var(--blue); background: var(--blue-wash); }
.clog li.is-new .cl-t { color: var(--ink); }
.clog li.is-off button { opacity: .4; cursor: default; }
.clog li.is-off button:hover { background: none; }

/* --- The sticky bar ---------------------------------------------------------------------------------- */
.bar {
  position: sticky; top: var(--stick-top, var(--top-h)); z-index: 25; margin-top: 1.3rem;
  background: color-mix(in oklab, var(--bg) 90%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-block: 1px solid var(--line); transition: box-shadow var(--t) var(--ease);
}
.bar[hidden] { display: none; }
.bar.is-stuck { box-shadow: 0 10px 22px -20px rgb(16 24 40 / .55); }
/* One line, always: the bar never wraps, so it has one height whatever the edition or the pair of editions
   (the less important parts drop out as the window narrows; see the breakpoints at the end). */
.bar-in { display: flex; flex-wrap: nowrap; align-items: center; gap: .55rem .9rem; min-height: 3.3rem; padding: .45rem var(--pad-x); }
.bar-in > * { flex: none; }
.bar-in > .spacer { flex: 1 1 0; min-width: 0; }
.ed-chip { flex: 0 1 auto; display: inline-flex; align-items: center; gap: .5rem; min-width: 0; min-height: 1.55em; overflow: hidden; font-family: var(--font-mono); font-size: .76rem; line-height: normal; color: var(--ink-2); white-space: nowrap; }
.ed-chip > * { flex: none; }
.ed-chip > .ed-when { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ed-chip b { font-family: var(--font-pixel); font-weight: 400; font-size: .86rem; letter-spacing: .05em; color: var(--ink); }
.ed-chip .tag { font-size: .58rem; }
.ed-chip b.ed-date { font-family: var(--font-mono); font-weight: 500; font-size: .78rem; letter-spacing: 0; }   /* an edition with no version number: its date */
.ed-chip .tag.ver { text-transform: none; font-size: .66rem; }
.ed-chip svg { width: .9rem; height: .9rem; color: var(--ink-3); flex: none; }
.ed-when { color: var(--ink-2); }
/* The one way back to the latest edition: beside the edition it leaves, in the bar that stays on screen. */
.latest-mini { min-height: 2.1rem; padding: 0 .8rem; font-size: .74rem; white-space: nowrap; animation: pop-in var(--t) var(--ease) both; }
.latest-mini[hidden] { display: none; }
.latest-mini .lm-short { display: none; }
.ed-chip .tag-s { display: none; }                   /* phones: the short form of "not current guidance" */
/* A rewrite shown as a notice or side by side has no redline: no counts, no stepping, no inline/side-by-side. */
.bar.no-redline .vseg, .bar.no-redline .stats, .bar.no-redline .nav { display: none; }
.cmp { display: none; align-items: center; gap: .5rem .9rem; flex-wrap: nowrap; }
.bar.is-changes .cmp { display: inline-flex; animation: pop-in var(--t) var(--ease) both; }
.vseg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-strong); background: var(--surface); isolation: isolate; }
.vseg button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.15rem; padding: 0 .8rem;
  border: 0; border-radius: 0; background: none; color: var(--ink-2); font-family: var(--font-mono); font-size: .74rem; cursor: pointer; white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.vseg button svg { width: .95rem; height: .95rem; flex: none; }
.vseg button:not([aria-checked="true"]):not(:disabled):hover { color: var(--blue); }
.vseg button[aria-checked="true"] { color: var(--blue-ink); }
.vseg button:disabled { opacity: .45; cursor: not-allowed; }
.vseg-thumb { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 50%; background: var(--blue); transition: transform var(--t) var(--ease); }
.vseg[data-value="sbs"] .vseg-thumb { transform: translateX(100%); }
.stats { display: inline-flex; align-items: baseline; gap: .4rem; font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); white-space: nowrap; }
.stat { display: inline-flex; align-items: baseline; font-weight: 500; padding: .08rem .35rem; }
.stat.ins { color: var(--ins); background: var(--ins-wash); text-decoration: underline; text-decoration-color: var(--ins); text-underline-offset: .2em; }
.stat.del { color: var(--del); background: var(--del-wash); text-decoration: line-through; text-decoration-color: var(--del); }
.stats .dot { color: var(--ink-3); }
.nav { display: inline-flex; align-items: center; gap: .4rem; }
.nav .pos { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-3); min-width: 8.4em; text-align: right; }
.nav .btn { min-height: 2.15rem; padding: 0 .6rem; }
.nav .btn svg { width: 1rem; height: 1rem; }
/* "Show changes": a square switch; on, it fills blue and reads "Hide changes". */
.switch {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.4rem; padding: 0 .9rem 0 .65rem;
  border: 1px solid var(--blue); border-radius: 0; background: var(--surface); color: var(--blue); cursor: pointer;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; white-space: nowrap;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.switch .sw { position: relative; width: 2.15rem; height: 1.15rem; box-shadow: inset 0 0 0 1.5px currentColor; flex: none; }
.switch .sw i { position: absolute; top: 3px; left: 3px; width: calc(1.15rem - 6px); height: calc(1.15rem - 6px); background: currentColor; transition: transform var(--t) var(--ease); }
.switch:hover { background: var(--blue-wash); }
.switch[aria-checked="true"] { background: var(--blue); color: var(--blue-ink); }
.switch[aria-checked="true"] .sw i { transform: translateX(1rem); }
.switch:disabled { border-color: var(--line-strong); color: var(--ink-3); background: var(--surface); cursor: not-allowed; opacity: .7; }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.busy-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); opacity: 0; transition: transform .35s var(--ease), opacity .3s var(--ease); pointer-events: none; }
.bar.is-busy .busy-bar { opacity: 1; }
.doc { transition: opacity var(--t) var(--ease), filter var(--t) var(--ease); }
.doc.is-busy { opacity: .45; filter: saturate(.6); }

/* --- Above the text: which edition, or which comparison ---------------------------------------------- */
/* Only while changes are shown: one line of fixed height (the legend, or how a rewrite is being shown), so the
   text below keeps its place from one pair of editions to the next. Reading an edition, there is no note. */
.edition-note {
  display: flex; align-items: center; gap: .7rem; height: 2.7rem; margin: 0 0 1.6rem var(--gutter); padding: 0 .9rem; overflow: hidden;
  --words: .84rem; border-left: 2px solid var(--blue); background: var(--blue-wash); font-size: .84rem; line-height: normal; color: var(--ink); white-space: nowrap;
}
.edition-note[hidden] { display: none; }
.edition-note .en-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.edition-note .tag, .edition-note .linklike { flex: none; }
.edition-note .tag { font-size: .58rem; }
.edition-note b { font-weight: 600; }
.reader.is-sbs .edition-note { margin-left: 0; }

/* --- A rewrite: a calm notice instead of a wall of marks -------------------------------------------------- */
.rw-notice {
  display: grid; gap: .85rem; justify-items: start; max-width: 46rem; margin: 0 0 4rem; padding: 1.5rem 1.6rem 1.35rem;
  border: 1px solid var(--line-strong); background: var(--surface); animation: rw-in var(--t-slow) var(--ease) both;
}
@keyframes rw-in { from { opacity: 0; filter: blur(4px); } }       /* it fades in where it sits: no lift, nothing jumps */
.rw-notice .tag { font-size: .6rem; }
.rw-notice p { margin: 0; }
.rw-title { font-size: 1.24rem; line-height: 1.4; font-weight: 560; letter-spacing: -.014em; color: var(--ink); text-wrap: pretty; }
.rw-sub { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-2); }
.rw-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .25rem; }
.rw-actions .btn { min-height: 2.5rem; }
.rw-foot { --words: .72rem; display: flex; gap: .6rem; align-items: baseline; padding-top: .9rem; border-top: 1px solid var(--line); width: 100%; font-family: var(--font-mono); font-size: .72rem; line-height: 1.5; color: var(--ink-2); }
.rw-foot .tag { flex: none; font-size: .52rem; position: relative; top: var(--rise); }

.reader.is-notice > .toc, .reader.is-notice > .rail { visibility: hidden; }

/* --- A rewrite read side by side: two clean editions, no marks ------------------------------------------
   The newer edition is in the page's flow; the older one is in a pane beside it that stays on screen and is
   scrolled by reader.js to follow (syncPair): sections with the same heading meet at the top. */
.doc.is-pair .sbs-head { height: 2.6rem; padding: 0; margin-bottom: 0; align-items: center; }
.pv-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: start; }
.pv-pane {
  position: sticky; top: calc(var(--stick-top, var(--top-h)) + var(--bar-h, 0px) + 2.6rem);
  height: calc(100vh - var(--stick-top, var(--top-h)) - var(--bar-h, 0px) - 2.6rem); overflow: hidden;
}
.doc.is-pair .sbs-cell { padding-top: 1.2rem; padding-bottom: 3rem; }
.doc.is-pair .sbs-cell .cv { margin-left: -4rem; padding-left: 4rem; }
.pv-pane .cv { content-visibility: visible; }                 /* laid out once, so the pane's positions are exact */
.doc.is-pair .govspeak > .cv:nth-child(-n+3) { animation: none; }
.pv-switch { display: none; }

/* --- Flash on arrival from a caption reference ------------------------------------------------------- */
.doc .ref-flash { animation: ref-flash 2.5s var(--ease) both; }
@keyframes ref-flash {
  0%, 40% { background-color: color-mix(in oklab, var(--blue) 15%, var(--bg)); box-shadow: -.55rem 0 0 color-mix(in oklab, var(--blue) 15%, var(--bg)), .55rem 0 0 color-mix(in oklab, var(--blue) 15%, var(--bg)); }
  100% { background-color: transparent; box-shadow: -.55rem 0 0 transparent, .55rem 0 0 transparent; }
}

/* --- The redline, in the reading column --------------------------------------------------------------- */
.doc.is-redline p.np { position: relative; }
.doc.is-redline .pn {
  position: absolute; right: calc(100% + 1.15rem); top: 0; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap;
  font-family: var(--font-mono); font-size: .72rem; line-height: calc(var(--doc-fs) * var(--doc-lh)); letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.doc.is-redline .pn ins, .doc.is-redline .pn del { line-height: 1.5; }
.doc.is-redline .rl-anon { margin: 0 0 1.05rem; }
.doc.is-redline ins, .doc.is-redline del, .edition-note ins, .edition-note del, .rail-legend ins, .rail-legend del { padding: .02em .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.doc.is-redline ins, .edition-note ins, .rail-legend ins { background: var(--ins-wash); color: var(--ins); text-decoration: underline; text-decoration-color: var(--ins); text-decoration-thickness: .08em; text-underline-offset: .2em; }
.doc.is-redline del, .edition-note del, .rail-legend del { background: var(--del-wash); color: var(--del); text-decoration: line-through; text-decoration-color: var(--del); text-decoration-thickness: .08em; }
.doc.is-redline del + ins { margin-left: .12em; }
.doc.is-redline a ins, .doc.is-redline a del { color: inherit; }
.doc.is-redline ins::before, .doc.is-redline ins::after, .doc.is-redline del::before, .doc.is-redline del::after { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(100%); white-space: nowrap; }
.doc.is-redline ins::before { content: " [inserted: "; } .doc.is-redline ins::after { content: " ] "; }
.doc.is-redline del::before { content: " [deleted: "; } .doc.is-redline del::after { content: " ] "; }
.doc.is-redline ins:has(> img), .doc.is-redline del:has(> img) { display: inline-block; padding: 0; background: none; }
.doc.is-redline del img { opacity: .5; outline: 2px dashed var(--del); outline-offset: 2px; }
.doc.is-redline ins img { outline: 2px solid var(--ins); outline-offset: 2px; }
/* Block change bars (legal style): changed = blue, added = solid blue, removed = dotted red. */
.doc .chg { position: relative; transition: box-shadow var(--t) var(--ease), background-color var(--t) var(--ease); }
.doc .chg::before { content: ""; position: absolute; left: calc(-.75rem - var(--ind, 0rem)); top: .25em; bottom: .25em; width: 3px; background: var(--bar, var(--blue)); }
.doc .chg.is-mod { --bar: var(--blue); }
.doc .chg.is-added { --bar: var(--ins); }
.doc .chg.is-removed { --bar: repeating-linear-gradient(to bottom, var(--del) 0 3px, transparent 3px 6px); }
.doc .badge.tag { display: inline-flex; align-items: center; margin-left: .45rem; vertical-align: middle; font-family: var(--font-pixel); font-size: .56rem; line-height: normal; color: var(--bg); }
.doc .badge.tag::before { content: none; }
.doc .tag--ins { background: var(--ins); color: var(--bg); }
.doc .tag--del { background: var(--del); color: var(--bg); }
.doc .chg.is-current { background: var(--blue-wash); box-shadow: 0 0 0 .5rem var(--blue-wash), 0 0 0 calc(.5rem + 1px) var(--blue-line); }
.doc .chg.pulse { animation: chg-pulse 1s var(--ease) 1; }
@keyframes chg-pulse {
  0% { box-shadow: 0 0 0 .5rem var(--blue-wash), 0 0 0 calc(.5rem + 1px) var(--blue), 0 0 0 .5rem color-mix(in oklab, var(--blue) 24%, transparent); }
  100% { box-shadow: 0 0 0 .5rem var(--blue-wash), 0 0 0 calc(.5rem + 1px) var(--blue-line), 0 0 0 1.5rem transparent; }
}
.doc tr.chg > :first-child { position: relative; }
.doc tr.chg::before { content: none; }
.doc tr.chg > :first-child::before { content: ""; position: absolute; left: .25rem; top: .45em; bottom: .45em; width: 3px; background: var(--bar, var(--blue)); }
.doc tr.chg.is-current { box-shadow: none; background: none; }
.doc tr.chg.is-current > * { background: var(--blue-wash); }
.doc tr.chg.pulse { animation: none; }
/* "Link changed" marker and its tooltip */
.doc .lc { position: relative; margin-left: .35rem; vertical-align: middle; font-size: .56rem; cursor: help; }
.doc .lc svg { width: 1.05em; height: 1.05em; }
.doc .lc-tip {
  position: absolute; z-index: 30; bottom: calc(100% + .55rem); left: 50%; width: max-content; max-width: min(26rem, 86vw);
  transform: translate(-50%, .3rem) scale(.98); filter: blur(4px); opacity: 0; pointer-events: none;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  padding: .6rem .75rem; font-family: var(--font-text); font-size: .78rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45; white-space: normal; text-align: left;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.doc .lc-tip b { display: block; font-family: var(--font-pixel); font-weight: 400; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: .35rem; }
.doc .lc-tip del, .doc .lc-tip ins { font-family: var(--font-mono); font-size: .92em; word-break: break-all; }
.doc .lc-tip .arrow { color: var(--ink-3); margin: 0 .25rem; }
.doc .lc:hover .lc-tip, .doc .lc:focus .lc-tip, .doc .lc:focus-within .lc-tip { opacity: 1; transform: translate(-50%, 0); filter: none; }
/* Side by side: the reading area widens; each cell keeps a gutter for numbers and the change bar. */
.reader.is-sbs { grid-template-columns: var(--toc-w) minmax(0, 1fr); }
.reader.is-sbs .rail { display: none; }
.reader.is-sbs .center { max-width: none; }
.doc.is-sbs { padding-left: 0; }
.doc.is-sbs .sbs-head {
  position: sticky; top: calc(var(--stick-top, var(--top-h)) + var(--bar-h, 0px)); z-index: 5; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem;
  background: var(--bg); padding: .6rem 0; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-2);
}
.doc.is-sbs .sbs-head > span { display: flex; align-items: center; gap: .55rem; padding-left: 4rem; min-width: 0; white-space: nowrap; line-height: normal; }
.doc.is-sbs .sbs-head b { color: var(--ink); font-weight: 500; }
.doc.is-sbs .sbs-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; margin-bottom: 1rem; content-visibility: auto; }
.doc.is-sbs .sbs-row.warm, .doc.is-sbs .sbs-row:hover, .doc.is-sbs .sbs-row:focus-within { content-visibility: visible; }
.doc.is-sbs .sbs-row[data-h="2"] { margin-top: 1.9rem; }
.doc.is-sbs .sbs-row[data-h="3"] { margin-top: 1.2rem; }
.doc.is-sbs .sbs-cell { position: relative; min-width: 0; max-width: calc(66ch + 4rem); padding-left: 4rem; }
.doc.is-sbs .sbs-cell > :first-child { margin-top: 0; }
.doc.is-sbs .sbs-cell > :last-child { margin-bottom: 0; }
.doc.is-sbs .sbs-cell h2 { padding-top: .8rem; }
.doc.is-sbs .sbs-row.chg { padding-block: .45rem; }
.doc.is-sbs .sbs-row.chg::before { content: none; }
.doc.is-sbs .sbs-row.chg > .sbs-cell:not(.empty)::before { content: ""; position: absolute; left: 3.25rem; top: .25em; bottom: .25em; width: 3px; background: var(--bar, var(--blue)); }
.doc.is-sbs .sbs-cell.empty { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ink) 8%, transparent) 0 6px, transparent 6px 12px); background-clip: content-box; min-height: 1.6rem; }
.doc.is-sbs .sbs-cell > .tbl-scroll:first-child { margin-top: 0; }
.doc.is-sbs .sbs-cell > .footnotes { margin: 0; padding: 0; border: 0; }
.doc.is-sbs .sbs-cell > .footnotes::before { content: none; }
.doc.is-sbs .sbs-cell > ul, .doc.is-sbs .sbs-cell > ol, .doc.is-sbs .sbs-cell > .footnotes > ol { margin: 0; }

/* --- The rail in changes mode: every change, in order --------------------------------------------- */
.rail-legend { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; align-content: center; min-height: 1.55em; line-height: normal; margin: 0 0 .8rem; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-3); }
.chg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.chg-list li { margin: 0; }
.chg-list button {
  display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .1rem .5rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 0;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.chg-list button:hover { background: var(--sunken); }
.chg-list button.is-current { background: var(--blue-wash); box-shadow: inset 2px 0 0 var(--blue); }
.chg-list .cl-k { grid-row: span 2; font-size: .7rem; color: var(--blue); padding-top: .15rem; }
.chg-list .cl-l { font-size: .8rem; line-height: 1.35; }
.chg-list .cl-s { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-3); line-height: 1.4; }
.toc .rm-sec { text-decoration: line-through; text-decoration-color: var(--del); color: var(--ink-3); cursor: default; }
.toc .rm-sec:hover { background: none; color: var(--ink-3); }

/* --- Minimap (../shared/minimap.css): a strip just right of the text, in room the reading column keeps for it,
   so the text keeps its measure on wide screens. Side by side is held to the width of its two columns and
   centred, so the strip stays at the text's edge on 4K too. Wide screens only (the dock takes over below). */
.center { position: relative; }
@media (min-width: 1200px) {
  .center { max-width: calc(var(--measure) + var(--gutter) + var(--mm-space)); padding-right: var(--mm-space); }
  .reader.is-sbs .center { max-width: calc(2 * (66ch + 4rem) + 2rem + var(--mm-space)); }
}
@media (max-width: 1199px) { .minimap { display: none; } }

/* --- Edge strip (phone.js): the minimap's quiet cousin, in the one-column layout. A hairline in the text's left
   margin (the edge of the screen on a phone), from under the sticky bar to the bottom: a tick where each main
   section starts and a marker for the part of the report on screen. Greys only and nothing to press. It takes
   the place of the line under the header there (one sign of progress, not two). */
.edge { display: none; }
@media screen and (max-width: 899px) {
  .progress { display: none; }
  .edge {
    display: block; position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(-1 * var(--pad-x)); width: var(--pad-x);
    overflow: clip; pointer-events: none; transition: opacity var(--t-slow) var(--ease);
  }
  .edge.is-empty { opacity: 0; }
  .edge-stick {
    position: sticky; top: calc(var(--stick-top, var(--top-h)) + var(--bar-h, 0px));
    height: calc(100vh - var(--stick-top, var(--top-h)) - var(--bar-h, 0px));
    height: calc(100dvh - var(--stick-top, var(--top-h)) - var(--bar-h, 0px));       /* follows Safari's toolbar */
    contain: strict;
  }
  /* Clear of the bar above and of the screen's rounded corner (and the home indicator) below. */
  .edge-rail { position: absolute; top: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); left: 0; right: 0; }
  .edge-track { position: absolute; top: 0; bottom: 0; left: 5px; width: 1px; background: var(--line); }
  .edge-ticks i {
    position: absolute; top: 0; left: 3px; width: 5px; height: 1px; background: var(--line-strong); opacity: 0;
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
  }
  .edge-ticks i.on { opacity: 1; }
  .edge-view {
    position: absolute; top: 0; left: 4px; width: 3px; height: 1px; background: var(--ink-3); transform-origin: 0 0; will-change: transform;
    opacity: 0; transition: opacity var(--t) var(--ease);
  }
  .edge-view.on { opacity: 1; }
  .edge.is-settling .edge-view { transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
}

/* --- Responsive ---------------------------------------------------------------------------------------- */
@media (max-width: 1599px) {
  .bar.is-changes .ed-when { display: none; }            /* the dates are the version tags' tooltips */
}
@media (max-width: 1279px) {
  .bar.is-changes .nav .pos, .bar.is-changes .stats .stat-w, .bar.is-changes .stats .dot, .bar.is-changes .stats > span:last-child { display: none; }
  .bar.is-changes .nav .btn .lbl { display: none; }
  .bar.is-changes .latest-mini .lm-long { display: none; }
  .bar.is-changes .latest-mini .lm-short { display: inline; }
}
@media (max-width: 1199px) {
  .wc-text:has(> .wc-tbl) { display: block; }
  .wc-text:has(> .wc-tbl) > .wc-tbl { margin: .5rem 0 .2rem; }
}
@media (max-width: 899px) {
  .bar.is-changes .stats { display: none; }
  .masthead { padding-top: 1.2rem; }
  .mh-row { gap: 1rem; align-items: start; }
  /* The line about the edition, then the chips on a line of their own (both of fixed height). */
  .mh-meta { display: grid; gap: .35rem; }
  .mh-chips { justify-self: start; position: static; flex-wrap: wrap; max-width: 100%; }
  .mh-id { position: relative; }
  .hpop { left: 0; right: auto; width: min(27rem, 100%); transform-origin: 0 0; }
  #verbatimChip { order: -1; }                                    /* first, so it keeps its place when the Sources chip changes width */
  .report-title { font-size: clamp(1.75rem, 7.4vw, 2.6rem); }
  .bar-in { gap: .45rem .6rem; padding-block: .35rem; }
  .ed-chip .ed-when { display: none; }
  .vseg { display: none; }
  .stats .stat-w, .stats .dot, .stats > span:last-child { display: none; }
  .nav .pos { display: none; }
  .nav .btn .lbl { display: none; }
  .switch { padding: 0 .7rem 0 .55rem; min-height: 2.6rem; }
  .doc.is-redline { padding-left: .95rem; }
  .doc.is-redline .pn { position: static; display: inline; margin-right: .5em; color: var(--blue); font-size: .78rem; line-height: inherit; }
  .doc.is-redline .cv { margin-left: -.95rem; padding-left: .95rem; }
  .edition-note { margin-left: 0; }
  .hist-head { padding: .6rem .8rem; }
  /* The date above the caption, both full width. */
  .hist-grid { grid-template-columns: minmax(0, 1fr); padding: .9rem .8rem 0; }
  .asat { display: flex; align-items: center; gap: .8rem; width: auto; }
  .hist-clip > .rs { margin-inline: .8rem; }
  /* Side by side becomes one edition at a time, with a switch that stays in view. */
  .reader.is-sbs { grid-template-columns: minmax(0, 1fr); }
  .doc.is-pair .sbs-head { display: none; }
  .pv-switch {
    position: sticky; top: calc(var(--stick-top, var(--top-h)) + var(--bar-h, 0px)); z-index: 5; display: grid; grid-template-columns: 1fr 1fr;
    margin: 0 0 1.2rem; background: var(--bg); border: 1px solid var(--line-strong);
  }
  .pv-switch button {
    display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.7rem; padding: 0 .6rem; border: 0; border-radius: 0; background: none;
    color: var(--ink-2); cursor: pointer; font-family: var(--font-mono); font-size: .74rem; white-space: nowrap; overflow: hidden;
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  .pv-switch button + button { border-left: 1px solid var(--line-strong); }
  .pv-switch button b { font-weight: 500; color: inherit; }
  .pv-switch .tag { font-size: .54rem; }
  .pv-switch button[aria-checked="true"] { background: var(--blue-wash); color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); }
  .pv-cols { display: block; }
  .pv-pane { position: static; height: auto; overflow: visible; }
  .doc.is-pair .sbs-cell { max-width: none; padding: 0; }
  .doc.is-pair .sbs-cell .cv { margin-left: 0; padding-left: 0; }
  .pv[data-show="new"] .pv-pane, .pv[data-show="old"] .sbs-cell.new { display: none; }
  .rw-notice { padding: 1.2rem 1.1rem 1.1rem; }
  .rw-title { font-size: 1.12rem; }
}
@media (max-width: 599px) {
  .bar.is-changes .latest-mini { display: none; }        /* no room beside the step buttons: "Hide changes", then "Latest" */
  .dotflag--hero { width: 3.6rem; }
  .hpop { width: calc(100vw - 2 * var(--pad-x)); margin-left: calc(-3.6rem - 1rem); }      /* the full width, from under the flag */
  .mh-row > .mh-id:first-child .hpop { margin-left: 0; }
  .hist-head { flex-wrap: wrap; }
  .hist-count { flex-basis: 100%; order: 5; }
  .hist-head .spacer { display: none; }
  .clog-wrap { position: static; margin-left: auto; }
  .clog { left: .8rem; right: .8rem; width: auto; top: calc(100% - .4rem); }
  .clog-btn .lbl-long { display: none; }
  .clog-btn .lbl-short { display: inline; }
  .hist-toggle .lbl { display: none; }
  .history { --asat-fs: 1.9rem; }
  .wc { --wc-fs: 1rem; --wc-lines: 3; --wc-calc-h: 2.5rem; }
  /* The computed line may take two lines here (its height is still fixed). */
  .wc-calc { align-items: baseline; line-height: 1.25rem; }
  .wc-calc .tag { position: relative; top: var(--rise); }           /* on the first line's baseline, level with its capitals */
  .wc-calc-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .meta-line .m-l { display: none; }
  .meta-line .m-s { display: inline; }
  .switch .sw-lbl { font-size: .74rem; }
  .ed-chip .tag-x, .latest-mini .lm-long { display: none; }
  .ed-chip .tag-s { display: inline; }
  .ed-chip { gap: .35rem; }                           /* room for "Not current" beside the version */
  .bar-in { column-gap: .4rem; }
  .latest-mini .lm-short { display: inline; }
  .latest-mini { padding: 0 .6rem; font-size: .7rem; }
  .edition-note { --words: .78rem; font-size: .78rem; gap: .5rem; padding: 0 .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hist-body { transition: none; }
}
@media print {
  .history, .bar, .edition-note, .mh-chips { display: none !important; }
}

/* ---- an edition that is not the guidance in force ----
   The whole page's blue turns to grey (boxes, tags, title, links), eased so it does not snap. Inserted words in
   a comparison keep the blue: there the colour means "added", not "current". */
@property --blue { syntax: "<color>"; inherits: true; initial-value: #2a3cf5; }
:root { transition: --blue .35s ease; }
:root[data-outdated] { --ins: #2a3cf5; --blue: #5d6675; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-outdated] { --ins: #6b7cff; --blue: #9aa3b2; } }
:root[data-theme="dark"][data-outdated] { --ins: #6b7cff; --blue: #9aa3b2; }
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }
/* The one way back to the guidance in force keeps the blue: on a grey page it is the thing to press. */
:root[data-outdated] .latest-mini { --blue: var(--ins); }

/* Touch link previews stay open until dismissed or followed. */
.lk-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0 0; }
@media (max-width: 600px) {
  .link-card--tap { position:fixed; left:12px!important; right:12px; top:auto!important; bottom:max(12px,env(safe-area-inset-bottom)); width:auto; max-width:none; max-height:70vh; overflow:auto; }
}