/*CapCut-style editor layout. Loaded last; layout only, no behaviour.
   Studied on the user's CapCut 9.2 (scratch project 0927): full-height workspace, tools panel left, player centre, inspector right,
   full-width multi-track timeline with a time ruler across the bottom, compact top bar with Export on the right. */

/* ---------- site-wide: scrollbars ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: #323234 transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  background: #323234;
  border-radius: var(--r-sm);
}
*::-webkit-scrollbar-track {
  background: transparent;
}
/* CLAUDE 10-18 (design polish B3a): the 09-27 "site-wide motion polish" that stood here is gone. It put one 0.18 s / 0.2 s
   transition list and a translateY(1px) scale(.99) press on every button, link and field (109 elements on this page), which
   beat the Graphite press and hover; popped dialogs in with a keyframe and never out; and lifted a recent card. Press,
   hover, dialog, toast, page change and the card are one definition each in motion.css now. The focus ring stays here for
   every element the style.css list does not name (a, summary, [tabindex] ...), at the old specificity. */
:focus-visible:where(:not(button, input, select, textarea)) {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
/* CLAUDE 10-18 (polish B3a): one skeleton for the editor's loading placeholders (P10). Eight files each slid a gradient with
   background-position (a repaint on every frame) at their own speed (at-, capfx-, dl-, mb-, pic-, ml-, sl-, lph-shimmer). Now:
   a --c-raised block of the final shape and one pass of light that only moves a transform (m-skel in motion.css). On a phone
   the placeholders stand still, as phonescreen.css decided (100+ animated tiles cost the main thread a style pass a frame). */
:is(
  .at-skeleton span,
  .capfx-skel,
  .dl-skel,
  .mb-skel .mb-thumb,
  .mb-skel i,
  .cc-emoji-skel i,
  .ml-skel .ml-cover,
  .ml-skel .ml-text i,
  .sl-skel .sl-media,
  .lph-skel
) {
  position: relative;
  overflow: hidden;
  background: var(--c-raised);
}
:is(
  .at-skeleton span,
  .capfx-skel,
  .dl-skel,
  .mb-skel .mb-thumb,
  .mb-skel i,
  .cc-emoji-skel i,
  .ml-skel .ml-cover,
  .ml-skel .ml-text i,
  .sl-skel .sl-media,
  .lph-skel
)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: translateX(-100%);
  animation: m-skel var(--d-skel) linear infinite;
}
@media (max-width: 767.98px) {
  body.pe-on
    :is(
      .at-skeleton span,
      .capfx-skel,
      .dl-skel,
      .mb-skel .mb-thumb,
      .mb-skel i,
      .cc-emoji-skel i,
      .ml-skel .ml-cover,
      .ml-skel .ml-text i,
      .sl-skel .sl-media,
      .lph-skel
    )::after {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(
    .at-skeleton span,
    .capfx-skel,
    .dl-skel,
    .mb-skel .mb-thumb,
    .mb-skel i,
    .cc-emoji-skel i,
    .ml-skel .ml-cover,
    .ml-skel .ml-text i,
    .sl-skel .sl-media,
    .lph-skel
  )::after {
    animation: none; /* a still --c-raised block */
  }
}
/* kept: composer.css and studio.css still use these two (rc-in went with the page rise, which is m-page-in now) */
@keyframes rc-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rc-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Reduced motion is calm, not dead (plan 3.5). This used to be `animation: none; transition: none` on everything, which cut
   every fade too. Now: keyframes (movement and loops) stay off here and the shared patterns get their fade back from
   motion.css; transitions keep their colour and opacity (and the visibility that hides a faded-out thing) and lose the
   movement (transform, translate, scale, size, clip). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-property:
      color, background-color, border-color, outline-color, box-shadow, opacity, fill, stroke, text-decoration-color,
      visibility !important;
  }
  body:not(.pe-on) :is(.cc-section, aside.inspector .tab-content, .ci-pane, .ae-pane):not([hidden]) {
    animation: m-fade var(--d-ui) ease backwards !important; /* the page change keeps its fade */
  }
  /* a spinner keeps turning, slowly: a frozen one reads as a hang (the loops below are the editor's own spinners) */
  .ml-use i,
  .ml-row.playing[data-load='wait'] .ml-icon::before,
  .sl-card:not([data-state='added']) .sl-state i,
  .pm-spin {
    animation: m-spin 2.4s linear infinite !important;
  }
}

/* ---------- editor: time ruler (desktop layout only) ---------- */
.tl-ruler {
  display: none;
}

/* the version-history clock sits on the save-status line */
header #saveStatus {
  display: inline-block;
}
header .versions-btn {
  min-height: 0;
  margin-left: 6px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-size: 11px;
  line-height: 1;
}
.cc-transition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.cc-transition-grid button {
  display: grid;
  gap: 8px;
  place-items: center;
  padding: 16px 8px;
  border-radius: var(--r-md);
}
.cc-transition-grid button > span {
  font-size: 28px;
}
.cc-transition-grid button[aria-pressed='true'] {
  border-color: #afafb2;
  background: #29292b;
}
/* CLAUDE 10-01: per-cut transitions: which cut, the tiles in families, the length */
.cc-cuts .cc-transition-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.cc-cuts .cc-transition-grid button {
  gap: 4px;
  padding: 10px 4px;
  font-size: 12px;
}
.cc-cuts .cc-transition-grid button > span {
  font-size: 20px;
}
.cc-cut-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.cc-cut-row select {
  flex: 1;
  min-width: 0;
}
.cc-cut-note {
  margin: 0 0 12px;
  color: #a1a1aa;
  font-size: 12px;
}
.cc-adjust-entry {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.cc-adjust-entry .cc-adjust-value {
  width: 90px;
  padding: 7px 9px;
  font: inherit;
}
.cc-adjust-entry button {
  font-size: 12px;
  padding: 7px 10px;
}
.cc-fx button[hidden] {
  display: none;
}
.caption-workshop {
  display: grid;
  gap: 12px;
  padding: 4px;
  font-size: 13px;
}
.caption-workshop h3 {
  font-size: 17px;
  margin: 0;
}
.caption-workshop p {
  margin: 0;
  color: var(--muted, #a8adb8);
  line-height: 1.5;
}
.caption-workshop > label {
  display: grid;
  gap: 6px;
}
.caption-workshop input:not([type='checkbox']),
.caption-workshop textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 10px 12px;
  border-radius: var(--r-md);
}
.cw-options,
.cw-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.cw-options label {
  display: flex;
  gap: 5px;
  align-items: center;
}
.cw-options input {
  width: auto;
  margin: 0;
}
.cw-actions .cw-apply {
  flex: 1;
}
.cw-results {
  display: grid;
  gap: 10px;
}
.cw-line {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #323640;
  border-radius: var(--r-md);
  background: #171b22;
}
.cw-line.active {
  border-color: #afafb2;
}
.cw-line .cw-time {
  justify-self: start;
  padding: 3px 0;
  background: transparent;
  border: 0;
  color: #c8c8cb;
  font-variant-numeric: tabular-nums;
}
.cw-line .cw-preview {
  color: #e1e1e4;
  overflow-wrap: anywhere;
}
.caption-workshop button:focus-visible,
.caption-workshop input:focus-visible,
.caption-workshop textarea:focus-visible {
  outline: 2px solid #afafb2;
  outline-offset: 2px;
}
@media (min-width: 1100px) {
  body:not(.at-home) {
    overflow: hidden;
  }
  header {
    height: 52px;
    padding: 0 14px;
    gap: 16px;
    background: #0b0d0b;
    border-bottom: 1px solid #202022;
  }
  header .brand {
    min-width: 0;
    font-size: 17px;
    gap: 9px;
  }
  header .brand small {
    display: none;
  }
  header .brand .studio-mark {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }
  header .project-title input {
    font-size: 14px;
    padding: 6px 8px;
  }
  header #saveStatus {
    font-size: 11px;
  }
  header .header-actions {
    gap: 8px;
  }
  header .header-actions button {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: var(--r-pill);
  }
  header .local-pill {
    display: none;
  }

  main {
    max-width: none;
    height: calc(100dvh - 52px);
    min-height: 560px;
    padding: 8px;
    gap: 8px;
    position: relative;
    grid-template-columns: clamp(290px, 24vw, 390px) minmax(0, 1fr) clamp(290px, 24vw, 390px);
    grid-template-rows: minmax(0, 1fr) auto auto auto clamp(215px, 34vh, 340px);
    grid-template-areas: 'lib player insp' 'lib transport insp' 'lib seq insp' 'bar bar bar' 'tl tl tl';
  }
  /* CLAUDE 10-12 Graphite: regions differ by tone, not outlines; the preview's well is the darkest */
  main::before {
    content: '';
    grid-column: 2;
    grid-row: 1/4;
    background: var(--c-stage);
    border: 0;
    border-radius: var(--r-md);
    z-index: 0;
  }
  main::after {
    content: '';
    grid-area: tl;
    background: var(--c-surface);
    border: 0;
    border-radius: var(--r-md);
    z-index: 0;
  }
  main > *,
  .stage > * {
    z-index: 1;
  }
  .library,
  .inspector {
    min-height: 0;
    max-height: none;
    overflow: auto;
    border-radius: var(--r-md);
    background: var(--c-surface);
    border: 0;
    padding: 14px;
    --pin-top: -14px; /* (CLAUDE 10-20: controls.css .pin-set, over the padding) */
  }
  .library {
    grid-area: lib;
  }
  .inspector {
    grid-area: insp;
  }
  .stage {
    display: contents;
  }
  .stage-heading,
  .stage-note {
    display: none;
  }
  .preview-wrap {
    grid-area: player;
    align-self: center;
    justify-self: center;
    margin: 14px 14px 0;
    height: calc(100% - 14px);
    max-height: calc(100% - 14px);
    min-height: 0;
    max-width: calc(100% - 28px);
    flex: none;
    border-radius: var(--r-sm);
    border-color: transparent;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.6);
  }
  .transport {
    grid-area: transport;
    width: auto;
    margin: 0 14px;
    padding: 10px 0 8px;
    gap: 8px;
  }
  .transport #clock,
  .transport #duration {
    font-size: var(--t-meta);
    color: var(--c-fg-2);
  }
  .transport #playBtn {
    width: 34px;
    height: 34px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-primary-ink);
    border-color: var(--c-primary);
    font-size: 13px;
  }
  .sequence-strip {
    grid-area: seq;
    width: auto;
    margin: 0 14px 10px;
  }
  .sequence-strip:empty {
    display: none;
  }
  .trim-bar {
    grid-area: bar;
    width: auto;
    margin: 0;
  }
  .trim-bar > .eyebrow {
    display: inline;
  }
  .job-card {
    position: fixed;
    left: auto;
    right: 18px;
    bottom: 18px;
    width: 380px;
    z-index: 60;
  }

  #editTimeline {
    grid-area: tl;
    margin: 0;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-radius: var(--r-md);
    padding: 0;
  }
  #editTimeline[hidden] {
    display: none;
  }
  /* CLAUDE 10-12 Graphite (owner: only the clips are shapes): no boxes behind lanes or their names */
  .tl-tools {
    padding: 5px 10px;
    margin: 0;
    gap: 6px;
    border-bottom: 1px solid var(--c-line);
    flex: none;
  }
  .tl-tools button {
    min-height: var(--h-sm);
    padding: 4px 10px;
    font-size: var(--t-label);
    border-radius: var(--r-sm);
  }
  .tl-ruler {
    display: block;
    position: relative;
    flex: none;
    height: 22px;
    margin: 0 14px 0 104px;
    color: var(--c-fg-3);
    font-size: var(--t-meta);
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--c-line);
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 10%) bottom/100% 5px
      no-repeat;
  }
  .tl-ruler span {
    position: absolute;
    top: 3px;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
  }
  .tl-ruler span:first-child {
    transform: none;
  }
  .tl-body {
    flex: 1;
    min-height: 0;
    padding: 6px 14px 10px 10px;
    gap: 8px;
  }
  .tl-labels {
    width: 86px;
    gap: 6px;
  }
  .tl-labels span {
    height: 28px;
    line-height: 28px;
    font-size: var(--t-label);
    color: var(--c-fg-3);
    letter-spacing: 0;
    padding-left: 4px;
    border-radius: var(--r-xs);
    background: transparent;
  }
  .tl-labels span:first-child {
    height: 42px;
    line-height: 42px;
  }
  .tl-tracks {
    gap: 6px;
  }
  .tl-track {
    height: 28px;
    background: transparent;
    border-radius: var(--r-xs);
    overflow: visible;
  }
  .tl-track[data-track='video'] {
    height: 42px;
  }
  .tl-block {
    top: 2px;
    bottom: 2px;
    display: flex;
    align-items: center;
    line-height: 1.2;
    font-size: var(--t-meta);
    padding: 0 8px;
    border-radius: var(--r-xs);
  }
  .tl-seg {
    background: linear-gradient(180deg, #4e4e50, #3a3a3c);
    border-color: transparent;
    color: var(--c-fg);
    font-weight: 500;
  }
  .tl-seg:hover {
    border-color: rgba(255, 255, 255, 0.4);
  }
  .tl-cap {
    background: #34404c;
    border: 1px solid transparent;
    opacity: 1;
  }
  .tl-ov {
    background: #6a5616;
    border-color: #a08526;
  }
  .tl-music {
    background: #1f4260;
    border: 1px solid #2f5e86;
  }
  .tl-playhead {
    top: -28px;
    bottom: -4px;
    width: 2px;
    background: #ffffff;
    box-shadow: 0 0 0 1px #0006;
  }
  .tl-playhead::before {
    content: '';
    position: absolute;
    top: 0;
    left: -6px;
    width: 14px;
    height: 12px;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
    /* CLAUDE 10-01: the head is the grab handle (the line itself stays click-through for the clips under it) */
    pointer-events: auto;
    cursor: ew-resize;
  }
  /* CLAUDE 10-01: the selected track (click an empty lane or its name), as in CapCut */
  .tl-track.track-selected {
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
  }
  .tl-labels > span.track-selected {
    color: var(--c-fg);
    background: transparent;
  }
}

