/* ══════════════════════════════════════════════════════════════════════
   css/course-coach-sample.css — "Preview as a student, preview as the
   coach" (G51/G54, the G50-G54 board item 10, approved as is 15 Oct 2026).
   The two doors on every feature card, the coach preview's bar, the
   highlighted part of the dashboard, and the small pictures of a student
   who needs the coach (faces, a bar for how far into the lesson, a dot per
   planned session). js/course-coach-sample.js, course-home.js sample mode.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The two doors ─────────────────────────────────────────────────────── */
.ccs-doors {
  --ccs-acc: var(--fh-accent, var(--accent, #6a4cf1));
  --ccs-acc-soft: var(--fh-accent-soft, #efeaff);
  --ccs-line: var(--fh-border, #e8e4d8);
  --ccs-ink: var(--fh-text, #15172b);
  --ccs-mute: var(--fh-text-2, #4d5168);
  display: flex; flex-direction: column; margin-top: 10px;
  border-top: 1px solid var(--ccs-line);
}
.ccs-door { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ccs-line); }
.ccs-door:first-child { border-top: 0; }
.ccs-door-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.ccs-door-t b { font-size: 14px; font-weight: 700; color: var(--ccs-ink); }
.ccs-door-t small { font-size: 13px; color: var(--ccs-mute); }
.ccs-thumb { width: 34px; height: 46px; border-radius: 6px; background: #ddd center 10% / cover no-repeat; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.ccs-icc { width: 34px; height: 34px; border-radius: 50%; background: var(--ccs-acc-soft); color: var(--ccs-acc); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ccs-doors .ccs-open {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 16px;
  border-radius: 999px; border: 1px solid var(--ccs-line); background: var(--fh-surface, #fff); color: var(--ccs-ink);
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap;
}
.ccs-doors .ccs-open:hover { border-color: var(--ccs-acc); color: var(--ccs-acc); }
.ccs-doors .ccs-open.solid { background: var(--ccs-acc); border-color: var(--ccs-acc); color: #fff; }
.ccs-doors .ccs-open.solid:hover { filter: brightness(1.06); color: #fff; }
.ccs-doors .ccs-open:focus-visible { outline: 2px solid var(--ccs-acc); outline-offset: 2px; }
/* On the guide's cards the doors sit under the card's line, like its old button did. */
.ccw .ccw-dv-card .ccs-doors { margin-top: 12px; }
/* The course home's "Preview" sheet. */
.ch-pv-sheet { max-width: 480px; }
.ch-pv-sheet .ccs-doors { border-top: 0; margin-top: 4px; }
.cpg-ai-extra .ccs-doors { margin-top: 6px; }

/* ── The bar on top of the coach preview (board item 10's `.sbar`) ───── */
.ch-sbar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--fh-accent, #6a4cf1); color: #fff; border-radius: 12px; padding: 10px 14px; margin: 0 0 16px;
}
.ch-sbar-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-sbar-t b { color: #fff; font-size: 14.5px; font-weight: 700; }
.ch-sbar-s { font-size: 13px; color: rgba(255,255,255,.88); }
.ch-sbar-a { display: inline-flex; gap: 8px; margin-left: auto; }
.ch-sbar .ch-sbar-b {
  border: 0; border-radius: 999px; padding: 8px 16px; min-height: 34px; background: #fff; color: var(--fh-accent, #6a4cf1);
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer;
}
.ch-sbar .ch-sbar-b.on { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.ch-sbar-b:disabled { opacity: .7; cursor: default; }
.ch-sbar-b:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The head of the preview: the course's name and "12 sample students". */
.ch-sample-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--fh-warn-soft, #fbf0dc); color: var(--fh-warn, #a4660f); }
.ch-sample-faces { display: inline-flex; }
.ch-sample-faces img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--fh-warn-soft, #fbf0dc); }
.ch-sample-faces img + img { margin-left: -6px; }
.ch-sample-tabs .ch-tab-off { opacity: .45; cursor: default; }

/* ── The part of the dashboard being previewed ───────────────────────── */
.ch-sample .ch-hl {
  position: relative;
  box-shadow: 0 0 0 2px var(--fh-accent, #6a4cf1), 0 10px 30px rgba(106, 76, 241, .16) !important;
  border-radius: 16px;
}
.ch-sample button.ch-hl { border-radius: 999px; }
.ch-sample .cin-also.ch-hl { padding: 26px 14px 12px; }
.ch-hl-tag {
  position: absolute; top: -11px; left: 16px; z-index: 1;
  background: var(--fh-accent, #6a4cf1); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .01em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
/* The other parts stay readable, a little quieter. */
.ch-sample [data-cin-area]:not(.ch-hl) { transition: opacity .2s; }
.ch-sample .cin-cc:has(.ch-hl) [data-cin-area]:not(.ch-hl):not(.cin-chip) { opacity: .8; }

/* ── A person who needs the coach, drawn small ───────────────────────── */
.cin .cin-av-img { object-fit: cover; background: #eee; }
.cin .cin-ntag {
  display: inline-block; vertical-align: 1px; margin-left: 6px; font-size: 12px; font-weight: 600;
  color: var(--cin-warn, #b45309); background: #fdf1e3; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.cin .cin-nmeter { display: block; width: min(240px, 100%); height: 7px; border-radius: 4px; background: var(--cin-line, #ece7dd); overflow: hidden; margin-top: 7px; }
.cin .cin-nmeter i { display: block; height: 100%; border-radius: 4px; background: var(--cin-acc, #5b46e8); }
.cin .cin-ndots { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--cin-mute, #5d5566); }
.cin .cin-ndots-d { display: inline-flex; gap: 3px; }
.cin .cin-ndots-d i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #cdbdb0; }
.cin .cin-ndots-d i.on { background: var(--cin-good, #1f8a5b); box-shadow: none; }
.cin .cin-sample-tag {
  display: inline-block; vertical-align: 1px; font-size: 11.5px; font-weight: 600; color: #6b6470;
  background: #f0eee9; border-radius: 999px; padding: 1px 8px;
}
.cin .cin-sample-note, .cin-sample-note { color: var(--fh-warn, #a4660f); font-size: 13px; margin: 8px 0 0; }
.cin .cin-fin { margin-top: 10px; }
.cin .cin-fin .cin-av + .cin-av { margin-left: -14px; box-shadow: 0 0 0 2px var(--cin-well, #f7f4ee); }

@media (max-width: 640px) {
  .ch-sbar { padding: 10px 12px; }
  .ch-sbar-a { width: 100%; justify-content: flex-end; }
  .ccs-door { gap: 10px; }
  .ccs-open { padding: 6px 14px; }
  .ch-hl-tag { left: 10px; }
}