/* =============================================================================
   INDUSTRIAL POLICY MONITORING FRONTEND STYLESHEET (LIGHT MODE DEFAULT)
   ============================================================================= */

/* --- Custom Properties & Theme Design System --- */
:root {
    /* Color Palette */
    --accent-color: #0071e3;          /* Signal Blue */
    --accent-glow: rgba(0, 113, 227, 0.15);
    --accent-hover: #0077ed;
    --accent-secondary: #a370ff;      /* Purple Accent */
    
    /* Backgrounds */
    --bg-main: #f5f7fa;
    --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #e9edf5 100%);
    
    /* Glassmorphism Variables */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.04);
    --glass-shadow-hover: 0 16px 48px 0 rgba(31, 38, 135, 0.08);
    --glass-blur: blur(24px);
    
    /* Typography Colors */
    --text-primary: #1d1d1f;          /* Charcoal */
    --text-secondary: #515154;        /* Charcoal Gray */
    --text-muted: #86868b;            /* Muted Gray */
    --text-on-accent: #ffffff;
    
    /* Borders & Corners */
    --border-radius: 20px;
    --border-radius-sm: 12px;
    --card-border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* Status Colors */
    --status-active-bg: rgba(40, 199, 111, 0.12);
    --status-active-txt: #1e874b;
    --status-active-border: rgba(40, 199, 111, 0.25);
    
    --status-announced-bg: rgba(0, 113, 227, 0.08);
    --status-announced-txt: #0071e3;
    --status-announced-border: rgba(0, 113, 227, 0.2);
    
    --status-discussion-bg: rgba(255, 159, 67, 0.12);
    --status-discussion-txt: #d97818;
    --status-discussion-border: rgba(255, 159, 67, 0.25);
    
    --status-cancelled-bg: rgba(234, 84, 85, 0.1);
    --status-cancelled-txt: #ea5455;
    --status-cancelled-border: rgba(234, 84, 85, 0.2);
    
    --status-expired-bg: rgba(108, 117, 125, 0.1);
    --status-expired-txt: #5f666c;
    --status-expired-border: rgba(108, 117, 125, 0.2);
}

/* --- Global Reset & Reset Box-sizing --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-primary);
    background: var(--bg-gradient);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 2rem;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: 
        radial-gradient(rgba(0, 113, 227, 0.04) 1.5px, transparent 1.5px),
        linear-gradient(rgba(0, 113, 227, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 113, 227, 0.015) 1px, transparent 1px);
    background-size: 24px 24px, 120px 120px, 120px 120px;
    background-position: 0 0, 0 0, 0 0;
    pointer-events: none;
    z-index: -2;
}

/* --- Static Ambient Glow Backdrops (No Distracting Animations) --- */
.ambient-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(140px);
    z-index: -1;
    opacity: 0.8;
}

@media (max-width: 575px) {
    .ambient-glow {
        display: none;
    }
}

.bg-glow-1 {
    background: rgba(0, 113, 227, 0.05); /* Very subtle sky blue */
    top: 5%;
    left: 10%;
}

.bg-glow-2 {
    background: rgba(163, 112, 255, 0.05); /* Very subtle soft purple */
    bottom: 10%;
    right: 5%;
}

/* --- Layout Container --- */
.dashboard-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Header Styling --- */
.glass-header {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--card-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.header-logo-area {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.logo-text-block h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    background: linear-gradient(135deg, #1d1d1f 30%, #515154 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-text-block .subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.25rem;
}

.quick-stats-bar {
    display: flex;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.4);
    padding: 0.5rem 1rem;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 575px) {
    .dashboard-container {
        padding: 1rem;
        gap: 1rem;
    }

    .glass-header,
    .navigation-controls {
        padding: 1rem;
        border-radius: 16px;
    }

    .header-logo-area {
        min-width: 0;
    }

    .logo-text-block h1 {
        font-size: 1.35rem;
    }

    .quick-stats-bar {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        border-radius: 18px;
    }
}

.quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quick-stat .label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.quick-stat .value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-color);
}

