/* ════════════════════════════════════════════════════════════════════════════
   TERMINAL skin — amber field-terminal / HUD.

   Loaded ONLY when a site's `site.skin` setting is "terminal" (see App.razor), and every
   rule is scoped under [data-skin="terminal"], so this file cannot affect another site
   even if it were served by mistake.

   Colours derive from the site's own theme tokens (--accent-gold, --bg-deep, --headline),
   so the palette stays tunable from Admin → Appearance rather than being frozen here.
   ════════════════════════════════════════════════════════════════════════════ */

[data-skin="terminal"] {
    /* Alpha ramp on the site accent — the design's rgba(240,170,40,α) values. */
    --t-a03: color-mix(in srgb, var(--accent-gold) 3%,  transparent);
    --t-a04: color-mix(in srgb, var(--accent-gold) 4%,  transparent);
    --t-a05: color-mix(in srgb, var(--accent-gold) 5%,  transparent);
    --t-a06: color-mix(in srgb, var(--accent-gold) 6%,  transparent);
    --t-a07: color-mix(in srgb, var(--accent-gold) 7%,  transparent);
    --t-a08: color-mix(in srgb, var(--accent-gold) 8%,  transparent);
    --t-a16: color-mix(in srgb, var(--accent-gold) 16%, transparent);
    --t-a20: color-mix(in srgb, var(--accent-gold) 20%, transparent);
    --t-a22: color-mix(in srgb, var(--accent-gold) 22%, transparent);
    --t-a25: color-mix(in srgb, var(--accent-gold) 25%, transparent);
    --t-a28: color-mix(in srgb, var(--accent-gold) 28%, transparent);
    --t-a30: color-mix(in srgb, var(--accent-gold) 30%, transparent);
    --t-a34: color-mix(in srgb, var(--accent-gold) 34%, transparent);
    --t-a35: color-mix(in srgb, var(--accent-gold) 35%, transparent);
    --t-a40: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    --t-a42: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    --t-a45: color-mix(in srgb, var(--accent-gold) 45%, transparent);
    --t-a50: color-mix(in srgb, var(--accent-gold) 50%, transparent);
    --t-a55: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    --t-a60: color-mix(in srgb, var(--accent-gold) 60%, transparent);
    --t-a70: color-mix(in srgb, var(--accent-gold) 70%, transparent);
    --t-a72: color-mix(in srgb, var(--accent-gold) 72%, transparent);
    --t-a75: color-mix(in srgb, var(--accent-gold) 75%, transparent);
    --t-a78: color-mix(in srgb, var(--accent-gold) 78%, transparent);
    --t-a80: color-mix(in srgb, var(--accent-gold) 80%, transparent);
    --t-a90: color-mix(in srgb, var(--accent-gold) 90%, transparent);

    --t-ok:     var(--success, #8fd07a);
    --t-alert:  var(--danger,  #e0603a);
    --t-bright: var(--headline);
    --t-shell:  1180px;
}

[data-skin="terminal"] body,
body[data-skin="terminal"] {
    background: var(--bg-deep);
    font-family: var(--font-body);
    color: var(--accent-gold);
}
[data-skin="terminal"] ::selection { background: var(--accent-gold); color: var(--bg-deep); }
[data-skin="terminal"] a { color: inherit; text-decoration: none; }
[data-skin="terminal"] input { font-family: inherit; }

/* ── Keyframes ─────────────────────────────────────────────────────────────── */
@keyframes gtblink { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }
@keyframes gtscan  { 0% { transform:translateY(-4px) } 100% { transform:translateY(100vh) } }
@keyframes gtflick { 0%,100% { opacity:1 } 92% { opacity:1 } 93% { opacity:.82 } 94% { opacity:1 } }
@keyframes gtpulse { 0%,100% { opacity:.35 } 50% { opacity:1 } }
@keyframes gtspin  { to { transform:rotate(360deg) } }

/* ── Shell + fixed overlays ────────────────────────────────────────────────── */
.t-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, var(--bg), var(--bg-deep) 70%);
    animation: gtflick 7s infinite;
}
.t-scanlines, .t-vignette, .t-sweep { position: fixed; pointer-events: none; }
.t-scanlines {
    inset: 0; z-index: 60;
    background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.32) 3px);
    mix-blend-mode: multiply;
}
.t-vignette { inset: 0; z-index: 59; box-shadow: inset 0 0 240px 40px rgba(0,0,0,.85); }
.t-sweep {
    left: 0; right: 0; top: 0; height: 56px; z-index: 58;
    background: linear-gradient(180deg, var(--t-a08), transparent);
    animation: gtscan 6s linear infinite;
}
.t-inner { position: relative; z-index: 10; max-width: var(--t-shell); margin: 0 auto; padding: 0 32px; }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.t-nav {
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 22px 0 18px;
    border-bottom: 1px solid var(--t-a28);
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg-deep) 82%, transparent);
    backdrop-filter: blur(4px);
}
.t-brand { font-size: 12px; letter-spacing: .16em; color: var(--t-a90); white-space: nowrap; }
.t-brand .sep { color: var(--t-a40); }
.t-brand .ver { color: var(--t-a35); }
.t-navlinks { display: flex; gap: 26px; font-size: 11px; letter-spacing: .14em; color: var(--t-a60); }
.t-navlinks a { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .15s, border-color .15s; }
.t-navlinks a:hover, .t-navlinks a.active { color: var(--t-bright); border-bottom-color: var(--t-bright); }
.t-navlinks a.cta { color: var(--accent-gold); }
.t-clock { font-size: 11px; letter-spacing: .1em; color: var(--t-a55); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.t-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-ok); animation: gtpulse 1.6s infinite; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.t-hero { display: grid; grid-template-columns: 1fr 340px; gap: 48px; padding: 56px 0 70px; align-items: start; }
.t-boot { font-size: 12.5px; line-height: 2.1; color: var(--t-a60); }
.t-boot .ok  { color: var(--t-ok); }
.t-boot .red { color: var(--t-alert); }
.t-title {
    margin: 34px 0 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(56px, 11vw, 132px);
    line-height: .86; letter-spacing: .01em;
    color: var(--t-bright);
    text-shadow: 0 0 40px var(--t-a35);
}
.t-synopsis { max-width: 560px; margin: 24px 0 0; font-size: 15px; line-height: 1.8; color: var(--t-a80); }
.t-form {
    margin-top: 36px; display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--t-a42); background: var(--t-a05);
    padding: 15px 18px; max-width: 540px;
}
.t-form .prompt { color: var(--t-a60); font-size: 14px; white-space: nowrap; }
.t-form input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--t-bright); font-size: 14px; caret-color: var(--t-bright);
}
.t-form input::placeholder { color: var(--t-a45); }
.t-caret { width: 9px; height: 18px; background: var(--t-bright); animation: gtblink 1.1s step-end infinite; flex: 0 0 auto; }
.t-formmeta { margin-top: 14px; font-size: 11px; letter-spacing: .12em; color: var(--t-a45); }
.t-formmsg { margin-top: 12px; font-size: 12px; letter-spacing: .08em; }
.t-formmsg.ok  { color: var(--t-ok); }
.t-formmsg.err { color: var(--t-alert); }

