/* Terminal (greenscreen emulator): the raw 24x80 grid. Display-only in
   slice 1; the interactive grid and templated renders follow. */
.gs-grid {
  background: #10151b;
  color: #93e8a2;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
  padding: 14px 18px;
  overflow-x: auto;
}
.gs-row { white-space: pre; height: 1.3em; }
.gs-field {
  font: inherit;
  background: #1d2a36;
  color: #eaf7ec;
  border: none;
  border-bottom: 1px solid #5b8def;
  border-radius: 0;
  padding: 0;
  margin: 0;
  vertical-align: baseline;
}
.gs-field:focus { outline: none; background: #24364a; }
.gs-banner {
  background: var(--bfc-warn-bg, #fff7e6);
  color: var(--bfc-warn-text, #8a5a00);
  font-size: 13px;
  padding: 8px 18px;
}

/* Terminal sign-on gate (2026-06-07): the terminal opens automatically, so the
   page shows the auto-connect placeholder; the sign-on form is the fallback,
   styled as a centered card to match the app rather than a bare button row. */
.gs-gate {
  display: flex;
  justify-content: center;
  padding: 48px 22px;
}
.gs-gate-card {
  width: 100%;
  max-width: 360px;
  background: var(--bfc-surface);
  border: 1px solid var(--bfc-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 26px;
  text-align: center;
}
.gs-gate-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--bfc-navy);
}
.gs-gate-sub {
  color: var(--bfc-muted);
  font-size: 14px;
  margin-top: 4px;
}
.gs-gate-msg {
  margin-top: 14px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--bfc-warn-bg);
  border: 1px solid var(--bfc-warn-line);
  color: var(--bfc-warn-text);
  font-size: 13px;
  text-align: left;
}
.gs-gate-form { display: flex; flex-direction: column; }
.gs-gate-input { margin-top: 18px; text-align: left; }
.gs-gate-btn { margin-top: 12px; width: 100%; }
.gs-gate-spinner {
  width: 26px;
  height: 26px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid var(--bfc-soft-2);
  border-top-color: var(--bfc-teal);
  animation: gs-spin 0.7s linear infinite;
}
@keyframes gs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gs-gate-spinner { animation: none; }
}
.gs-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--bfc-line, #e3e6ec);
}
.gs-note {
  font-size: 12px;
  color: var(--bfc-muted);
  padding: 8px 18px 0;
}
.gs-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 16px 18px;
}
.gs-menu-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--bfc-line, #e3e6ec);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.gs-menu-opt:hover { border-color: var(--bfc-indigo-dark); }
.gs-menu-opt .num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--bfc-indigo-dark);
  min-width: 2ch;
}
.gs-cmd { padding: 0 18px 16px; }
.gs-msg {
  padding: 18px;
  display: grid;
  gap: 6px;
}
.gs-form {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
}
.gs-form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.gs-label { min-width: 180px; font-weight: 600; }
.gs-req { color: var(--bfc-warn-text, #8a5a00); }
.gs-helper { font-size: 12px; color: var(--bfc-muted); }
.gs-list { padding: 0 0 8px; }
.gs-list-head {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--bfc-muted);
  padding: 10px 18px 4px;
  white-space: pre;
}
.gs-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 18px;
}
.gs-list-row select { font-size: 12.5px; }
.gs-list-text {
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: pre;
  overflow-x: auto;
}
.gs-list-filters { padding-bottom: 0; }
/* Enhanced form/detail view: the screen rendered faithfully (protected
   context + inline inputs) on a clean light card, not the green CRT. */
