/* Player timeline (src/timeline.js). Theme through the custom properties
   below; everything else is scoped under .tl. */
/* Read by the takes lane (px) for its height. */
@property --tl-tk-img { syntax: '<length>'; inherits: true; initial-value: 38px; }
.tl {
  /* Chrome only (style.css --ui-*), never the film's yellow. Current
     position: playhead, knob, current shot. Played: progress and the heard
     part of the waveform. UI: toggles, focus, the takes playing. */
  --tl-accent: var(--ui-accent-strong, #f5f5f5);
  --tl-played: var(--ui-accent, #d8d8d8);
  --tl-ui: var(--ui-accent, #d8d8d8);
  --tl-ui-ink: var(--ui-ink, #111);
  --tl-ink: #0b0b0c;
  --tl-clip: #333;
  --tl-clip-hover: #555;
  --tl-wave: #4a4a4a;
  /* Music lane: peaks and RMS body, not played / played. */
  --tl-wave-peak: #3a3a3a;
  --tl-wave-body: #5a5a5a;
  --tl-played-peak: #8c8c8c;
  --tl-grid: #ffffff24;
  --tl-beat: #ffffff70;
  --tl-bar: var(--ui-accent, #d8d8d8);
  --tl-barline: #ffffff26;
  --tl-tick: #6a6a6a;
  --tl-text: #f3efe6;
  --tl-muted: #8a8a8a;
  --tl-tip-bg: #1c1c1c;
  --tl-gutter: 78px;
  /* Editor view rows, on a 6 px rhythm. */
  --tl-gap: 6px;
  --tl-ruler-h: 20px;
  --tl-name: 16px;
  --tl-shot: 60px;
  --tl-music-h: 44px;
  --tl-sfx-h: 32px;
  /* Alternate takes lane: a row is half a shot clip (a compact name line,
     half the image); rows shown by default. */
  --tl-tk-name: 13px;
  --tl-tk-img: calc(var(--tl-shot) / 2);
  --tl-tk-rows: 2;
  /* The takes zone: its own band under the shots, rows inset by --tl-tk-pad. */
  --tl-tk-band: #161618;
  --tl-tk-edge: #2e2e31;
  --tl-tk-pad: 6px;
  --tl-tk-gap: 10px;
  --tl-takes-h: 0px;
  position: relative;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.tl:focus, .tl:focus-visible { outline: none; }
.tl-scroll { position: relative; overflow: hidden; }
.tl-body { position: relative; }
.tl-clips { position: relative; display: flex; gap: 2px; }
.tl-clip { position: relative; flex-basis: 0; min-width: 0; overflow: hidden; background: var(--tl-clip); border-radius: 2px; }
.tl-clip.hover { background: var(--tl-clip-hover); }
.tl-fill { position: absolute; inset: 0; background: var(--tl-played); transform-origin: left; transform: scaleX(0); }
.tl-gutter, .tl-ruler, .tl-wave, .tl-sfx, .tl-strip, .tl-label, .tl-chip { display: none; }
.tl-wave canvas, .tl-ruler canvas { position: absolute; left: 0; top: 0; }
.tl-wave-lit { position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; }
.tl-head { position: absolute; left: 0; top: 0; pointer-events: none; }
.tl-tip { position: absolute; bottom: calc(100% + 12px); transform: translateX(-50%); display: none; flex-direction: column; gap: 4px; padding: 6px 10px 7px; border-radius: 6px; background: var(--tl-tip-bg); color: #eee; font-size: 12px; letter-spacing: 0.06em; white-space: nowrap; pointer-events: none; }
.tl:hover .tl-tip:not(.off) { display: flex; }
.tl-tip img { display: none; width: 192px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: #111; margin-bottom: 2px; }
.tl-tip.has-img img { display: block; }
.tl-tip-frame { display: none; width: 192px; aspect-ratio: 16 / 9; border-radius: 3px; background: #111 no-repeat; margin-bottom: 2px; }
.tl.has-frames .tl-tip-frame { display: block; }
.tl-film { display: none; position: absolute; left: 0; top: 0; pointer-events: none; }
.tl-tip-meta { color: var(--tl-muted); font-size: 10px; white-space: pre; }
.tl-tip-meta:empty { display: none; }

/* Light: a viewer bar. Chapters fill up; a knob shows on hover. */
.tl[data-mode='light'] .tl-scroll { padding: 10px 0; overflow: visible; }
.tl[data-mode='light'] .tl-clips { height: 9px; gap: 4px; transform: scaleY(0.56); transition: transform 0.12s; }
.tl[data-mode='light']:hover .tl-clips { transform: none; }
.tl[data-mode='light'] .tl-head { top: 50%; }
.tl[data-mode='light'] .tl-head::before { content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--tl-accent); transform: scale(0); transition: transform 0.12s; }
.tl[data-mode='light']:hover .tl-head::before { transform: scale(1); }

/* Expanded: an editor view. Track headers on the left, lanes on the right
   (zoomable): ruler, shots (name over image), music with the beat grid,
   sound effects. Headers sit on their lane's first line. */
.tl[data-mode='expanded'] { display: grid; grid-template-columns: var(--tl-gutter) 1fr; }
.tl[data-mode='expanded'] .tl-gutter { display: block; padding-top: var(--tl-gap); }
.tl-gh { display: flex; align-items: center; margin-top: var(--tl-gap); padding-right: 10px; color: var(--tl-muted); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.tl-gh-ruler { height: var(--tl-ruler-h); margin-top: 0; gap: 3px; }
.tl-gh-shots { display: grid; grid-template-rows: var(--tl-name) 1fr; align-items: center; justify-items: start; height: calc(var(--tl-name) + var(--tl-shot)); }
.tl-gh-music { height: var(--tl-music-h); }
.tl-gh-sfx { height: var(--tl-sfx-h); }
.tl-zoom, .tl-toggle { font: inherit; color: var(--tl-muted); background: none; border: 1px solid #333; border-radius: 3px; cursor: pointer; }
.tl-zoom { flex: none; width: 18px; height: 16px; padding: 0; line-height: 14px; font-size: 11px; }
.tl-zoom-fit { width: auto; padding: 0 4px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.tl-zoom:disabled { opacity: 0.35; cursor: default; }
.tl-toggle { height: 16px; padding: 0 5px; line-height: 14px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.tl-toggle[aria-pressed='true'] { color: var(--tl-ui); border-color: var(--tl-ui); }
.tl-toggle[aria-pressed]::before { content: ''; display: inline-block; box-sizing: border-box; width: 9px; height: 9px; margin: 0 4px 0 -1px; vertical-align: -1px; border: 1.5px solid #9a9a9a; border-radius: 2px; }
.tl-toggle[aria-pressed='true']::before { background: var(--tl-ui) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") center / 100% no-repeat; border-color: var(--tl-ui); }
.tl-zoom:enabled:hover, .tl-toggle:hover { color: var(--tl-text); border-color: #555; }
.tl-zoom:focus-visible, .tl-toggle:focus-visible { outline: 1px solid var(--tl-ui); outline-offset: 1px; }

.tl[data-mode='expanded'] .tl-scroll { overflow-x: auto; overscroll-behavior: none; padding: var(--tl-gap) 0; scrollbar-width: thin; scrollbar-color: #444 transparent; }
/* Nothing scrolls past the film's end (an out point's tab there would add
   a few px, until it's laid out: a restored scroll wouldn't fit). */
.tl[data-mode='expanded'] .tl-body { overflow-x: clip; }
.tl[data-mode='expanded'] .tl-ruler { display: block; position: relative; height: var(--tl-ruler-h); }
/* Shots: a name line (lightly tinted, so cuts show) over the image. */
/* Scenes (and their take blocks, laid out on them) stand apart. */
.tl[data-mode='expanded'] .tl-clips { height: calc(var(--tl-name) + var(--tl-shot)); margin-top: var(--tl-gap); gap: 6px; }
.tl[data-mode='expanded'] .tl-clip { border-radius: 3px; background: none; }
.tl[data-mode='expanded'] .tl-clip::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#ffffff0a var(--tl-name), #1a1a1a 0); pointer-events: none; }
.tl[data-mode='expanded'] .tl-clip.hover::before { background: linear-gradient(#ffffff14 var(--tl-name), #1a1a1a 0); }
.tl[data-mode='expanded'] .tl-clip.on::before { background: linear-gradient(#ffffff1f var(--tl-name), #1a1a1a 0); }
.tl[data-mode='expanded'] .tl-clip::after { content: ''; position: absolute; inset: var(--tl-name) 0 0; border: 1px solid #ffffff14; border-radius: 0 0 3px 3px; pointer-events: none; }
.tl[data-mode='expanded'] .tl-clip.on::after { border: 2px solid var(--tl-accent); }
.tl[data-mode='expanded'] .tl-fill { display: none; }
.tl[data-mode='expanded'] .tl-strip { display: block; position: absolute; inset: var(--tl-name) 0 0; background: left center / auto 100% no-repeat; opacity: 0.8; transition: opacity 0.12s; }
.tl[data-mode='expanded'] .tl-clip.hover .tl-strip { opacity: 1; }
.tl[data-mode='expanded'] .tl-label { display: block; position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: var(--tl-name); padding: 0 6px; line-height: var(--tl-name); color: #9a9a9a; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl[data-mode='expanded'] .tl-clip.hover .tl-label { color: var(--tl-text); }
.tl[data-mode='expanded'] .tl-clip.on .tl-label { color: var(--tl-accent); }
.tl[data-mode='expanded'] .tl-clip.narrow .tl-label { display: none; }
/* Alternate takes (editor view only): a zone of its own under the shots (a
   lighter band across gutter and lane, edged, set apart by a wider gap), one
   block per scene with alternatives, a row per take it could play instead
   (its filmstrip, same size and times as the shots, name pinned left); what
   plays is the shots lane itself. Folded: a line of per-scene marks. Shots
   playing a non-default take get a rule on top and the take's name. */
.tl[data-mode='expanded'] .tl-clip.alt { box-shadow: inset 0 2px 0 var(--tl-ui); }
.tl-clip-take { margin-left: 6px; padding: 0 4px; border-radius: 2px; font-size: 9px; color: var(--tl-ui-ink); background: var(--tl-ui); }
.tl-reset { color: var(--tl-ui); border-color: color-mix(in srgb, var(--ui-accent) 40%, transparent); }
/* Cuts (?cut=): a join mark on the left edge of each shot a join opens
   (editor view only). With a join menu it's a button, its hit area over the
   gap before the shot, and an audio transition other than a plain cut is
   named on the image. */
.tl-join { display: none; }
.tl[data-mode='expanded'] .tl-join { display: block; position: absolute; z-index: 5; left: 0; top: 0; bottom: 0; width: 2px; padding: 0; border: 0; background: var(--tl-join, #ff7a45); }
.tl[data-mode='expanded'] button.tl-join { width: 8px; background: none; cursor: pointer; }
.tl[data-mode='expanded'] button.tl-join::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--tl-join, #ff7a45); }
.tl[data-mode='expanded'] button.tl-join:hover::before, .tl[data-mode='expanded'] button.tl-join:focus-visible::before { width: 4px; }
.tl[data-mode='expanded'] button.tl-join:focus-visible { outline: none; }
.tl[data-mode='expanded'] button.tl-join.fx::after { content: attr(data-fx); position: absolute; left: 2px; bottom: 2px; padding: 0 4px; border-radius: 0 2px 2px 0; font-size: 9px; line-height: 14px; letter-spacing: 0.04em; white-space: nowrap; color: #111; background: var(--tl-join, #ff7a45); pointer-events: none; }
.tl-lane { display: none; }
.tl[data-mode='expanded'] .tl-lane, .tl-gh-takes { height: calc(var(--tl-takes-h) + 2 * var(--tl-tk-pad) + 2px); margin-top: var(--tl-tk-gap); background: var(--tl-tk-band); border-block: 1px solid var(--tl-tk-edge); }
.tl[data-mode='expanded'] .tl-lane { display: block; position: relative; }
.tl-gh-takes { flex-direction: column; align-items: flex-start; gap: 4px; margin-left: 0; padding: var(--tl-tk-pad) 3px var(--tl-tk-pad) 10px; color: #b4b4b4; box-shadow: inset 2px 0 0 var(--tl-tk-edge); }
.tl-fold { display: flex; align-items: center; gap: 3px; min-height: 16px; margin-left: -3px; padding: 0 0 0 3px; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; border-radius: 3px; cursor: pointer; }
/* 'Alternate takes' on two lines in the gutter; max-* size the chevron in
   hosts that size every svg (the player's #controls svg). */
.tl-fold span { letter-spacing: 0.04em; line-height: 11px; text-align: left; }
.tl-fold svg { flex: none; align-self: flex-start; margin-top: 1.5px; width: 8px; height: 8px; max-width: 8px; max-height: 8px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform 0.12s; }
.tl.takes-folded .tl-fold svg { transform: rotate(-90deg); }
.tl-fold:hover { color: var(--tl-text); }
.tl-fold:focus { outline: none; }
.tl-fold:focus-visible { outline: 1px solid var(--tl-ui); }
.tl-tk-scene { position: absolute; top: var(--tl-tk-pad); bottom: var(--tl-tk-pad); display: flex; flex-direction: column; gap: 2px; padding: 1px 0; overflow: hidden auto; overscroll-behavior: none; scrollbar-width: none; cursor: default; }
/* Rows are what could play instead (what plays is the shots lane): they
   recede (grey, faded filmstrip, dark name bar, text still readable); hover
   previews one in full colour with a thin white outline, focus with the
   accent outline. Rows are rounder than shot clips and edged. */
.tl-tk-row { position: relative; flex: none; height: calc(var(--tl-tk-name) + var(--tl-tk-img)); margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; background: linear-gradient(#202023 var(--tl-tk-name), #0e0e10 0); border: 0; border-radius: 5px; overflow: hidden; cursor: pointer; transition: background-color 0.12s; }
.tl-tk-row:hover, .tl-tk-row:focus-visible { background: linear-gradient(#2c2c30 var(--tl-tk-name), #141414 0); }
.tl-tk-row.sep { margin-top: 6px; }
.tl-tk-row canvas { position: absolute; left: 0; top: var(--tl-tk-name); opacity: 0.3; filter: grayscale(1); transition: opacity 0.12s, filter 0.12s; pointer-events: none; border-radius: 0 0 5px 5px; }
.tl-tk-row:hover canvas, .tl-tk-row:focus-visible canvas { opacity: 1; filter: none; }
.tl-tk-row::after { content: ''; position: absolute; inset: 0; border: 1px solid #ffffff12; border-radius: 5px; pointer-events: none; }
.tl-tk-row:hover::after { border-color: #fff; }
.tl-tk-row:focus { outline: none; }
.tl-tk-row:focus-visible::after { border: 2px solid var(--tl-ui); }
.tl-tk-label { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; height: var(--tl-tk-name); max-width: var(--w, 100%); padding: 0 5px; box-sizing: border-box; color: #8f8f8f; font-size: 9px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; transform: translateX(var(--dx, 0px)); pointer-events: none; }
.tl-tk-row:hover .tl-tk-label, .tl-tk-row:focus-visible .tl-tk-label { color: var(--tl-text); }
.tl-tk-label b { flex: none; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tl-tk-group { flex: none; color: inherit; opacity: 0.8; text-transform: uppercase; }
.tl-tk-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #858585; font-family: 'DM Sans Variable', sans-serif; font-size: 10px; letter-spacing: 0; }
.tl-tk-row:hover .tl-tk-desc, .tl-tk-row:focus-visible .tl-tk-desc { color: #c4c4c4; }
/* The default's row (when another take plays): picking it goes back. */
.tl-tk-def { flex: none; padding: 0 3px; border: 1px solid currentColor; border-radius: 2px; font-size: 7px; line-height: 8px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.tl-tk-row:hover .tl-tk-def, .tl-tk-row:focus-visible .tl-tk-def { opacity: 1; }
/* No alternate in view: a faint line across the visible window. */
.tl-tk-empty { display: none; position: absolute; top: 0; bottom: 0; align-items: center; justify-content: center; color: #555; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; }
.tl-lane.empty .tl-tk-empty { display: flex; }
.tl.takes-folded .tl-tk-empty { display: none; }
.tl-tk-scene.more-below { mask-image: linear-gradient(#000 calc(100% - 18px), #0006); }
.tl-tk-scene.more-above { mask-image: linear-gradient(#0006, #000 18px); }
.tl-tk-scene.more-above.more-below { mask-image: linear-gradient(#0006, #000 18px, #000 calc(100% - 18px), #0006); }
.tl-tk-mark { display: none; }
.tl.takes-folded .tl-tk-row { display: none; }
.tl.takes-folded .tl-tk-mark { display: flex; align-items: center; gap: 4px; flex: 1; margin: 0; padding: 0 6px; font: inherit; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: #cfcfcf; background: #262626; border: 0; border-radius: 2px; overflow: hidden; cursor: pointer; }
.tl-tk-mark svg { flex: none; width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.tl-tk-mark span { transform: translateX(var(--dx, 0px)); overflow: hidden; text-overflow: ellipsis; }
.tl-tk-mark:hover { color: #fff; background: #333; }
.tl-tk-mark:focus { outline: none; }
.tl-tk-mark:focus-visible { outline: 2px solid var(--tl-ui); outline-offset: -2px; }
/* With the frames sprite: a filmstrip canvas under the clips, dimmed a little
   except under the pointer. */
.tl.has-frames[data-mode='expanded'] .tl-film { display: block; top: var(--tl-name); }
.tl.has-frames[data-mode='expanded'] .tl-strip { display: none; }
.tl.has-frames[data-mode='expanded'] .tl-clip::before { background: linear-gradient(#ffffff0a var(--tl-name), #0b0b0c33 0); }
.tl.has-frames[data-mode='expanded'] .tl-clip.hover::before { background: linear-gradient(#ffffff14 var(--tl-name), transparent 0); }
.tl.has-frames[data-mode='expanded'] .tl-clip.on::before { background: linear-gradient(#ffffff1f var(--tl-name), transparent 0); }
.tl[data-mode='expanded'] .tl-wave { display: block; position: relative; height: var(--tl-music-h); margin-top: var(--tl-gap); }
.tl[data-mode='expanded'] .tl-sfx { display: block; position: relative; height: var(--tl-sfx-h); margin-top: var(--tl-gap); }
.tl-event { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--tl-wave); box-shadow: 0 0 0 1px var(--tl-ink); font-size: 9px; line-height: 16px; letter-spacing: 0.04em; white-space: nowrap; }
.tl-event span { display: none; position: absolute; top: 0; line-height: 12px; }
.tl-event.inside span { display: block; left: var(--lx, 5px); right: 4px; overflow: hidden; text-overflow: ellipsis; color: #d0d0d0; }
.tl-event.side span { display: block; left: calc(100% + 4px); color: var(--tl-muted); }
.tl-event.lit { background: var(--tl-played); }
.tl-event.inside.lit span { color: var(--tl-ink); }
.tl-event.side.lit span { color: var(--tl-played); }
/* The Music lane's beat grid, under the blocks. Decoded: the sound's
   waveform under its name (the Music lane's colours, one canvas unplayed and
   one played), the block see-through so the grid shows. */
.tl-sfx-grid { position: absolute; left: 0; top: 0; pointer-events: none; }
.tl-event canvas { display: none; position: absolute; top: 0; }
.tl-event.wave { background: #ffffff0d; }
.tl-event.wave.lit { background: #ffffff1a; }
.tl-event.wave canvas.dim, .tl-event.wave.lit canvas.lit { display: block; }
.tl-event.wave.lit canvas.dim { display: none; }
.tl-event.wave.inside span { color: var(--tl-muted); }
.tl-event.wave.inside.lit span { color: var(--tl-text); }
/* Playhead: a timecode chip on the ruler and a line through the lanes,
   behind the shot names. */
.tl[data-mode='expanded'] .tl-head { z-index: 3; bottom: 0; width: 0; }
.tl[data-mode='expanded'] .tl-head::after { content: ''; position: absolute; left: -1px; top: var(--tl-ruler-h); bottom: 0; width: 2px; background: var(--tl-accent); }
.tl-skim { display: none; position: absolute; z-index: 2; left: 0; top: var(--tl-ruler-h); bottom: 0; width: 1px; background: #ffffffa6; pointer-events: none; }
.tl[data-mode='expanded'] .tl-skim.on { display: block; }
/* The editor view skims in the monitor (main.js), no hover card. */
.tl[data-mode='expanded']:hover .tl-tip:not(.off) { display: none; }
.tl[data-mode='expanded'] .tl-chip { display: block; position: absolute; top: 2px; padding: 1px 5px; border-radius: 2px; background: var(--tl-accent); color: var(--tl-ink); font-size: 10px; line-height: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Take actions (dev server only, .can-edit): a ⋯ on each take row and its
   menu (their status: the page's top bar, src/topbar.css). */
.tl-tk-more { display: none; flex: none; order: 9; padding: 0 5px; font: inherit; font-size: 12px; line-height: 14px; letter-spacing: 0; color: var(--tl-muted); background: none; border: 0; border-radius: 3px; cursor: pointer; pointer-events: auto; }
.tl.can-edit .tl-tk-more { display: inline-block; }
.tl-tk-more:hover { color: var(--tl-text); background: #ffffff1a; }
.tl-tk-more:focus-visible { outline: 1px solid var(--tl-ui); }
/* Menus and confirmations (menu.js), on the body: the chrome's greys, a
   red for what destroys. Hover and the keyboard share one highlight (the
   focus). A short entrance, UI only. */
.tl-menu, .tl-confirm { --tl-pop-bg: #1c1c1e; --tl-pop-edge: #333336; --tl-pop-hi: #2e2e33; --tl-danger: #ff7062; position: fixed; z-index: 30; box-sizing: border-box; max-width: min(380px, calc(100vw - 16px)); background: var(--tl-pop-bg); border: 1px solid var(--tl-pop-edge); border-radius: 8px; box-shadow: 0 1px 0 #ffffff0d inset, 0 10px 32px #000b, 0 2px 8px #0008; animation: tl-pop-in 0.12s cubic-bezier(0.2, 0.7, 0.2, 1); transform-origin: top left; }
.tl-menu.up, .tl-confirm.up { transform-origin: bottom left; animation-name: tl-pop-up; }
@keyframes tl-pop-in { from { opacity: 0; transform: translateY(-3px) scale(0.98); } }
@keyframes tl-pop-up { from { opacity: 0; transform: translateY(3px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .tl-menu, .tl-confirm { animation: none; } }
.tl-menu { display: flex; flex-direction: column; gap: 1px; min-width: 190px; max-height: calc(100vh - 16px); padding: 5px; overflow-y: auto; overscroll-behavior: none; }
.tl-menu:focus { outline: none; }
.tl-menu-item { display: flex; align-items: center; gap: 16px; min-height: 28px; padding: 0 10px; font: inherit; font-size: 11px; letter-spacing: 0.03em; text-align: left; color: #e2e2e2; background: none; border: 0; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.tl-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tl-menu-item kbd { flex: none; min-width: 16px; padding: 1px 4px; font: inherit; font-size: 9px; line-height: 12px; text-align: center; color: #9a9a9a; border: 1px solid #3c3c40; border-radius: 3px; }
.tl-menu-item:focus { color: #fff; background: var(--tl-pop-hi); outline: none; }
.tl-menu-item:focus-visible { box-shadow: inset 0 0 0 1px #6a6a70; }
.tl-menu-item:focus kbd { color: #d0d0d0; border-color: #55555a; }
.tl-menu-item:disabled { color: #5e5e62; cursor: default; }
.tl-menu-item:disabled kbd { color: #4a4a4e; border-color: #2c2c30; }
.tl-menu-item.danger:enabled { color: var(--tl-danger); }
.tl-menu-item.danger:focus { color: #fff; background: #e5483a; }
/* Choices: a dot in a column of their own. */
.tl-menu.checks .tl-menu-item { padding-left: 24px; position: relative; }
.tl-menu-item[aria-checked='true']::before { content: ''; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.tl-menu-item[aria-checked='true']:disabled { color: #a8a8ac; }
.tl-menu-item.sep, .tl-menu-head { position: relative; margin-top: 9px; }
.tl-menu-item.sep::after, .tl-menu-head::after { content: ''; position: absolute; left: 4px; right: 4px; top: -5px; height: 1px; background: var(--tl-pop-edge); }
.tl-menu-head { padding: 3px 10px 2px; color: #7a7a7e; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-menu-info { width: 300px; max-width: 100%; padding: 6px 10px 7px; display: flex; flex-direction: column; gap: 4px; }
.tl-menu-info b { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 400; letter-spacing: 0.03em; color: #e2e2e2; }
.tl-menu-info.warn b::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ff9a52; }
.tl-menu-info span { font-size: 10px; line-height: 1.45; letter-spacing: 0.02em; color: #8a8a8e; white-space: normal; }
.tl-menu > :first-child { margin-top: 0; }
.tl-menu > :first-child::after { display: none; }
.tl-confirm { width: 300px; padding: 14px 14px 12px; color: #e8e8e8; font-family: 'DM Sans Variable', sans-serif; }
.tl-confirm-title { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.tl-confirm-text { margin: 5px 0 14px; font-size: 12.5px; line-height: 1.4; color: #a9a9ad; }
.tl-confirm-btns { display: flex; justify-content: flex-end; gap: 8px; }
.tl-confirm-btns button { min-width: 72px; height: 26px; padding: 0 12px; font: inherit; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-accent); background: none; border: 1px solid #3e3e42; border-radius: 5px; cursor: pointer; }
.tl-confirm-btns button:hover { color: #fff; border-color: #5a5a5e; background: #ffffff0a; }
.tl-confirm-btns .tl-confirm-yes, .tl-confirm-btns .tl-confirm-yes:hover { font-weight: 700; color: var(--ui-ink, #111); background: var(--ui-accent, #d8d8d8); border-color: transparent; }
.tl-confirm-btns .tl-confirm-yes.danger { color: #fff; background: #e5483a; }
.tl-confirm-btns .tl-confirm-yes:hover { filter: brightness(1.1); }
.tl-confirm-btns button:focus { outline: none; }
.tl-confirm-btns button:focus-visible { outline: 2px solid var(--ui-accent, #d8d8d8); outline-offset: 2px; }
/* Review markers (lanes/markers.js): dots on the viewer bar, flags on the
   ruler; done ones hollow. Their own tip, not the hover card. */
.tl { --tl-mark: var(--tl-ui); --tl-mark-done: #7a7a80; }
.tl-marks { position: absolute; z-index: 5; left: 0; width: 100%; height: 0; pointer-events: none; }
.tl-mk { position: absolute; top: 0; padding: 0; color: var(--tl-mark); background: none; border: 0; cursor: pointer; pointer-events: auto; }
.tl-mk.done { color: var(--tl-mark-done); }
.tl-mk::before { content: ''; position: absolute; box-sizing: border-box; }
.tl[data-mode='light'] .tl-mk { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.tl[data-mode='light'] .tl-mk::before { left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1.5px var(--tl-ink); transition: transform 0.12s; }
.tl[data-mode='light'] .tl-mk.done::before { background: var(--tl-ink); border: 1.5px solid currentColor; }
.tl[data-mode='light'] .tl-mk:hover::before, .tl[data-mode='light'] .tl-mk:focus-visible::before { transform: scale(1.3); }
.tl[data-mode='expanded'] .tl-mk { width: 10px; height: var(--tl-ruler-h); margin-left: -1px; }
.tl[data-mode='expanded'] .tl-mk::before { left: 0; top: 0; bottom: 0; width: 1px; background: currentColor; }
.tl[data-mode='expanded'] .tl-mk::after { content: ''; position: absolute; box-sizing: border-box; left: 0; top: 1px; width: 9px; height: 8px; background: currentColor; clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); transition: transform 0.12s; transform-origin: left top; }
.tl[data-mode='expanded'] .tl-mk.done::after { background: none; border: 1.5px solid currentColor; border-right: 0; clip-path: none; width: 7px; }
.tl[data-mode='expanded'] .tl-mk:hover::after, .tl[data-mode='expanded'] .tl-mk:focus-visible::after { transform: scale(1.25); }
.tl-mk:focus { outline: none; }
.tl-mk:focus-visible { outline: 1px solid var(--tl-ui); outline-offset: 1px; border-radius: 2px; }
.tl-mk-tip { position: absolute; z-index: 31; bottom: calc(100% + 12px); display: none; flex-direction: column; gap: 3px; max-width: 320px; padding: 6px 10px 7px; border-radius: 6px; background: var(--tl-tip-bg); color: #eee; font-size: 11px; letter-spacing: 0.04em; transform: translateX(-50%); pointer-events: none; box-shadow: 0 6px 24px #0009; }
.tl-mk-tip.on { display: flex; }
.tl[data-mode='expanded'] .tl-mk-tip { bottom: auto; }
.tl-mk-tip b { color: var(--tl-mark); font-weight: 700; white-space: nowrap; }
.tl-mk-note { font-family: 'DM Sans Variable', sans-serif; font-size: 13px; letter-spacing: 0; line-height: 1.35; white-space: normal; }
.tl-mk-meta { color: var(--tl-muted); font-size: 10px; white-space: pre; }
.tl-mk-meta:empty { display: none; }
/* In / out range (lanes/range.js): shaded over the ruler (stronger) and the
   lanes, or over the viewer bar; edges drag in the editor view. The UI's
   light grey, told from the playhead (2 px, near white) and the skim line
   (1 px, white) by the [ ] tabs on the ruler and thinner, dimmer edges. */
.tl { --tl-range: var(--tl-ui); --tl-range-bg: color-mix(in srgb, var(--ui-accent) 8%, transparent); --tl-range-ruler: color-mix(in srgb, var(--ui-accent) 17%, transparent); }
.tl-range-box { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; pointer-events: none; }
.tl-range-box.on { display: block; }
.tl-range { position: absolute; z-index: 1; top: 0; bottom: 0; background: var(--tl-range-bg); }
.tl[data-mode='expanded'] .tl-range::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--tl-ruler-h); background: var(--tl-range-ruler); }
.tl[data-mode='light'] .tl-range { border-radius: 2px; box-shadow: inset 0 -2px 0 var(--tl-range); }
.tl-range-edge { display: none; position: absolute; z-index: 4; top: 0; bottom: 0; width: 9px; margin-left: -4px; cursor: ew-resize; pointer-events: auto; touch-action: none; }
.tl-range-edge::after { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--tl-range); opacity: 0.6; transition: opacity 0.12s; }
.tl-range-edge::before { content: ''; position: absolute; top: 0; left: 4px; width: 5px; height: var(--tl-ruler-h); box-sizing: border-box; border: 2px solid var(--tl-range); border-right: 0; opacity: 0.85; transition: opacity 0.12s; }
.tl-range-out::before { left: auto; right: 4px; border-left: 0; border-right: 2px solid var(--tl-range); }
.tl-range-edge:hover::after, .tl-range-edge.drag::after, .tl-range-edge:hover::before, .tl-range-edge.drag::before { opacity: 1; }
.tl[data-mode='expanded'] .tl-range-edge { display: block; }
.tl[data-mode] .tl-range-box.auto .tl-range-edge { display: none; }