/* ================================================================
   App: Terminal — Hero ASCII intro + steady-state
   Scoped to [data-window="terminal"] .hero. Layered:
     <canvas .hero__canvas>  absolute inset:0   (z:1, aria-hidden)
     <div    .hero__content> absolute bottom    (z:2, fades in)
   No overflow on .window__body (hartregel) — both children are
   absolute, so nothing is in flow.
   ================================================================ */
[data-window="terminal"] .hero {
    flex: 1 1 auto;
    position: relative;
    /* Stacking context: contains canvas's z:1 so it doesn't escape
       to .window's stacking context and cover the .resizer handle. */
    z-index: 0;
    padding: 0;
    background: var(--byte-ink-950);
    font-family: var(--byte-font-code);
    color: var(--byte-text);
    min-height: 360px;
    /* Inhibit flex-children sizing on the absolute canvas/content */
    display: block;
}

/* Cursor-affordance only while intro is skippable */
[data-window="terminal"] .hero.is-skippable {
    cursor: pointer;
}

/* ---- Canvas layer ---- */
[data-window="terminal"] .hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

/* ---- DOM content layer (welcome + prompt) ---- */
[data-window="terminal"] .hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px;
    z-index: 2;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
[data-window="terminal"] .hero__content.is-revealed {
    opacity: 1;
}

[data-window="terminal"] .hero__welcome {
    position: relative;
    margin: 0 0 14px;
    padding-left: 32px;
    text-align: left;
    font-family: var(--byte-font-code);
    font-size: var(--byte-fs-sm);
    line-height: 1.7;
    color: rgba(207, 238, 232, 0.7);
    letter-spacing: 0.02em;
}
[data-window="terminal"] .hero__welcome b {
    color: var(--byte-primary);
    font-weight: 600;
    opacity: 0.85;
}
[data-window="terminal"] .hero__welcome em {
    color: var(--byte-accent);
    font-style: normal;
    font-weight: 500;
}
[data-window="terminal"] .hero__path {
    color: var(--byte-code-blue);
    font-weight: 500;
}

