/* ══════════════════════════════════════════════════
   TRADE IDEAS EXP — design polish experiment
   Based on v10, with refined:
   - Color palette (richer surfaces, no pure black)
   - Typography hierarchy (Inter, bigger section heads)
   - Reduced border noise (tonal fills > borders)
   - Premium card depth (subtle gradients, soft shadows)
   - Amplified split-flap as signature element
══════════════════════════════════════════════════ */

/* ── 1. COLOR SYSTEM ── */
:root {
  /* Surfaces — black page, ticker-page-style card panels */
  --exp-bg:          #000;
  --exp-bg-section:  #080b10;
  --exp-bg-card:     #0d1117;
  --exp-bg-card-alt: #111820;
  --exp-bg-hover:    #161b22;
  --exp-bg-elevated: #1c2333;

  /* Borders — solid, matching ticker page */
  --exp-border:      #21262d;
  --exp-border-card: #21262d;
  --exp-border-strong: #30363d;

  /* Text — clear hierarchy, no dusty grays */
  --exp-text-pri:    #E8EDF5;
  --exp-text-body:   #D1D5DE;
  --exp-text-sec:    #95A0B2;
  --exp-text-muted:  #6B7A8D;
  --exp-text-faint:  #4A5568;

  /* Semantic — only for meaning */
  --exp-green:       #22C55E;
  --exp-green-soft:  rgba(34,197,94,0.12);
  --exp-green-text:  #4ADE80;
  --exp-red:         #EF4444;
  --exp-red-soft:    rgba(239,68,68,0.12);
  --exp-red-text:    #F87171;
  --exp-yellow:      #FBBF24;
  --exp-yellow-soft: rgba(251,191,36,0.10);

  /* UI accent — one color for interactive elements */
  --exp-accent:      #7AA2FF;
  --exp-accent-hover:#9BB8FF;
  --exp-accent-soft: rgba(122,162,255,0.10);
  --exp-accent-glow: rgba(122,162,255,0.06);

  /* Purple — speakers only */
  --exp-purple:      #C4B5FD;
  --exp-purple-hover:#DDD6FE;

  /* Split-flap */
  --sf-digit-w:    38px;
  --sf-digit-h:    54px;
  --sf-half:       27px;
  --sf-gap:        2px;
  --sf-font-size:  36px;
  --sf-radius:     4px;
  --sf-persp:      150px;
  --sf-char-color: #d8dde8;
  --sf-label-color:#4a4a42;
  --sf-live-color: #22C55E;
}


/* ── 2. PAGE FOUNDATION ── */
.exp-page {
  background: var(--exp-bg);
  color: var(--exp-text-body);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.exp-page a { color: var(--exp-accent); text-decoration: none; }
.exp-page a:hover { color: var(--exp-accent-hover); }

.exp-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}


/* ── 3. TYPOGRAPHY SCALE ── */
/* Section titles: 30px bold — hero-level section headers */
.exp-sec-title {
  font-size: 30px;
  font-weight: 800;
  color: #F0F4FC;
  letter-spacing: -0.5px;
  line-height: 1.15;
}

/* Top Calls title: same hero level */
.tc-title {
  font-size: 30px;
  font-weight: 800;
  color: #F0F4FC;
  letter-spacing: -0.5px;
}

/* Meta labels: 11px uppercase tracking */
.exp-meta {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--exp-text-muted);
}

.exp-mono {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}


/* ── 4. SECTION CONTAINERS ── */
/* Flat section — lives on page bg, same rhythm as Top Calls / Feed */
.exp-flat-section {
  margin-top: 32px;
  margin-bottom: 16px;
  position: relative;
  /* NO background, border, or radius — section title sits on page bg */
}

.exp-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}


/* ══════════════════════════════════════════════════
   5. SPLIT-FLAP BAR — amplified signature element
══════════════════════════════════════════════════ */
.sf-bar {
  background: transparent;
  border: none;
  border-bottom: 1px solid #21262d;
  padding: 28px 12px 24px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  position: relative;
}
.sf-bar::before { display: none; }
.sf-screw { display: none; }

.sf-bar-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin-right: 16px;
}
.sf-bar-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--exp-text-muted);
  letter-spacing: 0.3px;
}

