:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --text: #1f2933;
    --muted: #616e7c;
    --border: #d8dee4;
    --accent: #1a4f8a;
    --accent-soft: #eaf1f9;
    --highlight: #fff3bf;
    --radius: 6px;
    --page-max: 1440px;
    --gutter: 0.75rem;
}

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    /* Committee names and URLs are long enough to push a phone sideways. */
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
}

img, video, canvas {
    max-width: 100%;
}

/* The cat chases the cursor, so on a touch screen it would only ever sit
   frozen in a corner. */
@media (hover: none) {
    #oneko {
        display: none;
    }
}

h1, h2, h3, h4 {
    line-height: 1.25;
}

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

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

/* --- Page shell ------------------------------------------------------- */

.site-bar {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border);
}

/* Brand left, links right. Pure's horizontal menu is inline-block by default. */
.site-bar .pure-menu-horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-bar .pure-menu-heading {
    color: var(--text);
    font-size: 1.05rem;
    text-transform: none;
}

/* The mobile menu is the checkbox and nothing else — see the narrow-screen
   block at the end of the file for what checking it does. Clipped rather
   than hidden so it keeps its place in the tab order. */
.nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.nav-toggle-btn {
    display: none;
}

.page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 1.5rem;
}

.narrow {
    max-width: 34rem;
}

/* Pure's grid units carry no gutters, so opt into them per grid. */
.gutters {
    margin: 0 calc(-1 * var(--gutter));
}

/* Pure's units size in percentages without border-box, so the gutter padding
   has to be pulled inside the declared width or every column overflows by it. */
.gutters > [class*="pure-u"] {
    box-sizing: border-box;
    padding: 0 var(--gutter);
}

/* Sidebar column follows the reader down on wide screens. Pure's .pure-g is a
   flexbox, so a column stretches to the full height of the row by default and
   sticky has nothing to travel over -- align-self is what gives it its own
   content height back. Harmless where .sticky-col sits on a non-flex child. */
@media screen and (min-width: 64em) {
    .sticky-col {
        position: sticky;
        top: 1.5rem;
        align-self: flex-start;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
    }
}

footer.page {
    color: var(--muted);
    font-size: 0.9rem;
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}

/* --- Surfaces --------------------------------------------------------- */

.panel {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Headings and paragraphs shouldn't push against the edges they sit next to. */
.page > :first-child,
.panel > :first-child {
    margin-top: 0;
}

.panel > :last-child {
    margin-bottom: 0;
}

.notice {
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
}

.notice-error {
    border-color: #dcabab;
    background-color: #fdf3f3;
    color: #8a2626;
}

.notice-success {
    border-color: #a8cfad;
    background-color: #f2faf3;
    color: #1f5c2a;
}

/* --- Tables ----------------------------------------------------------- */

.pure-table {
    width: 100%;
}

/* Wide tables scroll inside their panel rather than stretching the page.
   The min-width keeps the columns readable instead of crushing them on
   narrow screens, which is what makes the scroll worth having. */
.table-scroll {
    overflow-x: auto;
}

.table-scroll > table {
    min-width: 32rem;
}

/* Sortable headers are real buttons, drawn as plain header text. */
th button {
    all: unset;
    display: block;
    width: 100%;
    cursor: pointer;
    white-space: nowrap;
}

th button:hover {
    text-decoration: underline;
}

#results-table-body tr {
    cursor: pointer;
}

/* Pure's striping colours the cells, so the hover state has to as well. */
#results-table-body tr:hover td {
    background-color: var(--accent-soft);
}

/* Bill numbers off the meeting agenda, in the results title cell.
   A block-level flex container, not inline-flex: it has to claim its own line
   so the snippet below starts on the next one rather than running on after the
   last pill. Wrapping is what keeps a forty-bill agenda folding instead of
   pushing the table sideways. */
.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.15rem 0 0.3rem;
}

/* --surface rather than --accent-soft on purpose: the row hover state *is*
   --accent-soft, and a pill painted with it would vanish under the cursor. */
.pill {
    display: inline-block;
    padding: 0 0.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--accent);
    font-size: 0.78rem;
    line-height: 1.6;
    white-space: nowrap;
}

/* The same yellow .matched-chunk uses on the hearing page, for the same
   reason: this is the thing you searched for. */
.pill-match {
    background-color: var(--highlight);
    border-color: #e0c96a;
    color: var(--text);
    font-weight: 600;
}

