/* ================================================================
   detail-pages/page-detail-country-commodity-treemap.css
   Weight-based squarified treemap (see js/country-detail-commodity-treemap.js).
   A detail-page widget loaded per-page on the member-state and
   producing-country detail pages — same convention as
   page-detail-donut-chart.css. Tiles take the commodity's brand
   colour via the shared --c map (components/commodity-colors.css);
   content is white. Reuses the existing tokens / fonts / card chrome.
   ================================================================ */

/* Topbar inside the card: subtitle + quiet total on the left, the
   COUNTRY · YEAR meta tag on the right. */
.cc-treemap-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}
.cc-treemap-topbar__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cc-treemap-topbar__subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-muted);
}
/* Quiet scale-context line, e.g. "Total monitored exports: 17.5M MT".
   No percentage — just the true sum. */
.cc-treemap-topbar__total {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--color-muted);
    opacity: 0.85;
}
.cc-treemap-topbar__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);
}

/* The treemap canvas — absolute-positioned tiles inside. */
.cc-treemap {
    position: relative;
    width: 100%;
    height: clamp(360px, 52vh, 560px);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--ae-white);
}
.cc-treemap__data { display: none; }

/* === TILE ====================================================== */
.cc-treemap__tile {
    position: absolute;
    overflow: hidden;
    border: 1.5px solid var(--ae-white);   /* #f8f8f8 — match the canvas bg so gaps blend */
    border-radius: 4px;
    background: var(--c, var(--ae-darkblue));   /* commodity colour from --c map */
    color: var(--white);
    cursor: default;
    /* Fade/scale-in on mount; animate position + size on resize so the
       reflow reads as intentional (the JS reuses tile elements). */
    animation: cc-treemap-in 0.35s ease backwards;
    transition: left 0.35s ease, top 0.35s ease,
                width 0.35s ease, height 0.35s ease,
                opacity 0.15s ease, filter 0.15s ease;
}
@keyframes cc-treemap-in {
    from { opacity: 0; transform: scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
    .cc-treemap__tile {
        animation: none;
        transition: opacity 0.15s ease, filter 0.15s ease;
    }
}
/* Hover: only while a specific tile is hovered, dim the OTHER tiles and
   brighten the hovered one. Keyed off :has(tile:hover) — not the card's
   own :hover — so moving onto the card doesn't dim everything at once. */
.cc-treemap:has(.cc-treemap__tile:hover) .cc-treemap__tile:not(:hover) { opacity: 0.55; }


.cc-treemap__tile-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 10px 12px;
}
.cc-treemap__tile-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* Existing commodity icon, recoloured white so it reads on the tile —
   nothing behind it. */
.cc-treemap__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.cc-treemap__tile-name {
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-treemap__tile-big {
    margin-top: auto;
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
}
.cc-treemap__tile-exact {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    opacity: 0.85;
}

/* --- Medium tier --- */
.cc-treemap__tile--md .cc-treemap__tile-inner { padding: 8px 10px; }
.cc-treemap__tile--md .cc-treemap__icon { width: 20px; height: 20px; }
.cc-treemap__tile--md .cc-treemap__tile-name { font-size: var(--fs-sm); }
.cc-treemap__tile--md .cc-treemap__tile-big { font-size: 1.15rem; }

/* --- Small tier --- */
.cc-treemap__tile--sm .cc-treemap__tile-inner { padding: 6px 8px; gap: 1px; }
.cc-treemap__tile--sm .cc-treemap__icon { width: 16px; height: 16px; }
.cc-treemap__tile--sm .cc-treemap__tile-name { font-size: var(--fs-xs); }
.cc-treemap__tile--sm .cc-treemap__tile-big { font-size: 0.95rem; margin-top: 4px; }
.cc-treemap__tile--sm .cc-treemap__tile-exact { font-size: 10px; }

/* === ENLARGED (floored) MARKING =============================== */
/* A fine, low-opacity diagonal hatch + a thin dashed inset frame — reads
   as "deliberately marked" rather than a flat wash. The footer legend
   explains it ("Hatched = enlarged for legibility"); no per-tile text. */
.cc-treemap__hatch {
    position: absolute;
    inset: 1px;
    z-index: 0;
    pointer-events: none;
    border: 1px dashed rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.10) 0,
        rgba(255, 255, 255, 0.10) 1px,
        transparent 1px,
        transparent 5px
    );
}

