/* ============================================================
   legilist.css — LegiList design system
   Prefix: ll-   (continues .ll-breadcrumbs / .ll-support-prompt)

   Self-contained: depends on no other site stylesheet. nav.css and
   footer.css remain separate and untouched. Intended to grow into
   the site-wide system, so tokens live on :root.
   ============================================================ */

:root {
  --ll-ink:          #0f1b2a;
  --ll-ink-2:        #2e3f52;
  --ll-ink-3:        #5d6b7a;
  --ll-ink-4:        #8794a2;
  /* the site's base accent. Each silo overrides it below; everything
     that uses the accent is written against the token, never a hex. */
  --ll-accent:       #1c335f;
  --ll-accent-soft:  rgba(28, 51, 95, 0.08);
  /* stronger than -soft: the sweep has to be seen, not sensed */
  --ll-accent-wash:  rgba(28, 51, 95, 0.17);

  --ll-canvas:       #fbfbfa;
  --ll-surface:      #ffffff;
  --ll-line:         #e4e7ec;
  --ll-line-strong:  #cfd5dd;

  --ll-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
  --ll-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --ll-wrap: min(1180px, 100% - 48px);
}

/* ------------------------------------------------------------
   Silo identity

   One accent per section of the site, set on <body>. The page
   structure never changes; only this token does. It appears in four
   load-bearing places — the masthead rule, the period in view in a
   chart, the change bar on a hovered row, and a hovered link — and
   nowhere decorative.

   Every hue is dark and low-chroma on purpose. Saturated red and blue
   read as party colours on a politics site whatever they are meant to
   mean, so the palette stays institutional: navy, teal, moss,
   aubergine, bronze, clay.
   ------------------------------------------------------------ */
.ll-silo-congress {
  --ll-accent:      #1c335f;
  --ll-accent-soft: rgba(28, 51, 95, 0.08);
  --ll-accent-wash: rgba(28, 51, 95, 0.17);
}

.ll-silo-analytics {
  --ll-accent:      #15504f;
  --ll-accent-soft: rgba(21, 80, 79, 0.08);
  --ll-accent-wash: rgba(21, 80, 79, 0.17);
}

.ll-silo-states {
  --ll-accent:      #3f5120;
  --ll-accent-soft: rgba(63, 81, 32, 0.08);
  --ll-accent-wash: rgba(63, 81, 32, 0.17);
}

.ll-silo-executive {
  --ll-accent:      #4b2a4e;
  --ll-accent-soft: rgba(75, 42, 78, 0.08);
  --ll-accent-wash: rgba(75, 42, 78, 0.17);
}

.ll-silo-lobbying {
  --ll-accent:      #7a5214;
  --ll-accent-soft: rgba(122, 82, 20, 0.08);
  --ll-accent-wash: rgba(122, 82, 20, 0.17);
}

.ll-silo-learn {
  --ll-accent:      #6b3a24;
  --ll-accent-soft: rgba(107, 58, 36, 0.08);
  --ll-accent-wash: rgba(107, 58, 36, 0.17);
}

.ll-page,
.ll-page *,
.ll-page *::before,
.ll-page *::after {
  box-sizing: border-box;
}

.ll-body {
  margin: 0;
  background: var(--ll-canvas);
  color: var(--ll-ink);
  font-family: var(--ll-font);
  -webkit-font-smoothing: antialiased;
}

.ll-page {
  width: var(--ll-wrap);
  margin: 0 auto;
  padding: 0 0 72px;
}

/* every figure on the page aligns digit-for-digit */
.ll-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --- type ----------------------------------------------------
   Labels are sentence case in the body face. The monospace stack is
   kept for figures only, where tabular alignment earns it.
   ------------------------------------------------------------- */
.ll-h1 {
  margin: 0 0 16px;
  font-size: clamp(2.3rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.035em;
}

/* a dateline inside the heading: real heading text for a crawler,
   quiet enough not to compete with the title above it */
.ll-h1-note {
  display: block;
  margin-top: 12px;
  color: var(--ll-ink-3);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0;
}

.ll-lede {
  margin: 0;
  max-width: 54ch;
  color: var(--ll-ink-3);
  font-size: 1.05rem;
  line-height: 1.6;
}

.ll-h2 {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}

/* a section marker above each heading, the way a print section rule
   works. It repeats the silo colour down the page without scattering
   it over things that are not structural. */
.ll-h2::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin-bottom: 13px;
  background: var(--ll-accent);
}

