/* ==========================================================
   VibePilot — Cohesion Patch
   Apply AFTER style.css (append or link second)
   
   Fixes:
   1. Background variables → architecture's dark blue-grey tone
   2. Body gradient → no navy cast
   3. Terminal page background → navy removed
   4. Principles / Terminal section widths → wider, edge-using layout
   ========================================================== */


/* ─────────────────────────────────────────────────────────
   1. ROOT VARIABLE OVERRIDES
   Old --bg-top: #151a2b and --bg-top-cool: #141a30 had
   too much blue saturation. Architecture page uses #0b1118
   as its darkest, so we align everything to that family.
───────────────────────────────────────────────────────── */

:root {
    --bg-top: #0d1219;
    /* was #151a2b — too navy */
    --bg-top-cool: #0e1420;
    /* was #141a30 — too navy */
    --bg-main: #0b1018;
    /* was #0c0d1c — slight blue cast removed */
    --bg-card: #0e1422;
    /* was #11122a */
}

/* Body: match architecture's dark blue-grey gradient exactly */
body {
    background: linear-gradient(to bottom,
            #0d1219 0%,
            #0d141d 40%,
            #0b1018 100%);
}


/* ─────────────────────────────────────────────────────────
   2. TERMINAL PAGE — strip the navy
───────────────────────────────────────────────────────── */

.terminal-page {
    background: linear-gradient(180deg,
            #0b1118 0%,
            #0d141d 28%,
            #0e1520 62%,
            #0b1219 100%) !important;
}

.terminal-page::before {
    /* Replace the blue ellipse with a neutral whisper */
    background: radial-gradient(ellipse at top,
            rgba(255, 255, 255, 0.025),
            transparent 55%) !important;
}


/* ─────────────────────────────────────────────────────────
   3. PRINCIPLES PAGE — widen content, match architecture's
   edge-using layout (820px → 1100 discardedxxxxxxxxx for all sections)
   !important needed to beat the inline <style> blocks
───────────────────────────────────────────────────────── */



/* Hero text can breathe more on wider canvas */
.principles-hero .lead {
    max-width: 760px !important;
}

/* Callout blocks widen proportionally */
.principles-section .callout {
    max-width: 720px !important;
}

/* Horizon rows: widen the tag column at larger width */
.horizon-row {
    grid-template-columns: 200px 1fr !important;
}


/* ─────────────────────────────────────────────────────────
   4. TERMINAL PAGE — widen all sections (820px → 1100px)
   !important needed to beat the inline <style> blocks
───────────────────────────────────────────────────────── */



/* Lead text stays readable */
.t-hero .lead {
    max-width: 640px !important;
}

/* Terminal widget: allow it to fill the wider shell */
.vp-terminal {
    max-width: 100%;
}

/* Contact email row: more generous spacing at wider width */
.t-email-link {
    font-size: 1.52rem !important;
}

/* Transmission rows: wider tag column */
.t-tx-row {
    grid-template-columns: 240px 1fr !important;
}


/* ─────────────────────────────────────────────────────────
   5. RESPONSIVE — keep narrow screens unchanged
───────────────────────────────────────────────────────── */

@media (max-width: 720px) {

    /* Principles */
    .principles-hero {
        padding: 88px 24px 48px;
    }

    .principles-hero h1 {
        font-size: 2.1rem;
    }

    .principles-divider {
        padding: 0 24px;
    }

    .principles-section {
        padding: 56px 24px;
    }

    .horizon-strip {
        padding: 56px 24px 80px;
    }

    .horizon-row {
        grid-template-columns: 1fr;
        gap: 6px 0;
    }

    /* Terminal */
    .t-hero {
        padding: 88px 24px 48px;
    }

    .t-hero h1 {
        font-size: 2.1rem;
    }

    .t-divider,
    .t-ai-section,
    .t-state-section,
    .t-contact-section,
    .t-transmission,
    .t-note {
        padding-left: 24px;
        padding-right: 24px;
    }

    .t-tx-row {
        grid-template-columns: 1fr;
        gap: 6px 0;
    }

    .t-email-link {
        font-size: 1.08rem;
    }
}

@media (max-width: 480px) {
    .t-state-row {
        grid-template-columns: 80px 1fr;
    }

    .vp-scope-tags {
        display: none;
    }

    .vp-pipeline {
        display: none;
    }

    .vp-row,
    .vp-input-row,
    .vp-presets {
        grid-template-columns: 44px 1fr;
        gap: 0 10px;
    }

    .vp-input-tag {
        padding-left: 14px;
    }

    .vp-form {
        padding-right: 14px;
    }

    .vp-preset-tag {
        padding-left: 14px;
    }

    .vp-preset-list {
        padding-right: 14px;
    }
}