/* Interactive widgets for the no-file free tools (Camelot wheel, tap tempo).
   Pages are generated by docs/build/render-widgets.mjs. */

/* ── Camelot wheel ─────────────────────────────────────────────────────── */
.cw { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:26px; align-items:center; }
.cw-svg { width:100%; max-width:430px; margin:0 auto; display:block; user-select:none; }
.cw-sec { cursor:pointer; transition:opacity .15s ease; outline:none; }
.cw-sec path { stroke:#fff; stroke-width:1.5; transition:fill .15s ease, stroke .15s ease; }
.cw-sec text { pointer-events:none; fill:#2D2A37; font-family:'Inter',sans-serif; text-anchor:middle; dominant-baseline:middle; }
.cw-sec .cw-code { font-size:10.5px; font-weight:700; letter-spacing:.04em; opacity:.72; }
.cw-sec .cw-key { font-size:13.5px; font-weight:600; }
.cw.has-sel .cw-sec { opacity:.32; }
.cw.has-sel .cw-sec.is-compat, .cw.has-sel .cw-sec.is-sel { opacity:1; }
.cw.has-sel .cw-sec.is-lift { opacity:.7; }
.cw-sec.is-compat path { stroke:var(--accent); stroke-width:3; }
.cw-sec.is-lift path { stroke:var(--accent); stroke-width:2; stroke-dasharray:4 3; }
.cw-sec.is-sel path { stroke:#2D2A37; stroke-width:3.5; }
.cw-sec:focus-visible path { stroke:#2D2A37; stroke-width:3.5; }
.cw-hub-code { font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; fill:#2D2A37; text-anchor:middle; dominant-baseline:middle; }
.cw-hub-sub { font-family:'Inter',sans-serif; font-size:10px; font-weight:600; fill:var(--text-mute); text-anchor:middle; letter-spacing:.12em; }

.cw-panel h3 { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin:18px 0 8px; font-weight:400; }
.cw-sel-code { font-family:var(--font-display); font-size:44px; font-weight:700; line-height:1; color:var(--accent); margin:0; }
.cw-sel-name { font:600 20px 'Inter',sans-serif; color:var(--text); margin:6px 0 0; }
.cw-sel-alt { font:500 13px 'Inter',sans-serif; color:var(--text-mute); margin:4px 0 0; min-height:18px; }
.cw-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cw-list li { display:flex; align-items:baseline; gap:10px; font:500 14px 'Inter',sans-serif; color:var(--text); }
.cw-list li span { color:var(--text-mute); font-size:12.5px; }
.cw-chip { flex:0 0 auto; min-width:42px; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:4px 8px; font:700 12.5px 'Space Mono',monospace; color:var(--accent); cursor:pointer; }
.cw-chip:hover { border-color:rgba(111,91,211,.55); }
.cw-pick { margin-top:18px; }
.cw-pick label { display:block; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); margin-bottom:7px; }
.cw-pick select { width:100%; background:var(--bg-card); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:11px 12px; font:500 14px 'Inter',sans-serif; }
.cw-find { display:inline-block; margin-top:16px; font:600 13.5px 'Inter',sans-serif; color:var(--accent); text-decoration:none; }
.cw-find:hover { text-decoration:underline; }

.cw-table { width:100%; border-collapse:collapse; margin:10px 0 6px; font:500 14px 'Inter',sans-serif; }
.cw-table th { text-align:left; font:400 11px 'Space Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); padding:8px 10px; border-bottom:1px solid var(--border); }
.cw-table td { padding:8px 10px; border-bottom:1px solid var(--border); color:var(--text-dim); }
.cw-table td:first-child, .cw-table td:nth-child(3) { font-family:'Space Mono',monospace; font-weight:700; color:var(--accent); }

@media (max-width:760px) { .cw { grid-template-columns:1fr; } .cw-table { font-size:13px; } .cw-table td, .cw-table th { padding:7px 6px; } }

/* ── Tap tempo ─────────────────────────────────────────────────────────── */
.tt { display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center; }
.tt-pad { width:210px; height:210px; border-radius:50%; border:0; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 35% 30%, #8F7BEA, var(--accent) 60%, #5A46BF); color:#fff;
  font:700 30px var(--font-display); letter-spacing:.02em; box-shadow:0 12px 30px rgba(92,70,190,.35), inset 0 -6px 14px rgba(0,0,0,.12);
  transition:transform .08s ease, box-shadow .08s ease; }
.tt-pad:focus-visible { outline:3px solid #2D2A37; outline-offset:4px; }
.tt-pad.hit { transform:scale(.955); box-shadow:0 6px 16px rgba(92,70,190,.35), inset 0 -3px 10px rgba(0,0,0,.18); }
.tt-bpm { font-family:var(--font-display); font-size:86px; font-weight:700; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.tt-unit { font:600 15px 'Inter',sans-serif; color:var(--text-mute); margin-left:6px; }
.tt-sub { font:500 14px 'Inter',sans-serif; color:var(--text-dim); margin-top:10px; min-height:20px; }
.tt-taps { font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.08em; color:var(--text-mute); margin-top:6px; }
.tt-btns { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.tt-btns button { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:10px 18px; font:600 14px 'Inter',sans-serif; color:var(--text); cursor:pointer; }
.tt-btns button:hover { border-color:rgba(111,91,211,.55); color:var(--accent); }
.tt-hint { font:500 13px 'Inter',sans-serif; color:var(--text-mute); margin:18px 0 0; }

@media (max-width:640px) { .tt { grid-template-columns:1fr; justify-items:center; text-align:center; } .tt-pad { width:180px; height:180px; } .tt-btns { justify-content:center; } .tt-bpm { font-size:72px; } }