* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --pink: #ec4899; --pink-light: #fdf2f8; --pink-dark: #be185d;
  --orange: #ea580c; --orange-light: #fff7ed;
  --green: #16a34a; --green-light: #f0fdf4;
  --purple: #7c3aed; --sky: #0ea5e9;
  --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #e5e5e5;
  --gray-400: #a3a3a3; --gray-600: #525252; --gray-800: #262626;
  --radius: 12px;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--gray-800); background: var(--gray-50); }

/* ── Layout ── */
.app { display: flex; flex-direction: column; height: 100vh; }
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: white; border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0; gap: 12px; flex-wrap: wrap;
}
.top-bar h1 { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.brand { display: flex; flex-direction: column; line-height: 1.2; }
.brand-by { font-size: 0.68rem; color: var(--gray-400); }
.brand-by a { color: var(--gray-400); text-decoration: none; }
.brand-by a:hover { color: var(--gray-600); text-decoration: underline; }
.brand-by a.install-cta { color: var(--pink-dark); font-weight: 600; }
.brand-by a.install-cta:hover { text-decoration: underline; }
.main { display: flex; flex: 1; overflow: hidden; }
.map-container { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }
.map-placeholder {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 900;
  max-width: 360px;
  padding: 14px 16px;
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-radius: 14px;
  background: rgba(240, 253, 244, 0.95);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(6px);
}
.map-placeholder.hidden { display: none; }
.map-placeholder h3 {
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: #166534;
}
.map-placeholder p {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #166534;
}
.sidebar {
  width: 380px; background: white;
  border-left: 1px solid var(--gray-200); flex-shrink: 0;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ── Controls ── */
.controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mode-select { display: none; }
.mode-btn {
  padding: 6px 14px; border: 1px solid var(--gray-200); border-radius: 20px;
  background: white; cursor: pointer; font-size: 0.82rem; font-weight: 500;
  color: var(--gray-600); transition: all 0.2s; white-space: nowrap;
}
.mode-btn.active { background: var(--pink); color: white; border-color: var(--pink); }
.mode-btn.koyo.active { background: var(--orange); color: white; border-color: var(--orange); }
.mode-btn.fruit.active { background: var(--green); color: white; border-color: var(--green); }
.mode-btn.flowers.active { background: var(--purple); color: white; border-color: var(--purple); }
.mode-btn.whatson.active { background: var(--sky); color: white; border-color: var(--sky); }
.mode-btn:hover:not(.active) { border-color: var(--gray-400); }
.date-input {
  padding: 5px 10px; border: 1px solid var(--gray-200); border-radius: 8px;
  font-size: 0.82rem; background: white;
}
.find-btn {
  padding: 5px 14px; background: var(--pink); color: white;
  border: none; border-radius: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 500;
}

/* ── Sidebar content ── */
.sidebar-header {
  padding: 16px; border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 0; background: white; z-index: 1;
}
.sidebar-header h2 { font-size: 1rem; margin-bottom: 2px; }
.sidebar-header p { font-size: 0.8rem; color: var(--gray-600); }
.sidebar-content { padding: 0; flex: 1; overflow-y: auto; }

.spot-item {
  padding: 12px 16px; border-bottom: 1px solid var(--gray-100);
  cursor: pointer; transition: background 0.15s;
}
.spot-item:hover { background: var(--gray-50); }
.spot-item h4 { font-size: 0.88rem; margin-bottom: 3px; }
.spot-item .sub { font-size: 0.78rem; color: var(--gray-600); }

/* ── Bloom bar ── */
.bloom-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.bloom-label { font-size: 0.72rem; color: var(--gray-400); width: 68px; }
.bloom-track { flex: 1; height: 14px; background: var(--gray-100); border-radius: 7px; overflow: hidden; }
.bloom-fill {
  height: 100%; border-radius: 7px; display: flex; align-items: center;
  justify-content: flex-end; padding-right: 4px;
  font-size: 0.65rem; font-weight: 600; color: white; min-width: 24px;
}
.bloom-fill.b { background: linear-gradient(90deg, #fdba74, #f97316); }
.bloom-fill.f { background: linear-gradient(90deg, #f9a8d4, #be185d); }

/* ── Badge ── */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 0.7rem; font-weight: 500;
}
.badge.peak { background: #fce7f3; color: var(--pink-dark); }
.badge.bloom { background: var(--pink-light); color: var(--pink); }
.badge.soon { background: #ecfdf5; color: #059669; }
.badge.ended { background: var(--gray-100); color: var(--gray-400); }

/* ── Legend ── */
.legend {
  position: absolute; bottom: 20px; left: 20px; z-index: 1000;
  background: white; padding: 10px 14px; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-size: 0.75rem;
}
.legend-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }
.legend-toggle-btn {
  display: none; background: none; border: none; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; color: var(--gray-800); padding: 0;
}

/* ── Loading ── */
.loading { padding: 40px; text-align: center; color: var(--gray-400); }

/* ── Skeleton loader ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-200);
}
.skeleton-line {
  height: 12px; border-radius: 6px; margin-bottom: 8px;
  background: linear-gradient(90deg, var(--gray-100) 25%, #ebebeb 50%, var(--gray-100) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-40 { width: 40%; }

/* ── Bloom filter pills ── */
.filter-pill {
  flex: 1; padding: 5px 4px; border: 1px solid var(--gray-200); border-radius: 6px;
  background: white; cursor: pointer; font-size: 0.75rem; color: var(--gray-600);
  white-space: nowrap; transition: all 0.15s; text-align: center; font-weight: 500;
}
.filter-pill.active { background: var(--pink); color: white; border-color: var(--pink); }
.filter-pill:hover:not(.active) { background: var(--gray-50); border-color: var(--gray-400); }

/* ── Trip city chips ── */
.city-chip {
  padding: 4px 10px; border: 1px solid var(--gray-200); border-radius: 20px;
  background: white; cursor: pointer; font-size: 0.78rem; color: var(--gray-600);
  transition: all 0.15s; white-space: nowrap;
}
.city-chip.active { background: var(--pink-light); border-color: var(--pink); color: var(--pink-dark); font-weight: 500; }
.city-chip:hover:not(.active) { background: var(--gray-50); border-color: var(--gray-400); }

/* ── Footer link ── */
.footer-link {
  padding: 16px; text-align: center; font-size: 0.75rem; color: var(--gray-400);
  border-top: 1px solid var(--gray-200);
}
.footer-link a { color: var(--gray-600); }

/* ── Mobile ── */
@media (max-width: 768px) {
  .main { flex-direction: column; }
  .map-container { height: 55vh; }
  .sidebar { width: 100%; height: 45vh; border-left: none; border-top: 1px solid var(--gray-200); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .map-placeholder {
    top: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
    padding: 12px 14px;
  }
  .top-bar { flex-wrap: nowrap; padding: 8px 12px; }
  .top-bar h1 { font-size: 1rem; }
  .controls { display: none; }
  .mode-select {
    display: block; padding: 6px 10px; border: 1px solid var(--gray-200);
    border-radius: 20px; background: white; font-size: 0.82rem; font-weight: 500;
    color: var(--gray-600); cursor: pointer; max-width: 180px;
  }
  .legend { bottom: 10px; left: 10px; padding: 6px 10px; }
  .legend-toggle-btn { display: flex; align-items: center; gap: 4px; }
  .legend .legend-body { display: none; }
  .legend.expanded .legend-body { display: block; margin-top: 6px; }
}
@media (max-width: 1100px) and (min-width: 769px) {
  .sidebar { width: 320px; }
}
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* Static content below the map — SEO + GEO landing area */
.content { max-width: 820px; margin: 0 auto; padding: 48px 24px 80px; }
.content-section { margin-bottom: 40px; }
.content-section h2 { font-size: 1.5rem; margin: 0 0 12px; color: var(--gray-800); }
.content-section h3 { font-size: 1rem; margin: 20px 0 8px; color: var(--gray-800); }
.content-section p { font-size: 0.95rem; line-height: 1.6; color: var(--gray-600); margin: 0 0 12px; }
.content-section ul { font-size: 0.95rem; line-height: 1.7; color: var(--gray-600); padding-left: 20px; }
.content-section li { margin-bottom: 4px; }
.content-section a { color: var(--pink-dark); text-decoration: none; }
.content-section a:hover { text-decoration: underline; }
.content-section code { background: var(--gray-100); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }
.content-section pre { background: var(--gray-100); padding: 14px 16px; border-radius: 8px; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; }
.content-section pre code { background: transparent; padding: 0; }
.content-section .attribution { margin-top: 16px; font-size: 0.82rem; color: var(--gray-400); }
@media (max-width: 768px) {
  .content { padding: 32px 16px 60px; }
  .content-section h2 { font-size: 1.25rem; }
}