.ll-sub {
  margin: 5px 0 0;
  color: var(--ll-ink-3);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* --- masthead ------------------------------------------------ */
.ll-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 44px 0 32px;
}

.ll-masthead-copy {
  flex: 1;
  min-width: 300px;
}

.ll-masthead-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- period picker ------------------------------------------- */
.ll-picker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 14px;
  border: 1px solid var(--ll-line-strong);
  border-radius: 7px;
  background: var(--ll-surface);
}

.ll-picker label {
  color: var(--ll-ink-3);
  font-size: 0.86rem;
}

.ll-picker select {
  border: 0;
  background: none;
  color: var(--ll-ink);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.ll-picker select:focus-visible {
  outline: 2px solid var(--ll-accent);
  outline-offset: 3px;
}

/* --- buttons ------------------------------------------------- */
.ll-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border: 1px solid var(--ll-line-strong);
  border-radius: 7px;
  background: var(--ll-surface);
  color: var(--ll-accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.ll-btn:hover {
  border-color: var(--ll-accent);
  background: var(--ll-accent-soft);
  color: var(--ll-accent);
  text-decoration: none;
}

.ll-btn i {
  font-size: 0.92em;
  opacity: 0.75;
}

/* --- headline figure ----------------------------------------- */
.ll-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 0;
  border-top: 3px solid var(--ll-accent);
  border-bottom: 1px solid var(--ll-line);
}

.ll-headline-main {
  padding: 30px 34px 32px 0;
  border-right: 1px solid var(--ll-line);
}

.ll-headline-figure {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px;
}

/* the lead figure is the Congress in view, which is what the accent
   marks everywhere else on the page, so it carries the accent too */
.ll-headline-value {
  color: var(--ll-accent);
  font-size: clamp(3.2rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.ll-headline-unit {
  color: var(--ll-ink-3);
  font-size: 1.1rem;
  font-weight: 600;
}

.ll-headline-text {
  margin: 0;
  max-width: 42ch;
  color: var(--ll-ink-2);
  font-size: 1rem;
  line-height: 1.62;
}

/* the chart sits on the floor of its cell, level with the foot of
   the paragraph beside it, rather than floating above the gap */
.ll-headline-chart {
  display: flex;
  flex-direction: column;
  padding: 30px 0 32px 34px;
}

.ll-headline-chart .ll-chart {
  margin-top: auto;
}

.ll-chart-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  color: var(--ll-ink-3);
  font-size: 0.85rem;
}

.ll-chart-caption span:last-child {
  color: var(--ll-ink-4);
}

/* --- charts --------------------------------------------------
   One column per period. Columns share the width evenly, so every
   chart in a row renders at exactly the same size.
   ------------------------------------------------------------- */
/* a baseline the columns stand on, so the chart reads as measured
   from zero rather than floating */
.ll-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
  height: 38px;
  border-bottom: 1px solid var(--ll-line-strong);
}

.ll-chart-lg {
  height: 136px;
  gap: 4px;
}

/* each column is a full-height cell, so short bars are still easy
   to hover and the label has something to hang off */
.ll-bar-g {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.ll-bar {
  display: block;
  width: 100%;
  height: var(--ll-bar-h, 0%);
  border-radius: 1.5px 1.5px 0 0;
  background: var(--ll-bar-tone, #c9d1dc);
  transition: background 0.12s ease;
}

/* --- entrance motion -----------------------------------------
   Each column climbs from zero to the top of the chart, then settles
   back onto its own value. Columns start in series order, so the
   overshoot travels left to right as a wave before the chart resolves.

   Only applies under .ll-anim, which includes/ll-chart-motion.php sets.
   Without it the rule above renders every column at its true height, so
   no script means a static chart rather than an empty one.
   ------------------------------------------------------------- */
@keyframes ll-bar-wave {
  0% {
    height: 0%;
    animation-timing-function: cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  52% {
    height: 100%;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  100% {
    height: var(--ll-bar-h, 0%);
  }
}

.ll-anim .ll-chart .ll-bar {
  height: 0%;
}

.ll-anim .ll-chart.is-in .ll-bar {
  animation: ll-bar-wave 900ms both;
  animation-delay: calc(var(--ll-bar-i, 0) * 45ms);
}

@media (prefers-reduced-motion: reduce) {
  .ll-anim .ll-chart .ll-bar {
    height: var(--ll-bar-h, 0%);
  }

  .ll-anim .ll-chart.is-in .ll-bar {
    animation: none;
  }
}

/* the period in view */
.ll-bar-g-now .ll-bar {
  background: var(--ll-accent);
}

.ll-bar-g:hover .ll-bar {
  background: var(--ll-ink-3);
}

.ll-bar-g-now:hover .ll-bar {
  background: var(--ll-ink);
}

/* hover label. Plain HTML rather than a browser tooltip: it can be
   styled, and it appears straight away instead of after the
   operating system's one-second wait. */
.ll-bar-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  padding: 6px 9px;
  border-radius: 4px;
  background: var(--ll-ink);
  color: #fff;
  font-size: 0.74rem;
  line-height: 1.25;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.ll-bar-tip b {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
}

.ll-bar-g:hover .ll-bar-tip {
  opacity: 1;
}

/* the end columns pull their label inside the chart rather than
   letting it hang off the page */
.ll-bar-g:first-child .ll-bar-tip {
  left: 0;
  transform: none;
}

.ll-bar-g:last-child .ll-bar-tip {
  left: auto;
  right: 0;
  transform: none;
}

/* --- metric row ---------------------------------------------- */
.ll-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--ll-line);
}

/* even padding on every cell, so all four charts are the same width;
   column layout pins every chart to a shared baseline however long
   the note above it runs */
.ll-metric {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 22px;
  border-right: 1px solid var(--ll-line);
}

.ll-metric .ll-chart {
  margin-top: auto;
}

/* the outer cells sit flush with the page margin, so the row lines up
   with the headline above it rather than being inset by its padding */
.ll-metric:first-child {
  padding-left: 0;
}

.ll-metric:last-child {
  padding-right: 0;
  border-right: 0;
}

.ll-metric-label {
  margin-bottom: 10px;
  color: var(--ll-ink-3);
  font-size: 0.88rem;
}

.ll-metric-value {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.ll-delta {
  color: var(--ll-ink-3);
  font-size: 0.84rem;
  white-space: nowrap;
}

.ll-metric-note {
  margin: 0 0 14px;
  color: var(--ll-ink-4);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* --- sections ------------------------------------------------ */
.ll-section {
  padding-top: 46px;
}

.ll-section > .ll-sub {
  margin-bottom: 20px;
}

/* --- contents list -------------------------------------------
   The five tracks are a table of contents, so they are set as one:
   ruled rows, not cards. Name, description and the figures that
   belong to each, reading left to right.
   ------------------------------------------------------------- */
.ll-index {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ll-line-strong);
}

.ll-index > li {
  border-bottom: 1px solid var(--ll-line);
}

.ll-index-row {
  position: relative;
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr) 355px;
  align-items: baseline;
  gap: 24px;
  padding: 17px 4px;
  color: inherit;
  text-decoration: none;
  transition: background 0.14s ease;
}

.ll-index-row:hover {
  background: #f5f7fa;
  color: inherit;
  text-decoration: none;
}

/* the section names are the links, so they carry the accent rather
   than sitting in ink and only revealing themselves on hover */
.ll-index-name {
  color: var(--ll-accent);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}

/* no underline on hover: .ll-index-scope sits inside the name, and
   text-decoration would carry down onto it. The row tint and the
   change bar are the feedback. */

/* the period each row's figures cover, and the period the section
   opens on */
.ll-index-scope {
  display: block;
  margin-top: 3px;
  color: var(--ll-ink-4);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
}

.ll-index-row:hover .ll-index-scope {
  color: var(--ll-ink-3);
}

.ll-index-desc {
  color: var(--ll-ink-3);
  font-size: 0.93rem;
  line-height: 1.5;
}

/* two equal cells, each flush right, so the figures form columns
   down the list instead of a ragged edge */
.ll-index-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  color: var(--ll-ink-3);
  font-size: 0.86rem;
  text-align: right;
  white-space: nowrap;
}

.ll-index-figs b {
  color: var(--ll-ink);
  font-weight: 700;
}

/* a change bar in the margin, the way a revised line is marked in
   print: it shows which row is live without moving anything */
.ll-index-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 2px;
  background: var(--ll-accent);
  opacity: 0;
  transition: opacity 0.14s ease;
}

.ll-index-row:hover::before {
  opacity: 1;
}

/* --- lens control --------------------------------------------
   One table standing in for several ranked lists. The buttons are
   a view control, not navigation, so they read as a set rather than
   as links.
   ------------------------------------------------------------- */
/* One continuous bar of right-angled segments sharing their edges,
   sitting on a common baseline. The segment in view is filled and
   stands taller, the way a tab rises out of a rule. */
/* No overflow property here. overflow-x makes overflow-y compute to
   auto too, and the active tab's rule sits a pixel below the box —
   just enough to raise a scrollbar. The labels wrap instead. */
/* Sticky while its own section is on screen, so the ranking can be
   changed from halfway down the table instead of scrolling back. The
   background is load-bearing: without it the rows pass through the
   tabs rather than behind them. */
.ll-lens {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 12px;
  background: var(--ll-canvas);
  border-bottom: 1px solid var(--ll-line);
}

/* Names the row as a control. Without it a line of short labels on a
   hairline sits directly above the table's own header row and reads
   as a second one — the more so because two of the labels repeat
   column names. */
.ll-lens-lead {
  align-self: center;
  padding-bottom: 3px;
  margin-right: 18px;
  color: var(--ll-ink-4);
  font-size: 0.84rem;
  white-space: nowrap;
}

.ll-lens-btn {
  position: relative;
  flex: 0 0 auto;
  padding: 9px 20px 12px;
  border: 0;
  background: none;
  color: var(--ll-ink-2);
  font-family: inherit;
  /* deliberately larger and heavier than .ll-table th, so the two
     rows cannot be mistaken for each other at a glance */
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.14s ease;
}

.ll-lens-btn:first-child {
  padding-left: 0;
}

.ll-lens-btn > span {
  display: block;
  transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.25, 1);
}

.ll-lens-btn:hover {
  color: var(--ll-accent);
}

/* a small lift, so the label answers the cursor */
.ll-lens-btn:hover > span {
  transform: translateY(-1px);
}

.ll-lens-btn.is-on {
  color: var(--ll-accent);
  font-weight: 700;
}

/* The same short accent rule the breadcrumb and the section heads use
   to say "this one". It wipes in from the left under the cursor, so
   hovering shows you the mark you are about to take. */
.ll-lens-btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--ll-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.25, 1);
}

.ll-lens-btn:hover::after,
.ll-lens-btn.is-on::after {
  transform: scaleX(1);
}


@media (prefers-reduced-motion: reduce) {
  .ll-lens-btn::after {
    transition: none;
  }

  .ll-lens-btn > span {
    transition: none;
  }
}

.ll-lens-btn:focus-visible {
  outline: 2px solid var(--ll-accent);
  outline-offset: 2px;
}

.ll-lens-note {
  margin: 0 0 18px;
  color: var(--ll-ink-4);
  font-size: 0.86rem;
}

/* --- tables --------------------------------------------------- */
.ll-table-wrap {
  overflow-x: auto;
}


.ll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.ll-table th {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--ll-line-strong);
  color: var(--ll-ink-3);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.ll-table td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--ll-line);
  color: var(--ll-ink-2);
  vertical-align: top;
}