/* ── HUD panel ─────────────────────────────────────────────────────────────── */
.t-hud { border: 1px solid var(--t-a30); background: var(--t-a03); padding: 20px; }
.t-hud-head {
    display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .16em;
    color: var(--t-a55); border-bottom: 1px solid var(--t-a20); padding-bottom: 12px;
}
.t-hud-head .live { color: var(--t-alert); }
.t-radar { position: relative; height: 240px; margin-top: 6px; display: flex; align-items: center; justify-content: center; }
.t-radar .ring { position: absolute; border-radius: 50%; }
.t-radar .r1 { width: 220px; height: 220px; border: 1px solid var(--t-a22); }
.t-radar .r2 { width: 150px; height: 150px; border: 1px solid var(--t-a28); }
.t-radar .r3 { width: 80px;  height: 80px;  border: 1px solid var(--t-a34); }
.t-radar .cross-h { position: absolute; width: 220px; height: 1px; background: var(--t-a20); }
.t-radar .cross-v { position: absolute; height: 220px; width: 1px; background: var(--t-a20); }
.t-radar .sweep {
    position: absolute; width: 220px; height: 220px; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--t-a28), transparent 30%);
    animation: gtspin 4s linear infinite;
}
.t-radar .blip-a {
    position: absolute; left: 60%; top: 38%; width: 8px; height: 8px; border-radius: 50%;
    background: var(--t-alert); box-shadow: 0 0 10px var(--t-alert); animation: gtpulse 1.4s infinite;
}
.t-radar .blip-b { position: absolute; left: 42%; top: 60%; width: 6px; height: 6px; border-radius: 50%; background: var(--t-ok); }
.t-readout { font-size: 10.5px; line-height: 1.9; color: var(--t-a70); border-top: 1px solid var(--t-a20); padding-top: 12px; }
.t-readout > div { display: flex; justify-content: space-between; gap: 12px; }
.t-readout .v     { color: var(--t-bright); text-align: right; }
.t-readout .v.red { color: var(--t-alert); }
.t-readout .v.ok  { color: var(--t-ok); }

