/* --- */
/* DESIGN TOKENS */
:root {
    /* Brand */
    --eiti-navy: #132856;
    --eiti-navy-2: #15517f;
    --eiti-amber: #f6a70a;
    --eiti-ink: #111a35;

    /* Surfaces */
    --eiti-surface: #ffffff;
    --eiti-bg: #f8fafb;
    --eiti-bg-alt: #f9f9f9;

    /* Borders — 3 tiers, semantic */
    --eiti-border-subtle: #e5e5e5;
    --eiti-border: #dddddd;
    --eiti-border-emphasis: #132856;
    --eiti-divider: #e0e4ea;

    /* Type */
    --eiti-font: 'Metropolis', sans-serif;
    --eiti-text-xs: 12px;
    --eiti-text-sm: 14px;
    --eiti-text-base: 16px;
    --eiti-text-lg: 20px;
    --eiti-text-xl: 24px;
    --eiti-text-2xl: 32px;
    --eiti-text-3xl: 48px;
    --eiti-text-4xl: 64px;
    --eiti-label-tracking: 0.03em;
    --eiti-line-tight: 1.15;
    --eiti-line-normal: 1.5;

    /* Spacing — 4px base scale */
    --eiti-space-1: 4px;
    --eiti-space-2: 8px;
    --eiti-space-3: 12px;
    --eiti-space-4: 16px;
    --eiti-space-5: 20px;
    --eiti-space-6: 24px;
    --eiti-space-8: 32px;
    --eiti-space-10: 40px;
    --eiti-space-12: 48px;
    --eiti-space-16: 64px;

    /* Radius */
    --eiti-radius-sm: 4px;
    --eiti-radius: 6px;
    --eiti-radius-lg: 8px;
    --eiti-radius-pill: 999px;

    /* Container padding — replaces ad-hoc 13rem/14rem */
    --eiti-container-x: clamp(1rem, 8vw, 14rem);
}

/* --- */
/* FONTS */
@font-face {
    font-family: 'Metropolis';
    src: url('../../f4d0372fba5171f24262b493ea33f4ad7878eddf970db8b1f3011416b070ad51/css/fonts/metropolis/metropolis-light.otf');
    font-weight: 300;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../../6f8992eb58eeced41efea7076be4d468ac678f9778420438fab4a3358aa2b462/css/fonts/metropolis/metropolis-regular.otf');
}

@font-face {
    font-family: 'Metropolis';
    src: url('../../9110dda4baca06a6615fe50c473de0945a557dc53476e39efbf5b53c97f7a6d1/css/fonts/metropolis/metropolis-medium.otf');
    font-weight: 500;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../../1d58419be905f3a3d9f145a295e52d2cf863b89a19150c7e009ea56cdc823e67/css/fonts/metropolis/metropolis-semibold.otf');
    font-weight: 600;
}

@font-face {
    font-family: 'Metropolis';
    src: url('../../a470d16eb70e97992529479e751032e8cfd0146043d2245ad63d312a6991de63/css/fonts/metropolis/metropolis-bold.otf');
    font-weight: bold;
}

body {
    font-family: var(--eiti-font);
    font-size: var(--eiti-text-lg);
    line-height: var(--eiti-line-normal);
    color: var(--eiti-ink);
}

h1,
h2,
h3,
h4 {
    color: var(--eiti-navy);
    font-family: var(--eiti-font);
    line-height: var(--eiti-line-tight);
}

/* Fluid type scale — clamps grow linearly with viewport width between the
   576px and 1440px breakpoints (was: 3 hardcoded steps in media queries). */
h1 {
    font-size: clamp(var(--eiti-text-3xl), 4vw, var(--eiti-text-4xl));
}
h2 {
    font-size: clamp(var(--eiti-text-xl), 2.5vw, var(--eiti-text-2xl));
    font-weight: 700;
}
h3 {
    font-size: clamp(var(--eiti-text-lg), 1.8vw, var(--eiti-text-xl));
    font-weight: 500;
}
h4 {
    font-size: var(--eiti-text-base);
    font-weight: 600;
}

/* --- */
/* MARGIN AND PADDING */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Metropolis', sans-serif;
}

section.content {
    padding: var(--eiti-space-4) var(--eiti-container-x);
    font-family: var(--eiti-font);
}

/* --- */
/* CHART FACET TAGS — one hue per filter kind, unified visual weight.
   Amber is reserved for UI accents (buttons, active tab), so facet
   hues are all in the cool/data-vis family for a coherent chart legend. */
.bc-chart-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eiti-space-2);
    margin: var(--eiti-space-2) 0 var(--eiti-space-1);
}
.bc-chart-tags:empty {
    display: none;
}

.bc-chart-tag {
    display: inline-block;
    padding: var(--eiti-space-1) var(--eiti-space-3);
    border-radius: var(--eiti-radius-pill);
    font-size: var(--eiti-text-xs);
    font-weight: 500;
    color: #ffffff;
    border: 1px solid transparent;
    background: var(--eiti-navy);
}
.bc-chart-tag--country {
    background: #15517f; /* navy-2 */
    border-color: #0e3a5c;
}
.bc-chart-tag--sector {
    background: #5b5f97; /* muted indigo */
    border-color: #45497a;
}
.bc-chart-tag--gfs {
    background: #0e7c66; /* teal — unchanged */
    border-color: #0a5a4a;
}
.bc-chart-tag--commodity {
    background: #7a4e7c; /* plum */
    border-color: #5c3a5e;
}
.bc-chart-tag--unit {
    background: #4b5563; /* slate — units are meta, use neutral gray */
    border-color: #374151;
}

section.content li {
    list-style: none; /* Remove default bullet points */
    position: relative; /* Ensure the pseudo-element is positioned relative to the list item */
    padding-left: 30px;
}

section.content li::before {
    content: '';
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNNDM4LjYgMjMzLjRsLTE3Ni0xNzZDMjU0LjIgNTIuMyAyNDUuMSA0OCAyMzUuNSA0OGMtOS42IDAtMTguNyA0LjMtMjQuNiAxMi0xMS41IDEzLjYtOS42IDMzLjcgNC4xIDQ1LjNMMzIyLjcgMjA4SDI0Yy0xMy4zIDAtMjQgMTAuNy0yNCAyM3Y0OGMwIDEzLjMgMTAuNyAyNCAyNCAyNGgyOTguN2wtMTA3LjcgMTAyLjdjLTEzLjcgMTMuMS0xNS42IDMzLjItNC4xIDQ1LjMgMTEuNSAxMy42IDMxLjYgMTUuNSA0NS4zIDQuMWwxNzYtMTc2YzQuOS00LjcgNy43LTExIDcuNy0xNy42cy0yLjgtMTIuOS03LjctMTcuNnoiLz48L3N2Zz4=');
    background-size: 0.8em 0.8em; /* Adjust the size of the icon */
    background-repeat: no-repeat;
    display: inline-block;
    width: 1em; /* Adjust the width of the icon */
    height: 1em; /* Adjust the height of the icon */
    position: absolute;
    left: -5px; /* Adjust the position of the icon */
    top: 7px;
}

/* --- */
/* HEADER AND FOOTER */
.eiti-logo-img {
    max-height: 40px;
    min-height: 18px;
    min-width: 48px;
    width: auto;
    height: auto;
    max-width: 149px;
}

.eiti-logo-img-footer {
    margin: 0 1em 1em 0;
}

header,
footer {
    background: var(--eiti-navy) !important;
    color: #ffffff;
    width: 100%;
    padding: var(--eiti-space-8) var(--eiti-container-x) !important;
}

footer {
    bottom: 0px;
    font-size: 0.9rem;
}

.eiti-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 2em;
}

.eiti-footer-left-part div {
    padding-top: var(--eiti-space-12);
}

.eiti-footer-right-part {
    flex: 1;
    justify-self: flex-end;
}

.footerRightNav {
    display: flex;
    justify-content: end;
    gap: 1.5em;
}

.footerRightNav a {
    text-decoration: none;
}

.license-source {
    display: flex;
    justify-content: end;
    gap: var(--eiti-space-6);
    padding-top: var(--eiti-space-12);
}

.license-source a {
    text-decoration: none;
}

@media (max-width: 996px) {
    /* Keep the logo/tagline and the nav side by side, but stop them from
     colliding: cap the tagline column and force a gap so the sentence wraps
     into a left-hand block with clear space before the links (the footer's
     `space-between` alone let the untamed tagline run right up to the nav). */
    .eiti-footer {
        gap: var(--eiti-space-6);
    }
    .eiti-footer-left-part {
        max-width: 50%;
    }

    .footerRightNav {
        display: flex;
        justify-content: end;
        align-items: end;
        flex-direction: column;
        gap: 0.55em; /* one consistent gap; the row spacing lives here, not on each link */
        margin-right: 1.5em;
        /* Stack navigation links vertically */
    }

    .footerRightNav a:link {
        padding-bottom: 0; /* the column gap handles spacing — no extra per-link padding */
    }

    /* "Data license" joins the nav list on mobile (aligned to the same right
     margin) instead of floating far below it. */
    .license-source {
        padding-top: 0.55em;
        margin-right: 1.5em;
    }
}

/* --- */
/* NAVBAR */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--eiti-space-8); /* floor between logo and links even with zero free space */
}

.nav-logo-container {
    display: flex;
    align-items: center;
}

.eiti-logo {
    flex-shrink: 0;
    width: 109px;
    height: 40px;
    background: url('../../91fd30702f50b8dbc4653ad90f3e095f532d464f9b5681cf00c05b72f2b5bbfe/img/eiti-logo-negative-no-xy-margin.png') no-repeat center center;
    background-size: contain;
}

.nav-links-container {
    display: flex;
    /* justify-content: flex-end; */
    gap: 1.5em;
}

.nav-link-a {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
}

.nav-link-a:visited {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
}

.nav-link-a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--eiti-amber);
    text-underline-offset: 10px;
}

.dropdown {
    display: none;
    font-size: 2em;
    color: white;
    cursor: pointer;
    /* Rendered as a <button> for keyboard access; strip the native chrome so it
     stays the plain glyph it was as a <div>. */
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    line-height: 1;
}
.dropdown:focus-visible,
.close-menu:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.nav-menu.active {
    display: flex;
}

.nav-logo-container .dropdown {
    position: absolute;
    top: 1.5em;
    right: 2em;
}

.close-menu {
    display: none;
    font-size: 2em;
    color: white;
    position: absolute;
    top: 1.5em;
    right: 2em;
    cursor: pointer;
    /* <button> reset — see .dropdown. */
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    line-height: 1;
}

@media (max-width: 996px) {
    .nav-links-container {
        display: none;
        flex-direction: column;
        text-align: left;
        width: 100%;
        /* width: 100%; */
    }

    .nav-links-container.active {
        display: flex;
        flex-direction: column;
        gap: 1.5em;
    }

    .nav-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 34, 85, 0.95);
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;
    }

    .dropdown {
        display: block;
        position: fixed;
        top: 40px;
        right: 40px;
    }
    .close-menu {
        display: block;
    }

    .nav-logo-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-link-a {
        padding: 0.5em;
        text-align: center;
        margin-left: 0;
        /* Reset margin for mobile view */
    }
}

