/* Copyright (c) 2025-2026 William Chesher | MIT License */
/* analyze - mission control layout */

/* ============================================
   Color tokens (chart-aware, theme-aware)
   Electric cyberpunk palette: cyan / magenta / violet / lime spectrum.
   ============================================ */
:root {
    /* Anomaly classification (renderTypes, parallel-axes labels, flow ribbons) */
    --anomaly-spike: #ff2d8e;
    --anomaly-level-shift: #ff6e00;
    --anomaly-drift: #fff200;
    --anomaly-flatline: #c000ff;
    --anomaly-contextual: #00e5ff;
    --anomaly-point: #39ff14;
    --anomaly-unclassified: #8a9bb5;

    /* Severity scale (cyber escalation: cyan -> violet -> pink -> hot magenta) */
    --severity-clear: #00d4ff;
    --severity-info: #b517ff;
    --severity-warning: #ff2d8e;
    --severity-critical: #ff0055;
    --severity-band-clear: rgba(0, 212, 255, 0.10);
    --severity-band-info: rgba(181, 23, 255, 0.10);
    --severity-band-warning: rgba(255, 45, 142, 0.12);
    --severity-band-critical: rgba(255, 0, 85, 0.14);

    /* Aliases for legacy consumers */
    --severity-green: var(--severity-clear);
    --severity-yellow: var(--severity-warning);
    --severity-red: var(--severity-critical);

    /* Status (renderEvents pill, renderBreakdown segments, renderFlow ribbons) */
    --status-new: #ff2d8e;
    --status-ongoing: #ff6e00;
    --status-resolved: #39ff14;
    --status-acknowledged: #00e5ff;
    --status-false-positive: #607d99;

    /* Insight type (renderEvents type pill, renderOverTime stacks) */
    --type-anomaly: #ff2d8e;
    --type-spatial-anomaly: #ff0080;
    --type-trend: #00e5ff;
    --type-forecast: #39ff14;
    --type-correlation: #c000ff;
    --type-pattern: #fff200;
    --type-pattern-match: #fff200;

    /* Feed-specific (renderForecast lines, renderParallel axes) */
    --feed-temperature: #ff2d8e;
    --feed-humidity: #00e5ff;
    --feed-pressure: #c000ff;
    --feed-pm-2-5: #ff6e00;
    --feed-pm-1-0: #ffaa00;
    --feed-pm-10-0: #ff0080;
    --feed-co2: #39ff14;
    --feed-voc: #00ffaa;
    --feed-light: #fff200;
    --feed-uv: #b517ff;
    --feed-aqi: #ff6e00;
    --feed-anomaly: #ff2d8e;
    --feed-default: #00e5ff;

    /* Mission-control surface tokens */
    --mc-nominal: var(--severity-clear);
    --mc-warning: var(--severity-warning);
    --mc-critical: var(--severity-critical);
    --mc-inactive: #4a5a75;
    --mc-surface: var(--bg-secondary, #f5f5f5);
    --mc-surface-raised: var(--bg-primary, #fff);
    --mc-border: var(--border-default, #e0e0e0);
    --mc-text: var(--text-primary, #333);
    --mc-text-muted: var(--text-muted, #888);
    --mc-mono: 'Roboto Mono', monospace;

    /* Card chrome */
    --mc-radius-card: 10px;
    --mc-glow: #00e5ff;
    --mc-glow-alt: #ff2d8e;
    --mc-elev-1: 0 1px 2px rgba(0, 0, 0, 0.06);
    --mc-elev-2: 0 0 0 1px rgba(0, 229, 255, 0.20), 0 6px 24px rgba(0, 229, 255, 0.18);
    --mc-axis: rgba(0, 0, 0, 0.20);
    --mc-axis-faint: rgba(0, 0, 0, 0.08);
}

/* Dark-theme: full saturation neons read best on the deep-blue surface */
html.dark-theme {
    --anomaly-spike: #ff3da0;
    --anomaly-level-shift: #ff8530;
    --anomaly-drift: #fff75e;
    --anomaly-flatline: #d440ff;
    --anomaly-contextual: #1ef0ff;
    --anomaly-point: #5dff3b;
    --anomaly-unclassified: #a8b9d4;

    --severity-clear: #1ef0ff;
    --severity-info: #c440ff;
    --severity-warning: #ff3da0;
    --severity-critical: #ff2070;
    --severity-band-clear: rgba(30, 240, 255, 0.14);
    --severity-band-info: rgba(196, 64, 255, 0.14);
    --severity-band-warning: rgba(255, 61, 160, 0.16);
    --severity-band-critical: rgba(255, 32, 112, 0.20);

    --status-new: #ff3da0;
    --status-ongoing: #ff8530;
    --status-resolved: #5dff3b;
    --status-acknowledged: #1ef0ff;
    --status-false-positive: #7d92b3;

    --type-anomaly: #ff3da0;
    --type-spatial-anomaly: #ff1f8d;
    --type-trend: #1ef0ff;
    --type-forecast: #5dff3b;
    --type-correlation: #d440ff;
    --type-pattern: #fff75e;
    --type-pattern-match: #fff75e;

    --feed-temperature: #ff3da0;
    --feed-humidity: #1ef0ff;
    --feed-pressure: #d440ff;
    --feed-pm-2-5: #ff8530;
    --feed-pm-1-0: #ffbd30;
    --feed-pm-10-0: #ff1f8d;
    --feed-co2: #5dff3b;
    --feed-voc: #2effc0;
    --feed-light: #fff75e;
    --feed-uv: #c440ff;
    --feed-aqi: #ff8530;
    --feed-anomaly: #ff3da0;
    --feed-default: #1ef0ff;

    --mc-glow: #1ef0ff;
    --mc-glow-alt: #ff3da0;
    --mc-elev-1: 0 1px 2px rgba(0, 0, 0, 0.30);
    --mc-elev-2:
        0 0 0 1px rgba(30, 240, 255, 0.30),
        0 0 24px rgba(30, 240, 255, 0.22),
        0 8px 28px rgba(0, 0, 0, 0.50);
    --mc-axis: rgba(255, 255, 255, 0.20);
    --mc-axis-faint: rgba(255, 255, 255, 0.08);
}

/* ============================================
   Mission control bento grid
   ============================================ */
.mc-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "hero      status"
        "timeline  timeline"
        "devices   focus";
    gap: 1rem;
    min-height: calc(100vh - 10rem);
}

/* ============================================
   Hero insight (primary narrative)
   ============================================ */
.mc-hero {
    grid-area: hero;
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 140px;
}

.mc-hero-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mc-text-muted);
}

.mc-hero-narrative {
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--mc-text);
    flex: 1;
}

.mc-hero-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.82rem;
    color: var(--mc-text-muted);
    flex-wrap: wrap;
}

