/*
 * CLI Terminal Styles
 * Jack Ross's personal website
 * Based on Factory Design System
 */

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

/* ===== BASE VARIABLES ===== */
:root {
    /* JetBrains Mono is the SIGNAL TERMINAL primary mono. Berkeley Mono kept as a
     * graceful upgrade for those who have it locally. */
    --font-mono: 'JetBrains Mono', 'Berkeley Mono', 'SF Mono', Monaco, Consolas, 'Liberation Mono', Courier, monospace;
    --font-heading: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size: 14px;
    --line-height: 1.5;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shared SIGNAL TERMINAL overlay tokens (used regardless of theme) */
    --st-scanline: rgba(255, 255, 255, 0.025);
    --st-grid: rgba(255, 255, 255, 0.03);
}

/* ===== THEME: MIDNIGHT (Default — matches SIGNAL TERMINAL dark) ===== */
.theme-midnight {
    --bg-primary: #0A0A0A;
    --bg-secondary: #141414;
    --bg-tertiary: #1C1C1C;
    --bg-hover: #262626;

    --text-primary: #E6E6E6;
    --text-secondary: #8A8A8A;
    --text-muted: #555555;

    --accent: #FFB000;
    --accent-hover: #FFC53D;

    --border: #262626;
    --border-strong: #3A3A3A;

    --success: #22DD66;
    --error: #FF3D3D;
    --warning: #FFB000;
    --link: #4D7EFF;

    --title-btn-close: #FF3D3D;
    --title-btn-min: #FFB000;
    --title-btn-max: #22DD66;

    --st-scanline: rgba(255, 255, 255, 0.025);
    --st-grid: rgba(255, 255, 255, 0.03);
    --st-vignette: rgba(0, 0, 0, 0.45);
    --st-vignette-stop: 50%;
}

/* ===== THEME: PHOSPHOR (Classic Green CRT) ===== */
.theme-phosphor {
    --bg-primary: #0a0a0a;
    --bg-secondary: #0f0f0f;
    --bg-tertiary: #141414;
    --bg-hover: #1a1a1a;

    --text-primary: #33ff33;
    --text-secondary: #22cc22;
    --text-muted: #118811;

    --accent: #00ff00;
    --accent-hover: #44ff44;

    --border: #1a3a1a;
    --border-strong: #225522;

    --success: #00ff00;
    --error: #ff3333;
    --warning: #ffff33;
    --link: #33ffff;

    --title-btn-close: #ff3333;
    --title-btn-min: #ffff33;
    --title-btn-max: #33ff33;
}

/* ===== THEME: AMBER (Warm Retro) ===== */
.theme-amber {
    --bg-primary: #1a1200;
    --bg-secondary: #1f1600;
    --bg-tertiary: #261c00;
    --bg-hover: #332600;

    --text-primary: #ffb000;
    --text-secondary: #cc8c00;
    --text-muted: #805800;

    --accent: #ff8c00;
    --accent-hover: #ffaa33;

    --border: #403000;
    --border-strong: #4d3a00;

    --success: #88cc00;
    --error: #ff4400;
    --warning: #ffcc00;
    --link: #ffdd66;

    --title-btn-close: #ff4400;
    --title-btn-min: #ffcc00;
    --title-btn-max: #88cc00;
}

/* ===== THEME: MATRIX ===== */
.theme-matrix {
    --bg-primary: #0d0d0d;
    --bg-secondary: #0a0f0a;
    --bg-tertiary: #0f140f;
    --bg-hover: #141f14;

    --text-primary: #00ff41;
    --text-secondary: #00cc33;
    --text-muted: #008f11;

    --accent: #00ff41;
    --accent-hover: #33ff66;

    --border: #003300;
    --border-strong: #004400;

    --success: #00ff41;
    --error: #ff0040;
    --warning: #ffff00;
    --link: #00ffff;

    --title-btn-close: #ff0040;
    --title-btn-min: #ffff00;
    --title-btn-max: #00ff41;
}

