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

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg: #fff;
  --bg-secondary: #f7f7f7;
  --text: #222;
  --text-secondary: #717171;
  --border: #ddd;
  --accent: #ff385c;
  --sun-bg: #fef3cd;
  --sun-text: #856404;
  --sun-badge: #F5D950;
  --shade-bg: #e8e8ed;
  --shade-text: #6b6b6b;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 6px 20px rgba(0,0,0,0.12);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-h: 56px;
  --filter-h: 48px;
  --weather-h: 44px;
}

html, body { height: 100%; overflow: hidden; font-family: var(--font); color: var(--text); background: var(--bg); }

/* ===== MODAL ===== */
.modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); padding: 20px; }
.modal.hidden { display: none; }
.modal-content { background: #fff; border-radius: var(--radius); padding: 32px; max-width: 400px; width: 100%; text-align: center; }
.modal-content h2 { margin-bottom: 8px; font-size: 22px; }
.modal-content p { margin-bottom: 16px; color: var(--text-secondary); font-size: 14px; }
.modal-content a { color: var(--accent); }
.modal-content input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 12px; }
.modal-content button { width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.modal-content button.btn-yellow { background: var(--sun-badge); color: #333; }

/* ===== HEADER ===== */
#header {
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 0 16px; height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
}
.header-brand { font-size: 18px; font-weight: 700; white-space: nowrap; }
.beta-tag { font-size: 12px; font-weight: 500; color: var(--text-secondary); display: inline-block; transform: rotate(-8deg); }
.header-right { display: flex; flex: 1; align-items: center; gap: 12px; }
.header-search { flex: 1; position: relative; max-width: 320px; }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }
#search-input, #map-search-input {
  width: 100%; padding: 8px 12px 8px 32px; border: 1px solid var(--border);
  border-radius: 24px; font-size: 14px; background: var(--bg-secondary);
  font-family: var(--font); height: 24.5px; box-sizing: border-box;
}
#search-input:focus, #map-search-input:focus { outline: none; border-color: var(--text); background: #fff; }
.header-datetime { display: flex; gap: 8px; align-items: center; }
.header-datetime input {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; font-family: var(--font); background: var(--bg-secondary);
}
#now-btn {
  padding: 6px 14px; border: none; border-radius: var(--radius-sm);
  background: var(--sun-badge); color: #333; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}

/* ===== DESKTOP LAYOUT (CSS Grid) ===== */
#app {
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-template-rows: var(--header-h) var(--weather-h) var(--filter-h) 1fr;
  grid-template-areas:
    "header  header"
    "weather weather"
    "filter  filter"
    "cards   map";
  height: 100vh;
  overflow: hidden;
}
#header      { grid-area: header; }
#weather-banner { grid-area: weather; }
#filter-bar  { grid-area: filter; }
#card-list   { grid-area: cards; overflow-y: auto; border-right: 1px solid var(--border); background: var(--bg); }
#map-container { grid-area: map; position: relative; }
#datetime-pill { display: none; }
#map-search  { display: none; }
#mobile-controls { display: none; }

/* ===== WEATHER BANNER ===== */
#weather-banner {
  height: var(--weather-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; gap: 12px; border-bottom: 1px solid var(--border);
  background: var(--bg-secondary); font-size: 13px;
}
#weather-banner.rainy { background: #f0f4f8; }
#weather-banner.warm  { background: #fffbeb; }
#weather-banner.cool  { background: #eff6ff; }
#weather-banner.loading { color: var(--text-secondary); justify-content: center; }
.weather-message { display: flex; align-items: center; gap: 8px; min-width: 0; }
.weather-emoji { font-size: 18px; flex-shrink: 0; }
.weather-text-wrap { flex: 1; min-width: 0; overflow: hidden; }
.weather-text { font-weight: 500; color: var(--text); white-space: nowrap; display: inline-block; }
.weather-stats { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); flex-shrink: 0; }
.weather-temp { font-weight: 600; color: var(--text); }

/* ===== FILTER BAR ===== */
#filter-bar {
  display: flex; gap: 6px; padding: 8px 16px; overflow-x: auto;
  border-bottom: 1px solid var(--border); background: var(--bg);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#filter-bar::-webkit-scrollbar { display: none; }
