/* 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;
  /* CCSID Phase 3 (§5.3): the terminal grid cell width. 1ch until the boot
     probe measures the real mono advance in px (and on every resize) —
     column count, not string length, is layout truth. */
  --cell-w: 1ch;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #050605;
  color: var(--green);
  /* CJK fallbacks (CCSID Phase 3 §5.3): full-width glyphs pick a mono CJK
     face; the terminal boxes each wide glyph to exactly 2 cells (.w2), so
     the grid holds even when the fallback's natural advance differs */
  font-family: "IBM Plex Mono", "PT Mono", "Menlo", "Consolas",
    "Noto Sans Mono CJK JP", "Sarasa Mono J", "Hiragino Kaku Gothic ProN",
    "MS Gothic", 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;
  /* the CRT is the one opaque backdrop of the page and must paint ABOVE
     everything that follows it in the DOM. The footer links (#carddemo-link,
     #docs-links, #manual-link) carry opacity:.7, and opacity<1 makes an
     element paint in the same step as positioned z-index:auto boxes, in tree
     order — later than this (z-index:auto) box. Whenever the footer sat under
     the terminal geometrically (the video rig pins #crt fixed and the flex
     body centres #foot beneath it) the link text painted THROUGH the opaque
     screen. A positive z-index makes #crt a stacking context painted after
     every z-index:auto / opacity sibling; page overlays keep their own
     higher levels (.regovl 40, rig board 90000). Nothing inside the CRT
     changes: #screen/#term stay transparent over this backdrop and the DRK
     field masking (.tf.dark) is untouched. */
  z-index: 1;
}

#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; }
/* login-panel inline language choices (IBM i sign-on style): the language
   the panel is rendered in is emphasized white, the rest keep link color */
#screen a.langopt.cur { color: var(--white); font-weight: 600; }
/* logon "Get User ID": a 3270 highlighted field — bright amber, reverse
   video, blinking between reverse and underlined amber (~1.2s, never blank,
   so the text stays readable in both phases). box-shadow (not padding) gives
   the reverse block some air without moving the 80-column grid. */
@keyframes reggo-blink {
  0%, 55% { color: #000; background: #ffcc00; box-shadow: 0 0 0 2px #ffcc00, 0 0 10px #ffcc00aa; text-decoration: none; }
  56%, 100% { color: #ffdd33; background: transparent; box-shadow: none; text-decoration: underline; }
}
#screen a#reggo { color: #000; background: #ffcc00; box-shadow: 0 0 0 2px #ffcc00, 0 0 10px #ffcc00aa;
  font-weight: 700; text-underline-offset: 3px; border-radius: 1px;
  animation: reggo-blink 1.2s steps(1, end) infinite; }
#screen a#reggo:hover { animation: none; color: #000; background: #ffe066; box-shadow: 0 0 0 2px #ffe066; }
#screen a#reggo:focus-visible { animation: none; color: #000; background: #ffcc00; outline: 2px solid var(--white); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  #screen a#reggo { animation: none; }
}
/* The choice row WRAPS: with 5+ shipped languages one 80-col line cannot
   hold every choice (the 5th pushed 日本語 past the screen edge, where it
   was unreachable — real regression, caught by nls_login_battle). The
   selector is an inline-block that wraps at entry boundaries with a
   hanging indent under its own start column; each entry (name + DRAFT
   tag) stays unbreakable. 54ch + the dot-leader label prefix stays inside
   the 80-col login line for every shipped leader translation. */
/* language selector: a tidy 5-column inline grid — native names align in
   even columns and wrap to new rows for any language count (10 langs =
   5 x 2). Each cell is one unbreakable .langitem. */
#screen #lang { display: inline-grid; vertical-align: top; grid-template-columns: repeat(5, max-content); column-gap: 3ch; row-gap: 0; max-width: 54ch; }
#screen #lang .langitem { white-space: pre; }

