/* ============================================================
   CityScope — app shell, navigation, and view-specific layout
   ============================================================ */

.app-shell {
  position: relative;
  min-height: 100vh;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* ---- Nav ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0.9rem 0;
  margin-bottom: var(--space-6);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.brand-mark {
  display: inline-flex;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--primary-contrast);
}
.nav-links { display: flex; gap: 0.25rem; }
.nav-link {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
}
.nav-link:hover { background: rgba(127, 127, 127, 0.1); color: var(--text); }
.nav-link.is-active {
  background: var(--glass-bg);
  color: var(--text);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.nav-burger { display: none; }
.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.6rem;
  padding: 0.4rem;
  border-radius: var(--radius-md);
  /* Was fully transparent — non-active links (plain muted text, no pill)
     had nothing behind them to read against but the page itself, which
     made the open menu look broken rather than like a dropdown panel. */
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.nav-mobile .nav-link { color: var(--text); text-align: left; }
.nav-mobile .nav-link:hover { background: rgba(127, 127, 127, 0.14); }

/* ---- Footer ---- */
.app-footer {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.footer-brand .brand-mark {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--primary-contrast);
}
.footer-tagline { max-width: 42ch; line-height: 1.5; }
.footer-links { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 0.1rem; }
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.footer-link:hover { color: var(--text); }
.footer-copy { font-size: 0.75rem; opacity: 0.75; margin-top: 0.15rem; }

/* ---- Legal pages (privacy.html) ---- */
.legal-page { max-width: 68ch; margin: 0 auto; padding: var(--space-6) 0; }
.legal-page h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.01em; }
.legal-page .lede { margin-bottom: var(--space-5); }
.legal-page section { margin-top: var(--space-5); }
.legal-page h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.legal-page p, .legal-page li { color: var(--muted); line-height: 1.6; }
.legal-page ul { padding-left: 1.2rem; margin-top: 0.35rem; }
.legal-page li { margin-bottom: 0.35rem; }
.legal-page a { color: var(--primary); }
.back-link { display: inline-block; margin-bottom: var(--space-4); }

/* ---- Views ---- */
.view { animation: fade-slide-in 0.35s ease both; }

.view-header { margin-bottom: var(--space-5); }
.view-header h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.01em; }
.lede { color: var(--muted); margin-top: 0.35rem; max-width: 46ch; }

/* ---- Home: search hero ---- */
.search-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(1.5rem, 8vh, 4rem) 0 2rem;
}
.hero-kicker {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent-text);
  margin-bottom: var(--space-2);
}
.search-hero h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; }
.search-hero .lede { margin: 0.6rem 0 1.75rem; }
.search-hero .search-box { width: min(560px, 100%); }
.search-hero .search-suggestions { width: min(560px, 100%); text-align: left; }
.hero-location-btn { margin-top: var(--space-4); }
.search-hero .chip-group { justify-content: center; margin-top: var(--space-5); }

/* ---- Home: dashboard ---- */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-2);
}
.dashboard-search { width: 100%; margin: 0 auto; }
#dashboard-suggestions { width: 100%; }

.hero-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0 0;
  animation: fade-slide-in 0.5s var(--ease-out) both;
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }

/* ---- My Cities (pinned favorites, visible from the dashboard itself) ---- */
.my-cities-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
}
.my-cities-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.my-cities-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.my-city-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.25rem 0.25rem 0.85rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.my-city-open { border: none; background: transparent; color: var(--text); font-weight: 600; font-size: 0.85rem; cursor: pointer; padding: 0.1rem 0; }
.my-city-unpin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.my-city-unpin:hover { background: var(--glass-bg-strong); color: var(--danger); }
.hero-location-row { display: flex; align-items: center; gap: 0.4rem; }
.hero-location-row h1, .hero-location-row h2 { font-size: clamp(1.2rem, 3.2vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; }
.hero-location p { margin-top: 0.15rem; color: var(--muted); font-weight: 500; font-size: 0.9rem; }
.favorite-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem;
  display: inline-flex;
  transition: color 0.2s ease, transform 0.2s ease;
}
.favorite-btn:hover { transform: scale(1.1); }
.favorite-btn[aria-pressed="true"] { color: var(--warning); }
.favorite-btn[aria-pressed="true"] svg { fill: currentColor; }

.hero-time { text-align: right; }
.hero-time-value { font-size: 1.1rem; font-weight: 700; }
.hero-time-sub { color: var(--muted); font-size: 0.78rem; }

/* Apple Weather-style "now" block: no card chrome, everything centered
   and floating directly on the weather-responsive atmosphere gradient. */
