/* ============================================================
   PENTHOUSE V2 — the site's design layer (index.html, one page since 2026-10-22).
   Loaded LAST in <head>.
   Every rule is scoped under html.v2 so nothing here can leak
   into a page that didn't opt in. Base stylesheets (status.css,
   light-theme.css, embedded index CSS) remain the component
   fallback — this file re-skins and re-arranges on top.
   Themes: Onyx (default) / Paper via the EXISTING body.light-theme
   mechanism — the V1 toggle drives V2 with zero new logic.
   ============================================================ */

html.v2 {
  --v2-bg0: #131315;
  --v2-bg1: #1a1a1e;
  --v2-bg2: #212127;
  --v2-bg3: #2a2a31;
  --v2-line: rgba(233, 231, 226, 0.07);
  --v2-line-strong: rgba(233, 231, 226, 0.14);
  --v2-text: #e9e7e2;
  --v2-muted: #8e8c86;
  --v2-faint: #5c5a55;
  --v2-blue: #2f9df2;
  --v2-blue-dim: rgba(47, 157, 242, 0.14);
  --v2-gold: #d4af37;
  --v2-gold-dim: rgba(212, 175, 55, 0.12);
  --v2-gain: #2fbf71;
  --v2-gain-dim: rgba(47, 191, 113, 0.12);
  --v2-loss: #e5484d;
  --v2-loss-dim: rgba(229, 72, 77, 0.12);
  --v2-scrim: rgba(10, 10, 12, 0.55);
  --v2-glass: rgba(26, 26, 30, 0.92);
  --v2-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --v2-serif: 'IBM Plex Serif', Georgia, serif;
}
html.v2 body.light-theme {
  --v2-bg0: #f6f4f0;
  --v2-bg1: #fffefb;
  --v2-bg2: #efede7;
  --v2-bg3: #e6e3db;
  --v2-line: rgba(33, 31, 27, 0.09);
  --v2-line-strong: rgba(33, 31, 27, 0.16);
  --v2-text: #211f1b;
  --v2-muted: #6f6c64;
  --v2-faint: #a3a099;
  --v2-blue: #1673c8;
  --v2-blue-dim: rgba(22, 115, 200, 0.10);
  --v2-gold: #9c7c14;
  --v2-gold-dim: rgba(156, 124, 20, 0.12);
  --v2-gain: #1e9e5a;
  --v2-gain-dim: rgba(30, 158, 90, 0.10);
  --v2-loss: #d43f45;
  --v2-loss-dim: rgba(212, 63, 69, 0.10);
  --v2-scrim: rgba(60, 56, 48, 0.35);
  --v2-glass: rgba(255, 254, 251, 0.94);
  --v2-shadow: 0 18px 50px rgba(60, 56, 48, 0.18);
}

/* FOUC guard: hide until the adapter finished (or failed -> class removed) */
html.v2:not(.v2-ready) body { visibility: hidden; }

/* ============ GROUND ============ */
html.v2 body {
  background: var(--v2-bg0) !important;
  color: var(--v2-text);
  overflow: hidden;
}
/* V1 chrome that has no place on the floor */
html.v2 .gradient,
html.v2 #scroll-helper,
html.v2 #sidebar-collapse-btn,
html.v2 .sidebar,
html.v2 #xt-panel-resize-handle,
html.v2 #mobile-panel-toggle,
html.v2 .mobile-drawer,
html.v2 .mobile-drawer-overlay { display: none !important; }
/* the old shell wrapper must not fight the grid */
html.v2 .shell { display: contents !important; }
html.v2 .main { display: contents !important; }

/* ============ SHELL GRID ============ */
html.v2 .v2-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: 52px 1fr;
  grid-template-columns: 56px 300px 1fr 420px;
  grid-template-areas:
    "top top top top"
    "rail book floor bill";
  background: var(--v2-bg0);
  z-index: 1;
}
html.v2.v2-book-hidden .v2-shell { grid-template-columns: 56px 0 1fr 420px; }
html.v2.v2-book-hidden .v2-book { display: none; }
html.v2.v2-bill-collapsed .v2-shell { grid-template-columns: 56px 300px 1fr 52px; }
html.v2.v2-bill-collapsed .v2-bill-slot,
html.v2.v2-bill-collapsed .v2-bill-t { display: none; }
html.v2.v2-bill-collapsed .v2-bill-h { flex-direction: column; gap: 8px; padding: 10px 4px; }
html.v2.v2-bill-collapsed #v2-bill-collapse { transform: rotate(180deg); }

/* ============ TOP BAR ============ */
html.v2 .v2-topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: var(--v2-bg1);
  border-bottom: 1px solid var(--v2-line);
  min-width: 0;
}
html.v2 .v2-wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--v2-serif);
  font-weight: 600;
  font-size: 15.5px;
  white-space: nowrap;
}
html.v2 .v2-hat { width: 17px; height: 17px; }
html.v2 .v2-flag {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--v2-gold);
  background: var(--v2-gold-dim);
  border: 1px solid var(--v2-gold);
  border-radius: 4px;
  padding: 2px 6px;
}
html.v2 .v2-topspacer { flex: 1; }
/* transplanted V1 header: strip its bar chrome, keep its buttons */
html.v2 .v2-topslot { display: flex; align-items: center; min-width: 0; }
html.v2 .v2-topslot > header {
  position: static !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
}

/* ============ RAIL ============ */
html.v2 .v2-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  background: var(--v2-bg1);
  border-right: 1px solid var(--v2-line);
}
html.v2 .v2-rbtn {
  position: relative;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 9px;
  color: var(--v2-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
html.v2 .v2-rbtn:hover { background: var(--v2-bg2); color: var(--v2-text); }
html.v2 .v2-rbtn svg { width: 19px; height: 19px; }
html.v2 #v2-r-floor { background: var(--v2-blue-dim); color: var(--v2-blue); }
html.v2 .v2-rbadge {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-gold);
}
html.v2 .v2-rflex { flex: 1; }

/* ============ BOOK (watchlist + strategy ready) ============ */
html.v2 .v2-book {
  grid-area: book;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--v2-bg1);
  border-right: 1px solid var(--v2-line);
  overflow: hidden;
}
/* watchlist scrolls in ITS OWN area; Strategy Ready stays PINNED below,
   always visible (Michael note #1). Wheel is routed by the adapter's
   capture-phase handler — V1's global wheel handlers either dead-end or
   redirect to the chat for these transplanted containers. */
html.v2 .v2-book-slot {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
html.v2 .v2-book .v2-eyebrow,
html.v2 .v2-book .v2-ready-slot { flex: 0 0 auto; }
html.v2 .v2-ready-slot { padding-bottom: 8px; }
html.v2 .v2-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--v2-muted);
  padding: 14px 14px 6px;
}
html.v2 .v2-ready-h { border-top: 1px solid var(--v2-line); margin-top: 8px; }
/* transplanted containers: strip V1 sidebar card chrome */
html.v2 .v2-book-slot .watchlist-container,
html.v2 .v2-ready-slot .strat-trending-container {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 6px !important;
  width: auto !important;
  /* overflow:hidden here broke position:sticky on the markets tab bar —
     the sticky ancestor must be the scrolling .v2-book-slot (2026-09-01) */
  overflow: visible !important;
}
html.v2 .v2-book-slot .watchlist-container .sidebar-section-title,
html.v2 .v2-ready-slot .strat-trending-container .sidebar-section-title { display: none !important; }

/* ============ FLOOR ============ */
html.v2 .v2-floor {
  grid-area: floor;
  display: grid;
  grid-template-rows: 42px 1fr;
  min-width: 0;
  min-height: 0;
}
html.v2 .v2-tape {
  display: flex;
  align-items: center;
  background: var(--v2-bg1);
  border-bottom: 1px solid var(--v2-line);
  overflow: hidden;
}
html.v2 .v2-tape-label {
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--v2-muted);
  border-right: 1px solid var(--v2-line);
}
html.v2 .v2-live {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--v2-gain);
  animation: v2pulse 2s infinite;
}
@keyframes v2pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { html.v2 .v2-live { animation: none; } }
/* trending rows become horizontal chips — and the ribbon marquees right ->
   left like a market-news tape (Michael 2026-09-01 v2: SEAMLESS loop — the
   live container plus a display-only ghost copy ride one track animated
   -50%; equal halves mean the tape is never empty, and the adapter sets the
   duration from content width for a constant slow news-ticker pace).
   Hover pauses so chips stay clickable; reduced-motion falls back to the
   static swipeable strip. */
/* align-self:stretch (2026-09-01): the centered flex slot used to collapse
   to chip height, so the overflow clip hugged the chips and cut the
   bullish/bearish glow at the top — stretched to the full 42px tape the
   glow has ~9px of headroom on both sides. */
html.v2 .v2-tape-slot { flex: 1; min-width: 0; overflow: hidden; scrollbar-width: none; align-self: stretch; }
html.v2 .v2-tape-slot::-webkit-scrollbar { display: none; }
html.v2 .v2-tape-track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  animation: v2Tape 60s linear infinite;
}
html.v2 .v2-tape-track:not(:has(.trending-ticker)) { animation: none; }
html.v2 .v2-tape-track:hover,
html.v2 .v2-tape-track:active { animation-play-state: paused; }
@keyframes v2Tape {
  from { transform: translateX(0); }
  /* --tape-shift = exactly one copy width, set by the adapter — the track
     snaps back invisibly at the loop point because copies are identical */
  to   { transform: translateX(var(--tape-shift, -50%)); }
}
@media (prefers-reduced-motion: reduce) {
  html.v2 .v2-tape-slot { overflow-x: auto; }
  html.v2 .v2-tape-track { animation: none !important; }
  html.v2 .v2-tape-ghost { display: none !important; }
}
/* Flatten the WHOLE trending tree into one horizontal ribbon: the container
   holds a header + two stacked .trending-section wrappers (longs / shorts);
   every level becomes a row so all 4 chips (2 long + 2 short) sit inline. */
html.v2 .v2-tape-slot .trending-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 10px !important;
  width: max-content !important;
  height: 100%;
}
html.v2 .v2-tape-slot .trending-header { display: none !important; }
html.v2 .v2-tape-slot .trending-section {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
html.v2 .v2-tape-slot .trending-list {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px;
  align-items: center;
  /* V1's vertical stacking gives the FIRST list a padding-top the second
     doesn't have (index2 `.trending-section + .trending-section
     .trending-list`) — in the flattened tape that pushed longs and shorts
     onto different baselines (Michael 2026-09-01). Zero both. */
  margin: 0 !important;
  padding: 0 !important;
}
html.v2 .v2-tape-slot .trending-ticker {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  border-radius: 7px !important;
  padding: 4px 10px !important;
  align-self: center !important;
  box-sizing: border-box !important;
}

/* the transplanted right panel becomes the embedded workspace */
html.v2 .v2-work {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
html.v2 .v2-work #xt-right-panel {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--v2-bg0) !important;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
}

/* ============ BILL COLUMN ============ */
html.v2 .v2-bill {
  grid-area: bill;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--v2-bg1);
  border-left: 1px solid var(--v2-line);
}
html.v2 .v2-bill-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--v2-line);
}
html.v2 .v2-bill-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--v2-gold);
  background: var(--v2-bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--v2-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--v2-gold);
  box-shadow: 0 0 14px var(--v2-gold-dim);
  flex-shrink: 0;
}
html.v2 .v2-bill-t { display: flex; flex-direction: column; min-width: 0; }
html.v2 .v2-bill-name { font-family: var(--v2-serif); font-weight: 600; font-size: 14.5px; }
html.v2 .v2-bill-sub {
  font-size: 10px;
  color: var(--v2-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
html.v2 #v2-bill-collapse { margin-left: auto; width: 28px; height: 28px; }
/* transplanted chat section fills the column; neutralize V1 geometry */
html.v2 .v2-bill-slot { flex: 1; display: flex; min-height: 0; }
html.v2 .v2-bill-slot section.chat {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
/* panel-open offsets from V1 must never squeeze Bill's column */
html.v2 .v2-bill-slot #messages,
html.v2 .v2-bill-slot .inputbar,
html.v2 .v2-bill-slot .composer,
html.v2 .v2-bill-slot .input-area {
  position: static !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html.v2 .v2-bill-slot #messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 6px !important;
}
html.v2 .v2-bill-slot .inputbar { margin: 8px 10px 10px !important; }
html.v2 body.xt-panel-open .v2-bill-slot #messages,
html.v2 body.xt-panel-open .v2-bill-slot .inputbar { right: auto !important; width: auto !important; }
/* bubbles tuned for the narrow column */
html.v2 .v2-bill-slot .bubble { font-size: 12.5px; }
html.v2 .v2-bill-slot .row { max-width: 100% !important; }

/* ============ ACTIVITY DRAWER ============ */
html.v2 .v2-scrim {
  position: fixed;
  inset: 0;
  background: var(--v2-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 60;
}
html.v2 .v2-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 56px;
  width: 360px;
  z-index: 61;
  background: var(--v2-glass);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--v2-line-strong);
  box-shadow: var(--v2-shadow);
  transform: translateX(-115%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
}
@media (prefers-reduced-motion: reduce) {
  html.v2 .v2-drawer { transition: none; }
}
html.v2.v2-drawer-open .v2-drawer { transform: translateX(0); }
html.v2.v2-drawer-open .v2-scrim { opacity: 1; pointer-events: auto; }
html.v2 .v2-drawer-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px;
  font-family: var(--v2-serif);
  font-weight: 600;
  font-size: 16px;
}
html.v2 .v2-drawer-slot { flex: 1; overflow-y: auto; padding: 0 10px 14px; }
/* transplanted activity log: always expanded inside the drawer */
html.v2 .v2-drawer-slot .sidebar-activity-log {
  position: static !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  max-height: none !important;
}
html.v2 .v2-drawer-slot .sidebar-activity-log .sidebar-activity-body { display: block !important; max-height: none !important; }

/* ============ PHASE 3r — V1 TOKEN REMAP: kill the old grey ============ */
/* Every V1-emitted component (sim result cards, position graph card,
   investment calculator, financial bubbles, modals, panels) paints with
   the --xt-* tokens. Remapping those tokens inside the Penthouse scope
   retunes ALL of them at once to the mockup tones — the same surface
   family as Bill's response bubbles. Dark and Paper both. */
html.v2 body {
  --xt-bg-primary: var(--v2-bg0) !important;
  --xt-bg-secondary: var(--v2-bg1) !important;
  --xt-bg-card: var(--v2-bg2) !important;
  --xt-bg-card-hover: var(--v2-bg3) !important;
  --xt-border: var(--v2-line) !important;
}
html.v2 body.light-theme {
  --xt-bg-primary: var(--v2-bg0) !important;
  --xt-bg-secondary: var(--v2-bg0) !important;
  --xt-bg-card: var(--v2-bg1) !important;
  --xt-bg-card-hover: var(--v2-bg2) !important;
  --xt-border: var(--v2-line) !important;
}

/* ============ SHARED COMPONENT RESKIN (light touch, Phase 1) ============ */
html.v2 .bubble.bot,
html.v2 .bubble {
  border-radius: 10px;
}
html.v2 .v2-topslot .auth-buttons .btn,
html.v2 .v2-topslot .auth-buttons .user-badge { border-radius: 8px; }
html.v2 ::-webkit-scrollbar { width: 8px; height: 8px; }
html.v2 ::-webkit-scrollbar-thumb { background: var(--v2-bg3); border-radius: 4px; }
html.v2 ::-webkit-scrollbar-track { background: transparent; }

/* narrow screens: Penthouse is desktop-first; book collapses automatically */
@media (max-width: 1360px) {
  html.v2 .v2-shell { grid-template-columns: 56px 0 1fr 380px; }
  html.v2 .v2-book { display: none; }
}

/* ============================================================
   PHASE 2 — BILL'S COLUMN (chat surface reskin)
   Every selector below targets JS-EMITTED markup by its existing
   class names — the shared JS is untouched; only the paint changes.
   ============================================================ */

/* Action-button tokens: deliberately SOFTER in Paper (light) theme per
   Michael's note — punchy data colors stay, button fills relax. */
html.v2 {
  --v2-gain-btn: #2fbf71;
  --v2-gain-btn-text: #0b1510;
  --v2-loss-btn: #e5484d;
  --v2-loss-btn-text: #fff;
}
html.v2 body.light-theme {
  --v2-gain-btn: #57c893;
  --v2-gain-btn-text: #0d2417;
  --v2-loss-btn: #ec8388;
  --v2-loss-btn-text: #3a1214;
}

/* ---- rows: identity lives in the column header; per-message avatars go ---- */
html.v2 .v2-bill-slot .avatar.bot { display: none !important; }
html.v2 .v2-bill-slot .row { gap: 0 !important; }

/* ---- bubbles ---- */
html.v2 .v2-bill-slot .bubble {
  border-radius: 10px !important;
  padding: 9px 13px !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  border: 1px solid var(--v2-line) !important;
  background: var(--v2-bg2) !important;
  color: var(--v2-text) !important;
  max-width: 94% !important;
}
html.v2 .v2-bill-slot .row.user .bubble,
html.v2 .v2-bill-slot .bubble.user {
  background: var(--v2-blue-dim) !important;
  border-color: transparent !important;
}
html.v2 .v2-bill-slot .bubble.financial-bubble {
  border-left: 2px solid var(--v2-gold) !important;
}
html.v2 .v2-bill-slot .bubble.agenda-bubble {
  background: var(--v2-gain-dim) !important;
  border: 1px solid transparent !important;
  border-left: 2px solid var(--v2-gain) !important;
}
html.v2 .v2-bill-slot .bubble.bot h1,
html.v2 .v2-bill-slot .bubble.bot h2,
html.v2 .v2-bill-slot .bubble.bot h3,
html.v2 .v2-bill-slot .bubble.bot h4,
html.v2 .v2-bill-slot .bubble.bot strong { color: var(--v2-text) !important; }
html.v2 .v2-bill-slot .bubble.bot table { font-variant-numeric: tabular-nums; }

/* thinking state */
html.v2 .v2-bill-slot .thinking-line { color: var(--v2-muted) !important; font-size: 12px; }
html.v2 .v2-bill-slot .thinking-spinner { width: 16px !important; height: 16px !important; }

/* ---- reasoning panel (recommend_trade "Show reasoning") ---- */
html.v2 .v2-bill-slot .xt-reasoning-panel {
  margin-top: 9px;
  border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important;
  background: var(--v2-bg1) !important;
  padding: 0 !important;
}
html.v2 .v2-bill-slot .xt-reasoning-panel summary {
  padding: 7px 11px;
  font-size: 10px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--v2-muted) !important;
  cursor: pointer;
}
html.v2 .v2-bill-slot .xt-reasoning-body { padding: 2px 11px 9px !important; }
html.v2 .v2-bill-slot .xt-cat-row {
  display: grid !important;
  grid-template-columns: 84px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 2.5px 0 !important;
}
html.v2 .v2-bill-slot .xt-cat-label { font-size: 10.5px !important; color: var(--v2-muted) !important; }
html.v2 .v2-bill-slot .xt-cat-bars { display: flex !important; gap: 3px; }
html.v2 .v2-bill-slot .xt-cat-bar {
  width: 13px !important;
  height: 5px !important;
  border-radius: 2px !important;
  background: var(--v2-faint) !important;
  display: inline-block;
}
html.v2 .v2-bill-slot .xt-cat-bar.muted { background: var(--v2-bg3) !important; opacity: 1 !important; }
html.v2 .v2-bill-slot .xt-cat-row[data-direction="bullish"] .xt-cat-bar:not(.muted) { background: var(--v2-gain) !important; }
html.v2 .v2-bill-slot .xt-cat-row[data-direction="bearish"] .xt-cat-bar:not(.muted) { background: var(--v2-loss) !important; }
html.v2 .v2-bill-slot .xt-cat-dir { font-size: 10px !important; color: var(--v2-muted) !important; }
html.v2 .v2-bill-slot .xt-cat-row[data-direction="bullish"] .xt-cat-dir { color: var(--v2-gain) !important; }
html.v2 .v2-bill-slot .xt-cat-row[data-direction="bearish"] .xt-cat-dir { color: var(--v2-loss) !important; }
html.v2 .v2-bill-slot .xt-reasoning-section-label {
  font-size: 10px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--v2-muted) !important;
  margin-top: 7px;
}
html.v2 .v2-bill-slot .xt-reasoning-flip ul { margin: 4px 0 0 !important; padding-left: 16px !important; }
html.v2 .v2-bill-slot .xt-reasoning-flip li { font-size: 11px !important; color: var(--v2-text) !important; padding: 1px 0; }
html.v2 .v2-bill-slot .xt-reasoning-validator {
  margin-top: 8px;
  font-size: 11px !important;
  font-style: italic;
  color: var(--v2-muted) !important;
  border-left: 2px solid var(--v2-gain);
  padding-left: 8px;
}
html.v2 .v2-bill-slot .xt-reasoning-validator.disagrees { border-left-color: var(--v2-loss); }

