/* ════════════════════════════════════════════════════════════════════════════
   forecast.css
   Self-contained styles for /paddlingout/forecast page.
   Does NOT depend on advancedModal.css — includes everything it needs.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 0. Josefin font-face (same files as advancedModal.css) ─────────────── */
@font-face {
  font-family: 'Josefin_Medium';
  src: url('/fonts/JosefinSans-Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Josefin_Bold';
  src: url('/fonts/JosefinSans-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Josefin_Light';
  src: url('/fonts/JosefinSans-Light.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Josefin_Regular';
  src: url('/fonts/JosefinSans-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Josefin_SemiBold';
  src: url('/fonts/JosefinSans-SemiBold.ttf') format('truetype');
  font-display: swap;
}

/* ── 1. Brand tokens ─────────────────────────────────────────────────────── */
:root {
  --bg:           #080808;
  --surface:      #18160f;   /* warm dark card — clearly visible on #080808  */
  --surface-b:    #1e1c12;   /* slightly lighter warm card                   */
  --fg:           #ede8df;
  --muted:        rgba(237,232,223,0.55);
  --gold:         #b5935a;
  --gold-bright:  #d9bd7b;
  --line:         rgba(181,147,90,0.20);
  --line-gold:    rgba(181,147,90,0.52);
  --critical:     #FF2D20;
  --moderate:     #FFA500;
  --good:         #4CAF50;
  --ease:         cubic-bezier(0.76, 0, 0.24, 1);
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Josefin Sans', 'Josefin_Bold', Arial, sans-serif;
}

/* ── 2. --modal-* variables (components depend on these) ────────────────── */
/*
   RatingHero, SafetyWarnings use --modal-bg-dark for card backgrounds and
   --modal-text for text colour. We set brand-appropriate warm dark surfaces
   so the card is visually distinct from the #080808 page.
*/
:root,
html.dark-theme {
  --modal-bg:           #2a2518;
  --modal-bg-light:     #312d1e;
  --modal-bg-dark:      #2a2518;
  --modal-text:         #ede8df;
  --modal-text-light:   rgba(237,232,223,0.75);
  --modal-text-subtle:  rgba(237,232,223,0.45);
  --modal-accent:       #b5935a;
  --modal-border:       rgba(181,147,90,0.35);
  --modal-success:      #4CAF50;
  --modal-warning:      #FFA500;
  --modal-danger:       #FF2D20;
  --modal-info:         #b5935a;
}

/* ── 3. Page base ────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--fg);
  margin: 0;
  min-height: 100vh;
}
.theme-toggle-icon { display: none !important; }

/* ── 4. Header hidden — this page has its own hero ──────────────────────── */

/* ── 5. Footer ───────────────────────────────────────────────────────────── */
footer {
  display: block !important;
  visibility: visible !important;
  background: transparent !important;
  border-top: 1px solid var(--line);
  padding: 1.5rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* ── 6. Main layout ──────────────────────────────────────────────────────── */

/* Lake background — injected by JS after spot data loads */
.forecast-lake-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: blur(72px) brightness(0.11) saturate(0.18);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  animation:
    lakeBgReveal 2.8s 0.4s ease-out forwards,
    lakeBgDrift  120s 3.2s linear infinite alternate;
}
@keyframes lakeBgReveal {
  to { opacity: 1; }
}
@keyframes lakeBgDrift {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.07) translate(-1%, -0.6%); }
}

/* storestyle.css gives <main> side padding — kill it for this page */
main.forecast-main {
  padding: 0 0 4rem !important;
  width: 100% !important;
}

.forecast-main {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 0 4rem;
  display: flex;
  flex-direction: column;
}

/* ── 7. Page hero header ─────────────────────────────────────────────────── */

/* Hide shared header — this page has its own brand treatment */
.header { display: none !important; }

/* Hero container — truly full-viewport-width (lives outside max-width <main>) */
.forecast-page-header {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  width: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 2rem 1.75rem;
  margin-bottom: 0;
  background: var(--surface); /* fallback while image loads */
}

/* Gradient overlay — readable text, dramatic feel */
.forecast-page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0.08) 0%,
    rgba(8,8,8,0.30) 45%,
    rgba(8,8,8,0.90) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* The lake photo itself */
.forecast-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0;
  transform: scale(1.04);
  animation: heroReveal 1.4s 0.08s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes heroReveal {
  to { opacity: 1; transform: scale(1.0); }
}

/* Back arrow — pinned top-left */
.forecast-back-btn {
  position: absolute;
  top: 1.1rem;
  left: 1.5rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 34px;
  justify-content: center;
  border-radius: 50%;
  background: rgba(8,8,8,0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(181,147,90,0.30);
  font-size: 1.1rem;
  color: var(--gold-bright);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.forecast-back-btn:hover {
  background: rgba(181,147,90,0.18);
  border-color: rgba(181,147,90,0.65);
}

/* Lake name + location overlaid on image */
.forecast-page-title {
  position: relative;
  z-index: 2;
}
.forecast-page-title h2 {
  margin: 0 0 0.2rem;
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
#forecastLakeLocation {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: rgba(237,232,223,0.82);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* ── 8. Loading ──────────────────────────────────────────────────────────── */
.forecast-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 5rem 2rem;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.forecast-spinner {
  width: 30px; height: 30px;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: fcast-spin 0.9s linear infinite;
}
@keyframes fcast-spin { to { transform: rotate(360deg); } }

/* ── 9. Error ────────────────────────────────────────────────────────────── */
.forecast-error {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 5rem 2rem;
  text-align: center;
}
.forecast-error-icon { font-size: 2.5rem; color: var(--critical); }
.forecast-error h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
}
.forecast-error p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--muted);
}
.forecast-retry-btn {
  margin-top: 0.5rem;
  padding: 0.5rem 1.4rem;
  background: none;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.forecast-retry-btn:hover { background: var(--gold); color: var(--bg); }

/* ── 10. Content wrapper ─────────────────────────────────────────────────── */
.forecast-content {
  flex-direction: column;
  gap: 1rem;
}

/* ── 11. Alert drawer ────────────────────────────────────────────────────── */
.forecast-alert-drawer[hidden] {
  display: none !important;
}

.forecast-alert-banner {
  position: relative;
  margin-top: -0.15rem;
  border-radius: 8px;
  border: 1px solid rgba(181, 147, 90, 0.28);
  border-left: 4px solid var(--moderate);
  background: linear-gradient(135deg, rgba(28, 22, 8, 0.94), rgba(18, 14, 4, 0.90));
  box-shadow: 0 14px 44px rgba(0,0,0,0.32);
  overflow: hidden;
}

.briefing-kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.alert-summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 62px;
  padding: 0.8rem 3.1rem 0.8rem 0.9rem;
  border: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}

.alert-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 165, 0, 0.12);
  border: 1px solid rgba(255, 165, 0, 0.45);
  color: var(--moderate);
  font-family: var(--font-sans);
  font-weight: 700;
  flex: 0 0 auto;
}

