/* ============================================
           SUPPLY CHAIN MAP V2 - ECHO REDESIGN
           Design Principles:
           - Progressive disclosure (click to reveal)
           - Actionable intelligence (what can you DO?)
           - Data liberation (patterns, connections, anomalies)
           - Accessibility first (WCAG 2.1 AA)
           - Mobile-crisis design (touch-friendly, low-contrast dark)
           ============================================ */

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

        /* Header - More informative, less cluttered */
        .header {
            height: 52px;
            padding: 0 var(--space-3);
            gap: var(--space-2);
        }

        .header__brand {
            flex-direction: row;
            align-items: center;
            gap: var(--space-2);
        }

        .header__logo {
            font-size: 24px;
        }

        .header__title {
            font-size: var(--text-base);
            font-weight: 700;
        }

        .header__subtitle {
            display: none; /* Hide on desktop, reveal on large screens */
        }

        @media (min-width: 1024px) {
            .header__subtitle {
                display: block;
            }
        }

        /* Header Tabs - Navigation in header */
        .header__tabs {
            display: flex;
            gap: var(--space-1);
            margin-left: auto;
        }

        .header__tabs .view-tab {
            padding: var(--space-1) var(--space-3);
            font-size: var(--text-sm);
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .header__tabs {
                display: none; /* Hide tabs on mobile, use bottom nav */
            }
        }

        /* View Tabs (below header or in header) */
        .view-tabs {
            display: flex;
            gap: 0;
            background: var(--color-bg-elevated);
            padding: var(--space-1);
            border-radius: var(--radius-md);
        }

        /* Intel Feed - Fix scroll */
        .intelligence-feed {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            max-height: 60vh;
            overflow-y: auto;
            padding-right: var(--space-1);
        }

        .intelligence-feed::-webkit-scrollbar {
            width: 6px;
        }

        .intelligence-feed::-webkit-scrollbar-track {
            background: var(--color-bg);
            border-radius: var(--radius-sm);
        }

        .intelligence-feed::-webkit-scrollbar-thumb {
            background: var(--color-border);
            border-radius: var(--radius-sm);
        }

        .intelligence-feed::-webkit-scrollbar-thumb:hover {
            background: var(--color-text-muted);
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            background: var(--color-bg-elevated);
            border-radius: var(--radius-full);
            white-space: nowrap;
        }

        .status-pill--danger {
            background: rgba(220, 38, 38, 0.25); /* Increased from 0.15 for WCAG contrast */
            color: var(--color-danger);
        }

        .status-pill--warning {
            background: rgba(245, 158, 11, 0.25); /* Increased from 0.15 for WCAG contrast */
            color: var(--color-warning);
        }

        .status-pill--success {
            background: rgba(34, 197, 94, 0.25); /* Increased from 0.15 for WCAG contrast */
            color: var(--color-success);
        }

        .status-pill__count {
            font-weight: 700;
            margin-left: 2px;
        }

        /* Connection status */
        .connection-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: var(--text-xs);
            color: var(--color-text-muted);
        }

        .connection-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--color-success);
        }

        .connection-dot--offline {
            background: var(--color-danger);
            animation: pulse 1.5s infinite;
        }

        /* ============================================
           SEARCH RESULTS STYLES
           ============================================ */

        .search-group {
            margin-bottom: var(--space-2);
        }

        .search-group__title {
            font-size: var(--text-xs);
            font-weight: 600;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 4px 8px;
            background: var(--color-bg);
            border-radius: var(--radius-sm);
            margin-bottom: 4px;
        }

        .search-group__more {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            padding: 4px 8px;
            font-style: italic;
        }

        .search-result {
            display: flex;
            flex-direction: column;
            padding: 8px 12px;
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: background var(--duration-fast);
            border-left: 3px solid transparent;
        }

        .search-result:hover, .search-result--highlighted {
            background: var(--color-bg);
            border-left-color: var(--color-primary);
        }

        .search-result__name {
            font-size: var(--text-sm);
            font-weight: 500;
            color: var(--color-text);
        }

        .search-result__subtext {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            margin-top: 2px;
        }

        /* Search mode buttons */
        .search-mode-buttons {
            display: flex;
            gap: 4px;
            margin-bottom: 8px;
        }

        .search-mode-btn {
            flex: 1;
            font-size: var(--text-xs);
            padding: 4px 8px;
        }

        /* ============================================
           PROGRESSIVE DISCLOSURE PANELS
           ============================================ */

        .disclosure-panel {
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-3);
            overflow: hidden;
            background: var(--color-bg-elevated);
        }

        .disclosure-panel__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--space-3);
            cursor: pointer;
            user-select: none;
            background: var(--color-bg);
            transition: background var(--duration-fast);
        }

        .disclosure-panel__header:hover {
            background: var(--color-bg-hover);
        }

        /* Reset button element styles when used as disclosure panel header */
        button.disclosure-panel__header {
            border: none;
            font-family: inherit;
            font-size: inherit;
            width: 100%;
            text-align: left;
            color: inherit;
        }

        button.disclosure-panel__header:focus {
            outline: 2px solid var(--color-accent);
            outline-offset: -2px;
        }

        .disclosure-panel__title {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-weight: 600;
            font-size: var(--text-sm);
        }

        .disclosure-panel__badge {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: 600;
            background: var(--color-accent);
            color: white;
        }

        .disclosure-panel__badge--vh {
            background: var(--conf-vh);
        }

        .disclosure-panel__badge--h {
            background: var(--conf-h);
        }

        .disclosure-panel__badge--m {
            background: var(--conf-m);
        }

        .disclosure-panel__badge--l {
            background: var(--conf-l);
        }

        .disclosure-panel__chevron {
            transition: transform var(--duration-fast);
        }

        .disclosure-panel--open .disclosure-panel__chevron {
            transform: rotate(180deg);
        }

        .disclosure-panel__content {
            display: none;
            padding: var(--space-3);
            border-top: 1px solid var(--color-border);
        }

        .disclosure-panel--open .disclosure-panel__content {
            display: block;
        }

        /* ============================================
           FILTER CHIPS - Enhanced
           ============================================ */

        .filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-1);
        }

        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: var(--space-1) var(--space-3);
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: 500;
            color: var(--color-text-secondary);
            cursor: pointer;
            transition: all var(--duration-fast);
            min-height: 32px;
        }

        .filter-chip:hover {
            border-color: var(--color-accent);
            color: var(--color-text);
        }

        .filter-chip:focus {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        .filter-chip--active {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: white;
        }

        .filter-chip__icon {
            font-size: 14px;
        }

        .filter-chip__count {
            background: rgba(255,255,255,0.2);
            padding: 1px 6px;
            border-radius: var(--radius-sm);
            font-size: 10px;
            font-weight: 700;
        }

        .filter-chip--active .filter-chip__count {
            background: rgba(0,0,0,0.2);
        }

        /* Ship Status Chips */
        .filter-chip--confirmed {
            border-color: #22c55e;
            color: #22c55e;
        }

        .filter-chip--confirmed.filter-chip--active {
            background: #22c55e;
            color: white;
        }

        .filter-chip--high-risk {
            border-color: #f97316;
            color: #f97316;
        }

        .filter-chip--high-risk.filter-chip--active {
            background: #f97316;
            color: white;
        }

        .filter-chip--watchlist {
            border-color: #8b5cf6;
            color: #8b5cf6;
        }

        .filter-chip--watchlist.filter-chip--active {
            background: #8b5cf6;
            color: white;
        }

        /* ============================================
           ENTITY CARDS - Enhanced Progressive Disclosure
           ============================================ */

        .entity-card {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: border-color var(--duration-fast);
        }

        .entity-card:hover {
            border-color: var(--color-accent);
        }

        .entity-card__header {
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            padding: var(--space-3);
            background: var(--color-bg-elevated);
            border-bottom: 1px solid var(--color-border);
        }

        .entity-card__icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background: var(--color-bg);
            border-radius: var(--radius-md);
        }

        .entity-card__icon--ship {
            background: linear-gradient(135deg, #1e3a5f, #0f172a);
        }

        .entity-card__icon--port {
            background: linear-gradient(135deg, #1e40af, #1e3a8a);
        }

        .entity-card__icon--factory {
            background: linear-gradient(135deg, #7f1d1d, #450a0a);
        }

        .entity-card__icon--route {
            background: linear-gradient(135deg, #5b21b6, #312e81);
        }

        .entity-card__title {
            font-weight: 700;
            font-size: var(--text-base);
            line-height: 1.3;
            word-break: break-word;
        }

        .entity-card__subtitle {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            margin-top: 2px;
        }

        .entity-card__confidence {
            margin-left: auto;
            text-align: right;
        }

        .entity-card__confidence-value {
            font-size: 24px;
            font-weight: 700;
            line-height: 1;
        }

        .entity-card__confidence-label {
            font-size: 10px;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .entity-card__confidence--vh .entity-card__confidence-value { color: #dc2626; }
        .entity-card__confidence--h .entity-card__confidence-value { color: #f59e0b; }
        .entity-card__confidence--m .entity-card__confidence-value { color: #eab308; }
        .entity-card__confidence--l .entity-card__confidence-value { color: #22c55e; }

        /* Body with progressive disclosure */
        .entity-card__body {
            padding: var(--space-3);
        }

        .entity-card__row {
            display: flex;
            justify-content: space-between;
            font-size: var(--text-xs);
            padding: var(--space-1) 0;
        }

        .entity-card__row:not(:last-child) {
            border-bottom: 1px solid var(--color-border);
        }

        .entity-card__key {
            color: var(--color-text-muted);
        }

        .entity-card__value {
            font-weight: 500;
            text-align: right;
            max-width: 60%;
            word-break: break-word;
        }

        .entity-card__value--danger {
            color: var(--color-danger);
        }

        .entity-card__value--warning {
            color: var(--color-warning);
        }

        .entity-card__value--success {
            color: var(--color-success);
        }

        /* Tags */
        .entity-card__tags {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-1);
            margin-top: var(--space-2);
        }

        .entity-card__tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: var(--radius-sm);
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            white-space: nowrap;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .entity-card__tag--danger {
            background: rgba(220, 38, 38, 0.15);
            color: #fca5a5;
            border: 1px solid rgba(220, 38, 38, 0.3);
        }

        .entity-card__tag--warning {
            background: rgba(245, 158, 11, 0.15);
            color: #fcd34d;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .entity-card__tag--success {
            background: rgba(34, 197, 94, 0.15);
            color: #86efac;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        /* Stats metrics row */
        .entity-card__stats {
            display: flex;
            gap: var(--space-3);
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px solid var(--color-border);
            background: rgba(0,0,0,0.2);
        }

        .entity-card__metric {
            text-align: center;
        }

        .entity-card__metric-value {
            font-size: var(--text-lg);
            font-weight: 700;
            color: var(--color-text);
        }

        .entity-card__metric-value.entity-card__confidence--vh { color: #22c55e; }
        .entity-card__metric-value.entity-card__confidence--h { color: #84cc16; }
        .entity-card__metric-value.entity-card__confidence--m { color: #f59e0b; }
        .entity-card__metric-value.entity-card__confidence--l { color: #ef4444; }

        .entity-card__metric-label {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Badges row */
        .entity-card__badges {
            display: flex;
            gap: var(--space-1);
            margin-left: auto;
        }

        /* Sections */
        .entity-card__section {
            padding: var(--space-2) var(--space-3);
            border-bottom: 1px solid var(--color-border);
        }

        .entity-card__section-title {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: var(--space-1);
        }

        /* Timeline */
        .entity-card__timeline {
            display: flex;
            justify-content: space-between;
            font-size: var(--text-xs);
            color: var(--color-text-muted);
        }

        /* Sources list */
        .entity-card__sources-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
            margin-top: var(--space-1);
        }

        .entity-card__source,
        .entity-card__source-link {
            font-size: var(--text-xs);
            padding: 2px 4px;
            border-radius: var(--radius-xs);
            text-decoration: none;
        }

        .entity-card__source {
            background: rgba(100, 100, 100, 0.1);
            color: var(--color-text-muted);
        }

        .entity-card__source-link {
            background: rgba(59, 130, 246, 0.15);
            color: #93c5fd;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }

        .entity-card__source-link:hover {
            background: rgba(59, 130, 246, 0.25);
        }

        .entity-card__tag--default {
            background: rgba(100, 100, 100, 0.15);
            color: #cccccc;
            border: 1px solid rgba(100, 100, 100, 0.3);
        }

        /* Expandable details */
        .entity-card__details {
            display: none;
            margin-top: var(--space-2);
            padding-top: var(--space-2);
            border-top: 1px solid var(--color-border);
        }

        .entity-card--expanded .entity-card__details {
            display: block;
        }

        .entity-card__expand-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-1);
            width: 100%;
            padding: var(--space-2);
            margin-top: var(--space-2);
            background: transparent;
            border: 1px dashed var(--color-border);
            border-radius: var(--radius-md);
            color: var(--color-text-muted);
            font-size: var(--text-xs);
            cursor: pointer;
            transition: all var(--duration-fast);
        }

        .entity-card__expand-btn:hover {
            background: var(--color-bg-hover);
            color: var(--color-text);
            border-style: solid;
        }

        .entity-card__expand-btn:focus {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        /* Sources section */
        .entity-card__sources {
            margin-top: var(--space-3);
            padding: var(--space-2);
            background: var(--color-bg-elevated);
            border-radius: var(--radius-md);
            font-size: var(--text-xs);
        }

        .entity-card__sources-title {
            color: var(--color-text-muted);
            font-weight: 600;
            margin-bottom: var(--space-1);
        }

        .entity-card__source-link {
            display: block;
            color: var(--color-accent);
            text-decoration: none;
            word-break: break-all;
            margin: var(--space-1) 0;
        }

        .entity-card__source-link:hover {
            text-decoration: underline;
        }

        /* Why flagged section */
        .entity-card__flag-reason {
            margin-top: var(--space-2);
            padding: var(--space-2);
            background: rgba(220, 38, 38, 0.08);
            border-left: 3px solid var(--color-danger);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
        }

        .entity-card__flag-reason strong {
            color: var(--color-danger);
        }

        /* Actions */
        .entity-card__actions {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
            padding: var(--space-3);
            background: var(--color-bg-elevated);
            border-top: 1px solid var(--color-border);
        }

        .entity-card__action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            width: 100%;
            padding: var(--space-2) var(--space-3);
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--color-text);
            cursor: pointer;
            transition: all var(--duration-fast);
            min-height: 44px; /* Touch-friendly */
        }

        .entity-card__action-btn:hover {
            background: var(--color-bg-hover);
            border-color: var(--color-accent);
        }

        .entity-card__action-btn:focus {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

                .entity-card__action-btn--primary {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: white;
        }

        .entity-card__action-btn--primary:hover {
            background: #b91c1c;
        }

        /* ============================================
           INSIGHT CARDS - ECHO Refactor 2026-03-12
           ============================================ */

        .insight-card {
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: var(--space-3);
            border-left: 3px solid var(--color-border);
        }

        .insight-card--success { border-left-color: var(--color-success); }
        .insight-card--warning { border-left-color: var(--color-warning); }
        .insight-card--danger { border-left-color: var(--color-danger); }
        .insight-card--info { border-left-color: var(--color-info); }

        .insight-card__header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-1);
        }

        .insight-card__icon {
            font-size: 20px;
            line-height: 1;
        }

        .insight-card__title {
            font-weight: 600;
            font-size: var(--text-sm);
        }

        .insight-card__value {
            font-size: 28px;
            font-weight: 700;
            color: var(--color-text);
        }

        .insight-card__desc {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
        }

        /* ============================================
           ANALYTICS STATS - ECHO Refactor 2026-03-12
           ============================================ */

        .analytics-stat {
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: var(--space-3);
            text-align: center;
        }

        .analytics-stat__icon {
            font-size: 24px;
            line-height: 1;
            margin-bottom: var(--space-1);
        }

        .analytics-stat__value {
            font-size: 24px;
            font-weight: 700;
            color: var(--color-text);
        }

        .analytics-stat__label {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--color-text-secondary);
        }

        .analytics-stat__desc {
            font-size: 10px;
            color: var(--color-text-muted);
        }

        /* ============================================
           ANOMALY CARDS - ECHO Refactor 2026-03-12
           ============================================ */

        .anomaly-card {
            display: flex;
            gap: var(--space-3);
            padding: var(--space-3);
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            border-left: 3px solid var(--color-warning);
        }

        .anomaly-card--danger {
            border-left-color: var(--color-danger);
        }

        .anomaly-card__icon {
            font-size: 24px;
            line-height: 1;
        }

        .anomaly-card__content {
            flex: 1;
            min-width: 0;
        }

        .anomaly-card__title {
            font-weight: 600;
            color: var(--color-text);
            margin-bottom: var(--space-1);
        }

        .anomaly-card__desc {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
        }

        .anomaly-card__badge {
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 500;
        }

        .anomaly-card__badge--warning {
            background: rgba(245, 158, 11, 0.2);
            color: var(--color-warning);
        }

        .anomaly-card__badge--danger {
            background: rgba(220, 38, 38, 0.2);
            color: var(--color-danger);
        }

        /* ============================================
           DETAIL PANELS - ECHO Design System 2026-03-12
           ============================================ */

        .detail-panel {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .detail-panel__header {
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            padding: var(--space-3);
            background: var(--color-bg-elevated);
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-border);
        }

        .detail-panel__icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
            font-size: 24px;
            flex-shrink: 0;
        }

        .detail-panel__icon--ship {
            background: linear-gradient(135deg, #1e3a5f, #1e40af);
        }

        .detail-panel__icon--port {
            background: linear-gradient(135deg, #1e40af, #1e3a8a);
        }

        .detail-panel__icon--factory {
            background: linear-gradient(135deg, #7f1d1d, #450a0a);
        }

        .detail-panel__icon--route {
            background: linear-gradient(135deg, #5b21b6, #312e81);
        }

        .detail-panel__title-block {
            flex: 1;
            min-width: 0;
        }

        .detail-panel__title {
            font-size: var(--text-lg);
            font-weight: 700;
            margin: 0 0 var(--space-1) 0;
            line-height: 1.2;
            word-break: break-word;
        }

        .detail-panel__subtitle {
            font-size: var(--text-sm);
            color: var(--color-text-muted);
            margin: 0;
        }

        .detail-panel__badges {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-1);
            margin-left: auto;
        }

        .detail-panel__alert-banner {
            padding: var(--space-3);
            background: rgba(220, 38, 38, 0.1);
            border: 1px solid rgba(220, 38, 38, 0.3);
            border-radius: var(--radius-md);
            border-left: 3px solid var(--color-danger);
        }

        .detail-panel__alert-title {
            font-weight: 700;
            color: var(--color-danger);
            display: flex;
            align-items: center;
            gap: var(--space-2);
            margin-bottom: var(--space-2);
        }

        .detail-panel__stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: var(--space-3);
        }

        .detail-panel__stat {
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: var(--space-3);
            text-align: center;
        }

        .detail-panel__stat-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--color-text);
            line-height: 1;
        }

        .detail-panel__stat-value--danger { color: var(--color-danger); }
        .detail-panel__stat-value--warning { color: var(--color-warning); }
        .detail-panel__stat-value--success { color: var(--color-success); }

        .detail-panel__stat-label {
            font-size: 10px;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-top: var(--space-1);
        }

        .detail-panel__section {
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .detail-panel__section-header {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-3) var(--space-2);
            border-bottom: 1px solid var(--color-border);
        }

        .detail-panel__section-title {
            font-size: var(--text-xs);
            font-weight: 600;
            color: var(--color-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .detail-panel__section-body {
            padding: var(--space-3);
        }

        .detail-panel__row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: var(--space-3);
            padding: var(--space-2) 0;
            border-bottom: 1px solid var(--color-border);
        }

        .detail-panel__row:last-child {
            border-bottom: none;
        }

        .detail-panel__key {
            font-size: var(--text-sm);
            color: var(--color-text-muted);
            flex-shrink: 0;
        }

        .detail-panel__value {
            font-size: var(--text-sm);
            color: var(--color-text);
            text-align: right;
            word-break: break-word;
        }

        .detail-panel__value--danger { color: var(--color-danger); }
        .detail-panel__value--warning { color: var(--color-warning); }
        .detail-panel__value--highlight {
            background: rgba(139, 92, 246, 0.2);
            color: #c4b5fd;
            padding: 2px 8px;
            border-radius: var(--radius-sm);
            font-weight: 500;
        }

        .detail-panel__tags {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
        }

        .detail-panel__tag-link {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            padding: var(--space-1) var(--space-2);
            background: rgba(139, 92, 246, 0.15);
            color: #c4b5fd;
            border-radius: var(--radius-md);
            font-size: var(--text-xs);
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .detail-panel__tag-link:hover {
            background: rgba(139, 92, 246, 0.25);
        }

        .detail-panel__description {
            font-size: var(--text-sm);
            color: var(--color-text-secondary);
            line-height: 1.6;
            padding: var(--space-2);
        }

        .detail-panel__timeline {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: var(--space-2) 0;
        }

        .detail-panel__timeline-item {
            text-align: center;
            flex: 1;
        }

        .detail-panel__timeline-label {
            font-size: 10px;
            color: var(--color-text-muted);
            text-transform: uppercase;
        }

        .detail-panel__timeline-date {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--color-text);
        }

        .detail-panel__actions {
            display: flex;
            gap: var(--space-2);
            padding-top: var(--space-2);
            border-top: 1px solid var(--color-border);
        }

        .detail-panel__footer {
            padding: var(--space-2) var(--space-3);
            background: var(--color-bg);
            border-top: 1px solid var(--color-border);
            font-size: 10px;
            color: var(--color-text-muted);
            text-align: right;
        }

        /* Entity Card Compatibility - bridge old and new */
        .entity-card {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .entity-card__header {
            display: flex;
            gap: var(--space-3);
            align-items: flex-start;
        }

        .entity-card__icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
        }

        .confidence-chart {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
        }

        .confidence-bar {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            cursor: pointer;
            padding: var(--space-1);
            border-radius: var(--radius-sm);
            transition: background var(--duration-fast);
        }

        .confidence-bar:hover {
            background: var(--color-bg-hover);
        }

        .confidence-bar:focus {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        .confidence-bar__label {
            width: 24px;
            font-size: 10px;
            font-weight: 700;
            text-align: center;
            border-radius: var(--radius-sm);
            padding: 2px;
        }

        .confidence-bar--vh .confidence-bar__label { background: #dc2626; color: white; }
        .confidence-bar--h .confidence-bar__label { background: #f59e0b; color: black; }
        .confidence-bar--m .confidence-bar__label { background: #eab308; color: black; }
        .confidence-bar--l .confidence-bar__label { background: #22c55e; color: white; }

        .confidence-bar__track {
            flex: 1;
            height: 8px;
            background: var(--color-bg);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }

        .confidence-bar__fill {
            height: 100%;
            transition: width var(--duration-normal);
        }

        .confidence-bar--vh .confidence-bar__fill { background: linear-gradient(90deg, #dc2626, #ef4444); }
        .confidence-bar--h .confidence-bar__fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
        .confidence-bar--m .confidence-bar__fill { background: linear-gradient(90deg, #eab308, #facc15); }
        .confidence-bar--l .confidence-bar__fill { background: linear-gradient(90deg, #22c55e, #4ade80); }

        .confidence-bar__count {
            min-width: 40px;
            font-size: var(--text-sm);
            font-weight: 700;
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        .confidence-bar--active {
            background: var(--color-bg-hover);
        }

        .confidence-bar__desc {
            font-size: 10px;
            color: var(--color-text-muted);
            text-align: right;
        }

        /* ============================================
           SUPPLY CHAIN VISUALIZATION
           ============================================ */

        .supply-chain-path {
            padding: var(--space-3);
            background: var(--color-bg);
            border-radius: var(--radius-md);
            margin-top: var(--space-2);
        }

        .supply-chain-path__nodes {
            display: flex;
            align-items: center;
            overflow-x: auto;
            gap: var(--space-1);
            padding-bottom: var(--space-2);
        }

        .supply-chain-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 80px;
            padding: var(--space-2);
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            text-align: center;
            cursor: pointer;
            transition: all var(--duration-fast);
        }

        .supply-chain-node:hover {
            border-color: var(--color-accent);
            transform: translateY(-2px);
        }

        .supply-chain-node--current {
            border-color: var(--color-accent);
            box-shadow: 0 0 0 2px rgba(220, 38, 26, 0.3);
        }

        .supply-chain-node__icon {
            font-size: 24px;
            margin-bottom: 4px;
        }

        .supply-chain-node__name {
            font-size: 10px;
            font-weight: 600;
            color: var(--color-text);
            max-width: 70px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .supply-chain-node__type {
            font-size: 9px;
            color: var(--color-text-muted);
        }

        .supply-chain-arrow {
            color: var(--color-text-muted);
            font-size: 16px;
        }

        /* ============================================
           ANALYTICS TAB - Fixed & Enhanced
           ============================================ */

        #analytics-view {
            padding: var(--space-4);
            overflow-y: auto;
        }

        .analytics-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .analytics-header {
            margin-bottom: var(--space-6);
        }

        .analytics-header h2 {
            font-size: var(--text-xl);
            font-weight: 700;
            margin-bottom: var(--space-1);
        }

        .analytics-header p {
            color: var(--color-text-secondary);
            font-size: var(--text-sm);
        }

        /* Big Stats Grid */
        .analytics-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: var(--space-3);
            margin-bottom: var(--space-6);
        }

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

        .analytics-stat {
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: var(--space-4);
            text-align: center;
            transition: all var(--duration-fast);
        }

        .analytics-stat:hover {
            border-color: var(--color-accent);
            transform: translateY(-2px);
        }

        .analytics-stat__value {
            font-size: 36px;
            font-weight: 700;
            line-height: 1;
            margin-bottom: var(--space-1);
        }

        .analytics-stat__label {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .analytics-stat--danger .analytics-stat__value {
            color: var(--color-danger);
        }

        .analytics-stat--warning .analytics-stat__value {
            color: var(--color-warning);
        }

        /* Charts Grid */
        .analytics-charts {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-4);
        }

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

        @media (min-width: 1200px) {
            .analytics-charts {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .analytics-chart {
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            padding: var(--space-4);
        }

        .analytics-chart h3 {
            font-size: var(--text-base);
            font-weight: 600;
            margin-bottom: var(--space-3);
            color: var(--color-text);
        }

        .analytics-chart__empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200px;
            color: var(--color-text-muted);
            text-align: center;
        }

        .analytics-chart__empty-icon {
            font-size: 48px;
            margin-bottom: var(--space-2);
            opacity: 0.5;
        }

        /* Intelligence Feed Section */
        .intelligence-feed {
            margin-top: var(--space-6);
        }

        .intelligence-feed__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--space-3);
        }

        .intelligence-feed__title {
            font-size: var(--text-lg);
            font-weight: 700;
        }

        .intelligence-feed__count {
            background: var(--color-accent);
            color: white;
            padding: 2px 8px;
            border-radius: var(--radius-full);
            font-size: var(--text-xs);
            font-weight: 700;
        }

        .intelligence-item {
            display: flex;
            gap: var(--space-3);
            padding: var(--space-3);
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            margin-bottom: var(--space-2);
            transition: all var(--duration-fast);
        }

        .intelligence-item:hover {
            border-color: var(--color-accent);
        }

        .intelligence-item__icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            background: var(--color-bg-elevated);
            border-radius: var(--radius-md);
            flex-shrink: 0;
        }

        .intelligence-item__content {
            flex: 1;
            min-width: 0;
        }

        .intelligence-item__title {
            font-weight: 600;
            font-size: var(--text-sm);
            margin-bottom: 4px;
        }

        .intelligence-item__desc {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
        }

        .intelligence-item__time {
            font-size: 10px;
            color: var(--color-text-muted);
            white-space: nowrap;
        }

        .intelligence-item--danger {
            border-left: 3px solid var(--color-danger);
        }

        .intelligence-item--warning {
            border-left: 3px solid var(--color-warning);
        }

        .intelligence-item--info {
            border-left: 3px solid var(--color-info);
        }

        /* ============================================
           ACTION CARDS - What can you DO?
           ============================================ */

        .action-cards {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-3);
            margin-top: var(--space-4);
        }

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

        .action-card {
            display: flex;
            flex-direction: column;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: all var(--duration-fast);
        }

        .action-card:hover {
            border-color: var(--color-accent);
            box-shadow: var(--shadow-md);
        }

        .action-card__header {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3);
            background: var(--color-bg-elevated);
            border-bottom: 1px solid var(--color-border);
        }

        .action-card__icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background: var(--color-bg);
            border-radius: var(--radius-md);
        }

        .action-card__title {
            font-weight: 700;
            font-size: var(--text-base);
        }

        .action-card__desc {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
        }

        .action-card__body {
            flex: 1;
            padding: var(--space-3);
            font-size: var(--text-sm);
            color: var(--color-text-secondary);
        }

        .action-card__footer {
            display: flex;
            gap: var(--space-2);
            padding: var(--space-3);
            background: var(--color-bg-elevated);
            border-top: 1px solid var(--color-border);
        }

        .action-card__btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-1);
            padding: var(--space-2) var(--space-3);
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            font-size: var(--text-sm);
            font-weight: 600;
            cursor: pointer;
            transition: all var(--duration-fast);
            min-height: 44px;
        }

        .action-card__btn:hover {
            background: var(--color-bg-hover);
            border-color: var(--color-accent);
        }

        .action-card__btn--primary {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: white;
        }

        .action-card__btn--primary:hover {
            background: #b91c1c;
        }

        /* ============================================
           FACTORY CATEGORIES - Enhanced
           ============================================ */

        .factory-categories {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-1);
        }

        .factory-category {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            border-radius: var(--radius-full);
            font-size: 11px;
            font-weight: 500;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            color: var(--color-text-secondary);
            cursor: pointer;
            transition: all var(--duration-fast);
        }

        .factory-category:hover {
            border-color: var(--color-accent);
            color: var(--color-text);
        }

        .factory-category--selected {
            background: var(--color-accent);
            border-color: var(--color-accent);
            color: white;
        }

        .factory-category__count {
            background: rgba(0,0,0,0.15);
            padding: 0 4px;
            border-radius: var(--radius-sm);
            font-weight: 700;
        }

        /* Category color coding */
        .factory-category[data-category="weapons"] {
            border-color: #dc2626;
            color: #fca5a5;
        }

        .factory-category[data-category="weapons"].factory-category--selected {
            background: #dc2626;
            color: white;
        }

        .factory-category[data-category="electronics"]
        .factory-category[data-category="technology"] {
            border-color: #3b82f6;
            color: #93c5fd;
        }

        .factory-category[data-category="logistics"] {
            border-color: #22c55e;
            color: #86efac;
        }

        .factory-category[data-category="materials"] {
            border-color: #f59e0b;
            color: #fcd34d;
        }

        .factory-category[data-category="chemicals"] {
            border-color: #8b5cf6;
            color: #c4b5fd;
        }

        /* ============================================
           LOADING STATES
           ============================================ */

        .loading-skeleton {
            position: absolute;
            inset: 0;
            background: var(--color-bg);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .loading-skeleton.hidden {
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--duration-normal);
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--color-border);
            border-top-color: var(--color-accent);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* ============================================
           LIBERATION UI PATTERNS
           - Quick Exit (Panic Button)
           - Data Freshness Indicators
           - Human-Scale Numbers
           - Offline States
           ============================================ */

        /* Quick Exit Button (Panic Button) */
        .quick-exit-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            font-size: 18px;
            cursor: pointer;
            transition: all var(--duration-fast);
            opacity: 0.6;
        }

        .quick-exit-btn:hover {
            opacity: 1;
            background: var(--color-bg-hover);
            border-color: var(--color-accent);
        }

        .quick-exit-btn:focus {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        /* Data Freshness Indicator */
        .status-pill[data-freshness="fresh"] {
            background: rgba(34, 197, 94, 0.15);
            color: var(--color-success);
        }

        .status-pill[data-freshness="stale"] {
            background: rgba(245, 158, 11, 0.15);
            color: var(--color-warning);
        }

        .status-pill[data-freshness="old"] {
            background: rgba(220, 38, 38, 0.15);
            color: var(--color-danger);
        }

        /* Offline Banner */
        .offline-banner {
            position: fixed;
            top: 52px;
            left: 0;
            right: 0;
            background: rgba(220, 38, 38, 0.95);
            color: white;
            padding: var(--space-2) var(--space-4);
            text-align: center;
            font-size: var(--text-sm);
            font-weight: 600;
            z-index: var(--z-overlay);
            display: none;
        }

        .offline-banner.visible {
            display: block;
        }

        /* Human-Scale Numbers */
        .human-scale {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: var(--space-4);
            background: var(--color-bg);
            border-radius: var(--radius-lg);
            text-align: center;
        }

        .human-scale__number {
            font-size: 48px;
            font-weight: 700;
            line-height: 1;
            color: var(--color-accent);
        }

        .human-scale__context {
            font-size: var(--text-sm);
            color: var(--color-text-muted);
            margin-top: var(--space-1);
        }

        .human-scale__impact {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            margin-top: var(--space-2);
            padding-top: var(--space-2);
            border-top: 1px solid var(--color-border);
        }

        /* Action Cards with Time Estimates */
        .action-time {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 6px;
            background: var(--color-bg);
            border-radius: var(--radius-sm);
            font-size: 10px;
            color: var(--color-text-muted);
            margin-left: auto;
        }

        /* Skeleton Loading (Bandwidth-Friendly) */
        .skeleton-text,
        .skeleton-bar {
            background: linear-gradient(
                90deg,
                var(--color-bg-elevated) 25%,
                var(--color-bg) 50%,
                var(--color-bg-elevated) 75%
            );
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: var(--radius-sm);
        }

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

        .skeleton-text {
            height: 1em;
            margin-bottom: var(--space-2);
        }

        .skeleton-bar {
            height: 32px;
            margin-bottom: var(--space-1);
        }

        /* Battery-Saving Mode (Low-Power) */
        .low-power .skeleton-text,
        .low-power .skeleton-bar {
            animation: none;
            background: var(--color-bg-elevated);
        }

        .low-power [data-animate] {
            animation: none !important;
            transition: none !important;
        }

        /* Stress Mode (Larger Touch Targets) */
        .stress-mode button,
        .stress-mode .btn,
        .stress-mode .filter-chip,
        .stress-mode .entity-card__action-btn {
            min-height: 56px;
            font-size: var(--text-lg);
        }

        .stress-mode .entity-card__row {
            padding: var(--space-3) 0;
        }

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

        /* Base layout - Main content starts below header + status bar */
        #main {
            display: flex;
            flex-direction: column;
            min-height: calc(100vh - 52px - 40px); /* Subtract header + status bar */
        }

        .map-view {
            display: flex;
            flex: 1;
            position: relative;
        }

        .status-bar__live {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-1) var(--space-3);
            background: var(--color-bg);
            border-bottom: 1px solid var(--color-border);
            font-size: var(--text-xs);
            overflow-x: auto;
            position: sticky;
            top: 52px; /* Below header */
            z-index: 50;
        }

        @media (max-width: 767px) {
            /* Hide desktop elements */
            .sidebar:not(.is-open),
            .filter-panel:not(.is-open) {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 60vh;
                transform: translateY(100%);
                border-radius: var(--radius-lg) var(--radius-lg) 0 0;
                z-index: var(--z-modal);
            }

            .sidebar.is-open,
            .filter-panel.is-open {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                height: 60vh;
                transform: translateY(0);
                border-radius: var(--radius-lg) var(--radius-lg) 0 0;
                z-index: var(--z-modal);
                box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
            }

            /* Show mobile toggle buttons */
            .mobile-toggles {
                display: flex;
                flex-direction: column;
                gap: var(--space-1);
            }

            /* Panel close button visible on mobile */
            .panel__close {
                display: flex;
            }

            /* Backdrop - visual separation only, no blocking */
            .panel-backdrop {
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.2);
                z-index: calc(var(--z-modal) - 1);
                opacity: 0;
                pointer-events: none;
                transition: opacity var(--duration-normal);
            }

            .panel-backdrop.visible {
                opacity: 1;
                /* Note: pointer-events stays none so users can still interact with map behind */
            }

            /* Panel close button - enhanced for mobile */
            .panel__close {
                min-width: 44px;
                min-height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--color-bg);
                border: 1px solid var(--color-border);
                border-radius: var(--radius-md);
                color: var(--color-text-secondary);
                font-size: 20px;
                cursor: pointer;
                transition: all var(--duration-fast);
            }

            .panel__close:hover {
                background: var(--color-bg-hover);
                color: var(--color-text);
                border-color: var(--color-accent);
            }

            .panel__close:active {
                transform: scale(0.95);
            }

            /* Mobile panel improvements */
            @media (max-width: 900px) {
                .sidebar.is-open,
                .filter-panel.is-open {
                    max-height: 85vh; /* Prevent overflow on mobile */
                    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
                    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
                }

                .panel__body {
                    -webkit-overflow-scrolling: touch; /* Momentum scroll on iOS */
                    overscroll-behavior: contain; /* Prevent body scroll */
                }

                /* Drag handle for swipeable panels */
                .sidebar::before,
                .filter-panel::before {
                    content: '';
                    display: block;
                    width: 40px;
                    height: 4px;
                    background: var(--color-border);
                    border-radius: var(--radius-full);
                    margin: var(--space-2) auto;
                }
            }

            /* Full-width map */
            #map-container {
                position: fixed;
                inset: 0;
            }

            #main {
                top: 90px; /* header + status bar */
            }
        }

        /* ============================================
           BOTTOM NAVIGATION (Desktop + Mobile)
           ============================================ */

        .bottom-nav {
            position: fixed;
            bottom: 28px; /* Above footer */
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-full);
            padding: var(--space-1) var(--space-2);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--space-1);
            z-index: var(--z-sticky);
            box-shadow: var(--shadow-lg);
        }

        .bottom-nav__btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: var(--space-2) var(--space-3);
            background: transparent;
            border: none;
            color: var(--color-text-muted);
            font-size: var(--text-xs);
            cursor: pointer;
            min-width: 70px;
            min-height: 44px; /* Touch target */
            border-radius: var(--radius-md);
            transition: all var(--duration-fast);
        }

        .bottom-nav__btn:hover {
            background: var(--color-bg-hover);
            color: var(--color-text);
        }

        .bottom-nav__btn--active {
            color: var(--color-accent);
            background: rgba(220, 38, 26, 0.1);
        }

        .bottom-nav__btn:focus {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        .bottom-nav__icon {
            font-size: 20px;
        }

        .bottom-nav__label {
            font-size: 10px;
            font-weight: 500;
        }

        /* ============================================
           PRINT STYLES
           ============================================ */

        @media print {
            .sidebar,
            .filter-panel,
            .header__actions,
            /* Status bar visible on mobile too */
            .status-bar__live {
                display: flex !important;
                flex-wrap: wrap;
            }

            #main {
                position: static;
            }

            #map-container {
                height: calc(100vh - 180px); /* Account for header + status bar */
            }
        }

        /* ============================================
           ACCESSIBILITY ENHANCEMENTS
           ============================================ */

        /* Focus visible for keyboard users */
        :focus-visible {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

        /* Skip link */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: var(--color-accent);
            color: white;
            padding: var(--space-2) var(--space-3);
            z-index: 1000;
            transition: top var(--duration-fast);
        }

        .skip-link:focus {
            top: 0;
        }

        /* Reduced motion */
        @media (prefers-reduced-motion: reduce) {
            * {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* High contrast mode */
        @media (prefers-contrast: high) {
            :root {
                --color-border: #ffffff;
                --color-text: #ffffff;
                --color-text-secondary: #cccccc;
            }

            .btn, .filter-chip, .entity-card__action-btn {
                border-width: 2px;
            }
        }

        /* Active button state for toggle buttons */
        .btn--active {
            background: var(--color-accent) !important;
            border-color: var(--color-accent) !important;
            color: white !important;
        }

        /* Comparison Bar */
        .comparison-bar {
            position: fixed;
            bottom: 72px; /* Above bottom-nav */
            left: 0;
            right: 0;
            background: var(--color-bg-elevated);
            border-top: 2px solid var(--color-accent);
            padding: var(--space-3);
            z-index: 100;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
        }

        .comparison-bar__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-2);
        }

        .comparison-bar__toggle {
            background: none;
            border: none;
            color: var(--color-text);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: var(--text-sm);
            padding: var(--space-2);
        }

        .comparison-bar__count {
            background: var(--color-accent);
            color: white;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 12px;
            min-width: 24px;
            text-align: center;
        }

        .comparison-bar__label {
            color: var(--color-text-secondary);
        }

        .comparison-bar__chevron {
            transition: transform 0.2s;
        }

        .comparison-bar__chevron.expanded {
            transform: rotate(180deg);
        }

        .comparison-bar__clear {
            background: transparent;
            border: 1px solid var(--color-border);
            color: var(--color-text-secondary);
            padding: var(--space-1) var(--space-3);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: var(--text-xs);
        }

        .comparison-bar__clear:hover {
            background: var(--color-bg-hover);
            border-color: var(--color-text-muted);
        }

        .comparison-bar__items {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2);
            min-height: 32px;
        }

        .comparison-bar__placeholder {
            color: var(--color-text-muted);
            font-size: var(--text-xs);
            font-style: italic;
        }

        .comparison-chip {
            display: inline-flex;
            align-items: center;
            gap: var(--space-1);
            background: var(--color-bg-hover);
            border: 1px solid var(--color-border);
            padding: var(--space-1) var(--space-2);
            border-radius: var(--radius-md);
            font-size: var(--text-xs);
        }

        .comparison-chip__type {
            font-size: 12px;
        }

        .comparison-chip__name {
            font-weight: 600;
            color: var(--color-text);
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .comparison-chip__remove {
            background: none;
            border: none;
            color: var(--color-text-muted);
            cursor: pointer;
            padding: 0;
            margin-left: var(--space-1);
            font-size: 12px;
        }

        .comparison-chip__remove:hover {
            color: var(--color-danger);
        }

        /* Comparison Panel (Expanded) */
        .comparison-panel {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--color-bg);
            z-index: 200;
            overflow-y: auto;
        }

        .comparison-panel__header {
            position: sticky;
            top: 0;
            background: var(--color-bg-elevated);
            border-bottom: 1px solid var(--color-border);
            padding: var(--space-3) var(--space-4);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .comparison-panel__title {
            font-size: var(--text-lg);
            font-weight: 700;
            margin: 0;
        }

        .comparison-panel__close {
            background: none;
            border: none;
            color: var(--color-text-secondary);
            font-size: var(--text-xl);
            cursor: pointer;
            padding: var(--space-2);
        }

        .comparison-panel__content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-4);
            padding: var(--space-4);
        }

        .comparison-card {
            background: var(--color-bg-elevated);
            border-radius: var(--radius-lg);
            overflow: hidden;
        }

        .comparison-card__header {
            background: var(--color-bg);
            padding: var(--space-3);
            display: flex;
            align-items: center;
            gap: var(--space-2);
        }

        .comparison-card__icon {
            font-size: 24px;
        }

        .comparison-card__name {
            font-weight: 700;
            font-size: var(--text-base);
        }

        .comparison-card__type {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
        }

        .comparison-card__body {
            padding: var(--space-3);
        }

        .comparison-card__row {
            display: flex;
            justify-content: space-between;
            padding: var(--space-2) 0;
            border-bottom: 1px solid var(--color-border);
        }

        .comparison-card__row:last-child {
            border-bottom: none;
        }

        .comparison-card__key {
            color: var(--color-text-secondary);
            font-size: var(--text-xs);
        }

        .comparison-card__value {
            font-weight: 600;
            font-size: var(--text-sm);
        }

        .comparison-card__value--highlight {
            color: var(--color-accent);
        }

        .comparison-card__value--good {
            color: var(--color-success);
        }

        .comparison-card__value--warning {
            color: var(--color-warning);
        }

        /* Evidence Modal */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal__backdrop {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
        }

        .modal__content {
            position: relative;
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            max-width: 600px;
            max-height: 80vh;
            overflow: auto;
            width: 90%;
        }

        .modal__header {
            position: sticky;
            top: 0;
            background: var(--color-bg-elevated);
            padding: var(--space-4);
            border-bottom: 1px solid var(--color-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal__title {
            margin: 0;
            font-size: var(--text-lg);
            color: var(--color-text);
        }

        .modal__close {
            background: none;
            border: none;
            color: var(--color-text-secondary);
            font-size: 24px;
            cursor: pointer;
            padding: var(--space-1);
        }

        .modal__body {
            padding: var(--space-4);
        }

        .evidence-chain {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .evidence-chain__item {
            background: var(--color-bg-elevated);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: var(--space-3);
        }

        .evidence-chain__item--verified {
            border-left: 3px solid var(--color-success);
        }

        .evidence-chain__item--unverified {
            border-left: 3px solid var(--color-warning);
        }

        .evidence-chain__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-2);
        }

        .evidence-chain__type {
            font-weight: 700;
            color: var(--color-text);
        }

        .evidence-chain__status {
            font-size: var(--text-xs);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .evidence-chain__status--verified {
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
        }

        .evidence-chain__status--unverified {
            background: rgba(245, 158, 11, 0.2);
            color: #f59e0b;
        }

        .evidence-chain__description {
            font-size: var(--text-sm);
            color: var(--color-text-secondary);
            margin-bottom: var(--space-2);
        }

        .evidence-chain__meta {
            display: flex;
            gap: var(--space-3);
            font-size: var(--text-xs);
            color: var(--color-text-muted);
        }

        .evidence-chain__source {
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        .evidence-chain__source a {
            color: var(--color-info);
            text-decoration: none;
        }

        .evidence-chain__source a:hover {
            text-decoration: underline;
        }

        .evidence-chain__empty {
            text-align: center;
            padding: var(--space-6);
            color: var(--color-text-muted);
        }

        /* Civil Actions */
        .civil-action-item {
            background: var(--color-bg);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-md);
            padding: var(--space-2);
            margin-bottom: var(--space-2);
            cursor: pointer;
            transition: all 0.2s;
        }

        .civil-action-item:hover {
            border-color: var(--color-accent);
            background: var(--color-bg-hover);
        }

        .civil-action-item__header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: var(--space-1);
        }

        .civil-action-item__type {
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
        }

        .civil-action-item__type--protest {
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
        }

        .civil-action-item__type--blockade {
            background: rgba(245, 158, 11, 0.2);
            color: #f59e0b;
        }

        .civil-action-item__type--divestment {
            background: rgba(139, 92, 246, 0.2);
            color: #8b5cf6;
        }

        .civil-action-item__type--boycott {
            background: rgba(239, 68, 68, 0.2);
            color: #ef4444;
        }

        .civil-action-item__date {
            font-size: var(--text-xs);
            color: var(--color-text-muted);
        }

        .civil-action-item__title {
            font-weight: 600;
            font-size: var(--text-sm);
            color: var(--color-text);
            margin-bottom: var(--space-1);
        }

        .civil-action-item__location {
            font-size: var(--text-xs);
            color: var(--color-text-secondary);
            display: flex;
            align-items: center;
            gap: var(--space-1);
        }

        .civil-action-item__meta {
            display: flex;
            gap: var(--space-2);
            margin-top: var(--space-2);
            font-size: var(--text-xs);
            color: var(--color-text-muted);
        }

        .civil-action-item__participants {
            color: var(--color-success);
        }

        .civil-action-item__outcome {
            color: var(--color-info);
        }

        /* Civil Actions */
        .civil-action-item {
            background: var(--color-bg);
        }

        [data-touch="large"] .btn,
        [data-touch="large"] .filter-chip,
        [data-touch="large"] .toggle-item {
            min-height: var(--touch-target);
        }

        /* Route type styling - smooth transitions but scoped to routes only */
        .route-weapons {
            filter: drop-shadow(0 0 6px rgba(255, 71, 87, 0.8));
            animation: pulse-danger 2s ease-in-out infinite;
        }

        .route-air {
            stroke-dasharray: 10, 5;
        }

        .route-air:hover {
            animation: dash-move 1s linear infinite;
        }

        .route-hover {
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) !important;
            z-index: 1000;
        }

        /* Smooth transitions ONLY for route hover states */
        .leaflet-overlay-pane svg path.route-line {
            transition: stroke-width 0.15s ease, opacity 0.15s ease;
        }

        /* Animations */
        @keyframes pulse-danger {
            0%, 100% { opacity: 0.9; filter: drop-shadow(0 0 6px rgba(255, 71, 87, 0.8)); }
            50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 71, 87, 1)); }
        }

        @keyframes dash-move {
            to { stroke-dashoffset: -15; }
        }

        @keyframes pulse-route {
            0%, 100% { opacity: 0.9; }
            50% { opacity: 1; }
        }