/* ===================================================================
   Diffs: an amendment shown inside the section it amended.
   ================================================================== */

/* An amendment, shown inside the section it amended: the whole text, laid out
   by the provision rules above, with the edited words marked. Insertions and
   deletions are distinguished by more than colour: statutory text is the kind
   of thing people read in poor light, print in black and white, and read with
   colour-blindness, so <ins> is underlined and <del> struck through.

   A bar down the left edge of every touched block is what carries the eye to
   the amendment once it is set back in a page of untouched law -- the same
   device as an annotated provision, in the colour of the edit. It is a
   box-shadow rather than a border so that it cannot shift the text: the marker
   column is positioned against the padding edge. */
.diff .change { box-shadow: inset 3px 0 0 var(--accent); border-radius: 2px; }
.diff .change.added { box-shadow: inset 3px 0 0 var(--added); }
.diff .change.removed { box-shadow: inset 3px 0 0 var(--removed); }
.diff .change.renumbered { box-shadow: inset 3px 0 0 var(--note); }
/* Continuations and the lead paragraph are flush, so the bar needs a gutter of
   its own; provisions already have one for their marker. */
.diff p.change { padding-left: var(--gutter); }

/* ------------------------------------------------------------- flat layout

   The one page that does not nest its provisions.  A comparison is not a tree:
   a struck subsection has no surviving parent to sit inside, and the bar above
   marks exactly the block that was amended -- drawn on a provision containing
   its children it would claim an edit to every one of them.  So the diff lists
   the blocks flat and says the hierarchy in classes instead, indenting by the
   lvl-N each block carries and keying the gap on the pair of levels either side
   of the transition.  These read off the same interval tokens (--gap-*, in
   tokens.css) as the nested provision layout in provisions.css -- what those
   gaps mean is set out there; these are the same intervals, off the level pair
   rather than off the structure.

   Ordering is load-bearing: the pair rules and the base rule have equal
   specificity, so the pairs must come second. */

.diff .prov.lvl-1, .diff .cont.lvl-1 { margin-left: var(--step); }
.diff .prov.lvl-2, .diff .cont.lvl-2 { margin-left: calc(2 * var(--step)); }
.diff .prov.lvl-3, .diff .cont.lvl-3 { margin-left: calc(3 * var(--step)); }
.diff .prov.lvl-4, .diff .cont.lvl-4 { margin-left: calc(4 * var(--step)); }
.diff .prov.lvl-5, .diff .cont.lvl-5 { margin-left: calc(5 * var(--step)); }

.diff .prov + .prov, .diff .cont + .prov { margin-top: .8rem; }

/* Same level: a list of sibling items. */
.diff .lvl-0 + .lvl-0, .diff .lvl-1 + .lvl-1, .diff .lvl-2 + .lvl-2,
.diff .lvl-3 + .lvl-3, .diff .lvl-4 + .lvl-4, .diff .lvl-5 + .lvl-5,
.diff .lvl-6 + .lvl-6 { margin-top: var(--gap-sibling); }

/* Deeper: the sub-list opens under what introduced it. */
.diff .lvl-0 + .lvl-1, .diff .lvl-0 + .lvl-2, .diff .lvl-0 + .lvl-3,
.diff .lvl-0 + .lvl-4, .diff .lvl-0 + .lvl-5, .diff .lvl-0 + .lvl-6,
.diff .lvl-1 + .lvl-2, .diff .lvl-1 + .lvl-3, .diff .lvl-1 + .lvl-4,
.diff .lvl-1 + .lvl-5, .diff .lvl-1 + .lvl-6, .diff .lvl-2 + .lvl-3,
.diff .lvl-2 + .lvl-4, .diff .lvl-2 + .lvl-5, .diff .lvl-2 + .lvl-6,
.diff .lvl-3 + .lvl-4, .diff .lvl-3 + .lvl-5, .diff .lvl-3 + .lvl-6,
.diff .lvl-4 + .lvl-5, .diff .lvl-4 + .lvl-6,
.diff .lvl-5 + .lvl-6 { margin-top: var(--gap-open); }

