.stats-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0;
}

/* Section navigation (icon tiles) — shared across all Stats pages. Four equal tiles that
   wrap to a 2x2 grid on narrow screens. Active tile uses the deep-blue selection colour. */
.stats-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.stats-nav-tile {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem 0.75rem;
    background: #fff;
    border: 1px solid #e2e6ee;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    color: #5a6577;
    text-decoration: none;
    text-align: center;
    transition: all 0.15s;
}
.stats-nav-tile:hover {
    color: #143278;
    border-color: #4a90d9;
    background: #f3f7fe;
}
.stats-nav-tile.active {
    color: #143278;
    border-color: #143278;
    background: #e8f0fe;
    box-shadow: 0 0 0 2px rgba(20,50,120,0.18), 0 2px 12px rgba(0,0,0,0.07);
}
.stats-nav-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}
.stats-nav-label {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
@media (max-width: 575px) {
    .stats-nav-tile {
        flex-basis: calc(50% - 0.375rem);
    }
    /* Five tiles in two columns leave the last one alone on its row, where it would stretch to
       full width. Promote the first tile (Overview) to a full-width banner instead; the remaining
       four then pair cleanly into two rows. */
    .stats-nav-tile:first-child {
        flex-basis: 100%;
    }
}
/* In the narrow band where 4 tiles won't fit on one row but 3 will, the last tile would otherwise
   wrap alone and stretch full width. Promote the first tile (Overview) to a full-width banner
   instead, leaving the other three to share the row below. */
@media (min-width: 576px) and (max-width: 767px) {
    .stats-nav-tile:first-child {
        flex-basis: 100%;
    }
}
.chart-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    padding: 2rem;
    margin-bottom: 1.5rem;
}
.chart-header {
    margin-bottom: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e8e8e8;
}
.chart-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 0.25rem 0;
}
.chart-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}
.chart-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 1rem;
}
.chart-wrap canvas {
    display: block;
}
.chart-source {
    font-size: 0.75rem;
    color: #999;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Controls */
.stats-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 2rem;
}
.control-group {
    flex: 1;
    min-width: 220px;
}
.control-group-narrow {
    flex: 0 1 280px;
    min-width: 180px;
}
.control-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.35rem;
}

/* Country autocomplete */
.country-search-wrap {
    position: relative;
}
.country-search-wrap input {
    width: 100%;
    box-sizing: border-box;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.15s;
}
.country-search-wrap input:focus {
    border-color: #4a90d9;
    box-shadow: 0 0 0 3px rgba(74,144,217,0.12);
}
.country-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
}
.country-dropdown.open {
    display: block;
}
.country-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.1s;
}
.country-option:hover,
.country-option.highlighted {
    background: #e8f0fe;
}
.country-option mark {
    background: #ffd54f;
    border-radius: 2px;
    padding: 0;
}

.toggle-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem 0;
    border: 1px solid transparent;
}

/* Fisheries toggle */
.toggle-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.toggle-wrap input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #143278;
}
.toggle-wrap span {
    font-size: 0.9rem;
    color: #444;
    white-space: nowrap;
}

/* Actions row */
.stats-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
}

/* Clear / Global view button — subtle blue emphasis. Blue = the reset/global action,
   green = active-selection chips (the badges), so the two never blend. */
.btn-clear {
    padding: 0.35rem 1rem;
    border: 1px solid #b8cdf0;
    border-radius: 6px;
    background: #eef4fd;
    color: #143278;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-clear:hover {
    background: #dde9fb;
    border-color: #4a90d9;
}

/* Member flags */
.member-flags {
    margin-bottom: 1.25rem;
}
.member-flags-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}
.flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 27px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    background: #f5f6f8;
    padding: 0;
    position: relative;
}
.flag-btn:hover {
    border-color: #4a90d9;
    background: #e8f0fe;
}
.flag-btn.active {
    border-color: #143278;
    background: #dce6f7;
    box-shadow: 0 0 0 2px rgba(20,50,120,0.2);
}
.flag-btn svg {
    width: 28px;
    height: 20px;
    border-radius: 2px;
}
.flag-btn .flag-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 0.72rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
}
.flag-btn:hover .flag-tooltip {
    display: block;
}