/* ── Sections ──────────────────────────────────────────────────────────────── */
.t-section { padding: 64px 0; border-top: 1px solid var(--t-a28); }
.t-eyebrow-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.t-eyebrow { font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .3em; color: var(--t-a50); }
.t-rule { flex: 1; height: 1px; background: var(--t-a20); }
.t-more { font-size: 11px; letter-spacing: .1em; color: var(--t-a55); }
.t-more:hover { color: var(--t-bright); }
.t-h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(32px, 5vw, 52px); line-height: 1; margin: 14px 0 0; color: var(--t-bright); }
.t-lead { max-width: 640px; margin: 20px 0 0; font-size: 14.5px; line-height: 1.8; color: var(--t-a75); }

/* File cards */
.t-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px; }
.t-card { border: 1px solid var(--t-a30); background: var(--t-a03); display: block; transition: border-color .15s, background .15s; }
.t-card:hover { border-color: var(--t-a70); background: var(--t-a07); }
/* A card with no link isn't interactive, so don't imply it is. */
.t-card-static { cursor: default; }
.t-card-static:hover { border-color: var(--t-a30); background: var(--t-a03); }
.t-card-img {
    height: 150px; display: flex; align-items: flex-end; padding: 12px;
    font-size: 10px; letter-spacing: .2em; color: var(--t-a50);
    background-image: repeating-linear-gradient(45deg, var(--t-a08) 0 6px, transparent 6px 12px);
    background-size: cover; background-position: center;
    border-bottom: 1px solid var(--t-a20);
}
/* Real artwork: drop the stripes and tint it to sit inside the amber palette. */
.t-card-img.has-img {
    background-color: var(--bg-deep);
    background-repeat: no-repeat;
    filter: saturate(.85) contrast(1.05);
}
.t-card-body { padding: 18px 18px 20px; }
.t-card-file { font-size: 10px; letter-spacing: .2em; color: var(--t-a50); }
.t-card-title { font-family: var(--font-head); font-weight: 600; font-size: 22px; margin: 6px 0 8px; color: var(--t-bright); }
.t-card-body p { font-size: 12.5px; line-height: 1.7; color: var(--t-a70); margin: 0; }
.t-card-go { margin-top: 14px; font-size: 11px; letter-spacing: .1em; color: var(--accent-gold); }

