/**
 * css/course-locked-stage.css — the free course signup's builder as ONE card
 * over its own course dashboard (js/course-locked-stage.js; the approved
 * artefact "Course builder: publish step", boards Main and Plan).
 *
 * ⚠️ EVERY RULE HANGS OFF `body.ccw-staged`, which only that module puts on and
 * only while `body.course-locked` is on and the guide is open. A coach building
 * a course the ordinary way never matches one of these selectors, and
 * tests/course-locked-stage.test.js fails if a rule is added that could.
 *
 * The overlay's numbers are the community onboarding's (css/setup.css
 * `.onb-overlay` / `.onb-modal`): dim rgba(13,8,25,.55), radius 28px, the same
 * shadow, the same .55s ease; `peek` and `done` are its two other states.
 */

/* ── Behind: the coach's course dashboard ─────────────────────────────── */
body.ccw-staged .ccs-stage {
  position: fixed; inset: 0; z-index: 440; overflow: hidden; pointer-events: none;
  background: #f6f4ee; font-family: Inter, system-ui, sans-serif; color: #2a2030;
}
body.ccw-staged .ccs-app {
  position: absolute; inset: 0; display: flex;
  filter: blur(5px); transform: scale(1.02);
  transition: filter .55s ease, transform .55s ease;
}
body.ccw-staged .ccs-dim {
  position: absolute; inset: 0; background: rgba(13, 8, 25, 0.55);
  transition: opacity .55s ease;
}
body.ccw-staged .ccs-side {
  width: 248px; flex-shrink: 0; background: #fff; border-right: 1px solid #e7e2d8;
  padding: 24px 18px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px;
}
body.ccw-staged .ccs-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font: 600 15px Inter, sans-serif; }
body.ccw-staged .ccs-brand-m { width: 30px; height: 30px; border-radius: 9px; background: var(--ccs-acc, #6a4cf1); flex-shrink: 0; }
body.ccw-staged .ccs-nav { padding: 10px 12px; border-radius: 10px; font-size: 14px; color: #5a4d62; }
body.ccw-staged .ccs-nav.on { background: #efeaff; color: #4a32b8; font-weight: 600; }
body.ccw-staged .ccs-main {
  flex: 1; min-width: 0; padding: 36px 44px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 22px;
}
body.ccw-staged .ccs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.ccw-staged .ccs-eyebrow { font: 600 12px "JetBrains Mono", monospace; letter-spacing: .18em; color: #8b7e92; }
body.ccw-staged .ccs-title { font: 700 34px Fraunces, Georgia, serif; margin-top: 6px; }
body.ccw-staged .ccs-acts { display: flex; gap: 10px; flex-shrink: 0; }
body.ccw-staged .ccs-btn { padding: 12px 18px; border-radius: 12px; background: #fff; border: 1px solid #e7e2d8; font-weight: 600; }
body.ccw-staged .ccs-btn.pri { background: var(--ccs-acc, #6a4cf1); border-color: transparent; color: #fff; }
body.ccw-staged .ccs-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body.ccw-staged .ccs-tile { background: #fff; border-radius: 16px; padding: 18px; border: 1px solid #e7e2d8; }
body.ccw-staged .ccs-tile .k { font-size: 13px; color: #8b7e92; }
body.ccw-staged .ccs-tile .v { font: 700 30px Inter, sans-serif; margin-top: 6px; }
body.ccw-staged .ccs-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; flex: 1; min-height: 0; }
body.ccw-staged .ccs-col { display: flex; flex-direction: column; gap: 16px; }
body.ccw-staged .ccs-panel {
  background: #fff; border-radius: 16px; padding: 22px; border: 1px solid #e7e2d8;
  display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: hidden;
}
body.ccw-staged .ccs-ph { font-weight: 700; }
body.ccw-staged .ccs-p { color: #5a4d62; }
body.ccw-staged .ccs-mod {
  padding: 14px; border-radius: 12px; background: #f6f4ee;
  display: flex; justify-content: space-between; gap: 12px;
  animation: ccs-in .6s ease both;
}
body.ccw-staged .ccs-mod-n { color: #8b7e92; font-size: 13px; white-space: nowrap; }
body.ccw-staged .ccs-mod.ccs-ghost { height: 18px; animation: none; opacity: .6; }
body.ccw-staged .ccs-shop { height: 120px; border-radius: 12px; background: #e9e2f8 center / cover no-repeat; position: relative; overflow: hidden; }
body.ccw-staged .ccs-shop span { position: absolute; left: 16px; bottom: 16px; width: 40%; height: 14px; border-radius: 7px; opacity: .85; }
@keyframes ccs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The flash's own line, the community's peek banner. */
body.ccw-staged .ccs-peek-pill {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%) translateY(-12px);
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  background: #2a2030; color: #f6f4ee; border-radius: 999px; padding: 10px 20px;
  font: 600 12px "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.4);
  opacity: 0; transition: opacity .4s ease, transform .4s ease;
}
body.ccw-staged .ccs-peek-pill .dot,
body.ccw-staged #courses-wizard::before { --ccs-dot: #8b6dff; }
body.ccw-staged .ccs-peek-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #8b6dff; animation: peek-pulse 1.4s infinite; }

/* ── In front: the builder as one card ────────────────────────────────── */
body.ccw-staged #courses-wizard {
  position: fixed; inset: 0; z-index: 450;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; padding: 28px 28px 0; box-sizing: border-box;
  transition: opacity .55s ease;
}
@media (min-width: 1100px) {
  /* Centred over the content, as in the artefact: the menu column stays visible behind. */
  body.ccw-staged #courses-wizard { padding-left: calc(28px + 248px); }
}
/* The pill. A pseudo-element, so the guide's repaints never take it away. */
body.ccw-staged #courses-wizard::before {
  content: "YOUR COURSE DASHBOARD IS READY BEHIND THIS";
  flex-shrink: 0; margin-top: auto;
  background: #2a2030 radial-gradient(circle at 23px 50%, #8b6dff 3px, transparent 3.6px) no-repeat;
  color: #f6f4ee; border-radius: 999px; padding: 10px 20px 10px 36px;
  font: 600 12px "JetBrains Mono", monospace; letter-spacing: .16em; line-height: 1.3;
  text-align: center; max-width: 100%; box-sizing: border-box;
}
/* The bottom gutter is a spacer, not padding: a sticky foot (.rc-finish) then
   sits on the very bottom edge while the card scrolls under it. */
body.ccw-staged #courses-wizard::after { content: ""; margin-bottom: auto; flex-shrink: 0; height: 14px; }

body.ccw-staged #courses-wizard > .ccw {
  width: 100%; max-width: 760px; flex-shrink: 0; margin: 0;
  background: #fff; border-radius: 28px; overflow: clip;
  /* The gutter is the card's own padding; the head and the foot reach back out
     to the edges. Never margins on the children: the guide's fixed panels
     (the lesson editor) are children too, and a margin moves them. */
  padding: 0 32px !important; box-sizing: border-box; color: #2a2030;
  box-shadow: 0 50px 120px -30px rgba(13,8,25,0.5), 0 30px 60px -20px rgba(106,76,241,0.25);
  background-image: none;
  animation: ccs-card-in .55s cubic-bezier(.16,1,.3,1) backwards;   /* not `both`: a transform left on the card would trap the fixed panels inside it */
}
body.ccw-staged #courses-wizard > .ccw.ccw-work,
body.ccw-staged #courses-wizard > .ccw.ccs-nohead { max-width: 1080px; }   /* the course home, opened before the first publish */
/* The plan screen's drafting grid is a page background; in the card it is just the card. */
body.ccw-staged #courses-wizard > .ccw.ccw-blueprint { background-color: #fff; }
body.ccw-staged #courses-wizard > .ccw.ccw-blueprint::before,
body.ccw-staged #courses-wizard > .ccw.ccw-blueprint::after { display: none; }
@keyframes ccs-card-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }

/* Head: brand mark + YOUR COURSE on the left, "Step N of 6" on the right. */
body.ccw-staged #courses-wizard > .ccw > .topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 32px 14px; margin: 0 -32px; min-height: 0; border: 0; background: none; position: static;
}
body.ccw-staged #courses-wizard > .ccw > .topbar .page-head-crumbs { display: none !important; }
body.ccw-staged #courses-wizard > .ccw > .topbar::before {
  content: "YOUR COURSE";
  display: inline-flex; align-items: center; gap: 10px;
  padding-left: 36px; min-height: 26px;
  background: linear-gradient(135deg, #6a4cf1, #4a32b8) left center / 26px 26px no-repeat;
  border-radius: 0;
  font: 600 12px "JetBrains Mono", monospace; letter-spacing: .2em; color: #5a4d62;
}
body.ccw-staged #courses-wizard > .ccw > .topbar .topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
body.ccw-staged #courses-wizard > .ccw > .topbar .save-hint { font-size: 12px; }
body.ccw-staged #courses-wizard .ccs-count { font-size: 13px; color: #8b7e92; white-space: nowrap; }

/* The six steps as the artefact's segmented bar, labels under. */
body.ccw-staged #courses-wizard > .ccw > .ccw-stepbar {
  padding: 0 32px 18px; margin: 0 -32px; border-bottom: 1px solid #eee9f2; background: none;
}
body.ccw-staged .ccw-stepbar .ccw-c-journey { margin: 0; padding: 0; position: static; }
body.ccw-staged .ccw-stepbar .ccw-c-journey .ln { display: none; }
body.ccw-staged .ccw-stepbar .ccw-c-journey ol {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
  margin: 0; padding: 0; list-style: none;
}
body.ccw-staged .ccw-stepbar .ccw-c-journey li { display: block; margin: 0; padding: 0; text-align: left; min-width: 0; }
body.ccw-staged .ccw-stepbar .ccw-c-journey li > .ccw-c-jgo {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit;
}
body.ccw-staged .ccw-stepbar .ccw-c-journey li > .ccw-c-jgo.off { cursor: default; }
body.ccw-staged .ccw-stepbar .ccw-c-journey .d {
  display: block; width: 100%; height: 6px; border-radius: 3px; margin: 0;
  background: #ece6ff; border: 0; box-shadow: none; font-size: 0; color: transparent; line-height: 0; padding: 0;
}
body.ccw-staged .ccw-stepbar .ccw-c-journey li.done .d { background: #6a4cf1; }
body.ccw-staged .ccw-stepbar .ccw-c-journey li.go .d { background: #ddd3fe; }
body.ccw-staged .ccw-stepbar .ccw-c-journey li.now .d { background: #c9bdfb; }
body.ccw-staged .ccw-stepbar .ccw-c-journey .l {
  display: block; margin-top: 8px; font: 400 12px Inter, sans-serif; color: #8b7e92;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0;
}
body.ccw-staged .ccw-stepbar .ccw-c-journey li.now .l { color: #4a32b8; font-weight: 600; }

/* The screen's heading. */
body.ccw-staged #courses-wizard > .ccw > .welcome { padding: 26px 0 0; margin: 0 0 18px; max-width: none; text-align: left; }
body.ccw-staged #courses-wizard > .ccw > .welcome .welcome-eyebrow { display: none; }
body.ccw-staged #courses-wizard > .ccw > .welcome h1 {
  margin: 0; font: 700 30px/1.15 Fraunces, Georgia, serif; letter-spacing: -.01em; color: #2a2030;
}
body.ccw-staged #courses-wizard > .ccw > .welcome .lede { margin: 6px 0 0; color: #5a4d62; font-size: 15px; max-width: none; }

/* The guide's own cards (the first screen, the concept questions, Maya
   writing the plan): inside this card they are just their content. */
body.ccw-staged #courses-wizard .ccw-guide { margin-top: 22px; padding: 0; min-height: 0; background: none; display: block; }
body.ccw-staged #courses-wizard .ccw-guide .ccw-c-card,
body.ccw-staged #courses-wizard .ccw-guide .ccw-g-card {
  max-width: none; width: auto; margin: 0; padding: 4px 0 24px; background: none; border: 0; box-shadow: none; border-radius: 0; min-height: 0;
}
body.ccw-staged #courses-wizard .ccw-guide .ccw-c-card > .ccw-g-eyebrow:first-child,
body.ccw-staged #courses-wizard .ccw-guide .ccw-g-card > .ccw-g-eyebrow:first-child { display: none; }
body.ccw-staged #courses-wizard .ccw-guide .ccw-c-foot,
body.ccw-staged #courses-wizard .ccw-guide .ccw-g-foot {
  margin: 18px -32px 0; padding: 18px 32px 0; border-top: 1px solid #eee9f2; justify-content: space-between;
}
body.ccw-staged #courses-wizard .ccw-guide .ccw-g-go,
body.ccw-staged #courses-wizard .ccw-guide .ccw-c-go {
  flex: none; width: auto; margin-left: auto; border-radius: 14px; padding: 16px 28px; font-weight: 700;
}
body.ccw-staged #courses-wizard .ccw-guide .ccw-g-back,
body.ccw-staged #courses-wizard .ccw-guide .ccw-c-back { border: 0; background: transparent; color: #5a4d62; font-weight: 600; padding: 12px 6px; }

/* Foot: Back on the left, one strong primary on the right. */
body.ccw-staged #courses-wizard > .ccw > .ccw-foot,
body.ccw-staged #courses-wizard > .ccw > .rc-finish {
  margin: 18px -32px 0; padding: 18px 32px 24px; border: 0; border-top: 1px solid #eee9f2;
  border-radius: 0; box-shadow: none; background: #fff; left: auto; right: auto; width: auto; max-width: none;
}
body.ccw-staged #courses-wizard > .ccw > .rc-finish { bottom: 0; }
body.ccw-staged #courses-wizard .ccw-c-go,
body.ccw-staged #courses-wizard .rc-final,
body.ccw-staged #courses-wizard [data-ccw-publish] {
  border-radius: 14px; box-shadow: 0 14px 30px -12px rgba(106,76,241,.7);
}

/* ── Publishing, as the artefact's Main board ─────────────────────────── */
body.ccw-staged #courses-wizard [data-ccw-pub1] {
  display: flex; flex-direction: column; gap: 18px; margin-top: 0; padding: 0; background: none; max-width: none;
}
body.ccw-staged #courses-wizard .ccw-pub1-grid { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
body.ccw-staged #courses-wizard [data-ccw-pub1] > *,
body.ccw-staged #courses-wizard .ccw-pub1-grid > * { width: 100%; max-width: none; align-self: stretch; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .fh-card {
  border: 0; box-shadow: none; padding: 0; margin: 0; background: none; border-radius: 0; min-width: 0;
}
body.ccw-staged #courses-wizard [data-ccw-pub1] .fh-card-h { padding: 0; margin: 0 0 10px; border: 0; background: none; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .fh-card-h h3 { font: 600 15px Inter, sans-serif; margin: 0; color: #2a2030; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .fh-card-h .ccw-pub1-sub { display: none; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .fh-card-b { padding: 0; border: 0; background: none; }
/* How will people get it: four compact tiles, two by two. */
body.ccw-staged #courses-wizard [data-ccw-pub1-access] .ccw-opts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0;
}
body.ccw-staged #courses-wizard [data-ccw-pub1-access] .ccw-opt {
  display: block; text-align: left; padding: 14px 16px 14px 44px; border-radius: 14px;
  border: 1px solid #e3dde8; background: #fff; min-height: 0; margin: 0; width: 100%; box-shadow: none; position: relative;
}
body.ccw-staged #courses-wizard [data-ccw-pub1-access] .ccw-opt::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #b9aec4; box-sizing: border-box; background: #fff;
}
body.ccw-staged #courses-wizard [data-ccw-pub1-access] .ccw-opt.on { border: 2px solid #6a4cf1; background: #f5f1ff; padding: 13px 15px 13px 43px; }
body.ccw-staged #courses-wizard [data-ccw-pub1-access] .ccw-opt.on::before { left: 15px; top: 16px; border: 5px solid #6a4cf1; }
body.ccw-staged #courses-wizard [data-ccw-pub1-access] .ccw-opt .t { font: 600 15px Inter, sans-serif; color: #2a2030; }
body.ccw-staged #courses-wizard [data-ccw-pub1-access] .ccw-opt .d {
  font-size: 13px; line-height: 1.4; color: #5a4d62; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The web address on one line, with Change. */
