/* ================================================================
   page-detail-body.css
   Shared chrome for every detail page (member state, producing
   country, commodity, company). Loaded by case-studies too — it
   borrows the tab bar + body strip even though it isn't a detail
   page per se.

   Replaces the older split between page-detail-frame.css (frame
   only) and page-country-detail-shared.css (body widgets). Both
   are now deleted.

   What lives here
   ────────────────
     • Sticky tab bar                .cc-detail-tabbar, .cc-detail-tab*
     • Grey body strip + grid        .cc-detail-body, .cc-detail-body__inner
     • Tab panels                    .cc-detail-tabpanel*
     • Sticky sidebar wrapper        .cc-detail-side
     • Sidebar card 1 — controls     .cc-detail-controls*, .cc-detail-toggle*,
                                     .cc-detail-controls__select,
                                     .cc-detail-download*
     • Sidebar card 2 — filters      .cc-detail-filters* (table tabs only)
     • Sidebar card 3 — freshness    .cc-detail-freshness*
     • Section heading + panel       .cc-detail-panel, .cc-detail-heading*
     • Stat cards (4-up summary)     .page-stats, .stat-card*, .stat-unit
     • Info-icon tooltip widget      .info-container, .info-icon, .info-tooltip
     • Commodity tile grid           .cc-commodity-card* (used by member-state
                                     + producing-country Overview tabs only,
                                     parked here so any future detail page
                                     can pick it up)
     • Commodity dot + icon          .cc-commodity-dot[data-commodity], .cc-commodity-icon

   What does NOT live here
   ────────────────────────
     • Breadcrumb + hero chrome      → page-header.css
     • Combobox dropdown             → dropdown.css
     • Trade-flows table chrome      → page-detail-export-import-table.css
     • Pie-chart donut panel         → page-detail-donut-chart.css
     • Base table chassis            → table.css
     • Page-specific styling         → page-<name>-detail.css

   BEM naming
   ──────────
   All classes use the .cc-detail-* prefix. Tab states use BEM
   modifiers (.cc-detail-tab--active) plus the [aria-selected="true"]
   attribute selector so the rules still kick in if JS hasn't yet
   updated the modifier class. Filter-card visibility is gated by
   body[data-active-tab] so the tab-switching JS owns the toggle.
   ================================================================ */


/* ================================================================
   1. TAB BAR (white, sticky)
   z-index needs to outrank any positioned content in the panels.
   The pie-chart canvases on the imports tab are absolutely
   positioned at z-index:2 inside their wrapper, which would cover
   the tab bar at --z-content (1) when scrolling. --z-elevated (10)
   sits above page content but stays under modals (--z-modal),
   tooltips (--z-tooltip), and the global nav (--z-nav).
   ================================================================ */