/* ===== THEME: HIGH CONTRAST ===== */
.theme-contrast {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #111111;
    --bg-hover: #1a1a1a;

    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;

    --accent: #ffffff;
    --accent-hover: #ffffff;

    --border: #333333;
    --border-strong: #444444;

    --success: #00ff00;
    --error: #ff0000;
    --warning: #ffff00;
    --link: #00ffff;

    --title-btn-close: #ff0000;
    --title-btn-min: #ffff00;
    --title-btn-max: #00ff00;
}

/* ===== THEME: CREATIVE (Gunmetal + Orange) ===== */
.theme-creative {
    --bg-primary: #1a1f24;
    --bg-secondary: #20262d;
    --bg-tertiary: #282f38;
    --bg-hover: #303840;

    --text-primary: #f97316;
    --text-secondary: #c2601a;
    --text-muted: #7c4020;

    --accent: #fb923c;
    --accent-hover: #fdba74;

    --border: #303840;
    --border-strong: #3d4653;

    --success: #22c55e;
    --error: #ef4444;
    --warning: #eab308;
    --link: #fb923c;

    --title-btn-close: #ef4444;
    --title-btn-min: #eab308;
    --title-btn-max: #22c55e;
}

/* ===== THEME: LIGHT ===== */
/* ===== THEME: LIGHT (matches SIGNAL TERMINAL newsprint) ===== */
.theme-light {
    --bg-primary: #F4EFE5;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #FAF7F0;
    --bg-hover: #ECE6D8;

    --text-primary: #14110D;
    --text-secondary: #4E4A42;
    --text-muted: #8A8479;

    --accent: #B27200;
    --accent-hover: #8A5800;

    --border: #C8C0AB;
    --border-strong: #8A8479;

    --success: #15743C;
    --error: #B91C1C;
    --warning: #B27200;
    --link: #2E5BC9;

    --title-btn-close: #B91C1C;
    --title-btn-min: #B27200;
    --title-btn-max: #15743C;

    --st-scanline: rgba(20, 17, 13, 0.025);
    --st-grid: rgba(20, 17, 13, 0.05);
    --st-vignette: rgba(60, 50, 30, 0.10);
    --st-vignette-stop: 62%;
}

/* ===== LATEST SIGNAL TICKER (matches SIGNAL TERMINAL ticker pattern) ===== */
.terminal-ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
}
.terminal-ticker:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    text-decoration: none;
}
.terminal-ticker .tk-prefix {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 1.5px;
    flex-shrink: 0;
}
.terminal-ticker .tk-sep {
    color: var(--text-muted);
    flex-shrink: 0;
}
.terminal-ticker .tk-meta {
    color: var(--accent);
    font-weight: 700;
    flex-shrink: 0;
}
.terminal-ticker .tk-meta .tk-trend-up { color: var(--success); }
.terminal-ticker .tk-meta .tk-trend-down { color: var(--error); }
.terminal-ticker .tk-title {
    color: var(--text-primary);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.terminal-ticker .tk-cta {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 1px;
    flex-shrink: 0;
}
@media (max-width: 560px) {
    .terminal-ticker { font-size: 10px; padding: 7px 12px; gap: 8px; }
    .terminal-ticker .tk-sep:nth-of-type(2) { display: none; }
    .terminal-ticker .tk-cta { display: none; }
}

/* ===== BASE STYLES ===== */
html {
    height: 100%;
    /* paint html so the scrollbar gutter bleeds the page bg (matches SIGNAL TERMINAL) */
    background-color: var(--bg-primary);
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-mono);
    font-size: var(--font-size);
    line-height: var(--line-height);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

/* SIGNAL TERMINAL scanline + grid overlays — fixed, behind content, transparent
 * track so the active palette holds. Pointer-events none so they never block. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background-image:
        repeating-linear-gradient(to bottom, var(--st-scanline) 0 1px, transparent 1px 3px);
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    background-image:
        linear-gradient(to right, var(--st-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--st-grid) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.7;
}

/* Terminal-styled scrollbar — transparent track + amber on hover (matches SIGNAL TERMINAL) */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-corner { background: transparent; }

a {
    color: var(--link);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.cmd-link {
    cursor: pointer;
}

/* ===== TERMINAL CONTAINER ===== */
.terminal-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--space-lg);
    background: var(--bg-primary);
}

