/* ============================================================================
   GEOMETRIA — Design System
   Campo Informacional Visualization Component
   Evidence-first, calm, readable. Aligned with Mediometro field surfaces.
   ============================================================================ */

:root {
    /* ── Color Palette ─────────────────────────────────────────────── */
    --geo-bg-primary: #f4f7fb;
    --geo-bg-surface: #ffffff;
    --geo-bg-elevated: #f8fafc;
    --geo-bg-hover: #eef5fa;
    --geo-border: #d8e2ec;
    --geo-border-muted: #e7edf3;
    --geo-text-primary: #17233c;
    --geo-text-secondary: #53657d;
    --geo-text-muted: #718198;
    --geo-text-faint: #9aaabd;

    /* ── Accent — measured signals, not alarm states ───────────────── */
    --geo-accent-low: #0f6b9a;
    --geo-accent-low-bg: rgba(15, 107, 154, 0.10);
    --geo-accent-mid: #b47a12;
    --geo-accent-mid-bg: rgba(180, 122, 18, 0.12);
    --geo-accent-high: #b94135;
    --geo-accent-high-bg: rgba(185, 65, 53, 0.10);
    --geo-accent-success: #167a59;
    --geo-accent-success-bg: rgba(22, 122, 89, 0.10);

    /* ── Cluster Colors (distinct, non-rainbow) ────────────────────── */
    --geo-cluster-0: #0f6b9a;
    --geo-cluster-1: #b47a12;
    --geo-cluster-2: #7761a8;
    --geo-cluster-3: #167a59;
    --geo-cluster-4: #b94135;
    --geo-cluster-5: #4777a8;
    --geo-cluster-6: #8a5d86;
    --geo-cluster-7: #4b8b9f;
    --geo-cluster-8: #7d6a2d;
    --geo-cluster-9: #3c7d6b;

    /* ── Spacing Scale ─────────────────────────────────────────────── */
    --geo-space-1: 4px;
    --geo-space-2: 8px;
    --geo-space-3: 12px;
    --geo-space-4: 16px;
    --geo-space-5: 20px;
    --geo-space-6: 24px;
    --geo-space-8: 32px;
    --geo-space-10: 40px;
    --geo-space-12: 48px;

    /* ── Border Radius ─────────────────────────────────────────────── */
    --geo-radius-xs: 4px;
    --geo-radius-sm: 6px;
    --geo-radius-md: 10px;
    --geo-radius-lg: 16px;
    --geo-radius-xl: 24px;
    --geo-radius-full: 9999px;

    /* ── Shadows ───────────────────────────────────────────────────── */
    --geo-shadow-sm: 0 1px 3px rgba(23, 35, 60, 0.08);
    --geo-shadow-md: 0 4px 12px rgba(23, 35, 60, 0.10);
    --geo-shadow-lg: 0 8px 24px rgba(23, 35, 60, 0.14);
    --geo-shadow-glow-blue: 0 0 20px rgba(15, 107, 154, 0.12);
    --geo-shadow-glow-amber: 0 0 20px rgba(180, 122, 18, 0.12);
    --geo-shadow-glow-red: 0 0 20px rgba(185, 65, 53, 0.12);

    /* ── Transitions ───────────────────────────────────────────────── */
    --geo-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --geo-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --geo-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --geo-transition-fast: 150ms var(--geo-ease);
    --geo-transition-base: 300ms var(--geo-ease);
    --geo-transition-slow: 600ms var(--geo-ease);
    --geo-transition-spring: 400ms var(--geo-ease-spring);

    /* ── Typography ────────────────────────────────────────────────── */
    --geo-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --geo-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
    --geo-font-size-xs: 0.6875rem;
    --geo-font-size-sm: 0.75rem;
    --geo-font-size-base: 0.875rem;
    --geo-font-size-md: 1rem;
    --geo-font-size-lg: 1.125rem;
    --geo-font-size-xl: 1.5rem;
    --geo-font-size-2xl: 2rem;
    --geo-font-size-3xl: 2.5rem;
    --geo-font-weight-normal: 400;
    --geo-font-weight-medium: 500;
    --geo-font-weight-semibold: 600;
    --geo-font-weight-bold: 700;
    --geo-line-height-tight: 1.25;
    --geo-line-height-normal: 1.5;
    --geo-line-height-relaxed: 1.625;
}

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