.cc-detail-tabbar {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--white);
    border-bottom: 1px solid var(--color-input-border);
    position: sticky;
    top: var(--nav-h-scrolled);
    z-index: var(--z-elevated);
    box-sizing: border-box;
}
.cc-detail-tabbar__inner {
    max-width: var(--page-max); margin-inline: auto;
    padding-inline: var(--space-md);
    display: flex; gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.cc-detail-tabbar__inner::-webkit-scrollbar { display: none; }

.cc-detail-tab {
    background: transparent; border: 0;
    /* inline-flex + gap so the optional .fa-table glyph on table
       tabs (Import Data / Export Data / Case studies) sits cleanly
       next to the label without extra whitespace handling. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--color-muted);
    padding: var(--space-md) var(--space-md);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-base), border-color var(--transition-base);
}
/* .cc-detail-tab__icon is the inline SVG glyph used on table tabs
   (Import Data / Export Data / Case studies) — same shape as the
   case-studies Table/Map switch. It strokes with currentColor so it
   inherits the tab's text colour (muted at rest, teal when active). */
.cc-detail-tab__icon {
    flex-shrink: 0;
    opacity: 0.9;
}
.cc-detail-tab:hover { color: var(--ae-darkblue); }
.cc-detail-tab--active,
.cc-detail-tab[aria-selected="true"] {
    color: var(--ae-darkblue);
    border-bottom-color: var(--ae-darkblue);
    font-weight: 700;
}
.cc-detail-tab:focus-visible {
    outline: 2px solid var(--ae-darkblue);
    outline-offset: 2px;
}


/* ================================================================
   2. BODY STRIP (grey full-bleed) + sidebar | tab panels grid
   Generous breathing room at the top (sits below the tab bar +
   stat cards) but tight at the bottom so the strip ends close to
   the footer; the page already feels like it's "ended" once the
   tab content runs out.
   ================================================================ */
.cc-detail-body {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--ae-white);
    padding-block: var(--space-2xl);
    box-sizing: border-box;
}
.cc-detail-body__inner {
    max-width: var(--page-max); margin-inline: auto;
    padding-inline: var(--space-md);
    display: grid;
    grid-template-columns: clamp(220px, 18vw, 280px) 1fr;
    gap: var(--space-lg);
    align-items: start;
}


/* ================================================================
   3. TAB PANELS
   ================================================================ */
.cc-detail-tabpanel {
    display: none;
}
.cc-detail-tabpanel--active {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}
.cc-detail-tabpanel[hidden] {
    /* Belt + braces with the [hidden] attribute, never visible. */
    display: none !important;
}

/* Print: reveal all panels so the PDF contains everything */
@media print {
    .cc-detail-tabpanel,
    .cc-detail-tabpanel[hidden] {
        display: block !important;
    }
    .cc-detail-breadcrumb,
    .cc-detail-tabbar {
        display: none !important;
    }
}


/* ================================================================
   4. SIDEBAR — stack of (1) controls / (2) filters / (3) freshness
   ================================================================ */
.cc-detail-side {
    position: sticky;
    top: calc(var(--nav-h-scrolled) + var(--nav-h-scrolled) + var(--space-sm));
    align-self: start;
    display: flex; flex-direction: column;
    gap: var(--space-md);
}


/* --- Card 1 · Controls (always visible) -------------------------
   Holds the page-pivot combobox (commodity / company / country) on
   top, then a row with Year + Unit-pill toggle, then an optional
   "Download full profile" pill below. */
.cc-detail-controls {
    background: var(--white);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-dropdown);
    padding: var(--space-md);
    display: flex; flex-direction: column; gap: var(--space-md);
}
.cc-detail-controls__field {
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
}
.cc-detail-controls__row {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
}
.cc-detail-controls__label {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-muted);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
}

/* Native <select> caret replaced with the same triangle the
   combobox chevron uses, so every dropdown on every detail page
   reads consistently. */
.cc-detail-controls__select {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ae-black);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0 L5 6 L10 0 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 7px 4px;
    padding-right: 28px;
}

/* MT / € segmented pill toggle */
.cc-detail-toggle {
    display: flex; gap: 3px; padding: 3px;
    background: var(--ae-white);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-pill);
}
.cc-detail-toggle__btn {
    flex: 1;
    padding: 5px 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ae-black);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.cc-detail-toggle__btn--active {
    background: var(--ae-darkblue);
    color: var(--white);
}

/* Download pill (cloud icon) */
.cc-detail-download {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--ae-darkblue);
    background: var(--ae-darkblue);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.cc-detail-download:hover {
    background: var(--ae-lightgreen);
    border-color: var(--ae-lightgreen);
    color: var(--ae-darkblue);
}
.cc-detail-download__icon { font-size: 14px; }


/* --- Card 2 · Filters (table tabs only) -------------------------
   Sits in the sidebar between .cc-detail-controls and
   .cc-detail-freshness. Visibility is gated by
   body[data-active-tab="..."] so the tab-switch JS owns the toggle.

   Visual structure:
     • Card itself     — white surface, 1.5px brand-teal border,
                         dropdown radius, overflow:hidden so the
                         header bar's light-teal background clips
                         neatly into the rounded corners.
     • Header bar      — light-teal strip (12×16 padding, hairline
                         border-bottom) with a filter glyph on the
                         left, the title in NexaBold teal in the
                         middle, and an active-count pill on the right.
     • Body            — the existing checkbox rows, lifted into a
                         __body wrapper so padding sits inside the
                         body and the header bleeds edge-to-edge. */