/* Breadcrumb Styles */

/* --- */
/* DS UI */

/* Guide button — an outlined, uppercase link with a download glyph (the guide page's PDF link). */
.guide-button {
    display: inline-flex;
    align-items: center;
    gap: var(--eiti-space-2);
    font-family: var(--eiti-font);
    font-weight: 600;
    font-size: var(--eiti-text-sm);
    line-height: 1;
    padding: var(--eiti-space-3) var(--eiti-space-5);
    border-radius: var(--eiti-radius);
    border: 1px solid var(--eiti-navy);
    background: var(--eiti-surface);
    color: var(--eiti-navy);
    text-transform: uppercase;
    letter-spacing: var(--eiti-label-tracking);
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
    text-decoration: none;
}
.guide-button:hover,
.guide-button:link:hover,
.guide-button:visited:hover {
    background: var(--eiti-amber);
    border-color: var(--eiti-amber);
    color: var(--eiti-navy);
}
.guide-button:link,
.guide-button:visited,
.guide-button:hover,
.guide-button:focus,
.guide-button:active {
    color: var(--eiti-navy);
    text-decoration: none;
}

.guide-button::after {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00IiAvPjxwb2x5bGluZSBwb2ludHM9IjcgMTAgMTIgMTUgMTcgMTAiIC8+PGxpbmUgeDE9IjEyIiB5MT0iMTUiIHgyPSIxMiIgeTI9IjMiIC8+PC9zdmc+');
    display: inline-flex;
    vertical-align: middle;
}

/* TABLE PAGES */
.wrapped-sql {
    display: none;
}

#datasette-write-ui-insert-button {
    display: none;
}

/* Remove line before page header */
.page-header {
    margin-left: 0;
    border: 0;
    padding-left: 0;
}

/* TABLES */
/* Border style for table */
table,
td {
    border: 0.5px solid #dddddd;
    /* Add a 1px solid border with a light gray color */
}

/* Style for odd rows */
tr:nth-child(odd) {
    background-color: var(--eiti-bg);
    /* Light gray background */
}

/* Style for even rows */
tr:nth-child(even) {
    background-color: #ffffff;
    /* White background */
}

/* Table density — 14px cells with airy uniform padding and body-normal
   line-height so wrapped text stays legible (was `--eiti-line-tight` 1.15
   which made multi-line cells feel cramped). */
td,
th {
    font-family: var(--eiti-font);
    font-size: var(--eiti-text-sm);
    padding: var(--eiti-space-3);
    line-height: var(--eiti-line-normal);
}

/* Numeric column alignment — every table on the site.
   Datasette adds .type-int / .type-float classes on numeric TD cells.
   Right-align + tabular-nums so digit columns line up regardless of value. */
td.type-int,
td.type-float,
.bc-pivot-table td:not(:first-child) {
    text-align: right;
    /* Tabular figures + slashed zero + a small letter-spacing so commas
     stack directly under commas and decimal points under decimal
     points as the eye scans a column — the position of the separator
     is what distinguishes it, not the glyph. */
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: 0.02em;
}

/* Typed-glyph cell states — glyphs injected via ::before so we don't
   destroy the original text (allows the underlying string to remain
   available for a11y titles, exports, screen-readers). Applied to both
   datasette-native tables (via scripts.js) and pivot cells (via pivot.js).

   Three states carry three semantics:
     • not-available: em-dash, ink 35%. "Didn't report" — the frontend
       substitutes this glyph for the underlying null in numeric columns.
     • not-applicable: n/a, ink 45%, italic. The absence is expected for
       this specific country / question — reads distinct from a real gap.
     • zero: 0 stays as-is, ink 55%. "Reported, and it's zero." */
td.cell-state--not-available {
    color: var(--eiti-ink);
    opacity: 0.35;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
td.cell-state--not-available {
    color: transparent;
}
td.cell-state--not-available::before {
    content: '—';
    color: var(--eiti-ink);
    opacity: 1;
}

td.cell-state--not-applicable {
    color: transparent;
    opacity: 1;
    font-variant-numeric: tabular-nums;
}
td.cell-state--not-applicable::before {
    content: 'n/a';
    color: var(--eiti-ink);
    opacity: 0.45;
    font-style: italic;
    font-size: var(--eiti-text-xs);
}

td.cell-state--zero {
    color: var(--eiti-ink);
    opacity: 0.55;
    font-weight: 400;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Column-level predates state — subtle navy tint on cells where the
   whole column pre-dates the country's first reporting year. Header of
   the column gets a muted white treatment + info icon so the column
   recedes rather than shouting. */
td.bc-pivot-no-data-col {
    background: rgba(17, 26, 53, 0.02);
}

th.bc-pivot-no-data-col {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    /* System serif italic renders "i" tighter than Metropolis + leaves
     visible space between glyph and circle edge — matches the mockup. */
    font-family: -apple-system, 'Times New Roman', Georgia, serif;
    font-size: 9px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    cursor: help;
    vertical-align: middle;
    padding-bottom: 1px;
}

th {
    background-color: var(--eiti-navy);
    border: none;
    font-weight: 700;
    color: white;
}

th a:link {
    color: white;
}

th a {
    color: white;
}

/* GRID AND CARD VIEWS */
.db-table-card {
    position: relative;
    background: linear-gradient(180deg, var(--eiti-navy), var(--eiti-navy-2));
    border-radius: var(--eiti-radius-lg);
    padding: var(--eiti-space-4) var(--eiti-space-4) var(--eiti-space-5);
    margin-bottom: var(--eiti-space-4);
    aspect-ratio: 2;
    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.db-table-card::after {
    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjI1IDEuNzEyNUw4LjA1IDAuODg3NDk5QzguNDI1IDAuNTQ5OTk5IDguOTg3NSAwLjU0OTk5OSA5LjMyNSAwLjg4NzQ5OUwxNi42Mzc1IDguMTYyNUMxNi45NzUgOC41Mzc1IDE2Ljk3NSA5LjEgMTYuNjM3NSA5LjQzNzVMOS4zMjUgMTYuNzVDOC45ODc1IDE3LjA4NzUgOC40MjUgMTcuMDg3NSA4LjA1IDE2Ljc1TDcuMjI1IDE1LjkyNUM2Ljg4NzUgMTUuNTUgNi44ODc1IDE0Ljk4NzUgNy4yMjUgMTQuNjEyNUwxMS43NjI1IDEwLjNIMC45OTk5OTlDMC40NzQ5OTkgMTAuMyAwLjA5OTk5OTQgOS45MjUgMC4wOTk5OTk0IDkuNFY4LjJDMC4wOTk5OTk0IDcuNzEyNSAwLjQ3NDk5OSA3LjMgMC45OTk5OTkgNy4zSDExLjc2MjVMNy4yMjUgMy4wMjVDNi44ODc1IDIuNjUgNi44NSAyLjA4NzUgNy4yMjUgMS43MTI1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
    position: absolute;
    bottom: 16px; /* Adjust as needed */
    right: 30px; /* Adjust as needed */
    transform: scale(1.2); /* Scale to twice the size and mirror on the x-axis */
}

.db-table-card:hover {
    background: linear-gradient(180deg, var(--eiti-navy) 20%, var(--eiti-navy-2) 70%);
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Focus tier — quiet keyline design.
   Focus cards break from the navy gradient family: white surface with
   a 2px amber left keyline and a small "IN FOCUS" eyebrow. Communicates
   "curated" through a calm delta rather than a loud badge. */
.db-table-card--focus {
    background: var(--eiti-surface);
    border: 1px solid var(--eiti-border-subtle);
    border-left: 2px solid var(--eiti-amber);
    color: var(--eiti-ink);
    box-shadow: none;
    aspect-ratio: auto;
    min-height: 116px;
    padding: var(--eiti-space-4) var(--eiti-space-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.db-table-card--focus:hover {
    background: var(--eiti-surface);
    border-color: #c9cdd6;
    border-left-color: var(--eiti-amber);
    box-shadow: 0 1px 3px rgba(17, 26, 53, 0.06);
    transform: none;
}

.db-table-card--focus .card-header a {
    color: var(--eiti-navy);
    font-weight: 700;
    padding-right: 0;
}

.db-table-card--focus .db-table-card-eyebrow {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--eiti-label-tracking);
    text-transform: uppercase;
    color: #b57905;
    display: block;
    margin-bottom: 4px;
}

/* Focus cards hide the SHARED white-on-navy arrow icon and render their
   own muted-navy text arrow in the .db-table-card-foot row (aligned with
   the row count meta). Keeps the arrow visible against the white surface. */
.db-table-card--focus::after {
    display: none;
}

.db-table-card--focus .db-table-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--eiti-space-4);
}
.db-table-card--focus .db-table-card-meta {
    font-size: var(--eiti-text-xs);
    color: var(--eiti-ink);
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}
.db-table-card--focus .db-table-card-arrow {
    color: var(--eiti-navy);
    opacity: 0.4;
    font-size: 18px;
    line-height: 1;
}

/* Core Datasets — horizontal catalog list.
   Communicates "this is the exhaustive list, browse it" and stays
   compact for a long inventory. Rendered via .core-list wrapper +
   .core-row items in database-eiti_database.html. */
.core-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--eiti-border-subtle);
    border-radius: var(--eiti-radius);
    overflow: hidden;
    margin-bottom: var(--eiti-space-6);
}

.core-row,
.core-row:link,
.core-row:visited,
.core-row:hover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--eiti-surface);
    padding: var(--eiti-space-3) var(--eiti-space-4);
    text-decoration: none !important;
    color: var(--eiti-ink);
    transition: background 0.15s ease;
}
.core-row:hover {
    background: var(--eiti-bg);
}

.core-row-main {
    display: flex;
    align-items: center;
    gap: var(--eiti-space-3);
    min-width: 0;
}

.core-row-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--eiti-navy);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--eiti-font);
    flex-shrink: 0;
}

.core-row-title {
    font-weight: 600;
    font-size: var(--eiti-text-sm);
    color: var(--eiti-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.core-row-meta {
    display: flex;
    align-items: center;
    gap: var(--eiti-space-4);
    font-size: var(--eiti-text-xs);
    flex-shrink: 0;
}

.core-row-count {
    color: var(--eiti-ink);
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
}

.core-row-arrow {
    color: var(--eiti-navy);
    opacity: 0.4;
}

/* Section subtitle under h2 for Focus/Core headings */
.section-subtitle {
    font-size: var(--eiti-text-sm);
    color: var(--eiti-ink);
    opacity: 0.65;
    margin-bottom: var(--eiti-space-4);
}

/* Chart title — larger navy display treatment above the bar chart.
   Bigger than the surrounding h3 so the chart's data question dominates. */
.bc-chart-title {
    font-size: clamp(24px, 3.5vw, 34px);
    font-weight: 500;
    color: var(--eiti-navy);
    margin-bottom: var(--eiti-space-4);
    line-height: var(--eiti-line-tight);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    overflow-wrap: break-word;
    min-width: 0;
    padding-right: 28px; /* keep clear of the arrow icon */
}

/* Whole card stays clickable: invisible overlay stretched over the
   card (.db-table-card has position: relative). Assumes the title is
   the only interactive element inside a card. */
.card-header a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.lock-icon {
    font-size: 1.2em;
    /* Adjust size as needed */
}

.db-table-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: var(--eiti-space-5);
}

.db-table-grid a {
    text-decoration: none;
    color: #ffffff;
}

#views,
#tables {
    padding-top: var(--eiti-space-8);
}

