/* course-wizard.css — the guided course-creation flow.
 *
 * Was a 45-line string concatenated inside course-creation-wizard.js's
 * _chrome(). It moved here for two reasons: the module was heading past the
 * context budget, and a stylesheet that is re-parsed on every render of every
 * step is a stylesheet in the wrong place.
 *
 * DESIGN SYSTEM. App-shell tokens only (--surface / --text / --accent /
 * --border / --good / --warn / --danger / --radius), which is what the rest of
 * this flow already used and what CODING-STANDARDS names as the canon for new
 * in-app UI. ZERO raw hex and zero magic colours — the discipline
 * outreach-funnel.css sets, applied to the shell's token family rather than
 * ui-kit's. That matters beyond tidiness: the courses UI was found carrying 19
 * hardcoded colours and rendering white cards on a dark page the moment a dark
 * theme landed (blueprint §9). Tokens are how that stops happening again.
 *
 * MOBILE FIRST. Base rules are the phone; desktop arrives in
 * @media (min-width: 900px). Courses are consumed on phones and built between
 * sessions on one, and mobile-first is a positioning claim for us (D35), not
 * just a breakpoint.
 */

/* ── Shell ─────────────────────────────────────────────────────────── */

.ccw { max-width: 880px; margin: 0 auto; }
.ccw.ccw-wide { max-width: 1180px; }