/* logo is a link back to Clipping; the timeline is always there, empty lanes say what goes in them */
a.brand {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.brand:hover .studio-mark {
  filter: brightness(1.2);
}
.tl-track:empty::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-size: var(--t-meta);
  color: var(--c-fg-3);
  opacity: 0.7;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  pointer-events: none;
}
.tl-track[data-track='video']:empty::after {
  content: 'Your video goes here — import one or open a project';
  justify-content: center;
  padding: 0;
  font-size: var(--t-meta);
  color: var(--c-fg-3);
}
.tl-track[data-track='captions']:empty::after {
  content: 'Captions — press Auto captions';
}
.tl-track[data-track='overlays']:empty::after {
  content: 'Text & stickers';
}
.tl-track[data-track='audio']:empty::after {
  content: 'Music: drag a song here, or press + on one';
}

/* before a video is open the player is a full editor stage (CapCut-like), not a 9:16 phone box */
.empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.empty-actions button {
  min-height: 38px;
  padding: 9px 18px;
  font-size: 13px;
  border-radius: var(--r-pill);
}
#previewEmpty h2 {
  font-size: 22px;
  letter-spacing: -0.4px;
  margin: 14px 0 8px;
}
#previewEmpty p {
  font-size: 12px;
}
@media (min-width: 1100px) {
  .preview-wrap:has(#previewEmpty:not([hidden])) {
    aspect-ratio: auto !important;
    width: calc(100% - 28px) !important;
    height: calc(100% - 14px) !important;
    max-width: none;
    border: 1px dashed #2c2c31;
    border-radius: var(--r-sm);
    box-shadow: none;
    background: radial-gradient(ellipse at 50% 45%, #17171a, #0a0a0b 70%); /* was green-tinted (quieter, 09-30) */
  }
  .preview-wrap:has(#previewEmpty:not([hidden])) canvas {
    visibility: hidden;
  }
}

/* CapCut-style category panel (panels.js) */
.library.cc-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
/* CLAUDE 10-20 (owner: "fix this bs": Transitions / Transcript / Templates were cut to "Transiti..." and the tabs looked
   uneven): every tool tab is as wide as the widest name, never narrower. The row is a grid of equal columns sized by its
   widest tab (width: max-content) and stretched to fill the panel (min-width: 100%); when the panel is narrower than eleven
   whole tabs the rail scrolls sideways (the wheel and a mouse drag too, motion.js grabScroll) and fades at the edge that
   has more. No name is ever cut */
.cc-rail {
  flex: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-bottom: 1px solid var(--c-line);
  --m-fade: var(--s-6); /* its edge fades, wheel and drag: motion.js grabScroll, motion.css */
}
.cc-rail::-webkit-scrollbar {
  display: none;
}
.cc-cats {
  position: relative; /* the tabs' offsetLeft is on the rail's scroll (the sliding bar, motion.js tabs) */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
  min-width: 100%;
  padding: var(--s-1) 0 0;
}
.cc-cats button {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: 7px var(--s-1) 8px;
  white-space: nowrap;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  font-stretch: 75%; /* Mona Sans' width axis: at every width all eleven names fit the 520 px panel, whole */
  font-weight: 500;
  min-height: 0;
}
.cc-cats button:hover {
  color: var(--c-fg);
  background: transparent;
}
.cc-cats button.active {
  color: var(--c-fg);
}
/* CLAUDE 10-18 (polish B3a): one straight bar slides under the open tool. panels.js hands the rail, the sub list, the Style
   studio tabs and the other editor tab rows to RipMotion.tabs (.ed-tabs, below), which writes --tab-x / --tab-w; without
   the script the open tool keeps the old static bar */
.cc-cats:not(.m-js) button.active {
  border-bottom-color: var(--c-fg);
}
.cc-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.cc-subs {
  flex: none;
  width: 112px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-right: 1px solid var(--c-line);
  overflow: auto;
}
/* CLAUDE 10-12 Graphite: the sub list is text rows; the open one is bright text with a thin indicator, not a box */
.cc-subs button {
  position: relative;
  text-align: left;
  justify-content: flex-start;
  padding: 7px 10px;
  min-height: 0;
  font-size: var(--t-label);
  font-weight: 500;
  border-radius: var(--r-sm);
  background: transparent;
  border: 0;
  color: var(--c-fg-3);
}
.cc-subs button:hover {
  background: transparent;
  color: var(--c-fg);
}
.cc-subs button.active {
  color: var(--c-fg);
  border-color: transparent;
  background: transparent;
}
.cc-subs:not(.m-js) button.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: var(--c-fg);
}
/* CLAUDE 10-18 (polish B3a): .ed-tabs = an editor tab row whose open tab is marked by one straight bar that slides (P4).
   RipMotion.tabs adds .m-js and writes --tab-x / --tab-w (across) or, with .m-vtabs, --tab-y / --tab-h (down). The bar is
   one element on the row, never an inset shadow, so it cannot curl up the corners of a rounded tab. */
.ed-tabs {
  position: relative;
}
/* (desktop only: a phone's sheets keep the markers phonescreen.css draws, and panels.js wires nothing under 768 px) */
body:not(.pe-on) .ed-tabs.m-js::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 2px;
  background: var(--c-fg);
  transform-origin: 0 0;
  transform: translateX(var(--tab-x, 0px)) scaleX(var(--tab-w, 1));
  opacity: var(--tab-on, 0);
  transition:
    transform 240ms var(--ease-out),
    opacity var(--d-hover) ease;
  pointer-events: none;
}
body:not(.pe-on) .ed-tabs.m-vtabs.m-js::after {
  top: 0;
  bottom: auto;
  width: 2px;
  height: 1px;
  transform: translateY(var(--tab-y, 0px)) scaleY(var(--tab-h, 1));
}
body:not(.pe-on) .cc-subs.ed-tabs.m-vtabs.m-js::after {
  left: 6px; /* at the open row's own edge, as the old bar on the button was, not at the column's */
}
body:not(.pe-on)
  .ed-tabs.m-js
  > :is(button, a, [role='tab']):is(.active, [aria-selected='true'], [aria-pressed='true']) {
  border-bottom-color: transparent; /* the row's bar is the mark now */
  box-shadow: none;
}
/* The open tab, chip or option of every other editor row draws its own straight bar, growing from the middle (a row that wraps
   over several lines, or whose state is aria-pressed / aria-checked, cannot slide one bar). Where a row is a sliding .ed-tabs
   the row's bar is the mark and these are off. :where keeps their specificity at the floor, so a component can still say no. */