/* ---- trade-now button under recommendations ---- */
html.v2 .v2-bill-slot .xt-experience-btn--trade,
html.v2 .v2-bill-slot .xt-trade-now-wrap .xt-experience-btn {
  background: var(--v2-gain-btn) !important;
  color: var(--v2-gain-btn-text) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer;
}
html.v2 .v2-bill-slot .xt-experience-btn--trade:hover { filter: brightness(1.07); }

/* ---- confirm / cancel pills (trade confirmation flow) ---- */
html.v2 .v2-bill-slot .action-confirm-btn {
  border-radius: 8px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
html.v2 .v2-bill-slot .action-confirm-btn.confirm {
  background: var(--v2-gain-btn) !important;
  color: var(--v2-gain-btn-text) !important;
  border: none !important;
}
html.v2 .v2-bill-slot .action-confirm-btn.cancel {
  background: transparent !important;
  border: 1px solid var(--v2-line-strong) !important;
  color: var(--v2-muted) !important;
}
html.v2 .v2-bill-slot .action-confirm-btn.cancel:hover { color: var(--v2-text) !important; }

/* ============================================================
   PHASE 3 — THE TRADING FLOOR (workspace + book fixes)
   ============================================================ */

/* ---- BOOK: one native scroller. The V1 sidebar scrolled via a JS wheel
   handler scoped to .sidebar; outside it, capped inner lists were wheel-dead.
   Dissolving the caps makes .v2-book the single scroll container — native
   wheel everywhere, and the full 20-asset watchlist shows (Michael's note:
   Strategy Ready is only 2 cards, so the watchlist gets the room). ---- */
html.v2 .v2-book-slot .watchlist-list,
html.v2 .v2-ready-slot #strat-trending-list {
  max-height: none !important;
  overflow: visible !important;
}
html.v2 .v2-book-slot .watchlist-container,
html.v2 .v2-ready-slot .strat-trending-container { height: auto !important; }
/* duplicate V1 headers (POPULAR ASSETS / STRATEGY READY rows) — the v2
   eyebrows already label these sections */
html.v2 .v2-book .watchlist-header,
html.v2 .v2-book .strat-trending-header { display: none !important; }

/* ---- WORKSPACE TABS ---- */
html.v2 .v2-wtabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  background: var(--v2-bg1);
  border-bottom: 1px solid var(--v2-line);
}
html.v2 .v2-wtabs button {
  border: none;
  background: transparent;
  color: var(--v2-muted);
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
}
html.v2 .v2-wtabs button:hover { color: var(--v2-text); }
html.v2 .v2-wtabs button.on { color: var(--v2-text); border-bottom-color: var(--v2-gold); }

/* floor rows: tape / tabs / chart stage / work (equity strip hidden) */
html.v2 .v2-floor { grid-template-rows: 42px auto auto 1fr; }

/* ---- CHART STAGE: fixed height, fits the screen (Michael note #2) — the
   chart is autoSize:true so it fills exactly this box, no scrolling. ---- */
html.v2 .v2-chart-stage {
  display: flex;
  flex-direction: column;
  height: min(46vh, 500px);
  min-height: 0;
  background: var(--v2-bg1);
  border-bottom: 1px solid var(--v2-line);
  overflow: hidden;
}
html.v2 .v2-chart-stage .xt-chart-header {
  flex: 0 0 auto;
  background: transparent !important;
  border-bottom: 1px solid var(--v2-line) !important;
}
html.v2 .v2-chart-stage .xt-chart-canvas {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  max-height: none !important;
}
html.v2 .v2-chart-stage .xt-cbtn {
  color: var(--v2-muted) !important;
  background: transparent !important;
  border-radius: 6px !important;
}
html.v2 .v2-chart-stage .xt-cbtn:hover { background: var(--v2-bg2) !important; color: var(--v2-text) !important; }

/* ---- the docked V1 equity bar is retired in Penthouse (Michael note #4):
   equity lives in the gold top-bar pill (mirrored live); positions carry
   their own P&L. The bar element stays in the DOM (hidden) because the SSE
   pipeline writes into it and the pill mirror reads from it. ---- */
html.v2 .v2-atb-slot { display: none !important; }

/* ---- WORKSPACE SECTIONS: frameless per the mockup (Michael: "why the
   trading object and the active position are in a border frame") — the
   content sits directly on the floor; only fields/tiles/chips are boxed ---- */
html.v2 .v2-work .rp-section {
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  margin: 10px 12px !important;
  padding: 12px 14px !important;
}
html.v2 .v2-work .rp-section-title {
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: var(--v2-muted) !important;
}

/* ---- MANUAL TRADING form ---- */
html.v2 .v2-work .sidebar-trade-row input,
html.v2 .v2-work .sidebar-trade-field input,
html.v2 .v2-work .sidebar-trade-stepper {
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 8px !important;
  color: var(--v2-text) !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}
html.v2 .v2-work .sidebar-trade-stepper input {
  border: none !important;
  background: transparent !important;
}
html.v2 .v2-work .sidebar-trade-row input:focus,
html.v2 .v2-work .sidebar-trade-field input:focus,
html.v2 .v2-work .sidebar-trade-stepper:focus-within {
  border-color: var(--v2-blue) !important;
  outline: none;
}
html.v2 .v2-work .sidebar-stepper-btn {
  background: transparent !important;
  border: none !important;
  color: var(--v2-muted) !important;
  cursor: pointer;
}
html.v2 .v2-work .sidebar-stepper-btn:hover { color: var(--v2-text) !important; }
html.v2 .v2-work .sidebar-trade-field label {
  color: var(--v2-muted) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
}
html.v2 .v2-work #sidebar-trade-search-btn {
  background: var(--v2-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer;
}
html.v2 .v2-work .sidebar-trade-price {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  color: var(--v2-text) !important;
}
/* TP / SL: present in V1 but visually buried — surface them (Michael note) */
html.v2 .v2-work .sidebar-trade-grid-row2 { display: grid !important; }
html.v2 .v2-work .sidebar-trade-grid-row2 .sidebar-trade-field input {
  min-height: 30px;
}
/* LONG / SHORT on the theme-aware button tokens (softer in Paper) */
html.v2 .v2-work .sidebar-trade-long {
  background: var(--v2-gain-btn) !important;
  color: var(--v2-gain-btn-text) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  cursor: pointer;
}
html.v2 .v2-work .sidebar-trade-short {
  background: var(--v2-loss-btn) !important;
  color: var(--v2-loss-btn-text) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  cursor: pointer;
}
html.v2 .v2-work .sidebar-trade-long:hover,
html.v2 .v2-work .sidebar-trade-short:hover { filter: brightness(1.07); }

/* ---- POSITIONS ---- */
html.v2 .v2-work .rp-positions-scroll { font-variant-numeric: tabular-nums; }
html.v2 .v2-work .rp-positions-scroll > *:not(:first-child) {
  border-top: 1px solid var(--v2-line);
}

/* ---- panel action buttons (Add / Rebalance etc.) ---- */
html.v2 .v2-work .xt-atb-action-btn {
  background: transparent !important;
  border: 1px solid var(--v2-line-strong) !important;
  color: var(--v2-text) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
html.v2 .v2-work .xt-atb-action-btn:hover { background: var(--v2-bg2) !important; }
html.v2 .v2-work .xt-atb-action-btn.primary {
  background: var(--v2-blue) !important;
  border-color: var(--v2-blue) !important;
  color: #fff !important;
}

/* ---- CHART chrome (10-minute chart only — no timeframe chips added,
   per Michael's note: no added complication) ---- */
html.v2 .v2-work .xt-chart-header {
  background: transparent !important;
  border-bottom: 1px solid var(--v2-line) !important;
}
html.v2 .v2-work .xt-cbtn {
  color: var(--v2-muted) !important;
  background: transparent !important;
  border-radius: 6px !important;
}
html.v2 .v2-work .xt-cbtn:hover { background: var(--v2-bg2) !important; color: var(--v2-text) !important; }
html.v2 .v2-work .xt-chart-close { color: var(--v2-muted) !important; }

/* ---- EQUITY STRIP: the active-trading bar docked into the floor ---- */
html.v2 .v2-atb-slot #xt-active-trading-bar {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid var(--v2-line) !important;
  background: var(--v2-bg1) !important;
  box-shadow: none !important;
  margin: 0 !important;
}
html.v2 .v2-atb-slot #xt-active-trading-bar.hidden { display: none !important; }

/* ============================================================
   PHASE 3b — DEEP PASS (Michael's five crops, 2026-08-04)
   ============================================================ */

/* ---- TOP BAR: auth cluster + theme toggle now transplanted BY ID; the
   emptied V1 header husk is dead weight — hide it. ---- */
html.v2 .main > header { display: none !important; }
html.v2 .v2-topslot > header > button:not(.theme-toggle-btn) { display: none !important; }
html.v2 .v2-topslot .auth-buttons {
  position: static !important;
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  margin: 0 !important;
}
html.v2 .v2-topslot .auth-buttons .btn,
html.v2 .v2-topslot .auth-buttons .user-badge {
  position: static !important;
  height: 30px !important;
  border-radius: 9px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line-strong) !important;
  color: var(--v2-text) !important;
}
html.v2 .v2-topslot .auth-buttons .deposit-btn {
  background: var(--v2-gold) !important;
  border-color: var(--v2-gold) !important;
  color: #16130a !important;
}
html.v2 .v2-topslot .auth-buttons .login-btn,
html.v2 .v2-topslot .auth-buttons .admin-btn {
  background: var(--v2-blue) !important;
  border-color: var(--v2-blue) !important;
  color: #fff !important;
}
html.v2 .v2-topslot .auth-buttons .user-badge {
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line-strong) !important;
  color: var(--v2-text) !important;
}
html.v2 .v2-topslot .theme-toggle-btn {
  position: static !important;
  width: 30px; height: 30px;
  border: none; background: transparent;
  color: var(--v2-muted) !important;
  border-radius: 8px;
  cursor: pointer;
  margin-left: 4px;
}
html.v2 .v2-topslot .theme-toggle-btn:hover { background: var(--v2-bg2); color: var(--v2-text) !important; }

/* equity pill (fed live by the adapter's mirror of #xt-atb-balance) */
html.v2 .v2-equity {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--v2-gold);
  background: var(--v2-gold-dim);
  border-radius: 9px;
  padding: 4px 14px;
  margin-right: 6px;
  box-shadow: 0 0 16px var(--v2-gold-dim);
}
html.v2 .v2-equity-lbl {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--v2-gold);
}
html.v2 .v2-equity-val {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 14.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text);
}

/* ---- TAPE: slim chips — SYM  score  AI. Rank, ATR, arrow hidden;
   the whole chip is the click target (adapter delegation). ---- */
html.v2 .v2-tape-slot .trending-ticker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  box-shadow: none !important;
  padding: 4px 11px !important;
  cursor: pointer;
  min-height: 0 !important;
  height: auto !important;
}
html.v2 .v2-tape-slot .trending-ticker.trending-row-bullish { border-left: 2px solid var(--v2-gain) !important; background: var(--v2-bg1) !important; }
html.v2 .v2-tape-slot .trending-ticker.trending-row-bearish { border-left: 2px solid var(--v2-loss) !important; background: var(--v2-bg1) !important; }
html.v2 .v2-tape-slot .trending-ticker:hover { border-color: var(--v2-blue) !important; }
html.v2 .v2-tape-slot .trending-rank,
html.v2 .v2-tape-slot .trending-atr,
html.v2 .v2-tape-slot .trending-launch-arrow { display: none !important; }
html.v2 .v2-tape-slot .trending-symbol {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--v2-text) !important;
}
html.v2 .v2-tape-slot .trending-score {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  background: transparent !important;
  padding: 0 !important;
}
html.v2 .v2-tape-slot .trending-score.long { color: var(--v2-gain) !important; }
html.v2 .v2-tape-slot .trending-score.short { color: var(--v2-loss) !important; }
html.v2 .v2-tape-slot .trending-score-wrap { display: inline-flex !important; align-items: center; }
html.v2 .v2-tape-slot .trending-info { display: inline-flex !important; }

/* ---- WATCHLIST rows: SYM bold over muted name, price right, mono.
   Arrow hidden — the whole row launches (adapter). ---- */
html.v2 .v2-book-slot .watchlist-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 2px 10px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--v2-line) !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  cursor: pointer;
  box-shadow: none !important;
}
html.v2 .v2-book-slot .watchlist-row:hover { background: var(--v2-bg2) !important; }
/* grid (not column flex): the injected [AI] badge sits ON the symbol line
   (row 1 col 2) instead of breaking onto its own line; name spans below. */
html.v2 .v2-book-slot .watchlist-name-wrap {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1px 7px !important;
  min-width: 0;
}
html.v2 .v2-book-slot .watchlist-name-wrap .watchlist-symbol { grid-area: 1 / 1; }
html.v2 .v2-book-slot .watchlist-name-wrap .v2-w-ai { grid-area: 1 / 2; justify-self: start; display: inline-flex; }
html.v2 .v2-book-slot .watchlist-name-wrap .watchlist-name { grid-area: 2 / 1 / 3 / 3; }
html.v2 .v2-book-slot .watchlist-symbol {
  order: -1;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--v2-text) !important;
  background: transparent !important;
  padding: 0 !important;
}
html.v2 .v2-book-slot .watchlist-name {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--v2-faint) !important;
}
html.v2 .v2-book-slot .watchlist-price {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text) !important;
  text-align: right;
}
html.v2 .v2-book-slot .watchlist-row .trending-launch-arrow { display: none !important; }

/* ---- STRATEGY READY cards ---- */
html.v2 .v2-ready-slot .strat-trending-card {
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 9px !important;
  margin: 8px 10px 0 !important;
  padding: 9px 11px !important;
  box-shadow: none !important;
}
html.v2 .v2-ready-slot .strat-trending-card:hover { border-color: var(--v2-gold) !important; }
html.v2 .v2-ready-slot .strat-trending-symbol {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--v2-text) !important;
}
html.v2 .v2-ready-slot .strat-trending-tf {
  font-size: 10px !important;
  color: var(--v2-muted) !important;
  background: var(--v2-bg3) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
}
html.v2 .v2-ready-slot .strat-trending-stat { font-size: 10.5px !important; color: var(--v2-muted) !important; }
html.v2 .v2-ready-slot .strat-trending-stat strong.pos { color: var(--v2-gain) !important; }
html.v2 .v2-ready-slot .strat-trending-stat strong { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; }
html.v2 .v2-ready-slot .strat-trending-launch-arrow {
  background: transparent !important;
  border: none !important;
  color: var(--v2-gold) !important;
  cursor: pointer;
}

/* ---- TRADE FORM: crop-1 density — inline labels, compact fields ---- */
html.v2 .v2-work .rp-section { padding: 10px 12px !important; margin: 8px 12px !important; }
html.v2 .v2-work .sidebar-trade-grid { gap: 8px !important; margin-top: 8px !important; }
html.v2 .v2-work .sidebar-trade-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
html.v2 .v2-work .sidebar-trade-field input,
html.v2 .v2-work .sidebar-trade-stepper { min-height: 32px !important; font-size: 12.5px !important; }
html.v2 .v2-work .sidebar-trade-row { gap: 8px !important; }
html.v2 .v2-work .sidebar-trade-row input {
  min-height: 34px !important;
  font-size: 12.5px !important;
  padding: 0 12px !important;
}
html.v2 .v2-work .sidebar-trade-long,
html.v2 .v2-work .sidebar-trade-short { min-height: 36px !important; font-size: 12.5px !important; }
html.v2 .v2-work .sidebar-trade-short {
  background: var(--v2-loss-dim) !important;
  color: var(--v2-loss) !important;
  border: 1px solid var(--v2-loss) !important;
}

