/* signals-board.css — the Board view: the session pipeline, the blocked band,
   the rejection ledger, the order flight deck, data quality, hard gates and
   the event console.

   Tokens only. Every colour here resolves through the design system, so dark
   mode needs no second ruleset and a series colour keeps its slot (--s1..--s8)
   between the band's stacked segments and its legend.

   Scope note: the two `.dash-two.sg-board-grid` rows in index.html hold this
   view's four side-by-side panels. The default .dash-two ratio (1.75fr / 1fr)
   is built for a wide table beside a narrow rail; these four are peers, so
   they are re-columned here rather than in the shared sheet. */

.sg-board-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ── the stated verdict ─────────────────────────────────────────────── */
/* One sentence at the top of a panel, in the same shape as a banner but
   quieter: it is a reading, not an interrupt. */
.sg-verdict {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
  padding: 11px 14px; margin-bottom: 16px; font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); color: var(--muted);
}
.sg-verdict b { font-weight: 650; color: var(--text); }
.sg-verdict.ok { border-color: var(--pos-bd); background: var(--pos-bg); }
.sg-verdict.warn { border-color: var(--warn-bd); background: var(--warn-bg); }
.sg-verdict.bad { border-color: var(--neg-bd); background: var(--neg-bg); }

/* ── the session pipeline ───────────────────────────────────────────── */
.pipe-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.pipe-head:first-child { margin-top: 0; }
.pipe-head h4 { font-size: 12px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--text-2); }
.pipe-head .hint { font-size: 11.5px; }

.sg-pipe { display: flex; flex-direction: column; }
.pipe-row {
  display: grid; grid-template-columns: 148px 62px minmax(60px, 1fr) minmax(0, 1.5fr);
  gap: 12px; align-items: center; padding: 5px 0; font-size: 12.5px;
}
.pipe-row .pl { color: var(--text-2); }
.pipe-row .pv { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pipe-row .pn { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-row .pn .warn { color: var(--warn); }
.pipe-row.ok .pv { color: var(--pos); }
.pipe-row.warn .pv { color: var(--warn); }
.pipe-row.bad .pv { color: var(--neg); }

.pipe-row .pbar { display: block; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pipe-row .pbar > i { display: block; height: 100%; border-radius: 99px; background: var(--text-2); transition: width .3s var(--ease); }
.pipe-row.ok .pbar > i { background: var(--pos); }
.pipe-row.warn .pbar > i { background: var(--warn); }
.pipe-row.bad .pbar > i { background: var(--neg); }
/* A skipped bar produced no evaluation at all. Hatched, because a flat bar
   at zero would read as "nothing was blocked" — which is the opposite. */
.pipe-row .pbar.gap {
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 4px, var(--border-2) 4px 8px);
}

/* ── blocked across the session ─────────────────────────────────────── */
.sg-band {
  display: flex; align-items: flex-end; gap: 1px; height: 84px; margin-top: 4px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2);
  overflow-x: auto; scrollbar-width: thin;
}
.band-col { position: relative; flex: 1 0 5px; min-width: 3px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.band-col > i { display: block; width: 100%; background: var(--border-2); }
.band-col > i:first-child { border-radius: 2px 2px 0 0; }
.band-col > i.none { height: 2px; background: var(--border); }
.band-col.gap { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--border-2) 3px 6px); border-radius: 2px; }
/* A column only carries a tooltip, so the hover mark is neutral -- accent
   would promise a click that does nothing. */
.band-col:hover { outline: 1px solid var(--text-2); outline-offset: 1px; }

.band-axis { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; font-size: 11px; color: var(--faint); }
.band-axis span:nth-child(2) { color: var(--muted); }
.band-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.band-legend .chip { height: 24px; padding: 0 8px; font-size: 11.5px; gap: 6px; }
.band-legend .chip i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.band-legend .chip b { font-variant-numeric: tabular-nums; color: var(--text); }