.pill-more {
    color: var(--muted);
}

/* --- Hearing page ----------------------------------------------------- */

/* Key/value metadata, two columns instead of stacked <dt>/<dd>. */
.meta-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin: 0;
}

.meta-list > div {
    display: contents;
}

.meta-list dt {
    color: var(--muted);
}

.meta-list dd {
    margin: 0;
}

summary {
    cursor: pointer;
    font-weight: 600;
}

/* Transcripts keep their source line breaks but still wrap. The line breaks
   are reinstated by app.chunkText -- chunk storage does not keep them -- and
   pre-wrap is what renders them. */
.transcript {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* One span per chunk, so a search result can be scrolled to by index. Purely
   structural: the transcript must read as continuous prose. */
.transcript-chunk {
    display: inline;
}

/* The passage a search result matched. scroll-margin keeps it clear of the
   sticky header when scrollToChunk brings it into view. */
.matched-chunk {
    background-color: var(--highlight);
    scroll-margin-top: 1rem;
}

video {
    width: 100%;
    height: auto;
    background-color: #000;
    border-radius: var(--radius);
}

/* --- Trends chart ----------------------------------------------------- */

/* Chart.js runs with maintainAspectRatio off, so the canvas takes its size
   from this box: tall enough to read on a phone, capped on a desktop. */
.chart-box {
    position: relative;
    height: 55vh;
    min-height: 260px;
}

figure {
    margin: 0;
}

/* --- Narrow screens --------------------------------------------------- */

/* Everything below the point where the layout is still comfortable in two
   dimensions. Pure's grid columns collapse at 64em, but the nav and the
   results table run out of room well before that. */
@media screen and (max-width: 47.99em) {

    /* Shell: give the content back the padding the desktop can afford. */
    .page {
        padding: 1rem;
    }

    .panel {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .site-bar .pure-menu-horizontal {
        padding: 0 1rem;
    }

    /* Anything under 16px makes iOS zoom the page on focus. */
    input, select, textarea {
        font-size: 16px;
    }

    .pure-button {
        padding: 0.6em 1em;
    }

    /* Nav: the links hide behind the ☰ label, which toggles the checkbox. */
    .nav-toggle-btn {
        display: block;
        padding: 0.5rem;
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        color: var(--text);
    }

    .nav-toggle:focus-visible + .nav-toggle-btn {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .site-bar .pure-menu-list {
        display: none;
        width: 100%;
    }

    .nav-toggle:checked ~ .pure-menu-list {
        display: block;
        border-top: 1px solid var(--border);
    }

    /* Pure's horizontal menu items are inline-block; stack them into rows
       big enough to tap. */
    .site-bar .pure-menu-item {
        display: block;
    }

    .site-bar .pure-menu-link {
        display: block;
        padding: 0.75rem 0;
    }

    /* Results table: one card per row instead of a sideways scroll. */
    .table-scroll > .cards-sm {
        min-width: 0;
    }

    /* The header row keeps the sort buttons reachable, drawn as a strip. */
    .cards-sm thead tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.25rem 0.75rem;
        padding: 0.5rem;
    }

    .cards-sm thead tr::before {
        content: "Sort by";
        color: var(--muted);
        font-size: 0.85rem;
    }

    .cards-sm th {
        display: block;
        padding: 0;
        border: 0;
    }

    .cards-sm tbody tr {
        display: block;
        padding: 0.75rem 0.5rem;
        border-top: 1px solid var(--border);
    }

    .cards-sm td {
        display: block;
        padding: 0.15rem 0;
        border: 0;
        white-space: normal;
    }

    /* The title cell is the card's heading, so it carries no label. */
    .cards-sm td[data-label]:not([data-label=""])::before {
        content: attr(data-label) ": ";
        color: var(--muted);
    }

    /* Hearing details read better stacked than as a squeezed two-column grid. */
    .meta-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .meta-list dt {
        margin-top: 0.5rem;
    }

    .meta-list > div:first-child dt {
        margin-top: 0;
    }

    .transcript-line .timestamp {
        width: auto;
    }

    .text-content {
        flex: 1 0 100%;
        min-width: 0;
    }

    /* Anchored to the line's left edge, a fixed-width dropdown would hang
       off the screen. */
    .speaker-dropdown {
        right: 0;
        min-width: 0;
    }
}