/* ============================================================
   HOLVAR — Editorial / Financial Times skin
   Loaded AFTER style.css to override the dark-theme palette.
   Keeps every existing feature; just changes the chrome.
   ============================================================ */

:root {
    /* === FT palette === */
    --paper:        #fff1e5;       /* salmon-cream */
    --paper-2:      #f7e6d4;       /* slightly darker (rules, hover) */
    --paper-3:      #ede0cc;       /* deeper bg (input wells) */
    --ink:          #16302b;       /* dark green-ink */
    --ink-2:        #2c4f48;
    --rule:         #d4c8b8;       /* hairline rules */
    --rule-2:       #c2b09a;
    --claret:       #990f3d;       /* FT signature accent */
    --claret-2:     #c43a55;
    --sepia:        #8a6a3a;       /* secondary accent (confirmed/reported) */
    --sepia-2:      #b08a4a;
    --muted:        #66605c;
    --green-news:   #1b5e3f;       /* "verified registry" */

    /* Override the dark-theme tokens — everything else cascades */
    --bg-primary:        var(--paper);
    --bg-secondary:      var(--paper);
    --bg-surface:        var(--paper);
    --bg-elevated:       var(--paper-2);
    --bg-glass:          rgba(255, 241, 229, 0.94);
    --border-color:      var(--rule);
    --border-subtle:     var(--rule);
    --border-accent:     var(--ink);
    --text-primary:      var(--ink);
    --text-secondary:    var(--muted);
    --text-dim:          var(--muted);
    --text-muted:        var(--muted);
    --accent:            var(--claret);
    --accent-bright:     var(--claret-2);
    --accent-dim:        var(--claret);
    --accent-glow:       rgba(153, 15, 61, 0.18);
    --accent-subtle:     rgba(153, 15, 61, 0.07);
    --accent-gradient:   linear-gradient(90deg, transparent, var(--claret), transparent);
    --danger:            var(--claret);
    --danger-dim:        var(--claret);
    --warning:           var(--sepia);
    --success:           var(--green-news);
    --info:              var(--ink);

    /* Confidence palette → editorial */
    --conf-detected:     #999087;
    --conf-reported:     var(--sepia);
    --conf-confirmed:    var(--sepia-2);
    --conf-registry:     var(--green-news);
    --conf-sanctioned:   var(--claret);
    --conf-embargoed:    var(--claret);

    /* Tier accents (kept colored but in editorial-friendly tones) */
    --tier-intel-color:  var(--ink);
    --tier-signal-color: var(--sepia);
    --tier-sensor-color: var(--green-news);

    /* Markets */
    --color-bull:        var(--green-news);
    --color-bear:        var(--claret);
    --color-flat:        var(--muted);
    --markets-glow:      rgba(27, 94, 63, 0.16);

    /* Type */
    --font-sans: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
    --font-display: 'DM Serif Display', 'EB Garamond', Georgia, serif;
    --font-meta: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;

    /* Shadows: replace dark glow with paper drop-shadows */
    --shadow-sm: 0 1px 2px rgba(22,48,43,0.08);
    --shadow-md: 0 4px 14px rgba(22,48,43,0.10);
    --shadow-lg: 0 12px 30px rgba(22,48,43,0.12);
    --shadow-xl: 0 20px 50px rgba(22,48,43,0.16);
    --shadow-glow: 0 0 0 1px rgba(153,15,61,0.18);

    /* Geometry — flatter */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;

    /* Slightly taller topbar for the masthead */
    --topbar-height: 4.2rem;
    --markets-ticker-height: 2.0rem;
    --stats-bar-height: 2.4rem;
}

/* === Body / base === */
html, body {
    background: var(--paper) !important;
    color: var(--ink) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px;
    letter-spacing: 0;
}