/* --- Navigation / Filter Controls --- */
.navigation-controls {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-group.flex-right {
    align-self: flex-start;
}

@media (min-width: 992px) {
    .navigation-controls {
        display: grid;
        grid-template-columns: 1.5fr 1.1fr 1.5fr;
        align-items: start;
        gap: 2.5rem;
    }
    
    .control-group {
        flex: none;
        width: 100%;
    }
    
    .control-group.flex-right {
        justify-self: start;
        align-self: start;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

.control-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tab-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Compact Rounded Pill Selectors */
.tab-pill {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.4);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-pill:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.tab-pill.active {
    background: #ffffff;
    color: var(--accent-color);
    border-color: rgba(0, 113, 227, 0.15);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.08), inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.view-pills {
    display: flex;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.25rem;
    border-radius: 40px;
    gap: 0.15rem;
}

.view-pill {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    border-radius: 40px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    justify-content: center;
}

.view-pill:hover {
    color: var(--text-primary);
}

.view-pill.active {
    background: #ffffff;
    color: var(--text-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

/* Constrain nav switcher icons (inline SVGs have no width/height attrs) */
.view-pill svg.nav-svg {
    width: 1.15em;
    height: 1.15em;
    stroke-width: 2.2px;
    flex-shrink: 0;
    vertical-align: middle;
    transition: transform 0.25s ease;
}

.view-pill:hover svg.nav-svg {
    transform: scale(1.1);
}

@media (max-width: 575px) {
    .view-pills {
        border-radius: 18px;
        gap: 0.25rem;
        width: 100%;
    }

    .view-pill {
        flex: 1 1 calc(50% - 0.25rem);
        padding: 0.55rem 0.65rem;
        font-size: 0.78rem;
    }
}

/* --- Translucent Panel Container Class --- */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--card-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--border-radius);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card.pop-effect:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--glass-shadow-hover);
}

/* --- Main View Layout Structures --- */
.main-dashboard-content {
    min-height: 50vh;
}

.dashboard-view {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
}

.dashboard-view.active {
    display: flex;
    animation: fadeInView 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInView {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   VIEW 1: GLOBAL OVERVIEW
   ============================================================================= */

/* Dashboard intro blurb (Overview) */
.dashboard-intro {
    padding: 1.25rem 1.75rem;
}

.dashboard-intro p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 72rem;
}

.dashboard-intro strong {
    color: var(--text-primary);
}

.intro-lead {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    color: var(--text-primary) !important;
    font-weight: 500;
    max-width: 78rem;
}

.intro-caveat {
    margin-top: 1.1rem;
    font-size: 0.82rem !important;
    color: var(--text-muted) !important;
    font-style: italic;
}

.dashboard-intro-flow {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.dashboard-intro-flow strong {
    font-family: 'Outfit', sans-serif;
    color: var(--accent-color);
}

/* Overview Metrics Grid */
.overview-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Three tiles since 2026-08-27 (measures / mapped / scanned). The grid was
   hard-coded to two columns from the two-tile days, which pushed the third
   onto its own row; from tablet width up all three share one line. */
@media (min-width: 576px) {
    .overview-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .overview-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.metric-card {
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

.huge-value {
    font-family: 'Outfit', sans-serif;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.25rem;
    display: block;
}

.metric-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Charts Grid */
.charts-row {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .charts-row {
        flex-direction: row;
    }
    .flex-1 { flex: 1; }
    .flex-2 { flex: 2; }
}

.margin-top {
    margin-top: 0.5rem;
}

.chart-container-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 380px;
    /* Flex items default to min-width:auto = the canvas's current pixel width,
       which Chart.js re-sets every layout — so cards could grow with the
       viewport but never shrink back (one-way ratchet, clipped off-screen by
       body{overflow-x:hidden}). Zeroing the minimum lets the resize observer
       see a smaller parent again. */
    min-width: 0;
}

@media (max-width: 575px) {
    .chart-container-card {
        padding: 1rem;
    }
}

.card-header-block h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.card-header-block .card-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* One-clause methodological footnotes under charts and stat blocks (house
   style: a single short clause naming the limitation, never a wall of text). */
.stat-footnote {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.45;
    margin-top: 0.5rem;
}

/* The shared Overview-charts caveat sits tight under its charts row despite
   the view's 1.5rem flex gap. */
p.charts-row-note {
    margin-top: -0.75rem;
    padding: 0 0.25rem;
}

/* "Curated comparable set" badge — marks surfaces that compare countries on
   core-press sources only (national dailies, business press, newswires;
   trade and regional titles excluded). Rendered by renderCoreBadge() and
   absent entirely when the compile carries no core flag. */
.core-set-badge {
    display: inline-flex;
    align-items: center;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    background: var(--accent-glow);
    color: var(--accent-color);
    border: 1px solid rgba(0, 113, 227, 0.25);
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 0.4rem;
    cursor: help;
}

/* Extended-dataset state of the same badge: the reader has switched off the
   curated filter, so the badge warns rather than reassures. Amber, not blue —
   these counts are NOT comparable across countries. */
.core-set-badge.is-extended {
    background: rgba(191, 121, 0, 0.10);
    color: #8a5a00;
    border-color: rgba(191, 121, 0, 0.30);
    white-space: normal;      /* longer label than the curated one it was sized for */
    line-height: 1.3;
}

/* Curated <-> Extended switch, rendered beside the badge on every
   cross-country surface (compare, heatmap, monthly coverage). */
.core-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.35rem;
    min-height: 24px;                              /* WCAG 2.2 SC 2.5.8 target size */
    padding: 0.3rem 0.55rem 0.3rem 0.35rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: transparent;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.core-switch:hover { border-color: rgba(0, 113, 227, 0.45); }

.core-switch:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.core-switch-track {
    position: relative;
    display: inline-block;
    width: 1.6rem;
    height: 0.9rem;
    border-radius: 999px;
    background: rgba(120, 120, 128, 0.32);
    transition: background 0.15s ease;
    flex: none;
}

.core-switch-thumb {
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.core-switch.is-on { color: var(--accent-color); }
.core-switch.is-on .core-switch-track { background: var(--accent-color); }
.core-switch.is-on .core-switch-thumb { transform: translateX(0.7rem); }

.core-switch-label { white-space: nowrap; }

.chart-wrapper {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Trending & Popular list widget */
.trending-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.trending-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
    min-width: 0;
}

.trending-item:hover {
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transform: translateX(4px);
}

.trending-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    margin-right: 1.5rem;
    min-width: 0;
}

.trending-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.trending-policy {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.trending-scores {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .trending-item {
        align-items: stretch;
        flex-direction: column;
        padding: 0.85rem 1rem;
    }

    .trending-meta {
        margin-right: 0;
    }

    .trending-scores {
        justify-content: space-between;
        gap: 0.75rem;
    }
}

.score-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.score-badge .score-lbl {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.score-badge .score-num {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent-color);
}

.score-badge .trend-arrow {
    font-size: 0.95rem;
    font-weight: 700;
}

.trend-up { color: #28c76f; }
.trend-down { color: #ea5455; }
.trend-stable { color: #6c757d; }

/* Monthly coverage card (Overview) */
.mc-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin-bottom: 1.25rem;
}

.mc-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mc-control-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.mc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mc-pill {
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mc-pill:hover { border-color: rgba(0, 113, 227, 0.3); color: var(--text-primary); }

.mc-pill.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.monthly-coverage-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 2rem;
}

@media (min-width: 768px) {
    .monthly-coverage-list { grid-template-columns: repeat(3, 1fr); }
}

.mc-country-col {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.mc-country-head {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 0.45rem;
    margin-bottom: 0.3rem;
    border-bottom: 2px solid var(--accent-glow);
}

/* Each row is a faint horizontal bar (background fill = relative article count)
   so the full measure name can use the entire row width and wrap freely. */
.mc-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    background: linear-gradient(90deg,
        rgba(0, 113, 227, 0.11) var(--mc-fill, 0%),
        rgba(0, 0, 0, 0) var(--mc-fill, 0%));
    transition: box-shadow 0.18s ease;
}

.mc-item:hover { box-shadow: inset 0 0 0 1.5px rgba(0, 113, 227, 0.28); }

.mc-rank {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
    line-height: 1.35;
}

.mc-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.mc-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    /* Full name — wrap instead of truncating */
    overflow-wrap: anywhere;
}

.mc-context {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.mc-count {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--accent-color);
    flex-shrink: 0;
    line-height: 1.3;
    text-align: right;
}

.mc-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* =============================================================================
   VIEW 2: MEASURES REGISTRY
   ============================================================================= */

/* Search & select inputs (used by the Measures Explorer + Compare picker) */
.search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 1.25rem;
    color: var(--text-muted);
    font-size: 1rem;
}

.search-input-wrapper input {
    width: 100%;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 0.75rem 1.25rem 0.75rem 2.75rem;
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-primary);
    outline: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-input-wrapper input:focus {
    background: #ffffff;
    border-color: rgba(0, 113, 227, 0.3);
    box-shadow: 0 4px 20px rgba(0, 113, 227, 0.06);
}

.select-wrapper {
    position: relative;
}

.select-wrapper select {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.55);
    color: var(--text-secondary);
    outline: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 160px;
}

.select-wrapper select:focus {
    background: #ffffff;
    border-color: rgba(0, 113, 227, 0.3);
}

@media (max-width: 767px) {
    .select-wrapper,
    .select-wrapper select {
        width: 100%;
    }
}

/* Tag chips (used in the measure detail drawer) */
.tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Status Pill Designs */
.status-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-pill.active {
    background: var(--status-active-bg);
    color: var(--status-active-txt);
    border: 1px solid var(--status-active-border);
}

.status-pill.announced {
    background: var(--status-announced-bg);
    color: var(--status-announced-txt);
    border: 1px solid var(--status-announced-border);
}

.status-pill.in_discussion {
    background: var(--status-discussion-bg);
    color: var(--status-discussion-txt);
    border: 1px solid var(--status-discussion-border);
}

.status-pill.cancelled {
    background: var(--status-cancelled-bg);
    color: var(--status-cancelled-txt);
    border: 1px solid var(--status-cancelled-border);
}

.status-pill.expired {
    background: var(--status-expired-bg);
    color: var(--status-expired-txt);
    border: 1px solid var(--status-expired-border);
}

.instrument-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-secondary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goal-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    background: rgba(163, 112, 255, 0.06);
    color: var(--accent-secondary);
    border: 1px solid rgba(163, 112, 255, 0.18);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status indicator dots (explorer rows, footer, legends) */
.status-indicator-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--status-expired-txt);
}

.status-indicator-dot.active { background: #28c76f; box-shadow: 0 0 8px rgba(40, 199, 111, 0.4); }
.status-indicator-dot.announced { background: #0071e3; box-shadow: 0 0 8px rgba(0, 113, 227, 0.35); }
.status-indicator-dot.in_discussion { background: #ff9f43; box-shadow: 0 0 8px rgba(255, 159, 67, 0.4); }
.status-indicator-dot.cancelled { background: #ea5455; box-shadow: 0 0 8px rgba(234, 84, 85, 0.4); }
.status-indicator-dot.expired { background: #6c757d; }
.status-indicator-dot.unknown { background: #b0b3b8; }
.status-indicator-dot.high { background: #28c76f; box-shadow: 0 0 8px rgba(40, 199, 111, 0.4); }
.status-indicator-dot.medium { background: #ff9f43; box-shadow: 0 0 8px rgba(255, 159, 67, 0.4); }
.status-indicator-dot.mismatch { background: #ea5455; box-shadow: 0 0 8px rgba(234, 84, 85, 0.4); }
.status-indicator-dot.inline { vertical-align: middle; margin-right: 0.4rem; }

/* =============================================================================
   VIEW 2: MEASURES EXPLORER LAYOUT
   ============================================================================= */
.explorer-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .explorer-layout {
        grid-template-columns: 300px 1fr;
        align-items: stretch;        /* both panes share one height */
        height: calc(100vh - 2rem);  /* taller panes; small page scroll reveals the bottom. Tunable. */
        min-height: 640px;
    }
}

/* Sidebar Filter Panel */
.filter-panel {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Filter pane fills the shared layout height and scrolls internally */
@media (min-width: 992px) {
    .filter-panel {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
    }
}

.filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 0.75rem;
}

.filter-panel-header h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.clear-all-btn {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.clear-all-btn:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Search input inside panel */
.search-section {
    margin-bottom: 0.25rem;
}

/* Quick Toggles */
.toggles-section {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.3);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.toggle-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
}

.toggle-control input[type="checkbox"] {
    accent-color: var(--accent-color);
    cursor: pointer;
}

/* Instrument Types group wrapper — header matches the other facet headers */
.facet-group-section {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding-bottom: 0.5rem;
}

.facet-group-section > h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.85rem 0 0.25rem;
}

/* Collapsible Accordion Facets */
.facet-accordion {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    padding: 0.85rem 0;
}

.facet-accordion:last-child {
    border-bottom: none;
}

.facet-accordion-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.facet-accordion-summary::-webkit-details-marker {
    display: none;
}

.facet-accordion-summary h3 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Intervention-side group toggle inside an instrument accordion header */
.group-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.group-toggle {
    accent-color: var(--accent-color);
    cursor: pointer;
    flex-shrink: 0;
}

.group-toggle-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.accordion-active-badge {
    background: var(--accent-glow);
    color: var(--accent-color);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    margin-left: auto;
    margin-right: 0.5rem;
}

.accordion-arrow {
    color: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.facet-accordion[open] .accordion-arrow {
    transform: rotate(180deg);
}

.facet-accordion-content {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.25rem;
}

/* Checkbox facet rows with counts */
.facet-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.825rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.facet-checkbox-row:hover {
    color: var(--text-primary);
}

.checkbox-label-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.checkbox-label-wrapper input[type="checkbox"] {
    accent-color: var(--accent-color);
    cursor: pointer;
    flex-shrink: 0;
}

.facet-checkbox-row span.label-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.facet-checkbox-row span.facet-count {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Explorer Main Content Area */
.explorer-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Results pane fills the shared layout height; the list inside it scrolls */
@media (min-width: 992px) {
    .explorer-main {
        height: 100%;
        min-height: 0;
    }
}

/* Active Chips Bar */
.active-chips-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--border-radius-sm);
}

.active-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #ffffff;
    border: 1px solid rgba(0, 113, 227, 0.15);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.01);
}

.active-chip .remove-chip-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s ease;
}

.active-chip .remove-chip-btn:hover {
    color: var(--status-cancelled-txt);
}

/* Results header */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}

.results-count {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sort-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sort-control label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Compact raw compact measures rows */
.measures-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* On desktop the results list is a fixed-height internal scroller. Because its
   box height no longer depends on the number of rows, filtering can never change
   the document height — which is what was clamp-scrolling the window ("page jump").
   The results header above it (count + sort) stays fixed; the sidebar is sticky. */
@media (min-width: 992px) {
    .measures-rows {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 0.4rem;
    }
}

.measure-explorer-row {
    padding: 1.15rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
    .measure-explorer-row {
        grid-template-columns: 1.8fr 2.5fr 1.2fr;
        gap: 1.5rem;
    }
}

.measure-explorer-row:hover {
    background: #ffffff;
    border-color: rgba(0, 113, 227, 0.18);
    /* No lift/scale: rows live inside an overflow scroll container, so a
       transform or large shadow would get clipped at the container edges. */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.row-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.row-title-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.measure-name-text {
    font-family: 'Outfit', sans-serif;
    font-size: 0.925rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parent-policy-line {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.row-chip {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-secondary);
    border: 1px solid rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}

.row-chip.side-chip {
    background: rgba(0, 113, 227, 0.05);
    color: var(--accent-color);
    border-color: rgba(0, 113, 227, 0.12);
}

.row-chip.instrument-chip {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.06);
}

.row-chip.auth-chip {
    background: rgba(0, 0, 0, 0.03);
    /* Specific ministry names can be long — keep the chip from stretching the row */
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-chip.goal-chip {
    background: rgba(163, 112, 255, 0.05);
    color: var(--accent-secondary);
    border-color: rgba(163, 112, 255, 0.15);
}

.row-context-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.row-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 768px) {
    .row-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.2rem;
    }
}

.row-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--accent-color);
}

/* "Reported monetary value not available" — keep it quiet, not a headline figure */
.row-amount.row-amount-empty {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.3;
}

.row-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}


/* =============================================================================
   VIEW 3: ANALYSIS & COMPARE VIEW
   ============================================================================= */
.compare-header-panel {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.compare-actions {
    display: flex;
    gap: 0.5rem;
}

.compare-picker-panel {
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--glass-shadow);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

/* Country x sector picker matrix */
.cmx-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.cmx-grid {
    display: grid;
    gap: 0.4rem;
    align-items: stretch;
    min-width: 520px;
}

.cmx-corner { }

.cmx-head, .cmx-rowhead {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.cmx-head {
    justify-content: center;
    text-align: center;
    padding: 0 0.25rem 0.35rem;
}

.cmx-rowhead { padding-right: 0.5rem; }

.cmx-head.cmx-all-head,
.cmx-rowhead.cmx-all-head {
    color: var(--text-muted);
    font-style: italic;
}

.cmx-cell {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    min-height: 2.1rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.cmx-cell:hover {
    border-color: rgba(0, 113, 227, 0.4);
    color: var(--accent-color);
    background: rgba(0, 113, 227, 0.06);
}

.cmx-cell:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
    color: var(--text-muted);
}

.cmx-cell.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #ffffff;
}

.cmx-cell.cmx-all-cell {
    background: rgba(0, 0, 0, 0.03);
    border-style: dashed;
}

.cmx-cell.cmx-all-cell.active {
    background: var(--accent-secondary);
    border-color: var(--accent-secondary);
    border-style: solid;
    color: #ffffff;
}

/* Comparison Columns Grid */
.compare-columns-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .compare-columns-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .compare-columns-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

/* Profile card column style */
.compare-column-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    position: relative;
    overflow: hidden;
}

.compare-column-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 1rem;
}

.compare-column-header h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.compare-column-header .subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    font-weight: 500;
}

.remove-column-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.remove-column-btn:hover {
    background: rgba(234, 84, 85, 0.08);
    color: var(--status-cancelled-txt);
}

/* Unified metric block inside compare cards */
.compare-metric-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.compare-metric-block h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Custom aligned metric rows */
.compare-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.compare-metric-row .val {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
}

/* Aligned mini metrics bar */
.compare-status-bar-container {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.04);
    margin-top: 0.25rem;
}

.compare-status-bar-container .compare-status-seg {
    height: 100%;
}

.compare-status-seg.active { background: #28c76f; }
.compare-status-seg.announced { background: #0071e3; }
.compare-status-seg.in_discussion { background: #ff9f43; }
.compare-status-seg.other { background: #b0b3b8; }

/* Stacked CSS bars */
.compare-stacked-bar {
    display: flex;
    height: 24px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.03);
    margin: 0.5rem 0;
}

.stacked-bar-segment {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffffff;
    transition: all 0.3s ease;
}

.stacked-bar-segment.demand { background: #0071e3; }
.stacked-bar-segment.supply { background: #a370ff; }
.stacked-bar-segment.infrastructure { background: #28c76f; }
.stacked-bar-segment.trade { background: #ff9f43; }
.stacked-bar-segment.regulatory { background: #ea5455; }

/* Inferred Side Legend */
.compare-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.725rem;
    color: var(--text-muted);
}

.compare-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.compare-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.compare-legend-dot.demand { background: #0071e3; }
.compare-legend-dot.supply { background: #a370ff; }
.compare-legend-dot.infrastructure { background: #28c76f; }
.compare-legend-dot.trade { background: #ff9f43; }
.compare-legend-dot.regulatory { background: #ea5455; }

/* Instrument counts mini list */
.compare-instrument-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Goal-mix pie chart inside a compare column */
.compare-pie-wrap {
    position: relative;
    height: 210px;
    margin-top: 0.25rem;
}

.compare-instrument-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.compare-inst-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    margin-right: 1rem;
}

.compare-inst-count-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.compare-inst-bar {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.compare-inst-fill {
    display: block;
    height: 100%;
    background: var(--accent-color);
    border-radius: 2px;
}

.compare-inst-count {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 14px;
    text-align: right;
}

/* Most prominent measures list */
.compare-prominent-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.compare-prominent-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
}

.compare-prominent-item:hover {
    background: #ffffff;
    border-color: rgba(0, 113, 227, 0.15);
    transform: translateX(3px);
}

.compare-prominent-name {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-prominent-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
}


/* =============================================================================
   INITIATIVES VIEW (aggregated cross-country / cross-sector programs)
   ============================================================================= */

.initiatives-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.init-card {
    padding: 0;
    overflow: hidden;
}

.init-summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.init-summary::-webkit-details-marker { display: none; }

.init-summary-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.init-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    min-width: 0;
}

.init-level-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}

.init-level-badge.eu,
.init-level-badge.european,
.init-level-badge.supranational {
    background: rgba(0, 113, 227, 0.12);
    color: #0071e3;
}

.init-level-badge.regional_state,
.init-level-badge.regional,
.init-level-badge.subnational {
    background: rgba(40, 199, 111, 0.14);
    color: #1a9e57;
}

.init-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.init-card[open] .init-chevron { transform: rotate(180deg); }

.init-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.init-metric strong {
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    font-weight: 700;
}

.init-status-mini {
    height: 6px;
    margin-top: 0.1rem;
}

.init-body {
    padding: 0 1.4rem 1.4rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 0.2rem;
    padding-top: 1.1rem;
}

.init-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem;
    margin-bottom: 1.3rem;
}

.init-block-wide { grid-column: 1 / -1; }

.init-block h4 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 0.7rem;
    font-weight: 700;
}

@media (max-width: 720px) {
    .init-analytics-grid { grid-template-columns: 1fr; }
}

/* Footprint matrix. Auto-layout tables treat width:100% as a floor — they
   never shrink below min-content, which at 9 country columns exceeds the
   half-width grid cell at every viewport, so the bare table used to paint
   across the grid gap into the "Intervention side" block. The wrap gives the
   table its own scroll context (same pattern as .compare-picker-panel). */
.init-footprint-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.init-footprint {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.78rem;
}

.init-footprint th,
.init-footprint td {
    text-align: center;
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.init-footprint thead th {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    background: rgba(0, 0, 0, 0.015);
}

.init-footprint .row-head {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    /* Row-heads wrap ("Semiconductors & Microelectronics" alone is ~230px
       nowrap) — cuts the table's min-content so the scroll wrap is rarely
       needed at desktop widths. */
}

.init-footprint td.on {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #0071e3;
    background: rgba(0, 113, 227, 0.08);
}

.init-footprint td.off { color: transparent; }

/* Authority delegation chain */
.init-delegation {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.init-delegation-col { flex: 1; min-width: 0; }

.init-delegation-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.45rem;
}

.init-delegation-col .compare-instrument-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.init-delegation-arrow {
    align-self: center;
    color: var(--text-muted);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Scope toolbar above the cards */
.initiatives-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 0.9rem 1.4rem;
}

.initiatives-toolbar-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.initiatives-toolbar-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* Reach line: country + sector chips with per-context measure counts */
.init-reach {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.init-reach-set {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.init-reach-chip {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.4;
}

.init-reach-chip strong {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
}

.init-reach-chip.country {
    background: rgba(0, 113, 227, 0.09);
    color: #0071e3;
    border: 1px solid rgba(0, 113, 227, 0.18);
}

.init-reach-chip.sector {
    background: rgba(163, 112, 255, 0.1);
    color: #7a4fd0;
    border: 1px solid rgba(163, 112, 255, 0.22);
}

.init-reach-divider {
    width: 1px;
    height: 14px;
    background: rgba(0, 0, 0, 0.12);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

.init-cross-badge {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.22rem 0.5rem;
    border-radius: 6px;
    background: rgba(255, 159, 67, 0.14);
    color: #b06a1f;
    border: 1px solid rgba(255, 159, 67, 0.28);
    white-space: nowrap;
}

/* Side-by-side context comparison inside a card */
.init-sbs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.init-sbs-header h4 { margin: 0; }

.init-sbs-toggle { display: flex; gap: 0.35rem; }

.mc-pill.small {
    font-size: 0.7rem;
    padding: 0.25rem 0.7rem;
}

.init-sbs-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.9rem;
    align-items: start;
}

.init-sbs-col {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-sm);
    padding: 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.init-sbs-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.init-sbs-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.init-sbs-count {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.init-sbs-count strong {
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
}

.init-sbs-spread {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.init-sbs-sub {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.init-sbs-col .compare-instrument-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.init-sbs-top {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.init-sbs-measure {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: all 0.18s ease;
    min-width: 0;
    font-size: 0.78rem;
}

.init-sbs-measure:hover {
    background: #ffffff;
    border-color: rgba(0, 113, 227, 0.18);
}

.init-sbs-measure .status-indicator-dot { flex-shrink: 0; }

.init-sbs-measure-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.init-sbs-measure-count {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.init-sbs-none {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Member measures */
.init-member-count {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--text-muted);
    margin-left: 0.3rem;
}

.init-member-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 480px;
    overflow-y: auto;
}

.init-member-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.03);
    cursor: pointer;
    transition: all 0.18s ease;
    min-width: 0;
}

.init-member-row:hover {
    background: #ffffff;
    border-color: rgba(0, 113, 227, 0.15);
    transform: translateX(3px);
}

.init-member-row .status-indicator-dot { flex-shrink: 0; }

.init-member-name {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}

.init-member-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
    padding-left: 0.7rem;
    flex-shrink: 0;
}

/* Country × sector context groups inside the member-measure list */
.init-block-note {
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    margin-left: 0.35rem;
}

.init-ctx-group {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-sm);
    background: rgba(255, 255, 255, 0.35);
    overflow: hidden;
    /* The parent list is a max-height flex column: without this, open groups
       get shrunk to fit and their rows are clipped instead of scrolling. */
    flex-shrink: 0;
}

.init-ctx-group + .init-ctx-group { margin-top: 0.5rem; }

.init-ctx-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
}

.init-ctx-summary::-webkit-details-marker { display: none; }

.init-ctx-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
}

.init-ctx-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.init-ctx-group[open] .init-ctx-chevron { transform: rotate(180deg); }

.init-ctx-rows {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0 0.6rem 0.6rem;
}

.init-footer-note,
.init-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1rem;
}

.init-empty { padding: 3rem 1rem; }

@media (max-width: 560px) {
    .init-member-meta { display: none; }
    .init-delegation { flex-direction: column; }
    .init-delegation-arrow { transform: rotate(90deg); }
    .init-sbs-columns { grid-template-columns: 1fr; }
    .initiatives-toolbar-hint { display: none; }
    .init-reach-divider { display: none; }
}


/* =============================================================================
   LOGIN GATE (auth.js) — encrypted-data unlock screen
   ============================================================================= */

.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(0, 113, 227, 0.10), transparent 60%),
        radial-gradient(1000px 500px at 90% 110%, rgba(163, 112, 255, 0.10), transparent 60%),
        rgba(245, 246, 248, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-overlay.login-done { opacity: 0; pointer-events: none; }

.login-card {
    width: min(380px, 100%);
    padding: 2.2rem 2rem;
    text-align: center;
}

.login-brand svg { color: var(--accent-color); margin-bottom: 0.6rem; }

.login-brand h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
}

.login-brand p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0 0 1.4rem;
}

.login-form { display: flex; flex-direction: column; gap: 0.7rem; }

.login-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: 0.88rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius-sm, 10px);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-input:focus {
    border-color: rgba(0, 113, 227, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

.login-submit {
    margin-top: 0.3rem;
    padding: 0.7rem 1rem;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent-color, #0071e3);
    border: none;
    border-radius: var(--border-radius-sm, 10px);
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}

.login-submit:hover:not(:disabled) { filter: brightness(1.08); }
.login-submit:active:not(:disabled) { transform: scale(0.985); }
.login-submit:disabled { opacity: 0.65; cursor: default; }

.login-error {
    font-size: 0.78rem;
    color: #ea5455;
    font-weight: 600;
}

.login-note {
    margin-top: 1.2rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

@keyframes login-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

.login-card.login-shake { animation: login-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

.view-pill.auth-signout { margin-left: auto; }


/* =============================================================================
   REPORTED SENTIMENT (press framing) — explorer chip + drawer section
   ============================================================================= */

.row-chip.sentiment-chip {
    border: none;
    font-weight: 600;
}

.sentiment-press-note {
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.sentiment-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.sentiment-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.sentiment-score {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.sentiment-conf {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.sentiment-summary {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.sentiment-holders {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sentiment-holder {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.sentiment-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 0.42rem;
    flex-shrink: 0;
}

.sentiment-holder-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sentiment-holder-group {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sentiment-holder-stance {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: 0.4rem;
}

.sentiment-holder-quote {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.45;
}


/* =============================================================================
   EXPANDABLE DRAWER OVERLAY & PANEL
   ============================================================================= */

.detail-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    z-index: 102; /* Overlay sits between Drawer 1 and Drawer 2 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.detail-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    z-index: 103; /* Drawer 2 sits on top of Drawer 1 */
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-left: var(--card-border);
    border-radius: var(--border-radius) 0 0 var(--border-radius);
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.07);
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 600px) {
    .detail-drawer {
        width: 32vw;
        min-width: 440px;
        max-width: 660px;
        right: -100%;
    }
}

.detail-drawer.active {
    right: 0;
}

.close-drawer-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.close-drawer-btn:hover {
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transform: scale(1.05);
}

.drawer-scroll-container {
    height: 100%;
    overflow-y: auto;
    padding: 2.5rem;
}

@media (max-width: 599px) {
    .drawer-scroll-container {
        padding: 4rem 1rem 1.25rem;
    }
}

/* Inside Drawer Contents styling */
.drawer-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.drawer-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.drawer-header .policy-ref {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.drawer-header h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.2;
}

.drawer-meta-section {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 1.25rem;
    border-radius: var(--border-radius-sm);
}

.meta-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
}

.meta-row .lbl {
    color: var(--text-muted);
    font-weight: 500;
}

.meta-row .val {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.drawer-content-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.drawer-content-section h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.drawer-content-section p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Monthly Status Snapshot History — vertical timeline */
.drawer-vertical-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
    position: relative;
    padding-left: 0.5rem;
}

.vertical-timeline-step {
    display: flex;
    gap: 1.25rem;
    position: relative;
}

.step-marker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 16px;
}

.step-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 113, 227, 0.15);
    background: #86868b;
    z-index: 2;
    flex-shrink: 0;
}

.step-dot.active { background: #1e874b; box-shadow: 0 0 8px rgba(40, 199, 111, 0.7); }
.step-dot.announced { background: #0071e3; box-shadow: 0 0 8px rgba(0, 113, 227, 0.7); }
.step-dot.in_discussion { background: #d97818; box-shadow: 0 0 8px rgba(255, 159, 67, 0.7); }
.step-dot.cancelled { background: #ea5455; box-shadow: 0 0 8px rgba(234, 84, 85, 0.7); }
.step-dot.expired { background: #5f666c; }

.step-line {
    position: absolute;
    top: 16px;
    bottom: -24px;
    width: 2px;
    background: rgba(0, 113, 227, 0.08);
    z-index: 1;
}

.vertical-timeline-step:last-child .step-line {
    display: none;
}

.step-content-card {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.step-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.step-window {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.step-status-tag {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: uppercase;
}

.step-status-tag.active { background: rgba(40, 199, 111, 0.1); color: #1e874b; }
.step-status-tag.announced { background: rgba(0, 113, 227, 0.06); color: #0071e3; }
.step-status-tag.in_discussion { background: rgba(255, 159, 67, 0.1); color: #d97818; }
.step-status-tag.cancelled { background: rgba(234, 84, 85, 0.08); color: #ea5455; }
.step-status-tag.expired { background: rgba(108, 117, 125, 0.08); color: #5f666c; }

.step-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.step-context, .step-detail {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 0.35rem;
    background: rgba(255, 255, 255, 0.5);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Authority box specialized */
.authority-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 599px) {
    .authority-box {
        grid-template-columns: 1fr;
    }

    .meta-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .meta-row .val {
        text-align: left;
    }
}

.auth-card {
    background: rgba(0, 113, 227, 0.02);
    border: 1px solid rgba(0, 113, 227, 0.05);
    padding: 0.75rem;
    border-radius: var(--border-radius-sm);
}

.auth-card.exec {
    background: rgba(163, 112, 255, 0.02);
    border-color: rgba(163, 112, 255, 0.05);
}

.auth-card .title {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.auth-card .name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Quote box (evidence) */
.drawer-quote {
    background: rgba(255, 255, 255, 0.5);
    border-left: 3px solid var(--accent-color);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.45;
}

.quote-citation {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.quote-citation a {
    color: var(--accent-color);
    text-decoration: none;
}

.quote-citation a:hover {
    text-decoration: underline;
}

/* Link-less citation (article has no source_url): same citation text, plain —
   no accent colour, no underline, no pointer cursor. */
.quote-citation-source {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

/* Articles source list */
.articles-source-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.article-source-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

/* Hover lift is a link affordance — only the anchor form gets it. Link-less
   rows (LexisNexis articles have no URL) keep the identical row styling. */
a.article-source-item:hover {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    color: var(--accent-color);
}

.article-source-item.is-static {
    cursor: default;
}

.article-source-item span {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
    min-width: 0;
}

.article-source-item .date {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* =============================================================================
   GLASS FOOTER & SCROLLBAR STYLING
   ============================================================================= */

.glass-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1.25rem 2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.meta-tag {
    margin-left: 1rem;
}

/* Thin Glassy Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.15);
}

/* --- Methodology View Styles --- */
.methodology-card {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.methodology-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 1.5rem;
}

.methodology-header h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #1d1d1f 30%, #515154 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.methodology-header .desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    line-height: 1.5;
    max-width: 800px;
}

.pipeline-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 576px) {
    .pipeline-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .pipeline-steps-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.step-card {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.55);
}

.step-card:hover {
    background: #ffffff;
    box-shadow: var(--glass-shadow-hover);
    transform: translateY(-4px) rotate(0.5deg);
}

.step-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 2.25rem;
    font-weight: 800;
    color: rgba(0, 113, 227, 0.08);
    line-height: 1;
    user-select: none;
}

.step-card h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.step-card p {
    font-size: 0.825rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.step-card p strong {
    color: var(--accent-color);
}

.methodology-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

@media (min-width: 992px) {
    .methodology-split-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.split-col {
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.45);
}

.split-col:hover {
    background: rgba(255, 255, 255, 0.7);
}

.split-col h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 750;
    color: var(--text-primary);
    border-left: 3.5px solid var(--accent-color);
    padding-left: 0.75rem;
}

.split-col p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.methodology-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    list-style-type: none;
    margin-top: 0.5rem;
}

.methodology-list li {
    font-size: 0.825rem;
    color: var(--text-secondary);
    line-height: 1.45;
    position: relative;
    padding-left: 1.25rem;
}

.methodology-list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-color);
}

/* --- Inline Text Link Buttons --- */
.text-link-btn {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 650;
    background: var(--accent-glow);
    color: var(--accent-color);
    border: 1px solid rgba(0, 113, 227, 0.12);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    margin-top: 0.25rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-link-btn:hover {
    background: var(--accent-hover);
    color: #ffffff;
    border-color: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.18);
    transform: translateY(-1px);
}

.text-link-btn svg {
    width: 1.15em;
    height: 1.15em;
    stroke-width: 2.2px;
}

/* --- Three-Way Focus Switcher & Scalable Visualizer Styles --- */

/* Heatmap Grid Layout */
.heatmap-matrix-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.5rem 0.25rem;
    padding-top: 1rem; /* Extra room for top-row tooltips */
}

/* The scroll context stays at ALL widths. With 6+ sector columns the grid's
   min-content (uppercase header words + tile padding) exceeds the card in the
   768-1000px band, and body{overflow-x:hidden} would silently cut the right
   columns off at the viewport edge — an overflow:visible override here used to
   do exactly that. Tooltips survive scrolling: the top row uses the
   tooltip-below variant and the last column tooltip-right, so they stay inside
   the wrapper's canvas. */

/* Prevent the parent glass-card from clipping floating tooltips */
#sector-focus-card {
    overflow: visible;
}

#sector-focus-card .chart-wrapper {
    overflow: visible;
}

.heatmap-matrix-grid {
    display: grid;
    gap: 0.5rem;
    min-width: 600px;
}

/* Header Tile */
.heatmap-header-tile {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-sm);
}

.heatmap-row-header-tile {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    text-align: left;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--border-radius-sm);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* Cell Tile */
.heatmap-cell-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.85rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 70px;
}

.heatmap-cell-tile .cell-number {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
    transition: transform 0.25s ease;
}

.heatmap-cell-tile .cell-percent {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 0.15rem;
    opacity: 0.85;
}

.heatmap-cell-tile.has-value {
    border-color: rgba(0, 113, 227, 0.12);
}

.heatmap-cell-tile.has-value .cell-number {
    color: var(--text-primary);
}

.heatmap-cell-tile:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 113, 227, 0.3) !important;
    z-index: 10;
}

.heatmap-cell-tile:hover .cell-number {
    transform: scale(1.1);
}

/* Custom CSS Tooltip Popover */
.heatmap-cell-tile .heatmap-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 113, 227, 0.15);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    width: 200px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
               transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    text-align: left;
}

/* Top-row cells: show tooltip BELOW instead of above */
.heatmap-cell-tile.tooltip-below .heatmap-tooltip {
    bottom: auto;
    top: calc(100% + 8px);
}

/* Right-edge cells: anchor tooltip to the right instead of center */
.heatmap-cell-tile.tooltip-right .heatmap-tooltip {
    left: auto;
    right: 0;
    transform: translateY(5px);
}

.heatmap-cell-tile .heatmap-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.96) transparent transparent transparent;
}

/* Arrow below for tooltip-below variant */
.heatmap-cell-tile.tooltip-below .heatmap-tooltip::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent rgba(255, 255, 255, 0.96) transparent;
}

/* Arrow for right-anchored tooltip */
.heatmap-cell-tile.tooltip-right .heatmap-tooltip::after {
    left: auto;
    right: 1.5rem;
    transform: none;
}

.heatmap-cell-tile:hover .heatmap-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.heatmap-cell-tile.tooltip-right:hover .heatmap-tooltip {
    transform: translateY(0);
}

.heatmap-tooltip-title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 0.2rem;
}

.heatmap-tooltip-row {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    margin-top: 0.15rem;
}

.heatmap-tooltip-row strong {
    color: var(--accent-color);
}

.heatmap-tooltip-hint {
    font-size: 0.6rem;
    color: var(--accent-secondary);
    margin-top: 0.4rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Collapsible mapped press publications */
.collapsible-articles-details {
    width: 100%;
}

.collapsible-articles-details summary::-webkit-details-marker {
    display: none;
}

.articles-summary-toggle {
    outline: none;
    cursor: pointer;
    list-style: none;
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0;
    user-select: none;
    transition: color 0.15s ease;
}

.articles-summary-toggle:hover {
    color: var(--accent-hover, #0056b3);
}

.articles-summary-toggle .summary-arrow {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.collapsible-articles-details[open] .summary-arrow {
    transform: rotate(180deg);
}

/* Verification source links hover effect */
.verification-source-link {
    transition: opacity 0.15s ease;
}

.verification-source-link:hover {
    opacity: 0.8;
}

/* Web-search affordance on link-less (LexisNexis) article rows: the corpus
   carries no URLs, so title+outlet+date goes to a search engine instead
   (added 2026-08-27). */
.article-google-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    color: #0071e3;
    opacity: 0.7;
    text-decoration: none;
}
.article-google-link:hover,
.article-google-link:focus-visible {
    opacity: 1;
    background: rgba(0, 113, 227, 0.12);
}