/* ==========================================================================
   Play the melody — the synthesised row in the Recordings list
   Tunebook · 2026-08-28

   Fitted to the LIVE list, not to the mockup. The mockup was drawn at roughly
   1.6x this scale (46px tile, 17.5px title, 16px/22px padding) against neutral
   hairlines; the live list is a 28px tile, 13px type, 10px/14px padding and
   teal hairlines. Every value here is derived from frontend.css so the melody
   row sits flush with its neighbours.

   Loaded after frontend.css and phrase-loop.css. Selectors match their (0,3,0)
   and win on source order — same arrangement phrase-loop.css already relies on.
   ========================================================================== */

/* ── Row geometry ──────────────────────────────────────────────────────────
   frontend.css gives recordings `auto 1fr`; phrase-loop.css extends it to
   `auto 1fr auto` for the Loop control. The melody row needs a fourth column
   for the trace: tile · text · trace · tempo.
   ────────────────────────────────────────────────────────────────────────── */
.tunebook-single-content .tune-recordings .tune-link-item.tune-melody-row {
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    cursor: pointer;
    outline-offset: -2px;                 /* inset, so focus never clips the list border */
    transition: background 0.15s ease;
}

.tunebook-single-content .tune-recordings .tune-melody-row:hover,
.tunebook-single-content .tune-recordings .tune-melody-row.is-playing {
    background: rgba(92, 194, 204, 0.045);
}

.tunebook-single-content .tune-recordings .tune-melody-row:focus-visible {
    outline: 2px solid #5CC2CC;
}

/* Tile — same 28px block as a recording, waveform glyph instead of the disc.
   Only the background image changes; the geometry is inherited. */
/* Four classes, (0,4,0), so it beats the base ::before rule outright rather
   than relying on this file loading after frontend.css. */
.tunebook-single-content .tune-recordings .tune-link-item.tune-melody-row::before {
    background: rgba(92, 194, 204, 0.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235CC2CC' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 12v2'/%3E%3Cpath d='M8 8v10'/%3E%3Cpath d='M12 4v16'/%3E%3Cpath d='M16 8v10'/%3E%3Cpath d='M20 12v2'/%3E%3C/svg%3E") center/14px no-repeat;
}

.tunebook-single-content .tune-recordings .tune-link-item.tune-melody-row.is-playing::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235CC2CC' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E");
}

/* ── Text stack ────────────────────────────────────────────────────────────
   Line-heights are set explicitly rather than inherited. The list's
   `line-height: 1.45` would make two lines ~38px against a 28px tile and leave
   this row 10px taller than every other one; 16.25 + 11.4 lands on 28 and the
   melody row is exactly as tall as a recording row. If the type scale changes,
   re-check this.
   ────────────────────────────────────────────────────────────────────────── */
.tune-melody-text {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 28px;
}

.tune-melody-title {
    display: block;
    font-size: 13px;
    line-height: 1.25;
    color: #e8f4f6;
    white-space: nowrap;
}

.tune-melody-row:hover .tune-melody-title,
.tune-melody-row.is-playing .tune-melody-title {
    color: #5CC2CC;
}

.tune-melody-sub {
    display: block;
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(209, 232, 232, 0.45);
    white-space: nowrap;
}

/* ── Pitch trace ───────────────────────────────────────────────────────────
   One mark per note: x and width from played duration, y from pitch. Not a
   waveform — synthesised audio at near-fixed velocity would draw a featureless
   block. It is texture with a shape, not notation, and is aria-hidden.
   ────────────────────────────────────────────────────────────────────────── */
.tune-melody-trace {
    grid-column: 3;
    grid-row: 1;
    display: block;
    min-width: 50px;
    margin: 0 4px;
}

.tune-melody-svg {
    display: block;
    width: 100%;
    height: 24px;
}

.tune-melody-note {
    fill: #33474F;                        /* one step heavier than the divider,
                                             so it reads as content not a rule */
    transition: fill 0.08s linear;
}

.tune-melody-note.is-lit {
    fill: #bc8e55;                        /* the gold already used by the loop
                                             preset count, not a new accent */
}

.tune-melody-playhead {
    fill: #bc8e55;
    opacity: 0;
}

.tune-melody-playhead.is-on {
    opacity: 0.9;
}

/* ── Tempo control ─────────────────────────────────────────────────────────
   Matches .tune-recording-loop-btn so the two form a column down the right of
   the list: 12px type, 4px/10px padding, 20px radius, teal hairline. The
   mockup's 104x40 white pill belonged to a larger list.
   ────────────────────────────────────────────────────────────────────────── */
.tune-melody-tempo {
    grid-column: 4;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border: 1px solid rgba(92, 194, 204, 0.18);
    background: rgba(92, 194, 204, 0.05);
    border-radius: 20px;
    cursor: default;
    white-space: nowrap;
}

.tune-melody-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    padding: 0;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    color: rgba(200, 221, 227, 0.6);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.tune-melody-step:hover:not(:disabled) {
    color: #5CC2CC;
    background: rgba(92, 194, 204, 0.12);
}

.tune-melody-step:disabled {
    opacity: 0.35;
    cursor: default;
}

.tune-melody-bpm {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(200, 221, 227, 0.6);
    font-variant-numeric: tabular-nums;
    padding: 0 2px;
}

/* ── Empty state ───────────────────────────────────────────────────────────
   Shown above the list when a tune has no recordings at all.
   ────────────────────────────────────────────────────────────────────────── */
.tunebook-single-content .tune-melody-lede {
    max-width: 62ch;
    margin: -2px 0 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(209, 232, 232, 0.55);
}

/* ── Narrow ────────────────────────────────────────────────────────────────
   600px, matching phrase-loop.css, so the tempo pill and the Loop button drop
   to their second line at the same width. The trace moves to its own line,
   indented to the text edge so it reads as part of that block, and spans the
   remaining columns.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tunebook-single-content .tune-recordings .tune-link-item.tune-melody-row {
        grid-template-columns: auto 1fr auto;
    }

    .tune-melody-tempo {
        grid-column: 3;
        grid-row: 1;
    }

    .tune-melody-trace {
        grid-column: 2 / -1;
        grid-row: 2;
        margin: 8px 0 0;
    }

    .tune-melody-svg {
        height: 22px;
    }
}

/* Motion preferences apply to the row's transitions. The playhead is content,
   not decoration, and keeps tracking the audio. */
@media (prefers-reduced-motion: reduce) {
    .tunebook-single-content .tune-recordings .tune-link-item.tune-melody-row,
    .tune-melody-note,
    .tune-melody-step {
        transition: none;
    }
}