/* 1. DEFAULT (DARK MODE) SETTINGS */
:root {
    --grad-top: #000000;
    --grad-bot: #094b78;
    --text-col: #fff;
    --nav-col: #000b;
    --menu-highlight-col: #3decf2; /* The "Poppy" Cyan */
    --main-col: #0003;
    --shadow: #fff5;
    --mull-text-col: #ccc;
    --button-col: #094b78;
    --button-text-col: #fff;
    --slider-col1: #4c8ad494;
    --slider-col2: #000000;
    --scrollbar-thumb-col: #26629382;
    --cook-txt: #000;
    --latest_news_tab: #335c8766;
    --sidebar-col: #fffc;
    --sidebar-a-col: #000;
    --placeholder-col: #888888;
}

/* 2. LIGHT MODE OVERRIDES */
[data-theme='light'] {
    --grad-top: #ffffff;
    --grad-bot: #0e71b3;
    --text-col: #000000;
    --nav-col: #fffb;
    --menu-highlight-col: #053a5e; /* Deep Navy Blue for high contrast */
    --main-col: #fff5;
    --shadow: #0000;
    --mull-text-col: #0a2a45;        
    --latest_news_tab: #d6e5f466;
    --sidebar-col: #f0f0f0;
    --sidebar-a-col: #000;
   --placeholder-col: #666666;
}

[data-theme='light'] img[alt="Logo"] {
    filter: brightness(0.7) contrast(1.3) saturate(1.2);
}



        * { 
margin: 0; 
padding: 0; 
    scrollbar-width: thin; 
    scrollbar-color: var(--scrollbar-thumb-col) var(--nav-col);
}

/* Prevents inputs from forcing their containers to expand */
input, textarea {
    min-width: 0;
    width: 100%; /* Ensures they fill the allocated space without exceeding it */
}

/* Specifically for your grid rows to ensure they respect the 1fr limit */
.pde-input-row {
    min-width: 0;
}

/* Apply placeholder color globally */
input::placeholder, 
textarea::placeholder {
    color: var(--placeholder-col);
    opacity: 1; /* Required for Firefox to show the full color */
}

