/* ============================================================
   Music & Instrument Tools
   ============================================================

   Built on the A-to-Z homepage tokens, same as the Device Health
   Check and Speaker Cleaner. No new palette and no second design
   system - the fallbacks after each var() carry the same values
   so load order cannot break it.

   THE TUNER STATES ARE NEVER COLOUR ALONE. Blue/purple while
   idle, orange when sharp or flat, mint when in tune - and every
   one of those also changes the words and the needle position.
   Somebody who cannot separate orange from green must still be
   able to tune.
   ============================================================ */

:root {
    --mu-bg:      var(--az-bg, #fbf9f7);
    --mu-surface: var(--az-surface, #ffffff);
    --mu-ink:     var(--az-ink, #10162b);
    --mu-ink-2:   var(--az-ink-2, #454d63);
    --mu-ink-3:   var(--az-ink-3, #5f677d);
    --mu-line:    var(--az-line, #e8e6e3);
    --mu-line-2:  var(--az-line-2, #f0eeeb);

    --mu-a-1:     var(--az-a-1, #5b8def);
    --mu-a-2:     var(--az-a-2, #7b5bf0);
    --mu-mid:     var(--az-mid, #c05ad9);
    --mu-z-1:     var(--az-z-1, #f0655f);
    --mu-z-2:     var(--az-z-2, #f89a4d);
    --mu-mint:    var(--az-mint, #22b06b);

    --mu-r:       var(--az-r, 14px);
    --mu-r-lg:    var(--az-r-lg, 18px);
    --mu-shadow:  var(--az-shadow, 0 4px 16px rgba(16, 22, 43, .06));
    --mu-shadow-sm: var(--az-shadow-sm, 0 1px 2px rgba(16, 22, 43, .05));
}

.mu { background: var(--mu-bg); color: var(--mu-ink-2); padding: 8px 0 48px; }
.mu *, .mu *::before, .mu *::after { box-sizing: border-box; }

.mu-shell { max-width: 900px; margin: 0 auto; }
.mu-shell-wide { max-width: 1180px; margin: 0 auto; }

.mu h1 {
    font-size: clamp(1.55rem, 4vw, 2.35rem);
    font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px;
    color: var(--mu-ink);
}
.mu h2, .mu h3 { color: var(--mu-ink); }

.mu-lede {
    font-size: clamp(.98rem, 2.3vw, 1.06rem);
    max-width: 64ch; margin: 0 auto 26px; color: var(--mu-ink-2);
}

.mu-card {
    background: var(--mu-surface);
    border: 1px solid var(--mu-line);
    border-radius: var(--mu-r-lg);
    box-shadow: var(--mu-shadow-sm);
    padding: clamp(16px, 3.5vw, 26px);
    margin: 0 0 20px;
}

/* ---------- Buttons ---------- */

.mu-btn {
    appearance: none;
    border: 1px solid var(--mu-line);
    background: var(--mu-surface);
    color: var(--mu-ink);
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 600; font-size: .95rem;
    cursor: pointer; min-height: 44px; min-width: 44px;
    transition: border-color .15s ease, transform .1s ease;
}
.mu-btn:hover { border-color: var(--mu-ink-3); }
.mu-btn:active { transform: translateY(1px); }
.mu-btn:focus-visible { outline: 3px solid var(--mu-a-1); outline-offset: 2px; }
.mu-btn[disabled] { opacity: .45; cursor: not-allowed; }

.mu-btn-primary {
    background: linear-gradient(135deg, var(--mu-a-1), var(--mu-a-2));
    border-color: transparent; color: #fff;
}
.mu-btn-stop { background: #fdecec; border-color: #f3c9c9; color: #8d1f1f; }

.mu-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.mu-chipset { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }

.mu-chip {
    appearance: none;
    border: 1px solid var(--mu-line);
    background: var(--mu-surface);
    color: var(--mu-ink-2);
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 600; font-size: .88rem;
    cursor: pointer; min-height: 44px;
}
.mu-chip:focus-visible { outline: 3px solid var(--mu-a-1); outline-offset: 2px; }
.mu-chip.is-chosen {
    border-color: var(--mu-a-2); background: #f4f1ff; color: var(--mu-ink);
    box-shadow: 0 0 0 1px var(--mu-a-2) inset;
}

.mu-label { display: block; font-weight: 600; color: var(--mu-ink); margin: 14px 0 6px; font-size: .9rem; }

.mu-input, .mu-select, .mu-range, .mu-textarea {
    width: 100%;
    border: 1px solid var(--mu-line); border-radius: 10px;
    padding: 11px 13px; font: inherit; color: var(--mu-ink);
    background: var(--mu-surface); min-height: 44px;
}
.mu-input:focus-visible, .mu-select:focus-visible,
.mu-range:focus-visible, .mu-textarea:focus-visible {
    outline: 3px solid var(--mu-a-1); outline-offset: 1px; border-color: var(--mu-a-1);
}
.mu-textarea { min-height: 130px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.mu-hint { font-size: .85rem; color: var(--mu-ink-3); margin: 6px 0 0; }

.mu-note-box {
    background: #fff8ee; border: 1px solid #f6e2c6; color: #6b4b18;
    border-radius: var(--mu-r); padding: 14px 16px; margin: 0 0 18px; font-size: .9rem;
}

/* ============================================================
   Tuner
   ============================================================ */

.mu-tuner { text-align: center; }

/* The semicircular meter. A conic gradient plus a rotated needle,
   so nothing animates per frame except one transform. */
.mu-meter {
    position: relative;
    width: min(360px, 84vw);
    height: min(180px, 42vw);
    margin: 0 auto 6px;
    overflow: hidden;
}

.mu-meter-arc {
    width: min(360px, 84vw);
    height: min(360px, 84vw);
    border-radius: 50%;
    background: conic-gradient(from 270deg,
        var(--mu-z-2) 0deg 30deg,
        var(--mu-line-2) 30deg 78deg,
        var(--mu-mint) 78deg 102deg,
        var(--mu-line-2) 102deg 150deg,
        var(--mu-z-2) 150deg 180deg,
        transparent 180deg 360deg);
    position: absolute; top: 0; left: 0;
}

.mu-meter-arc::after {
    content: ""; position: absolute; inset: 22px;
    border-radius: 50%; background: var(--mu-surface);
}

.mu-needle {
    position: absolute;
    left: 50%; bottom: 0;
    width: 3px;
    height: min(150px, 36vw);
    background: var(--mu-ink);
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(0deg);
    transition: transform .12s ease-out;
    border-radius: 2px;
}

.mu-needle-hub {
    position: absolute; left: 50%; bottom: -8px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--mu-ink); transform: translateX(-50%);
}

.mu-detected {
    font-size: clamp(2.6rem, 12vw, 4.2rem);
    font-weight: 800; line-height: 1; color: var(--mu-ink);
    font-variant-numeric: tabular-nums;
}
.mu-detected small { font-size: .4em; color: var(--mu-ink-3); font-weight: 700; }

.mu-readout {
    display: flex; flex-wrap: wrap; gap: 14px 26px;
    justify-content: center; margin: 12px 0 4px;
    font-size: .9rem; color: var(--mu-ink-3);
}
.mu-readout b { color: var(--mu-ink); font-variant-numeric: tabular-nums; }

/* The three states. Each also changes the WORDS in .mu-verdict. */
.mu-verdict { font-weight: 800; font-size: 1.05rem; margin: 6px 0 0; min-height: 1.6em; }
.mu-verdict.is-idle  { color: var(--mu-a-2); }
.mu-verdict.is-off   { color: #a6520d; }
.mu-verdict.is-intune{ color: #14663f; }
.mu-verdict.is-error { color: #8d1f1f; }

.mu-level {
    height: 8px; border-radius: 999px; background: var(--mu-line-2);
    overflow: hidden; max-width: 320px; margin: 14px auto 0;
}
.mu-level-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--mu-a-1), var(--mu-a-2));
    transition: width .1s linear;
}

/* ---------- Note wheel (chromatic) ---------- */

.mu-wheel {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px; max-width: 420px; margin: 18px auto 0;
}
@media (min-width: 560px) { .mu-wheel { grid-template-columns: repeat(12, 1fr); } }

.mu-wheel-note {
    padding: 8px 2px; border-radius: 8px; font-size: .8rem; font-weight: 700;
    background: var(--mu-line-2); color: var(--mu-ink-3);
}
.mu-wheel-note.is-active { background: var(--mu-a-2); color: #fff; }

/* ---------- Strings ---------- */

.mu-strings { display: grid; gap: 8px; margin: 18px 0 0; }

.mu-string {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center; gap: 12px;
    width: 100%;
    background: var(--mu-surface);
    border: 1px solid var(--mu-line);
    border-radius: 12px;
    padding: 10px 14px;
    min-height: 52px;
    cursor: pointer;
    text-align: left;
}
.mu-string:focus-visible { outline: 3px solid var(--mu-a-1); outline-offset: 2px; }
.mu-string.is-active { border-color: var(--mu-a-2); background: #f4f1ff; box-shadow: 0 0 0 1px var(--mu-a-2) inset; }
.mu-string.is-intune { border-color: var(--mu-mint); background: #eaf7f0; }

.mu-string-name { font-weight: 800; font-size: 1.1rem; color: var(--mu-ink); }
.mu-string-hz { font-size: .82rem; color: var(--mu-ink-3); font-variant-numeric: tabular-nums; }

/* The line thickness differs per string - a bass looks like a bass. */
.mu-string-line { height: 2px; background: var(--mu-ink-3); border-radius: 2px; opacity: .55; }
.mu-string[data-gauge="1"] .mu-string-line { height: 1px; }
.mu-string[data-gauge="2"] .mu-string-line { height: 2px; }
.mu-string[data-gauge="3"] .mu-string-line { height: 3px; }
.mu-string[data-gauge="4"] .mu-string-line { height: 4px; }
.mu-string[data-gauge="5"] .mu-string-line { height: 6px; }
.mu-string[data-gauge="6"] .mu-string-line { height: 8px; }

/* Instrument accents - the same components, tinted per instrument. */
.mu-instrument-bass .mu-string.is-active { border-color: var(--mu-a-2); background: #eef1fd; }
.mu-instrument-ukulele .mu-string.is-active { border-color: var(--mu-mint); background: #eaf7f0; }
.mu-instrument-violin .mu-string.is-active { border-color: var(--mu-mid); background: #faf0fd; }

/* ---------- Piano ---------- */

.mu-piano {
    display: flex; position: relative;
    height: 150px; margin: 16px 0 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.mu-key {
    position: relative; flex: 0 0 auto;
    width: 44px; height: 140px;
    background: #fff; border: 1px solid var(--mu-line);
    border-radius: 0 0 6px 6px;
    cursor: pointer;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 8px; font-size: .7rem; color: var(--mu-ink-3);
}
.mu-key.is-black {
    width: 28px; height: 92px; margin: 0 -14px; z-index: 2;
    background: var(--mu-ink); color: #fff; border-color: var(--mu-ink);
}
.mu-key.is-active { background: var(--mu-a-2); color: #fff; border-color: var(--mu-a-2); }
.mu-key.is-black.is-active { background: var(--mu-a-1); }
.mu-key:focus-visible { outline: 3px solid var(--mu-a-1); outline-offset: 2px; z-index: 3; }

/* ============================================================
   Metronome
   ============================================================ */

.mu-bpm {
    font-size: clamp(3rem, 14vw, 5rem);
    font-weight: 800; line-height: 1; color: var(--mu-ink);
    font-variant-numeric: tabular-nums; text-align: center;
}
.mu-bpm-unit { font-size: .9rem; color: var(--mu-ink-3); text-align: center; margin-top: -4px; }

.mu-beats { display: flex; gap: 10px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }

.mu-beat {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--mu-line-2); border: 2px solid var(--mu-line);
    transition: transform .05s linear, background-color .05s linear;
}
.mu-beat.is-current { background: var(--mu-a-2); border-color: var(--mu-a-2); transform: scale(1.35); }
.mu-beat.is-downbeat.is-current { background: var(--mu-z-1); border-color: var(--mu-z-1); }

.mu-pendulum {
    width: 4px; height: 96px; margin: 0 auto 8px;
    background: var(--mu-ink-3); border-radius: 3px;
    transform-origin: bottom center;
    transition: transform .1s linear;
}

/* ============================================================
   Tap tempo
   ============================================================ */

.mu-tap {
    width: 100%; max-width: 420px; margin: 0 auto;
    aspect-ratio: 1 / 1; max-height: 46vh;
    border-radius: 50%;
    border: 3px solid var(--mu-a-2);
    background: linear-gradient(135deg, #f4f1ff, #eef1fd);
    color: var(--mu-ink);
    font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 800;
    cursor: pointer; display: grid; place-items: center;
    user-select: none; -webkit-user-select: none;
    transition: transform .08s ease-out;
}
.mu-tap:focus-visible { outline: 4px solid var(--mu-a-1); outline-offset: 4px; }
.mu-tap.is-hit { transform: scale(.96); }

/* ============================================================
   Tone generator - oscilloscope
   ============================================================ */

.mu-scope {
    width: 100%; height: 140px;
    background: #0f1424; border-radius: var(--mu-r);
    display: block; margin: 12px 0;
}

/* ============================================================
   Fretboard diagrams
   ============================================================ */

.mu-chords { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

.mu-chord {
    background: var(--mu-surface); border: 1px solid var(--mu-line);
    border-radius: var(--mu-r); padding: 12px; text-align: center;
}
.mu-chord h3 { font-size: .95rem; margin: 0 0 2px; }
.mu-chord-meta { font-size: .75rem; color: var(--mu-ink-3); margin: 0 0 8px; }
.mu-chord svg { width: 100%; height: auto; max-width: 130px; }

.mu-fretboard { width: 100%; height: auto; }

/* ============================================================
   Chord chips
   ============================================================ */

.mu-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

.mu-chord-chip {
    display: inline-flex; align-items: center;
    padding: 8px 14px; border-radius: 999px;
    background: #f4f1ff; border: 1px solid var(--mu-a-2);
    color: var(--mu-ink); font-weight: 700; font-size: .9rem;
    font-variant-numeric: tabular-nums;
}
.mu-chord-chip.is-result { background: #eaf7f0; border-color: var(--mu-mint); }

.mu-arrow { color: var(--mu-ink-3); font-weight: 700; align-self: center; }

/* ============================================================
   Category page
   ============================================================ */

.mu-hero {
    background: linear-gradient(135deg, var(--mu-a-1) 0%, var(--mu-a-2) 52%, var(--mu-mid) 100%);
    border-radius: var(--mu-r-lg);
    color: #fff; padding: clamp(22px, 5vw, 40px);
    margin: 0 0 24px; position: relative; overflow: hidden;
}
.mu-hero h1 { color: #fff; }
.mu-hero p { color: rgba(255,255,255,.94); max-width: 60ch; margin: 0; }

/* A staff line motif - five lines and a few notes, drawn in CSS. */
.mu-staff { display: grid; gap: 7px; margin-bottom: 18px; opacity: .5; }
.mu-staff span { display: block; height: 1px; background: rgba(255,255,255,.75); }

.mu-intents { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 22px 0; }

.mu-intent {
    display: block; text-decoration: none;
    background: var(--mu-surface); border: 1px solid var(--mu-line);
    border-radius: var(--mu-r-lg); padding: 18px 16px; min-height: 100px;
    box-shadow: var(--mu-shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mu-intent:hover { transform: translateY(-2px); box-shadow: var(--mu-shadow); border-color: var(--mu-a-1); color: inherit; }
.mu-intent:focus-visible { outline: 3px solid var(--mu-a-1); outline-offset: 2px; }
.mu-intent b { display: block; color: var(--mu-ink); margin-bottom: 4px; }
.mu-intent span { font-size: .85rem; color: var(--mu-ink-3); }

.mu-group { margin: 30px 0 0; }
.mu-group h2 { font-size: 1.25rem; margin: 0 0 4px; }
.mu-group > p { margin: 0 0 14px; color: var(--mu-ink-3); font-size: .92rem; }

.mu-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }

.mu-tool {
    display: block; text-decoration: none;
    background: var(--mu-surface); border: 1px solid var(--mu-line);
    border-radius: var(--mu-r); padding: 16px; min-height: 88px;
}
.mu-tool:hover { border-color: var(--mu-a-1); color: inherit; }
.mu-tool:focus-visible { outline: 3px solid var(--mu-a-1); outline-offset: 2px; }
.mu-tool b { display: block; color: var(--mu-ink); margin-bottom: 3px; }
.mu-tool span { font-size: .84rem; color: var(--mu-ink-3); }

.mu-featured {
    background: linear-gradient(135deg, #f4f1ff, #eef1fd);
    border: 1px solid var(--mu-a-2);
    border-radius: var(--mu-r-lg); padding: clamp(18px, 4vw, 28px); margin: 22px 0;
}

/* ---------- FAQ ---------- */

.mu-faq details {
    border: 1px solid var(--mu-line); border-radius: var(--mu-r);
    padding: 12px 14px; margin-bottom: 8px; background: var(--mu-surface);
}
.mu-faq summary { cursor: pointer; font-weight: 700; color: var(--mu-ink); min-height: 28px; }
.mu-faq summary:focus-visible { outline: 3px solid var(--mu-a-1); outline-offset: 2px; }
.mu-faq p { margin: 10px 0 0; font-size: .93rem; }

.mu-visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .mu *, .mu *::before, .mu *::after {
        animation: none !important;
        transition-duration: .001ms !important;
    }
    /* The needle and beat dots still MOVE - they are information,
       not decoration - they just move without easing. */
}