/* css/clips.css — Clips (Social → Clips): the Clips home (H, with the two doors), one search,
 * Your videos (F), Settings, the setup screen (J1) and one video's first day (G).
 * js/clips/clips-page.js, clips-search.js, clips-setup.js, clips-video.js. See
 * docs/projects/content-engine/BUILD.md §5a and §1d (the clips-idea artefact's doors, searches
 * and "Film it again", in the same tokens).
 *
 * ⚠️ THE SPEC IS THE APPROVED ARTEFACT, docs/projects/content-engine/virals-research/index.html.
 * Every size, radius and colour here is that file's, read from its <style> blocks (the
 * `.wk`, `.track`, `.vt`, `.seg`, `.dchip`, `.tchip`, `.spark`, `.mini`, `.nrow`, `.foot`
 * rules), renamed into .clp-* and pointed at the app's own tokens (css/design-tokens.css,
 * which carries the same values the artefact declares). Where a hex is left it is a brand
 * mark, the caption look's own colour, or a scrim over a video, never a UI colour.
 *
 * ⚠️ .clp-* ONLY, AND EVERY RULE IS SCOPED UNDER .clp. This sheet loads before
 * app-styles-v2.css, which redefines bare `.btn`, so nothing here uses the shell's `.btn`:
 * the artefact's buttons are bigger (54px, 17px) and are their own `.clp-btn`.
 * The pane root never gets a `display`, so the [hidden] attribute grow-social.js sets on it
 * keeps working.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */
.clp { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); font-size: 16px; line-height: 1.5; }
.clp *, .clp *::before, .clp *::after { box-sizing: border-box; }
.clp h2, .clp h3, .clp p { margin: 0; }
.clp .clp-i { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.125em; }
.clp .clp-b { width: 1em; height: 1em; flex: none; }
.clp .clp-eb { font: 500 11.5px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .15em; text-transform: uppercase; color: var(--text-3); }
.clp .clp-eb.clp-acc { color: var(--accent); }
.clp .clp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.clp [tabindex="-1"]:focus { outline: none; }
.clp .clp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Buttons: the artefact's .btn, .btn.p, .btn.s, .btn.t ────────────────── */
.clp .clp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border-radius: 12px; border: 0; cursor: pointer;
  font: 600 16px/1.2 "Inter", system-ui, sans-serif; text-decoration: none; text-align: center;
}
.clp .clp-btn-p { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px rgba(106,76,241,.55); }
.clp .clp-btn-p:hover { background: var(--accent-deep); color: #fff; }
.clp .clp-btn-s { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); }
.clp .clp-btn-s:hover { background: var(--surface-2); }
.clp .clp-btn-t { background: none; color: var(--accent-deep); padding: 0 10px; }
.clp .clp-btn-lg { min-height: 54px; font-size: 17px; width: 100%; }
.clp .clp-btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.clp .clp-btn:focus-visible, .clp button:focus-visible, .clp a:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.clp .clp-link { background: none; border: 0; padding: 0; min-height: 48px; cursor: pointer; color: var(--accent-deep); font: 600 15px "Inter", system-ui, sans-serif; display: inline-flex; align-items: center; gap: 6px; }

