/* ================================================================
   page-case-studies.css  –  Compliance Checker
   Styles for the /case-studies page.

   Layout model
   ─────────────
   .cc-detail-tabbar    , sticky Table / Map / Filters tab bar (shared)
   .cc-detail-body      , grey full-bleed strip that wraps the layout
   .cs-layout           , CSS grid: .cs-rail (260px) + .cs-canvas (1fr)
     .cs-rail           , left filter column (chip strip + selects,
                           location, display, supply-chain link checkboxes)
     .cs-canvas         , holds the Table or Map tab panel

   Tokens come from tokens.css. A few rgba(0,0,0, X) shadow tints remain
   inline, they're generic neutral shadows, not brand colours.
   ================================================================ */


/* === PAGE LAYOUT =============================================== */

/* Every top-level block on the page is capped at the same width and
   centred, matching the pattern used on page-country.css and
   page-country-export.css. 95% of viewport up to 2400px keeps content
   off the screen edges on wide monitors while staying almost
   full-width on phones. */
h1 {
    max-width: min(95%, 2400px);
    margin-left: auto;
    margin-right: auto;
}

/* Short layman-friendly intro block directly under the page H1:
   paragraph on the left, nav bullets on the right. Columns auto-stack
   when neither side has room for its minimum width, so the layout
   responds without a hand-written @media breakpoint. */
.cs-intro-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(16px, 3vw, 40px);
    align-items: start;
    margin: 0 auto 18px;
    max-width: min(95%, 2400px);
}

.cs-intro,
.cs-intro-list {
    color: var(--color-muted);
    font-size: var(--fs-lg);
    line-height: 1.55;
    margin: 0;
}

.cs-intro-list          { padding-left: 18px; }
.cs-intro-list li       { margin-bottom: 4px; }
.cs-intro-list strong   { color: var(--ae-black); font-weight: 600; }

/* "Read more" methodology link, stands out against the muted body
   text so it reads as an action rather than blending into the prose. */
.cs-intro-link {
    color: var(--ae-darkblue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.cs-intro-link:hover {
    color: var(--ae-lightgreen);
}


/* Filter-drawer toggle, header close-X, and backdrop, hidden at
   desktop widths (rail is visible as a grid column there). Styled +
   revealed in the @media (max-width: 1400px) block below. */
.cs-filter-toggle,
.cs-rail__filter-header-close,
.cs-rail-backdrop {
    display: none;
}

/* Toolbar-meta sub-row inside the case-studies table header — wraps
   the results count + group-by chunks. Used by the shared
   case_study_table partial (so it appears on every page that includes
   the table, not just /case-studies). */
/* .cs-toolbar-meta is parked. The count chip it used to host moved
   into the search input's placeholder ("Search in X case studies…"),
   so this rule no longer needs to position anything. Kept here as a
   no-op landing in case the chip ever returns — drop if dead in a
   future cleanup pass. */
.cs-toolbar-meta {
    display: none;
}

.cs-results-count b {
    color: var(--ae-black);
}

/* Active filter chips — now lives at the top of the left rail, above
   the first filter group. JS hides the wrapper when no filters are
   set, so it only appears when there's something to clear. flex-wrap
   lets chips stack down the rail's narrow column. */
.cs-active-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    margin-bottom: 20px;
}

.cs-active-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    flex: 0 0 auto;
}

.cs-active-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.cs-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ae-darkblue);
    background: color-mix(in srgb, var(--color-chip-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-chip-accent) 14%, transparent);
    border-radius: var(--radius-pill);
    max-width: 280px;
}

.cs-chip-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.cs-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    line-height: 1;
    font-size: 14px;
    color: var(--ae-darkblue);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .12s;
}

.cs-chip-x:hover {
    background: color-mix(in srgb, var(--color-chip-accent) 15%, transparent);
}

.cs-clear-all {
    font-size: 12px;
    font-weight: 600;
    color: var(--ae-darkblue);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 6px;
    flex: 0 0 auto;
}

.cs-clear-all:hover {
    text-decoration: underline;
}

/* Two-column layout: sticky filter rail + content canvas.
   Rail width scales with viewport so it doesn't feel stranded next to a
   wide canvas on ultrawide monitors. clamp() floors at 260px for normal
   laptop widths, ceilings at 360px so the rail never crowds the canvas. */
.cs-layout {
    display: grid;
    grid-template-columns: clamp(260px, 18vw, 360px) 1fr;
    gap: 20px;
    align-items: start;
    /* Centres inside the .cc-detail-body grey strip (which provides
       its own padding-block). No bottom margin — the body's
       padding-bottom handles the gap to the footer. */
    margin: 0 auto;
    max-width: min(95%, 2400px);
}

/* === RAIL CHROME ==============================================
   The rail uses the shared .cc-detail-filters card visual (defined
   in detail-pages/page-detail-body.css). These rules layer per-page
   overrides on top: force display:flex (the shared class defaults
   to display:none and shows only on certain detail-page tabs),
   allow overflow (combobox popups inside the rail need to extend
   past the bottom border), set the sticky positioning + z-index,
   and bump the header title size for the more prominent rail
   header. */