.sf-bar-right {
  display: flex;
  align-items: flex-end;
  gap: 28px;
}

.sf-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sf-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--exp-text-sec);
  font-family: 'Inter', system-ui, sans-serif;
}
.sf-row { display: flex; gap: 3px; }
.sf-sep {
  width: 1px;
  height: var(--sf-digit-h);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.06) 30%, rgba(255,255,255,0.06) 70%, transparent);
  align-self: center;
  margin-bottom: 26px;
  flex-shrink: 0;
}
.sf-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.sf-live {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sf-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sf-live-color);
  box-shadow: 0 0 8px rgba(34,197,94,0.8);
}
.sf-live-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--sf-live-color);
  font-family: 'Inter', system-ui, sans-serif;
}
@media (prefers-reduced-motion: no-preference) {
  .sf-live-dot { animation: sfBlink 2s infinite; }
}
@keyframes sfBlink {
  0%,100% { opacity:1; box-shadow:0 0 8px rgba(34,197,94,.8); }
  50%     { opacity:.2; box-shadow:none; }
}

/* ── Digit tile — larger for prominence ── */
.sf-digit {
  position: relative;
  width: var(--sf-digit-w);
  height: calc(var(--sf-half) + var(--sf-gap) + var(--sf-half));
  flex-shrink: 0;
}
.sf-ch {
  display: block; width: var(--sf-digit-w); height: var(--sf-digit-h);
  font-size: var(--sf-font-size); font-weight: 700; text-align: center;
  line-height: var(--sf-digit-h); color: var(--sf-char-color);
  letter-spacing: -1px;
  text-shadow: 0 0 10px rgba(200,210,230,.12), 0 1px 2px rgba(0,0,0,.95);
  user-select: none; pointer-events: none;
  position: absolute; left: 0; top: 0;
  font-family: 'SF Mono','Cascadia Code','Consolas',monospace;
}
.sf-bot-card .sf-ch, .sf-flap-bot .sf-ch { top: calc(-1 * var(--sf-half)); }