.gs-doc {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  padding: 16px 18px;
  white-space: pre;
  overflow-x: auto;
  color: var(--bfc-ink, #1a1d24);
}
.gs-doc .gs-row { height: auto; }
.gs-doc .gs-field {
  background: #eef2fb;
  color: var(--bfc-indigo-dark, #1c3e95);
  border: none;
  border-bottom: 1px solid var(--bfc-indigo-dark, #1c3e95);
  border-radius: 0;
  padding: 0 1px;
  margin: 0;
  font: inherit;
}
.gs-doc .gs-field:focus { outline: none; background: #dde6fa; }

/* Overlay terminal render (2026-06-07): screen text is one aligned monospace
   block; inputs float absolutely over their exact cells so they can never
   push text or inflate a row. padding:0 is required — absolute cells are
   positioned from the padding box, so spacing rides on margin instead. */
.gs-screen {
  position: relative;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.2;
  /* Size to the screen grid (80 cols) and center it in the card, rather than
     a full-width block that strands the content on the left (Sam 2026-06-07).
     max-width + overflow-x keep it usable when the card is narrower. */
  width: fit-content;
  max-width: 100%;
  margin: 12px auto;
  padding: 0;
  overflow-x: auto;
}
.gs-text { margin: 0; font: inherit; line-height: 1.2; white-space: pre; }
.gs-cell {
  position: absolute;
  box-sizing: border-box;
  height: 1.2em;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: 1.2;
  z-index: 2; /* above the row-pick overlays so the Opt column stays typable */
}
.gs-cell:focus { outline: 2px solid #5b8def; outline-offset: 0; }
/* Subfile decoration (templating strategy 2026-06-07 §6): legend chips +
   row-pick overlays ride ON the grid; nothing is re-laid-out. */
.gs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px 18px 0;
}
.gs-legend-hint { font-size: 12px; color: var(--bfc-muted); }
.gs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12.5px;
  padding: 4px 12px;
  border: 1px solid var(--bfc-line, #e3e6ec);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}
.gs-chip:hover:enabled { border-color: var(--bfc-indigo-dark); }
.gs-chip:disabled { opacity: .45; cursor: default; }
.gs-chip .num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--bfc-indigo-dark);
}
.gs-rowpick {
  position: absolute;
  left: 0;
  width: 100%;
  /* Share the grid's font metric so 1.2em == the <pre> line height (15.6px).
     As a <button> this would otherwise use the UA font-size, drifting a
     fraction per row and accumulating down the list — the overlay then sits
     low on the text (Sam, 2026-06-07). Matches .gs-cell exactly. */
  font: inherit;
  line-height: 1.2;
  height: 1.2em;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 1;
}
.gs-rowpick:hover { background: rgba(28, 62, 149, .06); }
.gs-rowpick.on { background: rgba(28, 62, 149, .12); }
.gs-rowpick:focus { outline: 1px dotted var(--bfc-indigo-dark); }
.gs-screen-raw {
  background: #10151b;
  border-radius: 8px;
  /* Raw/non-templated terminal screens are the user's primary reading surface;
     keep enhanced grids compact, but scale the faithful green-screen view up. */
  font-size: 15px;
}
.gs-screen-raw .gs-text { color: #93e8a2; }
.gs-screen-raw .gs-cell { background: #1d2a36; color: #eaf7ec; border-bottom: 1px solid #5b8def; }
.gs-screen-doc .gs-text { color: var(--bfc-ink, #1a1d24); }
.gs-screen-doc .gs-cell { background: #eef2fb; color: var(--bfc-indigo-dark, #1c3e95); border-bottom: 1px solid var(--bfc-indigo-dark, #1c3e95); }
/* Dot-leader decoration (enhanced view): leaders recede, values carry the
   weight. Spans only — the text and its alignment are untouched. */
.gs-screen-doc .gs-dots { color: #c6cbd6; }
.gs-screen-doc .gs-val { font-weight: 600; }
/* Filter-convention inputs (Position to…, Change to warehouse): search-style.
   box-shadow, not border — the cell's geometry must not change. */
.gs-screen-doc .gs-cell.gs-filter {
  background: #fff;
  border-bottom: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--bfc-line, #cfd5e1);
}
.gs-screen-doc .gs-cell.gs-filter:focus {
  box-shadow: inset 0 0 0 1px var(--bfc-indigo-dark, #1c3e95);
  outline: none;
}
/* Paging affordances on the key bar. */
.gs-page-state {
  font-size: 12px;
  color: var(--bfc-muted);
  align-self: center;
  margin-left: auto;
}
.gs-morekeys { color: var(--bfc-muted); }