:root {
  /* Surflie Light Theme (Matches Reference) */
  --bg-dark: #ffffff;
  /* White background */
  --bg-gradient: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  --accent-blue: #0077be;
  /* Ocean blue */
  --accent-teal: #131929;
  /* Navy as accent */

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(19, 25, 41, 0.1);
  --glass-shine: rgba(255, 255, 255, 0.5);

  --text-primary: #131929;
  /* Navy Text */
  --text-secondary: #475569;

  --font-main: 'Rubik', sans-serif;
  /* Chunky rounded sans */

  --card-radius: 24px;
  --card-shadow: 0 10px 40px -10px rgba(19, 25, 41, 0.15);
}

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

body {
  font-family: var(--font-main);
  background: var(--bg-dark);
  /* Premium Ocean Palette - Surflie */
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}

.app-container {
  width: 100%;
  max-width: 1200px;
  padding: 0 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* No gap - unit toggle provides spacing */
  position: relative;
}

/* Lateral gradients removed in favor of wrapper overlays */

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  animation: fadeInDown 1s ease-out;
}

.brand {
  font-family: 'Rubik', sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  /* Black weight */
  font-style: italic;
  /* Italic to match Surfline */
  letter-spacing: -0.03em;
  color: #131929;
  cursor: pointer;
  /* Clicking the brand returns to the landing view */
  /* Solid Navy */
  text-transform: capitalize;
  /* "Surflie" not uppercase */
  display: flex;
  align-items: center;
  gap: 3px;
}

.brand img.alt-logo {
  height: 75px;
  padding-bottom: 5px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.date-display {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-align: right;
}

/* Unit Toggle Switch */
.unit-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unit-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.wind-arrow-small {
  font-size: 0.6rem;
  display: inline-block;
  color: var(--text-secondary);
}

/* Daily Tide Chart */
.daily-tide-chart-container {
  margin: 0rem 1rem;
  width: calc(100% - 2rem);
}

.daily-tide-chart-header {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 1rem 0rem 0rem 0rem;
  margin-bottom: -0.5rem;
  color: var(--text-secondary);
  text-align: left;
}



.daily-tide-chart-svg {
  width: 100%;
  height: 90px;
  overflow: visible;
  position: relative;
  margin-bottom: 1rem;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--glass-border);
  border: 1px solid var(--glass-border);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-secondary);
  -webkit-transition: .4s;
  transition: .4s;
}

/* Visibility Utilities */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: flex !important;
}

/* Controls Bar */
.controls-bar {
  display: flex;
  justify-content: flex-end;
  padding: 0;
  margin-bottom: 0.5rem;
}

/* Checked State (Imperial/FT) */
input:checked+.slider {
  background-color: rgba(56, 189, 248, 0.2);
  border-color: var(--accent-blue);
}

input:checked+.slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
  background-color: var(--accent-blue);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Hero Section */
.hero {
  text-align: center;
  padding: 2rem 1rem;
  /* Reduced from 4rem */
  position: relative;
  /* Glass Card style for hero */
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero h1 {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hero p {
  color: var(--text-secondary);
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
}

.pulse-badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(56, 189, 248, 0.1);
  color: var(--accent-blue);
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid rgba(56, 189, 248, 0.2);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}

/* Search Bar */
.search-container {
  margin-top: 2rem;
  position: relative;
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 10px;
  z-index: 100;
  /* Ensure search results appear above other content */
}

.search-container input {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 50px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.5);
  /* Semi-transparent white */
  color: var(--text-primary);
  /* Dark text */
  font-size: 1rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  outline: none;
  transition: all 0.3s ease;
  font-weight: 500;
}

.search-container input:focus {
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--accent-blue);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}

.search-container input::placeholder {
  color: var(--text-secondary);
  /* Visible placeholder */
}

.search-container button {
  background: var(--accent-blue);
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  /* Icon color */
  transition: transform 0.3s ease;
}

.search-container button:hover {
  transform: scale(1.05);
}

/* Lives on <body> (app.js portals it out of the hero — its backdrop-filter
   creates a stacking context that would trap the panel under the chart
   controls) and is positioned under the input in JS. Highest z on the page
   so it unfolds in front of everything. */
.search-results {
  position: fixed;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  display: none;
  z-index: 99999;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  /* Light border */
  transition: background 0.2s;
  color: var(--text-primary);
  text-align: left;
}

/* Result-kind markers: map symbology — blue pin-dot = surf spot,
   ink dot = buoy — plus a small uppercase tag on the right */
.search-result-item .sri-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.search-result-item .sri-dot--spot {
  background: #0078A8;
}

.search-result-item .sri-dot--buoy {
  background: #131929;
}

.search-result-item .sri-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-item .sri-kind {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 7px;
  border-radius: 999px;
}

.search-result-item:hover {
  background: rgba(56, 189, 248, 0.1);
}

/* Forecast Wrapper & Horizontal Scroll */
.forecast-wrapper {
  position: relative;
  /* Breakout to full viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  z-index: 5;
}

/* Lateral Fades - Absolute Positioned with Vertical Gradient Match */
.forecast-wrapper::before,
.forecast-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  /* Dynamic width: fill margin, minimum 2rem */
  width: max(2rem, calc(50vw - 600px));
  z-index: 20;
  pointer-events: none;
  /* Match Page Background Vertical Gradient */
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  background-attachment: fixed;
  /* SYNC with viewport */
  background-size: cover;
}

.forecast-wrapper::before {
  left: 0;
  /* Mask fade from opaque (edge) to transparent (center) */
  -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, transparent 100%);
}

.forecast-wrapper::after {
  right: 0;
  /* Mask fade from opaque (edge) to transparent (center) */
  -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
  mask-image: linear-gradient(to left, black 0%, transparent 100%);
}