.geo-component {
    font-family: var(--geo-font-sans);
    color: var(--geo-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.geo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--geo-space-4) var(--geo-space-3);
}

/* Geometría is a desktop analysis surface; retain compact mobile gutters. */
@media (min-width: 992px) {
    .geo-container {
        box-sizing: border-box;
        width: 98vw;
        max-width: none;
        margin-right: auto;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}

@media (min-width: 768px) {
    .geo-container { padding: var(--geo-space-6) var(--geo-space-4); }
}

@media (min-width: 1200px) {
    .geo-container { padding: var(--geo-space-8) var(--geo-space-6); }
}

/* ============================================================================
   HEADER / HERO
   ============================================================================ */

.geo-hero {
    background: linear-gradient(135deg, var(--geo-bg-surface) 0%, var(--geo-bg-elevated) 100%);
    border: 1px solid var(--geo-border);
    border-radius: var(--geo-radius-lg);
    padding: var(--geo-space-8) var(--geo-space-6);
    margin-bottom: var(--geo-space-6);
    position: relative;
    overflow: hidden;
}

.geo-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--geo-accent-low), transparent);
    opacity: 0.6;
}

.geo-hero-title {
    font-size: var(--geo-font-size-2xl);
    font-weight: var(--geo-font-weight-bold);
    margin: 0 0 var(--geo-space-2) 0;
    line-height: var(--geo-line-height-tight);
    background: linear-gradient(135deg, var(--geo-text-primary) 0%, var(--geo-text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.geo-hero-subtitle {
    font-size: var(--geo-font-size-base);
    color: var(--geo-text-secondary);
    margin: 0 0 var(--geo-space-6) 0;
    line-height: var(--geo-line-height-normal);
    max-width: 720px;
}

.geo-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--geo-space-3);
}

/* ============================================================================
   KPI CARD
   ============================================================================ */

.geo-kpi {
    background: var(--geo-bg-elevated);
    border: 1px solid var(--geo-border-muted);
    border-radius: var(--geo-radius-md);
    padding: var(--geo-space-4) var(--geo-space-5);
    transition: border-color var(--geo-transition-base), box-shadow var(--geo-transition-base);
    position: relative;
    overflow: hidden;
}

.geo-kpi:hover {
    border-color: var(--geo-border);
    box-shadow: var(--geo-shadow-md);
}

.geo-kpi-value {
    font-size: var(--geo-font-size-2xl);
    font-weight: var(--geo-font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--geo-text-primary);
    transition: color var(--geo-transition-base);
}

.geo-kpi-label {
    font-size: var(--geo-font-size-xs);
    color: var(--geo-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--geo-space-2);
    font-weight: var(--geo-font-weight-medium);
}

.geo-kpi-accent .geo-kpi-value { color: var(--geo-accent-low); }
.geo-kpi-warning .geo-kpi-value { color: var(--geo-accent-mid); }
.geo-kpi-danger .geo-kpi-value { color: var(--geo-accent-high); }
.geo-kpi-success .geo-kpi-value { color: var(--geo-accent-success); }

/* ============================================================================
   SECTION
   ============================================================================ */

.geo-section {
    margin-bottom: var(--geo-space-8);
}

.geo-section-header {
    display: flex;
    align-items: center;
    gap: var(--geo-space-3);
    margin-bottom: var(--geo-space-4);
}

.geo-section-title {
    font-size: var(--geo-font-size-lg);
    font-weight: var(--geo-font-weight-semibold);
    margin: 0;
    color: var(--geo-text-primary);
}

.geo-section-badge {
    font-size: var(--geo-font-size-xs);
    font-weight: var(--geo-font-weight-semibold);
    padding: 2px var(--geo-space-2);
    border-radius: var(--geo-radius-full);
    background: var(--geo-accent-low-bg);
    color: var(--geo-accent-low);
}

.geo-section-divider {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--geo-border) 0%, transparent 100%);
}

/* ============================================================================
   CARD
   ============================================================================ */

.geo-card {
    background: var(--geo-bg-surface);
    border: 1px solid var(--geo-border);
    border-radius: var(--geo-radius-md);
    padding: var(--geo-space-5);
    transition: border-color var(--geo-transition-base), transform var(--geo-transition-base);
}

.geo-card:hover {
    border-color: var(--geo-text-faint);
}

