/*!
 * moon.css  v2.0.0
 * Moon Phase page, seriouslyscientific.com/moon-phase/
 *
 * Depends on ss-sim.css, which carries the shared simulation chrome:
 * module frame, telemetry rows, buttons, timeline backbone, fullscreen
 * behaviour. This file is now only two things: the page's own palette
 * tokens, and the handful of components no other simulation has.
 *
 * It was 497 lines before the shared layer existed. Almost all of that
 * was the same chrome the other two pages were also each maintaining
 * their own copy of.
 */

/* ================================================================
   PALETTE
   Deliberately not the warm Cosmic Rust Supernova palette. True black
   rather than --deep-space, no supernova orange, nebula turquoise for
   interaction since that meaning is already established site-wide.
   Costs nothing structurally: every simulation sets its own tokens,
   this one just sets them cold.
   ================================================================ */

.ss-moon-page {
    /* Accent is inherited from ss-sim.css: blue controls, yellow
       interaction. Nothing overridden here, because this page should
       look like the others.
       The background stays true black. This is the one simulation
       showing a body lit by real sunlight, and a warm page tint would
       fight the render. */
    --sim-module-bg:   #000;
    --sim-card-bg:     rgba(20, 20, 24, .5);
    --sim-spine-from:  var(--nebula-turquoise, #4A9FD4);
    --sim-spine-to:    rgba(154, 167, 178, .25);
}

/* ================================================================
   MOON SPECIFIC
   ================================================================ */

/* Two hint states: the locked default explains zooming, explore mode
   explains dragging and the markers. Swapped by the is-exploring
   class that moon.js puts on the module. */
.ss-moon-page .mn-hint-locked  { display: block; }
.ss-moon-page .mn-hint-explore { display: none; }
/* In explore mode the subtitle under the title now says this, and it
   says it where the reader is already looking: beside the button they
   just pressed, rather than in small type at the far top of the frame.
   Repeating it up here would be noise, so the whole hint steps back. */
.ss-moon-page .ss-sim-module.is-exploring .mn-hint { opacity: 0; }

/* Landing site readout. Unique to this page: no other simulation has
   clickable points on a rendered body yet. When a second one does,
   this is the candidate to promote into ss-sim.css. */
.ss-moon-page .mn-site-info {
    display: none;
    max-width: 560px;
    margin: 0 auto .9rem;
    padding: .75rem .95rem;
    text-align: left;
    border-radius: 10px;
    border: 1px solid rgba(var(--sim-frame), .4);
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ss-moon-page .mn-site-info.is-open { display: block; }

.ss-moon-page .mn-site-name {
    margin: 0 0 .2rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--sim-active);
}

.ss-moon-page .mn-site-meta {
    margin: 0 0 .4rem;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sim-dim);
}

.ss-moon-page .mn-site-note {
    margin: 0;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--sim-text-muted);
}

/* In fullscreen the shared file hides the framing copy. The site
   readout is not framing copy, it is the thing being explored, so it
   stays and simply gets a little more room. */
.ss-moon-page .ss-sim-module:fullscreen .mn-site-info,
.ss-moon-page .ss-sim-module:-webkit-full-screen .mn-site-info {
    max-width: 640px;
}

/* The headline phase label. Moon-specific for now: the other
   simulations lead with a countdown rather than a named state. */
.ss-moon-page .mn-phase-name {
    margin: 0 0 .5rem;
    font-size: clamp(1.15rem, 3.2vw, 1.5rem);
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--sim-text);
    text-shadow: var(--sim-shadow-strong);
}

/* The hemisphere control sits inside a telemetry row, so it needs to
   be tighter than a standard action button. */
.ss-moon-page .mn-hemi-btn {
    padding: .28rem .7rem;
    font-size: .74rem;
}

/* Phase name scales up in fullscreen along with the shared telemetry.
   It lives here rather than ss-sim.css because it is still a
   Moon-only component: the other simulations lead with a countdown
   rather than a named state. */
.ss-moon-page .ss-sim-module:fullscreen .mn-phase-name,
.ss-moon-page .ss-sim-module:-webkit-full-screen .mn-phase-name {
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
}

/* ================================================================
   TIMELINE ADDITIONS
   ================================================================ */

.ss-moon-page .mn-tl-agency {
    margin: 0 0 .4rem;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sim-dim);
}

/* Planned missions read as provisional rather than recorded: dashed
   edge, quieter node. The distinction matters on a page that is
   otherwise stating facts. */
/* Dashed edge only. An opacity value here would fight the shared
   scroll-reveal, which starts these cards at opacity 0: setting any
   opacity in a later rule overrides that and makes planned missions
   the only ones ever visible, which is exactly what happened. */
.ss-moon-page .mn-tl-planned {
    border-style: dashed;
}

.ss-moon-page .mn-tl-planned::before {
    background: var(--sim-module-bg);
    border-color: var(--sim-dim);
}

.ss-moon-page .mn-tl-footnote {
    max-width: 720px;
    margin: 2.25rem auto 0;
    font-size: .76rem;
    line-height: 1.7;
    color: var(--sim-dim);
    text-align: center;
}

.ss-moon-page .mn-tl-footnote a {
    color: var(--sim-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The prompt pointing readers back up to the render. Slightly brighter
   than the intro above it, since it is an instruction rather than
   context, and the yellow marks the words that match the button. */
.ss-moon-page .mn-tl-prompt {
    color: var(--sim-text-muted);
    margin-top: .6rem;
}

.ss-moon-page .mn-tl-prompt strong {
    color: var(--sim-active);
    font-weight: 500;
}