/* Table sections with visual separation */
.table-section {
    margin-bottom: var(--eiti-space-8);
    padding-top: var(--eiti-space-6);
    border-top: 2px solid var(--eiti-divider);
}

.table-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.table-section-heading {
    color: var(--eiti-navy);
    font-size: var(--eiti-text-xl);
    font-weight: 600;
    margin-bottom: var(--eiti-space-1);
}

.table-section-desc {
    font-size: var(--eiti-text-sm);
    color: var(--eiti-ink);
    opacity: 0.75;
    margin-bottom: var(--eiti-space-4);
}

@media (max-width: 1200px) {
    /* Medium screens */
    .db-table-grid {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
        /* 2 cards per row */
    }
}

@media (max-width: 768px) {
    /* Small/mobile screens */
    .db-table-grid {
        grid-template-columns: repeat(1, minmax(150px, 1fr));
        /* 1 card per row */
    }

    .db-table-card::after {
        position: absolute;
        bottom: 8px; /* Adjust as needed */
        right: 15px; /* Adjust as needed */
        transform: scale(0.7); /* Scale to twice the size and mirror on the x-axis */
    }
}

@media (max-width: 576px) {
    /* Really small screens: shrink card texts a notch */
    .card-header a {
        font-size: 0.8em;
    }
}

/* The HTML `hidden` attribute must always win. The browser's own
   [hidden] { display: none } lives in the UA origin, so ANY author
   display rule matching the element repaints it — which has bitten the
   chart tooltip, the filter-row icon, the Export chart button and the
   multi-select panel in turn. One author-origin rule settles it for
   every element, present and future. */
[hidden] {
    display: none !important;
}

/* FILTERS */

.metadata-description + h3 {
    position: relative;
    color: transparent; /* Hide the original text */
    margin-top: var(--eiti-space-12);
}

.metadata-description + h3::before {
    content: 'Filter by';
    color: var(--eiti-navy);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 0.8em;
}

.select-wrapper {
    position: relative;
    display: inline-block;
    width: calc(33.33% - var(--eiti-space-3));
    margin-right: var(--eiti-space-3);
    margin-top: var(--eiti-space-2);
    border-radius: var(--eiti-radius-lg);
}

.select-wrapper.filter-op {
    width: calc(15% - var(--eiti-space-3));
}

.select-wrapper select {
    font-size: var(--eiti-text-base);
    color: var(--eiti-navy);
    border: 1px solid var(--eiti-border);
    padding: var(--eiti-space-3);
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--eiti-radius-lg);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff
        url('data:image/svg+xml;utf8,<svg%20fill="%23132856"%20height="24"%20viewBox="0%200%2024%2024"%20width="24"%20xmlns="http://www.w3.org/2000/svg"><path%20d="M7%2010l5%205%205-5z"/></svg>')
        no-repeat right 10px center;
}

.select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: var(--eiti-space-3);
    pointer-events: none;
}

.select-wrapper select:hover,
.filters input.filter-value:hover {
    border: 1px solid var(--eiti-amber);
    box-shadow: 0 0 5px rgba(246, 167, 10, 0.5);
    outline: none;
}

/* 1.0a19 UPDATE: added .core versions of the .filters elements, 1.0a19 added the core class to the forms */
.core input.filter-value:hover {
    border: 1px solid var(--eiti-amber);
    box-shadow: 0 0 5px rgba(246, 167, 10, 0.5);
    outline: none;
}

.filters input.filter-value,
.core input.filter-value {
    font-size: var(--eiti-text-base);
    color: var(--eiti-navy);
    width: calc(33.33% - var(--eiti-space-3));
    padding: var(--eiti-space-3);
    border: 1px solid var(--eiti-border);
    box-sizing: border-box;
    border-radius: var(--eiti-radius-lg);
}

.filters input.filter-value:focus {
    border: 1px solid var(--eiti-navy);
    box-shadow: 0 0 5px rgba(19, 40, 86, 0.5);
    outline: none;
}

/* 1.0a19 UPDATE: added .core versions of the .filters elements, 1.0a19 added the core class to the forms */
.core input.filter-value:focus {
    border: 1px solid var(--eiti-navy);
    box-shadow: 0 0 5px rgba(19, 40, 86, 0.5);
    outline: none;
}

form input[type='submit'] {
    color: var(--eiti-navy);
    background: var(--eiti-surface);
    border: 1px solid var(--eiti-navy);
    padding: 0 var(--eiti-space-5);
    height: 44px;
    font-family: var(--eiti-font);
    font-size: var(--eiti-text-base);
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
    border-radius: var(--eiti-radius);
    text-transform: uppercase;
    letter-spacing: var(--eiti-label-tracking);
    font-weight: 600;
    margin-top: var(--eiti-space-2);
    margin-bottom: var(--eiti-space-5);
}

/* ---------------------------------------------------------------- */
/* DATASETTE-NATIVE FILTER PAGE — row count, suggested facets,
   export links, table metadata. Datasette renders these outside our
   custom templates, so they inherit the 20px body size and datasette's
   default blue link color (#276890). Normalize to the token scale so
   the filter page reads as one system with the rest of the site. */

/* Rowcount + "where in_kind_unit contains 'Not'" line above the filters */
.page-header + p,
.table + p {
    font-size: var(--eiti-text-base);
    color: var(--eiti-ink);
    opacity: 0.75;
}

/* Suggested facets / suggested filters row */
.suggested-facets,
p.suggested-facets {
    font-size: var(--eiti-text-sm);
    color: var(--eiti-ink);
    opacity: 1;
    margin-top: var(--eiti-space-3);
}

.suggested-facets a {
    color: var(--eiti-navy);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}
.suggested-facets a:hover {
    border-bottom-color: var(--eiti-amber);
}

/* Export links (This data as json, CSV (advanced) or download the CSV) */
.export-links,
p.export-links {
    font-size: var(--eiti-text-sm);
    color: var(--eiti-ink);
}
.export-links a,
p.export-links a {
    color: var(--eiti-navy);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}
.export-links a:hover,
p.export-links a:hover {
    border-bottom-color: var(--eiti-amber);
}
.export-links a:visited,
p.export-links a:visited {
    color: var(--eiti-navy);
}

/* "View and edit SQL" link */
p a[href*='?sql='] {
    color: var(--eiti-navy);
    font-weight: 600;
    text-decoration: none;
    font-size: var(--eiti-text-base);
    border-bottom: 1px solid var(--eiti-amber);
    transition: border-color 0.15s ease;
}

/* Datasette's default blue link color (#276890) shouldn't leak anywhere */
.page-header a,
.crumbs a {
    color: var(--eiti-navy);
    text-decoration: none;
}
.page-header a:hover,
.crumbs a:hover {
    border-bottom: 1px solid var(--eiti-amber);
}

/* Filter input row — align select + input + APPLY to same height */
.filter-row select,
.filter-row input[type='text'],
.filter-row input.filter-value {
    height: 44px;
    padding: 0 var(--eiti-space-3);
    box-sizing: border-box;
}
form.filters input[type='submit'],
.filter-row + input[type='submit'] {
    height: 44px;
    padding: 0 var(--eiti-space-5);
}

/* "count all" link near row count */
.count a {
    color: var(--eiti-navy);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--eiti-amber);
}

/* .core variant styled via the merged `form input[type=submit]` rule and
   the `.core input[type=submit]` override in the button system block. */

form input[type='submit']:hover {
    background: var(--eiti-amber);
    border-color: var(--eiti-amber);
    color: var(--eiti-navy);
}

.export-links a {
    text-decoration: none;
}

.export-links a:visited {
    color: rgb(39, 104, 144);
}

.export-links a:hover {
    color: var(--eiti-navy);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--eiti-amber);
    text-underline-offset: var(--eiti-space-3);
}

.suggested-facets {
    margin-bottom: var(--eiti-space-12);
    position: relative;
    visibility: hidden;
}

.suggested-facets::before {
    content: 'Suggested filters: ';
    visibility: visible;
    position: absolute;
    left: 0;
}

.suggested-facets a {
    visibility: visible;
    display: inline;
    position: relative;
    text-decoration: none;
}

.suggested-facets a::after {
    content: ', ';
}

.suggested-facets a:last-child::after {
    content: '';
}

.suggested-facets a:visited {
    color: rgb(39, 104, 144);
}

.suggested-facets a:hover {
    color: var(--eiti-navy);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--eiti-amber);
    text-underline-offset: 10px;
}

.facet-results {
    position: relative;
    font-size: 16px;
    margin: 5em 0 1em 0;
}

.facet-results::before {
    content: 'Filters';
    position: absolute;
    top: -40px;
    left: 0;
    font-weight: bold;
    font-size: 20px;
    background-color: var(--eiti-bg-alt);
}
.facet-results .tight-bullets a {
    text-decoration: none;
    margin-left: -50px;
}

.facet-results .tight-bullets a:visited {
    color: rgb(39, 104, 144);
}

.facet-results .tight-bullets a:hover {
    color: var(--eiti-amber);
}

.facet-results .tight-bullets li::before {
    content: none;
}

.hero-section {
    min-height: 400px;
    background: var(--eiti-navy);
    text-align: left;
    color: white;
    padding: var(--eiti-space-8) var(--eiti-container-x) var(--eiti-space-12);
    margin-bottom: var(--eiti-space-16);
    position: relative;
    background-image: url('../../5b655110031374d89a358772ac71b90d68926b4fce38d68cbc09d6e86e4642bd/img/hero-bg.png');
    /* Network graphic docked to the hero's right edge at every width —
     sized by height so it never smears across the text side. */
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right center;
}

.hero-h1 {
    color: white;
    margin-top: 2em;
}

.metadata-description {
    /* padding-right: 5em; */
    padding-right: 0em;
}

.metadata-description a:visited {
    color: rgb(39, 104, 144);
}

.metadata-description a:hover {
    color: var(--eiti-navy);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--eiti-amber);
    text-underline-offset: 10px;
}

.return-link {
    position: relative;
    padding-left: 25px;
    font-size: 14px;
    text-decoration: none;
}

.return-link:link,
.return-link:visited {
    text-decoration: none;
    color: white;
}

.return-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--eiti-amber);
    text-underline-offset: 10px;
}

