/* ============================================================================================
   MIX PREVIEW (design/preview-mix branch). The Stripe-grade prototype's presentation, applied to
   the REAL app.

   What this file is: the parts of local-preview/veritura-stripe-grade-workspace Joey picked as
   better than ours (the settings layout, the table language, the work-queue card), ported as a
   PURE OVERLAY. It loads after app.css and restyles existing classes; app.js renderers, gating
   (data-feat / data-featlock / persona spine), and every element id are untouched. Our nav and
   our icons stay, by Joey's explicit call.

   Why an overlay rather than editing app.css: this is a review candidate. One <link> line turns
   the whole look on or off, which is exactly what a side-by-side decision needs.
   ============================================================================================ */

:root {
  --sgx-ink: #1a1f36;
  --sgx-soft: #4f566b;
  --sgx-mute: #697386;
  --sgx-line: #e3e8ee;
  --sgx-line-soft: #eef1f5;
  --sgx-bg: #f6f8fa;
  --sgx-card: #ffffff;
  --sgx-blue: #1e63ff; /* unified with the reference accent */
  --sgx-blue-ink: #1051de;
  --sgx-green: #0e6245;
  --sgx-green-bg: #e6f6ef;
  --sgx-amber: #92400e;
  --sgx-amber-bg: #fdf3dd;
  --sgx-red: #b3261e;
  --sgx-red-bg: #fdecea;
  --sgx-radius: 12px;
  --sgx-shadow: 0 1px 2px rgba(26, 31, 54, .06), 0 1px 6px rgba(26, 31, 54, .04);
}

/* ============================================================
   1. THE TABLE LANGUAGE. One shared class (.rgtbl) styles every
      table in the app, so this section is most of the visible
      change: uppercase letterspaced headers, taller rows, row
      hover, quieter borders.
   ============================================================ */