.sf-top-card {
  position: absolute; top: 0; left: 0; right: 0; height: var(--sf-half);
  overflow: hidden; border-radius: var(--sf-radius) var(--sf-radius) 0 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='35'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='70' height='35' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #1c1c1a 0%, #151513 40%, #111110 100%);
  border: 1px solid #282824; border-bottom: 1px solid #060604;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04); z-index: 1;
}
.sf-top-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, transparent 50%);
  border-radius: var(--sf-radius) var(--sf-radius) 0 0;
}
.sf-bot-card {
  position: absolute; bottom: 0; left: 0; right: 0; height: var(--sf-half);
  overflow: hidden; border-radius: 0 0 var(--sf-radius) var(--sf-radius);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='35'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='70' height='35' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #0d0d0b 0%, #0a0a08 100%);
  border: 1px solid #1c1c1a; border-top: none;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.5); z-index: 1;
}
.sf-bot-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.3) 100%);
}
.sf-seam {
  position: absolute; top: var(--sf-half); left: 0; right: 0; height: var(--sf-gap);
  background: #030302; box-shadow: 0 1px 2px rgba(0,0,0,.9);
  z-index: 20; pointer-events: none;
}
.sf-flap-top {
  position: absolute; top: 0; left: 0; right: 0; height: var(--sf-half);
  overflow: hidden; border-radius: var(--sf-radius) var(--sf-radius) 0 0;
  background: linear-gradient(180deg, #1c1c1a 0%, #151513 40%, #111110 100%);
  border: 1px solid #282824; border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  transform-origin: center bottom; z-index: 10;
}
.sf-flap-top::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 50%);
  border-radius: var(--sf-radius) var(--sf-radius) 0 0;
}
.sf-flap-shadow {
  position: absolute; inset: 0; background: #000; opacity: 0;
  z-index: 2; pointer-events: none;
  border-radius: var(--sf-radius) var(--sf-radius) 0 0;
}
.sf-flap-bot {
  position: absolute; bottom: 0; left: 0; right: 0; height: var(--sf-half);
  overflow: hidden; border-radius: 0 0 var(--sf-radius) var(--sf-radius);
  background: linear-gradient(180deg, #0d0d0b 0%, #0a0a08 100%);
  border: 1px solid #1c1c1a; border-top: none;
  transform-origin: center top; z-index: 10; display: none;
}
@media (max-width: 480px) {
  .sf-sep { display: none; }
  .sf-bar { justify-content: center; }
}


/* ══════════════════════════════════════════════════
   6. TICKER / DIRECTION ATOMS
══════════════════════════════════════════════════ */
.exp-page .ti10-ticker {
  color: var(--exp-accent);
  font-weight: 600;
  font-size: .82rem;
  background: var(--exp-accent-soft);
  padding: .12rem .42rem;
  border-radius: 5px;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}
.exp-page .ti10-ticker:hover { color: var(--exp-accent-hover); background: rgba(122,162,255,0.15); }

.exp-page .ti10-dir {
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0;
  border: none;
}
.exp-page .ti10-dir-long  { background: var(--exp-green-soft); color: var(--exp-green-text); }
.exp-page .ti10-dir-short { background: var(--exp-red-soft);   color: var(--exp-red-text); }
.exp-page .ti10-dir-avoid { background: var(--exp-yellow-soft); color: var(--exp-yellow); }

.exp-page .ti10-speaker-link { color: var(--exp-purple); text-decoration: none; }
.exp-page .ti10-speaker-link:hover { color: var(--exp-purple-hover); }

.exp-page .ti10-pos { color: var(--exp-green); }
.exp-page .ti10-neg { color: var(--exp-red); }
.exp-page .ti10-mix { color: var(--exp-yellow); }


/* ══════════════════════════════════════════════════
   7. MOST DISCUSSED TICKERS — lighter chips, more space
══════════════════════════════════════════════════ */

/* chip strip — more gap for breathing room */
.exp-page .md-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Chips — compact, tonal fill, minimal border */
.exp-page .md-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 6px;
  background: var(--exp-bg-card);
  border: 1px solid var(--exp-border);
  cursor: pointer; font-family: inherit;
  transition: background-color .15s, border-color .15s, transform .18s, box-shadow .18s;
  appearance: none;
}
.exp-page .md-chip:hover {
  background-color: var(--exp-bg-hover);
  border-color: var(--exp-border-strong);
}
.exp-page .md-chip:focus-visible { outline: 2px solid var(--exp-accent); outline-offset: 2px; }
.exp-page .md-chip[aria-selected="true"] {
  background-color: var(--exp-text-pri);
  border-color: var(--exp-text-pri);
  transform: scale(1.04);
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
  z-index: 1; position: relative;
}
.exp-page .md-chip[aria-selected="true"] .md-chip-sym { color: var(--exp-bg); }
.exp-page .md-chip[aria-selected="true"] .md-chip-badge {
  background: rgba(0,0,0,.12); color: rgba(0,0,0,.6);
}

.exp-page .md-chip-sym {
  font-size: 13px; font-weight: 700; color: var(--exp-text-pri);
  font-family: 'SF Mono','Cascadia Code','Consolas',monospace;
  letter-spacing: .3px;
}
.exp-page .md-chip-badge {
  min-width: 20px; height: 18px; border-radius: 9px;
  background: rgba(255,255,255,0.05);
  color: var(--exp-text-muted);
  font-size: 10.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
  font-family: 'SF Mono','Cascadia Code','Consolas',monospace;
  transition: background-color .15s, color .15s;
}

/* detail area */
.exp-page .md-detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
  margin-top: 16px;
}
.exp-page .md-detail[aria-hidden="false"] { grid-template-rows: 1fr; }
.exp-page .md-detail-overflow { overflow: hidden; }

/* Inline ticker name */
.exp-page .md-chip-name {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 500; color: var(--exp-accent);
  padding: 5px 8px; white-space: nowrap;
  animation: mdNameIn .2s ease;
}
@keyframes mdNameIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }


/* ── Bulls vs Bears — single card with internal dividers ── */
.exp-page .md-authors { margin-top: 8px; }

.exp-page .md-bvb {
  display: grid; gap: 0;
  background: var(--exp-bg-card);
  border: 1px solid var(--exp-border);
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .exp-page .md-bvb { grid-template-columns: 1fr !important; }
  .exp-page .md-bvb-col { border-right: none !important; border-bottom: 1px solid var(--exp-border); }
}

