/*
 * The editor (plan 12, stage 6; Figma «المحرر» 25:785): a dark page of its own, without the app's
 * nav. The bar above, then the transcript at the start, the stage in the middle and the
 * properties at the end, the timeline under them left to right (the hand-off's one exception to
 * the page's direction), and the shortcuts at the foot. On tablets the transcript goes under the
 * stage; on phones the editor gives way to a notice (D12.148).
 */
.lq-editor-page {
  --lq-editor-bar: 56px;
  --lq-tl-height: 148px;
  --lq-tl-ruler: 28px;
  --lq-tl-video: 64px;
  --lq-tl-captions: 36px;
  --lq-tl-thumb: 14px;
  min-height: 100vh;
  background: var(--color-bg-canvas);
}

/* What the module hides stays hidden, whatever display its class gives it. */
.lq-editor-page [hidden] {
  display: none;
}

.lq-editor {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* The bar: back, the project's name, the version and its history, the save state, the actions. */
.lq-editor__bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: var(--lq-editor-bar);
  padding: 8px 16px;
  background: var(--color-bg-canvas);
  border-block-end: 1px solid var(--color-border-default);
}

.lq-editor__back {
  flex: none;
}

.lq-editor__title {
  min-width: 0;
  max-width: 32ch;
  overflow: hidden;
  font: 700 18px / 28px var(--font-heading);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-editor__divider {
  width: 1px;
  height: 24px;
  background: var(--color-border-default);
}

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

.lq-editor__save .lq-icon {
  width: 16px;
  height: 16px;
}

.lq-editor__save--saved {
  color: var(--color-status-success);
}

.lq-editor__save--failed {
  color: var(--color-status-danger);
}

.lq-editor__spacer {
  flex: 1;
}

/* The status region: a banner under the bar when something went wrong, nothing otherwise. */
.lq-editor__status:not(:empty) {
  padding: 12px 16px 0;
}

.lq-editor__status .lq-visually-hidden + * {
  margin-block-start: 0;
}

/* Phones: the notice takes the editor's place (the body and the timeline are hidden below). */
.lq-editor__phone {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

/* The body: three columns on wide screens. */
.lq-editor__body {
  display: grid;
  flex: 1;
  grid-template-columns: 320px minmax(0, 1fr) 300px;
  grid-template-areas: "transcript stage props";
  min-height: 0;
}

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

.lq-editor__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: calc(100vh - var(--lq-editor-bar) - var(--lq-tl-height) - 88px);
  min-height: 420px;
  background: var(--color-bg-surface);
}

.lq-editor__transcript {
  grid-area: transcript;
  border-inline-end: 1px solid var(--color-border-default);
}

.lq-editor__props {
  grid-area: props;
  border-inline-start: 1px solid var(--color-border-default);
}

.lq-editor__panel-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px 8px;
}

.lq-editor__h2 {
  font: 700 18px / 28px var(--font-heading);
}

.lq-editor__h3 {
  font: 700 16px / 24px var(--font-heading);
}

/* The transcript's search, and its lines under it, scrolling on their own. */
.lq-editor__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 8px;
}

.lq-editor__search .lq-input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding-block: 5px;
}

.lq-editor__lines {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 12px;
}

/* A line (25:785): the words at the start, the time at the end; the marks under the line the
   pointer or the focus is on, and under the one playing. */
.lq-editor__line {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2px 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
}

.lq-editor__line .lq-tline__text {
  flex: 1;
  order: 1;
  font: 400 17px / 32px var(--font-ui);
}

.lq-editor__line[hidden] {
  display: none;
}

.lq-editor__seek {
  padding: 4px 6px;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font: 500 12px / 16px var(--font-mono);
  direction: ltr;
  unicode-bidi: isolate;
}

.lq-editor__seek:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
}

.lq-editor__line > .lq-editor__seek {
  order: 2;
  margin-block-start: 6px;
}