.cc-detail-filters {
    display: none;
    background: var(--white);
    border: 1.5px solid var(--ae-darkblue);
    border-radius: var(--radius-dropdown);
    /* overflow:visible (the default) so combobox listboxes inside the
       card can extend past its bottom edge when there isn't enough
       room. The header's corner-radius (below) compensates for the
       lack of clipping so the light-teal bg still fills the rounded
       corners cleanly. */
    flex-direction: column;
}

body[data-active-tab="exporters"]    .cc-detail-filters,
body[data-active-tab="destinations"] .cc-detail-filters,
body[data-active-tab="cases"]        .cc-detail-filters,
body[data-active-tab="imports"]      .cc-detail-filters {
    display: flex;
}

/* Light-teal header bar across the top of the card. Top corners
   match the card's INNER corner radius (outer radius minus the
   1.5px border) so the bg fills cleanly into the rounded corners
   without relying on overflow:hidden on the parent — which would
   also clip combobox dropdowns inside the card. */
.cc-detail-filters__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--ae-darkblue-10);
    border-bottom: 1px solid var(--color-input-border);
    border-top-left-radius: calc(var(--radius-dropdown) - 1.5px);
    border-top-right-radius: calc(var(--radius-dropdown) - 1.5px);
}

/* Funnel-style icon on the left. Same .fa-sliders-h Font Awesome
   glyph the case-studies "Filters" trigger uses, picked here so
   the same affordance appears in the same colour across surfaces. */
.cc-detail-filters__header-icon {
    color: var(--ae-darkblue);
    font-size: var(--fs-md);
    flex-shrink: 0;
}

/* "Table filters" title — NexaBold teal at the same size as
   the other sidebar card labels (--fs-xs). flex:1 so the title
   fills the remaining space inside the header bar. */
.cc-detail-filters__header-title {
    flex: 1;
    font-family: var(--font-heading);
    font-size: var(--fs-xs);
    color: var(--ae-darkblue);
    line-height: 1.2;
}

/* Checkbox rows live inside the body wrapper so the card's padding
   doesn't apply to the header bar above. */
.cc-detail-filters__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
}

/* Checkbox row: icon + label, native checkbox visible on the left. */
.cc-detail-filters__check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.cc-detail-filters__check input { accent-color: var(--ae-darkblue); }
.cc-detail-filters__check:has(input:checked) { color: var(--ae-darkblue); font-weight: 600; }
.cc-detail-filters__check-icon { width: 22px; height: 22px; object-fit: contain; }


/* --- Card 3 · Data freshness (compact) -------------------------- */
.cc-detail-freshness {
    background: var(--white);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-dropdown);
    padding: var(--space-md);
    display: flex; flex-direction: column; gap: var(--space-sm);
}
.cc-detail-freshness__header {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-muted);
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
}
.cc-detail-freshness__row {
    display: flex; align-items: center; gap: var(--space-sm);
}
.cc-detail-freshness__check {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-data-panel-bg-bottom);
    color: var(--ae-jungle-dark);
    font-weight: 700;
}
.cc-detail-freshness__lines { display: flex; flex-direction: column; }
.cc-detail-freshness__status {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ae-black);
    line-height: 1.2;
}
.cc-detail-freshness__date,
.cc-detail-freshness__last-check {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-muted);
}
.cc-detail-freshness__last-check { font-size: var(--fs-xs); }
.cc-detail-freshness__link {
    display: block;
    text-align: center;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--ae-darkblue);
    color: var(--ae-darkblue);
    background: var(--white);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);
}
.cc-detail-freshness__link:hover,
.cc-detail-freshness__link:focus-visible {
    background: var(--ae-darkblue);
    color: var(--white);
}


