/* 1. Default Dark Mode (Solaris Zenith Standard) */
:root {
    --bg-main: radial-gradient(circle at center, #1a2a44 0%, #0d1117 100%);
    --panel-bg: rgba(241, 240, 236, 0.1);
    --card-bg: #fdfbf7;
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    --accent: #B8860B;
    --border: rgba(184, 134, 11, 0.3);
}

/* 2. Automatic Light Mode (Checks Device Settings) */
@media (prefers-color-scheme: light) {
    :root {
        --bg-main: #f8fafc; /* Clean light slate */
        --panel-bg: rgba(255, 255, 255, 0.9);
        --card-bg: #ffffff;
        --text-main: #1e293b;
        --text-muted: #475569;
        --accent: #B8860B;
        --border: #e2e8f0;
    }
}

/* 3. Apply variables to the body */
body {
    margin: 0;
    padding: 0;
    background: var(--bg-main) !important;
    color: var(--text-main);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

/* Sidebar Navigation - Cleaned for MAP & DRILL only */
#side-nav {
    position: fixed; left: 0; top: 0; bottom: 0; width: 80px;
    background: var(--bg-main); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center; 
    padding-top: 25px; z-index: 2000;
}

.nav-logo { 
    margin-bottom: 35px; 
    width: 100%;
    display: flex;
    justify-content: center;
}

.sidebar-logo {
    width: 45px; 
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

.nav-item { 
    cursor: pointer; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; /* Ensures vertical centering */
    margin-bottom: 40px;      /* Increased spacing for the icon-only look */
    opacity: 0.4; 
    transition: 0.2s; 
    width: 100%;             /* Ensures the hit-area spans the sidebar width */
}

/* Updated to include Horizon Active State */
.nav-item.active,
body.page-drill #nav-drill,
body.page-horizon #nav-horizon,
body.page-map #nav-map { 
    opacity: 1; 
    color: var(--accent); 
}

.nav-icon { 
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px; 
}

.nav-icon svg {
    max-width: 100%;
    height: auto;
    display: block;
    transition: transform 0.2s ease;
}

.nav-item:hover .nav-icon svg {
    transform: scale(1.1);
}

#main-content { margin-left: 80px; height: 100vh; position: relative; }
.page { height: 100%; width: 100%; display: none; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

#left-hand-panel { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    width: 380px; 
    
    /* 1. Use RGBA for transparency: (253, 251, 247) is your cream color */
    /* 0.85 is the transparency. 1.0 is solid, 0.1 is nearly invisible. */
    background: rgba(241, 240, 236, 0.1) !important; 
    
    border: 1px solid rgba(184, 134, 11, 0.3); /* Added a subtle Gold border */
    z-index: 100; 
    display: none; 
    flex-direction: column; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
    border-radius: 8px; 
    max-height: 90vh;
    
    /* 2. This controls the 'frosting' of the map behind the panel */
    backdrop-filter: blur(15px); 
}

#ui-country { font-size: 15px; font-weight: 700; margin: 0; color: var(--text-main); }

#ui-count-badge {
    /* Remove margin-left: auto; */
    color: var(--text-main) !important; /* FIX: Changed from #000000 to White */
    background: rgba(255,255,255,0.1); /* Optional: add subtle pill bg */
    border-radius: 4px;
    padding: 2px 8px; 
    font-size: 11px; 
    font-weight: 400; 
    text-transform: uppercase;
}

#feed-container { overflow-y: auto; flex-grow: 1; }

.prediction-entry { 
    padding: 15px 20px; 
    border-bottom: 1px solid var(--border); 
    background: transparent;
}

/* Update around Line 398 in style.css */
.timeline-card { 
    background: #fdfbf7 !important; /* Forces the cream color */
    padding: 24px; 
    border-radius: 12px; 
    border: 1px solid #e5e7eb !important; /* Softens the border to match desktop */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; 
    position: relative;
    overflow: hidden;
}

.prediction-entry div { 
    font-size: 13.5px; 
    line-height: 1.6; 
    color: var(--text-main); /* High legibility off-white */
}

