/* --- progressions ------------------------------------------------------------------------
   Two rings of planets on one ring of signs: the birth inside, the progressed
   positions on the outer track, so the distance each has moved reads straight
   across. Under it the progressed Moon's signs as a lane of a life, in the
   element tones, with the chosen date as the only gold.
   ------------------------------------------------------------------------- */

.prog__readout {
  margin: 0;
  max-width: 56ch;
  min-height: 3.2em;
  text-align: center;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.prog__divider { fill: none; stroke: var(--line); stroke-width: 1.5; }
.prog__tick { stroke: var(--line-field); stroke-width: 2; }

.prog__body { cursor: pointer; outline: none; }
.prog__disc { fill: var(--ink-void); stroke-width: 2.5; }
.prog__body--natal .prog__disc { stroke-width: 1.5; stroke-dasharray: 4 3; }
.prog__halo {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 140ms linear;
}
.prog__body:hover .prog__halo,
.prog__body.is-picked .prog__halo,
.prog__body:focus-visible .prog__halo { opacity: 1; }

.prog__name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 54px;
}
.prog__line {
  fill: var(--paper-dim);
  font-family: var(--font-body);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
.prog__line--now { fill: var(--sol-lift); }

/* the progressed Moon through a life */
.prog-lane { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.prog-lane > div { width: 100%; overflow-x: auto; }
.prog__lanesvg { width: 100%; min-width: 40rem; height: auto; display: block; }
.prog-lane figcaption {
  font-size: var(--step--1);
  color: var(--paper-mute);
  text-align: center;
  max-width: 60ch;
}
.prog__segmark { cursor: pointer; outline: none; }
.prog__seg {
  fill: var(--ink-deep);
  fill: color-mix(in srgb, var(--tone) 22%, var(--ink-deep));
  stroke: var(--ink-void);
  stroke-width: 2;
  transition: fill 140ms linear;
}
.prog__segmark:hover .prog__seg,
.prog__segmark.is-picked .prog__seg {
  fill: var(--ink-mid);
  fill: color-mix(in srgb, var(--tone) 42%, var(--ink-deep));
}
.prog__segmark:focus-visible .prog__seg { stroke: var(--paper); stroke-width: 3; }
.prog__lanetick { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.prog__age {
  fill: var(--paper-mute);
  font-family: var(--font-body);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.prog__nowline { stroke: var(--sol); stroke-width: 3; pointer-events: none; }
.prog__nowlabel {
  fill: var(--sol-lift);
  font-family: var(--font-body);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.prog__phase {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .prog__halo, .prog__seg { transition: none; }
}