* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================================ */

:root {
    /* Primary Brand Colors */
    --color-primary: #3498db;
    --color-primary-dark: #2980b9;
    --color-primary-darker: #21618c;

    /* Text Colors */
    --color-text: #333;
    --color-text-dark: #2c3e50;
    --color-text-medium: #34495e;
    --color-text-light: #555;
    --color-text-muted: #7f8c8d;
    --color-text-subtle: #95a5a6;

    /* Background Colors */
    --color-bg-body: #f5f5f5;
    --color-bg-white: #ffffff;
    --color-bg-light: #f9f9f9;
    --color-bg-lighter: #fafafa;
    --color-bg-gray: #f8f9fa;
    --color-bg-medium: #f0f0f0;

    /* Border Colors */
    --color-border: #e0e0e0;
    --color-border-light: #e9ecef;
    --color-border-medium: #dee2e6;
    --color-border-dark: #d1d9e0;
    --color-border-darker: #adb5bd;

    /* Status Colors */
    --color-success: #27ae60;
    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-error: #e74c3c;
    --color-error-dark: #c0392b;
    --color-error-bg: #ffe6e6;
    --color-disabled: #95a5a6;

    /* Jurisdiction Colors */
    --color-ontario: #ef9a9a;
    --color-toronto: #90caf9;
    --color-federal: #a5d6a7;

    /* Highlight Colors */
    --color-highlight-phrase: #ffeb3b;
    --color-highlight-keyword: #b3e5fc;
    --color-highlight-mark: #fff3cd;
    --cs-warn-text: #7a5c00;   /* readable on --color-highlight-mark */

    /* Semantic Search Colors */
    --color-purple: #7c3aed;
    --color-purple-light: #6f42c1;
    --color-purple-bg: #f3e8ff;

    /* Tab Colors (GitHub-inspired) */
    --color-tab-text: #656d76;
    --color-tab-active: #1f2328;
    --color-tab-border: #d1d9e0;
    --color-tab-border-hover: #c0c8d0;

    /* Link Colors */
    --color-link: #0066cc;
    --color-link-dark: #004499;

    /* Additional Gray/Neutral Colors */
    --color-gray-100: #f9fafb;
    --color-gray-200: #f4f4f4;
    --color-gray-300: #ececec;
    --color-gray-400: #ddd;
    --color-gray-500: #bbb;
    --color-gray-600: #6c757d;
    --color-gray-700: #6b7280;
    --color-gray-800: #495057;
    --color-gray-900: #212529;
    --color-gray-light: #9ca3af;
    --color-gray-border: #ced4da;

    /* Blue tints */
    --color-blue-lightest: #f0f8ff;
    --color-blue-lighter: #f0f7fc;
    --color-blue-light: #e8f4f8;
    --color-blue-medium: #b0d4f1;
    --color-blue-primary: #0d6efd;

    /* Green tints */
    --color-green: #198754;

    /* Light background variations */
    --color-bg-gray-light: #e8e8e8;

    /* Purple tints (additional) */
    --color-purple-lighter: #ede9fe;

    /* Black */
    --color-black: #000;

    /* Secondary Action Colors (teal — derived from sparkline stroke #5F9EA0) */
    --color-secondary: #5F9EA0;           /* sparkline stroke — foundation */
    --color-secondary-light: #7ab5b7;     /* border / outline */
    --color-secondary-bg: #f0f8f8;        /* button background fill */
    --color-secondary-bg-hover: #daeef0;  /* hover fill */
    --color-secondary-bg-active: #c8e6e8; /* active/pressed fill */
    --color-secondary-text: #3a7a7c;      /* text and icon colour */

    /* Former-office kinds: a political appointment, the public service, and
       the offices the rules could not place. One hue per kind; unclassified is
       deliberately the quiet one. */
    --color-office-political: #8e44ad;
    --color-office-public: #2e7d8a;
    --color-office-unclassified: #9aa3ab;

    /* Spacing Scale (4px base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 30px;
    --space-4xl: 40px;

    /* Semantic Spacing */
    --space-section: 20px;
    --space-panel: 20px;
    --space-item: 15px;
    --space-gap: 6px;

    /* Font Families */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'Monaco', 'Courier New', monospace;

    /* Font Sizes */
    --font-size-xxs: 10px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-13: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-2xl-plus: 22px;
    --font-size-3xl: 24px;
    --font-size-4xl: 28px;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.4;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-pill: 12px;
    --radius-circle: 50%;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 6px rgba(0,0,0,0.2);
    --shadow-primary: 0 2px 4px rgba(52, 152, 219, 0.1);
    --shadow-primary-md: 0 2px 4px rgba(52, 152, 219, 0.3);

    /* Transitions */
    --duration-fast: 0.1s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;
    --transition-color: color var(--duration-normal);
    --transition-bg: background-color var(--duration-normal);
    --transition-border: border-color var(--duration-normal);
    --transition-transform: transform var(--duration-normal);
    --transition-all: all var(--duration-normal);

    /* Container Widths */
    --width-container-max: 1400px;
    --width-column-min: 300px;

    /* Heights */
    --height-panel-max: 800px;
    --height-engagement-list-max: 400px;

    /* Sizes */
    --size-icon-button: 32px;
    --size-icon-button-mobile: 36px;

    /* Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 968px;
}

/* ============================================================================
   DARK THEME
   Color overrides for dark mode - activated via data-theme="dark" attribute
   ============================================================================ */

[data-theme="dark"] {
    /* Primary Brand Colors (adjusted for dark mode) */
    --color-primary: #4da3ff;
    --color-primary-dark: #3498db;
    --color-primary-darker: #2980b9;

    /* Text Colors (inverted - light on dark) */
    --color-text: #e6edf3;
    --color-text-dark: #f0f6fc;
    --color-text-medium: #c9d1d9;
    --color-text-light: #8b949e;
    --color-text-muted: #6e7681;
    --color-text-subtle: #57606a;

    /* Background Colors (dark) */
    --color-bg-body: #0d1117;
    --color-bg-white: #161b22;
    --color-bg-light: #1c2128;
    --color-bg-lighter: #21262d;
    --color-bg-gray: #262c36;
    --color-bg-medium: #2d333b;

    /* Border Colors (lighter for visibility) */
    --color-border: #30363d;
    --color-border-light: #373e47;
    --color-border-medium: #444c56;
    --color-border-dark: #3d444d;
    --color-border-darker: #4a525a;

    /* Status Colors (adjusted) */
    --color-success: #3fb950;
    --color-success-bg: #1a3a26;
    --color-success-text: #2ea043;
    --color-error: #f85149;
    --color-error-dark: #da3633;
    --color-error-bg: #3d1f1f;
    --color-disabled: #484f58;

    /* Jurisdiction Colors (adjusted for dark mode) */
    --color-ontario: #d45d5d;
    --color-toronto: #6ba3d9;
    --color-federal: #5f9e62;

    /* Highlight Colors (adjusted for dark background) */
    --color-highlight-phrase: #4d4511;
    --color-highlight-keyword: #1c3a52;
    --color-highlight-mark: #4d4511;
    --cs-warn-text: #e3c766;   /* re-picked for the dark mark, not the light one flipped */

    /* Semantic Search Colors (adjusted) */
    --color-purple: #a78bfa;
    --color-purple-light: #8b5cf6;
    --color-purple-bg: #2d2440;

    /* Tab Colors (dark mode) */
    --color-tab-text: #8b949e;
    --color-tab-active: #f0f6fc;
    --color-tab-border: #30363d;
    --color-tab-border-hover: #444c56;

    /* Link Colors (brighter for dark mode) */
    --color-link: #58a6ff;
    --color-link-dark: #4da3ff;

    /* Additional Gray/Neutral Colors */
    --color-gray-100: #21262d;
    --color-gray-200: #2d333b;
    --color-gray-300: #373e47;
    --color-gray-400: #444c56;
    --color-gray-500: #545d68;
    --color-gray-600: #636e7b;
    --color-gray-700: #768390;
    --color-gray-800: #8b949e;
    --color-gray-900: #c9d1d9;
    --color-gray-light: #57606a;
    --color-gray-border: #444c56;

    /* Blue tints (adjusted) */
    --color-blue-lightest: #1c2d41;
    --color-blue-lighter: #1c3444;
    --color-blue-light: #1f3a52;
    --color-blue-medium: #3c5d7a;
    --color-blue-primary: #58a6ff;

    /* Green tints */
    --color-green: #3fb950;

    /* Light background variations */
    --color-bg-gray-light: #30363d;

    /* Purple tints */
    --color-purple-lighter: #3d2f52;

    /* Black (for dark mode this becomes lighter) */
    --color-black: #0d1117;

    /* Secondary Action Colors (dark mode) */
    --color-secondary-bg: #1c3536;
    --color-secondary-bg-hover: #254849;
    --color-secondary-bg-active: #2e5a5c;
    --color-secondary-light: #5F9EA0;
    --color-secondary-text: #a8d4d5;
    --color-office-political: #c38be0;
    --color-office-public: #6cc3cf;
    --color-office-unclassified: #6e7681;

    /* Shadows (adjusted for dark mode - lighter shadows) */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.5);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.6);
    --shadow-lg: 0 4px 6px rgba(0,0,0,0.7);
    --shadow-primary: 0 2px 4px rgba(77, 163, 255, 0.2);
    --shadow-primary-md: 0 2px 4px rgba(77, 163, 255, 0.4);
}

/* System Preference Detection - Auto dark mode based on OS setting */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Inherit all dark theme colors when system prefers dark */
        /* This allows users to override with data-theme="light" if desired */

        /* Primary Brand Colors */
        --color-primary: #4da3ff;
        --color-primary-dark: #3498db;
        --color-primary-darker: #2980b9;

        /* Text Colors */
        --color-text: #e6edf3;
        --color-text-dark: #f0f6fc;
        --color-text-medium: #c9d1d9;
        --color-text-light: #8b949e;
        --color-text-muted: #6e7681;
        --color-text-subtle: #57606a;

        /* Background Colors */
        --color-bg-body: #0d1117;
        --color-bg-white: #161b22;
        --color-bg-light: #1c2128;
        --color-bg-lighter: #21262d;
        --color-bg-gray: #262c36;
        --color-bg-medium: #2d333b;

        /* Border Colors */
        --color-border: #30363d;
        --color-border-light: #373e47;
        --color-border-medium: #444c56;
        --color-border-dark: #3d444d;
        --color-border-darker: #4a525a;

        /* Status Colors */
        --color-success: #3fb950;
        --color-success-bg: #1a3a26;
        --color-success-text: #2ea043;
        --color-error: #f85149;
        --color-error-dark: #da3633;
        --color-error-bg: #3d1f1f;
        --color-disabled: #484f58;

        /* Jurisdiction Colors */
        --color-ontario: #d45d5d;
        --color-toronto: #6ba3d9;
        --color-federal: #5f9e62;

        /* Highlight Colors */
        --color-highlight-phrase: #4d4511;
        --color-highlight-keyword: #1c3a52;
        --color-highlight-mark: #4d4511;
        --cs-warn-text: #e3c766;   /* re-picked for the dark mark, not the light one flipped */

        /* Semantic Search Colors */
        --color-purple: #a78bfa;
        --color-purple-light: #8b5cf6;
        --color-purple-bg: #2d2440;

        /* Tab Colors */
        --color-tab-text: #8b949e;
        --color-tab-active: #f0f6fc;
        --color-tab-border: #30363d;
        --color-tab-border-hover: #444c56;

        /* Link Colors */
        --color-link: #58a6ff;
        --color-link-dark: #4da3ff;

        /* Additional Grays */
        --color-gray-100: #21262d;
        --color-gray-200: #2d333b;
        --color-gray-300: #373e47;
        --color-gray-400: #444c56;
        --color-gray-500: #545d68;
        --color-gray-600: #636e7b;
        --color-gray-700: #768390;
        --color-gray-800: #8b949e;
        --color-gray-900: #c9d1d9;
        --color-gray-light: #57606a;
        --color-gray-border: #444c56;

        /* Blue tints */
        --color-blue-lightest: #1c2d41;
        --color-blue-lighter: #1c3444;
        --color-blue-light: #1f3a52;
        --color-blue-medium: #3c5d7a;
        --color-blue-primary: #58a6ff;

        /* Green */
        --color-green: #3fb950;

        /* Backgrounds */
        --color-bg-gray-light: #30363d;

        /* Purple */
        --color-purple-lighter: #3d2f52;

        /* Black */
        --color-black: #0d1117;

        /* Secondary Action Colors (dark mode) */
        --color-secondary-bg: #1c3536;
        --color-secondary-bg-hover: #254849;
        --color-secondary-bg-active: #2e5a5c;
        --color-secondary-light: #5F9EA0;
        --color-secondary-text: #a8d4d5;
    --color-office-political: #c38be0;
    --color-office-public: #6cc3cf;
    --color-office-unclassified: #6e7681;

        /* Shadows */
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.5);
        --shadow-md: 0 2px 8px rgba(0,0,0,0.6);
        --shadow-lg: 0 4px 6px rgba(0,0,0,0.7);
        --shadow-primary: 0 2px 4px rgba(77, 163, 255, 0.2);
        --shadow-primary-md: 0 2px 4px rgba(77, 163, 255, 0.4);
    }
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */

html {
    height: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    background: var(--color-bg-body);
    padding: var(--space-xl);
    height: 100%;
    overflow: hidden;
}

.container {
    max-width: var(--width-container-max);
    margin: 0 auto;
    background: var(--color-bg-white);
    padding: var(--space-3xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.master-detail-container {
    display: block;
    margin-top: var(--space-sm);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}

.results-panel {
    display: block;
    width: 100%;
    overflow-y: visible;
}

.detail-panel {
    display: none;
    width: 100%;
    overflow-y: visible;
    position: relative;
}

/* Drill-down: when showing detail, hide results and show detail */
body.showing-detail .results-panel {
    display: none;
}

body.showing-detail .detail-panel {
    display: block;
}

/* searchShareButton is now inside .section-header-actions, styled there */

/* Icon Button Styles */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-button);
    height: var(--size-icon-button);
    padding: 0;
    background-color: var(--color-secondary-bg);
    color: var(--color-secondary-text);
    border: 1px solid var(--color-secondary-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: var(--transition-bg), var(--transition-border), transform var(--duration-fast);
    text-decoration: none;
}

/* An icon button labelled with words rather than a glyph, for a control whose
   meaning a symbol cannot carry — "↓ XLSX" says which format is coming, the way
   the "↓ CSV" buttons on the result sections do. Width grows with the label;
   everything else matches the square icon buttons beside it. */
.icon-button-text {
    width: auto;
    padding: 0 var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.icon-button:hover {
    background-color: var(--color-secondary-bg-hover);
    border-color: var(--color-secondary);
    transform: scale(1.05);
}

.icon-button:active {
    background-color: var(--color-secondary-bg-active);
    transform: scale(0.95);
}

/* Detail Panel Buttons Container */
.detail-panel-buttons {
    display: flex;
    gap: var(--space-gap);
    flex-shrink: 0;
    align-items: center;
    margin-left: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) { /* var(--breakpoint-mobile) */
    /* Toolbar wraps: back button + breadcrumbs on left, action buttons on right */
    .detail-toolbar {
        flex-wrap: wrap;
    }

    .detail-toolbar .breadcrumb-nav {
        flex: 1 1 0;
        min-width: 0;
    }

    .detail-toolbar .detail-panel-buttons {
        flex-shrink: 0;
        margin-left: auto;
    }

    .breadcrumb-content {
        width: 100%;
    }

    .icon-button {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-xl);
    }
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-bg-gray);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-item);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.breadcrumb-content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-13);
}

.breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-color);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.breadcrumb-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--color-text-muted);
    user-select: none;
}

.breadcrumb-current {
    color: var(--color-text-dark);
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

/* .breadcrumb-back-btn - now defined in consolidated button styles above */

/* Hover Tooltip Styles */
.entity-tooltip {
    position: relative;
    display: inline;
}

.entity-tooltip .tooltip-text {
    visibility: hidden;
    width: 300px;
    background-color: var(--color-text-dark);
    color: var(--color-bg-white);
    text-align: left;
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-md);
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -150px;
    opacity: 0;
    transition: opacity var(--duration-slow), visibility var(--duration-slow);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
    box-shadow: var(--shadow-lg);
}

.entity-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -var(--space-sm);
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-text-dark) transparent transparent transparent;
}

.entity-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.detail-panel-empty {
    display: flex;
    align-items: center;
    /*justify-content: center; */
    color: var(--color-text-subtle);
    font-size: var(--font-size-xl);
    text-align: center;
}

/* Tablet stacking no longer needed — drill-down layout handles all breakpoints */

/* Header Layout - Stacked with Top Tabs */
.header-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-sm);
    flex-shrink: 0;
    /* Sticky positioning - header stays at top during page scroll */
    position: sticky;
    top: -10px;  /* Account for body padding */
    z-index: 100;
    background: var(--color-bg-white);
    padding-bottom: var(--space-sm);
    margin-left: -var(--space-3xl);
    margin-right: -var(--space-3xl);
    padding-left: var(--space-3xl);
    padding-right: var(--space-3xl);
    margin-top: -var(--space-3xl);
    padding-top: var(--space-xl);
}

.header-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    border-bottom: 1px solid var(--color-border-dark);
    padding-bottom: 0;
}

.header-title {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg-white);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-xl);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-all);
    min-width: 40px;
    height: 32px;
}

.theme-toggle-btn:hover {
    background: var(--color-bg-medium);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.theme-toggle-btn:active {
    transform: translateY(0);
}

/* Theme icons - only show the appropriate one */
.theme-icon {
    display: none;
}

/* Light mode - show moon icon */
:root .theme-icon-dark,
[data-theme="light"] .theme-icon-dark {
    display: inline;
}

/* Dark mode - show sun icon */
[data-theme="dark"] .theme-icon-light {
    display: inline;
}

/* System preference dark mode - show sun icon */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon-light {
        display: inline;
    }
    :root:not([data-theme="light"]) .theme-icon-dark {
        display: none;
    }
}

/* Font Size Toggle Button */
.font-size-toggle-btn {
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg-white);
    color: var(--color-text-dark);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-all);
    min-width: 40px;
    height: 32px;
}

.font-size-toggle-btn:hover {
    background: var(--color-bg-medium);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.font-size-toggle-btn:active {
    transform: translateY(0);
}

.font-size-label {
    display: inline-block;
}

/* Font Size Scaling - Small Mode */
[data-font-size="small"] {
    /* Tables - most aggressive scaling (user's primary concern) */
    --font-size-xxs: 8px;         /* 10px -> 8px (-2px) */
    --font-size-xs: 9px;          /* 11px -> 9px (-2px) */
    --font-size-sm: 10px;         /* tables: 12px -> 10px (-2px) */
    --font-size-13: 11px;         /* 13px -> 11px (-2px) */

    /* Body text - moderate scaling */
    --font-size-base: 12px;       /* body: 14px -> 12px (-2px) */
    --font-size-md: 13px;         /* 15px -> 13px (-2px) */
    --font-size-lg: 14px;         /* 16px -> 14px (-2px) */

    /* Headers - minimal scaling to preserve hierarchy */
    --font-size-xl: 16px;         /* 18px -> 16px (-2px) */
    --font-size-2xl: 18px;        /* 20px -> 18px (-2px) */
    --font-size-2xl-plus: 20px;   /* 22px -> 20px (-2px) */
    --font-size-3xl: 22px;        /* h1: 24px -> 22px (-2px) */
    --font-size-4xl: 26px;        /* 28px -> 26px (-2px) */
}

/* Font Size Scaling - Normal Mode (default, no changes needed) */
[data-font-size="normal"] {
    /* Uses default values from :root */
}

/* Font Size Scaling - Large Mode */
[data-font-size="large"] {
    /* Tables - most aggressive scaling (user's primary concern) */
    --font-size-xxs: 12px;        /* 10px -> 12px (+2px) */
    --font-size-xs: 13px;         /* 11px -> 13px (+2px) */
    --font-size-sm: 14px;         /* tables: 12px -> 14px (+2px) */
    --font-size-13: 15px;         /* 13px -> 15px (+2px) */

    /* Body text - moderate scaling */
    --font-size-base: 16px;       /* body: 14px -> 16px (+2px) */
    --font-size-md: 17px;         /* 15px -> 17px (+2px) */
    --font-size-lg: 18px;         /* 16px -> 18px (+2px) */

    /* Headers - minimal scaling to preserve hierarchy */
    --font-size-xl: 20px;         /* 18px -> 20px (+2px) */
    --font-size-2xl: 22px;        /* 20px -> 22px (+2px) */
    --font-size-2xl-plus: 24px;   /* 22px -> 24px (+2px) */
    --font-size-3xl: 26px;        /* h1: 24px -> 26px (+2px) */
    --font-size-4xl: 30px;        /* 28px -> 30px (+2px) */
}

.header-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-item);
    margin-top: var(--space-lg);
}

h1 {
    color: var(--color-text-dark);
    margin-bottom: 0;
    font-size: var(--font-size-3xl);
}

.search-row {
    display: flex;
    align-items: center;
    gap: var(--space-item);
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 250px;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Wraps the input so the clear button can sit over its trailing edge. The
   input keeps flex: 1, so the responsive rules on .search-box still size it. */
.search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    min-width: 0;
}

.search-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
    white-space: nowrap;
    flex-shrink: 0;
}

#searchInput {
    flex: 1;
    min-width: 0;
    /* Right padding leaves room for .clear-search-btn, which overlays this edge. */
    padding: var(--space-md) 40px var(--space-md) var(--space-lg);
    font-size: var(--font-size-lg);
    border: 2px solid var(--color-gray-400);
    border-radius: var(--radius-md);
    transition: var(--transition-border);
    background: var(--color-bg-white) !important;
    color: var(--color-text) !important;
}

#searchInput::placeholder {
    color: var(--color-text-muted);
}

#searchInput:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-white) !important;
    color: var(--color-text) !important;
}

#searchInput:disabled {
    background: var(--color-bg-body);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Prevent browser autofill from overriding dark mode colors */
#searchInput:-webkit-autofill,
#searchInput:-webkit-autofill:hover,
#searchInput:-webkit-autofill:focus,
#searchInput:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100px var(--color-bg-white) inset !important;
    -webkit-text-fill-color: var(--color-text) !important;
    box-shadow: 0 0 0 100px var(--color-bg-white) inset !important;
}

/* Clear button — shown by updateClearButtonVisibility() only when the box has
   something in it, so it never invites a click that would do nothing. */
.clear-search-btn {
    position: absolute;
    right: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-xl);
    line-height: 1;
    cursor: pointer;
    transition: var(--transition-all);
}

.clear-search-btn:hover {
    background: var(--color-bg-medium);
    color: var(--color-text-dark);
}

.clear-search-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* ============================================================================
   BUTTON STYLES (Consolidated)
   Base styles shared across all button types
   ============================================================================ */

/* Base button styles - common to all buttons */
button,
.breadcrumb-back-btn {
    background: var(--color-primary);
    color: var(--color-bg-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-bg);
    font-weight: var(--font-weight-medium);
}

/* Primary button hover state */
button:hover,
.breadcrumb-back-btn:hover {
    background: var(--color-primary-dark);
}

/* Disabled state */
button:disabled {
    background: var(--color-text-subtle);
    cursor: not-allowed;
}

/* Size variants for primary buttons */
button {
    padding: var(--space-md) var(--space-2xl);
    font-size: var(--font-size-lg);
}

