/* ── Trenches — high-density discovery board ─────────────────────────────────────────
   Standalone stylesheet: trenches.html loads shared/style.css (theme tokens, nav,
   footer, .verdict-badge, .safety-reason) and shared/theme.css (the .sniper-theme
   neon-terminal palette — ONE canonical copy for the whole site now, no longer
   hand-duplicated here) but deliberately NOT snipe.css — that file is 6,000+ lines of
   Sniper Desk board styling this page doesn't use. */

/* ── Nav account pill ─────────────────────────────────────────────────────────────── */
.trenches-account-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink-dim);
  text-decoration: none;
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  padding: 7px 12px;
  transition: border-color .15s, color .15s;
}
.trenches-account-pill:hover { border-color: rgba(var(--pin-rgb),0.4); color: var(--paper); }
.trenches-account-pill.is-signed-in { color: var(--safe); border-color: rgba(var(--safe-rgb),0.3); }
.trenches-account-pill.is-live { color: var(--danger); border-color: rgba(var(--danger-rgb),0.4); }

/* ── App shell ────────────────────────────────────────────────────────────────────── */
.trenches-app {
  position: relative;
  z-index: 2;
  max-width: 1880px;
  margin: 0 auto;
  padding: 22px 26px 60px;
  /* body is a column flexbox (shared/style.css), and a flex item's automatic minimum
     size is its content's min-content width — which let the board TABLE's ~630px
     propagate up and horizontally scroll the whole page on phones, instead of scrolling
     inside .trenches-board-wrap's own overflow:auto as designed. min-width: 0 restores
     that containment (2026-09-06 release sweep, mobile probe). */
  min-width: 0;
  width: 100%;
}

.trenches-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.trenches-toolbar-title { display: flex; align-items: center; gap: 16px; }
/* ── Mission strip — a wordmark + a small tactical subtitle, not a generic page <h1>.
   Kept restrained: one accent color (pin/amber), no glow, no animation on the text
   itself — see .trenches-live-dot below for where the one live-motion cue lives. */
.trenches-brand-block { display: flex; flex-direction: column; gap: 1px; line-height: 1; }
.trenches-toolbar-title h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--paper);
  letter-spacing: .06em;
}
.trenches-brand-subtitle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--pin);
  opacity: .85;
}
.trenches-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-dim);
  padding-left: 14px;
  border-left: 1px solid var(--card-edge);
}
.trenches-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--safe);
  box-shadow: 0 0 8px rgba(var(--safe-rgb),0.7);
  animation: tr-pulse 1.8s infinite;
}
@keyframes tr-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* Real counts, written by updateTabCounts from the SAME tabRows() data the tab badges
   use — never a separate/decorative estimate. */
.trenches-telemetry {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-dim);
  white-space: nowrap;
}
.trenches-telemetry b { color: var(--paper); font-weight: 600; }
.trenches-search-input {
  width: 300px;
  max-width: 40vw;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 9px 12px;
  letter-spacing: .02em;
}
.trenches-search-input::placeholder { color: var(--ink-dim); letter-spacing: .04em; }
.trenches-search-input:focus { outline: none; border-color: rgba(var(--pin-rgb),0.5); }

/* ── Tabs ─────────────────────────────────────────────────────────────────────────── */
.trenches-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.trenches-tab {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-dim);
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color .15s, color .15s, background .15s;
}
.trenches-tab:hover { color: var(--paper); border-color: rgba(var(--pin-rgb),0.35); }
.trenches-tab.is-active {
  color: var(--board);
  background: var(--pin);
  border-color: var(--pin);
}
.trenches-tab-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.25);
  border-radius: 999px;
  padding: 1px 7px;
}
.trenches-tab.is-active .trenches-tab-count { background: rgba(0,0,0,0.2); }
/* Each mode gets a quiet dot in its own accent color, matching that tab's actual
   population's dominant meaning (CLEARED=safe, CAUTION=amber, everything else neutral
   until active) — a hint, not a repaint of the whole pill. Copy-only renames elsewhere
   (NEW SIGNALS/MOMENTUM/CLEARED) — the underlying tabRows() logic is untouched. */
.trenches-tab::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-dim);
  flex-shrink: 0;
}
.trenches-tab[data-tab="safe"]::before { background: var(--safe); }
.trenches-tab[data-tab="caution"]::before { background: var(--pin); }
.trenches-tab[data-tab="migrating"]::before { background: var(--creator, #8a7fff); }
.trenches-tab.is-active::before { background: var(--board); }

/* Phase 8, item 1 — the NEW SIGNALS sort control (replaces the old separate MOMENTUM tab).
   Deliberately smaller/quieter than the tab pills themselves — this is a sort choice WITHIN
   one tab, not a second row of tabs. */
.trenches-sort-row { display: flex; align-items: center; gap: 6px; margin: -6px 0 14px; }
.trenches-sort-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--ink-dim);
  margin-right: 2px;
}
.trenches-sort-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--card-edge);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
}
.trenches-sort-btn:hover { color: var(--paper); border-color: rgba(var(--pin-rgb),0.4); }
.trenches-sort-btn.is-active { color: var(--pin); border-color: var(--pin); background: rgba(var(--pin-rgb),0.1); }

/* ── Table ────────────────────────────────────────────────────────────────────────── */
.trenches-board-wrap {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  overflow: auto;
  max-height: calc(100vh - 260px);
}
.trenches-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
}
.trenches-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--card);
  border-bottom: 1px solid var(--card-edge);
  color: var(--ink-dim);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  letter-spacing: .07em;
  font-weight: 600;
  text-align: left;
  padding: 9px 12px;
  white-space: nowrap;
}
.trenches-table .col-num, .trenches-table .col-age, .trenches-table .col-txns { text-align: right; }
.trenches-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  vertical-align: middle;
  /* Every numeric-ish column scans in a straight vertical line instead of jittering — a
     one-second read depends on this as much as on color. */
  font-variant-numeric: tabular-nums;
}
.trenches-table .col-num, .trenches-table .col-age, .trenches-table .col-txns { text-align: right; color: var(--ink); }

/* ── Target acquisition hover/select — a left rail + a lit border, not a full repaint.
   Connects visually to EXPAND/Focus: this is the same "you're about to act on this row"
   language the drawer's own EXPAND button picks up on click. */
.tr-row {
  cursor: pointer;
  position: relative;
  border-left: 2px solid transparent;
  transition: background .12s, border-color .12s;
}
.tr-row:hover, .tr-row:focus-visible {
  background: rgba(var(--pin-rgb),0.07);
  border-left-color: var(--pin);
}
.tr-row:hover .tr-token-avatar, .tr-row:focus-visible .tr-token-avatar {
  border-color: rgba(var(--pin-rgb),0.5);
}
/* Phase 8, item 6 — "a promising candidate should subtly pull the eye; a known rugged token
   should remain visible but visually subdued." Reuses this row's OWN already-transparent
   left border (the same one hover already colors pin) rather than adding a second accent
   mechanism — is-hot reuses the momentum meter's own "hot" tone (var(--danger), already
   meaning fast-moving/urgent in this design system, not "unsafe" — see tone-hot on the
   meter itself), is-rugged only dims (never hides — the row/status pill stay fully
   readable). Hover still layers its own pin accent on top of either. */
.tr-row.is-hot { border-left-color: rgba(var(--danger-rgb),0.55); }
.tr-row.is-rugged { opacity: 0.6; }
.tr-row.is-rugged:hover, .tr-row.is-rugged:focus-visible { opacity: 0.85; }
/* Small targeting corners on the avatar only while acquiring — restrained, not a full
   reticle over the row. */
.tr-row:hover .tr-token-avatar::before, .tr-row:hover .tr-token-avatar::after,
.tr-row:focus-visible .tr-token-avatar::before, .tr-row:focus-visible .tr-token-avatar::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  border: 1px solid var(--pin);
  pointer-events: none;
}
.tr-row:hover .tr-token-avatar::before, .tr-row:focus-visible .tr-token-avatar::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.tr-row:hover .tr-token-avatar::after, .tr-row:focus-visible .tr-token-avatar::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
/* "INSPECT TARGET" affordance — appears only on hover/focus, in the STATUS cell's own
   spare space, never stamped across the whole row. visibility (not display): the label
   must always OCCUPY its width, or the table re-computes the STATUS column on every
   hover and the whole row visibly jumps wider — rows start at the wider width instead. */
.tr-row-inspect {
  display: inline;
  visibility: hidden;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--pin);
  margin-left: 8px;
}
.tr-row:hover .tr-row-inspect, .tr-row:focus-visible .tr-row-inspect { visibility: visible; }

/* Row-level instant buy — same visibility-not-display reservation trick as
   .tr-row-inspect above (the cell must never change width on hover). Fires
   trenches.js's quickBuyFromRow through the shared submitBuy path. */
.tr-row-actions { display: inline; white-space: nowrap; }
.tr-quickbuy {
  visibility: hidden;
  margin-left: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--safe);
  background: rgba(var(--safe-rgb), 0.1);
  border: 1px solid rgba(var(--safe-rgb), 0.45);
  border-radius: 5px;
  padding: 2px 7px;
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.tr-row:hover .tr-quickbuy, .tr-row:focus-visible .tr-quickbuy { visibility: visible; }
.tr-quickbuy:hover { background: rgba(var(--safe-rgb), 0.22); box-shadow: 0 0 10px rgba(var(--safe-rgb), 0.25); }
.tr-quickbuy:disabled { opacity: .5; cursor: wait; }

/* The quick-buy status toast — bottom-right, terminal-card styling; submitBuy writes
   its usual is-ok/is-error status classes onto the inner text span. */
#tr-quickbuy-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 300;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-left: 3px solid var(--safe);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#tr-quickbuy-toast.is-visible { opacity: 1; transform: translateY(0); }
.tr-quickbuy-toast-text.is-ok { color: var(--safe); }
.tr-quickbuy-toast-text.is-error { color: var(--danger); }

.col-token { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.tr-token-avatar {
  position: relative;
  width: 26px; height: 26px; border-radius: 7px; overflow: visible; flex-shrink: 0;
  background: var(--board);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--card-edge);
  transition: border-color .12s;
}
.tr-token-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.tr-token-fallback { font-family: 'Space Grotesk', sans-serif; font-size: 12px; color: var(--ink-dim); }
.tr-token-text { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.tr-token-symbol { color: var(--paper); font-weight: 700; font-size: 13px; }
.tr-token-name { color: var(--ink-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

.col-source { color: var(--ink-dim); font-size: 11.5px; }

.tr-buys { color: var(--safe); font-weight: 600; }
.tr-sells { color: var(--danger); font-weight: 600; }
.tr-muted { color: var(--ink-dim); }

/* Status is the second thing the eye should land on (TOKEN -> FLOW -> LIQUIDITY ->
   STATUS -> MOMENTUM) — visual weight now genuinely differs by truthfulness, not just
   hue: CLEARED is bright/bold (a real, worth-a-look signal), RUGGED is deliberately
   LOWER contrast (still visible, never hidden, just doesn't compete for attention the
   way a clean signal should), WATCH gets a subtle "still being acquired" pulse. */
.tr-status-pill {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.tr-status-pill--safe { color: var(--safe); background: rgba(var(--safe-rgb),0.14); border-color: rgba(var(--safe-rgb),0.35); }
.tr-status-pill--caution { color: var(--pin); background: rgba(var(--pin-rgb),0.12); }
.tr-status-pill--danger { color: rgba(var(--danger-rgb),0.75); background: rgba(var(--danger-rgb),0.08); font-weight: 600; }
.tr-status-pill--watch { color: var(--ink-dim); background: rgba(255,255,255,0.05); }
.tr-status-pill--watch::before {
  content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-dim); margin-right: 5px; vertical-align: middle;
  animation: tr-pulse 2s infinite;
}

/* ── Momentum — a segmented block meter instead of one thin bar, still driven ENTIRELY
   by the same real finderScore/stage data (see trenches.js's momentumCell); a coin with
   no finderScore still shows the honest empty/flat state, never a fabricated reading. */
.col-momentum { min-width: 150px; }
.tr-momentum-meter { display: inline-flex; gap: 2px; vertical-align: middle; margin-right: 8px; }
/* Tester-polish pass, optional micro-polish — a real "no momentum reading" state (never a
   fabricated zero score) recedes further so a row that DOES have a real reading pops by
   comparison, per the final product critique. */
.tr-momentum-cell--empty { opacity: 0.55; }
.tr-momentum-seg { width: 6px; height: 10px; border-radius: 1px; background: rgba(255,255,255,0.08); }
.tr-momentum-seg.is-filled.tone-hot { background: var(--danger); }
.tr-momentum-seg.is-filled.tone-warm { background: var(--pin); }
.tr-momentum-seg.is-filled.tone-mild { background: var(--safe); }
.tr-momentum-seg.is-filled.tone-flat { background: var(--ink-dim); }
.tr-momentum-label { font-size: 10.5px; color: var(--ink-dim); vertical-align: middle; letter-spacing: .02em; }
.tr-momentum-label.tone-hot { color: var(--danger); }
.tr-momentum-label.tone-warm { color: var(--pin); }

.trenches-empty {
  padding: 50px 20px;
  text-align: center;
  color: var(--ink-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
}
.trenches-footnote { color: var(--ink-dim); font-size: 11.5px; margin: 10px 4px 0; }

/* ── Drawer ───────────────────────────────────────────────────────────────────────── */
.trenches-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 40;
}
.trenches-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--tr-drawer-width, 440px);
  max-width: 92vw;
  background: var(--card);
  border-left: 1px solid var(--card-edge);
  z-index: 41;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s ease;
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
}
.trenches-drawer.is-open { transform: translateX(0); }
.trenches-drawer.is-resizing { transition: none; }

/* Drag handle — desktop only (fine pointer). A touch/mobile viewer gets the drawer at its
   default width instead, per the "mobile can use a dedicated stacked layout" instruction —
   simplest form of that here is just not offering a drag gesture that needs a mouse. */
.trenches-drawer-resize-handle {
  position: absolute;
  left: -4px; top: 0; bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 2;
}
.trenches-drawer-resize-handle:hover, .trenches-drawer.is-resizing .trenches-drawer-resize-handle { background: rgba(var(--pin-rgb),0.25); }
@media (pointer: coarse) { .trenches-drawer-resize-handle { display: none; } }

.trenches-drawer-expand-btn {
  flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--board);
  background: var(--pin);
  border: none;
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.trenches-drawer-expand-btn:hover { filter: brightness(1.1); }

.trenches-drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--card-edge);
  flex-shrink: 0;
}
.trenches-drawer-avatar { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; background: var(--board); border: 1px solid var(--card-edge); }
.trenches-drawer-head-text { flex: 1; min-width: 0; }
.trenches-drawer-name { color: var(--paper); font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trenches-drawer-mint { color: var(--ink-dim); font-family: 'IBM Plex Mono', monospace; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trenches-drawer-close {
  background: none; border: none; color: var(--ink-dim); font-size: 16px; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
}
.trenches-drawer-close:hover { color: var(--paper); background: rgba(255,255,255,0.06); }

.trenches-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 8px; }
.trenches-drawer-loading { color: var(--ink-dim); font-size: 13px; padding: 6px 0 16px; font-family: 'IBM Plex Mono', monospace; }
.trenches-drawer-loading.hidden { display: none; }
.trenches-drawer-section { margin-bottom: 20px; }
.trenches-drawer-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-dim);
  margin-bottom: 8px;
}

/* Phase 8, item 4 — the drawer's own compact native chart (replaces the old DexScreener
   iframe). The chart library needs an explicitly-sized container to render into — same
   convention as Focus's own .tf-chart-wrap, just shorter, matching this surface's triage
   (not execution) role. */
.trenches-drawer-chart-tf { display: flex; gap: 4px; margin-bottom: 6px; }
.trenches-drawer-tf-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--card-edge);
  border-radius: 5px;
  padding: 3px 8px;
  cursor: pointer;
}
.trenches-drawer-tf-btn:hover { color: var(--paper); border-color: rgba(var(--pin-rgb),0.4); }
.trenches-drawer-tf-btn.is-active { color: var(--pin); border-color: var(--pin); background: rgba(var(--pin-rgb),0.1); }
.trenches-drawer-chart-wrap {
  width: 100%;
  height: 220px;
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  background: var(--board);
  overflow: hidden;
  position: relative;
}
.trenches-drawer-chart-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
}

.tr-tile-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-tile {
  flex: 1 1 calc(50% - 8px);
  min-width: 90px;
  background: var(--board);
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  padding: 8px 10px;
}
.tr-tile-val { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; color: var(--paper); }
.tr-tile--good .tr-tile-val { color: var(--safe); }
.tr-tile--warn .tr-tile-val { color: var(--pin); }
.tr-tile--bad .tr-tile-val { color: var(--danger); }
.tr-tile-label { font-size: 10px; color: var(--ink-dim); letter-spacing: .04em; margin-top: 2px; }

.tr-verdict-explain { font-size: 12px; color: var(--ink-dim); margin: 6px 0 10px; }

