/* ══════════════════════════════════════════════════════════════════════
   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; }
/* ⭐ THE WORDS END ABOVE THE FLOATING BAR (website round 11, F6, Brian at
   1440: the approve bar floated over the bottom of the section he was typing
   in, so the line under his cursor was hidden). On a computer the canvas
   ends where the screen does, less the bar while it floats, measured from
   where the canvas starts (--rc-canvas-top, --rc-canvas-foot, set by
   launch-studio's rcFitCanvas, as rcFitChrome does for the menu tab). It
   never grows past its old 74vh, and never below 320px. Unset (the course
   guide, a phone), it is 74vh as before. */
@media (min-width: 1121px) {
  .rc .rc-canvas { max-height: min(74vh, max(320px, calc(100vh - var(--rc-canvas-top, 0px) - var(--rc-canvas-foot, 0px) - 12px))); }
}
.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); }
/* ⭐ AND SHE ENDS ABOVE THE STEP BAR (batch 9). The bar floats now
   (app-styles-v2.css, #mainContent), and at rest she starts below the
   heading and tabs, so at her full height her typing box sat behind it until
   the page was scrolled to its end. Her height gives way to the room between
   where she is now and the bar (both measured on her by
   js/maya-clears-the-bar.js), and grows back as she rises; the preview beside
   her keeps its own height. The course guide sets its own cap. */
.rc .rc-maya { max-height: max(360px, calc(100vh - var(--maya-top, 16px) - var(--maya-bar-room, 0px))); }
.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); }
/* Something on the section still needs the coach (a sentence to confirm, a
   [gap] to fill): the button says so and takes them to it (website round 3). */
.rc .rc-approve.is-blocked { background: var(--surface-2); color: var(--text-2); border: 1px dashed var(--warn, #b45309); }

/* finish bar. It rides ABOVE the Help button, not under it (corner with
   room, 2026-09-27): `--help-room` is the strip Help takes along the bottom
   edge (support-widget.js), so the bar's own buttons (Done, Continue) are
   never behind Help. Where Help is not mounted it sits 14px up, as before. */
.rc .rc-finish, .ccw .rc-finish { position: sticky; bottom: calc(14px + var(--help-room, 0px)); 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; }
/* THE COURSE GUIDE'S BAR ON A WIDE SCREEN (batch 8, 2026-09-28): level with
   Help, and short of it. Beside Maya's column, a bar riding `--help-room`
   above the edge put a 176px band across the bottom of a 900px screen, and on
   the plan step that band covered her typing box before the coach had
   scrolled at all. So where the guide is two columns, the bar sits 14px up
   like every other floating bar and stops short of Help: `--help-room-x`
   less 48px, because 60px of page and frame padding already lie between
   the bar and the screen's edge (12px kept spare). Help keeps its corner. Measured at 1440:
   the bar ends at x 1310, Help starts at 1334. Where Help is not mounted,
   `--help-room-x` is unset and the bar is full width again. */
/* THE WEBSITE'S COPY REVIEW GETS THE SAME TREATMENT (batch 9). Its bar did
   not float until #mainContent let it (app-styles-v2.css); floating 88px up
   beside Maya's pinned column, it covered her typing box on an 800px screen.
   So over 1120px it is level with Help and stops short of it, like the
   course guide's. 36px, not 48px, because the website's page has no guide
   frame: only #mainContent's own 36px lies between the bar and the edge.
   The course guide is `.rc` too; its own rule below wins by coming later. */
@media (min-width: 1121px) {
  .rc .rc-finish {
    bottom: 14px;
    margin-right: max(0px, calc(var(--help-room-x, 0px) - 36px));
  }
}
@media (min-width: 1121px) {
  .ccw .rc-finish {
    bottom: 14px;
    margin-right: max(0px, calc(var(--help-room-x, 0px) - 48px));
  }
}
/* THE LOOK STEP, AND EVERY GUIDE STEP BUT THE PLAN (batch 10). The 48px above
   counts the plan's blueprint board, whose 24px of padding is part of the 60px.
   The Look step has no board, so its bar ran 24px further right and ended at
   1334px, exactly where Help starts (batch 9 verification at 1440). Only
   #mainContent's 36px lies between those bars and the edge, as on the website's
   copy review, so they take 36px and end 12px short of Help. `:not` rather than
   a blueprint override, so the plan's own one-column rule (course-wizard.css,
   `@container ccwplan`) is not outranked. */
@media (min-width: 1121px) {
  .ccw:not(.ccw-blueprint) .rc-finish {
    margin-right: max(0px, calc(var(--help-room-x, 0px) - 36px));
  }
}
.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; }
/* EVERY BUTTON ON ONE LINE (website round 9, F26, Robert at 1440: "Approve
   final copy & continue to Look" wrapped onto four lines beside the count and
   the progress bar). The buttons keep their width; the count and the line
   under it give way, and the bar wraps before a button does. */
.rc .rc-finish { flex-wrap: wrap; }
.rc .rc-pmeta { flex: 1 1 200px; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
.rc .rc-pmeta .rc-prog { flex: 0 1 180px; min-width: 60px; }
.rc .rc-pmeta .rc-left { flex: 1 1 100%; }
.rc .rc-actions { flex: none; margin-left: auto; }
.rc .rc-final { white-space: nowrap; }
.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; }
/* N22: with nothing to publish the live bar does not float over the words; it
   sits at the end of the page. While it floats, lines brought into view (a
   section opened, a line focused) stop above it rather than under it. */
.rc .rc-finish.rc-live.rc-idle { position: static; box-shadow: none; }
html:has(.rc .rc-finish.rc-live:not(.rc-idle)) { scroll-padding-bottom: 120px; }
.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) {
  /* The bar over the words wraps on a phone (website round 8, F18: its
     helper line was squeezed into a column one word wide beside Preview and
     Version history). The line takes the full width, the buttons go under. */
  .rc .rc-pvbar { flex-wrap: wrap; }
  .rc .rc-pvbar .rc-pvwhat, .rc .rc-pvbar .hint { flex: 1 1 100%; }
  .rc .rc-finish, .ccw .rc-finish { flex-direction: column; align-items: stretch; }
  /* THE BUTTONS STACK TOO (batch 8). Only the bar went to a column; its
     buttons stayed one row, so on a phone "Check it module by module" wrapped
     to five lines and "Approve the whole plan" ran into the card's edge. Each
     button now takes the full width, the main one first. */
  .rc .rc-actions, .ccw .rc-actions { flex-direction: column-reverse; align-items: stretch; }
  .rc .rc-actions > *, .ccw .rc-actions > * { width: 100%; justify-content: center; text-align: center; }
  /* Room for the longest label on one line (F26): "Approve final copy &
     continue to Look" is 322px with its arrow. */
  .rc .rc-finish { padding: 14px 12px; }
  .rc .rc-actions { margin-left: 0; }
  .rc .rc-final { padding: 12px 14px; }
  /* And on a phone the course guide's bar stays where it is, at the end of
     the page. Stacked it is up to 200px tall; pinned it would cover a quarter
     of the screen, Maya's typing box included. The page's own room under its
     last row (`--help-room`) keeps it clear of Help. The website's copy review
     does the same (batch 9), now that its bar can float at all. */
  .rc .rc-finish, .ccw .rc-finish { position: static; }
}
/* ⚠️ `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; }
/* A thumb, not a mouse (website round 9, F13, Patricia at 390px: the Top
   menu and Footer tabs measured 63x19 and 43x19). On a phone, or any touch
   screen, every tab is a 44px target. */