.cs-rail {
    /* .cc-detail-filters defaults to display:none until a body-tab
       class flips it on; the rail is always visible, so override. */
    display: flex;

    position: sticky;
    /* Sit below the global nav AND the .cc-detail-tabbar (which is
       also sticky at top: var(--nav-h-scrolled)). Matches the sticky
       offset on .cc-detail-side from the country / company pages. */
    top: calc(var(--nav-h-scrolled) + var(--tabbar-h, 56px) + var(--space-sm));
    align-self: start;
    /* z-content (1), not z-elevated, so the sticky .cc-detail-tabbar
       (which is also at z-elevated) always paints on top of the rail
       as the page scrolls. */
    z-index: var(--z-content);
}

/* Bump the header title size for the rail — the shared class uses
   --fs-xs (narrow-sidebar context); the case-studies rail is the
   page's main filter card so the title should read larger. */
.cs-rail .cc-detail-filters__header-title {
    font-size: var(--fs-md);
    letter-spacing: -0.3px;
}

/* Body padding override — the shared class uses --space-md gutters
   on detail pages; case-studies wants 18px to match the original
   rail rhythm. Also drop the flex gap so the existing
   .cs-rail-group { margin-bottom: 20px } controls spacing between
   the 4 filter sections (no double-spacing). */
.cs-rail .cc-detail-filters__body {
    padding: 18px;
    gap: 0;
}

/* Close (X) button — only visible at ≤1400px breakpoints when the
   rail is in drawer mode. Default hidden via the .cs-rail__filter-
   header-close rule at the top of this file. */
.cs-rail__filter-header-close {
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--ae-darkblue) 25%, transparent);
    background: transparent;
    color: var(--ae-darkblue);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: background-color .15s, color .15s;
}
.cs-rail__filter-header-close:hover {
    background: var(--ae-darkblue);
    color: var(--white);
}

/* Title swap — default reads "Table filters"; when the user flips
   to the map view, the view-switch JS adds .cs-map-view-active to
   <body>, which hides the table title and shows the map title. */
.cs-rail__title-map { display: none; }
body.cs-map-view-active .cs-rail__title-table { display: none; }
body.cs-map-view-active .cs-rail__title-map   { display: inline; }

.cs-rail-group {
    margin-bottom: 20px;
}

.cs-rail-group:last-child {
    margin-bottom: 0;
}

/* Section title, doubles as the <summary> for the collapsible
   .cs-rail-group <details>. The trailing ▾ chevron indicates
   collapse state; rotates to ▸ when the section is closed. */
.cs-rail-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
    cursor: pointer;
    list-style: none;           /* hide Firefox's default marker */
    user-select: none;
}

/* Hide Safari/Chrome's default marker. */
.cs-rail-title::-webkit-details-marker {
    display: none;
}

/* Chevron (▾) on the right of the summary. */
.cs-rail-title::after {
    content: '';
    margin-left: auto;
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: var(--color-muted) transparent transparent transparent;
    transition: transform .2s ease;
}

/* Rotate chevron to ▸ when the section is collapsed. */
details.cs-rail-group:not([open]) > .cs-rail-title::after {
    transform: rotate(-90deg);
}

/* Hover feedback so users realise the title is clickable. */
.cs-rail-title:hover {
    color: var(--ae-darkblue);
}
.cs-rail-title:hover::after {
    border-top-color: var(--ae-darkblue);
}

/* Keyboard focus ring for accessibility. */
.cs-rail-title:focus-visible {
    outline: 2px solid var(--ae-darkblue);
    outline-offset: 2px;
    border-radius: 2px;
}

.cs-rail-divider {
    height: 1px;
    background: var(--color-track-bg);
    margin: 12px 0;
}

.cs-rail-hint {
    font-size: 12px;
    color: var(--color-muted);
    margin: 10px 0 0;
    line-height: 1.45;
}

/* Rail buttons (Add location / Clear / layer toggles). */
.cs-rail-btn {
    width: 100%;
    justify-content: center;
    font-size: 13px;
    margin-top: 8px;
}

/* "Clear location" secondary button — grey-outline pill with an X
   glyph, right-aligned on its own row. Hover fills the pill grey
   with white text. The wrap uses flex+justify-content:flex-end so
   the button hugs the right edge of the surrounding column. */
.cs-clear-location-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.cs-clear-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: transparent;
    /* Lighter grey than --color-muted (#666). 50% mix with white →
       roughly #b3b3b3 — clearly visible but softer than the primary
       muted text colour. */
    color: color-mix(in srgb, var(--color-muted) 50%, var(--white));
    border: 1px solid color-mix(in srgb, var(--color-muted) 50%, var(--white));
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base);
}

