/* term.css — phosphor terminal for rishablodha.com */

/* JetBrains Mono, self-hosted — the site makes zero external requests */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jbmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jbmono-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/jbmono-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jbmono-400i.woff2") format("woff2");
}

:root {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- phosphor palettes ---- */
body[data-theme="green"] { --bg:#0a0f0a; --fg:#39ff6e; --dim:#3aa860; --accent:#c8ffdb; --accent2:#6ee7ff; --voice:#8be9c8; --glow:rgba(57,255,110,.4); --bgglow:rgba(57,255,110,.09); }
body[data-theme="amber"] { --bg:#141006; --fg:#ffb000; --dim:#b08428; --accent:#ffe4a8; --accent2:#ff6b35; --voice:#ffd27a; --glow:rgba(255,176,0,.35); --bgglow:rgba(255,176,0,.09); }
body[data-theme="mono"]  { --bg:#0b0b0d; --fg:#e6e6e6; --dim:#8a8a94; --accent:#ffffff; --accent2:#b7c4ff; --voice:#cfd8ff; --glow:rgba(230,230,230,.28); --bgglow:rgba(183,196,255,.07); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 50% -140px, var(--bgglow), transparent 70%),
    radial-gradient(900px 500px at 85% 115%, var(--bgglow), transparent 75%),
    var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: clamp(13.5px, 0.55vw + 12px, 16.5px);
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--fg); color: var(--bg); }

/* ---- layout: output scrolls, prompt pinned ---- */
#screen {
  height: 100dvh;
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 1rem clamp(0.9rem, 3vw, 2rem) 0.6rem;
}
#scrollback {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: .6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--dim) transparent;
  overscroll-behavior: contain;
}
#scrollback::-webkit-scrollbar { width: 8px; }
#scrollback::-webkit-scrollbar-thumb { background: var(--dim); border-radius: 4px; }

.line {
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 1.5em;
  text-shadow: none;
}
body.crt .line { text-shadow: 0 0 7px var(--glow); }

.dim    { color: var(--dim); }
.accent { color: var(--accent); }
.err    { color: #ff6b6b; text-shadow: none; }
.ok     { color: var(--accent); }
.ach    { color: #ffd76a; text-shadow: 0 0 8px rgba(255, 215, 106, .35); }
.voice { color: var(--voice); font-style: italic; }
.boot   { color: var(--dim); }
.echo   { color: var(--fg); opacity: .85; }
.cmd    { color: var(--accent); }
.file   { color: var(--accent); font-weight: 700; }
.rule   { color: var(--dim); }
.link   { color: var(--accent); text-decoration: underline; }
.banner {
  white-space: pre;
  overflow-x: auto;
  word-break: normal;
  font-size: clamp(9px, 2.7vw, 1em);
  line-height: 1.25;
  scrollbar-width: none;
  text-shadow: none !important;
}
.banner::-webkit-scrollbar { display: none; }

/* gradient-lit text (logo, prompt) */
.gradient {
  width: fit-content;
  max-width: 100%;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, var(--fg) 5%, var(--accent2) 55%, var(--accent) 95%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---- pinned logo header ---- */
#logo { flex: none; }
#logorule {
  height: 1px;
  margin-top: .45rem;
  background: linear-gradient(90deg, var(--fg), var(--accent2) 40%, transparent 95%);
  opacity: .3;
}

.ps1 { color: var(--accent); font-weight: 700; }
.ps1.composer { color: var(--voice); }
.cmdline .ps1 {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, var(--fg), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
}
.cmdline { color: var(--fg); }

/* ---- markdown output ---- */
.md p { margin: 0 0 .9em; }
.md h2, .md h3 {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  width: fit-content;
  margin: 1.4em 0 .5em;
  padding-bottom: .25em;
  border-bottom: 1px dashed var(--dim);
  font-size: 1.05em;
}
.md h3 { border-bottom: none; font-size: 1em; }
.md blockquote {
  margin: 1em 0;
  padding: .1em 0 .1em 1em;
  border-left: 2px solid var(--accent);
  color: var(--accent);
  font-style: italic;
}
.md ul, .md ol { margin: 0 0 .9em; padding-left: 1.6em; }
.md code {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  padding: .05em .35em;
  border-radius: 3px;
}
.md a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.md table { border-collapse: collapse; margin: 0 0 1em; font-size: .92em; }
.md th, .md td { border: 1px solid var(--dim); padding: .25em .8em; text-align: left; }
.md th { color: var(--accent); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.md hr { border: none; border-top: 1px dashed var(--dim); margin: 1.2em 0; }

/* ---- input row ---- */
#inputrow {
  display: flex;
  align-items: baseline;
  border-top: 1px dashed color-mix(in srgb, var(--dim) 60%, transparent);
  margin-top: .5rem;
  padding-top: .55rem;
  position: relative;
  flex: none;
}
#ps1 { flex: none; white-space: pre; }
#typedwrap { white-space: pre-wrap; word-break: break-all; min-height: 1.5em; }
#ghost { color: var(--dim); opacity: .75; }
#ghost.flicker { animation: ghostflicker .32s steps(4) 1; }
#cursor {
  display: inline-block;
  width: .62ch;
  height: 1.15em;
  background: var(--fg);
  vertical-align: text-bottom;
  animation: blink 1.06s steps(1) infinite;
}
#kbd {
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 2px;
  opacity: 0;
  border: none;
  background: none;
  color: transparent;
  font-size: 16px; /* prevents iOS zoom */
  pointer-events: none;
}

@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes ghostflicker { 0% { opacity: .9; } 40% { opacity: .15; } 70% { opacity: .55; } 100% { opacity: .75; } }

/* ---- chips / quick actions ---- */
#chips {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .5rem 0 .55rem;
}
.chip {
  font-family: var(--mono);
  font-size: .78rem;
  padding: .26rem .75rem;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--dim);
  border-radius: 999px;
  cursor: pointer;
  opacity: .85;
  touch-action: manipulation;
}
.chip:hover, .chip:focus-visible { border-color: var(--fg); color: var(--accent); opacity: 1; outline: none; }

/* gradient-clipped text renders invisible where unsupported — fall back to solid */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gradient, .cmdline .ps1, .md h2, .md h3 {
    color: var(--accent);
    -webkit-text-fill-color: initial;
    background: none;
  }
}

/* ---- CRT overlay ---- */
#crt { position: fixed; inset: 0; pointer-events: none; z-index: 60; display: none; }
body.crt #crt { display: block; }
#crt::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
#crt::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.38) 100%);
  animation: crtflicker 3.4s infinite;
}
@keyframes crtflicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: .86; }
  94% { opacity: 1; }
  97% { opacity: .93; }
  98% { opacity: 1; }
}

/* ---- matrix overlay ---- */
#matrix {
  position: fixed; inset: 0;
  z-index: 80;
  background: #000;
}

/* ---- small screens ---- */
@media (max-width: 640px) {
  #screen { padding: .7rem .8rem .4rem; }
  .line { font-size: .92rem; }
  .chip { min-height: 44px; padding: .55rem 1rem; } /* 44px touch target */
}

/* ---- reduced motion: steady cursor, no flicker ---- */
@media (prefers-reduced-motion: reduce) {
  #cursor { animation: none; }
  #crt::after { animation: none; }
  #ghost.flicker { animation: none; }
}