/* ── Previous / Next / Ready nav buttons.  These styles are scoped
         to this page because the shared `.kl-nav-btn` rules live on the
         `dev` branch and haven't merged into this branch's app.css yet.
         Visual match for the dev Kepler pages: glassy cyan pill, glow on
         hover, Ready upgrades to a luminous highlight on hover. ── */
    .kl-ev-page .kl-nav-buttons {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        justify-content: flex-end;
    }
    .kl-ev-page .kl-nav-btn {
        position: relative;
        font-family: inherit;
        font-size: 11px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: rgba(200,220,255,0.78);
        background: linear-gradient(180deg, rgba(0,180,255,0.08) 0%, rgba(0,140,220,0.04) 100%);
        border: 1px solid rgba(0,180,255,0.22);
        border-radius: 999px;
        padding: 7px 18px;
        cursor: pointer;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
        transition: color 160ms ease, background 160ms ease,
                    border-color 160ms ease, box-shadow 220ms ease;
    }
    .kl-ev-page .kl-nav-btn:hover {
        color: #eaf6ff;
        background: linear-gradient(180deg, rgba(0,200,255,0.16) 0%, rgba(0,150,230,0.08) 100%);
        border-color: rgba(0,220,255,0.55);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.08),
            0 0 12px rgba(0,200,255,0.25);
    }
    .kl-ev-page .kl-nav-btn:focus-visible {
        outline: none;
        border-color: rgba(0,220,255,0.7);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.08),
            0 0 0 2px rgba(0,200,255,0.25);
    }
    .kl-ev-page .kl-ready-btn:hover {
        color: #fff;
        background: linear-gradient(180deg, rgba(0,220,255,0.22) 0%, rgba(0,170,240,0.10) 100%);
        border-color: rgba(120,240,255,0.75);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.10),
            0 0 16px rgba(0,220,255,0.35);
    }

    /* ── Simulation area: naked SVG, centered, fills the space between
         the info panel (left) and the bottom control bar. ── */
    .ev-sim {
        position: absolute;
        top: 14px; right: 14px; bottom: 210px;
        left: 322px;
        display: flex; align-items: center; justify-content: center;
        pointer-events: none;
    }
    .ev-svg {
        width: 100%; height: 100%;
        max-width: 620px; max-height: 100%;
        background: radial-gradient(ellipse at center, rgba(0,40,80,0.22) 0%, rgba(0,0,0,0) 70%);
        border-radius: 6px;
    }

    /* Trajectory stroke transitions smoothly as the user drags. */
    .ev-trajectory-path {
        transition: stroke 260ms ease, stroke-width 260ms ease;
    }

    /* Slightly roomier control panel than Kepler's to fit slider + ticks. */
    .ev-panel { width: 460px; }

    .ev-slider-row { padding: 6px 4px 2px; }
    .ev-slider-label {
        display: flex; justify-content: space-between; align-items: baseline;
        margin-bottom: 6px;
    }
    .ev-slider-name {
        font-size: 11px; letter-spacing: 0.6px;
        color: rgba(180,210,255,0.6); text-transform: uppercase;
    }
    .ev-slider-val {
        font-family: monospace; font-size: 12px; color: #00ccff;
    }

    .ev-slider-track-wrap { position: relative; }

    /* Range input — dark-themed to match the Kepler control surface. */
    .ev-slider {
        -webkit-appearance: none; appearance: none;
        width: 100%; height: 4px;
        background: linear-gradient(90deg,
            rgba(252,165,165,0.55) 0%,
            rgba(134,239,172,0.6) 47.8%,
            rgba(216,180,254,0.55) 70%,
            rgba(255,212,102,0.85) 84.3%,
            rgba(255,212,102,0.85) 100%);
        border-radius: 2px;
        outline: none;
        cursor: pointer;
        margin: 0;
    }
    .ev-slider::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none;
        width: 14px; height: 14px; border-radius: 50%;
        background: #00ccff;
        border: 2px solid rgba(3,3,8,0.9);
        box-shadow: 0 0 0 1px rgba(0,200,255,0.45), 0 0 8px rgba(0,200,255,0.35);
        cursor: pointer;
    }
    .ev-slider::-moz-range-thumb {
        width: 14px; height: 14px; border-radius: 50%;
        background: #00ccff;
        border: 2px solid rgba(3,3,8,0.9);
        box-shadow: 0 0 0 1px rgba(0,200,255,0.45), 0 0 8px rgba(0,200,255,0.35);
        cursor: pointer;
    }
    .ev-slider::-moz-range-track {
        background: transparent;
    }

    .ev-slider-ticks {
        position: relative;
        height: 16px;
        pointer-events: none;
    }
    .ev-tick {
        position: absolute;
        top: 2px;
        transform: translateX(-50%);
        font-family: monospace; font-size: 9.5px;
        letter-spacing: 0.3px;
        color: rgba(180,210,255,0.55);
        white-space: nowrap;
    }
    .ev-tick::before {
        content: "";
        display: block;
        width: 1px; height: 4px;
        margin: -6px auto 1px;
        background: rgba(180,210,255,0.35);
    }
    .ev-tick-orbit  { left: 47.83%; color: rgba(134,239,172,0.85); }
    .ev-tick-orbit::before  { background: rgba(134,239,172,0.6); }
    .ev-tick-escape { left: 83.84%; color: rgba(255,212,102,0.9); }
    .ev-tick-escape::before { background: rgba(255,212,102,0.6); }

    /* ── Fire! button — prominent amber CTA next to the presets. ── */
    .sb.ev-fire {
        font-weight: 600;
        letter-spacing: 0.6px;
        padding: 4px 16px;
        transition: background 140ms ease, border-color 140ms ease,
                    color 140ms ease, box-shadow 220ms ease;
    }
    .sb.ev-fire-ready {
        background: rgba(255,170,60,0.14);
        border-color: rgba(255,170,60,0.55);
        color: #ffd38a;
        box-shadow: 0 0 10px rgba(255,170,60,0.15);
    }
    .sb.ev-fire-ready:hover {
        background: rgba(255,170,60,0.28);
        border-color: rgba(255,200,120,0.9);
        color: #fff;
        box-shadow: 0 0 14px rgba(255,180,80,0.45);
    }
    .sb.ev-fire-reset {
        background: rgba(180,200,230,0.08);
        border-color: rgba(180,200,230,0.35);
        color: rgba(210,225,245,0.85);
    }
    .sb.ev-fire-reset:hover {
        background: rgba(180,200,230,0.16);
        border-color: rgba(210,225,245,0.6);
        color: #fff;
    }

    /* On narrow viewports the info panel stacks above the simulation and
       the sim takes the full width. */
    @media (max-width: 900px) {
        .ev-sim { left: 14px; top: 220px; bottom: 210px; }
    }
    /* At portrait-phone width the legend is hidden (app.css 560 px rule)
       so the info panel is ~140 px tall; pull the sim top up to reclaim
       that freed vertical space for the canvas. */
    @media (max-width: 560px) {
        .ev-sim { top: 160px; }
    }

    /* Touch-target enlargement for the page-specific slider.  The shared
       coarse-pointer rules in app.css cover `.sr` (JS-mounted sliders);
       EscapeVelocity's `.ev-slider` needs the same treatment. */
    @media (pointer: coarse) {
        .ev-slider { height: 6px; }
        .ev-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
        .ev-slider::-moz-range-thumb { width: 24px; height: 24px; }
    }