/* ═══════════════════════════════════════════════════════════════
   DumpWatch CRT Theme — Global Override
   Loaded LAST via injection before </head> across all 18 templates.
   Uses !important to guarantee override of inline <style> blocks.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   MOBILE LOCK — prevent zoom, pinch, wiggle globally
   pan-x pan-y = allow scroll, block pinch zoom on all browsers
   ══════════════════════════════════════════════════════════════ */
html {
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    touch-action: pan-x pan-y !important;
    overflow-x: hidden !important;
}
body {
    touch-action: pan-x pan-y !important;
    overflow-x: hidden !important;
}
@media (max-width: 900px) {
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    pre, code { overflow-x: auto; word-break: break-all; }
    img { max-width: 100%; height: auto; }

    /* ══ MOBILE NAV: Lock the container, then strip everything ══ */
    nav {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    nav .nav-inner,
    .nav-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 12px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    /* Hide nav links */
    .nav-links {
        display: none !important;
    }
    /* Nav-right: only hamburger */
    .nav-right {
        gap: 0 !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }
    .nav-right > a,
    .nav-right > button:not(.hamburger),
    .nav-right > .theme-toggle,
    .nav-right > .nav-cta,
    .nav-right > [class*="cta"],
    .nav-right > [class*="toggle"] {
        display: none !important;
    }
    .hamburger,
    button.hamburger {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Nav brand — compact for mobile */
    .nav-brand {
        font-size: 14px !important;
        gap: 8px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .nav-brand img {
        width: 64px !important;
        height: 64px !important;
        flex-shrink: 0 !important;
    }

    /* Footer centering on mobile */
    footer, .footer, div[style*="footer"] {
        text-align: center !important;
    }
    .footer-left, .footer-links {
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        width: 100% !important;
    }
    footer > div {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* ══════════════════════════════════════════════════════════════
   DARK THEME (default) — CRT Green Terminal
   ══════════════════════════════════════════════════════════════ */
:root,
html,
[data-theme="dark"],
html[data-theme="dark"] {
    --bg-void: #050a0e !important;
    --bg-base: #080e12 !important;
    --bg-card: #0a1216 !important;
    --bg-elevated: #0e161a !important;
    --bg-hover: #121c22 !important;
    --border: #1a2a2a !important;
    --border-hover: #2a3a3a !important;
    --text-primary: #c0d0c8 !important;
    --text-secondary: #607a6a !important;
    --text-muted: #3a5a4a !important;
    --amber: #f5a623 !important;
    --amber-dim: rgba(245,166,35,0.1) !important;
    --green: #00c836 !important;
    --green-dim: rgba(0,200,54,0.07) !important;
    --red: #ff3d57 !important;
    --red-dim: rgba(255,61,87,0.1) !important;
    --blue: #448aff !important;
    --blue-dim: rgba(68,138,255,0.1) !important;
    --bg: #080e12 !important;
    --surface: #0a1216 !important;
    --surface2: #0e161a !important;
    --surface3: #121c22 !important;
    --text: #c0d0c8 !important;
    --dim: #507a5a !important;
    --accent: #00c836 !important;
    --accent-dim: rgba(0,200,54,0.07) !important;
    --font-display: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --grain-opacity: 0.4;
    --crt-font: 'Share Tech Mono', 'JetBrains Mono', monospace;
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME — Muted Terminal (medium dark grey, not white)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"],
html[data-theme="light"] {
    --bg-void: #1a2024 !important;
    --bg-base: #1e262a !important;
    --bg-card: #242e34 !important;
    --bg-elevated: #2a363c !important;
    --bg-hover: #303e44 !important;
    --border: #3a4a4e !important;
    --border-hover: #4a5a5e !important;
    --text-primary: #d0dcd6 !important;
    --text-secondary: #8a9a90 !important;
    --text-muted: #5a6a60 !important;
    --amber: #f5a623 !important;
    --amber-dim: rgba(245,166,35,0.1) !important;
    --green: #00c836 !important;
    --green-dim: rgba(0,200,54,0.1) !important;
    --bg: #1e262a !important;
    --surface: #242e34 !important;
    --surface2: #2a363c !important;
    --surface3: #303e44 !important;
    --text: #d0dcd6 !important;
    --dim: #7a8a80 !important;
    --accent: #00c836 !important;
    --accent-dim: rgba(0,200,54,0.1) !important;
    --grain-opacity: 0.2 !important;
}
[data-theme="light"] nav,
html[data-theme="light"] nav,
[data-theme="light"] .nav-inner,
html[data-theme="light"] .nav-inner {
    background: rgba(36,46,52,0.94) !important;
    border-bottom-color: #3a4a4e !important;
}
html[data-theme="light"] body,
[data-theme="light"] body {
    background: #1e262a !important;
}
[data-theme="light"] body::after {
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.15) 100%) !important;
}
[data-theme="light"] .dw-scanline {
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(200,255,220,0.015) 2px, rgba(200,255,220,0.015) 4px) !important;
}
[data-theme="light"] .hero::before {
    background: radial-gradient(ellipse, rgba(0,200,54,0.02) 0%, transparent 70%) !important;
}

/* ══════════════════════════════════════════════════════════════
   SCANLINES — hardcoded, no CSS variables in rgba
   ══════════════════════════════════════════════════════════════ */
.dw-scanline {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(200, 255, 220, 0.012) 2px,
        rgba(200, 255, 220, 0.012) 4px
    );
    pointer-events: none;
    z-index: 9990;
}
/* Also style legacy .scanline class in case crt.js doesn't run fast enough */
.scanline {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(200, 255, 220, 0.012) 2px,
        rgba(200, 255, 220, 0.012) 4px
    ) !important;
}

/* ══════════════════════════════════════════════════════════════
   FILM GRAIN
   ══════════════════════════════════════════════════════════════ */
.dw-grain {
    position: fixed;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    opacity: 0.04;
    pointer-events: none;
    z-index: 9989;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: dw-grain-drift 8s steps(10) infinite;
}
@keyframes dw-grain-drift {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-2%, -3%); }
    20% { transform: translate(3%, 1%); }
    30% { transform: translate(-1%, 4%); }
    40% { transform: translate(4%, -2%); }
    50% { transform: translate(-3%, 2%); }
    60% { transform: translate(2%, -4%); }
    70% { transform: translate(-4%, 1%); }
    80% { transform: translate(1%, 3%); }
    90% { transform: translate(3%, -1%); }
}

