/* Early Warning System — shared dashboard design tokens (Round 04 PR1) */

:root {
    color-scheme: light;

    /* Typography */
    --ews-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --ews-font-size-h1: 1.75rem;
    --ews-font-size-h1-pwa: 1.375rem;
    --ews-font-size-h2: 1.125rem;
    --ews-font-size-body: 0.875rem;
    --ews-font-size-caption: 0.8125rem;
    --ews-font-size-metric: 2rem;
    --ews-font-weight-bold: 700;
    --ews-line-height: 1.45;

    /* Surfaces */
    --ews-bg: #f4f6f8;
    --ews-surface: #ffffff;
    --ews-surface-raised: #f8fafc;
    --ews-text: #102a43;
    --ews-text-secondary: #334e68;
    --ews-muted: #627d98;
    --ews-border: #d9e2ec;
    --ews-header-bg: #1f2933;
    --ews-header-text-muted: #d9e2ec;
    --ews-header-link: #9fb3c8;
    --ews-link: #1a5276;
    --ews-table-header-bg: #e8eef5;
    --ews-table-header-text: #102a43;
    --ews-row-provisional-bg: rgba(242, 201, 76, 0.18);
    --ews-row-degraded-bg: rgba(243, 156, 18, 0.16);
    --ews-detail-summary-bg: #eef2f7;
    --ews-detail-summary-text: #102a43;
    --ews-basin-banner-bg: #eafaf1;
    --ews-basin-banner-text: #1e5631;
    --ews-basin-banner-border: #27ae60;
    --ews-basin-banner-concern-bg: #fdedec;
    --ews-basin-banner-concern-border: #e74c3c;
    --ews-cta-bg: #1a5276;
    --ews-cta-text: #ffffff;
    --ews-map-btn-primary-bg: #d4e6f1;
    --ews-map-btn-primary-text: #102a43;
    --ews-install-banner-bg: #1f2933;
    --ews-install-banner-text: #ffffff;
    --ews-install-banner-border: transparent;
    --ews-install-btn-bg: #f2994a;
    --ews-install-btn-text: #102a43;
    --ews-install-dismiss-text: #d9e2ec;

    /* Posture accents */
    --ews-posture-monitor: #2f80ed;
    --ews-posture-prepare: #f2c94c;
    --ews-posture-escalate: #f2994a;
    --ews-posture-act-now: #eb5757;
    --ews-panel-monitor-bg: #f8fbff;
    --ews-panel-prepare-bg: #fffdf5;
    --ews-panel-escalate-bg: #fff9f5;
    --ews-panel-act-now-bg: #fff5f5;

    /* Evaluation (weather) */
    --ews-eval-border: #2980b9;
    --ews-eval-bg: #ebf5fb;
    --ews-eval-panel-border: #829ab1;
    --ews-eval-label: #1a5276;

    /* Flood outlook (display-only — violet/rose, not posture orange/red or FEMA blue) */
    --ews-outlook-elevated-stroke: #7c3aed;
    --ews-outlook-elevated-fill: #c4b5fd;
    --ews-outlook-elevated-bg: #f5f3ff;
    --ews-outlook-elevated-border: #8b5cf6;
    --ews-outlook-high-stroke: #e11d48;
    --ews-outlook-high-fill: #fb7185;
    --ews-outlook-high-bg: #fff1f2;
    --ews-outlook-high-border: #f43f5e;

    /* FEMA NFHL flood zones (fixed map palette — not posture or gauge risk colors) */
    --ews-nfhl-sfha-stroke: #003d73;
    --ews-nfhl-sfha-fill: #5dade2;
    --ews-nfhl-floodway-stroke: #7f1d1d;
    --ews-nfhl-floodway-fill: #a855f7;

    /* MARFC / NWPS river forecast (cyan — distinct from posture and outlook) */
    --ews-marfc-stroke: #0891b2;
    --ews-marfc-fill: #a5f3fc;
    --ews-marfc-bg: #f0f9ff;
    --ews-marfc-border: #06b6d4;
    --ews-marfc-text: #0e7490;
    --ews-marfc-badge-bg: #0891b2;
    --ews-marfc-badge-text: #ffffff;

    /* Badges */
    --ews-badge-verified-bg: #d5f5e3;
    --ews-badge-verified-text: #1e6f43;
    --ews-badge-verified-border: #27ae60;
    --ews-badge-provisional-bg: #f9e79f;
    --ews-badge-provisional-text: #7d6608;
    --ews-badge-provisional-border: #f2c94c;
    --ews-badge-driver-bg: #d4e6f1;
    --ews-badge-driver-text: #1a5276;
    --ews-badge-driver-border: #2980b9;
    --ews-badge-suspect-bg: #fadbd8;
    --ews-badge-suspect-text: #922b21;
    --ews-badge-suspect-border: #e74c3c;
    --ews-badge-degraded-bg: #fdebd0;
    --ews-badge-degraded-text: #935116;
    --ews-badge-degraded-border: #f39c12;
    --ews-badge-display-bg: #eef2f7;
    --ews-badge-display-text: #486581;
    --ews-badge-display-border: #829ab1;
    --ews-badge-readiness-yes-bg: #d5f5e3;
    --ews-badge-readiness-yes-text: #1e6f43;
    --ews-badge-readiness-yes-border: #27ae60;
    --ews-badge-readiness-no-bg: #ebf5fb;
    --ews-badge-readiness-no-text: #1a5276;
    --ews-badge-readiness-no-border: #2f80ed;
    --ews-badge-primary-path-bg: #fdebd0;
    --ews-badge-primary-path-text: #935116;
    --ews-badge-primary-path-border: #f39c12;

    /* Spacing */
    --ews-space-xs: 8px;
    --ews-space-sm: 12px;
    --ews-space-md: 16px;
    --ews-space-lg: 24px;
    --ews-space-xl: 32px;

    /* Elevation */
    --ews-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
    --ews-shadow-elevated: 0 8px 24px rgba(16, 42, 67, 0.12);
    --ews-radius-sm: 8px;
    --ews-radius-md: 10px;
    --ews-radius-lg: 12px;
    --ews-radius-pill: 999px;
}

/* Shell layout (PR2) */

.ews-dashboard-body {
    font-family: var(--ews-font-family);
    background: var(--ews-bg);
    color: var(--ews-text);
    margin: 0;
    line-height: var(--ews-line-height);
}

.ews-shell-header {
    background: var(--ews-header-bg);
    color: #ffffff;
    padding: var(--ews-space-lg);
    border-bottom: 6px solid var(--ews-muted);
}

.ews-shell-header--posture-monitor {
    border-bottom-color: var(--ews-posture-monitor);
}

.ews-shell-header--posture-prepare {
    border-bottom-color: var(--ews-posture-prepare);
}

.ews-shell-header--posture-escalate {
    border-bottom-color: var(--ews-posture-escalate);
}

.ews-shell-header--posture-act-now {
    background: linear-gradient(180deg, #3d1515 0%, var(--ews-header-bg) 42%);
    border-bottom-color: var(--ews-posture-act-now);
}

.ews-shell-header h1 {
    margin: 0;
    font-size: var(--ews-font-size-h1);
    font-weight: var(--ews-font-weight-bold);
    line-height: 1.2;
}

.ews-shell-subtitle {
    margin: 6px 0 0;
    color: var(--ews-header-text-muted);
    font-size: var(--ews-font-size-body);
}

.ews-shell-nav {
    margin-top: var(--ews-space-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ews-space-sm) var(--ews-space-md);
    font-size: var(--ews-font-size-caption);
}

.ews-shell-nav a {
    color: var(--ews-header-link);
    text-decoration: none;
}

.ews-shell-nav a:hover,
.ews-shell-nav a:focus {
    text-decoration: underline;
}

.ews-shell-nav .ews-shell-nav-current {
    color: #ffffff;
    font-weight: var(--ews-font-weight-bold);
}

.ews-shell-meta {
    margin: var(--ews-space-sm) 0 0;
    font-size: var(--ews-font-size-caption);
    color: #bcccdc;
}

.ews-shell-main {
    padding: var(--ews-space-lg);
}

.ews-shell-main--narrow {
    max-width: 960px;
}

.ews-shell-main--wide {
    max-width: 1200px;
}

.ews-shell-footer {
    color: var(--ews-muted);
    font-size: var(--ews-font-size-caption);
    margin-top: var(--ews-space-lg);
    padding: 0 var(--ews-space-lg) var(--ews-space-lg);
    line-height: var(--ews-line-height);
}

/* Shared components */

.ews-section,
.section {
    background: var(--ews-surface);
    border-radius: var(--ews-radius-md);
    padding: 18px;
    margin-bottom: var(--ews-space-lg);
    box-shadow: var(--ews-shadow-card);
}

.ews-card,
.card {
    background: var(--ews-surface);
    border-radius: var(--ews-radius-md);
    padding: var(--ews-space-md);
    margin-bottom: var(--ews-space-md);
    box-shadow: var(--ews-shadow-card);
}

.ews-card h2,
.card h2 {
    margin-top: 0;
    font-size: var(--ews-font-size-h2);
    color: var(--ews-text);
}

.ews-card a,
.card a {
    color: var(--ews-link);
    font-weight: var(--ews-font-weight-bold);
    text-decoration: none;
}

.ews-card-primary,
.card-primary {
    border: 2px solid var(--ews-badge-readiness-yes-border);
}

.ews-card-badges,
.card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ews-space-xs);
    margin: 10px 0 var(--ews-space-sm);
}

.ews-metric-grid,
.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ews-space-sm);
    margin-top: var(--ews-space-md);
}

.ews-metric-grid--cop {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ews-space-md);
}

.ews-metric,
.metric {
    background: var(--ews-surface-raised);
    border-radius: var(--ews-radius-sm);
    padding: var(--ews-space-sm);
    text-align: center;
}

.ews-metric strong,
.metric strong {
    display: block;
    font-size: var(--ews-font-size-metric);
    color: var(--ews-text);
}

.ews-grid,
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ews-space-md);
    margin-bottom: var(--ews-space-lg);
}

.ews-metric-value {
    font-size: var(--ews-font-size-metric);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-text);
}

.ews-badge,
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--ews-radius-pill);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

.ews-badge--readiness-yes,
.badge-readiness-yes {
    background: var(--ews-badge-readiness-yes-bg);
    color: var(--ews-badge-readiness-yes-text);
    border-color: var(--ews-badge-readiness-yes-border);
}

.ews-badge--readiness-no,
.badge-readiness-no {
    background: var(--ews-badge-readiness-no-bg);
    color: var(--ews-badge-readiness-no-text);
    border-color: var(--ews-badge-readiness-no-border);
}

.ews-badge--display-only,
.badge-display-only {
    background: var(--ews-badge-display-bg);
    color: var(--ews-badge-display-text);
    border-color: var(--ews-badge-display-border);
}

.ews-badge--primary-path,
.badge-primary-path {
    background: var(--ews-badge-primary-path-bg);
    color: var(--ews-badge-primary-path-text);
    border-color: var(--ews-badge-primary-path-border);
}

.ews-badge--verified,
.badge-verified {
    background: var(--ews-badge-verified-bg);
    color: var(--ews-badge-verified-text);
    border-color: var(--ews-badge-verified-border);
}

.ews-badge--provisional,
.badge-provisional {
    background: var(--ews-badge-provisional-bg);
    color: var(--ews-badge-provisional-text);
    border-color: var(--ews-badge-provisional-border);
}