/* Also handle the select dropdown if needed */
select option {
    color: var(--text-col);
}


    
        html { height: 100%; width: 100%; }
    
        body {
            background: linear-gradient(var(--grad-top), var(--grad-bot));
            font-family: 'Times New Roman', Times, serif;
            font: large sans-serif;
            height: 100%;
            margin: 0;
            min-height: 100vh; min-height:100svh;
            overflow: hidden;
            width: 100%;
        }
    
        .noselect {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        button {
            background-color: var(--button-col);
            border: none; 
            border-radius: 0.5em;
            color: var(--button-text-col);
            cursor: pointer;
            font-size: large;
            padding: 1em;
            will-change: filter;
        }
    
        button:hover {
            filter:drop-shadow(0.0em 0.0em 0.8em  #fff3) ;
            background: #1c70ba !important;
            will-change: filter;
        }

        input, label, p { font-size: large; }

        nav {
            background-color: var(--nav-col);
            border-bottom: solid 0.01em #4995ac47;
            padding-bottom: .25em;
            padding-top: 0.25em;
        }

        nav ul {
            align-items: center;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            list-style: none;
            width:100%;
        }

        nav li { height: 50px; }

        nav a {
            align-items: center;
            color: var(--mull-text-col);
            display: flex;
            height: 100%;
            padding: 0 30px;
            text-decoration: none;
        }

        nav a:hover{ color: var(--text-col); }

        nav li:first-child { margin-right: auto; }

        footer a { color: var(--mull-text-col); text-decoration: none; }
        footer a:hover { color: var(--text-col); }

        textarea { font-size: large; resize: none; }
    
        .sidebar {
            align-items: flex-start;
            backdrop-filter: blur(10px);
            background-color: var(--sidebar-col);
            box-shadow: -10px 0 10px rgba(0,0,0,0.1);
            display: none;
            flex-direction: column;
            justify-content: flex-start;
            position: absolute;
            top: 0;
            right: 0;
            height: 100vh; height:100svh;
            width: 250px;
            z-index: 999;
        }
    
        .sidebar li { width: 100%; }
        .sidebar a { color: var(--sidebar-a-col); width: 100%; }
        .menu-button { display: none; }
    
        @media only screen and (max-device-width: 480px) {
            .hideOnMobile { display: none; }
            .menu-button { display: block; }
            .flipOnMobile { row-gap: 2em; flex-direction: column !important; }
            .rflipOnMobile { row-gap: 2em; flex-direction: column-reverse !important; }
            .img3 {
                width: 90%;
                height: 90%;
                border: 0.1em solid transparent; 
                transform: none !important; 
                transform-style: preserve-3d; 
                will-change: contents;
            }
            .sidebar { width: 100%; }
        }
    
        @keyframes slide-left {
            0% { transform: translateX(0); }
            50% { opacity: 1; transform: translateX(-120%); }
            50.001% { opacity: 0; transform: translateX(100vw); }
            50.002% { opacity: 1; transform: translateX(100vw); }
            100% { transform: translateX(0); }
        }
    
        @keyframes slide-left-2 {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
    
        @keyframes slide-left-2p {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }

        img { will-change: filter; -webkit-user-select: none !important; }

        .mainarticle {
            background-color: var(--main-col);
            font: large sans-serif;
            font-size: small;
            height:100%;
            opacity: 0;
            overflow-y: auto;
            overflow-x:hidden;
            pointer-events: none;
            position: absolute;
            width:100%;
        }

        .slider {
            background-color: var(--slider-col1);
            bottom: 0;
            cursor: pointer;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .slider:before {
            background-color: var(--slider-col2);
            bottom: 4px;
            content: "";
            height: 26px;
            left: 4px;
            position: absolute;
            width: 26px;
            -webkit-transition: .4s;
            transition: .4s;
        }

        .switch { display: inline-block; height: 34px; position: relative; width: 60px; }
        .switch input { height: 0; opacity: 0; width: 0; }

        input:checked + .slider { background-color: var(--slider-col1); }
        input:focus + .slider { box-shadow: 0 0 1px #c9e1f5; }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        .slider.round { border-radius: 34px; }
        .slider.round:before {
            border-radius: 50%;
            position: absolute;
            font: 1.1em sans-serif;
            background-color: var(--nav-col);
            color: var(--text-col);
            overflow: auto;
            font-size: small;
            pointer-events:none;
        }

        ::-webkit-scrollbar { background-color: var(--nav-col); border-radius: 0.2em; width: 0.6em; }
        ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-col); border-radius: 0.2em; }

        .highlighted_menu { border-bottom: 0.1em solid var(--menu-highlight-col); color: var(--text-col) !important; }

        .inner-article-container {display: flex; flex-direction: column; margin-top: 5em; min-height: calc(100% - 20em); padding-bottom: 4em; width: 100%;}

/* Demos Grid Styles (Desktop-like view) */
.demos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3em;
    flex-wrap: wrap;
    padding-top: 5em;
}

.demo-card {
    width: 220px;
    height: 220px;
    background: var(--latest_news_tab);
    border: 0.15em solid var(--menu-highlight-col);
    border-radius: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-align: center;
    padding: 1em;
}

.demo-card:hover {
    transform: scale(1.08);
    box-shadow: 0 0 30px var(--menu-highlight-col);
    background-color: var(--sidebar-col);
}

.demo-card svg {
    margin-bottom: 1em;
    color: var(--menu-highlight-col);
}

.demo-card h3 {
    font-size: 1.2em;
    color: var(--text-col);
    margin: 0;
}



/* Scoped PDE Solver Styles */
#pde_solver {
    --col1: #EEE9D5; --col2: #9FBEB8; --col3: #6B7FD7; --col4: #BDEDF6; --col5: #0E1C27;
    --grid_border: #ddd; --g6bb: #ddd; --gbt: #333;
    --gbbg: #fff; --cgbbg: #000; --cgbbg_itm: #fff;
    --cgbbg_select: #00f; --bg1: #eee; --bg2: #ddd;
    --path1: #dddf; --wrapper_bg: #fff;
}

/* Adjust colors when the website is in dark mode */
html[data-theme='dark'] #pde_solver {
    --grid_border: #ddd; --g6bb: #ddd; --gbt: #ddd; --gbbg: #000; --cgbbg: #fff;
    --cgbbg_itm: #fff; --cgbbg_select: #00f; --bg1: #000; --bg2: #333; --path1: #dddf; --wrapper_bg: #000;
}

