/* EventCut editor parts, shared by the homepage and the workspace:
   panels with a title bar, timecode, transport buttons, the red playhead and the track colours. */
:root {
  --panel: rgba(12, 13, 30, .88);          /* solid enough that text keeps its contrast over the moving background */
  --panel-2: rgba(22, 24, 48, .92);
  --panel-line: rgba(255, 255, 255, .09);
  --bar: rgba(255, 255, 255, .035);
  --playhead: #FF4D5E;                      /* the red playhead every editor uses */
  --trk-v: #3D7BFF;                         /* V1 picture */
  --trk-t: #A784FF;                         /* T1 titles and captions */
  --trk-s: #FFB547;                         /* A1 statements */
  --trk-m: #19E3A0;                         /* A2 music */
  --trk-x: #FF5C9A;                         /* A3 sound effects */
  --sec-hook: #FF5C9A; --sec-build: #3D7BFF; --sec-peak: #FFB547; --sec-emotional: #A784FF; --sec-close: #19E3A0;
}

.panel { position: relative; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 14px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7); }
.panel-bar {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 12px; border-bottom: 1px solid var(--panel-line);
  background: var(--bar); border-radius: 14px 14px 0 0; font-size: .86rem; font-weight: 600; color: var(--ink);
}
.panel-bar .dim, .dim { color: var(--ink-2); font-weight: 500; }
.panel-bar > .btn:last-child, .panel-bar > .seg { margin-left: auto; }

/* timecode: tabular figures so the numbers never jump */
.tc { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 600; letter-spacing: .02em; font-size: .95rem; color: var(--ink); }
.tc.dim { color: var(--ink-2); font-weight: 500; }

/* transport */
.transport { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--panel-line); }
.tbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--panel-line); background: rgba(255, 255, 255, .06); color: var(--ink); cursor: pointer; font-size: .85rem; }
.tbtn:hover { background: rgba(255, 255, 255, .12); }
.transport input[type=range] { flex: 1; }
.transport input[type=range]::-webkit-slider-thumb { background: var(--playhead); box-shadow: none; }
.transport input[type=range]::-moz-range-thumb { background: var(--playhead); box-shadow: none; }

/* segmented control (shape) */
.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--panel-line); }
.seg button { border: 0; background: none; color: var(--ink-2); font-size: .78rem; font-weight: 600; padding: 4px 9px; border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; }
.seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; }

/* the red playhead */
.playhead-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--playhead); pointer-events: none; z-index: 3; }
.playhead-line::before { content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top: 8px solid var(--playhead); border-bottom: 0; }

/* safe-area guides on a viewer */
.safe { position: absolute; inset: 7% 6%; border: 1px dashed rgba(255, 255, 255, .28); border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .2s; }

/* record dot */
.rec { width: 9px; height: 9px; border-radius: 50%; background: var(--playhead); box-shadow: 0 0 0 3px rgba(255, 77, 94, .25); animation: recBlink 1.6s steps(1) infinite; }
@keyframes recBlink { 50% { opacity: .25; } }

/* keyboard focus is always visible */
.tbtn:focus-visible, .seg button:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 500; padding: 10px 16px; border-radius: 10px; background: #fff; color: #000; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) { .rec { animation: none; } }