.ews-badge--driver,
.badge-marfc-context {
    background: var(--ews-marfc-bg, #ecfeff);
    color: var(--ews-marfc-text, #0e7490);
    border: 1px solid var(--ews-marfc-border, #0891b2);
    font-size: var(--ews-font-size-caption);
    font-weight: var(--ews-font-weight-bold);
    padding: 2px 8px;
    border-radius: var(--ews-radius-pill);
}

.ews-display-only-kicker {
    margin: 0 0 var(--ews-space-sm);
    font-size: var(--ews-font-size-caption);
    font-weight: 600;
    color: var(--ews-muted);
}

.ews-display-only-kicker-inline {
    margin-left: var(--ews-space-xs);
    font-size: var(--ews-font-size-caption);
    font-weight: 600;
    color: var(--ews-muted);
}

.ews-marfc-strip-collapsible {
    margin: var(--ews-space-sm) 0;
    border: 1px solid var(--ews-border);
    border-radius: var(--ews-radius-sm);
    background: var(--ews-surface);
}

.ews-marfc-strip-collapsible-summary {
    cursor: pointer;
    padding: var(--ews-space-sm) var(--ews-space-md);
    font-weight: var(--ews-font-weight-bold);
    list-style-position: inside;
}

.ews-marfc-strip-collapsible .ews-marfc-strip {
    margin: 0;
    border: none;
    border-radius: 0;
}

.ews-flood-outlook-divergence-chip {
    margin: var(--ews-space-xs) 0 0;
    padding: 6px 10px;
    border-radius: var(--ews-radius-pill);
    background: var(--ews-badge-display-bg);
    font-size: var(--ews-font-size-caption);
    font-weight: 600;
    color: var(--ews-text-secondary);
}

.ews-flood-weather-context {
    border-left: 4px solid var(--ews-outlook-elevated-border, #7c3aed);
}

.ews-flood-weather-context--active {
    background: var(--ews-badge-display-bg);
}

.ews-flood-weather-context-summary {
    margin: var(--ews-space-xs) 0 var(--ews-space-sm);
}

.ews-flood-weather-context-grid {
    display: grid;
    gap: var(--ews-space-sm);
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-bottom: var(--ews-space-sm);
}

.ews-flood-weather-context-metric--wide {
    grid-column: 1 / -1;
}

.ews-flood-weather-context-label {
    display: block;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ews-flood-weather-context-products {
    margin: var(--ews-space-xs) 0 var(--ews-space-sm);
    padding-left: 1.25rem;
}

.ews-flood-weather-context-radar-note {
    margin-top: var(--ews-space-sm);
}

.ews-flood-outlook-forecast-only,
.ews-flood-outlook-precip-source {
    margin: 0 0 var(--ews-space-sm);
    font-size: var(--ews-font-size-caption);
    color: var(--ews-text-secondary);
}

.ews-pwa-marfc-governance {
    margin: var(--ews-space-xs) 0 0;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
}

.ews-pwa-marfc-cop-link {
    display: inline-block;
    margin-top: var(--ews-space-xs);
    font-size: var(--ews-font-size-caption);
    font-weight: var(--ews-font-weight-bold);
}

.map-legend-heading {
    flex-basis: 100%;
    margin-top: var(--ews-space-xs);
    font-size: var(--ews-font-size-caption);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.map-legend-note {
    flex-basis: 100%;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
    font-style: italic;
}

.map-radar-lineage-note {
    margin: var(--ews-space-xs) 0 0;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
}

.badge-verified-driver {
    background: var(--ews-badge-driver-bg);
    color: var(--ews-badge-driver-text);
    border-color: var(--ews-badge-driver-border);
}

.ews-badge--suspect,
.badge-suspect {
    background: var(--ews-badge-suspect-bg);
    color: var(--ews-badge-suspect-text);
    border-color: var(--ews-badge-suspect-border);
}

.ews-badge--degraded,
.badge-degraded {
    background: var(--ews-badge-degraded-bg);
    color: var(--ews-badge-degraded-text);
    border-color: var(--ews-badge-degraded-border);
}

.ews-badge--evaluation {
    background: var(--ews-eval-bg);
    color: var(--ews-eval-label);
    border-color: var(--ews-eval-border);
}

.ews-caption,
.footer {
    color: var(--ews-muted);
    font-size: var(--ews-font-size-caption);
}

.ews-hub-note {
    color: var(--ews-header-text-muted);
    font-size: var(--ews-font-size-body);
    margin-top: var(--ews-space-xs);
}

.ews-hub-note a {
    color: var(--ews-header-link);
}

.ews-display-only-banner {
    background: var(--ews-badge-display-bg);
    border-left: 8px solid var(--ews-link);
    padding: var(--ews-space-sm) var(--ews-space-md);
    margin-bottom: var(--ews-space-md);
    border-radius: 4px;
}

.ews-eval-posture-panel {
    border-left: 4px solid var(--ews-eval-panel-border);
    background: #f8fafc;
}

.ews-jump-map {
    display: inline-block;
    margin-top: var(--ews-space-sm);
    font-size: var(--ews-font-size-body);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-link);
    text-decoration: none;
}

.ews-jump-map:hover,
.ews-jump-map:focus {
    text-decoration: underline;
}

.ews-primary-cta,
.cop-primary-button {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-bottom: var(--ews-space-md);
    padding: 14px var(--ews-space-md);
    border: 1px solid transparent;
    border-radius: var(--ews-radius-lg);
    background: var(--ews-cta-bg, #1a5276);
    color: var(--ews-cta-text, #ffffff);
    font-size: 15px;
    font-weight: var(--ews-font-weight-bold);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(26, 82, 118, 0.25);
    cursor: pointer;
    box-sizing: border-box;
}

a.ews-primary-cta,
a.cop-primary-button,
a.ews-primary-cta:visited,
a.cop-primary-button:visited,
a.ews-primary-cta:hover,
a.cop-primary-button:hover,
a.ews-primary-cta:focus,
a.cop-primary-button:focus {
    color: var(--ews-cta-text, #ffffff);
    text-decoration: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ews-font-size-body);
}

th,
td {
    padding: var(--ews-space-xs) 10px;
    border-bottom: 1px solid var(--ews-border);
    text-align: left;
}

th {
    background: var(--ews-table-header-bg);
    color: var(--ews-table-header-text);
    font-weight: var(--ews-font-weight-bold);
}

a {
    color: var(--ews-link);
}

/* Flood COP (Round 04 PR3) */

.card > .metric {
    font-size: var(--ews-font-size-metric);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-text);
    background: transparent;
    padding: 0;
    text-align: left;
}

.hydrology-basin-banner {
    background: var(--ews-basin-banner-bg);
    border: 2px solid var(--ews-basin-banner-border);
    border-radius: var(--ews-radius-sm);
    padding: 14px var(--ews-space-md);
    margin: var(--ews-space-sm) 0 var(--ews-space-md);
    color: var(--ews-basin-banner-text);
}

.hydrology-basin-banner.data-quality-concern {
    background: var(--ews-basin-banner-concern-bg);
    border-color: var(--ews-basin-banner-concern-border);
}

.ews-preview-banner,
.dashboard-preview-banner {
    background: #ebf5fb;
    border-bottom: 2px solid #2874a6;
    padding: var(--ews-space-sm) var(--ews-space-lg);
    margin: 0;
    color: var(--ews-text);
    font-size: var(--ews-font-size-body);
    line-height: var(--ews-line-height);
}

.ews-preview-banner strong,
.dashboard-preview-banner strong {
    display: block;
    margin-bottom: 4px;
}

.ews-preview-banner .ews-caption,
.dashboard-preview-banner .ews-caption {
    margin: var(--ews-space-xs) 0;
    color: var(--ews-text-secondary);
}

.ews-preview-banner a,
.dashboard-preview-banner a {
    font-weight: var(--ews-font-weight-bold);
}

tr.gauge-provisional td {
    background: var(--ews-row-provisional-bg);
}

tr.rate-degraded td {
    background: var(--ews-row-degraded-bg);
}

/* Table header cells must keep header token even when row tints apply */
tr.gauge-provisional th,
tr.rate-degraded th {
    background: var(--ews-table-header-bg);
    color: var(--ews-table-header-text);
}

.freshness-current {
    border-left: 8px solid #27ae60;
}

.freshness-aging {
    border-left: 8px solid #f2c94c;
}

.freshness-stale {
    border-left: 8px solid #eb5757;
}

.dashboard-mode-note {
    border-left: 4px solid #829ab1;
}

.gauge-status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px var(--ews-space-md);
    margin: 0 0 14px;
    padding: var(--ews-space-sm) 14px;
    background: var(--ews-surface-raised);
    border: 1px solid var(--ews-border);
    border-radius: var(--ews-radius-sm);
    font-size: var(--ews-font-size-caption);
    color: var(--ews-text-secondary);
}

.gauge-status-legend strong {
    color: var(--ews-text);
    margin-right: 4px;
}

.map-note {
    margin: 0 0 var(--ews-space-sm);
    color: #486581;
    font-size: var(--ews-font-size-caption);
    line-height: var(--ews-line-height);
}

.map-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--ews-space-sm);
}

.map-control-btn {
    border: 1px solid var(--ews-border);
    background: var(--ews-surface);
    /* Hard fallback — never inherit body text (breaks under color-scheme: dark). */
    color: var(--ews-text-secondary, #334e68);
    border-radius: var(--ews-radius-sm);
    padding: var(--ews-space-xs) var(--ews-space-sm);
    font-size: var(--ews-font-size-caption);
    font-weight: var(--ews-font-weight-bold);
    cursor: pointer;
    min-height: 44px;
}

.map-control-btn-ics {
    border-color: #0ea5e9;
    color: #0c4a6e;
    background: #e0f2fe;
    font-weight: 600;
}
.map-control-btn-ics:hover {
    background: #bae6fd;
}
.map-ics201-status {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    color: var(--ews-muted, #64748b);
    vertical-align: middle;
}
.map-ics201-status--err {
    color: #b91c1c;
}

.map-control-btn-primary {
    border-color: var(--ews-link);
    background: var(--ews-map-btn-primary-bg, #d4e6f1);
    /* Do not fall back to --ews-text (light in dark theme → light-on-light). */
    color: var(--ews-map-btn-primary-text, #102a43);
}

/* Flood polygon layer toggles (SFHA / floodway) — declutter for at-a-glance COP */
.map-control-btn-layer[aria-pressed="true"] {
    border-color: #0e7490;
    background: #e0f2fe;
    color: #0c4a6e;
}
.map-control-btn-layer.map-control-btn--layer-off,
.map-control-btn-layer[aria-pressed="false"] {
    border-style: dashed;
    opacity: 0.78;
    background: var(--ews-surface);
    color: var(--ews-text-secondary, #486581);
}
.map-control-btn-weather[aria-pressed="true"] {
    border-color: #b45309;
    background: #fff7ed;
    color: #9a3412;
}
.map-control-btn-radar[aria-pressed="true"] {
    border-color: #1d4ed8;
    background: #dbeafe;
    color: #1e3a8a;
}
.ews-theme-dark .map-control-btn-radar[aria-pressed="true"],
html[data-theme="dark"] .map-control-btn-radar[aria-pressed="true"] {
    background: #1e3a8a;
    border-color: #60a5fa;
    color: #dbeafe;
}
.map-legend-item--layer-off {
    opacity: 0.45;
    text-decoration: line-through;
}
.map-legend--nws-weather-off .map-legend-heading:first-child,
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-tornado-warning),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-severe-thunderstorm-warning),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-flash-flood-warning),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-flood-warning),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-flood-watch),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-tornado-watch),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-severe-thunderstorm-watch),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-wind-warning),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-winter-warning),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-snow-squall-warning),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-warning),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-watch),
.map-legend--nws-weather-off .map-legend-item:has(.legend-swatch-advisory) {
    opacity: 0.45;
}

/* NWS weather layer banner on Flood COP */
.map-weather-layer-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 var(--ews-space-sm);
    padding: 0.55rem 0.75rem;
    border-radius: var(--ews-radius-sm, 6px);
    border: 1px solid #fdba74;
    background: #fff7ed;
    color: #9a3412;
    font-size: var(--ews-font-size-caption, 0.85rem);
    line-height: 1.35;
}
.map-weather-layer-banner--on {
    border-color: #f59e0b;
    background: #fef3c7;
    color: #92400e;
}
.map-weather-layer-banner--off {
    border-style: dashed;
    opacity: 0.95;
}
.map-weather-layer-banner--empty {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #475569;
    border-style: solid;
}
.map-weather-layer-banner-text {
    flex: 1 1 12rem;
}
.map-weather-layer-banner-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid currentColor;
    opacity: 0.9;
}
.ews-theme-dark .map-weather-layer-banner,
html[data-theme="dark"] .map-weather-layer-banner {
    background: #431407;
    border-color: #fb923c;
    color: #ffedd5;
}
.ews-theme-dark .map-weather-layer-banner--on,
html[data-theme="dark"] .map-weather-layer-banner--on {
    background: #78350f;
    border-color: #fbbf24;
    color: #fef3c7;
}
.ews-theme-dark .map-weather-layer-banner--empty,
html[data-theme="dark"] .map-weather-layer-banner--empty {
    background: #1e293b;
    border-color: #475569;
    color: #cbd5e1;
}
.ews-theme-dark .map-control-btn-weather[aria-pressed="true"],
html[data-theme="dark"] .map-control-btn-weather[aria-pressed="true"] {
    background: #78350f;
    border-color: #fbbf24;
    color: #fef3c7;
}

.map-controls--weather {
    align-items: center;
}

.map-radar-updated {
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
    line-height: var(--ews-line-height);
}

.legend-swatch-radar {
    background: linear-gradient(
        90deg,
        #e8eef2 0%,
        #88ddee 12%,
        #00a3e0 24%,
        #005588 36%,
        #ffee00 52%,
        #ffaa00 68%,
        #ff4400 84%,
        #c10000 100%
    );
}

.map-radar-precip-scale {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--ews-border);
    border-radius: var(--ews-radius-sm);
    /* Hard light surface so dark-theme body text tokens cannot wash out labels */
    background: #f1f5f9;
    color: #0f172a;
}

.map-radar-precip-scale-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.map-radar-precip-scale-note {
    margin: 0 0 10px;
    font-size: var(--ews-font-size-caption);
    color: #334e68;
    line-height: var(--ews-line-height);
}

.map-radar-precip-scale-bar {
    display: flex;
    width: 100%;
    height: 18px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #64748b;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.map-radar-precip-scale-segment {
    flex: 1 1 0;
    min-width: 0;
}

.map-radar-precip-scale-labels {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.map-radar-precip-scale-label {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    text-align: center;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

.map-gridpoint-precip {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: var(--ews-radius-sm);
    border: 1px solid var(--ews-border);
    background: #e8f4fc;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0c4a6e;
    line-height: var(--ews-line-height);
}

/* Dark COP: high-contrast precip legend (not muted-on-muted) */
.ews-theme-dark .map-radar-precip-scale,
html[data-theme="dark"] .map-radar-precip-scale {
    background: #0f172a;
    border-color: #64748b;
    color: #f8fafc;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.15);
}

.ews-theme-dark .map-radar-precip-scale-title,
html[data-theme="dark"] .map-radar-precip-scale-title {
    color: #f0f9ff;
    font-weight: 700;
}

.ews-theme-dark .map-radar-precip-scale-note,
html[data-theme="dark"] .map-radar-precip-scale-note {
    color: #cbd5e1;
}

.ews-theme-dark .map-radar-precip-scale-bar,
html[data-theme="dark"] .map-radar-precip-scale-bar {
    border-color: #94a3b8;
}

.ews-theme-dark .map-radar-precip-scale-label,
html[data-theme="dark"] .map-radar-precip-scale-label {
    color: #e2e8f0;
    font-weight: 700;
}

.ews-theme-dark .map-gridpoint-precip,
html[data-theme="dark"] .map-gridpoint-precip {
    background: #0c4a6e;
    border-color: #38bdf8;
    color: #f0f9ff;
}

.focus-area-map {
    width: 100%;
    height: 520px;
    border-radius: var(--ews-radius-sm);
    border: 1px solid var(--ews-border);
}

/* ========== PRACTICE scenario (archive replay) ========== */
.ews-practice-banner {
    display: flex;
    gap: 14px;
    align-items: stretch;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(90deg, #7f1d1d 0%, #9a3412 55%, #78350f 100%);
    border: 3px solid #fbbf24;
    color: #fff7ed;
    box-shadow: 0 8px 24px rgba(127, 29, 29, 0.45);
}

.ews-practice-banner-mark {
    flex: 0 0 auto;
    align-self: center;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fbbf24;
    color: #7f1d1d;
    line-height: 1.1;
}

.ews-practice-banner-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ews-practice-banner-title {
    display: block;
    font-size: 1.05rem;
    margin-bottom: 4px;
}

.ews-practice-banner-sub {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: #ffedd5;
    line-height: 1.35;
}

.ews-practice-clocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 8px;
    margin: 0 0 8px;
}

.ews-practice-clock {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 8px;
    padding: 6px 8px;
}

.ews-practice-clock-label {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fde68a;
    margin-bottom: 2px;
}

.ews-practice-clock-value {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

.ews-practice-speaker {
    margin: 6px 0 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.55);
    border-left: 4px solid #fbbf24;
}

.ews-practice-speaker strong {
    display: block;
    margin-bottom: 4px;
    color: #fef3c7;
}

.ews-practice-speaker p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #ffedd5;
}

.ews-practice-banner-actions {
    margin: 6px 0 0;
    font-size: 0.78rem;
}

.ews-practice-banner-actions a {
    color: #fde68a;
    font-weight: 700;
}

.ews-practice-panel {
    border: 2px solid #f59e0b;
    border-radius: 10px;
    padding: 12px 14px;
    background: rgba(120, 53, 15, 0.25);
    margin: 0 0 14px;
}

.ews-practice-panel h2 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.ews-practice-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
}

.ews-practice-status-box {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    white-space: pre-wrap;
    background: rgba(15, 23, 42, 0.65);
    border-radius: 8px;
    padding: 10px;
    max-height: 220px;
    overflow: auto;
}

/* Gauge hover tooltip + click popup — mini stage dial (matches COP dial strip).
   Pane z-index is raised in JS (tooltip 750 / popup 760) so dials sit above
   gauge (660) and personnel (680) markers — not underneath them. */
.leaflet-tooltip-pane {
    z-index: 750 !important;
}

.leaflet-popup-pane {
    z-index: 760 !important;
}

.leaflet-tooltip.ews-map-gauge-tooltip {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    color: #f8fafc;
    z-index: 750;
    /* Leaflet defaults to nowrap — long captions spilled onto the map tiles */
    white-space: normal;
}

.leaflet-tooltip.ews-map-gauge-tooltip::before {
    border-top-color: #0f172a;
}

.ews-map-gauge-tip {
    box-sizing: border-box;
    width: 168px;
    max-width: 168px;
    padding: 8px 10px 10px;
    border-radius: 8px;
    background: #0f172a;
    border: 1px solid #334155;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    color: #f1f5f9;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
    overflow: hidden;
}

.ews-map-gauge-tip--dial {
    width: 168px;
    max-width: 168px;
}

.ews-map-gauge-tip-title {
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 4px;
    color: #f8fafc;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    word-break: break-word;
}

.ews-map-gauge-tip-dial {
    display: flex;
    justify-content: center;
    margin: 2px 0 2px;
}

.ews-map-dial-svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.ews-map-gauge-tip-caption {
    font-weight: 700;
    font-size: 11px;
    text-align: center;
    color: #f8fafc;
    margin-top: 4px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.35;
}

/* Posture stays inside the card as a chip (not trailing text lost on the basemap) */
.ews-map-gauge-tip-posture {
    display: block;
    margin: 6px auto 0;
    padding: 3px 8px;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 999px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
}

