/* styles.css */
:root {
  --bg-color: #f8f9fa;
  --text-color: #1a1a1a;
  --text-secondary: #666666;
  --border-color: #e0e0e0;
  --card-bg: #f8f8f8;
  --accent-color: #0066cc;
  --icon-wind: #2563eb;
  --icon-swell: #0891b2;
  --warning-bg: #fff3cd;
  --warning-text: #856404;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 2px 8px rgba(0,0,0,0.15);
  --color-wind: #22c55e;
  --color-swell: #2196F3;
  --color-tide: #7E57C2;
  --color-tide-alt: #AB47BC;

  /* Intensity scale (wind strength, swell size, accuracy grades) */
  --color-scale-blue: #3b82f6;
  --color-scale-yellow: #eab308;
  --color-scale-orange: #f97316;
  --color-scale-red: #ef4444;
  --color-scale-purple: #d946ef;
  --color-scale-gray: #9ca3af;

  /* Swell period classification */
  --color-period-long: var(--color-scale-blue);
  --color-period-short: #b45309;
  --color-period-medium: #67c23a;
  --color-period-short-alt: #e6a23c;
  --color-period-wind: var(--color-scale-gray);
  --color-period-wind-alt: #909399;

  /* Buoy depth types */
  --color-buoy-deep: #2b6cb0;
  --color-buoy-intermediate: #c87f20;
  --color-buoy-nearshore: #38a169;
  --color-buoy-deep-text: #4a90d9;
  --color-buoy-intermediate-text: #c48a30;
  --color-buoy-nearshore-text: #5aad35;

  /* Callout */
  --color-callout: #e67e22;
  --color-callout-dark: #d35400;

  /* Accent */
  --color-accent-purple: #8b5cf6;

  --text-xs:   0.7rem;
  --text-sm:   0.8rem;
  --text-base: 0.85rem;
  --text-md:   1rem;
  --text-lg:   1.1rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;

  /* Z-index scale */
  --z-base: 0;
  --z-raised: 1;
  --z-control: 10;
  --z-header: 50;
  --z-dropdown: 100;
  --z-banner: 200;
  --z-overlay: 1000;
  --z-toast: 2000;
}

[data-theme="dark"] {
  --bg-color: #1a1a2e;
  --text-color: #e0e0e0;
  --text-secondary: #a0a0a0;
  --border-color: #333355;
  --card-bg: #252542;
  --accent-color: #4da6ff;
  --icon-wind: #93b4f4;
  --icon-swell: #67d4e8;
  --warning-bg: #4a3f00;
  --warning-text: #ffc107;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 2px 8px rgba(0,0,0,0.3);
  --color-callout: #f39c12;
  --color-callout-dark: #f39c12;
  --color-buoy-deep-text: #63b3ed;
  --color-period-short-alt: #f6c95a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.5;
  min-height: 100vh;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: none;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: var(--z-header);
}

header h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.header-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.header-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.header-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.header-tagline {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.day-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent-color);
  letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  padding: 0.25rem 0.5rem;
  border-radius: 99px;
}

.day-toggle {
  display: flex;
  gap: 2px;
  border-radius: 8px;
  padding: 2px;
}

.day-toggle-btn {
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.day-toggle-btn.active {
  background: var(--accent-color);
  color: #fff;
}

.day-toggle-btn:hover:not(.active) {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#theme-toggle {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: var(--card-bg);
  cursor: pointer;
  font-size: var(--text-md);
}

#theme-toggle::before {
  content: '☀️';
}

[data-theme="dark"] #theme-toggle::before {
  content: '🌙';
}

.share-btn {
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: color 0.15s ease;
  padding: 0;
  margin-left: 0.25rem;
}

.share-btn:hover {
  color: var(--text-color);
}

.share-btn svg {
  width: 14px;
  height: 14px;
}

/* Share toast notification */
.share-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--text-color);
  color: var(--bg-color);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: var(--text-md);
  font-weight: 500;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: var(--z-toast);
  pointer-events: none;
}

.share-toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.nav-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-md);
}

/* ── Site Navigation ──────────────────────────────────────────────────────── */

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 500;
  transition: color 0.15s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--accent-color);
}

.site-nav a[id="nav-link"] {
  color: var(--accent-color);
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.nav-menu-mobile a[id="nav-link-mobile"] {
  color: var(--accent-color);
  font-weight: 600;
}

.nav-toggle {
  display: none;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: var(--card-bg);
  cursor: pointer;
  font-size: var(--text-xl);
  color: var(--text-color);
  align-items: center;
  justify-content: center;
}

.nav-menu-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  z-index: var(--z-dropdown);
  flex-direction: column;
  gap: 0.5rem;
}

.nav-menu-mobile a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color 0.15s ease;
}

.nav-menu-mobile a:hover,
.nav-menu-mobile a.active {
  color: var(--accent-color);
}

.nav-menu-mobile.open {
  display: flex;
}

@media (max-width: 600px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  header h1 {
    font-size: var(--text-lg);
  }
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
}

.map-toggles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.source-toggle {
  display: flex;
  gap: 0;
}

.source {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

.source:first-child {
  border-radius: 4px 0 0 4px;
}

.source:last-child {
  border-radius: 0 4px 4px 0;
  border-left: none;
}

.source.active {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.style-toggle {
  display: flex;
  gap: 0;
}

.map-style {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

.map-style:first-child {
  border-radius: 4px 0 0 4px;
}

.map-style:last-child {
  border-radius: 0 4px 4px 0;
}

.map-style:not(:first-child) {
  border-left: none;
}

.map-style.active {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.map-wrapper {
  position: relative;
}

.map-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  touch-action: manipulation;
  box-shadow: var(--shadow-md);
}

.fullscreen-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: var(--text-xl);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: var(--z-control);
}

.fullscreen-btn:hover {
  opacity: 1;
}

/* Fullscreen mode */
.map-wrapper.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  background: var(--bg-color);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.map-wrapper.fullscreen .map-container {
  flex: 1;
  aspect-ratio: unset;
  border-radius: 0;
}

.map-wrapper.fullscreen .time-stepper {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 12px;
  margin-top: 0;
}

.map-wrapper.fullscreen .time-step-btn {
  background: transparent;
  color: white;
}

.map-wrapper.fullscreen .time-step-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.map-wrapper.fullscreen .share-btn {
  display: none;
}

.map-wrapper.fullscreen .map-toggles {
  display: none;
}

.map-wrapper.fullscreen .time-value {
  color: white;
}

.map-wrapper.fullscreen .fullscreen-btn {
  font-size: 0;
}

.map-wrapper.fullscreen .fullscreen-btn::after {
  content: '✕';
  font-size: var(--text-md);
}

.uh-map {
  aspect-ratio: auto;
  max-height: 500px;
}

.map-wrapper.fullscreen .uh-map {
  max-height: none;
  height: 100%;
}

/* Map zoom wrapper */
.map-zoom-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: grab;
}

.map-zoom-wrapper.dragging {
  cursor: grabbing;
}

.map-zoom-wrapper.zoomed {
  cursor: grab;
}

.map-zoom-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.15s ease-out;
  pointer-events: none;
  user-select: none;
}

.map-zoom-wrapper .region-overlay {
  transform-origin: center center;
  transition: transform 0.15s ease-out;
}

/* Map zoom controls */
.map-controls {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: var(--z-control);
}

.map-control-btn {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: var(--text-xl);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s, background-color 0.2s;
}

.map-control-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.7);
}

.map-control-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.map-control-btn svg {
  width: 14px;
  height: 14px;
}

.map-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Region overlay canvas */
.region-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Time Stepper */
.time-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0;
  justify-content: center;
}

.time-stepper .day-toggle {
  margin-right: auto;
}

.time-stepper .forecast-date {
  margin-left: auto;
}

.time-step-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #ffffff;  /* White background in light mode */
  color: #333333;  /* Dark icon color */
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.time-step-btn:hover {
  background: #f0f0f0;  /* Light gray on hover */
}

.time-step-btn:active {
  transform: scale(0.95);
}

.time-step-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.time-step-btn svg {
  width: 20px;
  height: 20px;
}

/* Play button */
#time-play {
  margin-left: 0.5rem;
}


#time-play svg {
  width: 16px;
  height: 16px;
}

