/* ZOSWEB — 3270 green-phosphor terminal look */

:root {
  --green: #33ff33;
  --green-dim: #22bb22;
  --white: #f0f0f0;
  --blue: #6699ff;
  --turq: #00cccc;
  --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 {
  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;
}

#notif {
  width: 82ch;
  color: var(--white);
  white-space: pre;
  min-height: 0;
}
#notif:not(:empty) { min-height: var(--cell-h); }

#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 { margin: 0; min-height: 0; }

/* ---- 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 scrolled */
  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); }

/* ISPF logical screens (START/SWAP): one .sess per session, only the
   active one participates in layout */
.sess { display: none; }
.sess.act { display: contents; }

.line { display: block; white-space: pre; }
/* FIND hit: reverse video, like a 3270 highlighted string */
.hit { background: var(--green); color: #000; }
textarea.ed::selection { background: var(--green); color: #000; }
/* cursor resting on a body line (arrows / click; CSR scrolling uses it) */
.scroll .line:focus {
  outline: none;
  background: #0d240d;
  box-shadow: inset 3px 0 0 var(--green);
}

/* editor: ISPF layout — 6-char line-command/number gutter, then the data
   area. The textarea's own text is transparent; the #edhl backdrop renders
   the same text (identical font metrics) so FIND hits can be shown in
   reverse video anywhere in the member. */
.edwrap { display: flex; }
/* the gutter is itself a textarea so its rows share the data textarea's
   exact font metrics — the two can never drift out of alignment */
textarea.gut {
  flex: none;
  width: 7ch;
  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: auto; }
/* keys-only scrolling (PF7/PF8/PF10/PF11): 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; }
/* 3270 extended color attributes (BMS COLOR=) — classic terminal palette */
#term .tf.c-blue { color: #7b9fff; }
#term .tf.c-red { color: #ff6a6a; }
#term .tf.c-pink { color: #ff8fff; }
#term .tf.c-green { color: var(--green); }
#term .tf.c-turquoise { color: #34d5d5; }
#term .tf.c-yellow { color: #ffe34d; }
#term .tf.c-neutral { color: var(--white); }
#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; } }

/* small unobtrusive footer link to the SYNBANK operations manual */
#manual-link {
  display: block;
  text-align: center;
  color: var(--green-dim);
  font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
  text-decoration: none;
  margin: 0;
  padding: 0 8px 4px;
  letter-spacing: .5px;
  opacity: .7;
}
#manual-link:hover { color: var(--green); opacity: 1; text-decoration: underline; }

/* 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;
}