/* ---- ACTIVE-TRADING VIEW LAYOUT: form left / positions right; chart (when
   mounted) spans the full width on top — the closest V1 allows to the mockup ---- */
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content {
  display: grid !important;
  grid-template-columns: 420px 1fr;
  gap: 0 4px;
  align-content: start;
}
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content > .rp-section:has(.sidebar-trade-grid) { grid-column: 1; }
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content > .rp-section:has(#rp-positions-body) { grid-column: 2; grid-row: 1 / span 2; }
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content > .rp-actions { grid-column: 1; }
/* xt-has-chart is a TRANSIENT V1 state now: the chart only passes through the
   panel (hidden) on its way to the stage. The old full-width-chart restack
   that lived here made the whole workspace jump on every ticker swap —
   the layout must be IDENTICAL with or without the flag. */
html.v2 #xt-right-panel.xt-has-chart #xt-panel-content > .rp-section:has(#rp-positions-body) {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
}
html.v2 #xt-right-panel.xt-has-chart #xt-panel-content > .rp-section:has(.sidebar-trade-grid) { grid-column: 1 !important; grid-row: 1 !important; }
html.v2 #xt-right-panel.xt-has-chart #xt-panel-content > .rp-actions { grid-column: 1 !important; grid-row: auto !important; }
/* anything that isn't the active-trading view keeps its natural flow —
   with GUARANTEED internal scroll to the true bottom (Michael: sim screen
   was cut at the calculator). flex-fill instead of height:100% — with
   padding, forced height overflowed the parent box and CLIPPED the tail
   (the "bottom hidden blocked" band). border-box everywhere for the same
   reason. */
html.v2 .v2-work #xt-right-panel {
  display: flex !important;
  flex-direction: column !important;
}
html.v2 .v2-work #xt-panel-content { box-sizing: border-box !important; }
html.v2 .v2-work:not([data-view="active-trading"]) #xt-panel-content {
  display: block !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: 28px !important;
}
/* an empty chart stage must never hold its reserved height */
html.v2 #v2-chart-stage:empty { display: none !important; height: 0 !important; min-height: 0 !important; }

/* ---- POSITIONS: crop-1 table feel ---- */
html.v2 .v2-work .rp-pos-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--v2-line) !important;
  margin: 0 !important;
  padding: 7px 4px !important;
  box-shadow: none !important;
}
html.v2 .v2-work .rp-pos-symbol {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  color: var(--v2-text) !important;
  cursor: pointer;
}
html.v2 .v2-work .xt-atb-position-badge {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
}
html.v2 .v2-work .xt-atb-position-badge.long { background: var(--v2-gain-dim) !important; color: var(--v2-gain) !important; }
html.v2 .v2-work .xt-atb-position-badge.short { background: var(--v2-loss-dim) !important; color: var(--v2-loss) !important; }
html.v2 .v2-work .rp-pos-meta { font-size: 10.5px !important; color: var(--v2-muted) !important; }
html.v2 .v2-work .rp-pos-pnl {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 11.5px !important;
  font-variant-numeric: tabular-nums;
}
html.v2 .v2-work .rp-pos-pnl.positive { color: var(--v2-gain) !important; }
html.v2 .v2-work .rp-pos-pnl.negative { color: var(--v2-loss) !important; }
html.v2 .v2-work .rp-pos-detail {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  color: var(--v2-muted) !important;
}

/* ---- EQUITY STRIP internals (docked ATB) — Penthouse type pass ---- */
html.v2 .v2-atb-slot #xt-active-trading-bar * { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
html.v2 .v2-atb-slot .xt-atb-balance-value,
html.v2 .v2-atb-slot .xt-atb-badge,
html.v2 .v2-atb-slot .xt-atb-pnl {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}
html.v2 .v2-atb-slot .xt-atb-balance-label { letter-spacing: 0.12em; color: var(--v2-muted) !important; }

/* ============================================================
   PHASE 3d — mockup-parity round (2026-08-04, screenshots #2)
   ============================================================ */

/* the V1 view label ("ACTIVE TRADING") has no place in Penthouse */
html.v2 #xt-panel-title { display: none !important; }

/* ---- CHART: edge-to-edge in the stage — strip V1 card chrome ---- */
html.v2 .v2-chart-stage .xt-chart-header,
html.v2 .v2-chart-stage .xt-chart-canvas {
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  max-width: none !important;
  width: auto !important;
}
html.v2 .v2-chart-stage .xt-chart-header { padding: 6px 14px !important; }

/* mockup-style chart title: SYM · company · live price */
html.v2 .v2-chart-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
  padding-right: 12px;
}
html.v2 .v2-ct-sym {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--v2-text);
}
html.v2 .v2-ct-name {
  font-size: 10.5px;
  color: var(--v2-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
html.v2 .v2-ct-price {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--v2-text);
  font-variant-numeric: tabular-nums;
}
html.v2 .v2-chart-stage .xt-chart-toolbar { margin-left: auto; }

/* ---- TRADE VIEW: no floating cards — fields directly on the ground ---- */
html.v2 .v2-work[data-view="active-trading"] .rp-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 4px 10px !important;
  padding: 8px 6px !important;
  box-shadow: none !important;
}

/* ---- FORM FIELDS: mockup crop-1 — label inside-left, value right ---- */
html.v2 .v2-work .sidebar-trade-field {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 8px !important;
  padding: 0 6px 0 12px !important;
  min-height: 36px !important;
}
html.v2 .v2-work .sidebar-trade-field:focus-within { border-color: var(--v2-blue) !important; }
html.v2 .v2-work .sidebar-trade-field label {
  margin: 0 !important;
  white-space: nowrap;
}
html.v2 .v2-work .sidebar-trade-field input {
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  text-align: right !important;
  width: 76px !important;
  padding: 0 4px !important;
}
html.v2 .v2-work .sidebar-trade-field .sidebar-trade-stepper {
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex: 1;
  justify-content: flex-end;
}
/* the TRADE cell (holds LONG/SHORT) is not a boxed field */
html.v2 .v2-work .sidebar-trade-field:has(.sidebar-trade-buttons) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
html.v2 .v2-work .sidebar-trade-buttons { display: flex !important; gap: 8px !important; flex: 1; }
html.v2 .v2-work .sidebar-trade-buttons button { flex: 1; min-height: 36px !important; }
html.v2 .v2-work .sidebar-trade-row input { background: var(--v2-bg2) !important; }

/* ---- WATCHLIST: 3-column rows (name | sparkline | price+%) ---- */
html.v2 .v2-book-slot .watchlist-row {
  grid-template-columns: 1fr 46px auto !important;
  align-items: center !important;
}
html.v2 .v2-book-slot .v2-w-spark { line-height: 0; }
html.v2 .v2-book-slot .v2-w-spark svg { width: 44px; height: 16px; display: block; }
html.v2 .v2-book-slot .watchlist-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 1px !important;
}
html.v2 .v2-book-slot .v2-w-chg {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
html.v2 .v2-book-slot .v2-w-chg.up { color: var(--v2-gain); }
html.v2 .v2-book-slot .v2-w-chg.down { color: var(--v2-loss); }

/* ============================================================
   PHASE 3e — fixes from screenshots #3 (2026-08-04)
   ============================================================ */

/* Add / Rebalance: V1 positions them absolutely — they were floating over
   the chart. Static, in-flow, under the form. */
html.v2 .v2-work .rp-actions {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 6px 12px !important;
  padding: 0 !important;
  display: flex !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html.v2 .v2-work .rp-actions .xt-atb-action-btn { min-height: 32px; padding: 0 14px !important; }

/* LONG / SHORT: full-width pair on their own row (mockup) — they were
   crushed into the narrow third cell of the TP/SL row. */
html.v2 .v2-work .sidebar-trade-grid-row2 { grid-template-columns: 1fr 1fr !important; }
html.v2 .v2-work .sidebar-trade-grid-row2 .sidebar-trade-field:has(.sidebar-trade-buttons) {
  grid-column: 1 / -1 !important;
}
html.v2 .v2-work .sidebar-trade-field:has(.sidebar-trade-buttons) label { display: none !important; }
html.v2 .v2-work .sidebar-trade-buttons { width: 100%; }
html.v2 .v2-work .sidebar-trade-buttons button {
  min-height: 40px !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
}

/* search row: compact, mockup-height */
html.v2 .v2-work .sidebar-trade-row input { min-height: 36px !important; }
html.v2 .v2-work #sidebar-trade-search-btn { min-height: 36px !important; padding: 0 16px !important; }

/* ============================================================
   PHASE 3f — small-text + alignment round
   ============================================================ */

/* tape: AI badge vertically aligned with the ticker text */
html.v2 .v2-tape-slot .trending-symbol-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html.v2 .v2-tape-slot .trending-ai { display: inline-flex !important; align-items: center !important; }

/* market session chip in the top bar */
html.v2 .v2-mkt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--v2-muted);
  margin-left: 2px;
}
html.v2 .v2-mkt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v2-faint); }
html.v2 .v2-mkt-dot.open { background: var(--v2-gain); }

/* counts + refreshed labels in the book eyebrows */
html.v2 .v2-book .v2-eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
html.v2 .v2-count,
html.v2 .v2-ready-h #strat-trending-updated {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--v2-faint);
  display: inline !important;
}

/* selected watchlist row follows the charted ticker */
html.v2 .v2-book-slot .watchlist-row.v2-w-sel {
  background: var(--v2-blue-dim) !important;
  box-shadow: inset 2px 0 0 var(--v2-blue);
}

/* chart toolbar must always render inside the stage */
html.v2 .v2-chart-stage .xt-chart-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ============================================================
   PHASE 3g — layout order + scroll containment
   ============================================================ */

/* Mockup order: tape / CHART / tabs / workspace — tabs sit UNDER the chart */
html.v2 .v2-floor { grid-template-rows: 42px auto auto 1fr; }
html.v2 .v2-tape { grid-row: 1; }
/* Tabs PINNED above the stage: they hold the exact same position whether a
   chart is open (Trade) or not (Builder/Deposit) - the chart grows BELOW. */
html.v2 .v2-wtabs { grid-row: 2; }
html.v2 .v2-chart-stage { grid-row: 3; }
html.v2 .v2-work { grid-row: 4; }

/* Scroll containment: the workspace never scrolls as a whole — the form
   column stays put, the POSITIONS list scrolls inside its own pane. */
html.v2 .v2-work { overflow: hidden !important; }
html.v2 .v2-work #xt-right-panel { overflow: hidden !important; }
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content {
  height: 100% !important;
  overflow: hidden !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content > .rp-section:has(#rp-positions-body) {
  overflow-y: auto !important;
  min-height: 0 !important;
}
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content > .rp-section:has(.sidebar-trade-grid) {
  overflow-y: auto !important;
  min-height: 0 !important;
}
/* non-trade views (Builder / Deposit flows) scroll naturally */
html.v2 .v2-work:not([data-view="active-trading"]) #xt-right-panel,
html.v2 .v2-work:not([data-view="active-trading"]) #xt-panel-content {
  overflow-y: auto !important;
  height: auto !important;
}

/* ============================================================
   PHASE 3h — dead band + headers + tabs polish
   ============================================================ */

/* The V1 panel header (collapse btn + title + stepper) caused the dead black
   band under the tabs. Trade view: gone entirely. Flow views (Builder /
   Simulate / Portfolio): keep the stepper — it's the flow's navigation —
   but reskin it and drop the collapse button. */
html.v2 .v2-work[data-view="active-trading"] .xt-right-panel-header { display: none !important; }
html.v2 .v2-work .xt-right-panel-header {
  background: var(--v2-bg1) !important;
  border-bottom: 1px solid var(--v2-line) !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  min-height: 0 !important;
}
html.v2 .v2-work .right-panel-collapse-btn { display: none !important; }

/* "MANUAL TRADING" label: the mockup has no label over the order form */
html.v2 .v2-work .rp-section:has(.sidebar-trade-grid) > .rp-section-title span:first-child,
html.v2 .v2-work .rp-section:has(.sidebar-trade-grid) > .rp-section-title { font-size: 0 !important; }
html.v2 .v2-work .rp-section:has(.sidebar-trade-grid) > .rp-section-title .trade-sound-toggle {
  font-size: 12px !important;
}
html.v2 .v2-work .rp-section:has(.sidebar-trade-grid) > .rp-section-title {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 2px;
}

/* ============================================================
   PHASE 3i — Michael's five (2026-08-04): no Simulate, tab click
   closes chart, Add/Rebalance gone, denser trade panel, Strategy
   Ready to mockup shape
   ============================================================ */

/* Add / Rebalance retired from the Trade view */
html.v2 .v2-work .rp-actions { display: none !important; }

/* denser trade panel: narrower form column, tighter everything */
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content {
  grid-template-columns: 330px 1fr !important;
  gap: 0 2px !important;
}
html.v2 .v2-work[data-view="active-trading"] .rp-section {
  margin: 2px 8px !important;
  padding: 6px 4px !important;
}
html.v2 .v2-work .sidebar-trade-grid { gap: 6px !important; margin-top: 6px !important; }
html.v2 .v2-work .sidebar-trade-row { gap: 6px !important; }
html.v2 .v2-work .sidebar-trade-row input { min-height: 32px !important; font-size: 12px !important; }
html.v2 .v2-work #sidebar-trade-search-btn { min-height: 32px !important; padding: 0 12px !important; font-size: 11px !important; }
html.v2 .v2-work .sidebar-trade-buttons button {
  min-height: 36px !important;
  max-height: 36px !important;
  font-size: 12px !important;
}

/* Strategy Ready — mockup card: SYM  tf · strategy  ●gold / stats /
   "Launch trade →" as a gold text action on its own line */
html.v2 .v2-ready-slot .strat-trending-ai { display: none !important; }
/* (Older card treatment removed — it drew a SECOND gold dot via row1::after,
   and put "Launch trade →" INSIDE the chevron-masked button where the mask
   clipped it to the mangled "Laur" pill. The 3l block below owns the card
   now: single dot on card::after, gold text on card::before, invisible
   full-width click strip.) */
html.v2 .v2-ready-slot .strat-trending-row1 {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}
html.v2 .v2-ready-slot .strat-trending-tf {
  background: transparent !important;
  padding: 0 !important;
  color: var(--v2-muted) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html.v2 .v2-ready-slot .strat-trending-row2 {
  display: flex !important;
  gap: 14px !important;
  margin-top: 5px !important;
}

/* ============================================================
   PHASE 3j — WHITE-MODE PARITY + hard sizing reset (Michael's
   report: every issue below reproduced in Paper theme)
   ============================================================ */

/* TAPE TEXT IN LIGHT MODE: V1's double-class light rules force WHITE
   symbols/scores on tinted rows -> white-on-white chips. Out-specific them. */
html.v2 body.light-theme .v2-tape-slot .trending-ticker .trending-symbol,
html.v2 body.light-theme .v2-tape-slot .trending-ticker .trending-score {
  color: var(--v2-text) !important;
}
html.v2 body.light-theme .v2-tape-slot .trending-ticker .trending-score.long { color: var(--v2-gain) !important; }
html.v2 body.light-theme .v2-tape-slot .trending-ticker .trending-score.short { color: var(--v2-loss) !important; }
html.v2 body.light-theme .v2-tape-slot .trending-ticker.trending-row-bullish,
html.v2 body.light-theme .v2-tape-slot .trending-ticker.trending-row-bearish {
  background: var(--v2-bg1) !important;
}

/* FIELD SIZING — 3l final. Boxed row like the mockup: "Amount $1,000 − +"
   — label left, value RIGHT AFTER the label (flexible, so it can never
   clip), −/+ pinned at the right edge via flex order. The clipping came
   from fixed-width steppers that overflowed the 360px form column. */
html.v2 .v2-work .sidebar-trade-field,
html.v2 .v2-work .sidebar-trade-field * { box-sizing: border-box !important; }
html.v2 .v2-work .sidebar-trade-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 8px !important; }
html.v2 .v2-work .sidebar-trade-grid .sidebar-trade-field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 8px 0 12px !important;
  overflow: hidden !important;
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 8px !important;
}
html.v2 .v2-work .sidebar-trade-grid .sidebar-trade-field:focus-within { border-color: var(--v2-blue) !important; }
html.v2 .v2-work .sidebar-trade-field label {
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  color: var(--v2-muted) !important;
  margin: 0 !important;
  flex: none !important;
}
/* every field input is FLEXIBLE — overflow is geometrically impossible */
html.v2 .v2-work .sidebar-trade-field input {
  height: 100% !important;
  min-height: 0 !important;
  width: auto !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0 2px !important;
  font-size: 12.5px !important;
  background: transparent !important;
  border: none !important;
  color: var(--v2-text) !important;
}
/* TP/SL (bare inputs): value right-aligned in the box */
html.v2 .v2-work .sidebar-trade-field > input { text-align: right !important; }
/* AMOUNT/LEVERAGE steppers: [− input +] DOM reordered to [input − +] so the
   value reads right after the label and −/+ sit together at the right edge */
html.v2 .v2-work .sidebar-trade-stepper {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html.v2 .v2-work .sidebar-trade-stepper input { order: 1; text-align: left !important; }
html.v2 .v2-work .sidebar-trade-stepper .sidebar-stepper-btn:first-child { order: 2; }
html.v2 .v2-work .sidebar-trade-stepper .sidebar-stepper-btn:last-child { order: 3; }
html.v2 .v2-work .sidebar-stepper-btn {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border-radius: 5px !important;
  background: transparent !important;
  border: none !important;
  color: var(--v2-muted) !important;
  flex: none !important;
}
html.v2 .v2-work .sidebar-stepper-btn:hover { background: var(--v2-line) !important; color: var(--v2-text) !important; }
/* mockup-width form column (shrinks before it starves the positions pane)
   + no horizontal scroll ever */
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content { grid-template-columns: minmax(320px, 400px) 1fr !important; }
html.v2 .v2-work .rp-section:has(.sidebar-trade-grid) { overflow-x: hidden !important; }
/* small windows: stack form above positions instead of starving both */
@media (max-width: 1500px) {
  html.v2 .v2-work[data-view="active-trading"] #xt-panel-content {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  html.v2 .v2-work[data-view="active-trading"] #xt-panel-content > .rp-section:has(#rp-positions-body) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  html.v2 .v2-work[data-view="active-trading"] #xt-panel-content > .rp-section:has(.sidebar-trade-grid) {
    grid-column: 1 !important;
  }
}

