/* ==========================================================================
   Sameer Soni — Terminal (homepage) styles
   Ported from the Claude Design file "Sameer Soni Terminal.dc.html".
   ========================================================================== */

/* --- Fonts --- */
@font-face {
    font-family: 'Share Tech Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/ShareTechMono-Regular.woff2') format('woff2');
}

/* --- Design Tokens --- */
:root {
    --term-phosphor-red: #ff3b2f;
    --term-phosphor-green: #3dff7a;
    --term-phosphor-amber: #ffb000;
    --term-bg: #050404;
    --term-bg-glow: #120706;
    --term-white: #fff;
    --term-black: #000;
    --term-scanline: rgba(0, 0, 0, 0.28);

    /* Active phosphor colour. Swap to --term-phosphor-green / -amber to retheme. */
    --c: var(--term-phosphor-red);

    /* Secondary tones mixed at 90% to keep WCAG AA (>= 4.5:1) on --term-bg. */
    --term-dim: color-mix(in srgb, var(--c) 90%, var(--term-black));
    --term-hi: color-mix(in srgb, var(--c) 40%, var(--term-white));
    --term-cmd: color-mix(in srgb, var(--c) 45%, var(--term-white));
    --term-label: color-mix(in srgb, var(--c) 90%, var(--term-black));
    --term-rule: color-mix(in srgb, var(--c) 35%, transparent);
    --term-border: color-mix(in srgb, var(--c) 50%, transparent);

    --term-font: 'Share Tech Mono', ui-monospace, monospace;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--term-bg); }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--term-white); }
::selection { background: var(--c); color: var(--term-black); }
:focus-visible { outline: 1px solid var(--c); outline-offset: 2px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Shell --- */
.term {
    position: relative;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: radial-gradient(ellipse at center, var(--term-bg-glow) 0%, var(--term-bg) 75%);
    color: var(--c);
    font-family: var(--term-font);
    font-size: 0.9375rem;
    line-height: 1.55;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.term-scanlines {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, var(--term-scanline) 3px);
    mix-blend-mode: multiply;
}

.term-sweep {
    pointer-events: none;
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 18vh;
    z-index: 4;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c) 7%, transparent), transparent);
    animation: termSweep 7s linear infinite;
}

@keyframes termSweep {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

/* --- Header --- */
.term-header {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--term-rule);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.term-header-dim { color: var(--term-label); }

/* --- Body: screen + HUD --- */
.term-body {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: flex;
}

.term-screen {
    flex: 1 1 35rem;
    min-width: 0;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.75rem;
    text-shadow: 0 0 6px color-mix(in srgb, var(--c) 55%, transparent);
}

.term-line {
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 1.55em;
}

.k-n { color: var(--c); }
.k-dim { color: var(--term-dim); }
.k-hi { color: var(--term-hi); }
.k-cmd { color: var(--term-cmd); }

.term-cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.1em;
    vertical-align: -0.15em;
    margin-left: 2px;
    background: var(--c);
    animation: termBlink 1s steps(1) infinite;
}

@keyframes termBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.term-prompt {
    display: flex;
    align-items: baseline;
    margin-top: 2px;
}

.term-prompt[hidden] { display: none; }

.term-prompt-label {
    white-space: pre;
    color: var(--term-cmd);
}

.term-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    padding: 0;
    color: inherit;
    font: inherit;
    caret-color: var(--c);
    text-shadow: inherit;
}

.term-input::placeholder { color: inherit; opacity: 0.4; }

/* --- Static profile --- */
/* The section is clipped by .visually-hidden while the terminal runs. These rules only show once the section is
   un-hidden: by the noscript rule in index.html (JavaScript off) or while keyboard focus is inside it (WCAG 2.4.7). */
.term-profile { max-width: 72ch; }

.term-profile h2 {
    margin: 1.5rem 0 0.5rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--term-hi);
}

.term-profile h2:first-child { margin-top: 0; }
.term-profile p { margin: 0 0 0.5rem; color: var(--c); }
.term-profile .term-profile-identity { color: var(--term-hi); }
.term-profile .term-profile-location { color: var(--term-dim); }
.term-profile ul { list-style: none; margin: 0; padding: 0; }
.term-profile li { margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.term-profile a { color: var(--term-cmd); overflow-wrap: anywhere; }
.term-profile a:hover { color: var(--term-white); }
.term-profile-meta { color: var(--term-dim); }
.term-profile-label { color: var(--term-label); }

.term-profile.visually-hidden:focus-within {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
}

/* --- HUD --- */
.term-hud {
    flex: 0 1 18.75rem;
    min-width: 16.25rem;
    overflow-y: auto;
    border-left: 1px solid var(--term-rule);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.term-target {
    position: relative;
    flex: none;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--term-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.term-target-v,
.term-target-h {
    position: absolute;
    background: color-mix(in srgb, var(--c) 30%, transparent);
}

.term-target-v { left: 50%; top: 8%; bottom: 8%; width: 1px; }
.term-target-h { top: 50%; left: 8%; right: 8%; height: 1px; }

.term-target-ring {
    width: 46%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--c);
    border-radius: 50%;
}

.term-target-label,
.term-target-lock {
    position: absolute;
    font-size: 0.6875rem;
}

.term-target-label { top: 0.5rem; left: 0.625rem; }
.term-target-lock { bottom: 0.5rem; right: 0.625rem; }

.term-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 0.875rem;
    margin: 0;
}

.term-facts dt { color: var(--term-label); }
.term-facts dd { margin: 0; }

.term-hud-label {
    color: var(--term-label);
    margin-bottom: 0.625rem;
}

.term-assessment {
    border: 1px solid var(--c);
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    letter-spacing: 0.1em;
}

.term-unit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.625rem;
    border: 1px solid var(--term-border);
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0.02em;
}

.term-unit:hover { background: color-mix(in srgb, var(--c) 12%, transparent); color: inherit; }
.term-unit-name { font-size: 0.875rem; }
.term-unit-meta { font-size: 0.75rem; color: var(--term-label); }

.term-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.term-chip {
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    border: 1px solid var(--term-border);
    padding: 0.3125rem 0.5625rem;
    cursor: pointer;
}

.term-chip:hover { background: var(--c); color: var(--term-black); }

.term-exit {
    margin-top: auto;
    font-size: 0.75rem;
}

/* --- Footer --- */
/* The legal links (D-06): static HTML under the terminal, outside every script hook. */
.term-footer {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 0.75rem;
    padding: 0.25rem 1.25rem;
    border-top: 1px solid var(--term-rule);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--term-dim);
}

.term-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    color: var(--term-dim);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.term-footer a:hover { color: var(--term-white); }

/* --- Responsive: stack HUD under the screen and let the page scroll --- */
@media (max-width: 52rem) {
    .term { height: auto; min-height: 100dvh; overflow: visible; }
    .term-body { flex-direction: column; }
    .term-screen { flex: none; height: 70vh; height: 70dvh; padding: 1rem; }
    .term-hud { flex: none; min-width: 0; border-left: 0; border-top: 1px solid var(--term-rule); overflow: visible; }
    .term-target { width: min(100%, 16rem); align-self: center; }
    .term-scanlines, .term-sweep { position: fixed; }
}

/* --- Reduced motion: no sweep, steady cursor (typing is skipped in JS) --- */
@media (prefers-reduced-motion: reduce) {
    .term-sweep { display: none; }
    .term-cursor { animation: none; }
}