:where(
  .service-switch button,
  .mb-seg button,
  .adj-tabs button,
  .adj-scope-tab,
  .at-chip,
  .yours-switch button,
  .cf-tabs button,
  .cf-chip,
  body:not(.pe-on) .cc-fx-tab,
  .ci-tabs button,
  .ci-sub button,
  .ae-tabs button,
  .ae-seg button,
  .ov-tabs button
) {
  position: relative;
}
:where(
  .service-switch button,
  .mb-seg button,
  .adj-tabs button,
  .adj-scope-tab,
  .at-chip,
  .yours-switch button,
  .cf-tabs button,
  .cf-chip,
  body:not(.pe-on) .cc-fx-tab,
  .ci-tabs button,
  .ci-sub button,
  .ae-tabs button,
  .ae-seg button,
  .ov-tabs button
)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-fg);
  transform: scaleX(0);
  transition: transform var(--d-ui) var(--ease-out);
  pointer-events: none;
}
:where(
  .service-switch button.active,
  .mb-seg [aria-pressed='true'],
  .mb-seg [aria-checked='true'],
  .adj-tabs [aria-selected='true'],
  .adj-scope-tab[aria-selected='true'],
  .at-chip[aria-pressed='true'],
  .yours-switch [aria-pressed='true'],
  .cf-tabs [aria-selected='true'],
  .cf-chip[aria-pressed='true'],
  body:not(.pe-on) .cc-fx-tab[aria-selected='true'],
  .ci-tabs [aria-selected='true'],
  .ci-sub [aria-selected='true'],
  .ae-tabs [aria-selected='true'],
  .ae-seg [aria-checked='true'],
  .ov-tabs [aria-selected='true']
)::after {
  transform: scaleX(1);
}
body:not(.pe-on) .ed-tabs.m-js > button::after {
  content: none; /* the row's sliding bar is the mark */
}
.cc-content {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 12px 12px 20px;
  --pin-top: -12px; /* CLAUDE 10-20: a pinned setting (controls.css .pin-set) sticks to the very top, over the padding */
}
/* CLAUDE 10-12 (review: long helper paragraphs in the left panels): a hint shows at most two quiet lines; hovering it
   (or focusing inside it) opens the rest */
.cc-content .hint {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  line-height: 1.5;
}
.cc-content .hint:is(.open, :focus-within) {
  /* CLAUDE 11-03: a click opens it (app-base.js), not a hover: it popped open while scrolling past */
  -webkit-line-clamp: unset;
}
.cc-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-section[hidden] {
  display: none;
}
/* CLAUDE 10-18 (polish B3a): the page that opens (a tool's section, a Style studio page, a clip's or a sound's page) fades
   in over 180 ms; opacity only, nothing moves, so a tool you flip through all day stays quick (m-fade is motion.css's) */
body:not(.pe-on) :is(.cc-section, aside.inspector .tab-content, .ci-pane, .ae-pane):not([hidden]) {
  animation: m-fade var(--d-ui) ease backwards; /* desktop: a phone sheet opens with its own slide (B3b) */
}
.cc-section > .section-title {
  display: none;
}
.cc-section .field,
.cc-section .range-field,
.cc-section .switch-row {
  margin: 0;
}
@media (min-width: 1100px) {
  /* CLAUDE 11-03: the sizes the owner drags (edlayout.js) win over the defaults; edlayout.css swaps the columns */
  main {
    grid-template-columns:
      var(--ed-lib-w, clamp(360px, 30vw, 520px)) minmax(0, 1fr)
      var(--ed-insp-w, clamp(280px, 22vw, 360px));
    grid-template-rows: minmax(0, 1fr) auto auto auto var(--ed-tl-h, clamp(215px, 34vh, 340px));
  }
}
/* CLAUDE 10-05: Audio > Sound effects, "Add sounds to the moments" (panels.js momentSounds) */
.cc-moments {
  width: 100%;
  margin-bottom: 6px;
}
.cc-placed-row small {
  color: #959598;
  font-weight: 400;
}

/* timeline zoom (--tlz), ruler inside the tracks (scrolls with them), delete left/right buttons */
.tl-zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #959598;
  margin-left: 10px;
  flex: none;
}
.tl-zoom input {
  width: 110px;
}
.tl-body {
  overflow-x: auto;
  overflow-y: hidden;
}
.tl-tracks {
  flex: 1 0 auto;
  width: calc((100% - 94px) * var(--tlz, 1));
}
.tl-labels {
  position: sticky;
  left: 0;
  z-index: 4;
  background: #0b0e0b;
}
@media (min-width: 1100px) {
  .tl-ruler {
    margin: 0;
    flex: none;
    cursor: pointer;
  }
  .tl-labels::before {
    content: '';
    display: block;
    height: 22px;
    flex: none;
  }
  .tl-playhead {
    top: 0;
  }
}

/* Ratio picker on the player bar (a second data-key=canvas control) */
.ratio-pick {
  width: auto;
  min-width: 0;
  flex: none;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: var(--r-sm);
  background: #171719;
  border: 1px solid #2b2b2d;
  color: #dddde0;
  min-height: 0;
  height: 30px;
}

/* full emoji picker (panels.js) */
.cc-emoji {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-emoji-search {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  border-radius: var(--r-sm);
}
.cc-emoji-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #232325;
  padding-bottom: 4px;
}
.cc-emoji-tabs button {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 5px 0;
  font-size: 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--r-xs) var(--r-xs) 0 0;
}
.cc-emoji-tabs button[aria-selected='true'] {
  border-bottom-color: var(--c-fg);
  background: transparent;
}
.cc-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
  max-height: 340px;
  overflow: auto;
  padding-right: 2px;
}
.cc-emoji-grid button {
  min-height: 0;
  height: 44px;
  padding: 4px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
}
.cc-emoji-grid button:hover {
  background: #1e1e20;
  border-color: #343436;
}
.cc-emoji-grid button.added {
  border-color: var(--c-fg);
  transform: scale(1.12);
}
.cc-emoji-grid img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  pointer-events: none;
}
/* CLAUDE 10-11: on an Apple device the system's own emoji font draws the picker (deviceemoji.js) */
.cc-emoji-ch {
  font:
    30px/34px 'Apple Color Emoji',
    sans-serif;
  pointer-events: none;
}
.cc-emoji-note {
  margin: 0 0 6px;
}
.cc-emoji-tabs button[data-g='Shapes'],
.cc-emoji-tabs button[data-g='Badges'] {
  font-size: 14px;
  color: var(--c-fg);
}

/* timeline track toggles (hidden checkboxes driven by the normal data-key / data-music code) */
.tl-labels span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-right: 4px;
}
.tl-tog {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: var(--r-xs);
  cursor: pointer;
  color: #959598;
  flex: none;
}
.tl-tog:hover {
  background: #202022;
  color: #ebebee;
}
.tl-tog i {
  font-style: normal;
  font-size: 12px;
  line-height: 1;
}
.tl-tog.mute i::before,
.tl-tog.music i::before {
  content: '🔊';
}
.tl-tog.mute input:checked + i::before,
.tl-tog.music input:not(:checked) + i::before {
  content: '🔇';
}
.tl-tog.hide i::before {
  content: '👁';
}
.tl-tog.hide input:checked + i::before {
  content: '🚫';
}
.tl-tog:has(input:checked).mute,
.tl-tog:has(input:checked).hide,
.tl-tog.music:has(input:not(:checked)) {
  background: #2a1414;
}

/* sound effects list + placed sounds on the Audio track */
.cc-sounds {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow: auto;
}
.cc-sound {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: var(--r-sm);
  background: #171719;
  border: 1px solid #232325;
}
.cc-sound > span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cc-sound b {
  font-size: 12px;
  font-weight: 600;
  color: #e7e7ea;
}
.cc-sound small {
  font-size: var(--t-meta);
  color: #868689;
}
.cc-sound button {
  min-height: 0;
  padding: 5px 9px;
  font-size: 11px;
  border-radius: var(--r-sm);
}
.cc-sound button[data-act='play'] {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
}
.cc-sound .cc-add.added {
  border-color: var(--c-fg);
  color: var(--c-fg);
}
.tl-sfx {
  background: #5a2a6e;
  border: 1px solid #8a4aa8;
  color: #f1dcff;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 4px;
  min-width: 14px;
  z-index: 1;
}
.tl-sfx span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-sfx b {
  cursor: pointer;
  opacity: 0.7;
  padding: 0 2px;
}
.tl-sfx b:hover {
  opacity: 1;
}

/* magnet + track locks */
.tl-magnet {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--r-sm);
  opacity: 0.6;
}
.tl-magnet.on {
  opacity: 1;
  border-color: #3d3d3f;
  color: var(--c-fg);
  background: #1a1a1c;
}
.tl-snapline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: #ffd400;
  box-shadow: 0 0 4px #ffd400;
  pointer-events: none;
  z-index: 5;
}
.tl-snapline[hidden] {
  display: none;
}
.tl-labels span {
  gap: 2px;
}
.tl-lock {
  display: grid;
  place-items: center;
  width: 20px;
  height: 22px;
  min-height: 0;
  padding: 0;
  margin-left: auto;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--c-fg-3);
  flex: none;
}
/* CLAUDE 10-12 Graphite: a drawn lock (one stroke, the text colour), not the emoji */
.tl-lock i {
  display: block;
  width: 12px;
  height: 12px;
  font-style: normal;
  background: currentColor;
  -webkit-mask: var(--lock-open) center / contain no-repeat;
  mask: var(--lock-open) center / contain no-repeat;
  opacity: 0.6;
  --lock-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 4.9-.7'/%3E%3C/svg%3E");
  --lock-shut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='7' width='10' height='7' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E");
}
.tl-lock.on i {
  -webkit-mask-image: var(--lock-shut);
  mask-image: var(--lock-shut);
  opacity: 1;
  color: var(--c-fg);
}
.tl-lock.on {
  color: var(--c-fg);
}
.tl-lock:hover {
  background: var(--c-raised);
}
.tl-lock + .tl-tog {
  margin-left: 0;
}
.tl-track.locked {
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 255, 255, 0.025) 8px 16px);
}
.tl-track.locked .tl-block {
  cursor: not-allowed;
  opacity: 0.75;
}