/* === MASTHEAD (topbar) === */
.topbar {
    background: var(--paper) !important;
    border-bottom: 3px double var(--ink) !important;
    height: var(--topbar-height) !important;
    padding: 0 1.5rem !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.topbar-logo {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    color: var(--ink) !important;
    letter-spacing: -0.02em !important;
    text-shadow: none !important;
    gap: 8px;
}
.topbar-logo svg { stroke: var(--claret) !important; fill: none !important; filter: none !important; }
.topbar-logo span { color: var(--ink) !important; letter-spacing: 0 !important; }

.topbar-divider {
    width: 1px !important;
    background: var(--rule) !important;
    height: 60% !important;
    margin: 0 0.6rem !important;
    box-shadow: none !important;
}

/* Region presets — editorial nav */
.regional-presets { gap: 0 !important; }
.preset-btn {
    background: transparent !important;
    border: none !important;
    color: var(--muted) !important;
    font: 600 11px var(--font-meta) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.13em !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    box-shadow: none !important;
}
.preset-btn:hover { color: var(--ink) !important; background: transparent !important; }
.preset-btn.active {
    color: var(--ink) !important;
    background: transparent !important;
    border-bottom-color: var(--claret) !important;
    box-shadow: none !important;
}

/* View tabs (MAP/GRAPH/MATRIX) — editorial */
.view-tabs {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
}
.view-tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--muted) !important;
    font: 600 11px var(--font-meta) !important;
    letter-spacing: 0.13em !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 0 !important;
}
.view-tab-btn.active {
    background: transparent !important;
    border-bottom-color: var(--claret) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

/* Status indicator */
.status-indicator {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    gap: 6px !important;
    color: var(--claret) !important;
    font: 600 10px var(--font-mono) !important;
    letter-spacing: 0.18em !important;
}
.status-dot { background: var(--claret) !important; box-shadow: 0 0 8px rgba(153,15,61,0.6) !important; }
#status-text { color: var(--claret) !important; }
.entity-count { color: var(--muted) !important; font-family: var(--font-mono) !important; }

/* Topbar controls (share, terminator, console, fullscreen) — hidden in editorial */
.topbar-controls { display: none !important; }

/* Live cursor coordinates — hidden in editorial */
.cursor-coords, #cursor-coords { display: none !important; }

/* === MARKETS TICKER === */
.markets-ticker, .ticker-container {
    background: var(--paper) !important;
    border-top: 1px solid var(--rule) !important;
    border-bottom: 1px solid var(--rule) !important;
    color: var(--ink) !important;
}
/* Polymarket bottom bar — no top/bottom borders (the dark hairline above
   the ticker was the var(--rule) border showing as a horizontal line
   over the map). Bottom is the viewport edge, top sits flush against
   the map content and the sidebar's HOLVAR footer. */
.polymarket-ticker {
    background: var(--paper) !important;
    color: var(--ink) !important;
    border-top: none !important;
    border-bottom: none !important;
}
/* V2.0 — single bottom bar (polymarket war-only). Spans the full viewport
   width and sits flush at the bottom. */
.polymarket-ticker.poly-bottom-bar {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 901 !important; /* above sidebar (500) so it covers cleanly */
}
/* Sidebar reserves space for ONE ticker now, not two — closes the dark
   gap that was visible between sidebar-bottom and ticker-top. */
.sidebar {
    bottom: var(--ticker-height) !important;
}
/* Lift MapLibre zoom controls back to sit just above the single ticker
   instead of the legacy two-bar offset (--ticker-total-height). */
body:has(.polymarket-ticker.poly-bottom-bar) .maplibregl-ctrl-bottom-right {
    bottom: calc(var(--ticker-height) + 0.727rem) !important;
}
/* Hover/click affordance for the war-only prediction items */
.polymarket-ticker .news-box { padding: 0 1.6rem !important; gap: 0.6rem !important; }
.polymarket-ticker .news-link {
    color: var(--ink) !important;
    font-family: var(--font-meta) !important;
    font-size: 11px !important;
}
.polymarket-ticker .news-link:hover { color: var(--claret) !important; }
.markets-label, .ticker-label, .poly-label {
    background: var(--paper) !important;
    color: var(--muted) !important;
    font: 600 9px var(--font-mono) !important;
    letter-spacing: 0.2em !important;
    border-right: 1px solid var(--rule) !important;
    /* Align right edge with sidebar's right edge */
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    padding: 0 1.5rem !important;
    box-sizing: border-box !important;
}
.ticker-item { color: var(--ink) !important; }
.ticker-item .symbol, .news-item { color: var(--ink) !important; font-family: var(--font-meta) !important; }
.ticker-item .price { color: var(--ink) !important; font-family: var(--font-mono) !important; }
.ticker-item .change.up { color: var(--green-news) !important; }
.ticker-item .change.down { color: var(--claret) !important; }

/* === STATS BAR === */
#stats-bar {
    background: var(--paper) !important;
    border-bottom: 1px solid var(--rule) !important;
    height: var(--stats-bar-height) !important;
    padding: 0 1.5rem !important;
    gap: 1.6rem !important;
    backdrop-filter: none !important;
}
.sb-item {
    border-right: 1px solid var(--rule) !important;
    padding-right: 1.6rem !important;
    gap: 6px !important;
}
.sb-pulse {
    width: 6px; height: 6px;
    background: var(--claret) !important;
    box-shadow: 0 0 6px rgba(153,15,61,0.5);
    animation: ed-pulse 2s ease-in-out infinite;
}
@keyframes ed-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }
.sb-label {
    font: 600 9px var(--font-meta) !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
}
.sb-val {
    font-family: var(--font-display) !important;
    font-size: 15px !important;
    color: var(--ink) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}
.sb-val.green { color: var(--green-news) !important; }
.sb-val.amber { color: var(--ink) !important; }
.sb-val.blue  { color: var(--ink) !important; }
.sb-divider { background: var(--rule) !important; }

/* === SIDEBAR (editorial "Index" column) === */
.sidebar {
    background: var(--paper) !important;
    border-right: 1px solid var(--rule) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
}
.sidebar::before, .sidebar::after { display: none !important; }
.sidebar-content { padding: 4px 0 !important; }

/* Tier banner — editorial column header */
.sidebar-tier {
    background: var(--paper) !important;
    border-bottom: 2px solid var(--ink) !important;
    border-top: none !important;
    margin: 14px 0 6px !important;
    padding: 8px 18px !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}
