/* ============================================================
   KVV://OS — Linux terminal phosphor-green CRT stylesheet
   A working Linux terminal. Every glyph is rendered with the
   authentic phosphor look: subtle glow, scanlines, vignette,
   faint flicker. Tunable via [data-theme] and [data-crt].
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    /* Default theme: classic P1 phosphor green */
    --phosphor:        #39ff14;
    --phosphor-bright: #b6ff7a;
    --phosphor-dim:    #1f8f1f;
    --phosphor-bg:     #000000;

    /* ANSI-style accents (used inside terminal output) */
    --ansi-red:     #ff5555;
    --ansi-yellow:  #f1fa8c;
    --ansi-cyan:    #5fd7ff;
    --ansi-magenta: #ff5fd7;
    --ansi-blue:    #6c8aff;
    --ansi-orange:  #ffa03a;
    --ansi-gray:    #888c8a;

    /* CRT effects & Chromatic Aberration */
    --aberration: 1.2px;
    --glow-sharp: 0 0 1px currentColor, 0 0 4px currentColor, calc(var(--aberration) * -1) 0 2px rgba(255,0,0,0.5), var(--aberration) 0 2px rgba(0,0,255,0.5);
    --glow-soft:  0 0 8px rgba(57, 255, 20, 0.6);
    --glow-bloom: 0 0 20px rgba(57, 255, 20, 0.25);
    --scanline-op:  0.18;
    --flicker-op:   0.02;

    /* Typography */
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    --font-size: 15px;
    --line-height: 1.35;
    --letter-spacing: 0.01em;

    /* Layout */
    --pad-x: 24px;
    --pad-y: 16px;
    --statusbar-h: 30px;
}

/* ---------- Theme variants ---------- */
[data-theme="amber"] {
    --phosphor:        #ffb000;
    --phosphor-bright: #ffd16a;
    --phosphor-dim:    #8a5e00;
    --glow-soft:    0 0 6px rgba(255, 176, 0, 0.45);
    --glow-bloom:   0 0 14px rgba(255, 176, 0, 0.18);
}
[data-theme="cyan"] {
    --phosphor:        #5fffff;
    --phosphor-bright: #b8ffff;
    --phosphor-dim:    #1f8f8f;
    --glow-soft:    0 0 6px rgba(95, 255, 255, 0.45);
    --glow-bloom:   0 0 14px rgba(95, 255, 255, 0.18);
}
[data-theme="synthwave"] {
    --phosphor:        #ff5fd7;
    --phosphor-bright: #ffa3e6;
    --phosphor-dim:    #8f1f6f;
    --glow-soft:    0 0 6px rgba(255, 95, 215, 0.45);
    --glow-bloom:   0 0 14px rgba(255, 95, 215, 0.18);
}
[data-theme="white"] {
    --phosphor:        #e8e8e8;
    --phosphor-bright: #ffffff;
    --phosphor-dim:    #8c8c8c;
    --glow-soft:    0 0 4px rgba(232, 232, 232, 0.3);
    --glow-bloom:   0 0 10px rgba(232, 232, 232, 0.12);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    background: var(--phosphor-bg);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    color: var(--phosphor);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    user-select: none;
}
a, a:visited { color: var(--ansi-cyan); text-decoration: underline; }
a:hover { color: var(--phosphor-bright); }

/* ---------- CRT effects layer ---------- */
.crt {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}
/* Scanlines — Clean, crisp 1px interlaced grid */
.crt__scanlines {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    z-index: 2;
    pointer-events: none;
}
/* Authentic CRT Refresh Band (Perfect Theme Hue) */
.crt::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8vh;
    background: var(--phosphor);
    opacity: 0.03; /* Perfectly preserves the theme hue */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 50%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 50%, transparent);
    z-index: 2;
    animation: crt-refresh 10s linear infinite;
    pointer-events: none;
}
@keyframes crt-refresh {
    0%   { transform: translateY(-10vh); }
    100% { transform: translateY(110vh); }
}
/* Very slow, barely-noticeable ambient flicker */
.crt__flicker {
    position: absolute; inset: 0;
    background: transparent;
    opacity: var(--flicker-op);
    mix-blend-mode: overlay;
    animation: crt-flicker 3s ease-in-out infinite;
    z-index: 3;
}
@keyframes crt-flicker {
    0%, 100% { opacity: 0; }
    40%       { opacity: var(--flicker-op); }
    45%       { opacity: 0; }
    50%       { opacity: var(--flicker-op); }
    55%       { opacity: 0; }
}
/* Vignette — stronger edges, subtle inner phosphor bloom */
.crt__vignette {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at center,
            rgba(0,0,0,0) 70%,
            rgba(0,0,0,0.3) 100%),
        radial-gradient(ellipse at center,
            rgba(57, 255, 20, 0.04) 50%,
            rgba(0,0,0,0) 80%);
    z-index: 1;
}
[data-theme="amber"] .crt__vignette { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 70%, rgba(0,0,0,0.3) 100%), radial-gradient(ellipse at center, rgba(255, 176, 0, 0.04) 50%, rgba(0,0,0,0) 80%); }
[data-theme="cyan"]   .crt__vignette { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 70%, rgba(0,0,0,0.3) 100%), radial-gradient(ellipse at center, rgba(95, 255, 255, 0.04) 50%, rgba(0,0,0,0) 80%); }
[data-theme="synthwave"] .crt__vignette { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 70%, rgba(0,0,0,0.3) 100%), radial-gradient(ellipse at center, rgba(255, 95, 215, 0.04) 50%, rgba(0,0,0,0) 80%); }
[data-theme="white"] .crt__vignette { background: radial-gradient(ellipse at center, rgba(0,0,0,0) 70%, rgba(0,0,0,0.3) 100%); }