.forecast-container {
  display: flex;
  overflow-x: auto;
  gap: 2rem;

  /* Align first card with hero - left padding counters wrapper's negative margin */
  /* Extra vertical padding to accommodate hover shadow */
  padding: 2rem max(2rem, calc(50vw - 600px + 2rem)) 3rem max(2rem, calc(50vw - 600px + 2rem));
  /* No top padding */

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* Hide scrollbar completely for custom indicator */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.forecast-container::-webkit-scrollbar {
  display: none;
}

/* Custom Scroll Indicator */
.scroll-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0rem 0 0.5rem 0;
  margin: -2rem 0 0 0;
  position: relative;
  z-index: 10;
}

.scroll-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(19, 25, 41, 0.2);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.scroll-dot.active {
  background-color: rgba(19, 25, 41, 0.8);
  transform: scale(1.2);
}

.scroll-bar {
  width: 40px;
  height: 7px;
  border-radius: 6px;
  background-color: rgba(19, 25, 41, 0.2);
  transition: background-color 0.3s ease;
}

.scroll-bar.active {
  background-color: rgba(19, 25, 41, 0.8);
}

.forecast-card {
  /* Calculation: (100% width - (2 gaps * 2rem)) / 3 cards */
  flex: 0 0 calc((100% - 12rem) / 3);
  min-width: 350px;
  max-width: 400px;
  scroll-snap-align: center;

  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  padding: 1.5rem 1.5rem 0.5rem 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
  z-index: 1;
}

.forecast-card.expanded .daily-summary {
  display: none;
}

@media (min-width: 769px) {
  .forecast-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    border-color: var(--glass-shine);
    z-index: 10;
  }
}

.forecast-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
  pointer-events: none;
}

/* Forecast Content Layout */
.forecast-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  padding-bottom: 6px;
}

.metric-row.main-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 12px;
}

.metric-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.metric-group.highlight .value {
  color: var(--accent-blue);
  font-weight: 800;
}

.metric-group .value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.metric-group .value.large {
  font-size: 2.5rem;
  line-height: 1;
}

.metric-group .value.small {
  font-size: 0.9rem;
}

