:root {
  /* D visual language — Daily Briefing palette (2026-04-30) */
  --bg: #0c0e13;
  --panel: #14171e;
  --panel-2: #1a1d26;
  --panel-3: #1f2330;
  --border: #262b38;
  --border-soft: #1e2230;
  --text: #ecedf2;
  --muted: #8e94a6;
  --dim: #5d6377;
  /* indigo-violet primary */
  --accent: #a78bfa;
  --accent-2: #c4b5fd;
  --green: #4ade80;
  --green-soft: rgba(74, 222, 128, 0.12);
  --green-text: #86efac;
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.12);
  --red-text: #fca5a5;
  --yellow: #fbbf24;
  --yellow-soft: rgba(251, 191, 36, 0.12);
  --yellow-text: #fcd34d;
  --volume: #fb923c;
  --row-alt: rgba(255, 255, 255, 0.018);
}

* { box-sizing: border-box; }

/* ----------------------------------------------------------------------------
 * FIXED-WIDTH DESKTOP LAYOUT (2026-05-14)
 *
 * The site is intentionally not responsive on desktop. The page locks to a
 * 1500-pixel design and the window scrolls horizontally when narrower —
 * features never reflow. A separate mobile view will live behind its own
 * entry point (TBD). The responsive `@media (max-width: …)` blocks farther
 * down this file are disabled below.
 * --------------------------------------------------------------------------- */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: "ss01", "tnum", "cv11";
  -webkit-font-smoothing: antialiased;
  min-width: 1500px;
}

a {
  color: var(--accent-2);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.topbar-inner {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 28px; max-width: 1500px; margin: 0 auto;
}
/* Brand mark: indigo whale icon + rounded Quicksand wordmark.
   Quicksand's friendly geometric curves match the playful cartoon-whale icon. */
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  text-decoration: none;
  line-height: 1;
}
.topbar .brand:hover { text-decoration: none; color: var(--text); }
.topbar .brand:hover .brand-logo { filter: brightness(1.12); }

.topbar .brand .brand-logo {
  width: 30px;
  height: 30px;
  color: var(--accent);            /* drives `fill="currentColor"` on the SVG paths */
  flex-shrink: 0;
  transition: filter 0.15s ease;
}
.topbar .brand .brand-text {
  font-family: "Quicksand", "Inter", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
}
.topbar nav { display: flex; gap: 4px; flex: 1; margin-left: 12px; }
.topbar nav a {
  color: var(--muted);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  text-decoration: none;
}
.topbar nav a.active { color: var(--text); background: var(--panel-2); }
.topbar nav a:hover { color: var(--text); background: var(--panel); text-decoration: none; }

.topbar .top-actions {
  display: flex; align-items: center; gap: 14px;
}
.topbar .search-pill {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px;
  font-size: 12.5px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
  width: 180px; cursor: text; outline: none;
  transition: border-color 0.15s ease;
}
.topbar .search-pill:hover, .topbar .search-pill:focus { border-color: var(--accent); }
.topbar .search-pill .kbd {
  margin-left: auto; padding: 1px 5px; border: 1px solid var(--border);
  border-radius: 3px; font-size: 10.5px; font-family: ui-monospace, monospace;
  color: var(--dim); background: var(--panel-2);
}
.topbar .topmeta {
  color: var(--dim); font-size: 11.5px;
  display: flex; gap: 12px;
  font-variant-numeric: tabular-nums;
}
.topbar .topmeta-item strong { color: var(--text); font-weight: 500; }

main {
  padding: 28px 28px 60px;
  max-width: 1500px;
  margin: 0 auto;
}

