/* =========================================
   RESPONSIVE LAYER (loaded after each page's own styles)
   Breakpoints: 1280 laptop | 1024 tablet landscape | 768 tablet portrait | 480 phone
   ========================================= */

:root {
    --min-viewport-width: 0px; /* the old fixed 1280px desktop minimum is gone */
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body { min-width: 0; overflow-x: hidden; }

img, canvas { max-width: 100%; }

header { min-width: 0; flex-wrap: wrap; row-gap: 10px; }

.header-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.header-actions .btn-launch { width: auto; }

.status-bar { flex-wrap: wrap; gap: 8px 24px; }

.mission-footer { min-width: 0; flex-wrap: wrap; gap: 10px 20px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.footer-links a { margin-left: 0; }
.footer-sep { opacity: 0.3; }

/* Scalable SVG canvases: the JS sets a viewBox, CSS lets the browser scale it. */
#orbit-visualization, #fractal-svg { width: 100%; max-width: 100%; display: block; }

/* Keyboard + touch affordances */
.btn-launch:focus-visible, select:focus-visible, input:focus-visible,
.control-button:focus-visible, a:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: 2px;
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1280px) {
    .mission-control { grid-template-columns: 280px 1fr; padding: 18px; gap: 16px; }
    #component-grid-row3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablet landscape: single column dashboard ---------- */
@media (max-width: 1024px) {
    .mission-control {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-height: 0;
    }
    .controls-area, .tactical-display, .logs-console,
    #component-matrix-row3, .validation-panel {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    .mission-control > * { min-width: 0; }
    .tactical-display { min-height: 340px; }
    .chart-wrapper { min-height: 280px; }
    .controls-area .control-group { margin-bottom: 20px; }

    /* V3 sandbox: stop locking the page to the viewport height */
    body.v3-page { height: auto; min-height: 100vh; overflow-y: auto; }
    .sandbox-layout {
        grid-template-columns: 1fr;
        overflow: visible;
        min-width: 0;
        padding: 14px;
    }
    #neural-canvas { height: min(62vh, 560px); min-height: 340px; }
    .v3-sidebar { height: auto; overflow: visible; }
    #gip-terminal { min-height: 180px; max-height: 320px; }

    /* Navigation plan: let the page scroll instead of an inner viewport */
    body.nav-page { overflow-y: auto; overflow-x: hidden; }
    .navigation-plan-layout {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        overflow: visible;
        padding: 14px;
    }
    .left-panel, .right-panel { overflow: visible; min-width: 0; }
    .panel-section, .panel-content { min-width: 0; max-width: 100%; }
    .panel-section { min-height: 0; }
    .panel-content { min-height: 120px; }
    #orbit-visualization { height: auto; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width: 768px) {
    header { padding: 10px 14px; gap: 10px; }
    .brand { font-size: 16px; letter-spacing: 1px; white-space: normal; }
    .header-actions { width: 100%; }
    .header-actions .btn-launch {
        flex: 1 1 calc(50% - 10px); min-width: 0 !important; white-space: normal !important;
        text-align: center; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
    }
    .status-bar { width: 100%; font-size: 10px; }

    .mission-control { padding: 12px; gap: 12px; }
    .panel { padding: 14px; }
    .panel-title { font-size: 12px; margin-bottom: 14px; }

    .logs-console { grid-template-columns: 1fr; }
    .logs-console > div:first-child { border-right: none !important; padding-right: 0 !important; }
    #narrative-box { font-size: 16px; height: 170px; border-right: none; }
    #bio-stream { height: 160px !important; }

    #component-grid-row3 { grid-template-columns: 1fr; }
    #component-grid > div, #component-grid-row3 > div { padding: 14px !important; }

    .btn-launch { min-height: 44px; }
    select, input[type="number"], input[type="text"] { min-height: 44px; font-size: 16px; }

    .mission-footer { padding: 12px 14px; font-size: 10px; flex-direction: column; align-items: flex-start; }
    .footer-sep { display: none; }

    .modal-overlay { padding: 12px; align-items: flex-start; overflow-y: auto; }
    .modal-content { padding: 22px 18px; }
    .modal-content .btn-launch { width: 100% !important; margin: 0 0 10px 0 !important; display: block !important; }

    .comparison-content { grid-template-columns: 1fr; }
    .header-info { flex-wrap: wrap; gap: 6px 16px; }
    .navigation-plan-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .control-buttons .control-button { flex: 1 1 140px; min-height: 44px; }

    .sandbox-layout { padding: 10px; gap: 12px; }
    #neural-canvas { min-height: 320px; height: 52vh; }
    .doc-container { padding: 24px 14px; }
    .doc-container p { text-align: left; font-size: 15px; }
    .section-header { font-size: 15px; letter-spacing: 1px; }
}

/* ---------- Phone ---------- */
@media (max-width: 480px) {
    .brand { font-size: 14px; }
    .brand span[style*="opacity"] { display: none; }
    .header-actions .btn-launch { padding: 8px 10px !important; font-size: 10px !important; letter-spacing: 1px; }
    .tactical-display { min-height: 300px; }
    .chart-wrapper { min-height: 240px; }
    #narrative-box { font-size: 15px; }
    .mission-control { padding: 8px; }
    .panel { padding: 12px; }
    .modal-content h2 { font-size: 18px; }
    .arch-grid { grid-template-columns: 1fr; }
}

/* Honour reduced-motion preferences (scanline + pulse animations) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}