#close-panel {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: rgba(91, 88, 88, 0.5) !important;   /* better visibility over map */
    color: var(--card-bg);      /* Solid white X */
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#close-panel:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* System Status - PRESERVED ALL LINES */
#sync-container { position: absolute; bottom: 20px; left: 20px; z-index: 1000; }
#system-status-box { 
    background: white; border-left: 4px solid var(--accent); padding: 20px; font-size: 11px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); border-radius: 8px; margin-bottom: 8px; 
    display: none; min-width: 220px; 
}

@media (hover: hover) {
    #sync-container:hover #system-status-box {
        display: block;
    }
}

.status-meta { font-weight: 800; color: var(--accent); margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 5px; font-size: 9px; }
.status-row { margin-bottom: 6px; color: var(--text-muted); font-family: monospace; }
.legend-item { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; color: #64748b; font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.red { background: #ef4444; }
.dot.orange { background: #f97316; }
.dot.yellow { background: #fbbf24; }
.sync-label { font-size: 10px; color: var(--text-muted); font-weight: 600; }

/* Timeline & Drill Layout - PRESERVED ALL LINES */
.timeline-container { 
    padding: 7px 10px;   /* 30px 40px; */ 
    overflow-y: auto; 
    height: 100vh; 
    box-sizing: border-box; 
    background: var(--bg-main); /* Dark background for drill page */
}

/* Around Line 127 in style.css */
.timeline-card { 
    background: #fdfbf7;           /* Elegant off-white/cream from your mockup */
    padding: 24px; 
    border-radius: 8px;            /* Slightly tighter corners for a classic look */
    border: 1px solid #e5e7eb;     /* Subtle light grey border */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Softer shadow to match the clean aesthetic */
    transition: transform 0.2s ease;
}

/* Ensure the hover state doesn't look too aggressive */
.timeline-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


/* SURGICAL FIX: Unified Desktop Header */
.timeline-header-section { 
    max-width: 1400px; 
    margin: 0 auto 10px auto;
    background: transparent !important; /* Forces transparency */
    border: none !important;            /* Removes the box border */
    box-shadow: none !important;        /* Removes the container shadow */
}

.timeline-header-section h1 { 
    margin: 0 0 15px 0; 
    font-size: 32px; 
    color: var(--accent); /* Solaris Gold */
}

/* SHARED PROPERTIES FOR DRILL CONTROLS */
#drill-search-input, 
#drill-meta-slicer, 
#drill-location-slicer, 
#drill-author-slicer,
.drill-controls-row select,
.drill-controls-row button {
    height: 34px !important;
    font-size: 16px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    
    /* Solaris Branding */
    border: 1px solid var(--accent) !important; 
    border-radius: 8px !important;
    background-color: var(--card-bg) !important;
    
    /* THE VITAL FIX: Force text to Slate so it's visible on Cream */
    color: #334155 !important; 
    
    /* Keep the arrow unless you have a custom SVG replacement */
    appearance: auto; 
    -webkit-appearance: menulist;
}

.timeline-grid { 
    display: grid; gap: 20px; max-width: 1400px; margin: 0 auto; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
}

/* Urgency Color Coding for Badges - PRESERVED ALL LINES */
.age-badge          { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.age-badge.red      { background: #fee2e2; color: #000; border: 1px solid #fecaca; }
.age-badge.orange   { background: #ffedd5; color: #000; border: 1px solid #fed7aa; }
.age-badge.yellow   { background: #fef9c3; color: #000; border: 1px solid #fef08a; }
.age-badge.default  { background: #f1f5f9; color: #000; border: 1px solid var(--border); }

.maplibregl-ctrl-bottom-right { margin-bottom: 60px; margin-right: 15px; }

/* Update around Line 150 in style.css */
.prediction-header-grid {
    display: flex !important;
    flex-direction: column !important; /* Stack title and meta-row vertically */
    gap: 8px;
    margin-bottom: 12px;
}

.prediction-title-box {
    width: 100% !important; /* Title now spans the full width of the card */
}

/* Around Line 175 in style.css */
.prediction-title-link {
    font-family: "Georgia", serif; /* The elegant, high-contrast serif look */
    font-size: 15px;               /* Larger, more prominent size */
    font-weight: 300;              /* Strong, authoritative bold */
    color: var(--accent);                /* Pure black for high legibility */
    text-decoration: none; 
    line-height: 1.2;              /* Tighter line height for headlines */
    display: block; 
    word-wrap: break-word;
    margin-bottom: 8px;            /* Extra breathing room below the title */
}

.prediction-title-link:hover { text-decoration: underline; }

/* Update around Line 180 in style.css */
.prediction-meta-box {
    display: flex !important;
    flex-direction: row !important;      /* Side-by-side layout */
    justify-content: space-between !important; /* Date on Left, Badge on Right */
    align-items: center !important;
    text-align: left !important;         /* Reset from right-align */
    width: 100%;
    margin-top: 4px;
}

.prediction-date-label { font-size: 11px; color: #64748b; font-weight: 600; white-space: nowrap; }

.timeline-body, .prediction-body-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: #334155; /* Hardcoded Slate: Stays dark even in Dark Mode */
}

/* Update around Line 207 in style.css */
.header-grid-container {
    display: grid; 
    grid-template-columns: 80px 1fr 130px;
    grid-template-rows: 60px 30px; 
    border: none !important;

    background: transparent !important; /* Removes the solid grey */

    backdrop-filter: blur(8px);
    margin: 15px; 
    height: 90px;
    border-radius: 4px;

    /* ... existing properties ... */
    border-bottom: 1px solid rgba(184, 134, 11, 0.2) !important; /* Single thin gold divider */
    margin-bottom: 10px;
}


/* Update around Line 235 in style.css */
.grid-box-predictions {
    grid-area: 2 / 1 / 3 / 3; 
    border: none !important;

    background: transparent !important; /* Removes the grey from the prediction count */

    display: flex; 
    justify-content: center; 
    align-items: center;
}

.grid-box-flag {
    grid-area: 1 / 1 / 2 / 2; 
    border: none !important;
    display: flex; justify-content: center; align-items: center;
    background: transparent !important; /* Removes the solid 'var(--bg-main)' */
    overflow: hidden;             /* Hide anything that spills out */
}


.flag-container img { 
    width: 100%;                  /* Fill the width */
    height: 100%;                 /* Fill the height */
    object-fit: cover;            /* Standardize flag display to fill the box */
    border-radius: 0px; 
}

/* Update Line 257 */
.grid-box-name {
    grid-area: 1 / 2 / 2 / 3; 
    border: none !important;
    display: flex; 
    align-items: center; 
    padding-left: 15px;
    background: transparent !important; /* Ensure this is also clear */
}

#ui-country { 
    font-size: 20px !important; /* Slightly smaller for a tighter, pro look */
    font-weight: 800; 
    color: var(--text-main); /* White text against dark bg */
    margin: 0; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Economic Stack (Capital, Income, Region) - PRESERVED ALL LINES */
.grid-box-econ-stack > div {
    display: flex; 
    align-items: center; 
    justify-content: flex-start; /* Changed from flex-end to left align */
    text-align: left;            /* Changed from right to left */
    font-size: 11px;             
    font-weight: 400;             
    color: #000000;               
    padding: 2px 10px;           /* Maintain padding for a clean margin */
    text-transform: uppercase;
    line-height: 1.2;             
    word-wrap: break-word;        
}

.grid-box-econ-stack > div,
    .econ-item {     color: var(--text-main) !important; /* FIX: Changed from #000000 to White */ 
}

.econ-item {
    display: flex; 
    align-items: center; 
    justify-content: flex-start; /* Changed from center/flex-end to left */
    text-align: left;            /* Changed to left */
    font-size: 11px;              
    font-weight: 500;             
    color: #000000; 
    text-transform: uppercase; 
    border-bottom: 0.5px solid var(--border); 
}

#ui-inflation { border-bottom: none; }

/* Drill Header & Controls - PRESERVED ALL LINES */
/* CHANGE THIS BLOCK */
.drill-sticky-header {
    position: sticky; 
    top: 0; 
    background: transparent !important; /* Change from #f1f5f9 to transparent */
    z-index: 110;
/*    padding: 10px 20px 10px 20px;       /* 20px 40px 10px 40px; 
    margin-bottom: 5px; */
}

.drill-meta-container {
    background: transparent !important; /* Change to transparent */
    border: none !important;            /* Removes the 1px solid border */
    box-shadow: none !important;        /* Removes the shadow */
    max-width: 1400px; 
    margin: 0 auto;
}

#page-drill .timeline-container { padding-top: 0 !important; }

#drill-search-input {
    /* Change border-color to Solaris Gold */
    border: 1px solid var(--accent) !important; 
    background: var(--card-bg) !important;
    color: #334155 !important;
}

/* 2. Force the placeholder (Search predictions...) to match the dropdowns */
#drill-search-input::placeholder {
    color: #334155;
    opacity: 0.7; /* Optional: makes it look like a hint */
}

#drill-search-input:focus {
    border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.1);
}

.drill-search-icon { display: flex; align-items: center; justify-content: center; padding-right: 12px; }

/* SURGICAL FIX: Global Reset Button Style for Solaris Prism */
.drill-controls-row button {
    /* Layout & Sizing */
    height: 34px !important;
    padding: 0 25px !important; /* Increased for better Desktop proportions */
    box-sizing: border-box !important;
    font-size: 14px !important; /* Desktop-friendly size */
    font-weight: 600 !important;
    
    /* Solaris Gold Branding */
    border: 1px solid var(--accent) !important; 
    border-radius: 8px !important;
    background-color: var(--card-bg) !important;
    color: var(--accent) !important;
    
    /* Flex alignment */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    
    appearance: none;
    -webkit-appearance: none;
    transition: all 0.2s ease;
}

.drill-controls-row { display: flex; align-items: center; }

#drill-meta-slicer:focus, 
#drill-location-slicer:focus {
    border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.1);
}

#drill-meta-slicer:hover,
#drill-location-slicer:hover { border-color: #cbd5e1; }

/* --- LOADING SCREEN (v7.3.4 Horizon Foundation) --- */
#initial-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fdfbf7; 
    display: flex;       
    justify-content: center;
    align-items: center;    
    z-index: 20000;
    transition: opacity 0.8s ease-out;
}

.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; 
    padding: 0 30px; /* Prevents text hitting edges on mobile */
}

