/* Page-specific layout. Shared `.kl-info` / `.kl-nav-btn` / `.kl-skip-global`
       styles live in wwwroot/app.css. */

    .ng-stage {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 24px;
        pointer-events: none;                     /* let the info panel receive clicks */
    }
    .ng-stage > * { pointer-events: auto; }

    .ng-panel {
        width: min(640px, 100%);
        background: linear-gradient(160deg, rgba(10,14,28,0.82) 0%, rgba(3,3,8,0.82) 100%);
        border: 1px solid rgba(0,200,255,0.35);
        border-radius: 10px;
        padding: 14px 18px 18px;
        box-shadow:
            0 4px 28px rgba(0,0,0,0.5),
            inset 0 1px 0 rgba(255,255,255,0.05),
            0 0 18px rgba(0,200,255,0.18);
        /* Collapse/expand + fade transition used by the stage-mode classes.
           `max-height` animates the vertical-space reveal, `transform` adds
           a subtle slide-in, and `opacity` crossfades. */
        box-sizing: border-box;
        overflow: hidden;
        max-height: 900px;
        opacity: 1;
        transform: translateY(0) scale(1);
        transition:
            max-height 520ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity   360ms ease,
            transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
            margin    520ms cubic-bezier(0.22, 1, 0.36, 1),
            padding   520ms cubic-bezier(0.22, 1, 0.36, 1),
            border-color 360ms ease;
    }

    /* ── Hidden-panel state: collapse to zero size and fade out. ── */
    .ng-stage-mode-0 .ng-panel-distance,
    .ng-stage-mode-1 .ng-panel-mass {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-color: transparent;
        pointer-events: none;
    }
    /* Direction of slide-out: the hidden panel drifts toward its "home"
       position so that when the stack mode arrives it appears to settle
       into place rather than pop. */
    .ng-stage-mode-0 .ng-panel-distance { transform: translateY(-24px) scale(0.96); }
    .ng-stage-mode-1 .ng-panel-mass     { transform: translateY( 24px) scale(0.96); }

    /* ── Stack mode: both panels visible, neatly distributed. ── */
    .ng-stage-mode-stack .ng-panel {
        max-height: 900px;
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    /* When stacking, squeeze the svg a bit so both panels fit a laptop
       viewport without scrolling. */
    .ng-stage-mode-stack .ng-svg { max-height: 200px; }
    .ng-stage-mode-stack .ng-panel { padding: 10px 18px 14px; }
    .ng-panel-title {
        color: rgba(0,200,255,0.8);
        font-size: 11px; font-weight: 600;
        letter-spacing: 1.4px; text-transform: uppercase;
        margin-bottom: 8px;
    }
    .ng-svg {
        display: block;
        width: 100%; height: auto;
        max-height: 320px;
        background: radial-gradient(ellipse at center, rgba(0,40,80,0.22) 0%, rgba(0,0,0,0) 70%);
        border-radius: 6px;
    }

    /* Interactive controls row beneath the svg */
    .ng-controls {
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .ng-control {
        display: grid;
        grid-template-columns: 82px 1fr 56px;
        align-items: center;
        gap: 12px;
        font-family: monospace;
    }
    .ng-control-label {
        color: rgba(200,220,255,0.75);
        font-size: 12px;
        letter-spacing: 0.8px;
    }
    .ng-control-value {
        color: rgba(0,200,255,0.95);
        font-size: 13px; font-weight: 600;
        text-align: right;
    }
    .ng-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%; height: 4px;
        background: rgba(0,180,255,0.22);
        border-radius: 3px;
        outline: none;
        cursor: pointer;
    }
    .ng-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px; height: 16px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #eaf6ff 0%, #6fd3ff 60%, #0b3a5a 100%);
        border: 1px solid rgba(0,220,255,0.6);
        box-shadow: 0 0 6px rgba(0,200,255,0.5);
        cursor: pointer;
        margin-top: -6px;
    }
    .ng-slider::-moz-range-thumb {
        width: 16px; height: 16px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #eaf6ff 0%, #6fd3ff 60%, #0b3a5a 100%);
        border: 1px solid rgba(0,220,255,0.6);
        box-shadow: 0 0 6px rgba(0,200,255,0.5);
        cursor: pointer;
    }

    /* Formula banner in the resting info panel */
    .ng-formula {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        margin: 10px 0 14px;
        padding: 10px 12px;
        background: linear-gradient(90deg, rgba(255,200,80,0.06), rgba(255,200,80,0.12), rgba(255,200,80,0.06));
        border: 1px solid rgba(255,200,80,0.25);
        border-radius: 6px;
        font-family: "Cambria Math", "STIX Two Math", Cambria, Georgia, serif;
        color: rgba(255,220,140,0.95);
    }
    .ng-formula-lhs { font-style: italic; font-size: 20px; }
    .ng-formula-eq { font-size: 18px; opacity: 0.85; }
    .ng-formula-rhs { font-size: 16px; font-style: italic; }
    .ng-frac {
        display: inline-flex; flex-direction: column; align-items: center;
        line-height: 1.1;
    }
    .ng-num {
        border-bottom: 1px solid rgba(255,220,140,0.6);
        padding: 0 6px 2px;
    }
    .ng-den { padding: 2px 6px 0; }

    /* On narrow viewports, push the stage below the info panel. */
    @media (max-width: 900px) {
        .ng-stage {
            position: static;
            padding: 14px;
            margin-top: 14px;
        }
        /* Scoped to .ng-scroll-wrap so this static-flow override only
           applies to Newton's Gravitation (which has that class on its
           .lesson-stage). Without the scope, this rule fires on every
           lesson page at ≤ 900 px, making the shared .kl-info fall out
           of absolute positioning and disappear under the canvas.
           margin-top: 48px accounts for the lesson-stage starting ~6.4 px
           above the viewport (due to `.lesson-page { margin: -1.5rem }`
           cancelling `.content { padding-top: 1.1rem }`): 48 - 6.4 = 41.6 px
           from the viewport top, clearing the fixed breadcrumb bar (bottom
           ≈ 30 px) and the Focus button (bottom ≈ 20 px) with room to spare. */
        .ng-scroll-wrap .kl-info { position: static; width: auto; margin: 48px 14px 14px; max-height: none; }
        /* Allow the stacked content to scroll vertically rather than being
           clipped by the inherited overflow:hidden on the flex child. */
        .ng-scroll-wrap { overflow-y: auto !important; }
    }

    /* Touch-target enlargement for the page-specific slider.  The shared
       coarse-pointer rules in app.css cover `.sr` (JS-mounted sliders),
       but Newton's sliders use `.ng-slider` and need their own rule. */
    @media (pointer: coarse) {
        .ng-slider { height: 6px; }
        .ng-slider::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; }
        .ng-slider::-moz-range-thumb { width: 24px; height: 24px; }
        /* Generous row height so the whole label+slider strip is tappable. */
        .ng-control { min-height: 44px; align-items: center; }
    }

    /* Respect users who've opted out of motion: cut the reveal animation
       down to a simple fade. */
    @media (prefers-reduced-motion: reduce) {
        .ng-panel { transition: opacity 120ms linear; }
    }