.breadcrumb-back-btn {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.csv-download-btn {
    background: var(--color-secondary-bg);
    color: var(--color-secondary-text);
    border: 1px solid var(--color-secondary-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-bg), var(--transition-border);
    font-weight: var(--font-weight-medium);
    padding: var(--space-gap) var(--space-md);
    font-size: var(--font-size-sm);
    margin: 0 var(--space-md);
    white-space: nowrap;
}

.csv-download-btn:hover {
    background: var(--color-secondary-bg-hover);
    border-color: var(--color-secondary);
}

.csv-download-btn:active {
    background: var(--color-secondary-bg-active);
    transform: translateY(1px);
}

/* Date Filter Styles */
.date-filter-inline {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

.date-filter-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
    margin: 0;
    white-space: nowrap;
}

.date-filter-buttons {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* ============================================================================
   SECONDARY/OUTLINE BUTTON STYLES
   Buttons with white background and border (not primary colored)
   ============================================================================ */

/* Base styles for secondary buttons */
.date-filter-btn {
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
}

/* Date filter button - specific styles */
.date-filter-btn {
    padding: var(--space-gap) 14px;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    border: 2px solid var(--color-gray-400);
    font-weight: var(--font-weight-medium);
}

.date-filter-btn:hover {
    background: var(--color-bg-medium);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.date-filter-btn.active {
    background: var(--color-primary);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary-md);
}

/* ============================================================================
   Top-Level Navigation Tabs (GitHub-inspired)
   ============================================================================ */
.top-tabs {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: 0;
    padding: 0;
}

.top-tab {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    background: transparent;
    color: var(--color-tab-text);
    border: 1px solid var(--color-border-dark);
    cursor: pointer;
    transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
    border-radius: var(--radius-md);
}

.top-tab:hover {
    color: var(--color-tab-active);
    background: var(--color-bg-lighter);
    border-color: var(--color-tab-border-hover);
}

.top-tab.active {
    color: var(--color-tab-active);
    font-weight: var(--font-weight-semibold);
    background: var(--color-bg-body);
    border-color: var(--color-tab-border-hover);
}

/* Hide search controls when Recent Activity tab is active */
.header-controls.hidden {
    display: none;
}

/* Responsive: stack vertically on tablet */
@media (max-width: 968px) { /* var(--breakpoint-tablet) */
    .header-container {
        gap: 0;
    }

    .header-title-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .search-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-item);
    }

    .search-box {
        width: 100%;
    }

    .date-filter-inline {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .date-filter-label {
        width: 100%;
    }

    .date-filter-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .date-filter-btn {
        flex: 1 1 auto;
        min-width: 70px;
    }

    .top-tabs {
        width: 100%;
    }

    .top-tab {
        flex: 1;
        text-align: center;
        padding: var(--space-md) var(--space-md);
        font-size: var(--font-size-13);
    }
}

/* Mobile: native-app-style header anchored to top */
@media (max-width: 768px) { /* var(--breakpoint-mobile) */
    /* Hide the app title — tabs already identify the app */
    .header-title {
        display: none;
    }

    /* Header: flush to viewport edges, no decorative spacing */
    .header-container {
        margin: 0;
        padding: 0;
        top: 0;
        border-radius: 0;
        border-bottom: 1px solid var(--color-border);
    }

    /* Title row: no border, no gap — tabs sit directly at top */
    .header-title-row {
        border-bottom: none;
        gap: 0;
    }

    /* Tabs: full-width nav bar, edge-to-edge */
    .top-tabs {
        gap: 0;
        background: var(--color-bg-gray);
    }

    .top-tab {
        flex: 1;
        text-align: center;
        padding: 10px 4px;
        font-size: var(--font-size-xs);
        border-radius: 0;
        border: none;
        border-bottom: 2px solid transparent;
        background: none;
    }

    .top-tab.active {
        border-bottom: 2px solid var(--color-primary);
        background: none;
        color: var(--color-primary);
    }

    .top-tab:hover {
        background: none;
        border-bottom-color: var(--color-border);
    }

    /* Search controls: compact with small horizontal padding */
    .header-controls {
        margin-top: 0;
        padding: var(--space-sm) var(--space-sm) 0;
        gap: var(--space-xs);
    }

    /* Put search box and date filters on one row when possible */
    .search-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .search-box {
        flex: 1 1 200px;
    }

    .date-filter-inline {
        flex: 0 1 auto;
        gap: var(--space-xs);
    }

    /* Hide the "Filter by date" label on mobile — buttons are self-explanatory */
    .date-filter-label {
        display: none;
    }

    .date-filter-btn {
        padding: 6px 10px;
        font-size: var(--font-size-xs);
        min-width: auto;
    }

    /* Content area: small horizontal padding for breathing room */
    .master-detail-container {
        padding: 0 var(--space-sm);
    }
}

.section-container {
    margin: var(--space-item) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.section-header {
    background: var(--color-bg-body);
    padding: var(--space-md) var(--space-md);
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-bg);
}

.section-header:hover {
    background: var(--color-gray-300);
}

.section-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-title {
    font-size: var(--font-size-lg);
    color: var(--color-text-dark);
    margin: 0;
    font-weight: var(--font-weight-semibold);
}

.section-count {
    color: var(--color-text-muted);
    font-size: var(--font-size-13);
    margin-left: var(--space-md);
}

/* Hybrid search badge */
.hybrid-badge {
    display: inline-block;
    margin-left: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-purple);
    background: linear-gradient(135deg, var(--color-purple-bg) 0%, var(--color-purple-lighter) 100%);
    border-radius: var(--radius-pill);
    vertical-align: middle;
}

/* Debug sections (FTS-only, Semantic-only) - more subdued styling */
.debug-section .section-header {
    background: var(--color-bg-lighter);
    border-left: 3px solid var(--color-border);
}

.debug-section .section-title {
    color: var(--color-gray-700);
    font-weight: var(--font-weight-medium);
}

.debug-section .section-count {
    color: var(--color-gray-light);
}

.section-toggle {
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    transition: var(--transition-transform);
}

.section-toggle.collapsed {
    transform: rotate(-90deg);
}

.section-content {
    padding: var(--space-md);
    background: var(--color-bg-white);
}

.section-content.collapsed {
    display: none;
}

.table-group-heading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-medium);
    margin-top: var(--space-item);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.table-group-heading:first-child {
    margin-top: 0;
}

.table-group-header {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-medium);
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-bg);
}

.table-group-header:first-child {
    margin-top: 0;
}

.table-group-header:hover {
    background: var(--color-bg-medium);
}

.table-group-toggle {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    transition: var(--transition-transform);
}

.table-group-toggle.collapsed {
    transform: rotate(-90deg);
}

.table-group-content {
    margin-bottom: var(--space-md);
}

.table-group-content.collapsed {
    display: none;
}

/* CSV Download Button */
/* .csv-download-btn - now defined in consolidated button styles above */

.result-item {
    background: var(--color-bg-light);
    padding: var(--space-item);
    margin-bottom: var(--space-item);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-primary);
    cursor: pointer;
    transition: var(--transition-all);
}

.result-item:hover {
    background: var(--color-bg-medium);
    box-shadow: var(--shadow-md);
}

.result-item.selected {
    background: var(--color-blue-light);
    border-left-color: var(--color-primary-dark);
    border-left-width: 6px;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-item);
}

.results-table thead {
    background: var(--color-bg-medium);
    position: sticky;
    top: 0;
}

.results-table th {
    padding: var(--space-md) var(--space-sm);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
    border-bottom: 2px solid var(--color-primary);
    cursor: pointer;
    user-select: none;
    position: relative;
}

.results-table th:hover {
    background: var(--color-bg-gray-light);
}

.results-table th::after {
    content: ' ▼';
    font-size: var(--font-size-xxs);
    color: var(--color-gray-500);
    margin-left: var(--space-sm);
}

.results-table th.sort-asc::after {
    content: ' ▲';
    color: var(--color-primary);
}

.results-table th.sort-desc::after {
    content: ' ▼';
    color: var(--color-primary);
}

.results-table tbody tr {
    cursor: pointer;
    transition: var(--transition-all);
    border-bottom: 1px solid var(--color-border);
}

.results-table tbody tr:hover {
    background: var(--color-bg-medium);
}

.results-table tbody tr.selected {
    background: var(--color-blue-light);
    border-left: 4px solid var(--color-primary-dark);
}

.results-table td {
    padding: var(--space-md) var(--space-sm);
    color: var(--color-text-dark);
}

/* ============================================================================
   ACTIVITY TABLES
   The data tables inside detail-pane sections: Amendment History (Ontario and
   federal), Communication Reports, Registered Lobbyists, In-house Lobbyists.

   They shipped carrying this class with no rules behind it, so the browser's
   bare table defaults applied: no cell padding, so adjacent columns ran
   together, and middle-aligned cells, so a row whose Subject Areas wrapped to
   six lines floated its dates in the middle of the gap.

   Typography follows .results-table above, so a reader moving between the
   search results and a detail pane reads the same table twice. Three
   departures, each forced by what these tables hold:
     - column rules, because neighbouring cells here are both long free text
       (Registrant | Lobby Firm | Subject Areas) and whitespace alone stops
       holding the boundary once they wrap;
     - top alignment, so every cell of a tall row starts on the same line;
     - no sticky header — the results column is its own scroll area, whereas
       these sit in a stack of collapsible sections that scroll together, and a
       header pinned there would ride out over the sections below it.
   ============================================================================ */

.activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-item);
}

.activity-table thead {
    background: var(--color-bg-medium);
}

.activity-table th {
    padding: var(--space-md) var(--space-sm);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
    border-bottom: 2px solid var(--color-primary);
    white-space: nowrap;
}

.activity-table td {
    padding: var(--space-md) var(--space-sm);
    color: var(--color-text-dark);
    vertical-align: top;
}

.activity-table tbody tr {
    border-bottom: 1px solid var(--color-border);
}

.activity-table tbody tr:hover {
    background: var(--color-bg-medium);
}

/* Between columns only, never around the table: the grid should read as rows
   of cells, not as a spreadsheet. */
.activity-table th + th,
.activity-table td + td {
    border-left: 1px solid var(--color-border);
}

/* Dates and identifiers keep their own column rather than wrapping to fit a
   neighbour that has hundreds of characters to place. */
.activity-table .nowrap-cell {
    white-space: nowrap;
}

/* Sortable only where the table wired up a handler. Communication Reports did;
   the amendment histories and lobbyist rosters did not, and an affordance on a
   header that does nothing is worse than no affordance. */
.activity-table th[data-col] {
    cursor: pointer;
    user-select: none;
    position: relative;
}

.activity-table th[data-col]:hover {
    background: var(--color-bg-gray-light);
}

.activity-table th[data-col]::after {
    content: ' ▼';
    font-size: var(--font-size-xxs);
    color: var(--color-gray-500);
    margin-left: var(--space-sm);
}

.activity-table th[data-col].sort-asc::after {
    content: ' ▲';
    color: var(--color-primary);
}

.activity-table th[data-col].sort-desc::after {
    content: ' ▼';
    color: var(--color-primary);
}

/* The expanded detail under a communication report. Inset by background rather
   than by indent, so the report it belongs to stays visually attached. The
   inline #fafafa this replaces was a fixed light grey that in dark mode took
   the pane's light text on top of it. */
.activity-table tr.federal-comm-detail > td {
    background: var(--color-bg-light);
    padding: var(--space-lg) var(--space-xl);
}

/* The people in an expanded Revolving Door row. Padding matches
   .engagement-list; the height cap deliberately does not — see the note at
   buildCaseStudyRevolvingPeople(). */
.case-study-person-list {
    padding: var(--space-item) var(--space-xl);
}

/* A person card in an expanded Revolving Door row.
   Shaped like .engagement-summary-item so an expanded row reads the same
   wherever the report opens one, but deliberately NOT that class: an engagement
   card opens its engagement on click, and these do not — only the name inside
   them is a link, so they must not carry its pointer cursor or hover lift. */
.case-study-person-card {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--chart-seq-2);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

.case-study-person-name {
    font-weight: var(--font-weight-semibold);
    flex-grow: 1;
}

/* Registry silence rather than a value: "no change in recorded fields" is a
   statement about the row, not content of it, so it recedes. */
.activity-table-muted {
    color: var(--color-text-light);
}

/* The amendment a deep link pointed at. Uses the shared highlight token, which
   is defined for both themes — the inline cream this replaced stayed cream in
   dark mode and put light text on it. */
.activity-table tbody tr.amendment-row-highlight {
    background: var(--color-highlight-mark);
}

/* The marker on an amendment row whose subject areas differ from the version
   before — the reason to read the history at all, so it carries a colour of its
   own rather than sitting in the body text weight. */
.amendment-change-marker {
    color: #b8860b;
}

[data-theme="dark"] .amendment-change-marker {
    color: #e09b13;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .amendment-change-marker {
        color: #e09b13;
    }
}

/* ============================================================================
   ENTITY LINK STYLES (Consolidated)
   All entity types (lobbyist, firm, client, subject, official, contributor)
   share common base styles, differing only by font-weight
   ============================================================================ */

/* Base styles - common to all entity links */
.lobbyist-link,
.official-link,
.firm-link,
.client-link,
.organization-link,
.subject-link,
.contributor-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-color);
}

/* Hover state - common to all entity links */
.lobbyist-link:hover,
.official-link:hover,
.firm-link:hover,
.client-link:hover,
.organization-link:hover,
.subject-link:hover,
.contributor-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Font weight variants */
/* Semibold: for people (lobbyists, officials) */
.lobbyist-link,
.official-link {
    font-weight: var(--font-weight-semibold);
}

/* Medium: for organizations and topics (firms, clients, subjects, contributors).
   .organization-link is the current name for what .client-link styles; both are
   listed because older code still emits the legacy class. */
.firm-link,
.client-link,
.organization-link,
.subject-link,
.contributor-link {
    font-weight: var(--font-weight-medium);
}

/* External links — match internal link color, append directional arrow via CSS */
.external-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-color);
}

.external-link::after {
    content: ' ↗';
    font-size: 0.75em;
    vertical-align: 0.15em;
    line-height: 1;
}

