/**
 * MSL Top Stocks — Leaderboard Page Styles
 * Based on Mockup D (Clean Table) by MSL Design Studio
 * Adapted: removed sector/sparkline/checkbox columns
 *
 * Dependencies: Heebo + JetBrains Mono (Google Fonts, already loaded by theme)
 * No inline <style> — this file is enqueued by the plugin
 */

/* ── Variables (scoped to page) ─────────────────────────── */
.msl-top-stocks {
  --msl-navy: #06142b;
  --msl-navy-2: #0b1e3f;
  --msl-amber: #d4a04a;
  --msl-amber-soft: #fcf2dc;
  --msl-amber-deep: #b88330;
  --msl-cream: #f6efe2;
  --msl-cream-2: #ede4cf;
  --msl-up: #2a8b66;
  --msl-up-soft: #e6f4ed;
  --msl-down: #c44747;
  --msl-down-soft: #fae2e2;
  --msl-purple: #7c5cbf;
  --msl-purple-soft: #ece6f7;
  --msl-page: #faf6ec;
  --ts-line: #e9e0c8;
  --ts-line-soft: #f0e9d4;
  --ts-text: #1f2937;
  --ts-text-mute: #6b7280;
}

/* ── Page wrapper ───────────────────────────────────────── */
.msl-top-stocks {
  max-width: 1320px;
  margin: 0 auto;
  padding: 36px 32px 64px;
  font-family: "Heebo", system-ui, sans-serif;
  direction: rtl;
  color: var(--ts-text);
}

.msl-top-stocks .mono {
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.02em;
}

/* ── Page header ────────────────────────────────────────── */
.msl-top-stocks .ts-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
}

.msl-top-stocks .ts-header h1 {
  margin: 0 0 6px;
  font-size: 36px;
  font-weight: 300;
  color: var(--msl-navy);
  letter-spacing: -0.01em;
}

.msl-top-stocks .ts-header h1 strong {
  font-weight: 900;
  color: var(--msl-amber-deep);
}

.msl-top-stocks .ts-header .ts-sub {
  color: var(--ts-text-mute);
  font-size: 14px;
  font-weight: 400;
}

.msl-top-stocks .ts-header .ts-sub strong {
  color: var(--msl-navy);
  font-weight: 700;
}

.msl-top-stocks .ts-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.msl-top-stocks .ts-btn {
  background: var(--msl-navy);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: "Heebo", sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.msl-top-stocks .ts-btn-ghost {
  background: transparent;
  color: var(--ts-text-mute);
  border: 1px solid var(--ts-line);
  padding: 10px 16px;
  border-radius: 8px;
  font-family: "Heebo", sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* ── Stat cards ─────────────────────────────────────────── */
.msl-top-stocks .ts-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.msl-top-stocks .ts-stat {
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 0 rgba(11, 30, 63, 0.02);
}

.msl-top-stocks .ts-stat-label {
  font-size: 12px;
  color: var(--ts-text-mute);
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.msl-top-stocks .ts-stat-val {
  font-size: 26px;
  font-weight: 700;
  color: var(--msl-navy);
  font-family: "JetBrains Mono", monospace;
  line-height: 1;
}

.msl-top-stocks .ts-stat-val .ts-ticker-tag {
  font-size: 13px;
  font-weight: 500;
  color: var(--msl-amber-deep);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  margin-left: 8px;
}

.msl-top-stocks .ts-stat-val.ts-color-up {
  color: var(--msl-up);
}

.msl-top-stocks .ts-stat svg {
  width: 110px;
  height: 38px;
}

.msl-top-stocks .ts-spark-amber path { fill: none; stroke: var(--msl-amber); stroke-width: 1.8; }
.msl-top-stocks .ts-spark-amber .fill { fill: rgba(212, 160, 74, 0.14); stroke: none; }
.msl-top-stocks .ts-spark-purple path { fill: none; stroke: var(--msl-purple); stroke-width: 1.8; }
.msl-top-stocks .ts-spark-purple .fill { fill: rgba(124, 92, 191, 0.14); stroke: none; }
.msl-top-stocks .ts-spark-green path { fill: none; stroke: var(--msl-up); stroke-width: 1.8; }
.msl-top-stocks .ts-spark-green .fill { fill: rgba(42, 139, 102, 0.14); stroke: none; }
.msl-top-stocks .ts-spark-navy path { fill: none; stroke: var(--msl-navy); stroke-width: 1.8; }
.msl-top-stocks .ts-spark-navy .fill { fill: rgba(6, 20, 43, 0.1); stroke: none; }

/* ── Filter tabs ────────────────────────────────────────── */
.msl-top-stocks .ts-tabs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--ts-line);
  margin-bottom: 0;
}

.msl-top-stocks .ts-tabs {
  display: flex;
  gap: 28px;
}

.msl-top-stocks .ts-tab {
  padding: 14px 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ts-text-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.01em;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  font-family: "Heebo", sans-serif;
}

.msl-top-stocks .ts-tab.active {
  color: var(--msl-navy);
  font-weight: 700;
  border-bottom-color: var(--msl-amber);
}

.msl-top-stocks .ts-tab .ts-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--ts-text-mute);
  margin-right: 6px;
  font-weight: 500;
  background: var(--msl-page);
  padding: 2px 8px;
  border-radius: 999px;
}