/* Outcome badges — same tiers/labels/tone as the Stats page (see lib/position-stats.js's
   badgeForPnlPct and stats.css's own .stats-badge block, kept in sync with it here). Only
   ever shown for a position's real overall closed result — never a single partial trim. */
.tr-badge {
  display: inline-block;
  font-family: 'Rajdhani', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.tr-badge.nice-hit  { background: rgba(var(--safe-rgb), 0.12); color: var(--safe); }
.tr-badge.good-shot { background: rgba(var(--safe-rgb), 0.18); color: var(--safe); }
.tr-badge.big-win   { background: rgba(var(--pin-rgb), 0.18); color: var(--pin); }
.tr-badge.moonshot  {
  background: linear-gradient(90deg, rgba(var(--pin-rgb), 0.25), rgba(var(--danger-rgb), 0.2));
  color: var(--paper);
  box-shadow: 0 0 0 1px rgba(var(--pin-rgb), 0.35) inset;
}

.tr-creator-addr {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--creator, #a06fd6);
  text-decoration: none;
  margin-bottom: 6px;
}
.tr-creator-addr:hover { text-decoration: underline; }

/* Tester-polish pass — a generic inline text link for Trenches copy (currently the CLOSED
   card's "See Stats" link), styled into the terminal palette instead of the browser's
   default blue. Reuses the same accent/underline-on-hover language as .tr-creator-addr and
   .trenches-sort-btn rather than inventing a third link treatment. */
.tr-inline-link { color: var(--pin); text-decoration: none; }
.tr-inline-link:hover, .tr-inline-link:focus-visible { text-decoration: underline; }

.tr-holder-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 11.5px;
  border-radius: 6px;
  overflow: hidden;
}
.tr-holder-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(var(--pin-rgb),0.1); z-index: 0; }
.tr-holder-rank, .tr-holder-who, .tr-holder-pct { position: relative; z-index: 1; }
.tr-holder-rank { color: var(--ink-dim); width: 18px; flex-shrink: 0; }
.tr-holder-who { flex: 1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; }
.tr-holder-pct { color: var(--paper); font-family: 'IBM Plex Mono', monospace; }

.tr-chip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
}
.tr-chip--bundle { color: var(--danger); background: rgba(var(--danger-rgb),0.16); }

/* ── Drawer actions (PAPER/LIVE) ─────────────────────────────────────────────────── */
.trenches-drawer-actions {
  flex-shrink: 0;
  border-top: 1px solid var(--card-edge);
  padding: 14px 18px 18px;
}
.trenches-drawer-mode-note { font-size: 11.5px; color: var(--ink-dim); margin-bottom: 8px; }
.trenches-drawer-mode-note.is-paper { color: var(--pin); }
.trenches-drawer-mode-note.is-live { color: var(--danger); }
.trenches-drawer-mode-note a { color: inherit; }
.trenches-drawer-buy-row { display: flex; gap: 8px; }
.trenches-drawer-buy-row input {
  flex: 1;
  background: var(--board);
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 9px 10px;
}
.trenches-drawer-buy-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  background: var(--safe);
  color: var(--board);
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  cursor: pointer;
}
.trenches-drawer-buy-btn:disabled { background: var(--card-edge); color: var(--ink-dim); cursor: not-allowed; }
.trenches-drawer-status { font-size: 11.5px; margin: 8px 0 0; min-height: 14px; }
.trenches-drawer-status.is-ok { color: var(--safe); }
.trenches-drawer-status.is-error { color: var(--danger); }
.trenches-drawer-open-desk {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-dim);
  text-decoration: none;
  border-top: 1px dashed var(--card-edge);
  padding-top: 12px;
}
.trenches-drawer-open-desk:hover { color: var(--paper); }

/* ── Focus Mode ───────────────────────────────────────────────────────────────────── */
/* A full-viewport overlay ABOVE the board, not a route change — the board underneath is
   never unmounted, so its scroll/tab/search/sort state survives untouched across an
   open/close cycle for free. See trenches.js's openFocusMode/closeFocusMode. */
.trenches-focus {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--board);
  display: flex;
  flex-direction: column;
}

.tf-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--card-edge);
  background: var(--card);
}
.tf-back-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.tf-back-btn:hover { color: var(--paper); border-color: rgba(var(--pin-rgb),0.4); }
.tf-topbar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--paper);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.tf-open-desk-btn {
  flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--board);
  background: var(--safe);
  border-radius: 8px;
  padding: 8px 14px;
  text-decoration: none;
}
.tf-open-desk-btn:hover { filter: brightness(1.08); }

/* ── Token header row ─────────────────────────────────────────────────────────────── */
.tf-header {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--card-edge);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink);
}
.tf-header-field { display: flex; flex-direction: column; gap: 1px; }
.tf-header-field-label { font-size: 9.5px; letter-spacing: .06em; color: var(--ink-dim); }
.tf-header-field-val { color: var(--paper); font-weight: 600; }
.tf-header-token { display: flex; align-items: center; gap: 10px; }
.tf-header-avatar { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: var(--card); border: 1px solid var(--card-edge); }

/* ── Coin socials — prominent in Focus (2026-09-09, on request) ────────────────────────
   Pushed to the far right of the header (margin-left:auto) so it reads as its own
   deliberate block, not just another stat field. Bigger, brighter tap targets than the
   compact board version below. */
.tf-socials { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tf-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  color: var(--paper);
  background: rgba(var(--pin-rgb), 0.10);
  border: 1px solid rgba(var(--pin-rgb), 0.35);
  transition: background .15s, box-shadow .15s, transform .1s;
}
.tf-social:hover { background: rgba(var(--pin-rgb), 0.22); box-shadow: 0 0 12px rgba(var(--pin-rgb), 0.3); transform: translateY(-1px); }
.tf-social svg { width: 17px; height: 17px; }
.tf-social--pumpfun, .tf-social--chart { color: var(--safe); background: rgba(var(--safe-rgb), 0.10); border-color: rgba(var(--safe-rgb), 0.4); }
.tf-social--pumpfun:hover, .tf-social--chart:hover { background: rgba(var(--safe-rgb), 0.22); box-shadow: 0 0 12px rgba(var(--safe-rgb), 0.3); }

/* Compact socials on a board row — accessible without opening the chart. */
.tr-row-socials { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; flex-shrink: 0; }
.tr-row-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px;
  color: var(--ink-dim);
  border: 1px solid var(--card-edge);
  transition: color .12s, border-color .12s, background .12s;
}
.tr-row-social:hover { color: var(--paper); border-color: var(--ink-dim); background: rgba(255,255,255,0.05); }
.tr-row-social svg { width: 11px; height: 11px; }

/* ── Body split — 70/30 chart vs execution+intel ─────────────────────────────────── */
.tf-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 3fr);
}
.tf-chart-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--card-edge);
  overflow-y: auto;
}
.tf-chart-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 16px;
}
.tf-chart-toolbar-note { font-size: 11px; color: var(--ink-dim); }
.tf-chart-toolbar-status { flex: 1; min-width: 40px; font-size: 11px; color: var(--ink-dim); text-align: right; }

/* Chart-range-change and position-PnL chips — deliberately styled the same base way so
   neither one visually dominates the other; color (is-up/is-down) is the only real signal.
   See trenches.js's renderChartToolbarChips for what feeds each one. */
.tf-chart-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--board);
  border: 1px solid var(--card-edge);
  color: var(--ink-dim);
}
.tf-chart-chip:empty { display: none; }
.tf-chart-chip.is-up { color: var(--safe); border-color: rgba(var(--safe-rgb),0.35); }
.tf-chart-chip.is-down { color: var(--danger); border-color: rgba(var(--danger-rgb),0.35); }
/* The POSITION chip gets a touch more weight — it's real money/paper P&L, not just a
   chart-range readout. */
.tf-chart-chip--position { font-weight: 700; }

/* STALE — the last valid candles stay exactly as they are; only this badge appears,
   never a blank/cleared chart. Auto-clears the moment a poll tick succeeds again — see
   trenches.js's setChartFreshness. */
.tf-chart-freshness-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 6px;
  color: var(--pin);
  background: rgba(var(--pin-rgb), 0.12);
  border: 1px solid rgba(var(--pin-rgb), 0.35);
  animation: tf-stale-pulse 1.6s ease-in-out infinite;
}
@keyframes tf-stale-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Timeframe / price-mode segmented controls — real, wired controls once the native chart
   is active (see trenches.js's renderChartToolbar); NOT shown for the DexScreener-embed/
   honest-message fallback, since those buttons would control nothing there. */
.tf-chart-tf-group, .tf-chart-pricemode-group { display: flex; gap: 4px; }
.tf-tf-btn, .tf-pricemode-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--board);
  border: 1px solid var(--card-edge);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
.tf-tf-btn:hover:not(:disabled), .tf-pricemode-btn:hover:not(:disabled) { color: var(--paper); border-color: rgba(var(--pin-rgb),0.4); }
.tf-tf-btn.is-active, .tf-pricemode-btn.is-active { color: var(--board); background: var(--pin); border-color: var(--pin); }
/* A timeframe the backend has no bars for yet — visibly present (so it's not a mystery gap)
   but genuinely inert, never a dead button pretending to work. */
.tf-tf-btn:disabled { opacity: .35; cursor: not-allowed; }

.tf-chart-fullscreen-btn {
  flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
}
.tf-chart-fullscreen-btn:hover { color: var(--paper); border-color: rgba(var(--pin-rgb),0.4); }

.tf-chart-wrap {
  position: relative;
  flex-shrink: 0;
  margin: 0 16px;
  height: 560px; /* within the requested 500-650px band on a normal desktop viewport */
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  /* A quiet inset shadow — reads as a real recessed instrument panel rather than a flat
     rectangle, without any loud/decorative glow. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), inset 0 0 24px rgba(0,0,0,0.25);
}
.tf-chart-wrap iframe { width: 100%; height: 100%; border: 0; }
/* Native Fullscreen API target — real browser fullscreen, not a fabricated embed feature. */
.tf-chart-wrap:fullscreen { margin: 0; border-radius: 0; height: 100vh; }

/* The .tr-chart-* overlay styles (hover legend, volume badge, position-line pills/grab
   strips) moved INTO the chart engine itself — src/trenches-chart/index.js injects them as
   a <style> tag when the first chart mounts. They style elements the engine creates, and
   pages that mount the engine without this stylesheet (Feed/Snipe/Positions, chart-
   unification 2026-09-08) got them as static-flow blocks under the canvas — which fed the
   autoSize ResizeObserver an ever-taller container, the "chart infinitely scrolls down"
   bug. Do not re-add them here: a second copy can drift out of sync with the engine's. */

/* Terminal-style loading skeleton — replaces bare "Loading chart…" text. Purely
   decorative (aria-hidden), swapped out the instant real data or an honest empty/error
   state arrives (see trenches.js's renderFocusChartLoading). */
.tf-chart-skeleton {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  gap: 18px;
}
.tf-chart-skeleton-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.tf-chart-skeleton-bars i {
  flex: 1;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  animation: tf-skeleton-pulse 1.4s ease-in-out infinite;
}
.tf-chart-skeleton-bars i:nth-child(1) { height: 35%; animation-delay: 0s; }
.tf-chart-skeleton-bars i:nth-child(2) { height: 62%; animation-delay: .1s; }
.tf-chart-skeleton-bars i:nth-child(3) { height: 44%; animation-delay: .2s; }
.tf-chart-skeleton-bars i:nth-child(4) { height: 78%; animation-delay: .3s; }
.tf-chart-skeleton-bars i:nth-child(5) { height: 50%; animation-delay: .4s; }
.tf-chart-skeleton-bars i:nth-child(6) { height: 68%; animation-delay: .5s; }
.tf-chart-skeleton-bars i:nth-child(7) { height: 40%; animation-delay: .6s; }
.tf-chart-skeleton-bars i:nth-child(8) { height: 58%; animation-delay: .7s; }
.tf-chart-skeleton-axis {
  height: 1px;
  background: var(--card-edge);
}
@keyframes tf-skeleton-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.tf-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 24px;
  text-align: center;
  color: var(--ink-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
}
.tf-chart-empty-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--pin);
  letter-spacing: .02em;
}
.tf-chart-empty .tr-tile-row { margin-top: 6px; max-width: 420px; }

