/* Konformista concept pages: the timeline drawings (see suite-timeline.js). CONCEPT ONLY. */
:root {
  /* the app's verdicts, as its timeline drawer paints them (desktop_app/tokens.py
     SEVERITY and timeline_preview._TINT): slate for a clean clip, a hue per severity */
  --sv-clean: #5b6b7a; --sv-error: #c9333f; --sv-warn: #e8892c; --sv-review: #e3d050;
  --sv-rebuilt: #3b9fc9; --sv-info: #4fa05f; --sv-place: #9f6ad6;
  /* Premiere's own clip colours, roughly */
  --pr-video: #8d79d6; --pr-audio: #4fa477;
  /* one light per finishing system */
  --resolve-a: #f5b84f; --resolve-b: #ea7a3c;
  --baselight-a: #66d6e8; --baselight-b: #4f86f2;
  --flame-a: #ff7a7a; --flame-b: #d6336c;
}

/* ---------- the timeline ---------- */
.tl-wrap { margin-top: 14px; border-radius: 14px; background: var(--suite-2); border: 1px solid var(--line); overflow: hidden; }
/* where a narrow screen scrolls the timeline sideways, a dark scrollbar */
.tl-wrap { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); font: 500 11px var(--mono); letter-spacing: .06em; color: var(--dim); text-transform: uppercase; }
.tl-head .seq b { color: var(--text); font-weight: 500; }
.tl-status { display: flex; align-items: center; gap: 10px; }
.tl-status .pill { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-hi); color: var(--text); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 600; font-size: 12px; transition: background .3s, color .3s, border-color .3s; }
.tl-status .pill.is-ready { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.tl { position: relative; display: grid; grid-template-columns: 56px 1fr; }
.tl-labels { border-right: 1px solid var(--line); }
.tl-labels div, .tl-lane { height: 30px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.tl-labels div { display: flex; align-items: center; justify-content: center; font: 500 11px var(--mono); color: var(--mut); }
.tl-labels .ruler-pad, .tl-ruler { height: 26px; }
.tl-body { position: relative; }
.tl-ruler { position: relative; border-bottom: 1px solid var(--line); font: 400 10px var(--mono); color: var(--mut); }
.tl-ruler span { position: absolute; top: 6px; transform: translateX(4px); white-space: nowrap; }
.tl-ruler i { position: absolute; bottom: 0; width: 1px; height: 6px; background: rgba(255, 255, 255, .18); }
.tl-ruler i.big { height: 12px; background: rgba(255, 255, 255, .3); }
.tl-lane { position: relative; }
.clip {
  position: absolute; top: 3px; bottom: 3px; border-radius: 3px; overflow: hidden;
  background: color-mix(in oklab, var(--c) 34%, #111); border: 1px solid color-mix(in oklab, var(--c) 70%, transparent);
  font: 500 10px/22px var(--mono); color: rgba(255, 255, 255, .85); padding: 0 6px; white-space: nowrap; text-overflow: ellipsis;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.clip.v { --c: var(--pr-video); }
.clip.a { --c: var(--pr-audio); }
.clip.g { --c: #c58a4f; }
.clip svg { position: absolute; left: 0; right: 0; bottom: 1px; width: 100%; height: 14px; opacity: .55; }
.clip svg path { fill: rgba(255, 255, 255, .7); }
.clip.is-done { --c: var(--v, var(--sv-clean)); background: color-mix(in oklab, var(--c) 44%, #121212); border-color: color-mix(in oklab, var(--c) 75%, transparent); }
.clip.is-done[data-sev] { background: color-mix(in oklab, var(--c) 58%, #121212); border-color: var(--c); color: #fff; }
.clip.is-done:not([data-sev])::after { content: '\2713'; position: absolute; right: 5px; top: 0; font-size: 10px; color: rgba(255, 255, 255, .6); }
.sev-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 16px; border-top: 1px solid var(--line); font: 500 11px var(--sans); color: var(--dim); }
.sev-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sev-legend i { width: 14px; height: 9px; border-radius: 2px; background: color-mix(in oklab, var(--c) 58%, #121212); border: 1px solid var(--c); }
.flag {
  position: absolute; z-index: 4; top: -22px; transform: translate(-6px, 6px) scale(.9); opacity: 0;
  display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border-radius: 4px;
  background: #0b0b0c; border: 1px solid var(--s); color: var(--text); font: 600 11px/18px var(--sans); white-space: nowrap;
  transition: opacity .3s ease, transform .4s var(--ease); pointer-events: none;
}
.flag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--s); }
.flag.is-on { opacity: 1; transform: translate(-6px, 0) scale(1); }
/* the markers' own row; their names sit down in the lanes (fitFlags places them) */
.tl-flags, .tl-labels .flags-pad { position: relative; height: 26px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.tl-labels .flags-pad { display: flex; align-items: center; justify-content: center; font: 500 10px var(--mono); color: var(--mut); }
/* the marker: dropped on the clip's first frame, with a line down to it */
.tl-flags .flag { top: 0; bottom: 0; width: 0; padding: 0; gap: 0; background: none; border: 0; transform: none; overflow: visible; }
.tl-flags .flag.is-on { transform: none; }
.tl-flags .flag::before { content: ''; position: absolute; left: -4px; bottom: 1px; width: 9px; height: 12px; border-radius: 2px 2px 0 0;
  background: var(--s); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.tl-flags .flag::after { content: ''; position: absolute; left: 0; top: 100%; width: 1px; height: var(--drop, 0px); background: color-mix(in oklab, var(--s) 55%, transparent); pointer-events: none; }
/* its name beside the line */
.tl-flags .flag-t { position: absolute; left: 9px; top: 3px; white-space: nowrap;
  padding: 1px 5px; border-radius: 4px; background: #0b0b0c; border: 1px solid var(--s); color: var(--text); font: 600 11px/16px var(--sans); }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; z-index: 5; width: 0; pointer-events: none; }
.playhead::before { content: ''; position: absolute; top: 0; bottom: 0; left: -0.75px; width: 1.5px; background: var(--gold); box-shadow: 0 0 12px rgba(212, 168, 74, .6); }
.playhead::after { content: ''; position: absolute; top: 0; left: -6px; border: 6px solid transparent; border-top: 8px solid var(--gold); }

/* the larger drawings: the comparison, Read the results, the route pages */
.tl--tall { grid-template-columns: 72px 1fr; }
.tl--tall .tl-labels div:not(.ruler-pad):not(.flags-pad), .tl--tall .tl-lane { height: 44px; }
.tl--tall .clip { line-height: 36px; font-size: 11px; }
.tl-note { margin: 0; padding: 14px 16px; font: 500 12px var(--mono); color: var(--mut); }
.rmk { position: absolute; top: 3px; z-index: 2; width: 10px; height: 13px; margin-left: -1px; background: var(--mc); }

/* Resolve's Edit page: track badges, its own clip colours, ruler markers, a red playhead */
.skin-resolve { background: #1b1b1e; }
.skin-resolve .tl-labels { background: #232327; }
.skin-resolve .trk { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 18px; padding: 0 5px; border-radius: 3px; background: #3a3a41; color: #dcdcdc; font: 600 10px var(--sans); }
.skin-resolve .tl-ruler { background: #232327; }
.skin-resolve .clip { --c: #3e5d7a; background: var(--fill, var(--c)); border: 1px solid color-mix(in oklab, var(--fill, var(--c)) 65%, #fff); border-radius: 2px; color: #f4f4f4; font-family: var(--sans); font-weight: 500; }
.skin-resolve .clip.r-a { --c: #2d5a47; }
.skin-resolve .clip.is-off { opacity: .45; filter: saturate(.4); }
.skin-resolve .clip em { font-style: normal; font-weight: 700; margin-right: 6px; }
.skin-resolve .rmk { clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); border-radius: 2px 2px 0 0; }
.skin-resolve .r-head { position: absolute; top: 0; bottom: 0; left: 64%; z-index: 5; width: 1.5px; background: #e5484d; }
.skin-resolve .r-head::before { content: ''; position: absolute; top: 0; left: -5px; width: 11px; height: 9px; background: #e5484d; clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* Baselight: each clip a stack of strips with no gap, its source on top, its layers under it;
   grey strips, Transform green, labels to the right, as Baselight's own timeline draws them */
.skin-baselight { background: #171717; }
.skin-baselight .tl-labels { background: #1f1e1d; }
.skin-baselight .tl-ruler { background: #1f1e1d; }
.skin-baselight .tl-ruler span { font-size: 9px; }
.tl--tall.skin-baselight .tl-labels div:not(.ruler-pad):not(.flags-pad), .tl--tall.skin-baselight .tl-lane { height: 30px; border-bottom: 0; }
.skin-baselight .clip { top: 2px; bottom: 2px; padding: 0 6px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .35); background: #545454; color: #dcdcdc; font: 500 10px/20px var(--sans); text-align: right; }
.tl--tall.skin-baselight .clip { line-height: 20px; font-size: 10px; }
.skin-baselight .clip.b-tf { background: #2e4522; color: #d3dccb; }
.skin-baselight .clip .sw { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; background: #c58a4f; vertical-align: -1px; }

/* Flame: version.track identifiers, grey segments in their finding's colour, A1 and A2 */
.skin-flame { background: #1d1d1d; }
.skin-flame .tl-labels { background: #262626; }
.skin-flame .tl-labels div { font: 500 11px var(--mono); color: #8c8c8c; }
.skin-flame .tl-ruler { background: #262626; }
.skin-flame .clip { --c: #5c5c5c; background: #4d4d4d; border: 1px solid #707070; border-radius: 1px; color: #ececec; font-family: var(--sans); font-weight: 500; }
.skin-flame .clip.has-fill { background: color-mix(in oklab, var(--fill) 55%, #262626); border-color: var(--fill); }
.skin-flame .clip.f-gap { background: transparent; border: 1px dashed #6c6c6c; color: #c9c9c9; }
.skin-flame .clip.f-aud { background: #2e4537; border-color: #4f7a60; }
.skin-flame .clip.is-hidden { opacity: .4; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 4px, transparent 4px 8px); }
.skin-flame .clip .sw { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 1px; background: #c58a4f; vertical-align: -1px; }
.skin-flame .fx { display: inline-block; height: 15px; margin-right: 6px; padding: 0 5px; border-radius: 2px; background: #3f6fb0; color: #fff; font: 600 9px/15px var(--sans); vertical-align: 1px; }
.skin-flame .rmk { width: 11px; height: 9px; top: 6px; margin-left: -5px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* the same height as the cut drawn beside them, with the reference's track (Resolve) and
   version (Flame) and Flame's left and right channels added */
.tl--tall.skin-resolve .tl-labels div:not(.ruler-pad):not(.flags-pad), .tl--tall.skin-resolve .tl-lane { height: 36.67px; }
.tl--tall.skin-resolve .clip { line-height: 28px; }
.tl--tall.skin-flame .tl-labels div:not(.ruler-pad):not(.flags-pad), .tl--tall.skin-flame .tl-lane { height: 27.5px; }
.tl--tall.skin-flame .clip { line-height: 19px; font-size: 10px; }

@media (max-width: 860px) {
  .tl--tall { grid-template-columns: 40px 1fr; }
  .tl--tall .clip { font-size: 9px; padding: 0 4px; }
  .tl--tall .tl-ruler span { display: none; }
  .skin-resolve .trk { min-width: 0; padding: 0 3px; }
}