.rank-control {
  --rank-accent: var(--v2-accent, var(--steel-1));
  --rank-accent-soft: var(--v2-accent-soft, var(--wash-4));
  --rank-active: color-mix(in srgb, var(--rank-accent) 72%, var(--text, var(--ink-0)) 28%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Keep the actual rank readable even when the marker states are subtle or numerous. */
.rank-control[data-rank-current][data-rank-max]::before {
  content: attr(data-rank-current) "/" attr(data-rank-max);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 34px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--rank-active) 38%, var(--rule));
  border-radius: 999px;
  background: color-mix(in srgb, var(--rank-active) 8%, var(--wash-1));
  color: var(--text, var(--ink-0));
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}

.rank-control[data-rank-bonus]:not([data-rank-bonus="0"])::before {
  content: attr(data-rank-current) "+" attr(data-rank-bonus) "/" attr(data-rank-max);
  min-width: 44px;
}

.rank-control__marker {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  appearance: none;
  background: var(--wash-1);
  color: var(--rank-active);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease, opacity .12s ease, transform .12s ease;
}

.rank-control__marker::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .12s ease, transform .12s ease;
}

/* Marked: strong solid ring plus a large solid center. */
.rank-control__marker.is-on,
.rank-control__marker:checked {
  border-width: 2px;
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 18%, var(--wash-1));
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 13%, transparent);
}

.rank-control__marker.is-on::after,
.rank-control__marker:checked::after {
  opacity: 1;
  transform: scale(1);
}

.rank-control__marker.is-talent,
.rank-control__marker.is-baked {
  color: var(--emerald);
}

.rank-control__marker.is-fixed {
  cursor: default;
}

.rank-control__marker.is-bonus {
  color: var(--emerald);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 28%, transparent);
}

/* Available now: an empty, high-contrast dashed ring. */
.rank-control__marker.is-available:not(.is-on):not(:checked) {
  opacity: 1;
  border-width: 2px;
  border-color: var(--rank-active);
  border-style: dashed;
  background: color-mix(in srgb, var(--rank-active) 5%, var(--wash-1));
  box-shadow: none;
}

/* Not allocatable right now: subdued, but still deliberately visible. */
.rank-control__marker.is-off:not(.is-available):not(.is-on):not(:checked) {
  opacity: .5;
  border-color: color-mix(in srgb, var(--rule) 78%, transparent);
  border-style: solid;
  background: color-mix(in srgb, var(--text, var(--ink-0)) 4%, var(--wash-1));
  cursor: not-allowed;
}

/* Locked: solid muted marker with a slash, so state does not depend on color alone. */
.rank-control__marker.is-locked,
.rank-control__marker:disabled {
  opacity: .62;
  cursor: not-allowed;
  border-style: solid;
  border-color: color-mix(in srgb, var(--rule) 76%, transparent);
  background:
    linear-gradient(
      135deg,
      transparent 43%,
      color-mix(in srgb, var(--rule) 78%, transparent) 44%,
      color-mix(in srgb, var(--rule) 78%, transparent) 56%,
      transparent 57%
    ),
    color-mix(in srgb, var(--text, var(--ink-0)) 4%, var(--wash-1));
}

.rank-control__marker.is-locked::after,
.rank-control__marker:disabled::after {
  opacity: 0;
}

.rank-control__marker:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--rank-active) 65%, transparent);
  outline-offset: 2px;
}

.rank-control__mark,
.rank-control__marker .skill-pip__mark {
  display: none;
}

.skill-pips.rank-control,
.wizard-skill-pips.rank-control,
.fabrial-rank-pips.rank-control,
.goal-ranks.rank-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.skill-pip.rank-control__marker,
.goal-rank-check.rank-control__marker {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  border-radius: 50%;
}

.goal-rank-check.rank-control__marker {
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .rank-control__marker:not(:disabled):not(.is-locked):not(.is-fixed):hover {
    border-color: currentColor;
    transform: translateY(-1px);
  }

  .rank-control__marker.is-available:hover,
  .rank-control__marker.is-available:has(~ .rank-control__marker.is-available:hover) {
    border-style: solid;
    border-color: var(--rank-active);
    background: color-mix(in srgb, var(--rank-active) 13%, var(--wash-1));
    color: var(--rank-active);
  }

  .rank-control__marker.is-available:hover::after,
  .rank-control__marker.is-available:has(~ .rank-control__marker.is-available:hover)::after {
    opacity: .38;
    transform: scale(.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rank-control__marker,
  .rank-control__marker::after {
    transition: none;
  }
}