/* Design E, one timeline (design-timeline.js, A6 on lab/designs.html): the recording and its sounds on one time axis, the
   player on the left of the recording's row the way each sound's controls sit on the left of its row. In the open: no
   sheets or table lines, room between the sounds. The box is its own container, so a narrow result is the phone layout.
   The fader that lights up, the switch, the title you rename and the big play on the video are in result-kit.css. */
.tl { container: tl / inline-size; width: 100%; display: flex; flex-direction: column; padding: clamp(8px, 2vh, 20px) 0 56px; color: var(--ink); }

/* the title, then how the file is split and the download, on one line */
.tl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 40px; }
.tl-top .rk-title { font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -.02em; view-transition-name: title; }   /* it glides here from the splitting screen */
.tl-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* one grid for every row: the controls on the left, as wide as the app's (MixView.swift: 248, 32 beside them), the
   pictures on the right */
.tl-grid { display: grid; grid-template-columns: 248px minmax(0, 1fr); column-gap: 32px; }
/* the video the whole width, at its own shape on a soft fill of itself (the app's VideoFrame) */
.tl-film { position: relative; display: grid; place-items: center; height: clamp(220px, 44vh, 420px); margin-bottom: 28px; border-radius: 16px; overflow: hidden; background: #000; isolation: isolate; }
.tl-film::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--poster, none) center / cover; filter: blur(32px) saturate(1.15) brightness(.5); }
.tl-video { --max-h: clamp(220px, 44vh, 420px); view-transition-name: video; border-radius: 0; }
.tl-rule { height: 24px; }
.tl-ruler { position: relative; cursor: pointer; touch-action: none; }
.tl-ruler span { position: absolute; top: 50%; transform: translate(-50%, -50%); font: 500 11px/1 var(--f-small); color: var(--ink-3); pointer-events: none; transition: opacity .12s; }
/* where you are: a white bubble on the line, over the times (the app's); moved by a transform (design-timeline.js), so it
   glides on the GPU instead of the page being laid out again every frame */
.tl-bubble { position: absolute; left: 0; top: 50%; z-index: 1; padding: 4px 7px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 11px/1 var(--f-small); font-variant-numeric: tabular-nums; transform: translate(-50%, -50%); will-change: transform; pointer-events: none; white-space: nowrap; }
.tl-ruler span:first-child { transform: translate(0, -50%); }
.tl-ruler span:last-of-type { transform: translate(-100%, -50%); }   /* the last time ends with the pictures */

/* the recording's row: as the app's player (MixView.swift playerControls), back 10, play and forward 10 in the middle
   of its column; its picture is the whole mix */
.tl-rec { padding: 8px 0 26px; }
.tl-player { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; }
.tl-line { display: flex; align-items: center; gap: 14px; }
.tl-mix { height: 104px; view-transition-name: wave; }
.tl-mix canvas, .tl-pic canvas { position: absolute; left: 0; top: 8px; width: 100%; height: calc(100% - 16px); display: block; }

/* the player's buttons (also in the floating player, outside the result), in the app's sizes (Design.swift): play 48, a
   round button 40 (44 to a finger) with its symbol about 19 and white, a white circle when it is on */