.metric-group .unit {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.metric-group .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.direction-arrow {
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.direction-arrow.wind-arrow {
  color: var(--text-secondary);
  transform-origin: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.75rem;
}

.day-label {
  font-size: 1.25rem;
  font-weight: 600;
}

.quality-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Long rating names ("Excellent") get a slightly smaller font so the pill
   stays in proportion with its card-header neighbours; line-height matches
   the short labels' text box so all pills stay the same height. */
.quality-label--long {
  font-size: 0.55rem;
  line-height: 0.78rem;
}

.date-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.metric {
  display: flex;
  flex-direction: column;
}

.metric-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.metric-value.updating {
  opacity: 0.7;
  transform: scale(0.99);
}

.mini-hourly-plot {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 24px;
  width: 60px;
  /* Fixed width for consistency */
}

.mini-bar {
  flex: 1;
  border-radius: 1px;
  font-weight: 500;
  opacity: 0.8;
}

.expand-icon {
  font-size: 0.8rem;
  color: var(--text-secondary);
  opacity: 0.6;
  transition: transform 0.3s ease;
}

.forecast-card.expanded .expand-icon {
  transform: rotate(180deg);
}

.swell-arrow {
  display: inline-block;
  font-size: 1.2rem;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.direction-text {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin-left: 0.2rem;
}

.metric-unit {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Hero Section */
.hero {
  flex: 0 0 auto;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  border-radius: var(--card-radius);
  color: #131929;
  /* Dark text for visibility on map? Or keep white if map is dark? */
  overflow: hidden;
  /* Contain the map */
  /* Allow dropdown to extend beyond? No, map needs to be contained. If dropdown needs to extend, we might have issues. */
  /* Reverting overflow to visible caused issues with map z-index outside container. 
     But map needs to be background. 
     Wait, if overflow is visible, map might leak. 
     Let's keep overflow hidden for the map background. 
     But search results need to overflow. 
     Solution: map is absolute 100% width/height of hero. 
     If hero has overflow visible, map will stay within bounds if sized correctly, unless zoomed out? 
     Leaflet map container usually doesn't leak unless specified. 
     Let's use overflow: visible for search results, but borderRadius on map.
  */
  overflow: visible;
  box-shadow: var(--card-shadow);
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
  z-index: 900;
}

/* Static Map Background */
#heroStaticMap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: var(--card-radius);
  opacity: 1;
  /* Fully opaque map */
  pointer-events: none;
  /* Disable interaction events handled by JS too, but this is good */
}

/* Content wrapper to sit above map */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
}

.hero h1 {
  color: white;
  /* Ensure title is white */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* Slight shadow for readability */
  grid-column: 1 / 2;
  /* Left Column */
}

/* Specific positioning for search in large view */
.hero .search-container {
  grid-column: 2 / 3;
  /* Right half */
  width: 90%;
  max-width: 450px;
}

.hero-region {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: white;
  margin-top: 0rem;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  /* Region follows H1 flow in grid item ?? 
     No, h1 is the grid item. The region is INSIDE h1 now (span).
     So it moves with h1. Perfect.
  */
}

/* Compact Hero State - Content adjustment */
@media (min-width: 769px) {
  .hero.compact .hero-content {
    display: flex;
    /* Override grid */
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .hero.compact .hero-region {
    text-align: left;
    margin-left: 2px;
  }

  /* Reset search container for compact flex */
  .hero.compact .search-container {
    grid-column: auto;
    width: auto;
    /* other props handled by existing .hero.compact .search-container rules below? 
         Yes, specificity is fine or I should check order.
         The existing media query rule for .hero.compact .search-container is at line 741 in original file.
         I am editing lines 734-758. 
         Wait, line 741 is "Compact Hero State - Desktop Only" block which follows.
         So those rules will cascade and apply. Good.
      */
  }
}

/* Compact Hero State - Desktop Only */
@media (min-width: 769px) {
  .hero.compact {
    min-height: auto;
    padding: 1.5rem 2rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: all 0.4s ease;
  }

  .hero.compact h1 {
    font-size: 2rem;
    margin-bottom: 0;
    flex: 0 0 auto;
  }

  .hero.compact .search-container {
    margin-top: 0;
    max-width: 500px;
    flex: 1;
    margin-left: 2rem;
    margin-right: 0;
  }
}

/* ... existing hero styles ... */

.rating-badge {
  margin-top: 2rem;
  /* Increased spacing */
  text-align: center;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 700;
  color: white;
  /* White text */
  /* background will be set inline by JS */
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile check */
@media (max-width: 768px) {

  /* Visibility Toggles */
  .mobile-only {
    display: flex !important;
  }

  .desktop-only {
    display: none !important;
  }

  /* Header Layout */
  header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
    /* Reduced padding */
  }

  .brand {
    font-size: 1.5rem;
    /* Smaller title */
  }

  .brand img,
  .brand img.alt-logo {
    height: 40px;
    /* Smaller logo, override alt specificity */
    padding-bottom: 0px;
    /* Remove alt padding if needed */
  }

  /* Right side: Toggle only now (Date hidden) */
  .header-right {
    width: auto;
    flex-direction: row;
    align-items: center;
  }

  /* Date is handled by desktop-only class */

  /* Hero Section */
  .hero {
    min-height: unset;
    /* Remove large min-height */
    height: auto;
    padding: 1rem 1rem 1rem 1rem;
    /* Reduced top padding */
    /* More top padding, tighter bottom */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Force stacked content on mobile */
  .hero .hero-content {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    /* Reset grid if it was grid */
    align-items: center;
    gap: 0.75rem;
    /* Increased space */
    /* Reduced gap strictly */
    width: 100%;
  }

  .hero h1 {
    grid-column: auto;
    /* Reset grid placement */
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 0rem;
    /* No margin */
    line-height: 1.1;
    /* Tighter line height */
  }

  .hero .search-container {
    grid-column: auto;
    /* Reset grid placement */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .search-container {
    margin-top: 0rem;
    /* Remove top margin */
  }

  .search-container input {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    /* Reduced height */
  }

  .search-container button,
  .search-container .map-btn {
    width: 36px;
    height: 36px;
    padding: 8px;
    /* Adjustment for icon centering if needed */
  }

  .search-container button svg,
  .search-container .map-btn svg {
    width: 16px;
    height: 16px;
  }

  .app-container {
    padding: 0rem 0.8rem 0.8rem 0.8rem;
  }

  /* Mobile: Show 1 card fully */
  .forecast-card {
    flex: 0 0 100%;
    padding: 1.25rem;
  }

  .forecast-card .card-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }

  .forecast-card .metric-row {
    padding-bottom: 0.75rem;
  }

  .forecast-card .metric-row.main-row {
    padding-bottom: 0.75rem;
  }

  .forecast-card .rating-badge {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  /* Fix lateral gradients on mobile - Adjust width for smaller screens */
  .forecast-wrapper::before,
  .forecast-wrapper::after {
    /* calc() might result in 0 or negative, max ensures visibility */
    /* But usually on mobile we want a fixed small width if the calc is crazy */
    /* The main rule handles it with max(2rem, ...), so this might be redundant unless we want a DIFFERENT max */
    width: 2rem;
  }

  /* Reset wrapper margins */
  .forecast-wrapper {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  /* Reset container padding */
  .forecast-container {
    padding: 1rem 1rem;
    /* Balanced padding to match wrapper margin */
    gap: 1rem;
  }

  /* Increase scroll indicator distance on mobile */
  .scroll-indicator {
    margin-top: 0rem;
    padding: 0rem 0 0.5rem 0;
  }

  /* Reduce chart padding-top on mobile */
  .chart-container {
    padding-top: 30px !important;
  }

  /* Make map twice as high as hero on mobile */
  /* Expand hero when map is active to push content down */
  .hero:has(.map-overlay.active) {
    min-height: 60vh;
    /* Approximately twice the normal hero height */
    transition: min-height 0.3s ease;
  }

  /* Hide other hero elements when map is active so only map is visible */
  .hero:has(.map-overlay.active)>*:not(.map-overlay) {
    display: none;
  }

  .map-overlay.active {
    height: 100%;
    /* Fill the expanded hero */
    bottom: 0;
    z-index: 50;
    /* Keep it below search results if needed, or just standard */
  }

}

/* Hourly Details */
.hourly-container {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 0;
  font-size: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hourly-header {
  display: grid;
  grid-template-columns: 3.5rem 6px 1.5fr 1fr;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.hourly-header span {
  padding: 0.5rem 0.4rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.hourly-header span:nth-child(2) {
  padding: 0;
  border-right: none;
}

.hourly-header span:last-child {
  border-right: none;
}

.hourly-row {
  display: grid;
  grid-template-columns: 3.5rem 6px 1.5fr 1fr;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.hourly-row:last-child {
  border-bottom: none;
}

.hourly-rating-bar {
  height: 60%;
  min-height: 1.2rem;
  border-radius: 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.hourly-row>div {
  padding: 0.5rem 0.4rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.hourly-row>div:nth-child(2) {
  padding: 0;
}

.hourly-row>div:last-child {
  border-right: none;
}

.hourly-time {
  font-weight: 500;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.time-hour {
  font-size: 1rem;
  font-weight: 600;
}

.time-period {
  font-size: 0.7rem;
  opacity: 0.8;
}

.hourly-swell,
.hourly-wind {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.9rem;
  justify-content: center;
  width: 100%;
}

.hourly-swell {
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  padding-left: 0.8rem !important;
}

.swell-arrow-small,
.wind-arrow-small {
  display: inline-block;
  font-size: 1rem;
  opacity: 0.8;
}

.direction-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.direction-degrees {
  font-size: 0.75rem;
  font-weight: 500;
}

/* Zero-Height Container */
.forecast-gap-container {
  height: 0;
  width: 100%;
  position: relative;
  z-index: 950;
  /* Above chart/hero backgrounds if needed */
}

/* Forecast Days Counter */
.forecast-days-counter {
  position: absolute;
  top: 0.1rem;
  /* Nudged just below the chart so it clears the day-highlight box */
  right: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  animation: fadeInUp 0.8s ease-out 0.25s backwards;
  display: flex;
  align-items: center;
}

.forecast-days-counter::before {
  content: '+';
  margin-right: 0.25rem;
  font-weight: 700;
  color: var(--accent-blue);
}

/* --- Model comparison (hero/chart gap) --- */
/* Zero-height like .forecast-gap-container: floats content in the boundary
   between hero and wave chart without changing their spacing. */
.chart-gap-container {
  height: 0;
  width: 100%;
  position: relative;
  z-index: 960;
}

.model-compare-btn {
  position: absolute;
  /* Sits over the hero's bottom edge, clear of the chart area so the
     day-highlight box never slides underneath it. Left of the Buoys
     button, which owns the corner slot (right: 12px, below). */
  top: -38px;
  right: 88px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s,
    top 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    right 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.model-compare-btn:hover {
  border-color: rgba(0, 0, 0, 0.3);
}

.model-compare-btn.active {
  background: #131929;
  border-color: #131929;
  color: #fff;
  /* Model view on: drop into the boundary strip, level with the legend */
  top: 6px;
}

.model-legend {
  position: absolute;
  /* In the hero/chart boundary strip: just below the hero, level with the
     active Models button, left of it (the legend only shows while the
     button sits in the strip) */
  top: 6px;
  right: 96px;
  display: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 10px;
  max-width: calc(100% - 120px);
}

.model-legend.visible {
  display: flex;
}

.model-legend .legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

/* Hot = hovered directly, or its line is hovered in the plot */
.model-legend .legend-chip.legend-chip--hot {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
}

.model-legend .legend-chip i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.model-overlay-svg {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.4s ease;
}

/* Discrete y-axis (model view only): height labels + short ticks hanging
   OUTSIDE the plot on both sides — in the app container's side padding,
   touching the plot edges. The plot keeps its full width; the section just
   lifts its overflow clipping while the axis is out there. Scrolled plot
   content still clips at the scroll container's edge, so it never reaches
   the labels. */
#waveChartSection {
  position: relative;
}

#waveChartSection.models-gutters {
  overflow: visible;
}

.chart-y-axis {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  z-index: 6;
  pointer-events: none;
}

.chart-y-axis--left {
  right: 100%;
}

.chart-y-axis--right {
  left: 100%;
}

.chart-y-axis .y-tick {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.chart-y-axis--left .y-tick {
  right: 0;
}

.chart-y-axis--right .y-tick {
  left: 0;
}

/* No page margin to borrow on small screens: fall back to inner gutters */
@media (max-width: 768px) {
  #waveChartSection.models-gutters {
    padding: 0 30px;
    overflow: hidden;
  }

  .chart-y-axis {
    width: 30px;
  }

  .chart-y-axis--left {
    right: auto;
    left: 0;
  }

  .chart-y-axis--right {
    left: auto;
    right: 0;
  }

  .chart-y-axis--left .y-tick {
    right: 2px;
  }

  .chart-y-axis--right .y-tick {
    left: 2px;
  }
}

.chart-y-axis .y-tick i {
  display: block;
  width: 5px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Model view replaces the bars: keep the wrappers (they define the time
   axis, date labels, and day-highlight geometry), hide only the bars.
   Bars sink and fade in step with the date labels dropping down.
   (ID-scoped: .chart-bar is declared three times further down and the last
   one would otherwise override the transition.) */
#waveChartContainer .chart-bar {
  transition: height 0.3s ease, background-color 0.2s, opacity 0.5s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

#waveChartContainer.models-active .chart-bar {
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
}

/* Date labels slide from the top of the plot to the bottom in model view
   (inline top:0 is set in JS, hence the !important). The easing lands
   softly: fast start, long gentle deceleration. */
#waveChartContainer .axis-label {
  transition: top 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

#waveChartContainer.models-active .axis-label {
  top: calc(100% - 20px) !important;
}

/* The day-highlight box shrinks from its top edge while the legend occupies
   the boundary strip above it, moving with the same easing as the dates.
   left/width must be restated: this shorthand outranks the base
   .chart-highlight-overlay rule that provides the fluid horizontal glide. */
#waveChartContainer .chart-highlight-overlay {
  transition: left 0.3s ease, width 0.3s ease,
    top 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

#waveChartContainer.models-active .chart-highlight-overlay {
  /* Below the legend row (legend bottom = 6px top + 22px chip) */
  top: 32px;
}

/* Card unfolded (hero compacts): the button leaves the shrinking hero and
   drops into the hero/chart boundary strip, and the day-highlight box gives
   it room — same easing as everything else. */
.hero.compact+.chart-gap-container .model-compare-btn {
  top: 6px;
}

/* (No compact legend override: the legend only shows while a compare view
   is on, where the body.models-mode / body.buoys-mode rules place it.) */

.hero.compact~.chart-section #waveChartContainer .chart-highlight-overlay {
  top: 32px;
}

/* On small screens the hero bottom holds the search buttons — keep the
   model controls below the boundary instead (chart has 30px top padding) */
@media (max-width: 768px) {
  .model-compare-btn {
    top: 6px;
  }

  .model-legend {
    top: 6px;
  }

  /* Legend wraps to several rows on narrow screens: drop the highlight
     box further (higher-specificity twin keeps this winning when a card
     is unfolded at the same time) */
  #waveChartContainer.models-active .chart-highlight-overlay,
  .hero.compact~.chart-section #waveChartContainer.models-active .chart-highlight-overlay {
    top: 74px;
  }
}

/* --- Buoy comparison view --- */

/* Owns the corner slot, right of the Models button (relabelled
   "Closest buoy" in JS whenever either compare view is on). */
.buoy-compare-btn {
  right: 12px;
}

/* Either compare view on: both buttons drop into the boundary strip —
   [legend][Models][Closest buoy] — so each view is one click from the
   other. The Models button slides further left so the corner button's
   wider "Closest buoy" label fits beside it. */
body.models-mode .model-compare-btn,
body.buoys-mode .model-compare-btn {
  top: 6px;
  right: 124px;
}

body.models-mode .buoy-compare-btn,
body.buoys-mode .buoy-compare-btn {
  right: 12px;
}

body.models-mode .model-legend,
body.buoys-mode .model-legend {
  right: 202px;
  max-width: calc(100% - 214px);
}

/* Station picked off the map or the search (not the spot's closest): the
   corner button hides and Models alone sits in the corner, pressed but
   inert — a state marker, not a control. */
body.buoy-solo .model-compare-btn {
  right: 12px;
  pointer-events: none;
}

body.buoy-solo .model-legend {
  right: 88px;
  max-width: calc(100% - 100px);
}

/* Map overlay open while a compare view is on: the site name
   (mapSiteNameContainer) owns the first line under the map — the buttons
   and legend step down a line so the two never overlap */
body.map-open.models-mode .model-compare-btn,
body.map-open.buoys-mode .model-compare-btn {
  top: 48px;
}

body.map-open.models-mode .model-legend,
body.map-open.buoys-mode .model-legend {
  top: 48px;
}

/* Buoy view hero: the h1 itself is re-filled by JS as
   "CDIP {id}" + buoy name in the .hero-region slot + a .buoy-hero-sub line
   ("the closest buoy to {spot}"). On desktop the sub line renders as the
   separate bottom-left #buoyHeroLabel instead; on small screens it stays
   inside the title block (the search bar owns the hero bottom there). */
.buoy-hero-label {
  display: none;
  position: absolute;
  left: 20px;
  bottom: 12px;
  z-index: 2;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  text-align: left;
}

body.buoys-mode .buoy-hero-label {
  display: block;
}

/* In-title variant of the sub line: small-screen only */
.buoy-hero-sub {
  display: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  body.buoys-mode .buoy-hero-label {
    display: none;
  }

  .buoy-hero-sub {
    display: block;
  }
}

/* Buoy view has its own time axis (it reaches 3 days into the past, which the
   bars don't cover), so the bars, their day separators, date labels and the
   day-highlight box all stand down — the SVG carries its own separators and
   labels. The bar wrappers collapse to zero width so a single spacer element
   (sized in JS to the full 3-past + 15-forecast day span) defines the
   scrollWidth, letting the plot scroll like the bars/models views. */
#waveChartContainer.buoys-active {
  overflow-x: auto;
}

#waveChartContainer.buoys-active .chart-bar {
  opacity: 0;
  transform: translateY(26px);
  pointer-events: none;
}

#waveChartContainer.buoys-active .chart-bar-wrapper {
  min-width: 0 !important;
  width: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden;
  border-left-color: transparent !important;
}

#waveChartContainer.buoys-active .axis-label {
  opacity: 0;
}

/* !important: forecast-scroll syncing keeps setting display:block inline */
#waveChartContainer.buoys-active .chart-highlight-overlay {
  display: none !important;
}

/* --- Buoy mode (whole page): the forecast-day cards are replaced by the
   latest-observation cards, and the chart grows into the freed space. --- */
body.buoys-mode .forecast-wrapper,
body.buoys-mode .forecast-days-counter {
  display: none !important;
}

body.buoys-mode .chart-container {
  height: 320px;
  transition: height 0.4s ease;
}

/* Latest-observation cards (CDIP station-page style) */
.buoy-stats {
  width: 100%;
  max-width: 1100px;
  margin: 8px auto 24px;
  padding: 0 16px;
  animation: fadeInUp 0.5s ease-out;
}

.buoy-stats-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 10px;
}

.buoy-stats-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.buoy-stats-sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.buoy-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.buoy-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.buoy-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.buoy-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.buoy-stat-value .swell-arrow {
  font-size: 1rem;
  color: var(--accent-blue);
  display: inline-block;
}

.buoy-stat-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .buoy-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .buoy-stat-value {
    font-size: 1.35rem;
  }

  body.buoys-mode .chart-container {
    height: 260px;
  }
}

/* Wave Height Chart */
.chart-section {
  width: 100%;
  margin-top: 0;
  /* No space between hero and chart */
  margin-bottom: 0;
  /* No space between chart and forecast */
  background: transparent;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out 0.3s backwards;
}

.chart-container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  /* Start from left to ensure first day is visible */
  height: 100%;
  /* Max height for bars */
  width: 100%;
  gap: 2px;
  overflow-x: auto;
  padding: 5px 5px 5px 5px;

  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.chart-container::-webkit-scrollbar {
  display: none;
}

.chart-bar-wrapper {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  min-width: 20px;
  /* Ensure readability */
  max-width: 60px;
  /* Prevent looking absurd on wide screens */
  position: relative;
  cursor: pointer;
}

.chart-bar {
  width: 100%;
  background: #38bdf8;
  /* Light blue base */
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease, background-color 0.2s, opacity 0.5s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.chart-bar:hover {
  background: var(--accent-blue);
}

.chart-bar.is-night {
  opacity: 0.5;
}

/* Tooltip/Label on top of bar */
.bar-label {
  position: absolute;
  top: -20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.chart-bar-wrapper:hover .bar-label {
  opacity: 1;
}

/* Persistent labels for peaks */
.bar-label.peak {
  opacity: 1;
  font-weight: 700;
  top: -22px;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  padding: 0 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 5px;
}

.axis-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .chart-bar-wrapper {
    min-width: 15px;
    /* Wider bars to force scrolling on mobile */
    width: auto;
  }

  .forecast-days-counter {
    right: 1rem;
    font-size: 0.8rem;
  }
}


.chart-headers {
  display: flex;
  justify-content: flex-start;
  /* Items have width based on day proportion */
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  width: 100%;
  /* Must match chart container scroll width? 
       Actually, chart-container scrolls independently.
       Headers should ideally scroll with it if they are wide.
       Better: Put headers INSIDE the scroll container or synced.
       For simple implementation: Headers are static? No, charts are long.
       User image shows headers fixed above specific days.
       
       Solution: Place headers absolute or relative INSIDE the scroll container 
       so they move with bars.
    */
  overflow: hidden;
  /* static header container? No, we will put day labels IN the chart container for simplicity */
  display: none;
  /* Hide top container if we move labels inside */
}

.chart-container {
  display: flex;
  align-items: flex-end;
  height: 200px;
  width: 100%;
  /* Removed gap between days, using border separator instead */
  gap: 0;
  /* No gap, continuous bars */
  overflow-x: auto;
  position: relative;

  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Padding for labels */
  padding-top: 30px;
  padding-bottom: 10px;
}

.chart-container::-webkit-scrollbar {
  display: none;
}

/* Background shading container - Absolute behind bars */
.chart-background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.chart-bg-slice {
  position: absolute;
  top: 0;
  height: 100%;
  /* width and left set by JS */
}

.bg-night {
  background-color: rgba(19, 25, 41, 0.08);
  /* Darker */
}

.bg-dawn,
.bg-dusk {
  background-color: rgba(19, 25, 41, 0.04);
  /* Slightly dark */
}

.bg-day {
  background-color: transparent;
}

/* Grid Lines */
.chart-grid-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.grid-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(0, 0, 0, 0.05);
  /* Very subtle */
  width: 100%;
  /* Spans full scroll width? No, viewport. Use fixed position container? */
}

/* To keep grid static relative to viewport while bars scroll:
   Grid lines should be in a separate container OVER/UNDER the scroll view 
   that doesn't scroll. But chart-container handles scroll.
   So grid container should be outside chart-container or fixed?
   If grid is outside, it won't match potentially scaled content? 
   No, heights are fixed px/percent.
   Let's put grid-lines container effectively outside the scroll area but inside the section relative.
*/
.chart-grid-overlay {
  position: absolute;
  top: 30px;
  /* Below header padding */
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

.grid-line-label {
  position: absolute;
  right: 10px;
  font-size: 0.65rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.8);
  padding: 0 4px;
  border-radius: 4px;
  margin-top: -8px;
  /* Center on line */
}



.chart-bar {
  width: 90%;
  background: #38bdf8;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s ease, background-color 0.2s;
  position: relative;
}

.chart-bar:hover {
  background: var(--accent-blue);
}

/* Header Labels inside chart */
.day-header-label {
  position: absolute;
  top: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  width: 100px;
  /* distinct width */
  transform: translateX(-50%);
  z-index: 10;
}

.day-header-date {
  display: block;
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.day-separator {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1;
  pointer-events: none;
}

/* Global Chart Tooltip */
.global-chart-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  /* Always on top */
  opacity: 0;
  transition: opacity 0.1s ease;
  transform: translate(-50%, -100%);
  /* Center horizontally, sit above anchor */
  margin-top: -10px;
  /* Gap from cursor/bar */
}

/* Show state */
.global-chart-tooltip.visible {
  opacity: 1;
}


/* Remove old headers logic if any */
.chart-headers {
  display: none;
}

.chart-labels {
  display: none;
}

.chart-container {
  flex: 1;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 40px;
  /* Space for day headers inside */
}

.chart-container::-webkit-scrollbar {
  display: none;
}

.chart-content-wrapper {
  /* Set by JS: width, flex layout */
  margin: 0 auto;
  /* Center if smaller than viewport? */
}

.chart-bar {
  background-color: #38bdf8;
  /* Light blue */
  border-radius: 2px 2px 0 0;
  transition: background-color 0.2s;
  /* No border or complex styling */
}

.chart-bar:hover {
  background-color: var(--accent-blue);
}

/* Day Headers */
.day-header {
  position: absolute;
  top: -30px;
  /* Above bars, relative to wrapper content top? No, simplified. relative to wrapper bottom? */
  /* Since wrapper is height 100% and align-items: flex-end, top: 0 is top of container */
  /* Wait, wrapper is flex end. */
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.2;
}

.day-name {
  display: block;
  font-weight: 700;
  color: var(--text-primary);
}

.day-date {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
}

/* Peak Labels */
.peak-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  /* No background box, just text on top of bar */
}