.external-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Internal navigation links — same colour as external-link but no arrow */
.internal-nav-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-color);
    cursor: pointer;
}

.internal-nav-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.detail-content {
    padding: var(--space-xl);
    background: var(--color-bg-lighter);
    border-radius: var(--radius-md);
}

.detail-header {
    font-size: var(--font-size-xl);
    color: var(--color-text-dark);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-primary);
}

.detail-header-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: normal;
}

.detail-last-updated {
    color: var(--color-text-light);
}

/* Other names grouped into a profile — see buildAlsoListedAs() in search.js */
.detail-also-listed {
    margin: calc(-1 * var(--space-md)) 0 var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.also-listed-toggle {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

/* How a lobbyist is reachable — see buildLobbyistProvenance() in search.js.
   Sits beside the last-updated date and reads as the same kind of fact. */
.detail-provenance {
    color: var(--color-text-light);
}

.share-profile-btn {
    background: var(--color-secondary-bg);
    border: 1px solid var(--color-secondary-light);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: var(--font-size-sm);
    color: var(--color-secondary-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.share-profile-btn:hover {
    background-color: var(--color-secondary-bg-hover);
    border-color: var(--color-secondary);
}

.share-profile-btn.copied {
    color: var(--color-success, #2a7a2a);
    border-color: var(--color-success, #2a7a2a);
}

.detail-comms-header {
    font-size: var(--font-size-lg);
    font-weight: normal;
    color: var(--color-text-dark);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-primary);
}

.detail-section {
    margin-bottom: var(--space-xl);
}

/* AI Summary Warning Box */
.ai-summary-warning {
    background: var(--color-highlight-mark);
    border: 1px solid var(--color-highlight-phrase);
    padding: var(--space-md);
    margin-bottom: var(--space-item);
    border-radius: var(--radius-md);
    color: var(--color-text-dark);
}

.ai-summary-warning a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Dark mode warning styles - amber on dark (GitHub-style) */
[data-theme="dark"] .ai-summary-warning {
    background: #1c1410;
    border: 1px solid #4d3800;
    color: #e09b13;
}

[data-theme="dark"] .ai-summary-warning a {
    color: #f0ad4e;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ai-summary-warning {
        background: #1c1410;
        border: 1px solid #4d3800;
        color: #e09b13;
    }

    :root:not([data-theme="light"]) .ai-summary-warning a {
        color: #f0ad4e;
        text-decoration: underline;
    }
}

/* AI Summary Content Box */
.ai-summary-content {
    padding: var(--space-md) var(--space-3xl);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-item);
    color: var(--color-text);
    line-height: 1.5;
}

.ai-summary-content p,
.ai-summary-content li {
    margin-bottom: 0.5em;
}

.ai-summary-content ul,
.ai-summary-content ol {
    margin-top: 0.25em;
    margin-bottom: 0.5em;
}

/* Political Contributions Warning Box */
.contributions-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    padding: var(--space-md);
    margin-bottom: var(--space-item);
    border-radius: var(--radius-md);
    color: #856404;
}

.contributions-warning a {
    color: #856404;
    text-decoration: underline;
}

/* Dark mode warning styles - amber on dark (GitHub-style) */
[data-theme="dark"] .contributions-warning {
    background: #1c1410;
    border: 1px solid #4d3800;
    color: #e09b13;
}

[data-theme="dark"] .contributions-warning a {
    color: #f0ad4e;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .contributions-warning {
        background: #1c1410;
        border: 1px solid #4d3800;
        color: #e09b13;
    }

    :root:not([data-theme="light"]) .contributions-warning a {
        color: #f0ad4e;
        text-decoration: underline;
    }
}

.detail-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-medium);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
}

.detail-markdown {
    background: var(--color-bg-white);
    padding: 0;
    margin: 0;
    border-radius: var(--radius-md);
    line-height: var(--line-height-tight);
    text-align: left;
    color: var(--color-text-dark);
    font-family: inherit;
    font-size: inherit;
}

.detail-markdown * {
    font-family: inherit;
}

.detail-markdown h2 {
    font-size: var(--font-size-xl);
    font-weight: normal;
    color: var(--color-text-dark);
    margin-top: 0;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-primary);
}

.detail-markdown h3 {
    background: var(--color-bg-light);
    color: var(--color-text-dark);
    padding: var(--space-md) var(--space-md);
    margin-top: var(--space-xl);
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-bottom: none;
}

/* First h3 should not have top margin (comes right after metadata) */
.detail-markdown h2 + p + h3 {
    margin-top: 0;
}

.detail-markdown p {
    margin-bottom: var(--space-item);
    text-align: left;
}

/* Style the metadata paragraph (first p after h2) as a structured info box */
.detail-markdown h2 + p {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-xl);
    line-height: var(--line-height-relaxed);
    white-space: pre-line;
}

.detail-markdown h2 + p strong {
    color: var(--color-text-medium);
    font-weight: var(--font-weight-semibold);
    display: inline-block;
    min-width: 180px;
}

/* Metadata Box - Compact info display for Toronto registrations
   Matches Ontario's .detail-markdown h2 + p styling */
.metadata-box {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-xl);
    line-height: var(--line-height-relaxed);
}

.metadata-item {
    display: block;
}

.metadata-label {
    color: var(--color-text-medium);
    font-weight: var(--font-weight-semibold);
    display: inline-block;
    min-width: 180px;
}

.metadata-value {
    color: var(--color-text-dark);
}

/* Location block in ERO notices — label column aligned to match metadata section */
.ero-location-block {
    line-height: var(--line-height-relaxed);
}

.ero-location-block strong {
    color: var(--color-text-medium);
    font-weight: var(--font-weight-semibold);
    display: inline-block;
    min-width: 160px;
    vertical-align: top;
}

/* Style content areas following h3 headings to create panel effect */
.detail-markdown h3 + p,
.detail-markdown h3 + ul,
.detail-markdown h3 + ol,
.detail-markdown h3 + .detail-panel-body {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding: var(--space-md) 32px;
    background: var(--color-bg-white);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

/* The h3 + p rule above is an adjacent-sibling selector, so it boxes only the
   FIRST paragraph of a panel. Panels built from split text (federal subject
   matter is pipe-joined across versions) wrap their paragraphs in
   .detail-panel-body so the whole panel sits inside one box. */
.detail-markdown .detail-panel-body p {
    margin-bottom: var(--space-item);
}

.detail-markdown .detail-panel-body p:last-child {
    margin-bottom: 0;
}

.detail-markdown ul, .detail-markdown ol {
    margin-left: var(--space-xl);
    margin-bottom: 0;
}

.detail-markdown li {
    text-align: left;
    margin-bottom: var(--space-xs);
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.detail-table th {
    background: var(--color-text-medium);
    color: var(--color-bg-white);
    padding: var(--space-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
}

.detail-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-dark);
    text-align: left;
}

.detail-table tr:last-child td {
    border-bottom: none;
}

.detail-table tr:nth-child(even) {
    background: var(--color-bg-light);
}

.detail-table td:first-child {
    white-space: nowrap;
    width: 1%;
}

.result-source {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
}

.result-content {
    color: var(--color-text-dark);
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-tight);
}

.result-context {
    background: var(--color-bg-white);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-dark);
    white-space: pre-wrap;
    font-family: 'Monaco', 'Courier New', monospace;
    margin-top: var(--space-sm);
}

.result-details {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.result-details summary {
    cursor: pointer;
    color: var(--color-primary);
    font-size: var(--font-size-xs);
}

.result-details pre {
    background: var(--color-bg-white);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    overflow-x: auto;
    margin-top: var(--space-sm);
}

mark {
    background: var(--color-highlight-mark);
    padding: var(--space-xs) 0px;
    border-radius: 2px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
}

/* Phrase match highlighting (exact quoted phrases) */
mark.phrase {
    background-color: var(--color-highlight-phrase);  /* Yellow - exact phrase match */
    font-weight: var(--font-weight-bold);
    padding: var(--space-xs) var(--space-xs);
    color: var(--color-text-dark);
}

/* Keyword match highlighting (individual keywords) */
mark.keyword {
    background-color: var(--color-highlight-keyword);  /* Light blue - keyword match */
    padding: var(--space-xs) var(--space-xs);
    color: var(--color-text-dark);
}

/* Dark mode adjustments for highlighted text */
[data-theme="dark"] mark,
[data-theme="dark"] mark.phrase,
[data-theme="dark"] mark.keyword {
    color: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) mark,
    :root:not([data-theme="light"]) mark.phrase,
    :root:not([data-theme="light"]) mark.keyword {
        color: #ffffff;
    }
}

.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4xl);
    color: var(--color-text-muted);
}

/* Animated loading spinner */
.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-circle);
    animation: spin 1s linear infinite;
    margin: var(--space-md) auto;
}

.loading-spinner-small {
    width: 20px;
    height: 20px;
    border-width: 3px;
    margin: 0 var(--space-sm);
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.semantic-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

.semantic-loading-container .loading-spinner {
    margin-bottom: var(--space-item);
}

.no-results {
    text-align: center;
    padding: var(--space-4xl);
    color: var(--color-text-muted);
}

.error {
    background: var(--color-error-bg);
    border-left-color: var(--color-error);
    color: var(--color-error-dark);
}

/* Hybrid search toggle */
.search-mode-toggle {
    background: var(--color-blue-lightest);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-blue-medium);
    margin-bottom: var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.search-mode-toggle label {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    flex: 1;
}

.search-mode-toggle input[type="checkbox"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.info-icon {
    color: var(--color-primary);
    cursor: help;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

/* Search method indicator badge */
.search-method-indicator {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-left: var(--space-md);
}

.search-method-indicator.hybrid {
    background: var(--color-success);
    color: var(--color-bg-white);
}

.search-method-indicator.traditional {
    background: var(--color-primary);
    color: var(--color-bg-white);
}

/* Rerank score badge */
.score-badge {
    display: inline-block;
    background: var(--color-success);
    color: var(--color-bg-white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
}

/* ============================================================================
   Expandable Activity Report Rows
   ============================================================================ */

/* Expand icon column */
.expand-header {
    width: 30px;
    padding: var(--space-sm);
}

.expand-cell {
    width: 30px;
    padding: var(--space-md) var(--space-sm);
    text-align: center;
    vertical-align: middle;
}

/* The federal communication report icon shares the look but keeps its own class:
   .expand-icon carries a click handler that fetches Activity Report
   engagements, which a communication report has none of. */
.expand-icon,
.federal-expand-icon {
    display: inline-block;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    transition: var(--transition-color);
    user-select: none;
}

.expand-icon:hover,
.federal-expand-icon:hover,
.expand-icon[aria-expanded="true"],
.federal-expand-icon[aria-expanded="true"] {
    color: var(--color-primary);
}

/* A click anywhere on an expandable row toggles it, so the whole row says so. */
.activity-table tr[data-row-id]:has(.expand-icon),
.activity-table tr[data-federal-row-id] {
    cursor: pointer;
}

/* Detail icon column for master result tables */
.detail-icon-header {
    width: 30px;
    padding: var(--space-sm);
}

.detail-cell {
    width: 30px;
    padding: var(--space-md) var(--space-sm);
    text-align: center;
    vertical-align: middle;
}

.detail-icon {
    display: inline-block;
    cursor: pointer;
    color: var(--color-text-subtle);
    font-size: var(--font-size-xxs);
    transition: var(--transition-color), var(--transition-transform);
    user-select: none;
}

.detail-icon:hover {
    color: var(--color-primary);
    transform: translateX(2px);
}

/* Date column for master result tables */
.date-header {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-cell {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
}

/* Expanded row */
.expanded-row {
    background: var(--color-gray-100);
    border-top: 1px solid var(--color-border);
}

.expanded-row td {
    padding: 0 !important;
}

/* Engagement list container */
.engagement-list {
    padding: var(--space-item) var(--space-xl);
    max-height: 400px;
    overflow-y: auto;
}

.no-engagements,
.loading {
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Individual engagement summary item */
.engagement-summary-item {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    transition: var(--transition-all);
}

/* Jurisdiction-specific left border colors */
.engagement-summary-item.engagement-ontario {
    border-left: 4px solid var(--color-ontario); /* Pale red for Ontario flag */
}

.engagement-summary-item.engagement-toronto {
    border-left: 4px solid var(--color-toronto); /* Pale blue for Toronto flag */
}

.engagement-summary-item.engagement-federal {
    border-left: 4px solid var(--color-federal); /* Green, distinct from the two above */
}

.engagement-summary-item:hover {
    background: var(--color-blue-lighter);
    border-top-color: var(--color-primary);
    border-right-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

.engagement-summary-item.selected {
    background: var(--color-blue-light);
    border-top-color: var(--color-primary-dark);
    border-right-color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary-dark);
}

.engagement-summary-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-gap);
    flex-wrap: wrap;
}

.engagement-reg-number {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
}

.engagement-reg-number .jurisdiction-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.engagement-status {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.engagement-status.status-active {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.engagement-status.status-terminated {
    background: var(--color-border);
    color: var(--color-gray-600);
}

.engagement-date {
    margin-left: auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.engagement-summary-body {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--font-size-13);
    color: var(--color-text-light);
}

.engagement-lobbyist {
    font-weight: var(--font-weight-medium);
}

.engagement-type {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

@media (max-width: 768px) { /* var(--breakpoint-mobile) */
    .container {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Sparkline styles */
.sparkline {
    display: inline-block;
    vertical-align: middle;
    cursor: help;
}

.sparkline svg {
    vertical-align: middle;
}

/* Sparklines inside section-header toggles are visual only — let clicks through */
.section-header .sparkline,
.section-header svg {
    pointer-events: none;
    cursor: pointer;
}

/* ...except the drawn sparkline, which needs hover for its tooltip. A click on
   it still bubbles up to the header and toggles the section. */
.section-header svg.peity {
    pointer-events: auto;
    cursor: help;
}

/* ============================================================================
   SCROLLBAR STYLES
   Custom scrollbar styling for consistent appearance across browsers
   ============================================================================ */

/* Light mode scrollbars - dark thumb on light background */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gray-500);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-bg-light);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-600);
}

/* Dark mode scrollbars - light thumb on dark background */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-gray-200);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-gray-500);
    border: 2px solid var(--color-gray-200);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-600);
}

/* System preference dark mode scrollbars */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) ::-webkit-scrollbar-track {
        background: var(--color-gray-200);
    }

    :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
        background: var(--color-gray-500);
        border: 2px solid var(--color-gray-200);
    }

    :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
        background: var(--color-gray-600);
    }
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray-500) var(--color-bg-light);
}

[data-theme="dark"] * {
    scrollbar-color: var(--color-gray-500) var(--color-gray-200);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) * {
        scrollbar-color: var(--color-gray-500) var(--color-gray-200);
    }
}

@media print {
    /* Hide everything except detail panel content */
    body {
        background: var(--color-bg-white);
        padding: 0;
        margin: 0;
    }

    .header-container, .results-panel, .print-button, .official-link-button, .detail-panel-buttons, .breadcrumb-nav {
        display: none !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
        box-shadow: none;
        background: var(--color-bg-white);
    }

    .master-detail-container {
        display: block;
        min-height: auto;
    }

    .detail-panel {
        max-height: none;
        overflow: visible;
        padding: 0;
        border: none;
    }

    .detail-content {
        background: var(--color-bg-white);
        padding: var(--space-xl);
    }

    .detail-markdown {
        background: var(--color-bg-white);
        padding: var(--space-xl);
    }

    /* Remove interactive styling for print */
    mark {
        background: var(--color-highlight-phrase);
        color: black;
        padding: 0;
        font-weight: inherit;
    }

    /* Hide expanded engagement rows and sparklines in print */
    .expanded-row,
    .expand-cell,
    .expand-header,
    .expand-icon,
    .federal-expand-icon,
    .no-print,
    .sparkline {
        display: none !important;
    }

    /* Show collapsed sections in print (Activity Reports should print fully) */
    .section-content.collapsed {
        display: block !important;
    }

    /* Hide section toggle triangles in print */
    .section-toggle {
        display: none !important;
    }

    /* Ensure good page breaks */
    .detail-section {
        page-break-inside: avoid;
    }

    h2, h3 {
        page-break-after: avoid;
    }

    /* Hide match explanation in print */
    .match-explanation {
        display: none !important;
    }
}

/* ============================================================================
   Match Explanation Box Styles
   Shows "Why This Result Matched" in detail view for hybrid search results
   ============================================================================ */

.match-explanation {
    background: linear-gradient(135deg, var(--color-bg-gray) 0%, var(--color-border-light) 100%);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
    overflow: hidden;
}

.match-explanation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 14px;
    background: var(--color-border-light);
    border-bottom: 1px solid var(--color-border-medium);
}

.match-explanation-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-13);
    color: var(--color-gray-800);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-explanation-toggle {
    background: transparent;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--color-gray-600);
    padding: var(--space-xs) var(--space-gap);
    line-height: 1;
    border-radius: var(--radius-md);
    transition: var(--transition-bg);
}

.match-explanation-toggle:hover {
    background: var(--color-border-medium);
    color: var(--color-gray-800);
}

.match-explanation-content {
    padding: var(--space-md) 14px;
}

.match-query {
    font-size: var(--font-size-13);
    color: var(--color-gray-800);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-medium);
}

.match-query strong {
    color: var(--color-gray-900);
}

.match-section {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

.match-section + .match-section {
    border-top: 1px solid var(--color-border-light);
    margin-top: var(--space-xs);
    padding-top: var(--space-md);
}

.match-section-icon {
    font-size: var(--font-size-xl);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.match-section-content {
    flex: 1;
    min-width: 0;
}

.match-section-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-13);
    color: var(--color-gray-900);
    margin-bottom: var(--space-xs);
}

.match-section-keyword .match-section-title {
    color: var(--color-blue-primary);
}

.match-section-semantic .match-section-title {
    color: var(--color-purple-light);
}

.match-term-detail {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: var(--space-xs) 0;
    line-height: var(--line-height-tight);
}

.match-term-detail strong {
    color: var(--color-gray-800);
}

.match-relevance {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-medium);
    font-size: var(--font-size-13);
    color: var(--color-gray-800);
    text-align: right;
}

.match-relevance strong {
    color: var(--color-green);
    font-size: var(--font-size-base);
}

/* ============================================================================
   Detail Toolbar — sticky back-button + breadcrumbs + action buttons
   ============================================================================ */

.detail-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-gray);
    border-bottom: 2px solid var(--color-border-medium);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.detail-toolbar .back-to-results {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.detail-toolbar .back-to-results:hover {
    background: var(--color-border-light);
    color: var(--color-primary-dark, var(--color-primary));
}

.detail-toolbar .breadcrumb-nav {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.detail-toolbar .detail-panel-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* About Tab Styles */
.about-container {
    margin-top: var(--space-xl);
    width: 100%;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
}

.about-section {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-xl);
    overflow: hidden;
}

.about-section .section-header {
    background: var(--color-blue-light);
    border-bottom: 2px solid var(--color-primary);
}

.about-section .section-title {
    font-size: var(--font-size-2xl);
    color: var(--color-text-dark);
    font-weight: var(--font-weight-semibold);
}

.about-section-content {
    padding: var(--space-3xl);
}

.about-section-content h1 {
    font-size: var(--font-size-4xl);
    color: var(--color-text-dark);
    margin-bottom: var(--space-xl);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-md);
}

.about-section-content h2 {
    font-size: var(--font-size-2xl-plus);
    color: var(--color-text-medium);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.about-section-content h3 {
    font-size: var(--font-size-xl);
    color: var(--color-text-medium);
    margin-top: 18px;
    margin-bottom: var(--space-md);
}

.about-section-content p {
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

.about-section-content ul {
    margin-left: var(--space-xl);
    margin-bottom: var(--space-md);
}

.about-section-content li {
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.about-section-content code {
    background: var(--color-gray-200);
    padding: var(--space-xs) var(--space-gap);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-13);
}

.about-section-content pre {
    background: var(--color-gray-200);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--space-md);
}

.about-section-content strong {
    color: var(--color-text-dark);
    font-weight: var(--font-weight-semibold);
}

.about-section-content a {
    color: var(--color-link);
}

.about-section-content a:hover {
    text-decoration: underline;
}

/* Print support for About tab */
@media print {
    .about-container {
        display: block !important;
    }

    .about-section {
        border: none;
        margin-bottom: var(--space-3xl);
        page-break-inside: avoid;
    }

    .about-section .section-header {
        background: none;
        border-bottom: 2px solid var(--color-black);
        padding-bottom: var(--space-sm);
    }

    .about-section-content {
        padding: var(--space-md) 0;
    }
}

/* ============================================================
   ERO Map Tab
   ============================================================ */

.ero-map-container {
    margin-top: var(--space-xl);
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ero-map-header {
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.ero-map-subtitle {
    color: var(--color-text-light);
    margin-bottom: 10px;
}

#eroMapLeaflet {
    flex: 1;
    min-height: 0;
    width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    position: relative;
}

#eroMapLoading {
    position: absolute;
    inset: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    pointer-events: none;
    gap: var(--space-sm);
}

/* Overview mini-map — shows current location within Ontario */
#eroMapOverview {
    position: absolute;
    bottom: 28px;
    left: 10px;
    width: 160px;
    height: 120px;
    z-index: 400;
    border: 2px solid rgba(0, 0, 0, 0.35);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    pointer-events: none;
}

/* Filter panel */
.ero-filter-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-gray);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ero-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.ero-date-row {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
}

.ero-date-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.ero-date-buttons {
    display: flex;
    gap: var(--space-xs);
}

.ero-date-filter-btn {
    padding: var(--space-gap) 14px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-white);
    cursor: pointer;
    color: var(--color-text);
}

.ero-date-filter-btn:hover {
    background: var(--color-bg-medium);
    border-color: var(--color-primary);
}

.ero-date-filter-btn.active {
    background: var(--color-primary);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
}

.ero-visible-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-left: auto;
}

.ero-filter-toggles {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
    align-items: center;
}

.ero-filter-btn {
    padding: 2px 10px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    cursor: pointer;
    color: var(--color-text);
}

.ero-filter-btn:hover {
    background: var(--color-border);
}

.ero-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    align-items: center;
}

.ero-filter-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    user-select: none;
}

.ero-filter-pill input[type="checkbox"] {
    cursor: pointer;
    margin: 0;
}

.ero-filter-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    flex-shrink: 0;
}

.ero-filter-label {
    color: var(--color-text);
}

.ero-filter-count {
    color: var(--color-text-muted);
}

/* Popup styles */
.ero-map-popup { font-size: var(--font-size-sm); line-height: 1.4; }
.ero-map-popup .popup-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.ero-map-popup .popup-ero-link { font-weight: var(--font-weight-semibold); }
.ero-map-popup .popup-proponent { margin: 0 0 var(--space-xs); }
.ero-map-popup .popup-meta { margin: 0 0 var(--space-xs); color: var(--color-text-muted); }
.ero-map-popup .popup-location { margin: 0 0 var(--space-xs); font-style: italic; }
.ero-map-popup .popup-desc { margin: var(--space-xs) 0 0; color: var(--color-text-muted); }

/* ============================================================================
   MOBILE RESPONSIVE IMPROVEMENTS
   Switches from app layout (fixed-height viewport) to document layout
   (natural page scroll) on phones, and fixes table overflow.
   ============================================================================ */

/* Table scroll wrapper — enables horizontal swiping on narrow screens.
   Inert on desktop; provides overflow-x scroll container on mobile. */
.table-scroll-wrapper {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) { /* var(--breakpoint-mobile) */
    /* Switch body/container from fixed-height app layout to natural document
       scroll. This eliminates the scroll-within-scroll trap where results and
       detail panels had their own inner scrollbars on small screens. */
    body {
        height: auto;
        overflow-y: auto;
        padding: 0;
        background: var(--color-bg-white);
    }

    .container {
        height: auto;
        overflow: visible;
        margin: 0;
        max-width: 100%;
    }

    /* Neutralise the desktop negative-margin bleed on header */
    .header-container {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }

    .master-detail-container {
        flex: none;
    }

    .results-panel {
        max-height: none;
        overflow-y: visible;
    }

    .detail-panel {
        overflow-y: visible;
    }

    /* Tables scroll horizontally instead of clipping or crushing columns */
    .table-scroll-wrapper {
        overflow-x: auto;
    }

    /* Touch targets: 44px min tap height via line-height, compact padding */
    .date-filter-btn {
        padding: 6px 10px;
        min-height: 44px;
    }

    .top-tab {
        padding: 10px 4px;
        min-height: 44px;
    }

    .section-header {
        padding: 14px var(--space-md);
    }

    .csv-download-btn {
        padding: 10px var(--space-md);
    }

    .results-table td,
    .results-table th {
        padding: 12px 8px;
    }

    .expand-cell {
        min-width: 44px;
        min-height: 44px;
    }

    /* Reduce fixed label width so metadata doesn't crush on narrow screens */
    .metadata-label {
        min-width: 120px;
    }

    .ero-location-block strong {
        min-width: 120px;
    }

    /* ERO Map: the Leaflet container normally gets its height from the
       viewport-filling flex chain (html/body height:100%). On mobile that
       chain is broken (body: height:auto), so we must give it an explicit
       height or Leaflet renders into a 0-height container and shows nothing. */
    #eroMapLeaflet {
        height: 70vh;
        min-height: 400px;
    }

    /* Mobile view-swap now handled by universal .showing-detail class */
}

