/* ── Month calendar popover ──────────────────────────────────────────────────
   Little brass-body / green-CRT month grid, matching radio.css / sky.css / about.
   Opened by the day-of-week status icon; today's cell is highlighted.
   ──────────────────────────────────────────────────────────────────────────── */

#calendar-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 62;                 /* above the other cards */
  width: 300px;
  max-width: calc(100vw - 24px);
}
#calendar-panel.hidden { display: none; }

.cal-body {
  background:
    linear-gradient(168deg, rgba(255,180,90,0.12) 0%, rgba(0,0,0,0.16) 52%, rgba(0,0,0,0.40) 100%),
    url('/nightwatch/images/wood-walnut.svg');
  background-size: cover, 400px 220px;
  background-repeat: no-repeat, repeat;
  border-radius: 14px 14px 10px 10px;
  border: 1.5px solid #5a2e10;
  box-shadow:
    0 0 0 2px #2a1206,
    inset 0 1px 0 rgba(255,160,80,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 12px 40px rgba(0,0,0,0.78),
    0 4px 14px rgba(0,0,0,0.55);
  padding: 12px 14px 12px;
}

.cal-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.cal-title {
  flex: 1 1 auto; text-align: center;
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(255,215,120,1); text-shadow: 0 0 10px rgba(255,180,60,0.4);
}
.cal-nav, .cal-close {
  flex: 0 0 auto; cursor: pointer; line-height: 1;
  background: linear-gradient(180deg, #c8b090 0%, #8a6040 42%, #6a4828 100%);
  color: #1a0c04; border: 1px solid #4a2c10; border-radius: 5px;
  font-weight: 700; font-size: 0.8rem; padding: 3px 8px;
  box-shadow: inset 0 1px 0 rgba(255,220,160,0.4), 0 1px 3px rgba(0,0,0,0.5);
}
.cal-nav:hover, .cal-close:hover { filter: brightness(1.12); }
.cal-close { margin-left: 2px; }

/* Green-CRT month grid (recessed, glowing — like the radio/sky screens). */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  background: color-mix(in srgb, var(--nw-bg) 86%, #000 14%);
  border: 1.5px solid color-mix(in srgb, var(--nw-fg) 22%, transparent);
  border-radius: 8px;
  padding: 8px;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,0.7),
    inset 0 0 6px color-mix(in srgb, var(--nw-glow) 40%, transparent);
}
.cal-dow {
  text-align: center; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.05em; padding: 2px 0;
  color: color-mix(in srgb, var(--nw-fg) 60%, transparent);
}
.cal-cell {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--nw-fg) 88%, transparent);
  border-radius: 5px;
}
.cal-empty { color: transparent; }
.cal-today-cell {
  background: var(--nw-fg);
  color: var(--nw-bg);
  font-weight: 700;
  box-shadow: 0 0 8px var(--nw-glow);
}

.cal-today {
  display: block; margin: 10px auto 0; cursor: pointer;
  background: linear-gradient(180deg, #c8b090 0%, #8a6040 42%, #6a4828 100%);
  color: #1a0c04; border: 1px solid #4a2c10; border-radius: 6px;
  font-family: 'Cinzel', 'Palatino Linotype', serif; font-weight: 700;
  letter-spacing: 0.06em; font-size: 0.72rem; padding: 4px 14px;
  box-shadow: inset 0 1px 0 rgba(255,220,160,0.45), 0 2px 4px rgba(0,0,0,0.55);
}
.cal-today:hover { filter: brightness(1.12); }
.cal-today:active { transform: translateY(1px); }