/* key-wheel.css — the shared key wheel (learning tools, task A2), drawn by static/key-wheel.js (KeyWheel.render).
   Loaded on the Camelot wheel and circle of fifths pages after studio.css (it reads the kit's --st-* tokens and falls
   back without them).

   Look: a hardware dial on the machine panel. The face stays charcoal in both themes like the rest of the kit's
   hardware; segments keep the Camelot hour colours (CamelotCore.segColor); every ring has a strip of LEDs that light
   in the move colour. The selected key gets the page accent ring; everything not highlighted dims.

   Structure (all inside svg.kw.kw--camelot|kw--fifths):
     .kw-wheel > .kw-face, .kw-hub, .kw-rotor (turns), .kw-pointer (fifths + rotateToSelected)
     .kw-rotor > .kw-sig-band, .kw-seg[data-ring=A|B] (.is-sel .is-same|adjacent|relative|energy2|semitone|family
                 .is-dim), .kw-tick, .kw-sel-ring, .kw-focus-ring
     .kw-seg   > path.kw-key[data-code] (focusable), .kw-led, g.kw-text > .kw-label + .kw-sub, .kw-sig[data-sig]
   Legend for a page: ul.kw-legend > li > span.kw-swatch[data-kind=<kind>]. Colours: --kw-<kind> on .kw and
   .kw-legend; override them on either. */