/* ============================================================
   Case Studies tab
   ============================================================ */

/* The case study list is three or four cards on an otherwise empty column, so
   it carries more weight per card than a search results list does. Built on
   .result-item's existing accent-bar-and-hover idiom rather than a look of its
   own — only the internals below are new. */
.case-study-card {
    cursor: pointer;
    padding: var(--space-lg);
    /* Shorthand first, then the accent bar: the shorthand would otherwise reset
       the border-left .result-item establishes. */
    border: 1px solid var(--color-gray-400);
    border-left: 4px solid var(--color-primary);
}

.case-study-card:hover {
    /* Widening the accent bar is how .result-item.selected already signals
       emphasis; reusing it keeps the hover in the site's own vocabulary. */
    border-left-width: 6px;
    border-left-color: var(--color-primary-dark);
}

.case-study-card-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.3;
}

.case-study-card-chevron {
    color: var(--color-text-muted);
    font-size: 20px;
    line-height: 1;
    transition: var(--transition-all);
}

.case-study-card:hover .case-study-card-chevron {
    color: var(--color-primary-dark);
    transform: translateX(3px);
}

.case-study-card-blurb {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: 1.5;
}

.case-study-card-meta {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-gray-300);
}

.case-study-card-window {
    font-size: 11px;
    color: var(--color-text-muted);
    font-style: italic;
}

.case-study-blurb {
    margin: 8px 0 12px 0;
    color: #444;
    line-height: 1.5;
}

.case-study-counts {
    padding: 8px 12px;
    background: #f5f7fa;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
}

.case-study-table-summary {
    padding: 6px 0 10px 0;
    font-size: 14px;
    color: #555;
}

.case-study-terms-intro {
    /* Matches .case-study-chart-note — the two are the same kind of
       explanatory prose and were reading at two different sizes. */
    font-size: var(--font-size-base);
    color: #555;
    line-height: 1.55;
    margin: 0 0 10px 0;
}

.case-study-terms {
    font-size: 13px;
    margin-bottom: 6px;
    line-height: 1.8;
}

.case-study-terms code {
    background: #eef1f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.case-study-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
}

.case-study-badge.in-house-badge {
    background: #e8e8e8;
    color: #444;
}

/* Reuses .date-filter-btn / .date-filter-buttons from the Search tab so both
   controls look and behave identically; only the placement differs. */
.case-study-window-filter {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: var(--space-md) 0;
}

.case-study-badge.dpoh-badge {
    background: #b5651d;
    color: #fff;
    margin-top: 4px;
}

.case-study-flag-only {
    color: #777;
    font-style: italic;
}

.low-relevance-toggle-row td {
    padding: 8px 4px;
    font-size: 13px;
}

.case-study-progress-phase {
    font-size: 14px;
    text-align: center;
    /* Phases swap in place, so give the line a fixed height: without it the
       spinner jumps when a longer label wraps. */
    min-height: 2.6em;
    max-width: 22em;
}

/* Expanded rows — the engagements behind a row's counts */
.case-study-expand-icon {
    display: inline-block;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    transition: var(--transition-color);
    user-select: none;
}

.case-study-expand-icon:hover,
.case-study-expand-icon[aria-expanded="true"] {
    color: var(--color-primary);
}

/* A click anywhere on one of these rows expands it — the delegated handler
   selects on this very attribute — so the whole row has to say so, not just the
   ▶. Keyed on the attribute rather than on a table class because the rows live
   in two different tables: the ranked tables are .results-table, which already
   carries a pointer of its own, and the Revolving Door's employers are an
   .activity-table, which does not. */
tr[data-cs-row-id] {
    cursor: pointer;
}

.case-study-engagement-group {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin: 10px 0 4px;
}

.case-study-engagement-subject {
    font-size: 12px;
    color: #555;
    margin-top: 4px;
    line-height: 1.4;
}

.engagement-counterparty {
    font-weight: 500;
}

/* Sits above the engagement list inside an expanded row. .expanded-row td has
   padding: 0, so the padding has to come from here, and it matches
   .engagement-list so the two line up down the left edge. */
.case-study-row-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-item) var(--space-xl) 0;
}

/* A card, like the engagement items below it — otherwise this content reads as
   loose text sitting on the expanded row's grey rather than as its own thing. */
.case-study-row-links-block {
    flex: 1 1 260px;
    font-size: 13px;
    line-height: 1.5;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.case-study-row-links-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-bottom: 4px;
}

