/* ================================================================
   detail-pages/page-detail-commodity-trade-map.css
   Commodity trade map — "global links to the EU"
   Single shell used on all 7 commodity-detail pages. Mirrors the
   .stat-card chrome (white surface, dropdown radius, shared shadow,
   --space-md padding) so the map reads as a sibling of the stat row
   above it. Two paint surfaces inside: a square-ish map canvas on
   the left and a Top-10 ranked list on the right. Six-step colour
   scale + per-tile interactivity ship in phase 2 / 3.

   BEM: .cc-trade-map (block) > __topbar / __meta / __body /
        __canvas / __list / __legend / __loading / __data
   ================================================================ */

.cc-trade-map {
    background-color: var(--white);
    border-radius: var(--radius-dropdown);
    box-shadow: var(--shadow);
    padding: clamp(12px, 1.6vw, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* Card heading — mode-aware ("Which EU member states…" / "Where does
   the <commodity> imported by EU member states come from?"). Sits in
   its own row BELOW the toggle alongside the year · unit chip — the
   user reads "what mode am I in" → "what am I looking at" → "for which
   year/unit". Filled in by paintTitle() in the JS each paint(). */
.cc-trade-map__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--c, var(--ae-darkblue));
}

/* Title row — title on the left, YEAR · UNIT chip on the right.
   Baseline-aligned so the chip's caps line up with the title's
   x-height (the meta is uppercase + smaller). flex-wrap lets the chip
   drop below the title on narrow viewports. */
.cc-trade-map__title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

/* Topbar — Import/Export toggle only. Single child, but kept as a flex
   row so future siblings (e.g. a download button) can slot in without
   restructuring. */
.cc-trade-map__topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* Compact pill — scoped overrides on top of the global .cc-detail-toggle
   so the in-card toggle reads as a tidy chip rather than a full-width
   block. The global rules supply colour, hover, and the active state. */
.cc-trade-map__toggle {
    width: auto;
    flex: 0 0 auto;
}
.cc-trade-map__toggle .cc-detail-toggle__btn {
    padding-block: 6px;
    padding-inline: 14px;
    font-size: var(--fs-xs);
}
.cc-trade-map__meta {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* Two columns: map (fluid) + ranked list (~30% min). Wraps to a
   single column under ~640px so the map stays usable on mobile
   (see RESPONSIVE section at the end of the file). */
.cc-trade-map__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 26%, 320px);
    gap: var(--space-md);
    align-items: stretch;
}

/* Map canvas — phase 2 paints SVG paths here. Aspect ratio holds
   shape during the loading state and during empty-data fallback. */
.cc-trade-map__canvas {
    position: relative;
    min-height: 320px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    background: var(--ae-white);
    overflow: hidden;
}
/* Pre-SVG loading state. Gentle opacity pulse signals "working" without
   the heaviness of a spinner; uppercase tracking matches the meta chip
   in the topbar so the two muted lines feel like one family. Shows only
   for the time the world.svg fetch is in flight — once the SVG is
   injected the loading paragraph is removed with it. */
.cc-trade-map__loading {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: cc-trade-map-loading-pulse 1.4s ease-in-out infinite;
}
@keyframes cc-trade-map-loading-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-trade-map__loading { animation: none; opacity: 0.7; }
}

/* === Top-10 ranked list ============================================
   Header + 10 rows; each row is rank · swatch · name · % share.
   Rows carry data-iso="XX" so the hover layer can highlight the
   matching map path. Numeric column uses tabular-nums so the right
   edge aligns across rows even with single- and double-digit values. */
.cc-trade-map__list {
    border-radius: var(--radius-sm);
    background: var(--ae-white);
    padding: var(--space-sm);
    min-height: 320px;
    overflow: hidden;
}
.cc-trade-map__list-header {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 6px;
}
.cc-trade-map__list-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cc-trade-map__list-row {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    overflow: hidden;            /* clip the bar's rounded corners to the row */
    cursor: default;
    transition: background-color 0.12s ease;
}
/* Share bar — sits BEHIND the row text. Width is relative to the #1
   country in the top-10 (set per row via --bar-w). Same low-opacity
   commodity tint on every row, only the length changes — the
   percentage number carries the absolute value. */