.ccw .ccw-head {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px;
}
.ccw .ccw-crumbs {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: 12.5px; color: var(--text-3);
}
.ccw .ccw-crumb {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px; background: var(--surface-2);
}
.ccw .ccw-crumb.now { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ccw .ccw-crumb.done { color: var(--good); background: var(--good-soft); }
.ccw .ccw-crumb-n { font-weight: 700; }
.ccw .ccw-crumb-sep { opacity: .45; }
.ccw .ccw-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.ccw .ccw-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 18px 14px;
}
.ccw .ccw-q { font-size: 21px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.ccw .ccw-sub { font-size: 14px; color: var(--text-3); margin: 0 0 18px; line-height: 1.55; }
.ccw .ccw-label { font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 6px; }
.ccw .ccw-label .soft { font-weight: 400; color: var(--text-3); }
.ccw .ccw-step-of { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }

.ccw .ccw-foot {
  display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap;
}
.ccw .ccw-skip {
  margin-left: auto; font-size: 12.5px; color: var(--text-3);
  text-decoration: underline; cursor: pointer; background: none; border: none;
}

/* ── Option cards ──────────────────────────────────────────────────── */

.ccw .ccw-opts { display: grid; gap: 10px; }
.ccw .ccw-opt {
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 16px; cursor: pointer; background: var(--surface); text-align: left;
  transition: border-color .12s, background .12s; font: inherit; color: inherit;
  min-height: 48px;
}
.ccw .ccw-opt:hover { border-color: var(--accent); }
.ccw .ccw-opt.on { border-color: var(--accent); background: var(--accent-softer); }
.ccw .ccw-opt .t { font-weight: 650; font-size: 15px; margin-bottom: 3px; }
.ccw .ccw-opt .d { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }

/* ── Plan editor ───────────────────────────────────────────────────── */

.ccw .ccw-hint {
  display: inline-block; font-size: 11.5px; background: var(--warn-soft);
  color: var(--warn); border: 1px solid var(--warn-soft);
  border-radius: 8px; padding: 2px 8px; margin: 2px 4px 2px 0;
}
.ccw .ccw-mod {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; overflow: hidden;
}
.ccw .ccw-mod-head {
  display: flex; gap: 8px; align-items: center; padding: 10px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
}
.ccw .ccw-mod-head input { flex: 1; min-width: 0; }
.ccw .ccw-mod-n { font-size: 12px; color: var(--text-3); flex: none; }
.ccw .ccw-lesson {
  display: flex; gap: 8px; align-items: center; padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft); flex-wrap: wrap;
}
.ccw .ccw-lesson:last-child { border-bottom: none; }
.ccw .ccw-lesson input[data-lt] { flex: 2; min-width: 140px; }
.ccw .ccw-lesson input[data-lc] { flex: 3; min-width: 160px; }
.ccw .ccw-lesson-add { padding: 8px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ccw .ccw-ib {
  border: none; background: none; cursor: pointer; font-size: 13px;
  padding: 6px 8px; border-radius: 6px; color: var(--text-3);
}
.ccw .ccw-ib:hover { background: var(--surface-2); color: var(--text); }
.ccw .ccw-ib.danger { color: var(--danger); }
.ccw .ccw-filled {
  font-size: 11px; background: var(--good-soft); color: var(--good);
  padding: 2px 7px; border-radius: 8px; flex: none;
}
.ccw .ccw-rowtools { flex: none; display: flex; }

/* ── Progressive reveals ───────────────────────────────────────────── */

.ccw .ccw-reveal {
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; display: flex; gap: 12px; align-items: flex-start;
}
.ccw .ccw-reveal.on { border-style: solid; border-color: var(--accent); background: var(--accent-softer); }
.ccw .ccw-reveal .ic { font-size: 20px; line-height: 1; }
.ccw .ccw-reveal .t { font-weight: 650; font-size: 14px; margin-bottom: 2px; }
.ccw .ccw-reveal .d { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.ccw .ccw-reveal .why { display: block; margin-top: 4px; color: var(--accent-deep); }
.ccw .ccw-reveal-body { flex: 1; }
.ccw .ccw-toggle {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 13px; min-height: 48px;
}
.ccw .ccw-toggle input { accent-color: var(--accent); }
.ccw .ccw-rec {
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border-radius: 20px; padding: 1px 8px; margin-left: 6px;
}

/* ── Checklist / rings / celebration ───────────────────────────────── */

.ccw .ccw-check-row {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  margin-bottom: 8px; flex-wrap: wrap;
}
.ccw .ccw-check-row.done { opacity: .62; }
.ccw .ccw-check-row .lbl { flex: 1; min-width: 180px; font-size: 14px; }
.ccw .ccw-ring { width: 74px; height: 74px; flex: none; }
.ccw .ccw-fill-box { width: 100%; padding: 10px 12px 4px; }
.ccw .ccw-group-h {
  font-size: 12px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px;
}
.ccw .ccw-cele { text-align: center; padding: 34px 18px; }
.ccw .ccw-cele .big { font-size: 52px; line-height: 1; margin-bottom: 12px; }
.ccw .ccw-cele-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.ccw .ccw-note {
  border: 1px solid var(--warn-soft); background: var(--warn-soft);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.ccw .ccw-note .t { font-weight: 650; font-size: 14px; margin-bottom: 6px; }
.ccw .ccw-note .d { font-size: 12.5px; color: var(--warn); line-height: 1.5; }
.ccw .ccw-panel {
  border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px 16px;
}
.ccw .ccw-panel .t { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.ccw .ccw-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.ccw .ccw-inline > div { min-width: 110px; }
.ccw .ccw-msg { font-size: 12.5px; margin-top: 8px; color: var(--text-3); }
.ccw input.input, .ccw select.select, .ccw textarea.textarea { font: inherit; }
.ccw .ccw-answer { width: 100%; font-size: 16px; padding: 12px 14px; }

/* ── "What we already know" ────────────────────────────────────────── */

.ccw .ccw-known { display: grid; gap: 10px; margin-bottom: 16px; }
.ccw .ccw-known-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2);
}
.ccw .ccw-known-row .k {
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .03em; flex: none; min-width: 92px;
}
.ccw .ccw-known-row .v { font-size: 14px; line-height: 1.5; }
.ccw .ccw-swatch {
  width: 18px; height: 18px; border-radius: 5px; display: inline-block;
  vertical-align: -3px; border: 1px solid var(--border-strong); margin-right: 6px;
}
.ccw .ccw-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ccw .ccw-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 20px; padding: 7px 12px; font-size: 12.5px; cursor: pointer;
  font: inherit; font-size: 12.5px; min-height: 36px;
}
.ccw .ccw-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ── Provenance: show it, offer it, never assume it (D51) ──────────────
   Nothing we hold is written into an input, so every borrowed value has to
   carry its own origin instead — on the "what we know" rows, and on each
   offer chip. The tag is the feature, not a footnote: it is the difference
   between a value that appeared from nowhere and one that reads as the app
   having paid attention. */

.ccw .ccw-src {
  display: block; margin-top: 3px;
  font-size: 11px; color: var(--text-3);
}
.ccw .ccw-fix {
  font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin: 0 0 16px;
}
.ccw .ccw-fix a { color: var(--accent); }
.ccw .ccw-fix .soft { color: var(--text-3); }
.ccw .ccw-chips-lead { font-size: 12px; color: var(--text-3); margin-top: 14px; }
/* Two lines, so the source is readable rather than a tooltip nobody opens.
   Left-aligned and taller than a plain chip for the same reason. */
.ccw .ccw-chip.ccw-chip-src {
  text-align: left; padding: 6px 13px; border-radius: 14px;
  min-height: 44px; max-width: 100%;
}
.ccw .ccw-chip.ccw-chip-src .src {
  display: block; font-size: 10.5px; color: var(--text-3); line-height: 1.4;
}
.ccw .ccw-chip.ccw-chip-src .v {
  display: block; font-size: 13px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ccw .ccw-chip.ccw-chip-src:hover .src { color: var(--accent); }

/* ── Live preview panel ────────────────────────────────────────────── */

/* min-width:0 on the children is load-bearing, not defensive tidiness: a grid
   track sizes to its content by default, so one child that measures wider than
   the phone (the preview frame, mid-layout) widens the track and pushes the
   whole page — editor and all — off the right edge. */
.ccw .ccw-split { display: grid; gap: 16px; }
.ccw .ccw-split > * { min-width: 0; }
.ccw .ccw-preview {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-3); overflow: hidden;
}
.ccw .ccw-preview-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.ccw .ccw-preview-bar .t { font-size: 12.5px; font-weight: 700; }
.ccw .ccw-preview-bar .s { font-size: 11.5px; color: var(--text-3); }
.ccw .ccw-vp { display: flex; gap: 4px; margin-left: auto; }
.ccw .ccw-vp button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: 20px; padding: 5px 11px; font: inherit; font-size: 12px; cursor: pointer;
}
.ccw .ccw-vp button.on { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.ccw .ccw-stage {
  padding: 12px; display: flex; justify-content: center; overflow: hidden;
}
.ccw .ccw-stage > * { max-width: 100%; }
.ccw .ccw-preview-bar { overflow-x: auto; }
.ccw .ccw-frame-wrap { position: relative; overflow: hidden; margin: 0 auto; max-width: 100%; }
/* A lazily-mounted card has an empty iframe until it scrolls into view; left
   bare that reads as a broken card rather than one that has not arrived yet. */
.ccw .ccw-frame-wrap.pending { background: var(--surface-3); }
.ccw .ccw-frame-wrap.pending::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 300% 100%; animation: ccw-shimmer 1.4s linear infinite;
}
@keyframes ccw-shimmer { to { background-position: -150% 0; } }
.ccw .ccw-frame-wrap iframe {
  border: 0; display: block; background: var(--surface);
  transform-origin: top left; box-shadow: 0 1px 3px var(--border-strong);
}
.ccw .ccw-preview-empty {
  padding: 40px 20px; text-align: center; font-size: 13px; color: var(--text-3);
}
.ccw .ccw-preview-toggle { width: 100%; margin-bottom: 12px; }

