/* ═══════════════════════════════════════════════════════
   SFTi Momentum Race — Liquid Glass Design System
   Mobile-first • iOS PWA optimized • Dark theme
   ═══════════════════════════════════════════════════════ */

/* ─── Google Fonts ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@400;500;700&display=swap');

/* ─── Design Tokens ─────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-void:         #040810;
  --bg-abyss:        #0a0f1a;
  --bg-surface:      #0f1628;

  /* Glass */
  --glass-bg:        rgba(15, 22, 40, 0.75);
  --glass-bg-heavy:  rgba(10, 15, 26, 0.92);
  --glass-border:    rgba(0, 229, 255, 0.08);
  --glass-border-active: rgba(0, 229, 255, 0.35);
  --glass-shine:     rgba(255, 255, 255, 0.08);
  --glass-blur:      30px;

  /* Accents */
  --accent-cyan:     #00e5ff;
  --accent-green:    #21854B;
  --accent-green-bright: #2ECC71;
  --accent-red:      #C74E0A;
  --accent-red-bright: #E85D2A;
  --accent-gold:     #ffd700;
  --accent-violet:   #a855f7;
  --accent-orange:   #ff8c00;

  /* Text */
  --text-primary:    rgba(255, 255, 255, 0.95);
  --text-secondary:  rgba(255, 255, 255, 0.55);
  --text-dim:        rgba(255, 255, 255, 0.30);

  /* Glows */
  --glow-cyan:       0 0 20px rgba(0, 229, 255, 0.3);
  --glow-green:      0 0 15px rgba(33, 133, 75, 0.4);
  --glow-red:        0 0 15px rgba(199, 78, 10, 0.35);
  --glow-gold:       0 0 20px rgba(255, 215, 0, 0.35);
  --glow-violet:     0 0 15px rgba(168, 85, 247, 0.25);

  /* Typography */
  --font-display:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:       'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Spacing */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  16px;
  --sp-xl:  24px;
  --sp-xxl: 32px;

  /* Safe areas (iOS notch — top/left/right only, no bottom override) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --status-height: 48px;

  /* Bottom holo-nav is position:fixed (see system.html .holo-nav): its
     visual height is ~92px (14 top pad + 34 icon + 5 gap + label + 28 bottom pad).
     Every scrollable surface (view-container + each .modal-content + each
     view-specific scroll host) needs a bottom clearance equal to this plus
     the iOS home-indicator safe area plus a small breathing gap, otherwise
     the last row of content hides behind the floating nav. */
  --nav-height: 92px;
  --nav-clearance: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
}

/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-display);
  background: var(--bg-void);
  color: var(--text-primary);
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  padding-bottom: 0;
}

/* Animated gradient mesh background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(0, 229, 255, 0.06), transparent),
    radial-gradient(ellipse 500px 500px at 80% 70%, rgba(168, 85, 247, 0.04), transparent),
    radial-gradient(ellipse 400px 300px at 50% 50%, rgba(255, 215, 0, 0.03), transparent);
  animation: meshDrift 20s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

@keyframes meshDrift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -10px) scale(1.02); }
  66% { transform: translate(-15px, 15px) scale(0.98); }
  100% { transform: translate(10px, -5px) scale(1.01); }
}

/* ─── Glass Panel ───────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 var(--glass-shine);
}

.glass-heavy {
  background: var(--glass-bg-heavy);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.glass-active {
  border-color: var(--glass-border-active);
}

/* ─── App Shell ─────────────────────────────────── */
#app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── Status Bar ────────────────────────────────── */
.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;                                   /* P22.12.2 — uniform header */
  height: var(--status-height);
  padding: max(var(--sp-md), var(--safe-top)) var(--sp-lg) var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  z-index: 10;
}
/* P22.12.2 — every header child sits on the same baseline. The
 * status-mode + brand + clock previously had no shared sizing, so
 * the LIVE pill and STATIK trigger looked taller than them.  */
.status-bar > * {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.status-bar .status-clock {
  margin-left: auto;                         /* push clock to right edge */
}

.status-mode {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: var(--glow-green);
}

.status-dot.live { animation: pulse 2s ease-in-out infinite; }
.status-dot.offline { background: var(--accent-red); box-shadow: var(--glow-red); }
.status-dot.replay { background: var(--accent-orange); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.status-brand {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.status-clock {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ─── Main Content Area ─────────────────────────── */
.view-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--sp-md);
  /* Clear the fixed bottom holo-nav so the last card/row is tappable
     rather than hiding behind it. See --nav-clearance at :root. */
  padding-bottom: var(--nav-clearance);
  padding-left: max(var(--sp-md), var(--safe-left));
  padding-right: max(var(--sp-md), var(--safe-right));
}

.view-container::-webkit-scrollbar { display: none; }

/* View visibility */
.view { display: none; }
.view.active { display: block; animation: viewFadeIn 0.3s ease-out; }

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Race Header (Bug D — Rewind button) ──────── */
.race-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 10px;
  gap: 8px;
}
.race-header-title {
  font-family: 'Orbitron', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  opacity: 0.75;
}
.race-rewind-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.35);
  color: var(--accent-cyan);
  font-family: 'Orbitron', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.race-rewind-btn:hover {
  background: rgba(0, 229, 255, 0.18);
  transform: translateY(-1px);
}
.race-rewind-btn:active { transform: translateY(0) scale(0.97); }
.race-rewind-btn svg { flex-shrink: 0; }

/* ─── Race Bar ──────────────────────────────────── */
.race-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.race-bar {
  padding: var(--sp-md) var(--sp-lg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.3s ease;
  position: relative;
  overflow: hidden;
}

.race-bar.rank-1 {
  border-color: rgba(255, 215, 0, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 215, 0, 0.1);
}

.race-bar.rank-1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), transparent 60%);
  pointer-events: none;
}

.race-bar.entering {
  animation: barEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes barEnter {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Flash background on rank change */
.race-bar.flash-up {
  animation: flashUp 0.65s ease-out;
}
.race-bar.flash-down {
  animation: flashDown 0.65s ease-out;
}

@keyframes flashUp {
  0%   { box-shadow: 0 0 0 0 rgba(33, 133, 75, 0); background: var(--glass-bg); }
  20%  { box-shadow: 0 0 24px 4px rgba(33, 133, 75, 0.45); background: rgba(33, 133, 75, 0.18); }
  100% { box-shadow: 0 8px 32px rgba(0,0,0,0.4); background: var(--glass-bg); }
}

@keyframes flashDown {
  0%   { box-shadow: 0 0 0 0 rgba(199, 78, 10, 0); background: var(--glass-bg); }
  20%  { box-shadow: 0 0 24px 4px rgba(199, 78, 10, 0.45); background: rgba(199, 78, 10, 0.15); }
  100% { box-shadow: 0 8px 32px rgba(0,0,0,0.4); background: var(--glass-bg); }
}

/* Skeleton shimmer loading */
.skeleton-bar {
  padding: var(--sp-md) var(--sp-lg);
  position: relative;
  overflow: hidden;
}

.skeleton-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  animation: shimmer 1.6s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton-line {
  height: 12px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 6px;
}

/* Race bar layout */
.race-bar-header {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xs);
}

.rank-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.rank-badge.rank-1 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 160, 0, 0.2));
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--accent-gold);
  box-shadow: var(--glow-gold);
}

.rank-badge.rank-top5 {
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.3);
  color: var(--accent-cyan);
}

.rank-delta {
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-mono);
  min-width: 28px;
}

.rank-delta.up { color: var(--accent-green); }
.rank-delta.down { color: var(--accent-red); }
.rank-delta.same { color: var(--text-dim); }

.rank-delta.flash {
  animation: deltaFlash 0.4s ease-out;
}

@keyframes deltaFlash {
  0% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.ticker-symbol {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  flex: 1;
  letter-spacing: 0.03em;
}

.pct-change {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
}

.pct-change.positive { color: var(--accent-green-bright); }
.pct-change.negative { color: var(--accent-red-bright); }

.last-price {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
  min-width: 60px;
}

/* Score bar */
.score-bar-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  margin: var(--sp-sm) 0;
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

/* Race bar footer */
.race-bar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
}

.rvol-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

.rvol-badge.hot {
  background: rgba(255, 140, 0, 0.15);
  color: var(--accent-orange);
}

.rvol-badge.fire {
  background: rgba(255, 51, 102, 0.15);
  color: var(--accent-red);
  box-shadow: var(--glow-red);
}

.sparkline-container {
  flex: 1;
  height: 20px;
  max-width: 80px;
}

.sparkline-container svg {
  width: 100%;
  height: 100%;
}

.sparkline-path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline-path.positive { stroke: var(--accent-green-bright); }
.sparkline-path.negative { stroke: var(--accent-red-bright); }

.volume-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  text-align: right;
  min-width: 45px;
}

.score-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-align: right;
}

/* 52-week hi/lo in race-bar bottom-right (Phase 2b.5.3) */
.week52-text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  text-align: right;
  min-width: 88px;
  letter-spacing: -0.02em;
}

/* ─── Auth Screen ───────────────────────────────── */
.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-void);
}

.auth-screen.hidden {
  display: none;
}

@keyframes authSplash {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.18); }
}

.auth-card {
  width: min(360px, 90vw);
  padding: var(--sp-xxl) var(--sp-xl);
  text-align: center;
}

.auth-logo {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--sp-sm);
}

.auth-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin-bottom: var(--sp-xxl);
}

.auth-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: var(--sp-xl);
}

/* Claude-style pulsing dots (replaces spinner) */
.auth-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto var(--sp-xl);
  height: 48px;
}

.auth-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-cyan);
  animation: dotPulse 1.4s ease-in-out infinite;
  opacity: 0.3;
}

.auth-dot:nth-child(1) { animation-delay: 0s; }
.auth-dot:nth-child(2) { animation-delay: 0.22s; }
.auth-dot:nth-child(3) { animation-delay: 0.44s; }

@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.75); opacity: 0.3; }
  40%           { transform: scale(1.25); opacity: 1; }
}

.auth-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: #e8f7ff;
  background: rgba(0, 229, 255, 0.04);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 10px;
  outline: none;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.auth-input::placeholder { color: rgba(230, 247, 255, 0.4); }
.auth-input:focus {
  border-color: rgba(0, 229, 255, 0.7);
  background: rgba(0, 229, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
}
.auth-input:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-btn:active {
  transform: scale(0.96);
  background: rgba(0, 229, 255, 0.15);
}

.auth-btn:hover {
  box-shadow: var(--glow-cyan);
  background: rgba(0, 229, 255, 0.12);
}

.auth-error {
  font-size: 0.75rem;
  color: var(--accent-red);
  margin-top: var(--sp-lg);
}

/* ─── Session Log Table ─────────────────────────── */
.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-lg);
}

