/* Topbar "Overlays" dropdown (ui/overlaysPanel.js) -- same fixed-dropdown pattern as nwsAlerts.css,
   anchored right since the button sits in the right-hand topbar group. */
.overlays-panel {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    right: 12px;
    z-index: 100001;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100vh - var(--topbar-h) - 24px);
    overflow-y: auto;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 7px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
    color: var(--text-light);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.overlays-panel[hidden] { display: none; }
.overlays-header {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: bold; font-size: 14px; padding-bottom: 4px; border-bottom: 1px solid var(--panel-border);
}
.overlays-clear-all {
    font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 4px; cursor: pointer;
    border: 1px solid #e34b4b; background: transparent; color: #f08a8a;
}
.overlays-clear-all:hover:not(:disabled) { background: rgba(227, 75, 75, 0.15); }
.overlays-clear-all:disabled { opacity: 0.4; cursor: default; border-color: var(--panel-border); color: var(--text-muted, #9aa3ad); }
.overlays-list { display: flex; flex-direction: column; }
.overlays-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--panel-border); }
.overlays-row:last-child { border-bottom: none; }
.overlays-row-text { flex: 1 1 auto; min-width: 0; }
.overlays-row-title { font-size: 13px; color: white; overflow-wrap: anywhere; }
.overlays-row-detail { font-size: 11px; color: var(--text-muted, #9aa3ad); }
.overlays-row-close {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--panel-border); background: transparent; color: var(--text-light); font-size: 12px;
}
.overlays-row-close:hover, .overlays-row-close:focus-visible { border-color: #e34b4b; color: #f08a8a; }
.overlays-empty { font-size: 12px; font-style: italic; color: var(--text-muted, #9aa3ad); padding: 4px 0; }
.overlays-subtitle { font-size: 11px; color: var(--text-muted, #9aa3ad); border-top: 1px solid var(--panel-border); padding-top: 6px; }

/* Drawing order (ui/overlaysPanel.js, 2026-10-10): pinned bands, then the rows the user orders. The handle and the
   up/down buttons reuse the Weather panel's classes (ui/layerReorder.js). */
.overlays-band { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #9aa3ad); padding-top: 4px; }
.overlays-band[hidden] { display: none; }
.overlays-empty[hidden] { display: none; }
.overlays-top .overlays-row.pinned .overlays-row-text::before,
.overlays-bottom .overlays-row.pinned .overlays-row-text::before { content: "Pinned"; float: right; font-size: 10px; color: var(--text-muted, #9aa3ad); }
.overlays-order { display: flex; flex-direction: column; }
.overlays-order .overlays-row:last-child { border-bottom: none; }
.overlays-row.weather .overlays-row-title { color: #9fd3ff; }
.overlays-row .active-layer-handle {
    flex: 0 0 auto; width: 18px; text-align: center; color: var(--text-light); opacity: 0.6;
    cursor: grab; user-select: none; touch-action: none; letter-spacing: -2px; margin-right: 4px;
}
.overlays-row .active-layer-handle:hover, .overlays-row .active-layer-handle:focus-visible { opacity: 1; }
.overlays-row .active-layer-handle:focus-visible { outline: 2px solid #4da3ff; outline-offset: 2px; }
.overlays-row .active-layer-move-up, .overlays-row .active-layer-move-down {
    flex: 0 0 auto; width: 22px; height: 22px; padding: 0; background: none; border: 1px solid var(--panel-border);
    color: var(--text-light); border-radius: 4px; font-size: 9px; line-height: 1; cursor: pointer;
}
.overlays-row .active-layer-move-up:hover, .overlays-row .active-layer-move-down:hover { border-color: var(--text-light); }
.overlays-order .draw-row:first-child .active-layer-move-up,
.overlays-order .draw-row:last-child .active-layer-move-down { visibility: hidden; }
.overlays-row-spacer { flex: 0 0 auto; width: 24px; }
.overlays-order.reordering { cursor: grabbing; user-select: none; }
.overlays-row.dragging { opacity: 0.85; outline: 2px solid #4da3ff; outline-offset: 2px; background: var(--panel-bg); }