/* TICKER FIELD like the mockup: boxed row, TICKER label, value right,
   search happens on Enter (the input already submits on Enter) */
html.v2 .v2-work #sidebar-trade-search-btn { display: none !important; }
html.v2 .v2-work .sidebar-trade-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 34px !important;
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 8px !important;
  /* padding lives on the INPUT, not here: the input's box (what Chrome's
     autofill highlight paints) must fill the wrapper's inner area EXACTLY —
     flush to the border on all four sides, matching corners. */
  padding: 0 !important;
}
/* Michael (2026-08-05): no "Ticker" label — a plain left-aligned input the
   user clicks and types in; the placeholder carries the hint. */
html.v2 .v2-work .sidebar-trade-row::before { content: none; }
html.v2 .v2-work .sidebar-trade-row input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  height: 100% !important;
  text-align: left !important;
  font-size: 12px !important;
  padding: 0 10px 0 12px !important;   /* text position unchanged */
  border-radius: 7px !important;        /* wrapper 8px minus its 1px border */
  box-sizing: border-box !important;    /* padding INSIDE the flex width — no right overflow */
  width: 100% !important;
}
html.v2 .v2-work .sidebar-trade-row:focus-within { border-color: var(--v2-blue) !important; }

/* STRATEGY READY — 3l bulletproof. V1's launch button is a chevron-shaped
   CSS MASK over a gradient (status.css) — ANY text placed inside renders
   through the mask, which produced the mangled blue "Laur" pill. So the
   gold "Launch trade →" text lives on the CARD's ::before (untouchable by
   button styles), and the button becomes an INVISIBLE full-width click
   strip over the card's bottom line. Single gold dot top-right; the V1 AI
   badge is hidden here (not in the mockup, and it rendered as a stray
   second dot at this size). */
html.v2 .v2-ready-slot .strat-trending-card {
  position: relative !important;
  padding: 10px 12px 30px !important;
}
html.v2 .v2-ready-slot .strat-trending-card::after {
  content: '';
  position: absolute;
  top: 13px;
  right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-gold);
}
html.v2 .v2-ready-slot .strat-trending-card::before {
  content: 'Launch trade \2192';
  position: absolute;
  left: 12px;
  bottom: 9px;
  color: var(--v2-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
html.v2 .v2-ready-slot .strat-trending-card:hover::before { text-decoration: underline; }
html.v2 .v2-ready-slot .strat-trending-ai { display: none !important; }
html.v2 .v2-ready-slot .strat-trending-stat {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  white-space: nowrap !important;
}
html.v2 .v2-ready-slot .strat-trending-stat strong { font-size: 10.5px !important; }
html.v2 .v2-ready-slot .strat-trending-row2 { flex-wrap: nowrap !important; overflow: hidden; }
html.v2 .v2-ready-slot .strat-trending-tf { white-space: nowrap !important; }
html.v2 .v2-ready-slot .strat-trending-tf::after { content: ' · Quick Trending'; }
html.v2 .v2-ready-slot .strat-trending-launch-arrow {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: transparent !important;
  background-image: none !important;
  transform: none !important;
  filter: none !important;
  border: none !important;
  cursor: pointer;
  z-index: 2;
}

/* LONG / SHORT — 3k: full-width pair on their own row under TP/SL, mockup
   palette (LONG soft solid green with dark text, SHORT red outline). */
html.v2 .v2-work .sidebar-trade-grid-row2 { grid-template-columns: 1fr 1fr !important; }
html.v2 .v2-work .sidebar-trade-grid .sidebar-trade-field:has(.sidebar-trade-buttons) {
  grid-column: 1 / -1 !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
}
html.v2 .v2-work .sidebar-trade-field:has(.sidebar-trade-buttons) label { display: none !important; }
html.v2 .v2-work .sidebar-trade-buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
html.v2 .v2-work .sidebar-trade-buttons button {
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
html.v2 .v2-work .sidebar-trade-long {
  background: #4fae72 !important;
  border: 1px solid #4fae72 !important;
  color: #0a1f12 !important;
}
html.v2 .v2-work .sidebar-trade-long:hover { filter: brightness(1.08); }
html.v2 .v2-work .sidebar-trade-short {
  background: transparent !important;
  border: 1px solid rgba(229, 86, 86, 0.55) !important;
  color: #e05656 !important;
}
html.v2 .v2-work .sidebar-trade-short:hover { background: rgba(229, 86, 86, 0.12) !important; }
html.v2 body.light-theme .v2-work .sidebar-trade-long {
  background: var(--v2-gain-btn, #7fd39a) !important;
  border-color: var(--v2-gain-btn, #7fd39a) !important;
  color: #10331d !important;
}
html.v2 body.light-theme .v2-work .sidebar-trade-short {
  border-color: var(--v2-loss-btn, #f0a0a0) !important;
  color: #c04747 !important;
}

/* ---- quick replies ---- */
html.v2 .v2-bill-slot .quick-reply-btn {
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important;
  color: var(--v2-text) !important;
  font-size: 11.5px !important;
  padding: 5px 11px !important;
}
html.v2 .v2-bill-slot .quick-reply-btn:hover {
  border-color: var(--v2-blue) !important;
  background: var(--v2-blue-dim) !important;
}

/* ---- composer ---- */
html.v2 .v2-bill-slot .inputbar {
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html.v2 .v2-bill-slot .inputbar:focus-within { border-color: var(--v2-blue) !important; }
html.v2 .v2-bill-slot .inputbar textarea,
html.v2 .v2-bill-slot #input {
  background: transparent !important;
  color: var(--v2-text) !important;
  font-size: 13px !important;
}
html.v2 .v2-bill-slot #input::placeholder { color: var(--v2-faint) !important; }
html.v2 .v2-bill-slot .sendbtn {
  background: var(--v2-blue) !important;
  color: #fff !important;
  border-radius: 8px !important;
}
html.v2 .v2-bill-slot .sendbtn:hover { filter: brightness(1.1); }

/* ---- scroll-to-bottom: re-anchored to Bill's column ---- */
html.v2 .scroll-to-bottom-btn {
  left: auto !important;
  right: 175px !important;
  margin: 0 !important;
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line-strong) !important;
  color: var(--v2-muted) !important;
}
html.v2.v2-bill-collapsed .scroll-to-bottom-btn { display: none !important; }

/* ============================================================
   PHASE 3k — mockup 1:1 pass: positions flat table, equity ▲%,
   workspace surfaces, Builder polish
   ============================================================ */

/* ---- equity pill: live change chip (adapter feeds it from SSE) ---- */
html.v2 .v2-equity-chg {
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
html.v2 .v2-equity-chg.pos { color: var(--v2-gain); }
html.v2 .v2-equity-chg.neg { color: var(--v2-loss); }

/* ---- workspace surfaces. Michael's rule: near-black lives ONLY behind
   the graph. The workspace backdrop is lifted a full step (bg1) so it can
   never read as black, cards step up to bg2, fields to bg3 — the whole
   ladder shifts one notch to keep contrast. ---- */
html.v2 .v2-work,
html.v2 .v2-work #xt-right-panel,
html.v2 .v2-work #xt-panel-content,
html.v2 .v2-wtabs { background: var(--v2-bg1) !important; }
html.v2 .v2-work #xt-panel-content .rp-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 6px !important;
}
html.v2 .v2-work .sidebar-trade-grid .sidebar-trade-field,
html.v2 .v2-work .sidebar-trade-row { background: var(--v2-bg3) !important; }
html.v2 body.light-theme .v2-work,
html.v2 body.light-theme .v2-work #xt-right-panel,
html.v2 body.light-theme .v2-work #xt-panel-content,
html.v2 body.light-theme .v2-wtabs { background: var(--v2-bg0) !important; }
html.v2 body.light-theme .v2-work .sidebar-trade-grid .sidebar-trade-field,
html.v2 body.light-theme .v2-work .sidebar-trade-row { background: var(--v2-bg2) !important; }

/* ---- OPEN POSITIONS: flat table (adapter rearranges V1's two-line cards
   into .v2-pos-head / .v2-pos-main / .v2-pos-detail-line) ---- */
html.v2 .v2-work #rp-positions-body { display: block !important; overflow-x: hidden !important; }
html.v2 .v2-work .rp-positions-scroll { overflow-x: hidden !important; }
html.v2 .v2-work .v2-pos-head,
html.v2 .v2-work .v2-pos-main {
  display: grid !important;
  /* FLUID columns (Michael #3): fractions squeeze on small windows instead
     of overflowing; minmax(0,*) + per-cell ellipsis make h-scroll and
     clipping both impossible at any width. */
  grid-template-columns: minmax(40px, 0.9fr) minmax(70px, 1.3fr) minmax(44px, 0.9fr) minmax(58px, 1fr) minmax(0, 2.4fr) 22px;
  align-items: center;
  gap: 8px;
}
html.v2 .v2-work .v2-pos-main .rp-pos-symbol,
html.v2 .v2-work .v2-pos-size,
html.v2 .v2-work .v2-pos-entry {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.v2 .v2-work .v2-pos-head {
  height: 24px;
  font-size: 9px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--v2-faint);
  border-bottom: 1px solid var(--v2-line);
  margin-bottom: 2px;
}
html.v2 .v2-work .rp-pos-card {
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
html.v2 .v2-work .rp-pos-card:last-child { border-bottom: none !important; }
html.v2 .v2-work .v2-pos-main { min-height: 36px; }
html.v2 .v2-work .v2-pos-main .rp-pos-symbol {
  font-weight: 700 !important;
  font-size: 12.5px !important;
  color: var(--v2-text) !important;
  cursor: pointer;
}
html.v2 .v2-work .v2-pos-main .xt-atb-position-badge {
  justify-self: start;
  padding: 2px 8px !important;
  border-radius: 5px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap;
}
html.v2 .v2-work .xt-atb-position-badge.long {
  background: rgba(63, 185, 80, 0.15) !important;
  color: var(--v2-gain) !important;
}
html.v2 .v2-work .xt-atb-position-badge.short {
  background: rgba(229, 86, 86, 0.15) !important;
  color: var(--v2-loss) !important;
}
html.v2 .v2-work .v2-pos-size,
html.v2 .v2-work .v2-pos-entry {
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  color: var(--v2-text) !important;
}
html.v2 .v2-work .v2-pos-main .rp-pos-pnl {
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.v2 .v2-work .v2-pos-main .rp-pos-pnl small { font-size: 11px !important; opacity: 0.85; }
html.v2 .v2-work .rp-pos-pnl.positive { color: var(--v2-gain) !important; }
html.v2 .v2-work .rp-pos-pnl.negative { color: var(--v2-loss) !important; }
html.v2 .v2-work .v2-pos-main .xt-atb-close-position {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid var(--v2-line) !important;
  color: var(--v2-muted) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer;
}
html.v2 .v2-work .v2-pos-main .xt-atb-close-position:hover {
  border-color: var(--v2-loss) !important;
  color: var(--v2-loss) !important;
}
/* detail line: hidden until the row is CLICKED open (v2-pos-open, toggled
   by the adapter's delegated row listener — hover reveal retired
   2026-08-06). focus-within kept as a safety net for focused TP/SL. */
html.v2 .v2-work .v2-pos-detail-line {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 2px 0 8px;
  font-size: 11px;
  color: var(--v2-muted);
}
html.v2 .v2-work .rp-pos-card.v2-pos-open .v2-pos-detail-line,
html.v2 .v2-work .v2-pos-detail-line:focus-within { display: flex; }
/* whole main row is the toggle target — say so */
html.v2 .v2-work .v2-pos-main { cursor: pointer; }
html.v2 .v2-work .rp-pos-card:not(.v2-row-hl) .v2-pos-main:hover { background: var(--v2-bg2); }
html.v2 .v2-work .v2-pos-detail-line .xt-inline-tpsl {
  width: 46px !important;
  height: 20px !important;
  font-size: 11px !important;
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 5px !important;
  color: var(--v2-text) !important;
  text-align: right !important;
  padding: 0 4px !important;
}
html.v2 .v2-work .v2-pos-hidden { display: none !important; }

/* ---- Builder: sector cards + flow to Penthouse spec ---- */
html.v2 .v2-work .xt-sector-grid { gap: 14px !important; }
html.v2 .v2-work .xt-sector-card {
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
html.v2 .v2-work .xt-sector-card:hover {
  border-color: var(--v2-blue) !important;
  transform: translateY(-1px);
}

/* chart chrome is INVISIBLE while it still sits inside the positions body
   (pre-relocation): kills the "second toolbar in the middle" flash during
   ticker re-search. The adapter adopts it into the stage the moment the
   canvas is populated. */
html.v2 .v2-work #rp-positions-body .xt-chart-header,
html.v2 .v2-work #rp-positions-body .xt-chart-canvas { display: none !important; }

/* ---- Deposit type menu: real gaps, real cards (Michael: "all collapsed
   linked") ---- */
html.v2 .v2-work .xt-deposit-types {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-top: 16px !important;
}
html.v2 .v2-work .xt-deposit-type-tile {
  padding: 18px !important;
  border-radius: 10px !important;
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line) !important;
  margin: 0 !important;
  transition: border-color 0.15s ease;
}
html.v2 .v2-work .xt-deposit-type-tile:hover { border-color: var(--v2-blue) !important; }
html.v2 .v2-work .xt-deposit-type-icon { margin-bottom: 10px !important; }
html.v2 .v2-work .xt-deposit-balance-card { margin-bottom: 16px !important; border-radius: 10px !important; }
html.v2 .v2-work .xt-deposit-header { margin-bottom: 12px !important; }

/* light theme parity for the 3k pieces */
html.v2 body.light-theme .v2-work #xt-panel-content .rp-section {
  background: transparent !important;
  border: none !important;
}
html.v2 body.light-theme .v2-work .xt-sector-card {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html.v2 body.light-theme .v2-work .xt-atb-position-badge.long { background: rgba(34, 160, 70, 0.12) !important; }
html.v2 body.light-theme .v2-work .xt-atb-position-badge.short { background: rgba(200, 60, 60, 0.10) !important; }

/* ============================================================
   PHASE 4 — STRATEGY BUILDER redesign (approved mockup
   claude.ai/code/artifact/269a757c). One fixed screen per step,
   zero page scroll; pick left, consequences right; CTA always
   visible. Pure CSS grid re-placement of V1's emitted DOM —
   every element keeps its id/onclick; V1 untouched.
   The floor is a CSS container: layout responds to the middle
   column's REAL width (Bill collapsed included), not the window.
   ============================================================ */
html.v2 .v2-work { container-type: inline-size; container-name: floor; }

/* THE BOTTOM BAND, measured on the live site (headless run 2026-08-05):
   V1 ships #xt-right-panel with padding-bottom:72px — space reserved for
   its old bottom action bar. That padding WAS the mystery dead zone at the
   bottom of every workspace view. Zeroed for good. */
html.v2 .v2-work #xt-right-panel { padding: 0 !important; }

/* ---- shared: step headings, compact ---- */
html.v2 .v2-work .xt-panel-section { margin: 0 !important; padding: 0 !important; }
html.v2 .v2-work .xt-right-panel-title { font-size: 17px !important; margin: 0 0 2px !important; }
html.v2 .v2-work .xt-right-panel-subtitle { font-size: 12px !important; color: var(--v2-muted) !important; margin: 0 !important; }

/* ---- shared: stepper bar to Penthouse spec ---- */
html.v2 #xt-right-panel .xt-right-panel-header {
  background: var(--v2-bg1) !important;
  border-bottom: 1px solid var(--v2-line) !important;
  padding: 8px 16px !important;
}
html.v2 .xt-step { gap: 6px !important; font-size: 10px !important; letter-spacing: 0.1em !important; font-weight: 600 !important; color: var(--v2-faint) !important; background: transparent !important; border: none !important; }
html.v2 .xt-step-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--v2-bg3) !important; border: 1px solid var(--v2-line-strong) !important; }
html.v2 .xt-step.active { color: var(--v2-blue) !important; }
html.v2 .xt-step.active .xt-step-dot { background: var(--v2-blue) !important; border-color: var(--v2-blue) !important; }
html.v2 .xt-step.completed { color: var(--v2-gain) !important; }
html.v2 .xt-step.completed .xt-step-dot { background: var(--v2-gain) !important; border-color: var(--v2-gain) !important; }
html.v2 .xt-step-connector { background: var(--v2-line-strong) !important; }
html.v2 .xt-step-connector.completed { background: var(--v2-gain) !important; }
html.v2 .xt-stepper-back {
  width: 28px !important; height: 28px !important; border-radius: 50% !important;
  background: transparent !important; border: 1px solid var(--v2-line-strong) !important;
  color: var(--v2-muted) !important;
}

/* ============================================================
   BUILDER DESK (2026-08-09) — Michael-approved desk concept.
   The wizard ENGINE (TradingFlowManager + step renderers) runs
   untouched; V2 retires its chrome. A persistent position strip
   (adapter-rendered, #v2-bstrip) replaces the stepper rail, and
   the four flow stages are re-skinned to the Penthouse graph-layer
   palette: stages sit on the deep chart-canvas gradient with a
   blue ambient glow; panels float on bg1 above it.
   Structural lessons carried over from the first builder pass:
   - :has() ownership chains (stale #xt-sector-grid hijack fix)
   - inline-display gating (#xt-stock-selection[style*="none"])
   - overflow guards on every stage grid (page must never scroll)
   ============================================================ */

/* ---- stage ground (Michael, visual pass 2): FLAT — no gradient, no glow.
   Dark = the exact chart-canvas black (#17171a, same as .xt-chart-canvas);
   light = --v2-bg0 (#f6f4f0), the same ground the Portfolio view sits on. ---- */
html.v2 { --v2-stage-bg: #17171a; }
html.v2 body.light-theme { --v2-stage-bg: #f6f4f0; }

/* ---- stage chrome: while a builder stage is active (adapter stamps
   data-v2-stage on the panel) the V1 header/stepper disappears and the
   strip is the only chrome; stage content sits on the deep canvas ---- */
html.v2 #xt-right-panel[data-v2-stage] .xt-right-panel-header { display: none !important; }
html.v2 #xt-right-panel[data-v2-stage] { display: flex !important; flex-direction: column !important; }
html.v2 #xt-right-panel[data-v2-stage] #xt-panel-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: var(--v2-stage-bg) !important;
}
html.v2 #xt-right-panel[data-v2-stage] .xt-right-panel-title { font-family: var(--v2-serif) !important; font-weight: 600 !important; }

/* ---- POSITION STRIP — the living portfolio, pinned above every stage.
   Rendered + refreshed by the adapter (live mirror of state.portfolio,
   same pattern as the equity pill). Hidden outside builder stages. ---- */
html.v2 #v2-bstrip { display: none; }
html.v2 #xt-right-panel[data-v2-stage] #v2-bstrip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: none;
  padding: 10px 16px;
  background: var(--v2-bg1);
  border-bottom: 1px solid var(--v2-line);
}
html.v2 .v2-bstrip-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
html.v2 .v2-bstrip-gap { flex: 1 1 8px; }
html.v2 .v2-bchip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--v2-line); border-radius: 9px;
  padding: 6px 11px; background: transparent; cursor: pointer;
  font-family: inherit; color: var(--v2-text); transition: border-color .15s;
}
html.v2 .v2-bchip:hover { border-color: var(--v2-line-strong); }
html.v2 .v2-bchip.on { border-color: var(--v2-blue); background: var(--v2-blue-dim); }
html.v2 .v2-bchip.pend { color: var(--v2-faint); cursor: default; border-style: dashed; }
html.v2 .v2-bchip.add { color: var(--v2-faint); font-size: 15px; line-height: 1; padding: 6px 11px; font-weight: 600; }
html.v2 .v2-bchip.add:hover { color: var(--v2-blue); border-color: var(--v2-blue); }
html.v2 .v2-bchip-cd { width: 7px; height: 7px; border-radius: 50%; flex: none; }
html.v2 .v2-bchip-sy { font-weight: 600; font-size: 12.5px; }
html.v2 .v2-bchip-al { font-size: 11.5px; color: var(--v2-muted); font-variant-numeric: tabular-nums; }
html.v2 .v2-bchip-st { width: 6px; height: 6px; border-radius: 50%; flex: none; }
html.v2 .v2-bchip-st.ok { background: var(--v2-gain); }
html.v2 .v2-bchip-st.todo { background: var(--v2-gold); }
/* hover-only remove × on position chips (Michael 2026-09-01) — takes no
   space until the chip is hovered so the strip stays clean */
html.v2 .v2-bchip-x {
  width: 0; overflow: hidden; opacity: 0;
  font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--v2-faint);
  transition: opacity .12s, width .12s;
  flex: none; text-align: center;
}
html.v2 .v2-bchip:hover .v2-bchip-x { width: 13px; opacity: 1; }
html.v2 .v2-bchip .v2-bchip-x:hover { color: var(--v2-loss); }
html.v2 .v2-bstrip-total { font-size: 11.5px; font-weight: 700; color: var(--v2-gain); white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; }
html.v2 .v2-bstrip-total:hover { text-decoration: underline; }
/* AUDIT FIX: over-allocated books read as an error, never a green check */
html.v2 .v2-bstrip-total.over { color: var(--v2-loss); }
html.v2 .v2-bstrip-sim {
  font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  border: none; border-radius: 9px; padding: 8px 18px; cursor: pointer;
  background: var(--v2-gold); color: #15130c;
}
html.v2 .v2-bstrip-sim:disabled { background: var(--v2-gold-dim); color: var(--v2-faint); cursor: default; }

/* ---- shared stage components ---- */
/* one calm primary action per stage — auto width, never a full-width wall */
html.v2 #xt-right-panel[data-v2-stage] .xt-btn-primary,
html.v2 #xt-right-panel[data-v2-stage] .xt-sector-cta button {
  background: var(--v2-blue) !important; color: #fff !important;
  border: none !important; border-radius: 9px !important;
  font-weight: 600 !important; font-size: 13px !important;
  height: 38px !important; width: auto !important; padding: 0 22px !important;
  box-shadow: none !important;
}
html.v2 #xt-right-panel[data-v2-stage] .xt-btn-primary:disabled,
html.v2 #xt-right-panel[data-v2-stage] .xt-sector-cta button:disabled { opacity: .45; }
/* pending chips are a to-do, not an emergency: amber quiet, no red alarms */
html.v2 #xt-right-panel[data-v2-stage] .xt-portfolio-strategy.needs-strategy,
html.v2 #xt-right-panel[data-v2-stage] .xt-strategy-current-status.needs {
  color: var(--v2-gold) !important; background: var(--v2-gold-dim) !important;
  border: none !important; border-radius: 6px !important;
  font-size: 11px !important; font-weight: 600 !important; padding: 3px 9px !important;
}
html.v2 #xt-right-panel[data-v2-stage] .xt-portfolio-strategy:not(.needs-strategy),
html.v2 #xt-right-panel[data-v2-stage] .xt-strategy-current-status:not(.needs) {
  color: var(--v2-gain) !important; background: var(--v2-gain-dim) !important;
  border: none !important; border-radius: 6px !important;
  font-size: 11px !important; font-weight: 600 !important; padding: 3px 9px !important;
}
/* allocation palette — MUST match the adapter's COLORS array (strip dots) */
html.v2 .v2-work .xt-allocation-segment.color-0, html.v2 .v2-work .xt-portfolio-color.color-0 { background: #2f9df2 !important; }
html.v2 .v2-work .xt-allocation-segment.color-1, html.v2 .v2-work .xt-portfolio-color.color-1 { background: #d4af37 !important; }
html.v2 .v2-work .xt-allocation-segment.color-2, html.v2 .v2-work .xt-portfolio-color.color-2 { background: #2fbf71 !important; }
html.v2 .v2-work .xt-allocation-segment.color-3, html.v2 .v2-work .xt-portfolio-color.color-3 { background: #b07cd8 !important; }
html.v2 .v2-work .xt-allocation-segment.color-4, html.v2 .v2-work .xt-portfolio-color.color-4 { background: #e58a4d !important; }
html.v2 .v2-work .xt-allocation-segment.color-5, html.v2 .v2-work .xt-portfolio-color.color-5 { background: #5bc8c8 !important; }
/* AUDIT FIX: positions 7-8 exist (custom tickers up to MAX_PORTFOLIO_ITEMS=8)
   — without these, V1 candy pink/teal leaked through AND the strip's dots
   diverged from the bar. Rose + sea-teal, no loss/muted collisions. */
html.v2 .v2-work .xt-allocation-segment.color-6, html.v2 .v2-work .xt-portfolio-color.color-6 { background: #d86ba3 !important; }
html.v2 .v2-work .xt-allocation-segment.color-7, html.v2 .v2-work .xt-portfolio-color.color-7 { background: #4db6ac !important; }
html.v2 .v2-work .xt-allocation-segment.cash, html.v2 .v2-work .xt-portfolio-color.cash { background: var(--v2-bg3) !important; }

/* ============ STAGE — MARKETS: sector nav + stock browser ============ */
/* MEASURED FIX (headless run): a stale #xt-sector-grid node can survive in
   the panel after leaving the step, and the ID inside :has() outranks the
   later steps' class rules — hijacking their whole layout. The :not chain
   makes each step's content the exclusive owner.
   AUDIT FIX: the chain lives in :where() (zero specificity) so this base
   rule TIES the @container tier selectors below instead of outranking them
   — without it, narrow floors kept the two-pane grid with an unscrollable
   sector list while every other stage stacked correctly. */
html.v2 .v2-work #xt-panel-content:has(#xt-sector-grid):where(:not(:has(.xt-portfolio-builder)):not(:has(.xt-strategy-builder)):not(:has(.xt-simulation)):not(:has(.xt-trading-setup))) {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px 18px;
  height: 100% !important;
  overflow: hidden !important;
  padding: 22px 22px 16px !important;
}
/* the CTA has no business on screen before a sector is picked (Michael):
   V1 hides #xt-stock-selection until >=1 sector — same signal hides the CTA.
   visibility (not display): the CTA row keeps its height BEFORE a sector is
   picked, so the cards don't shrink the moment it pops in. */
html.v2 .v2-work #xt-panel-content:has(#xt-sector-grid):has(#xt-stock-selection[style*="none"]) .xt-sector-cta { visibility: hidden !important; }
html.v2 .v2-work #xt-panel-content:has(#xt-sector-grid) > .xt-panel-section { grid-area: 1 / 1; }
html.v2 .v2-work #xt-sector-grid {
  grid-area: 2 / 1 / 3 / 2;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(max-content, 1fr);
  align-content: stretch;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
  /* scroll container clips the selected card's outline at the edges —
     grow the clip box 3px outward, padding compensates */
  margin: -3px;
  padding: 3px;
}
/* sector tiles: quiet hairline panels, monochrome icons — accent only
   when chosen (kills the V1 candy icon circles) */
html.v2 .v2-work .xt-sector-card {
  padding: 12px !important; margin: 0 !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color .15s;
}
html.v2 .v2-work .xt-sector-card:hover { border-color: var(--v2-line-strong) !important; background: var(--v2-bg1) !important; transform: none !important; }
html.v2 .v2-work .xt-sector-card.selected { border-color: var(--v2-blue) !important; background: var(--v2-blue-dim) !important; }
html.v2 .v2-work .xt-sector-icon {
  width: 32px !important; height: 32px !important; border-radius: 8px !important;
  background: var(--v2-bg2) !important; color: var(--v2-muted) !important;
  border: none !important; box-shadow: none !important;
}
html.v2 .v2-work .xt-sector-card.selected .xt-sector-icon { background: transparent !important; color: var(--v2-blue) !important; }
html.v2 .v2-work .xt-sector-card h3 { font-size: 13px !important; margin: 0 0 3px !important; color: var(--v2-text) !important; }
html.v2 .v2-work .xt-sector-card p { font-size: 10.5px !important; margin: 2px 0 0 !important; line-height: 1.5 !important; }
html.v2 .v2-work .xt-sector-tickers { color: var(--v2-muted) !important; }
html.v2 .v2-work .xt-sector-desc { color: var(--v2-faint) !important; }
/* stock browser: watchlist-style rows on a floating panel */
html.v2 .v2-work #xt-stock-selection { grid-area: 2 / 2 / 3 / 3; min-height: 0; }
html.v2 .v2-work #xt-stock-selection:not([style*="none"]) {
  display: flex !important;
  flex-direction: column !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  margin: 0 !important;
  overflow: hidden;
}
html.v2 .v2-work .xt-stock-header { flex: none; display: flex !important; align-items: baseline; margin: 0 0 6px !important; }
html.v2 .v2-work .xt-stock-header h3 { font-size: 10px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--v2-muted) !important; margin: 0 !important; }
html.v2 .v2-work #xt-selected-count { margin-left: auto; font-size: 10px !important; font-weight: 700; color: var(--v2-blue) !important; background: var(--v2-blue-dim); border-radius: 5px; padding: 3px 8px; }
html.v2 .v2-work #xt-stock-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; max-height: none !important; }
html.v2 .v2-work .xt-stock-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  padding: 9px 4px !important;
  margin: 0 !important;
}
html.v2 .v2-work .xt-stock-item:last-child { border-bottom: none !important; }
html.v2 .v2-work .xt-stock-item.selected {
  background: var(--v2-blue-dim) !important;
  border-radius: 8px !important;
  border-bottom-color: transparent !important;
}
html.v2 .v2-work .xt-stock-symbol { color: var(--v2-text) !important; font-weight: 600 !important; }
html.v2 .v2-work .xt-stock-sector { color: var(--v2-faint) !important; font-size: 11px !important; }
html.v2 .v2-work .xt-stock-check {
  width: 18px !important; height: 18px !important;
  border: 1px solid var(--v2-line-strong) !important; border-radius: 50% !important;
  background: transparent !important; color: transparent !important;
  display: grid !important; place-items: center !important; font-size: 11px !important;
}
html.v2 .v2-work .xt-stock-item.selected .xt-stock-check {
  background: var(--v2-blue) !important; border-color: var(--v2-blue) !important; color: #fff !important;
}
html.v2 .v2-work .xt-custom-ticker { flex: none; display: flex !important; gap: 8px; margin: 10px 0 0 !important; }
html.v2 .v2-work .xt-custom-ticker input {
  background: var(--v2-bg2) !important; border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important; color: var(--v2-text) !important;
  min-width: 0 !important; flex: 1 1 auto !important;   /* the Add button must never clip */
}
html.v2 .v2-work .xt-custom-ticker button { flex: none !important; }
html.v2 .v2-work .xt-custom-ticker button {
  background: transparent !important; color: var(--v2-muted) !important;
  border: 1px solid var(--v2-line-strong) !important; border-radius: 8px !important;
}
html.v2 .v2-work .xt-sector-cta { grid-area: 3 / 2; margin: 0 !important; padding: 0 !important; position: static !important; display: flex !important; justify-content: flex-end; }

/* ============ STAGE — LEDGER: portfolio allocation ============ */
html.v2 .v2-work #xt-panel-content:has(.xt-portfolio-builder) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 22px 22px 16px !important;
  gap: 16px;
}
html.v2 .v2-work #xt-panel-content:has(.xt-portfolio-builder) > .xt-panel-section { flex: none; }
html.v2 .v2-work .xt-portfolio-builder {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  /* full-width ledger (mockup): bar on top, rows across, add + total below */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px 18px;
  overflow: hidden !important;   /* structural guard: can never grow the page */
}
html.v2 .v2-work .xt-allocation-bar {
  grid-area: 1 / 1 / 2 / 3; align-self: start; margin: 0 !important;
  height: 22px !important; border-radius: 6px !important; overflow: hidden !important;
}
html.v2 .v2-work .xt-allocation-bar > div { font-size: 9.5px !important; letter-spacing: 0.04em; }
html.v2 .v2-work .xt-portfolio-list {
  grid-area: 2 / 1 / 3 / 3;
  overflow-y: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  padding: 4px 16px !important;
}
/* ledger rows: hairline dividers, no boxed cards */
html.v2 .v2-work .xt-portfolio-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 11px 2px !important;
}
html.v2 .v2-work .xt-portfolio-item:last-child { border-bottom: none !important; }
html.v2 .v2-work .xt-portfolio-symbol { color: var(--v2-text) !important; font-weight: 600 !important; }
html.v2 .v2-work .xt-portfolio-name { color: var(--v2-faint) !important; font-size: 11.5px !important; }
html.v2 .v2-work .xt-allocation-input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--v2-line-strong) !important;
  border-radius: 0 !important;
  color: var(--v2-text) !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}
