/*
 * The video page (/studio/:id) and the projects list (/studio), plan 12 stages 4 and 8, work
 * packages B1 and H: the player's box, the clip's panel with its zoomed range bar, the video's
 * title and details, the side's transcript and saved moments, the licence request with its
 * tracking, and a project's row. The dark editor (/studio/:id/editor) has its own sheet,
 * editor.css. Time runs left to right inside the range bar (dir="ltr"); the rest follows the page.
 */

/* What the modules hide by the attribute stays hidden, whatever display its class gives it. */
.lq-studio [hidden],
.lq-projects-tools [hidden],
.lq-projects-page [hidden],
.lq-dialog [hidden] {
  display: none;
}

/* The breadcrumb over the video: where the person came from, then the video's title (24:1515). */
.lq-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-end: 12px;
  color: var(--color-text-muted);
  font: 400 14px / 20px var(--font-ui);
}

.lq-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.lq-crumbs a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.lq-crumbs__back {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
}

.lq-crumbs__back:dir(ltr) {
  transform: scaleX(-1);
}

.lq-crumbs__sep {
  width: 14px;
  height: 14px;
  transform: scaleX(-1);
}

.lq-crumbs__sep:dir(ltr) {
  transform: none;
}

.lq-crumbs__here {
  overflow: hidden;
  color: var(--color-text-primary);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The video's main column: the player, the clip, the file's row, then the title on screen; the
 * title first in the source (D12.137). Each part carries its own `order` below.
 */
.lq-studio__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lq-stage-section {
  order: 1;
}

/* The player's box: the platform's frame or the file's player, or a note in its place. */
.lq-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 200px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--ink-700) 14%, var(--ink-950) 86%);
  color: var(--color-text-inverse);
}

.lq-stage > video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
}

.lq-stage > .lq-player {
  width: 100%;
}

.lq-stage > .lq-player--9x16 {
  padding-block: 16px;
}

.lq-stage > .lq-skel {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.lq-stage__note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 36rem;
  padding: 32px 24px;
  text-align: center;
}

.lq-stage__note > .lq-icon {
  width: 28px;
  height: 28px;
  color: var(--color-accent-amber);
}

.lq-stage__note > p {
  color: var(--color-text-inverse);
  font: 400 16px / 28px var(--font-ui);
}

/* The owner's file to drop, inside the box: the zone keeps its own light surface. */
.lq-stage > .lq-dropzone {
  width: min(100%, 36rem);
  margin: 24px;
}

.lq-stage > .lq-progress {
  width: min(100%, 36rem);
  margin: 0 24px 24px;
  color: var(--color-text-inverse);
}

/* Under the player: «يُشغَّل من يوتيوب» with the platform's glyph (24:1550). */
.lq-stage__caption {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 8px;
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-stage__caption > .lq-icon {
  flex: none;
  width: 14px;
  height: 14px;
}

/*
 * The clip's panel (Figma «RangeBar» 83:1425): a white panel, its name and hint on one line with
 * the length on amber at the end, the bar, then the in and out buttons with their keys at the
 * start and the moment's actions at the end.
 */
.lq-clip {
  display: flex;
  flex-direction: column;
  order: 2;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.lq-clip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.lq-clip__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.lq-clip__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-primary);
  font: 500 16px / 24px var(--font-ui);
}

.lq-clip__title > .lq-icon {
  width: 20px;
  height: 20px;
  color: var(--color-text-primary);
}