.mc-hero-stat {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.mc-hero-stat .val {
    font-family: var(--mc-mono);
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--mc-text);
}

.mc-hero-stat .val.alert {
    color: var(--mc-critical);
}

.mc-hero-stat .unit {
    font-size: 0.78rem;
}

/* ============================================
   Status board (go/no-go)
   ============================================ */
.mc-status {
    grid-area: status;
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mc-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-status-title {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mc-text-muted);
}

.mc-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.mc-status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--mc-text);
    background: var(--mc-surface);
    transition: background 0.2s;
}

.mc-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mc-status-dot.nominal { background: var(--mc-nominal); }
.mc-status-dot.warning { background: var(--mc-warning); }
.mc-status-dot.critical { background: var(--mc-critical); }
.mc-status-dot.inactive { background: var(--mc-inactive); }

.mc-status-dot.nominal.pulse {
    animation: pulse-nominal 2s ease-in-out infinite;
}

@keyframes pulse-nominal {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(76, 175, 80, 0); }
}

.mc-status-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sensitivity control inline in status board */
.mc-sensitivity {
    border-top: 1px solid var(--mc-border);
    padding-top: 0.75rem;
    margin-top: auto;
}

.mc-sensitivity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.mc-sensitivity-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mc-text-muted);
}

.mc-sensitivity-value {
    font-family: var(--mc-mono);
    font-size: 0.78rem;
    color: var(--mc-text);
}