/* Post list */
.t-posts { border: 1px solid var(--t-a25); }
.t-post {
    display: grid; grid-template-columns: 130px 1fr 130px; gap: 20px; align-items: center;
    padding: 18px 22px; border-bottom: 1px solid var(--t-a16); transition: background .15s;
}
.t-post:last-child { border-bottom: none; }
.t-post:hover { background: var(--t-a06); }
.t-post .date  { font-size: 11px; letter-spacing: .1em; color: var(--t-a50); }
.t-post .title { font-family: var(--font-head); font-weight: 500; font-size: 19px; color: var(--t-bright); }
.t-post .tag   { justify-self: end; font-size: 10px; letter-spacing: .14em; color: var(--t-a55); border: 1px solid var(--t-a30); padding: 4px 9px; }
.t-empty { padding: 26px 22px; font-size: 12.5px; color: var(--t-a55); }

/* ── Library (book series + books) ─────────────────────────────────────────── */
.t-series { margin-top: 38px; }
.t-series + .t-series { margin-top: 48px; }
.t-series-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.t-series-name {
    font-family: var(--font-head); font-weight: 600; font-size: 24px;
    color: var(--t-bright); letter-spacing: .01em;
}
.t-series-count { font-size: 10px; letter-spacing: .2em; color: var(--t-a50); white-space: nowrap; }
.t-series-desc { max-width: 640px; margin: 10px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--t-a70); }

/* Cards stay a readable width whatever the count — one book shouldn't stretch full-bleed. */
.t-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
    gap: 22px;
    margin-top: 22px;
}
.t-book {
    border: 1px solid var(--t-a30);
    background: var(--t-a03);
    display: flex; flex-direction: column;
    transition: border-color .15s, background .15s;
}
.t-book:hover { border-color: var(--t-a70); background: var(--t-a07); }
.t-book-cover {
    aspect-ratio: 2/3;
    background-color: var(--bg-deep);
    background-image: repeating-linear-gradient(45deg, var(--t-a08) 0 6px, transparent 6px 12px);
    background-size: cover; background-position: center;
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px;
    border-bottom: 1px solid var(--t-a20);
}
.t-book-cover-label { font-size: 10px; letter-spacing: .2em; color: var(--t-a50); }
.t-book-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.t-book-vol { font-size: 10px; letter-spacing: .2em; color: var(--t-a50); }
.t-book-title {
    font-family: var(--font-head); font-weight: 600; font-size: 20px; line-height: 1.15;
    margin: 5px 0 0; color: var(--t-bright);
}
.t-book-sub { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-a60); margin-top: 5px; }
.t-book-desc {
    font-size: 12.5px; line-height: 1.65; color: var(--t-a70); margin: 9px 0 0;
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.t-formats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.t-format {
    font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--t-a60); border: 1px solid var(--t-a30); padding: 3px 7px;
}
.t-book-go { margin-top: auto; padding-top: 14px; font-size: 11px; letter-spacing: .1em; color: var(--accent-gold); }
.t-book-go:hover { color: var(--t-bright); }
/* Shown instead of a buy link when a book has no store URL yet. */
.t-book-pending { margin-top: auto; padding-top: 14px; font-size: 10px; letter-spacing: .14em; color: var(--t-ok); }

