/* 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; }

/* ── 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); }
.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; }
.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; }
.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; }

/* ── 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 { 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 { 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; }
}
@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-keep { margin-top: 18px; }
.clstudio .cst-ap-foot .cst-next { font-size: 15px; color: var(--cst-ink-2); }
.clstudio .cst-appear { padding: 2px; }

/* 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 { 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; }
.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; }
}