.tf-lower {
  flex: 1;
  min-height: 200px;
  margin: 16px;
  margin-top: 12px;
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tf-lower-tabs {
  flex-shrink: 0;
  display: flex;
  border-bottom: 1px solid var(--card-edge);
}
.tf-lower-tab {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 11px 16px;
  cursor: pointer;
}
.tf-lower-tab:hover { color: var(--paper); }
.tf-lower-tab.is-active { color: var(--pin); border-bottom-color: var(--pin); }
.tf-lower-body { flex: 1; overflow-y: auto; padding: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; }

/* ── Right column: execution + intelligence ──────────────────────────────────────── */
.tf-side-col {
  min-width: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tf-side-loading { color: var(--ink-dim); font-size: 12.5px; font-family: 'IBM Plex Mono', monospace; }
.tf-side-loading.hidden { display: none; }

/* PRE_ENTRY renders no markup at all (see trenches.js's renderFocusLifecycleBanner) — :empty
   drops it out of .tf-side-col's flex gap entirely so it doesn't leave a blank double-gap. */
.tf-lifecycle-banner:empty { display: none; }
.tf-lifecycle-banner {
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  background: var(--card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── IN_POSITION card (Phase 2) — current unrealized PnL is deliberately the single
   largest, boldest number anywhere in the rail; everything else here is a supporting
   .tr-tile, same primitive the pre-entry intel stack already uses. */
.tf-position-header {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.tf-pnl-hero {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.tf-pnl-hero.tr-tile--good { color: var(--safe); }
.tf-pnl-hero.tr-tile--bad { color: var(--danger); }
.tf-pnl-hero-label { font-size: 10.5px; color: var(--ink-dim); letter-spacing: .05em; margin-top: 2px; }

/* ── Collapsible pre-entry intelligence stack — collapsed (not deleted) on IN_POSITION,
   always re-expandable; see trenches.js's collapseIntelStackOnce. */
.tf-intel-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 2px;
  cursor: pointer;
}
.tf-intel-toggle:hover { color: var(--ink); }
.tf-intel-toggle-caret { display: inline-block; transition: transform 0.15s ease; }
.tf-intel-stack.is-collapsed .tf-intel-toggle-caret { transform: rotate(-90deg); }
.tf-intel-stack.is-collapsed .tf-intel-body { display: none; }
.tf-intel-body { display: flex; flex-direction: column; gap: 18px; }

/* ── CLOSED — a compact final summary, never immediately erased. ────────────────────── */
.tf-close-summary { display: flex; flex-direction: column; gap: 8px; }

/* ── Position tab (lower panel) — command-center diagnostics, fetched lazily. ────────── */
.tf-position-tab-empty { color: var(--ink-dim); font-size: 12.5px; }
.tf-position-tab-section { margin-bottom: 14px; }
.tf-position-tab-section:last-child { margin-bottom: 0; }
.tf-position-tab-section .trenches-drawer-label { margin-bottom: 6px; }

.tf-trade-panel {
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  background: var(--card);
  padding: 14px;
}
/* Tester-polish pass — this used to be a full-width filled pill that, because only ONE of
   the two buttons is ever visible at a time (see the HTML comment above it), rendered as a
   big solid-colored button indistinguishable from the real submit action below it. Now a
   small underline-style tab: compact, left-aligned, never fills the row even when it's the
   only child, and its active state is a colored underline + text, never a filled block — so
   nothing here can be mistaken for a CTA. */
.tf-trade-side-toggle { display: flex; gap: 14px; margin-bottom: 10px; }
.tf-side-btn {
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 0 0 5px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.tf-side-btn[data-side="buy"].is-active { border-bottom-color: var(--safe); color: var(--safe); }
.tf-side-btn[data-side="sell"].is-active { border-bottom-color: var(--danger); color: var(--danger); }
.tf-side-btn:disabled { opacity: .4; cursor: not-allowed; }

.tf-mode-note { font-size: 11.5px; color: var(--ink-dim); margin-bottom: 10px; }
.tf-mode-note.is-paper { color: var(--pin); }
.tf-mode-note.is-live { color: var(--danger); }
.tf-mode-note a { color: inherit; }

.tf-trade-controls { display: flex; flex-direction: column; gap: 10px; }
.tf-trade-controls.hidden { display: none; }
.tf-buy-amount-input {
  width: 100%;
  background: var(--board);
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 9px 10px;
}
.tf-execute-btn {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  padding: 0 22px;
  cursor: pointer;
}
/* Tester-polish pass — the real order submission is now the single strongest element in the
   panel: full width, taller, bigger/bolder text, matching (and exceeding) the SELL button's
   own already-correct full-width prominence. is-live swaps to the SAME danger tone the SELL
   button/account pill/mode note already use for LIVE elsewhere on this page — a color
   change only, never a change to what gets submitted (see trenches.js's
   updateFocusTradeAvailability, the one place that class gets toggled). */
.tf-execute-btn--smart { margin-top: 8px; background: transparent; color: var(--safe); border: 1px solid rgba(var(--safe-rgb), 0.55); }
.tf-execute-btn--smart:hover:not(:disabled) { background: rgba(var(--safe-rgb), 0.10); }
.tf-execute-btn--buy {
  background: var(--safe);
  color: var(--board);
  width: 100%;
  padding: 13px 0;
  font-size: 14.5px;
  letter-spacing: .02em;
}
.tf-execute-btn--buy.is-live { background: var(--danger); }
.tf-execute-btn--sell { background: var(--danger); color: var(--board); width: 100%; padding: 10px 0; }
.tf-execute-btn:disabled { background: var(--card-edge); color: var(--ink-dim); cursor: not-allowed; }

/* ── BUY amount presets — 0.05/0.10/0.25/0.50/CUSTOM. CUSTOM activates itself the moment
   the user types their own amount (see trenches.js's tf-buy-amount input listener) so the
   active state never lies about which one is actually going to be submitted. */
.tf-amount-presets { display: flex; gap: 6px; }
.tf-amount-preset-btn {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 7px;
  border: 1px solid var(--card-edge);
  background: var(--board);
  color: var(--ink-dim);
  cursor: pointer;
}
.tf-amount-preset-btn:hover { color: var(--paper); border-color: rgba(var(--safe-rgb),0.4); }
.tf-amount-preset-btn.is-active { border-color: var(--safe); color: var(--safe); background: rgba(var(--safe-rgb),0.1); }

/* ── LIVE admission preview — a risk/admission result only, styled like a status
   readout (verdict-badge tones), never like a momentum/strategy signal. */
.tf-live-preview {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--board);
  border: 1px solid var(--card-edge);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tf-live-preview-ok { color: var(--safe); font-weight: 700; letter-spacing: .03em; }
.tf-live-preview-blocked { color: var(--danger); font-weight: 700; letter-spacing: .03em; }
.tf-live-preview-reason { color: var(--ink-dim); font-size: 10.5px; }

/* ── Real sizing breakdown from the LAST buy attempt (or structured rejection) — a
   clamped ALLOWED amount is never silently accepted; LIMITED BY is always shown right
   alongside it, in the same amber tone the rest of the site uses for "reduced/capped." */
.tf-sizing-breakdown {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--board);
  border: 1px solid var(--card-edge);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-sizing-row { display: flex; justify-content: space-between; }
.tf-sizing-row span:last-child { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }
.tf-sizing-row.is-clamped span:last-child { color: var(--pin); }
.tf-sizing-row.tf-sizing-reason span:last-child { color: var(--danger); }

/* ── SELL summary — a compact restatement of remaining size / unrealized PnL /
   realized-so-far / mode, right next to the action itself; the full detail lives in the
   position card above (Phase 2). Never a second PnL calculation — same fields. */
.tf-sell-summary {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--ink-dim);
}
.tf-sell-summary b { color: var(--paper); font-weight: 600; font-variant-numeric: tabular-nums; }
.tf-sell-summary .is-good { color: var(--safe); }
.tf-sell-summary .is-bad { color: var(--danger); }
.tf-sell-summary.hidden { display: none; }

.tf-sell-pct-row { display: flex; gap: 6px; }
.tf-sell-pct-btn {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 7px 0;
  border-radius: 7px;
  border: 1px solid var(--card-edge);
  background: var(--board);
  color: var(--ink);
  cursor: pointer;
}
.tf-sell-pct-btn.is-active { border-color: var(--danger); color: var(--danger); }

.tf-trade-status { font-size: 11.5px; margin: 10px 0 0; min-height: 14px; }
.tf-trade-status.is-ok { color: var(--safe); }
.tf-trade-status.is-error { color: var(--danger); }

/* ── V7 Recoil shadow card ────────────────────────────────────────────────────────────
   Dashed border = SHADOW system (Phase 5's rule: real execution surfaces stay solid,
   shadow-only ones stay dashed) — the visual vocabulary that tells the user, without
   reading a word, that this panel cannot act. The "SHADOW · CANNOT EXECUTE" tag is
   always present regardless of state so it can never scroll out of a state that omits it. */
.tf-v7-card {
  border: 1px dashed var(--card-edge);
  border-radius: 10px;
  background: var(--card);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tf-v7-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tf-v7-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
}
.tf-v7-shadow-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--pin);
  background: rgba(var(--pin-rgb), 0.1);
  border: 1px dashed rgba(var(--pin-rgb), 0.4);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}
/* Entry Style = V7 Recoil (see trenches.js's applyAccountStatus): V7 is this account's
   live fire condition — solid green, no longer the dashed shadow convention. */
.tf-v7-shadow-tag.is-live {
  color: var(--safe);
  background: rgba(var(--safe-rgb), 0.12);
  border: 1px solid rgba(var(--safe-rgb), 0.5);
}
.tf-v7-status-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tf-v7-status-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
}
.tf-v7-status-label.is-ready { color: var(--safe); }
.tf-v7-status-label.is-blocked { color: var(--pin); }
.tf-v7-status-label.is-inactive { color: var(--ink-dim); }
.tf-v7-explanation { font-size: 11px; color: var(--ink-dim); }
.tf-v7-stale-note { font-size: 10px; color: var(--ink-dim); font-style: italic; }

/* Mini funnel (item 8) — a row of 5 named steps, tabular-numbered real values only where
   the recorder actually populated that field. */
.tf-v7-funnel { display: flex; gap: 6px; }
.tf-v7-funnel-step {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 6px 2px;
  border-radius: 6px;
  background: var(--board);
  border: 1px dashed var(--card-edge);
}
.tf-v7-funnel-step-label {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-v7-funnel-step-value {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  margin-top: 2px;
}
.tf-v7-funnel-step.is-passed { border-color: rgba(var(--safe-rgb), 0.4); }
.tf-v7-funnel-step.is-passed .tf-v7-funnel-step-label { color: var(--safe); }
.tf-v7-funnel-step.is-passed .tf-v7-funnel-step-value { color: var(--safe); }
.tf-v7-funnel-step.is-current { border-color: rgba(var(--pin-rgb), 0.5); }
.tf-v7-funnel-step.is-current .tf-v7-funnel-step-label { color: var(--pin); }
.tf-v7-funnel-step.is-blocked { border-color: rgba(var(--danger-rgb), 0.4); }
.tf-v7-funnel-step.is-blocked .tf-v7-funnel-step-label { color: var(--danger); }
.tf-v7-progress { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-dim); letter-spacing: .03em; }

/* IN_POSITION — position management stays primary; V7 shrinks to a one-line secondary
   readout (status only, no funnel) so it never pushes SELL controls or the position card
   down. See trenches.js's updateV7CardPriority. */
.tf-v7-card.is-compact { padding: 8px 12px; gap: 4px; }
.tf-v7-card.is-compact .tf-v7-funnel,
.tf-v7-card.is-compact .tf-v7-progress,
.tf-v7-card.is-compact .tf-v7-explanation { display: none; }
.tf-v7-card.is-compact .tf-v7-title { font-size: 10.5px; }

.tf-scores-panel, .tf-reasons-panel {
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  background: var(--card);
  padding: 14px;
}
.tf-reasons-panel .tr-verdict-explain { margin-top: 2px; }

/* ── Responsive ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .col-source { display: none; }
  .trenches-search-input { width: 200px; }
}
@media (max-width: 900px) {
  .col-vol { display: none; }
}
@media (max-width: 760px) {
  .trenches-drawer { width: 100vw; max-width: 100vw; }
  .trenches-toolbar { flex-direction: column; align-items: stretch; }
  .trenches-search-input { width: 100%; max-width: none; }
  .trenches-drawer-expand-btn { font-size: 10px; padding: 8px; }
  /* The nowrap telemetry line was the ONE element still wider than a phone — it forced
     the whole .trenches-app to ~630px and dragged every already-wrapping sibling with it
     (horizontal page scroll, found by the 2026-09-06 release sweep's mobile probe). */
  .trenches-telemetry { white-space: normal; }
  .trenches-toolbar-title { flex-wrap: wrap; row-gap: 6px; }
  .trenches-live-indicator { padding-left: 0; border-left: none; }
}

/* Focus Mode: below ~900px wide, stack chart above execution rather than squeezing a
   70/30 split — a real trading chart under 400px wide is not usable. */
@media (max-width: 900px) {
  .tf-body { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; }
  .tf-chart-col { border-right: none; border-bottom: 1px solid var(--card-edge); overflow-y: visible; }
  .tf-chart-wrap { height: 320px; margin: 0 12px; }
  .tf-lower { margin: 12px; }
  .tf-side-col { padding: 12px; overflow-y: visible; }
  .tf-header { gap: 14px; padding: 8px 12px; font-size: 11.5px; }
  .tf-topbar { padding: 10px 12px; gap: 10px; }
  .tf-topbar-title { font-size: 13px; }
}

.hidden { display: none !important; }

/* ── Activity tab (Phase 7) — position-centric trade history ─────────────────────────
   Restrained per item 11: a subtle left rail + stronger PnL typography carry the visual
   weight, not confetti/flashing/oversized emoji. Reuses .tr-badge/.tr-tile-row/.tr-muted
   exactly as the rest of Focus Mode already does — no parallel badge system. */
.tf-activity { display: flex; flex-direction: column; gap: 10px; }
.tf-activity-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tf-activity-filter, .tf-activity-mode {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--card-edge);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.tf-activity-filter:hover, .tf-activity-mode:hover { color: var(--paper); border-color: rgba(var(--safe-rgb),0.4); }
.tf-activity-filter.is-active { color: var(--safe); border-color: var(--safe); background: rgba(var(--safe-rgb),0.1); }
.tf-activity-mode.is-active { color: var(--ink); border-color: var(--ink-dim); background: rgba(255,255,255,0.04); }
.tf-activity-mode-group { display: flex; gap: 4px; margin-left: auto; }

.tf-activity-list { display: flex; flex-direction: column; gap: 8px; }
.tf-activity-position {
  border: 1px solid var(--card-edge);
  border-left: 3px solid var(--card-edge);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.tf-activity-position.is-running { border-left-color: rgba(var(--pin-rgb),0.6); }
.tf-activity-position-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.tf-activity-position-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}
.tf-activity-position-outcome {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-weight: 800;
}
.tf-activity-position-outcome.is-good { color: var(--safe); }
.tf-activity-position-outcome.is-bad { color: var(--danger); }
.tf-activity-position-outcome.is-running { color: var(--pin); }
.tf-activity-position-meta {
  font-size: 9.5px;
  color: var(--ink-dim);
  letter-spacing: .04em;
  margin-left: auto;
}
.tf-activity-expand-caret { color: var(--ink-dim); font-size: 11px; }

.tf-activity-position-detail {
  padding: 0 12px 12px;
  border-top: 1px solid var(--card-edge);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tf-activity-position-detail .tr-tile-row { margin-top: 10px; }

.tf-activity-groups { display: flex; flex-direction: column; gap: 6px; }
.tf-activity-group {
  border: 1px solid var(--card-edge);
  border-radius: 6px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.02);
}
.tf-activity-group-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--ink);
  cursor: default;
}
.tf-activity-group-row.is-expandable { cursor: pointer; }
.tf-activity-group-row:disabled { opacity: 1; }
.tf-activity-group-icon { font-size: 11px; color: var(--ink-dim); }
.tf-activity-group-label { font-size: 11.5px; font-weight: 600; }
.tf-activity-group-pnl { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 700; margin-left: auto; }
.tf-activity-group-pnl.is-good { color: var(--safe); }
.tf-activity-group-pnl.is-bad { color: var(--danger); }
/* Phase 8, item 13 — the group's own timestamp doubles as a "show this on the chart" jump
   target (trenches.js's scrollChartToTimestamp) — a plain <button> reset to look like the
   muted timestamp text it always was, with just an underline-on-hover to hint it's clickable. */
.tf-activity-group-time {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  margin-top: 2px;
  color: var(--ink-dim);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.tf-activity-group-time:hover { color: var(--pin); text-decoration: underline; }

.tf-activity-raw-toggle {
  align-self: flex-start;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-dim);
  background: transparent;
  border: 1px dashed var(--card-edge);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.tf-activity-raw-toggle:hover { color: var(--paper); }
.tf-activity-raw-list, .tf-activity-group .tf-activity-raw-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  padding: 8px;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.tf-activity-raw-row {
  display: flex;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-dim);
}
.tf-activity-raw-row span:first-child { flex: 0 0 140px; }
.tf-activity-raw-row span:last-child { margin-left: auto; }
.tf-activity-raw-row .is-good { color: var(--safe); }
.tf-activity-raw-row .is-bad { color: var(--danger); }

/* ── War-room ambiance (2026-09-06) ──────────────────────────────────────────────────
   The battlefield treatment: every effect below is CSS-only decoration — transform/
   opacity animations on single small elements (GPU-composited), zero new requests, zero
   layout work, and every continuous animation is skipped for reduced-motion users. The
   data, ranking, and behavior of the board are untouched; this is atmosphere only. */

/* Faint trench-line hatching over the whole theater — static (no animation, no cost),
   barely-there so the rows stay the loudest thing on screen. */
.trenches-app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg, transparent 0px, transparent 120px, rgba(var(--safe-rgb), 0.016) 120px, rgba(var(--safe-rgb), 0.016) 121px),
    repeating-linear-gradient(65deg, transparent 0px, transparent 160px, rgba(var(--pin-rgb), 0.014) 160px, rgba(var(--pin-rgb), 0.014) 161px);
}

/* Radar refresh — one thin line drifting down the theater on a slow loop. */
.trenches-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, transparent 5%, rgba(var(--safe-rgb), 0.10) 30%, rgba(var(--safe-rgb), 0.16) 50%, rgba(var(--safe-rgb), 0.10) 70%, transparent 95%);
  box-shadow: 0 0 18px rgba(var(--safe-rgb), 0.12);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .trenches-sweep { animation: trenches-radar-sweep 11s linear infinite; }
}
@keyframes trenches-radar-sweep {
  0% { transform: translateY(0); opacity: 0; }
  6% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(calc(100vh - 60px)); opacity: 0; }
}

/* The live dot gets a radar ping — an expanding ring behind the pulse it already had. */
.trenches-live-indicator { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .trenches-live-dot::after {
    content: '';
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    border: 1px solid rgba(var(--safe-rgb), 0.7);
    animation: trenches-radar-ping 2.4s ease-out infinite;
  }
}
@keyframes trenches-radar-ping {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3.4); opacity: 0; }
}
.trenches-live-dot { position: relative; display: inline-flex; }

/* Comms cursor on the mission subtitle. */
.trenches-brand-subtitle::after {
  content: '▍';
  margin-left: 3px;
  color: var(--pin);
}
@media (prefers-reduced-motion: no-preference) {
  .trenches-brand-subtitle::after { animation: tr-pulse 1.2s step-end infinite; }
}

/* Rows are targets: aim with a crosshair, and a hot (BREAKOUT) row's left rail breathes
   like a live contact instead of sitting static. */
.tr-row { cursor: crosshair; }
@media (prefers-reduced-motion: no-preference) {
  .tr-row.is-hot { animation: tr-hot-contact 2.2s ease-in-out infinite; }
}
@keyframes tr-hot-contact {
  0%, 100% { border-left-color: rgba(var(--danger-rgb), 0.55); }
  50% { border-left-color: rgba(var(--danger-rgb), 1); }
}

/* Sector tabs: the active sector holds a steady signal glow (static — no animation). */
.trenches-tab.is-active { box-shadow: 0 0 14px rgba(var(--pin-rgb), 0.18), inset 0 0 8px rgba(var(--pin-rgb), 0.06); }

/* Quick-buy muzzle flash — one 180ms flash on the shot, then done. */
.tr-quickbuy:active { animation: tr-muzzle-flash 0.18s ease-out; }
@keyframes tr-muzzle-flash {
  0% { background: rgba(var(--safe-rgb), 0.85); color: #04140a; box-shadow: 0 0 22px rgba(var(--safe-rgb), 0.8); }
  100% { background: rgba(var(--safe-rgb), 0.22); }
}

/* ── Chart-first trading + on-demand safety scan (tester request 2026-09-07) ─────────
   Row buttons: CHART opens Focus with no check; SCAN opens it and runs the check with
   the sweep below. Same visibility-reservation trick as .tr-quickbuy (the cell must
   never change width on hover). */
.tr-chartbtn, .tr-scanbtn {
  visibility: hidden;
  margin-left: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 5px;
  padding: 2px 7px;
  cursor: pointer;
}
.tr-chartbtn {
  color: var(--pin);
  background: rgba(var(--pin-rgb), 0.08);
  border: 1px solid rgba(var(--pin-rgb), 0.4);
}
.tr-scanbtn {
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--card-edge);
}
.tr-row:hover .tr-chartbtn, .tr-row:focus-visible .tr-chartbtn,
.tr-row:hover .tr-scanbtn, .tr-row:focus-visible .tr-scanbtn { visibility: visible; }
.tr-chartbtn:hover { background: rgba(var(--pin-rgb), 0.2); box-shadow: 0 0 10px rgba(var(--pin-rgb), 0.25); }
.tr-scanbtn:hover { color: var(--paper); border-color: rgba(var(--safe-rgb), 0.45); }