.sidebar-tier .tier-label {
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.sidebar-tier .tier-meta {
    font-family: var(--font-sans) !important;
    font-style: italic !important;
    font-size: 11px !important;
    color: var(--muted) !important;
}
.sidebar-tier .tier-dot { background: var(--claret) !important; box-shadow: none !important; }

.sidebar-section {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--rule) !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.sidebar-section-header {
    background: transparent !important;
    padding: 10px 18px !important;
    border-bottom: none !important;
}
.sidebar-section-title {
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    gap: 8px !important;
}
.sidebar-section-title .icon svg { stroke: var(--claret) !important; }
.toggle-count { font-family: var(--font-mono); color: var(--muted); font-size: 10px; }
.section-note {
    font-family: var(--font-sans) !important;
    font-style: italic !important;
    color: var(--muted) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    padding: 0 18px 8px !important;
}

.folder-content { padding: 0 18px 12px !important; }

/* Switch (toggle) — editorial */
.switch {
    width: 32px !important;
    height: 18px !important;
}
.switch .slider {
    background: transparent !important;
    border: 1.5px solid var(--rule) !important;
    border-radius: 10px !important;
}
.switch .slider::before {
    width: 12px !important; height: 12px !important;
    background: var(--muted) !important;
    box-shadow: none !important;
    top: 1px !important; left: 1px !important;
    border-radius: 50% !important;
}
.switch input:checked + .slider {
    background: rgba(153,15,61,0.1) !important;
    border-color: var(--claret) !important;
}
.switch input:checked + .slider::before {
    background: var(--claret) !important;
    transform: translateX(14px) !important;
    box-shadow: 0 0 4px rgba(153,15,61,0.4) !important;
}

/* Filter groups */
.filter-group { padding: 6px 0 !important; }
.filter-title {
    font-family: var(--font-meta) !important;
    font-size: 10px !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.13em !important;
    margin-bottom: 6px !important;
    border-bottom: 1px dotted var(--rule);
    padding-bottom: 3px;
}
.filter-checkbox-row {
    padding: 3px 0 !important;
    gap: 7px !important;
    align-items: baseline;
}
/* Fully custom checkbox: appearance:none lets us paint a flat white tick
   on a solid claret square, instead of the browser's accent-color
   rendering which on Edge/Chrome blends a gradient and looks washed out. */
.filter-checkbox-row input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 14px !important;
    height: 14px !important;
    border: 1.5px solid var(--ink) !important;
    border-radius: 2px !important;
    background: var(--paper) !important;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 0 !important;
    transition: background 0.12s, border-color 0.12s;
}
.filter-checkbox-row input[type="checkbox"]:checked {
    background: var(--claret) !important;
    border-color: var(--claret) !important;
}
/* The white check mark, drawn as a CSS rotated rectangle (no SVG asset).
   Two borders form the corner of an L, rotated 45° = a checkmark. */