/* Daily Chart Styles */

.daily-chart-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  /* distribute evenly */
  padding: 0 1rem;
  padding-bottom: 20px;
  /* Space for bars at bottom if needed */
}

.daily-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Header at top, barContainer at bottom */
  align-items: center;
  height: 100%;
  position: relative;
  margin: 0 4px;
  /* Space between cols */
}

.daily-header {
  text-align: center;
  margin-top: 10px;
  z-index: 5;
}

.d-name {
  display: block;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.d-date {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.daily-bar-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex: 1;
  /* fills remaining height */
  padding-top: 40px;
  /* Space below header */
}

.daily-bar {
  width: 60%;
  /* Wider bars */
  max-width: 40px;
  background-color: #38bdf8;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease, background-color 0.2s;
}

.daily-bar:hover {
  background-color: var(--accent-blue);
}

.daily-val-label {
  margin-bottom: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Update App to support label class update */
/* We reused .daily-val-label, so we need to add logic in app.js or alias it */

/* Chart Day Grouping */
.chart-day-group {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  position: relative;
  /* Restore separator */
  border-left: 1px dashed rgba(0, 0, 0, 0.15);
  padding: 0;
  gap: 1px;
  /* Gap between bars inside the day */
  flex: 0 0 auto;
}

/* Remove border from the very first group to mimic 'index === 0' check not having it? 
   No, original code ADDED it for 'index === 0' too?
   Let's check code: "if (isNewDay || index === 0) { ... borderLeft ... }"
   Yes, original added it for the first one too.
   So we leave it on all groups.
*/

.chart-day-group .axis-label {
  position: absolute;
  top: 0;
  left: 6px;
  /* Match original: 6px */
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--text-secondary);
  pointer-events: none;
  z-index: 5;
}

/* Ensure bars are positioned correctly */
.chart-day-group .chart-bar-wrapper {
  position: relative;
  border-left: none !important;
  /* Uniform width control if needed, but flex handles it */
}

.chart-highlight-overlay {
  position: absolute;
  top: 20px;
  bottom: 0px;
  border: 1px solid rgba(7, 7, 7, 0.492);
  background: transparent;
  /* No fill as requested */
  border-radius: 12px;
  pointer-events: none;
  transition: left 0.3s ease, width 0.3s ease;
  z-index: 50;
  display: none;
  box-shadow: none;
}

/* Map Feature Styles */

/* Map Button */
.map-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.map-btn:hover {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.4);
  color: var(--accent-blue);
}

