/* The hobbies wheel: an outer hour ring and an inner disc of stars that turn independently. */
.wheel { --wheel-line: rgb(242 196 109 / 0.22); position: relative; margin: 0; width: min(100%, 32rem); justify-self: center; }
.wheel__frame { position: relative; aspect-ratio: 1; max-width: 100%; }
.wheel__ring { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--ring, 0deg)); cursor: grab; touch-action: none; transition: filter 0.3s ease; }
.wheel__ring:hover, .wheel__ring.is-turning { filter: drop-shadow(0 0 10px rgb(242 196 109 / 0.35)); }
.wheel__ring.is-turning { cursor: grabbing; }
.wheel__ring:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.wheel .planisphere { display: block; width: 100%; height: 100%; overflow: visible; }
.wheel .planisphere .pl-outer, .wheel .planisphere .pl-inner { fill: none; stroke: var(--wheel-line); stroke-width: 0.6; }
.wheel .planisphere .pl-outer { fill: rgb(10 15 34 / 0.55); }
.wheel .planisphere .pl-dec { fill: none; stroke: rgb(242 196 109 / 0.08); stroke-width: 0.4; stroke-dasharray: 1 2; }
.wheel .planisphere .pl-axes { stroke: rgb(242 196 109 / 0.07); stroke-width: 0.4; }
.wheel .planisphere .pl-tick { stroke: var(--wheel-line); stroke-width: 0.5; }
.wheel .planisphere .pl-tick--major { stroke: rgb(242 196 109 / 0.45); }
.wheel .planisphere text { fill: rgb(242 196 109 / 0.6); font: italic 500 5px var(--serif); text-anchor: middle; dominant-baseline: middle; }
.wheel__disc {
  position: absolute;
  inset: 12%;
  container-type: size;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(20 28 60 / 0.92), rgb(8 12 30 / 0.97));
  box-shadow: inset 0 0 0 1px var(--wheel-line), 0 0 60px -10px rgb(242 196 109 / 0.25);
  transform: rotate(var(--wheel, 0deg));
  cursor: grab;
  touch-action: none;
}
.wheel__disc.is-turning { cursor: grabbing; }
.wheel__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel__lines circle { fill: none; stroke: rgb(242 196 109 / 0.1); stroke-width: 0.5; stroke-dasharray: 1 3; }
.wheel__stars li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -50cqmin)); }
.wheel__stars button { position: absolute; left: -1.375rem; top: -1.375rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.wheel__stars button::before {
  content: "";
  position: absolute;
  inset: 50%;
  width: calc(0.8rem * var(--m));
  height: calc(0.8rem * var(--m));
  margin: calc(-0.4rem * var(--m));
  border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 12px 2px rgb(242 196 109 / 0.6);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.wheel__stars li.is-on button::before { background: var(--gold); transform: scale(1.5); }
.wheel__stars button:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.wheel__name {
  position: absolute;
  left: 0;
  top: 0.9rem;
  transform: translateX(-50%) rotate(calc(var(--a) * -1 - var(--wheel, 0deg)));
  white-space: nowrap;
  font: italic 500 0.95rem/1 var(--serif);
  color: var(--muted);
  pointer-events: none;
}
.wheel__stars li.is-on .wheel__name { color: var(--gold); }
/* the pointer rides on the ring */
.wheel__arm { position: absolute; inset: 0; z-index: 2; transform: rotate(var(--ring, 0deg)); pointer-events: none; }
.wheel__pointer { position: absolute; left: 50%; top: 9.5%; z-index: 2; width: 0; height: 0; margin-left: -0.5rem; border: 0.5rem solid transparent; border-top: 0.8rem solid var(--gold); filter: drop-shadow(0 0 6px var(--gold)); pointer-events: none; }
.wheel__cap { margin-top: 1rem; text-align: center; }
.wheel__readout { display: grid; gap: 0.2rem; }
.wheel__readout b { font: 300 clamp(1.4rem, 2.6vw, 2rem)/1.1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--star); }
.wheel__readout span:last-child { color: var(--muted); }
.wheel__hint { margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.no-js .wheel__name { transform: translateX(-50%); }
.no-js .wheel__ring { cursor: default; }
@media (max-width: 40em) { .wheel__name { font-size: 0.82rem; } }
/* upright names in their own layer, on whichever side of their star is clear */
.wheel__labels { position: absolute; inset: 12%; z-index: 1; pointer-events: none; }
.wheel__label { position: absolute; left: 0; top: 0; padding: 0.1rem 0.25rem; white-space: nowrap; font: italic 500 0.95rem/1 var(--serif); color: var(--muted); text-shadow: 0 0 4px rgb(8 12 30), 0 0 8px rgb(8 12 30), 0 0 2px rgb(8 12 30); will-change: transform; transition: color 0.25s ease; }
.wheel__label.is-on { color: var(--gold); }
.wheel.has-labels .wheel__name { display: none; }
@media (max-width: 40em) { .wheel__label { font-size: 0.82rem; } }