.rgtbl-wrap {
  border: 1px solid var(--sgx-line);
  border-radius: var(--sgx-radius);
  background: var(--sgx-card);
  box-shadow: var(--sgx-shadow);
  overflow-x: auto;
}
.rgtbl { border-collapse: separate; border-spacing: 0; width: 100%; }
.rgtbl thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sgx-mute);
  background: var(--sgx-card);
  border-bottom: 1px solid var(--sgx-line);
  padding: 12px 14px;
  text-align: left;
  white-space: nowrap;
}
.rgtbl tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--sgx-line-soft);
  font-size: 13px;
  color: var(--sgx-soft);
  vertical-align: middle;
}
.rgtbl tbody tr:last-child td { border-bottom: 0; }
.rgtbl tbody tr { transition: background .12s ease; }
.rgtbl tbody tr:hover { background: #f8fafc; }
.rgtbl tbody td:first-child { color: var(--sgx-ink); font-weight: 600; }

/* Status pills, everywhere the app already uses .pp */
.pp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid transparent;
}
.pp.ok, .pp.good { background: var(--sgx-green-bg); color: var(--sgx-green); border-color: #c6ecd9; }
.pp.mon, .pp.warn { background: var(--sgx-amber-bg); color: var(--sgx-amber); border-color: #f5e0b8; }
.pp.bad { background: var(--sgx-red-bg); color: var(--sgx-red); border-color: #f6c9c5; }

/* ============================================================
   2. TODAY'S WORK. The existing work-queue card (#workQueue,
      rendered by renderWorkQueue from the same DASH-01
      projection) in the prototype's priority-queue clothes.
   ============================================================ */
.wqcard {
  border: 1px solid var(--sgx-line);
  border-radius: var(--sgx-radius);
  background: var(--sgx-card);
  box-shadow: var(--sgx-shadow);
  padding: 0;
  overflow: hidden;
}
.wqcard > .ph {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--sgx-line-soft);
}
.wqcard > .ph > span { font-size: 15.5px; font-weight: 700; color: var(--sgx-ink); }
/* The prototype's eyebrow, without new markup: painted above the existing header. */
.wqcard > .ph > span::before {
  content: "Priority queue";
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sgx-blue);
  margin-bottom: 3px;
}
.wq-chips { padding: 10px 20px 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.wq-chip {
  border: 1px solid var(--sgx-line);
  background: var(--sgx-card);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sgx-soft);
  cursor: pointer;
}
.wq-chip i { font-style: normal; color: var(--sgx-mute); margin-left: 3px; }
.wq-chip.on { background: var(--sgx-ink); border-color: var(--sgx-ink); color: #fff; }
.wq-chip.on i { color: #c9d2ff; }
.wq-tbl { padding: 4px 8px 8px; }
.wq-tr {
  display: grid;
  grid-template-columns: minmax(220px, 2.2fr) 90px minmax(120px, 1fr) minmax(110px, 1fr) 90px 34px;
  align-items: center;
  gap: 10px;
  padding: 13px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s ease;
}
.wq-tr:hover { background: #f8fafc; }
.wq-tr.wq-thead {
  cursor: default;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sgx-line-soft);
  border-radius: 0;
}
.wq-tr.wq-thead:hover { background: transparent; }
.wq-tr.wq-thead span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sgx-mute);
}
.wq-subj b { display: block; font-size: 13.5px; font-weight: 600; color: var(--sgx-ink); }
.wq-subj i { display: block; font-style: normal; font-size: 12px; color: var(--sgx-mute); margin-top: 1px; }
.wq-age { font-size: 12.5px; color: var(--sgx-mute); white-space: nowrap; }
.wq-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 600;
}
.wq-pill.warn { background: var(--sgx-amber-bg); color: var(--sgx-amber); border: 1px solid #f5e0b8; }
.wq-pill.bad { background: var(--sgx-red-bg); color: var(--sgx-red); border: 1px solid #f6c9c5; }
.wq-pill.ok, .wq-pill.good { background: var(--sgx-green-bg); color: var(--sgx-green); border: 1px solid #c6ecd9; }
.wq-st, .wq-cat { font-size: 12.5px; color: var(--sgx-soft); }
.wq-open {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sgx-line);
  border-radius: 9px;
  color: var(--sgx-mute);
  font-size: 14px;
  background: var(--sgx-card);
}
.wq-tr:hover .wq-open { color: var(--sgx-blue); border-color: #c9d2ff; }
.wq-more { padding: 10px 12px 6px; font-size: 12px; color: var(--sgx-mute); }

/* ============================================================
   3. SETTINGS. The prototype's page architecture: access strip,
      left section nav, card column. Markup for the strip, the
      nav and the panel wrappers is added in app.html; every
      pre-existing element inside the cards is untouched.
   ============================================================ */
.sxbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--sgx-line);
  border-radius: var(--sgx-radius);
  background: var(--sgx-card);
  box-shadow: var(--sgx-shadow);
  margin-bottom: 18px;
  overflow: hidden;
}
.sxbar > span {
  flex: 1 1 140px;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 18px;
  border-right: 1px solid var(--sgx-line-soft);
}
.sxbar > span:last-child { border-right: 0; }
.sxbar small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sgx-mute);
}
.sxbar b { font-size: 13.5px; font-weight: 650; color: var(--sgx-ink); }