html.v2 .v2-work .xt-allocation-percent { color: var(--v2-muted) !important; }
html.v2 .v2-work .xt-portfolio-remove {
  background: none !important; border: none !important; color: var(--v2-faint) !important;
}
html.v2 .v2-work .xt-portfolio-remove:hover { color: var(--v2-loss) !important; }
html.v2 .v2-work .xt-cash-rate input {
  background: var(--v2-bg2) !important; border: 1px solid var(--v2-line) !important;
  border-radius: 6px !important; color: var(--v2-text) !important;
}
html.v2 .v2-work .xt-portfolio-add { grid-area: 3 / 1; display: flex !important; gap: 8px; margin: 0 !important; }
html.v2 .v2-work .xt-portfolio-add input {
  background: var(--v2-bg2) !important; border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important; color: var(--v2-text) !important;
}
html.v2 .v2-work .xt-portfolio-add button {
  background: transparent !important; color: var(--v2-muted) !important;
  border: 1px solid var(--v2-line-strong) !important; border-radius: 8px !important;
}
html.v2 .v2-work .xt-portfolio-footer {
  grid-area: 3 / 2;
  align-self: center;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
}
html.v2 .v2-work .xt-total-badge { border: none !important; border-radius: 6px !important; font-weight: 700 !important; }
html.v2 .v2-work .xt-total-badge.valid { color: var(--v2-gain) !important; background: var(--v2-gain-dim) !important; }
html.v2 .v2-work #xt-panel-content:has(.xt-portfolio-builder) > .xt-btn-primary {
  flex: none;
  align-self: flex-end;
  margin: 0 !important;
}

/* ============ STAGE — DOSSIER: strategy library + proof ============ */
html.v2 .v2-work #xt-panel-content:has(.xt-strategy-builder) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 20px 22px 14px !important;
  gap: 12px;
}
html.v2 .v2-work #xt-panel-content:has(.xt-strategy-builder) > .xt-panel-section { flex: none; }
html.v2 .v2-work .xt-strategy-builder {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 12px 16px;
  overflow: hidden !important;   /* structural guard: can never grow the page */
}
/* ticker + timeframe chips: one segmented language */
html.v2 .v2-work .xt-strategy-tabs { grid-area: 1 / 1; display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 !important; }
html.v2 .v2-work .xt-strategy-tab {
  background: transparent !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 8px !important;
  color: var(--v2-muted) !important;
  font-weight: 600 !important; font-size: 12px !important;
  padding: 6px 14px !important;
}
html.v2 .v2-work .xt-strategy-tab.active {
  background: var(--v2-blue-dim) !important;
  border-color: var(--v2-blue) !important;
  color: var(--v2-blue) !important;
}
html.v2 .v2-work .xt-strategy-tab.assigned::after {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--v2-gain); margin-left: 7px;
}
html.v2 .v2-work .xt-strategy-counter { font-size: 11px !important; color: var(--v2-muted) !important; }
html.v2 .v2-work .xt-strategy-timeframes { grid-area: 1 / 2; justify-self: end; align-self: center; display: flex !important; gap: 6px; margin: 0 !important; }
html.v2 .v2-work .xt-timeframe-btn {
  background: transparent !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 7px !important;
  color: var(--v2-muted) !important;
  font-weight: 600 !important; font-size: 11.5px !important;
  padding: 5px 12px !important;
}
html.v2 .v2-work .xt-timeframe-btn.active {
  background: var(--v2-blue-dim) !important;
  border-color: var(--v2-blue) !important;
  color: var(--v2-blue) !important;
}
/* context line: symbol · alloc · status — quiet, no numbered badge */
html.v2 .v2-work .xt-strategy-current {
  grid-area: 2 / 1 / 3 / 3;
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
}
html.v2 .v2-work .xt-strategy-current-badge { display: none !important; }
html.v2 .v2-work .xt-strategy-current-header { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; }
html.v2 .v2-work .xt-strategy-current-symbol { font-weight: 700 !important; color: var(--v2-text) !important; }
html.v2 .v2-work .xt-strategy-current-alloc { color: var(--v2-muted) !important; font-variant-numeric: tabular-nums; }
html.v2 .v2-work .xt-strategy-current-hint { margin: 0 0 0 auto !important; font-size: 11.5px !important; color: var(--v2-faint) !important; }
/* library tabs: underline, not pills */
html.v2 .v2-work .xt-strategy-tab-bar { grid-area: 3 / 1; display: flex !important; gap: 18px; margin: 0 !important; align-self: end; border-bottom: 1px solid var(--v2-line); }
html.v2 .v2-work .xt-strategy-tab-btn {
  background: none !important; border: none !important;
  border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  color: var(--v2-muted) !important; font-weight: 600 !important; font-size: 12.5px !important;
  padding: 7px 2px !important; margin-bottom: -1px !important;
}
html.v2 .v2-work .xt-strategy-tab-btn.active { color: var(--v2-text) !important; border-bottom-color: var(--v2-blue) !important; background: none !important; }
html.v2 .v2-work .xt-strategy-tab-content { grid-area: 4 / 1; min-height: 0; margin: 0 !important; }
html.v2 .v2-work .xt-strategy-tab-content:not([style*="none"]) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
}
html.v2 .v2-work .xt-preset-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; max-height: none !important; }
/* library rows: hairline list, monochrome icons, surfaced descriptions
   (.v2-strat-desc injected by the adapter from AVAILABLE_STRATEGIES) */
