/* Stream Filter — homepage ranking rail.
   Sits directly under the player so a first-time visitor sees, on screen one,
   that there is a live chart and that one tap fills the empty player. */

.sf-chart {
  --sf-accent: #ff4444;
  --sf-surface: #141414;
  --sf-line: #262626;
  border-top: 1px solid var(--sf-line);
  border-bottom: 1px solid var(--sf-line);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 68, 68, 0.07), transparent 60%),
    var(--sf-surface);
  padding: 18px 0 20px;
}

.sf-chart__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 0 20px;
}

.sf-chart__eyebrow {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.16em;
  color: var(--sf-accent);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-bottom: 8px;
}

/* Marker for the chart label. Deliberately static — the one moving thing on
   this module is the brightness ramp below. */
.sf-chart__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sf-accent);
}

.sf-chart__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}

.sf-chart__sub {
  font-size: 13px;
  color: #8d8d8d;
  margin: 0;
}

/* Period chips */
.sf-chart__periods {
  display: flex;
  gap: 6px;
  padding: 12px 20px 0;
}

.sf-period {
  appearance: none;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid #303030;
  background: #1c1c1c;
  color: #9a9a9a;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.sf-period:hover { color: #fff; border-color: #4a4a4a; }

.sf-period[aria-pressed="true"] {
  background: var(--sf-accent);
  border-color: var(--sf-accent);
  color: #fff;
  font-weight: 600;
}

/* Rail — bleeds to the screen edge on mobile so the cut-off card reads as scrollable */
.sf-rail {
  display: flex;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0 20px 4px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.sf-rail::-webkit-scrollbar { height: 6px; }
.sf-rail::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

.sf-rail > li {
  flex: 0 0 172px;
  scroll-snap-align: start;
}

.sf-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  border-radius: 10px;
  outline-offset: 3px;
}

.sf-card:focus-visible,
.sf-more:focus-visible,
.sf-period:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.sf-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid #242424;
}

.sf-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Signature: thumbnails come up from dark to full brightness — the thing this
   tool does, performed on the chart itself. Staggered, once, on reveal. */
@media (prefers-reduced-motion: no-preference) {
  .sf-rail .sf-card__thumb img {
    filter: brightness(0.28) saturate(0.3);
    transition: filter 0.85s cubic-bezier(0.22, 0.61, 0.24, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .sf-rail.is-lit .sf-card__thumb img { filter: none; }
}

.sf-card__rank {
  position: absolute;
  left: 6px;
  bottom: 6px;
  min-width: 24px;
  padding: 2px 6px;
  text-align: center;
  border-radius: 6px;
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(4px);
  color: #fff;
  /* same readout treatment as the filter sliders' values */
  font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.sf-rail > li:nth-child(1) .sf-card__rank,
.sf-rail > li:nth-child(2) .sf-card__rank,
.sf-rail > li:nth-child(3) .sf-card__rank {
  background: var(--sf-accent);
}

.sf-card__title {
  font-size: 13px;
  line-height: 1.4;
  color: #ddd;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sf-card:hover .sf-card__title { color: #fff; }

.sf-card__meta {
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  color: #7d7d7d;
}

/* Trailing "see everything" card */
.sf-more {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 96px;
  padding: 0 14px;
  border: 1px dashed #383838;
  border-radius: 9px;
  color: #b5b5b5;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.sf-more:hover { color: #fff; border-color: var(--sf-accent); }

/* Skeleton — reserves the rail's height so nothing shifts when data lands */
.sf-skel .sf-card__thumb,
.sf-skel .sf-skel__line {
  background: linear-gradient(90deg, #1b1b1b 25%, #232323 37%, #1b1b1b 63%);
  background-size: 400% 100%;
  animation: sf-shimmer 1.4s ease-in-out infinite;
}

.sf-skel__line {
  height: 9px;
  border-radius: 4px;
  margin-top: 7px;
}

.sf-skel__line--short { width: 55%; }

@keyframes sf-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.sf-chart__msg {
  padding: 14px 20px 0;
  margin: 0;
  font-size: 13px;
  color: #8d8d8d;
}

/* Share button, sat next to Reset in the filter panel header. This is the loop
   we are testing, so it reads as an action rather than a utility. */
.controls-header { gap: 8px; flex-wrap: wrap; }
.controls-header h2 { flex: 1 1 auto; white-space: nowrap; }
.controls-header .sf-share-btn,
.controls-header .reset-btn { flex: 0 0 auto; }

.sf-share-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #ff4444;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sf-share-btn:hover { background: #ff4444; }

.sf-share-btn.is-done {
  background: transparent;
  border-color: #3a7d44;
  color: #7ec98c;
}

.sf-share-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Player hint that points at the rail below */
.sf-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #3a3a3a;
  background: #1c1c1c;
  color: #ddd;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

.sf-jump:hover { color: #fff; border-color: var(--sf-accent); }

@media (min-width: 700px) {
  .sf-chart { border-radius: 14px; padding: 22px 4px 24px; }
  .sf-chart__title { font-size: 22px; }
  .sf-rail > li { flex-basis: 200px; }
}

@media (max-width: 420px) {
  .sf-chart__head,
  .sf-chart__periods,
  .sf-chart__msg { padding-left: 14px; padding-right: 14px; }
  .sf-rail { padding-left: 14px; padding-right: 14px; }
  .sf-rail > li { flex-basis: 158px; }
  .sf-chart__title { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-skel .sf-card__thumb, .sf-skel .sf-skel__line { animation: none; }
}