/* Loaded after the historical desktop styles. Keep scientific content shared. */
.hsf-menu-toggle, .hsf-mobile-map-tools, .hsf-mobile-cell-heading { display: none; }
.hsf-camp-filters { display: grid; grid-template-columns: minmax(200px,2fr) 1fr 1.4fr auto; gap: 12px; align-items: end; margin: 16px 0 8px; }
.hsf-camp-filters label { display: block; margin-bottom: 5px; font-weight: 700; }
.hsf-camp-filters input, .hsf-camp-filters select, .hsf-camp-filters button { width: 100%; min-height: 44px; padding: 8px; border: 1px solid #8c9785; background: #fff; color: #34422f; border-radius: 3px; font: inherit; }
#hsf-camp-filter-status { font-size: 14px; margin: 8px 0 14px; }
.hsf-camp-location { font-size: 13px; color: #526149; }
.sites11a-alert-table tr[hidden] { display: none !important; }
.hsf-summary-toggle { display: none; }

@media (max-width: 1024px) {
  /* Phone pages must grow beyond the viewport, including short landscape. */
  html.sites11a-forecast-active, body.sites11a-forecast-active { height: auto; overflow: visible; }
  body.sites11a-forecast-active > .container-fluid { height: auto !important; min-height: 100vh; overflow: visible !important; display: block; }
  body.sites11a-forecast-active .sites11a-main,
  body.sites11a-forecast-active .sites11a-forecast-page.active { display: block; height: auto; overflow: visible; }
  body.sites11a-forecast-active .sites11a-forecast-page .app-shell { display: flex; flex-direction: column; height: auto; min-height: 0; gap: 8px; padding: 8px; overflow: visible; }
  body.sites11a-forecast-active .sites11a-forecast-page .map-panel { width: 100%; flex: none; overflow: visible; }
  body.sites11a-forecast-active .sites11a-forecast-page .map-wrap { height: auto !important; display: flex; flex-direction: column; overflow: visible; }
  body.sites11a-forecast-active .sites11a-forecast-page #heat_map { order: 5; width: 100%; height: 480px !important; height: clamp(380px,65svh,600px) !important; min-height: 380px; flex: none; }

  /* A labelled, keyboard-operable navigation disclosure. */
  .sites11a-nav.main-nav { position: sticky; top: 0; z-index: 1100; width: 100%; }
  .hsf-menu-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 16px; background: #fff; border: 0; color: #34422f; font: inherit; font-weight: 700; text-align: left; }
  #hsf-current-page { margin-left: auto; font-size: 14px; font-weight: 400; text-align: right; }
  .sites11a-nav .sites11a-nav-inner { display: none; padding: 0 10px 10px; width: 100%; max-height: calc(100svh - 64px); overflow-y: auto; }
  .sites11a-nav.hsf-menu-open .sites11a-nav-inner { display: flex; flex-direction: column; align-items: stretch; }
  .sites11a-nav .sites11a-nav-link { display: flex; justify-content: flex-start; min-height: 44px; width: 100%; padding: 12px; font-size: 14px; white-space: normal; border-bottom: 1px solid #e2e6df; }
  .sites11a-nav .sites11a-nav-link.active { background: #f6eeee; border-left: 4px solid #9d2235; }
  button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #9d2235; outline-offset: 2px; }
  .sites11a-header { min-height: 0; }
  .sites11a-deployment-banner { padding: 8px 12px; font-size: 12px; line-height: 1.4; }
  #scenario_safety_banner { font-size: 14px; }
  .hsf-refresh-warning { margin: 8px; font-size: 14px; }
  .sites11a-route-page:not(.sites11a-forecast-page) { width: calc(100% - 16px); padding: 16px 12px; margin: 12px auto; }
  .sites11a-route-page h1 { font-size: clamp(26px,6vw,36px); }
  .sites11a-route-page h2 { font-size: 22px; }
  .sites11a-route-page h3 { font-size: 18px; }
  [id] { scroll-margin-top: 64px; }

  /* Counts stay visible; the full synopsis remains available on demand. */
  .forecast-summary-strip { position: static; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
  .forecast-summary-count-card { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; width: 100%; min-width: 0; }
  .forecast-summary-copy { width: 100%; }
  .forecast-summary-copy.hsf-summary-collapsed > :not(.hsf-summary-toggle) { display: none; }
  .hsf-summary-toggle { display: block; min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: #34422f; font: inherit; font-weight: 700; text-align: left; }
  /* Match the map tool buttons (14px) and Map controls date range (13px). */
  #alert_summary .forecast-summary-copy h3 { font-size: 14px; line-height: 1.45; }
  #alert_summary .forecast-summary-copy p { font-size: 13px; line-height: 1.35; }

  #forecast_control_toggle_ui { display: block; width: 100%; }
  .forecast-control-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 54px; padding: 9px 12px; background: #fff; border: 1px solid #cfd5c9; color: #34422f; text-align: left; }
  .forecast-control-toggle-copy { display: grid; flex: 1; }
  .forecast-control-toggle-label { font-weight: 700; }
  .forecast-control-toggle-range { font-size: 13px; }
  body.sites11a-forecast-active .sites11a-forecast-page .control-panel { display: none; flex: none; width: 100%; max-width: none; height: auto; max-height: none; overflow: visible; }
  body.sites11a-forecast-active .sites11a-forecast-page .control-panel.mobile-controls-open { display: flex; }

  /* Search, layer controls and timestamp occupy their own rows, above the map. */
  .map-wrap .map-navigation-controls { position: static; order: 3; width: 100%; max-width: none; display: none; grid-template-columns: minmax(0,1fr); gap: 6px; padding: 8px; background: #f7f8f5; }
  .map-panel.hsf-layers-open .map-navigation-controls { display: grid; }
  .map-navigation-controls .map-search-control, .map-navigation-controls .map-basemap-control { margin: 0; padding: 0; width: 100%; box-shadow: none; border: 0; }
  .map-search-row > .form-group { flex: 1; min-width: 0; }
  .map-search-row .form-control, .map-basemap-control select.form-control, .map-search-row button { min-height: 44px; height: 44px; font-size: 16px; }
  .hsf-mobile-map-tools { order: 2; display: flex; gap: 6px; flex-wrap: wrap; padding: 0 8px 8px; background: #f7f8f5; }
  .hsf-mobile-map-tools button { min-height: 44px; padding: 8px 10px; border: 1px solid #7b8872; border-radius: 3px; background: #fff; color: #34422f; font: inherit; font-size: 14px; }
  .hsf-mobile-map-tools button[aria-pressed=true], .hsf-mobile-map-tools button[aria-expanded=true] { background: #34422f; color: #fff; }
  #hsf-map-touch-help { width: 100%; margin: 2px 0 0; font-size: 12px; line-height: 1.4; }
  .map-wrap .forecast-fixed-label { position: static; order: 4; transform: none; max-width: none; width: 100%; white-space: normal; margin: 0; box-shadow: none; padding: 8px; font-size: 14px; }
  .map-wrap .map-camp-layer-panel { display: none; position: static; order: 3; width: 100%; max-width: none; box-shadow: none; padding: 8px 16px; }
  .map-panel.hsf-layers-open .map-camp-layer-panel { display: block; }
  .map-camp-layer-panel .checkbox label { min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: 15px; }
  .map-camp-layer-panel input[type=checkbox] { position: static; width: 20px; height: 20px; margin: 0; }
  #heat_map { pointer-events: none; touch-action: pan-y; }
  .map-panel:not(.hsf-map-interactive) #heat_map * { pointer-events: none !important; }
  .map-panel.hsf-map-interactive #heat_map { pointer-events: auto; touch-action: none; }
  #heat_map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; }
  #heat_map .temperature-legend-control, #heat_map .heat-risk-legend-control { display: none; }
  .hsf-legend-open #heat_map .temperature-legend-control, .hsf-legend-open #heat_map .heat-risk-legend-control { display: block; }
  #heat_map .leaflet-bottom { left: 0; right: 0; width: 100%; }
  #heat_map .temperature-legend-control { position: absolute; bottom: 18px; left: 8px; margin: 0; width: 180px; }
  #heat_map .heat-risk-legend-control { position: absolute; bottom: 88px; left: 8px; right: 8px; margin: 0; width: auto; max-width: 340px; }
  #heat_map .heat-risk-legend { min-width: 0; font-size: 12px; }
  #heat_map .leaflet-control-attribution { position: absolute; bottom: 0; right: 0; font-size: 10px; }

  /* One source of camp/report data: table on desktop, labelled cards on phones. */
  .camps-alert-overview { display: flex; flex-direction: column; gap: 12px; }
  .camps-alert-status-section { order: -1; }
  .camps-alert-introduction p { font-size: 15px; line-height: 1.5; }
  .camps-alert-introduction.hsf-intro-collapsed > p { display: none; }
  .camps-on-alert-page .table-placeholder { padding: 0; border: 0; }
  .hsf-camp-filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .hsf-camp-filters > div:first-child { grid-column: 1/-1; }
  .hsf-camp-filters button { grid-column: 1/-1; }
  .hsf-camp-filters input, .hsf-camp-filters select { font-size: 16px; min-width: 0; }
  .sites11a-table-wrap.table-scroll { overflow: visible; }
  .camps-on-alert-page .sites11a-table-wrap table.sites11a-alert-table.alert-camps-table { display: block; width: 100%; min-width: 0 !important; border: 0; }
  .sites11a-alert-table colgroup { display: none; }
  .sites11a-alert-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sites11a-alert-table tbody { display: grid; gap: 16px; }
  .sites11a-alert-table tbody tr { display: grid; grid-template-columns: minmax(0,1fr); border: 1px solid #b9c3b1; border-top: 4px solid #74806a; border-radius: 4px; background: #fff; overflow: hidden; }
  .sites11a-alert-table tbody td { display: block; width: auto; padding: 12px; border: 0; background: transparent; font-size: 16px; overflow-wrap: break-word; }
  .sites11a-alert-table .sites11a-alert-risk-cell { padding-bottom: 0; }
  .sites11a-alert-table .sites11a-risk { display: inline-block; width: auto; min-width: 0; white-space: nowrap; overflow-wrap: normal; padding: 6px 12px; border-radius: 4px; font-size: 14px; }
  .sites11a-alert-table .sites11a-alert-camp-cell { padding-top: 8px; }
  .sites11a-alert-camp-link { font-size: 19px; line-height: 1.3; }
  .sites11a-alert-table .sites11a-alert-forecast-cell { border-top: 1px solid #e1e5dc; background: #f7f8f5; }
  .sites11a-alert-table .sites11a-alert-field-report { border-top: 1px solid #e1e5dc; }
  .hsf-mobile-cell-heading { display: block; margin-bottom: 6px; font-size: 14px; color: #4e5d44; }
  .sites11a-alert-detail-button { width: 100%; min-height: 44px; margin-top: 12px; text-align: center; }

  /* Search first, then background copy; single-column expanded report fields. */
  .sites11a-report-observations-layout { display: flex; flex-direction: column; }
  .sites11a-report-observations-map-column { order: -1; width: 100%; }
  .sites11a-report-observations-introduction { margin-top: 20px; padding: 0; border: 0; }
  .sites11a-map-search > div { grid-template-columns: minmax(0,1fr); }
  .sites11a-map-search .form-group { width: 100%; }
  .sites11a-search-results { grid-template-columns: 1fr; }
  .sites11a-report-observations-image { max-height: 260px; }
  .responder-form, .responder-form-section, .sites11a-dashboard { min-width: 0; }
  .responder-form-section { padding: 14px 10px; }
  .responder-form .sites11a-card { padding: 14px 10px; }
  .sites11a-field-grid, .sites11a-abundance-row, .sites11a-care-species-option .sites11a-field-grid, .sites11a-mortality-species-option .sites11a-field-grid, .sites11a-species-details, .field-grid.mortality-core-row { grid-template-columns: minmax(0,1fr); }
  .sites11a-abundance-row { padding: 12px 0; border-bottom: 1px solid #dfe5d9; }
  .sites11a-abundance-row > strong:first-child { margin-top: 0; }
  .responder-form .form-group, .responder-form .shiny-input-container { min-width: 0; max-width: 100%; }
  .responder-form .form-control, .sites11a-map-search input, .footer-subscribe-form input { font-size: 16px; min-height: 44px; }
  .responder-form .selectize-input, .responder-form .selectize-input input { font-size: 16px; }
  .responder-form .selectize-input { min-height: 44px; }
  .responder-form button, .responder-form .btn, .sites11a-map-search button { min-height: 44px; }
  .responder-form input[type=file] { max-width: 100%; font-size: 16px; }
  .responder-form .radio label, .responder-form .checkbox label { min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
  .sites11a-public-name-field { padding-top: 0; }
}

/* October 16 phone-review annotations. */
.sites11a-alert-table .sites11a-risk.low { background: #567c40; color: #fff; }
.sites11a-alert-table .sites11a-risk.neutral { background: #666; color: #fff; }
.sites11a-basemap-control { top: auto !important; bottom: 28px; left: 10px !important; right: auto; height: auto; }
.sites11a-basemap-control .selectize-dropdown { top: auto !important; bottom: 100%; }
.sites11a-map-location-control.hsf-location-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 1px solid #b8c9d8; border-radius: 50%; padding: 10px; margin: 0; color: #24476b; background: white; box-shadow: 0 1px 5px #0003; }
.hsf-location-button svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.hsf-location-button:hover { background: #eaf1e9; }
.hsf-location-button:focus-visible { outline: 3px solid #285a88; outline-offset: 3px; }
@media (max-width: 1024px) {
  #forecast-source-details { width: 100%; padding: 12px; background: #f5f6f2; border-top: 1px solid #cfd5c9; }
  .about-page .about-overview-figure { aspect-ratio: auto; height: auto; min-height: 0; margin: 0; overflow: visible; }
  .about-page .about-overview-image { height: auto; width: 100%; }
  .about-page .about-overview-figure figcaption { position: static; height: auto; text-align: left; font-size: 13px; line-height: 1.45; }
  .about-page .about-overview-grid { padding-bottom: 18px; margin-bottom: 18px; }
  #heat_map .leaflet-popup-content { width: min(360px, calc(100vw - 72px)) !important; max-width: calc(100vw - 72px); margin: 10px 12px; }
  #heat_map .camp-popup { max-height: 300px; max-height: min(380px, calc(65svh - 85px)); min-height: 180px; font-size: 13px; line-height: 1.35; padding-right: 3px; overscroll-behavior: contain; }
  #heat_map .camp-popup .popup-header { gap: 6px; margin-bottom: 8px; padding-right: 14px; }
  #heat_map .camp-popup .popup-title { flex: 1 1 160px; font-size: 15px; line-height: 1.3; }
  #heat_map .camp-popup dl { display: block; margin: 6px 0; }
  #heat_map .camp-popup dt { float: left; clear: left; margin: 0 5px 0 0; padding: 0; font-size: inherit; }
  #heat_map .camp-popup dt::after { content: ':'; }
  #heat_map .camp-popup dd { display: block; margin: 0 0 4px; padding: 0; font-size: inherit; }
  #heat_map .camp-popup .popup-dashboard-link { clear: both; margin-top: 10px; }
  #heat_map .camp-popup .button { min-height: 44px; padding: 10px; font-size: 13px; }
  #heat_map .leaflet-popup-close-button { z-index: 2; width: 32px; height: 32px; font-size: 24px; }
  #heat_map:has(.leaflet-popup) .leaflet-control-zoom { visibility: hidden; }
}