html.v2 .v2-work .xt-preset-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--v2-line) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 9px 8px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
}
html.v2 .v2-work .xt-preset-item:hover { background: var(--v2-bg1) !important; }
html.v2 .v2-work .xt-preset-item.selected { background: var(--v2-blue-dim) !important; border-radius: 8px !important; border-bottom-color: transparent !important; }
html.v2 .v2-work .xt-preset-icon { background: transparent !important; color: var(--v2-faint) !important; }
html.v2 .v2-work .xt-preset-item.selected .xt-preset-icon { color: var(--v2-blue) !important; }
html.v2 .v2-work .xt-preset-name { font-size: 13px !important; font-weight: 600 !important; color: var(--v2-text) !important; flex: none !important; }
html.v2 .v2-work .v2-strat-desc {
  font-size: 11px; color: var(--v2-faint);
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* V1 renders the ✓ node on EVERY row and hides it by color — keep it
   invisible until the row is actually selected */
html.v2 .v2-work .xt-preset-check { margin-left: auto !important; color: var(--v2-blue) !important; opacity: 0 !important; }
html.v2 .v2-work .xt-preset-item.selected .xt-preset-check { opacity: 1 !important; }
/* quick picks (Create with Bill): quiet tiles, gold improve */
html.v2 .v2-work .xt-quick-pick-cards { flex: none; }
html.v2 .v2-work .xt-quick-card {
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
}
html.v2 .v2-work .xt-quick-card:hover { border-color: var(--v2-line-strong) !important; }
html.v2 .v2-work .xt-quick-card.selected { border-color: var(--v2-blue) !important; background: var(--v2-blue-dim) !important; }
html.v2 .v2-work .xt-quick-card-icon { background: var(--v2-bg2) !important; color: var(--v2-muted) !important; border-radius: 8px !important; }
html.v2 .v2-work .xt-quick-card-name { color: var(--v2-text) !important; }
html.v2 .v2-work .xt-quick-card-desc { color: var(--v2-faint) !important; }
html.v2 .v2-work .xt-quick-actions { flex: none; display: flex !important; gap: 8px; margin-top: 10px !important; }
html.v2 .v2-work .xt-btn-improve {
  background: transparent !important; color: var(--v2-gold) !important;
  border: 1px solid var(--v2-gold) !important; border-radius: 8px !important;
}
html.v2 .v2-work .xt-btn-undo {
  background: transparent !important; color: var(--v2-muted) !important;
  border: 1px solid var(--v2-line-strong) !important; border-radius: 8px !important;
}
/* backtest strip: the proof readout — serif verdict figures.
   The constellation/loading rules below are KEPT VERBATIM (Michael). */
html.v2 .v2-work .xt-backtest-results {
  grid-area: 3 / 2;
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  min-height: 46px;
  flex-wrap: wrap;               /* narrow proof column: values flow, never clip */
}
html.v2 .v2-work .xt-backtest-header { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; flex: none; }
html.v2 .v2-work .xt-backtest-title { font-size: 10px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-muted) !important; }
html.v2 .v2-work .xt-backtest-signal {
  font-size: 10px !important; font-weight: 700 !important;
  background: var(--v2-bg2) !important; color: var(--v2-muted) !important;
  border: 1px solid var(--v2-line) !important; border-radius: 6px !important;
  padding: 2px 8px !important;
}
html.v2 .v2-work .xt-backtest-metrics {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 0 auto !important;
  grid-template-columns: none !important;
}
html.v2 .v2-work .xt-backtest-metric { display: flex !important; align-items: baseline; gap: 5px; text-align: left !important; padding: 0 !important; background: transparent !important; border: none !important; }
/* figures in IBM Plex Mono — same as every other number in the system
   (equity pill, watchlist prices, positions). Serif stays for TITLES only. */
html.v2 .v2-work .xt-backtest-metric-value { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-size: 14px !important; font-variant-numeric: tabular-nums; }
html.v2 .v2-work .xt-backtest-metric-label { font-size: 9px !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-faint) !important; margin: 0 !important; }
/* generation/backtest LOADING renders INSIDE the same compact strip:
   one centered line (spinner · message · Cancel), never a tall box */
html.v2 .v2-work .xt-backtest-results .xt-strategy-loading {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
html.v2 .v2-work .xt-backtest-results .xt-strategy-loading > div { margin: 0 !important; }
html.v2 .v2-work .xt-strategy-spinner { width: 18px !important; height: 18px !important; margin: 0 !important; border-width: 2px !important; }
html.v2 .v2-work .xt-backtest-results .xt-loading-cancel { margin: 0 !important; height: 28px !important; padding: 0 14px !important; border-radius: 7px !important; }
html.v2 .v2-work .xt-backtest-results .xt-backtest-loading { margin: 0 auto !important; padding: 0 !important; }
/* the "Running backtest for SYM..." injection is a CLASS-LESS inline div
   (app-ui.js:4785) — same treatment: one centered row inside the strip */
html.v2 .v2-work .xt-backtest-results > div:not([class]) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: left !important;
}
html.v2 .v2-work .xt-backtest-results > div:not([class]) > div { margin: 0 !important; }
/* custom code editor: unchanged behavior, Penthouse chrome */
html.v2 .v2-work .xt-advanced-section {
  grid-area: 4 / 2;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden;
  margin: 0 !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
}
html.v2 .v2-work .xt-advanced-header { flex: none; }
/* collapsed: hug the header — an empty full-height panel reads as a bug */
html.v2 .v2-work .xt-advanced-section:not(.expanded) { align-self: start; }
html.v2 .v2-work .xt-advanced-section.expanded .xt-advanced-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  /* kill V1's collapse-animation max-height AND clip hard — the python
     frame must never push the page (Michael: "no scroll down") */
  max-height: none !important;
  overflow: hidden !important;
}
html.v2 .v2-work .xt-code-editor { flex: 1 1 auto; min-height: 0; display: flex !important; flex-direction: column !important; overflow: hidden !important; gap: 8px; }
/* editor children must NOT stretch — only the code area flexes */
html.v2 .v2-work .xt-code-editor > * { flex: none !important; }
html.v2 .v2-work .xt-code-editor > .xt-code-area { flex: 1 1 auto !important; }
html.v2 .v2-work #xt-strategy-name-input { height: 34px !important; min-height: 0 !important; }
html.v2 .v2-work .xt-code-area {
  flex: 1 1 auto !important;
  min-height: 70px !important;
  max-height: 300px !important;   /* hard cap — long generated code scrolls INSIDE this frame */
  overflow: auto !important;
}
html.v2 .v2-work .xt-code-chat { flex: none; display: flex !important; gap: 8px; }
html.v2 .v2-work .xt-llm-response { flex: none; }
html.v2 .v2-work .xt-code-actions { flex: none; display: flex !important; gap: 8px; }
html.v2 .v2-work .xt-strategy-assign { grid-area: 5 / 1 / 6 / 3; margin: 0 !important; display: flex !important; justify-content: flex-end; }

/* ============ STAGE — REPORT: graph hero, serif figures ============ */
html.v2 .v2-work #xt-panel-content:has(.xt-simulation) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 20px 22px 14px !important;
  gap: 12px;
}
html.v2 .v2-work #xt-panel-content:has(.xt-simulation) > .xt-panel-section { flex: none; }
html.v2 .v2-work .xt-simulation {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: minmax(0, 1.25fr) auto minmax(0, 1fr);
  gap: 12px 16px;
  overflow: hidden !important;   /* structural guard: can never grow the page */
}
/* the position graph is the HERO — full width, untouched renderer */
html.v2 .v2-work .xt-sim-chart-section {
  grid-area: 1 / 1 / 2 / 3;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  margin: 0 !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}
html.v2 .v2-work .xt-sim-chart-title { flex: none; margin-bottom: 8px; font-size: 10px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-muted) !important; }
/* the graph stays INSIDE its frame: clip the canvas to the rounded border */
html.v2 .v2-work .xt-sim-chart {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 190px !important;
  max-height: none !important;
  overflow: hidden !important;
  border-radius: 8px;
}
/* serif stat tiles under the hero */
html.v2 .v2-work .xt-sim-metrics {
  grid-area: 2 / 1 / 3 / 3;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px;
  margin: 0 !important;
}
html.v2 .v2-work .xt-sim-metric-card {
  padding: 11px 14px !important; margin: 0 !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  text-align: left !important;
}
html.v2 .v2-work .xt-sim-metric-icon { display: none !important; }
html.v2 .v2-work .xt-sim-metric-value { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-size: 19px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html.v2 .v2-work .xt-sim-metric-label { font-size: 10px !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-faint) !important; }
/* bottom row: per-asset table left, calculator card right */
html.v2 .v2-work .xt-sim-positions {
  grid-area: 3 / 1;
  overflow-y: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
}
html.v2 .v2-work .xt-sim-position-row { border-bottom: 1px solid var(--v2-line) !important; background: transparent !important; }
html.v2 .v2-work .xt-sim-position-row:last-child { border-bottom: none !important; }
html.v2 .v2-work .xt-sim-position-symbol { color: var(--v2-blue) !important; text-decoration: none !important; font-weight: 600 !important; }
html.v2 .v2-work .xt-sim-position-strategy { color: var(--v2-muted) !important; }
html.v2 .v2-work .xt-sim-calculator {
  grid-area: 3 / 2;
  overflow-y: auto; min-height: 0; margin: 0 !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}
html.v2 .v2-work .xt-sim-calc-title { font-size: 10px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-muted) !important; }
html.v2 .v2-work .xt-sim-calc-input {
  background: var(--v2-bg2) !important; border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important; color: var(--v2-text) !important;
  font-variant-numeric: tabular-nums;
}
html.v2 .v2-work .xt-sim-leverage input {
  width: 48px !important; height: 30px !important; text-align: center;
  background: var(--v2-bg2) !important; border: 1px solid var(--v2-line) !important;
  border-radius: 7px !important; color: var(--v2-text) !important;
}
html.v2 .v2-work .xt-sim-leverage-preset {
  background: transparent !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-radius: 7px !important;
  color: var(--v2-muted) !important;
  font-weight: 600 !important;
}
html.v2 .v2-work .xt-sim-leverage-preset.active {
  background: var(--v2-blue-dim) !important;
  border-color: var(--v2-blue) !important;
  color: var(--v2-blue) !important;
}
html.v2 .v2-work .xt-sim-calc-result-value { font-family: 'IBM Plex Mono', ui-monospace, monospace !important; font-size: 18px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html.v2 .v2-work .xt-sim-calc-result-label { font-size: 10px !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-faint) !important; }
/* the payoff action is GOLD — taking it live */
html.v2 .v2-work #xt-panel-content:has(.xt-simulation) > div:last-child { flex: none; padding: 2px 0 0 !important; display: flex !important; justify-content: flex-end; }
html.v2 .v2-work #xt-panel-content:has(.xt-simulation) > div:last-child .xt-btn-primary {
  background: var(--v2-gold) !important; color: #15130c !important;
  width: auto !important; height: 40px !important; border-radius: 9px !important;
  font-weight: 700 !important;
}

/* ============ STAGE 5 — TRADE SETUP: unchanged from first pass ============ */
html.v2 .v2-work #xt-panel-content:has(.xt-trading-setup) {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 24px 22px 18px !important;
  gap: 16px;
}
html.v2 .v2-work #xt-panel-content:has(.xt-trading-setup) > .xt-panel-section { flex: none; }
/* Michael (visual pass 2): no full-width bottom bar. Start Trading sits in
   the right column just under the summary ("Initial Capital") frame, its
   bottom edge flush with the leverage card via align-self:end on row 2. */
html.v2 .v2-work .xt-trading-setup {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px;
  overflow: hidden !important;   /* structural guard: can never grow the page */
}
html.v2 .v2-work .xt-trading-budget { grid-area: 1 / 1; margin: 0 !important; }
html.v2 .v2-work .xt-trading-leverage { grid-area: 2 / 1; margin: 0 !important; }
html.v2 .v2-work .xt-trading-summary {
  grid-area: 1 / 2;
  align-self: start;
  margin: 0 !important;
}
html.v2 .v2-work .xt-trading-start {
  grid-area: 2 / 2;
  align-self: end;               /* bottom flush with the leverage card */
  height: 44px !important;
  width: 100% !important;        /* the summary frame's width, not the page's */
  border-radius: 9px !important;
  margin: 0 !important;
}

/* ============ RESPONSIVE — container queries on the floor ============ */
@container floor (max-width: 980px) {
  html.v2 .v2-work #xt-panel-content:has(#xt-sector-grid),
  html.v2 .v2-work #xt-panel-content:has(.xt-portfolio-builder),
  html.v2 .v2-work #xt-panel-content:has(.xt-strategy-builder),
  html.v2 .v2-work #xt-panel-content:has(.xt-simulation),
  html.v2 .v2-work #xt-panel-content:has(.xt-trading-setup) { padding: 12px !important; gap: 9px; }
  html.v2 .v2-work .xt-right-panel-title { font-size: 15px !important; }
  html.v2 .v2-work .xt-right-panel-subtitle { font-size: 11px !important; }
  html.v2 .v2-work .xt-strategy-builder { grid-template-columns: 232px minmax(0, 1fr); gap: 8px 10px; }
  html.v2 .v2-work #xt-panel-content:has(#xt-sector-grid) { grid-template-columns: 1.15fr 1fr; }
  html.v2 .v2-work .xt-simulation { grid-template-columns: 1.25fr 1fr; }
  html.v2 .v2-work .xt-backtest-metrics { gap: 10px; }
  html.v2 .v2-work .xt-strategy-current-hint { display: none !important; }
  html.v2 .v2-work .v2-strat-desc { display: none; }
}
@container floor (max-width: 520px) {
  /* MEASURED FIX (desk rebuild): this was max-width:700px — but the floor
     container is ~663px at a 1440 desktop, so the stack block was ACTIVE on
     desktop and silently defeated every stage grid below it (same selector,
     later in file). 520px keeps the desk two-pane at real desktop widths;
     only genuinely narrow floors stack. */
  /* columns stack; ONLY the panel scrolls internally — never the page */
  html.v2 .v2-work #xt-panel-content:has(#xt-sector-grid),
  html.v2 .v2-work #xt-panel-content:has(.xt-portfolio-builder),
  html.v2 .v2-work #xt-panel-content:has(.xt-strategy-builder),
  html.v2 .v2-work #xt-panel-content:has(.xt-simulation),
  html.v2 .v2-work #xt-panel-content:has(.xt-trading-setup) {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    height: 100% !important;
  }
  html.v2 .v2-work .xt-portfolio-builder,
  html.v2 .v2-work .xt-strategy-builder,
  html.v2 .v2-work .xt-simulation,
  html.v2 .v2-work .xt-trading-setup,
  html.v2 .v2-work #xt-sector-grid { display: flex !important; flex-direction: column !important; gap: 10px; overflow: visible !important; }
  html.v2 .v2-work #xt-sector-grid { flex-direction: column !important; }
  html.v2 .v2-work #xt-stock-selection:not([style*="none"]) { max-height: 320px; }
  html.v2 .v2-work .xt-preset-list { max-height: 240px !important; }
  html.v2 .v2-work .xt-sim-chart { min-height: 180px !important; }
}

/* ============================================================
   PHASE 3n — mockup diff round (Michael's side-by-side): paired
   Ticker|Side row, $/× value affixes, fine-print line, form trim
   ============================================================ */

/* Ticker + Side share one row — EQUAL widths (Michael's final call),
   same 8px gap as the Amount/Leverage grid so all columns align */
html.v2 .v2-work .v2-row-pair {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
html.v2 .v2-work .v2-row-pair > * { min-width: 0 !important; margin: 0 !important; }
html.v2 .v2-work .v2-side-box {
  display: flex;
  align-items: center;
  height: 34px;
  background: var(--v2-bg3) !important;
  border: 1px solid var(--v2-line-strong);
  border-radius: 8px;
  padding: 0 10px 0 12px;
  box-sizing: border-box;
}
html.v2 .v2-work .v2-side-box::before {
  content: 'Side';
  font-size: 10px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--v2-muted);
  margin-right: auto;
}
html.v2 .v2-work #v2-side-val { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; }
html.v2 .v2-work #v2-side-val.long { color: var(--v2-gain); }
html.v2 .v2-work #v2-side-val.short { color: var(--v2-loss); }
html.v2 body.light-theme .v2-work .v2-side-box { background: var(--v2-bg2) !important; }

/* $ prefix on Amount, × suffix on Leverage — pseudo flex items, no JS.
   Leverage's input stops stretching so "5×" reads as one token; the ×
   carries margin-right:auto to pin −/+ at the right edge. */
html.v2 .v2-work .sidebar-trade-stepper input { font-weight: 600 !important; }
/* ticker input: SAME face as the Amount/Leverage values below (Michael:
   placeholder and Amount must share font, alignment and bold) — bold mono
   12.5px, left-aligned; placeholder explicitly mirrors the input so no V1
   ::placeholder rule can drift it */
html.v2 .v2-work .sidebar-trade-row input {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}
html.v2 .v2-work .sidebar-trade-row input::placeholder {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
  color: var(--v2-faint) !important;
  opacity: 1;
}
/* ID-level insurance: nothing can ever right-align this input */
html.v2 .v2-work #sidebar-trade-ticker {
  text-align: left !important;
  direction: ltr !important;
}
/* no blue wash while searching/selected: neutralize V1 focus/disabled
   backgrounds AND Chrome's autofill tint (the "kind of background blue") */