/* ── Pills: the artefact's .bx ─────────────────────────────────────────── */
.clp .clp-bx { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font: 600 13px/1.25 "Inter", system-ui, sans-serif; white-space: nowrap; }
.clp .clp-bx-g { background: var(--good-soft); color: var(--good); }
.clp .clp-bx-v { background: var(--accent-soft); color: var(--accent-deep); }
.clp .clp-bx-n { background: var(--surface-3); color: var(--text-2); }
.clp .clp-bx-w { background: var(--warn-soft); color: var(--warn); }
.clp .clp-bx-k { background: rgba(15,16,32,.72); color: #fff; }

/* ── The page head while the Clips tab is open (grow-social.js puts it there) ── */
.clp.clp-headact { flex: none; display: flex; align-items: flex-end; }
.clp.clp-headact .clp-btn { min-height: 48px; font-size: 15.5px; }
@media (max-width: 640px) {
  .page-head.clp-head-on { flex-wrap: wrap; row-gap: 14px; }
  .clp.clp-headact { flex-basis: 100%; }
  .clp.clp-headact .clp-btn { width: 100%; }
}
.clp.clp-headact:empty, .clp.clp-headact[hidden] { display: none; }

/* ── The top row: the quiet "Clips settings" link (H; no slot since 11 Oct) ── */
.clp .clp-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.clp .clp-quiet-link { color: var(--text-2); font-weight: 500; }
.clp .clp-quiet-link:hover { color: var(--accent-deep); }
.clp .clp-quiet-link .clp-i { color: var(--text-3); }
.clp .clp-bar-back { margin-bottom: 4px; }
.clp .clp-settitle { font: 700 22px/1.2 "Bricolage Grotesque", Georgia, serif; letter-spacing: -.01em; margin: 0 0 14px; }
.clp .clp-progress { margin-top: 18px; }

/* ── "Make a new Clip": the two doors (the clips-idea artefact, steps 1, 2, 8, 9) ──
   The artefact's `.door`, `.door.main`, `.box` and `.mic`: the idea door first and marked, its
   box on the page colour, each door's one button full width. */
.clp .clp-doors { display: grid; gap: 12px; margin-bottom: 24px; }
.clp .clp-doors-h { font: 700 22px/1.2 "Bricolage Grotesque", Georgia, serif; letter-spacing: -.01em; }
.clp .clp-allow { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--warn); font-size: 15px; line-height: 1.45; max-width: 760px; }
.clp .clp-allow .clp-i { margin-top: 4px; }
.clp .clp-allow.clp-allow-off { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.clp .clp-allow.clp-allow-off .clp-i { color: var(--text-3); }
.clp .clp-door-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 760px) { .clp .clp-door-row { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.clp .clp-door { padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.clp .clp-door-idea { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-softer); }
.clp .clp-door-top { display: flex; gap: 10px; align-items: center; }
.clp .clp-door-top h3 { font: 700 18px/1.25 "Bricolage Grotesque", Georgia, serif; }
.clp .clp-door-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 15px; flex: none; }
.clp .clp-door-p { font-size: 15px; color: var(--text-2); line-height: 1.45; flex: 1; }
.clp .clp-idea { display: block; width: 100%; min-height: 86px; resize: vertical; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg); color: var(--text); font: 16px/1.45 "Inter", system-ui, sans-serif; }
.clp .clp-idea::placeholder { color: var(--text-3); }
.clp .clp-idea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.clp .clp-idea:disabled { opacity: .7; }
.clp .clp-idea-row:empty, .clp .clp-idea-mic:empty { display: none; }
/* Speak, as the artefact's `.mic`: a quiet accent control under the box, not a second button.
   voice-input.js injects its own sheet after this one, so these carry the extra classes to win. */
