/* State-compliance preview styles — internal preview only (see build/build-state-pages-preview.mjs).
   Extends the site's existing Ledger visual system (DESIGN.md) rather than inventing a new one:
   same hard-shadow/flat card families, same badge shape, same Archivo/IBM Plex Mono pairing and
   green/amber/terracotta status vocabulary. State pages no longer load course.css at all (see
   build/lib/page-chrome.mjs's includeCourseStyles option) — this file is the page's only
   stylesheet besides Google Fonts, so the base reset and nav/breadcrumb/footer chrome rules
   (.nav, .crumbs, .footer) are defined here too, copied verbatim from course.css's own rules so
   that chrome renders identically without depending on that file.

   Container widths follow DESIGN.md's own container/container-wide direction: single-column
   pages cap at ~1000px; the two-column state-page shell (main + sticky sidebar) widens to
   ~1240px at >=1040px, where the sidebar has room to sit beside a ~760-820px main column. */

/* ---- Base reset + chrome (previously inherited from course.css; copied verbatim from that
   file's own reset/nav/breadcrumb/footer rules — course.css itself is no longer loaded). ---- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Archivo', sans-serif; background: #fff; color: #1A1F18; line-height: 1.65; }

.nav { background: #fff; border-bottom: 1px solid #E2E6DF; position: sticky; top: 0; z-index: 10; }
.nav-inner { max-width: 1240px; margin: 0 auto; padding: 16px 44px; display: flex; align-items: center; justify-content: space-between; }
.logo { font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: #0B0F0A; text-decoration: none; }
.logo mark { background: #F3EE74; color: #0B0F0A; padding: 0 3px; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-back { font-family: 'IBM Plex Mono'; font-size: 12px; color: #5A6457; text-decoration: none; }
.nav-back:hover { color: #0B0F0A; }

.crumbs { max-width: 1000px; margin: 0 auto; padding: 20px 44px 0; font-family: 'IBM Plex Mono'; font-size: 12px; color: #5A6457; font-style: italic; opacity: .5; }
.crumbs.crumbs-wide { max-width: 1240px; }
.crumbs a { color: #5A6457; text-decoration: none; }
.crumbs a:hover { color: #155138; }
.crumb-sep { margin: 0 8px; color: #C7CFC3; }
.crumb-lead { margin: 0 8px 0 0; }
.crumb-current { color: #0B0F0A; }

.footer { background: #0B0F0A; color: #9DA89A; padding: 28px 44px; font-family: 'IBM Plex Mono'; font-size: 10px; letter-spacing: .04em; line-height: 1.6; text-align: center; }
.footer a { color: #9DB89A; }

@media (max-width: 640px) {
  .nav-inner { padding: 14px 20px; }
  .crumbs { padding: 16px 20px 0; }
}

/* ---- Internal preview banner ---- */

.preview-banner {
  background: #FBF1EE;
  color: #9A4A2F;
  border: 1px solid #9A4A2F;
  font-family: 'IBM Plex Mono';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 16px;
}