html.v2 .v2-work .sidebar-trade-row input:focus,
html.v2 .v2-work .sidebar-trade-row input:disabled {
  background: transparent !important;
}
html.v2 .v2-work .sidebar-trade-row input:-webkit-autofill,
html.v2 .v2-work .sidebar-trade-row input:-webkit-autofill:hover,
html.v2 .v2-work .sidebar-trade-row input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px var(--v2-bg3) inset !important;
  -webkit-text-fill-color: var(--v2-text) !important;
  transition: background-color 99999s ease-out 0s;
}
html.v2 .v2-work .sidebar-trade-stepper:has(#sidebar-trade-amount)::before {
  content: '$';
  order: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v2-text);
}
html.v2 .v2-work .sidebar-trade-stepper:has(#sidebar-trade-amount) input { padding-left: 0 !important; }
html.v2 .v2-work .sidebar-trade-stepper:has(#sidebar-trade-leverage) input {
  flex: 0 0 auto !important;
  width: 2.6ch !important;
  min-width: 0 !important;
  text-align: right !important;   /* digits hug the × — "5×", not "5  ×" */
}
html.v2 .v2-work .sidebar-trade-stepper:has(#sidebar-trade-leverage)::after {
  content: '×';
  order: 1;
  margin-right: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v2-text);
}

/* fine-print line under the buttons (adapter injects; relocateSound()
   parks the speaker toggle at its start) */
html.v2 .v2-work .v2-fineprint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--v2-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.v2 .v2-work .v2-fineprint .trade-sound-toggle { flex: none; }

/* form card trim: no "MANUAL TRADING" title (mockup has none — the sound
   toggle it hosted moves to the fine-print), no empty price-line gap */
html.v2 .v2-work .rp-section:has(.sidebar-trade-grid) > .rp-section-title { display: none !important; }
html.v2 .v2-work #sidebar-trade-price:empty { display: none !important; }

/* Strategy Ready row1 geometry per mockup: [SYM][tf·strategy]----[dot];
   dot never overlaps the text */
html.v2 .v2-ready-slot .strat-trending-row1 { padding-right: 14px !important; }
html.v2 .v2-ready-slot .strat-trending-tf { margin-left: 0 !important; margin-right: auto !important; }

/* ============================================================
   PHASE 3q (rewritten) — Bill's reasoning panel. ROOT CAUSE: V1
   scopes EVERY reasoning rule under `.bubble ...`, but the panel
   element is appended OUTSIDE the bubble ("out of the object"),
   so in V2's column half the rules never matched — unstyled
   spans collapsing onto one line. This block is SELF-SUFFICIENT:
   no .bubble ancestry required, proper row spacing, and the
   panel is its own card so it reads as part of the response.
   ============================================================ */
html.v2 .xt-reasoning-panel {
  display: block;
  margin: 8px 0 4px !important;
  padding: 12px 14px !important;
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 10px !important;
  max-width: 100%;
  overflow: hidden;
}
html.v2 .xt-reasoning-panel > summary {
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--v2-muted);
  list-style: none;
}
html.v2 .xt-reasoning-body { margin-top: 12px; }
/* ONE CATEGORY PER LINE, guaranteed: no shared grid, no display:contents
   (something kept interfering with those). Each row is its own block-level
   flex line — rows physically cannot overlap or share a line. Alignment
   across rows comes from the fixed label width. Everything force-reset to
   static flow. */
html.v2 .xt-reasoning-categories { display: block !important; margin-bottom: 12px !important; }
html.v2 .xt-cat-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 9px !important;   /* the line spacing between each */
  position: static !important;
  float: none !important;
  width: 100% !important;
}
html.v2 .xt-cat-row:last-child { margin-bottom: 0 !important; }
html.v2 .xt-cat-label {
  flex: 0 0 88px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px !important;
  color: var(--v2-text) !important;
  position: static !important;
  margin: 0 !important;
}
html.v2 .xt-cat-bars {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  gap: 3px !important;
  align-items: center !important;
  position: static !important;
  margin: 0 !important;
}
html.v2 .xt-cat-bar {
  display: inline-block !important;
  width: 9px !important;
  height: 10px !important;
  border-radius: 1px !important;
  background: var(--v2-bg3) !important;
}
html.v2 .xt-cat-row[data-direction="bullish"] .xt-cat-bar:not(.muted) { background: var(--v2-gain) !important; }
html.v2 .xt-cat-row[data-direction="bearish"] .xt-cat-bar:not(.muted) { background: var(--v2-loss) !important; }
html.v2 .xt-cat-row[data-direction="neutral"] .xt-cat-bar:not(.muted) { background: var(--v2-muted) !important; }
html.v2 .xt-cat-bar.muted { background: var(--v2-bg3) !important; }
html.v2 .xt-cat-dir {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right !important;
  font-size: 11.5px !important;
  color: var(--v2-muted) !important;
  position: static !important;
  margin: 0 !important;
}
html.v2 .xt-cat-row[data-direction="bullish"] .xt-cat-dir { color: var(--v2-gain) !important; }
html.v2 .xt-cat-row[data-direction="bearish"] .xt-cat-dir { color: var(--v2-loss) !important; }
html.v2 .xt-reasoning-section-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--v2-muted);
  margin: 0 0 6px;
}
html.v2 .xt-reasoning-flip ul { margin: 0; padding-left: 18px; }
html.v2 .xt-reasoning-flip li { font-size: 12px; line-height: 1.7; color: var(--v2-text); }
html.v2 .xt-reasoning-validator {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--v2-line);
  border-left: 3px solid var(--v2-gain);
  background: var(--v2-bg1);
  font-size: 12px;
  font-style: italic;
  color: var(--v2-muted);
}
html.v2 .xt-reasoning-validator.disagrees { border-left-color: var(--v2-loss); }

/* LAYOUT GUARD IN PURE CSS: flow content (every build step + the sim
   screens carries .xt-panel-section) can NEVER sit in the 2-column trade
   grid — :has() re-evaluates continuously, immune to any JS state
   staleness. Belt to the adapter's suspenders. */
/* Fallback for flow-ish content that is NOT one of the five builder steps
   (the steps have dedicated PHASE-4 layouts which this block was silently
   overriding — measured on live: display:block + padding-bottom:28 were
   beating the step flex/grid rules from here). */
html.v2 .v2-work #xt-panel-content:has(.xt-panel-section):not(:has(#xt-sector-grid)):not(:has(.xt-portfolio-builder)):not(:has(.xt-strategy-builder)):not(:has(.xt-simulation)):not(:has(.xt-trading-setup)) {
  display: block !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: 28px !important;
}


/* ============================================================ */
/* PHASE 5 (2026-08-05) - transition polish round               */
/* ============================================================ */

/* Sector cards: first row hugs the title band, last row's bottom sits flush
   with the stock selector (grid-auto-rows: minmax(max-content, 1fr) in the
   PHASE-4 sectors block). The old start-anchor override that lived here
   (fix for the dead band ABOVE the cards) fought that geometry — the
   stretch rows keep the top anchored AND close the band below. */

/* Topbar wordmark: "Mr. Billions" is now Georgia-Bold OUTLINES (inline SVG,
   currentColor) - pixel-identical in both themes, no font dependency. */
html.v2 .v2-name { height: 12px; width: auto; display: block; flex: none; }


/* PORTFOLIO TAB - reading mode: the trade view minus form/chart. Full-width
   positions for comfortable reading + the V1 Add/Rebalance actions row.
   Same data-view (active-trading) underneath so table styling + SSE updates
   keep working; only presentation changes. */
html.v2 .v2-work.v2-portfolio-mode #xt-panel-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px;
}
html.v2 .v2-work.v2-portfolio-mode #xt-panel-content > .rp-section:has(.sidebar-trade-grid) { display: none !important; }
html.v2 .v2-work.v2-portfolio-mode #xt-panel-content > .rp-section:has(#rp-positions-body) {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
html.v2 .v2-work.v2-portfolio-mode #xt-panel-content > .rp-actions {
  display: flex !important; gap: 10px; flex: none;
}

/* Chart-swap smoothness: while a replacement chart loads, the teardown wrap
   keeps the stage box alive with this shimmer - the workspace below the
   chart must NEVER jump during a ticker change. */
html.v2 .v2-stage-loading { flex: 1; display: flex; align-items: center; justify-content: center; }
html.v2 .v2-stage-loading::after {
  content: ''; width: 120px; height: 3px; border-radius: 2px;
  background: var(--v2-gold);
  animation: v2StagePulse 1.1s ease-in-out infinite;
}
@keyframes v2StagePulse { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }

/* The V1 chart mounts (hidden) inside the positions body before relocation -
   that host must never reserve height there, or the trade form gets shoved
   down during every chart load. */
html.v2 .v2-work #rp-positions-body.xt-chart-host,
html.v2 .v2-work #rp-positions-body:has(.xt-chart-canvas) {
  height: auto !important; min-height: 0 !important; max-height: none !important;
}


/* Highlighted tape chips (Intraday Trending): slow breathing glow on the
   green/red border. Compositor-only - the ring is a fixed pseudo-element and
   ONLY its opacity animates (no layout, no repaint storm, no JS). */
html.v2 .v2-tape-slot .trending-ticker { position: relative; }
html.v2 .v2-tape-slot .trending-ticker.trending-row-bullish::after,
html.v2 .v2-tape-slot .trending-ticker.trending-row-bearish::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid var(--v2-gain);
  box-shadow: 0 0 7px 1px var(--v2-gain);
  opacity: 0;
  animation: v2TapeGlow 2.6s ease-in-out infinite;
}
html.v2 .v2-tape-slot .trending-ticker.trending-row-bearish::after {
  border-color: var(--v2-loss);
  box-shadow: 0 0 7px 1px var(--v2-loss);
}
@keyframes v2TapeGlow { 0%, 100% { opacity: 0; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) {
  html.v2 .v2-tape-slot .trending-ticker.trending-row-bullish::after,
  html.v2 .v2-tape-slot .trending-ticker.trending-row-bearish::after { animation: none; opacity: .5; }
}



/* Watchlist status bubble: theme-neutral dot at each row's top-left, just
   before the ticker's first letter. When the 15-min server AI scan pushes a
   symbol beyond +/-2 the dot breathes green (long) / red (short) - same
   subtle pulse family as the highlighted tape chips. Compositor-only. */
html.v2 .v2-book-slot .watchlist-row { position: relative; }
html.v2 .v2-w-dot {
  position: absolute; top: 10px; left: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .3;
  pointer-events: none;
}
html.v2 .v2-w-dot.up   { background: var(--v2-gain); opacity: 1; animation: v2DotPulse 2.6s ease-in-out infinite; }
html.v2 .v2-w-dot.down { background: var(--v2-loss); opacity: 1; animation: v2DotPulse 2.6s ease-in-out infinite; }
@keyframes v2DotPulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.v2 .v2-w-dot.up, html.v2 .v2-w-dot.down { animation: none; opacity: .85; }
}
/* the dot sits in the row's left padding - give the content a nudge right
   so the ticker's first letter never collides with it */
html.v2 .v2-book-slot .watchlist-row { padding-left: 20px !important; }


/* One soft gold wash on a row the moment ITS staggered refresh lands.
   Overlay pseudo-element because the row background is pinned with
   !important; opacity-only = compositor. */
html.v2 .v2-book-slot .watchlist-row::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--v2-gold); opacity: 0;
}
html.v2 .v2-book-slot .watchlist-row.v2-w-tick::after { animation: v2WlTick 0.9s ease-out 1; }
@keyframes v2WlTick { 0% { opacity: .08; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.v2 .v2-book-slot .watchlist-row.v2-w-tick::after { animation: none; }
}


/* The chart is ALWAYS-ON on the Trade tab (a close just relaunches the
   default), so the toolbar X is meaningless in the Penthouse - hidden
   VISUALLY only: the adapter's navigation paths still close the chart by
   programmatically clicking this same button (works on display:none). */
html.v2 #v2-chart-stage .xt-chart-close { display: none !important; }


/* LLM option chips (agenda buttons): compact Claude-style. They rendered
   with V1's fat-pill styling; same font, smaller bubble + tighter spacing,
   matching the quick-reply chips. The container gap/margin overrides beat
   the renderer's inline style via !important. */
html.v2 .v2-bill-slot .xt-experience-btn {
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important;
  color: var(--v2-text) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  padding: 5px 11px !important;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}
html.v2 .v2-bill-slot .xt-experience-btn:hover {
  border-color: var(--v2-blue) !important;
  background: var(--v2-blue-dim) !important;
  color: var(--v2-text) !important;
}
html.v2 .v2-bill-slot .xt-experience-buttons {
  gap: 8px !important;
  margin-bottom: 12px !important;
  padding: 0 4px !important;
}


/* Chrome autofill paint (picking a ticker from the browser's history
   dropdown) draws its own tinted box in the INPUT's geometry - a mismatched
   inner rectangle inside the restyled field. Cover it with an inset shadow
   in the wrapper's exact background; text color kept readable, both themes
   (the var flips with the theme). Scoped to the redesigned wrappers the
   older .sidebar-trade-row autofill rule never matched. */
html.v2 .v2-work #sidebar-trade-ticker:-webkit-autofill,
html.v2 .v2-work #sidebar-trade-ticker:-webkit-autofill:hover,
html.v2 .v2-work #sidebar-trade-ticker:-webkit-autofill:focus,
html.v2 .v2-work .sidebar-trade-field input:-webkit-autofill,
html.v2 .v2-work .sidebar-trade-field input:-webkit-autofill:hover,
html.v2 .v2-work .sidebar-trade-field input:-webkit-autofill:focus,
html.v2 .v2-work .v2-row-pair input:-webkit-autofill,
html.v2 .v2-work .v2-row-pair input:-webkit-autofill:hover,
html.v2 .v2-work .v2-row-pair input:-webkit-autofill:focus {
  /* Michael: KEEP Chrome's distinct autofill tint (no cover shadow) — the
     input box now fills the wrapper's inner area exactly, so the tint reads
     as the field itself filling, corners and all. `none` also neutralizes
     the older bg3 cover rule above for these fields. */
  -webkit-box-shadow: none !important;
  -webkit-text-fill-color: var(--v2-text) !important;
  caret-color: var(--v2-text);
}


/* ============================================================ */
/* PHASE 6 (2026-08-06) - strategy builder type sweep + loader  */
/* unification + simulate content-height (no stretched voids)   */
/* ============================================================ */

/* ---- A. BOTH backtest-area loaders = ONE slim strip. Covers the
   "Running backtest for X" classless div AND the "Creating X strategy"
   .xt-strategy-loading (with its Cancel chip). ---- */
html.v2 .v2-work .xt-backtest-results > div:not([class]),
html.v2 .v2-work .xt-strategy-loading,
html.v2 .v2-work .xt-backtest-loading {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 0 !important;
  height: 44px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  color: var(--v2-muted) !important;
}
html.v2 .v2-work .xt-strategy-loading > div { margin: 0 !important; font-size: 11.5px !important; }
html.v2 .v2-work .xt-backtest-results > div:not([class]) > div { margin: 0 !important; font-size: 11.5px !important; }
html.v2 .v2-work .xt-strategy-spinner {
  width: 14px !important; height: 14px !important;
  border-width: 2px !important; margin: 0 !important; flex: none;
}
html.v2 .v2-work .xt-loading-cancel {
  margin: 0 0 0 6px !important; padding: 4px 10px !important;
  font-size: 11px !important; border-radius: 6px !important;
  min-height: 0 !important; height: auto !important;
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line) !important;
  color: var(--v2-text) !important;
}

/* ---- B. TYPE SWEEP: the strategy step still carried V1's big faces. ---- */
html.v2 .v2-work .xt-strategy-builder { font-size: 12px; }
html.v2 .v2-work .xt-strategy-tab-btn,
html.v2 .v2-work .xt-code-tab {
  font-size: 11.5px !important; font-weight: 600 !important;
  padding: 7px 10px !important; min-height: 0 !important; line-height: 1.3 !important;
}
html.v2 .v2-work .xt-preset-item { padding: 8px 10px !important; gap: 8px !important; min-height: 0 !important; }
html.v2 .v2-work .xt-preset-name { font-size: 12px !important; font-weight: 600 !important; }
html.v2 .v2-work .xt-quick-card { padding: 9px 11px !important; gap: 9px !important; min-height: 0 !important; }
html.v2 .v2-work .xt-quick-card-name { font-size: 12px !important; font-weight: 600 !important; }
html.v2 .v2-work .xt-quick-card-desc { font-size: 10.5px !important; }
html.v2 .v2-work .xt-quick-card-icon { width: 30px !important; height: 30px !important; }
html.v2 .v2-work .xt-quick-card-icon svg { width: 15px !important; height: 15px !important; }
html.v2 .v2-work .xt-btn-improve,
html.v2 .v2-work .xt-btn-undo,
html.v2 .v2-work .xt-code-actions button {
  font-size: 11.5px !important; padding: 6px 10px !important;
  min-height: 30px !important; border-radius: 7px !important;
}
html.v2 .v2-work .xt-code-editor input[type="text"] {
  font-size: 12px !important; padding: 6px 10px !important;
  min-height: 0 !important; height: 30px !important;
}
html.v2 .v2-work .xt-code-area { font-size: 11px !important; line-height: 1.55 !important; }
html.v2 .v2-work .xt-code-chat input {
  font-size: 12px !important; min-height: 30px !important; padding: 6px 10px !important;
}
html.v2 .v2-work .xt-code-chat button {
  font-size: 11.5px !important; min-height: 30px !important; padding: 6px 12px !important;
}
html.v2 .v2-work .xt-backtest-title { font-size: 10px !important; letter-spacing: 0.12em !important; }
html.v2 .v2-work .xt-backtest-metric-value { font-size: 12.5px !important; }
html.v2 .v2-work .xt-backtest-metric-label { font-size: 9.5px !important; }
html.v2 .v2-work .xt-strategy-current-symbol { font-size: 12.5px !important; }
html.v2 .v2-work .xt-strategy-current { padding: 8px 12px !important; min-height: 0 !important; }