.log-title {
  font-size: 1.125rem;
  font-weight: 700;
}

.log-date-picker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-primary);
  outline: none;
}

.log-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
}

.log-stat {
  padding: var(--sp-md);
  text-align: center;
}

.log-stat-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.log-stat-label {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.log-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.log-row {
  display: grid;
  grid-template-columns: 36px 1fr 70px 60px 55px;
  gap: var(--sp-sm);
  align-items: center;
  padding: var(--sp-md) var(--sp-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
}

.log-row.header {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-void);
}

.log-row .ticker-sym {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-cyan);
}

.log-row .mono {
  font-family: var(--font-mono);
}

/* ─── Runner Memory ─────────────────────────────── */
.memory-search {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  outline: none;
  margin-bottom: var(--sp-lg);
  transition: border-color 0.2s;
}

.memory-search:focus {
  border-color: var(--glass-border-active);
}

.memory-search::placeholder {
  color: var(--text-dim);
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-sm);
}

.memory-card {
  padding: var(--sp-lg);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}

.memory-card:active { transform: scale(0.97); }

.memory-card.pattern-match {
  border-color: rgba(168, 85, 247, 0.3);
}

.memory-card .mc-ticker {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: var(--sp-xs);
}

.memory-card .mc-runs {
  font-size: 0.65rem;
  color: var(--text-dim);
}

.memory-card .mc-score {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: var(--sp-sm);
}

.memory-card .mc-last-seen {
  font-size: 0.6rem;
  color: var(--text-dim);
  margin-top: var(--sp-xs);
}

.memory-card .mc-patterns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: var(--sp-sm);
}

.pattern-pill {
  font-size: 0.55rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(168, 85, 247, 0.15);
  color: var(--accent-violet);
  font-weight: 500;
}

.memory-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-xxl);
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* ─── Settings — iOS-style collapsible sections (2026-05-02 evening) ─── */
details.settings-section {
  margin-bottom: var(--sp-md);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  transition: background 0.15s;
}
details.settings-section[open] {
  background: rgba(108, 248, 255, 0.025);
  border-color: rgba(108, 248, 255, 0.12);
}
details.settings-section > summary.settings-heading {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #cfe;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
details.settings-section > summary.settings-heading::-webkit-details-marker { display: none; }
details.settings-section > summary.settings-heading::after {
  content: '›';
  color: var(--text-dim);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
  margin-left: 8px;
}
details.settings-section[open] > summary.settings-heading::after {
  transform: rotate(90deg);
  color: var(--accent-cyan);
}
details.settings-section[open] > summary.settings-heading {
  color: var(--accent-cyan);
  border-bottom: 1px solid rgba(108, 248, 255, 0.1);
}
/* Legacy fallback for any non-converted sections */
.settings-section {
  margin-bottom: var(--sp-xl);
}
.settings-heading {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: var(--sp-md);
  padding-left: var(--sp-sm);
}
.settings-panel {
  padding: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}
details.settings-section > .settings-panel {
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  margin: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setting-label {
  font-size: 0.85rem;
  font-weight: 500;
}

.setting-value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent-cyan);
}

.setting-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.setting-dot.green { background: var(--accent-green); box-shadow: var(--glow-green); }
.setting-dot.red { background: var(--accent-red); box-shadow: var(--glow-red); }

/* Toggle switch */
.toggle-track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
}

.toggle-track.on {
  background: rgba(0, 229, 255, 0.3);
}

.toggle-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-primary);
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-track.on .toggle-thumb {
  transform: translateX(20px);
  background: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
}

/* Slider */
.slider-container {
  width: 100%;
}

.slider-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--sp-sm);
}

.slider-input {
  width: 100%;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  outline: none;
}

.slider-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: var(--glow-cyan);
  cursor: pointer;
}

/* Settings button */
.settings-btn {
  width: 100%;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.settings-btn:active { transform: scale(0.97); }

.settings-btn.danger {
  color: var(--accent-red);
  background: rgba(255, 51, 102, 0.08);
  border-color: rgba(255, 51, 102, 0.2);
}

/* ─── Replay Controls ───────────────────────────── */
.replay-bar {
  display: none;
  padding: var(--sp-sm) var(--sp-lg);
  border-bottom: 1px solid var(--glass-border);
  align-items: center;
  gap: var(--sp-md);
}

.replay-bar.visible { display: flex; }

.replay-progress {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.replay-progress-fill {
  height: 100%;
  background: var(--accent-orange);
  border-radius: 2px;
  transition: width 0.1s linear;
}

.replay-time {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-secondary);
  min-width: 40px;
}

.replay-speed {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 140, 0, 0.15);
  color: var(--accent-orange);
  cursor: pointer;
}

/* ─── Empty State ───────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: var(--sp-lg);
  opacity: 0.3;
}

.empty-text {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ─── Connection Toast ──────────────────────────── */
.toast {
  position: fixed;
  top: calc(var(--safe-top) + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-200px);
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 300;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.toast.visible {
  transform: translateX(-50%) translateY(0);
}

.toast.error {
  background: rgba(199, 78, 10, 0.85);
  color: white;
  backdrop-filter: blur(10px);
}

.toast.success {
  background: rgba(33, 133, 75, 0.2);
  color: var(--accent-green-bright);
  border: 1px solid rgba(33, 133, 75, 0.4);
  backdrop-filter: blur(10px);
}

.toast.info {
  background: rgba(0, 229, 255, 0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 229, 255, 0.25);
  backdrop-filter: blur(10px);
}

.toast.warning {
  background: rgba(255, 215, 0, 0.12);
  color: var(--accent-gold);
  border: 1px solid rgba(255, 215, 0, 0.25);
  backdrop-filter: blur(10px);
}

/* ─── Ticker Modal ─────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10001;
  gap: var(--sp-md);
  /* Side padding only — let the modal-content handle its own top/bottom
     spacing so the sheet can sit RIGHT above the holo-nav without
     a secondary padding layer shoving it up. */
  padding-left: var(--sp-md);
  padding-right: var(--sp-md);
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  padding-bottom: 0;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 400px;
  border-radius: 20px 20px 0 0;     /* round only top corners — flush bottom edge has no need for round corners */
  display: flex;
  flex-direction: column;
  /* 2026-05-19 — operator-reported "modals hovering off bottom".  Was:
     margin-bottom = nav-height + safe + 4 (sheet floats ABOVE the
     holo-nav with the nav still visible).  Now: flush to viewport
     bottom (covers the nav while modal is open); max-height computed
     so the TOP edge of the sheet stays in the same place as before:
       prior top  = safe-top + 20
       new max-h  = 100vh - safe-top - 20
     keeps top constant; sheet just extends down by nav-height + safe.
     Bottom padding inside the modal accounts for the home-indicator. */
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - 20px);
  margin-bottom: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
  animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* Drag-to-dismiss pill */
.modal-grabber {
  /* Phase E grabber is visible on ALL modals (ticker, scanner, cluster).
     Bumped from rgba 0.18 → 0.42 alpha + 52px width for a clear pill
     affordance that reads as "draggable" at a glance. */
  width: 52px;
  height: 5px;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 3px;
  margin: 10px auto 6px;
  cursor: grab;
  flex-shrink: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
/* `:hover` only on devices that actually hover (mouse/trackpad). iOS
   Safari sticks :hover after a tap and left the grabber permanently
   scale-stretched after each open, which read as "broken modal". */
@media (hover: hover) {
  .modal-grabber:hover { background: rgba(255,255,255,0.65); transform: scaleX(1.1); }
}
.modal-grabber:active { cursor: grabbing; background: rgba(255,255,255,0.75); }

@keyframes slideUp {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--sp-lg);
  border-bottom: 1px solid var(--glass-border);
}

.modal-title {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.modal-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.modal-subtitle.positive { color: var(--accent-green); }
.modal-subtitle.negative { color: var(--accent-red); }

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 51, 102, 0.15);
  border: 1px solid rgba(255, 51, 102, 0.3);
  color: var(--accent-red);
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.modal-close:active { transform: scale(0.9); }

.modal-body {
  padding: var(--sp-lg);
  /* Extra bottom padding so the last section clears the modal footer
     and never hides behind the fixed holo-nav on short viewports. */
  padding-bottom: calc(var(--sp-lg) + 24px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  flex: 1;
  overflow-y: auto;
}

.modal-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.modal-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.modal-chart-placeholder {
  width: 100%;
}

.modal-chart-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  /* Fix 3 — intraday buttons (1m/5m/15m/1H) land us over the width on
     phones; switch to a single-row horizontal scroll so the toolbar
     can hold all timeframes without wrapping into two rows. */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.modal-chart-toolbar::-webkit-scrollbar { height: 4px; }
.modal-chart-toolbar::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.25);
  border-radius: 2px;
}
.modal-chart-toolbar .tf-btn { flex: 0 0 auto; }

/* Fix 1 — crosshair + OHLCV readout. Legend sits absolutely inside
   the chart wrapper; wrapper itself is position:relative (set inline
   by renderCandleChart). Pointer-events stays off so the SVG still
   receives movement events underneath. */
