/* =============================================================
   Parliament Workbench — design tokens
   ============================================================= */
:root {
    /* Surfaces */
    --surface-page: #f4f6fa;
    --surface-card: #ffffff;
    --surface-muted: #f1f4f9;
    --surface-soft: #f8fafc;

    /* Ink */
    --ink-1: #0f172a;
    --ink-2: #475569;
    --ink-3: #94a3b8;

    /* Borders */
    --border-1: #e6eaf0;
    --border-2: #d6dce5;
    --border-strong: #94a3b8;

    /* Accent (identity / eyebrows / primary CTA) */
    --accent: #047857;
    --accent-strong: #065f46;
    --accent-soft: #d1fae5;
    --accent-tint: #ecfdf5;

    /* Status palette — semantically distinct from accent */
    --status-positive: #15803d;
    --status-positive-bg: #dcfce7;
    --status-warning: #b45309;
    --status-warning-bg: #fef3c7;
    --status-negative: #b91c1c;
    --status-negative-bg: #fee2e2;
    --status-neutral: #475569;
    --status-neutral-bg: #e2e8f0;
    --status-info: #1d4ed8;
    --status-info-bg: #dbeafe;

    /* Data palette (votes, charts) */
    --data-yes: #16a34a;
    --data-no: #dc2626;
    --data-abstain: #d97706;
    --data-not-voted: #94a3b8;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-focus: 0 0 0 3px rgba(4, 120, 87, 0.18);

    /* Type */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Bootstrap overrides */
    --bs-body-bg: var(--surface-page);
    --bs-body-color: var(--ink-1);
    --bs-border-color: var(--border-1);
    --bs-border-color-translucent: var(--border-1);
    --bs-secondary-color: var(--ink-2);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent-strong);
    --bs-success: var(--accent);
    --bs-success-rgb: 4, 120, 87;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--surface-page);
    color: var(--ink-1);
    font-family: var(--font-sans);
    font-feature-settings: "cv11", "ss01";
}

/* =============================================================
   Type scale
   ============================================================= */
.fw-black { font-weight: 800; }
.text-secondary { color: var(--ink-2) !important; }

.app-hero {
    border-bottom: 1px solid var(--border-1);
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
}

.app-hero h1 {
    color: var(--ink-1);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.18;
    margin-bottom: 0.4rem;
}

.app-hero .lead {
    color: var(--ink-2);
    font-size: 1rem;
    max-width: 64ch;
}

.app-hero .eyebrow {
    margin-bottom: 0.55rem;
}

.eyebrow,
.small.text-uppercase.fw-bold.text-success {
    color: var(--accent) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    line-height: 1.1;
    text-transform: uppercase;
}

.section-title {
    color: var(--ink-1);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    margin: 0.25rem 0 0;
}

