/* Merman responsive-fit v4 patch
   Keeps every primary surface inside the visible browser/WebView width while
   preserving normal vertical scrolling and intentional pinch zoom. */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body,
.app-bar,
.app-bar .wind-hud,
.fishing-workspace,
.workspace-header,
.workspace-content,
.conditions-section,
.result-card,
.hourly-section,
.hourly-day-panel,
.hourly-table-wrap,
.weather-detail-grid,
.weather-detail-block,
.detail-metric-grid,
.species-area-grid,
.species-guide-hero,
.sighting-detail-card,
.sighting-detail-grid,
.hybrid-tabs,
.rule-row {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.app-bar,
.hero,
main,
.fishing-workspace {
  width: 100%;
}

/* Keep the header background full-bleed even while a mobile browser is
   temporarily using a wider overview layout. */
.app-bar {
  box-shadow: 0 0 0 100vmax var(--header);
  clip-path: inset(0 -100vmax);
}

/* The base stylesheet used a literal white layer for this panel. */
.fishing-outlook {
  background:
    linear-gradient(135deg, rgba(47, 107, 63, .12), transparent 58%),
    var(--surface) !important;
}

img,
video {
  max-width: 100%;
  height: auto;
}

input,
textarea,
select,
button {
  max-width: 100%;
}

dialog,
.prompt-dialog,
.mpa-dialog {
  box-sizing: border-box;
  max-width: calc(100vw - 20px);
}

.workspace-header h1,
.workspace-header p,
.conditions-section h2,
.conditions-section h3,
.result-card,
.weather-detail-block,
.sighting-detail-card {
  overflow-wrap: anywhere;
}

/* Seven forecast days fit the page instead of becoming a sideways strip. */
.day-tabs {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: visible;
  width: 100%;
}

.day-tab {
  min-width: 0;
  padding: clamp(7px, .8vw, 10px);
}

.hourly-tides {
  flex-wrap: wrap;
  overflow: visible;
}

.hourly-tides span {
  flex: 0 1 auto;
}

/* Forecast tables are defined in forecast-layout.css. */

@media (max-width: 960px) {
  /* The Fold and small laptop header becomes a compact two-column HUD. */
  .app-bar {
    min-height: 118px;
    padding: 8px 10px;
    overflow: hidden;
  }

  .app-bar .wind-hud {
    padding-right: 42px;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 6px 12px;
  }

  .app-bar .wind-hud__topline {
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 0;
  }

  .app-bar .wind-hud__topline strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-bar .wind-hud__readout,
  .app-bar .wind-hud__loading {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .app-bar .wind-hud__timeline {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  .app-bar .wind-note {
    display: none;
  }

  .app-bar .wind-time-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .app-bar .wind-time-button {
    min-width: 0;
    padding-inline: 3px;
  }

  .map-stage {
    height: calc(100svh - 118px);
  }

  .fishing-workspace {
    min-height: calc(100svh - 118px);
  }

  .workspace-content {
    width: min(100% - 20px, 1000px);
  }

  .day-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .weather-detail-grid,
  .species-area-grid,
  .sighting-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 560px) {
  .app-bar {
    min-height: 166px;
  }

  .app-bar .wind-hud {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 5px;
  }

  .app-bar .wind-hud__topline,
  .app-bar .wind-hud__readout,
  .app-bar .wind-hud__loading,
  .app-bar .wind-hud__timeline {
    grid-column: 1;
    grid-row: auto;
  }

  .app-bar .wind-hud__topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .map-stage {
    height: calc(100svh - 166px);
  }

  .fishing-workspace {
    min-height: calc(100svh - 166px);
  }

  .workspace-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .workspace-header h1 {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .workspace-header .button {
    width: auto;
    padding-inline: 12px;
  }

  .day-tabs,
  .weather-detail-grid,
  .species-area-grid,
  .sighting-detail-grid,
  .detail-metric-grid,
  .compact-tides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  
}

@media (max-width: 360px) {
  .day-tabs,
  .weather-detail-grid,
  .species-area-grid,
  .sighting-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Compact day controls on tablets. Forecast columns keep readable widths. */
@media (min-width: 521px) and (max-width: 960px) {
  .day-tabs {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
  }

  .day-tab {
    padding: 7px 6px;
  }

  .day-tab span {
    font-size: .58rem;
  }

  .day-tab strong {
    font-size: .67rem;
  }

}

/* V23: non-map screens use one normal page scroller. This avoids a nested
   forecast-table scroller trapping wheel and touch gestures. */
body:not(.map-is-active) {
  overflow-y: auto;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y pinch-zoom;
}

body:not(.map-is-active) main,
body:not(.map-is-active) .fishing-workspace {
  overflow-y: visible;
  touch-action: pan-x pan-y pinch-zoom;
}