/* 
   THEME: Art Deco / Scientifique Élégant 
   Palette: Crème, Bleu Nuit, Or, Noir Encre
*/
:root {
    --bg-color: #f7f5f0;
    /* Antique Paper */
    --panel-bg: #fffcf5;
    /* Lighter Cream */
    --primary: #1a2c42;
    /* Deep Navy/Teal */
    --accent: #c6a45e;
    /* Muted Gold */
    --accent-hover: #e0c070;
    --text-color: #0f1620;
    /* Inky Black */
    --border-color: #1a2c42;
    --grid-line: #e0e0d0;

    --font-heading: 'Didot', 'Bodoni MT', 'Playfair Display', serif;
    --font-ui: 'Gill Sans', 'Gill Sans MT', 'Century Gothic', sans-serif;
    --font-data: 'Courier New', monospace;

    --shadow-deco: 3px 3px 0px var(--accent);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- LAYOUT GRID --- */
.layout-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    /* Controls | Viz */
    height: 100vh;
    border-top: 5px solid var(--primary);
    border-bottom: 5px solid var(--primary);
}

/* --- PANELS --- */
.panel {
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-right: 2px solid var(--primary);
    background-color: var(--panel-bg);
    position: relative;
    overflow: hidden;
    /* For scrolling controls but fixed viz */
}

/* Art Deco Decorative Line */
.panel::after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border: 1px solid var(--accent);
    pointer-events: none;
    z-index: 0;
}

/* Ensure content is above decoration */
.panel>* {
    z-index: 1;
}

.panel.controls {
    background-color: #f0f0eb;
    /* Slightly darker for contrast */
    overflow-y: auto;
}

.panel.visualization {
    display: flex;
    flex-direction: column;
}

/* --- HEADERS --- */
.panel-header {
    border-bottom: 2px solid var(--primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: center;
}

h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    /* Reduced from 24px */
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
    text-shadow: 1px 1px 0px var(--accent);
}

.subtitle {
    font-family: var(--font-ui);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--accent);
    margin-top: 5px;
    text-transform: uppercase;
}

h2 {
    font-family: var(--font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--accent);
    color: var(--primary);
    margin-top: 25px;
    margin-bottom: 15px;
    padding-bottom: 2px;
    width: fit-content;
}

/* --- CONTROLS --- */
.control-group {
    margin-bottom: 15px;
}

.input-wrapper {
    margin-bottom: 12px;
}

label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-color);
}

.input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- SLIDERS (FAIL-SAFE VISIBILITY) --- */
/* Use gradient on input itself as 'track' if webkit-track fails */
input[type=range] {
    -webkit-appearance: none;
    flex: 1;
    height: 8px;
    /* Height of the track visual */
    background: #d0d0d0;
    /* Fallback Track Color */
    border: 1px solid var(--primary);
    border-radius: 4px;
    margin: 10px 0;
    /* Space for thumb overflow */
    cursor: pointer;
}

/* Thumb - We must reset appearance */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    /* Standard property */
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--text-color);
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    /* No relative positioning needed if input height is track height */
    /* Wait, standard centering might fail */
    /* Try typical reset */
}

/* Gecko align */
input[type=range]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border: 2px solid var(--text-color);
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

/* 
   Since webkit-slider-track pseudoelement seemed inconsistent,
   we styled the input itself as the track.
   But normally we DO want the thumb to extend outside the input bounds.
   Let's try standard approach again but simpler.
*/

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    /* Reset */
    height: 20px;
    /* Container height */
    border: none;
    margin: 0;
}

/* The actual track visual */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #a0a0a0;
    /* Darker visible grey */
    border: 1px solid var(--primary);
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--text-color);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
    /* (6 - 18) / 2 = -6, -7 covers border */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Firefox */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #a0a0a0;
    border: 1px solid var(--primary);
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border: 2px solid var(--text-color);
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}


