/* ══════════════════════════════════════════════════════════════════════
   css/course-home.css — the parts only a course has (js/course-home.js).

   Everything else is the funnel home's kit (`.fh`, css/funnel-home.css), so
   the two homes look and behave alike. Drawn from the approved artefact
   https://claude.ai/artifact/8u318Lg6cH88JmeSx3qPoS. Scoped under `.ch`.
   ══════════════════════════════════════════════════════════════════════ */

.ccw.ch-on .ch-host { width: 100%; max-width: 1180px; margin: 0 auto; }
.ch.fh { padding-top: 8px; }

.ch .fh-todo-ic.ch-good { background: var(--fh-good-soft); color: var(--fh-good); }
.ch .fh-todo-ic.ch-bad { background: var(--fh-bad-soft); color: var(--fh-bad); }
.ch .ch-warn-t { color: var(--fh-warn); }

.ch .ch-ready-h { display: flex; align-items: center; gap: 12px; }
.ch .ch-meter { width: 120px; height: 8px; border-radius: 4px; background: var(--fh-surface-3); overflow: hidden; }
.ch .ch-meter i { display: block; height: 100%; background: var(--fh-good); border-radius: 4px; }

/* modules and lessons */
.ch .ch-mods { display: flex; flex-direction: column; }
.ch .ch-mod { border-top: 1px solid var(--fh-border); }
.ch .ch-mod:first-child { border-top: 0; }
.ch .ch-mod > button, .ch .ch-mod-h { width: 100%; border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; }
.ch .ch-mod > button:hover { background: var(--fh-surface-2); }
.ch .ch-mnum { width: 30px; height: 30px; border-radius: 9px; background: var(--fh-accent-soft); color: var(--fh-accent-deep); display: grid; place-items: center; font-weight: 700; font-family: var(--fh-display); }
.ch .ch-mt { min-width: 0; }
.ch .ch-mt b { display: block; overflow-wrap: anywhere; }
.ch .ch-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ch .ch-st { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ch .ch-st.ok { background: var(--fh-good-soft); color: var(--fh-good); }
.ch .ch-st.warn { background: var(--fh-warn-soft); color: var(--fh-warn); }
.ch .ch-row-warn { color: var(--fh-warn); }
.ch .ch-stale-checkout { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--fh-warn-soft); color: var(--fh-warn); font-size: 13.5px; }
.ch small.ch-row-warn { display: block; margin-top: 2px; }
.ch .ch-st.plain { background: var(--fh-surface-3); color: var(--fh-text-2); }
.ch .ch-lessons { padding: 0 16px 12px 62px; display: flex; flex-direction: column; gap: 6px; }
.ch .ch-lesson { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--fh-border); border-radius: 10px; background: var(--fh-surface); }
.ch .ch-lesson > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ch .ch-lrow-r { display: inline-flex; align-items: center; gap: 6px; }
.ch .ch-lacts { display: inline-flex; gap: 2px; }
.ch .ch-ib { width: 28px; height: 28px; border: 1px solid var(--fh-border); border-radius: 8px; background: var(--fh-surface); color: var(--fh-muted, #6b7280); cursor: pointer; font-size: 13px; line-height: 1; }
.ch .ch-ib:hover:not(:disabled) { color: inherit; border-color: currentColor; }
.ch .ch-ib:disabled { opacity: .35; cursor: default; }
.ch .ch-ladd { margin: 4px 2px 2px; align-self: flex-start; }
.ch .ch-ladd-f { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.ch .ch-ladd-f .input { flex: 1; min-width: 0; }
.ch .ch-k { font-size: 12px; color: var(--fh-text-3); margin-left: 6px; }
/* when a lesson opens (round 7): the module's day under its title, a chip per
   lesson, and the one-number form that changes either */
.ch .ch-added { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--fh-border); }
.ch .ch-added-acts { flex-wrap: wrap; }
.ch .ch-added-url { width: 100%; font-size: 12.5px; }
.ch .ch-smail { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--fh-border); }
.ch .ch-smail-acts { flex-wrap: wrap; }
.ch .ch-smail-pv { display: flex; flex-direction: column; gap: 8px; }
.ch .ch-smail-frame { width: 100%; height: 520px; border: 1px solid var(--fh-border); border-radius: 10px; background: #fff; }
.ch .ch-stu-refund { margin: 0 0 10px; font-size: 13px; color: var(--fh-text-2); }
.ch .ch-mrel { display: block; font-size: 12.5px; color: var(--fh-text-2); margin-top: 2px; }
.ch .ch-rel { margin-left: 8px; font: inherit; font-size: 11.5px; font-weight: 600; border: 1px solid var(--fh-border); border-radius: 999px; padding: 1px 8px; background: var(--fh-surface-2); color: var(--fh-text-2); cursor: pointer; white-space: nowrap; }
.ch .ch-rel:hover { border-color: currentColor; }
.ch .ch-rel.early { background: var(--fh-warn-soft); color: var(--fh-warn); border-color: transparent; }
.ch .ch-relf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 13px; }
.ch .ch-relf .input { width: 72px; display: inline-block; margin: 0 4px; }
.ch .ch-addstep { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--fh-border); }

