/* ==========================================================================
   Montiliya — creating a new video in three steps (js/create.js)
   The same black-and-white system as the rest of the app: tokens from styles.css, no accent colour, no gradients, hierarchy from scale, weight and space.
   Logical properties everywhere (LTR and RTL share this file). Motion is 220-320 ms fade/translate; the global prefers-reduced-motion rule of styles.css
   cuts every animation and transition here to ~0.
   ========================================================================== */

.create { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.admin-view { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s6) var(--s6) var(--s12); }
.cr { display: flex; flex-direction: column; width: 100%; max-width: 760px; min-height: 100%; margin-inline: auto; padding: 0 var(--s6); }
.cr-stage { padding-bottom: var(--s8); }

/* the header stays put: the step bar, "Start over" and (steps 2 and 3) the title with its line are pinned at the top while the step scrolls under them; the footer (.cr-nav) does the same at the bottom.
   Short or narrow screens pin the step bar only (below), so the title and its line cannot take half of the screen. The soft fade under the header shows only while something is scrolled under it. */
.cr-head { position: sticky; inset-block-start: 0; z-index: 5; flex: none; display: flow-root; padding-top: var(--s6); background: var(--panel); }
.cr-head::after, .cr-top::after { content: ''; position: absolute; inset-inline: 0; inset-block-start: 100%; height: var(--s5); background: linear-gradient(var(--panel), transparent); opacity: 0; transition: opacity var(--t-fast) var(--ease); pointer-events: none; }
.cr[data-stuck] .cr-head::after { opacity: 1; }
@media (max-width: 640px), (max-height: 640px) {
  .cr-head { display: contents; }
  .cr-head::after { content: none; }
  .cr-top { position: sticky; inset-block-start: 0; z-index: 5; padding-top: var(--s6); background: var(--panel); }
  .cr[data-stuck] .cr-top::after { opacity: 1; }
}

/* text buttons and links: small, quiet, with a 44 px touch area that does not take layout space */
.cr-text, .cr-link { position: relative; min-height: 28px; padding-inline: var(--s1); border-radius: 6px; color: var(--ink-3); font: inherit; font-size: var(--fs-sm); font-weight: 500; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cr-text::after, .cr-link::after { content: ''; position: absolute; inset: -8px -6px; }
.cr-text:hover, .cr-link:hover { color: var(--ink); text-decoration-line: underline; }
.cr-text.strong { color: var(--ink); font-weight: 600; }
.cr-text.danger { color: var(--danger); font-weight: 600; }                 /* Delete draft: the one destructive word of the flow */
.cr-link { color: var(--ink); font-size: inherit; text-decoration-line: underline; padding-inline: 2px; }
.cr-link:hover { text-decoration-thickness: 2px; }
.cr-fine { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }

/* progress: three thin bars, the current step named */
.cr-top { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s8); }
.cr-progress ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.cr-pi { min-width: 0; }
.cr-pi-btn, .cr-pi-in { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s2); width: 100%; min-height: 44px; padding-block: var(--s1); text-align: start; }
.cr-pi-bar { position: relative; display: block; height: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.cr-pi-bar::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
[dir='rtl'] .cr-pi-bar::after { transform-origin: right center; }
.cr-pi[data-state='done'] .cr-pi-bar::after { transform: scaleX(1); }
.cr-pi[data-state='current'] .cr-pi-bar::after { transform: scaleX(1); animation: cr-fill 320ms var(--ease) both; }
@keyframes cr-fill { from { transform: scaleX(0); } }
.cr-pi-name { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500; transition: color var(--t-fast) var(--ease); }
.cr-pi-name .num { font-size: var(--fs-xs); }
.cr-pi-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-pi[data-state='current'] .cr-pi-name { color: var(--ink); font-weight: 650; }
.cr-pi-btn:hover .cr-pi-name { color: var(--ink); }
.cr-tools { display: flex; justify-content: flex-end; min-height: 28px; }
.cr-confirm { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s3); color: var(--ink-2); font-size: var(--fs-sm); }

