/* =========================================================
   Zeal Portal — Phase
   One concept, two densities, one colour language.

   .phase-track  — the detail-crown stepper. Nodes for discovery /
     development / pre-production / delivery / debrief, joined by
     connectors. Driven by data-state on each step and connector:
       done     filled --ink dot, --ink connector leading out
       current  --accent dot, --ink label
       todo     hollow --ink-4 dot, --rule connector

   .phase-pips   — the projects-list phase column. The same progress
     compressed to a five-pip glyph: five small --r-1 bars, filled
     --accent up to and including the current phase, remainder
     --ink-5. Driven by data-phase (1–5) on the container.

   Track markup (connectors are siblings between steps):
     <div class="phase-track">
       <span class="phase-step" data-state="done">
         <span class="phase-step__dot"></span>
         <span class="phase-step__label">discovery</span>
       </span>
       <span class="phase-step__line" data-state="done"></span>
       <span class="phase-step" data-state="current">…</span>
       <span class="phase-step__line" data-state="todo"></span>
       …
     </div>

   Pips markup:
     <span class="phase-pips" data-phase="2" title="development">
       <i class="phase-pip"></i><i class="phase-pip"></i><i class="phase-pip"></i>
       <i class="phase-pip"></i><i class="phase-pip"></i>
     </span>
   ========================================================= */

/* ── The stepper ─────────────────────────────────────────── */

.phase-track {
  display: flex;
  align-items: center;
  width: 100%;
}

.phase-step {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
}
.phase-step__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-4);
  background: transparent;
  box-sizing: border-box;
  flex: 0 0 auto;
}
.phase-step__label {
  font-family: var(--font-cd);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.phase-step__line {
  flex: 1 1 auto;
  min-width: 16px;
  height: 1px;
  background: var(--rule);
  margin: 0 var(--s-3);
}

/* Connector fill — inked up to and through the current node. */
.phase-step__line[data-state="done"] { background: var(--ink); }

/* Node states */
.phase-step[data-state="done"] .phase-step__dot {
  background: var(--ink);
  border-color: var(--ink);
}
.phase-step[data-state="done"] .phase-step__label { color: var(--ink-2); }

.phase-step[data-state="current"] .phase-step__dot {
  background: var(--accent);
  border-color: var(--accent);
}
.phase-step[data-state="current"] .phase-step__label {
  color: var(--ink);
  font-weight: var(--w-bold);
}

.phase-step[data-state="todo"] .phase-step__dot { border-color: var(--ink-4); }
.phase-step[data-state="todo"] .phase-step__label { color: var(--ink-4); }

/* ── The pip glyph ───────────────────────────────────────── */

.phase-pips {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.phase-pip {
  width: 6px;
  height: 12px;
  border-radius: var(--r-1);
  background: var(--ink-5);
  flex: 0 0 auto;
}
.phase-pips[data-phase="1"] .phase-pip:nth-child(-n+1),
.phase-pips[data-phase="2"] .phase-pip:nth-child(-n+2),
.phase-pips[data-phase="3"] .phase-pip:nth-child(-n+3),
.phase-pips[data-phase="4"] .phase-pip:nth-child(-n+4),
.phase-pips[data-phase="5"] .phase-pip:nth-child(-n+5) {
  background: var(--accent);
}