/* Toggle CRT effects */
[data-crt="off"] .crt__scanlines { display: none; }
[data-crt="off"] .crt__flicker { display: none; }
[data-crt="off"] .crt__vignette { background: none; }

/* ---------- Terminal container ---------- */
.terminal {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    background: var(--phosphor-bg);
    z-index: 1;
}

.terminal__screen {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--pad-y) var(--pad-x) 8px;
    outline: none;
    cursor: text;
    color: var(--phosphor);
    text-shadow: var(--glow-sharp);
    /* perspective + slight scale for CRT curvature illusion */
    transform-origin: center center;
    will-change: transform;
    scrollbar-width: thin;
    scrollbar-color: var(--phosphor-dim) transparent;
}
[data-glow="on"] .terminal__screen {
    text-shadow: var(--glow-sharp), var(--glow-soft);
}
[data-glow="on"] .terminal__screen * {
    text-shadow: var(--glow-sharp), var(--glow-soft);
}
/* Subtle CRT curvature (very gentle, only when CRT is on) */
[data-crt="on"] .terminal__screen {
    transform: perspective(1400px) scale(1.002);
}

/* Webkit scrollbar */
.terminal__screen::-webkit-scrollbar { width: 8px; }
.terminal__screen::-webkit-scrollbar-track { background: transparent; }
.terminal__screen::-webkit-scrollbar-thumb {
    background: var(--phosphor-dim);
    border-radius: 0;
    opacity: 0.4;
}
.terminal__screen::-webkit-scrollbar-thumb:hover { background: var(--phosphor); }

/* ---------- Boot output ---------- */
.terminal__boot {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--phosphor-dim);
    font-size: 13px;
    margin-bottom: 8px;
}
.terminal__boot .ok    { color: var(--phosphor-bright); }
.terminal__boot .warn  { color: var(--ansi-yellow); }
.terminal__boot .err   { color: var(--ansi-red); }
.terminal__boot .info  { color: var(--ansi-cyan); }
.terminal__boot .accent{ color: var(--phosphor-bright); font-weight: 700; }

/* ---------- Scrollback / output ---------- */
.terminal__scrollback {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--phosphor);
}
.terminal__scrollback .line {
    display: block;
    min-height: 1.35em;
}

/* Output color classes (ANSI-like) */
.c-default { color: var(--phosphor); }
.c-bright  { color: var(--phosphor-bright); font-weight: 700; }
.c-dim     { color: var(--phosphor-dim); }
.c-red     { color: var(--ansi-red); }
.c-yellow  { color: var(--ansi-yellow); }
.c-cyan    { color: var(--ansi-cyan); }
.c-magenta { color: var(--ansi-magenta); }
.c-blue    { color: var(--ansi-blue); }
.c-orange  { color: var(--ansi-orange); }
.c-gray    { color: var(--ansi-gray); }

/* Inline emphasis */
.bold { font-weight: 700; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }

/* Block elements inside output */
.terminal__scrollback pre,
.terminal__boot pre {
    margin: 0;
    font-family: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}
.terminal__scrollback a {
    color: var(--ansi-cyan);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.terminal__scrollback a:hover { color: var(--phosphor-bright); }

/* ASCII art blocks */
.ascii-art {
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--phosphor-bright);
    display: inline-block;
}
.ascii-art.dim { color: var(--phosphor-dim); }

/* Tables / lists */
.dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0 18px;
    margin: 4px 0;
}
.dl dt { color: var(--phosphor-dim); }
.dl dd { color: var(--phosphor); margin: 0; }

/* ---------- Active prompt line ---------- */
.terminal__active {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 1.35em;
    color: var(--phosphor);
}

