/* Sidera Labs, Phase 2: How It Works phase index + crew constellation (phases.js), ported from D4.
   D2 type (Schibsted Grotesk; names star-white, descriptions muted). No divider lines or boxes between the phases:
   they are separated by space. The selected phase gets a 5px ember node (D3's node) and star-white text.
   Side by side when the component is at least 860px wide; stacked below that. Only page tokens, with fallbacks. */

.p2-phases {
   /* colours phases.js eases between (OKLab color-mix); pages may override */
   --p2-ph-on: var(--ember, #e8823f);
   --p2-ph-off: color-mix(in oklab, var(--dim, #86837d) 52%, var(--void, #000));
   --p2-ph-label-on: var(--star, #f2f2ee);
   --p2-ph-label-off: var(--dim, #86837d);
   container: p2-phases / inline-size;
   min-width: 0;
   color: var(--text, #d9d7d2);
   font-family: var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif);
}

.p2-phases-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 48px;
   align-items: center;
}
@container p2-phases (min-width: 860px) {
   .p2-phases-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
}

/* the index */
.p2-phases-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 12px;
}
.p2-phases-btn {
   -webkit-appearance: none;
   appearance: none;
   display: grid;
   grid-template-columns: 22px minmax(0, 1fr);
   grid-template-areas: "node name" ". text";
   row-gap: 6px;
   width: 100%;
   margin: 0;
   padding: 12px 0;
   border: 0;
   border-radius: 0;
   background: none;
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
}
.p2-phases-node {
   grid-area: node;
   align-self: center;
   width: 5px;
   height: 5px;
   background: radial-gradient(circle, var(--ember, #e8823f) 2px, transparent 2.6px);
   opacity: 0;
   transition: opacity .24s cubic-bezier(.2, 0, 0, 1);
}
.p2-phases-name {
   grid-area: name;
   color: var(--star, #f2f2ee);
   font-size: 20px;
   font-weight: 500;
   line-height: 1.3;
   letter-spacing: -0.01em;
}
.p2-phases-text {
   grid-area: text;
   max-width: 46ch;
   color: var(--muted, #9b9890);
   font-size: 16px;
   line-height: 1.6;
   transition: color .24s cubic-bezier(.2, 0, 0, 1);
}
.p2-phases-btn:hover .p2-phases-text { color: var(--text, #d9d7d2); }
.p2-phases-btn:active .p2-phases-name { color: var(--ember-hi, #ffb27a); }
.p2-phases-btn[aria-pressed="true"] .p2-phases-node { opacity: 1; }
.p2-phases-btn[aria-pressed="true"] .p2-phases-text { color: var(--star, #f2f2ee); }
.p2-phases-btn:focus-visible { outline: 2px solid var(--ember-hi, #ffb27a); outline-offset: 4px; }

/* the crew constellation */
.p2-phases-sky {
   position: relative;
   width: 100%;
   aspect-ratio: 3 / 2;
}
.p2-phases-svg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   overflow: visible;
}
.p2-phases-line {
   fill: none;
   stroke: var(--ember, #e8823f);
   stroke-opacity: .55;
   stroke-width: 1;
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
   visibility: hidden;
}
.p2-phases-star { fill: var(--p2-ph-off); }
.p2-phases-star.is-lit { fill: var(--p2-ph-on); }
.p2-phases-north { fill: var(--star, #f2f2ee); }
.p2-phases-label {
   position: absolute;
   left: 0;
   top: 0;
   font: 500 13px/1 var(--f-sans, "Schibsted Grotesk", system-ui, sans-serif);
   white-space: nowrap;
   color: var(--p2-ph-label-off);
   /* a ground the colour of the sky, so where a hairline must pass a label (narrow screens) it passes under it */
   background: var(--void, #000);
   padding: 1px 3px;
   pointer-events: none;
}
.p2-phases-label.is-lit { color: var(--p2-ph-label-on); }
.p2-phases-label.is-north { color: var(--star, #f2f2ee); }

@container p2-phases (max-width: 540px) {
   .p2-phases-sky { aspect-ratio: 4 / 5; }
   .p2-phases-label { font-size: 11.5px; }
}

/* ---------- Scroll mode (data-mode="scroll", PHASE-2.1-CHANGES.md §2) ----------
   phases.js sets .p2-is-scroll while the sticky stage is in use, and .p2-is-static when the pinned stage wouldn't fit
   the screen (then the plain list above shows, with the Learn state lit). The root is a tall track: the stage, then
   four segments (one per step) and a short lead-out. The stage is sticky inside the root, so it stays put while the
   reader scrolls the segments past. phases.js reads the segment height and the stage's top from here, so these are
   the only place to tune them. Sticky needs every ancestor up to the page to have overflow visible or clip. */
.p2-phases-detail,
.p2-phases-marker,
.p2-phases-track { display: none; }

.p2-phases.p2-is-scroll { position: relative; }
.p2-is-scroll .p2-phases-stage {
   position: sticky;
   top: 12vh;
   top: 12svh;
}
/* short screens (laptops at 560-680px): pin higher, so the stage fits before phases.js has to fall back */
@media (max-height: 680px) {
   .p2-is-scroll .p2-phases-stage {
      top: 5vh;
      top: 5svh;
   }
}
.p2-is-scroll .p2-phases-track { display: block; }
.p2-is-scroll .p2-phases-seg { height: 70vh; }
.p2-is-scroll .p2-phases-lead { height: 20vh; }

/* The steps: the current one star-white, slightly larger (a transform, so nothing reflows) and with its ember node;
   the others dim but stay readable (names --muted 7.0:1, descriptions --dim 5.6:1 on --void). */
.p2-is-scroll .p2-phases-name {
   justify-self: start;   /* as wide as its words, so the 1.12 scale never pushes past the column (page overflow) */
   color: var(--muted, #9b9890);
   transform-origin: 0 50%;
   transition: color .3s cubic-bezier(.2, 0, 0, 1), transform .3s cubic-bezier(.2, 0, 0, 1);
}
.p2-is-scroll .p2-phases-text { color: var(--dim, #86837d); }
.p2-is-scroll .p2-phases-btn:hover .p2-phases-name { color: var(--text, #d9d7d2); }
.p2-is-scroll .p2-phases-btn[aria-pressed="true"] .p2-phases-name {
   color: var(--star, #f2f2ee);
   transform: scale(1.12);
}

/* The position marker: one tick per step, under the list. Past ticks full, the current one filling with the
   reader's progress through its segment (scaleX, compositor only). */
.p2-is-scroll .p2-phases-marker {
   display: flex;
   gap: 6px;
   margin: 32px 0 0 22px;
}
.p2-phases-tick {
   position: relative;
   width: 32px;
   height: 2px;
   overflow: hidden;
   background: var(--p2-ph-off);
}
.p2-phases-fill {
   position: absolute;
   inset: 0;
   background: var(--ember, #e8823f);
   transform-origin: 0 50%;
   transform: scaleX(0);
}

/* Stacked (under 860px): the list sits above a shorter constellation and the whole stage fits one screen. Only the
   names stay in the list; the current step's description shows once, in the detail line under them, so the names
   never move as the step changes. The buttons keep their descriptions for screen readers (visually hidden). */
@container p2-phases (max-width: 859px) {
   .p2-is-scroll .p2-phases-stage {
      top: 6vh;
      top: 6svh;
   }
   .p2-is-scroll .p2-phases-seg { height: 60vh; }
   .p2-is-scroll .p2-phases-grid { gap: 20px; }
   .p2-is-scroll .p2-phases-list { gap: 0; }
   .p2-is-scroll .p2-phases-btn {
      position: relative;
      row-gap: 0;
      padding: 7px 0;
   }
   .p2-is-scroll .p2-phases-text {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
   }
   .p2-is-scroll .p2-phases-detail {
      display: block;
      min-height: 4.8em;   /* three lines, so the constellation below never shifts */
      max-width: 46ch;
      margin: 10px 0 0 22px;
      color: var(--star, #f2f2ee);
      font-size: 16px;
      line-height: 1.6;
   }
   .p2-is-scroll .p2-phases-marker { margin-top: 14px; }
   .p2-is-scroll .p2-phases-sky {
      aspect-ratio: auto;
      height: clamp(150px, 34vh, 400px);
      height: clamp(150px, 34svh, 400px);
   }
}
@container p2-phases (min-width: 600px) and (max-width: 859px) {
   .p2-is-scroll .p2-phases-detail { min-height: 3.2em; }
}

/* seek harness (?t=N) and reduced motion: state changes are instant */
.p2-phases.p2-is-still .p2-phases-node,
.p2-phases.p2-is-still .p2-phases-text,
.p2-phases.p2-is-still .p2-phases-name { transition: none; }
@media (prefers-reduced-motion: reduce) {
   .p2-phases-node,
   .p2-phases-text,
   .p2-phases-name { transition: none; }
}