.ews-map-gauge-tip-posture--monitor {
    color: #eff6ff;
    background: #1d4ed8;
    border-color: #60a5fa;
}

.ews-map-gauge-tip-posture--prepare {
    color: #1c1917;
    background: #f2c94c;
    border-color: #eab308;
}

.ews-map-gauge-tip-posture--escalate {
    color: #1c1917;
    background: #f2994a;
    border-color: #ea580c;
}

.ews-map-gauge-tip-posture--act-now {
    color: #fff;
    background: #eb5757;
    border-color: #b91c1c;
}

.ews-map-gauge-tip-meta {
    font-size: 10px;
    color: #94a3b8;
    text-align: center;
    margin-top: 3px;
    white-space: normal;
    word-break: break-word;
}

.ews-map-gauge-tip-text {
    font-size: 11px;
    color: #cbd5e1;
    white-space: normal;
    word-break: break-word;
}

.ews-map-gauge-popup-dial {
    display: flex;
    justify-content: center;
    margin: 0 0 8px;
    padding: 6px 4px 2px;
    border-radius: 6px;
    background: #0f172a;
}

.ews-map-gauge-popup-body {
    font-size: 13px;
    line-height: 1.4;
}

.leaflet-popup.ews-map-gauge-popup-wrap .leaflet-popup-content-wrapper {
    border-radius: 10px;
}

.leaflet-popup.ews-map-gauge-popup-wrap .leaflet-popup-content {
    margin: 12px 14px;
    min-width: 160px;
}

.map-stage {
    position: relative;
}

.map-personnel-summary {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 500;
    max-width: min(92%, 420px);
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 32, 0.88);
    color: #f0f4f8;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.map-personnel-summary--empty {
    opacity: 0.72;
    font-weight: 500;
}

.map-personnel-summary--mini {
    font-size: 11px;
    max-width: min(94%, 360px);
    bottom: 8px;
    left: 8px;
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ews-space-sm) 18px;
    margin-top: 14px;
}

.map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ews-space-xs);
    font-size: var(--ews-font-size-caption);
    color: #486581;
}

.map-legend-item--flood-zone {
    align-items: flex-start;
    flex: 1 1 280px;
    max-width: 420px;
}

.map-legend-item-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.map-legend-item-label {
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-text-secondary);
    line-height: 1.35;
}

.map-legend-item-detail {
    font-size: 0.75rem;
    color: var(--ews-muted);
    line-height: 1.4;
}

.map-legend-item--floodway .map-legend-item-label {
    color: #6b21a8;
}

/* Gauge risk palette — matches focus_area_map.js markerColor */
.legend-swatch-risk-critical {
    background: #eb5757;
    border-color: #922b21;
}
.legend-swatch-risk-high {
    background: #f2994a;
    border-color: #d35400;
}
.legend-swatch-risk-medium {
    background: #f2c94c;
    border-color: #b7950b;
}
.legend-swatch-risk-low {
    background: #2f80ed;
    border-color: #1a5276;
}
.legend-swatch-risk-info,
.legend-swatch-risk-normal {
    background: #27ae60;
    border-color: #1e8449;
}
.legend-swatch-risk-unknown {
    background: #627d98;
    border-color: #486581;
}
.legend-swatch-risk-offline {
    background: #829ab1;
    border-color: #627d98;
}

.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: var(--ews-radius-pill);
    border: 1px solid var(--ews-text);
    display: inline-block;
}

/* Personnel = star (not circle) — do not confuse with gauge dots */
.legend-swatch-personnel {
    background: #9b59b6;
    border-color: #512e8f;
}

.legend-swatch-personnel-star {
    border-radius: 0 !important;
    width: 14px !important;
    height: 14px !important;
    border-width: 1.5px !important;
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
}

.ews-personnel-marker {
    background: transparent !important;
    border: none !important;
}

.ews-personnel-pin {
    display: block;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.45));
}

.legend-line {
    width: 28px;
    height: 0;
    border-top-width: 3px;
    border-top-style: solid;
    display: inline-block;
}

.legend-line-mainstem {
    border-top-color: #2f80ed;
}

.legend-line-tributary {
    border-top-color: #16a085;
    border-top-style: dashed;
}

.legend-line-operating-ring {
    border-top-color: #2563eb;
    border-top-style: dashed;
    border-top-width: 3px;
}

.legend-swatch-county {
    background: #d4e6f1;
    border-color: var(--ews-link);
    border-radius: 2px;
}

.legend-swatch-grid {
    background: #9b59b6;
    border-color: #6c3483;
}

.forecast-grid-marker {
    background: transparent;
    border: none;
}

.forecast-grid-pin {
    width: 14px;
    height: 14px;
    border-radius: var(--ews-radius-pill);
    background: #9b59b6;
    border: 2px solid #6c3483;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.legend-swatch-sfha {
    background: var(--ews-nfhl-sfha-fill);
    border-color: var(--ews-nfhl-sfha-stroke);
    border-radius: 2px;
}

.flood-zone-cluster-marker {
    background: transparent;
    border: none;
}

.flood-zone-cluster-pin {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: var(--ews-nfhl-sfha-fill);
    border: 2px solid var(--ews-nfhl-sfha-stroke);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.legend-swatch-floodway {
    background: var(--ews-nfhl-floodway-fill);
    border-color: var(--ews-nfhl-floodway-stroke);
    border-width: 2px;
    border-radius: 2px;
    background-image: repeating-linear-gradient(
        135deg,
        var(--ews-nfhl-floodway-fill) 0,
        var(--ews-nfhl-floodway-fill) 4px,
        #7c3aed 4px,
        #7c3aed 6px
    );
}

.map-popup-note {
    display: block;
    margin-top: 6px;
    color: var(--ews-muted);
    font-size: 12px;
}

.map-popup-detail {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--ews-text-secondary);
}

.map-popup-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 2px;
}

.map-popup-source {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: var(--ews-font-weight-bold);
    letter-spacing: 0.02em;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.map-popup-source--usgs {
    color: #1a5276;
    background: #d4e6f1;
    border: 1px solid #2980b9;
}

.map-popup-source--marfc {
    color: var(--ews-marfc-text);
    background: var(--ews-marfc-bg);
    border: 1px solid var(--ews-marfc-border);
}

/* Operator PWA (Round 04 PR4) */

.ews-dashboard-body--pwa {
    min-height: 100dvh;
}

.ews-dashboard-body--pwa .ews-shell-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 18px 20px 20px;
}

.ews-dashboard-body--pwa .ews-shell-header h1 {
    font-size: var(--ews-font-size-h1-pwa);
}

.ews-shell-main--pwa {
    padding: var(--ews-space-md);
    padding-bottom: calc(var(--ews-space-md) + env(safe-area-inset-bottom));
}

.ews-pwa-return-bar {
    margin-bottom: var(--ews-space-md);
}

.ews-pwa-return-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--ews-radius-lg);
    background: #d4e6f1;
    color: var(--ews-text);
    font-weight: 600;
    text-decoration: none;
}

.ews-pwa-connection-status {
    display: flex;
    align-items: center;
    gap: var(--ews-space-xs);
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
    margin-bottom: 14px;
}

.ews-pwa-connection-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--ews-radius-pill);
    background: #27ae60;
    flex: 0 0 auto;
}

.ews-pwa-connection-dot.offline {
    background: #eb5757;
}

.ews-pwa-posture-hero,
.posture-hero {
    border-radius: 14px;
    padding: 20px;
    margin-bottom: var(--ews-space-md);
    background: var(--ews-surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border-left: 8px solid var(--ews-muted);
}

.ews-pwa-posture-hero-monitor,
.posture-hero-monitor {
    border-left-color: var(--ews-posture-monitor);
}

.ews-pwa-posture-hero-prepare,
.posture-hero-prepare {
    border-left-color: var(--ews-posture-prepare);
    background: var(--ews-panel-prepare-bg);
}

.ews-pwa-posture-hero-escalate,
.posture-hero-escalate {
    border-left-color: var(--ews-posture-escalate);
    background: var(--ews-panel-escalate-bg);
}

.ews-pwa-posture-hero-act-now,
.posture-hero-act-now {
    border-left-color: var(--ews-posture-act-now);
    background: var(--ews-panel-act-now-bg);
}

.ews-pwa-posture-hero-label,
.posture-hero-label {
    font-size: var(--ews-font-size-caption);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ews-muted);
}

.ews-pwa-posture-hero-value,
.posture-hero-value {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 6px 0 var(--ews-space-xs);
    line-height: 1.05;
}

.ews-pwa-metric-grid,
.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ews-space-sm);
    margin-bottom: var(--ews-space-md);
}

