/* course-page.css — the coach's tabbed course page (blueprint §5.2, D53).
 *
 * App-shell design system ONLY (CODING-STANDARDS 2026-07-23): every value is
 * an app-shell token — zero raw hex, zero `--rk-*`. `outreach-funnel.css` is
 * the discipline this copies; the tokens are the current canon, not that
 * file's legacy ui-kit ones.
 *
 * Everything is prefixed `.cpg-` and, where it re-asserts a shell primitive,
 * scoped under `.cpg-page` — the Control Centre restyle was bitten twice by
 * bare globals being clobbered later in the cascade (app-styles-v2.css /
 * discover.css), so this file neither relies on a bare global nor redefines
 * one outside its own page.
 *
 * MOBILE FIRST (D35). Base rules are the 390px phone; the desktop overrides
 * live in one `min-width: 700px` block at the bottom. The tab strip is the
 * one piece of real design work here — see the note above `.cpg-tabs`.
 */

/* ── Header ─────────────────────────────────────────────────────────── */

.cpg-page { min-width: 0; }

.cpg-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.cpg-head-main { min-width: 0; overflow-wrap: anywhere; }
.cpg-head h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--text);
}
.cpg-head-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Crumbs are 10.5px uppercase mono with 0.18em tracking, so at 390 the words
   broke mid-word — "COMMUNIT / Y". Wrap between crumbs, never inside one, and
   drop the course-title crumb on a phone: the 24px H1 immediately below says
   exactly the same thing. */
.cpg-page .page-head-crumbs { flex-wrap: wrap; }
.cpg-page .page-head-crumbs > * { white-space: nowrap; }
.cpg-page .page-head-crumbs > :nth-last-child(-n+2) { display: none; }
.cpg-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* ── The .btn re-assertion (CODING-STANDARDS' documented cascade gotcha) ──
 * `app-styles-v2.css:378` declares a bare `.btn { border: none; border-radius:
 * 6px; padding: 10px 20px; font-size: 14px }` and loads AFTER app-shell.css, so
 * at equal specificity it wins — which strips `.btn-secondary`'s border across
 * the whole app. Measured firsthand in the browser here: a .btn-secondary
 * computes `border: 0px none`, and a white button with no border on a white
 * `--surface` panel is invisible. ("Set up cohorts" and "Manage product" both
 * read as plain text.) outreach-dashboard.css defends itself the same way;
 * this is that defence, scoped to this page.
 *
 * The 44px floor is the other half: the shell's .btn is ~38px tall, under the
 * design system's minimum touch target (D35 / design principles §4).
 */
.cpg-page .btn {
  min-height: 44px;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
}
.cpg-page .btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.cpg-page .btn-secondary:hover { background: var(--surface-2); }
.cpg-page .btn-dark { background: var(--text); color: var(--surface); border: none; }
.cpg-page .btn-primary { background: var(--accent); color: var(--surface); border: none; }
.cpg-page .btn.cpg-btn-tight { min-height: 44px; padding: 7px 12px; font-size: 12.5px; }
/* A button living INSIDE a sentence (the certificates "Plain" note's Branded
   switch). Design audit F7: the tweak was inline `padding:2px 8px` — the
   design system says a variation is a modifier class, so here it is. */
.cpg-page .btn.cpg-btn-inline { min-height: 0; padding: 2px 8px; font-size: 12.5px; }
/* Native checkboxes render ~13px. The TAP TARGET is the 44px-tall <label>
   that wraps each one (every checkbox on this page is inside one), but a
   13px box next to 14px type also just looks wrong — so the control is
   scaled to something a thumb can see as well as hit. */
.cpg-page input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 20px; }

/* ── Tab strip ───────────────────────────────────────────────────────
 * SIX tabs on a 390px screen. Kajabi scroll-strips theirs, which hides half
 * the tabs behind a swipe with no affordance that they exist — the coach has
 * to discover Certificates by dragging. We deliberately diverge: a wrapping
 * 3-across grid shows all six at once, in two rows, with nothing hidden and
 * no horizontal scroll anywhere on the page. On desktop the same markup lays
 * out as one inline pill row (the app-shell `.tabs` idiom from the Outreach
 * dashboard).
 */
.cpg-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 18px;
}
.cpg-tab {
  border: none;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  line-height: 1.2;
  transition: background .12s, color .12s;
}
.cpg-tab:hover { color: var(--text); }
.cpg-tab.on {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px var(--border-strong);
}
.cpg-tab .n {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: var(--text-3);
}
.cpg-tab.on .n { color: var(--accent); }
/* A red dot, not a number: "there is something to look at here" without
   pretending to a count we have not fetched. */
.cpg-tab .todo {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn);
  flex: 0 0 6px;
}

/* ── Panels + shared bits ────────────────────────────────────────────── */

.cpg-panel { margin-bottom: 16px; }
.cpg-panel:last-child { margin-bottom: 0; }