/* "Initializing..." text - subtle and clean */
.loader-text {
    color: #64748b; /* Slate grey to contrast the gold */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 5px;
    opacity: 0.7;
}

/* The J.P. Morgan Quote - The Gold Accent */
.loader-subtext {
    color: var(--accent) !important; /* Solaris Gold #B8860B */
    font-size: 16px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    margin-top: 10px !important;
    line-height: 1.5;
    max-width: 400px; /* Keeps the quote from stretching too wide on desktop */
    
    /* Subtle glow and pulse for the Horizon Foundation theme */
    text-shadow: 0 0 15px rgba(184, 134, 11, 0.2);
    animation: quoteFade 3s infinite ease-in-out;
}

/* Animation to give the quote a "living" feel */
@keyframes quoteFade {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

/* Updated Pulsing Constellation for style.css */
.spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;       /* Increased gap so stars don't overlap */
    border: none;    /* Removes the old circular border */
    animation: none; /* Removes the old spinning animation */
    height: 40px;    /* Gives the container enough height */
}

/* Base style for the 3 stars */
.spinner::before, 
.spinner::after, 
.spinner-inner {
    content: '';
    width: 18px;     /* Increased size for visibility */
    height: 18px;    /* Increased size for visibility */
    background: var(--accent); /* Your Goldenrod */
    border-radius: 50%;
    filter: blur(0.5px); /* Softens the edges like real stars */
    animation: pulse-star 2s infinite ease-in-out;
}