/* ---------- the timeline (V1 clips, T1 captions, A1 statements, A2 music, A3 effects) ---------- */
.tl { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); background: rgba(0, 0, 0, .32); border: 1px solid var(--panel-line); border-radius: 12px; overflow: hidden; user-select: none; -webkit-user-select: none; }
.tl-labels { grid-column: 1; grid-row: 1; display: grid; grid-template-rows: 30px 62px 24px 24px 26px 22px; gap: 4px; padding: 0 0 10px 6px; }
.tl-labels span { display: grid; place-items: center; border-radius: 6px; font-size: .7rem; font-weight: 700; color: var(--ink-2); background: rgba(255, 255, 255, .04); border: 1px solid var(--panel-line); }
.tl-labels span:first-child { visibility: hidden; }
.tl-scroll { grid-column: 2; grid-row: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; outline: none; }
.tl-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--emerald); }
.tl-inner { position: relative; display: grid; grid-template-rows: 30px 62px 24px 24px 26px 22px; gap: 4px; padding: 0 8px 10px 4px; min-width: 100%; cursor: text; }
.tl-ruler { position: relative; border-bottom: 1px solid var(--panel-line); cursor: ew-resize; overflow: hidden; }
.tl-ticks i { position: absolute; bottom: 0; width: 1px; height: 6px; background: rgba(255, 255, 255, .28); }
.tl-ticks i.mj { height: 12px; background: rgba(255, 255, 255, .6); }
.tl-ticks em { position: absolute; top: 4px; transform: translateX(3px); font-style: normal; font-size: .68rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.tl-ticks b { position: absolute; bottom: 1px; width: 3px; height: 3px; margin-left: -1px; border-radius: 50%; background: var(--trk-m); opacity: .8; }
.tl-secs span { position: absolute; top: 0; height: 4px; border-radius: 0 0 3px 3px; }
.tl-row { position: relative; }
.tl-clip { position: absolute; top: 0; bottom: 0; border-radius: 6px; overflow: hidden; background: #20223a; border: 1px solid rgba(255, 255, 255, .14); cursor: grab; touch-action: none; }
.tl-clip .tl-pic { position: absolute; inset: 0; background-size: auto 100%; background-repeat: repeat-x; background-position: left center; }
.tl-clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .55)); pointer-events: none; }
.tl-clip small { position: absolute; left: 6px; bottom: 3px; z-index: 1; font-size: .66rem; font-weight: 600; color: #fff; white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tl-clip .tl-ic { position: absolute; top: 2px; right: 4px; z-index: 1; font-size: .7rem; pointer-events: none; }
.tl-clip .tl-ic + .tl-ic { right: 18px; }
.tl-clip.changed { border-color: rgba(255, 216, 77, .55); }
.tl-clip.changed::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #FFD84D; z-index: 2; }
.tl-clip.sel { border: 2px solid #FFD84D; box-shadow: 0 0 0 3px rgba(255, 216, 77, .25); z-index: 3; overflow: visible; }
.tl-clip.sel .tl-pic { border-radius: 4px; }
.tl-clip.tl-end { cursor: default; background: repeating-linear-gradient(45deg, #1d1f36 0 8px, #24264a 8px 16px); }
.tl-h { position: absolute; top: -2px; bottom: -2px; width: 14px; background: #FFD84D; z-index: 4; cursor: ew-resize; display: grid; place-items: center; touch-action: none; }
.tl-h::before { content: ""; width: 2px; height: 20px; border-radius: 1px; background: #4a3a00; }
.tl-h.l { left: -3px; border-radius: 6px 0 0 6px; } .tl-h.r { right: -3px; border-radius: 0 6px 6px 0; }
.tl-h:hover, .tl-h:active { background: #ffe682; }
.tl-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; font-size: .66rem; font-weight: 600; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0b0b18; }
.tl-bar.cap { background: rgba(167, 132, 255, .85); }
.tl-bar.bite { background: rgba(255, 181, 71, .9); }
.tl-bar.music { background: rgba(25, 227, 160, .75); overflow: visible; }
.tl-bar.music small { position: relative; z-index: 1; font-size: .66rem; }
.tl-bar.music .fade { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.tl-bar.music .fade.in { left: 0; background: linear-gradient(to top right, rgba(0, 0, 0, .55) 50%, transparent 50%); border-radius: 5px 0 0 5px; }
.tl-bar.music .fade.out { right: 0; background: linear-gradient(to top left, rgba(0, 0, 0, .55) 50%, transparent 50%); border-radius: 0 5px 5px 0; }
.tl-bar.music .fh { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid #0e7a57; cursor: ew-resize; z-index: 2; touch-action: none; }
.tl-bar.music .fh.out { margin-left: 0; margin-right: -6px; }
.tl-fx { position: absolute; top: 4px; width: 10px; height: 14px; margin-left: -5px; border-radius: 3px; background: var(--trk-x); }
.tl-fx.stale { opacity: .35; }
.tl-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--playhead); z-index: 6; pointer-events: none; }
.tl-knob { position: absolute; top: 0; left: -8px; width: 18px; height: 22px; background: var(--playhead); border-radius: 4px 4px 9px 9px; pointer-events: none; }
.tl-time { position: absolute; top: 3px; left: 12px; background: var(--playhead); color: #fff; font-size: .64rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.tl-drop { position: absolute; top: 30px; height: 66px; width: 4px; border-radius: 2px; background: #FFD84D; z-index: 7; box-shadow: 0 0 10px #FFD84D; pointer-events: none; }
.tl-tip { position: absolute; z-index: 8; transform: translate(-50%, 0); background: #FFD84D; color: #1d1700; font-weight: 700; font-size: .72rem; padding: 2px 8px; border-radius: 6px; pointer-events: none; }
.tl.reordering .tl-clip { cursor: grabbing; }
.tl-clip.sel.narrow .tl-h.l { left: -15px; border-radius: 6px 0 0 6px; }
.tl-clip.sel.narrow .tl-h.r { right: -15px; border-radius: 0 6px 6px 0; }