/* Loading spinner */
.chart-loading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.chart-loading.active {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top-color: #143278;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Species autocomplete */
.species-search-wrap {
    position: relative;
}
.species-search-wrap input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s;
}
.species-search-wrap input:focus {
    border-color: #4a90d9;
    box-shadow: 0 0 0 3px rgba(74,144,217,0.12);
}
.species-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
}
.species-dropdown.open {
    display: block;
}
.species-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.1s;
}
.species-option:hover,
.species-option.highlighted {
    background: #e8f0fe;
}
.species-option mark {
    background: #ffd54f;
    border-radius: 2px;
    padding: 0;
}
.species-option .sci-name {
    font-style: italic;
    color: #888;
    font-size: 0.82rem;
}

/* Active species badge */
.active-species-badge {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: #e8f7e8;
    border: 1px solid #a8d8a8;
    border-radius: 16px;
    font-size: 0.85rem;
    color: #1a6b1a;
}
.active-species-badge.visible {
    display: inline-flex;
}
.active-species-badge .badge-x {
    cursor: pointer;
    font-weight: bold;
    margin-left: 0.2rem;
    opacity: 0.6;
    transition: opacity 0.1s;
}
.active-species-badge .badge-x:hover {
    opacity: 1;
}

/* Active country badge — green like the species badge (both are active-selection chips) */
.active-country-badge {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: #e8f7e8;
    border: 1px solid #a8d8a8;
    border-radius: 16px;
    font-size: 0.85rem;
    color: #1a6b1a;
}
.active-country-badge.visible {
    display: inline-flex;
}
.active-country-badge .badge-x {
    cursor: pointer;
    font-weight: bold;
    margin-left: 0.2rem;
    opacity: 0.6;
    transition: opacity 0.1s;
}
.active-country-badge .badge-x:hover {
    opacity: 1;
}

/* Chart header row */
.chart-header-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

/* CSV download button */
.btn-csv {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4a90d9;
    text-decoration: none;
    border: 1px solid #d0d5dd;
    border-radius: 5px;
    background: #f9fafb;
    white-space: nowrap;
    transition: all 0.15s;
}
.btn-csv:hover {
    color: #143278;
    border-color: #4a90d9;
    background: #e8f0fe;
}
.btn-csv svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Species profile page (/species/) */
.year-select {
    width: 100%;
    box-sizing: border-box;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}
.year-select:focus {
    border-color: #4a90d9;
    box-shadow: 0 0 0 3px rgba(74,144,217,0.12);
}

/* Landing call-to-action (top of /production/) */
.landing-cta {
    background: #e8f0fe;
    border: 1px solid #c3d4f3;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #143278;
    text-align: center;
}

/* Quiet hint under the landing chart — a dashed style marks it as a gentle reminder,
   not a repeat of the solid CTA above; the up-arrow points back to the search box. */
.landing-hint {
    text-align: center;
    font-size: 0.9rem;
    color: #143278;
    background: #f3f7fe;
    border: 1px dashed #c3d4f3;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    margin: 0.5rem 0 0.75rem 0;
}

/* Persisted-country callout (/production/) — states where the dashboard country ranks for the
   selected species. Amber so it ties to the highlighted bar and stands apart from the blue/teal
   ranking bars. */
.country-callout {
    background: #fff8e6;
    border: 1px solid #f0d27a;
    border-left: 4px solid #e0a020;
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    margin: 0 0 1rem 0;
    font-size: 0.92rem;
    color: #6b5210;
}
.country-callout strong {
    color: #4a3808;
}

/* Major-group donut overview (top of /species/) */
.donut-section {
    margin-bottom: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e8e8e8;
}
.donut-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1rem;
}
.donut-wrap {
    flex: 1 1 260px;
    min-width: 240px;
    text-align: center;
}
.donut-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #444;
    margin: 0 0 0.5rem 0;
}
.donut-canvas-wrap {
    position: relative;
    height: 260px;
}

/* Choropleth maps (/consumption/ and /food-security/). Scoped to the per-map wrapper so the map's
   element-level rules (svg, paths, tooltip) never leak into the rest of the site. Both maps share the
   same structure and chrome; only the fill scale (set inline by each template) differs. */