/* every step enters with a short fade and a slide from the side it comes from (mirrored in RTL) */
.cr-step { --cr-from: 18px; animation: cr-in 280ms var(--ease) both; }
.cr-step[data-dir='back'] { --cr-from: -18px; }
[dir='rtl'] .cr-step { --cr-from: -18px; }
[dir='rtl'] .cr-step[data-dir='back'] { --cr-from: 18px; }
.cr-titles { --cr-from: 18px; }                                    /* the title and its line (in the pinned header) enter the same way as the step under them */
.cr-titles[data-dir='back'] { --cr-from: -18px; }
[dir='rtl'] .cr-titles { --cr-from: -18px; }
[dir='rtl'] .cr-titles[data-dir='back'] { --cr-from: 18px; }
.cr-titles > * { animation: cr-in 280ms var(--ease) both; }
.cr-titles h1:last-child { margin-bottom: 0; }                    /* a title with no line under it: the gap to the step is the step's own, as before the header was pinned */
@keyframes cr-in { from { opacity: 0; transform: translateX(var(--cr-from)); } }
.cr h1 { margin: 0 0 var(--s2); font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.25rem); line-height: 1.12; font-weight: 650; letter-spacing: -0.03em; text-wrap: balance; }
:lang(ar) .cr h1 { line-height: 1.35; font-weight: 600; letter-spacing: 0; }
.cr h1:focus { outline: none; }
.cr h1:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: var(--r-sm); }
.cr-lead { margin: 0 0 var(--s6); max-width: 62ch; color: var(--ink-3); font-size: var(--fs-lg); line-height: 1.5; text-wrap: pretty; }

/* ---- step 1: the drop box and the clips ---------------------------------- */
.cr-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s6); min-height: clamp(280px, 44vh, 400px); padding: var(--s10) var(--s6); text-align: center;
  background: var(--panel-2); border: 1.5px dashed var(--line-strong); border-radius: var(--r-xl); cursor: pointer;
  transition: border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease); }
.cr-drop:hover, .cr-dragging .cr-drop { border-color: var(--ink); background: var(--hover); }
.cr-dragging .cr-drop { border-style: solid; }
.cr-plus { display: grid; place-items: center; flex: none; width: 76px; height: 76px; border-radius: var(--r-full); background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink);
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.cr-plus .icon { width: 30px; height: 30px; stroke-width: 1.5; }
.cr-drop:hover .cr-plus, .cr-dragging .cr-plus { background: var(--ink); color: var(--on-ink); border-color: var(--ink); transform: scale(1.05); }
.cr-drop-text { display: flex; flex-direction: column; align-items: center; gap: var(--s2); min-width: 0; }
.cr-drop h1 { margin: 0; }
.cr-drop-sub { margin: 0; color: var(--ink-2); font-size: var(--fs-lg); line-height: 1.5; text-wrap: balance; }
/* with clips the box shrinks to a slim bar that still takes drops */
.cr-drop[data-has='1'] { flex-direction: row; justify-content: flex-start; gap: var(--s4); min-height: 0; padding: var(--s4) var(--s5); text-align: start; }
.cr-drop[data-has='1'] .cr-plus { width: 52px; height: 52px; }
.cr-drop[data-has='1'] .cr-plus .icon { width: 22px; height: 22px; }
.cr-drop[data-has='1'] .cr-drop-text { align-items: flex-start; gap: 2px; }
.cr-drop[data-has='1'] h1 { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; }
.cr-drop[data-has='1'] .cr-drop-sub { font-size: var(--fs-md); }
.cr-banner { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--danger); border-radius: var(--r-md); color: var(--danger); font-size: var(--fs-sm); }
.cr-banner .cr-text.strong { color: var(--ink); }
/* the draft being taken up again, and a draft of the platform this browser is not holding: one card to continue it instead of starting a second one */
.cr-restoring { margin: var(--s4) 0 0; color: var(--ink-3); font-size: var(--fs-sm); }
.cr-resume { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-lg); }
.cr-resume[hidden], .cr-restoring[hidden] { display: none; }
.cr-resume-i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--panel-3); color: var(--ink-2); }
.cr-resume-i .icon { width: 18px; height: 18px; }
.cr-resume-t { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 0; line-height: 1.35; }
.cr-resume-t strong { font-size: var(--fs-md); font-weight: 650; }
.cr-resume-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: var(--fs-sm); }
.cr-resume .btn { min-height: 44px; }