.return-link::before {
    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjQ4OTMxIDYuOTc1OUgxMi4zNzE0QzEyLjc5OTIgNi45NzU5IDEzLjE0NDUgNy4zMjEgMTMuMTQ0NSA3Ljc1MDgyVjguMjY3NDNDMTMuMTQ0NSA4LjY5NzI1IDEyLjc5OTIgOS4wNDIzNCAxMi4zNzE0IDkuMDQyMzRINi40ODkzMUw4LjkyMTEgMTEuMzgwNUM5LjIzMzQ1IDExLjY4MDIgOS4yMzk2NCAxMi4xODEzIDguOTMzNDcgMTIuNDg3MUw4LjU3ODg2IDEyLjgzOTRDOC4yNzY4MSAxMy4xNDMyIDcuNzg4MTkgMTMuMTQzMiA3LjQ4ODIxIDEyLjgzOTRMMy4yMTMyMyA4LjU1Nzc2QzIuOTA5MTMgOC4yNTM5OSAyLjkwOTEzIDcuNzY0MjUgMy4yMTMyMyA3LjQ2MzU4TDcuNDg4MjEgMy4xNzg4MUM3Ljc5MDI1IDIuODc1MDQgOC4yNzk5MSAyLjg3NTA0IDguNTc4ODYgMy4xNzg4MUw4LjkzMzQ3IDMuNTMxMTRDOS4yMzk2NCAzLjgzNjk3IDkuMjMzNDUgNC4zMzgwOCA4LjkyMTEgNC42Mzc3Mkw2LjQ4OTMxIDYuOTc1OU0wLjAwMDE5MzE4IDguMDA5MDFDMC4wMDAxOTMxOCAxMi40MzIyIDMuNTc2MjUgMTYuMDE2NSA3Ljk4OTM2IDE2LjAxNjVDMTIuNDAyNSAxNi4wMTY1IDE1Ljk3ODUgMTIuNDMyMiAxNS45Nzg1IDguMDA5MDFDMTUuOTc4NSAzLjU4NTc4IDEyLjQwMjUgMC4wMDE1MzM1MSA3Ljk4OTM2IDAuMDAxNTMzNTEzQzMuNTc2MjUgMC4wMDE1MzM1MTMgMC4wMDAxOTMxOCAzLjU4NTc4IDAuMDAwMTkzMTggOC4wMDA5MDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
    position: absolute;
    left: 0;
    top: 60%;
    transform: translateY(-50%) scale(0.8);
}

#sql-format {
    color: var(--eiti-navy);
    background: white;
    border: 1px solid var(--eiti-navy);
    padding: 10px 15px 7px 15px;
    font-size: 16px;
    cursor: pointer;
    transition:
        background 0.3s,
        border-color 0.3s;
}

#sql-format:hover {
    border: 1px solid var(--eiti-amber);
    box-shadow: 0 0 5px rgba(246, 167, 10, 0.5);
    outline: none;
}

#sql-format + input {
    color: var(--eiti-navy);
    background: white;
    border: 1px solid var(--eiti-navy);
    padding: 10px 15px 7px 15px;
    margin: 0px 0px 0px 20px;
    font-size: 16px;
    cursor: pointer;
    transition:
        background 0.3s,
        border-color 0.3s;
}

#sql-format + input:hover {
    box-shadow: 0 0 5px rgba(24, 14, 82, 0.5);
    outline: none;
    background-color: var(--eiti-navy);
    color: #ffffff;
}

/* Custom SQL editor — CodeMirror's bundled theme hard-codes
   `font-family: monospace`, which renders the browser default
   (Courier-ish) and clashes with Metropolis. Use the platform-native
   modern mono instead. The three-class selector outscores CodeMirror's
   runtime-injected two-class theme rules; the #sql-editor textarea is
   covered too so the font doesn't swap when the editor mounts. */
form.sql .cm-editor .cm-content,
#sql-editor {
    font-family:
        ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 1rem;
}

/* --- */
/* RESPONSIVE */
@media (max-width: 1200px) {
    section.content {
        padding: 1rem 11rem;
    }

    header,
    footer {
        padding: 3rem 12rem !important;
    }

    .hero-section {
        padding: 1rem 12rem 4rem 12rem;
        /* Background inherits the base rule (auto 100%, right center). */
    }
}

@media (max-width: 968px) {
    section.content {
        padding: 1rem 5rem;
    }

    header,
    footer {
        padding: 3rem 6rem !important;
    }

    .hero-section {
        padding: 1rem 6rem 4rem 6rem;
        margin-bottom: 1rem;
    }
    .select-wrapper {
        width: 100%;
        margin-bottom: var(--eiti-space-3);
    }

    .select-wrapper.filter-op {
        width: 100%;
        margin-bottom: var(--eiti-space-3);
    }

    .filters input.filter-value {
        width: 100%;
        margin-bottom: var(--eiti-space-3);
    }

    /* 1.0a19 UPDATE: added .core versions of the .filters elements, 1.0a19 added the core class to the forms */
    .core input.filter-value {
        width: 100%;
        margin-bottom: var(--eiti-space-3);
    }
}

@media (max-width: 576px) {
    section.content {
        padding: 1rem 1.5rem;
    }

    header,
    footer {
        padding: 3rem 2.5rem !important;
    }

    .hero-section {
        padding: 0.5rem 2.5rem 1.5rem 2.5rem;
        margin-bottom: 1rem;
    }
    .select-wrapper {
        width: 100%;
        margin-bottom: var(--eiti-space-3);
    }

    .select-wrapper.filter-op {
        width: 100%;
        margin-bottom: var(--eiti-space-3);
    }

    .filters input.filter-value {
        width: 100%;
        margin-bottom: var(--eiti-space-3);
    }

    /* 1.0a19 UPDATE: added .core versions of the .filters elements, 1.0a19 added the core class to the forms */
    .core input.filter-value {
        width: 100%;
        margin-bottom: var(--eiti-space-3);
    }

    /* 1.0a19 UPDATE: make sure the sort checkbox only appears in small screens */
    .sort_by_desc.small-screen-only {
        display: inline !important;
    }
}

/* 1.0a19 UPDATE and FIXES */
/* Correct navbar colors */
nav a:link {
    color: #fff;
    text-decoration: none;
}

nav a:hover {
    color: #fff;
}

/* 1.0a19 UPDATE: make sure the sort checkbox only appears in small screens */
.sort_by_desc.small-screen-only {
    display: none;
}

/* ===== BY-COUNTRY / EXPLORE PAGES ===== */

/* Active nav link: amber underline. The base navbar rules `nav a:link` (0,1,2)
   and `.nav-link-a:visited` (0,2,0) both set text-decoration:none and outrank a
   bare `.nav-link-a--active` (0,1,0), so the underline needs both a :link and a
   :visited twin (each 0,2,0) to win in either link state — otherwise the active
   underline only shows once a section has been visited. */
.nav-link-a--active,
.nav-link-a--active:link,
.nav-link-a--active:visited {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--eiti-amber);
    text-underline-offset: 10px;
}

/* Primary indicator tabs. Stronger active/inactive contrast:
   inactive tabs get 400-weight text so the 700-weight amber active tab
   dominates at a glance. Amber navy underline reinforces the state. */
.bc-indicator-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--eiti-space-6);
    border-bottom: 3px solid var(--eiti-navy);
}

.bc-indicator-tab {
    flex: 1;
    padding: var(--eiti-space-4) var(--eiti-space-6);
    font-family: var(--eiti-font);
    font-size: var(--eiti-text-base);
    font-weight: 400;
    color: var(--eiti-navy);
    background: var(--eiti-surface);
    border: 1px solid var(--eiti-border);
    border-bottom: none;
    cursor: pointer;
    text-align: center;
    transition:
        background 0.2s,
        font-weight 0.2s;
    border-radius: var(--eiti-radius-sm) var(--eiti-radius-sm) 0 0;
    margin-right: var(--eiti-space-1);
    line-height: var(--eiti-line-tight);
}

.bc-indicator-tab:last-child {
    margin-right: 0;
}

.bc-indicator-tab:hover {
    background: var(--eiti-bg);
    border-color: var(--eiti-navy);
    font-weight: 600;
}

.bc-indicator-tab.bc-indicator-tab--active {
    background: var(--eiti-amber);
    color: var(--eiti-navy);
    font-weight: 700;
    border-color: var(--eiti-amber);
    border-bottom: 3px solid var(--eiti-amber);
    box-shadow: 0 -2px 0 0 var(--eiti-amber);
}

/* Secondary filters row */
.bc-filters {
    display: flex;
    /* Wrap when the sum of filter groups exceeds the container width —
     avoids the intermediate-viewport failure where two filters share a
     row and text truncates ("All countr>"). Combined with the
     min-width on .bc-filter-group below, groups wrap to a new row
     rather than shrinking below readable size. */
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--eiti-bg);
    border: 1px solid var(--eiti-divider);
    border-radius: 6px;
}

/* Collapsible wrapper around the filters row. Native <details> keeps
   it JS-free and keyboard accessible; open by default so the filters
   stay discoverable. The row's bottom margin moves to the wrapper so
   collapsing doesn't leave a 2rem hole. */
.bc-filters-wrap {
    margin-bottom: 2rem;
}

.bc-filters-wrap > .bc-filters {
    margin-bottom: 0;
    margin-top: 0.5rem;
}

.bc-filters-summary {
    cursor: pointer;
    user-select: none;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--eiti-navy);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bc-filters-summary::marker {
    color: var(--eiti-amber);
}

.bc-filters-summary:hover {
    color: var(--eiti-navy-2);
}

/* Collapsible page-information box above the filters. Shares the
   summary-header styling with the filters wrapper (bc-filters-summary). */

.bc-filter-group {
    display: flex;
    /* flex-basis of 200px gives each group a readable minimum before
     wrap kicks in; combined with min-width, prevents the "All countr>"
     truncation and keeps the metric/unit selects legible. Overridden
     back to full-width column stacking at <=1368px. */
    flex: 1 1 200px;
    min-width: 200px;
    flex-direction: column;
    gap: 0.3rem;
}

.bc-filter-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--eiti-navy);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bc-filter-input,
.bc-filter-select {
    font-family: 'Metropolis', sans-serif;
    font-size: 0.95rem;
    color: var(--eiti-navy);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    background: #ffffff;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    width: 100%;
    min-width: 0;
}

/* Multi-select filter (explore.createMultiSelect). The native <select
   multiple> stays in the DOM as the state store and is hidden; the
   trigger reuses .bc-filter-select so it sits in the filter row like
   its single-select neighbours. */
/* The wrapper takes over the sizing the bare <select> had: full width
   of its filter group, and the flex share in .bc-country-row. */
.bc-ms {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}
.bc-country-row > .bc-ms {
    width: auto;
    flex: 1 1 0;
}
.bc-ms-native {
    display: none;
}
.bc-ms-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--eiti-space-2);
    width: 100%;
    min-width: 0;
    text-align: left;
    cursor: pointer;
    background: #fff;
}
.bc-ms-summary {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bc-ms--active .bc-ms-trigger {
    border-color: var(--eiti-navy);
}
.bc-ms-count {
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    min-width: 18px;
    padding: 0 6px;
    border-radius: var(--eiti-radius-pill);
    background: var(--eiti-navy);
    color: #fff;
    text-align: center;
}
.bc-ms-caret {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--eiti-navy);
    flex: 0 0 auto;
}
.bc-ms-trigger[aria-expanded='true'] .bc-ms-caret {
    transform: rotate(180deg);
}
.bc-ms-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 100%;
    width: max-content;
    max-width: min(420px, 90vw);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: var(--eiti-radius-lg);
    box-shadow: 0 8px 24px rgba(17, 26, 53, 0.14);
    padding: var(--eiti-space-2);
}
.bc-ms-head {
    display: flex;
    gap: var(--eiti-space-2);
    align-items: center;
    margin-bottom: var(--eiti-space-2);
}
.bc-ms-search {
    flex: 1 1 auto;
    font-family: 'Metropolis', sans-serif;
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ddd;
    border-radius: var(--eiti-radius);
    min-width: 0;
}
.bc-ms-clear {
    font-family: 'Metropolis', sans-serif;
    font-size: var(--eiti-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--eiti-label-tracking);
    color: var(--eiti-navy);
    background: none;
    border: 1px solid #ddd;
    border-radius: var(--eiti-radius);
    padding: 0.35rem 0.6rem;
    cursor: pointer;
}
.bc-ms-clear:hover {
    border-color: var(--eiti-navy);
}
.bc-ms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
}
/* section.content li::before paints an arrow bullet on every li; the
   listbox is a control, not prose. */