.msl-top-stocks .ts-tab.active .ts-count {
  background: var(--msl-amber-soft);
  color: var(--msl-amber-deep);
}

/* ── Table ──────────────────────────────────────────────── */
.msl-top-stocks .ts-tbl-wrap {
  margin-top: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.msl-top-stocks .ts-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  font-family: "Heebo", sans-serif;
}

.msl-top-stocks .ts-tbl th {
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-text-mute);
  padding: 12px 16px;
  white-space: nowrap;
}

.msl-top-stocks .ts-tbl td {
  background: #fff;
  padding: 14px 16px;
  border-top: 1px solid var(--ts-line-soft);
  border-bottom: 1px solid var(--ts-line-soft);
  vertical-align: middle;
}

.msl-top-stocks .ts-tbl tr td:first-child {
  border-right: 1px solid var(--ts-line-soft);
  border-radius: 0 10px 10px 0;
  padding-right: 18px;
}

.msl-top-stocks .ts-tbl tr td:last-child {
  border-left: 1px solid var(--ts-line-soft);
  border-radius: 10px 0 0 10px;
  padding-left: 18px;
}

.msl-top-stocks .ts-tbl tr:hover td {
  background: #fffbf2;
}

/* Rank column */
.msl-top-stocks .ts-rank {
  font-family: "JetBrains Mono", monospace;
  color: var(--msl-amber-deep);
  font-weight: 700;
  font-size: 15px;
}

/* Stock cell: avatar + ticker + name */
.msl-top-stocks .ts-stock-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.msl-top-stocks .ts-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.msl-top-stocks .ts-av-amber  { background: var(--msl-amber-soft); color: var(--msl-amber-deep); border: 1px solid var(--msl-amber); }
.msl-top-stocks .ts-av-navy   { background: #dfe5f0; color: var(--msl-navy); border: 1px solid var(--msl-navy-2); }
.msl-top-stocks .ts-av-purple { background: var(--msl-purple-soft); color: var(--msl-purple); border: 1px solid var(--msl-purple); }
.msl-top-stocks .ts-av-green  { background: var(--msl-up-soft); color: var(--msl-up); border: 1px solid var(--msl-up); }
.msl-top-stocks .ts-av-cream  { background: var(--msl-cream-2); color: var(--msl-amber-deep); border: 1px solid var(--ts-line); }

.msl-top-stocks .ts-sym {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--msl-navy);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.msl-top-stocks .ts-name {
  color: var(--ts-text-mute);
  font-size: 13px;
  font-weight: 400;
  margin-top: 2px;
}

/* Number cells */
.msl-top-stocks .ts-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  color: var(--msl-navy);
  font-weight: 500;
  white-space: nowrap;
}

.msl-top-stocks .ts-num.ts-up {
  color: var(--msl-up);
  font-weight: 700;
}

.msl-top-stocks .ts-num.ts-down {
  color: var(--msl-down);
  font-weight: 700;
}

/* MSL Score visual */
.msl-top-stocks .ts-score-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.msl-top-stocks .ts-score-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--msl-amber-deep);
  min-width: 40px;
}

.msl-top-stocks .ts-score-bar {
  flex: 1;
  height: 6px;
  background: var(--ts-line-soft);
  border-radius: 3px;
  overflow: hidden;
  max-width: 80px;
  min-width: 60px;
}

.msl-top-stocks .ts-score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--msl-amber-deep), var(--msl-amber));
  border-radius: 3px;
}

/* Verdict pill */
.msl-top-stocks .ts-verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-family: "Heebo", sans-serif;
  cursor: default;
  white-space: nowrap;
}