body.ccw-staged #courses-wizard .ccw-pub1-addr:not(.open) > .fh-card-h { display: none; }
body.ccw-staged #courses-wizard .ccw-pub1-addr-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 46px; border-radius: 14px; background: #f6f4ee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a4d62' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 16px 50%;
}
body.ccw-staged #courses-wizard .ccw-pub1-addr-row .fh-grow { flex: 1; min-width: 0; }
body.ccw-staged #courses-wizard .ccw-pub1-addr-row .fh-grow::before { content: "It lives at"; display: block; font-size: 12px; color: #8b7e92; }
body.ccw-staged #courses-wizard .ccw-pub1-url { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .fh-btn.sm {
  border: 1px solid #d9d1e2; background: #fff; border-radius: 10px; padding: 10px 14px; font: 600 14px Inter, sans-serif; color: #2a2030; flex-shrink: 0;
}
/* What you promised + Before you publish: one compact checklist. */
body.ccw-staged #courses-wizard [data-ccw-pub1] [data-ch-promises-box] > .fh-card-h,
body.ccw-staged #courses-wizard .ccw-pub1-before > .fh-card-h,
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-prom-sub { display: none; }
body.ccw-staged #courses-wizard [data-ccw-pub1] [data-ccw-promises] { order: 3; }
body.ccw-staged #courses-wizard .ccw-pub1-before { order: 2; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-pub-rows,
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-prom-b { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-pub-row,
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-prom-row {
  display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; border: 0; background: none; font-size: 14px; min-height: 0;
}
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-pub-row small,
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-prom-row small { display: inline; font-size: 14px; color: #5a4d62; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-pub-row small::before { content: " "; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-pub-t { display: block; color: #5a4d62; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-pub-t > span { color: #2a2030; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-prom-row b { font-weight: 500; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-prom-row b::after { content: ":"; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-prom-row .fh-grow { display: block; color: #5a4d62; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-pub-ic,
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-prom-dot {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; box-sizing: border-box;
  border: 2px solid #c9a227; background: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin: 0;
}
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-pub-ic.done { background: #4f7c54; border-color: #4f7c54; color: #fff; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-prom-dot:not(.warn) { border-color: #d9d1e2; }
body.ccw-staged #courses-wizard [data-ccw-pub1] .ch-prom-row .fh-btn.sm {
  border: 0; background: none; padding: 0 0 0 4px; color: #4a32b8; text-decoration: underline; font-weight: 500;
}
/* The empty lessons stay doors into their editors, as small chips. */
body.ccw-staged #courses-wizard .ccw-pub1-pend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 30px; }
body.ccw-staged #courses-wizard .ccw-pub1-pend .ccw-pend {
  width: auto; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; border: 1px solid #e3dde8; background: #fff; margin: 0;
}
body.ccw-staged #courses-wizard .ccw-pub1-pend .ccw-pend .go { display: none; }
/* Three doors is enough to say where to start; the rest are one tap away on Content. */
body.ccw-staged #courses-wizard .ccw-pub1-pend .ccw-pend:nth-child(n+4) { display: none; }
/* Foot: Back as a quiet word on the left, "Publish my course →" on the right. */
body.ccw-staged #courses-wizard > .ccw > .rc-finish .rc-pmeta:empty { display: none; }
body.ccw-staged #courses-wizard > .ccw > .rc-finish:has([data-ccw-publish]) .rc-actions {
  display: flex; width: 100%; justify-content: space-between; align-items: center;
}
body.ccw-staged #courses-wizard > .ccw > .rc-finish [data-ccw-gl-delivery],
body.ccw-staged #courses-wizard > .ccw > .rc-finish [data-ccw-backfill] {
  border: 0; background: transparent; box-shadow: none; font: 600 15px Inter, sans-serif; color: #5a4d62; padding: 12px 6px;
}
body.ccw-staged #courses-wizard > .ccw > .rc-finish [data-ccw-publish] {
  border: 0; background: #6a4cf1; color: #fff; border-radius: 14px; padding: 16px 28px; font: 700 16px Inter, sans-serif;
}
body.ccw-staged #courses-wizard > .ccw > .rc-finish [data-ccw-publish]:disabled { background: #b8a9f5; box-shadow: none; font-size: 14px; padding: 14px 18px; }