.bc-ms-list li {
    margin: 0;
    padding-left: 0;
}
section.content .bc-ms-list li::before {
    content: none;
}
.bc-ms-item {
    display: flex;
    align-items: center;
    gap: var(--eiti-space-2);
    padding: 0.4rem 0.5rem;
    border-radius: var(--eiti-radius-sm);
    font-size: 0.92rem;
    color: var(--eiti-navy);
    cursor: pointer;
}
.bc-ms-item:hover {
    background: #f3f4f7;
}
.bc-ms-item input {
    margin: 0;
    accent-color: var(--eiti-navy);
}
.bc-ms-item input:focus-visible {
    outline: 2px solid var(--eiti-amber);
    outline-offset: 1px;
}
.bc-ms-divider {
    border-top: 1px solid #e5e5e5;
    margin: var(--eiti-space-1) 0;
}
.bc-ms-empty {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.9rem;
    color: #55607a;
}

.bc-filter-input:hover,
.bc-filter-select:hover {
    border-color: var(--eiti-amber);
    box-shadow: 0 0 5px rgba(246, 167, 10, 0.5);
    outline: none;
}

.bc-filter-input:focus,
.bc-filter-select:focus {
    border-color: var(--eiti-navy);
    box-shadow: 0 0 5px rgba(19, 40, 86, 0.5);
    outline: none;
}

.bc-timeframe {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}

.bc-timeframe .bc-filter-input {
    width: 100%;
    min-width: 0;
}

.bc-timeframe-to {
    font-size: 0.9rem;
    color: var(--eiti-navy);
    font-weight: 500;
    padding-bottom: 0.65rem;
}

/* Pivot table */
.bc-pivot-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    margin-top: 1rem;
}

.bc-pivot-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Metropolis', sans-serif;
    font-size: 0.88rem;
}

.bc-pivot-table th,
.bc-pivot-table td {
    text-align: center;
    min-width: 70px;
}

/* Sticky header row */
.bc-pivot-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--eiti-navy);
}

/* Sticky first column */
.bc-pivot-table th:first-child,
.bc-pivot-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 140px;
    font-weight: 600;
    white-space: nowrap;
    text-align: left;
    border-right: 2px solid #ddd;
}

/* Corner cell sits above both sticky axes */
.bc-pivot-table thead th:first-child {
    z-index: 4;
}

/* Opaque backgrounds so scrolling content doesn't bleed through */
.bc-pivot-table td:first-child {
    background: #fff;
}

.bc-pivot-table tr:nth-child(even) td:first-child {
    background: var(--eiti-bg);
}

.bc-pivot-empty {
    text-align: center;
    color: #888;
    padding: 2rem;
}

/* Collapsed leading no-data year-range column. Body cells get the
   mockup's very light navy tint (2% alpha) so the column recedes.
   Both header and body cells share dashed side borders that group the
   column as a single visual unit from top of header to last row. */
.bc-pivot-table td.bc-pivot-no-data-col {
    background: rgba(17, 26, 53, 0.02);
    border-left: 1px dashed rgba(255, 255, 255, 0);
    border-right: 1px dashed rgba(255, 255, 255, 0);
    box-shadow:
        inset 1px 0 0 rgba(17, 26, 53, 0.08),
        inset -1px 0 0 rgba(17, 26, 53, 0.08);
}
.bc-pivot-table th.bc-pivot-no-data-col {
    box-shadow:
        inset 1px 0 0 rgba(255, 255, 255, 0.25),
        inset -1px 0 0 rgba(255, 255, 255, 0.25);
}

/* Loading state */
.bc-loading {
    padding: 2rem;
    text-align: center;
    color: #888;
    font-style: italic;
}

/* Table footnote */
.bc-table-note {
    font-size: 0.78rem;
    color: #888;
    margin-top: 0.5rem;
    font-style: italic;
}

/* Table pagination — ghost-tier per button system */
.bc-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eiti-space-4);
    margin-top: var(--eiti-space-3);
}

.bc-pager-btn {
    display: inline-block;
    padding: var(--eiti-space-2) var(--eiti-space-4);
    border: 1px solid var(--eiti-border);
    background: var(--eiti-surface);
    color: var(--eiti-navy);
    text-decoration: none;
    border-radius: var(--eiti-radius-sm);
    cursor: pointer;
    font-family: var(--eiti-font);
    font-size: var(--eiti-text-sm);
    font-weight: 600;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

/* The Datasette-table pager renders Prev/Next as <a> (they navigate) and
   as an inert <span class="bc-pager-btn--disabled"> when there is nowhere
   to go; the explore pager renders them as <button> with :disabled. Cover
   both. */
.bc-pager-btn:hover:not(:disabled):not(.bc-pager-btn--disabled) {
    border-color: var(--eiti-amber);
    background: var(--eiti-bg);
}

.bc-pager-btn:disabled,
.bc-pager-btn--disabled {
    opacity: 0.45;
    cursor: default;
}

.bc-pager-status {
    font-size: var(--eiti-text-sm);
    color: var(--eiti-ink);
    opacity: 0.75;
}

/* Chart hover tooltip. Positioned by JS relative to the chart wrapper;
   pointer-events: none so hover on the canvas isn't blocked. Down-arrow
   points at the cursor; horizontal centering via translateX keeps the
   arrow aligned as the cursor moves. */
.bc-chart-wrapper {
    position: relative;
}
.bc-chart-tooltip {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: none;
    background: rgba(17, 26, 53, 0.95);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.bc-chart-tooltip[hidden] {
    display: none;
}
.bc-chart-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(17, 26, 53, 0.95);
}

/* Page-jump + row-range status share a middle container that stays
   tight together while Prev / Next flex to the edges (bc-pager itself
   is `justify-content: space-between`). */
.bc-pager-center {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--eiti-ink);
    font-size: var(--eiti-text-sm);
}

.bc-pager-jump {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Input width is set inline by JS to match the digit count of the
   current totalPages — the number here is a starting hint (single
   digit) that renderPager immediately overrides. */
.bc-pager-input {
    width: calc(1ch + 1.4rem);
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--eiti-border);
    border-radius: var(--eiti-radius-sm);
    font-family: inherit;
    font-size: var(--eiti-text-sm);
    color: var(--eiti-navy);
    text-align: right;
    background: var(--eiti-surface);
    -moz-appearance: textfield;
    appearance: textfield;
}
/* Remove the native number-input spinner. The box is only wide enough for the
   page digits; on WebKit the up/down arrows otherwise fill it and hide the
   right-aligned value (Firefox is covered by appearance: textfield above).
   `margin: 0` alone does not remove them — the appearance reset does. */
.bc-pager-input::-webkit-outer-spin-button,
.bc-pager-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.bc-pager-input:focus {
    outline: none;
    border-color: var(--eiti-amber);
    box-shadow: 0 0 0 2px rgba(246, 167, 10, 0.25);
}

/* Narrow screens: the single flex row squeezes the middle so "Showing rows
   … of …" wraps to several lines between the buttons. Drop to two rows —
   Prev / Next keep the edges (as on desktop), and the page-jump + row-range
   move to a full-width centred row below, where they sit on one line. */
@media (max-width: 640px) {
    .bc-pager {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'prev next'
            'meta meta';
        row-gap: var(--eiti-space-3);
        column-gap: var(--eiti-space-3);
    }
    .bc-pager > .bc-pager-btn:first-child {
        grid-area: prev;
        justify-self: start;
    }
    .bc-pager > .bc-pager-btn:last-child {
        grid-area: next;
        justify-self: end;
    }
    .bc-pager-center {
        grid-area: meta;
        justify-content: center;
        flex-wrap: wrap; /* on the very narrowest phones the two parts wrap, still centred */
        row-gap: 0.15rem;
    }
}

/* Responsive */
@media (max-width: 968px) {
    .bc-indicator-tabs {
        flex-direction: column;
        border-bottom: none;
    }

    .bc-indicator-tab {
        border-radius: 4px;
        margin-right: 0;
        margin-bottom: 4px;
        border-bottom: 1px solid #ddd;
    }

    .bc-indicator-tab.bc-indicator-tab--active {
        border-bottom: 3px solid var(--eiti-amber);
    }
}