.clp .clp-idea-mic .vi-row { margin: 0; gap: 8px; }
.clp .clp-idea-mic .vi-row .vi-btn { min-height: 44px; padding: 0 12px 0 8px; margin-left: -8px; background: none; border: 0; color: var(--accent-deep); font: 600 15px "Inter", system-ui, sans-serif; }
.clp .clp-idea-mic .vi-row .vi-btn:hover { background: var(--accent-softer); }
.clp .clp-idea-mic .vi-row .vi-btn[data-state="rec"] { background: var(--accent); color: #fff; border-radius: 999px; }
.clp .clp-idea-mic .vi-row .vi-status { font-size: 14px; color: var(--text-2); }
.clp .clp-idea-line { font-size: 14.5px; color: var(--text-2); line-height: 1.45; }
.clp .clp-door-go { width: 100%; min-height: 48px; margin-top: auto; }

/* The search Maya is on, on the home: one calm line and the way to watch it. */
.clp .clp-running .clp-prep-top { flex-wrap: wrap; }
.clp .clp-running .clp-prep-top > span { flex: 1; min-width: 200px; }
.clp .clp-running .clp-btn { min-height: 44px; }

/* ── Section heads on the home: Your Clips, Your searches ─────────────── */
.clp .clp-sec-head { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.clp .clp-sec-head h3 { font: 700 19px "Bricolage Grotesque", Georgia, serif; }
.clp .clp-sec-n { font-size: 15px; color: var(--text-2); flex: 1; }
.clp .clp-sec-head .clp-link { margin-left: auto; }
/* At a phone's width the counts take their own line, under "Your Clips" and its link. */
@media (max-width: 640px) { .clp .clp-yours .clp-sec-head .clp-sec-n { order: 3; flex-basis: 100%; margin-top: -10px; } }
.clp .clp-yours { margin-bottom: 4px; }
.clp .clp-again-link { min-height: 44px; justify-self: center; font-size: 15px; color: var(--text-2); font-weight: 500; }
.clp .clp-again-link:hover { color: var(--accent-deep); }
.clp .clp-wk-act { display: grid; gap: 10px; }
.clp .clp-result { justify-self: start; }

/* Your searches (step 10): newest first, one row each, the whole row opens it. */
.clp .clp-searches { margin-top: 26px; }
.clp .clp-slist { display: grid; padding: 4px 0; }
.clp .clp-srow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 8px 16px; background: none; border: 0; border-top: 1px solid var(--border); text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.clp .clp-srow:first-child { border-top: 0; }
.clp .clp-srow:hover { background: var(--surface-2); }
.clp .clp-srow:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.clp .clp-srow-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-softer); color: var(--accent-deep); font-size: 16px; }
.clp .clp-srow-t { display: grid; gap: 2px; min-width: 0; }
.clp .clp-srow-t b { font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clp .clp-srow-t small { font-size: 14px; color: var(--text-2); }
.clp .clp-srow-go { color: var(--text-3); }

/* ── One search (steps 3, 4, 11) ──────────────────────────────────────── */
.clp .clp-search { display: grid; gap: 12px; max-width: 760px; }
.clp .clp-search > .clp-eb { margin-top: 6px; }
.clp .clp-search .clp-search-h { margin: 0; overflow-wrap: anywhere; }
.clp .clp-search-idea { font-size: 16px; color: var(--text-2); line-height: 1.45; margin-top: -6px; overflow-wrap: anywhere; }
.clp .clp-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; }
.clp .clp-steps-list li { display: flex; gap: 10px; align-items: flex-start; }
.clp .clp-steps-list li .clp-i { margin-top: 4px; color: var(--accent); }
.clp .clp-steps-list li span { min-width: 0; overflow-wrap: anywhere; }
.clp .clp-looking .clp-note { font-size: 14px; }
.clp .clp-opts-list { display: grid; gap: 10px; }
.clp .clp-opt-row { padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; }
@media (max-width: 640px) { .clp .clp-opt-row { grid-template-columns: minmax(0, 1fr); } }
.clp .clp-opt-t { display: grid; gap: 3px; min-width: 0; }
.clp .clp-opt-t b { font: 700 17px/1.3 "Bricolage Grotesque", Georgia, serif; overflow-wrap: anywhere; }
.clp .clp-opt-t small { font-size: 14px; color: var(--text-2); }
.clp .clp-opt-a { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .clp .clp-opt-a { justify-content: flex-start; } .clp .clp-opt-a .clp-btn { flex: 1; } }
.clp .clp-opt-a .clp-btn { min-height: 44px; }
.clp .clp-oq { display: inline-flex; gap: 6px; align-items: center; font-size: 14.5px; color: var(--text-2); }
.clp .clp-opt-row.clp-swapped { background: var(--surface-2); border-style: dashed; }
.clp .clp-opt-row.clp-swapped .clp-opt-t b { color: var(--text-2); }
.clp .clp-search-foot { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 4px; }
.clp .clp-search-foot .clp-btn { min-height: 48px; }
.clp .clp-search-foot .clp-note { font-size: 14px; }

