/* ============================================================
   Showcase: War Room page
   ============================================================ */

.scWarPanel { padding: var(--space-5); }
.scWarPanelHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-3); }

.scLiveTag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--sc-warroom);
}
.scLiveTag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-warroom); animation: scLivePulse 1.4s ease-in-out infinite; }
@keyframes scLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .scLiveTag::before { animation: none; } }

.scBoothCounter { font-size: 13px; font-weight: 600; color: var(--sc-text-muted); font-variant-numeric: tabular-nums; }

.scWarBoothGrid { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.scWarBoothCell {
    aspect-ratio: 1; border-radius: 2px;
    background: rgba(15,23,42,.04); border: 1px solid var(--sc-border);
    transition: background 500ms var(--sc-ease-out), border-color 500ms var(--sc-ease-out);
}
.scWarBoothCell.isReported { background: var(--status-color, var(--sc-positive)); border-color: transparent; }
@media (max-width: 767.98px) { .scWarBoothGrid { grid-template-columns: repeat(18, 1fr); } }

.scLegendRow.isDarkLegend { color: var(--sc-text-muted); }

/* ---- ward-level turnout grid: a spatial, "village based" view of poll-day
   turnout, replacing the single aggregate cumulative-turnout line chart ---- */
.scWarWardGrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--space-2);
}
.scWarWardTile {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    height: 60px; border-radius: var(--sc-radius-sm);
    border: 1.5px solid var(--sc-border);
    background: rgba(15,23,42,.06);
    font-weight: 700;
}
.scWarWardTile .scWarWardTileName { font-size: 12px; color: var(--sc-text); }
.scWarWardTile .scWarWardTileTurnout { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--turnout-text); }

/* ---- severity-stream feed: left-border color coded critical/high/watch ---- */
.scWarFeed { display: flex; flex-direction: column; gap: var(--space-3); }
.scWarFeedItem {
    display: flex; flex-direction: column; gap: 3px;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--sev-color, var(--sc-border));
    background: rgba(15,23,42,.05); border-radius: 0 var(--sc-radius-sm) var(--sc-radius-sm) 0;
}
.scWarFeedHead { display: flex; align-items: center; gap: var(--space-3); }
.scWarFeedTime { flex: 0 0 auto; font-size: 11px; color: var(--sev-color, var(--sc-warroom)); font-weight: 700; font-variant-numeric: tabular-nums; }
.scWarFeedSev {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--sev-color, var(--sc-warroom));
}
.scWarFeedBullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.scWarFeedBullets li { font-size: 13px; color: var(--sc-text-muted); line-height: 1.5; padding-left: 12px; position: relative; }
.scWarFeedBullets li::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }

.scWarStatCard { padding: var(--space-4); text-align: center; }

/* ---- forward horizon: NOW / NEXT 2 HOURS / END OF DAY ---- */
.scHorizonList { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .scHorizonList { grid-template-columns: repeat(3, 1fr); } }
.scHorizonCol { padding: var(--space-4); background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-sm); }
.scHorizonColTitle { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sc-warroom); margin-bottom: var(--space-3); }
.scHorizonCol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.scHorizonCol li { font-size: 12.5px; color: var(--sc-text-muted); line-height: 1.5; padding-left: 14px; position: relative; }
.scHorizonCol li::before { content: '\2192'; position: absolute; left: 0; top: 0; color: var(--sc-warroom); }

@media (max-width: 639.98px) {
    .scWarPanel { padding: var(--space-4); }
}