* { box-sizing: border-box; }
/* Typography follows the following rules:
  1. body text 15-25px
  2. line spacing 120%-140%
  3. 45-90 characters line length
  4. Kerning explicitly set
  5. Ligatures explicitly set */
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 17px; line-height: 1.45;
  font-kerning: normal; font-variant-ligatures: common-ligatures contextual;
}
.previewbar {
  background: var(--bar-bg); color: var(--bar-fg); font-family: var(--sans); font-size: 12px;
  padding: 6px 20px; display: flex; gap: 14px; align-items: center;
}
.previewbar a { color: var(--bar-link); }
.page { max-width: 980px; margin: 0 auto; padding: 26px 20px 60px; }
h1 { font-size: 22px; margin: 0 0 10px; font-family: var(--sans); }
h2 { font-size: 17px; margin: 30px 0 8px; border-bottom: 2px solid var(--border); padding-bottom: 4px; font-family: var(--sans); }
h3 { font-size: 15px; margin: 22px 0 6px; font-family: var(--sans); color: var(--fg); }
h4, h5, h6 { font-size: 14px; margin: 16px 0 4px; font-weight: 600; font-family: var(--sans); }
p { margin: 0 0 13px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.breadcrumb { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.verify-badge { display: inline-block; font-family: var(--sans); font-size: 11.5px; padding: 2px 9px; border-radius: 0; margin-bottom: 18px; }
.verify-full { background: var(--verify-full-bg); color: var(--done); }
.verify-partial { background: var(--verify-partial-bg); color: var(--flagged); }
.verify-none { background: var(--verify-none-bg); color: var(--pending); }
.section-list { list-style: none; padding-left: 0; margin: 0 0 10px; }
.section-list li { padding: 3px 0; font-family: var(--sans); font-size: 14px; }
.section-nav { margin-top: 32px; padding-top: 14px; border-top: 2px solid var(--border); font-family: var(--sans); font-size: 13px; }

/* SECTION BODY
  Two-column grid.
  Column 1 = provision text
  Column 2 = margin note text
  Provisions have identifying numbers (e.g. '(1)' or similar. These are often indented to the left of the text itself.
  That indentation follows the same structure as the PDF legislation.
  In order to represent this, a provisoin has a sub-grid (two-columns).
  The provision sub-grid ensures the layout is done correctly. 
  */
.provisions { display: grid; grid-template-columns: minmax(0, 1fr) 190px; column-gap: 24px; }
.prov {
  --label: 2.4em;
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  align-items: baseline;
  font-family: var(--reading);
  font-size: var(--prov-size, 19px);
  line-height: 1.42;
  margin: 0 0 11px calc(var(--depth, 0) * 1.37em);
  max-width: calc(34em + var(--label));
}
/* Always the second column, so a provision with no number of its own
   still lines its text up with a numbered sibling's rather than starting
   under the numbers. */
.prov-text {
  grid-column: 2;
  /* A line break in the stored text now only ever means one: a printed
     list item, or the end of a paragraph in an Explanatory Memorandum.
     The PDF's own wrapping is gone (see extract.join_printed_line), so
     what is left is deliberate and is shown. */
  white-space: pre-line;
  /* Text is justified with hyphenation to avoid awkward gaps. */
  text-align: justify;
  hyphens: auto;
}
.prov-num { padding-right: 0.5em; }
/* A list item whose source prints a bullet instead of a number (an
   Explanatory Memorandum's lists are set that way -- see em_parser.py).
   The marker is a grid item of its own, so it lands in the number's
   column like any other label. */
.prov-paragraph.prov-nolabel::before,
.prov-subparagraph.prov-nolabel::before,
.prov-sub_subparagraph.prov-nolabel::before {
  content: "•";
  grid-column: 1;
  padding-right: 0.5em;
  color: var(--muted);
}
/* A defined term isn't a number in a margin -- it is the first words of
   its own sentence, set in italics where the drafting convention
   introduces it -- so it sits inside the text column with the rest of the
   definition, lining up with the section's lead-in above it rather than
   starting half an inch to its left. Italic alone, never italic *and*
   bold: two emphases at once is one more than the text needs, and a
   defined term is already announced by being defined. */
.prov-term { font-style: italic; }
/* A table printed in the Act. It spans both of the provision grid's
   columns rather than sitting in the text column: a table's own columns
   need the width, and it has no number to hang in the margin. The measure
   rule that governs prose doesn't apply to it either -- what the cells
   need is to line up. */
.prov-table { max-width: none; }
.prov-table > table {
  grid-column: 1 / -1;
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92em;
  text-align: left;
}
.prov-table caption {
  caption-side: top;
  text-align: left;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 6px;
}
.prov-table th,
.prov-table td {
  border-top: 1px solid var(--border);
  padding: 7px 14px 7px 0;
  vertical-align: top;
  hyphens: auto;
}
.prov-table th { font-weight: 600; border-bottom: 1px solid var(--fg); border-top: none; }
.prov-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }

/* The penalty for an offence. The Act sets it under the provision
   creating the offence, on its own, and it reads as a separate
   statement rather than a continuation of the sentence above -- so it is
   marked off by a rule rather than left to look like one more paragraph.
   Not justified: it is short, and often a list of limbs ("in the case of
   an individual...; in the case of a body corporate..."), which
   justification would stretch into gaps. */
.prov-penalty > .prov-text {
  border-left: 2px solid var(--border);
  padding-left: 12px;
  text-align: left;
  font-size: 0.94em;
}
.prov-heading {
  display: block;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  margin: 20px 0 8px calc(var(--depth, 0) * 26px);
}
.prov-heading .prov-num { padding-right: 0; }
.prov-notes { font-family: var(--sans); font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.hist-note { display: block; margin-bottom: 5px; }
/* A note the parser placed by proximity rather than by an explicit
   citation -- flagged so a reader can tell a guess from a certainty. */
.hist-note.low { border-left: 2px solid var(--border); padding-left: 6px; font-style: italic; }

/* Endnotes page: the Table of Amendments as a table. */
.index-nav { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin: -8px 0 18px; }
/* Which version this pipeline's own parse of the Act is, stated
   plainly under its title -- the first thing a reader needs to know,
   and never claimed as "the Authorised Version" itself. */
/* A Bill and its Explanatory Memorandum, offered from the Act's own
   contents. They are about this Act rather than publications beside it,
   which is why they are here and not on the site's front page. */
.related { margin-top: 26px; }
.related h2 { margin-bottom: 8px; }
.related-kind { font-size: 12.5px; color: var(--muted); }
.act-version { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin: -6px 0 14px; }
.endnote-text { margin-bottom: 18px; }
.endnote-text p { margin: 0 0 11px; }
/* Only an Act parsed before the endnote block builder existed falls
   back to this: its text still carries the source PDF's own wrap
   points, so honouring them beats running every line together. */
.endnote-raw { white-space: pre-line; }
.endnote-heading { font-family: var(--sans); font-weight: 600; font-size: 13.5px; margin: 18px 0 7px; }
.endnote-bullets { margin: 0 0 11px; padding-left: 20px; }
.endnote-bullets li { margin-bottom: 9px; }
/* A provision the endnotes reproduce verbatim -- the Act's own words, not
   the endnote's commentary about them. */
.endnote-quote {
  /* The Act's own words again, so the same reading settings as .prov. */
  font-family: var(--reading); font-size: 19px; line-height: 1.42; max-width: 34em;
  margin: 0 0 11px; padding: 2px 0 2px 14px;
  border-left: 3px solid var(--border); color: var(--fg);
}
/* The first line of a reproduced provision is its own heading ("64 How
   appeal is commenced"), the way the printed page sets it. */
.endnote-quote p:first-child { font-weight: 600; }
.endnote-quote p:last-child { margin-bottom: 0; }
.endnote-aside { font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.amend { border-top: 1px solid var(--border); padding: 12px 0 4px; }
.amend-head { font-family: var(--sans); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.amend-cite {
  display: inline-block; font-weight: 500; font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 0; padding: 1px 8px; margin-right: 8px;
}
.amend-fields { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 2px 14px; margin: 0 0 8px; font-family: var(--sans); font-size: 12.5px; }
.amend-fields dt { color: var(--muted); }
.amend-fields dd { margin: 0; }
.amend-provisions { font-family: var(--sans); font-size: 12.5px; }
.amend-provisions summary { cursor: pointer; color: var(--accent); }
.amend-prov-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.amend-prov { font-size: 11.5px; border: 1px solid var(--border); border-radius: 0; padding: 1px 6px; color: var(--fg); }
a.amend-prov:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.amend-more { font-size: 11.5px; color: var(--muted); align-self: center; }
/* The citation inside a margin note, linked to that Act's own entry
   in the Endnotes. Inline, so the note still reads as the one line
   the source prints; the Act's full name and dates are in the link's
   title. */
.hist-act { color: var(--accent); text-decoration: none; border-bottom: 1px dotted currentColor; }
.hist-act:hover { text-decoration: none; border-bottom-style: solid; }
/* A citation detected but not resolved to anything more specific --
   see html_view._linked_citation_html. Muted rather than accent-
   coloured, so it doesn't read as confidently as a citation this
   pipeline actually knows the name of. */
.hist-act.unresolved { color: var(--muted); border-bottom-style: dashed; }
.hist-act.unresolved:hover { color: var(--accent); }

/* "Explained in" chips under a Section's title: the Bill clause it
   was enacted from, and the Explanatory Memorandum's note on it.
   Ordinary links, so the hover preview above reads them like any
   other -- which is the whole point, since the question ("what does
   the EM say about this?") is one a reader wants answered without
   leaving the section. */
.crossrefs { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: -4px 0 20px; font-family: var(--sans); }
.crossrefs-label { font-size: 11.5px; color: var(--muted); }
.crossref {
  font-size: 11.5px; padding: 2px 9px; border-radius: 0;
  border: 1px solid var(--border); background: var(--panel); color: var(--fg);
}
.crossref:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.crossref-em { border-style: dashed; }

/* A provision's timeline -- see render_timeline. Collapsed by default:
   the summary answers "has this changed, and when last?" without
   opening it, which is the question most readers actually have, and
   the words that moved are one click away for the ones who want
   them. */
.timeline { margin: 0 0 20px; font-family: var(--sans); }
.timeline-summary {
  cursor: pointer; font-size: 12.5px; padding: 6px 10px;
  border: 1px solid var(--border); border-left: 3px solid var(--flagged);
  border-radius: 0; background: var(--panel); color: var(--fg);
}
.timeline-summary:hover { border-color: var(--accent); }
.timeline[open] .timeline-summary { border-radius: 0; }
.tl-count { color: var(--muted); }
.tl-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-top: none; }
.tl-entry { padding: 10px 12px; border-top: 1px solid var(--border); }
.tl-entry:first-child { border-top: none; }
.tl-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.tl-version { font-size: 12.5px; font-weight: 600; }
.tl-verb {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 1px 7px; border-radius: 0; background: var(--verify-none-bg); color: var(--muted);
}
.tl-inserted .tl-verb { background: var(--ins-bg); color: var(--ins-fg); }
.tl-repealed .tl-verb { background: var(--del-bg); color: var(--del-fg); }
.tl-notes { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.tl-note { display: block; }
/* "Not comparable yet" is not "nothing changed" -- see
   render_timeline. Set as a quiet notice rather than a warning: it is
   about this tool's own state, not about the law. */
.timeline-unavailable {
  font-family: var(--sans); font-size: 12.5px; color: var(--muted);
  border-left: 2px solid var(--border); padding: 6px 10px; margin: 0 0 14px;
}
.tl-diff {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
  max-height: 20em; overflow-y: auto;
}
/* Words that arrived, and words that went. A deletion is struck through
   as well as coloured: colour alone says "this is different" and leaves
   which direction to inference, and on a page about what an Act used to
   say that inference is the whole point. The strike is the Act's own
   convention for it. */
.d-ins { background: var(--ins-bg); color: var(--ins-fg); text-decoration: none; padding: 0 2px; border-radius: 0; }
.d-del {
  background: var(--del-bg); color: var(--del-fg); padding: 0 2px; border-radius: 0;
  text-decoration: line-through; text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, var(--del-fg) 70%, transparent);
}

/* The notice on a reprint that's no longer the law. Deliberately loud
   and at the top of the page: a reader on a superseded version is
   reading the wrong law, and that's worth interrupting them for. */
.supersede {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  background: var(--warn-bg); border: 1px solid var(--warn-border); border-left-width: 3px;
  border-radius: 0; padding: 8px 12px; margin: 0 0 16px;
}
.supersede-link { white-space: nowrap; }

/* The published site's standing caveat -- this is a machine's reading of
   the law, not the law. Same tokens and shape as .supersede above: both
   say "before you trust this text, know something about it", so they
   shouldn't compete for a reader's attention by looking different. Sits
   first in the page body, before the heading, so it is read rather than
   scrolled past. */
.disclaimer {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.55;
  background: var(--warn-bg); border: 1px solid var(--warn-border); border-left-width: 4px;
  padding: 12px 16px; margin: 0 0 26px;
}
.site-footer {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--muted);
  border-top: 2px solid var(--border); margin-top: 44px; padding-top: 16px;
}
.site-footer p { margin: 0 0 10px; }
.site-footer p:last-child { margin-bottom: 0; }

/* Sits above the provisions, out of the reading column: useful, not
   competing with the text it copies. */
.copy-section {
  font-family: var(--sans); font-size: 12.5px;
  color: var(--fg); background: var(--panel);
  border: 1px solid var(--border); border-radius: 0;
  padding: 4px 10px; margin: 0 0 14px; cursor: pointer;
}
.copy-section:hover { border-color: var(--accent); color: var(--accent); }


/* Hover preview card -- see PREVIEW_SCRIPT. Positioned in page
   coordinates (not fixed) so it scrolls with the link it belongs to. */
.linkpeek {
  position: absolute; z-index: 40; display: none;
  width: min(420px, 90vw); max-height: 340px; overflow-y: auto;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 0;
  padding: 12px 14px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  font-size: 13.5px; line-height: 1.55;
}
.linkpeek.open { display: block; }
.linkpeek .peek-title { font-family: var(--sans); font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.linkpeek .peek-sub { font-family: var(--sans); font-size: 11.5px; color: var(--muted); margin-bottom: 9px; }
.linkpeek .prov { --label: 2.2em; margin: 0 0 7px calc(var(--depth, 0) * 16px); max-width: none; }
/* Ragged right in a card this narrow: justifying a 40-character measure
   is where rivers open up whatever the hyphenation. */
.linkpeek .prov-text { text-align: left; }
.linkpeek .prov:last-child { margin-bottom: 0; }

.linkpeek .peek-more {
  position: sticky; bottom: -12px;   /* cancels the card's own bottom padding */
  background: var(--panel);
  font-family: var(--sans); font-size: 11.5px; color: var(--muted);
  margin-top: 9px; padding: 7px 0 12px; border-top: 1px solid var(--border);
}
.linkpeek .peek-loading { font-family: var(--sans); font-size: 12px; color: var(--muted); }

/* The site's own bar: where you are in it, and the way back out. Sticky
   because both are wanted from part-way down a long provision, not only
   from the top of one -- and slim enough that keeping it costs little.
   --header-h is what the outline's own sticky offset is measured from, so
   the two never cover each other. */
:root { --header-h: 41px; }
.siteheader {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 20px; background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
}
.home {
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--fg);
}
.home:hover { color: var(--accent); text-decoration: none; }
.theme-toggle {
  margin-left: auto;
  border: 1px solid var(--border); background: var(--panel); color: var(--fg);
  border-radius: 0; padding: 4px 9px; cursor: pointer; font-size: 13px;
  font-family: var(--sans);
}

/* Below the width the two columns need, the margin notes fold in
   underneath their provision instead of being squeezed into an
   unreadable strip. */
@media (max-width: 720px) {
  .provisions { display: block; }
  .prov-notes { padding-left: 12px; margin: -4px 0 12px; }
  /* A table's columns can't be made narrower than their words. On a
     phone it scrolls itself rather than making the whole page scroll
     sideways. */
  .prov-table { overflow-x: auto; }
  .prov-table > table { min-width: 30em; }
}

/* Justification needs a measure to work with. On a phone the column is
   nearer 35 characters than the 45 Butterick's rules put at the bottom of
   the range, and justifying at that width opens gaps wide enough to read
   as a fault in the text. Ragged right instead. */
@media (max-width: 560px) {
  .prov-text { text-align: left; }
}