.msl-top-stocks .ts-v-strong {
  background: var(--msl-up);
  color: #fff;
}

.msl-top-stocks .ts-v-buy {
  background: var(--msl-up-soft);
  color: var(--msl-up);
  border: 1px solid var(--msl-up);
}

.msl-top-stocks .ts-v-hold {
  background: var(--msl-amber-soft);
  color: var(--msl-amber-deep);
  border: 1px solid var(--msl-amber);
}

.msl-top-stocks .ts-v-sell {
  background: var(--msl-down-soft);
  color: var(--msl-down);
  border: 1px solid var(--msl-down);
}

/* CTA cell */
.msl-top-stocks .ts-cta {
  color: var(--msl-amber-deep);
  font-weight: 700;
  font-size: 13px;
  font-family: "Heebo", sans-serif;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.msl-top-stocks .ts-cta:hover {
  text-decoration: underline;
}

.msl-top-stocks .ts-cta .ts-arrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  margin-right: 4px;
}

/* ── Pagination footer ──────────────────────────────────── */
.msl-top-stocks .ts-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 16px 0;
  color: var(--ts-text-mute);
  font-size: 13px;
}

.msl-top-stocks .ts-pager-info {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ── Methodology footnote ───────────────────────────────── */
.msl-top-stocks .ts-method {
  margin-top: 36px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.msl-top-stocks .ts-method h4 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--msl-amber-deep);
  letter-spacing: 0.14em;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
  font-weight: 700;
}

.msl-top-stocks .ts-method p {
  margin: 0;
  color: var(--ts-text-mute);
  font-size: 13px;
  line-height: 1.6;
  max-width: 380px;
}

/* ── Loading state ──────────────────────────────────────── */
.msl-top-stocks .ts-loading {
  text-align: center;
  padding: 80px 0;
  color: var(--ts-text-mute);
  font-size: 16px;
}

.msl-top-stocks .ts-error {
  text-align: center;
  padding: 60px 0;
  color: var(--msl-down);
  font-size: 15px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .msl-top-stocks .ts-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .msl-top-stocks .ts-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .msl-top-stocks .ts-method {
    flex-direction: column;
  }

  .msl-top-stocks .ts-tabs {
    gap: 16px;
    overflow-x: auto;
  }
}

@media (max-width: 600px) {
  .msl-top-stocks {
    padding: 20px 16px 40px;
  }

  .msl-top-stocks .ts-stats {
    grid-template-columns: 1fr;
  }

  .msl-top-stocks .ts-header h1 {
    font-size: 26px;
  }
}

/* =========================================================================
   VARIATION-A HERO — page-layout layer (SiteOps, gal-2 · 2026-06-02)
   Generic primitives (tr-live/tr-kpi/tr-filter) live in the canonical kit.
   These tr-* classes are the page layer for /stocks/top-rated/, rendered
   OUTSIDE .msl-top-stocks (full-bleed navy hero). Tokens only · RTL · 0 !important.
   Source: design-kit/mockups/market-tools-2026-06-01/top-rated.css (locked).
   ========================================================================= */

