/* css/clips-flow.css — Clips: the one-at-a-time screens. B read a script (js/clips/clips-read.js),
   D pick a look and watch them finish (clips-finish.js), and the page around E (clips-post.js),
   whose content is the one post sheet's tall layout (css/post-sheet.css). See
   docs/projects/content-engine/BUILD.md §5.

   ⚠️ THE APPROVED ARTEFACT IS THE SPEC: docs/projects/content-engine/virals-research/index.html,
   units B, D and E. The sizes, radii and colours below are its own, on the app's tokens
   (design-tokens.css), so a screenshot of the build sits beside the artefact and matches.
   Where the twelve audience rules ask for more than the drawing shows (48px targets, a word on
   every icon) the target grows and the look does not change.

   .clf-* ONLY. The Speak control (voice-input.js) and the video facade (video-embed-runtime.js)
   are other files' markup, styled here only inside a .clf- parent. voice-input.js injects its own
   sheet AFTER this one, so those rules carry an extra class to win (as onboarding-mic.css does). */

/* ── The page layer ─────────────────────────────────────────────────────── */
html.clf-open, html.clf-open body { overflow: hidden; }
/* ⚠️ HELP STEPS OFF EVERY CLIPS FULL SCREEN (dev8 walk-through, 10 Oct: at 390 its 44px button
   sat on the right end of "Yes, I'll film this"). The way chat widgets leave a full-screen modal,
   and support-widget.js's own convention for full-screen rooms (fm-room-open, upsell-open):
   B, D and E (clf-open), the recorder (clf-rec), setup J1/J2 (clf-setup-open) and the post report
   G (clf-report-open). Each screen takes its class off as it closes, and Help is back. */
html.clf-open .sw-launch, html.clf-open .sw-nudge,
html.clf-rec .sw-launch, html.clf-rec .sw-nudge,
html.clf-setup-open .sw-launch, html.clf-setup-open .sw-nudge,
html.clf-report-open .sw-launch, html.clf-report-open .sw-nudge { display: none !important; }
/* ⚠️ AND THE ACCOUNT MANAGER'S TAB STEPS OFF B, D AND E AT 1100px AND UNDER (acceptance, 11 Oct:
   at 390 the folded tab lay across B's script, D's checklist and E's words card). It is the switch
   the upsell flow uses for its own full screen (upsell-flow.js, `body.upsell-open #beta-toolbar`),
   keyed on this file's own mark: beta-toolbar.js styles the bar inline, and `!important` in a
   stylesheet beats an inline declaration that has none. Wider than 1100px the rail sits open in the
   margin beside the 520px column, covers nothing, and stays: it is how a coach reaches a person.
   clf-open comes off as the screen closes (clips-read.js close()), and the tab is back. */
@media (max-width: 1100px) {
  html.clf-open #beta-toolbar { display: none !important; }
}
.clf-screen {
  position: fixed; inset: 0; z-index: 3900; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg); color: var(--text);
  font: 16px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.clf-screen:focus { outline: none; }