@media (max-width: 1368px) {
    .bc-filters {
        flex-direction: column;
    }

    /* Each filter group stretches to full column width. flex-basis:auto
     cancels the row-mode 200px basis so it doesn't act as a 200px min-height
     when the main axis becomes vertical. */
    .bc-filter-group {
        width: 100%;
        flex-basis: auto;
    }

    /* Remove fixed min-width so inputs can shrink below 300px */
    .bc-filter-input,
    .bc-filter-select {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Timeframe: keep the two year inputs side-by-side but let them shrink */
    .bc-timeframe {
        width: 100%;
    }

    .bc-timeframe .bc-filter-input {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    /* Allow the annotation to wrap instead of overflowing */
}

/* Datasette-native form submit buttons (Format SQL / RUN SQL / built-in
   Apply-filter). Overrides datasette's default styling to align with the
   button system. Distinguishes: `.button-run` (primary — main action) vs
   any other `input[type=submit]` in .core (secondary utility). */
.core input[type='submit'],
.core button[type='submit'],
.core .button,
input[type='submit'].button {
    font-family: var(--eiti-font);
    font-size: var(--eiti-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--eiti-label-tracking);
    color: var(--eiti-navy);
    background: var(--eiti-surface);
    border: 1px solid var(--eiti-navy);
    border-radius: var(--eiti-radius);
    padding: var(--eiti-space-2) var(--eiti-space-4);
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.core input[type='submit']:hover,
.core button[type='submit']:hover,
.core .button:hover,
input[type='submit'].button:hover {
    background: var(--eiti-amber);
    border-color: var(--eiti-amber);
    color: var(--eiti-navy);
}

/* Primary variant — datasette marks the main run/submit button */

/* Export bar — secondary-tier per button system */
.bc-export-bar {
    display: flex;
    justify-content: flex-start;
    gap: var(--eiti-space-2);
    margin-bottom: var(--eiti-space-4);
}

/* Sized to match the datasette table-page export buttons (.export-btn
   in body.table .table-toolbar): 32px tall, 12px uppercase text,
   subtle grey border with navy text — a slim ghost pill instead of
   the earlier tall solid-outline pill. */
.bc-export-btn {
    height: 32px;
    padding: 0 var(--eiti-space-4);
    font-family: var(--eiti-font);
    font-size: var(--eiti-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--eiti-label-tracking);
    color: var(--eiti-navy);
    background: var(--eiti-surface);
    border: 1px solid var(--eiti-border);
    border-radius: var(--eiti-radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
/* The button's own display: flex outranks the UA's [hidden] rule, so
   the attribute needs an explicit rule to actually hide it — same
   pattern as .bc-chart-tooltip[hidden]. Export chart is hidden on
   tabs without a chart. */
.bc-export-btn[hidden] {
    display: none;
}
/* Busy while an export runs (runExport): aria-disabled keeps the button
   focused, so it is dimmed and inert here instead of natively disabled. */
.bc-export-btn[aria-disabled='true'] {
    opacity: 0.6;
    cursor: progress;
}

.bc-export-btn:hover {
    background: var(--eiti-navy);
    border-color: var(--eiti-navy);
    color: #ffffff;
}

/* Country dropdown + "Exclude delisted" toggle share a single row so
   the toggle doesn't consume its own vertical band; the dropdown flexes
   to fill remaining width. `width: auto` overrides the base
   .bc-filter-select width:100% that would otherwise push the toggle
   onto its own line. */
.bc-country-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bc-country-row .bc-filter-select {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}
/* The trigger fills its wrapper; the wrapper carries the flex share. */
.bc-country-row .bc-ms-trigger {
    width: 100%;
    flex: none;
}
@media (max-width: 600px) {
    .bc-country-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .bc-country-row .bc-filter-select {
        width: 100%;
    }
}

/* iOS-style switch. Native checkbox is visually hidden but keeps
   keyboard focus + form semantics. */
.bc-exclude-delisted {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #444;
    cursor: pointer;
    user-select: none;
}
.bc-exclude-delisted--hidden {
    display: none;
}
.bc-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.bc-toggle-track {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: #ccc;
    border-radius: 9px;
    transition: background 0.15s ease-in-out;
    flex-shrink: 0;
}
.bc-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease-in-out;
}
.bc-toggle-input:checked + .bc-toggle-track {
    background: #1f77b4;
}
.bc-toggle-input:checked + .bc-toggle-track::after {
    transform: translateX(14px);
}
.bc-toggle-input:focus-visible + .bc-toggle-track {
    outline: 2px solid #1f77b4;
    outline-offset: 2px;
}

/* Disabled option in country dropdowns doubles as visual separator
   between current and delisted members. Different browsers render
   disabled options slightly differently; letter-spacing thins the
   em-dashes visually. */
.bc-filter-select option:disabled {
    color: #999;
    letter-spacing: 1px;
}

/* Sortable table headers */
.bc-th-sortable {
    cursor: pointer;
    user-select: none;
}
.bc-th-sortable:hover {
    text-decoration: underline;
}
/* Keyboard focus indicator — the header is focusable (tabindex=0) and
   sortable via Enter/Space, so it needs a visible focus ring. */
.bc-th-sortable:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
    text-decoration: underline;
}
.bc-sort-hint {
    font-size: 13px;
    color: #666;
    margin: 8px 0 4px;
}

/* Page subtitle — plain-language framing of the active tab. Wrapped
   in a soft card with a small "Context" eyebrow so it reads as
   intentional context, not a floating paragraph. */
.bc-page-subtitle-wrap {
    border: 1px solid #e5e5e5;
    background: #fafafa;
    border-radius: 8px;
    padding: 14px 18px;
    margin: 12px 0 20px;
    /* max-width: 78ch; */
    max-width: 100%;
}
.bc-page-subtitle-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #132856;
    opacity: 0.75;
    margin-bottom: 4px;
}
.bc-page-subtitle {
    font-size: 15px;
    line-height: 1.55;
    color: #333;
    margin: 0;
}
.bc-page-subtitle:empty {
    display: none;
}
/* Multi-block variant: metadata.yaml description_html for the focus
   views reuses the wrap + eyebrow + subtitle classes around several
   paragraphs and a field list, so give block children the same rhythm
   the single-<p> subtitle has. */
.bc-page-subtitle p,
.bc-page-subtitle ul {
    margin: 0 0 0.7em;
}
.bc-page-subtitle > :last-child {
    margin-bottom: 0;
}
.bc-page-subtitle ul {
    padding-left: 1.3em;
}
.bc-page-subtitle li {
    margin: 0 0 0.3em;
}
.bc-page-subtitle code {
    font-size: 0.92em;
    background: #f0f0f0;
    padding: 0 4px;
    border-radius: 3px;
}
.metadata-description .bc-page-subtitle-wrap {
    margin-top: 0;
}
/* Toggle variant: <details class="bc-page-subtitle-wrap bc-page-subtitle-toggle">
   with the eyebrow as <summary>. Collapsed by default; the summary line
   is the only visible part until opened. */
.bc-page-subtitle-toggle > summary {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.bc-page-subtitle-toggle > summary::-webkit-details-marker {
    display: none;
}
.bc-page-subtitle-toggle > summary::before {
    content: '▸';
    font-size: 12px;
    transition: transform 0.15s ease;
}
.bc-page-subtitle-toggle[open] > summary::before {
    transform: rotate(90deg);
}
.bc-page-subtitle-toggle[open] > summary {
    margin-bottom: 8px;
}
.bc-page-subtitle-toggle > summary:hover {
    opacity: 1;
}
.bc-page-subtitle-toggle > summary:focus-visible {
    outline: 2px solid var(--eiti-amber);
    outline-offset: 2px;
    border-radius: 3px;
}
.bc-page-subtitle-hint {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    font-size: 13px;
    color: #555;
}
/* Field glossary inside the subtitle panel: <dl class="bc-field-list">
   as a two-column name/definition grid with hairline row separators.
   A <dl> rather than a <table> so the site's bare table/td/th/tr rules
   (borders, zebra rows, navy header) stay out of the info card; the
   lines are drawn on dt/dd so each grid row reads as one ruled row. */
.bc-field-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0;
    margin: 0 0 0.7em;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #fff;
}
.bc-field-list dt,
.bc-field-list dd {
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #e5e5e5;
}
.bc-field-list dt:nth-last-of-type(1),
.bc-field-list dd:nth-last-of-type(1) {
    border-bottom: 0;
}
.bc-field-list dt {
    background: #f3f4f7;
    border-right: 1px solid #e5e5e5;
}
.bc-field-list dt code {
    white-space: nowrap;
    background: none;
    padding: 0;
    font-weight: 600;
    color: var(--eiti-navy);
}
@media (max-width: 600px) {
    .bc-field-list {
        grid-template-columns: 1fr;
    }
    .bc-field-list dt {
        border-right: 0;
        border-bottom: 0;
        padding-bottom: 2px;
    }
    .bc-field-list dd {
        margin-bottom: 8px;
    }
}
.bc-page-subtitle-wrap:has(.bc-page-subtitle:empty) {
    display: none;
}

/* Stat strip: reporting-years card + countries card side by side
   above the chart. Reporting years is filter-scoped; Countries is
   tab-scoped ("Data from N of 55 EITI members"). */
.bc-stat-strip {
    display: flex;
    gap: 12px;
    margin: 12px 0;
    flex-wrap: wrap;
}
.bc-stat-card {
    flex: 1 1 240px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px 16px;
    background: #fafafa;
}
.bc-stat-card-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
}
.bc-stat-card-value {
    font-size: 14px;
    color: #333;
}

/* Mobile pass on the indicator tabs. Two-line labels (<br>) collapse
   into one line on narrow widths; surrounding spaces in the markup
   keep the words separated. */
@media (max-width: 600px) {
    .bc-indicator-tabs {
        gap: 4px;
    }
    .bc-indicator-tab {
        padding: 8px;
        font-size: 14px;
        line-height: 1.2;
    }
    .bc-indicator-tab br {
        display: none;
    }
}

/* URL cells on the SOE tab (by-company): force-wrap so an unbreakable
   token (a URL-encoded Cyrillic filename ~500 chars, or a malformed
   URL like `ttps://…` that URL() can't parse) doesn't blow up the
   column and squeeze Company name into per-character wraps. */
.bc-url-cell {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 320px;
}

/* Country name linked to its EITI country page (opens in a new tab), used
   in the result tables on every explore page and on the Datasette table
   pages. A navy underline (not amber) + the external-link icon mark it as
   an outbound link while keeping the cell text colour — navy clears the
   3:1 non-text-contrast minimum against the white/striped row backgrounds,
   which the amber accent (~2:1 on white) does not. */
/* The :link/:visited twins are load-bearing: Datasette's own app.css sets
   `a:link`/`a:visited { color: #276890 }` (0,1,1), which outranks a bare
   `.bc-country-link` (0,1,0) and would otherwise force both the text colour
   and — via the `text-decoration` shorthand — the underline to that blue.
   Matching :link/:visited here (0,2,0) wins, keeping the cell text colour
   and the navy underline. */
.bc-country-link,
.bc-country-link:link,
.bc-country-link:visited {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--eiti-navy);
    text-underline-offset: 2px;
    white-space: nowrap;
}
.bc-country-link:hover {
    text-decoration-thickness: 2px;
}
.bc-extlink-icon {
    display: inline-block;
    vertical-align: -1px;
    opacity: 0.55;
    margin-left: 1px;
}

/* Screen-reader-only: visually hidden, still announced by assistive tech. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== HOME / INDEX-INDEX PAGE ===== */

/* Hero variant of the subtitle role — white text over navy hero.
   Bumped one step up from body-subtitle (18px vs 16px) so it holds its own
   at hero scale without competing with the h1. */
.hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    font-weight: 400;
    max-width: 65ch;
    margin-top: var(--eiti-space-3);
    line-height: var(--eiti-line-normal);
}

.home-intro {
    max-width: 100%;
    line-height: 1.75;
    margin-bottom: 3.5rem;
}

.home-intro p + p {
    margin-top: 0.9rem;
}

.home-intro a {
    color: var(--eiti-navy);
    text-decoration: underline;
    text-decoration-color: var(--eiti-amber);
    text-underline-offset: 3px;
}

.home-intro a:hover {
    color: var(--eiti-amber);
}

/* Home card sections — "Recently updated" and "Explore the database"
   share one shell so they stack, space and reflow identically: the
   section owns vertical rhythm and the heading gap, the grid owns the
   column count per breakpoint (4 → 2 → 1; the three-up variant skips
   the 2-up step, since 2+1 rows read as lopsided). Card internals live in
   templates/index.html; only the shell is shared here. */
.home-cards-section {
    margin-top: 1rem;
    margin-bottom: 5rem;
}

.home-cards-section:last-child {
    padding-bottom: 3rem;
}

.home-cards-heading {
    margin-bottom: 1.25rem;
}