/* ---- 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;
}
/* CCSID Phase 3 (§5.3): a full-width character rendered on the terminal
   grid — boxed to exactly two cells regardless of the CJK fallback font's
   natural advance (renderTextSpan wraps each wide glyph) */
#term .w2 {
  display: inline-block;
  width: calc(var(--cell-w) * 2);
  overflow: hidden;
  vertical-align: top;
}
#term .tf.bright { color: var(--white); font-weight: 600; }
/* 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); }
/* BMS DRK (non-display) — AFTER the color rules (equal specificity) so a
   DRK field that also carries COLOR= still shows nothing; covers the
   editable <input> too (CESN password). The caret stays visible: a real
   3270 keeps the cursor in a non-display field, only the data is hidden. */
#term .tf.dark { color: transparent; }
#term input.tf.dark { caret-color: var(--green); }
#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; } }

/* the footer links under the disclaimer: ONE centred line (Operations
   Manuals · CardDemo · MCP · REST API · Studio · VS Code (Zowe) · account),
   wrapping only BETWEEN links (each link is nowrap, the " · " separators
   are the break opportunities) so a 390 px phone never overflows. */
#docs-links {
  text-align: center;
  color: var(--green-dim);
  font: 11px/1.6 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .5px;
  opacity: .7;
  margin: 0;
  padding: 2px 8px 4px;
  overflow-wrap: anywhere;
}
#docs-links a { color: var(--green-dim); text-decoration: none; white-space: nowrap; }
#docs-links a:hover { color: var(--green); text-decoration: underline; }
#docs-links .sep { color: var(--green-dim); }
/* #foot is capped at 960 px (the disclaimer's measure, unchanged); the full
   link line is ~1010 px, so on wide screens the line alone may spill 80 px
   past each side of that cap and stay on ONE line. Below 1140 px it keeps
   the #foot width and wraps between links. */