.alert-summary-copy {
  display: block;
  min-width: 0;
}

.alert-summary-title {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: ivory;
}

.alert-dismiss {
  position: absolute;
  top: 0.72rem;
  right: 0.72rem;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(237,232,223,0.12);
  border-radius: 50%;
  background: rgba(255,255,255,0.035);
  color: rgba(237,232,223,0.72);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

.alert-details {
  padding: 0.1rem 1rem 1rem 1rem;
}

.alert-items {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.2rem;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.alert-item-icon {
  font-size: 1.05rem;
  line-height: 1.55;
  flex-shrink: 0;
}

.alert-item-text {
  font-family: var(--font-serif);
  font-size: 0.97rem;
  line-height: 1.38;
  color: rgba(237,232,223,0.84);
  padding-top: 0.12rem;
}

/* ── 12. RatingHero card ─────────────────────────────────────────────────── */
#ratingHeroContainer {
  margin-bottom: 0;
}
/* Hard-code the card surface — no variables, no ambiguity.
   #2a2518 = warm dark brown, clearly distinct from #080808 page. */
#ratingHeroContainer .rating-hero {
  background: #2a2518 !important;
  border: 1px solid rgba(181,147,90,0.55) !important;
  border-radius: 10px !important;
  padding: clamp(1rem, 2.4vw, 1.35rem) !important;
  color: #ede8df !important;
  box-shadow:
    0 4px 32px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(217,189,123,0.10) !important;
}

/* ── 12b. RatingHero weather stat refinement ────────────────────────────── */
/*
   Drop the circular text badges (AIR/WND etc.) — they read as clipart.
   Replace with: large Cormorant Garamond values, gold micro-labels, clean dividers.
*/

