/* Merit Child: minimal, fast ticker styling. */

.merit-topbar {
  background: #0b1020;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--merit-topbar-font-size, 14px);
  line-height: 1.2;
}

.merit-topbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--merit-topbar-pad-y, 14px) var(--merit-topbar-pad-x, 16px);
  display: flex;
  gap: 14px;
  align-items: center;
}

.merit-topbar__brand {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.merit-topbar.is-label-hidden .merit-topbar__brand {
  display: none;
}

.merit-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #27e3a1;
  box-shadow: 0 0 0 4px rgba(39, 227, 161, 0.12);
}

.merit-label {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.merit-ticker {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  /* Allow vertical page scroll; we handle horizontal scrubbing ourselves. */
  touch-action: pan-y;
  position: relative;
}

.merit-ticker__track {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

/* Freshcoins-style edge fades (desktop/tablet). */
.merit-ticker.has-edge-fades::before,
.merit-ticker.has-edge-fades::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  height: 100%;
  width: 64px;
  z-index: 2;
}
.merit-ticker.has-edge-fades::before {
  left: 0;
  background: linear-gradient(to right, #0b1020, rgba(11,16,32,0));
}
.merit-ticker.has-edge-fades::after {
  right: 0;
  background: linear-gradient(to left, #0b1020, rgba(11,16,32,0));
}

@media (max-width: 640px) {
  .merit-ticker.has-edge-fades::before,
  .merit-ticker.has-edge-fades::after {
    width: 40px;
  }
}

.merit-ticker__group {
  display: flex;
  gap: 18px;
  width: max-content;
}

.merit-pill {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  padding: var(--merit-pill-pad-y, 8px) var(--merit-pill-pad-x, 12px);
  border-radius: var(--merit-pill-radius, 999px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.merit-pill__sym { font-weight: 700; color: #fff; }
.merit-pill__price { font-variant-numeric: tabular-nums; }
.merit-pill__chg { font-variant-numeric: tabular-nums; font-weight: 600; }
.merit-pill__chg.is-up { color: #27e3a1; }
.merit-pill__chg.is-down { color: #ff5a7a; }

.merit-pill--stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--merit-pill-stack-pad-y, 10px) var(--merit-pill-stack-pad-x, 14px);
  border-radius: var(--merit-pill-stack-radius, 14px);
  white-space: nowrap;
}

.merit-pill__top {
  opacity: 0.9;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.merit-pill__name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.merit-pill__mid {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
}

.merit-pill__bottom {
  opacity: 0.8;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Desktop affordance for grab-to-scroll. */
@media (hover: hover) and (pointer: fine) {
  .merit-ticker { cursor: grab; }
  .merit-ticker.is-dragging { cursor: grabbing; }
  .merit-ticker.is-dragging * { user-select: none; }
}

@media (max-width: 640px) {
  .merit-topbar__inner { padding: 12px 12px; }
  .merit-pill { padding: 8px 10px; }
  .merit-pill--stack { padding: 10px 12px; }
  .merit-ticker__track,
  .merit-ticker__group {
    gap: 10px;
  }
}