/* ============================================================
   as2.no shared styles — CRT-Screen theme
   Used by every page. Page-specific styles stay inline.
   ============================================================ */

/* Self-hosted font (latin subset, ~13 KB).
   Box-drawing chars on the homepage fall back to system monospace,
   same as when this was loaded from Google's CDN. */
@font-face {
    font-family: 'Share Tech Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/share-tech-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
    --green:      #00ff41;
    --green-dim:  #00aa2a;
    --green-dark: #002200;
    --blue:       #4af;
    --bg:         #080808;
    --text:       #b8ffb8;
}

html { height: 100%; overflow: hidden; }

body {
    background: #020202;
    color: var(--green);
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 15px;
    line-height: 1.6;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

/* CRT scanlines — over everything */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);
    pointer-events: none;
    z-index: 999;
}

/* ── Monitor wrap ── */
/* The SCREEN is locked to 4:3 (see .screen-recess). The bezel sizes around it.
   Cap wrap width by viewport height so the whole monitor always fits.
   Chrome: 134px horizontal (bezel padding 100 + bezel borders 6 + recess border 28),
           135px vertical (bezel padding 98 + bezel borders 9 + recess border 28).
   Body padding adds 48px vertical → 183px total non-screen vertical. */
.monitor-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(1280px, calc((100vh - 183px) * 4 / 3 + 134px));
    position: relative;
    z-index: 1;
}

/* ── Bezel ── */
/* Cool neutral gray plastic, raised outer rim via borders, bottom-heavy */
.monitor-bezel {
    width: 100%;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(118deg,
            rgba(255,255,255,0.07) 0%,
            rgba(255,255,255,0.02) 20%,
            transparent 45%),
        linear-gradient(180deg,
            rgba(255,255,255,0.035) 0%,
            transparent 35%,
            transparent 75%,
            rgba(0,0,0,0.08) 100%),
        #1e1e1e;
    border-top:    3px solid #3a3a3a;
    border-left:   3px solid #2e2e2e;
    border-right:  3px solid #0c0c0c;
    border-bottom: 6px solid #080808;
    border-radius: 22px 22px 14px 14px;
    padding: 26px 50px 72px;
    position: relative;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.10),
        inset 0 -8px 20px rgba(0,0,0,0.45),
        0 14px 50px rgba(0,0,0,0.92),
        0 2px 8px rgba(0,0,0,0.98);
}

/* Power LED */
.monitor-bezel::before {
    content: '';
    position: absolute;
    bottom: 24px;
    right: 38px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green), 0 0 14px var(--green);
}

