/**
 * SYS.QAGG.TERM — 3270-ish phosphor shell
 * Fonts: self-hosted IBM Plex Mono only (no CDN)
 */

/* -------------------------------------------------------------------------- */
/* Fonts                                                                      */
/* -------------------------------------------------------------------------- */

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/term/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/term/ibm-plex-mono-700.woff2") format("woff2");
}

/* -------------------------------------------------------------------------- */
/* Phosphor tokens (default green)                                            */
/* -------------------------------------------------------------------------- */

:root,
#term-root.term-phosphor-green,
html.term-phosphor-green {
  --term-bg: #0a0f0a;
  --term-fg: #33ff66;
  --term-fg-dim: #1a9940;
  --term-fg-bright: #66ff99;
  --term-glow: rgba(51, 255, 102, 0.35);
  --term-selection-bg: #1a6633;
  --term-selection-fg: #ccffdd;
  --term-oia-bg: #33ff66;
  --term-oia-fg: #0a0f0a;
  --term-scanline: rgba(0, 0, 0, 0.14);
  --term-grain: rgba(51, 255, 102, 0.04);
  --term-phosphor-name: "GREEN";
}

#term-root.term-phosphor-amber,
html.term-phosphor-amber {
  --term-bg: #0f0c08;
  --term-fg: #ffb000;
  --term-fg-dim: #996600;
  --term-fg-bright: #ffcc44;
  --term-glow: rgba(255, 176, 0, 0.35);
  --term-selection-bg: #664400;
  --term-selection-fg: #ffe8aa;
  --term-oia-bg: #ffb000;
  --term-oia-fg: #0f0c08;
  --term-scanline: rgba(0, 0, 0, 0.16);
  --term-grain: rgba(255, 176, 0, 0.045);
  --term-phosphor-name: "AMBER";
}

#term-root.term-phosphor-white,
html.term-phosphor-white {
  --term-bg: #0c0c0e;
  --term-fg: #e8e8ec;
  --term-fg-dim: #888896;
  --term-fg-bright: #ffffff;
  --term-glow: rgba(232, 232, 236, 0.2);
  --term-selection-bg: #3a3a48;
  --term-selection-fg: #ffffff;
  --term-oia-bg: #e8e8ec;
  --term-oia-fg: #0c0c0e;
  --term-scanline: rgba(0, 0, 0, 0.2);
  --term-grain: rgba(232, 232, 236, 0.035);
  --term-phosphor-name: "WHITE";
}

/* -------------------------------------------------------------------------- */
/* Reset / base                                                               */
/* -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #000;
  color: var(--term-fg, #33ff66);
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Code", "Courier New", monospace;
  /* JS sets --term-font-size / --term-line-height to fill the viewport */
  font-size: var(--term-font-size, 16px);
  line-height: var(--term-line-height, 1.28);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* -------------------------------------------------------------------------- */
/* Root shell                                                                 */
/* -------------------------------------------------------------------------- */

#term-root {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100dvh;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  background: var(--term-bg);
  color: var(--term-fg);
  overflow: hidden;
  /* phosphor bloom — soft halo like excited CRT phosphors */
  text-shadow:
    0 0 1px var(--term-fg),
    0 0 0.04em var(--term-glow),
    0 0 0.12em var(--term-glow);
  font-size: var(--term-font-size, 16px);
  line-height: var(--term-line-height, 1.28);
}

/*
 * CRT glass stack (pseudo-elements — no extra DOM):
 *   ::before  vignette + tube edge + faint center glow
 *   ::after   film grain (SVG noise) + horizontal scanlines + slow roll
 */
#term-root::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    /* soft tube glow in the middle */
    radial-gradient(
      ellipse 80% 70% at 50% 45%,
      var(--term-grain) 0%,
      transparent 55%
    ),
    /* dark vignette / bezel falloff */
    radial-gradient(
      ellipse at center,
      transparent 42%,
      rgba(0, 0, 0, 0.22) 72%,
      rgba(0, 0, 0, 0.55) 100%
    );
}