.cc-trade-map__list-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--bar-w, 0%);
    background: color-mix(in srgb, var(--c, var(--ae-darkblue)) 16%, transparent);
    pointer-events: none;
    transition: width 0.35s ease;
    z-index: 0;
}
.cc-trade-map__list-row:hover,
.cc-trade-map__list-row.is-hover {
    background: color-mix(in srgb, var(--c, var(--ae-darkblue)) 8%, var(--white));
}
/* Text sits above the bar. The rank and name pick up the row's text
   colour; the percentage stays commodity-coloured to echo the bar. */
.cc-trade-map__list-rank,
.cc-trade-map__list-name,
.cc-trade-map__list-pct {
    position: relative;
    z-index: 1;
}
.cc-trade-map__list-rank {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--color-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cc-trade-map__list-name {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ae-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-trade-map__list-pct {
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c, var(--ae-darkblue));
    font-variant-numeric: tabular-nums;
}

/* === Legend ========================================================
   Six swatches inline, captioned by a short mode-specific phrase. */
.cc-trade-map__legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
}
.cc-trade-map__legend-caption {
    flex-basis: 100%;
    color: var(--color-muted);
}
.cc-trade-map__legend-step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cc-trade-map__legend-swatch {
    width: 14px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* === Map hover layer ==============================================
   When any path is hovered, the canvas adds .is-hovering and every
   non-hovered path is dimmed. The hovered path gets a heavier stroke
   so its outline visually emphasises. */
.cc-trade-map__canvas svg path[id] {
    cursor: pointer;
    /* Default fill kicks in for the brief window between the SVG
       inserting and paint() applying mode-specific tints — otherwise
       paths use the SVG default (black) and the user sees a black-
       silhouette flash. With this, the world enters as a soft grey
       and the per-path fill transitions (below) animate the reveal
       once share data is in. */
    fill: var(--ae-white);
    stroke: rgba(0, 0, 0, 0.08);
    /* Keep borders crisp regardless of viewBox zoom — without this the
       EU-mode crop fattens the strokes proportionally and the country
       outlines blur. With it, the stroke stays a constant pixel width
       in both world view and zoomed-EU view. */
    vector-effect: non-scaling-stroke;
    stroke-width: 0.6px;
    transition: fill 0.45s ease,
                opacity 0.12s ease,
                stroke-width 0.12s ease,
                stroke 0.12s ease;
}
.cc-trade-map__canvas.is-hovering svg path[id]:not(.is-hover) {
    opacity: 0.55;
}
.cc-trade-map__canvas svg path[id].is-hover {
    stroke: var(--ae-black);
    stroke-width: 1.5px;
}

/* === Tooltip — "dark glass" =======================================
   Positioned absolute inside the card (JS sets left/top). Translucent
   near-black backdrop with a soft blur so the map shows through; the
   percentage is the hero, drawn in a lightened commodity colour so it
   stays readable against the dark surface. ROLE label + caption frame
   the number with quiet context, matching the meta chip up in the
   topbar's typography. */
.cc-trade-map__tooltip {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    min-width: 180px;
    max-width: 280px;
    padding: 14px 18px;
    background: rgba(20, 22, 30, 0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--white);
    border-radius: var(--radius-dropdown);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-family: var(--font-body);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
}
.cc-trade-map__tooltip[hidden] { display: none; }

.cc-trade-map__tooltip-role {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 6px;
}
.cc-trade-map__tooltip-name {
    font-size: var(--fs-md);
    font-weight: 500;
    margin-bottom: 8px;
}
.cc-trade-map__tooltip-pct {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    /* Commodity colour, blended toward white so darker tokens (wood,
       coffee) stay readable on the dark glass surface. */
    color: color-mix(in srgb, var(--c, var(--ae-darkblue)) 55%, white);
    margin-bottom: 6px;
}
.cc-trade-map__tooltip-caption {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.72);
}

/* The card is the tooltip's positioning context, so anchor it. */
.cc-trade-map { position: relative; }

/* Data island — hidden, JS-only. */
.cc-trade-map__data { display: none; }


/* ================================================================
   RESPONSIVE  (breakpoints documented in tokens.css)
   ----------------------------------------------------------------
                    ≤ 640px    map + ranked list stack into single column
   ================================================================ */

/* === ≤ 640px (map + ranked list stack) ========================= */
@media (max-width: 640px) {
    .cc-trade-map__body { grid-template-columns: 1fr; }
}