.filter-checkbox-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.8px 1.8px 0;
    transform: rotate(45deg);
}
.filter-checkbox-label {
    color: var(--ink) !important;
    font: 400 13px var(--font-sans) !important;
    font-style: italic !important;
}
.legend-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px 8px !important;
}
.legend-grid .filter-checkbox-label {
    font-style: normal !important;
    font: 600 11px var(--font-meta) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.legend-dot { border-radius: 50% !important; flex-shrink: 0; }
.legend-section-label {
    font: 600 9px var(--font-meta) !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.13em !important;
    margin-top: 6px !important;
}
.legend-item { color: var(--ink) !important; font: italic 12px var(--font-sans) !important; gap: 7px; }

/* Year-range slider (delivery year) — editorial styling */
.year-range-labels {
    color: var(--muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
}
.yr-range-center {
    color: var(--claret) !important;
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}
.year-range-track { background: var(--rule) !important; border-radius: 0 !important; }
.year-range-fill { background: var(--claret) !important; border-radius: 0 !important; box-shadow: none !important; }
#yr-sl-min::-webkit-slider-thumb,
#yr-sl-max::-webkit-slider-thumb {
    background: var(--claret) !important;
    border: 2px solid var(--paper) !important;
    box-shadow: 0 0 0 1px var(--claret) !important;
}

/* CTA button */
.flows-open-btn, .btn, .btn-ghost, .btn-sm {
    background: var(--paper) !important;
    border: 1.5px solid var(--ink) !important;
    color: var(--ink) !important;
    font: 600 11px var(--font-meta) !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
}
.flows-open-btn:hover, .btn:hover {
    background: var(--ink) !important;
    color: var(--paper) !important;
}

/* Sidebar footer */
.sidebar-footer {
    background: var(--paper) !important;
    border-top: 2px solid var(--ink) !important;
    color: var(--muted) !important;
}
.sidebar-footer-brand { color: var(--ink) !important; font-family: var(--font-display) !important; font-size: 13px !important; letter-spacing: 0 !important; }
.sidebar-footer-version { color: var(--muted) !important; font: italic 11px var(--font-sans) !important; }
.sidebar-footer-link { color: var(--muted) !important; }
.sidebar-footer-link:hover { color: var(--claret) !important; }
.sidebar-footer-ca {
    background: var(--paper-3) !important;
    border: 1px solid var(--rule) !important;
    color: var(--ink) !important;
    font-family: var(--font-mono) !important;
}

/* Sidebar toggle handle */
.sidebar-toggle-btn {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    color: var(--muted) !important;
    box-shadow: none !important;
}

/* === DSCA floating button === */
.dsca-btn {
    background: var(--paper) !important;
    border: 1.5px solid var(--ink) !important;
    color: var(--ink) !important;
    font: 600 11px var(--font-meta) !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none !important;
    transition: right 220ms cubic-bezier(0.23, 1, 0.32, 1) !important;
}
/* Shift the DEALS button left when the flows panel is open so it stays visible */
body.flows-panel-open .dsca-btn { right: calc(300px + 18px) !important; }
/* Shift left to clear the right-side panel on GRAPH (260px wide) */
body.view-graph  .dsca-btn { right: calc(260px + 18px) !important; }
body.view-graph.flows-panel-open .dsca-btn { right: calc(260px + 300px + 26px) !important; }

/* DEALS button hidden on MATRIX (the matrix already has its own deal display) */
body.view-matrix .dsca-btn,
body.view-matrix .dsca-panel { display: none !important; }
.dsca-btn:hover { background: var(--ink) !important; color: var(--paper) !important; }
.dsca-btn-count {
    background: var(--claret) !important;
    color: var(--paper) !important;
    font-family: var(--font-mono) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.dsca-panel {
    background: var(--paper) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-lg) !important;
    backdrop-filter: none !important;
}
.dsca-panel-header {
    background: var(--paper-2) !important;
    border-bottom: 2px solid var(--ink) !important;
}
.dsca-panel-title {
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.dsca-panel-close { color: var(--muted) !important; }
.dsca-panel-close:hover { color: var(--claret) !important; }

/* Notification list rows in DSCA panel */
#notif-list .notif-item, #notif-list > div {
    background: var(--paper) !important;
    border-bottom: 1px solid var(--rule) !important;
    border-left: none !important;
    color: var(--ink) !important;
}

/* === Flows panel === */
.flows-panel {
    background: var(--paper) !important;
    border-left: 1px solid var(--rule) !important;
    box-shadow: var(--shadow-lg) !important;
    backdrop-filter: none !important;
}
.flows-panel-header {
    background: var(--paper-2) !important;
    border-bottom: 2px solid var(--ink) !important;
}
.flows-panel-title {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.flows-panel-section-label {
    font: 600 9px var(--font-meta) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--claret) !important;
    border-top: 1px solid var(--rule) !important;
    padding: 12px 18px 6px !important;
}

/* Transactions list — items become news cards */
#transactions-list .tx-item, #transactions-list > div,
.tx-item {
    background: var(--paper) !important;
    border-bottom: 1px solid var(--rule) !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
    color: var(--ink) !important;
}
.tx-item:hover { background: var(--paper-2) !important; }
.tx-item .tx-route, .tx-route {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
    font-size: 14px !important;
}
.tx-item .tx-meta, .tx-meta {
    font: italic 11px var(--font-sans) !important;
    color: var(--muted) !important;
}
.tx-item .tx-value, .tx-value {
    font-family: var(--font-display) !important;
    color: var(--green-news) !important;
    font-size: 14px !important;
}
.tx-item .tx-confidence, .tx-confidence {
    font: 600 9px var(--font-meta) !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 1px 5px !important;
}
.tx-confidence.in_registry { background: rgba(27,94,63,0.12) !important; color: var(--green-news) !important; }
.tx-confidence.confirmed   { background: rgba(176,138,74,0.18) !important; color: var(--sepia) !important; }
.tx-confidence.reported    { background: rgba(138,106,58,0.18) !important; color: var(--sepia) !important; }
.tx-confidence.detected    { background: rgba(153,144,135,0.2) !important; color: var(--muted) !important; }

/* === Country profile drawer === */
#country-profile-panel {
    background: var(--paper) !important;
    /* Borders only shown when the drawer is open — otherwise they'd draw a
       hairline at the bottom of the page when the empty drawer is collapsed. */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ink) !important;
}
#country-profile-panel.open {
    border-top: 1px solid var(--ink) !important;
    box-shadow: var(--shadow-xl) !important;
}
#country-profile-panel .cp-h, #country-profile-panel h1, #country-profile-panel h2,
#country-profile-panel .cp-name {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
#country-profile-panel .cp-stat, #country-profile-panel .cp-stat-val {
    font-family: var(--font-display) !important;
    color: var(--ink) !important;
}
#country-profile-panel button, #country-profile-panel .cp-close {
    background: transparent !important;
    border: 1px solid var(--ink) !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
}