/* Map Overlay Container */
.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  border-radius: var(--card-radius);
  z-index: 1000;
  /* Higher than search results */
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.98);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.map-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* The actual Leaflet Map div */
#surfMap {
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Close Button */
.close-map-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  /* Above map */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.close-map-btn:hover {
  transform: scale(1.1);
  background: #f1f5f9;
}

/* Popup Styles overrides */
.leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 0;
}

.leaflet-popup-content {
  margin: 12px 16px;
  line-height: 1.4;
  font-family: var(--font-main);
}

.popup-country {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.popup-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.custom-arrow-marker {
  background: transparent !important;
  border: none !important;
}

.popup-wrapper {
  min-width: 140px;
}

/* Spot hover card on the full map (replaces the old click-popup): Leaflet
   tooltips default to nowrap single-line — open it up into a small card */
.leaflet-tooltip.spot-hover-card {
  white-space: normal;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.popup-btn {
  display: inline-block;
  margin-bottom: 9px;
  background: var(--accent-blue);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.popup-btn:hover {
  background: #005a8e;
}

/* Compact Hero State fix for Map Button */
@media (min-width: 769px) {
  .hero.compact .search-container {
    padding-right: 0;
    /* Reset if needed */
  }

  .hero.compact #mapBtn {
    /* Maybe smaller on compact? */
    width: 44px;
    height: 44px;
  }
}

/* Map Attribution Minimal Style */
.leaflet-control-attribution {
  font-size: 8px !important;
  color: rgba(0, 0, 0, 0.4) !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 4px !important;
}

.leaflet-control-attribution a {
  color: rgba(0, 0, 0, 0.5) !important;
  text-decoration: none !important;
}

/* Map Site Name Container (visible when map expands) */
/* Map Site Name Container (visible when map expands) */
/* Map Site Name Container (visible when map expands) */
.map-site-name-container {
  display: block;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  /* No background/box style */
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;

  margin: 0;
  margin-left: 2px;
  /* Slight alignment fix if needed */

  width: 100%;
  /* Full width to align left properly in container */
  max-width: 100%;
  position: relative;
  z-index: 950;

  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;

  height: 0;
  overflow: visible;
  /* Allow negative margins to not be clipped */
}

.map-site-name-container.active {
  opacity: 1;
  transform: translateY(0);
  height: auto;
  /* Super close to graph below */
  margin-top: 10px;
  margin-bottom: -10px;
  /* Pull graph up / pull text down closer */
  padding-bottom: 0px;
  pointer-events: auto;
}

.map-site-region {
  font-weight: 400;
  color: var(--text-secondary);
  font-size: 1.2rem;
  margin-left: 4px;
}
/* ---------------------------------------------------------------------------
   Account (auth.js): header button, dropdown panel, hero favorite star
   --------------------------------------------------------------------------- */
.account-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s;
}

.account-btn:hover {
  background: rgba(19, 25, 41, 0.06);
}

.account-panel {
  position: fixed;
  width: 330px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  padding: 1rem;
}

.account-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.account-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.account-email {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.account-hint {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.magic-link-form {
  display: flex;
  gap: 6px;
}

.magic-link-form input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  font-family: var(--font-main);
  font-size: 0.85rem;
  color: var(--text-primary);
  background: #fff;
}

.magic-link-form button,
.account-action {
  padding: 0.55rem 0.9rem;
  border: none;
  border-radius: 10px;
  background: var(--accent-blue);
  color: #fff;
  font-family: var(--font-main);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.magic-link-form button:hover,
.account-action:hover {
  opacity: 0.85;
}

.account-signout {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}

.account-status {
  font-size: 0.78rem;
  color: var(--text-secondary);
  min-height: 1em;
}

.account-favs {
  display: flex;
  flex-direction: column;
}

.account-fav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.4rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.account-fav:hover {
  background: rgba(0, 120, 168, 0.08);
}

.account-fav-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-default-tag {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 7px;
  border-radius: 999px;
}

/* Favorite star: hero top-right corner */
.fav-star-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(19, 25, 41, 0.35);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.2s, color 0.2s;
}

.fav-star-btn:hover {
  background: rgba(19, 25, 41, 0.55);
}

.fav-star-btn.active {
  color: #ffd166;
}

/* Favorites list kind markers: same symbology as search results */
.account-fav .fav-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.account-fav .fav-dot--spot {
  background: #0078A8;
}

.account-fav .fav-dot--buoy {
  background: #131929;
}

.account-error {
  color: #b3261e;
}

/* Alerts (swell alarms) in the account panel */
.account-alarm {
  padding: 0.45rem 0.4rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
  margin-bottom: 4px;
}

.account-alarm.off .account-alarm-target,
.account-alarm.off .account-alarm-conds {
  opacity: 0.45;
}

.account-alarm-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-alarm-target {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alarm-toggle {
  flex: 0 0 auto;
  accent-color: var(--accent-blue);
  cursor: pointer;
}

.alarm-del {
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.alarm-del:hover {
  color: #b3261e;
}

.account-alarm-conds {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 2px;
}

/* New-alert form */
.alarm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-primary);
}

/* direct child only: .alarm-bars spans inside the row must not match */
.alarm-row > span:first-child {
  flex: 0 0 68px;
}

.alarm-num {
  width: 62px;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 0.82rem;
  color: var(--text-primary);
  background: #fff;
}

.alarm-models {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.alarm-model {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 2px 0;
}

.alarm-model.disabled {
  opacity: 0.4;
  cursor: default;
}

.alarm-model input {
  accent-color: var(--accent-blue);
}

.alarm-actions {
  display: flex;
  gap: 6px;
}

.alarm-actions .account-action {
  flex: 1;
}

/* Direction control: heading + margin fields with a live compass preview */
.alarm-dir {
  display: flex;
  align-items: center;
  gap: 10px;
}

.alarm-dir-fields {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dir-compass {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  margin: 0 auto;
}

.dir-compass .dc-face {
  fill: rgba(0, 0, 0, 0.04);
  stroke: rgba(19, 25, 41, 0.15);
}

.dir-compass .dc-n {
  font-size: 10px;
  font-family: var(--font-main);
  fill: #94a3b8;
}

.dir-compass .dc-arc {
  fill: rgba(0, 119, 190, 0.3);
}

.dir-compass .dc-arrow line {
  stroke: #0077be;
}

.dir-compass .dc-arrow polygon {
  fill: #0077be;
}

/* Alarm rows open the edit form on click */
.account-alarm {
  cursor: pointer;
  transition: background 0.2s;
}

.account-alarm:hover {
  background: rgba(0, 120, 168, 0.08);
}

/* Condition rows: number + slider (+ bar meter for waves) stay in sync */
.alarm-cond {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.alarm-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
  padding: 0 2px;
}

.alarm-bars span {
  flex: 1;
  background: rgba(19, 25, 41, 0.1);
  border-radius: 1px;
  transition: background 0.15s;
}

.alarm-bars span.lit {
  background: var(--accent-blue);
}

.alarm-range {
  width: 100%;
  accent-color: var(--accent-blue);
  height: 18px;
  cursor: pointer;
}

/* Direction pair: the └ connector alone ties the margin to its heading —
   its horizontal end sits at the vertical center of the margin label */
.alarm-row-sub {
  position: relative;
  margin-left: 14px;
}

.alarm-row-sub::before {
  content: '';
  position: absolute;
  left: -11px;
  top: -9px;
  width: 5px;
  height: 23px;
  border-left: 1.5px solid rgba(19, 25, 41, 0.25);
  border-bottom: 1.5px solid rgba(19, 25, 41, 0.25);
  border-bottom-left-radius: 6px;
}

.alarm-row-sub > span:first-child {
  flex-basis: 54px;
}

.dir-compass {
  cursor: pointer;
  touch-action: none;
}

.dir-compass .dc-arrow {
  font-size: 17px;
  fill: #0077be;
  stroke: none;
  pointer-events: none;
  user-select: none;
}

/* Inline slider block at the right of each condition row */
.alarm-slide {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.alarm-slide .alarm-bars {
  height: 17px;
  padding: 0 8px;
  gap: 2px;
}

.alarm-slide .alarm-range {
  width: 100%;
  height: 12px;
}

/* Session ratings: half-star widget + per-spot session log */
.star-row {
  display: inline-flex;
  gap: 2px;
  line-height: 1;
}

.star {
  position: relative;
  font-size: 20px;
  color: rgba(19, 25, 41, 0.15);
  user-select: none;
}

.star-input .star {
  cursor: pointer;
  font-size: 32px;
}

.star-fill {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f5b301;
  pointer-events: none;
}

.account-session {
  padding: 0.45rem 0.4rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.account-session:hover {
  background: rgba(0, 120, 168, 0.08);
}

.account-session-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-session-head .star-row .star {
  font-size: 17px;
}

.account-session-when {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-session-detail {
  margin-top: 4px;
}

.account-session-conds {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.account-session-note {
  font-size: 0.76rem;
  color: var(--text-primary);
  font-style: italic;
  margin-top: 3px;
}

.session-select {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  font-family: var(--font-main);
  font-size: 0.82rem;
  color: var(--text-primary);
  background: #fff;
}

.session-note {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  font-family: var(--font-main);
  font-size: 0.8rem;
  color: var(--text-primary);
  resize: vertical;
  background: #fff;
}

/* Session snapshot rendered as a forecast-card hourly row + a tide cell.
   Sized down to fit the 280px panel: tighter gaps, shrinkable cells
   (min-width 0) so the tide column never spills past the panel edge. */
.session-cond-header {
  display: grid;
  grid-template-columns: 4px 1.6fr 1.2fr 2.4rem;
  margin-top: 6px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
}

.session-cond-header span:last-child {
  text-align: right;
}

.session-cond-row {
  grid-template-columns: 4px 1.6fr 1.2fr 2.4rem;
  font-size: 0.72rem;
  border-top: none;
}

.session-cond-row > div {
  min-width: 0;
}

.session-cond-row .hourly-swell,
.session-cond-row .hourly-wind {
  gap: 0.25rem;
  font-size: 0.72rem;
}

.session-cond-row .hourly-swell {
  padding-left: 0.2rem !important;
}

.session-cond-row .time-hour {
  font-size: 0.8rem;
}

.session-cond-row .direction-degrees {
  font-size: 0.68rem;
}

/* thin bar like the cards': kill the cell padding that fattened it */
.session-cond-row .hourly-rating-bar {
  padding: 0 !important;
  width: 5px;
  justify-self: center;
}

.session-tide {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  color: var(--text-secondary);
  padding-right: 2px;
}

.session-tide-arrow {
  font-size: 0.6rem;
  color: var(--accent-blue);
}

/* Phone: the account panel centers and takes most of the viewport
   (!important beats the JS-set inline right from the desktop anchoring) */
@media (max-width: 768px) {
  .account-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto;
    max-height: calc(100dvh - 100px);
  }
}

/* Email + unit preference on one panel row; small ghost default-view action */
.account-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.account-email-row .account-email {
  flex: 1;
  min-width: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.account-units {
  flex: 0 0 auto;
  transform: scale(0.82);
  transform-origin: right center;
}

.account-action-small {
  align-self: flex-start;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-blue);
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.account-action-small:hover {
  background: rgba(0, 120, 168, 0.08);
}

/* The account panel owns the unit toggle now; the header one stays in the
   DOM (app.js display logic routes through it) but out of sight */
header .unit-toggle-wrapper {
  display: none;
}

/* Boxed panel groups: Favorites / Alerts / Sessions each read as one unit */
.account-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.6rem 0.65rem;
  background: rgba(0, 0, 0, 0.015);
}