/* ═══════════════════════════════════════════════════
   ── SITREPS PAGE
   ═══════════════════════════════════════════════════ */
.shell {
  height: 100dvh;           /* fixed viewport height */
  display: flex;
  flex-direction: column;
  overflow: hidden;         /* prevent shell overflow */
  width: 100%;
}

.sitreps-main {
  display: flex;
  flex-direction: column;
  flex: 1;                  /* fill the shell */
  min-height: 0;            /* critical for children to shrink */
  overflow: hidden;         /* no scroll on this container */
}

/* ── MOBILE (default, also applies to tablet if not overridden) ── */
.player-side {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;           /* size to content, can shrink */
  min-height: 0;
  overflow: hidden;
}

.player-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 50vh;         /* prevent it from taking too much space */
  background: #000;
  flex-shrink: 1;           /* allow shrinking if needed */
}
.player-wrap #player {
  width: 100%;
  height: 100%;
  display: block;
}

.now-playing {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0.5625rem 1rem;
  background: var(--active-bg);
  border-bottom: var(--border-width) solid var(--border-bright);
  flex-shrink: 0;
  min-height: 2.5rem;
}
.now-playing-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: pulse 1.8s ease-in-out infinite;
}
.now-playing-dot.paused {
  animation-play-state: paused;
  opacity: 0.3;           /* optional – makes it look inactive */
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
.now-playing-label {
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.now-playing-title {
  font-size: 0.75rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playlist-panel {
  display: flex;
  flex-direction: column;
  flex: 1;                  /* takes remaining height */
  min-height: 0;
  overflow: hidden;
  border-top: var(--border-width) solid var(--border-bright);
}

.playlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5625rem 1rem;
  border-bottom: var(--border-width) solid var(--border);
  flex-shrink: 0;
}
.playlist-header-label {
  font-size: 1rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.playlist-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── SCROLLABLE PLAYLIST (with hidden scrollbar) ── */
.playlist {
  flex: 1;
  min-height: 0;            /* essential for scroll in flex */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;    /* Firefox – hide scrollbar */
}
.playlist::-webkit-scrollbar {
  display: none;            /* Chrome/Safari – hide scrollbar */
}

.playlist-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.8125rem 1rem;
  border-bottom: var(--border-width) solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.playlist-item:hover {
  background: var(--active-bg);
}
.playlist-item.active {
  background: var(--active-bg);
  border-left: 0.125rem solid #fff;
  padding-left: 0.875rem;
}
.track-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.6875rem;
  font-weight: 300;
  color: var(--text-muted);
  min-width: 1.375rem;
  text-align: right;
  flex-shrink: 0;
}
.playlist-item.active .track-num {
  color: var(--text);
}
.track-info {
  flex: 1;
  min-width: 0;
}
.track-title {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.playlist-item.active .track-title {
  color: var(--text);
  font-weight: 500;
}
.track-arrow {
  font-size: 1rem;
  color: var(--border-bright);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}
.playlist-item:hover .track-arrow,
.playlist-item.active .track-arrow {
  opacity: 1;
}
.status-msg {
  padding: 1.875rem 1.25rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

/* ── SITREPS: DESKTOP LAYOUT ── */
@media (min-width: 48em) { /* 768px */
  .sitreps-main {
    flex-direction: row;
  }
  .player-side {
    flex: 4;                /* side panel takes 4 parts */
    border-right: var(--border-width) solid var(--border-bright);
  }
  .player-wrap {
    aspect-ratio: unset;
    flex: 1;
    height: 100%;
    max-height: none;       /* override mobile max-height */
  }
  .playlist-panel {
    flex: 1;
    border-top: none;
  }
}