/* The Hearings section's own looks (public-worker/src/pages/hearings.js), on the shared tokens (tokens.css) and the
 * classes of site.css (.records, .badge, .badges, dl.facts, .table-wrap, .notice, .video-*). Colours come only from
 * the tokens, so light and dark both work. The side colours (--anti, --pro) are not used here: a hearing page carries
 * no side, and a colour must not suggest one. Nothing loads a font, an image or a file from another site. */

/* ---- the list ---- */
/* a filter control never grows past the form (the longest choice would otherwise set a select's width on a phone), and
   the search box takes the free width of its row */
main .filters .field { max-width: 100%; min-width: 0; }
main .filters .field select { max-width: 100%; }
main .filters .field:has(input[type="search"]) { flex: 1 1 16em; }
main .filters input[type="search"] { width: 100%; }
.hr-scope { margin: 0 0 12px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-md); }
.hr-list { margin-top: 4px; }
.hr-row .title { margin: 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.hr-row .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 3px 0 0; }
.hr-row .hr-committee { margin: 2px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.hr-bills { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.hr-bills li { margin: 2px 0; }
.hr-basis { color: var(--muted); }
.hr-none { color: var(--faint); font-size: 13px; }
.badge.hr-video { border-color: var(--blue); color: var(--blue); }
.badge.hr-link { border-color: var(--control-border); }
.badge.hr-gone { border-style: dashed; border-color: var(--control-border); color: var(--muted); }

/* ---- how bills are linked ---- */
.hr-how { margin-top: 32px; padding-top: 4px; border-top: 1px solid var(--border); max-width: 72ch; }
.hr-how dl { margin: 8px 0 0; }
.hr-how dt { font-weight: 600; margin-top: 12px; }
.hr-how dd { margin: 2px 0 0; color: var(--muted); }

/* ---- one hearing ---- */
.hr-lede { margin: 0 0 4px; }
.hr-bills-table td:first-child { min-width: 11em; }
.hr-sub { display: block; margin-top: 2px; font-size: 13px; }
.hr-more { margin-top: 24px; font-size: 14px; }
.hr-data { font-size: 14px; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .hr-row .title { font-size: 14px; }
}