#term-root::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  /* fractal noise tile + scanlines (data SVG; img-src allows data:) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E"),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      var(--term-scanline) 2px,
      var(--term-scanline) 3px
    ),
    /* faint aperture-grille (vertical) */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 3px,
      rgba(0, 0, 0, 0.06) 3px,
      rgba(0, 0, 0, 0.06) 4px
    );
  background-size:
    220px 220px,
    100% 3px,
    4px 100%;
  background-repeat: repeat, repeat, repeat;
  opacity: 0.55;
  mix-blend-mode: overlay;
  animation: term-crt-grain 0.35s steps(3) infinite;
}

/* Grain “live” — tiny tile shifts so static doesn’t freeze like a PNG */
@keyframes term-crt-grain {
  0% {
    background-position: 0 0, 0 0, 0 0;
    opacity: 0.5;
  }
  33% {
    background-position: -18px 12px, 0 1px, 0 0;
    opacity: 0.58;
  }
  66% {
    background-position: 14px -22px, 0 2px, 1px 0;
    opacity: 0.52;
  }
  100% {
    background-position: 0 0, 0 0, 0 0;
    opacity: 0.5;
  }
}

/* -------------------------------------------------------------------------- */
/* Header                                                                     */
/* -------------------------------------------------------------------------- */

#term-header {
  flex: 0 0 auto;
  padding: 0.25em 0.75em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--term-fg-bright);
  border-bottom: 1px solid var(--term-fg-dim);
  background: color-mix(in srgb, var(--term-bg) 85%, #000);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
  font-size: 1em;
}

/* -------------------------------------------------------------------------- */
/* Screen — fixed page frame (no scroll; 3270 form style)                      */
/* -------------------------------------------------------------------------- */

#term-screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* page mode — never free-scroll */
  padding: 0.15em 0.6em 0.1em;
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
  z-index: 1;
  font-variant-ligatures: none;
  /* Match JS --term-line-height so row math fills the frame */
  line-height: var(--term-line-height, 1.28);
}

.term-line {
  margin: 0;
  padding: 0;
  height: calc(1em * var(--term-line-height, 1.28));
  line-height: calc(1em * var(--term-line-height, 1.28));
  overflow: hidden;
  white-space: pre;
  box-sizing: border-box;
}

.term-line-pad {
  color: transparent;
  user-select: none;
}

.term-line-more {
  color: var(--term-fg-bright);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.term-line-echo {
  color: var(--term-fg-bright);
}

.term-line-dim {
  color: var(--term-fg-dim);
}

.term-line-error {
  color: var(--term-fg-bright);
  font-weight: 700;
}

.term-line-bright {
  color: var(--term-fg-bright);
  font-weight: 700;
}

.term-line-boot {
  color: var(--term-fg);
}

.term-line-report {
  color: var(--term-fg);
}

.term-line-sep {
  color: var(--term-fg-dim);
}

/* S/36 control-panel LED block (PWRDWNSYS → dEAd) */
.term-line-led {
  color: var(--term-fg-bright);
  font-weight: 700;
  text-shadow:
    0 0 0.08em var(--term-fg-bright),
    0 0 0.35em var(--term-glow),
    0 0 0.7em var(--term-glow);
  letter-spacing: 0.02em;
}

/* Selection matches phosphor */
#term-screen ::selection,
#term-input::selection {
  background: var(--term-selection-bg);
  color: var(--term-selection-fg);
}

/* -------------------------------------------------------------------------- */
/* Input line                                                                 */
/* -------------------------------------------------------------------------- */

#term-input-line {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.6em;
  border-top: 1px solid var(--term-fg-dim);
  background: color-mix(in srgb, var(--term-bg) 90%, #000);
  z-index: 2;
  font-size: 1em;
  /* keep above OIA; safe area for mobile keyboards */
  padding-bottom: max(0.25em, env(safe-area-inset-bottom, 0px));
}

#term-prompt {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--term-fg-bright);
  white-space: nowrap;
  user-select: none;
  cursor: default;
}

/* Input + overlaid classic block cursor */
#term-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  align-self: stretch;
}

#term-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0.15em 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--term-fg);
  font: inherit;
  /* Native I-beam off — solid block is drawn separately */
  caret-color: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

#term-input:focus {
  outline: none;
}