/* Card header h2.h5 pattern used throughout — give it consistent type */
.card-header h2.h5,
.card-header h2.h4 {
    color: var(--ink-1);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.card-header h2.h4 {
    font-size: 1.15rem;
}

/* Detail panel h2.h4 (used in profile, mqa-detail, bill-detail, etc.) */
.mqa-detail h2.h4,
.bill-detail h2.h4,
.committee-detail h2.h4,
.election-detail h2.h4,
.ssi-detail h2.h4,
article > h2.h4 {
    color: var(--ink-1);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

h3.h6 {
    color: var(--ink-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 1rem;
    text-transform: uppercase;
}

.display-4.fw-black {
    color: var(--ink-1);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

#profile .display-6 {
    color: var(--ink-1);
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
}

h2, h3, h4, h5, h6 {
    color: var(--ink-1);
    letter-spacing: -0.005em;
}

/* =============================================================
   Navbar / footer
   ============================================================= */
.navbar.bg-body-tertiary {
    background: var(--surface-card) !important;
    border-bottom: 1px solid var(--border-1);
    box-shadow: var(--shadow-1);
}

.navbar-brand {
    color: var(--ink-1) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.navbar-brand::before {
    background: var(--accent);
    border-radius: 2px;
    content: '';
    display: inline-block;
    height: 0.95rem;
    margin-right: 0.5rem;
    transform: translateY(2px);
    width: 4px;
}

.nav-link {
    color: var(--ink-2) !important;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.45rem 0.75rem !important;
    position: relative;
}

.nav-link:hover {
    color: var(--ink-1) !important;
}

.nav-link.active {
    color: var(--accent) !important;
}

.nav-link.active::after {
    background: var(--accent);
    border-radius: 2px;
    bottom: -1px;
    content: '';
    height: 2px;
    left: 0.75rem;
    position: absolute;
    right: 0.75rem;
}

.navbar-text { color: var(--ink-3) !important; }

footer.border-top {
    background: var(--surface-card);
    border-top: 1px solid var(--border-1) !important;
    color: var(--ink-2);
}

/* =============================================================
   Cards & headers
   ============================================================= */
.card {
    background: var(--surface-card);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
}

.card-header,
.card-header.bg-white {
    background: var(--surface-card) !important;
    border-bottom: 1px solid var(--border-1);
    padding: 1rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

/* Reset Bootstrap muted bg utilities used inline that fight the design system */
.alert {
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}

.alert.alert-light {
    background: var(--surface-soft);
    border-color: var(--border-1);
    color: var(--ink-1);
}

.alert.alert-success {
    background: var(--status-positive-bg);
    border-color: transparent;
    color: var(--status-positive);
}

.alert.alert-warning {
    background: var(--status-warning-bg);
    border-color: transparent;
    color: var(--status-warning);
}

.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.btn-success {
    background: var(--accent);
    border-color: var(--accent);
}

.btn-success:hover,
.btn-success:focus {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.btn-outline-success {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-outline-success:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-outline-secondary {
    border-color: var(--border-2);
    color: var(--ink-2);
}

.btn-outline-secondary:hover {
    background: var(--surface-muted);
    border-color: var(--border-2);
    color: var(--ink-1);
}

/* =============================================================
   Forms
   ============================================================= */
.form-control,
.form-select {
    background-color: var(--surface-card);
    border-color: var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--ink-1);
    font-size: 0.92rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}

.form-label {
    color: var(--ink-2);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* =============================================================
   Filter bar — unified replacement for .*-tools grids
   ============================================================= */
.filter-bar {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-bar > input,
.filter-bar > select,
.filter-bar > button {
    flex: 0 1 auto;
}

.filter-bar input[type="search"] {
    flex: 1 1 14rem;
    min-width: 0;
}

.filter-bar select {
    flex: 0 1 10rem;
    min-width: 9rem;
}

.filter-bar button {
    flex: 0 0 auto;
}

/* Header layouts that used to split brand-on-left, tools-on-right */
.mqa-header-layout,
.election-header-layout,
.ssi-header-layout {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.mqa-header-layout > form,
.election-header-layout > form,
.ssi-header-layout > form {
    flex: 1 1 22rem;
    max-width: 720px;
}

/* =============================================================
   Sticky filter bar
   ============================================================= */
.sticky-filter > .card-header {
    background: var(--surface-card);
    position: sticky;
    top: 56px;
    z-index: 5;
}

/* =============================================================
   Stat tiles — single primitive
   ============================================================= */
.stat-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stat-tile {
    background: var(--surface-card);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
}

.stat-tile-label {
    color: var(--ink-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stat-tile-value {
    color: var(--ink-1);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.05;
    margin-top: 0.35rem;
}

.stat-tile-meta {
    color: var(--ink-2);
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

/* Legacy stat-strip variants reuse the grid */
.election-stat-strip,
.mqa-stat-strip,
.ssi-stat-strip,
.committee-stat-strip,
.department-stat-strip {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.election-stat-strip > div,
.mqa-stat-strip > div,
.ssi-stat-strip > div,
.committee-stat-strip > div,
.department-stat-strip > div {
    background: var(--surface-card);
    border: 1px solid var(--border-1) !important;
    border-radius: var(--radius-md) !important;
    padding: 1rem 1.15rem !important;
}

/* Top-of-page metric cards */
.metric-card {
    background: var(--surface-card);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    transition: box-shadow 120ms ease;
}

.metric-card .card-body {
    padding: 1.1rem 1.25rem;
}

.metric {
    color: var(--ink-1);
    font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 0.15rem;
}

/* =============================================================
   Chips — universal small label primitive
   ============================================================= */
.chip {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    color: var(--ink-1);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 500;
    gap: 0.35rem;
    line-height: 1.2;
    padding: 0.25rem 0.7rem;
    text-decoration: none;
    transition: background-color 120ms ease;
}

a.chip:hover {
    background: var(--surface-soft);
    color: var(--ink-1);
}

.chip strong {
    font-weight: 600;
}

.chip-accent {
    background: var(--accent-tint);
    border-color: transparent;
    color: var(--accent-strong);
}

.chip-positive {
    background: var(--status-positive-bg);
    border-color: transparent;
    color: var(--status-positive);
}

.chip-warning {
    background: var(--status-warning-bg);
    border-color: transparent;
    color: var(--status-warning);
}

.chip-negative {
    background: var(--status-negative-bg);
    border-color: transparent;
    color: var(--status-negative);
}

.chip-neutral {
    background: var(--status-neutral-bg);
    border-color: transparent;
    color: var(--status-neutral);
}

.chip-active {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
}
a.chip-active:hover { background: var(--accent-strong); color: #fff; }

/* Legacy pill classes mapped onto chip */
.mqa-pill,
.election-pill,
.ssi-pill {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-pill);
    color: var(--ink-1);
    display: inline-flex;
    font-size: 0.8125rem;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    text-decoration: none;
    transition: background-color 120ms ease;
}

a.mqa-pill:hover,
a.election-pill:hover,
a.ssi-pill:hover {
    background: var(--surface-soft);
}

.mqa-pill-list,
.election-pill-list,
.ssi-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* List-summary chip (the "Showing X of Y" summary above each long list) */
.list-summary-chip {
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    color: var(--ink-2);
    display: inline-flex;
    font-size: 0.82rem;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
}

.list-summary-chip strong {
    color: var(--ink-1);
    font-weight: 700;
}

/* Member status pill — slimmer than .chip */
.member-status-pill {
    align-items: center;
    border-radius: var(--radius-pill);
    display: inline-flex;
    font-size: 0.7rem;
    font-weight: 700;
    gap: 0.25rem;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 0.2rem 0.6rem;
    text-transform: uppercase;
}

/* =============================================================
   Bootstrap badge re-skin (kept for compatibility)
   ============================================================= */
.badge {
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.55rem;
}

.text-bg-success {
    background: var(--status-positive-bg) !important;
    color: var(--status-positive) !important;
}

.text-bg-danger {
    background: var(--status-negative-bg) !important;
    color: var(--status-negative) !important;
}

.text-bg-warning {
    background: var(--status-warning-bg) !important;
    color: var(--status-warning) !important;
}

.text-bg-secondary {
    background: var(--status-neutral-bg) !important;
    color: var(--status-neutral) !important;
}

.text-bg-light {
    background: var(--surface-muted) !important;
    color: var(--ink-1) !important;
}

.text-bg-info {
    background: var(--status-info-bg) !important;
    color: var(--status-info) !important;
}

.text-success {
    color: var(--accent) !important;
}

/* =============================================================
   Tables
   ============================================================= */
.table {
    --bs-table-bg: var(--surface-card);
    color: var(--ink-1);
}

.table thead th {
    background: var(--surface-soft);
    border-bottom: 1px solid var(--border-2);
    border-top: 1px solid var(--border-1);
    color: var(--ink-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.7rem 0.85rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody td,
.table tbody th {
    border-color: var(--border-1);
    padding: 0.7rem 0.85rem;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background: var(--surface-soft);
}

.table tbody tr.table-success {
    --bs-table-bg-state: var(--accent-tint);
    --bs-table-color-state: var(--ink-1);
}

.table tbody tr.table-success td,
.table tbody tr.table-success th {
    background: var(--accent-tint) !important;
}

/* Wrapping containers */
.event-list,
.mqa-table-wrap,
.allowance-table-wrap,
.bill-table-wrap,
.bill-timetable-list,
.committee-table-wrap,
.committee-role-list,
.department-table-wrap,
.department-office-list,
.election-table-wrap,
.ssi-table-wrap,
.composition-table-wrap {
    border-radius: var(--radius-sm);
    max-height: 620px;
    overflow: auto;
}

/* Sort link */
.sort-link {
    color: inherit;
    display: inline-flex;
    font: inherit;
    text-decoration: none;
}

.sort-link:hover,
.sort-link.active {
    color: var(--accent);
}

.sort-link.active {
    font-weight: 800;
}

/* =============================================================
   Sub-cards (small bordered tiles inside detail panels)
   ============================================================= */
.profile-card .border,
.mqa-detail .border,
.bill-detail .border,
.committee-detail .border,
.election-detail .border,
.ssi-detail .border {
    border-color: var(--border-1) !important;
    border-radius: var(--radius-sm) !important;
}

.border.rounded.p-2,
.border.rounded.p-3 {
    background: var(--surface-soft);
    border-color: var(--border-1) !important;
    border-radius: var(--radius-md) !important;
}

.border.rounded.p-2 .small.text-secondary,
.border.rounded.p-3 .small.text-secondary {
    color: var(--ink-2) !important;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* =============================================================
   Home hero ("This week in Parliament")
   ============================================================= */
.home-hero-card {
    background: var(--surface-card);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
}

.home-hero-card .card-header {
    background: linear-gradient(180deg, var(--accent-tint), var(--surface-card));
    border-bottom: 1px solid var(--border-1);
}

.home-hero-card .home-hero-grid h3 {
    border-bottom: 1px solid var(--border-1);
    color: var(--ink-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.55rem;
    padding-bottom: 0.4rem;
    text-transform: uppercase;
}

.home-hero-card .home-hero-grid li strong {
    color: var(--ink-1);
    font-weight: 600;
}

.home-hero-card .home-hero-grid li {
    line-height: 1.35;
}

/* =============================================================
   MSP workspace
   ============================================================= */
.msp-workspace {
    min-height: calc(100vh - 18rem);
}

.lookup-card,
.lookup-card-body {
    min-height: 0;
}

.lookup-card-body {
    display: flex;
    flex-direction: column;
}

.member-list {
    flex: 1 1 auto;
    min-height: 24rem;
    overflow: auto;
}

.member-list .list-group-item {
    border-color: var(--border-1);
}

.member-list .list-group-item-action.active {
    background: var(--accent-tint);
    border-color: var(--accent);
    color: var(--ink-1);
}

.member-list .list-group-item-action:hover {
    background: var(--surface-soft);
}

/* =============================================================
   Profile panel
   ============================================================= */
.profile-photo {
    aspect-ratio: 4 / 5;
    background: var(--surface-muted);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    object-fit: cover;
    width: 100%;
}

.profile-placeholder {
    align-items: center;
    color: var(--ink-3);
    display: grid;
    font-size: 2rem;
    font-weight: 800;
    place-items: center;
}

.profile-section-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-mini-section {
    background: var(--surface-card);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
}

.profile-mini-section h3 {
    border-bottom: 1px solid var(--border-1);
    color: var(--ink-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 0.6rem;
    padding-bottom: 0.4rem;
    text-transform: uppercase;
}

.profile-mini-section .list-group-item {
    border-color: var(--border-1);
    padding: 0.55rem 0;
}

.profile-mini-section .list-group-item strong,
.profile-mini-section .list-group-item span {
    display: block;
}

.profile-mini-section .list-group-item span {
    color: var(--ink-2);
    font-size: 0.8rem;
}

.profile-cross-party-chip {
    align-items: center;
    background: var(--accent-tint);
    border: 1px solid var(--accent-soft);
    border-radius: var(--radius-md);
    color: var(--ink-1);
    display: inline-flex;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    text-decoration: none;
    transition: background-color 120ms ease;
}

a.profile-cross-party-chip:hover {
    background: var(--accent-soft);
}

.profile-cross-party-chip strong {
    color: var(--accent-strong);
}

.profile-topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.profile-topic-tags .badge {
    background: var(--surface-muted) !important;
    color: var(--ink-2) !important;
    text-transform: capitalize;
}

.profile-recent-rail {
    background: var(--surface-soft);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    margin: 1rem 0;
    padding: 0.85rem 1rem;
}

.profile-recent-rail h3 {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.profile-recent-rail ol {
    margin: 0;
    padding-left: 1.25rem;
}

.profile-recent-rail a strong { color: var(--ink-1); }

.allowance-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.6rem;
}

/* =============================================================
   Division heatmap
   ============================================================= */
.division-heatmap {
    background: var(--surface-soft);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(auto-fill, minmax(14px, 1fr));
    margin-top: 0.75rem;
    padding: 0.4rem;
}

.division-heatmap-cell {
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: transform 100ms ease, outline-width 100ms ease;
}

.division-heatmap-cell:hover,
.division-heatmap-cell:focus {
    outline: 2px solid var(--ink-1);
    outline-offset: 1px;
    transform: scale(1.5);
    z-index: 2;
}

.division-heatmap-cell[data-vote="Yes"] { background: var(--data-yes); }
.division-heatmap-cell[data-vote="No"] { background: var(--data-no); }
.division-heatmap-cell[data-vote="Abstain"] { background: var(--data-abstain); }
.division-heatmap-cell[data-vote="Not Voted"] { background: var(--data-not-voted); }

.division-heatmap-legend {
    align-items: center;
    color: var(--ink-2);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.5rem;
}

.division-heatmap-legend-swatch {
    border-radius: 3px;
    display: inline-block;
    height: 0.85rem;
    margin-right: 0.3rem;
    vertical-align: middle;
    width: 0.85rem;
}

/* =============================================================
   Composition chart
   ============================================================= */
.composition-timeline {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.composition-card .card-body {
    display: grid;
    gap: 0.9rem;
}

.composition-chart-wrap {
    overflow-x: auto;
    position: relative;
}

.composition-tooltip {
    background: var(--surface-card);
    border: 1px solid var(--border-1);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    font-size: 0.85rem;
    max-width: 240px;
    min-width: 170px;
    padding: 0.6rem 0.8rem;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    z-index: 5;
}

.composition-tooltip[hidden] {
    display: none;
}

.composition-tooltip-party {
    color: var(--ink-1);
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
}

.composition-tooltip-session {
    color: var(--ink-2);
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}

.composition-tooltip-seats {
    color: var(--ink-1);
    font-weight: 600;
}

.composition-tooltip-link {
    color: var(--accent);
    display: block;
    font-weight: 700;
    margin-top: 0.4rem;
    text-decoration: none;
}

.composition-tooltip-link:hover,
.composition-tooltip-link:focus {
    color: var(--accent-strong);
    text-decoration: underline;
}

.composition-tooltip-link[hidden] { display: none; }

.composition-line-chart {
    display: block;
    height: auto;
    min-width: 720px;
    width: 100%;
}

.composition-axis {
    stroke: var(--border-2);
    stroke-width: 1.5;
}

.composition-grid-line {
    stroke: var(--border-1);
    stroke-width: 1;
}

.composition-party-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.composition-party-point {
    cursor: pointer;
    stroke: #fff;
    stroke-width: 1.5;
    transition: stroke-width 120ms ease, r 120ms ease;
}

.composition-party-point:hover,
.composition-party-point:focus {
    outline: none;
    stroke-width: 3;
}

.composition-party-point.is-active {
    stroke: var(--ink-1);
    stroke-width: 3;
}

.composition-chart-label {
    fill: var(--ink-2);
    font-size: 0.8rem;
}

.composition-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
}

.composition-legend-item {
    align-items: center;
    color: var(--ink-1);
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.35rem;
}

.composition-swatch {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: var(--radius-pill);
    height: 0.85rem;
    width: 0.85rem;
}

.composition-row .progress {
    height: 0.65rem;
}

/* =============================================================
   Tables / timelines specific to bill + mqa modules
   ============================================================= */
.bill-table,
.mqa-table,
.committee-table,
.department-table,
.election-table,
.ssi-table {
    table-layout: fixed;
}

.bill-col-title { width: 38%; }
.bill-col-type { width: 11%; }
.bill-col-date { width: 11%; }
.bill-col-stage { width: 15%; }
.bill-col-status { width: 17%; }
.bill-col-count { width: 8%; }

.mqa-col-ref { width: 13%; }
.mqa-col-title { width: 39%; }
.mqa-col-member { width: 18%; }
.mqa-col-type { width: 18%; }
.mqa-col-date { width: 12%; }

.bill-table th,
.bill-table td,
.mqa-table th,
.mqa-table td,
.committee-table th,
.committee-table td,
.department-table th,
.department-table td,
.election-table th,
.election-table td,
.ssi-table th,
.ssi-table td {
    overflow-wrap: anywhere;
    white-space: normal;
}

.committee-col-name { width: 42%; }
.committee-col-type { width: 16%; }
.committee-col-start { width: 14%; }
.committee-col-status { width: 14%; }
.committee-col-members { width: 14%; }

.department-col-name { width: 42%; }
.department-col-type { width: 16%; }
.department-col-start { width: 14%; }
.department-col-status { width: 14%; }
.department-col-offices { width: 14%; }

.ssi-col-number { width: 14%; }
.ssi-col-title { width: 44%; }
.ssi-col-date { width: 14%; }
.ssi-col-committee { width: 28%; }

.mqa-timeline,
.bill-stage-timeline {
    border-left: 2px solid var(--border-1);
    margin-left: 0.4rem;
    padding-left: 1rem;
}

.mqa-timeline li,
.bill-stage-timeline li {
    margin-bottom: 0.9rem;
    position: relative;
}

.mqa-timeline-dot,
.bill-stage-dot {
    background: var(--accent);
    border: 2px solid #fff;
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 1px var(--accent);
    height: 0.7rem;
    left: -1.42rem;
    position: absolute;
    top: 0.3rem;
    width: 0.7rem;
}

.motion-text {
    line-height: 1.55;
}

.bill-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bill-status-card {
    align-items: center;
    background: var(--surface-card);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    color: var(--ink-1);
    display: inline-flex;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    text-decoration: none;
    transition: border-color 120ms ease;
}

.bill-status-card:hover {
    border-color: var(--accent);
}

.bill-analytics-grid,
.committee-analytics-grid,
.department-analytics-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bill-analytics-grid .progress { height: 0.4rem; }

.mqa-overview-grid,
.election-overview-grid,
.ssi-overview-grid {
    align-items: stretch;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(360px, 1.2fr) minmax(240px, 0.9fr) minmax(220px, 0.8fr);
}

/* Progress bar inherits design */
.progress {
    background: var(--border-1);
    border-radius: var(--radius-pill);
    height: 0.7rem;
    overflow: hidden;
}

.progress-bar {
    background: var(--accent);
}

/* List groups in detail panes */
.list-group-flush .list-group-item {
    background: transparent;
    border-color: var(--border-1);
}

/* Hansard search results */
.hansard-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.hansard-list-item {
    background: var(--surface-card);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    color: var(--ink-1);
    display: block;
    padding: 0.85rem 1rem;
    text-decoration: none;
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

.hansard-list-item:hover,
.hansard-list-item:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-1);
    color: var(--ink-1);
}

.hansard-list-item.is-selected {
    background: var(--accent-tint);
    border-color: var(--accent);
}

.hansard-speaker {
    color: var(--ink-1);
    font-weight: 600;
}

.hansard-preview {
    color: var(--ink-2);
    font-size: 0.875rem;
    line-height: 1.45;
}

.hansard-detail h2.h4 {
    margin-bottom: 0.1rem;
}

.hansard-text {
    color: var(--ink-1);
    font-size: 0.95rem;
    line-height: 1.6;
    max-height: 60vh;
    overflow-y: auto;
}

.hansard-text p {
    margin-bottom: 0.7em;
}

.hansard-text :first-child { margin-top: 0; }
.hansard-text :last-child { margin-bottom: 0; }

/* Profile "Recent speeches" rail */
.profile-speeches {
    background: var(--surface-soft);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
}

.profile-speeches h3 {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.profile-speeches ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile-speeches li {
    border-top: 1px solid var(--border-1);
    padding: 0.55rem 0;
}

.profile-speeches li:first-child {
    border-top: none;
}

.profile-speeches a {
    color: var(--ink-1);
    text-decoration: none;
}

.profile-speeches a:hover {
    color: var(--accent);
}

.profile-speeches .speech-meta {
    color: var(--ink-2);
    font-size: 0.78rem;
}

.profile-speeches .speech-preview {
    color: var(--ink-2);
    font-size: 0.85rem;
    line-height: 1.45;
    margin-top: 0.15rem;
}

/* Render chip in the footer */
.render-chip {
    color: var(--ink-3);
    font-feature-settings: "tnum";
    font-size: 0.72rem;
    letter-spacing: 0.01em;
}

.render-chip strong {
    color: var(--ink-2);
}

.render-chip a {
    color: var(--ink-2);
    text-decoration: none;
}

.render-chip a:hover { color: var(--accent); }

.freshness-chip {
    color: var(--ink-2);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}
.freshness-chip strong {
    color: var(--ink-1);
}
.freshness-chip .text-secondary {
    color: var(--ink-3) !important;
}

/* Analytics dashboard — daily-volume bars */
.analytics-bars {
    align-items: flex-end;
    background: var(--surface-soft);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-md);
    display: flex;
    gap: 4px;
    height: 140px;
    padding: 0.85rem 0.85rem 1.6rem;
    position: relative;
}

.analytics-bar {
    align-items: flex-end;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 14px;
    position: relative;
}

.analytics-bar-fill {
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    width: 100%;
}

.analytics-bar-label {
    bottom: -1.25rem;
    color: var(--ink-3);
    font-size: 0.62rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%) rotate(-30deg);
    transform-origin: top left;
    white-space: nowrap;
}

.analytics-bar:hover .analytics-bar-fill {
    background: var(--accent-strong);
}

/* Back-to-list link for master-detail pages (only on sub-xl screens) */
.back-to-list {
    align-items: center;
    color: var(--ink-2);
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
    text-decoration: none;
}

.back-to-list:hover,
.back-to-list:focus {
    color: var(--accent);
}

/* Scroll-anchor padding so the sticky navbar doesn't cover the top of jumped-to panels */
[id$="-detail"],
[id$="-list"] {
    scroll-margin-top: 70px;
}

/* =============================================================
   Scottish Parliament TV cross-links
   ============================================================= */
.sptv-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #0b1f3a;
    color: #fff;
    text-decoration: none;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.1;
    transition: background 0.15s ease, transform 0.15s ease;
}
.sptv-link:hover {
    background: #15315c;
    color: #fff;
    transform: translateY(-1px);
}
.sptv-link svg {
    display: block;
    color: #ffd33a;
}
.sptv-link-inline {
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
}
.sptv-link-inline:hover {
    color: var(--accent-strong);
}

/* =============================================================
   MSP landing page (?page=home)
   ============================================================= */
.party-seats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.6rem;
}
.party-seat-tile {
    display: flex;
    background: var(--surface-card);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: var(--ink-1);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.party-seat-tile:hover {
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
}
.party-seat-tile-stripe {
    width: 6px;
    flex-shrink: 0;
    background: var(--accent);
}
.party-seat-tile-body {
    padding: 0.6rem 0.75rem;
    flex-grow: 1;
}
.party-seat-tile-count {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}
.party-seat-tile-name {
    font-size: 0.85rem;
    line-height: 1.2;
}
.party-seat-tile-name strong {
    display: block;
    color: var(--ink-1);
}
.party-seat-tile-name .text-secondary {
    font-size: 0.78rem;
}

/* Quick-search dropdown — only shows when there's a search term. */
.msp-quicksearch {
    position: relative;
}
.member-list-dropdown {
    display: none;
    max-height: 320px;
    overflow-y: auto;
    margin-top: 0.6rem;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    background: #fff;
}
.member-list-dropdown.is-open {
    display: block;
}
.member-list-dropdown .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}
.member-list-dropdown .list-group-item:first-child {
    border-top: 0;
}
.member-list-dropdown .list-group-item:last-child {
    border-bottom: 0;
}

/* =============================================================
   MSP profile (?page=member)
   ============================================================= */
.member-profile-card .member-photo {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-2);
}
.member-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.member-topics .chip {
    margin-right: 0.3rem;
    margin-bottom: 0.3rem;
}

/* =============================================================
   What's coming up
   ============================================================= */
.upcoming-timeline .upcoming-day {
    border-left: 3px solid var(--border-2);
    padding: 0.4rem 0 0.6rem 1rem;
    margin-bottom: 0.4rem;
}
.upcoming-timeline .upcoming-day.is-future {
    border-left-color: var(--accent);
}
.upcoming-timeline .upcoming-day.is-past h3 {
    color: var(--ink-3);
}
.upcoming-timeline .upcoming-item {
    margin-bottom: 0.25rem;
}

/* =============================================================
   Topics page
   ============================================================= */
.topic-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    align-items: baseline;
    padding: 0.6rem;
    background: var(--surface-soft);
    border-radius: var(--radius-md);
}
.topic-tag {
    text-decoration: none;
    color: var(--ink-1);
    line-height: 1.2;
}
.topic-tag:hover {
    color: var(--accent-strong);
}
.topic-tag.is-active {
    color: var(--accent-strong);
    text-decoration: underline;
}

/* =============================================================
   Hansard <-> MQA cross-ref panel
   ============================================================= */
.hansard-cross-ref {
    background: var(--surface-soft);
}

/* =============================================================
   Topic timeline chart (?page=topics&topic=X)
   ============================================================= */
.topic-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 170px;
    padding: 0.4rem;
    background: var(--surface-soft);
    border-radius: var(--radius-md);
    overflow-x: auto;
}
.topic-chart-col {
    flex: 0 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}
.topic-chart-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: transparent;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    min-height: 1px;
}
.topic-chart-seg {
    display: block;
    width: 100%;
}
.topic-chart-label {
    font-size: 0.62rem;
    color: var(--ink-3);
    margin-top: 0.25rem;
    transform: rotate(-45deg);
    transform-origin: top center;
    white-space: nowrap;
}
.topic-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.topic-chart-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 0.2rem;
}

/* =============================================================
   Theme grid (?page=topics)
   ============================================================= */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}
.theme-card {
    display: block;
    background: var(--surface-card);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.75rem;
    color: var(--ink-1);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.theme-card:hover {
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
    color: var(--accent-strong);
}
.theme-card-label {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.1;
    text-transform: capitalize;
}
.theme-card-tokens {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    line-height: 1.3;
}
.theme-card-meta {
    margin-top: 0.4rem;
    font-size: 0.72rem;
}

/* =============================================================
   Career arc (member profile)
   ============================================================= */
.career-arc {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0;
}
.career-arc::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-2);
}
.career-event {
    position: relative;
    padding: 0.25rem 0 0.25rem 0;
    margin-bottom: 0.4rem;
}
.career-event-icon {
    position: absolute;
    left: -1.5rem;
    top: 0.2rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.6rem;
    text-align: center;
    line-height: 16px;
    box-shadow: 0 0 0 3px var(--surface-card);
}
.career-event.is-party .career-event-icon { background: #d63384; }
.career-event.is-party-out .career-event-icon { background: var(--ink-3); }
.career-event.is-seat .career-event-icon { background: #0d6efd; }
.career-event.is-seat-out .career-event-icon { background: var(--ink-3); }
.career-event.is-committee .career-event-icon { background: #6f42c1; }
.career-event.is-committee-out .career-event-icon { background: var(--ink-3); }
.career-event.is-gov .career-event-icon { background: var(--accent-strong); }
.career-event.is-gov-out .career-event-icon { background: var(--ink-3); }
.career-event-label {
    font-size: 0.88rem;
    line-height: 1.25;
}

/* =============================================================
   Voting drift chart — labels sit beneath; the bar fills the
   space above them from the bottom upwards. The bar wrap is an
   explicit fixed-height container so the % bar height resolves
   meaningfully (was previously collapsing to content-height).
   ============================================================= */
.drift-chart {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.6rem;
    background: var(--surface-soft);
    border-radius: var(--radius-md);
}
.drift-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.drift-bar-wrap {
    display: flex;
    align-items: flex-end;
    height: 130px;
    width: 100%;
}
.drift-bar {
    width: 100%;
    background: var(--status-warning, #d97706);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
}
.drift-label {
    font-size: 0.78rem;
    text-align: center;
    margin-top: 0.3rem;
    color: var(--ink-2);
}
.drift-value {
    font-size: 0.78rem;
    text-align: center;
    color: var(--ink-1);
    font-weight: 600;
}

/* =============================================================
   Voice fingerprint phrase cloud (member profile)
   ============================================================= */
.phrase-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    align-items: baseline;
    padding: 0.5rem;
    background: var(--surface-soft);
    border-radius: var(--radius-md);
}
.phrase-tag {
    text-decoration: none;
    color: var(--ink-1);
    line-height: 1.2;
}
.phrase-tag:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

/* =============================================================
   Voting dashboard
   ============================================================= */
.voting-bar {
    display: inline-block;
    height: 6px;
    background: var(--surface-muted);
    border-radius: var(--radius-pill);
    overflow: hidden;
    vertical-align: middle;
}
.voting-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-pill);
}
.voting-bar-rebel .voting-bar-fill {
    background: var(--status-warning, #d97706);
}

/* =============================================================
   Search results
   ============================================================= */
.search-section + .search-section {
    margin-top: 1.5rem;
}
.search-hit {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border-2);
}
.search-hit:last-child {
    border-bottom: 0;
}
.search-hit-title {
    margin-bottom: 0.2rem;
    font-weight: 600;
}
.search-hit-excerpt {
    color: var(--ink-2);
    font-size: 0.9rem;
}
.search-hit mark {
    background: var(--accent-soft);
    color: var(--ink-1);
    padding: 0 0.15rem;
    border-radius: 2px;
}
/* Navbar search: icon-only by default on lg+, expands inline when toggled.
   On mobile (collapsed nav) the input is always shown full-width. */
.navbar-search-form {
    gap: 0.4rem;
}
.navbar-search-toggle {
    line-height: 1;
    padding: 0.25rem 0.45rem;
}
.navbar-search-toggle svg {
    display: block;
}
@media (min-width: 992px) {
    .navbar-search-input {
        width: 0;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        border-color: transparent;
        background: transparent;
        transition: width 0.2s ease, padding 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }
    .navbar-search-form.is-open .navbar-search-input,
    .navbar-search-input:focus,
    .navbar-search-input:not(:placeholder-shown) {
        width: 220px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        border-color: var(--border-2);
        background: #fff;
    }
}
@media (max-width: 991px) {
    .navbar-search-form {
        width: 100%;
        margin-top: 0.5rem;
    }
    .navbar-search-toggle {
        display: none;
    }
    .navbar-search-input {
        width: 100%;
    }
}

/* =============================================================
   Compare two MSPs
   ============================================================= */
.compare-table th {
    width: 22%;
    color: var(--ink-2);
    font-weight: 500;
}
.compare-bar {
    display: inline-block;
    height: 6px;
    background: var(--surface-muted);
    border-radius: var(--radius-pill);
    overflow: hidden;
    vertical-align: middle;
    width: 100%;
    max-width: 200px;
}
.compare-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-pill);
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 991px) {
    .profile-section-grid {
        grid-template-columns: 1fr;
    }
    .mqa-overview-grid,
    .election-overview-grid,
    .ssi-overview-grid,
    .bill-analytics-grid,
    .committee-analytics-grid,
    .department-analytics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    /* Filter bars become a 2-column grid: search & submit span the full row, selects pair up */
    .filter-bar {
        display: grid;
        gap: 0.4rem;
        grid-template-columns: 1fr 1fr;
    }
    .filter-bar > * {
        min-width: 0;
        width: 100%;
    }
    .filter-bar > input[type="search"],
    .filter-bar > button,
    .filter-bar > div {
        grid-column: 1 / -1;
    }

    /* Slim down inputs themselves so a row of selects doesn't dominate */
    .form-control,
    .form-select {
        font-size: 0.85rem;
        min-height: 0;
        padding: 0.4rem 0.6rem;
    }
    .form-select {
        padding-right: 1.9rem;
    }
    .filter-bar > button {
        font-size: 0.85rem;
        padding: 0.45rem 0.8rem;
    }

    .stat-grid,
    .election-stat-strip,
    .mqa-stat-strip,
    .ssi-stat-strip,
    .committee-stat-strip,
    .department-stat-strip {
        grid-template-columns: 1fr;
    }
    .mqa-header-layout,
    .election-header-layout,
    .ssi-header-layout {
        align-items: stretch;
        flex-direction: column;
    }
    .card-header {
        padding: 0.85rem 1rem;
    }
    .card-body {
        padding: 1rem;
    }

    /* ==========================================================
       Mobile card-stacked tables — replace dense tabular rows
       with uniform cards. Applies only to .mobile-stack tables.
       ========================================================== */
    .table-responsive:has(.mobile-stack),
    .allowance-table-wrap,
    .bill-table-wrap,
    .mqa-table-wrap,
    .committee-table-wrap,
    .department-table-wrap,
    .election-table-wrap,
    .ssi-table-wrap {
        border-radius: 0;
        max-height: none !important;
        overflow: visible;
    }

    .mobile-stack,
    .mobile-stack thead,
    .mobile-stack tbody,
    .mobile-stack tr,
    .mobile-stack th,
    .mobile-stack td {
        display: block;
        width: auto;
    }

    .mobile-stack {
        background: transparent;
        margin: 0 -0.25rem;
        table-layout: auto;
    }

    .mobile-stack thead {
        display: none;
    }

    .mobile-stack tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .mobile-stack tbody tr {
        background: var(--surface-card);
        border: 1px solid var(--border-1) !important;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-1);
        padding: 0.75rem 0.9rem;
    }

    .mobile-stack tbody tr.table-success {
        background: var(--accent-tint) !important;
        border-color: var(--accent) !important;
    }

    .mobile-stack tbody tr.table-success td,
    .mobile-stack tbody tr.table-success th {
        background: transparent !important;
    }

    .mobile-stack tbody td,
    .mobile-stack tbody th {
        background: transparent !important;
        border: 0 !important;
        font-size: 0.875rem;
        padding: 0.1rem 0 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* Show the column header above each stacked cell when JS has copied it
       into [data-label]. Skip on the first cell (it's the row title and
       carries its own context). */
    .mobile-stack tbody td[data-label]:not(:first-child)::before {
        content: attr(data-label);
        display: block;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-3);
        margin-top: 0.4rem;
        margin-bottom: 0.05rem;
    }

    /* First cell — usually the title/name — gets prominence */
    .mobile-stack tbody td:first-child,
    .mobile-stack tbody th:first-child {
        font-size: 0.95rem;
        font-weight: 600;
        margin-bottom: 0.15rem;
    }

    /* Nested small text within cells stays small */
    .mobile-stack .small,
    .mobile-stack .text-secondary {
        font-size: 0.8rem !important;
        font-weight: 400;
    }

    /* Inline badges/chips appear naturally in flow */
    .mobile-stack .badge {
        display: inline-block;
        font-size: 0.7rem;
        vertical-align: middle;
    }

    /* Empty-state row keeps its message readable */
    .mobile-stack tbody td[colspan] {
        color: var(--ink-2);
        font-size: 0.875rem;
        font-weight: 400;
        padding: 0.5rem 0 !important;
    }

    /* Drop fixed table-layout col widths on mobile listings */
    .bill-table,
    .mqa-table,
    .committee-table,
    .department-table,
    .election-table,
    .ssi-table {
        table-layout: auto;
    }

    /* ==========================================================
       Other mobile tightening
       ========================================================== */
    main.container-fluid {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
        padding-top: 1rem;
    }

    /* Hero is the largest single block on mobile; tighten it */
    .app-hero {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
    .app-hero h1 {
        font-size: 1.5rem;
        line-height: 1.2;
        margin-bottom: 0.3rem;
    }
    .app-hero .lead {
        font-size: 0.92rem;
        line-height: 1.4;
    }

    /* Top-of-page metric strip: 2-up at most, smaller numbers */
    section.row.g-3.mb-4 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
        margin-bottom: 1rem !important;
    }
    .metric-card .card-body {
        padding: 0.7rem 0.8rem;
    }
    .metric {
        font-size: 1.45rem;
        margin-bottom: 0;
    }
    .metric-card .text-secondary {
        font-size: 0.72rem;
    }

    /* Home "This week" hero — collapse to vertical stack of mini sections */
    .home-hero-card .home-hero-grid {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.85rem;
    }
    .home-hero-card .home-hero-grid h3 {
        font-size: 0.66rem;
        margin-bottom: 0.4rem;
    }
    .home-hero-card .home-hero-grid li {
        margin-bottom: 0.6rem !important;
    }

    /* Profile cards: full width, tighter padding */
    .profile-section-grid {
        gap: 0.6rem;
    }
    .profile-mini-section {
        padding: 0.75rem 0.85rem;
    }
    .profile-mini-section h3 {
        font-size: 0.66rem;
        margin-bottom: 0.4rem;
    }

    /* Lookup list (MSPs) — show only first ~10rem of height before scrolling */
    .member-list {
        min-height: 18rem;
        max-height: 22rem;
    }

    /* Status pills + chips smaller on tight screens */
    .chip,
    .list-summary-chip,
    .badge {
        font-size: 0.72rem;
    }
    .member-status-pill {
        font-size: 0.62rem;
        padding: 0.15rem 0.45rem;
    }

    /* Heatmap — bigger cells so they're actually tappable */
    .division-heatmap {
        grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
    }

    /* Pinned tooltip on composition chart — keep within the viewport */
    .composition-tooltip {
        max-width: calc(100vw - 2rem);
    }

    /* Sub-stat tables inside analytics grids (bill/committee/department) — small + readable */
    .bill-analytics-grid table.table-sm,
    .committee-analytics-grid table.table-sm,
    .department-analytics-grid table.table-sm {
        font-size: 0.78rem;
    }

    /* Status pill strip on bills page */
    .bill-status-strip {
        gap: 0.35rem;
    }
    .bill-status-card {
        flex: 1 1 calc(50% - 0.35rem);
        font-size: 0.75rem;
        padding: 0.45rem 0.6rem;
    }

    /* Sticky-filter card-header on mobile: don't keep it pinned (it eats screen) */
    .sticky-filter > .card-header {
        position: static;
    }

    /* =====================================================
       Compare two MSPs — collapse 3-col table on mobile.
       The desktop layout is row-label | MSP A | MSP B. On
       mobile we stack each row as its own card with the
       label as a heading and the two MSPs underneath.
       ===================================================== */
    .compare-table,
    .compare-table thead,
    .compare-table tbody,
    .compare-table tr,
    .compare-table th,
    .compare-table td {
        display: block;
        width: auto;
    }
    .compare-table thead {
        margin-bottom: 0.5rem;
    }
    .compare-table thead tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        background: var(--surface-soft);
        padding: 0.6rem 0.75rem;
        border-radius: var(--radius-md);
        border: 1px solid var(--border-1);
    }
    .compare-table thead th:first-child {
        display: none;
    }
    .compare-table thead th {
        border: 0;
        padding: 0;
    }
    .compare-table tbody tr {
        display: block;
        background: var(--surface-card);
        border: 1px solid var(--border-1);
        border-radius: var(--radius-md);
        padding: 0.65rem 0.8rem;
        margin-bottom: 0.5rem;
        box-shadow: var(--shadow-1);
    }
    .compare-table tbody th {
        width: auto !important;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--ink-2);
        padding: 0 0 0.45rem 0;
        border: 0;
    }
    .compare-table tbody td {
        padding: 0.3rem 0;
        border: 0;
    }
    .compare-table tbody td:first-of-type {
        border-top: 1px dashed var(--border-2);
        padding-top: 0.55rem;
    }
    .compare-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--ink-3);
        margin-bottom: 0.15rem;
    }

    /* =====================================================
       MSP profile (?page=member) — tighten on small screens.
       The photo wraps to its own row above the heading; the
       quick-action buttons stack to full width.
       ===================================================== */
    .member-profile-card .member-photo {
        width: 72px;
        height: 72px;
    }
    .member-quick-actions {
        width: 100%;
    }
    .member-quick-actions .btn {
        flex: 1 1 calc(50% - 0.2rem);
    }
    .member-topics .chip {
        font-size: 0.78rem;
    }

    /* =====================================================
       Party-seat tiles on the MSP landing page — denser
       grid on phones (auto-fill already adapts width, this
       trims padding so two tiles fit per row).
       ===================================================== */
    .party-seats-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.4rem;
    }
    .party-seat-tile-count {
        font-size: 1.35rem;
    }
    .party-seat-tile-body {
        padding: 0.45rem 0.6rem;
    }

    /* =====================================================
       Search results — slightly tighter padding.
       ===================================================== */
    .search-hit {
        padding: 0.55rem 0;
    }

    /* =====================================================
       Voting dashboard tables — drop the inline bar width
       (the parent <span style="width:60px"> is too cramped
       in stacked mobile rows). Let the bar fill the cell.
       ===================================================== */
    .mobile-stack .voting-bar,
    .mobile-stack .voting-bar.voting-bar-rebel {
        width: 100% !important;
        max-width: 200px;
    }
}