/* Toolbar SAFETY SCAN button — sits beside Fullscreen, same base shape, safety-green
   accent so it reads as the protective action in the row of chart controls. */
.tf-safety-scan-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--safe);
  background: rgba(var(--safe-rgb), 0.07);
  border: 1px solid rgba(var(--safe-rgb), 0.4);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
}
.tf-safety-scan-btn:hover:not(:disabled) { background: rgba(var(--safe-rgb), 0.16); box-shadow: 0 0 12px rgba(var(--safe-rgb), 0.25); }
.tf-safety-scan-btn:disabled { cursor: wait; }
.tf-safety-scan-btn.is-scanning { animation: tf-scanbtn-breathe 1.2s ease-in-out infinite; }
.tf-safety-scan-btn .icn-slot svg { width: 13px; height: 13px; }
@keyframes tf-scanbtn-breathe {
  0%, 100% { box-shadow: 0 0 4px rgba(var(--safe-rgb), 0.2); }
  50% { box-shadow: 0 0 16px rgba(var(--safe-rgb), 0.55); }
}

/* Intel-stack CTA — the honest empty state when Focus opened chart-first. */
.tf-scan-cta {
  display: block;
  width: 100%;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--safe);
  background: rgba(var(--safe-rgb), 0.08);
  border: 1px dashed rgba(var(--safe-rgb), 0.5);
  border-radius: 9px;
  padding: 13px 12px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.tf-scan-cta:hover { background: rgba(var(--safe-rgb), 0.16); box-shadow: 0 0 14px rgba(var(--safe-rgb), 0.25); }
.tf-scan-cta-note {
  margin: 8px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* The lower tabs' own no-scan-yet state (Overview/Safety/Creator before any check has
   run — see renderFocusLowerTab). Reuses .tf-scan-cta for the button itself; the
   max-width just keeps a full-width dashed button from looking absurd in the wide
   lower panel. */
.tf-lower-noscan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 6px 0;
}
.tf-lower-noscan .tf-scan-cta { max-width: 300px; }

/* The scan sweep itself — honest theatre over a real in-flight check: a beam crossing
   the chart, a faint grid shimmer, and a status line. pointer-events:none throughout so
   the chart stays fully interactive under it. */
.tf-scan-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: 1;
  transition: opacity .4s ease;
}
.tf-scan-overlay.is-done { opacity: 0; }
/* The scope: a reticle hunting across the chart, full-bleed crosshairs tracking it.
   .tf-scan-track is a zero-size anchor the keyframes move; hairlines and the scope ring
   all centre on it. On lock (.is-locked) it snaps centre and takes the verdict's tone. */
.tf-scan-track {
  position: absolute;
  left: 12%;
  top: 38%;
  width: 0;
  height: 0;
  animation: tf-scan-sweep 3.8s cubic-bezier(.45, .05, .55, .95) infinite;
}
/* Hunting path — deliberately not a straight pass: a scope searches, it doesn't wipe. */
@keyframes tf-scan-sweep {
  0%   { left: 12%; top: 38%; }
  22%  { left: 68%; top: 24%; }
  42%  { left: 44%; top: 60%; }
  64%  { left: 86%; top: 40%; }
  82%  { left: 28%; top: 68%; }
  100% { left: 12%; top: 38%; }
}
.tf-scan-hair { position: absolute; background: rgba(var(--safe-rgb), 0.22); }
.tf-scan-hair--h { left: -200vw; width: 400vw; top: -0.5px; height: 1px; }
.tf-scan-hair--v { top: -200vh; height: 400vh; left: -0.5px; width: 1px; }
.tf-scan-scope {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--safe-rgb), 0.85);
  box-shadow: 0 0 18px rgba(var(--safe-rgb), 0.35), inset 0 0 26px rgba(var(--safe-rgb), 0.1);
}
/* Inner cross — fades out around the centre so the dot owns the middle. */
.tf-scan-scope::before {
  content: '';
  position: absolute;
  left: 50%; top: 7%; bottom: 7%; width: 1px; margin-left: -0.5px;
  background: linear-gradient(rgba(var(--safe-rgb), 0.8), transparent 42%, transparent 58%, rgba(var(--safe-rgb), 0.8));
}
.tf-scan-scope::after {
  content: '';
  position: absolute;
  top: 50%; left: 7%; right: 7%; height: 1px; margin-top: -0.5px;
  background: linear-gradient(90deg, rgba(var(--safe-rgb), 0.8), transparent 42%, transparent 58%, rgba(var(--safe-rgb), 0.8));
}
.tf-scan-tick { position: absolute; background: rgba(var(--safe-rgb), 0.9); }
.tf-scan-tick--n { left: 50%; top: -7px; width: 1.5px; height: 9px; transform: translateX(-50%); }
.tf-scan-tick--s { left: 50%; bottom: -7px; width: 1.5px; height: 9px; transform: translateX(-50%); }
.tf-scan-tick--e { top: 50%; right: -7px; height: 1.5px; width: 9px; transform: translateY(-50%); }
.tf-scan-tick--w { top: 50%; left: -7px; height: 1.5px; width: 9px; transform: translateY(-50%); }
.tf-scan-dot {
  position: absolute;
  left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--safe);
  box-shadow: 0 0 10px rgba(var(--safe-rgb), 0.9);
  animation: tf-scan-pulse-blink 0.9s ease-in-out infinite;
}
/* Targeting brackets framing the whole chart. */
.tf-scan-corner { position: absolute; width: 24px; height: 24px; border: 2px solid rgba(var(--safe-rgb), 0.5); }
.tf-scan-corner--tl { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.tf-scan-corner--tr { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.tf-scan-corner--bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.tf-scan-corner--br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
/* Target locked — reticle snaps centre, ring pops, tone comes from the real verdict. */
.tf-scan-overlay.is-locked .tf-scan-track { animation: none; left: 50%; top: 44%; }
.tf-scan-overlay.is-locked .tf-scan-scope { animation: tf-scan-lock 0.35s ease; }
@keyframes tf-scan-lock {
  0% { transform: translate(-50%, -50%) scale(1.35); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.tf-scan-overlay.tone-danger .tf-scan-scope,
.tf-scan-overlay.tone-danger .tf-scan-corner { border-color: rgba(var(--danger-rgb), 0.85); box-shadow: 0 0 18px rgba(var(--danger-rgb), 0.35); }
.tf-scan-overlay.tone-danger .tf-scan-dot,
.tf-scan-overlay.tone-danger .tf-scan-tick { background: var(--danger); }
.tf-scan-overlay.tone-danger .tf-scan-hair { background: rgba(var(--danger-rgb), 0.3); }
.tf-scan-overlay.tone-danger .tf-scan-label { color: #ff5b5b; border-color: rgba(var(--danger-rgb), 0.4); }
.tf-scan-overlay.tone-caution .tf-scan-scope,
.tf-scan-overlay.tone-caution .tf-scan-corner { border-color: rgba(var(--pin-rgb), 0.85); box-shadow: 0 0 18px rgba(var(--pin-rgb), 0.3); }
.tf-scan-overlay.tone-caution .tf-scan-dot,
.tf-scan-overlay.tone-caution .tf-scan-tick { background: var(--pin); }
.tf-scan-overlay.tone-caution .tf-scan-hair { background: rgba(var(--pin-rgb), 0.3); }
.tf-scan-overlay.tone-caution .tf-scan-label { color: var(--pin); border-color: rgba(var(--pin-rgb), 0.4); }
.tf-scan-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(var(--safe-rgb), 0.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(var(--safe-rgb), 0.05) 0 1px, transparent 1px 44px);
  animation: tf-scan-grid-pulse 1.6s ease-in-out infinite;
}
@keyframes tf-scan-grid-pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
.tf-scan-label {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .07em;
  color: var(--safe);
  background: rgba(4, 20, 10, 0.82);
  border: 1px solid rgba(var(--safe-rgb), 0.35);
  border-radius: 999px;
  padding: 5px 13px;
}
.tf-scan-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--safe);
  animation: tf-scan-pulse-blink 0.9s ease-in-out infinite;
}
@keyframes tf-scan-pulse-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(var(--safe-rgb), 0.8); }
  50% { opacity: .35; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tf-scan-track, .tf-scan-grid, .tf-scan-pulse, .tf-scan-dot,
  .tf-scan-overlay.is-locked .tf-scan-scope, .tf-safety-scan-btn.is-scanning { animation: none; }
}

/* Engagement callout — the shot call above the verdict badge, bracketed like a HUD
   readout. Tones mirror verdictTone in trenches.js exactly. */
.tf-engage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 9px 8px;
  margin-bottom: 8px;
  border-radius: 8px;
  animation: tf-engage-in 0.35s ease;
}
.tf-engage-bracket { width: 14px; height: 14px; border: 1.5px solid currentColor; flex-shrink: 0; }
.tf-engage-bracket--l { border-right: 0; border-radius: 3px 0 0 3px; }
.tf-engage-bracket--r { border-left: 0; border-radius: 0 3px 3px 0; }
.tf-engage--clear {
  color: var(--safe);
  background: rgba(var(--safe-rgb), 0.07);
  text-shadow: 0 0 12px rgba(var(--safe-rgb), 0.55);
}
.tf-engage--caution {
  color: var(--pin);
  background: rgba(var(--pin-rgb), 0.07);
  text-shadow: 0 0 12px rgba(var(--pin-rgb), 0.5);
}
.tf-engage--danger {
  color: #ff5b5b;
  background: rgba(var(--danger-rgb), 0.08);
  text-shadow: 0 0 12px rgba(var(--danger-rgb), 0.5);
}
@keyframes tf-engage-in {
  0% { letter-spacing: .4em; opacity: 0; }
  100% { letter-spacing: .14em; opacity: 1; }
}
.tf-recon-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--ink-dim);
  margin: 10px 0 5px;
}
@media (prefers-reduced-motion: reduce) {
  .tf-engage { animation: none; }
}

/* Scan-result toast (2026-09-08) — the scan's real verdict renders into the intel stack
   in .tf-side-col, which drops BELOW the chart once .tf-body stacks to one column (see
   that breakpoint below) — so the result can land completely out of view with the sweep
   animation the only thing that was on screen. Fixed top-center, over everything,
   regardless of scroll position; same lazy-create/retarget idiom as #tr-quickbuy-toast.
   Tones match .tf-engage-- exactly (same verdictTone mapping). */
#tf-scan-result-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  z-index: 400;
  width: min(360px, calc(100vw - 24px));
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#tf-scan-result-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tf-scan-toast--clear { border-top: 3px solid var(--safe); }
.tf-scan-toast--caution { border-top: 3px solid var(--pin); }
.tf-scan-toast--danger { border-top: 3px solid #ff5b5b; }
.tf-scan-toast-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.tf-scan-toast-close:hover { color: var(--ink); }
.tf-scan-toast-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  padding-right: 18px;
}
.tf-scan-toast--clear .tf-scan-toast-headline { color: var(--safe); }
.tf-scan-toast--caution .tf-scan-toast-headline { color: var(--pin); }
.tf-scan-toast--danger .tf-scan-toast-headline { color: #ff5b5b; }
.tf-scan-toast-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-dim);
  margin-top: 4px;
}
.tf-scan-toast-jump {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 7px 10px;
  background: rgba(var(--pin-rgb), 0.1);
  border: 1px solid var(--card-edge);
  border-radius: 7px;
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.tf-scan-toast-jump:hover { background: rgba(var(--pin-rgb), 0.18); }
@media (prefers-reduced-motion: reduce) {
  #tf-scan-result-toast { transition: none; }
}

/* ── PAPER / LIVE FIRE mode switch (tester request 2026-09-07) ────────────────────────
   Rendered into every .js-mode-switch-host (board toolbar, Focus trade panel, drawer)
   by renderModeSwitches in trenches.js. PAPER is calm; LIVE FIRE is unmistakably hot,
   and the armed CONFIRM step is louder still — the dangerous direction must never look
   routine. */
.tr-mode-switch {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--card-edge);
  border-radius: 8px;
  overflow: hidden;
  background: var(--board);
}
.tr-mode-opt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  padding: 7px 13px;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tr-mode-opt--paper.is-active {
  color: #b9c7ff;
  background: rgba(185, 199, 255, 0.12);
  box-shadow: inset 0 0 12px rgba(185, 199, 255, 0.12);
}
.tr-mode-opt--live.is-active {
  color: #ff5b5b;
  background: rgba(var(--danger-rgb), 0.14);
  text-shadow: 0 0 10px rgba(var(--danger-rgb), 0.6);
  animation: tr-live-breathe 1.8s ease-in-out infinite;
}
@keyframes tr-live-breathe {
  0%, 100% { box-shadow: inset 0 0 8px rgba(var(--danger-rgb), 0.15); }
  50% { box-shadow: inset 0 0 18px rgba(var(--danger-rgb), 0.4); }
}
.tr-mode-opt:not(.is-active):hover { color: var(--paper); }
.tr-mode-opt--live.is-armed {
  color: #fff;
  background: #c81e1e;
  text-shadow: none;
  animation: tr-arm-flash 0.6s ease-in-out infinite;
}
@keyframes tr-arm-flash {
  0%, 100% { background: #c81e1e; }
  50% { background: var(--danger); }
}
.tr-mode-opt:disabled { opacity: .6; cursor: wait; animation: none; }
/* Board-toolbar placement — sits between telemetry and search. */
.tr-mode-switch-host--board { display: flex; align-items: center; margin-left: auto; margin-right: 10px; }
/* Focus/drawer placement — full-width segmented bar above the mode note. */
.tf-trade-panel .js-mode-switch-host .tr-mode-switch,
.trenches-drawer .js-mode-switch-host .tr-mode-switch { display: flex; width: 100%; margin-bottom: 6px; }
.tf-trade-panel .js-mode-switch-host .tr-mode-opt,
.trenches-drawer .js-mode-switch-host .tr-mode-opt { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .tr-mode-opt--live.is-active, .tr-mode-opt--live.is-armed { animation: none; }
}

/* ── Early-coin limiter (2026-09-08) ─────────────────────────────────────────────────
   Discovery admits coins from 3m old now — the pill flags them, the toolbar chip hides
   them (shared 'snipetrader-limit-early' setting with Desk Settings). Amber = caution. */
.tr-early-pill {
  display: inline-block;
  margin-left: 6px;
  vertical-align: 1px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--pin);
  background: rgba(var(--pin-rgb), 0.12);
  border: 1px solid rgba(var(--pin-rgb), 0.45);
  border-radius: 4px;
  padding: 1px 5px;
  cursor: help;
}
/* Bonding-progress pill (Axiom "Final Stretch" parity) — same shape as the EARLY pill,
   safe-green because progress this far means proven sustained buying, not a warning. */
.tr-stretch-pill {
  display: inline-block;
  margin-left: 6px;
  vertical-align: 1px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--safe);
  background: rgba(var(--safe-rgb), 0.12);
  border: 1px solid rgba(var(--safe-rgb), 0.45);
  border-radius: 4px;
  padding: 1px 5px;
  cursor: help;
}
.tr-early-toggle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--pin);
  background: rgba(var(--pin-rgb), 0.1);
  border: 1px solid rgba(var(--pin-rgb), 0.4);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, box-shadow .12s;
}
.tr-early-toggle:hover { background: rgba(var(--pin-rgb), 0.2); box-shadow: 0 0 10px rgba(var(--pin-rgb), 0.2); }
/* Limited = the recommended, quieter state — reads as "handled", not as a warning. */
.tr-early-toggle.is-limited {
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--card-edge);
}

/* ── Phase 10 lifecycle terminal (2026-09-24) ─────────────────────────────────────────
   Dense, sticky-headed, virtualized. Same tokens as the rest of the page; unknown reads
   as UNKNOWN / — and is dimmed rather than styled as a value. */
