/* What the result designs share (result-kit.js): the download, the video, how the file is split, the title you rename,
   the clock, the mix you move through, Mute and Solo, the volume, and the way the result arrives. Each design places
   them its own way. */

/* the recording's name */
.rk-title { min-width: 0; font: 400 clamp(34px, 5.2vw, 60px)/1.02 var(--f-serif); letter-spacing: -.022em; overflow-wrap: anywhere; text-wrap: balance; }

/* the download: one capsule; while one sound plays alone it names that sound */
.rk-download { flex: none; max-width: 100%; }
.rk-download span { overflow: hidden; text-overflow: ellipsis; }

/* the video at its own shape; a tall phone video keeps a sensible height. Its picture fades in once it has a frame */
.rk-video { --max-h: min(62vh, 560px); position: relative; width: min(100%, calc(var(--max-h) * var(--vw) / var(--vh))); aspect-ratio: var(--vw) / var(--vh); margin-inline: auto; border-radius: var(--r-m); overflow: hidden; background: color-mix(in srgb, var(--ink) 7%, var(--paper)); cursor: pointer; }
.rk-video video { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .4s var(--ease); }
.rk-video video.ready { opacity: 1; }

/* the big play on the video: shown while it is paused, and while you point at it when it plays */
.rm-big { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(12, 11, 10, .5); color: #FBFAF7; display: grid; place-items: center; pointer-events: none; transition: opacity .25s var(--ease), transform .3s var(--ease); }
.rm-big svg { width: 26px; height: 26px; fill: currentColor; }
.rm-big .p { transform: translateX(1.5px); }
.rm-big .s, .rk-video.playing .rm-big .p { display: none; }
.rk-video.playing .rm-big .s { display: inline; }
.rk-video.playing .rm-big { opacity: 0; transform: scale(.88); }
@media (hover: hover) { .rk-video.playing:hover .rm-big { opacity: 1; transform: none; } }

/* how the file is split: Music (its instruments) or Voices & sounds */
.rm-part { position: relative; isolation: isolate; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--paper); }
/* the highlight under the chosen part slides when you pick the other */
.rm-part::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: var(--x, 3px); width: var(--w, 0px); border-radius: var(--r-pill); background: var(--ink); transition: left .32s var(--ease), width .32s var(--ease); }
.rm-part.still::before { transition: none; }
.rm-part button { height: 34px; padding: 0 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: 500 13.5px/1 var(--f-sans); cursor: pointer; transition: color .25s var(--ease); }
.rm-part button:hover { color: var(--ink); }
.rm-part button[aria-pressed="true"] { color: var(--paper); cursor: default; }
.rm-part button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the title you can rename: a pencil shows where you point */
.rk-rename { position: relative; max-width: calc(100% - 64px); cursor: text; border-radius: 10px; outline: none; transition: background .15s; }   /* room for the pencil */
.rk-rename:hover, .rk-rename:focus { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.rk-rename:focus-visible, .rk-rename[contenteditable="plaintext-only"] { box-shadow: 0 0 0 2px var(--ink); }
@media (hover: hover) {
  .rk-rename::after { content: ""; position: absolute; top: 50%; right: -30px; width: 18px; height: 18px; margin-top: -9px; opacity: 0; transition: opacity .15s; background: var(--ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5l4 4L8 20H4v-4z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 4.5l4 4L8 20H4v-4z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .rk-rename:hover::after { opacity: 1; }
}

/* time: where you are, and how long the file is */
.rk-now, .rk-end { font: 500 13px/1 var(--f-small); font-variant-numeric: tabular-nums; white-space: nowrap; user-select: none; }
.rk-end { color: var(--ink-3); }

/* the mix you move through: a playhead, a line where you point and the time above it */
.rk-mix { position: relative; min-width: 0; cursor: pointer; touch-action: none; }
.rk-mix canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rk-mix:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
.rk-ph { position: absolute; top: 0; bottom: 0; left: -0.75px; width: 1.5px; background: var(--ink); pointer-events: none; z-index: 2; will-change: transform; }
.rk-ph.hover { width: 1px; background: var(--ink-3); opacity: 0; transition: opacity .15s; }
.rk-tip { position: absolute; top: -26px; transform: translateX(-50%); padding: 4px 8px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font: 500 11px/1 var(--f-small); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; z-index: 3; }

/* Mute and Solo: the same size, quiet until used. Pressed, a button fills and its icon changes (Mute strikes the speaker
   through, Solo, the stronger one, fills the headphones in). Silent only because another sound plays alone: a faint
   struck speaker, no fill */
.rk-btn { --b: 32px; flex: none; width: var(--b); height: var(--b); padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, opacity .2s; }
.rk-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rk-btn svg .solid { fill: currentColor; }
.rk-btn:hover { color: var(--ink); background: var(--hover); }
.rk-btn:active { background: var(--press); }
.rk-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.rk-off[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.rk-off.ghost { color: var(--ink-3); opacity: .7; }
.rk-solo[aria-pressed="true"] { color: var(--sheet); background: var(--ink); }
.rk-solo[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--ink) 86%, var(--sheet)); }

/* the volume: 0 to 200 %, as recorded is the mark in the middle; the line fills from that mark to the handle, so a sound
   left as recorded shows no fill at all */
.rk-slide { position: relative; isolation: isolate; min-width: 0; display: flex; align-items: center; justify-content: center; }
.rk-tick { position: absolute; left: 50%; top: 50%; z-index: -1; width: 1px; height: 11px; transform: translate(-50%, -50%); background: var(--ink-3); opacity: .7; pointer-events: none; }
input.rk-level { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; --fill: var(--ink-2); --dir: 90deg; }   /* a finger moving up and down still scrolls the page */
input.rk-level::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(var(--dir), var(--line-2) var(--from, 50%), var(--fill) var(--from, 50%) var(--to, 50%), var(--line-2) var(--to, 50%)); }
input.rk-level::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: var(--sheet); border: 1.5px solid var(--ink); transition: transform .15s var(--ease), box-shadow .15s; }
input.rk-level:hover::-webkit-slider-thumb { transform: scale(1.1); }
input.rk-level:active::-webkit-slider-thumb { transform: scale(1.2); }
input.rk-level::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(var(--dir), var(--line-2) var(--from, 50%), var(--fill) var(--from, 50%) var(--to, 50%), var(--line-2) var(--to, 50%)); }
input.rk-level::-moz-range-progress { background: transparent; }
input.rk-level::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--sheet); border: 1.5px solid var(--ink); }
input.rk-level:focus-visible { outline: none; }
input.rk-level:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--ink); }
input.rk-level:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--ink); }
/* standing up (a fader): the same, bottom to top */
input.rk-level.vertical { writing-mode: vertical-lr; direction: rtl; width: 28px; height: 100%; touch-action: pan-x; --dir: 0deg; }
input.rk-level.vertical::-webkit-slider-runnable-track { width: 3px; height: auto; }
input.rk-level.vertical::-webkit-slider-thumb { margin-top: 0; margin-left: -5.5px; }
.rk-slide.vertical .rk-tick { width: 11px; height: 1px; }