/* =============================================================
   Print — hide site chrome and filter controls; expand details;
   give long text room to breathe. People do print Hansard
   contributions, division detail sheets, and member profiles.
   ============================================================= */
@media print {
    /* Strip the things that don't belong on paper. */
    nav.navbar,
    .navbar-search-form,
    .navbar-toggler,
    .filter-bar,
    .sticky-filter > .card-header,
    .render-chip,
    .freshness-chip,
    .app-hero p.lead,
    .member-quick-actions,
    .sptv-link,
    .sptv-link-inline,
    .sort-link,
    footer .text-secondary a,
    button,
    .btn,
    select,
    input[type="search"],
    input[type="text"] {
        display: none !important;
    }

    /* Black on white, generous margins, no shadows. */
    body {
        color: #000 !important;
        background: #fff !important;
        font-size: 11pt;
    }
    .card, .border, section {
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    a {
        color: #000 !important;
        text-decoration: none !important;
    }
    a[href]:not([href^="#"])::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #555;
    }
    /* Don't print href text for internal anchors / form links. */
    a[href^="index.php"]::after,
    a[href^="#"]::after,
    a[href^="/"]::after {
        content: "";
    }

    /* Stat tiles and stripes go inline so they wrap onto pages. */
    .stat-grid,
    .row {
        display: block !important;
    }
    .stat-tile,
    [class^="col-"] {
        page-break-inside: avoid;
        margin-bottom: 0.5rem;
    }

    /* Long lists shouldn't overflow viewport limits. */
    .petition-discussion-list,
    .composition-table-wrap {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Tables stay tabular, but tone down padding. */
    table {
        font-size: 9.5pt;
    }
    thead {
        display: table-header-group;
    }
    tr {
        page-break-inside: avoid;
    }

    /* Hansard contribution text needs to wrap, not scroll. */
    .hansard-text {
        overflow: visible !important;
    }
}

/* =============================================================
   Accessibility: skip link, focus styles, reduced motion
   ============================================================= */
.skip-link {
    position: absolute;
    left: -10000px;
    top: 0;
    z-index: 9999;
    background: #fff;
    color: var(--accent-strong);
    padding: 0.6rem 1rem;
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    font-weight: 700;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* Make keyboard focus visible everywhere — Bootstrap's default is too subtle. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================
   Fun Corner (?page=fun)
   ============================================================= */
.mood-ring {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.12);
    flex-shrink: 0;
    background: linear-gradient(135deg, currentColor 0%, rgba(0,0,0,0.2) 100%);
    animation: mood-pulse 4s ease-in-out infinite;
}
@keyframes mood-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
.mood-ring-card .section-title { line-height: 1.1; }

.hof-card {
    display: flex;
    gap: 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    height: 100%;
}
.hof-medal {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}
.hof-body { min-width: 0; }
.hof-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.15rem;
}
.hof-name {
    display: block;
    font-weight: 700;
    color: var(--ink-1);
    line-height: 1.2;
}
.hof-name:hover { color: var(--accent-strong); }
.hof-subtitle { font-size: 0.8rem; line-height: 1.3; }