/* ---- C. SIMULATE: content-height stack. The chart card and calculator
   stop stretching to fill the viewport - fixed sensible chart height,
   calculator at content height, positions right below, CTA right after
   (Michael: "cut off all this free space"). ---- */
html.v2 .v2-work #xt-panel-content:has(.xt-simulation) {
  justify-content: flex-start !important;
  overflow-y: auto !important;
}
html.v2 .v2-work .xt-simulation {
  flex: 0 0 auto !important;
  grid-template-rows: auto auto auto !important;
  overflow: visible !important;
  min-height: 0 !important;
}
html.v2 .v2-work .xt-sim-chart-section { height: auto !important; min-height: 0 !important; align-self: stretch; }
html.v2 .v2-work .xt-sim-chart { height: 240px !important; min-height: 240px !important; max-height: 240px !important; }
html.v2 .v2-work .xt-sim-calculator { height: auto !important; min-height: 0 !important; align-self: stretch; }
html.v2 .v2-work .xt-sim-positions { max-height: 240px; overflow-y: auto; }


/* Ticker typography unification: every ticker in the build flow wears the
   same face as the watchlist / tape / trade form - IBM Plex Mono semibold.
   (Michael: select-stocks rows and friends still carried V1 sans.) */
html.v2 .v2-work .xt-stock-symbol,
html.v2 .v2-work .xt-portfolio-symbol,
html.v2 .v2-work .xt-sim-position-symbol,
html.v2 .v2-work .xt-strategy-current-symbol,
html.v2 .v2-work .xt-strategy-tab {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
}
html.v2 .v2-work .xt-stock-item { padding: 9px 12px !important; min-height: 0 !important; gap: 8px !important; }
html.v2 .v2-work .xt-stock-sector { font-size: 10.5px !important; color: var(--v2-faint) !important; }


/* Positions title: count/deployed left, LIVE total P&L right (same figure
   as V1's bottom bar, from the SSE equity object every ~2s tick). */
html.v2 .v2-work .rp-section:has(#rp-positions-body) > .rp-section-title {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
html.v2 .v2-work .v2-pos-pnl {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
html.v2 .v2-work .v2-pos-pnl.up { color: var(--v2-gain); }
html.v2 .v2-work .v2-pos-pnl.down { color: var(--v2-loss); }


/* BOOT CURTAIN: index2 is V1's DOM until the adapter (last script) builds
   the Penthouse shell - on a hard refresh the raw V1 frame used to paint
   for a moment. Until html.v2-ready lands, children stay INVISIBLE
   (visibility, not display - the adapter still measures layout while
   building) over a clean canvas with a small gold pulse. Pure-CSS safety:
   if the adapter ever fails, everything force-reveals after 6s instead of
   leaving a blank page. */
html.v2:not(.v2-ready) body { background: var(--v2-bg0); }
html.v2:not(.v2-ready) body > * {
  visibility: hidden;
  animation: v2BootFallback 0s linear 6s forwards;
}
@keyframes v2BootFallback { to { visibility: visible; } }
html.v2:not(.v2-ready) body::after {
  content: '';
  position: fixed; top: 50%; left: 50%;
  width: 120px; height: 3px; margin: -2px 0 0 -60px;
  border-radius: 2px;
  background: var(--v2-gold, #d4af37);
  animation: v2StagePulse 1.1s ease-in-out infinite;
}


/* IMPROVE: gold + breathing glow (same pulse family as the tape chips and
   watchlist dots) - the one button the eye should find and want to press. */
html.v2 .v2-work .xt-btn-improve {
  position: relative;
  color: var(--v2-gold) !important;
  border: 1px solid var(--v2-gold) !important;
  background: var(--v2-gold-dim, rgba(212, 175, 55, 0.10)) !important;
}
html.v2 .v2-work .xt-btn-improve::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid var(--v2-gold);
  box-shadow: 0 0 7px 1px var(--v2-gold);
  opacity: 0;
  animation: v2TapeGlow 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html.v2 .v2-work .xt-btn-improve::after { animation: none; opacity: .4; }
}


/* Backtest lattice: canvas sits BEHIND the loader's own text / Cancel
   (both stay clickable). The old spinner circles retire - the lattice
   carries all the motion now. */
html.v2 .v2-work .xt-strategy-loading,
html.v2 .v2-work .xt-backtest-results > div:not([class]) { position: relative; overflow: hidden; }
html.v2 .v2-work .xt-strategy-loading > *,
html.v2 .v2-work .xt-backtest-results > div:not([class]) > * { position: relative; z-index: 1; }
html.v2 .v2-work canvas.v2-lattice {
  position: absolute !important; inset: 0 !important;
  z-index: 0 !important; pointer-events: none;
}
html.v2 .v2-work .xt-strategy-spinner { display: none !important; }
html.v2 .v2-work .xt-backtest-results > div:not([class]) > div:last-child { display: none !important; }

/* Improve glow: smaller spread + a hair of breathing room so the clipping
   container can never cut it flat on the left. */
html.v2 .v2-work .xt-btn-improve { margin-left: 4px !important; }
html.v2 .v2-work .xt-btn-improve::after { box-shadow: 0 0 4px 0 var(--v2-gold); }


/* the loader must FILL the backtest strip - the lattice spans the whole
   window, not just a shrink-wrapped box around the text */
html.v2 .v2-work .xt-strategy-loading,
html.v2 .v2-work .xt-backtest-results > div:not([class]) {
  width: 100% !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}


/* While the lattice runs, it IS the loader - the "Running backtest..." /
   "Creating..." text hides (Michael: animation only). The Cancel BUTTON
   stays visible and clickable (it is a button, not a div). */
html.v2 .v2-work .xt-strategy-loading[data-v2lat] > div,
html.v2 .v2-work .xt-backtest-results > div:not([class])[data-v2lat] > div {
  visibility: hidden !important;
}


/* Cancel -> a small x pinned top-right of the loading strip (the pill in
   the middle of the lattice broke the composition). Text swapped for the
   glyph via font-size 0 + ::after; still the same button, same handler. */
html.v2 .v2-work .xt-strategy-loading .xt-loading-cancel {
  position: absolute !important;
  top: 2px !important; right: 6px !important;
  margin: 0 !important; padding: 0 !important;
  width: 22px !important; height: 22px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0 !important; line-height: 1 !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--v2-muted) !important;
  z-index: 2 !important;
  cursor: pointer;
}
html.v2 .v2-work .xt-strategy-loading .xt-loading-cancel::after {
  content: '×';
  font-size: 15px;
  line-height: 1;
}
html.v2 .v2-work .xt-strategy-loading .xt-loading-cancel:hover {
  color: var(--v2-text) !important;
  border-color: var(--v2-line) !important;
  background: var(--v2-bg2) !important;
}


/* Strategy Autopilot eyebrow: sub-line "powered by Bill" under the title */
html.v2 .v2-book .v2-eyebrow.v2-ready-h {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 1px 8px;
  align-items: baseline;
}
html.v2 .v2-book .v2-ready-h .v2-ready-title { grid-area: 1 / 1 / 2 / 3; }
html.v2 .v2-book .v2-ready-h .v2-ready-sub { grid-area: 2 / 1; }
html.v2 .v2-book .v2-ready-h #strat-trending-updated { grid-area: 2 / 2; justify-self: end; margin: 0 !important; }
html.v2 .v2-ready-sub {
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 500;
  color: var(--v2-faint);
}

/* Positions title P&L aligns over the table's P&L column (rows end with a
   22px close button + 8px gap the header line does not have) */
html.v2 .v2-work .v2-pos-pnl { margin-right: 30px; }

/* Sim-chart entry-arrow hover tooltip (Penthouse feature): LONG/SHORT +
   trade %; created per chart render, positioned by the crosshair */
html.v2 .v2-sim-tip {
  display: none;
  position: absolute;
  z-index: 5;
  pointer-events: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--v2-bg1);
  border: 1px solid var(--v2-line-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}
html.v2 .v2-sim-tip.up { color: var(--v2-gain); }
html.v2 .v2-sim-tip.down { color: var(--v2-loss); }


/* START TRADING spotlight: the freshly-started asset row glows gold for ~5s
   in the Portfolio view (class re-applied by the transform pass until its
   deadline, then dropped by the next SSE rebuild). */
html.v2 .v2-work .rp-pos-card.v2-row-hl {
  background: var(--v2-gold-dim, rgba(212, 175, 55, 0.16)) !important;
  box-shadow: inset 3px 0 0 var(--v2-gold) !important;
}


/* Mockup separator system (Michael: "lines separators"):
   - vertical divider between the manual-trading column and OPEN POSITIONS
   - underline below the column header
   - row separators at the STRONG line weight (they existed but too faint) */
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content > .rp-section:has(#rp-positions-body) {
  border-left: 1px solid var(--v2-line) !important;
  padding-left: 18px !important;
}
html.v2 .v2-work .rp-pos-card { border-bottom: 1px solid var(--v2-line-strong) !important; }
html.v2 .v2-work .v2-pos-head { border-bottom: 1px solid var(--v2-line-strong) !important; padding-bottom: 7px; }

/* trade + portfolio content sits tight under the graph (was too low) */
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content { padding-top: 5px !important; }


/* Total P&L rides IN the column header cell: label left, live total right-
   aligned over the P&L column - the dead space above the label is gone. */
html.v2 .v2-work .v2-pos-head .v2-ph-pnl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
html.v2 .v2-work .v2-ph-pnl .v2-pos-pnl { margin-right: 0 !important; white-space: nowrap; }


/* ACTIVE TRADING title above the command panel - same face and line as
   OPEN POSITIONS. Overrides the older hide/font-size-0 rules from the
   sound-toggle era. */
html.v2 .v2-work .rp-section:has(.sidebar-trade-grid) > .rp-section-title {
  display: block !important;
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: var(--v2-muted) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
html.v2 .v2-work .rp-section:has(.sidebar-trade-grid) > .rp-section-title span:first-child {
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
}


/* RECOMMENDATION BUBBLE (recommend_trade): V1's financial-bubble chrome -
   drop shadow, heavy edge, oversized faces - flattened to the Penthouse
   language. A quiet gold edge stays as the "recommendation" cue. */
html.v2 .v2-bill-slot .bubble.bot.financial-bubble {
  color: var(--v2-text) !important;
  background: var(--v2-bg1) !important;
  border: 1px solid var(--v2-line-strong) !important;
  border-left: 2px solid var(--v2-gold) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  padding: 12px 14px !important;
}
html.v2 .v2-bill-slot .financial-bubble h1,
html.v2 .v2-bill-slot .financial-bubble h2,
html.v2 .v2-bill-slot .financial-bubble h3,
html.v2 .v2-bill-slot .financial-bubble h4 {
  font-size: 13.5px !important;
  margin: 10px 0 6px !important;
}
html.v2 .v2-bill-slot .financial-bubble ul { margin: 6px 0 !important; }
html.v2 .v2-bill-slot .financial-bubble li { margin: 2px 0 !important; }

/* Reasoning panel: Penthouse card - flat, tokened, compact */
html.v2 .v2-bill-slot .xt-reasoning-panel {
  background: var(--v2-bg2) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  margin-top: 10px !important;
  padding: 0 !important;
}
html.v2 .v2-bill-slot .xt-reasoning-panel summary {
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  color: var(--v2-muted) !important;
  padding: 9px 12px !important;
  cursor: pointer;
}
html.v2 .v2-bill-slot .xt-reasoning-body { padding: 2px 12px 12px !important; }
html.v2 .v2-bill-slot .xt-cat-row { padding: 4px 0 !important; }
html.v2 .v2-bill-slot .xt-cat-label { font-size: 11.5px !important; color: var(--v2-text) !important; }
html.v2 .v2-bill-slot .xt-cat-dir {
  font-size: 10.5px !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
}
html.v2 .v2-bill-slot .xt-reasoning-section-label {
  font-size: 9.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--v2-muted) !important;
  margin: 10px 0 5px !important;
}
html.v2 .v2-bill-slot .xt-reasoning-flip { font-size: 11.5px !important; margin: 0 !important; }
html.v2 .v2-bill-slot .xt-reasoning-flip li { margin: 3px 0 !important; }
html.v2 .v2-bill-slot .xt-reasoning-validator { font-size: 11px !important; }


/* plain text inside the recommendation bubble was washed out by a V1
   low-contrast rule - full ink, everywhere in it */
html.v2 .v2-bill-slot .financial-bubble p,
html.v2 .v2-bill-slot .financial-bubble li,
html.v2 .v2-bill-slot .financial-bubble span:not(.xt-cat-dir):not([class*="badge"]) {
  color: var(--v2-text) !important;
}


/* ONE scroller for positions: rows scroll inside #rp-positions-body only.
   Section/panel never double-scroll; the OPEN POSITIONS title stays put and
   the column header is sticky inside the scroller. */
html.v2 .v2-work[data-view="active-trading"] #xt-panel-content {
  height: 100% !important;
  overflow: hidden !important;
  grid-template-rows: auto minmax(0, 1fr);
}
html.v2 .v2-work #xt-panel-content > .rp-section:has(#rp-positions-body) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.v2 .v2-work #rp-positions-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* sticky bg must MATCH the surface behind it per theme (dark panel = bg1,
   light panel = bg0) — bg0-on-dark painted a black band across the header
   row (Michael 2026-08-06). */
html.v2 .v2-work .v2-pos-head {
  position: sticky !important;
  top: 0;
  z-index: 2;
  background: var(--v2-bg1);
}
html.v2 body.light-theme .v2-work .v2-pos-head { background: var(--v2-bg0); }

/* dark mode: the GRAPH AREA (canvas host only — toolbar keeps the panel
   tone) sits between bg0 and the bg1 panel; the LWC layout background is
   transparent, so the host paints it. Tuned by Michael in steps:
   #0a0a0b "too black" -> #131315 "a little more lighter" -> #17171a.
   Beats the transparent !important chrome-strip rule by later position
   + higher specificity. */
html.v2 body:not(.light-theme) .v2-chart-stage .xt-chart-canvas {
  background: #17171a !important;
}

/* TP/SL chat alerts: money colored by outcome (both designs share the
   class; V1 tokens fall back to the literal colors) */
html body .bubble.bot.tpsl-win  { color: var(--v2-gain, #1e9e5a) !important; }
html body .bubble.bot.tpsl-loss { color: var(--v2-loss, #d43f45) !important; }

/* queue notice ("High demand...") = quiet centered system line, not a bubble */
html.v2 .v2-bill-slot .row.bot:has(.ttft-hint:only-child) { justify-content: center !important; }
html.v2 .v2-bill-slot .bubble.bot:has(> .ttft-hint:only-child) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
  max-width: 100% !important;
  width: 100%;
}
html.v2 .v2-bill-slot .ttft-hint {
  text-align: center;
  color: var(--v2-muted) !important;
  font-size: 11.5px !important;
  margin: 4px 0 !important;
  opacity: 1 !important;
}

/* ============================================================
   POSITIONS SCROLLER polish (2026-08-06, Michael screenshots):
   - column header is now a SIBLING above the scroller (adapter) so the
     scrollbar track starts BELOW the header row, never beside it;
   - the scrollbar moves right into the section's edge padding and the
     rows keep a real gap before it ("it needs to breath");
   - slim product-grade scrollbar, fixed 8px so the header inset below
     stays exact;
   - overflow-anchor off: V1 rebuilds the rows every SSE tick and
     Chrome's scroll anchoring made the list creep on its own.
   Geometry: body outer = W + 6 (margin -6), minus 8 scrollbar, minus
   14 padding => rows span W - 16; header margin-right: 16px matches.
   ============================================================ */
html.v2 .v2-work #rp-positions-body {
  margin-right: -6px !important;
  padding-right: 14px !important;
  scrollbar-gutter: stable;
  overflow-anchor: none;
}
html.v2 .v2-work #rp-positions-body::-webkit-scrollbar { width: 8px; }
html.v2 .v2-work #rp-positions-body::-webkit-scrollbar-track { background: transparent; }
html.v2 .v2-work #rp-positions-body::-webkit-scrollbar-thumb {
  background: var(--v2-line-strong);
  border-radius: 4px;
}
html.v2 .v2-work #rp-positions-body::-webkit-scrollbar-thumb:hover { background: var(--v2-faint); }
html.v2 .v2-work .rp-section > .v2-pos-head { margin-right: 16px; }

/* Financial-bubble ink hardening (2026-08-09, Michael): V1's
   `.row.bot .bubble.financial-bubble { color:#e5e5e5 !important }`
   outguns the light-theme override by specificity, which read as
   white-on-white in Paper mode. Pin the bare text tags too —
   semantic colored spans keep their own colors. */
html.v2 .v2-bill-slot .financial-bubble strong,
html.v2 .v2-bill-slot .financial-bubble em,
html.v2 .v2-bill-slot .financial-bubble b,
html.v2 .v2-bill-slot .financial-bubble p,
html.v2 .v2-bill-slot .financial-bubble li,
html.v2 .v2-bill-slot .financial-bubble td,
html.v2 .v2-bill-slot .financial-bubble th { color: var(--v2-text) !important; }

/* ============================================================
   USER ID under the wordmark (Michael 2026-08-18)
   Short session id (last uid segment) for phone-support reference.
   ============================================================ */
html.v2 .v2-wordmark { flex-direction: column; align-items: flex-start; gap: 1px; }
html.v2 .v2-wm-row { display: flex; align-items: center; gap: 9px; }
html.v2 .v2-uid {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--v2-faint);
  font-weight: 500;
  line-height: 1;
}
html.v2 .v2-uid b { color: var(--v2-muted); font-weight: 600; }

/* ============================================================
   WATCHLIST MARKETS TABS (stage 1, 2026-09-01) — 4 tabs above the
   book list. Sticky within the book column scroll; token-driven so
   light theme follows automatically.
   ============================================================ */
html.v2 .watchlist-tabs {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--v2-bg1);
  border-bottom: 1px solid var(--v2-line);
  padding: 0 8px;
}
html.v2 .watchlist-tab { color: var(--v2-muted); }
html.v2 .watchlist-tab:hover { color: var(--v2-text); }
html.v2 .watchlist-tab.active { color: var(--v2-text); border-bottom-color: var(--v2-gold); }

/* market tag chip on radar rows / autopilot cards (non-stock picks) */
html.v2 .wl-mkt-tag,
.wl-mkt-tag {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-gold, #d4af37);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 3px;
  padding: 0 4px;
  margin-left: 5px;
  vertical-align: 1px;
}