/*
 * The star map product only. Shared furniture — tokens, type, tabs, swatches, pills, the
 * place search, the toast, the size chips, the green pill — is in shell.css, which every
 * page loads first.
 *
 * The preview is a rendered poster rather than a live canvas: the sky does not pan, it is
 * computed, so this is the zodiac product's stage rather than the map's.
 */
.skyposter {
  position: relative; overflow: hidden; background: var(--paper, #FBF3E4);
  aspect-ratio: var(--poster-aspect, 5 / 7);
  box-shadow: 0 2px 4px rgba(42, 42, 40, .07), 0 22px 50px -24px rgba(42, 42, 40, .42);
  margin-inline: auto;
}
@media (min-width: 900px) {
  .skyposter { width: min(100%, calc(74vh * var(--poster-wh, 0.714))); }
}
.skyposter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }

/* under the poster, never on it */
.poster-busy {
  height: 3px; margin-top: 3px; border-radius: 2px; background: var(--tomato);
  transform-origin: left; animation: skybusy 900ms ease-in-out infinite;
}
@keyframes skybusy {
  0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; }
}
.poster-error {
  margin: var(--s3) 0 0; padding: 10px 12px; font-size: 14px;
  background: var(--butter); color: var(--ink); border-radius: var(--r-chip);
}

/* ── the moment tab ──────────────────────────────────────────────────────── */
/* date and time sit side by side: they are one answer to one question */
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.fieldrow .field { margin-bottom: 0; }
/* a grid item's min-width is auto, which is its min-content — a wide date input would
   otherwise push the whole controls column sideways on a phone */
.fieldrow > * { min-width: 0; }

#zone-hint { font-variant-numeric: tabular-nums; }

/* ── toggles ─────────────────────────────────────────────────────────────── */
.toggle { display: flex; align-items: center; gap: var(--s3); cursor: pointer; font-size: 15px; padding: var(--s1) 0; }
.toggle input { accent-color: var(--tomato); width: 18px; height: 18px; margin: 0; }

/* the little circled i, so a hint reads as guidance rather than as an error */
.note { display: flex; gap: var(--s2); align-items: flex-start; }
.i {
  flex: 0 0 auto; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 2px;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: 10px; font-weight: 700; font-style: italic; line-height: 1;
}

.tag {
  display: inline-block; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--tomato); color: var(--sheet); border-radius: var(--r-pill);
  padding: 1px 6px; margin-left: 4px; vertical-align: 1px;
}