h1 {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
h1 + .sub {
  color: var(--muted);
  font-size: 13.5px;
  margin-bottom: 26px;
  line-height: 1.55;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.panel + .panel { margin-top: 22px; }

/* Buttons (D's CTA pattern) */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px; font-size: 13.5px;
  font-weight: 500; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn:hover { background: var(--panel-2); border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: white; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.small { padding: 6px 12px; font-size: 12.5px; border-radius: 7px; }

.panel-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
}
.panel-head .title { font-weight: 600; }
.panel-head .stats { color: var(--muted); font-size: 12px; }

.search {
  margin-left: auto;
}
.search input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  width: 200px;
}
.search input:focus {
  outline: none;
  border-color: var(--accent);
}

.filter-bar {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.filter-bar input,
.filter-bar select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
}
.filter-bar input { width: 170px; }
.filter-bar select { padding-right: 24px; cursor: pointer; }
.filter-bar input:focus,
.filter-bar select:focus {
  outline: none;
  border-color: var(--accent);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

thead th {
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
thead th.num { text-align: right; }
thead th:hover { color: var(--text); }
thead th .arrow {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 4px;
  vertical-align: middle;
  opacity: 0.45;
}

tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
}
tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:nth-child(odd) { background: var(--row-alt); }
tbody tr:hover { background: rgba(91, 141, 239, 0.06); }

.ticker {
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* When a ticker is rendered as a link (drilldown nav), drop the global
   anchor blue + underline so it visually matches the inline span styling. */
a.ticker {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(154, 160, 179, 0.35);
  transition: border-color 0.1s ease, color 0.1s ease;
}
a.ticker:hover {
  text-decoration: none;
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
}

.broker-code {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.broker-type {
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
}

.side-buy   { color: var(--green-text); font-weight: 500; }
.side-sell  { color: var(--red-text); font-weight: 500; }
.side-mixed { color: var(--muted); }

.spike-type {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
}
.spike-type.first_seen { background: var(--yellow-soft); color: var(--yellow-text); border: 1px solid var(--yellow); }
.spike-type.magnitude  { background: var(--accent); color: white; }

/* Heatmap cells: tinted background based on spike intensity */
.heat-1   { background: rgba(91, 141, 239, 0.05); }
.heat-2   { background: rgba(91, 141, 239, 0.10); }
.heat-3   { background: rgba(91, 141, 239, 0.18); }
.heat-4   { background: rgba(251, 191, 36, 0.18); color: var(--yellow-text); }
.heat-5   { background: rgba(251, 113, 113, 0.18); color: var(--red-text); }

.score {
  font-weight: 600;
  color: var(--accent-2);
}
.score.high   { color: var(--yellow-text); }
.score.crit   { color: var(--red-text); }

.notes-cell {
  white-space: normal;
  max-width: 720px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.note-buy  { color: var(--green-text); }
.note-sell { color: var(--red-text); }
.note-buy::before, .note-sell::before { content: ""; }

.empty {
  padding: 40px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.footer {
  text-align: center;
  color: var(--muted);
  padding: 24px;
  font-size: 12px;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

/* ---------------------------------------------------------------------
 * D visual language — Daily Briefing components
 * --------------------------------------------------------------------- */

/* Briefing header */
.brief-head {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 24px; margin-bottom: 28px;
}
.brief-eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px;
  color: var(--muted); font-weight: 700; margin-bottom: 10px;
}
.brief-eyebrow .live { color: var(--green); margin-right: 4px; }
h1.brief-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 32px; line-height: 1.2; margin: 0 0 12px;
  letter-spacing: -0.02em; font-weight: 700;
}
.brief-meta {
  color: var(--muted); font-size: 14px; line-height: 1.6;
  max-width: 760px; margin: 0;
}
.brief-meta strong { color: var(--text); font-weight: 500; }
.brief-meta .num-up { color: var(--green-text); font-weight: 600; }
.brief-meta .num-down { color: var(--red-text); font-weight: 600; }

.hero-cta {
  margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap;
}

/* Filter chips */
.strip {
  display: flex; gap: 6px; margin: 22px 0 0; flex-wrap: wrap;
}
.strip-item {
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted);
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; user-select: none;
}
.strip-item:hover { color: var(--text); border-color: var(--accent); }
.strip-item.active { background: var(--panel-2); color: var(--text); border-color: var(--accent); }
.strip-item .ct { font-size: 10px; color: var(--dim); margin-left: 2px; }
.strip-item.active .ct { color: var(--muted); }
.strip-item .dot { width: 6px; height: 6px; border-radius: 50%; }
.strip-item.bandar  .dot { background: #fca5a5; }
.strip-item.whale   .dot { background: #fde68a; }
.strip-item.zombie  .dot { background: #d8b4fe; }
.strip-item.tektok  .dot { background: #f9a8d4; }
.strip-item.foreign .dot { background: #93c5fd; }
.strip-item.volume  .dot { background: var(--volume); }

/* Two-column overview layout */
.layout {
  display: grid; grid-template-columns: 1fr 320px; gap: 32px;
  max-width: 1500px; margin: 0 auto;
}
.feed { min-width: 0; }

/* Section heading (lowercase eyebrow) */
h2.sect {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; color: var(--muted); margin: 0 0 16px;
  display: flex; align-items: baseline; gap: 12px;
}
h2.sect .meta {
  font-size: 12px; color: var(--dim);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* "Where to start" action cards */
.actions-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  margin-bottom: 36px;
}
.action-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; text-decoration: none;
  color: inherit; transition: all 0.15s ease;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 158px;
}
.action-card:hover {
  border-color: var(--accent); transform: translateY(-1px);
  text-decoration: none;
}
.action-card .ico {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
  border: 1px solid var(--border-soft); background: var(--panel-2);
}
.action-card.brokers  .ico { color: #fbbf24; background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.30); }
.action-card.methods  .ico { color: var(--accent); background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.30); }
.action-card.rotation .ico { color: #38bdf8; background: rgba(56,189,248,0.10); border-color: rgba(56,189,248,0.30); }
.action-card.volume   .ico { color: var(--volume); background: rgba(251,146,60,0.10); border-color: rgba(251,146,60,0.30); }
.action-card h3 {
  margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em;
}
.action-card p {
  margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; flex: 1;
}
.action-card .arrow {
  color: var(--accent-2); font-size: 12.5px; font-weight: 500;
}

/* Story cards */
.stories { display: flex; flex-direction: column; gap: 24px; }
.story {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 24px;
  display: grid; grid-template-columns: 1fr 200px;
  gap: 28px; align-items: start;
}
.story:last-child { border-bottom: none; }
.story.hero {
  grid-template-columns: 1fr;
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 26px 28px; margin-bottom: 8px;
}

.st-rubric {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 600; margin-bottom: 10px;
  flex-wrap: wrap;
}
.st-pill {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase;
}
.st-pill.bandar  { background: rgba(239,68,68,0.18); color: #fca5a5; }
.st-pill.whale   { background: rgba(234,179,8,0.18); color: #fde68a; }
.st-pill.zombie  { background: rgba(168,85,247,0.18); color: #d8b4fe; }
.st-pill.tektok  { background: rgba(236,72,153,0.18); color: #f9a8d4; }
.st-pill.foreign { background: rgba(59,130,246,0.18); color: #93c5fd; }
.st-pill.retail  { background: rgba(154,160,179,0.14); color: #c1c5d4; }
.st-pill.volume  { background: rgba(251,146,60,0.18); color: var(--volume); }

.st-tk-row {
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px;
}
.st-tk {
  font-size: 22px; font-weight: 700; letter-spacing: -0.005em;
  color: var(--text); text-decoration: none;
}
a.st-tk:hover { color: var(--accent-2); text-decoration: none; }
.story.hero .st-tk { font-size: 30px; }
.st-firm { font-size: 12.5px; color: var(--muted); }
.st-price {
  font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums;
  margin-left: auto; font-weight: 500;
}
.st-price .change.up { color: var(--green-text); }
.st-price .change.down { color: var(--red-text); }
.st-price .vol-mult {
  color: var(--volume); font-size: 11px; padding: 1px 5px;
  background: rgba(251,146,60,0.12); border-radius: 3px; margin-left: 6px;
  font-weight: 600;
}
.vol-mult { font-size: 10px; padding: 1px 5px; background: rgba(251,146,60,0.12); color: var(--volume); border-radius: 3px; font-weight: 600; }

.st-headline {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 18px; line-height: 1.35;
  color: var(--text); font-weight: 600; margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.story.hero .st-headline { font-size: 24px; line-height: 1.25; }

.st-body {
  font-size: 13.5px; color: var(--muted); line-height: 1.65; margin: 0 0 14px;
}
.st-body strong { color: var(--text); font-weight: 500; }

.st-actions {
  display: flex; gap: 6px; align-items: center; font-size: 12.5px;
}
.st-actions a {
  color: var(--accent-2); padding: 3px 10px; border-radius: 6px;
  border: 1px solid transparent; text-decoration: none;
}
.st-actions a:hover { background: var(--panel-2); border-color: var(--border); }
.st-actions .sep { color: var(--dim); }

/* Side chart in non-hero stories */
.st-chart {
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 12px; height: 96px;
  display: flex; flex-direction: column; gap: 4px; justify-content: space-between;
}
.st-chart .meta {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; display: flex; justify-content: space-between;
}
.st-chart svg { width: 100%; height: 56px; }
.st-chart .num {
  font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Hero feat chart */
.story.hero .feat-chart {
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 18px; margin-top: 16px;
}
.story.hero .feat-chart .meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--muted); margin-bottom: 10px;
}
.story.hero .feat-chart .meta-row .price {
  color: var(--text); font-weight: 600; font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Side rail */
.rail { display: flex; flex-direction: column; gap: 18px; }
.rail-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
}
.rail-card h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted); font-weight: 700; margin: 0 0 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.rail-card h4 .src-link {
  font-size: 10.5px; color: var(--accent-2); font-weight: 500;
  text-transform: none; letter-spacing: 0; text-decoration: none;
}
.rail-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.rail-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
}
.rail-tk {
  font-weight: 600; color: var(--text); letter-spacing: 0.03em;
  text-decoration: none;
}
a.rail-tk:hover { color: var(--accent-2); text-decoration: none; }
.rail-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.rail-val.up { color: var(--green-text); }
.rail-val.down { color: var(--red-text); }

/* News card */
.news-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.news-item {
  padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.news-item:last-child { border-bottom: none; padding-bottom: 0; }
.news-item:first-child { padding-top: 0; }
.news-item a { text-decoration: none; color: inherit; display: block; }
.news-item:hover .news-headline { color: var(--accent-2); }
.news-meta {
  font-size: 10.5px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.news-source {
  color: var(--text); padding: 1px 6px; border-radius: 3px;
  background: var(--panel-2); border: 1px solid var(--border);
  text-transform: none; letter-spacing: 0; font-size: 10px;
}
.news-tag {
  font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
  color: var(--muted); background: rgba(255,255,255,0.04); margin-left: auto;
}
.news-headline {
  font-size: 12.5px; color: var(--text); line-height: 1.45;
  font-weight: 500;
  transition: color 0.15s ease;
}

/* Mentions card */
.mention-row {
  font-size: 12px; color: var(--muted); line-height: 1.45;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft);
}
.mention-row:last-child { border-bottom: none; padding-bottom: 0; }
.mention-row:first-child { padding-top: 0; }
.mention-row strong { color: var(--text); font-weight: 500; }

/* Backfill rail card */
.bf-card {
  background: linear-gradient(135deg, var(--panel) 0%, rgba(167,139,250,0.06) 100%);
}
.bf-card .pct {
  font-size: 28px; font-weight: 700; color: var(--accent-2);
  letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums;
}
.bf-card .pct-sub {
  font-size: 11.5px; color: var(--muted); margin-top: 4px;
}
.bf-track {
  height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px;
  margin: 14px 0 8px; overflow: hidden;
}
.bf-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent), #c4b5fd);
  transition: width 0.4s ease;
}
.bf-stats {
  font-size: 11px; color: var(--muted);
  display: flex; justify-content: space-between;
}
.bf-stats strong { color: var(--text); font-weight: 500; }

.dim.small { color: var(--dim); font-size: 11.5px; }

/* Responsive collapse DISABLED 2026-05-14 — site is fixed-width desktop only.
   Mobile view will live behind a dedicated entry point. */
/*
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; padding: 20px 16px 60px; }
  .rail { order: -1; }
  .story { grid-template-columns: 1fr; }
  h1.brief-title { font-size: 26px; }
  .actions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .actions-grid { grid-template-columns: 1fr; }
}
*/

/* ---------------------------------------------------------------------------
 * Home page (Mockup A) — additions on top of existing classes:
 *   - .sm-strip wrapper for the broker-chip row on each story
 *   - .pill / .pill-buy / .pill-sell / .pill-mute  used in story rubrics
 *     (replaces the old NeoBDM category pills bandar/whale/zombie/etc.)
 *   - .mover-row layout for the top-5 buy/sell rail with firm sub-text
 *   - .algo-card for the "Hottest broker today" right-rail card
 *   - .ticker-uline for the hero headline underline accent
 * --------------------------------------------------------------------------- */

.sm-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}

/* SM-flavoured story pills (BUY-led / SELL-led / MIXED). Match the
 * letter-spacing + size of the legacy .st-pill so they sit on the same
 * baseline as the category pills used elsewhere. */
.pill {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase;
}
.pill-buy  { background: rgba(74,222,128,0.18);  color: var(--green-text); }
.pill-sell { background: rgba(248,113,113,0.18); color: var(--red-text); }
.pill-mute { background: rgba(255,255,255,0.06); color: var(--muted); }

/* Top-5 buy/sell rail rows — ticker on top, firms underneath, amount right. */
.mover-row {
  display: grid !important; grid-template-columns: 1fr auto;
  gap: 8px; align-items: center;
}
.mover-tk-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mover-firms {
  color: var(--muted); font-size: 10.5px; letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 180px;
}

/* Hottest broker card (right rail) */
.algo-card .algo-lead {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.algo-card .algo-lead .code {
  font-family: Georgia, serif; font-size: 24px; font-weight: 700;
  color: var(--accent-2); text-decoration: none; letter-spacing: -0.01em;
}
.algo-card .algo-lead .code:hover { text-decoration: none; filter: brightness(1.15); }
.algo-card .algo-net {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.algo-card .algo-net.up   { color: var(--green-text); }
.algo-card .algo-net.down { color: var(--red-text); }
.algo-card .algo-meta {
  font-size: 11.5px; color: var(--muted); margin-bottom: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.algo-card .algo-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px;
  font-size: 11.5px;
}
.algo-card .algo-stats .label { color: var(--muted); }
.algo-card .algo-stats .val   {
  color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Hero headline ticker accent */
.ticker-uline {
  border-bottom: 3px solid var(--accent);
  padding-bottom: 1px;
}

/* When the action card has no .ico color class, give the icon block a
 * neutral default so the 5-card grid all look balanced. */
.action-card .ico { color: var(--accent-2); }

/* ---------------------------------------------------------------------
 * Narrow-screen + mobile polish (added 2026-04-30 Day 6)
 * --------------------------------------------------------------------- */
/* Responsive collapses DISABLED 2026-05-14 — site is fixed-width desktop only. */
/*
@media (max-width: 1400px) {
  .activity-cell { min-width: 360px; max-width: 440px; }
  .nettxn-cell { min-width: 200px; max-width: 240px; }
  .notes-cell.auto-notes { min-width: 240px; max-width: 320px; }
}
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .topbar nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .topbar nav a { white-space: nowrap; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .topbar .meta { font-size: 11px; }
}
@media (max-width: 768px) {
  main { padding: 12px; }
  h1 { font-size: 18px; }
  .kpi-row { grid-template-columns: 1fr; }
  .kpi .value { font-size: 16px; }
  .panel-head { flex-wrap: wrap; gap: 8px; }
  .filter-bar { flex-wrap: wrap; }
  .filter-bar input, .filter-bar select { width: 100%; }
  table { font-size: 11.5px; }
  thead th, tbody td { padding: 6px 8px; }
  .bs-date, .tx-date, .bp-date, .inv-date, .cat-date, .rot-date,
  .bs-btn, .tx-btn, .bp-btn, .inv-btn, .cat-btn, .rot-btn { font-size: 11px; padding: 3px 8px; }
  .preset-group { flex-wrap: wrap; }
}
*/
.kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.kpi .label { color: var(--muted); font-size: 12px; }
.kpi .value { font-size: 20px; font-weight: 600; margin-top: 4px; }

/* ---------------------------------------------------------------------------
 * Broker activity screen — categorical layout
 * --------------------------------------------------------------------------- */

/* Activity column — one row per broker entry */
.activity-cell {
  white-space: normal;
  min-width: 410px;
  max-width: 490px;
  font-size: 12.5px;
  line-height: 1.55;
}
.act-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 1px 0;
}

/* Category tag — small pill prefix in the Activity column */
.cat-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  min-width: 56px;
  text-align: center;
  flex-shrink: 0;
  border: 1px solid transparent;
}
/* Anchor variant of cat-tag — keeps the pill look but is clickable */
a.cat-tag-link {
  text-decoration: none;
  cursor: pointer;
}
a.cat-tag-link:hover {
  text-decoration: none;
  filter: brightness(1.18);
}

/* Broker code links inside the Activity column — keep colour from
   parent (.note-buy / .note-sell) but show clickability via dotted
   underline that brightens on hover. */
a.broker-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.25);
  font-weight: 600;
  letter-spacing: 0.04em;
}
a.broker-link:hover {
  color: var(--accent-2);
  border-bottom-color: var(--accent-2);
  text-decoration: none;
}
/* 6-category palette (2026-04-29). Each category has a distinct hue:
   - bandar  red       (coordinated accumulation/distribution)
   - whale   amber/gold (large individual moves)
   - zombie  violet    (dormant -> sudden activity, unusual)
   - tektok  pink      (high-frequency churn, algo/HFT-shaped)
   - foreign blue      (cross-border / Asing-group flow)
   - retail  gray      (baseline, muted)
*/
.cat-tag.cat-bandar {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.32);
}
.cat-tag.cat-whale,
.cat-tag.cat-sultan {  /* legacy alias retained */
  background: rgba(234, 179, 8, 0.18);
  color: #fde68a;
  border-color: rgba(234, 179, 8, 0.32);
}
.cat-tag.cat-zombie {
  background: rgba(168, 85, 247, 0.18);
  color: #d8b4fe;
  border-color: rgba(168, 85, 247, 0.32);
}
.cat-tag.cat-tektok {
  background: rgba(236, 72, 153, 0.18);
  color: #f9a8d4;
  border-color: rgba(236, 72, 153, 0.32);
}
.cat-tag.cat-foreign {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.32);
}
.cat-tag.cat-retail {
  background: rgba(154, 160, 179, 0.14);
  color: #c1c5d4;
  border-color: rgba(154, 160, 179, 0.28);
}
/* Legacy aliases for old DEFAULTS data still using "smart_money" / "funds"
   (templates may render these directly via {{ n.category }}). */
.cat-tag.cat-smart_money { background: rgba(234, 179, 8, 0.18); color: #fde68a; border-color: rgba(234, 179, 8, 0.32); }
.cat-tag.cat-funds       { background: rgba(59, 130, 246, 0.18); color: #93c5fd; border-color: rgba(59, 130, 246, 0.32); }

/* Net Txn column — categorical chips with gradient intensity */
.nettxn-cell {
  white-space: normal;
  min-width: 230px;
  max-width: 280px;
  font-size: 11.5px;
  line-height: 1.7;
}
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 11px;
  margin: 1px 3px 1px 0;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Buy chips — green family, intensity drives opacity + saturation */
.chip-buy.intensity-0 { background: rgba(74, 222, 128, 0.06); color: rgba(134, 239, 172, 0.55); border-color: rgba(74, 222, 128, 0.10); }
.chip-buy.intensity-1 { background: rgba(74, 222, 128, 0.10); color: rgba(134, 239, 172, 0.70); border-color: rgba(74, 222, 128, 0.18); }
.chip-buy.intensity-2 { background: rgba(74, 222, 128, 0.18); color: #86efac; border-color: rgba(74, 222, 128, 0.30); }
.chip-buy.intensity-3 { background: rgba(74, 222, 128, 0.30); color: #bbf7d0; border-color: rgba(74, 222, 128, 0.55); font-weight: 700; }
.chip-buy.intensity-4 { background: rgba(74, 222, 128, 0.45); color: #dcfce7; border-color: var(--green); font-weight: 700; }

/* Sell chips — red family */
.chip-sell.intensity-0 { background: rgba(248, 113, 113, 0.06); color: rgba(252, 165, 165, 0.55); border-color: rgba(248, 113, 113, 0.10); }
.chip-sell.intensity-1 { background: rgba(248, 113, 113, 0.10); color: rgba(252, 165, 165, 0.70); border-color: rgba(248, 113, 113, 0.18); }
.chip-sell.intensity-2 { background: rgba(248, 113, 113, 0.18); color: #fca5a5; border-color: rgba(248, 113, 113, 0.30); }
.chip-sell.intensity-3 { background: rgba(248, 113, 113, 0.30); color: #fecaca; border-color: rgba(248, 113, 113, 0.55); font-weight: 700; }
.chip-sell.intensity-4 { background: rgba(248, 113, 113, 0.45); color: #fee2e2; border-color: var(--red); font-weight: 700; }

/* Auto-notes column */
.notes-cell.auto-notes {
  white-space: normal;
  min-width: 280px;
  max-width: 360px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  line-height: 1.55;
  vertical-align: middle;
  color: var(--text);
}
.auto-note {
  margin: 2px 0;
  padding-left: 10px;
  position: relative;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.auto-note::before {
  content: "•";
  color: var(--muted);
  position: absolute;
  left: 0;
}

/* ---------------------------------------------------------------------------
 * Brokers screen — BR-A "Briefing" layout (2026-04-30 Day 9)
 * KPI strip · sticky filter card · magnitude bar · multi-toggle pills · sort segment
 * --------------------------------------------------------------------------- */

.brokers-hero { margin-bottom: 18px; }
.brokers-hero .eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px;
  color: var(--muted); font-weight: 700; margin-bottom: 8px;
}
.brokers-hero h1 { margin: 0 0 6px; }
.brokers-hero .lede {
  color: var(--muted); font-size: 14px; margin: 0; max-width: 720px;
}

/* KPI strip --------------------------------------------------------------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.kpi-strip .kpi {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
}
.kpi-strip .kpi .label {
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600;
}
.kpi-strip .kpi .value {
  margin-top: 6px; font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em; font-feature-settings: "tnum";
}
.kpi-strip .kpi .sub { color: var(--dim); font-size: 11.5px; margin-top: 3px; }
.kpi-strip .kpi.buy  .value { color: var(--green-text); }
.kpi-strip .kpi.sell .value { color: var(--red-text); }
.kpi-strip .kpi.hot  .value {
  color: var(--yellow-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px; line-height: 1.3;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.kpi-strip .kpi.hot .value a { color: var(--yellow-text); }
.kpi-strip .kpi.hot .value a:hover { color: var(--accent-2); }
.kpi-strip .kpi.hot .kpi-amt {
  font-family: "Inter", sans-serif; font-size: 14px;
  font-weight: 600; color: var(--text);
}

/* Sticky filter card ------------------------------------------------------ */
.filter-card {
  position: sticky; top: 60px; z-index: 9;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 12px;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 18px; row-gap: 8px;
}
.filter-card .row-count {
  font-size: 12.5px; color: var(--muted); font-weight: 500;
  min-width: 130px;
}
.filter-card .row-count strong { color: var(--text); font-weight: 700; }
.filter-card .filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-card .filter-group label {
  font-size: 11px; color: var(--dim); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; margin-right: 4px;
}
.filter-card .filter-group input[type="search"] {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); padding: 5px 10px; border-radius: 6px;
  font-size: 12.5px; font-family: inherit; width: 130px;
}
.filter-card .filter-group input[type="search"]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.18);
}
.filter-card .filter-sort { margin-left: auto; }

/* Segmented control (used for Side + Sort) -------------------------------- */
.seg {
  display: inline-flex; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
}
.seg .seg-item {
  padding: 5px 11px; font-size: 12px; color: var(--muted);
  cursor: pointer; border-right: 1px solid var(--border); font-weight: 500;
  user-select: none; text-decoration: none; transition: color 0.1s;
}
.seg .seg-item:last-child { border-right: none; }
.seg .seg-item:hover { color: var(--text); text-decoration: none; }
.seg .seg-item.on {
  background: var(--panel-3); color: var(--text); font-weight: 700;
}

/* Multi-toggle category pills --------------------------------------------- */
.cat-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); user-select: none;
  transition: all 0.12s ease;
}
.cat-toggle:hover { color: var(--text); border-color: var(--accent); }
.cat-toggle.on.tektok  { background: rgba(236, 72, 153, 0.18); color: #f9a8d4;  border-color: rgba(236, 72, 153, 0.55); }
.cat-toggle.on.bandar  { background: rgba(239, 68, 68, 0.18);  color: #fca5a5;  border-color: rgba(239, 68, 68, 0.55); }
.cat-toggle.on.whale   { background: rgba(234, 179, 8, 0.18);  color: #fde68a;  border-color: rgba(234, 179, 8, 0.55); }
.cat-toggle.on.zombie  { background: rgba(168, 85, 247, 0.18); color: #d8b4fe;  border-color: rgba(168, 85, 247, 0.55); }
.cat-toggle.on.foreign { background: rgba(59, 130, 246, 0.18); color: #93c5fd;  border-color: rgba(59, 130, 246, 0.55); }

/* Brokers panel ----------------------------------------------------------- */
.brokers-panel { padding: 0; }
.brk-table thead th {
  /* Non-sticky thead — the filter card above stays sticky and contains the
     sort control, so the thead doesn't need to follow on scroll. Making it
     sticky created a visual bug where the first row (BBCA) would render
     above the pinned thead during scroll. */
  position: static;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted);
}
.brk-table thead th:hover:not(.no-sort) { color: var(--text); background: var(--panel-3); }
.brk-table tbody tr:nth-child(odd) { background: transparent; }
.brk-table tbody tr:hover { background: rgba(167, 139, 250, 0.04); }
.brk-table tbody td { vertical-align: middle; padding: 11px 12px; }
.brk-table .activity-cell { vertical-align: top; }

/* Row hover affordance — whole row is clickable to drilldown */
.brk-table tbody tr.row-link { cursor: pointer; }
.brk-table tbody tr.row-link:hover { background: rgba(167, 139, 250, 0.06); }

/* Unified font for Last Close / Activity / Notes — match the buy/sell
   magnitude labels (11px, Inter, tabular-nums). Scoped to `tbody` so the
   thead <th class="activity-cell|notes-cell"> stay on the standard
   .brk-table thead th sizing (10.5px) along with the rest of the headers. */
.brk-table tbody .price-cell,
.brk-table tbody .price-cell .px,
.brk-table tbody .price-cell .px-chg,
.brk-table tbody .activity-cell,
.brk-table tbody .activity-cell .act-row,
.brk-table tbody .activity-cell .note-buy,
.brk-table tbody .activity-cell .note-sell,
.brk-table tbody .notes-cell,
.brk-table tbody .notes-cell .auto-note {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  line-height: 1.55;
  font-feature-settings: "tnum";
  font-weight: 600;            /* match BUY/SELL magnitude amounts */
}
.brk-table tbody .price-cell .px { font-size: 12px; font-weight: 600; }

/* Ticker cell ------------------------------------------------------------- */
.brk-table .ticker-cell { white-space: nowrap; }
.brk-table .ticker-cell .ticker {
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--text);
  border-bottom-color: rgba(154, 160, 179, 0.35);
}
.brk-table .ticker-cell .ticker:hover { color: var(--accent-2); border-bottom-color: var(--accent-2); }
.brk-table .ticker-date {
  color: var(--dim); font-size: 11px; margin-top: 2px;
}

/* Price cell with %chg ---------------------------------------------------- */
.brk-table .price-cell { white-space: nowrap; }
.brk-table .price-cell .px {
  font-weight: 600; font-feature-settings: "tnum";
}
.brk-table .price-cell .px-chg {
  display: block; font-size: 11px; margin-top: 2px; font-feature-settings: "tnum";
}
.brk-table .px-up { color: var(--green-text); }
.brk-table .px-dn { color: var(--red-text); }

/* Side tag ---------------------------------------------------------------- */
.side-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px;
}
.side-tag.buy   { background: rgba(74, 222, 128, 0.18);  color: var(--green-text); }
.side-tag.sell  { background: rgba(248, 113, 113, 0.18); color: var(--red-text); }
.side-tag.mixed { background: rgba(154, 160, 179, 0.18); color: var(--muted); }

/* Magnitude bar ----------------------------------------------------------- */
.brk-table .mag-cell { width: 220px; min-width: 200px; }
.mag-bar {
  height: 18px; border-radius: 4px; background: var(--panel-3);
  display: flex; overflow: hidden;
}
.mag-buy {
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.35), rgba(74, 222, 128, 0.55));
  border-right: 1px solid rgba(74, 222, 128, 0.6);
}
.mag-sell {
  background: linear-gradient(90deg, rgba(248, 113, 113, 0.55), rgba(248, 113, 113, 0.35));
}
.mag-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; margin-top: 3px;
  font-feature-settings: "tnum";
}
.mag-buy-amt  { color: var(--green-text); font-weight: 600; }
.mag-sell-amt { color: var(--red-text);   font-weight: 600; }

/* ---------------------------------------------------------------------------
 * Smart Money screen — replaces the legacy 6-category broker layout
 * --------------------------------------------------------------------------- */

/* SM-share gauge — horizontal bar 0..100% in the SM-share column */
.brk-table .share-cell { width: 130px; min-width: 110px; }
.share-bar {
  position: relative; height: 18px; border-radius: 4px;
  background: var(--panel-3); overflow: hidden; margin-bottom: 0;
}
.share-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(167,139,250,0.30), rgba(167,139,250,0.50));
  border-right: 1px solid rgba(167,139,250,0.65);
}
.share-fill.share-strong {
  background: linear-gradient(90deg, rgba(74,222,128,0.30), rgba(74,222,128,0.55));
  border-right-color: rgba(74,222,128,0.7);
}
.share-fill.share-hot {
  background: linear-gradient(90deg, rgba(251,191,36,0.32), rgba(251,113,113,0.55));
  border-right-color: var(--red);
}
.share-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text);
  font-feature-settings: "tnum";
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Movers count cell */
.brk-table .movers-count strong {
  font-size: 14px; font-weight: 700; color: var(--text);
  font-feature-settings: "tnum";
}
.brk-table .movers-count .movers-denom { color: var(--dim); font-size: 11px; }

/* Movers cell — broker chips ordered by sm_score desc */
.brk-table .movers-cell {
  white-space: normal; min-width: 360px; max-width: 640px;
  font-size: 11px; line-height: 1.7;
}
a.sm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; margin: 1px 3px 1px 0;
  border-radius: 999px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; text-decoration: none;
  border: 1px solid var(--border); cursor: pointer;
  transition: filter 0.1s, border-color 0.1s;
  font-feature-settings: "tnum";
}
a.sm-chip:hover { text-decoration: none; filter: brightness(1.18); border-color: var(--accent); }
a.sm-chip.sm-buy {
  background: rgba(74,222,128,0.18); color: var(--green-text); border-color: rgba(74,222,128,0.40);
}
a.sm-chip.sm-sell {
  background: rgba(248,113,113,0.18); color: var(--red-text); border-color: rgba(248,113,113,0.40);
}
a.sm-chip.sm-foreign { box-shadow: inset 0 0 0 1px rgba(59,130,246,0.30); }
.sm-chip-broker {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-weight: 700; letter-spacing: 0.04em;
}
.sm-chip-side  { opacity: 0.75; font-size: 9px; }
.sm-chip-amt   { color: inherit; opacity: 0.85; }

/* SM-table column widths */
.brk-table.sm-table .ticker-cell { min-width: 76px; }
.brk-table.sm-table .price-cell  { min-width: 86px; }
.brk-table.sm-table .mag-cell    { width: 200px; min-width: 180px; }
.brk-table.sm-table .movers-cell { vertical-align: middle; }

/* ---------------------------------------------------------------------------
 * Smart Money badge — used on the per-ticker drilldown broker summary
 * (Stockbit-style buyers-left/sellers-right). Only top-10 SM brokers for
 * the ticker get this badge; everyone else is unlabeled (NeoBDM cat-tags
 * + firm names retired).
 * --------------------------------------------------------------------------- */
.sm-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(167, 139, 250, 0.18);   /* indigo brand tint */
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.50);
  vertical-align: middle;
  text-transform: uppercase;
}
/* Subtle row tint so an SM broker stands out without screaming */
tr.bs-row-sm { background: rgba(167, 139, 250, 0.04); }
tr.bs-row-sm:hover { background: rgba(167, 139, 250, 0.10); }

/* ---------------------------------------------------------------------------
 * SM Drilldown Chart — TradingView Lightweight Charts host + toggle row +
 * canvas overlay for translucent buy/sell circles. (Day 12, 2026-05-09)
 * --------------------------------------------------------------------------- */
.sm-toggle-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 14px; min-height: 52px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--panel-2);
  font-size: 11px;
}
.sm-toggle-label {
  font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.07em; margin-right: 8px;
}
.sm-toggle-status {
  color: var(--dim); font-style: italic; font-weight: 400;
}
.sm-tog {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; user-select: none;
  font-family: inherit; font-size: 11px;
  transition: all 0.12s ease;
}
.sm-tog:hover { color: var(--text); border-color: var(--accent); }
.sm-tog.on {
  background: rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.55);
  font-weight: 700;
}
.sm-tog.loading { opacity: 0.6; cursor: progress; }
.sm-tog-rank {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  color: var(--dim);
  padding: 0 4px; border-radius: 3px;
  font-size: 9.5px; font-weight: 700;
  min-width: 14px; text-align: center;
}
.sm-tog.on .sm-tog-rank {
  background: rgba(167, 139, 250, 0.35);
  color: #ecedf2;
}
.sm-tog-code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
  font-weight: 700; letter-spacing: 0.04em;
}
.sm-chart-host {
  position: relative;
  width: 100%;
}
.sm-overlay {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
 * SM Pairs / Algo Brokers / per-Broker — dense data tables
 * ---------------------------------------------------------------------------
 */
.sm-pairs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-feature-settings: "tnum";
}
.sm-pairs-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.sm-pairs-table thead th.no-sort { cursor: default; }
.sm-pairs-table thead th[data-sort="asc"]::after  { content: " ▲"; color: var(--accent-2); }
.sm-pairs-table thead th[data-sort="desc"]::after { content: " ▼"; color: var(--accent-2); }
.sm-pairs-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
  vertical-align: middle;
}
.sm-pairs-table tbody tr:nth-child(even) { background: var(--row-alt); }
.sm-pairs-table tbody tr:hover { background: rgba(167,139,250,0.06); }
.sm-pairs-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sm-pairs-table .emph { color: var(--text); font-weight: 600; }
.sm-pairs-table .dim  { color: var(--dim); }
.sm-pairs-table .ticker-link,
.sm-pairs-table .broker-link { color: var(--accent-2); }
.sm-pairs-table .ticker-link:hover,
.sm-pairs-table .broker-link:hover { text-decoration: underline; }
.sm-pairs-table .px-up { color: var(--green-text); }
.sm-pairs-table .px-dn { color: var(--red-text); }