/* === FOOTER / LEGEND (below the treemap) ====================== */
.cc-treemap__legend {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: var(--space-sm) 0 0;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.cc-treemap__legend-swatch {
    flex-shrink: 0;
    width: 22px;
    height: 14px;
    margin-top: 2px;
    border-radius: 2px;
    border: 1px solid var(--color-input-border);
    background-color: var(--ae-darkblue);
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.4) 0,
        rgba(255, 255, 255, 0.4) 2px,
        transparent 2px,
        transparent 6px
    );
}

/* Screen-reader-only utility — hides the .cc-treemap__sr data-table
   fallback visually while keeping it in the accessibility tree. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ================================================================
   INTERACTIVE TREEMAP  (data-treemap-interactive)
   Opt-in mode used on the EU member-state detail page where each
   tile opens a ranking drawer (eu-detail-commodity-rank.js). Static
   treemaps on producing-country pages skip these rules — they don't
   carry the data attribute.
   ================================================================ */

.cc-treemap[data-treemap-interactive] .cc-treemap__tile {
    cursor: pointer;
}
.cc-treemap[data-treemap-interactive] .cc-treemap__tile:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: -3px;
}

/* Selected tile — visually identical to hover: the container wears
   .is-selecting while one tile is active, and non-selected siblings
   dim the same 0.55 the hover rule uses. No extra outline/ring on the
   selected tile itself — the dimming of siblings is the whole signal.

   :not(:hover) so the hovered tile also stays full-opacity while a
   different tile is selected. Without it, the hovered tile reads as
   dimmed (rule still fires on it: not-selected matches), which loses
   the hover signal the user came to make. */
.cc-treemap.is-selecting .cc-treemap__tile:not(.is-selected):not(:hover) {
    opacity: 0.55;
}

/* Hover hint — single floating chip at the top centre of the canvas,
   shown via :has() the moment any tile is hovered. Dark-glass to match
   the .info-tooltip family. JS appends the element once on init so
   we don't carry the markup on non-interactive treemaps. */
.cc-treemap__hint {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 22, 30, 0.78);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--white);
    padding: 8px 14px;
    border-radius: var(--radius-dropdown);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    visibility: hidden;
    z-index: 5;
}
.cc-treemap[data-treemap-interactive]:has(.cc-treemap__tile:hover) .cc-treemap__hint {
    visibility: visible;
}


/* ================================================================
   RANK DRAWER  (.cc-rank-drawer)
   Sits directly beneath the treemap card; opens when a tile fires a
   cc-treemap-select event. Card chrome mirrors .cc-trade-map (same
   white surface, dropdown radius, shared shadow, --space-md padding
   token) so the two cards read as siblings. Hidden by default; .is-
   open triggers the entrance animation. Close button on the right.
   ================================================================ */

.cc-rank-drawer {
    background-color: var(--white);
    border-radius: var(--radius-dropdown);
    box-shadow: var(--shadow);
    padding: clamp(12px, 1.6vw, 20px);
    margin-top: var(--space-md);
}
.cc-rank-drawer[hidden] { display: none; }
.cc-rank-drawer.is-open {
    animation: cc-rank-drawer-in 0.35s ease backwards;
}
@keyframes cc-rank-drawer-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .cc-rank-drawer.is-open { animation: none; }
}

/* Header row: commodity icon + name on the left, close × on the right.
   JS rebuilds the inner HTML each open so the icon + name pair always
   reflects the currently-selected commodity. */
