:root {
  --bg: #fbfaf7;
  --panel: #ffffff;
  --ink: #1d1b17;
  --muted: #6b6558;
  --faint: #938d80;
  --rule: #e3ddd1;
  --accent: #7a5c2e;
  --accent-soft: #f0e6d4;
  --note: #b8860b;
  --note-bg: #fdf7e6;
  --bad: #b3261e;
  --shadow: 0 6px 28px rgba(40, 32, 18, .13);
  --serif: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The three measurements the provision layout is built from: the left gutter
     the marker sits in, the right one the ⋯ button sits in, and the step a
     subdivision indents by.  They are variables because a nested provision has
     to do arithmetic with them, and because the narrow layout retunes all
     three at once.

     All three are as small as their job allows, because they are what the
     measure is left over from: the gutter is wide enough for the markers that
     actually recur -- "(A)", "(12)" -- and a long roman spills leftward out of
     it by design, and the step is the smallest shift that still reads as one,
     since it is charged once per level and §1129(b)(2)(A)(i)(I) is five levels
     down. */
  --gutter: 2.5rem;
  --gutter-r: 1.75rem;
  --step: 1.15rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16150f;
    --panel: #1e1d16;
    --ink: #e8e3d6;
    --muted: #a29a88;
    --faint: #7d7566;
    --rule: #33301f;
    --accent: #d3ab6a;
    --accent-soft: #2b2618;
    --note: #d3ab6a;
    --note-bg: #241f12;
    --bad: #ff6b60;
    --shadow: 0 6px 28px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------------------------------------------------------------- top bar */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.25rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .82rem;
}

.bar-left {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 1 1 0;
  min-width: 0;
}

.bar-left .home {
  font-weight: 650;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.bar-left .home:hover { color: var(--accent); }

.corpus-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.corpus-trigger {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .3rem;
  border-radius: 5px;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  user-select: none;
  transition: background .12s ease;
}

.corpus-trigger::-webkit-details-marker { display: none; }
.corpus-trigger:hover,
.corpus-menu[open] .corpus-trigger {
  background: var(--panel);
}

.corpus-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .15rem .35rem;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--muted);
  line-height: 1;
  transition: color .12s ease, border-color .12s ease;
}

.corpus-trigger:hover .corpus-tag,
.corpus-menu[open] .corpus-tag {
  color: var(--accent);
  border-color: var(--accent);
}

.corpus-caret {
  color: var(--muted);
  transition: transform .15s ease, color .15s ease;
  flex-shrink: 0;
}

.corpus-trigger:hover .corpus-caret,
.corpus-menu[open] .corpus-caret {
  color: var(--accent);
}

.corpus-menu[open] .corpus-caret {
  transform: rotate(180deg);
}

.corpus-dropdown {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  z-index: 50;
  min-width: 17.5rem;
  max-width: calc(100vw - 2rem);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: .4rem;
  box-shadow: var(--shadow);
  font-family: var(--sans);
}

.corpus-dropdown-header {
  font-size: .68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
  padding: .3rem .5rem .25rem;
}

.corpus-dropdown-item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .5rem .6rem;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}

.corpus-dropdown-item:hover:not(.disabled) {
  background: var(--accent-soft);
}

.corpus-dropdown-item.active {
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}

.corpus-dropdown-item.active .corpus-item-title {
  color: var(--accent);
  font-weight: 650;
}

.corpus-dropdown-item.disabled {
  opacity: .6;
  cursor: not-allowed;
}

.corpus-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .84rem;
  font-weight: 550;
  color: var(--ink);
}

.corpus-item-abbr {
  font-size: .68rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: .1rem .35rem;
  border-radius: 3px;
  line-height: 1;
}

.corpus-item-desc {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.35;
}

.badge-soon {
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .1rem .35rem;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  line-height: 1;
}

.bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  flex: 1 1 0;
  min-width: 0;
}

.bar .notes-link {
  text-decoration: none;
  color: var(--muted);
  white-space: nowrap;
}
.bar .notes-link:hover { color: var(--accent); }

.desktop-only { display: inline-flex; }
.mobile-only { display: none !important; }

.mobile-menu {
  display: none;
  position: relative;
  align-items: center;
}

.mobile-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem;
  margin: -.35rem;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  transition: background .12s ease, color .12s ease;
}

.mobile-menu-trigger::-webkit-details-marker { display: none; }
.mobile-menu-trigger:hover,
.mobile-menu[open] .mobile-menu-trigger {
  background: var(--panel);
  color: var(--accent);
}

.hamburger-icon {
  display: block;
}

.mobile-menu-dropdown {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  z-index: 50;
  min-width: 10.5rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: .35rem;
  box-shadow: var(--shadow);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .65rem;
  border-radius: 5px;
  font-size: .82rem;
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  transition: background .12s ease;
}

.mobile-menu-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.mobile-menu-divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: .3rem .2rem;
}

.mobile-note-count:not(:empty) {
  display: inline-block;
  min-width: 1.35em;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  text-align: center;
  font-weight: 650;
  font-size: .75rem;
}

.rpick {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
  color: var(--muted);
  white-space: nowrap;
}
.rpick > span { display: none; }
.rpick select {
  padding: .2rem 1.4rem .2rem .5rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 999px;
  /* The native arrow varies wildly between platforms and sits badly in a
     pill, so it is drawn here and the control is stripped. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
                    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: right .75rem center, right .5rem center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.rpick select:hover { border-color: var(--accent); }
.rpick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A release that never held this page is offered but not followable: a gap in
   the list would read as a shorter history rather than an absent section. */
.rpick option:disabled { color: var(--faint); font-style: italic; }
/* Once there is room, name the control rather than relying on the pill alone. */
@media (min-width: 46rem) {
  .rpick > span { display: inline; }
}

.site-footer {
  display: flex;
  gap: 1rem;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  font-family: var(--sans);
  font-size: .78rem;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
#ac-note-count:not(:empty) {
  display: inline-block;
  min-width: 1.35em;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  text-align: center;
  font-weight: 650;
}

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

.search {
  position: relative;
  flex: 2 1 auto;
  max-width: 28rem;
  width: 100%;
}

.search input {
  width: 100%;
  padding: .35rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.search input.has-scope,
.search-form input[type="search"].has-scope {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

#ac-results {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  margin: 0;
  padding: .25rem;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 9px;
  box-shadow: var(--shadow);
  max-height: 60vh;
  overflow-y: auto;
}
#ac-results:empty { display: none; }
#ac-results a {
  display: flex;
  gap: .6rem;
  padding: .35rem .55rem;
  border-radius: 6px;
  text-decoration: none;
}
#ac-results a:hover, #ac-results a.on { background: var(--accent-soft); }
#ac-results .num { color: var(--accent); font-weight: 650; min-width: 4rem; }
#ac-results .name { color: var(--muted); }

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

/* The side padding was sized to hold the ¶ pin, which hung a gutter to the
   left of the outermost provision.  The pin is gone -- linking a provision is
   the ⋯ menu's job now -- and nothing hangs left of the marker any more, so
   the padding is back to being margin and can be as narrow as the page looks
   right with. */
.doc {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
}

.crumbs {
  display: flex;
  align-items: baseline;
  /* Wraps by default, so a trail nobody has measured yet (no JS) still shows
     every crumb rather than clipping past the edge. `crumbs_controller.js` switches to a
     single tight row -- `.crumbs-tight` -- once it has measured the trail and
     folded whatever does not fit behind the "…" trigger. */
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--faint);
  margin-bottom: .9rem;
}
.crumbs.crumbs-tight { flex-wrap: nowrap; overflow: hidden; }
.crumbs a { text-decoration: none; color: inherit; }
.crumbs a:hover { color: var(--accent); }
.crumbs .crumb { display: inline-flex; align-items: baseline; min-width: 0; flex: none; }
/* Hidden by crumbs_controller.js once the trail is wider than the page, and folded into the
   "…" trigger's menu instead. Without JS these just render, so the trail
   degrades to the plain, uncollapsed list. */
