/* ============================================================
   sec-tty — interactive shell prompt component
   Companion stylesheet for js/sec-tty.js. Layered onto the
   "Backspace" codex theme; uses --secdsm-* tokens from custom.css.
   ============================================================ */

/* ─── section wrapper ─────────────────────────────────────── */
.secdsm-tty-section {
    padding-block: clamp(60px, 10vw, 110px);
    border-top: 1px solid var(--secdsm-line);
    background:
        linear-gradient(180deg,
            rgba(0, 229, 255, .04) 0%,
            transparent 40%,
            transparent 100%),
        var(--secdsm-bg);
}

.secdsm-tty-header {
    margin-bottom: 32px;
    max-width: 720px;
}

.secdsm-tty-headline {
    font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
    font-size: clamp(28px, 4.4vw, 44px);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--secdsm-white);
    margin: 8px 0 16px;
}

.secdsm-tty-headline .secdsm-tty-prompt {
    color: var(--secdsm-cyan);
}

.secdsm-tty-body {
    color: var(--secdsm-text);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.secdsm-tty-body code {
    font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
    color: var(--secdsm-cyan);
    background: var(--secdsm-cyan-dim);
    padding: 1px 6px;
    border-radius: 2px;
    font-size: .92em;
}

/* ─── the <sec-tty> element ───────────────────────────────── */
sec-tty {
    display: block;
    margin-top: 24px;
    border: 1px solid var(--secdsm-line-bright);
    background: var(--secdsm-surface);
    color: var(--secdsm-white);
    font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
    font-size: 14px;
    line-height: 1.55;
    overflow: hidden;
    box-shadow:
        0 0 0 1px var(--secdsm-cyan-dim),
        0 24px 80px rgba(0, 0, 0, .45);
}

.tty-head {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--secdsm-line);
    background: var(--secdsm-surface-2);
    color: var(--secdsm-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.tty-head .dot {
    width: 8px; height: 8px;
    background: var(--secdsm-cyan);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--secdsm-cyan-glow);
}

.tty-out {
    padding: 16px 18px;
    min-height: 240px;
    max-height: 50vh;
    overflow-y: auto;
    line-height: 1.6;
    white-space: pre-wrap;
    color: var(--secdsm-text);
}

.tty-out .echo { color: var(--secdsm-muted); }
.tty-out .echo b { color: var(--secdsm-white); font-weight: 500; }
.tty-out .echo .p { color: var(--secdsm-cyan); }

.tty-out .out { color: var(--secdsm-text); margin: 4px 0 14px; }
.tty-out .out a { color: var(--secdsm-cyan); }
.tty-out .out a:hover { color: #aef0ff; }

.tty-out .err { color: var(--secdsm-magenta); margin: 4px 0 14px; }
.tty-out .ok  { color: var(--secdsm-amber); }

.tty-out hr {
    margin: 12px 0;
    border: 0;
    border-top: 1px dashed var(--secdsm-line);
}

.tty-out pre.box {
    font: inherit;
    color: var(--secdsm-text);
    border: 1px solid var(--secdsm-line);
    padding: 10px 14px;
    margin: 4px 0;
    white-space: pre;
    overflow-x: auto;
    background: var(--secdsm-bg);
}
.tty-out pre.box b  { color: var(--secdsm-white); font-weight: 500; }
.tty-out pre.box em { color: var(--secdsm-cyan); font-style: normal; }

.tty-input {
    display: flex; align-items: baseline; gap: 10px;
    padding: 14px 18px 18px;
    border-top: 1px dashed var(--secdsm-line);
    background:
        linear-gradient(to top, var(--secdsm-cyan-dim), transparent 80%),
        var(--secdsm-surface);
}

.tty-input .p {
    color: var(--secdsm-cyan);
    flex: 0 0 auto;
    text-shadow: 0 0 8px var(--secdsm-cyan-glow);
}

.tty-input input {
    flex: 1; min-width: 0;
    background: transparent;
    border: 0; outline: none;
    font: inherit;
    color: var(--secdsm-white);
    caret-color: var(--secdsm-cyan);
    padding: 0;
}

.tty-input input::placeholder { color: var(--secdsm-muted); }

/* scrollbar — match dark surface */
.tty-out::-webkit-scrollbar { width: 8px; }
.tty-out::-webkit-scrollbar-track { background: var(--secdsm-bg); }
.tty-out::-webkit-scrollbar-thumb {
    background: var(--secdsm-line-bright);
    border: 2px solid var(--secdsm-bg);
}
.tty-out::-webkit-scrollbar-thumb:hover { background: var(--secdsm-cyan); }

@media (prefers-reduced-motion: reduce) {
    sec-tty { box-shadow: 0 0 0 1px var(--secdsm-cyan-dim); }
    .tty-head .dot { box-shadow: none; }
    .tty-input .p { text-shadow: none; }
}