/* Stagger the pulse for the 'constellation' effect */
.spinner::before { animation-delay: 0s; }
.spinner-inner  { animation-delay: 0.4s; }
.spinner::after  { animation-delay: 0.8s; }

@keyframes pulse-star {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(0.8); 
        box-shadow: 0 0 0px var(--accent); 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.3); 
        /* Gold glowing halo */
        box-shadow: 0 0 25px 5px rgba(184, 134, 11, 0.6); 
    }
}


/* Class to trigger fade out */
.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Refined Editorial Today Stamp - Weathered Edition (Layout Updated) */
.today-stamp {
    display: inline-block;        /* Changed to inline-block for side-by-side layout */
    text-align: left;             /* Changed to align with the LHS of the card */
    
    font-family: "Georgia", serif; 
    font-size: 16px;               
    font-weight: 400;
    font-style: italic;
    
    /* PRESERVED: The "Ink" Color */
    color: #f00808;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;                /* Removed margin to align with RHS badge */
    
    /* PRESERVED: THE WEATHERING EFFECTS */
    transform: rotate(-3deg);
    opacity: 0.85;                 
    filter: blur(0.3px) contrast(1.2); 
    
    /* PRESERVED: Gritty texture */
    background: radial-gradient(circle, #8b0000 70%, transparent 85%) 0 0/2px 2px;
    -webkit-background-clip: text;
    background-clip: text;
    
    /* PRESERVED: Subtle pulse animation */
    animation: manual-press 3s ease-in-out infinite;
}

/* PRESERVED: CSS Keyframes */
@keyframes manual-press {
    0% { transform: rotate(-3deg) scale(1); opacity: 0.85; }
    5% { transform: rotate(-4deg) scale(1.05); opacity: 1; }
    15% { transform: rotate(-3deg) scale(1); opacity: 0.85; }
    100% { transform: rotate(-3deg) scale(1); opacity: 0.85; }
}

.location-tag {
    margin-top: 10px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

/* SURGICAL HIT: Matches Drill 'Today' Red (#ef4444) */
.new-pulse {
    animation: pulse-border-red 2s infinite;
    border: 1px solid #ef4444 !important;
}

@keyframes pulse-border-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* HORIZON LAYOUT v7.3.5 */
/* --- HORIZON LAYOUT FOUNDATION (v7.3.5) --- */
.horizon-layout {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.temporal-bar {
    display: none; /* Changed from flex to hide it on initial load */
    width: 80px; /* Slim profile */
    background: rgba(250, 252, 234, 0.9);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    overflow-y: auto;
    scrollbar-width: none; /* Hide scrollbar for the index itself */
}

.temporal-bar::-webkit-scrollbar { display: none; }

.time-marker {
    font-size: 10px;
    color: var(--text-muted);
    padding: 8px 4px;
    cursor: pointer;
    text-align: center;
    width: 100%;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-marker:hover {
        color: var(--accent);
        background: rgba(184, 134, 11, 0.05);
        border-right: 3px solid var(--accent);
}

/* Ensure the gold highlight only applies to the .active class */
.time-marker.active {
    color: var(--accent) !important; /* Your gold color */
    font-weight: bold;
    background: rgba(184, 134, 11, 0.15);
    border-right: 3px solid var(--accent);
}

/* Specific styling for the Today marker in the sidebar */
.time-marker[data-label="Today"] {
    color: #ef4444; /* Deep Red */
    font-weight: bold;
    border-left: 2px solid transparent; /* Prepare for active state */
}

/* When Today is the active/scrolled-to position */
.time-marker[data-label="Today"].active {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.15); /* Soft red glow background */
    border-right: 3px solid #ef4444;
}

/* Optional: Add a small dot indicator next to Today */
.time-marker[data-label="Today"]::before {
    content: "●";
    margin-right: 5px;
    font-size: 8px;
    vertical-align: middle;
}

/* Restores the Full Card Grid Layout */
#page-horizon .timeline-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: var(--bg-main);
    display: grid;
    /* Forces at least 320px width, but expands to fill space */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    align-content: start;
}

/* Ensure the card content flows vertically */
#page-horizon .timeline-card {
    display: flex;
    flex-direction: column;
    height: auto; /* Allows card to grow with content */
    min-height: 250px; /* Prevents the "squashed" look */
    width: 100%;
    margin: 0;
    padding: 15px;
    box-sizing: border-box;
}

/* Ensure the header and body within the card stack */
#page-horizon .prediction-header-grid {
    display: block; /* Overrides any horizontal flex logic */
    margin-bottom: 10px;
}

