/* ===========================================
   ARCHIVE VIEW (historical days)
   For ?date=<past day>, swap live timeline+viz for a static daily PNG
   served via api-proxy.php from the backend's /artworks/ snapshot store.
   =========================================== */

.archive-image,
.archive-missing-message {
  display: none;
}

body.archive-mode #timeline,
body.archive-mode #day-story,
body.archive-mode #tuning-container {
  display: none !important;
}

body.archive-mode .archive-image {
  display: block;
  width: 100%;
  max-width: var(--canvas-max-width);
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: var(--canvas-aspect-ratio);
  max-height: var(--canvas-max-height);
  object-fit: contain;
  background: #000;
}

body.archive-mode.archive-missing .archive-image {
  display: none;
}

body.archive-mode.archive-missing .archive-missing-message {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--canvas-max-width);
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: var(--canvas-aspect-ratio);
  max-height: var(--canvas-max-height);
  background: #000;
  color: var(--header-text-color, #fff);
  font-family: var(--font-primary);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
}

/* RWD: poniżej 480px viewport jest portretowy (16:9 ułożone pionowo) — tak
   samo jak #timeline w 06-timeline.css obracamy archiwalny PNG i fallback
   o 90° w lewo, żeby zajmowały pełną wysokość viewportu zamiast wyświetlać
   się poziomo z czarnymi pasami. */
@media (max-width: 480px) {
  body.archive-mode .archive-image,
  body.archive-mode.archive-missing .archive-missing-message {
    position: absolute;
    width: calc(100vw * 16 / 9);
    height: 100vw;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    margin: 0;
  }
}