/* ═══════════════════════════════════════════════════════════════════════════
   FEDERAL INDEX — generated homepage sections
   Styles the blocks buildHome.ts writes between the FI: markers: the source
   list, the industries rail, and the latest band.

   Every value is a token from /tokens.css. No raw colour appears here, and the
   build fails if one does.

   The marquee is gone. This file used to carry `animation: mq-scroll 64s
   linear infinite` driving two tracks of agency names past the reader
   continuously. A publisher name exists so it can be CHECKED; one that will
   not hold still cannot be. The brief forbids autonomous carousels for
   precisely this reason, and the section's own copy claimed it was "not a logo
   wall" while behaving like one.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── source list ─────────────────────────────────────────────────────────── */
.src-head h2 {
  font-size: var(--fi-size-xl);
  letter-spacing: -.02em;
  color: var(--fi-color-primary);
  margin-top: var(--fi-space-2);
  max-width: 26ch;
}

.src-groups {
  display: grid;
  gap: var(--fi-space-4);
  margin-top: var(--fi-space-6);
}
/* Federal holds five times the publishers of any other group. In a single row
   of four it ran a screen below its neighbours and left the row beside it
   empty, so it spans the row and flows into columns; the short groups share
   the row beneath it. */
@media (min-width: 760px) {
  .src-groups { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .src-group-wide { grid-column: 1 / -1; }
  .src-group-wide dl { grid-template-columns: repeat(2, 1fr); column-gap: var(--fi-space-4); }
}
@media (min-width: 1040px) {
  .src-group-wide dl { grid-template-columns: repeat(3, 1fr); column-gap: var(--fi-space-6); }
}
@media (max-width: 759px) {
  .src-groups { grid-template-columns: 1fr; }
}
/* In a multi-column list "last child has no rule" leaves the other columns'
   bottoms ruled and one not; every row is ruled instead. */
@media (min-width: 760px) {
  .src-group-wide dl > div:last-child { border-bottom: 1px solid var(--fi-color-border); }
}

/* The share bar: this publisher's documents against the largest publisher on
   the page, on one linear scale. It is the count drawn, not decoration. It
   draws in once when the list comes into view and never moves again. */
.src-bar {
  display: block;
  height: 3px;
  margin-top: var(--fi-space-1);
  border-radius: 2px;
  background: var(--fi-color-tint);
  overflow: hidden;
}
.src-bar::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--share, 0%);
  background: var(--fi-color-primary);
  border-radius: inherit;
}
@media (prefers-reduced-motion: no-preference) {
  .src-groups[data-rise] .src-bar::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 45ms + 150ms);
  }
  .src-groups[data-rise].in .src-bar::before { transform: none; }
}
.src-group dl > div:hover .src-bar::before { background: var(--fi-color-accent, var(--fi-color-primary)); }

.src-group h3 {
  font-size: var(--fi-size-3xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fi-color-ink-muted);
  margin: 0 0 var(--fi-space-2);
  padding-bottom: var(--fi-space-1);
  /* Structure is explicit: a rule, not a shadow. */
  border-bottom: 2px solid var(--fi-color-primary);
}

.src-group dl { margin: 0; display: grid; gap: var(--fi-space-2); }
.src-group dl > div { border-bottom: 1px solid var(--fi-color-border); padding-bottom: var(--fi-space-2); }
.src-group dl > div:last-child { border-bottom: 0; }
.src-group dt {
  font-size: var(--fi-size-2xs);
  font-weight: 600;
  color: var(--fi-color-primary);
}
.src-group dd {
  margin: 2px 0 0;
  font-size: var(--fi-size-3xs);
  color: var(--fi-color-ink-muted);
  line-height: 1.45;
}
/* How much we hold from this publisher. On its own line and in mono so the
   figures form a readable column down the group, rather than trailing off the
   end of a sentence at three different indents. */
.src-n {
  display: block;
  margin-top: var(--fi-space-05);
  font-family: var(--fi-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fi-size-3xs);
  color: var(--fi-color-ink-secondary);
}
.src-asof {
  margin-top: var(--fi-space-2);
  font-family: var(--fi-font-mono);
  font-size: var(--fi-size-3xs);
  color: var(--fi-color-ink-muted);
}

/* ── industries rail ─────────────────────────────────────────────────────
   Scrolled by the reader, never on its own: two buttons and a focusable list.
   That is the line the brief draws — a control the reader operates is fine,
   motion that runs at them is not. */