/* ── Template gallery ──────────────────────────────────────────────── */

.ccw .ccw-gal-cat {
  font-size: 12px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; margin: 20px 0 10px;
}
.ccw .ccw-gal-cat:first-of-type { margin-top: 6px; }
/* Two up even on a phone. One column meant thirty-one cards stacked into an
   11,000px scroll — a gallery you have to endure rather than browse. Two up is
   the idiom every template picker uses, and the card is a THUMBNAIL: the look
   (colour, type, photography) is what is being compared, and tapping opens the
   real thing full size. */
.ccw .ccw-gal-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.ccw .ccw-gal-card {
  border: 1.5px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; cursor: pointer;
  text-align: left; font: inherit; color: inherit; padding: 0;
  display: flex; flex-direction: column;
}
.ccw .ccw-gal-card:hover { border-color: var(--accent); }
.ccw .ccw-gal-card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ccw .ccw-gal-shot {
  height: 168px; overflow: hidden; position: relative;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
}
.ccw .ccw-gal-shot iframe {
  border: 0; display: block; transform-origin: top left; pointer-events: none;
}
.ccw .ccw-gal-body { padding: 12px 14px; }
.ccw .ccw-gal-body .n { font-weight: 650; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.ccw .ccw-gal-body .niche { font-size: 11.5px; color: var(--accent); margin-top: 2px; }
/* Clamped on a phone: at half-width a four-line "feel" is most of the card,
   and thirty-one of them is a scroll nobody finishes. The full line is in the
   footer of the full-size view, which is where a coach is actually choosing. */
.ccw .ccw-gal-body .feel {
  font-size: 12.5px; color: var(--text-3); line-height: 1.45; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 640px) { .ccw .ccw-gal-body .feel { -webkit-line-clamp: 4; } }
.ccw .ccw-gal-tick {
  margin-left: auto; font-size: 11px; font-weight: 600; color: var(--surface);
  background: var(--accent); border-radius: 20px; padding: 2px 9px;
}

/* Full-size look-at-it view, over the gallery. */
.ccw-modal {
  position: fixed; inset: 0; z-index: 10005;
  display: flex; flex-direction: column;
}
.ccw-modal .scrim { position: absolute; inset: 0; background: var(--text); opacity: .55; }
.ccw-modal .sheet {
  position: relative; margin: auto; width: min(100%, 1340px); max-height: 100%;
  background: var(--bg); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.ccw-modal .sheet-head {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.ccw-modal .sheet-head .n { font-weight: 700; font-size: 15px; }
.ccw-modal .sheet-head .niche { font-size: 12px; color: var(--text-3); }
.ccw-modal .sheet-body { overflow: auto; padding: 14px; display: flex; justify-content: center; }
.ccw-modal .sheet-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; background: var(--surface); border-top: 1px solid var(--border);
}
/* Full width on a phone. The app's floating support widget is pinned bottom-left
   and sat over roughly half of "Use this look" — the primary action of this
   screen. A full-width button extends well clear of it. */
@media (max-width: 639px) {
  .ccw-modal .sheet-foot .btn { width: 100%; }
  .ccw-modal .sheet-foot .ccw-msg { display: none; }
}

/* ── Desktop ───────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .ccw .ccw-card { padding: 26px; }
  .ccw .ccw-opts.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .ccw .ccw-gal-shot { height: 208px; }
}

@media (min-width: 900px) {
  /* The preview is FIRST in the DOM (so a phone gets it next to the typing)
     and is placed into column 2 here. Sticky because the plan is taller than
     the screen: a live preview that scrolls away by module three is not a live
     preview. */
  .ccw .ccw-split { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
  .ccw .ccw-split > .ccw-main { grid-column: 1; grid-row: 1; }
  .ccw .ccw-split > .ccw-side { grid-column: 2; grid-row: 1; position: sticky; top: 12px; }
  .ccw .ccw-gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ccw .ccw-preview-toggle { display: none; }
}

@media (min-width: 1200px) {
  .ccw .ccw-gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Toast ─────────────────────────────────────────────────────────── */
/* Body-level, so it sits outside .ccw. It was inline style in the JS for
   the same reason everything else here was: there was nowhere to put it. */
.ccw-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--surface);
  padding: 10px 18px; border-radius: var(--radius); font-size: 13.5px;
  z-index: 10010; transition: opacity .25s; max-width: 88vw; opacity: 0;
}