/* the volume as a fader that lights up (result-kit.js lightFader), 22 px (Sep picked it on lab/home-next.html): a grey track; the sound's own colour fills it from the
   left with what you hear of the sound, never past the knob, so turned down it lights up less and off it stays grey. The
   knob is the volume (as recorded at the mark in the middle); it grows a little while you point at it or hold it, and the
   volume shows over it while you move it. The light and the knob move by transform, so it stays smooth */
.rk-fader { position: relative; flex: none; height: 22px; border-radius: 11px; touch-action: none; cursor: ew-resize; outline: none; }
.rk-fader-track { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.rk-fader-light { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--c); opacity: .92; transform-origin: left center; transform: scaleX(0); will-change: transform; transition: opacity .25s var(--ease); }
.rk-fader-mark { position: absolute; top: 6.5px; bottom: 6.5px; left: 50%; width: 1.5px; margin-left: -.75px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.rk-fader-knob { position: absolute; left: 0; top: 50%; width: 5px; height: 14px; margin: -7px 0 0 -2.5px; pointer-events: none; border-radius: 3px; background: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 3px 10px -3px rgba(0, 0, 0, .4); will-change: transform;
  transition: transform .22s var(--settle), height .15s var(--ease), margin .15s var(--ease), background .2s var(--ease); }
.rk-fader:is(:hover, .held) .rk-fader-knob { height: 17px; margin-top: -8.5px; }
.rk-fader.held .rk-fader-knob { transition: height .15s var(--ease), margin .15s var(--ease); }   /* with the finger, exactly */
.rk-fader-tip { position: absolute; left: 0; bottom: calc(100% + 9px); padding: 5px 8px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font: 500 11px/1 var(--f-small); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s var(--ease); }
.rk-fader:is(.held, :focus-visible) .rk-fader-tip { opacity: 1; }
.rk-fader:focus-visible .rk-fader-track { box-shadow: 0 0 0 2px var(--ink); }
.silent .rk-fader-light { opacity: 0; }
.silent .rk-fader-knob { background: var(--ink-3); }

/* the result arrives as one, once its pictures are drawn */
.rk-arrive { opacity: 0; transform: translateY(10px); }
.rk-arrive.in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .7s var(--ease); }

/* a finger: every button and handle at least 44 px */
@media (any-pointer: coarse) {
  .rk-btn { --b: 44px; }
  input.rk-level { height: 44px; }
  .rk-fader { height: 26px; border-radius: 13px; }
  .rk-fader-mark { top: 8.5px; bottom: 8.5px; }
  input.rk-level.vertical { width: 44px; height: 100%; }
  input.rk-level::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8.5px; }
  input.rk-level.vertical::-webkit-slider-thumb { margin-top: 0; margin-left: -8.5px; }
}
@media (forced-colors: active) {
  .rk-btn[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}