.consumption-map,
.foodsecurity-map {
    color: #1a2230;
}
.consumption-map .chart-header,
.foodsecurity-map .chart-header {
    /* This header is the first element in the card (no controls above it), so drop the divider
       rule and its spacing that separate stacked sections on the other Stats pages. */
    border-top: none;
    padding-top: 0;
}
.consumption-map .map-frame,
.foodsecurity-map .map-frame {
    position: relative;
    width: 100%;
}
.consumption-map svg,
.foodsecurity-map svg {
    width: 100%;
    height: auto;
    display: block;
}
.consumption-map .country,
.foodsecurity-map .country {
    stroke: #ffffff;
    stroke-width: 0.4px;
}
.consumption-map .country:hover,
.foodsecurity-map .country:hover {
    stroke: #1a2230;
    stroke-width: 1px;
}
.consumption-map .sphere,
.foodsecurity-map .sphere {
    fill: #f3f7fb;
    stroke: #d9e2ec;
    stroke-width: 0.6px;
}
.consumption-map .graticule,
.foodsecurity-map .graticule {
    fill: none;
    stroke: #e4ecf3;
    stroke-width: 0.4px;
}
.consumption-map .legend,
.foodsecurity-map .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin: 0.75rem 0 0.25rem;
}
.consumption-map .legend-item,
.foodsecurity-map .legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #3a4656;
}
.consumption-map .swatch,
.foodsecurity-map .swatch {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}
.consumption-map .tooltip,
.foodsecurity-map .tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 10;
    background: rgba(20, 28, 42, 0.95);
    color: #fff;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.35;
    max-width: 230px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.08s ease;
}
.consumption-map .tooltip .t-name,
.foodsecurity-map .tooltip .t-name {
    font-weight: 650;
    margin-bottom: 0.15rem;
}
.consumption-map .tooltip .t-val,
.foodsecurity-map .tooltip .t-val {
    color: #8fd0ff;
}
.consumption-map .tooltip .t-nodata,
.foodsecurity-map .tooltip .t-nodata {
    color: #c3ccd9;
    font-style: italic;
}
.consumption-map .map-note,
.consumption-map .map-source,
.foodsecurity-map .map-note,
.foodsecurity-map .map-source {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: #97a1b0;
}
.consumption-map .map-note,
.foodsecurity-map .map-note {
    margin-top: 1rem;
}

/* =========================================================================
   Dark mode — mirrors tide's "night tide" scheme. Driven by
   :root[data-theme="dark"] on <html>, which tide-init.js sets before first
   paint (saved choice, else OS preference). stats.css is variable-free by
   design, so the dark palette is restated inline here.

   Scope note: Chart.js canvases and the choropleth *data* fills are coloured
   by JavaScript and cannot be reached from CSS — their axis labels/gridlines
   are a separate, JS-side concern. Everything CSS owns (cards, controls,
   chips, the map backdrop and captions) adapts below.
   ========================================================================= */
