/* =====================================================================
 * Bujan moon calendar — single-shell (calendar-frame-single-shell-alpha.webp)
 *
 * Measured alpha holes (960×1280):
 *   sky window:  top 10.62%–30.00%  left 15.94%–84.17%
 *   days window: top 34.69%–75.78%  left 15.94%–84.17%
 * Wooden beam between sky and days ≈ 30%–34.7% (weekdays sit on chrome here).
 *
 * z10 content  — sky + days grid
 * z20 shell    — single frame
 * z30 chrome   — title, weekdays, solar times
 * ===================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.moon-calendar-page { width: min(100%, 760px); }

.moon-calendar-intro { margin-bottom: 24px; }
.moon-calendar-intro h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
}
.moon-calendar-intro > p:last-child {
  max-width: 720px;
  color: var(--muted);
  line-height: 1.65;
}

.moon-calendar-preview-notice {
  width: min(100%, 720px);
  margin: 0 0 18px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 8px 20px rgba(14, 10, 7, 0.12);
}
.moon-calendar-preview-notice div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 10px;
}
.moon-calendar-preview-notice strong { color: var(--text); }
.moon-calendar-preview-notice time,
.moon-calendar-preview-notice small { color: var(--muted); }
.moon-calendar-preview-notice small {
  grid-column: 1 / -1;
  font-family: ui-monospace, Consolas, monospace;
}
.moon-calendar-preview-notice a {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.moon-calendar-preview-notice.is-invalid { border-color: rgba(174, 76, 59, 0.52); }

.events-aside-calendar-slot {
  width: 100%;
  margin-top: clamp(0.45rem, 1.3vw, 0.85rem);
  padding-inline: 0;
  display: grid;
  align-content: start;
  justify-items: stretch;
}

.moon-calendar-card {
  color: #f1e4c8;
  filter: drop-shadow(0 0.42rem 0.66rem rgba(12, 8, 5, 0.17));
}
.moon-calendar-card-aside {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.moon-calendar-frame-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: visible;
  container-type: inline-size;
  isolation: isolate;
  background: transparent;
}

/* ---------- z10 content ---------- */

.moon-calendar-content {
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
}

/* Sky background slightly overscans the alpha opening so page background cannot leak through. */
.moon-calendar-sky {
  position: absolute;
  /* slight bleed under shell lip — kills sub-pixel white hairlines */
  top: 10.45%;
  left: 15.70%;
  right: 15.60%;
  height: 19.70%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0c1625;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.moon-calendar-sky-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.moon-calendar-disc {
  position: relative;
  z-index: 2;
  width: 40%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  translate: 0 -6%;
  filter:
    drop-shadow(0 0 0.18cqw rgba(241, 231, 202, 0.24))
    drop-shadow(0 0 0.5cqw rgba(116, 146, 188, 0.14));
}

.moon-calendar-phase-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Days background overscans the measured opening; the grid keeps its previous safe box. */
.moon-calendar-days-panel {
  position: absolute;
  top: 34.50%;
  left: 15.70%;
  right: 15.60%;
  height: 41.45%;
  overflow: hidden;
  background: #1a120e;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.moon-calendar-month-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  filter: saturate(0.92) brightness(0.78) contrast(1.05);
  opacity: 0.96;
}

.moon-calendar-month-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 10, 13, 0.12), rgba(12, 8, 6, 0.18)),
    radial-gradient(circle at 50% 42%, transparent 30%, rgba(7, 4, 3, 0.18) 100%);
}

.moon-calendar-grid {
  position: absolute;
  z-index: 2;
  /* Preserve the proven grid box while only the panel background grows under the shell. */
  inset: 4.94% 5.95% 12.5%;
  display: grid;
  grid-template-rows: repeat(var(--week-count), minmax(0, 1fr));
  gap: 2.2%;
  overflow: visible;
}

.moon-calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2.2%;
  min-height: 0;
  overflow: visible;
}