.cpg-section-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
.cpg-section-sub {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 0;
}
.cpg-row-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cpg-msg { margin: 10px 0 0; font-size: 13px; color: var(--text-3); }
.cpg-msg.good { color: var(--good); }
.cpg-msg.bad { color: var(--danger); }

/* An honest empty state: what will live here, and that it does not yet.
   The top margin is not decoration — with none, the dashed border landed
   flush against the last line of the paragraph above it and read as an
   overlap. */
.cpg-soon {
  margin-top: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 16px 18px;
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.55;
}
.cpg-soon b { color: var(--text-2); font-weight: 600; }
.cpg-soon .t {
  display: flex; align-items: center; gap: 8px;
  color: var(--text); font-weight: 600; font-size: 14px;
  margin-bottom: 6px;
}

/* ── Stat tiles ──────────────────────────────────────────────────────── */

.cpg-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.cpg-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  min-width: 0;
}
.cpg-tile .label { font-size: 12px; color: var(--text-3); font-weight: 500; }
.cpg-tile .value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: anywhere;
}
.cpg-tile .hint { font-size: 11.5px; color: var(--text-3); }

/* ── Progress bar ────────────────────────────────────────────────────── */

.cpg-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
  flex: 1;
  min-width: 60px;
}
.cpg-bar > i { display: block; height: 100%; background: var(--accent); }
.cpg-bar.done > i { background: var(--good); }
.cpg-barline { display: flex; align-items: center; gap: 8px; }
.cpg-barline .pct {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px; color: var(--text-3);
  min-width: 34px; text-align: right;
}

/* ── Generic list row (members, offers, curriculum, certificates) ────── */