.crumbs .crumb.crumb-hidden { display: none; }

.crumbs-overflow {
  font-family: var(--sans);
  color: var(--faint);
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
  font-size: .95rem;
  padding: 0 .3rem;
  border-radius: 4px;
  flex: none;
}
.crumbs-overflow:hover,
.crumbs-overflow:focus,
.crumbs-overflow[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}

h1 {
  font-size: 1.72rem;
  line-height: 1.25;
  font-weight: 620;
  margin: 0 0 1.9rem;
  text-wrap: balance;
}

/* The diff page's own commentary on a comparison ("3 provisions changed"),
   which is not the law and must not be read as it: the statute stands below in
   full, including its lead paragraph, and that stays in the body colour. */
.summary { color: var(--muted); margin: 0 0 1.4rem; }
.summary a { color: var(--accent); }

/* Keeps a trailing em dash on the same line as the word it follows. */
.nb { white-space: nowrap; }

/* -------------------------------------------------------------- provisions */

/* Hanging indent: the marker sits in its own narrow column so the prose of
   every provision at a given depth starts on one edge, and wrapped lines
   align under the first line rather than under the marker. */
.prov {
  position: relative;
  margin: 0;
  padding: .12rem var(--gutter-r) .12rem var(--gutter);
  scroll-margin-top: 4.5rem;
}

/* The marker's *right* edge is pinned, so a compound like "(5)(A)(i)" grows
   leftward into the indent gutter instead of pushing its prose out of the
   column.  Every provision at a given level then starts on the same edge. */
/* Set at full strength, and bolder than the prose. The marker is not a label on
   the provision -- it is what a reader is looking *for* when they arrive with a
   citation in hand, and every jump down the page is made by scanning this
   column. Greyed out it was the faintest thing on a page it has to lead.
   `top` is retuned whenever `font-size` moves: it is measured in the marker's
   own em, so a larger marker would otherwise sink below the line it names. */
.marker {
  position: absolute;
  right: calc(100% - var(--gutter) + .3rem);
  top: .38em;
  font-family: var(--sans);
  font-size: .85em;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}
a.marker:hover, a.marker:focus { color: var(--accent); }
/* Only the innermost provision under the pointer answers to it: a nested
   provision hovers its ancestors too, and a column of ✎ buttons lighting up
   together names none of them in particular. */
.prov:hover > .marker, .prov.target > .marker { color: var(--accent); }
.prov:has(.prov:hover):not(.target) > .marker { color: var(--ink); }

/* -------------------------------------------------------- nested provisions

   A provision contains the ones below it: (a)(1) is written inside (a), not
   after it.  The Code is a tree, so the markup is one -- which is what makes a
   link to (a) highlight the paragraphs (a) is made of rather than the chapeau
   alone, and what lets a hover preview of (a) show what (a) actually says.

   Indent follows from that: a child sits in the gutter its parent has already
   opened for its own marker, so its offset is the step *less* that gutter, and
   nesting supplies the rest.  Levels are not depths -- §101 opens at paragraph
   level -- but the difference is a uniform shift of the whole section, and what
   a reader is reading is the relationship between a provision and the one
   above it. */
.prov .prov { margin-left: calc(var(--step) - var(--gutter)); }

/* The right gutter, which holds the ✎ button, is reserved once by the
   outermost provision.  Nested ones would stack another on every level and eat
   the measure a subdivision at a time, so they reserve none and hang their
   button out into the one already there -- putting every button on one edge,
   whatever depth it is at. */
.prov .prov { padding-right: 0; }
.prov .prov > .prov-actions { right: calc(-1 * var(--gutter-r)); }

/* Inside its parent a continuation is already in the right column: it is the
   rest of that parent's own sentence, not something below it. */
.prov > .cont { margin-left: 0; padding-left: 0; }

/* ------------------------------------------------------ hierarchical spacing

   The gap between two provisions says what happened between them, so it is a
   property of the *transition* rather than of either provision: all vertical
   space is therefore a margin-top on the second one.  Nesting is what makes the
   transition legible to a selector -- a first child opens a sub-list, a later
   sibling continues one, and a sibling that follows a provision with children
   is the reader climbing back out.

   Sibling items in a list want to read as a list, so they sit tight. Opening a
   sub-list barely breaks the flow -- the children belong to the chapeau above
   them. Closing one is the move that needs air: coming back out from (i) to (B)
   to (2) is the reader's only cue that two groups just ended, and with a
   uniform gap they have to count indents to work it out. So an outdent is
   spaced in proportion to how far it climbs, which is how deep the subtree
   above it *ends* -- `:last-child` and not merely `:has(.prov)`, since a list
   whose final item is flat closed only one level however deep it once went. */

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

/* A sub-list opens under what introduced it. */
.prov > .prov:first-of-type { margin-top: .5rem; }

/* A subdivision whose marker was run into the one below it in the source, so
   it carries no text of its own -- subsection (b) in "(b)(1) Notwithstanding".
   It still needs height, since the marker is positioned.  Nothing should open
   a gap under it: what follows is the rest of its own sentence. */
.prov.opener > .text { min-height: 1.5em; }
.prov.opener > .prov:first-of-type { margin-top: .15rem; }
.prov.opener + .prov, .prov.opener + .cont { margin-top: .15rem; }

/* A continuation directly under its parent's text is the rest of that
   provision's own sentence, so it closes up against it. */
.prov > .cont { margin-top: .15rem; }
.cont + .cont { margin-top: .35rem; }

/* Climbing back out: one level, two, three or more.  A continuation is one
   level further out than a provision in the same position, since it belongs to
   the parent of the sub-list that just closed -- "(6)(B) … processing facility—
   but only to the extent of $4,000 for each such individual".  Pulling that
   tight against the subparagraph above would hide the one thing the reader
   needs to see, which is that the sub-list closed. */
.prov + .cont,
.prov:has(> .prov:last-child) + .prov { margin-top: 1rem; }
.prov:has(> .prov:last-child) + .cont,
.prov:has(> .prov:last-child > .prov:last-child) + .prov { margin-top: 1.35rem; }
.prov:has(> .prov:last-child > .prov:last-child) + .cont,
.prov:has(> .prov:last-child > .prov:last-child > .prov:last-child) + .prov,
.prov:has(> .prov:last-child > .prov:last-child > .prov:last-child) + .cont {
  margin-top: 1.7rem;
}

.prov .text, .lead, .cont { text-wrap: pretty; }

.prov .subheading { font-weight: 600; }

/* A table set into the law -- §152's schedule of judgeships, §104's adjusted
   dollar amounts.  The Code sets these as print tables: ruled boxes, dot
   leaders, columns measured in points.  Almost none of that survives into the
   store (`split.py` drops presentational attributes so that a blob is a
   function of the law rather than of OLRC's typesetter) and almost none of it
   is worth reconstructing -- but two of those things were never presentation.
   Which way a column runs and which rows are subordinate to which are what the
   table *says*, so `split.py` distils both and they are set below.  The rules
   run horizontally only, the way a schedule of amounts reads. */
