/* Sidera Labs, Phase 2: the crew constellation. Spec: PHASE-2-PROMPT.md §7.5 (variant a: PHASE-2.1-CHANGES.md §5);
   contract: README.md.
   The page sets the figure's size and its aria-label; everything inside is drawn by constellation.js. Heights:
   variant a (galaxy) min(70vh, 720px); variant b min(92vh, 960px); variant d (story) min(76vh, 780px).
   Tokens read: --void --muted --star --ember --ember-hi --ember-deep --review --f-sans; variant d also --text --ok
   --err --line --line-hi --f-mono. */

.p2-constellation {
   position: relative;
   display: block;
   margin: 0;
   min-height: 360px;
   overflow: hidden;
   background: var(--void, #000);
   isolation: isolate;
}

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

/* Agent names and "north star": real text, muted, star-white while the agent is lit. */
.p2-constellation .p2-label {
   position: absolute;
   left: 0;
   top: 0;
   margin: 0;
   font-family: var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif);
   font-size: 13px;
   font-weight: 400;
   line-height: 1;
   letter-spacing: 0.01em;
   color: var(--muted, #9b9890);
   white-space: nowrap;
   pointer-events: none;
   user-select: none;
   opacity: 0;
   /* a black halo, not a glow: keeps the names readable over the particles */
   text-shadow: 0 0 6px var(--void, #000), 0 0 3px var(--void, #000), 0 0 1px var(--void, #000);
   transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
      color 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Variant a: the Milky Way can glow behind a name, so the halo's edge is doubled (not widened: a wide halo
   would print a dark patch on the band). */
.p2-constellation.p2-v-a .p2-label {
   text-shadow: 0 0 6px var(--void, #000), 0 0 3px var(--void, #000), 0 0 1px var(--void, #000), 0 0 1px var(--void, #000);
}
.p2-constellation .p2-label.is-shown { opacity: 1; }
.p2-constellation .p2-label.is-lit { color: var(--star, #f2f2ee); }

/* Narrow figures: the crew is pulled inward and the names get smaller (never dropped). */
.p2-constellation.is-narrow .p2-label { font-size: 11px; }

/* ---------- variant d, the story ---------- */
/* The galaxy can glow behind a name and the ghost terminal sits under it: the same doubled halo as variant a,
   plus a soft dark plate behind each name (and each meteor label) that deepens with the ghost's opacity, so a
   muted name keeps 4.5:1 even over the brightest ghost line at --p2-ghost-opacity 0.80. */
.p2-constellation.p2-v-d .p2-label {
   z-index: 1;
   text-shadow: 0 0 6px var(--void, #000), 0 0 3px var(--void, #000), 0 0 1px var(--void, #000), 0 0 1px var(--void, #000);
}
.p2-constellation.p2-v-d .p2-label::before,
.p2-constellation.p2-v-d .p2-meteor::before {
   content: "";
   position: absolute;
   inset: -4px -10px;
   z-index: -1;
   border-radius: 50%;
   background: var(--void, #000);
   opacity: min(0.9, calc(var(--p2-ghost-opacity, 0.4) * 1.4 + 0.2));
   filter: blur(6px);
   pointer-events: none;
}
/* the code-reviewer's name takes its verdict's colour while it sends it */
.p2-constellation.p2-v-d .p2-label.is-err { color: var(--err, #f2877a); }
.p2-constellation.p2-v-d .p2-label.is-ok { color: var(--ok, #9fd8a6); }

/* The ghost terminal: a long session behind the sky, dissolving at its edges. constellation.js sets its box, size,
   the mask's centre and radii (--p2-g-*) and each line's level (--p2-gl: 1 settled, 1.6 for the line being
   written). Its strength is --p2-ghost-opacity, set on the figure (or any ancestor) and live without JS; default
   0.40 (Jason's pick). The line being written is 1.6× that, capped at 1, so it stays the brightest at every value.
   Under 700px it is dimmer (× 0.6). The names' plates above keep them legible over it. */
.p2-constellation.p2-v-d .p2-ghost {
   position: absolute;
   left: 0;
   top: 0;
   margin: 0;
   overflow: hidden;
   font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, monospace);
   font-size: 13px;
   line-height: 21px;
   color: var(--text, #d9d7d2);
   white-space: pre;
   pointer-events: none;
   user-select: none;
   -webkit-mask-image: radial-gradient(var(--p2-g-rx, 50%) var(--p2-g-ry, 50%) at var(--p2-g-cx, 50%) var(--p2-g-cy, 50%), #000 0%, rgba(0, 0, 0, 0.88) 42%, transparent 100%);
   mask-image: radial-gradient(var(--p2-g-rx, 50%) var(--p2-g-ry, 50%) at var(--p2-g-cx, 50%) var(--p2-g-cy, 50%), #000 0%, rgba(0, 0, 0, 0.88) 42%, transparent 100%);
}
.p2-constellation.p2-v-d .p2-ghost-code {
   position: absolute;
   left: 0;
   top: 0;
   display: block;
   font: inherit;
}
.p2-constellation.p2-v-d .p2-ghost-ln {
   display: block;
   min-height: 1lh;
   opacity: min(1, calc(var(--p2-ghost-opacity, 0.4) * var(--p2-ghost-k, 1) * var(--p2-gl, 0)));
}
.p2-constellation.p2-v-d.is-ghost-small { --p2-ghost-k: 0.6; }
.p2-constellation.p2-v-d .p2-g-cmd { color: var(--text, #d9d7d2); }
.p2-constellation.p2-v-d .p2-g-acc { color: var(--ember-hi, #ffb27a); }
.p2-constellation.p2-v-d .p2-g-ok,
.p2-constellation.p2-v-d .p2-g-add { color: var(--ok, #9fd8a6); }
.p2-constellation.p2-v-d .p2-g-err { color: var(--err, #f2877a); }
.p2-constellation.p2-v-d .p2-g-dim { color: var(--muted, #9b9890); }
.p2-constellation.p2-v-d .p2-ghost-caret {
   display: inline-block;
   width: 0.6em;
   height: 1.1em;
   margin-left: 1px;
   vertical-align: -0.2em;
   background: currentColor;
   opacity: 0;
}
.p2-constellation.p2-v-d .p2-ghost-caret.is-on { opacity: 1; }

/* Meteor labels: what one agent hands another, over the arc. Muted star-white, red for a send-back, green for an
   approval, with a small dark halo over the galaxy and the ghost terminal. Position and opacity come from JS. */
.p2-constellation.p2-v-d .p2-meteor {
   position: absolute;
   z-index: 1;
   left: 0;
   top: 0;
   margin: 0;
   font-family: var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif);
   font-size: 11.5px;
   font-weight: 400;
   line-height: 1.2;
   letter-spacing: 0.01em;
   color: var(--text, #d9d7d2);
   white-space: nowrap;
   pointer-events: none;
   user-select: none;
   opacity: 0;
   text-shadow: 0 0 4px var(--void, #000), 0 0 2px var(--void, #000), 0 0 1px var(--void, #000);
}
.p2-constellation.p2-v-d .p2-meteor.is-err { color: var(--err, #f2877a); font-weight: 500; }
.p2-constellation.p2-v-d .p2-meteor.is-ok { color: var(--ok, #9fd8a6); font-weight: 500; }
.p2-constellation.p2-v-d.is-narrow .p2-meteor { font-size: 10.5px; }

/* The ticket over the north star: a chip (type glyph, key, hairline, summary), centred over it */
.p2-constellation.p2-v-d .p2-story-title {
   position: absolute;
   left: 0;
   top: 0;
   margin: 0;
   text-align: center;
   white-space: nowrap;
   pointer-events: none;
   user-select: none;
   text-shadow: 0 0 6px var(--void, #000), 0 0 3px var(--void, #000), 0 0 1px var(--void, #000), 0 0 1px var(--void, #000);
}
.p2-constellation.p2-v-d .p2-ticket {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 7px 12px 7px 9px;
   border: 1px solid var(--line-hi, #3d3d3d);
   background: color-mix(in srgb, var(--panel, #070707) 88%, transparent);
   text-shadow: none;
   opacity: 0;
}
.p2-constellation.p2-v-d .p2-ticket-glyph { display: block; flex: none; width: 14px; height: 14px; }
.p2-constellation.p2-v-d .p2-ticket-glyph svg { display: block; width: 100%; height: 100%; }
.p2-constellation.p2-v-d .p2-ticket-glyph rect { fill: var(--ember, #e8823f); }
.p2-constellation.p2-v-d .p2-ticket-glyph path { fill: var(--void, #000); fill-opacity: 0.72; }
.p2-constellation.p2-v-d .p2-ticket-key {
   font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, monospace);
   font-size: 12.5px;
   line-height: 1;
   letter-spacing: 0.02em;
   color: var(--text, #d9d7d2);
}
.p2-constellation.p2-v-d .p2-ticket-rule { flex: none; width: 1px; height: 15px; background: var(--line-hi, #3d3d3d); }
.p2-constellation.p2-v-d .p2-ticket-sum {
   white-space: normal;
   text-align: left;
   text-wrap: balance;
   font-family: var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif);
   font-size: 16px;
   font-weight: 500;
   line-height: 1.2;
   letter-spacing: -0.005em;
   color: var(--star, #f2f2ee);
}
.p2-constellation.p2-v-d.is-narrow .p2-ticket { gap: 7px; padding: 6px 9px 6px 7px; }
.p2-constellation.p2-v-d.is-narrow .p2-ticket-glyph { width: 12px; height: 12px; }
.p2-constellation.p2-v-d.is-narrow .p2-ticket-key { font-size: 11px; }
.p2-constellation.p2-v-d.is-narrow .p2-ticket-rule { height: 13px; }
.p2-constellation.p2-v-d.is-narrow .p2-ticket-sum { font-size: 13.5px; }

/* The phase rail under the sky: the copy deck's four phases. The act playing is star-white with a 5px ember node;
   finished ones keep a dimmer node; the rest are muted. No dividers. */
.p2-constellation.p2-v-d .p2-story-rail {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 30px;
   padding: 0 16px;
   font-family: var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif);
   font-size: 13px;
   line-height: 1;
   color: var(--muted, #9b9890);
   pointer-events: none;
   user-select: none;
}
.p2-constellation.p2-v-d .p2-story-step {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap;
   transition: color 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.p2-constellation.p2-v-d .p2-story-node {
   flex: none;
   width: 5px;
   height: 5px;
   background: radial-gradient(circle, var(--ember, #e8823f) 2px, transparent 2.6px);
   opacity: 0;
   transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.p2-constellation.p2-v-d .p2-story-step.is-done .p2-story-node { opacity: 0.5; }
.p2-constellation.p2-v-d .p2-story-step.is-on { color: var(--star, #f2f2ee); }
.p2-constellation.p2-v-d .p2-story-step.is-on .p2-story-node { opacity: 1; }
.p2-constellation.p2-v-d.is-narrow .p2-story-rail {
   height: 46px;
   gap: 14px;
   padding: 0 52px 0 12px;
   font-size: 12px;
}
.p2-constellation.p2-v-d.is-narrow .p2-story-step { gap: 6px; }

/* Pause / Play, in the band's corner: the terminals' button */
.p2-constellation.p2-v-d .p2-story-toggle {
   position: absolute;
   right: 10px;
   bottom: 9px;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   min-height: 34px;
   margin: 0;
   padding: 6px 10px;
   border: 1px solid transparent;
   border-radius: 0;
   background: transparent;
   color: var(--muted, #9b9890);
   font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, monospace);
   font-size: 12.5px;
   line-height: 1;
   letter-spacing: 0.02em;
   cursor: pointer;
   transition:
      color 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
      border-color 0.18s cubic-bezier(0.2, 0.7, 0.2, 1),
      background-color 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.p2-constellation.p2-v-d .p2-story-toggle svg {
   display: block;
   flex: none;
   width: 12px;
   height: 12px;
   color: var(--ember, #e8823f);
}
.p2-constellation.p2-v-d .p2-story-toggle span { min-width: 5ch; text-align: left; }
.p2-constellation.p2-v-d .p2-story-toggle:hover { border-color: var(--line-hi, #3d3d3d); color: var(--star, #f2f2ee); }
.p2-constellation.p2-v-d .p2-story-toggle:active { background-color: var(--line, #2a2a2a); color: var(--star, #f2f2ee); }
.p2-constellation.p2-v-d .p2-story-toggle:focus-visible {
   outline: 2px solid var(--ember-hi, #ffb27a);
   outline-offset: 2px;
   color: var(--star, #f2f2ee);
}
/* narrow: icon only; the aria-label still names it */
.p2-constellation.p2-v-d.is-narrow .p2-story-toggle {
   right: 6px;
   bottom: 6px;
   justify-content: center;
   min-width: 34px;
}
.p2-constellation.p2-v-d.is-narrow .p2-story-toggle span {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
   .p2-constellation .p2-label { transition: none; }
   .p2-constellation.p2-v-d .p2-story-step,
   .p2-constellation.p2-v-d .p2-story-node { transition: none; }
   /* nothing moves, so there is nothing to pause */
   .p2-constellation.p2-v-d .p2-story-toggle { display: none; }
}

/* ---------- the sky: the hero's night sky above the band (data-p2="sky", constellation.js initSky) ----------
   It fills its positioned parent, behind the parent's content; the page lifts its own content above it. */
.p2-sky {
   position: absolute;
   inset: 0;
   z-index: 0;
   overflow: hidden;
   pointer-events: none;
}
.p2-sky .p2-sky-canvas {
   position: absolute;
   inset: 0;
   display: block;
   width: 100%;
   height: 100%;
}
/* the quiet sky (data-quiet="true", inner-page heroes): there is no band under it to flow into, so it settles in
   under the nav and dissolves before the next section's rule instead of meeting it at full strength */
.p2-sky[data-quiet="true"] .p2-sky-canvas {
   -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0, #000 14%, #000 74%, transparent 100%);
   mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0, #000 14%, #000 74%, transparent 100%);
}