/* ═══ §12 · TAB: TELEMETRY ════════════════════════════════════════════════════════════ */

.telem-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: var(--sp-lg) 0 var(--sp-sm);
  border-left: 2px solid var(--accent-cyan);
  padding-left: var(--sp-sm);
}
.telem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}
/* a trailing partial row never leaves a dead grid cell — the LAST tile stretches to fill
   whatever remains */
.telem-grid > .telem-card:last-child:nth-child(3n + 1) { grid-column: span 3; }
.telem-grid > .telem-card:last-child:nth-child(3n + 2) { grid-column: span 2; }
.telem-card {
  padding: var(--sp-md) var(--sp-sm);
  text-align: center;
  border-radius: 10px;
  /* grid items default to min-width:auto — a long nowrap value then forces its column wider
     than 1fr and the row overflows the panel. */
  min-width: 0;
}
.telem-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 4px;
  /* IT WRAPS, IT DOES NOT CLIP. A tile is ~105px wide at 390px and these are not all numbers:
     "alpaca-iex (delayed)" is 192px of ink and "PAPER · paper-only" is 173, measured clipped to
     an 87px box — and that second line is the one telling the operator no real money is at risk. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.telem-label {
  font-size: 0.55rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── §12.1 THE SYSTEM MONITOR — whole-tower usage: CPU + per-core, RAM + swap, disk I/O,
   per-GPU. A named-area stack so the layout is deterministic: GPUs share row 1, then CPU,
   MEMORY and DISK each take a full row. ── */
#view-telemetry > .glass-heavy { padding: 12px; }
#view-telemetry > .glass-heavy > .telem-section-label { margin: var(--sp-sm) 0 6px; }