.geo-card-title {
    font-size: var(--geo-font-size-md);
    font-weight: var(--geo-font-weight-semibold);
    margin: 0 0 var(--geo-space-3) 0;
    color: var(--geo-text-primary);
}

.geo-card-meta {
    font-size: var(--geo-font-size-xs);
    color: var(--geo-text-muted);
    font-family: var(--geo-font-mono);
}

/* ============================================================================
   BADGE / TAG
   ============================================================================ */

.geo-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--geo-space-1);
    padding: 2px var(--geo-space-2);
    border-radius: var(--geo-radius-full);
    font-size: var(--geo-font-size-xs);
    font-weight: var(--geo-font-weight-semibold);
    white-space: nowrap;
}

.geo-badge-low { background: var(--geo-accent-low-bg); color: var(--geo-accent-low); }
.geo-badge-mid { background: var(--geo-accent-mid-bg); color: var(--geo-accent-mid); }
.geo-badge-high { background: var(--geo-accent-high-bg); color: var(--geo-accent-high); }
.geo-badge-success { background: var(--geo-accent-success-bg); color: var(--geo-accent-success); }
.geo-badge-neutral { background: rgba(139, 148, 158, 0.12); color: var(--geo-text-secondary); }

/* ============================================================================
   SCORE BAR
   ============================================================================ */

.geo-score-bar {
    height: 4px;
    background: var(--geo-bg-elevated);
    border-radius: var(--geo-radius-full);
    overflow: hidden;
    width: 100%;
}

.geo-score-fill {
    height: 100%;
    border-radius: var(--geo-radius-full);
    transition: width 800ms var(--geo-ease-out);
}

.geo-score-fill-low { background: var(--geo-accent-low); }
.geo-score-fill-mid { background: var(--geo-accent-mid); }
.geo-score-fill-high { background: var(--geo-accent-high); }

/* ============================================================================
   TABLE
   ============================================================================ */

.geo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--geo-font-size-sm);
}

.geo-table th {
    text-align: left;
    padding: var(--geo-space-3) var(--geo-space-4);
    color: var(--geo-text-muted);
    font-weight: var(--geo-font-weight-semibold);
    font-size: var(--geo-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--geo-border);
}

.geo-table td {
    padding: var(--geo-space-3) var(--geo-space-4);
    border-bottom: 1px solid var(--geo-border-muted);
    color: var(--geo-text-secondary);
    vertical-align: top;
}

.geo-table tr {
    transition: background var(--geo-transition-fast);
}

.geo-table tbody tr:hover {
    background: var(--geo-bg-hover);
}

.geo-table a {
    color: var(--geo-accent-low);
    text-decoration: none;
    font-weight: var(--geo-font-weight-medium);
}

.geo-table a:hover { text-decoration: underline; }

/* ============================================================================
   VISUALIZATION CONTAINER
   ============================================================================ */

.geo-viz {
    background: var(--geo-bg-surface);
    border: 1px solid var(--geo-border);
    border-radius: var(--geo-radius-md);
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.geo-viz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--geo-space-4) var(--geo-space-5);
    border-bottom: 1px solid var(--geo-border-muted);
}

.geo-viz-body {
    box-sizing: border-box;
    height: clamp(360px, 48vw, 560px);
    max-width: 100%;
    overflow: hidden;
    padding: var(--geo-space-4);
    position: relative;
    width: 100%;
}

.geo-viz-body > svg.geo-viz-canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
}

.geo-viz-tooltip {
    position: absolute;
    padding: var(--geo-space-2) var(--geo-space-3);
    background: var(--geo-bg-surface);
    border: 1px solid var(--geo-border);
    border-radius: var(--geo-radius-sm);
    font-size: var(--geo-font-size-sm);
    color: var(--geo-text-primary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms var(--geo-ease);
    z-index: 100;
    max-width: 320px;
    box-shadow: var(--geo-shadow-lg);
    line-height: var(--geo-line-height-normal);
}

.geo-viz-tooltip.visible { opacity: 1; }
.geo-viz-tooltip strong { color: var(--geo-accent-low); font-weight: var(--geo-font-weight-semibold); }
.geo-viz-tooltip .geo-viz-tooltip-meta { color: var(--geo-text-secondary); font-size: var(--geo-font-size-xs); margin-top: 2px; }

/* ============================================================================
   LEGEND
   ============================================================================ */

.geo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--geo-space-3);
    padding: var(--geo-space-3) var(--geo-space-5);
    border-top: 1px solid var(--geo-border-muted);
    background: var(--geo-bg-elevated);
}

