/*
    Advanced Bill Status — shared styles.

    Carries the look of the legacy pages (Verdana, the narrow centred measure, the grey
    ground, the navy links and coloured status lines) without their fixed-width table
    layout, which could not satisfy WCAG 2.1 AA 1.4.10 Reflow.

    Sizes are in rem so browser and OS text-size preferences are honoured (1.4.4).
    Two legacy colours were darkened to reach the 4.5:1 contrast AA requires; both are
    noted where they are defined.
*/

:root {
    --ink: #000;
    --page: #f2f2f2;
    --panel: #fff;
    --rule: #767676;              /* 4.54:1 on white — form borders, meets 1.4.11 */
    --link: #000080;              /* 16.01:1 on white */
    --heading: #003366;           /* 11.26:1 on the grey ground */
    --gstatus: #633500;           /* 10.30:1 — unchanged */
    --housestatus: #660000;       /* 13.42:1 — unchanged */
    --senatestatus: #006600;      /* was #009900 at 3.78:1, which failed 1.4.3 */
    --alert: #c00;                /* was #ff0000 at 4.00:1, which failed 1.4.3 */
    --measure: 46rem;             /* ≈740px at default text size */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0.75rem 0.5rem 2rem;
    background: var(--page);
    color: var(--ink);
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 0.75rem;
    line-height: 1.5;
}

.page { max-width: var(--measure); margin: 0 auto; }

/* The results page sat on white inside the grey ground. */
.page--panel { background: var(--panel); padding: 0.75rem; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; font-weight: bold; }

/* 1.4.1 Use of Color — navy is only 1.31:1 against the black text around it, so a link set in
   a run of text needs a cue besides colour. The menus and link strip stand alone and stay plain.
   h2 covers the committee link in "Next/Last Hearing: SENATE FINANCE" on the bill status page. */
p a, h2 a, h3 a, .sponsor a, .docket-description a { text-decoration: underline; }

/* 2.4.7 Focus Visible — never rely on the browser default alone. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 1px;
}

/*
    The search grid stacks its rows 1.6px apart, and an outline is painted outside the box,
    so the ring needs more room than the gap gives it — 4px at the offset above. Without a
    stacking context the next row's control, which paints later, covers the bottom edge and
    the ring looks cut off.

    Raising the focused control fixes it without touching the layout or thinning the
    indicator. Widening the row gap instead would push the form taller for a state that is
    only visible while a box has focus, and trimming the ring to fit 1.6px would leave too
    little to see.

    Scoped to form controls: inline links sit in running text where nothing overlaps them,
    and position: relative on a link would change the containing block for any
    absolutely-positioned .visually-hidden span inside it.
*/
input:focus-visible,
select:focus-visible,
button:focus-visible {
    position: relative;
    z-index: 1;
}

/* 2.4.1 Bypass Blocks — offscreen until focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--panel);
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--link);
    z-index: 10;
}
.skip-link:focus { left: 0.5rem; }

/* Available to assistive technology, not on screen. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

h1 {
    color: var(--heading);
    font-size: 1.15rem;
    font-weight: bold;
    text-align: center;
    margin: 0 0 0.25rem;
}
h1 .subtitle { display: block; font-size: 0.8rem; font-weight: normal; }

h2 { color: var(--heading); font-size: 0.95rem; margin: 0 0 0.5rem; }

/* ---------- search form ---------- */

fieldset { border: 0; margin: 0; padding: 0; }

/*
    The legacy form was a 740px four-column table with cellpadding="1": label, field,
    label, field, and the example text sitting inline right after each box. The grid below
    reproduces that density without the table. Two things kept it from matching earlier —
    each .field is a <p>, whose default 1em margins do not collapse between grid items, and
    the hints were display:block, which pushed every example onto its own line and made the
    tallest cell set the height of the whole row.
*/
.search-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.1rem 1rem;
}

/* 8.5rem ~= the legacy 18% label column at 740px. */
.field {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 0.3rem;
    align-items: baseline;
    margin: 0;
}
.field--wide { grid-column: 1 / -1; }

/* Box, Codes button and example on one line, as the table cell had them. The picker takes
   a full row of its own, standing in for the legacy <BR> before the dropdown. */
.field-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.35rem; }
.field-body > .code-picker { flex: 0 0 100%; }