.lq-clip__note {
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-clip__length {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-selection-soft);
  color: var(--color-text-primary);
  font: 500 14px / 20px var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.lq-clip__length > .lq-icon {
  width: 14px;
  height: 14px;
}

.lq-clip__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.lq-clip__marks,
.lq-clip__do {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.lq-clip__do {
  gap: 8px;
  margin-inline-start: auto;
}

.lq-clip__mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* On a phone alone: what a virtual clip is, under its button (54:1662). */
.lq-clip__caption {
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

/* The file's row under the panel (31:541): the frame, the download, then the editor. */
.lq-clip__files {
  display: flex;
  flex-wrap: wrap;
  order: 3;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.lq-clip__slot {
  display: contents;
}

/*
 * The range bar (Figma «Local/Video/RangeBar» 83:1424, D12.201): the whole video in a thin
 * overview with the moment in amber and the zoom window outlined, then the zoom window itself,
 * 88px tall: the in and out times at the top, the window's grey band with its ticks, the amber
 * span between the brackets, the red playhead, the times under the ticks. One SVG drawn in
 * percent (x) and pixels (y, and the brackets' own shape), so nothing stretches; the module moves
 * it by attributes. The two native range inputs lie over the band, transparent, taking no pointer
 * but on their thumbs, which stand where the brackets are drawn. The SVG is inset by half a thumb
 * so its x matches the thumb's centre at both ends.
 */
.lq-range {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lq-range__overview {
  display: flex;
  align-items: center;
  gap: 12px;
  direction: ltr;
  color: var(--color-text-muted);
}

.lq-range__map {
  flex: 1;
  min-width: 0;
  height: 14px;
  overflow: visible;
  cursor: pointer;
}

.lq-range__map-base {
  fill: var(--color-bg-muted);
}

.lq-range__lens {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1;
}

.lq-range__moment {
  fill: var(--color-accent-amber);
}

.lq-range__map-head {
  fill: var(--color-status-live);
}

.lq-range__track {
  --lq-thumb: 16px;
  position: relative;
  height: 88px;
  direction: ltr;
  touch-action: none;
  user-select: none;
}

.lq-range__svg {
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--lq-thumb) / 2);
  width: calc(100% - var(--lq-thumb));
  height: 88px;
  overflow: visible;
  cursor: pointer;
}

.lq-range__window {
  fill: var(--color-bg-subtle);
}

.lq-range__tick {
  stroke: var(--color-border-strong);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.lq-range__label {
  fill: var(--color-text-muted);
  font: 500 12px / 16px var(--font-mono);
}

.lq-range__fill {
  fill: var(--color-bg-selection-soft);
}

.lq-range__edge {
  fill: var(--color-accent-amber);
}

.lq-range__bracket path {
  fill: var(--color-accent-amber);
  stroke: var(--color-text-on-accent);
  stroke-width: 1;
}

/* The ticks and the two points are drawn only: the track under them takes the pointer. */
.lq-range__ticks,
.lq-range__point,
.lq-range__point--in,
.lq-range__point--out {
  pointer-events: none;
}

.lq-range__mark {
  fill: var(--color-text-primary);
  font: 500 13px / 16px var(--font-mono);
}

.lq-range__head {
  fill: var(--color-status-live);
}

.lq-range__handle {
  position: absolute;
  inset-block-start: 22px;
  inset-inline: 0;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}

.lq-range__handle:focus {
  outline: none;
}

/* The end over the start where they meet, as the brackets are drawn. */
.lq-range__handle--in {
  z-index: 1;
}

.lq-range__handle--out {
  z-index: 2;
}

.lq-range__handle::-webkit-slider-runnable-track {
  height: 48px;
  background: transparent;
}

.lq-range__handle::-moz-range-track {
  height: 48px;
  background: transparent;
}

/* The thumb is the bracket's hit area: drawn by the SVG under it, ringed when focused. */
.lq-range__handle::-webkit-slider-thumb {
  width: var(--lq-thumb);
  height: 48px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
}

.lq-range__handle::-moz-range-thumb {
  width: var(--lq-thumb);
  height: 48px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: ew-resize;
  pointer-events: auto;
}

.lq-range__handle:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--focus-ring);
}

.lq-range__handle:focus-visible::-moz-range-thumb {
  box-shadow: var(--focus-ring);
}

.lq-range__handle:disabled::-webkit-slider-thumb {
  cursor: default;
}

.lq-range__handle:disabled::-moz-range-thumb {
  cursor: default;
}

/* «الوقت بالأرقام»: the typed times and the readouts, folded under the bar. */
.lq-range__more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-ui);
  cursor: pointer;
}