/* --- NUMBER INPUTS --- */
input[type="number"] {
    background: #fff;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: var(--font-data);
    font-weight: bold;
    padding: 4px;
    width: 70px;
    text-align: right;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

/* --- BUTTONS --- */
button {
    background: var(--primary);
    color: var(--accent);
    border: 1px solid var(--primary);
    padding: 8px 16px;
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 11px;
    cursor: pointer;
    box-shadow: 3px 3px 0px var(--accent);
    /* DECO SHADOW */
    transition: transform 0.1s, box-shadow 0.1s;
    flex: 1;
}

button:hover {
    background-color: #2c4a6b;
    color: #fff;
}

button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--accent);
}

.btn-primary {
    background-color: var(--accent);
    /* Gold for primary */
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 12px;
    font-size: 12px;
    margin-bottom: 10px;
    width: 100%;
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    color: var(--primary);
}

/* --- TOGGLES & RADIOS --- */
.radio-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

.radio-group label {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 12px;
}

.control-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px double var(--primary);
    /* Elegance */
}

.btn-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
}

.toggle-label {
    font-size: 11px;
    font-weight: normal;
}

/* --- VISUALIZATION PANEL --- */
.vis-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid var(--primary);
    /* Thick */
    padding-bottom: 5px;
    margin-bottom: 0;
    font-family: var(--font-ui);
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    padding: 10px 20px;
    background-color: var(--panel-bg);
}

/* Create a decorative top bar for header? */
.vis-header div:first-child::before {
    content: "◈ ";
    color: var(--accent);
}

.canvas-container {
    flex: 1;
    position: relative;
    background-color: #ffffff;
    border: 2px solid var(--primary);
    margin: 10px;
    /* Slight margin inside panel */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
    /* Slight depth */
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- DATA READOUT (IMPROVED READABILITY) --- */
.data-readout {
    display: flex;
    justify-content: space-between;
    border-top: 3px double var(--primary);
    /* Elegant Separator */
    padding-top: 10px;
    background-color: #f2f2ef;
    /* LIGHT BACKGROUND for readability */
    color: var(--primary);
    /* DARK TEXT */
    padding: 15px 20px;
    font-family: var(--font-data);
}

.data-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #d0d0d0;
    flex: 1;
}

.data-block:last-child {
    border-right: none;
}

.data-block .label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--text-color);
    margin-bottom: 2px;
    letter-spacing: 1px;
    font-weight: bold;
}

.data-block .value {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    /* Deep Blue Value */
}

.data-block .unit {
    font-size: 9px;
    color: var(--accent);
    /* Gold Unit */
    font-weight: bold;
}

/* --- TOOLTIP --- */
.tooltip {
    position: absolute;
    background: rgba(26, 44, 66, 0.95);
    /* Primary color */
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 6px 10px;
    font-family: var(--font-data);
    font-size: 11px;
    pointer-events: none;
    z-index: 100;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.hidden {
    display: none;
}

/* --- MOBILE / RESPONSIVE --- */
@media (max-width: 900px) {
    .layout-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        /* Split screen vertical */
        height: 100vh;
    }

    .layout-grid {
        display: flex;
        flex-direction: column-reverse;
        /* Controls below, Canvas above */
        height: 100vh;
        border: none;
    }

    .panel.controls {
        flex: 1;
        /* Takes remaining space */
        order: 2;
        border-top: 1px solid var(--primary);
        overflow-y: auto;
    }

    .panel.visualization {
        height: 55vh;
        /* Fixed height for canvas part on mobile */
        flex: none;
        order: 1;
        border-right: none;
    }

    .canvas-container {
        margin: 0;
        border: none;
        border-bottom: 2px solid var(--primary);
    }

    /* Ensure inputs are touch-friendly */
    input[type="range"]::-webkit-slider-thumb {
        width: 20px;
        height: 20px;
    }

    .btn-primary,
    button {
        padding: 15px;
        /* Larger touch targets */
    }
}