/* === Modals (deep-dive, GDELT, charts) === */
.modal-overlay { background: rgba(22,48,43,0.55) !important; backdrop-filter: blur(4px) !important; }
.modal, .deepdive-modal, .news-modal {
    background: var(--paper) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-xl) !important;
    color: var(--ink) !important;
}
.modal-header {
    background: var(--paper-2) !important;
    border-bottom: 2px solid var(--ink) !important;
    color: var(--ink) !important;
}
.modal-title {
    font-family: var(--font-display) !important;
    font-size: 18px !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.modal-close { color: var(--muted) !important; }
.modal-close:hover { color: var(--claret) !important; }
.deepdive-tabs {
    background: var(--paper) !important;
    border-bottom: 1px solid var(--rule) !important;
}
.deepdive-tab {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--muted) !important;
    font: 600 11px var(--font-meta) !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase !important;
}
.deepdive-tab.active {
    color: var(--ink) !important;
    border-bottom-color: var(--claret) !important;
    background: transparent !important;
}

/* === Map + map controls === */
#map { background: var(--paper) !important; }
/* Subtle cream wash over the basemap canvas (boundaries + labels remain readable) */
#map .maplibregl-canvas {
    filter: sepia(0.18) saturate(0.85) brightness(1.03) contrast(0.97);
}
.maplibregl-ctrl button { background: var(--paper) !important; color: var(--ink) !important; }
.maplibregl-ctrl-group {
    background: var(--paper) !important;
    box-shadow: 0 0 0 1px var(--ink) !important;
    border-radius: 0 !important;
}
.maplibregl-ctrl-attrib {
    background: rgba(255,241,229,0.85) !important;
    color: var(--muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 9px !important;
}
.maplibregl-ctrl-attrib a { color: var(--claret) !important; }
.maplibregl-popup-content {
    background: var(--paper) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    color: var(--ink) !important;
    font-family: var(--font-sans) !important;
    box-shadow: var(--shadow-lg) !important;
}
.maplibregl-popup-tip { border-top-color: var(--ink) !important; border-bottom-color: var(--ink) !important; }
.popup-row { border-bottom: 1px dotted var(--rule) !important; }
.popup-label {
    font: 600 9px var(--font-meta) !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.13em !important;
}
.popup-value { color: var(--ink) !important; font-family: var(--font-sans) !important; }
/* Tier-gated source field */
.popup-value.popup-locked {
    color: var(--claret) !important;
    font-style: italic !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.popup-value.popup-locked .lock-icon { font-style: normal; opacity: 0.85; }
.popup-value.popup-locked:hover { color: var(--ink) !important; }

/* Globe toggle, share button, status indicators */
#status-box, .perf-monitor {
    background: rgba(255,241,229,0.92) !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
    backdrop-filter: none !important;
    box-shadow: var(--shadow-sm) !important;
}
/* Globe toggle: align button + tooltip on the same horizontal line, equal heights */
#globe-toggle-container {
    display: flex;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
/* Globe toggle is map-only — hide on GRAPH and MATRIX views */
body.view-graph  #globe-toggle-container,
body.view-matrix #globe-toggle-container { display: none !important; }
#globe-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-sm) !important;
    font-size: 16px !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#globe-tooltip {
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    background: var(--paper) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    padding: 0 12px !important;
    color: var(--ink) !important;
    font-family: var(--font-meta) !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    backdrop-filter: none !important;
    box-shadow: var(--shadow-sm) !important;
    line-height: 1 !important;
}
#globe-tooltip strong { color: var(--claret) !important; }

/* Loading overlay */
#loading-overlay { background: var(--paper) !important; }
.loading-logo { color: var(--ink) !important; font-family: var(--font-display) !important; letter-spacing: 0 !important; }
.loading-logo span { color: var(--ink) !important; }
.loading-bar-fill { background: var(--claret) !important; }
.loading-pct { color: var(--claret) !important; font-family: var(--font-display) !important; }
.loading-status { color: var(--muted) !important; font-style: italic; }

/* Map filter loader */
.map-loader { background: var(--paper) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; }
.map-loader-pct { color: var(--claret) !important; font-family: var(--font-display) !important; }
.map-loader-bar { background: var(--claret) !important; }
.map-loader-label { color: var(--muted) !important; font-family: var(--font-mono) !important; }

/* Console */
.console-wrapper {
    background: var(--paper) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    color: var(--ink) !important;
    font-family: var(--font-mono) !important;
}
.console-header {
    background: var(--paper-2) !important;
    border-bottom: 1px solid var(--ink) !important;
}
.console-title { color: var(--ink) !important; }
.console-output { color: var(--ink) !important; }
.log-err { color: var(--claret) !important; }

