/* ============================================================================
   PR&R × Trybe — INSTRUMENT LAYER
   ---------------------------------------------------------------------------
   Terminal / dense-data components, built on prr-trybe-kit.css tokens.
   Load prr-trybe-kit.css FIRST — this file consumes its --tk-* variables.

   THE STRUCTURAL DECISION
   Trybe's card is a floating object: radius, ring, dual shadow, gaps between
   siblings. A terminal grid cannot have gaps and shadows on every cell — the
   whole point is that the panels read as one continuous instrument.

   So the radius, ring and shadow are spent ONCE, on the outer shell. Everything
   inside is flush, divided by 1px rules produced with `gap:1px` over a rule-
   coloured grid background. Trybe's language then re-enters at the ELEMENT
   level — rows, pills, wells, sparkline treatment, the metric type pattern —
   where density can afford it.

   Namespaced .tkt-* so it cannot collide with .tk-* or PR&R's own classes.
   ========================================================================= */

/* ── scoped semantic palette (light + dark share one variable set) ─────── */
.tkt-shell {
  --tkt-surface:    #ffffff;
  --tkt-surface-2:  #fafbfc;
  --tkt-surface-3:  #f4f6f8;
  --tkt-rule:       #e4e7eb;
  --tkt-rule-soft:  #eef0f3;
  --tkt-t1:         #0a0a0c;
  --tkt-t2:         #1f2937;
  --tkt-t3:         #475569;
  --tkt-t4:         #64748b;
  --tkt-t5:         #94a3b8;
  --tkt-accent:     #2563eb;
  --tkt-accent-soft:#eff6ff;
  --tkt-pos:        #15803d;
  --tkt-pos-soft:   #ecfdf3;
  --tkt-neg:        #b91c1c;
  --tkt-neg-soft:   #fef2f2;
  --tkt-warn:       #a16207;
  --tkt-chip:       #f4f6f8;
  --tkt-hero-tint:  linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 74%);

  position: relative;
  border-radius: var(--tk-rc-xl);
  overflow: hidden;
  background: var(--tkt-surface);
  box-shadow: var(--tk-ring), var(--tk-e3);
  font-family: var(--tk-font-sans);
  color: var(--tkt-t2);
}

/* Values mirror prr-trybe-dark.css so the kit has ONE dark palette, and the
   second selector means a terminal dropped inside a .tk-dark page goes dark
   on its own without being told. */
.tkt-shell.tkt-dark,
.tk-dark .tkt-shell {
  --tkt-surface:    #0B1E42;
  --tkt-surface-2:  #0E2350;
  --tkt-surface-3:  #12305F;
  --tkt-rule:       rgba(148, 183, 255, .14);
  --tkt-rule-soft:  rgba(148, 183, 255, .08);
  --tkt-t1:         #eaf1ff;
  --tkt-t2:         #cfdcf5;
  --tkt-t3:         #9fb4d8;
  --tkt-t4:         #7f95bd;
  --tkt-t5:         #61779f;
  --tkt-accent:     #60a5fa;
  --tkt-accent-soft:rgba(96, 165, 250, .14);
  --tkt-pos:        #4ade80;
  --tkt-pos-soft:   rgba(74, 222, 128, .13);
  --tkt-neg:        #f87171;
  --tkt-neg-soft:   rgba(248, 113, 113, .13);
  --tkt-warn:       #fbbf24;
  --tkt-chip:       rgba(148, 183, 255, .10);
  --tkt-hero-tint:  linear-gradient(180deg, rgba(37,99,235,.18) 0%, rgba(11,30,66,0) 74%);
  box-shadow: 0 0 0 1px rgba(148,183,255,.13), inset 0 1px 0 rgba(255,255,255,.07),
              0 30px 64px -30px rgba(0,0,0,.92);
}

/* run-in-flight state: the ONE place the conic rim earns its keep here */
.tkt-shell.is-running::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 0deg,
    rgba(37,99,235,0) 0deg, #2563eb 38deg, #38bdf8 82deg, rgba(37,99,235,0) 132deg,
    rgba(37,99,235,0) 214deg, #93c5fd 268deg, #1d4ed8 306deg, rgba(37,99,235,0) 356deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tkt-rim 3.2s linear infinite;
}
@keyframes tkt-rim { to { filter: hue-rotate(0deg); } }

