/* css/clips-studio.css — Clips Studio: one Clip in six steps (js/clips/clips-studio.js). .cst-* ONLY.
 *
 * ⚠️ THE SPEC IS THE APPROVED ARTEFACT, docs/projects/content-engine/studio-artefact/*.dc.html
 * (Alex, 18 Oct 2026). Every class here is the artefact's own class with a cst- prefix and the same
 * values, so a screen can be checked against its artefact file line by line: .bar, .steps/.st,
 * .card, .eyebrow, .h1, .lede, .fld/.lbl/.from/.box/.speak, .chip, .btn, .ghost, .sm, .lane, .fn,
 * .vc/.thumb/.tag/.pill/.k/.yours/.a, .sheet/.part/.pl/.say/.ed, .cam/.prompter/.rec, .sub, .vid,
 * .tl, .li, .opt/.ph/.cap, .row/.tog, .wk/.dy/.ev.
 *
 * The stepper is the courses wizard's look (css/course-wizard.css), drawn the artefact's way.
 * Colours: the app's tokens (css/design-tokens.css) where the artefact's value is the same family
 * (surfaces, borders, text, good, warn). The artefact's indigo (#4338CA) is not a token the app
 * has (--accent is #6a4cf1), so it is named ONCE here, as --cst-ind, with its soft tints, rather
 * than repeated through the file.
 */