.sysmon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "gpu0 gpu1" "cpu cpu" "mem mem" "io io";
  gap: 8px;
  margin-top: 4px;
}
.sysmon-card.sm-gpu0 { grid-area: gpu0; }
.sysmon-card.sm-gpu1 { grid-area: gpu1; }
.sysmon-card.sm-cpu  { grid-area: cpu; }
.sysmon-card.sm-mem  { grid-area: mem; }
.sysmon-card.sm-io   { grid-area: io; }
.sysmon-card.sm-gpu-solo { grid-column: 1 / -1; grid-row: 1; }
.sysmon-grid.one-gpu { grid-template-areas: "gpu0 gpu0" "cpu cpu" "mem mem" "io io"; }
.sysmon-card {
  background: rgba(10, 16, 28, 0.6);
  border: 1px solid rgba(108, 248, 255, 0.12);
  border-radius: 10px;
  padding: 8px 10px;
}
.sysmon-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sysmon-card-hdr b { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-panel); }
.sysmon-card-hdr b.idle { color: var(--accent-cyan-bright); }
.sysmon-card-hdr b.warm { color: #ffd166; }
.sysmon-card-hdr b.hot  { color: var(--outcome-fade); }
.sysmon-bar {
  height: 7px;
  border-radius: 4px;
  margin: 4px 0 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.sysmon-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.sysmon-bar-fill.idle { background: linear-gradient(90deg, #2a8, var(--accent-cyan-bright)); }
.sysmon-bar-fill.warm { background: linear-gradient(90deg, #fa3, #ffd166); }
.sysmon-bar-fill.hot  { background: linear-gradient(90deg, #f25, var(--outcome-fade)); }
.sysmon-sub {
  font-size: 0.58rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.4;
}
.sysmon-cores { display: flex; align-items: flex-end; gap: 2px; height: 18px; margin: 3px 0 2px; }
.sysmon-core {
  flex: 1 1 auto;
  min-width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.sysmon-core-fill { width: 100%; border-radius: 1px; transition: height 0.4s ease; }
.sysmon-core-fill.idle { background: var(--accent-cyan-bright); }
.sysmon-core-fill.warm { background: #ffd166; }
.sysmon-core-fill.hot  { background: var(--outcome-fade); }
.sysmon-io-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.62rem;
  margin-top: 4px;
  color: #cfe;
}
.sysmon-io-row b { font-family: var(--font-mono); color: var(--accent-cyan-bright); }
.sysmon-down {
  padding: 14px;
  text-align: center;
  font-size: 0.7rem;
  color: #ff8aa0;
  font-family: var(--font-mono);
}
/* segmented bar: CPU usr/sys/iowait · MEM apps/cache/free — same shell as .sysmon-bar */
.sysmon-seg {
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0 4px;
  background: rgba(255, 255, 255, 0.06);
}
.sysmon-seg > i { height: 100%; display: block; transition: width 0.4s ease; }
.sysmon-seg > i.usr, .sysmon-seg > i.used { background: linear-gradient(90deg, #2a8, var(--accent-cyan-bright)); }
.sysmon-seg > i.sys   { background: linear-gradient(90deg, #fa3, #ffd166); }
.sysmon-seg > i.io    { background: linear-gradient(90deg, #f25, var(--outcome-fade)); }
.sysmon-seg > i.cache { background: rgba(108, 248, 255, 0.28); }
.sysmon-seg > i.free  { background: transparent; }
.sysmon-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 4px;
  font-size: 0.56rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  line-height: 1.45;
}
.sysmon-stats b { color: #cfe; font-weight: 600; }
.sysmon-stats .warn b { color: #ffd166; }
.sysmon-stats .crit b { color: var(--outcome-fade); }
.sysmon-cap {
  height: 5px;
  border-radius: 3px;
  margin: 3px 0 2px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.sysmon-cap-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #456, var(--accent-cyan-bright));
  transition: width 0.4s ease;
}
.sysmon-disk { margin-top: 3px; }
.sysmon-disk:first-of-type { margin-top: 2px; }
.sysmon-disk-name { font-size: 0.56rem; font-family: var(--font-mono); color: var(--text-dim); }
/* GPU half-width cards are tight (~199px @414px) — shrink-proof so long names never overflow */
.sysmon-card.sm-gpu0, .sysmon-card.sm-gpu1 { min-width: 0; }
.sysmon-card.sm-gpu0 .sysmon-card-hdr span,
.sysmon-card.sm-gpu1 .sysmon-card-hdr span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11ch;
}
/* GPU detail lines WRAP (not ellipsis) so temp/clocks are never hidden on the narrow card */
.sysmon-card.sm-gpu0 .sysmon-sub,
.sysmon-card.sm-gpu1 .sysmon-sub { white-space: normal; overflow-wrap: anywhere; }
.sysmon-proc {
  font-size: 0.54rem;
  font-family: var(--font-mono);
  color: var(--accent-cyan-bright);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sysmon-proc b { color: var(--accent-cyan-bright); }
.sysmon-proc.empty { color: var(--text-dim); opacity: 0.7; }
/* desktop breathe-back: GPUs row 1, CPU + MEM share row 2, DISK full row 3 */
@media (min-width: 720px) {
  .sysmon-grid { grid-template-areas: "gpu0 gpu1" "cpu mem" "io io"; }
  .sysmon-grid.one-gpu { grid-template-areas: "gpu0 gpu0" "cpu mem" "io io"; }
}

/* ── §12.2 THE GATE SCORECARD — the shadow book's other half, inside the Trade Journal panel.
   One card per selection gate: what it refused, what the tape then did, and the marginal band
   a threshold move would actually re-decide. ── */
.gate-card {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(10, 16, 28, 0.55);
  border: 1px solid rgba(108, 248, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.5;
}
.gate-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.gate-name {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-cyan);
  overflow-wrap: anywhere;
}
.gate-thr { color: var(--text-dim); font-size: 0.58rem; white-space: nowrap; }
/* THE ROW IS A GRID, NOT A FLEX RUN. At 390px the three cells cannot share one line, so the
   key rides row 1 and the value + verdict wrap under it, each keeping its own column. */
.gate-row {
  display: grid;
  grid-template-columns: minmax(0, 8em) minmax(0, 1fr);
  gap: 2px 10px;
  padding: 3px 0;
  align-items: baseline;
}
.gate-k {
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.56rem;
}
.gate-v { color: var(--ink-panel); min-width: 0; overflow-wrap: anywhere; }
.gate-v b { color: var(--accent-cyan-bright); }
.gate-why {
  grid-column: 2;
  color: var(--text-secondary);
  font-size: 0.58rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gate-sub {
  margin: 6px 0 2px;
  color: var(--text-dim);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.gate-note {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  font-size: 0.58rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.gate-note b { color: var(--ink-panel); }
.gate-note code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(0, 229, 255, 0.1);
  color: var(--accent-cyan);
}
/* AN UNREAD INSTRUMENT IS NOT A ZERO. `.gate-dark` is the token for "not yet measured" and it
   must never look like `.gate-flat`, which means measured-and-neutral. */
.gate-dark { color: var(--text-dim); font-style: italic; }
.gate-pos  { color: var(--outcome-win); font-weight: 700; }
.gate-neg  { color: var(--outcome-fade); font-weight: 700; }
.gate-flat { color: var(--text-secondary); }
.gate-dark-card {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 200, 74, 0.05);
  border: 1px solid rgba(255, 200, 74, 0.2);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}