.ews-pwa-metric-card,
.metric-card {
    background: var(--ews-surface);
    border-radius: var(--ews-radius-lg);
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ews-pwa-metric-card strong,
.metric-card strong {
    display: block;
    font-size: 1.5rem;
    margin-top: 4px;
}

.ews-pwa-metric-card span,
.metric-card span {
    font-size: 12px;
    color: var(--ews-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ews-pwa-section-card,
.section-card {
    background: var(--ews-surface);
    border-radius: var(--ews-radius-lg);
    padding: var(--ews-space-md);
    margin-bottom: var(--ews-space-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.ews-pwa-section-card h2,
.section-card h2 {
    margin: 0 0 10px;
    font-size: var(--ews-font-size-h2);
    color: var(--ews-text);
}

.ews-pwa-section-card p,
.ews-pwa-section-card li,
.section-card p,
.section-card li {
    font-size: var(--ews-font-size-body);
    line-height: var(--ews-line-height);
    color: var(--ews-text-secondary);
}

.ews-pwa-section-card ul,
.section-card ul {
    margin: 0;
    padding-left: 18px;
}

.ews-dashboard-body--pwa .operator-alert-panel {
    position: static;
    width: 100%;
    margin: 0 0 var(--ews-space-md);
    box-shadow: var(--ews-shadow-elevated);
}

.ews-dashboard-body--pwa .operator-alert-panel::after {
    display: none;
}

.ews-pwa-briefing {
    padding-top: 12px;
    padding-bottom: 12px;
}

.ews-pwa-briefing summary {
    font-size: var(--ews-font-size-body);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-text);
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    list-style: none;
}

.ews-pwa-briefing summary::-webkit-details-marker {
    display: none;
}

.ews-pwa-briefing[open] summary {
    margin-bottom: 10px;
}

.ews-pwa-ics-role-row + .ews-pwa-ics-role-row,
.ics-role-row + .ics-role-row {
    margin-top: var(--ews-space-sm);
    padding-top: var(--ews-space-sm);
    border-top: 1px solid var(--ews-border);
}

.ews-pwa-ics-role-name,
.ics-role-name {
    font-weight: var(--ews-font-weight-bold);
    font-size: var(--ews-font-size-body);
}

.ews-pwa-driver-headline {
    font-size: var(--ews-font-size-body);
    font-weight: var(--ews-font-weight-bold);
    line-height: var(--ews-line-height);
    margin: 0 0 var(--ews-space-xs);
}

.ews-pwa-observation-hint {
    margin-bottom: var(--ews-space-sm);
}

.ews-pwa-driver-details,
.ews-pwa-marfc-details {
    margin-top: var(--ews-space-sm);
}

.ews-pwa-driver-details summary,
.ews-pwa-marfc-details summary {
    cursor: pointer;
    font-size: var(--ews-font-size-caption);
    font-weight: 600;
    color: var(--ews-muted);
}

.ews-pwa-marfc-details summary .ews-marfc-strip-badge {
    margin-right: 6px;
}

.ews-pwa-driver-card-grid,
.driver-card-grid {
    display: grid;
    gap: 10px;
    margin-bottom: var(--ews-space-sm);
    margin-top: var(--ews-space-xs);
}

.ews-pwa-driver-card-row,
.driver-card-row {
    display: flex;
    justify-content: space-between;
    gap: var(--ews-space-sm);
    font-size: var(--ews-font-size-body);
    line-height: var(--ews-line-height);
}

.ews-pwa-driver-card-label,
.driver-card-label {
    color: var(--ews-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ews-pwa-driver-card-value,
.driver-card-value {
    font-weight: 600;
    text-align: right;
}

.ews-pwa-driver-suspect-flag,
.driver-suspect-flag {
    display: inline-block;
    margin-top: var(--ews-space-xs);
    padding: 6px 10px;
    border-radius: var(--ews-radius-sm);
    background: #fdedec;
    color: #922b21;
    font-size: var(--ews-font-size-caption);
    font-weight: 600;
}

.ews-pwa-notify-card,
.notify-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ews-space-sm);
}

.ews-pwa-footer-note,
.footer-note {
    font-size: 12px;
    color: var(--ews-muted);
    line-height: var(--ews-line-height);
    margin-top: var(--ews-space-xs);
}

.ews-pwa-install-banner,
.pwa-install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ews-space-sm);
    align-items: center;
    justify-content: space-between;
    background: var(--ews-install-banner-bg, #1f2933);
    color: var(--ews-install-banner-text, #ffffff);
    border: 1px solid var(--ews-install-banner-border, transparent);
    border-radius: 14px;
    padding: 14px var(--ews-space-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.ews-pwa-install-copy,
.pwa-install-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--ews-font-size-caption);
    color: inherit;
}

.ews-pwa-install-copy strong,
.pwa-install-copy strong {
    font-size: 15px;
    color: inherit;
}

.ews-pwa-install-actions,
.pwa-install-actions {
    display: flex;
    gap: var(--ews-space-xs);
}

.pwa-install-button,
.pwa-install-dismiss,
.notify-enable-button {
    border: none;
    border-radius: var(--ews-radius-pill);
    padding: 10px 14px;
    font-size: var(--ews-font-size-caption);
    font-weight: var(--ews-font-weight-bold);
    cursor: pointer;
    min-height: 44px;
}

.pwa-install-button,
.notify-enable-button {
    background: var(--ews-install-btn-bg, #f2994a);
    /* Hard dark text — never inherit body/link color onto amber fill. */
    color: var(--ews-install-btn-text, #102a43);
}

.pwa-install-dismiss {
    background: transparent;
    color: var(--ews-install-dismiss-text, #d9e2ec);
    border: 1px solid var(--ews-install-banner-border, rgba(255, 255, 255, 0.25));
}

.badge-suspect-inline {
    display: inline-block;
    padding: 2px var(--ews-space-xs);
    border-radius: var(--ews-radius-pill);
    background: var(--ews-badge-suspect-bg);
    color: var(--ews-badge-suspect-text);
    font-size: 12px;
    font-weight: var(--ews-font-weight-bold);
}

/* Weather evaluation (Round 04 PR5) */

/* Gauge–forecast correlation (info-only / test) — high-contrast ops theme */
.ews-forecast-impact-panel {
    border: 2px solid #1a6b9a;
    border-radius: 8px;
    padding: 0.85rem 1.05rem;
    background: linear-gradient(180deg, #e8f6f3 0%, #eaf2f8 100%);
    margin: 0.75rem 0 1rem;
    box-shadow: 0 0 0 1px rgba(26, 107, 154, 0.15);
}
.ews-forecast-impact-panel--active {
    border-color: #148f77;
}
.ews-forecast-impact-panel-label {
    margin: 0.15rem 0 0.45rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0e6655;
    text-transform: none;
}
.ews-forecast-impact-banner {
    font-weight: 600;
    color: #0e6655;
}
.ews-forecast-impact-list {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.ews-forecast-impact-card {
    border: 1px solid rgba(26, 107, 154, 0.35);
    border-left: 5px solid #1abc9c;
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    margin: 0;
    background: #fff;
}
.ews-forecast-impact-gauge {
    margin: 0 0 0.2rem;
    font-size: 1rem;
}
.ews-forecast-impact-trend {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #d4efdf;
    color: #0e6655;
}
.ews-forecast-impact-precip {
    margin: 0.15rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a5276;
}
.ews-forecast-impact-context {
    margin: 0.15rem 0 0.25rem;
    font-size: 0.9rem;
    color: #117a65;
    font-weight: 600;
}
.ews-forecast-impact-summary {
    margin: 0 0 0.25rem;
    line-height: 1.35;
    font-size: 0.88rem;
    color: #2c3e50;
}
.ews-forecast-impact-table {
    width: 100%;
    font-size: 0.82rem;
    border-collapse: collapse;
    margin-top: 0.5rem;
}
.ews-forecast-impact-table th,
.ews-forecast-impact-table td {
    text-align: left;
    padding: 0.3rem 0.45rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ews-forecast-impact-table th {
    color: #1a5276;
    font-weight: 700;
}
html[data-theme="dark"] .ews-forecast-impact-panel,
.ews-theme-dark .ews-forecast-impact-panel {
    background: linear-gradient(180deg, #0a1a22 0%, #0d1f1c 100%);
    border-color: #2e86c1;
    box-shadow: 0 0 12px rgba(26, 188, 156, 0.12);
}
html[data-theme="dark"] .ews-forecast-impact-panel--active,
.ews-theme-dark .ews-forecast-impact-panel--active {
    border-color: #1abc9c;
}
html[data-theme="dark"] .ews-forecast-impact-panel-label,
.ews-theme-dark .ews-forecast-impact-panel-label {
    color: #5dade2;
}
html[data-theme="dark"] .ews-forecast-impact-card,
.ews-theme-dark .ews-forecast-impact-card {
    background: #102830;
    border-color: #2e86c1;
    border-left-color: #1abc9c;
    color: #ecf0f1;
}
html[data-theme="dark"] .ews-forecast-impact-banner,
.ews-theme-dark .ews-forecast-impact-banner {
    color: #7dcea0;
}
html[data-theme="dark"] .ews-forecast-impact-precip,
.ews-theme-dark .ews-forecast-impact-precip {
    color: #5dade2;
}
html[data-theme="dark"] .ews-forecast-impact-context,
.ews-theme-dark .ews-forecast-impact-context {
    color: #7dcea0;
}
html[data-theme="dark"] .ews-forecast-impact-summary,
.ews-theme-dark .ews-forecast-impact-summary {
    color: #d5dbdb;
}
html[data-theme="dark"] .ews-forecast-impact-trend,
.ews-theme-dark .ews-forecast-impact-trend {
    background: rgba(26, 188, 156, 0.2);
    color: #7dcea0;
}
html[data-theme="dark"] .ews-forecast-impact-table th,
.ews-theme-dark .ews-forecast-impact-table th {
    color: #5dade2;
}
html[data-theme="dark"] .ews-forecast-impact-table td,
.ews-theme-dark .ews-forecast-impact-table td {
    border-bottom-color: rgba(93, 173, 226, 0.15);
    color: #ecf0f1;
}

.ews-official-noaa-panel {
    border: 2px solid #1a5276;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: #eaf2f8;
    margin: 0.75rem 0 1rem;
}
.ews-official-noaa-panel--flood-active {
    border-color: #b03a2e;
    background: #fdedec;
}
.ews-official-noaa-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.ews-noaa-product {
    border: 1px solid rgba(26, 82, 118, 0.25);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    margin: 0.4rem 0;
    background: #fff;
}
.ews-noaa-product--flood {
    border-color: #c0392b;
    border-left: 4px solid #c0392b;
    background: #fff8f7;
}
.ews-noaa-product-title {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.ews-noaa-product-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #922b21;
    background: #fadbd8;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
}
.ews-noaa-product-meta {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: #34495e;
}
.ews-official-noaa-banner {
    font-weight: 600;
    color: #1a5276;
}
.ews-noaa-product-headline {
    margin: 0.2rem 0;
    font-weight: 600;
}
.ews-noaa-product-summary {
    margin: 0.35rem 0;
    font-size: 0.9rem;
    line-height: 1.35;
}
.ews-noaa-product-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.35rem 0.75rem;
    margin: 0.4rem 0;
    font-size: 0.82rem;
}
.ews-noaa-product-facts dt {
    font-weight: 700;
    color: #1a5276;
    margin: 0;
}
.ews-noaa-product-facts dd {
    margin: 0;
}
.ews-noaa-product-severity {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 3px;
    background: #d5dbdb;
    color: #1c2833;
}
.ews-noaa-severity-severe,
.ews-noaa-severity-extreme {
    background: #c0392b;
    color: #fff;
}
.ews-noaa-severity-moderate {
    background: #e67e22;
    color: #fff;
}
.ews-noaa-severity-minor {
    background: #f4d03f;
    color: #1c2833;
}
.ews-noaa-product-gauges {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
}
.ews-noaa-gauge-link {
    font-weight: 600;
    color: #1a5276;
    text-decoration: underline;
}
html[data-theme="dark"] .ews-official-noaa-banner,
.ews-theme-dark .ews-official-noaa-banner,
html[data-theme="dark"] .ews-noaa-product-facts dt,
.ews-theme-dark .ews-noaa-product-facts dt,
html[data-theme="dark"] .ews-noaa-gauge-link,
.ews-theme-dark .ews-noaa-gauge-link {
    color: #85c1e9;
}
.ews-badge--flood-product {
    background: #f5b7b1;
    color: #7b241c;
    border-color: #c0392b;
}
html[data-theme="dark"] .ews-official-noaa-panel,
.ews-theme-dark .ews-official-noaa-panel {
    background: #0c1a2e;
    border-color: #5dade2;
}
html[data-theme="dark"] .ews-official-noaa-panel--flood-active,
.ews-theme-dark .ews-official-noaa-panel--flood-active {
    background: #2c1512;
    border-color: #e74c3c;
}
html[data-theme="dark"] .ews-noaa-product,
.ews-theme-dark .ews-noaa-product {
    background: #152238;
    border-color: #2980b9;
    color: #ecf0f1;
}
html[data-theme="dark"] .ews-noaa-product--flood,
.ews-theme-dark .ews-noaa-product--flood {
    background: #2a1814;
    border-color: #e74c3c;
}
html[data-theme="dark"] .ews-noaa-product-meta,
.ews-theme-dark .ews-noaa-product-meta {
    color: #bdc3c7;
}

.ews-nws-qpf-strip {
    border: 1px solid var(--ews-eval-border, #2980b9);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: var(--ews-eval-bg, #ebf5fb);
}
.ews-nws-qpf-card {
    margin: 0.75rem 0;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(41, 128, 185, 0.25);
}
.ews-nws-qpf-card:first-of-type {
    border-top: none;
}
.ews-nws-qpf-strip .ews-compact-table {
    width: 100%;
    font-size: 0.85rem;
    border-collapse: collapse;
}
.ews-nws-qpf-strip .ews-compact-table th,
.ews-nws-qpf-strip .ews-compact-table td {
    text-align: left;
    padding: 0.2rem 0.4rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] .ews-nws-qpf-strip,
.ews-theme-dark .ews-nws-qpf-strip {
    background: #0c1a2e;
    border-color: #38bdf8;
    color: #e2e8f0;
}
html[data-theme="dark"] .ews-nws-qpf-strip .ews-caption,
.ews-theme-dark .ews-nws-qpf-strip .ews-caption {
    color: #cbd5e1;
}
html[data-theme="dark"] .ews-nws-qpf-strip .ews-compact-table th,
.ews-theme-dark .ews-nws-qpf-strip .ews-compact-table th {
    color: #f0f9ff;
    font-weight: 700;
}
html[data-theme="dark"] .ews-nws-qpf-strip .ews-compact-table td,
.ews-theme-dark .ews-nws-qpf-strip .ews-compact-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(148, 163, 184, 0.25);
}
/* Emphasize rate column (4th) on QPF tables */
html[data-theme="dark"] .ews-nws-qpf-strip .ews-compact-table td:nth-child(4),
.ews-theme-dark .ews-nws-qpf-strip .ews-compact-table td:nth-child(4),
html[data-theme="dark"] .ews-nws-qpf-strip .ews-compact-table th:nth-child(4),
.ews-theme-dark .ews-nws-qpf-strip .ews-compact-table th:nth-child(4) {
    color: #7dd3fc;
    font-weight: 700;
}

.ews-weather-evaluation-banner {
    background: var(--ews-eval-bg);
    border-left: 8px solid var(--ews-eval-border);
}

.ews-weather-evaluation-banner .ews-caption {
    margin: var(--ews-space-xs) 0 0;
    color: var(--ews-text-secondary);
}

.ews-eval-posture-panel h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ews-space-xs);
}

.ews-dashboard-body--weather .focus-area-map {
    height: 420px;
}

/* NWS hazards-map palette (weather.gov/help-map, 2025-03-10) — weather alerts only */
.legend-swatch-tornado-warning { background: #FF0000; border-color: #CC0000; }
.legend-swatch-severe-thunderstorm-warning { background: #FFA500; border-color: #CC8400; }
.legend-swatch-flash-flood-warning { background: #8B0000; border-color: #5C0000; }
.legend-swatch-wind-warning { background: #DAA520; border-color: #A07A18; }
.legend-swatch-flood-warning { background: #00FF00; border-color: #00AA00; }
.legend-swatch-winter-warning { background: #FF69B4; border-color: #C71585; }
.legend-swatch-snow-squall-warning { background: #C71585; border-color: #8B0A5A; }
.legend-swatch-tornado-watch {
    background: rgba(255, 255, 0, 0.45);
    border: 2px dashed #CCCC00;
}
.legend-swatch-severe-thunderstorm-watch {
    background: rgba(219, 112, 147, 0.55);
    border: 2px dashed #A05070;
}
.legend-swatch-flood-watch {
    background: rgba(46, 139, 87, 0.5);
    border: 2px dashed #1F5C3A;
}
.legend-swatch-warning { background: #FF0000; border-color: #CC0000; }
.legend-swatch-watch {
    background: rgba(255, 255, 0, 0.45);
    border: 2px dashed #CCCC00;
}
.legend-swatch-advisory { background: #00FF7F; border-color: #00AA55; }

.legend-swatch-tornado-warning,
.legend-swatch-severe-thunderstorm-warning,
.legend-swatch-flash-flood-warning,
.legend-swatch-wind-warning,
.legend-swatch-flood-warning,
.legend-swatch-winter-warning,
.legend-swatch-snow-squall-warning,
.legend-swatch-warning,
.legend-swatch-advisory {
    border-radius: 2px;
}

.legend-swatch-tornado-watch,
.legend-swatch-severe-thunderstorm-watch,
.legend-swatch-flood-watch,
.legend-swatch-watch {
    border-radius: 2px;
}

/* Water / wastewater (Round 04 PR6) */

.ews-water-status-banner .ews-caption {
    margin: var(--ews-space-xs) 0 0;
    color: var(--ews-text-secondary);
}

.ews-water-status-banner--review {
    background: var(--ews-badge-primary-path-bg);
    border-left-color: var(--ews-badge-primary-path-border);
}

.ews-water-status-banner--no-data {
    background: var(--ews-badge-display-bg);
    border-left-color: var(--ews-muted);
}

.ews-water-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.badge.warn {
    background: var(--ews-badge-degraded-bg);
    color: var(--ews-badge-degraded-text);
    border: 1px solid var(--ews-badge-degraded-border);
}

.badge.alert {
    background: var(--ews-badge-suspect-bg);
    color: var(--ews-badge-suspect-text);
    border: 1px solid var(--ews-badge-suspect-border);
}

/* Flood COP map-first layout (Round 05) */

.ews-flood-compact-posture {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--ews-space-md);
    background: var(--ews-surface);
    border-radius: var(--ews-radius-md);
    padding: var(--ews-space-md) var(--ews-space-lg);
    margin-bottom: var(--ews-space-md);
    box-shadow: var(--ews-shadow-card);
    border-left: 8px solid var(--ews-muted);
}

.ews-flood-compact-posture.posture-monitor {
    border-left-color: var(--ews-posture-monitor);
}

.ews-flood-compact-posture.posture-prepare {
    border-left-color: var(--ews-posture-prepare);
    background: var(--ews-panel-prepare-bg);
}

.ews-flood-compact-posture.posture-escalate {
    border-left-color: var(--ews-posture-escalate);
    background: var(--ews-panel-escalate-bg);
}

.ews-flood-compact-posture.posture-act-now {
    border-left-color: var(--ews-posture-act-now);
    background: var(--ews-panel-act-now-bg);
}

.ews-flood-compact-posture-main {
    flex: 1 1 420px;
    min-width: 0;
}

.ews-flood-compact-posture-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ews-space-sm);
}

.ews-flood-compact-posture-label {
    font-size: var(--ews-font-size-caption);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ews-muted);
    font-weight: var(--ews-font-weight-bold);
}

.ews-flood-compact-posture-value {
    font-size: 1.75rem;
    margin: 0;
}

.ews-flood-compact-posture-summary,
.ews-flood-compact-posture-driver,
.ews-flood-compact-posture-basin {
    margin: 6px 0 0;
    font-size: var(--ews-font-size-body);
    line-height: var(--ews-line-height);
    color: var(--ews-text-secondary);
}

.ews-flood-compact-posture-meta {
    display: flex;
    flex-direction: column;
    gap: var(--ews-space-xs);
    align-items: flex-end;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
}

.ews-flood-compact-posture-metric strong {
    color: var(--ews-text);
    font-size: var(--ews-font-size-body);
}

/* MARFC / NWPS river forecast strip (flood COP + operator PWA) */
.ews-marfc-strip {
    margin: var(--ews-space-sm) 0;
    padding: var(--ews-space-sm) var(--ews-space-md);
    background: var(--ews-marfc-bg);
    border: 2px solid var(--ews-marfc-border);
    border-left-width: 5px;
    border-left-color: var(--ews-marfc-stroke);
    border-radius: var(--ews-radius-sm);
    box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.08);
}

.ews-marfc-strip--active {
    border-color: var(--ews-marfc-stroke);
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.14);
}

.ews-marfc-strip-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--ews-space-sm);
    margin-bottom: var(--ews-space-xs);
}

.ews-marfc-strip-title-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ews-space-xs);
}

.ews-marfc-strip-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.6875rem;
    font-weight: var(--ews-font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ews-marfc-badge-text);
    background: var(--ews-marfc-badge-bg);
    border-radius: 4px;
}

.ews-marfc-strip-title {
    margin: 0;
    font-size: var(--ews-font-size-h2);
    color: var(--ews-marfc-text);
}

.ews-marfc-strip-headline {
    flex: 1 1 280px;
    margin: 0;
    font-size: var(--ews-font-size-body);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-text);
    line-height: var(--ews-line-height);
}

.ews-marfc-strip-meta {
    margin: 0 0 var(--ews-space-sm);
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
}

.ews-marfc-strip-drivers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--ews-space-sm);
    margin-bottom: var(--ews-space-sm);
}

.ews-marfc-driver-card {
    padding: var(--ews-space-sm);
    background: var(--ews-surface);
    border: 1px solid var(--ews-border);
    border-radius: var(--ews-radius-sm);
}

.ews-marfc-driver-card--active {
    border-color: var(--ews-marfc-border);
    background: linear-gradient(180deg, var(--ews-marfc-bg) 0%, var(--ews-surface) 100%);
    box-shadow: inset 3px 0 0 var(--ews-marfc-stroke);
}

.ews-marfc-driver-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ews-space-xs);
    margin-bottom: 4px;
}

.ews-marfc-driver-site {
    font-size: var(--ews-font-size-caption);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-marfc-text);
    font-variant-numeric: tabular-nums;
}