.hint { color: #595959; font-size: 0.7rem; }  /* 7.0:1 on grey */

.form-note { margin: 0 0 0.6rem; }
.form-note .example { font-family: Consolas, "DejaVu Sans Mono", monospace; }

input[type="text"], select {
    font: inherit;
    max-width: 100%;
    padding: 0.15rem 0.25rem;
    border: 1px solid var(--rule);
    background: var(--panel);
    color: var(--ink);
}
.field-body input[type="text"] { width: 8rem; }
.field-body select { max-width: 13rem; }
select { max-width: 20rem; }

button, input[type="submit"], input[type="reset"] {
    font: inherit;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--rule);
    background: #e4e4e4;
    color: var(--ink);
    cursor: pointer;
}
button:hover, input[type="submit"]:hover, input[type="reset"]:hover { background: #d5d5d5; }

.code-picker { margin-top: 0.1rem; }
.code-picker[hidden] { display: none; }

/* The sort dropdown sits outside the two-column grid but keeps its label column. */
.sort-field { margin: 0.6rem 0 0.2rem; }
.sort-field select { max-width: 16rem; }

.form-actions { margin-top: 0.75rem; text-align: center; }

/*
    Three options on the first row and two on the second, indented under the legend.
    A three-column grid rather than a wrapping flex row: flex packed four onto the
    first line and left one stranded below, and the break moved with the text width.
*/
.limit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem 1rem;
    margin-top: 0.35rem;
    padding-left: 1.5rem;
}
.limit-grid label { display: flex; gap: 0.4rem; align-items: baseline; }

/* ---------- results ---------- */

/*
    The legacy header was one table row of three cells: a boxed menu at each side and the
    system name plus the Previous/Result List/Next strip centred between them. Equal side
    columns keep the centre centred on the page rather than centred in the space left over;
    a page with only one menu leaves the other column empty.
*/
.page-header {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) 10rem;
    column-gap: 0.75rem;
    align-items: start;
}
.header-centre { grid-column: 2; text-align: center; }
.menu-corner--right { justify-self: end; }

/*
    With no right-hand menu there is nothing to balance, so the empty column is dropped and
    everything beside the menu box — the system name and the strip under it — takes the rest
    of the width. That is the legacy's own 20% / 78% split.

    The two sit in one row, as the legacy's table cells did: the menu box stretches to the
    row's height and the strip is pushed to the foot of the column beside it, so the bottom of
    the four cells finishes level with the bottom of the box whichever is the taller.
*/
.page-header--one-menu {
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: stretch;
}
.page-header--one-menu > .menu-corner { display: flex; }
.page-header--one-menu > .menu-corner > .menu-box { flex: 1; }
.page-header--one-menu > .header-centre {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.system-name { font-weight: bold; margin: 0 0 0.4rem; color: var(--heading); }

/* 1px navy box, one arrow-prefixed entry per line — cellPadding was 2. */
.menu-box { border: 1px solid var(--link); padding: 0.15rem 0.35rem; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { display: flex; align-items: baseline; gap: 0.3rem; }
.menu-list img { flex: none; }

/*
    "SOS Archives!" — the legacy printed it in red at #ff0000, which is 4.0:1 on white and
    fails 1.4.3. The darkened alert colour is used instead, and the entries under it are
    indented as the legacy indented them with non-breaking spaces.
*/
.menu-label { color: var(--alert); font-weight: bold; margin: 0.25rem 0 0; }
.menu-label + .menu-list { padding-left: 0.6rem; }

/* The docket's own heading row: title centred, abbreviations link to its right. */
.docket-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin: 0.5rem 0 0.25rem;
}
.docket-head h1 { grid-column: 2; margin: 0; font-size: 1.5rem; text-align: center; }
.docket-abbrev { grid-column: 3; justify-self: end; margin: 0; white-space: nowrap; }

/* Bill Title sat on a grey band across the panel. */
.bill-title-band {
    background: var(--page);
    padding: 0.4rem 0.5rem;
    margin: 0.25rem 0 0.75rem;
}
/* On the roll call list it was a boxed white band instead. */
.bill-title-band--boxed { background: var(--panel); border: 1px solid var(--link); }

/*
    The five general-status values on one line, italic label and bold value, on the grey band
    the legacy ran under the title.
*/
.status-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.5rem;
    margin: 0 0 0.5rem;
    background: var(--page);
    padding: 0.3rem 0.5rem;
}
.status-line > div { display: flex; gap: 0.35rem; align-items: baseline; }
.status-line dt { font-style: italic; }
.status-line dt::after { content: ":"; }
.status-line dd { margin: 0; font-weight: bold; }