.terminal {
    width: 100%;
    max-width: 1000px;
    height: 80vh;
    height: 80dvh;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-strong);
    background: var(--bg-secondary);
    box-shadow:
        0 0 0 1px var(--border),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* ===== TITLE BAR ===== */
.terminal-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    user-select: none;
}

.title-buttons {
    display: flex;
    gap: 8px;
}

.title-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.title-btn.close { background: var(--title-btn-close); }
.title-btn.minimize { background: var(--title-btn-min); }
.title-btn.maximize { background: var(--title-btn-max); }

.title-text {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
    text-align: center;
}

.title-link {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

.title-link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.title-actions {
    display: flex;
    gap: var(--space-sm);
}

.help-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.15s ease;
}

.help-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

/* ===== TERMINAL BODY ===== */
.terminal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    background: var(--bg-secondary);
}

.terminal-body::-webkit-scrollbar {
    width: 8px;
}

.terminal-body::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

.terminal-body::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}

.terminal-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===== OUTPUT ===== */
.terminal-output {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.line {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 0;
    line-height: var(--line-height);
}

.line.boot {
    color: var(--text-muted);
}

.ascii-art {
    font-size: 7.5px;
    line-height: 1.1;
    letter-spacing: -0.5px;
    white-space: pre;
    overflow-x: auto;
    display: block;
}

.line.command {
    color: var(--text-muted);
    margin-top: 12px;
}

.line.command .cmd-text {
    color: var(--accent);
}

.line .highlight,
.line .bold.white {
    color: var(--text-primary);
    font-weight: 600;
}

.line .accent {
    color: var(--accent);
}

.line .muted {
    color: var(--text-muted);
}

.line a {
    color: var(--link);
}

.line a:hover {
    color: var(--accent-hover);
}

.line .table-border {
    color: var(--text-muted);
}

/* ===== INPUT LINE ===== */
.terminal-input {
    display: flex;
    align-items: center;
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
}

.input-prompt {
    color: var(--accent);
    font-weight: 600;
    margin-right: var(--space-sm);
    user-select: none;
}

#command-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--font-size);
    outline: none;
    caret-color: var(--accent);
}

#command-input::placeholder {
    color: var(--text-muted);
}

/* ===== STATUS BAR ===== */
.terminal-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
    user-select: none;
}

.status-left,
.status-center,
.status-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.status-hint {
    opacity: 0.7;
}

.status-sep {
    color: var(--border-strong);
}

.status-model {
    color: var(--accent);
}