.tablewrap { overflow-x: auto; margin: .9rem 0; }
.tablewrap table { border-collapse: collapse; font-size: .88em; }
.tablewrap th, .tablewrap td {
  padding: .22rem .6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.tablewrap thead th {
  font: inherit;
  font-weight: 600;
  border-bottom: 2px solid var(--rule);
}
/* Which way a column runs, as the Code has it; see `render::columns_run`.
   Amounts get tabular figures with it, so they line up digit under digit. */
.tablewrap .num { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap .mid { text-align: center; }
/* Rows subordinate to the one above them: §152 lists "Alabama:" and sets its
   three districts in under it.  Stored as a rank rather than a measurement, so
   the size of the step is this stylesheet's to choose. */
.tablewrap .in-1 { padding-left: 1.7rem; }
.tablewrap .in-2 { padding-left: 2.8rem; }
.tablewrap .in-3 { padding-left: 3.9rem; }
.tablewrap .in-4 { padding-left: 5rem; }
/* The table's own footnotes, which OLRC writes into a <tfoot> and which the
   renderer moves below the rows they annotate. */
.tablewrap tfoot td {
  border-bottom: 0;
  font-size: .92em;
  color: var(--muted);
}
.tablewrap tfoot tr:first-child td { border-top: 1px solid var(--rule); }
/* A table inside a hover card has no room to scroll sideways in. */
.preview .tablewrap { font-size: .95em; }

/* Flush text continuing the provision above; no marker, no anchor of its own.
   Vertical space is set by the transition rules above, not here. */
.cont {
  margin: 0;
  padding-left: var(--gutter);
}

/* A table set into a provision is a `.cont` for the good reason that it sits in
   the same column and belongs to the same provision -- but it is not the rest
   of a sentence, and the rules above close a continuation up against the words
   it continues (`.prov > .cont` pulls it *up*, by design, so "…facility— but
   only to the extent of $4,000" reads as one sentence).  A table introduced by
   "as follows:" is a different thing: run tight, its header row collides with
   the line above it.  So it takes its space back.  Written to out-specify
   `.prov > .cont` rather than to sit after it, since both are ways to lose. */
.prov > .tablewrap.cont,
.tablewrap.cont { margin: 1rem 0 .8rem; }

.notes-page .note, .prov .notes, .prov .editor { max-width: 100%; }

.prov.target { background: var(--accent-soft); border-radius: 5px; }
/* Marks an annotated provision.  Must not touch padding-left: the marker is
   positioned against that edge, and shifting it slides the prose under it. */
.prov.has-note { box-shadow: inset 3px 0 0 var(--note); }

.prov-actions {
  position: absolute;
  right: 0;
  top: .3rem;
  z-index: 5;
}

.prov-menu-trigger {
  opacity: 0;
  transition: opacity .12s, color .12s, background-color .12s;
  font-family: var(--sans);
  color: var(--faint);
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
  font-size: 1.1rem;
  padding: .15rem .4rem;
  border-radius: 4px;
}

.prov:hover > .prov-actions .prov-menu-trigger,
.prov-menu-trigger:focus,
.prov-menu-trigger[aria-expanded="true"] {
  opacity: 1;
}

/* An ancestor of the provision under the pointer is under it too, and would
   otherwise offer a second ⋯ for a provision the reader is not pointing at. */
.prov:has(.prov:hover) > .prov-actions .prov-menu-trigger:not(:focus):not([aria-expanded="true"]) {
  opacity: 0;
}

.prov-menu-trigger:hover,
.prov-menu-trigger:focus,
.prov-menu-trigger[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-soft);
}

@media (max-width: 48rem) {
  .bar { padding: .5rem .75rem; gap: .5rem; }
  .bar-left { flex: 0 0 auto; gap: .35rem; }
  .bar-left .home { font-size: .8rem; }
  .bar-right { flex: 0 0 auto; gap: .35rem; }
  .desktop-only { display: none !important; }
  .mobile-only { display: inline-flex !important; }
  .mobile-menu { display: inline-flex; }
  .search { flex: 1 1 auto; max-width: none; }
  .prov-menu-trigger { opacity: .6; }
}

/* -------------------------------------------------------- provision overflow menu */

.prov-menu {
  position: absolute;
  z-index: 100;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: .4rem 0;
  min-width: 210px;
  font-family: var(--sans);
  font-size: .88rem;
}

.prov-menu-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .45rem .9rem;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.3;
}

.prov-menu-item:hover,
.prov-menu-item:focus {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

/* An item with nothing to act on -- no provision cites this one -- stays in
   the menu and says so with its count, rather than leaving a gap that moves
   every item below it depending on which provision was opened. */
.prov-menu-item:disabled,
.prov-menu-item:disabled:hover {
  color: var(--faint);
  background: none;
  cursor: default;
}

/* Right-aligned, because it is the answer to the item rather than part of its
   name: the eye reads down the labels and across only when it wants a number. */
.prov-menu-count {
  margin-left: auto;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.prov-menu-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  color: var(--faint);
  font-size: .9rem;
}

.prov-menu-item:hover .icon,
.prov-menu-item:focus .icon {
  color: var(--accent);
}

.prov-menu-divider {
  margin: .35rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* ---------------------------------------------------------- breadcrumb overflow menu
   The crumbs `crumbs_controller.js` folds behind the "…" trigger when the trail is wider
   than the page -- root first, same order they'd read in the trail. */

.crumbs-menu {
  position: absolute;
  z-index: 100;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: .4rem 0;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 20px));
  font-family: var(--sans);
  font-size: .88rem;
}

.crumbs-menu-item {
  display: block;
  padding: .45rem .9rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumbs-menu-item:hover,
.crumbs-menu-item:focus {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

/* ------------------------------------------------------------- citation popover */

.cite-popover {
  position: absolute;
  z-index: 101;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 1rem;
  width: 320px;
  max-width: calc(100vw - 20px);
  font-family: var(--sans);
}

.cite-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}

.cite-popover-title {
  margin: 0;
  font-size: .95rem;
  font-weight: 650;
  color: var(--ink);
}

.cite-popover-close {
  background: none;
  border: 0;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--faint);
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 4px;
}

.cite-popover-close:hover,
.cite-popover-close:focus {
  color: var(--ink);
  background: var(--accent-soft);
  outline: none;
}

.cite-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: .35rem;
}

.cite-format-select {
  width: 100%;
  padding: .45rem .65rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .88rem;
  cursor: pointer;
  margin-bottom: .85rem;
}

.cite-format-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.cite-option-row {
  margin-bottom: .85rem;
}

.cite-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.cite-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.cite-preview-box {
  padding: .65rem .75rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--serif);
  font-size: .9rem;
  color: var(--ink);
  word-break: break-word;
  line-height: 1.4;
  white-space: pre-wrap;
  margin-bottom: 1rem;
}

.cite-popover-actions {
  display: flex;
  justify-content: flex-end;
}

