/* CLAUDE 10-19: the clip setup screen (index.html .setup-page.cs, app-base.js renderSetupPicks, clipsetup.js).
   One screen on every device. Desktop: the video in the shape the clips will have on the left (it stays in view while the
   choices scroll), the choices on the right, the sentence and Get clips in a bar along the bottom. Phone (< 768 px): the
   same parts stacked in a full-screen sheet with its own back arrow and the button fixed at the bottom.
   Graphite (DESIGN-SYSTEM.md): the video is the only box; the options are .m-seg tracks (controls.css, the thumb slides
   with RipMotion.tabs); one primary button; every value is a token (tools/style_drift.py). */

.setup-page.cs {
  --stage-h: min(64vh, 600px);
  width: min(1120px, 100%);
  padding: var(--s-6) var(--s-5) 0;
  gap: 0;
}
.cs-bar {
  display: none; /* the phone sheet's own top bar */
}
.cs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: var(--s-6) var(--s-7);
  align-items: start;
}

/* ---- the video, in the shape it will have ---- */
.cs-media {
  position: sticky;
  top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}
.cs-stage {
  display: grid;
  place-items: center;
  height: var(--stage-h);
  border-radius: var(--r-md);
  background: var(--c-stage);
  overflow: hidden;
}
.cs-frame {
  --ar: 0.5625;
  position: relative;
  aspect-ratio: var(--ar);
  width: min(calc(100% - var(--s-6)), calc((var(--stage-h) - var(--s-6)) * var(--ar)));
  border-radius: var(--r-sm);
  background: var(--c-raised);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--e-2);
}
.cs-frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill: the crop (the server centres it on the people) */
  background: transparent;
}
.cs-frame[data-fit='fit'] > video {
  object-fit: contain; /* Fit: the whole picture over the Background (a blurred copy, a color or black) */
}
.cs-frame[data-fit='fit']:not([data-bg='blur']) {
  background: var(--cs-bg, var(--c-raised));
}
.cs-blur {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  filter: blur(18px) brightness(0.8);
  opacity: 0;
  transition: opacity var(--d-panel) var(--ease-out);
}
.cs-blur:not([src]) {
  display: none;
}
.cs-frame[data-fit='fit'][data-bg='blur'] > .cs-blur {
  opacity: 1;
}
/* a new shape settles in instead of jumping (opacity and scale only; reduced motion keeps the fade: --pop is 1) */
@keyframes cs-settle {
  from {
    opacity: 0.4;
    scale: var(--pop);
  }
}
.cs-frame.cs-swap {
  animation: cs-settle var(--d-panel) var(--ease-soft);
}
.setup-page.is-loading .cs-frame {
  cursor: default;
}
.cs-import {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-fg-2);
  font-size: var(--t-label);
}
.cs-import progress {
  flex: 1;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: var(--c-line-strong);
  appearance: none;
  -webkit-appearance: none;
}
.cs-import progress::-webkit-progress-bar {
  background: var(--c-line-strong);
}
.cs-import progress::-webkit-progress-value {
  background: var(--c-fg);
}
.cs-import progress::-moz-progress-bar {
  background: var(--c-fg);
}
.cs-src {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-width: 0;
}
.cs-src-name {
  min-width: 0;
  overflow: hidden;
  color: var(--c-fg);
  font-size: var(--t-body);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cs-src-meta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
}

/* ---- the choices ---- */
.cs-picks {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}
.cs .cs-mode {
  margin-top: 0;
}
.cs-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}
.cs-group[hidden],
.cs-group.is-off {
  display: none;
}
.cs-label {
  color: var(--c-fg-2);
  font-size: var(--t-label);
  font-weight: 500;
}
.cs-opts.m-seg {
  display: flex;
  width: 100%;
}
.cs-opts.m-seg > button {
  min-width: 0;
  min-height: var(--h-touch);
  padding: 0 var(--s-2);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
}
.cs-opts.cs-tall > button {
  flex-direction: column;
  gap: var(--s-2);
  min-height: 72px;
}
/* a small drawn frame per shape: its own aspect, a dashed one for "your video" */
.cs-glyph {
  display: block;
  width: min(36px, calc(22px * var(--ar)));
  aspect-ratio: var(--ar);
  border: 1.5px solid currentColor;
  border-radius: var(--r-xs);
  opacity: 0.85;
}
.cs-glyph-own {
  border-style: dashed;
}
.cs-glyph-fill {
  background: color-mix(in srgb, currentColor 32%, transparent);
}
.cs-glyph-fit {
  background:
    linear-gradient(currentColor, currentColor) center / 100% 34% no-repeat,
    color-mix(in srgb, currentColor 12%, transparent);
}