.chart-crosshair-wrap {
  touch-action: none;   /* let pointermove on touch not scroll */
}
.chart-crosshair-legend {
  position: absolute;
  pointer-events: none;
  min-width: 118px;
  padding: 6px 8px;
  background: rgba(8, 16, 24, 0.92);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 6px;
  color: var(--text-primary, #d6faff);
  font: 500 0.68rem/1.25 var(--font-mono, monospace);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  z-index: 4;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.chart-crosshair-legend.up { border-color: rgba(46, 204, 113, 0.55); }
.chart-crosshair-legend.down { border-color: rgba(232, 93, 42, 0.55); }
.chart-crosshair-legend .xh-time {
  font-size: 0.62rem;
  color: var(--text-dim, #7cb7c4);
  margin-bottom: 3px;
  letter-spacing: 0.04em;
}
.chart-crosshair-legend .xh-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  row-gap: 1px;
}
.chart-crosshair-legend .xh-k {
  color: var(--text-dim, #7cb7c4);
  font-weight: 700;
}
.chart-crosshair-legend .xh-v {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tf-btn {
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  font: 600 0.7rem/1 var(--font-mono);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tf-btn:hover { color: var(--text-primary); background: rgba(0, 229, 255, 0.12); }
.tf-btn.active {
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.18);
  border-color: rgba(0, 229, 255, 0.55);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.18) inset;
}

.tf-rth {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--text-dim);
  font: 600 0.65rem/1 var(--font-mono);
  cursor: pointer;
  user-select: none;
}
.tf-rth input { accent-color: #00e5ff; }

#modal-chart-scroll {
  /* Keep scroll affordance subtle; the chart can extend wider than the
     viewport for long timeframes. */
  scrollbar-width: thin;
  /* 2026-05-19 — operator-reported "charts not scrollable anymore".
     iOS Safari needs touch-action: pan-x to allow horizontal panning
     inside a fixed-height overflow:auto container nested inside a
     modal sheet; without it, the parent's vertical pan handler
     captures the touch and the chart never moves. */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
#modal-chart-scroll::-webkit-scrollbar { height: 4px; }
#modal-chart-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 229, 255, 0.25);
  border-radius: 2px;
}
/* 2026-05-19 — double-tap-to-fullscreen.  When operator double-taps
   the chart, we add the .is-fullscreen class to #modal-chart-scroll
   which expands it to cover the full viewport.  Tap again to exit. */
#modal-chart-scroll.is-fullscreen {
  position: fixed;
  inset: 0;
  height: 100dvh !important;
  width: 100vw !important;
  z-index: 12000;
  background: #05070b;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0;
}
#modal-chart-scroll.is-fullscreen #modal-chart {
  /* In fullscreen, recompute width up to (bars × bigger perBar) by
     scaling the inline-style width via transform so we keep the
     existing renderer untouched. */
  transform-origin: left center;
}

/* 2026-05-27 — see-through-fullscreen-chart fix.  Two root causes diagnosed:
   (1) `.modal-content` has `will-change: transform` (for the slideUp
       animation), which per CSS spec makes IT the containing block for any
       `position:fixed` descendant — so `#modal-chart-scroll.is-fullscreen`'s
       `inset:0` + `100vw/100dvh` was anchored to the 400px sheet, NOT the
       viewport.  (2) The `.modal-overlay` (60% black + blur) kept covering
       the real viewport, bleeding through the boxed-in "fullscreen" chart.
   Fix: when the chart is fullscreen, RELEASE the containing-block trap on
   `.modal-content` and HIDE the overlay.  Driven by `body.chart-fullscreen`
   so it works in :has()-less browsers and stays in lockstep with the
   `.is-fullscreen` toggle, which `app.js` togglerFs sets together with the
   body class (debounced + state-driven so rapid double-tap can't desync). */
body.chart-fullscreen .modal-overlay { display: none; }
body.chart-fullscreen .modal-content {
  /* Release EVERY property that makes an element a containing block for
     position:fixed descendants.  My first pass only released transform +
     will-change; CDP proved the chart-scroll's top:0 left:0 was still
     resolving to .modal-content's box (50, 20) — caused by .modal-content
     having `glass-heavy`'s `backdrop-filter` (per CSS spec, backdrop-filter
     ALSO traps fixed descendants, same as transform).  Plus filter,
     perspective, contain for safety. */
  transform: none !important;
  will-change: auto;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  overflow: visible;
  /* Hide the sheet's in-flow children so they don't paint over the fullscreen
     chart (the descendant rule below re-shows only #modal-chart-scroll). */
  visibility: hidden;
}
body.chart-fullscreen #modal-chart-scroll.is-fullscreen {
  visibility: visible;
  /* Override the inline `background: rgba(0,229,255,0.05)` that the chart
     renderer sets on the scroll container — without !important the inline
     5%-cyan wins over the stylesheet's #05070b, so the underlying tab
     leaks through.  CDP-confirmed 2026-05-27. */
  background: #05070b !important;
}

.modal-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
}

.modal-stat {
  padding: var(--sp-md);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  text-align: center;
}

.modal-stat-label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.modal-stat-value {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.score-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  background: rgba(0, 229, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.score-breakdown-formula {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-cyan);
  letter-spacing: 0.02em;
}

.score-breakdown-note {
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.score-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-xs);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.score-breakdown-grid .kv {
  display: flex;
  justify-content: space-between;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.04);
}

.score-breakdown-grid .kv .k {
  color: var(--text-dim);
}

.score-breakdown-grid .kv .v {
  color: var(--text);
}

.score-breakdown-grid .kv .v.pending {
  color: var(--text-dim);
  font-style: italic;
}

.modal-footer {
  padding: var(--sp-lg);
  border-top: 1px solid var(--glass-border);
  display: flex;
  gap: var(--sp-sm);
}

.modal-btn {
  flex: 1;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-btn:active { transform: scale(0.97); }

/* ─── Home View (Phase 2b.6 rewrite) ────────────────
   Borderless sections with glass-heavy background only.
   SVG icons match the bottom-nav stroke style. Each
   section is a tappable route. */

/* Scope to .active so the base `.view { display: none }` still hides
   the Home section when any OTHER tab is the active view. Without
   `.active` the ID selector wins over `.view` and Home leaks across
   every tab. */
#view-home.active {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-sm);
}

.home-section {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.025) 0%,
    rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 14px;
  padding: var(--sp-md) var(--sp-md) calc(var(--sp-md) + 2px);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.home-section:active { transform: scale(0.985); }

.home-section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}

.home-section-icon {
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--accent-cyan);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.45));
}

.home-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  flex: 1;
}

.home-section-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: -0.02em;
}

