/* ===== Shared base for all pages: tokens, reset, scanlines, skip link,
   container, nav, footer. Page-specific styles stay in each page's
   <style>. Do NOT redefine the tokens or these rules in a page. ===== */

/* ===== CSS Custom Properties ===== */
:root {
    color-scheme: dark;
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --text-primary: #e0e0e0;
    --text-secondary: #888888;
    --text-muted: #808080;
    --accent: #00ff41;
    --accent-dim: rgba(0, 255, 65, 0.2);
    --border: #333333;
    --border-light: #444444;
    --success: #00ff41;
    --warning: #ffaa00;
    --error: #ff4444;
    --info: #00aaff;
    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --max-width: 900px;
    --section-gap: 80px;
}

/* ===== Base Reset ===== */
/* Visually hidden but available to assistive tech: the home page is a
   terminal with no heading at all, so it gains a real h1 (axe
   best-practice rule 'page-has-heading-one'), hidden from sight. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.8;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===== Scanline Effect ===== */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    opacity: 0.3;
}

/* ===== Skip link ===== */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--accent);
    color: var(--bg-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* ===== Container ===== */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Navigation ===== */
.nav {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    max-width: calc(100% - 48px);
    justify-content: flex-end;
}

.btn-ghost {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent);
    background: transparent;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

.btn-ghost:hover {
    background: rgba(0, 255, 65, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.3), 0 0 40px rgba(0, 255, 65, 0.15);
    transform: scale(1.05);
    border-color: #33ff66;
}

.btn-ghost:active {
    transform: scale(0.98);
}

/* Keyboard-focus law (measured baseline 2026-10): nav links got the
   brand ring, but footer/content links fell to the 1px UA default and
   the terminal input had outline: none entirely - a keyboard user
   loses the caret with no ring at all (WCAG 2.4.7). Global branded
   floor; specifics may refine it, nothing below may erase it. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-ghost:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.btn-ghost.active {
    background: rgba(0, 255, 65, 0.15);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.25);
}

/* ===== Footer ===== */
.footer {
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid var(--border);
    margin-top: 80px;
}

.footer-text {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-text a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.footer-text a:hover {
    color: var(--text-primary);
}

/* ===== Mobile Responsive (shared pieces) ===== */
@media (max-width: 768px) {
    :root {
        --section-gap: 60px;
    }

    .nav {
        top: 12px;
        right: 12px;
        left: 12px;
        justify-content: center;
    }

    .btn-ghost {
        flex: 1;
        min-width: calc(50% - 6px);
        font-size: 0.8rem;
        padding: 10px 12px;
    }
}

/* Print: the boot transcript is letterhead — it stays on paper; screen
   chrome (nav, matrix canvas, scanlines) and the dark palette do not.
   The palette swap retargets the tokens themselves, so every component
   inherits the paper theme from one chokepoint instead of a per-class
   override pile. */
@media print {
    :root {
        color-scheme: light; /* dark scheme otherwise paints the PDF paper itself dark */
        --bg-primary: #ffffff;
        --bg-secondary: #ffffff;
        --bg-tertiary: #f4f4f4;
        --text-primary: #161616;
        --text-secondary: #3c3c3c;
        --text-muted: #666666;
        --accent: #0a5c2e;
        --accent-dim: #16452c;
        --border: #c8c8c8;
        --border-light: #e3e3e3;
    }
    /* !important: pages' inline <style> blocks load after site.css and
       would otherwise re-declare display for .status-bar etc. */
    .nav, #matrix-canvas, .scanlines, .status-bar { display: none !important; }
    /* print never scrolls: reveal-on-scroll sections must be forced visible */
    /* both reveal layers (section AND .section-content) must be forced */
    section, section * { opacity: 1 !important; transform: none !important; }
    /* no transitions/animations mid-capture: paper is a single frame */
    *, *::before, *::after { text-shadow: none !important; box-shadow: none !important; transition: none !important; animation: none !important; }
    html, body { background: #ffffff; }  /* html paints the page canvas, margins included */
    section { page-break-inside: avoid; }
    a { text-decoration: underline; }
}