/* =====================================================================
   Terminal — warm amber CRT
   Standalone page, also embedded via iframe inside a desktop window.
   Palette is kept local but tuned to harmonize with the site's warm
   terracotta tokens (sharp corners, warm bezel, amber phosphor).
   ===================================================================== */

:root {
    --crt-void: #120b07;     /* page behind the monitor */
    --crt-bezel: #2b1d14;    /* monitor housing */
    --crt-screen: #0d0805;   /* glass / screen */
    --crt-line: rgba(255, 176, 74, 0.18);

    --crt-amber: #f5b860;    /* primary phosphor text */
    --crt-amber-bright: #ffd9a0;
    --crt-amber-dim: #c8884a;
    --crt-glow: rgba(245, 165, 70, 0.45);

    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* Only body is the flex container. If html is flex too, body becomes a
   shrink-to-fit flex item and the monitor tracks content width instead of
   filling the viewport (visible as a narrow terminal that grows as the
   banner renders). */
html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    background: var(--crt-void);
    display: flex;
    overflow: hidden;
    color: var(--crt-amber);
    font-family: var(--font-mono);
}

/* Monitor fills its host (the desktop window / iframe) edge to edge,
   leaving only a thin bezel so it still reads as a CRT. */
#monitor-container {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    width: 100%;
    background: var(--crt-bezel);
    border: 1px solid rgba(255, 176, 74, 0.14);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    padding: 14px;
    box-sizing: border-box;
}

#terminal {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--crt-amber);
    text-shadow: 0 0 4px var(--crt-glow);
    white-space: pre-wrap;
    outline: none;
    background: var(--crt-screen);
    background-image: radial-gradient(
        120% 120% at 50% 0%,
        rgba(245, 165, 70, 0.06) 0%,
        rgba(0, 0, 0, 0) 60%
    );
    padding: 20px;
    box-sizing: border-box;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Faint scanlines — subtle CRT texture, kept graphically simple. */
#terminal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 2px,
        var(--crt-line) 3px
    );
    opacity: 0.25;
    mix-blend-mode: overlay;
}

#terminal::-webkit-scrollbar { display: none; }

/* Blinking cursor */
.cursor {
    color: var(--crt-amber-bright);
    text-shadow: 0 0 6px var(--crt-glow);
    animation: blink 1s step-start infinite;
}

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

@media (max-width: 700px) {
    #monitor-container { padding: 8px; }
    #terminal { font-size: 0.85rem; }
}