.sxlayout {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.sxnav {
  position: sticky;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sxnav > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sgx-mute);
  padding: 4px 12px 8px;
}
.sxnav button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--sgx-soft);
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.sxnav button:hover { background: #eef1f5; color: var(--sgx-ink); }
.sxnav button.on { background: #e8edff; color: var(--sgx-blue-ink); font-weight: 650; }
.sxnav button .vic { width: 17px; height: 17px; flex: 0 0 auto; }
.sxpanels { min-width: 0; }
[data-sxpanel] { display: none; }
[data-sxpanel].on { display: flex; flex-direction: column; gap: 18px; }

/* Card polish inside settings, and the eyebrow the prototype puts over each card title. */
.setcard {
  border: 1px solid var(--sgx-line);
  border-radius: var(--sgx-radius);
  background: var(--sgx-card);
  box-shadow: var(--sgx-shadow);
  padding: 20px 22px;
}
.setcard h4 { font-size: 15.5px; font-weight: 700; color: var(--sgx-ink); margin: 0 0 4px; }
.setcard h4::before {
  content: attr(data-eyebrow);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sgx-blue);
  margin-bottom: 3px;
}
.setcard h4:not([data-eyebrow])::before { display: none; }
.setrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--sgx-line-soft);
  font-size: 13.5px;
}
.setrow:last-of-type { border-bottom: 0; }
.setrow > span { color: var(--sgx-mute); }
.setrow > b { color: var(--sgx-ink); font-weight: 600; text-align: right; }
.setnote { font-size: 12.5px; line-height: 1.6; color: var(--sgx-mute); }

/* The settings grid used to be two columns of cards; inside panels it is one calm column. */
.setgrid { display: contents; }

@media (max-width: 900px) {
  .sxlayout { grid-template-columns: 1fr; }
  .sxnav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .sxnav > span { display: none; }
  .sxnav button { white-space: nowrap; }
  .sxbar > span { flex-basis: 46%; border-bottom: 1px solid var(--sgx-line-soft); }
}

/* ============================================================
   PASS 2 (Joey's review). Three orders: settings in the
   reference's ROW LANGUAGE, not just its layout; the passports
   release channels framed properly; API + webhooks in the
   integration-list style.
   ============================================================ */

/* ---- The setting row: icon | copy | status. Ported from sg-setting-row. ---- */
.sxirow {
  display: grid;
  grid-template-columns: 32px minmax(160px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--sgx-line-soft);
}
.sxirow:last-child { border-bottom: 0; }
.sxirow:hover { background: #fafbfd; }
.sxico {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 1px solid #dce4ef;
  border-radius: 8px;
  color: #3e5b84;
  background: #fbfcfe;
}
.sxico .vic { width: 16px; height: 16px; }
.sxcopy { display: grid; gap: 2px; min-width: 0; }
.sxcopy strong { font-size: 13.5px; font-weight: 650; color: var(--sgx-ink); }
.sxcopy small { font-size: 12px; color: var(--sgx-mute); }
.sxstat {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--sgx-line);
  color: var(--sgx-soft);
  background: #fff;
  white-space: nowrap;
  justify-self: end;
}
.sxstat.success { background: var(--sgx-green-bg); color: var(--sgx-green); border-color: #c6ecd9; }
.sxstat.warning { background: var(--sgx-amber-bg); color: var(--sgx-amber); border-color: #f5e0b8; }

/* ---- The switch row. The input stays a real checkbox (renderers read .checked); the pill is drawn. ---- */
.sxswitch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 58px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--sgx-line-soft);
  cursor: pointer;
}
.sxswitch:last-of-type { border-bottom: 0; }
.sxswitch > span { display: grid; gap: 2px; }
.sxswitch > span strong { font-size: 13.5px; font-weight: 650; color: var(--sgx-ink); }
.sxswitch > span small { font-size: 12px; color: var(--sgx-mute); line-height: 1.5; }
.sxswitch input { position: absolute; opacity: 0; pointer-events: none; }
.sxswitch > i {
  position: relative;
  width: 40px; height: 23px;
  flex: none;
  border: 1px solid #c7d0dc;
  border-radius: 999px;
  background: #e8ecf2;
  transition: background .15s ease, border-color .15s ease;
}
.sxswitch > i > span {
  position: absolute;
  top: 2px; left: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 29, 58, .2);
  transition: transform .15s ease;
}
.sxswitch input:checked + i { border-color: var(--sgx-blue); background: var(--sgx-blue); }
.sxswitch input:checked + i > span { transform: translateX(17px); }
.sxswitch input:focus-visible + i { outline: 3px solid rgba(47, 87, 232, .28); outline-offset: 2px; }

