/* ============================================================================
   66-clip-trimmer.css  (v15.171)
   The in-house clip trim sheet — see js/66-clip-trimmer.js.
   Full-page, slides up over the upload composer (which sits at z-index 100000,
   so this has to clear it). Editorial Dark, Söhne, dark-mode only.
   Authored for iPhone 14 Pro Max (430x932); every size is in --shelfd-px units
   so it holds from the 375pt models up to the 440pt Max.
   ============================================================================ */

.shelfd-clip-trimmer {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.shelfd-clip-trimmer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.shelfd-clip-trimmer.is-open .shelfd-clip-trimmer-backdrop { opacity: 1; }

.shelfd-clip-trimmer-panel {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #0e0e10;
  padding-top: max(var(--shelfd-safe-top, 0px), env(safe-area-inset-top, 0px));
  padding-bottom: max(calc(14 * var(--shelfd-px, 1px)), env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.shelfd-clip-trimmer.is-open .shelfd-clip-trimmer-panel { transform: translateY(0); }

/* ---- header ------------------------------------------------------------- */
.shelfd-clip-trimmer-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(8 * var(--shelfd-px, 1px));
  padding: calc(11 * var(--shelfd-px, 1px)) calc(16 * var(--shelfd-px, 1px)) calc(10 * var(--shelfd-px, 1px));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.shelfd-clip-trimmer-title {
  grid-column: 2;
  margin: 0;
  text-align: center;
  color: #ffffff;
  font-size: calc(16 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0;
}
.shelfd-clip-trimmer-cancel,
.shelfd-clip-trimmer-done {
  appearance: none;
  border: 0;
  background: transparent;
  padding: calc(4 * var(--shelfd-px, 1px)) 0;
  font-family: inherit;
  font-size: calc(15 * var(--shelfd-px, 1px));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.16s ease, color 0.16s ease;
}
.shelfd-clip-trimmer-cancel {
  grid-column: 1;
  justify-self: start;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 400;
}
.shelfd-clip-trimmer-cancel:active { opacity: 0.6; }
.shelfd-clip-trimmer-done {
  grid-column: 3;
  justify-self: end;
  color: rgba(255, 255, 255, 0.34);
  font-weight: 600;
}
/* Only reads as tappable once the window is a legal length. */
.shelfd-clip-trimmer-done.is-ready { color: #ffffff; }
.shelfd-clip-trimmer-done:disabled { cursor: default; }
.shelfd-clip-trimmer-done.is-ready:active { opacity: 0.6; }

/* ---- video stage -------------------------------------------------------- */
.shelfd-clip-trimmer-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-clip-trimmer-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000000;
}
.shelfd-clip-trimmer-playglyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(64 * var(--shelfd-px, 1px));
  height: calc(64 * var(--shelfd-px, 1px));
  margin: calc(-32 * var(--shelfd-px, 1px)) 0 0 calc(-32 * var(--shelfd-px, 1px));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #ffffff;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.shelfd-clip-trimmer-playglyph svg {
  width: calc(28 * var(--shelfd-px, 1px));
  height: calc(28 * var(--shelfd-px, 1px));
  margin-left: calc(3 * var(--shelfd-px, 1px));   /* optical centring of a triangle */
}
.shelfd-clip-trimmer-playglyph.is-hidden { opacity: 0; transform: scale(0.86); }

/* ---- selection readout -------------------------------------------------- */
.shelfd-clip-trimmer-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(10 * var(--shelfd-px, 1px));
  padding: calc(14 * var(--shelfd-px, 1px)) calc(16 * var(--shelfd-px, 1px)) calc(9 * var(--shelfd-px, 1px));
}
.shelfd-clip-trimmer-span {
  color: #ffffff;
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.shelfd-clip-trimmer-note {
  color: rgba(232, 232, 238, 0.45);
  font-size: calc(12.5 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0;
}

/* ---- track -------------------------------------------------------------- */
.shelfd-clip-trimmer-track {
  position: relative;
  flex: 0 0 auto;
  height: calc(60 * var(--shelfd-px, 1px));
  margin: 0 calc(16 * var(--shelfd-px, 1px));
  border-radius: calc(10 * var(--shelfd-px, 1px));
  background: #17171a;
  overflow: hidden;
  touch-action: none;   /* the whole track is a drag surface */
  -webkit-user-select: none;
  user-select: none;
}
.shelfd-clip-trimmer-film {
  position: absolute;
  inset: 0;
  display: flex;
}
.shelfd-clip-trimmer-film-cell {
  flex: 1 1 0;
  min-width: 0;
  background-color: #17171a;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.26s ease;
}
.shelfd-clip-trimmer-film-cell.is-loaded { opacity: 1; }

/* Everything outside the keep is dimmed, so the selection reads as the clip
   and the rest reads as discarded. */
.shelfd-clip-trimmer-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(6, 6, 8, 0.68);
  pointer-events: none;
}
.shelfd-clip-trimmer-shade--l { left: 0; width: 0; }
.shelfd-clip-trimmer-shade--r { right: 0; left: 100%; }

.shelfd-clip-trimmer-window {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Never narrower than the two grips. At a 1s selection on a 3-minute source
     the window is ~0.5% of the track — without this the handles would collapse
     into each other and become untappable. Over-constrained left+right+min-width
     resolves by ignoring `right`, so it simply grows rightward from the in-point,
     which is the correct end to anchor to. */
  min-width: calc(46 * var(--shelfd-px, 1px));
  border-top: calc(3 * var(--shelfd-px, 1px)) solid #ffffff;
  border-bottom: calc(3 * var(--shelfd-px, 1px)) solid #ffffff;
  cursor: grab;
  touch-action: none;
}
.shelfd-clip-trimmer.is-dragging .shelfd-clip-trimmer-window { cursor: grabbing; }

/* Grips sit INSIDE the selection, not outside it. Outside, a handle at
   start=0 (or end=duration) lands beyond the track's edge and is clipped away
   by the track's overflow:hidden — invisible and untappable at exactly the
   positions the window opens at. */
.shelfd-clip-trimmer-handle {
  position: absolute;
  top: calc(-3 * var(--shelfd-px, 1px));
  bottom: calc(-3 * var(--shelfd-px, 1px));
  width: calc(22 * var(--shelfd-px, 1px));
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.shelfd-clip-trimmer-handle--start {
  left: 0;
  border-radius: calc(9 * var(--shelfd-px, 1px)) 0 0 calc(9 * var(--shelfd-px, 1px));
}
.shelfd-clip-trimmer-handle--end {
  right: 0;
  border-radius: 0 calc(9 * var(--shelfd-px, 1px)) calc(9 * var(--shelfd-px, 1px)) 0;
}
/* the grip line inside each handle */
.shelfd-clip-trimmer-handle i {
  display: block;
  width: calc(3 * var(--shelfd-px, 1px));
  height: calc(20 * var(--shelfd-px, 1px));
  border-radius: 999px;
  background: rgba(10, 10, 12, 0.42);
}
.shelfd-clip-trimmer-handle:active { background: #d8d8dc; }

.shelfd-clip-trimmer-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(2 * var(--shelfd-px, 1px));
  margin-left: calc(-1 * var(--shelfd-px, 1px));
  background: #d64dff;   /* the app's single accent */
  box-shadow: 0 0 calc(6 * var(--shelfd-px, 1px)) rgba(214, 77, 255, 0.7);
  pointer-events: none;
}

/* ---- in / out readout --------------------------------------------------- */
.shelfd-clip-trimmer-ends {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* aligned to the track's own edges (it carries the same 16px side margin) */
  padding: calc(8 * var(--shelfd-px, 1px)) calc(16 * var(--shelfd-px, 1px)) 0;
  color: rgba(232, 232, 238, 0.42);
  font-size: calc(11.5 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* v15.173: the in-sheet "Trimming… 42%" bar is gone. Done now closes the sheet
   immediately and the encode runs in the background out in the upload pipeline,
   reporting through the composer's own progress bar alongside compression and
   upload — so there is nothing left for this sheet to show progress for. */

@media (prefers-reduced-motion: reduce) {
  .shelfd-clip-trimmer-panel,
  .shelfd-clip-trimmer-backdrop { transition: none !important; }
}