.moon-calendar-day {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  color: #f1dfbd;
  font: 800 clamp(0.48rem, 4.0cqw, 0.9rem) / 1 Georgia, serif;
  text-shadow:
    0 0.16cqw 0.14cqw rgba(0, 0, 0, 0.9),
    0 0 0.35cqw rgba(29, 13, 6, 0.5);
  pointer-events: none;
}

.moon-calendar-day.is-empty {
  visibility: hidden;
}

/* Stronger tile opacity so month art does not overpower numbers */
.moon-calendar-day-fill {
  position: absolute;
  z-index: 0;
  inset: 14% 13%;
  border-radius: 6%;
  background: rgba(42, 28, 20, 0.65);
  box-shadow: inset 0 0 0.55cqw rgba(8, 5, 3, 0.32);
}

.moon-calendar-day-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  opacity: 0.92;
  filter: brightness(0.92) saturate(0.92) contrast(1.04);
}

.moon-calendar-day-number {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
}

.moon-calendar-day.is-sunday:not(.is-empty) {
  color: #e16951;
}

.moon-calendar-day.is-today:not(.is-empty) {
  filter: none;
}

.moon-calendar-today-marker {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 48%;
  width: 168%;
  max-width: none;
  aspect-ratio: 1;
  translate: -50% -50%;
  object-fit: contain;
  pointer-events: none;
  filter:
    brightness(1.1)
    contrast(1.08)
    drop-shadow(0 0 0.32cqw rgba(255, 200, 80, 0.75))
    drop-shadow(0 0.1cqw 0.15cqw rgba(20, 8, 2, 0.65));
}

.moon-calendar-day.is-full-moon:not(.is-empty) .moon-calendar-day-fill {
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(240, 248, 255, 0.62),
      rgba(170, 205, 245, 0.32) 42%,
      rgba(42, 28, 20, 0.55) 100%
    );
  box-shadow:
    inset 0 0 0 max(2px, 0.22cqw) rgba(236, 244, 255, 0.92),
    inset 0 0 0 max(3.5px, 0.38cqw) rgba(160, 195, 235, 0.45),
    0 0 0.55cqw rgba(185, 215, 250, 0.75),
    0 0 1.1cqw rgba(150, 190, 240, 0.5);
}

.moon-calendar-day.is-full-moon:not(.is-empty) .moon-calendar-day-frame {
  filter:
    brightness(1.12)
    saturate(1.08)
    contrast(1.1)
    drop-shadow(0 0 0.28cqw rgba(220, 235, 255, 0.85))
    drop-shadow(0 0 0.55cqw rgba(155, 195, 245, 0.55));
}

.moon-calendar-day.is-sunday.is-full-moon:not(.is-empty) .moon-calendar-day-number {
  color: #e16951;
}

/* ---------- z20 shell ---------- */

.moon-calendar-shell {
  position: absolute;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  image-rendering: auto;
}

/* ---------- z30 chrome ---------- */

.moon-calendar-chrome {
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
}

.moon-calendar-month-heading {
  position: absolute;
  top: 3.4%;
  left: 22%;
  right: 22%;
  height: 5.4%;
  display: grid;
  place-items: center;
  color: #2b160b;
  text-align: center;
  text-shadow:
    0 0.08cqw rgba(255, 226, 167, 0.48),
    0 0.12cqw 0.18cqw rgba(89, 42, 15, 0.32);
}