@media (min-width: 1140px) { #docs-links { margin: 0 -80px; } }

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

/* self-service "Get User ID" registration window (over the logon panel) */
.regovl {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: center;
  justify-content: center;
}
.regbox {
  width: min(64ch, 92vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--bg);
  color: var(--green);
  border: 2px solid var(--green-dim);
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(51, 255, 51, .25);
  padding: 1em 1.4em 1.2em;
  font: inherit;
}
.regtitle {
  color: var(--white);
  text-align: center;
  margin-bottom: .8em;
}
.regtitle::before, .regtitle::after { content: " --- "; color: var(--turq); }
.regrules { color: var(--green); }
.regrules .regw { color: var(--white); margin-bottom: .3em; }
.regrules .regnote { color: var(--turq); margin-top: .6em; }
.regform { margin-top: 1em; }
.regform label { display: block; color: var(--blue); margin-bottom: .7em; }
.regform input {
  background: #0d240d;
  color: var(--green);
  border: 0;
  border-bottom: 1px solid var(--green-dim);
  font: inherit;
  width: 100%;
  padding: 2px 4px;
  outline: none;
}
#regwin #reguid { width: 12ch; text-transform: uppercase; }
.regmsg { min-height: 1.2em; color: var(--red); margin-top: .4em; }
.regmsg.good { color: var(--green); }
/* success view: the user ID and the one-time temporary password stand out
   (reverse-video amber, the same signal as the "Get User ID" highlight) */
.regok { color: var(--green); }
.reguidv { color: #ffcc00; font-weight: bold; letter-spacing: .05em; }
.regpwbox {
  margin: .7em 0 .6em;
  padding: .6em .9em .7em;
  border: 2px solid #ffcc00;
  border-radius: 6px;
  background: #1a1500;
}
.regpwlbl { color: var(--white); font-size: .9em; margin-bottom: .35em; }
.regpwrow { display: flex; align-items: center; flex-wrap: wrap; gap: .8em; }
.regpw {
  font-family: "IBM Plex Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 1.7em;
  font-weight: bold;
  letter-spacing: .18em;
  color: #000;
  background: #ffcc00;
  padding: .1em .45em .1em .6em;
  border-radius: 3px;
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
}
.regcopy {
  background: #2a2200;
  color: #ffcc00;
  border: 1px solid #ffcc00;
  font: inherit;
  padding: 3px 14px;
  cursor: pointer;
}
.regcopy:hover { background: #ffcc00; color: #000; }
.regcopy:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.regcopy.ok { background: #103510; color: var(--green); border-color: var(--green); }
.regcpstat { color: var(--turq); font-size: .9em; }
.regcpstat.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.regpwwarn { color: #ffcc00; font-weight: bold; margin-top: .55em; }
.regpwwarn::before { content: "\26A0\FE0E  "; }
.reghint { color: var(--green); }
.regbtns { margin-top: .8em; display: flex; gap: 1em; }
.regbtns button {
  background: #103510;
  color: var(--green);
  border: 1px solid var(--green-dim);
  font: inherit;
  padding: 2px 12px;
  cursor: pointer;
}
.regbtns button:hover:not(:disabled) { background: #185018; color: var(--white); }
.regbtns button:disabled { opacity: .5; cursor: default; }

/* ======================================================================
   Workspace theme (web/sf-theme.js, notes/LIGHT-THEME-AND-CHAT-REDESIGN-PLAN.md)
   The 3270 CRT is the ONLY green screen: everything around it — the page,
   the key bar, the footer — is neutral, light by default. The CRT keeps its
   exact geometry (border 14px, padding, 82ch screen); only its casing reads
   as a real monitor now: charcoal bezel, glass vignette, phosphor glow.
   Scoped by html[data-theme] so pages without sf-theme.js are unchanged.
   ====================================================================== */
html[data-theme] { --desk: #e7e5df; --desk-fg: #3d4249; --desk-dim: #5a5f66; --desk-acc: #2b65a0; }
html[data-theme="dark"] { --desk: #101214; --desk-fg: #c4ccd4; --desk-dim: #9aa4ae; --desk-acc: #7fb0dd; }
html[data-theme], html[data-theme] body { background: var(--desk); }
html[data-theme] #crt {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse 120% 95% at 50% 45%, #0d110d 0%, #0a0c0a 60%, #060806 100%);
  border-color: #23262a;
  box-shadow:
    0 0 0 1px #3a3e44,                    /* bezel edge */
    0 18px 40px -12px rgba(0, 0, 0, .55), /* the monitor on the desk */
    0 0 46px rgba(51, 255, 51, .10),      /* phosphor glow */
    inset 0 0 0 1px #000,
    inset 0 0 80px rgba(0, 0, 0, .6);
}
html[data-theme="dark"] #crt { box-shadow: 0 0 0 1px #2c3036, 0 18px 40px -12px rgba(0, 0, 0, .8), 0 0 60px rgba(51, 255, 51, .12), inset 0 0 0 1px #000, inset 0 0 80px rgba(0, 0, 0, .6); }
/* glass: scanlines + a soft vignette towards the curved edges */
html[data-theme] #crt::after {
  background:
    radial-gradient(ellipse 110% 90% at 50% 50%, transparent 62%, rgba(0, 0, 0, .28) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .13) 0 1px, transparent 1px 3px);
}
html[data-theme] #keybar { color: var(--desk-dim); }
html[data-theme] #tm-disclaimer { color: var(--desk-dim) !important; }
html[data-theme] #docs-links { opacity: 1; color: var(--desk-dim); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: .1px; font-size: 11.5px; }
html[data-theme] #docs-links a { color: var(--desk-fg); }
html[data-theme] #docs-links a:hover { color: var(--desk-acc); }
html[data-theme] #docs-links a:focus-visible { outline: 2px solid var(--desk-acc); outline-offset: 2px; border-radius: 2px; }
html[data-theme] #docs-links .sep { color: var(--desk-dim); }