/* ═══════════════════════════════════════════════
   Design Tokens
   ═══════════════════════════════════════════════ */

:root {
    /* Spacing */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Layout */
    --inset: 12px;
}

/* ═══════════════════════════════════════════════
   Base Overrides
   ═══════════════════════════════════════════════ */

html, body {
    overflow: hidden;
}

body {
    font-weight: 400;
    font-size: 14px;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    user-select: none;
}

/* ═══════════════════════════════════════════════
   Canvas — Full Viewport
   ═══════════════════════════════════════════════ */

#simCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

/* ═══════════════════════════════════════════════
   Topbar — Overrides
   ═══════════════════════════════════════════════ */

#topbar {
    top: var(--inset);
    left: var(--inset);
    right: var(--inset);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    min-width: 0;
}

/* ─── Tool Button Overrides ─── */

#panelClose svg {
    stroke-width: 2.5;
}

/* GPU indicator — serif green "+" next to title */
.gpu-indicator {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ext-green);
    margin-left: 2px;
    user-select: none;
}


/* ═══════════════════════════════════════════════
   Control Panel — Overrides
   ═══════════════════════════════════════════════ */

#control-panel {
    top: calc(var(--inset) + var(--toolbar-h) + var(--inset));
    right: var(--inset);
    bottom: var(--inset);
    max-width: calc(100vw - var(--inset) * 2);
    pointer-events: none;
}

#control-panel.open {
    pointer-events: auto;
}

/* Sub-slider labels match sub-toggle text style */
.ctrl-sub label { font-size: 0.72rem; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════
   Force Toggle Colors
   ═══════════════════════════════════════════════ */
.tog-gravity     { --tog-color: var(--ext-red); }
.tog-bosoninter  { --tog-color: var(--ext-brown); }
.tog-gravitomag  { --tog-color: var(--ext-rose); }
.tog-coulomb     { --tog-color: var(--ext-blue); }
.tog-magnetic    { --tog-color: var(--ext-cyan); }
.tog-relativity  { --tog-color: var(--ext-orange); }
.tog-radiation    { --tog-color: var(--ext-yellow); }
.tog-spinorbit    { --tog-color: var(--ext-purple); }
.tog-onepn        { --tog-color: var(--ext-orange); }
.tog-blackhole    { --tog-color: var(--text); }
.tog-yukawa       { --tog-color: var(--ext-green); }
.tog-axion        { --tog-color: var(--ext-indigo); }
.tog-higgs        { --tog-color: var(--ext-lime); }

/* ═══════════════════════════════════════════════
   Themed Slider Colors
   ═══════════════════════════════════════════════ */
/* ─── Particle Property Sliders ─── */
#massInput   { --slider-color: var(--ext-red); }
#chargeInput { --slider-color: var(--ext-blue); }
#spinInput   { --slider-color: var(--ext-purple); }

/* ─── Force Sub-Sliders ─── */
#yukawa-sliders input[type=range] { --slider-color: var(--ext-green); }
#axion-sliders  input[type=range] { --slider-color: var(--ext-indigo); }
#higgs-sliders  input[type=range] { --slider-color: var(--ext-lime); }

/* ─── External Field Sliders ─── */
#extGravityInput, #extGravityAngleInput   { --slider-color: var(--ext-red); }
#extElectricInput, #extElectricAngleInput { --slider-color: var(--ext-blue); }
#extBzInput                               { --slider-color: var(--ext-cyan); }

/* ─── Bounce Friction Slider ─── */
#frictionInput { --slider-color: var(--ext-brown); }

/* ═══════════════════════════════════════════════
   Particle Selection
   ═══════════════════════════════════════════════ */

#selected-particle-section .stat-value {
    color: var(--accent);
}

#phase-plot-container canvas,
#eff-pot-container canvas {
    display: block;
    width: 100%;
    border-radius: var(--radius-sm);
    aspect-ratio: 1;
}

/* ═══════════════════════════════════════════════
   Controls
   ═══════════════════════════════════════════════ */

label {
    font-size: 0.78rem;
    color: var(--text);
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ═══════════════════════════════════════════════
   Hint Bar — Overrides
   ═══════════════════════════════════════════════ */

#hint-bar {
    padding: var(--sp-2) var(--sp-5);
    z-index: 10;
}

#hint-bar p {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

#hint-bar.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════
   Reference Overlay — z-index override
   ═══════════════════════════════════════════════ */

#reference-overlay {
    z-index: 9999;
}

/* ═══════════════════════════════════════════════
   Responsive — Tablet / Mobile
   ═══════════════════════════════════════════════ */

@media (max-width: 900px) {
    :root {
        --inset: 8px;
        --panel-w: 100%;
    }

    /* Bottom sheet */
    #control-panel {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 55vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        transform: translateY(100%);
    }

    #control-panel.open {
        transform: translateY(0);
    }

    #hint-bar {
        bottom: var(--sp-2);
    }

    #hint-bar p {
        font-size: 0.7rem;
    }
}

/* ═══════════════════════════════════════════════
   Reduced Motion
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .tab-panels,
    #topbar,
    #hint-bar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--bg-panel-solid);
    }
}