/* GRAPH view re-skin */
#graph-view { background: var(--paper) !important; }
#gv-left, #gv-right {
    background: var(--paper) !important;
    border-color: var(--rule) !important;
}
#gv-center {
    background: var(--paper-2) !important;
    background-image: none !important;
}
/* Override the inline dark gradient in graph.js by targeting the SVG bg rect */
#gv-svg rect[fill*="url"] { fill: var(--paper-2) !important; }
#gv-svg circle[fill="none"] { stroke: rgba(22,48,43,0.05) !important; }
.gv-head-label, .gv-filter-label, .gv-right-label {
    color: var(--muted) !important;
    font-family: var(--font-meta) !important;
    letter-spacing: 0.18em !important;
}
.gv-head-sub { color: var(--ink) !important; font-family: var(--font-display) !important; }
.gv-right-count { color: var(--claret) !important; font-family: var(--font-display) !important; }
.gv-node-name, .gv-deal-name { color: var(--ink) !important; }
.gv-node-val, .gv-deal-val { color: var(--green-news) !important; }
.gv-chip {
    border-radius: 0 !important;
    font-family: var(--font-meta) !important;
    border-color: var(--rule) !important;
    color: var(--muted) !important;
}
.gv-chip.active { background: var(--claret) !important; color: var(--paper) !important; border-color: var(--claret) !important; }
#gv-graph-label { color: var(--muted) !important; font-family: var(--font-meta) !important; }
#gv-stabilizing { background: rgba(255,241,229,0.85) !important; }
.gv-stab-label { color: var(--muted) !important; }
.gv-stab-pct { color: var(--claret) !important; font-family: var(--font-display) !important; }
.gv-stab-bar { background: var(--claret) !important; }
.gv-deal-conf.reg { background: rgba(27,94,63,0.12) !important; color: var(--green-news) !important; }
.gv-deal-conf.cnf { background: rgba(176,138,74,0.18) !important; color: var(--sepia) !important; }
.gv-deal-conf.rpt { background: rgba(138,106,58,0.18) !important; color: var(--sepia) !important; }

/* MATRIX view re-skin */
#matrix-view { background: var(--paper) !important; }
.mx-header { background: var(--paper) !important; border-bottom: 2px solid var(--ink) !important; }
.mx-header-title {
    font-family: var(--font-display) !important;
    font-size: 16px !important;
    color: var(--ink) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.mx-tab {
    background: transparent !important;
    border: 1px solid var(--rule) !important;
    color: var(--muted) !important;
    font-family: var(--font-meta) !important;
    border-radius: 0 !important;
}
.mx-tab.active { background: var(--claret) !important; color: var(--paper) !important; border-color: var(--claret) !important; }
.mx-row { border-bottom: 1px solid var(--rule) !important; }
.mx-row:hover { background: var(--paper-2) !important; }
.mx-name { color: var(--ink) !important; font-family: var(--font-sans) !important; font-size: 13px !important; font-style: italic; }
.mx-val { color: var(--ink) !important; font-family: var(--font-display) !important; }
.mx-bar-wrap { background: rgba(22,48,43,0.06) !important; }
.mx-rank { color: var(--muted) !important; font-family: var(--font-mono) !important; }
.mx-total { color: var(--green-news) !important; font-family: var(--font-display) !important; }
.mx-right { background: var(--paper) !important; border-color: var(--rule) !important; }
.mx-stat {
    background: var(--paper-2) !important;
    border-color: var(--rule) !important;
    border-radius: 0 !important;
}
.mx-stat-val { color: var(--ink) !important; font-family: var(--font-display) !important; }
.mx-stat-lbl {
    color: var(--muted) !important;
    font-family: var(--font-meta) !important;
    letter-spacing: 0.13em !important;
}

/* GDELT, news, polymarket sections — inherit from sidebar overrides */
.gdelt-time-btn {
    background: transparent !important;
    border: 1px solid var(--rule) !important;
    color: var(--muted) !important;
    border-radius: 0 !important;
    font-family: var(--font-mono) !important;
}
.gdelt-time-btn.active { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }

/* Skeleton placeholders — paper grain */
.phyl-skeleton, .phyl-skeleton-row {
    background: linear-gradient(90deg, var(--paper-2) 0%, var(--paper-3) 50%, var(--paper-2) 100%) !important;
    background-size: 200% 100% !important;
}

/* Token gate — keep but in editorial palette */
#token-gate-overlay { background: rgba(22,48,43,0.55) !important; backdrop-filter: blur(4px) !important; }
.token-gate-modal {
    background: var(--paper) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 0 !important;
    color: var(--ink) !important;
}
.tg-tier {
    background: var(--paper-2) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 0 !important;
}
.tg-tier.tg-sentinel { border-color: var(--claret) !important; }
.tg-tier-name { color: var(--ink) !important; font-family: var(--font-display) !important; }
.tg-tier-amount { color: var(--claret) !important; font-family: var(--font-display) !important; }
.tg-btn-primary { background: var(--claret) !important; color: var(--paper) !important; border-radius: 0 !important; }
.tg-btn-ghost   { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; }

/* Breaking banner */
#breaking-banner {
    background: var(--claret) !important;
    color: var(--paper) !important;
    font-family: var(--font-meta) !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-weight: 600;
}

/* Misc cleanup — remove glows and dark accents */
.tx-flagship-badge, .deal-flagship {
    background: var(--claret) !important;
    color: var(--paper) !important;
    border-radius: 0 !important;
}