.geo-legend-item {
    display: flex;
    align-items: center;
    gap: var(--geo-space-2);
    font-size: var(--geo-font-size-xs);
    color: var(--geo-text-secondary);
}

.geo-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.geo-legend-line {
    width: 16px;
    height: 2px;
    border-radius: 1px;
    flex-shrink: 0;
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.geo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--geo-space-12) var(--geo-space-6);
    text-align: center;
}

.geo-empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--geo-space-4);
    opacity: 0.3;
}

.geo-empty-title {
    font-size: var(--geo-font-size-md);
    font-weight: var(--geo-font-weight-semibold);
    color: var(--geo-text-secondary);
    margin: 0 0 var(--geo-space-2) 0;
}

.geo-empty-text {
    font-size: var(--geo-font-size-sm);
    color: var(--geo-text-muted);
    max-width: 400px;
    line-height: var(--geo-line-height-normal);
}

/* ============================================================================
   SKELETON LOADING
   ============================================================================ */

.geo-skeleton {
    background: linear-gradient(90deg,
        var(--geo-bg-elevated) 0%,
        var(--geo-bg-hover) 50%,
        var(--geo-bg-elevated) 100%
    );
    background-size: 200% 100%;
    animation: geo-shimmer 1.5s infinite;
    border-radius: var(--geo-radius-sm);
}

@keyframes geo-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.geo-skeleton-line { height: 12px; margin-bottom: var(--geo-space-2); }
.geo-skeleton-line:last-child { width: 60%; }

/* ============================================================================
   ANIMATIONS — Entrance
   ============================================================================ */

@keyframes geo-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes geo-fade-in-scale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes geo-slide-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes geo-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(56, 139, 253, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(56, 139, 253, 0); }
}

@keyframes geo-count-up {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.geo-animate-in {
    animation: geo-fade-in var(--geo-transition-slow) var(--geo-ease-out) both;
}

.geo-animate-in-delay-1 { animation-delay: 100ms; }
.geo-animate-in-delay-2 { animation-delay: 200ms; }
.geo-animate-in-delay-3 { animation-delay: 300ms; }
.geo-animate-in-delay-4 { animation-delay: 400ms; }
.geo-animate-in-delay-5 { animation-delay: 500ms; }

.geo-pulse {
    animation: geo-pulse-glow 2s infinite;
}

/* ============================================================================
   TABS
   ============================================================================ */

.geo-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--geo-border);
    margin-bottom: var(--geo-space-6);
}

.geo-tab {
    padding: var(--geo-space-3) var(--geo-space-5);
    font-size: var(--geo-font-size-sm);
    font-weight: var(--geo-font-weight-medium);
    color: var(--geo-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--geo-transition-fast), border-color var(--geo-transition-fast);
    font-family: var(--geo-font-sans);
}

.geo-tab:hover { color: var(--geo-text-secondary); }
.geo-tab.active {
    color: var(--geo-accent-low);
    border-bottom-color: var(--geo-accent-low);
}

.geo-tab-panel { display: none; }
.geo-tab-panel.active { display: block; animation: geo-fade-in var(--geo-transition-base) var(--geo-ease-out) both; }

/* ============================================================================
   NAV CARDS — View Switcher
   ============================================================================ */

.geo-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--geo-space-3);
    margin-bottom: var(--geo-space-6);
}

.geo-nav-card {
    display: flex;
    flex-direction: column;
    gap: var(--geo-space-2);
    padding: var(--geo-space-4) var(--geo-space-5);
    background: var(--geo-bg-surface);
    border: 1px solid var(--geo-border);
    border-radius: var(--geo-radius-md);
    text-decoration: none;
    color: var(--geo-text-secondary);
    transition: all var(--geo-transition-base);
    position: relative;
    overflow: hidden;
}

.geo-nav-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: var(--geo-accent-low);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--geo-transition-base);
}

.geo-nav-card:hover {
    border-color: var(--geo-text-faint);
    background: var(--geo-bg-elevated);
    color: var(--geo-text-primary);
    transform: translateY(-2px);
    box-shadow: var(--geo-shadow-md);
}