@media (max-width: 760px), (pointer: coarse) {
  .rc .rc-ptab, .rc .rc-ptab-chrome { min-height: 44px; }
  .rc .rc-ptab-chrome { padding: 10px 14px; }
  .rc .rc-ptab-chromes { padding-top: 4px; padding-bottom: 4px; }
}
.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; }

/* A 44px target around the same 40x23 switch (website round 9, F25). */
.rc .rc-chrome .vltc-switch { position: relative; width: 56px; height: 44px; background: transparent; cursor: pointer; border: 0; padding: 0; flex: none; }
.rc .rc-chrome .vltc-switch::before { content: ""; position: absolute; top: 10.5px; left: 8px; width: 40px; height: 23px; border-radius: 20px; background: #d7d9e0; transition: background .15s ease; }
.rc .rc-chrome .vltc-switch::after { content: ""; position: absolute; top: 13px; left: 11px; 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::before { background: var(--accent, #6a4cf1); }
.rc .rc-chrome .vltc-switch.on::after { left: 27px; }

.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; }
/* The footer link × is a 44px target (website round 9, F25: it was 18x23). */
.rc .rc-chrome .vltc-rm { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text-4, #c2c6cd); cursor: pointer; font-size: 17px; padding: 0; line-height: 1; border-radius: 10px; }
.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; }

/* Not floating here (website round 9, F26, Robert: "6 links in your menu"
   sat over the approve bar). The words editor's own bar already floats at the
   foot of this page; this one is a plain line at the end of the menu editor. */
.rc .rc-chrome .vltc-bar { position: static; bottom: auto; 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: 36px; }
.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: 0; flex: none; }
.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: 36px; }
.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: 36px; }
  .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; }
/* A design's phone copy of the line above it (website round 9, N13): set in
   under its computer twin and labelled, so the pair reads as one line in two
   versions rather than the same fact twice. */