/* ---- Team list: the existing dsig rows in sg-team-row proportions. CSS only. ---- */
[data-sxpanel] .dsig-row {
  min-height: 58px;
  border-bottom: 1px solid var(--sgx-line-soft);
  padding-top: 6px;
  padding-bottom: 6px;
}
[data-sxpanel] .dsig-row:last-child { border-bottom: 0; }
[data-sxpanel] .dsig-av { width: 34px; height: 34px; font-weight: 800; font-size: 11px; }
[data-sxpanel] .dsig-nm b { font-size: 13.5px; font-weight: 650; color: var(--sgx-ink); }
[data-sxpanel] .dsig-nm i { font-size: 12px; color: var(--sgx-mute); }
[data-sxpanel] .trole { border-radius: 8px !important; border-color: var(--sgx-line) !important; padding: 6px 8px !important; }

/* ---- The plan-gate note (the reference's sg-plan-note): gating said as a card, not buried. ---- */
.setnote[data-featlock] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #cfdcf7;
  border-radius: 9px;
  background: #f5f8ff;
  color: #435a7b;
  font-size: 12.5px;
  line-height: 1.55;
}
.setnote[data-featlock]::before { content: "\1F512"; font-size: 14px; line-height: 1.2; }

/* ============================================================
   API + WEBHOOKS: the integration-list row.
   icon | name + description | code | status | action
   ============================================================ */
.sxint { display: grid; border-top: 1px solid var(--sgx-line-soft); }
.sxint > div {
  display: grid;
  grid-template-columns: 36px minmax(150px, 1.4fr) minmax(120px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--sgx-line-soft);
}
.sxint > div:last-child { border-bottom: 0; }
.sxint > div:hover { background: #fafbfd; }
.sxint .sxcopy strong { font-size: 13px; }
.sxint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--sgx-soft);
  background: #f6f8fa;
  border: 1px solid var(--sgx-line-soft);
  border-radius: 7px;
  padding: 4px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.sxint .sxact {
  border: 1px solid var(--sgx-line);
  background: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sgx-soft);
  cursor: pointer;
  white-space: nowrap;
}
.sxint .sxact:hover { color: var(--sgx-blue); border-color: #c9d2ff; }
.sxint .sxact.danger { color: var(--sgx-red); }
.sxint .sxact.danger:hover { border-color: #f6c9c5; }
[data-view="api"] .panel-card {
  border: 1px solid var(--sgx-line);
  border-radius: var(--sgx-radius);
  box-shadow: var(--sgx-shadow);
}

/* ============================================================
   PASSPORTS: the release channels as first-class toggle cards.
   Existing markup (.epchan with aria-pressed) and wiring untouched.
   ============================================================ */
#epChannelNav .epchan {
  position: relative;
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--sgx-line);
  border-radius: var(--sgx-radius);
  background: var(--sgx-card);
  padding: 16px 16px 14px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#epChannelNav .epchan:hover { border-color: #b9c6f2; }
#epChannelNav .epchan[aria-pressed="true"] {
  border-color: var(--sgx-blue);
  background: #f7f9ff;
  box-shadow: 0 0 0 1px var(--sgx-blue) inset;
}
#epChannelNav .epchan::after {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 38px; height: 22px;
  border: 1px solid #c7d0dc;
  border-radius: 999px;
  background: #e8ecf2;
  transition: background .15s ease, border-color .15s ease;
}
#epChannelNav .epchan::before {
  content: "";
  position: absolute;
  top: 17px; right: 33px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 29, 58, .2);
  z-index: 1;
  transition: transform .15s ease;
}
#epChannelNav .epchan[aria-pressed="true"]::after { border-color: var(--sgx-blue); background: var(--sgx-blue); }
#epChannelNav .epchan[aria-pressed="true"]::before { transform: translateX(16px); }
#epChannelNav .ec-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding-right: 52px;
}
#epChannelNav .ec-h { font-size: 14.5px; font-weight: 700; color: var(--sgx-ink); padding-right: 52px; }
#epChannelNav .epchan span:not(.ec-eyebrow):not(.ec-h) { font-size: 12px; color: var(--sgx-mute); line-height: 1.55; }