.lq-editor__marks {
  display: none;
  flex-basis: 100%;
  gap: 2px;
  order: 3;
}

.lq-editor__line:hover > .lq-editor__marks,
.lq-editor__line:focus-within > .lq-editor__marks,
.lq-editor__line[aria-current="true"] > .lq-editor__marks {
  display: inline-flex;
}

@media (hover: none) {
  .lq-editor__marks {
    display: inline-flex;
  }
}

/* The stage: the aspect above, the picture, the transport under it. */
.lq-editor__stage {
  grid-area: stage;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 12px 16px;
}

.lq-editor__stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

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

.lq-editor__stage-box {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 240px;
  max-height: calc(100vh - var(--lq-editor-bar) - var(--lq-tl-height) - 200px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-950);
}

.lq-editor__stage-box > video {
  width: 100%;
  height: 100%;
  max-height: inherit;
  object-fit: contain;
  background: #000;
}

.lq-editor__stage-box > iframe {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
}

.lq-editor__stage-box .lq-embed--tall {
  height: auto;
  min-height: 0;
}

.lq-editor__stage-note {
  max-width: 40ch;
  padding: 24px;
  text-align: center;
}

/* The transport reads left to right, the timecode at its start and the keys at its end. */
.lq-editor__transport {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.lq-editor__timecode {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.lq-editor__now {
  font-size: 20px;
  line-height: 28px;
}

.lq-editor__controls {
  display: inline-flex;
  gap: 4px;
  margin-inline: auto;
}

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

/* The properties: tabs at the top, each panel scrolling on its own. */
.lq-editor__props .lq-tabs {
  flex: none;
  justify-content: space-between;
  gap: 6px;
  padding-inline: 10px;
}

.lq-editor__props .lq-tab {
  padding-inline: 2px;
  font-size: 13px;
}

.lq-editor__props .lq-tabpanel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}

.lq-editor__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lq-editor__note {
  color: var(--color-text-secondary);
  font: 400 13px / 20px var(--font-ui);
}

.lq-editor__details {
  margin-block-start: 16px;
}

.lq-editor__section + .lq-editor__section,
.lq-editor__section + .lq-editor__details,
.lq-editor__section + [hidden] + .lq-editor__section {
  margin-block-start: 20px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-editor__details > summary {
  min-height: var(--target-min);
  padding-block: 6px;
  color: var(--color-text-primary);
  font: 500 14px / 20px var(--font-ui);
  cursor: pointer;
}

.lq-editor__details > div {
  padding-block-start: 12px;
}

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

/* Inputs in the narrow column: a little shorter than the forms' 44. */
.lq-editor__props .lq-input {
  min-height: 40px;
  padding-block: 5px;
  font-size: 14px;
  line-height: 24px;
}

.lq-editor__props .lq-field {
  gap: 6px;
}

.lq-editor__props .lq-field__label {
  font-size: 13px;
}

/* Timecode fields: read-only figures in the timecode face, an icon before each. */
.lq-tcfield {
  gap: 4px;
}

.lq-tcfield__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lq-tcfield__row > .lq-icon {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
}

.lq-tcfield__input {
  font: 500 15px / 24px var(--font-mono);
  text-align: start;
}

.lq-tcfield__input:read-only {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-default);
}

/* Keys as a Latin keyboard has them, then the words. */
.lq-keyhint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

.lq-keyhint__keys {
  display: inline-flex;
  gap: 4px;
}

/* Sliders and colours in the panels (their own class: the video page's range bar is `.lq-range`). */
.lq-editor__slider {
  width: 100%;
  height: 24px;
  margin: 0;
  accent-color: var(--color-control-on);
}

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

.lq-editor__color {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 13px / 20px var(--font-ui);
}

.lq-color {
  width: 40px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
}

/* The clips of the composition: a sortable list, each row its name, its range and a delete. */
.lq-editor__clip {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lq-editor__clip-name {
  overflow: hidden;
  font: 500 14px / 20px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lq-editor__clip-times {
  color: var(--color-text-muted);
}

.lq-editor__clip-del {
  flex: none;
}

.lq-editor__props .lq-sortable__item {
  gap: 6px;
  padding-inline-end: 6px;
}

.lq-editor__props .lq-sortable__moves {
  gap: 0;
}

/* The captions' lines, each with its time and an input. */
.lq-editor__caplines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
}

.lq-editor__capline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.lq-editor__capline .lq-timecode {
  color: var(--color-text-muted);
}

.lq-editor__capline .lq-input--edited {
  border-color: var(--color-accent-amber);
}

/* Plain lists: overlays, brand files, templates, each row with its actions at the end. */
.lq-editor__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lq-editor__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  font: 400 13px / 20px var(--font-ui);
}

.lq-editor__row-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lq-editor__row-actions {
  display: inline-flex;
  flex: none;
  gap: 4px;
}

/* The frame preview: the aspect in the viewBox, a cross where the crop keeps its interest. */
.lq-frame {
  display: block;
  width: 100%;
  height: auto;
}

.lq-frame__box {
  fill: var(--ink-950);
  stroke: var(--color-border-strong);
  stroke-width: 4;
}

.lq-frame__cross {
  stroke: var(--color-border-default);
  stroke-width: 2;
}

.lq-frame__dot {
  fill: var(--color-status-live);
  stroke: var(--white);
  stroke-width: 4;
}

/* The kit's preview: the canvas, the platforms' safe zones, and where the logo lands. */
.lq-kit-preview {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin-inline: auto;
}

.lq-kit-preview__canvas {
  fill: var(--ink-950);
  stroke: var(--color-border-strong);
  stroke-width: 4;
}

.lq-kit-preview__band {
  fill: var(--color-status-live);
  fill-opacity: 0.22;
}

.lq-kit-preview__logo {
  fill: var(--white);
  stroke: var(--color-accent-amber);
  stroke-width: 6;
}

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

/* The timeline: the tracks' headers at the start (the left), the lanes beside them. */
.lq-editor__timeline {
  flex: none;
  padding: 8px 16px 12px;
  background: var(--color-bg-surface);
  border-block-start: 1px solid var(--color-border-default);
}

.lq-tl {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 0 8px;
  height: var(--lq-tl-height);
}

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

.lq-tl__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 10px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font: 500 13px / 20px var(--font-ui);
}

