/* Yesso Academy — skills radar (assets/skills-radar.js), shared by both
   cabinets. Tokens only; the three stage colours are set inline by the
   component so it stays the single source of that mapping. */

.yesso-radar-wrap { width: 100%; }

.yesso-radar {
  display: block;
  width: 100%;
  height: auto;
  max-width: 460px;
  margin: 0 auto;
  overflow: visible;
}

.yesso-radar-ring {
  fill: none;
  stroke: var(--yesso-border);
  stroke-width: 1;
}

.yesso-radar-ring.outer { stroke: var(--yesso-border-strong); }

.yesso-radar-spoke {
  stroke: var(--yesso-border);
  stroke-width: 1;
}

.yesso-radar-shape {
  fill: var(--yesso-tint-lime);
  stroke: var(--yesso-ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: .9;
}

.yesso-radar-dot {
  stroke: var(--yesso-card);
  stroke-width: 2;
  transition: r .12s ease;
}

/* Nothing recorded on this axis yet — hollow, not "worst". */
.yesso-radar-dot.unset {
  stroke: var(--yesso-border-strong);
  stroke-dasharray: 3 2;
}

.yesso-radar-hit { fill: transparent; }

.yesso-radar-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  fill: var(--yesso-muted);
}

/* The topic a narrowed axis came from — present, but never competing with
   the axis's own name. */
.yesso-radar-parent {
  font-size: 9px;
  letter-spacing: .08em;
  opacity: .65;
}

.yesso-radar-axis.clickable { cursor: pointer; }
.yesso-radar-axis.clickable:hover .yesso-radar-label { fill: var(--yesso-ink); }
.yesso-radar-axis.active .yesso-radar-label { fill: var(--yesso-ink); font-weight: 700; }

.yesso-radar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yesso-muted);
}

.yesso-radar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.yesso-radar-swatch {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  display: inline-block;
}