.home-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Three-up variant — "Recently updated" renders three cards. */
.home-cards--3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 968px) {
    .home-cards {
        grid-template-columns: 1fr 1fr;
    }
    /* Three cards can't split 2+2 — go straight to full-width rows. */
    .home-cards--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .home-cards-section {
        margin-bottom: 3rem;
    }
    .home-cards-section:last-child {
        padding-bottom: 2rem;
    }
    .home-cards {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* ---------------------------------------------------------------- */
/* DATASETTE TABLE PAGE — /eiti_database/<table-or-view>.
   Scoped to body.table so it doesn't touch the db-index page or the
   custom explore pages. Rules pair with the reshaping pass in
   scripts.js (refineDatasetteTablePage), which reparents the
   scattered filter form / SQL link / suggested facets / export links
   into a framed query panel + table toolbar. All rules degrade
   cleanly if the JS pass didn't run — the loose stack still reads. */

/* Breadcrumb eyebrow — style the datasette-emitted <p class="crumbs">
   as a small-caps navy label instead of the default 20px blue text. */
body.table .crumbs {
    font-size: var(--eiti-text-xs);
    font-weight: 600;
    letter-spacing: var(--eiti-label-tracking);
    text-transform: uppercase;
    color: var(--eiti-navy);
    margin: 0 0 var(--eiti-space-3) 0;
    opacity: 1;
}
body.table .crumbs a {
    color: var(--eiti-navy);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
body.table .crumbs a:hover {
    border-bottom-color: var(--eiti-amber);
}

/* Page header — kill the inline `border-color: #ceb936` amber left
   rule datasette adds. Title + subtitle-scale rowcount sit as a clean
   block. */
body.table .page-header {
    border: none !important;
    padding: 0;
    margin-bottom: var(--eiti-space-6);
}
body.table .page-header h1 {
    font-size: clamp(var(--eiti-text-2xl), 4vw, 48px);
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: var(--eiti-space-2);
}
body.table .page-header p {
    font-size: var(--eiti-text-base);
    color: var(--eiti-ink);
    opacity: 0.75;
    margin: 0;
}
body.table .page-header .count-sql {
    font-size: var(--eiti-text-sm);
    font-weight: 500;
    color: var(--eiti-navy);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-left: var(--eiti-space-2);
}
body.table .page-header .count-sql:hover {
    border-bottom-color: var(--eiti-amber);
}

/* Query panel — one framed card wrapping the filter form + suggested
   facets, with an eyebrow-labelled head bar carrying the SQL link. */
body.table .query-panel {
    background: var(--eiti-surface);
    border: 1px solid var(--eiti-border-subtle);
    border-radius: var(--eiti-radius);
    margin-bottom: var(--eiti-space-6);
    overflow: hidden;
}
body.table .query-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--eiti-space-4) var(--eiti-space-5);
    border-bottom: 1px solid var(--eiti-border-subtle);
}
body.table .query-panel-head .eyebrow {
    font-size: var(--eiti-text-xs);
    font-weight: 600;
    letter-spacing: var(--eiti-label-tracking);
    text-transform: uppercase;
    color: var(--eiti-navy);
}
body.table .query-panel-head .sql-link {
    font-size: var(--eiti-text-sm);
    font-weight: 600;
    color: var(--eiti-navy);
    text-decoration: none;
    border-bottom: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.table .query-panel-head .sql-link:hover {
    color: var(--eiti-amber);
}
body.table .query-panel form.filters,
body.table .query-panel form.core {
    padding: var(--eiti-space-5);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--eiti-space-3);
}
/* First filter-row lays out column / operator / value / APPLY inline.
   The APPLY submit input is relocated into this row by scripts.js. */
body.table .query-panel .filter-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1.5fr auto;
    gap: var(--eiti-space-3);
    align-items: center;
    margin: 0;
}
body.table .query-panel .filter-row .select-wrapper,
body.table .query-panel .filter-row select,
body.table .query-panel .filter-row input {
    min-width: 0;
    width: 100%;
}
/* Second filter-row carries datasette's small-screen-only sort dropdown
   + descending checkbox. Column-click sort (scripts.js on the explore
   pages) and the URL _sort param cover this on desktop, so hide the
   row above the mobile breakpoint. */
@media (min-width: 601px) {
    body.table .query-panel .filter-row--secondary {
        display: none;
    }
}
@media (max-width: 600px) {
    body.table .query-panel .filter-row {
        grid-template-columns: 1fr;
    }
}
body.table .query-panel p.suggested-facets {
    padding: 0 var(--eiti-space-5) var(--eiti-space-5);
    margin: 0;
}

/* Suggested facets as chips — each anchor becomes a bordered pill with
   a subtle `+` prefix to read as an add-a-filter affordance. The label
   is inserted as a real DOM node by scripts.js (not a ::before pseudo)
   so it does not fight the older `.suggested-facets::before` rule
   above that positions its label absolutely. */
body.table .query-panel p.suggested-facets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eiti-space-2);
    font-size: var(--eiti-text-xs);
    position: static;
}
body.table .query-panel p.suggested-facets::before {
    content: none;
}
body.table .query-panel p.suggested-facets .facet-label {
    font-size: var(--eiti-text-xs);
    font-weight: 600;
    letter-spacing: var(--eiti-label-tracking);
    text-transform: uppercase;
    color: var(--eiti-ink);
    opacity: 0.6;
    margin-right: var(--eiti-space-2);
}

/* Facet drill-down / active-filter panel between the query panel and
   the data table. Datasette emits one .facet-info per active facet
   (either as a value-count breakdown or as an applied-filter clear
   affordance). Style each as its own bordered card, grid-lay them
   into columns so multiple facets sit side by side on desktop, and
   render the value+count list as a tabular tight-bullets strip. */
body.table .facet-results {
    margin: 0 0 var(--eiti-space-6);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--eiti-space-3);
}
body.table .facet-results::before {
    content: none;
}
body.table .facet-info {
    background: var(--eiti-surface);
    border: 1px solid var(--eiti-border-subtle);
    border-radius: var(--eiti-radius);
    padding: var(--eiti-space-4) var(--eiti-space-5);
}
body.table .facet-info .facet-info-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eiti-space-2);
    margin: 0 0 var(--eiti-space-3);
    padding-bottom: var(--eiti-space-3);
    border-bottom: 1px solid var(--eiti-border-subtle);
    font-size: var(--eiti-text-sm);
}
body.table .facet-info .facet-info-name strong {
    color: var(--eiti-navy);
    font-weight: 600;
    font-size: var(--eiti-text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--eiti-space-2);
}
body.table .facet-info .facet-info-total {
    font-size: var(--eiti-text-xs);
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--eiti-radius-pill);
    background: var(--eiti-bg);
    color: var(--eiti-ink);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}
body.table .facet-info .cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--eiti-ink);
    opacity: 0.55;
    text-decoration: none;
    font-size: 12px;
    border-bottom: none;
    transition: all 0.15s;
}
body.table .facet-info .cross:hover {
    background: var(--eiti-navy);
    color: #ffffff;
    opacity: 1;
}
body.table .facet-info ul.tight-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--eiti-text-sm);
}
body.table .facet-info ul.tight-bullets li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eiti-space-3);
    padding: 4px 0;
    color: var(--eiti-ink);
    opacity: 1;
    font-variant-numeric: tabular-nums;
}
body.table .facet-info ul.tight-bullets li::before {
    content: none;
}
body.table .facet-info ul.tight-bullets li a {
    color: var(--eiti-navy);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    margin-left: 0;
    transition: border-color 0.15s;
}
body.table .facet-info ul.tight-bullets li a:hover {
    border-bottom-color: var(--eiti-amber);
}
body.table .facet-info ul.tight-bullets li a:visited {
    color: var(--eiti-navy);
}
body.table .facet-info ul.tight-bullets li.facet-truncated {
    justify-content: center;
    margin-top: var(--eiti-space-2);
    padding-top: var(--eiti-space-2);
    border-top: 1px solid var(--eiti-border-subtle);
}
body.table .facet-info ul.tight-bullets li.facet-truncated a {
    font-size: var(--eiti-text-xs);
    font-weight: 600;
    letter-spacing: var(--eiti-label-tracking);
    text-transform: uppercase;
    padding: 6px var(--eiti-space-3);
    border: 1px solid var(--eiti-border);
    border-radius: var(--eiti-radius);
    opacity: 0.75;
}
body.table .facet-info ul.tight-bullets li.facet-truncated a:hover {
    background: var(--eiti-navy);
    color: #ffffff;
    border-color: var(--eiti-navy);
    border-bottom-color: var(--eiti-navy);
    opacity: 1;
}
body.table .query-panel p.suggested-facets a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px var(--eiti-space-3);
    font-size: var(--eiti-text-xs);
    font-weight: 500;
    color: var(--eiti-navy);
    background: var(--eiti-surface);
    border: 1px solid var(--eiti-border);
    border-radius: var(--eiti-radius-pill);
    text-decoration: none;
    border-bottom: 1px solid var(--eiti-border);
    transition: all 0.15s;
}
body.table .query-panel p.suggested-facets a::before {
    content: '+';
    opacity: 0.6;
    font-weight: 700;
}
/* Kill the trailing ", " datasette's prose-list styling adds via
   ::after — chip strip uses flex gap, not commas. */
body.table .query-panel p.suggested-facets a::after {
    content: none;
}
body.table .query-panel p.suggested-facets a:hover {
    background: var(--eiti-navy);
    color: #ffffff;
    border-color: var(--eiti-navy);
    border-bottom-color: var(--eiti-navy);
}

/* Table toolbar — rowcount + count-all left, export buttons right,
   sitting on a subtle bottom rule just above the data table. */
