/* Live market ticker bar for the tracker dashboards.
   Reuses each dashboard's own theme vars (--text, --bull, --bear, --line, --bg-2,
   --mono) with fallbacks, so it adapts to light/dark automatically and never
   depends on brand-tokens.css being loaded. */

.tracker-ticker {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line, #e8e3da);
  border-bottom: 1px solid var(--line, #e8e3da);
  background: var(--bg-2, #ffffff);
  font-family: var(--mono, 'JetBrains Mono', 'SF Mono', Menlo, monospace);
  scrollbar-width: none;
}
.tracker-ticker::-webkit-scrollbar { display: none; }

.tracker-ticker[data-loading]::before {
  content: "memuat data pasar…";
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3, #8a857f);
}

.tracker-ticker__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 18px;
  border-right: 1px solid var(--line, #e8e3da);
  white-space: nowrap;
  min-width: max-content;
}
.tracker-ticker__label {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3, #8a857f);
}
.tracker-ticker__row { display: flex; gap: 8px; align-items: baseline; }
.tracker-ticker__px {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1a1816);
  font-variant-numeric: tabular-nums;
}
.tracker-ticker__chg { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tracker-ticker__chg.up   { color: var(--bull, #047857); }
.tracker-ticker__chg.down { color: var(--bear, #b91c1c); }
.tracker-ticker__chg.flat { color: var(--text-3, #6b7280); }

@media (max-width: 600px) {
  .tracker-ticker__item { padding: 6px 12px; }
  .tracker-ticker__px { font-size: 13px; }
}