/* Guitar Imp — scales
   The neck, the panel and the controls are all shared furniture from style.css.
   What is here is only how a scale marks the board: the root, the notes that
   belong, the ones that do not, and the note currently sounding. */

/* --------------------------------------------------------------------------
   The scale on the board
   -------------------------------------------------------------------------- */

/* Amber is the root, the way it is the accent everywhere else on the site. */
.cell.is-root .dot {
    background: var(--glow);
    color: #22150a;
    text-shadow: none;
}

/* The rest of the scale: bone, and clearly on the board, but quiet enough that
   the roots still read as the landmarks at a glance from arm's length. */
.cell.is-in .dot {
    background: rgba(236, 226, 207, .16);
    box-shadow: inset 0 0 0 1.5px rgba(236, 226, 207, .45);
}

/* Notes outside the scale, when they are shown at all. :not(.is-hidden) because
   the shared rule that hides a note is no more specific than this one, and this
   sheet loads second — without it a hidden note would fade back into view. */
.cell.is-out:not(.is-hidden) .dot {
    opacity: .3;
    font-weight: 400;
}

/* The note the run is sounding right now. Scaling the dot rather than recolouring
   it keeps the root amber and the scale bone while the run walks past them. */
.cell.is-play .dot {
    box-shadow: 0 0 16px rgba(245, 163, 60, .8), inset 0 0 0 2px var(--glow);
    transform: scale(1.14);
}

.dot { transition: background-color .16s ease, color .16s ease, opacity .16s ease, transform .12s ease; }

/* --------------------------------------------------------------------------
   The scale's name and its run
   -------------------------------------------------------------------------- */

/* Name, spelling and the Play button share a row, the same way the fretboard's
   question and its Start button do: a full-width button here would push the
   twelfth fret off a phone screen. */
.scale__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(10px, 3vw, 14px);
}

.scale__text { min-width: 0; }

.scale__name {
    margin: 0;
    font-family: 'Syne', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.15;
}

.scale__name .root { color: var(--glow); }

.scale__spell {
    margin: 2px 0 0;
    min-height: 1.1em;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--nickel);
}

.scale__go {
    flex: 0 0 auto;
    padding: 11px 20px;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   The reference table
   -------------------------------------------------------------------------- */

/* The degree column is the one being looked up, so it keeps the accent. */
.ref__table tbody th.degree {
    color: var(--bone);
    font-weight: 700;
}

.ref__table tbody tr.is-root th.degree { color: var(--glow); }

@media (max-width: 359px) {
    .scale__go { padding: 11px 15px; }
}