/* PDE Specific Layout */
#pde_demo_container { padding: 20px; }
#pde_demo_container .header-table { display: table; width: 100%; margin-bottom: 10px;}
#pde_demo_container .nav-link { float: left; color: #c04; cursor: pointer; font-size: 1.2em; text-decoration: none;}
#pde_demo_container .title { float: right; margin: 0; font-size: 1.5em;}

/* New Unified PDE Layout Styles */
.pde-main-flex { 
    display: flex; 
    flex-direction: row; 
    gap: 2em; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: flex-start; 
}

.pde-control-panel {
    min-width: 350px; 
    max-width: 450px; 
    background: var(--latest_news_tab); 
    border: 0.1em solid var(--menu-highlight-col); 
    padding: 1.5em; 
    border-radius: 0.5em; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.pde-group {
    margin-bottom: 1.5em;
}

.pde-group-title {
    color: var(--text-col); 
    font-weight: bold; 
    margin-bottom: 0.5em; 
    border-bottom: 1px solid var(--menu-highlight-col); 
    padding-bottom: 0.2em;
    font-size: 1em;
}

.pde-input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8em;
}

.pde-input-row {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    min-width: 0;

}

.pde-input-row label {
    color: var(--text-col);
    font-size: 0.85em;
}

.pde-input-row input {
    background: var(--main-col);
    color: var(--text-col);
    border: 1px solid var(--mull-text-col);
    padding: 0.2em;
}

.pde-viz-panel {
    min-width: 350px; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

.pde-plot-wrapper {
    border: 0.1em solid var(--menu-highlight-col); 
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    line-height: 0;
}

#pde_demo_container .plot-container { position: relative; }
#pde_demo_container .legend { 
    position: absolute; top: 10px; left: 10px; padding: 10px; 
    background-color: var(--gbbg); border-radius: 5px; border: var(--cgbbg) 1px solid; 
    font-size: 0.8em;
}
#pde_demo_container .playback { 
    position: absolute; bottom: 10px; left: 10px; 
    background-color: var(--gbbg); padding: 5px; display: flex; gap: 5px;
}




#pde_demo_container .playback svg { cursor: pointer; }


/* SCOPED HESTON STYLES - Prevents clashing with main site */
#heston_lab {
    --heston-bg: var(--main-col);
    --heston-panel: var(--latest_news_tab);
    --heston-accent: var(--menu-highlight-col);
    --heston-text: var(--text-col);
    --heston-text-dim: var(--mull-text-col);
    --heston-border: var(--menu-highlight-col);
}

/* Re-mapping Heston specific colors to your theme variables */
#heston_lab .control-group label { color: var(--heston-text-dim); }
#heston_lab .section-title { border-bottom: 1px solid var(--heston-border); color: var(--heston-accent); }
#heston_lab canvas { background: var(--main-col); border: 1px solid var(--heston-border); }

/* Use your existing PDE layout for the Heston Demo */
#heston_lab .heston-main-flex {
    display: flex;
    flex-direction: row;
    gap: 2em;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2em;
}

#heston_lab .heston-control-panel {
    min-width: 350px;
    max-width: 400px;
    background: var(--latest_news_tab);
    border: 0.1em solid var(--menu-highlight-col);
    padding: 1.5em;
    border-radius: 0.5em;
    max-height: 80vh;
    overflow-y: auto;
}

#heston_lab .heston-viz-panel {
    flex-grow: 1;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Clean up Heston's old sidebar-style buttons to look like your site's buttons */
