/* ==========================================================================
   Terminal pieces: each inner page gets its own command-line artifact.
   Work = process table and consoles, About = a README, Journey = git log,
   Stack = neofetch, Contact = a message prompt. Terminals stay dark in both
   themes, like the one on the homepage.
   ========================================================================== */

@layer site {

/* ---------- Palette inside terminals ---------- */
.term { --t-bg: #0b1118; --t-line: #1d2733; --t-text: #d6dee8; --t-dim: #7f8c9a; --t-hi: #ffffff; --t-sig: #ff5a4f; --t-ok: #3ddc84; --t-warn: #ffb547; --t-info: #5cc6f2; }
.c-ok { color: var(--t-ok, var(--go)); }
.c-warn { color: var(--t-warn, var(--caution)); }
.c-info { color: var(--t-info, var(--blue)); }
.c-err, .c-sig { color: var(--t-sig, var(--signal)); }
.c-dim { color: var(--t-dim, var(--ink-3)); }
.c-hi { color: var(--t-hi, var(--ink)); font-weight: 700; }
.term a { color: var(--t-hi); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 0.2em; }
.term a:hover { color: var(--t-sig); text-decoration-color: currentColor; }
.term-screen--auto { min-height: 0; max-height: none; padding-bottom: 1rem; }
.tl-out { padding-left: 1.15rem; }
.tl-gap { height: 0.6rem; }

/* Lines type in when the terminal scrolls into view (site JS). Without JS, or
   if it fails, everything shows after a short delay. */
.js [data-play]:not(.is-done) :is(.tl, .tl-row) { opacity: 0; animation: tl-fallback 0s linear 4s forwards; }
.js [data-play].is-playing :is(.tl, .tl-row) { animation: none; }
.js [data-play] :is(.tl, .tl-row).is-on { opacity: 1; transition: opacity 0.2s ease-out; }
@keyframes tl-fallback { to { opacity: 1; } }
.tl-cmd.is-typing::after { content: "▌"; color: var(--t-sig); margin-left: 1px; animation: caret 0.55s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .js [data-play] :is(.tl, .tl-row) { opacity: 1 !important; animation: none !important; }
}

/* A shell prompt line used outside terminals (headings, footers) */
.prompt { font-family: var(--font-data); font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.02em; }
.prompt::before { content: "$ "; color: var(--signal); }

/* ---------- Shared page header with a terminal on the right ---------- */
.thead { position: relative; border-bottom: 1px solid var(--rule); overflow: hidden; }
.thead::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 6.5rem 6.5rem;
  -webkit-mask-image: linear-gradient(180deg, #000 15%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 15%, transparent 95%);
}
.thead-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
}
.thead-copy { display: grid; gap: 1.25rem; align-content: center; min-width: 0; }
@media (max-width: 900px) { .thead-grid { grid-template-columns: 1fr; } }

/* ---------- Work: process table ---------- */
.ps { width: 100%; border-collapse: collapse; font-family: var(--font-data); font-size: 0.82rem; margin: 0.5rem 0 0.25rem; }
.ps th { text-align: left; font-weight: 400; color: var(--t-dim); padding: 0.2rem 0.9rem 0.35rem 0; white-space: nowrap; }
.ps td { padding: 0.32rem 0.9rem 0.32rem 0; white-space: nowrap; vertical-align: baseline; }
.ps td:last-child, .ps th:last-child { padding-right: 0; width: 100%; }
.ps tr.tl-row { cursor: pointer; }
.ps tr.tl-row:hover td { background: rgba(255, 90, 79, 0.08); }
.ps td a { color: var(--t-hi); text-decoration: none; }
.ps td a:hover { color: var(--t-sig); }
.ps .ps-what { color: var(--t-dim); white-space: normal; }
@media (max-width: 560px) { .ps .ps-what, .ps .ps-pid { display: none; } }

/* Work: project sections */
.proj-sec { padding-block: clamp(4rem, 9vw, 7rem); border-top: 1px solid var(--rule); scroll-margin-top: var(--nav-h); }
.proj-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.proj-sec--flip .proj-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.proj-sec--flip .proj-copy { order: 2; }
.proj-copy { display: grid; gap: 1.15rem; align-content: start; min-width: 0; }
.proj-media { position: relative; min-width: 0; display: grid; gap: 1rem; }
.proj-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.proj-bignum { font-family: var(--font-data); font-size: 0.78rem; color: var(--ink-3); }
.proj-note { font-size: 0.86rem; color: var(--ink-3); }
.shot-stack { position: relative; padding-bottom: 2.5rem; }
.shot-stack .shot { width: 88%; margin-left: auto; }
.shot-stack .term { position: absolute; left: 0; bottom: 0; width: min(78%, 30rem); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.6); }
@media (max-width: 900px) {
  .proj-grid, .proj-sec--flip .proj-grid { grid-template-columns: 1fr; }
  .proj-sec--flip .proj-copy { order: 0; }
  .shot-stack { padding-bottom: 0; }
  .shot-stack .shot { width: 100%; }
  .shot-stack .term { position: relative; width: 100%; margin-top: -2.5rem; }
}

