/* =============================================================================
   LEGAL INSIGHTS — STYLESHEET
   -----------------------------------------------------------------------------
   Loaded after css/style.css, which supplies every colour, type and spacing
   token used below. Nothing here re-declares a token; this file only adds the
   components the knowledge centre needs:

     1. Insights hero
     2. Search & category filters
     3. Featured insight
     4. The register
     5. Article page — masthead & meta
     6. Article page — prose
     7. Disclaimer
     8. Related insights
     9. Reading progress
    10. Diagrams
   ========================================================================== */


/* ═════════════════════════════════════════════════════ 1. INSIGHTS HERO ══ */

.ihero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  padding-block: clamp(2.75rem, 1.8rem + 4.4vw, 5rem) clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  border-bottom: 1px solid var(--line-soft);
}
/* Sized against the height of this band, not its width. The mark is rotated
   6deg, which makes its bounding box about 1.48x the width set here, and the
   band is only some 340-395px tall -- so anything above ~240px is clipped top
   and bottom however much horizontal room there is. Held inside the right edge
   for the same reason as the home page: the whole mark should read. */
.ihero__watermark {
  position: absolute;
  top: 50%; right: 4%;
  width: clamp(190px, 18vw, 240px);
  color: var(--ink);
  opacity: .05;
  transform: translateY(-50%) rotate(6deg);
  pointer-events: none;
}
.ihero__watermark svg { width: 100%; height: auto; display: block; }
.ihero__inner { position: relative; z-index: 1; max-width: 46rem; }