.lq-tl__head .lq-icon {
  width: 16px;
  height: 16px;
}

.lq-tl__head--ruler {
  height: var(--lq-tl-ruler);
  background: none;
}

.lq-tl__head:nth-child(2) {
  height: var(--lq-tl-video);
}

.lq-tl__head:nth-child(3) {
  height: var(--lq-tl-captions);
}

.lq-tl__lanes {
  position: relative;
  padding-inline: calc(var(--lq-tl-thumb) / 2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}

.lq-tl__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lq-tl__label {
  fill: var(--color-text-muted);
  font: 500 11px var(--font-mono);
}

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

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

.lq-tl__clip {
  fill: var(--ink-600);
  stroke: var(--ink-400);
  stroke-width: 1;
}

.lq-tl__clip-text {
  fill: var(--color-text-primary);
  font: 500 11px var(--font-mono);
}

.lq-tl__cap {
  fill: var(--ink-500);
}

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

.lq-tl__range {
  fill: var(--color-accent-amber);
  fill-opacity: 0.14;
  stroke: var(--color-accent-amber);
  stroke-width: 1;
}

.lq-tl__playhead {
  stroke: var(--color-status-live);
  stroke-width: 2;
}

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

.lq-tl__flag-text {
  fill: var(--white);
  font: 500 10px var(--font-mono);
}

/*
 * The handles: native range inputs the full width of the lanes, one over the other. The inputs
 * themselves take no pointer, only their thumbs do, so all three can be dragged and the lanes
 * under them still take a click. The thumb is as wide as the lanes' padding, so its centre runs
 * over the SVG's 0 to 100%.
 */
.lq-tl__handle {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  pointer-events: none;
}

.lq-tl__handle::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}

.lq-tl__handle::-moz-range-track {
  height: 100%;
  background: transparent;
}

.lq-tl__handle::-webkit-slider-thumb {
  width: var(--lq-tl-thumb);
  height: var(--lq-tl-height);
  border: 0;
  border-radius: 0;
  background: var(--lq-thumb-face);
  appearance: none;
  pointer-events: auto;
  cursor: ew-resize;
}

.lq-tl__handle::-moz-range-thumb {
  width: var(--lq-tl-thumb);
  height: var(--lq-tl-height);
  border: 0;
  border-radius: 0;
  background: var(--lq-thumb-face);
  pointer-events: auto;
  cursor: ew-resize;
}

.lq-tl__handle:focus-visible {
  outline: none;
  box-shadow: none;
}

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

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

/* The in bracket: a bar at its left with caps to the right; the out bracket, mirrored. */
.lq-tl__handle--in {
  --lq-thumb-face:
    linear-gradient(var(--color-accent-amber), var(--color-accent-amber)) left top / 3px 100%
    no-repeat,
    linear-gradient(var(--color-accent-amber), var(--color-accent-amber)) left top / 100% 6px
    no-repeat,
    linear-gradient(var(--color-accent-amber), var(--color-accent-amber)) left bottom / 100% 6px
    no-repeat;
}

.lq-tl__handle--out {
  --lq-thumb-face:
    linear-gradient(var(--color-accent-amber), var(--color-accent-amber)) right top / 3px 100%
    no-repeat,
    linear-gradient(var(--color-accent-amber), var(--color-accent-amber)) right top / 100% 6px
    no-repeat,
    linear-gradient(var(--color-accent-amber), var(--color-accent-amber)) right bottom / 100% 6px
    no-repeat;
}

/* The playhead: a red line, with its flag at the top. */
.lq-tl__handle--now {
  z-index: 1;
  --lq-thumb-face:
    linear-gradient(var(--color-status-live), var(--color-status-live)) center top / 2px 100%
    no-repeat,
    linear-gradient(var(--color-status-live), var(--color-status-live)) center top / 100% 8px
    no-repeat;
}

/* The foot: the shortcuts, and the file's format at the end. */
.lq-editor__hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-height: 36px;
  padding: 6px 16px;
  border-block-start: 1px solid var(--color-border-default);
}

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

/* The export's choices: rows to pick one of. */
.lq-editor__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.lq-editor__choices > legend {
  padding: 0;
  margin-block-end: 8px;
}

.lq-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  cursor: pointer;
}

.lq-choice:has(.lq-radio:checked) {
  border-color: var(--color-border-focus);
  background: var(--color-bg-subtle);
}

.lq-choice:has(.lq-radio:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

.lq-choice__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lq-choice__title {
  font: 500 15px / 22px var(--font-ui);
}

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

.lq-radio {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-control-on);
}

/* The history: a sheet from the start edge. */
.lq-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline: 0 auto;
  width: min(380px, 100vw);
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
}

.lq-drawer[open] {
  animation: lq-slide-in var(--duration-open) var(--ease-out);
}

@keyframes lq-slide-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}

.lq-drawer:dir(ltr)[open] {
  animation-name: lq-slide-in-ltr;
}

@keyframes lq-slide-in-ltr {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}

.lq-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.lq-drawer__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 16px;
}

.lq-drawer__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  padding: 0 24px 24px;
}

.lq-drawer__foot {
  padding: 16px 24px;
  border-block-start: 1px solid var(--color-border-default);
}

/* Versions, newest first, on a line with a dot each; the current one raised. */
.lq-history {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline-start: 20px;
}