/* Dark mode */
[data-theme="dark"] .case-study-blurb { color: #c9c9c9; }
[data-theme="dark"] .case-study-counts { background: #2a2d33; color: #ddd; }
[data-theme="dark"] .case-study-table-summary,
[data-theme="dark"] .case-study-terms-intro { color: #b0b0b0; }
[data-theme="dark"] .case-study-terms code { background: #33373e; color: #ddd; }
[data-theme="dark"] .case-study-badge.in-house-badge { background: #3a3f47; color: #ddd; }
[data-theme="dark"] .case-study-flag-only { color: #999; }
[data-theme="dark"] .case-study-engagement-group,
[data-theme="dark"] .case-study-row-links-title { color: #a0a0a0; }
[data-theme="dark"] .case-study-engagement-subject { color: #b0b0b0; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .case-study-blurb { color: #c9c9c9; }
    :root:not([data-theme="light"]) .case-study-counts { background: #2a2d33; color: #ddd; }
    :root:not([data-theme="light"]) .case-study-table-summary,
    :root:not([data-theme="light"]) .case-study-terms-intro { color: #b0b0b0; }
    :root:not([data-theme="light"]) .case-study-terms code { background: #33373e; color: #ddd; }
    :root:not([data-theme="light"]) .case-study-badge.in-house-badge { background: #3a3f47; color: #ddd; }
    :root:not([data-theme="light"]) .case-study-flag-only { color: #999; }
    :root:not([data-theme="light"]) .case-study-engagement-group,
    :root:not([data-theme="light"]) .case-study-row-links-title { color: #a0a0a0; }
    :root:not([data-theme="light"]) .case-study-engagement-subject { color: #b0b0b0; }
}

.case-study-office-details {
    white-space: pre-line;
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

[data-theme="dark"] .case-study-office-details { color: #b0b0b0; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .case-study-office-details { color: #b0b0b0; }
}

/* ============================================================================
   Case Study Overview — charts
   ============================================================================
   Palette note: these are chart tokens, deliberately separate from the
   --color-ontario / --color-toronto / --color-federal row-accent tokens above.
   Those are pale tints tuned for a 4px table border and fail as chart fills:
   run through the categorical checks they land outside the lightness band,
   below the chroma floor, and the blue/green pair separates by only ΔE 13
   for normal vision — under the 15 floor, so full-colour readers struggle
   with it before colour blindness is considered.

   The values below are the nearest passing steps and validate on BOTH the
   light and dark chart surfaces, which is why one set serves both schemes:
   lightness band, chroma floor, CVD separation (worst adjacent pair ΔE 17.9
   protan), normal-vision floor (ΔE 19.4) and 3:1 contrast all pass. Do not
   hand-edit them — re-run the palette validator if they must change.

   Type note: no text in this section goes below --font-size-base, the size
   .case-study-blurb inherits. That is the floor for prose. In-chart SVG
   labels sit just under it because they are geometry-constrained, and the
   lightbox exists so they can always be read at size. */
:root {
    --chart-ontario: #d45d5d;
    --chart-toronto: #3d8bd4;
    --chart-federal: #5f9e62;

    /* Sequential ramp for magnitude (matrix and heatmap cells). One hue,
       monotone lightness, each step >= 0.06 apart in OKLab L, palest step
       still clearing 2:1 against the surface so a 1-count cell reads as a
       mark rather than as blank paper. */
    --chart-seq-1: #7cbec0;
    --chart-seq-2: #4f9fa1;
    --chart-seq-3: #2d8183;
    --chart-seq-4: #155a5c;

    --chart-grid: #e3e3e0;
    --chart-axis-text: #55606e;
    --chart-empty: #f4f4f2;
    --chart-surface: #ffffff;
}

[data-theme="dark"] {
    /* The ramp is re-stepped for the dark surface rather than flipped: the
       light ramp's dark end vanishes against #161b22. Direction reverses too
       — magnitude runs dark-to-light on a dark ground. */
    --chart-seq-1: #265e60;
    --chart-seq-2: #38898c;
    --chart-seq-3: #5faeb0;
    --chart-seq-4: #93cdce;
    --chart-grid: #30363d;
    --chart-axis-text: #9aa4b1;
    --chart-empty: #1c2128;
    --chart-surface: #161b22;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --chart-seq-1: #265e60;
        --chart-seq-2: #38898c;
        --chart-seq-3: #5faeb0;
        --chart-seq-4: #93cdce;
        --chart-grid: #30363d;
        --chart-axis-text: #9aa4b1;
        --chart-empty: #1c2128;
        --chart-surface: #161b22;
    }
}

.case-study-chart {
    margin: 0 0 var(--space-4xl) 0;
}

.case-study-chart:last-child {
    margin-bottom: 0;
}

/* Two columns: the prose that explains the chart on the left, the chart
   itself on the right. Full-width prose above a small chart wasted most of
   the detail column and made the graphic the smaller element on screen.
   The text column is fixed so the chart takes every pixel left over. */
.case-study-chart-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: start;
}

.case-study-chart-side {
    min-width: 0;
}

.case-study-chart-main {
    min-width: 0;
}

/* One column below the point where a 300px gutter plus a legible chart stop
   fitting side by side. */
@media (max-width: 1100px) {
    .case-study-chart-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }
}

.case-study-chart-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text-dark);
}

/* The chart's headline figure. Same size as the note it sits above — the
   type floor applies here too — and separated from it by colour and weight
   rather than by scale, so it reads as a first sentence and not as a second
   title competing with .case-study-chart-title. */
.case-study-chart-summary {
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.55;
}

.case-study-chart-note {
    font-size: var(--font-size-base);
    color: var(--color-text-medium);
    margin: 0 0 var(--space-md) 0;
    line-height: 1.55;
}

/* Wide charts scroll inside their own box — the detail column must never
   scroll horizontally as a whole. */
.case-study-chart-scroll {
    overflow-x: auto;
    max-width: 100%;
}

/* Styling hangs off the SVG itself, not off an ancestor. The lightbox clones
   the <svg> into a panel on <body>, so a rule scoped to .case-study-chart
   would not reach the enlarged copy — gridlines lost their stroke and labels
   their fill, which on the dark surface meant black text on near-black. */
.case-study-svg {
    display: block;
    font-family: var(--font-family-base);
}

/* Inline only: the enlarged copy carries an explicit pixel width and must not
   be squeezed back to the width of its container. */
.case-study-chart-scroll .case-study-svg {
    max-width: 100%;
    height: auto;
}

/* The click target for the lightbox. */
.case-study-chart-figure {
    cursor: zoom-in;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: var(--space-xs);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.case-study-chart-figure:hover,
.case-study-chart-figure:focus-visible {
    border-color: var(--color-secondary-light);
    background: var(--color-secondary-bg);
    outline: none;
}

.case-study-chart-enlarge {
    font-size: var(--font-size-base);
    color: var(--color-secondary-text);
    margin: var(--space-xs) 0 0 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Entity-type switcher on the activity matrix. */
.case-study-chart-controls {
    display: flex;
    gap: var(--space-xs);
    margin: 0 0 var(--space-md) 0;
    flex-wrap: wrap;
}

.case-study-chart-tab {
    padding: 4px 12px;
    font-size: var(--font-size-base);
    border: 1px solid var(--color-secondary-light);
    background: var(--color-secondary-bg);
    color: var(--color-secondary-text);
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
}

.case-study-chart-tab:hover {
    background: var(--color-secondary-bg-hover);
}

.case-study-chart-tab[aria-selected="true"] {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
    font-weight: 600;
}

.case-study-chart-empty {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    font-style: italic;
    padding: var(--space-md) 0;
}

/* Hover target styling — the mark itself carries the title tooltip. */
.case-study-svg .mark {
    transition: opacity 0.12s ease;
}

.case-study-svg .mark:hover {
    opacity: 0.75;
}

.case-study-svg .axis-label {
    fill: var(--chart-axis-text);
    font-size: 12px;
}

.case-study-svg .row-label {
    fill: var(--color-text-medium);
    font-size: 13px;
}

/* In-chart legend text. Sized to match the axis labels it sits beneath. */
.case-study-svg .legend-label {
    fill: var(--chart-axis-text);
    font-size: 12px;
}

/* The ramp's empty step is all but the surface colour, so an isolated swatch
   of it reads as nothing at all. A hairline gives every swatch an edge. */
.case-study-svg .legend-swatch {
    stroke: var(--chart-grid);
    stroke-width: 1;
}

.case-study-svg .grid-line {
    stroke: var(--chart-grid);
    stroke-width: 1;
}

/* ---------------------------------------------------------------------------
   Lightbox
   ---------------------------------------------------------------------------
   These charts carry more detail than the detail column has room for. The
   lightbox re-renders the same SVG scaled to the viewport — because every
   chart carries a viewBox, dropping its width/height lets it scale with its
   text, so labels get bigger rather than just blurrier. */
.case-study-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
}

.case-study-lightbox-panel {
    background: var(--chart-surface);
    color: var(--color-text);
    border-radius: 6px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
    max-width: 96vw;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.case-study-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.case-study-lightbox-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
}

.case-study-lightbox-close {
    border: 1px solid var(--color-border-medium);
    background: var(--color-bg-light);
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-family: inherit;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
}

.case-study-lightbox-close:hover {
    background: var(--color-bg-medium);
}

.case-study-lightbox-body {
    padding: var(--space-lg);
    overflow: auto;
}

body.case-study-lightbox-open {
    overflow: hidden;
}

/* Charts are ink-heavy and the tables carry the same facts on paper. */
@media print {
    .case-study-chart-scroll { overflow: visible; }
    .case-study-chart-controls,
    .case-study-chart-enlarge { display: none; }
    .case-study-chart-layout { grid-template-columns: minmax(0, 1fr); }
    .case-study-lightbox { display: none; }
}

/* Former Public Offices — lobbyist profile
   ----------------------------------------
   Grouped by registry, because the same position title means service in a
   different government under each heading. The registry label is the primary
   fact about an entry, not decoration, so it is set as a heading rather than a
   badge tucked beside the text. */
.former-office-group + .former-office-group {
    margin-top: var(--space-md);
}

.former-office-registry {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}

.former-office-list {
    margin: 0;
    padding-left: 20px;
}

.former-office-entry {
    margin-bottom: var(--space-xs);
}

.former-office-position {
    color: var(--color-text-dark);
}

/* Institution and dates trail the position on the same line where they fit and
   wrap beneath it where they do not — they qualify the position rather than
   standing on their own. */
.former-office-detail {
    color: var(--color-text-muted);
    font-size: var(--font-size-13);
    margin-left: var(--space-xs);
}

/* Pre-v5 federal filings put a whole career in one free-text field, one office
   per line. The line breaks are the only structure it has, so they are kept. */
.former-office-details {
    color: var(--color-text-muted);
    font-size: var(--font-size-13);
    margin-top: 2px;
    white-space: pre-line;
}

.former-office-none,
.former-office-basis {
    color: var(--color-text-muted);
    font-size: var(--font-size-13);
}

.former-office-basis:not(:empty) {
    padding-top: var(--space-sm);
}

/* Citations back to the filings a declaration was made on.
   ---------------------------------------------------------
   Set quieter and smaller than the declaration itself: the office is the claim
   and the citation is the footnote under it, so it must be reachable without
   competing for the eye. The same rules serve the lobbyist profile and the case
   study's Revolving Door cards, which share one builder. */
.former-office-cite-line {
    font-size: var(--font-size-13);
    margin-top: 2px;
}

.former-office-cite {
    color: var(--color-link);
    cursor: pointer;
}

.former-office-cite:hover,
.former-office-cite:focus {
    color: var(--color-link-dark);
    text-decoration: underline;
}

/* A native <details>, so the list needs no JavaScript and no state of its own —
   it survives the case study rebuilding its expanded rows from scratch. */
.former-office-sources {
    font-size: var(--font-size-13);
    margin-top: 2px;
}

.former-office-sources > summary {
    color: var(--color-link);
    cursor: pointer;
    list-style: none;
    width: fit-content;
}

.former-office-sources > summary::-webkit-details-marker {
    display: none;
}

/* Our own marker, rotated on open: the native triangle sits differently in
   every browser and cannot be aligned with the text beside it. */
.former-office-sources > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 4px;
    transition: transform 0.15s;
}

.former-office-sources[open] > summary::before {
    transform: rotate(90deg);
}

.former-office-sources > summary:hover,
.former-office-sources > summary:focus {
    color: var(--color-link-dark);
    text-decoration: underline;
}

/* The citation list is bounded by the cap on sources, so it flows rather than
   inheriting .engagement-list's 400px scroll box — a scrollbar inside a
   footnote inside an expanded row is one nesting too many. */
.former-office-source-list {
    padding: var(--space-xs) 0 0 0;
    max-height: none;
    overflow-y: visible;
}

/* Former Public Offices — firm profile
   ------------------------------------
   The roster-level view of the declarations above. The detail rows reuse the
   .former-office-* rules unchanged, so an office reads the same here as on the
   lobbyist profile. */
.office-kind-tag {
    display: inline-block;
    margin-left: var(--space-xs);
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    line-height: 16px;
    white-space: nowrap;
    cursor: help;
}

.office-kind-tag.office-kind-political { color: var(--color-office-political); }
.office-kind-tag.office-kind-public_service { color: var(--color-office-public); }
.office-kind-tag.office-kind-unclassified { color: var(--color-office-unclassified); }

.firm-office-summary {
    margin: 0 0 var(--space-sm);
    color: var(--color-text);
}

.firm-office-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
}

.firm-office-kind-count .office-kind-tag {
    margin-left: 0;
}

.firm-office-note,
.firm-office-more,
.firm-office-heading-note {
    color: var(--color-text-muted);
    font-size: var(--font-size-13);
}

.firm-office-note {
    margin: 0 0 var(--space-md);
}

.firm-office-origins {
    margin-bottom: var(--space-md);
}

.firm-office-heading {
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: var(--space-xs);
}

.firm-office-heading-note {
    font-weight: normal;
}

.firm-office-origins .former-office-registry {
    margin-top: var(--space-sm);
}

.firm-office-kind-heading {
    margin: var(--space-xs) 0 2px;
}

.firm-office-kind-heading .office-kind-tag {
    margin-left: 0;
}

.firm-office-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: 3px;
}

.firm-office-bar-label {
    flex: 0 0 38%;
    min-width: 0;
    font-size: var(--font-size-13);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.firm-office-bar-track {
    flex: 1;
    height: 14px;
    background: var(--color-bg-medium);
    border-radius: var(--radius-sm);
}

.firm-office-bar {
    height: 100%;
    border-radius: var(--radius-sm);
}

.firm-office-bar.office-kind-political { background: var(--color-office-political); }
.firm-office-bar.office-kind-public_service { background: var(--color-office-public); }
.firm-office-bar.office-kind-unclassified { background: var(--color-office-unclassified); }

.firm-office-bar-count {
    flex: 0 0 32px;
    text-align: right;
    font-size: var(--font-size-13);
    font-variant-numeric: tabular-nums;
}

.firm-office-more {
    margin: 2px 0 var(--space-xs);
}

.firm-office-row-kinds .office-kind-tag {
    margin-left: 0;
    margin-right: var(--space-xs);
}

#firm-former-offices-table tr[data-office-row-id] {
    cursor: pointer;
}

#firm-former-offices-table th[data-col] {
    cursor: pointer;
}

.office-expand-icon {
    display: inline-block;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    user-select: none;
}

.office-expand-icon:hover,
.office-expand-icon[aria-expanded="true"] {
    color: var(--color-primary);
}

.firm-office-detail {
    background: var(--color-gray-100);
}

.firm-office-detail-body {
    padding: var(--space-sm) var(--space-md);
}

@media (max-width: 600px) {
    .firm-office-bar-label {
        flex-basis: 45%;
    }
}

/* ============================================================================
   HELP MODAL
   Per-page provenance notes, opened from the ? button in the detail toolbar.
   Built entirely from the design tokens, so it follows the theme without a
   dark-mode block of its own.
   ============================================================================ */

.help-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.help-modal {
    background-color: var(--color-bg-white);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 680px;
    /* Caps at the viewport so the body scrolls inside the modal rather than
       the modal growing past the fold on a long topic. */
    max-height: min(85vh, 900px);
    display: flex;
    flex-direction: column;
}

.help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.help-modal-header h2 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
}

.help-modal-close {
    background: none;
    border: none;
    color: var(--color-text-light);
    font-size: var(--font-size-xl);
    line-height: 1;
    padding: 0 var(--space-sm);
    cursor: pointer;
    transition: var(--transition-color);
}

.help-modal-close:hover {
    color: var(--color-text-dark);
}

.help-modal-body {
    padding: var(--space-lg);
    overflow-y: auto;
    line-height: var(--line-height-normal);
}

.help-modal-body h2 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
    margin: var(--space-lg) 0 var(--space-sm);
}

.help-modal-body h2:first-child {
    margin-top: 0;
}

.help-modal-body p,
.help-modal-body ul,
.help-modal-body ol {
    margin: 0 0 var(--space-md);
}

.help-modal-body ul,
.help-modal-body ol {
    padding-left: var(--space-lg);
}

.help-modal-body li {
    margin-bottom: var(--space-xs);
}

.help-modal-body a {
    color: var(--color-primary);
}

/* Topics lean on tables to say what differs between registries; they must
   scroll in their own box rather than widening the modal. */
.help-modal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-sm);
}

.help-modal-body th,
.help-modal-body td {
    text-align: left;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.help-modal-body th {
    color: var(--color-text-medium);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 768px) { /* var(--breakpoint-mobile) */
    .help-overlay {
        padding: var(--space-sm);
    }

    .help-modal {
        max-height: 92vh;
    }
}

/* ==========================================================================
   Find in this record
   The bar sits under the sticky detail toolbar (its `top` is measured at open
   time, because the toolbar's height changes with the breadcrumb trail).
   See .claude/find-in-record-plan.md
   ========================================================================== */

/* The button belongs to a record, so it appears only while one is on screen.
   Done in CSS rather than in each renderer: every detail view sets this class
   through enterDetailView(), and none of them would otherwise agree. */
#findButton {
    display: none;
}

body.showing-detail #findButton {
    display: inline-flex;
}

.find-bar {
    position: sticky;
    top: 0;
    z-index: 9;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-gray);
    border-bottom: 1px solid var(--color-border-medium);
}

.find-bar[hidden] {
    display: none;
}

.find-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.find-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 320px;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    color: var(--color-text);
    background: var(--color-bg-white);
    border: 1px solid var(--color-gray-border);
    border-radius: var(--radius-md);
}

.find-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary-md);
}

.find-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.find-nav {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-secondary-text);
    background: var(--color-secondary-bg);
    border: 1px solid var(--color-secondary-light);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.find-nav:hover {
    background: var(--color-secondary-bg-hover);
}

.find-close {
    margin-left: auto;
}

/* The second line: what is NOT on the page. Always phrased in reports, while
   the count above is phrased in occurrences — they are different units and
   merging them would be a lie. */
.find-notice {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.find-notice[hidden] {
    display: none;
}

.find-working {
    font-style: italic;
    color: var(--color-text-muted);
}

.find-action {
    margin-left: var(--space-sm);
    padding: 2px var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-link);
    background: transparent;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.find-action:hover {
    background: var(--color-blue-lightest);
    border-color: var(--color-primary);
}

.find-filter-banner {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-13);
    color: var(--color-text-light);
    background: var(--color-blue-lightest);
    border: 1px solid var(--color-blue-medium);
    border-radius: var(--radius-md);
}

/* Hits reuse the search highlight tokens, which already carry dark-mode values.
   The current hit takes the stronger of the two so it is findable at a glance
   in a long expanded report. */
mark.find-hit {
    background: var(--color-highlight-keyword);
    padding: 0 1px;
    font-weight: inherit;
    color: var(--color-text-dark);
}

mark.find-hit-current {
    background: var(--color-highlight-phrase);
    font-weight: var(--font-weight-semibold);
    outline: 2px solid var(--color-primary);
    border-radius: var(--radius-sm);
}

[data-theme="dark"] mark.find-hit,
[data-theme="dark"] mark.find-hit-current {
    color: #ffffff;
}

/* ============================================================================
   User-defined case studies
   ============================================================================
   A reader's own topic definition, stored in this browser. Everything here is
   deliberately a little quieter than the curated case studies above it: same
   layout vocabulary, muted accent, so the two never read as equally authored.
   See .claude/user-defined-case-studies.md Part 4. */