/* SM pills */
.sm-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sm-pill-foreign { background: rgba(167,139,250,0.18); color: var(--accent-2); }
.sm-pill-local   { background: rgba(74,222,128,0.14);  color: var(--green-text); }
.sm-pill-role    { background: rgba(251,146,60,0.16);  color: #fdba74; }

/* Filter form on /sm-pairs and /algo-brokers — uses .filter-card layout but
 * needs a few inputs that don't exist on /brokers. */
.filter-card select,
.filter-card input[type="number"] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: inherit;
}
.filter-card select:focus,
.filter-card input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Searchable combobox — used for ticker (/sm-by-ticker) and broker
   (/sm-by-broker) selectors. Behaviour driven by combobox.js. The dropdown
   sits BELOW the input and filters live as the user types. */
.combobox {
  position: relative;
  display: inline-block;
}
.combobox .combobox-input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12.5px;
  font-family: inherit;
  width: 180px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  outline: none;
}
.combobox .combobox-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2);
}
.combobox .combobox-input::placeholder {
  color: var(--dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* Dropdown list — hidden by default, opens below the input. */
.combobox .combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 100;
  display: none;
}
.combobox .combobox-list.open { display: block; }

.combobox .combobox-option {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.combobox .combobox-option:hover,
.combobox .combobox-option.active {
  background: var(--panel-3);
  color: var(--accent-2);
}

/* Custom scrollbar inside the dropdown — match the dark theme. */
.combobox .combobox-list::-webkit-scrollbar { width: 8px; }
.combobox .combobox-list::-webkit-scrollbar-track { background: transparent; }
.combobox .combobox-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.combobox .combobox-list::-webkit-scrollbar-thumb:hover { background: var(--dim); }
.filter-actions { display: flex; gap: 6px; align-self: end; }
.btn-apply {
  background: var(--accent);
  color: #1a1d26;
  border: none;
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.btn-apply:hover { background: var(--accent-2); }
.btn-reset {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid var(--border);
  text-decoration: none;
}
.btn-reset:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }

/* Legend card under the table */
.legend-card {
  margin-top: 18px;
  padding: 16px 22px;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.legend-card strong { color: var(--text); display: block; margin-bottom: 8px; font-size: 13px; }
.legend-card ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 32px; }
.legend-card li { break-inside: avoid; padding: 1px 0; }
.legend-card b { color: var(--accent-2); font-weight: 600; }
.legend-card code { background: var(--panel-3); padding: 1px 5px; border-radius: 3px; }

/*
@media (max-width: 900px) {
  .legend-card ul { columns: 1; }
}
*/

/* ============================================================================
 * Chart date-range toolbar (above the SM Drilldown + Inventory charts on
 * /ticker/{T}). Reuses the .bs-btn-preset / .bs-date / .bs-btn styling that
 * the Broker-Summary section also uses, so the visual language stays
 * consistent across the page.
 * ============================================================================ */
.chart-date-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.chart-date-toolbar .preset-group {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.chart-date-toolbar label {
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}

/* ============================================================================
 * HAMBURGER NAV TOGGLE — hidden on desktop, only visible inside mobile media
 * query below. CSS-only animation between hamburger and X states based on the
 * button's aria-expanded attribute.
 * ============================================================================ */
.topbar .nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
}
.topbar .nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.topbar .nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.topbar .nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.topbar .nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================================
 * MOBILE LAYOUT (≤ 768px) — Phase 1, added 2026-05-14
 * Phone-first single-column. Hamburger nav. Tables stay horizontal-scroll
 * (user explicitly preferred this over card-per-row).
 * ============================================================================ */
@media (max-width: 768px) {
  /* --- Override the fixed-width desktop lock --- */
  html, body { min-width: 0; overflow-x: hidden; }
  body.nav-open { overflow: hidden; }  /* prevent background scroll under open menu */

  /* --- topbar collapses; hamburger appears ---
     IMPORTANT: drop backdrop-filter on mobile. With it, .topbar establishes a
     new containing block, which traps the position:fixed drawer below
     inside the topbar's bounds (invisible). */
  .topbar { backdrop-filter: none; }
  .topbar-inner {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;
    max-width: 100%;
  }
  .topbar .brand { font-size: 18px; }
  .topbar .brand .v { display: none; }
  .topbar .nav-toggle { display: flex; }

  /* hide the search-pill and topmeta on mobile (free up topbar space) */
  .topbar .top-actions { display: none; }

  /* Nav becomes a full-height drawer that slides in via the .open class */
  .topbar nav {
    display: none;
    flex: none;
    margin-left: 0;
  }
  .topbar nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    padding: 8px 0;
    border-top: 1px solid var(--border-soft);
    z-index: 9;
    gap: 0;
    overflow-y: auto;
  }
  .topbar nav.open a {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .topbar nav.open a.active {
    background: var(--panel-2);
    color: var(--accent-2);
  }

  /* --- main content --- */
  main { padding: 16px 12px 60px; max-width: 100%; }
  h1 { font-size: 22px; line-height: 1.25; }
  h1 + .sub { font-size: 12.5px; margin-bottom: 16px; }
  .panel + .panel { margin-top: 14px; }

  /* --- Home page (Mockup A) Phase 1 --- */
  .brief-head, .brief-head .brief-meta { display: block; }
  .brief-title { font-size: 22px !important; }
  .layout {
    display: block !important;
    padding: 0 !important;
    max-width: 100%;
  }
  .feed { min-width: 0; }
  .rail { margin-top: 18px; }
  .actions-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .action-card { padding: 12px; }
  .action-card .ico { font-size: 20px; }
  .story { grid-template-columns: 1fr !important; }

  /* --- Filter cards --- */
  .filter-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .filter-card .filter-group {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
  }
  .filter-card .filter-group > label {
    flex: 0 0 90px;
    margin-right: 0;
  }
  .filter-card .filter-group > select,
  .filter-card .filter-group > input,
  .filter-card .filter-group > .combobox {
    flex: 1;
    min-width: 0;
  }
  .filter-card .combobox .combobox-input { width: 100%; }
  .filter-card .filter-actions {
    width: 100%;
    flex-direction: row;
    justify-content: stretch;
  }
  .filter-card .filter-actions .btn-apply,
  .filter-card .filter-actions .btn-reset {
    flex: 1;
    min-height: 44px;   /* easier tap target */
    font-size: 14px;
  }

  /* --- KPI strips --- */
  .kpi-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .kpi { padding: 12px 14px; }
  .kpi .value { font-size: 18px; }

  /* --- Tables: horizontal scroll on mobile (no card-mode) --- */
  .panel { overflow-x: visible; }
  .brokers-panel > div,
  .panel > div[style*="overflow-x"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 11.5px; }
  thead th, tbody td { padding: 6px 8px; }

  /* Larger tap targets for nav-style links / chips */
  .topbar nav.open a,
  .mover-row a,
  .ticker-link,
  .broker-link { min-height: 36px; display: inline-flex; align-items: center; }

  /* Hero panel layouts */
  .brokers-hero { padding: 18px 14px; }
  .brokers-hero h1 { font-size: 22px; }
  .brokers-hero .lede { font-size: 13px; }

  /* --- Brand mark (matches mobile-shrunk top bar) --- */
  .topbar .brand .brand-logo { width: 26px; height: 26px; }
  .topbar .brand .brand-text { font-size: 18px; }

  /* --- Panel head: stack title above stats so controls don't overflow.
     The .stats span becomes an inline flex container so any inner segmented
     controls / buttons wrap cleanly below the title. --- */
  .panel-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
  }
  .panel-head .title { font-size: 14px; line-height: 1.35; }
  .panel-head .stats {
    width: 100%;
    margin-left: 0 !important;
    font-size: 11.5px;
    line-height: 1.45;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  /* --- Ticker drilldown header tightening: stack ticker + meta cleanly --- */
  h1 .ticker-meta {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
  }

  /* --- Date toolbar: presets fill row 1; date inputs + Apply on row 2 --- */
  .chart-date-toolbar { padding: 10px 12px; gap: 8px; }
  .chart-date-toolbar .preset-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 4px;
  }
  .chart-date-toolbar .bs-btn-preset {
    flex: 1;
    font-size: 11.5px;
    padding: 6px 4px;
    min-width: 0;
  }
  .chart-date-toolbar label {
    margin-left: 0;
    font-size: 11px;
  }
  .chart-date-toolbar input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .chart-date-toolbar .bs-btn { padding: 6px 12px; font-size: 13px; }

  /* --- SM toggle row: tighter chips so 10 brokers fit in 3 rows on mobile --- */
  .sm-toggle-row {
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
  }
  .sm-toggle-row .sm-toggle-label {
    width: 100%;
    margin-bottom: 2px;
    font-size: 10.5px;
  }
  .sm-tog { padding: 4px 8px; font-size: 11.5px; }

  /* --- Inventory chart now stacks a candle pane on top of an inventory
     pane (two panes with synced time axes). Needs more vertical room than
     a single-pane chart, so 460px on mobile to keep both panes legible. --- */
  #sm-inventory-chart { height: 460px !important; }
  #sm-chart { height: 360px !important; }
  .sm-chart-host { min-width: 0; }
  .sm-chart-pane { min-width: 0; }

  /* Charts — let ECharts fill width (everything else) */
  #tk-history-chart, #br-history-chart, #bk-history-chart,
  div[id$="-chart"]:not(#sm-inventory-chart):not(#sm-chart) { height: 280px !important; }

  /* Legend card */
  .legend-card { padding: 14px; font-size: 12px; }
  .legend-card ul { columns: 1; padding-left: 16px; }

  /* Footer */
  .footer { font-size: 11px; padding: 14px 12px; }
}