/* keyframes panel + diamonds on the video track */
.cc-kf {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tl-kf {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -6px 0 0 -6px;
  background: #ffd400;
  border: 1px solid #1a1a00;
  transform: rotate(45deg);
  z-index: 1; /* CLAUDE 10-19: under a clip's trim handles (a keyframe at a clip's start sat on its handle and ate the press) */
  cursor: pointer;
  box-shadow: 0 0 0 1px #0008;
}
/* CLAUDE 10-01: keyframe diamonds beside sliders, the keyframe bar and marks on timeline items (neutral colours) */
.kf-host {
  position: relative;
  padding-right: 24px;
}
.kf-host > .kf-dia {
  position: absolute;
  right: 2px;
  top: 0;
}
.kf-dia {
  display: inline-block;
  width: 14px;
  height: 14px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1.5px solid #6b7176;
  border-radius: 2px;
  background: transparent;
  transform: rotate(45deg) scale(0.78);
  cursor: pointer;
  vertical-align: middle;
}
.kf-dia:hover {
  border-color: #c9cfd3;
}
.kf-dia.on,
.kf-here.on .kf-dia {
  background: #e9edef;
  border-color: #e9edef;
}
.kf-dia:focus-visible {
  outline: 2px solid #c9cfd3;
  outline-offset: 2px;
}
/* CLAUDE 11-09 (Graphite): the shared keyframe bar is quiet: previous / the diamond / next as borderless buttons that
   fill on hover; the ease menu shows only while the playhead is on a key (it is disabled otherwise); the count text is
   kept for screen readers only. */
.kf-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 2px 0 10px;
}
.kf-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-fg-2);
  font-size: var(--t-label);
  transition:
    background var(--d-hover) ease,
    color var(--d-hover) ease;
}
.kf-bar button:hover:not(:disabled) {
  background: var(--c-raised);
  color: var(--c-fg);
}
.kf-bar button:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}
.kf-bar button:disabled {
  opacity: 0.3;
  cursor: default;
}
.kf-bar :is([data-k='prev'], [data-k='next']) {
  font-size: calc(var(--t-meta) - 2px); /* the ◀ ▶ glyphs, drawn small (a glyph size, not a text size) */
}
.kf-here {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kf-here .kf-dia {
  pointer-events: none;
}
.kf-bar select {
  min-height: 28px;
  margin-left: 6px;
  padding: 0 8px;
  font-size: var(--t-label);
  max-width: 130px;
}
.kf-bar select:disabled {
  display: none;
}
@media (max-width: 767.98px) {
  body.pe-on .kf-bar button {
    min-width: 44px;
    min-height: 44px;
  }
}
.kf-bar small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tl-mark {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -4px 0 0 -4px;
  background: #e9edef;
  border: 1px solid #0b0d0e;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 2;
}

/* CLAUDE 10-03: the service switcher as plain text tabs (the owner found the boxed one with ✂ ▶ ▦ glyphs tacky):
   no frame, no icons, no green; the current one is white on a quiet fill */
.service-switch {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: var(--s-5);
}
/* CLAUDE 10-12 Graphite: the current one is bright text with a thin underline (no fill) */
.service-switch button {
  padding: 8px 0;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-fg-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  transition:
    color var(--d-hover) ease,
    scale 220ms var(--ease-spring);
}
.service-switch button:hover {
  color: var(--c-fg-2);
  background: transparent;
}
.service-switch button.active {
  color: var(--c-fg);
  background: transparent;
}
.service-switch button:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}
/* Video Editor home */
.ed-home {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* CLAUDE 10-03 (the owner): Continue editing is the big box on the left; New project on top of the right column and
   Open the editor under it. With nothing to continue, the two share the row. */
.ed-hero {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-areas:
    'cont new'
    'cont open';
  gap: 14px;
}
.ed-hero:has(.ed-continue[hidden]) {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'new open';
}
.ed-hero .ed-continue {
  grid-area: cont;
  min-height: 316px;
}
.ed-hero .ed-new {
  grid-area: new;
  min-height: 151px;
}
.ed-hero .ed-blank {
  grid-area: open;
  min-height: 151px;
}
.ed-start-icon svg {
  width: 20px;
  height: 20px;
}
.ed-hero .ed-cont-text {
  padding: 24px;
}
.ed-hero .ed-cont-text b {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ed-start {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  min-height: 168px;
  padding: 20px;
  border-radius: var(--r-md);
  border: 0;
  background: var(--c-surface);
  text-align: left;
  overflow: hidden;
  transition: background-color var(--d-hover) ease;
}
.ed-start b {
  font-size: var(--t-title);
  font-weight: 600;
  color: var(--c-fg);
  letter-spacing: 0;
}
.ed-start small {
  font-size: var(--t-label);
  color: var(--c-fg-3);
}
.ed-start:hover {
  background: var(--c-raised);
}
.ed-start-icon {
  position: absolute;
  top: 18px;
  left: 20px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-size: 18px;
  background: var(--c-raised);
  color: var(--c-fg-2);
}
.ed-new {
  background: var(--c-surface);
}
.ed-new .ed-start-icon {
  background: var(--c-primary);
  color: var(--c-primary-ink);
  font-weight: 500;
}
.ed-continue {
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}
.ed-cont-thumb {
  flex: 0 0 58%;
  background: #0a0c0a;
  position: relative;
}
.ed-cont-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ed-cont-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 18px;
}
.ed-cont-text small {
  font-size: var(--t-meta);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-fg-3);
}
.ed-cont-text em {
  font-style: normal;
  font-size: var(--t-meta);
  color: var(--c-fg-3);
}
.ed-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
}
.ed-section-head h3 {
  margin: 0;
  font-size: var(--t-title);
  font-weight: 600;
  color: var(--c-fg);
}
.ed-section-head span {
  font-size: var(--t-label);
  color: var(--c-fg-3);
}
.ed-search {
  margin-left: auto;
  max-width: 280px;
}
/* CLAUDE 10-12 (owner 10-11: the rainbow tool tiles were "not really pleasing to the eye"): text rows with one quiet
   monochrome icon each, no box; a fill on hover only */
.ed-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px var(--s-4);
}
.ed-tool {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--r-sm);
  border: 0;
  background: transparent;
  text-align: left;
  min-height: 0;
}
.ed-tool:hover {
  background: var(--c-surface);
}
.ed-tool > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ed-tool b {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--c-fg);
}
.ed-tool small {
  font-size: var(--t-meta);
  color: var(--c-fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ed-tool-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-fg-2);
  background: var(--c-raised);
  box-shadow: none;
}
.ed-tool:hover .ed-tool-icon {
  color: var(--c-fg);
}
@media (max-width: 900px) {
  .ed-hero,
  .ed-hero:has(.ed-continue[hidden]) {
    grid-template-columns: 1fr;
    grid-template-areas:
      'cont'
      'new'
      'open';
  }
  .ed-hero .ed-start {
    min-height: 120px;
  }
  .ed-hero .ed-continue {
    min-height: 200px;
  }
}

/* Video effects grid + the Effects track */
.cc-fx {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.cc-fx button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  min-height: 0;
  border-radius: var(--r-sm);
  background: #171719;
  border: 1px solid #232325;
  color: #cccccf;
  font-size: 11px;
}
.cc-fx button:hover {
  border-color: #4a4a50;
}
.cc-fx button.added {
  border-color: #8a8a92;
  color: #f2f2f4;
}
.cc-fx i {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-xs);
  background: linear-gradient(135deg, #e8a33d, #c2432f 40%, #2f6fb3 70%, #3fb36a) center/cover;
}
.cc-fx i[data-icon]:not([data-icon=''])::after {
  content: attr(data-icon);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #fff;
  background: #0007;
  border-radius: var(--r-xs);
  font-style: normal;
}
.tl-fx {
  background: #6b1f3a;
  border: 1px solid #b0386a;
  color: #ffd7e6;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border-left-width: 3px;
  border-right-width: 3px;
}
.tl-fx span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-fx b {
  cursor: pointer;
  opacity: 0.7;
  padding: 0 2px;
}
.tl-fx b:hover {
  opacity: 1;
}
.tl-track[data-track='effects']:empty::after {
  content: 'Effects — Effects > Video effects';
}

/* markers, voices, placed sounds, full-screen preview */
.tl-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tl-marker {
  position: absolute;
  top: 0;
  width: 10px;
  height: 12px;
  margin-left: -5px;
  padding: 0;
  border: 0;
  background: #ffb020;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
  cursor: pointer;
  pointer-events: auto;
  min-height: 0;
  z-index: 3;
}
.tl-marker:hover {
  background: #ffd27a;
}
/* CLAUDE 10-01: a handle on every cut of the video track; filled when the cut has a transition */
.tl-cut {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  min-height: 0;
  margin: -7px 0 0 -7px;
  padding: 0;
  border: 1.5px solid #f3f2ee;
  border-radius: 3px;
  background: #1c1c20;
  transform: rotate(45deg);
  cursor: pointer;
  z-index: 3;
}
.tl-cut.on {
  background: #f3f2ee;
}
.tl-cut:hover {
  border-color: #fff;
  background: #a1a1aa;
}
/* CLAUDE 10-20: a tab that is one action (Audio > Record, Audio > Text to speech, panels.js oneButton) */
.cc-one {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}
.cc-transform {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-placed h4 {
  margin: 0 0 6px;
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--c-fg-3); /* a quiet group name, not tracked caps */
}
.cc-placed {
  margin-bottom: 10px;
}
.cc-placed-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 't n x' 'o r r';
  gap: 2px 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid #222224;
  border-radius: var(--r-md);
  background: #111113;
  margin-bottom: 6px;
}
.cc-placed-row > button:first-child {
  grid-area: t;
  font-size: 11px;
  padding: 2px 6px;
  min-height: 0;
}
.cc-placed-row b {
  grid-area: n;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-placed-row output {
  grid-area: o;
  font-size: 11px;
  color: #949497;
  min-width: 44px;
}
.cc-placed-row input {
  grid-area: r;
  width: 100%;
}
.cc-placed-row > button:last-child {
  grid-area: x;
  min-height: 0;
  padding: 0 8px;
}
.preview-wrap:fullscreen {
  background: #000;
  display: grid;
  place-items: center;
}
.preview-wrap:fullscreen canvas {
  width: auto !important;
  height: auto !important;
  max-width: 100vw;
  max-height: 100vh;
}
.preview-wrap:fullscreen #previewEmpty {
  display: none;
}

