/* ============================================================
   Homepage-only styles: the rainfall heatmap. Shares fonts, ink
   colors, glass tokens, topbar, reveal animations, and footer rules
   with styles.css (loaded first); this file only adds what's unique
   to the heatmap.

   Written mobile-first on purpose: base rules target a narrow phone
   viewport with NO horizontal scroll anywhere on the page, and
   min-width queries only ADD breathing room on larger screens. Every
   city is its own full-width row (name on one line, its 12 months as
   a full-width grid strip below), rather than a table with a sticky
   name column that would compete with 12 cells for the same narrow
   viewport. A single sticky month-header strip carries the Jan..Dec
   labels once; it and every city's cell strip share the same
   `repeat(12, 1fr)` grid so their columns line up exactly.
   ============================================================ */

.hm-bg {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(circle at 15% -10%, rgba(39,148,112,0.16), transparent 55%),
    radial-gradient(circle at 85% 0%, rgba(232,184,92,0.08), transparent 50%),
    #0B1418;
}

.hm-shell { max-width: 640px; margin: 0 auto; padding: 0 16px 64px; min-height: 100vh; position: relative; }
.hm-shell .topbar { padding: 20px 2px 6px; }

.hm-hero { padding: 18px 2px 4px; }
.hm-overline {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-faint);
  margin-bottom: 10px;
}
.hm-title {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 26px;
  line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px;
}
.hm-sub { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* Sticky month header: same 12-column grid as every city's cell strip,
   so the two align pixel-for-pixel without repeating labels per city. */
.hm-month-header-wrap {
  position: sticky; top: 0; z-index: 5;
  margin: 22px -16px 0; padding: 10px 16px 8px;
  background: rgba(11,20,24,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
}
.hm-month-header { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.month-th {
  appearance: none; border: none; background: none; padding: 6px 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  color: var(--ink-faint); text-align: center; border-radius: 8px;
  cursor: pointer; transition: color 0.2s ease, background 0.2s ease;
}
.month-th:hover { color: var(--ink); }
.month-th.col-active { color: #57e8b5; background: rgba(87,232,181,0.12); }

.hm-list { margin-top: 6px; }
.hm-country { margin-top: 22px; }
.hm-country:first-child { margin-top: 14px; }
.hm-country-title {
  padding: 0 2px 10px; font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: 12.5px; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--ink-soft);
}
.country-flag { font-size: 14px; margin-right: 2px; }
.country-count {
  font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 10.5px;
  text-transform: none; letter-spacing: 0.03em; color: var(--ink-faint);
  margin-left: 6px;
}

.hm-city { padding: 10px 2px; border-radius: 14px; transition: background 0.2s ease; }
.hm-city:active { background: rgba(255,255,255,0.04); }
.hm-city-name {
  display: block; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13.5px;
  color: var(--ink); text-decoration: none; margin: 0 0 7px 2px;
}
.hm-city-name:hover, .hm-city-name:active { color: #57e8b5; }

.hm-cells { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }

.cell {
  appearance: none; border: none; padding: 0; aspect-ratio: 1;
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter 0.15s ease, transform 0.12s cubic-bezier(0.34,1.56,0.64,1), outline 0.15s ease;
}
.cell:hover, .cell:focus-visible { filter: brightness(1.3); transform: scale(1.12); z-index: 1; outline: 1.5px solid rgba(255,255,255,0.55); outline-offset: -1.5px; }
.cell:focus-visible { outline-color: #57e8b5; }
.cell:active { transform: scale(0.94); }

.hm-list.month-active .cell { opacity: 0.3; filter: saturate(0.4); }
.hm-list.month-active .cell.col-active { opacity: 1; filter: none; transform: scale(1.08); }

.cell-glyph { font-size: 10px; line-height: 1; pointer-events: none; filter: drop-shadow(0 0 2px rgba(0,0,0,0.7)); }

/* Custom hover/tap tooltip (progressive enhancement; the native title
   attribute already carries the same text with zero JS, see
   homepage.js and generate-homepage.js's cell()). */
.hm-tooltip {
  position: fixed; z-index: 50; pointer-events: none;
  background: #16221f; border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 10px 13px; max-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-soft);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.hm-tooltip.visible { opacity: 1; transform: translateY(0); }
.hm-tooltip-value { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; color: var(--ink); display: block; margin-bottom: 2px; }

/* ---- Enhance upward for larger screens; base above already works
   full-width on a phone with zero horizontal scroll. ---- */
@media (min-width: 480px) {
  .hm-shell { padding: 0 24px 72px; }
  .hm-month-header-wrap { margin: 22px -24px 0; padding: 10px 24px 8px; }
  .hm-title { font-size: 30px; }
  .month-th { font-size: 11px; }
  .cell-glyph { font-size: 12px; }
}
@media (min-width: 640px) {
  .hm-shell { max-width: 760px; }
  .hm-title { font-size: 34px; }
  .hm-sub { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cell, .month-th { transition-duration: 0.01ms !important; }
}