.sky-windows {
  --sky-gap: 6px;
  --sky-ease: cubic-bezier(0.65, 0, 0.35, 1);
  /* Wider than the reading column: the sky is the one big moment. */
  --sky-width: min(960px, calc(100vw - var(--app-sidebar) - 56px));
  margin: 0 calc((100% - var(--sky-width)) / 2) 36px;
  font-family: var(--app-font);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .sky-windows {
    --sky-width: calc(100vw - 56px);
  }
}

@media (max-width: 560px) {
  .sky-windows {
    --sky-width: calc(100vw - 36px);
  }
}

.sky-stage {
  position: relative;
  height: 360px;
  transition: height 1100ms var(--sky-ease);
}

.sky-windows[data-state="open"] .sky-stage {
  height: min(78vh, 760px);
}

.sky-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.sky-panes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "a b b c d d"
    "e b b f f g"
    "h h h f f j";
  gap: var(--sky-gap);
  transition: opacity 500ms ease;
}

.sky-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--app-line-strong);
  cursor: zoom-in;
  transition: border-color 160ms ease;
}

/* Solid tiles: empty space in the page colour between the windows. */
.sky-tile {
  min-width: 0;
  min-height: 0;
}

.sky-pane:hover {
  border-color: var(--app-accent);
}

.sky-windows[data-state="open"] .sky-panes {
  opacity: 0;
  pointer-events: none;
}

.sky-back {
  position: absolute;
  top: 12px;
  left: 14px;
  padding: 0;
  border: 0;
  color: rgb(255 255 255 / 0.9);
  background: transparent;
  font-size: 12px;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease 500ms;
}

.sky-back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sky-windows[data-state="open"] .sky-back {
  opacity: 1;
  pointer-events: auto;
}

.sky-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 10px;
  color: var(--app-muted);
  font-size: 11px;
}

.sky-strip span {
  white-space: nowrap;
}

.sky-strip [data-sky="phase"] {
  color: var(--app-text);
}

.sky-step {
  margin-left: auto;
  padding: 0;
  border: 0;
  color: var(--app-accent);
  background: transparent;
  font-size: 11px;
}

.sky-step:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Without WebGL the windows still carry the hour's colours. */
.sky-windows.is-fallback .sky-canvas {
  display: none;
}

.sky-windows.is-fallback .sky-pane,
.sky-windows.is-fallback[data-state="open"] .sky-stage {
  background: radial-gradient(circle at 70% 85%, var(--sky-haze), transparent 55%),
    linear-gradient(to bottom, var(--sky-zenith), var(--sky-horizon) 90%);
}

@media (max-width: 560px) {
  .sky-stage {
    height: 280px;
  }

  .sky-panes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "a b b"
      "e b b"
      "h f f";
  }

  .sky-panes [data-wide] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky-stage,
  .sky-panes,
  .sky-back {
    transition: none;
  }
}