/* speed, picture layers */
.tl-seg.tl-freeze {
  background: #3a6b8f;
  background-image: repeating-linear-gradient(90deg, #ffffff18 0 2px, transparent 2px 14px);
} /* freeze frame block */
.tl-seg.tl-speed {
  background-image: repeating-linear-gradient(135deg, #ffffff10 0 6px, transparent 6px 12px);
}
/* CLAUDE 11-09: the clip's Speed and Volume (panels.js), the Transform's look: a .ci-row (clipinsp.css) of name, slider
   and typed value, the presets as quiet chips under it, one quiet line of state. Speed's Normal / Curve are text tabs. */
.cc-speed,
.cc-speed-normal {
  display: grid;
  gap: var(--s-2);
}
.cc-speed-normal[hidden] {
  display: none;
}
.cc-speed-at {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--c-fg-3);
  font-variant-numeric: tabular-nums;
}
.cc-speed-at:empty {
  display: none;
}
/* six presets, one even row */
.cc-presets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}
.cc-presets button {
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-raised);
  color: var(--c-fg-2);
  font-size: var(--t-label);
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--d-hover) ease,
    color var(--d-hover) ease,
    box-shadow var(--d-hover) ease,
    scale var(--d-press) ease;
}
@media (hover: hover) and (pointer: fine) {
  .cc-presets button:hover {
    background: var(--c-overlay);
    color: var(--c-fg);
  }
}
.cc-presets button:active {
  scale: 0.97;
}
/* the value in use: lifted and ringed (a state, so no green: green is for on / live / done) */
.cc-presets button[aria-pressed='true'] {
  background: var(--c-overlay);
  color: var(--c-fg);
  box-shadow: inset 0 0 0 1px var(--c-fg-3);
}
.cc-speed-tabs {
  display: flex;
  gap: var(--s-4);
}
.cc-speed-tabs button {
  min-height: 28px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent; /* the open one's straight bar (never an inset shadow) */
  border-radius: 0;
  background: transparent;
  color: var(--c-fg-3);
  font-size: var(--t-label);
  font-weight: 500;
}
.cc-speed-tabs button:hover {
  background: transparent;
  color: var(--c-fg-2);
}
.cc-speed-tabs button[aria-selected='true'] {
  color: var(--c-fg);
  border-bottom-color: var(--c-fg);
}
/* a phone: finger-sized */
@media (hover: none), (pointer: coarse), (max-width: 767.98px) {
  .cc-presets button,
  .cc-speed-tabs button {
    min-height: var(--h-touch);
  }
}
.cc-ramp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.cc-ramp-tiles button {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 0;
  padding: 8px 4px 7px;
  border-radius: var(--r-md);
  border: 1px solid #28282a;
  background: #121214;
  color: #c8c8cc;
  font-size: 12px;
  font-weight: 600;
}
.cc-ramp-tiles button:hover {
  border-color: #3a3a40;
}
.cc-ramp-tiles button[aria-pressed='true'] {
  border-color: #aeaeb1;
  background: #1c1c20;
  color: #f3f2ee;
}
.cc-ramp-tiles svg {
  fill: none;
  stroke: #d4d4d8;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.cc-ramp-tiles svg .one {
  stroke: #3a3a40;
  stroke-dasharray: 2 3;
}
.cc-ramp-graph {
  display: block;
  width: 100%;
  touch-action: none;
  user-select: none;
}
.cc-ramp-graph .bed {
  fill: #101012;
  stroke: #28282a;
}
.cc-ramp-graph .grid {
  stroke: #1f1f23;
}
.cc-ramp-graph .one {
  stroke: #3a3a40;
  stroke-dasharray: 3 4;
}
.cc-ramp-graph .line {
  fill: none;
  stroke: #e4e4e7;
  stroke-width: 2;
  stroke-linejoin: round;
}
.cc-ramp-graph .head {
  stroke: #8b8b93;
  stroke-dasharray: 2 3;
}
.cc-ramp-graph circle {
  fill: #e4e4e7;
  stroke: #101012;
  stroke-width: 2;
  cursor: grab;
}
.cc-ramp-graph circle:focus-visible {
  outline: none;
  stroke: #f3f2ee;
  stroke-width: 3;
}
.cc-ramp-graph text {
  fill: #71717a;
  font-size: 9px;
}
.cc-ramp-graph text.empty {
  font-size: 11px;
}
.cc-ramp-read {
  margin: 8px 0 0;
  font-size: 12px;
  color: #b0b0b3;
  font-variant-numeric: tabular-nums;
}
/* CLAUDE 10-06: 10-05's Find B-roll styles moved to stocklib.css with the Stock library */
.ov-pic {
  background: repeating-conic-gradient(#1d1d1f 0 25%, #161618 0 50%) 0 0/16px 16px;
  border-radius: var(--r-sm);
  padding: 6px;
  margin-bottom: 8px;
  text-align: center;
}
.ov-pic img {
  max-width: 100%;
  max-height: 90px;
}
/* CLAUDE 10-04: format templates (formats.js) in Templates > Formats: the gallery's cards, two to a row */
.fmt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fmt-card small {
  white-space: normal;
  line-height: 1.35;
}
/* a video layer's border and corner buttons (app-overlays.js videoFrameControls) */
.ov-corners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 6px 0 10px;
}
.ov-corners button {
  min-height: 32px;
  font-size: 16px;
}
.ov-corners button[aria-pressed='true'] {
  outline: 2px solid var(--accent, var(--c-fg));
  outline-offset: -2px;
}

/* compliance pass — skip link, visible keyboard focus, consents, data rights, policy links */
.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 2147483001;
  background: var(--c-primary);
  color: var(--c-primary-ink);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus) !important;
  outline-offset: 2px;
}
/* CLAUDE 10-03: text fields show their blinking caret, so they get a quiet neutral ring instead of the green box (the
   owner: "get rid of the green box ... people can tell they selected it because the thing will be blinking"). Green
   stays for buttons, links and switches. */
:where(
  input:not(
    [type='checkbox'],
    [type='radio'],
    [type='range'],
    [type='file'],
    [type='color'],
    [type='button'],
    [type='submit']
  ),
  textarea
):focus-visible {
  outline: 1px solid #ffffff47 !important;
  outline-offset: 1px;
}
.consent {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.5;
  color: #d9d9dc;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--c-fg);
}
.consent a,
.auth-legal a,
.data-rights a,
.nav-legal a {
  color: #cbcbce;
}
.auth-legal {
  font-size: 12px;
  line-height: 1.5;
  color: #bfbfc2;
  margin: 8px 0 0;
  text-align: center;
}
.data-rights {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #2c2c2e;
}
.data-rights h3 {
  font-size: 15px;
  margin: 0 0 8px;
  color: #f1f1f4;
}
.data-rights p {
  font-size: 13px;
  color: #c9c9cc;
  margin: 8px 0;
}
.danger-zone {
  margin-top: 10px;
  border: 1px solid #5a2323;
  border-radius: var(--r-md);
  padding: 8px 12px;
}
.danger-zone summary {
  cursor: pointer;
  color: #ff9c9c;
  font-weight: 600;
  font-size: 13px;
}
.danger-zone form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.danger-zone input {
  width: 100%;
}
.danger-zone button.danger {
  background: #b3261e;
  border-color: #b3261e;
  color: #fff;
  font-weight: 700;
}
#deleteError {
  color: #ff9c9c;
  min-height: 1em;
  margin: 0;
}
.small-links {
  font-size: 12px !important;
}
.business-line {
  font-size: 12px;
  color: #b0b0b3;
  margin: 6px 0 0;
}
.nav-legal {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px 0;
  font-size: 12px;
}
.nav-legal a {
  color: #b0b0b3 !important;
  text-decoration: none;
}
.nav-legal a:hover {
  color: #f1f1f4 !important;
  text-decoration: underline;
}
/* WCAG AA contrast fixes found by the in-page audit (were 3.8:1, 4.48:1, 4.3:1) */
.db-chart .db-bar span {
  color: #a9a9ac;
}
.home-nav .nav-label {
  color: #9d9da0;
}
.font-upload span,
.font-upload small,
#musicName {
  color: #a2adba;
} /* was 3.9:1 */
.auth-or span {
  color: #a0a0a0;
} /* was 3.8:1 */
.hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
} /* honeypot stays off-screen */

/* timeline filmstrip and waveform in the video track, text in caption blocks */
.tl-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tl-seg-label {
  position: relative;
  align-self: flex-start;
  margin-top: 2px;
  padding: 0 5px;
  border-radius: 3px;
  background: #000000a6;
  line-height: 15px;
  pointer-events: none;
}
.tl-seg.tl-freeze .tl-art {
  opacity: 0.6;
}
/* CLAUDE 10-12 Graphite: a selected clip gets the light ring (the owner's 09-30 "too much green" stays: no green here) */
.tl-seg.selected .tl-art {
  box-shadow: 0 0 0 2px var(--c-fg) inset;
}
.tl-cap {
  cursor: grab;
  color: #dce7f2;
  padding: 0 4px;
}
.tl-cap.selected {
  border-color: var(--c-fg);
  background: #3f5566;
}
.tl-menu {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  padding: 4px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-overlay);
  box-shadow: var(--e-float);
  transform-origin: top left;
  animation: rc-pop var(--d-ui) var(--ease-out);
}
.tl-menu button {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: #eaeaed;
  font: inherit;
  font-size: 13px;
  text-align: left;
}
.tl-menu button:hover,
.tl-menu button:focus-visible {
  background: #2b2b2d;
  outline: none;
}
.tl-menu kbd {
  color: #949497;
  font: inherit;
  font-size: 12px;
}
/* a caption with its own style (Caption.look; its inspector edits it, tiledrop.js) */
.tl-cap-styled {
  border-left: 1px solid var(--c-fg-2);
}
/* the in-place caption editor over a timeline caption block */
.cap-edit {
  position: fixed;
  z-index: 1000;
  width: 320px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-overlay);
  color: var(--c-fg);
  font: inherit;
  font-size: var(--t-body);
  box-shadow: var(--e-float);
}
@media (min-width: 1100px) {
  .tl-track[data-track='video'],
  .tl-labels span:first-child {
    height: 58px;
    line-height: 58px;
  }
}
/* CHATGPT: original curve workspace, responsive graph and precise accessible sliders. */
.cc-curve-graph {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  touch-action: none;
}
.cc-curve-graph circle {
  cursor: ns-resize;
}
.cc-curve-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.cc-curve-presets button {
  padding: 9px 12px;
  border: 1px solid #33404a;
  border-radius: var(--r-md);
  background: #172026;
  color: #e9edef;
  font: inherit;
}
.cc-curve-presets button:hover {
  border-color: #aeaeb1;
}
.cc-curves .hint {
  line-height: 1.6;
}
/* CHATGPT: independently selectable grading layers and timeline spans. */
.cc-adjustment-list {
  display: grid;
  gap: 6px;
  margin: 14px 0;
}
.cc-adjustment-list button {
  text-align: left;
  padding: 10px;
  border-radius: var(--r-sm);
}
.cc-adjustment-list .active {
  border-color: #efc36d;
  color: #efc36d;
}
/* CLAUDE: adjustment layer v2 inspector sections, colour band chips and saved looks (neutral; no accent colour). */
.cc-adj-section {
  border-top: 1px solid #262f35;
  padding: 10px 0 4px;
}
.cc-adj-section > summary {
  cursor: pointer;
  font-weight: 600;
  color: #e9edef;
  padding: 4px 0 8px;
}
.cc-adj-bands {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 10px;
}
.cc-adj-bands button {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #33404a;
  border-radius: 50%;
  background: #172026;
}
.cc-adj-bands button::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--band);
}
.cc-adj-bands button[data-changed]::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e9edef;
}
.cc-adj-bands button.active {
  border: 2px solid #e9edef;
}
.cc-adj-looks {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.cc-adj-looks > div {
  display: flex;
  gap: 6px;
}
.cc-adj-looks > div > button:first-child {
  flex: 1;
  text-align: left;
}
.cc-adj-section > button {
  margin: 4px 6px 4px 0;
}
/* CLAUDE 10-01: colour wheels (muted hues, no accent colour) */
.cc-wheel-box {
  display: grid;
  gap: 6px;
  margin: 6px 0 12px;
}
.cc-wheel-box > strong {
  font-weight: 600;
  color: #c9d1d5;
}
.cc-wheel {
  position: relative;
  width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #33404a;
  background:
    radial-gradient(circle, rgb(128 128 128) 0, rgb(128 128 128 / 0) 72%),
    conic-gradient(from 90deg, #b85c5c, #b85cb8, #5c5cb8, #5cb8b8, #5cb85c, #b8b85c, #b85c5c);
  cursor: crosshair;
  touch-action: none;
}
.cc-wheel span {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 2px solid #e9edef;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6);
  pointer-events: none;
}
.tl-adjustment {
  background: #655022;
  border: 1px solid #d1a54d;
  color: #fff0c9;
  height: 26px;
  cursor: grab;
}
.tl-track[data-track='adjustments']:empty::after {
  content: 'Adjustment layers — Adjust > Layers';
}
/* CLAUDE 10-14: the Layout track (scenelayout-ui.js): a chip per scene with its layout's name, as OpusClip's */
.tl-track[data-track='layouts'] {
  height: 22px;
}
.tl-labels span[data-layout-label] {
  height: 22px;
  line-height: 22px;
}
.tl-scene {
  top: 1px;
  bottom: 1px;
  height: auto;
  padding: 0 6px;
  border: 1px solid var(--c-line, #3a3a3f);
  background: var(--c-bg-2, #1c1c20);
  color: var(--c-fg-2, #c9c9cf);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.tl-scene:hover,
.tl-scene:focus-visible {
  color: var(--c-fg, #fff);
  border-color: var(--c-fg-3, #77777f);
}
/* CLAUDE 10-23 (B4): the Background row (app-timeline.js renderBackgroundTrack): one block the clip's length */
.tl-track[data-track='background'],
.tl-labels span[data-background-label] {
  height: 24px;
  line-height: 24px;
}
.tl-bg {
  top: 1px;
  bottom: 1px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  border: 1px solid var(--c-line-strong);
  background: var(--c-raised);
  color: var(--c-fg-2);
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.tl-bg:hover,
.tl-bg:focus-visible,
.tl-bg.selected {
  color: var(--c-fg);
  border-color: var(--c-fg-3);
}
.tl-bg.tl-bg-hidden {
  opacity: 0.45;
}
.tl-bg-sw {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: var(--r-xs);
  background: center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.tl-bg-sw[data-kind='blur'] {
  background: radial-gradient(circle at 40% 40%, var(--c-fg-3), transparent 75%);
}
.tl-bg-sw[data-kind='video'] {
  background: var(--c-overlay);
}
/* the Background's settings (bgpanel.js): the kinds pinned at the top, then the kind's own controls */
.bgp {
  display: grid;
  gap: 12px;
}
.bgp-kinds,
.bgp-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--c-raised);
}
.bgp-kinds button,
.bgp-seg button {
  min-height: 36px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--c-fg-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.bgp-kinds button[aria-checked='true'],
.bgp-seg button[aria-checked='true'] {
  background: var(--c-overlay);
  color: var(--c-fg);
}
.bgp-body {
  display: grid;
  gap: 12px;
}
.bgp-note {
  margin: 0;
  color: var(--c-fg-3);
  font-size: 12px;
}
.bgp-range {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--c-fg-2);
}
.bgp-range span {
  display: flex;
  justify-content: space-between;
}
.bgp-range input {
  width: 100%;
}
.bgp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bgp-swatches button,
.bgp-own {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.bgp-swatches button[aria-checked='true'] {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 0 2px var(--c-fg);
}
.bgp-own {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}
.bgp-own input {
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.bgp-pics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
}
.bgp-pics button,
.bgp-up {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--c-raised);
  cursor: pointer;
}
.bgp-pics img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bgp-pics button[aria-checked='true'] {
  outline: 2px solid var(--c-fg);
  outline-offset: -2px;
}
.bgp-up {
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--c-fg-2);
  border: 1px dashed var(--c-line-strong);
}
.bgp-up span {
  font-size: 22px;
  line-height: 1;
}
.bgp-up small {
  font-size: 11px;
}
.bgp-video {
  display: grid;
  gap: 8px;
}
.bgp-btn {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: var(--r-sm);
  background: var(--c-overlay);
  color: var(--c-fg);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.tl-scene-find {
  height: 100%;
  padding: 0 8px;
  border: 1px dashed var(--c-line, #3a3a3f);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--c-fg-3, #8a8a92);
  font-size: 11px;
  cursor: pointer;
}
.tl-scene-find:hover:not(:disabled) {
  color: var(--c-fg, #fff);
}
.tl-labels span[data-video-label] {
  height: 42px;
  line-height: 42px;
}
@media (min-width: 1100px) {
  .tl-labels span[data-video-label] {
    height: 58px;
    line-height: 58px;
  }
}

/* CLAUDE 09-30 — quieter editor (the user: "too much green"). In the editor, green marks only the one main
   action (Export video, in the header) and the logo; everything else is neutral: white for "on/selected",
   raised greys for buttons. Scoped to <main> so the header's Export and the home pages keep their colours. */
body main {
  /* CLAUDE 10-12: the Graphite tokens (style.css :root) behind the editor's quiet names */
  --q-ink: var(--c-fg);
  --q-ink-ink: var(--c-primary-ink);
  --q-raise: var(--c-raised);
  --q-raise-hover: var(--c-overlay);
  --q-line: var(--c-line-strong);
  --q-soft: var(--c-fg-3);
}
/* buttons that were green: white when they are the panel's main action, raised grey otherwise */
body main button.primary,
body main button.accent {
  background: var(--q-ink);
  border-color: var(--q-ink);
  color: var(--q-ink-ink);
}
body main button.primary:hover,
body main button.accent:hover {
  background: #fff;
  border-color: #fff;
}
body main #kickImportBtn.accent {
  background: var(--q-raise);
  border-color: var(--q-line);
  color: var(--q-ink);
}
body main #kickImportBtn.accent:hover {
  background: var(--q-raise-hover);
  border-color: #3a3a40;
}
/* tabs and toggles: selected = white text, white rule, neutral fill */
body main .cc-cats button.active,
body main .tabs button.active {
  color: var(--q-ink);
}
body main .cc-cats:not(.m-js) button.active {
  border-bottom-color: var(--q-ink);
}
body main .cc-subs button.active {
  color: var(--q-ink);
}
body main .tl-magnet.on {
  color: var(--q-ink);
  border-color: transparent;
  background: var(--q-raise);
}
body main .preset-tile.active {
  border-color: transparent;
  box-shadow: 0 0 0 1.5px var(--c-fg);
}
/* player */
body main .transport #playBtn {
  background: var(--q-ink);
  border-color: var(--q-ink);
  color: var(--q-ink-ink);
}
body main .transport #playBtn:hover {
  background: #fff;
}
body main input[type='range'] {
  accent-color: #d4d4d8;
}
body main .preview-wrap {
  border-color: transparent;
  background: var(--c-stage);
}
body main .empty-mark {
  color: var(--q-ink);
  border-color: var(--q-line);
  background: rgba(255, 255, 255, 0.04);
}
/* import box */
body main .import-box {
  border-color: #3a3a40;
  background: linear-gradient(140deg, #19191c, #141416);
}
body main .upload-icon,
body main .section-title span {
  color: var(--q-soft);
}

/* CLAUDE 10-01 audio v2: Music / Sounds / Voice lanes, beat ticks, voiceover clips, the record button. Eight lanes
   no longer fit every timeline height: lanes keep their height (so they line up with their labels) and the body
   scrolls instead */
.tl-track {
  flex-shrink: 0;
}
.tl-body {
  overflow-y: auto;
}
.tl-track[data-track='sfx']:empty::after {
  content: 'Sound effects';
}
.tl-track[data-track='voice']:empty::after {
  content: 'Voiceover: press 🎙 Record, or right-click a video segment > Extract audio';
}
.tl-beat {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #ffffffa6;
  pointer-events: none;
  z-index: 1;
}
.tl-voice {
  background: #1f5a4a;
  border: 1px solid #2f8a70;
  color: #d4fbe9;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 4px;
  overflow: hidden;
}
.tl-voice.tl-extract {
  background: #4a4a1f;
  border-color: #8a8a2f;
  color: #fbfbd4;
}
/* CLAUDE 10-09: a song on the Music lane (blue, like the older background track under it) */
.tl-voice.tl-song {
  background: #1f4260;
  border-color: #2f5e86;
  color: #d8ecff;
}
.tl-music.tl-under {
  opacity: 0.4;
  pointer-events: none;
}
.music-bed:not([hidden]) {
  display: contents;
}
.tl-tog[hidden] {
  display: none;
}
.tl-voice.selected {
  border-color: var(--c-fg);
}
.tl-voice span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
.tl-voice b {
  cursor: pointer;
  opacity: 0.7;
  padding: 0 2px;
  position: relative;
}
.tl-voice b:hover {
  opacity: 1;
}
.tl-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #0000004d;
  pointer-events: none;
}
.tl-fade.in {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.tl-fade.out {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.tl-record.on {
  color: #ff5a5a;
  border-color: #ff5a5a;
}
.tl-recmute {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #949497;
  cursor: pointer;
}
/* CLAUDE 10-01: tile previews (tileprev.js) and tiles dragged onto the timeline (tiledrop.js). Neutral greys; white
   marks the target, as the timeline's other selections. */
.tp-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.tp-cast {
  object-fit: cover; /* CLAUDE 10-03: the preview cast's square loops fill any tile shape */
}
.tp-canvas[hidden] {
  display: none;
}
.cc-fx i.tp-on {
  overflow: hidden;
  background: #0b0b0c;
}
.cc-fx i.tp-on::after,
.cc-fx i.tp-on[data-icon]:not([data-icon=''])::after {
  content: none; /* a previewed tile shows its picture, not the glyph (the icon rule above is more specific) */
}
.cc-transition-grid button.tp-on > span[aria-hidden] {
  display: none;
}
.cc-transition-grid button.tp-on .tp-canvas {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
}
.cc-transition-grid button[data-transition],
.cc-fx button[data-fx],
.cc-fx button[data-filter] {
  touch-action: pan-y;
  cursor: grab;
}
body.dnd-dragging,
body.dnd-dragging * {
  cursor: grabbing !important;
  user-select: none;
}
.dnd-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid #3a3a3f;
  border-radius: var(--r-sm);
  background: #1c1c1f;
  color: #f2f2f4;
  font-size: 12px;
  box-shadow: 0 8px 24px #000a;
  pointer-events: none;
}
.dnd-ghost canvas {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--r-xs);
}
.dnd-ghost img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: var(--r-xs);
  background: #0d0d0f;
}
.dnd-ghost i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-xs);
  background: #2a2a2e;
  font-style: normal;
  font-size: 18px;
}
.dnd-ghost span {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dnd-ghost.dnd-none {
  opacity: 0.55;
}
/* CLAUDE 10-09: where a dropped item will sit on its lane, as long as it will be */
.dnd-span {
  position: absolute;
  top: 2px;
  bottom: 2px;
  min-width: 6px;
  border-radius: var(--r-xs);
  background: #ffffff33;
  box-shadow: inset 0 0 0 1.5px #f2f2f4;
  pointer-events: none;
  z-index: 5;
}
.tl-track.dnd-lane {
  background: #ffffff14;
  box-shadow: inset 0 0 0 1px #8a8a92;
}
.dnd-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #f2f2f4;
  z-index: 6;
  pointer-events: none;
}
.dnd-line span {
  position: absolute;
  top: 2px;
  left: 6px;
  padding: 1px 6px;
  border: 1px solid #3a3a3f;
  border-radius: var(--r-xs);
  background: #1c1c1f;
  color: #f2f2f4;
  font-size: 11px;
  white-space: nowrap;
}
.tl-cut.dnd-hot {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0 0 5px #ffffff40;
}
.tl-cut.selected {
  box-shadow: 0 0 0 3px #ffffff59;
}
.tl-fx.selected,
.tl-adjustment.selected {
  box-shadow: inset 0 0 0 2px #f2f2f4;
}
/* the right-hand inspector shows the selected cut, effect or adjustment layer in place of the Style studio */
.inspector.dnd-on > :not(.dnd-inspect):not(.pe-head) {
  display: none !important;
}
.dnd-inspect {
  display: grid;
  gap: 12px;
  align-content: start;
}
.dnd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.dnd-head h3 {
  margin: 0;
  color: var(--c-fg);
  font-size: var(--t-title);
  font-weight: 600;
}
.dnd-head small {
  display: block;
  margin-top: 2px;
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  font-weight: 400;
}
/* CLAUDE 10-12 Graphite (owner: no box on "Done"): the inspector's Done / back is a quiet text button */
.dnd-head > button {
  min-height: var(--h-sm);
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--c-fg-2);
  font-size: var(--t-body);
  font-weight: 500;
}
.dnd-head > button:hover {
  background: transparent;
  color: var(--c-fg);
}
.dnd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* CLAUDE 10-11: an effect's Strength in the inspector (fxstrength.js): the label, a typed percent with Reset, the slider
   with its keyframe diamond, then the keyframe bar */
.dnd-inspect .cc-fx-row {
  display: grid;
  gap: 4px;
}
.dnd-inspect .cc-fx-row .range-field {
  margin: 0;
}
.dnd-inspect .cc-fx-row .fx-pct {
  margin: 0;
  font-size: 12px;
  color: #a1a1aa;
}
.dnd-inspect .cc-fx-row .fx-pct .cc-adjust-value {
  width: 64px;
}
.dnd-inspect .cc-fx-row .kf-dia:disabled {
  opacity: 0.35;
  cursor: default;
}
.dnd-inspect .cc-fx-row .hint:empty {
  display: none;
}
.dnd-inspect select {
  max-width: 100%;
}
/* CLAUDE 10-20: where an effect or filter sits (tiledrop.js spanRows): "Starts at 00:03.17" with Start here, then the
   Length slider with its seconds typed beside it */
.dnd-where {
  display: grid;
  gap: var(--s-2);
}
.dnd-at-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.dnd-at {
  margin: 0;
  color: var(--c-fg);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
}
.dnd-where .range-field {
  margin: 0;
}
.dnd-where .fx-pct {
  margin: 0;
  color: var(--c-fg-2);
  font-size: var(--t-label);
}
.dnd-where .fx-pct .cc-adjust-value {
  width: 64px;
}
/* CLAUDE 11-03: the Music lane's songs in its settings (tiledrop.js musicInspector): a plain row each, name over its
   time; it opens that song's own editor */
.dnd-song {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-height: var(--h-sm);
  padding: 6px 8px;
  margin: 0 -8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--c-fg);
  font-size: var(--t-body);
  text-align: left;
}
.dnd-song:hover {
  background: var(--c-raised);
}
.dnd-song b {
  font-weight: 500;
}
.dnd-song small {
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}
.dnd-song:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}
/* CLAUDE 10-02: "Pro" on Pro features, free plan only (pro.js sets html.pro-free; profeatures.py is the list). The
   pill of .beta-tag, in the warn gold so it doesn't read as an active (green) state. */