/* ================================================================
   5. SECTION HEADING + PANEL
   Single shared wrapper that carries the max-width + centring for
   each tab. Children stretch to the wrapper width so heading +
   card share the same left edge.
   ================================================================ */
.cc-detail-panel {
    width: 100%;
    margin: 0 auto;
    max-width: var(--page-max);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    box-sizing: border-box;
}

.cc-detail-heading {
    /* No own width / max-width — stretches to the wrapper's width. */
    margin: 0;
}

.cc-detail-heading__title {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--ae-darkblue);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.cc-detail-heading__lede {
    margin: 0;
    max-width: 80ch;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--text-muted);
}


/* ================================================================
   6. STAT CARDS (4-up summary row above the panels)
   Card count varies per page: 4 on company / commodity / member-
   state, 3 on producing-country. auto-fit lets the grid adapt;
   each card has a 200px floor and grows to fill leftover space.
   ================================================================ */

.stat-unit {
    font-weight: 700;
    color: var(--color-muted);
    font-size: 0.85em;
    margin-left: 4px;
}

.stat-card__value .stat-unit {
    font-weight: 400;
    color: var(--ae-darkblue);
    opacity: 0.6;
    font-size: 0.55em;
}

.page-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-sm);
    max-width: var(--page-max);
    margin: 0 auto clamp(1.75rem, 2.5vw, 2.5rem);
}

.stat-card {
    background-color: var(--white);
    border-radius: var(--radius-dropdown);
    box-shadow: var(--shadow);
    padding: clamp(10px, 1.4vw, 16px) clamp(16px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.stat-card__label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    color: var(--color-muted);
}

.stat-card__value {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--ae-darkblue);
    overflow-wrap: break-word;
}

.stat-card__sublabel {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-muted);
}


/* ================================================================
   7. INFO-ICON TOOLTIP (generic hover widget)
   Visual mirrors the canonical .csv-info-tooltip / .csv-info-text
   pattern from the case-studies rail: a green ⓘ glyph trigger that
   reveals a dark-bg popup with white text on hover. Same markup as
   before (.info-container > .info-icon + .info-tooltip), only the
   styling changes so every hover-info widget on the site reads
   the same.

   The .info-icon's literal "i" text in markup is visually hidden
   via font-size:0; the ⓘ glyph is drawn through ::before. The
   popup sits ABSOLUTELY below the icon (no JS portal), so if a
   particular usage gets clipped by an overflow:hidden ancestor
   we'd portal that one separately.
   ================================================================ */

.info-icon {
    /* Inline glyph, not a pill. Cursor:help mirrors .csv-info-tooltip. */
    display: inline;
    cursor: help;
    margin-left: 4px;
    font-style: normal;
    font-weight: bold;
    color: var(--ae-green);
    font-size: 0;                   /* hide the literal "i" text node */
    line-height: 1;
}

.info-icon::before {
    content: "\24D8";               /* ⓘ — same Unicode glyph .csv-info-tooltip uses */
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

.info-icon:hover {
    /* Same colour at rest and on hover — visual cue is the popup,
       not an icon state change. Mirrors .csv-info-tooltip. */
    color: var(--ae-green);
}

.info-container {
    position: relative;
    align-items: center;
    display: inline-flex;
    gap: 4px;
    width: 100%;
}

.info-container.is-inline {
    width: auto;
}

.info-tooltip {
    /* Dark popup below the icon — same chrome as .csv-info-text.
       NOTE: no `white-space: pre-line` here. .info-tooltip content
       uses HTML markup (<br>) for line breaks, so source whitespace
       must collapse normally — otherwise the Jinja indentation
       between "% of total ..." and the MT/€ value renders as huge
       gaps. .csv-info-text keeps pre-line because its tooltip body
       has literal newlines (the CSV format example). */
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    background: var(--ae-black);
    color: var(--white);
    padding: 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: normal;
    line-height: 1.4;
    width: 260px;
    max-width: 260px;
    text-align: left;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: var(--z-tooltip);
}

.info-container:hover .info-tooltip,
.info-container:focus-within .info-tooltip {
    visibility: visible;
}


/* ================================================================
   8. COMMODITY TILE GRID
   Per-commodity tile grid rendered inside the Overview tab on
   member-state-detail (twin-bar mode: country + EU) and
   producing-country-detail (single-bar mode: country only). The
   wrapper itself carries no own chrome; the tiles inside are the
   .stat-card-style surfaces.

   Currently only those two detail pages use this. Parked here so
   any future detail page can pick it up; the cost on pages that
   don't use it is the rule set sitting in memory unused, which is
   small (a few kB gzip).
   ================================================================ */

.cc-commodity-card {
    font-family: var(--font-body);
    color: var(--ae-black);
}

/* Header row — legend on the left, year·unit meta on the right. */
.cc-commodity-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
}