/* ---------- About: README viewer ---------- */
.mdfile { border: 1px solid var(--rule-2); border-radius: 6px; background: var(--panel); overflow: hidden; box-shadow: var(--shadow); }
.mdfile-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--rule); background: var(--paper-2); font-family: var(--font-data); font-size: 0.72rem; color: var(--ink-3); }
.mdfile-bar b { color: var(--ink); font-weight: 400; }
.mdfile-body { padding: 1rem 0 1.5rem; counter-reset: md; }
.md { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); padding-right: clamp(1rem, 4vw, 2.5rem); counter-increment: md; }
.md::before {
  content: counter(md); text-align: right; padding-right: 1.1rem;
  font-family: var(--font-data); font-size: 0.72rem; line-height: 1.95rem; color: var(--ink-3); opacity: 0.6; user-select: none;
}
.md > * { min-width: 0; }
.md-blank { height: 1.5rem; }
.md-blank::before { line-height: 1.5rem; }
.md-tok { font-family: var(--font-data); color: var(--signal); font-weight: 400; margin-right: 0.45rem; }
.md-tok--dim { color: var(--ink-3); }
.md-h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-stretch: 75%; font-weight: 800; line-height: 1; letter-spacing: -0.01em; padding-top: 0.2rem; }
.md-h1 .md-tok { font-size: 0.55em; vertical-align: 0.35em; }
.md-h2 { font-size: clamp(1.45rem, 2.8vw, 1.9rem); font-stretch: 82%; font-weight: 760; line-height: 1.95rem; }
.md-h2 .md-tok { font-size: 0.72em; }
.md-p { color: var(--ink-2); line-height: 1.75; max-width: 44rem; padding-top: 0.2rem; }
.md-p strong { color: var(--ink); }
.md-p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 0.2em; }
.md-p a:hover { color: var(--signal); }
.md-q { border-left: 2px solid var(--signal); padding-left: 0.9rem; color: var(--ink); font-size: 1.05rem; line-height: 1.95rem; }
.md-task { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-right: 0.55rem; border: 1.5px solid var(--ink-3); border-radius: 3px; vertical-align: -0.12em; font-size: 0.7rem; color: var(--signal-ink); }
.md-task.is-done { background: var(--signal); border-color: var(--signal); }
.md-glyph { color: var(--signal); margin-right: 0.35rem; }
@media (max-width: 560px) {
  .md { grid-template-columns: 2.1rem minmax(0, 1fr); padding-right: 0.9rem; }
  .md::before { padding-right: 0.6rem; font-size: 0.64rem; }
}