/* ══════════════════════════════════════════════════════════════
   NAV OVERRIDES — kill orange gradient, force green everywhere
   ══════════════════════════════════════════════════════════════ */
.nav-brand,
nav .nav-brand,
.nav-inner .nav-brand {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #00c836 !important;
    color: #00c836 !important;
    font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
    text-shadow: 0 0 6px rgba(0,200,54,0.15);
    letter-spacing: 1px !important;
}
.nav-brand span {
    -webkit-text-fill-color: #00c836 !important;
    color: #00c836 !important;
}
nav,
.nav-inner {
    background: rgba(8,14,18,0.92) !important;
    backdrop-filter: blur(12px);
}
.nav-links a:hover,
.nav-links a.active {
    color: #00c836 !important;
    background: rgba(0,200,54,0.07) !important;
}
.nav-cta {
    border-color: #1a2a2a !important;
    color: #607a6a !important;
}
.nav-cta:hover {
    border-color: #00c836 !important;
    color: #00c836 !important;
    background: rgba(0,200,54,0.07) !important;
}
/* Theme toggle button — make it green on hover */
.theme-toggle:hover {
    border-color: #00c836 !important;
    color: #00c836 !important;
}

/* ══════════════════════════════════════════════════════════════
   LINKS — green for navigation, amber preserved for gates/CTAs
   ══════════════════════════════════════════════════════════════ */