.rc .rc-citem-wrap.rc-citem-phone { margin-left: 14px; padding-left: 10px; border-left: 2px solid var(--border-strong, var(--border)); }
.rc .rc-citem-wrap + .rc-citem-wrap.rc-citem-phone { margin-top: 2px; }
.rc .rc-screen-tag { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text-3); margin-bottom: 2px; }
.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; }
/* A thumb, not a mouse (website round 9, F13, Patricia's Confirm 1: the
   section tools, "Delete this section" among them, were 26x26 on a phone).
   On a phone or touch screen each tool is a 44px target, the row wraps
   under the section's name, and Delete stands apart from the others. */
@media (max-width: 760px), (pointer: coarse) {
  .rc .rc-tagrow { flex-wrap: wrap; row-gap: 6px; }
  .rc .rc-sectools { flex-wrap: wrap; gap: 4px; margin-left: 0; }
  .rc .rc-tool { width: 44px; height: 44px; border-radius: 10px; }
  .rc .rc-tool svg { width: 18px; height: 18px; }
  .rc .rc-sectools .rc-tool-del { margin-left: 24px; }
  /* The plain list's line tools (website round 9, N20): at this size a
     44px bar centred on the line's right end lay across the line and its
     neighbours. Here it takes its own room under the line the caret is in,
     and is not drawn at all for a line the coach is not in. */
  .rc .rc-citem-wrap > .rc-item-tools {
    position: static; transform: none; display: none; flex-wrap: wrap;
    width: max-content; max-width: 100%; margin-top: 4px;
    opacity: 1; visibility: visible;
  }
  .rc .rc-citem-wrap:focus-within > .rc-item-tools { display: flex; }
}

/* ── 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
   stays in view at the top of the tab while the coach works down the fields
   below it (Alex, 2026-07-31: "as you scroll down the list of things to do,
   it should float at the top").
   ⭐ NOTHING EVER SLIDES UNDER THE PREVIEW (round 9, F35 at 1440, Robert).
   It used to be pinned with `position: sticky` over a tab that scrolled as
   one box, so every link scrolled up went BEHIND it, and his Contact page
   dropdown sat half hidden there; scroll padding only helped a field brought
   into view by code, never one scrolled by hand. Now the menu editor's shell
   is a column: the preview sits at its top in the flow and never moves, and
   the list under it (.scx-list) is the one box that scrolls, starting where
   the preview ends. The column ends where the screen does, from wherever it
   starts (--rc-chrome-top, set by launch-studio's rcFitChrome), less any
   floating finish bar under it (--rc-chrome-foot). (Sticky never stuck here
   on its own anyway: #mainContent is overflow:auto while the DOCUMENT
   scrolls, app-styles-v2.css.) The setup and migration screens have no
   preview and scroll with the page. */
.rc .rc-chrome { max-height: none; overflow: visible; }
.rc .rc-chrome > .scx-wrap {
  display: flex; flex-direction: column;
  max-height: max(420px, calc(100vh - var(--rc-chrome-top, 114px) - var(--rc-chrome-foot, 0px) - 16px));
}
.rc .rc-chrome > .scx-wrap > .scx-pvhost { flex: 0 0 auto; }
.rc .rc-chrome > .scx-wrap > .scx-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
.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; }
  .rc .rc-chrome > .scx-wrap { display: block; max-height: none; }
  .rc .rc-chrome > .scx-wrap > .scx-list { overflow-y: visible; }
}


/* The one approve button, for whatever tab is open: "This page is right" on a
   page, "The menu is right" / "The footer is right" on the two whole-site tabs
   (website D2, Alex 2026-10-01: the page is the unit of approval). It rides in
   the finish bar beside the running count and is the main thing to press until
   everything is approved, so it carries the accent; once its tab is approved it
   steps back to a quiet tick. */
