/* ===========================================
   MOON PHASE ROW
   ===========================================
   24-col overlay aligned with .hour-column placement (matches the Figma
   board 48:169 layout: each icon is centred on its own hour column, with
   the full-moon slot directly under 12:00). z-index sits above the air-
   quality gradient (7) and hour labels (8) so the icons are never covered. */

.moon-phase-row {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  pointer-events: none;
  z-index: 11;
  color: rgba(255, 255, 255, 0.95);
}

.moon-phase-cell {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Designer's spec: ~18px breathing room between the hour label and the
     icon's top edge at 1920-wide canvas (hour-label box ≈ 21px tall there,
     so cell padding-top ≈ 39px ≈ 2cqi). cqi keeps the gap proportional. */
  padding-top: clamp(20px, 2cqi, 40px);
}

.moon-phase-icon {
  display: block;
  /* Figma icon height = 27.26 board px ≈ 1.42% of the 1920-wide canvas. */
  height: clamp(16px, 1.42cqi, 28px);
  width: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  /* Keep the 1-unit stroke crisp at any rendered size. */
  vector-effect: non-scaling-stroke;
  overflow: visible;
  opacity: 0.6;
  transition: opacity 0.2s ease, stroke-width 0.2s ease;
}

.moon-phase-icon.is-active {
  opacity: 1;
  fill: currentColor;
}

/* Open-arc crescent: filling would close it across the chord, which looks
   wrong. Active state thickens the stroke instead, matching "pogrubiona". */
.moon-phase-icon[data-shape="crescent"] {
  fill: none !important;
  stroke-linecap: round;
}

.moon-phase-icon[data-shape="crescent"].is-active {
  stroke-width: 2.4;
}

/* Mirroring is set per-phase (see PHASE_DEF in moon-phase-row.js) so each
   icon "embraces" the central 12:00 column, matching the Figma board. */
.moon-phase-icon[data-mirror="true"] {
  transform: scaleX(-1);
}