/* Hide the circular abbreviation badges entirely */
#ratingHeroContainer .weather-icon {
  display: none !important;
}

/* Each stat cell: column-centred, clip bar flush to bottom edge */
#ratingHeroContainer .weather-stat {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.22rem !important;
  padding: 0.85rem 0.5rem 0 !important;  /* bottom pad = 0 so bar sits flush */
  border-radius: 0 !important;
  min-height: 72px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Elegant serif value — big, readable, confident */
#ratingHeroContainer .weather-value {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  color: var(--fg) !important;
}

/* Gold micro-label — whisper, not shout */
#ratingHeroContainer .weather-label {
  font-family: var(--font-sans) !important;
  font-size: 0.56rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  opacity: 1 !important;
}

/* 2-column grid — Wind Dir merged in, only 4 visible cells → clean 2×2 */
#ratingHeroContainer .core-weather-inline {
  background: rgba(255,255,255,0.012) !important;
  border: 1px solid rgba(181,147,90,0.16) !important;
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: unset !important;
}
#ratingHeroContainer .weather-stat {
  border-right-color:  rgba(181,147,90,0.10) !important;
  border-bottom-color: rgba(181,147,90,0.10) !important;
}

/* Hidden stat cells — removed from grid flow */
#ratingHeroContainer .stat-hidden {
  display: none !important;
}

/* Cloud cover (5th cell when shown) spans full row */
#ratingHeroContainer .stat-full-width {
  grid-column: span 2 !important;
}

/* Unit toggle: match brand */
#ratingHeroContainer .units-btn.active {
  background: rgba(181,147,90,0.18) !important;
  border-color: rgba(217,189,123,0.52) !important;
  color: var(--gold-bright) !important;
}

/* Mobile: stay column, smaller type */
@media (max-width: 780px) {
  #ratingHeroContainer .weather-stat {
    min-height: 64px !important;
    padding: 0.65rem 0.4rem 0 !important;
  }
  #ratingHeroContainer .weather-value {
    font-size: 1.12rem !important;
  }
  #ratingHeroContainer .weather-label {
    font-size: 0.52rem !important;
  }
}

/* ── 12c. Weather stat graphical bar indicators ─────────────────────────── */

/* Slim progress track — sits flush at cell bottom */
.stat-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.05);
  flex-shrink: 0;
  margin-top: auto;    /* push to bottom of the flex column */
  overflow: hidden;
}

/* Colored fill — animated via JS width change + CSS transition */
.stat-bar-fill {
  height: 100%;
  width: 0;
  transition: width 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Compass arrow — sits between value and label inside Wind cell */
.stat-compass {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  line-height: 1;
}

.stat-compass-arrow {
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ── 14. Heatmap ─────────────────────────────────────────────────────────── */
#heatmapContainer {
  margin: 0.55rem 0 1.25rem;
  min-height: 320px;
}

/* ── 15. Location info ───────────────────────────────────────────────────── */
.forecast-location-info {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.5rem;
  margin-bottom: 0;
}
.loc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.loc-row:last-child { border-bottom: none; }
.loc-label {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  min-width: 120px;
}
.loc-row span:last-child {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--fg);
  text-align: right;
}

/* ── 16. API status ──────────────────────────────────────────────────────── */
.forecast-api-status {
  text-align: center;
  padding: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 2.5rem;
}

/* ── 17. Patch hardcoded light colours that leak from component CSS ────────
   Only touch elements that are definitely wrong on dark backgrounds;
   never touch heatmap, rating ring, or score colours.              */
.warning-content          { color: var(--fg) !important; }
.feedback-thanks          { color: #6abf7b !important; }

/* ── 18. Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  main.forecast-main { padding: 0 0 3rem !important; }
  .forecast-body { padding: 1.5rem 1.25rem 0; }
}
@media (max-width: 600px) {
  main.forecast-main { padding: 0 0 2.5rem !important; }
  .forecast-body { padding: 1.25rem 0.75rem 0; }
  .forecast-page-header { min-height: 220px; }
  .alert-summary { padding-right: 3rem; }
  .alert-details { padding-left: 1rem; }
  .loc-row {
    display: grid;
    gap: 0.35rem;
  }
  .loc-row span:last-child {
    text-align: left;
  }
}

/* ── 19. Blended hourly heatmap (khm-*) ─────────────────────────────────── */
#heatmapContainer { min-height: unset; }

.khm-wrap { display:flex; flex-direction:column; gap:1.4rem; }

/* Header */
.khm-head {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:1rem; flex-wrap:wrap;
}
.khm-eyebrow {
  display:block; margin-bottom:0.3rem;
  font-family:var(--font-sans); font-size:0.64rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--gold);
}
.khm-title {
  margin:0; font-family:var(--font-sans);
  font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--fg); line-height:1.05;
}
.khm-legend {
  display:flex; gap:0.7rem; flex-wrap:wrap;
  font-family:var(--font-sans); font-size:0.65rem;
  letter-spacing:0.08em; text-transform:uppercase; color:rgba(237,232,223,0.56);
}
.khm-legend span { display:inline-flex; align-items:center; gap:0.35rem; }
.khm-dot {
  display: inline-block !important;
  width: 0.52rem; height: 0.52rem;
  border-radius: 50%; flex-shrink: 0;
  font-style: normal; /* <i> reset */
}