/* CLAUDE 11-04 (owner: the Shape picker was "tacky"): no box, no outline icons: each shape is drawn at its true
   proportion in a fixed square, the chosen one filled and bright, the rest a thin line. The tile is the whole target. */
.cs-shapes {
  display: flex;
  gap: var(--s-2);
}
.cs-shapes > button {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  min-width: 0;
  min-height: var(--h-touch);
  padding: var(--s-2) 0;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-fg-3);
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  transition: color var(--d-hover) var(--ease-out);
}
.cs-shape {
  --box: 52px;
  display: block;
  width: calc(var(--box) * min(1, var(--ar)));
  aspect-ratio: var(--ar);
  max-height: var(--box);
  margin: calc((var(--box) - min(var(--box), var(--box) / var(--ar))) / 2) 0;
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-xs);
  transition:
    border-color var(--d-hover) var(--ease-out),
    background-color var(--d-hover) var(--ease-out);
}
.cs-shape-own {
  border-style: dashed;
}
.cs-shapes > button[aria-checked='true'] {
  color: var(--c-fg);
}
.cs-shapes > button[aria-checked='true'] .cs-shape {
  border-color: var(--c-fg);
  background: color-mix(in srgb, var(--c-fg) 16%, transparent);
}
.cs-shapes > button:focus-visible {
  outline: 2px solid var(--c-focus);
}
@media (hover: hover) and (pointer: fine) {
  .cs-shapes > button:hover {
    color: var(--c-fg);
  }
  .cs-shapes > button[aria-checked='false']:hover .cs-shape {
    border-color: var(--c-fg-3);
  }
}

/* Background: Blur / Color / Black, and the swatches under Color */
.cs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.cs-swatches[hidden] {
  display: none;
}
.cs-swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--h-touch);
  height: var(--h-touch);
  padding: 0;
  border: 0;
  background: transparent;
}
.cs-swatch::before {
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sw, var(--c-raised));
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
  outline: 1.5px solid transparent;
  outline-offset: 3px;
  transition: outline-color var(--d-hover) var(--ease-out);
}
.cs-swatch[aria-checked='true']::before {
  outline-color: var(--c-fg);
}
.cs-swatch:focus-visible {
  outline: 2px solid var(--c-focus);
  border-radius: 50%;
}
.cs-swatch-own::before {
  background: conic-gradient(
    hsl(0 85% 60%),
    hsl(60 85% 55%),
    hsl(130 65% 50%),
    hsl(210 85% 60%),
    hsl(285 75% 65%),
    hsl(0 85% 60%)
  );
  box-shadow: none;
}
.cs-swatch-own input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* the video's name: a quiet button that becomes a field in place */
button.cs-src-name {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: text;
}
button.cs-src-name:disabled {
  cursor: default;
}
.cs-src-edit {
  flex: 1;
  min-width: 0;
  min-height: var(--h-touch);
  padding: 0 var(--s-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-fg);
  font-family: inherit;
  font-size: var(--t-body);
}
.cs-src-edit:focus-visible {
  border-color: var(--c-fg);
  outline: none;
}
@media (max-width: 767.98px) {
  .cs-src-edit {
    font-size: max(var(--t-body), 16px); /* 16px at least: iOS zooms the page into any field below it */
  }
}
/* the first-time line under a choice (no paragraphs: one short line, then gone after the first Get clips) */
.cs-hint {
  display: none;
  margin: 0;
  color: var(--c-fg-3);
  font-size: var(--t-meta);
}
.setup-page.is-new .cs-hint:not(:empty) {
  display: block;
}

/* the Captions row: each look drawn over the video's own picture */
.cs-looks {
  display: flex;
  gap: var(--s-2);
  margin: 0 calc(var(--s-1) * -1);
  padding: var(--s-1);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.cs-looks::-webkit-scrollbar {
  display: none;
}
.cs-look {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 88px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-fg-2);
  text-align: left;
  scroll-snap-align: start;
}
.cs-look-well {
  display: grid;
  place-items: center;
  height: 64px;
  padding: 0 var(--s-1);
  border-radius: var(--r-sm);
  background:
    linear-gradient(rgba(9, 9, 10, 0.45), rgba(9, 9, 10, 0.45)),
    var(--cs-poster, none) center / cover,
    var(--c-stage);
  outline: 1.5px solid transparent;
  outline-offset: 2px;
  overflow: hidden;
  transition: outline-color var(--d-hover) var(--ease-out);
}
.cs-look-well .sample {
  max-width: 100%;
  overflow: hidden;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}