.cs-clear-location-btn:hover,
.cs-clear-location-btn:focus-visible {
    background: color-mix(in srgb, var(--color-muted) 50%, var(--white));
    color: var(--white);
    border-color: color-mix(in srgb, var(--color-muted) 50%, var(--white));
    outline: none;
}

.cs-coord-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.cs-rail #csv-file {
    font-size: 12px;
    width: 100%;
}

/* Filter inputs inside the rail */
.filter-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.filter-input:last-child {
    margin-bottom: 0;
}

.filter-input label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ae-darkblue);
}

.filter-select,
input[type="number"] {
    padding: 8px 14px;
    border: 1px solid var(--color-input-border);
    /* Pill-shaped to match the detail-page controls. */
    border-radius: var(--radius-pill);
    height: 36px;
    font-family: inherit;
    font-size: 13px;
    /* background-color (not shorthand) so the dropdown-arrow
       background-image (set below) is preserved. The shorthand
       `background:` would reset every background-* longhand. */
    background-color: var(--white);
    color: var(--ae-black);
}

/* Replace the browser-default <select> caret with the same triangle
   the combobox uses, so every dropdown on this page reads the same. */
.filter-select {
    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;
}

.filter-select:focus,
input[type="number"]:focus {
    outline: 2px solid var(--ae-green);
    outline-offset: -1px;
    border-color: var(--ae-green);
}

/* === IMAGE-DROPDOWN COMBOBOX OVERRIDES ============================
   The commodity / producing-country / company filters use the
   .cc-detail-combo combobox (defined in page-detail-frame.css) so
   each option can render an icon next to its label. These overrides
   match the typography to the rest of the rail's filter inputs and
   constrain image sizing so wide flags, square commodity icons, and
   variable-aspect company logos all sit in a tidy 22×22 box. */
.cs-image-combo .cc-detail-combo__button {
    /* Match the .filter-select look: lighter weight, 13px text, 36px
       tall so it sits in line with the other rail inputs. */
    padding: 6px 14px;
    height: 36px;
    font-weight: 500;
    font-size: 13px;
}

.cs-image-combo .cc-detail-combo__option {
    font-size: 13px;
}

.cs-image-combo .cc-detail-combo__flag,
.cs-image-combo .cc-detail-combo__option-flag {
    /* Fixed 22×22 box with object-fit:contain. Handles flags
       (letterboxed without distortion), commodity icons (square fit),
       and company logos (scaled down to fit) all from one rule. */
    width: 22px;
    height: 22px;
    object-fit: contain;
    background: transparent;
}

/* Coloured-dot fallback for commodities without a dedicated icon
   (corn, cotton, poultry). Sized to read at the same visual weight
   as the 22×22 icon box but as a circle so it keys to the dot used
   in the case-studies table rows. */
.cs-image-combo .cc-detail-combo__dot,
.cs-image-combo .cc-detail-combo__option-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ae-black) 6%, transparent);
    /* Centre the smaller dot within the same 22px lane the icons sit in */
    margin-inline: 4px;
}

/* Supply-chain link checkbox filter */
.cs-link-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-link-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ae-black);
    cursor: pointer;
    transition: opacity .15s;
}

.cs-link-filter-item:has(input:not(:checked)) {
    opacity: 0.45;
}

.cs-link-filter-cb {
    accent-color: var(--ae-darkblue);
    cursor: pointer;
}

/* Display-option checkboxes (Markers / Polygons / Scale by cleared area) */
.cs-display-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ae-black);
    cursor: pointer;
    padding: 4px 0;
    line-height: 1.3;
}

.cs-display-opt input[type="checkbox"] {
    accent-color: var(--ae-darkblue);
    cursor: pointer;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    margin: 0;
}

.cs-display-opt:hover {
    color: var(--ae-darkblue);
}

/* Info button (rail + table header, opens the supply-chain modal).
   Sized to sit inline with the surrounding header text rather than
   reading as a separate badge. */
.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: var(--ae-green);
    color: var(--white);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
}

.info-btn:hover {
    background: var(--ae-lightgreen);
    color: var(--ae-darkblue);
}

/* === MAP =============================== */

  /* Canvas column: stretches to match the grid row height (which is
     usually driven by the rail when it's taller than the canvas).
     Becomes a flex-column so the active tab panel can `flex: 1` and
     fill the stretched height — that's what gives #map-view a tall
     enough containing block for `position: sticky` to actually stick
     while the user scrolls past the rail. */
  .cs-canvas {
      align-self: stretch;
      min-width: 0;
      display: flex;
      flex-direction: column;
  }

  /* Active tab panel grows to fill the canvas height. Inert panels
     stay `display: none` so this has no effect on them. */
  .cs-canvas > .cc-detail-tabpanel--active {
      flex: 1;
  }


/* === GROUP BY CONTROLS ========================================= */
/* White control bar above the table holding the Group-by pill cluster.
   Sorting lives on the column headers themselves (see .cc-table__sort). */

.cs-control-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background: var(--white);
    border-bottom: 1px solid var(--color-track-bg);
    box-shadow: var(--shadow);
}

