/* radial.css — the site's radial menu (radial.js), adapted from the
   lab's port of rauno.me's craft "Radial Menu" (January 2023), with
   Rauno Freiberg's written permission. His rotate/skew wedge
   construction, conic ring mask, and 100ms open/close survive; four
   90° wedges replace his six 60° ones (Tony's call: Back / Refresh /
   Forward / Home), so the skew term drops out (90° − wedge = 0).

   Self-contained tokens: the dark values are his measured stage
   (wedge 30 -> active 38 on ground 26, arc 100); light is the same
   ladder mirrored onto the site's paper grays. */
.rm {
  --rm-wedge: hsl(0 0% 96.5%);
  --rm-wedge-hot: hsl(0 0% 90%);
  --rm-line: hsl(0 0% 87%);
  --rm-center: hsl(0 0% 99%);
  --rm-ink: hsl(0 0% 43.5%);
  --rm-ink-hot: hsl(0 0% 9%);
  --rm-arc: hsl(0 0% 55%);

  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 9999px;
  border: 1px solid var(--rm-line);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  z-index: 80;
  touch-action: none;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 100ms ease, transform 100ms ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
html.dark .rm {
  --rm-wedge: #1e1e1e;
  --rm-wedge-hot: #262626;
  --rm-line: #232323;
  --rm-center: #1a1a1a;
  --rm-ink: hsl(0 0% 62.8%);
  --rm-ink-hot: hsl(0 0% 93%);
  --rm-arc: #646464;
}
.rm[data-open="true"] { opacity: 1; transform: scale(1); }

.rm-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.rm ul { margin: 0; padding: 0; list-style: none; }
.rm li {
  position: absolute;
  bottom: 50%;
  right: 50%;
  width: 210px;
  height: 210px;
  transform-origin: 100% 100%;
  overflow: hidden;
  background: var(--rm-wedge);
  box-shadow: 0 0 0 1px var(--rm-line);
  color: var(--rm-ink);
  /* only the wedge fill cross-fades (his ~100ms); glyph, arc and the
     centre label all step in a single frame */
  transition: background 100ms ease;
}
.rm li[data-active="true"] { background: var(--rm-wedge-hot); color: var(--rm-ink-hot); }
/* four quadrants: rotate((2i-3)·45°), no skew at 90° per wedge */
.rm li:nth-of-type(1) { transform: rotate(-45deg); }
.rm li:nth-of-type(2) { transform: rotate(45deg); }
.rm li:nth-of-type(3) { transform: rotate(135deg); }
.rm li:nth-of-type(4) { transform: rotate(225deg); }

.rm-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.rm-labels span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  color: var(--rm-ink);
}
.rm-labels svg {
  display: block;
  width: var(--gsz, 22px);
  height: var(--gsz, 22px);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the lab's Blurred Icons on the wedges: each glyph's blown-up echo
   sits behind it as a soft ink wash; aiming a wedge floods it */
.rm-labels svg.rm-bloom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--gsz, 22px) * 1.9);
  height: calc(var(--gsz, 22px) * 1.9);
  transform: translate(-50%, -50%);
  filter: blur(7px);
  opacity: 0.3;
  transition: opacity 160ms ease-out;
  pointer-events: none;
}
.rm-labels span[data-active="true"] { color: var(--rm-ink-hot); }
.rm-labels span[data-active="true"] svg.rm-bloom { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .rm-labels svg.rm-bloom { transition-duration: 0.01ms; }
}

/* the rotating arc: an 8px ring with a conic wedge, masked to the band.
   The visible span widens with the wedges: 24.5% of the turn ≈ 88°
   (his 16.5% ≈ 59° over 60° wedges). */
.rm-ring {
  --a: 0deg;
  position: absolute;
  inset: -11px;
  border: 8px solid var(--rm-wedge);
  border-radius: 9999px;
  z-index: -1;
}
.rm-ring::after {
  opacity: 0;
  transition: opacity 100ms ease;
  content: "";
  position: absolute;
  inset: -8px;
  padding: 8px;
  background: conic-gradient(from var(--a), transparent 75.5%, var(--rm-arc) 0, var(--rm-arc) 100%);
  border-radius: 9999px;
  z-index: 1;
  -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
  mask-composite: exclude;
  pointer-events: none;
}
/* changes landing while open are hard cuts; only the close fades */
.rm[data-open="true"] .rm-ring::after { transition: none; }
.rm[data-sel="true"] .rm-ring::after { opacity: 1; }

.rm-center {
  width: 110px;
  height: 110px;
  border-radius: 9999px;
  background: var(--rm-center);
  position: absolute;
  border: 1px solid var(--rm-line);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  place-items: center;
  font-size: 11.6px;
  color: var(--rm-ink);
}
.rm-center::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid var(--rm-line);
}

@media (prefers-reduced-motion: reduce) {
  .rm, .rm li, .rm-ring::after { transition: none; }
}