/* Coming Soon page (/releases/): the All / Following switch, platform chips,
   month headings, the Out now label and the countdown's OUT NOW state.
   Uses the colours from style.css, so Light and Dark both work. */

.cs-controls { display: grid; gap: 12px; margin-bottom: 22px; }
.cs-controls .cs-scope { max-width: 360px; margin-bottom: 0; }
.cs-platforms { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cs-platforms::-webkit-scrollbar { display: none; }
.cs-platforms .chip { flex: none; white-space: nowrap; }

#countdown:not(:empty) { margin-bottom: 8px; }

.release-list .cs-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 2px; font-size: 20px; }
.release-list .cs-head:first-child { margin-top: 6px; }
.release-list .cs-head small { font: 600 12px/1 var(--text); color: var(--muted); letter-spacing: 0; text-transform: none; }
.release-list .cs-head-out { color: var(--accent); }

.release-row .info span { display: block; }
.release-row .info .cs-when { color: var(--ink); opacity: .85; font-weight: 600; margin-top: 2px; }
.cs-out { font-style: normal; color: var(--accent); font-weight: 800; }

/* The countdown once it reaches zero */
.countdown .cs-out-now {
  display: inline-flex; align-items: center; gap: 8px; max-width: 520px; width: 100%; justify-content: center;
  padding: 16px 0; border-radius: 12px; background: var(--accent); color: var(--logo-black, #09111A);
  font: 800 26px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
}

.cs-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cs-empty p { margin: 0; color: var(--muted); }