/* =============================================================================
   Stage View — mw-sv-* prefix
   Mobile-first, single column → two-column grid at 960px
   ============================================================================= */

/* NOTE: Page root */
.mw-sv-page {
    padding: 8px;
    max-width: 1200px;
    margin: 0 auto;
}

/* NOTE: Stage switcher bar */
.mw-sv-stage-switcher {
    text-transform: none !important;
    font-size: 1.1rem;
    font-weight: 500;
}

/* NOTE: Live badge with pulsing green dot */
.mw-sv-live-badge .mud-chip-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mw-sv-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    animation: mw-sv-pulse 1.5s ease-in-out infinite;
}

@keyframes mw-sv-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.3); }
}

/* NOTE: Now Playing hero card */
.mw-sv-now-playing {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.mw-sv-now-playing .mud-typography {
    color: inherit;
}

.mw-sv-countdown {
    font-size: 2.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.mw-sv-progress {
    margin-top: 12px;
}

.mw-sv-progress .mud-progress-linear {
    height: 8px;
    border-radius: 4px;
}

/* NOTE: Changeover card */
.mw-sv-changeover {
    padding: 16px;
    margin-bottom: 16px;
    border-left: 4px solid var(--mud-palette-warning);
}

/* NOTE: Up Next cards */
.mw-sv-up-next-card {
    padding: 12px 16px;
    margin-bottom: 8px;
    border-left: 3px solid var(--mud-palette-info);
}

.mw-sv-time-until {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

/* NOTE: Tech rider checklist */
.mw-sv-tech-section {
    margin-bottom: 16px;
}

.mw-sv-tech-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
    gap: 4px;
}

.mw-sv-tech-item--checked {
    text-decoration: line-through;
    opacity: 0.7;
}

.mw-sv-tech-preview {
    opacity: 0.6;
    font-style: italic;
}

/* NOTE: Crew rows */
.mw-sv-crew-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.mw-sv-crew-row:last-child {
    border-bottom: none;
}

.mw-sv-crew-status {
    font-size: 0.8rem;
    min-width: 20px;
    text-align: center;
}

.mw-sv-crew-status--active {
    color: var(--mud-palette-success);
}

.mw-sv-crew-status--upcoming {
    color: var(--mud-palette-text-secondary);
}

/* NOTE: Notes section */
.mw-sv-note {
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    border-left: 3px solid var(--mud-palette-lines-default);
}

.mw-sv-note--urgent {
    border-left-color: var(--mud-palette-error);
    background: rgba(var(--mud-palette-error-rgb), 0.05);
}

.mw-sv-note-meta {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.mw-sv-add-note {
    margin-top: 12px;
}

/* NOTE: Section headers */
.mw-sv-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    margin-top: 16px;
}

/* NOTE: Empty state */
.mw-sv-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--mud-palette-text-secondary);
}

/* =============================================================================
   Desktop layout: two-column grid at >= 960px
   ============================================================================= */
@media (min-width: 960px) {
    .mw-sv-page {
        padding: 16px;
    }

    .mw-sv-countdown {
        font-size: 3.5rem;
    }
}