/* Slipstream - machined rotary dial. All classes are sd- scoped. */

.sd-dial {
  --sd-size: 96px;
  --sd-accent: var(--accent, #3de0ff);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
  color: var(--text, #e8edf5);
}

.sd-label {
  font-family: var(--font-ui, 'Space Grotesk'), system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #8a94a6);
  line-height: 1.2;
  text-align: center;
  max-width: calc(var(--sd-size) + 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-knob {
  position: relative;
  width: var(--sd-size);
  height: var(--sd-size);
  border-radius: 50%;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.15s ease;
}
.sd-knob:focus-visible {
  box-shadow:
    0 0 0 2px var(--bg, #07090d),
    0 0 0 4px var(--sd-accent),
    0 0 18px color-mix(in srgb, var(--sd-accent) 45%, transparent);
}

.sd-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.sd-track,
.sd-value-arc {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.sd-track { stroke: var(--sd-track, rgba(255, 255, 255, 0.08)); }
.sd-value-arc { stroke: var(--sd-accent); }
.sd-tick {
  stroke: var(--sd-tick, rgba(255, 255, 255, 0.18));
  stroke-width: 0.8;
  stroke-linecap: round;
}
.sd-tick--major {
  stroke: var(--sd-tick-major, rgba(255, 255, 255, 0.38));
  stroke-width: 1.2;
}

/* knurled ring: fine conic serrations clipped to a disc */
.sd-ring {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.35) 72%, transparent 73%),
    repeating-conic-gradient(from 0deg,
      #2a313d 0deg 2.5deg,
      #0f131a 2.5deg 5deg),
    #151a22;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(0, 0, 0, 0.6);
}

.sd-face {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.12), transparent 45%),
    radial-gradient(circle at 50% 50%, #1b212b 0%, #10141b 62%, #090c11 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.10),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6),
    0 1px 3px rgba(0, 0, 0, 0.7);
  will-change: transform;
}
/* indicator notch, pointing at 12 o'clock before rotation */
.sd-indicator {
  position: absolute;
  left: 50%;
  top: 7%;
  width: 3px;
  height: 26%;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--sd-accent);
  box-shadow: 0 0 6px var(--sd-accent);
}

.sd-value {
  font-family: var(--font-mono, 'JetBrains Mono'), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text, #e8edf5);
  line-height: 1.2;
  min-height: 1.2em;
  text-align: center;
  white-space: nowrap;
}

.sd-dial.sd-active .sd-knob { cursor: grabbing; }
.sd-dial.sd-active .sd-value { color: var(--sd-accent); }

@media (prefers-reduced-motion: reduce) {
  .sd-knob { transition: none; }
}