/* ==========================================================================
   SurfCheck.nz — /forecast/ page

   Sections (top to bottom):
     1. Page intro band
     2. "This weekend" hero: banner + 4 window tabs + top-5 list
     3. "7-day outlook": day picker + filter pills + ranked spot list
   ========================================================================== */

body.forecast-page { background: var(--bg); }

/* ── Page intro ─────────────────────────────────────────────────────────── */
.forecast-page-intro {
  background: linear-gradient(180deg, rgba(95,183,255,0.08) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.forecast-page-intro-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gap-6) var(--gap-5) var(--gap-5);
}
/* Matches .learn-hero-title / .stories-hero-title — solid white, same font sizing */
.forecast-page-title {
  margin: 0 0 var(--gap-3);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--text);
}
/* Matches .learn-hero-subtitle / .stories-hero-subtitle */
.forecast-page-sub {
  margin: 0;
  color: var(--text-2);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  max-width: 64ch;
}

/* ── "This weekend" section ─────────────────────────────────────────────── */
.weekend-section {
  background: rgba(95,183,255,0.04);
  border-bottom: 1px solid var(--border);
}
.weekend-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gap-5);
}
/* .weekend-eyebrow removed — replaced by an <h2 class="day-section-head">
   so "This weekend" and "7-day outlook" share the same large heading style. */

