/* One forecast layout for every viewport. Columns keep readable widths;
   horizontal scrolling stays inside the table, with normal page scrolling. */
#weather-workspace .workspace-content {
  width: min(1440px, calc(100% - 24px));
}

.hourly-table-wrap {
  width: 100%;
  max-width: 100%;
  max-height: none;
  overflow: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y pinch-zoom;
  isolation: isolate;
}

.hourly-table-wrap:focus-visible {
  outline: 2px solid var(--sea-text);
  outline-offset: 3px;
}

.hourly-table {
  width: 100%;
  min-width: 38rem;
  max-width: none;
  table-layout: fixed;
  font-size: .875rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.hourly-table.conditions-table { min-width: 71rem; }
.hourly-table.route-forecast-table { min-width: 48rem; }
.hourly-table.comparison-table { min-width: 38rem; }
.forecast-col-time { width: 6.5rem; }
.forecast-col-wind { width: 8.5rem; }
.forecast-col-rain { width: 4.5rem; }
.forecast-col-humidity { width: 6.5rem; }
.forecast-col-seas { width: 7.5rem; }
.forecast-col-swell { width: 6.5rem; }
.forecast-col-wind-waves { width: 7.5rem; }
.forecast-col-current { width: 6rem; }
.forecast-col-water { width: 6rem; }

.hourly-table th,
.hourly-table td {
  padding: .75rem;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
  vertical-align: top;
}

.hourly-table thead th {
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .02em;
  background: var(--paper);
}

.hourly-table tbody th,
.hourly-table thead th:first-child {
  position: sticky;
  left: 0;
  width: 6.5rem;
  min-width: 6.5rem;
  white-space: normal;
  box-shadow: 1px 0 0 var(--line);
}

.hourly-table tbody th {
  z-index: 1;
  background: var(--surface);
}

.hourly-table thead th:first-child { z-index: 3; }
.hourly-table .forecast-hour { display: block; white-space: nowrap; }
.hourly-table .forecast-zone,
.hourly-table .forecast-date {
  display: block;
  margin-top: .2rem;
  font-size: .75rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hourly-table td strong { white-space: nowrap; }
.hourly-table td small {
  font-size: .8rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.forecast-scroll-hint {
  margin: .5rem 0 .75rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.hourly-section .day-tabs {
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: .5rem;
}
.hourly-section .day-tab { padding: .65rem; min-height: 44px; }
.hourly-section .day-tab span { font-size: .72rem; }
.hourly-section .day-tab strong { font-size: .85rem; }

@media (max-width: 430px) {
  #weather-workspace .workspace-content { width: 100%; }
}