/* --------------------------------------------------
   ARCHIVE BASE STYLES (unchanged from your version)
-------------------------------------------------- */
.archive-container {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
/* CALENDAR PANEL — wraps content, sizes children via cqw */
.calendar {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  background: var(--panel);
  border: 0.6cqw solid var(--line);
  border-radius: 2.5cqw;
  padding: 1.5cqw;
  margin-bottom: 3cqw;
  box-sizing: border-box;
  container-type: inline-size;
  overflow: hidden;
}

/* MONTH/YEAR — inside calendar for cqw context */
.calendar-monthyear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  font-size: calc(var(--std-font-size) * 1.5);
  font-weight: 700;
  padding: 0.5cqw 0 1cqw;
}

.monthyear-text {
  pointer-events: none;
}

/* WEEKDAY STRIP — 7 equal columns, aligned with day grid */
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1cqw;
}

/* WEEKDAY LABELS — sized to calendar via cqw */
.weekday {
  font-size: 4.5cqw;
  font-weight: 700;
  text-align: center;
  color: var(--text);
}

/* DAY GRID — 7×6, square cells via aspect-ratio on .day */
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr); /* ← FIX */
  align-content: start;
  gap: 1cqw;
}

/* DAY — aspect-ratio: 1/1 enforced here, never overridden */
.day {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  font-size: 6.2cqw;
  padding: 1cqw;
  text-align: center;
  border-radius: 1cqw;
  background: var(--button);
  color: var(--text);
  border: 0.35cqw solid var(--line);
  text-decoration: none;
  transition:
    background 0.15s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

/* EMPTY DAYS */
.day.empty {
  background: transparent;
  border: none;
  pointer-events: none;
}

/* UNAVAILABLE DAYS */
.day.unavailable {
  opacity: 0.35;
  pointer-events: none;
}

/* AVAILABLE DAYS */
.day.available {
  cursor: pointer;
  background: var(--button);
}

.day.available:hover {
  transform: translateY(-0.5cqw);
  box-shadow: 0 0.75cqw 1.5cqw rgb(0 0 0 / 25%);
  background: var(--panel);
}

/* TODAY */
.day.today {
  border-color: var(--highlight1);
  color: var(--highlight1);
  font-weight: 600;
}

.date {
  text-decoration: none;
  position: relative;
  z-index: 1;
}

/* STARS */
.stars {
  position: absolute;
  bottom: 1cqw;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
  z-index: 2;
}

.star {
  font-size: 2cqw;
  line-height: 1;
  letter-spacing: -0.25cqw;
}

.star.off {
  color: #555;
}

.star.on {
  color: #5cbf50;
}

/* CALENDAR CONTAINER */


/* ARROWS — inside .calendar-monthyear */
.cal-arrow {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.cal-arrow:disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* --------------------------------------------------
   MEDIA QUERIES (same structure as landing.css)
-------------------------------------------------- */

/* ================================================
   PORTRAIT (max-aspect-ratio: 3/4)
   Header / 100vw-square / Footer
   All calendar sizes scale off vw
=============================================== */
.PORTRAIT #b-client-area {
    display: grid;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--back);
  }

.PORTRAIT #archive-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

.PORTRAIT .calendar {
    width: 90%;
    overflow: hidden;
    position: relative;
  }

.PORTRAIT .cal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    border: 0.4vw solid var(--line);
    background: var(--panel);
    font-size: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

.PORTRAIT .cal-arrow:hover {
    background: var(--button);
  }

.PORTRAIT #nav-prev {
    left: 1vw;
  }

.PORTRAIT #nav-next {
    right: 1vw;
  }

/* ================================================
   LANDSCAPE (aspect >= 3/4)
   4:3 camera area — B uses width, A uses height
   All internals shared, scale off camera width via cqw
=============================================== */
.LANDSCAPE #client-area {
    container-type: inline-size;
    aspect-ratio: 4 / 3;
    display: grid;
    grid-template-rows: 13% 82% 5%;
    grid-template-areas:
      "header"
      "menu"
      "footer";
    position: relative;
    overflow: hidden;
    background: var(--back);
  }

  .LANDSCAPE #archive-container {
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .LANDSCAPE .calendar {
    width: 60%;
  }
/* stylelint-disable no-descending-specificity */
  .LANDSCAPE .cal-arrow {
    font-size: 2.5cqw;
    opacity: 1;
  }
/* stylelint-enable no-descending-specificity */

  .LANDSCAPE #b-bottom-bar .app-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }