/* ══════════════════════════════════════════════════════════════════════
   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); }
.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: 340px; } }

/* 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: the title block
   shrinks (its pills wrap) instead of the whole action row dropping below. */
@media (min-width: 1100px) {
  .ch .fh-head { flex-wrap: nowrap; }
  .ch .fh-head .fh-title { flex: 1 1 auto; min-width: 0; }
  .ch .fh-head .fh-actions { flex: none; }
  .ch .fh-head .fh-meta { flex-wrap: wrap; }
}


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