/* THE STAGE'S DRESS — the kit's one model of the sky over you (/stage.js), on every page that has one.
   Moved out of the moon's own sheet on 30 Sept 2026, when the sunset pages became its second user. */
/* ---- the stage: your horizon as a disc in perspective, the moon on its path over it ----
   Moonlitt's horizon ring, dotted path and moon were the owner's reference, and then its whole screen
   ("look at this ui for example"): one calm sky edge to edge, a ring of glass, small soft dots, a
   frosted marker, and every word on a glass pill. Nothing on it is a stroke: "we cant have these
   strong white and hairline strokes". A slider moves the night, a drag turns the disc, the compass
   faces the path again. */
.mstage { margin-top: 72px; }
.mstage-sky { position: relative; height: 620px; overflow: hidden; background: #1c2a5c; touch-action: pan-y; cursor: grab; }
.mstage-sky.turning { cursor: grabbing; }
.mstage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mstage-tags { position: absolute; inset: 0; pointer-events: none; }
.mstage-tag { position: absolute; left: 0; top: 0; padding: 6px 14px; border-radius: 980px; background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); font-size: 15px; line-height: 19px; font-weight: 500; letter-spacing: -.016em; color: rgba(255, 255, 255, .92); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mstage-tag.now { padding: 8px 16px; font-size: 17px; line-height: 21px; background: rgba(255, 255, 255, .24); }
.mstage-tag.mark { padding: 4px 10px; font-size: 12px; line-height: 16px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .86); }
.mstage-tag.side { padding: 5px 12px; font-size: 13px; line-height: 17px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .82); }
.mstage-compass { position: absolute; left: max(20px, calc((100% - var(--content)) / 2)); top: 20px; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .92); cursor: pointer; }
.mstage-compass:hover { background: rgba(255, 255, 255, .24); }
/* the N stands upright; a small caret on the button's rim turns to where north lies on the glass */
.mstage-dial { position: absolute; inset: 5px; border-radius: 50%; transition: transform .2s linear; }
.mstage-dial::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255, 255, 255, .85); }
.mstage-n { font-size: 15px; line-height: 19px; font-weight: 600; letter-spacing: .02em; }
.mstage-phase { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; padding: 10px 24px 11px; border-radius: 980px; text-align: center; font-size: 17px; line-height: 21px; font-weight: 500; letter-spacing: -.022em; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.mstage-phase span { display: block; font-size: 14px; line-height: 18px; font-weight: 400; color: rgba(255, 255, 255, .72); }
.mstage-time { margin: 28px auto 0; text-align: center; }
/* the words under the slider and the way back hold their room while the time moves: nothing beneath them shifts */
.mstage-label { display: block; min-height: 50px; font-variant-numeric: tabular-nums; }
.mstage-clock { font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: .011em; color: var(--ink); }
.mstage-what { font-size: 17px; line-height: 25px; letter-spacing: -.022em; color: var(--ink-2); }
.mstage-range { display: block; width: min(100%, 640px); margin: 18px auto 0; }
.mstage-now { margin-top: 12px; }
.mstage-now.off { visibility: hidden; }
@media (max-width: 734px) {
  .mstage { margin-top: 48px; }
  .mstage-sky { height: 440px; }
  .mstage-label { min-height: 78px; }
  .mstage-tag { font-size: 13px; line-height: 17px; padding: 5px 12px; }
  .mstage-tag.now { font-size: 15px; line-height: 19px; padding: 6px 14px; }
  .mstage-compass { width: 44px; height: 44px; top: 16px; }
  .mstage-dial { inset: 4px; }
  .mstage-n { font-size: 14px; line-height: 17px; }
  .mstage-phase { bottom: 18px; padding: 8px 20px 9px; font-size: 15px; line-height: 19px; }
  .mstage-phase span { font-size: 13px; line-height: 17px; }
}