.mc-sensitivity input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--mc-nominal) 0%, var(--severity-yellow) 55%, var(--mc-critical) 100%);
    outline: none;
    cursor: pointer;
    margin: 0.25rem 0;
}

.mc-sensitivity input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mc-surface-raised);
    border: 2px solid var(--accent, #7c6fae);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.mc-sensitivity input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mc-surface-raised);
    border: 2px solid var(--accent, #7c6fae);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.mc-sensitivity input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--mc-nominal) 0%, var(--severity-yellow) 55%, var(--mc-critical) 100%);
    border: none;
}

.mc-sensitivity-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--mc-text-muted);
    padding: 0 2px;
}

.mc-sensitivity-preview {
    font-size: 0.72rem;
    color: var(--mc-text-muted);
    margin-top: 0.35rem;
    line-height: 1.3;
}

/* ============================================
   Timeline
   ============================================ */
.mc-timeline {
    grid-area: timeline;
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.mc-timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mc-timeline-label {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mc-text-muted);
}

.mc-timeline-range {
    font-family: var(--mc-mono);
    font-size: 0.7rem;
    color: var(--mc-text-muted);
}

.mc-timeline-track {
    position: relative;
    height: 32px;
    background: var(--mc-surface);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

.mc-timeline-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.mc-timeline-marker {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.mc-timeline-marker:hover {
    opacity: 1;
    transform: scaleX(1.5);
}

.mc-timeline-marker.anomaly { background: var(--mc-critical); }
.mc-timeline-marker.trend { background: var(--anomaly-contextual); }
.mc-timeline-marker.forecast { background: var(--anomaly-drift); }
.mc-timeline-marker.spatial { background: var(--anomaly-flatline); }
.mc-timeline-marker.correlation { background: var(--mc-nominal); }
.mc-timeline-marker.pattern { background: var(--anomaly-level-shift); }

.mc-timeline-now {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent, #7c6fae);
    right: 0;
    z-index: 2;
}

.mc-timeline-selection {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--accent-bg, rgba(124, 111, 174, 0.2));
    border-left: 1px solid var(--accent, #7c6fae);
    border-right: 1px solid var(--accent, #7c6fae);
    z-index: 1;
    pointer-events: none;
}

.mc-timeline-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mc-timeline-clear {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    background: transparent;
    font-size: 0.65rem;
    color: var(--mc-text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.mc-timeline-clear:hover {
    border-color: var(--accent, #7c6fae);
    color: var(--accent, #7c6fae);
}

.mc-timeline-ticks {
    flex: 1;
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--mc-text-muted);
    font-family: var(--mc-mono);
}

/* ============================================
   Device cards grid
   ============================================ */
.mc-devices {
    grid-area: devices;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: calc(100vh - 24rem);
    padding-right: 0.25rem;
}

.mc-devices-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 0;
    position: sticky;
    top: 0;
    background: var(--bg-primary, #fff);
    z-index: 1;
}

.mc-devices-title {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mc-text-muted);
}

.mc-device-card {
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 56px;
}

.mc-device-card:hover {
    border-color: var(--accent, #7c6fae);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mc-device-card.selected {
    border-color: var(--accent, #7c6fae);
    background: var(--accent-bg, rgba(124, 111, 174, 0.06));
}

.mc-device-card.anomaly-active {
    border-color: rgba(244, 67, 54, 0.5);
}

.mc-device-card.anomaly-active.selected {
    border-color: var(--mc-critical);
}

/* Anomaly isolation: elevated card */
.mc-device-card.anomaly-isolate {
    border-color: var(--mc-critical);
    box-shadow: 0 4px 16px rgba(244, 67, 54, 0.15);
    transform: translateY(-1px);
    z-index: 1;
    position: relative;
    animation: anomaly-enter 0.6s ease-out;
}

/* Dim non-isolated cards when any card is isolated */
.mc-devices:has(.anomaly-isolate) .mc-device-card:not(.anomaly-isolate):not(.selected) {
    opacity: 0.6;
    transition: opacity 0.3s;
}

@keyframes anomaly-enter {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }
    40% {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 0 6px 24px rgba(244, 67, 54, 0.25);
    }
    100% {
        transform: translateY(-1px) scale(1);
        box-shadow: 0 4px 16px rgba(244, 67, 54, 0.15);
    }
}

.mc-device-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mc-device-status.nominal { background: var(--mc-nominal); }
.mc-device-status.warning { background: var(--mc-warning); }
.mc-device-status.critical { background: var(--mc-critical); }

.mc-device-info {
    flex: 1;
    min-width: 0;
}

.mc-device-name {
    font-family: var(--mc-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mc-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-device-summary {
    font-size: 0.72rem;
    color: var(--mc-text-muted);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-device-spark {
    width: 80px;
    height: 24px;
    flex-shrink: 0;
}

.mc-device-spark svg {
    width: 100%;
    height: 100%;
}

.mc-device-spark polyline {
    fill: none;
    stroke: var(--accent, #7c6fae);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mc-device-badge {
    font-family: var(--mc-mono);
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    flex-shrink: 0;
}

.mc-device-badge.ok {
    background: rgba(76, 175, 80, 0.12);
    color: var(--mc-nominal);
}

.mc-device-badge.alert {
    background: rgba(244, 67, 54, 0.12);
    color: var(--mc-critical);
    font-weight: 600;
}

/* ============================================
   Focus panel (replaces drawer)
   ============================================ */
.mc-focus {
    grid-area: focus;
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(100vh - 24rem);
}

.mc-focus-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mc-border);
    flex-shrink: 0;
}

.mc-focus-title {
    font-family: var(--mc-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mc-text);
}

.mc-focus-actions {
    display: flex;
    gap: 0.35rem;
}

/* Focus panel tabs */
.mc-focus-tabs {
    display: flex;
    border-bottom: 1px solid var(--mc-border);
    padding: 0 1rem;
    flex-shrink: 0;
}

.mc-focus-tab {
    padding: 0.4rem 0.75rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: 0.75rem;
    color: var(--mc-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.mc-focus-tab:hover {
    color: var(--mc-text);
}

.mc-focus-tab.active {
    color: var(--accent, #7c6fae);
    border-bottom-color: var(--accent, #7c6fae);
    font-weight: 500;
}

.mc-focus-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
}

/* Forecast rows */
.mc-forecast-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mc-forecast-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mc-surface);
}

.mc-forecast-row:last-child {
    border-bottom: none;
}

.mc-forecast-feed {
    font-family: var(--mc-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mc-text);
    margin-bottom: 0.15rem;
}

.mc-forecast-value {
    font-family: var(--mc-mono);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--accent, #7c6fae);
    margin-bottom: 0.2rem;
}

.mc-forecast-meta {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--mc-text-muted);
}

/* Hardware info rows */
.mc-hardware-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mc-hw-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.3rem 0;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--mc-surface);
}

.mc-hw-row:last-child {
    border-bottom: none;
}

.mc-hw-label {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mc-text-muted);
    min-width: 5rem;
    flex-shrink: 0;
}

.mc-hw-value {
    font-family: var(--mc-mono);
    color: var(--mc-text);
    word-break: break-all;
}

.mc-focus-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: var(--mc-text-muted);
    font-size: 0.85rem;
    text-align: center;
    gap: 0.5rem;
}

.mc-focus-empty svg {
    width: 32px;
    height: 32px;
    opacity: 0.4;
}

/* Insight rows in focus panel */
.mc-insight-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--mc-surface);
    font-size: 0.82rem;
}

.mc-insight-row:last-child {
    border-bottom: none;
}

.mc-insight-sev {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.mc-insight-sev.green { background: var(--severity-green); }
.mc-insight-sev.yellow { background: var(--severity-yellow); }
.mc-insight-sev.red { background: var(--severity-red); }

.mc-insight-content {
    flex: 1;
    min-width: 0;
}

.mc-insight-text {
    color: var(--mc-text);
    line-height: 1.4;
}

.mc-insight-meta {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--mc-text-muted);
    flex-wrap: wrap;
}

.mc-insight-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Overrides section in focus panel */
.mc-overrides-section {
    padding: 0.5rem 0 0.75rem;
    border-bottom: 1px solid var(--mc-border);
    margin-bottom: 0.5rem;
}

.mc-overrides-title {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mc-text-muted);
    margin-bottom: 0.4rem;
}

.mc-override-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
    font-size: 0.78rem;
}

