/* ===================================================================
   Floating menus, popovers and the hover-preview card.

   Each of these composes `.panel-float` (primitives.css) for its surface --
   background, border, radius, shadow -- and keeps only what is actually its
   own: where it sits, how big it is, what it holds. ================== */

.prov-menu {
  position: absolute;
  z-index: 100;
  color: var(--ink);
  padding: var(--space-3) 0;
  min-width: 210px;
  font-family: var(--sans);
  font-size: var(--text-md);
}

.prov-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-4) .9rem;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--sans);
  font-size: var(--text-md);
  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: var(--space-3) 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;
  color: var(--ink);
  padding: var(--space-3) 0;
  min-width: 180px;
  max-width: min(320px, calc(100vw - 20px));
  font-family: var(--sans);
  font-size: var(--text-md);
}

.crumbs-menu-item {
  display: block;
  padding: var(--space-4) .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;
  color: var(--ink);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  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: var(--space-7);
}

.cite-popover-title {
  margin: 0;
  font-size: var(--text-lg);
  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: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}

.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: var(--space-3);
}

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

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

.cite-option-row {
  margin-bottom: var(--space-7);
}

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

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

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

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

/* --------------------------------------------------------------- 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: sticky`, in `.doc`'s own grid column (provisions.css), rather
   than `fixed` off the viewport: sticky costs the panel nothing a fixed
   panel had -- it still holds its place as the reader scrolls -- and gains
   the one thing fixed never could, releasing at the end of its column
   instead of floating over whatever comes after `.doc` on the page.

   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: sticky;
    top: var(--chrome-h);
    grid-column: 3;
    grid-row: 1 / -1;
    max-height: calc(100vh - var(--chrome-h) - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
    z-index: 30;
    font-family: var(--sans);
    font-size: .76rem;
    line-height: 1.3;
  }
}

/* Below 76rem the outline above is unreachable rather than gone -- a floating
   button raises it as a bottom sheet instead, so a reader mid-section can
   still jump to a subsection without scrolling back to the top. Picking one
   closes the sheet again; see outline_sheet_controller.js. */
.outline-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: var(--space-9);
  bottom: var(--space-9);
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--bg);
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 150;
}
.outline-fab svg { width: 1.15rem; height: 1.15rem; }
.outline-fab:hover { filter: brightness(1.08); }
.outline-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.outline-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 190;
}

/* Applied to <body> while the sheet is open, so it can't scroll behind it. */
.no-scroll {
  overflow: hidden;
}

@media not (min-width: 76rem) {
  .outline.sheet-open {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    min-height: 40vh;
    max-height: 70vh;
    margin: 0;
    padding: 0 var(--space-8) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    border: 1px solid var(--rule);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 200;
    font-family: var(--sans);
    font-size: .82rem;
    line-height: 1.35;
  }
}

.outline-handle {
  display: none;
}
/* A bigger tap/drag target than the bar itself -- full sheet width, a real
   touch-target height -- with the visible pill drawn smaller inside it. */
.outline.sheet-open .outline-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  margin: 0 calc(-1 * var(--space-8)) var(--space-4);
  touch-action: none;
  cursor: grab;
}
.outline.sheet-open .outline-handle::after {
  content: "";
  width: 2.25rem;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--rule);
}

@media (min-width: 76rem) {
  .outline-fab, .outline-backdrop { display: none; }
}

.outline h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-3xs);
}

.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: var(--space-3);
  align-items: baseline;
  padding: .12rem var(--space-3) .12rem 1.05rem;
  border-radius: var(--radius-sm);
  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: var(--radius-sm); }
@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: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}
.outline a.on.on-last {
  border-bottom-left-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.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: var(--added); }
.outline a.removed::after { background: var(--removed); }
.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;
}

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

.preview {
  position: absolute;
  z-index: 60;
  width: min(30rem, calc(100vw - 2rem));
  max-height: 22rem;
  overflow-y: auto;
  padding: var(--space-8) 1.1rem;
  font-size: var(--text-lg);
}
.preview h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: .07em;
  color: var(--faint);
}
.preview p { margin: 0 0 var(--space-5); }
.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: var(--space-8); }
.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: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-size: var(--text-xs);
  color: var(--faint);
}
.preview .foot p { margin: 0 0 var(--space-3); }
.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: var(--space-2) 0;
}
.preview details.inferred[open] summary { margin-bottom: var(--space-3); }
.preview details.inferred p a { color: var(--accent); }

/* --------------------------------------------------------- amendments popover */

.amendments-popover {
  position: absolute;
  z-index: 1000;
  width: 17rem;
  max-width: 90vw;
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1.35;
  padding: var(--space-6);
}
.amendments-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.amendments-popover-header h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.amendments-popover-close {
  background: transparent;
  border: none;
  font-size: var(--text-sm);
  color: var(--faint);
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  line-height: 1;
}
.amendments-popover-close:hover {
  color: var(--ink);
}
.amendments-popover-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 14rem;
  overflow-y: auto;
}
.amendments-popover-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}
.amendments-popover-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.amendments-popover-date {
  font-size: var(--text-xs);
  font-weight: 550;
  color: var(--ink);
}
.amendments-popover-law {
  font-size: var(--text-2xs);
  color: var(--faint);
  margin-top: .1rem;
}

/* --------------------------------------------------------------- compare menu
   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: var(--space-3);
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: var(--space-3);
}
.compare-menu-options a {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 550;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.compare-menu-options a:hover { background: var(--accent-soft); color: var(--accent); }