/* figures never break across lines — a year range or a thousands
   separator split in two is unreadable on a narrow screen */
.ll-table td.ll-num,
.ll-table th.ll-num {
  white-space: nowrap;
}

.ll-table tr:last-child td {
  border-bottom: 0;
}

.ll-table tbody tr:hover td {
  background: #f5f7fa;
}

/* Re-ranking sweep. The silo colour washes through each row in turn,
   top to bottom, then clears. It says the order has changed and to
   read from the top — which is how a ranked table is read. Nothing
   moves and nothing is scaled, so the figures stay legible while it
   runs. */
@keyframes ll-row-sweep {
  0% {
    background-color: var(--ll-accent-wash);
    opacity: 0.45;
  }
  22% {
    background-color: var(--ll-accent-wash);
    opacity: 1;
  }
  100% {
    background-color: transparent;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ll-table tbody tr {
    animation: none !important;
  }
}

.ll-table a {
  color: var(--ll-accent);
  font-weight: 600;
  text-decoration: none;
}

.ll-table a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ll-table b {
  color: var(--ll-ink);
  font-weight: 700;
}

/* scoped past `.ll-table th`, which sets text-align on the element
   and would otherwise outrank a bare class and strand the numeric
   headers on the left of their own columns */
.ll-right,
.ll-table th.ll-right,
.ll-table td.ll-right {
  text-align: right;
}

/* a quiet qualifier beside a value, for a row that is not final */
.ll-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--ll-line-strong);
  border-radius: 3px;
  color: var(--ll-ink-4);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: 1px;
}