.cs-control-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--ls-uppercase);
    text-transform: uppercase;
    color: var(--color-muted);
    flex: 0 0 auto;
}

/* GROUP BY pills, segmented control on a track-bg base. The active
   pill lifts to a white surface with a faint shadow. */
.cs-groupby-pills {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--color-track-bg);
    border-radius: var(--radius-pill);
}

.cs-groupby-btn {
    border: 0;
    padding: 6px 14px;
    background: transparent;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s, color .15s, box-shadow .15s;
}

.cs-groupby-btn:hover {
    color: var(--ae-darkblue);
}

.cs-groupby-btn.is-active {
    background: var(--white);
    color: var(--ae-darkblue);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* === TABLE: page-specific overrides ============================
   The shared chrome (card, header strip, sort button, body rows,
   row hover, scroll wrapper, empty state) lives in table.css. What
   stays here:
     1. Column grid template (case-studies has 8 columns).
     2. Header-cell centering on this page (defaults inherit).
     3. Per-column text alignment overrides.
     4. Group-header chrome (this page renders groups as uppercase
        small labels — see also the --commodity stripe variant). */

/* 8-column grid. Fixed-width columns use the fluid --col-* tokens
   so they grow proportionally on ultrawide monitors instead of
   leaving the 2fr/1.5fr columns to absorb all the extra space.
     2fr            property + location
   --col-md         commodity
     1.5fr          linked companies
   --col-sm         cleared area
   --col-md         clearance period
   --col-md         case date
   --col-lg         supply-chain link
   --col-xs         pdf icon */
.cc-table--case-studies .cc-table__head,
.cc-table--case-studies .cc-table__row {
    grid-template-columns:
        2fr
        var(--col-md)
        1.5fr
        var(--col-sm)
        var(--col-md)
        var(--col-md)
        var(--col-lg)
        var(--col-xs);
}

/* Header-cell labels are centered on this page (defaults inherit). */
.cc-table--case-studies .cc-table__head .cc-table__cell {
    text-align: center;
}

/* Per-column text alignment for body cells. */
.cc-table__row .cs-col-area,
.cc-table__row .cs-col-date,
.cs-col-link,
.cs-col-pdf {
    text-align: center;
}

.cs-col-property .cs-property-name {
    font-weight: 600;
    color: var(--ae-black);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.cs-col-property .cs-property-location {
    font-size: 12px;
    color: var(--color-muted);
    margin-top: 2px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.cs-area-value {
    color: var(--ae-black);
    font-weight: 700;
}

.cs-area-unit {
    color: var(--color-muted);
    font-size: 12px;
    margin-left: 4px;
    font-weight: 500;
}

.cs-col-link,
.cs-col-pdf {
    text-align: center;
}


.cs-dash {
    color: var(--color-muted);
}

.cc-table__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-muted);
    font-size: 13px;
    background: var(--card-bg);
}

/* Group header rows */
.cc-table__group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 12px 8px;
    margin-top: 4px;
    border-bottom: 1px solid var(--color-track-bg);
    font-size: 13px;
    font-weight: 700;
    color: var(--ae-darkblue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cc-table__group:first-child {
    padding-top: 8px;
    margin-top: 0;
}

/* When grouped by commodity, the header gets a 2px stripe at its top
   in the commodity's own colour. Mirrors the .cc-table__group
   treatment on the member-state exporters table so both data tables
   read as the same system. --group-color is set inline by JS in
   case_studies.html. */
.cc-table__group--commodity {
    border-top: 2px solid var(--group-color, var(--ae-darkblue));
}
.cc-table__group--commodity:first-child {
    padding-top: 10px;
}

.cs-group-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    flex: 0 0 auto;
}

.cs-group-commodity-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ae-black) 6%, transparent);
}

.cs-group-name {
    flex: 0 0 auto;
}

.cs-group-count {
    /* Pinned to the right edge of the group-header row, mirrors the
       "_ products" count on the member-state exporters table so both
       tables read as the same kind of grouped list. */
    margin-left: auto;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-muted);
    font-size: 12px;
}

/* Commodity, dot + name inside each row */
.cs-commodity-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cs-commodity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ae-black);
    text-decoration: none;
    line-height: 1.3;
}