.industries .ind-head h2 {
  font-size: var(--fi-size-xl);
  letter-spacing: -.02em;
  color: var(--fi-color-primary);
  margin-top: var(--fi-space-2);
  max-width: 26ch;
}
.industries .ind-head p {
  color: var(--fi-color-ink-secondary);
  max-width: var(--fi-measure-base);
  margin-top: var(--fi-space-2);
  font-size: var(--fi-size-md);
}

.rail-wrap {
  position: relative;
  margin-top: var(--fi-space-5);
  display: flex;
  align-items: stretch;
  gap: var(--fi-space-105);
}

.rail {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--fi-space-2);
  display: flex;
  gap: var(--fi-space-105);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  flex: 1 1 auto;
}
.rail:focus-visible { outline: 3px solid var(--fi-color-focus); outline-offset: 3px; }

.rail-card {
  flex: 0 0 auto;
  width: 210px;
  scroll-snap-align: start;
  border: 1px solid var(--fi-color-border);
  border-top: 3px solid var(--fi-color-primary);
  background: var(--fi-color-surface);
  padding: var(--fi-space-2) var(--fi-space-105);
  display: flex;
  flex-direction: column;
  gap: var(--fi-space-05);
}
.rc-code {
  font-family: var(--fi-font-mono);
  font-size: var(--fi-size-3xs);
  font-variant-numeric: tabular-nums;
  color: var(--fi-color-ink-muted);
}
.rc-title {
  font-size: var(--fi-size-2xs);
  font-weight: 600;
  color: var(--fi-color-primary);
  line-height: 1.3;
}
.rc-n {
  font-size: var(--fi-size-3xs);
  color: var(--fi-color-ink-muted);
  margin-top: auto;
  padding-top: var(--fi-space-1);
}

/* 44px minimum target, per WCAG 2.2 SC 2.5.8 with room to spare. */
.rail-btn {
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  align-self: center;
  border: 1px solid var(--fi-color-border-strong);
  border-radius: var(--fi-radius-md);
  background: var(--fi-color-surface);
  color: var(--fi-color-primary);
  font-size: var(--fi-size-md);
  cursor: pointer;
  transition: background-color var(--fi-duration-1) var(--fi-ease-standard),
              border-color var(--fi-duration-1) var(--fi-ease-standard);
}
.rail-btn:hover { background: var(--fi-color-tint); border-color: var(--fi-color-primary); }
.rail-btn[disabled] { opacity: .4; cursor: default; }

@media (max-width: 700px) {
  /* The buttons are redundant where the surface is touch-scrollable, and two
     dead controls read worse than none. */
  .rail-btn { display: none; }
}

/* ── latest band ─────────────────────────────────────────────────────────────
   Set as a REGISTER, not as marketing cards: hairline rules, mono tabular
   metadata, one navy top rule per entry. The reader is meant to scan issuing
   authority and dates and then click through to the government's own page, so
   the citation furniture is as prominent as the headline. */
.readtoday .rt-head h2 {
  font-size: var(--fi-size-xl);
  letter-spacing: -.02em;
  color: var(--fi-color-primary);
  margin-top: var(--fi-space-2);
  max-width: 26ch;
}
.readtoday .rt-head p {
  color: var(--fi-color-ink-secondary);
  max-width: var(--fi-measure-base);
  margin-top: var(--fi-space-2);
  font-size: var(--fi-size-md);
}

.rt-list {
  list-style: none;
  margin: var(--fi-space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--fi-space-105);
}
@media (min-width: 900px) { .rt-list { grid-template-columns: repeat(2, 1fr); } }

.rt-item {
  border: 1px solid var(--fi-color-border);
  border-top: 3px solid var(--fi-color-primary);
  background: var(--fi-color-surface);
  padding: var(--fi-space-2) var(--fi-space-105) var(--fi-space-105);
  display: flex;
  flex-direction: column;
  gap: var(--fi-space-1);
}

.rt-meta {
  display: flex;
  gap: var(--fi-space-1);
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--fi-font-mono);
  font-size: var(--fi-size-3xs);
}
/* The document TYPE is the first thing a compliance reader triages on, so it
   gets the chip. It is a word, not a colour — the palette's status hues are
   reserved for state we have measured, and "this is a final rule" is a fact
   about the document, not a judgement about the reader. */