.lq-history::before {
  content: "";
  position: absolute;
  inset-block: 12px;
  inset-inline-start: 5px;
  width: 2px;
  background: var(--color-border-default);
}

.lq-version {
  position: relative;
  padding: 10px 12px;
  border-radius: var(--radius-md);
}

.lq-version--current {
  background: var(--color-bg-raised);
}

.lq-version__dot {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: -20px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-bg-surface);
}

.lq-version--current .lq-version__dot {
  border-color: var(--color-control-on);
  background: var(--color-control-on);
}

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

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

.lq-version__num {
  font: 500 13px / 20px var(--font-mono);
  direction: ltr;
  unicode-bidi: isolate;
}

.lq-version__badge {
  background: var(--color-control-on);
  color: var(--white);
}

/* The date as the Arabic locale writes it, day first and «ص» or «م» last: its own direction. */
.lq-version__when {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font: 400 12px / 18px var(--font-mono);
  unicode-bidi: plaintext;
}

.lq-version__text {
  font: 500 15px / 22px var(--font-ui);
}

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

.lq-version__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 6px;
}

.lq-history__origin {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-md);
}

.lq-history__origin-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lq-history__origin-head .lq-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-inline-end: 4px;
}

.lq-history__origin-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

/* Tablets: the transcript goes under the stage, the properties keep their column. */
/* Undo and redo in the bar (25:785), after the save's state. */
.lq-editor__history {
  display: inline-flex;
  gap: 2px;
}

/* The trim tab's lines that sum up the captions and the logo, each opening its tab (25:785). */
.lq-editor__summaries {
  gap: 0;
  padding-block: 4px;
}

.lq-editor__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 0;
  border: 0;
  border-block-end: 1px solid var(--color-border-default);
  background: none;
  color: var(--color-text-primary);
  text-align: start;
  cursor: pointer;
}

.lq-editor__summary:last-child {
  border-block-end: 0;
}

.lq-editor__summary > .lq-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
}

.lq-editor__summary-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.lq-editor__summary-title {
  font: 500 14px / 20px var(--font-ui);
}

.lq-editor__summary:hover .lq-editor__summary-title {
  text-decoration: underline;
}