#time-play .hidden {
  display: none;
}

.time-display {
  min-width: 80px;
  text-align: center;
}

.time-value {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-color, #333);
}

[data-theme="dark"] .time-step-btn {
  background: #2a2a2a;
  color: #e0e0e0;
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .time-step-btn:hover {
  background: #3a3a3a;
}

.forecasts {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Hide non-selected forecast articles when a region is selected */
.forecasts.has-selection .forecast:not(.selected) {
  display: none;
}

.forecast {
  padding: 1rem;
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.forecast h2 {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.forecast-title-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.region-bbox-img {
  width: auto;
  height: 60px;
  border-radius: 8px;
  flex-shrink: 0;
  background-color: var(--card-bg);
}

.region-detail {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.forecast-data-icons {
  display: none;
}

.forecast-icon {
  width: 18px;
  height: 13px;
  opacity: 0.45;
}

.forecast-icon-wind {
  color: var(--color-wind);
  opacity: 0.7;
}

.forecast-icon-wave,
.forecast-icon-tide {
  color: var(--text-secondary);
}

.forecast p {
  color: var(--text-secondary);
  font-size: var(--text-md);
}

/* Wind description (AI-generated) */
.forecast p[id$="-desc"]:not([id$="-swell-desc"]) {
  border-left: 3px solid var(--color-wind);
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--color-wind) 4%, transparent);
  border-radius: 4px;
  margin-top: 0.5rem;
  font-size: var(--text-base);
  line-height: 1.5;
}

/* Swell description (AI-generated) */
.forecast p[id$="-swell-desc"] {
  border-left: 3px solid var(--color-swell);
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--color-swell) 4%, transparent);
  border-radius: 4px;
  margin-top: 0.25rem;
  font-size: var(--text-base);
  line-height: 1.5;
}

/* Hide empty description callouts */
.forecast p[id$="-desc"]:empty,
.forecast p[id$="-swell-desc"]:empty {
  display: none;
}

/* ── Install Banner ────────────────────────────────────────────────────────── */

.install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  z-index: var(--z-banner);
  font-size: var(--text-base);
}

.install-banner.hidden {
  display: none;
}

.install-banner-text {
  color: var(--text-color);
}

.install-banner-btn {
  background: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
}

.install-banner-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}

footer {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.warning {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--warning-bg);
  color: var(--warning-text);
  border-radius: 8px;
  font-size: var(--text-base);
}

.warning::before {
  content: '⚠️ ';
}

/* Past data warning - displayed below model run info */
.past-warning {
  margin-top: 0;
  margin-bottom: 0;
  flex-basis: 100%;
}

.hidden {
  display: none;
}

/* ── Loading / Skeleton States ────────────────────────────────────────────── */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}