.cs-commodity:hover {
    color: var(--ae-darkblue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cs-commodity-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: 0 0 auto;
    /* Fallback, overridden per commodity below. */
    background: var(--color-muted);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
}

/* Per-commodity colours / icons. Commodities with a dedicated SVG
   icon (cattle/cocoa/coffee/palm/rubber/soy/wood + aliases) render
   the icon on a white circle. Commodities without an icon
   (corn/cotton/poultry) keep the coloured-dot fallback. */
.cs-commodity[data-commodity="cattle"]    .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_cattle.svg") center / 110% no-repeat; }
.cs-commodity[data-commodity="cocoa"]     .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_cocoa.svg")  center / 110% no-repeat; }
.cs-commodity[data-commodity="coffee"]    .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_coffee.svg") center / 110% no-repeat; }
.cs-commodity[data-commodity="palm"]      .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_palm.svg")   center / 110% no-repeat; }
.cs-commodity[data-commodity="palm oil"]  .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_palm.svg")   center / 110% no-repeat; }
.cs-commodity[data-commodity="rubber"]    .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_rubber.svg") center / 110% no-repeat; }
.cs-commodity[data-commodity="soy"]       .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_soy.svg")    center / 110% no-repeat; }
.cs-commodity[data-commodity="wood"]      .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_wood.svg")   center / 110% no-repeat; }
.cs-commodity[data-commodity="timber"]    .cs-commodity-dot { background: var(--white) url("../../images/icons/icon_commodity_wood.svg")   center / 110% no-repeat; }

.cs-commodity[data-commodity="corn"]      .cs-commodity-dot { background: var(--commodity-corn); }
.cs-commodity[data-commodity="cotton"]    .cs-commodity-dot { background: var(--commodity-cotton); }
.cs-commodity[data-commodity="poultry"]   .cs-commodity-dot { background: var(--commodity-poultry); }

/* Company pills (neutral grey) */
.cs-company-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cs-company-pill {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    border: 1px solid var(--color-track-bg);
    font-size: 12px;
    color: var(--ae-black);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.cs-company-pill:hover {
    background: color-mix(in srgb, var(--ae-lightgreen) 25%, transparent);
    border-color: color-mix(in srgb, var(--ae-green) 40%, transparent);
    color: var(--ae-darkblue);
}


/* === BADGES AND STATUS PILLS ================================== */
/* Neutral confidence scale using the site's teal palette, darker +
   filled = stronger evidence. Explicitly NOT red/amber/green so it
   doesn't read as a risk traffic-light. */

.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
}

.sc-badge .sc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.sc-badge-confirmed {
    background: var(--ae-darkblue);
    color: var(--white);
    border-color: var(--ae-darkblue);
}
.sc-badge-confirmed .sc-dot { background: var(--white); }

.sc-badge-probable {
    /* light teal tint, uses color-mix so it tracks the darkblue token */
    background: color-mix(in srgb, var(--ae-darkblue) 15%, var(--white));
    color: var(--ae-darkblue);
    border-color: color-mix(in srgb, var(--ae-darkblue) 25%, transparent);
}
.sc-badge-probable .sc-dot { background: var(--ae-darkblue); }

.sc-badge-potential {
    /* near-neutral panel, faintest tier in the scale */
    background: var(--card-bg);
    color: var(--color-badge-potential-text);
    border-color: var(--color-track-bg);
}
.sc-badge-potential .sc-dot {
    background: var(--color-badge-potential-dot);
}

/* PDF icon button (in the last table column) */
.cs-pdf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-track-bg);
    border-radius: 50%;
    background: var(--white);
    color: var(--ae-darkblue);
    font-size: 16px;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
}

.cs-pdf-icon:hover {
    background: var(--ae-darkblue);
    color: var(--white);
    border-color: var(--ae-darkblue);
}

.cs-pdf-icon svg {
    display: block;
}


/* === MAP VIEW ================================================== */

#map-view {
    display: none;
    position: sticky;
    /* Sit below the global nav AND the sticky .cc-detail-tabbar so
       the tabs stay clickable while scrolling. Matches the offset
       used by .cs-rail. Previously top: var(--nav-h) + 12px → the
       map's top edge overlapped the bottom of the tab bar by ~14px
       and rendered on top of the tabs. */
    top: calc(var(--nav-h-scrolled) + var(--tabbar-h, 56px) + var(--space-sm));
    height: clamp(620px, 55vh, 900px);
    width: 100%;
    border: 1px solid var(--color-track-bg);
    border-radius: var(--radius-dropdown);
    overflow: hidden;
    /* Stay below the sticky tab bar in case any Leaflet pane tries
       to climb above its container. */
    z-index: var(--z-base);
}

#map-container {
    height: 100%;
    width: 100%;
}

/* Coordinate-tools buttons (shared with rail) — pill-shaped to
   match the canonical .btn-teal pattern. */
.coordinate-btn {
    padding: 8px 14px;
    background: var(--ae-darkblue);
    color: var(--white);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
}

.coordinate-btn:hover {
    background: var(--ae-lightgreen);
    color: var(--ae-darkblue);
}

/* === MAP, MARKERS ============================================ */
/* Leaflet markers built by divIcon */
.marker-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: 0 0 4px rgba(0, 0, 0, .25);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Image variant, for commodities that have a dedicated SVG icon
   (cattle, cocoa, coffee, palm, rubber, soy, wood). The icon sits
   on a small white circle so it stays legible against the map.
   The icon is scaled slightly above 1 so it visually fills more
   of the circle (the source SVGs have whitespace in their viewBox). */
.marker-icon--image {
    background-color: var(--white);
    object-fit: contain;
    transform: scale(1.25);
}

.marker-icon--image.is-active {
    /* keep the active scale-up consistent on top of the base zoom */
    transform: scale(1.6);
}