.cr-sum { display: grid; gap: var(--s2); margin: var(--s6) 0 var(--s4); }
.cr-sum-line { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
.cr-sum strong { font-size: var(--fs-lg); font-weight: 650; }
.cr-sum-m, .cr-sum-s { color: var(--ink-3); font-size: var(--fs-sm); }
.cr-bar { display: block; height: 3px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.cr-bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width var(--t-fast) linear; }
.cr-bar.done i { width: 100% !important; }

.cr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s3); }
.cr-clip { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  content-visibility: auto; contain-intrinsic-size: auto 270px; animation: cr-pop var(--t-med) var(--ease) both; transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.cr-grid.many .cr-clip { animation: none; }
@keyframes cr-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.cr-clip[data-state='removing'] { opacity: 0.5; pointer-events: none; }
.cr-clip[data-state='failed'] { border-color: var(--danger); }
.cr-clip[data-state='interrupted'] { border-color: var(--danger); border-style: dashed; }      /* its upload stopped with the page that sent it: added again, or removed */
.cr-clip[data-state='interrupted'] .cr-th { opacity: 0.55; }
.cr-clip[data-state='skipped'] { opacity: 0.6; }
.cr-th { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-md); background: var(--panel-3); }
.cr-th-fb { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.cr-th-fb .icon { width: 28px; height: 28px; stroke-width: 1.4; }
.cr-th-fb img { width: 100%; height: 100%; object-fit: cover; }
.cr-dur { position: absolute; inset-inline-start: 6px; inset-block-end: 9px; padding: 1px 7px; border-radius: var(--r-full); background: rgba(10, 10, 10, 0.72); color: #fff; font-size: var(--fs-xs); line-height: 1.5; }
.cr-ok { position: absolute; inset-inline-start: 6px; inset-block-start: 6px; display: none; place-items: center; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--ink); color: var(--on-ink); }
.cr-ok .icon { width: 12px; height: 12px; stroke-width: 2.8; }
.cr-clip[data-state='done'] .cr-ok, .cr-clip[data-state='local'] .cr-ok { display: grid; }
.cr-th .cr-bar { position: absolute; inset-inline: 0; inset-block-end: 0; height: 4px; border-radius: 0; background: rgba(10, 10, 10, 0.55); }
.cr-th .cr-bar i { background: #fff; }
.cr-x { position: absolute; z-index: 1; inset-block-start: 6px; inset-inline-end: 6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); background: rgba(10, 10, 10, 0.72); color: #fff; opacity: 0; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.cr-x .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.cr-x::after { content: ''; position: absolute; inset: -8px; }
.cr-clip:hover .cr-x, .cr-clip:focus-within .cr-x, .cr-x:focus-visible { opacity: 1; }
.cr-x:hover { transform: scale(1.1); }
.cr-x:focus-visible { outline-color: #fff; outline-offset: 1px; }
@media (hover: none) { .cr-x { opacity: 1; } }
.cr-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 var(--s1) var(--s1); }
.cr-nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; }
.cr-sub, .cr-msg { color: var(--ink-3); font-size: var(--fs-xs); }
.cr-msg { overflow-wrap: anywhere; }
.cr-clip[data-state='failed'] .cr-msg, .cr-clip[data-state='interrupted'] .cr-msg { color: var(--danger); }
.cr-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s1); }

/* ---- step 2: the style (the picker draws itself in #cr-picker) and the custom reference ---- */
.cr-picker { min-width: 0; }
.cr-custom { display: grid; gap: var(--s3); margin-top: var(--s6); padding: var(--s5); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-xl); animation: cr-in var(--t-med) var(--ease) both; }
.cr-custom-h { display: grid; gap: 2px; }
.cr-custom-h strong { font-size: var(--fs-lg); font-weight: 650; }
.cr-custom-h span { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
.cr-custom .ref-card { background: var(--panel); }
.cr-custom .ref-error { margin: 0; }
.cr-fb { display: grid; gap: var(--s3); }
.cr-fb-card { display: flex; align-items: center; min-height: 64px; padding: var(--s4) var(--s5); text-align: start; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.cr-fb-card:hover { border-color: var(--ink); }
.cr-fb-card[aria-checked='true'] { background: var(--panel-3); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* ---- step 3: the brief ---------------------------------------------------- */
.cr-brief { display: grid; grid-template-columns: minmax(0, 1fr) 232px; align-items: start; gap: var(--s8); margin-top: var(--s5); }
.cr-col { display: grid; align-content: start; gap: var(--s5); min-width: 0; }
.cr-card { overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-xl); }
.cr-srow { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); }
.cr-srow + .cr-srow { border-top: 1px solid var(--line); }
.cr-k { color: var(--ink-3); font-size: var(--fs-sm); }
.cr-v { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.cr-sum-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cr-sum-tx strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); font-weight: 650; }
.cr-sum-tx small { color: var(--ink-3); font-size: var(--fs-xs); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cr-sum-th { display: grid; place-items: center; flex: none; width: 40px; height: 52px; overflow: hidden; border-radius: var(--r-sm); background: var(--panel-3); border: 1px solid var(--line); color: var(--ink-3); }
.cr-sum-th img { width: 100%; height: 100%; object-fit: cover; }
.cr-sum-th .icon { width: 16px; height: 16px; }
.cr-sum-strip { display: flex; flex: none; padding-inline-end: 10px; }
.cr-mini { display: grid; place-items: center; flex: none; width: 30px; height: 44px; margin-inline-end: -10px; overflow: hidden; border-radius: 6px; background: var(--panel-3); box-shadow: 0 0 0 2px var(--panel-2); color: var(--ink-3); font-size: var(--fs-xs); }
.cr-mini img { width: 100%; height: 100%; object-fit: cover; }
.cr-mini .icon { width: 14px; height: 14px; }
.cr-mini.more { color: var(--ink); font-weight: 600; }
.cr-field { display: grid; gap: var(--s2); }
.cr-field-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.cr-field-h label { font-size: var(--fs-md); font-weight: 600; }
.cr-opt { padding: 1px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-full); color: var(--ink-3); font-size: var(--fs-xs); }
.cr-opt.req { color: var(--ink); border-color: var(--ink-3); }
.cr-field textarea { display: block; width: 100%; min-height: 132px; max-height: 40vh; padding: var(--s4) var(--s5); resize: vertical; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-xl); outline: 0;
  color: var(--ink); font-size: 1.0625rem; line-height: 1.55; transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.cr-field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.cr-field textarea:focus { border-color: var(--ink-3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent); }