.prompt { color: var(--phosphor-bright); font-weight: 500; }
.prompt .user { color: var(--phosphor-bright); }
.prompt .at   { color: var(--phosphor-dim); }
.prompt .host { color: var(--ansi-cyan); }
.prompt .colon{ color: var(--phosphor-dim); }
.prompt .path { color: var(--ansi-blue); }
.prompt .dollar { color: var(--phosphor-dim); margin-right: 4px; }

.prompt__input { color: var(--phosphor); }
.prompt__input .token-cmd  { color: var(--phosphor-bright); font-weight: 700; }
.prompt__input .token-arg  { color: var(--phosphor); }
.prompt__input .token-flag { color: var(--ansi-yellow); }
.prompt__input .token-str  { color: var(--ansi-cyan); }

/* Blinking block cursor */
.cursor {
    display: inline-block;
    width: 0.62em;
    height: 1.1em;
    background: var(--phosphor);
    margin-left: 0;
    vertical-align: text-bottom;
    transform: translateY(2px);
    animation: blink 1.05s steps(2) infinite;
    box-shadow: 0 0 6px var(--phosphor);
}
[data-glow="on"] .cursor {
    box-shadow: 0 0 6px var(--phosphor), 0 0 14px rgba(57,255,20,0.4);
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
[data-cursor-style="underline"] .cursor {
    width: 0.62em;
    height: 2px;
    vertical-align: bottom;
    transform: translateY(-3px);
}

/* When terminal is booting, hide the prompt line */
[data-boot-state="booting"] .terminal__active { visibility: hidden; }
[data-boot-state="ready"] .terminal__active { visibility: visible; }

/* ---------- Hidden input for mobile keyboards ---------- */
.terminal__hidden-input {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    width: 1px;
    height: 1px;
    font-size: 16px; /* iOS requires >=16px to avoid zoom */
    border: none;
    background: transparent;
    color: transparent;
    caret-color: transparent;
}

/* ---------- Status bar ---------- */
.terminal__statusbar {
    flex-shrink: 0;
    height: var(--statusbar-h);
    background: linear-gradient(to top, rgba(57,255,20,0.04), transparent);
    border-top: 1px solid rgba(57, 255, 20, 0.2);
    padding: 0 var(--pad-x);
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 12px;
    color: var(--phosphor-dim);
    letter-spacing: 0.04em;
    text-transform: lowercase;
}
.terminal__statusbar .path b { color: var(--phosphor); font-weight: 700; }
.terminal__statusbar .sp { color: var(--phosphor-dim); }
.terminal__statusbar .statusbar__action {
    color: inherit;
    text-decoration: none;
    background: none;
    border: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    padding: 4px 8px;
    min-height: 28px;
}
.terminal__statusbar .statusbar__action:hover,
.terminal__statusbar .statusbar__action:focus-visible { color: var(--phosphor-bright); }
[data-mode="gui"] .terminal__statusbar { display: none; }
.terminal__statusbar .online {
    color: var(--phosphor-bright);
    position: relative;
    padding-left: 14px;
}
.terminal__statusbar .online::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--phosphor-bright);
    box-shadow: 0 0 8px var(--phosphor-bright);
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.terminal__statusbar .clock {
    margin-left: auto;
    color: var(--phosphor);
    font-variant-numeric: tabular-nums;
}

/* ---------- GUI mode ---------- */
/* A point-and-click view of the same content, for visitors who'd rather
   not type. Built by gui.js from T.content — toggled via [data-mode]. */
[data-mode="gui"] .terminal { display: none; }
[data-mode="gui"] .crt__scanlines,
[data-mode="gui"] .crt__flicker { display: none; } /* keep the vignette only — readability over CRT realism here */

.gui-shell {
    position: fixed; inset: 0;
    z-index: 1;
    display: none;
    background: var(--phosphor-bg);
}
[data-mode="gui"] .gui-shell { display: block; }

.gui-shell__scroll {
    height: 100%;
    overflow-y: auto;
    padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) * 2);
    max-width: 760px;
    margin: 0 auto;
    color: var(--phosphor);
}

.gui-shell__titlebar {
    margin: 0 0 18px;
    font-size: 12px;
    color: var(--phosphor-dim);
    letter-spacing: 0.04em;
    text-transform: lowercase;
}
.gui-shell__sep { color: var(--phosphor-dim); }
.gui-shell__name {
    margin: 0 0 8px;
    font-size: 28px;
    color: var(--phosphor-bright);
    text-shadow: var(--glow-sharp);
}
.gui-shell__role {
    margin: 0 0 20px;
    color: var(--phosphor);
    max-width: 60ch;
}

.gui-shell__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px dashed var(--phosphor-dim);
}