/* Hidden mirror for measuring caret x-position (same font as input) */
#term-caret-mirror {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  white-space: pre;
  font: inherit;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/*
 * Classic CRT block cursor — solid cell, hard on/off blink (not a thin line).
 * left/top set in JS over the insertion point.
 */
#term-cursor {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1ch;
  height: 1.2em;
  margin: 0;
  padding: 0;
  background: var(--term-fg-bright);
  box-shadow: 0 0 4px var(--term-glow);
  pointer-events: none;
  z-index: 2;
  animation: term-block-blink 1.05s step-end infinite;
}

#term-cursor.is-on {
  display: block;
}

/* While selecting text, hide block so selection stays readable */
#term-input-wrap.is-selecting #term-cursor {
  display: none;
}

@keyframes term-block-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #term-cursor {
    animation: none;
    opacity: 1;
  }
}

/* -------------------------------------------------------------------------- */
/* OIA — Operator Information Area (inverse bar, fixed bottom)                */
/* -------------------------------------------------------------------------- */

#term-oia {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15em 0.65em;
  padding: 0.22em 0.55em;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--term-oia-bg);
  color: var(--term-oia-fg);
  text-shadow: none;
  border-top: 2px solid color-mix(in srgb, var(--term-oia-bg) 70%, #000);
  z-index: 3;
  user-select: none;
  /* stay visible above home indicator */
  padding-bottom: max(0.22em, env(safe-area-inset-bottom, 0px));
}

#term-oia .oia-field {
  white-space: nowrap;
}

#term-oia .oia-phosphor,
#term-oia .oia-feeds {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#term-oia .oia-phosphor:hover,
#term-oia .oia-phosphor:focus-visible,
#term-oia .oia-feeds:hover,
#term-oia .oia-feeds:focus-visible {
  outline: 1px solid var(--term-oia-fg);
  outline-offset: 2px;
}

#term-oia .oia-busy {
  animation: term-oia-pulse 0.9s ease-in-out infinite;
}

@keyframes term-oia-pulse {
  50% {
    opacity: 0.55;
  }
}

/* -------------------------------------------------------------------------- */
/* Busy / offline chrome                                                      */
/* -------------------------------------------------------------------------- */

#term-root.term-busy #term-input {
  opacity: 0.7;
}

/* -------------------------------------------------------------------------- */
/* Mobile                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* Base floor only — JS still scales up when height allows */
  html,
  body {
    font-size: var(--term-font-size, 13px);
  }

  #term-header {
    padding: 0.3em 0.5em;
    letter-spacing: 0.04em;
    font-size: 0.95em;
  }

  #term-screen {
    padding: 0.15em 0.45em;
  }

  #term-input-line {
    padding: 0.25em 0.45em;
    gap: 0.25em;
  }

  #term-oia {
    font-size: 0.78em;
    gap: 0.1em 0.4em;
    padding: 0.2em 0.4em;
    padding-bottom: max(0.2em, env(safe-area-inset-bottom, 0px));
  }

  /* compress PF aids on narrow screens — JS may hide; CSS helps */
  #term-oia .oia-pf {
    display: none;
  }
}

@media (max-width: 380px) {
  #term-oia .oia-page {
    /* keep if present; identity always first */
  }
}

/* -------------------------------------------------------------------------- */
/* prefers-reduced-motion — kill grain animation / heavy FX                   */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #term-root::after {
    animation: none;
    /* keep a faint static scanline only; drop animated grain */
    background-image: repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      var(--term-scanline) 2px,
      var(--term-scanline) 3px
    );
    background-size: 100% 3px;
    mix-blend-mode: normal;
    opacity: 0.35;
  }

  #term-cursor,
  #term-oia .oia-busy {
    animation: none !important;
  }

  #term-root {
    text-shadow: 0 0 1px var(--term-glow);
  }
}

/* -------------------------------------------------------------------------- */
/* Focus visibility for keyboard users                                        */
/* -------------------------------------------------------------------------- */

#term-input:focus-visible {
  box-shadow: inset 0 -1px 0 var(--term-fg-dim);
}

#term-root:focus-within #term-input-line {
  border-top-color: var(--term-fg);
}