.geo-nav-card:hover::before { transform: scaleY(1); }

.geo-nav-card.active {
    border-color: var(--geo-accent-low);
    background: var(--geo-bg-elevated);
}

.geo-nav-card.active::before { transform: scaleY(1); }

.geo-nav-cross {
    border-style: dashed;
    border-color: var(--geo-accent-mid, #b47a12);
}
.geo-nav-cross .geo-nav-card-icon { color: var(--geo-accent-mid, #b47a12); }

.geo-nav-card-icon {
    width: 24px;
    height: 24px;
    color: var(--geo-accent-low);
}

.geo-nav-card-title {
    font-size: var(--geo-font-size-md);
    font-weight: var(--geo-font-weight-semibold);
    color: var(--geo-text-primary);
}

.geo-nav-card-desc {
    font-size: var(--geo-font-size-xs);
    color: var(--geo-text-muted);
    line-height: var(--geo-line-height-normal);
}

/* ============================================================================
   D3-SPECIFIC STYLES
   ============================================================================ */

.geo-d3-axis line,
.geo-d3-axis path {
    stroke: var(--geo-border);
}

.geo-d3-axis text {
    fill: var(--geo-text-muted);
    font-size: 11px;
    font-family: var(--geo-font-mono);
}

.geo-d3-grid line {
    stroke: var(--geo-border-muted);
    stroke-dasharray: 2 4;
}

.geo-d3-node {
    cursor: pointer;
    transition: opacity var(--geo-transition-base);
}

.geo-d3-node.dimmed { opacity: 0.12; }
.geo-d3-node.highlighted { opacity: 1; }

.geo-d3-edge {
    transition: opacity var(--geo-transition-base);
}

.geo-d3-edge.dimmed { opacity: 0.05; }

.geo-d3-edge-label {
    font-family: var(--geo-font-family-mono, monospace);
    font-size: 9px;
    fill: var(--geo-text-muted, #718198);
    pointer-events: none;
    user-select: none;
}

.geo-eyebrow {
    color: var(--geo-accent-low);
    font-size: var(--geo-font-size-xs);
    font-weight: var(--geo-font-weight-semibold);
    letter-spacing: 0.08em;
    margin: 0 0 var(--geo-space-2);
    text-transform: uppercase;
}

.geo-data-note,
.geo-interpretation {
    color: var(--geo-text-secondary);
    font-size: var(--geo-font-size-sm);
    line-height: var(--geo-line-height-normal);
}

.geo-data-note { margin: 0 0 var(--geo-space-5); }
.geo-interpretation {
    background: var(--geo-accent-low-bg);
    border-left: 3px solid var(--geo-accent-low);
    border-radius: var(--geo-radius-sm);
    margin: 0 0 var(--geo-space-6);
    padding: var(--geo-space-3) var(--geo-space-4);
}
.geo-interpretation strong { color: var(--geo-text-primary); margin-right: var(--geo-space-2); }
.geo-interpretation span { display: block; color: var(--geo-text-muted); margin-top: var(--geo-space-1); }
.geo-viz-context { color: var(--geo-text-muted); font-size: var(--geo-font-size-xs); }
.geo-kpi-value-small { font-size: var(--geo-font-size-sm); line-height: var(--geo-line-height-normal); word-break: break-word; }
.geo-breakdown-grid,
.geo-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--geo-space-4); }
.geo-breakdown-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(80px, 2fr) auto; align-items: center; gap: var(--geo-space-3); margin-top: var(--geo-space-3); }
.geo-breakdown-row:first-of-type { margin-top: 0; }
.geo-breakdown-label { color: var(--geo-text-secondary); font-size: var(--geo-font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-breakdown-value { color: var(--geo-text-primary); font-family: var(--geo-font-mono); font-size: var(--geo-font-size-sm); text-align: right; }
.geo-table-wrap { overflow-x: auto; }
.geo-cell-mono { font-family: var(--geo-font-mono); font-size: var(--geo-font-size-xs); white-space: nowrap; }
.geo-cell-number { color: var(--geo-text-primary) !important; font-family: var(--geo-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--geo-font-weight-semibold); white-space: nowrap; }
.geo-card-header { align-items: center; display: flex; gap: var(--geo-space-2); justify-content: space-between; margin-bottom: var(--geo-space-3); }
.geo-card-copy { color: var(--geo-text-secondary); font-size: var(--geo-font-size-sm); line-height: var(--geo-line-height-normal); margin: 0 0 var(--geo-space-3); }
.geo-component-card { border-left: 3px solid var(--geo-border); }
.geo-card-percent { margin-top: var(--geo-space-2); }
.geo-origin-badge { margin-left: var(--geo-space-2); }
.geo-empty-compact { padding: var(--geo-space-8) var(--geo-space-5); }

@media (max-width: 680px) {
    .geo-breakdown-row { grid-template-columns: 1fr auto; }
    .geo-breakdown-row .geo-score-bar { grid-column: 1 / -1; grid-row: 2; }
    .geo-kpi-value-small { font-size: var(--geo-font-size-xs); }
}

.geo-d3-label {
    fill: var(--geo-text-secondary);
    font-size: 11px;
    font-family: var(--geo-font-sans);
    pointer-events: none;
    text-anchor: middle;
    dominant-baseline: central;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
    .geo-hero { padding: var(--geo-space-5) var(--geo-space-4); }
    .geo-hero-title { font-size: var(--geo-font-size-xl); }
    .geo-hero-stats { grid-template-columns: repeat(2, 1fr); }
    .geo-nav-grid { grid-template-columns: 1fr; }
    .geo-viz-body { height: clamp(320px, 78vw, 440px); padding: var(--geo-space-2); }
    .geo-table { font-size: var(--geo-font-size-xs); }
    .geo-table th, .geo-table td { padding: var(--geo-space-2); }
    .geo-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
    .geo-hero-stats { grid-template-columns: 1fr; }
    .geo-kpi { padding: var(--geo-space-3); }
    .geo-kpi-value { font-size: var(--geo-font-size-xl); }
}

/* ============================================================================
   SCROLLBAR
   ============================================================================ */

.geo-component ::-webkit-scrollbar { width: 8px; height: 8px; }
.geo-component ::-webkit-scrollbar-track { background: transparent; }
.geo-component ::-webkit-scrollbar-thumb {
    background: var(--geo-border);
    border-radius: var(--geo-radius-full);
}
.geo-component ::-webkit-scrollbar-thumb:hover { background: var(--geo-text-faint); }

/* ============================================================================
   READING GUIDE — collapsible intro for first-time visitors
   ============================================================================ */

.geo-reading-guide {
    background: var(--geo-bg-elevated);
    border: 1px solid var(--geo-border-muted);
    border-radius: var(--geo-radius-md);
    margin-bottom: var(--geo-space-5);
    overflow: hidden;
}

.geo-reading-guide summary {
    display: flex;
    align-items: center;
    gap: var(--geo-space-2);
    padding: var(--geo-space-3) var(--geo-space-4);
    cursor: pointer;
    font-size: var(--geo-font-size-sm);
    font-weight: var(--geo-font-weight-semibold);
    color: var(--geo-text-secondary);
    list-style: none;
    transition: background var(--geo-transition-fast), color var(--geo-transition-fast);
}

.geo-reading-guide summary::-webkit-details-marker { display: none; }
.geo-reading-guide summary::before {
    content: '▸';
    font-size: 0.7em;
    color: var(--geo-text-muted);
    transition: transform var(--geo-transition-fast);
}
.geo-reading-guide[open] summary::before { transform: rotate(90deg); }
.geo-reading-guide summary:hover { background: var(--geo-bg-hover); color: var(--geo-text-primary); }

.geo-reading-guide-body {
    padding: var(--geo-space-3) var(--geo-space-4) var(--geo-space-4);
    border-top: 1px solid var(--geo-border-muted);
}

.geo-reading-guide-body p {
    margin: 0 0 var(--geo-space-2) 0;
    font-size: var(--geo-font-size-sm);
    line-height: var(--geo-line-height-normal);
    color: var(--geo-text-secondary);
}

.geo-reading-guide-body p:last-child { margin-bottom: 0; }
.geo-reading-guide-body strong { color: var(--geo-text-primary); font-weight: var(--geo-font-weight-semibold); }
.geo-reading-guide-body ul { margin: var(--geo-space-2) 0; padding-left: var(--geo-space-5); }
.geo-reading-guide-body li { font-size: var(--geo-font-size-sm); color: var(--geo-text-secondary); margin-bottom: var(--geo-space-1); line-height: var(--geo-line-height-normal); }