.gui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--phosphor-dim);
    color: var(--phosphor);
    background: transparent;
    font-family: var(--font-mono);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.gui-btn:hover { border-color: var(--phosphor); color: var(--phosphor-bright); }
.gui-btn:focus-visible { outline: 2px solid var(--phosphor-bright); outline-offset: 2px; }
.gui-btn--primary { border-color: var(--phosphor); color: var(--phosphor-bg); background: var(--phosphor); font-weight: 700; }
.gui-btn--primary:hover { background: var(--phosphor-bright); border-color: var(--phosphor-bright); color: var(--phosphor-bg); }

.gui-section {
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px dashed var(--phosphor-dim);
}
.gui-section:last-of-type { border-bottom: none; }
.gui-section h2 {
    margin: 0 0 14px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--phosphor-dim);
}
.gui-section h2::before { content: '# '; }
.gui-section p { margin: 0 0 12px; line-height: 1.6; max-width: 65ch; }
.gui-section__sub { color: var(--phosphor-dim); }

.gui-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0; }
.gui-dl > div { display: contents; }
.gui-dl dt { color: var(--phosphor-dim); margin: 0; }
.gui-dl dd { margin: 0; }

.gui-studies { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.gui-studies li { border-left: 2px solid var(--phosphor-dim); padding-left: 14px; }
.gui-studies h3 { margin: 0 0 6px; font-size: 15px; color: var(--phosphor-bright); }
.gui-studies p { margin: 0 0 8px; max-width: 60ch; }
.gui-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gui-tags span {
    font-size: 11px;
    color: var(--ansi-cyan);
    border: 1px solid var(--phosphor-dim);
    padding: 2px 8px;
}

.gui-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gui-bars li { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: 12px; }
.gui-bars__label { color: var(--phosphor-dim); font-size: 13px; }
.gui-bars__track { height: 8px; border: 1px solid var(--phosphor-dim); background: transparent; }
.gui-bars__fill { display: block; height: 100%; background: var(--phosphor); }
.gui-bars__pct { font-size: 12px; color: var(--phosphor-dim); text-align: right; font-variant-numeric: tabular-nums; }

.gui-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.gui-shell__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}
.gui-shell__hint { color: var(--phosphor-dim); font-size: 12px; }

@media (max-width: 720px) {
    .gui-shell__name { font-size: 22px; }
    .gui-bars li { grid-template-columns: 90px 1fr 38px; gap: 8px; }
    .gui-bars__label { font-size: 12px; }
}

/* ---------- Overlay (fullscreen easter eggs) ---------- */
.overlay {
    position: fixed; inset: 0;
    z-index: 200;
    pointer-events: none;
    background: var(--phosphor-bg);
    opacity: 0;
    transition: opacity 0.2s;
}
.overlay.is-active {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}
.overlay pre {
    margin: 0;
    font-family: var(--font-mono);
    color: var(--phosphor);
    text-shadow: var(--glow-sharp), var(--glow-soft);
    white-space: pre-wrap;
    padding: 30px;
    font-size: 13px;
    line-height: 1.4;
}
.overlay .overlay-hint {
    color: var(--phosphor-dim);
    font-size: 11px;
    margin-top: 12px;
    text-align: center;
}
.overlay .overlay-content {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* ---------- Misc utilities ---------- */
.hr {
    border: 0;
    border-top: 1px dashed var(--phosphor-dim);
    margin: 6px 0;
}
.center { text-align: center; }
.indent { padding-left: 16px; }
.nowrap { white-space: nowrap; }

/* spinner for async output (torrent search) */
.spinner {
    display: inline-block;
    width: 1em; height: 1em;
    border: 1px solid var(--phosphor-dim);
    border-top-color: var(--phosphor);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: -2px;
    margin-right: 4px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    :root {
        --font-size: 13px;
        --pad-x: 14px;
        --pad-y: 10px;
        --statusbar-h: 26px;
    }
    .ascii-art { font-size: 8px; }
    .terminal__statusbar { font-size: 10px; gap: 10px; }
    .terminal__statusbar .clock { margin-left: auto; }
    .crt__scanlines {
        background-size: 100% 2px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size: 12px;
        --pad-x: 10px;
    }
    .ascii-art { font-size: 7px; line-height: 1.05; }
    .terminal__statusbar { font-size: 9px; letter-spacing: 0; }
    .terminal__statusbar .path { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .crt__flicker { animation: none; opacity: 0; }
    .cursor { animation: none; opacity: 1; }
    .terminal__statusbar .online::before { animation: none; }
    .spinner { animation: none; }
}

/* Selection */
::selection {
    background: var(--phosphor);
    color: #000;
    text-shadow: none;
}