/*
 * Chart card: every chart view is a .chart-container with a title, an Actions menu at the top right,
 * a control bar, the graph and a source note as footer. Built by create_chart_panel() in
 * src/utils/ui_helpers.py and by the hand-built layouts in the chart packages under src/charts.
 */
.chart-container {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    padding: var(--space-4) var(--space-5) 0;
    margin-bottom: var(--space-4);
}
.chart-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-navy-900); letter-spacing: var(--tracking-title); line-height: var(--leading-tight); margin: 0 0 var(--space-3); padding-right: 9rem; min-height: 2rem; }
.chart-title h6, .chart-title .chart-title { font-size: inherit; font-weight: inherit; margin: 0; padding: 0; min-height: 0; color: inherit; }
/* Title and subtitle (card_title() in src/utils/ui_helpers.py): what the chart shows, then place, years and unit */
.chart-title-text { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--color-navy-900); line-height: var(--leading-tight); letter-spacing: var(--tracking-title); }
.chart-subtitle { margin: 3px 0 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-500); line-height: 1.4; letter-spacing: var(--tracking-body); }
.chart-actions { position: absolute; top: var(--space-3); right: var(--space-4); z-index: 5; }
.chart-actions .dropdown-menu { font-size: var(--text-sm); min-width: 14rem; }
.chart-actions .dropdown-toggle.ds-button { border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-blue-600); }

.chart-controls, .chart-container > .filter-container { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; margin-bottom: var(--space-3); }

/* Radio rows become segmented controls. assets/shell.js adds a sliding thumb (.has-thumb, ::before positioned by
   the --thumb-* properties) that glides from the old choice to the new one; without it the checked label is filled. */
.radio-buttons { position: relative; isolation: isolate; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--color-fill-quiet); border: 0; border-radius: 9px; }
.radio-buttons label { position: relative; display: inline-flex; align-items: center; margin: 0 !important; padding: 5px var(--space-3); border-radius: 7px; cursor: pointer; font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); color: var(--color-ink-500); white-space: nowrap; transition: color var(--dur-fast) linear; }
.radio-buttons input[type="radio"] { position: absolute; opacity: 0; width: 0 !important; height: 0 !important; margin: 0 !important; }
.radio-buttons label:has(input:checked) { background: var(--color-thumb); color: var(--color-navy-900); font-weight: 600; box-shadow: 0 0 0 0.5px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.12); }
.radio-buttons label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.radio-buttons label:hover { color: var(--color-ink-900); }
/* Dash 4 colours a hovered or focused option with the accent; a segmented control keeps its text neutral */
.radio-buttons.dash-options-list .dash-options-list-option:hover,
.radio-buttons.dash-options-list .dash-options-list-option:focus-within { color: var(--color-ink-900); }
.radio-buttons.dash-options-list .dash-options-list-option:has(input:checked) { color: var(--color-navy-900); }
.radio-buttons.has-thumb label:has(input:checked) { background: transparent; box-shadow: none; }
.radio-buttons.has-thumb::before {
    content: ""; position: absolute; z-index: -1; left: 0; top: 0;
    width: var(--thumb-w, 0); height: var(--thumb-h, 0);
    transform: translate(var(--thumb-x, 0), var(--thumb-y, 0));
    background: var(--color-thumb); border-radius: 7px;
    box-shadow: 0 0 0 0.5px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.12);
}
.radio-buttons.thumb-ready::before { transition: transform var(--dur-spring) var(--ease-spring), width var(--dur-spring) var(--ease-spring), height var(--dur-spring) var(--ease-spring); }
/* Pressing a segment squeezes the thumb slightly, as the native control does */
.radio-buttons.has-thumb.is-pressing::before { transform: translate(var(--thumb-x, 0), var(--thumb-y, 0)) scale(0.96); }