.case-study-user-card {
    /* The accent bar is what tells the two apart in the list, so it changes
       colour rather than the card changing shape. */
    border-left-color: var(--color-text-muted);
}

.case-study-user-card:hover {
    border-left-color: var(--color-text-light);
}

.case-study-user-empty {
    padding: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.case-study-user-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.case-study-user-actions button {
    background: none;
    border: 1px solid var(--color-border-medium);
    border-radius: 3px;
    padding: 2px 8px;
    margin-left: 4px;
    font-size: 11px;
    color: var(--color-text-light);
    cursor: pointer;
}

.case-study-user-actions button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.case-study-user-card.confirming .case-study-user-delete {
    border-color: var(--color-error);
    color: var(--color-error);
}

.case-study-user-new {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
}

.case-study-user-new button {
    background: none;
    border: 1px dashed var(--color-border-darker);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    cursor: pointer;
}

.case-study-user-new button:hover {
    border-style: solid;
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* --- The banner above a report ------------------------------------------ */

.case-study-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.case-study-banner-fork {
    background: var(--color-bg-gray);
    color: var(--color-text-light);
}

/* A reader's own claim is marked as such, and it has to be visible without
   being read as a warning — the definition is not wrong, it is just not ours. */
.case-study-banner-custom {
    background: var(--color-purple-bg);
    color: var(--color-text-medium);
    border-left: 3px solid var(--color-purple);
}

.case-study-banner button {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 3px;
    padding: 3px 10px;
    margin-left: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-text-medium);
    cursor: pointer;
    white-space: nowrap;
}

.case-study-banner button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* --- Suggest for the built-in list (dialog in the help modal's furniture) - */

.cs-submit-summary {
    background: var(--color-bg-gray);
    border-left: 3px solid var(--color-purple);
    border-radius: 4px;
    padding: 8px 12px;
    margin: var(--space-md) 0;
    font-size: var(--font-size-sm);
}

.cs-submit-meta {
    color: var(--color-text-light);
    margin-top: 4px;
}

.cs-submit-label {
    display: block;
    margin: var(--space-md) 0 4px 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-medium);
}

.cs-submit-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--color-border-medium);
    border-radius: 3px;
    background: var(--color-bg-white);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
}

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.cs-submit-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.cs-submit-actions {
    margin-top: var(--space-md);
    display: flex;
    gap: var(--space-sm);
}

.cs-submit-actions button {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 3px;
    padding: 5px 14px;
    font-size: var(--font-size-sm);
    color: var(--color-text-medium);
    cursor: pointer;
}

.cs-submit-actions .cs-submit-send {
    border-color: var(--color-purple);
    color: var(--color-purple);
    font-weight: var(--font-weight-semibold);
}

.cs-submit-actions button:disabled {
    opacity: 0.5;
    cursor: default;
}

.cs-submit-status {
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
}

.cs-submit-status:empty {
    display: none;
}

.cs-submit-ok,
.cs-submit-error {
    padding: 8px 12px;
    border-radius: 4px;
}

.cs-submit-ok {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.cs-submit-error {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
}

.cs-submit-error textarea {
    margin-top: 6px;
}

/* --- The editor --------------------------------------------------------- */

.cs-editor {
    padding: 4px 0 24px 0;
}

.cs-editor-field {
    margin-bottom: var(--space-lg);
}

.cs-editor-field > label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-medium);
}

.cs-editor-field input[type="text"],
.cs-editor-field textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--color-border-medium);
    border-radius: 3px;
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg-white);
}

.cs-editor-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.cs-editor-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    cursor: pointer;
    white-space: nowrap;
}

/* --- Term lists --------------------------------------------------------- */

.cs-editor-terms {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-lighter);
}

.cs-editor-terms-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    color: var(--color-text-dark);
}

.cs-editor-terms-count {
    font-size: 11px;
    color: var(--color-text-muted);
}

.cs-editor-terms-help {
    margin: 4px 0 8px 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.cs-editor-empty {
    margin: 4px 0 8px 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-subtle);
    font-style: italic;
}

.cs-editor-term-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.cs-editor-term-table th {
    padding: 4px 6px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.cs-editor-term-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: top;
}

.cs-editor-num {
    text-align: right;
    white-space: nowrap;
}

/* The second number in each cell is the one that decides a drop: how many
   engagements this term reaches that no other term does. Held back visually so
   the pair reads as "of which", not as two equal figures. */
.cs-editor-uniq {
    color: var(--color-text-muted);
}

.cs-editor-pattern,
.cs-editor-provenance {
    margin-top: 2px;
    font-size: 11px;
    color: var(--color-text-muted);
}

.cs-editor-flag {
    font-size: 11px;
    color: var(--color-text-subtle);
}

.cs-editor-verdict {
    font-size: 11px;
    color: var(--color-text-muted);
    max-width: 180px;
    white-space: normal;
}

/* A term reaching nothing no other term reaches is the one decidable finding
   in the whole table, so it is the only one that gets colour. */
.cs-verdict-drop {
    color: var(--color-error-dark);
    font-weight: 600;
}

.cs-verdict-dilutes,
.cs-verdict-never_fires {
    color: var(--cs-warn-text);
}

.cs-editor-remove {
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text-subtle);
    cursor: pointer;
    padding: 0 4px;
}

.cs-editor-remove:hover {
    color: var(--color-error);
}

/* --- Adding a term ------------------------------------------------------ */

.cs-editor-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.cs-editor-add input[type="text"] {
    flex: 1 1 200px;
    min-width: 140px;
    padding: 5px 8px;
    border: 1px solid var(--color-border-medium);
    border-radius: 3px;
    font-family: inherit;
    font-size: var(--font-size-sm);
    background: var(--color-bg-white);
    color: var(--color-text);
}

/* What the typed phrase will match, updated as it is typed. Sits between the
   add row and the Try result, so the reader reads it in the order they act:
   type, see what it means, then measure it. */
.cs-editor-hint {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.cs-editor-hint:empty {
    margin-top: 0;
}

.cs-editor-hint-label {
    font-weight: 600;
    margin-right: 4px;
}

.cs-editor-hint code {
    padding: 1px 4px;
    border-radius: 2px;
    background: var(--color-bg-medium);
    color: var(--color-text);
    font-size: 11px;
}

/* Each note is its own line: they answer different questions and run together
   illegibly when wrapped as one paragraph. */
.cs-editor-hint-note {
    display: block;
    margin-top: 2px;
}

.cs-editor-try-result {
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.cs-editor-try-result:empty {
    margin-top: 0;
}

.cs-editor-try-card {
    padding: 8px 10px;
    border: 1px solid var(--color-border-medium);
    border-left: 3px solid var(--color-primary);
    border-radius: 3px;
    background: var(--color-bg-white);
}

.cs-editor-try-counts {
    font-weight: 600;
    color: var(--color-text-dark);
}

.cs-editor-try-note {
    margin-top: 4px;
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* The entity-concentration warning. This is the shape a false-positive magnet
   has — a handful of entities supplying most of what a term admits — and it is
   what makes a short-acronym trap visible before it is committed. */
.cs-editor-try-warn {
    margin-top: 4px;
    padding: 4px 6px;
    background: var(--color-highlight-mark);
    border-radius: 3px;
    font-size: 11px;
    color: var(--cs-warn-text);
    line-height: 1.5;
}

.cs-editor-try-rows {
    margin: 4px 0 0 0;
    padding-left: 18px;
    font-size: 11px;
    color: var(--color-text-light);
}

.cs-editor-try-rows li {
    margin: 1px 0;
}

/* The matched text, with the hit marked. For a federal exclusion this is the
   only thing that can show WHY a filing is being dropped — a term can fire on
   the job title of the official who was lobbied rather than on the subject of
   the lobbying, and a count cannot show that. */
.cs-editor-try-context {
    display: block;
    margin-top: 2px;
    font-family: monospace;
    font-size: 11px;
    color: var(--color-text-muted);
}

.cs-editor-try-context mark {
    background: var(--color-highlight-phrase);
    color: inherit;
}

.cs-editor-try-actions {
    margin-top: 8px;
    display: flex;
    gap: var(--space-sm);
}

/* --- Overrides ---------------------------------------------------------- */

.cs-editor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cs-editor-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid var(--color-border-medium);
    border-radius: 10px;
    background: var(--color-bg-white);
    font-size: 11px;
    color: var(--color-text-light);
}

.cs-editor-chip button {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-subtle);
    cursor: pointer;
}

.cs-editor-chip button:hover {
    color: var(--color-error);
}

.cs-editor-warn {
    margin-top: 8px;
    padding: 6px 8px;
    background: var(--color-highlight-mark);
    border-radius: 3px;
    font-size: 11px;
    color: var(--cs-warn-text);
    line-height: 1.5;
}

/* --- Actions ------------------------------------------------------------ */

.cs-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}

.cs-editor-btn {
    padding: 6px 14px;
    border: 1px solid var(--color-border-medium);
    border-radius: 3px;
    background: var(--color-bg-white);
    font-size: var(--font-size-sm);
    color: var(--color-text-medium);
    cursor: pointer;
}

.cs-editor-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.cs-editor-btn.primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.cs-editor-btn.primary:hover {
    background: var(--color-primary-dark);
    color: #fff;
}

.cs-editor-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.cs-editor-status {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.cs-editor-status.error {
    color: var(--color-error-dark);
}

.cs-editor-footnote {
    margin-top: var(--space-md);
}

/* The ✗ that vetoes one filing or one entity from a custom study. Only ever
   rendered on a custom report — a curated study's membership is not editable
   from the page. */
.cs-veto {
    background: none;
    border: none;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1;
    color: var(--color-text-subtle);
    cursor: pointer;
}

.cs-veto:hover {
    color: var(--color-error);
}

/* ============================================================================
   OPENING SPLASH
   ============================================================================
   A curtain over the page for a few seconds while it settles, then gone
   without being asked. Behaviour and timings: static/js/modules/splash.js ---
   the fade below and FADE_MS there are the same number in two places.

   Everything is painted from the theme tokens, so the splash arrives already
   in the reader's light or dark theme rather than flashing the wrong one. */

.splash-overlay {
    position: fixed;
    inset: 0;
    /* Under the development banner (10000), over everything else the app
       puts up, so a dev instance still announces itself. */
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background:
        radial-gradient(ellipse at 50% 32%,
                        var(--color-blue-lightest) 0%,
                        var(--color-bg-body) 62%);
    opacity: 0;
    transition: opacity 400ms ease;
}

/* `display: flex` above beats the browser's own `[hidden] { display: none }`,
   so without this the dismissed splash stays in the layout at zero opacity and
   goes on swallowing every click on the page. */
.splash-overlay[hidden] {
    display: none;
}

.splash-overlay.is-visible {
    opacity: 1;
}

.splash-card {
    max-width: 560px;
    width: 100%;
    padding: var(--space-4xl) var(--space-3xl) var(--space-2xl);
    text-align: center;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.splash-mark {
    display: block;
    margin: 0 auto var(--space-lg);
    border-radius: 8px;
    animation: splash-mark-in 600ms ease-out both;
}

@keyframes splash-mark-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.splash-title {
    margin: 0;
    font-size: clamp(26px, 6vw, 34px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-dark);
}

.splash-tagline {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* This visit's captions stand together, one under the other, for the whole of
   the splash. The captions sitting the visit out are in the DOM as well, so
   only a current one is laid out at all --- hiding them by opacity alone would
   pad the card out with lines nobody is reading. */
.splash-captions {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.splash-caption {
    display: none;
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.55;
    color: var(--color-text-light);
}

.splash-caption.is-current {
    display: block;
}

.splash-caption strong {
    color: var(--color-text-dark);
}

/* How much of the splash is left. It is the only thing on the card that says
   the wait is bounded, which is what stops it reading as a dialog to close. */
.splash-progress {
    margin-top: var(--space-2xl);
    height: 6px;
    background: var(--color-border-medium);
    border-radius: 3px;
    overflow: hidden;
}

.splash-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--color-primary);
}

.splash-hint {
    margin: var(--space-md) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
}

/* Nothing here is worth motion sickness: the splash still arrives, it just
   cuts rather than fades, and the countdown bar (which is nothing but
   movement) goes away. */
@media (prefers-reduced-motion: reduce) {
    .splash-overlay {
        transition: none;
    }

    .splash-mark {
        animation: none;
    }

    .splash-progress {
        display: none;
    }
}

@media (max-width: 600px) {
    .splash-card {
        padding: var(--space-2xl) var(--space-lg) var(--space-lg);
    }

    .splash-captions {
        margin-top: var(--space-lg);
    }
}