:root[data-theme="dark"] .stats-nav-tile {
    background: #13272e;
    border-color: #244249;
    color: #c5d3d7;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
:root[data-theme="dark"] .stats-nav-tile:hover {
    color: #9ec5f0;
    border-color: #3d6a99;
    background: #16303a;
}
:root[data-theme="dark"] .stats-nav-tile.active {
    color: #9ec5f0;
    border-color: #4a78b8;
    background: #173042;
    box-shadow: 0 0 0 2px rgba(110,168,232,0.25), 0 2px 12px rgba(0,0,0,0.4);
}

:root[data-theme="dark"] .chart-card {
    background: #13272e;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
:root[data-theme="dark"] .chart-header,
:root[data-theme="dark"] .donut-section {
    border-top-color: #244249;
}
:root[data-theme="dark"] .chart-title { color: #e7eff1; }
:root[data-theme="dark"] .chart-subtitle { color: #9fb3ba; }
:root[data-theme="dark"] .chart-source { color: #8194a0; }

/* Control labels */
:root[data-theme="dark"] .control-group label,
:root[data-theme="dark"] .member-flags-label,
:root[data-theme="dark"] .donut-title,
:root[data-theme="dark"] .toggle-wrap span { color: #9fb3ba; }

/* Text / select inputs */
:root[data-theme="dark"] .country-search-wrap input,
:root[data-theme="dark"] .species-search-wrap input,
:root[data-theme="dark"] .year-select {
    background: #0e2128;
    border-color: #37636c;
    color: #e7eff1;
}
:root[data-theme="dark"] .country-search-wrap input:focus,
:root[data-theme="dark"] .species-search-wrap input:focus,
:root[data-theme="dark"] .year-select:focus {
    border-color: #5bc4df;
    box-shadow: 0 0 0 3px rgba(91,196,223,0.18);
}
:root[data-theme="dark"] .country-dropdown,
:root[data-theme="dark"] .species-dropdown {
    background: #13272e;
    border-color: #37636c;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
:root[data-theme="dark"] .country-option:hover,
:root[data-theme="dark"] .country-option.highlighted,
:root[data-theme="dark"] .species-option:hover,
:root[data-theme="dark"] .species-option.highlighted {
    background: #173042;
}
:root[data-theme="dark"] .species-option .sci-name { color: #8194a0; }
:root[data-theme="dark"] .country-option mark,
:root[data-theme="dark"] .species-option mark {
    background: #b9892a;
    color: #fff;
}

/* Blue-accent buttons (Clear / CSV) */
:root[data-theme="dark"] .btn-clear {
    background: #16303a;
    border-color: #2f5a73;
    color: #9ec5f0;
}
:root[data-theme="dark"] .btn-clear:hover {
    background: #1b3a48;
    border-color: #4a78b8;
}
:root[data-theme="dark"] .btn-csv {
    color: #7fb0e6;
    border-color: #37636c;
    background: #0e2128;
}
:root[data-theme="dark"] .btn-csv:hover {
    color: #9ec5f0;
    border-color: #4a78b8;
    background: #173042;
}

/* Member-state flag buttons */
:root[data-theme="dark"] .flag-btn { background: #1a2c33; }
:root[data-theme="dark"] .flag-btn:hover {
    border-color: #4a78b8;
    background: #173042;
}
:root[data-theme="dark"] .flag-btn.active {
    border-color: #6ea8e8;
    background: #1d3850;
    box-shadow: 0 0 0 2px rgba(110,168,232,0.3);
}

/* Active-selection chips — green in both schemes (matches tide .alert-success) */
:root[data-theme="dark"] .active-species-badge,
:root[data-theme="dark"] .active-country-badge {
    background: #14302a;
    border-color: #2c5a44;
    color: #8fe0b3;
}

/* Loading spinner */
:root[data-theme="dark"] .spinner {
    border-color: #2a3b42;
    border-top-color: #6ea8e8;
}

/* Landing CTA / hint (blue) */
:root[data-theme="dark"] .landing-cta {
    background: #16303a;
    border-color: #2f5a73;
    color: #9ec5f0;
}
:root[data-theme="dark"] .landing-hint {
    background: #122a33;
    border-color: #2f5a73;
    color: #9ec5f0;
}

/* Persisted-country callout (amber) */
:root[data-theme="dark"] .country-callout {
    background: #2e2713;
    border-color: #5c4a1e;
    border-left-color: #c79a3a;
    color: #e3c987;
}
:root[data-theme="dark"] .country-callout strong { color: #f2dca0; }

/* Choropleth maps — the data fills come from JS, but the ocean backdrop,
   graticule and captions are ours. (The sphere/graticule fills are also set as
   inline SVG attributes by the map script; a CSS rule still wins in the cascade
   on standards browsers. iOS may keep the light backdrop — an acceptable
   fallback.) */
:root[data-theme="dark"] .consumption-map,
:root[data-theme="dark"] .foodsecurity-map { color: #c5d3d7; }
:root[data-theme="dark"] .consumption-map .sphere,
:root[data-theme="dark"] .foodsecurity-map .sphere {
    fill: #0e2128;
    stroke: #2a4a52;
}
:root[data-theme="dark"] .consumption-map .graticule,
:root[data-theme="dark"] .foodsecurity-map .graticule { stroke: #1d3a42; }
:root[data-theme="dark"] .consumption-map .legend-item,
:root[data-theme="dark"] .foodsecurity-map .legend-item { color: #c5d3d7; }
:root[data-theme="dark"] .consumption-map .swatch,
:root[data-theme="dark"] .foodsecurity-map .swatch { border-color: rgba(255,255,255,0.18); }
:root[data-theme="dark"] .consumption-map .map-note,
:root[data-theme="dark"] .consumption-map .map-source,
:root[data-theme="dark"] .foodsecurity-map .map-note,
:root[data-theme="dark"] .foodsecurity-map .map-source { color: #8194a0; }