.cs-look-well .sample-none {
  color: var(--c-fg-2);
  font-size: var(--t-meta);
}
.cs-look-name {
  overflow: hidden;
  font-size: var(--t-meta);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cs-look[aria-checked='true'] {
  color: var(--c-fg);
}
.cs-look[aria-checked='true'] .cs-look-well {
  outline-color: var(--c-fg);
}
.cs-look:focus-visible {
  outline: none;
}
.cs-look:focus-visible .cs-look-well {
  outline: 2px solid var(--c-focus);
}
@media (hover: hover) and (pointer: fine) {
  .cs-look:hover {
    color: var(--c-fg);
  }
  .cs-look:not([aria-checked='true']):hover .cs-look-well {
    outline-color: var(--c-line-strong);
  }
}

/* ---- More options: a quiet row, the sections in Graphite type (no uppercase labels) ---- */
.cs .cs-more > summary {
  align-self: stretch;
  padding: var(--s-3) var(--s-6) var(--s-3) 0;
  border-top: 1px solid var(--c-line);
  color: var(--c-fg-2);
  font-size: var(--t-body);
  font-weight: 500;
}
.cs .cs-more > summary::after {
  right: var(--s-2);
  border-color: var(--c-fg-3);
  transition: transform var(--d-ui) var(--ease-out);
}
.cs .setup-section {
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom-color: var(--c-line);
}
.cs .setup-section h3 {
  color: var(--c-fg-2);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.cs .setup-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* phone QA P1-12: a preset tile's sample is one line of words that wraps inside the tile instead of being cut */
.cs .setup-presets .preset-tile .sample > span {
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* phone QA P2-1: the small text controls get a finger-sized target */
@media (pointer: coarse) {
  .cs .srt-upload a {
    display: inline-flex;
    align-items: center;
    min-height: var(--h-touch);
  }
  .cs .range-pair,
  .cs .range-pair input {
    height: var(--h-touch);
  }
}

/* ---- the sentence and the one button ---- */
.cs-go {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding: var(--s-4) 0 var(--s-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-canvas);
}
.cs-say {
  flex: 1;
  margin: 0;
  color: var(--c-fg-2);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.cs-go-btn.m-btn {
  min-width: 220px;
  min-height: var(--h-touch);
  font-size: var(--t-title);
}
.cs-go-btn.m-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (hover: hover) and (pointer: fine) {
  .cs-go-btn.m-btn:not(:disabled):hover {
    background: var(--c-primary-hover);
  }
}

/* ---- tablet: one column, the video above ---- */
@media (max-width: 1023.98px) {
  .cs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .cs-media {
    position: static;
  }
  .setup-page.cs {
    --stage-h: min(46vh, 440px);
    width: min(680px, 100%);
  }
}

/* ---- phone: a full-screen sheet ---- */
@media (max-width: 767.98px) {
  body.at-home .home-page[data-page='setup']:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 45; /* over the top bars (30, 31), under the toast (50) */
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-canvas);
    animation: cs-sheet-in var(--d-sheet) var(--ease-sheet) backwards;
  }
  body.app-shell.at-home:has(.home-page[data-page='setup']:not([hidden])) {
    --tabs-h: calc(132px + env(safe-area-inset-bottom, 0px)); /* the toast sits above the button bar */
  }
  body.app-shell.at-home:has(.home-page[data-page='setup']:not([hidden])) .app-tabs {
    display: none;
  }
  .setup-page.cs {
    --stage-h: min(34vh, 300px);
    width: 100%;
    padding: 0 var(--s-4) calc(136px + env(safe-area-inset-bottom, 0px));
  }
  .cs-bar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    height: 52px;
    margin: 0 calc(var(--s-4) * -1) var(--s-2);
    padding: env(safe-area-inset-top, 0px) var(--s-2) 0;
    background: var(--c-canvas);
  }
  .cs-back svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .cs-bar-title {
    color: var(--c-fg);
    font-size: var(--t-title);
    font-weight: 600;
  }
  .cs-grid {
    gap: var(--s-5);
  }
  .cs-picks {
    gap: var(--s-5);
  }
  .cs-go {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    margin: 0;
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--e-2);
  }
  .cs-say {
    font-size: var(--t-label);
    text-align: center;
  }
  .cs-go-btn.m-btn {
    width: 100%;
    min-height: var(--s-7);
  }
}
@keyframes cs-sheet-in {
  from {
    opacity: 0;
    translate: 0 var(--shift-lg);
  }
}