body.table .table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eiti-space-4);
    padding: var(--eiti-space-3) 0;
    border-bottom: 1px solid var(--eiti-border-subtle);
    margin-bottom: 0;
    flex-wrap: wrap;
}
body.table .table-toolbar-left,
body.table .table-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--eiti-space-3);
    flex-wrap: wrap;
}
body.table .table-toolbar .rowcount {
    font-size: var(--eiti-text-sm);
    color: var(--eiti-ink);
}
body.table .table-toolbar .rowcount strong {
    font-weight: 700;
    color: var(--eiti-navy);
    font-variant-numeric: tabular-nums;
}
body.table .table-toolbar .count-all-link {
    font-size: var(--eiti-text-sm);
    font-weight: 500;
    color: var(--eiti-navy);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
body.table .table-toolbar .count-all-link:hover {
    border-bottom-color: var(--eiti-amber);
}
body.table .table-toolbar .toolbar-label {
    font-size: var(--eiti-text-xs);
    font-weight: 600;
    letter-spacing: var(--eiti-label-tracking);
    text-transform: uppercase;
    color: var(--eiti-ink);
    opacity: 0.6;
    margin-right: var(--eiti-space-2);
}
body.table .table-toolbar .export-btn {
    height: 32px;
    padding: 0 var(--eiti-space-4);
    font-size: var(--eiti-text-xs);
    font-weight: 600;
    letter-spacing: var(--eiti-label-tracking);
    text-transform: uppercase;
    color: var(--eiti-navy);
    background: var(--eiti-surface);
    border: 1px solid var(--eiti-border);
    border-radius: var(--eiti-radius);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
body.table .table-toolbar .export-btn:hover {
    background: var(--eiti-navy);
    color: #ffffff;
    border-color: var(--eiti-navy);
}

/* Column type badge in every table-page header cell. Uses the existing
   data-column-type attribute datasette emits — no template edits.
   Base rule sets the visual container; specific type rules below fill
   the content. On view-derived columns datasette sometimes emits an
   empty data-column-type — suppress the badge entirely in that case
   (an empty bordered box would look like a broken checkbox).
   Scoped to min-width: 800px: datasette switches to a stacked mobile
   layout (display: block) below that width and uses ::before on every
   <td> to inject the field-name label; letting our table rules apply
   there would clobber the mobile labels. */
@media (min-width: 641px) {
    body.table table.rows-and-columns th[data-column-type]::after {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        margin-left: 6px;
        font-size: 10px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 3px;
        vertical-align: middle;
        content: '';
    }
    body.table table.rows-and-columns th[data-column-type='']::after {
        content: none;
    }
    body.table table.rows-and-columns th[data-column-type='text']::after,
    body.table table.rows-and-columns th[data-column-type='str']::after {
        content: 'T';
    }
    body.table table.rows-and-columns th[data-column-type='int']::after,
    body.table table.rows-and-columns th[data-column-type='integer']::after,
    body.table table.rows-and-columns th[data-column-type='real']::after,
    body.table table.rows-and-columns th[data-column-type='float']::after,
    body.table table.rows-and-columns th[data-column-type='numeric']::after {
        content: '#';
    }
    body.table table.rows-and-columns th[data-column-type='date']::after {
        content: 'D';
    }
}

/* Kill the per-column dropdown-menu SVG icon datasette places in each
   header. Column config actions move to a single toolbar affordance;
   the icon in every header adds visual noise per column. */
body.table table.rows-and-columns th svg.dropdown-menu-icon,
body.table table.rows-and-columns th details {
    display: none !important;
}

/* Sort-link colors inside the navy header row. Without explicit
   overrides, an `:visited` link (any column the user has clicked to
   sort by) inherits the browser's default purple/green visited hue,
   which reads as a broken color against the navy background. Force
   white on every state. */
body.table table.rows-and-columns th a,
body.table table.rows-and-columns th a:link,
body.table table.rows-and-columns th a:visited,
body.table table.rows-and-columns th a:hover,
body.table table.rows-and-columns th a:active {
    color: #ffffff;
    text-decoration: none;
}
body.table table.rows-and-columns th a:hover {
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

/* Numeric right-align and empty-cell em-dash treatment. Scoped to the
   desktop table layout — datasette switches to stacked (display: block)
   below 800px, where right-align would put values in odd positions and
   the ::before em-dash would overwrite datasette's mobile field-name
   label injected via the same pseudo-element. */
@media (min-width: 641px) {
    body.table table.rows-and-columns td.type-int,
    body.table table.rows-and-columns td.type-float {
        text-align: right;
        font-weight: 500;
        color: var(--eiti-navy);
        font-variant-numeric: tabular-nums;
    }
    body.table table.rows-and-columns td.type-none {
        color: transparent;
        position: relative;
    }
    body.table table.rows-and-columns td.type-none::before {
        content: '—';
        color: var(--eiti-ink);
        opacity: 0.35;
        font-weight: 400;
    }
}

/* Pagination footer — style the loose `<p><a>Next page</a></p>`
   datasette emits below the table as a bordered ghost button. */
body.table .paginated-rows,
body.table .paginated {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--eiti-space-4) 0;
    border-top: 1px solid var(--eiti-border-subtle);
}
body.table .paginated-rows p,
body.table .paginated p {
    margin: 0;
    font-size: var(--eiti-text-sm);
}
body.table .paginated-rows a,
body.table .paginated a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px var(--eiti-space-4);
    font-size: var(--eiti-text-sm);
    font-weight: 500;
    color: var(--eiti-navy);
    background: transparent;
    border: 1px solid var(--eiti-border);
    border-radius: var(--eiti-radius);
    text-decoration: none;
    transition: all 0.15s;
}
body.table .paginated-rows a:hover,
body.table .paginated a:hover {
    background: var(--eiti-navy);
    color: #ffffff;
    border-color: var(--eiti-navy);
}

/* Advanced export — datasette emits this as an always-visible block at
   the very bottom of the page. scripts.js swaps the wrapper div for a
   <details> element with the H3 as the <summary>, so the whole block
   collapses by default and matches the framed-panel treatment of the
   query panel above the table. The toolbar "Advanced" button opens
   the details in place (see refineDatasetteTablePage). */
body.table details.advanced-export {
    margin-top: var(--eiti-space-4);
    background: var(--eiti-surface);
    border: 1px solid var(--eiti-border-subtle);
    border-radius: var(--eiti-radius);
    overflow: hidden;
}
body.table details.advanced-export > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--eiti-space-3) var(--eiti-space-5);
    font-size: var(--eiti-text-xs);
    font-weight: 600;
    letter-spacing: var(--eiti-label-tracking);
    text-transform: uppercase;
    color: var(--eiti-navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s;
}
body.table details.advanced-export > summary::-webkit-details-marker {
    display: none;
}
body.table details.advanced-export > summary::after {
    content: '▾';
    font-size: 12px;
    opacity: 0.5;
    transition: transform 0.15s;
}
body.table details.advanced-export[open] > summary {
    border-bottom: 1px solid var(--eiti-border-subtle);
}
body.table details.advanced-export[open] > summary::after {
    transform: rotate(180deg);
}
body.table details.advanced-export > .advanced-export-body {
    padding: var(--eiti-space-4) var(--eiti-space-5) var(--eiti-space-5);
    font-size: var(--eiti-text-sm);
    color: var(--eiti-ink);
}
body.table details.advanced-export .advanced-export-body p {
    margin: 0 0 var(--eiti-space-3);
}
body.table details.advanced-export input[type='submit'] {
    height: 36px;
    padding: 0 var(--eiti-space-5);
    font-size: var(--eiti-text-xs);
    font-weight: 600;
    letter-spacing: var(--eiti-label-tracking);
    text-transform: uppercase;
    background: var(--eiti-navy);
    color: #ffffff;
    border: 1px solid var(--eiti-navy);
    border-radius: var(--eiti-radius);
    cursor: pointer;
}
body.table details.advanced-export input[type='submit']:hover {
    background: var(--eiti-navy-2);
    border-color: var(--eiti-navy-2);
    color: #ffffff;
}

/* ----------------------------------------------------------------
   1.0a38 UPDATE: NEUTRALIZE UPSTREAM `.filters` STYLING.
   Since 1.0a37 datasette emits the table filter form as a single
   `class="core filters"` attribute (older versions emitted two
   separate class attributes and the browser kept only "core", which
   is the DOM this site's styling was built around — see the note in
   scripts.js refineDatasetteTablePage). app.css now ships a full
   "blue card" design keyed on .filters (container card, row grids,
   accent submit, styled search input, icon buttons). The rules below
   cancel every .filters-keyed declaration so the form renders as if
   it only carried class="core". All selectors require BOTH classes,
   so they go inert if upstream drops either one; `revert` restores
   the user-agent value, and where a lower-specificity author rule
   should win instead, its value is restated explicitly. The
   query-panel rules earlier in this file keep winning on
   specificity (body.table .query-panel ...). */

.core.filters {
    --filter-ink: initial;
    --filter-paper: initial;
    --filter-muted: initial;
    --filter-rule: initial;
    --filter-accent: initial;
    --filter-control-border: initial;
    --filter-control-height: initial;
    --filter-control-gap: initial;
    --filter-row-icon-size: initial;
    --filter-two-icon-space: initial;
    display: revert;
    grid-template-columns: revert;
    gap: revert;
    max-width: revert;
    margin: revert;
    padding: revert;
    border: revert;
    border-radius: revert;
    background: revert;
    color: revert;
    font-size: revert;
}

.core.filters .search-row {
    display: revert;
    grid-template-columns: revert;
    align-items: revert;
    gap: revert;
    box-sizing: revert;
    padding-right: revert;
    margin: 0 0 1.8em; /* baseline .search-row rule in app.css */
}

.core.filters .search-row label {
    /* baseline .search-row label rule in app.css */
    width: 80px;
    padding: 0 0.5em 0 0;
    color: revert;
    font-size: 1.2em;
    font-weight: revert;
}

.core.filters .filter-controls-row {
    display: revert;
    grid-template-columns: revert;
    gap: revert;
    align-items: revert;
    min-width: revert;
    width: revert;
    max-width: revert;
    box-sizing: revert;
}

.core.filters .filter-actions-row {
    display: revert;
    align-items: revert;
    justify-content: revert;
    flex-wrap: revert;
    gap: revert;
}

/* baseline .select-wrapper widths in app.css */
.core.filters .select-wrapper {
    width: 120px;
}
.core.filters .select-wrapper.filter-op {
    width: 80px;
}

@media (max-width: 968px) {
    /* re-assert this file's small-screen select rules, which the
     higher-specificity desktop resets above would otherwise beat */
    .core.filters .select-wrapper,
    .core.filters .select-wrapper.filter-op {
        width: 100%;
        margin-bottom: var(--eiti-space-3);
    }
}

/* APPLY submit: restore this file's EITI treatment over the app.css
   accent-blue .filters button */
.core.filters input[type='submit'] {
    border-color: var(--eiti-navy);
    background: var(--eiti-surface);
    border-radius: var(--eiti-radius);
    font-weight: 600;
    padding: 0 var(--eiti-space-5);
}
.core.filters input[type='submit']:hover {
    background: var(--eiti-amber);
    border-color: var(--eiti-amber);
    color: var(--eiti-navy);
}
.core.filters input[type='submit']:focus {
    background: var(--eiti-surface);
    border-color: var(--eiti-navy);
}

/* FTS search input: back to the plain baseline #_search rendering */
.core.filters #_search {
    box-sizing: revert;
    width: revert;
    height: revert;
    border: revert;
    border-radius: revert;
    background: revert;
    color: revert;
    padding: revert;
    font: revert;
    font-size: 16px; /* baseline #_search rule in app.css */
}
.core.filters #_search:focus {
    border-color: revert;
    box-shadow: revert;
    outline: revert;
}

/* add/remove filter-row icon buttons injected by datasette table.js:
   drop the card styling, keep them as plain user-agent buttons. The
   inline SVGs carry width/height attributes, so unsizing is safe. */
.core.filters button.filter-row-icon {
    display: revert;
    align-items: revert;
    justify-content: revert;
    box-sizing: revert;
    width: revert;
    height: revert;
    min-width: revert;
    padding: revert;
    border: revert;
    border-radius: revert;
    background: revert;
    color: revert;
    font-family: revert;
    font-size: revert;
    font-weight: revert;
    line-height: revert;
}
.core.filters button.filter-row-icon[hidden] {
    display: none;
}
.core.filters button.filter-row-icon:focus-visible {
    outline: revert;
    outline-offset: revert;
}
.core.filters .filter-row-remove-icon,
.core.filters .filter-row-add-icon {
    display: revert;
    height: revert;
    width: revert;
}
.core.filters button.filter-row-remove:hover,
.core.filters button.filter-row-remove:focus,
.core.filters button.filter-row-add:hover,
.core.filters button.filter-row-add:focus {
    border-color: revert;
    background: revert;
    color: revert;
}
.core.filters button.filter-row-add:focus-visible svg {
    color: revert;
    stroke: revert;
}