/* proportion drawn in the row itself, so a column of numbers can be
   read as a shape without a separate chart */
/* the rail is 8px against a ~20px line of text, so it needs centring
   against the row rather than inheriting the table's top alignment */
.ll-bar-cell {
  width: 180px;
  min-width: 120px;
  vertical-align: middle;
}

.ll-bar-rail {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 2px;
  background: var(--ll-line);
}

.ll-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ll-accent);
}

/* a chart given the full measure of the page rather than half of it */
.ll-wide-chart {
  padding-top: 4px;
}

/* the one column allowed to run long; everything else stays on a line */
.ll-question {
  min-width: 260px;
  max-width: 420px;
  line-height: 1.45;
}

/* --- two-way split -------------------------------------------- */
.ll-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ll-line-strong);
}

.ll-split-cell {
  padding: 22px 24px 22px 0;
  border-right: 1px solid var(--ll-line);
}

.ll-split-cell:last-child {
  padding-right: 0;
  padding-left: 24px;
  border-right: 0;
}

.ll-split-name {
  margin-bottom: 8px;
  color: var(--ll-ink-3);
  font-size: 0.88rem;
}

.ll-split-figure {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.ll-split-label {
  margin-top: 5px;
  color: var(--ll-ink-4);
  font-size: 0.84rem;
}

.ll-split-rows {
  margin: 16px 0 0;
}

.ll-split-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--ll-line);
}

.ll-split-rows dt {
  color: var(--ll-ink-3);
  font-size: 0.88rem;
}

.ll-split-rows dd {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
}

/* --- coverage note ------------------------------------------- */
.ll-coverage {
  margin: 26px 0 0;
  color: var(--ll-ink-4);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* --- responsive ---------------------------------------------- */
@media (max-width: 1000px) {
  .ll-headline {
    grid-template-columns: 1fr;
  }

  .ll-headline-main {
    padding: 28px 0 24px;
    border-right: 0;
    border-bottom: 1px solid var(--ll-line);
  }

  .ll-headline-chart {
    padding: 24px 0 26px;
  }

  .ll-headline-chart .ll-chart {
    margin-top: 0;
  }

  .ll-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ll-metric:nth-child(2) { padding-right: 0; border-right: 0; }
  .ll-metric:nth-child(3) { padding-left: 0; }
  .ll-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--ll-line); }

  /* the figures drop under the description rather than squeezing it */
  .ll-index-row {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 6px 20px;
  }

  .ll-index-figs {
    grid-column: 2;
    grid-template-columns: repeat(2, max-content);
    text-align: left;
  }
}

@media (max-width: 640px) {
  :root {
    --ll-wrap: min(1180px, 100% - 28px);
  }

  .ll-masthead {
    padding: 28px 0 22px;
  }

  .ll-metrics {
    grid-template-columns: 1fr;
  }

  .ll-index-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .ll-index-figs {
    grid-column: 1;
    gap: 6px 18px;
  }

  .ll-split {
    grid-template-columns: 1fr;
  }

  .ll-split-cell,
  .ll-split-cell:last-child {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid var(--ll-line);
  }

  .ll-split-cell:last-child {
    border-bottom: 0;
  }

  .ll-metric {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid var(--ll-line);
  }

  .ll-metric:last-child {
    border-bottom: 0;
  }

  /* the page margin is narrower here, so the change bar tucks closer */
  .ll-index-row::before {
    left: -8px;
  }

  /* The lead takes a line of its own, and the tabs scroll sideways
     rather than wrapping. A wrapped second row of tabs falls below the
     rule and stops reading as one control. Longer label sets — the
     member rankings, say — will not fit on one line at this width. */
  .ll-lens-lead {
    flex: 0 0 auto;
    margin-right: 12px;
  }

  .ll-lens {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ll-lens::-webkit-scrollbar {
    display: none;
  }

  /* overflow-x makes overflow-y compute to auto as well, so the active
     tab's marker has to sit inside the box or it raises a scrollbar */
  .ll-lens-btn::after {
    bottom: 0;
  }

  .ll-lens-btn {
    padding: 9px 8px 12px;
    font-size: 0.95rem;
  }

  .ll-lens-btn:first-child {
    padding-left: 0;
  }
}

/* ============================================================
   Record pages

   The third kind of page: one document, one president, one bill.
   A landing page is read, a directory is used, a record is cited —
   so what matters here is that the thing can be identified, placed
   in time, read, and traced back to its source.
   ============================================================ */

/* The title of a record is a sentence, not a word: "Advancing Women's
   Health To Improve Outcomes in All Phases of Life" at the masthead
   size would run to four lines and shout. */
.ll-h1-record {
  max-width: 24ch;
  font-size: clamp(1.75rem, 3.1vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* what kind of thing this is, above its name */
.ll-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--ll-accent);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ll-kicker a {
  color: inherit;
  text-decoration: none;
}

.ll-kicker a:hover {
  text-decoration: underline;
}

/* the line under the title: who, and when */
.ll-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 14px 0 0;
  color: var(--ll-ink-3);
  font-size: 0.95rem;
}

.ll-byline b {
  color: var(--ll-ink-2);
  font-weight: 600;
}

/* --- the facts of the record ----------------------------------
   Label over value, ruled across the top, as many as there are.
   Not the metric row: these are identifiers and dates, not
   measures, so they stay quiet and small.
   -------------------------------------------------------------- */
.ll-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 20px 26px;
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--ll-line-strong);
}