.moon-calendar-month-heading strong {
  max-width: 100%;
  overflow: hidden;
  font: 900 clamp(0.65rem, 4.5cqw, 1.28rem) / 1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Weekdays ON the wooden beam (not under it) */
.moon-calendar-weekdays {
  position: absolute;
  top: 30.85%;
  left: 15.70%;
  right: 15.60%;
  height: 3.5%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  background: transparent;
  border: none;
}

.moon-calendar-weekdays span {
  min-width: 0;
  color: #e7d2a5;
  text-align: center;
  font: 800 clamp(0.55rem, 4.1cqw, 0.88rem) / 1 Georgia, serif;
  text-shadow: 0 0.2cqw 0.18cqw rgba(0, 0, 0, 0.85);
}

.moon-calendar-weekdays .is-sunday {
  color: #dd6e56;
}

/* Solar chrome — raised, safe margin above bottom ornaments */
.moon-calendar-solar-chrome {
  position: absolute;
  left: 17%;
  right: 17%;
  top: 76.0%;
  bottom: 9.4%;
  display: grid;
  grid-template-rows: minmax(0, 1.15fr) auto;
  align-items: center;
  justify-items: center;
  gap: 0.15cqw;
  padding: 0;
  overflow: hidden;
}

.solar-time {
  display: grid;
  justify-items: center;
  gap: 0.05cqw;
  text-align: center;
  line-height: 1.05;
  min-width: 0;
}

.moon-calendar-solar-strip {
  width: 86%;
  max-height: 68%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  filter: drop-shadow(0 0 0.2cqw rgba(240, 180, 60, 0.3));
}

.moon-calendar-solar-labels {
  width: 86%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  gap: 0;
  padding-bottom: 0;
}

.solar-time .solar-icon {
  width: clamp(1.85rem, 11.5cqw, 2.9rem);
  height: clamp(1.85rem, 11.5cqw, 2.9rem);
  display: block;
  object-fit: contain;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin-bottom: 0.15cqw;
  image-rendering: auto;
  filter: drop-shadow(0 0 0.32cqw rgba(240, 180, 60, 0.6));
}

.solar-time strong {
  color: #eed7aa;
  font: 700 clamp(0.58rem, 2.9cqw, 0.9rem) / 1.05 Georgia, serif;
  text-shadow: 0 0.12cqw 0.2cqw rgba(12, 5, 2, 0.9);
  white-space: nowrap;
}

.solar-time time {
  color: #f0bb60;
  font: 800 clamp(0.64rem, 3.2cqw, 1.0rem) / 1.02 Georgia, serif;
  letter-spacing: 0.015em;
  text-shadow:
    0 0.12cqw 0.2cqw rgba(17, 6, 2, 0.88),
    0 0 0.22cqw rgba(238, 168, 65, 0.18);
}

.solar-time.is-rise {
  transform: translateX(-12%);
}

.solar-time.is-set {
  transform: translateX(12%);
}

.solar-time.is-noon {
  transform: none;
}


/* ---------- responsive ---------- */

@media (min-width: 761px) {
  .portal-layout.has-calendar-aside {
    /* 1 : φ : 1 — wider side track so calendar fills the column */
    --portal-side-track: minmax(clamp(12.5rem, 18vw, 24rem), 1fr);
    grid-template-columns: var(--portal-side-track) minmax(0, 2.618fr) var(--portal-side-track);
  }
  .portal-layout.has-calendar-aside .portal-sidebar,
  .portal-layout.has-calendar-aside .events-aside { min-width: 0; }
  .portal-layout.has-calendar-aside .events-aside {
    padding-inline: clamp(0.75rem, 1.25vw, 1.25rem);
    overflow-x: clip;
  }
}

@media (max-width: 760px) {
  .moon-calendar-intro { margin-bottom: 16px; }
  .moon-calendar-preview-notice {
    grid-template-columns: 1fr;
    margin-top: 0;
    padding: 10px 12px;
  }
  .moon-calendar-preview-notice a { justify-self: start; }
  .events-aside-calendar-slot { justify-items: center; }
  .moon-calendar-card-aside { margin: 0 auto; }
}

@media (max-width: 380px) {
  .moon-calendar-card-aside { max-width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .moon-calendar-card {
    filter: drop-shadow(0 0.38rem 0.6rem rgba(12, 8, 5, 0.15));
  }
}