/* --- */
/* 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("fonts/metropolis/metropolis-light.otf");
  font-weight: 300;
}

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

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

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

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

.font-metropolis {
  font-family: "Metropolis", sans-serif;
}


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; }

/* Subtitle role — 1–2 sentences of context under a heading. Constrained to
   ~65ch for comfortable reading, aligned with body color/weight. */
.eiti-subtitle {
  font-size: var(--eiti-text-base);
  font-weight: 400;
  line-height: var(--eiti-line-normal);
  color: var(--eiti-ink);
  max-width: 65ch;
  margin-top: var(--eiti-space-3);
}

/* Eyebrow — small caps label above a heading or section */
.eiti-eyebrow {
  font-size: var(--eiti-text-xs);
  font-weight: 600;
  letter-spacing: var(--eiti-label-tracking);
  text-transform: uppercase;
  color: var(--eiti-navy);
}

/* Caption — small footnote-style text */
.eiti-caption {
  font-size: var(--eiti-text-sm);
  color: var(--eiti-ink);
  opacity: 0.75;
}


/* --- */
/* 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 — reserved for future facet */
  border-color: #5c3a5e;
}
.bc-chart-tag--metric {
  background: #7A4E7C;              /* plum — avoids amber-family collision */
  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: top;
  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) {

  .footerRightNav {
    display: flex;
    justify-content: end;
    align-items: end;
    flex-direction: column;
    gap: 0.1em;
    margin-right: 1.5em;
    /* Stack navigation links vertically */
  }

  .footerRightNav a:link {
    text-align: left;
    padding-bottom: 1em;
  }
}

/* --- */
/* 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('/static/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;
}



.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;
}

@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 */
  }
}

  /* .ddmain-menu {
    display: flex;
  } */

/* .ddmain-menu {
  display: none;
  flex-direction: column;
  cursor: pointer;
  align-items: end;
} */

/* .ddmain-caret {
  width: 0;
  height: 0;
  border-left: 0.65em solid transparent;
  border-right: 0.65em solid transparent;
  border-top: 1.1em solid var(--eiti-amber);
  margin-top: 0.5em;
} */

/* Breadcrumb Styles */
/* .crumbs {
  margin-top: var(--eiti-space-3);
}

.crumbs a {
  color: #fff;
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
} */




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

/* Button system — 3 tiers, all share radius/padding/font/transition tokens.
   Legacy class names are kept so template markup does not change. */

.eiti-btn,
.explore-button,
.guide-button,
.index-full-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-base);
  line-height: 1;
  padding: var(--eiti-space-3) var(--eiti-space-5);
  border-radius: var(--eiti-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

/* Primary — solid navy fill (main brand action) */
.eiti-btn--primary,
.explore-button {
  background: var(--eiti-navy);
  color: #ffffff !important;
  border-color: var(--eiti-navy);
}
.eiti-btn--primary:hover,
.explore-button:hover {
  background: var(--eiti-amber) !important;
  border-color: var(--eiti-amber);
  color: var(--eiti-navy) !important;
}

/* Secondary — outlined, uppercase for utility (Download / Export / Run) */
.eiti-btn--secondary,
.guide-button {
  background: var(--eiti-surface);
  color: var(--eiti-navy);
  border-color: var(--eiti-navy);
  text-transform: uppercase;
  letter-spacing: var(--eiti-label-tracking);
  font-size: var(--eiti-text-sm);
}
.eiti-btn--secondary:hover,
.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;
}

/* Ghost — text + amber accent on hover, transparent bg */
.eiti-btn--ghost,
.index-full-button {
  background: transparent;
  color: var(--eiti-navy);
  border-color: transparent;
  padding-left: var(--eiti-space-2);
  padding-right: var(--eiti-space-2);
}
.eiti-btn--ghost:hover,
.index-full-button:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--eiti-amber);
  text-underline-offset: 6px;
}
.index-full-button:link,
.index-full-button:visited {
  color: var(--eiti-navy);
  text-decoration: none;
}

/* Icon decorations — inline SVG rendered via ::before/::after.
   Kept per-class because each carries a different SVG glyph. */
.index-full-button::before {
  content: '';
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNNDM4LjYgMjMzLjRsLTE3Ni0xNzZDMjU0LjIgNTIuMyAyNDUuMSA0OCAyMzUuNSA0OGMtOS42IDAtMTguNyA0LjMtMjQuNiAxMi0xMS41IDEzLjYtOS42IDMzLjcgNC4xIDQ1LjNMMzIyLjcgMjA4SDI0Yy0xMy4zIDAtMjQgMTAuNy0yNCAyM3Y0OGMwIDEzLjMgMTAuNyAyNCAyNCAyNGgyOTguN2wtMTA3LjcgMTAyLjdjLTEzLjcgMTMuMS0xNS42IDMzLjItNC4xIDQ1LjMgMTEuNSAxMy42IDMxLjYgMTUuNSA0NS4zIDQuMWwxNzYtMTc2YzQuOS00LjcgNy43LTExIDcuNy0xNy42cy0yLjgtMTIuOS03LjctMTcuNnoiLz48L3N2Zz4=');
  background-size: 0.8em 0.8em;
  background-repeat: no-repeat;
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  filter: invert(43%) sepia(89%) saturate(1234%) hue-rotate(15deg) brightness(102%);
}
.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." */
.pivot-cell--empty,
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);
}