.ll-fact-label {
  margin-bottom: 4px;
  color: var(--ll-ink-4);
  font-size: 0.8rem;
}

.ll-fact-value {
  color: var(--ll-ink);
  font-size: 0.98rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ll-fact-value a {
  color: var(--ll-accent);
  text-decoration: none;
}

.ll-fact-value a:hover {
  text-decoration: underline;
}

/* --- a row of links out ---------------------------------------- */
.ll-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- the document itself ---------------------------------------
   Set at a reading measure in the page's own face rather than a
   typewriter one: this is a text to be read, and the source's line
   breaks are kept because they carry the document's structure.

   Full height by default. The clamp is added by script only when
   the text is long enough to need it, so no script means the whole
   document rather than a box that cannot be opened.
   ---------------------------------------------------------------- */
.ll-doc {
  position: relative;
  margin-top: 4px;
}

.ll-doc pre {
  margin: 0;
  max-width: 78ch;
  color: var(--ll-ink-2);
  font-family: inherit;
  font-size: 0.97rem;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ll-doc.is-clamped {
  max-height: 34rem;
  overflow: hidden;
}

.ll-doc.is-clamped::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8rem;
  background: linear-gradient(to bottom, rgba(251, 251, 250, 0), var(--ll-canvas));
  pointer-events: none;
}

.ll-doc-more {
  margin-top: 14px;
}

/* --- portrait ---------------------------------------------------
   For a record that is a person. Square, ruled, and small: it sits
   beside the name as identification, not as decoration.
   ---------------------------------------------------------------- */
.ll-portrait {
  display: block;
  width: 112px;
  height: 112px;
  border: 1px solid var(--ll-line-strong);
  border-radius: 9px;
  object-fit: cover;
  object-position: top center;
  background: var(--ll-surface);
}

/* ============================================================
   Directory pages

   The second kind of page in a silo: a landing page is read, a
   directory is used. Everything below is for the second — the
   sections of the silo as tabs, one search panel, a sentence
   saying what came back, the table, and a pager.

   Deliberately no charts here. The silo's landing page carries
   those; a reader who has reached a directory is looking for a
   record, and anything between them and the table is in the way.
   ============================================================ */

/* --- section switcher -----------------------------------------
   The same tabs-on-a-rule shape as the ranking lens, but these are
   links: the current one is marked, not pressed. Sits above the
   search panel so a reader who picked the wrong directory can move
   without going back to the landing page.
   ------------------------------------------------------------- */
/* One row, always. Eight directories wrap onto two or three rows
   somewhere between a large phone and a laptop, and a wrapped second
   row falls below the rule and stops reading as one control.

   So the row scrolls at every width instead, and carries a shadow at
   whichever edge still has tabs behind it: the two cover layers are
   attached to the content and slide away as that edge is reached, so
   the hint shows only while it is true. Where all eight fit — most
   desktops — the covers sit over both shadows and nothing shows. No
   script, no breakpoint to get wrong. */
.ll-switch {
  display: flex;
  flex-wrap: nowrap;
  margin: 0 0 26px;
  border-bottom: 1px solid var(--ll-line);
  overflow-x: auto;
  scrollbar-width: none;
  background-image:
    linear-gradient(to right, var(--ll-canvas), rgba(251, 251, 250, 0)),
    linear-gradient(to left, var(--ll-canvas), rgba(251, 251, 250, 0)),
    linear-gradient(to right, rgba(15, 27, 42, 0.14), rgba(15, 27, 42, 0)),
    linear-gradient(to left, rgba(15, 27, 42, 0.14), rgba(15, 27, 42, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}

.ll-switch::-webkit-scrollbar {
  display: none;
}

.ll-switch a {
  position: relative;
  padding: 9px 18px 12px;
  color: var(--ll-ink-2);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.14s ease;
}

.ll-switch a:first-child {
  padding-left: 0;
}

.ll-switch a:hover,
.ll-switch a[aria-current="page"] {
  color: var(--ll-accent);
}

.ll-switch a[aria-current="page"] {
  font-weight: 700;
}

/* bottom: 0, not -1px. overflow-x makes overflow-y compute to auto as
   well, so a marker hanging a pixel below the box would raise a
   vertical scrollbar on the row. It covers the hairline instead. */
.ll-switch a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--ll-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.25, 1);
}

.ll-switch a:hover::after,
.ll-switch a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* --- search panel ---------------------------------------------- */
.ll-search {
  padding: 20px 22px 22px;
  border: 1px solid var(--ll-line);
  border-radius: 9px;
  background: var(--ll-surface);
}

/* The keyword box takes the space, because it is the control people
   reach for; the two narrowing selects sit beside it, and the buttons
   align to the foot of the row rather than the labels. */
.ll-fields {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 0.9fr) auto;
  gap: 14px;
  align-items: end;
}

