/* ══════════════════════════════════════════════════════════════════════
   css/review-canvas.css — the REVIEW CANVAS, as a component

   The screen Alex keeps holding up as the standard: page tabs across the
   top, the thing you are reviewing in the middle, Maya down the right with
   chips and a composer, a progress bar along the bottom. It was built for the
   website's "Review your copy" step and every one of its 194 rules was scoped
   to `#page-launch-review-copy`, so the course wizard could not wear it
   without growing a second copy.

   Alex, 2026-08-02, sending that screen: "you'll see the layout for the Word
   section is what we should be copying. Also the tabs at the top about
   Contact, Home, and Services, that design we should be using for each of the
   steps in our one." And the standing constraint: "we do not want to be
   rebuilding anything. You just want to be repurposing components that we
   already have."

   ── What changed, and the risk it carries ────────────────────────────────
   An id selector became a class one: (1,1,0) → (0,2,0). Anything elsewhere in
   the sheets that used to LOSE to `#page-launch-review-copy .rc-…` can now
   win. That is invisible in a diff and is a computed-style question, so
   tests/browser/review-canvas-css.browser.js renders the website's own markup
   against the stylesheets as they were before this move and as they are now,
   and diffs every property that decides what the screen looks like.

   The host must OPT IN by carrying `rc`. Forget it and the website's copy
   step loses its entire layout — the screen Alex is holding up as the
   standard. That is asserted too.
   ══════════════════════════════════════════════════════════════════════ */


/* page tabs */
/* A0r.3 — "Version history" on the reconcile screen. Deliberately quiet: it is
   a way back, not a thing to do, and it sits beside a heading whose primary
   action is Apply. A ghost button next to a primary one reads as the secondary
   choice without needing to say so. */