.clstudio {
  --cst-ind: #4338CA; --cst-ind-d: #3127a8; --cst-ind-soft: #EEEDFD; --cst-ind-ring: #E4E3FB; --cst-ind-bg: #F7F6FF;
  --cst-ink: var(--text, #1e1b2e); --cst-ink-2: #5d5566; --cst-ink-3: #6b6475; --cst-ink-4: #a39eab;
  --cst-line: #e3ded4; --cst-line-2: #ece7dd; --cst-line-3: #f0ece4; --cst-paper: #FCFBF8; --cst-ground: #F5F4F0;
  --cst-good: #1c6b43; --cst-good-bg: #EEF7F1; --cst-good-pill: #E8F5EE; --cst-warn-bg: #FFF6E8; --cst-warn-ink: #5c3a0a;
  --cst-shadow: 0 1px 2px rgba(30,27,46,.04), 0 8px 28px rgba(30,27,46,.06);
  display: block; font-family: "Bricolage Grotesque", system-ui, sans-serif; color: var(--cst-ink);
  font-size: 16px; line-height: 1.5;
}
.clstudio *, .clstudio *::before, .clstudio *::after { box-sizing: border-box; }
.clstudio p { margin: 0; }
.clstudio a { color: var(--cst-ind); }
.clstudio a:hover { color: var(--cst-ind-d); }
.clstudio button { cursor: pointer; font-family: inherit; }
.clstudio button:disabled { cursor: default; }
.clstudio :focus-visible { outline: 3px solid var(--cst-ind-ring); outline-offset: 2px; }
.clstudio .cst-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clstudio .cst-app { padding: 8px 0 72px; }

/* ── The top bar: crumb · ✓ Saved · Back to Clips ─────────────────────────── */
.clstudio .cst-bar, .clstudio .cst-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.clstudio .cst-crumb, .clstudio .cst-eyebrow, .clstudio .cst-k {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cst-ink-3); font-weight: 400;
}
.clstudio [tabindex="-1"]:focus { outline: none; }
.clstudio .cst-crumb { min-width: 0; overflow-wrap: anywhere; }
.clstudio .cst-crumb b { color: var(--cst-ink); font-weight: 500; }
.clstudio .cst-crumb-ph { display: none; }
.clstudio .cst-saved, .clstudio .cst-left { margin-left: auto; font-size: 13px; color: var(--cst-ink-3); }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.clstudio .cst-h1 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 38px; line-height: 1.12; margin: 8px 0 10px; letter-spacing: -.01em; }
.clstudio .cst-h1-home { font-size: 40px; line-height: 1.1; margin: 8px 0; }
.clstudio .cst-h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 22px; margin: 0; }
.clstudio .cst-lede { font-size: 16px; color: var(--cst-ink-2); line-height: 1.55; margin: 0; }
.clstudio .cst-next { font-size: 13.5px; color: var(--cst-ink-3); }
.clstudio .cst-quiet { font-size: 14px; color: var(--cst-ink-2); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.clstudio .cst-btn {
  display: inline-block; border: 0; border-radius: 999px; background: var(--cst-ind); color: #fff;
  font: 600 17px "Bricolage Grotesque", sans-serif; padding: 16px 30px; text-align: center;
  box-shadow: 0 6px 18px rgba(67,56,202,.25); text-decoration: none;
}
.clstudio .cst-btn:hover { color: #fff; background: var(--cst-ind-d); }
.clstudio .cst-btn-block { display: block; width: 100%; padding: 17px; }
.clstudio .cst-btn-home { font-size: 16px; padding: 15px 26px; }
.clstudio .cst-btn.is-off, .clstudio .cst-btn:disabled { background: #c9c5e8; box-shadow: none; }
.clstudio .cst-ghost {
  display: inline-block; border: 1px solid var(--cst-line); background: #fff; border-radius: 999px;
  padding: 10px 18px; font: 600 14px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); text-decoration: none; text-align: center;
}
.clstudio .cst-ghost:hover { border-color: var(--cst-ind); color: var(--cst-ind); }
.clstudio .cst-ghost.is-ind { border-color: var(--cst-ind); color: var(--cst-ind); }
.clstudio .cst-ghost:disabled { opacity: .55; border-color: var(--cst-line); color: var(--cst-ink-3); }
.clstudio .cst-ghost.is-ind:disabled { border-color: var(--cst-ind); color: var(--cst-ind); }
.clstudio .cst-sm {
  border: 1px solid var(--cst-line); background: #fff; border-radius: 999px; padding: 8px 14px;
  font: 600 14px "Bricolage Grotesque", sans-serif; color: var(--cst-ink);
}
.clstudio .cst-sm.is-p { background: var(--cst-ind); border-color: var(--cst-ind); color: #fff; }
.clstudio .cst-sm-s { padding: 7px 12px; font-size: 13px; }
.clstudio .cst-link { border: 0; background: none; padding: 0; font: 600 14px "Bricolage Grotesque", sans-serif; color: var(--cst-ind); text-decoration: underline; text-underline-offset: 3px; }
.clstudio .cst-link-plain { text-decoration: none; }

/* ── The stepper (course-wizard look, the artefact's .steps) ──────────────── */
.clstudio .cst-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1100px; margin: 26px auto 0; padding: 0; list-style: none; }
.clstudio .cst-st { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--cst-ink-4); position: relative; text-align: center; }
.clstudio .cst-st .cst-ln { position: absolute; top: 15px; left: -50%; right: 50%; height: 2px; background: var(--cst-line); }
.clstudio .cst-st .cst-d {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--cst-line); background: var(--cst-ground);
  display: flex; align-items: center; justify-content: center; font: 500 12px "JetBrains Mono", monospace;
}
.clstudio .cst-st.is-done { color: var(--cst-ink); }
.clstudio .cst-st.is-done .cst-d { background: var(--cst-ind); border-color: var(--cst-ind); color: #fff; }
.clstudio .cst-st.is-done .cst-ln, .clstudio .cst-st.is-now .cst-ln { background: var(--cst-ind); }
.clstudio .cst-st.is-now { color: var(--cst-ink); font-weight: 700; }
.clstudio .cst-st.is-now .cst-d { background: var(--cst-ind); border-color: var(--cst-ind); color: #fff; box-shadow: 0 0 0 5px var(--cst-ind-ring); }
.clstudio .cst-st svg { width: 14px; height: 14px; }
/* A done step is a link (UX review item 02): the same circle and name, pressable, its name underlined as the
   artefact's sketch draws it. The step this Clip has reached, while another is open, wears an outlined circle. */
.clstudio .cst-st-go { display: flex; flex-direction: column; align-items: center; gap: inherit; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; border-radius: 10px; min-height: 44px; }
.clstudio .cst-st.is-link .cst-st-n { text-decoration: underline; text-underline-offset: 3px; }
.clstudio .cst-st-go:hover .cst-st-n { color: var(--cst-ind); }
.clstudio .cst-st-go:focus-visible { outline: 2px solid var(--cst-ind); outline-offset: 4px; }
.clstudio .cst-st.is-at { color: var(--cst-ink); }
.clstudio .cst-st.is-at .cst-d { border-color: var(--cst-ind); color: var(--cst-ind); }
.clstudio .cst-st.is-at .cst-ln { background: var(--cst-ind); }

/* ── Cards and panels ─────────────────────────────────────────────────────── */
.clstudio .cst-plate { background: #fff; border-radius: 20px; box-shadow: var(--cst-shadow); padding: 40px; max-width: 760px; margin: 36px auto 0; display: flex; flex-direction: column; gap: 24px; }
.clstudio .cst-plate-wide { max-width: 900px; gap: 26px; }
.clstudio .cst-panel { background: #fff; border-radius: 18px; box-shadow: var(--cst-shadow); }
.clstudio .cst-wrap { max-width: 1100px; margin: 36px auto 0; }
.clstudio .cst-wrap-s { margin-top: 24px; }

/* ── Home ─────────────────────────────────────────────────────────────────── */
.clstudio .cst-hero { max-width: 1100px; margin: 28px auto 0; display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.clstudio .cst-hero > div { flex: 1 1 480px; min-width: 0; }
.clstudio .cst-how { max-width: 1100px; margin: 24px auto 0; padding: 20px 24px; }
.clstudio .cst-how .cst-eyebrow { margin-bottom: 14px; }
.clstudio .cst-how-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.clstudio .cst-how-grid li { display: flex; flex-direction: column; gap: 4px; }
.clstudio .cst-how-grid b { font-size: 15px; }
.clstudio .cst-how-grid span { font-size: 13.5px; color: var(--cst-ink-2); line-height: 1.4; }
.clstudio .cst-list { max-width: 1100px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 14px; }
.clstudio .cst-proj { padding: 20px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.clstudio .cst-proj-tx { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.clstudio .cst-proj-t { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.clstudio .cst-mini { display: flex; gap: 4px; align-items: center; }
.clstudio .cst-mini i { width: 22px; height: 5px; border-radius: 3px; background: var(--cst-line); }
.clstudio .cst-mini i.on { background: var(--cst-ind); }
.clstudio .cst-mini b { font-size: 13px; margin-left: 8px; }
.clstudio .cst-thumb {
  background: linear-gradient(160deg, #2b2740, #4a3f6b) center / cover no-repeat; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: #fff; position: relative; overflow: hidden;
}
.clstudio .cst-thumb > svg { width: 18px; height: 18px; fill: #fff; }
.clstudio .cst-thumb-proj { width: 54px; height: 96px; flex: none; }
.clstudio .cst-saved-h { max-width: 1100px; margin: 40px auto 0; }
.clstudio .cst-saved-h > div:first-child { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.clstudio .cst-saved-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.clstudio .cst-sv { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.clstudio .cst-sv .cst-thumb { height: 150px; }
.clstudio .cst-sv .cst-thumb > svg { width: 22px; height: 22px; }
.clstudio .cst-sv-who { font-size: 13px; color: var(--cst-ink-3); display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.clstudio .cst-sv-t { font-size: 14px; line-height: 1.4; }
.clstudio .cst-pill { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: var(--cst-good-pill); color: var(--cst-good); }
.clstudio .cst-skipped { max-width: 1100px; margin: 28px auto 0; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border: 1px dashed #d9d3c7; border-radius: 14px; flex-wrap: wrap; }
.clstudio .cst-skipped svg { width: 18px; height: 18px; flex: none; }
.clstudio .cst-skipped > div { font-size: 14px; color: var(--cst-ink-2); flex: 1 1 300px; }
.clstudio .cst-empty { padding: 22px 24px; font-size: 15px; color: var(--cst-ink-2); }

/* ── Idea ─────────────────────────────────────────────────────────────────── */
.clstudio .cst-fld { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.clstudio .cst-label { font-weight: 700; font-size: 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0; }
.clstudio .cst-from { font-size: 12px; color: var(--cst-ink-3); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.clstudio .cst-from svg { width: 12px; height: 12px; }
.clstudio .cst-box { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--cst-line); border-radius: 14px; padding: 12px 12px 12px 16px; background: var(--cst-paper); }
.clstudio .cst-box:focus-within { border-color: var(--cst-ind); }
/* Join my program, the lead choice (Alex, 30 Oct 2026: "the main call to action"). */
.clstudio .cst-chip-lead { border-color: var(--cst-ind); font-weight: 700; }
.clstudio .cst-rec { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--cst-ind); color: #fff; font: 600 12px/1.6 "Bricolage Grotesque", sans-serif; vertical-align: middle; }
.clstudio .cst-rec-line { margin: 8px 0 0; font: 400 15px/1.45 "Bricolage Grotesque", sans-serif; color: var(--cst-ink); }
.clstudio .cst-rec-make { font-weight: 700; color: var(--cst-ind); text-decoration: underline; }
.clstudio .cst-rec-note { color: #6b6475; }
/* "Which program?" under Join my program: the same box as the answers above it. */
.clstudio .cst-box select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 17px/1.45 "Bricolage Grotesque", sans-serif; color: inherit; padding: 2px 0; }
.clstudio .cst-box textarea {
  flex: 1; min-width: 0; border: 0; background: transparent; font: 400 16px/1.5 "Bricolage Grotesque", sans-serif;
  color: var(--cst-ink); resize: none; min-height: 50px; outline: none; padding: 0; field-sizing: content;
}
.clstudio .cst-mic { flex: none; display: inline-flex; }
.clstudio .cst-note { font-size: 14px; color: #a33a2f; }
.clstudio .cst-speak, .clstudio .cst-mic .vi-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cst-line); background: #fff;
  border-radius: 999px; padding: 8px 14px; font: 600 14px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); min-height: 0;
}
/* Speak (voice-input.js) sits inside the box, the artefact's pill; its status and its Undo stack under it. */
.clstudio .cst-mic { max-width: 46%; }
.clstudio .cst-mic .vi-row { margin: 0; flex-direction: column; align-items: flex-end; gap: 4px; flex-wrap: nowrap; }
.clstudio .cst-mic .vi-row [hidden] { display: none; }
.clstudio .cst-mic .vi-status { text-align: right; }
.clstudio .cst-mic .vi-status:empty { display: none; }
.clstudio .cst-mic .vi-btn:not([data-state="rec"]) .vi-dot { display: none; }
.clstudio .cst-mic .vi-btn[data-state="rec"] { background: var(--cst-ind); border-color: var(--cst-ind); color: #fff; }
.clstudio .cst-mic .vi-undo, .clstudio .cst-mic .vi-recover, .clstudio .cst-mic .vi-drop { color: var(--cst-ind); font-size: 13px; }
.clstudio .cst-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.clstudio .cst-chip {
  border: 1px solid var(--cst-line); background: #fff; border-radius: 999px; padding: 10px 16px;
  font: 600 14px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); display: inline-flex; align-items: center; gap: 6px;
}
.clstudio .cst-chip[aria-pressed="true"] { border-color: var(--cst-ind); background: var(--cst-ind-soft); color: var(--cst-ind-d); }
.clstudio .cst-go { display: flex; flex-direction: column; gap: 10px; }
.clstudio .cst-go .cst-next { text-align: center; }

/* ── Check ────────────────────────────────────────────────────────────────── */
.clstudio .cst-said { font-family: Fraunces, Georgia, serif; font-size: 21px; line-height: 1.45; padding: 22px 24px; background: var(--cst-paper); border: 1px solid var(--cst-line-2); border-radius: 16px; }
.clstudio .cst-verdict { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 16px; background: var(--cst-good-bg); }
.clstudio .cst-verdict b { display: flex; align-items: center; gap: 10px; font-size: 17px; color: #175c39; }
.clstudio .cst-verdict b svg { width: 20px; height: 20px; }
.clstudio .cst-verdict span { font-size: 15px; line-height: 1.5; color: #24452f; }
.clstudio .cst-verdict.is-warn { background: var(--cst-warn-bg); }
.clstudio .cst-verdict.is-warn span { color: var(--cst-warn-ink); }
.clstudio .cst-tip { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 16px; background: var(--cst-warn-bg); }
.clstudio .cst-tip > div:first-child { font-size: 15px; line-height: 1.5; color: var(--cst-warn-ink); }
.clstudio .cst-tip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.clstudio .cst-look { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border: 1px solid var(--cst-line-2); border-radius: 16px; }
.clstudio .cst-look-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.clstudio .cst-look-row > div { flex: 1 1 320px; font-size: 15px; line-height: 1.5; }
.clstudio .cst-terms { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--cst-line-3); padding-top: 12px; }
.clstudio .cst-terms ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.clstudio .cst-terms li { font-size: 14px; background: var(--cst-paper); border: 1px solid var(--cst-line-2); border-radius: 999px; padding: 6px 12px; }
.clstudio .cst-nets { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.clstudio .cst-nets span { display: inline-flex; align-items: center; gap: 6px; }
.clstudio .cst-go-line { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--cst-ink-3); }

/* ── Network marks (App.NetworkMarks) ─────────────────────────────────────── */
.clstudio .cst-mk { width: 20px; height: 20px; flex: none; color: var(--cst-ink); }
.clstudio .cst-mk-l { width: 30px; height: 30px; }
.clstudio .cst-mk-s { width: 15px; height: 15px; }

/* ── Searching ────────────────────────────────────────────────────────────── */
.clstudio .cst-lanes { border-bottom: 1px solid var(--cst-line-3); }
.clstudio .cst-lane { display: grid; grid-template-columns: 140px minmax(0, 1fr) 150px; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--cst-line-3); }
.clstudio .cst-net { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.clstudio .cst-track { height: 8px; border-radius: 5px; background: var(--cst-line-3); overflow: hidden; }
.clstudio .cst-fill { height: 8px; border-radius: 5px; background: var(--cst-ind); transition: width .8s ease; }
.clstudio .cst-fill.is-working { width: 40%; background: linear-gradient(90deg, var(--cst-ind) 0%, #7d74e6 50%, var(--cst-ind) 100%); background-size: 200% 100%; animation: cst-sheen 1.6s linear infinite; }
@keyframes cst-sheen { from { background-position: 200% 0; } to { background-position: 0 0; } }
.clstudio .cst-what { font-size: 13.5px; color: var(--cst-ink-2); margin-top: 7px; overflow-wrap: anywhere; }
.clstudio .cst-state { font-size: 13px; font-weight: 600; text-align: right; color: var(--cst-ink-3); }
.clstudio .cst-state.is-done { color: var(--cst-good); }
.clstudio .cst-state.is-searching { color: var(--cst-ind); }
.clstudio .cst-state.is-failed { color: #a33a2f; }
.clstudio .cst-funnel { display: flex; gap: 10px; padding: 20px; border-radius: 16px; background: var(--cst-paper); border: 1px solid var(--cst-line-2); flex-wrap: wrap; margin: 0; list-style: none; }
.clstudio .cst-fn { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; text-align: center; }
.clstudio .cst-fn b { font-family: Fraunces, Georgia, serif; font-size: 30px; font-weight: 600; }
.clstudio .cst-fn span { font-size: 12.5px; color: var(--cst-ink-2); line-height: 1.3; }
.clstudio .cst-fn.is-now { color: var(--cst-ind); }
.clstudio .cst-arr { color: #c9c2b5; font-size: 20px; align-self: center; }
.clstudio .cst-found h2 { font-weight: 700; font-size: 15px; margin: 0 0 12px; font-family: inherit; }
.clstudio .cst-found-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.clstudio .cst-found-one { display: flex; gap: 12px; align-items: center; font-size: 13.5px; line-height: 1.35; min-width: 0; }
.clstudio .cst-found-one .cst-thumb { width: 44px; height: 78px; flex: none; border-radius: 10px; }
.clstudio .cst-up { color: var(--cst-good); font-weight: 600; }
/* The Searching screen's place in line, time, and "your videos will be in Clips" (item 5 of the Clips
   instruction of 20 Oct 2026; the line the artefact had, "We will email you", promised an email nobody sends). */
.clstudio .cst-waitbox { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.clstudio .cst-wait { font-size: 18px; font-weight: 600; color: var(--cst-ink); margin: 0; }
.clstudio .cst-wait.is-late { font-size: 15px; font-weight: 500; color: var(--cst-warn-ink); background: var(--cst-warn-bg); border-radius: 10px; padding: 10px 14px; }
.clstudio .cst-wait-leave { font-size: 14.5px; color: var(--cst-ink-2); margin: 0; }
.clstudio .cst-wait.is-late + .cst-wait-leave { margin-top: 6px; }
.clstudio .cst-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.clstudio .cst-foot > div:first-child { font-size: 14px; color: var(--cst-ink-2); flex: 1 1 300px; }

/* ── Results ──────────────────────────────────────────────────────────────── */
.clstudio .cst-grid3 { max-width: 1100px; margin: 26px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.clstudio .cst-vc { background: #fff; border-radius: 18px; box-shadow: var(--cst-shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; border: 2px solid transparent; min-width: 0; }
.clstudio .cst-vc.is-pick { border-color: var(--cst-ind); }
.clstudio .cst-vc.is-skipped { opacity: .6; }
.clstudio .cst-vc .cst-thumb { height: 230px; }
.clstudio .cst-play { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; }
.clstudio .cst-play svg { width: 18px; height: 18px; fill: var(--cst-ink); }
.clstudio .cst-tag { position: absolute; left: 10px; top: 10px; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.92); color: var(--cst-ink); border-radius: 999px; padding: 4px 9px; }
/* Inline flow, not flex: as flex, the run of text after the handle was ONE item and wrapped whole,
   so a narrow card opened its second line with "· Instagram". As text it wraps word by word. */
.clstudio .cst-meta { font-size: 13px; color: var(--cst-ink-3); display: block; line-height: 1.6; min-width: 0; }
.clstudio .cst-meta .cst-mk { display: inline-block; vertical-align: -3px; margin-right: 5px; }
.clstudio .cst-meta b { color: var(--cst-ink); overflow-wrap: anywhere; }
.clstudio .cst-k { font-size: 10px; letter-spacing: .12em; }
.clstudio .cst-their { font-size: 14.5px; line-height: 1.45; margin-top: 4px; }
.clstudio .cst-yours { background: var(--cst-ind-soft); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; color: #2a2470; }
.clstudio .cst-yours .cst-k { color: var(--cst-ind); }
.clstudio .cst-acts { display: flex; flex-direction: column; gap: 6px; }
.clstudio .cst-acts2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.clstudio .cst-a { border: 1px solid var(--cst-line); background: #fff; border-radius: 10px; padding: 10px 6px; font: 600 13px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); text-align: center; min-height: 40px; }
.clstudio .cst-a.is-on { background: var(--cst-ind); border-color: var(--cst-ind); color: #fff; }
.clstudio .cst-a.is-sv { background: var(--cst-warn-bg); border-color: #f1d9ad; color: #7a4a06; }
.clstudio .cst-a.is-no { background: #f3f1ec; color: var(--cst-ink-3); }
.clstudio .cst-more { max-width: 1100px; margin: 18px auto 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.clstudio .cst-more > div { font-size: 13.5px; color: var(--cst-ink-3); }
.clstudio .cst-dock { max-width: 1100px; margin: 28px auto 0; background: #fff; border-radius: 18px; box-shadow: 0 8px 28px rgba(30,27,46,.08); padding: 18px 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.clstudio .cst-dock > div { flex: 1 1 420px; font-size: 15px; line-height: 1.5; }

/* ── Script ───────────────────────────────────────────────────────────────── */
.clstudio .cst-two { max-width: 1100px; margin: 24px auto 0; display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.clstudio .cst-sheet { background: #fff; border-radius: 20px; box-shadow: var(--cst-shadow); padding: 34px 40px; display: flex; flex-direction: column; gap: 6px; flex: 999 1 560px; min-width: 0; }
.clstudio .cst-part { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 18px; padding: 18px 0; border-top: 1px solid var(--cst-line-3); align-items: start; }
.clstudio .cst-part:first-child { border-top: 0; }
.clstudio .cst-pl { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cst-ink-3); padding-top: 6px; }
.clstudio .cst-pl b { display: block; color: var(--cst-ind); font-weight: 500; margin-top: 4px; }
.clstudio .cst-say { font-family: Fraunces, Georgia, serif; font-size: 21px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.clstudio .cst-say b { font-weight: 700; }
.clstudio .cst-ed { border: 0; background: none; color: var(--cst-ink-3); font: 600 13px "Bricolage Grotesque", sans-serif; padding: 6px; }
.clstudio .cst-edit { display: flex; flex-direction: column; gap: 10px; }
.clstudio .cst-edit .cst-box textarea { font: 400 19px/1.5 Fraunces, Georgia, serif; min-height: 90px; }
.clstudio .cst-edit-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.clstudio .cst-sheet-tip { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--cst-warn-bg); margin-top: 6px; flex-wrap: wrap; }
.clstudio .cst-sheet-tip > div { font-size: 14px; color: var(--cst-warn-ink); flex: 1 1 320px; }
.clstudio .cst-sheet.is-working .cst-say { opacity: .45; }
.clstudio .cst-side { display: flex; flex-direction: column; gap: 16px; flex: 1 1 300px; min-width: 0; }
.clstudio .cst-sbox { background: #fff; border-radius: 18px; box-shadow: var(--cst-shadow); padding: 18px; }
.clstudio .cst-based { display: flex; gap: 12px; align-items: center; font-size: 13.5px; line-height: 1.4; }
.clstudio .cst-based .cst-thumb { width: 44px; height: 78px; border-radius: 10px; flex: none; }
.clstudio .cst-based .cst-eyebrow { font-size: 10px; }
.clstudio .cst-maya-h { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.clstudio .cst-maya-m { width: 24px; height: 24px; flex: none; }
.clstudio .cst-chat { min-height: 60px; }
.clstudio .cst-chat .cc-wrap { color: var(--cst-ink); font-family: "Bricolage Grotesque", system-ui, sans-serif; height: auto; }
.clstudio .cst-chat .cc-messages { padding: 4px 0; overflow: visible; flex: none; }
.clstudio .cst-chat .cc-msg--user { max-width: 85%; }
.clstudio .cst-chat .cc-msg--ai { max-width: 92%; }
.clstudio .cst-chat .cc-bubble { font-size: 14.5px; line-height: 1.45; padding: 10px 12px; }
.clstudio .cst-chat .cc-bubble--user { background: var(--cst-ind-soft); color: var(--cst-ink); }
.clstudio .cst-chat .cc-bubble--ai { background: #f6f4ef; color: var(--cst-ink); }
.clstudio .cst-chat .cc-input-row { border: 1px solid var(--cst-line); border-radius: 22px; padding: 6px 6px 6px 14px; margin-top: 8px; align-items: center; }
.clstudio .cst-chat .cc-textarea { background: transparent; border: 0; color: var(--cst-ink); font: 400 15px "Bricolage Grotesque", sans-serif; padding: 6px 0; min-height: 34px; }
.clstudio .cst-chat .cc-textarea::placeholder { color: var(--cst-ink-3); }
.clstudio .cst-chat .cc-action-btn--send { background: var(--cst-ind); color: #fff; }
.clstudio .cst-chat .cc-voice-row { padding: 8px 0 0; }
.clstudio .cst-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.clstudio .cst-quick button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cst-line); background: #fff; border-radius: 999px; padding: 8px 12px; font: 600 13px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); }
.clstudio .cst-end { max-width: 1100px; margin: 24px auto 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.clstudio .cst-end .cst-next { margin-left: auto; }
.clstudio .cst-writing { display: flex; flex-direction: column; gap: 14px; }
.clstudio .cst-skel { display: block; height: 18px; border-radius: 8px; background: linear-gradient(90deg, #f1eee5, #f8f6f0, #f1eee5); background-size: 200% 100%; animation: cst-sheen 1.6s linear infinite; }

/* ── Film ─────────────────────────────────────────────────────────────────── */
.clstudio .cst-stage { max-width: 1100px; margin: 32px auto 0; display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.clstudio .cst-cam { width: 340px; max-width: 100%; aspect-ratio: 340 / 604; border-radius: 26px; background: linear-gradient(170deg, #3a3550, #1b1828); position: relative; overflow: hidden; flex: none; box-shadow: 0 18px 40px rgba(30,27,46,.25); border: 0; padding: 0; text-align: left; }
.clstudio .cst-prompter { position: absolute; left: 16px; right: 16px; top: 16px; background: rgba(0,0,0,.55); border-radius: 14px; padding: 14px 16px; color: #fff; font: 600 19px/1.45 "Bricolage Grotesque", sans-serif; }
.clstudio .cst-cam-of { position: absolute; left: 16px; bottom: 120px; color: #fff; font: 500 12px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.clstudio .cst-rec { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; }
.clstudio .cst-rec span { width: 52px; height: 52px; border-radius: 50%; background: #E5484D; }
.clstudio .cst-cam-say { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; color: #fff; font: 600 12px "Bricolage Grotesque", sans-serif; opacity: .85; }
.clstudio .cst-col { flex: 1 1 400px; min-width: 0; max-width: 520px; display: flex; flex-direction: column; gap: 14px; }
.clstudio .cst-col-w { max-width: 540px; gap: 18px; flex-basis: 420px; }
.clstudio .cst-fp { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--cst-line-2); flex-wrap: wrap; }
.clstudio .cst-fp.is-now { border: 2px solid var(--cst-ind); background: var(--cst-ind-bg); }
.clstudio .cst-fp > div { flex: 1 1 140px; min-width: 0; }
.clstudio .cst-fp small { display: block; font-size: 13px; color: var(--cst-ink-3); }
.clstudio .cst-fp.is-now small { color: var(--cst-ind); }
.clstudio .cst-n { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 500 12px "JetBrains Mono", monospace; flex: none; border: 2px solid var(--cst-line); }
.clstudio .cst-n svg { width: 13px; height: 13px; }
.clstudio .cst-n.is-ok { background: #1c7a4a; border-color: #1c7a4a; color: #fff; }
.clstudio .cst-fp.is-now .cst-n { border-color: var(--cst-ind); color: var(--cst-ind); }
.clstudio .cst-tips { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--cst-ink-2); padding: 4px 2px; }
.clstudio .cst-entry-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

/* ── Edit: the cut, captions, the final video ─────────────────────────────── */
.clstudio .cst-sub { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.clstudio .cst-sub li { font-size: 13px; font-weight: 600; border-radius: 999px; padding: 7px 14px; background: #fff; border: 1px solid var(--cst-line); color: var(--cst-ink-3); }
.clstudio .cst-sub li.is-on { background: var(--cst-ink); border-color: var(--cst-ink); color: #fff; }
.clstudio .cst-sub li.is-ok { color: var(--cst-good); border-color: #bfe3cf; background: var(--cst-good-bg); }
.clstudio .cst-vid { width: 320px; max-width: 100%; aspect-ratio: 320 / 568; border-radius: 24px; background: linear-gradient(170deg, #3a3550, #1b1828); position: relative; flex: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px rgba(30,27,46,.25); overflow: hidden; }
.clstudio .cst-vid video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.clstudio .cst-vid .video-facade { position: absolute; inset: 0; border: 0; background: transparent center / cover no-repeat; display: flex; align-items: center; justify-content: center; width: 100%; }
.clstudio .cst-vid .video-player { position: absolute; inset: 0; }
.clstudio .cst-vid .cst-play { width: 64px; height: 64px; }
.clstudio .cst-vid .cst-play svg { width: 24px; height: 24px; }
.clstudio .cst-len { position: absolute; bottom: 16px; right: 18px; color: #fff; font: 500 12px "JetBrains Mono", monospace; }
.clstudio .cst-tl { display: flex; gap: 4px; height: 34px; }
.clstudio .cst-tl div { border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 600 12px "Bricolage Grotesque", sans-serif; color: #fff; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 4px; }
.clstudio .cst-tl .cst-tl-s { display: none; }
.clstudio .cst-did { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--cst-line-2); }
.clstudio .cst-li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.clstudio .cst-li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
/* The cut's "Anything to change?": the artefact's one-line box (Speak inside it), Maya's line back. */
.clstudio .cst-inp { align-items: center; padding: 8px 8px 8px 14px; border-radius: 14px; background: #fff; border-color: var(--cst-line); }
.clstudio .cst-inp input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 400 15px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); padding: 0; }
/* A box that grows with what is said or typed (voice-input.js grow; Alex, 29 Oct 2026: "they need to be elastic"):
   one line, like the input above, then taller with the text up to about six lines, then it scrolls. */
.clstudio .cst-inp textarea[data-grow] { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 400 15px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); padding: 2px 0; resize: none; display: block; box-sizing: border-box; margin: 0; line-height: 1.45; max-height: 9.5em; overflow-y: hidden; }
.clstudio .cst-inp .cst-mic .vi-btn { padding: 8px 12px; font-size: 13px; }
.clstudio .cst-inp .cst-send { flex: none; }
.clstudio .cst-inp .cst-send[hidden] { display: none; }
.clstudio .cst-maya-says { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--cst-ink-2); }
.clstudio .cst-maya-says .cst-maya-m { margin-top: 1px; }
.clstudio .cst-maya-says.is-busy { color: var(--cst-ink-3); }
.clstudio .cst-chip.is-hint { border-color: var(--cst-ind); color: var(--cst-ind-d); }
.clstudio .cst-work { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 16px; background: #fff; border: 1px solid var(--cst-line-2); }
.clstudio .cst-meter { height: 8px; border-radius: 5px; background: var(--cst-line-3); overflow: hidden; }
.clstudio .cst-meter i { display: block; height: 8px; border-radius: 5px; background: var(--cst-ind); transition: width .8s ease; }
.clstudio .cst-meter.is-working i { background: linear-gradient(90deg, var(--cst-ind) 0%, #7d74e6 50%, var(--cst-ind) 100%); background-size: 200% 100%; animation: cst-sheen 1.6s linear infinite; }
.clstudio .cst-meter.is-late i { background: #b9b4c4; }
.clstudio .cst-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.clstudio .cst-opt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; background: #fff; border: 2px solid var(--cst-line-2); min-width: 0; font-family: inherit; color: inherit; }
.clstudio .cst-opt[aria-pressed="true"] { border-color: var(--cst-ind); background: var(--cst-ind-bg); }
.clstudio .cst-opt small { font-size: 13px; color: var(--cst-ink-3); }
.clstudio .cst-opt small.is-pick { color: var(--cst-ind); font-weight: 600; }
.clstudio .cst-ph { width: 200px; max-width: 100%; aspect-ratio: 200 / 356; border-radius: 18px; background: linear-gradient(170deg, #3a3550, #1b1828) center / cover no-repeat; position: relative; overflow: hidden; }
.clstudio .cst-cap { position: absolute; left: 12px; right: 12px; bottom: 70px; text-align: center; }
.clstudio .cst-cap-clean { color: #fff; font: 600 17px "Bricolage Grotesque", sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.clstudio .cst-cap-bold { color: #fff; font: 800 22px/1.15 "Bricolage Grotesque", sans-serif; text-transform: uppercase; text-shadow: 0 2px 0 #000; }
.clstudio .cst-cap-bold em { font-style: normal; color: #FFD43B; }
.clstudio .cst-cap-boxed span { background: #fff; color: var(--cst-ink); font: 700 16px "Bricolage Grotesque", sans-serif; padding: 4px 8px; border-radius: 6px; line-height: 1.9; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.clstudio .cst-entrys { display: flex; flex-direction: column; gap: 10px; }
.clstudio .cst-entry { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--cst-line-2); flex-wrap: wrap; }
.clstudio .cst-entry > div:first-child { flex: 1 1 300px; min-width: 0; }
.clstudio .cst-entry small { display: block; font-size: 13.5px; color: var(--cst-ink-3); }
.clstudio .cst-tog { width: 44px; height: 26px; border-radius: 999px; background: #cfcad9; position: relative; flex: none; border: 0; padding: 0; }
.clstudio .cst-tog span { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.clstudio .cst-tog[aria-checked="true"] { background: var(--cst-ind); }
.clstudio .cst-tog[aria-checked="true"] span { left: 21px; }
/* Cover picture: the artefact's three small frames, the chosen one outlined (buttons, one choice). */
.clstudio .cst-covers { display: flex; gap: 6px; flex: none; }
.clstudio .cst-cover { width: 34px; height: 60px; border-radius: 6px; background: #2e2a42 center / cover no-repeat; border: 0; padding: 0; flex: none; cursor: pointer; }
.clstudio .cst-cover:nth-child(1) { background-color: #3a3550; }
.clstudio .cst-cover:nth-child(3) { background-color: #25223a; }
.clstudio .cst-cover[aria-checked="true"] { outline: 2px solid var(--cst-ind); outline-offset: 0; }
.clstudio .cst-cover:focus-visible { outline: 3px solid var(--cst-ind); outline-offset: 2px; }
.clstudio .cst-entry-ed > .cst-edit { flex: 1 1 100%; }
.clstudio .cst-entry-ed small { display: block; font-size: 13px; color: var(--cst-ink-3); }
.clstudio .cst-entry-ed .cst-box textarea { font: 600 17px/1.45 "Bricolage Grotesque", sans-serif; min-height: 56px; }
.clstudio .cst-capscr { max-width: 1100px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 20px; }
/* The artefact's last row: "Back to the cut" at the left, the Next line and the button at the right. */
.clstudio .cst-capscr .cst-end { margin: 0; width: 100%; max-width: none; }
/* The cut's two chips sit under the box at the artefact's Speak size. */
.clstudio .cst-chips-s .cst-chip { padding: 8px 12px; font-size: 13px; }

/* ── Post: the artefact's Post board. The video on the left; on the right the one post sheet's
   studio layout (post-sheet.js section 11 draws .cst-place/.cst-when/… into the step), the week ── */
.clstudio .cst-post { max-width: 1100px; margin: 32px auto 0; display: flex; gap: 44px; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.clstudio .cst-post-vid { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.clstudio .cst-post-vid .cst-vid { width: 250px; }
.clstudio .cst-post-vid .cst-next { font-size: 13px; }
.clstudio .cst-link-dl { font-size: 13px; font-weight: 400; }
.clstudio .cst-post-col { flex: 1 1 440px; min-width: 0; max-width: 600px; display: flex; flex-direction: column; gap: 18px; }
.clstudio .cst-post-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.clstudio .cst-places { display: flex; flex-direction: column; gap: 8px; }
.clstudio .cst-place { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--cst-line-2); flex-wrap: wrap; min-width: 0; }
.clstudio .cst-tick { width: 22px; height: 22px; border-radius: 6px; flex: none; padding: 0; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--cst-line); }
.clstudio .cst-tick[aria-checked="true"] { background: var(--cst-ind); border-color: var(--cst-ind); }
.clstudio .cst-tick svg { width: 13px; height: 13px; }
.clstudio span.cst-tick { background: var(--cst-line-3); }
.clstudio .cst-pmk { width: 32px; height: 32px; flex: none; color: var(--cst-ink); }
.clstudio .cst-place-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clstudio .cst-place-tx b { font-weight: 700; }
.clstudio .cst-place-tx span { font-size: 13px; color: var(--cst-ink-3); overflow-wrap: anywhere; }
.clstudio .cst-place-st { border: 0; background: none; padding: 0; font: 600 13px "Bricolage Grotesque", sans-serif; color: var(--cst-ind); }
.clstudio .cst-place-st.is-ok { color: var(--cst-good); }
.clstudio span.cst-place-st { color: var(--cst-ink-3); font-weight: 400; }
.clstudio .cst-words { display: flex; flex-direction: column; gap: 8px; }
.clstudio .cst-words .cst-link { font-size: 13.5px; }
.clstudio .cst-words-h { font-weight: 700; }
.clstudio .cst-cap-in { width: 100%; border: 1px solid var(--cst-line); border-radius: 14px; padding: 12px 14px; font: 400 15px/1.5 "Bricolage Grotesque", sans-serif; color: var(--cst-ink); min-height: 70px; resize: vertical; background: #fff; }
.clstudio .cst-cap-in:focus { outline: none; border-color: var(--cst-ind); }
.clstudio .cst-vers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.clstudio .cst-ver { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--cst-line-2); }
.clstudio .cst-ver .cst-pmk { width: 24px; height: 24px; }
.clstudio .cst-ver .cst-place-tx span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clstudio .cst-when-sec { display: flex; flex-direction: column; gap: 10px; }
.clstudio .cst-whens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.clstudio .cst-when { border: 1px solid var(--cst-line); background: #fff; border-radius: 14px; padding: 12px 16px; font: 600 14px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); text-align: left; display: flex; flex-direction: column; gap: 2px; }
.clstudio .cst-when.is-on { border: 2px solid var(--cst-ind); background: var(--cst-ind-bg); padding: 11px 15px; }
.clstudio .cst-when span { font-weight: 400; font-size: 12.5px; color: var(--cst-ink-3); }
.clstudio .cst-pick { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.clstudio .cst-pick[hidden] { display: none; }
.clstudio .cst-pick input { border: 1px solid var(--cst-line); border-radius: 12px; padding: 10px 12px; font: 400 15px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); background: #fff; max-width: 280px; }
.clstudio .cst-post-foot { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.clstudio .cst-post-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.clstudio .cst-why { font-size: 13.5px; color: var(--cst-ink-2); }
.clstudio .cst-tt-agree { font-size: 13px; line-height: 1.45; color: var(--cst-ink-2); }
.clstudio .cst-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.clstudio .cst-dy { border-radius: 10px; background: #fff; border: 1px solid var(--cst-line-2); padding: 8px; min-height: 58px; font-size: 12px; color: var(--cst-ink-3); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.clstudio .cst-dy.is-this { border: 2px solid var(--cst-ind); padding: 7px; }
.clstudio .cst-ev { border-radius: 6px; padding: 3px 5px; font-size: 11px; font-weight: 600; color: #fff; background: #8a83e8; overflow: hidden; text-overflow: ellipsis; }
.clstudio .cst-ev.is-this { background: var(--cst-ind); }
.clstudio .cst-done { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 16px; background: var(--cst-good-bg); }
.clstudio .cst-done b { font-size: 17px; color: #175c39; }
/* The Build Along buttons on a posted Clip (Clips UX review item 11): share with partners, see the leaderboard. */
.clstudio .cst-ba { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(23, 92, 57, .15); }
.clstudio .cst-ba a.cst-ghost { text-decoration: none; display: inline-flex; align-items: center; }
.clstudio .cst-ba-done { font-weight: 600; font-size: 14px; color: #175c39; }
.clstudio .cst-ba-words { flex: 1 0 100%; margin: 0; font-size: 14px; line-height: 1.45; color: var(--cst-ink-2); overflow-wrap: anywhere; }
.clstudio .cst-ba-words span { font-weight: 600; color: var(--cst-ink); }
.clstudio .cst-ba-note { flex: 1 0 100%; font-size: 14px; line-height: 1.45; color: var(--cst-ink-2); }

/* ── Problems ─────────────────────────────────────────────────────────────── */
.clstudio .cst-problem { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 16px; background: var(--cst-warn-bg); color: var(--cst-warn-ink); }

/* ── Phone width (390px): one column, the artefact's 16px gutter ──────────── */
@media (max-width: 760px) {
  .clstudio .cst-app { padding: 4px 0 56px; }
  .clstudio .cst-plate { padding: 24px 18px; margin-top: 24px; border-radius: 18px; }
  .clstudio .cst-h1 { font-size: 30px; }
  .clstudio .cst-h1-home { font-size: 32px; }
  .clstudio .cst-steps { margin-top: 18px; }
  .clstudio .cst-st { font-size: 11px; gap: 6px; }
  .clstudio .cst-st .cst-d { width: 26px; height: 26px; }
  .clstudio .cst-st .cst-ln { top: 13px; }
  .clstudio .cst-how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clstudio .cst-saved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clstudio .cst-grid3, .clstudio .cst-found-grid, .clstudio .cst-opts { grid-template-columns: minmax(0, 1fr); }
  .clstudio .cst-opt { flex-direction: row; justify-content: flex-start; text-align: left; }
  .clstudio .cst-ph { width: 92px; flex: none; }
  .clstudio .cst-ph .cst-cap { bottom: 22px; left: 6px; right: 6px; }
  .clstudio .cst-ph .cst-cap-bold { font-size: 12px; }
  .clstudio .cst-ph .cst-cap-clean, .clstudio .cst-ph .cst-cap-boxed span { font-size: 10px; }
  .clstudio .cst-lane { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .clstudio .cst-lane > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .clstudio .cst-arr { display: none; }
  .clstudio .cst-fn { flex: 1 1 40%; }
  .clstudio .cst-sheet { padding: 22px 18px; }
  .clstudio .cst-part { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .clstudio .cst-part .cst-say, .clstudio .cst-part .cst-edit { grid-column: 1 / -1; grid-row: 2; }
  .clstudio .cst-say { font-size: 19px; }
  .clstudio .cst-cam { width: 100%; max-width: 300px; }
  .clstudio .cst-vid { width: 100%; max-width: 300px; }
  .clstudio .cst-post { gap: 44px; margin-top: 24px; }
  .clstudio .cst-post-vid .cst-vid { width: 250px; }
  .clstudio .cst-post-col { flex-basis: 100%; }
  .clstudio .cst-when { padding: 12px 14px; }
  .clstudio .cst-when.is-on { padding: 11px 13px; }
  .clstudio .cst-end .cst-next { margin-left: 0; flex-basis: 100%; }
  .clstudio .cst-wk { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .clstudio .cst-dy { padding: 5px 3px; font-size: 10.5px; }
  .clstudio .cst-ev { font-size: 9.5px; padding: 2px 3px; }
  .clstudio .cst-vc .cst-thumb { height: 200px; }
  /* the cut's box keeps the artefact's one line (the words and Speak); "Change it" drops under them */
  .clstudio .cst-inp { flex-wrap: wrap; row-gap: 8px; }
  .clstudio .cst-inp input, .clstudio .cst-inp textarea[data-grow] { min-width: 190px; }
  .clstudio .cst-inp .cst-send { margin-left: auto; }
}

/* ══ PHONE, TABLET, DESKTOP: three layouts, one breakpoint set (Alex, 18 Oct 2026) ══════════════
   Alex: *"you have designed and optimised the layout for both desktop and mobile?"* and then: *"our
   customers are coming in from tablets, phones, and desktop, so make sure this is completely
   optimised for those three UXs."* The coaches are mostly in their 50s and 60s, mostly on phones:
   one thing per screen, big targets, the step's button in reach.

     phone              ≤ 760px      one column; the headline first, then a smaller video, then the
                                     work; the step's main action rides a bar at the bottom
     tablet portrait    761–1023px   a middle layout: the video BESIDE the work at a smaller size,
                                     Results two across, When as rows; the main action rides a bar
     tablet landscape   ≥ 1024px     the desktop layout
     touch, any width   (pointer: coarse) every target at least 44px, inputs at 16px

   Desktop with a mouse (1440) is drawn by the rules above this block alone: nothing here matches a
   fine pointer wider than 1023px. tests/clips-studio-breakpoints.test.js pins these four queries.

   THE BAR is the house floating bar (review-canvas.css .rc-finish, launch-studio.css .lk-foot):
   sticky, riding above Help (--help-room) and the phone's home bar (the safe-area inset). Sticky,
   never fixed, so it never covers what follows it: at the end of the step it is back in its place.
   Sticky only works when #mainContent is not a scroll container (app-styles-v2.css, "STICKY NEVER
   STUCK UNDER #mainContent"), so the same `clip` that file gives the other bars' screens is given
   here while the studio is the page on show. The studio was measured for sideways overflow at every
   width first (none at 360, 390, 768, 820). */
@media (max-width: 1023px) {
  #appShell #mainContent:has(> .page.active .clstudio) { overflow-x: clip; overflow-y: visible; }
  .clstudio .cst-stick, .clstudio .cst-post-foot .cst-post-go {
    position: sticky; z-index: 5;
    bottom: calc(10px + var(--help-room, 0px) + env(safe-area-inset-bottom, 0px));
    background: #fff; border: 1px solid var(--cst-line-2); border-radius: 18px;
    box-shadow: 0 24px 50px -28px rgba(21,23,43,.5); padding: 12px 14px;
  }
  .clstudio .cst-dock.cst-stick { padding: 14px 18px; }
  .clstudio .cst-dock.cst-stick > div { flex-basis: 260px; }
  /* Post: a network's name stays on one line ("Instagram Reels", never "Instagram / Reels"), and
     When is a column of full-width rows: three across only where three fit (1024px and up). */
  .clstudio .cst-place { flex-wrap: nowrap; }
  .clstudio .cst-place-tx b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .clstudio .cst-whens { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .clstudio .cst-when { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
}

/* Results, on a phone and on every touch screen: the source line is ONE line (handle · network ·
   age, cut short with "…"), and Watch it is its own link beside it, never a lone "· Watch it". */
@media (max-width: 1023px), (pointer: coarse) {
  .clstudio .cst-meta { display: flex; align-items: center; gap: 6px; }
  .clstudio .cst-meta-l { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .clstudio .cst-meta-dot { display: none; }
  .clstudio .cst-meta > a, .clstudio .cst-meta > .cst-peek-go { flex: none; }
}

/* ── Tablet portrait (iPad 768 and 820): the video beside the work, at a smaller size ─────────── */
@media (min-width: 761px) and (max-width: 1023px) {
  .clstudio .cst-stage { gap: 28px !important; }
  .clstudio .cst-stage > .cst-vid { width: 250px; }
  .clstudio .cst-cam { width: 260px; }
  .clstudio .cst-col, .clstudio .cst-col-w { flex: 1 1 340px; }
  .clstudio .cst-post { gap: 28px; }
  .clstudio .cst-post-vid .cst-vid { width: 220px; }
  .clstudio .cst-post-col { flex: 1 1 340px; }
  .clstudio .cst-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clstudio .cst-saved-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clstudio .cst-how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Script and Captions: their whole last row (link, Next line, button) is the bar. */
  .clstudio .cst-end:has(> .cst-stick) {
    position: sticky; z-index: 5; bottom: calc(10px + var(--help-room, 0px) + env(safe-area-inset-bottom, 0px));
    background: #fff; border: 1px solid var(--cst-line-2); border-radius: 18px;
    box-shadow: 0 24px 50px -28px rgba(21,23,43,.5); padding: 12px 18px;
  }
  .clstudio .cst-end > .cst-stick { position: static; background: none; border: 0; box-shadow: none; padding: 0; }
  /* Post: the whole foot (TikTok's line when it shows, Schedule it, why it is greyed) is the bar, so
     the button never rides over the words above it; the video stays beside the list as it scrolls. */
  .clstudio .cst-post-foot {
    position: sticky; z-index: 5; bottom: calc(10px + var(--help-room, 0px) + env(safe-area-inset-bottom, 0px));
    background: #fff; border: 1px solid var(--cst-line-2); border-radius: 18px;
    box-shadow: 0 24px 50px -28px rgba(21,23,43,.5); padding: 12px 18px;
  }
  .clstudio .cst-post-foot .cst-post-go { position: static; background: none; border: 0; box-shadow: none; padding: 0; }
  .clstudio .cst-post-vid { position: sticky; top: 16px; }
}

/* ── Phone (390 and 360) ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* The Socials page's big title and line step aside while a step is open (clips-studio.js
     stepOpen), and the studio's own row (crumb · ✓ Saved · Back to Clips) is one compact line,
     kept clear of the hamburger's corner (app-styles-v2.css, ≤1100px). */
  .page.cst-step-on > .page-head { display: none; }
  .page.cst-step-on .clstudio .cst-bar, .page.cst-step-on .clstudio .cst-top { padding-right: 56px; min-height: 44px; }
  .clstudio .cst-bar { flex-wrap: nowrap; gap: 10px; min-height: 44px; }
  .clstudio .cst-bar .cst-crumb-full { display: none; }
  .clstudio .cst-bar .cst-crumb-ph { display: block; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .clstudio .cst-bar .cst-saved { font-size: 12px; white-space: nowrap; flex: none; }
  .clstudio .cst-bar .cst-ghost { flex: none; white-space: nowrap; padding: 10px 14px; }
  .clstudio .cst-st { white-space: nowrap; }

  /* Edit, Film and Post: the step's headline first, then the video at a phone's size (about 44% of
     the screen's height, centred, so it and its controls clear the bottom bar on the first screen), then the work. The column steps aside (display: contents) so
     its pieces take their place in the one column. */
  .clstudio .cst-stage, .clstudio .cst-post { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 18px !important; margin-top: 20px; }
  .clstudio .cst-stage > .cst-col, .clstudio .cst-post > .cst-post-col { display: contents; }
  .clstudio .cst-stage > .cst-col > *, .clstudio .cst-post > .cst-post-col > * { order: 3; }
  .clstudio .cst-stage > .cst-col > .cst-sub { order: 0; }
  .clstudio .cst-stage > .cst-col > .cst-lead, .clstudio .cst-post > .cst-post-col > .cst-lead { order: 1; }
  .clstudio .cst-stage > .cst-vid, .clstudio .cst-stage > .cst-cam, .clstudio .cst-post > .cst-post-vid { order: 2; align-self: center; }
  .clstudio .cst-stage > .cst-vid, .clstudio .cst-post-vid .cst-vid { width: min(100%, calc(clamp(200px, 100vh - 545px, 44vh) * 320 / 568)); width: min(100%, calc(clamp(200px, 100svh - 545px, 44svh) * 320 / 568)); max-width: none; }
  .clstudio .cst-stage > .cst-cam { width: min(100%, calc(58vh * 340 / 604)); width: min(100%, calc(58svh * 340 / 604)); max-width: none; }
  .clstudio .cst-h1 { font-size: 28px; }
  .clstudio .cst-cam .cst-prompter { font-size: 16px; padding: 12px 14px; }

  /* The cut's timeline: the short names (Hook · Why · Fix · Invite), never a clipped long one. */
  .clstudio .cst-tl .cst-tl-f { display: none; }
  .clstudio .cst-tl .cst-tl-s { display: inline; }

  /* The bars: the button full width; the Next line stays in the page, above. */
  .clstudio .cst-stick .cst-btn, .clstudio .cst-post-foot .cst-post-go .cst-btn { display: block; width: 100%; padding: 15px 20px; }
  .clstudio .cst-dock > div { display: none; }
  .clstudio .cst-end { display: contents; }
  .clstudio .cst-end > .cst-link { display: flex; margin: 18px 0 4px; }
  .clstudio .cst-end > .cst-next { display: block; margin: 14px 0 10px; }
  .clstudio .cst-capscr .cst-end > .cst-next { margin: 0; }
  .clstudio .cst-post-foot { display: contents; }
  .clstudio .cst-post > .cst-post-col > .cst-post-foot > * { order: 4; }
  .clstudio .cst-post-foot .cst-post-go { flex-direction: column; align-items: stretch; gap: 6px; }
  .clstudio .cst-post-foot .cst-post-go .cst-next { text-align: center; font-size: 12.5px; }
  .clstudio .cst-go.cst-stick { margin: 0 -8px; }
  .clstudio .cst-go.cst-stick .cst-go-line { flex-wrap: nowrap; justify-content: space-between; gap: 8px; font-size: 12.5px; }
  .clstudio .cst-go.cst-stick .cst-go-line .cst-link { font-size: 13px; white-space: nowrap; }
  .clstudio .cst-entry-go.cst-stick { margin-top: 2px; }
  .clstudio .cst-place { gap: 10px; padding: 12px; }
  .clstudio .cst-ph { width: 80px; }
  .clstudio .cst-pmk { width: 28px; height: 28px; }
}
/* A program's plan and build stages (js/spaces/program.js, program-build.js) draw on this kit inside .spx-root[data-own].
   On a phone their short stages end with nothing below the pinned button, so a bar pinned 10px plus the Help button's
   room above the bottom could only rise over Back; the page keeps that much room after it (P11 polish, the 28 Oct walk
   at 390). Scoped to programs, so Clips' own screens are unchanged. Layout only. */
@media (max-width: 760px) {
  .spx-root[data-own] .clstudio .cst-end:has(> .cst-stick)::after { content: ''; display: block; height: calc(16px + var(--help-room, 0px) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
  .clstudio .cst-bar .cst-crumb-c { display: none; }
  .clstudio .cst-st { font-size: 10px; }
  .clstudio .cst-h1 { font-size: 26px; }
}

/* ── Touch, at any width (phones and every tablet): 44px targets, 16px inputs ──────────────────── */
@media (max-width: 760px), (pointer: coarse) {
  .clstudio .cst-ghost, .clstudio .cst-sm, .clstudio .cst-chip, .clstudio .cst-a, .clstudio .cst-when,
  .clstudio .cst-quick button, .clstudio .cst-place-st, .clstudio .cst-speak, .clstudio .cst-mic .vi-btn,
  .clstudio .cst-chat .cc-textarea { min-height: 44px; }
  .clstudio .cst-ghost { display: inline-flex; align-items: center; justify-content: center; }
  .clstudio .cst-link, .clstudio .cst-meta > a, .clstudio .cst-based a { display: inline-flex; align-items: center; min-height: 44px; }
  .clstudio .cst-ed { min-width: 44px; min-height: 44px; }
  .clstudio .cst-tick, .clstudio .cst-tog { position: relative; }
  .clstudio .cst-tick::after { content: ""; position: absolute; inset: -11px; }
  .clstudio .cst-tog::after { content: ""; position: absolute; inset: -9px 0; }
  .clstudio .cst-cover { width: 44px; height: 78px; }
  .clstudio input, .clstudio textarea, .clstudio .cst-inp input, .clstudio .cst-cap-in, .clstudio .cst-pick input,
  .clstudio .cst-chat .cc-textarea { font-size: 16px; }
}

/* ══ VOICEOVER: "How do you want to appear?", voice parts on Film, "1 · Your scenes", the Choose
   sheet and the Voice look (js/clips/clips-scenes.js; docs/projects/content-engine/VOICEOVER-FLOW.md).
   The approved boards are Choose, Voice, Footage, Swap and Look (Alex, 18 Oct 2026): their classes
   and values, prefixed, as above. ═════════════════════════════════════════════════════════════════ */

/* Film: the choice (board "Choose") */
.clstudio .cst-choose { margin-top: 34px; }
.clstudio .cst-aps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.clstudio .cst-ap {
  position: relative; background: #fff; border: 1px solid var(--cst-line-2); border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; text-align: left; font: inherit; color: inherit; min-width: 0;
}
.clstudio .cst-ap[aria-checked="true"] { border: 2px solid var(--cst-ind); background: var(--cst-ind-bg); padding: 19px; }
.clstudio .cst-ap-pic { height: 210px; border-radius: 14px; display: flex; overflow: hidden; gap: 4px; }
.clstudio .cst-ap-face { flex: 1; background: linear-gradient(170deg, #3a3550, #1b1828); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px; overflow: hidden; }
.clstudio .cst-ap-head { width: 54px; height: 54px; border-radius: 50%; background: #8d86a8; box-shadow: 0 70px 0 30px #8d86a8; }
.clstudio .cst-ap-scene { flex: 1; background: linear-gradient(160deg, #9fc8b8, #4f8a83 60%, #2f5f63); position: relative; }
.clstudio .cst-ap-scene.is-b { background: linear-gradient(160deg, #f2d6b3, #d79a6b 60%, #8f5a43); }
.clstudio .cst-ap-lbl { position: absolute; top: 10px; left: 10px; font: 500 10px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.35); padding: 3px 7px; border-radius: 6px; }
.clstudio .cst-ap-wave { position: absolute; left: 14px; right: 14px; bottom: 18px; display: flex; align-items: center; gap: 4px; height: 34px; }
.clstudio .cst-ap-wave i { flex: 1; background: #fff; border-radius: 3px; opacity: .9; }
.clstudio .cst-ap-tx { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.clstudio .cst-ap-t { font-weight: 700; font-size: 20px; }
.clstudio .cst-ap-d { font-size: 15px; color: #4a4453; line-height: 1.45; }
.clstudio .cst-ap-badge { position: absolute; top: -11px; right: 16px; background: var(--cst-ind); color: #fff; border-radius: 999px; padding: 4px 10px; font: 600 12px "Bricolage Grotesque", sans-serif; }
.clstudio .cst-ap-tag { display: none; font-size: 10.5px; font-weight: 600; background: var(--cst-ind); color: #fff; border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: 2px; }
.clstudio .cst-ap-foot { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 28px; flex-wrap: wrap; }
.clstudio .cst-ap-foot .cst-next { font-size: 15px; color: var(--cst-ink-2); }
.clstudio .cst-appear { padding: 2px; display: flex; flex-direction: column; gap: 8px; }
/* How you appear, always on the Film screen (item 03): one row of three, the one in force filled. */
.clstudio .cst-apsw { display: flex; border: 1px solid var(--cst-line); border-radius: 12px; overflow: hidden; background: #fff; }
.clstudio .cst-apsw-o { flex: 1 1 0; min-width: 0; border: 0; border-left: 1px solid var(--cst-line); background: none; padding: 10px 6px; min-height: 44px;
  font: 600 14px "Bricolage Grotesque", sans-serif; color: var(--cst-ink-2); cursor: pointer; }
.clstudio .cst-apsw-o:first-child { border-left: 0; }
.clstudio .cst-apsw-o[aria-checked="true"] { background: var(--cst-ind-soft); color: var(--cst-ind-d); font-weight: 700; }
.clstudio .cst-apsw-o:focus-visible { outline: 2px solid var(--cst-ind); outline-offset: -2px; }
.clstudio .cst-apsw-line { margin: 0; }

/* Film: a voice part's tile (the camera off, the voice instead) */
.clstudio .cst-cam-voice { background: #14121c; }
.clstudio .cst-cam-wave { position: absolute; left: 22px; right: 22px; top: 46%; height: 70px; display: flex; align-items: center; gap: 4px; }
.clstudio .cst-cam-wave i { flex: 1; background: #8b83f0; border-radius: 3px; }

/* Edit: 1 · Your scenes (board "Footage") */
.clstudio .cst-sc-pv { flex: none; display: flex; flex-direction: column; align-items: center; }
.clstudio .cst-sc-pv .cst-vid { width: 300px; border-radius: 26px; background: linear-gradient(165deg, #c7dcd2, #6f9f93 55%, #355f5c) center / cover no-repeat; }
.clstudio .cst-pv.is-face:not(.has-still) { background-image: linear-gradient(170deg, #3a3550, #1b1828) !important; }
.clstudio .cst-pv-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clstudio .cst-pv-v[hidden] { display: none; }
.clstudio .cst-pv-you { display: none; position: absolute; top: 18px; left: 0; right: 0; text-align: center; color: #fff; font: 500 11px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.clstudio .cst-pv.is-face .cst-pv-you { display: block; }
/* Their own video is playing there (clips-scenes.js faceAt), so it needs no label. */
.clstudio .cst-pv.is-face.has-take .cst-pv-you { display: none; }
.clstudio .cst-pv-cap { position: absolute; left: 18px; right: 18px; top: 52%; text-align: center; font: 800 22px/1.25 "Bricolage Grotesque", sans-serif; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.45); pointer-events: none; }
.clstudio .cst-pv-b { position: absolute; inset: 0; border: 0; background: transparent; padding: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 38%; }
.clstudio .cst-pv-b .cst-play { width: 58px; height: 58px; transition: opacity .2s; }
.clstudio .cst-pv.is-playing .cst-pv-b .cst-play { opacity: 0; }
.clstudio .cst-credit { font-size: 12.5px; color: #8a8494; margin-top: 10px; text-align: center; }
.clstudio .cst-col-sc { flex: 1 1 520px; max-width: 760px; gap: 14px; }
.clstudio .cst-scs { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.clstudio .cst-sc { display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--cst-line-2); border-radius: 16px; padding: 12px; min-width: 0; }
.clstudio .cst-sc-th { width: 74px; height: 104px; border-radius: 10px; flex: none; position: relative; overflow: hidden; background: linear-gradient(165deg, #f0e1c8, #c99b6a 60%, #7d5638) center / cover no-repeat; }
.clstudio .cst-sc-th.is-face { background: linear-gradient(170deg, #3a3550, #1b1828); }
.clstudio .cst-sc-th video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clstudio .cst-sc-th small { position: absolute; bottom: 6px; left: 6px; font: 500 10px "JetBrains Mono", monospace; color: #fff; background: rgba(0,0,0,.4); padding: 2px 5px; border-radius: 5px; text-transform: uppercase; }
.clstudio .cst-sc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.clstudio .cst-sc-part { font: 500 10px "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--cst-ink-3); }
.clstudio .cst-sc-say { font-size: 17px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.clstudio .cst-sc-shows { font-size: 13.5px; color: var(--cst-ink-3); }
.clstudio .cst-sc-acts { display: flex; flex-direction: column; gap: 8px; flex: none; align-items: stretch; }
.clstudio .cst-sc-acts .cst-sm { min-height: 44px; padding: 10px 14px; }
.clstudio .cst-sc-acts .cst-link { font-size: 13px; text-align: center; }
.clstudio .cst-sm.is-ind { border-color: var(--cst-ind); color: var(--cst-ind); }
.clstudio .cst-sm:disabled { opacity: .55; }
.clstudio .cst-sc-go { justify-content: flex-end; margin-top: 8px; }
.clstudio .cst-sc-go .cst-next { font-size: 15px; color: var(--cst-ink-2); }

/* Captions and look: the fourth look, Voice (board "Look") */
.clstudio .cst-opts.cst-opts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.clstudio .cst-wv { position: absolute; left: 14px; right: 14px; bottom: 18px; height: 30px; display: flex; align-items: center; gap: 3px; }
.clstudio .cst-wv i { flex: 1; background: #fff; border-radius: 3px; opacity: .95; }
.clstudio .cst-look-new { display: inline-block; background: var(--cst-ind-ring); color: var(--cst-ind-d); border-radius: 999px; padding: 2px 8px; font: 600 11px "Bricolage Grotesque", sans-serif; vertical-align: 1px; }

/* The Choose sheet (board "Swap"), inside the app's sheet (CBSheet.panel, ui-core.js) */
#cb-sheet .rel-editor:has(.cst-swap) { max-width: 860px; background: var(--surface-2, #F5F4F0); border-radius: 24px; }
#cb-sheet .rel-editor:has(.cst-swap) .rel-ed-head h3 { font: 500 11px "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: #6b6475; }
#cb-sheet .rel-editor:has(.cst-swap) .rel-ed-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e3ded4; background: #fff; color: #1e1b2e; }
#cb-sheet .rel-editor:has(.cst-swap) .rel-ed-primary { background: #4338CA; border-color: #4338CA; color: #fff; border-radius: 999px; padding: 14px 28px; font-size: 16px; min-height: 48px; box-shadow: 0 6px 18px rgba(67,56,202,.25); }
#cb-sheet .rel-editor:has(.cst-swap) .rel-ed-primary:disabled { background: #c9c5e8; border-color: #c9c5e8; box-shadow: none; }
.clstudio.cst-swap { display: flex; flex-direction: column; gap: 16px; padding: 2px 0 6px; }
.clstudio.cst-swap > [data-sw-live] { display: flex; flex-direction: column; gap: 16px; }
.clstudio .cst-swap-h { font-family: Fraunces, Georgia, serif; font-weight: 600; font-size: 28px; line-height: 1.2; margin: 6px 0 0; overflow-wrap: anywhere; }
.clstudio .cst-swap-q { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--cst-line); border-radius: 14px; padding: 6px 6px 6px 16px; }
.clstudio .cst-swap-q:focus-within { border-color: var(--cst-ind); }
.clstudio .cst-swap-q label { font-weight: 700; font-size: 15px; white-space: nowrap; }
.clstudio .cst-swap-q input { flex: 1; border: 0; font: 500 16px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); outline: none; min-width: 0; background: transparent; padding: 10px 0; min-height: 44px; }
.clstudio .cst-swap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.clstudio .cst-swap-c { border-radius: 12px; height: 210px; position: relative; border: 3px solid transparent; padding: 0; background: #d9dbe4 center / cover no-repeat; display: block; }
.clstudio .cst-swap-c.cst-skel { height: 210px; }
.clstudio .cst-swap-c[aria-checked="true"] { border-color: var(--cst-ind); }
.clstudio .cst-swap-c small { position: absolute; bottom: 8px; left: 8px; font: 500 10px "JetBrains Mono", monospace; color: #fff; background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 5px; }
.clstudio .cst-swap-tick { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--cst-ind); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.clstudio .cst-swap-none { padding: 22px; border-radius: 14px; background: #fff; border: 1px solid var(--cst-line-2); color: var(--cst-ink-2); font-size: 15px; }
.clstudio .cst-swap-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.clstudio .cst-swap-alt { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--cst-line-2); border-radius: 14px; padding: 14px 16px; text-align: left; font: inherit; color: inherit; min-height: 44px; }
.clstudio .cst-swap-alt b { font-size: 16px; }
.clstudio .cst-swap-alt b + br + span { font-size: 13.5px; color: var(--cst-ink-3); }
.clstudio .cst-swap-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--cst-ind-soft); flex: none; display: flex; align-items: center; justify-content: center; color: var(--cst-ind); }
.clstudio .cst-swap-cost { margin-left: auto; font: 600 12px "Bricolage Grotesque", sans-serif; background: #FFF1D6; color: #7a4b00; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.clstudio .cst-swap-own { display: flex; gap: 10px; flex-wrap: wrap; }

/* Phone */
@media (max-width: 760px) {
  .clstudio .cst-aps { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .clstudio .cst-ap { flex-direction: row; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; }
  .clstudio .cst-ap[aria-checked="true"] { padding: 11px; }
  .clstudio .cst-ap-pic { width: 58px; height: 80px; border-radius: 8px; flex: none; gap: 2px; }
  .clstudio .cst-ap-face { padding-bottom: 8px; }
  .clstudio .cst-ap-head { width: 18px; height: 18px; box-shadow: 0 24px 0 10px #8d86a8; }
  .clstudio .cst-ap-lbl, .clstudio .cst-ap-badge { display: none; }
  .clstudio .cst-ap-wave { left: 6px; right: 6px; bottom: 8px; height: 18px; gap: 2px; }
  .clstudio .cst-ap-tag { display: inline-block; }
  .clstudio .cst-ap-tx { gap: 3px; }
  .clstudio .cst-ap-t { font-size: 16px; }
  .clstudio .cst-ap-d { font-size: 14px; }
  .clstudio .cst-ap-foot { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
  .clstudio .cst-ap-foot .cst-next { text-align: center; font-size: 13.5px; }
  .clstudio .cst-stage > .cst-sc-pv { order: 2; align-self: stretch; width: 100%; }
  .clstudio .cst-sc-pv .cst-vid { width: min(100%, calc(clamp(200px, 100vh - 545px, 44vh) * 320 / 568)); width: min(100%, calc(clamp(200px, 100svh - 545px, 44svh) * 320 / 568)); }
  .clstudio .cst-pv-cap { font-size: 15px; left: 12px; right: 12px; }
  .clstudio .cst-sc { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px 12px; padding: 10px; }
  .clstudio .cst-sc-th { width: 56px; height: 80px; }
  .clstudio .cst-sc-say { font-size: 16px; }
  .clstudio .cst-sc-acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .clstudio .cst-sc-acts .cst-sm { flex: 1 1 0; }
  .clstudio .cst-sc-acts .cst-link { flex-basis: 100%; }
  .clstudio .cst-sc-go { flex-direction: column; align-items: stretch; }
  .clstudio .cst-sc-go .cst-next { text-align: center; font-size: 13.5px; }
  #cb-sheet:has(.cst-swap) { align-items: flex-end; padding: 0; }
  #cb-sheet .rel-editor:has(.cst-swap) { border-radius: 18px 18px 0 0; max-height: calc(100vh - 24px); max-height: calc(100svh - 24px); }
  .clstudio .cst-swap-h { font-size: 21px; }
  .clstudio .cst-swap-q { flex-wrap: wrap; padding: 8px 8px 8px 12px; }
  .clstudio .cst-swap-q input { flex-basis: 140px; }
  .clstudio .cst-swap-grid { gap: 6px; }
  .clstudio .cst-swap-c, .clstudio .cst-swap-c.cst-skel { height: 104px; border-width: 2px; border-radius: 8px; }
  .clstudio .cst-swap-tick { width: 20px; height: 20px; font-size: 11px; top: 4px; right: 4px; }
  .clstudio .cst-swap-more { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .clstudio .cst-swap-alt { padding: 10px 12px; }
}

/* Tablet portrait */
@media (min-width: 761px) and (max-width: 1023px) {
  .clstudio .cst-aps { gap: 14px; }
  .clstudio .cst-ap { padding: 14px; }
  .clstudio .cst-ap[aria-checked="true"] { padding: 13px; }
  .clstudio .cst-ap-pic { height: 170px; }
  .clstudio .cst-ap-t { font-size: 18px; }
  .clstudio .cst-sc-pv .cst-vid { width: 250px; }
  .clstudio .cst-sc-pv { position: sticky; top: 16px; align-self: flex-start; }
  .clstudio .cst-col-sc { flex: 1 1 340px; }
  .clstudio .cst-sc { flex-wrap: wrap; }
  .clstudio .cst-sc-tx { flex: 1 1 200px; }
  .clstudio .cst-sc-acts { flex-direction: row; flex: 1 1 100%; }
  .clstudio .cst-sc-acts .cst-sm { flex: 1 1 0; }
  .clstudio .cst-opts.cst-opts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clstudio .cst-swap-c, .clstudio .cst-swap-c.cst-skel { height: 160px; }
}

/* Phones and tablets in portrait: the step's main action rides the bar (the rule above) */
@media (max-width: 1023px) {
  .clstudio .cst-ap-foot.cst-stick, .clstudio .cst-sc-go.cst-stick { justify-content: space-between; }
}

/* Touch */
@media (max-width: 760px), (pointer: coarse) {
  .clstudio .cst-ap, .clstudio .cst-swap-alt, .clstudio .cst-sc-acts .cst-sm, .clstudio .cst-swap-own .cst-sm { min-height: 44px; }
  .clstudio .cst-swap-q input { font-size: 16px; }
}

/* ── Polish, 22 Oct 2026 (the dev8 walk) ───────────────────────────────────────────────────────── */
/* A wait said in words, where the coach is looking: Maya's check, writing the script. */
.clstudio .cst-waiting { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--cst-ink); font-weight: 600; }
.clstudio .cst-dock .cst-waiting { flex: 1 1 260px; margin: 0; }
/* While Maya writes the script the dock stays in view at every width (on a phone it is sticky already). */
.clstudio .cst-dock.is-waiting { position: sticky; z-index: 5; bottom: calc(10px + var(--help-room, 0px) + env(safe-area-inset-bottom, 0px)); }
/* The parts Maya just changed, lit for a moment. */
.clstudio .cst-part { border-radius: 12px; transition: background-color .8s ease, box-shadow .8s ease; }
.clstudio .cst-part.is-new { background-color: #fff6d6; box-shadow: 0 0 0 8px #fff6d6; }
/* "Not saved" in the header, when a choice did not save. */
.clstudio .cst-saved.is-off { color: #b3261e; font-weight: 600; }
/* In progress: the earlier repeats of one idea, and Show more. */
.clstudio .cst-earlier { align-self: flex-start; margin: -6px 0 0 24px; font-size: 14px; }
.clstudio .cst-more-proj { align-self: center; }
.clstudio .cst-proj-draft { border: 1px dashed var(--cst-line-2); }

/* ══ POST, AT A PHONE'S WIDTH (dev8 walk, 22 Oct 2026) ═════════════════════════════════════════════
   The whole place row ticks it (post-sheet.js placeHtml puts data-psh="tick" on the row), so the
   row is the target, never only the 22px box. The caption box grows to its words (post-sheet.js
   fitCaption), so no line is cut in half. The week strip never clips "This Clip 19:00": its day
   cells keep a readable width and the strip scrolls sideways inside itself, never the page. */
.clstudio .cst-place.is-tap { cursor: pointer; min-height: 44px; -webkit-tap-highlight-color: transparent; }
.clstudio .cst-place.is-tap > .cst-place-tx { -webkit-user-select: none; user-select: none; }
.clstudio .cst-cap-in { field-sizing: content; }
.clstudio .cst-week { min-width: 0; max-width: 100%; }
.clstudio .cst-ev { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.clstudio .cst-ev:not(.is-this) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 760px) {
  .clstudio .cst-wk {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr);
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; padding-bottom: 4px; gap: 4px;
  }
  .clstudio .cst-dy { scroll-snap-align: start; padding: 6px 5px; font-size: 11px; }
  .clstudio .cst-ev { font-size: 10.5px; padding: 2px 4px; }
}

/* ══ CLIPS, ROUND UX2 (dev8 walk, 22 Oct 2026) ═════════════════════════════════════════════════════ */
/* Your visuals: one card per spoken line. A long line's two or three visuals are a small strip inside
   its card ("3 visuals for this line"); a tap on one picks which the card's buttons work on. */
.clstudio .cst-sc-n { font-size: 13px; font-weight: 600; color: var(--cst-ink-2); }
.clstudio .cst-sc-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.clstudio .cst-sc-mini {
  position: relative; width: 40px; height: 56px; flex: none; padding: 0; border-radius: 7px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: linear-gradient(165deg, #f0e1c8, #c99b6a 60%, #7d5638) center / cover no-repeat;
}
.clstudio .cst-sc-mini.is-face { background-color: #ece9f6; background-image: none; }
.clstudio .cst-sc-mini[aria-checked="true"] { border-color: var(--cst-ind); box-shadow: 0 0 0 2px var(--cst-ind-ring); }
.clstudio .cst-sc-mini small { position: absolute; left: 2px; right: 2px; bottom: 2px; font: 500 9px "JetBrains Mono", monospace; color: #fff; background: rgba(0,0,0,.45); border-radius: 4px; text-align: center; }
/* "Video from Pexels" beside the Pexels visuals, small and quiet. */
.clstudio .cst-sc-credit { font-size: 12px; color: #8a8494; }
.clstudio .cst-credit[hidden] { display: none; }
/* The coach's own face: their take's still once it is in, a plain light tile that says so until then. */
.clstudio .cst-sc-th.is-face:not(.has-still) { background: #ece9f6; }
.clstudio .cst-sc-th.is-face.has-still { background-color: #1b1828; background-size: cover; background-position: center; }
.clstudio .cst-sc-you { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; text-align: center; color: var(--cst-ind-d, #3d33a8); font-size: 10.5px; font-weight: 600; line-height: 1.2; }
.clstudio .cst-sc-you svg { width: 26px; height: 26px; fill: currentColor; opacity: .8; }
.clstudio .cst-sc.is-busy .cst-sc-th { opacity: .6; transition: opacity .2s; }
.clstudio .cst-sm[aria-busy="true"] { cursor: progress; }
.clstudio .cst-pv.is-face.has-still { background-size: cover; background-position: center; }

@media (max-width: 760px) {
  /* Captions and look with the fourth look, Voice: two across (2×2), names whole, never four squeezed
     into one row (dev8 walk at 390px: "Clea", "Bol", "Box", "Voi"). */
  .clstudio .cst-opts.cst-opts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .clstudio .cst-opts.cst-opts-4 .cst-opt { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 10px 8px; gap: 8px; }
  .clstudio .cst-opts.cst-opts-4 .cst-ph { width: min(100%, 120px); }
  .clstudio .cst-opts.cst-opts-4 .cst-opt b { white-space: normal; overflow-wrap: normal; word-break: normal; }
  .clstudio .cst-opts.cst-opts-4 .cst-opt small { display: block; font-size: 12px; line-height: 1.3; }
  .clstudio .cst-sc-strip { grid-column: 1 / -1; }
  .clstudio .cst-sc-mini { width: 36px; height: 50px; }
}

/* A closest match (research.js fillTo, 22 Oct 2026): set apart from the proof pill, softly. */
.clstudio .cst-pill.is-near { background: #fff4d6; color: #6b4e00; }

/* The found video's picture opens it, as Watch it does. */
.clstudio a.cst-thumb { display: flex; color: inherit; text-decoration: none; }   /* flex, like the div it replaced: the play button sits in the middle */

/* ── "Pick how it looks." (the attention layer, approved 23 Oct 2026: artefact
   https://claude.ai/artifact/NwXrdBMGxS3cHrF4GNvPPZ, its edit screen .maya/.styles/.style/.moments/.mo/.sw)
   Maya's line, three style cards, More caption looks, the moments with a switch each. ─────────────── */
.clstudio .cst-maya-line { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--cst-line-2); border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.45; color: var(--cst-ink-2); }
.clstudio .cst-maya-line b { color: var(--cst-ink); }
.clstudio .cst-maya-line .cst-maya-m { margin-top: 1px; }
.clstudio .cst-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.clstudio .cst-style { border: 2px solid var(--cst-line-2); background: #fff; color: inherit; border-radius: 12px; padding: 12px 14px; text-align: left; display: grid; gap: 4px; align-content: start; min-width: 0; font-family: inherit; }
.clstudio .cst-style[aria-checked="true"] { border-color: var(--cst-ind); background: var(--cst-ind-bg); }
.clstudio .cst-style b { font-size: 16px; }
.clstudio .cst-style span { font-size: 13.5px; line-height: 1.35; color: var(--cst-ink-3); }
.clstudio .cst-style em { font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--cst-ind); }
.clstudio .cst-more { display: block; align-self: stretch; width: 100%; border: 1px solid var(--cst-line-2); border-radius: 14px; background: #fff; padding: 10px 14px; }
.clstudio .cst-more > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--cst-ink-2); padding: 4px 0; min-height: 32px; display: flex; align-items: center; }
.clstudio .cst-more[open] > summary { margin-bottom: 10px; }
.clstudio .cst-more .cst-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; gap: 12px; }
.clstudio .cst-more .cst-opts.cst-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 570px; }
.clstudio .cst-more .cst-link { margin-top: 10px; }
.clstudio .cst-moments, .clstudio .cst-styles, .clstudio .cst-maya-line { align-self: stretch; width: 100%; }
.clstudio .cst-moments { display: grid; gap: 8px; }
.clstudio .cst-k2 { font-size: 16px; font-weight: 700; margin: 0; }
.clstudio .cst-mo-n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; color: var(--cst-ink-3); }
.clstudio .cst-mo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.clstudio .cst-mo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 4px; border: 1px solid var(--cst-line-2); border-radius: 10px; background: #fff; }
.clstudio .cst-mo.is-off .cst-mo-main { opacity: .45; }
.clstudio .cst-mo-main { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; background: none; border: 0; padding: 4px 6px; text-align: left; color: inherit; font-size: 14px; min-height: 44px; min-width: 0; }
.clstudio .cst-mo-t { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--cst-ink-3); }
.clstudio .cst-mo-w { min-width: 0; overflow-wrap: anywhere; }
.clstudio .cst-mo-w small { display: block; font-size: 12.5px; color: var(--cst-ink-3); }
.clstudio .cst-mo-pic { width: 40px; height: 25px; border-radius: 5px; background: var(--cst-line-3) center/cover no-repeat; }
.clstudio .cst-mo-main.has-pic { grid-template-columns: 44px 40px minmax(0, 1fr); }
.clstudio .cst-mo-acts { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding: 0 6px 6px 60px; }
.clstudio .cst-src-note { font-size: 13px; line-height: 1.4; color: var(--cst-ink-3); }
.clstudio .cst-moments .cst-credit { text-align: left; margin-top: 0; }
@media (max-width: 760px) {
  .clstudio .cst-styles { grid-template-columns: minmax(0, 1fr); }
  .clstudio .cst-more .cst-opts, .clstudio .cst-more .cst-opts.cst-opts-3 { grid-template-columns: minmax(0, 1fr); }
  .clstudio .cst-mo-acts { padding-left: 6px; }
  .clstudio .cst-mo-acts .cst-sm { min-height: 44px; }
}

/* Posted (Your Clips): the newest Clips that went out; a coach in the Build Along gets the platform's ⋯ (CBActions) beside
   Open, holding "Remove from / Show on the Build Along leaderboard" (js/clips/clips-studio.js postedCard). */
.clstudio .cst-posted .cst-thumb-proj { background-color: var(--cst-line-2); }
.clstudio .cst-posted-menu { display: flex; align-items: center; margin-left: -10px; }
.clstudio .cst-posted-menu .cba-dots { margin: 0; min-width: 44px; min-height: 44px; }

/* Saved for later: the ideas saved from the Idea step (rows), apart from the videos kept from a search (the grid). */
.clstudio .cst-saved-h .cst-ideas { margin-top: 16px; }
.clstudio .cst-saved-sub { margin: 28px 0 0; }

/* ── UX review, 25 Oct 2026 (items 01 and 02) ──────────────────────────────────────────────────────
   The options tray at the foot of a Clip's steps, a done step opened to read, and Look closer. */
.clstudio .cst-tray { max-width: 1100px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid var(--cst-line); }
.clstudio .cst-tray-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 14px; }
.clstudio .cst-tray-c { background: #fff; border-radius: 14px; box-shadow: var(--cst-shadow); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.clstudio .cst-tray-c .cst-thumb { height: 96px; }
.clstudio .cst-tray-t { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; flex: 1 1 auto; }
.clstudio .cst-tray-c .cst-sm { align-self: flex-start; }
.clstudio .cst-change { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--cst-line-2); }
.clstudio .cst-change-tx { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.45; }
.clstudio .cst-change-go { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.clstudio .cst-ro .cst-fp { margin-top: 8px; }
.clstudio .cst-ro .cst-sheet { flex: none; box-shadow: none; padding: 0; border-radius: 0; }
/* The sheet's body is its own .clstudio root (the class and cst-peek on one element). */
.clstudio.cst-peek { display: flex; flex-direction: column; gap: 12px; }
.clstudio.cst-peek .cst-thumb, .clstudio.cst-peek a.cst-thumb { display: flex; height: min(360px, 52vh); }
.clstudio .cst-peek-go { font-size: 13px; }
/* Watch it and Look closer each stay on one line (they wrapped as "Watch / it" at 1440). */
.clstudio .cst-meta > a, .clstudio .cst-meta > .cst-peek-go { white-space: nowrap; }
@media (max-width: 760px) {
  .clstudio .cst-tray { margin-top: 28px; }
  .clstudio .cst-tray-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .clstudio .cst-tray-c .cst-thumb { height: 80px; }
  .clstudio .cst-change-go .cst-btn { width: 100%; }
  .clstudio .cst-apsw-o { font-size: 13px; padding: 10px 4px; }
}

/* ── Your Clips in four tabs (UX review item 06): Ideas · In progress · Ready to post · Posted ──────── */
.clstudio .cst-tabs { max-width: 1100px; margin: 32px auto 0; display: flex; gap: 8px; flex-wrap: wrap; }
.clstudio .cst-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--cst-line); background: #fff; font: 600 15px "Bricolage Grotesque", sans-serif; color: var(--cst-ink-2); cursor: pointer; }
.clstudio .cst-tab[aria-pressed="true"] { border-color: var(--cst-ind); background: var(--cst-ind-soft); color: var(--cst-ind-d); }
.clstudio .cst-tab:focus-visible { outline: 2px solid var(--cst-ind); outline-offset: 2px; }
.clstudio .cst-tab-n { font: 500 12px "JetBrains Mono", monospace; background: var(--cst-ground); border-radius: 999px; padding: 2px 7px; color: var(--cst-ink-3); }
.clstudio .cst-tab[aria-pressed="true"] .cst-tab-n { background: #fff; color: var(--cst-ind-d); }
.clstudio .cst-tabbody > .cst-list:first-child, .clstudio .cst-tabbody > .cst-saved-h:first-child { margin-top: 20px; }
.clstudio .cst-sv .cst-link { align-self: flex-start; font-size: 13px; }
@media (max-width: 760px) {
  .clstudio .cst-tabs { margin-top: 22px; gap: 6px; }
  .clstudio .cst-tab { padding: 8px 12px; font-size: 14px; }
}

/* ── Two takes of one part, side by side (Alex, 25 Oct 2026): the take in the video now and the new one ─── */
.clstudio .cst-cmp { margin: -2px 0 10px; padding: 14px 16px; border-radius: 14px; background: var(--cst-ind-bg); border: 1px solid var(--cst-ind-ring); display: flex; flex-direction: column; gap: 12px; }
.clstudio .cst-cmp-h { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.clstudio .cst-cmp-h span { color: var(--cst-ink-2); }
.clstudio .cst-cmp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.clstudio .cst-cmp-t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.clstudio .cst-cmp-t small { font-size: 13px; font-weight: 600; color: var(--cst-ink-2); }
.clstudio .cst-cmp-t.is-kept small { color: var(--cst-ind-d); }
.clstudio .cst-cmp-t .cst-sm { align-self: flex-start; }
.clstudio .cst-cmp-m { border-radius: 10px; overflow: hidden; background: #1b1828; aspect-ratio: 9 / 16; max-height: 320px; display: flex; align-items: center; justify-content: center; }
.clstudio .cst-cmp-m video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.clstudio .cst-cmp-m audio { width: 100%; }
.clstudio .cst-cmp-m.is-wait { background: var(--cst-ground); color: var(--cst-ink-2); font-size: 13px; padding: 12px; text-align: center; aspect-ratio: auto; min-height: 120px; }
.clstudio .cst-fp .cst-sm-s { margin-left: auto; }
@media (max-width: 760px) {
  .clstudio .cst-cmp { padding: 12px; }
  .clstudio .cst-cmp-m { max-height: 260px; }
}
/* "Edit the words" on the cut (UX review item 07): the caption words as tappable words, one part at a time. */
.clstudio .cst-words-part { margin-top: 12px; }
.clstudio .cst-words-part > b { display: block; font-size: 13px; margin-bottom: 6px; }
.clstudio .cst-words-list { display: flex; flex-wrap: wrap; gap: 4px; line-height: 1.6; }
.clstudio .cst-word { border: 1px solid transparent; background: none; border-radius: 6px; padding: 4px 6px; min-height: 32px; font: inherit; font-size: 15px; color: inherit; cursor: pointer; }
.clstudio .cst-word:hover, .clstudio .cst-word:focus-visible { border-color: var(--cst-ind); background: var(--cst-ind-bg); }
.clstudio .cst-word.is-edited { background: var(--cst-ind-soft); color: var(--cst-ind-d); }
.clstudio .cst-word.is-new { background: var(--cst-ind-soft); border-color: var(--cst-ind); color: var(--cst-ind-d); font-weight: 600; }
.clstudio .cst-word-edit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.clstudio .cst-word-edit .cst-box { min-width: 160px; }
.clstudio .cst-words-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ══ OUTREACH / LINKEDIN PROFILE (js/outreach-linkedin-profile.js) draws on this kit inside `.clstudio.olp` ══
   Its own pieces are css/outreach-linkedin-profile.css (.olp-*); the three changes it makes to the studio's
   classes are here, scoped to it, so Clips' own screens are unchanged (Alex's mockup, 2 Nov 2026):
   the stepper is as long as the option (six steps or seven, --olp-n on the root, as the mockup sets its
   columns), a headline balances its lines, and at a phone's width the steps show their numbers only. */
.clstudio.olp .cst-steps { grid-template-columns: repeat(var(--olp-n, 6), minmax(0, 1fr)); }
.clstudio.olp .cst-h1 { text-wrap: balance; }
@media (max-width: 760px) {
  .clstudio.olp .cst-steps .cst-st-n { display: none; }
}