.mc-override-key {
    font-family: var(--mc-mono);
    color: var(--mc-text);
    min-width: 4rem;
}

.mc-override-val {
    font-family: var(--mc-mono);
    color: var(--accent, #7c6fae);
    font-weight: 500;
    flex: 1;
}

.mc-override-input {
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    font-size: 0.75rem;
    background: var(--mc-surface-raised);
    color: var(--mc-text);
}

.mc-override-input:focus {
    border-color: var(--accent);
    outline: none;
}

.mc-override-add {
    margin-top: 0.3rem;
}

html.dark-theme .mc-override-input {
    background: var(--bg-tertiary, #3a4a65);
    border-color: var(--border-default, #3a4a65);
    color: #e0e0e0;
}

/* Explorer investigation prompts */
.mc-explorer-prompt {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--accent, #7c6fae);
    margin-top: 0.2rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--accent, #7c6fae);
    line-height: 1.35;
}

/* Type badges */
.type-badge.pattern { background: #e8f5e9; color: #2e7d32; }
.type-badge.ok { background: #e8f5e9; color: #2e7d32; }

/* Ack buttons */
.mc-btn-sm {
    padding: 0.15em 0.45em;
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    background: transparent;
    color: var(--mc-text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.15s;
}
.mc-btn-sm:hover { background: var(--mc-surface); }
.mc-btn-sm.ack:hover { border-color: var(--status-acknowledged); color: var(--status-acknowledged); }
.mc-btn-sm.fp:hover { border-color: var(--anomaly-point); color: var(--anomaly-point); }

/* Snooze button in focus header */
.mc-btn-snooze {
    padding: 0.2em 0.6em;
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    background: transparent;
    color: var(--mc-text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.15s;
}
.mc-btn-snooze:hover { border-color: var(--severity-yellow); color: var(--severity-yellow); }

/* ============================================
   Suggestion banner (above grid)
   ============================================ */
.mc-suggestions {
    display: none;
    padding: 0.6rem 1rem;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 0.75rem;
}
.mc-suggestions.visible { display: block; }
html.dark-theme .mc-suggestions {
    background: #2a2510;
    border-color: #4a3f1c;
}

.mc-suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
}
.mc-suggestion-item + .mc-suggestion-item {
    border-top: 1px solid var(--mc-border);
}
.mc-suggestion-text { flex: 1; }
.mc-suggestion-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.mc-suggestion-actions button {
    padding: 0.2em 0.6em;
    border: 1px solid var(--mc-border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.15s;
}
.mc-suggestion-actions .accept-btn:hover { border-color: var(--severity-clear); color: var(--severity-clear); }
.mc-suggestion-actions .dismiss-btn:hover { border-color: var(--status-false-positive); color: var(--status-false-positive); }

/* ============================================
   Controls bar
   ============================================ */
.mc-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.mc-controls label {
    font-size: 0.8rem;
    color: var(--mc-text-muted);
}

.mc-controls select {
    padding: 0.35em 0.7em;
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--mc-surface-raised);
    color: var(--mc-text);
}

.mc-controls select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg, rgba(124, 111, 174, 0.15));
    outline: none;
}

.mc-depth-control {
    display: flex;
    background: var(--mc-surface);
    border-radius: 6px;
    padding: 2px;
    gap: 1px;
    margin-left: auto;
}

.mc-depth-control button {
    padding: 0.3rem 0.6rem;
    border: none;
    border-radius: 5px;
    background: transparent;
    font-size: 0.75rem;
    color: var(--mc-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.mc-depth-control button:hover {
    color: var(--mc-text);
}

.mc-depth-control button.active {
    background: var(--mc-surface-raised);
    color: var(--mc-text);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mc-nav-links {
    display: flex;
    gap: 0.75rem;
    font-size: 0.78rem;
}

.mc-nav-links a {
    color: var(--mc-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.mc-nav-links a:hover {
    color: var(--accent, #7c6fae);
}

/* Noise sources bar chart */
.mc-noise-sources {
    margin-top: 0.5rem;
}

.mc-noise-title {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mc-text-muted);
    margin-bottom: 0.3rem;
}

.mc-noise-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    cursor: pointer;
    font-size: 0.72rem;
}

.mc-noise-bar:hover .mc-noise-label {
    color: var(--accent, #7c6fae);
}

.mc-noise-label {
    font-family: var(--mc-mono);
    width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mc-text);
    flex-shrink: 0;
    transition: color 0.15s;
}

.mc-noise-track {
    flex: 1;
    height: 4px;
    background: var(--mc-surface);
    border-radius: 2px;
    overflow: hidden;
}

.mc-noise-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--mc-critical);
    transition: width 0.3s;
}

.mc-noise-count {
    font-family: var(--mc-mono);
    font-size: 0.68rem;
    color: var(--mc-text-muted);
    min-width: 1.5rem;
    text-align: right;
    flex-shrink: 0;
}

.mc-reset-link {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: var(--mc-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.mc-reset-link:hover {
    color: var(--mc-text);
}

.mc-controls-spacer { flex: 1; }

/* ============================================
   Alert banner
   ============================================ */
.mc-alert {
    display: none;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 0.75rem;
}
.mc-alert.success { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }
.mc-alert.error { background: #ffebee; border: 1px solid #ef9a9a; color: #c62828; }
html.dark-theme .mc-alert.success { background: #1b3a1b; border-color: #2e5a2e; color: #a5d6a7; }
html.dark-theme .mc-alert.error { background: #3a1b1b; border-color: #5a2e2e; color: #ef9a9a; }

/* ============================================
   Empty + loading states
   ============================================ */
.mc-empty {
    text-align: center;
    padding: 3rem;
    color: var(--mc-text-muted);
}

.mc-empty svg {
    width: 40px;
    height: 40px;
    opacity: 0.4;
    margin-bottom: 0.75rem;
}

.mc-loading {
    text-align: center;
    padding: 2rem;
    color: var(--mc-text-muted);
    font-size: 0.85rem;
}

/* ============================================
   Dark theme
   ============================================ */
html.dark-theme .mc-hero,
html.dark-theme .mc-status,
html.dark-theme .mc-timeline,
html.dark-theme .mc-device-card,
html.dark-theme .mc-focus {
    background: var(--bg-secondary, #2a3a55);
    border-color: var(--border-default, #3a4a65);
}

html.dark-theme .mc-devices-header {
    background: var(--bg-primary, #1f2940);
}

html.dark-theme .mc-device-card:hover {
    border-color: var(--accent, #7c6fae);
}

html.dark-theme .mc-device-card.selected {
    background: rgba(124, 111, 174, 0.1);
    border-color: var(--accent, #7c6fae);
}

html.dark-theme .mc-device-card.anomaly-active {
    border-color: rgba(244, 67, 54, 0.5);
}

html.dark-theme .mc-device-card.anomaly-isolate {
    border-color: var(--mc-critical);
    box-shadow: 0 4px 20px rgba(244, 67, 54, 0.25);
}

html.dark-theme .mc-devices:has(.anomaly-isolate) .mc-device-card:not(.anomaly-isolate):not(.selected) {
    opacity: 0.5;
}

html.dark-theme .mc-device-name { color: #e0e0e0; }
html.dark-theme .mc-hero-narrative { color: #e0e0e0; }

html.dark-theme .mc-status-item {
    background: var(--bg-tertiary, #3a4a65);
}

html.dark-theme .mc-timeline-track {
    background: var(--bg-tertiary, #3a4a65);
}

html.dark-theme .mc-sensitivity input[type="range"]::-webkit-slider-thumb {
    background: var(--bg-secondary, #2a3a55);
}

html.dark-theme .mc-sensitivity input[type="range"]::-moz-range-thumb {
    background: var(--bg-secondary, #2a3a55);
}

html.dark-theme .mc-depth-control {
    background: var(--bg-tertiary, #3a4a65);
}

html.dark-theme .mc-depth-control button.active {
    background: var(--bg-secondary, #2a3a55);
    color: #e0e0e0;
}

html.dark-theme .mc-depth-control button { color: #999; }
html.dark-theme .mc-depth-control button:hover { color: #e0e0e0; }

html.dark-theme .mc-controls select {
    background: var(--bg-secondary, #2a3a55);
    border-color: var(--border-default, #3a4a65);
    color: #e0e0e0;
}

html.dark-theme .mc-insight-row {
    border-color: var(--border-default, #3a4a65);
}

html.dark-theme .type-badge.pattern { background: #1b5e20; color: #c8e6c9; }
html.dark-theme .type-badge.ok { background: #1b5e20; color: #c8e6c9; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
    .mc-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "hero"
            "status"
            "timeline"
            "devices"
            "focus";
    }

    .mc-devices {
        max-height: none;
    }

    .mc-focus {
        max-height: none;
        min-height: 200px;
    }
}

@media (max-width: 600px) {
    .mc-hero { padding: 1rem; }
    .mc-hero-narrative { font-size: 0.95rem; }
    .mc-hero-stat .val { font-size: 1.1rem; }
    .mc-status-grid { grid-template-columns: 1fr; }
    .mc-controls { gap: 0.5rem; }
}

/* ============================================
   Landscape: anomaly cross-cuts on /instances/air_quality/assess/
   ============================================ */
.mc-landscape {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-areas:
        "heatmap types confidence"
        "parallel parallel forecast"
        "flow flow breakdown";
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
.mc-landscape-card {
    background: var(--mc-surface-raised);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-card);
    padding: 0.85rem 1.05rem 1rem;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--mc-elev-1);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    overflow: hidden;
}
.mc-landscape-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--mc-elev-2);
    border-color: color-mix(in srgb, var(--mc-glow) 60%, var(--mc-border));
}
.mc-landscape-card h3 {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mc-text-muted);
}
.mc-landscape-card:hover h3 {
    color: var(--mc-glow);
    text-shadow: 0 0 8px color-mix(in srgb, var(--mc-glow) 60%, transparent);
}
.mc-landscape-card .ls-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-text-muted);
    font-size: 0.85rem;
    opacity: 0.7;
}
.mc-landscape-card svg {
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 140px;
    overflow: visible;
}
.mc-landscape-card.ls-loaded .ls-empty { display: none; }
.mc-landscape-card:not(.ls-loaded) svg { display: none; }
.mc-landscape-card.ls-loaded svg {
    animation: mc-card-fade-in 280ms ease-out both;
}
@keyframes mc-card-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}
.mc-landscape-heatmap { grid-area: heatmap; }
.mc-landscape-types { grid-area: types; }
.mc-landscape-confidence { grid-area: confidence; }
.mc-landscape-parallel { grid-area: parallel; min-height: 360px; }
.mc-landscape-forecast { grid-area: forecast; min-height: 320px; }
.mc-landscape-flow { grid-area: flow; min-height: 280px; }
.mc-landscape-breakdown { grid-area: breakdown; min-height: 280px; }

/* Detect page native insight panels, assess landscape chrome */
.mc-detect-overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "trend score"
        "overtime overtime"
        "events events";
    gap: 1rem;
    margin-top: 1rem;
}
.mc-detect-overview .mc-landscape-card { min-height: 260px; padding: 0.75rem 1rem 1rem; }
.mc-detect-trend { grid-area: trend; }
.mc-detect-score { grid-area: score; }
.mc-detect-overtime { grid-area: overtime; min-height: 220px; }
.mc-detect-events { grid-area: events; min-height: 320px; }

/* Event stream list rows (HTML inside mc-landscape-card) */
.ls-event-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--mc-mono);
    font-size: 0.74rem;
    max-height: 280px;
}
.mc-detect-events.ls-loaded .ls-empty { display: none; }
.mc-detect-events:not(.ls-loaded) .ls-event-list { display: none; }
.ls-event-row {
    display: grid;
    grid-template-columns: 36px 6px 90px 70px 1fr 50px 38px 70px;
    gap: 6px;
    align-items: center;
    padding: 3px 4px;
    border-bottom: 1px solid var(--mc-border);
    color: var(--mc-text);
}
.ls-event-row:hover { background: rgba(153, 69, 255, 0.04); }
.ls-event-time { color: var(--mc-text-muted); }
.ls-event-sev { width: 6px; height: 6px; border-radius: 2px; }
.ls-event-sev.crit {
    background: var(--severity-critical);
    box-shadow: 0 0 6px color-mix(in srgb, var(--severity-critical) 60%, transparent);
}
.ls-event-sev.high { background: var(--severity-warning); }
.ls-event-sev.med { background: var(--severity-info); }
.ls-event-sev.low { background: var(--severity-clear); }
.ls-event-type {
    padding: 1px 6px; border-radius: 8px;
    font-size: 0.68rem; text-transform: lowercase; letter-spacing: 0.02em;
    text-align: center; font-weight: 600;
}
.ls-event-feed { color: var(--mc-text); opacity: 0.85; }
.ls-event-device {
    color: var(--mc-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ls-event-val { text-align: right; color: var(--mc-text); }
.ls-event-conf { text-align: right; color: var(--mc-text-muted); }
.ls-event-status { font-size: 0.7rem; text-align: right; }

@media (max-width: 900px) {
    .mc-detect-overview {
        grid-template-columns: 1fr;
        grid-template-areas:
            "trend"
            "score"
            "overtime"
            "events";
    }
    .ls-event-row {
        grid-template-columns: 36px 6px 80px 60px 1fr 44px 60px;
    }
    .ls-event-row .ls-event-conf { display: none; }
}

.ls-tooltip {
    position: absolute;
    pointer-events: none;
    background: color-mix(in srgb, var(--mc-surface-raised) 85%, transparent);
    border: 1px solid color-mix(in srgb, var(--mc-glow) 50%, var(--mc-border));
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.74rem;
    font-family: var(--mc-mono);
    line-height: 1.45;
    color: var(--mc-text);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--mc-glow) 25%, transparent),
        0 0 16px color-mix(in srgb, var(--mc-glow) 30%, transparent),
        0 6px 18px rgba(0, 0, 0, 0.35);
    z-index: 100;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    transition: opacity 120ms ease, transform 120ms ease;
}
.ls-tooltip strong { color: var(--mc-glow); font-weight: 600; }
.ls-tooltip[style*="display: block"],
.ls-tooltip[style*="display:block"] {
    animation: mc-tip-in 140ms ease-out both;
}
@keyframes mc-tip-in {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .mc-landscape {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "heatmap heatmap"
            "types confidence"
            "parallel parallel"
            "forecast forecast"
            "flow flow"
            "breakdown breakdown";
    }
}
@media (max-width: 600px) {
    .mc-landscape {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heatmap"
            "types"
            "confidence"
            "parallel"
            "forecast"
            "flow"
            "breakdown";
    }
}