.tr-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.tr-strip-chip { flex: 1 1 150px; min-width: 0; border: 1px solid var(--card-edge); background: var(--card); border-radius: 8px; padding: 6px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink); }
.tr-strip-chip b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: .12em; color: var(--ink-dim); font-weight: 600; }
.tr-strip-chip .v { font-size: 15px; color: var(--paper); font-weight: 600; }
.tr-strip-chip .v.is-unknown { color: var(--ink-dim); font-weight: 400; }
.tr-strip-chip .s { color: var(--ink-dim); font-size: 11px; margin-left: 6px; }
.tr-strip-chip.is-live .v { color: var(--danger); }
.tr-lc { border: 1px solid var(--card-edge); border-radius: 10px; background: var(--card); margin-bottom: 12px; overflow: hidden; }
.tr-lc-head { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--card-edge); }
.tr-lc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-lc-tab { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; color: var(--ink-dim); background: transparent; border: 1px solid var(--card-edge); border-radius: 999px; padding: 5px 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.tr-lc-tab.is-active { color: #0b120e; background: var(--pin); border-color: var(--pin); }
.tr-lc-tab .n { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; opacity: .85; }
.tr-lc-tab.is-empty { opacity: .55; }
.tr-lc-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-lc-input, .tr-lc-select, .tr-lc-btn { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink); background: rgba(0,0,0,.25); border: 1px solid var(--card-edge); border-radius: 6px; padding: 4px 7px; min-width: 0; }
.tr-lc-input { flex: 1 1 160px; }
.tr-lc-btn { cursor: pointer; color: var(--pin); }
.tr-lc-scroll { max-height: 560px; overflow: auto; position: relative; }
.tr-lc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; table-layout: fixed; min-width: 1080px; }
.tr-lc-table thead th { position: sticky; top: 0; z-index: 2; background: #0e1712; color: var(--ink-dim); font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: .12em; text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--card-edge); white-space: nowrap; }
.tr-lc-table thead th.lc-num { text-align: right; }
.tr-lc-table tbody td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.04); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.tr-lc-table tbody td.lc-num { text-align: right; }
.tr-lc.is-compact .tr-lc-table tbody td { padding: 3px 8px; font-size: 11px; }
.tr-lc-table .lc-token { width: 150px; } .tr-lc-table .lc-why { width: 26%; }
.tr-lc-row { cursor: pointer; }
.tr-lc-row:hover td { background: rgba(var(--pin-rgb), .05); }
.tr-lc-sym { color: var(--paper); font-weight: 600; } .tr-lc-mint { color: var(--ink-dim); font-size: 10px; }
.tr-lc-unk { color: var(--ink-dim); }
.tr-lc-pos { color: var(--safe); } .tr-lc-neg { color: var(--danger); }
.tr-lc-flag { color: var(--danger); font-weight: 600; } .tr-lc-clear { color: var(--safe); }
.tr-lc-stage { font-size: 10px; letter-spacing: .08em; color: var(--pin); }
.tr-lc-act { font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--pin); background: transparent; border: 1px solid rgba(var(--pin-rgb), .45); border-radius: 6px; padding: 2px 7px; cursor: pointer; }
.tr-lc-spacer td { padding: 0; border: 0; }
.tr-lc-foot { padding: 6px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink-dim); border-top: 1px solid var(--card-edge); }
@media (max-width: 760px) {
  .tr-strip-chip { flex-basis: 120px; padding: 5px 8px; } .tr-strip-chip .v { font-size: 13px; }
  .tr-lc-scroll { max-height: 440px; }
  .tr-lc-controls .tr-lc-select { flex: 1 1 100px; }
}

/* Phase 12 responsive audit (2026-09-24): at 1080px (portrait tablet / vertical monitor) the
   toolbar row — wordmark, counters, stage summary, EARLY/WEAK pills, search — was 1126px wide
   and the search box hung 46px past the viewport (the 1100px query narrows it but the row
   itself never wrapped). Let the row wrap below the 1180px breakpoint the page already uses. */
@media (max-width: 1180px) {
  .trenches-toolbar { flex-wrap: wrap; }
  .trenches-search-input { max-width: 100%; min-width: 0; }
}

/* ── Lifecycle terminal IA rebuild (D-021, 2026-09-24) ──────────────────────────────────
   Two tiers of tabs (lifecycle primary, Snipe intelligence secondary), a FILTERS popover with
   presets and an active count, a quick sort, stronger token identity, cards under 640px, a
   collapsible SNIPE SIGNALS panel for the classic board. Tokens only. */
.tr-lc-head { position: relative; }
.tr-lc-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.tr-lc-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tr-lc-tier-label { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .14em; color: var(--ink-dim); margin-right: 4px; }
.tr-lc-tier--lifecycle .tr-lc-tab { font-size: 13px; padding: 7px 14px; letter-spacing: .08em; border-radius: var(--radius-s); }
.tr-lc-tier--intel { padding-left: 14px; border-left: 1px solid var(--card-edge); }
.tr-lc-tier--intel .tr-lc-tab { font-size: 10.5px; padding: 4px 9px; border-style: dashed; }
.tr-lc-tier--intel .tr-lc-tab.is-active { background: transparent; color: var(--pin); border-style: solid; border-color: var(--pin); }
.tr-lc-filters-btn { position: relative; }
.tr-lc-filters-btn.is-on { border-color: rgba(var(--pin-rgb), .6); }
.tr-lc-filters-btn .n { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 4px; border-radius: var(--radius-pill); background: var(--pin); color: var(--board); font-size: 10px; font-weight: 700; text-align: center; }
.tr-lc-filters-btn .n[hidden] { display: none; }
.tr-lc-filters-pop { position: absolute; right: 10px; top: calc(100% - 2px); z-index: var(--z-drawer); width: min(760px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; padding: 10px; border: 1px solid rgba(var(--pin-rgb), .4); border-radius: var(--radius-m); background: var(--card); box-shadow: 0 18px 44px -16px rgba(var(--board-rgb), .95); }
.tr-lc-filters-pop[hidden] { display: none; }
.tr-lc-presets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--card-edge); }
.tr-lc-preset { font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .1em; color: var(--ink); background: transparent; border: 1px solid var(--card-edge); border-radius: var(--radius-pill); padding: 3px 10px; cursor: pointer; }
.tr-lc-preset:hover { border-color: rgba(var(--pin-rgb), .5); color: var(--paper); }
.tr-lc-preset--clear { margin-left: auto; color: var(--ink-dim); }
.lc-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--card-edge); background: var(--board); }
.lc-avatar--i { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 10px; font-weight: 700; color: var(--ink); }
.tr-lc-table .lc-token { width: 190px; }
.tr-lc-table td.lc-token { display: flex; align-items: center; gap: 7px; }
.lc-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.tr-lc-name { color: var(--ink-dim); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-lc.is-compact .tr-lc-table td.lc-token { gap: 6px; } .tr-lc.is-compact .lc-avatar { width: 18px; height: 18px; }
/* cards under 640px */
.tr-lc.is-cards .tr-lc-table { min-width: 0; table-layout: auto; }
.tr-lc.is-cards .tr-lc-table thead { display: none; }
.tr-lc-card td { white-space: normal !important; padding: 6px 10px !important; }
.lc-card-l1 { display: flex; align-items: center; gap: 8px; }
.lc-card-l1 .lc-id { flex: 1; } .lc-card-age { color: var(--ink-dim); font-size: 10.5px; }
.lc-card-l2 { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 3px; font-size: 10.5px; }
.lc-card-l2 b, .lc-card-l3 b { font-family: var(--font-ui); font-size: 9px; letter-spacing: .1em; color: var(--ink-dim); font-weight: 700; margin-right: 3px; }
.lc-card-l3 { margin-top: 2px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the classic board becomes the SNIPE SIGNALS panel */
.tr-signals { border: 1px solid var(--card-edge); border-radius: var(--radius-m); background: var(--card); margin-bottom: 12px; }
.tr-signals-sum { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px 14px; }
.tr-signals-sum::-webkit-details-marker { display: none; }
.tr-signals-sum::before { content: '▸'; color: var(--pin); margin-right: 2px; }
.tr-signals[open] .tr-signals-sum::before { content: '▾'; }
.tr-signals-k { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--paper); }
.tr-signals-s { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim); }
.tr-signals .trenches-tabs, .tr-signals .trenches-board-wrap, .tr-signals .trenches-sort-row, .tr-signals .trenches-footnote { margin-left: 12px; margin-right: 12px; }
.trenches-tab.is-merged { display: none !important; }
@media (max-width: 640px) { .tr-lc-tier--intel { padding-left: 0; border-left: 0; } .tr-lc-filters-pop { right: 0; left: 0; width: auto; } .tr-lc-tier--lifecycle .tr-lc-tab { font-size: 12px; padding: 6px 10px; } }

/* Identity (2026-09-24): a coin with no symbol or name yet shows its short mint in the symbol slot — quiet, monospace, never "$???". */
.tr-lc-sym--mint { color: var(--ink-dim); font-family: 'IBM Plex Mono', monospace; font-weight: 500; letter-spacing: 0; }


/* Confirmed rugs + density hierarchy (2026-09-24, mission §14–18). Primary scan columns keep full
   weight (TOKEN · STAGE · AGE · MC · LIQ · FLOW · ROUTE · SETUP · WHY NOW · ACTION); the intelligence
   that is rarely known yet (BUYERS · DEV · BUNDLE) sits a step back, and UNKNOWN is a dim glyph with
   the word in its tooltip — quiet, never converted into a value. RUGGED is loud for everyone. */
.tr-lc-rugged { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: .25rem; font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .12em; color: var(--board); background: var(--danger); vertical-align: middle; }
.tr-lc-table th.lc-secondary { color: rgba(var(--ink-rgb, 216, 245, 223), 0.45); font-weight: 500; }
.tr-lc-table td.lc-secondary { opacity: .72; font-size: .68rem; }
.tr-lc-unk--q { opacity: .55; font-family: 'IBM Plex Mono', monospace; }
.tr-lc-select--rug.is-locked option[value="hide"] { color: var(--ink-dim); }
.tr-lc-select--rug.is-locked { border-color: rgba(var(--pin-rgb), 0.35); }
/* 2026-09-24: the FILTERS popover is absolutely positioned under the head; `.tr-lc { overflow: hidden }`
   clipped its third row whenever the table beneath was short ("0 of 23 match"). The card keeps its
   rounded corners through the scroll area instead. */
.tr-lc { overflow: visible; }
.tr-lc-scroll { border-radius: 0 0 10px 10px; }

/* Live-feed status beside the timeframe buttons (GitHub #27): what the tape behind the candle is
   doing — LIVE / QUIET / CONNECTING / CALIBRATING / NO LIVE FEED / RECONNECTING. Words only. */
.tf-chart-feed-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  color: var(--ink-dim);
  background: rgba(var(--safe-rgb), 0.04);
  border: 1px solid rgba(var(--safe-rgb), 0.14);
}
.tf-chart-feed-label--live { color: var(--safe); background: rgba(var(--safe-rgb), 0.10); border-color: rgba(var(--safe-rgb), 0.35); }
.tf-chart-feed-label--quiet { color: var(--ink-dim); }
.tf-chart-feed-label--warn { color: var(--pin); background: rgba(var(--pin-rgb), 0.10); border-color: rgba(var(--pin-rgb), 0.35); }
.tf-chart-feed-label--down { color: var(--danger); background: rgba(var(--danger-rgb), 0.10); border-color: rgba(var(--danger-rgb), 0.35); }
.tf-chart-feed-label.hidden { display: none; }

/* ── Discover presets (2026-10-05, GitHub #27 handoff) ─────────────────────────────────────
   The DISCOVER tier leads the tab bar; the stage tiers follow. Tokens only (design-token test). */
.tr-lc-tier--discover { padding-right: 14px; border-right: 1px solid var(--card-edge); }
.tr-lc-tier--discover .tr-lc-tab { font-size: 13px; padding: 7px 14px; letter-spacing: .08em; border-radius: var(--radius-s); }
.tr-lc-plus { margin-left: 4px; color: var(--ink-dim); font-size: 9.5px; }
.tr-lc-tab.is-active .tr-lc-plus { color: inherit; opacity: .7; }
.tr-lc-star { background: transparent; border: 0; color: var(--ink-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 4px 0 0; vertical-align: middle; }
.tr-lc-star.is-on { color: var(--pin); }
.tr-lc-star:hover, .tr-lc-star:focus-visible { color: var(--pin); }
.tr-lc-warn { display: inline-block; margin-left: .3rem; padding: 0 .3rem; border-radius: .25rem; border: 1px solid rgba(var(--danger-rgb), .55); color: var(--danger); font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; vertical-align: middle; }
.tr-lc-table td.lc-traded { white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; }
.tr-lc-table th.lc-traded { width: 118px; }
.tr-lc-spark { vertical-align: middle; margin-left: 5px; }
.tr-lc-spark path { fill: none; stroke-width: 1.3; }
.tr-lc-spark.is-up path { stroke: var(--safe); }
.tr-lc-spark.is-down path { stroke: var(--danger); }
.tr-lc-age { color: var(--ink-dim); font-size: 9.5px; }
.tr-lc-age.is-stale { color: var(--danger); }
.tr-lc-why-src { color: var(--ink); }
.tr-lc-sep td { padding: 0 !important; border-top: 1px dashed var(--card-edge); }
.tr-lc-sep-btn { width: 100%; text-align: left; background: transparent; border: 0; color: var(--ink-dim); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; padding: 6px 10px; cursor: pointer; }
.tr-lc-sep-btn:hover { color: var(--ink); }
.tr-lc-hold { padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; color: var(--pin); border-top: 1px solid var(--card-edge); }
.tr-lc-linkbtn { background: transparent; border: 0; padding: 0; color: var(--pin); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) { .tr-lc-tier--discover { padding-right: 0; border-right: 0; } .tr-lc-tier--discover .tr-lc-tab { font-size: 12px; padding: 6px 10px; } }
/* Preview walk-through (390 px): three tiers of tabs wrapped into ~8 rows and pushed the first coin
   a full screen down. On phones each tier is one horizontally scrolling row instead. */
@media (max-width: 640px) {
  .tr-lc-tabs .tr-lc-tier { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .tr-lc-tabs .tr-lc-tier::-webkit-scrollbar { display: none; }
  .tr-lc-tabs .tr-lc-tab { flex: 0 0 auto; }
  .tr-lc-tabs .tr-lc-tier-label { flex: 0 0 auto; }
}
.tr-lc-warn--n { letter-spacing: .04em; cursor: help; white-space: nowrap; margin: 0 .4rem 0 0; }
/* Coverage note and watchlist placeholders (Codex review of PR #42). Tokens only. */
.tr-lc-note { padding: 6px 10px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.45; color: var(--ink-dim); border-bottom: 1px solid var(--card-edge); background: rgba(var(--pin-rgb), .05); }
.tr-lc-missing { display: inline-block; margin-left: .35rem; padding: 0 .35rem; border-radius: .25rem; border: 1px dashed var(--card-edge); color: var(--ink-dim); font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; vertical-align: middle; }
.tr-lc-row.is-missing td { opacity: .85; }

/* ── Discover visual revision (2026-10-06, Codex brief on PR #42 from Zion's preview) ─────────
   A calmer, readable board: a neutral charcoal palette (Snipe green kept for actions and the brand,
   red/amber reserved for risk), a normal sans-serif UI with tabular numbers (monospace only for
   mint addresses), no scanlines / hatching / radar sweep behind the data, 60 px rows, 44 px touch
   targets and visible keyboard focus. Scoped to the Discover page (body[data-page="trenches"]) so
   no other page changes. Colours were contrast-checked (4.5:1+ for text on --d-panel).
   The --d-* tokens themselves now live in shared/theme.css (GitHub #67/#68), unchanged, so the
   Focus chart view and the Sniper Desk use exactly the same values. */
body[data-page="trenches"] { background: var(--d-canvas); }
/* No decorative layers behind the data: theme scanlines, trench hatching, the radar sweep. */
body[data-page="trenches"].sniper-theme::before, body[data-page="trenches"] .trenches-app::before { display: none; }
body[data-page="trenches"] .trenches-sweep { display: none; animation: none; }
body[data-page="trenches"] .trenches-app { padding: 24px 24px 64px; font-family: var(--d-font); color: var(--d-text); }
body[data-page="trenches"] .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body[data-page="trenches"] :is(.disc-head, .tr-lc, .tr-advanced, .tr-lc-detail) :focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; }

/* ── Header: name, one search, the trading mode ─────────────────────────────────── */
body[data-page="trenches"] .disc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
body[data-page="trenches"] .disc-title h1 { margin: 0; font-family: var(--d-font); font-size: 24px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--d-text); line-height: 1.2; }
body[data-page="trenches"] .disc-sub { margin: 2px 0 0; font-size: 14px; color: var(--d-text-2); }
body[data-page="trenches"] .disc-head-tools { display: flex; align-items: center; gap: 12px; flex: 1 1 420px; justify-content: flex-end; min-width: 0; }
body[data-page="trenches"] .disc-search { position: relative; flex: 0 1 440px; min-width: 0; display: flex; align-items: center; }
body[data-page="trenches"] .disc-search-ico { position: absolute; left: 12px; color: var(--d-muted); font-size: 16px; pointer-events: none; }
body[data-page="trenches"] .disc-search-input { width: 100%; height: 40px; padding: 0 12px 0 34px; font-family: var(--d-font); font-size: 14px; color: var(--d-text); background: var(--d-panel); border: 1px solid var(--d-border); border-radius: 8px; flex: 1 1 auto; }
body[data-page="trenches"] .disc-search-input::placeholder { color: var(--d-muted); letter-spacing: 0; }
body[data-page="trenches"] .disc-search-input:focus { outline: 2px solid var(--d-accent); outline-offset: 1px; border-color: transparent; }
body[data-page="trenches"] .disc-head .tr-mode-switch-host--board { margin: 0; }
body[data-page="trenches"] .disc-head .tr-mode-switch { border-color: var(--d-border); background: var(--d-panel); }
body[data-page="trenches"] .disc-head .tr-mode-opt { font-family: var(--d-font); font-size: 12px; letter-spacing: .04em; min-height: 36px; padding: 0 12px; }