/* ============================================================================
   1 · TOP BAR — identity strip
   ========================================================================= */
.tkt-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px; height: 46px;
  border-bottom: 1px solid var(--tkt-rule);
  background: var(--tkt-surface);
}
.tkt-brand { display: flex; align-items: center; gap: 8px; flex: none; }
.tkt-mark {
  width: 20px; height: 20px; border-radius: var(--tk-r-lg); flex: none;
  background: var(--tk-grad-cta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.tkt-wordmark {
  font: 600 11.5px/1 var(--tk-font-mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--tkt-t1);
  white-space: nowrap;
}
.tkt-divider { width: 1px; align-self: stretch; background: var(--tkt-rule); flex: none; }
.tkt-subject { font: 600 15px/1 var(--tk-font-sans); letter-spacing: -.01em; color: var(--tkt-t1); }
.tkt-addr {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0;
  font: 400 11px/1 var(--tk-font-mono); color: var(--tkt-t4); white-space: nowrap;
}
.tkt-addr > span { overflow: hidden; text-overflow: ellipsis; }
.tkt-copy {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border: 0; background: none; cursor: pointer; border-radius: var(--tk-r-lg); color: var(--tkt-t5);
}
.tkt-copy:hover { background: var(--tkt-chip); color: var(--tkt-accent); }
.tkt-spacer { flex: 1; min-width: 0; }

/* search field — Trybe's pill, at instrument scale */
.tkt-search {
  display: flex; align-items: center; gap: 7px; flex: none;
  height: 28px; width: 230px; padding: 0 11px;
  border-radius: var(--tk-rc-pill); background: var(--tkt-surface-2);
  box-shadow: var(--tk-ring-soft);
  color: var(--tkt-t4);
}
.tkt-search input {
  border: 0; background: none; outline: none; width: 100%; min-width: 0;
  font: 400 12.5px/1 var(--tk-font-sans); color: var(--tkt-t2);
}
.tkt-search:focus-within { box-shadow: 0 0 0 1px rgba(37,99,235,.35); background: var(--tkt-surface); }

/* window segmented control — .tk-seg compressed to instrument scale */
.tkt-seg {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  padding: 2px; border-radius: var(--tk-rc-pill);
  background: var(--tkt-surface-2); box-shadow: var(--tk-ring-soft);
}
.tkt-seg button {
  height: 24px; padding: 0 11px; border: 0; cursor: pointer; background: none;
  border-radius: var(--tk-rc-pill);
  font: 500 11px/1 var(--tk-font-mono); letter-spacing: .06em; color: var(--tkt-t4);
  transition: color .16s var(--tk-ease), background .16s var(--tk-ease);
}
.tkt-seg button:hover { color: var(--tkt-t2); }
.tkt-seg button[aria-selected="true"] {
  background: var(--tk-grad-cta); color: #fff;
  box-shadow: 0 4px 10px -6px rgba(29,78,216,.9), inset 0 1px 0 rgba(255,255,255,.28);
}
.tkt-run {
  height: 28px; padding: 0 16px; border: 0; cursor: pointer; flex: none;
  border-radius: var(--tk-rc-pill); background: var(--tk-grad-cta); color: #fff;
  font: 500 12.5px/1 var(--tk-font-sans);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px -10px rgba(29,78,216,.9);
}

/* ============================================================================
   2 · LENS BAR — numbered tabs + right-hand readouts
   ========================================================================= */
.tkt-lensbar {
  display: flex; align-items: center; gap: 4px;
  padding: 0 12px; height: 38px;
  border-bottom: 1px solid var(--tkt-rule);
  background: var(--tkt-surface-2);
  overflow-x: auto; scrollbar-width: none;
}
.tkt-lensbar::-webkit-scrollbar { display: none; }
.tkt-lens {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 26px; padding: 0 10px 0 5px; border: 0; cursor: pointer;
  border-radius: var(--tk-rc-pill); background: none;
  font: 500 11.5px/1 var(--tk-font-mono); letter-spacing: .08em;
  color: var(--tkt-t4); text-transform: uppercase;
  transition: background .16s var(--tk-ease), color .16s var(--tk-ease);
}
.tkt-lens-n {
  display: grid; place-items: center; width: 17px; height: 17px; flex: none;
  border-radius: var(--tk-r-lg); background: var(--tkt-chip);
  font: 600 10px/1 var(--tk-font-mono); color: var(--tkt-t4);
}
.tkt-lens i {
  width: 4px; height: 4px; border-radius: var(--tk-rc-pill); flex: none;
  background: var(--tkt-accent);
}
.tkt-lens:hover { background: var(--tkt-chip); color: var(--tkt-t2); }
.tkt-lens[aria-selected="true"] {
  background: var(--tkt-surface); color: var(--tkt-t1);
  box-shadow: var(--tk-ring), var(--tk-e1);
}
.tkt-lens[aria-selected="true"] .tkt-lens-n { background: var(--tk-grad-cta); color: #fff; }
.tkt-lens[disabled] { opacity: .42; cursor: default; }
.tkt-lens[disabled]:hover { background: none; color: var(--tkt-t4); }

/* right-hand readouts: mono label + sans value, repeated */
.tkt-readout { display: inline-flex; align-items: baseline; gap: 7px; flex: none; padding: 0 12px; }
.tkt-readout-l {
  font: 400 10.5px/1 var(--tk-font-mono); letter-spacing: .06em; color: var(--tkt-t5);
}
.tkt-readout-v {
  font: 600 12px/1 var(--tk-font-sans); letter-spacing: -.01em; color: var(--tkt-t2);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   3 · GRID + PANEL — flush cells, 1px rules from a gapped grid background
   ========================================================================= */
.tkt-grid {
  display: grid; gap: 1px;
  background: var(--tkt-rule);
  border-bottom: 1px solid var(--tkt-rule);
}
.tkt-panel {
  background: var(--tkt-surface);
  padding: 14px 16px 16px;
  min-width: 0;
}
.tkt-panel--tint { background: var(--tkt-hero-tint), var(--tkt-surface); }
.tkt-panel--flush { padding: 0; }

.tkt-panel-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 14px;
}
.tkt-cap {
  font: 600 10px/1 var(--tk-font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--tkt-t3);
  white-space: nowrap;
}
.tkt-capsub {
  font: 400 11px/1 var(--tk-font-sans); color: var(--tkt-t5);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkt-panel-head .tkt-spacer { flex: 1; }

/* ============================================================================
   4 · NUMBERS — one instrument type scale
        10 mono caption · 11 label · 12–13 value · 20 cell · 26 vital · 38 hero
        Every numeric element is tabular. Colour encodes SIGN ONLY.
   ========================================================================= */
.tkt-num { font-variant-numeric: tabular-nums; }
.tkt-pos { color: var(--tkt-pos); }
.tkt-neg { color: var(--tkt-neg); }
.tkt-null { color: var(--tkt-t5); }

.tkt-hero {
  font: 700 clamp(30px, 3.4vw, 38px)/1 var(--tk-font-sans);
  letter-spacing: -.025em; color: var(--tkt-t1);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.tkt-breakdown {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  font: 400 12px/1.5 var(--tk-font-sans); color: var(--tkt-t4);
  margin: 10px 0 0; font-variant-numeric: tabular-nums;
}
.tkt-breakdown span + span::before { content: "·"; margin-right: 8px; color: var(--tkt-t5); }

/* 2×2 stat quadrant with hairline dividers */
.tkt-quad {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--tkt-rule-soft);
  margin-top: 18px;
  border-top: 1px solid var(--tkt-rule-soft);
}
.tkt-cell { background: var(--tkt-surface); padding: 14px 16px 14px 0; }
.tkt-cell:nth-child(even) { padding-left: 16px; }
.tkt-cell-l {
  font: 400 11.5px/1 var(--tk-font-sans); color: var(--tkt-t4); margin: 0 0 8px;
}
.tkt-cell-v {
  font: 600 20px/1 var(--tk-font-sans); letter-spacing: -.015em; color: var(--tkt-t1);
  font-variant-numeric: tabular-nums; margin: 0;
}
.tkt-cell-s {
  font: 400 11.5px/1.35 var(--tk-font-sans); color: var(--tkt-t5); margin: 7px 0 0;
}

/* ============================================================================
   5 · LEDGER ROWS — label + sub / value / proportional bar
        This is Trybe's .tk-mini-row promoted to full size.
   ========================================================================= */
.tkt-ledger { display: flex; flex-direction: column; }
.tkt-lrow { padding: 12px 0; border-bottom: 1px solid var(--tkt-rule-soft); }
.tkt-lrow:last-child { border-bottom: 0; }
.tkt-lrow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.tkt-lrow-l { font: 400 13.5px/1.3 var(--tk-font-sans); color: var(--tkt-t2); }
.tkt-lrow-s { font: 400 11.5px/1.3 var(--tk-font-sans); color: var(--tkt-t5); margin-top: 4px; }
.tkt-lrow-v {
  font: 600 13.5px/1 var(--tk-font-sans); color: var(--tkt-t1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tkt-track {
  height: 4px; border-radius: var(--tk-rc-pill); background: var(--tkt-surface-3);
  margin-top: 10px; overflow: hidden;
}
.tkt-fill { display: block; height: 100%; border-radius: var(--tk-rc-pill); background: var(--tkt-accent); }
.tkt-fill--pos { background: linear-gradient(90deg, #15803d, #22c55e); }
.tkt-fill--neg { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.tkt-fill--blue{ background: linear-gradient(90deg, #1d4ed8, #60a5fa); }

/* total line — a rule and a weight change, never a fill */
.tkt-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--tkt-rule);
}
.tkt-total-l { font: 600 13.5px/1 var(--tk-font-sans); color: var(--tkt-t1); }
.tkt-total-v {
  font: 700 16px/1 var(--tk-font-sans); letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   6 · KV LIST — two variants, and the rule for choosing
        --boxed   ≤ 8 rows, mixed types, marketing-adjacent  (Trybe flavour)
        default   long uniform lists where density wins       (instrument)
   ========================================================================= */
.tkt-kv { display: flex; flex-direction: column; }
.tkt-kvrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--tkt-rule-soft);
}
.tkt-kvrow:last-of-type { border-bottom: 0; }
.tkt-kv-l { font: 400 13px/1.35 var(--tk-font-sans); color: var(--tkt-t3); min-width: 0; }
.tkt-kv-v {
  font: 500 13px/1 var(--tk-font-sans); color: var(--tkt-t1);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tkt-kv--boxed .tkt-kvrow {
  border-bottom: 0; margin-bottom: 4px; padding: 9px 11px;
  background: var(--tkt-surface-2); border-radius: var(--tk-rc-xs);
  box-shadow: var(--tk-ring-soft);
}
.tkt-kv-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--tkt-rule);
}
.tkt-kv-foot + .tkt-kvrow { border-bottom: 0; }

/* ============================================================================
   7 · CHECK ROWS
   ========================================================================= */
.tkt-check {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--tkt-rule-soft);
}
.tkt-check-l { font: 400 13px/1.3 var(--tk-font-sans); color: var(--tkt-t3); }
.tkt-verdict {
  font: 600 12px/1 var(--tk-font-sans); color: var(--tkt-pos);
}
.tkt-verdict--fail { color: var(--tkt-neg); }

/* ============================================================================
   8 · VITALS — the right rail. Small Trybe cards, not flush cells:
        scanning a vertical stack is easier when each block is an object.
   ========================================================================= */
.tkt-vitals { display: flex; flex-direction: column; gap: 10px; }
.tkt-vital {
  padding: 12px 13px; border-radius: var(--tk-rc-md);
  background: var(--tkt-surface); box-shadow: var(--tk-ring-soft), var(--tk-e1);
}
.tkt-dark .tkt-vital,
.tk-dark .tkt-shell .tkt-vital { background: var(--tkt-surface-2); box-shadow: 0 0 0 1px var(--tkt-rule-soft); }
.tkt-vital-l { font: 400 11.5px/1 var(--tk-font-sans); color: var(--tkt-t4); margin: 0 0 9px; }
.tkt-vital-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tkt-vital-v {
  font: 600 25px/1 var(--tk-font-sans); letter-spacing: -.02em; color: var(--tkt-t1);
  font-variant-numeric: tabular-nums;
}
.tkt-vital-s { font: 400 11px/1.4 var(--tk-font-sans); color: var(--tkt-t5); margin: 8px 0 0; }

/* ── sparklines ─────────────────────────────────────────────────────────
   Rounded 2px caps, a fixed 26px band, tabular value alongside. Bars for
   volume, a line for a series, split bars for a signed daily series.      */
.tkt-spark { display: flex; align-items: flex-end; gap: 2px; height: 26px; flex: none; }
.tkt-spark i { width: 3px; border-radius: var(--tk-r-xs); background: var(--tkt-accent); opacity: .55; }
.tkt-spark i.on { opacity: 1; }
.tkt-spark--neg i { background: var(--tkt-neg); }
.tkt-spark--pos i { background: var(--tkt-pos); }
.tkt-spark-split { display: flex; align-items: center; gap: 2px; height: 26px; flex: none; }
.tkt-spark-split i { width: 3px; border-radius: var(--tk-r-xs); }
.tkt-spark svg { overflow: visible; }

/* ============================================================================
   9 · CHART FURNITURE
   ========================================================================= */
.tkt-plot { position: relative; width: 100%; }
.tkt-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.tkt-gridline { stroke: var(--tkt-rule-soft); stroke-width: 1; }
.tkt-zeroline { stroke: var(--tkt-rule); stroke-width: 1; }
.tkt-axis {
  font: 400 10px/1 var(--tk-font-mono); fill: var(--tkt-t5);
  font-variant-numeric: tabular-nums;
}
.tkt-legend { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.tkt-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 11px/1 var(--tk-font-sans); color: var(--tkt-t4);
}
.tkt-legend-item i { width: 9px; height: 9px; border-radius: var(--tk-r-xs); flex: none; }
.tkt-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 12px;
  font: 400 11px/1.4 var(--tk-font-sans); color: var(--tkt-t5);
}

/* ============================================================================
   10 · NEW GRAPHICS — forms the terminal wants but does not yet have
   ========================================================================= */

/* ratio bar — "199 / 201 resolved" made legible at a glance */
.tkt-ratio { display: flex; flex-direction: column; gap: 9px; }
.tkt-ratio-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font: 400 12px/1.35 var(--tk-font-sans); color: var(--tkt-t4);
}
.tkt-ratio-top > span:first-child { min-width: 0; }
.tkt-ratio-v {
  font: 600 13px/1 var(--tk-font-sans); color: var(--tkt-t1);
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: none;
}
.tkt-ratio-v small { color: var(--tkt-t5); font-weight: 400; }

/* delta chip — a signed change, never a bare number */
.tkt-delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: var(--tk-rc-pill);
  font: 600 11px/1 var(--tk-font-sans); font-variant-numeric: tabular-nums;
  background: var(--tkt-chip); color: var(--tkt-t3);
}
.tkt-delta--pos { background: var(--tkt-pos-soft); color: var(--tkt-pos); }
.tkt-delta--neg { background: var(--tkt-neg-soft); color: var(--tkt-neg); }

/* split bar — one bar, two signed segments (won / lost, buys / sells) */
.tkt-split { display: flex; height: 8px; border-radius: var(--tk-rc-pill); overflow: hidden; background: var(--tkt-surface-3); }
.tkt-split i { display: block; height: 100%; }
.tkt-split-key {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; font: 400 11.5px/1 var(--tk-font-sans); color: var(--tkt-t4);
  font-variant-numeric: tabular-nums;
}

/* dot matrix — occupancy over a period ("96 of 720 hours deployed") */
.tkt-matrix { display: grid; gap: 2px; }
.tkt-matrix i { border-radius: var(--tk-r-xs); background: var(--tkt-rule-soft); aspect-ratio: 1; }
.tkt-matrix i.on { background: var(--tkt-accent); }
.tkt-matrix i.hot { background: #1d4ed8; }
.tkt-dark .tkt-matrix i.hot,
.tk-dark .tkt-shell .tkt-matrix i.hot { background: #93c5fd; }

/* gauge — a signed value against the threshold it must clear.
   Zero is an explicit tick, and the bar is drawn FROM zero: a negative value
   rendered as a positive-width bar from the left edge is a lie. */
.tkt-gauge { position: relative; height: 46px; margin-top: 4px; }
.tkt-gauge-track { position: absolute; inset: 20px 0 auto; height: 6px; border-radius: var(--tk-rc-pill); background: var(--tkt-surface-3); }
.tkt-gauge-fill  { position: absolute; top: 20px; height: 6px; border-radius: var(--tk-rc-pill); }
.tkt-gauge-zero  { position: absolute; top: 12px; height: 22px; width: 1px; background: var(--tkt-rule); }
.tkt-gauge-zero::after {
  content: "0"; position: absolute; left: 50%; top: 24px; transform: translateX(-50%);
  font: 400 9px/1 var(--tk-font-mono); color: var(--tkt-t5);
}
.tkt-gauge-mark { position: absolute; top: 12px; height: 22px; width: 2px; border-radius: var(--tk-r-xs); background: var(--tkt-t2); }
.tkt-gauge-mark::after {
  content: attr(data-label); position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
  font: 600 9.5px/1 var(--tk-font-mono); letter-spacing: .06em; color: var(--tkt-t3); white-space: nowrap;
}

/* bridge — the reconciliation as a real waterfall: each bar floats at its
   cumulative position, so the eye follows the balance down instead of
   comparing five independent heights. Fees are NOT a step — they are already
   inside gross gains and losses; adding a fee bar double-counts them. */
.tkt-bridge {
  position: relative; display: flex; align-items: stretch; gap: 10px;
  height: 150px; margin: 20px 0 24px;
}
.tkt-bridge-zero { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--tkt-rule); }
.tkt-bcol { position: relative; flex: 1; min-width: 0; }
.tkt-bbar { position: absolute; left: 0; right: 0; border-radius: var(--tk-r-md); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.tkt-bval {
  position: absolute; left: -8px; right: -8px; text-align: center;
  font: 600 10.5px/1 var(--tk-font-sans); font-variant-numeric: tabular-nums;
}
.tkt-blab {
  position: absolute; left: -8px; right: -8px; bottom: -18px; text-align: center;
  font: 400 9.5px/1 var(--tk-font-mono); letter-spacing: .04em; color: var(--tkt-t5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================================
   11 · STATUS BAR
   ========================================================================= */
.tkt-statusbar {
  display: flex; align-items: center; gap: 0;
  height: 30px; padding: 0 14px;
  background: var(--tkt-surface-2);
  overflow-x: auto; scrollbar-width: none;
}
.tkt-statusbar::-webkit-scrollbar { display: none; }
.tkt-sb {
  display: inline-flex; align-items: baseline; gap: 6px; flex: none; padding-right: 14px;
  font: 400 10px/1 var(--tk-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tkt-t5); white-space: nowrap;
}
.tkt-sb b { font-weight: 600; color: var(--tkt-t3); }
.tkt-sb + .tkt-sb { padding-left: 14px; border-left: 1px solid var(--tkt-rule); }

/* ============================================================================
   12 · RESPONSIVE — the grid collapses; the type scale does not
   ========================================================================= */
@media (max-width: 900px) {
  .tkt-grid { grid-template-columns: 1fr !important; }
  .tkt-quad { grid-template-columns: 1fr; }
  .tkt-cell, .tkt-cell:nth-child(even) { padding: 12px 0; }
  .tkt-topbar { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 10px; }
  .tkt-search { width: 100%; order: 9; }
}
@media (prefers-reduced-motion: reduce) {
  .tkt-shell.is-running::after { animation: none; }
}

/* ============================================================================
   13 · SIGN LAYER — must load last and outrank every component colour.
        .tkt-kv-v / .tkt-lrow-v / .tkt-cell-v all set `color`, so a bare
        .tkt-pos loses to them on source order. Scoping to .tkt-shell makes the
        sign one class heavier, which is the whole point: sign wins, always.
   ========================================================================= */
.tkt-shell .tkt-pos  { color: var(--tkt-pos); }
.tkt-shell .tkt-neg  { color: var(--tkt-neg); }
.tkt-shell .tkt-null { color: var(--tkt-t5); }