/* In-hub course player (lib/cb-course-player.js). Board:
   docs/design/2026-09-28-recruiting-overview/Recruiting Overview.dc.html */
.cbp { --cbp-ink:#0E2535; --cbp-gold:#C9A84C; --cbp-gold-d:#A8882E; --cbp-line:#D4DAE3; --cbp-muted:#5A6B7B; --cbp-body:#3B4B5A;
  display:flex; flex-direction:column; gap:22px; font-family:Inter,sans-serif; color:var(--cbp-ink); }
.cbp button { font-family:inherit; cursor:pointer; }
.cbp-row { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.cbp-col { flex:999 1 480px; min-width:0; display:flex; flex-direction:column; gap:16px; }
/* Keep the title row above the fold without letterboxing: the player is
   sized to the video, capped by viewport height, so on short screens it gets
   narrower (left-aligned) instead of showing black bars. Industry's "Go
   further" cards sit under the lesson list, so they never compete with the
   video for height; the markup is in both places and CSS shows the column
   copy only while the panel is hidden.
   --cbp-chrome = everything on screen that is not video: header, padding,
   player bar, title row (and the cards when they are in the column). */
.cbp { --cbp-chrome:250px; }
.cbp.cbp-has-further.cbp-panel-closed { --cbp-chrome:372px; }
.cbp-player, .cbp-under { width:min(100%, max(427px, calc((100vh - var(--cbp-chrome)) * 16 / 9))); }
.cbp-col .cbp-further { display:none; }
.cbp-panel-closed .cbp-col .cbp-further { display:flex; }

/* player */
.cbp-player { border-radius:14px; overflow:hidden; background:var(--cbp-ink); box-shadow:0 8px 24px rgba(5,28,44,.18); }
.cbp-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px 10px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.cbp-bar-title { font-size:13px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cbp-bar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cbp-jump { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:1px solid rgba(255,255,255,.18); border-radius:100px; background:transparent; color:#fff; font-size:12px; font-weight:600; }
.cbp-jump[hidden] { display:none; }
.cbp-jump:hover { border-color:var(--cbp-gold); background:rgba(201,168,76,.12); }
.cbp-speed .cb-speed { display:flex; align-items:center; }
.cbp-speed .cb-speed-label { display:none; }
.cbp-speed .cb-speed-segs { display:inline-flex; padding:3px; border-radius:100px; background:rgba(255,255,255,.07); border:1px solid rgba(201,168,76,.28); }
.cbp-speed .cb-speed-seg { min-width:38px; height:24px; padding:0 10px; border:0; border-radius:100px; background:transparent; color:rgba(255,255,255,.72); font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.cbp-speed .cb-speed-seg.on { background:var(--cbp-gold); color:var(--cbp-ink); }
.cbp-video { position:relative; aspect-ratio:16/9; background:#000; }
.cbp-video video { display:block; width:100%; height:100%; background:#000; }
.cbp-video .cb-vid-err { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; text-align:center; background:rgba(14,37,53,.94); color:#fff; }
.cbp-video .cb-vid-err-title { font-size:16px; font-weight:600; }
.cbp-video .cb-vid-err-body { max-width:420px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.75); }
.cbp-video .cb-vid-err-btn { margin-top:4px; padding:9px 16px; border:0; border-radius:6px; background:var(--cbp-gold); color:var(--cbp-ink); font-size:13px; font-weight:600; }

/* under the player */
.cbp-under { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.cbp-under-txt { display:flex; flex-direction:column; gap:4px; min-width:0; }
.cbp-title { margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em; line-height:1.3; color:var(--cbp-ink); }
.cbp-meta { font-size:13px; color:var(--cbp-muted); }
.cbp-next { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--cbp-line); border-radius:6px; background:#fff; color:var(--cbp-ink); font-size:13px; font-weight:600; }
.cbp-next[hidden] { display:none; }
.cbp-next:hover { border-color:var(--cbp-ink); }
.cbp-extra:empty { display:none; }
.cbp-extra { display:flex; flex-direction:column; gap:16px; }

.cbp-further { display:flex; flex-direction:column; gap:10px; }
.cbp-further-label { font-size:13px; font-weight:600; color:var(--cbp-muted); padding:0 2px; }
.cbp-further-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:12px; }
.cbp-further-card { display:flex; align-items:center; gap:12px; padding:18px 20px; border:1px solid var(--cbp-line); border-radius:10px; background:#fff; text-align:left; }
.cbp-further-card:hover { border-color:var(--cbp-ink); }
.cbp-further-ic { flex-shrink:0; width:36px; height:36px; border-radius:8px; background:var(--cbp-ink); color:var(--cbp-gold); display:flex; align-items:center; justify-content:center; }
.cbp-further-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cbp-further-title { font-size:14px; font-weight:600; color:var(--cbp-ink); }
.cbp-further-sub { font-size:12px; color:var(--cbp-muted); }

.cbp-nudge { display:flex; align-items:center; gap:14px; padding:14px 18px; border:1px solid var(--cbp-line); border-radius:10px; background:#fff; text-align:left; }
.cbp-nudge:hover { border-color:var(--cbp-ink); }
.cbp-nudge-ic { flex-shrink:0; width:32px; height:32px; border-radius:6px; background:var(--cbp-ink); color:var(--cbp-gold); display:flex; align-items:center; justify-content:center; }
.cbp-nudge-txt { flex:1; font-size:14px; line-height:1.45; color:var(--cbp-ink); }
.cbp-nudge-txt strong { font-weight:600; }
.cbp-soft { color:var(--cbp-body); }
.cbp-nudge-go { font-size:13px; font-weight:600; color:var(--cbp-ink); white-space:nowrap; }

.cbp-done { display:flex; flex-direction:column; gap:16px; padding:24px 26px; border-radius:14px; background-color:var(--cbp-ink);
  background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px); background-size:48px 48px; color:#fff; }
.cbp-done-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.cbp-done-txt { display:flex; flex-direction:column; gap:6px; min-width:0; }
.cbp-done-title { font-family:'Libre Baskerville',Georgia,serif; font-size:22px; line-height:1.25; }
.cbp-done-title em { color:var(--cbp-gold); }
.cbp-done-sub { font-size:14px; color:rgba(255,255,255,.7); }
.cbp-done-cta { padding:12px 20px; border:0; border-radius:6px; background:var(--cbp-gold); color:var(--cbp-ink); font-size:14px; font-weight:600; box-shadow:0 4px 20px rgba(201,168,76,.3); }
.cbp-done-cta:hover { background:var(--cbp-gold-d); }
.cbp-done-links { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); }
.cbp-done-links > span { font-size:13px; color:rgba(255,255,255,.6); }
.cbp-done-pill { padding:6px 12px; border:1px solid rgba(255,255,255,.2); border-radius:100px; background:transparent; color:#fff; font-size:13px; font-weight:600; }
.cbp-done-pill:hover { border-color:var(--cbp-gold); }

/* side panel */
.cbp-side { flex:1 1 300px; min-width:0; position:sticky; top:86px; }
/* Go further under the lesson list: the panel gives up the cards' height so
   the whole side column still fits the viewport. */
.cbp-side .cbp-further { margin-top:12px; gap:8px; }
.cbp-side .cbp-further-grid { grid-template-columns:1fr; gap:6px; }
.cbp-side .cbp-further-card { gap:10px; padding:8px 12px; }
.cbp-side .cbp-further-ic { width:28px; height:28px; border-radius:6px; }
.cbp-side .cbp-further-ic svg { width:15px; height:15px; }
.cbp-side .cbp-further-title { font-size:13px; line-height:1.3; }
.cbp-side .cbp-further-sub { display:none; }
.cbp-has-further .cbp-side .cbp-panel { max-height:calc(100vh - 116px - 122px); }
.cbp-panel { display:flex; flex-direction:column; min-height:360px; max-height:calc(100vh - 116px); border:1px solid var(--cbp-line); border-radius:10px; background:#fff; overflow:hidden; }
.cbp-ph { display:flex; align-items:center; gap:12px; padding:12px 12px 10px 16px; }
.cbp-prog { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.cbp-watched { font-size:12px; color:var(--cbp-muted); }
.cbp-ptrack { height:4px; border-radius:4px; background:#E8ECF2; overflow:hidden; }
.cbp-pfill { height:100%; background:var(--cbp-gold); transition:width .3s; }
.cbp-hide { flex-shrink:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--cbp-line); border-radius:6px; background:#fff; color:var(--cbp-muted); }
.cbp-hide:hover { border-color:var(--cbp-ink); color:var(--cbp-ink); }
.cbp-tabs { display:flex; justify-content:space-between; gap:0; padding:0 14px; border-bottom:1px solid #E8ECF2; }
.cbp-tab { padding:14px 2px 12px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:none; font-size:13px; font-weight:500; color:var(--cbp-muted); }
.cbp-tab.on { font-weight:600; color:var(--cbp-ink); border-bottom-color:var(--cbp-ink); }
.cbp-body { flex:1; min-height:0; overflow-y:auto; }
.cbp-empty { margin:0; padding:24px; font-size:13.5px; color:var(--cbp-muted); }

.cbp-list { display:flex; flex-direction:column; gap:2px; padding:16px 12px 20px; }
.cbp-lesson { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; border:0; border-radius:6px; background:none; text-align:left; }
.cbp-lesson:hover { background:#F4F6F9; }
.cbp-lesson.on, .cbp-lesson.on:hover { background:#FBF8EF; }
.cbp-ring { transform:rotate(-90deg); display:block; }
.cbp-ring-p { transition:stroke-dashoffset .3s; }
.cbp-lesson-t { font-size:13.5px; line-height:1.35; color:var(--cbp-ink); }
.cbp-lesson.on .cbp-lesson-t { font-weight:600; }
.cbp-lesson.watched:not(.on) .cbp-lesson-t { color:var(--cbp-muted); }
.cbp-lesson-d { font-size:12px; color:var(--cbp-muted); font-variant-numeric:tabular-nums; }

.cbp-body .cbp-list:has(.cbp-chap) { padding:8px 12px 12px; }
.cbp-chap { display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:10px; padding:10px 12px; border:0; border-radius:6px; background:none; text-align:left; }
.cbp-chap:hover { background:#F4F6F9; }
.cbp-chap.on, .cbp-chap.on:hover { background:#FBF8EF; }
.cbp-chap-t { font-size:13px; font-weight:600; color:var(--cbp-gold-d); font-variant-numeric:tabular-nums; }
.cbp-chap-l { font-size:14px; line-height:1.35; color:var(--cbp-ink); }
.cbp-chap.on .cbp-chap-l { font-weight:600; }
.cbp-chap-now { font-size:12px; font-weight:600; color:var(--cbp-muted); }

.cbp-points { display:flex; flex-direction:column; gap:16px; padding:20px 24px 24px; }
.cbp-summary { margin:0; max-width:70ch; font-size:15px; line-height:1.6; color:var(--cbp-body); }
.cbp-plist { display:flex; flex-direction:column; gap:10px; }
.cbp-point { display:grid; grid-template-columns:24px 1fr; gap:10px; font-size:14px; line-height:1.55; color:var(--cbp-ink); }
.cbp-point-n { font-family:'Libre Baskerville',Georgia,serif; font-size:13px; color:var(--cbp-gold-d); line-height:1.75; }
.cbp-more { align-self:flex-start; padding:0; border:0; background:none; font-size:13px; font-weight:600; color:var(--cbp-ink); text-decoration:underline; text-underline-offset:3px; }

.cbp-quiz { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:28px 24px; }
.cbp-quiz-txt { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 200px; }
.cbp-quiz-h { font-size:15px; font-weight:600; }
.cbp-quiz-sub { font-size:14px; line-height:1.5; color:var(--cbp-muted); }
.cbp-quiz-go { padding:11px 18px; border:0; border-radius:6px; background:var(--cbp-ink); color:#fff; font-size:14px; font-weight:600; }
.cbp-quiz-go:hover { background:#163347; }
.cbp-quiz-frame { display:block; width:100%; height:480px; border:0; }

.cbp-notes { display:flex; flex-direction:column; gap:8px; padding:16px 24px 20px; }
.cbp-note { min-height:180px; resize:vertical; padding:14px; border:1px solid var(--cbp-line); border-radius:6px; background:#FAFBFC; font:14px/1.6 Inter,sans-serif; color:var(--cbp-ink); }
.cbp-note:focus { outline:none; border-color:var(--cbp-ink); background:#fff; }
.cbp-note-status { font-size:12px; color:var(--cbp-muted); }

/* closed panel */
.cbp-reopen { display:none; position:sticky; top:86px; width:48px; height:260px; flex-direction:column; align-items:center; gap:12px; padding:14px 0; border:1px solid var(--cbp-line); border-radius:10px; background:#fff; color:var(--cbp-ink); }
.cbp-reopen span { writing-mode:vertical-rl; font-size:13px; font-weight:600; }
.cbp-reopen:hover { border-color:var(--cbp-ink); }
.cbp-panel-closed .cbp-side { display:none; }
.cbp-panel-closed .cbp-reopen { display:flex; }
.cbp :is(button,textarea):focus-visible { outline:2px solid var(--cbp-gold-d); outline-offset:2px; }

/* Short windows: tighter tabs and lesson rows so all eight lessons and the
   cards fit without the list scrolling. */
@media (max-height:760px) {
  .cbp-tab { padding:10px 2px 9px; }
  .cbp-list { padding:8px 10px 10px; }
  .cbp-lesson { padding:7px 12px; }
}

/* free-tier wall over a locked lesson (CV 101) */
.cbp-video .cbp-lock { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px; text-align:center; background:rgba(14,37,53,.96); color:#fff; }
.cbp-lock-ic { display:flex; color:var(--cbp-gold); }
.cbp-lock-ic svg { width:26px; height:26px; }
.cbp-lock-h { font-size:17px; font-weight:600; }
.cbp-lock-sub { max-width:420px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.75); }
.cbp-lock-go { margin-top:6px; padding:9px 18px; border-radius:6px; background:var(--cbp-gold); color:var(--cbp-ink); font-size:13px; font-weight:600; text-decoration:none; }
.cbp-lesson-d svg { display:block; opacity:.6; }