/* ── Board panel ──────────────────────────────────────────────────────────────────── */
body[data-page="trenches"] .tr-lc { background: var(--d-panel); border: 1px solid var(--d-border); border-radius: 12px; overflow: visible; margin-bottom: 16px; }
body[data-page="trenches"] .tr-lc-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--d-border); position: relative; }
body[data-page="trenches"] .tr-lc-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
body[data-page="trenches"] .tr-lc-tab { font-family: var(--d-font); font-size: 14px; font-weight: 550; letter-spacing: 0; text-transform: none; color: var(--d-text-2); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 0 12px; min-height: 36px; gap: 8px; }
body[data-page="trenches"] .tr-lc-tab:hover { color: var(--d-text); background: var(--d-panel-2); }
body[data-page="trenches"] .tr-lc-tab.is-active { color: var(--d-text); background: var(--d-panel-2); border-color: var(--d-accent-line); box-shadow: inset 0 -2px 0 var(--d-accent); }
body[data-page="trenches"] .tr-lc-tab.is-empty { opacity: 1; }
body[data-page="trenches"] .tr-lc-tab .n { font-family: var(--d-font); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--d-text-2); opacity: 1; }
body[data-page="trenches"] .tr-lc-plus { margin-left: 4px; color: var(--d-muted); }
body[data-page="trenches"] .tr-lc-viewchip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--d-text-2); padding: 0 4px 0 10px; min-height: 32px; border: 1px dashed var(--d-border); border-radius: 8px; }
body[data-page="trenches"] .tr-lc-viewchip b { color: var(--d-text); font-weight: 600; }
body[data-page="trenches"] .tr-lc-viewchip-x { background: transparent; border: 0; color: var(--d-text-2); font-size: 18px; width: 32px; height: 32px; cursor: pointer; }
body[data-page="trenches"] .tr-lc-controls { gap: 8px; }
body[data-page="trenches"] :is(.tr-lc-select, .tr-lc-btn) { font-family: var(--d-font); font-size: 13px; color: var(--d-text); background: var(--d-canvas); border: 1px solid var(--d-border); border-radius: 8px; min-height: 36px; padding: 0 10px; letter-spacing: 0; text-transform: none; }
body[data-page="trenches"] .tr-lc-btn { color: var(--d-text); }
body[data-page="trenches"] .tr-lc-filters-btn.is-on { border-color: var(--d-accent-line); }
body[data-page="trenches"] .tr-lc-filters-btn .n { background: var(--d-accent); color: #06210F; }
body[data-page="trenches"] .tr-lc-filters-pop { background: var(--d-panel); border-color: var(--d-border); border-radius: 12px; padding: 16px; right: 16px; top: calc(100% - 4px); }
body[data-page="trenches"] .tr-lc-stages { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--d-border); }
body[data-page="trenches"] .tr-lc-stages-k, body[data-page="trenches"] .tr-adv-label { font-size: 12px; font-weight: 600; color: var(--d-text-2); margin-right: 4px; }
body[data-page="trenches"] .tr-lc-stagebtn { font-family: var(--d-font); font-size: 13px; color: var(--d-text-2); background: transparent; border: 1px solid var(--d-border); border-radius: 8px; min-height: 32px; padding: 0 10px; cursor: pointer; }
body[data-page="trenches"] .tr-lc-stagebtn.is-active { color: var(--d-text); border-color: var(--d-accent-line); }
body[data-page="trenches"] .tr-lc-stagebtn .n { font-variant-numeric: tabular-nums; color: var(--d-muted); margin-left: 4px; }
body[data-page="trenches"] .tr-lc-sort-m-wrap { display: none; }
body[data-page="trenches"] .tr-lc-preset { font-family: var(--d-font); letter-spacing: 0; color: var(--d-text-2); border-color: var(--d-border); min-height: 32px; }

/* Coverage: one line per view, the rest behind Details. */
body[data-page="trenches"] .tr-lc-note { font-family: var(--d-font); font-size: 13px; line-height: 1.5; color: var(--d-text-2); background: transparent; border-bottom: 1px solid var(--d-border); padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
body[data-page="trenches"] .tr-lc-note-more { flex-basis: 100%; color: var(--d-text-2); }
body[data-page="trenches"] .tr-lc-linkbtn { color: var(--d-accent-ink); font-family: var(--d-font); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; min-height: 24px; }

/* ── Table ────────────────────────────────────────────────────────────────────────── */
body[data-page="trenches"] .tr-lc-scroll { max-height: min(72vh, 900px); }
body[data-page="trenches"] .tr-lc-table { font-family: var(--d-font); font-size: 14px; font-variant-numeric: tabular-nums; min-width: 1040px; table-layout: fixed; }
body[data-page="trenches"] .tr-lc.is-adv .tr-lc-table { min-width: 1880px; }
/* extra columns are rendered only when Advanced → extra columns is on (lifecycle-view.js renderHead) */
body[data-page="trenches"] .tr-lc-table thead th { background: var(--d-panel); color: var(--d-text-2); font-family: var(--d-font); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 10px 12px; border-bottom: 1px solid var(--d-border); }
body[data-page="trenches"] .lc-th-sub { color: var(--d-muted); font-weight: 400; margin-left: 2px; }
body[data-page="trenches"] .tr-lc-table th.lc-token { width: 300px; } body[data-page="trenches"] .tr-lc-table th.lc-trend { width: 124px; }
body[data-page="trenches"] .tr-lc-table th.lc-num { width: 116px; } body[data-page="trenches"] .tr-lc-table th.lc-activity { width: 148px; }
body[data-page="trenches"] .tr-lc-table th.lc-riskcol { width: 220px; } body[data-page="trenches"] .tr-lc-table th.lc-act-col { width: 132px; }
body[data-page="trenches"] .tr-lc-table th.lc-adv { width: 110px; } body[data-page="trenches"] .tr-lc-table th.lc-adv.lc-why { width: 320px; }
body[data-page="trenches"] .tr-lc-table tbody td { height: 60px; padding: 8px 12px; border-bottom: 1px solid var(--d-border); color: var(--d-text); font-size: 14px; }
body[data-page="trenches"] .tr-lc.is-compact .tr-lc-table tbody td { height: 44px; padding: 4px 12px; font-size: 13px; }
body[data-page="trenches"] .tr-lc-table td.lc-token { display: table-cell; }
body[data-page="trenches"] .tr-lc-row:hover td { background: var(--d-panel-2); }
body[data-page="trenches"] .tr-lc-row:focus-visible { outline: 2px solid var(--d-accent); outline-offset: -2px; }
body[data-page="trenches"] .tr-lc-unk { color: var(--d-muted); }
body[data-page="trenches"] .tr-lc-pos, body[data-page="trenches"] .tone-pos { color: var(--d-accent-ink); }
body[data-page="trenches"] .tr-lc-neg { color: var(--d-text-2); }
body[data-page="trenches"] .tr-lc-flag { color: var(--d-danger); font-weight: 600; } body[data-page="trenches"] .tr-lc-clear { color: var(--d-text-2); }
body[data-page="trenches"] .tr-lc-stage { font-family: var(--d-font); font-size: 12px; letter-spacing: 0; color: var(--d-text-2); }

/* Token: star, 30 px image (initial fallback), name/symbol, then age and a short mint. */
body[data-page="trenches"] .lc-tok { display: flex; align-items: center; gap: 10px; min-width: 0; }
body[data-page="trenches"] .tr-lc-star { flex: 0 0 auto; width: 36px; height: 36px; margin-left: -8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 17px; color: var(--d-muted); padding: 0; }
body[data-page="trenches"] .tr-lc-star:hover { color: var(--d-text); background: var(--d-panel-2); }
body[data-page="trenches"] .tr-lc-star.is-on { color: var(--d-caution); }
body[data-page="trenches"] .lc-avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--d-border); background: var(--d-panel-2); flex: 0 0 30px; object-fit: cover; }
body[data-page="trenches"] .lc-avatar--i { display: inline-flex; align-items: center; justify-content: center; font-family: var(--d-font); font-size: 13px; font-weight: 600; color: var(--d-text-2); }
body[data-page="trenches"] .lc-id { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
body[data-page="trenches"] .lc-id-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
/* The symbol wins the space; the longer name truncates first. */
body[data-page="trenches"] .tr-lc-sym { font-family: var(--d-font); font-size: 14px; font-weight: 650; color: var(--d-text); overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; max-width: 75%; }
body[data-page="trenches"] .tr-lc-name { font-family: var(--d-font); font-size: 13px; color: var(--d-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; flex: 1 1 auto; min-width: 0; margin: 0; }
body[data-page="trenches"] .lc-id-l2 { font-size: 12px; color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="trenches"] .tr-lc-mint { font-family: var(--d-mono); font-size: 12px; color: var(--d-muted); }
body[data-page="trenches"] .tr-lc-rugged { font-family: var(--d-font); font-size: 11px; letter-spacing: .02em; color: #1B0505; background: var(--d-danger); padding: 1px 6px; border-radius: 4px; }

/* Trend: observed sparkline in one calm colour; direction reads from the shape, not from red/green. */
body[data-page="trenches"] .tr-lc-spark { margin: 0; vertical-align: middle; }
body[data-page="trenches"] .tr-lc-spark path, body[data-page="trenches"] .tr-lc-spark.is-up path, body[data-page="trenches"] .tr-lc-spark.is-down path { stroke: var(--d-spark); stroke-width: 1.5; fill: none; }
body[data-page="trenches"] .lc-nohist { font-size: 12px; }

/* Liquidity: value, then the reading's own age. */
body[data-page="trenches"] .lc-liq .tr-lc-age, body[data-page="trenches"] .lc-card-grid .tr-lc-age { display: block; font-size: 12px; color: var(--d-muted); }
body[data-page="trenches"] .tr-lc-age.is-stale { color: var(--d-caution); }

/* Activity 5m */
body[data-page="trenches"] .lc-activity-v { display: block; font-size: 14px; }
body[data-page="trenches"] .lc-activity-v.tone-muted { color: var(--d-text-2); }
body[data-page="trenches"] .lc-activity-sub { display: block; font-size: 12px; color: var(--d-muted); }

/* Risk: one explicit reason + "+N"; a real button (keyboard and touch). */
body[data-page="trenches"] .lc-risk { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--d-border); background: transparent; color: var(--d-text-2); font-family: var(--d-font); font-size: 13px; font-weight: 550; cursor: pointer; text-align: left; }
body[data-page="trenches"] .lc-risk-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-page="trenches"] .lc-risk-more { color: var(--d-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
body[data-page="trenches"] .lc-risk-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--d-muted); }
body[data-page="trenches"] .lc-risk.tone-danger { color: var(--d-danger); border-color: rgba(var(--d-danger-rgb), .45); background: var(--d-danger-soft); }
body[data-page="trenches"] .lc-risk.tone-danger .lc-risk-dot, body[data-page="trenches"] .tone-danger > .lc-risk-dot { background: var(--d-danger); }
body[data-page="trenches"] .lc-risk.tone-caution { color: var(--d-caution); border-color: rgba(var(--d-caution-rgb), .45); background: var(--d-caution-soft); }
body[data-page="trenches"] .lc-risk.tone-caution .lc-risk-dot, body[data-page="trenches"] .tone-caution > .lc-risk-dot { background: var(--d-caution); }
body[data-page="trenches"] .lc-risk.tone-unknown { color: var(--d-text-2); border-style: dashed; }
body[data-page="trenches"] .lc-risk.tone-unknown .lc-risk-dot, body[data-page="trenches"] .tone-unknown > .lc-risk-dot { background: transparent; border: 1.5px solid var(--d-text-2); }
body[data-page="trenches"] .lc-risk.tone-neutral { color: var(--d-text-2); }
body[data-page="trenches"] .lc-risk:hover { filter: brightness(1.15); }

/* Actions: one green Chart action + a quiet details button. */
body[data-page="trenches"] .lc-acts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
body[data-page="trenches"] .tr-lc-act { font-family: var(--d-font); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--d-accent-ink); background: var(--d-accent-soft); border: 1px solid var(--d-accent-line); border-radius: 8px; min-height: 32px; padding: 0 14px; cursor: pointer; }
body[data-page="trenches"] .tr-lc-act:hover { background: rgba(var(--safe-rgb), .18); color: var(--d-text); }
body[data-page="trenches"] .lc-more { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--d-border); background: transparent; color: var(--d-text-2); font-size: 16px; line-height: 1; cursor: pointer; }
body[data-page="trenches"] .lc-more:hover { color: var(--d-text); background: var(--d-panel-2); }

/* Groups, empty state, hold, status line */
body[data-page="trenches"] .tr-lc-sep td { height: auto !important; border-top: 1px solid var(--d-border); background: var(--d-canvas); }
body[data-page="trenches"] .tr-lc-sep-btn { font-family: var(--d-font); font-size: 13px; letter-spacing: 0; color: var(--d-text-2); padding: 10px 16px; min-height: 40px; }
body[data-page="trenches"] .tr-lc-sep-btn:hover { color: var(--d-text); }
body[data-page="trenches"] .tr-lc-empty td { height: auto !important; padding: 32px 16px !important; color: var(--d-text-2); font-size: 14px; white-space: normal !important; }
body[data-page="trenches"] .tr-lc-empty-t { margin-right: 8px; }
body[data-page="trenches"] .lc-missing-cell { white-space: normal !important; color: var(--d-text-2); font-size: 13px; }
body[data-page="trenches"] .tr-lc-missing { font-family: var(--d-font); font-size: 11px; letter-spacing: .02em; color: var(--d-text-2); border-color: var(--d-border); margin: 0 8px 0 0; padding: 1px 6px; }
body[data-page="trenches"] .tr-lc-why-src { color: var(--d-text-2); }
body[data-page="trenches"] .tr-lc-hold { font-family: var(--d-font); font-size: 12px; color: var(--d-text-2); border-top: 1px solid var(--d-border); padding: 6px 16px; }
body[data-page="trenches"] .tr-lc-foot { font-family: var(--d-font); font-size: 12px; color: var(--d-text-2); border-top: 1px solid var(--d-border); padding: 10px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }

/* ── Details panel ───────────────────────────────────────────────────────────────── */
body[data-page="trenches"] .tr-lc-detail { position: fixed; z-index: var(--z-drawer); width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: var(--d-panel); color: var(--d-text); border: 1px solid var(--d-border); border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); padding: 16px; font-family: var(--d-font); font-size: 14px; }
body[data-page="trenches"] .tr-lc-detail[hidden] { display: none; }
body[data-page="trenches"] .lc-d-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
body[data-page="trenches"] .lc-avatar--lg { width: 40px; height: 40px; flex-basis: 40px; }
body[data-page="trenches"] .lc-d-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
body[data-page="trenches"] .lc-d-id h2 { margin: 0; font-size: 16px; font-weight: 650; color: var(--d-text); }
body[data-page="trenches"] .lc-d-id .tr-lc-mint { word-break: break-all; }
body[data-page="trenches"] .lc-d-close { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--d-border); background: transparent; color: var(--d-text-2); font-size: 20px; cursor: pointer; }
body[data-page="trenches"] .lc-d-sec { border-top: 1px solid var(--d-border); padding: 12px 0; }
body[data-page="trenches"] .lc-d-sec h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--d-text-2); }
body[data-page="trenches"] .lc-d-sec h3 .tone-danger { color: var(--d-danger); } body[data-page="trenches"] .lc-d-sec h3 .tone-caution { color: var(--d-caution); }
body[data-page="trenches"] .lc-d-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body[data-page="trenches"] .lc-d-reasons li { display: grid; grid-template-columns: 14px 1fr; column-gap: 6px; align-items: center; }
body[data-page="trenches"] .lc-d-reasons li { align-items: start; } body[data-page="trenches"] .lc-d-reasons li .lc-risk-dot { margin-top: 6px; }
body[data-page="trenches"] .lc-d-r { min-width: 0; }
body[data-page="trenches"] .lc-d-reasons li.tone-danger b { color: var(--d-danger); } body[data-page="trenches"] .lc-d-reasons li.tone-caution b { color: var(--d-caution); }
body[data-page="trenches"] .lc-d-hard { font-size: 12px; color: var(--d-text-2); margin-left: 4px; }
body[data-page="trenches"] .lc-d-sub { display: block; font-size: 12px; color: var(--d-text-2); margin: 0; }
body[data-page="trenches"] .lc-d-facts { margin: 0; display: grid; gap: 8px; }
body[data-page="trenches"] .lc-d-fact { display: grid; grid-template-columns: 112px 1fr; gap: 8px; }
body[data-page="trenches"] .lc-d-fact dt { font-size: 12px; color: var(--d-text-2); }
body[data-page="trenches"] .lc-d-fact dd { margin: 0; font-size: 13px; color: var(--d-text); }
body[data-page="trenches"] .lc-d-links { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-page="trenches"] .lc-d-link { color: var(--d-accent-ink); font-size: 13px; padding: 6px 10px; border: 1px solid var(--d-border); border-radius: 8px; text-decoration: none; }
body[data-page="trenches"] .lc-d-actions { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--d-border); padding-top: 12px; }
body[data-page="trenches"] .lc-d-star-l { flex: 1; color: var(--d-text-2); font-size: 13px; }