.marker-icon.is-active {
    transform: scale(1.28);
    border-color: var(--ae-yellow);
    box-shadow: 0 0 0 4px rgba(254, 227, 39, .45), 0 0 10px rgba(8, 120, 128, .35);
}

.custom-basic-marker {
    display: flex;
    align-items: center;
    justify-content: center;
}

.csv-marker {
    width: 18px;
    height: 18px;
    background: red;                           /* diagnostic marker colour */
    border: 2px solid var(--white);
    box-shadow: 0 0 4px rgba(0, 0, 0, .25);
    border-radius: var(--radius-sm);
}

/* === MAP, LEGENDS ============================================ */
/* Commodity legend (top-right inside the map) */
.map-legend {
    position: absolute;
    top: 70px;
    right: 10px;
    width: 150px;
    background-color: var(--white);
    padding: 10px 15px;
    border-radius: var(--radius-dropdown);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    z-index: var(--z-tooltip);
}

.map-legend h4 {
    margin: 0 0 5px;
    font-size: 14px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.legend-swatch {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 50%;
    transform: rotate(-45deg);
    border: 1px solid var(--color-input-border);
}

/* Image variant, matches the icon-based map markers so the legend
   key reads as the same visual as the marker itself. */
.legend-swatch--image {
    background-color: var(--white);
    object-fit: contain;
    transform: scale(1.25);
    border: none;
}

/* Marker-size legend (appears only when "scale by cleared area" is on) */
.size-legend {
    top: 320px;
    right: 10px;
    width: 150px;
}

.size-legend .size-legend-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.size-legend .size-legend-item {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 10px;
}

.size-legend .size-legend-circle-wrap {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.size-legend .size-legend-circle {
    border: 2px solid var(--ae-black);
    border-radius: 50%;
    background: var(--ae-darkblue);
    box-sizing: border-box;
}

.size-legend .size-legend-label {
    font-size: 12px;
    color: var(--ae-darkblue);
    line-height: 1.2;
    white-space: nowrap;
}

.size-legend .size-legend-sub {
    font-size: 12px;
    color: var(--ae-darkblue);
    margin-top: 2px;
}

/* WorldCover land-use legend (bottom-left when the WMS overlay is on) */
.wms-legend {
    background: var(--white);
    padding: 10px 12px;
    border-radius: var(--radius-dropdown);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.2;
    max-width: 240px;
}

.wms-legend .legend-title {
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--ae-darkblue);
}

.wms-legend .legend-subtitle {
    font-size: 11px;
    opacity: 0.75;
    margin-bottom: 8px;
}

.wc-legend-items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.wc-legend-item {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 8px;
    align-items: center;
}

.wc-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.wc-label {
    color: var(--ae-black);
    font-size: 12px;
}

/* === MAP, PIN-CARD POPUP ======================================
   Leaflet popup chrome is hijacked: the default close button is
   suppressed (bindPopup is called with closeButton:false), Leaflet's
   wrapper only carries the rounded corners + drop-shadow, and
   everything inside is our own .cs-pin-card block. The downward
   "speech-bubble tail" is Leaflet's .leaflet-popup-tip, restyled
   to match the card's white surface. Markup lives in case_studies
   .html as the pin_card_popup() Jinja macro. */

.leaflet-popup-content-wrapper {
    border-radius: var(--radius-dropdown);
    padding: 0;
    overflow: hidden;
    /* Two-layer shadow: a soft ambient drop + a closer contact shadow
       so the card lifts off the satellite imagery without looking heavy. */
    box-shadow:
        0 12px 32px -8px rgba(0, 0, 0, 0.25),
        0 4px 10px -4px rgba(0, 0, 0, 0.12);
}

.leaflet-popup-content {
    margin: 0;
    padding: 0;
    width: 300px !important;
    font-family: "Work Sans", Arial, sans-serif;
}

/* Downward speech-bubble tail — uses the same white surface as the
   card body so the tail looks like a continuation of the card. */
.leaflet-popup-tip {
    background: var(--white);
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.12);
}


/* --- Pin card layout ----------------------------------------------
   Vertical stack: commodity top-stripe, chip + close row, title, grey
   metadata strip, download CTA. 14px horizontal padding everywhere
   except the top stripe and meta strip, which use negative margin to
   bleed full-width to the card's rounded edges. */
.cs-pin-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 14px;
    background: var(--white);
    color: var(--ae-black);
    font-family: "Work Sans", Arial, sans-serif;
}

/* Per-commodity colour resolution — applies to any descendant of
   .cs-pin-card carrying data-commodity, so the same map drives the
   chip border + text, the chip-dot fallback, AND the top stripe
   bands. Mirrors the colour tokens used by the case-studies table
   dots and the stat-card commodity icons so a commodity always
   reads in the same hue across the page. */