.cr-help { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
.cr-voice { display: flex; align-items: center; gap: var(--s3); min-height: 44px; }
.cr-voice[hidden] { display: none; }
.cr-rec { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; }
.cr-rec-time { min-width: 4ch; font-weight: 600; }
.cr-secondary { display: grid; gap: var(--s4); padding-top: var(--s2); }
.cr-opt-row { display: grid; gap: var(--s2); }
.cr-opt-k { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500; }
.cr-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 26px; }
.cr-seg-opt { display: flex; flex: 1 1 56px; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding-inline: var(--s2); border-radius: var(--r-full); color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.cr-seg-opt:hover { background: var(--hover); color: var(--ink); }
.cr-seg-opt[aria-checked='true'] { background: var(--ink); color: var(--on-ink); }
.cr-g { display: inline-flex; flex: none; width: 18px; height: 18px; }
.cr-g svg { width: 100%; height: 100%; }
.cr-music { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.cr-add .icon { color: var(--ink-3); }
.cr-chip { display: inline-flex; align-items: center; gap: var(--s3); max-width: 100%; min-height: 44px; padding-block: var(--s1); padding-inline: var(--s4) var(--s2); background: var(--panel-3); border: 1px solid var(--line-strong); border-radius: var(--r-full); }
.cr-chip-i { display: grid; place-items: center; color: var(--ink-3); }
.cr-chip-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cr-chip-t strong { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: 600; }
.cr-chip-t small { color: var(--ink-3); font-size: var(--fs-xs); }
.cr-chip.lost { border-color: var(--danger); border-style: dashed; }
/* the creator's images (a logo, photos): small square tiles with the picture itself, its name under it, remove at the corner */
.cr-images { display: grid; gap: var(--s3); }
.cr-img-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s3); }
.cr-img { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cr-img-th { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; color: var(--ink-3);
  background: var(--panel-3); border: 1px solid var(--line-strong);
  background-image: linear-gradient(45deg, var(--hover) 25%, transparent 25%, transparent 75%, var(--hover) 75%), linear-gradient(45deg, var(--hover) 25%, transparent 25%, transparent 75%, var(--hover) 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; }          /* a checkerboard: a transparent logo reads as one */
.cr-img-th img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cr-img-st { position: absolute; inset-inline: 6px; inset-block-end: 6px; padding: 2px 6px; border-radius: var(--r-full); background: rgba(0, 0, 0, 0.62); color: #fff; font-size: var(--fs-xs); text-align: center; }
.cr-img-name { font-size: var(--fs-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-img-x { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 30px; height: 30px; background: rgba(0, 0, 0, 0.55); color: #fff; border-color: transparent; }
.cr-img-x:hover { background: rgba(0, 0, 0, 0.75); color: #fff; }
.cr-img.lost .cr-img-th { border-color: var(--danger); border-style: dashed; }
.cr-img.failed .cr-img-th { border-color: var(--danger); }
.cr-img .cr-text { align-self: flex-start; font-size: var(--fs-xs); }
.cr-img-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
@media (pointer: coarse) { .cr-img-x { width: 36px; height: 36px; } }
.cr-chip.lost .cr-chip-t small { color: var(--danger); }
.cr-fmt { display: grid; align-content: start; gap: var(--s3); }
.cr-frame-wrap { display: grid; place-items: center; height: 208px; }
.cr-frame { --rw: 9; --rh: 16; position: relative; overflow: hidden; width: min(100%, calc(208px * var(--rw) / var(--rh))); aspect-ratio: var(--rw) / var(--rh); border-radius: var(--r-sm); background: #000; box-shadow: 0 0 0 1px var(--line-strong);
  transition: width var(--t-med) var(--ease); }
.cr-frame[data-ratio='16:9'] { --rw: 16; --rh: 9; }
.cr-frame[data-ratio='1:1'] { --rw: 1; --rh: 1; }
.cr-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-frame-fb { position: absolute; inset: 0; display: grid; place-items: center; color: #8a8a8a; }
.cr-error { margin: var(--s5) 0 0; padding: var(--s3) var(--s4); border: 1px solid var(--danger); border-radius: var(--r-md); color: var(--danger); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.cr-error[hidden] { display: none; }
#cr-credit-note { margin-top: var(--s4); }

/* ---- the footer: Back / Continue (Generate with its price on the last step) ---- */
.cr-nav { position: sticky; inset-block-end: 0; z-index: 4; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); margin-top: auto; padding: var(--s4) 0 max(var(--s5), env(safe-area-inset-bottom, 0px)); background: var(--panel); border-top: 1px solid var(--line); }
.cr-note { flex: 1 1 160px; min-width: 0; margin: 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; text-wrap: pretty; }
.cr-note.warn { color: var(--danger); }
.cr-note.nudge { animation: cr-nudge 360ms var(--ease-in-out); }
@keyframes cr-nudge { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.cr-nav .btn-primary { margin-inline-start: auto; min-height: 48px; padding-inline: var(--s6); font-size: var(--fs-lg); }
.cr-price { font-weight: 500; opacity: 0.8; }
.cr-dot { opacity: 0.5; }

/* ---- the change-request box in a project: the style chip -------------------- */
.follow-style { display: inline-flex; }                       /* in the bottom bar, next to the add and mic buttons */
.follow-style[hidden] { display: none; }
.composer:not(.compact) .follow-style { display: none; }
.composer.has-chip .ref[data-state="empty"] { display: none; }        /* the chip's picker takes a reference video of your own: the box above the text is only shown while one is being added */
/* phones: the add and mic buttons, the style chip, the format pill and the send button share ONE row: the chip keeps its words (shortened with an ellipsis), the chevrons go, the gaps shrink */
@media (max-width: 480px) {
  .composer.compact .bar { gap: var(--s1); }
  .composer.compact .follow-style { min-width: 0; flex: 0 1 auto; }
  .composer.compact .tpl-pill { min-width: 0; gap: var(--s1); padding-inline: var(--s3); }
  .composer.compact .tpl-pill .v { max-width: 13ch; }
  .composer.compact .tpl-pill .chev, .composer.compact .ar-pill .chev, .composer.compact #dur-pill .chev { display: none; }
  /* (the Length pill no longer forces a second row: the style chip gives up its width first; the row wraps only when nothing else can shrink, css/polish.css) */
  .composer.compact .ar-pill { gap: var(--s1); padding-inline: var(--s3); }
}
.tpl-pill .v { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- responsive ------------------------------------------------------------- */
@media (max-width: 760px) {
  .cr-brief { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 640px) {
  .cr { padding: 0 var(--s4); }
  .cr-top { padding-top: var(--s4); margin-bottom: var(--s6); }
  .cr-drop { min-height: 260px; padding: var(--s8) var(--s4); gap: var(--s5); }
  .cr-plus { width: 68px; height: 68px; }
  .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .cr-srow { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding: var(--s4); }
  .cr-k { grid-column: 1 / -1; }
  .cr-custom { padding: var(--s4); }
  .cr-nav .btn-primary { flex: 1 1 auto; white-space: normal; text-align: center; line-height: 1.25; padding-block: var(--s2); padding-inline: var(--s4); }
  .cr-note { order: -1; flex-basis: 100%; }
  .admin-view { padding: var(--s4) var(--s4) var(--s10); }
}
@media (max-width: 480px) {
  .cr-pi[data-state='todo'] .cr-pi-t, .cr-pi[data-state='done'] .cr-pi-t { display: none; }      /* phones: only the current step is named */
  .cr-drop[data-has='1'] { padding-inline: var(--s4); }
  .cr-seg-opt { padding-inline: 4px; }
}
@media (forced-colors: active) {
  .cr-seg-opt[aria-checked='true'], .cr-fb-card[aria-checked='true'] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .cr-pi[data-state='current'] .cr-pi-bar::after, .cr-pi[data-state='done'] .cr-pi-bar::after { background: Highlight; }
}

/* clips that failed to upload, said on the steps after the first (batch 3) */
.cr-failed { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); }
.cr-failed[hidden] { display: none; }