/* ────────────────────────────────────────────────────────────────────────
     timeline-v2.css — the v2 three-track timeline (README § 7, PR 10).
     Loaded only by index_v2.html; every rule body.ui-v2-scoped. Shell
     metrics (132px, head, track frames) live in editor-v2.css since PR 1;
     this file styles the CONTENT: waveform, title band, line bands, FX
     ticks, trim flags, playhead.
     ──────────────────────────────────────────────────────────────────────── */
  body.ui-v2 .v2-track { overflow: visible; }
  body.ui-v2 .v2-timeline-tracks { cursor: pointer; }

  body.ui-v2 .v2-wavebars {
    position: absolute;
    inset: 3px 0;   /* full width — the bands/markers/playhead share this axis */
    display: flex;
    align-items: flex-end;
    gap: 2px;
    pointer-events: none;
  }
  body.ui-v2 .v2-wavebars i {
    flex: 1;
    min-height: 8%;
    border-radius: 1px;
    background: #3a3a4a;
  }
  body.ui-v2 .v2-wavebars i.v2-wb-hot { background: #56566c; }

  /* Title band: purple, anchored at trim-in; label + readout hide as the
     band narrows (~62px keeps both, ~34px keeps the label only — § 7). */
  body.ui-v2 .v2-title-band {
    position: absolute;
    top: 2px;
    bottom: 2px;
    border-radius: 5px;
    background: linear-gradient(180deg, #8f73ff, #6b4dff);
    box-shadow: 0 2px 8px rgba(107,77,255,0.35);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px 0 7px;
    min-width: 12px;
    box-sizing: border-box;
    overflow: hidden;
  }
  body.ui-v2 .v2-title-band[hidden] { display: none; }
  body.ui-v2 .v2-tb-label,
  body.ui-v2 .v2-tb-dur {
    font-family: "SF Mono", "Fira Code", monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: #fff;
    white-space: nowrap;
  }
  body.ui-v2 .v2-tb-dur { color: rgba(255,255,255,0.72); }
  body.ui-v2 .v2-title-band.v2-tb-narrow .v2-tb-dur { display: none; }
  body.ui-v2 .v2-title-band.v2-tb-tiny .v2-tb-label,
  body.ui-v2 .v2-title-band.v2-tb-tiny .v2-tb-dur { display: none; }
  body.ui-v2 .v2-tb-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 11px;
    border-radius: 0 5px 5px 0;
    background: rgba(255,255,255,0.32);
    cursor: ew-resize;
    touch-action: none;
  }
  body.ui-v2 .v2-tb-handle:hover { background: rgba(255,255,255,0.7); }

  /* Lines track: caption bands colored by state; FX ticks ride on top. */
  body.ui-v2 .v2-lines-bands { position: absolute; inset: 0; }
  body.ui-v2 .v2-line-band {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: 3px;
    background: #3d3d52;
    min-width: 2px;
  }
  body.ui-v2 .v2-line-band:hover { background: #4a4a64; }
  body.ui-v2 .v2-line-band.v2-lb-hidden { background: #26262f; opacity: 0.6; }
  body.ui-v2 .v2-line-band.v2-lb-selected { background: var(--v2-accent); }
  body.ui-v2 .v2-line-band.v2-lb-playing { background: var(--v2-positive); }
  body.ui-v2 .v2-fx-tick {
    position: absolute;
    top: -2px;
    width: 3px;
    height: 6px;
    border-radius: 1px;
    background: var(--v2-fx);
    pointer-events: none;
  }

  /* Trim flags + playhead span the whole track stack (§ 7). */
  body.ui-v2 .v2-tl-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    pointer-events: none;
    z-index: 3;
  }
  body.ui-v2 .v2-tl-marker::before {
    content: "";
    position: absolute;
    top: -4px;
    width: 7px;
    height: 6px;
  }
  body.ui-v2 .v2-tl-in  { background: var(--v2-positive); }
  body.ui-v2 .v2-tl-in::before  { left: 0; background: var(--v2-positive); border-radius: 0 3px 3px 0; }
  body.ui-v2 .v2-tl-out { background: var(--v2-danger); }
  body.ui-v2 .v2-tl-out::before { right: 0; background: var(--v2-danger); border-radius: 3px 0 0 3px; }
  body.ui-v2 .v2-tl-marker[hidden] { display: none; }
  body.ui-v2 .v2-tl-playhead {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 1.5px;
    background: #fff;
    pointer-events: none;
    z-index: 4;
    transition: left 240ms linear;
  }
  body.ui-v2 .v2-tl-playhead::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -2.75px;
    width: 7px;
    height: 7px;
    background: #fff;
  }
  body.ui-v2 .v2-tl-playhead[hidden] { display: none; }