.kw,
.kw-legend {
    --kw-same: var(--st-808-ivory, #EEE7D3);
    --kw-adjacent: #1FC2E3;
    --kw-relative: #9A86FF;
    --kw-energy2: #22CC80;
    --kw-semitone: var(--st-pink, #F23A84);
    --kw-family: #F5C21B;
    --kw-sel: var(--st-accent, #FF6A1F);
}
.kw {
    --kw-face: var(--st-well, #111315);
    --kw-rim: var(--st-panel-2, #2A2D31);
    --kw-hub: var(--st-panel-2, #2A2D31);
    --kw-ink: var(--st-panel-ink, #ECEAE3);
    --kw-muted: var(--st-panel-muted, #A6AAAE);
    --kw-led-off: #2C3035;
    --kw-focus: #7FA8FF;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
    font-family: var(--st-font, "Archivo", "DM Sans", system-ui, -apple-system, sans-serif);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* ── dial ── */
.kw-face {
    fill: var(--kw-face);
    stroke: var(--kw-rim);
    stroke-width: 3;
}
.kw-hub {
    fill: var(--kw-hub);
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}
.kw-tick {
    stroke: rgba(236, 234, 227, 0.22);
    stroke-width: 1.2;
    stroke-linecap: round;
    pointer-events: none;
}
.kw-pointer {
    fill: var(--kw-sel);
    pointer-events: none;
}

/* ── segments ── */
.kw-seg {
    transition: opacity 0.16s ease-out;
}
.kw-key {
    stroke: var(--kw-face);
    stroke-width: 2;
    cursor: pointer;
    transition: filter 0.16s ease-out;
}
.kw-key:focus { outline: none; }
.kw-key:hover { filter: brightness(1.14) saturate(1.08); }
.kw-seg[data-ring="A"] .kw-key { filter: brightness(0.92); }
.kw-seg[data-ring="A"] .kw-key:hover { filter: brightness(1.06) saturate(1.08); }

.kw-text,
.kw-led,
.kw-sig,
.kw-sel-ring,
.kw-focus-ring {
    pointer-events: none;
}
.kw-label,
.kw-sub {
    text-anchor: middle;
    dominant-baseline: central;
    fill: #fff;
    paint-order: stroke;
    stroke: rgba(10, 10, 14, 0.38);
    stroke-linejoin: round;
}
.kw-label {
    font-size: 15px;
    font-weight: 780;
    font-stretch: 108%;
    letter-spacing: -0.01em;
    stroke-width: 2.4px;
}
.kw-sub {
    font-size: 9.5px;
    font-weight: 560;
    font-stretch: 92%;
    fill: rgba(255, 255, 255, 0.82);
    stroke-width: 1.8px;
}
.kw-seg[data-ring="A"] .kw-label { font-size: 12.5px; }
.kw-seg[data-ring="A"] .kw-sub { font-size: 8.5px; }

/* ── LEDs: off by default, lit in the move colour ── */
.kw-led {
    fill: var(--kw-led-off);
    transition: fill 0.12s ease-out;
}
.kw-seg.is-sel .kw-led { fill: var(--kw-sel); }
.kw-seg.is-same .kw-led { fill: var(--kw-same); }
.kw-seg.is-adjacent .kw-led { fill: var(--kw-adjacent); }
.kw-seg.is-relative .kw-led { fill: var(--kw-relative); }
.kw-seg.is-energy2 .kw-led { fill: var(--kw-energy2); }
.kw-seg.is-semitone .kw-led { fill: var(--kw-semitone); }
.kw-seg.is-family .kw-led { fill: var(--kw-family); }
.kw-seg:is(.is-sel, .is-same, .is-adjacent, .is-relative, .is-energy2, .is-semitone, .is-family) .kw-led {
    filter: drop-shadow(0 0 3px currentColor);
}
.kw-seg.is-sel { color: var(--kw-sel); }
.kw-seg.is-same { color: var(--kw-same); }
.kw-seg.is-adjacent { color: var(--kw-adjacent); }
.kw-seg.is-relative { color: var(--kw-relative); }
.kw-seg.is-energy2 { color: var(--kw-energy2); }
.kw-seg.is-semitone { color: var(--kw-semitone); }
.kw-seg.is-family { color: var(--kw-family); }

/* everything outside the highlight steps back */
.kw-seg.is-dim { opacity: 0.26; }
.kw-seg.is-dim .kw-key { filter: saturate(0.35); }
.kw-seg.is-dim .kw-key:hover { filter: saturate(0.7); }
.kw-seg.is-dim:hover { opacity: 0.55; }

/* selection and keyboard focus are drawn over the wheel, so a neighbour never paints over them */
.kw-sel-ring {
    fill: none;
    stroke: var(--kw-sel);
    stroke-width: 3;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px var(--kw-sel));
}
.kw-focus-ring {
    fill: none;
    stroke: var(--kw-focus);
    stroke-width: 2;
    stroke-dasharray: 5 3;
    stroke-linejoin: round;
}

/* ── signature ring (fifths) ── */
.kw-sig-band {
    fill: var(--kw-rim);
    pointer-events: none;
}
.kw-sig {
    text-anchor: middle;
    dominant-baseline: central;
    font-size: 12.5px;
    font-weight: 700;
    font-stretch: 100%;
    fill: var(--kw-muted);
}
.kw-sig[data-sig-type="none"] { fill: var(--kw-ink); }
.kw-sig[data-sig-type="sharp"] { fill: #9ED8EA; }
.kw-sig[data-sig-type="flat"] { fill: #F2AECB; }
.kw-sig--twin { display: none; }
.kw-seg.is-sel .kw-sig,
.kw-seg.is-same .kw-sig { fill: var(--kw-ink); }

/* fifths: tighter rings, a little smaller type */
.kw--fifths .kw-seg[data-ring="B"] .kw-label { font-size: 16px; }
.kw--fifths .kw-seg[data-ring="A"] .kw-label { font-size: 12px; }
.kw--fifths .kw-seg[data-ring="B"] .kw-sub { font-size: 9px; }

/* ── legend ── */
.kw-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--st-muted, inherit);
}
.kw-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.kw-swatch {
    --sw: var(--kw-same);
    flex: none;
    width: 1.35rem;
    height: 0.45rem;
    border-radius: 2px;
    background: var(--sw);
    /* the hairline keeps the ivory swatch visible on a light page */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.24), 0 0 8px -1px var(--sw);
}
.kw-swatch[data-kind="adjacent"] { --sw: var(--kw-adjacent); }
.kw-swatch[data-kind="relative"] { --sw: var(--kw-relative); }
.kw-swatch[data-kind="energy2"] { --sw: var(--kw-energy2); }
.kw-swatch[data-kind="semitone"] { --sw: var(--kw-semitone); }
.kw-swatch[data-kind="family"] { --sw: var(--kw-family); }
.kw-swatch[data-kind="sel"] { --sw: var(--kw-sel); }

@media (prefers-reduced-motion: reduce) {
    .kw-seg,
    .kw-key,
    .kw-led { transition: none; }
}

@media print {
    .kw-seg.is-dim { opacity: 1; }
    .kw-seg.is-dim .kw-key { filter: none; }
    .kw-sel-ring,
    .kw-focus-ring { filter: none; }
}