.pro-free [data-pro]::after {
  content: 'Premium'; /* the owner, 10-02: "Pro" is also the $59 plan's name */
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: #ffd400;
  color: #0b0b0b;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.pro-free :is(.cc-fx, .cc-transition-grid, .cc-ramp-tiles) button[data-pro] {
  position: relative;
}
.pro-free :is(.cc-fx, .cc-transition-grid, .cc-ramp-tiles) button[data-pro]::after {
  position: absolute;
  top: 4px;
  right: 4px;
  margin: 0;
}
/* CLAUDE 10-21: "Free" on the free tiles other editors charge for (pro.js, profeatures.FREE_MARKS), in the Premium
   pill's corner (a tile never has both). Graphite: a quiet label like New, not a colour, since green means state. */
.pro-free :is(.cc-fx, .cc-transition-grid) button[data-free] {
  position: relative;
}
.pro-free :is(.cc-fx, .cc-transition-grid) button[data-free]::after {
  content: 'Free';
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  background: var(--c-overlay);
  color: var(--c-fg);
  font-size: var(--t-meta);
  font-weight: 500;
  line-height: 1.5;
  pointer-events: none;
}
.pro-sheet {
  max-width: 420px;
}
.pro-sheet ul {
  margin: 12px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.pro-sheet li {
  padding: 8px 12px;
  border: 1px solid #262626;
  border-radius: var(--r-sm);
  background: #161616;
}
.pro-sheet li::after {
  float: right;
}
.pro-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.pro-sheet .hint {
  margin: 12px 0 0;
  color: #9a9a9a;
  font-size: 12px;
}
/* CLAUDE 10-04: the editor's Back, top-left at every width (app-base.js #editorBack) */
header .editor-back {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 32px;
  margin-right: 10px;
  padding: 4px 12px 4px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-fg);
  font-size: var(--t-body);
  font-weight: 500;
  cursor: pointer;
}
header .editor-back:hover {
  background: var(--c-raised);
}
header .editor-back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* CLAUDE 10-05: sound from a link (Audio > Music; app-audio.js audioFromLink) */
.audio-link {
  display: grid;
  gap: 6px;
  margin: 8px 0;
}
.audio-link input[type='url'] {
  width: 100%;
  padding: 8px;
}
.audio-link-go {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.audio-link-go button {
  flex: 1 1 auto;
  font-size: var(--t-label); /* CLAUDE 10-18 (polish B3a): the panel's own sizes (these two were the default 16 px) */
}
.audio-link .rights-note {
  color: var(--c-fg-3);
  font-size: var(--t-meta);
}
/* CLAUDE 10-08 (CapCut): the selected text / sticker / picture / video has its own editor on the right (app-overlays.js
   syncLayerEditor), in place of the Style studio; the left Add text section is a Default text tile and a list of layers */
.layer-ed {
  display: none;
}
.inspector.layer-open:not(.dnd-on) > :not(.layer-ed) {
  display: none !important;
}
.inspector.layer-open:not(.dnd-on) > .layer-ed {
  display: block;
}
.layer-ed .overlay-card,
.layer-ed .overlay-card.selected /* (CLAUDE 11-09: editor-chrome.css ringed a selected card: here the card is the panel) */ {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
/* CLAUDE 10-20: a pinned setting (controls.css .pin-set, the Animation tab's length) sticks under this head, not over it
   (the head is 38 px and sticks 14 px up); on a phone the sheet's own header covers the head (phonescreen.css) */
body:not(.pe-on) .layer-ed {
  --pin-top: 24px;
}
.layer-ed .overlay-head {
  position: sticky;
  top: -14px;
  z-index: 2;
  margin: 0 0 8px;
  padding: 2px 0 8px;
  background: var(--c-surface);
  font-size: var(--t-title);
  font-weight: 600;
}
.layer-ed .overlay-head button {
  min-width: 28px;
  min-height: 28px;
}
/* CLAUDE 10-12 Graphite (the inspector pattern, owner 10-11): the pages are text tabs with an underline */
.layer-ed .ov-tabs {
  display: flex;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.layer-ed .ov-tabs button[aria-selected='true'] {
  border-color: transparent;
  background: transparent;
  color: var(--c-fg);
}
.layer-ed .overlay-card[data-pane] [data-ov-pane] {
  display: none;
}
.layer-ed .overlay-card[data-pane='text'] [data-ov-pane='text'],
.layer-ed .overlay-card[data-pane='anim'] [data-ov-pane='anim'] {
  display: block;
}
.layer-ed .overlay-card[data-pane='tts'] [data-ov-pane='tts'],
.layer-ed .overlay-card[data-pane='track'] [data-ov-pane='track'] {
  display: grid;
}
.layer-ed .ov-tabs button {
  flex: 0 0 auto;
  min-height: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-fg-3);
  font-size: var(--t-label);
  font-weight: 500;
}
/* CLAUDE 10-08: Text to speech */
.tts {
  gap: 10px;
}
.tts-words {
  display: grid;
  gap: 4px;
}
.tts-label {
  font-size: 12px;
  color: #cfcfd2;
}
.tts-text {
  display: block;
  max-height: 96px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid #3a3a3d;
  border-radius: var(--r-sm);
  background: #161816;
  color: #e8e8ea;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tts-voices {
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow: auto;
}
.tts-voice {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.tts-voice label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #3a3a3d;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.tts-voice label:has(input:checked) {
  border-color: #afafb2;
  background: #29292b;
}
.tts-voice label:has(input:focus-visible) {
  outline: 2px solid #8ab4ff;
  outline-offset: 1px;
}
.tts-voice label {
  justify-content: flex-start;
  text-align: left;
}
.tts-voice span {
  display: grid;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.layer-ed .tts-voice label input[type='radio'] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
}
.tts-voice small {
  color: #9a9a9f;
  font-size: 11px;
}
.tts-voice button {
  min-width: 44px;
  min-height: 44px;
}
.tts-msg.error {
  color: #ff8a80;
}
.tts progress {
  width: 100%;
}
/* CLAUDE 10-08: Text > Tracking */
.trk {
  display: grid;
  gap: 10px;
}
.trk-modes {
  display: grid;
  gap: 4px;
}
.trk-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #3a3a3d;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
}
.trk-mode:has(input:checked) {
  border-color: #afafb2;
  background: #29292b;
}
.trk-mode:has(input:focus-visible) {
  outline: 2px solid #8ab4ff;
  outline-offset: 1px;
}
.layer-ed .trk-mode input[type='radio'] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
}
.trk-mode span {
  display: grid;
  min-width: 0;
}
.trk-mode small {
  color: #9a9a9f;
  font-size: 11px;
}
.trk-box {
  display: grid;
  gap: 4px;
}
.trk-box button[aria-pressed='true'] {
  border-color: #afafb2;
  background: #29292b;
}
.trk-go {
  display: flex;
  gap: 8px;
}
.trk-go .primary {
  flex: 1;
}
.trk-go button {
  min-height: 44px;
}
.trk-msg.error {
  color: #ff8a80;
}
.trk progress {
  width: 100%;
}
.ov-add {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.ov-tile {
  display: grid;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: #cfcfd2;
  font-size: 11px;
  text-align: center;
}
.ov-tile-box {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 64px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-raised); /* the tile is a preview of the text, like a thumbnail (no outline) */
  transition: background-color var(--d-hover) ease;
}
.ov-tile-box b {
  font-size: var(--t-title);
  color: var(--c-fg);
}
.ov-tile-box i {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: #f3f2ee;
  color: #111;
  font-style: normal;
  opacity: 0;
  transition: opacity 0.12s;
}
.ov-tile:hover .ov-tile-box,
.ov-tile:focus-visible .ov-tile-box {
  background: var(--c-overlay);
}
.ov-tile:hover .ov-tile-box i,
.ov-tile:focus-visible .ov-tile-box i {
  opacity: 1;
}
@media (hover: none) {
  .ov-tile-box i {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ov-tile-box i {
    transition: none;
  }
}
.overlay-list:has(.ov-row) {
  gap: 4px;
  margin-top: 8px;
}
.ov-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #2a2a2c;
  border-radius: var(--r-sm);
  background: #151517;
  color: #cfcfd2;
  font-size: 12px;
  text-align: left;
}
.ov-row strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-row span {
  color: #8d8d90;
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}
.ov-row.selected {
  border-color: #8a8a92;
  background: #29292b;
  color: #fff;
}
/* Text > AI packaging, Local captions */
.cc-aipack {
  display: grid;
  gap: 8px;
}
.cc-aipack-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
.cc-aipack-steps li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: #151517;
}
.cc-aipack-steps li span {
  color: #8d8d90;
  font-size: 11px;
}
.cc-aipack-steps li[data-state='done'] span {
  color: var(--c-signal);
}
.cc-aipack-steps li[data-state='run'] span {
  color: #f3f2ee;
}
.cc-aipack-steps li[data-state='fail'] span {
  color: #ff8a80;
}
.cc-aipack progress {
  width: 100%;
  height: 6px;
}

