/* ============================================================
   Practice & Ear Training
   ============================================================

   Scale Trainer, Ear Training and the Chord Progression
   Generator. Layered ON TOP of music-tools.css - the .mu shell,
   cards, buttons, inputs and live region all come from there, and
   nothing in this file redefines them.

   NO NEW PALETTE. Every colour is one of the A-to-Z tokens that
   music-tools.css already resolves, with the same fallbacks after
   each var() so load order cannot break it.

   STATE IS NEVER COLOUR ALONE. A root note is coral AND larger
   AND ringed; a correct answer is mint AND says "correct answer";
   a borrowed chord is tinted AND carries a badge naming what it
   was borrowed from. Somebody who cannot separate red from green
   loses nothing.
   ============================================================ */

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

    /* Not the coral above: that is the root-note colour, and a
       wrong answer must not look like a root note. A deeper red,
       which also clears 4.5:1 on the card background. */
    --pr-bad:     #c62f2f;

    --pr-neutral: var(--az-line, #e8e6e3);
    --pr-ink:     var(--az-ink, #10162b);
    --pr-ink-2:   var(--az-ink-2, #454d63);
    --pr-ink-3:   var(--az-ink-3, #5f677d);
    --pr-surface: var(--az-surface, #ffffff);
    --pr-r:       var(--az-r, 14px);
}

/* ------------------------------------------------------------
   Shared bits
   ------------------------------------------------------------ */

.pr-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 14px;
    align-items: end;
}

.pr-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.pr-field > label,
.pr-legend {
    font-size: .78rem;
    font-weight: 600;
    color: var(--pr-ink-3);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.pr-check {
    display: flex;
    align-items: center;
    gap: 9px;
    /* A checkbox row is a touch target too. */
    min-height: 44px;
    font-size: .9rem;
    color: var(--pr-ink-2);
    cursor: pointer;
}

.pr-check input { width: 20px; height: 20px; flex: none; accent-color: var(--pr-tone-2); }

/* Segmented control - view and mode switches. */
.pr-segment {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--az-line-2, #f0eeeb);
    padding: 5px;
    border-radius: 999px;
}

.pr-segment button {
    flex: 1 1 auto;
    min-height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pr-ink-2);
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.pr-segment button.is-active {
    background: var(--pr-surface);
    color: var(--pr-ink);
    box-shadow: var(--az-shadow-sm, 0 1px 2px rgba(16, 22, 43, .05));
}

.pr-segment button:focus-visible,
.mu .pr-scroll button:focus-visible {
    outline: 3px solid var(--pr-tone-2);
    outline-offset: 2px;
}

.pr-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 18px;
    margin: 0;
}

.pr-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-facts dt, .pr-facts .pr-k { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pr-ink-3); }
.pr-facts dd, .pr-facts .pr-v { margin: 0; font-weight: 600; color: var(--pr-ink); font-size: .98rem; word-break: break-word; }

/* Anything wide scrolls INSIDE ITS OWN BOX. The page body never
   scrolls sideways; a fretboard at 320px does. */
.pr-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.pr-note {
    font-size: .85rem;
    color: var(--pr-ink-3);
    margin: 8px 0 0;
}

/* ============================================================
   Scale Trainer
   ============================================================ */

/* ---------- Fretboard ---------- */

.st-fb-grid {
    display: inline-block;
    min-width: 640px;
    background: linear-gradient(180deg, #fbf7f2, #f4ece2);
    border: 1px solid var(--pr-neutral);
    border-radius: 10px;
    padding: 8px 6px;
}

.st-fb-row { display: flex; align-items: stretch; }

.st-fb-head { margin-bottom: 2px; }

.st-fb-string-name,
.st-fb-open-label {
    flex: none;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    color: var(--pr-ink-3);
}

.st-fb-fretnum {
    flex: 1 0 38px;
    text-align: center;
    font-size: .7rem;
    color: var(--pr-ink-3);
    padding-bottom: 3px;
}

.st-fb-fretnum.is-marker { color: var(--pr-tone-2); font-weight: 700; }
.st-fb-fretnum.is-double { color: var(--pr-root); font-weight: 700; }

.st-fb-cell {
    flex: 1 0 38px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The fret wire. */
    border-right: 2px solid #d8cbb8;
    position: relative;
}

.st-fb-cell.is-open {
    border-right: 4px solid #9c8a70;      /* the nut */
    background: rgba(255, 255, 255, .5);
}

/* The string itself, drawn behind the notes. */
.st-fb-cell::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: #b9ad99;
}

.st-dot {
    position: relative;
    z-index: 1;
    min-width: 34px;
    min-height: 34px;
    padding: 0 4px;
    border: 0;
    border-radius: 999px;
    background: var(--pr-tone);
    color: #fff;
    font: inherit;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 22, 43, .25);
    transition: transform .15s ease, box-shadow .15s ease;
}

.st-dot.is-root {
    background: var(--pr-root);
    /* Not colour alone: the root is bigger and ringed. */
    min-width: 38px;
    min-height: 38px;
    font-size: .7rem;
    box-shadow: 0 0 0 3px rgba(240, 101, 95, .28), 0 1px 3px rgba(16, 22, 43, .3);
}

.st-dot:hover { transform: scale(1.07); }

.st-dot.is-current,
.st-key.is-current {
    background: var(--pr-mid);
    box-shadow: 0 0 0 4px rgba(192, 90, 217, .3);
}

.st-dot.is-right, .st-key.is-right { background: var(--pr-good); }
.st-dot.is-wrong, .st-key.is-wrong { background: var(--pr-bad); }

.st-dot:focus-visible, .st-key:focus-visible {
    outline: 3px solid var(--pr-ink);
    outline-offset: 2px;
    z-index: 3;
}

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

.st-piano-board {
    display: flex;
    min-width: 420px;
    height: 190px;
    padding: 0;
    background: var(--pr-ink);
    border-radius: 8px;
    position: relative;
}

.st-key {
    font: inherit;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.st-key-white {
    flex: 1 1 0;
    min-width: 30px;
    background: #fdfdfb;
    border: 1px solid #cfc9c0;
    border-radius: 0 0 6px 6px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8px;
}

.st-key-white.is-in-scale { background: linear-gradient(180deg, #fdfdfb 55%, var(--pr-tone) 55%); }
.st-key-white.is-root { background: linear-gradient(180deg, #fdfdfb 45%, var(--pr-root) 45%); }

/* The black key is a child of the white key it follows, so it
   stays in the right place at any width without a single
   hard-coded pixel offset. */
.st-key-black {
    position: absolute;
    top: 0;
    right: -34%;
    width: 68%;
    height: 62%;
    background: #23262f;
    border: 1px solid #12141a;
    border-radius: 0 0 5px 5px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    min-width: 22px;
}

.st-key-black.is-in-scale { background: linear-gradient(180deg, #23262f 45%, var(--pr-tone-2) 45%); }
.st-key-black.is-root { background: linear-gradient(180deg, #23262f 40%, var(--pr-root) 40%); }

.st-key-label {
    font-size: .6rem;
    font-weight: 700;
    color: var(--pr-ink);
    pointer-events: none;
    text-align: center;
    line-height: 1.05;
}

.st-key-white.is-in-scale .st-key-label,
.st-key-white.is-root .st-key-label,
.st-key-black .st-key-label { color: #fff; }

.st-key-black .st-key-label { font-size: .55rem; }

.st-octave-nav { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 10px; }
.st-octave-nav b { min-width: 110px; text-align: center; font-size: .9rem; }

/* ---------- Read-out and quiz ---------- */

.st-chords { display: flex; flex-wrap: wrap; gap: 8px; }

.st-chord {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 62px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--pr-neutral);
    border-radius: 10px;
    background: var(--pr-surface);
    text-decoration: none;
    color: var(--pr-ink);
}

.st-chord b { font-size: .92rem; }
.st-chord span { font-size: .72rem; color: var(--pr-ink-3); }
.st-chord:hover { border-color: var(--pr-tone-2); }

.st-choice, .et-choice {
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid var(--pr-neutral);
    border-radius: 12px;
    background: var(--pr-surface);
    color: var(--pr-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.st-choice:hover:not(:disabled),
.et-choice:hover:not(:disabled) { border-color: var(--pr-tone-2); background: #fbfaff; }

.st-choice.is-right, .et-choice.is-correct {
    border-color: var(--pr-good);
    background: rgba(34, 176, 107, .12);
    color: #0d5c37;
}

.st-choice.is-wrong, .et-choice.is-wrong {
    border-color: var(--pr-bad);
    background: rgba(198, 47, 47, .1);
    color: #8d1f1f;
}

.st-quiz-choices, .et-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.st-mic-readout { display: flex; flex-wrap: wrap; gap: 16px; font-size: .95rem; }
.st-mic-readout b { display: block; font-size: 1.3rem; color: var(--pr-ink); }

/* ============================================================
   Ear Training
   ============================================================

   Calmer than the other two on purpose - somebody is
   concentrating on a sound, and a busy screen competes with that.
   ============================================================ */

.et-room { text-align: center; }

.et-listen {
    min-width: 200px;
    min-height: 68px;
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--pr-tone), var(--pr-tone-2));
    color: #fff;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(91, 141, 239, .32);
}

.et-listen:hover { filter: brightness(1.05); }
.et-listen:focus-visible { outline: 3px solid var(--pr-ink); outline-offset: 3px; }

.et-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    margin: 14px 0 6px;
}

.et-wave span {
    width: 4px;
    border-radius: 2px;
    background: var(--pr-tone-2);
    opacity: .35;
    height: 30%;
    transition: height .25s ease, opacity .25s ease;
}

.et-progress {
    height: 8px;
    border-radius: 999px;
    background: var(--az-line-2, #f0eeeb);
    overflow: hidden;
    margin: 14px 0;
}

.et-progress-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pr-tone), var(--pr-mid));
    transition: width .3s ease;
}

.et-scores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 10px;
    text-align: center;
}

.et-scores > div {
    padding: 10px 6px;
    border: 1px solid var(--pr-neutral);
    border-radius: 12px;
    background: var(--pr-surface);
}

.et-scores b { display: block; font-size: 1.25rem; color: var(--pr-ink); }
.et-scores span { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pr-ink-3); }

.et-mark { font-size: .75rem; font-weight: 600; opacity: .85; }

.et-reveal {
    text-align: left;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--pr-neutral);
    border-left: 4px solid var(--pr-tone-2);
    border-radius: var(--pr-r);
    background: #fbfaff;
}

.et-reveal-title { margin: 0 0 6px; font-size: 1.1rem; color: var(--pr-ink); }
.et-reveal-detail { margin: 0 0 10px; color: var(--pr-ink-2); }
.et-facts { margin: 0 0 10px; padding-left: 20px; color: var(--pr-ink-2); font-size: .92rem; }
.et-facts li { margin-bottom: 3px; }
.et-hint { margin: 0; font-size: .92rem; color: var(--pr-ink-2); }

/* ============================================================
   Chord Progression Generator
   ============================================================ */

/* LEFT TO RIGHT ON A DESKTOP, STACKED ON A PHONE.

   The board scrolls inside itself rather than making the page
   scroll - and below 640px it becomes a column, because eight
   chord cards side by side on a phone are eight unreadable
   slivers or one horizontal scrollbar too many. */
.cp-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    gap: 12px;
    padding-bottom: 4px;
}

.cp-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
    padding: 14px 12px;
    border: 1px solid var(--pr-neutral);
    border-radius: var(--pr-r);
    background: var(--pr-surface);
    box-shadow: var(--az-shadow-sm, 0 1px 2px rgba(16, 22, 43, .05));
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cp-bar { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pr-ink-3); }
.cp-roman { font-size: 1.05rem; font-weight: 700; color: var(--pr-tone-2); }
.cp-symbol { font-size: 1.7rem; line-height: 1.1; color: var(--pr-ink); }
.cp-notes { font-size: .82rem; color: var(--pr-ink-2); }
.cp-function { font-size: .78rem; color: var(--pr-ink-3); }

.cp-badge {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(192, 90, 217, .14);
    color: #7a2b8c;
    font-size: .68rem;
    font-weight: 700;
}

.cp-card.is-borrowed { border-color: var(--pr-mid); background: #fdfaff; }

.cp-card.is-locked {
    border-color: var(--pr-root-2);
    box-shadow: inset 3px 0 0 var(--pr-root-2), var(--az-shadow-sm, 0 1px 2px rgba(16, 22, 43, .05));
}

.cp-card.is-playing {
    border-color: var(--pr-tone);
    box-shadow: 0 0 0 3px rgba(91, 141, 239, .25);
    transform: translateY(-3px);
}

.cp-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.cp-icon-btn {
    flex: 1 1 auto;
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px;
    border: 1px solid var(--pr-neutral);
    border-radius: 9px;
    background: var(--pr-surface);
    color: var(--pr-ink-2);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}

.cp-icon-btn:hover { border-color: var(--pr-tone-2); color: var(--pr-ink); }
.cp-icon-btn:focus-visible { outline: 3px solid var(--pr-tone-2); outline-offset: 2px; }

.cp-alt-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }

.cp-alt {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    min-height: 48px;
    padding: 6px 12px;
    border: 1px solid var(--pr-neutral);
    border-radius: 10px;
    background: var(--pr-surface);
    font: inherit;
    cursor: pointer;
}

.cp-alt b { font-size: 1rem; color: var(--pr-ink); }
.cp-alt span { font-size: .72rem; color: var(--pr-ink-3); }
.cp-alt:hover { border-color: var(--pr-tone-2); }

.cp-output {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.cp-output > div {
    padding: 12px 14px;
    border: 1px solid var(--pr-neutral);
    border-radius: 12px;
    background: #fbfaf8;
    min-width: 0;
}

.cp-output b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--pr-ink-3); margin-bottom: 4px; }
.cp-output p { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--pr-ink); word-break: break-word; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 640px) {
    /* Chord cards stack rather than scroll sideways. */
    .cp-board {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: 1fr;
    }

    .cp-symbol { font-size: 1.45rem; }
    .st-piano-board { height: 165px; }
    .et-listen { min-width: 100%; }
}

@media (max-width: 380px) {
    .pr-controls { grid-template-columns: 1fr; }
    .st-quiz-choices, .et-choices { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
    .et-scores { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------
   Touch

   A fretboard note is a 34px dot on a mouse, which is fine for a
   pointer that lands where it is aimed. A finger does not, and a
   34px target between two other 34px targets is one people miss.

   On a coarse pointer every dot and every key becomes a real
   44px target and the fretboard simply gets wider - it already
   scrolls inside its own box, so nothing on the page moves and
   no layout has to change to accommodate it. Keyed on the
   POINTER rather than on the width, because a 1024px tablet has
   the same fingers as a 375px phone.
   ------------------------------------------------------------ */

@media (pointer: coarse) {
    .st-fb-cell { flex-basis: 48px; min-height: 56px; }
    .st-fb-fretnum { flex-basis: 48px; }
    .st-fb-grid { min-width: 820px; }

    .st-dot { min-width: 44px; min-height: 44px; font-size: .7rem; }
    .st-dot.is-root { min-width: 46px; min-height: 46px; }

    .st-piano-board { height: 220px; }
    .st-key-white { min-width: 44px; }
    .st-key-black { min-width: 30px; }
}

/* ============================================================
   Reduced motion

   Everything that moves here is decoration over a state that is
   also carried by text, so removing the motion removes nothing.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .st-dot,
    .cp-card,
    .et-progress-bar,
    .et-wave span,
    .pr-segment button {
        transition-duration: .001ms !important;
    }

    .st-dot:hover { transform: none; }
    .cp-card.is-playing { transform: none; }
}