#page-horizon .timeline-body {
    display: block;
    flex-grow: 1; /* Pushes the body to fill the card */
}

/* Fix for the grid wrapper */
#horizon-grid {
    display: contents;
}

/* Sidebar Timeline Axis */
#horizon-timeline-axis {
    width: 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0; /* More breathing room for the labels */
    background: rgba(241, 240, 236, 0.05); 
    border-right: 1px solid var(--border);
    box-sizing: border-box;
}

.temporal-bar {
    /* ... existing properties ... */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ===============================================================================================================================================
   PHASE 1: MOBILE NAVIGATION FLIP (v6.1.0)
   ===============================================================================================================================================
   */
@media (max-width: 768px) {
    /* 1. GLOBAL RESET & GHOST SIDEBAR FIX */
    body { 
        overflow-x: hidden; 
        width: 100%; 
        position: relative; 
    }
    
    #main-content { 
        margin-left: 0 !important; 
        width: 100%;
    }

    /* 2. PAGE AREA ADJUSTMENTS */
    #page-map, #page-drill {
        left: 0 !important;
        width: 100%;
        bottom: 65px !important; 
    }

    /* 1. Reset positioning to bottom and enable flex spacing */
    #side-nav {
        top: auto !important;     /* Disables the Desktop 'top: 0' */
        bottom: 0 !important;     /* Pins to bottom of screen */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;   /* Spans entire width */
        height: 50px !important;  /* Reduced Prism-build height */
        
        display: flex !important;
        flex-direction: row !important; /* Icons side-by-side */
        justify-content: space-around !important; /* Equal spacing for all 3 */
        align-items: center !important;
        
        padding: 0 !important;
        margin: 0 !important;

        /* The "Prism" Frosted Glass effect */
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) saturate(180%);
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        border-top: 1px solid rgba(184, 134, 11, 0.3);

        /* Add these specific lines */
        position: fixed !important;
        bottom: 0 !important;
        transform: translateY(0); /* Set base state */
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        will-change: transform;

        z-index: 1000;
    }

    /* 2. Ensure each item (Search, Map, Drill) takes equal width */
    .nav-item {
        flex: 1 !important;
        height: 100% !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        opacity: 1 !important; /* Ensure they are fully visible */
    }

    /* 3. Standardize Icon size and remove Desktop padding */
    .nav-icon {
        margin: 0 !important;
        width: 24px !important;
        height: 24px !important;
    }

    /* 4. Hide labels and logos as requested */
    .nav-label, .nav-logo {
        display: none !important;
    }

    .nav-label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
    }

    /* Magnifying glass specific color logic */
    #nav-search-toggle .nav-icon svg {
        color: var(--text-main); /* Slate grey base */
        width: 24px;
        height: 24px;
    }

    #nav-search-toggle {
        pointer-events: auto !important;
        cursor: pointer;
    }

    /* Desktop/Sidebar only items (like the Logo) must stay hidden */
    .nav-logo { display: none !important; }

    .drill-search-icon { display: none !important; }


    /* SURGICAL FIX: v7.0.4 Solaris Prism - Hidden Search Logic */
    .drill-sticky-header {
        display: none !important;      /* Hidden by default on load/refresh */
        position: fixed !important;    /* Keeps it at the top when toggled */
        top: 0;
        left: 0;
        width: 100% !important;
        z-index: 25000 !important; /* Higher than #side-nav (1000) */
        pointer-events: auto !important;

                /* ... your existing code ... */
        transition: opacity 0.3s ease, transform 0.3s ease;
        opacity: 0;
        transform: translateY(-10px);

        /* Clear backgrounds for the Prism look */
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 10px 0 !important;
    }

    /* This is the new 'ON' switch triggered by your JavaScript */
    .drill-sticky-header.active {
        display: block !important; /* Ensure it's rendered */
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto; /* Reactivate clicks when visible */
    }

    /* Maintain transparency for the internal container */
    .drill-meta-container {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
    }