.ews-marfc-driver-name {
    margin: 0 0 var(--ews-space-xs);
    font-size: var(--ews-font-size-body);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-text);
}

.ews-marfc-driver-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ews-space-xs);
    margin: 0;
}

.ews-marfc-driver-stats dt {
    margin: 0;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ews-muted);
}

.ews-marfc-driver-stats dd {
    margin: 2px 0 0;
    font-size: var(--ews-font-size-body);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-text);
}

.ews-marfc-peak-active {
    color: var(--ews-marfc-text);
}

.ews-marfc-pct {
    font-weight: 400;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
}

.ews-marfc-strip-all {
    margin-bottom: var(--ews-space-xs);
}

.ews-marfc-strip-all summary {
    cursor: pointer;
    font-size: var(--ews-font-size-body);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-marfc-text);
    margin-bottom: var(--ews-space-xs);
}

.ews-marfc-strip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ews-font-size-caption);
}

.ews-marfc-strip-table th,
.ews-marfc-strip-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--ews-border);
}

.ews-marfc-strip-table th {
    color: var(--ews-muted);
    font-weight: var(--ews-font-weight-bold);
}

.ews-marfc-row-active td:last-child {
    color: var(--ews-marfc-text);
    font-weight: var(--ews-font-weight-bold);
}

.ews-marfc-strip-governance {
    margin: var(--ews-space-xs) 0 0;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
    font-style: italic;
}

.map-alert-marfc {
    background: var(--ews-marfc-bg);
    border: 2px solid var(--ews-marfc-border);
    color: var(--ews-marfc-text);
}

.map-note-marfc {
    padding: var(--ews-space-xs) var(--ews-space-sm);
    background: var(--ews-marfc-bg);
    border: 1px solid var(--ews-marfc-border);
    border-radius: var(--ews-radius-sm);
    color: var(--ews-marfc-text);
}

.legend-swatch-marfc {
    background: transparent;
    border: 2px dashed var(--ews-marfc-stroke);
    box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.2);
}

/* Weather SA inform-only cue (empty NWS ring + radar/outlook SA) — not readiness */
.map-alert-weather-sa-inform {
    border-left: 4px solid #38bdf8;
    background: rgba(14, 116, 144, 0.18);
    color: inherit;
}
.map-alert-weather-sa-inform.is-active {
    border-left-color: #0ea5e9;
    background: rgba(14, 165, 233, 0.16);
}
.map-alert-weather-sa-inform strong {
    color: #7dd3fc;
}

.ews-pwa-marfc-card {
    margin-top: var(--ews-space-sm);
    padding: var(--ews-space-sm);
    background: var(--ews-marfc-bg);
    border: 1px solid var(--ews-marfc-border);
    border-left: 4px solid var(--ews-marfc-stroke);
    border-radius: var(--ews-radius-sm);
}

.ews-pwa-marfc-card--active {
    border-color: var(--ews-marfc-stroke);
    box-shadow: 0 0 0 1px rgba(8, 145, 178, 0.12);
}

.ews-pwa-marfc-kicker {
    margin: 0 0 4px;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-marfc-text);
}

.ews-pwa-marfc-headline {
    margin: 0;
    font-size: var(--ews-font-size-body);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-text);
}

.ews-pwa-marfc-alert {
    margin: var(--ews-space-xs) 0 0;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-marfc-text);
}

.ews-pwa-marfc-meta {
    margin: var(--ews-space-xs) 0 0;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
}

.ews-flood-detail-link {
    font-weight: var(--ews-font-weight-bold);
    font-size: var(--ews-font-size-body);
}

.ews-map-section--primary .focus-area-map {
    min-height: 50vh;
    height: auto;
}

.ews-flood-outlook {
    margin-top: var(--ews-space-sm);
}

.ews-flood-outlook-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ews-space-sm) var(--ews-space-md);
    margin-bottom: var(--ews-space-sm);
    padding: 14px 16px;
    border-radius: var(--ews-radius-sm);
    border: 2px solid var(--ews-border);
}

.ews-flood-outlook-hero--elevated {
    background: var(--ews-outlook-elevated-bg);
    border-color: var(--ews-outlook-elevated-border);
    box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.12);
}

.ews-flood-outlook-hero--high {
    background: var(--ews-outlook-high-bg);
    border-color: var(--ews-outlook-high-border);
    box-shadow: 0 0 0 2px rgba(190, 24, 93, 0.16);
}

.ews-flood-outlook-hero-badge {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: var(--ews-radius-pill);
    font-size: var(--ews-font-size-caption);
    font-weight: var(--ews-font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ews-flood-outlook-hero--elevated .ews-flood-outlook-hero-badge {
    color: #ffffff;
    background: var(--ews-outlook-elevated-stroke);
}

.ews-flood-outlook-hero--high .ews-flood-outlook-hero-badge {
    color: #ffffff;
    background: var(--ews-outlook-high-stroke);
}

.ews-flood-outlook-hero-kicker {
    margin: 0;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
}

.ews-flood-outlook-hero-title {
    margin: 2px 0 0;
    font-size: 1.125rem;
    font-weight: var(--ews-font-weight-bold);
    line-height: 1.25;
}

.ews-flood-outlook-hero--elevated .ews-flood-outlook-hero-title {
    color: var(--ews-outlook-elevated-stroke);
}

.ews-flood-outlook-hero--high .ews-flood-outlook-hero-title {
    color: var(--ews-outlook-high-stroke);
}

.ews-flood-outlook-hero-meta {
    margin: 0 0 0 auto;
    font-size: var(--ews-font-size-caption);
    font-weight: 600;
    color: var(--ews-text-secondary);
}

.ews-flood-outlook--active {
    border-width: 2px;
}

.ews-flood-outlook--elevated {
    border-color: var(--ews-outlook-elevated-border);
    background: linear-gradient(180deg, var(--ews-outlook-elevated-bg) 0%, var(--ews-surface) 48%);
}

.ews-flood-outlook--high {
    border-color: var(--ews-outlook-high-border);
    background: linear-gradient(180deg, var(--ews-outlook-high-bg) 0%, var(--ews-surface) 48%);
}

.ews-flood-outlook-governance {
    margin: 0 0 var(--ews-space-sm);
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
}

.ews-flood-outlook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ews-space-sm);
}

.ews-flood-outlook-panel h3,
.ews-flood-outlook-precip h3,
.ews-flood-outlook-assets h3 {
    margin: 0 0 var(--ews-space-xs);
    font-size: var(--ews-font-size-body);
}

.ews-flood-outlook-class--informational {
    color: var(--ews-muted);
}

.ews-flood-outlook-class--elevated {
    color: var(--ews-outlook-elevated-stroke);
}

.ews-flood-outlook-class--high {
    color: var(--ews-outlook-high-stroke);
}

.ews-flood-outlook-drivers,
.ews-flood-outlook-asset-list {
    margin: 0;
    padding-left: 1.2rem;
}

/* Full corridor list (no 8-item cap). Scroll when long so the briefing stays usable. */
.ews-flood-outlook-asset-list {
    max-height: min(28rem, 55vh);
    overflow-y: auto;
    padding-right: 0.35rem;
    list-style: none;
    padding-left: 0;
}

.ews-flood-outlook-asset-list > li {
    margin: 0;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--ews-border);
}

.ews-flood-outlook-asset-list > li:last-child {
    border-bottom: 0;
}

.ews-flood-outlook-muted {
    color: var(--ews-muted);
    font-size: var(--ews-font-size-caption);
}

.ews-flood-outlook-asset-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ews-flood-outlook-asset-item:hover,
.ews-flood-outlook-asset-item.is-active {
    color: var(--ews-outlook-high-stroke);
    text-decoration: underline;
}

.ews-map-section--outlook-active .map-stage {
    position: relative;
    border: 3px solid var(--ews-outlook-elevated-border);
    border-radius: var(--ews-radius-sm);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
}

.ews-map-section--outlook-high .map-stage {
    border-color: var(--ews-outlook-high-border);
    box-shadow:
        0 0 0 4px rgba(225, 29, 72, 0.2),
        inset 0 0 48px rgba(225, 29, 72, 0.08);
}

.ews-map-section--outlook-high .map-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px rgba(225, 29, 72, 0.35);
    z-index: 500;
}

.map-outlook-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 16px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: var(--ews-radius-sm);
    font-size: var(--ews-font-size-body);
    line-height: var(--ews-line-height);
}

.map-outlook-alert--elevated {
    background: var(--ews-outlook-elevated-bg);
    border: 2px solid var(--ews-outlook-elevated-border);
    color: var(--ews-text);
}

.map-outlook-alert--high {
    background: var(--ews-outlook-high-bg);
    border: 2px solid var(--ews-outlook-high-border);
    color: var(--ews-text);
}

.map-outlook-alert-badge {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: var(--ews-radius-pill);
    font-size: var(--ews-font-size-caption);
    font-weight: var(--ews-font-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
}

.map-outlook-alert--elevated .map-outlook-alert-badge {
    background: var(--ews-outlook-elevated-stroke);
}

.map-outlook-alert--high .map-outlook-alert-badge {
    background: var(--ews-outlook-high-stroke);
}

.map-outlook-alert-title {
    margin: 0;
    font-weight: var(--ews-font-weight-bold);
}

.map-outlook-alert--elevated .map-outlook-alert-title {
    color: var(--ews-outlook-elevated-stroke);
}

.map-outlook-alert--high .map-outlook-alert-title {
    color: var(--ews-outlook-high-stroke);
}

.map-outlook-alert-copy {
    margin: 4px 0 0;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-text-secondary);
}

.map-legend-item--outlook {
    flex: 1 1 100%;
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-text);
    padding: 6px 10px;
    border-radius: var(--ews-radius-sm);
    background: var(--ews-outlook-elevated-bg);
    border: 1px solid var(--ews-outlook-elevated-border);
}

.map-legend-item--outlook-high {
    background: var(--ews-outlook-high-bg);
    border-color: var(--ews-outlook-high-border);
    color: var(--ews-outlook-high-stroke);
}

.legend-swatch-outlook-area-elevated {
    background: var(--ews-outlook-elevated-fill);
    border-color: var(--ews-outlook-elevated-stroke);
    border-radius: 3px;
    animation: ews-outlook-area-flash-elevated 1.6s ease-in-out infinite;
}

.legend-swatch-outlook-area-high {
    background: var(--ews-outlook-high-fill);
    border-color: var(--ews-outlook-high-stroke);
    border-radius: 3px;
    animation: ews-outlook-area-flash-high 1.2s ease-in-out infinite;
}

.map-control-btn-outlook {
    border-color: var(--ews-outlook-high-border);
    color: var(--ews-outlook-high-stroke);
}

.map-control-btn-outlook.map-control-btn-primary {
    background: var(--ews-outlook-high-stroke);
    border-color: var(--ews-outlook-high-stroke);
    color: #ffffff;
}

.map-outlook-key {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--ews-radius-sm);
    font-size: var(--ews-font-size-caption);
    font-weight: 600;
    line-height: 1.3;
    box-shadow: var(--ews-shadow-card);
    pointer-events: none;
}

.map-outlook-key--elevated {
    background: rgba(245, 243, 255, 0.94);
    border: 2px solid var(--ews-outlook-elevated-border);
    color: var(--ews-outlook-elevated-stroke);
}

.map-outlook-key--high {
    background: rgba(255, 241, 242, 0.96);
    border: 2px solid var(--ews-outlook-high-border);
    color: var(--ews-outlook-high-stroke);
}

.map-outlook-key-swatch {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 2px solid var(--ews-outlook-elevated-stroke);
    background: var(--ews-outlook-elevated-fill);
    display: inline-block;
    animation: ews-outlook-area-flash-elevated 1.6s ease-in-out infinite;
}

.map-outlook-key--high .map-outlook-key-swatch {
    border-color: var(--ews-outlook-high-stroke);
    background: var(--ews-outlook-high-fill);
    animation: ews-outlook-area-flash-high 1.2s ease-in-out infinite;
}

.leaflet-interactive.ews-outlook-path {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Path fill flash is driven in JS (Leaflet setStyle). CSS fill-opacity
   keyframes do not reliably animate Leaflet SVG presentation attributes.
   Keep a whole-element opacity pulse as a secondary cue for key/legend. */
.leaflet-interactive.ews-outlook-warning-area--elevated,
.leaflet-interactive.ews-outlook-warning-area--high {
    /* JS owns the pulse; avoid competing CSS fill-opacity animations. */
}

.leaflet-interactive.ews-outlook-warning-area--selected {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
}

/* Legend / map-key swatches (HTML divs — CSS animation works here). */
@keyframes ews-outlook-area-flash-elevated {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 1;
    }
}

@keyframes ews-outlook-area-flash-high {
    0%,
    100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .leaflet-interactive.ews-outlook-warning-area--elevated,
    .leaflet-interactive.ews-outlook-warning-area--high,
    .legend-swatch-outlook-area-elevated,
    .legend-swatch-outlook-area-high,
    .map-outlook-key-swatch {
        animation: none;
    }
}

.ews-flood-detail {
    padding-top: 12px;
    padding-bottom: 12px;
    /* Outer shell only — avoid stacking light/dark surface clashes with nested panels */
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--ews-border);
}

.ews-flood-detail summary {
    font-size: var(--ews-font-size-body);
    font-weight: var(--ews-font-weight-bold);
    color: var(--ews-detail-summary-text);
    background: var(--ews-detail-summary-bg);
    border: 1px solid var(--ews-border);
    border-radius: var(--ews-radius-sm);
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0.55rem 0.85rem;
    margin: 0;
}

.ews-flood-detail summary::-webkit-details-marker {
    display: none;
}

.ews-flood-detail[open] summary {
    margin-bottom: var(--ews-space-sm);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

/* Nested panels inside expand blocks: single surface, consistent headers */
.ews-flood-detail > .section {
    background: var(--ews-surface);
    border: 1px solid var(--ews-border);
    box-shadow: none;
}

.ews-flood-detail > .section > h2,
.ews-flood-detail > .section > h3 {
    margin-top: 0;
    color: var(--ews-text);
    background: transparent;
}

.ews-flood-detail table th {
    background: var(--ews-table-header-bg);
    color: var(--ews-table-header-text);
}

.ews-flood-detail .section:last-child {
    margin-bottom: 0;
}

.ews-pwa-mini-map-card {
    padding-bottom: var(--ews-space-sm);
}

.ews-pwa-mini-map-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--ews-space-xs);
    margin-bottom: var(--ews-space-sm);
}

.ews-pwa-mini-map-header h2 {
    margin: 0;
}

.ews-pwa-mini-map-link {
    font-size: var(--ews-font-size-caption);
    font-weight: var(--ews-font-weight-bold);
}

.focus-area-map.ews-pwa-mini-map {
    height: 240px;
    min-height: 240px;
}

.ews-pwa-mini-map-fullscreen-btn {
    display: none;
}

@media (max-width: 768px), (pointer: coarse) {
    .ews-pwa-mini-map-fullscreen-btn {
        display: inline-flex;
        align-items: center;
    }
}

body.ews-pwa-map-fullscreen-active {
    overflow: hidden;
}

.ews-pwa-mini-map-card.ews-pwa-mini-map--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    padding:
        calc(var(--ews-space-sm) + env(safe-area-inset-top, 0px))
        var(--ews-space-sm)
        calc(var(--ews-space-sm) + env(safe-area-inset-bottom, 0px));
    background: var(--ews-surface);
    box-shadow: none;
}