/* ── The flash (the community's .peek) and the hand-back (.done) ──────── */
body.ccw-staged.ccs-peek .ccs-app,
body.ccw-staged.ccs-done .ccs-app { filter: none; transform: none; }
body.ccw-staged.ccs-peek .ccs-dim,
body.ccw-staged.ccs-done .ccs-dim { opacity: 0; }
body.ccw-staged.ccs-peek #courses-wizard,
body.ccw-staged.ccs-done #courses-wizard { opacity: 0; pointer-events: none; }
body.ccw-staged.ccs-done #courses-wizard { transition: opacity .8s ease; }
body.ccw-staged.ccs-peek .ccs-peek-pill { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Phone: the card fills the width; the dashboard shows above and at the edges ── */
@media (max-width: 768px) {
  body.ccw-staged .ccs-side { display: none; }
  body.ccw-staged .ccs-main { padding: 20px 16px; gap: 14px; }
  body.ccw-staged .ccs-title { font-size: 24px; }
  body.ccw-staged .ccs-acts { display: none; }
  body.ccw-staged .ccs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.ccw-staged .ccs-grid { grid-template-columns: 1fr; }
  body.ccw-staged .ccs-peek-pill { white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 32px); letter-spacing: .1em; font-size: 10.5px; }
  body.ccw-staged #courses-wizard { padding: 14px 10px 0; gap: 10px; }
  body.ccw-staged #courses-wizard::before { font-size: 10px; letter-spacing: .1em; padding: 8px 14px 8px 28px; background-position: 0 0; background-image: radial-gradient(circle at 16px 50%, #8b6dff 3px, transparent 3.6px); }
  body.ccw-staged #courses-wizard > .ccw { border-radius: 22px; }
  body.ccw-staged #courses-wizard > .ccw { padding: 0 18px !important; }
  body.ccw-staged #courses-wizard > .ccw > .topbar { padding: 18px 18px 12px; margin: 0 -18px; }
  body.ccw-staged #courses-wizard > .ccw > .topbar .save-hint { display: none; }
  body.ccw-staged #courses-wizard > .ccw > .ccw-stepbar { padding: 0 18px 14px; margin: 0 -18px; }
  body.ccw-staged .ccw-stepbar .ccw-c-journey .l { font-size: 10px; }
  body.ccw-staged #courses-wizard > .ccw > .welcome { padding: 20px 0 0; }
  body.ccw-staged #courses-wizard > .ccw > .welcome h1 { font-size: 24px; }
  body.ccw-staged #courses-wizard .ccw-guide .ccw-c-foot,
  body.ccw-staged #courses-wizard .ccw-guide .ccw-g-foot { margin: 14px -18px 0; padding: 14px 18px 0; }
  body.ccw-staged #courses-wizard > .ccw > .ccw-foot,
  body.ccw-staged #courses-wizard > .ccw > .rc-finish { padding: 14px 18px 18px; margin: 14px -18px 0; }
  body.ccw-staged #courses-wizard [data-ccw-pub1-access] .ccs-tiles2,
  body.ccw-staged #courses-wizard .ccw-pub1-qs [role="radiogroup"],
  body.ccw-staged #courses-wizard .ccw-pub1-qs .ccw-gl-access-opts { grid-template-columns: 1fr 1fr; gap: 8px; }
}