.ch .ch-mt small { display: block; font-size: 12.5px; color: var(--fh-text-3); font-weight: 400; margin-top: 2px; }

/* Needs you: what the coach put off until tomorrow */
.ch .ch-putoff { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 10px 16px; border-top: 1px solid var(--fh-border); font-size: 13px; }
.ch .ch-putoff-i { color: var(--fh-text-2); }

/* the reminder Maya drafted, waiting for the coach */
.ch .ch-rm { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--fh-border); }
.ch .fh-card-h + .ch-rm { border-top: 0; }
.ch .ch-rm-h { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.ch .ch-rm-h b { display: block; }
.ch .ch-rm-h small { display: block; color: var(--fh-text-2); font-size: 12.5px; margin-top: 2px; }
.ch .ch-rm-l { font-size: 12.5px; font-weight: 600; color: var(--fh-text-2); margin-top: 4px; }
.ch textarea.ch-rm-body { font-family: inherit; font-size: 14px; line-height: 1.55; }

/* extras rows and the switch */
.ch .ch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--fh-border); }
.ch .ch-card-rows > .ch-row:first-child, .ch .fh-card-h + .ch-row { border-top: 0; }
.ch .ch-row b { display: block; font-weight: 600; }
.ch .ch-row small { display: block; color: var(--fh-text-2); font-size: 12.5px; }
.ch .ch-row-acts { display: inline-flex; gap: 8px; align-items: center; }
.ch .ch-switch { position: relative; width: 40px; height: 24px; border-radius: 999px; border: 0; background: var(--fh-border-strong); padding: 0; flex: none; }
.ch .ch-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.ch .ch-switch[aria-checked="true"] { background: var(--fh-good); }
.ch .ch-switch[aria-checked="true"]::after { left: 19px; }
.ch .ch-switch[disabled] { opacity: .6; }