/* === Daily Morning Brief === */
.dd-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(22, 48, 43, 0.55);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    animation: dd-fade-in 220ms ease;
    padding: 20px;
}
.dd-overlay.dd-closing { animation: dd-fade-out 240ms ease forwards; }
@keyframes dd-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes dd-fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes dd-slide-up {
    from { transform: translateY(16px); opacity: 0 }
    to   { transform: translateY(0); opacity: 1 }
}
.dd-card {
    background: var(--paper);
    border: 1px solid var(--ink);
    width: min(560px, 100%);
    max-height: 85vh;
    padding: 32px 36px 26px;
    position: relative;
    box-shadow: 0 30px 80px rgba(22, 48, 43, 0.30), 0 8px 20px rgba(22,48,43,0.12);
    overflow-y: auto;
    animation: dd-slide-up 280ms cubic-bezier(0.23, 1, 0.32, 1);
}
.dd-close {
    position: absolute; top: 10px; right: 14px;
    background: transparent; border: none;
    font-size: 26px; color: var(--muted);
    cursor: pointer; line-height: 1; padding: 4px 10px;
    font-family: var(--font-display);
}
.dd-close:hover { color: var(--claret); }

.dd-meta {
    font-family: var(--font-meta);
    font-size: 10px; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 8px; margin-bottom: 14px;
}
.dd-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 30px; line-height: 1.05; color: var(--ink);
    letter-spacing: -0.015em;
    margin-bottom: 10px;
}
.dd-deck {
    font-family: var(--font-sans);
    font-style: italic; font-size: 15px; line-height: 1.5;
    color: var(--muted);
    margin-bottom: 22px;
}
.dd-list {
    border-top: 2px solid var(--ink);
    margin-bottom: 18px;
}
.dd-deal {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 14px; align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid var(--rule);
}
.dd-deal-flags { font-size: 16px; line-height: 1; }
.dd-deal-info { min-width: 0; }
.dd-deal-route {
    font-family: var(--font-display);
    font-size: 14px; color: var(--ink);
    line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dd-deal-cat {
    font-family: var(--font-meta);
    font-size: 9px; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--muted);
    margin-top: 2px;
}
.dd-deal-val {
    font-family: var(--font-display);
    font-size: 16px; color: var(--green-news);
    text-align: right;
}
.dd-deal-val.claret { color: var(--claret); }
.dd-more {
    font-family: var(--font-sans); font-style: italic;
    font-size: 12px; color: var(--muted);
    text-align: center; padding: 8px 0 16px;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 16px;
}
.dd-btn {
    background: var(--ink); color: var(--paper);
    border: none; padding: 12px 20px;
    font: 600 11px var(--font-meta);
    text-transform: uppercase; letter-spacing: 0.18em;
    cursor: pointer; width: 100%;
    transition: background 160ms ease;
}
.dd-btn:hover { background: var(--claret); }

/* ============================================================
   MOBILE OVERRIDES (≤ 600px width — phones)
   ============================================================ */