/* CLAUDE 10-09: trim handles on both ends of every timeline block (app-timeline.js tlGrips, trimedge.js has the grab
   zone: 12 px, 20 px for a finger). Shown on hover and while the block is selected; a finger sees them always. */
.tl-trim {
  touch-action: none;
}
.tl-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 3;
  cursor: ew-resize;
  opacity: 0;
  transition: opacity 100ms ease; /* the handles fade in with the hover or the pick (polish B3a: 100 ms) */
}
.tl-grip.start {
  left: 0;
}
.tl-grip.end {
  right: 0;
}
.tl-grip::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 4px;
  border-radius: 2px;
  background: #f4f4f6;
  box-shadow: 0 0 0 1px #0009;
}
.tl-grip.start::before {
  left: 2px;
}
.tl-grip.end::before {
  right: 2px;
}
.tl-trim:hover > .tl-grip,
.tl-trim.selected > .tl-grip,
.tl-trim:focus-visible > .tl-grip {
  opacity: 1;
}
.tl-track.locked .tl-grip {
  display: none;
}
@media (pointer: coarse) {
  .tl-grip {
    width: 20px;
    opacity: 0.7;
  }
  .tl-grip::before {
    width: 5px;
  }
}
/* CLAUDE 10-19 (owner: "hard to resize things, the whole track area buggy"): a SELECTED block's handles are big and reach
   past its ends, as in CapCut: 14 px to grab with a mouse (6 outside, up to 8 inside), 44 px with a finger (22 outside, up
   to 22 inside). Inside, a handle never takes more than a third of the block, so a short one keeps a middle to move it
   by. app-timeline.js tlEdge reads which handle was pressed. The block lets them show past its ends; its name is clipped
   in its own span instead. */
.tl-trim.selected:not(.tl-adjustment) {
  overflow: visible;
}
.tl-labels > span {
  flex-shrink: 0; /* a lane with rows (app-timeline.js tlLaneRows) grows, and its name grows with it */
}
.tl-trim.selected > .tl-art {
  border-radius: inherit;
}
.tl-block > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-trim.selected {
  border-left-width: 1px; /* (a text's thick end borders would shift its handles inwards) */
  border-right-width: 1px;
}
.tl-trim.selected > .tl-grip {
  width: calc(7px + min(8px, 33%));
}
.tl-trim.selected > .tl-grip.start {
  left: -7px;
}
.tl-trim.selected > .tl-grip.end {
  right: -7px;
}
/* a cut's handle (and a transition's box) sits at the top of the video lane, under a selected clip's handles: in the
   middle of the lane it covered both clips' ends, so a clip could not be trimmed at a cut */
.tl-track .tl-cut {
  top: 9px;
  z-index: 2;
}
.tl-track .tl-cut.tl-cut-box {
  top: 2px;
  height: 18px;
  margin-top: 0;
  z-index: 2;
}
.tl-trim.selected > .tl-grip::before {
  top: 1px;
  bottom: 1px;
  width: 5px;
}
.tl-trim.selected > .tl-grip.start::before {
  left: 1px;
}
.tl-trim.selected > .tl-grip.end::before {
  right: 1px;
}
@media (pointer: coarse) {
  .tl-trim.selected > .tl-grip {
    width: calc(23px + min(22px, 33%));
  }
  .tl-trim.selected > .tl-grip.start {
    left: -23px;
  }
  .tl-trim.selected > .tl-grip.end {
    right: -23px;
  }
  .tl-trim.selected > .tl-grip::before {
    width: 8px;
    border-radius: var(--r-pill);
  }
  .tl-trim.selected > .tl-grip.start::before {
    left: 14px;
  }
  .tl-trim.selected > .tl-grip.end::before {
    right: 14px;
  }
}
/* the chip over a dragged block: its length while an end is trimmed, its start while it moves (app-timeline.js tlTip) */
.tl-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--c-primary);
  color: var(--c-primary-ink);
  font:
    600 11px/1.35 ui-monospace,
    'SF Mono',
    Menlo,
    Consolas,
    monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.tl-tip[hidden] {
  display: none;
}