/* ===================================================================
   The reading column: provisions, tables, footnotes, citations.
   ================================================================== */

/* 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: var(--space-10) var(--space-4) 5rem;
  scroll-margin-top: var(--chrome-h);
}

/* Sidebar/outline sit in the outer columns (sidebar.css, panels.css); only
   scoped to a `.doc` with a `.doc-main`, since a listing page has neither
   aside and would otherwise auto-place its content into column 1.

   Diff page: one `.doc-main` row holds everything. Section page: `.doc-main`
   (h1 + tabs) is row 1, `#doc-panel-text` is row 2, since the swipeable
   panels can't live in the same box as the sidebar they swap with. All
   grid-row values are explicit (here, sidebar.css, panels.css) -- sparse
   auto-placement's column cursor otherwise shoves an out-of-order column-1
   item to a new row. */
@media (min-width: 76rem) {
  .doc:has(.doc-main) {
    display: grid;
    grid-template-columns: 13.5rem 45rem 13.5rem;
    /* `max-content` caps row 1's growth limit -- plain `auto` counts as
       unbounded, so the sidebar/outline spanning both rows (sidebar.css,
       panels.css) inflate row 1 to their own height instead of it just
       taking row 2's, which already dwarfs them. */
    grid-template-rows: max-content auto;
    column-gap: 1.5rem;
    max-width: 76rem;
  }
  .doc-main { grid-column: 2; grid-row: 1; }
  #doc-panel-text { grid-column: 2; grid-row: 2; }
}

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); }

/* -------------------------------------------------------------- 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.

   The interval tokens (--gap-*, in tokens.css) are shared with the flat diff
   layout in diff.css, which reads off the same level-pair math without the
   nesting to hang a selector on. */

.prov + .prov, .cont + .prov { margin-top: var(--gap-sibling); }

/* A sub-list opens under what introduced it. */
.prov > .prov:first-of-type { margin-top: var(--gap-open); }

/* 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: var(--gap-tight); }
.prov.opener + .prov, .prov.opener + .cont { margin-top: var(--gap-tight); }

/* 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: var(--gap-tight); }
.cont + .cont { margin-top: var(--gap-cont); }

/* 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: var(--gap-out-1); }
.prov:has(> .prov:last-child) + .cont,
.prov:has(> .prov:last-child > .prov:last-child) + .prov { margin-top: var(--gap-out-2); }
.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: var(--gap-out-3);
}

.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: var(--space-8) 0; }
.tablewrap table { border-collapse: collapse; font-size: .88em; }
.tablewrap th, .tablewrap td {
  padding: var(--space-2) var(--space-6);
  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: var(--gap-out-1) 0 var(--space-6); }

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

.prov.target { background: var(--accent-soft); border-radius: var(--radius-sm); }
/* 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: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
}

.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) {
  .prov-menu-trigger { opacity: .6; }
}

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

/* ----------------------------------------------------------------- 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); }

/* OLRC (authoritative) cross-reference: classic solid subtle underline */
a.ref.ref-olrc {
  text-decoration-style: solid;
}

/* Inferred cross-reference: subtle dashed underline */
a.ref.ref-inferred {
  text-decoration-style: dashed;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Defined term: subtle dotted underline with body text color so high-frequency terms do not distract */
a.ref.ref-def {
  color: inherit;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
}

a.ref.ref-olrc:hover,
a.ref.ref-inferred:hover {
  text-decoration-color: var(--accent);
}

a.ref.ref-def:hover {
  color: var(--accent);
  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;
  scroll-margin-top: 4.5rem;
}
sup.fn a, a[id^="fnref-"] {
  scroll-margin-top: 4.5rem;
}

/* 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: var(--space-8);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--muted);
}
.footnotes h2 {
  margin: 0 0 var(--space-5);
  font-size: var(--text-2xs);
}
.footnotes ol { margin: 0; padding: 0; list-style: none; }
.footnotes li {
  display: flex;
  gap: var(--space-4);
  margin: 0 0 var(--space-3);
  line-height: 1.5;
  scroll-margin-top: 4.5rem;
  border-radius: var(--radius-sm);
}
.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, .footnotes li.target,
.prov.target {
  background: var(--accent-soft);
}
sup.fn a:target, sup.fn a.target {
  background: var(--accent-soft);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------- 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: var(--space-5);
  font-family: var(--sans);
  font-size: var(--text-xs);
  margin: 0 0 var(--space-10);
}
.steps.foot {
  margin: 2.6rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.step {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  /* 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: var(--space-3) var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  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; }
}

/* ------------------------------------------------------------- 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: var(--space-3) 0 var(--space-4); }
.cited-here ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.cited-here li a {
  padding: .02rem var(--space-5);
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-2xs);
  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: var(--space-4) 0 1.2rem; }