[data-window="terminal"] .hero__prompt {
    text-align: left;
    padding-left: 32px;
    font-family: var(--byte-font-code);
    font-size: var(--byte-fs-md);
    line-height: 1.5;
    color: var(--byte-text);
}
[data-window="terminal"] .hero__prompt-user {
    color: var(--byte-accent);
    font-weight: 500;
}
[data-window="terminal"] .hero__prompt-sep {
    color: var(--byte-text-muted);
    margin: 0 1px;
}
[data-window="terminal"] .hero__prompt-path {
    color: var(--byte-code-blue);
    font-weight: 500;
}
[data-window="terminal"] .hero__cursor {
    display: inline-block;
    margin-left: 6px;
    color: var(--byte-primary);
    animation: hero-cursor-blink 1s steps(2) infinite;
}
@keyframes hero-cursor-blink {
    50% { opacity: 0; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    [data-window="terminal"] .hero__content {
        transition: none;
    }
    [data-window="terminal"] .hero__cursor {
        animation: none;
        opacity: 1;
    }
}

/* ---- Mobile / narrow window ---- */
@media (max-width: 767px) {
    [data-window="terminal"] .hero {
        min-height: 60vh;
    }
    [data-window="terminal"] .hero__content {
        bottom: 20px;
    }
    [data-window="terminal"] .hero__prompt {
        padding-left: 16px;
        font-size: var(--byte-fs-sm);
    }
}

/* ================================================================
   Shell mode — kicks in after byte:hero-finalized.
   Reuses existing .hero__content + .hero__welcome + .hero__prompt
   as the live shell. Canvas hidden, .hero__cursor replaced by an
   <input>, output-lines insertBefore(prompt). NO overflow on .hero
   — .window__body remains the only scroll container.
   ================================================================ */

/* Output lines + interactive input default-hidden so they don't
   overlay the hero animation during boot/replay. .is-shell turns
   them on. */
[data-window="terminal"] .hero__line { display: none; }
[data-window="terminal"] .shell__input { display: none; }

/* Canvas stays at full hero size in shell mode too — wordmark Y is
   capped in drawBanner so it never moves below ~Y=80 regardless of
   canvas size. Hero__content sits as an overlay below that fixed
   wordmark area, with transparent background so the dark canvas
   shows through (visual continuity, no hard split line). */
[data-window="terminal"] .hero.is-shell .hero__content {
    position: absolute;
    top: 220px;             /* below the capped wordmark+tagline area */
    right: 0;
    bottom: 32px;           /* matches old prompt position (hero - 32) — no jump */
    left: 0;
    pointer-events: auto;
    padding: 12px 32px 0;
    text-align: left;
    opacity: 1;             /* override .hero__content opacity:0 */
    transition: none;
    display: flex;
    flex-direction: column;
    /* margin-top:auto on welcome (below) pushes content to bottom —
       avoids the known justify-content:flex-end + overflow-y:auto bug. */
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Custom scrollbar — matches .window__body styling */
[data-window="terminal"] .hero.is-shell .hero__content::-webkit-scrollbar {
    width: 10px;
}
[data-window="terminal"] .hero.is-shell .hero__content::-webkit-scrollbar-track {
    background: transparent;
}
[data-window="terminal"] .hero.is-shell .hero__content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
}
[data-window="terminal"] .hero.is-shell .hero__content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}
[data-window="terminal"] .hero.is-shell .hero__welcome {
    margin: auto 0 14px;    /* margin-top:auto pushes welcome (and everything
                               after) to the bottom of the flex container.
                               margin-bottom:14 matches the non-shell value
                               so prompt-top stays at the same pixel position. */
    padding-left: 0;        /* aligns with hero__content's padding-left */
    color: rgba(207, 238, 232, 0.9);
}
[data-window="terminal"] .hero.is-shell .hero__prompt {
    padding-left: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    /* No gap: keeps separators (`:`, `~`, `$`) tight, matching the
       inline-flow layout used during the hero animation. */
}
[data-window="terminal"] .hero.is-shell .hero__cursor {
    display: none;          /* replaced by the interactive input */
}
[data-window="terminal"] .hero.is-shell .shell__input {
    display: inline-block;
    flex: 1 1 auto;
    min-width: 8em;
    margin-left: 14px;      /* matches anim cursor's whitespace gap (~9px)
                               + cursor margin-left (6px) so the input caret
                               lands where the static cursor used to blink */
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    color: var(--byte-text);
    font: inherit;
    caret-color: var(--byte-primary);
}
[data-window="terminal"] .hero.is-shell .shell__input:read-only {
    opacity: 0.6;
    cursor: progress;
}
[data-window="terminal"] .hero.is-shell .shell__input::placeholder {
    color: var(--byte-text-muted);
    opacity: 0.7;
    font-style: italic;
}
/* ---- Stdin mode (cat > file): replace prompt with `>` ---- */
[data-window="terminal"] .hero.is-shell .hero__prompt.is-stdin > :not(.shell__input) { display: none; }
[data-window="terminal"] .hero.is-shell .hero__prompt.is-stdin::before {
    content: "> ";
    color: var(--byte-text-muted);
    white-space: pre;
}
[data-window="terminal"] .hero.is-shell .hero__prompt.is-stdin .shell__input { margin-left: 0; }

[data-window="terminal"] .hero.is-shell .hero__line {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    font-family: var(--byte-font-code);
    font-size: var(--byte-fs-md);
    line-height: 1.5;
}
[data-window="terminal"] .hero__line--echo { color: var(--byte-text-muted); }
[data-window="terminal"] .hero__line--err  { color: var(--byte-error, #ff6e6e); }
[data-window="terminal"] .hero__line--ok   { color: var(--byte-success, #58d999); }

[data-window="terminal"] .tok-cmd  { color: var(--byte-primary); }
[data-window="terminal"] .tok-user { color: var(--byte-accent); }
[data-window="terminal"] .tok-path { color: var(--byte-code-blue); }
[data-window="terminal"] .tok-sep  { color: var(--byte-text-muted); }

@media (max-width: 767px) {
    [data-window="terminal"] .hero.is-shell .hero__content {
        top: 180px;
        bottom: 20px;       /* matches old non-shell mobile bottom — no jump */
        padding: 12px 14px 0;
    }
    [data-window="terminal"] .hero.is-shell .hero__line {
        font-size: var(--byte-fs-sm);
    }
}