.copy-cite-btn {
  padding: .45rem .9rem;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 550;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.copy-cite-btn:hover,
.copy-cite-btn:focus {
  opacity: .9;
  outline: none;
}

.copy-cite-btn.copied {
  background: #2da44e !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------- outline

   The overview panel: the section's own shape, standing beside it.

   A section of the Code is a tree with no visible root — the page sets one
   provision after another and the reader infers the whole from the indents
   as they go.  Which is fine for §507 and hopeless for §1395w–4, where the
   subsection you are reading is one of forty and the page gives you no way
   to see that without leaving it.  So the shape is set out once, beside the
   text, and says continuously which part of it you are in.

   `position: fixed` rather than `sticky`: sticky would mean putting the panel
   in the flow of a page whose entire layout — the measure, the marker gutter,
   the ✎ column — is built around one centred column of text.  Fixed leaves all
   of that untouched and hangs the panel off the viewport, which is what it is
   pinned to anyway.  It costs the panel the ability to scroll away at the end
   of the page, and a panel that is still there at the end of the page is the
   one you want.

   Below 76rem there is no room for it beside the text without taking the
   measure under the width a statute needs, so it is not shown at all.  The
   markup is still written, in the document's own order, which is what a
   screen reader and a phone get instead: a list of what the section holds,
   before the section. */

.outline { display: none; }

@media (min-width: 76rem) {
  .outline {
    display: block;
    position: fixed;
    /* Clear of the top bar, which is sticky and would otherwise be scrolled
       under. */
    top: 4rem;
    /* Against the reading column rather than against the window: `.doc` is
       46rem wide and centred, so its right edge is at 50% + 23rem, and the
       panel starts a gutter to the right of that.  Pinned to the window
       instead, the gap between text and panel would grow with every pixel of
       screen and the two would stop reading as one page. */
    left: calc(50% + 23rem + 1.5rem);
    width: 13.5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    scrollbar-width: thin;
    z-index: 30;
    font-family: var(--sans);
    font-size: .76rem;
    line-height: 1.3;
  }
}

/* Set like the other micro-labels on the site -- a listing's group heading, a
   footnote list's title: this names a piece of furniture, not a piece of law. */
.outline h2 {
  margin: 0 0 .5rem;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

.outline ul { list-style: none; margin: 0; padding: 0; }
/* Indent text inside links rather than ul elements so all links span full width
   and highlighting forms a uniform block across nested levels. */
.outline ul ul { padding-left: 0; }

.outline ul a { padding-left: 1.05rem; }
.outline ul ul a { padding-left: 1.65rem; }
.outline ul ul ul a { padding-left: 2.25rem; }
.outline ul ul ul ul a { padding-left: 2.85rem; }
.outline ul ul ul ul ul a { padding-left: 3.45rem; }
.outline ul ul ul ul ul ul a { padding-left: 4.05rem; }
.outline ul ul ul ul ul ul ul a { padding-left: 4.65rem; }
.outline ul ul ul ul ul ul ul ul a { padding-left: 5.25rem; }

/* Shut, except along the path to the provision being read -- which the outline
   opens as the reader moves, and which the reader can open for themselves with
   the triangle.  Open throughout, 26 U.S.C. §501 is 413 entries and the panel
   has to be scrolled before it can be read; the whole point of an overview is
   that it is taken in at a glance.  This is also what pays for the outline
   running the full depth of the section: a clause five levels down costs
   nothing until the reader is in it.

   Keyed on the button's own `aria-expanded` rather than on a class beside it,
   so that what a screen reader is told and what the panel shows cannot come
   apart.  A sibling combinator and not `:has`, because the button is written
   before both the link and the list it opens. */
.outline li > ul { display: none; }
.outline .twist[aria-expanded="true"] ~ ul { display: block; }

.outline li { position: relative; }

.outline a {
  display: flex;
  gap: .3rem;
  align-items: baseline;
  padding: .12rem .35rem .12rem 1.05rem;
  border-radius: 4px;
  color: var(--muted);
  text-decoration: none;
}

/* Opens what an entry holds, without going there.
   Written only where there is something to open, which is also what tells the
   reader that the rest of the panel has nothing inside it -- a shut panel
   would otherwise read as the whole of a section that happens to have four
   subsections, rather than as four subsections with more within them.
   A real button, because a triangle pointing at a list is a promise every
   reader has met in a file tree, and the one thing worse than not offering to
   open a branch is offering and then not doing it. */
.twist {
  position: absolute;
  left: 0;
  top: .06rem;
  width: 1rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.outline ul > li > .twist { left: 0; }
.outline ul ul > li > .twist { left: .6rem; }
.outline ul ul ul > li > .twist { left: 1.2rem; }
.outline ul ul ul ul > li > .twist { left: 1.8rem; }
.outline ul ul ul ul ul > li > .twist { left: 2.4rem; }
.outline ul ul ul ul ul ul > li > .twist { left: 3.0rem; }
.outline ul ul ul ul ul ul ul > li > .twist { left: 3.6rem; }
.outline ul ul ul ul ul ul ul ul > li > .twist { left: 4.2rem; }
.twist::before {
  content: "›";
  display: block;
  transition: transform .12s;
}
.twist[aria-expanded="true"]::before { transform: rotate(90deg); }
.twist:hover { color: var(--accent); }
.twist:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .twist::before { transition: none; }
}
.outline .m { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
/* Set back only where the Code gives the provision a heading. Then the marker
   is a label on the words beside it and the words are what you scan; where
   there is no heading -- §507 has none, and most of Title 11 has none -- the
   marker is the entry, and a column of dimmed markers is a panel with nothing
   in it at full strength. */
.outline a:has(.h) .m { color: var(--faint); }
/* Headings run to a paragraph in places -- 42 U.S.C. §1396a has some -- and a
   heading that wrapped to four lines would push the rest of the outline off
   the panel.  One clipped line each, the whole of it in the tooltip. */
.outline .h {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outline a:hover, .outline a:hover .m { color: var(--accent); }
.outline a:hover { background: var(--accent-soft); }
.outline a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Where you are.  The provision itself is marked the way a `:target` is, so
   that the panel and the page agree about what is being read; its ancestors
   are only brought up to the body colour, because they are the path to it
   rather than the thing itself. */
.outline a.on, .outline a.on .m { color: var(--accent); }
.outline a.on {
  background: var(--accent-soft);
  font-weight: 620;
  border-radius: 0;
}
.outline a.on.on-first {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.outline a.on.on-last {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.outline a.path, .outline a.path .m { color: var(--ink); }
/* An open triangle comes up with the entry it belongs to: it is either on the
   path to what is being read or the reader turned it themselves, and in both
   cases it is holding something open below. */
.twist[aria-expanded="true"] { color: var(--ink); }

/* What the amendment did, on the panel beside a comparison.  A dot rather than
   a colour on the entry itself, which is already spent on where the reader is;
   in the colours of the bars down the left of the text.  At the far end of the
   row, the one place no level of indent reaches, so the dots line up. */
.outline a.chg::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.outline a.added::after { background: #4a8f4a; }
.outline a.removed::after { background: #b05555; }
.outline a.renumbered::after { background: var(--note); }
/* Hollow: nothing changed here, the branch is holding an edit further down. */
.outline a.within::after { background: none; box-shadow: inset 0 0 0 1px var(--faint); }

/* The dot in words.  `.outline li` is the positioned ancestor. */
.outline .chg-note {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------- links */

a.ref {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 2px;
}
a.ref:hover { text-decoration-color: var(--accent); }
a.ext { color: var(--muted); text-underline-offset: 2px; }

/* Footnote markers. The OLRC writes its editorial footnotes inline, mid-
   provision, so without this they read as a number in the sentence — "to the
   extent of $10,000 2 for each individual". Set as a superscript they read as
   what they are: an annotation on the text, not part of it.

   `line-height: 0` keeps the raised digit from opening up the line it sits in,
   which in a statute is the difference between an even column of text and one
   that ripples wherever the OLRC left a note. */
sup.fn {
  font-family: var(--sans);
  font-size: .62em;
  font-weight: 600;
  line-height: 0;
  vertical-align: super;
  margin-left: .12em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* Raised and lowered text that is part of the sentence rather than an
   annotation: exponents (1×10⁻⁷), fraction numerators and denominators
   (⁷⁄₁₀), and the chemistry the Code carries — NOₓ, CO₂, PM₂.₅. These keep
   the body face and colour, because they are being read, not referred to. */
.doc sup:not(.fn), .doc sub {
  font-size: .68em;
  line-height: 0;
  font-variant-numeric: tabular-nums;
}
.doc sup:not(.fn) { vertical-align: super; }
.doc sub { vertical-align: sub; }

/* The OLRC's editorial footnotes, at the foot of the law they annotate.
   Mostly they say the statute has a typo — "So in original. Probably should
   be 'forth'." — which is exactly the kind of thing a reader of a statute
   wants to know, and which was being dropped on the floor entirely. */
.footnotes {
  margin: 2.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .84rem;
  color: var(--muted);
}
.footnotes h2 {
  margin: 0 0 .6rem;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}
.footnotes ol { margin: 0; padding: 0; list-style: none; }
.footnotes li {
  display: flex;
  gap: .5rem;
  margin: 0 0 .4rem;
  line-height: 1.5;
}
.footnotes .fnback {
  flex: 0 0 auto;
  min-width: 1.2em;
  color: var(--accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.footnotes .fnback:hover { text-decoration: underline; }
/* Landing on a footnote from its marker, or back again, should say where you
   arrived — the target is one short line in a list of short lines. */
.footnotes li:target, .prov.target { background: var(--accent-soft); }

/* --------------------------------------------------------------- previews */

.preview {
  position: absolute;
  z-index: 60;
  width: min(30rem, calc(100vw - 2rem));
  max-height: 22rem;
  overflow-y: auto;
  padding: .9rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: .93rem;
}
.preview h4 {
  margin: 0 0 .5rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .07em;
  color: var(--faint);
}
.preview p { margin: 0 0 .55rem; }
.preview p:last-child { margin-bottom: 0; }
.preview a { color: var(--accent); text-decoration: none; }

/* A card shows the provision *and* what is written inside it, which is a
   hierarchy in 30rem with nowhere to put a marker column.  So the marker runs
   into the line it names and the indent alone says how deep the reader is. */
.preview .sub { padding-left: .9rem; }
.preview .m { font-family: var(--sans); font-size: .8em; font-weight: 650; }
/* Where the provision goes on past what a card is for. */
.preview .more { color: var(--faint); }

/* The title doubles as a link on touch, where a tap opens the card instead
   of navigating -- this is how a reader gets the rest of the way there. */
.preview h4 a { color: inherit; text-decoration: none; }
.preview h4 a:hover, .preview h4 a:focus-visible { text-decoration: underline; }

.preview .foot {
  margin-top: .7rem;
  padding-top: .55rem;
  border-top: 1px solid var(--rule);
  font-size: .82rem;
  color: var(--faint);
}
.preview .foot p { margin: 0 0 .4rem; }
.preview .foot p:last-child { margin-bottom: 0; }

.preview details.inferred summary {
  cursor: pointer;
  color: var(--faint);
  /* The native disclosure triangle is the affordance that says this row
     opens -- worth keeping rather than replacing with a static glyph. */
  /* A comfortable tap target, not just a line of small text. */
  padding: .2rem 0;
}
.preview details.inferred[open] summary { margin-bottom: .35rem; }
.preview details.inferred p a { color: var(--accent); }

/* ------------------------------------------------------------------ notes */

.notes:empty { display: none; }

.note {
  margin: .6rem 0 0;
  padding: .6rem .8rem;
  background: var(--note-bg);
  border-left: 3px solid var(--note);
  border-radius: 0 6px 6px 0;
  font-family: var(--sans);
  font-size: .87rem;
  line-height: 1.5;
}
.note p { margin: 0 0 .4rem; white-space: pre-wrap; }
.note .meta {
  display: flex;
  gap: .75rem;
  align-items: center;
  color: var(--faint);
  font-size: .74rem;
}
.note .meta button {
  background: none; border: 0; padding: 0;
  color: var(--faint); cursor: pointer; font: inherit;
}
.note .meta button:hover { color: var(--accent); }

.editor { margin: .6rem 0 0; font-family: var(--sans); }
.editor textarea {
  width: 100%;
  min-height: 5.5rem;
  padding: .6rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
.editor textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.editor .row { display: flex; gap: .5rem; margin-top: .45rem; align-items: center; }
.editor .cite { color: var(--faint); font-size: .76rem; margin-right: auto; }

.editor button, button.primary, .note-actions button {
  padding: .32rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .82rem;
  cursor: pointer;
}
.editor button:hover, .note-actions button:hover {
  border-color: var(--accent);
}
button.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
button.primary:hover { filter: brightness(1.08); }
.note-actions { display: flex; gap: .5rem; margin-bottom: 1.5rem; }

/* ------------------------------------------------------- tables of contents */

.toc ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.toc li { border-bottom: 1px solid var(--rule); }
/* Scoped to the list rows: a bare ".toc a" also caught the breadcrumb links,
   turning each into a flex block so the trail stacked vertically. */
.toc li a {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: .6rem .2rem;
  text-decoration: none;
}
.toc li a:hover { background: var(--accent-soft); }
.toc .num { color: var(--accent); font-weight: 620; min-width: 4.5rem; }
.toc .name { flex: 1; }
/* The right-hand column of a listing row: how much a release or a title holds,
   and which sections a chapter or subchapter holds. */
.toc .count, .toc .range {
  color: var(--faint);
  font-family: var(--sans);
  font-size: .76rem;
}
.toc .range { white-space: nowrap; }
.toc h2 {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--faint);
  margin: 2rem 0 .5rem;
}

/* ----------------------------------------------------------------- notes */

.notes-page h2 {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--faint);
}

/* ------------------------------------------------------------- prose pages

   Privacy, About -- prose, not statute or a listing, so they get their own
   heading and paragraph rhythm instead of borrowing the eyebrow-style
   `.toc h2`. */

.prose-page .meta {
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--faint);
  margin: -.5rem 0 2rem;
}
.prose-page h2 {
  font-size: 1.15rem;
  margin: 2.2rem 0 .6rem;
}
.prose-page h3 {
  font-size: 1.02rem;
  margin: 1.4rem 0 .4rem;
}
.prose-page p { margin: 0 0 1rem; }
.prose-page ul, .prose-page ol {
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
}
.prose-page li {
  margin: .35rem 0;
}
.prose-page pre {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: .85rem 1rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 1.2rem;
}
.prose-page code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .86em;
  background: var(--accent-soft);
  color: var(--accent);
  padding: .15em .35em;
  border-radius: 4px;
}
.prose-page pre code {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
}
.prose-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.6rem;
  font-size: .88rem;
  font-family: var(--sans);
}
.prose-page th,
.prose-page td {
  padding: .55rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.prose-page thead th {
  font-weight: 650;
  border-bottom: 2px solid var(--rule);
  color: var(--ink);
  background: var(--panel);
}
.prose-page tbody tr:hover {
  background: var(--accent-soft);
}
.prose-page .tool-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--panel);
  padding: 1.2rem 1.4rem;
  margin: 1.4rem 0;
}
.prose-page .tool-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: var(--accent);
}
.prose-page .tool-card p {
  margin: 0 0 .8rem;
  font-size: .92rem;
}
.prose-page .tool-card .tablewrap {
  margin: 0 0 1rem;
}
.prose-page .tool-card h4 {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 650;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 1rem 0 .35rem;
}
.prose-page .tool-card pre:last-child {
  margin-bottom: 0;
}

.subscribe-form { display: flex; gap: .5rem; font-family: var(--sans); }
.subscribe-form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: .5rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
}
.subscribe-form input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.subscribe-form input[type="submit"] {
  padding: .32rem .9rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--sans);
  font-size: .82rem;
  cursor: pointer;
}
.subscribe-form input[type="submit"]:hover { filter: brightness(1.08); }
/* A field named to invite a bot and never shown to a person -- see
   app/controllers/subscribers_controller.rb. Off-screen rather than
   `display: none`, since some bots skip fields that can't render at all. */
.subscribe-form .hp { position: absolute; left: -9999px; }
.form-message { font-family: var(--sans); font-size: .85rem; margin: 0 0 .6rem; }
.form-message.success { color: var(--accent); }
.form-message.error { color: var(--bad); }

/* ------------------------------------------------------- inbound citations

   Who cites *this* provision, on the provision itself.  There used to be one
   list at the foot of the page: 351 sections cite 26 U.S.C. §501, and reading
   (c)(3) it could not tell you that 243 of them meant the sentence in front of
   you.  Each count now sits on what it is a count of, the section's own line
   included.

   The chain rides at the end of the provision's own text, like the footnote
   markers above it: a small mark on the sentence, not a control in a gutter.
   It carries its count unopened, because the count is the part most readers
   want — that a sentence is load-bearing for 243 others is worth knowing
   before deciding whether to look at any of them. */
.chain {
  border: 0;
  background: none;
  padding: 0;
  margin-left: .3em;
  font-family: var(--sans);
  color: var(--faint);
  cursor: pointer;
  line-height: 0;
  white-space: nowrap;
}
.chain svg {
  width: .82em;
  height: .82em;
  vertical-align: -.08em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
/* The count is set like a footnote marker for the same reason: it annotates
   the text rather than continuing it. */
.chain .n {
  font-size: .62em;
  font-weight: 600;
  line-height: 0;
  vertical-align: super;
  margin-left: .1em;
  font-variant-numeric: tabular-nums;
}
.chain:hover, .chain[aria-expanded="true"] { color: var(--accent); }

/* Opened, the citations sit in the provision's own column — indented with it,
   so a chain deep in a subparagraph opens under that subparagraph rather than
   in the margin of the section. */
.cited-here { margin: .3rem 0 .45rem; }
.cited-here ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0;
  padding: 0;
}
.cited-here li a {
  display: inline-block;
  padding: .02rem .45rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .74rem;
  color: var(--muted);
  text-decoration: none;
}
.cited-here li a:hover { background: var(--accent-soft); color: var(--accent); }
/* The section's own chain opens between the line naming it and the first
   provision, where a tight list would read as part of the statute. */
#ac-cite + .cited-here { margin: .5rem 0 1.2rem; }

.notes-block {
  margin-top: 3rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  font-size: .93rem;
  color: var(--muted);
}
.notes-block summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--faint);
}
.notes-block h3 {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink);
  margin: 1.5rem 0 .4rem;
}

.note-group { margin-bottom: 2rem; }
.note-group h2 a { color: var(--accent); text-decoration: none; }
.empty { color: var(--faint); }

/* On a phone the measure is the whole budget, and everything else on the line
   is spending it.  A 375px screen (an iPhone mini, the narrowest thing anyone
   still reads on) holds about 49 characters of 17px Charter edge to edge, so
   the 45-character floor leaves roughly 40px for the side margins, the marker
   gutter, the ⋯ gutter and every level of indent put together.

   That is what these numbers are: the smallest each of them can be and still
   do its job.  The step is the one that compounds -- §1129(b)(2)(A)(i)(I) pays
   it four times over -- so it is cut hardest, to a shift that still reads as
   one because the marker changes alphabet as it goes ((A) to (i) to (I)) and
   the outdent spacing says the rest.  Between them these hold ~36 characters
   five levels down against ~29 before, and ~40 at the top level.  The floor is
   not reachable at this depth on this screen at any indent -- 45 characters is
   333 of the 375 -- so what is left is to spend as little as possible on
   everything that is not the law. */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .doc { padding: 1.5rem .4rem 4rem; }
  /* Widened from the floor above: a plain "(12)" fits the floor, but a
     compound designator like "(51A)" -- 11 U.S.C. §101 has several -- needs
     more room to spill into than the .4rem of margin outside it, or its
     opening characters run off the edge of the screen with nothing to
     scroll them back into view. */
  :root { --gutter: 2.6rem; --gutter-r: 1.25rem; --step: .55rem; }
  /* `top` is measured in the marker's own em, so shrinking the marker lifts it
     off the line it names unless the offset grows to match. */
  .marker { font-size: .8em; top: .4em; }
  /* Sized to the gutter it has to fit inside, since on a phone it is always
     visible and the gutter is no wider than the glyph. */
  .prov-menu-trigger { font-size: .95rem; padding: .25rem .1rem; }
}

/* Shown only when the site is opened as a local file, where fetch() -- and so
   previews and search -- cannot work.  See file_warning_controller.js. */
.offline-warning {
  padding: .7rem 1.25rem;
  background: var(--note-bg);
  border-bottom: 1px solid var(--note);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .82rem;
}
.offline-warning code {
  background: color-mix(in srgb, var(--note) 16%, transparent);
  padding: .1em .35em;
  border-radius: 4px;
  font-size: .95em;
}

.crumbs .sep { margin: 0 .45rem; color: var(--rule); flex: none; }

/* -------------------------------------------------------------- step links
   The sections either side of this one, in the order the title is written.
   The trail above says where the section sits; this says what comes next,
   which is what a reader working through a chapter actually wants.

   Shown twice, above the section and again below it: at the top it is
   orientation, at the bottom it is the way on from a section just finished.
   An end of the title renders nothing on that side, so `margin-left: auto`
   on .next is what keeps a lone next link on the right where it belongs. */
.steps {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .8rem;
  margin: 0 0 1.5rem;
}
.steps.foot {
  margin: 2.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.step {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  /* Half the row each, and `min-width: 0` so it is the heading inside that
     clips rather than the row that overflows. */
  max-width: 50%;
  min-width: 0;
  padding: .35rem .6rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
}
.step:hover { border-color: var(--accent); color: var(--accent); background: var(--panel); }
.step.next { margin-left: auto; }
/* `min-width` and `flex` are set back to their defaults rather than left
   unstated: a listing page carries `doc toc`, and the `.toc .num` column width
   and `.toc .name` growth are meant for the rows of the listing, not for a link
   in the nav above it. */
.step .num {
  color: var(--accent);
  font-weight: 620;
  white-space: nowrap;
  min-width: fit-content;
}
.step .arrow { color: var(--faint); }
.step:hover .arrow { color: var(--accent); }
/* Headings run long -- Title 38 has one at 200 characters -- so the name is
   one clipped line and the whole of it stays in the link's tooltip. */
.step .name {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* On a phone there is room for the number and the arrow but not the heading,
   and a truncated word or two of it says less than the number does. */
@media (max-width: 640px) {
  .step .name { display: none; }
}

/* Headings run long -- Title 38 has one at 200 characters -- so any one crumb
   clips to a line rather than stretching the trail; the tooltip carries the
   whole label. The current page gets more room, since it is the one crumb
   that can never fold into the overflow menu. */
.crumbs .crumb a {
  display: inline-block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.crumbs .crumb-current a { max-width: min(48ch, 100%); }

/* That trailing crumb is now always the page you are on. It stays an anchor —
   pointing at itself — so the trail is one uniform run, but it reads as a
   position rather than somewhere to go: a shade darker than the trail above
   it, and unmoved by hovering. */
.crumbs a[aria-current="page"],
.crumbs a[aria-current="page"]:hover { color: var(--muted); }

/* ------------------------------------------------------------- left sidebar
   Version History & Changes sidebar.

   Standing beside the reading column on wide screens, and rendered as a top
   card on narrow screens. */

.sidebar-left {
  display: block;
  margin: 1.2rem 0 1.5rem;
  padding: .85rem 1rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.35;
}

@media (min-width: 76rem) {
  .sidebar-left {
    position: fixed;
    top: 4rem;
    right: calc(50% + 23rem + 1.5rem);
    width: 13.5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    scrollbar-width: thin;
    z-index: 30;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
}

.sidebar-section {
  margin-bottom: 1.2rem;
}
.sidebar-section:last-child {
  margin-bottom: 0;
}

.sidebar-section h2 {
  margin: 0 0 .4rem;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

.sidebar-meta-item {
  margin-bottom: .4rem;
}
.sidebar-meta-item:last-child {
  margin-bottom: 0;
}
.sidebar-meta-label {
  display: block;
  font-size: .68rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sidebar-meta-value {
  display: block;
  font-size: .82rem;
  font-weight: 550;
  color: var(--ink);
}
.sidebar-citation {
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 650;
}
.sidebar-status {
  color: var(--note);
  font-style: italic;
}
.sidebar-meta-link {
  color: var(--accent);
  text-decoration: none;
}
.sidebar-meta-link:hover {
  text-decoration: underline;
}

.sidebar-citation-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .25rem .4rem;
  margin-top: .15rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.sidebar-citation-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.sidebar-citation-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.sidebar-citation-btn .copy-hint {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  color: var(--faint);
  padding: .1rem .35rem;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--rule);
  transition: all .15s ease;
  flex: 0 0 auto;
  margin-left: .4rem;
}
.sidebar-citation-btn:hover .copy-hint {
  color: var(--accent);
  border-color: var(--accent);
}
.sidebar-citation-btn.copied .copy-hint {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.sidebar-action-btn {
  display: block;
  width: 100%;
  padding: .35rem .6rem;
  margin-top: .3rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--accent);
  text-decoration: none;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  text-align: center;
  transition: all .15s ease;
}
.sidebar-action-btn:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.sidebar-secondary-link {
  display: inline-block;
  margin-top: .4rem;
  font-size: .72rem;
  color: var(--muted);
  text-decoration: none;
}
.sidebar-secondary-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ------------------------------------------------------------- history page */

.history-page .history-list {
  margin-top: 1.5rem;
}

.history-group {
  margin-bottom: 2rem;
}
.history-group h2 {
  font-size: .85rem;
  font-weight: 650;
  letter-spacing: .06em;
  color: var(--faint);
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .3rem;
}

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

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .75rem;
  margin-bottom: .4rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 7px;
  font-family: var(--sans);
  font-size: .84rem;
  gap: .5rem;
}
.history-item.changed {
  border-left: 3px solid var(--accent);
}
.history-item.current {
  background: var(--accent-soft);
}

.history-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.history-rp {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  flex: 1 1 0%;
  min-width: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A dot rather than a pill: it has to sit on every changed row without
   turning the list back into the wall of badges this replaced. */
.history-dot {
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--accent);
}

.history-flag {
  flex: none;
  font-size: .68rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  font-weight: 600;
}
.history-flag-current { background: var(--accent); color: #ffffff; }
.history-flag-absent { background: var(--bg); color: var(--faint); border: 1px solid var(--rule); }

.history-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: none;
}

.history-link {
  font-size: .78rem;
  text-decoration: none;
  font-weight: 550;
}
.history-link.view-link { color: var(--accent); }
.history-link.view-link:hover { text-decoration: underline; }
.history-link.diff-link { color: var(--muted); }
.history-link.diff-link:hover { color: var(--accent); text-decoration: underline; }

/* Compare's two targets (previous release vs. current) as a <details>
   popover -- same no-JS mechanism as .history-collapsed-group. */
.compare-menu {
  position: relative;
}
.compare-menu summary {
  cursor: pointer;
  list-style: none;
}
.compare-menu summary::-webkit-details-marker { display: none; }
.compare-menu[open] summary { color: var(--accent); }
.compare-menu-options {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  margin-top: .3rem;
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: .3rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.compare-menu-options a {
  padding: .4rem .6rem;
  border-radius: 5px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 550;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.compare-menu-options a:hover { background: var(--accent-soft); color: var(--accent); }

/* Collapsed runs of unchanged releases: closed by default, opened with a tap
   on the summary, no JS -- <details> already does exactly this. */
.history-collapsed-group {
  border: none;
  background: none;
  padding: 0;
  margin-bottom: .4rem;
  display: block;
}
/* Child combinators throughout: the rows inside carry their own <details>
   (the compare menu), which must not pick up the group's box or marker. */
.history-collapsed-group > details {
  border: 1px dashed var(--rule);
  border-radius: 7px;
}
.history-collapsed-group > details[open] {
  border-style: solid;
}
.history-collapsed-group > details > summary {
  list-style: none;
  cursor: pointer;
  padding: .5rem .75rem;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.history-collapsed-group > details > summary::-webkit-details-marker { display: none; }
.history-collapsed-group > details > summary::before {
  content: "▸";
  font-size: .7rem;
  color: var(--faint);
  transition: transform .15s ease;
}
.history-collapsed-group > details[open] > summary::before {
  transform: rotate(90deg);
}
.history-collapsed-group > details > summary:hover { color: var(--accent); }
.history-items-nested {
  padding: 0 .6rem .6rem;
}

.cite-item {
  display: block;
  padding: .75rem 1rem;
}

.cite-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}

.cite-link-title {
  color: var(--ink);
  text-decoration: none;
}
.cite-link-title:hover {
  color: var(--accent);
  text-decoration: underline;
}

.cite-target-header-link {
  color: var(--accent);
  text-decoration: underline;
  font-weight: inherit;
}

.cite-excerpt {
  margin-top: .4rem;
  padding: .5rem .75rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--serif);
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink);
}

.cite-excerpt-block {
  margin-bottom: .35rem;
}
.cite-excerpt-block:last-child {
  margin-bottom: 0;
}

.cite-marker {
  font-weight: 650;
  margin-right: .4rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .82rem;
}

mark.cite-target {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 3px;
  padding: .1rem .25rem;
  font-weight: 650;
}

.sidebar-label {
  display: block;
  font-size: .74rem;
  color: var(--muted);
  margin-bottom: .25rem;
}

.sidebar-select {
  width: 100%;
  padding: .25rem 1.4rem .25rem .5rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
                    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: right .75rem center, right .5rem center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-bottom: .5rem;
}
.sidebar-select:hover { border-color: var(--accent); }
.sidebar-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sidebar-summary {
  margin: 0 0 .5rem;
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.3;
}
.sidebar-summary strong { color: var(--accent); }

/* ------------------------------------------------------------- versions
   The version picker and timeline, shown only by the dynamic app: the
   static build has no releases to move between, so these rules match
   nothing there.

   Across 383 releases almost every one leaves a given section untouched
   (PLAN.md §3 measured a median of zero changed sections corpus-wide), so
   the timeline has to make the few that *did* change the thing the eye
   lands on. Unchanged releases stay faint ticks; changed ones are solid. */

.versions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.1rem;
  margin: 0 0 1.4rem;
  padding: .6rem .8rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: .82rem;
}
.vpick, .cpick { color: var(--muted); }
.vpick select,
.cpick select,
.epick select {
  margin-left: .35rem;
  padding: .2rem .35rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 5px;
}
/* "Compare with" sits in the summary line, so it must not force a wrap
   between the sentence and the control. */
.cpick { white-space: nowrap; }
.cpick select { max-width: 14rem; }
.vsummary { margin: 0; color: var(--muted); }
.vsummary strong { color: var(--accent); }

.timeline {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1 1 12rem;
  min-width: 8rem;
}
/* Ticks are links, so they need a hit area larger than the mark itself. */
.timeline .tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 20px;
  border: 0;
}
.timeline .tick span,
.timeline .tick:not(a) {
  display: block;
  width: 4px;
  height: 10px;
  border-radius: 2px;
  background: var(--rule);
}
.timeline .tick.changed span { background: var(--accent); height: 16px; }
.timeline .tick.absent { opacity: .35; }
.timeline .tick.absent::after {
  content: "";
  display: block;
  width: 4px;
  height: 2px;
  border-radius: 1px;
  background: var(--faint);
}
.timeline .tick.current span,
.timeline .tick.current::after {
  outline: 2px solid var(--note);
  outline-offset: 2px;
}
.timeline .tick:hover span { background: var(--note); }

/* ----------------------------------------------------------------- diffs
   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 #4a8f4a; }
.diff .change.removed { box-shadow: inset 3px 0 0 #b05555; }
.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.  What those gaps mean is set out under "hierarchical
   spacing" above; these are the same intervals, read 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: .42rem; }

/* 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: .5rem; }

/* 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: 1rem; }

/* 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: 1.35rem; }

/* 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: 1.7rem; }

/* 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: .15rem; }
.diff .cont + .cont { margin-top: .35rem; }

/* 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: .15rem; }

.diff .kind {
  display: inline-block;
  margin-right: .5rem;
  padding: .05em .45em;
  border-radius: 3px;
  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: #dff0d8; color: #2f6b2f; }
.diff .change.removed .kind { background: #f6dcdc; color: #8a2b2b; }
.diff .change.renumbered .kind { background: var(--note-bg); color: var(--note); }
.diff .was { color: var(--muted); font-family: var(--sans); font-size: .78rem; }

.diff ins,
.diff del { text-decoration: none; padding: .05em .1em; border-radius: 2px; }
.diff ins {
  background: #dff0d8;
  color: #234d23;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.diff del {
  background: #f6dcdc;
  color: #6f2222;
  text-decoration: line-through;
}
@media (prefers-color-scheme: dark) {
  .diff ins { background: #1f3a1f; color: #cfe9cf; }
  .diff del { background: #3d1f1f; color: #efd0d0; }
  .diff .change.added .kind { background: #1f3a1f; color: #a9d8a9; }
  .diff .change.removed .kind { background: #3d1f1f; color: #e6b3b3; }
}
.vdiff { margin-left: .5rem; }

/* 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: .5rem;
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: .82rem;
}
.epick { display: flex; align-items: center; color: var(--muted); }
.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); }

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

   The results page for full-text search.  It reads as a table of contents --
   a citation in the accent, a heading beside it, one row per section -- because
   that is what it is: a listing of places in the Code, ordered by how well they
   answer a question instead of by where they sit in it.  What a listing does not
   have is the quote underneath, and that is set in the serif, because it is
   statutory text and everything else on the page is furniture. */

.search-form {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0 0 1.6rem;
  max-width: 48rem;
}

.search-main-row {
  display: flex;
  gap: .5rem;
  width: 100%;
}

.search-main-row input[type="search"] {
  flex: 1;
  padding: .5rem .8rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}

.search-main-row input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.search-main-row input[type="search"].has-scope {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}

.search-main-row button {
  padding: .5rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--accent);
  color: var(--panel);
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.search-main-row button:hover { filter: brightness(1.1); }

.search-filters-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .84rem;
  color: var(--muted);
}

.search-filters-row .filter-label {
  font-weight: 600;
  color: var(--ink);
}

.search-filters-row select.scope-select {
  flex: 1;
  max-width: 18rem;
  min-width: 9rem;
  padding: .4rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
}

.search-filters-row input.scope-input {
  width: 9rem;
  padding: .4rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
}

.search-filters-row select:focus,
.search-filters-row input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.search-filters-row .clear-scope {
  color: var(--muted);
  text-decoration: underline;
}
.search-filters-row .clear-scope:hover { color: var(--accent); }

/* The unit picker's `<select>`s are built one level at a time by JS and
   inserted into this wrapper; `contents` puts them straight into the flex
   row's layout, same as the title select beside them. */
.search-filters-row .unit-scope-picker { display: contents; }

.active-scope {
  display: inline-block;
  font-family: var(--sans);
  font-size: .86rem;
  color: var(--muted);
  margin-bottom: 1.4rem;
}
.active-scope strong {
  color: var(--accent);
}

#ac-results .scope-header {
  padding: .35rem .6rem;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  margin-bottom: .25rem;
  background: var(--accent-soft);
  border-radius: 6px 6px 0 0;
}

.scope-search-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: .84rem;
  color: var(--accent);
  margin-bottom: 1.2rem;
  text-decoration: none;
}
.scope-search-link:hover {
  text-decoration: underline;
}