.clf-screen * { box-sizing: border-box; }
.clf-col { max-width: 520px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.clf-main { flex: 1 0 auto; padding: 0 20px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.clf-foot {
  position: sticky; bottom: 0; z-index: 2; display: grid; gap: 9px;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 82%, rgba(246, 244, 238, 0));
}
.clf-foot.clf-foot-card { background: none; }
@media (min-width: 700px) {
  .clf-col { padding-top: 18px; }
  .clf-foot { padding-bottom: 28px; }
}

/* The bar: Finish later / Back · progress · 1 of 3 */
.clf-bar {
  height: 54px; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; padding: 0 20px; font: 600 15px "Inter", system-ui, sans-serif; color: var(--text-2);
}
.clf-lk {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 10px 0 0;
  border: 0; background: none; color: var(--text-2); font: inherit; cursor: pointer;
}
.clf-lk:hover { color: var(--text); }
.clf-lk:focus-visible, .clf-btn:focus-visible, .clf-look:focus-visible,
.clf-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clf-bar-mid { justify-self: center; display: flex; align-items: center; }
.clf-bar-end { justify-self: end; }
.clf-prog { display: flex; gap: 6px; align-items: center; }
.clf-prog i { display: block; width: 30px; height: 6px; border-radius: 3px; background: var(--border); }
.clf-prog i.on { background: var(--accent); }
.clf-cnt { font: 600 13px "JetBrains Mono", ui-monospace, monospace; color: var(--text-3); }
.clf-eb {
  font: 600 11.5px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .15em;
  text-transform: uppercase; color: var(--text-3);
}

/* Shared pieces */
.clf-i { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; }
.clf-net { width: 26px; height: 26px; flex: none; }
.clf-maya { width: 22px; height: 22px; flex: none; }
.clf-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.clf-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.clf-est { display: inline-flex; align-items: center; gap: 5px; }
.clf-mute { color: var(--text-3); }
.clf-bx {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font: 600 13px "Inter", system-ui, sans-serif; white-space: nowrap; border: 0;
}
.clf-bx-g { background: var(--good-soft); color: var(--good); }
.clf-link {
  border: 0; background: none; padding: 6px 2px; margin: -6px 0; color: var(--accent-deep);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.clf-link:hover { text-decoration: underline; }
.clf-h { font: 700 27px/1.12 "Bricolage Grotesque", Georgia, serif; letter-spacing: -.02em; margin: 0; color: var(--text); }

.clf-btn {
  min-height: 54px; width: 100%; border-radius: 12px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 17px "Inter", system-ui, sans-serif; padding: 0 18px; text-align: center;
}
.clf-btn-p { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px rgba(106, 76, 241, .55); }
.clf-btn-p:hover { background: var(--accent-deep); }
.clf-btn-s { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); }
.clf-btn-s:hover { border-color: var(--accent); color: var(--accent-deep); }
.clf-btn-t { background: none; color: var(--accent-deep); min-height: 48px; font-size: 15.5px; margin-top: -6px; }
.clf-btn-t:hover { text-decoration: underline; }
.clf-btn[disabled] { opacity: .55; cursor: default; }

.clf-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.clf-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .3; animation: clfDot 1.2s infinite; }
.clf-dots i:nth-child(2) { animation-delay: .2s; }
.clf-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes clfDot { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }

.clf-skel { padding: 16px; display: grid; gap: 10px; }
.clf-skel i { display: block; height: 14px; border-radius: 7px; background: var(--surface-3); animation: clfPulse 1.4s ease-in-out infinite; }
@keyframes clfPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.clf-note { padding: 16px; display: grid; gap: 12px; font-size: 16px; color: var(--text-2); }
.clf-note p { margin: 0; }
.clf-note-t { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .clf-dots i, .clf-skel i, .clf-script.is-new { animation: none; }
}

/* ══ B · read and approve ══════════════════════════════════════════════ */
.clf-why { padding: 10px; display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; }
.clf-why-th {
  position: relative; display: block; height: 100px; border-radius: 10px; overflow: hidden;
  background: #2a2c3a center / cover no-repeat;
}
.clf-playb {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; background: rgba(255, 255, 255, .88); display: grid; place-items: center;
  color: #0f1020; font-size: 12px;
}
.clf-playb .clf-i { margin-left: 2px; }
.clf-why-tx { display: grid; gap: 5px; font-size: 14px; line-height: 1.3; min-width: 0; }
.clf-why-tx .clf-eb { font-size: 10.5px; }
.clf-why-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.clf-why-row .clf-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; margin: -12px 0; }
.clf-why-idea { display: grid; gap: 6px; padding: 14px 16px; grid-template-columns: none; }
.clf-why-idea-t { font-size: 16px; color: var(--text); font-weight: 600; }