/* ---------- Journey: git log ---------- */
.gitlog { position: relative; }
.gl { display: grid; grid-template-columns: 4rem minmax(0, 1fr); position: relative; }
.gl-graph { position: relative; }
.gl-graph i { position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 2px; }
.gl-graph .la { left: calc(1.25rem - 1px); background: var(--signal); }
.gl-graph .lb { left: calc(2.75rem - 1px); background: var(--blue); }
.gl-graph .la.is-top { top: 1.15rem; }
.gl-graph .la.is-end { bottom: auto; height: 1.15rem; }
.gl-dot { position: absolute; top: 0.72rem; width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 2.5px solid var(--paper); box-sizing: content-box; }
.gl-dot.on-a { left: calc(1.25rem - 0.475rem - 2.5px); background: var(--signal); }
.gl-dot.on-b { left: calc(2.75rem - 0.475rem - 2.5px); background: var(--blue); }
.gl-dot.is-head { box-shadow: 0 0 0 4px var(--signal-wash); }
.gl-bend { height: 2.25rem; }
.gl-bend svg { position: absolute; left: 0; top: 0; width: 4rem; height: 100%; overflow: visible; }
.gl-bend path { fill: none; stroke-width: 2; stroke-linecap: round; }
.gl-body { padding: 0.55rem 0 1.9rem; min-width: 0; }
.gl-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; font-family: var(--font-data); font-size: 0.8rem; }
.gl-hash { color: var(--caution); }
.gl-date { color: var(--ink-3); }
.gl-ref { padding: 0.05rem 0.4rem; border-radius: 3px; border: 1px solid; font-size: 0.7rem; }
.gl-ref--head { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.gl-ref--tag { color: var(--caution); border-color: color-mix(in srgb, var(--caution) 45%, transparent); }
.gl-ref--branch { color: var(--go); border-color: color-mix(in srgb, var(--go) 45%, transparent); }
.gl-msg { margin-top: 0.35rem; font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-stretch: 82%; font-weight: 760; line-height: 1.1; }
.gl-text { margin-top: 0.45rem; color: var(--ink-2); max-width: 42rem; }
.gl-cmd { padding: 0 0 1.25rem 4rem; }
.school--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .school--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .school--4 { grid-template-columns: 1fr; } }

/* ---------- Stack: neofetch ---------- */
.nf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: start; padding: 1.25rem 1.3rem 1.4rem; }
.nf-logo { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', monospace; font-size: clamp(0.75rem, 1.7vw, 1.2rem); line-height: 1.02; color: var(--t-hi); white-space: pre; user-select: none; }
.nf-info { font-family: var(--font-data); font-size: 0.85rem; line-height: 1.65; color: var(--t-text); min-width: 0; }
.nf-user { color: var(--t-sig); font-weight: 700; }
.nf-user b { color: var(--t-hi); }
.nf-rule { color: var(--t-dim); letter-spacing: 0.05em; }
.nf-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; }
.nf-k { color: var(--t-sig); font-weight: 700; }
.nf-colors { display: flex; margin-top: 0.9rem; }
.nf-colors i { width: 1.6rem; height: 1rem; }
@media (max-width: 640px) {
  .nf { grid-template-columns: 1fr; }
  .nf-row { grid-template-columns: 6.2rem minmax(0, 1fr); }
  .nf-info { font-size: 0.8rem; }
}
.stack-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); align-items: start; }
.stack-cols .cl li { flex-wrap: wrap; }
.stack-cols .cl-lead { display: none; }
.stack-cols .cl-resp { text-align: left; max-width: none; flex-basis: 100%; font-size: 0.93rem; }
@media (max-width: 960px) { .stack-cols { grid-template-columns: 1fr; } }