.cpg-list { display: flex; flex-direction: column; }
.cpg-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}
.cpg-item:last-child { border-bottom: none; }
.cpg-item-body { min-width: 0; flex: 1; }
.cpg-item-title {
  font-weight: 600; color: var(--text); font-size: 14px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.cpg-item-meta {
  color: var(--text-3); font-size: 12.5px; margin-top: 3px;
  overflow-wrap: anywhere;
}
.cpg-item-ico { font-size: 17px; flex: 0 0 auto; line-height: 1.4; }
/* Row actions wrap under the title on a phone rather than squeezing it. */
.cpg-item-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cpg-item-actions .btn {
  min-height: 44px; padding: 8px 11px; font-size: 12.5px;
}
.cpg-iconbtn {
  min-height: 44px; min-width: 44px;
  justify-content: center; padding: 8px 10px;
}
.cpg-danger-text { color: var(--danger); }

/* ── Curriculum (Outline) ───────────────────────────────────────────── */

.cpg-module {
  border-top: 1px solid var(--border-soft);
  padding: 16px 20px;
}
.cpg-module:first-child { border-top: none; }
.cpg-module-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.cpg-module-head .ttl { font-weight: 600; font-size: 14.5px; color: var(--text); }
.cpg-module-head .cnt { color: var(--text-3); font-size: 12.5px; }
.cpg-module-tools { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.cpg-subform {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px;
  margin: 6px 0 10px;
}

/* The fill-in checklist. */
.cpg-fill {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.cpg-fill-ring { flex: 0 0 auto; color: var(--text); }
.cpg-check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px; color: var(--text-2);
}
.cpg-check-row:last-child { border-bottom: none; }
.cpg-check-row:hover { background: var(--surface-2); }
.cpg-check-row.done { color: var(--text-3); }
.cpg-check-row .lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* ── Template picker (Customize) ─────────────────────────────────────── */

.cpg-tpl-layout { display: flex; flex-direction: column; gap: 16px; }
.cpg-tpl-preview { min-width: 0; }
.cpg-vp-chips { display: flex; gap: 4px; }
.cpg-vp-chips button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  border-radius: 999px;
  padding: 7px 13px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  min-height: 44px;
}
.cpg-vp-chips button.on {
  background: var(--accent); color: var(--surface); border-color: transparent;
}
.cpg-tpl-list {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.cpg-tpl-cat {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 12px 14px 4px;
}
.cpg-tpl {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent;
  padding: 11px 14px;
  border-top: 1px solid var(--border-soft);
  font-family: inherit;
  min-height: 44px;
}
.cpg-tpl:hover { background: var(--surface-2); }
.cpg-tpl.on { background: var(--accent-softer); }
.cpg-tpl .nm {
  font-weight: 600; font-size: 13.5px; color: var(--text);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.cpg-tpl .fl { color: var(--text-3); font-size: 12px; line-height: 1.45; margin-top: 2px; }

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

@media (min-width: 700px) {
  .cpg-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
  }
  .cpg-head-main { flex: 1; }
  .cpg-head h1 { font-size: 32px; }
  .cpg-head-actions { flex-shrink: 0; }
  .cpg-page .page-head-crumbs > :nth-last-child(-n+2) { display: inline; }

  .cpg-tabs {
    display: inline-flex;
    grid-template-columns: none;
    flex-wrap: wrap;
  }
  .cpg-tab { padding: 8px 16px; font-size: 13px; }

  .cpg-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  .cpg-item { align-items: center; }
  .cpg-item-actions { margin-top: 0; flex-wrap: nowrap; flex-shrink: 0; }

  .cpg-tpl-layout { flex-direction: row; align-items: flex-start; }
  .cpg-tpl-picker { flex: 0 0 320px; min-width: 0; }
  .cpg-tpl-preview { flex: 1; min-width: 0; }
}

/* ══ APPENDED BLOCK — collapsible Outline sections (2026-07-30) ═════════
 * Added at the END of the file on purpose: another session is restructuring
 * the button rules above at the same time, so nothing up there is touched.
 * These rules dress the native <details>/<summary> that course-outline.js
 * now renders for each section (see the note above _groupHtml there).
 * Everything is an app-shell token — no raw hex, as in the rest of the file.
 * Not inside the desktop media query: a collapsed section is as useful at
 * 1440 (the tab was 2,639px there) as it is on a phone.
 */
details.cpg-module > summary {
  /* .cpg-module-head already supplies the flex row; a summary needs its own
     display so the browser's disclosure triangle is replaced by our chevron. */
  display: flex;
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  margin: 0;
  padding: 2px 0;
}
details.cpg-module > summary::-webkit-details-marker { display: none; }
details.cpg-module > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
details.cpg-module > summary:hover .ttl { color: var(--accent-deep); }
/* The chevron is the whole affordance, so it is drawn rather than typed —
   a text glyph sits on its own baseline and lines up differently per font. */
.cpg-chev {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
details.cpg-module[open] > summary .cpg-chev { transform: rotate(45deg); }
/* The count and the badge are the collapsed section's whole content, so they
   never get pushed off the row by the title. */
details.cpg-module > summary .ttl { min-width: 0; overflow-wrap: anywhere; }
details.cpg-module > summary .badge { flex: 0 0 auto; }
details.cpg-module > .cpg-list,
details.cpg-module > .cpg-section-sub { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
 * LESSON EDITOR (blueprint §5.10 / scope item 11) — appended block.
 * Everything below belongs to js/lesson-editor.js. App-shell tokens only,
 * zero raw hex, mobile-first: the base rules ARE the 390px phone.
 *
 * The one place this file reaches outside `.cpg-` is `.ql-*` — Quill's own
 * classes. quill.snow.css ships a light-grey chrome of its own hexes that
 * does not belong to any of our themes, so it is re-skinned onto the shell
 * tokens rather than left to sit as a foreign panel in the middle of the
 * form. Scoped under `.cpg-editor` so the broadcast composer's Quill (the
 * other consumer in this app) is untouched.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── The lesson row's thumbnail ─────────────────────────────────────── */
/* It stands in for the type glyph, in the same leading slot. The size is on
   the IMAGE, not on the slot: `.cpg-item-ico` is an auto-width flex item, so
   a percentage height/width there resolves against nothing and a 640px
   source fills the whole row — measured in the browser, exactly that. */
.cpg-item-thumb {
  width: 46px;
  height: 26px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ── The thumbnail control ──────────────────────────────────────────── */
.cpg-thumb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cpg-thumb-box {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cpg-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpg-thumb-empty { font-size: 11px; color: var(--text-3); text-align: center; padding: 0 6px; }
.cpg-thumb-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── The attachment control (file + audio share it) ─────────────────── */
.cpg-att-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── The row above the editor: what the box is for, and the AI offer ──── */
/* The draft button used to live INSIDE the <label>, which wrapped it into
   the middle of the sentence at 390px. Its own row, hint left, button right,
   stacking to two lines only when it genuinely has to. */
.cpg-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.cpg-body-head > .cpg-section-sub { min-width: 0; margin: 0; }
.cpg-body-head > .btn { margin-left: auto; }

/* ── The video picker grid ──────────────────────────────────────────── */
/* Was three inline `style=` attributes inside the JS; the markup moved to a
   module, so its styling moved to the stylesheet with it. */
.cpg-vidgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}
.cpg-vidcard {
  display: block;
  padding: 6px;
  text-align: left;
  min-height: 44px;
}
.cpg-vidcard img { width: 100%; border-radius: 6px; display: block; margin-bottom: 4px; }
.cpg-vidcard span { font-size: 12px; }

/* ── The AI draft offer (D51 — offered, never assumed) ──────────────── */
/* Deliberately does NOT look like the editor: it is a card the coach reads
   and decides about, tinted with the accent-soft the rest of the app uses
   for "this came from us, not from you". */
.cpg-draft {
  border: 1px solid var(--accent-soft);
  background: var(--accent-softer);
  border-radius: var(--radius);
  padding: 12px;
  margin: 0 0 10px;
}
.cpg-draft-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.cpg-draft-head strong { font-size: 13px; color: var(--text); }
.cpg-draft-body {
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.cpg-draft-body > :first-child { margin-top: 0; }
.cpg-draft-body > :last-child { margin-bottom: 0; }
.cpg-draft-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ── Quill, re-skinned ──────────────────────────────────────────────── */
.cpg-editor { min-width: 0; }
.cpg-page .cpg-editor + .ql-container,
.cpg-page .ql-toolbar.ql-snow,
.cpg-page .ql-container.ql-snow { border-color: var(--border); }
.cpg-page .ql-toolbar.ql-snow {
  background: var(--surface-2);
  border-radius: 10px 10px 0 0;
  /* The toolbar wraps to two or three rows at 390px. Row spacing has to be
     generous enough that the wrapped rows read as rows rather than as one
     soup of glyphs. */
  padding: 6px 6px 2px;
}
.cpg-page .ql-toolbar.ql-snow .ql-formats { margin-right: 7px; margin-bottom: 3px; }
/* The header picker's label ("Normal") is wide enough by default to push the
   toolbar to a third row at 390px. Narrowing it fits the whole toolbar into
   two, which is the difference between a control strip and a wall. */
.cpg-page .ql-snow .ql-picker.ql-header { width: 86px; }
.cpg-page .ql-container.ql-snow {
  border-radius: 0 0 10px 10px;
  background: var(--surface);
  /* 16px: anything smaller makes iOS Safari zoom the page on focus, and a
     coach fixing a typo on their phone (D35) then has to pinch back out. */
  font-size: 16px;
  font-family: inherit;
}
.cpg-page .ql-editor {
  min-height: 190px;
  color: var(--text);
  line-height: 1.6;
  padding: 12px 14px;
}
.cpg-page .ql-editor.ql-blank::before {
  color: var(--text-3);
  font-style: normal;
  left: 14px;
  right: 14px;
}
.cpg-page .ql-editor img { max-width: 100%; height: auto; border-radius: 8px; }
.cpg-page .ql-editor blockquote {
  border-left: 3px solid var(--accent-soft);
  color: var(--text-2);
  padding-left: 12px;
}
.cpg-page .ql-editor pre {
  background: var(--surface-3);
  color: var(--text);
  border-radius: 8px;
}
/* Quill draws its toolbar icons with `stroke`/`fill` on inline SVG, so the
   token has to reach them there — a colour on the button does nothing. */
.cpg-page .ql-snow .ql-stroke { stroke: var(--text-2); }
.cpg-page .ql-snow .ql-fill { fill: var(--text-2); }
.cpg-page .ql-snow .ql-picker { color: var(--text-2); }
.cpg-page .ql-snow.ql-toolbar button { width: 32px; height: 30px; }
.cpg-page .ql-snow.ql-toolbar button:hover .ql-stroke,
.cpg-page .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.cpg-page .ql-snow .ql-picker-label:hover .ql-stroke { stroke: var(--accent); }
.cpg-page .ql-snow.ql-toolbar button:hover .ql-fill,
.cpg-page .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent); }
.cpg-page .ql-snow.ql-toolbar button:hover,
.cpg-page .ql-snow.ql-toolbar button.ql-active { background: var(--accent-softer); border-radius: 6px; }
.cpg-page .ql-snow .ql-picker-options {
  background: var(--surface);
  border-color: var(--border);
  border-radius: 8px;
}
/* Quill renders the link tooltip in a fixed-position bubble; on a phone it
   can otherwise sit half off the left edge. */
.cpg-page .ql-snow .ql-tooltip {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 8px 24px var(--border-strong);
  border-radius: 10px;
  max-width: calc(100vw - 32px);
  left: 8px !important;
}
.cpg-page .ql-snow .ql-tooltip input[type=text] {
  border-color: var(--border);
  border-radius: 6px;
  color: var(--text);
  background: var(--surface);
}

@media (min-width: 700px) {
  .cpg-item-thumb { width: 64px; height: 36px; border-radius: 7px; }
  .cpg-thumb-box { width: 128px; }
  .cpg-page .ql-editor { min-height: 240px; }
  .cpg-page .ql-container.ql-snow { font-size: 15px; }
  .cpg-page .ql-snow .ql-tooltip { max-width: none; left: 0 !important; }
}

/* ── Courses §5.8 / D12 — the 1:1 tab (.cs-*) ─────────────────────────
 * APPENDED BLOCK. This file is shared with other workstreams in flight, so
 * everything for the 1:1 tab lives here in one commented block under its own
 * `cs-` prefix and touches nothing above it.
 *
 * App-shell tokens only, zero raw hex, like the rest of the file — so it
 * follows the shell into dark mode with no second palette to keep in step.
 *
 * Mobile-first (D35). The weekly grid is the only genuinely new shape: on a
 * phone each day is a stacked block (the day name above its windows, because
 * a side-by-side label steals a third of a 390px row from two time inputs);
 * from 640px the name becomes a fixed left column and the windows flow beside
 * it, which is the shape a coach scans down.
 */

.cs-grid { margin-top: 14px; display: flex; flex-direction: column; }
.cs-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.cs-day:last-child { border-bottom: none; }
.cs-day-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.cs-day-wins { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* One window = two times and a remove button, kept together so a wrap never
   splits "09:00 – 12:00" across two lines. */
.cs-win {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 6px 4px 8px;
}
.cs-dash { color: var(--text-3); font-size: 13px; }
.cs-time {
  /* The time inputs are sized to their content (5 characters) rather than
     stretching, so three windows fit on one row at 390px. */
  width: 72px;
  min-height: 40px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
}
.cs-x {
  border: none;
  background: none;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  /* 44px tap target without a 44px-wide box eating the row. */
  padding: 12px 6px;
  margin: -12px 0;
}
.cs-x:hover { color: var(--danger); }

/* A previewed slot. Reads as a chip, not a button — the coach cannot book it,
   and a control that looks pressable but is not is a small lie. */
.cs-slot {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--text-2);
}

.cs-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--surface-3);
  color: var(--text-3);
}
.cs-badge.good      { background: var(--good-soft); color: var(--good); }
.cs-badge.bad       { background: var(--danger-soft); color: var(--danger); }
.cs-badge.cancelled { background: var(--warn-soft); color: var(--warn); }

@media (min-width: 640px) {
  .cs-day {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .cs-day-name { flex: 0 0 92px; padding-top: 10px; }
  .cs-day-wins { flex: 1; min-width: 0; }
}

/* ══ APPENDED BLOCK — certificates: element toggles + verification (D19,
 * 2026-07-31) ══════════════════════════════════════════════════════════
 * Appended at the END on purpose — other sessions are editing the rules
 * above concurrently, so nothing up there is touched. App-shell tokens
 * only, no raw hex, mobile-first (D35): a coach checks a certificate on a
 * phone as readily as a student opens one on one.
 */

/* A checkbox + its label as one 44px tap target. Replaces the inline
 * style triplet the older panels repeat; used by the new certificate
 * controls. */
.cpg-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 44px;
}
.cpg-check > input[type="checkbox"] { accent-color: var(--accent); }

/* The verification explainer. Tinted rather than bordered so it reads as
 * a statement about the product, not another form field. */
.cpg-verify-note {
  background: var(--accent-softer);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.cpg-verify-note p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
}
.cpg-verify-note p:last-child { margin-bottom: 0; }
.cpg-verify-note b { color: var(--text); font-weight: 600; }

.cpg-verify-live { margin-top: 14px; }

/* A real URL, shown in full so the coach can see it is an ordinary public
 * link. Wraps rather than scrolls — a truncated proof is not a proof. */
.cpg-code {
  display: block;
  margin: 6px 0 10px;
  padding: 9px 11px;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-2);
  overflow-wrap: anywhere;
}