.indicator-note-container { margin: var(--space-3) calc(-1 * var(--space-5)) 0; padding: var(--space-3) var(--space-5) var(--space-4); background: var(--color-surface-2); border-top: 1px solid var(--hairline); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.indicator-source, .indicator-note { font-style: normal; font-size: var(--text-xs); line-height: 1.55; letter-spacing: var(--tracking-caption); color: var(--color-ink-500); margin: 0; padding: 0; background: transparent; border: 0; }
.indicator-source { margin-bottom: var(--space-2); }
.indicator-source b, .indicator-note b { color: var(--color-ink-700); }

@media (max-width: 768px) {
    .chart-container { padding: var(--space-3) var(--space-3) 0; }
    .indicator-note-container { margin: var(--space-3) calc(-1 * var(--space-3)) 0; padding: var(--space-3); }
    .chart-title { padding-right: 7rem; }
    .radio-buttons label { padding: 5px var(--space-2); }
}

/* Native checkboxes and sliders follow the brand colour */
input[type="checkbox"], input[type="range"] { accent-color: var(--color-fill-accent); }


/* Phones: controls shrink to the width of the card instead of pushing the page wider */
@media (max-width: 768px) {
    .filter-container, .filter-control-group, .country-benchmark-selector-container, .city-selector-container,
    .dropdown-group, .cities-growth-metric-container, .cities-growth-metric-group {
        min-width: 0 !important; width: 100%; max-width: 100%; flex-wrap: wrap;
    }
    .dash-dropdown-wrapper, button.dash-dropdown { width: 100% !important; max-width: 100%; min-width: 0 !important; }
    .radio-buttons, .dash-options-list { max-width: 100%; flex-wrap: wrap; }
    .dash-options-list-option, .dash-options-list-option-text { white-space: normal; }
}
@media (max-width: 768px) {
    .dash-dropdown-trigger, .dash-dropdown-grid-container { overflow: hidden; max-width: 100%; }
    .tab-content-container img, .ds-content img { max-width: 100%; height: auto; }
    .tab-content-container [style*="padding: 2rem"] { padding: var(--space-3) !important; }
}
@media (max-width: 768px) {
    .split-row { flex-direction: column !important; }
    .split-figure { width: 100% !important; min-width: 0 !important; height: auto !important; }
}
@media (max-width: 768px) {
    input.dash-dropdown-focus-target { width: 100% !important; min-width: 0 !important; max-width: 100%; }
}

/* Tables inside a card scroll sideways instead of widening the page */
.chart-container table { display: block; max-width: 100%; overflow-x: auto; }

/* Long notes show two lines and a "Read more" button (assets/notes.js) */
.indicator-note.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.indicator-more { appearance: none; border: 0; background: none; padding: 0; margin-top: var(--space-1); font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--color-blue-600); cursor: pointer; }
.indicator-more:hover { text-decoration: underline; text-underline-offset: 2px; }
.indicator-more:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Projections overview: text beside the picture of the risk drivers (hazard, exposure, vulnerability), which is
   drawn for white and sits on a white sheet in both themes */
.ds-projections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); gap: var(--space-6); align-items: center; margin-top: var(--space-3); }
.ds-projections-text { max-width: 68ch; color: var(--color-ink-700); font-size: var(--text-sm); line-height: var(--leading-normal); }
.ds-projections-text p { margin: 0 0 var(--space-3); }
.ds-projections-lead { font-size: var(--text-base); color: var(--color-ink-900); }
.ds-projections-heading { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-base); font-weight: 600; letter-spacing: var(--tracking-title); color: var(--color-ink-900); }
.ds-projections-image { display: block; width: 100%; height: auto; margin: 0 auto; background: var(--color-paper); border-radius: var(--radius-md); }
:root[data-theme="dark"] .ds-projections-image { padding: var(--space-2); box-sizing: border-box; }
@media (max-width: 900px) {
    .ds-projections { grid-template-columns: minmax(0, 1fr); }
    .ds-projections-image { max-width: 22rem; }
}

/* Population and GDP maps: two pre-drawn images side by side, each on a white sheet in both themes */
.ds-map-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.ds-map { margin: 0; }
.ds-map-label { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-900); }
.ds-map-image { display: block; width: 100%; height: auto; max-height: 600px; object-fit: contain; background: var(--color-paper); border-radius: var(--radius-md); }
:root[data-theme="dark"] .ds-map-image { padding: var(--space-2); box-sizing: border-box; }
@media (max-width: 768px) { .ds-map-pair { grid-template-columns: minmax(0, 1fr); } }

/* PML summary table: on a phone the four columns fit with tighter cells and smaller text (cell padding is inline) */
@media (max-width: 480px) {
    .ds-risk-table-card { padding: var(--space-3) !important; }
    .ds-risk-table { font-size: var(--text-xs) !important; }
    .ds-risk-table th, .ds-risk-table td { padding: 6px 4px !important; }
}