/* Bezel label — small silkscreened nameplate on the chin */
.monitor-bezel::after {
    content: 'AS2-CRT-4000';
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: #888;
    letter-spacing: 0.2em;
    padding: 2px 10px;
    background: linear-gradient(180deg, #161616 0%, #242424 100%);
    border-top: 1px solid #2e2e2e;
    border-left: 1px solid #2a2a2a;
    border-right: 1px solid #0c0c0c;
    border-bottom: 1px solid #080808;
    text-shadow: 0 1px 0 rgba(0,0,0,0.7);
}

/* ── Screen recess ── */
/* aspect-ratio 4/3 is enforced because .monitor-screen is absolutely
   positioned inside it, so content can't push the box taller. */
.screen-recess {
    aspect-ratio: 4 / 3;
    width: 100%;
    position: relative;
    border: 14px solid #050505;
    border-radius: 30px;
    padding: 0;
    background:
        radial-gradient(ellipse 130% 110% at 50% 50%,
            transparent 60%,
            rgba(0,0,0,0.6) 100%),
        radial-gradient(ellipse 110% 90% at 50% 35%,
            rgba(0,255,80,0.075) 0%,
            rgba(0,255,80,0.028) 100%),
        #051208;
    box-shadow:
        inset 0 6px 20px rgba(0,0,0,0.98),
        inset 0 -3px 10px rgba(0,0,0,0.7),
        inset 4px 0 12px rgba(0,0,0,0.8),
        inset -4px 0 12px rgba(0,0,0,0.8);
}

/* ── Screen ── */
/* Absolutely positioned inside .screen-recess (position: relative) so the
   screen's 4:3 aspect-ratio can't be overridden by content height. */
.monitor-screen {
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: 18px;
    border: none;
    padding: 2.5rem clamp(0.75rem, 2.5vw, 1.75rem) 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 0 40px rgba(0,255,65,0.12),
                0 0 100px rgba(0,255,65,0.06);
}

/* Push the final cursor prompt-line further down on short pages. */
.prompt-line:has(+ .footer) { margin-top: 3rem; }


/* Phosphor grain — on screen-recess so it stays fixed while content scrolls */
.screen-recess::before {
    content: '';
    position: absolute;
    inset: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    opacity: 0.24;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
    border-radius: 18px;
}

/* Scrollbar */
.monitor-screen { scrollbar-width: thin; scrollbar-color: var(--green-dark) #000; }
.monitor-screen::-webkit-scrollbar { width: 4px; }
.monitor-screen::-webkit-scrollbar-track { background: #000; }
.monitor-screen::-webkit-scrollbar-thumb { background: var(--green-dark); }

/* ── Content styles ── */
hr { border: none; border-top: 1px solid var(--green-dark); margin: 1rem 0; }

.prompt-line { margin: 0.9rem 0 0.2rem; }
.pu  { color: var(--green); }
.sep { color: #555; }
.pp  { color: var(--blue); }
.cmd { color: #fff; }

h1 { color: var(--green); text-shadow: 0 0 8px var(--green); font-size: 1.1rem; margin-bottom: 0.3rem; }
h1 a { color: inherit; text-shadow: inherit; }
h1 a:hover { text-shadow: 0 0 8px var(--green), 0 0 20px var(--green); }
h2 { color: var(--blue); font-size: 0.95rem; margin: 1.2rem 0 0.4rem; }
h2[id] { scroll-margin-top: 1rem; }

.toc { margin: 0.4rem 0 0.2rem; }
.toc-group { margin: 0.5rem 0; }
.toc-label { display: block; color: var(--green-dim); margin-bottom: 0.1rem; }
.toc a { display: inline-block; margin: 0.1rem 1.4rem 0.1rem 0; }
.toc a::before { content: '▸  '; color: var(--green-dim); }

p, li { color: var(--text); margin: 0.2rem 0; }
ul { list-style: none; padding: 0; }
ul li::before { content: '▸  '; color: var(--green-dim); }

code {
    background: #0a200a;
    color: var(--green);
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--green-dark);
}

pre.codeblock {
    background: #0a200a;
    border: 1px solid var(--green-dark);
    color: var(--green);
    padding: 0.8rem 1rem;
    margin: 0.5rem 0;
    overflow-x: auto;
    white-space: pre;
}
pre.codeblock.topo { width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; background: none; border: none; padding: 0; }
pre.codeblock.topo .wan { display: inline-block; line-height: 1.3; vertical-align: top; margin-bottom: -0.7em; }table { border-collapse: collapse; margin: 0.4rem 0; color: var(--text); }
th { color: var(--green); text-align: left; padding: 0.1rem 2rem 0.1rem 0; border-bottom: 1px solid var(--green-dark); }
td { padding: 0.1rem 2rem 0.1rem 0; }
td:first-child { color: var(--blue); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-shadow: 0 0 8px var(--blue); }

.glow      { text-shadow: 0 0 8px var(--green), 0 0 20px var(--green); }
.glow-soft { text-shadow: 0 0 6px var(--green); }

.output { color: var(--text); margin: 0.2rem 0 0.6rem; }
.output .item { margin: 0.15rem 0; }
.output .item::before { content: '▸  '; color: var(--green-dim); }

.tagline { color: var(--green-dim); font-size: 0.85rem; margin-bottom: 1.8rem; }
/* Footer color: was #556655 (~3.5:1 on bg, fails WCAG AA for small text).
   #7a8c7a hits ~5.9:1 and stays in the green-grey aesthetic. */
.footer {
    margin: 4rem 0 0;
    color: #7a8c7a;
    font-size: 0.75rem;
}

/* Skip-to-content link — visible only when focused via keyboard */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--green);
    color: #000;
    padding: 0.5rem 1rem;
    z-index: 10000;
    text-decoration: none;
    font-weight: bold;
}
.skip-link:focus { top: 0; }

.cursor {
    display: inline-block;
    width: 9px;
    height: 1.05em;
    background: var(--green);
    vertical-align: text-bottom;
    box-shadow: 0 0 8px var(--green);
    animation: blink 2.5s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Respect users who've requested reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cursor { animation: none; }
}

/* ── Narrow viewports ── */
/* Drop the 4:3 lock on the screen so the monitor fills the window dynamically. */
@media (max-width: 899px) {
    .monitor-wrap {
        max-width: 1280px;
        height: 100%;
    }
    .monitor-bezel {
        flex: 1;
        min-height: 0;
    }
    .screen-recess {
        aspect-ratio: auto;
        flex: 1;
        min-height: 0;
    }
    /* monitor-screen stays position: absolute; inset: 0 — fills screen-recess */
}

/* ── Mobile ── */
@media (max-width: 520px) {
    .monitor-bezel { padding: 16px 16px 40px; border-radius: 10px 10px 6px 6px; }
}

/* ── Print ──
   Strip the CRT chassis, scanlines, glow, and dark theme so printed
   pages look like clean documents instead of fighting the printer. */
@media print {
    html, body { height: auto; overflow: visible; background: #fff; color: #000; padding: 0; }
    body::before { display: none; } /* scanlines */
    .skip-link, .neo-art, .palette, .cursor, .footer { display: none; }
    .monitor-wrap, .monitor-bezel, .screen-recess, .monitor-screen {
        all: unset; display: block; width: 100%; max-width: 100%;
        position: static; aspect-ratio: auto;
    }
    .screen-recess::before { display: none; } /* phosphor grain */
    .monitor-bezel::before, .monitor-bezel::after { display: none; } /* LED + nameplate */
    * { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
    a { color: #0033cc !important; text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
    hr { border-top: 1px solid #999; }
    th { border-bottom: 1px solid #000; }
}