.clf-script { position: relative; padding: 16px 16px 18px; display: grid; gap: 12px; }
.clf-hook {
  font: 700 22px/1.22 "Bricolage Grotesque", Georgia, serif; letter-spacing: -.01em; color: var(--text);
  background: var(--accent-softer); border-radius: 10px; padding: 8px 10px; margin: -4px -6px 0;
}
.clf-line { font-size: 17px; line-height: 1.5; margin: 0; color: var(--text); }
.clf-script.is-new { animation: clfNew 1.2s ease-out; }
@keyframes clfNew { 0% { box-shadow: 0 0 0 3px var(--accent-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Maya at work: the card dims and says so, the coach's words stay where they are. */
.clf-working {
  display: none; position: absolute; inset: 0; border-radius: 18px; z-index: 3;
  background: rgba(255, 255, 255, .78); align-items: center; justify-content: center; gap: 6px;
  font: 600 16px "Inter", system-ui, sans-serif; color: var(--accent-deep);
}
.clf-script.is-working .clf-working { display: flex; }
.clf-working-pill {
  display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--accent-soft);
  border-radius: 999px; padding: 10px 16px; box-shadow: 0 8px 22px -10px rgba(74, 50, 184, .45);
}
.clf-ask-go[disabled], .clf-ask-in[disabled] { opacity: .5; cursor: default; }

/* The words drawn over the video: quiet, under the script, each a tap to change. */
.clf-onscreen { padding: 12px 14px; display: grid; gap: 2px; }
.clf-onscreen .clf-eb { font-size: 10.5px; margin-bottom: 4px; }
.clf-os-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; text-align: left;
  min-height: 44px; padding: 8px 0; border: 0; border-top: 1px solid var(--border-soft); background: none;
  font: 15px/1.4 "Inter", system-ui, sans-serif; color: var(--text); width: 100%;
}
.clf-os-row:first-of-type { border-top: 0; }
button.clf-os-row { cursor: pointer; }
.clf-os-k { color: var(--text-3); font-size: 14px; white-space: nowrap; }
.clf-os-v { min-width: 0; }
.clf-os-edit { color: var(--accent-deep); font-weight: 600; font-size: 14px; }
button.clf-os-row:hover .clf-os-edit { text-decoration: underline; }

/* The story gap: a dashed amber card that becomes their sentence once filled. */
.clf-story {
  border: 2px dashed #e2b765; background: var(--warn-soft); border-radius: 12px; padding: 10px 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #7a4b07;
}
.clf-story-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.clf-story-t { font-weight: 700; font-size: 15px; line-height: 1.35; }
.clf-story-yours { display: none; font: 600 11px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a560a; }
/* 16px in the box itself, because iPhone zooms the page into any field set smaller; only the
   hint is drawn at the artefact's 13.5px. */
.clf-story-ta {
  width: 100%; resize: none; overflow: hidden; border: 0; outline: 0; background: transparent; padding: 0; margin: 0;
  font: 400 16px/1.4 "Inter", system-ui, sans-serif; color: var(--text); min-height: 20px;
}
.clf-story-ta::placeholder { color: #8a6430; opacity: 1; font-size: 13.5px; }
.clf-story-acts { display: none; align-items: center; gap: 12px; margin-top: 4px; }
.clf-story-state { font-size: 13px; color: #8a560a; }
.clf-story-clear {
  border: 0; background: none; color: #8a560a; font: 600 14px "Inter", system-ui, sans-serif;
  text-decoration: underline; cursor: pointer; padding: 10px 0; margin: -10px 0;
}
/* Filled, it is their sentence at full width, with Speak and Clear on a row under it. */
.clf-story.is-filled {
  border-style: solid; border-color: #ecd3a1; background: #fdf7ea;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center;
}
.clf-story.is-filled .clf-story-tx { display: contents; }
.clf-story.is-filled .clf-story-yours, .clf-story.is-filled .clf-story-ta { grid-column: 1 / -1; }
.clf-story.is-filled .clf-story-mic { grid-column: 1; grid-row: 4; }
.clf-story.is-filled .clf-story-acts { grid-column: 2; grid-row: 4; margin: 0; }
.clf-story.is-filled .clf-story-mic .vi-row { flex-direction: row; }
.clf-story.is-filled .clf-story-t { display: none; }
.clf-story.is-filled .clf-story-yours { display: block; }
.clf-story.is-filled .clf-story-ta { font-size: 17px; line-height: 1.5; color: var(--text); }
.clf-story.is-filled .clf-story-acts { display: flex; }
.clf-story.is-locked { border-style: solid; }
.clf-story-mic { flex: none; }

/* Speak It in the story card: the artefact's round mic, with its word. */
.clf-story-mic .vi-row { margin: 0; flex-direction: column; align-items: center; gap: 4px; flex-wrap: nowrap; }
.clf-story-mic .vi-row .vi-btn {
  min-height: 46px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #ecd3a1;
  color: #8a560a; font: 600 15px "Inter", system-ui, sans-serif; gap: 6px;
}
.clf-story-mic .vi-row .vi-status { font-size: 12.5px; color: #8a560a; text-align: center; max-width: 110px; }
.clf-story-mic .vi-row .vi-undo, .clf-story-mic .vi-row .vi-recover, .clf-story-mic .vi-row .vi-drop { font-size: 13px; color: #8a560a; }

/* The mic, drawn the same way onboarding-mic.css draws it, in the two boxes on this screen. */
.clf-story-mic .vi-row .vi-btn:not([data-state="rec"]) .vi-dot,
.clf-ask .vi-row .vi-btn:not([data-state="rec"]) .vi-dot {
  width: 18px; height: 18px; border-radius: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.clf-story-mic .vi-row .vi-btn[data-state="rec"],
.clf-ask .vi-row .vi-btn[data-state="rec"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* "Tell Maya what to change…": one line with Maya, Speak It and, once there are words, Send.
   The Speak row's status and undo wrap onto a second line inside the bar rather than covering. */
.clf-ask {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 56px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 5px 5px 5px 12px;
}
.clf-ask:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.clf-ask-in {
  flex: 1; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; padding: 0;
  font: 400 16px "Inter", system-ui, sans-serif; color: var(--text);
}
.clf-ask-in::placeholder { color: var(--text-3); }
/* The bar wears the focus ring (above), so the box inside it does not draw a second one. */
.clf-ask .clf-ask-in:focus-visible, .clf-story .clf-story-ta:focus-visible { outline: 0; }
.clf-story:focus-within { box-shadow: 0 0 0 3px rgba(226, 183, 101, .35); }
.clf-ask-mic, .clf-ask .vi-row { display: contents; }
.clf-ask .vi-row .vi-btn {
  min-height: 48px; padding: 0 10px; border-radius: 10px; background: var(--surface-3); border: 0;
  color: var(--text); font: 600 15px "Inter", system-ui, sans-serif; gap: 6px;
}
.clf-ask .vi-status:empty { display: none; }
.clf-ask .vi-status, .clf-ask .vi-undo, .clf-ask .vi-recover, .clf-ask .vi-drop { order: 9; font-size: 13.5px; }
.clf-ask .vi-status { flex-basis: 100%; padding: 0 0 4px; }
.clf-ask-go {
  display: none; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 0;
  background: var(--accent); color: #fff; font: 600 15px "Inter", system-ui, sans-serif; cursor: pointer;
}
.clf-ask.has-text .clf-ask-go { display: inline-flex; }
.clf-ask.has-text .vi-btn:not([data-state="rec"]):not([data-state="busy"]) { display: none; }

.clf-done-chip {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 12px; border-radius: 999px;
  background: var(--good-soft); color: var(--good); font: 600 14px "Inter", system-ui, sans-serif;
}

/* ══ D · pick a look, once ═════════════════════════════════════════════ */
.clf-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.clf-look {
  display: grid; gap: 6px; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 14px "Inter", system-ui, sans-serif; color: var(--text-2); min-width: 0;
}
.clf-look[disabled] { cursor: default; }
.clf-look-vid {
  position: relative; display: block; width: 100%; aspect-ratio: 10 / 17; border-radius: 12px; overflow: hidden;
  outline: 1px solid var(--border);
  /* A neutral frame (head and shoulders) until the still of their own take arrives. */
  background:
    radial-gradient(circle at 50% 38%, #b9aa9c 0 16%, transparent 16.6%),
    radial-gradient(ellipse 46% 30% at 50% 88%, #8a7c72 0 98%, transparent 100%),
    linear-gradient(165deg, #5b5e74, #2c2e3e);
}
.clf-look-vid.has-face { background-size: cover; background-position: center; background-repeat: no-repeat; }
.clf-look.is-on .clf-look-vid { outline: 3px solid var(--accent); outline-offset: 2px; }
.clf-look.is-on { color: var(--accent-deep); }
.clf-look:not([disabled]):hover .clf-look-vid { outline-color: var(--accent-2); }
.clf-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .45)); }
.clf-okb {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 14px;
}
.clf-look-name { line-height: 1.3; }
/* The three looks, drawn as the artefact draws them (the server's sample_css, when sent, is
   applied inline over these so the sample matches the render). */
/* Sized to the tile (cqw), so the words sit on the face as they will in the video at any
   width: the artefact's own proportions (13 and 11.5px on its 118px tile), and Bold on the
   artefact's three big lines, sized so the line breaks fall clear of the edge and so are the same
   at every width. The px sizes are the fallback where cqw is unknown. */
.clf-look-vid { container-type: inline-size; }
.clf-cap { position: absolute; left: 8%; right: 8%; bottom: 10%; text-align: center; }
.clf-cap-clean { font: 600 13px/1.25 "Inter", system-ui, sans-serif; font-size: clamp(12px, 11cqw, 22px); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
/* Bold is burned in Poppins ExtraBold (services/video/caption-styles.js clips_bold) and the app
   serves that very file (video-tools.css loads it the same way), so the sample is the real face.
   The family name is our own: a page-wide "Poppins" of one weight would be handed to every other
   weight of Poppins on the page. */
@font-face { font-family: "CLF Poppins"; src: url("/fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
.clf-cap-bold {
  font: 800 16px/1.05 "CLF Poppins", "Bricolage Grotesque", Georgia, serif; font-size: clamp(14px, 14.5cqw, 26px); color: #fff; text-transform: uppercase;
  letter-spacing: -.01em; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, .45);
}
.clf-cap-bold em { font-style: normal; color: #ffd84d; }
.clf-cap-boxed { line-height: 1.9; }
.clf-cap-boxed span {
  background: #fff; color: #111; font: 700 11.5px/1.6 "Inter", system-ui, sans-serif; font-size: clamp(11px, 9.7cqw, 19px); padding: 3px 8px;
  border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.clf-saved { margin: -2px 0 0; display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--good); }
/* B: earlier versions of a script, every one kept (the clips-idea artefact, step 12). */
.clf-vercard { padding: 4px 16px; display: grid; gap: 0; }
.clf-ver-toggle { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 600 15px "Inter", system-ui, sans-serif; color: var(--accent-deep); text-align: left; }
.clf-ver-toggle .clf-i, .clf-ver-toggle svg { width: 18px; height: 18px; }
.clf-ver-sum { margin: -6px 0 10px; font-size: 14.5px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.clf-vercard .clf-ver-open { width: auto; min-height: 44px; padding: 0 16px; justify-self: start; margin-bottom: 12px; }
@media (max-width: 480px) { .clf-vercard .clf-ver-open { width: 100%; } }
.clf-vers { display: grid; gap: 0; border-top: 1px solid var(--border-soft); }
.clf-ver { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.clf-ver:last-child { border-bottom: 0; }
.clf-ver-t { display: grid; gap: 3px; min-width: 0; font-size: 15px; color: var(--text); }
.clf-ver-t span { color: var(--text-2); font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.clf-ver .clf-btn { flex: none; min-height: 44px; width: auto; padding: 0 14px; }
@media (max-width: 480px) { .clf-ver { flex-direction: column; align-items: stretch; } .clf-ver .clf-btn { width: 100%; } }
/* D in a new look for one finished Clip (the clips-idea artefact, step 13). */
.clf-sub { margin: -4px 0 0; font-size: 16px; line-height: 1.45; color: var(--text-2); }

.clf-ticks { padding: 14px 16px; display: grid; gap: 10px; font-size: 15.5px; }
.clf-ticks .clf-eb { font-size: 10.5px; }
.clf-tick { display: flex; gap: 10px; align-items: center; }
.clf-tick .clf-i { color: var(--good); font-size: 18px; }

/* The progress card: a real bar, a real time, and how they will hear. */
.clf-prog-card { padding: 14px 16px; display: grid; gap: 9px; box-shadow: 0 12px 30px -12px rgba(20, 20, 40, .35); }
.clf-prog-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.clf-prog-top b { font-size: 15.5px; }
.clf-meter { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.clf-meter i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .6s ease; }
.clf-prog-card.is-done .clf-meter i { background: var(--good); }
/* A late render with no share to hold (render.late, first seen late): the bar says it is busy,
   not how far. */
.clf-meter.clf-meter-busy i { width: 35%; animation: clfBusy 1.8s ease-in-out infinite; }
@keyframes clfBusy { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .clf-meter.clf-meter-busy i { animation: none; width: 100%; opacity: .45; } }
.clf-prog-line { font-size: 14px; color: var(--text-2); }
.clf-prog-card .clf-btn { margin-top: 4px; }

/* E (ready to post) is the one post sheet's tall layout: css/post-sheet.css (.psh-*). */

/* ── E's Change link (and "Open to check" under the words): 48px targets on this screen (dev8
   walk-through: 38px). The post sheet's (post-sheet.css), sized up here only inside a Clips screen.
   The time chip's own target is grown past its paint in post-sheet.css: a painted 48px made it the
   tall pill the acceptance check found (11 Oct), where the artefact draws a small chip. */
.clf-screen .psh-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; margin: -12px 0; }