/* Element toggles in the certificate design editor. The hint sits under
 * the label and indents to the label's text, so a column of six reads as
 * a list of decisions rather than a wall. */
.cert-el-row { margin-bottom: 14px; }
.cert-el-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: 44px;
  font-weight: 500;
  color: var(--text);
}
.cert-el-label > input[type="checkbox"] {
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.cert-el-row > .hint { margin-left: 26px; }

/* The certificate design editor's crumb trail has four segments
 * ("Community / Courses / <course title> / Certificates"). `.page-head-crumbs`
 * is a non-wrapping flex row, so on a 390px phone each segment collapsed to
 * min-content and rendered one letter per line. Scoped to this screen rather
 * than changed globally — every other page's crumbs are short and fine. */
.cert-editor .page-head-crumbs { flex-wrap: wrap; row-gap: 2px; }

/* ══ APPENDED BLOCK — 1:1 sessions: the coach's own calendar (§5.8 / D12,
 * 2026-07-31) ══════════════════════════════════════════════════════════
 * Appended at the END for the same reason the certificates block above
 * was: other sessions are editing the rules further up concurrently, so
 * nothing there is touched. App-shell tokens only — no raw hex — and
 * mobile-first (D35): every rule below is the phone layout, and the one
 * media query widens it. */

/* The pre-connect explanation. Reads as a quiet inset rather than a
   second card, because it sits inside a panel that already has a title. */
.cs-cal-offer { margin-top: 4px; }

/* §MANAGE-RETHINK row 3 — the education strip and the "How you'll know" pane */
.cs-edu { display: flex; gap: 11px; align-items: flex-start; background: var(--accent-soft, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.cs-edu .ei { font-size: 17px; line-height: 1.3; }
.cs-edu b { color: var(--text); }
/* §CAL-CONNECT.1 — the calendar banner: prominent until connected, gone after. */
.cs-calwarn { display: flex; align-items: center; gap: 11px; background: var(--warn-soft, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--warn, var(--accent)) 35%, transparent); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.cs-calwarn .ci { font-size: 17px; }
.cs-calwarn .ct { flex: 1; min-width: 200px; }
.cs-calwarn .ct b { color: var(--text); }
.cs-calwarn-btn { background: var(--warn, var(--accent)); color: var(--surface); border: none; white-space: nowrap; }

/* §LIVE-SESSIONS-FOLD — the pane list: one header row per section, one open. */
.cs-fold { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 12px; overflow: hidden; }
.cs-fold.open { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.cs-fhead { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 13px 15px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.cs-fhead .ft { flex: 1; min-width: 0; }
.cs-fhead .ft b { display: block; font-size: 14px; }
.cs-fhead .ft span { display: block; font-size: 11.5px; color: var(--text-3); }
.cs-fhead .fchev { color: var(--text-3); font-size: 14px; }
.cs-fold.shut .cs-fhead { opacity: .78; }
.cs-fold.shut .cs-fbody { display: none; }
.cs-fbody { padding: 0 14px 14px; }
.cs-fbody .panel { border: 0; box-shadow: none; margin-bottom: 0; }
.cs-fbody .panel .panel-body { padding-left: 0; padding-right: 0; }
.cs-student-preview { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px; margin: 0 0 14px; }
.cs-student-preview[hidden] { display: none; }
.cs-know { display: grid; gap: 10px; }
.cs-know-row { display: flex; gap: 10px; align-items: flex-start; }
.cs-know-row .ki { font-size: 15px; line-height: 1.4; }
.cs-know-row .kt b { display: block; font-size: 13px; }
.cs-know-row .kt span { display: block; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.cs-split { border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 4px; }
.cs-split:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.cs-split b { display: block; font-size: 13.5px; }
.cs-split span { display: block; font-size: 11.5px; color: var(--text-3); }
.cs-know-chip { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 2px 8px; margin-left: 7px; vertical-align: 1px; background: var(--good-soft, var(--surface-2)); color: var(--success, var(--accent)); }

.cs-cal-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cs-cal-facts li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
/* A tick, not a bullet: each line is a reassurance about what we will and
   will not do, and a bullet list reads as terms rather than promises. */
.cs-cal-facts li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--good);
  font-weight: 700;
}
.cs-cal-facts b { color: var(--text); font-weight: 600; }

/* The connected line: state chip, then which account. Wraps on a phone
   rather than truncating an email address, because a half-shown address
   is exactly the thing a coach needs to read to know it is the right one. */
.cs-cal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.cs-cal-acct {
  font-size: 13px;
  color: var(--text-2);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* The health banner. Warn = we cannot read it right now; bad = the grant
   is gone and only the coach can fix it. Both carry a date in the copy —
   "not working" without "since when" is not actionable. */
.cs-cal-alert {
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.55;
}
.cs-cal-alert.warn {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn);
}
.cs-cal-alert.bad {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
}
.cs-cal-alert b { display: block; margin-bottom: 2px; }

/* Which calendars count as busy. 44px rows so it is tappable on a phone
   without aiming at a checkbox. */
.cs-cal-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cs-cal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
}
.cs-cal-item:last-of-type { border-bottom: none; }
.cs-cal-item input[type="checkbox"] { accent-color: var(--accent); flex: 0 0 auto; }
.cs-cal-item > span { min-width: 0; overflow-wrap: anywhere; }
.cs-cal-list .cpg-row-end { padding: 10px 12px; border-top: 1px solid var(--border-soft); }

@media (min-width: 640px) {
  .cs-cal-facts li { font-size: 13.5px; }
}

/* Which-calendars line + its button. The button was inline in the sentence
   and the copy wrapped around it at 390px, which read as a broken block —
   found by looking at the rendered panel, not the markup. Stacked on a
   phone, side by side once there is room. */
.cs-cal-choice {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
@media (min-width: 640px) {
  .cs-cal-choice { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
  .cs-cal-choice > p { flex: 1; min-width: 0; }
}

/* ── Courses §5.11 / D26 + D30 — the assistant's two coach surfaces ────
 *
 * `.cpg-src-*` is the D26 source-toggle block, which lives INSIDE the
 * Settings tab's assistant panel; `.cpa-*` is the full-screen "what your
 * students asked" report (course-assistant-log.js).
 *
 * App-shell tokens only, zero raw hex, mobile-first like the rest of this
 * file: base rules are the 390px phone, and the one desktop block sits at
 * the bottom of this section.
 *
 * The one piece of real design thinking here is the toggle row. Turning a
 * source off DELETES its indexed passages, so the row has to carry the
 * number that is about to be lost right next to the switch — a count in a
 * paragraph underneath would be read after the click, not before. It is
 * deliberately styled as an ordinary settings row rather than a warning:
 * the confirm dialog carries the weight, and a red panel around four
 * default-on switches would make the safe state look dangerous.
 */

/* The toggles are a second subject inside the assistant panel — the kill
   switch above them is a different decision. Without the rule they read as
   one run-on block; found by looking at the rendered panel, not the markup. */
.cpg-src-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.cpg-src-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cpg-src {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.cpg-src:last-child { border-bottom: none; }
.cpg-src:hover { background: var(--surface-2); }
.cpg-src > input[type="checkbox"] { flex: 0 0 20px; margin-top: 2px; }
.cpg-src-body { min-width: 0; display: block; }
.cpg-src-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
/* The number that disappears if this switch is flipped. Its own line on a
   phone so it is never crushed against the label. */
.cpg-src-count {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
}
.cpg-src-blurb {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
  overflow-wrap: anywhere;
}

/* ── The report screen ──────────────────────────────────────────────── */

.cpa-screen { min-width: 0; }
/* The shell's .btn is 41px tall; this screen is not inside `.cpg-page`, so it
   does not inherit that file's 44px floor. Measured at 390px, not assumed. */
.cpa-screen .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.cpa-head { margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.cpa-screen .page-head-crumbs { flex-wrap: wrap; }
.cpa-screen .page-head-crumbs > * { white-space: nowrap; }

.cpa-ranges { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.cpa-range {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.cpa-range.on { border-color: var(--accent); color: var(--accent); background: var(--accent-softer); }

.cpa-tiles { margin-bottom: 16px; }

/* A lesson people got stuck on. The left rule is the ranking made visible
   — scanning the rules down the list is faster than reading the counts. */
.cpa-lesson { align-items: flex-start; }
.cpa-lesson.hot { border-left: 3px solid var(--danger); padding-left: 9px; }
.cpa-note { font-weight: 400; color: var(--text-3); font-size: 12.5px; }
.cpa-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cpa-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-3);
}
.cpa-pill.hot { background: var(--danger-soft); color: var(--danger); }
.cpa-pill.calm { background: var(--good-soft); color: var(--good); }

.cpa-link {
  margin-top: 8px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.cpa-samples { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.cpa-sample {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 8px 10px;
  overflow-wrap: anywhere;
}

.cpa-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.cpa-reason {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.cpa-reason .n { font-size: 17px; font-weight: 700; color: var(--text); }
.cpa-reason .l { font-size: 12.5px; color: var(--text-3); }
/* Only the reasons that mean "your course could be clearer" are marked.
   Billing and safety hand-overs are the triage working, not a defect. */
.cpa-reason.work { border-color: var(--danger); }
.cpa-reason.work .n { color: var(--danger); }

.cpa-turns { display: flex; flex-direction: column; }
.cpa-turn {
  border-bottom: 1px solid var(--border-soft);
  padding: 10px 0;
}
.cpa-turn:last-child { border-bottom: none; }
.cpa-turn.hot { border-left: 3px solid var(--danger); padding-left: 9px; }
.cpa-turn > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.cpa-turn > summary::-webkit-details-marker { display: none; }
.cpa-turn-q {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.cpa-turn-meta { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.cpa-turn-meta b { color: var(--text-2); font-weight: 600; }
.cpa-mode { color: var(--text-3); }
.cpa-mode.hot { color: var(--danger); font-weight: 600; }
.cpa-turn-a {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.cpa-more { margin-top: 12px; }

@media (min-width: 700px) {
  .cpg-src-count { display: inline; margin-left: 8px; }
  .cpa-head { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}

/* ══ APPENDED BLOCK — the Community tab (.cpg-cc-*, course↔community spec
 * §5/§6, 2026-07-31) ════════════════════════════════════════════════════
 * Appended at the END for the same reason every block above it was: other
 * sessions are editing the rules further up concurrently, so nothing there is
 * touched. App-shell tokens only — zero raw hex, nothing from the legacy
 * ui-kit variables — and mobile-first (D35): every rule here is the 390px
 * phone, and the one media query at the bottom widens it.
 *
 * ⚠️ THIS BLOCK WAS `.cc-*` UNTIL 2026-08-07 AND IT BROKE ANOTHER FEATURE.
 * `cc-` was already the Control Centre's namespace (control-centre.css,
 * 2026-07-23, 60 classes). app.html loads THIS sheet after that one, so on
 * equal specificity `.cc-row` here silently rewrote the Control Centre's rows
 * — killing their left padding and replacing `align-items: stretch` with
 * `flex-start`, which stopped the row title being constrained to its row, so
 * it ran out through the card at every width. Two rounds of spacing fixes
 * inside control-centre.css could not reach the screen, because the losing
 * declarations were never the problem. It ran the other way too: these
 * checkbox rows were wearing the Control Centre's background, border, radius
 * and — under 640px — its `flex-direction: column`, which stacked every
 * checkbox above its own label. Renamed into the `.cpg-*` namespace this
 * file already owned. `tests/css-namespace-collisions.test.js` now fails the
 * build if any feature stylesheet mints a class another one already defines.
 * Keep new classes here under `.cpg-`.
 *
 * The one piece of real design thinking is the DIMMED state. The switch is
 * off by default, and while it is off everything below it stays on screen
 * rather than disappearing: our coaches decide whether to turn a thing on by
 * reading what it gives them, and a panel that only appears after you have
 * already said yes cannot be read by anyone who has not. So "off" is drawn as
 * quieter, not absent — and the controls stay live so the whole thing can be
 * set up before the switch is ever flipped.
 */

/* The switch's own panel leads the tab, so it is tinted the way the rest of
   the app tints "this came from us" — enough to be the first thing read,
   not so much that a default-off control looks like a warning. */
.cpg-cc-hero { border-color: var(--accent-soft); }
.cpg-cc-hero .panel-head { background: var(--accent-softer); }

.cpg-cc-switch {
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
.cpg-cc-switch > input[type="checkbox"] { accent-color: var(--accent); margin-top: 2px; }

/* What turning it on gives you. A tick per line, not a bullet: each line is
   something the coach gets, and a bullet list reads as terms. Same shape the
   1:1 tab's pre-connect list uses, kept under this tab's own prefix so the
   two can diverge without one silently restyling the other. */
.cpg-cc-gains {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cpg-cc-gains li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.cpg-cc-gains li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--good);
  font-weight: 700;
}
.cpg-cc-gains b { color: var(--text); font-weight: 600; }

/* The recoverability line, shown while the switch is ON. Tinted rather than
   bordered so it reads as a statement about what happens next, not as a
   field the coach has to do something about. */
.cpg-cc-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.cpg-cc-note b { color: var(--text); font-weight: 600; }

/* Quieter, never hidden. Opacity only — no pointer-events lock — because the
   controls underneath are deliberately still usable: a coach can set the
   whole thing up and flip the switch last. */
.cpg-cc-dim { opacity: 0.62; }

.cpg-cc-pending {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* A settings row: checkbox, title, and the sentence explaining it. The hint
   sits under the title and indents to it, so a column of them reads as a
   list of decisions rather than a wall of prose. */
.cpg-cc-rows { display: flex; flex-direction: column; }
.cpg-cc-row {
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  width: 100%;
}
/* The divider belongs to a GROUP of rows, not to a row. A lone row (the
   class-list panel has exactly one) is followed by its message line, so a
   `:last-child` rule on .cpg-cc-row would still have drawn a rule under it. */
.cpg-cc-rows > .cpg-cc-row { border-bottom: 1px solid var(--border-soft); }
.cpg-cc-rows > .cpg-cc-row:last-child { border-bottom: none; }
.cpg-cc-row > input[type="checkbox"] { accent-color: var(--accent); margin-top: 2px; flex: 0 0 20px; }
.cpg-cc-row-body { min-width: 0; display: block; }
.cpg-cc-row-title {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.cpg-cc-row-hint {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
  overflow-wrap: anywhere;
}

/* Who has not answered a task. Collapsed by default — the number in the
   summary is the fact a coach scans for; the names are what they open when
   they have decided to do something about it. */
.cpg-cc-who { margin-top: 8px; }
.cpg-cc-who > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}
.cpg-cc-who > summary::-webkit-details-marker { display: none; }
.cpg-cc-who > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.cpg-cc-who-list { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.cpg-cc-who-name {
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px 10px;
  overflow-wrap: anywhere;
}

/* The cross-links. Stacked full-width on a phone so each is a whole tap
   target; side by side once there is room for two. */
.cpg-cc-links { display: flex; flex-direction: column; gap: 8px; }
.cpg-cc-links .btn { width: 100%; justify-content: center; }

@media (min-width: 640px) {
  .cpg-cc-links { flex-direction: row; flex-wrap: wrap; }
  .cpg-cc-links .btn { width: auto; }
  .cpg-cc-row-hint { font-size: 13px; }
}

/* ── The Builder, docked beside the curriculum ──────────────────────────
 *
 * Layout only. The panel itself is the shared assistant component
 * (css/assistant-panel.css); this file says where it sits and nothing about
 * how it looks, which is the same division Launch Studio and Content Review
 * keep.
 *
 * 375px-first, so the default is one column with the panel UNDER the
 * curriculum: on a phone there is no room to dock anything, and a panel that
 * pushed the lessons into a 40%-wide strip would make the tab worse for the
 * coach it was meant to help. It becomes a column at 1120px — the same
 * breakpoint the other two docked surfaces use, so the platform changes shape
 * at one width rather than three.
 */
.cpg-build-grid { display: block; }
.cpg-build-side { margin-top: 16px; }
/* The panel scrolls inside its own height only once it is a docked column;
 * stacked on a phone it sizes to its content like everything else. */
.cpg-build-side .rc-thread { max-height: 320px; overflow-y: auto; }
.cpg-build-side .cbp-out { white-space: pre-wrap; }
.cpg-build-side .cbp-out-act { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
/* 48px touch targets on the two controls a thumb actually hits. The component
 * sizes them for a mouse; a phone is not a mouse. */
.cpg-build-side .rc-send,
.cpg-build-side .rc-voice { width: 48px; height: 48px; }
.cpg-build-side .rc-mchip { min-height: 48px; }

@media (min-width: 1120px) {
  .cpg-build-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
  .cpg-build-side { margin-top: 0; }
  .cpg-build-side .rc-maya { position: sticky; top: 16px; height: calc(74vh + 46px); }
  .cpg-build-side .rc-thread { flex: 1; max-height: none; }
  /* Back to the component's own sizing where there is a pointer. */
  .cpg-build-side .rc-send,
  .cpg-build-side .rc-voice { width: 34px; height: 34px; }
  .cpg-build-side .rc-mchip { min-height: 0; }
}