/* Banner — single hero card linking to the best weekend slot's spot page */
.weekend-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
  padding: var(--gap-4) var(--gap-5);
  background: linear-gradient(135deg, rgba(77,222,255,0.12) 0%, rgba(95,183,255,0.06) 100%);
  border: 1px solid rgba(77,222,255,0.35);
  border-radius: var(--r-3);
  color: var(--text);
  text-decoration: none;
  margin-bottom: var(--gap-4);
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.weekend-banner:hover {
  background: linear-gradient(135deg, rgba(77,222,255,0.18) 0%, rgba(95,183,255,0.1) 100%);
  border-color: rgba(77,222,255,0.55);
}
.weekend-banner:active { transform: scale(0.998); }
.weekend-banner-loading,
.weekend-banner-empty {
  font-size: 14px;
  color: var(--text-2);
}
.weekend-banner-text { flex: 1; min-width: 0; }
.weekend-banner-line1 {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.weekend-banner-line1 strong { color: var(--epic); font-weight: 800; }
.weekend-banner-line2 {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  font-size: 13px;
  color: var(--text-2);
}
.weekend-banner-rating {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid;
}
.weekend-banner-rating.epic { color: var(--epic); border-color: color-mix(in srgb, var(--epic) 45%, transparent); background: color-mix(in srgb, var(--epic) 10%, transparent); }
.weekend-banner-rating.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); }
.weekend-banner-rating.mint { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 50%, transparent); background: color-mix(in srgb, var(--mint) 10%, transparent); }
.weekend-banner-rating.grim { color: var(--grim); border-color: color-mix(in srgb, var(--grim) 50%, transparent); background: color-mix(in srgb, var(--grim) 10%, transparent); }
.weekend-banner-rating.fair { color: var(--fair); border-color: color-mix(in srgb, var(--fair) 45%, transparent); background: color-mix(in srgb, var(--fair) 10%, transparent); }
.weekend-banner-rating.poor { color: var(--poor); border-color: color-mix(in srgb, var(--poor) 45%, transparent); background: color-mix(in srgb, var(--poor) 10%, transparent); }
.weekend-banner-rating.flat { color: var(--text-muted); border-color: var(--border); background: rgba(255,255,255,0.03); }
.weekend-banner-arrow {
  font-size: 26px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Window tabs */
.weekend-tabs {
  display: flex;
  gap: var(--gap-2);
  margin-bottom: var(--gap-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.weekend-tabs::-webkit-scrollbar { display: none; }
.weekend-tab {
  flex: 1 1 0;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text-2);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.weekend-tab:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}
.weekend-tab.active {
  background: rgba(95,183,255,0.12);
  border-color: var(--accent);
  color: var(--text);
}
.weekend-tab-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Date subhead inside each tab — filled by JS, e.g. "30 May". Answers
   "which Saturday?" without the user having to guess. */
.weekend-tab-date {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.weekend-tab.active .weekend-tab-date { color: var(--text-2); }
.weekend-tab-score {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.weekend-tab.epic .weekend-tab-score { color: var(--epic); }
.weekend-tab.good .weekend-tab-score { color: var(--good); }
.weekend-tab.mint .weekend-tab-score { color: var(--mint); }
.weekend-tab.grim .weekend-tab-score { color: var(--grim); }
.weekend-tab.fair .weekend-tab-score { color: var(--fair); }
.weekend-tab.poor .weekend-tab-score { color: var(--poor); }
.weekend-tab.flat .weekend-tab-score { color: var(--text-muted); }
/* Top spot name inside each window tab — answers "8.7 at which beach?".
   Updates as the weekend filter changes (e.g. Near me re-ranks the top). */
.weekend-tab-spot {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weekend-tab.active .weekend-tab-spot { color: var(--text); }

/* Top-5 list inside the weekend section */
.weekend-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}
.weekend-loading,
.weekend-empty {
  text-align: center;
  padding: var(--gap-5);
  color: var(--text-muted);
  font-size: 14px;
}
.weekend-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--gap-3);
  align-items: center;
  padding: var(--gap-3) var(--gap-4);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.weekend-row:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--border-2);
}
.weekend-row-rank {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.weekend-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.weekend-row-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.weekend-row-region {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.weekend-row-meta {
  font-size: 12.5px;
  color: var(--text-2);
}
.weekend-row-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.weekend-row-num {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.weekend-row-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.weekend-row-score.epic .weekend-row-num,
.weekend-row-score.epic .weekend-row-label { color: var(--epic); }
.weekend-row-score.good .weekend-row-num,
.weekend-row-score.good .weekend-row-label { color: var(--good); }
.weekend-row-score.mint .weekend-row-num,
.weekend-row-score.mint .weekend-row-label { color: var(--mint); }
.weekend-row-score.grim .weekend-row-num,
.weekend-row-score.grim .weekend-row-label { color: var(--grim); }
.weekend-row-score.fair .weekend-row-num,
.weekend-row-score.fair .weekend-row-label { color: var(--fair); }
.weekend-row-score.poor .weekend-row-num,
.weekend-row-score.poor .weekend-row-label { color: var(--poor); }
.weekend-row-score.flat .weekend-row-num,
.weekend-row-score.flat .weekend-row-label { color: var(--text-muted); }

/* ── "7-day outlook" section ────────────────────────────────────────────── */
.day-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--gap-5);
}
.day-section-head {
  margin: 0 0 var(--gap-4);
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Day picker tabs — 7 across on desktop, horizontal scroll on mobile */
.day-tabs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--gap-2);
  margin-bottom: var(--gap-4);
}
.day-tabs-loading {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: var(--gap-4);
}
.day-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  color: var(--text-2);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  min-width: 0;
}
.day-tab:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}
.day-tab.active {
  background: rgba(95,183,255,0.12);
  border-color: var(--accent);
  color: var(--text);
}
.day-tab-dow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.day-tab-date {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.day-tab-score {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.day-tab.epic .day-tab-score { color: var(--epic); }
.day-tab.good .day-tab-score { color: var(--good); }
.day-tab.mint .day-tab-score { color: var(--mint); }
.day-tab.grim .day-tab-score { color: var(--grim); }
.day-tab.fair .day-tab-score { color: var(--fair); }
.day-tab.poor .day-tab-score { color: var(--poor); }
.day-tab.flat .day-tab-score { color: var(--text-muted); }
.day-tab-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Top spot name inside each day tab — driven by the day-filter. */
.day-tab-spot {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Filter row (compact — no sort here; sort is implicit "by rating for this day") */
.day-toolbar {
  background: rgba(6,18,31,0.5);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--gap-2) var(--gap-3);
  margin-bottom: var(--gap-4);
}
.day-filter-row {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.day-filter-row::-webkit-scrollbar { display: none; }
/* Mobile: wrap pills into visible rows instead of a hidden side-scroller,
   matching the spots page (Che 2026-06-12). Covers both the weekend and
   day filter rows (same class). */
@media (max-width: 600px) {
  .day-filter-row { flex-wrap: wrap; overflow-x: visible; }
}
.filter-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--accent-2, #7ac8ff);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  white-space: nowrap;
  opacity: 0.9;
}
.filter-clear:hover { opacity: 1; text-decoration: underline; }
.filter-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  margin-right: 4px;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-pill:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.filter-pill.active { background: var(--accent); color: #04101c; border-color: var(--accent); }
.filter-pill .pill-icon { font-size: 10px; color: var(--sand); }
.filter-pill.active .pill-icon { color: #04101c; }
.filter-pill .count { font-variant-numeric: tabular-nums; opacity: 0.75; }

/* Day list — spot rows */
.day-list { display: flex; flex-direction: column; gap: var(--gap-3); }
.day-loading,
.day-error,
.day-empty {
  text-align: center;
  padding: var(--gap-7) var(--gap-5);
  color: var(--text-muted);
  font-size: 14px;
}
.day-error { color: var(--poor); }

/* Progressive-render loader: auto-fires via IntersectionObserver near the
   bottom; stays clickable as a manual fallback. */
.day-more {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.day-more:hover { background: rgba(255,255,255,0.07); }
.day-more-count { color: var(--text-muted); font-weight: 500; }

.day-row {
  display: block;
  padding: var(--gap-3) var(--gap-4);
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.day-row:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-2);
}
.day-row-main { display: flex; flex-direction: column; gap: var(--gap-2); }
.day-row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap-3);
}
.day-row-head-text { min-width: 0; }
.day-row-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.day-row-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
}
.day-row .save-star {
  position: relative;
  top: 0; right: 0;
  width: 34px; height: 34px;
  font-size: 16px;
  flex-shrink: 0;
}

.day-row-rating {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.row-rating-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.row-rating-num.epic { color: var(--epic); }
.row-rating-num.good { color: var(--good); }
.row-rating-num.mint { color: var(--mint); }
.row-rating-num.grim { color: var(--grim); }
.row-rating-num.fair { color: var(--fair); }
.row-rating-num.poor { color: var(--poor); }
.row-rating-num.flat { color: var(--text-muted); }
.row-rating-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid;
}
.row-rating-label.epic { color: var(--epic); border-color: color-mix(in srgb, var(--epic) 45%, transparent); background: color-mix(in srgb, var(--epic) 10%, transparent); }
.row-rating-label.good { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent);  background: color-mix(in srgb, var(--good) 10%, transparent); }
.row-rating-label.mint { color: var(--mint); border-color: color-mix(in srgb, var(--mint) 50%, transparent);  background: color-mix(in srgb, var(--mint) 10%, transparent); }
.row-rating-label.grim { color: var(--grim); border-color: color-mix(in srgb, var(--grim) 50%, transparent);  background: color-mix(in srgb, var(--grim) 10%, transparent); }
.row-rating-label.fair { color: var(--fair); border-color: color-mix(in srgb, var(--fair) 45%, transparent); background: color-mix(in srgb, var(--fair) 10%, transparent); }
.row-rating-label.poor { color: var(--poor); border-color: color-mix(in srgb, var(--poor) 45%, transparent); background: color-mix(in srgb, var(--poor) 10%, transparent); }
.row-rating-label.flat { color: var(--text-muted); border-color: var(--border); background: rgba(255,255,255,0.03); }
.row-rating-reason {
  font-size: 13px;
  color: var(--text-2);
  flex: 1 1 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Distance label — shown only when GPS is granted. Matches /spots/ styling. */
.row-distance {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(95,183,255,0.10);
  border: 1px solid rgba(95,183,255,0.25);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Inside the weekend top-5 row layout the distance becomes a meta line. */
.weekend-row-main .row-distance {
  margin-top: 2px;
  align-self: flex-start;
}

/* Within-day 4-chip strip (12am · 6am · 12pm · 6pm) */
.day-row-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  max-width: 510px;
}
.day-chip {
  text-align: center;
  padding: 6px 0 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.day-chip.epic { background: color-mix(in srgb, var(--epic) 10%, transparent);  border-color: color-mix(in srgb, var(--epic) 30%, transparent); }
.day-chip.good { background: color-mix(in srgb, var(--good) 10%, transparent);  border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.day-chip.mint { background: color-mix(in srgb, var(--mint) 10%, transparent);  border-color: color-mix(in srgb, var(--mint) 30%, transparent); }
.day-chip.grim { background: color-mix(in srgb, var(--grim) 10%, transparent);  border-color: color-mix(in srgb, var(--grim) 30%, transparent); }
.day-chip.fair { background: color-mix(in srgb, var(--fair) 10%, transparent);  border-color: color-mix(in srgb, var(--fair) 28%, transparent); }
.day-chip.poor { background: color-mix(in srgb, var(--poor) 10%, transparent); border-color: color-mix(in srgb, var(--poor) 25%, transparent); }
/* Today's tab: past sessions dim; the current chip keeps its rating colour
   and is identified by its "Now" time label only (Che: no box highlight). */
.day-chip.past { opacity: 0.45; }
.day-chip-time {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.1;
}
.day-chip-num {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.day-chip.epic .day-chip-num { color: var(--epic); }
.day-chip.good .day-chip-num { color: var(--good); }
.day-chip.mint .day-chip-num { color: var(--mint); }
.day-chip.grim .day-chip-num { color: var(--grim); }
.day-chip.fair .day-chip-num { color: var(--fair); }
.day-chip.poor .day-chip-num { color: var(--poor); }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .weekend-banner { flex-direction: column; align-items: flex-start; gap: var(--gap-3); }
  .weekend-banner-arrow { align-self: flex-end; }
  .weekend-tab { min-width: 80px; padding: 8px 10px; }
  .weekend-tab-score { font-size: 16px; }

  .day-tabs { grid-template-columns: repeat(7, minmax(72px, 1fr)); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .day-tabs::-webkit-scrollbar { display: none; }
  .day-tab { padding: 8px 6px; }
  .day-tab-score { font-size: 17px; }
  .day-tab-label { display: none; }   /* date label is enough on small screens */

  .day-row-name { font-size: 16px; }
  .row-rating-num { font-size: 20px; }
  .row-rating-reason { white-space: normal; }
  .day-row-chips { max-width: none; }
}