.filter-pill {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px;
  font-size: 13px; font-family: var(--font); background: #fff; color: var(--text);
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.filter-pill:hover { border-color: var(--text); }
.filter-pill.active { background: var(--text); color: #fff; border-color: var(--text); }
.filter-divider { width: 1px; background: var(--border); margin: 4px 2px; flex-shrink: 0; }

/* ===== CARD LIST ===== */
#card-list-header { padding: 12px 16px 4px; font-size: 13px; color: var(--text-secondary); font-weight: 500; }
#card-footer {
  position: sticky; bottom: 0;
  background: var(--bg-secondary); border-top: 1px solid var(--border);
  padding: 14px 20px; text-align: center;
}
#card-footer-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
#cards-container { padding: 0; }

/* ===== MAP ===== */
#map { width: 100%; height: 100%; }

/* ===== CARDS ===== */
.location-card {
  padding: 16px 20px; border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background 0.15s;
}
.location-card:hover { background: var(--bg-secondary); }
.location-card.selected { background: #f0f4ff; border-left: 3px solid var(--accent); padding-left: 17px; }
.card-main { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 5px; }
.card-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.card-name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.card-category-row { margin-bottom: 6px; }
.card-summary { font-size: 13px; color: var(--text-secondary); }
.tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 500;
}
.tag-category { background: #f0f0f0; color: var(--text-secondary); }
.tag-rating { background: #fff8e1; color: #c8620a; }

/* Sun Badges */
.sun-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px;
  border-radius: 20px; font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.sun-badge.sunny { background: var(--sun-bg); color: var(--sun-text); }
.sun-badge.shady { background: var(--shade-bg); color: var(--shade-text); }
.sun-badge.partial { background: #fff3e0; color: #e65100; }
.sun-badge.night { background: #e8e8ed; color: #6b6b6b; }
.sun-badge.loading { background: #f5f5f5; color: #999; }

/* ===== DETAIL SHEET ===== */
#detail-sheet { position: fixed; inset: 0; z-index: 500; }
#detail-sheet.hidden { display: none; }
.detail-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.3); }
.detail-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: 440px; max-width: 100%;
  background: #fff; overflow-y: auto; box-shadow: var(--shadow-lg);
  animation: slideIn 0.25s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.detail-close {
  position: sticky; top: 8px; float: right; margin: 8px 12px;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--bg-secondary); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
#detail-content { padding: 20px 24px 40px; }
.detail-name { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.detail-meta { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; }
.detail-section { margin-bottom: 20px; }
.detail-section h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }

/* Hours */
.detail-section h3 { display: flex; align-items: center; gap: 8px; }
.hours-status { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 12px; }
.hours-status.open { background: #d4edda; color: #2d6a4f; }
.hours-status.closed { background: var(--shade-bg); color: var(--shade-text); }
.hours-list { font-size: 13px; }
.hours-row { display: flex; justify-content: space-between; padding: 3px 0; color: var(--text-secondary); }
.hours-row.today { color: var(--text); font-weight: 600; }
.hours-day { min-width: 90px; }

/* Patio detail cards */
.patio-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; background: var(--bg-secondary); border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.patio-card-name { font-size: 14px; font-weight: 500; }
.patio-card-type { font-size: 12px; color: var(--text-secondary); }

/* Sun Timeline */
.timeline-row { margin-bottom: 10px; }
.timeline-label { font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.timeline-bar {
  display: flex; height: 24px; border-radius: 4px; overflow: hidden;
  background: var(--bg-secondary);
}
.timeline-segment { height: 100%; min-width: 2px; }
.timeline-segment.sunny { background: var(--sun-badge); }
.timeline-segment.shady { background: #ccc; }
.timeline-times {
  display: flex; justify-content: space-between; font-size: 10px;
  color: var(--text-secondary); margin-top: 2px;
}

.detail-info { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.detail-info a { color: var(--accent); }

/* ===== LOADING ===== */
#loading-overlay {
  position: fixed; inset: 0; z-index: 8000; background: rgba(255,255,255,0.95);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
#loading-overlay.hidden { display: none; }
#loading-overlay p { font-size: 15px; color: var(--text-secondary); }
.loading-spinner {
  width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center; padding: 48px 24px; color: var(--text-secondary);
}
.empty-state p { font-size: 15px; margin-top: 8px; }

/* ===== USER LOCATION ===== */
.user-location-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #4a90e2; border: 3px solid #fff;
  box-shadow: 0 0 0 2px #4a90e2, 0 2px 6px rgba(0,0,0,0.3);
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 2px #4a90e2, 0 2px 6px rgba(0,0,0,0.3); }
  60%  { box-shadow: 0 0 0 10px rgba(74,144,226,0), 0 2px 6px rgba(0,0,0,0.3); }
  100% { box-shadow: 0 0 0 10px rgba(74,144,226,0), 0 2px 6px rgba(0,0,0,0.3); }
}

.card-distance { color: #4a90e2; font-weight: 500; }
.card-distance::before { content: none; }

/* ===== MAPBOX OVERRIDES ===== */
.mapboxgl-popup-content { border-radius: var(--radius-sm); padding: 12px 16px; font-family: var(--font); font-size: 14px; }
.mapboxgl-popup-close-button { font-size: 18px; padding: 4px 8px; }
.marker-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); cursor: pointer; transition: transform 0.15s;
}
.marker-dot:hover { transform: scale(1.2); }
.marker-dot.sunny { background: var(--sun-badge); }
.marker-dot.shady { background: #aaa; }
.marker-dot.partial { background: linear-gradient(135deg, var(--sun-badge) 50%, #aaa 50%); }
.marker-dot.night { background: #666; }
.marker-dot.selected { transform: scale(1.3); border-color: var(--accent); }

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  #app {
    display: flex; flex-direction: column; height: 100vh; overflow: hidden;
  }

  /* Header: brand only */
  #header { flex-shrink: 0; border-bottom: none; justify-content: center; }
  /* Hide the desktop search + datetime row, but keep its inputs in the layout
     so the mobile pill buttons can invoke datePicker.showPicker() on them
     (display:none would throw InvalidStateError). */
  .header-right {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; opacity: 0;
    pointer-events: none;
    clip: rect(0, 0, 0, 0);
  }
  .header-brand { font-size: 22px; }

  /* Weather */
  #weather-banner { flex-shrink: 0; }

  /* Map: fixed height, no overlay anymore */
  #map-container { flex-shrink: 0; height: 42vh; border-bottom: 1px solid var(--border); }

  /* Datetime (60%) + search (40%) row; whichever has input focus grows to 100% */
  #mobile-controls {
    display: flex; gap: 8px; flex-shrink: 0;
    padding: 8px 12px;
  }
  #mobile-controls > * {
    min-width: 0; margin: 0; overflow: hidden;
    transition:
      flex-grow 0.35s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.25s ease,
      padding 0.35s cubic-bezier(0.32, 0.72, 0, 1),
      border-width 0.35s ease;
  }
  #datetime-pill { flex: 1 1 0; }
  #map-search    { flex: 1 1 0; }

  /* When an input inside one pill is focused, that pill expands; the other collapses.
     :has(input:focus) avoids matching on button focus (e.g. the "Now" button). */
  #mobile-controls:has(input:focus) > *:focus-within {
    flex-grow: 100;
  }
  #mobile-controls:has(input:focus) > *:not(:focus-within) {
    flex-grow: 0;
    opacity: 0;
    padding-left: 0; padding-right: 0;
    border-width: 0;
    pointer-events: none;
  }

  #map-search {
    display: flex; align-items: center; gap: 4px;
    position: relative;
    background: #fff; border-radius: 20px;
    padding: 6px 8px 6px 32px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    height: 36px;
  }
  #map-search .search-icon { left: 10px; }
  #map-search-input {
    border: none; background: transparent; padding: 0;
    font-size: 16px; font-family: var(--font); width: 100%; min-width: 0;
  }
  #map-search-input:focus { outline: none; }

  /* Clear/collapse X — only visible when bar is focused OR has text */
  #map-search-clear {
    display: none;
    flex-shrink: 0;
    width: 20px; height: 20px;
    border: none; border-radius: 50%;
    background: #d0d0d4; color: #fff;
    align-items: center; justify-content: center;
    padding: 0; cursor: pointer;
  }
  #map-search-clear:active { background: #b0b0b4; }
  #map-search:focus-within #map-search-clear,
  #map-search:has(#map-search-input:not(:placeholder-shown)) #map-search-clear {
    display: inline-flex;
  }

  /* Datetime pill */
  #datetime-pill {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
    padding: 4px 6px 4px 12px;
    background: #fff; border-radius: 20px; border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    height: 36px;
  }
  #datetime-display {
    flex: 1; min-width: 0;
    font-size: 12px; font-weight: 500; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #date-pill-btn, #time-pill-btn {
    background: none; border: none; padding: 3px; cursor: pointer;
    color: var(--text-secondary); display: flex; align-items: center;
    position: relative; /* anchor for invisible <input> overlay */
  }
  #date-pill-btn svg, #time-pill-btn svg { width: 16px; height: 16px; }
  /* Invisible native date/time input layered over the pill icon — tapping it
     opens the iOS/Android picker without any JS shim. font-size:16px stops
     iOS from zooming when the input gains focus. */
  .pill-input {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    border: none; background: transparent; padding: 0;
    font-size: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  #now-pill-btn {
    padding: 6px 14px; border: none; border-radius: 20px;
    background: var(--sun-badge); color: #333; font-size: 13px;
    font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--font);
    overflow: hidden;
    transition:
      opacity 0.2s ease,
      padding 0.25s cubic-bezier(0.32, 0.72, 0, 1),
      max-width 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    max-width: 80px;
  }
  /* Hidden until the user has edited the time — fades + collapses width to 0 */
  #now-pill-btn.hidden {
    opacity: 0;
    max-width: 0;
    padding-left: 0; padding-right: 0;
    pointer-events: none;
  }

  /* Filter bar */
  #filter-bar { flex-shrink: 0; }

  /* Cards: take remaining height */
  #card-list { flex: 1; overflow-y: auto; border-right: none; border-top: 1px solid var(--border); min-height: 0; }
  .card-name { font-size: 16px; }
  #card-footer { padding: 14px 60px; }

  /* Detail sheet slides up */
  .detail-panel { width: 100%; animation-name: slideUp; }
  @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* Scroll the sassy weather message on mobile so the full text is readable.
     Starts visible at position 0, pauses, scrolls only as far as the hidden tail,
     pauses at the end, then slides back. --scroll-distance is set by JS based on
     the actual overflow. Emoji + stats (temp / condition / wind) stay static. */
  .weather-text.needs-scroll {
    animation: weather-scroll 10s ease-in-out infinite;
  }
  @keyframes weather-scroll {
    0%, 20%  { transform: translateX(0); }
    50%, 70% { transform: translateX(var(--scroll-distance, 0)); }
    100%     { transform: translateX(0); }
  }

  /* Expandable list: when user scrolls, list grows to cover header/weather/map/controls */
  #header, #weather-banner, #map-container, #mobile-controls {
    transition:
      height 1.1s cubic-bezier(0.32, 0.72, 0, 1),
      margin 1.1s cubic-bezier(0.32, 0.72, 0, 1),
      padding 1.1s cubic-bezier(0.32, 0.72, 0, 1),
      border-width 1.1s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.7s ease;
    overflow: hidden;
  }
  #app.list-expanded #header,
  #app.list-expanded #weather-banner {
    height: 0; border-bottom-width: 0; opacity: 0;
  }
  #app.list-expanded #map-container {
    height: 0; border-bottom-width: 0;
  }
  #app.list-expanded #mobile-controls {
    height: 0; padding-top: 0; padding-bottom: 0; opacity: 0;
  }
  #app.list-expanded #filter-bar {
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }

  /* "Map" button: shown only when list is expanded */
  #show-map-btn {
    display: none;
    position: fixed;
    bottom: calc(72px + var(--safe-bottom));
    left: 50%; transform: translateX(-50%);
    align-items: center; gap: 6px;
    padding: 10px 18px;
    background: #333; color: #fff;
    border: none; border-radius: 24px;
    font-size: 14px; font-weight: 600; font-family: var(--font);
    cursor: pointer; z-index: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  #app.list-expanded #show-map-btn { display: inline-flex; }
}

/* Desktop: button never shows */
@media (min-width: 768px) {
  #show-map-btn { display: none !important; }
}