.top-talkers li:last-child { border-bottom: 0 !important; }

.catchphrase-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.6rem;
}
.catchphrase-tile {
    background: var(--surface-soft);
    border: 1px solid var(--border-2);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
}
.catchphrase-quote {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-1);
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.catchphrase-attrib {
    font-size: 0.78rem;
    color: var(--ink-2);
}

.fun-launch {
    display: block;
    background: var(--surface-card);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    color: var(--ink-1);
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fun-launch:hover {
    color: var(--accent-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-1);
}
.fun-launch-emoji {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.fun-launch-title {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}
.fun-launch-blurb {
    font-size: 0.85rem;
    color: var(--ink-2);
    margin-top: 0.25rem;
}

/* =============================================================
   Bingo (?page=bingo)
   ============================================================= */
.bingo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
    max-width: 740px;
}
.bingo-cell {
    aspect-ratio: 1 / 1;
    background: var(--surface-card);
    border: 2px solid var(--border-1);
    border-radius: var(--radius-md);
    padding: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bingo-cell:hover { border-color: var(--accent); }
.bingo-cell.is-marked {
    background: var(--accent);
    border-color: var(--accent-strong);
    color: #fff;
    font-weight: 600;
}
.bingo-cell.is-free {
    background: var(--accent-tint);
    border-style: dashed;
    border-color: var(--accent);
    font-style: italic;
}

/* =============================================================
   Quiz (?page=quiz)
   ============================================================= */
.quiz-form .quiz-q {
    background: var(--surface-card);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 0.8rem;
}
.quiz-form legend {
    float: none;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}
.quiz-motion-text {
    background: var(--surface-soft);
    border-left: 3px solid var(--accent);
    padding: 0.65rem 0.85rem;
    margin: 0 0 0.65rem;
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.45;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.quiz-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.quiz-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-pill);
    cursor: pointer;
    background: var(--surface-soft);
    font-size: 0.88rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.quiz-option:hover { border-color: var(--accent); }
.quiz-option input { accent-color: var(--accent); }
.quiz-option:has(input:checked) {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.quiz-result-hero {
    background: var(--accent-tint);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
}
.quiz-result-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--accent-strong);
}
.quiz-result-score { color: var(--ink-2); margin-top: 0.5rem; }

/* =============================================================
   Voting network (?page=network)
   ============================================================= */
.network-wrap {
    width: 100%;
    overflow: auto;
    background: var(--surface-soft);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-2);
}
.network-svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 900px;
    margin: 0 auto;
}
.network-svg circle {
    cursor: pointer;
    transition: r 0.15s ease, stroke-width 0.15s ease;
}
.network-svg circle:hover {
    r: 9;
    stroke-width: 2.5;
}

/* =============================================================
   MSP profile badges + alter ego
   ============================================================= */
.msp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.msp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    color: #92400e;
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.65rem 0.2rem 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
}
.msp-badge-icon { font-size: 1rem; line-height: 1; }
.alter-ego {
    background: var(--accent-tint);
    border-left: 3px solid var(--accent);
    padding: 0.5rem 0.7rem;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-top: 0.5rem !important;
}

/* =============================================================
   Footer catchphrase ticker
   ============================================================= */
.catchphrase-ticker {
    color: var(--ink-2);
    font-style: italic;
}
.catchphrase-ticker em {
    color: var(--ink-1);
    font-style: italic;
}