/* ---- Shared status badges (research verification: source-verified / review-required) ----
   This is ONE of two distinct status vocabularies on this page — the other is the requirement-
   status chip further down, which deliberately does NOT reuse this green/amber palette. Text
   label is always present alongside the color dot; never color alone. */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.status-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  display: inline-block;
  flex: none;
}
.status-badge-verified {
  background: #E8EFE4;
  color: #155138;
}
.status-badge-verified::before { background: #155138; }
.status-badge-review {
  background: #FCFBE8;
  color: #7A7440;
}
.status-badge-review::before { background: #8A6D1E; }
.status-badge-neutral {
  background: #F4F6F3;
  color: #4A5247;
}
.status-badge-neutral::before { background: #5A6457; }

/* ---- Requirement-status chip (what the law/agency requires) ----
   Deliberately neutral black/gray, never the green/amber verification palette above — this is a
   different question ("what must you do") from research-verification ("how sure are we"). Shape
   (solid/outline/ghost) plus the humanized text label carries the distinction, not color. */

.requirement-chip {
  display: inline-block;
  font-family: 'IBM Plex Mono';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  margin-bottom: 10px;
}
.requirement-chip-solid {
  background: #0B0F0A;
  color: #FFFFFF;
}
.requirement-chip-outline {
  background: #FFFFFF;
  color: #0B0F0A;
  border: 1.5px solid #0B0F0A;
  padding: 2.5px 7.5px;
}
.requirement-chip-ghost {
  background: #F4F6F3;
  color: #5A6457;
  border: 1px dashed #C8CEC6;
  padding: 3px 8px;
}

/* ---- /states/ directory page ---- */

.states-dir { max-width: 1000px; margin: 0 auto; padding: 24px 44px 80px; }
.states-dir-eyebrow {
  font-family: 'IBM Plex Mono'; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  color: #155138; margin-bottom: 14px;
}
.states-dir h1 {
  font-weight: 800; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em;
  line-height: 1.15; margin: 0 0 18px; color: #0B0F0A;
}
.states-dir-intro { font-size: 16px; color: #4A5247; line-height: 1.6; max-width: 680px; margin-bottom: 12px; }
.states-dir-progress {
  font-family: 'IBM Plex Mono'; font-size: 14px; font-weight: 600; color: #0B0F0A; margin-bottom: 36px;
}

.state-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.state-card {
  display: block;
  background: #F4F6F3;
  color: #0B0F0A;
  border: 1px solid #0B0F0A;
  box-shadow: 6px 6px 0 #0B0F0A;
  padding: 20px;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.state-card:hover, .state-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #0B0F0A;
}
.state-card:focus-visible { outline: 2px solid #155138; outline-offset: 2px; }
.state-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.state-card-name { font-family: Archivo; font-weight: 700; font-size: 19px; color: #0B0F0A; flex: 1; min-width: 0; }
.state-card-outline { width: 84px; height: 84px; flex: 0 0 auto; color: #8fa99b; pointer-events: none; }
.state-card-outline path {
  fill: currentColor; fill-opacity: .025; stroke: currentColor; stroke-opacity: .9;
  stroke-width: 2; vector-effect: non-scaling-stroke;
}
.state-card:hover .state-card-outline path, .state-card:focus-visible .state-card-outline path {
  fill-opacity: .05; stroke-opacity: 1;
}
.state-card-status { margin-bottom: 14px; }
.state-card-stats {
  font-family: 'IBM Plex Mono'; font-size: 13px; color: #4A5247;
  display: flex; flex-direction: column; gap: 4px;
}
.state-card-stats dt { display: inline; }
.state-card-stats dd { display: inline; margin: 0; font-weight: 600; color: #0B0F0A; }
.state-card-stat-row { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted #C8CEC6; padding-bottom: 4px; }
.state-card-cta {
  font-family: 'IBM Plex Mono'; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: #155138; margin-top: 14px; padding-top: 12px; border-top: 1px solid #E2E6DF;
}

/* Collapsed by default — 47 non-linked states no longer dominate the page; the summary is the
   only always-visible affordance, restrained but clearly interactive (Ledger mono-label + caret). */
.remaining-states-details {
  border-top: 1px solid #E2E6DF;
  padding-top: 24px;
}
.remaining-states-details summary {
  font-family: Archivo; font-weight: 700; font-size: 19px; color: #0B0F0A;
  cursor: pointer; list-style: revert;
}
.remaining-states-details summary:hover { color: #155138; }
.remaining-states-details[open] summary { margin-bottom: 16px; }
.state-list-plain {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  font-family: 'IBM Plex Mono'; font-size: 13px; color: #5A6457;
}
.state-list-plain li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-left: 2px solid #C8CEC6;
  padding: 3px 0 3px 12px;
  white-space: nowrap;
}
.badge-not-researched {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #5A6457;
}

@media (min-width: 900px) {
  .state-list-plain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Individual state page ---- */

.state-page { max-width: 1000px; margin: 0 auto; padding: 24px 44px 80px; }
.state-page-eyebrow {
  font-family: 'IBM Plex Mono'; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  line-height: 1.3; color: #155138; margin-bottom: 14px;
}
.state-page h1 {
  font-weight: 800; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em;
  line-height: 1.15; margin: 0 0 20px; color: #0B0F0A;
  scroll-margin-top: 84px;
}

/* Compliance-update article titles are typically much longer sentences than a state name
   ("Massachusetts Nonprofit Compliance Guide: Key Requirements and Filing Deadlines" vs.
   "Massachusetts") — the state-page h1 rule above (800 weight, 44px cap) reads as an oversized,
   overweight block once it wraps across 2-3 lines at that size. This is scoped to
   .update-article (the wrapper div update-article.mjs's renderUpdateArticle puts on the page),
   NOT a change to .state-page h1 itself — every /states/<slug>/ page is completely unaffected.
   clamp() keeps one responsive rule instead of several fragile fixed breakpoints: ~30px at
   375-430px, ~37px at 768px, ~42-47px at 1024-1280px, ~50px at 1440px+, capped at 52px. */
.update-article h1 {
  font-weight: 700;
  font-size: clamp(30px, 1.9vw + 23px, 52px);
  letter-spacing: -.015em;
  line-height: 1.1;
  max-width: 880px;
  margin: 0 0 22px;
}

.state-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.state-status-row-meta { font-family: 'IBM Plex Mono'; font-size: 13px; color: #5A6457; }

/* font-weight: 500 is explicit here as documentation, not a visual change: Archivo is loaded on
   this site only at wght 500/600/700/800 (see page-chrome.mjs's <link>), so an unset/400 weight
   was already being silently substituted to the nearest loaded weight (500) — see the compliance-
   update card typography fix for the same reasoning. Making it explicit means this paragraph's
   weight is a deliberate choice, not an inheritance accident, everywhere this class is used
   (state-page fact answers and hero sentences, and every update-article body paragraph below). */
.state-direct-answer {
  font-size: 17px; font-weight: 500; color: #0B0F0A; line-height: 1.65; max-width: 680px; margin-bottom: 14px;
}
.state-hero-stats {
  font-family: 'IBM Plex Mono'; font-size: 13px; color: #4A5247; margin-bottom: 20px;
}

/* Full, unmodified research summary — one click away, kept out of the hero's default (closed)
   height so the hero stays compact. Reuses .state-direct-answer's own typography for the
   expanded text so it reads identically to the generated preview sentence above it. */
.research-overview-details {
  margin-bottom: 28px; border: 1px solid #E2E6DF; padding: 4px 16px;
}
.research-overview-details summary {
  font-family: 'IBM Plex Mono'; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: #155138; cursor: pointer; padding: 10px 0;
}
.research-overview-details[open] summary { border-bottom: 1px solid #E2E6DF; margin-bottom: 12px; }
.research-overview-full { padding-bottom: 14px; margin-bottom: 0; }

/* Mobile/tablet section nav (native <details>, no JS). Hidden at >=1040px, where the sticky
   sidebar's "On this page" panel takes over. */
.mobile-toc { margin-bottom: 28px; border: 1px solid #E2E6DF; padding: 4px 16px; }
.mobile-toc summary {
  font-family: 'IBM Plex Mono'; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: #155138; cursor: pointer; padding: 10px 0;
}
.mobile-toc[open] summary { border-bottom: 1px solid #E2E6DF; margin-bottom: 8px; }
.mobile-toc .toc-list { padding-bottom: 12px; }

/* ---- Two-column shell: main content + sticky sidebar (>=1040px) ---- */

.state-shell { display: block; }
.state-sidebar { display: none; }

@media (min-width: 1040px) {
  .state-page { max-width: 1240px; }
  .state-shell {
    display: grid;
    grid-template-columns: minmax(0, 820px) 288px;
    column-gap: 48px;
    align-items: start;
  }
  .state-main { min-width: 0; }
  .state-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 84px;
  }
  .mobile-toc { display: none; }
}

.sidebar-panel {
  border: 1px solid #E2E6DF;
  padding: 16px;
}
.sidebar-panel-title {
  font-family: 'IBM Plex Mono'; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #5A6457; margin-bottom: 12px;
}
.snapshot-list { display: flex; flex-direction: column; gap: 10px; font-family: 'IBM Plex Mono'; font-size: 13px; line-height: 1.4; }
/* flex-wrap: wrap is a safety net, not a visual change for the common case: a short label +
   short value (e.g. "Facts" / "72") still sits on one line exactly as before. It only matters
   once a row's content genuinely can't fit — see .snapshot-row-wrap below for the one row
   (Verification) that reliably doesn't. */
.snapshot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.snapshot-row dt { color: #5A6457; margin: 0; flex: 1 1 auto; min-width: 0; }
/* flex: none + nowrap so a value like "July 19, 2026" always wins the row's space and never
   wraps — if the row is ever tight, the label (dt) wraps first, not the value. */
.snapshot-row dd { color: #0B0F0A; font-weight: 600; margin: 0; text-align: right; flex: none; white-space: nowrap; }

/* Verification's dd holds a .status-badge (with its own sitewide white-space: nowrap), not
   plain text — the "value never wraps" rule above is exactly what let "MIXED VERIFICATION
   STATUS" push past the sidebar's ~256px inner width and overflow the panel. Applied only to
   this one row (see render-update-article.mjs's renderSidebar): the label goes on its own line,
   the badge becomes a full-width second line, left-aligned, and can wrap internally as a last
   resort on an extremely narrow panel. Every other snapshot row (dates, counts, state list)
   keeps the label-left/value-right single line above unchanged. */
.snapshot-row-wrap dd {
  flex: 1 1 100%;
  min-width: 0;
  white-space: normal;
  text-align: left;
}
.snapshot-row-wrap dd .status-badge { max-width: 100%; white-space: normal; overflow-wrap: break-word; }

.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.toc-list a {
  font-weight: 500; font-size: 14px; line-height: 1.4; color: #0B0F0A; text-decoration: none; border-bottom: 1px solid transparent;
}
.toc-list a:hover { color: #155138; border-bottom-color: #155138; }

.back-to-top {
  display: inline-block; font-family: 'IBM Plex Mono'; font-size: 12px; font-weight: 600;
  color: #155138; text-decoration: none;
}
.back-to-top-inline { margin: 8px 0 24px; }
.back-to-top-inline a { font-family: 'IBM Plex Mono'; font-size: 12px; font-weight: 600; color: #155138; text-decoration: none; }
.back-to-top:hover, .back-to-top-inline a:hover { text-decoration: underline; }

.state-section { margin-bottom: 56px; scroll-margin-top: 84px; }
/* 700 (not the previous 800) — still clearly the boldest text in each section, without the
   heaviest weight tier. Shared by every state-page section heading ("At a Glance", "Compliance
   Timeline", ...) and every update-article section heading ("Key Takeaways", each body section,
   "Official Sources", ...) — one rule, so both stay visually consistent with each other. */
.state-section h2 {
  font-family: Archivo; font-weight: 700; font-size: 28px; letter-spacing: -.01em;
  line-height: 1.2; color: #0B0F0A; margin: 0 0 18px; padding-top: 12px; border-top: 1px solid #E2E6DF;
}

/* At-a-glance: Requirement / Requirement status / Fee / Deadline / Research status */
.at-a-glance-wrap { position: relative; overflow-x: auto; margin-bottom: 12px; }
.at-a-glance {
  width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px;
}
.at-a-glance th, .at-a-glance td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid #E2E6DF; vertical-align: top;
}
.at-a-glance th {
  font-family: 'IBM Plex Mono'; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #5A6457;
}
.at-a-glance td.at-a-glance-requirement { font-weight: 700; color: #0B0F0A; }
.at-a-glance td.at-a-glance-requirement a { color: inherit; text-decoration: none; border-bottom: 1px solid #C8CEC6; }
.at-a-glance td.at-a-glance-requirement a:hover { border-bottom-color: #0B0F0A; }
.at-a-glance td { color: #4A5247; }

/* Below 768px: reflow the table into stacked accessible cards via CSS + data-label, not
   horizontal scroll. role= attributes on the markup keep the ARIA table semantics intact even
   though the visual layout becomes block-based. */
@media (max-width: 767px) {
  .at-a-glance-wrap { overflow-x: visible; }
  .at-a-glance, .at-a-glance thead, .at-a-glance tbody, .at-a-glance th, .at-a-glance td, .at-a-glance tr {
    display: block;
    width: 100%;
  }
  /* The desktop rule above sets min-width: 640px for the real table layout — that must not
     survive into the mobile card reflow, or every card is forced to 640px regardless of the
     390px viewport it's actually rendered in. This was the cause of the reported overflow. */
  .at-a-glance { min-width: 0; max-width: 100%; }
  .at-a-glance thead { position: absolute; inset: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .at-a-glance tr { border: 1px solid #E2E6DF; padding: 12px 14px; margin-bottom: 14px; }
  .at-a-glance td { border-bottom: none; padding: 4px 0; }
  .at-a-glance td::before {
    content: attr(data-label); display: block; font-family: 'IBM Plex Mono'; font-size: 11px;
    font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5A6457; margin-bottom: 2px;
  }
}

/* Compliance timeline: one continuous spine, one node per lifecycle bucket */
.timeline { position: relative; display: flex; flex-direction: column; gap: 24px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 9px; top: 10px; bottom: 10px;
  width: 2px;
  background: #C8CEC6;
}
.timeline-bucket {
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 14px;
}
.timeline-node {
  grid-column: 1; grid-row: 1;
  width: 12px; height: 12px; margin-top: 4px;
  border-radius: 999px;
  background: #155138;
  border: 2px solid #FFFFFF;
  position: relative;
  z-index: 1;
  justify-self: center;
}
.timeline-bucket-label {
  grid-column: 2; grid-row: 1;
  font-family: 'IBM Plex Mono'; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #155138; padding-top: 2px;
}
.timeline-items {
  grid-column: 2; grid-row: 2; margin-top: 8px;
  list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px;
}
.timeline-item { font-size: 14px; line-height: 1.45; color: #0B0F0A; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.timeline-item a { color: #155138; text-decoration: underline; }
.timeline-item-status { font-family: 'IBM Plex Mono'; font-size: 12px; line-height: 1.45; color: #5A6457; }
.timeline-review-marker {
  font-family: 'IBM Plex Mono'; font-size: 12px; line-height: 1.45; font-weight: 600; letter-spacing: .04em;
  color: #7A7440;
}
.timeline-review-marker::before { content: '⚑ '; }

/* Fact cards */
.fact-list { display: flex; flex-direction: column; gap: 24px; }
.fact-card {
  background: #FFFFFF;
  border: 1px solid #E2E6DF;
  border-radius: 2px;
  padding: 22px;
  scroll-margin-top: 84px;
}
.fact-card-review {
  border-color: #8A6D1E;
  background: #FEFDF5;
}
.fact-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.fact-card-label { font-family: Archivo; font-weight: 700; font-size: 19px; color: #0B0F0A; }
.fact-card-answer { font-size: 15px; color: #0B0F0A; line-height: 1.65; margin-bottom: 10px; }
.fact-card-provenance {
  font-family: 'IBM Plex Mono'; font-size: 12px; color: #5A6457; margin: 4px 0 10px;
}
.fact-card-notes { margin: 0 0 10px; padding-left: 18px; font-size: 14px; color: #4A5247; }
.fact-card-notes li { margin-bottom: 4px; }
.fact-card-notes-label {
  font-family: 'IBM Plex Mono'; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #5A6457; margin-bottom: 4px;
}
.fact-card-public-note {
  font-size: 13px; font-style: italic; color: #5A6457; border-left: 2px solid #E2E6DF;
  padding: 2px 0 2px 12px; margin-bottom: 10px;
}

/* Verification note — review_required facts only, shown just before the official-source
   component. Reuses the same amber "still verifying" vocabulary as the badge/section rail
   (never red/error), distinct from the neutral-gray .fact-card-public-note above. */
.fact-card-verification-note {
  font-size: 13px; font-style: italic; color: #7A7440; border-left: 2px solid #8A6D1E;
  padding: 2px 0 2px 12px; margin: 4px 0 10px;
}

/* Compact key-facts area: deadline / fee / filing agency / filing frequency */
.fact-key-facts {
  display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0 0 12px;
  padding: 10px 0; border-top: 1px solid #E2E6DF; border-bottom: 1px solid #E2E6DF;
}
.fact-key-fact { min-width: 140px; }
.fact-key-fact dt {
  font-family: 'IBM Plex Mono'; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #5A6457; margin: 0 0 2px;
}
.fact-key-fact dd { font-size: 14px; color: #0B0F0A; margin: 0; }
.fact-key-fact-list { list-style: none; margin: 0; padding: 0; font-size: 14px; color: #0B0F0A; }
.fact-key-fact-list li { margin-bottom: 2px; }

/* Citations: compact always-visible line + expandable full detail */
.fact-card-citation-compact {
  font-family: 'IBM Plex Mono'; font-size: 12px; margin: 10px 0 0;
  padding-top: 10px; border-top: 1px dashed #C8CEC6;
}
.fact-card-citation-compact a { color: #155138; text-decoration: underline; overflow-wrap: anywhere; }

.citation-details { margin-top: 8px; font-family: 'IBM Plex Mono'; font-size: 12px; color: #5A6457; }
.citation-details summary {
  cursor: pointer; color: #155138; font-weight: 600; padding: 4px 0; list-style: revert;
}
.citation-details[open] summary { margin-bottom: 8px; }
.citation-detail-entry { padding: 8px 0; border-top: 1px dotted #C8CEC6; }
.citation-detail-entry:first-of-type { border-top: none; }
.citation-detail-row { display: flex; gap: 8px; margin-bottom: 3px; line-height: 1.6; }
.citation-detail-row:last-child { margin-bottom: 0; }
.citation-detail-label { flex: none; width: 100px; color: #5A6457; }
/* The value half of the row (URL or long source title) is a flex item too — without min-width: 0
   a flex item's default min-width: auto uses its content's un-shrunk size, which for a long
   government URL can exceed the viewport on mobile regardless of the wrap rule below. */
.citation-detail-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.citation-detail-row a { color: #155138; text-decoration: underline; overflow-wrap: anywhere; }

/* Official sources appendix — column allocation keeps Accessed on one line and gives URL its own
   clear, separated column rather than everything competing for auto-layout's leftover space. */
.source-inventory-wrap { overflow-x: auto; }
.source-inventory { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.source-inventory th, .source-inventory td {
  text-align: left; padding: 8px 12px; border-bottom: 1px solid #E2E6DF; vertical-align: top;
}
.source-inventory th {
  font-family: 'IBM Plex Mono'; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #5A6457;
}
.source-inventory a { color: #155138; text-decoration: underline; overflow-wrap: anywhere; }
.source-inventory-agency { min-width: 160px; }
.source-inventory-source { min-width: 220px; }
.source-inventory-accessed { min-width: 110px; white-space: nowrap; }
.source-inventory-url { padding-left: 28px; }

/* Additional Requirements Under Verification: dashed structural rail as a second, non-color
   status signal, alongside every card's own text badge — deliberately not red/error styling. */
.review-section {
  border-left: 3px dashed #8A6D1E;
  padding-left: 20px;
}
.review-section-intro { max-width: 720px; }

/* Grouped subsection headings (e.g. "Corporate Reports") inside the review section. The first
   heading sits right under the intro paragraph — its own margin-bottom already separates it, so no
   extra top gap is added here. Every later heading follows a previous group's .fact-list, so it
   gets a much larger top gap plus a hairline rule to read as "start of the next group," not stray
   text wedged between cards. */
.review-section > h3 { margin: 0 0 16px; }
.review-section > .fact-list + h3 {
  margin-top: 32px;
  padding-top: 12px;
  border-top: 1px solid #E2E6DF;
}

/* Methodology / disclaimer */
.state-disclaimer {
  font-size: 13px; color: #5A6457; border-left: 2px solid #E2E6DF; padding: 4px 0 4px 16px;
  font-style: italic; max-width: 720px;
}

@media (max-width: 900px) {
  .state-card-outline { width: 72px; height: 72px; }
}
@media (max-width: 640px) {
  .states-dir, .state-page { padding-left: 20px; padding-right: 20px; }
  .state-card-grid { grid-template-columns: 1fr; }
  .state-list-plain { grid-template-columns: 1fr; }
  .fact-key-facts { gap: 10px 20px; }
  .state-card-outline { width: 60px; height: 60px; }
}

/* ---- Keyboard focus visibility: every interactive element on the page, not just a few ---- */
a:focus-visible,
summary:focus-visible {
  outline: 2px solid #155138;
  outline-offset: 2px;
}

/* ==========================================================================
   Compliance Updates (/updates/) — reuses this file's existing tokens, card
   shape, and status-badge vocabulary rather than introducing a second visual
   language. See build/lib/render-updates-index.mjs, render-update-article.mjs,
   render-homepage-updates.mjs, and render-state-recent-updates.mjs.
   ========================================================================== */

/* A third verification-badge treatment alongside verified (green) and review
   (amber) — MIXED VERIFICATION STATUS covers an article that combines
   source-verified claims with at least one still-open issue. Text label is
   always present alongside the color dot, matching the other two badges. */
.status-badge-mixed {
  background: #EAF1F4;
  color: #285A6B;
}
.status-badge-mixed::before { background: #2E7E96; }

/* Compact inline variant used next to a related-fact link, where a full-size
   badge would overwhelm the line. */
.status-badge-inline { font-size: 10px; padding: 2px 6px; }

.update-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
.update-card-grid-related { margin-bottom: 0; }

.update-card {
  display: flex;
  flex-direction: column;
  /* Grid items default to min-width: auto, which sizes to the content's un-shrunk width —
     exactly like a flex item without min-width: 0 (see .update-card-head below). Without this,
     a long non-wrapping child (historically .status-badge's own white-space: nowrap) could force
     this card wider than its grid track, overlapping the next column. */
  min-width: 0;
  background: #fff;
  color: #0B0F0A;
  border: 1px solid #0B0F0A;
  box-shadow: 4px 4px 0 #0B0F0A;
  padding: 18px;
  text-decoration: none;
  /* The clickable card is an <a>; explicit `normal` here (rather than leaving font-weight to
     inherit implicitly) means no descendant's weight is ever a byproduct of the anchor's own
     value — every child below sets its own explicit weight instead of relying on inheritance. */
  font-weight: normal;
  transition: transform .12s, box-shadow .12s;
}
.update-card:hover, .update-card:focus-visible {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #0B0F0A;
}
.update-card:focus-visible { outline: 2px solid #155138; outline-offset: 2px; }

/* Card header: article-type label + verification badge. flex-wrap: wrap lets the badge drop to
   its own line on a narrow card instead of overflowing past the card's right edge — the type
   label and the badge each get min-width: 0 so they can shrink/wrap rather than refusing to,
   which is what let "MIXED VERIFICATION STATUS" spill into the next card at desktop widths. */
.update-card-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px; }
.update-card-type {
  font-family: 'IBM Plex Mono'; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .06em;
  text-transform: uppercase; color: #5A6457;
  min-width: 0; max-width: 100%; overflow-wrap: break-word;
}
/* Scoped override, not a change to the shared .status-badge rule: every other .status-badge on
   the site (fact cards, at-a-glance table cells, snapshot rows) relies on its own
   white-space: nowrap and has room for it, and none of that should change. Only inside an
   update-card header does the badge need to wrap instead of overflow. */
.update-card-head .status-badge { white-space: normal; max-width: 100%; overflow-wrap: break-word; }

/* Title: the one clearly bold element on the card. 600 (semibold) reads as the card's strongest
   text without the heavier 700/800 weights this design system reserves for hero/section
   headings — see DESIGN.md's weight scale. */
.update-card-title { font-family: Archivo; font-weight: 600; font-size: 18px; line-height: 1.3; color: #0B0F0A; margin: 0 0 12px; }

/* Summary: plain reading copy, deliberately the lightest weight this card uses. Archivo is
   loaded on this site only at wght 500/600/700/800 (see the <link> in page-chrome.mjs) — true
   regular (400) isn't among the downloaded static weights, so a browser asked for 400 here
   would silently substitute the nearest loaded weight (500) anyway. Setting 500 explicitly (the
   lightest weight actually available) makes that the deliberate, documented choice instead of an
   inherited accident, and is what actually produces visible contrast against the 600 title
   above — leaving font-weight unset was why the summary previously read almost as heavy as the
   title. flex: 1 (not margin-top: auto on the metadata) is what pushes .update-card-meta to the
   bottom of an equal-height card — the summary grows to fill the leftover space itself. */
.update-card-summary { font-size: 15px; font-weight: 500; color: #4A5247; line-height: 1.6; margin: 0 0 16px; flex: 1; }

/* Metadata: the quietest text on the card — smaller, lighter, and visually separated from the
   summary by both the margin above (on .update-card-summary) and this rule's own padding-top +
   divider. IBM Plex Mono is loaded at wght 400/500/600 (unlike Archivo), so 400 here is a true
   regular weight, not a substitution. */
.update-card-meta { font-family: 'IBM Plex Mono'; font-size: 13px; font-weight: 400; line-height: 1.4; color: #5A6457; padding-top: 10px; border-top: 1px solid #E2E6DF; }

/* Homepage variant: sits inside .bsg-card's own box (already styled by index.html's inline
   <style>), so only the internal spacing needs to match — no border/shadow of its own here. */
.update-home-card-head { margin-bottom: 12px; }

/* Tags: identifying labels, not calls to action — smaller and lighter than the earlier 12px/600
   so they read as quiet metadata, not buttons competing with the title/summary above them. */
.update-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.update-chip {
  display: inline-block;
  font-family: 'IBM Plex Mono'; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .02em;
  color: #155138; background: #F4F6F3; border: 1px solid #C8CEC6;
  padding: 4px 9px; border-radius: 2px; text-decoration: none;
  max-width: 100%; overflow-wrap: break-word;
}
a.update-chip:hover { border-color: #155138; }
.update-chip-static { color: #5A6457; cursor: default; }

.update-meta-row { font-family: 'IBM Plex Mono'; font-size: 13px; line-height: 1.5; color: #5A6457; margin-bottom: 14px; }

/* Article deck: the one paragraph a reader decides whether to keep reading from — larger than an
   ordinary body paragraph, but still explicitly lighter than the h1 above it (500, the lightest
   weight this design system's Archivo font actually has loaded — see .state-direct-answer's own
   comment). 19px covers the mobile target on its own; the 1040px bump (the same breakpoint the
   two-column shell already switches on) gives it a bit more presence once there's room for it. */
.update-deck { font-size: 19px; font-weight: 500; line-height: 1.6; margin-bottom: 20px; }
@media (min-width: 1040px) {
  .update-deck { font-size: 20px; }
}

.update-takeaway-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.update-takeaway-list li { font-size: 15px; font-weight: 500; color: #1A1F18; line-height: 1.6; }

.update-related-fact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.update-related-fact {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  border-bottom: 1px dotted #C8CEC6; padding-bottom: 8px;
}
.update-related-fact a { color: #155138; text-decoration: underline; font-size: 14px; }

.update-cta-links { display: flex; flex-direction: column; gap: 10px; }
.update-cta-link {
  font-family: 'IBM Plex Mono'; font-size: 14px; font-weight: 600; color: #155138;
  text-decoration: none; border: 1px solid #155138; padding: 10px 14px; border-radius: 2px;
  width: fit-content;
}
.update-cta-link:hover { background: #155138; color: #fff; }

.update-browse-group { margin-top: 28px; padding-top: 16px; border-top: 1px solid #E2E6DF; scroll-margin-top: 84px; }
.update-browse-group h3 { font-size: 17px; margin: 0 0 14px; color: #0B0F0A; }

@media (max-width: 640px) {
  .update-card-grid { grid-template-columns: 1fr; }
}