.tl-play { flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); cursor: pointer; transition: transform .2s var(--settle), background .2s; }
.tl-play svg { width: 27px; height: 27px; fill: currentColor; }
.tl-play:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.tl-play:active { transform: scale(.96); }
.tl-btn { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.tl-btn svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tl-btn svg text { fill: currentColor; stroke: none; font: 650 6.4px/1 var(--f-sans); text-anchor: middle; }
.tl-btn:hover { background: var(--hover); color: var(--ink); }
.tl-btn:active { transform: scale(.96); }
.tl-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (pointer: coarse) { .tl-btn { width: 44px; height: 44px; } }
:is(.tl-play, .tl-btn):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tl-time { font: 500 13px/1 var(--f-small); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; user-select: none; }
.tl-time i { font-style: normal; color: var(--ink-3); }

/* a sound: its icon, name and volume over its fader on the left, its picture on the right */
.tl-rows { display: flex; flex-direction: column; gap: 6px; transition: opacity .25s var(--ease); }
.tl.hearing-original .tl-rows { opacity: .55; }
.tl-row { padding: 12px 0; }
.tl-head { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.tl-id { display: flex; align-items: center; gap: 8px; height: 36px; min-width: 0; }
.tl-fader { width: 100%; }
.tl-val { flex: none; margin-left: 4px; min-width: 38px; text-align: right; font: 500 13px/1 var(--f-small); font-variant-numeric: tabular-nums; color: var(--ink-3); user-select: none; }
/* hear only it: the app's small round button on a sound's row (30, its symbol 15 points), pushed to the end of the
   name's line before the volume (12 from it, as the app); a white circle while it is the one you hear */
.tl-alone { position: relative; flex: none; width: 30px; height: 30px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ink); cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); }
.tl-alone svg { width: 22.5px; height: 22.5px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tl-alone:hover { background: var(--hover); }
.tl-alone[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tl-alone:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tl-pic { position: relative; height: 86px; cursor: pointer; touch-action: none; }
/* its icon on a drop of its colour (pieces/drop.js) that flows gently and lights up and grows with what you hear of it */
.tl-icon { --live: 0; position: relative; flex: none; width: 36px; height: 36px; margin-left: -5px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; }
.tl-icon:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.tl-icon .drop { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; overflow: visible; pointer-events: none; }
.tl-icon .drop path { fill: color-mix(in srgb, var(--c) calc(18% + var(--live) * 34%), transparent); }
/* the app's 15-point symbol (the drawing is 24 of its 28) on its 25-point drop */
.tl-glyph { position: relative; width: 17.5px; height: 17.5px; color: var(--c); opacity: 0; transition: color .25s var(--ease), opacity .25s var(--ease); }
.tl-glyph.ready { opacity: 1; }
.tl-glyph svg { width: 100%; height: 100%; display: block; }
.tl-glyph svg path { fill: currentColor; }
.tl-name { min-width: 0; padding: 0 3px; margin: 0 -3px; font-size: 15px; font-weight: 500; letter-spacing: -.006em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); transition: color .25s var(--ease); }
/* grey is what you don't hear now; turned off, a line is drawn through the name from the left */
.tl-row.silent .tl-glyph.ready { color: var(--ink-3); opacity: .8; }
.tl-row.silent .tl-icon .drop path { fill: color-mix(in srgb, var(--ink-3) 16%, transparent); }
.tl-row.silent .tl-name { color: var(--ink-3); }
.tl-word { position: relative; }
.tl-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); }
.tl-row.is-off .tl-word::after { transform: scaleX(1); }

/* the playhead: one line through every picture, always (the app's) */

/* the small player that floats at the bottom while the recording's row is out of view; a message moves up over it */
.tl-float { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 2px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--sheet) 90%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translate(-50%, calc(100% + 30px)); opacity: 0; pointer-events: none; transition: transform .5s var(--settle), opacity .3s var(--ease); }
.tl-float.in { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.tl-float .tl-play { width: 44px; height: 44px; }
.tl-float .tl-time { margin-left: 8px; }
body.player-floats .toast { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 74px); }

/* a phone: one column. The player, then the times, then the recording's picture, so the ruler sits on what it measures;
   each sound on one line as the app has it on a phone (its icon and name, its fader, hear it alone, its volume), its
   picture under it */
@container tl (max-width: 599px) {
  .tl-top { margin-bottom: 28px; }
  .tl-top .rk-title { font-size: 32px; }
  .tl-acts { gap: 8px; }
  .tl-grid { grid-template-columns: minmax(0, 1fr); }
  .tl-corner { display: none; }
  .tl-film { margin-bottom: 22px; }
  .tl-board { display: flex; flex-direction: column; }
  :is(.tl-rule, .tl-rec) { display: contents; }
  .tl-film { height: auto; aspect-ratio: 16 / 9; }
  .tl-player { order: 1; flex-direction: row; justify-content: center; margin-bottom: 14px; }
  .tl-ruler { order: 2; height: 22px; }
  .tl-ruler span:nth-of-type(even) { display: none; }
  .tl-mix { order: 3; height: 78px; }
  .tl-rows { order: 4; margin-top: 18px; gap: 4px; }
  .tl-row { padding: 10px 0; row-gap: 6px; }
  .tl-head { display: grid; grid-template-columns: auto 100px minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; }   /* every name as wide as the widest, as the app */
  .tl-id { display: contents; }
  .tl-id > .tl-icon { grid-column: 1; grid-row: 1; } .tl-id > .tl-name { grid-column: 2; grid-row: 1; }
  .tl-fader { grid-column: 3; grid-row: 1; }
  .tl-id > .tl-alone { grid-column: 4; grid-row: 1; margin-left: 0; } .tl-id > .tl-val { grid-column: 5; grid-row: 1; }
  .tl-pic { height: 44px; }
}
@media (any-pointer: coarse) {
  .tl-icon { width: 44px; height: 44px; margin-left: -9px; }
  /* the app's on a phone: a 32 circle, touched in 44 */
  .tl-alone { width: 32px; height: 32px; }
  .tl-alone::after { content: ""; position: absolute; inset: -6px; }
}