/* Explore on phones (below 760 px) and tablets (760–1099 px), from Kieran's "CoSWAT Mobile Explore" frames, with
   explore-mobile.js. Every rule is inside max-width: 1099px, so the desktop layout above it does not change. Touch
   controls are at least 44 px and text at least 12 px. */
.explore-page :is(.mobile-chips, .mobile-map-tools, .mobile-loading, .mobile-sheet-head, .mobile-sheet-quick, .channel-detail-scores, .mobile-group-value, .channel-kge-badge, .place-hru-badge, .channel-brush-label, .mobile-gauge-settings, .mobile-settings-text, .mobile-settings-chevron) { display: none; }

@media (max-width: 1099px) {
  /* The desktop rail's and Details pane's corner pieces: the floating cards and sheets have rounded corners of their own. */
  .explore-page :is(.icon-sidebar, .updates-pane)::before, .explore-page :is(.icon-sidebar, .updates-pane)::after { display: none; }
  /* Layer cards: the data layer first, then the reference layers; the remove button and subtitles readable. */
  .explore-page .explore-pane #user-layers { display: flex; flex-direction: column; }
  .explore-page .explore-pane #user-layers .user-layer-item[data-layer-id^="reference-"] { order: 1; }
  .explore-page .leaflet-container .leaflet-control-attribution, .explore-page .leaflet-container .leaflet-control-attribution * { font-size: 12px !important; line-height: 1.6; }
  .explore-page .leaflet-container .leaflet-control-attribution { padding: 2px 6px; }
  /* Switches and the search boxes' clear buttons: touch sized. */
  .explore-page :is(.explore-pane, .timeline) input[role="switch"] { width: 52px !important; height: 32px !important; border-radius: 16px; }
  .explore-page :is(.explore-pane, .timeline) input[role="switch"]::after { top: 3px !important; left: 3px !important; width: 26px !important; height: 26px !important; }
  .explore-page :is(.explore-pane, .timeline) input[role="switch"]:checked::after { transform: translateX(20px) !important; }
  .explore-page .explore-pane .picker-input-row button { width: 44px !important; height: 44px !important; }
  .explore-page .leaflet-control-scale-line { font-size: 12px; }

  /* Chips at the top left: the active layer, then the legend. */
  .explore-page .mobile-chips { position: absolute; z-index: 850; top: 16px; left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: calc(100% - 96px); }
  .explore-page .mobile-layer-chip { display: flex; align-items: center; gap: 12px; min-height: 56px; max-width: 100%; padding: 8px 18px 8px 14px; border: 0; border-radius: 12px; background: #fff; color: #0f2c4d; font: inherit; text-align: left; box-shadow: 0 2px 10px #0f2c4d26; cursor: pointer; }
  .explore-page .mobile-layer-chip svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
  .explore-page .mobile-layer-chip span { display: grid; min-width: 0; }
  .explore-page .mobile-layer-chip strong { font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .explore-page .mobile-layer-chip small { color: #3d5876; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .explore-page .mobile-layer-chip:focus-visible, .explore-page .mobile-round-button:focus-visible { outline: 3px solid #0f2c4d; outline-offset: 2px; }

  /* Map tools at the top right: locate, then zoom. */
  .explore-page .mobile-map-tools { position: absolute; z-index: 850; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; }
  .explore-page .mobile-round-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: #fff; color: #0f2c4d; box-shadow: 0 2px 10px #0f2c4d26; cursor: pointer; }
  .explore-page .mobile-round-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .explore-page .mobile-round-button[aria-busy="true"] { opacity: .6; }
  .explore-page .leaflet-top.leaflet-right { top: 60px; right: 6px; }
  .explore-page .leaflet-control-zoom { border: 0 !important; border-radius: 10px !important; box-shadow: 0 2px 10px #0f2c4d26 !important; overflow: hidden; }
  .explore-page .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 22px !important; color: #0f2c4d !important; }

  /* Details opens from what is tapped; its thin reopen tab is not needed (and was hard to hit). */
  .explore-page .updates-reopen { display: none !important; }
  /* The gauge's scores in Details (explore-channel.js) replace the one-line gauge card here. */
  .explore-page .updates-pane .channel-detail-scores { display: block; }
  .explore-page .updates-pane .channel-gauge { display: none; }
  /* Loading note, until the map has drawn. */
  .explore-page .mobile-loading { position: absolute; z-index: 860; top: 45%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(300px, calc(100% - 64px)); padding: 22px 20px 20px; border-radius: 16px; background: #fff; color: #0f2c4d; text-align: center; box-shadow: 0 4px 18px #0f2c4d33; transform: translate(-50%, -50%); }
  .explore-page .mobile-loading strong { margin-top: 10px; font-size: 17px; }
  .explore-page .mobile-loading small { color: #3d5876; font-size: 13px; }
  .explore-page .mobile-loading-spinner { width: 28px; height: 28px; border: 3px solid #d8e1ec; border-top-color: #1b6fc2; border-radius: 50%; animation: mobile-spin .9s linear infinite; }
  .explore-page .mobile-loading-bar { position: relative; width: 100%; height: 4px; margin-top: 14px; overflow: hidden; border-radius: 2px; background: #e3eaf2; }
  .explore-page .mobile-loading-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 2px; background: #1b6fc2; animation: mobile-slide 1.4s ease-in-out infinite; }
  @keyframes mobile-spin { to { transform: rotate(360deg); } }
  @keyframes mobile-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
  @media (prefers-reduced-motion: reduce) { .explore-page :is(.mobile-loading-spinner, .finding-spinner, .mobile-loading-bar::after) { animation: none; } }
  .explore-page .mobile-loading[hidden] { display: none; }

  /* The legend as a chip under the layer chip; tapping it shows the legends below it. */
  .explore-page .map-legend-overlay.is-folding { top: 88px; right: auto !important; bottom: auto !important; left: 16px; align-items: flex-start !important; }
  .explore-page .map-legend-overlay.is-folding .map-legend-toggle { order: 0 !important; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 12px; font-size: 14px; }
  .explore-page .map-legend-overlay.is-folding .map-legend-toggle::before { content: ""; width: 28px; height: 6px; border-radius: 3px; background: linear-gradient(to right, #e8f2f8, #1b4f8a); }

  /* Touch-sized controls in the pane and the time bar. */
  .explore-page .explore-pane #user-layers .user-layer-remove { width: 44px; height: 44px; }
  .explore-page .explore-pane .add-layer { min-height: 44px; }
  .explore-page .explore-pane :is(.pane-small-button, select, .picker-input-row) { min-height: 44px; }
  .explore-page .explore-pane .picker-input-row button { width: 44px; height: 44px; }
  .explore-page .explore-pane .pane-recent { min-height: 44px; }
  .explore-page .explore-pane .pane-check { min-height: 44px; }
  .explore-page .explore-pane .pane-switch { min-height: 44px; }
  .explore-page .explore-pane input[type="range"], .explore-page .timeline input[type="range"] { min-height: 44px; }
  .explore-page .timeline :is(.timeline-more summary, .timeline-more > button, select, button) { min-height: 44px; min-width: 44px; }
  .explore-page .explore-pane :is(small, .pane-hint, .pane-empty, .picker-feedback, .boundary-credit, label) { font-size: max(12px, 1em); }
  .explore-page .pane-option-hint, .explore-page .pane-recent-meta { font-size: 12px; }
}

/* Details content on phones and tablets: a small label over a big value, the facts as tiles, the button at the bottom.
   Only the content's own close button shows; the pane's "Details" heading goes while a place, river or gauge is open. */
@media (max-width: 1099px) {
  .explore-page .updates-pane:has(.place-details:not([hidden])) .updates-heading { display: none; }
  .explore-page .updates-pane .place-details { color: #0f2c4d; }
  /* The value and its chart first, then the facts, the variable choice and the statistics. */
  .explore-page .updates-pane .place-details:not([hidden]) { display: flex; flex-direction: column; }
  .explore-page .updates-pane .place-details > :is(.place-facts:not(.place-stats), .place-tiles) { order: 5; }
  .explore-page .updates-pane .place-details:has(> .place-tiles) > .place-facts:not(.place-stats) { display: none; }
  .explore-page .updates-pane .place-current { position: relative; }
  .explore-page .updates-pane .place-details:has(.place-hru-badge) .place-unit { display: none; }
  body.explore-page.is-map-loading .timeline { display: none !important; }
  .explore-page .updates-pane :is(.channel-kge-badge, .place-hru-badge) { position: absolute; top: 6px; right: 0; display: inline-block; padding: 4px 10px; border-radius: 14px; background: #e3f3ea; color: #1f6b45; font-size: 12px; font-weight: 700; }
  .explore-page .updates-pane .place-hru-badge { background: #eaf1f8; color: #294b73; font-weight: 600; }
  .explore-page .updates-pane .finding-details .place-status { min-height: 56px; margin: 4px 0; color: #0f2c4d; font-size: 16px; font-weight: 600; }
  .explore-page .updates-pane .finding-spinner { display: block; flex: none; width: 22px; height: 22px; border: 3px solid #d8e1ec; border-top-color: #1b6fc2; border-radius: 50%; animation: mobile-spin .9s linear infinite; }
  .explore-page .updates-pane .place-tiles { display: grid; }
  .explore-page .updates-pane .place-tiles dd { margin: 0; }
  .explore-page .updates-pane .place-details > :is(.place-variable, .place-label) { order: 6; }
  .explore-page .updates-pane .place-details > .channel-detail-scores { order: 6; }
  .explore-page .updates-pane .place-details > :is(.place-stats-title, .place-stats) { order: 7; }
  .explore-page .updates-pane .place-details > :is(.place-data-link, .channel-advanced-open) { order: 9; }
  .explore-page .updates-pane .place-title { font-size: 22px; }
  .explore-page .updates-pane .place-close { width: 44px; height: 44px; }
  .explore-page .updates-pane .place-close svg { width: 24px; height: 24px; }
  .explore-page .updates-pane .place-name { margin-top: 2px; font-size: 14px; font-weight: 400; color: #3d5876; }
  .explore-page .updates-pane .place-when { margin-top: 10px; color: #3d5876; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .explore-page .updates-pane .place-value { font-size: 34px; }
  .explore-page .updates-pane .place-value-unit { font-size: 18px; font-weight: 500; }
  .explore-page .updates-pane :is(.place-facts:not(.place-stats), .place-tiles) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 8px; margin-top: 14px; }
  .explore-page .updates-pane :is(.place-facts:not(.place-stats), .place-tiles) dd { grid-row: 1; padding: 10px 10px 0; border-radius: 10px 10px 0 0; background: #f0f5fa; font-size: 16px; font-weight: 700; }
  .explore-page .updates-pane :is(.place-facts:not(.place-stats), .place-tiles) :is(dt, dd):nth-of-type(1) { grid-column: 1; }
  .explore-page .updates-pane :is(.place-facts:not(.place-stats), .place-tiles) :is(dt, dd):nth-of-type(2) { grid-column: 2; }
  .explore-page .updates-pane :is(.place-facts:not(.place-stats), .place-tiles) :is(dt, dd):nth-of-type(3) { grid-column: 3; }
  .explore-page .updates-pane :is(.place-facts:not(.place-stats), .place-tiles) :is(dt, dd):nth-of-type(4) { grid-column: 4; }
  .explore-page .updates-pane :is(.place-facts:not(.place-stats), .place-tiles) dt { grid-row: 2; padding: 2px 10px 10px; border-radius: 0 0 10px 10px; background: #f0f5fa; color: #3d5876; font-size: 12px; }
  .explore-page .updates-pane :is(.channel-advanced-open, .place-data-link) { position: sticky; bottom: 0; z-index: 2; min-height: 48px; margin-top: 16px; box-shadow: 0 -8px 12px #fff; }
  .explore-page .updates-pane .place-data-link { justify-content: center; padding: 0; border: 0; border-radius: 6px; background: #1b6fc2; color: #fff; text-decoration: none; }
  .explore-page .updates-pane .place-data-link svg { stroke: #fff; }
  .explore-page .updates-pane .place-variable select { min-height: 44px; }
}

/* Tablets: the rail on a floating white card, the time bar at the bottom left, Details as a floating card. */
@media (min-width: 760px) and (max-width: 1099px) {
  /* Layer cards: each layer on a tinted card; the tick is a switch. */
  .explore-page .explore-pane #user-layers .user-layer-item { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #d8e1ec; border-radius: 12px; background: #f4f8fb; }
  .explore-page .explore-pane #user-layers .user-layer-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; }
  .explore-page .explore-pane #user-layers .user-layer-toggle input { order: 2; appearance: none; flex: 0 0 52px; width: 52px; height: 32px; margin: 0 0 0 auto; border-radius: 16px; background: #c8d3de; position: relative; cursor: pointer; }
  .explore-page .explore-pane #user-layers .user-layer-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0f2c4d40; transition: transform .15s; }
  .explore-page .explore-pane #user-layers .user-layer-toggle input:checked { background: #1b6fc2; }
  .explore-page .explore-pane #user-layers .user-layer-toggle input:checked::after { transform: translateX(20px); }
  .explore-page .explore-pane #user-layers .user-layer-toggle input:focus-visible { outline: 3px solid #0f2c4d; outline-offset: 2px; }
  .explore-page .explore-pane #user-layers .user-layer-toggle strong { font-size: 16px; }
  .explore-page .explore-pane #user-layers .user-layer-toggle small { font-size: 13px; }
  .explore-page .explore-pane #user-layers :is(.user-layer-toggle, .user-layer-toggle strong, .user-layer-remove, .user-layer-opacity, .user-layer-legend) { color: #0f2c4d; }
  .explore-page .explore-pane #user-layers .user-layer-toggle small { color: #3d5876; }
  .explore-page .explore-pane #user-layers .user-layer-remove:hover { background: #e3edf6; }


  .explore-page { --explore-sidebar-width: 0px; }
  .explore-page .explore-pane.icon-sidebar { top: 160px; bottom: auto; left: 16px; z-index: 860; width: 60px; max-height: calc(100% - 300px); padding: 8px 0; border-radius: 14px; background: #fff; color: #0f2c4d; box-shadow: 0 2px 12px #0f2c4d2e; }
  .explore-page .explore-pane.icon-sidebar:is(:hover, :focus-within) { width: min(340px, calc(100vw - 40px)); max-height: calc(100% - 180px); }
  .explore-page .explore-pane, .explore-page .explore-pane :is(.pane-group-head, .map-tool, .add-layer, .pane-small-button, .pane-switch, .pane-check, label, small, strong, p, span, h3, legend, .pane-hint, .pane-empty) { color: #0f2c4d; text-shadow: none; }
  .explore-page .explore-pane :is(small, .pane-hint, .pane-empty, .pane-region-hint, .pane-recent-meta, .pane-group-value) { color: #3d5876; }
  .explore-page .explore-pane .pane-group { border-bottom-color: #e3e9ef; }
  .explore-page .explore-pane :is(.add-layer, .pane-small-button, .picker-input-row) { border-color: #c8d3de; }
  .explore-page .explore-pane input[type="text"], .explore-page .explore-pane input[type="search"] { color: #0f2c4d; }
  .explore-page .explore-pane input[type="text"]::placeholder { color: #5b7088; }
  .explore-page .explore-pane .picker-input-row { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230f2c4d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E"); }
  .explore-page .explore-pane .picker-input-row button { color: #0f2c4d; }
  .explore-page .explore-pane select { background: #fff; color: #0f2c4d; border-color: #c8d3de; }
  .explore-page .explore-pane input[type="checkbox"], .explore-page .explore-pane input[type="radio"], .explore-page .explore-pane input[type="range"] { accent-color: #1b6fc2; }
  .explore-page .explore-pane input[role="switch"] { background: #c8d3de; }
  .explore-page .explore-pane input[role="switch"]:checked { background: #1b6fc2; }
  .explore-page .explore-pane .pane-group-head:hover, .explore-page .explore-pane .map-tool:hover, .explore-page .explore-pane .pane-recent:hover { background: #eef4f9; }
  .explore-page .explore-pane [role="option"] { color: #fff; }
  .explore-page .explore-pane [role="option"]:is([aria-selected="true"], :hover, .is-focused) { color: #0f2c4d; }
  .explore-page .explore-pane .pane-group-body a { color: #0f4c8a; }
  .explore-page .explore-pane .user-layer-metric { color: #0f2c4d; }
  .explore-page .explore-pane #user-layers :is(.user-layer-toggle, .user-layer-toggle strong, .user-layer-remove, .user-layer-opacity, .user-layer-legend) { color: #0f2c4d; }
  .explore-page .explore-pane #user-layers .user-layer-toggle small { color: #3d5876; }
  .explore-page .explore-pane .user-layer-metric select { border-color: #c8d3de; background: #fff; color: #0f2c4d; }
  .explore-page .mobile-chips { top: 16px; }
  .explore-page .timeline { left: 16px !important; right: auto !important; bottom: 16px !important; width: min(380px, calc(100% - 32px)); }
  .explore-page .updates-pane { top: 16px !important; right: 16px !important; bottom: auto !important; height: auto !important; max-height: calc(100% - 32px); border-radius: 16px; background: #fff; box-shadow: 0 4px 18px #0f2c4d33; }
  .explore-page .updates-pane :is(.updates-heading h2, .updates-collapse) { color: #0f2c4d; }
  .explore-page .site-footer { display: none; }
}

/* Phones: the pane is the "Explore tools" bottom sheet (explore-mobile.js sets data-sheet). */
@media (max-width: 759px) {
  .explore-page { --explore-sidebar-width: 0px; --tools-peek: 150px; }
  .explore-page .site-footer { display: none; }
  .explore-page .explore-pane.icon-sidebar { position: absolute; inset: auto 0 0 0; z-index: 900; display: flex; flex-direction: column; width: auto !important; max-height: calc(100% - 24px); padding: 0 0 max(8px, env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: #fff; color: #0f2c4d; box-shadow: 0 -4px 18px #0f2c4d33; transition: none; }
  .explore-page .explore-pane.icon-sidebar { overflow-x: hidden; }
  .explore-page .explore-pane[data-sheet="full"] { height: calc(100% - 24px); }
  .explore-page .explore-pane[data-sheet="group"] { height: 64%; }
  .explore-page .explore-pane .sidebar-pin { display: none; }

  /* Sheet header: handle, title and summary, close or open. */
  .explore-page .mobile-sheet-head { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 22px 16px 8px; }
  .explore-page .mobile-sheet-handle { position: absolute; top: 0; left: 50%; width: 88px; height: 44px; z-index: 1; padding: 0; border: 0; background: transparent; transform: translateX(-50%); cursor: pointer; }
  .explore-page .mobile-sheet-handle::before { content: ""; position: absolute; top: 9px; left: 22px; width: 44px; height: 5px; border-radius: 3px; background: #c8d3de; }
  .explore-page .mobile-sheet-titles { flex: 1; min-width: 0; }
  .explore-page .mobile-sheet-title { margin: 0; color: #0f2c4d; font-size: 22px; line-height: 1.2; }
  .explore-page .mobile-sheet-summary { margin: 2px 0 0; color: #3d5876; font-size: 14px; }
  .explore-page .mobile-sheet-toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #0f2c4d; cursor: pointer; }
  .explore-page :is(.mobile-sheet-toggle, .mobile-sheet-add) svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .explore-page .mobile-sheet-add { display: none; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #0f2c4d; cursor: pointer; }
  .explore-page .explore-pane:is([data-sheet="full"], [data-sheet-group="layers"]) .mobile-sheet-add { display: grid; }
  /* The + in the header adds layers, so the list's own Add button is not repeated. */
  .explore-page .explore-pane:is([data-sheet="full"], [data-sheet-group="layers"]) #add-layer { display: none; }
  .explore-page .explore-pane .mobile-group-value { display: block; }
  .explore-page .mobile-sheet-head, .explore-page .mobile-sheet-quick { flex: none; }
  .explore-page .mobile-sheet-head { display: flex; }

  /* Peek: three big buttons. */
  .explore-page .mobile-sheet-quick { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 4px 16px 8px; }
  .explore-page .explore-pane[data-sheet="peek"] .mobile-sheet-quick { display: grid; }
  .explore-page .mobile-quick { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 6px 10px; border: 1px solid #d8e1ec; border-radius: 12px; background: #eef4f9; color: #0f2c4d; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.25; cursor: pointer; }
  .explore-page .mobile-quick svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
  .explore-page .explore-pane[data-sheet="peek"] :is(.pane-groups, #map-settings-toggle) { display: none !important; }

  /* Full: the layer cards, then every other group as a row; a group: only its body. */
  /* One scrolling column: the sheet scrolls, not a box inside it. */
  .explore-page .explore-pane.icon-sidebar { overflow-y: auto; overscroll-behavior: contain; }
  .explore-page .explore-pane .pane-groups { flex: none; overflow: visible; scrollbar-gutter: auto; }
  .explore-page .explore-pane .mobile-sheet-head { position: sticky; top: 0; z-index: 2; background: #fff; }
  .explore-page .explore-pane .pane-group { border-bottom-color: #e3e9ef; }
  .explore-page .explore-pane .pane-group-head { justify-content: flex-start !important; min-height: 56px; padding: 8px 44px 8px 16px !important; color: #0f2c4d; }
  .explore-page .explore-pane .pane-group-text { display: grid !important; }
  .explore-page .explore-pane .pane-chevron { display: block !important; transform: rotate(-90deg) !important; }
  .explore-page .explore-pane .pane-group-body:not([hidden]) { display: block !important; }
  .explore-page .explore-pane[data-sheet="full"] .pane-group[data-group="layers"] .pane-group-heading { display: none; }
  .explore-page .explore-pane[data-sheet="group"] .pane-group { display: none; }
  .explore-page .explore-pane[data-sheet="group"][data-sheet-group="layers"] .pane-group[data-group="layers"],
  .explore-page .explore-pane[data-sheet="group"][data-sheet-group="regions"] .pane-group[data-group="regions"],
  .explore-page .explore-pane[data-sheet="group"][data-sheet-group="find"] .pane-group[data-group="find"],
  .explore-page .explore-pane[data-sheet="group"][data-sheet-group="reference"] .pane-group[data-group="reference"],
  .explore-page .explore-pane[data-sheet="group"][data-sheet-group="time"] .pane-group[data-group="time"],
  .explore-page .explore-pane[data-sheet="group"][data-sheet-group="compare"] .pane-group[data-group="compare"],
  .explore-page .explore-pane[data-sheet="group"][data-sheet-group="share"] .pane-group[data-group="share"] { display: block; border-bottom: 0; }
  .explore-page .explore-pane[data-sheet="group"] .pane-group-heading { display: none; }
  .explore-page .explore-pane[data-sheet="group"] #map-settings-toggle { display: none; }
  .explore-page .explore-pane .map-tool { min-height: 56px; margin: 0; padding: 8px 16px; border-radius: 0; color: #0f2c4d; }
  .explore-page .explore-pane .map-tool-label { display: inline !important; }
  .explore-page .explore-pane .add-layer { float: none; margin: 0 0 10px; }

  /* White theme inside the sheet. */
  .explore-page .explore-pane :is(.pane-group-head, .map-tool, .add-layer, .pane-small-button, .pane-switch, .pane-check, label, small, strong, p, span, h3, legend, .pane-hint, .pane-empty, .user-layer-metric) { color: #0f2c4d; text-shadow: none; }
  .explore-page .explore-pane :is(small, .pane-hint, .pane-empty, .pane-region-hint, .pane-recent-meta, .pane-group-value) { color: #3d5876; }
  .explore-page .explore-pane :is(.add-layer, .pane-small-button, .picker-input-row) { border-color: #c8d3de; }
  .explore-page .explore-pane input[type="text"] { color: #0f2c4d; }
  .explore-page .explore-pane input[type="text"]::placeholder { color: #5b7088; }
  .explore-page .explore-pane .picker-input-row { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230f2c4d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E"); }
  .explore-page .explore-pane .picker-input-row button { color: #0f2c4d; }
  .explore-page .explore-pane select { background: #fff; color: #0f2c4d; border-color: #c8d3de; }
  .explore-page .explore-pane input[type="checkbox"], .explore-page .explore-pane input[type="radio"], .explore-page .explore-pane input[type="range"] { accent-color: #1b6fc2; }
  .explore-page .explore-pane input[role="switch"] { background: #c8d3de; }
  .explore-page .explore-pane input[role="switch"]:checked { background: #1b6fc2; }
  .explore-page .explore-pane [role="option"] { color: #fff; }
  .explore-page .explore-pane [role="option"]:is([aria-selected="true"], :hover, .is-focused) { color: #0f2c4d; }
  .explore-page .explore-pane .pane-group-body a { color: #0f4c8a; }
  .explore-page .explore-pane .user-layer-metric select { border-color: #c8d3de; background: #fff; color: #0f2c4d; }

  /* Layer cards: each layer on a tinted card; the tick is a switch. */
  .explore-page .explore-pane #user-layers .user-layer-item { margin: 0 0 10px; padding: 10px 12px; border: 1px solid #d8e1ec; border-radius: 12px; background: #f4f8fb; }
  .explore-page .explore-pane #user-layers .user-layer-toggle { display: flex; align-items: center; gap: 12px; min-height: 44px; }
  .explore-page .explore-pane #user-layers .user-layer-toggle input { order: 2; appearance: none; flex: 0 0 52px; width: 52px; height: 32px; margin: 0 0 0 auto; border-radius: 16px; background: #c8d3de; position: relative; cursor: pointer; }
  .explore-page .explore-pane #user-layers .user-layer-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0f2c4d40; transition: transform .15s; }
  .explore-page .explore-pane #user-layers .user-layer-toggle input:checked { background: #1b6fc2; }
  .explore-page .explore-pane #user-layers .user-layer-toggle input:checked::after { transform: translateX(20px); }
  .explore-page .explore-pane #user-layers .user-layer-toggle input:focus-visible { outline: 3px solid #0f2c4d; outline-offset: 2px; }
  .explore-page .explore-pane #user-layers .user-layer-toggle strong { font-size: 16px; }
  .explore-page .explore-pane #user-layers .user-layer-toggle small { font-size: 13px; }
  .explore-page .explore-pane #user-layers :is(.user-layer-toggle, .user-layer-toggle strong, .user-layer-remove, .user-layer-opacity, .user-layer-legend) { color: #0f2c4d; }
  .explore-page .explore-pane #user-layers .user-layer-toggle small { color: #3d5876; }
  .explore-page .explore-pane #user-layers .user-layer-remove:hover { background: #e3edf6; }

  /* The time bar floats above the tools peek; it goes while a sheet is up or Details is open. */
  .explore-page .timeline { bottom: calc(var(--tools-peek) + 12px) !important; left: 12px !important; right: 12px !important; }
  body.explore-page[data-tools-sheet="full"] .timeline, body.explore-page[data-tools-sheet="group"] .timeline:not(.is-in-tools),
  body.explore-page:not(.updates-collapsed) .timeline:not(.is-in-sheet) { display: none !important; }
  /* The time bar at the foot of the Layers sheet: the same card as on the map. */
  .explore-page .explore-pane .timeline.is-in-tools:not([hidden]) { position: sticky !important; inset: auto 0 0 0 !important; z-index: 3; flex: none; width: auto !important; margin: 8px 16px 0; border: 1px solid #d8e1ec; box-shadow: 0 -10px 14px #fff; transform: none; }
  /* The cards show a switch only: removing is in Add a layer, the gauges' choices under Reference layers. */
  .explore-page .explore-pane #user-layers :is(.user-layer-remove, .user-layer-metric) { display: none; }
  .explore-page .explore-pane #user-layers .user-layer-item { grid-template-columns: minmax(0, 1fr); }
  .explore-page .explore-pane .mobile-gauge-settings:not([hidden]) { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e3e9f0; }
  .explore-page .explore-pane .mobile-gauge-heading { margin: 4px 0; color: #3d5876; font-size: 13px; font-weight: 700; }
  .explore-page .explore-pane .mobile-gauge-row select { min-height: 44px; min-width: 0; max-width: 60%; padding: 0 10px; border: 1px solid #c8d3de; border-radius: 10px; background: #fff; color: #0f2c4d; font: inherit; }
  /* Map settings: the last row of the full sheet. */
  .explore-page .explore-pane #map-settings-toggle { display: flex; align-items: center; gap: 14px; width: auto; min-height: 56px; margin: 0 16px; padding: 8px 0; border: 0; border-bottom: 1px solid #e3e9f0; border-radius: 0; background: none; color: #0f2c4d; text-align: left; }
  .explore-page .explore-pane #map-settings-toggle .map-tool-label { display: none !important; }
  .explore-page .explore-pane #map-settings-toggle :is(.mobile-settings-text, .mobile-group-value) { display: block; }
  .explore-page .explore-pane #map-settings-toggle .mobile-settings-text { flex: 1; min-width: 0; }
  .explore-page .explore-pane #map-settings-toggle .mobile-settings-chevron { display: block; flex: none; width: 20px; height: 20px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  /* Rivers and Gauges share one card in the layer list. */
  .explore-page .explore-pane #user-layers .user-layer-item[data-layer-id="reference-rivers"]:has(~ [data-layer-id="reference-gauges"]) { margin-bottom: 0; border-bottom: 0; border-radius: 12px 12px 0 0; padding-bottom: 4px; }
  .explore-page .explore-pane #user-layers [data-layer-id="reference-rivers"] ~ .user-layer-item[data-layer-id="reference-gauges"] { border-top: 0; border-radius: 0 0 12px 12px; padding-top: 4px; }
  /* The time bar inside a Details sheet: one row of play, year and slider. */
  .explore-page .updates-pane .timeline.is-in-sheet:not([hidden]) { position: static !important; inset: auto !important; display: flex !important; align-items: center; gap: 8px; width: auto !important; margin: 12px 0 4px; padding: 4px 10px; border: 0; border-radius: 12px; background: #f4f8fb; box-shadow: none; transform: none; }
  .explore-page .updates-pane .timeline.is-in-sheet .timeline-top { display: flex; align-items: center; gap: 8px; flex: none; min-height: 0; }
  .explore-page .updates-pane .timeline.is-in-sheet .timeline-scrub { flex: 1; min-width: 0; margin: 0; }
  .explore-page .updates-pane .timeline.is-in-sheet :is(.timeline-ticks, .timeline-foot, .timeline-more) { display: none !important; }
  .explore-page .updates-pane .timeline.is-in-sheet:not(.is-ready) .timeline-scrub { display: none; }
  /* The frame's row: Load, an outlined play button, the year and the slider, about 56 px tall. */
  .explore-page .updates-pane .timeline.is-in-sheet:not([hidden]) { box-sizing: border-box; min-height: 56px; padding: 4px 10px; border: 1px solid #d8e1ec; }
  .explore-page .updates-pane .timeline.is-in-sheet .timeline-buttons { display: flex; align-items: center; gap: 6px; }
  .explore-page .timeline .timeline-load:disabled { opacity: 1; cursor: default; }
  .explore-page .updates-pane .timeline.is-in-sheet .timeline-load { min-width: 0; min-height: 44px; height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
  .explore-page .updates-pane .timeline.is-in-sheet .timeline-play { width: 44px; height: 44px; min-width: 44px; padding: 0; border: 1px solid #c8d3de; border-radius: 10px; background: #fff; color: #0f2c4d; box-shadow: none; }
  .explore-page .updates-pane .timeline.is-in-sheet .timeline-play svg { width: 18px; height: 18px; }
  .explore-page .updates-pane .timeline.is-in-sheet .timeline-month { font-size: 15px; font-weight: 700; }
  .explore-page .updates-pane .timeline.is-in-sheet .timeline-scrub { padding: 0 !important; }
  .explore-page .updates-pane .timeline.is-in-sheet .timeline-scrub input { min-height: 44px; margin: 0; }
  body.explore-page[data-tools-sheet="full"] .map-legend-overlay, body.explore-page[data-tools-sheet="group"] .map-legend-overlay { display: none !important; }
  .explore-page .leaflet-bottom { bottom: calc(var(--tools-peek) + 2px) !important; }

  /* Details: a white sheet over the tools, with a handle and a close button. */
  .explore-page .updates-pane { z-index: 950; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: 58% !important; max-height: calc(100% - 24px) !important; border-radius: 18px 18px 0 0; background: #fff !important; box-shadow: 0 -4px 18px #0f2c4d33; }
  /* "Loading rivers…" below the chips, clear of the layer and legend chips. */
  .explore-page .rivers-loading { top: 204px; }
  /* While the nearest river is looked up, the sheet is only as tall as its note. */
  .explore-page .updates-pane:has(.finding-details:not([hidden])) { height: auto !important; }
  /* An open Details sheet replaces the tools sheet, whatever its height. */
  body.explore-page:not(.updates-collapsed) .explore-pane.icon-sidebar { visibility: hidden; }
  .explore-page .updates-pane::before { content: ""; display: block; position: absolute; top: 9px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #c8d3de; }
  .explore-page .updates-pane .updates-heading { padding-top: 18px; }
  .explore-page .updates-pane :is(.updates-heading h2, .updates-collapse) { color: #0f2c4d; }
  .explore-page .updates-pane .updates-collapse { min-width: 44px; min-height: 44px; font-size: 0; }
  .explore-page .updates-pane .updates-collapse::before { content: "×"; font-size: 28px; line-height: 1; }
}

/* Phones: Advanced details is a full-height sheet with one chart at a time (explore-channel.js renderPhone). */
@media (max-width: 759px) {
  /* Advanced: a sheet that leaves the header and a strip of map in view, undimmed. */
  .channel-dialog { inset: auto 0 0 0; width: 100vw; max-width: 100vw; height: calc(100dvh - 132px); max-height: none; margin: 0; padding: 22px 16px 0; border-radius: 18px 18px 0 0; box-shadow: 0 -4px 18px #0f2c4d33; }
  .channel-dialog::backdrop { background: transparent; }
  /* The zoom bar: the window with its first and last months; the hint text is in the handles' labels. */
  .channel-dialog .channel-brush-line, .channel-dialog .channel-brush-hint { display: none; }
  .channel-dialog .channel-brush-window { fill: #e6f0fa; stroke: #8fb6dd; rx: 8px; }
  .channel-dialog .channel-brush-label { display: inline; fill: #294b73; font-size: 12px; }
  .channel-dialog::before { content: ""; position: absolute; top: 9px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #c8d3de; }
  .channel-dialog .channel-dialog-title { font-size: 24px; }
  .channel-dialog .channel-dialog-sub { font-size: 14px; }
  .channel-dialog .channel-dialog-close { width: 44px; height: 44px; }
  .channel-variable { margin-top: 12px; }
  .channel-variable label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
  .channel-variable-row { display: flex; align-items: center; gap: 10px; }
  .channel-variable select { flex: 1; min-height: 48px; padding: 0 12px; border: 1px solid #c8d3de; border-radius: 10px; background: #fff; color: #0f2c4d; font: inherit; font-size: 16px; }
  .channel-variable-units { color: #3d5876; font-size: 14px; }
  .channel-chart-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
  .channel-chart-tab { min-height: 44px; padding: 0 4px; border: 1px solid #d8e1ec; border-radius: 10px; background: #f4f8fb; color: #0f2c4d; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .channel-chart-tab[aria-selected="true"] { border-color: #1b6fc2; background: #dcebf7; color: #0f4c8a; }
  .channel-chart-tab:focus-visible { outline: 3px solid #0f2c4d; outline-offset: 2px; }
  .channel-panels.is-single { grid-template-columns: minmax(0, 1fr); }
  .channel-gauge-title { margin: 16px 0 8px; color: #3d5876; font-size: 14px; }
  .channel-metric-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .channel-metric-tiles div { padding: 8px; border-radius: 10px; background: #f0f5fa; }
  .channel-metric-tiles dd { margin: 0; font-size: 15px; font-weight: 700; white-space: nowrap; }
  .channel-metric-tiles dt { color: #3d5876; font-size: 12px; }
  .channel-dialog .channel-dialog-foot { position: sticky; bottom: 0; margin: 16px -16px 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #e3e9ef; background: #fff; }
  .channel-dialog .channel-data-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; border: 1px solid #c8d3de; border-radius: 10px; background: #f4f8fb; text-decoration: none; }
  .channel-dialog .channel-hint, .channel-dialog .channel-key, .channel-dialog .channel-card-note { font-size: 13px; }
}

/* Details on phones and tablets: the gauge's scores as tiles (explore-channel.js). */
@media (max-width: 1099px) {
  .explore-page .channel-detail-scores h4 { margin: 16px 0 8px; color: #3d5876; font-size: 14px; }
  .explore-page .channel-detail-scores dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .explore-page .channel-detail-scores div { padding: 10px 12px; border-radius: 10px; background: #f0f5fa; }
  .explore-page .channel-detail-scores dd { margin: 0; font-size: 17px; font-weight: 700; }
  .explore-page .channel-detail-scores dt { color: #3d5876; font-size: 13px; }
}

/* Dialogs on phones and tablets: Add a layer shows its search and list before the configuration; small text at least
   12 px and close buttons 44 px. */
@media (max-width: 1099px) {
  .layer-manager-dialog :is(p, small, .layer-manager-result-meta, .layer-manager-preview-badge, #layer-catalogue-badge, .layer-manager-fixture-note, #layer-manager-gcm-help) { font-size: max(12px, 1em); }
  .layer-manager-dialog .layer-manager-close, .map-settings-close { min-width: 44px; min-height: 44px; }
  .layer-manager-dialog :is(select, input[type="search"], .layer-manager-add, .layer-manager-done) { min-height: 44px; }
  .map-settings-option, .map-settings-dialog button { min-height: 44px; }
  .map-settings-dialog :is(.map-settings-body .map-settings-credit, .map-settings-footer p) { font-size: 12px; }
  .explore-page #region-clear { min-width: 44px; }
  .map-settings-dialog input[type="radio"] { width: 22px; height: 22px; }
  /* Chart labels in Details: at least 12 px. */
  .explore-page .updates-pane :is(.place-chart, .gauge-chart, .place-details figure) svg text { font-size: 12px; }
}
/* Add a layer on phones: a bottom sheet with a checklist, the filters folded under one row, and Apply
   (layer-manager.js switches to the checklist below 760 px). */
@media (max-width: 759px) {
  .layer-manager-dialog { width: 100vw; max-width: 100vw; height: auto; max-height: calc(100dvh - 72px); margin: auto 0 0; border: 0; border-radius: 20px 20px 0 0; background: #fff; color: #0f2c4d; -webkit-backdrop-filter: none; backdrop-filter: none; font-family: inherit; font-size: 15px; }
  .layer-manager-dialog::backdrop { background: #0f2c4d4d; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .layer-manager-dialog::before { content: ""; flex: 0 0 auto; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: #c8d3de; }
  .layer-manager-dialog .layer-manager-header { align-items: flex-start; padding: 10px 6px 4px 16px; background: none; color: #0f2c4d; }
  .layer-manager-dialog .layer-manager-header h2 { font-size: 20px; font-weight: 700; }
  .layer-manager-dialog .layer-manager-header p { margin-top: 2px; color: #3d5876; font-size: 12px; }
  .layer-manager-dialog .layer-manager-close { color: #0f2c4d; }
  .layer-manager-dialog .layer-manager-preview-note { display: none; }
  .layer-manager-dialog .layer-manager-body { display: flex; flex-direction: column; padding: 8px 16px 16px; }
  .layer-manager-dialog .layer-manager-body > * { flex-shrink: 0; }
  .layer-manager-dialog .layer-manager-catalogue { order: -1; margin-top: 0; }
  .layer-manager-dialog .layer-manager-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .layer-manager-dialog .layer-manager-search input { min-height: 48px; border-color: #c8d3de; border-radius: 10px; font-size: 16px; }
  .layer-manager-dialog .layer-manager-results-heading { margin: 16px 0 8px; }
  .layer-manager-dialog .layer-manager-results-heading h3 { color: #3d5876; font-size: 13px; }
  .layer-manager-dialog .layer-manager-results-heading p { display: none; }
  .layer-manager-dialog .layer-manager-tick { padding: 0; border: 1px solid #d8e1ec; border-radius: 12px; background: #fff; }
  .layer-manager-dialog .layer-manager-tick + .layer-manager-tick { margin-top: 8px; }
  .layer-manager-dialog .layer-manager-tick label { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 14px; cursor: pointer; }
  .layer-manager-dialog .layer-manager-tick input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: #1b6fc2; }
  .layer-manager-dialog .layer-manager-tick strong { display: block; font-size: 15px; }
  .layer-manager-dialog .layer-manager-tick small { display: block; color: #3d5876; font-size: 12px; }
  .layer-manager-dialog .layer-manager-filters-toggle { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin-top: 12px; padding: 8px 4px; border: 0; border-bottom: 1px solid #d8e1ec; background: none; color: #0f2c4d; font: inherit; text-align: left; cursor: pointer; }
  .layer-manager-dialog .layer-manager-filters-toggle svg { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .layer-manager-dialog .layer-manager-filters-toggle span { flex: 1; min-width: 0; }
  .layer-manager-dialog .layer-manager-filters-toggle strong { display: block; font-size: 15px; }
  .layer-manager-dialog .layer-manager-filters-toggle small { display: block; color: #3d5876; font-size: 12px; }
  .layer-manager-dialog.show-filters .layer-manager-chevron { transform: rotate(90deg); }
  .layer-manager-dialog .layer-manager-filters { display: none; }
  .layer-manager-dialog.show-filters .layer-manager-filters { display: grid; margin-top: 12px; }
  .layer-manager-dialog .layer-manager-footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #e3e9f0; background: #fff; }
  .layer-manager-dialog .layer-manager-action-status { display: none; }
  .layer-manager-dialog .layer-manager-done { flex: 1; min-height: 52px; border-color: #1b6fc2; border-radius: 12px; background: #1b6fc2; font-family: inherit; font-size: 16px; }
  .layer-manager-dialog .layer-manager-done::before { content: "✓"; margin-right: 8px; }
  .layer-manager-dialog :is(input, select) { font-family: inherit; }
}