.wind-sparkline-container:empty,
.tide-sparkline-container:empty {
  min-height: 2.5rem;
  background: var(--border-color);
  border-color: transparent;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.swell-summary:empty {
  min-height: 3rem;
  background: var(--border-color);
  border-color: transparent;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.dashboard-back {
  display: none;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 0.75rem;
  font-size: var(--text-base);
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: var(--accent-color);
}

.page-title {
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.page-subtitle {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}

.site-subtitle {
  font-size: var(--text-md);
  color: var(--text-secondary);
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

.section-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

.forecast-date {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.sun-times {
  font-size: inherit;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sun-times:not(:empty)::after {
  content: ' · ';
  white-space: pre;
}

/* Date row with day toggle */
.forecast-date-row {
  display: none;
}

/* Standalone forecast-date (pages without toggle) */
.forecast-date + .sun-times {
  margin-bottom: 0;
}

.sun-times .sunrise,
.sun-times .sunset {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sun-times .sun-icon {
  font-size: var(--text-md);
}

.about-content {
  max-width: 700px;
  margin: 0 auto;
}

.about-content h2 {
  font-size: var(--text-xl);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

.about-content h3 {
  font-size: var(--text-md);
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  color: var(--text-color);
}

.about-content p {
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.about-content a {
  color: var(--accent-color);
  text-decoration: none;
}

.about-content a:hover {
  text-decoration: underline;
}

.about-content figure.region-map {
  margin: 1rem 0;
  padding: 0;
}

.about-content figure.region-map img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  display: block;
  margin: 0 auto;
}

.about-content figure.region-map figcaption {
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

@media (min-width: 1100px) {
  .about-content figure.region-map img {
    max-width: 700px;
  }
}

.about-content ul.region-details {
  color: var(--text-secondary);
  margin: 0.75rem 0;
  padding-left: 1.5rem;
  line-height: 1.5;
}

.about-content ul.region-details li {
  margin-bottom: 0.5rem;
}

/* About page: Table of Contents */
.about-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.about-toc a {
  font-size: var(--text-base);
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  border: 1px solid var(--border-color);
  transition: color 0.15s, border-color 0.15s;
}

.about-toc a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* About page: Lead paragraph */
.about-lede {
  font-size: var(--text-md);
  color: var(--text-color);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* About page: Callout boxes */
.about-callout {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.about-callout p {
  margin-bottom: 0.5rem;
}

.about-callout p:last-child {
  margin-bottom: 0;
}

.about-callout-title {
  font-weight: 700;
  font-size: var(--text-md);
  margin-bottom: 0.5rem;
}

.about-callout-warn {
  background: var(--warning-bg);
  border-left: 3px solid var(--warning-text);
}

.about-callout-warn .about-callout-title {
  color: var(--warning-text);
}

.about-callout-warn p {
  color: var(--warning-text);
  font-size: var(--text-base);
  line-height: 1.5;
}

.about-callout-info {
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  border-left: 3px solid var(--accent-color);
}

.about-callout-info .about-callout-title {
  color: var(--accent-color);
}

.about-callout-info p {
  font-size: var(--text-base);
}

.about-callout-note {
  background: color-mix(in srgb, var(--color-callout) 8%, transparent);
  border-left: 3px solid var(--color-callout);
}

.about-callout-note .about-callout-title {
  color: var(--color-callout-dark);
}

.about-callout-note p {
  font-size: var(--text-base);
}

[data-theme="dark"] .about-callout-note {
  background: color-mix(in srgb, var(--color-callout) 10%, transparent);
  border-left-color: var(--color-callout);
}

[data-theme="dark"] .about-callout-note .about-callout-title {
  color: var(--color-callout);
}

/* About page: Link grid inside callout */
.about-link-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.about-link-grid a {
  display: block;
  font-size: var(--text-base);
  color: var(--warning-text);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--warning-text) 10%, transparent);
  text-align: center;
  font-weight: 600;
  transition: background 0.15s;
}

.about-link-grid a:hover {
  background: color-mix(in srgb, var(--warning-text) 18%, transparent);
  text-decoration: none;
}

/* About page: Cards */
.about-card-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.about-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.about-card h3 {
  margin-top: 0;
  font-size: var(--text-md);
}

.about-card h4 {
  font-size: var(--text-base);
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  color: var(--text-color);
}

.about-card p:last-child {
  margin-bottom: 0;
}

/* Card accent colors by type */
.about-card-wind {
  border-left-color: var(--color-wind);
}

.about-card-tide {
  border-left-color: var(--color-tide);
}

.about-card-swell {
  border-left-color: var(--color-swell);
}

.about-card-coast {
  border-left-color: var(--color-accent-purple);
}

.about-card-accent {
  border-left-color: var(--accent-color);
}

.about-card-accent p:last-child {
  margin-bottom: 0;
}

/* About page: Period color chips */
.about-period-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.about-chip {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 99px;
  line-height: 1.4;
}

.about-chip-long {
  background: color-mix(in srgb, var(--color-scale-blue) 15%, transparent);
  color: var(--color-scale-blue);
}

.about-chip-med {
  background: color-mix(in srgb, var(--color-wind) 15%, transparent);
  color: var(--color-wind);
}

.about-chip-short {
  background: color-mix(in srgb, var(--color-period-short) 15%, transparent);
  color: var(--color-period-short);
}

.about-chip-chop {
  background: color-mix(in srgb, var(--color-scale-gray) 15%, transparent);
  color: var(--color-scale-gray);
}

/* About page: CTA link */
.about-cta {
  font-weight: 600;
  font-size: var(--text-md);
}

/* Fullscreen date display */
.fullscreen-date {
  display: none;
}

.map-wrapper.fullscreen .fullscreen-date {
  display: block;
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-color);
  padding: 0.5rem 0 1rem 0;
}

/* Wind Summary */
/* Wind strength colors */
.strength-glassy { color: var(--color-scale-blue); }
.strength-light { color: var(--color-wind); }
.strength-moderate { color: var(--color-scale-yellow); }
.strength-windy { color: var(--color-scale-orange); }
.strength-strong { color: var(--color-scale-red); }
.strength-extreme { color: var(--color-scale-purple); }


/* Data Type Toggle */
.data-type-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
}

.data-type-toggle .share-btn {
  position: absolute;
  right: 0;
}

.data-type-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.data-type-btn svg {
  width: 16px;
  height: 12px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.data-type-btn:hover {
  border-color: var(--text-secondary);
}

.data-type-btn.active svg {
  opacity: 1;
}

/* Wind active */
.data-type-btn[data-type="wind"].active {
  color: var(--color-wind);
  border-color: var(--color-wind);
  background: color-mix(in srgb, var(--color-wind) 10%, transparent);
}

.data-type-btn[data-type="wind"].active svg {
  color: var(--color-wind);
}

/* Swell active */
.data-type-btn[data-type="swell"].active {
  color: var(--color-swell);
  border-color: var(--color-swell);
  background: color-mix(in srgb, var(--color-swell) 10%, transparent);
}

.data-type-btn[data-type="swell"].active svg {
  color: var(--color-swell);
}

/* Tide active */
.data-type-btn[data-type="tide"].active {
  color: var(--color-tide);
  border-color: var(--color-tide);
  background: color-mix(in srgb, var(--color-tide) 10%, transparent);
}

.data-type-btn[data-type="tide"].active svg {
  color: var(--color-tide);
}

/* Accent line on regional-summary matching active mode */
.regional-summary[data-mode="wind"] {
  border-top: 2px solid var(--color-wind);
}

.regional-summary[data-mode="swell"] {
  border-top: 2px solid var(--color-swell);
}

.regional-summary[data-mode="tide"] {
  border-top: 2px solid var(--color-tide);
}

/* Regional Quick Summary (below map, above time picker) */
.regional-summary {
  display: flex;
  justify-content: space-between;
  gap: 0;
  padding: 0;
  margin-top: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.region-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 0;
  min-height: 5rem;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  border-right: 1px solid var(--border-color);
}

.region-block:last-child {
  border-right: none;
}

.region-block:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.region-block:active {
  transform: translateY(0);
  box-shadow: none;
}

.region-block.selected {
  background-color: var(--accent-color);
}

/* Keep all region blocks visible even when one is selected */

.regional-summary .region-block.selected .region-name,
.regional-summary .region-block.selected .region-speed,
.regional-summary .region-block.selected .region-strength,
.regional-summary .region-block.selected .region-arrow {
  color: white;
}

.region-block .region-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.region-block .region-wind {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.region-block .region-arrow {
  display: inline-block;
  font-size: var(--text-md);
}

.region-block .region-speed {
  font-size: var(--text-base);
  font-weight: 700;
}

.region-block .region-strength {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: capitalize;
}

.region-data-icons {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.region-icon {
  width: 18px;
  height: 13px;
  opacity: 0.45;
}

.region-icon-wind,
.region-icon-wave,
.region-icon-tide {
  color: var(--text-secondary);
}

.region-block:hover .region-icon,
.region-block.selected .region-icon {
  opacity: 0.85;
}

.region-block.selected .region-icon-wind,
.region-block.selected .region-icon-wave,
.region-block.selected .region-icon-tide {
  color: rgba(255, 255, 255, 0.5);
}

.regional-summary .region-icon-active {
  opacity: 1;
}

.regional-summary .region-icon-wind.region-icon-active {
  color: var(--color-wind);
}

.regional-summary .region-icon-wave.region-icon-active {
  color: var(--color-swell);
}

.regional-summary .region-icon-tide.region-icon-active {
  color: var(--color-tide);
}

.region-swell-data {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-sm);
}

.region-swell-arrow {
  font-size: var(--text-md);
}

.region-swell-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1.4;
}

.region-swell-dir {
  font-weight: 600;
  font-size: var(--text-sm);
}

.region-swell-height {
  font-weight: 700;
  font-size: var(--text-base);
}

.region-swell-period {
  font-size: var(--text-sm);
  font-weight: 600;
}

.region-swell-empty {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
}

.region-tide-data {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-sm);
}

.region-tide-trend {
  font-weight: 700;
}

.region-tide-trend.rising {
  color: var(--color-tide);
}

.region-tide-trend.falling {
  color: var(--color-tide-alt);
}

.region-tide-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 1.4;
}

.region-tide-height {
  font-weight: 700;
  font-size: var(--text-base);
}

.region-tide-next {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
}

.region-tide-empty {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Selected state overrides for swell and tide */
.regional-summary .region-block.selected .region-swell-data,
.regional-summary .region-block.selected .region-swell-data * {
  color: white;
}

.regional-summary .region-block.selected .region-tide-data,
.regional-summary .region-block.selected .region-tide-data * {
  color: white;
}

.regional-summary .region-block.selected .region-tide-trend.rising,
.regional-summary .region-block.selected .region-tide-trend.falling {
  color: white;
}

/* Style regional summary in fullscreen mode */
.map-wrapper.fullscreen .regional-summary {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  border: none;
  padding: 0.5rem;
  gap: 0.25rem;
}

.map-wrapper.fullscreen .region-block {
  color: white;
  background: transparent;
  border-radius: 8px;
}

.map-wrapper.fullscreen .region-block:hover {
  box-shadow: var(--shadow-lg);
}

.map-wrapper.fullscreen .region-block.selected {
  background: rgba(0, 102, 204, 0.8);
}

.map-wrapper.fullscreen .region-name {
  color: rgba(255, 255, 255, 0.8);
}

.map-wrapper.fullscreen .region-icon-wind,
.map-wrapper.fullscreen .region-icon-wave,
.map-wrapper.fullscreen .region-icon-tide {
  color: rgba(255, 255, 255, 0.4);
}

.map-wrapper.fullscreen .region-speed {
  color: white;
}

.map-wrapper.fullscreen .region-strength {
  color: rgba(255, 255, 255, 0.9);
}

.map-wrapper.fullscreen .region-swell-data,
.map-wrapper.fullscreen .region-tide-data {
  color: white;
}

.map-wrapper.fullscreen .region-swell-data *,
.map-wrapper.fullscreen .region-tide-data * {
  color: white;
}

.map-wrapper.fullscreen .data-type-toggle {
  display: none;
}

/* Scroll hint (mobile region selection) */
#scroll-hint {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  color: var(--accent-color);
  font-size: var(--text-base);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

#scroll-hint.visible {
  display: flex;
  opacity: 1;
}

#scroll-hint svg {
  width: 40px;
  height: 40px;
  animation: bounce-down 0.8s ease infinite;
}

@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* Subtle info links */
.map-info-link,
.forecast-info-link {
  text-align: center;
  margin-top: 0.5rem;
  font-size: var(--text-sm);
}

.map-info-link a,
.forecast-info-link a {
  color: var(--text-secondary);
  text-decoration: none;
}

.map-info-link a:hover,
.forecast-info-link a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

#forecast-run-time {
  color: var(--text-secondary);
}

#forecast-run-time:not(:empty)::after {
  content: ' · ';
}

.forecast-info-link {
  margin-top: 1rem;
}

/* Hide map-info-link in fullscreen mode */
.map-wrapper.fullscreen .map-info-link {
  display: none;
}

/* Hide right column when map is fullscreen */
.dashboard-left:has(.map-wrapper.fullscreen) ~ .dashboard-right {
  display: none;
}

/* Hide warnings in fullscreen mode */
.map-wrapper.fullscreen .warning {
  display: none;
}

/* Wind Sparkline Graph */
.wind-sparkline-container {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: transparent;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-wind);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.wind-sparkline-container:hover {
  border-color: var(--color-wind);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-wind) 20%, transparent);
}

.section-label-text {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  flex-shrink: 0;
}

.section-icon {
  width: 16px;
  height: 12px;
  flex-shrink: 0;
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
}

.section-icon-wind {
  color: var(--color-wind);
}

.section-icon-wave {
  color: var(--color-swell);
}

.section-icon-tide {
  color: var(--color-tide);
}

.wind-sparkline {
  width: 100%;
  height: auto;
  display: block;
  flex: 1;
}

.sparkline-range {
  fill: var(--accent-color);
  opacity: 0.12;
}

.sparkline-line {
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline-marker {
  fill: var(--accent-color);
  stroke: var(--card-bg);
  stroke-width: 2;
}

.sparkline-marker-glow {
  fill: var(--accent-color);
  opacity: 0.25;
}

.sparkline-grid {
  stroke: var(--border-color);
  stroke-width: 1;
  stroke-dasharray: 3, 3;
  opacity: 0.6;
}

.sparkline-label {
  font-size: 9px;
  fill: var(--text-secondary);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sparkline-label-y {
  font-size: 8px;
  fill: var(--text-secondary);
  opacity: 0.7;
}

.sparkline-arrow {
  opacity: 0.85;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}

/* Tide Sparkline */
.tide-sparkline-container {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: transparent;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-tide);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.tide-sparkline-container:hover {
  border-color: var(--color-tide);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-tide) 20%, transparent);
}

.swell-sparkline-container {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: transparent;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  border-left: 3px solid #2196F3;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.swell-sparkline-container:hover {
  border-color: #2196F3;
  box-shadow: 0 0 0 1px color-mix(in srgb, #2196F3 20%, transparent);
}

.swell-sparkline-container:empty {
  display: none;
}

.swell-sparkline {
  width: 100%;
  height: auto;
  display: block;
  flex: 1;
  background: transparent;
}

.tide-sparkline {
  width: 100%;
  height: auto;
  display: block;
  flex: 1;
  background: transparent;
}

.tide-sparkline-area {
  fill: var(--color-tide);
  opacity: 0.08;
}

.tide-sparkline-curve {
  fill: none;
  stroke: var(--color-tide);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

.tide-time-line {
  stroke: var(--accent-color);
  stroke-width: 1;
  stroke-dasharray: 3, 3;
  opacity: 0.4;
}

.tide-point {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.tide-height-label {
  font-size: 8px;
  font-weight: 600;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.tide-label-high {
  fill: var(--tide-high-color, var(--color-tide));
}

.tide-label-low {
  fill: var(--tide-low-color, var(--color-tide-alt));
}

.tide-time-label {
  font-size: 7.5px;
  font-weight: 600;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  fill: var(--text-secondary);
}

/* Tide color variables */
:root {
  --tide-high-color: var(--color-tide);
  --tide-low-color: var(--color-tide-alt);
}

/* Swell Summary */
.swell-summary {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: transparent;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--color-swell);
  margin-bottom: 0.75rem;
  overflow: hidden;
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}

.swell-components {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.swell-component {
  padding: 0.5rem 0.25rem;
  background: var(--card-bg);
  border-radius: 4px;
  min-width: 0;
  transition: background-color 0.15s ease;
}

.swell-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.swell-data {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.swell-height-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.swell-arrow {
  font-size: var(--text-md);
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
  line-height: 1.4;
}

.swell-direction {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 1.6rem;
  flex-shrink: 0;
  line-height: 1.4;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swell-degrees {
  font-size: var(--text-sm);
  font-weight: 600;
}

.swell-height {
  font-size: var(--text-base);
  font-weight: 700;
  white-space: nowrap;
}

.swell-period {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0 0.25rem;
  background: var(--border-color);
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 0;
}

.swell-energy-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border-color);
  width: 100%;
  overflow: hidden;
}

.swell-energy-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Swell size classes (for height coloring) */
.swell-size-flat { color: var(--text-secondary); }
.swell-size-small { color: var(--color-wind); }
.swell-size-moderate { color: var(--color-scale-blue); }
.swell-size-large { color: var(--color-scale-orange); }
.swell-size-xlarge { color: var(--color-scale-red); }
.swell-size-xxlarge { color: var(--color-scale-purple); }

/* Swell period classes (for period/energy bar coloring) */
.swell-period-long .swell-energy-fill { background: var(--color-scale-blue); }
.swell-period-medium .swell-energy-fill { background: var(--color-wind); }
.swell-period-short .swell-energy-fill { background: var(--color-scale-yellow); }
.swell-period-wind .swell-energy-fill { background: var(--color-scale-gray); }

/* Period badge colors */
.swell-period.period-long { background: color-mix(in srgb, var(--color-scale-blue) 15%, transparent); color: var(--color-scale-blue); }
.swell-period.period-medium { background: color-mix(in srgb, var(--color-wind) 15%, transparent); color: var(--color-wind); }
.swell-period.period-short { background: color-mix(in srgb, var(--color-scale-yellow) 15%, transparent); color: var(--color-period-short); }
.swell-period.period-wind { background: color-mix(in srgb, var(--color-scale-gray) 15%, transparent); color: #6b7280; }

/* Empty state */
.swell-empty {
  font-size: var(--text-base);
  color: var(--text-secondary);
  font-style: italic;
  padding: 0.5rem;
  text-align: center;
}

/* Swell help link */
.swell-help-link {
  font-size: var(--text-xs);
  font-weight: 600;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--border-color);
  color: var(--text-secondary);
  text-decoration: none;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.25rem;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.swell-help-link:hover {
  opacity: 1;
  color: var(--accent-color);
}

/* Two-card swell forecast layout */
.swell-forecasts {
  display: flex;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.swell-forecast-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  border-radius: 4px;
  padding: 0.25rem;
  transition: background-color 0.15s ease;
}

.swell-forecast-card-active {
  background-color: var(--border-color);
}

.swell-forecast-card:hover {
  background-color: var(--border-color);
}

.swell-forecast-card:hover .swell-component {
  background: var(--border-color);
}

.swell-time-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.25rem;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  border-radius: 4px;
}

.swell-forecast-card .swell-components {
  flex: 1;
}

.swell-forecast-card .swell-empty {
  padding: 0.25rem 0.5rem;
  text-align: left;
}

/* ── Accuracy Page ─────────────────────────────────────────────────────── */

.accuracy-content {
  max-width: 800px;
  margin: 0 auto;
}

/* Accuracy Map */
.accuracy-map-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.accuracy-map-container {
  margin-bottom: 1.5rem;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}
.accuracy-map-container canvas {
  width: 100%;
  display: block;
  cursor: grab;
}
.accuracy-map-container canvas:active { cursor: grabbing; }

/* Map Legend */
.accuracy-map-legend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0.5rem 0;
  padding: 0 0.25rem;
}
.accuracy-map-legend strong {
  font-weight: 600;
  color: var(--text-color);
  margin-right: 0.25rem;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 0.5rem;
}
.accuracy-map-legend strong + .legend-dot {
  margin-left: 0;
}

/* Map Tooltip */
.accuracy-map-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-control);
  white-space: nowrap;
  transform: translate(-50%, -100%);
  margin-top: -12px;
}
.accuracy-map-tooltip[hidden] { display: none; }
.accuracy-map-tooltip .tooltip-name {
  font-weight: 600;
}
.accuracy-map-tooltip .tooltip-grade {
  font-weight: 700;
  margin-left: 0.25rem;
}
.accuracy-map-tooltip .tooltip-detail {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* Region Accordion */
.accuracy-region {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg);
}
.accuracy-region-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s;
}
.accuracy-region-header:hover { background: rgba(128, 128, 128, 0.06); }
.accuracy-region-title { flex: 1; min-width: 0; }
.accuracy-region-title h3 { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.accuracy-region-count { font-size: var(--text-base); color: var(--text-secondary); }
.accuracy-region-summary { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.accuracy-region-metric { font-size: var(--text-base); color: var(--text-secondary); white-space: nowrap; }
.accuracy-region-desc {
  font-size: var(--text-base);
  color: var(--text-secondary);
  font-style: italic;
}
.accuracy-grade {
  font-size: var(--text-2xl); font-weight: 700;
  width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; flex-shrink: 0;
}
.accuracy-grade-green { background: color-mix(in srgb, var(--color-wind) 15%, transparent); color: var(--color-wind); }
.accuracy-grade-yellow { background: color-mix(in srgb, var(--color-scale-yellow) 15%, transparent); color: var(--color-scale-yellow); }
.accuracy-grade-red { background: color-mix(in srgb, var(--color-scale-red) 15%, transparent); color: var(--color-scale-red); }
.accuracy-grade-gray { background: rgba(128, 128, 128, 0.1); color: var(--text-secondary); }
.accuracy-region-chevron { font-size: var(--text-xl); color: var(--text-secondary); flex-shrink: 0; }
.accuracy-region-body { border-top: 1px solid var(--border-color); padding: 1rem 1.25rem; }
.accuracy-region-body[hidden] { display: none; }

.accuracy-content h2 {
  font-size: var(--text-lg);
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--text-color);
}

.accuracy-station {
  padding: 0.75rem;
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--border-color);
}
.accuracy-station.station-grade-green { border-top-color: color-mix(in srgb, var(--color-wind) 60%, transparent); }
.accuracy-station.station-grade-yellow { border-top-color: color-mix(in srgb, var(--color-scale-yellow) 60%, transparent); }
.accuracy-station.station-grade-red { border-top-color: color-mix(in srgb, var(--color-scale-red) 60%, transparent); }
.accuracy-station.station-grade-gray { border-top-color: var(--border-color); }

.accuracy-station h3,
.accuracy-station h4 {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.station-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.station-share-btn {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}
.station-share-btn svg {
  width: 14px;
  height: 14px;
}

.station-detail {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.station-link {
  color: var(--accent-color);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 400;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.station-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.station-distance {
  color: var(--text-color);
  opacity: 0.7;
  font-weight: 500;
}

.accuracy-chart-container {
  margin-bottom: 0.5rem;
  background: var(--bg-color);
  border-radius: 8px;
  padding: 0.25rem;
}

.accuracy-chart {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}

/* Chart elements */
.accuracy-grid {
  stroke: var(--border-color);
  stroke-width: 0.5;
  stroke-dasharray: 3, 3;
  opacity: 0.6;
}

.accuracy-label-y {
  font-size: 8px;
  fill: var(--text-secondary);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.accuracy-label-x {
  font-size: 9px;
  fill: var(--text-secondary);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.accuracy-axis-title {
  font-size: 8px;
  fill: var(--text-secondary);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
}

.accuracy-legend-text {
  font-size: 8px;
  fill: var(--text-secondary);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.accuracy-now-line {
  stroke: var(--text-secondary);
  stroke-width: 1;
  stroke-dasharray: 2, 3;
  opacity: 0.3;
}

.accuracy-line-forecast {
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accuracy-dot-forecast {
  fill: var(--accent-color);
}

.accuracy-line-observed {
  fill: none;
  stroke: var(--color-scale-red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accuracy-dot-observed {
  fill: var(--color-scale-red);
}

.accuracy-select-line {
  stroke: var(--text-color);
  stroke-width: 1;
  opacity: 0.4;
}

.accuracy-select-label {
  font-size: 9px;
  font-weight: 600;
  fill: var(--text-color);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.accuracy-detail {
  font-size: var(--text-base);
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background: #e5ebf1;
}
[data-theme="dark"] .accuracy-detail {
  background: var(--bg-color);
}

.accuracy-detail:empty {
  display: none;
}

.accuracy-detail-time {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 0.25rem;
  color: var(--text-secondary);
}

.accuracy-detail-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

.accuracy-detail-header {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.accuracy-detail-label {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.accuracy-detail-forecast {
  font-size: var(--text-base);
  color: var(--accent-color);
  font-weight: 600;
}

.accuracy-detail-observed {
  font-size: var(--text-base);
  color: var(--color-scale-red);
  font-weight: 600;
}

.accuracy-detail-error {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

/* Stats */
.accuracy-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.station-summary-text {
  font-size: var(--text-base);
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

.hours-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.hours-bar {
  flex: 1;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
  max-width: 120px;
}
.hours-bar-fill {
  height: 100%;
  background: var(--accent-color, var(--color-scale-blue));
  border-radius: 3px;
  transition: width 0.3s;
}
.hours-bar-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.stats-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0.25rem 0;
}
.stats-toggle:hover { color: var(--text-primary); }

.stats-detail[hidden] { display: none; }
.stats-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border-color);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 80px;
  background: var(--bg-color);
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-value {
  font-size: var(--text-base);
  font-weight: 600;
}

.accuracy-good { color: var(--color-wind); }
.accuracy-fair { color: var(--color-scale-yellow); }
.accuracy-poor { color: var(--color-scale-red); }

.accuracy-no-data {
  font-size: var(--text-base);
  color: var(--text-secondary);
  font-style: italic;
}

.accuracy-no-data-label {
  font-size: 11px;
  fill: var(--text-secondary);
  font-style: italic;
}

.accuracy-fine-print {
  margin-top: 2rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--border-color);
}

.accuracy-fine-print h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.accuracy-fine-print ul {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.accuracy-fine-print li {
  margin-bottom: 0.25rem;
}

/* Prompt when no region selected */
.accuracy-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--text-secondary);
  font-size: var(--text-md);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
}
.accuracy-prompt[hidden] {
  display: none;
}

/* Scorecard — horizontal scroll strip on mobile, grid on desktop */
.accuracy-scorecard {
  display: flex;
  overflow-x: auto;
  gap: 0.5rem;
  padding: 0.5rem 0;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
}

.scorecard-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.scorecard-item:hover {
  border-color: var(--text-secondary);
}
.scorecard-item.active {
  border-color: var(--color-scale-blue);
  background: color-mix(in srgb, var(--color-scale-blue) 8%, transparent);
}
.scorecard-item .accuracy-grade {
  font-size: var(--text-md);
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5;
}
.scorecard-name {
  font-size: var(--text-sm);
  color: var(--text-primary);
  white-space: nowrap;
}

/* Single-region view — hide all regions, show only active */
.accuracy-region {
  display: none;
}
.accuracy-region.region-active {
  display: block;
}
.accuracy-region.region-active .accuracy-region-body,
.accuracy-region.region-active .accuracy-region-body[hidden] {
  display: block;
}
.accuracy-region.region-active .accuracy-region-chevron {
  display: none;
}
.accuracy-region.region-active .accuracy-region-header {
  cursor: default;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.accuracy-region.region-active .accuracy-region-header:hover {
  background: transparent;
}
.accuracy-region.region-active .accuracy-region-title {
  flex: 1 1 100%;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.accuracy-region.region-active .accuracy-region-summary {
  flex-basis: 100%;
}
.accuracy-region.region-active.region-grade-green .accuracy-region-header {
  background: color-mix(in srgb, var(--color-wind) 6%, transparent);
}
.accuracy-region.region-active.region-grade-yellow .accuracy-region-header {
  background: color-mix(in srgb, var(--color-scale-yellow) 6%, transparent);
}
.accuracy-region.region-active.region-grade-red .accuracy-region-header {
  background: color-mix(in srgb, var(--color-scale-red) 6%, transparent);
}

/* Station tray — one at a time with nav arrows */
.station-tray-wrap {
  position: relative;
}

.accuracy-station-grid {
  display: flex;
  flex-direction: row;
  overflow-x: hidden;
  gap: 0;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.accuracy-station-grid .accuracy-station {
  flex: 0 0 100%;
  scroll-snap-align: start;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  background: var(--bg-color);
}

/* Tray navigation bar: arrows + counter */
.tray-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

.tray-arrow {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: var(--card-bg);
  box-shadow: var(--shadow-md);
  color: var(--text-color);
  font-size: var(--text-2xl);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s;
}
.tray-arrow:hover {
  background: var(--border-color);
  border-color: var(--text-secondary);
}
.tray-arrow:disabled {
  opacity: 0.25;
  cursor: default;
}

.tray-counter {
  font-size: var(--text-base);
  color: var(--text-secondary);
  min-width: 4rem;
  text-align: center;
}


/* ── Tablet Layout ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  main {
    max-width: 750px;
  }

  .about-content {
    max-width: 750px;
  }

  .forecast {
    padding: 1.25rem;
  }

  .accuracy-station-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .accuracy-station-grid .accuracy-station {
    flex: auto;
  }
}

/* ── Desktop Dashboard Layout ────────────────────────────────────────────── */

@media (min-width: 1100px) {
  :root {
    --text-xs:   0.75rem;
    --text-sm:   0.85rem;
    --text-base: 0.95rem;
  }

  header {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    border-bottom: none;
    box-shadow: none;
    position: relative;
  }

  header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: var(--border-color);
    box-shadow: var(--shadow-sm);
  }

  main {
    max-width: 1600px;
    padding: 1rem 1.5rem;
  }

  .dashboard-layout {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    justify-content: center;
  }

  .dashboard-left {
    flex: 0 0 650px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }

  .dashboard-right {
    flex: 0 0 400px;
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
  }

  /* Single-column stacked cards that fill the left column height */
  .forecasts {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0;
    flex: 1;
  }

  .forecasts .forecast {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .forecasts .forecast h2 {
    margin-bottom: 0;
  }

  .forecasts .forecast .wind-sparkline-container {
    margin-top: 0.25rem;
  }


  /* Condensed forecast cards on desktop — sparkline + icon row only */
  .forecast .forecast-data-icons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
  }

  .forecast .tide-sparkline-container,
  .forecast .swell-sparkline-container,
  .forecast .swell-summary,
  .forecast p[id$="-desc"] {
    display: none;
  }

  /* In swell mode, show swell instead of wind sparkline on condensed cards */
  .forecasts[data-mode="swell"] .forecast .wind-sparkline-container {
    display: none;
  }

  .forecasts[data-mode="swell"] .forecast .swell-summary {
    display: flex;
  }

  /* In tide mode, show tide instead of wind sparkline on condensed cards */
  .forecasts[data-mode="tide"] .forecast .wind-sparkline-container {
    display: none;
  }

  .forecasts[data-mode="tide"] .forecast .tide-sparkline-container {
    display: flex;
    margin-top: 0.25rem;
  }

  /* In condensed swell mode, hide wind section icons/labels (wind sparkline is hidden) */
  .forecasts[data-mode="swell"]:not(.has-selection) .forecast .wind-sparkline-container .section-icon,
  .forecasts[data-mode="swell"]:not(.has-selection) .forecast .wind-sparkline-container .section-label-text {
    display: none;
  }

  /* In condensed tide mode, hide wind section icons/labels (wind sparkline is hidden) */
  .forecasts[data-mode="tide"]:not(.has-selection) .forecast .wind-sparkline-container .section-icon,
  .forecasts[data-mode="tide"]:not(.has-selection) .forecast .wind-sparkline-container .section-label-text {
    display: none;
  }

  .forecast {
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .forecast:hover {
    background-color: var(--border-color);
  }

  /* Disable sparkline interaction on condensed cards */
  .forecast .wind-sparkline-container,
  .forecast .tide-sparkline-container,
  .forecast .swell-sparkline-container {
    pointer-events: none;
    cursor: default;
  }


  /* Re-enable sparkline interaction on expanded card */
  .forecasts.has-selection .forecast.selected .wind-sparkline-container,
  .forecasts.has-selection .forecast.selected .tide-sparkline-container,
  .forecasts.has-selection .forecast.selected .swell-sparkline-container {
    pointer-events: auto;
    cursor: pointer;
  }

  /* Scale SVG text for condensed cards (~1.18x scale, bump text slightly) */
  .forecast .sparkline-label {
    font-size: 10px;
  }
  .forecast .sparkline-label-y {
    font-size: 9px;
  }
  .forecast .tide-height-label {
    font-size: 9px;
  }


  /* Hide icon row and show all detail content on the expanded card */
  .forecasts.has-selection .forecast.selected .forecast-data-icons {
    display: none;
  }

  .forecasts.has-selection .forecast.selected .wind-sparkline-container {
    display: flex;
  }

  .forecasts.has-selection .forecast.selected .tide-sparkline-container,
  .forecasts.has-selection .forecast.selected .swell-sparkline-container,
  .forecasts.has-selection .forecast.selected .swell-summary,
  .forecasts.has-selection .forecast.selected p[id$="-desc"] {
    display: flex;
  }

  .forecasts.has-selection .forecast.selected p[id$="-desc"] {
    display: block;
  }

  /* Remove cursor/hover on expanded card, reduce top padding to align with map */
  .forecasts.has-selection .forecast.selected {
    cursor: default;
    padding-top: 0.25rem;
  }

  .forecasts.has-selection .forecast.selected:hover {
    background-color: var(--card-bg);
  }

  /* Dashboard back button — inline in h2 row, after thumbnail */
  .dashboard-back {
    display: none;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: none;
    color: var(--accent-color);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0;
    flex-shrink: 0;
  }

  .dashboard-back:hover {
    text-decoration: underline;
  }

  /* Show back button when a region is selected */
  .dashboard-back.visible {
    display: inline-flex;
  }


  /* Accuracy page on desktop — two-column layout */
  .accuracy-content {
    max-width: 1200px;
  }

  .accuracy-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .accuracy-left {
    flex: 1 1 0;
    position: sticky;
    top: 1rem;
    min-width: 0;
  }

  .accuracy-left .accuracy-map-container {
    margin-bottom: 0;
  }

  /* Desktop: scorecard as 2x4 grid instead of horizontal scroll */
  .accuracy-scorecard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.75rem;
    overflow-x: visible;
    padding: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .scorecard-item {
    flex-shrink: 1;
  }

  .accuracy-right {
    flex: 1 1 0;
    min-width: 0;
  }

  .accuracy-prompt {
    min-height: 200px;
    padding: 2rem;
  }

  .accuracy-region-summary { flex-wrap: nowrap; }

  /* Wider about page on desktop */
  .about-content {
    max-width: 800px;
  }

  /* Hide info link in condensed mode, show when region is selected */
  .forecast-info-link {
    display: none;
  }

  .forecasts.has-selection .forecast-info-link {
    display: block;
  }

  /* Hide region thumbnails on condensed cards, show when expanded */
  .forecast .region-bbox-img {
    display: none;
  }

  .forecasts.has-selection .forecast.selected .region-bbox-img {
    display: block;
    margin-left: auto;
  }

  .dashboard-left::-webkit-scrollbar {
    width: 4px;
  }

  .dashboard-left::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
  }
}

/* ── Buoys Page ─────────────────────────────────────────────────────────────── */

/* ── Buoy strip (sticky card selector) ── */

.buoy-strip-wrapper {
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem 0;
}

.buoy-strip {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0 1rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 960px) {
  .buoy-strip {
    justify-content: flex-start;
  }
}

@media (min-width: 1100px) {
  .buoy-strip-name {
    font-size: var(--text-md);
  }
  .buoy-strip-swell {
    font-size: var(--text-base);
  }
  .buoy-strip-time {
    font-size: var(--text-sm);
  }
  .buoy-strip-card {
    min-width: 160px;
    padding: 0.5rem 0.75rem;
  }
}

.buoy-strip::-webkit-scrollbar {
  height: 4px;
}

.buoy-strip::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}

.buoy-strip-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
  text-align: left;
  min-width: 140px;
}

.buoy-strip-card:hover {
  opacity: 0.85;
}

.buoy-strip-card-selected {
  opacity: 1;
  background: var(--card-bg);
  border-color: var(--accent-color);
  box-shadow: var(--shadow-sm);
}

.buoy-strip-all {
  border-left: 3px solid var(--text-secondary);
  font-weight: 600;
  font-size: var(--text-base);
  justify-content: center;
  min-width: auto;
  padding: 0.5rem 1rem;
}

.buoy-strip-name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-color);
}

.buoy-strip-swell {
  font-size: var(--text-sm);
  color: var(--text-color);
  opacity: 0.75;
  white-space: nowrap;
}

.buoy-strip-time {
  font-size: var(--text-sm);
  color: var(--text-color);
  opacity: 0.6;
}

/* ── Buoy content area ── */

.buoys-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.75rem 1rem 2rem;
}

.buoys-intro {
  color: var(--text-secondary);
  font-size: var(--text-base);
  margin-bottom: 0.75rem;
}

.buoy-detail-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

.buoy-detail-card .swell-direction {
  flex-direction: row;
  gap: 0.25rem;
  min-width: auto;
}

.buoy-detail-card .swell-arrow {
  font-size: var(--text-lg);
}

.buoy-detail-card .swell-direction,
.buoy-detail-card .swell-degrees {
  font-size: var(--text-base);
}

.buoy-detail-card .swell-height {
  font-size: var(--text-md);
}

.buoy-detail-card .swell-period {
  font-size: var(--text-base);
}

.buoy-map-canvas-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
  cursor: grab;
  touch-action: none;
}

.buoy-map-canvas-container.dragging {
  cursor: grabbing;
}

.buoy-map-canvas-container canvas {
  display: block;
  width: 100%;
}

.buoy-map-legend {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.5rem 0;
  font-size: var(--text-sm);
  color: var(--text-color);
  opacity: 0.8;
}

.buoy-map-legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.buoy-map-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.buoy-legend-deep { background: var(--color-buoy-deep); }
.buoy-legend-intermediate { background: var(--color-buoy-intermediate); }
.buoy-legend-nearshore { background: var(--color-buoy-nearshore); }

.buoy-map-legend-swatch {
  width: 12px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(44, 120, 200, 0.8);
  background: rgba(66, 153, 225, 0.4);
}

/* ── Regional Swell Forecast ── */

.buoy-swell-forecast {
  margin-top: 1.5rem;
}

.buoy-swell-forecast h3 {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 0.75rem;
}

.buoy-swell-forecast-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.buoy-swell-forecast-item {
  border-left: 3px solid var(--color-swell);
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--color-swell) 4%, transparent);
  border-radius: 0 8px 8px 0;
}

.buoy-swell-forecast-region {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.buoy-swell-forecast-text {
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--text-color);
  margin: 0.25rem 0 0;
}

/* ── Swell Exposure Reference ── */

.buoy-exposure-ref {
  margin-top: 1.5rem;
}

.buoy-exposure-ref h3 {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 0.25rem;
}

.buoy-exposure-intro {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin: 0 0 1rem;
}

.buoy-exposure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.buoy-exposure-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-md);
  padding: 0.5rem 0.75rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 3px solid rgba(66, 153, 225, 0.5);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.buoy-exposure-item:hover {
  border-left-color: rgba(66, 153, 225, 0.8);
  box-shadow: var(--shadow-sm);
}

.buoy-exposure-item-selected {
  border-left-color: var(--color-scale-blue);
  border-color: rgba(66, 153, 225, 0.4);
  box-shadow: 0 0 0 1px rgba(66, 153, 225, 0.2), var(--shadow-sm);
  background: rgba(66, 153, 225, 0.06);
}

.buoy-exposure-region {
  font-weight: 700;
  color: var(--text-color);
  flex-shrink: 0;
}

.buoy-exposure-range {
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .buoy-exposure-grid {
    grid-template-columns: 1fr;
  }
}

.buoy-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.buoy-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.buoy-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.buoy-card-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}


.buoy-name-link {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--accent-color);
  text-decoration: none;
}

.buoy-name-link:hover {
  text-decoration: underline;
}

.buoy-id {
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.buoy-type-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}

.buoy-type-deep {
  background: color-mix(in srgb, var(--color-buoy-deep-text) 15%, transparent);
  color: var(--color-buoy-deep-text);
}

.buoy-type-intermediate {
  background: color-mix(in srgb, var(--color-buoy-intermediate-text) 15%, transparent);
  color: var(--color-buoy-intermediate-text);
}

.buoy-type-nearshore {
  background: color-mix(in srgb, var(--color-buoy-nearshore-text) 15%, transparent);
  color: var(--color-buoy-nearshore-text);
}

.buoy-timestamp {
  font-size: var(--text-base);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.buoy-card-components {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.buoy-component {
  padding: 0.5rem;
  background: var(--card-bg);
  border-radius: 4px;
  border-left: 3px solid var(--border-color);
}

.buoy-component.swell-period-long {
  border-left-color: var(--color-buoy-deep-text);
}

.buoy-component.swell-period-medium {
  border-left-color: var(--color-buoy-deep-text);
}

.buoy-component.swell-period-short {
  border-left-color: var(--color-period-short-alt);
}

.buoy-component.swell-period-wind {
  border-left-color: var(--color-period-wind-alt);
}

.buoy-component-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.buoy-component-label {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--text-color);
}

.buoy-component-dir {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.buoy-component-row2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.buoy-energy-inline {
  width: 3rem;
  height: 6px;
  border-radius: 4px;
  background: var(--border-color);
  overflow: hidden;
  display: inline-block;
}

.buoy-energy-fill-inline {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.swell-period-long .buoy-energy-fill-inline { background: var(--color-scale-blue); }
.swell-period-medium .buoy-energy-fill-inline { background: var(--color-wind); }
.swell-period-short .buoy-energy-fill-inline { background: var(--color-scale-yellow); }
.swell-period-wind .buoy-energy-fill-inline { background: var(--color-scale-gray); }

.buoy-spread-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}

.buoy-spread {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 0.25rem;
  border-radius: 2px;
  color: var(--text-secondary);
  background: var(--border-color);
}

.buoy-spread-info {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  position: relative;
}

.buoy-spread-info::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  width: 200px;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: var(--z-control);
  box-shadow: var(--shadow-lg);
}

.buoy-spread-info:hover::after,
.buoy-spread-info:focus::after {
  opacity: 1;
}

.buoy-spread-info:focus {
  outline: none;
}

.buoy-impacts {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.buoy-impacts-heading {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.buoy-impact {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--text-base);
  flex-wrap: wrap;
}

.buoy-impact-region {
  font-weight: 600;
  color: var(--text-color);
  min-width: 5rem;
}

.buoy-impact-height {
  font-weight: 700;
  color: var(--text-color);
}

.buoy-impact-travel {
  color: var(--text-secondary);
}

.buoy-impact-eta {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.buoy-no-swell,
.buoy-no-impact {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: 0.25rem 0;
  font-style: italic;
}

.buoy-error {
  color: var(--text-secondary);
  text-align: center;
  padding: 2rem 1rem;
}

/* En-route swells: emphasized — this is what you want to know about */
.buoy-impact-enroute {
  background: color-mix(in srgb, var(--color-scale-blue) 8%, transparent);
  border-left: 2px solid var(--color-scale-blue);
  padding: 0.25rem 0.5rem;
  border-radius: 0 4px 4px 0;
}

.buoy-impact-enroute .buoy-impact-eta {
  color: var(--color-scale-blue);
  font-weight: 600;
}

/* Already arrived: muted */
.buoy-impact-arrived {
  opacity: 0.6;
}

/* ── Buoy History Chart ── */

.buoy-history-chart {
  margin: 0.5rem 0 0.75rem;
}

.buoy-history-canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
  border-radius: 4px;
}

.buoy-history-legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.buoy-history-legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.buoy-history-legend-toggle {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s;
}

.buoy-history-legend-toggle.legend-disabled {
  opacity: 0.4;
  text-decoration: line-through;
}

.buoy-history-legend-line {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
}

.buoy-history-ground {
  background: var(--color-buoy-deep-text);
}

[data-theme="dark"] .buoy-history-ground {
  background: var(--color-buoy-deep-text);
}

.buoy-history-wind {
  background: var(--color-period-short-alt);
}

[data-theme="dark"] .buoy-history-wind {
  background: var(--color-period-short-alt);
}

.buoy-history-latest {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  border: 1px solid var(--accent-color);
  background: none;
  color: var(--accent-color);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.buoy-history-latest:hover {
  background: var(--accent-color);
  color: #fff;
}

/* ── How It Works Page ─────────────────────────────────────────────────────── */

.hiw-formula {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--text-lg);
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-color);
  line-height: 1.7;
}

.hiw-formula code {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: inherit;
  background: none;
}

.hiw-explorer-container {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: relative;
  cursor: crosshair;
  touch-action: none;
  margin: 0.75rem 0;
}

.hiw-explorer-container canvas {
  display: block;
  width: 100%;
}

.hiw-explorer-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.hiw-explorer-legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hiw-explorer-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.hiw-diagram {
  margin: 1rem 0;
}

.hiw-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

.hiw-diagram figcaption {
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.hiw-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hiw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  margin: 0.75rem 0;
}

.hiw-table th,
.hiw-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.hiw-table th {
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--card-bg);
}

.hiw-table td {
  color: var(--text-color);
}

.hiw-table tr:last-child td {
  border-bottom: none;
}

.hiw-sources {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
}

.hiw-sources li {
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 3px solid var(--accent-color);
  margin-bottom: 0.5rem;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-secondary);
}

.hiw-sources li a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
}