.ll-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ll-field label {
  color: var(--ll-ink-3);
  font-size: 0.84rem;
}

.ll-field input,
.ll-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ll-line-strong);
  border-radius: 7px;
  background: var(--ll-surface);
  color: var(--ll-ink);
  font-family: inherit;
  font-size: 0.95rem;
}

.ll-field input:focus-visible,
.ll-field select:focus-visible {
  outline: 2px solid var(--ll-accent);
  outline-offset: 2px;
}

.ll-field-actions {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* the one filled button on the page, because submitting is the one
   thing this panel is for */
.ll-btn-primary,
.ll-btn-primary:hover {
  border-color: var(--ll-accent);
  background: var(--ll-accent);
  color: var(--ll-surface);
}

.ll-btn-primary:hover {
  filter: brightness(1.15);
}

.ll-btn-quiet {
  color: var(--ll-ink-3);
}

/* --- what came back -------------------------------------------- */
.ll-result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 28px 0 14px;
  color: var(--ll-ink-3);
  font-size: 0.92rem;
}

.ll-result b {
  color: var(--ll-ink);
}

.ll-result a {
  color: var(--ll-accent);
}

.ll-empty {
  padding: 38px 0 42px;
  border-top: 1px solid var(--ll-line);
  color: var(--ll-ink-3);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* --- pager ------------------------------------------------------
   Page numbers around the current one, with the ends always reachable:
   fifty-two pages of orders is a long way to walk one page at a time.
   ---------------------------------------------------------------- */
/* The rule above the row is the progress bar: a hairline across the
   full width, with the accent filled to however far through the set
   the reader is. Boxed page numbers are what every table of results
   has ever looked like; this says where you are as well as where you
   can go. */
.ll-pager {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 22px;
  padding-top: 20px;
}

.ll-pager::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--ll-line);
}

.ll-pager-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--ll-accent);
  transition: width 0.3s cubic-bezier(0.2, 0.7, 0.25, 1);
}

/* page numbers set as type, marked the way every other "this one" on
   the site is marked: the short accent rule, wiped in on hover */
.ll-pager-pages {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* a square target per page, big enough for a thumb: 38px, which is the
   smallest a tap target should be */
.ll-pager-pages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ll-ink-2);
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.ll-pager-pages a:hover {
  border-color: var(--ll-line-strong);
  background: var(--ll-accent-soft);
  color: var(--ll-accent);
  text-decoration: none;
}

/* the page you are on is filled, not outlined: at a glance the row
   reads as one marked position rather than several boxes */
.ll-pager-pages a.is-on,
.ll-pager-pages a.is-on:hover {
  border-color: var(--ll-accent);
  background: var(--ll-accent);
  color: var(--ll-surface);
  font-weight: 700;
}

.ll-pager-gap {
  padding: 0 4px;
  color: var(--ll-ink-4);
}

/* the ends are buttons, and keep their words: an arrow alone makes a
   reader work out which way is forwards */