.search-help, .search-count {
  font-family: var(--sans);
  font-size: .86rem;
  color: var(--muted);
  margin: 0 0 1.6rem;
}
.search-help code {
  font-size: .92em;
  padding: 0 .25em;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
}

.results { list-style: none; margin: 0; padding: 0; }
.results li { margin: 0 0 1.5rem; }

.results .hit {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .9rem;
  align-items: baseline;
  padding: .2rem;
  margin: 0 -.2rem;
  border-radius: 5px;
  text-decoration: none;
}
.results .hit:hover { background: var(--accent-soft); }
.results .cite { color: var(--accent); font-weight: 620; white-space: nowrap; }
.results .heading { color: var(--muted); font-size: .94rem; }

/* The quote runs to the edge of the measure and is cut by the snippet rather
   than by a line count, so it wants no clamping of its own. */
.results .quote {
  margin: .25rem 0 0;
  color: var(--ink);
  font-size: .94rem;
  line-height: 1.4;
}

/* The matched terms.  A tint rather than a highlighter: a result page can carry
   forty of these, and the yellow a browser draws by default turns the page into
   a stack of stripes with the text underneath them.

   Spread by a box-shadow rather than by padding, because the terms of a phrase
   are marked one word at a time.  Padding pushes the words apart and "projected
   disposable income" comes out as three chips with gaps between them, instead of
   the phrase it is; a shadow paints past the edges without moving anything, so
   adjacent marks close over the space between them. */
