/* The Bills and Topics pages (public-worker/src/pages/bills.js). Loaded after site.css, on the same tokens: light and dark
 * come from the tokens, never from this file. No inline style anywhere on those pages, so charts are SVG classes. */

.bills-eyebrow { margin: 0; color: var(--muted); font-size: 14px; }
h1.bills-title { margin: 2px 0 8px; overflow-wrap: anywhere; }
h1.bills-title.long { font-size: 19px; line-height: 1.3; }

/* ---- status badges (the side badges are the shared ones in site.css) ---- */
.badge.status-enacted { border-color: var(--gold); color: var(--gold); }
.badge.status-vetoed { border-color: var(--blue); color: var(--blue); }
.badge.status-pending { color: var(--text); }
.badge.status-failed { color: var(--faint); }

/* ---- the list of bills ---- */
.filters select { max-width: 240px; }
.bills-list > li .title a { overflow-wrap: anywhere; }
.bills-list .meta .badge { margin-left: 2px; }
.bills-data { margin-top: 32px; padding-top: 4px; border-top: 1px solid var(--border); }
.bills-data p { max-width: 80ch; }

/* ---- tag, topic and similar-bill chips ---- */
.bills-tags, .bills-similar { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.bills-tags li, .bills-similar li { margin: 0; }
.bills-tags a, .bills-similar a { display: inline-block; font-size: 13px; line-height: 1.6; padding: 0 9px; color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); text-decoration: none; overflow-wrap: anywhere; }
.bills-tags a:hover, .bills-similar a:hover { color: var(--text); border-color: var(--gold); }
dl.facts .bills-tags { margin: 0; }
dl.facts dd { overflow-wrap: anywhere; }

/* ---- sections of a bill page ---- */
.bills-summary p, .bills-notes p { max-width: 75ch; }
.bills-more { margin: 10px 0; }
.bills-more > summary, .bills-video > summary { cursor: pointer; color: var(--gold); }
.bills-more > summary { padding: 4px 0; }
.bills-templates { padding-left: 20px; }
.bills-templates li { margin: 6px 0; }
.bills-templates .badge { margin: 0 4px; }
.notice h2 { margin-top: 0; font-size: 13px; }
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.notice.bills-typedef p { margin: 4px 0; max-width: 75ch; }

/* ---- the bill type definitions page ---- */
.bills-def { padding: 12px 0; border-bottom: 1px solid var(--border); }
.bills-def:last-child { border-bottom: 0; }
.bills-def h3 { margin: 0 0 4px; font-size: 16px; }
.bills-def p { margin: 0 0 6px; max-width: 75ch; }
.bills-def-subs { margin: 6px 0 0; }
.bills-def-subs dt { font-weight: 600; margin-top: 10px; }
.bills-def-subs dd { margin: 2px 0 0; max-width: 75ch; color: var(--muted); }

.bills-hearing-list { list-style: none; margin: 8px 0; padding: 0; }
.bills-hearing-list > li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.bills-hearing-list > li:last-child { border-bottom: 0; }
.bills-hearing-list p { margin: 0 0 4px; }
.hearing-head { font-weight: 600; }
.bills-hearing-list .meta { color: var(--muted); font-size: 14px; }
.bills-video { margin-top: 6px; }

/* ---- the bill's text ---- */
.bills-toc-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 12px 0; }
.bills-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.bills-record { margin-bottom: 28px; }
.bills-version h3 { margin-top: 24px; margin-bottom: 4px; }
.bills-version > p { margin-bottom: 8px; }

/* ---- topics ---- */
.bills-topics { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.bills-topics > li h3 { font-size: 15px; margin-bottom: 4px; }
.bills-topics > li p { margin: 0 0 6px; color: var(--text); font-size: 15px; }
.bills-seg { display: block; width: 100%; height: 8px; margin: 6px 0 8px; border-radius: 4px; overflow: hidden; }
.bar-anti { fill: var(--anti); }
.bar-pro { fill: var(--pro); }
.bar-unc { fill: var(--faint); }
.bills-topics > li p.bills-sides { color: var(--muted); font-size: 14px; }
.bills-sides .gap { display: inline-block; width: 10px; }

.bills-chart { display: block; width: 100%; max-width: 780px; height: auto; margin: 8px 0 4px; }
.bills-chart .axis { stroke: var(--border-strong); stroke-width: 1; }
.bills-chart .tick { fill: var(--muted); font-size: 11px; }
.bills-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: 14px; }

@media (max-width: 640px) {
  h1.bills-title.long { font-size: 17px; }
}