/* Step 13: film one again. */
.clp .clp-again { padding: 20px; display: grid; gap: 12px; max-width: 640px; margin-top: 6px; }
.clp .clp-again .clp-settitle { margin: 0; }
.clp .clp-again p { font-size: 16px; color: var(--text-2); line-height: 1.45; }
.clp .clp-again-go { display: flex; gap: 10px; flex-wrap: wrap; }
.clp .clp-again-go .clp-btn { min-height: 48px; }
@media (max-width: 640px) { .clp .clp-again-go .clp-btn { width: 100%; } }

/* ── Your Clips: one card each (H's `.wk`) ────────────────────────────── */
.clp .clp-week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .clp .clp-week { grid-template-columns: minmax(0, 1fr); } }
.clp .clp-wk { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; display: grid; gap: 14px; align-content: start; grid-template-rows: auto 1fr auto auto; }
.clp .clp-wtop { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.clp .clp-wtop > div { display: grid; gap: 4px; font-size: 15px; justify-items: start; min-width: 0; }
.clp .clp-wtop b { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clp .clp-wtop .clp-bx { font-size: 12.5px; padding: 3px 8px; }
.clp .clp-wtop .clp-eb { font-size: 10.5px; }
.clp .clp-th2 { width: 52px; height: 92px; border-radius: 9px; background: var(--surface-3) center/cover no-repeat; display: grid; place-items: center; color: var(--text-3); font-size: 20px; }
.clp .clp-hook { font: 700 19px/1.25 "Bricolage Grotesque", Georgia, serif; letter-spacing: -.01em; min-height: 48px; }
.clp .clp-track { display: flex; align-items: center; gap: 6px; font: 600 13.5px "Inter", system-ui, sans-serif; color: var(--text-3); }
.clp .clp-track i { flex: 1; height: 2px; background: var(--border); min-width: 8px; }
.clp .clp-track span { display: inline-flex; gap: 4px; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--surface-3); }
.clp .clp-track span.clp-done { background: var(--good-soft); color: var(--good); }
.clp .clp-track span.clp-now { background: var(--accent); color: #fff; }
.clp .clp-wk .clp-btn { width: 100%; min-height: 48px; font-size: 15.5px; }
.clp .clp-quiet { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--text-2); font-size: 15px; text-align: center; }
.clp .clp-quiet .clp-i { color: var(--accent); }

/* Preparing: a calm card (the search Maya is on, "Maya looks"). */
.clp .clp-prep { padding: 20px; display: grid; gap: 14px; margin-bottom: 16px; }
.clp .clp-prep-top { display: flex; gap: 12px; align-items: center; font-size: 16px; line-height: 1.4; }
.clp .clp-prep-top b { font-weight: 600; }
.clp .clp-meter { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.clp .clp-meter i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width 1s linear; }

/* Intro (not set up yet), off, failed: one card, one button. */
.clp .clp-intro { padding: 22px; display: grid; gap: 14px; justify-items: start; max-width: 720px; }
.clp .clp-intro h2 { font: 700 26px/1.15 "Bricolage Grotesque", Georgia, serif; letter-spacing: -.02em; }
.clp .clp-intro h2 .clp-ac { color: var(--accent); }
.clp .clp-intro p { font-size: 16px; color: var(--text-2); max-width: 56ch; }

/* ── A video poster with one badge (F's `.vt`; social-analytics.js draws them) ── */
.clp .clp-vt {
  position: relative; border-radius: 14px; aspect-ratio: 9 / 14; width: 100%;
  background: var(--text-2) center/cover no-repeat; overflow: hidden; border: 0; padding: 10px; margin: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; text-align: left; cursor: pointer; color: #fff;
}
.clp .clp-vt::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.65)); }
.clp .clp-vt > * { position: relative; }
.clp .clp-vt .clp-bx { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.clp .clp-vt b { color: #fff; font: 700 15px/1.2 "Bricolage Grotesque", Georgia, serif; }
.clp .clp-vt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── Your videos (F) ───────────────────────────────────────────────────── */
.clp .clp-f { display: grid; gap: 12px; }
.clp .clp-f-top { display: grid; gap: 12px; }
@media (min-width: 901px) { .clp .clp-f-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } }
.clp .clp-ringcard { padding: 14px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 15px; line-height: 1.4; }
.clp .clp-ringcard svg { width: 62px; height: 62px; }
.clp .clp-ringcard .clp-rt { font: 700 17px "Bricolage Grotesque", Georgia, serif; }
.clp .clp-ringcard .clp-rs { color: var(--text-2); }
.clp .clp-ringcard .clp-rs b { color: var(--text); font-weight: 600; }
.clp .clp-mile { display: flex; gap: 10px; align-items: center; background: var(--accent-soft); color: var(--accent-deep); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.clp .clp-mile .clp-i { font-size: 18px; }
.clp .clp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .clp .clp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1400px) { .clp .clp-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.clp .clp-more { display: flex; justify-content: center; margin-top: 6px; }
.clp .clp-empty { padding: 22px; display: grid; gap: 12px; justify-items: start; }
.clp .clp-empty p { color: var(--text-2); font-size: 16px; }

/* ── Settings ──────────────────────────────────────────────────────────── */
.clp .clp-set { display: grid; gap: 14px; max-width: 760px; }
.clp .clp-setcard { padding: 18px; display: grid; gap: 14px; }
.clp .clp-sethead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.clp .clp-sethead h3 { font: 700 18px/1.25 "Bricolage Grotesque", Georgia, serif; }
.clp .clp-saved { font-size: 14px; color: var(--good); font-weight: 600; display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.clp .clp-note { font-size: 15px; color: var(--text-2); line-height: 1.45; }
.clp .clp-opts { display: grid; grid-template-columns: repeat(var(--clp-n, 4), minmax(0, 1fr)); gap: 8px; max-width: 440px; }
.clp .clp-opt { min-height: 48px; padding: 0 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); font: 600 15px "Inter", system-ui, sans-serif; color: var(--text-2); cursor: pointer; }
.clp .clp-opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.clp .clp-optlbl { font-size: 15px; font-weight: 600; color: var(--text); }
.clp .clp-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 440px; }
.clp .clp-look { display: grid; gap: 6px; justify-items: center; font: 600 15px "Inter", system-ui, sans-serif; color: var(--text-2); background: none; border: 0; padding: 0; cursor: pointer; }
.clp .clp-look .clp-lookvid { position: relative; width: 100%; height: 150px; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, var(--accent-deep), var(--text)); outline: 1px solid var(--border); }
.clp .clp-look[aria-pressed="true"] { color: var(--accent-deep); }
.clp .clp-look[aria-pressed="true"] .clp-lookvid { outline: 3px solid var(--accent); outline-offset: 2px; }
.clp .clp-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; }

