:root {
  /* "Kartka" (T32): warm paper, ink, one red accent. Text pairs are checked in docs (contrast script).
     Every colour is light-dark(light, dark) (T37, T39): dark is warm dark paper, light warm ink, the red
     lightened to stay readable; text pairs 4.5:1 or better, outlines and lines 3:1. The scheme follows the
     system until the header toggle sets data-theme (theme.js). */
  --page: light-dark(#faf7f0, #1a1714);
  --sheet: light-dark(#fffdf8, #23201b);
  --ink: light-dark(#1c1917, #efe8da);
  --muted: light-dark(#5c564e, #b5ac9c);
  --rule: light-dark(#e2dccd, #3a342b);
  --field-border: light-dark(#8a8272, #8c8474); /* inputs and buttons: 3:1 against the paper (WCAG 1.4.11) */
  --link: light-dark(#8f1d24, #f0928d);
  --link-hover: light-dark(#6f161c, #ffbab5);
  --seal: light-dark(#b4232a, #e8706b);
  --accent: var(--seal);
  --footer-bg: light-dark(#f1ebdc, #12100d);
  --footer-ink: light-dark(#4f4a42, #b8afa0);
  --on-accent: light-dark(#fffdf8, #1a1714);
  --added: light-dark(#1d6a39, #62c183);
  --removed: light-dark(#a3262a, #f2918c);
  --caution: light-dark(#7d5200, #e8b14d);
  --caution-bg: light-dark(#fbf0d4, #33291a);
  --branch: light-dark(#2f66b3, #82b3f2); /* light: 4.86:1 on --info-bg */
  --branch-line: light-dark(#4a84d4, #5b97e6);
  --bill: light-dark(#6c45a8, #bca2f0);
  --bill-line: light-dark(#9068cc, #a68ae6);
  --revision: light-dark(#0e6e6e, #4cc3c3);
  --revision-line: light-dark(#219898, #35b3b3); /* lines: 3:1 against the page */
  --passed: light-dark(#1f7a52, #5ccb98);
  --passed-line: light-dark(#2f9b6b, #3fb98a);
  --info-bg: light-dark(#f3ecdc, #2b261e);
  --target: light-dark(#fdeeb0, #43361a);
  --serif: "Source Serif 4 Variable", "Source Serif Pro", Georgia, serif; /* legal text */
  --display: "Newsreader Variable", "Newsreader", var(--serif); /* headings and titles */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter: 9.5rem;
  /* spacing scale and radius */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --radius: 6px;
  --radius-pill: 999px;
  --band-ink: light-dark(#fff, #1a1714); /* the label on the red band of the source icons */
  --shadow: light-dark(rgb(28 25 23 / 14%), rgb(0 0 0 / 50%));
  /* diff2html reads these. Light: its own defaults (vendor/diff2html), which the data-theme="light" case
     over a dark system needs spelled out; dark: its own set is cold grey-blue and does not suit the paper. */
  --d2h-bg-color: light-dark(#fff, var(--sheet));
  --d2h-border-color: light-dark(#ddd, var(--rule));
  --d2h-dim-color: var(--muted); /* diff line numbers and hunk headers; the vendor grey is 2.1:1 */
  --d2h-line-border-color: light-dark(#eee, var(--rule));
  --d2h-file-header-bg-color: light-dark(#f7f7f7, var(--info-bg));
  --d2h-file-header-border-color: light-dark(#d8d8d8, var(--rule));
  --d2h-empty-placeholder-bg-color: light-dark(#f1f1f1, var(--page));
  --d2h-empty-placeholder-border-color: light-dark(#e1e1e1, var(--rule));
  --d2h-selected-color: light-dark(#c8e1ff, #3a3322);
  --d2h-ins-bg-color: light-dark(#dfd, #1f3a27);
  --d2h-ins-border-color: light-dark(#b4e2b4, #2f5a3b);
  --d2h-ins-highlight-bg-color: light-dark(#97f295, #2f6a3d);
  --d2h-ins-label-color: light-dark(#399839, var(--added));
  --d2h-del-bg-color: light-dark(#fee8e9, #40201f);
  --d2h-del-border-color: light-dark(#e9aeae, #6a3335);
  --d2h-del-highlight-bg-color: light-dark(#ffb6ba, #7a2f33);
  --d2h-del-label-color: light-dark(#c33, var(--removed));
  --d2h-change-del-color: light-dark(#fdf2d0, #40201f);
  --d2h-change-ins-color: light-dark(#ded, #1f3a27);
  --d2h-info-bg-color: light-dark(#f8fafd, var(--info-bg));
  --d2h-info-border-color: light-dark(#d5e4f2, var(--rule));
  --d2h-change-label-color: light-dark(#d0b44c, var(--caution));
  --d2h-moved-label-color: light-dark(#3572b0, var(--branch));
  color-scheme: light dark;
}

/* The header toggle's choice (theme.js); without it the system preference decides. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 1rem/1.5 var(--sans);
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

h1 {
  font: 500 2rem/1.15 var(--display);
  letter-spacing: -0.01em;
}

h2 {
  font: 500 1.375rem/1.25 var(--display);
}

h3 {
  font-size: 1rem;
  font-weight: 600;
}

p {
  margin: 0 0 0.75rem;
}

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

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--sheet);
  padding: 0.5rem 0.75rem;
  z-index: 10;
}

.skip:focus {
  top: 0.5rem;
}

.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --- header and footer ------------------------------------------------------- */

.site-header {
  background: transparent;
}

.site-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.wordmark {
  font: 500 1.5rem/1 var(--display);
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--ink);
}

.wordmark__mark {
  color: var(--seal);
  margin-right: 0.15em;
}

.nav {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--seal);
}

.quick-search {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  flex: 0 1 22rem;
  min-width: 0;
}

.quick-search input {
  flex: 1;
  min-width: 0;
}

main.wrap {
  padding-top: var(--s5);
  padding-bottom: var(--s6);
}

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  font-size: 0.875rem;
  padding: var(--s5) 0 var(--s6);
}

.site-footer p {
  margin: 0 0 0.25rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.75rem;
}

.footer-row .footer-nav {
  margin: 0;
}

.social {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  color: var(--ink);
}

.social a:hover {
  color: var(--ink);
  background: var(--rule);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 1rem;
}

.footer-nav a {
  color: var(--ink);
}

/* the secondary line: Validation and the sync status */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin: var(--s3) 0 0;
}

.footer-meta a {
  color: var(--footer-ink);
}

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

.sync--failed {
  color: var(--removed);
}

.sync__detail {
  display: block;
  color: var(--muted);
}

/* --- forms --------------------------------------------------------------------- */

input[type="search"],
input[type="date"],
textarea,
select {
  font: inherit;
  color: inherit;
  background: var(--sheet);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  max-width: 100%;
}

input[type="search"],
input[type="date"] {
  border-radius: var(--radius-pill);
  padding-left: 1rem;
}

button {
  font: inherit;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--link);
  border: 1px solid var(--link);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1.1rem;
  cursor: pointer;
}

button:hover {
  background: var(--link-hover);
  border-color: var(--link-hover);
}

.button--quiet {
  color: var(--ink);
  background: var(--sheet);
  border-color: var(--field-border);
  font-weight: 400;
}

.button--quiet:hover {
  color: var(--ink);
}

.button--quiet:hover {
  background: var(--page);
}

.site-header__tools {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.language {
  display: flex;
  margin: 0;
}

/* Language and theme toggles: the same small quiet square. */
.lang-toggle,
.theme-toggle {
  min-width: 2.375rem;
  height: 2.375rem;
  padding: 0 0.5rem;
  line-height: 1;
}

.lang-toggle {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Light/dark toggle (theme.js). Hidden until the script has set data-theme; shows the scheme it switches to. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
}

:root[data-theme] .theme-toggle {
  display: inline-flex;
}

.theme-toggle svg {
  display: block;
}

:root[data-theme="light"] .theme-toggle__sun,
:root[data-theme="dark"] .theme-toggle__moon {
  display: none;
}
.search-form,
.compare {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.field label {
  font-size: 0.875rem;
  font-weight: 600;
}

.field--wide {
  flex: 1 1 22rem;
}

/* Search page: the query on its own line, then the choices and the button in one row. */
.search-form .field--wide {
  flex: 1 1 100%;
}

.search-form .field--wide input,
.search-form .field--wide .field__help {
  max-width: 40rem;
}

.field--submit {
  align-self: flex-start;
  padding-top: 1.55rem;
}

.field__help {
  color: var(--muted);
  font-size: 0.8125rem;
  margin: 0;
}

.field__error {
  margin: 0.375rem 0 0;
  color: var(--removed);
  font-size: 0.875rem;
}

/* --- shared bits ----------------------------------------------------------------- */

.lede,
.side__note {
  color: var(--muted);
  max-width: 62ch;
}

.empty {
  color: var(--muted);
  font-style: italic;
}

.notice {
  background: var(--info-bg);
  border-left: 3px solid var(--link);
  padding: 0.75rem 1rem;
  margin: 1.25rem 0;
}

.notice--quiet {
  background: none;
  border-left-color: var(--rule);
  padding: 0.25rem 0.75rem;
}

/* A notice announcing a consolidated text: the way to the act's timeline. */
.notice--consolidated {
  max-width: 62rem;
}

.notice--consolidated p {
  margin: 0 0 0.4rem;
}

.notice--consolidated p:last-child {
  margin-bottom: 0;
}

.notice__title {
  font-family: var(--serif);
  color: var(--muted);
}

.notice__open {
  font-weight: 600;
}

.notice__note {
  color: var(--muted);
}

.disclaimer {
  background: var(--caution-bg);
  border-left: 3px solid var(--caution);
  padding: 0.875rem 1rem;
  margin: 1.25rem 0 2rem;
  max-width: 70ch;
}

.disclaimer p {
  margin: 0;
}

.disclaimer .disclaimer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 0.5rem;
}

.badge,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.8125rem;
  line-height: 1.3;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 3px;
  white-space: nowrap;
}

.badge--in_force,
.badge--parsed {
  color: var(--added);
}

.badge--partial {
  color: var(--caution);
}

.badge--unparsed {
  color: var(--removed);
}

.badge--not_in_force,
.badge--unknown,
.badge--snapshot,
.badge--original,
.badge--consolidated,
.tag--quiet {
  color: var(--muted);
}

/* On an MP's vote: they also signed (or represented) the bill. */
.tag--signed {
  display: flex;
  width: fit-content;
  margin-top: 0.3rem;
  color: var(--ink);
  background: var(--info-bg);
  border-color: var(--rule);
  font-weight: 400;
}

.badge--current {
  color: var(--added);
}

.badge--future {
  color: var(--caution);
}

/* Rebuilt by sejmdiff: the colour of the timeline's branches. */
.badge--reconstructed {
  color: var(--branch);
}

.tag {
  color: var(--link);
}

.stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.stats__added {
  color: var(--added);
}

.stats__removed {
  color: var(--removed);
}

.page-head {
  margin-bottom: 1rem;
}

.page-head__back {
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}

/* MP page: the photo (Sejm API, served by us) beside the name and the facts; shown at its natural size,
   framed like a card. On a phone the facts and the terms go under the photo and the name, full width. */
.mp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "facts" "terms";
  gap: 0 var(--s4);
  align-content: start;
}

.mp-head--photo {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "photo title" "facts facts" "terms terms";
}

.mp-head__title {
  grid-area: title;
  min-width: 0;
}

.mp-head .facts {
  grid-area: facts;
}

.mp-head .mp-terms {
  grid-area: terms;
}

@media (min-width: 47.5rem) {
  .mp-head--photo {
    grid-template-areas: "photo title" "photo facts" "photo terms";
    grid-template-rows: auto auto 1fr;
  }
}

.mp-head__photo {
  grid-area: photo;
  align-self: start;
  position: relative;
  margin: 0;
  padding: var(--s1);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.mp-head__photo img {
  display: block;
  max-width: none;
}

/* the source, set small on the photo's lower edge; light on a dark band reads on any photo */
.mp-head__credit {
  position: absolute;
  inset: auto var(--s1) var(--s1) auto;
  padding: 1px 4px;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  font-size: 0.625rem;
  line-height: 1.4;
}

/* the facts: one grid, label | value | label | value. The personal facts fill the left pair of columns and
   the political ones (.facts__right) the right pair; dense packing puts the n-th of each in row n, so both
   sides of a row are as high as the taller one. On a phone: one pair of columns, personal then political. */
.facts {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) 6.5rem minmax(0, 1fr);
  grid-auto-flow: row dense;
  column-gap: var(--s3);
  margin: 0 0 var(--s2);
  font-size: 0.9375rem;
}

.facts dt,
.facts dd {
  margin: 0;
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule);
}

.facts dt {
  grid-column: 1;
  color: var(--muted);
}

.facts dd {
  grid-column: 2;
}

.facts dt.facts__right {
  grid-column: 3;
}

.facts dd.facts__right {
  grid-column: 4;
}

.facts__note {
  color: var(--muted);
}

.mp-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}

.mp-terms__label {
  width: 8.5rem;
  color: var(--muted);
}

.mp-terms ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mp-terms a {
  display: block;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
}

.mp-terms a:hover {
  border-color: var(--link);
}

.mp-terms a[aria-current] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--page);
  font-weight: 600;
}

@media (max-width: 47.5rem) {
  .facts {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }

  .facts dt.facts__right {
    grid-column: 1;
  }

  .facts dd.facts__right {
    grid-column: 2;
  }

  .mp-terms__label {
    width: 7.5rem;
  }
}

.page-head__act {
  font: 1.0625rem/1.45 var(--serif);
  color: var(--muted);
  max-width: 70ch;
}

/* --- changes feed ---------------------------------------------------------------- */

.feed-layout {
  display: grid;
  gap: 2.5rem;
}

.feed {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.feed__item {
  padding: 1rem 0 1.125rem;
  border-bottom: 1px solid var(--rule);
}

.feed__address {
  font-size: 0.875rem;
  margin-bottom: 0.2rem;
}

.feed__address a {
  color: var(--muted);
}

.feed__title {
  font: 500 1.375rem/1.3 var(--display);
  max-width: 68ch;
  margin-bottom: 0.4rem;
}

.feed__title a {
  color: var(--ink);
  text-decoration: none;
}

.feed__title a:hover {
  text-decoration: underline;
}

.feed__kind {
  font-size: 0.875rem;
  margin-bottom: 0.3rem;
}

.feed__source {
  color: var(--muted);
  font-family: var(--serif);
}

.feed__meta,
.result__meta,
.change__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

.side h2 {
  margin-top: 0.4rem;
}

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

.pending-list li {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--rule);
}

.pending-list a {
  font-family: var(--serif);
}

.pending-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (min-width: 60rem) {
  .feed-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 3.5rem;
  }
}

/* --- search ------------------------------------------------------------------------ */

.result-count {
  color: var(--muted);
}

.results {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.result {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--rule);
}

.result__title {
  font: 500 1.25rem/1.35 var(--display);
  max-width: 70ch;
  margin-bottom: 0.35rem;
}

.result__snippet {
  font-family: var(--serif);
  max-width: 70ch;
  margin-bottom: 0.35rem;
}

mark {
  background: var(--target);
  color: inherit;
  padding: 0 0.1em;
}

.choice {
  border: 0;
  padding: 0;
  margin: 0;
}

.choice legend {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.25rem;
}

.choice label {
  font-weight: 400;
  font-size: 1rem;
}

.pager {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* --- act page ---------------------------------------------------------------------- */

.act-head {
  max-width: 62rem;
}

.act-head__title {
  font: 500 2.25rem/1.15 var(--display);
}

.act-head__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-bottom: 0.4rem;
}

.act-head__address {
  font-size: 0.9375rem;
  color: var(--muted);
  margin: 0;
}

.act-head__type::before {
  content: "/";
  margin: 0 0.4em;
  color: var(--rule);
}

.act-head__status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem 0.75rem;
  margin: 0 0 0 auto;
  font-size: 0.875rem;
}

.act-head__status-text {
  color: var(--muted);
}

.dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 1rem 0;
}

.dates dt {
  font-size: 0.8125rem;
  color: var(--muted);
}

.dates dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.act-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.at-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.at-form label {
  font-size: 0.875rem;
  font-weight: 600;
}

.act-layout {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

.timeline h2 {
  margin-bottom: 0.75rem;
}

/* --- the version timeline, drawn as a branch graph ------------------------------------------
   Official versions are commits on the main line; the versions sejmdiff rebuilds from the
   amending acts published after an official text form a branch that forks from it and merges
   into the next official text. The date column replaces the "In force from" row.
   Lanes sit at fixed offsets from the date column; --shift moves all of them right (16px) when a
   lane for the bills is drawn to their left (graph--bills), and is 0 otherwise. */

.graph {
  --date-w: 4.6rem;
  --graph-w: 2.25rem;
  --shift: 0px;
  --lane-bill: calc(var(--date-w) + 10px);
  --lane-main: calc(var(--date-w) + 10px + var(--shift));
  --lane-branch: calc(var(--date-w) + 26px + var(--shift));
  --lane-revision: calc(var(--date-w) + 42px + var(--shift));
  --node-y: calc(0.3rem + 6px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
}

.graph ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.commit,
.branch {
  position: relative;
}

.commit {
  display: grid;
  grid-template-columns: var(--date-w) var(--graph-w) minmax(0, 1fr);
  padding-bottom: 1rem;
}

/* The main line, through every row; it starts at the first version and ends at the last
   official one. A branch with no official text after it leaves the main line there. */
.graph > li::before {
  content: "";
  position: absolute;
  left: calc(var(--lane-main) - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--link);
}

.graph > .commit--first::before {
  top: var(--node-y);
}

.graph > .commit--last::before {
  bottom: auto;
  height: var(--node-y);
}

.graph > .commit--first.commit--last::before,
.graph > .branch--open::before {
  display: none;
}

/* The branch line, dashed, through each rebuilt version. */
.commit--branch::before {
  content: "";
  position: absolute;
  left: calc(var(--lane-branch) - 1px);
  top: 0;
  bottom: 0;
  border-left: 2px dashed var(--branch-line);
}

.branch--open .commit--branch:last-child::before,
.branch--open .today--branch:last-child::before {
  bottom: auto;
  height: var(--node-y);
}

.commit__date {
  margin: 0;
  padding: 0.1rem 0.4rem 0 0;
  text-align: right;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.commit--selected .commit__date {
  color: var(--ink);
  font-weight: 600;
}

.commit__node {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  width: 12px;
  height: 12px;
  margin: 0.3rem 0 0 calc(4px + var(--shift));
  border-radius: 50%;
  background: var(--link);
  box-shadow: 0 0 0 2px var(--sheet);
}

.commit--branch .commit__node {
  width: 10px;
  height: 10px;
  margin: calc(0.3rem + 1px) 0 0 calc(21px + var(--shift));
  background: var(--sheet);
  border: 2px solid var(--branch-line);
}

.commit--selected .commit__node {
  box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--seal);
}

/* A rebuilt version with no change to the text (a judgment, an act with no instruction for this one): a
   small grey ring, so it reads as a note on the branch rather than a change. */
.commit--branch.commit--unchanged .commit__node {
  width: 8px;
  height: 8px;
  margin: calc(0.3rem + 2px) 0 0 calc(22px + var(--shift));
  border-color: var(--muted);
}

.commit--branch.commit--selected .commit__node {
  background: var(--branch-line);
}

/* A unified text of the Chancellery of the Sejm (T43): not built by sejmdiff and not official, so a
   dashed grey square, on the main line as a group head or on the branch (--field-border is 3.7:1 / 4.4:1
   on the sheet). */
.commit--snapshot .commit__node {
  background: var(--sheet);
  border: 2px dashed var(--field-border);
  border-radius: 2px;
}

.commit--snapshot.commit--selected .commit__node {
  background: var(--field-border);
}

.commit__body {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  padding-left: 0.3rem;
}

.commit__body p {
  margin: 0 0 0.2rem;
}

/* The fork and the merge: curves between the two lanes, in the graph column. */
.branch__curve {
  display: block;
  margin-left: calc(var(--date-w) + var(--shift));
  fill: none;
  stroke: var(--branch-line);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}

.branch__summary {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--date-w) + var(--graph-w) + 0.3rem) minmax(0, 1fr);
  grid-template-rows: 16px auto;
  padding-bottom: 0.4rem;
  cursor: pointer;
  list-style: none;
  color: var(--branch);
}

/* The branch line from the fork down to the first rebuilt version, or to the merge; a branch
   after the last official text ends at its group mark. */
.branch__summary::before {
  content: "";
  position: absolute;
  left: calc(var(--lane-branch) - 1px);
  top: 16px;
  bottom: 0;
  border-left: 2px dashed var(--branch-line);
}

.branch--open .branch__details:not([open]) .branch__summary::before {
  bottom: auto;
  height: 11px;
}

.branch__summary::-webkit-details-marker {
  display: none;
}

.branch__summary .branch__curve {
  grid-column: 1;
  grid-row: 1;
}

/* A collapsed branch: the date of its last change, in the date column. */
.branch__date {
  position: absolute;
  left: 0;
  top: 16px;
  width: var(--date-w);
  padding: 0.1rem 0.4rem 0 0;
  text-align: right;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.branch__details[open] .branch__date {
  display: none;
}

/* A collapsed branch: two hollow dots, one behind the other, for a group of versions. */
.branch__stack {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  width: 12px;
  height: 12px;
  margin: 5px 0 0 calc(var(--lane-branch) - 6px);
  border: 2px solid var(--branch-line);
  border-radius: 50%;
  background: var(--sheet);
  box-shadow: 4px -3px 0 -2px var(--sheet), 4px -3px 0 0 var(--branch-line);
}

.branch__details[open] .branch__stack {
  visibility: hidden;
}

.branch__label {
  grid-column: 2;
  grid-row: 2;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}

.branch__label::before {
  content: "▸ ";
  display: inline-block;
  width: 1em;
}

.branch__details[open] .branch__label::before {
  content: "▾ ";
}

.branch__summary:hover .branch__label,
.branch__summary:focus-visible .branch__label {
  color: var(--ink);
}

/* --- a branch of a branch: the earlier amendments of a version's amending act -------------------------
   An amending act amended before its change took effect is applied in that amended wording (parser 13).
   Its amendments fork from the branch just above the version, each a node in a lane of its own, and the
   lane merges into the version. */

.graph--revised {
  --graph-w: 3.25rem;
}

.revision {
  position: relative;
  display: grid;
  grid-template-columns: var(--date-w) var(--graph-w) minmax(0, 1fr);
  grid-template-rows: 0 auto;
  padding-bottom: 0.6rem;
}

.revision--first {
  grid-template-rows: 14px auto;
}

/* the branch goes on beside them, down to its version */
.revision::before {
  content: "";
  position: absolute;
  left: calc(var(--lane-branch) - 1px);
  top: 0;
  bottom: 0;
  border-left: 2px dashed var(--branch-line);
}

/* the lane of the amendments, from the fork down to the merge */
.revision::after {
  content: "";
  position: absolute;
  left: calc(var(--lane-revision) - 1px);
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--revision-line);
}

.revision--first::after {
  top: 22px;
}

.revision .commit__date {
  grid-column: 1;
  grid-row: 2;
}

.revision__curve,
.revision__merge {
  fill: none;
  stroke: var(--revision-line);
  stroke-width: 2;
}

.revision__curve {
  grid-column: 1 / span 2;
  grid-row: 1;
  align-self: start;
  margin-left: calc(var(--date-w) + var(--shift));
  overflow: visible;
}

.revision__node {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  width: 8px;
  height: 8px;
  margin: calc(0.3rem + 2px) 0 0 calc(38px + var(--shift));
  border-radius: 50%;
  background: var(--revision-line);
  box-shadow: 0 0 0 2px var(--sheet);
}

.revision .commit__body {
  grid-row: 2;
}

.commit__body .revision__kind {
  margin: 0 0 0.1rem;
  font-weight: 600;
  color: var(--revision);
}

/* the merge into the version: from the lane down into the version's node */
.commit--merges .revision__merge {
  position: absolute;
  left: calc(var(--date-w) + var(--shift));
  top: 0;
  overflow: visible;
}

/* --- bills not yet law: one lane left of the main line, and today's row ---------------------------
   Bills before the Sejm and bills passed by it and awaiting the President's signature share one lane,
   to the left of the main line. It forks, with a curve, from the official text in force on the first
   bill's date, and runs down to today's row. Each bill is a diamond on it, at its date; the preview
   is on the version in force today, which the row names. Passed bills are green and filled. */

.graph--bills {
  --shift: 16px;
  --graph-w: 3.25rem;
}

.graph--bills.graph--revised {
  --graph-w: 4.25rem;
}

/* The lane, beside every row from the fork to today's row; a branch with today's row inside it
   carries it on its summary and on the rows before. */
.graph--bills .lane,
.graph--bills .branch--split .branch__summary,
.graph--bills .lane-end {
  background: linear-gradient(var(--bill-line), var(--bill-line)) no-repeat calc(var(--lane-bill) - 1px) 0 / 2px 100%;
}

.graph--bills .lane-end {
  background-size: 2px var(--node-y);
}

.lane__fork {
  position: absolute;
  left: calc(var(--lane-bill) - 1px);
  bottom: 0;
  width: calc(var(--shift) + 4px);
  height: 16px;
  fill: none;
  stroke: var(--bill-line);
  stroke-width: 2;
}

.lane__fork path {
  vector-effect: non-scaling-stroke;
}

.pending {
  position: relative;
  display: grid;
  grid-template-columns: var(--date-w) var(--graph-w) minmax(0, 1fr);
  padding-bottom: 0.8rem;
}

/* A bill's row carries the main line and the branch line only while something below goes on from
   them. */
.graph > .pending::before {
  display: none;
}

.pending.pending--main-on::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(var(--lane-main) - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--link);
}

.pending.pending--branch-on::after {
  content: "";
  position: absolute;
  left: calc(var(--lane-branch) - 1px);
  top: 0;
  bottom: 0;
  border-left: 2px dashed var(--branch-line);
}

.pending .commit__date {
  grid-column: 1;
  grid-row: 1;
}

/* A hollow diamond on the lane: a change not yet in force on any text shown here. */
.pending__node {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  width: 10px;
  height: 10px;
  margin: calc(0.3rem + 1px) 0 0 5px;
  border: 2px solid var(--bill-line);
  background: var(--sheet);
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px var(--sheet);
}

.pending .commit__body {
  grid-row: 1;
}

.commit__body .pending__kind {
  margin: 0 0 0.1rem;
  font-weight: 600;
  color: var(--bill);
}

/* A bill passed by the Sejm, on its way to publication: green and filled (not by colour alone), with
   a tick and where it is now. */
.pending--passed .pending__node {
  border-color: var(--passed-line);
  background: var(--passed-line);
}

.pending--passed .commit__body .pending__kind,
.commit__body .pending__stage {
  color: var(--passed);
}

.commit__body .pending__stage {
  margin: 0 0 0.1rem;
  font-size: 0.8125rem;
}

.commit__body .pending__status {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Today: a row among the versions, with a dashed rule across the lanes. */
.today {
  position: relative;
  display: grid;
  grid-template-columns: var(--date-w) var(--graph-w) minmax(0, 1fr);
  padding-bottom: 1rem;
}

.today::after {
  content: "";
  position: absolute;
  left: var(--date-w);
  width: var(--graph-w);
  top: calc(var(--node-y) - 1px);
  border-top: 2px dashed var(--seal);
}

.today .commit__date {
  grid-column: 1;
  font-weight: 600;
  color: var(--seal);
}

.today .commit__body {
  grid-column: 3;
  padding-left: 0.3rem;
}

.commit__body .today__label {
  margin: 0;
  font-weight: 600;
  color: var(--seal);
}

.graph > .today--last::before {
  bottom: auto;
  height: var(--node-y);
}

.today--branch::before {
  content: "";
  position: absolute;
  left: calc(var(--lane-branch) - 1px);
  top: 0;
  bottom: 0;
  border-left: 2px dashed var(--branch-line);
}

/* A collapsed branch with bills: how many, beside its changes. */
.branch__bills {
  grid-column: 2;
  grid-row: 3;
  padding-left: 1em;
  font-size: 0.8125rem;
  color: var(--bill);
}

.branch__details[open] .branch__bills {
  display: none;
}

.branch__bills::before {
  content: "◇ ";
}

/* The version entry: name and kind on one line, then the source, state, title, notes and actions. */
.version__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
  margin-bottom: 0.1rem;
}

.commit__body .version__name {
  margin: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* The version whose text is shown. */
.version__name--shown {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* "Tekst jednolity" and the like: plain muted text beside the name. */
.version__kind {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* The address and the small PDF/HTML tag on one line. */
.version__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.3rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.version__source {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.commit__body .version__state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
}

.version__state .badge {
  font-size: 0.75rem;
}

.filetag {
  padding: 0 0.25rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.filetag:hover,
.filetag:focus-visible {
  color: var(--link);
  border-color: currentColor;
}

.version__title {
  font-family: var(--serif);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.version__kind--snapshot {
  font-style: italic;
}

.version__snapshot a {
  white-space: nowrap;
}

.version__match {
  color: var(--muted);
  font-size: 0.8125rem;
}

.version__note {
  color: var(--muted);
  font-size: 0.8125rem;
}

.consultation {
  overflow-wrap: anywhere;
}

.version__caution {
  margin: 0 0 0.2rem;
  color: var(--caution);
  font-size: 0.8125rem;
}

.version__caution summary {
  cursor: pointer;
}

.version__caution ul {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
}

/* "Applied 1 of 2 instructions": one line, the full sentence opens under it (and is the tooltip). */
.version__applied summary {
  list-style: none;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

.version__applied summary::-webkit-details-marker {
  display: none;
}

.commit__body .version__applied p {
  margin: 0.25rem 0 0;
}

/* "View | §diff": one quiet row. */
.version__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0;
  font-size: 0.8125rem;
}

.version__actions > * + * {
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--rule);
}

.version__actions .difflink {
  font: 400 0.8125rem/1.5 var(--sans);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--seal);
}

.version__actions .difflink:hover,
.version__actions .difflink:focus-visible {
  text-decoration-thickness: 2px;
}
/* --- source file icons: a sheet with a PDF or HTML band ------------------------------------ */

.sourceicon {
  display: inline-flex;
  flex: none;
  line-height: 0;
  color: var(--muted);
  border-radius: 2px;
}

.sourceicon svg {
  overflow: visible;
}

.sourceicon__sheet {
  fill: var(--sheet);
  stroke: currentColor;
  stroke-width: 1.3;
}

.sourceicon__fold {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.sourceicon__band {
  fill: var(--seal);
}

.sourceicon--html .sourceicon__band {
  fill: var(--link);
}

.sourceicon__label {
  fill: var(--band-ink);
  font-family: var(--sans);
  font-size: 6.2px;
  font-weight: 700;
  text-anchor: middle;
}

.sourceicon:hover,
.sourceicon:focus-visible {
  color: var(--ink);
}

.sourceicon:hover .sourceicon__band,
.sourceicon:focus-visible .sourceicon__band {
  filter: brightness(0.85);
}

.text__heading {
  font-size: 1rem;
  color: var(--muted);
  font-weight: 400;
}

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: 1.25rem 1rem 2rem;
  font: 1.0625rem/1.65 var(--serif);
}

.unit {
  margin: 0;
  scroll-margin-top: 1rem;
}

.sheet > div.unit {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  column-gap: 1.25rem;
  padding: 0.2rem 0.5rem 0.2rem 0;
  border-left: 3px solid transparent;
}

.unit__path {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  padding-top: 0.2rem;
  font: 0.75rem/1.4 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-decoration: none;
}

.unit__path:hover {
  color: var(--link);
  text-decoration: underline;
}

.unit__text {
  grid-column: 2;
  margin: 0;
  max-width: 68ch;
}

.unit--d1 .unit__text {
  padding-left: 1.25rem;
}

.unit--d2 .unit__text {
  padding-left: 2.5rem;
}

.unit--d3 .unit__text {
  padding-left: 3.75rem;
}

.sheet > div.unit:target,
.sheet > div.unit:has(span:target) {
  background: var(--target);
  border-left-color: var(--caution);
}

.unit--plain,
.unit--annex-text {
  margin-left: calc(var(--gutter) + 1.25rem);
  padding: 0.2rem 0;
  max-width: 68ch;
}

.unit--plain {
  margin-bottom: 0.4rem;
}

/* A24: an official text's wording of a unit that takes effect later, after the wording in force */
.sheet > div.unit--future {
  border-left: 3px dashed var(--caution);
  background: var(--caution-bg);
}

.unit--future-label {
  margin: 0.4rem 0 0 calc(var(--gutter) + 1.25rem);
  font: 600 0.75rem/1.4 var(--sans);
  color: var(--caution);
}

.unit--heading {
  font: 600 1.0625rem/1.4 var(--serif);
  text-align: center;
  margin: 2rem 0 1rem calc(var(--gutter) + 1.25rem);
  max-width: 68ch;
}

.unit--annex {
  font: 600 1.0625rem/1.4 var(--serif);
  margin: 2.5rem 0 0.75rem calc(var(--gutter) + 1.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  max-width: 68ch;
}

.unit__heading-label,
.unit__heading-text {
  display: block;
}

.unit--heading .unit__heading-text {
  font-weight: 500;
}

.unit--annex .unit__heading-text {
  font-weight: 400;
}

@media (min-width: 64rem) {
  .act-layout {
    grid-template-columns: 21rem minmax(0, 1fr);
    gap: 2.5rem;
  }

  .timeline {
    position: sticky;
    top: 1rem;
    align-self: start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  .sheet {
    padding: 2rem 2.5rem 3rem 1rem;
  }
}

@media (max-width: 40rem) {
  .sheet > div.unit {
    display: block;
    padding: 0.35rem 0 0.35rem 0.5rem;
  }

  .unit__path {
    display: block;
    justify-self: start;
    text-align: left;
    padding-top: 0;
  }

  .unit--plain,
  .unit--annex-text,
  .unit--heading,
  .unit--annex,
  .unit--future-label {
    margin-left: 0;
  }

  .unit--d1 {
    margin-left: 0.75rem;
  }

  .unit--d2 {
    margin-left: 1.5rem;
  }

  .unit--d3 {
    margin-left: 2.25rem;
  }

  .unit--d1 .unit__text,
  .unit--d2 .unit__text,
  .unit--d3 .unit__text {
    padding-left: 0;
  }
}

/* --- diff page ------------------------------------------------------------------- */

.compare .field {
  flex: 1 1 16rem;
}

.compare .field--submit {
  flex: 0 0 auto;
}

.compare select {
  width: 100%;
}

/* The two versions side by side: each one's details under its selector, the totals under „to”. */
.compare--versions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.compared {
  margin-top: 0.4rem;
}

.compared p {
  margin: 0;
}

.compared__source {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.compared__address {
  font-weight: 600;
}

.compared .compared__title {
  margin-top: 0.2rem;
  font-family: var(--serif);
  color: var(--muted);
  font-size: 0.9375rem;
}

.compared__totals {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin: 0.6rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--rule);
}

@media (max-width: 40rem) {
  .compare--versions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.amending {
  margin-bottom: 2rem;
}

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

.amending__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  max-width: 62rem;
}

.amending__address {
  font-weight: 600;
  font-size: 0.9375rem;
}

.amending__title {
  font-family: var(--serif);
  flex: 1 1 24rem;
}

.amending__date {
  color: var(--muted);
  font-size: 0.875rem;
}

.diff {
  margin-top: 0.75rem;
}

.diff__format {
  display: flex;
  gap: 1.25rem;
  border: 0;
  padding: 0;
  margin: 0 0 0.75rem;
}

.diff__format[hidden] {
  display: none;
}

.patch {
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: 1rem;
  font-size: 0.8125rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Legal units are long single lines: wrap them instead of scrolling sideways. */
.diff__view .d2h-wrapper {
  font-family: var(--serif);
}

.diff__view .d2h-file-header {
  font-family: var(--sans);
  height: auto;
}

.diff__view .d2h-file-name {
  white-space: normal;
}

.diff__view .d2h-diff-table {
  font: 0.9375rem/1.55 var(--serif);
}

.diff__view .d2h-code-linenumber,
.diff__view .d2h-code-side-linenumber {
  position: static;
  vertical-align: top;
  font: 0.75rem/1.55 var(--sans);
  padding-top: 0.2rem;
}

.diff__view .d2h-code-line,
.diff__view .d2h-code-side-line {
  display: block;
  width: auto;
  padding: 0.1rem 0.75rem;
  white-space: normal;
}

.diff__view .d2h-code-line-ctn {
  display: inline;
  width: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Every pair of versions has different labels, so diff2html would always call it a rename. */
.diff__view .d2h-tag {
  display: none;
}

.diff__view .d2h-code-line ins,
.diff__view .d2h-code-line del,
.diff__view .d2h-code-side-line ins,
.diff__view .d2h-code-side-line del {
  display: inline;
}

.diff__view .d2h-file-side-diff {
  overflow-x: hidden;
}

.moved {
  background: var(--info-bg);
  border-left: 3px solid var(--link);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.moved summary {
  cursor: pointer;
  font-weight: 600;
}

.moved__list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.moved__list li {
  padding: 0.3rem 0;
  border-top: 1px solid var(--rule);
}

.moved__paths {
  font-weight: 600;
  font-size: 0.875rem;
  margin-right: 0.5rem;
}

.moved__paths del {
  color: var(--removed);
}

.moved__paths ins {
  color: var(--added);
  text-decoration: none;
}

.moved__text {
  font-family: var(--serif);
  color: var(--muted);
}

.embed {
  margin-top: 2rem;
}

.embed summary {
  cursor: pointer;
  font-weight: 600;
}

.embed label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.embed textarea {
  width: 100%;
  font: 0.8125rem/1.4 var(--mono);
}

.embedded {
  background: var(--sheet);
  padding: 0.75rem;
}

.embedded__head p {
  margin: 0 0 0.35rem;
}

.embedded__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.875rem;
}

.embedded__note {
  color: var(--caution);
  font-size: 0.875rem;
}

/* --- §diff links and blame ------------------------------------------------------------ */

/* „§diff”: the change from the previous version, in the colours of the wordmark. */
.difflink {
  font: 600 1rem/1 var(--display);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.difflink__mark {
  color: var(--seal);
  margin-right: 0.1em;
}

.difflink:hover,
.difflink:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--seal);
}

/* The site's name in running text (brand filter): a red § and the name, in the text around it. */
.brand__mark {
  color: var(--seal);
  margin-right: 0.1em;
}

.blame {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--sheet);
  border: 1px solid var(--rule);
}

.blame__block {
  display: grid;
  gap: 0.25rem 1.25rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.blame__origin {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 0.75rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.blame__kind {
  color: var(--caution);
}

.blame__lines {
  font: 0.9375rem/1.55 var(--serif);
  min-width: 0;
  overflow-wrap: anywhere;
}

.blame__lines p {
  margin: 0 0 0.15rem;
}

@media (min-width: 52rem) {
  .blame__block {
    grid-template-columns: 14rem minmax(0, 1fr);
  }

  .blame__origin {
    flex-direction: column;
  }
}

/* --- validation ------------------------------------------------------------------- */

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 1.5rem 0 2rem;
}

.figures dt {
  font-size: 0.8125rem;
  color: var(--muted);
}

.figures dd {
  margin: 0;
  font: 500 1.75rem/1.2 var(--display);
  font-variant-numeric: tabular-nums;
}

/* --- validation: progress of a rebuild, while one runs -------------------------------------- */

.rebuild {
  max-width: 48rem;
  margin: 1.5rem 0 0;
}

.rebuild__label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.375rem;
  font-variant-numeric: tabular-nums;
}

.rebuild__share {
  font-weight: 600;
}

.rebuild__bar {
  display: block;
  width: 100%;
  height: 0.625rem;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--rule);
  color: var(--link);
  overflow: hidden;
}

.rebuild__bar::-webkit-progress-bar {
  background: var(--rule);
  border-radius: 999px;
}

.rebuild__bar::-webkit-progress-value {
  background: var(--link);
  border-radius: 999px;
}

.rebuild__bar::-moz-progress-bar {
  background: var(--link);
  border-radius: 999px;
}

.rebuild__note {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* --- validation: one table, sections and subsections, explanations on demand ---------------- */

.quality {
  max-width: 48rem;
  margin: 1.5rem 0 2rem;
}

.table.quality tbody th {
  font-weight: 400;
}

.table.quality .quality__section th {
  font-weight: 600;
  background: var(--page);
  padding-top: 0.875rem;
}

.table.quality .quality__sub th {
  padding-left: 1.75rem;
}

.table.quality .quality__sub--deeper th {
  padding-left: 2.75rem;
  color: var(--muted);
}

.table.quality td {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hint {
  position: relative;
  display: inline-block;
  vertical-align: 0.05em;
}

.hint__button {
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: 1px solid var(--field-border);
  border-radius: 50%;
  background: var(--sheet);
  color: var(--muted);
  font: 600 0.6875rem/1 var(--sans);
  cursor: help;
}

.hint__button:hover {
  background: var(--sheet);
  border-color: var(--ink);
  color: var(--ink);
}

.hint__text {
  display: none;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(100% + 0.375rem);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(20rem, 80vw);
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--sheet);
  border-radius: 4px;
  font: 400 0.8125rem/1.4 var(--sans);
  white-space: normal;
  text-align: left;
}

@media (max-width: 40rem) {
  /* On a phone the explanation spans the row instead of floating beside the button. */
  .table.quality th {
    position: relative;
  }

  .table.quality .hint {
    position: static;
  }

  .table.quality .hint__text {
    left: 0.5rem;
    right: 0.5rem;
    top: 100%;
    transform: none;
    width: auto;
    max-width: none;
  }
}

.hint:hover .hint__text,
.hint__button:focus-visible + .hint__text,
.hint__button:focus + .hint__text {
  display: block;
}

.table-scroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sheet);
  font-size: 0.9375rem;
}

.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.table th {
  font-size: 0.8125rem;
  color: var(--muted);
}

.table .table__number {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table__title {
  display: block;
  font-family: var(--serif);
  color: var(--muted);
}

/* The votes of one day under one heading row (MP page, T56). */
.table .table__day th {
  padding-top: 0.875rem;
  background: var(--page);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
}

.table__day-count {
  color: var(--muted);
  font-weight: 400;
}

/* --- pending page ---------------------------------------------------------------- */

.pending-group {
  margin-bottom: 2.5rem;
}

.change:target {
  box-shadow: 0 0 0 3px var(--target);
}

.change {
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.change__title {
  font: 500 1.375rem/1.3 var(--display);
  max-width: 70ch;
}

.change__base {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

.change__head .version__note,
.change__head .version__caution {
  margin: 0.4rem 0 0;
}

.change__subhead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  font-size: 0.9375rem;
  margin-top: 1.25rem;
}

.change__subhead .stats {
  font-weight: 400;
  font-size: 0.875rem;
}

.instructions {
  margin: 0;
  padding-left: 1.5rem;
  max-width: 72ch;
}

.instruction {
  padding: 0.3rem 0;
}

.instruction__state {
  margin-right: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--removed);
}

.instruction--applied .instruction__state {
  color: var(--added);
}

.instruction__text {
  font-family: var(--serif);
}

@media (max-width: 40rem) {
  h1 {
    font-size: 1.5rem;
  }

  .quick-search {
    flex: 1 1 12rem; /* the toggles sit beside it when there is room */
    margin-left: 0;
  }

  .field--submit {
    padding-top: 0;
  }

  .search-form .field,
  .search-form select {
    width: 100%;
  }
}

/* --- corrections of the published act --------------------------------------------- */

/* The acts an amending act amends, with the versions sejmdiff made from it there. */
.amends {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.amends__none,
.amends__day,
.amends__count {
  color: var(--muted);
  font-size: 0.875rem;
}

.amends__count {
  font-weight: normal;
}

/* The heading folds all but the first act (site.js); the title on it says where the list comes from. */
.amends__toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.amends__toggle:hover {
  background: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.amends__toggle::after {
  content: "▾";
  color: var(--link);
  font-size: 0.8em;
}

.amends__toggle[aria-expanded="false"]::after {
  content: "▸";
}

.amends__toggle:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.amends--folded .amends__list > li + li {
  display: none;
}

.amends__list {
  margin: 0;
  padding-left: 1.1rem;
}

.amends__list li {
  margin-bottom: 0.4rem;
}

.amends__title {
  display: block;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.9375rem;
}

.amends__versions,
.amends__none {
  display: block;
}

.amends__versions .difflink {
  margin-left: 0.2rem;
  text-decoration: underline; /* in a line of text it must look like a link */
  text-decoration-color: var(--seal);
}

.corrections {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.corrections__note {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0 0 0.5rem;
}

.corrections__list {
  margin: 0;
  padding-left: 1.1rem;
}

.corrections__title {
  display: block;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.9375rem;
}

/* --- who made it -------------------------------------------------------------------- */

.who {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.who__facts {
  display: grid;
  gap: 0.375rem;
  margin: 0;
}

.who__facts > div {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 0 1rem;
}

.who__facts dt {
  color: var(--muted);
  font-size: 0.875rem;
}

.who__facts dd {
  margin: 0;
  min-width: 0;
}

.who__detail,
.who__club {
  color: var(--muted);
  font-size: 0.875rem;
}

.who__list summary {
  cursor: pointer;
  color: var(--link);
}

.who__list ul {
  columns: 16rem;
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.tally--passed {
  color: var(--added);
}

.tally--failed {
  color: var(--removed);
}

.vote--yes {
  color: var(--added);
}

.vote--no {
  color: var(--removed);
}

.vote--abstain {
  color: var(--caution);
}

.vote--absent,
.vote--no_vote {
  color: var(--muted);
}

/* --- MP vote chart ------------------------------------------------------------- */

.vote-chart {
  /* Validated as a set (dataviz palette check); every row is also labelled, so colour is not alone. */
  --vote-yes: light-dark(#008300, #3fae5f); /* dark: lightened to keep 3:1 against the dark sheet */
  --vote-no: light-dark(#e34948, #ef6a67);
  --vote-abstain: #eda100;
  --vote-no_vote: light-dark(#6250d6, #8c7df0);
  --vote-absent: light-dark(#a2a8b1, #8f949c);
  --vote-vote_valid: light-dark(#2a78d6, #4c93e6);
  --chart-ink: var(--ink);
  --chart-muted: var(--muted);
  --chart-rule: var(--rule);
  --chart-alert: var(--seal); /* an absence on a day without an excuse; 3:1 or better against the sheet */
  margin: 0 0 1rem;
}

.vote-chart__legend {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.vote-chart__legend[hidden] {
  display: none;
}

.vote-chart__arrow {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.375rem;
  border-inline: 5px solid transparent;
  border-bottom: 8px solid var(--chart-alert);
}

.vote-chart__plot {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.vote-chart__plot canvas {
  display: block;
}

.vote-chart__tip {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 0.125rem;
  padding: 0.375rem 0.625rem;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--shadow);
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

.vote-chart__tip[hidden] {
  display: none;
}

.vote-chart__tip strong {
  color: var(--ink);
  font-size: 0.9375rem;
}

.vote-chart__counts {
  width: auto;
  min-width: 18rem;
}

.vote-chart__counts tbody th {
  font-weight: 400;
  font-size: inherit;
  color: var(--ink);
}

.vote-chart__key {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.375rem;
  border-radius: 2px;
  vertical-align: -0.05em;
}

.vote-chart__key--yes { background: var(--vote-yes); }
.vote-chart__key--no { background: var(--vote-no); }
.vote-chart__key--abstain { background: var(--vote-abstain); }
.vote-chart__key--no_vote { background: var(--vote-no_vote); }
.vote-chart__key--absent { background: var(--vote-absent); }
.vote-chart__key--vote_valid { background: var(--vote-vote_valid); }

.blame__who {
  color: var(--muted);
}

@media (max-width: 40rem) {
  .who__facts > div {
    grid-template-columns: 1fr;
  }
}

main > section + section {
  margin-top: 2rem;
}

/* The viewer's change tags („CHANGED”) are English and say nothing the page does not. */
.d2h-tag {
  display: none;
}

/* --- about ------------------------------------------------------------------------------ */

.lede--about {
  font-size: 1.1875rem;
  max-width: 70ch;
}

/* Two columns from tablet width; each column stays near 70 characters. */
.about {
  display: grid;
  gap: 0 3rem;
}

@media (min-width: 52rem) {
  .about {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about__wide {
    grid-column: 1 / -1;
  }
}

.about h2 {
  margin-top: 2rem;
}

.about p {
  max-width: 70ch;
}

.about .disclaimer {
  margin-top: 2.5rem;
  max-width: none;
}

.sources,
.limits {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 40rem) {
  .sources {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .limits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 3rem;
  }
}

.sources__item {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.75rem 1rem;
}

.sources__item h3 {
  margin: 0;
  font-size: 1rem;
}

.sources__item p {
  margin: 0.25rem 0 0;
}

.sources__item .sources__from {
  color: var(--muted);
  font-size: 0.875rem;
  margin-top: 0;
}

.limits li {
  border-left: 3px solid var(--rule);
  padding-left: 0.75rem;
}

/* Pages with one column of text (Contact, Data and API, Privacy). */
.limits--plain {
  grid-template-columns: none;
  max-width: 70ch;
}

@media (min-width: 52rem) {
  .about--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

.about--single .disclaimer {
  margin-top: 2rem;
  max-width: 70ch;
}

/* --- methodology: the flow diagram echoes the timeline (red main line, dashed branch) --- */

.flow {
  margin: 0 0 1.5rem;
  max-width: 28rem;
}

.flow__svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--sans);
}

.flow__main,
.flow__branch {
  fill: none;
  stroke-width: 2;
}

.flow__main {
  stroke: var(--link);
}

.flow__branch {
  stroke: var(--branch-line);
  stroke-dasharray: 5 4;
}

.flow__node {
  fill: var(--link);
}

.flow__dot {
  fill: var(--sheet);
  stroke: var(--branch-line);
  stroke-width: 2;
}

.flow__dot--aside {
  stroke: var(--field-border);
}

.flow__box {
  fill: var(--sheet);
  stroke: var(--rule);
}

.flow__box--aside {
  stroke: var(--field-border);
  stroke-dasharray: 3 3;
}

.flow__title {
  fill: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.flow__sub {
  fill: var(--muted);
  font-size: 13px;
}

.method-steps,
.method-terms {
  max-width: 70ch;
}

.method-steps li {
  margin-bottom: 0.5rem;
}

.method-terms dt {
  font-weight: 600;
  margin-top: 0.75rem;
}

.method-terms dd {
  margin: 0.125rem 0 0;
}

.contact__mail {
  font-size: 1.25rem;
}

.about code {
  font: 0.875em/1.4 var(--mono);
  overflow-wrap: anywhere;
}

.endpoints {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.endpoints li {
  border-left: 3px solid var(--rule);
  padding-left: 0.75rem;
  display: grid;
  gap: 0.125rem;
}

.endpoints span {
  color: var(--muted);
}

/* --- links to the source of the act's data and of each version ------------------------------- */

.sourcelink {
  font-size: 0.8125rem;
  white-space: nowrap;
}

.text__heading .sourceicon {
  margin-left: 0.4rem;
  vertical-align: -0.4em;
}

.compared .compared__link {
  margin-top: 0.3rem;
}

/* --- MP voting record (Zestawienie głosowań) ------------------------------------------------- */

.record__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.record__card {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.75rem 1rem;
}

.record__card dt {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.875rem;
}

.record__card dd {
  margin: 0.25rem 0 0;
}

.record__num {
  display: block;
  font: 500 2rem/1.2 var(--display);
}

.record__text,
.record__compare {
  display: block;
}

.record__compare,
.record__note {
  color: var(--muted);
  font-size: 0.875rem;
}

.clubs__code {
  color: var(--muted);
  font-size: 0.875rem;
  white-space: nowrap;
}


/* --- home: hero, figures, steps, sources (T32) ------------------------------------------------ */

.hero {
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}

.hero__eyebrow {
  font: 600 0.8125rem/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s3);
}

.hero h1 {
  font: 500 clamp(2.25rem, 7vw, 4.5rem)/1.04 var(--display);
  letter-spacing: -0.02em;
  max-width: 15ch;
  margin: 0 0 var(--s4);
}

.hero__lede {
  font-size: 1.1875rem;
  line-height: 1.5;
  max-width: 54ch;
  color: var(--muted);
  margin: 0;
}

.arrow-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin: var(--s5) 0 0;
}

.arrow-links a,
.origins a {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding: 0.35rem 0;
}

.arrow-links a {
  font-size: 1.125rem;
}

.arrow-links a:hover,
.origins a:hover {
  border-bottom-width: 4px;
}

.band {
  margin: 0 0 var(--s6);
}

.band > h2,
#changes-heading {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--s4);
}

.numbers,
.steps,
.origins {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .numbers,
  .steps,
  .origins {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s4);
  }
}

.numbers li {
  border-top: 2px solid var(--ink);
  padding-top: var(--s3);
}

.numbers__value {
  display: block;
  font: 500 3.5rem/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--seal);
  margin-bottom: var(--s2);
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}

.numbers__caption {
  display: block;
  color: var(--muted);
  max-width: 28ch;
}

.steps__n {
  display: block;
  font: 500 3.5rem/1 var(--display);
  color: var(--seal);
  margin-bottom: var(--s3);
}

.steps h3,
.origins h3 {
  font: 600 1.125rem/1.3 var(--sans);
  margin: 0 0 var(--s2);
}

.steps p,
.origins p {
  margin: 0;
  color: var(--muted);
}

.origins li {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s4);
}

.origins p {
  margin-bottom: var(--s3);
}

.origins a {
  border-bottom-width: 1px;
  padding: 0;
}

.feed-layout {
  margin-bottom: var(--s6);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}
/* --- MP page: profile notes, laws voted on, attendance (T54) ----------------------------------- */

.laws__rows {
  list-style: none;
  margin: 0 0 var(--s2);
  padding: 0;
  max-width: 70ch;
}

.laws__rows li {
  padding: 0.25rem 0;
}

.laws__term {
  margin-top: var(--s1);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

.laws h3 {
  margin-top: var(--s4);
}

/* --- MP page: committees, agreement with clubs, votes against the club, activity (T55) --------- */

.agree,
.rebels {
  max-width: 48rem;
}

.agree .agree__span {
  display: block;
  font-weight: 400;
  white-space: nowrap;
}

.rebels td:first-child {
  width: 6.5rem;
}

.rebels td:last-child {
  width: 7rem;
}

.rebels td {
  padding-inline: 0.5rem;
}

.rebels .tag {
  margin-top: 0.25rem;
}

.rebels .who__detail {
  display: block;
}

.facts-section > p,
.facts-section .fact {
  max-width: 70ch;
}

.fact {
  margin: 0 0 var(--s3);
}

.fact h3 {
  margin-bottom: var(--s1);
}

.fact p {
  margin: 0;
}

.activity__list summary {
  cursor: pointer;
  color: var(--link);
}

.activity__items {
  list-style: none;
  margin: var(--s2) 0 0;
  padding: 0;
}

.activity__items li {
  padding: 0.375rem 0;
  border-top: 1px solid var(--rule);
}

.activity__items .who__detail {
  display: block;
}


/* --- MP page (T62): clubs across the terms, remarks under the final votes ------------------------- */

.club-chart {
  /* Neutral hues, one per club name (parliament.insights.club_colour), the same in every term; never party
     colours. Light: white text on the fill (4.5:1 or better); dark: dark text on a lighter fill. */
  --club-0: light-dark(#3b6fa0, #7fb0e0);
  --club-1: light-dark(#1f6f5c, #5fc0a0);
  --club-2: light-dark(#6b4fa0, #b19ae0);
  --club-3: light-dark(#a0527a, #e08ab5);
  --club-4: light-dark(#8f5a10, #e0b060);
  --club-5: light-dark(#5f6b1f, #b8c870);
  --club-6: light-dark(#9a3f2f, #f0907e);
  --club-7: light-dark(#1f6b8f, #6cc4e8);
  --club-none: light-dark(#6b707a, #8f949c);
  --seg-ink: light-dark(#fff, #1a1714);
  padding: var(--s3);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.club-chart__svg {
  display: block;
  max-width: 100%;
  overflow: hidden;
}

.club-chart__svg text {
  fill: var(--muted);
  font: 0.8125rem var(--sans);
}

.club-chart__track {
  fill: var(--info-bg);
}

.club-chart__hatch {
  stroke: var(--field-border);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
}

.club-chart__edge {
  stroke: var(--field-border);
  stroke-width: 1;
}

.club-chart__today {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.club-chart__svg .club-chart__now {
  fill: var(--ink);
  font-weight: 600;
}

.club-chart__short {
  display: none;
}

.club-seg rect {
  stroke: var(--sheet);
  stroke-width: 1;
}

.club-seg text,
.club-chart__svg .club-seg text {
  fill: var(--seg-ink);
  font-weight: 600;
}

.club-seg--0 rect, .club-key--0 { fill: var(--club-0); background: var(--club-0); }
.club-seg--1 rect, .club-key--1 { fill: var(--club-1); background: var(--club-1); }
.club-seg--2 rect, .club-key--2 { fill: var(--club-2); background: var(--club-2); }
.club-seg--3 rect, .club-key--3 { fill: var(--club-3); background: var(--club-3); }
.club-seg--4 rect, .club-key--4 { fill: var(--club-4); background: var(--club-4); }
.club-seg--5 rect, .club-key--5 { fill: var(--club-5); background: var(--club-5); }
.club-seg--6 rect, .club-key--6 { fill: var(--club-6); background: var(--club-6); }
.club-seg--7 rect, .club-key--7 { fill: var(--club-7); background: var(--club-7); }
.club-seg--none rect, .club-key--none { fill: var(--club-none); background: var(--club-none); }

.club-key {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.5rem;
  border-radius: 2px;
}

.club-table {
  margin-top: var(--s2);
}

.table.club-table tbody th {
  font-size: inherit;
  font-weight: 400;
  color: var(--ink);
}

.club-table tbody tr.club-table__first:not(:first-child) > * {
  border-top: 2px solid var(--rule);
}

.club-table__period {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.club-chart .record__note {
  margin: var(--s2) 0 0;
}

@media (max-width: 40rem) {
  .club-table__period {
    white-space: normal;
  }

  .club-chart__long {
    display: none;
  }

  .club-chart__short {
    display: inline;
  }
}

/* the remarks under an MP's final vote: unlike the club, rejection before, after a veto */
.remarks {
  display: grid;
  gap: var(--s1);
  justify-items: start;
  list-style: none;
  margin: var(--s1) 0 0;
  padding: 0;
}

.remarks .tag {
  display: block;
  white-space: normal;
  font-weight: 400;
}

.remarks .tag--quiet {
  color: var(--muted);
}

.record__compare a {
  white-space: nowrap;
}

/* --- EU law (/eu, the "EU acts" block of an act) ----------------------------------------- */

.act-head__title--long {
  font-size: 1.5rem;
  line-height: 1.3;
  max-width: 54rem;
}

/* A list entry's title can run to 400 characters: three lines, the rest is on the act's page. */
.eu-title {
  font-size: 1.125rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.eu-note {
  color: var(--muted);
  font-size: 0.875rem;
  max-width: 70ch;
  margin: 0.25rem 0 0.75rem;
}

.eu-note--title {
  font-family: var(--serif);
}

.eu-section {
  margin-top: 2rem;
  max-width: 62rem;
}

.eu-section h3 {
  margin: 1.5rem 0 0.375rem;
}

.eu-count {
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 400;
}

.eu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.eu-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.eu-list__meta {
  margin-left: 0.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.eu-list__ref {
  font-weight: 600;
}

.eu-list__title {
  display: block;
  max-width: 70ch;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.9375rem;
}

.eu-date {
  display: block;
  font-variant-numeric: tabular-nums;
}

/* A line under an EU list entry: the status of a proposal's preview (T75). */
.eu-list__status {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.eu-date__note {
  color: var(--muted);
  font-size: 0.8125rem;
}

.eu-fold {
  margin-top: 0.5rem;
}

.eu-fold summary {
  cursor: pointer;
  color: var(--link);
}

.eu-fold summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.eu-timing .eu-list {
  border-top: 0;
}

.eu-timing .eu-list li {
  border-bottom: 0;
  padding: 0.125rem 0;
}

.eu-source {
  margin-top: 2.5rem;
  max-width: 70ch;
  color: var(--muted);
  font-size: 0.8125rem;
}
/* Long CELEX numbers and titles never push the page wider than a phone. */
.act-head__title--long,
.act-head__address,
.eu-title,
.eu-list li,
.eu-block li,
.eu-note,
.eu-date {
  overflow-wrap: anywhere;
}

/* --- EU legislative procedures: the block on an act's page, a procedure's page (T74) ------ */

.eu-proc + .eu-proc {
  margin-top: 1.5rem;
}

.eu-proc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0 0 0.5rem;
}

.eu-proc__meta {
  color: var(--muted);
  font-size: 0.875rem;
}

.eu-proc__links {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

/* A date column and the event; the folded run of Council deliberations spans both. */
.eu-events {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.eu-events > li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;
}

.eu-events__date {
  color: var(--muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.eu-events__label--key {
  font-weight: 600;
}

.eu-events__docs {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}

.eu-events__run > .eu-fold {
  grid-column: 1 / -1;
  margin-top: 0;
}

.eu-events--inner {
  margin-top: 0.5rem;
}

.badge--procedure-adopted {
  color: var(--added);
}

.badge--procedure-pending {
  color: var(--caution);
}

.badge--procedure-withdrawn,
.badge--procedure-other {
  color: var(--muted);
}

/* --- EU texts: versions on an act's page, one version's text, diffs (T71) --------------- */

.eu-version__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.eu-version__date {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.eu-version__meta,
.eu-version__links {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
  max-width: 70ch;
}

.eu-version__meta {
  color: var(--muted);
}

.eu-version__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

/* A version without a text: quieter, with the way to EUR-Lex. */
.eu-version--muted .eu-version__date {
  font-weight: 400;
  color: var(--muted);
}

.eu-lang {
  margin: 0 0 1rem;
}

.sheet > div.unit--changed {
  border-left-color: var(--branch);
}

.unit__source {
  display: block;
  margin-top: 0.125rem;
  font: 0.8125rem/1.4 var(--sans);
  color: var(--muted);
}

.unit--subtitle .unit__text {
  font-weight: 600;
}

.unit--footnote .unit__text {
  font-size: 0.9375rem;
  color: var(--muted);
}

.unit__path,
.unit__text,
.unit__source {
  overflow-wrap: anywhere;
}