/* ============================================================
   LOTS TABLE: calm the inline guidance. The facts stay; they
   read as a quiet framed note clamped to two lines, and the
   full text returns on row hover or keyboard focus.
   ============================================================ */
.rgtbl .rg-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  padding: 7px 10px;
  border-left: 3px solid currentColor;
  border-radius: 6px;
  background: rgba(180, 38, 31, .05);
  font-size: 11.5px;
  line-height: 1.5;
  max-width: 520px;
}
.rgtbl tr:hover .rg-sub,
.rgtbl tr:focus-within .rg-sub { -webkit-line-clamp: unset; }

/* Tap-to-expand companion for the hover rule above: touch devices cannot hover, so a tap toggles
   the same expansion via one delegated handler in app.js. */
.rgtbl .rg-sub.rg-sub-open { -webkit-line-clamp: unset; }
.rgtbl .rg-sub { cursor: pointer; }

/* ============================================================
   LOT STEPPER (design/lot-stepper). The reference's six-step
   workflow header inside the lot drawer, plus the coverage
   ring. All states computed from the lot's real fields.
   ============================================================ */
.lsx-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 10px;
  padding: 12px;
  border: 1px solid var(--sgx-line);
  border-radius: 10px;
  background: #fbfcfe;
}
/* THREE COLUMNS DOES NOT FIT A PHONE. (2026-08-06, walked and measured)
   At 375 the drawer's inner width is 316px, so each of the three cells got 71px: a 26px dot and 37px
   for the label. Measured, every step overflowed its cell and the ancestor cut it, so the lot record,
   which is the centre of the product, told the operator "Check documen" and "Issue Passpor".
   Two columns give the label 108px, which fits the longest of them. Desktop is untouched. */
@media (max-width: 620px) { .lsx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lsx-step { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0; }
.lsx-step .lsx-dot {
  grid-row: 1 / span 2;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 12px; font-weight: 800;
  border: 2px solid var(--sgx-line);
  color: var(--sgx-mute);
  background: #fff;
}
.lsx-step b { font-size: 11.5px; font-weight: 700; color: var(--sgx-mute); line-height: 1.25; }
.lsx-step i { font-style: normal; font-size: 10.5px; color: var(--sgx-mute); opacity: .85; line-height: 1.3; }
.lsx-step.done .lsx-dot { border-color: #0e8a5f; background: #0e8a5f; color: #fff; }
.lsx-step.done b { color: var(--sgx-ink); }
.lsx-step.cur .lsx-dot { border-color: var(--sgx-blue); color: var(--sgx-blue); box-shadow: 0 0 0 3px rgba(30, 99, 255, .14); }
.lsx-step.cur b { color: var(--sgx-blue-ink); }
.lsx-step.hold .lsx-dot { border-color: var(--sgx-red); background: var(--sgx-red-bg); color: var(--sgx-red); }
.lsx-step.hold b { color: var(--sgx-red); }
.lsx-ready {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--sgx-line);
  border-radius: 10px;
  background: #fff;
}
.lsx-ring {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.lsx-ring b {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; color: var(--sgx-ink);
}
.lsx-ready-copy { display: grid; gap: 2px; min-width: 160px; flex: 1; }
.lsx-ready-copy small { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--sgx-blue); }
.lsx-ready-copy b { font-size: 13px; font-weight: 700; color: var(--sgx-ink); }
.lsx-ready-copy i { font-style: normal; font-size: 10.5px; color: var(--sgx-mute); line-height: 1.4; }
.lsx-gates { display: grid; gap: 4px; }
.lsx-gates em { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.lsx-gates em.ok { background: var(--sgx-green-bg); color: var(--sgx-green); }
.lsx-gates em.warn { background: var(--sgx-amber-bg); color: var(--sgx-amber); }
.lsx-gates em.bad { background: var(--sgx-red-bg); color: var(--sgx-red); }