.ews-pwa-mini-map-card.ews-pwa-mini-map--fullscreen .ews-pwa-mini-map-header,
.ews-pwa-mini-map-card.ews-pwa-mini-map--fullscreen .map-controls {
    flex-shrink: 0;
}

.ews-pwa-mini-map-card.ews-pwa-mini-map--fullscreen .map-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ews-pwa-mini-map-card.ews-pwa-mini-map--fullscreen .focus-area-map.ews-pwa-mini-map {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    border-radius: var(--ews-radius-sm);
}

.ews-pwa-mini-map-card.ews-pwa-mini-map--fullscreen .map-legend {
    flex-shrink: 0;
    max-height: 28vh;
    overflow-y: auto;
    margin-top: var(--ews-space-xs);
}

.ews-pwa-mini-map-card.ews-pwa-mini-map--fullscreen .ews-pwa-mini-map-fullscreen-btn {
    border-color: var(--ews-link);
    background: var(--ews-map-btn-primary-bg, #d4e6f1);
    color: var(--ews-map-btn-primary-text, #102a43);
}
/* ========== Stage dials — vertical stack (COP sidebar) ========== */

.ews-sd {
    margin: 6px 0 10px;
    padding: 8px 8px 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--ews-surface);
    border: 1px solid var(--ews-border);
    border-radius: 6px;
    overflow: hidden;
}

.ews-sd-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 8px;
}

.ews-sd-title {
    font-size: 0.78rem;
    color: var(--ews-text);
}

.ews-sd-note {
    font-size: 0.62rem;
    color: var(--ews-muted);
    line-height: 1.3;
    word-break: break-word;
}

/* EM Dir tally + posture legend */
.ews-sd-tally {
    margin: 4px 0 0;
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--ews-text);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}

.ews-sd-tally-item strong {
    font-weight: 800;
}

.ews-sd-tally-item--alert strong {
    color: #fbbf24;
}

.ews-sd-tally-item--flood strong {
    color: #f87171;
}

.ews-sd-tally-breakdown {
    width: 100%;
    font-size: 0.6rem;
    color: var(--ews-muted);
}

.ews-sd-legend {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.ews-sd-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--ews-muted);
}

.ews-sd-legend-swatch {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.5);
}

/* Compact per-gauge alert roster (one line each) */
.ews-sd-roster {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--ews-border);
    border-radius: 6px;
    background: var(--ews-bg, #0f172a);
    padding: 4px;
}

.ews-sd-roster-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "badge name stage"
        "why why why";
    column-gap: 6px;
    row-gap: 1px;
    align-items: center;
    padding: 4px 5px;
    border-radius: 4px;
    border-left: 3px solid var(--ews-posture-monitor, #2f80ed);
    background: rgba(15, 23, 42, 0.55);
}