.hiw-sources li a:hover {
  text-decoration: underline;
}

.hiw-sources li .hiw-source-detail {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 0;
}

/* ── Week View ──────────────────────────────────────────────────────────────── */

.week-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

.week-day {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}

.week-day-low-confidence {
  opacity: 0.65;
}

.week-day-header {
  margin-bottom: 0.75rem;
}

.week-day-link {
  text-decoration: none;
  color: inherit;
}

.week-day-link:hover .week-day-name {
  text-decoration: underline;
}

.week-day-name {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-right: 0.5rem;
}

.week-day-date {
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.week-day-summary {
  margin: 0.25rem 0 0;
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.4;
}

.week-day-body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Map thumbnails */
.week-maps {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.week-map-thumb {
  cursor: pointer;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  transition: border-color 0.15s;
}

.week-map-thumb:hover {
  border-color: var(--text-secondary);
}

.week-map-thumb img {
  display: block;
  width: 90px;
  height: auto;
}

.week-map-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 1px 0;
}

/* Wind bars */
.week-bars {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.week-bar-region {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.week-bar-region-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  width: 5.5rem;
  flex-shrink: 0;
  text-align: right;
}

.week-bar-pair {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.week-bar-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 1.1rem;
}

.week-bar-time {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  width: 1.3rem;
  flex-shrink: 0;
}

.week-bar-slot {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.week-bar-na {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.week-wind-arrow {
  display: inline-block;
  font-size: var(--text-sm);
  line-height: 1;
  flex-shrink: 0;
}

.week-bar-track {
  flex: 1;
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
}

.week-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}

.week-bar-speed {
  font-size: var(--text-sm);
  font-weight: 700;
  width: 1.5rem;
  text-align: right;
  flex-shrink: 0;
}

.week-note {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  margin-top: 0.5rem;
}

/* Map modal */
.week-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
}

.week-modal.open {
  display: flex;
}

.week-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.week-modal-content img {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  border-radius: 8px;
}

.week-modal-close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  z-index: var(--z-control);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: var(--text-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}

.week-modal-caption {
  text-align: center;
  color: #fff;
  font-size: var(--text-base);
  margin-top: 0.5rem;
}

.weekr-modal-detail {
  display: none;
}

.weekr-modal-region {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  padding-right: 2.5rem;
  background: #1e1e32;
  border-radius: 8px 8px 0 0;
}

[data-theme="dark"] .weekr-modal-region {
  background: #3a3a5c;
}

.weekr-modal-region-name {
  color: #fff;
  font-weight: 600;
  font-size: var(--text-md);
}

.weekr-modal-time {
  color: rgba(255,255,255,0.6);
  font-size: var(--text-base);
}

.weekr-modal-wind {
  font-size: var(--text-md);
  font-weight: 600;
  margin-left: auto;
}

.weekr-modal-wind .week-wind-arrow {
  font-size: var(--text-md);
  margin-right: 0.25rem;
}

.weekr-modal-map-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.weekr-modal-map-inner {
  position: relative;
  display: inline-block;
  transform-origin: center center;
  transition: transform 0.15s ease-out;
}

.weekr-modal-map-wrap img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  border-radius: 0 0 8px 8px;
  pointer-events: none;
  user-select: none;
}

.weekr-modal-region-box {
  display: none;
  position: absolute;
  border: 2px solid rgba(77, 166, 255, 0.9);
  background: rgba(77, 166, 255, 0.25);
  pointer-events: none;
}

.weekr-maps-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.weekr-style-toggle {
  display: flex;
  gap: 0.25rem;
}

.weekr-style-btn {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}

.weekr-style-btn.active {
  background: var(--text-color);
  color: var(--card-bg);
  border-color: var(--text-color);
}

@media (max-width: 600px) {
  .week-day-body {
    flex-direction: column;
  }

  .week-maps {
    justify-content: center;
  }

  .week-map-thumb img {
    width: 110px;
  }

  .week-bar-region-name {
    width: 4.5rem;
    font-size: var(--text-xs);
  }

  .week-day {
    padding: 0.75rem;
  }
}

/* ── Week Region View ───────────────────────────────────────────────────────── */

.weekr-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}

