/* ─────────────────────────────────────────────────────────────────────────
   /explore/v9-terminal — Phosphor-green CRT terminal.
   References: WarGames opening, Tron's console, DEC VT100, the PDP-10s at
   the MIT AI Lab, ELIZA, Hyperion's Schrön Loop, Mr. Robot's terminal.
   All effects pure CSS — gradients, filters, transforms. No images.
   ──────────────────────────────────────────────────────────────────────── */

/* The terminal owns the entire viewport visually. We reach beyond the
   normal max-width:760px <main> container by selecting `body` directly. */
body {
    background: #000 !important;
    color: #33ff33 !important;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas,
                 "Courier New", monospace !important;
    padding-bottom: 0 !important;
}

/* Topbar — bend the brutalist nav into the same green-on-black aesthetic. */
header.top {
    background: #000 !important;
    border-bottom: 1px solid #115511 !important;
}
header.top .brand,
header.top nav.primary a {
    color: #33ff33 !important;
    font-family: ui-monospace, Menlo, monospace !important;
    text-shadow: 0 0 4px rgba(51, 255, 51, 0.5);
}
header.top a:hover { background: #112211 !important; }
.nav-comment-count { background: #000 !important; color: #33ff33 !important;
                     border-color: #33ff33 !important; }

/* The <main> container loses its 760px cap so the terminal can take the
   full width on desktop. On mobile this matches what we want anyway. */
main {
    max-width: 100% !important;
    padding: 0 !important;
    background: #000;
    color: #33ff33;
}

/* ─────────── TERMINAL FRAME ───────────
   The frame holds the CRT scanlines (::before) and the barrel vignette
   (::after). Both are pure CSS overlays — no images. */
.term-frame {
    position: relative;
    min-height: calc(100vh - 60px);
    padding: 18px 18px 8px;
    overflow: hidden;
    /* A faint vertical glow gradient mimicking phosphor afterglow. */
    background:
        radial-gradient(ellipse at 50% 40%,
                        rgba(0, 30, 0, 0.0) 0%,
                        rgba(0, 18, 0, 0.5) 65%,
                        rgba(0, 8, 0, 0.95) 100%),
        #000;
    color: #33ff33;
    text-shadow: 0 0 2px rgba(51, 255, 51, 0.45),
                 0 0 6px rgba(51, 255, 51, 0.18);
}

/* CRT scanlines — repeating-linear-gradient 1px stripes, very faint. */
.term-frame::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.20) 3px,
        rgba(0, 0, 0, 0.20) 3px
    );
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: multiply;
}

/* Barrel-vignette + faint chromatic aberration. The corners darken via a
   radial gradient and a thin red/blue ring suggests an old phosphor tube
   slightly misregistering its colour layers. */
.term-frame::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%,
                        rgba(0, 0, 0, 0) 55%,
                        rgba(0, 0, 0, 0.55) 85%,
                        rgba(0, 0, 0, 0.85) 100%),
        radial-gradient(ellipse at 50% 50%,
                        rgba(255, 0, 80, 0) 70%,
                        rgba(255, 0, 80, 0.06) 95%),
        radial-gradient(ellipse at 50% 50%,
                        rgba(0, 80, 255, 0) 70%,
                        rgba(0, 80, 255, 0.05) 95%);
    pointer-events: none;
    z-index: 3;
}

/* ─────────── ASCII BANNER ─────────── */
.term-banner {
    position: relative;
    z-index: 1;
    color: #44ff44;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 8px;
    line-height: 1.05;
    letter-spacing: 0;
    margin: 4px 0 18px;
    white-space: pre;
    overflow-x: auto;
    text-shadow: 0 0 4px rgba(68, 255, 68, 0.7),
                 0 0 8px rgba(68, 255, 68, 0.35);
    background: transparent;
    border: 0;
    padding: 0;
}
@media (min-width: 520px) { .term-banner { font-size: 11px; } }
@media (min-width: 760px) { .term-banner { font-size: 13px; } }

/* ─────────── SCREEN AREA ─────────── */
.term-screen {
    position: relative;
    z-index: 1;
    border: 1px solid #1a6b1a;
    padding: 12px 14px 8px;
    min-height: 60vh;
    background: rgba(0, 10, 0, 0.55);
    box-shadow: inset 0 0 30px rgba(0, 80, 0, 0.25);
}

.term-history {
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: hidden;
    max-height: 65vh;
    overflow-y: auto;
}
@media (min-width: 520px) { .term-history { font-size: 14px; } }

.term-line {
    font-family: inherit;
    color: #33ff33;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0 0 2px;
    white-space: pre-wrap;
}
.term-line.term-line-input { color: #aaffaa; }
.term-line.term-line-error { color: #ff7733; }
.term-line.term-line-system { color: #66ff66; }
.term-line.term-line-dim { color: #228822; }

/* Inline anchors inside terminal output — entity names you can click. */
.term-link {
    color: #66ffcc;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.term-link:hover, .term-link:focus {
    background: #113311;
    color: #99ffdd;
    outline: 1px dashed #66ffcc;
}

/* ─────────── PROMPT LINE ───────────
   The form sits at the bottom of the screen area. The `> ` glyph is one
   span, the input fills the remaining width, and a blinking block-cursor
   sits at the end. We absorb the input's native caret with caret-color:
   transparent and draw our own █ instead, so the cursor reads as CRT. */
.term-prompt {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px dashed #1a6b1a;
    font-size: 14px;
}
.term-prompt-glyph {
    color: #66ff66;
    font-family: inherit;
    text-transform: uppercase;
    text-shadow: 0 0 4px rgba(102, 255, 102, 0.6);
}
.term-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #aaffaa;
    font-family: inherit;
    font-size: inherit;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0;
    caret-color: transparent;     /* we draw our own █ cursor */
    text-shadow: 0 0 4px rgba(170, 255, 170, 0.55);
}
.term-input::placeholder { color: #226622; }

.term-cursor {
    display: inline-block;
    width: 0.6em;
    color: #66ff66;
    animation: term-blink 1s steps(1, end) infinite;
    text-shadow: 0 0 6px rgba(102, 255, 102, 0.85);
    user-select: none;
}
@keyframes term-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* When the input is focused, slightly amp the cursor's glow so you can
   tell the prompt is alive. */
.term-input:focus + .term-cursor { color: #99ff99; }

/* ─────────── STATUS BAR ─────────── */
.term-status {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    padding: 6px 8px;
    border-top: 1px dashed #1a6b1a;
    color: #228822;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* ─────────── MOBILE ─────────── */
@media (max-width: 520px) {
    .term-frame { padding: 12px 10px 6px; min-height: calc(100vh - 80px); }
    .term-screen { padding: 10px 10px 6px; min-height: 55vh; }
    .term-history { font-size: 12.5px; max-height: 58vh; }
    .term-prompt { font-size: 13px; }
    .term-status { font-size: 10.5px; }
}

/* iOS Safari: turn off rubber-band background flash by anchoring to black */
html { background: #000; }

/* Respect reduced-motion: kill the blinking cursor for users who asked. */
@media (prefers-reduced-motion: reduce) {
    .term-cursor { animation: none; opacity: 1; }
}