/* the course page card */
.ch .ch-cover { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 10px; background: var(--fh-surface-3) center / cover no-repeat; border: 1px solid var(--fh-border); position: relative; overflow: hidden; }
/* J53/J70: the picture is an <img> so the coach's Move & zoom framing reaches it. */
.ch .ch-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ch .ch-cover-blank { display: grid; place-items: center; padding: 16px; text-align: center; background: linear-gradient(160deg, #1d2b26, #2f4a40); color: #fff; font-family: var(--fh-display); font-weight: 700; font-size: 18px; }

/* where students are */
.ch .ch-ladder { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ch .ch-lad { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px 52px; gap: 12px; align-items: center; font-size: 13.5px; }
.ch .ch-lad .num { text-align: right; }
.ch .ch-bar { height: 8px; border-radius: 4px; background: var(--fh-accent); min-width: 3px; }
.ch .ch-pct { color: var(--fh-text-3); }
.ch .ch-drop { color: var(--fh-bad); font-weight: 600; }
/* Where they stop: lesson titles are longer than the ladder's step names. */
.ch .ch-lad.ch-les { grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 44px 52px; }
.ch .ch-lad.ch-les > div:first-child { overflow-wrap: anywhere; }
.ch .ch-stop-lead { margin: 0; padding: 14px 16px 0; font-size: 13.5px; line-height: 1.5; }

/* the Selling room and the other panels, inside a tab */
.ch [data-ch-selling] > .cpg-page { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 900px) {
  .ch .fh-ov { grid-template-columns: minmax(0, 1fr); }
  .ch .fh-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ch .ch-lessons { padding-left: 16px; }
  .ch .ch-lesson { grid-template-columns: minmax(0, 1fr) auto; }
  .ch .ch-lesson .ch-st { grid-column: 1 / -1; justify-self: start; }
  .ch .ch-mod > button, .ch .ch-mod-h { grid-template-columns: 30px minmax(0, 1fr); }
  .ch .ch-chips { grid-column: 1 / -1; justify-content: flex-start; }
  /* The % column stays on a phone (sweep R4): it is the drop-off, the one
     thing the ladder is for. The label column gives up the room instead. */
  .ch .ch-lad { grid-template-columns: 92px minmax(0, 1fr) 28px 38px; gap: 8px; font-size: 12.5px; }
  .ch .ch-lad.ch-les { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 28px 38px; }
  .ch .ch-rm-h { flex-direction: column; }
}

/* Selling: the four ways in (artefact), drawn by the wizard's room in home mode */
.ch .ch-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ch .ch-opt { text-align: left; border: 1px solid var(--fh-border-strong); background: var(--fh-surface); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ch .ch-opt b { font-weight: 700; }
.ch .ch-opt small { color: var(--fh-text-2); font-size: 12.5px; line-height: 1.45; }
.ch .ch-opt[aria-pressed="true"] { border-color: var(--fh-accent); box-shadow: 0 0 0 1px var(--fh-accent) inset; background: var(--fh-accent-soft); }
.ch .ch-opt:hover { border-color: var(--fh-accent); }
.ch .ch-opt-config { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--fh-border); }
.ch .ch-radio-row { display: flex; flex-wrap: wrap; gap: 8px 18px; flex-basis: 100%; }
.ch .ch-radio { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.ch .ch-num { width: 90px; }
.ch input.ch-num[type=number] { font: inherit; border: 1px solid var(--fh-border-strong); border-radius: 9px; padding: 8px 10px; background: var(--fh-surface); color: var(--fh-text); }
.ch .ch-opt-note { margin-top: 12px; font-size: 13px; color: var(--fh-text-2); }
@media (max-width: 900px) { .ch .ch-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ch .ch-opts { grid-template-columns: minmax(0, 1fr); } }

/* The header's address pill: long free addresses ellipsise instead of pushing
   the buttons onto their own row (a paid course carries one pill more). */
@media (min-width: 901px) { .ch .fh-head .fh-addr { max-width: 100%; } }

/* Students tab: the groups, and the list (a table on a desk, cards on a phone) */
.ch .ch-stu-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ch .ch-stu-q { margin-left: auto; min-width: 220px; max-width: 320px; flex: 1 1 220px; }
@media (max-width: 640px) { .ch .ch-stu-q { margin-left: 0; max-width: none; } }
.ch .fh-seg .ch-n { font-weight: 700; margin-left: 2px; }
.ch .ch-tbl-wrap { overflow-x: auto; border-top: 1px solid var(--fh-border); }
.ch .ch-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ch .ch-tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--fh-text-3); padding: 10px 16px; border-bottom: 1px solid var(--fh-border); }
.ch .ch-tbl td { padding: 10px 16px; border-bottom: 1px solid var(--fh-border); vertical-align: top; }
.ch .ch-tbl tr:last-child td { border-bottom: 0; }
/* A student row opens their Subscribers record (round 3). */
.ch .ch-tbl tr[data-ch-stu-open] { cursor: pointer; }
.ch .ch-tbl tr[data-ch-stu-open]:hover td, .ch .ch-tbl tr[data-ch-stu-open]:focus-visible td { background: var(--fh-surface-2, rgba(127,127,127,.08)); }
.ch .ch-tbl tr[data-ch-stu-open]:focus-visible { outline: 2px solid var(--fh-accent, #7c3aed); outline-offset: -2px; }
.ch .ch-tbl td small { display: block; color: var(--fh-text-3); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .ch .ch-tbl thead { display: none; }
  .ch .ch-tbl, .ch .ch-tbl tbody, .ch .ch-tbl tr, .ch .ch-tbl td { display: block; width: 100%; }
  .ch .ch-tbl tr { padding: 10px 16px; border-bottom: 1px solid var(--fh-border); }
  .ch .ch-tbl td { padding: 2px 0; border: 0; }
  .ch .ch-tbl td[data-l]::before { content: attr(data-l) ": "; color: var(--fh-text-3); }
}
.ch .ch-stu-bar .fh-seg { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 640px) { .ch .ch-stu-bar .fh-seg button { padding: 6px 9px; font-size: 13px; } }

/* Settings */
.ch .ch-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .ch .ch-two { grid-template-columns: minmax(0, 1fr); } }
.ch details.ch-adv > summary { cursor: pointer; padding: 14px 16px; font-weight: 700; font-family: var(--fh-display); list-style: none; }
.ch details.ch-adv > summary::-webkit-details-marker { display: none; }
.ch details.ch-adv > summary::after { content: "▾"; margin-left: 8px; color: var(--fh-text-3); }
.ch details.ch-adv[open] > summary { border-bottom: 1px solid var(--fh-border); }
.ch .ch-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.ch .ch-danger-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ch .ch-lnum { color: var(--fh-text-3); font-variant-numeric: tabular-nums; margin-right: 2px; }

/* Emails tab */
.ch .ch-shared { font-size: 11px; font-weight: 600; color: var(--fh-text-3); background: var(--fh-surface-3); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.ch .ch-foot { margin: 0; font-size: 12.5px; }
.ch-mail-sheet { width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 10px; }
.ch-mail-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ch-mail-frame { width: 100%; flex: 1 1 auto; min-height: 420px; border: 1px solid var(--fh-border, #e5e5e5); border-radius: 10px; background: #fff; }

/* Maya card: the questions coaches ask, one tap into her box */
.ch .ch-asks { display: flex; flex-direction: column; gap: 6px; }
.ch .ch-ask { text-align: left; border: 1px solid var(--fh-border); background: var(--fh-surface-2); border-radius: 10px; padding: 8px 10px; font-size: 13px; color: var(--fh-text); }
.ch .ch-ask:hover { border-color: var(--fh-accent); background: var(--fh-accent-soft); }

/* Settings: the address panel's "Already here" list is useful but long; in the
   home it scrolls inside its own box instead of pushing the page down. */
.ch [data-ch-addr] .ccw-addr-sibs { max-height: 180px; overflow-y: auto; }

/* The header keeps its buttons on the title's row on a desk WHILE THE TITLE HAS
   ROOM: at least 360px. Below that the buttons go under the title rather than the
   title being squeezed (A18, 14 Oct 2026: at 1280px with Publish changes waiting,
   "Foundations of Strength" wrapped in a 150px column and the address read
   "adeyemi-st…"). */
@media (min-width: 1100px) {
  .ch .fh-head { flex-wrap: wrap; }
  .ch .fh-head .fh-title { flex: 1 1 360px; min-width: 0; }
  .ch .fh-head .fh-actions { flex: none; }
  .ch .fh-head .fh-meta { flex-wrap: wrap; }
}

/* A "Needs you" row puts its buttons under its words when the card is narrow, so the
   words keep a readable line (A18: one word per line on a laptop). */
.ch .fh-card { container-type: inline-size; }
@container (max-width: 640px) {
  .ch .fh-todo-row { grid-template-columns: auto minmax(0, 1fr); }
  .ch .fh-todo-acts { grid-column: 1 / -1; justify-content: flex-start; }
}


/* Add a student by name and email (Students tab). */
.ch .ch-addstu { display: grid; gap: 6px; border-top: 1px solid var(--fh-border); }
.ch .ch-addstu-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ch .ch-addstu-row .input { flex: 1 1 180px; min-width: 0; }

/* The tab row on a phone: ONE line that scrolls sideways (round 6: wrapped
   onto two lines it read as two rows of buttons). Sweep R4's finding stands,
   that a row scrolling with no visible scrollbar gave no sign of more, so the
   row fades at an edge with more tabs beyond it (`more-l` / `more-r`, set by
   `fitTabs` in course-home.js, which also scrolls the open tab into view). */
@media (max-width: 640px) {
  .ch .fh-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
  .ch .fh-tabs.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .ch .fh-tabs.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
  .ch .fh-tabs.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
}



/* ── Round 5 (2026-09-27) ─────────────────────────────────────────────── */
/* "All changes are live": a statement, not a greyed-out button. */
.ch .ch-live-ok { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--fh-good, #1c7a4d); background: var(--fh-good-soft, #e6f4ec); white-space: nowrap; }
/* Five number tiles when the course takes money. */
.ch .fh-nums.ch-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .ch .fh-nums.ch-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch .fh-nums.ch-five > *:nth-child(5) { grid-column: 1 / -1; }
}
/* The page's dialogs (course-home.js `sheet`): a × to close, a list of what
   happens, and a red action when it cannot be taken back. They are appended
   to <body>, outside `.ch`. */
.fh-sheet.ch-sheet { max-height: calc(100vh - 32px); overflow: auto; }
.fh-sheet .ch-sheet-h { display: flex; align-items: flex-start; gap: 12px; }
.fh-sheet .ch-sheet-h h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fh-sheet .ch-x { border: 0; background: none; font-size: 24px; line-height: 1; padding: 2px 6px; margin: -4px -6px 0 0; border-radius: 8px; color: #6f7390; }
.fh-sheet .ch-x:hover { background: #f1efe8; color: #15172b; }
.fh-sheet .ch-changes { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; overflow-wrap: anywhere; }
.fh-sheet .ch-bad-list li::marker { color: #c2413b; }
.fh-sheet .fh-faint { color: #8a8fa6; font-size: 12.5px; margin: 0; }
.fh-sheet .fh-link { border: 0; background: none; padding: 0; color: #4a32b8; font-weight: 600; text-decoration: underline; }
.fh-sheet .ch-sheet-acts { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.fh-sheet .fh-btn.danger { background: #c2413b; border-color: #c2413b; color: #fff; }
.fh-sheet .fh-btn.danger:hover { background: #a8342f; }
.fh-sheet .fh-btn[disabled] { opacity: .45; cursor: not-allowed; }
.fh-sheet.ch-sheet-danger { border-top: 4px solid #c2413b; }
.fh-sheet .ch-typeconf { display: grid; gap: 6px; font-size: 13.5px; }
.fh-sheet .ch-typeconf .input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #d8d3c2; border-radius: 9px; font: inherit; }
/* Emails tab: which switches are this course's and which reach every course. */
.ch .ch-mail-group + .ch-mail-group { border-top: 1px solid var(--fh-border); }
.ch .ch-mail-gh { padding: 12px 16px 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fh-text-3); }
.ch .ch-mail-gh small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; margin-top: 2px; }
/* Cohorts, Full analytics and Add from Subscribers, under the course's tabs. */
.ch .ch-stu-view > .fh-card-b { padding: 16px; }
/* The action in a dialog looked like any other button (the `.fh` tokens do not
   reach a dialog appended to <body>): Publish is the accent, as on the page. */
.fh-sheet .fh-btn.primary { background: #6a4cf1; border-color: #6a4cf1; color: #fff; }
.fh-sheet .fh-btn.primary:hover { background: #4a32b8; border-color: #4a32b8; }
/* "Email your students": include the refunded (round 8, tester b fault 3). */
.ch .ch-smail-ref { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--fh-muted, inherit); }
/* "Where they stop": the module each run of lessons belongs to (round 8, tester b fault 16). */
.ch .ch-lad-mod { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--fh-muted, #6b7280); margin: 10px 0 2px; }
.ch .ch-lad-mod:first-child { margin-top: 0; }
/* Room under the last card, so anything the Help button sits on can be
   scrolled clear of it (course round 8, tester b fault 17). */
.fh.ch { padding-bottom: 80px; }
/* Lessons opening before their module, with the one-press fix (round 8, tester b fault 10). */
.ch .ch-early { display: flex; flex-direction: column; gap: 6px; background: var(--fh-warn-bg, #fff7e6); border-bottom: 1px solid var(--fh-border); }

/* ✎ A change Claude or Maya proposed, waiting for the coach (2026-09-30).
   The same "Was / Now" look as a proposed sequence email (sequences.css
   .seq-change), so the coach meets one shape for "the AI suggested this". */
.ch-prop { border-color: var(--warn-soft, #efe3bf); background: #fffcf3; }
.ch-prop .fh-card-b { display: grid; gap: 8px; }
.ch-prop-l { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, #6b7087); }
.ch-prop-old { background: #fbeeec; color: #7a2a24; border-radius: 8px; padding: 9px 11px; font-size: 14px; line-height: 1.5; text-decoration: line-through; text-decoration-color: rgba(122,42,36,.35); }
.ch-prop-new { background: #e2f3ea; color: #0f5436; border-radius: 8px; padding: 9px 11px; font-size: 14px; line-height: 1.5; }
.ch-prop-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
/* J68/N5: "Email them a welcome" on the add-a-student form, a whole-row tap target. */
.ch .ch-addstu-welcome { display: flex; gap: 10px; align-items: center; min-height: 44px; margin: 6px 0 2px; font-size: 15px; cursor: pointer; }
.ch .ch-addstu-welcome input { width: 20px; height: 20px; margin: 0; flex: none; }

/* ── Round 2 H: the tabs are the guide's steps (boards H1, H2) ─────────── */
/* Each step's state on its tab, before publishing (G21). */
.ch .ch-tabst { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 1px 7px; line-height: 1.5; }
.ch .ch-tabst.ok { background: var(--fh-good-soft); color: var(--fh-good); }
.ch .ch-tabst.accent { background: var(--fh-accent-soft); color: var(--fh-accent-deep); }
.ch .ch-tabst.warn { background: var(--fh-warn-soft); color: var(--fh-warn); }
/* Words only a screen reader hears: the standard visually-hidden rule (the
   one in funnels-core.css and Bootstrap's .sr-only). ⚠️ AN ABSOLUTE ELEMENT
   NEEDS A POSITIONED PARENT INSIDE ANY ROW THAT SCROLLS: without one its
   containing block was the page, so a step mark at the far end of the
   sideways-scrolling tab row sat OUTSIDE the row's clip and stretched the
   whole page to 521px on a 390px phone (verifier, 14 Oct). Every parent of a
   `.ch-sr` is therefore `position: relative`. */
.ch .ch-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ch .fh-tabs button, .ch .ch-pub-t > span { position: relative; }
/* Nine tabs before publishing, each with its step mark, ran past the end of
   the row at 1440 (Analytics hidden off the end, the row's scrollbar hidden).
   Board H1's tab type (14px, regular weight, the open tab semibold) and
   tighter spacing on a tablet or desktop, and the row wraps rather than
   hiding a tab when a narrow window still cannot fit them. The phone keeps
   its one sideways-scrolling line (round 6). */
.ch .fh-tabs button { font-weight: 400; }
.ch .fh-tabs button[aria-selected="true"] { font-weight: 600; }
@media (min-width: 641px) {
  .ch .fh-tabs { flex-wrap: wrap; column-gap: 0; row-gap: 0; }
  .ch .fh-tabs button { padding: 10px 8px; }
}

/* Overview before publishing: ONE next action, then Publishing's to-dos. */
.ch .ch-next { border: 2px solid var(--fh-accent); }
.ch .ch-next-b { display: flex; align-items: center; gap: 16px; padding: 16px; }
.ch .ch-next-thumb { width: 96px; height: 54px; border-radius: 8px; overflow: hidden; flex: none; background: var(--fh-surface-3); }
.ch .ch-next-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch .ch-next-blank { background: linear-gradient(135deg, var(--fh-accent-soft), var(--fh-surface-3)); }
.ch .ch-next-t { flex: 1; min-width: 0; }
.ch .ch-next-t b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.ch .ch-next-t small { display: block; color: var(--fh-text-2); font-size: 13px; }
.ch .ch-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fh-accent-deep); }
.ch .ch-pub-rows { padding: 0 16px 6px; }
.ch .ch-pub-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--fh-border); font-size: 14px; }
.ch .ch-pub-row:first-child { border-top: 0; }
.ch .ch-pub-ic { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--fh-border-strong); flex: none; display: grid; place-items: center; font-size: 11px; color: #fff; }
.ch .ch-pub-ic.done { background: var(--fh-good); border-color: var(--fh-good); }
.ch .ch-pub-t { flex: 1; min-width: 0; }
.ch .ch-pub-t small { display: block; color: var(--fh-text-2); font-size: 12.5px; overflow-wrap: anywhere; }

/* A card that is one door: a name, one line, one button. */
.ch .ch-door-b { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.ch .ch-door-b > div { flex: 1; min-width: 0; }
.ch .ch-door-b b { display: block; font-size: 15px; }
.ch .ch-door-b small { display: block; color: var(--fh-text-2); font-size: 13.5px; }

/* Delivery (H2): what students get, what you keep an eye on. */
.ch .ch-dv-rows { padding: 0 16px 6px; }
.ch .ch-dv-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fh-border); }
.ch .ch-dv-row:first-child { border-top: 0; }
.ch .ch-dv-ic { font-size: 18px; width: 26px; text-align: center; flex: none; }
.ch .ch-dv-name { flex: 1; min-width: 0; font-size: 14.5px; }
.ch .ch-open { background: var(--fh-accent-soft); color: var(--fh-accent-deep); border-color: transparent; }

/* Get students in: share buttons wrap; the community post sheet. */
.ch .ch-share { flex-wrap: wrap; }
.fh-sheet .ch-ann { width: 100%; box-sizing: border-box; margin: 6px 0; }
.fh-sheet .ch-ann-refine { display: flex; gap: 8px; margin-bottom: 8px; }
.fh-sheet .ch-ann-refine .input { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .ch .ch-next-b { flex-wrap: wrap; }
  .ch .ch-next-thumb { width: 72px; height: 40px; }
  .ch .ch-next-b > .fh-btn { width: 100%; }
}

/* ── "What you promised" (G34, mock `setup`): beside "Before you publish" on
   the Publishing tab, and the same box on the guide's Publish step
   (`.ch-inwalk`, where the page around it is the wizard's). ── */
.ch .ch-pub-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.ch .ch-pub-pair > * { min-width: 0; }
.ch .ch-prom-sub { margin: 0 0 4px; font-size: 13px; }
.ch .ch-prom-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fh-border); }
.ch .ch-prom-sub + .ch-prom-row { border-top: 0; }
.ch .ch-prom-row b { display: block; font-weight: 600; }
.ch .ch-prom-row small { display: block; color: var(--fh-text-2); font-size: 12.5px; margin-top: 1px; }
.ch .ch-prom-row .fh-btn { flex: none; }
.ch .ch-prom-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ch .ch-prom-dot.warn { background: var(--fh-warn); }
.ch .ch-prom-dot.ok { background: var(--fh-good); }
.ch .ch-prom-off { padding-top: 10px; border-top: 1px solid var(--fh-border); }
.ch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fh.ch.ch-inwalk { max-width: none; padding: 0; margin: 0 0 14px; }
.fh.ch.ch-inwalk[hidden] { display: none; }
.ch .ch-pub-pair > [data-ch-promises][hidden] { display: none; }

/* One promise's setup, in a sheet: the guide's own pane (it carries the
   wizard's classes, so the sheet is `.gw .ccw` inside). The certificate's is
   the wider two-column CertSheet (G35). */
.fh-sheet.ch-setup-sheet { max-width: 640px; }
.fh-sheet.ch-setup-sheet[data-ch-setup="certificate"] { max-width: 980px; }
.ch-setup-sheet .ccw.ch-insheet { max-width: none; margin: 0; }
.ch-setup-sheet .ch-setup-foot { display: flex; justify-content: flex-start; border-top: 1px solid #f0ece4; padding-top: 10px; }

/* "Open ↗" beside Copy (G34, mock `post`) */
.fh .fh-addr a.ch-open { flex: none; border-radius: 6px; padding: 2px 8px; background: var(--fh-surface); font-family: var(--fh-body); font-size: 12px; font-weight: 600; color: var(--fh-accent-deep); text-decoration: none; }
.fh .fh-addr a.ch-open:hover { text-decoration: underline; }

/* "Powered by Replicants" (G34, mock `credit`) */
.ch .ch-credit { border-top: 1px solid var(--fh-border); }
.ch .ch-credit-row { display: flex; align-items: center; gap: 12px; }

/* Delivery: the settings line under the AI tutor, their own plan and the
   finish (G34 mocks `tutor`, `first`; G35 the certificate) */
.ch .ch-dv-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 10px 38px; margin-top: -4px; font-size: 13px; color: var(--fh-text-2); }
.ch .ch-dv-sub b { color: var(--fh-text); font-weight: 600; }
@media (max-width: 520px) { .ch .ch-dv-sub { padding-left: 0; } }
.fh-sheet.ch-setup-sheet .ch-sheet-h h3 { font-size: 24px; }