.pivot-cell--zero,
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.cell-state--predates,
td.bc-pivot-no-data-col {
  background: rgba(17, 26, 53, 0.02);
}
td.cell-state--predates::before { content: ""; }

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 */
}

.card-body {
  color: #ffffff;
  /* White text color */
}

.table-description {
  font-size: var(--eiti-text-sm);
  margin-top: var(--eiti-space-2);
}


.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);
}

/* Compact grid for many tables */
.compact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: var(--eiti-space-2);
}

/* Compact cards */
.compact-card {
  aspect-ratio: auto;
  padding: var(--eiti-space-3) var(--eiti-space-4);
  min-height: 70px;
}

.compact-card .card-header a {
  font-size: var(--eiti-text-sm);
  font-weight: 600;
}

.compact-card .table-description {
  font-size: var(--eiti-text-xs);
  margin-top: var(--eiti-space-2);
}

.compact-card::after {
  transform: scale(0.7);
  bottom: 8px;
  right: 14px;
}


@media (max-width: 1200px) {

  /* Medium screens */
  .db-table-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    /* 2 cards per row */
  }
  .compact-grid {
    grid-template-columns: repeat(3, minmax(160px, 1fr));
  }
}

@media (max-width: 768px) {

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

  .compact-grid {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: var(--eiti-space-2);
  }

  .db-table-card::after {
    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMjI1IDEuNzEyNUw4LjA1IDAuODg3NDk5QzguNDI1IDAuNTQ5OTk5IDguOTg3NSAwLjU0OTk5OSA5LjMyNSAwLjg4NzQ5OUwxNi42Mzc1IDguMTYyNUMxNi45NzUgOC41Mzc1IDE2Ljk3NSA5LjEgMTYuNjM3NSA5LjQzNzVMOS4zMjUgMTYuNzVDOC45ODc1IDE3LjA4NzUgOC40MjUgMTcuMDg3NSA4LjA1IDE2Ljc1TDcuMjI1IDE1LjkyNUM2Ljg4NzUgMTUuNTUgNi44ODc1IDE0Ljk4NzUgNy4yMjUgMTQuNjEyNUwxMS43NjI1IDEwLjNIMC45OTk5OTlDMC40NzQ5OTkgMTAuMyAwLjA5OTk5OTQgOS45MjUgMC4wOTk5OTk0IDkuNFY4LjJDMC4wOTk5OTk0IDcuNzEyNSAwLjQ3NDk5OSA3LjMgMC45OTk5OTkgNy4zSDExLjc2MjVMNy4yMjUgMy4wMjVDNi44ODc1IDIuNjUgNi44NSAyLjA4NzUgNy4yMjUgMS43MTI1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
    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;
  }

  .table-description {
    font-size: 12px;
  }

  .compact-card .card-header a {
    font-size: 12px;
  }

  .compact-card .table-description {
    font-size: 10px;
  }
}

/* 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 fill="%23132856" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-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 */
.row-count,
.filter-row-header,
.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="],
.view-and-edit-sql a {
  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,
.database-and-table a,
.crumbs a {
  color: var(--eiti-navy);
  text-decoration: none;
}
.page-header a:hover,
.database-and-table 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 */
.row-count a,
.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;
}

/* a:visited {
  color: var(--eiti-amber);
} */

/* a:hover {
  color: var(--eiti-amber);
} */

/* a:active {
  color: var(--eiti-amber);
} */

/* BUTTONS */
/* .index-full-button and .guide-button styles now live in the
   "Button system" block above (DS UI section). */

.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('/static/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: 1.0rem;
}

/* --- */
/* 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-info-wrap {
  margin-bottom: 1rem;
}

.bc-info-body {
  margin-top: 0.5rem;
  padding: 1rem 1.5rem;
  background: var(--eiti-divider);
  border: 1px solid var(--eiti-divider);
  border-radius: 6px;
  font-size: 0.6em;
  color: var(--eiti-navy);
}

.bc-info-body li {
  margin: 0.25rem 0;
}

.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;
}

.bc-dynamic-filter-annotation {
  font-size: 0.78rem;
  color: #888;
  font-style: italic;
  align-self: flex-end;
  padding-bottom: 0.65rem;
  max-width: 160px;
  line-height: 1.3;
}

/* 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;
}
.bc-pager-input::-webkit-outer-spin-button,
.bc-pager-input::-webkit-inner-spin-button { 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);
}

/* 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 */
  .bc-dynamic-filter-annotation {
    max-width: 100%;
  }
}


/* 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 */
input[type="submit"].button-run,
.core .button-run,
button.button-run {
  background: var(--eiti-navy);
  color: #ffffff;
  border-color: var(--eiti-navy);
}

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

/* 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; }

.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;
}
.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-list {
  margin: 0.75rem 0 0.75rem 1.5rem;
  line-height: 2;
}

.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.column-actions,
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-integer,
body.table table.rows-and-columns td.type-float,
body.table table.rows-and-columns td.type-real {
  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;
}