/* --- CONSOLIDATED MOBILE SEARCH PANEL --- */
    /* This handles the background container */
    .drill-controls-row {
        /* Set Transparency here: 0.1 is very transparent, 0.9 is solid white */
        background: rgba(255, 255, 255, 0) !important; 
        backdrop-filter: blur(10px) saturate(180%);
        -webkit-backdrop-filter: blur(10px) saturate(180%);
        
        padding: 12px !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
        
        width: 92% !important; 
        margin: 0 auto 25px auto !important; /* "25px" lifts it from the bottom nav */
        
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important; /* Decreased gap between items */
        align-items: stretch !important; /* FORCES items to fill full width */
    }

    /* This handles the Input, Slicers, and Button width/font */
    #drill-search-input, 
    #drill-meta-slicer, 
    #drill-location-slicer, 
    #drill-author-slicer,
    .drill-controls-row select,
    .drill-controls-row button {
        width: 100% !important;        /* Fixes the 25% narrowness */
        height: 42px !important;       /* Unified height */
        font-size: 16px !important;    /* Increased for legibility */
        color: #334155 !important;    /* Force Slate text visibility */
        background-color: var(--card-bg) !important;
        border: 1px solid var(--accent) !important;
        border-radius: 8px !important;
        padding: 0 12px !important;
        margin: 0 !important;
    }

    /* Fix the Search Bar "typing" color specifically */
    #drill-search-input::placeholder {
        color: #334155 !important;
        opacity: 0.6;
    }

    /* 3. Specific fix for the Reset Button text */
    .drill-controls-row button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--accent) !important;
        font-weight: 600;
        cursor: pointer;
    }
    
    /* 5. CARD GRID & INTERNAL STYLING */
    .timeline-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 10px !important;
        gap: 12px;
    }

    /* Internal Card Layout Elements */
    .prediction-header-grid {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* Update these inside your @media (max-width: 768px) block */
    .prediction-meta-box {
        display: flex !important;
        flex-direction: row !important; /* Forces side-by-side layout */
        justify-content: space-between !important; /* Pushes items to opposite ends */
        align-items: center !important;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .prediction-date-label {
        /* Styles for the Date or "TODAY!" text on the LHS */
        font-size: 11px;
        color: #64748b;
        font-weight: 600;
        margin: 0 !important;
    }

    /* If you have a specific class for the "TODAY!" red text, ensures it aligns left */
    .today-stamp {
        text-align: left !important;
        margin-top: 0 !important;
        font-size: 14px !important;
        display: inline-block !important;
    }

    /* Ensures the Urgency Badge (e.g., "1 days ago") stays on the RHS */
    .age-badge {
        margin: 0 !important;
        flex-shrink: 0; /* Prevents the badge from squishing */
    }

    .location-tag {
        display: block;
        word-wrap: break-word;
        white-space: normal;
        line-height: 1.4;
        font-size: 11px;
        font-weight: 800;
        color: var(--accent);
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    /* Ensure the text inside remains legible on cream */
    .prediction-text {
        font-size: 14px;
        color: var(--text-main) !important; /* Professional Slate Grey text */
        background: transparent !important; /* Prevents text-box clashing */
    }    

    /* Hide the top red line if you don't want it */
    .urgency-indicator {
        display: none !important; /* Removes the red line */
    }

    /* --- MOBILE GHOST FEED FIX --- */
    /* Update around Line 930 in style.css */
    #left-hand-panel {
        pointer-events: none !important; /* Keeps the empty areas clickable to map */
        top: auto !important;
        bottom: 0 !important;
        height: 55vh !important; /* This is the window size */
        width: 100% !important;
        left: 0 !important;
        z-index: 100;
        display: none; 
        flex-direction: column !important; /* Ensures child grows correctly */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #feed-container {
        /* 1. CAPTURE EVENTS: Re-enable interaction for the text area */
        pointer-events: auto !important;
        
        /* 2. ENABLE SCROLLING: Ensure it fills the 55vh height and scrolls */
        flex-grow: 1 !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; /* Smooth mobile scrolling */
        
        /* 3. PREVENT MAP PANNING: Tells the browser this area handles the drag */
        touch-action: pan-y !important; 
        
        width: 100% !important;
        background: transparent !important;
        padding-bottom: 80px !important; /* Space for the navigation bar */
    }

    /* Apply basic rules to everything in the panel */
    #left-hand-panel > * {
        pointer-events: auto !important;
        width: 100% !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* Ensure the header resets its padding to 0 */
    .header-grid-container {
        padding-bottom: 0 !important;
    }


/* SURGICAL HIT: Prism/Frosted Glass Feed for Map View */
    .prediction-entry {
        /* Matches the Country Header look */
        /* background: rgba(218, 230, 247, 0.8) !important; */
        backdrop-filter: blur(8px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
        
        width: 100% !important;
        margin: 0 !important;
        padding: 15px 10px !important;
        border: none !important;
        border-bottom: 1px solid rgba(148, 150, 153, 0.3) !important;
        border-radius: 0 !important;
    }

   
/* --- MOBILE SYNC CONTAINER --- */
    #sync-container {
        display: block !important;
        position: fixed !important;
        bottom: 70px !important; /* Fixed the broken comment here */
        left: 10px !important;
        z-index: 20000 !important; /* Set higher than the prediction panel */
        pointer-events: auto !important;
    }

    #system-status-box {
        display: none; 
        position: absolute;
        bottom: 35px; 
        left: 0;
        background: rgba(253, 251, 247, 0.98) !important;
        border: 1px solid var(--accent);
        padding: 12px;
        border-radius: 8px;
        min-width: 200px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    }

    #system-status-box.mobile-reveal {
        display: block !important;
    }
    
    /* =============================================================
    SURGICAL TWITTER-STYLE FREE-FLOWING FEED (mobile only)
    ============================================================= */
    .timeline-card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 18px 15px !important;
        margin-bottom: 0 !important;
    }

    .timeline-grid {
        gap: 20px !important;           /* natural breathing room like X */
        padding: 10px 15px !important;
    }

    .temporal-bar {
        position: relative !important; /* NO LONGER FIXED */
        display: flex;
        flex-shrink: 0; /* Don't let it get squished */
        width: 60px !important;
        height: 100%;
        z-index: 10;
        /* Match the background to the side-nav for consistency 
        background: var(--panel-bg); */
        background: rgba(250, 252, 234, 0.9);
        border-right: 1px solid var(--border);
        
        /* Smooth sliding */
        transition: margin-left 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    visibility 0.4s;
        margin-left: 0;
    }

    /* When we want to hide it, we slide it out using negative margin */
    .temporal-bar.hidden-mobile {
        margin-left: -60px;
        visibility: hidden;
    }

    /* The card container now fills whatever space is left */
    #page-horizon .timeline-container {
        flex-grow: 1;
        overflow-y: auto;
        padding: 15px;
        width: auto; /* Let flexbox decide width */
    }

    /* MOBILE PREDICTION TEXT */
    /* Light text on dark background (exactly like X dark mode) */
    .prediction-text {
        color: var(--text-main) !important;  
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    /* Around Line 175 in style.css */
    .prediction-title-link {
        font-family: "Georgia", serif; /* The elegant, high-contrast serif look */
        font-size: 15px;               /* Larger, more prominent size */
        font-weight: 300;              /* Strong, authoritative bold */
        color:var(--accent);                /* Pure black for high legibility */
        text-decoration: none; 
        line-height: 1.2;              /* Tighter line height for headlines */
        display: block; 
        word-wrap: break-word;
        margin-bottom: 8px;            /* Extra breathing room below the title */
    }

    .location-tag {
        color: var(--text-muted) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    /* Clean up remaining card elements */
    .urgency-indicator { display: none !important; }
    .timeline-card:hover { transform: none !important; box-shadow: none !important; }

    /* Make Today-stamp & badges sit naturally in the flow */
    .today-stamp {
        font-size: 15px !important;
        margin: 0 0 8px 0 !important;
        display: block !important;
    }

    .age-badge {
        font-size: 12px !important;
        padding: 3px 9px !important;
    }

    #close-panel {
        width: 36px !important;
        height: 36px !important;
        font-size: 22px !important;
        line-height: 36px !important;
        background: rgba(91, 88, 88, 0.5) !important;   /* better visibility over map */
        color: var(--card-bg) !important;
        border: 1px solid rgba(181, 177, 177, 0.858) !important;
    }
    
    #close-panel:hover,
    #close-panel:active {
        background: rgba(255,59,48,0.7) !important;  /* red feedback like iOS close */
    }
    
    /* This ID-based selector is stronger than your existing #sync-container block */
    #sync-container.hidden-state {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* FORCE VISIBILITY ON MOBILE DRILL PAGE */
    #page-drill .prediction-body-text, 
    #page-drill .timeline-body,
    #page-drill .prediction-text {
        color: var(--text-main) !important;
    }

    #page-drill .prediction-date-label {
        color: var(--text-muted) !important;
    }

    /* MOBILE ADAPTATION */
    #date-axis-container {
        width: 40px;
        padding-bottom: 80px; /* Space for mobile nav */
    }
    #horizon-feed {
        padding: 15px;
    }

    #page-horizon .timeline-container {
        grid-template-columns: 1fr;
        padding: 10px;
    }

}

/* Ensure Desktop has the 80px offset */
@media (min-width: 769px) {
    #page-map, #page-drill {
        left: 80px; 
        bottom: 0;
    }
}