.lq-range__more > summary:hover {
  color: var(--color-text-primary);
}

.lq-range__more[open] > summary {
  margin-block-end: 8px;
}

/* The typed times and the readouts. */
.lq-range__times {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 24px;
}

.lq-range__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lq-range__field > .lq-label-sm,
.lq-range__readout > .lq-label-sm {
  color: var(--color-text-secondary);
}

.lq-range__time {
  width: 7.5em;
  min-height: 40px;
  padding-block: 5px;
  font: 500 13px / 16px var(--font-mono);
  text-align: center;
}

.lq-range__readout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 40px;
  padding-block-end: 12px;
}

.lq-range__readout > .lq-timecode {
  font-size: 14px;
}

/* The keys the page listens for. */
.lq-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.lq-keys__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lq-keys__sep {
  color: var(--color-border-strong);
}

/* «ألغِ الطلب» in the pull's progress dialog, before «أكمل التصفح». */
.lq-pull-cancel {
  margin-inline-end: auto;
}

/* The video's title and details (Figma «About» 83:1651): after the player and the clip on screen. */
.lq-vmeta {
  display: flex;
  flex-direction: column;
  order: 4;
  gap: 12px;
  margin-block-start: 12px;
}

.lq-vmeta__title {
  font: 700 28px / 42px var(--font-heading);
  overflow-wrap: anywhere;
}

/* The source, the platform and the facts, a thin rule between the facts; «افتح على …» at the end. */
.lq-vmeta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.lq-vmeta__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-vmeta__source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
}

.lq-vmeta__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.lq-vmeta__item:empty {
  display: none;
}

.lq-vmeta__item::before {
  content: "";
  flex: none;
  width: 1px;
  height: 16px;
  background: var(--color-border-default);
}

.lq-vmeta__original {
  margin-inline-start: auto;
}

/* The rights banner's actions, and the month's pulls beside them (24:1700). */
.lq-rights-actions {
  --lq-gap: 12px;
  margin-block-start: 10px;
}

.lq-rights-quota {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lq-quota-pips {
  flex: none;
}

.lq-quota-pips__seg {
  fill: var(--color-border-strong);
  fill-opacity: 0.45;
}

.lq-quota-pips__seg--left {
  fill: var(--color-control-on);
  fill-opacity: 1;
}

/* The licensed note (31:616): on its green, the shield, the words, the details at the end. */
.lq-banner--licence {
  align-items: center;
  padding-block: 12px;
  padding-inline: 12px 8px;
}

.lq-banner--licence .lq-banner__title {
  font-size: 14px;
  line-height: 20px;
}

.lq-banner--licence .lq-banner__text {
  font-size: 12px;
  line-height: 18px;
}

/* «صُنّف تلقائياً» before the topics (24:1723). */
.lq-vmeta__topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lq-vmeta__auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline-end: 4px;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-vmeta__auto > .lq-icon {
  width: 16px;
  height: 16px;
  color: var(--color-accent-amber-strong);
}

/* The description: three lines, then «المزيد» opens the rest (hand-off §8). */
.lq-desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.lq-desc__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.lq-desc--open .lq-desc__text {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none;
}

/* The side: two tabs, the transcript and the moments saved from this video (24:1828, 31:732). */
.lq-studio__aside {
  min-width: 0;
}

.lq-studio__aside > .lq-tabs {
  margin-block-end: 16px;
}

.lq-studio__aside > .lq-tabpanel:focus-visible {
  box-shadow: var(--focus-ring);
}

.lq-tab__lock {
  display: inline-flex;
  align-items: center;
}

.lq-tab__lock > .lq-icon {
  width: 14px;
  height: 14px;
}

/* The transcript's panel: the search with its arrows, the follow switch, then the lines. */
.lq-tpanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lq-tpanel__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 13px;
}

