/* song-view — additive styles (loaded after style.css). */

/* Session-view grid: tracks are columns, scenes are rows. Allow horizontal
   scroll once there are more tracks than fit the viewport. */
.song-grid { overflow-x: auto; }

/* scene-launch control: an obvious, tappable launch button on each scene row */
.song-grid .scene-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    padding: 0 4px;
    font-size: 12px;
    border-radius: 8px;
    color: var(--fg);
    text-align: left;
    background: color-mix(in srgb, var(--green) 14%, var(--bg1));
    cursor: pointer;
}
.song-grid .scene-head:active { background: color-mix(in srgb, var(--green) 28%, var(--bg1)); }

/* clip cells: hold the bars label + the depleting progress ring */
.song-grid .grid-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cell-bars {
    font-size: 12px;
    color: var(--fg-dim);
    pointer-events: none;
}
.grid-cell[data-state="playing"] .cell-bars,
.grid-cell[data-state="armed"] .cell-bars,
.grid-cell[data-state="stopping"] .cell-bars { color: var(--bg); }

/* Progress ring: a small donut whose filled arc is the REMAINING loop fraction
   (--rem: 1 → full ring, 0 → empty). Driven per-frame from transport time by
   song.js's rAF loop; only shown while the cell is playing. */
.cell-ring {
    --rem: 1;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(var(--bg) calc(var(--rem) * 360deg), color-mix(in srgb, var(--bg) 25%, transparent) 0);
    -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.5px);
    mask: radial-gradient(circle, transparent 4px, #000 4.5px);
}
.grid-cell[data-state="playing"] .cell-ring { opacity: 0.9; }

/* Track header: the mix-open button stacked over a compact M/S toggle row.
   The wrap is the single grid item for the track column, so the column
   alignment stays intact. */
.song-grid .track-head-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}
.song-grid .track-head-wrap .track-head {
    min-height: 28px;
    width: 100%;
}
.track-ms {
    display: flex;
    gap: 3px;
    padding: 0 2px 2px;
}
.track-ms-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 24px;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid color-mix(in srgb, var(--fg-dim) 40%, transparent);
    border-radius: 5px;
    background: transparent;
    color: var(--fg-dim);
    cursor: pointer;
}
.track-mute[data-on="true"] {
    background: color-mix(in srgb, var(--red-bright) 30%, var(--bg1));
    border-color: var(--red-bright);
    color: var(--red-bright);
}
.track-solo[data-on="true"] {
    background: color-mix(in srgb, var(--yellow) 30%, var(--bg1));
    border-color: var(--yellow);
    color: var(--yellow);
}

/* "＋ track" / "＋ scene": real text labels, comfortable tap height */
.grid-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    height: auto;
    padding: 0 8px;
    font-size: 12px;
    white-space: nowrap;
}

/* Chain add chip: text label instead of a bare glyph */
.chain-add { white-space: nowrap; }

/* Always-visible copy/delete affordances on filled cells. */
.grid-cell .cell-act {
    position: absolute;
    bottom: 2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    color: var(--fg-dim);
}
.grid-cell .cell-copy { left: 2px; }
.grid-cell .cell-del { right: 2px; color: var(--red-bright); }
.grid-cell[data-state="playing"] .cell-act { color: var(--bg); }