.results-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; align-items: flex-start; }
.result-count { font-weight: bold; }
.sorted-by { font-style: italic; }
.truncation-notice { color: var(--alert); font-weight: bold; margin: 0.35rem 0; }

.bill { border-top: 2px solid var(--heading); padding: 0.6rem 0; }
.bill-group-header { font-size: 0.95rem; text-align: center; margin: 0.5rem 0; }
.chaptered { margin: 0.25rem 0; font-size: 0.95rem; }

.bill-body { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0.75rem; }
.bill-ident h3 { margin: 0; font-size: 1rem; }
.bill-ident .session-year { font-style: italic; }
.bill-links { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.bill-links li { margin: 0.1rem 0; }

.bill-detail dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.1rem 0.5rem; margin: 0.5rem 0 0; }
.bill-detail dt { font-style: italic; }
.bill-detail dd { margin: 0; }
.gstatus { color: var(--gstatus); }
.hstatus { color: var(--housestatus); }
.sstatus { color: var(--senatestatus); }

.site-nav { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); margin-top: 1.5rem; padding: 0.4rem 0; }
.site-nav ul { display: flex; justify-content: space-around; list-style: none; margin: 0; padding: 0; gap: 1rem; }

/* 1.4.10 Reflow — everything stacks in one column well before 320px. */
@media (max-width: 44rem) {
    .search-grid { grid-template-columns: minmax(0, 1fr); }
    /* Menus stack above the title once there is no room beside it. */
    .page-header { grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
    .header-centre { grid-column: 1; }
    .menu-corner--right { justify-self: start; }
    .docket-head { grid-template-columns: minmax(0, 1fr); }
    .docket-head h1 { grid-column: 1; text-align: left; }
    .docket-abbrev { grid-column: 1; justify-self: start; }
    .limit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bill-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
    .field { grid-template-columns: minmax(0, 1fr); }
    .limit-grid { grid-template-columns: minmax(0, 1fr); padding-left: 0.75rem; }
    .field-body input[type="text"] { width: 100%; }
    .bill-detail dl { grid-template-columns: minmax(0, 1fr); }
    .bill-detail dt { margin-top: 0.35rem; }
}

@media print {
    body { background: #fff; padding: 0; }
    .page { max-width: none; }
    .site-nav, .skip-link, .print-header-toggle { display: none; }
}

/* ---------- bill status detail ---------- */

/*
    Previous Bill / Result List / Next Bill, and the four-cell strip, drawn as buttons.

    The button is the <a> itself, not the <li> around it: the box used to be the list item
    with the link as text inside, so only the words were clickable while the whole cell
    looked pressable. Now the link fills the cell and the entire box is the target.

    They stay links, not <button> elements — they navigate, so they belong on the keyboard's
    link semantics and keep middle-click and open-in-new-tab.
*/
.bill-nav { margin: 0.75rem 0; }
.bill-nav ul {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    list-style: none; margin: 0; padding: 0;
}
.bill-nav li { flex: 1 1 10rem; display: flex; }

.bill-nav a,
.bill-nav .nav-disabled {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: center;
    justify-content: center;
    gap: 0 0.3rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--heading);
    border-radius: 3px;
    background: var(--page);
    line-height: 1.25;
    text-align: center;
    /* Bold at rest as well as on hover, so the global a:hover weight cannot resize a
       button and shift the row under the pointer. */
    font-weight: bold;
    text-decoration: none;
}

.bill-nav a:hover { background: var(--panel); text-decoration: underline; }
.bill-nav a:active { background: var(--rule); color: var(--panel); }

/* Unavailable ends are not links, so they are not announced or focusable — and they are
   drawn flat so they do not read as something that can be pressed. */
.bill-nav .nav-disabled {
    color: #595959;             /* 7.0:1 on white — the legacy used gray at 3.3:1 */
    /* --rule, not a lighter grey: 1.4.11 exempts an inactive component, but a border at
       2.8:1 is needlessly close to the line when 4.54:1 is already in the palette. */
    border-color: var(--rule);
    background: transparent;
    font-weight: normal;
}

.header-centre .bill-nav { margin: 0; }
.header-centre .bill-nav li { flex: 1 1 0; min-width: 0; }
/* Equal cells with no minimum, so four of them divide the whole row rather than wrapping. */
.header-strip .bill-nav { margin: 0; }
.header-strip .bill-nav li { flex: 1 1 0; min-width: 0; }

/*
    Inline, not display:block — a second line here made the Result List button taller than
    the two beside it.

    nowrap keeps "1 of 1387" whole. The header's centre column is narrow, so without it the
    count breaks across lines as "6 of" / "1387"; with it the button wraps between the label
    and the count instead, and the flex row still holds all three to one height.
*/
.nav-label { white-space: nowrap; }
.nav-position { font-size: 0.75rem; font-weight: normal; color: #595959; white-space: nowrap; }

.bill-identifier { font-size: 1.4rem; color: var(--heading); margin: 0.5rem 0 0.25rem; }
.bill-title { background: var(--page); padding: 0.4rem 0.5rem; margin: 0 0 0.75rem; }

.bill-resources { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0.75rem 0; }

/* The Secretary of State's scans on sos_archives.aspx — the legacy's bulleted list. */
.archive-list { margin: 0.25rem 0 0.75rem; padding-left: 1.5rem; }
.archive-list li { margin: 0.2rem 0; }

.chamber dl {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 0.15rem 0.75rem;
    margin: 0 0 0.5rem;
}

/*
    General Status ran along a single banded line in the legacy — LSR#, Body, Local Govt,
    Chapter#, Gen Status — rather than stacking like the chamber blocks below it. Each
    label/value pair is wrapped in a div so a wrap at a narrow width breaks between pairs
    and never between a term and its value.
*/
.status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.5rem;
    margin: 0 0 0.75rem;
    padding: 0.4rem 0.6rem;
    background: var(--page);
    border: 1px solid var(--rule);
}
.status-strip > div { display: flex; gap: 0.35rem; }
.status-strip dt, .chamber dt { font-style: italic; }
.status-strip dd, .chamber dd { margin: 0; font-weight: bold; }

h3 { color: var(--heading); font-size: 0.9rem; margin: 1rem 0 0.4rem; }

/*
    Section headings on the bill status and SOS archives pages sit under the bill's own h1,
    so they are h2. They keep the spacing they had as h3 — the level changed, the look did
    not.
*/
main h2 { font-size: 0.9rem; margin: 1rem 0 0.4rem; }
.chamber h2 { margin-top: 0; }

.chamber { border: 1px solid var(--heading); padding: 0.5rem 0.75rem; margin: 0.75rem 0; }
.chamber h3 { margin-top: 0; }
/* Tints echo the legacy colour coding. The chamber is named in the heading, so
   nothing depends on seeing the colour (1.4.1). */
.chamber--house { background: #fdeff0; }
.chamber--senate { background: #eff8ef; }

.sponsor-list {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 1rem; list-style: none; margin: 0; padding: 0;
}
.sponsor { background: var(--page); padding: 0.3rem 0.45rem; }
.sponsor-meta { display: block; font-size: 0.7rem; color: #595959; }
.prime { display: block; font-size: 0.7rem; color: var(--gstatus); }

/*
    position: relative matters as much as the overflow. Visually hidden text is absolutely
    positioned, and without a positioned ancestor it resolves against the page rather than
    this box — so a hidden label in a column scrolled off to the right ("members voted nay on
    vote 44") escaped the scroller and pushed the whole page 28px wide at 320px, breaking
    1.4.10 Reflow. Making the scroller the containing block keeps it clipped with the table.
*/
.table-scroll { overflow-x: auto; position: relative; }
.hearing-table { border-collapse: collapse; width: 100%; }
.hearing-table th, .hearing-table td {
    border: 1px solid var(--rule); padding: 0.35rem 0.5rem; text-align: left; vertical-align: top;
}
.hearing-table th { background: var(--page); }

@media (max-width: 44rem) {
    .sponsor-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
    .sponsor-list { grid-template-columns: minmax(0, 1fr); }
    .status-strip, .chamber dl { grid-template-columns: minmax(0, 1fr); }
    .status-strip dt, .chamber dt { margin-top: 0.35rem; }
}


/* ---------- bill docket ---------- */


.docket-table { border-collapse: collapse; width: 100%; }
.docket-table caption { text-align: left; font-style: italic; padding: 0.35rem 0; }
.docket-table th, .docket-table td { text-align: left; vertical-align: top; padding: 0.3rem 0.5rem; }
.docket-table thead th { border-bottom: 2px solid var(--heading); }
.docket-table tbody tr + tr td { border-top: 1px solid var(--rule); }

/* The chamber tint the legacy used. The Body column states the chamber in text. */
.docket-row--house { background: #ffe5e6; }
.docket-row--senate { background: #eaffea; }

.docket-date { white-space: nowrap; width: 6.5rem; }
.docket-body { width: 3rem; }

@media (max-width: 30rem) {
    .docket-table th, .docket-table td { padding: 0.25rem 0.3rem; }
    .docket-date { width: auto; }
}

/* Docket abbreviations: term and definition, two columns while there is room. */
.abbrev-list {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 0.15rem 0.75rem;
    margin: 0.5rem 0 0;
}
.abbrev-list dt { font-weight: bold; }
.abbrev-list dd { margin: 0; }

@media (max-width: 30rem) {
    .abbrev-list { grid-template-columns: minmax(0, 1fr); }
    .abbrev-list dd { margin-bottom: 0.35rem; }
}


/* ---------- roll calls ---------- */

/* The legacy's centred size-5 heading: the bill number and what is being shown. */
.page-title {
    font-size: 1.5rem;
    text-align: center;
    color: var(--heading);
    margin: 0.5rem 0 0.4rem;
}

/*
    The legacy drew one navy box around both chambers, each chamber's name in a small white
    box sitting on top of its tinted block like a tab.
*/
.rollcall-panel-box {
    border: 1px solid var(--link);
    background: var(--page);
    padding: 0.6rem;
    margin: 0.75rem 0;
}
.rollcall-section { margin: 0; }
.rollcall-section + .rollcall-section { margin-top: 0.9rem; }

.rollcall-tab {
    display: inline-block;
    position: relative;
    font-size: 0.85rem;
    margin: 0 0 -1px;              /* the tab's foot sits on the block's top rule */
    padding: 0.2rem 0.75rem;
    background: var(--panel);
    border: 1px solid var(--link);
    border-bottom: 0;
}
.rollcall-body { border: 1px solid var(--link); }
.rollcall-empty { margin: 0; padding: 0.4rem 0.6rem; font-style: italic; }

.rollcall-table, .votes-table { border-collapse: collapse; width: 100%; }
.rollcall-table th, .rollcall-table td,
.votes-table th, .votes-table td { text-align: left; vertical-align: top; padding: 0.3rem 0.5rem; }
.votes-table thead th { border-bottom: 2px solid var(--heading); }
/* The roll call lists underlined each heading word instead of ruling off the row. */
.rollcall-table thead th { text-decoration: underline; }
.rollcall-table tbody tr + tr td, .votes-table tbody tr + tr th,
.votes-table tbody tr + tr td { border-top: 1px solid var(--rule); }
.rollcall-table .numeric, .votes-table .numeric { text-align: right; }
.nowrap { white-space: nowrap; }

/* The chamber tint the legacy used, on the whole block as it had it rather than on the rows
   alone; the section heading names the chamber in text, so nothing rests on the colour. */
.rollcall-body--house { background: #ffe5e6; }
.rollcall-body--senate { background: #eaffea; }

.votes-table .member-name { font-weight: normal; }

/*
    The roll call being reported, in the bordered grey panel the legacy put above the member
    list: the labelled values on the left, three to a row, and the two links out of this view
    stacked against the right edge — where the legacy right-aligned them.
*/
.rollcall-panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.25rem 1.5rem;
    margin: 0.5rem 0 0.75rem;
    background: var(--page);
    border: 1px solid var(--link);
    padding: 0.5rem;
}
/*
    The legacy's 25/12/62 columns, split once more so the four tallies each get a cell of their
    own on the second row. The first three size to their labels; the question and motion spans
    the last two and keeps whatever is left.
*/
.rollcall-facts {
    flex: 1 1 24rem;
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    gap: 0.3rem 1.25rem;
    margin: 0;
}
.rollcall-facts .fact-wide { grid-column: 3 / -1; }
.rollcall-facts > div { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.rollcall-facts dt { font-weight: bold; }
.rollcall-facts dt::after { content: ":"; }
.rollcall-facts dd { margin: 0; }

.rollcall-jump {
    flex: 0 1 auto;
    display: flex; flex-direction: column; align-items: flex-end;
    text-align: right;
    gap: 0.2rem;
    margin: 0;
}

@media (max-width: 44rem) {
    /* Once the panel stacks, the links read as a list under the values, not against a gap. */
    .rollcall-jump { align-items: flex-start; text-align: left; }
}

@media (max-width: 30rem) {
    .rollcall-facts { grid-template-columns: minmax(0, 1fr); }
    .rollcall-facts .fact-wide { grid-column: 1; }
    .rollcall-facts dd { margin-bottom: 0.3rem; }
    .rollcall-table th, .rollcall-table td,
    .votes-table th, .votes-table td { padding: 0.25rem 0.3rem; }
}