.home-section-action {
  background: rgba(0, 229, 255, 0.1);
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.home-empty {
  padding: var(--sp-md) 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* Portfolio stats block — 4 compact mini-stats */
.home-portfolio-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xs);
  margin-bottom: var(--sp-sm);
}
.home-portfolio-stats .home-stat {
  text-align: left;
}
.home-stat-label {
  font-size: 0.55rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.home-stat-value {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: -0.02em;
}
.home-stat-value.pos { color: #7fa; }
.home-stat-value.neg { color: #ff6b6b; }

.home-portfolio-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-portfolio-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--sp-sm);
  align-items: baseline;
  padding: 6px 4px;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.home-portfolio-row:last-child { border-bottom: none; }
.home-portfolio-row .sym {
  font-weight: 700;
  color: var(--text-primary);
}
.home-portfolio-row .qty {
  font-family: var(--font-mono);
  color: var(--text-dim);
  font-size: 0.7rem;
}
.home-portfolio-row .mkt {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: 0.7rem;
}
.home-portfolio-row .pnl {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.home-portfolio-row .pnl.pos { color: #7fa; font-weight: 700; }
.home-portfolio-row .pnl.neg { color: #ff6b6b; font-weight: 700; }
.home-portfolio-row .pnl.flat { color: #8892b0; }

/* A position that has a linked open order — trim the bottom border so
   the order sub-rows visually attach to the parent position. */
.home-portfolio-row.has-orders { border-bottom: none; padding-bottom: 4px; }
.home-portfolio-row.orphan .sym { color: var(--text-secondary); font-style: italic; }

/* Open orders attached under their matching portfolio position.
   Indented + dimmer than the parent row so the visual hierarchy is
   obvious: position above, its orders below. */
.home-order-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 6px 12px;
  padding-left: 10px;
  border-left: 2px solid rgba(108,248,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding-bottom: 6px;
}
.home-portfolio-rows > .home-order-stack:last-child,
.home-pending-orders > .home-order-stack:last-child { border-bottom: none; }
.home-order-row {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 4px 4px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 120ms ease-out;
}
.home-order-row:hover { background: rgba(108,248,255,0.05); }
.home-order-row .side {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.home-order-row .side.buy  { color: #7fa; background: rgba(127,250,170,0.10); }
.home-order-row .side.sell { color: #ff6b6b; background: rgba(255,107,107,0.10); }
.home-order-row .qty,
.home-order-row .entry {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.home-order-row .pnl {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.home-order-row .pnl.pos { color: #7fa; }
.home-order-row .pnl.neg { color: #ff6b6b; }

/* Stop/target legs — render directly under the entry row so the user
   sees the full bracket attached to this position. */
.home-order-bracket {
  display: flex;
  gap: 12px;
  padding: 2px 4px 2px 4px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
}
.home-order-bracket .bracket-leg {
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.home-order-bracket .bracket-leg.stop   { color: #ff9a9a; }
.home-order-bracket .bracket-leg.target { color: #8de0c4; }

/* Pending orders sub-section — orders that have no matching portfolio
   position yet (e.g. a BUY that hasn't filled). Sits at the bottom of
   the Portfolio card with a quiet header. */
.home-pending-orders:empty { display: none; }
.home-pending-orders {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.home-pending-head {
  font-size: 0.62rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* Featured scanner list — mirrors race-bar but compact */
.home-scanner-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-scanner-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: var(--sp-sm);
  padding: 6px 4px;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.home-scanner-row:last-child { border-bottom: none; }
.home-scanner-row .rnk {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  text-align: center;
}
.home-scanner-row .sym { font-weight: 700; }
.home-scanner-row .px {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.home-scanner-row .pct {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.home-scanner-row .pct.pos { color: #7fa; }
.home-scanner-row .pct.neg { color: #ff6b6b; }

/* Phase 2b.7 Step 5 — SFTi Group 2x2 grid on Home */
.sfti-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
}
.sfti-grid-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.sfti-grid-tile:hover {
  border-color: rgba(0, 229, 255, 0.5);
  transform: translateY(-1px);
}
.sfti-grid-tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.12);
  margin-bottom: 4px;
}
.sfti-grid-label {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 0.04em;
}
.sfti-grid-meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
}
.sfti-grid-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  font-size: 0.78rem;
  cursor: pointer;
}
.sfti-grid-row .sym {
  font-weight: 700;
  color: var(--text-primary);
}
.sfti-grid-row .pct {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.sfti-grid-row .pct.pos { color: #7fa; }
.sfti-grid-row .pct.neg { color: #ff6b6b; }
.sfti-grid-empty {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: center;
  padding: 6px 0;
}

/* Watchlist rows — same shape as scanner rows */
.home-watchlist-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-watchlist-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--sp-sm);
  align-items: baseline;
  padding: 6px 4px;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
}
.home-watchlist-row:last-child { border-bottom: none; }
.home-watchlist-row .sym { font-weight: 700; }
.home-watchlist-row .px {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
}
.home-watchlist-row .pct {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.home-watchlist-row .pct.pos { color: #7fa; }
.home-watchlist-row .pct.neg { color: #ff6b6b; }

/* Bug B — dual watchlist grid (SFTi.MS | P.T) on Home. Patterns after
   the SFTi scanner 2x2 grid; collapses to a single column < 440px so
   tall phones don't halve the card width. */
.home-watchlists-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 439px) {
  .home-watchlists-grid { grid-template-columns: 1fr; }
}
.home-watchlist-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 10px;
  padding: 8px 10px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.home-watchlist-card:hover { border-color: rgba(0, 229, 255, 0.5); }
.home-watchlist-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(0, 229, 255, 0.12);
  margin-bottom: 4px;
}
.home-watchlist-card-name {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 0.04em;
}
.home-watchlist-card-meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
}
.home-watchlist-card .home-watchlist-row {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.home-watchlist-card .home-watchlist-row:last-child { border-bottom: none; }
.home-watchlist-card-empty {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: center;
  padding: 8px 0;
}

/* News list */
.home-news-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.home-news-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-sm);
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.72rem;
}
.home-news-row:last-child { border-bottom: none; }
.home-news-row .chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  background: rgba(0, 229, 255, 0.1);
  color: var(--accent-cyan);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 700;
  height: fit-content;
}
.home-news-row .summary {
  color: var(--text-secondary);
  line-height: 1.35;
}
.home-news-row .ts {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}

/* ─── Home: Signals feed ───────────────────────── */
.home-signals-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.home-signal-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.12s ease;
}
.home-signal-row:last-child { border-bottom: none; }
.home-signal-row:hover { background: rgba(0, 229, 255, 0.05); }
.home-signal-row .chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: rgba(0, 229, 255, 0.12);
  color: var(--accent-cyan);
  border-radius: 4px;
  padding: 2px 6px;
  font-weight: 700;
  grid-row: 1;
  grid-column: 1;
}
.home-signal-row .strategy {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-secondary);
  grid-row: 1;
  grid-column: 2;
  align-self: center;
}
.home-signal-row .meta {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  grid-row: 1;
  grid-column: 3;
  align-self: center;
}
.home-signal-row .entries {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
.home-signal-row .entries b {
  color: var(--text-secondary);
  font-weight: 700;
  margin-right: 2px;
}

/* ─── Scanners View ────────────────────────────── */
.scanners-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: var(--sp-lg);
}

.scanner-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.scanner-item {
  padding: var(--sp-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scanner-name {
  font-size: 0.85rem;
  font-weight: 500;
}

.scanner-status {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.scanner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.scanner-dot.active {
  background: var(--accent-green);
  box-shadow: var(--glow-green);
  animation: pulse 2s ease-in-out infinite;
}

.scanner-dot.inactive {
  background: var(--accent-red);
  opacity: 0.5;
}

/* Phase 2a.6 — multi-scanner UI */

.scanner-hero {
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.scanner-hero:active { transform: scale(0.985); }
.scanner-hero:hover { border-color: rgba(0, 229, 255, 0.4); }

.scanner-hero-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.scanner-hero-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.scanner-hero-meta {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 10px;
  font-family: var(--font-mono);
}
.scanner-hero-cta {
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--accent-cyan);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.scanner-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.scanner-badge.race {
  background: linear-gradient(120deg, var(--accent-magenta, #ff3caf) 0%, var(--accent-cyan, #00e5ff) 100%);
  color: #000;
}

.scanner-pool-stats {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(0, 229, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
}
.scanner-pool-stats strong { color: var(--text); }

.scanner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.scanner-card {
  padding: 14px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.scanner-card-off { opacity: 0.55; }

.scanner-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.scanner-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  flex: 1;
}
.scanner-card-type {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}
.scanner-card-desc {
  font-size: 0.72rem;
  color: var(--text-secondary, var(--text-dim));
  line-height: 1.35;
  min-height: 2em;
}
.scanner-card-meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  margin-top: 2px;
}
.scanner-card-err {
  color: var(--accent-red);
  font-size: 0.63rem;
  margin-top: 2px;
}

.scanner-top-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  padding: 6px 0 2px;
  border-top: 1px solid var(--glass-border);
}
.scanner-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
}
.scanner-top-tick {
  font-weight: 600;
  letter-spacing: 0.04em;
}
.scanner-empty {
  font-size: 0.75rem;
  color: var(--text-dim);
  padding: 10px 0 4px;
  text-align: center;
  font-style: italic;
}

/* Settings scanner toggle list */
.settings-scanner-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-scanner-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 229, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}
.settings-scanner-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-scanner-name {
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.settings-scanner-type {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
}
.settings-scanner-err {
  font-size: 0.65rem;
  color: var(--accent-red);
  margin-top: 2px;
}
.settings-scanner-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  white-space: nowrap;
}
.toggle-track.race {
  background: linear-gradient(120deg, var(--accent-magenta, #ff3caf) 0%, var(--accent-cyan, #00e5ff) 100%);
  pointer-events: none;
  opacity: 0.85;
}
.toggle-track.race .toggle-thumb { transform: translateX(100%); }
.settings-footnote {
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.settings-footnote strong { color: var(--text); }

/* Scanner detail modal (Phase 2a.6) */
.scanner-modal-top20 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.scanner-modal-row {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(0, 229, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.scanner-modal-row:active {
  background: rgba(0, 229, 255, 0.12);
}
.scanner-modal-rank {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.scanner-modal-tick {
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 0.86rem;
}
.scanner-modal-price {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-dim);
}
.scanner-modal-pct {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 56px;
  text-align: right;
}

/* Bug D — Replay modal styles. Pills sit across the top, session-date
   input on the row below. Rows reuse .scanner-modal-row geometry with
   a wider pct column so window_peak_pct AND window_close_pct fit. */
.replay-modal-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}
.replay-window-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.replay-pill {
  padding: 7px 6px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(0, 229, 255, 0.04);
  color: var(--text-secondary);
  border-radius: 999px;
  font-family: 'Orbitron', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.replay-pill:hover { border-color: rgba(0, 229, 255, 0.55); color: var(--text-primary); }
.replay-pill.active {
  background: rgba(0, 229, 255, 0.22);
  border-color: rgba(0, 229, 255, 0.7);
  color: #fff;
}
.replay-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.replay-date-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.replay-date-input {
  flex: 1;
  background: rgba(10, 15, 26, 0.8);
  border: 1px solid rgba(0, 229, 255, 0.3);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: 8px;
}
.replay-modal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 55vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.replay-modal-row {
  /* P24 defect 6: 5 columns — rank · sym · open · move% · close — plus
     volume on its own row underneath. Operator wants start price + %
     move + final price per session window. */
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(0, 229, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.replay-modal-row .open,
.replay-modal-row .close-px {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  min-width: 58px;
  text-align: right;
}
.replay-modal-row .move {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 76px;
  text-align: right;
}
.replay-modal-row .move.pos { color: #7fa; }
.replay-modal-row .move.neg { color: #ff6b6b; }
.replay-modal-row .move .peak-sub {
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.6rem;
  margin-left: 2px;
}
.replay-modal-row:active { background: rgba(0, 229, 255, 0.14); }
.replay-modal-row .rnk {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.replay-modal-row .sym {
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 0.86rem;
}
.replay-modal-row .peak {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: #7fa;
  min-width: 58px;
  text-align: right;
}
.replay-modal-row .peak.neg { color: #ff6b6b; }
.replay-modal-row .close {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  min-width: 58px;
  text-align: right;
}
.replay-modal-row .close.pos { color: #7fa; }
.replay-modal-row .close.neg { color: #ff6b6b; }
.replay-modal-row .vol {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  padding-top: 2px;
}

/* Corpus tab (Phase 2b.3) — RAG passages in ticker modal */
.corpus-subtitle {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 10px;
}
.corpus-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--accent-cyan);
  letter-spacing: 0.04em;
}

.corpus-input-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.corpus-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: rgba(0, 229, 255, 0.04);
  color: var(--text);
  font-size: 0.82rem;
}
.corpus-input::placeholder { color: var(--text-dim); }

.corpus-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.corpus-card {
  padding: 10px 12px;
  background: rgba(0, 229, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}
.corpus-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.corpus-card-source {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-cyan);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.corpus-card-source:hover { text-decoration: underline; }
.corpus-card-score {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-green, #7fa);
  font-weight: 700;
}
.corpus-card-meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.corpus-card-text {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text);
  max-height: 190px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding-right: 4px;
}
.corpus-empty {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-style: italic;
  padding: 8px 0;
  text-align: center;
}
.corpus-empty code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 5px;
  background: rgba(0, 229, 255, 0.1);
  border-radius: 4px;
  font-style: normal;
}

/* ─── History View ────────────────────────────── */
.search-input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  outline: none;
  margin-bottom: var(--sp-lg);
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: var(--glass-border-active);
}

.search-input::placeholder {
  color: var(--text-dim);
}

.history-tabs {
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--glass-border);
}

.history-tab {
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
}

.history-tab.active {
  color: var(--accent-cyan);
}

.history-tab.active::after {
  content: '';
  position: absolute;
  bottom: -var(--sp-md);
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--accent-cyan);
  border-radius: 1px;
}

.history-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

/* ─── Telemetry View ────────────────────────────── */
.telem-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-lg);
}

.telem-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 0.04em;
}

.telem-ts {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
}

.telem-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin: var(--sp-lg) 0 var(--sp-sm);
  padding-left: 2px;
  border-left: 2px solid var(--accent-cyan);
  padding-left: var(--sp-sm);
}

.telem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-sm);
}

.telem-card {
  padding: var(--sp-md) var(--sp-sm);
  text-align: center;
  border-radius: 10px;
}

.telem-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.telem-label {
  font-size: 0.55rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── Statik.ai FSM strip (north-star theme, 2026-05-02) ─────── */
.fsm-strip {
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--font-mono);
  margin-bottom: var(--sp-sm);
  min-width: 0;
  overflow: hidden;
}
.fsm-strip-summary {
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}
/* each value+unit pair is non-breaking so units never orphan from values */
.fsm-strip-stat {
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.fsm-strip-stat b {
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 12px;
}
.fsm-strip-state {
  color: #3aff8a;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.fsm-strip-state.fault { color: #ff5a7a; }
.fsm-strip-state.idle { color: #6cf8ff; }
.fsm-strip-state.executing { color: #3aff8a; }
.fsm-strip-unit {
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fsm-strip-tape {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 4px;
  scroll-snap-type: x proximity;
  /* fade right edge so user knows there's more to scroll */
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.fsm-strip-tape::-webkit-scrollbar { display: none; }
.fsm-tape-pill {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(108, 248, 255, 0.06);
  border: 1px solid rgba(108, 248, 255, 0.18);
  color: #cfe;
  font-size: 10px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  scroll-snap-align: start;
}
.fsm-tape-pill .ms { color: #3aff8a; font-weight: 700; }
.fsm-tape-pill .age { color: var(--text-dim); margin-left: 4px; }
.fsm-tape-pill.fail {
  background: rgba(255, 90, 122, 0.06);
  border-color: rgba(255, 90, 122, 0.35);
}
.fsm-tape-pill.fail .ms { color: #ff5a7a; }

/* ─── Responsive ────────────────────────────────── */
@media (min-width: 768px) {
  .view-container {
    max-width: 600px;
    margin: 0 auto;
  }

  .memory-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ═════════════════════════════════════════════════════════════════
   DISCOVERY TAB — Phase E pattern discovery UI
   ════════════════════════════════════════════════════════════════ */

:root {
  --disco-bg: rgba(8, 12, 20, 0.55);
  --disco-ink: #d6e4f2;
  --disco-dim: #7d8fa5;
  --disco-accent: #6cf8ff;
  --disco-win: #3aff8a;
  --disco-moon: #ffc84a;
  --disco-fade: #ff5a7a;
  --disco-deployed: #3aff8a;
  --disco-candidate: #6cf8ff;
  --disco-retired: #555f70;
}

#view-discovery {
  /* Bottom clearance for holo-nav is applied at .view-container level
     via --nav-clearance; keep a small internal gap so the last cluster
     card doesn't hug the very edge. */
  padding-bottom: var(--sp-md);
}

/* ── Header ──────────────────────────────────────────────── */
.disco-hdr {
  margin: 8px 12px 14px;
  padding: 18px 16px 14px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.disco-hdr::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 0deg at 50% 50%, transparent, var(--disco-accent) 15%, transparent 30%, var(--disco-win) 50%, transparent 65%);
  filter: blur(22px);
  opacity: 0.14;
  z-index: -1;
  animation: disco-sweep 18s linear infinite;
}
@keyframes disco-sweep {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
.disco-hdr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.disco-hdr-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.disco-hdr-glyph {
  font-size: 1.8rem;
  color: var(--disco-accent);
  text-shadow: 0 0 18px var(--disco-accent), 0 0 36px rgba(108,248,255,0.3);
  animation: disco-glyph-pulse 2.4s ease-in-out infinite;
}
@keyframes disco-glyph-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.08); }
}
.disco-hdr-eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--disco-dim);
}
.disco-hdr-h1 {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--disco-ink);
  text-shadow: 0 0 14px rgba(108,248,255,0.35);
}
.disco-hdr-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.disco-next {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--disco-dim);
  font-variant-numeric: tabular-nums;
}
.disco-ver-toggle {
  display: inline-flex;
  background: rgba(10,20,35,0.6);
  border: 1px solid rgba(108,248,255,0.25);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.disco-ver-toggle button {
  background: transparent;
  border: 0;
  color: var(--disco-dim);
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s;
}
.disco-ver-toggle button.active {
  background: linear-gradient(135deg, var(--disco-accent), #3a8cff);
  color: #001018;
  box-shadow: 0 0 12px rgba(108,248,255,0.5);
}

/* ── Stat strip ──────────────────────────────────────────── */
.disco-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.disco-stat {
  text-align: center;
  padding: 10px 4px;
  background: rgba(10,16,26,0.45);
  border: 1px solid rgba(108,248,255,0.12);
  border-radius: 10px;
  transition: all 0.2s;
}
.disco-stat:hover {
  border-color: rgba(108,248,255,0.3);
  transform: translateY(-1px);
}
.disco-stat-val {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--disco-accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(108,248,255,0.35);
}
.disco-stat-lbl {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--disco-dim);
  margin-top: 2px;
}

/* ── Section ─────────────────────────────────────────────── */
.disco-section {
  margin: 14px 12px;
}
.disco-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 4px 10px;
  gap: 8px;
  flex-wrap: wrap;
}
.disco-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--disco-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.disco-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--disco-win);
  box-shadow: 0 0 10px var(--disco-win);
  animation: disco-pulse-flash 1.6s ease-in-out infinite;
}
@keyframes disco-pulse-flash {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px var(--disco-win); }
  50%      { opacity: 0.4; transform: scale(0.7); box-shadow: 0 0 2px var(--disco-win); }
}
.disco-section-sub {
  font-size: 0.6rem;
  color: var(--disco-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.disco-legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 2px;
}
.disco-legend-dot-deployed { background: var(--disco-deployed); box-shadow: 0 0 6px var(--disco-deployed); }
.disco-legend-dot-candidate { background: var(--disco-candidate); }
.disco-legend-dot-retired { background: var(--disco-retired); }

/* ── Ignition Board ──────────────────────────────────────── */
.disco-ignition {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.disco-ignition::-webkit-scrollbar { display: none; }
.ignition-card {
  flex: 0 0 78%;
  max-width: 280px;
  scroll-snap-align: start;
  background: linear-gradient(135deg, rgba(14,24,40,0.9), rgba(8,14,24,0.85));
  border: 1px solid rgba(108,248,255,0.2);
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}
.ignition-card.ignition-matched::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(58,255,138,0.08), transparent);
  animation: ignition-sweep 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ignition-sweep {
  from { transform: translateX(-100%); } to { transform: translateX(100%); }
}
.ignition-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.ignition-tkr {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--disco-ink);
  letter-spacing: 0.02em;
}
.ignition-cluster {
  font-size: 0.55rem;
  color: var(--disco-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ignition-pct {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ignition-pct.pos { color: var(--disco-win); }
.ignition-pct.neg { color: var(--disco-fade); }
.ignition-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--disco-dim);
  margin: 2px 0;
}
.ignition-row b {
  color: var(--disco-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Cluster Gallery — SFTi 3.1 T3: horizontal carousel matching
       Ignition Board so single page-swipe doesn't conflict with vert
       scroll. Cards are scroll-snap so a tap-and-flick lands on a
       card edge. */
.disco-clusters {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.disco-clusters::-webkit-scrollbar { display: none; }
.disco-clusters > .cluster-card {
  flex: 0 0 78%;
  max-width: 320px;
  scroll-snap-align: start;
}
/* Tuning + Events also as carousels for consistency. */
.disco-tuning {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.disco-tuning::-webkit-scrollbar { display: none; }
.disco-tuning > .tuning-pattern {
  flex: 0 0 78%;
  max-width: 320px;
  scroll-snap-align: start;
}
.disco-events {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.disco-events::-webkit-scrollbar { display: none; }
.disco-events > .event-card {
  flex: 0 0 70%;
  max-width: 280px;
  scroll-snap-align: start;
}

/* SFTi 3.2 Q7 — two-column section so Bandit Arms + Clusters read
   side-by-side. Stack on narrow screens. */
.disco-twocol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .disco-twocol { grid-template-columns: 1fr 1fr; }
}
.disco-twocol-half { display: flex; flex-direction: column; }

/* Episodes carousel — top-of-discovery historical-analog row. */
.disco-episodes,
.disco-arms,
.disco-drift {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.disco-episodes::-webkit-scrollbar,
.disco-arms::-webkit-scrollbar,
.disco-drift::-webkit-scrollbar { display: none; }
.episode-card,
.arm-card,
.drift-card {
  flex: 0 0 78%;
  max-width: 280px;
  scroll-snap-align: start;
  background: linear-gradient(135deg, rgba(14,24,40,0.9), rgba(8,14,24,0.85));
  border: 1px solid rgba(108,248,255,0.2);
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.episode-tkr {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--disco-ink);
  letter-spacing: 0.02em;
}
.episode-peak {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--disco-win);
  font-variant-numeric: tabular-nums;
}
.episode-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--disco-dim);
  margin: 2px 0;
}
.episode-row b { color: var(--disco-ink); font-variant-numeric: tabular-nums; }
.episode-spark {
  width: 100%; height: 32px; margin-top: 6px;
  background: rgba(0,0,0,0.25); border-radius: 4px;
}
.arm-bar { height: 6px; background: rgba(108,248,255,0.15); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.arm-bar-fill { height: 100%; background: var(--disco-win); transition: width .35s ease; }
.arm-caution { color: #ff9d3a; font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; }
.drift-action { color: #ff6b6b; font-weight: 700; }


.cluster-card {
  background: linear-gradient(135deg, rgba(12,20,34,0.9), rgba(6,10,18,0.88));
  border: 1px solid rgba(108,248,255,0.15);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.2,.8,.2,1);
}
.cluster-card:hover,
.cluster-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(108,248,255,0.45);
}
.cluster-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--disco-candidate);
  box-shadow: 0 0 12px currentColor;
  color: var(--disco-candidate);
}
.cluster-card[data-status="deployed"]::before {
  background: var(--disco-deployed);
  color: var(--disco-deployed);
}
.cluster-card[data-status="retired"]::before {
  background: var(--disco-retired);
  color: transparent;
}
.cluster-card[data-win="high"] {
  border-color: rgba(58,255,138,0.35);
  box-shadow: 0 0 24px rgba(58,255,138,0.12) inset;
}
.cluster-card[data-moon="yes"] {
  border-color: rgba(255,200,74,0.4);
  box-shadow: 0 0 24px rgba(255,200,74,0.15) inset, 0 0 16px rgba(255,200,74,0.25);
}
.cluster-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.cluster-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--disco-ink);
  letter-spacing: 0.01em;
}
.cluster-id {
  font-size: 0.55rem;
  color: var(--disco-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: ui-monospace, monospace;
}
.cluster-status-badge {
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.cluster-status-badge[data-status="deployed"] {
  background: rgba(58,255,138,0.15);
  color: var(--disco-deployed);
  border: 1px solid rgba(58,255,138,0.4);
}
.cluster-status-badge[data-status="candidate"] {
  background: rgba(108,248,255,0.12);
  color: var(--disco-candidate);
  border: 1px solid rgba(108,248,255,0.35);
}
.cluster-status-badge[data-status="retired"] {
  background: rgba(85,95,112,0.2);
  color: var(--disco-retired);
  border: 1px solid rgba(85,95,112,0.4);
}
/* Phase D5 — auto-discovered pattern chunk badge. ⚙ gear icon on
   cluster cards whose promotion triggered a writeback into rag_chunks.
   Clicking it opens the generated chunk instead of the centroid modal. */
.cluster-badges-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cluster-auto-badge {
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(255,200,58,0.12);
  color: #ffcc33;
  border: 1px solid rgba(255,200,58,0.4);
  cursor: pointer;
  transition: background 0.12s ease-in-out, transform 0.12s ease-out;
}
.cluster-auto-badge:hover {
  background: rgba(255,200,58,0.22);
  transform: translateY(-1px);
}
.cluster-provenance {
  font-size: 12px;
  line-height: 1.5;
  color: var(--disco-ink);
  background: rgba(6,10,18,0.6);
  border: 1px solid rgba(108,248,255,0.08);
  border-radius: 8px;
  padding: 10px;
  margin-top: 4px;
}
.cluster-provenance b {
  color: var(--disco-candidate);
  font-weight: 600;
}
.cluster-auto-chunk-body {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--disco-ink);
  background: rgba(6,10,18,0.75);
  border: 1px solid rgba(108,248,255,0.08);
  border-radius: 8px;
  padding: 12px;
  margin: 0;
  max-height: 60vh;
  overflow-y: auto;
}

/* Phase C4 — Pattern Tuning carousel. SFTi 3.3 iter1 — was overriding
   the horizontal-carousel rule above with column flex; removed the
   override so it scrolls horizontally like the other carousels. The
   carousel rule lives at the .disco-tuning block ~line 2932. */
.tuning-pattern {
  background: rgba(6,10,18,0.55);
  border: 1px solid rgba(108,248,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
}
.tuning-pattern.disabled { opacity: 0.55; }
.tuning-pattern-hdr {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  align-items: center;
}
.tuning-pattern-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--disco-candidate);
  letter-spacing: 0.02em;
}
.tuning-pattern-sub {
  font-size: 11px;
  opacity: 0.72;
  margin-top: 2px;
}
.tuning-win-bar {
  background: rgba(255,255,255,0.05);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.tuning-win-fill {
  height: 100%;
  border-radius: 999px;
  background: rgba(255,200,58,0.6);
  transition: width 0.3s ease;
}
.tuning-win-fill.high { background: rgba(58,255,138,0.8); }
.tuning-win-fill.mid  { background: rgba(255,200,58,0.7); }
.tuning-win-fill.low  { background: rgba(255,120,120,0.65); }
.tuning-thresholds {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tuning-threshold-row {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
  padding: 5px 8px;
  background: rgba(6,10,18,0.45);
  border-radius: 6px;
  border: 1px solid rgba(108,248,255,0.04);
  font-variant-numeric: tabular-nums;
}
.tuning-feat {
  color: var(--disco-ink);
  font-family: ui-monospace, monospace;
}
.tuning-op {
  opacity: 0.55;
  margin-left: 4px;
}
.tuning-vals {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tuning-base { opacity: 0.6; text-decoration: line-through; }
.tuning-arrow { font-size: 12px; }
.tuning-arrow.up   { color: #3aff8a; }
.tuning-arrow.down { color: #ff7878; }
.tuning-arrow.flat { color: #788; }
.tuning-curr { font-weight: 600; color: var(--disco-candidate); }
.tuning-drift { font-size: 10px; opacity: 0.75; padding-left: 4px; }
.tuning-drift.up   { color: #3aff8a; }
.tuning-drift.down { color: #ff7878; }
.tuning-drift.flat { color: #788; }
.tuning-meta {
  font-size: 10px;
  opacity: 0.55;
  text-align: right;
}
.tuning-no-thresholds {
  font-size: 11px;
  opacity: 0.55;
  padding: 6px 10px;
  text-align: center;
  font-style: italic;
}
@media (max-width: 600px) {
  .tuning-threshold-row { grid-template-columns: 1fr; }
  .tuning-meta { text-align: left; }
}

/* Phase E5 — Brain-Status GPU chip. Rendered in Telemetry under the
   History section. Pill per GPU: name + util % + bar + memory + temp
   + power + compute clients + cuML availability indicator (tells you
   whether cluster-v0 is on the GPU path or the CPU fallback). */
.gpu-pill {
  background: rgba(6,10,18,0.7);
  border: 1px solid rgba(108,248,255,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.gpu-pill-down {
  border-color: rgba(255,120,120,0.3);
  background: rgba(40,6,10,0.55);
}
.gpu-pill-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.gpu-pill-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--disco-candidate);
  letter-spacing: 0.02em;
}
.gpu-pill-util {
  font-size: 18px;
  font-weight: 700;
  font-family: 'Orbitron', ui-monospace, monospace;
}
.gpu-pill-util.idle { color: #788; }
.gpu-pill-util.warm { color: #ffcc33; }
.gpu-pill-util.hot  { color: #3aff8a; }
.gpu-pill-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  margin: 6px 0 8px;
  overflow: hidden;
}
.gpu-pill-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}
.gpu-pill-bar-fill.idle { background: rgba(120,120,136,0.6); }
.gpu-pill-bar-fill.warm { background: rgba(255,200,58,0.7); }
.gpu-pill-bar-fill.hot  { background: rgba(58,255,138,0.75); }
.gpu-pill-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  opacity: 0.82;
  margin-top: 3px;
}
.gpu-pill-row span { opacity: 0.6; }
.gpu-pill-row b { color: var(--disco-ink); }
.gpu-pill-mem-pct { margin-left: auto; opacity: 0.65; font-size: 10px; }
.gpu-pill-sub {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
}
.gpu-cuml-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.02em;
  margin-right: 8px;
  margin-bottom: 6px;
  font-weight: 600;
}
.gpu-cuml-pill.on {
  background: rgba(58,255,138,0.12);
  color: #3aff8a;
  border: 1px solid rgba(58,255,138,0.35);
}
.gpu-cuml-pill.off {
  background: rgba(255,200,58,0.1);
  color: #ffcc33;
  border: 1px solid rgba(255,200,58,0.3);
}
.gpu-meta {
  display: inline-block;
  font-size: 10px;
  opacity: 0.55;
  margin-left: 6px;
  margin-bottom: 6px;
}
.gpu-procs {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(6,10,18,0.5);
  border-radius: 8px;
  border: 1px solid rgba(108,248,255,0.06);
}
.gpu-procs-hdr {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--disco-candidate);
  opacity: 0.72;
  margin-bottom: 4px;
}
.gpu-proc-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 11px;
  padding: 2px 0;
}
.gpu-proc-pid {
  opacity: 0.55;
  font-family: ui-monospace, monospace;
}
.gpu-proc-name {
  flex: 1;
  color: var(--disco-ink);
}
.gpu-proc-row b { opacity: 0.8; font-size: 10px; }

/* Chart session-legend (Pre/RTH/AH/Overnight). One visible strip under
   the chart meta line. Swatch sizes match the inline shade tints in
   renderCandleChart so the legend reads like a key the user can match
   directly against the chart background. */
#modal-chart-legend .sess-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
#modal-chart-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  letter-spacing: 0.02em;
}
.cluster-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 0;
}
.cluster-metric {
  text-align: center;
  padding: 6px 2px;
  background: rgba(6,10,18,0.6);
  border-radius: 8px;
  border: 1px solid rgba(108,248,255,0.06);
}
.cluster-metric-val {
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--disco-ink);
}
.cluster-metric-val.win { color: var(--disco-win); }
.cluster-metric-val.moon { color: var(--disco-moon); }
.cluster-metric-lbl {
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--disco-dim);
  margin-top: 2px;
}
.cluster-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 4px;
}
.cluster-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--disco-accent), var(--disco-win));
  border-radius: inherit;
  transition: width 0.5s cubic-bezier(.2,.8,.2,1);
}
.cluster-now-matching {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  min-height: 20px;
}
.cluster-match-chip {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  background: rgba(58,255,138,0.18);
  color: var(--disco-win);
  border: 1px solid rgba(58,255,138,0.4);
  border-radius: 999px;
  animation: cluster-match-in 0.4s cubic-bezier(.2,.8,.2,1);
}
@keyframes cluster-match-in {
  from { opacity: 0; transform: translateY(4px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* ── Tier tabs ───────────────────────────────────────────── */
.disco-tier-tabs {
  display: inline-flex;
  background: rgba(10,20,35,0.6);
  border: 1px solid rgba(108,248,255,0.18);
  border-radius: 999px;
  padding: 2px;
}
.disco-tier-tabs button {
  background: transparent;
  border: 0;
  color: var(--disco-dim);
  padding: 4px 10px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 999px;
  cursor: pointer;
}
.disco-tier-tabs button.active {
  background: rgba(108,248,255,0.2);
  color: var(--disco-ink);
}

/* ── Events list ─────────────────────────────────────────── */
.disco-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-row {
  display: grid;
  grid-template-columns: 60px 60px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(12,18,28,0.6);
  border: 1px solid rgba(108,248,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.7rem;
}
.event-row:hover {
  background: rgba(14,22,36,0.8);
  border-color: rgba(108,248,255,0.3);
}
.event-tkr {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--disco-ink);
}
.event-tier {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
}
.event-tier[data-tier="tier_20"] { background: rgba(108,248,255,0.15); color: var(--disco-accent); }
.event-tier[data-tier="tier_50"] { background: rgba(58,255,138,0.15); color: var(--disco-win); }
.event-tier[data-tier="tier_100"] { background: rgba(255,200,74,0.2); color: var(--disco-moon); }
.event-tier[data-tier="tier_500"] { background: rgba(255,120,200,0.2); color: #ff78c8; }
.event-tier[data-tier="tier_1000"] {
  background: linear-gradient(135deg, rgba(255,200,74,0.3), rgba(255,120,200,0.3));
  color: #fff;
  text-shadow: 0 0 8px #ffb247;
}
.event-pct {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--disco-win);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.event-date {
  font-size: 0.6rem;
  color: var(--disco-dim);
  font-variant-numeric: tabular-nums;
}
.event-session {
  font-size: 0.55rem;
  color: var(--disco-dim);
  letter-spacing: 0.06em;
}

/* ── Small viewport tweaks ───────────────────────────────── */
@media (max-width: 420px) {
  .disco-stats { grid-template-columns: repeat(2, 1fr); }
  .event-row { grid-template-columns: 55px 55px 1fr auto; font-size: 0.65rem; }
  .event-session { display: none; }
}
@media (min-width: 768px) {
  .disco-clusters { grid-template-columns: repeat(2, 1fr); }
}

/* ── Global live-feed pill (header) ──────────────────────── */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  border-radius: 999px;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  font-weight: 700;
  background: rgba(58,255,138,0.12);
  border: 1px solid rgba(58,255,138,0.4);
  color: #3aff8a;
  transition: all 0.25s;
  font-variant: all-small-caps;
}
.live-pill.offline {
  background: rgba(255,90,122,0.15);
  border-color: rgba(255,90,122,0.5);
  color: #ff5a7a;
}
.live-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: live-pill-pulse 1.4s ease-in-out infinite;
}
.live-pill.offline .live-pill-dot {
  animation: none;
}
@keyframes live-pill-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.75); }
}

/* ── Cluster detail modal feature table ──────────────────── */
.cluster-feat-hdr {
  margin-top: 14px;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--disco-dim);
}
.cluster-feat-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  margin-top: 8px;
  max-height: 42vh;
  overflow-y: auto;
  padding-right: 4px;
}
.cluster-feat-row {
  display: grid;
  grid-template-columns: 1.3fr 60px 50px;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: rgba(6,10,18,0.55);
  border: 1px solid rgba(108,248,255,0.08);
  border-radius: 6px;
  font-size: 0.7rem;
}
.cluster-feat-name { color: var(--disco-ink); font-family: ui-monospace, monospace; }
.cluster-feat-val  { color: var(--disco-accent); text-align: right; font-variant-numeric: tabular-nums; }
.cluster-feat-std  { color: var(--disco-dim); font-size: 0.62rem; font-variant-numeric: tabular-nums; }

/* ─── Phase 3.1.5 — Open Orders widget ──────────────────────────────
   Lives in:
     - Home tab (.home-positions-rows, one row per active position)
     - Ticker modal (.modal-open-orders, stacked detail card)
     - Race card header (.position-badge, inline ORDER/FILLED chip)
   Status color palette:
     pending → amber, filled → green, closing → blue, closed → gray,
     rejected → red. */

/* Home tab — row list shaped like home-portfolio-row */
.home-positions-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.home-position-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(108,248,255,0.05);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 120ms ease-out;
}
.home-position-row:last-child { border-bottom: none; }
.home-position-row:hover { background: rgba(108,248,255,0.05); }
.home-position-row .sym {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.home-position-row .side {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.home-position-row .side.buy  { color: #7fa; background: rgba(127,250,170,0.10); }
.home-position-row .side.sell { color: #ff6b6b; background: rgba(255,107,107,0.10); }
.home-position-row .qty {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.home-position-row .entry {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.home-position-row .pnl {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.home-position-row .pnl.pos { color: #7fa; }
.home-position-row .pnl.neg { color: #ff6b6b; }

/* Status badge shared by race card + home + modal */
.position-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.position-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.position-badge[data-status="pending"]  { color: #ffc857; border-color: rgba(255,200,87,0.35); background: rgba(255,200,87,0.10); }
.position-badge[data-status="filled"]   { color: #7fa;    border-color: rgba(127,250,170,0.35); background: rgba(127,250,170,0.10); }
.position-badge[data-status="closing"]  { color: #6cf8ff; border-color: rgba(108,248,255,0.35); background: rgba(108,248,255,0.10); }
.position-badge[data-status="closed"]   { color: #888;    border-color: rgba(136,136,136,0.30); background: rgba(136,136,136,0.10); }
.position-badge[data-status="rejected"] { color: #ff6b6b; border-color: rgba(255,107,107,0.35); background: rgba(255,107,107,0.10); }
.position-badge.pulse { animation: _positionPulse 900ms ease-out 1; }
@keyframes _positionPulse {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.10); }
}

/* Race-card position badge — sits inline in the header after the ticker symbol */
.race-bar-header .position-badge {
  margin-left: 2px;
  font-size: 0.55rem;
  padding: 1px 5px;
}

/* Ticker-modal widget — stacked mini-card showing every leg */
.modal-open-orders {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.order-widget {
  background: rgba(6,10,18,0.55);
  border: 1px solid rgba(108,248,255,0.12);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.78rem;
}
.order-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.order-widget-head .sym {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.order-widget-legs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.order-leg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  text-align: center;
}
.order-leg .lbl {
  font-size: 0.58rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.order-leg .val {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.order-leg.entry  .val { color: #ffc857; }
.order-leg.stop   .val { color: #ff6b6b; }
.order-leg.target .val { color: #7fa; }
.order-leg.pnl    .val.pos { color: #7fa; }
.order-leg.pnl    .val.neg { color: #ff6b6b; }

/* ─── Phase 3.1.5 — live-update pulse ───────────────────────────────
   Added to any stat-box value whose textContent changes from a WS tick.
   Single-shot 150ms scale pulse so the user SEES the update. */
@keyframes _liveUpdatePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.live-pulse {
  animation: _liveUpdatePulse 160ms ease-out 1;
  transform-origin: center;
  display: inline-block;
}

/* Cluster-card summary line (Phase 3.1.5) — one-liner beneath metrics */
.cluster-summary {
  font-size: 0.68rem;
  color: var(--disco-dim);
  font-family: var(--font-mono);
  padding: 4px 10px 0;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
.cluster-summary b { color: var(--disco-accent); font-weight: 700; }

/* ── Signal execution status badge (Phase G.2) ──────────────────── */
.home-signal-row.is-blocked {
  opacity: 0.72;
}
.signal-exec-blocked {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  background: rgba(255, 90, 122, 0.14);
  color: #ff8aa0;
  border: 1px solid rgba(255, 90, 122, 0.38);
  white-space: nowrap;
  cursor: help;
}
/* P24 defects 1+2: advisory warn pill (orange, NOT a block). */
.signal-exec-warn {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  background: rgba(255, 176, 64, 0.14);
  color: #ffc370;
  border: 1px solid rgba(255, 176, 64, 0.38);
  white-space: nowrap;
  cursor: help;
}

/* ── SFTi 3.3 D5 / T7 #13 — Episodes catalyst filter chips ─────── */
.disco-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 12px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.disco-chips::-webkit-scrollbar { display: none; }
.disco-chip {
  padding: 5px 10px;
  font-size: 0.64rem;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--disco-dim, #aaa);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.disco-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-color, #e0e0e0);
}
.disco-chip.active {
  background: rgba(58, 255, 138, 0.16);
  color: #3aff8a;
  border-color: rgba(58, 255, 138, 0.45);
}

/* 2026-06-11 — operator: make the episode catalyst chips use the SAME segmented
   "slider-bar" pill control as the Recent Runners % tier-tabs. Sibling modifier
   (Rule #4b — reuses the .disco-tier-tabs visual language verbatim, zero JS
   change: the .disco-chip + data-cat hooks are preserved). Scrolls horizontally
   on narrow viewports rather than wrapping. */
.disco-chips.as-tier-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  background: rgba(10,20,35,0.6);
  border: 1px solid rgba(108,248,255,0.18);
  border-radius: 999px;
  padding: 2px;
  margin: 0 12px 8px;
  max-width: calc(100% - 24px);
}
.disco-chips.as-tier-tabs .disco-chip {
  background: transparent;
  border: 0;
  color: var(--disco-dim);
  padding: 4px 10px;
  border-radius: 999px;
}
.disco-chips.as-tier-tabs .disco-chip:hover {
  background: rgba(255,255,255,0.05);
  color: var(--disco-ink, #e0e0e0);
}
.disco-chips.as-tier-tabs .disco-chip.active {
  background: rgba(108,248,255,0.2);
  color: var(--disco-ink);
  border-color: transparent;
}

/* ── SFTi 3.3 D5 / T7 #12 — Composite breakdown modal ──────────── */
.composite-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.composite-modal {
  background: rgba(20, 20, 30, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px 16px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  font-family: var(--font-sans, system-ui);
  color: var(--text-color, #e0e0e0);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.composite-modal-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}
.composite-modal-title {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
}
.composite-modal-close {
  background: transparent;
  border: none;
  color: var(--disco-dim, #aaa);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.composite-modal-close:hover { color: #e0e0e0; }
.composite-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.composite-meta-label { color: var(--disco-dim, #888); }
.composite-meta-val { color: var(--text-color, #e0e0e0); font-weight: 600; }
.composite-factor-row {
  display: grid;
  grid-template-columns: 130px 1fr 50px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.composite-factor-name {
  color: var(--disco-dim, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.64rem;
}
.composite-factor-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.composite-factor-fill {
  height: 100%;
  background: linear-gradient(90deg, #3aff8a, #00d9ff);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.composite-factor-fill.is-neutral { background: rgba(180, 180, 180, 0.5); }
.composite-factor-fill.is-drag {
  background: linear-gradient(90deg, #ff8aa0, #ff4060);
}
.composite-factor-val {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-color, #e0e0e0);
}

/* "Why?" pill on race-bar header */
.race-why-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(58, 255, 138, 0.18);
  color: #3aff8a;
  border: 1px solid rgba(58, 255, 138, 0.4);
  font-size: 0.6rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.race-why-btn:hover { background: rgba(58, 255, 138, 0.32); }

/* ── SFTi 3.3 iter7 — Council Modal (agents at a table) ─────────── */

/* Make the Pattern Discovery glyph tappable + advertise it. */
.disco-hdr-glyph.council-trigger {
  cursor: pointer;
  transition: transform 0.2s, color 0.2s, text-shadow 0.2s;
}
.disco-hdr-glyph.council-trigger:hover {
  transform: scale(1.15);
  color: #3aff8a;
  text-shadow: 0 0 12px rgba(58, 255, 138, 0.6);
}
.disco-hdr-glyph.council-trigger.disco-pulse {
  animation: council-pulse 2.4s ease-in-out infinite;
}
.disco-hdr-glyph.council-trigger.council-fresh {
  color: #3aff8a;
  text-shadow: 0 0 16px rgba(58, 255, 138, 0.85);
  animation: council-pulse 0.8s ease-in-out infinite;
}
@keyframes council-pulse {
  0%, 100% { color: rgba(108, 248, 255, 0.6); text-shadow: 0 0 4px rgba(108, 248, 255, 0.4); }
  50%      { color: rgba(108, 248, 255, 1.0); text-shadow: 0 0 16px rgba(108, 248, 255, 0.7); }
}

/* Backdrop + modal frame. */
.council-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  backdrop-filter: blur(6px);
}
.council-modal {
  position: relative;
  background: linear-gradient(135deg, rgba(10, 16, 28, 0.96), rgba(6, 10, 20, 0.96));
  border: 1px solid rgba(108, 248, 255, 0.18);
  border-radius: 18px;
  padding: 18px 16px 14px;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  overflow-y: auto;
  font-family: var(--font-sans, system-ui);
  color: var(--text-color, #e0e0e0);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7),
              inset 0 0 80px rgba(108, 248, 255, 0.04);
}

/* Header — decision banner + ticker + close. */
.council-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.council-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.council-decision {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  width: fit-content;
}
.council-decision.is-emit  { background: rgba(58, 255, 138, 0.16); color: #3aff8a;
                              border: 1px solid rgba(58, 255, 138, 0.5); }
.council-decision.is-block { background: rgba(255, 90, 122, 0.16); color: #ff8aa0;
                              border: 1px solid rgba(255, 90, 122, 0.5); }
.council-ticker {
  font-size: 1.4rem; font-weight: 800; letter-spacing: 0.04em;
  color: #e0e0e0;
}
.council-sub {
  font-size: 0.66rem; font-family: var(--font-mono);
  color: var(--disco-dim, #8892b0);
  font-variant-numeric: tabular-nums;
}
.council-close {
  background: transparent; border: none; color: var(--disco-dim, #8892b0);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px;
}
.council-close:hover { color: #e0e0e0; }
.council-empty {
  padding: 40px 12px; text-align: center; color: var(--disco-dim, #8892b0);
  font-size: 0.85rem;
}

/* The table — round glass surface; agents around the rim. */
.council-table {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 580px;
  margin: 4px auto 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
              rgba(58, 255, 138, 0.06) 0%,
              rgba(108, 248, 255, 0.04) 35%,
              rgba(6, 10, 20, 0.0) 70%);
  box-shadow: inset 0 0 60px rgba(108, 248, 255, 0.05);
}
.council-table-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(108, 248, 255, 0.78);
  text-shadow: 0 0 12px rgba(108, 248, 255, 0.4);
  line-height: 1.1;
}
.council-table-tag {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--disco-dim, #8892b0);
}

/* Each agent seat — positioned around the table rim. CSS variable
   --i is the agent index, --N is total. */
.council-seat {
  position: absolute;
  --angle: calc((var(--i) / var(--N)) * 360deg - 90deg);
  --radius: 38%;
  left: calc(50% + cos(var(--angle)) * var(--radius));
  top:  calc(50% + sin(var(--angle)) * var(--radius));
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  width: 138px;
  pointer-events: auto;
}
.council-avatar {
  font-size: 1.4rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 20, 0.85);
  border: 1px solid rgba(108, 248, 255, 0.25);
  border-radius: 50%;
  margin-bottom: 4px;
  box-shadow: 0 0 8px rgba(108, 248, 255, 0.18);
}
.council-bubble {
  background: rgba(14, 22, 36, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 0.62rem;
  line-height: 1.3;
  text-align: left;
  max-width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  animation: council-bubble-in 0.4s ease;
}
@keyframes council-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.council-agent {
  font-weight: 700;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(108, 248, 255, 0.88);
  margin-bottom: 2px;
}
.council-line {
  color: var(--text-color, #e0e0e0);
  font-family: var(--font-mono);
}

/* Backlog navigator chips — past 12 transcripts, click to swap. */
.council-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.council-chip {
  padding: 4px 8px;
  font-size: 0.62rem;
  font-family: var(--font-mono);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--disco-dim, #aaa);
  cursor: pointer;
  white-space: nowrap;
}
.council-chip:hover { background: rgba(108, 248, 255, 0.08); color: #e0e0e0; }
.council-chip.active {
  background: rgba(58, 255, 138, 0.14);
  color: #3aff8a;
  border-color: rgba(58, 255, 138, 0.5);
}

/* Smaller phones — tighten the table layout. */
@media (max-width: 580px) {
  .council-modal { padding: 12px 8px 10px; }
  .council-table { max-width: 100%; }
  .council-seat { width: 96px; }
  .council-bubble { font-size: 0.56rem; }
}
.council-decision.is-standing {
  background: rgba(108, 248, 255, 0.16);
  color: rgba(108, 248, 255, 0.95);
  border: 1px solid rgba(108, 248, 255, 0.5);
}

/* ── C4: Log view two-pane layout ───────────────────────── */
/* Session Plan modal — match system dark/cyan aesthetic */
.session-plan-body {
  font-family: var(--font-mono, 'Monaco', 'Courier New', monospace);
  font-size: 12px;
  color: #cfe;
  line-height: 1.55;
  padding: 4px 4px 16px;
}
.session-plan-body h1,
.session-plan-body h2,
.session-plan-body h3 {
  color: #00e5ff;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 18px 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,229,255,0.18);
  padding-bottom: 4px;
}
.session-plan-body h1 { font-size: 14px; }
.session-plan-body p { margin: 6px 0; color: #9cf; }
.session-plan-body strong, .session-plan-body b { color: #fde047; font-weight: 600; }
.session-plan-body em, .session-plan-body i { color: #6cf8ff; font-style: normal; }
.session-plan-body ul, .session-plan-body ol { margin: 6px 0 10px 18px; padding: 0; }
.session-plan-body li { margin: 3px 0; color: #cfe; }
.session-plan-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 11px;
}
.session-plan-body th {
  text-align: left;
  color: #00e5ff;
  border-bottom: 1px solid rgba(0,229,255,0.25);
  padding: 4px 6px;
  font-weight: 700;
}
.session-plan-body td {
  padding: 3px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #9cf;
}
.session-plan-body code, .session-plan-body pre {
  background: rgba(0,229,255,0.06);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: #fde047;
}
.session-plan-body pre {
  padding: 8px 10px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
.session-plan-body hr {
  border: none;
  border-top: 1px solid rgba(0,229,255,0.15);
  margin: 14px 0;
}
.session-plan-body img, .session-plan-body svg { max-width: 24px; vertical-align: middle; }

/* Signal log panel (Logs tab) */
.sl-panel { gap: 10px; }
.sl-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.sl-select {
  background: #1a1f3a;
  color: #e0e0e0;
  border: 1px solid rgba(0,229,255,0.35);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 12px;
}
.sl-ticker {
  background: #1a1f3a;
  color: #e0e0e0;
  border: 1px solid rgba(0,229,255,0.35);
  border-radius: 6px;
  padding: 5px 8px;
  width: 72px;
  text-transform: uppercase;
  font-size: 12px;
}
.sl-btn {
  background: rgba(0,229,255,0.12);
  color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.3);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
}
.sl-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 5px;
}
.sl-list {
  max-height: 55vh;
  overflow: auto;
  font-family: Monaco, 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.5;
  background: #05080f;
  border-radius: 8px;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
}

.log-group-hdr {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: #00e5ff;
  padding: 20px 20px 4px;
  text-transform: uppercase;
}
.log-det-panel {
  padding: 12px 16px 16px;
}
.log-det-loading {
  color: #555;
  font-size: 11px;
  font-family: Monaco, monospace;
}
.log-det-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #8892b0;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.log-det-refresh-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(0,229,255,0.3);
  color: #00e5ff;
  border-radius: 4px;
  padding: 2px 10px;
  cursor: pointer;
  font-size: 13px;
}
.log-det-output {
  font-family: Monaco, 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.5;
  color: #9cf;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 52vh;
  overflow: auto;
  background: #05080f;
  border-radius: 6px;
  padding: 10px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

/* ─── Holo Navigation ───────────────────────────── */
.holo-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(10px, 3.5vw, 28px);
    padding: 14px 24px 28px;
    padding-bottom: max(28px, env(safe-area-inset-bottom, 28px));
    background: linear-gradient(to top,
        rgba(4, 8, 14, 0.92) 0%,
        rgba(4, 8, 14, 0.78) 40%,
        rgba(4, 8, 14, 0.0) 100%);
    pointer-events: none;
}

.holo-btn {
    pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    background: none;
    border: none;
    color: rgba(0, 229, 255, 0.72);
    transition: color 0.3s ease;
    animation: holoFloat 3.2s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

.holo-btn:nth-child(1) { animation-delay: 0s; }
.holo-btn:nth-child(2) { animation-delay: 0.15s; }
.holo-btn:nth-child(3) { animation-delay: 0.3s; }
.holo-btn:nth-child(4) { animation-delay: 0.45s; }
.holo-btn:nth-child(5) { animation-delay: 0.6s; }
.holo-btn:nth-child(6) { animation-delay: 0.75s; }
.holo-btn:nth-child(7) { animation-delay: 0.9s; }
.holo-btn:nth-child(8) { animation-delay: 1.05s; }

@keyframes holoFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
}

.holo-btn svg {
    width: 34px;
    height: 34px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.55))
            drop-shadow(0 0 14px rgba(0, 229, 255, 0.28));
    transition: filter 0.3s ease;
}

.holo-btn span {
    font-family: 'Orbitron', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.5);
    transition: color 0.3s ease;
}

.holo-btn.active {
    color: rgba(255, 255, 255, 0.95);
}

.holo-btn.active svg {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.85))
            drop-shadow(0 0 18px rgba(0, 229, 255, 0.7))
            drop-shadow(0 0 36px rgba(0, 229, 255, 0.35));
}

.holo-btn.active span {
    color: rgba(255, 255, 255, 0.8);
}

@media (hover: hover) and (pointer: fine) {
    .holo-btn:hover {
        color: rgba(0, 229, 255, 1);
        animation-play-state: paused;
        transform: translateY(-8px) scale(1.1);
    }
    .holo-btn:hover svg {
        filter: drop-shadow(0 0 10px rgba(0, 229, 255, 1))
                drop-shadow(0 0 22px rgba(0, 229, 255, 0.6))
                drop-shadow(0 0 40px rgba(0, 229, 255, 0.3));
    }
    .holo-btn:hover span { color: rgba(0, 229, 255, 0.9); }
}

/* ─── 2026-05-18 Iter 38 ─── operator-flagged 3 sections only.  ID-scoped
   so it can ONLY affect these specific elements; nothing else on the
   Telem page (or anywhere else) is touched. */

/* Long string values in stat cards: voter names, alarm verdicts,
   strategy names — allow wrap so they don't truncate. */
#brain-vcf-best-name,
#brain-vcf-worst-name,
#brain-vcf-top,
#brain-vcf-bottom,
#brain-cal-top,
#cd-alarm-state,
#wk-top-strategy,
#telem-top-ticker {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 0.72rem;
  line-height: 1.2;
}

/* Long content rows (alarm list lines, per-strategy table, per-voter
   counterfactual rows) — allow wrap + horizontal scroll inside ONLY
   these specific containers. */
#cd-alarms-list,
#cd-per-strategy-body,
#brain-vcf-voters {
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow-x: auto;
}
#cd-alarms-list > div,
#brain-vcf-voters > div {
  white-space: normal;
}