.lq-tsearch {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lq-tsearch__box {
  position: relative;
  display: flex;
  align-items: center;
}

.lq-tsearch__box > .lq-icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 12px;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.lq-tsearch__input {
  min-height: 40px;
  padding-block: 5px;
  padding-inline-start: 38px;
  font-size: 14px;
  line-height: 24px;
}

/* Focused, the frame grows by a pixel (controls.8e28ceb2.css); the words keep their place after the icon. */
.lq-tsearch__input:focus-visible,
.lq-tsearch__input[aria-invalid="true"] {
  padding-inline-start: 37px;
}

.lq-tsearch__count:empty {
  display: none;
}

/* With arrows (31:748): the count and the two arrows sit inside the field, at its end. */
.lq-tsearch--nav .lq-tsearch__input {
  min-height: 44px;
  padding-inline-end: 132px;
}

.lq-tsearch--nav .lq-tsearch__input:focus-visible,
.lq-tsearch--nav .lq-tsearch__input[aria-invalid="true"] {
  padding-inline-end: 131px;
}

.lq-tsearch__nav {
  position: absolute;
  inset-block: 6px;
  inset-inline-end: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.lq-tsearch--nav .lq-tsearch__count {
  padding-inline: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lq-tsearch__sep {
  width: 1px;
  height: 16px;
  margin-inline: 2px;
  background: var(--color-border-default);
}

.lq-tsearch__count:empty + .lq-tsearch__sep {
  display: none;
}

.lq-tsearch__prev > .lq-icon {
  transform: rotate(180deg);
}

.lq-tlines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(70vh, 720px);
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.lq-tlines:empty {
  display: none;
}

/*
 * A line (31:789): the words at the start, the time that jumps there at the end; the moment's
 * buttons under the current line, a searched hit or a focused one.
 */
.lq-tline--row {
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  scroll-margin-block: 48px;
}

.lq-tline--row > .lq-tline__time {
  order: 2;
  min-height: 32px;
  padding: 8px 0 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lq-tline--row > .lq-tline__time:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.lq-tline--row > .lq-tline__text {
  order: 1;
}

.lq-tline__marks {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  order: 3;
  gap: 8px;
}

.lq-tline__marks .lq-btn {
  min-height: 32px;
}

/* The current hit of the search: ringed, so it is found among the other highlighted lines. */
.lq-tline--hit {
  box-shadow: inset 0 0 0 2px var(--color-accent-amber);
}

@media (hover: hover) {
  .lq-tline__marks {
    display: none;
  }

  .lq-tline--row:hover .lq-tline__marks,
  .lq-tline--row:focus-within .lq-tline__marks,
  .lq-tline--row[aria-current="true"] .lq-tline__marks,
  .lq-tline--row.lq-tline--hit .lq-tline__marks {
    display: flex;
  }
}

.lq-tpanel__foot {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-tpanel__foot > .lq-icon {
  flex: none;
  width: 14px;
  height: 14px;
  margin-block-start: 2px;
}

/* The transcript locked (24:1875): lines' ghosts, then the lock, what unlocks it and the way there. */
.lq-tpanel__locked {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
}

.lq-tpanel__ghost {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--color-text-muted);
}

.lq-tpanel__ghost-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lq-tpanel__ghost-bar {
  width: 75%;
  height: 8px;
  border-radius: 4px;
  background: var(--color-bg-muted);
}

.lq-tpanel__ghost-bar--mid {
  width: 58%;
}

.lq-tpanel__ghost-bar--short {
  width: 42%;
}

.lq-tpanel__lock {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lq-tpanel__lock-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.lq-tpanel__lock-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* The moments saved from this video (24:1442): the range on amber, when, the name, who. */
.lq-saved-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* «مقاطع محفوظة»: the panel keeps to the aside's width, its rows ellipsed inside. */
.lq-saved-panel {
  min-width: 0;
}

.lq-saved {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 12px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-saved__top,
.lq-saved__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lq-saved__range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-bg-selection-soft);
  color: var(--color-text-primary);
  cursor: pointer;
}

.lq-saved__range:hover {
  background: var(--color-bg-selection);
}

.lq-saved__range > .lq-icon {
  width: 12px;
  height: 12px;
}

.lq-saved__when {
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-saved__title {
  overflow: hidden;
  font: 400 14px / 24px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-saved__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.lq-saved__title a:hover {
  text-decoration: underline;
}

.lq-saved__by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-ui);
}

.lq-saved__kind {
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

.lq-saved__actions {
  display: inline-flex;
  gap: 2px;
  margin-inline-start: auto;
}

.lq-saved__who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-saved__edit:hover,
.lq-saved__share:hover,
.lq-saved__copy:hover,
.lq-saved__fork:hover {
  color: var(--color-text-primary);
}

.lq-saved__delete:hover {
  color: var(--color-status-danger);
}

/* The licence dialogs' card (52:3191, 52:3352): the source, its platform and state, the picture. */
.lq-licence__summary {
  gap: 12px;
}

.lq-licence__card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lq-licence__face {
  flex: none;
}

.lq-licence__about {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lq-licence__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.lq-licence__source {
  font: 500 16px / 24px var(--font-ui);
}

.lq-licence__line {
  font: 400 14px / 24px var(--font-ui);
  overflow-wrap: anywhere;
}

.lq-licence__thumb {
  flex: none;
  width: 96px;
}

.lq-licence__clip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-licence__clip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lq-licence__quote {
  margin: 0;
  color: var(--color-text-primary);
  font: 500 16px / 28px var(--font-ui);
}

.lq-licence__track {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-secondary);
}

.lq-licence__track > .lq-track {
  flex: 1;
  min-width: 0;
}

.lq-licence__pair {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}

.lq-licence__preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.lq-licence__as {
  color: var(--color-text-secondary);
}

.lq-licence__as:empty,
.lq-licence__note:empty {
  display: none;
}

.lq-licence__note-icon {
  display: inline-flex;
}

.lq-licence__terms {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--color-status-success-bg);
}

.lq-licence__evidence {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

.lq-licence__file {
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* The licence request's message, to copy and send. */
.lq-licence__message {
  min-height: 12rem;
  font-size: 14px;
  line-height: 24px;
  resize: vertical;
}

/*
 * A request's steps (Figma «Local/Flows/TrackerStep» 47:243): the rail at the start, its node
 * (a green check done, an ink ring now, a grey ring to come, a red cross ended badly), the line to
 * the next; the words beside it.
 */
.lq-tracker {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lq-tracker__step {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

.lq-tracker__rail {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 24px;
}

.lq-tracker__node {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-bg-surface);
}

.lq-tracker__node > .lq-icon {
  width: 14px;
  height: 14px;
}

.lq-tracker__dot {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-action-primary);
}

.lq-tracker__line {
  flex: 1;
  width: 2px;
  min-height: 16px;
  border-radius: 1px;
  background: var(--color-border-strong);
}

.lq-tracker__step--done .lq-tracker__line {
  background: var(--color-status-success);
}

.lq-tracker__step:last-child .lq-tracker__line {
  display: none;
}

.lq-tracker__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-block-end: 24px;
}

.lq-tracker__step:last-child .lq-tracker__body {
  padding-block-end: 0;
}

.lq-tracker__title {
  color: var(--color-text-primary);
  font: 500 16px / 24px var(--font-ui);
}

.lq-tracker__meta {
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-tracker__meta:empty {
  display: none;
}

.lq-tracker__step--done .lq-tracker__node {
  border-color: var(--color-status-success);
  background: var(--color-status-success);
  color: var(--color-text-inverse);
}

.lq-tracker__step--current .lq-tracker__node {
  border-color: var(--color-action-primary);
}

.lq-tracker__step--current .lq-tracker__dot {
  display: block;
}

.lq-tracker__step--todo .lq-tracker__title {
  color: var(--color-text-secondary);
}

.lq-tracker__step--failed .lq-tracker__node {
  border-color: var(--color-status-danger);
  background: var(--color-status-danger);
  color: var(--color-text-inverse);
}

/* The share dialog (32:714): the range on amber and the video, the link, one wide copy button. */
.lq-share__link {
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: left;
}

.lq-share__range {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lq-share__chip {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-selection-soft);
  color: var(--color-text-primary);
}

.lq-share__about {
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

/* The sheet's quote of the words said (56:2279, D12.207). */
.lq-save-moment__quote {
  margin: 0;
  color: var(--color-text-primary);
  font: 500 16px / 28px var(--font-ui);
}

@media (max-width: 767px) {
  /*
   * The sheet on a phone (56:2279): a grabber over its title, and its save across the width; the
   * cross in its head closes it, so «إلغاء» goes (D12.207).
   */
  .lq-dialog:has(.lq-save-moment) > .lq-dialog__inner::before {
    content: "";
    align-self: center;
    width: 40px;
    height: 4px;
    margin-block: -12px -8px;
    border-radius: 2px;
    background: var(--color-border-strong);
  }

  .lq-dialog:has(.lq-save-moment) .lq-dialog__actions > [data-lq-close] {
    display: none;
  }

  .lq-dialog:has(.lq-save-moment) .lq-dialog__actions > .lq-btn--accent {
    min-height: 56px;
    font-size: 16px;
  }
}

/*
 * The projects list (Figma «مشاريعي» 47:368): the upload strip, the kind tabs with the search,
 * then the table: a hairline between rows, the columns 1fr / 112 / 56 / 120 / 96 / 104 / 32 as
 * the design sets them (94:1135), the row's buttons over its owner and date while it is pointed
 * at or focused.
 */
.lq-upload-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 16px 24px;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.lq-upload-strip > .lq-dropzone {
  display: grid;
  flex: 1 1 360px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title pick"
    "icon hint pick";
  align-items: center;
  gap: 2px 16px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: start;
}

.lq-upload-strip > .lq-dropzone > .lq-icon {
  grid-area: icon;
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 13px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.lq-upload-strip > .lq-dropzone > .lq-dropzone__title {
  grid-area: title;
}

.lq-upload-strip > .lq-dropzone > p:not(.lq-dropzone__title) {
  grid-area: hint;
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
}

.lq-upload-strip > .lq-dropzone > .lq-btn {
  grid-area: pick;
}

.lq-upload-strip > .lq-dropzone[data-over] {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 8px;
}

/* The file under way: its name and percent, pause and cancel, the bar, what went and what is left. */
.lq-upload {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  gap: 8px;
  padding-inline-start: 24px;
  border-inline-start: 1px solid var(--color-border-default);
}

.lq-upload__file {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-upload .lq-upload__file > .lq-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.lq-upload__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-upload__percent {
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-mono);
}

.lq-upload__bar {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 2px;
  background: var(--color-bg-muted);
  appearance: none;
}

.lq-upload__bar::-webkit-progress-bar {
  border-radius: 2px;
  background: var(--color-bg-muted);
}

.lq-upload__bar::-webkit-progress-value {
  border-radius: 2px;
  background: var(--color-control-on);
}

.lq-upload__bar::-moz-progress-bar {
  border-radius: 2px;
  background: var(--color-control-on);
}

.lq-upload__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
}

/* The list's tab at the start, the search at the end of the same line (47:472). */
.lq-projects-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-projects-tabs {
  border-block-end: 0;
}

/* «كل المشاريع» names the list and counts it: the selected tab's look, not a control (D12.306). */
.lq-projects-all {
  margin: 0;
  color: var(--color-text-primary);
}

.lq-projects-all::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  height: 3px;
  border-start-start-radius: 2px;
  border-start-end-radius: 2px;
  background: var(--color-accent-amber);
}

.lq-projects-tools > .lq-tsearch {
  flex: 0 1 260px;
  margin-block-end: 8px;
}

.lq-projects-tools .lq-tsearch__input {
  min-height: 32px;
  padding-block: 3px;
}

/* The table's head and rows share one grid. */
.lq-projects-head,
.lq-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 56px 120px 96px 104px 32px;
  align-items: center;
  column-gap: 0;
  padding-inline: 16px;
}

.lq-projects-head {
  margin-block-start: 16px;
  padding-block: 12px;
  border-block-end: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  font: 500 12px / 16px var(--font-ui);
}

.lq-projects-head__project {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-projects {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lq-project {
  position: relative;
  padding-block: 12px;
  border-block-end: 1px solid var(--color-border-default);
}

.lq-project:hover,
.lq-project:focus-within {
  background: var(--color-bg-subtle);
}

.lq-project__main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding-inline-end: 16px;
}

.lq-project__thumb {
  flex: none;
  width: 128px;
  border-radius: var(--radius-md);
}

.lq-project__thumb .lq-thumb__slot--bottom {
  inset-block-end: 6px;
  inset-inline-end: 6px;
}

.lq-project__length:empty {
  display: none;
}

.lq-project__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lq-project__title {
  overflow: hidden;
  font: 500 16px / 24px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-project__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.lq-project__title a:hover {
  text-decoration: underline;
}

.lq-project__source {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font: 400 14px / 24px var(--font-ui);
}

.lq-project__glyph {
  display: inline-flex;
  flex: none;
}

.lq-project__glyph:empty {
  display: none;
}

.lq-project__brand {
  display: inline-flex;
}

.lq-project .lq-project__brand > .lq-icon {
  width: 14px;
  height: 14px;
}

.lq-project__publisher {
  flex: none;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.lq-project__video {
  overflow: hidden;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Where the cut sits in its video, and the video's length (94:1028): shown once known. */
.lq-project__cut {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
}

.lq-project__cut--on {
  display: flex;
}

.lq-project__cut > .lq-track {
  width: 96px;
  height: 10px;
}

.lq-project__total {
  font-size: 13px;
}

.lq-project__rights:empty {
  display: none;
}

.lq-project__versions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-primary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-project .lq-project__versions > .lq-icon {
  width: 14px;
  height: 14px;
  color: var(--color-text-secondary);
}

/* The kind, quiet as the design's status: a dot and a word (47:313). */
.lq-project__kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font: 500 12px / 16px var(--font-ui);
}

.lq-project__kind-text {
  white-space: nowrap;
}

.lq-project__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-status-success);
}

.lq-project[data-kind="virtual"] .lq-project__dot {
  background: var(--color-rights-embedded);
}

.lq-project__owner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-text-secondary);
  font: 500 14px / 20px var(--font-ui);
}

.lq-project__owner-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-project__when {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-secondary);
  font: 400 14px / 24px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Who changed it last, when not its maker (ت-4): a quiet line under the time. */
.lq-project__by {
  display: block;
  overflow: hidden;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-ui);
  text-overflow: ellipsis;
}

.lq-project__actions {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

.lq-project__edit:hover,
.lq-project__share:hover,
.lq-project__publish:hover,
.lq-project__fork:hover {
  color: var(--color-text-primary);
}

.lq-project__delete:hover {
  color: var(--color-status-danger);
}

.lq-projects-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block-start: 24px;
}

@media (hover: hover) and (min-width: 1280px) {
  /* Pointed at or focused, the row's buttons stand over its owner and date (94:1135 «Hover»). */
  .lq-project__actions {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 16px;
    align-items: center;
    padding-inline-start: 16px;
    background: var(--color-bg-subtle);
    opacity: 0;
    pointer-events: none;
  }

  .lq-project:hover .lq-project__actions,
  .lq-project:focus-within .lq-project__actions {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 1279px) {
  /* Narrower: the kind and the owner go, the buttons take their place in the row. */
  .lq-projects-head,
  .lq-project {
    grid-template-columns: minmax(0, 1fr) 112px 56px 104px auto;
  }

  .lq-projects-head > :nth-child(4),
  .lq-projects-head > :nth-child(5),
  .lq-project__kind,
  .lq-project__owner {
    display: none;
  }
}

@media (max-width: 767px) {
  /* A phone: each project a small card, its facts on a line under it, its buttons under them. */
  .lq-projects-head {
    display: none;
  }

  .lq-project {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-inline: 0;
  }

  .lq-project__main {
    flex-basis: 100%;
    padding-inline-end: 0;
  }

  .lq-project__thumb {
    width: 96px;
  }

  .lq-project__actions {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .lq-project__actions .lq-iconbtn {
    width: 44px;
    height: 44px;
  }

  .lq-upload {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .lq-upload-strip > .lq-dropzone {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "hint"
      "pick";
    justify-items: start;
  }

  .lq-upload-strip > .lq-dropzone > .lq-icon {
    display: none;
  }

  .lq-projects-tools > .lq-tsearch {
    flex-basis: 100%;
  }
}

@media (min-width: 768px) {
  /* The phone's caption under the save button is said by the panel's own hint here. */
  .lq-clip__caption {
    display: none;
  }

  /* «احفظ اللحظة في مجموعة» as its bookmark alone beside the clip's two actions (D12.201). */
  .lq-clip__save {
    width: 32px;
    padding-inline: 0;
  }

  .lq-clip__save > .lq-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 768px) and (hover: hover) {
  /* A saved moment's buttons show on the row the pointer or the focus is on (24:1442). */
  .lq-saved__actions {
    opacity: 0;
  }

  .lq-saved:hover .lq-saved__actions,
  .lq-saved:focus-within .lq-saved__actions {
    opacity: 1;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  /* The side column goes under the player on tablets (hand-off §3). */
  .lq-studio > .lq-span-8,
  .lq-studio > .lq-span-4 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  /*
   * The phone (Figma 54:1662, 95:763): the player from edge to edge under the top bar, no
   * breadcrumb; the clip's in and out side by side, its save across the width, then the video.
   */
  .lq-studio-page > .lq-crumbs {
    display: none;
  }

  .lq-studio > .lq-span-8,
  .lq-studio > .lq-span-4 {
    grid-column: 1 / -1;
  }

  .lq-stage {
    margin-inline: calc(-1 * var(--page-padding));
    border-radius: 0;
  }

  .lq-stage > video {
    max-height: 56vh;
  }

  .lq-stage__caption {
    display: none;
  }

  .lq-clip {
    padding: 16px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .lq-clip__note {
    display: none;
  }

  .lq-clip__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lq-clip__marks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .lq-clip__mark .lq-kbd {
    display: none;
  }

  .lq-clip__mark > .lq-btn,
  .lq-clip__marks > .lq-btn {
    width: 100%;
    min-height: 44px;
  }

  .lq-clip__marks > .lq-btn--ghost {
    grid-column: 1 / -1;
  }

  .lq-clip__do {
    flex-direction: column;
    align-items: stretch;
    margin-inline-start: 0;
  }

  .lq-clip__do > .lq-btn {
    min-height: 44px;
  }

  .lq-clip__do > .lq-btn--accent {
    order: -1;
    min-height: 56px;
    font-size: 16px;
  }

  .lq-clip__files {
    justify-content: stretch;
  }

  .lq-clip__files > .lq-btn {
    flex: 1;
    min-height: 44px;
  }

  .lq-vmeta__title {
    font-size: 24px;
    line-height: 36px;
  }

  .lq-vmeta__original {
    margin-inline-start: 0;
  }

  .lq-range__times {
    gap: 8px 16px;
  }

  .lq-range__time {
    width: 6.5em;
  }

  .lq-range__more > summary {
    min-height: 44px;
  }

  .lq-tline__marks {
    display: flex;
  }

  .lq-tline__marks .lq-btn,
  .lq-tline--row > .lq-tline__time,
  .lq-saved__range {
    min-height: 44px;
  }

  .lq-saved__actions .lq-iconbtn {
    width: 44px;
    height: 44px;
  }

  .lq-licence__pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .lq-licence__thumb {
    display: none;
  }

  .lq-projects-tools > .lq-tsearch {
    max-width: none;
  }
}