.cs-pin-card [data-commodity="cattle"]    { --c: var(--commodity-cattle); }
.cs-pin-card [data-commodity="cocoa"]     { --c: var(--commodity-cocoa); }
.cs-pin-card [data-commodity="coffee"]    { --c: var(--commodity-coffee); }
.cs-pin-card [data-commodity="corn"]      { --c: var(--commodity-corn); }
.cs-pin-card [data-commodity="cotton"]    { --c: var(--commodity-cotton); }
.cs-pin-card [data-commodity="palm"]      { --c: var(--commodity-palm); }
.cs-pin-card [data-commodity="palm-oil"]  { --c: var(--commodity-palm); }
.cs-pin-card [data-commodity="poultry"]   { --c: var(--commodity-poultry); }
.cs-pin-card [data-commodity="rubber"]    { --c: var(--commodity-rubber); }
.cs-pin-card [data-commodity="soy"]       { --c: var(--commodity-soy); }
.cs-pin-card [data-commodity="wood"]      { --c: var(--commodity-wood); }
.cs-pin-card [data-commodity="timber"]    { --c: var(--commodity-wood); }

/* Top stripe — one band per commodity, equal-width via flex:1, butting
   against each other with no gap so adjacent colours touch. Negative
   margin pulls it out to the card's rounded edges; the leaflet wrapper's
   overflow:hidden clips the band ends to the corner radius, giving the
   stripe the same rounded top-left + top-right as the card. */
.cs-pin-card__stripe {
    display: flex;
    height: 5px;
    margin: -12px -14px 0;
}

.cs-pin-card__stripe-band {
    flex: 1 1 0;
    min-width: 0;
    background: var(--c, var(--color-muted));
}

/* Top row: commodity chips on the left, circular close on the right. */
.cs-pin-card__top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.cs-pin-card__chips {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

/* Outline commodity chip — white background, 40%-alpha commodity-coloured
   border, commodity-coloured text + (icon | dot). Per-commodity colour
   comes via the --c custom property resolved by [data-commodity] selectors
   further down, so the rule itself stays declarative. */
.cs-pin-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 6px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--c, var(--color-muted)) 40%, transparent);
    border-radius: var(--radius-pill);
    color: var(--c, var(--ae-black));
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    text-transform: capitalize;
}

.cs-pin-card__chip-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Coloured-dot fallback for commodities with no dedicated SVG icon
   (cotton, corn, poultry). Sized to read at roughly the same visual
   mass as the 16px icon. */
.cs-pin-card__chip-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    margin: 0 3px;
    background: var(--c, var(--color-muted));
}

/* Circular close pinned to the top-right of the card. Subtle grey
   fill that darkens on hover. */
.cs-pin-card__close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--color-track-bg);
    color: var(--color-muted);
    border: 0;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.cs-pin-card__close:hover {
    background: var(--color-muted);
    color: var(--white);
}

/* Farm-name title. NexaBold (matches the site's display typeface).
   Slight negative tracking + tight leading so a two-line farm name
   still fits cleanly in the 300px card. */
.cs-pin-card__title {
    margin: 0;
    font-family: "NexaBold", "Work Sans", Arial, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--ae-black);
}

/* Country / Region metadata strip — two equal columns, grey
   background matching the .cc-detail-body strip on the country /
   company detail pages, hairlines top + bottom. Negative horizontal
   margin lets it bleed to the card's edges while everything else
   keeps the 14px inset. */
.cs-pin-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
    padding: 10px 14px;
    margin: 0 -14px;
    background: var(--ae-white);
    border-top: 1px solid var(--color-track-bg);
    border-bottom: 1px solid var(--color-track-bg);
}

.cs-pin-card__meta-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* Uppercase muted micro-label — same rhythm as the .cs-rail-title
   (WHERE / WHAT) labels on the left rail, so the popup reads as
   part of the same family. */
.cs-pin-card__meta-label,
.cs-pin-card__cta-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-uppercase);
    color: var(--color-muted);
    line-height: 1.2;
}

.cs-pin-card__meta-value {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ae-black);
    word-break: break-word;
}

/* Single download CTA — muted label above, full-width teal pill
   below. One button per popup (every location has exactly one
   case study) so there is no per-commodity stack here. */
.cs-pin-card__cta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-pin-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--ae-darkblue);
    color: var(--white) !important;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: background var(--transition-base), color var(--transition-base);
}

.cs-pin-card__button:hover {
    background: var(--ae-lightgreen);
    color: var(--ae-darkblue) !important;
}

.cs-pin-card__button-icon {
    font-size: 14px;
}


/* === MODAL (supply-chain link classification info) =========== */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
}

.modal.is-open {
    display: block;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ae-black) 55%, transparent);
    z-index: 0;
}

.modal-dialog {
    position: relative;
    width: 1000px;
    max-width: 120vw;
    margin: 6vh auto;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--ae-darkblue);
    color: var(--white);
}

.modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.modal-close {
    border: none;
    background: transparent;
    color: var(--white);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

.modal-body {
    padding: 14px 16px;
    overflow: auto;
    font-size: 14px;
    line-height: 1.4;
}

.modal-body h4 {
    margin: 14px 0 6px 0;
}

.modal-body ul {
    margin: 6px 0 0 18px;
}

.modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--color-track-bg);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-primary {
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--ae-darkblue);
    color: var(--white);
    cursor: pointer;
}

.modal-primary:hover {
    background: var(--ae-lightgreen);
    color: var(--ae-darkblue);
}


/* === TOOLTIP (rail ⓘ info flyouts) ============================ */
/* .csv-info-text is portaled to <body> on DOMContentLoaded so it
   can never be trapped inside a transformed/contained ancestor.
   z-index 1050 sits between the map/legends (1000) and the nav (1100). */

.csv-info-tooltip {
    cursor: help;
    font-weight: bold;
    margin-left: 6px;
    color: var(--ae-green);
    position: relative;
}

.csv-info-text {
    display: none;
    position: fixed;
    z-index: var(--z-portal);
    background: var(--ae-black);
    color: var(--white);
    padding: 10px;
    border-radius: var(--radius-sm);
    width: 260px;
    white-space: pre-line;
    font-weight: normal;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.csv-info-text.is-shown {
    display: block;
}


/* === RESPONSIVE (tablet) ======================================= */
/* At widths ≤1200 the rail becomes an off-canvas drawer that slides
   in from the left. The canvas goes full-width; the drawer sits on
   top of the table/map with a soft backdrop so filter changes are
   visible live. The table also uses a tighter column grid. */

@media (max-width: 1200px) {
    /* Canvas takes full width, rail is out of flow as a drawer. */
    .cs-layout {
        grid-template-columns: 1fr;
    }

    /* Filters drawer-trigger — pinned to the right edge of the
       .cc-detail-tabbar__inner row, only visible at narrow widths
       (the rail is a grid column at desktop widths, no trigger needed). */
    .cs-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        padding: 8px 14px;
        background: var(--ae-darkblue);
        color: var(--white);
        border: none;
        border-radius: var(--radius-pill);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        flex: 0 0 auto;
        transition: background-color .15s, color .15s;
    }
    .cs-filter-toggle:hover {
        background: var(--ae-lightgreen);
        color: var(--ae-darkblue);
    }

    /* Rail becomes a fixed left-drawer that starts below the fixed
       nav so the whole content is visible (no clipping behind nav). */
    .cs-rail {
        position: fixed;
        top: calc(var(--nav-h) + 12px);
        left: 0;
        bottom: 0;
        width: min(360px, 90vw);
        max-width: 100vw;
        padding: 0;
        border: none;
        border-right: 1px solid var(--color-track-bg);
        border-radius: 0;
        overflow-y: auto;
        max-height: calc(100vh - var(--nav-h) - 24px);
        transform: translateX(-100%);
        transition: transform .25s ease;
        /* Above the map (1000) but below the fixed nav (1100) and
           the portaled tooltip (1050). */
        z-index: var(--z-drawer);
        box-shadow: 4px 0 18px rgba(0, 0, 0, 0.15);
    }
    /* Drop the filter-header's corner radius in drawer mode — the
       rail itself has border-radius:0 there, so the header should
       sit square at the top of the drawer. */
    .cs-rail .cc-detail-filters__header {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .cs-rail.is-open {
        transform: translateX(0);
    }

    /* Reveal the close-X inside the filter-card header so users can
       dismiss the drawer. Stays hidden at >1400px (the rail is a
       fixed grid column there, no closing needed). */
    .cs-rail__filter-header-close {
        display: inline-flex;
    }

    /* Make the filter-card header sticky to the top of the drawer
       so the title + close are always one click away as the user
       scrolls the filter list. */
    .cs-rail .cc-detail-filters__header {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    /* Backdrop starts below the nav so the nav itself isn't dimmed.
       Soft tint so the table/map stays readable behind the drawer. */
    .cs-rail-backdrop {
        display: block;
        position: fixed;
        top: var(--nav-h);
        right: 0;
        bottom: 0;
        left: 0;
        background: color-mix(in srgb, var(--ae-black) 18%, transparent);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
        z-index: var(--z-drawer-bg);
    }
    .cs-rail-backdrop.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity .2s ease, visibility 0s linear 0s;
    }

    /* Lock body scroll while drawer is open so the drawer itself
       scrolls internally instead of dragging the page under it. */
    body.cs-rail-open {
        overflow: hidden;
    }

    /* Tighter table-row grid on narrow viewports */
    .cc-table__head,
    .cc-table__row {
        grid-template-columns: 1.8fr 95px 1.6fr 90px 95px 90px 110px 40px;
        gap: 10px;
    }
}

/* === RESPONSIVE (mobile) ======================================= */
/* At ≤768 the table scrolls horizontally inside its
   .cc-table-scroll (overflow-x from table.css); min-width on
   the grid keeps the layout readable. */

@media (max-width: 768px) {
    .cc-table-card .cc-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cc-table__head,
    .cc-table__row {
        min-width: 980px;
    }
}