/* ── rejection ledger ───────────────────────────────────────────────── */
.rej-group { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 8px; overflow: hidden; }
.rej-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.rej-head .rej-label {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 550; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rej-head .icon-btn { flex-shrink: 0; width: 24px; height: 24px; font-size: 12px; }
.rej-row { display: grid; grid-template-columns: 58px 84px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid var(--border); }
.rej-row:last-of-type { border-bottom: none; }
.rej-row.clickable { cursor: pointer; transition: background var(--dur) var(--spring), color var(--dur); }
.rej-row.clickable:hover { background: var(--surface-hover); }
.rej-row.clickable:active { background: var(--surface-3); }
.rej-row.clickable:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent-ring); }
.rej-row .ts { color: var(--faint); font-variant-numeric: tabular-nums; }
.rej-row .sym { font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.rej-row .txt { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rej-more { padding: 5px 10px; }

/* ── order flight deck ──────────────────────────────────────────────── */
.sg-chiprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sg-chiprow .chips { flex-wrap: wrap; }
.sg-chiprow .hint { font-size: 11.5px; }
.metrics.sg-tiles { margin-bottom: 14px; }
/* The tables sit inside .card-pad, which already carries the card's 20px
   gutter; the .tbl's own first/last-cell padding would double it. */
.sg-flight, .sg-qual { margin: 0 -20px; max-height: 360px; overflow-y: auto; }
.sg-flight td.txt { max-width: 260px; }
.sg-flight td.txt .mono { font-size: 11px; display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.sg-flight td.txt .icon-btn { width: 22px; height: 22px; font-size: 11px; vertical-align: bottom; }
.sg-flight .nowrap, .sg-qual .nowrap { white-space: nowrap; }

/* ── data quality ───────────────────────────────────────────────────── */
/* Two by two: these four readings are peers and auto-fit would leave the
   last one alone on a row of its own at half-card width. */
.kpi-grid.sg-qgrid { box-shadow: none; border-radius: var(--r); margin-bottom: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-grid.sg-qgrid .kpi { padding: 12px 14px 13px; }
.kpi-grid.sg-qgrid .kpi:nth-child(2n) { border-right: none; }
.kpi-grid.sg-qgrid .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.kpi-grid.sg-qgrid .kpi-value { font-size: 18px; }
.sg-qual td.why { color: var(--muted); font-size: 11.5px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── event console ──────────────────────────────────────────────────── */
.sg-evc { max-height: 420px; }
.sg-evc .ev { display: grid; grid-template-columns: 62px 124px auto minmax(0, 1fr); gap: 10px; align-items: baseline; }
.sg-evc .ev[data-bsym] { cursor: pointer; transition: background var(--dur) var(--spring); }
.sg-evc .ev[data-bsym]:hover { background: var(--surface-hover); }
.sg-evc .ev[data-bsym]:active { background: var(--surface-3); }
.sg-evc .ev[data-bsym]:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent-ring); }
.sg-evc .ev .code { font-family: var(--mono); font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.sg-evc .ev .sym { font-weight: 600; font-size: 11.5px; color: var(--text-2); }
.sg-evc .ev .msg { white-space: normal; word-break: break-word; }
.sg-evfoot { margin-top: 10px; }

/* ── breakpoints ────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .sg-board-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pipe-row { grid-template-columns: 120px 52px minmax(40px, 1fr); }
  .pipe-row .pn { display: none; }
  .sg-evc .ev { grid-template-columns: 58px auto minmax(0, 1fr); }
  .sg-evc .ev .code { display: none; }
}
@media (max-width: 640px) {
  .sg-flight, .sg-qual { margin: 0 -20px; }
  .band-legend .chip { max-width: 100%; }
}

/* The round-trip column must not wrap: "2.0 s" split across two lines reads
   as two numbers. */
.sg-flight td.num, .sg-qual td.num { white-space: nowrap; }

/* A reason that is no longer blocking anything keeps its colour in the band,
   so the legend has to be able to say "this was earlier, not now". */
.band-legend .chip.past { opacity: .6; }
.band-legend .chip.past b { color: var(--faint); }

/* Account-wide and exchange-wide gates: stated once, above the per-symbol
   table, because gates.js appends them to every symbol's reason list. */
.gate-wide { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.gate-wide-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.gate-wide-row .tag { flex-shrink: 0; }