.cc-commodity-card__meta {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.3px;
    line-height: 1;
}

.cc-commodity-card__meta-sep {
    margin: 0 var(--space-xs);
}

/* Tile grid — 4-col with rank-based sizing. Rank 1 = full row, ranks
   2-3 = half row, ranks 4+ = quarter row. */
.cc-commodity-card__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
}

.cc-commodity-card__tile--rank-1 {
    grid-column: span 4;
}

.cc-commodity-card__tile--rank-1 .cc-commodity-card__icon {
    width: 44px;
    height: 44px;
}

.cc-commodity-card__tile--rank-1 .cc-commodity-card__name {
    font-size: var(--fs-lg);
}

.cc-commodity-card__tile--rank-1 .cc-commodity-card__bar-pct {
    font-size: var(--fs-h4);
}

.cc-commodity-card__tile--rank-1 .cc-commodity-card__bar-track {
    height: 8px;
}

.cc-commodity-card__tile--rank-2 {
    grid-column: span 2;
}

/* Tile shell — mirrors the .stat-card treatment (white bg, soft
   shadow, dropdown radius, no border). */
.cc-commodity-card__tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);
    background: var(--white);
    border: 0;
    border-radius: var(--radius-dropdown);
    box-shadow: var(--shadow);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.cc-commodity-card__tile:focus-visible {
    outline: 2px solid var(--ae-darkblue);
    outline-offset: 2px;
}

.cc-commodity-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.cc-commodity-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.cc-commodity-card__icon svg,
.cc-commodity-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cc-commodity-card__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cc-commodity-card__name {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ae-darkblue);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* Value readout — short formatted volume visible by default,
   full locale-formatted number revealed on hover/focus. */
.cc-commodity-card__value {
    font-family: "JetBrains Mono", "Work Sans", monospace;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-placeholder);
    letter-spacing: 0.3px;
    cursor: help;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-base);
}

.cc-commodity-card__value:hover,
.cc-commodity-card__value:focus-visible {
    color: var(--ae-black);
    outline: none;
}

.cc-commodity-card__value-full { display: none; }

.cc-commodity-card__value:hover  .cc-commodity-card__value-short,
.cc-commodity-card__value:focus-visible .cc-commodity-card__value-short { display: none; }

.cc-commodity-card__value:hover  .cc-commodity-card__value-full,
.cc-commodity-card__value:focus-visible .cc-commodity-card__value-full { display: inline; }

/* Bars — one or two horizontal bars per tile, with a small
   uppercase label + percentage above each track. */
.cc-commodity-card__bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cc-commodity-card__bar {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cc-commodity-card__bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--fs-xs);
    color: var(--color-muted);
}

.cc-commodity-card__bar-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-uppercase);
}

.cc-commodity-card__bar-pct {
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: -0.01em;
}

.cc-commodity-card__bar-track {
    height: 5px;
    background: var(--color-track-bg);
    border-radius: 3px;
    overflow: hidden;
}

.cc-commodity-card__bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width var(--transition-base);
}

.cc-commodity-card__bar--country .cc-commodity-card__bar-fill,
.cc-commodity-card__bar--country .cc-commodity-card__bar-pct {
    color: var(--ae-orange);
}
.cc-commodity-card__bar--country .cc-commodity-card__bar-fill {
    background: var(--ae-orange);
}

