/* 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; }
/* 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; }

.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; }
}