/* ── Advanced (collapsed by default) ─────────────────────────────────────────────── */
body[data-page="trenches"] .tr-advanced { background: var(--d-panel); border: 1px solid var(--d-border); border-radius: 12px; margin-bottom: 16px; }
body[data-page="trenches"] .tr-advanced-sum { cursor: pointer; list-style: none; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--d-text); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; min-height: 44px; }
body[data-page="trenches"] .tr-advanced-sum::-webkit-details-marker { display: none; }
body[data-page="trenches"] .tr-advanced-sum::before { content: '▸'; color: var(--d-text-2); }
body[data-page="trenches"] .tr-advanced[open] .tr-advanced-sum::before { content: '▾'; }
body[data-page="trenches"] .tr-advanced-s { font-size: 13px; font-weight: 400; color: var(--d-text-2); }
body[data-page="trenches"] .tr-advanced-body { padding: 4px 16px 16px; display: grid; gap: 12px; }
body[data-page="trenches"] .tr-adv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--d-text-2); }
body[data-page="trenches"] .tr-adv-check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
body[data-page="trenches"] .tr-adv-check input { width: 18px; height: 18px; accent-color: #2BD67B; }
body[data-page="trenches"] .tr-lc-intel { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-page="trenches"] .tr-advanced .tr-strip { margin: 0; }
body[data-page="trenches"] .tr-advanced .tr-strip-chip { background: var(--d-canvas); border-color: var(--d-border); font-family: var(--d-font); color: var(--d-text-2); }
body[data-page="trenches"] .tr-advanced .tr-strip-chip b { font-family: var(--d-font); letter-spacing: .02em; color: var(--d-text-2); }
body[data-page="trenches"] .tr-advanced .tr-strip-chip .v { color: var(--d-text); }
body[data-page="trenches"] .tr-advanced .tr-signals { background: var(--d-canvas); border-color: var(--d-border); margin: 0; }
body[data-page="trenches"] .tr-advanced .trenches-toolbar--classic { margin: 0 12px 8px; padding: 0; flex-wrap: wrap; gap: 8px; }

/* ── Phone (cards) ────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Tighter top on phones (Codex review of PR #44): the header, tabs, toolbar and coverage line took
     about half of a 390 px screen. Title + trading mode share one row, search is full width below; the
     presets and Filters share one row; sort lives in the Filters popover, and the density toggle is
     hidden because phone cards ignore it. Text and 44 px touch targets are unchanged. */
  body[data-page="trenches"] .trenches-app { padding: 12px 12px 48px; }
  body[data-page="trenches"] .disc-head { gap: 8px; margin-bottom: 10px; align-items: center; }
  body[data-page="trenches"] .disc-title { flex: 1 1 auto; order: 1; min-width: 0; }
  body[data-page="trenches"] .disc-title h1 { font-size: 20px; }
  body[data-page="trenches"] .disc-sub { display: none; }
  body[data-page="trenches"] .disc-head-tools { display: contents; }
  body[data-page="trenches"] .disc-head .tr-mode-switch-host--board { order: 2; flex: 0 0 auto; }
  body[data-page="trenches"] .disc-search { order: 3; flex: 1 1 100%; }
  body[data-page="trenches"] .disc-search-input { height: 44px; font-size: 16px; }
  body[data-page="trenches"] .disc-head .tr-mode-opt { min-height: 44px; padding: 0 10px; }
  body[data-page="trenches"] .tr-lc-head { flex-wrap: nowrap; padding: 8px 8px 8px 12px; gap: 8px; }
  /* Presets: one row that scrolls sideways inside itself — never the page. */
  body[data-page="trenches"] .tr-lc-tabs { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; min-width: 0; padding-bottom: 2px; scrollbar-width: thin; gap: 4px; }
  body[data-page="trenches"] .tr-lc-tab { flex: 0 0 auto; min-height: 44px; white-space: nowrap; padding: 0 10px; }
  body[data-page="trenches"] .tr-lc-controls { flex: 0 0 auto; width: auto; flex-wrap: nowrap; }
  body[data-page="trenches"] .tr-lc-controls > #tr-lc-sort, body[data-page="trenches"] .tr-lc-controls > #tr-lc-density { display: none; }
  body[data-page="trenches"] .tr-lc-controls > .tr-lc-filters-btn { min-height: 44px; }
  body[data-page="trenches"] .tr-lc-sort-m-wrap { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d-text-2); }
  body[data-page="trenches"] .tr-lc-sort-m-wrap .tr-lc-select { flex: 1; min-height: 44px; }
  body[data-page="trenches"] .tr-lc-filters-pop { right: 0; left: 0; width: auto; }
  body[data-page="trenches"] .tr-lc-note { padding: 6px 12px; font-size: 13px; }
  /* Group labels wrap instead of truncating their meaning on a narrow screen. */
  body[data-page="trenches"] .tr-lc-sep td { white-space: normal !important; }
  body[data-page="trenches"] .tr-lc-sep-btn { white-space: normal; line-height: 1.35; padding: 10px 12px; }
  body[data-page="trenches"] .tr-lc-scroll { max-height: 70vh; }
  /* Fixed layout at 100%: under auto layout the card's longest unbreakable line (name + risk label,
     ~440 px measured) widened the table past a 390 px screen. */
  body[data-page="trenches"] .tr-lc.is-cards .tr-lc-table { min-width: 0; width: 100%; table-layout: fixed; }
  body[data-page="trenches"] .tr-lc-card td { height: 164px; padding: 12px !important; vertical-align: top; }
  body[data-page="trenches"] .lc-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
  body[data-page="trenches"] .lc-card-top .lc-id { flex: 1; }
  body[data-page="trenches"] .tr-lc-star { width: 44px; height: 44px; margin-left: -10px; }
  body[data-page="trenches"] .lc-risk--card { flex: 0 1 auto; max-width: 46%; min-height: 44px; }
  /* The reason wraps to two lines rather than truncating its meaning ("High liquidity, low activity"). */
  body[data-page="trenches"] .lc-risk--card .lc-risk-l { white-space: normal; line-height: 1.2; padding: 4px 0; }
  body[data-page="trenches"] .lc-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
  body[data-page="trenches"] .lc-card-grid .k { display: block; font-size: 12px; color: var(--d-muted); }
  body[data-page="trenches"] .lc-card-grid .v { display: block; font-size: 14px; color: var(--d-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[data-page="trenches"] .lc-card-grid .v.tone-muted { color: var(--d-text-2); }
  body[data-page="trenches"] .lc-card-foot { display: flex; align-items: center; gap: 8px; }
  body[data-page="trenches"] .lc-card-trend { flex: 1; min-width: 0; }
  body[data-page="trenches"] .lc-card-foot .lc-more { width: 44px; height: 44px; }
  body[data-page="trenches"] .lc-card-foot .tr-lc-act { min-height: 44px; padding: 0 16px; }
  body[data-page="trenches"] .lc-card-missing { margin: 10px 0; font-size: 13px; color: var(--d-text-2); white-space: normal; }
  body[data-page="trenches"] .tr-lc-foot { padding: 10px 12px; }
  /* Details: a bottom sheet on phones. */
  body[data-page="trenches"] .tr-lc-detail { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-height: 82vh; border-radius: 16px 16px 0 0; }
  body[data-page="trenches"] .lc-d-close { width: 44px; height: 44px; }
}

/* Trade pop-ups (public/shared/trade-popups.js) sit bottom-right on every page, which in Focus is the
   trade column: after a buy the position card pushes Sell down under the pop-up (guided pass on PR #45,
   2026-10-06, 1920 px; on phones it covered the trade panel and Buy). While Focus is open they move over
   the chart column's analysis tabs on desktop, and over the stats strip under the top bar on phones —
   never over the trade controls or Back. Trenches only: the stack is a later <body> sibling of Focus. */
#trenches-focus:not(.hidden) ~ .stp-stack { right: auto; left: 18px; }
@media (max-width: 900px) {
  #trenches-focus:not(.hidden) ~ .stp-stack { top: 60px; bottom: auto; left: 12px; right: auto; }
}

/* ── Focus chart view on Discover's charcoal (GitHub #67, Codex brief, 2026-10-10) ─────────────────
   The coin view opened from Discover now reads like Discover: charcoal surfaces, muted borders, the
   normal sans-serif UI with tabular figures for numbers (monospace only where an address shows),
   8-12 px radii, Discover's tab language, no glows or breathing buttons. Scoped to #trenches-focus on this page and placed after
   every base rule, so the drawer, the board and other pages that load this sheet do not change.
   Presentation only: same ids, classes, handlers and mode protections. Tokens only (the colour
   ratchet in test/design-system.test.js counts literals). Where a base rule changes a property by
   state (:empty, :disabled, .is-live), the state is restated below, because these selectors outrank
   the base ones. */
body[data-page="trenches"] #trenches-focus { background: var(--d-canvas); color: var(--d-text); font-family: var(--d-font); }
body[data-page="trenches"] #trenches-focus :focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; }

/* Top bar: Back is the way out, the coin is the title, the Desk link is secondary navigation (same
   destination, no longer a filled green button competing with Buy). */
body[data-page="trenches"] #trenches-focus .tf-topbar { background: var(--d-panel); border-bottom-color: var(--d-border); padding: 10px 20px; gap: 16px; }
body[data-page="trenches"] #trenches-focus .tf-back-btn { font-family: var(--d-font); font-size: 14px; font-weight: 600; color: var(--d-text); background: var(--d-panel-2); border-color: var(--d-border); min-height: 40px; padding: 0 14px; }
body[data-page="trenches"] #trenches-focus .tf-back-btn:hover { border-color: var(--d-accent-line); }
body[data-page="trenches"] #trenches-focus .tf-topbar-title { display: flex; align-items: baseline; gap: 10px; font-family: var(--d-font); font-size: 18px; font-weight: 650; color: var(--d-text); }
body[data-page="trenches"] #trenches-focus .tf-topbar-symbol { white-space: nowrap; }
body[data-page="trenches"] #trenches-focus .tf-topbar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-open-desk-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; font-family: var(--d-font); font-size: 13px; font-weight: 500; color: var(--d-text-2); background: transparent; text-decoration: underline; text-decoration-color: var(--d-border); text-underline-offset: 4px; }
body[data-page="trenches"] #trenches-focus .tf-open-desk-btn:hover { color: var(--d-text); filter: none; text-decoration-color: var(--d-text-2); }

/* Stats header: plain labels, tabular values. */
body[data-page="trenches"] #trenches-focus .tf-header { gap: 24px; padding: 12px 20px; border-bottom-color: var(--d-border); font-family: var(--d-font); color: var(--d-text); }
body[data-page="trenches"] #trenches-focus .tf-header-field { gap: 2px; }
body[data-page="trenches"] #trenches-focus .tf-header-field-label { font-size: 12px; letter-spacing: 0; color: var(--d-muted); }
body[data-page="trenches"] #trenches-focus .tf-header-field-val { font-family: var(--d-font); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; color: var(--d-text); }
body[data-page="trenches"] #trenches-focus .tf-header-token .tf-header-field-val { font-family: var(--d-font); font-size: 15px; font-weight: 650; }
body[data-page="trenches"] #trenches-focus .tf-header-avatar { background: var(--d-panel-2); border-color: var(--d-border); }
body[data-page="trenches"] #trenches-focus .tf-social { color: var(--d-text-2); background: var(--d-panel); border-color: var(--d-border); border-radius: 8px; width: 40px; height: 40px; }
body[data-page="trenches"] #trenches-focus .tf-social:hover { color: var(--d-text); background: var(--d-panel-2); box-shadow: none; transform: none; }

/* Chart column and toolbar. Timeframe and price mode use Discover's tabs: quiet until chosen, then a
   lifted surface with a green underline (was a filled gold block). */
body[data-page="trenches"] #trenches-focus .tf-chart-col { border-right-color: var(--d-border); }
body[data-page="trenches"] #trenches-focus .tf-chart-toolbar { gap: 8px; padding: 12px 16px 10px; }
body[data-page="trenches"] #trenches-focus :is(.tf-chart-tf-group, .tf-chart-pricemode-group) { gap: 2px; }
body[data-page="trenches"] #trenches-focus .tf-chart-pricemode-group { padding-left: 8px; border-left: 1px solid var(--d-border); }
body[data-page="trenches"] #trenches-focus :is(.tf-tf-btn, .tf-pricemode-btn) { min-height: 36px; padding: 0 10px; font-family: var(--d-font); font-size: 13px; font-weight: 500; color: var(--d-text-2); background: transparent; border: 1px solid transparent; border-radius: 8px; }
body[data-page="trenches"] #trenches-focus :is(.tf-tf-btn, .tf-pricemode-btn):hover:not(:disabled) { color: var(--d-text); background: var(--d-panel-2); border-color: transparent; }
body[data-page="trenches"] #trenches-focus :is(.tf-tf-btn, .tf-pricemode-btn).is-active { color: var(--d-text); background: var(--d-panel-2); border-color: var(--d-accent-line); box-shadow: inset 0 -2px 0 var(--d-accent); }
body[data-page="trenches"] #trenches-focus .tf-chart-chip { padding: 5px 10px; font-family: var(--d-font); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; color: var(--d-text-2); background: var(--d-panel); border-color: var(--d-border); border-radius: 8px; }
body[data-page="trenches"] #trenches-focus .tf-chart-chip:empty { display: none; }
body[data-page="trenches"] #trenches-focus .tf-chart-chip.is-up { color: var(--d-accent-ink); border-color: var(--d-accent-line); }
body[data-page="trenches"] #trenches-focus .tf-chart-chip.is-down { color: var(--d-danger); border-color: rgba(var(--d-danger-rgb), .45); }
body[data-page="trenches"] #trenches-focus .tf-chart-chip--position { font-weight: 600; }
/* Feed and staleness words keep their meaning colours (green live, amber warning, red down); the
   stale badge keeps its pulse — it is a state signal, not decoration. */
body[data-page="trenches"] #trenches-focus :is(.tf-chart-feed-label, .tf-chart-freshness-badge) { font-family: var(--d-font); font-size: 12px; font-weight: 600; letter-spacing: 0; border-radius: 8px; }
body[data-page="trenches"] #trenches-focus .tf-chart-feed-label { color: var(--d-text-2); background: var(--d-panel); border-color: var(--d-border); }
body[data-page="trenches"] #trenches-focus .tf-chart-feed-label--live { color: var(--d-accent-ink); background: var(--d-accent-soft); border-color: var(--d-accent-line); }
body[data-page="trenches"] #trenches-focus .tf-chart-feed-label--quiet { color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus :is(.tf-chart-feed-label--warn, .tf-chart-freshness-badge) { color: var(--d-caution); background: var(--d-caution-soft); border-color: rgba(var(--d-caution-rgb), .45); }
body[data-page="trenches"] #trenches-focus .tf-chart-feed-label--down { color: var(--d-danger); background: var(--d-danger-soft); border-color: rgba(var(--d-danger-rgb), .45); }
body[data-page="trenches"] #trenches-focus .tf-chart-toolbar-status { font-family: var(--d-font); font-size: 12px; color: var(--d-muted); }
/* Safety scan is the coin's one scan action (outlined in the action colour); Fullscreen is a plain
   tool. Neither glows; while scanning, the label and the sweep over the chart show progress. */
body[data-page="trenches"] #trenches-focus :is(.tf-safety-scan-btn, .tf-chart-fullscreen-btn) { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; font-family: var(--d-font); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--d-text); background: var(--d-canvas); border: 1px solid var(--d-border); border-radius: 8px; }
body[data-page="trenches"] #trenches-focus .tf-safety-scan-btn { border-color: var(--d-accent-line); }
body[data-page="trenches"] #trenches-focus :is(.tf-safety-scan-btn:hover:not(:disabled), .tf-chart-fullscreen-btn:hover) { color: var(--d-text); background: var(--d-panel-2); box-shadow: none; }
body[data-page="trenches"] #trenches-focus .tf-safety-scan-btn.is-scanning { color: var(--d-text-2); animation: none; }

/* The chart engine reads these variables once, when it mounts (src/trenches-chart/index.js's
   readThemeColors): a charcoal plot, muted axis text, a neutral crosshair and current-price line.
   --safe and --danger are left alone, so candles, volume and the trade lines/markers keep their
   colours (those lines use theme.js constants, not these variables). The library's attribution
   logo is untouched. The empty/no-feed headline and the scan overlay's caution tone read --pin
   too, so they get the caution colour back explicitly. */
body[data-page="trenches"] #trenches-focus .tf-chart-wrap { --card: var(--d-panel); --card-edge: var(--d-border); --ink-dim: var(--d-muted); --paper: var(--d-text); --pin: var(--d-text-2); background: var(--d-panel); border-color: var(--d-border); border-radius: 12px; box-shadow: none; }
body[data-page="trenches"] #trenches-focus .tf-chart-wrap :is(.tf-chart-empty, .tf-scan-overlay) { --pin: var(--d-caution); }
body[data-page="trenches"] #trenches-focus .tf-chart-empty { font-family: var(--d-font); font-size: 14px; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-chart-empty-headline { font-family: var(--d-font); font-size: 16px; font-weight: 650; letter-spacing: 0; color: var(--d-caution); }

/* Analysis tabs under the chart. */
body[data-page="trenches"] #trenches-focus .tf-lower { background: var(--d-panel); border-color: var(--d-border); border-radius: 12px; }
body[data-page="trenches"] #trenches-focus .tf-lower-tabs { gap: 4px; padding: 6px 8px; border-bottom-color: var(--d-border); overflow-x: auto; scrollbar-width: thin; }
body[data-page="trenches"] #trenches-focus .tf-lower-tab { flex: 0 0 auto; min-height: 36px; padding: 0 12px; font-family: var(--d-font); font-size: 14px; font-weight: 550; white-space: nowrap; color: var(--d-text-2); border: 1px solid transparent; border-radius: 8px; }
body[data-page="trenches"] #trenches-focus .tf-lower-tab:hover { color: var(--d-text); background: var(--d-panel-2); }
body[data-page="trenches"] #trenches-focus .tf-lower-tab.is-active { color: var(--d-text); background: var(--d-panel-2); border-color: var(--d-accent-line); box-shadow: inset 0 -2px 0 var(--d-accent); }
body[data-page="trenches"] #trenches-focus .tf-lower-body { font-family: var(--d-font); font-size: 14px; color: var(--d-text); }
body[data-page="trenches"] #trenches-focus .tr-muted { color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tr-tile { background: var(--d-canvas); border-color: var(--d-border); border-radius: 8px; }
body[data-page="trenches"] #trenches-focus .tr-tile-val { font-family: var(--d-font); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--d-text); }
body[data-page="trenches"] #trenches-focus .tr-tile--good .tr-tile-val { color: var(--d-accent-ink); }
body[data-page="trenches"] #trenches-focus .tr-tile--warn .tr-tile-val { color: var(--d-caution); }
body[data-page="trenches"] #trenches-focus .tr-tile--bad .tr-tile-val { color: var(--d-danger); }
body[data-page="trenches"] #trenches-focus .tr-tile-label { font-size: 12px; letter-spacing: 0; color: var(--d-muted); }
body[data-page="trenches"] #trenches-focus .trenches-drawer-label { font-family: var(--d-font); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .safety-reason { font-family: var(--d-font); font-size: 13px; }

/* Side column: position, trade panel, Advanced, analysis. */
body[data-page="trenches"] #trenches-focus .tf-side-col { gap: 16px; }
body[data-page="trenches"] #trenches-focus :is(.tf-lifecycle-banner, .tf-trade-panel, .tf-scores-panel, .tf-reasons-panel) { background: var(--d-panel); border-color: var(--d-border); border-radius: 12px; }
body[data-page="trenches"] #trenches-focus .tf-trade-panel { padding: 16px; }
body[data-page="trenches"] #trenches-focus .tf-position-header { font-family: var(--d-font); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-pnl-hero { font-family: var(--d-font); font-variant-numeric: tabular-nums; font-weight: 600; }
body[data-page="trenches"] #trenches-focus .tf-pnl-hero.tr-tile--good { color: var(--d-accent-ink); }
body[data-page="trenches"] #trenches-focus .tf-pnl-hero.tr-tile--bad { color: var(--d-danger); }
/* Buy / Sell stay small underlined tabs (they label the panel; the submit below is the action). */
body[data-page="trenches"] #trenches-focus .tf-side-btn { min-height: 32px; padding: 0 2px 4px; font-family: var(--d-font); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-side-btn[data-side="buy"].is-active { color: var(--d-text); border-bottom-color: var(--d-accent); }
body[data-page="trenches"] #trenches-focus .tf-side-btn[data-side="sell"].is-active { color: var(--d-text); border-bottom-color: var(--d-danger); }
/* Paper / Live: the same switch Discover's header carries (Paper keeps its own calm colour, Live FIRE
   stays red and breathing; the two-step confirm is unchanged). */
body[data-page="trenches"] #trenches-focus .tr-mode-switch { background: var(--d-canvas); border-color: var(--d-border); }
body[data-page="trenches"] #trenches-focus .tr-mode-opt { min-height: 36px; font-family: var(--d-font); font-size: 12px; letter-spacing: .04em; }
body[data-page="trenches"] #trenches-focus .tf-mode-note { font-family: var(--d-font); font-size: 13px; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-mode-note.is-paper { color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-mode-note.is-live { color: var(--d-danger); }
body[data-page="trenches"] #trenches-focus .tf-amount-presets { gap: 6px; }
body[data-page="trenches"] #trenches-focus .tf-amount-preset-btn { min-height: 36px; padding: 0; font-family: var(--d-font); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: var(--d-text-2); background: var(--d-canvas); border-color: var(--d-border); border-radius: 8px; }
body[data-page="trenches"] #trenches-focus .tf-amount-preset-btn:hover { color: var(--d-text); border-color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-amount-preset-btn.is-active { color: var(--d-text); background: var(--d-panel-2); border-color: var(--d-accent-line); box-shadow: inset 0 -2px 0 var(--d-accent); }
body[data-page="trenches"] #trenches-focus .tf-buy-amount-input { min-height: 40px; font-family: var(--d-font); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--d-text); background: var(--d-canvas); border-color: var(--d-border); }
body[data-page="trenches"] #trenches-focus .tf-buy-amount-input::placeholder { color: var(--d-muted); }
body[data-page="trenches"] #trenches-focus .tf-buy-amount-input:focus { outline: 2px solid var(--d-accent); outline-offset: 1px; border-color: transparent; }
/* One emphasised action: the manual submit (its label carries the amount — "⌖ SNIPE 0.1 SOL").
   Smart Entry is the outlined secondary below it. Live still turns the submit red, and a disabled
   submit still looks disabled: both states are restated after the base colours. */
body[data-page="trenches"] #trenches-focus .tf-execute-btn { font-family: var(--d-font); font-weight: 650; border-radius: 10px; }
body[data-page="trenches"] #trenches-focus .tf-execute-btn--buy { min-height: 48px; padding: 0 16px; font-size: 16px; letter-spacing: 0; color: var(--d-canvas); background: var(--d-accent); }
body[data-page="trenches"] #trenches-focus .tf-execute-btn--buy:hover:not(:disabled) { filter: brightness(1.06); }
body[data-page="trenches"] #trenches-focus .tf-execute-btn--smart { min-height: 44px; margin-top: 0; font-size: 14px; color: var(--d-text); background: transparent; border: 1px solid var(--d-border); }
body[data-page="trenches"] #trenches-focus .tf-execute-btn--smart:hover:not(:disabled) { background: var(--d-panel-2); border-color: var(--d-accent-line); }
body[data-page="trenches"] #trenches-focus .tf-execute-btn--buy.is-live { background: var(--danger); }
body[data-page="trenches"] #trenches-focus .tf-execute-btn--sell { min-height: 48px; padding: 0 16px; font-size: 16px; color: var(--d-canvas); background: var(--d-danger); }
body[data-page="trenches"] #trenches-focus .tf-execute-btn:disabled { color: var(--d-muted); background: var(--d-panel-2); border-color: var(--d-border); cursor: not-allowed; filter: none; }
body[data-page="trenches"] #trenches-focus .tf-sell-pct-btn { min-height: 36px; font-family: var(--d-font); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--d-text-2); background: var(--d-canvas); border-color: var(--d-border); border-radius: 8px; }
body[data-page="trenches"] #trenches-focus .tf-sell-pct-btn.is-active { color: var(--d-text); border-color: rgba(var(--d-danger-rgb), .6); box-shadow: inset 0 -2px 0 var(--d-danger); }
body[data-page="trenches"] #trenches-focus .tf-sell-summary { font-family: var(--d-font); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-sell-summary b { color: var(--d-text); }
body[data-page="trenches"] #trenches-focus :is(.tf-live-preview, .tf-sizing-breakdown) { font-family: var(--d-font); font-variant-numeric: tabular-nums; background: var(--d-canvas); border-color: var(--d-border); border-radius: 8px; }
body[data-page="trenches"] #trenches-focus .tf-trade-status { font-size: 13px; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-trade-status.is-ok { color: var(--d-accent-ink); }
body[data-page="trenches"] #trenches-focus .tf-trade-status.is-error { color: var(--d-danger); }

/* Advanced: V7 Recoil folded away while it has nothing to do on this coin. The card inside keeps its
   dashed shadow-system border and its SHADOW · CANNOT EXECUTE tag. */
body[data-page="trenches"] #trenches-focus .tf-advanced { background: var(--d-panel); border: 1px solid var(--d-border); border-radius: 12px; }
body[data-page="trenches"] #trenches-focus .tf-advanced-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 44px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--d-text); cursor: pointer; list-style: none; }
body[data-page="trenches"] #trenches-focus .tf-advanced-summary::-webkit-details-marker { display: none; }
body[data-page="trenches"] #trenches-focus .tf-advanced-summary::before { content: '▸'; color: var(--d-muted); transition: transform .15s ease; }
body[data-page="trenches"] #trenches-focus .tf-advanced[open] > .tf-advanced-summary::before { transform: rotate(90deg); }
body[data-page="trenches"] #trenches-focus .tf-advanced-hint { font-size: 12px; font-weight: 400; color: var(--d-muted); }
body[data-page="trenches"] #trenches-focus .tf-advanced .tf-v7-card { margin: 0 12px 12px; background: var(--d-canvas); border-color: var(--d-border); }
body[data-page="trenches"] #trenches-focus .tf-v7-title { font-family: var(--d-font); font-size: 13px; letter-spacing: 0; color: var(--d-text); }
body[data-page="trenches"] #trenches-focus .tf-v7-shadow-tag { font-family: var(--d-font); font-size: 11px; letter-spacing: .02em; color: var(--d-caution); background: var(--d-caution-soft); border-color: rgba(var(--d-caution-rgb), .45); }
body[data-page="trenches"] #trenches-focus .tf-v7-shadow-tag.is-live { color: var(--d-accent-ink); background: var(--d-accent-soft); border: 1px solid var(--d-accent-line); }
body[data-page="trenches"] #trenches-focus .tf-v7-status-label { font-family: var(--d-font); font-size: 13px; letter-spacing: 0; }
body[data-page="trenches"] #trenches-focus .tf-v7-status-label.is-ready { color: var(--d-accent-ink); }
body[data-page="trenches"] #trenches-focus .tf-v7-status-label.is-blocked { color: var(--d-caution); }
body[data-page="trenches"] #trenches-focus .tf-v7-status-label.is-inactive { color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus :is(.tf-v7-explanation, .tf-v7-progress) { font-family: var(--d-font); font-size: 12px; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-v7-funnel-step { background: var(--d-panel); border-color: var(--d-border); }
body[data-page="trenches"] #trenches-focus .tf-v7-funnel-step-label { font-family: var(--d-font); letter-spacing: 0; color: var(--d-muted); }

/* Analysis stack: the verdict is said once. A cleared coin reads neutral, never as a green "safe"
   label; caution stays amber, a hard block stays red. Before any scan the empty scores box hides and
   a short note points at Safety scan, with a quiet button for keyboard users already here. */
body[data-page="trenches"] #trenches-focus .tf-intel-toggle { min-height: 40px; font-family: var(--d-font); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--d-text); }
body[data-page="trenches"] #trenches-focus .tf-intel-toggle:hover { color: var(--d-text); }
body[data-page="trenches"] #trenches-focus .tf-scores-panel:has(#tf-scores:empty) { display: none; }
body[data-page="trenches"] #trenches-focus .tf-verdict-badge { display: inline-block; padding: 6px 12px; font-family: var(--d-font); font-size: 14px; font-weight: 600; letter-spacing: 0; white-space: normal; border-radius: 8px; }
body[data-page="trenches"] #trenches-focus .tf-verdict-badge.is-clear { color: var(--d-text); background: var(--d-panel-2); border: 1px solid var(--d-border); }
body[data-page="trenches"] #trenches-focus .tf-verdict-badge.is-caution { color: var(--d-caution); background: var(--d-caution-soft); border: 1px solid rgba(var(--d-caution-rgb), .45); }
body[data-page="trenches"] #trenches-focus .tf-verdict-badge.is-danger { color: var(--d-danger); background: var(--d-danger-soft); border: 1px solid rgba(var(--d-danger-rgb), .45); }
body[data-page="trenches"] #trenches-focus .tr-verdict-explain { font-family: var(--d-font); font-size: 13px; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-recon-label { font-family: var(--d-font); font-size: 12px; letter-spacing: 0; color: var(--d-muted); }
body[data-page="trenches"] #trenches-focus .tf-safety-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
body[data-page="trenches"] #trenches-focus .tf-safety-counts { font-size: 13px; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-scan-cta-note { margin: 0; font-family: var(--d-font); font-size: 13px; line-height: 1.5; color: var(--d-text-2); }
body[data-page="trenches"] #trenches-focus .tf-scan-cta { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 40px; margin-top: 10px; padding: 0 14px; font-family: var(--d-font); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--d-text); background: transparent; border: 1px solid var(--d-accent-line); border-radius: 8px; }
body[data-page="trenches"] #trenches-focus .tf-scan-cta:hover { background: var(--d-panel-2); box-shadow: none; }
/* The scan-result toast is a <body> child, outside #trenches-focus: same neutral rule for "cleared". */
body[data-page="trenches"] #tf-scan-result-toast { font-family: var(--d-font); background: var(--d-panel); border-color: var(--d-border); }
body[data-page="trenches"] #tf-scan-result-toast.tf-scan-toast--clear { border-top-color: var(--d-text-2); }
body[data-page="trenches"] #tf-scan-result-toast.tf-scan-toast--clear .tf-scan-toast-headline { color: var(--d-text); }
body[data-page="trenches"] #tf-scan-result-toast :is(.tf-scan-toast-headline, .tf-scan-toast-sub, .tf-scan-toast-jump) { font-family: var(--d-font); letter-spacing: 0; }

/* Position card: the summary tiles always show; the extended statistics have a toggle that only
   phones see (below). On wider screens both groups show and the toggle is hidden. */
body[data-page="trenches"] #trenches-focus .tf-position-more-toggle { display: none; }

/* Narrow screens: Back and the Desk link share the first row, the coin's name gets its own, and every
   control in the view is at least 44 px tall. The position summary and the trade panel come straight
   after the chart (trenches.js moves the analysis tabs after them), and the extended position
   statistics fold behind "More position details". */
@media (max-width: 900px) {
  body[data-page="trenches"] #trenches-focus .tf-body > .tf-lower { margin: 0 12px 16px; }
  body[data-page="trenches"] #trenches-focus .tf-side-col { padding-bottom: 4px; }
  body[data-page="trenches"] #trenches-focus .tf-position-more-toggle { display: inline-flex; align-items: center; justify-self: start; align-self: flex-start; min-height: 44px; margin-top: 4px; padding: 0 14px; font-family: var(--d-font); font-size: 14px; font-weight: 600; color: var(--d-text); background: transparent; border: 1px solid var(--d-border); border-radius: 8px; cursor: pointer; }
  body[data-page="trenches"] #trenches-focus .tf-position-more-toggle:hover { background: var(--d-panel-2); }
  body[data-page="trenches"] #trenches-focus .tf-position-more:not(.is-open) { display: none; }
  body[data-page="trenches"] #trenches-focus .tf-topbar { flex-wrap: wrap; gap: 4px 8px; padding: 8px 12px; }
  body[data-page="trenches"] #trenches-focus .tf-topbar-title { order: 3; flex: 1 1 100%; font-size: 17px; }
  body[data-page="trenches"] #trenches-focus .tf-open-desk-btn { margin-left: auto; }
  /* The scan-result toast sat over Back on phones; it drops under the top bar, where the trade pop-ups go. */
  body[data-page="trenches"] #tf-scan-result-toast { top: 64px; }
  body[data-page="trenches"] #trenches-focus .tf-header { gap: 12px 18px; padding: 10px 12px; }
  body[data-page="trenches"] #trenches-focus .tf-chart-toolbar { padding: 10px 12px 8px; }
  /* The eight timeframes stay on one row that scrolls sideways inside itself, never the page. */
  body[data-page="trenches"] #trenches-focus .tf-chart-tf-group { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  body[data-page="trenches"] #trenches-focus .tf-tf-btn { flex: 0 0 auto; white-space: nowrap; }
  body[data-page="trenches"] #trenches-focus :is(.tf-back-btn, .tf-open-desk-btn, .tf-tf-btn, .tf-pricemode-btn, .tf-safety-scan-btn, .tf-chart-fullscreen-btn, .tf-lower-tab, .tf-side-btn, .tr-mode-opt, .tf-amount-preset-btn, .tf-sell-pct-btn, .tf-buy-amount-input, .tf-intel-toggle, .tf-scan-cta) { min-height: 44px; }
}

/* Source outages remain visible above every preset, including an empty board. */
body[data-page="trenches"] .tr-feed-status { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--d-caution); border-radius: 10px; background: var(--d-caution-soft); color: var(--d-text); font: 14px/1.6 var(--d-font); }
body[data-page="trenches"] .tr-feed-status[hidden] { display: none; }