/* Day container */
.khm-day { display:flex; flex-direction:column; gap:0.3rem; }

/* Day label row — contains the name, date, and floating "Best" tag */
.khm-day-label {
  position:relative;
  display:flex; align-items:baseline; gap:0.55rem;
  padding-bottom:0.2rem;
}
.khm-day-label strong {
  font-family:var(--font-sans); font-size:0.72rem;
  letter-spacing:0.12em; text-transform:uppercase; color:rgba(237,232,223,0.92);
}
.khm-day-label > span {
  font-family:var(--font-sans); font-size:0.62rem;
  letter-spacing:0.1em; color:rgba(237,232,223,0.40);
}

/* "★ Best" — positioned relative to the bar-shell, not the label row */
.khm-best-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;         /* push to far right of the label flex row */
  font-family: var(--font-sans); font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-bright);
  white-space: nowrap;
  pointer-events: none;
}

/* Bar shell: holds the bar + tick axis */
.khm-bar-shell { display:flex; flex-direction:column; gap:3px; }

/* The gradient bar itself */
.khm-bar {
  position:relative;
  height:90px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07),
    0 10px 36px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.16);
  cursor:crosshair;
  /* Reveal left→right on load */
  animation: khmReveal 0.9s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes khmReveal {
  from { clip-path: inset(0 100% 0 0 round 10px); opacity:0.6; }
  to   { clip-path: inset(0 0% 0 0 round 10px);   opacity:1;   }
}
/* stagger per day */
.khm-day:nth-child(2) .khm-bar { animation-delay: 0.05s; }
.khm-day:nth-child(3) .khm-bar { animation-delay: 0.12s; }
.khm-day:nth-child(4) .khm-bar { animation-delay: 0.19s; }

/* Gloss overlay: top rim brighter, bottom slightly darker */
.khm-gloss {
  position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 30%,
    transparent 55%,
    rgba(0,0,0,0.22) 100%);
}
/* Shimmer sweep on load */
.khm-gloss::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  animation: khmShimmer 1.1s 0.5s ease-out forwards;
  opacity:0;
}
@keyframes khmShimmer {
  0%   { transform:translateX(-120%); opacity:1; }
  100% { transform:translateX(120%);  opacity:0; }
}

/* "NOW" dashed marker */
.khm-now {
  position:absolute; top:0; bottom:0;
  transform:translateX(-50%);
  border-left:1px dashed rgba(255,255,255,0.55);
  z-index:5; pointer-events:none;
}
.khm-now span {
  position:absolute; top:6px; left:4px;
  font-family:var(--font-sans); font-size:0.48rem;
  letter-spacing:0.1em; color:rgba(255,255,255,0.6);
}

/* Best window gold line */
.khm-best-line {
  position:absolute; top:0; bottom:0;
  transform:translateX(-50%);
  width:2px;
  background:linear-gradient(180deg, var(--gold-bright) 0%, transparent 100%);
  z-index:5; pointer-events:none;
  box-shadow:0 0 8px rgba(217,189,123,0.6);
}

/* Sliding cursor — snaps to tapped hour */
.khm-cursor {
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; transform:translateX(-50%);
  background:rgba(255,255,255,0.9);
  box-shadow:0 0 0 1px rgba(255,255,255,0.25), 0 0 18px rgba(255,255,255,0.55);
  z-index:10; pointer-events:none;
  opacity:0;
  transition:left 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.15s ease;
}
.khm-cursor.visible { opacity:1; }