a { color: #00c836; }
a:hover { color: #00dd38; }

/* ── Drawer (mobile menu) — green nav, not amber ── */
.drawer a:hover,
.drawer a.active {
    color: #00c836 !important;
    background: rgba(0,200,54,0.07) !important;
}
.drawer-cta {
    background: rgba(0,200,54,0.1) !important;
    color: #00c836 !important;
    border: 1px solid rgba(0,200,54,0.2) !important;
}

/* ══════════════════════════════════════════════════════════════
   PRICING / CTA BUTTON OVERRIDES — kill amber/orange buttons
   ══════════════════════════════════════════════════════════════ */
.btn-primary,
.card-cta,
[style*="linear-gradient"][style*="amber"] {
    background: rgba(0,200,54,0.07) !important;
    border-color: rgba(0,200,54,0.2) !important;
    color: #00c836 !important;
}

/* ══════════════════════════════════════════════════════════════
   HEADING OVERRIDES — retro font on h1/h2 across all pages
   ══════════════════════════════════════════════════════════════ */
h1, h2 {
    font-family: 'Share Tech Mono', 'JetBrains Mono', monospace !important;
    letter-spacing: 1px;
}

/* ══════════════════════════════════════════════════════════════
   GLOW UTILITIES — toned down, not eye-burning
   ══════════════════════════════════════════════════════════════ */
.crt-glow-green {
    color: #00c836 !important;
    text-shadow: 0 0 4px rgba(0,200,54,0.15);
}

/* ══════════════════════════════════════════════════════════════
   CRT CURVATURE + HOVER GLOW
   ══════════════════════════════════════════════════════════════ */
.crt-curve { position: relative; overflow: hidden; }
.crt-curve::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.15) 100%);
    pointer-events: none; border-radius: inherit;
}
.crt-card-glow { transition: box-shadow 0.3s, border-color 0.3s; }
.crt-card-glow:hover {
    box-shadow: 0 0 12px rgba(0,200,54,0.03), inset 0 0 12px rgba(0,200,54,0.02);
    border-color: rgba(0,200,54,0.12) !important;
}
.crt-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #00c836; box-shadow: 0 0 6px #00c836;
    animation: crt-pulse 2s infinite;
}
@keyframes crt-pulse { 0%,100%{opacity:1}50%{opacity:0.3} }

/* ══════════════════════════════════════════════════════════════
   BOOT SEQUENCE
   ══════════════════════════════════════════════════════════════ */
.dw-boot-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: #050a0e; z-index: 99999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity 0.6s;
}
.dw-boot-overlay.hide { opacity: 0; pointer-events: none; }
.dw-boot-text {
    font-family: 'Share Tech Mono', monospace;
    color: #00c836; font-size: 12px;
    text-align: left; max-width: 480px; line-height: 2;
}
.dw-boot-line { opacity: 1; }
.dw-cursor-blink {
    display: inline-block; width: 8px; height: 14px;
    background: #00c836;
    animation: dw-blink 0.8s step-end infinite;
    vertical-align: middle; margin-left: 2px;
}
@keyframes dw-blink { 50% { opacity: 0; } }

/* ══════════════════════════════════════════════════════════════
   VIGNETTE
   ══════════════════════════════════════════════════════════════ */
body::after {
    content: '';
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.25) 100%);
    pointer-events: none; z-index: 9988;
}

/* ══════════════════════════════════════════════════════════════
   STATUS BADGES
   ══════════════════════════════════════════════════════════════ */
.crt-badge-live {
    background: rgba(0,200,54,0.07); color: #00c836;
    border: 1px solid rgba(0,200,54,0.2);
}
.crt-badge-paper {
    background: rgba(255,171,0,0.07); color: #ffab00;
    border: 1px solid rgba(255,171,0,0.15);
}

/* FLICKER */
@keyframes dw-crt-flicker {
    0%{opacity:0.1}5%{opacity:0.9}10%{opacity:0.3}
    15%{opacity:1}20%{opacity:0.8}30%{opacity:1}100%{opacity:1}
}
.dw-crt-flicker { animation: dw-crt-flicker 0.8s ease-out; }

/* ══════════════════════════════════════════════════════════════
   PRESERVE FUNCTIONAL COLORS (risk badges)
   ══════════════════════════════════════════════════════════════ */
.risk-med {
    background: rgba(255,171,0,0.1) !important;
    color: #ffab00 !important;
}
.risk-high {
    background: rgba(255,61,87,0.1) !important;
    color: #ff3d57 !important;
}