/* Live Hazards — toggle panel + map overlay styling.
 *
 * Used by /portfolio/assess/ (Starter+Pro) alongside the existing static-risk
 * Leaflet layer control. Visual scheme matches the build doc Section 4
 * "Settled visual scheme".
 */

.lh-panel-status {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
}
.lh-panel-status.ok { color: #22c55e; }
.lh-panel-status.degraded { color: #f59e0b; }
.lh-panel-status.error { color: #ef4444; }

.lh-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}
.lh-row:hover { background: rgba(148, 163, 184, 0.08); }
.lh-row input[type=checkbox] { cursor: pointer; }

.lh-name {
    flex: 1;
    color: #cbd5e1;
}

.lh-count {
    font-size: 11px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.lh-count.has-events { color: #f59e0b; font-weight: 600; }
.lh-count.errored { color: #ef4444; }

/* ── Swatches (match feature visual scheme) ── */

.lh-swatch {
    width: 14px; height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    flex-shrink: 0;
}

.lh-swatch-perimeter {
    background: rgba(220, 38, 38, 0.25);
    border: 2px solid #dc2626;
}

.lh-swatch-incident {
    background: transparent;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    opacity: 0.7;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.lh-swatch-incident::before { content: "🔥"; }

.lh-swatch-flood {
    background: #3b82f6;
    outline: 1px dashed #93c5fd;
}

.lh-swatch-severe {
    background: rgba(147, 51, 234, 0.20);
    border: 2px solid #9333ea;
}

.lh-swatch-heat {
    background: rgba(194, 65, 12, 0.30);
    border: 2px solid #c2410c;
}

.lh-swatch-earthquake {
    background: transparent;
    font-size: 11px;
    line-height: 14px;
    text-align: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.lh-swatch-earthquake::before { content: "🌋"; }

.lh-quake-icon {
    background: transparent;
    border: none;
    pointer-events: auto;
    opacity: 0.85;
}

.lh-quake-emoji {
    display: block;
    text-align: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "EmojiOne Color", sans-serif;
}

/* Static-risk swatches — solid filled blocks (no border) to distinguish from
   the active-event swatches above. Same hue family per hazard so users carry
   over the mental model from the active layers. */
.sr-swatch-flood {
    background: linear-gradient(135deg, #93c5fd 0%, #2563eb 100%);
    opacity: 0.85;
}
.sr-swatch-wildfire {
    background: linear-gradient(135deg, #fed7aa 0%, #c2410c 100%);
    opacity: 0.85;
}
.sr-swatch-heat {
    background: linear-gradient(135deg, #fde68a 0%, #b45309 100%);
    opacity: 0.85;
}

/* ── Map markers ── */

.lh-fire-icon {
    background: transparent;
    border: none;
    pointer-events: auto;
    opacity: 0.7;
}

.lh-fire-emoji {
    display: block;
    width: 16px;
    height: 16px;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "EmojiOne Color", sans-serif;
}

/* ── Feature popups ── */

.lh-popup-title {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
    font-size: 14px;
}

.lh-popup-row {
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}
.lh-popup-row strong { color: #1e293b; }

.lh-popup-auth {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.lh-popup-auth.provincial { background: #dc2626; color: #fff; }
.lh-popup-auth.federal { background: #475569; color: #f1f5f9; }

.lh-popup-link {
    display: inline-block;
    margin-top: 6px;
    color: #0d9488;
    font-weight: 500;
    text-decoration: none;
    font-size: 13px;
}
.lh-popup-link:hover { text-decoration: underline; }