/* Dossier (kept for the About page / other skins' reuse) */
.t-dossier { display: grid; grid-template-columns: 260px 1fr; gap: 40px; margin-top: 24px; align-items: start; }
.t-portrait {
    width: 100%; aspect-ratio: 3/4; border: 1px solid var(--t-a35);
    background-image: repeating-linear-gradient(45deg, var(--t-a08) 0 6px, transparent 6px 12px);
    background-size: cover; background-position: center;
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px;
    font-size: 10px; letter-spacing: .2em; color: var(--t-a50);
}
.t-stats { margin-top: 14px; font-size: 10.5px; line-height: 2; color: var(--t-a65, var(--t-a70)); }
.t-stats > div { display: flex; justify-content: space-between; gap: 12px; }
.t-dossier h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(28px, 4vw, 44px); line-height: 1.02; margin: 0 0 18px; color: var(--t-bright); }
.t-bio { max-width: 620px; font-size: 14.5px; line-height: 1.85; color: var(--t-a78); margin: 0 0 14px; }
.t-btns { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.t-btn { border: 1px solid var(--t-a50); padding: 12px 20px; font-size: 12px; letter-spacing: .1em; color: var(--t-bright); transition: background .15s; }
.t-btn:hover { background: var(--t-a08); }
.t-btn.ghost { border-color: var(--t-a30); color: var(--t-a70); }

/* Enlist */
.t-enlist { padding: 80px 0 40px; border-top: 1px solid var(--t-a28); }
.t-cta { border: 1px solid var(--t-a40); background: var(--t-a04); padding: 52px 44px; text-align: center; position: relative; overflow: hidden; }
.t-cta-lines {
    position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 3px, var(--t-a04) 4px);
}
.t-cta-in { position: relative; }
.t-cta-eyebrow { font-size: 11px; letter-spacing: .3em; color: var(--t-a55); }
.t-cta h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(34px, 6vw, 64px); line-height: .95; margin: 16px 0 0; color: var(--t-bright); }
.t-cta p { max-width: 520px; margin: 18px auto 0; font-size: 14px; line-height: 1.7; color: var(--t-a72); }
.t-cta form { margin: 30px auto 0; display: flex; align-items: center; gap: 14px; border: 1px solid var(--t-a50); background: color-mix(in srgb, var(--bg-deep) 50%, transparent); padding: 16px 20px; max-width: 520px; }
.t-transmit {
    background: var(--accent-gold); color: var(--bg-deep); border: none;
    font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .12em;
    padding: 10px 18px; cursor: pointer; transition: background .15s; flex: 0 0 auto;
}
.t-transmit:hover:not(:disabled) { background: var(--t-bright); }
.t-transmit:disabled { opacity: .6; cursor: default; }

/* Footer */
.t-footer {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
    padding: 34px 4px 40px; font-size: 11px; letter-spacing: .12em; color: var(--t-a45);
}
.t-footer a:hover { color: var(--t-bright); }
.t-footer-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ── Inner pages (posts, about, …) rendered inside the terminal chrome ─────── */
.t-page { padding: 44px 0 64px; }
[data-skin="terminal"] .post-content { color: var(--t-a80); }
[data-skin="terminal"] .post-content h2,
[data-skin="terminal"] .post-content h3 { color: var(--t-bright); font-family: var(--font-head); }
[data-skin="terminal"] .post-content a { color: var(--accent-gold); border-bottom: 1px solid var(--t-a30); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .t-hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 50px; }
    .t-hud { display: none; }             /* decorative; drop it rather than shrink it */
    .t-cards { grid-template-columns: 1fr; }
    .t-dossier { grid-template-columns: 1fr; gap: 26px; }
    .t-portrait { max-width: 260px; }
    .t-nav { flex-wrap: wrap; gap: 12px; }
    .t-clock { order: 3; }
}
@media (max-width: 620px) {
    .t-inner { padding: 0 18px; }
    .t-books { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .t-series-head { flex-wrap: wrap; gap: 8px; }
    .t-post { grid-template-columns: 1fr auto; gap: 6px 12px; }
    .t-post .date  { grid-column: 1; }
    .t-post .tag   { grid-column: 2; grid-row: 1; }
    .t-post .title { grid-column: 1 / -1; }
    .t-cta { padding: 36px 22px; }
    .t-form { flex-wrap: wrap; }
    .t-navlinks { gap: 14px; }
}

/* ── Reduced motion: kill the CRT theatre, keep the layout ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .t-shell, .t-sweep, .t-radar .sweep, .t-dot, .t-radar .blip-a, .t-caret { animation: none !important; }
    .t-sweep { display: none; }
}