/* site/css/site.css — placeholder base styles (task 3 scaffold). Later page tasks extend this;
   deliberately minimal here, not a design system. */

:root {
  color-scheme: light dark;
  --fg: #1a1a1a;
  --bg: #ffffff;
  --muted: #666666;
  --link: #0b5fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e8e8e8;
    --bg: #121212;
    --muted: #a0a0a0;
    --link: #6ea8ff;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
}

a {
  color: var(--link);
}

.section-state {
  color: var(--muted);
}

.section-state-failed {
  color: #b00020;
}

/* Task 10 — the real footer (render.js's mountFooter), same on every page. */

footer#site-footer {
  max-width: 720px;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
  border-top: 1px solid var(--muted);
  padding-top: 0.75rem;
}

.footer-tagline {
  color: var(--muted);
  font-size: 0.85em;
  margin: 0 0 0.35rem;
}

.footer-links {
  display: flex;
  gap: 1rem;
  font-size: 0.85em;
}

/* Task 6 — profile page (person.html / legislator.html). Functional only; a final visual polish
   pass is later in the build order (design spec, "Build order" step 5). */

main#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}

.profile-identity {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.profile-photo {
  width: 120px;
  height: auto;
  border-radius: 4px;
}

.profile-no-photo {
  width: 120px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--muted);
  border-radius: 4px;
  font-size: 0.85em;
}

.vote-filters {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.vote-list {
  list-style: none;
  padding: 0;
}

.vote-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--muted);
}

.vote-one-liner {
  color: var(--muted);
  margin: 0.25rem 0;
}

.flag-badge {
  display: inline-block;
  margin-left: 0.5rem;
  color: #b00020;
}

.sponsor-group h3 {
  margin-bottom: 0.25rem;
}

.freshness-list {
  list-style: none;
  padding: 0;
}

.freshness-quarantine {
  color: #b00020;
  margin: 0.15rem 0 0.5rem;
}

.vote-pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.vote-pagination-summary {
  color: var(--muted);
  font-size: 0.9em;
}

/* Task 6b — vote aggregate charts (design spec §3, "Vote aggregates"). Deliberately ONE neutral
   fill color for every bar, regardless of which position/side it represents — color-coding
   "yea=good/nay=bad" (or a party color) would read as a value judgment, which the neutrality wall
   forbids. Bar widths are set via element.style.width in JS (see vote-charts.js), never inline in
   this file — this stylesheet only owns the static box/track look. */

.vote-charts {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.chart-section h3 {
  margin: 0 0 0.5rem;
  font-size: 1em;
}

/* M4 (task 6b review, fix round 1): the clickable distribution bars are real <button> elements
   (site/js/vote-charts.js) for native keyboard/AT accessibility — this class is shared with the
   plain-div, non-interactive party-comparison/cohesion bars, so the browser's default button
   chrome (border, background, font, full-width text alignment) is reset back to look identical
   to those plain rows; only :focus-visible gets a visible outline back, for keyboard users.
   N-H(e) (task 6b review, fix round 2): `cursor: pointer` moved OFF this shared base rule and onto
   a `button.chart-bar-row` selector below — the decorative party-comparison/cohesion rows (plain
   divs, never clickable) no longer imply interactivity they don't have. */
.chart-bar-row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
}

button.chart-bar-row {
  cursor: pointer;
}

.chart-bar-row:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* N-C (task 6b review, fix round 2): the bar-driven vote-list filter (position=eq.yea, or the
   missed-only bucket) was invisible once applied — no color implies "good/bad" here, only that
   THIS bar is the one currently narrowing the vote list below. Bold label + a track outline, never
   a fill-color change (that would drift toward the same good/bad implication the neutral fill
   color everywhere else in this file exists to avoid). */
.chart-bar-active .chart-bar-label {
  font-weight: 700;
  color: inherit;
}

.chart-bar-active .chart-bar-track {
  outline: 1px solid var(--link);
  outline-offset: 1px;
}