.ews-sd-roster-row--prepare {
    border-left-color: var(--ews-posture-prepare, #f2c94c);
}

.ews-sd-roster-row--escalate {
    border-left-color: var(--ews-posture-escalate, #f2994a);
}

.ews-sd-roster-row--act-now,
.ews-sd-roster-row--act_now {
    border-left-color: var(--ews-posture-act-now, #eb5757);
}

.ews-sd-roster-row--above-flood {
    border-left-color: #ef4444;
    background: rgba(127, 29, 29, 0.25);
}

.ews-sd-roster-row--alerting {
    background: rgba(30, 41, 59, 0.9);
}

.ews-sd-roster .ews-sd-alert-badge {
    grid-area: badge;
}

.ews-sd-roster-name {
    grid-area: name;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ews-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.ews-sd-roster-stage {
    grid-area: stage;
    font-size: 0.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ews-text);
    white-space: nowrap;
}

.ews-sd-roster-why {
    grid-area: why;
    font-size: 0.58rem;
    color: var(--ews-muted);
    line-height: 1.25;
    padding-left: 2px;
}

/* Per-dial alert badge + why */
.ews-sd-cell-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 2px;
}

.ews-sd-cell-top .ews-sd-site {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.ews-sd-alert-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.35;
    color: #0f172a;
    background: var(--ews-alert-color, #2f80ed);
    text-transform: none;
    white-space: nowrap;
}

.ews-sd-alert-badge--monitor {
    color: #f8fafc;
}

.ews-sd-alert-badge--prepare {
    color: #0f172a;
}

.ews-sd-alert-badge--escalate,
.ews-sd-alert-badge--act-now {
    color: #0f172a;
}

.ews-sd-alert-badge--act-now {
    color: #fff;
}

.ews-sd-alert-why {
    margin: 0 0 4px;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fde68a;
    text-align: left;
}

.ews-sd-cell--monitor .ews-sd-alert-why {
    color: var(--ews-muted);
}

/* Vertical list of dials — one per row, fits sidebar border */
.ews-sd-stack {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.ews-sd-stack .ews-sd-cell,
.ews-sd-cell {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 6px 8px !important;
    vertical-align: top;
    border: 1px solid var(--ews-border) !important;
    border-radius: 6px;
    background: var(--ews-bg, #0f172a) !important;
    text-align: center;
    line-height: 1.2;
}

/* Legacy 2×2 matrix (if used elsewhere) */
.ews-sd-matrix {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100% !important;
    max-width: 100%;
    margin: 0;
    background: transparent;
    font-size: 0.7rem;
}

.ews-sd-matrix td,
.ews-sd-matrix .ews-sd-cell {
    width: 50%;
    max-width: 50%;
}

.ews-sd-matrix th {
    display: none;
}

.ews-sd-cell--driver {
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.4);
}

/* Cell border = map gauge posture palette (same as dial arc / map markers) */
.ews-sd-cell--monitor {
    border-color: var(--ews-posture-monitor, #2f80ed) !important;
}

.ews-sd-cell--prepare {
    border-color: var(--ews-posture-prepare, #f2c94c) !important;
}

.ews-sd-cell--escalate {
    border-color: var(--ews-posture-escalate, #f2994a) !important;
}

.ews-sd-cell--act-now {
    border-color: var(--ews-posture-act-now, #eb5757) !important;
    box-shadow: inset 0 0 0 1px rgba(235, 87, 87, 0.45);
}

/* Above verified flood stage: keep hard red reading cue (not posture arc alone) */
.ews-sd-cell--flood,
.ews-sd-cell--above-flood {
    border-color: #ef4444 !important;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.55);
    background: #1c1010 !important;
}

/* Legacy stage-position classes (if any residual markup) */
.ews-sd-cell--near {
    border-color: var(--ews-posture-escalate, #f2994a) !important;
}

.ews-sd-cell--elevated {
    border-color: var(--ews-posture-prepare, #f2c94c) !important;
}

.ews-sd-stage--flood {
    color: #ef4444 !important;
}

.ews-sd-flood-flag {
    display: inline-block;
    margin-left: 3px;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    background: #ef4444;
    vertical-align: middle;
}

.ews-sd-cell--empty {
    background: transparent;
    border-style: dashed;
    opacity: 0.35;
}

.ews-sd-site {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ews-text);
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.25;
    min-height: 1.4em;
    max-height: 3.9em;
    margin: 0 auto 4px;
    max-width: 100%;
    word-break: break-word;
    hyphens: auto;
}

.ews-sd-svg {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    aspect-ratio: 120 / 70;
    margin: 0 auto 2px;
    overflow: visible;
}

.ews-sd-svg-label {
    fill: #e2e8f0;
    font-size: 8px;
    font-weight: 700;
    font-family: var(--ews-font-family), system-ui, sans-serif;
}

.ews-sd-reading {
    margin-top: -2px;
    line-height: 1.1;
    color: var(--ews-text);
    font-variant-numeric: tabular-nums;
}

.ews-sd-stage {
    font-size: 0.85rem;
    font-weight: 700;
}

.ews-sd-unit {
    font-size: 0.58rem;
    color: var(--ews-muted);
    font-weight: 600;
    margin-left: 1px;
}

.ews-sd-pct {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.58rem;
    font-weight: 700;
    color: #7dd3fc;
}

/* Flood stage in feet — primary for IC (not only % FS) */
.ews-sd-fs-line {
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 600;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.ews-sd-fs-line strong {
    font-weight: 800;
    color: #fde68a;
}

.ews-sd-fs-line--prov {
    color: var(--ews-muted);
    font-weight: 600;
}

.ews-sd-scale-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: 2px;
    font-size: 0.58rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
    line-height: 1.15;
}

.ews-sd-lo {
    text-align: left;
}

.ews-sd-hi {
    text-align: right;
}

.ews-sd-meta {
    margin-top: 1px;
    font-size: 0.52rem;
    color: var(--ews-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== Dark theme (COP default when EWS_DASHBOARD_DARK_THEME=1) ========== */

.ews-theme-dark,
html[data-theme="dark"] body.ews-dashboard-body {
    color-scheme: dark;
    --ews-bg: #0f172a;
    --ews-surface: #1e293b;
    --ews-surface-raised: #273449;
    --ews-text: #e2e8f0;
    --ews-text-secondary: #cbd5e1;
    --ews-muted: #94a3b8;
    --ews-border: #334155;
    --ews-header-bg: #020617;
    --ews-header-text-muted: #94a3b8;
    --ews-header-link: #7dd3fc;
    --ews-link: #38bdf8;
    --ews-table-header-bg: #0f172a;
    --ews-table-header-text: #cbd5e1;
    --ews-row-provisional-bg: rgba(234, 179, 8, 0.12);
    --ews-row-degraded-bg: rgba(249, 115, 22, 0.12);
    --ews-detail-summary-bg: #0f172a;
    --ews-detail-summary-text: #e2e8f0;
    --ews-basin-banner-bg: #0c241c;
    --ews-basin-banner-text: #86efac;
    --ews-basin-banner-border: #22c55e;
    --ews-basin-banner-concern-bg: #2a1218;
    --ews-basin-banner-concern-border: #f87171;
    --ews-cta-bg: #0284c7;
    --ews-cta-text: #ffffff;
    --ews-map-btn-primary-bg: #0c4a6e;
    --ews-map-btn-primary-text: #e0f2fe;
    --ews-install-banner-bg: #0f172a;
    --ews-install-banner-text: #e2e8f0;
    --ews-install-banner-border: #334155;
    --ews-install-btn-bg: #f59e0b;
    --ews-install-btn-text: #0f172a;
    --ews-install-dismiss-text: #94a3b8;
    --ews-panel-monitor-bg: #0c1a2e;
    --ews-panel-prepare-bg: #1c1910;
    --ews-panel-escalate-bg: #1c1410;
    --ews-panel-act-now-bg: #1c1010;
    --ews-eval-bg: #0c1929;
    --ews-eval-border: #38bdf8;
    --ews-outlook-elevated-bg: #1e1b2e;
    --ews-outlook-high-bg: #2a1218;
    --ews-marfc-bg: #0c1f28;
    --ews-marfc-text: #67e8f9;
    --ews-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35);
    --ews-shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.45);
    --ews-badge-display-bg: #1e293b;
    --ews-badge-display-text: #94a3b8;
    --ews-badge-display-border: #475569;
}

.ews-theme-dark .card,
.ews-theme-dark .section,
.ews-theme-dark .metric,
.ews-theme-dark table,
html[data-theme="dark"] .card,
html[data-theme="dark"] .section,
html[data-theme="dark"] .metric {
    background: var(--ews-surface);
    color: var(--ews-text);
    border-color: var(--ews-border);
}

/* Flood expand blocks stay transparent so nested panels own the surface */
.ews-theme-dark .ews-flood-detail.section,
html[data-theme="dark"] .ews-flood-detail.section {
    background: transparent;
    box-shadow: none;
}

.ews-theme-dark table th,
html[data-theme="dark"] table th,
.ews-theme-dark .ews-flood-detail table th,
html[data-theme="dark"] .ews-flood-detail table th {
    background: var(--ews-table-header-bg);
    color: var(--ews-table-header-text);
}

/* Dark posture panels (override light hardcodes in operator_posture_styles) */
.ews-theme-dark .posture-monitor,
html[data-theme="dark"] .posture-monitor {
    background: var(--ews-panel-monitor-bg);
    color: var(--ews-text);
}

.ews-theme-dark .posture-prepare,
html[data-theme="dark"] .posture-prepare {
    background: var(--ews-panel-prepare-bg);
    color: var(--ews-text);
}

.ews-theme-dark .posture-escalate,
html[data-theme="dark"] .posture-escalate {
    background: var(--ews-panel-escalate-bg);
    color: var(--ews-text);
}

.ews-theme-dark .posture-act-now,
html[data-theme="dark"] .posture-act-now {
    background: var(--ews-panel-act-now-bg);
    color: var(--ews-text);
}

/* PWA map controls + install banner (dark ops theme)
   Explicit hex on interactive controls so color-scheme:dark UA styles
   and light-on-light fallbacks cannot win. */
.ews-theme-dark .map-control-btn,
html[data-theme="dark"] .map-control-btn,
.ews-theme-dark button.map-control-btn,
html[data-theme="dark"] button.map-control-btn {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

.ews-theme-dark .map-control-btn-primary,
html[data-theme="dark"] .map-control-btn-primary,
.ews-theme-dark button.map-control-btn-primary,
html[data-theme="dark"] button.map-control-btn-primary {
    background: #0c4a6e;
    border-color: #38bdf8;
    color: #f0f9ff;
}

.ews-theme-dark .map-control-btn-layer[aria-pressed="true"],
html[data-theme="dark"] .map-control-btn-layer[aria-pressed="true"],
.ews-theme-dark button.map-control-btn-layer[aria-pressed="true"],
html[data-theme="dark"] button.map-control-btn-layer[aria-pressed="true"] {
    background: #164e63;
    border-color: #22d3ee;
    color: #ecfeff;
}

.ews-theme-dark .map-control-btn-layer[aria-pressed="false"],
html[data-theme="dark"] .map-control-btn-layer[aria-pressed="false"],
.ews-theme-dark button.map-control-btn-layer.map-control-btn--layer-off,
html[data-theme="dark"] button.map-control-btn-layer.map-control-btn--layer-off {
    background: #1e293b;
    border-color: #64748b;
    border-style: dashed;
    color: #94a3b8;
    opacity: 0.9;
}

/* Outlook primary must stay rose/white — not the blue primary override above. */
.ews-theme-dark .map-control-btn-outlook.map-control-btn-primary,
html[data-theme="dark"] .map-control-btn-outlook.map-control-btn-primary,
.ews-theme-dark button.map-control-btn-outlook.map-control-btn-primary,
html[data-theme="dark"] button.map-control-btn-outlook.map-control-btn-primary {
    background: #e11d48;
    border-color: #fb7185;
    color: #ffffff;
}

.ews-theme-dark .map-control-btn-outlook:not(.map-control-btn-primary),
html[data-theme="dark"] .map-control-btn-outlook:not(.map-control-btn-primary) {
    background: #1e293b;
    border-color: #fb7185;
    color: #fda4af;
}

.ews-theme-dark .ews-pwa-mini-map-card.ews-pwa-mini-map--fullscreen .ews-pwa-mini-map-fullscreen-btn,
html[data-theme="dark"] .ews-pwa-mini-map-card.ews-pwa-mini-map--fullscreen .ews-pwa-mini-map-fullscreen-btn {
    background: #0c4a6e;
    border-color: #38bdf8;
    color: #f0f9ff;
}

.ews-theme-dark .ews-pwa-install-banner,
.ews-theme-dark .pwa-install-banner,
html[data-theme="dark"] .ews-pwa-install-banner,
html[data-theme="dark"] .pwa-install-banner {
    background: #0f172a;
    color: #f8fafc;
    border-color: #334155;
}

.ews-theme-dark .pwa-install-button,
.ews-theme-dark .notify-enable-button,
html[data-theme="dark"] .pwa-install-button,
html[data-theme="dark"] .notify-enable-button,
.ews-theme-dark button.pwa-install-button,
.ews-theme-dark button.notify-enable-button,
html[data-theme="dark"] button.pwa-install-button,
html[data-theme="dark"] button.notify-enable-button {
    /* Amber on near-black text — readable; avoid cyan-on-cyan with link color. */
    background: #f59e0b;
    color: #0f172a;
}

.ews-theme-dark .pwa-install-dismiss,
html[data-theme="dark"] .pwa-install-dismiss,
.ews-theme-dark button.pwa-install-dismiss,
html[data-theme="dark"] button.pwa-install-dismiss {
    background: transparent;
    color: #e2e8f0;
    border-color: #64748b;
}

.ews-theme-dark .ews-pwa-location-label,
html[data-theme="dark"] .ews-pwa-location-label {
    color: var(--ews-muted);
}

.ews-theme-dark .ews-pwa-location-select,
.ews-theme-dark .ews-pwa-location-input,
html[data-theme="dark"] .ews-pwa-location-select,
html[data-theme="dark"] .ews-pwa-location-input {
    background: var(--ews-surface);
    border-color: var(--ews-border);
    color: var(--ews-text);
}

.ews-theme-dark .ews-pwa-location-status,
html[data-theme="dark"] .ews-pwa-location-status {
    color: var(--ews-muted);
}

.ews-theme-dark table td,
html[data-theme="dark"] table td {
    border-color: var(--ews-border);
}

.ews-theme-dark a,
html[data-theme="dark"] a {
    color: var(--ews-link);
}

/* Primary CTA is an <a> — must beat generic dark-theme link color or text
   becomes cyan-on-cyan (invisible) on the Operator PWA Flood COP button. */
.ews-theme-dark a.ews-primary-cta,
.ews-theme-dark a.cop-primary-button,
html[data-theme="dark"] a.ews-primary-cta,
html[data-theme="dark"] a.cop-primary-button,
.ews-theme-dark a.ews-primary-cta:link,
.ews-theme-dark a.cop-primary-button:link,
html[data-theme="dark"] a.ews-primary-cta:link,
html[data-theme="dark"] a.cop-primary-button:link,
.ews-theme-dark a.ews-primary-cta:visited,
.ews-theme-dark a.cop-primary-button:visited,
html[data-theme="dark"] a.ews-primary-cta:visited,
html[data-theme="dark"] a.cop-primary-button:visited,
.ews-theme-dark a.ews-primary-cta:hover,
.ews-theme-dark a.cop-primary-button:hover,
html[data-theme="dark"] a.ews-primary-cta:hover,
html[data-theme="dark"] a.cop-primary-button:hover,
.ews-theme-dark a.ews-primary-cta:focus,
.ews-theme-dark a.cop-primary-button:focus,
html[data-theme="dark"] a.ews-primary-cta:focus,
html[data-theme="dark"] a.cop-primary-button:focus,
.ews-theme-dark a.ews-primary-cta:active,
.ews-theme-dark a.cop-primary-button:active,
html[data-theme="dark"] a.ews-primary-cta:active,
html[data-theme="dark"] a.cop-primary-button:active {
    background: #0284c7;
    color: #ffffff;
    border-color: #0369a1;
    text-decoration: none;
}

/* Operator alert panel: light pastels + inherited light body text = unreadable.
   Force dark surfaces and high-contrast action buttons. */
.ews-theme-dark .operator-alert-panel,
.ews-theme-dark .operator-alert-map-popup,
html[data-theme="dark"] .operator-alert-panel,
html[data-theme="dark"] .operator-alert-map-popup {
    background: #0f172a;
    border-color: #475569;
    color: #e2e8f0;
}

.ews-theme-dark .operator-alert-panel.operator-alert-prepare,
html[data-theme="dark"] .operator-alert-panel.operator-alert-prepare {
    background: #1c1910;
    border-color: #f2c94c;
}

.ews-theme-dark .operator-alert-panel.operator-alert-escalate,
html[data-theme="dark"] .operator-alert-panel.operator-alert-escalate {
    background: #1c1410;
    border-color: #f2994a;
}

.ews-theme-dark .operator-alert-panel.operator-alert-act-now,
html[data-theme="dark"] .operator-alert-panel.operator-alert-act-now {
    background: #1c1010;
    border-color: #eb5757;
}

.ews-theme-dark .operator-alert-panel.operator-alert-acked,
html[data-theme="dark"] .operator-alert-panel.operator-alert-acked {
    background: #0c1f17;
    border-color: #27ae60;
}

.ews-theme-dark .operator-alert-kicker,
html[data-theme="dark"] .operator-alert-kicker {
    color: #94a3b8;
}

.ews-theme-dark .operator-alert-cause,
html[data-theme="dark"] .operator-alert-cause {
    background: rgba(15, 23, 42, 0.65);
    border-color: rgba(148, 163, 184, 0.35);
}

.ews-theme-dark .operator-alert-cause-kicker,
html[data-theme="dark"] .operator-alert-cause-kicker {
    color: #94a3b8;
}

.ews-theme-dark .operator-alert-cause-headline,
html[data-theme="dark"] .operator-alert-cause-headline {
    color: #f8fafc;
}

.ews-theme-dark .operator-alert-cause-list,
html[data-theme="dark"] .operator-alert-cause-list {
    color: #cbd5e1;
}

.ews-theme-dark .operator-alert-level,
html[data-theme="dark"] .operator-alert-level {
    color: #f8fafc;
}

.ews-theme-dark .operator-alert-status,
.ews-theme-dark .operator-alert-audio-note,
html[data-theme="dark"] .operator-alert-status,
html[data-theme="dark"] .operator-alert-audio-note {
    color: #cbd5e1;
}

.ews-theme-dark .operator-alert-timestamps,
html[data-theme="dark"] .operator-alert-timestamps {
    background: rgba(15, 23, 42, 0.72);
}

.ews-theme-dark .operator-alert-timestamps dt,
html[data-theme="dark"] .operator-alert-timestamps dt {
    color: #94a3b8;
}

.ews-theme-dark .operator-alert-timestamps dd,
html[data-theme="dark"] .operator-alert-timestamps dd {
    color: #f1f5f9;
}

.ews-theme-dark .operator-alert-enable-button,
html[data-theme="dark"] .operator-alert-enable-button,
.ews-theme-dark button.operator-alert-enable-button,
html[data-theme="dark"] button.operator-alert-enable-button {
    background: #f2c94c;
    color: #0f172a;
}

.ews-theme-dark .operator-alert-escalate .operator-alert-enable-button,
html[data-theme="dark"] .operator-alert-escalate .operator-alert-enable-button {
    background: #f2994a;
    color: #0f172a;
}

.ews-theme-dark .operator-alert-act-now .operator-alert-enable-button,
html[data-theme="dark"] .operator-alert-act-now .operator-alert-enable-button {
    background: #eb5757;
    color: #ffffff;
}

.ews-theme-dark .operator-alert-ack-button,
html[data-theme="dark"] .operator-alert-ack-button,
.ews-theme-dark button.operator-alert-ack-button,
html[data-theme="dark"] button.operator-alert-ack-button {
    background: #0369a1;
    color: #ffffff;
}

.ews-theme-dark .operator-alert-prepare .operator-alert-ack-button,
html[data-theme="dark"] .operator-alert-prepare .operator-alert-ack-button {
    background: #a16207;
    color: #ffffff;
}

.ews-theme-dark .operator-alert-escalate .operator-alert-ack-button,
html[data-theme="dark"] .operator-alert-escalate .operator-alert-ack-button {
    background: #c2410c;
    color: #ffffff;
}

.ews-theme-dark .operator-alert-act-now .operator-alert-ack-button,
html[data-theme="dark"] .operator-alert-act-now .operator-alert-ack-button {
    background: #b91c1c;
    color: #ffffff;
}

.ews-theme-dark .operator-alert-ack-button:disabled,
html[data-theme="dark"] .operator-alert-ack-button:disabled {
    background: #15803d;
    color: #ffffff;
}

/* High-watch scheduler panel/buttons (partials use light inline CSS — override here). */
.ews-theme-dark .scheduler-status-panel,
html[data-theme="dark"] .scheduler-status-panel,
.ews-theme-dark #weather-high-watch-section .scheduler-status-panel,
html[data-theme="dark"] #weather-high-watch-section .scheduler-status-panel {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

.ews-theme-dark .scheduler-action-button,
html[data-theme="dark"] .scheduler-action-button,
.ews-theme-dark #weather-high-watch-section .scheduler-action-button,
html[data-theme="dark"] #weather-high-watch-section .scheduler-action-button {
    background: #0f172a;
    border-color: #64748b;
    color: #f1f5f9;
}

.ews-theme-dark .scheduler-action-button:hover,
html[data-theme="dark"] .scheduler-action-button:hover,
.ews-theme-dark #weather-high-watch-section .scheduler-action-button:hover,
html[data-theme="dark"] #weather-high-watch-section .scheduler-action-button:hover {
    background: #334155;
    color: #f8fafc;
}

.ews-theme-dark .scheduler-action-primary,
html[data-theme="dark"] .scheduler-action-primary,
.ews-theme-dark #weather-high-watch-section .scheduler-action-primary,
html[data-theme="dark"] #weather-high-watch-section .scheduler-action-primary {
    background: #0c4a6e;
    border-color: #38bdf8;
    color: #f0f9ff;
}

.ews-theme-dark .scheduler-action-result,
.ews-theme-dark .scheduler-last-action,
html[data-theme="dark"] .scheduler-action-result,
html[data-theme="dark"] .scheduler-last-action,
.ews-theme-dark #weather-high-watch-section .scheduler-action-result,
.ews-theme-dark #weather-high-watch-section .scheduler-last-action,
html[data-theme="dark"] #weather-high-watch-section .scheduler-action-result,
html[data-theme="dark"] #weather-high-watch-section .scheduler-last-action {
    color: #cbd5e1;
}

.ews-theme-dark .scheduler-status-running,
html[data-theme="dark"] .scheduler-status-running {
    color: #7dd3fc;
}

.ews-theme-dark .scheduler-status-stopped,
html[data-theme="dark"] .scheduler-status-stopped {
    color: #fdba74;
}

.ews-theme-dark .ews-sd,
html[data-theme="dark"] .ews-sd {
    background: var(--ews-surface);
    border-color: var(--ews-border);
}

.ews-theme-dark .ews-sd-cell,
html[data-theme="dark"] .ews-sd-cell {
    background: #0f172a;
    border-color: var(--ews-border);
}

.ews-theme-dark .ews-sd-scale-row,
.ews-theme-dark .ews-sd-svg-label,
html[data-theme="dark"] .ews-sd-scale-row {
    color: #e2e8f0;
    fill: #e2e8f0;
}

/* ========== SA Assistant panel ========== */

.ews-shell-main {
    position: relative;
}

@media (min-width: 1024px) {
    body.ews-dashboard-body:has(.ews-sa-panel:not(.ews-sa-panel--collapsed)) .ews-shell-main {
        margin-right: min(420px, 36vw);
    }
}

.ews-sa-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1200;
    width: min(420px, 100vw);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ews-surface);
    color: var(--ews-text);
    border-left: 1px solid var(--ews-border);
    box-shadow: var(--ews-shadow-elevated);
}

.ews-sa-panel--collapsed {
    /* Fit the Expand control fully on-screen (was 48px and clipped) */
    width: auto;
    min-width: 44px;
    max-width: calc(100vw - 24px - env(safe-area-inset-right, 0px) - env(safe-area-inset-left, 0px));
    height: auto;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    left: auto;
    border-radius: var(--ews-radius-md);
    border: 1px solid var(--ews-border);
    overflow: visible;
    box-sizing: border-box;
}

.ews-sa-panel--collapsed .ews-sa-panel-title-row,
.ews-sa-panel--collapsed .ews-sa-body {
    display: none;
}

.ews-sa-panel--collapsed .ews-sa-panel-header {
    padding: 6px 8px;
    justify-content: center;
    gap: 0;
    background: var(--ews-header-bg, #1f2933);
}

.ews-sa-panel--collapsed .ews-sa-toggle {
    white-space: nowrap;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 14px;
    font-weight: 700;
}

.ews-sa-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    background: var(--ews-header-bg);
    color: #fff;
    box-sizing: border-box;
}

.ews-sa-panel-title {
    font-size: 0.95rem;
}

.ews-sa-status {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--ews-radius-pill);
    background: #334155;
}

.ews-sa-status--online {
    background: #166534;
}

.ews-sa-status--offline,
.ews-sa-status--checking {
    background: #7c2d12;
}

.ews-sa-toggle,
.ews-sa-send,
.ews-sa-chip,
.ews-sa-fab {
    font: inherit;
    cursor: pointer;
    border-radius: var(--ews-radius-sm);
    border: 1px solid var(--ews-border);
    min-height: 44px;
}

.ews-sa-toggle {
    background: transparent;
    color: #e2e8f0;
    border-color: #475569;
    padding: 6px 10px;
    min-height: 36px;
}

.ews-sa-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 12px 12px;
}

.ews-sa-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px 12px;
    min-height: 180px;
}

.ews-sa-msg {
    padding: 10px 12px;
    border-radius: var(--ews-radius-md);
    font-size: var(--ews-font-size-body);
    line-height: 1.4;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
}

.ews-sa-msg--user {
    align-self: flex-end;
    background: #0ea5e9;
    color: #0f172a;
}

.ews-sa-msg--assistant {
    align-self: stretch;
    background: var(--ews-bg);
    border: 1px solid var(--ews-border);
}

.ews-sa-msg--system {
    align-self: stretch;
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
    background: transparent;
    border: 1px dashed var(--ews-border);
}

.ews-sa-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.ews-sa-chip {
    background: var(--ews-bg);
    color: var(--ews-text);
    padding: 6px 10px;
    min-height: 36px;
    font-size: 0.75rem;
}

.ews-sa-chip:hover {
    border-color: #0ea5e9;
}

/* ICS form popup chips — distinct from AI chat chips */
.ews-sa-chip--form {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    color: #fde68a;
    font-weight: 600;
}

.ews-sa-chip--form:hover {
    border-color: #fbbf24;
    background: rgba(245, 158, 11, 0.22);
}

a.ews-sa-chip--link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-style: dashed;
    color: #93c5fd;
}

a.ews-sa-chip--link:hover {
    border-color: #60a5fa;
    color: #bfdbfe;
}

.ews-sa-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ews-sa-label {
    font-size: var(--ews-font-size-caption);
    color: var(--ews-muted);
}

.ews-sa-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-height: 56px;
    padding: 10px;
    border-radius: var(--ews-radius-sm);
    border: 1px solid var(--ews-border);
    background: var(--ews-bg);
    color: var(--ews-text);
    font: inherit;
}

.ews-sa-send {
    background: #0ea5e9;
    color: #0f172a;
    border: none;
    font-weight: 700;
    padding: 10px 14px;
}

.ews-sa-send:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ews-sa-footer {
    margin: 8px 0 0;
    font-size: 0.7rem;
    color: var(--ews-muted);
    line-height: 1.35;
}