.weekr-region-name {
  font-size: var(--text-md);
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.weekr-chart-area {
  position: relative;
  overflow: hidden;
}

.weekr-day-band {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background: rgba(0,0,0,0.05);
  z-index: var(--z-base);
}

[data-theme="dark"] .weekr-day-band {
  background: rgba(255,255,255,0.15);
}

.weekr-chart-container {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  height: 90px;
  margin-bottom: 0.25rem;
}

.weekr-sparkline {
  width: 100%;
  height: 100%;
  display: block;
}

.weekr-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: var(--z-dropdown);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: var(--text-sm);
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -100%);
  margin-top: -8px;
  opacity: 0;
  transition: opacity 0.1s;
}

.weekr-tooltip.visible {
  opacity: 1;
}

.weekr-tooltip-time {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.weekr-tooltip-wind {
  font-weight: 600;
}

.weekr-hover-dot {
  position: absolute;
  pointer-events: none;
  z-index: var(--z-dropdown);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: var(--bg-color);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.1s;
}

.weekr-hover-dot.visible {
  opacity: 1;
}

.weekr-labels-row {
  position: relative;
  z-index: var(--z-raised);
  height: 2rem;
  margin-bottom: 0.25rem;
}

.weekr-day-label {
  position: absolute;
  text-align: center;
  line-height: 1.4;
  transform: translateX(-50%);
}

.weekr-day-name {
  font-size: var(--text-sm);
  font-weight: 600;
}

.weekr-day-full {
  display: block;
}

.weekr-day-short {
  display: none;
}

@media (max-width: 600px) {
  .weekr-day-full {
    display: none;
  }
  .weekr-day-short {
    display: block;
  }
}

.weekr-day-date {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.weekr-low {
  opacity: 0.6;
}

.weekr-speeds-row {
  position: relative;
  z-index: var(--z-raised);
  height: 1.5rem;
  overflow: hidden;
}

.weekr-speed-cell {
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
}

.weekr-speed-pair {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
}

.weekr-speed-am, .weekr-speed-pm {
  white-space: nowrap;
}

.weekr-na {
  color: var(--text-secondary);
}

.weekr-trend {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* Maps strip */
.weekr-maps-section {
  margin-top: 1rem;
}

.weekr-maps-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.weekr-maps-strip {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.weekr-map-thumb {
  cursor: pointer;
  flex-shrink: 0;
  text-align: center;
  transition: opacity 0.15s;
}

.weekr-map-thumb:hover {
  opacity: 0.8;
}

.weekr-map-thumb img {
  display: block;
  width: 80px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.weekr-map-overlay {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

@media (max-width: 600px) {
  .weekr-card {
    padding: 0.75rem;
  }

  .weekr-speed-pair {
    font-size: var(--text-xs);
    gap: 0.25rem;
  }

  .weekr-map-thumb img {
    width: 60px;
  }

  .weekr-map-overlay {
    font-size: var(--text-xs);
  }
}

@media (max-width: 960px) {
  /* Time stepper: two rows on mobile via flex-wrap */
  .time-stepper {
    flex-wrap: wrap;
    padding: 0.5rem 0;
    row-gap: 0.25rem;
  }

  /* Row 1: day toggle left, date right */
  .time-stepper .day-toggle { order: 0; }
  .time-stepper .forecast-date { order: 1; }

  /* Line break between row 1 and row 2 */
  .time-stepper::after {
    content: '';
    flex-basis: 100%;
    height: 0;
    order: 1;
  }

  /* Row 2: past-data warning (full width, between day toggle and controls) */
  .time-stepper .past-warning {
    order: 2;
  }

  /* Row 3: transport controls centered */
  .time-stepper .time-step-btn,
  .time-stepper .time-display {
    order: 3;
  }

  /* Tide summary: break time onto its own line */
  .region-tide-time {
    display: block;
  }
}