.chart-clear-position-filter {
  margin: 0.35rem 0 0;
  font-size: 0.85em;
  background: none;
  border: 1px solid var(--muted);
  border-radius: 3px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.chart-definitions-link {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.85em;
}

.chart-bar-label {
  font-size: 0.9em;
  color: var(--muted);
}

.chart-bar-track {
  background: color-mix(in srgb, var(--muted) 25%, transparent);
  border-radius: 2px;
  height: 0.6rem;
  overflow: hidden;
}

.chart-bar-fill {
  background: var(--link);
  height: 100%;
}

.chart-bar-value {
  font-size: 0.85em;
  white-space: nowrap;
}

.chart-not-computable {
  color: var(--muted);
  font-style: italic;
}

/* Task 9 — bill page (site/bill.html). Functional only, same minimal-polish level as the profile
   page's own first pass (final visual polish is a later step, design spec's own "Build order"). */

.bill-mo-disclaimer {
  color: var(--muted);
  font-size: 0.9em;
}

.bill-vote-list,
.bill-summary-bullets {
  list-style: none;
  padding: 0;
}

.bill-vote-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--muted);
}

.bill-vote-tally {
  color: var(--muted);
  font-size: 0.9em;
}

.bill-summary-fallback-note {
  color: var(--muted);
  font-style: italic;
}

.bill-verification-note {
  color: var(--muted);
  font-size: 0.85em;
  margin-top: 0.75rem;
}

.bill-glossary-unavailable {
  color: var(--muted);
  font-style: italic;
}

/* Fix round 1, LOW-7 (task-9 review) — a not-found bill (site/js/bill-page.js's
   setNotFoundLayout) hides the static section headings/containers so they never imply sections
   exist for a bill that doesn't. #bill-identity (the not-found message itself) stays visible. */
main#app.bill-not-found h2,
main#app.bill-not-found section:not(#bill-identity) {
  display: none;
}

/* Glossary inline (site/js/glossary-inline.js) — a matched term reads as an underlined, focusable
   inline element (native <dfn> semantics kept; interactivity layered on top via tabIndex/role, not
   a real <button>, since a term-in-running-text is a definition reference first). Same "no
   good/bad implication" color discipline site.css already applies to the vote-chart bars: one
   neutral treatment for every term, never anything party- or valence-coded. */
.gloss-term {
  cursor: pointer;
  border-bottom: 1px dotted var(--link);
  font-style: normal;
}

.gloss-term:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.gloss-detail {
  margin: 0.35rem 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--muted);
  font-size: 0.9em;
}

.gloss-detail-heading {
  font-weight: 700;
  margin: 0 0 0.25rem;
}

/* MED-1 (task-9 review) — a single gloss-detail block can hold MULTIPLE entries (duplicate term
   text, different citations); each gets its own heading, so a visible gap keeps them from reading
   as one run-on block. */
.gloss-detail-entry + .gloss-detail-entry {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--muted);
}

.gloss-quote {
  color: var(--muted);
  margin: 0.35rem 0;
  padding-left: 0.5rem;
  border-left: 2px solid var(--muted);
}

/* Bullet-citation-exposure design (2026-08-02) — same treatment as .gloss-term/.gloss-quote above,
   deliberately: both are "click to see the receipt behind this claim" affordances, so they should
   look and behave the same way. A bullet with no citation on file keeps the old plain, unstyled
   .bill-summary-bullet-section span — this rule only applies to the interactive variant. */
.bill-citation-toggle {
  cursor: pointer;
  border-bottom: 1px dotted var(--link);
}

.bill-citation-toggle:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.bill-citation-quote {
  color: var(--muted);
  margin: 0.35rem 0;
  padding-left: 0.5rem;
  border-left: 2px solid var(--muted);
}

/* Task 10 — the trust page (site/trust.html / site/js/trust-page.js). Functional only, same
   minimal-polish level as every other page's first pass. */

main#app.trust-page {
  max-width: 720px;
}

.trust-page section {
  margin-bottom: 2rem;
}

.trust-page section h2 {
  border-bottom: 1px solid var(--muted);
  padding-bottom: 0.25rem;
}

.metric-definition {
  margin-bottom: 1rem;
}

.metric-definition h3 {
  margin-bottom: 0.25rem;
  font-size: 1em;
}

.counts-caption {
  color: var(--muted);
  font-size: 0.9em;
}

.counts-list {
  list-style: none;
  padding: 0;
}

.counts-label {
  font-weight: 600;
}

.freshness-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.freshness-table th,
.freshness-table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--muted);
}

.freshness-row-quarantine td {
  color: #b00020;
}

.attribution-list {
  padding-left: 1.25rem;
}

.attribution-list li {
  margin-bottom: 0.75rem;
}