.exp-page .md-bvb-col {
  border-radius: 0;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--exp-border);
}
/* Last column before quote — no right border */
.exp-page .md-bvb > :nth-last-child(2) { border-right: none; }

/* No semantic border colors — label text color is enough */
.exp-page .md-bvb-col-bull,
.exp-page .md-bvb-col-bear,
.exp-page .md-bvb-col-other {
  /* inherits transparent bg, no border-color override */
}

/* Group labels — prominent with semantic colors */
.exp-page .md-bvb-label {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.exp-page .md-bvb-label-bull { color: var(--exp-green); }
.exp-page .md-bvb-label-bear { color: var(--exp-red); }
.exp-page .md-bvb-label-other { color: var(--exp-text-muted); }

.exp-page .md-bvb-cnt {
  font-size: 10px; font-weight: 600; padding: 2px 7px;
  border-radius: 5px; color: var(--exp-text-muted);
}
.exp-page .md-bvb-col-bull .md-bvb-cnt {
  background: rgba(34,197,94,0.10);
  color: var(--exp-green-text);
}
.exp-page .md-bvb-col-bear .md-bvb-cnt {
  background: rgba(239,68,68,0.10);
  color: var(--exp-red-text);
}
.exp-page .md-bvb-col-other .md-bvb-cnt {
  background: rgba(255,255,255,0.05);
}

/* Author chips — compact, ghost-style, minimal border */
.exp-page .md-col-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

.exp-page .md-chip-author {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 3px; border-radius: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: inherit; appearance: none; color: inherit;
}
.exp-page .md-chip-author:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--exp-border);
}
.exp-page .md-chip-author.active {
  background: var(--exp-text-pri);
  border-color: var(--exp-text-pri);
}
.exp-page .md-chip-author.active .md-a-name {
  color: var(--exp-bg);
  font-weight: 600;
}
.exp-page .md-bvb-col-bull .md-chip-author.active,
.exp-page .md-bvb-col-bear .md-chip-author.active,
.exp-page .md-bvb-col-other .md-chip-author.active {
  background: var(--exp-text-pri);
  border-color: var(--exp-text-pri);
}

.exp-page .md-a-ava {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; display: block;
  border: 1px solid rgba(255,255,255,0.06);
}
.exp-page .md-ava-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.exp-page .md-ava-fb {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,.65);
}
.exp-page .md-a-name {
  font-size: 11.5px; font-weight: 500; color: var(--exp-text-sec);
  white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}

.exp-page .md-bvb-subsection {
  border-radius: 0; padding: 12px 14px;
  background: transparent;
  border: none;
}
.exp-page .md-bvb-subsection + .md-bvb-subsection {
  margin-top: 0;
  border-top: 1px solid var(--exp-border);
}