.cc-commodity-card__bar--eu .cc-commodity-card__bar-fill,
.cc-commodity-card__bar--eu .cc-commodity-card__bar-pct {
    color: var(--ae-darkblue);
}
.cc-commodity-card__bar--eu .cc-commodity-card__bar-fill {
    background: var(--ae-darkblue);
}

/* Legend — sits in the header row above the grid. */
.cc-commodity-card__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-md);
    font-size: var(--fs-xs);
    color: var(--color-muted);
}

.cc-commodity-card__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cc-commodity-card__legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.cc-commodity-card__legend-swatch--country { background: var(--ae-orange); }
.cc-commodity-card__legend-swatch--eu      { background: var(--ae-darkblue); }


/* ================================================================
   9. COMMODITY DOT + ICON (generic widget)
   Used inside per-row Product cells in the trade-flows table AND
   anywhere else a small commodity colour marker is rendered.
   Attribute selector so a single element resolves its colour from
   data-commodity, no per-row inline style needed.
   ================================================================ */
.cc-commodity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--commodity-color, var(--color-muted));
    flex-shrink: 0;
}

.cc-commodity-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.cc-commodity-dot[data-commodity="cattle"]    { background: var(--commodity-cattle); }
.cc-commodity-dot[data-commodity="cocoa"]     { background: var(--commodity-cocoa); }
.cc-commodity-dot[data-commodity="coffee"]    { background: var(--commodity-coffee); }
.cc-commodity-dot[data-commodity="corn"]      { background: var(--commodity-corn); }
.cc-commodity-dot[data-commodity="cotton"]    { background: var(--commodity-cotton); }
.cc-commodity-dot[data-commodity="palm"]      { background: var(--commodity-palm); }
.cc-commodity-dot[data-commodity="palm-oil"]  { background: var(--commodity-palm); }
.cc-commodity-dot[data-commodity="poultry"]   { background: var(--commodity-poultry); }
.cc-commodity-dot[data-commodity="rubber"]    { background: var(--commodity-rubber); }
.cc-commodity-dot[data-commodity="soy"]       { background: var(--commodity-soy); }
.cc-commodity-dot[data-commodity="wood"]      { background: var(--commodity-wood); }
.cc-commodity-dot[data-commodity="timber"]    { background: var(--commodity-wood); }


/* ================================================================
   10. RESPONSIVE
   Stack the body grid + collapse the stat-card row at narrow
   viewports. The cc-commodity-card grid also collapses 4 → 2 → 1.
   ================================================================ */
@media (max-width: 900px) {
    .cc-detail-body__inner {
        grid-template-columns: 1fr;
    }
    .cc-detail-body__inner .sticky-sidebar {
        position: static;
    }
    .cc-detail-side {
        position: static;
    }
    .cc-commodity-card__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .cc-commodity-card__grid {
        grid-template-columns: 1fr;
    }
    .cc-commodity-card__tile {
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .page-stats {
        grid-template-columns: 1fr;
    }
}


/* ================================================================
   9. TOOLBAR SEARCH (shared widget)
   Pill-shaped search input used inside .cc-detail-toolbar on detail
   pages AND inside .cs-control-bar on the case-studies + company-
   detail Case studies tables. Lives here (in body.css) so every
   surface that pulls in the detail-page frame inherits the look —
   page-detail-export-import-table.css used to own it, but case-
   studies / company-detail don't load that file.

   margin-left: auto pushes the search to the right end of whichever
   flex toolbar it's inside, so the group-by + label stays flush
   left.
   ================================================================ */
.cc-detail-toolbar__search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex: 0 1 320px;
    min-width: 200px;
    padding: 8px 16px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--color-muted);
    transition: border-color var(--transition-base);
}

.cc-detail-toolbar__search:focus-within {
    border-color: var(--ae-darkblue);
}

.cc-detail-toolbar__search input {
    border: 0;
    outline: 0;
    flex: 1;
    background: transparent;
    font: inherit;
    color: var(--ae-black);
    min-width: 0;
}