/* Theme chip in the center of the status bar — click to cycle */
.status-theme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: 0.5px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-radius: 2px;
}
.status-theme:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.status-theme-label {
    color: var(--text-muted);
}
.status-theme-value {
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

/* ===== COMMAND SHORTCUTS ===== */
.command-shortcuts {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.cmd-shortcut {
    padding: var(--space-xs) var(--space-md);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cmd-shortcut:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.cmd-shortcut:active,
.cmd-shortcut.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

.cmd-mode-toggle {
    color: var(--accent);
    border-color: var(--accent);
}

.cmd-mode-toggle:hover {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

.cmd-restart {
    opacity: 0.5;
    font-size: 11px;
}

.cmd-restart:hover {
    opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .terminal-wrapper {
        padding: var(--space-md);
    }

    .terminal {
        height: 85vh;
        height: 85dvh;
        max-height: none;
        border-radius: var(--radius-md);
    }

    .ascii-art {
        font-size: 6px;
    }

    .command-shortcuts {
        flex-wrap: wrap;
    }

    .terminal-status {
        font-size: 10px;
    }

    .status-center {
        display: none;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size: 13px;
    }

    .terminal-wrapper {
        padding: var(--space-sm);
    }

    .terminal {
        height: 90vh;
        height: 90dvh;
        border-radius: var(--radius-sm);
    }

    .title-text {
        font-size: 11px;
    }

    .ascii-art {
        font-size: 4px;
        letter-spacing: -1px;
    }

    .cmd-shortcut {
        padding: var(--space-xs) var(--space-sm);
        font-size: 11px;
    }

    .terminal-status {
        font-size: 9px;
        padding: var(--space-xs) var(--space-sm);
    }

    .status-hide-mobile {
        display: none;
    }

    #command-input {
        font-size: 16px;
    }

    .terminal-body {
        padding: var(--space-sm) var(--space-md);
    }

    .terminal-output {
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0;
        margin: 0;
    }

    .line {
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0;
        margin: 0;
    }

    .terminal-input {
        padding: var(--space-sm) var(--space-md);
    }

    .input-prompt {
        margin-right: 4px;
    }
}

/* ===== TYPING CURSOR ===== */
.typing-cursor {
    animation: blink 0.7s step-end infinite;
    color: var(--accent);
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ===== SCREEN SHAKE ===== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.terminal.shake {
    animation: shake 0.5s ease-in-out;
}

/* ===== TITLE BAR BUTTONS ===== */
.title-btn:hover {
    opacity: 0.7;
}

/* ===== MINIMIZE / MAXIMIZE / SHUTDOWN ===== */
.terminal.minimized .terminal-body,
.terminal.minimized .terminal-status {
    display: none;
}

.terminal.minimized {
    height: auto;
    max-height: none;
}

.terminal.maximized {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
}

.terminal-wrapper.maximized {
    padding: 0;
}

.command-shortcuts.hidden {
    display: none;
}

@keyframes shutdown {
    0% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 0.5; transform: scaleY(0.5); }
    100% { opacity: 0; transform: scaleY(0); }
}

.terminal.shutdown {
    animation: shutdown 0.8s ease-in forwards;
}

.shutdown-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    cursor: pointer;
    text-align: center;
    padding: var(--space-lg);
}

/* ===== MATRIX CANVAS ===== */
#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    display: none;
}

#matrix-canvas.active {
    display: block;
}

/* ===== SUCCESS TEXT ===== */
.success {
    color: var(--success);
}

.error {
    color: var(--error);
}

/* ===== GALLERY GRID ===== */
.gallery-header {
    margin-bottom: var(--space-md);
}

.gallery-header p {
    margin-top: var(--space-xs);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

@keyframes galleryFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.gallery-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    opacity: 0;
    animation: galleryFadeIn 0.4s ease forwards;
}

.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--border-strong);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.gallery-caption {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    padding: var(--space-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-strong);
    color: var(--text-muted);
    font-size: 24px;
    background: var(--bg-tertiary);
}

/* ===== LIGHTBOX ===== */
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#lightbox.active {
    display: flex;
}

#lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
}

.lightbox-caption {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #aaa;
    font-family: var(--font-mono);
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
}

.lightbox-counter {
    position: absolute;
    top: 20px;
    left: 24px;
    color: #aaa;
    font-family: var(--font-mono);
    font-size: 13px;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 24px;
    background: none;
    border: none;
    color: #ccc;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    z-index: 1;
}

.lightbox-close:hover {
    color: #fff;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #ccc;
    font-size: 48px;
    cursor: pointer;
    padding: 8px 16px;
    line-height: 1;
    z-index: 1;
}

.lightbox-nav:hover {
    color: #fff;
}

.lightbox-prev {
    left: 8px;
}

.lightbox-next {
    right: 8px;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lightbox-nav {
        font-size: 32px;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

.cmd-shortcut:focus-visible,
.help-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ===== MODE TRANSITION (Revolving Door) ===== */
.terminal-wrapper {
    perspective: 1200px;
}

.terminal {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.terminal.revolve-out {
    animation: revolveOut 0.4s ease-in forwards;
}

.terminal.revolve-in {
    animation: revolveIn 0.4s ease-out forwards;
}

@keyframes revolveOut {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: rotateY(90deg);
        opacity: 0;
    }
}

@keyframes revolveIn {
    0% {
        transform: rotateY(-90deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

.terminal.transitioning {
    pointer-events: none;
}

.terminal.transitioning input {
    pointer-events: none;
}