/*
 * The zodiac product only. Shared furniture — tokens, type, tabs, swatches, pills, 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, because the sky does not
 * pan. So this is the painted product's stage, not the map's.
 */
.skyposter {
  position: relative; overflow: hidden; background: var(--paper, #EFE9E1);
  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; }

/* the same reveal the painted product uses, because a painted ground IS that engine */
#poster-next { opacity: 0; }
#poster-next.fading { opacity: 1; animation: skyfade 180ms ease forwards; }
@keyframes skyfade { from { opacity: 0; } to { opacity: 1; } }
#poster-next.wiping {
  opacity: 1;
  -webkit-mask-image: url(/wipe.png); mask-image: url(/wipe.png);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: skywipe 460ms cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes skywipe {
  from { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

/* 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 {
  position: absolute; inset: auto var(--s3) var(--s3); margin: 0; background: var(--sheet);
  color: var(--ink); border-radius: var(--r-chip); padding: 10px 12px; font-size: 14px;
}

/* ── the cusp offer ──────────────────────────────────────────────────────── */
.cusp {
  margin: 0 0 var(--s6); padding: var(--s3) var(--s4);
  background: var(--butter); border-radius: var(--r-tile);
}
.cusp-note { margin: 0 0 var(--s3); font-size: 14px; line-height: 1.45; }
.cusp .pillrow { background: var(--sheet); }

/* ── the three lines ─────────────────────────────────────────────────────── */
.lines { display: grid; gap: var(--s3); }
.linefield { margin: 0; }
.lineinput { font-size: 15px; }
.linehint { margin-top: var(--s1); font-size: 12px; display: flex; justify-content: space-between; gap: var(--s3); }
.count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.count[data-full="true"] { color: var(--tomato); font-weight: 600; }

/* 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;
}
/* over the pill limit is worth noticing, but it is still a hint and not an error */
.note[data-over="true"] { color: var(--tomato); }

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

.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: 3px; vertical-align: 1px;
}