/* ── Thesis popup — premium selected insight card ── */
.exp-page .md-thesis-pop {
  margin-top: 0;
  padding: 22px 26px;
  border-radius: 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--exp-border);
  animation: mdPopIn .18s ease;
  grid-column: 1 / -1;
}
.exp-page .md-pop-author {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.exp-page .md-pop-author .md-a-ava { width: 40px; height: 40px; font-size: 16px; }
.exp-page .md-pop-link {
  font-size: 15px; font-weight: 800; color: #F0F4FC;
  text-decoration: none;
}
.exp-page .md-pop-link:hover { color: var(--exp-accent); text-decoration: underline; }
.exp-page .md-pop-role { display: block; font-size: 13px; color: #8b949e; margin-top: 1px; }
.exp-page .md-pop-author strong {
  font-size: 15px; font-weight: 800; color: #F0F4FC;
}
.exp-page .md-pop-text {
  font-size: 17px;
  color: var(--exp-text-body);
  line-height: 1.55;
  font-style: italic;
}
@keyframes mdPopIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* load more */
.exp-page .md-load-more {
  margin-top: 10px;
  font-family: inherit; font-size: 11px; font-weight: 600;
  color: var(--exp-text-muted); background: transparent; border: none;
  cursor: pointer; padding: 0; appearance: none;
  transition: color .15s;
  display: none;
}
.exp-page .md-load-more:hover { color: var(--exp-accent); }
.exp-page .md-load-more.visible { display: block; }


/* ══════════════════════════════════════════════════
   8. TOP CALLS — premium cards with performance glow
══════════════════════════════════════════════════ */
.exp-page .tc-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 36px;
  margin-bottom: 16px;
  position: relative;
  overflow: visible;
}
.exp-page .tc-head {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 0 0 18px;
  gap: 10px 12px;
}
.exp-page .tc-title { flex-basis: 100%; }

.exp-page .tc-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Period toggle */
.exp-period { display: flex; gap: 2px; }
.exp-period-btn {
  font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 6px;
  border: 1px solid var(--exp-border); background: transparent; color: var(--exp-text-muted);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.exp-period-btn.active, .exp-period-btn:hover {
  background: var(--exp-bg-hover); color: var(--exp-text-pri); border-color: var(--exp-border-strong);
}

/* Winners/losers toggle */
.exp-page .wl-toggle { display: flex; gap: 2px; }
.exp-page .wl-btn {
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  padding: 4px 14px; border-radius: 6px; cursor: pointer; appearance: none;
  border: 1px solid var(--exp-border); background: var(--exp-bg-card); color: var(--exp-text-muted);
  transition: background-color .15s, border-color .15s, color .15s;
}
.exp-page .wl-btn:hover { background: var(--exp-bg-hover); color: var(--exp-text-sec); }
.exp-page .wl-btn.win.active {
  background: var(--exp-green-soft);
  color: var(--exp-green);
  border-color: rgba(34,197,94,0.25);
}
.exp-page .wl-btn.lose.active {
  background: var(--exp-red-soft);
  color: var(--exp-red);
  border-color: rgba(239,68,68,0.25);
}

/* Track */
.exp-page .tc-track-wrap { position: relative; }
.exp-page .tc-track-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 56px;
  background: linear-gradient(-90deg, var(--exp-bg), transparent);
  z-index: 10; pointer-events: none;
}
.exp-page .tc-track {
  display: flex; gap: 12px;
  align-items: flex-start;
  padding: 16px 56px 20px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.exp-page .tc-track:active { cursor: grabbing; }
.exp-page .tc-track::-webkit-scrollbar { display: none; }

/* Cards — ticker-page card language, clean surfaces */
.exp-page .tc-card {
  flex-shrink: 0; width: 172px;
  background: var(--exp-bg-card);
  border: 1px solid var(--exp-border);
  border-radius: 8px;
  padding: 15px 15px 13px;
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    transform .2s cubic-bezier(.34,1.56,.64,1),
    border-color .15s, background .15s, box-shadow .2s,
    width .25s cubic-bezier(.34,1.2,.64,1);
  position: relative; overflow: hidden; user-select: none;
}
.exp-page .tc-card:hover {
  transform: scale(1.05) translateY(-3px);
  border-color: var(--exp-border-strong);
  background: var(--exp-bg-hover);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 5;
}
.exp-page .tc-card.open {
  width: auto;
  display: flex; flex-direction: row; align-items: stretch;
  height: var(--tc-card-h, auto);
  border-color: var(--exp-border-strong);
  background: var(--exp-bg-hover);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transform: translateY(-2px);
  z-index: 10;
  overflow: hidden;
}
.exp-page .tc-card.open:hover { transform: translateY(-2px); scale: 1; }
.exp-page .tc-card-main { flex-shrink: 0; width: 160px; }

.exp-page .tc-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.exp-page .tc-ava {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.06); overflow: hidden;
}
.exp-page .tc-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.exp-page .tc-author {
  font-size: 11.5px; font-weight: 500; color: var(--exp-text-sec);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.exp-page .tc-idea { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.exp-page .tc-sym {
  font-size: 17px; font-weight: 700; color: var(--exp-text-pri);
  font-family: 'SF Mono','Cascadia Code','Consolas', monospace;
}
/* Bigger ticker + dir in expanded state */
.exp-page .tc-card.open .tc-sym { font-size: 20px; }
.exp-page .tc-card.open .tc-dir { font-size: 10px; padding: 3px 8px; }
.exp-page .tc-card.open .tc-ret { font-size: 26px; }
.exp-page .tc-dir {
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
  text-transform: uppercase; border: none;
}
.exp-page .tc-dir-long  { background: var(--exp-green-soft); color: var(--exp-green-text); }
.exp-page .tc-dir-short { background: var(--exp-red-soft);   color: var(--exp-red-text); }

/* Performance number — the star of the card */
.exp-page .tc-ret {
  font-size: 22px; font-weight: 700; line-height: 1; margin-bottom: 8px;
  font-family: 'SF Mono','Cascadia Code','Consolas', monospace;
}
.exp-page .tc-ret.ti10-pos { color: var(--exp-green); }
.exp-page .tc-ret.ti10-neg { color: var(--exp-red); }

.exp-page .tc-meta { margin-top: 2px; }
.exp-page .tc-date { font-size: 10px; color: var(--exp-text-muted); white-space: nowrap; }
.exp-page .tc-broken {
  font-size: 8.5px; font-weight: 700; color: var(--exp-text-faint);
  background: rgba(255,255,255,.03); border: none;
  border-radius: 4px; padding: 2px 6px; margin-bottom: 6px;
  display: inline-block;
}

/* thesis panel — clean expanded view */
.exp-page .tc-thesis { display: none; }
.exp-page .tc-card.open .tc-thesis {
  display: flex; align-items: flex-start;
  padding: 8px 0 4px;
}
.exp-page .tc-thesis-body {
  font-size: 13px; color: var(--exp-text-sec); line-height: 1.65;
  padding: 0 16px 0 18px;
  border-left: 2px solid rgba(255,255,255,.06);
  width: 480px;
  max-height: 110px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.exp-page .tc-thesis-body.long  { border-left-color: rgba(34,197,94,0.20); }
.exp-page .tc-thesis-body.short { border-left-color: rgba(239,68,68,0.20); }

/* Author clickable only when card is expanded */
.exp-page .tc-card.open .tc-author {
  cursor: pointer;
  transition: color .12s;
}
.exp-page .tc-card.open .tc-author:hover {
  color: var(--exp-accent);
  text-decoration: underline;
}


/* ══════════════════════════════════════════════════
   9. FEED PANEL
══════════════════════════════════════════════════ */
.exp-page .fd-panel { margin-top: 36px; }
.exp-page .fd-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 14px;
}
.exp-page .fd-title {
  font-size: 30px;
  font-weight: 800;
  color: #F0F4FC;
  letter-spacing: -0.5px;
}
.exp-page .fd-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.exp-page .fd-rows {
  background: var(--exp-bg-card);
  border: 1px solid var(--exp-border);
  border-radius: 8px;
  overflow: hidden;
  max-height: 600px;
  overflow-y: auto;
}
.exp-page .fd-rows::-webkit-scrollbar { width: 5px; }
.exp-page .fd-rows::-webkit-scrollbar-track { background: transparent; }
.exp-page .fd-rows::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }

.exp-page .fd-load-more {
  display: block; width: 100%;
  margin-top: 10px; padding: 12px;
  background: var(--exp-bg-card);
  border: 1px solid var(--exp-border);
  border-radius: 6px;
  color: var(--exp-text-muted);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.exp-page .fd-load-more:hover {
  background: var(--exp-bg-hover);
  color: var(--exp-text-pri);
}


/* ══════════════════════════════════════════════════
   10. GLOBAL OVERRIDES — reduce border noise from base.css
   On the exp page, filter bar and other shared components
   inherit the richer palette
══════════════════════════════════════════════════ */
/* (filter bar styles moved to section 12 below) */
.exp-page .filter-bar .f-drop-menu {
  background: var(--exp-bg-card);
  border: 1px solid var(--exp-border-strong);
}
.exp-page .filter-bar .f-drop-opt:hover {
  background: rgba(255,255,255,0.05);
}
.exp-page .filter-bar .f-drop-opt.selected {
  color: var(--exp-accent);
}


/* ══════════════════════════════════════════════════
   11. FEED ROW OVERRIDES — better hierarchy, separation, readability
══════════════════════════════════════════════════ */

/* Stronger row separation — visible divider matching ticker page */
.exp-page .sr-row {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  gap: 12px;
  transition: background .12s;
}
.exp-page .sr-row:hover {
  background: rgba(255,255,255,.03);
}
.exp-page .sr-row.expanded {
  background: rgba(255,255,255,.02);
}

/* Time — slightly more readable */
.exp-page .sr-time {
  font-size: 0.75rem;
  color: var(--exp-text-muted);
  min-width: 46px;
}

/* Typography hierarchy within row */
/* Level 1: Author name — most prominent */
.exp-page .sr-author,
.exp-page .sr-author:visited,
.exp-page .sr-author:link {
  font-size: 0.84rem;
  font-weight: 700;
  color: #F0F4FC;
}
.exp-page .sr-author:hover { color: var(--exp-accent); }

/* Level 2: Author role — readable but secondary */
.exp-page .sr-author-role {
  font-size: 0.72rem;
  color: var(--exp-text-sec);
}

/* Level 2: Channel — accent link */
.exp-page .sr-author-channel {
  font-size: 0.72rem;
}
.exp-page .sr-author-channel a {
  color: var(--exp-accent);
}
.exp-page .sr-author-role + .sr-author-channel::before {
  color: var(--exp-text-faint);
}

/* Level 2: Thesis short (headline) — readable but below author */
.exp-page .sr-thesis[style*="font-weight: 600"] {
  color: var(--exp-text-sec) !important;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Level 3: Thesis (supporting text) — slightly less contrast */
.exp-page .sr-thesis {
  font-size: 0.82rem;
  color: var(--exp-text-sec);
  line-height: 1.55;
}

/* YouTube + Substack: hide full thesis until expanded */
.exp-page .sr-row[data-src="youtube"] .sr-thesis-full,
.exp-page .sr-row[data-src="newsletter"] .sr-thesis-full {
  display: none;
}
.exp-page .sr-row[data-src="youtube"].expanded .sr-thesis-full,
.exp-page .sr-row[data-src="newsletter"].expanded .sr-thesis-full {
  display: block;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.07);
  color: rgba(192, 205, 224, 0.62);
  font-size: 0.78rem;
}

/* Speaker line — a touch more space below */
.exp-page .sr-speaker-line {
  margin-bottom: 3px;
}

/* Meta row — more gap for ticker pills */
.exp-page .sr-meta {
  margin-top: 6px;
  gap: 6px;
}

/* Ticker pills — direction via color only, no text badges */
.exp-page .ticker-pill {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 1px 0;
}

/* Score dots — replace ●●●●● with a cleaner confidence bar */
.exp-page .sr-score-dots {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-left: 4px;
}
.exp-page .sr-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #21262d;
}
.exp-page .sr-dot.on {
  background: #58a6ff;
}

/* Right side — stacked save + score label */
.exp-page .sr-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  align-self: center;
}

/* Save button — match palette */
.exp-page .sr-save {
  color: var(--exp-text-faint);
}
.exp-page .sr-save:hover { color: var(--exp-text-sec); }
.exp-page .sr-save.saved { color: #F59E0B; }

/* Score label — LOW / MED / HIGH */
.exp-page .sr-score-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #555D6B;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1;
  user-select: none;
}


/* ══════════════════════════════════════════════════
   12. FILTER BAR — lighter, less button-like
══════════════════════════════════════════════════ */
.exp-page .filter-bar .f-drop-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  border-color: var(--exp-border);
  background: var(--exp-bg-card);
  color: var(--exp-text-muted);
}
.exp-page .filter-bar .f-drop-btn:hover,
.exp-page .filter-bar .f-drop-btn.open {
  border-color: var(--exp-border-strong);
  background: var(--exp-bg-hover);
  color: var(--exp-text-sec);
}
.exp-page .filter-bar .f-drop-btn.f-drop-active {
  border-color: rgba(122,162,255,0.20);
  color: var(--exp-accent);
  background: rgba(122,162,255,0.06);
}
/* Reset icon — subtler when idle, green when active */
.exp-page .f-reset-icon {
  color: var(--exp-text-faint);
}
.exp-page .f-reset-icon:hover {
  color: var(--exp-text-sec);
}
.exp-page .f-reset-icon.f-reset-active {
  color: #3fb950;
  opacity: 1;
}
.exp-page .f-reset-icon.f-reset-active:hover {
  color: #56d364;
}
/* Saved toggle — match filter weight */
.exp-page .filter-bar .f-btn-saved {
  font-size: 11px;
  font-weight: 500;
  border-color: var(--exp-border);
  background: var(--exp-bg-card);
}