/* Linked by each host shell: the tokens resolve at document scope, and MapLibre popups are raw DOM nodes that
   a scoped sheet cannot reach. */

/* Fixed hues, not palette aliases: the amber family must stay unlike success green and lightning yellow in
   either theme. absent marks a data gap; forecast-wash the projected span. */
:root {
    --cv-impact-zone-absent: #9c7b3c;
    --cv-impact-zone-forecast-wash: #f59e0b;
    --cv-impact-zone-groove-slate: #6b7280;
    --cv-impact-zone-hover-desc: #94a3b8;
}

/* The popup surface stays light in either theme, so its text does too. */
.impact-zone-cell-popup .maplibregl-popup-content,
.impact-zone-mesh-readout .maplibregl-popup-content {
    color: var(--mud-palette-black);
}

.impact-zone-cell-popup .maplibregl-popup-content {
    min-width: 220px;
}

.impact-zone-mesh-readout .maplibregl-popup-content {
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    padding: 4px 8px;
}

.impact-zone-mesh-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: baseline;
}

.impact-zone-mesh-desc {
    color: var(--cv-impact-zone-hover-desc);
}

/* A stepper's place never wraps or shrinks, so "2 of 4" reads as one, and its figures stay still as it steps. Global:
   the stepper has no element of its own a scoped sheet could anchor to. */
.impact-zone-jump-position {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Below Md the map is the page: it bleeds through the grid's 1rem gutters to the screen edges. Qualified by
   .mud-paper to outrank the surface's own radius and elevation; the width is !important to outrank the page item's
   width: 100% on its child. */
@media (max-width: 959.98px) {
    .mud-paper.impact-zone-map-surface {
        margin: 0 -1rem;
        width: calc(100% + 2rem) !important;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Global, since the classes ride Mud components and MapLibre's own controls, which no scoped sheet reaches. A finger
   gets 44px targets; pinch replaces this map's zoom buttons. A button or toggle item carries its Class itself; a switch
   or slider carries it on an outer input-control wrapper, so those match beneath it. */
@media (pointer: coarse) {
    .impact-zone-touch-target.mud-icon-button,
    .impact-zone-touch-target.mud-button,
    .impact-zone-touch-target.mud-toggle-item,
    .impact-zone-touch-target .mud-switch,
    .impact-zone-cell-popup .maplibregl-popup-close-button {
        min-width: 44px;
        min-height: 44px;
    }

    .impact-zone-touch-target .mud-slider-container,
    .impact-zone-touch-target .mud-slider-input {
        height: 44px;
    }

    /* The navigation control holds only the zoom buttons here, compass off. */
    .impact-zone-map-surface .maplibregl-ctrl-bottom-left .maplibregl-ctrl-group {
        display: none;
    }
}