.cc-rank-drawer__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.cc-rank-drawer__icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}
.cc-rank-drawer__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c, var(--ae-darkblue));
    line-height: 1.3;
}
.cc-rank-drawer__close {
    margin-left: auto;
    background: none;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--color-muted);
    font-size: 22px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.12s ease, background-color 0.12s ease;
}
.cc-rank-drawer__close:hover,
.cc-rank-drawer__close:focus-visible {
    color: var(--ae-darkblue);
    background: color-mix(in srgb, var(--ae-darkblue) 6%, transparent);
    outline: none;
}

/* Two-line summary like:
       Netherlands ranks 7th of 27
       3.9% of EU member state imports
   Muted text so the ranked list below it carries the visual weight;
   the two highlights (rank ordinal + share) are bold and pick up the
   active commodity colour via .cc-rank-drawer__hl. */
.cc-rank-drawer__summary {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-muted);
}
.cc-rank-drawer__hl {
    font-weight: 700;
    color: var(--c, var(--ae-darkblue));
}

/* Ranked list — two columns of EU member states. grid-auto-flow:
   column + grid-template-rows: repeat(14, ...) makes the list fill
   COLUMN-WISE: ranks 1-14 down the left column, then 15-27 down the
   right. On narrow viewports it collapses to a single column with
   normal row flow. */
.cc-rank-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(14, auto);
    grid-auto-flow: column;
    gap: 2px 16px;
}
/* Narrow viewport: list collapses to single column — see RESPONSIVE
   section at the end of the file. */

/* Row chrome — mirrors .cc-trade-map__list-row exactly so the two
   lists read as the same family. ::before is the share bar (length
   relative to the #1 country in the list, set per-row via --bar-w).
   overflow:hidden clips the bar to the row's rounded corners. */
.cc-rank-drawer__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    overflow: hidden;
}
.cc-rank-drawer__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;
    z-index: 0;
    transition: width 0.35s ease;
}
.cc-rank-drawer__row > * {
    position: relative;
    z-index: 1;
}

.cc-rank-drawer__row-rank {
    flex: 0 0 22px;
    text-align: right;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}
.cc-rank-drawer__row-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--ae-black);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-rank-drawer__row-pct {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--c, var(--ae-darkblue));
    font-variant-numeric: tabular-nums;
}
/* "This country" row — deliberately subtle emphasis per spec:
     • NO row background tint, NO side accent line
     • Darker bar (50% commodity tint vs 16% for siblings)
     • Bold country name
   That's the whole signal. */
.cc-rank-drawer__row.is-current .cc-rank-drawer__row-name {
    font-weight: 700;
}
.cc-rank-drawer__row.is-current::before {
    background: color-mix(in srgb, var(--c, var(--ae-darkblue)) 50%, transparent);
}


/* ================================================================
   PRINT — defend the PDF report against interactive leftovers
   The member-state page's PDF flow (member_state_detail.html, line 39
   startPdfDownload) reveals every tab panel and resizes the treemap,
   then calls window.print(). The interactive bits this file adds
   shouldn't bleed into that static report:
     • A tile that was clicked before print would dim its siblings via
       .is-selecting — reset opacity so every tile prints full colour.
     • An open rank drawer would spill its 27-row list into the PDF —
       hide it entirely; the PDF report is a snapshot, not an explore
       tool.
     • The hover hint chip is hover-only at runtime, but defend.
   ================================================================ */
@media print {
    .cc-treemap.is-selecting .cc-treemap__tile:not(.is-selected) {
        opacity: 1 !important;
    }
    .cc-treemap__hint,
    .cc-rank-drawer { display: none !important; }
}


/* ================================================================
   RESPONSIVE  (breakpoints documented in tokens.css)
   ----------------------------------------------------------------
                    ≤ 640px    rank-drawer list collapses to single column
   ================================================================ */

/* === ≤ 640px (rank-drawer single column) ====================== */
@media (max-width: 640px) {
    .cc-rank-drawer__list {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}