/* Design D, merged (design-merged.js): one centred column. The title (click to rename) and the download; the video with
   play on it, or the mix with play under it; then every sound as one line of controls with its picture under it. */
.rm { container: rm / inline-size; width: 100%; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 32px; padding: clamp(8px, 2vh, 20px) 0 56px; }
.rm-head { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
/* the switch and the download on one line under the title, the same height (the switch, the title you rename and the
   big play on the video are in result-kit.css, shared with the timeline design and the homepage) */
.rm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }

/* the picture and play: no clock, the time shows where you point */
.rm-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* the file's title and its picture glide here from the splitting screen (view transitions) */
.rm-head .rk-title { view-transition-name: title; }
.rm-mix { width: 100%; height: 92px; view-transition-name: wave; }
.rm-mix.thin { height: 40px; margin-top: -6px; }
.rm-play { width: 60px; height: 60px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rm-play:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.rm-play.on { background: var(--ink); }
.rm-play svg { width: 22px; height: 22px; }
.rm-video { --max-h: min(70vh, 560px); view-transition-name: video; }   /* a landscape video fills the column, in line with the pictures; it glides here from the splitting screen */

/* a sound: its controls on one line (icon, name, headphones, volume), its picture under them. As on the homepage: the icon
   sits on a drop of its colour (pieces/drop.js) that flows gently and lights up and grows with what you hear of it; grey is
   what you don't hear now, crossed out is what you turned off, the drop stays, grey. Pointing at a sound changes nothing */
.rm-list { display: flex; flex-direction: column; gap: 20px; }
.rm-item { display: flex; flex-direction: column; gap: 4px; }
.rm-line { display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; }
.rm-dot { --live: 0; position: relative; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; }
.rm-icon, .rm-icon:hover { width: 36px; height: 36px; margin-left: -5px; }
.rm-icon .drop { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; overflow: visible; pointer-events: none; }
.rm-icon .drop path { fill: color-mix(in srgb, var(--c) calc(18% + var(--live, 0) * 34%), transparent); }
.rm-glyph { position: relative; width: 25px; height: 25px; color: var(--c); opacity: 0; transition: opacity .25s var(--ease), color .25s var(--ease); }
.rm-glyph.ready { opacity: 1; }
.rm-glyph svg { width: 100%; height: 100%; display: block; }
.rm-glyph svg path { fill: currentColor; }
.rm-item .rm-icon[aria-checked] .rm-glyph.ready { color: var(--c); opacity: 1; }
.rm-item.silent .rm-icon[aria-checked] .rm-glyph.ready { color: var(--ink-3); opacity: .8; }
.rm-item.silent .rm-icon .drop path { fill: color-mix(in srgb, var(--ink-3) 16%, transparent); }
.rm-dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.rm-name { flex: 0 1 var(--name, auto); min-width: 0; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s var(--ease); }
.rm-item .rm-name { color: var(--ink); padding: 0 3px; margin: 0 -3px; }        /* room inside it for the line through */
.rm-item.silent .rm-name { color: var(--ink-3); }
/* off: a line drawn through the name from the left */
.rm-word { position: relative; }
.rm-word::after { content: ""; position: absolute; left: -3px; right: -3px; top: 54%; height: 1.5px; border-radius: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform .32s var(--ease); }
.rm-item.is-off .rm-word::after { transform: scaleX(1); }
.rm-solo { margin-left: -2px; }
/* the volume runs to the right edge, in line with the picture; its percentage sits just before it, so showing and hiding
   it moves nothing */
.rm-slide { order: 2; flex: 1 1 auto; min-width: 120px; }
.rm-val { order: 1; flex: none; width: 44px; margin-left: auto; text-align: right; font: 500 11.5px/1 var(--f-small); font-variant-numeric: tabular-nums; color: var(--ink-2); user-select: none; opacity: 0; transition: opacity .15s; }
.rm-item:is(.changed, .adjusting, :hover, :has(:focus-visible)) .rm-val, .rm-item[data-state="off"] .rm-val { opacity: 1; }
.rm-pic { position: relative; height: 48px; cursor: pointer; touch-action: none; }
.rm-pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* off: the picture faint in its colour (drawn by the script) and the volume grey; silent while another plays alone: the
   volume quieter, the picture fainter still */
.rm-item[data-state="off"] input.rk-level { --fill: var(--ink-3); }
.rm-item[data-state="ghost"] .rm-slide { opacity: .55; }

@container rm (max-width: 520px) {
  .rm { gap: 24px; }
  .rm-mix { height: 72px; }
  .rm-glyph { width: 21px; height: 21px; }
  .rm-slide { min-width: 72px; }                                  /* the volume stays on the name's line, as on a computer */
  .rm-pic { height: 36px; }
}
@media (any-pointer: coarse) {
  .rm-icon, .rm-icon:hover { width: 44px; height: 44px; margin-left: -9px; }
}