/* Invisible hit zones, one per hour */
.khm-hit {
  position:absolute; top:0; bottom:0;
  /* Reset ALL browser button defaults — critical for Safari */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  outline: none;
  cursor: pointer;
  z-index: 6;
  transition: background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.khm-hit:hover:not([disabled]) { background:rgba(255,255,255,0.07); }
.khm-hit.is-active             { background:rgba(255,255,255,0.11); }
.khm-hit[disabled]             { cursor:default; pointer-events:none; }

/* Tick labels below bar */
.khm-ticks {
  position:relative; height:1.1rem;
}
.khm-tick {
  position:absolute;
  transform:translateX(-50%);
  font-family:var(--font-sans); font-size:0.6rem;
  letter-spacing:0.06em; color:rgba(237,232,223,0.44);
  white-space:nowrap;
}
.khm-tick--first { transform:none; }
.khm-tick--last  { transform:translateX(-100%); }

/* Detail panel */
.khm-panel { animation: khmPanelIn 0.2s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes khmPanelIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

.khm-panel-inner {
  background:rgba(18,12,6,0.97);
  border:1px solid rgba(217,189,123,0.22);
  border-top:2px solid var(--pc, var(--gold));
  border-radius:0 0 10px 10px;
  padding:0.9rem 1.1rem 1rem;
  box-shadow:0 16px 48px rgba(0,0,0,0.44);
}

.khm-panel-hdr {
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom:0.75rem; margin-bottom:0.75rem;
  border-bottom:1px solid rgba(217,189,123,0.12);
}
.khm-panel-left { display:flex; flex-direction:column; gap:0.15rem; }

.khm-panel-time {
  font-family:var(--font-sans); font-size:0.68rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(237,232,223,0.55);
}
.khm-panel-verdict {
  font-family:var(--font-sans); font-size:0.82rem;
  font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
}
.khm-panel-score {
  font-family:var(--font-sans); font-size:2rem;
  font-weight:700; line-height:1;
}
.khm-panel-score sub {
  font-size:0.7rem; vertical-align:middle;
  color:rgba(237,232,223,0.45); margin-left:2px;
}

/* Macro grid */
.khm-macros {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(128px,1fr));
  gap:0.6rem 0.7rem;
}
.khm-macro { display:flex; align-items:center; gap:0.5rem; }
.khm-macro-icon { font-size:1.05rem; flex-shrink:0; }
.khm-macro-body { display:flex; flex-direction:column; gap:0.04rem; }
.khm-macro-label {
  font-family:var(--font-sans); font-size:0.57rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}
.khm-macro-value {
  font-family:var(--font-serif); font-size:0.98rem; color:var(--fg); line-height:1.1;
}

@media (max-width:820px) {
  .khm-head { display:grid; }
  .khm-legend { justify-content:flex-start; }
  .khm-bar  { height:78px; }
  .khm-macros { grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); }
}
@media (max-width:480px) {
  .khm-bar { height:68px; }
  .khm-panel-score { font-size:1.6rem; }
}


.amenities-list {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.amenity-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(217,189,123,0.22);
  font-family: var(--font-sans) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.amenity-pill.available {
  color: rgba(237,232,223,0.92) !important;
  background: rgba(34,197,94,0.08);
}

.amenity-pill.unavailable {
  color: rgba(237,232,223,0.44) !important;
  background: rgba(255,255,255,0.035);
}

/* ── 21. Desktop 2-column layout: hero | heatmap ────────────────────────── */
.forecast-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem 2rem 0;  /* side padding lives here, not on forecast-main */
}

@media (min-width: 900px) {
  .forecast-body {
    display: grid;
    grid-template-columns: 5fr 7fr;
    grid-template-rows: auto auto;
    gap: 3rem 3rem;
    align-items: start;
  }
  /* Explicit placement: left col + regional info stack in col 1;
     heatmap spans both rows in col 2 */
  .forecast-col-left  { grid-column: 1; grid-row: 1; }
  .forecast-col-right { grid-column: 2; grid-row: 1 / 3; }
  #locationInfo        { grid-column: 1; grid-row: 2; }
}

.forecast-col-left,
.forecast-col-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}



/* ── 23. Regional info placement ───────────────────────────────────────────
   #locationInfo is a direct child of .forecast-body.
   Desktop: grid-placed bottom-left (col 1, row 2) — see section 21 grid.
   Mobile:  flex stack — naturally last, below both columns (heatmap above). */