/* Gauges on the Explore map (explore-gauges.js): the metric picker in Reference layers, the legend and the hydrograph. */
.explore-page .pane-metric { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 0 6px 0; color: #e5eef8; }
.explore-page .pane-metric select { min-height: 28px; padding: 0 6px; border: 1px solid #ffffffb0; border-radius: 4px; background: #234264; color: #fff; font: inherit; }
.explore-page .gauge-legend { margin-top: 10px; }
.explore-page .details-legend[hidden] + .gauge-legend { margin-top: 0; }
.explore-page .gauge-legend[hidden] { display: none; }
.explore-page .gauge-swatch span { background-image: none; }
.explore-page .gauge-legend-note { margin: 4px 0 0; color: #fff; font-size: 11px; text-shadow: 0 1px 2px #10294266; }
.explore-page .gauge-metrics { grid-template-columns: repeat(2, auto 1fr); }
.explore-page .gauge-metrics dt { cursor: help; }
.explore-page .gauge-simulated { fill: none; stroke: #1b6fc2; stroke-width: 1.5; stroke-linejoin: round; }
.explore-page .gauge-observed { fill: none; stroke: #0f2c4d; stroke-width: 1.2; stroke-dasharray: 3 2; stroke-linejoin: round; }
.explore-page .gauge-year { fill: #1b6fc2; opacity: .12; }
.explore-page .gauge-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 4px 2px; color: #3d5876; font-size: 11px; }
.explore-page .gauge-key span { display: inline-block; width: 16px; height: 0; margin-left: 6px; }
.explore-page .gauge-key span:first-child { margin-left: 0; }
.explore-page .gauge-key-simulated { border-top: 2px solid #1b6fc2; }
.explore-page .gauge-key-observed { border-top: 2px dashed #0f2c4d; }
.explore-page .gauge-key-year { height: 10px !important; width: 10px !important; background: #1b6fc21f; border: 1px solid #1b6fc266; }
.explore-page .gauge-private { margin: 2px 4px 4px; color: #3d5876; text-shadow: none; }
/* The gauge legend's ramp takes the full width; "Below 0: poor" and "Not scored" go on the line below it. */
.explore-page .gauge-legend .details-legend-scale { flex-wrap: wrap; gap: 4px 12px; }
.explore-page .gauge-legend .details-legend-ramp { flex: 1 1 100%; }