@media (max-width: 600px) {
    /* === Hide things that don't fit on phone === */
    #globe-toggle-container { display: none !important; }
    .topbar-controls { display: none !important; }
    .breaking-banner, #breaking-banner { font-size: 10px !important; padding: 4px 8px !important; }

    /* === Topbar: keep logo + tabs, drop everything else for space === */
    .topbar {
        padding: 0 0.5rem !important;
        gap: 0.4rem !important;
        height: 3rem !important;
    }
    .topbar-logo {
        font-size: 16px !important;
        gap: 4px !important;
    }
    .topbar-logo svg { width: 18px !important; height: 18px !important; }
    .topbar-logo span { display: inline !important; font-size: 16px !important; }
    .view-tab-btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 9px !important;
        letter-spacing: 0.08em !important;
    }
    .view-tabs { margin-left: auto !important; }

    /* === Stats bar: scroll horizontally if it overflows === */
    #stats-bar {
        height: auto !important;
        min-height: var(--stats-bar-height) !important;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        gap: 1rem !important;
        padding: 0.4rem 0.8rem !important;
        scrollbar-width: none;
    }
    #stats-bar::-webkit-scrollbar { display: none; }
    .sb-item {
        flex-shrink: 0 !important;
        padding-right: 1rem !important;
    }
    .sb-label { font-size: 8px !important; }
    .sb-val   { font-size: 12px !important; }

    /* === Markets/news/polymarket tickers: shorter on mobile === */
    .markets-ticker, .ticker-container, .polymarket-ticker {
        height: var(--ticker-height) !important;
    }
    .markets-label, .ticker-label, .poly-label {
        width: auto !important;
        min-width: auto !important;
        padding: 0 0.6rem !important;
    }

    /* === Sidebar: mobile slide-in (already in style.css), reinforce here === */
    .sidebar { width: 86vw !important; max-width: 360px !important; }
    .sidebar-footer { padding: 0.6rem !important; }
    .sidebar-footer-link {
        padding: 6px 10px !important;
        min-width: 44px; min-height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* === Floating "DEALS" button — smaller, top-right; hidden on GRAPH/MATRIX views === */
    .dsca-btn {
        right: 8px !important;
        top: calc(var(--topbar-height) + var(--markets-ticker-height) + var(--stats-bar-height) + 6px) !important;
        padding: 4px 8px !important;
        font-size: 9px !important;
    }
    /* On GRAPH/MATRIX, the side panel already shows deal info — hide the floating button on mobile */
    body.view-graph  .dsca-btn,
    body.view-matrix .dsca-btn { display: none !important; }
    .dsca-btn-count {
        font-size: 9px !important;
        padding: 0 4px !important;
    }

    /* === DSCA panel & Flows panel: full-width on mobile, off-screen by default === */
    .dsca-panel, .flows-panel {
        width: 100vw !important;
        max-width: none !important;
        left: auto !important;          /* must NOT set left when right is off-screen */
        right: -100vw !important;       /* off-screen to the right by default */
    }
    .flows-panel.open  { right: 0 !important; }
    .dsca-panel.open   { right: 0 !important; }
    body.flows-panel-open .dsca-btn { right: 8px !important; }  /* don't shift on mobile */

    /* === Country profile drawer: full-width === */
    #country-profile-panel {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 60vh !important;
    }

    /* === Modals (FAQ, deep-dive, GDELT, charts, daily brief): full-screen === */
    .modal, .deepdive-modal, .news-modal {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
    }
    .modal-overlay { padding: 0 !important; align-items: stretch !important; }
    .deepdive-tabs { overflow-x: auto; white-space: nowrap; }
    .deepdive-tab { font-size: 10px !important; padding: 0.5rem 0.7rem !important; flex-shrink: 0; }

    /* Daily Brief (morning digest) — full-width on phone */
    .dd-card {
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        padding: 24px 18px !important;
        border: none !important;
    }
    .dd-headline { font-size: 22px !important; line-height: 1.15 !important; }
    .dd-deck { font-size: 13px !important; }
    .dd-deal { grid-template-columns: 50px 1fr auto !important; gap: 8px !important; padding: 9px 0 !important; }
    .dd-deal-route { font-size: 13px !important; }
    .dd-deal-val { font-size: 14px !important; }

    /* === GRAPH view: hide side panels, full-width SVG === */
    #gv-left, #gv-right { display: none !important; }
    #gv-center {
        width: 100vw !important;
        height: calc(100vh - var(--topbar-height)) !important;
    }
    #gv-graph-label { font-size: 8px !important; letter-spacing: 1px !important; padding: 4px 6px !important; }
    #gv-legend {
        flex-wrap: wrap !important;
        gap: 6px !important;
        font-size: 8px !important;
        bottom: 6px !important;
        left: 6px !important;
    }
    #gv-stabilizing { padding: 0 !important; }
    .gv-stab-pct { font-size: 28px !important; }
    .gv-stab-bar-wrap { width: 60vw !important; max-width: 280px !important; }

    /* === MATRIX view: hide right panel, full-width left === */
    .mx-right { display: none !important; }
    .mx-left { padding: 6px 12px !important; }
    .mx-name { width: 90px !important; min-width: 90px !important; font-size: 12px !important; }
    .mx-val { width: 60px !important; font-size: 11px !important; }
    .mx-rank { width: 14px !important; font-size: 9px !important; }
    .mx-flag { width: 16px !important; font-size: 14px !important; }
    .mx-bar-wrap { height: 8px !important; }
    .mx-header { padding: 0 12px !important; gap: 6px !important; }
    .mx-header-title { font-size: 11px !important; }
    .mx-tab { font-size: 9px !important; padding: 3px 6px !important; }
    .mx-total { font-size: 11px !important; }

    /* === Map controls: smaller zoom buttons on mobile === */
    .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { margin: 0 6px 6px 0 !important; }
    .maplibregl-ctrl button { width: 32px !important; height: 32px !important; }
    .maplibregl-ctrl-attrib {
        font-size: 8px !important;
        padding: 1px 4px !important;
        max-width: 60vw !important;
    }

    /* === Hide cluttery widgets on mobile === */
    .cursor-coords, .perf-monitor, #status-box, #news-ticker-container {
        display: none !important;
    }

    /* GDELT bottom polymarket ticker: hide on mobile (sidebar covers it) */
    .polymarket-ticker { display: none !important; }
    .sidebar { bottom: 0 !important; }
    body:has(.polymarket-ticker.poly-bottom-bar) .maplibregl-ctrl-bottom-right { bottom: 0.5rem !important; }
}

/* ============================================================
   TABLET (601-900px)
   ============================================================ */
@media (min-width: 601px) and (max-width: 900px) {
    /* Hide GRAPH side panels but keep wider SVG */
    #gv-left { display: none !important; }
    #gv-right { width: 200px !important; min-width: 200px !important; }

    /* MATRIX: keep right panel narrower */
    .mx-right { width: 200px !important; min-width: 200px !important; }

    /* Topbar — narrower presets */
    .preset-btn { padding: 0.3rem 0.5rem !important; font-size: 10px !important; }
    .view-tab-btn { padding: 0.3rem 0.6rem !important; font-size: 10px !important; }
    .topbar-divider { display: none !important; }
}