#heston_lab button.download-btn {
    background-color: var(--button-col);
    color: var(--button-text-col);
    border-radius: 0.5em;
    padding: 1em;
    width: 100%;
    cursor: pointer;
}





        .status-badge {
            position: absolute;
            top: 35px;
            right: 45px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            z-index: 5;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .status-idle {
            background: #e5e5ea;
            color: var(--col1); 
        }

        .status-busy {
            background: #007aff;
            color: var(--col1); 
            animation: pulse 1.5s infinite;
        }

        .status-issue {
            background: #ff007a;
            color: var(--col1); 
            animation: pulse 1.5s infinite;
        }


    /* SCOPED CSS FOR AD LIVE SECTION */
    /* This rule fixes the width/alignment issue */
    .ad-app-wrapper, 
    .ad-app-wrapper * {
        box-sizing: border-box;
    }

    .ad-app-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        min-height: 75vh;
    }

    .ad-app-main-container {
        flex-grow: 1;
        padding: 1.5rem;
        height: 100%;
    }

    .ad-app-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        height: 100%;
    }

    .ad-column { 
        display: flex; 
        flex-direction: column; 
        height: 100%; 
        min-width: 0; 
    }

    /* Headers and Tabs */
    .ad-unit-header {
        background: var(--latest_news_tab);
        border: 0.1rem solid var(--menu-highlight-col);
        border-bottom: none;
        padding: 0.6rem 1rem;
        color: var(--text-col);
        font-size: 0.9rem;
        font-weight: bold;
        border-radius: 0.5em 0.5em 0 0;
    }

    .ad-unit-header-tabs {
        background: var(--latest_news_tab);
        border: 0.1rem solid var(--menu-highlight-col);
        border-bottom: none;
        border-radius: 0.5em 0.5em 0 0;
    }

    .ad-tab-row-inner { 
        display: flex; 
    }

    .ad-tab-switch {
        padding: 0.6rem 1.2rem;
        cursor: pointer;
        font-size: 0.85em;
        transition: all 0.2s;
        color: var(--mull-text-col);
    }

    .ad-tab-switch:hover { 
        color: var(--menu-highlight-col); 
    }

    .ad-tab-switch.ad-active {
        border-bottom: 3px solid var(--menu-highlight-col);
        color: var(--text-col);
        font-weight: bold;
    }

    /* Code and Console Containers */
    .ad-code-wrapper {
        flex: 3; 
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .ad-console-wrapper {
        flex: 1; 
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .ad-console-header {
        background: var(--main-col);
        border-left: 0.1em solid var(--mull-text-col);
        border-right: 0.1em solid var(--mull-text-col);
        color: var(--mull-text-col);
        font-size: 0.75em;
        text-transform: uppercase;
        padding: 0.2rem 0.8rem;
        letter-spacing: 0.05em;
    }

    /* The actual editable/output areas */
    .ad-code-editor, .ad-code-output {
        flex-grow: 1;
        background: var(--main-col);
        color: var(--text-col);
        border: 0.1em solid var(--mull-text-col);
        padding: 1rem;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 1.05rem;
        outline: none;
        overflow: auto;
        white-space: pre;
    }

    .ad-code-editor {
        white-space: pre-wrap;
    }

    .ad-console {
        flex-grow: 1;
        background: #00000044; 
        color: #00ffcc; 
        border: 0.1em solid var(--mull-text-col);
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 0.95rem;
        padding: 0.6rem;
        resize: none;
        outline: none;
        width: 100%; /* Explicitly set to ensure border-box works */
    }

    /* Responsive Layout */
    @media (max-width: 900px) {
        .ad-app-grid { 
            grid-template-columns: 1fr; 
            height: auto;
        }
        .ad-column {
            height: 600px; 
        }
    }








/* Research Engine Styles */
.research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2em;
    margin-top: 1em;
}

.research-card {
    background: var(--latest_news_tab);
    border: 0.1em solid var(--menu-highlight-col);
    padding: 1.5em;
    border-radius: 0.5em;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.research-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.research-tag {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--menu-highlight-col);
    margin-bottom: 0.5em;
    font-weight: bold;
}

.research-card h3 {
    margin: 0 0 0.5em 0;
    font-size: 1.2em;
    line-height: 1.3;
}

.research-card p {
    font-size: 0.9em;
    color: var(--mull-text-col);
    line-height: 1.4;
    flex-grow: 1;
}

.research-card-footer {
    margin-top: 1.5em;
    font-size: 0.8em;
    color: var(--mull-text-col);
    display: flex;
    justify-content: space-between;
}

/* Single Article View */
.article-full-view {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease forwards;
}

.article-header {
    margin-bottom: 3em;
    text-align: center;
}

.article-meta {
    font-size: 0.9em;
    color: var(--mull-text-col);
    margin-bottom: 1em;
}

.article-body {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--text-col);
}

.article-actions {
    display: flex;
    gap: 1em;
    justify-content: center;
    margin-top: 3em;
    padding-top: 2em;
    border-top: 1px solid var(--mull-text-col);
}

.btn-research {
    padding: 0.8em 1.5em;
    border: 1px solid var(--menu-highlight-col);
    background: transparent;
    color: var(--text-col);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.2s;
}

.btn-research:hover {
    background: var(--menu-highlight-col);
    color: var(--main-col);
}

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