/* Clip Cutter — everything 00.css does NOT do, and nothing it does.
 *
 * The base (tokens, panels, rows, buttons, inputs, notices, progress, the tail, the 44 px targets and
 * the reduced-motion rule) is 00.css, linked ahead of this file. What is left is the three things
 * this app has that a list-and-form page does not: the TIMELINE STRIP, the TRIM HANDLES on the
 * selected segment, and the PREVIEW BOX. Plus the drop zone, which is the kit's `.empty` with a
 * live state, and tabular numerals for times that must not jitter as they count.
 *
 * Every colour is one of the kit's semantic tokens, so light and dark both come out right and a
 * renamed host token is still one edit in 00.css rather than fifty here.
 */

/* ── the drop zone: the kit's dashed `.empty`, with an "over" state ───────────────────────────── */

.drop {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: var(--s3);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.drop.over { border-color: var(--accent); background: var(--surface-2); }
.drop.disabled { opacity: 0.55; }
.drop-title { font-size: 14px; }
.drop-sub { font-size: 12px; color: var(--ink-dim); }

/* ── the timeline strip ───────────────────────────────────────────────────────────────────────
 * A proportional picture of the cut: one segment per clip, width = its share of the running time.
 * It is `aria-hidden` on purpose — every action it offers (select, reorder, trim) is also on the
 * list below it, which is the keyboard-and-screen-reader twin. A picture is not a second interface.
 */

.strip {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 48px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}

.seg {
  position: relative;
  flex: 0 0 auto;
  min-width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--raised);
  color: var(--ink-dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden;
  transition: background 0.15s linear;
}
.seg.selected {
  background: var(--accent-dim);
  color: var(--ink);
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

/* ── the trim handles ─────────────────────────────────────────────────────────────────────────
 * Only the selected segment carries them. They are 12 px wide but sit on a 44 px tall strip and
 * every one of them has a keyboard twin: `[` and `]` nudge the same numbers, and the In/Out fields
 * type them exactly. `touch-action: none` is what makes a finger drag instead of scrolling the page.
 */

.handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  display: block;
  border: 0;
  padding: 0;
  background: var(--accent);
  cursor: ew-resize;
  touch-action: none;
}
.handle.in { left: 0; border-radius: 6px 0 0 6px; }
.handle.out { right: 0; border-radius: 0 6px 6px 0; }
.seg.dragging { opacity: 0.8; }

/* ── the preview box ──────────────────────────────────────────────────────────────────────────
 * A fixed black frame so the panel does not jump height between a 9:16 phone clip and a 16:9 take,
 * and so an audio-only source still shows something rather than collapsing to nothing.
 */

.preview-box {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  max-height: 46vh;
  border-radius: var(--radius);
  background: #000;
  overflow: hidden;
}
.preview-box > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

/* ── the rest: three small gaps in the kit ────────────────────────────────────────────────────── */

/* A count beside an `.eyebrow` heading, which is uppercase and spaced and should not be. */
.eyebrow .count { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-dim); }

/* Times and paths that change under the reader: the digits must not shift sideways as they do. */
.tnum, .row-meta, .num, .seg { font-variant-numeric: tabular-nums; }

/* A clip row's In/Out pair: full width under the name on a phone, inline when there is room. */
.trims { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); width: 100%; }
.trims .field { flex: 0 0 auto; flex-direction: row; align-items: center; gap: var(--s2); }
.row.dragging { opacity: 0.65; }
/* A clip row is a tab stop (the arrows walk them), so it needs the ring the kit gives controls. */
.row[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.grip { padding: 0; font-size: 16px; color: var(--ink-dim); touch-action: none; cursor: grab; }
kbd {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 11px;
}

@media (min-width: 560px) {
  .trims { width: auto; }
}