/* SteelFrame X — 3270 green-phosphor terminal look */

:root {
  --green: #2eff7e;
  --green-dim: #22bb22;
  --white: #f0f0f0;
  --blue: #6699ff;
  --turq: #35d0d0;
  --red: #ff5555;
  --pink: #ff66cc;
  --yellow: #ffff66;
  --bg: #0a0c0a;
  --cell-h: 1.25em;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #050605;
  color: var(--green);
  font-family: "IBM Plex Mono", "PT Mono", "Menlo", "Consolas", monospace;
  /* everything is ch/em-based, so the terminal scales with the root font:
     fill the viewport in whichever dimension limits first */
  font-size: clamp(11px, min(1.85vw, 2.5vh), 80px);
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

#crt {
  background: var(--bg);
  border: 14px solid #1a1d1a;
  border-radius: 14px;
  box-shadow: 0 0 60px rgba(51, 255, 51, .12), inset 0 0 80px rgba(0, 0, 0, .55);
  padding: 14px 20px 6px 20px;
  position: relative;
}

#crt::after {  /* scanlines */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
  border-radius: 6px;
}

#screen.ds4 {
  /* DSPSIZ(*DS4) 27x132: smaller glyphs keep the wide screen in the frame */
  font-size: .68em;
}

#screen {
  width: 82ch;
  height: calc(var(--cell-h) * 26);
  /* clip (not hidden): the box must never scroll, even when the browser
     tries to reveal a focused input that overflows the fixed screen */
  overflow: clip;
  position: relative;
  line-height: var(--cell-h);
  /* whitespace collapses BETWEEN .line blocks (template newlines would
     otherwise render as phantom blank rows and overflow the 26-row screen);
     each .line preserves its own spacing */
  white-space: normal;
}

#oia {
  border-top: 1px solid #163016;
  margin-top: 4px;
  padding-top: 3px;
  display: flex;
  justify-content: space-between;
  width: 82ch;
  color: var(--turq);
  font-size: .85em;
  min-height: 1.4em;
}

#keybar {
  margin-top: 10px;
  color: #4a5a4a;
  font-size: .8em;
  letter-spacing: .05em;
  min-height: 1.2em;
}
#keybar:empty { display: none; }   /* collapse the F-key bar when a panel sets no keybar text (e.g. Sign On) */

/* ---- text colour classes (ISPF palette) ---- */
.g { color: var(--green); }
.w { color: var(--white); font-weight: 600; }
.b { color: var(--blue); }
.t { color: var(--turq); }
.r { color: var(--red); }
.y { color: var(--yellow); }
.p { color: var(--pink); }
.dim { color: var(--green-dim); }

#screen a { color: var(--turq); text-decoration: none; cursor: pointer; }
#screen a:hover { background: #103510; }

/* ---- inputs: green underlined 3270 fields ---- */
input.f, textarea.f {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #1d5a1d;
  outline: none;
  color: var(--green);
  font: inherit;
  padding: 0;
  margin: 0;
  caret-color: var(--green);
  text-transform: uppercase;
  /* exactly one character cell tall: the default auto height (font box +
     underline border + baseline gap) made any row holding an input 1px
     taller than --cell-h, so list windows clipped a growing slice of the
     top/bottom rows the further they were rolled */
  height: var(--cell-h);
  vertical-align: bottom;
}
input.f:focus { background: #0d200d; }
input.f.nocaps { text-transform: none; }

table.tbl { border-collapse: collapse; width: 100%; }
table.tbl td, table.tbl th { padding: 0 1ch 0 0; text-align: left; font-weight: normal; white-space: pre; }
table.tbl th { color: var(--blue); }

/* System Request alternate job: one .sess per job, active one shows */
.sess { display: none; }
.sess.act { display: contents; }

/* SysRq menu overlay (Shift+Esc), like the workstation System Request line */
#sysrq {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--green-dim);
  padding: 1em 2ch;
  z-index: 10;
  box-shadow: 0 0 30px rgba(0, 0, 0, .8);
}

.line { display: block; white-space: pre; }
/* cursor resting on a body line (arrows / click) */
.scroll .line:focus {
  outline: none;
  background: #0d240d;
  box-shadow: inset 3px 0 0 var(--green);
}

/* FIND hit: reverse video, like a 5250 highlighted string */
.hit { background: var(--green); color: #000; }
textarea.ed::selection { background: var(--green); color: #000; }

/* SEU editor: 7-char sequence-number gutter (0001.00) + data area. The
   gutter is itself a textarea so its rows share the data textarea's exact
   font metrics. The data textarea's own text is transparent; the #edhl
   backdrop renders the same text so FIND hits show in reverse video. */
.edwrap { display: flex; }
textarea.gut {
  flex: none;
  width: 8ch;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  color: var(--green-dim);
  caret-color: var(--green);
  font: inherit;
  line-height: var(--cell-h);
  resize: none;
  white-space: pre;
  overflow: hidden;
}
textarea.gut:focus { color: var(--green); }
.edbody { position: relative; flex: 1; min-width: 0; }
.edbody textarea.ed {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
  caret-color: var(--green);
}
.edhl {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  white-space: pre;
  line-height: var(--cell-h);
  color: var(--green);
}

textarea.ed {
  width: 80ch;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  color: var(--green);
  font: inherit;
  line-height: var(--cell-h);
  resize: none;
  white-space: pre;
  overflow: auto;
  text-transform: none;
}

/* scrollable region inside a panel */
.scroll { overflow-y: auto; overflow-x: hidden; }
/* keys-only scrolling (Roll keys / PageUp/PageDown): no wheel, no scrollbars */
.scroll::-webkit-scrollbar, textarea.ed::-webkit-scrollbar { display: none; }
.scroll, textarea.ed { scrollbar-width: none; }

/* ---- CICS 3270 grid ---- */
#term {
  position: relative;
  width: 80ch;
  height: calc(var(--cell-h) * 24);
}
#term .tf {
  position: absolute;
  white-space: pre;
}
#term .tf.bright { color: var(--white); font-weight: 600; }
#term .tf.dark { color: transparent; }
/* CHGINPDFT with no UL: the system default input underline is removed */
#term input.tf.noul { border-bottom: none; }
/* DSPATR(BL): blinking field (the 5250 blink attribute) */
@keyframes bl5250 { 50% { opacity: 0; } }
#term .tf.blink { animation: bl5250 1s step-start infinite; }
/* DDS BLINK (file/record level): blinking cursor on the focused field */
@keyframes caret5250 { 50% { caret-color: transparent; } }
#term.cursorblink input:focus { animation: caret5250 0.6s step-start infinite; }
#term input.tf {
  background: transparent;
  border: 0;
  border-bottom: 1px dotted #2a6a2a;
  outline: none;
  color: var(--green);
  font: inherit;
  padding: 0;
  text-transform: uppercase;
}
#term input.tf:focus { background: #0d240d; }

.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* workstation file input on the FTP panel */
input.upfile { color: var(--green); font: inherit; background: transparent; border: 0; max-width: 60ch; }
input.upfile::file-selector-button {
  background: #103510;
  color: var(--green);
  border: 1px solid var(--green-dim);
  font: inherit;
  cursor: pointer;
}