/* Back out by one. */
.diff .lvl-1 + .lvl-0, .diff .lvl-2 + .lvl-1, .diff .lvl-3 + .lvl-2,
.diff .lvl-4 + .lvl-3, .diff .lvl-5 + .lvl-4,
.diff .lvl-6 + .lvl-5 { margin-top: var(--gap-out-1); }

/* Back out by two. */
.diff .lvl-2 + .lvl-0, .diff .lvl-3 + .lvl-1, .diff .lvl-4 + .lvl-2,
.diff .lvl-5 + .lvl-3, .diff .lvl-6 + .lvl-4 { margin-top: var(--gap-out-2); }

/* Back out by three or more -- the biggest structural break a section has. */
.diff .lvl-3 + .lvl-0, .diff .lvl-4 + .lvl-0, .diff .lvl-4 + .lvl-1,
.diff .lvl-5 + .lvl-0, .diff .lvl-5 + .lvl-1, .diff .lvl-5 + .lvl-2,
.diff .lvl-6 + .lvl-0, .diff .lvl-6 + .lvl-1, .diff .lvl-6 + .lvl-2,
.diff .lvl-6 + .lvl-3 { margin-top: var(--gap-out-3); }

/* A continuation at the same level is the rest of the provision above it, so it
   closes up against it -- tighter than any sibling gap, hence negative.
   Higher specificity than the pair rules it has to beat.  Only at the same
   level, though: one *below* the provision before it is a chapeau's sentence
   resuming after its sub-list ended, and falls through to the outdents above. */
.diff .lvl-0 + .cont.lvl-0, .diff .lvl-1 + .cont.lvl-1,
.diff .lvl-2 + .cont.lvl-2, .diff .lvl-3 + .cont.lvl-3,
.diff .lvl-4 + .cont.lvl-4, .diff .lvl-5 + .cont.lvl-5,
.diff .lvl-6 + .cont.lvl-6 { margin-top: var(--gap-tight); }
.diff .cont + .cont { margin-top: var(--gap-cont); }

/* Nothing opens a gap under an opener: the block below is the rest of its own
   sentence.  Last, because it has to beat every pair above it. */
.diff .prov.opener + .prov, .diff .prov.opener + .cont { margin-top: var(--gap-tight); }

.diff .kind {
  margin-right: var(--space-4);
  padding: .05em .45em;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--sans);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: .12em;
}
.diff .change.added .kind { background: var(--ins-bg); color: #2f6b2f; }
.diff .change.removed .kind { background: var(--del-bg); color: #8a2b2b; }
.diff .change.renumbered .kind { background: var(--note-bg); color: var(--note); }
.diff .was { color: var(--muted); font-family: var(--sans); font-size: var(--text-xs); }

.diff ins,
.diff del { text-decoration: none; padding: .05em .1em; border-radius: 2px; }
.diff ins {
  background: var(--ins-bg);
  color: var(--ins-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.diff del {
  background: var(--del-bg);
  color: var(--del-ink);
  text-decoration: line-through;
}
@media (prefers-color-scheme: dark) {
  .diff .change.added .kind { background: var(--ins-bg); color: #a9d8a9; }
  .diff .change.removed .kind { background: var(--del-bg); color: #e6b3b3; }
}

/* The diff page's two endpoints. Picking either one re-aims the comparison,
   so the pair reads as one control with the swap between them. */
.endpoints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: var(--text-sm);
}
.epick { display: flex; align-items: center; color: var(--muted); }
.epick select {
  margin-left: .35rem;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.endpoints .swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--muted);
  text-decoration: none;
  line-height: 1;
}
.endpoints .swap:hover { color: var(--accent); border-color: var(--accent); }
.endpoints .swap:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* An enactment or a repeal, stated before the provisions are listed. */
.diff .enacted strong, .diff .repealed strong { color: var(--accent); }