.ews-sa-fab {
    display: none;
    position: fixed;
    /* Fully inside viewport including iOS home indicator / notches */
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    left: auto;
    z-index: 1190;
    background: #0ea5e9;
    color: #0f172a;
    border: none;
    font-weight: 700;
    padding: 12px 16px;
    box-shadow: var(--ews-shadow-elevated);
    max-width: calc(100vw - 32px - env(safe-area-inset-right, 0px) - env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    white-space: nowrap;
}

@media (max-width: 1023px) {
    .ews-sa-panel {
        transform: translateX(105%);
        transition: transform 0.2s ease;
        width: min(100vw, 420px);
        max-width: 100vw;
        right: 0;
        box-sizing: border-box;
    }

    .ews-sa-panel--mobile-open {
        transform: translateX(0);
    }

    /* On mobile, collapsed panel is off-canvas; FAB is the open control */
    .ews-sa-panel--collapsed {
        transform: translateX(105%);
        width: min(100vw, 420px);
        max-width: 100vw;
        height: 100vh;
        top: 0;
        right: 0;
        border-radius: 0;
    }

    .ews-sa-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* Sit above event-checklist chip so both stay fully visible */
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        right: max(16px, env(safe-area-inset-right, 0px));
    }

    body.ews-sa-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.55);
        z-index: 1100;
    }
}

/* ========== Flood COP one-page IC glance ========== */

/* Large map right; most-urgent dials left, tops aligned with map *canvas* (not chips). */

.ews-flood-cop-onepage .ews-flood-cop-main {
    max-width: 1400px;
    margin: 0 auto;
}

.ews-flood-glance {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/*
 * Dials | map in normal document flow (not sticky) so drill-down details sit
 * cleanly *below* the map, not under Leaflet's stacking context.
 * JS (flood_glance_align.js) pads dials so the first dial lines up with
 * .map-stage (canvas), not the title/chips above the map.
 */
.ews-flood-glance-body {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 12px 14px;
    align-items: start;
    position: relative;
    z-index: 0;
}

.ews-flood-glance-dials {
    min-width: 0;
    align-self: start;
}

.ews-flood-glance-dials .ews-sd {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    max-height: none;
    overflow: visible;
    height: auto;
}

.ews-flood-glance-dials .ews-sd-stack {
    width: 100%;
    gap: 10px;
}

.ews-flood-glance-dials .ews-sd-svg {
    display: block;
    width: 100%;
    max-width: 168px;
    height: auto;
    margin: 0 auto;
}

.ews-flood-glance-map {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: start;
    /* Contain Leaflet pane z-index so it cannot paint over drill-downs below */
    position: relative;
    z-index: 0;
    isolation: isolate;
}

.ews-flood-glance-map .map-section,
.ews-flood-glance-map .ews-map-section--primary {
    margin-top: 0;
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden; /* clip any leaflet overflow outside map box */
}

/* Large map canvas (chips stay visible above it as normal map chrome) */
.ews-flood-cop-onepage .ews-flood-glance-map .focus-area-map,
.ews-flood-cop-onepage .ews-map-section--primary .focus-area-map {
    width: 100%;
    min-height: min(70vh, 720px);
    height: min(70vh, 720px);
}

@media (max-width: 960px) {
    .ews-flood-glance-body {
        grid-template-columns: 1fr;
    }

    .ews-flood-glance-dials {
        order: 2;
        align-self: stretch;
        padding-top: 0 !important; /* cancel JS pad on stacked layout */
    }

    .ews-flood-glance-map {
        order: 1;
    }

    .ews-flood-cop-onepage .ews-flood-glance-map .focus-area-map,
    .ews-flood-cop-onepage .ews-map-section--primary .focus-area-map {
        min-height: min(45vh, 440px);
        height: min(45vh, 440px);
    }

    .ews-flood-glance-dials .ews-sd {
        max-height: none;
        overflow: visible;
    }
}

/* —— Practice historical precip (display-only archive daily) —— */
.ews-practice-precip {
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #0e7490;
    background: linear-gradient(180deg, rgba(14, 116, 144, 0.16), rgba(15, 23, 42, 0.55));
}

.ews-practice-precip-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    margin-bottom: 4px;
}

.ews-practice-precip-title {
    font-size: 0.95rem;
}

.ews-practice-precip-meta,
.ews-practice-precip-charter,
.ews-practice-precip-foot,
.ews-practice-precip-empty {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--ews-muted, #94a3b8);
    margin: 0 0 6px;
}

.ews-practice-precip-wettest {
    margin: 0 0 8px;
    font-size: 0.88rem;
}

.ews-practice-precip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.ews-practice-precip-table th,
.ews-practice-precip-table td {
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    padding: 4px 6px;
    text-align: left;
}

.ews-practice-precip-table th {
    color: #94a3b8;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* —— Local operational impact knowledge (Tim / SME journal; additive only) —— */
.ews-local-impacts--strip {
    margin: 0 0 4px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #b45309;
    background: linear-gradient(180deg, rgba(180, 83, 9, 0.18), rgba(15, 23, 42, 0.6));
}

.ews-local-impacts-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    margin-bottom: 4px;
}

.ews-local-impacts-title {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.ews-local-impacts-meta {
    font-size: 0.8rem;
    color: var(--ews-muted, #94a3b8);
}

.ews-local-impacts-charter,
.ews-local-impacts-foot {
    margin: 0 0 8px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--ews-muted, #94a3b8);
}

.ews-local-impacts-foot {
    margin: 8px 0 0;
}

.ews-local-impacts-flags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ews-local-impacts-flag {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.55);
    border-left: 3px solid #f59e0b;
    font-size: 0.85rem;
    line-height: 1.3;
}

.ews-local-impacts-flag.ews-local-sev--critical {
    border-left-color: #ef4444;
}

.ews-local-impacts-flag.ews-local-sev--warning {
    border-left-color: #f97316;
}

.ews-local-impacts-flag.ews-local-sev--watch {
    border-left-color: #eab308;
}

.ews-local-impacts-flag.ews-local-sev--awareness {
    border-left-color: #38bdf8;
}

.ews-local-impacts-site {
    font-weight: 700;
}

.ews-local-impacts-stage {
    font-variant-numeric: tabular-nums;
    color: var(--ews-muted, #94a3b8);
}

.ews-local-impacts-summary {
    flex: 1 1 12rem;
}

.ews-local-impacts-locs {
    font-size: 0.78rem;
    color: #cbd5e1;
}

.ews-local-impacts-source {
    font-size: 0.72rem;
    color: var(--ews-muted, #64748b);
    white-space: nowrap;
}

.ews-local-impacts-hints {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ews-local-impacts-hint {
    font-size: 0.78rem;
    color: #cbd5e1;
    padding-left: 10px;
    border-left: 2px solid #64748b;
}

.ews-local-sev {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid transparent;
    vertical-align: middle;
}

.ews-local-sev--awareness {
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
    border-color: #38bdf8;
}

.ews-local-sev--watch {
    background: rgba(234, 179, 8, 0.18);
    color: #fde047;
    border-color: #eab308;
}

.ews-local-sev--warning {
    background: rgba(249, 115, 22, 0.2);
    color: #fdba74;
    border-color: #f97316;
}

.ews-local-sev--critical {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
    border-color: #ef4444;
}

.ews-local-impacts--detail .ews-local-impacts-table {
    width: 100%;
    border-collapse: collapse;
}

.ews-local-impacts-row--active {
    background: rgba(180, 83, 9, 0.12);
}

.ews-local-impacts-cell {
    max-width: 18rem;
    font-size: 0.85rem;
    line-height: 1.3;
}

.ews-local-impacts-source-cell {
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--ews-muted, #94a3b8);
}

.ews-sd-local {
    margin: 4px 0 0;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    line-height: 1.25;
    background: rgba(180, 83, 9, 0.15);
    border-left: 2px solid #f59e0b;
    color: #fde68a;
}

.ews-sd-local--critical {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
}

.ews-sd-local--warning {
    border-left-color: #f97316;
}

.ews-sd-local--watch {
    border-left-color: #eab308;
}

.ews-sd-local--next {
    border-left-color: #64748b;
    background: rgba(100, 116, 139, 0.15);
    color: #cbd5e1;
}

.ews-sd-local-kicker {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 4px;
    opacity: 0.9;
}

.ews-flood-drilldowns {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--ews-border, #334155);
    /* Sit above any residual map stacking; clear document flow below glance */
    position: relative;
    z-index: 1;
    clear: both;
    background: var(--ews-bg, #0f172a);
}

.ews-flood-drilldowns-heading {
    margin: 0 0 4px;
    font-size: 1rem;
}

.ews-flood-drilldowns-note {
    margin: 0 0 12px;
}

.ews-flood-drill {
    margin: 0 0 8px;
    border: 1px solid var(--ews-border, #334155);
    border-radius: 8px;
    background: var(--ews-surface, #1e293b);
    padding: 0 12px 8px;
}

.ews-flood-drill > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.9rem;
    min-height: 44px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 10px 0;
}

.ews-flood-drill > summary::-webkit-details-marker {
    display: none;
}

.ews-flood-drill > summary::before {
    content: "▸";
    color: var(--ews-muted, #94a3b8);
    margin-right: 4px;
}

.ews-flood-drill[open] > summary::before {
    content: "▾";
}

.ews-flood-drill .section {
    margin-top: 4px;
}

/* Nested full-posture panel: less visual noise when opened from glance */
.ews-flood-drill .posture-panel {
    box-shadow: none;
}

/* ========== Event-watch checklist (Prepare / Escalate / Act Now) ========== */

.ews-event-watch {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* Beat HTML [hidden] { display: none !important } so open always wins */
.ews-event-watch.ews-event-watch--open,
.ews-event-watch.ews-event-watch--open[hidden] {
    display: flex !important;
}

.ews-event-watch-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.62);
}

.ews-event-watch-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    max-height: min(88vh, 720px);
    overflow: auto;
    background: var(--ews-surface, #1e293b);
    color: var(--ews-text, #e2e8f0);
    border: 1px solid var(--ews-border, #334155);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    padding: 16px 18px 14px;
}

.ews-event-watch-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ews-event-watch-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fbbf24;
}

.ews-event-watch-header h2 {
    margin: 4px 0 0;
    font-size: 1.15rem;
}

.ews-event-watch-close {
    border: none;
    background: transparent;
    color: var(--ews-muted, #94a3b8);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}

.ews-event-watch-note {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--ews-muted, #94a3b8);
    line-height: 1.4;
}

.ews-event-watch-list {
    margin: 0 0 14px;
    padding-left: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.ews-event-watch-list label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.88rem;
    line-height: 1.35;
    cursor: pointer;
}

.ews-event-watch-list input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.ews-event-watch-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ews-event-watch-reopen {
    position: fixed;
    /* Stack above SA FAB (mobile) / clear of right edge */
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #f59e0b;
    background: #78350f;
    color: #fef3c7;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    max-width: calc(100vw - 32px - env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

.ews-event-watch-reopen:hover,
.ews-event-watch-reopen:focus {
    background: #92400e;
}

/* Desktop: SA collapsed pill is top-right; checklist bottom-right is fine lower */
@media (min-width: 1024px) {
    .ews-event-watch-reopen {
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        right: max(16px, env(safe-area-inset-right, 0px));
    }
}

/* —— Flood COP P0: exception rail + freshness chips —— */
.ews-exception-rail {
    margin: 0.5rem 0 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--ews-border, #334155);
    background: rgba(15, 23, 42, 0.55);
}
.ews-exception-rail--clear {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(20, 83, 45, 0.2);
}
.ews-exception-rail--watch {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(120, 53, 15, 0.22);
}
.ews-exception-rail--attention {
    border-color: rgba(239, 68, 68, 0.65);
    background: rgba(127, 29, 29, 0.28);
}
.ews-exception-rail-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: baseline;
    justify-content: space-between;
}
.ews-exception-rail-kicker {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fbbf24;
    margin-right: 0.4rem;
}
.ews-exception-rail-period {
    font-size: 0.85rem;
    opacity: 0.9;
}
.ews-exception-rail-note {
    margin: 0.35rem 0 0.5rem;
}
.ews-exception-rail-clear {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: #86efac;
}
.ews-exception-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ews-exception-item {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.45rem 0;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}
.ews-exception-item:first-child {
    border-top: none;
}
.ews-exception-sev {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    margin-top: 0.15rem;
}
.ews-exception-item--critical .ews-exception-sev {
    background: #7f1d1d;
    color: #fecaca;
}
.ews-exception-item--warning .ews-exception-sev {
    background: #78350f;
    color: #fde68a;
}
.ews-exception-item--info .ews-exception-sev {
    background: #1e3a5f;
    color: #bfdbfe;
}
.ews-exception-body {
    min-width: 0;
}
.ews-exception-title {
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ews-exception-detail {
    display: block;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 0.15rem;
}

.ews-fresh-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    vertical-align: middle;
    white-space: nowrap;
}
.ews-fresh-chip--current {
    background: rgba(22, 101, 52, 0.55);
    color: #bbf7d0;
    border: 1px solid rgba(74, 222, 128, 0.45);
}
.ews-fresh-chip--aging {
    background: rgba(133, 77, 14, 0.55);
    color: #fde68a;
    border: 1px solid rgba(251, 191, 36, 0.5);
}
.ews-fresh-chip--stale {
    background: rgba(127, 29, 29, 0.6);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.55);
}
.ews-fresh-chip--unknown,
.ews-fresh-chip--practice {
    background: rgba(51, 65, 85, 0.7);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.ews-sd-top-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: flex-end;
    align-items: center;
}
.ews-sd-cell--fresh-aging {
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.45);
}
.ews-sd-cell--fresh-stale {
    box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.55);
    opacity: 0.92;
}

/* —— IC Situation Brief (P1 compose) —— */
.ews-ic-brief {
    margin: 0.75rem 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--ews-border, #334155);
    background: rgba(15, 23, 42, 0.65);
}
.ews-ic-brief--compact {
    padding: 0.45rem 0.75rem;
    margin: 0.35rem 0 0.5rem;
}
.ews-ic-brief-compact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: center;
    font-size: 0.9rem;
}
.ews-ic-brief-compact-hot {
    color: #fde68a;
    font-weight: 600;
}
.ews-ic-brief-compact-more {
    margin-left: auto;
    font-size: 0.85rem;
}
.ews-ic-brief-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #93c5fd;
    margin-right: 0.35rem;
}
.ews-ic-brief-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}
.ews-ic-brief-title {
    margin: 0.15rem 0;
    font-size: 1.2rem;
}
.ews-ic-brief-posture {
    text-align: right;
}
.ews-ic-brief-posture-label {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}
.ews-ic-brief-h3 {
    font-size: 0.95rem;
    margin: 0.75rem 0 0.35rem;
}
.ews-ic-brief-eei-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}
.ews-ic-brief-eei-item {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: 0.15rem 0.75rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.5);
}
.ews-ic-brief-eei-item--hot {
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.45);
}
.ews-ic-brief-eei-label {
    font-size: 0.8rem;
    opacity: 0.85;
}
.ews-ic-brief-eei-value {
    font-weight: 600;
}
.ews-ic-brief-eei-detail {
    grid-column: 1 / -1;
}
.ews-ic-brief-decisions ul {
    margin: 0.25rem 0 0;
    padding-left: 1.2rem;
}
.ews-ic-brief-links {
    margin-top: 0.75rem;
}
.ews-lifeline-bar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ews-lifeline-chip {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
}
.ews-lifeline-chip--green {
    background: rgba(22, 101, 52, 0.4);
    color: #bbf7d0;
}
.ews-lifeline-chip--amber,
.ews-lifeline-chip--yellow {
    background: rgba(133, 77, 14, 0.45);
    color: #fde68a;
}
.ews-lifeline-chip--red {
    background: rgba(127, 29, 29, 0.5);
    color: #fecaca;
}
.ews-lifeline-level {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.68rem;
}
@media (max-width: 640px) {
    .ews-ic-brief-eei-item {
        grid-template-columns: 1fr;
    }
}