/* @docs charts.css - ISTP research insight cards (chart frames, narrative, callout), inline-SVG chart conventions (.ihit, .iscatter, .istp-bar), chart 1 scatter caps + legend pill tightening, chart-segment tooltip styling used by chart-download.js. */

        /* ========= ISTP research insight cards (2 -> 5) =========
           Each card carries: numbered title + subtitle + download menu,
           then the chart SVG, narrative paragraph and an INTERESTING
           call-out box. Reused for the IWPP / SWRO / etc. tabs later. */
        .istp-insight-card {
            background: var(--bg-sidebar);
            border: 1px solid var(--border-soft);
            border-radius: 10px;
            padding: 1rem 1.3rem 1.15rem;
            margin: 0 0 1.25rem;
            /* No max-width - span the full content column */
        }
        .istp-insight-title { font-size: 16px; }
        .istp-insight-sub   { font-size: 13px; }
        .istp-insight-chart { padding: 0.8rem 1rem; margin: 0.55rem 0 0.8rem; }
        .istp-insight-narr  { font-size: 13.5px; margin-bottom: 0.8rem; }
        .istp-insight-callout { padding: 0.65rem 1rem 0.75rem; }
        .istp-insight-callout p { font-size: 13px; }
        .istp-insight-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.6rem;
        }
        .istp-insight-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-dark);
            line-height: 1.35;
        }
        .istp-insight-num {
            display: inline-block;
            margin-right: 0.3rem;
            color: var(--text-dark-tertiary);
            font-weight: 500;
        }
        .istp-insight-sub {
            font-size: 12.5px;
            color: var(--text-dark-tertiary);
            margin-top: 0.25rem;
        }
        .istp-insight-chart {
            background: #fff;
            border: 1px solid var(--border-soft);
            border-radius: 8px;
            padding: 0.9rem 1rem;
            margin: 0.5rem 0 0.9rem;
            overflow-x: auto;
        }
        .istp-insight-svg {
            display: block;
            width: 100%;
            max-width: 100%;
            margin: 0;
            height: auto;
        }
        /* Chart 1 (tariff scatter) - let the SVG fill the full content
           column. The viewBox is wide enough that on-screen fonts come
           out close to their viewBox sizes once the SVG fills the card. */
        #istpBenchmarkChart #istpScatterSvg { width: 100%; max-width: 100%; margin: 0; }
        /* Tighter legend pills below chart 1 */
        #istpScatterLegend > span { font-size: 12px !important; padding: 3px 8px !important; }
        .istp-insight-svg .istp-bar { transition: opacity 150ms ease; }
        .istp-insight-svg .istp-bar:hover { opacity: 0.78; }
        /* Sponsor labels that double as links to the developer profile.
           Subtle underline on hover so it reads as 'clickable' without
           cluttering the resting chart. */
        .istp-developer-link { transition: text-decoration-color 120ms; }
        .istp-developer-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
        .istp-insight-popup .istp-developer-link:hover { background: var(--bg-sidebar); }
        /* Brief highlight on the table row when a chart click scrolls to it */
        /* Clickable chart bar / bubble overlays */
        svg .ihit { cursor: pointer; transition: opacity 120ms; }
        svg .ihit:hover { fill: rgba(26,26,26,0.06); }
        svg .iscatter { cursor: pointer; transition: stroke-width 120ms; }
        svg .iscatter:hover { stroke-width: 3; }
        .istp-insight-narr {
            margin: 0 0 0.85rem;
            font-size: 13.5px;
            line-height: 1.55;
            color: var(--text-dark);
        }
        .istp-insight-callout {
            background: #f7eeea;
            border-left: 3px solid #c45a3a;
            border-radius: 6px;
            padding: 0.7rem 0.95rem 0.8rem;
        }
        .istp-insight-callout-label {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #8a3b22;
            margin-bottom: 0.3rem;
        }
        .istp-insight-callout p {
            margin: 0;
            font-size: 13px;
            line-height: 1.55;
            color: var(--text-dark);
        }

/* ===== Chart segment tooltips (used by chart-download.js attachChartTooltips) ===== */
.chart-tooltip {
    position: fixed; pointer-events: none; z-index: 1000;
    background: #1a1a1a; color: #fff; padding: 10px 13px; border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px; line-height: 1.5; max-width: 320px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0; transition: opacity 120ms;
}
.chart-tooltip[data-show="1"] { opacity: 1; }
.chart-tooltip-title { font-weight: 600; margin-bottom: 4px; font-size: 12.5px; color: #f6c542; }
.chart-tooltip-body { color: #f0eee9; }