.results mark {
  background: var(--accent-soft);
  box-shadow: 0 0 0 .14em var(--accent-soft);
  color: inherit;
  font-weight: 620;
}

/* ----------------------------------------------------------------- pager

   The page links under a listing.  Set in the sans, like every other piece of
   furniture on the page, and separated from the last result by a rule so that
   it reads as the end of the list rather than as another entry in it.  A step
   with nowhere to go is left in place and dimmed instead of removed, because a
   row whose ends move as you page through it is a row you have to re-find. */
.pager {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  margin: 2rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .86rem;
}

.pager-step { color: var(--accent); text-decoration: none; white-space: nowrap; }
.pager-step:hover { text-decoration: underline; }
.pager-step.pager-off { color: var(--muted); opacity: .5; }

.pager-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.pager-numbers li { margin: 0; }

.pager-number {
  display: block;
  min-width: 1.9rem;
  padding: .25rem .45rem;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--accent);
  text-align: center;
  text-decoration: none;
}
.pager-number:hover { background: var(--accent-soft); }

.pager-gap {
  display: block;
  padding: .25rem .2rem;
  color: var(--muted);
}

.pager-number.pager-current {
  border-color: var(--rule);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 620;
}

/* The last row of the header's autocomplete: the way from a list of section
   numbers to a search of what the sections say. */
#ac-results .full {
  border-top: 1px solid var(--rule);
  margin-top: .25rem;
  padding-top: .25rem;
}
#ac-results .full a { color: var(--muted); font-family: var(--sans); font-size: .82rem; }
#ac-results .full b { color: var(--accent); font-weight: 620; }