/* The three caption looks, as D draws them (`.cap.clean`, `.cap.bold`, `.cap.boxed`). */
.clp .clp-cap { position: absolute; left: 8%; right: 8%; bottom: 18px; text-align: center; }
.clp .clp-cap-clean { font: 600 13px/1.25 "Inter", system-ui, sans-serif; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.clp .clp-cap-bold { font: 800 16px/1.05 "Bricolage Grotesque", Georgia, serif; color: #fff; text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.45); }
.clp .clp-cap-bold em, .clp .clp-capx-bold em { font-style: normal; color: #ffd84d; }
.clp .clp-cap-boxed { line-height: 1.9; }
.clp .clp-cap-boxed span { background: #fff; color: #111; font: 700 11.5px/1.6 "Inter", system-ui, sans-serif; padding: 3px 8px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* A switch row: the whole row is the button (48px), the knob only shows the state. */
.clp .clp-switchrow { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 0; background: none; border: 0; cursor: pointer; font: 500 16px "Inter", system-ui, sans-serif; color: var(--text); text-align: left; }
.clp .clp-toggle { width: 46px; height: 28px; border-radius: 14px; background: var(--border-strong); position: relative; flex: none; transition: background .15s; }
.clp .clp-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.clp [aria-checked="true"] .clp-toggle { background: var(--accent); }
.clp [aria-checked="true"] .clp-toggle::after { left: 21px; }

/* ── The research networks (J1 and Settings): one row of five chips ─────── */
.clp .clp-nets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.clp .clp-net { position: relative; min-height: 66px; padding: 9px 4px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); display: grid; justify-items: center; align-content: center; gap: 5px; cursor: pointer; font: 600 13.5px/1.2 "Inter", system-ui, sans-serif; color: var(--text-2); }
.clp .clp-net .clp-b { width: 24px; height: 24px; }
.clp .clp-net[aria-pressed="true"] { border: 2px solid var(--accent); padding: 8px 3px 7px; background: var(--accent-softer); color: var(--accent-deep); }
/* An unpicked network keeps its logo as published (its guidelines: never recoloured or faded);
   the chip's own border and the missing tick say it is off. */
.clp .clp-net .clp-tick { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 11px; }
.clp .clp-net[aria-pressed="false"] .clp-tick { display: none; }
/* X is researched from the business's credit (ROUND-2 item 3): its chip says so, in words. */
.clp .clp-net .clp-net-cr { white-space: nowrap; font: 600 11.5px/1.1 "Inter", system-ui, sans-serif; color: var(--accent-deep); background: var(--accent-soft); border-radius: 999px; padding: 2px 7px; }
.clp .clp-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.clp .clp-credit > .clp-i { flex: none; width: 18px; height: 18px; color: var(--accent-deep); }
.clp .clp-credit > span { flex: 1 1 220px; }
.clp .clp-credit .clp-btn { min-height: 44px; }
.clp .clp-paused { margin-bottom: 14px; padding: 12px 14px 12px 16px; }
.clp .clp-paused .clp-credit { margin: 0; }
/* Settings at a phone's width: the card keeps the Account manager's edge (--am-room) and its own
   padding, so four in a row were about 70px each and "Instagram" and "Facebook" ran edge to edge
   (acceptance, 11 Oct). Two by two, the logo beside the name, the way E draws four networks on a
   phone. The name is clear of the tick. J1 keeps its one row: a full screen, with the width for it. */
@media (max-width: 480px) {
  .clp .clp-set .clp-nets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clp .clp-set .clp-net {
    min-height: 52px; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px;
    padding: 8px 30px 8px 12px; font-size: 14px; text-align: left;
  }
  .clp .clp-set .clp-net[aria-pressed="true"] { padding: 7px 29px 7px 11px; }
  .clp .clp-set .clp-net .clp-tick { top: 50%; margin-top: -9px; right: 8px; }
}
/* J1 at a phone's width, since X joined (ROUND-2 item 3): five in a row are under 70px each, so
   three and two. Settings keeps its two by two above. */
@media (max-width: 480px) {
  .clp.clp-setup .clp-nets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Maya's mark: the same disc and letter as every other Maya surface ───── */
.clp .clp-maya { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: #fff; font: 700 14px "Bricolage Grotesque", Georgia, serif; background: linear-gradient(135deg, var(--salmon), var(--rose) 55%, var(--plum)); }
.clp .clp-maya svg { width: 72%; height: 72%; display: block; }

/* ══ The full-screen screens: J1, J2 and G ══════════════════════════════════
   One thing per screen, as the artefact draws them on a phone: no app chrome, a bar
   with the way out, the content, and the button pinned at the foot. On a laptop the
   same column sits in the middle of the screen. Above the menu (1200) and below the
   house dialogs (4000), so the socials gate and App.dialog open over it. */
.clp.clp-screen { position: fixed; inset: 0; z-index: 1500; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.clp .clp-screen-in { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.clp .clp-wbar { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 20px 0; font: 600 15px "Inter", system-ui, sans-serif; color: var(--text-2); }
.clp .clp-lk { display: inline-flex; gap: 6px; align-items: center; min-height: 48px; padding: 0 6px; margin-left: -6px; background: none; border: 0; cursor: pointer; font: 600 15px "Inter", system-ui, sans-serif; color: var(--text-2); }
.clp .clp-lk:hover { color: var(--text); }
.clp .clp-pad { padding: 0 20px; display: grid; gap: 14px; align-content: start; }
.clp .clp-pad-g { gap: 12px; }
.clp .clp-wbar-gap { width: 78px; }
.clp .clp-foot { position: sticky; bottom: 0; margin-top: auto; padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 82%, transparent); display: grid; gap: 10px; z-index: 2; }
.clp .clp-fn { display: flex; justify-content: center; align-items: center; gap: 7px; font-size: 14px; color: var(--text-3); text-align: center; }
.clp .clp-h { font: 700 29px/1.12 "Bricolage Grotesque", Georgia, serif; letter-spacing: -.02em; }
.clp .clp-h .clp-ac { color: var(--accent); }
.clp .clp-sub { font-size: 16px; color: var(--text-2); line-height: 1.45; }
.clp .clp-msg { font-size: 15px; color: var(--danger); }

/* J1: the finished example beside the three steps. */
.clp .clp-ex { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 14px; align-items: center; }
.clp .clp-ex.clp-novid { grid-template-columns: minmax(0, 1fr); }
.clp .clp-ex-side { display: grid; gap: 12px; align-content: center; }
.clp .clp-ex-side .clp-bx { justify-self: start; }
.clp .clp-ex-desc { font-size: 15px; color: var(--text-2); line-height: 1.45; }
.clp .clp-steps { display: grid; gap: 9px; font-size: 15px; }
.clp .clp-ex.clp-novid .clp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clp .clp-step { display: flex; gap: 8px; align-items: center; }
.clp .clp-ex.clp-novid .clp-step { flex-direction: column; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 6px; }
.clp .clp-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 15px; flex: none; }
.clp .clp-c1 { background: linear-gradient(140deg, var(--accent-2), var(--accent)); }
.clp .clp-c2 { background: linear-gradient(140deg, var(--plum), var(--accent)); }
.clp .clp-c3 { background: linear-gradient(140deg, var(--salmon), var(--rose)); }
.clp .clp-vid { position: relative; height: 330px; border-radius: 16px; overflow: hidden; background: var(--text) center/cover no-repeat; }
.clp .clp-vid .video-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: transparent center/cover no-repeat; }
.clp .clp-vid .video-player { position: absolute; inset: 0; }
.clp .clp-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.45)); pointer-events: none; }
.clp .clp-playb { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(255,255,255,.88); display: grid; place-items: center; color: var(--text); font-size: 22px; pointer-events: none; }
.clp .clp-playb .clp-i { fill: currentColor; stroke: none; margin-left: 3px; }
.clp .clp-dur { position: absolute; right: 10px; top: 10px; font: 500 12px "JetBrains Mono", ui-monospace, monospace; color: #fff; background: rgba(0,0,0,.45); border-radius: 6px; padding: 2px 6px; pointer-events: none; }
.clp .clp-capx { position: absolute; left: 8%; right: 8%; bottom: 22px; text-align: center; pointer-events: none; }
.clp .clp-capx-bold { font: 800 23px/1.05 "Bricolage Grotesque", Georgia, serif; color: #fff; text-transform: uppercase; letter-spacing: -.01em; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.45); }
.clp .clp-mayacard { padding: 14px 16px; display: flex; gap: 12px; align-items: center; font-size: 15.5px; line-height: 1.4; }
.clp .clp-mayacard .clp-mt { color: var(--text-2); }
.clp .clp-netsblock { display: grid; gap: 8px; }
/* "Maya looks on Instagram, YouTube and Facebook. Change" (ROUND-2 item 9): the chips behind one line. */
.clp .clp-netsum { display: flex; align-items: center; gap: 8px; font-size: 15.5px; line-height: 1.4; color: var(--text-2); }
.clp .clp-netsum > span { flex: 1; min-width: 0; }
.clp .clp-netsum > .clp-i { color: var(--accent); }
.clp .clp-netsum .clp-change { flex: none; margin-left: 0; color: var(--accent-deep); }

/* G: one video's first day. */
.clp .clp-ghead { display: flex; gap: 12px; align-items: center; }
.clp .clp-gthumb { width: 54px; height: 96px; border-radius: 10px; background: var(--text-2) center/cover no-repeat; flex: none; }
.clp .clp-gtitle { font: 700 21px/1.15 "Bricolage Grotesque", Georgia, serif; }
.clp .clp-gsub { font-size: 14.5px; color: var(--text-2); }
.clp .clp-first { padding: 16px; display: grid; gap: 10px; }
.clp .clp-big { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.clp .clp-big b { font: 800 40px/1 "Bricolage Grotesque", Georgia, serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.clp .clp-big > span:not(.clp-bx) { color: var(--text-2); font-size: 16px; }
.clp .clp-big .clp-bx { margin-left: auto; }
.clp .clp-spark { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 84px; margin-top: 4px; }
.clp .clp-spark i { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; min-height: 2px; }
.clp .clp-spark i.clp-slot-empty { height: 0; min-height: 0; background: none; }
.clp .clp-usual { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--text-3); pointer-events: none; }
.clp .clp-usual span { position: absolute; right: 0; top: -20px; font: 500 11.5px "JetBrains Mono", ui-monospace, monospace; color: var(--text-3); background: var(--surface); padding: 0 3px; }
.clp .clp-axis { display: flex; justify-content: space-between; font: 500 11.5px "JetBrains Mono", ui-monospace, monospace; color: var(--text-3); }
.clp .clp-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.clp .clp-minis.clp-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clp .clp-minis.clp-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clp .clp-minis.clp-n1 { grid-template-columns: minmax(0, 1fr); }
.clp .clp-mini { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 6px; display: grid; justify-items: center; gap: 1px; }
.clp .clp-mini .clp-i { color: var(--text-3); font-size: 16px; }
.clp .clp-mini b { font: 800 19px "Bricolage Grotesque", Georgia, serif; font-variant-numeric: tabular-nums; }
.clp .clp-mini small { font-size: 13px; color: var(--text-2); }
.clp .clp-where { padding: 12px 14px; display: grid; gap: 4px; }
.clp .clp-nrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; border-radius: 10px; }
.clp a.clp-nrow:hover { background: var(--surface-2); }
.clp .clp-nrow .clp-b { width: 26px; height: 26px; }
.clp .clp-nrow b { font: 700 15px "Bricolage Grotesque", Georgia, serif; text-align: right; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 80px; }
.clp .clp-nrow b .clp-i { color: var(--text-3); font-size: 14px; }
.clp .clp-nrow b.clp-nfailed { color: var(--danger); font: 600 14.5px "Inter", system-ui, sans-serif; }
.clp .clp-nwhy { grid-column: 2 / -1; font-size: 14px; line-height: 1.4; color: var(--text-2); margin: -4px 0 6px; }
.clp .clp-nb { height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; display: block; }
.clp .clp-nb i { display: block; height: 100%; border-radius: 5px; }
.clp .clp-cmts { padding: 10px 10px 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.clp .clp-cmts > .clp-i { font-size: 20px; color: var(--accent); }
.clp .clp-cmts > span { flex: 1; }
.clp .clp-wait { padding: 16px; display: grid; gap: 6px; font-size: 15.5px; color: var(--text-2); }
.clp .clp-wait b { color: var(--text); }

/* Skeleton shimmer for the first paint of any Clips screen. */
.clp .clp-skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: clp-shimmer 1.4s infinite linear; border-radius: 10px; }
@keyframes clp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .clp .clp-skel { animation: none; } .clp .clp-meter i { transition: none; } }

/* The "New" mark on the Clips tab of the Social page (grow-social.js writeBarHtml). */
.clp-new { display: inline-flex; align-items: center; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 14px; vertical-align: 1px; }
button[aria-selected="true"] > .clp-new { background: #fff; color: var(--accent-deep); }