.rc .rc-approve-tab { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 11px; padding: 11px 18px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rc .rc-approve-tab:hover { background: var(--accent-deep, var(--accent)); }
/* Once approved, the tick is a badge, not a button (TK-42): no border, no
   pointer, nothing that invites a press. Taking it back is its own plainly
   named link-button beside it. */
.rc .rc-approved { display: inline-flex; align-items: center; color: var(--good); font-size: 14px; font-weight: 600; padding: 11px 2px; white-space: nowrap; cursor: default; }
.rc .rc-approved[hidden] { display: none; }
.rc .rc-unapprove { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; padding: 11px 6px; cursor: pointer; white-space: nowrap; }
.rc .rc-unapprove:hover { color: var(--text); }
.rc .rc-unapprove[hidden] { display: none; }
/* A note or a [gap] on the page still needs the coach: pressing takes them to it. */
.rc .rc-approve-tab.is-blocked { background: var(--surface-2); color: var(--text-2); border: 1px dashed var(--warn, #b45309); }
.rc .rc-approve-tab.is-wait, .rc .rc-approve-tab[disabled], .rc .rc-approve-tab[aria-disabled="true"] { background: var(--surface-2); color: var(--text-3); border-color: var(--border); cursor: default; }
.rc .rc-approve-tab[hidden] { display: none; }
/* What is still to approve, named, under the count. */
.rc .rc-pmeta { flex-wrap: wrap; row-gap: 4px; }
.rc .rc-left { flex: 1 1 100%; font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
/* A tab's tick slot is empty until its page (or the menu, or the footer) is
   approved; an empty pill would read as a count of nothing. */
.rc .rc-ptabs-approve .rc-ptab .tk:empty { display: none; }
.rc .rc-ptab-chrome.done .tk { background: var(--good); color: #fff; }
@media (max-width: 760px) {
  /* The bar's buttons stack with the main one first (column-reverse above):
     until everything is approved, that is this one, not a disabled Continue. */
  .rc .rc-actions > .rc-approve-tab, .rc .rc-actions > .rc-unapprove { order: 1; }
  .rc .rc-actions > .rc-approved { order: 2; }   /* reversed: the badge, then "Undo approval" under it */
}

/* 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-notdone { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--warn-soft, #fbf0d9); font-size: 13px; }
.rc .rc-notdone p { margin: 0; }
.rc .rc-notdone p + p { margin-top: 6px; }
.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); }
/* b17: what changed (or would), one line per change, from the server's diff. */
.rc .rc-maya-changes { margin: 6px 0 6px; padding-left: 18px; }
.rc .rc-maya-changes li { margin: 2px 0; line-height: 1.4; }
.rc .rc-maya-ask-b { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* D9: each proposed change on its own line, with its own quiet Undo. */
.rc .rc-maya-oplist { list-style: none; padding-left: 0; }
.rc .rc-maya-oplist li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-top: 1px solid var(--border, #e5e7eb); }
.rc .rc-maya-oplist li:first-child { border-top: none; }
.rc .rc-maya-oplist li span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rc .rc-maya-opx { flex: 0 0 auto; border: 1px solid var(--border, #e5e7eb); background: var(--surface, #fff);
  color: var(--text-2, #4b5563); border-radius: 7px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.rc .rc-maya-opx:hover { border-color: var(--accent, #6366f1); }
.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. */
/* D13: her answers to "where should the new week go?", one per line. */
.rc .rc-maya-place { padding-top: 2px; }
.rc .rc-maya-place-b button { text-align: left; line-height: 1.35; padding: 9px 13px; min-height: 40px; max-width: 100%; }
.rc .rc-maya-undo { border-color: var(--border, #e5e7eb); background: transparent; padding: 6px 0 0; }

/* ── The section's "please check" note (website round 3) ──────────────────
   Sentences the facts check cannot find in anything the coach gave: they sit
   on the card, in plain words, until the coach confirms them or has Maya take
   them out. */
.rc .rc-review-note {
  margin: 10px 0 2px; padding: 12px 14px; border: 1px solid var(--warn, #b45309); border-radius: 12px;
  background: var(--warn-soft, #fff7ed); font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.rc .rc-rn-h { font-weight: 700; margin-bottom: 6px; }
.rc .rc-rn-list { margin: 0 0 10px; padding-left: 18px; }
.rc .rc-rn-list li { margin: 3px 0; }
.rc .rc-rn-s { font-style: italic; }
/* The reason is its own sentence on its own line (TK-11), so it never reads as part of the quote. */
.rc .rc-rn-k { display: block; color: var(--text-3); font-size: 12px; }
.rc .rc-rn-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.rc .rc-rn-btn {
  border: 0; border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 700;
  background: var(--warn, #b45309); color: #fff; cursor: pointer;
}
.rc .rc-rn-btn.ghost { background: transparent; color: var(--warn, #b45309); border: 1px solid var(--warn, #b45309); }
.rc .rc-rn-btn:disabled { opacity: .6; cursor: wait; }

/* ── A [gap] left for the coach (website round 3) ─────────────────────────
   The line with the gap is outlined in the pane; this note names each gap and
   fills it in place. */
.rc .rc-gap-note {
  margin: 10px 0 2px; padding: 12px 14px; border: 1px dashed var(--warn, #b45309); border-radius: 12px;
  background: var(--warn-soft, #fff7ed); font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.rc .rc-gap-row + .rc-gap-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.rc .rc-gap-line { margin-bottom: 6px; color: var(--text-2); }
.rc .rc-gap-line mark { background: transparent; color: var(--warn, #b45309); font-weight: 700; }
.rc .rc-gap-fill { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rc .rc-gap-fill input {
  flex: 1 1 220px; min-width: 0; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 9px;
  padding: 7px 10px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}