/* 2 · SCAN FUNNEL */
.tr-funnel{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--msl-sp-5) var(--msl-sp-6);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--msl-r-lg); padding:var(--msl-sp-6) var(--msl-sp-7);
}
.tr-funnel-stage{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.tr-funnel-num{
  font-family:var(--msl-font); font-weight:var(--msl-w-black); line-height:1;
  font-size:var(--msl-size-num-xl); letter-spacing:var(--msl-ls-heading);
  color:#fff; font-variant-numeric:tabular-nums;
}
.tr-funnel-stage--top .tr-funnel-num{ color:var(--msl-amber); }
.tr-funnel-lbl{
  font-size:var(--msl-size-tiny); font-weight:var(--msl-w-bold);
  letter-spacing:var(--msl-ls-label); text-transform:uppercase; color:rgba(255,255,255,.65);
}
.tr-funnel-arrow{
  font-size:var(--msl-size-h2); font-weight:var(--msl-w-black); color:var(--msl-amber);
  line-height:1; transform:scaleX(-1);
}
.tr-funnel-mid{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.tr-funnel-mid small{ font-size:var(--msl-size-tiny); color:rgba(255,255,255,.5); font-weight:var(--msl-w-mid); }
@media (max-width:560px){
  .tr-funnel{ gap:var(--msl-sp-4); padding:var(--msl-sp-5); }
  .tr-funnel-num{ font-size:var(--msl-size-num); }
  .tr-funnel-arrow{ transform:scaleX(-1) rotate(90deg); }
}

/* 3 · LEADER CARD */
.tr-leader{
  display:flex; align-items:center; gap:var(--msl-sp-5);
  background:#fff; border-radius:var(--msl-r-lg); padding:var(--msl-sp-5) var(--msl-sp-6);
  position:relative; overflow:hidden; box-shadow:var(--msl-shadow-2);
}
.tr-leader::before{
  content:""; position:absolute; inset-block:0; right:0; width:5px; background:var(--msl-amber);
}
.tr-leader-rank{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding-inline-start:var(--msl-sp-2);
}
.tr-leader-rank .crown{ font-size:var(--msl-size-h4); }
.tr-leader-rank b{
  font-family:var(--msl-font); font-weight:var(--msl-w-bold); font-size:var(--msl-size-tiny);
  letter-spacing:var(--msl-ls-label); text-transform:uppercase; color:var(--msl-amber-deep);
}
.tr-leader-badge{
  flex:0 0 auto; width:52px; height:52px; border-radius:var(--msl-r-md);
  background:var(--msl-navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--msl-font); font-weight:var(--msl-w-black); font-size:var(--msl-size-h4); letter-spacing:.02em;
}
.tr-leader-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tr-leader-name{ font-family:var(--msl-font); font-weight:var(--msl-w-heavy); font-size:var(--msl-size-small); color:var(--msl-ink-strong); }
.tr-leader-name small{ display:block; font-weight:var(--msl-w-mid); color:var(--msl-muted); font-size:var(--msl-size-tiny); }
.tr-leader-stats{ display:flex; align-items:baseline; gap:var(--msl-sp-4); margin-inline-start:auto; }
.tr-leader-score{
  font-family:var(--msl-font); font-weight:var(--msl-w-black); font-size:var(--msl-size-h2);
  color:var(--msl-amber-deep); letter-spacing:var(--msl-ls-heading); line-height:1; font-variant-numeric:tabular-nums;
}
.tr-leader-score small{ font-size:.4em; font-weight:var(--msl-w-bold); color:var(--msl-muted); }
.tr-leader-up{ font-family:var(--msl-font); font-weight:var(--msl-w-heavy); font-size:var(--msl-size-small); color:var(--msl-up); font-variant-numeric:tabular-nums; }
.tr-leader-up--down{ color:var(--msl-down); }
@media (max-width:600px){
  .tr-leader{ flex-wrap:wrap; gap:var(--msl-sp-3) var(--msl-sp-4); }
  .tr-leader-stats{ margin-inline-start:0; width:100%; justify-content:space-between; border-top:1px solid var(--msl-line-light); padding-top:var(--msl-sp-3); }
}

/* 7 · HERO LAYOUT HELPERS */
.tr-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--msl-sp-5); align-items:stretch; margin-top:var(--msl-sp-6); }
@media (max-width:860px){ .tr-hero-grid{ grid-template-columns:1fr; } }
.tr-hero-foot{ margin-top:var(--msl-sp-6); }
.tr-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--msl-sp-4);
  flex-wrap:wrap; margin:0 0 var(--msl-sp-5);
}
.tr-section{ padding:var(--msl-sp-8) 0; }
/* ===== end variation-A hero page layer ===== */
/* ═══════════════════════════════════════════════════════
   msl-top-rated-hub v3 — CSS additions
   APPEND these blocks to the end of msl-top-rated-hub.css
   Do NOT modify existing rules above this block.
   Deployed: 2026-06-10
════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   Page-content wrapper (v3 Page+shortcode architecture)
────────────────────────────────────────────────────── */
.ts-page-content {
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* ──────────────────────────────────────────────────────
   #1 — Show-more
────────────────────────────────────────────────────── */
.ts-extra {
    display: none;
}

.ts-showmore-wrap {
    text-align: center;
    padding: 24px 0 8px;
}

.ts-showmore-btn {
    min-width: 220px;
    font-size: 15px;
}

/* ──────────────────────────────────────────────────────
   #2 — Stock logos
   JS adds ts-logo-loaded / ts-logo-failed on .ts-avatar-wrap
────────────────────────────────────────────────────── */
.ts-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    display: none;
}

/* Logo loaded successfully → show img, hide letter */
.ts-avatar-wrap.ts-logo-loaded .ts-logo {
    display: block;
}

.ts-avatar-wrap.ts-logo-loaded .ts-avatar {
    display: none;
}

/* Logo failed (or not provided) → avatar shows (default behavior, no overrides needed) */

/* ──────────────────────────────────────────────────────
   #3a — Familiarity strip (well-known stocks)
────────────────────────────────────────────────────── */
.tr-familiar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0 10px;
    margin-block-end: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Strip sits directly below the hero (navy bg) — override to use container bg */
.tr-familiar {
    background: transparent;
}

.tr-familiar-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
    flex-shrink: 0;
}

.tr-familiar-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tr-fam-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .06);
    transition: background 0.15s, border-color 0.15s;
}

.tr-fam-badge:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    text-decoration: none;
}

/* Score-colored variants */
.tr-fam--high {
    border-color: rgba(52, 211, 153, .5);
    color: #34d399;
    background: rgba(52, 211, 153, .08);
}

.tr-fam--high:hover {
    background: rgba(52, 211, 153, .16);
}

.tr-fam--mid {
    border-color: rgba(251, 191, 36, .5);
    color: #fbbf24;
    background: rgba(251, 191, 36, .07);
}

.tr-fam--mid:hover {
    background: rgba(251, 191, 36, .14);
}

/* tr-fam--low and tr-fam--unknown use default badge styles */

.tr-fam-score {
    font-size: 10px;
    font-weight: 800;
    opacity: .85;
    line-height: 1;
}

/* When the strip is placed below the hero (dark bg), it inherits correctly.
   If it ever lands on white bg (content area), invert: */
.ts-page-content .tr-familiar,
.msl-top-stocks .tr-familiar {
    border-bottom-color: var(--msl-border, #e5e7eb);
}

.ts-page-content .tr-familiar-label,
.msl-top-stocks .tr-familiar-label {
    color: var(--msl-muted, #6b7280);
}

.ts-page-content .tr-fam-badge,
.msl-top-stocks .tr-fam-badge {
    border-color: var(--msl-border, #e5e7eb);
    color: var(--msl-text, #111827);
    background: transparent;
}

.ts-page-content .tr-fam-badge:hover,
.msl-top-stocks .tr-fam-badge:hover {
    background: var(--msl-bg-alt, #f3f4f6);
}

.ts-page-content .tr-fam--high,
.msl-top-stocks .tr-fam--high {
    border-color: #059669;
    color: #047857;
    background: rgba(5, 150, 105, .07);
}

.ts-page-content .tr-fam--mid,
.msl-top-stocks .tr-fam--mid {
    border-color: #d97706;
    color: #b45309;
    background: rgba(217, 119, 6, .07);
}

/* ──────────────────────────────────────────────────────
   #6 — Column header tooltips
   .ts-col-tip: the th-content wrapper with data-tip
   .ts-tip-bubble: injected by JS as a child span
────────────────────────────────────────────────────── */
.ts-col-tip {
    position: relative;
    cursor: help;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Help badge — small circled question mark after the column label */
.ts-col-tip::after {
    content: '?';
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #94a3b8;
    border-radius: 50%;
    transition: background .15s ease;
}
.ts-col-tip:hover::after,
.ts-col-tip.ts-tip-open::after {
    background: #475569;
}

/* The bubble injected by JS */
.ts-tip-bubble {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    background: #0f172a;
    color: #f1f5f9;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    padding: 9px 13px;
    border-radius: 7px;
    text-align: start;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    white-space: normal;
    z-index: 200;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}

/* Arrow */
.ts-tip-bubble::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #0f172a;
}

/* Show on hover (desktop) */
.ts-col-tip:hover .ts-tip-bubble {
    opacity: 1;
}

/* Show on click (mobile) — toggled by JS via class */
.ts-col-tip.ts-tip-open .ts-tip-bubble {
    opacity: 1;
}

/* Focus (keyboard) */
.ts-col-tip:focus-visible .ts-tip-bubble {
    opacity: 1;
    outline: none;
}

/* Mobile: wider bubble, keep it from clipping */
@media (max-width: 640px) {
    .ts-tip-bubble {
        width: 200px;
        left: auto;
        right: 0;
        transform: none;
    }

    .ts-tip-bubble::after {
        left: auto;
        right: 12px;
        transform: none;
    }

    /* First column: bubble goes right */
    th:first-child .ts-tip-bubble,
    th:nth-child(2) .ts-tip-bubble {
        left: 0;
        right: auto;
        transform: none;
    }

    th:first-child .ts-tip-bubble::after,
    th:nth-child(2) .ts-tip-bubble::after {
        left: 12px;
        right: auto;
    }
}