/* ---------- Contact: message prompt ---------- */
.compose .term-head { gap: 0.75rem; }
.cf { padding: 0.35rem 1.1rem 0.4rem; display: grid; gap: 0.2rem; }
.cf-field { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); gap: 0.2rem 0.75rem; align-items: baseline; padding: 0.55rem 0; border-bottom: 1px dashed var(--t-line); }
.cf-q { color: var(--t-dim); font-family: var(--font-data); font-size: 0.8rem; white-space: nowrap; }
.cf-q b { color: var(--t-info); font-weight: 400; margin-right: 0.35rem; }
.cf-in {
  width: 100%; background: transparent; border: 0; outline: none; color: var(--t-hi);
  font-family: var(--font-data); font-size: 0.92rem; line-height: 1.5; padding: 0.15rem 0; caret-color: var(--t-sig);
}
.cf-in::placeholder { color: #4d5a68; }
textarea.cf-in { resize: vertical; min-height: 7.5rem; }
.cf-field:focus-within { border-bottom-color: var(--t-sig); }
.cf-field:focus-within .cf-q { color: var(--t-hi); }
.cf-count { grid-column: 2; justify-self: end; font-family: var(--font-data); font-size: 0.68rem; color: var(--t-dim); }
.cf-opts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-family: var(--font-data); font-size: 0.85rem; }
.cf-opt { position: relative; cursor: pointer; color: var(--t-dim); }
.cf-opt input { position: absolute; opacity: 0; }
.cf-opt span::before { content: "( ) "; white-space: pre; }
.cf-opt input:checked + span { color: var(--t-hi); }
.cf-opt input:checked + span::before { content: "(•) "; color: var(--t-sig); }
.cf-opt input:focus-visible + span { outline: 1px dashed var(--t-sig); outline-offset: 2px; }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 0.9rem 0 0.3rem; }
.cf-send {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 4px;
  background: var(--t-sig); color: #1a0503; font-family: var(--font-data); font-size: 0.85rem; font-weight: 700;
  transition: filter 0.18s, transform 0.12s;
}
.cf-send:hover { filter: brightness(1.08); }
.cf-send:active { transform: translateY(1px); }
.cf-hint { font-family: var(--font-data); font-size: 0.72rem; color: var(--t-dim); }
.cf-bar { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 1.1rem; border-top: 1px solid var(--t-line); font-family: var(--font-data); font-size: 0.72rem; color: var(--t-dim); }
.cf-bar .is-ready { color: var(--t-ok); }
.cf-errors { margin: 0.25rem 0 0.35rem; }
@media (max-width: 560px) {
  .cf-field { grid-template-columns: 1fr; }
  .cf-count { grid-column: 1; }
}

/* ---------- Writing: ls listing ---------- */
.ls { list-style: none; font-family: var(--font-data); font-size: 0.82rem; }
.ls li { display: grid; grid-template-columns: 6.6rem 4.2rem 6.6rem minmax(0, 1fr); gap: 0.75rem; padding: 0.4rem 0; border-top: 1px dashed var(--t-line); align-items: baseline; }
.ls li:first-child { border-top: 0; }
.ls .ls-perm { color: var(--t-dim); }
.ls .ls-min { color: var(--t-warn); text-align: right; }
.ls .ls-date { color: var(--t-dim); }
.ls a { font-family: var(--font-sans); font-size: 1rem; font-weight: 650; color: var(--t-hi); text-decoration: none; line-height: 1.35; }
.ls a:hover { color: var(--t-sig); }
.ls .ls-ex { grid-column: 4; color: var(--t-dim); font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 640px) {
  .ls li { grid-template-columns: 4rem 6.2rem minmax(0, 1fr); }
  .ls .ls-perm { display: none; }
  .ls a, .ls .ls-ex { grid-column: 1 / -1; }
}

/* ---------- Status: service list ---------- */
.svc { width: 100%; border-collapse: collapse; font-family: var(--font-data); font-size: 0.82rem; }
.svc td { padding: 0.45rem 1rem 0.45rem 0; border-top: 1px dashed var(--t-line); vertical-align: baseline; white-space: nowrap; }
.svc tr:first-child td { border-top: 0; }
.svc td:first-child { width: 1.2rem; padding-right: 0.5rem; }
.svc .svc-name { color: var(--t-hi); white-space: normal; width: 100%; }
@media (max-width: 640px) { .svc .svc-up { display: none; } .svc td { white-space: normal; } }

/* ---------- Writing: method strip ---------- */
.method-strip { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--signal); counter-reset: step; }
.method-strip li { padding: 1rem 1.1rem 0 0; counter-increment: step; }
.method-strip li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-data); font-size: 0.72rem; color: var(--signal); margin-bottom: 0.4rem; }
.method-strip b { display: block; font-size: 1.12rem; font-stretch: 85%; font-weight: 750; margin-bottom: 0.3rem; }
.method-strip span { color: var(--ink-2); font-size: 0.93rem; }
@media (max-width: 900px) { .method-strip { grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; } }
@media (max-width: 520px) { .method-strip { grid-template-columns: 1fr; } }

/* ---------- Auth: a login prompt line ---------- */
.auth-cmd { display: block; margin-bottom: 0.9rem; }

} /* end @layer site */