.ll-pager-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--ll-line-strong);
  border-radius: 8px;
  background: var(--ll-surface);
  color: var(--ll-accent);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.ll-pager-step:hover {
  border-color: var(--ll-accent);
  background: var(--ll-accent-soft);
  color: var(--ll-accent);
  text-decoration: none;
}

.ll-pager-step i {
  font-size: 0.82em;
  opacity: 0.75;
  transition: transform 0.16s cubic-bezier(0.2, 0.7, 0.25, 1);
}

/* the arrow leans the way it travels */
.ll-pager-step:hover i:first-child {
  transform: translateX(-2px);
}

.ll-pager-step:hover i:last-child {
  transform: translateX(2px);
}

/* kept in the row rather than removed, so the numbers do not shift
   sideways as you reach either end */
.ll-pager-step.is-off {
  border-color: var(--ll-line);
  background: none;
  color: var(--ll-ink-4);
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ll-pager-step i {
    transition: none;
  }
}

/* what this page covers, and where it sits: the span leads, because it
   is the part a reader can act on */
.ll-pager-note {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  margin-left: auto;
  color: var(--ll-ink-4);
  font-size: 0.86rem;
  line-height: 1.35;
  text-align: right;
}

.ll-pager-note b {
  color: var(--ll-ink-2);
  font-weight: 600;
  white-space: nowrap;
}

.ll-pager-of {
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .ll-pager-track,
  .ll-pager-pages a::after {
    transition: none;
  }
}

@media (max-width: 860px) {
  .ll-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ll-field-keyword {
    grid-column: 1 / -1;
  }

  .ll-field-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .ll-search {
    padding: 16px 16px 18px;
  }

  .ll-fields {
    grid-template-columns: 1fr;
  }

  /* the tabs tighten up; the scrolling row itself is set once, at
     every width, rather than switched on at a breakpoint */
  .ll-switch a {
    padding: 9px 12px 12px;
  }

  /* three lines, not four: the two ends share the first, the numbers
     take the second, the span the third */
  .ll-pager {
    gap: 12px 8px;
  }

  .ll-pager-step {
    order: 1;
  }

  .ll-pager-step:last-of-type {
    margin-left: auto;
  }

  .ll-pager-pages {
    order: 2;
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ll-pager-note {
    order: 3;
    flex: 0 0 100%;
    align-items: center;
    margin: 0;
    text-align: center;
  }

  /* --- the directory table on a phone -------------------------
     A results table is the content of the page, so it cannot be
     left to scroll sideways with the date hidden off the edge.
     Each row becomes a record instead: the title on its own line,
     then the identifier, the context and the date beneath it as
     one muted line.

     This is the contract for a directory table, and the reason
     every one of them is built to the same four columns in the
     same order: identifier, title, context, date.
     ------------------------------------------------------------ */
  .ll-directory thead {
    display: none;
  }

  .ll-directory,
  .ll-directory tbody,
  .ll-directory tr {
    display: block;
    width: 100%;
  }

  .ll-directory tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 9px;
    padding: 13px 0;
    border-bottom: 1px solid var(--ll-line);
  }

  .ll-directory td {
    display: block;
    padding: 0;
    border: 0;
    color: var(--ll-ink-4);
    font-size: 0.84rem;
  }

  /* the title leads, on a line of its own */
  .ll-directory td:nth-child(2) {
    order: 1;
    flex: 0 0 100%;
    max-width: none;
    min-width: 0;
    margin-bottom: 3px;
    color: var(--ll-ink);
    font-size: 0.98rem;
    line-height: 1.45;
  }

  .ll-directory td:nth-child(1) { order: 2; }
  .ll-directory td:nth-child(3) { order: 3; }
  .ll-directory td:nth-child(4) { order: 4; }

  /* right alignment is a column idea; there are no columns here */
  .ll-directory td.ll-right {
    text-align: left;
  }

  .ll-directory td:nth-child(3)::before,
  .ll-directory td:nth-child(4)::before {
    content: "\00B7";
    margin-right: 9px;
    color: var(--ll-line-strong);
  }

  /* the context link is a secondary thing at this width */
  .ll-directory td:nth-child(3) a {
    color: var(--ll-ink-3);
  }

  .ll-directory tbody tr:hover td {
    background: none;
  }

  /* For a comparison table, which has more than the directory's four
     columns and cannot stack: the secondary columns stand down at this
     width rather than pushing the table sideways. */
  .ll-table .ll-hide-sm {
    display: none;
  }
}