.rt-kind {
  background: var(--fi-color-tint);
  color: var(--fi-color-primary);
  font-weight: 600;
  letter-spacing: .04em;
  padding: 2px var(--fi-space-1);
  border-radius: var(--fi-radius-sm);
  white-space: nowrap;
}
.rt-agency {
  color: var(--fi-color-ink-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.rt-title {
  font-size: var(--fi-size-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--fi-color-primary);
  text-decoration: none;
  /* Long federal rule titles run to several lines; cap the measure so the
     entry stays a scannable block rather than a paragraph. */
  max-width: var(--fi-measure-narrow);
}
.rt-title:hover { text-decoration: underline; }
.rt-title:focus-visible { outline: 3px solid var(--fi-color-focus); outline-offset: 2px; }

.rt-dates {
  margin-top: auto;
  padding-top: var(--fi-space-1);
  display: flex;
  gap: var(--fi-space-2);
  flex-wrap: wrap;
  font-family: var(--fi-font-mono);
  font-size: var(--fi-size-3xs);
  font-variant-numeric: tabular-nums;
  color: var(--fi-color-ink-muted);
}
/* An effective date is the one that starts somebody's clock, so it is the only
   thing in the entry the red rule is spent on. */
.rt-eff {
  color: var(--fi-color-ink-secondary);
  font-weight: 600;
  border-left: 2px solid var(--fi-color-accent);
  padding-left: var(--fi-space-1);
}

.rt-foot {
  margin-top: var(--fi-space-4);
  padding-top: var(--fi-space-2);
  border-top: 1px solid var(--fi-color-border);
  font-size: var(--fi-size-2xs);
  color: var(--fi-color-ink-muted);
  max-width: var(--fi-measure-base);
}
/* The corpus total. Mono and tabular because it is a measured stock, and it is
   generated in the same pass as the documents above it — the two cannot drift. */
.rt-foot .hub-n {
  font-family: var(--fi-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fi-color-primary);
}

/* ── coverage grid ───────────────────────────────────────────────────────────
   The FI:COVERAGE block. 51 jurisdictions on one grid so the two coverage
   stories — complete for legislation, sparse for counties — are legible at the
   same size. A county state is marked with the red rule, which is this site's
   one signature use of the accent: a rule, never a fill and never text.

   The mark is deliberately NOT colour alone. Every cell also carries its own
   words ("Legislation" / "3 county govs") and a visually-hidden sentence
   naming the state and the counties, so the grid reads correctly to a screen
   reader and to anyone who cannot separate the two swatches. */
.cv { margin-top: var(--fi-space-4); }

.cv-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 1px;
  background: var(--fi-color-border);
  border: 1px solid var(--fi-color-border);
}

.cv-cell {
  background: var(--fi-color-surface);
  padding: var(--fi-space-1) var(--fi-space-05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  text-align: center;
  /* A transparent rule, so a covered cell does not shift the grid by 2px. */
  border-top: 2px solid transparent;
}
.cv-cell.has-county {
  border-top-color: var(--fi-color-accent);
  background: var(--fi-color-tint);
}

.cv-ab {
  font-family: var(--fi-font-mono);
  font-size: var(--fi-size-2xs);
  font-weight: 600;
  color: var(--fi-color-primary);
  text-decoration: none;
  border: 0;
}
/* The county count. Present only where there is one, so the covered cells are
   distinguishable without reading the tint. Mono and tabular so the column of
   numerals lines up down the grid. */
.cv-n {
  font-family: var(--fi-font-mono);
  font-size: var(--fi-size-3xs);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.1;
  color: var(--fi-color-accent-deep);
}

/* Visually hidden, still announced. */
.cv-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cv-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fi-space-3);
  margin-top: var(--fi-space-2);
  font-size: var(--fi-size-3xs);
  color: var(--fi-color-ink-muted);
}
.cv-k { display: inline-flex; align-items: center; gap: var(--fi-space-1); }
.cv-swatch {
  width: 18px; height: 10px;
  background: var(--fi-color-surface);
  border: 1px solid var(--fi-color-border-strong);
  border-top: 2px solid transparent;
}
.cv-swatch.is-county {
  background: var(--fi-color-tint);
  border-top-color: var(--fi-color-accent);
}

.cv-note {
  margin-top: var(--fi-space-2);
  font-size: var(--fi-size-2xs);
  color: var(--fi-color-ink-muted);
  max-width: var(--fi-measure-base);
}