.rc .rc-histbtn {
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text-2, #4b5563);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.rc .rc-histbtn:hover { border-color: var(--accent, #6366f1); color: var(--text, #111827); }

.rc .rc-ptabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.rc .rc-ptab { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); border-radius: 11px; padding: 9px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rc .rc-ptab:hover { background: var(--surface-2); }
.rc .rc-ptab.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.rc .rc-ptab .tk { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", monospace; font-size: 10px; background: var(--surface-3); color: var(--text-3); }
.rc .rc-ptab.active .tk { background: rgba(255,255,255,0.18); color: #fff; }
.rc .rc-ptab.done .tk { background: var(--good); color: #fff; }
.rc .rc-ptab .tk svg { width: 11px; height: 11px; }
/* Not yet earned. Faded rather than removed, so the coach can see the shape of
   what is coming and how much is left — and it still answers when pressed,
   naming the page that has to be finished first. */
.rc .rc-ptab.locked { opacity: .48; }
.rc .rc-ptab.locked:hover { background: var(--surface); }
.rc .rc-ptab.locked .tk { background: transparent; color: var(--text-3); }

/* layout */
.rc .rc-grid { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 18px; align-items: start; }

/* preview */
.rc .rc-preview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.rc .rc-pvbar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); }
/* No window dots and no fake URL pill: this bar used to dress a plain-text
   list as a live page. It now says what the screen actually is. */
.rc .rc-pvbar .rc-pvwhat { font-size: 12px; font-weight: 600; color: var(--text-2); }
.rc .rc-pvbar .hint { font-size: 11.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.rc .rc-pvbar .hint svg { width: 13px; height: 13px; color: var(--accent); }

/* The copy canvas. NOT dressed as a page: the cream paper and serif headings
   that used to live here were an invented house style, and a screen that
   confidently shows one plausible typography while the template publishes
   another is what let a coach put a paragraph into an eyebrow slot. The
   surrounding card is neutral app chrome; the typography belongs to the pane,
   where it is the template's own. */
.rc .rc-canvas { position: relative; background: var(--surface-2); max-height: 74vh; overflow-y: auto; padding: 14px; }
.rc .rc-csec { position: relative; border-radius: 14px; padding: 14px; margin-bottom: 10px; cursor: pointer; border: 2px solid transparent; transition: border-color .15s, box-shadow .15s, background .15s; background: var(--surface); }
.rc .rc-csec:hover { box-shadow: 0 10px 30px -18px rgba(0,0,0,.28); }
.rc .rc-csec.sel { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 14px 36px -18px rgba(0,0,0,.3); }
.rc .rc-csec .rc-tagrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rc .rc-csec .rc-role { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-acc); font-weight: 500; }
/* A menu or footer this site still keeps per page, because the model could not
   take its chrome over. Quiet, but it must be there: the coach has to know the
   edit lands on this page and no other. */
.rc .rc-csec .rc-perpage { font-size: 10px; letter-spacing: 0.02em; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-radius: 999px; padding: 2px 8px; margin-left: 8px; white-space: nowrap; cursor: help; }
.rc .rc-csec .rc-state { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: "Inter", sans-serif; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.01em; }
.rc .rc-csec .rc-state.pending { background: var(--surface-3); color: var(--text-3); }
.rc .rc-csec .rc-state.edited { background: var(--accent-soft); color: var(--accent-deep); }
.rc .rc-csec .rc-state.approved { background: #dcefe2; color: #1c7a4a; }
.rc .rc-csec .rc-state svg { width: 11px; height: 11px; }
.rc .rc-csec.changed { animation: rc-flash 1.1s ease; }

/* The styled pane — one isolated document per section carrying the page's real
   published CSS. No border or background of our own: the section brings its own,
   and anything we added here would misrepresent it. Width is the column's own
   width, never scaled down, so a 12px eyebrow stays a readable 12px. */
.rc .rc-pane { display: block; width: 100%; border: 0; background: transparent; overflow: hidden; }

/* Fallback text — used only when the server could not render the page. Neutral
   app styling on purpose: heading vs body is real information (it IS a heading),
   but the serif/cream costume that implied "this is your page" is not. */
.rc .rc-chead { font-family: inherit; color: var(--text); font-weight: 600; line-height: 1.25; font-size: 17px; }
.rc .rc-cbody { font-family: inherit; color: var(--text-2); line-height: 1.55; margin-top: 8px; font-size: 14px; }
/* Inline manual editing — click straight into heading/body text. */
.rc .rc-editable { cursor: text; border-radius: 6px; padding: 2px 5px; margin-left: -5px; margin-right: -5px; outline: none; transition: box-shadow .12s, background .12s; }
.rc .rc-editable:hover { box-shadow: inset 0 0 0 1px var(--accent-soft); }
.rc .rc-editable:focus { box-shadow: inset 0 0 0 2px var(--accent); background: #fff; }
.rc .rc-editable.rc-saving { opacity: .55; pointer-events: none; }
/* .hero used to centre the card and inflate the heading to mimic a hero band.
   That is page-mimicry from a guessed role name, which is exactly the promise
   this screen must stop making. The real hero styling is in the pane. */

/* Maya refine panel — the component is assistant-panel.css; what is left here
   is PLACEMENT plus the two states that are this page's own. */
.rc .rc-maya { position: sticky; top: 16px; height: calc(74vh + 46px); }
.rc .rc-thread { flex: 1; overflow-y: auto; }
.rc .rc-approve { margin-top: 10px; }
/* Asking, not approving: we have just scrolled the coach to the section and the
   next press is the one that counts. Amber so it does not read as "done". */
.rc .rc-approve.is-arming { background: var(--warn, #b45309); }

/* finish bar */
.rc .rc-finish, .ccw .rc-finish { position: sticky; bottom: 14px; margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 50px -28px rgba(21,23,43,0.5); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rc .rc-pmeta, .ccw .rc-pmeta { display: flex; align-items: center; gap: 14px; }
.rc .rc-pcount, .ccw .rc-pcount { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; }
.rc .rc-pcount b, .ccw .rc-pcount b { color: var(--accent); }
.rc .rc-prog, .ccw .rc-prog { width: 180px; height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.rc .rc-prog i, .ccw .rc-prog i { display: block; height: 100%; background: var(--accent); border-radius: 4px; width: 0%; transition: width .4s; }
.rc .rc-actions, .ccw .rc-actions { display: flex; gap: 10px; align-items: center; }
.rc .rc-final, .ccw .rc-final { background: var(--accent); color: #fff; border: none; border-radius: 11px; padding: 12px 22px; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 10px 24px -10px rgba(106,76,241,0.6); cursor: pointer; }
.rc .rc-final:hover, .ccw .rc-final:hover { background: var(--accent-deep); }
.rc .rc-final[disabled], .ccw .rc-final[disabled] { opacity: 0.5; box-shadow: none; cursor: not-allowed; }
.rc .rc-final svg, .ccw .rc-final svg { width: 15px; height: 15px; }
.rc .rc-final.ready, .ccw .rc-final.ready { background: var(--good); box-shadow: 0 10px 24px -10px rgba(28,142,90,0.6); }

/* Per-item editable lines (headings, paragraphs, nav links, logo spans,
   testimonial lines). Each real text element is its own editable line, so the
   editable surface matches the saveable surface exactly. */
.rc .rc-citem { display: block; }
.rc .rc-citem + .rc-citem { margin-top: 6px; }
.rc .rc-k-link { font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 600; color: var(--accent); display: inline-block; }
.rc .rc-k-label { font-family: "Inter", sans-serif; font-size: 13px; color: var(--text-3); font-weight: 500; }
.rc .rc-csec.hero .rc-k-link { color: var(--accent); }

/* Live-site "Live" badge (published, unchanged). Edited/Draft reuse existing. */
.rc .rc-csec .rc-state.live { background: #dcefe2; color: #1c7a4a; }

/* Live-edit finish bar: an unpublished-changes message + Publish button. */
.rc .rc-finish.rc-live, .ccw .rc-finish.rc-live { justify-content: space-between; }
.rc .rc-pubmsg { font-family: "Inter", sans-serif; font-size: 13.5px; color: var(--s-ink2); line-height: 1.4; }
.rc .rc-pubmsg b { color: var(--s-ink); font-weight: 700; }

/* Tab "edited" dot (live-edit mode, replaces the approve counter). */
.rc .rc-ptab .rc-dot-edit { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle; }

.rc .rc-canvas-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; color: var(--text-3); font-size: 13.5px; gap: 14px; }
.rc .rc-canvas-loading .sp { width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ls-spin .9s linear infinite; }
@media (max-width: 1120px) {
  .rc .rc-grid { grid-template-columns: 1fr; }
  .rc .rc-maya { position: static; height: auto; max-height: 620px; }
  .rc .rc-canvas { max-height: none; }
}

@media (max-width: 760px) {
  .rc .rc-finish, .ccw .rc-finish { flex-direction: column; align-items: stretch; }
}
/* ⚠️ `display` beats `[hidden]`, so both need an explicit override.

   THE OPENING `/*` OF THIS COMMENT WAS MISSING (restored 2026-08-03). CSS has
   no way to know a stray line is prose: the parser read `. Without these two
   rules the …` as a selector and kept consuming until the next `{`, which
   swallowed the very rule the comment is about. So the two `[hidden]` rules
   below have never applied — the coach opened a chrome tab and Maya stayed on
   screen beside a menu she cannot edit, which is precisely the fault this
   comment was written to prevent. Caught while widening the finish-bar
   selectors, not by anything that was looking for it.

   Without these two rules the `hidden` attribute set when the coach opens a
   chrome tab does nothing. Caught in a real browser, not by reading the
   code. */
.rc .rc-grid[hidden],
.rc .rc-finish[hidden], .ccw .rc-finish[hidden] { display: none; }

/* ── The two whole-site tabs belong WITH the page tabs ────────────────────────
   Alex, 2026-07-31: "the top menu and footer are too far away… it shouldn't be
   above the chat where Maya is. It's like it's disjointed."

   `margin-left: auto` was the cause. With six page tabs the row genuinely does
   not fit on one line at 1440 with both app sidebars open (983px of tabs into a
   900px column), and the auto margin then threw the pair to the far right of
   the row, where they sat over Maya's panel and read as part of the chat rather
   than as two more places to go.

   So: no auto margin. The group follows the last page tab immediately, and when
   the row wraps it wraps as a whole and lands directly under the page tabs.
   It is drawn as one labelled pill group ("Whole site") rather than two loose
   tabs after a divider, because a wrapped divider is exactly what made the pair
   read as an unrelated second row. The two tabs are also made compact — no
   approve counter to leave room for — so the row fits on one line more often. */
.rc .rc-ptab-chromes {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 11px; border: 1px dashed var(--border-strong, #cbd0d6);
  border-radius: 14px; background: var(--surface-2);
}
.rc .rc-ptab-grouplbl { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.rc .rc-ptab-chrome { padding: 7px 12px; font-size: 13px; }
.rc .rc-ptab-chrome.active { background: var(--text); color: var(--bg); border-color: var(--text); }

.rc .rc-chrome { max-width: 820px; }
.rc .rc-chrome [hidden] { display: none !important; }
.rc .rc-chrome .scx-loading { padding: 50px 20px; color: var(--text-3); font-size: 13.5px; }
.rc .rc-chrome .scx-lede { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0 0 2px; max-width: 640px; }

.rc .rc-chrome .vltc-card { border: 1px solid var(--line, #e5e7eb); border-radius: 16px; background: var(--card, #fff); margin-top: 16px; overflow: hidden; }
.rc .rc-chrome .vltc-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.rc .rc-chrome .vltc-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft, rgba(106,76,241,.09)); color: var(--accent, #6a4cf1); display: flex; align-items: center; justify-content: center; }
.rc .rc-chrome .vltc-ic svg { width: 19px; height: 19px; }
.rc .rc-chrome .vltc-tl { flex: 1; min-width: 0; }
.rc .rc-chrome .vltc-tl .t { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.rc .rc-chrome .vltc-tl .s { font-size: 12.5px; color: var(--text-3, #8a8f98); margin-top: 2px; line-height: 1.45; }
.rc .rc-chrome .vltc-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.rc .rc-chrome .vltc-body { border-top: 1px solid var(--line, #eef0f4); padding: 16px 18px 18px; }

.rc .rc-chrome .vltc-move { border: 1px solid var(--line, #e5e7eb); background: transparent; border-radius: 8px; width: 26px; height: 26px; cursor: pointer; color: var(--text-3, #999); font-size: 12px; line-height: 1; }
.rc .rc-chrome .vltc-move:hover:not(:disabled) { color: var(--accent, #6a4cf1); border-color: var(--accent, #6a4cf1); }
.rc .rc-chrome .vltc-move:disabled { opacity: .35; cursor: default; }

.rc .rc-chrome .vltc-switch { position: relative; width: 40px; height: 23px; border-radius: 20px; background: #d7d9e0; cursor: pointer; transition: background .15s ease; border: 0; flex: none; }
.rc .rc-chrome .vltc-switch::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s ease; }
.rc .rc-chrome .vltc-switch.on { background: var(--accent, #6a4cf1); }
.rc .rc-chrome .vltc-switch.on::after { left: 19px; }

.rc .rc-chrome .vltc-pill { font-size: 11.5px; font-weight: 600; border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.rc .rc-chrome .vltc-pill.show { background: rgba(22,163,74,.1); color: #15803d; }
.rc .rc-chrome .vltc-pill.hidden { background: rgba(217,119,6,.1); color: #b45309; display: inline-block; }
.rc .rc-chrome .vltc-pill.off { background: rgba(0,0,0,.05); color: var(--text-3, #8a8f98); }

.rc .rc-chrome .vltc-fld label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3, #9aa0aa); margin-bottom: 5px; }
.rc .rc-chrome .vltc-fld input,
.rc .rc-chrome .vltc-fld select,
.rc .rc-chrome .vltc-fld textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 9px; font: inherit; font-size: 14px; background: var(--bg, #fff); color: var(--text, #151821); }
.rc .rc-chrome .vltc-fld input:focus,
.rc .rc-chrome .vltc-fld select:focus,
.rc .rc-chrome .vltc-fld textarea:focus { outline: none; border-color: var(--accent, #6a4cf1); }

.rc .rc-chrome .vltc-rows { margin-top: 14px; display: grid; gap: 10px; }
.rc .rc-chrome .vltc-row { border: 1px solid var(--line, #eef0f4); border-radius: 12px; padding: 12px; display: grid; gap: 8px; position: relative; }
.rc .rc-chrome .vltc-rowgrid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.rc .rc-chrome .vltc-rm { position: absolute; top: 8px; right: 8px; border: 0; background: transparent; color: var(--text-4, #c2c6cd); cursor: pointer; font-size: 15px; padding: 4px; line-height: 1; border-radius: 6px; }
.rc .rc-chrome .vltc-rm:hover { color: #dc2626; background: rgba(220,38,38,.06); }
.rc .rc-chrome .vltc-add { border: 1px dashed var(--line, #cbd0da); background: transparent; border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--text-2, #555); cursor: pointer; margin-top: 10px; font-family: inherit; }
.rc .rc-chrome .vltc-add:hover { border-color: var(--accent, #6a4cf1); color: var(--accent, #6a4cf1); }
.rc .rc-chrome .vltc-note { font-size: 12.5px; color: var(--text-3, #8a8f98); line-height: 1.5; margin-top: 10px; }

.rc .rc-chrome .vltc-opt { display: flex; gap: 10px; border: 1px solid var(--line, #e5e7eb); border-radius: 12px; padding: 12px 14px; cursor: pointer; margin-bottom: 8px; align-items: flex-start; }
.rc .rc-chrome .vltc-opt.on { border-color: var(--accent, #6a4cf1); background: var(--accent-soft, rgba(106,76,241,.05)); }
.rc .rc-chrome .vltc-opt input { margin-top: 3px; accent-color: var(--accent, #6a4cf1); }
.rc .rc-chrome .vltc-opt .ot { font-size: 14px; font-weight: 600; }

.rc .rc-chrome .vltc-bar { position: sticky; bottom: 0; margin-top: 22px; background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 14px; padding: 13px 16px; display: flex; align-items: center; gap: 14px; box-shadow: 0 -6px 24px rgba(16,20,28,.06); z-index: 5; }
.rc .rc-chrome .vltc-bar .sum { font-size: 13px; color: var(--text-2, #4b5563); flex: 1; min-width: 0; }
.rc .rc-chrome .vltc-bar .sum b { color: var(--text, #151821); }
.rc .rc-chrome .vltc-bar .save-hint { font-size: 12.5px; color: var(--text-3, #8a8f98); white-space: nowrap; }
.rc .rc-chrome .rb { background: var(--accent, #6a4cf1); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: filter .12s ease; }
.rc .rc-chrome .rb:hover { filter: brightness(1.07); }
.rc .rc-chrome .rb:disabled { opacity: .55; cursor: default; }

/* scx-* = shapes the Vault does not have. */
.rc .rc-chrome .scx-rowtop { display: flex; align-items: flex-end; gap: 10px; padding-right: 26px; }
.rc .rc-chrome .scx-grow { flex: 1; min-width: 0; }
.rc .rc-chrome .scx-pillwrap { flex: none; padding-bottom: 9px; }
.rc .rc-chrome .scx-rowfoot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.rc .rc-chrome .scx-spacer { flex: 1; }
.rc .rc-chrome .scx-tg { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2, #4b5563); }
.rc .rc-chrome .scx-sub { display: block; }
.rc .rc-chrome .scx-col { border-top: 1px solid var(--line, #eef0f4); padding-top: 14px; margin-top: 14px; }
.rc .rc-chrome .scx-col:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.rc .rc-chrome .scx-colhead { display: flex; align-items: flex-end; gap: 10px; position: relative; }
.rc .rc-chrome .vltc-rm.scx-colrm { position: static; margin-bottom: 6px; }
.rc .rc-chrome .scx-addcol { margin-top: 16px; }
.rc .rc-chrome .scx-empty { margin-top: 4px; }

/* A social row leads with the mark, so the coach sees the logo they picked
   rather than reading the word back to themselves. */
.rc .rc-chrome .scx-socgrid { display: flex; align-items: flex-end; gap: 12px; padding-right: 26px; }
.rc .rc-chrome .scx-socmark {
  flex: none; width: 40px; height: 40px; border-radius: 10px; margin-bottom: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2, #f6f7f9); border: 1px solid var(--line, #eef0f4);
  color: var(--text, #111827);
}
.rc .rc-chrome .scx-socmark svg { width: 22px; height: 22px; }
.rc .rc-chrome .scx-socmark.empty { border-style: dashed; color: var(--text-3, #9ca3af); }

/* Privacy and terms: no × and no destination control, so the row reads as a
   statement of what will be there rather than a form to fill in. */
.rc .rc-chrome .scx-fixed { padding-right: 0; }
.rc .rc-chrome .scx-fixnote { margin-top: 8px; }
.rc .rc-chrome .scx-lead { margin: 0 0 14px; }
@media (max-width: 640px) {
  .rc .rc-chrome .vltc-rowgrid { grid-template-columns: 1fr; }
  .rc .rc-chrome .scx-rowtop { flex-direction: column; align-items: stretch; padding-right: 26px; }
  .rc .rc-chrome .scx-pillwrap { padding-bottom: 0; }
}


/* ── Review Copy: organise-your-copy controls (delete + reorder, no AI) ─────── */
.rc .rc-citem-wrap { position: relative; }
.rc .rc-citem-wrap + .rc-citem-wrap { margin-top: 6px; }
.rc .rc-item-tools {
  position: absolute; top: 50%; right: -2px; transform: translateY(-50%);
  display: flex; gap: 2px; padding: 2px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border-strong, var(--border)); box-shadow: 0 2px 10px -3px rgba(0,0,0,.34);
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 3;
}
.rc .rc-citem-wrap:hover .rc-item-tools,
.rc .rc-item-tools:hover { opacity: 1; visibility: visible; }
/* Over a pane the toolbar is positioned from the parent against the scrolling
   canvas, so it keeps the app's own colours and stays legible over ANY section
   — including a dark band, where chrome inheriting the template's colours would
   disappear into the background. */
.rc .rc-item-tools.rc-floating { position: absolute; top: 0; right: 0; transform: none; }
.rc .rc-item-tools.rc-floating.on { opacity: 1; visibility: visible; }
.rc .rc-sectools { margin-left: 6px; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.rc .rc-csec:hover .rc-sectools,
.rc .rc-csec.sel .rc-sectools { opacity: 1; }
.rc .rc-tool {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-3); border-radius: 6px; cursor: pointer; padding: 0;
  transition: background .12s, color .12s;
}
.rc .rc-tool svg { width: 15px; height: 15px; }
.rc .rc-tool:hover { background: var(--surface-2); color: var(--text); }
.rc .rc-tool:disabled { opacity: .28; cursor: default; }
.rc .rc-tool:disabled:hover { background: transparent; color: var(--text-3); }
.rc .rc-tool-del:hover { background: #fdecec; color: #dc2626; }

/* ── Review Copy: version history button + modal ───────────────────────────── */
.rc .rc-pvbar .rc-hist-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-2);
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.rc .rc-pvbar .rc-hist-btn svg { width: 14px; height: 14px; }
.rc .rc-pvbar .rc-hist-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent-soft); }
.rc .rc-pvbar .rc-prev-btn { margin-left: auto; margin-right: 8px; }
.rc .rc-pvbar .rc-prev-btn + .rc-hist-btn { margin-left: 0; }

/* ── A menu or footer the SITE owns ────────────────────────────────────────
   Shown in place, because the coach should still see their menu where it
   sits, but with nothing on it that invites an edit: the next publish
   regenerates it from the model, so a change typed here would vanish without
   ever saying so. The note points at the tab that does own it. */
.rc .rc-csec.rc-owned { cursor: default; opacity: .92; background: var(--surface-2); }
.rc .rc-csec.rc-owned:hover { box-shadow: none; }
.rc .rc-ownednote { font-size: 12.5px; color: var(--text-3); margin: 2px 0 10px; line-height: 1.5; }
.rc .rc-ownedlink { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.rc .rc-ownedlink:hover { filter: brightness(1.1); }

/* The note under the canvas that says where the menu and footer went. Shown
   only on a site whose chrome the model owns — a site without one still lists
   its nav and footer as normal sections, because that editor is all it has. */
.rc .rc-chromenote {
  margin-top: 14px; padding: 13px 16px; border: 1px dashed var(--border); border-radius: 12px;
  background: var(--surface-2); font-size: 12.5px; line-height: 1.55; color: var(--text-3);
}
.rc .rc-canvas-empty {
  padding: 34px 20px; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--text-3);
}

/* ── The preview, mounted inline instead of in a modal ──────────────────────
   Same .rc-prev-* markup, same scaler maths, same in-frame guard. What changes
   here is only the frame around it: no backdrop, a fixed stage height, and it
   sticks to the top of the tab so it stays in view while the coach scrolls the
   fields below it (Alex, 2026-07-31: "as you scroll down the list of things to
   do, it should float at the top"). */
/* WHY THE TAB SCROLLS ITSELF. `position: sticky` sticks inside the nearest
   ancestor with a scrolling box, and #mainContent (shared app chrome, used by
   every screen) is overflow:auto while never actually scrolling — the DOCUMENT
   scrolls. So a sticky element anywhere under it never sticks: measured, the
   panel moved 815px off the top of a 1200px scroll. Rather than change shared
   chrome that every other screen depends on, the chrome tab becomes its own
   scroll region. The fields then scroll under a pinned preview, which is the
   behaviour asked for, and it also makes the existing sticky Save bar work. */
.rc .rc-chrome { max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain; }
.rc .rc-chrome .scx-pvmissing {
  padding: 16px 18px; border: 1px dashed var(--border); border-radius: 12px;
  font-size: 13px; line-height: 1.55; color: var(--text-3); background: var(--surface-2);
}

/* ── The empty state: this site's chrome still lives on each page ──────────── */
.rc .rc-chrome .scx-setup { max-width: 720px; }
.rc .rc-chrome .scx-setuplead { font-size: 14px; line-height: 1.6; color: var(--text-2, #4b5563); margin: 0 0 12px; }
.rc .rc-chrome .scx-setuplead b { color: var(--text, #151821); }
.rc .rc-chrome .scx-setupgo { margin-top: 4px; }
.rc .rc-chrome .scx-mignotes { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.rc .rc-chrome .scx-migq { font-size: 14px; line-height: 1.55; color: var(--text, #151821); margin: 0 0 12px; }
.rc .rc-chrome .vltc-opt .os { display: block; font-size: 12px; color: var(--text-3, #8a8f98); margin-top: 2px; }
.rc .rc-chrome .scx-migown { display: block; width: 100%; box-sizing: border-box; margin-top: 7px; padding: 8px 11px; border: 1px solid var(--line, #e5e7eb); border-radius: 8px; font: inherit; font-size: 13.5px; }
@media (max-width: 900px) {
  .rc .rc-chrome { max-height: none; overflow-y: visible; }
}


/* The approve button for a whole-site tab. It rides in the same finish bar as
   the running count, so the menu and the footer read as the last two things to
   tick off rather than as a detour. */
.rc .rc-approve-chrome { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 11px; padding: 11px 18px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rc .rc-approve-chrome:hover { border-color: var(--accent); color: var(--accent); }
.rc .rc-approve-chrome.done { background: var(--good); border-color: var(--good); color: #fff; }
.rc .rc-approve-chrome[hidden] { display: none; }

/* The logo picker: the chosen picture, and a way to change it. No URL field —
   pictures come from the coach's own library (CBMediaPicker), same as the Vault. */
/* The picture option's own block, under the words rather than jammed against
   them. Same block treatment "Write my own" gets from .scx-migown. */
.rc .rc-chrome .scx-picpick {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
}

/* Maya's suggestions for a menu or footer label. She proposes, the coach
   applies — nothing here has touched their site yet, and the layout says so by
   showing the old wording next to the new. */
.rc .rc-props { margin-top: 10px; display: grid; gap: 7px; }
.rc .rc-prop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.rc .rc-prop .f { color: var(--text-3); text-decoration: line-through; }
.rc .rc-prop .a { color: var(--text-4); }
.rc .rc-prop .t { font-weight: 700; color: var(--text); }
.rc .rc-prop-apply { margin-left: auto; border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.rc .rc-prop-apply:hover { background: var(--accent-soft); }
.rc .rc-chip-apply { border-color: var(--accent); color: var(--accent); font-weight: 700; }
/* The chrome editor shares the canvas column, so Maya keeps her place beside it. */
.rc .rc-chrome[hidden] { display: none !important; }
.rc .rc-preview[hidden] { display: none !important; }

/* The house SECONDARY button inside the chrome tabs.
   The migration bar's Back was carrying .scx-pvbtn, which is scoped to
   .rc-prev-panel — so in this bar it matched nothing and the browser drew a
   raw default button next to a properly styled primary (Alex, 2026-07-31:
   "the back button is ugly and doesn't fit the normal styling"). This is the
   same treatment the Vault gives its secondary actions, so the pair now reads
   as a pair. */
.rc .rc-chrome .ghost {
  background: transparent; color: var(--accent, #6a4cf1);
  border: 1px solid var(--border, #d9dce3); border-radius: 10px;
  padding: 10px 16px; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.rc .rc-chrome .ghost:hover { border-color: var(--accent, #6a4cf1); background: var(--accent-soft, rgba(106,76,241,.06)); }
.rc .rc-chrome .ghost:disabled { opacity: .55; cursor: default; }
/* ══════════════════════════════════════════════════════════════════════
   YOUR COURSE IS LIVE (L11)

   Alex, 2026-08-03: "Obviously make this page look really nice because at the
   moment it looks a bit of a step down in UI design after everything that
   we've built so far." It was one plain card at the end of a flow whose other
   screens are all `rc`, so it lives here rather than in course-wizard.css —
   this file IS the look he is comparing it against.
   ══════════════════════════════════════════════════════════════════════ */
.rc .rc-live-hero { text-align: center; padding: 8px 0 22px; }
.rc .rc-live-seal { font-size: 46px; line-height: 1; margin-bottom: 10px; }
.rc .rc-live-hero h1 {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: clamp(26px, 4vw, 36px); letter-spacing: -0.02em; margin: 0 0 8px;
}
.rc .rc-live-hero .lede {
  max-width: 520px; margin: 0 auto; color: var(--text-2); font-size: 15px; line-height: 1.5;
}

/* The honest state of the link we just handed over. Three tones, one shape. */
.rc .rc-live-state {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.rc .rc-live-state .dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  animation: rc-live-pulse 1.4s ease-in-out infinite;
}
.rc .rc-live-state.ok { background: var(--good-soft); color: var(--good); border-color: transparent; }
.rc .rc-live-state.ok .dot { animation: none; }
.rc .rc-live-state.warn { background: var(--warn-soft, rgba(214,158,46,.12)); color: var(--warn, #b7791f); border-color: transparent; }
.rc .rc-live-state.warn .dot { animation: none; }
@keyframes rc-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* The pulse is decoration on a state the words already carry, so it goes
   without taking any meaning with it. */
@media (prefers-reduced-motion: reduce) {
  .rc .rc-live-state .dot { animation: none; }
}

.rc .rc-live-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px; align-items: start;
}
.rc .rc-live-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px;
}
.rc .rc-live-card .sec-h {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 12px;
}
.rc .rc-live-row + .rc-live-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.rc .rc-live-lab b { display: block; font-size: 13.5px; font-weight: 650; }
.rc .rc-live-lab span { display: block; font-size: 12px; color: var(--text-3); margin-top: 1px; }
/* The address wraps rather than truncating: a link a coach cannot read all of
   is a link they cannot check, and this is the one screen where checking it is
   the point. */
.rc .rc-live-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rc .rc-live-act .input { flex: 1 1 200px; min-width: 0; font-size: 12.5px; }
.rc .rc-live-act .btn { flex: none; text-decoration: none; }
.rc .rc-live-share { display: flex; gap: 8px; flex-wrap: wrap; }
.rc .rc-live-share .btn { text-decoration: none; min-width: 84px; justify-content: center; }

/* Sell it with a funnel — the layout cards (piece B, live-page wiring).
   The thumbnail is the template's own demo page in a scaled-down inert iframe:
   the most honest preview there is, and no images to make or maintain. The
   card's accent stripe is the template's DEMO accent — the sub-line on the
   screen says the course's look replaces it, so the stripe is "what this demo
   looks like", not a promise. */
/* minmax 230, not 280: five families is the whole set, and at 280 a wide
   screen seats four with one orphaned underneath — a lineup that reads like
   an afterthought. At 230 all five sit in one row from ~1270px up and wrap
   naturally below that. */
.ccw .rc-fnl-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px; align-items: stretch;
}
.ccw .rc-fnl-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  border-top: 3px solid var(--fnl-accent, var(--accent));
}
.ccw .rc-fnl-thumb {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface-2, #f6f6f7); pointer-events: none;
}
.ccw .rc-fnl-thumb iframe {
  width: 1280px; height: 960px; border: 0;
  transform: scale(0.25); transform-origin: 0 0;
}
/* Wider cards get a proportionally wider page behind the same scale. */
.ccw .rc-fnl-body {
  padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.ccw .rc-fnl-body b { font-size: 15px; font-weight: 700; }
.ccw .rc-fnl-body span { font-size: 12.5px; color: var(--text-3); flex: 1; }
.ccw .rc-fnl-body .btn { align-self: flex-start; margin-top: 10px; }

/* The announce box's refine row (piece C) — one line: steer + rewrite. */
.rc .rc-ann-refine { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rc .rc-ann-refine .input { flex: 1 1 220px; min-width: 0; font-size: 13px; }
.rc .rc-ann-refine .btn { flex: none; }

/* Sell it by email — the drip wizard (piece D). Same visual family as the
   funnel screens: tokens only, cards on --surface, the warmth choice as three
   fat radio-cards (48px+ touch targets, 375px-first wrap). */
.ccw .rc-drip-day { flex: none; font-weight: 700; font-size: 12px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; min-width: 88px; }
.ccw .rc-drip-emails { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ccw .rc-drip-email {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.ccw .rc-drip-email .textarea { width: 100%; resize: vertical; }

/* A0s.2 — Maya asks before she rewrites.
   Deliberately quiet rather than alarming: this is a normal turn in a
   conversation, not an error. It sits under the thread so the coach reads what
   she proposes and then the two buttons, in that order. */
.rc .rc-maya-ask {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--accent, #6366f1);
  border-radius: 10px;
  background: var(--accent-softer, rgba(99,102,241,.08));
}
.rc .rc-maya-ask-t { font-size: 13.5px; line-height: 1.45; color: var(--text, #111827); }
.rc .rc-maya-ask-b { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rc .rc-maya-yes, .rc .rc-maya-no {
  padding: 7px 13px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer;
}
.rc .rc-maya-yes { border: none; background: var(--accent, #6366f1); color: #fff; font-weight: 600; }
.rc .rc-maya-no  { border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff); color: var(--text-2, #4b5563); }
.rc .rc-maya-no:hover { border-color: var(--accent, #6366f1); }
/* The undo is a lone quiet button — the change already happened, this is a way
   back rather than a decision to make. */
.rc .rc-maya-undo { border-color: var(--border, #e5e7eb); background: transparent; padding: 6px 0 0; }