/* Profession maturity (path hero). The hero carries only a quiet centered
   line with a stage-toned dot — the poster stays symmetric and the learner's
   progress bar below keeps the page's sole meter. The full Basecamp-style
   needle lives in the popover, where the checklist explains its ticks. The
   tone climbs the trust ladder: muted gray (draft) → ink (community) →
   blue (curated) → green (expert-verified) — all existing primitives. */

.maturity {
  display: flex;
  justify-content: center;
  margin-block-end: var(--block-space-double);
}

.maturity--stage-1 { --gauge-tone: oklch(var(--lch-gray-mid)); }
.maturity--stage-2 { --gauge-tone: var(--color-ink); }
.maturity--stage-3 { --gauge-tone: oklch(var(--lch-blue)); }
.maturity--stage-4 { --gauge-tone: var(--color-positive); }

/* Reads as a control, not a caption: interactive-grade border + chevron.
   Still a size below the primary CTA button underneath. */
.maturity__line {
  align-items: center;
  background: none;
  border: 1px solid var(--color-border-interactive);
  border-radius: 2rem;
  color: var(--color-subtle-dark);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.85rem;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem 0.45rem 0.9rem;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;

  .icon {
    block-size: 0.85rem;
    color: var(--color-subtle-dark);
    inline-size: 0.85rem;
  }

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-subtle-light);
      border-color: var(--color-subtle-dark);
      color: var(--color-ink);
    }
  }
}

.maturity__stage-name {
  color: var(--color-ink);
  font-weight: 600;
}

.maturity__dot {
  background: var(--gauge-tone);
  block-size: 0.55rem;
  border-radius: 50%;
  flex: none;
  inline-size: 0.55rem;
}

/* Top-layer popover: centered near the top of the viewport, styled like the
   account menu's panel. Enter/exit animation comes from animation.css. */
.maturity-popover {
  background-color: var(--color-subtle-light);
  border: 1px solid var(--color-subtle);
  border-radius: 0.75em;
  box-shadow:
    0 12px 32px -8px oklch(var(--lch-always-black) / 0.5),
    0 4px 8px -4px oklch(var(--lch-always-black) / 0.4);
  color: var(--color-ink);
  inline-size: min(28rem, calc(100vw - 2rem));
  inset: 0;
  margin: 14vh auto auto;
  padding: 1.6rem 1.5rem 1.5rem;
  position: fixed;
}

.maturity-popover::backdrop {
  background: oklch(var(--lch-always-black) / 0.35);
}

/* The Basecamp Needle anatomy, dark-adapted: hairline cell-track, tone fill,
   flag pointer with grip lines. Geometry comes from PathsHelper. */
.maturity__gauge {
  block-size: auto;
  display: block;
  inline-size: 17rem;
  margin-block-end: 0.75rem;
  margin-inline: auto;
  max-inline-size: 100%;
}

.maturity__track {
  fill: none;
  stroke: var(--color-subtle);
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.maturity__fill {
  fill: var(--gauge-tone);
}

.maturity__ticks {
  stroke: var(--color-subtle);
  stroke-width: 1.5;
}

/* The dark contour cuts the flag out of whatever is behind it — the filled
   band is the same tone, so without the rim the pointer melts into it. The
   flag itself runs a step brighter than the band (Basecamp shades its needle
   darker on white; on black we invert) — older browsers keep the plain tone. */
.maturity__needle-flag {
  fill: var(--gauge-tone);
  fill: oklch(from var(--gauge-tone) calc(l + 0.14) c h);
  stroke: var(--color-bg);
  stroke-width: 2.5;
}

.maturity__needle-grips {
  fill: none;
  stroke: var(--color-ink-reversed);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.maturity__needle {
  transform: rotate(var(--gauge-angle));
  transform-origin: 186px 290px;
}

/* The one flourish: the needle sweeps in from zero. The popover's children
   get their first box on every open, so @starting-style re-runs the sweep
   each time. Elsewhere (and with reduced motion) it simply starts in place. */
@media (prefers-reduced-motion: no-preference) {
  .maturity__needle {
    transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  @starting-style {
    .maturity__needle {
      transform: rotate(-40deg);
    }
  }
}

.maturity-popover__header {
  margin-block-end: 1.25rem;
  text-align: center;
}

.maturity-popover__title {
  font-weight: 700;
  margin-block: 0;
}

.maturity-popover__subtitle {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
  margin-block: 0.1rem 0;
}

.maturity-popover__list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-block: 0 1.25rem;

  li {
    align-items: baseline;
    display: flex;
    font-size: 0.92rem;
    gap: 0.6rem;
  }

  .icon {
    align-self: center;
    block-size: 1.05rem;
    flex: none;
    inline-size: 1.05rem;
  }

  .is-done .icon {
    color: var(--color-positive);
  }

  .is-todo {
    color: var(--color-subtle-dark);

    .icon {
      color: var(--color-disabled);
    }
  }
}

.maturity-popover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}