.lq-editor__summary-value {
  overflow: hidden;
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* The zoom over the tracks' headers: out, the level, in (25:785). */
.lq-tl__zoom {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  direction: ltr;
}

.lq-tl__zoom-out {
  font: 500 18px / 1 var(--font-ui);
}

.lq-tl__zoom-level {
  flex: 1;
  min-width: 0;
}

/* A handle outside the zoomed window keeps its place in the tab order; its thumb is not drawn. */
.lq-tl__handle--away::-webkit-slider-thumb {
  visibility: hidden;
}

.lq-tl__handle--away::-moz-range-thumb {
  visibility: hidden;
}

/* The frame's guides over the preview: the crop the size keeps, dashed, the rest shaded. */
.lq-editor__guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lq-editor__guides-shade {
  fill: var(--ink-950);
  fill-opacity: 0.45;
}

.lq-editor__guides-box {
  fill: none;
  stroke: var(--white);
  stroke-dasharray: 8 6;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.lq-editor__guides-label {
  fill: var(--white);
  font-family: var(--font-mono);
}

/* The template tab (135:998): the one this version carries at the top, the others as cards. */
.lq-editor__applied {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-focus);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

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

.lq-editor__applied-name {
  font: 600 15px / 22px var(--font-ui);
}

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

.lq-editor__applied-ends {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lq-editor__applied-end {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-block: 6px;
  border-block-start: 1px solid var(--color-border-default);
  font: 500 13px / 20px var(--font-ui);
}

.lq-editor__row--tpl {
  align-items: flex-start;
  padding-block: 10px;
}

.lq-editor__row--tpl > .lq-editor__row-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}

.lq-editor__tpl-name {
  font: 600 14px / 20px var(--font-ui);
}

.lq-editor__tpl-on {
  flex: none;
}

.lq-editor__tpl-parts {
  flex-basis: 100%;
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

/*
 * «صدّر المقطع» (33:249, 135:1941): wider than a plain dialog, the choices at the start and what the
 * brand adds at the end; one column on a narrow screen.
 */
.lq-dialog:has(.lq-export) {
  width: min(880px, calc(100vw - 32px));
}

.lq-export {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lq-export__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px 32px;
}

.lq-export__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* A fieldset keeps to its column instead of its widest content. */
.lq-export__quality,
.lq-export__captions,
.lq-export__brand,
.lq-export__progress {
  min-width: 0;
}

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

.lq-export__cards > .lq-choice {
  min-height: 64px;
  padding-inline: 12px;
}

.lq-export__captions > .lq-choice {
  min-height: 44px;
}

.lq-export__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 4px;
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

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

.lq-export__h {
  margin-block-end: 8px;
  font: 500 14px / 20px var(--font-ui);
}

.lq-export__rows {
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  list-style: none;
}

.lq-export__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-block-start: 1px solid var(--color-border-default);
}

.lq-export__row:first-child {
  border-block-start: 0;
}

.lq-export__state {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-block-start: 1px;
  border-radius: 50%;
  background: var(--color-status-success-bg);
  color: var(--color-status-success);
}

.lq-export__state > .lq-icon {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
}

.lq-export__warn,
.lq-export__off,
.lq-export__row--warn .lq-export__ok,
.lq-export__row--off .lq-export__ok {
  display: none;
}

.lq-export__row--warn .lq-export__state {
  background: none;
  color: var(--color-accent-amber);
}

.lq-export__row--warn .lq-export__warn {
  display: block;
}

.lq-export__row--off .lq-export__state {
  background: none;
}

.lq-export__row--off .lq-export__off {
  display: block;
  grid-area: 1 / 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.lq-export__row-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lq-export__row-title {
  font: 500 14px / 22px var(--font-ui);
}

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

/* «15 ثانية · 1080p، MP4، ترجمة محروقة»: what the file will be, in one line. */
.lq-export__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 12px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.lq-export__sum > .lq-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
}

.lq-export__sum-main {
  font: 500 14px / 22px var(--font-ui);
}

.lq-export__sum-spec {
  margin-inline-start: auto;
  color: var(--color-text-secondary);
  font: 400 12px / 18px var(--font-ui);
}

/* While it runs: the clip, then the bar under its state and the time left. */
.lq-export__job {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}

.lq-export__job-title {
  font: 500 15px / 22px var(--font-ui);
}

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

.lq-export__progress-state {
  margin-block-end: 8px;
  font: 600 15px / 22px var(--font-ui);
}

@media (max-width: 767px) {
  .lq-export__grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 1279px) {
  .lq-editor__body {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas:
      "stage props"
      "transcript props";
  }

  .lq-editor__transcript {
    border-inline-end: 0;
    border-block-start: 1px solid var(--color-border-default);
  }

  .lq-editor__panel {
    max-height: none;
    min-height: 320px;
  }

  .lq-editor__transcript .lq-editor__lines {
    max-height: 360px;
  }

  .lq-editor__stage-box {
    max-height: 60vh;
  }
}

/* Phones: the notice, the history and the way back; the editor itself waits for a wider screen. */
@media (max-width: 767px) {
  .lq-editor__phone {
    display: flex;
  }

  .lq-editor__body,
  .lq-editor__timeline,
  .lq-editor__hints {
    display: none;
  }

  .lq-editor__title {
    max-width: 100%;
  }

  .lq-drawer {
    inset-block: auto 0;
    inset-inline: 0;
    width: 100vw;
    height: 90vh;
    border-start-start-radius: var(--radius-xl);
    border-start-end-radius: var(--radius-xl);
  }
}