.hero-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.1rem;
  padding: clamp(0.5rem, 3vh, 1.5rem) 0 clamp(1rem, 4vh, 2rem);
}
.weather-visual { width: clamp(72px, 16vw, 104px); height: clamp(72px, 16vw, 104px); color: var(--text); flex-shrink: 0; margin-bottom: 0.2rem; }
.weather-visual svg { width: 100%; height: 100%; display: block; }
.hero-temp-block { min-width: 0; }
.hero-temp { font-size: clamp(4.5rem, 19vw, 8rem); font-weight: 100; line-height: 1; letter-spacing: -0.03em; }
.hero-condition { font-size: clamp(1.1rem, 3vw, 1.35rem); font-weight: 500; margin-top: 0.1rem; text-transform: capitalize; }
.hero-feels { color: var(--muted); margin-top: 0.3rem; font-size: 0.95rem; }
.hero-hilo { color: var(--muted); margin-top: 0.15rem; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.hourly-scroll {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scrollbar-width: thin;
}
.hourly-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 58px;
  flex-shrink: 0;
}
.hourly-item .hourly-time { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.hourly-item .hourly-icon { width: 30px; height: 30px; }
.hourly-item .hourly-icon svg { width: 100%; height: 100%; display: block; }
.hourly-item .hourly-temp { font-weight: 700; }
.hourly-item .hourly-rain { font-size: 0.72rem; font-weight: 600; color: var(--accent-text); min-height: 1em; }

.glass-chart { width: 100%; height: auto; margin-top: var(--space-4); display: block; }

.daily-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.daily-row {
  display: grid;
  grid-template-columns: 90px 32px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
}
.daily-row:last-child { border-bottom: none; }
.daily-day { font-weight: 700; }
.daily-icon { width: 26px; height: 26px; }
.daily-icon svg { width: 100%; height: 100%; display: block; }
.daily-rain { color: var(--muted); font-size: 0.82rem; justify-self: start; }
.daily-temps { display: flex; gap: 0.4rem; font-weight: 600; justify-self: end; }
.daily-temps [aria-hidden="true"] { color: var(--muted); font-weight: 400; }
.daily-temps .temp-min { color: var(--muted); font-weight: 500; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

.aqi-readout { display: flex; align-items: baseline; gap: 0.6rem; }
.aqi-value { font-size: 2.4rem; font-weight: 700; }
.aqi-category { font-weight: 600; color: var(--muted); }
.aqi-explainer { margin-top: 0.4rem; color: var(--muted); }

.travel-subtitle { color: var(--muted); font-size: 0.85rem; margin-bottom: var(--space-3); }
.travel-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  width: fit-content;
}
.travel-badge.is-good { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.travel-badge.is-caution { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.travel-badge.is-poor { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.travel-reasons { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.travel-reasons li { padding-left: 1.1rem; position: relative; color: var(--muted); }
.travel-reasons li::before { content: "•"; position: absolute; left: 0; color: var(--text); }
.travel-window {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.travel-window-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.travel-window-value { display: block; font-size: 1.05rem; font-weight: 700; margin-top: 0.2rem; }

.currency-display { display: flex; align-items: center; gap: 0.6rem; font-size: 1.1rem; }
.currency-display svg { color: var(--primary); }
#currency-target-line { font-size: 1.5rem; font-weight: 700; }
.currency-updated { color: var(--muted); font-size: 0.8rem; margin-top: 0.3rem; }

.converter {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-3);
  align-items: end;
  margin-top: var(--space-4);
}
.converter-field { display: flex; flex-direction: column; gap: 0.3rem; }
.converter-field label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.converter-field input, .converter-field select {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.6rem;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
  color: var(--text);
  font-size: 0.95rem;
}
.converter-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 14px;
  padding-right: 1.6rem;
}
.converter-field input:focus, .converter-field select:focus {
  background-color: var(--glass-bg-strong);
}

/* Customizable Select API (Chromium): opts the open dropdown list into the
   same glass material as the rest of the app instead of the OS-native
   opaque popup. Browsers without support simply ignore this and keep the
   normal native select — no fallback branch needed. */
@supports (appearance: base-select) {
  .converter-field select {
    appearance: base-select;
    /* base-select renders its own native arrow (::picker-icon) — drop the
       manual chevron background-image above or the two stack. */
    background-image: none;
    padding-right: 0.6rem;
  }
  .converter-field select::picker(select) {
    appearance: base-select;
    margin-top: 0.4rem;
    padding: 0.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
  .converter-field select option {
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--text);
  }
  .converter-field select option:hover,
  .converter-field select option:focus {
    background: rgba(127, 127, 127, 0.14);
  }
  .converter-field select option:checked {
    background: var(--primary);
    color: var(--primary-contrast);
  }
  /* The blue highlight above is enough to show the selected option —
     drop the native checkmark glyph base-select adds on top of it. */
  .converter-field select option::checkmark {
    display: none;
  }
}
.converter-result { margin-top: var(--space-3); font-weight: 600; }

.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.range-row { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.range-item { flex: 1; min-width: 100px; text-align: center; padding: 0.7rem; border-radius: var(--radius-sm); background: rgba(127,127,127,0.08); }
.range-item .range-label { font-size: 0.72rem; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.range-item .range-value { font-size: 1.2rem; font-weight: 700; margin-top: 0.2rem; }

/* ---- Map view ---- */
.map-frame { padding: 0; overflow: hidden; border-radius: var(--radius-lg); margin-top: var(--space-4); }
#map-container { width: 100%; height: min(60vh, 520px); min-height: 320px; }

/* ---- Globe (primary Map-view experience; see js/globe.js) ---- */
.globe-frame {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
  /* A restrained near-black backdrop so the dark/atmospheric globe reads as
     a deliberate "world in space" surface rather than floating on the
     page's own light/dark background. */
  background: radial-gradient(circle at 50% 42%, #161d2c 0%, #0a0e17 72%, #070a11 100%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.globe-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  min-height: min(56vh, 440px);
  /* The whole card is the drag/zoom surface (see GlobeView's onPointerDown
     for why it's bound here rather than on the small canvas), so the grab
     cursor and touch handling belong on the stage, not the canvas. */
  cursor: grab;
  touch-action: none;
}
.globe-stage.is-grabbing { cursor: grabbing; }
.globe-canvas-wrap {
  position: relative;
  width: min(48vw, 340px);
  aspect-ratio: 1;
  max-width: 100%;
}
#globe-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.globe-markers { position: absolute; inset: 0; pointer-events: none; }
/* No dot/pin — just the city's name, the way a real globe/map reveals
   place labels as you zoom in rather than showing permanent pins
   everywhere at once (see GlobeView's populationThreshold()). */
.globe-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
  /* The padding enlarges the tap target; translate(-50%, -50%) above keeps
     the padded box centred on the city's projected point. (A negative
     margin used to sit here to "cancel" the padding, but on an absolutely
     positioned box it moves the box instead — every label sat 9.6px left
     and 8px up of its city, several hundred km at globe scale.) */
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}
.globe-marker-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #f2f5fa;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 10px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
.globe-marker:hover .globe-marker-label,
.globe-marker:focus-visible .globe-marker-label { color: #cfe0ff; }
.globe-marker.is-selected .globe-marker-label {
  color: var(--success);
  font-weight: 700;
}

.globe-zoom {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.globe-zoom-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f2f5fa;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.globe-zoom-btn:hover { background: rgba(255, 255, 255, 0.16); }
.globe-zoom-btn:active { transform: scale(0.94); }

.globe-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(242, 245, 250, 0.65);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.leaflet-popup-content { font-family: var(--font-sans); }

/* Leaflet's own UI chrome (zoom buttons, attribution) restyled to match
   the glass system instead of its default flat white boxes. */
.leaflet-control-zoom.leaflet-bar {
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
.leaflet-control-zoom a {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text) !important;
  border: none !important;
}
.leaflet-control-zoom a:first-child { border-radius: 0 !important; }
.leaflet-control-zoom a:hover { background: var(--glass-bg) !important; }
.leaflet-control-attribution {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--muted) !important;
  border-radius: var(--radius-sm) 0 0 0;
}
.leaflet-control-attribution a { color: var(--text) !important; }

/* ---- Compare view ---- */
.compare-table-wrap {
  margin: var(--space-5) 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}
.compare-table th, .compare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
}
.compare-table thead th {
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-weight: 700;
}
.compare-table thead th:first-child { min-width: 6.5rem; }
.compare-city-name { display: block; font-size: 1rem; }
.compare-city-country { display: block; color: var(--muted); font-weight: 500; font-size: 0.78rem; margin-top: 0.1rem; }
.compare-table .compare-remove {
  margin-top: 0.4rem;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: var(--radius-sm);
}
.compare-table .compare-remove:hover { color: var(--danger); }
.compare-table tbody th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
}
.compare-table tbody tr:not(:last-child) th,
.compare-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--hairline);
}
.compare-table tbody td { font-weight: 600; }

/* ---- About view ---- */
.about-card { margin-bottom: var(--space-4); }
.about-card p, .about-card ul { color: var(--muted); line-height: 1.6; }
.about-card strong { color: var(--text); }
.tech-list { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.data-source-list { margin: 0; }
.data-source-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.6rem 0;
}
.data-source-row:not(:last-child) { border-bottom: 1px solid var(--hairline); }
.data-source-row dt { color: var(--text); font-weight: 600; }
.data-source-row dd { margin: 0; color: var(--muted); text-align: right; }
.about-fineprint { margin-top: var(--space-4); font-size: 0.85rem; }
.about-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.about-links-list a { font-weight: 600; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-mobile[data-open="true"] { display: flex; }
  .two-col, .analytics-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .converter { grid-template-columns: 1fr 1fr; }
  .converter button { grid-column: span 2; }
  .globe-canvas-wrap { width: min(62vw, 300px); }
  .globe-stage { min-height: min(52vh, 380px); }
}

@media (max-width: 480px) {
  .app-shell { padding: 0 1rem 3rem; }
  .hero-time { text-align: left; }
  .hero-top { flex-direction: column; }
  .daily-row { grid-template-columns: 76px 26px 1fr auto; }
  .globe-canvas-wrap { width: min(78vw, 260px); }
  .globe-stage { padding: var(--space-5) var(--space-3); min-height: min(48vh, 320px); }
  .globe-hint { font-size: 0.68rem; padding: 0.25rem 0.65rem; }
  .globe-zoom-btn { width: 28px; height: 28px; font-size: 0.9rem; }
}