.ihero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: .01em;
  margin: 0 0 1rem;
}
.ihero__sub {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  max-width: 34rem;
  font-size: clamp(.75rem, .7rem + .3vw, .875rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ihero__lead {
  margin: 1.5rem 0 0;
  max-width: 50ch;
  font-size: clamp(1rem, .96rem + .25vw, 1.0625rem);
  color: var(--text-2);
}


/* ══════════════════════════════════════════ 2. SEARCH & CATEGORY FILTERS ══ */

.ifilters {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: rgba(250, 248, 244, .94);
  /* See style.css: dropped for scroll performance. */
  border-bottom: 1px solid var(--line-soft);
  padding-block: 1rem;
}

.ifilters__inner { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .ifilters__inner {
    /* The chips track must be minmax(0, 1fr), not auto: an auto track sizes to
       max-content and squeezes the search field down to its icon. */
    grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
    align-items: center;
    gap: 1.5rem;
  }
}

/* — search — */
.isearch { position: relative; width: 100%; }
.isearch__input {
  width: 100%;
  padding: .7rem 2.5rem .7rem 2.4rem;
  min-height: 46px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;                     /* 16px — stops iOS zooming on focus */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.isearch__input::placeholder { color: #77736b; }
.isearch__input:hover { border-color: #c9c2b3; }
.isearch__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(13, 13, 15, .1);
}
.isearch__icon {
  position: absolute;
  left: .8rem; top: 50%;
  transform: translateY(-50%);
  width: 1rem; height: 1rem;
  background: var(--text-3);
  -webkit-mask: var(--ico-search) center / contain no-repeat;
  mask: var(--ico-search) center / contain no-repeat;
  pointer-events: none;
}
.isearch__clear {
  position: absolute;
  right: .35rem; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: none;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-3);
  font-size: 1.1rem;
  line-height: 1;
}
.isearch__clear:hover { color: var(--text); background: var(--paper-2); }
.isearch.has-value .isearch__clear { display: grid; }

/* — category chips — */
.ichips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
@media (min-width: 900px) { .ichips { justify-content: flex-end; } }

.ichip {
  padding: .48rem .8rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.ichip:hover { border-color: var(--ink); color: var(--text); }
.ichip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.iresults {
  margin: 0;
  padding-top: 1.75rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.iempty {
  margin: 0;
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0;
  text-align: center;
  color: var(--text-2);
}
.iempty strong { display: block; font-family: var(--font-display); font-size: 1.25rem; margin-bottom: .5rem; color: var(--text); }


/* ═══════════════════════════════════════════════════ 3. FEATURED INSIGHT ══ */

.ifeature { padding-block: clamp(2rem, 1.6rem + 2vw, 3.25rem) 0; }

.ifeature__card {
  display: grid;
  gap: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ifeature__card:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }
@media (min-width: 860px) {
  .ifeature__card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.ifeature__media {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.ifeature__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.ifeature__card:hover .ifeature__media img { transform: scale(1.02); }

.ifeature__badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .35rem .7rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ifeature__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.5vw, 2.1rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: .01em;
  margin-bottom: .85rem;
  text-wrap: balance;
}
.ifeature__title a { display: block; }
/* The whole card is clickable, without nesting interactive elements. */
.ifeature__title a::after { content: ""; position: absolute; inset: 0; }
.ifeature__card { position: relative; }
.ifeature__excerpt { color: var(--text-2); margin-bottom: 1.25rem; max-width: 52ch; }


/* ═══════════════════════════════════════════════════════ 4. THE REGISTER ══ */

/* The listing is set as the index of a law report rather than as a grid of
   cards: numbered entries, hairline rules, the metadata above the title, and the
   cover reduced to a small plate at the end of the row. Hovering reverses the
   whole entry to paper on ink — the signboard move the rest of the site is
   built on.

   The numbering is a CSS counter rather than markup, which is what makes
   filtering renumber itself: a hidden entry generates no box, so it increments
   nothing. Filter to one category and the register still reads 01, 02, 03. */

.icards {
  counter-reset: reg;
  margin-top: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-top: 1px solid var(--line);
}

.icard {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: clamp(.85rem, .55rem + 1.4vw, 2rem);
  align-items: start;
  padding: clamp(1.15rem, .95rem + .9vw, 1.75rem) clamp(.5rem, .25rem + .9vw, 1.25rem);
  border-bottom: 1px solid var(--line);
  counter-increment: reg;
  transition: background-color var(--dur) var(--ease);
}

.icard[hidden] { display: none; }

/* focus-within as well as hover: the reversal has to happen for a keyboard
   reader too, since the whole row is the target. */
.icard:hover,
.icard:focus-within { background: var(--ink); }

.ireg__num {
  font-family: var(--font-display);
  font-size: clamp(.8125rem, .75rem + .3vw, 1rem);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.ireg__num::before { content: counter(reg, decimal-leading-zero); }

.ireg__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .85rem;
  margin: 0 0 .5rem;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.ireg__cat { color: var(--text-2); transition: color var(--dur) var(--ease); }

.ireg__title {
  margin: 0 0 .45rem;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, .95rem + .55vw, 1.375rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--text);
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}
.ireg__title a { color: inherit; }

/* The whole row is the hit area; the accessible name stays just the title. */
.ireg__title a::after { content: ""; position: absolute; inset: 0; }

.ireg__excerpt {
  margin: 0 0 .75rem;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-2);
  transition: color var(--dur) var(--ease);
}

.ireg__plate {
  display: block;
  width: clamp(64px, 12vw, 168px);
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
}
.ireg__plate img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* — the reversal — */
.icard:hover .ireg__num,
.icard:focus-within .ireg__num,
.icard:hover .ireg__meta,
.icard:focus-within .ireg__meta { color: var(--ink-text-2); }

.icard:hover .ireg__cat,
.icard:focus-within .ireg__cat,
.icard:hover .ireg__title,
.icard:focus-within .ireg__title,
.icard:hover .iread,
.icard:focus-within .iread { color: var(--paper); }

.icard:hover .ireg__excerpt,
.icard:focus-within .ireg__excerpt { color: var(--ink-text); }

.icard:hover .ireg__plate,
.icard:focus-within .ireg__plate { border-color: var(--ink-line); }

/* On a narrow screen the plate would squeeze the text to a column of two or
   three words, so the register drops to type alone and the entries stay
   readable. The covers still lead every article page. */
@media (max-width: 479px) {
  .icard { grid-template-columns: auto minmax(0, 1fr); }
  .ireg__plate { display: none; }
}


/* — the featured panel above the register still uses these — */

.icard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
}
.imeta {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.iread {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.iread::after {
  content: "";
  width: .8em; height: .8em;
  background: currentColor;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
  mask: var(--ico-arrow) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.icard:hover .iread::after,
.icard:focus-within .iread::after,
.ifeature__card:hover .iread::after { transform: translateX(4px); }


/* ══════════════════════════════════════ 5. ARTICLE MASTHEAD & META ══ */

.amast {
  background: var(--paper);
  padding-block: clamp(1.75rem, 1.4rem + 1.8vw, 3rem) clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.5rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.crumbs span[aria-hidden] { opacity: .5; }

.amast__inner { max-width: 46rem; }
.amast__cat {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .35rem .7rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.amast__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.amast__intro {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
  max-width: 54ch;
}

.abyline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 1.1rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.abyline__who {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.abyline__photo {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 1px rgba(13, 13, 15, .14);
}
.abyline__name {
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
}
.abyline__role {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.abyline__meta {
  margin-left: auto;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.acover {
  margin: 0;
  background: var(--paper-2);
  border-block: 1px solid var(--line-soft);
}
.acover img {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════ 6. PROSE ══ */

.aprose {
  padding-block: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
}
.aprose__inner {
  max-width: 40rem;
  margin-inline: auto;
  font-size: clamp(1rem, .97rem + .22vw, 1.0938rem);
  line-height: 1.78;
  color: var(--text);
}
.aprose__inner > p { margin: 0 0 1.35em; }
.aprose__inner > p:last-child { margin-bottom: 0; }

.aprose__inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  margin: 2.4em 0 .75em;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.aprose__inner h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.aprose__inner h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.35;
  margin: 2em 0 .6em;
  color: var(--text);
}

.aprose__inner ul,
.aprose__inner ol { margin: 0 0 1.35em; padding-left: 0; }
.aprose__inner li { margin-bottom: .6em; padding-left: 1.75rem; position: relative; }
.aprose__inner li:last-child { margin-bottom: 0; }

.aprose__inner ul > li::before {
  content: "";
  position: absolute;
  left: .4rem; top: .72em;
  width: 5px; height: 5px;
  background: var(--ink);
  transform: rotate(45deg);        /* a small ink lozenge, not a round bullet */
}
.aprose__inner ol { counter-reset: aprose; }
.aprose__inner ol > li { counter-increment: aprose; }
.aprose__inner ol > li::before {
  content: counter(aprose, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-3);
  line-height: 2.15;
}

.aprose__inner strong { font-weight: 600; }
.aprose__inner a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--line); }
.aprose__inner a:hover { text-decoration-color: currentColor; }
.nowrap { white-space: nowrap; }

/* — highlighted takeaways — */
.callout {
  margin: 2.25em 0;
  padding: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callout h3 {
  font-family: var(--font-display);
  font-size: .8125rem !important;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 .9em !important;
  color: var(--text);
}
.callout ul { margin-bottom: 0 !important; }
.callout li { font-size: .9375rem; line-height: 1.65; }


/* ══════════════════════════════════════════════════════ 7. DISCLAIMER ══ */

.adisclaimer {
  max-width: 40rem;
  margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.adisclaimer h2 {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 .7rem;
}
.adisclaimer p {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--text-2);
}

.acta {
  max-width: 40rem;
  margin: clamp(2rem, 1.6rem + 1.6vw, 2.75rem) auto 0;
  padding: clamp(1.25rem, 1rem + 1.2vw, 1.85rem);
  background: var(--ink);
  color: var(--ink-text);
  border-radius: var(--radius-lg);
}
.acta h2 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--paper);
  margin: 0 0 .5rem;
}
.acta p { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--ink-text-2); }
.acta__actions { display: flex; flex-wrap: wrap; gap: .65rem; }
@media (max-width: 419px) { .acta__actions { display: grid; } }


/* ══════════════════════════════════════════════ 8. RELATED INSIGHTS ══ */

.arelated {
  background: var(--paper-2);
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(2.5rem, 2rem + 2.4vw, 4rem);
}
.arelated__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}
.arelated__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: .01em;
}


/* ═════════════════════════════════════════════════ 9. READING PROGRESS ══ */

.aprogress {
  position: fixed;
  top: 0; left: 0;
  z-index: 110;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--ink);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .aprogress { display: none; } }


/* ── icon used only on these pages ──────────────────────────────────────── */
:root {
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.2' y2='16.2'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════ 10. DIAGRAMS ══ */

/* Process diagrams for the article bodies.

   Built from HTML and CSS rather than drawn as flat images, deliberately. The
   labels stay real text, so they reflow on a narrow screen, can be selected and
   searched, are read properly by a screen reader, and translate. A wide SVG of a
   nine-stage flow is illegible on a phone, and a phone is where most of this is
   read.

   The vocabulary is the site's own — hairline rules, the pointed hexagon, ink on
   paper — so a diagram reads as part of the page rather than as an inset.

   Everything is scoped under .aprose__inner, which also lets these selectors
   outrank the generic list styling in section 6 without a single !important. */

.aprose__inner .dgm {
  margin: 2.4em 0;
  padding: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.aprose__inner .dgm__cap {
  margin: 0 0 1.3rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-3);
}

/* A closing remark under a diagram — the strictness of a limitation period,
   the reason speed matters. Set apart from the steps by a hairline. */
.aprose__inner .dgm__note {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-2);
}


/* — Flow and timeline: a vertical spine of stages — */

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

.aprose__inner .dgm__steps > li {
  position: relative;
  margin: 0;
  padding: 0 0 1.6rem 2.3rem;
}

.aprose__inner .dgm__steps > li:last-child { padding-bottom: 0; }

/* The node, and the spine running down from it to the next one. */
.aprose__inner .dgm__steps > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .38rem;
  width: 12px;
  height: 12px;
  background: var(--ink);
  clip-path: var(--hex);
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

.aprose__inner .dgm__steps > li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 1.5rem;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.aprose__inner .dgm__steps > li:last-child::after { display: none; }

/* A stage the reader has to act on quickly, rather than merely know about. */
.aprose__inner .dgm__steps > li.is-urgent::before { background: var(--danger); }

.aprose__inner .dgm__when {
  display: inline-block;
  margin-bottom: .4rem;
  padding: .2rem .55rem;
  background: var(--ink);
  color: var(--ink-text);
  border-radius: var(--radius);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.aprose__inner .dgm__label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: .015em;
  color: var(--text);
}

.aprose__inner .dgm__body {
  display: block;
  margin-top: .3rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-2);
}


/* — A stage that forks: discharge or charge, acquittal or conviction — */

.aprose__inner .dgm__arms {
  display: grid;
  gap: .55rem;
  margin-top: .7rem;
}

@media (min-width: 560px) {
  .aprose__inner .dgm__arms { grid-template-columns: 1fr 1fr; }
}

.aprose__inner .dgm__arm {
  padding: .6rem .8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--text-2);
}

.aprose__inner .dgm__arm strong {
  display: block;
  margin-bottom: .1rem;
  font-weight: 600;
  color: var(--text);
}


/* — Split: two routes either side of a single event — */

.aprose__inner .dgm__split {
  display: grid;
  gap: .7rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  .aprose__inner .dgm__split { grid-template-columns: 1fr auto 1fr; }
}

.aprose__inner .dgm__side {
  padding: .9rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.aprose__inner .dgm__sidetitle {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--text);
}

.aprose__inner .dgm__sidenote {
  display: block;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-2);
}

/* The event the two routes divide on. A bar on narrow screens, a column
   between the two panels once there is room. */
.aprose__inner .dgm__pivot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .8rem;
  background: var(--ink);
  color: var(--ink-text);
  border-radius: var(--radius);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
}

@media (min-width: 640px) {
  .aprose__inner .dgm__pivot { writing-mode: vertical-rl; padding: .8rem .5rem; }
}


/* — Map: what a provision was, and what it is now — */

.aprose__inner .dgm__pairs {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aprose__inner .dgm__pairs > li {
  display: grid;
  gap: .2rem .8rem;
  margin: 0;
  padding: .7rem .85rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  align-items: baseline;
}

.aprose__inner .dgm__pairs > li::before { content: none; }

@media (min-width: 560px) {
  .aprose__inner .dgm__pairs > li { grid-template-columns: 1fr auto 1fr; }
  .aprose__inner .dgm__what { grid-column: 1 / -1; }
}

.aprose__inner .dgm__from {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-3);
}

.aprose__inner .dgm__arrow {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-3);
}

.aprose__inner .dgm__to {
  font-size: .875rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--text);
}

.aprose__inner .dgm__what {
  font-size: .75rem;
  line-height: 1.5;
  color: var(--text-3);
}


@media print {
  .ifilters, .aprogress, .arelated, .acta { display: none !important; }
  .aprose__inner { max-width: none; }
}