/* Course builder + lesson blocks (cb-). The same block styles serve the builder canvas and the student lesson. */
.cb-theme-maroon, .cb-lesson { --cb-accent: var(--maroon); --cb-accent-2: #A2453F; --cb-tint: var(--maroon-wash); }
.cb-theme-sage { --cb-accent: var(--sage); --cb-accent-2: #6E8B5E; --cb-tint: var(--sage-mist); }
.cb-theme-gold { --cb-accent: #8A5A00; --cb-accent-2: #C08A2E; --cb-tint: #F7EEDB; }
.cb-theme-navy { --cb-accent: #2F4A6B; --cb-accent-2: #5C7FA6; --cb-tint: #E7EDF4; }
.cb-theme-ink { --cb-accent: #2B2B2B; --cb-accent-2: #6B6B6B; --cb-tint: #EFEDE8; }

/* ---------- the lesson page (learner and builder canvas) ---------- */
.cb-lesson { background: var(--card); color: var(--ink); }
.cb-col { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.cb-lhead { display: flex; flex-direction: column; gap: 8px; padding: 48px 0 28px; }
.cb-lof { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; }
.cb-ltitle { font-family: var(--serif); font-size: 44px; line-height: 1.08; font-weight: 600; margin: 0; }
.cb-lauthor { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 14px; }
.cb-lauthor .jb-avatar.sm { width: 26px; height: 26px; font-size: 11px; background: var(--cb-tint); color: var(--cb-accent); }
.cb-lbar { width: 88px; height: 4px; border-radius: 2px; background: var(--cb-accent); margin-top: 10px; }
.cb-block { padding: 14px 0; position: relative; }
.cb-block[hidden] { display: none; }
.cb-heading { font-family: var(--serif); font-weight: 600; font-size: 30px; margin: 10px 0 0; }
h3.cb-heading { font-size: 23px; }
.cb-para { font-family: var(--serif); font-size: 19px; line-height: 1.6; }
.cb-para p { margin: 0 0 .7em; } .cb-para p:last-child { margin-bottom: 0; }
.cb-para a, .cb-acc-b a, .cb-tabpane a { color: var(--cb-accent); }
.cb-statement { border-top: 4px solid var(--cb-accent); border-bottom: 4px solid var(--cb-accent); padding: 26px 8px; text-align: center; }
.cb-statement p { font-family: var(--serif); font-size: 30px; line-height: 1.25; margin: 0; }
.cb-quote { margin: 0; padding: 18px 26px; border-left: 4px solid var(--cb-accent); background: var(--cb-tint); border-radius: 0 var(--r) var(--r) 0; }
.cb-quote p { font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.35; margin: 0 0 8px; }
.cb-quote footer { color: var(--ink-3); font-size: 14px; }
.cb-note { padding: 14px 18px; border-radius: var(--r); background: var(--cb-tint); display: flex; flex-direction: column; gap: 4px; }
.cb-note b { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cb-accent); }
.cb-note p { margin: 0; font-size: 17px; }
.cb-note.warning { background: var(--amber-tint); } .cb-note.warning b { color: var(--amber-ink); }
.cb-note.info { background: #E9EEF4; } .cb-note.info b { color: #2F4A6B; }
.cb-list { font-family: var(--serif); font-size: 19px; line-height: 1.5; padding-left: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cb-list.bullets li { padding-left: 22px; position: relative; } .cb-list.bullets li::before { content: ''; position: absolute; left: 4px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--cb-accent); }
.cb-list.numbers { counter-reset: n; } .cb-list.numbers li { counter-increment: n; padding-left: 46px; position: relative; min-height: 32px; }
.cb-list.numbers li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--cb-accent); color: #fff; font: 600 14px var(--sans); display: flex; align-items: center; justify-content: center; }
.cb-list.checklist li { display: flex; gap: 10px; align-items: baseline; } .cb-list.checklist input { accent-color: var(--cb-accent); width: 18px; height: 18px; }
.cb-image { margin: 0; } .cb-image img { width: 100%; border-radius: var(--r); display: block; } .cb-image.center img { max-width: 520px; margin: 0 auto; }
.cb-image figcaption { color: var(--ink-3); font-size: 14px; text-align: center; margin-top: 8px; }
.cb-image-ph { min-height: 220px; border-radius: var(--r); background: var(--chip-soft); border: 1.5px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-4); text-align: center; padding: 16px; }
.cb-image-ph .jb-ico { width: 30px; height: 30px; }
.cb-video { border-radius: var(--r); overflow: hidden; background: #111; aspect-ratio: 16 / 9; }
.cb-video iframe, .cb-video video { width: 100%; height: 100%; border: 0; display: block; }
.cb-video-ph { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: #fff; text-align: center; padding: 20px; background: radial-gradient(circle at 30% 20%, #3a3a3a, #111); }
.cb-video-ph .cap { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; } .cb-video-ph .ttl { font-family: var(--serif); font-size: 24px; }
.cb-video-ph .play { width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.cb-video-ph .play .jb-ico { fill: #fff; stroke: none; } .cb-video-ph .hint { font-size: 13px; opacity: .7; }
.cb-audio, .cb-download { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); }
.cb-audio > .jb-ico { width: 28px; height: 28px; color: var(--cb-accent); } .cb-audio audio { width: 100%; margin-top: 8px; display: block; } .cb-audio .jb-grow { display: flex; flex-direction: column; }
.cb-file { width: 46px; height: 54px; border-radius: 6px; background: var(--cb-accent); color: #fff; font: 700 11px var(--sans); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; flex: none; }
.cb-embed .jb-embed { aspect-ratio: auto; height: var(--cb-embed-h, 560px); }
.cb-embed iframe { width: 100%; border: 1px solid var(--line); border-radius: var(--r); display: block; } .cb-embed .jb-muted { margin-top: 6px; font-size: 14px; }
.cb-accordion { border-top: 1px solid var(--line); }
.cb-acc { border-bottom: 1px solid var(--line); }
.cb-acc-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 4px; cursor: pointer; list-style: none; font-size: 18px; }
.cb-acc-h::-webkit-details-marker { display: none; } .cb-acc-h > span { color: var(--cb-accent); transition: transform .2s; } details[open] > .cb-acc-h > span { transform: rotate(180deg); }
.cb-acc-b { padding: 0 4px 16px; font-family: var(--serif); font-size: 18px; line-height: 1.55; } .cb-acc-b p { margin: 0 0 .6em; }
.cb-tabbar { display: flex; gap: 4px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.cb-tabbar [role=tab] { border: 0; background: none; font: 600 15px var(--sans); padding: 10px 16px; color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; }
.cb-tabbar [role=tab][aria-selected="true"] { color: var(--cb-accent); border-bottom-color: var(--cb-accent); }
.cb-tabpane { padding: 18px 4px 4px; font-family: var(--serif); font-size: 18px; line-height: 1.55; } .cb-tabpane p { margin: 0 0 .6em; }
.cb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.cb-card { position: relative; height: 150px; border: 0; padding: 0; background: none; perspective: 900px; cursor: pointer; font: inherit; }
.cb-card .f, .cb-card .bk { position: absolute; inset: 0; border-radius: var(--r); display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; backface-visibility: hidden; transition: transform .45s; font-size: 18px; }
.cb-card .f { background: var(--cb-accent); color: #fff; font-family: var(--serif); font-size: 22px; } .cb-card .bk { background: var(--cb-tint); color: var(--ink); transform: rotateY(180deg); }
.cb-card.flipped .f { transform: rotateY(180deg); } .cb-card.flipped .bk { transform: rotateY(360deg); }
.cb-card.edit { height: auto; display: grid; grid-template-rows: 1fr 1fr; cursor: default; }
.cb-card.edit .f, .cb-card.edit .bk { position: static; transform: none; min-height: 70px; } .cb-card.edit .f { border-radius: var(--r) var(--r) 0 0; } .cb-card.edit .bk { border-radius: 0 0 var(--r) var(--r); }
.cb-center { text-align: center; }
.cb-process { border: 1px solid var(--line); border-radius: var(--r); padding: 26px 28px; background: var(--cb-tint); }
.cb-pstep { display: flex; flex-direction: column; gap: 6px; } .cb-pstep h3 { font-family: var(--serif); font-size: 24px; margin: 0; }
.cb-pstep > div { font-family: var(--serif); font-size: 18px; line-height: 1.55; } .cb-pstep p { margin: 0 0 .5em; }
.cb-pnum { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cb-accent); font-weight: 700; }
.cb-pnav { display: flex; justify-content: space-between; margin-top: 18px; }
/* in the builder all steps show, one under the other */
.cb-edit-mode .cb-process .cb-pstep + .cb-pstep { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--line); }
.cb-check, .cb-response { border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.cb-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cb-accent); font-weight: 700; }
.cb-check .q, .cb-response .q { font-family: var(--serif); font-size: 21px; margin: 0; }
.cb-choices { display: flex; flex-direction: column; gap: 8px; }
.cb-choice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-size: 17px; }
.cb-choice input { accent-color: var(--cb-accent); width: 18px; height: 18px; flex: none; }
.cb-choice.right { border-color: var(--sage); background: var(--sage-mist); } .cb-choice.wrong { border-color: var(--maroon); background: var(--maroon-wash); }
.cb-right { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--sage-text); white-space: nowrap; }
.cb-checkfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cb-feedback { margin: 0; font-weight: 600; } .cb-feedback.right { color: var(--sage-text); } .cb-feedback.wrong { color: var(--maroon-text); }
.cb-divider { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.cb-continue { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; }
.cb-continue .jb-btn { background: var(--cb-accent); min-width: 220px; } .cb-continue.done .jb-btn { display: none; }
.cb-hotspots { position: relative; } .cb-hotspots img { width: 100%; border-radius: var(--r); display: block; }
.cb-spot { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9); background: var(--cb-accent); color: #fff; font: 700 18px var(--sans); cursor: pointer; box-shadow: 0 0 0 6px rgba(255, 255, 255, .35); animation: cb-pulse 2s infinite; }
.cb-spot.on { background: #fff; color: var(--cb-accent); animation: none; }
@keyframes cb-pulse { 50% { box-shadow: 0 0 0 11px rgba(255, 255, 255, .15); } }
.cb-spotcard { position: absolute; width: min(280px, 60%); background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px 14px; z-index: 2; } .cb-spotcard p { margin: 4px 0 0; }
.cb-sorting { display: flex; flex-direction: column; gap: 14px; }
.cb-sortdeck { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 40px; }
.cb-sortcard { border: 1.5px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 10px 14px; font: 500 16px var(--sans); cursor: grab; display: inline-flex; flex-direction: column; gap: 2px; }
.cb-sortcard.picked { border-color: var(--cb-accent); box-shadow: 0 0 0 3px var(--cb-tint); } .cb-sortcard.placed { border-color: var(--sage); background: var(--sage-mist); cursor: default; }
.cb-sortcard.shake { animation: cb-shake .35s; } @keyframes cb-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.cb-piles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.cb-pile { border: 2px dashed var(--line); border-radius: var(--r); padding: 12px; min-height: 120px; background: var(--cb-tint); cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.cb-pile > b { text-align: center; color: var(--cb-accent); } .cb-pilecards { display: flex; flex-direction: column; gap: 6px; }
.cb-chart { margin: 0; } .cb-chart figcaption { font-weight: 600; text-align: center; margin-bottom: 12px; font-size: 18px; }
.cb-pie { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; } .cb-pie svg { width: 220px; height: 220px; }
.cb-pie ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .cb-pie li { display: flex; align-items: center; gap: 8px; }
.cb-pie li span { width: 12px; height: 12px; border-radius: 3px; }
.cb-bars { display: flex; flex-direction: column; gap: 10px; } .cb-bars .row { display: grid; grid-template-columns: minmax(80px, 30%) 1fr 48px; align-items: center; gap: 10px; }
.cb-bars .bar { background: var(--chip-soft); border-radius: 6px; height: 22px; overflow: hidden; } .cb-bars .bar i { display: block; height: 100%; border-radius: 6px; }
.cb-lfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 36px 0 56px; border-top: 1px solid var(--line); margin-top: 24px; }
.cb-lfoot .jb-btn.accent { background: var(--cb-accent); }
.cb-quizresult { text-align: center; padding: 26px; border-radius: var(--r); background: var(--cb-tint); }
.cb-quizresult .v { font-family: var(--serif); font-size: 48px; color: var(--cb-accent); }

/* ---------- builder ---------- */
.cb-app { position: fixed; inset: 0; z-index: 40; background: var(--page); display: flex; flex-direction: column; }
.cb-top { height: 58px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.cb-top .jb-grow { min-width: 0; }
.cb-ttl { border: 0; background: none; font: 600 17px var(--sans); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.cb-ttl:hover { background: var(--chip-soft); }
.cb-save { font-size: 13px; color: var(--ink-4); white-space: nowrap; }
.cb-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--chip-soft); }
.cb-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 999px; font: 600 13px var(--sans); color: var(--ink-3); cursor: pointer; }
.cb-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.cb-body { flex: 1; display: flex; min-height: 0; }
.cb-outline { width: 300px; flex: none; background: var(--card); border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 10px 40px; display: flex; flex-direction: column; gap: 4px; }
.cb-outline.collapsed { width: 44px; padding: 12px 4px; } .cb-outline.collapsed > :not(.cb-ohead) { display: none; } .cb-outline.collapsed .cb-ohead b { display: none; }
.cb-ohead { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; }
.cb-ohead b { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); }
.cb-oitem { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; color: var(--ink); font-size: 14px; border: 1px solid transparent; }
.cb-oitem:hover { background: var(--chip-soft); } .cb-oitem[aria-current="page"] { background: var(--cb-tint, var(--sage-mist)); border-color: var(--line); font-weight: 600; }
.cb-oitem .jb-ico { width: 16px; height: 16px; flex: none; color: var(--ink-4); }
.cb-oitem .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.cb-ounit { margin-top: 10px; } .cb-ounit-h { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.cb-ounit-h .n { flex: 1; cursor: text; } .cb-ounit-h [contenteditable]:focus { outline: 2px solid var(--sage-soft); border-radius: 4px; text-transform: none; }
.cb-olessons { display: flex; flex-direction: column; gap: 2px; min-height: 8px; }
.cb-oitem.dragging { opacity: .4; } .cb-olessons.over { background: var(--sage-mist); border-radius: 8px; }
.cb-oacts { display: flex; gap: 4px; padding: 2px 8px; flex-wrap: wrap; }
.cb-oacts button, .cb-outline > .cb-oadd { border: 0; background: none; color: var(--sage-text); font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .05em; padding: 6px 4px; cursor: pointer; }
.cb-mini { border: 0; background: none; padding: 4px; border-radius: 6px; cursor: pointer; color: var(--ink-4); display: inline-flex; } .cb-mini:hover { background: var(--chip); color: var(--ink); } .cb-mini .jb-ico { width: 16px; height: 16px; }
.cb-canvas { flex: 1; overflow-y: auto; padding: 22px; }
.cb-stage { margin: 0 auto; max-width: 980px; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); min-height: 100%; transition: max-width .25s; }
.cb-stage.tablet { max-width: 768px; } .cb-stage.phone { max-width: 390px; } .cb-stage.phone .cb-ltitle { font-size: 32px; } .cb-stage.phone .cb-col { padding: 0 16px; }
.cb-edit { outline: none; border-radius: 4px; min-width: 1ch; display: inline-block; }
div.cb-edit, h1.cb-edit, h2.cb-edit, h3.cb-edit, p.cb-edit, figcaption.cb-edit, .cb-statement .cb-edit, .cb-quote p.cb-edit { display: block; }
.cb-edit:hover { box-shadow: 0 0 0 1px var(--line); } .cb-edit:focus { box-shadow: 0 0 0 2px var(--sage-soft); }
.cb-edit:empty::before { content: attr(data-ph); color: var(--ink-4); }
.cb-edit.rich:has(> p:only-child:empty)::before, .cb-edit.rich:has(> p:only-child > br:only-child)::before { content: attr(data-ph); color: var(--ink-4); position: absolute; pointer-events: none; }
.cb-edit-k { font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 4px; }
.cb-wrap { position: relative; }
.cb-edit-mode .cb-block { padding: 14px 0; }
.cb-edit-mode .cb-block:hover > .cb-wrap::before, .cb-edit-mode .cb-block.sel > .cb-wrap::before { content: ''; position: absolute; inset: -8px -14px; border: 1.5px dashed var(--line); border-radius: var(--r); pointer-events: none; }
.cb-edit-mode .cb-block.sel > .cb-wrap::before { border: 1.5px solid var(--sage-soft); }
.cb-tools { position: absolute; top: -8px; right: -14px; transform: translateY(-60%); display: none; gap: 2px; background: var(--ink); border-radius: 8px; padding: 3px; z-index: 3; }
.cb-tools button { border: 0; background: none; color: #fff; padding: 5px 7px; border-radius: 6px; cursor: pointer; font: 600 12px var(--sans); display: inline-flex; align-items: center; gap: 4px; }
.cb-tools button:hover { background: rgba(255, 255, 255, .16); } .cb-tools .jb-ico { width: 15px; height: 15px; stroke: #fff; }
.cb-tools .lbl { padding: 5px 8px; color: rgba(255, 255, 255, .7); font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.cb-edit-mode .cb-block:hover .cb-tools, .cb-edit-mode .cb-block.sel .cb-tools { display: flex; }
.cb-ins { height: 18px; position: relative; display: flex; align-items: center; justify-content: center; }
.cb-ins button { opacity: 0; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--sage); color: var(--on-sage); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .15s; z-index: 2; }
.cb-ins button .jb-ico { stroke: #fff; width: 16px; height: 16px; } .cb-ins:hover button, .cb-ins button:focus { opacity: 1; }
.cb-ins::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--sage-soft); opacity: 0; } .cb-ins:hover::before { opacity: 1; }
.cb-quick { padding: 18px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cb-quick-h { margin: 0; color: var(--ink-3); font-size: 14px; }
.cb-quick-row { display: flex; gap: 6px; align-items: stretch; max-width: 100%; min-width: 0; }
.cb-qall { background: var(--ink); color: #fff; border: 0; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 11px var(--sans); cursor: pointer; flex: none; }
.cb-qall .jb-ico { stroke: #fff; width: 18px; height: 18px; }
.cb-qset { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; border: 1px dashed var(--line); border-radius: 8px; padding: 4px; background: var(--card); min-width: 0; flex: 1 1 auto; }
.cb-qset button { border: 0; background: none; border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 11px var(--sans); color: var(--ink-3); cursor: pointer; flex: none; min-width: 64px; white-space: nowrap; }
.cb-qset button:hover { background: var(--chip-soft); color: var(--ink); } .cb-qset .jb-ico { width: 18px; height: 18px; }
.cb-fmt { position: fixed; z-index: 60; display: flex; gap: 2px; background: var(--ink); border-radius: 8px; padding: 3px; box-shadow: var(--shadow); }
.cb-fmt button { border: 0; background: none; color: #fff; min-width: 30px; height: 28px; border-radius: 6px; cursor: pointer; font: 600 13px var(--sans); } .cb-fmt button:hover { background: rgba(255, 255, 255, .16); }
.cb-lsettings { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
/* course overview page in the builder (Rise's course page) */
.cb-cover { padding: 56px 0 28px; } .cb-cover .cb-ltitle { font-size: 48px; }
.cb-cover-img { height: 220px; background: var(--cb-accent) center / cover; position: relative; }
.cb-cover-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0)); }
.cb-desc { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.cb-rows { display: flex; flex-direction: column; margin: 18px 0 60px; }
.cb-unitrow { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--cb-accent); padding: 22px 0 8px; border-bottom: 2px solid var(--cb-accent); }
.cb-row { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.cb-row .jb-ico { color: var(--ink-4); } .cb-row .t { flex: 1; min-width: 0; } .cb-row .t b { display: block; font-weight: 600; } .cb-row .t span { font-size: 13px; color: var(--ink-4); }
.cb-row.new { background: var(--chip-soft); border-radius: 8px; border: 0; margin-top: 6px; padding: 10px 12px; }
.cb-row.new input { flex: 1; border: 0; background: none; font: 500 16px var(--sans); outline: none; }
/* course list & template gallery */
.cb-start { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cb-start h2 { font-family: var(--serif); font-size: 32px; margin: 0; }
.cb-start-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cb-start-card { width: 230px; height: 170px; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font: 600 16px var(--sans); color: var(--ink); }
.cb-start-card .jb-ico { width: 30px; height: 30px; color: var(--sage-text); } .cb-start-card:hover { border-color: var(--sage); box-shadow: var(--shadow); }
.cb-start-card.drop { border-style: dashed; background: var(--chip-soft); } .cb-start-card.drop.over { border-color: var(--sage); background: var(--sage-mist); }
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.cb-ccard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; text-decoration: none; color: inherit; text-align: left; font: inherit; padding: 0; }
.cb-ccard:hover { box-shadow: var(--shadow); border-color: var(--line); transform: translateY(-1px); }
.cb-ccover { height: 112px; background: var(--cb-accent); position: relative; display: flex; align-items: flex-end; padding: 12px 14px; color: #fff; background-size: cover; background-position: center; }
.cb-ccover .cat { font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .1em; background: rgba(0, 0, 0, .28); padding: 3px 8px; border-radius: 4px; }
.cb-ccover .mark { position: absolute; right: 14px; top: 12px; font-family: var(--caps); font-size: 34px; opacity: .3; }
.cb-cbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cb-cbody b { font-family: var(--serif); font-size: 21px; line-height: 1.15; } .cb-cbody p { margin: 0; color: var(--ink-3); font-size: 14px; }
.cb-cmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--ink-4); }
.cb-gallery { position: fixed; inset: 0; z-index: 45; background: var(--card); display: flex; flex-direction: column; animation: lp-in .18s; }
.cb-ghead { padding: 22px 28px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cb-ghead h2 { font-family: var(--serif); font-size: 34px; margin: 0; }
.cb-gtabs { display: flex; gap: 22px; padding: 14px 28px 0; border-bottom: 1px solid var(--line); }
.cb-gtabs button { border: 0; background: none; padding: 10px 0; font: 600 15px var(--sans); color: var(--ink-3); border-bottom: 3px solid transparent; cursor: pointer; }
.cb-gtabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--sage); }
.cb-gbody { flex: 1; display: flex; min-height: 0; }
.cb-gcats { width: 210px; flex: none; padding: 18px 12px 18px 28px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; border-right: 1px solid var(--line-soft); }
.cb-gcats button { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font: 500 14px var(--sans); color: var(--ink-2); cursor: pointer; }
.cb-gcats button[aria-pressed="true"] { background: var(--sage-mist); color: var(--sage-ink); font-weight: 700; }
.cb-gmain { flex: 1; overflow-y: auto; padding: 18px 28px 40px; }
.cb-preview-lesson { border: 1px solid var(--line); border-radius: var(--r); max-height: calc(60vh / var(--zf, 1)); overflow-y: auto; }
.cb-preview-lesson .cb-lhead { padding-top: 24px; } .cb-preview-lesson .cb-ltitle { font-size: 30px; }
.cb-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cb-type { border: 1.5px solid var(--line); background: var(--card); border-radius: var(--r); padding: 14px; text-align: left; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font: inherit; }
.cb-type:hover, .cb-type[aria-pressed="true"] { border-color: var(--sage); background: var(--sage-mist); }
.cb-type .jb-ico { width: 22px; height: 22px; color: var(--sage-text); flex: none; margin-top: 2px; } .cb-type b { display: block; } .cb-type span { font-size: 13px; color: var(--ink-3); }
.cb-libgrp { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); margin: 14px 0 6px; }
.cb-pairs { display: flex; flex-direction: column; gap: 10px; } .cb-pair { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.cb-pair .cb-mini { position: absolute; right: 6px; top: 6px; }
.cb-choicerow { display: flex; gap: 8px; align-items: center; } .cb-choicerow input[type=text] { flex: 1; }
.cb-imgprev { max-width: 100%; max-height: 160px; border-radius: 8px; display: block; margin-top: 8px; }
@media (max-width: 900px) {
  .cb-outline { position: absolute; z-index: 4; top: 58px; bottom: 0; box-shadow: var(--shadow); } .cb-outline.collapsed { box-shadow: none; }
  .cb-gcats { display: none; } .cb-canvas { padding: 10px; } .cb-top .hide-sm { display: none; }
}
@media (max-width: 640px) {
  .cb-ltitle { font-size: 32px; } .cb-col { padding: 0 16px; } .cb-statement p { font-size: 24px; } .cb-types { grid-template-columns: 1fr; }
  .cb-ghead, .cb-gtabs, .cb-gmain { padding-left: 16px; padding-right: 16px; }
}

/* ---- in-place editing controls (builder only) */
.cb-x { border: 0; background: var(--card); color: var(--ink-4); width: 22px; height: 22px; border-radius: 50%; font: 600 15px/1 var(--sans); cursor: pointer; flex: none; opacity: 0; transition: opacity .15s; box-shadow: 0 0 0 1px var(--line); margin-left: 6px; vertical-align: middle; }
.cb-x:hover { color: var(--maroon-text); box-shadow: 0 0 0 1px var(--maroon-line); }
.cb-edit-mode :is(li, .cb-acc, .cb-card, .cb-pstep, .cb-choice, .cb-sortcard, .cb-pile, .cb-tabbar [role=tab], .cb-spotcard):hover > .cb-x,
.cb-edit-mode :is(li, .cb-acc-h, .cb-pnum, .cb-tabbar [role=tab]):hover .cb-x, .cb-edit-mode .cb-x:focus { opacity: 1; }
.cb-card.edit, .cb-sortcard.edit, .cb-pile { position: relative; }
.cb-card.edit > .cb-x, .cb-spotcard > .cb-x { position: absolute; top: 6px; right: 6px; margin: 0; }
.cb-pile > .cb-x { position: absolute; top: 6px; right: 6px; margin: 0; }
.cb-add { border: 1.5px dashed var(--line); background: none; color: var(--ink-3); border-radius: 8px; padding: 6px 12px; font: 600 13px var(--sans); cursor: pointer; margin-top: 10px; }
.cb-add:hover { border-color: var(--cb-accent); color: var(--cb-accent); }
.cb-add.inline { margin: 0 0 0 6px; padding: 4px 10px; align-self: center; }
.cb-addcard { height: auto; min-height: 140px; border: 1.5px dashed var(--line) !important; background: none !important; color: var(--ink-3); font: 600 14px var(--sans); border-radius: var(--r); }
.cb-addpile { border-style: dashed; color: var(--ink-3); font: 600 14px var(--sans); align-items: center; justify-content: center; background: none; }
.cb-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-4); background: var(--card); flex: none; cursor: pointer; padding: 0; }
.cb-choice.right .cb-radio { border-color: var(--sage); background: radial-gradient(var(--sage) 45%, var(--card) 50%); }
.cb-edit-mode .cb-choice { cursor: default; }
.cb-hint { font-size: 13px; color: var(--ink-4); margin: 8px 0 0; }
.cb-fbedit { display: flex; flex-direction: column; gap: 4px; font-size: 14px; border-top: 1px dashed var(--line); padding-top: 10px; } .cb-fbedit p { margin: 0; }
.cb-pilesel { font: 500 12px var(--sans); border: 1px solid var(--line); border-radius: 6px; padding: 2px 4px; background: var(--chip-soft); color: var(--ink-3); }
.cb-sortcard.edit { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; cursor: default; }
.cb-vtitle { margin-top: 8px; font-weight: 600; color: var(--ink-3); }
.cb-media { position: relative; }
.cb-mediabar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 6px; opacity: 0; transition: opacity .15s; z-index: 3; white-space: nowrap; }
.cb-mediabar .jb-btn { box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .cb-mediabar .jb-btn.outline { background: var(--card); }
.cb-media:hover > .cb-mediabar, .cb-media:focus-within > .cb-mediabar, .cb-block.sel .cb-mediabar { opacity: 1; }
.cb-audio .jb-btn { flex: none; }
.cb-image-ph .jb-btn { margin-top: 6px; }
/* ---- sample picture label */
.cb-sample { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(27, 27, 27, .72); color: #fff; font: 600 12px var(--sans); padding: 4px 9px; border-radius: 6px; pointer-events: none; }
/* ---- gear panel: attached to the block, not a side panel */
.cb-pop { position: absolute; top: 26px; right: -14px; width: 320px; max-width: calc(100vw / var(--zf, 1) - 32px); z-index: 6; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(40, 30, 20, .2); padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; animation: lp-in .14s ease-out; font: 14px var(--sans); text-align: left; }
.cb-pop-h { display: flex; justify-content: space-between; align-items: center; } .cb-pop-h b { display: inline-flex; align-items: center; gap: 6px; } .cb-pop-h .jb-ico { width: 16px; height: 16px; }
.cb-pop-sec { display: flex; flex-direction: column; gap: 8px; } .cb-pop-t { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); }
.cb-pop-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .cb-pop-row > span { color: var(--ink-3); }
.cb-pop .cb-seg button { padding: 4px 9px; font-size: 12px; }
.cb-pop .jb-field textarea { font: 13px/1.4 ui-monospace, Menlo, monospace; }
/* ---- block styles (gear → Format): learners see these too */
.cb-size-sm > .cb-wrap > .cb-inner, .cb-size-sm > .cb-inner { zoom: .88; }
.cb-size-lg > .cb-wrap > .cb-inner, .cb-size-lg > .cb-inner { zoom: 1.18; }
.cb-align-center .cb-inner { text-align: center; } .cb-align-center .cb-list { align-items: center; } .cb-align-center .cb-note { align-items: center; }
.cb-block:is(.cb-bg-tint, .cb-bg-accent, .cb-bg-dark) { margin: 10px -24px; padding: 30px 24px; }
.cb-bg-tint { background: var(--cb-tint); }
.cb-bg-accent { background: var(--cb-accent); color: #fff; } .cb-bg-dark { background: #1F1F1F; color: #F2F0EB; }
.cb-bg-accent :is(.cb-kicker, .cb-pnum, .cb-note b, .cb-acc-h > span, .cb-pile > b), .cb-bg-dark :is(.cb-kicker, .cb-pnum, .cb-note b, .cb-acc-h > span, .cb-pile > b) { color: inherit; }
.cb-bg-accent :is(.cb-note, .cb-check, .cb-response, .cb-process, .cb-accordion), .cb-bg-dark :is(.cb-note, .cb-check, .cb-response, .cb-process) { color: var(--ink); }
.cb-bg-accent .cb-list.bullets li::before { background: #fff; } .cb-bg-accent .cb-list.numbers li::before { background: #fff; color: var(--cb-accent); }
.cb-space-compact { padding-top: 2px !important; padding-bottom: 2px !important; } .cb-space-roomy { padding-top: 34px !important; padding-bottom: 34px !important; }
/* ---- full screen: the lesson as learners see it, edge to edge */
.cb-fullbar { display: none; }
.cb-app.full .cb-top, .cb-app.full .cb-outline { display: none; }
.cb-app.full .cb-canvas { padding: 0; background: var(--card); }
.cb-app.full .cb-stage { max-width: none; border-radius: 0; box-shadow: none; min-height: 100%; }
.cb-app.full .cb-stage.tablet { max-width: 768px; } .cb-app.full .cb-stage.phone { max-width: 390px; }
.cb-app.full .cb-lsettings { display: none; }
.cb-app.full .cb-fullbar { display: flex; position: fixed; top: 14px; right: 16px; z-index: 46; align-items: center; gap: 8px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 4px 4px 4px 12px; box-shadow: var(--shadow); opacity: .5; transition: opacity .2s; }
.cb-app.full .cb-fullbar:hover, .cb-app.full .cb-fullbar:focus-within { opacity: 1; }
.cb-app.full .cb-fullbar .jb-btn { border-radius: 999px; }
body.jb-ai-open .cb-app.full .cb-fullbar { right: calc(min(400px, 100%) + 16px); }
/* ---- inline block library */
.cb-libinline { width: 100%; text-align: left; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.cb-libinline .cb-libgrp:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .cb-pop, .cb-libinline { animation: none; } }
.cb-stage .cb-cover-img { border-radius: var(--r-lg) var(--r-lg) 0 0; } .cb-app.full .cb-stage .cb-cover-img { border-radius: 0; }

/* the quick-insert bar at the end stays pinned to the bottom of the screen while building (Rise-style) */
.cb-quick.end { position: sticky; bottom: 0; z-index: 4; padding: 26px 0 18px; margin-top: 8px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card) 34%); }
.cb-edit-mode #blocks { padding-bottom: 8px; }
.cb-app.full .cb-quick.end { bottom: 0; }
/* headings and lists inside formatted text */
:is(.cb-para, .cb-acc-b, .cb-tabpane, .cb-pstep) h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.2; margin: 0 0 .45em; color: var(--ink); }
:is(.cb-para, .cb-acc-b, .cb-tabpane, .cb-pstep) h4 { font-family: var(--serif); font-size: 21px; font-weight: 600; margin: 0 0 .4em; }
:is(.cb-para, .cb-acc-b, .cb-tabpane, .cb-pstep) :is(ul, ol) { margin: .2em 0 .7em; padding-left: 1.3em; } :is(.cb-para, .cb-acc-b, .cb-tabpane, .cb-pstep) li { margin: .25em 0; }
.cb-para b, .cb-para strong { color: var(--ink); }
.cb-bg-accent .cb-para :is(h3, b, strong), .cb-bg-dark .cb-para :is(h3, b, strong) { color: inherit; }
/* one row whenever it fits: tighter buttons, and the bar may run a little wider than the text column */
.cb-qset button { min-width: 0; padding: 6px 7px; }
.cb-quick.end .cb-quick-row { width: min(900px, calc(100vw / var(--zf, 1) - 80px)); max-width: none; }
.cb-quick.end { display: flex; flex-direction: column; align-items: center; }

/* ---- formatting bar (one row above the selected block, word-processor style) */
.cb-edit-mode .cb-tools, .cb-fmt, .cb-pop { display: none !important; }
.cb-tb { display: none; position: absolute; left: -14px; right: -14px; bottom: calc(100% + 10px); z-index: 7; align-items: center; flex-wrap: wrap; gap: 2px; padding: 4px 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(40, 30, 20, .12); font: 500 13px var(--sans); color: var(--ink-2); text-align: left; }
.cb-block.sel > .cb-wrap > .cb-tb { display: flex; animation: lp-in .12s ease-out; }
.cb-tbl { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); padding: 0 6px; white-space: nowrap; }
.cb-tbd { width: 1px; height: 20px; background: var(--line); margin: 0 4px; flex: none; }
.cb-tbgrow { flex: 1; }
.cb-tbb { border: 0; background: none; min-width: 30px; height: 30px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: 600 15px var(--serif); color: var(--ink-2); padding: 0 6px; }
.cb-tbb:hover { background: var(--chip-soft); } .cb-tbb[aria-pressed="true"] { background: var(--sage-tint); color: var(--sage-ink); }
.cb-tbb .jb-ico { width: 17px; height: 17px; }
.cb-tbs { border: 0; background: none; font: 500 13px var(--sans); color: var(--ink-2); height: 30px; padding: 0 4px; border-radius: 6px; cursor: pointer; max-width: 150px; }
.cb-tbs:hover, .cb-tbs:focus { background: var(--chip-soft); outline: none; }
.cb-tbi { border: 1px solid var(--line); border-radius: 6px; height: 28px; padding: 0 8px; font: 13px var(--sans); width: 120px; background: var(--paper); }
.cb-tbi.wide { width: 230px; } .cb-tbi[type=number] { width: 70px; }
.cb-tbsw { display: inline-flex; gap: 4px; padding: 0 4px; }
.cb-sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--sw); cursor: pointer; padding: 0; }
.cb-sw.none { background: linear-gradient(135deg, #fff 45%, var(--maroon) 46% 54%, #fff 55%); }
.cb-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sage); }
.cb-tbx { flex-basis: 100%; padding: 6px 4px 2px; } .cb-tbx label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-4); }
.cb-tbx textarea { font: 13px/1.4 ui-monospace, Menlo, monospace; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
/* the block's name shows on hover, so it's clear what you're about to select */
.cb-hoverlbl { position: absolute; top: -8px; right: -14px; transform: translateY(-100%); font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); opacity: 0; pointer-events: none; }
.cb-edit-mode .cb-block:not(.sel):hover .cb-hoverlbl { opacity: 1; }
.cb-edit-mode .cb-block.sel > .cb-wrap::before { border: 1.5px solid var(--sage-soft); }
.cb-tb { left: -20px; right: -20px; }
@media (min-width: 1200px) { .cb-tb { left: -60px; right: -60px; } }
/* the builder looks exactly like the lesson: no outlines around blocks or text while editing.
   The formatting bar above a block is what shows it's selected. */
.cb-edit:hover, .cb-edit:focus { box-shadow: none !important; outline: none; }
.cb-edit-mode .cb-block > .cb-wrap::before, .cb-edit-mode .cb-block:hover > .cb-wrap::before, .cb-edit-mode .cb-block.sel > .cb-wrap::before { content: none !important; border: 0 !important; }
.cb-edit { caret-color: var(--cb-accent); }
.cb-image img, .cb-hotspots img { height: auto; }

/* delete: two clicks — the trash can turns into a red "Confirm" first */
.cb-trash { gap: 5px; } .cb-trash-t { display: none; font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .05em; }
.cb-trash:hover { color: var(--maroon-text); }
.cb-trash.armed { background: var(--maroon); color: var(--on-maroon); padding: 0 10px; animation: lp-in .12s ease-out; } .cb-trash.armed .cb-trash-t { display: inline; } .cb-trash.armed .jb-ico { stroke: #fff; }

/* Preview menu: from here, or from the beginning */
.cb-pvmenu { position: fixed; z-index: 60; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(40, 30, 20, .18); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 270px; animation: lp-in .12s ease-out; }
.cb-pvmenu button { display: flex; align-items: flex-start; gap: 10px; border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer; font: 14px var(--sans); color: var(--ink); }
.cb-pvmenu button:hover, .cb-pvmenu button:focus { background: var(--chip-soft); outline: none; }
.cb-pvmenu .jb-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--sage-text); flex: none; } .cb-pvmenu .jb-ico.up { transform: rotate(90deg); }
.cb-pvmenu span { display: flex; flex-direction: column; gap: 1px; } .cb-pvmenu small { color: var(--ink-4); font-size: 12px; }

/* flashcards for learners: a stacked deck */
.cb-deck { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cb-stack { position: relative; width: min(440px, 100%); height: 230px; margin-bottom: 24px; }
.cb-stack .cb-card { position: absolute; inset: 0; height: auto; width: 100%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s; transform-origin: 50% 100%; }
.cb-stack .cb-card .f, .cb-stack .cb-card .bk { font-size: 26px; box-shadow: 0 6px 18px rgba(40, 30, 20, .12); }
.cb-stack .cb-card .bk { font-size: 21px; }
.cb-decknav { display: flex; align-items: center; gap: 14px; } .cb-dcount { font: 600 14px var(--sans); color: var(--ink-3); min-width: 64px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .cb-stack .cb-card { transition: none; } }

/* accent color picker */
.cb-colorpick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-cp { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); background: var(--c); cursor: pointer; padding: 0; position: relative; flex: none; }
.cb-cp[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.cb-cp.custom { background: conic-gradient(#e94b3c, #f5b041, #f7dc6f, #58d68d, #48c9b0, #5dade2, #a569bd, #ec7063, #e94b3c); overflow: hidden; }
.cb-cp.custom[aria-pressed="true"] { background: var(--c); }
.cb-cp.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.cb-hex { width: 104px; font: 600 14px ui-monospace, Menlo, monospace; text-transform: uppercase; }
.cb-cpprev { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.cb-cpbtn { background: var(--cb-accent); color: #fff; font: 600 14px var(--sans); padding: 7px 16px; border-radius: 8px; }
.cb-cpnote { background: var(--cb-tint); padding: 6px 10px; border-radius: 8px; font-size: 13px; } .cb-cpnote b { color: var(--cb-accent); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; }
.cb-cphead { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--cb-accent); }

/* class discussion: a tab on the right edge that slides out the conversation */
.dc-tab { position: fixed; right: 0; top: 42%; z-index: 49; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 9px; border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px; background: var(--card); box-shadow: -4px 4px 18px rgba(40, 30, 20, .12); cursor: pointer; color: var(--ink-2); font: 600 13px var(--sans); }
.dc-tab span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .04em; }
.dc-tab .jb-ico { width: 18px; height: 18px; color: var(--sage-text); } .dc-tab:hover { color: var(--ink); padding-right: 12px; }
.dc-n { background: var(--maroon); color: var(--on-maroon); border-radius: 999px; min-width: 20px; height: 20px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.dc-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(410px, 100%); z-index: 49; background: var(--card); border-left: 1px solid var(--line); box-shadow: -10px 0 34px rgba(40, 30, 20, .14); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .9, .3, 1); height: calc(100vh / var(--zf, 1)); }
.dc-panel.open { transform: none; }
.dc-panel > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 14px 16px 0; border-bottom: 1px solid var(--line); }
.dc-tabs { display: flex; gap: 18px; }
.dc-tabs button { border: 0; background: none; padding: 8px 0 10px; font: 600 14px var(--sans); color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; }
.dc-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--sage); }
.dc-tabs span { font-weight: 500; color: var(--ink-4); margin-left: 3px; }
.dc-panel > header .jb-iconbtn { margin-bottom: 6px; }
.dc-class { display: flex; align-items: center; gap: 8px; padding: 10px 16px 0; font: 600 13px var(--sans); color: var(--ink-3); } .dc-class select { flex: 1; }
.dc-new { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.dc-new textarea { resize: vertical; min-height: 70px; }
.dc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dc-where { font-size: 12px; color: var(--ink-4); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-list { flex: 1; overflow-y: auto; padding: 6px 8px 30px; }
.dc-c { padding: 12px 10px; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line-soft); }
.dc-c.go { cursor: pointer; } .dc-c.go:hover, .dc-c.go:focus { background: var(--chip-soft); outline: none; }
.dc-who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dc-av { width: 28px; height: 28px; border-radius: 50%; background: var(--sage-tint); color: var(--sage-ink); font: 700 11px var(--sans); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.dc-av.staff { background: var(--maroon); color: var(--on-maroon); }
.dc-badge { font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--maroon-text); background: var(--maroon-wash); padding: 2px 6px; border-radius: 4px; }
.dc-when { font-size: 12px; color: var(--ink-4); } .dc-who .dc-when { margin-left: auto; }
.dc-text { margin: 0; white-space: pre-wrap; line-height: 1.45; }
.dc-at { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); } .dc-at .jb-ico { width: 13px; height: 13px; color: var(--sage-text); flex: none; }
.dc-at i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-del.armed { background: var(--maroon); color: var(--on-maroon); } .dc-del.armed .jb-ico { stroke: #fff; }
.dc-empty { color: var(--ink-4); text-align: center; padding: 30px 16px; }
.cb-block.dc-flash { animation: dc-flash 2.2s ease-out; border-radius: 12px; }
@keyframes dc-flash { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cb-accent, #650B09) 35%, transparent), 0 0 0 9999px rgba(255, 255, 255, 0); background: color-mix(in srgb, var(--cb-accent, #650B09) 7%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; background: transparent; } }
@media print { .dc-tab, .dc-panel { display: none; } }

/* ---- the course player (students; the builder's Preview) */
.cp-app { position: fixed; inset: 0; z-index: 40; background: var(--card); display: flex; flex-direction: column; }
.cp-top { height: 54px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--card); }
.cp-ctitle { font-family: var(--serif); font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-grow { flex: 1; }
.cp { flex: 1; display: flex; min-height: 0; background: var(--card); }
.cp-side { width: 300px; flex: none; border-right: 1px solid var(--line); background: var(--paper); overflow-y: auto; transition: width .22s, opacity .2s; }
.cp.side-hidden .cp-side { width: 0; opacity: 0; border-right: 0; overflow: hidden; }
.cp-head { padding: 22px 20px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.cp-kick { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); }
.cp-title { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.cp-prog { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; } .cp-prog span { display: block; height: 100%; background: var(--cb-accent); border-radius: 3px; }
.cp-pct { font-size: 12px; color: var(--ink-3); }
.cp-nav { padding: 8px 10px 40px; }
.cp-uh { display: flex; justify-content: space-between; gap: 8px; padding: 14px 10px 6px; font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.cp-lock { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-4); }
.cp-l { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.cp-l:hover { background: var(--chip-soft); } .cp-l.cur { background: var(--cb-tint); font-weight: 600; }
.cp-l.locked { color: var(--ink-4); cursor: default; }
.cp-l .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--sans); color: #fff; }
.cp-l.done .cp-dot { background: var(--cb-accent); border-color: var(--cb-accent); } .cp-l.cur .cp-dot { border-color: var(--cb-accent); }
.cp-tag { font: 700 10px var(--sans); text-transform: uppercase; color: var(--ink-4); }
.cp-main { flex: 1; min-width: 0; overflow-y: auto; position: relative; background: var(--card); }
.cp-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line-soft); }
.cp-btn { border: 0; background: none; width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); }
.cp-btn:hover { background: var(--chip-soft); } .cp-btn .jb-ico { width: 20px; height: 20px; }
.cp-pos { font: 600 13px var(--sans); color: var(--ink-3); }
.cp-main .cb-lesson { background: var(--card); }
body.cp-fullscreen .cp-top, body.cp-fullscreen .cb-top { display: none; }
@media (max-width: 900px) { .cp-side { position: absolute; z-index: 5; top: 0; bottom: 0; box-shadow: var(--shadow); } .cp { position: relative; } }
/* the builder's Preview is the player, edge to edge under the builder's top bar */
.cb-app.previewing .cb-outline { display: none; }
.cb-app.previewing .cb-canvas { padding: 0; overflow: hidden; background: var(--page); }
.cb-app.previewing .cb-stage { max-width: none; border-radius: 0; box-shadow: none; height: 100%; min-height: 0; display: flex; }
.cb-app.previewing .cb-stage.tablet { max-width: 768px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.cb-app.previewing .cb-stage.phone { max-width: 390px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.cb-app.previewing .cb-stage > .cp { width: 100%; }
.cb-stage.phone .cp-side, .cb-stage.tablet .cp-side { position: absolute; z-index: 5; top: 0; bottom: 0; box-shadow: var(--shadow); }
.cb-stage.phone .cp, .cb-stage.tablet .cp { position: relative; }
/* on wide screens the lesson moves over while the discussion is open, so nothing is covered */
@media (min-width: 1100px) { body.dc-open :is(.cp-app, .cb-app) { right: min(410px, 100%); transition: right .22s; } }

/* All blocks: a panel that slides in from the left (the lesson stays in view) and scrolls on its own */
.cb-libpanel { position: absolute; top: 58px; left: 0; bottom: 0; width: min(390px, 92vw); z-index: 45; background: var(--card); border-right: 1px solid var(--line); box-shadow: 12px 0 34px rgba(40, 30, 20, .14); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .24s cubic-bezier(.2, .9, .3, 1); }
.cb-libpanel.open { transform: none; }
.cb-app.full .cb-libpanel { top: 0; }
.cb-libpanel > header { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 18px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.cb-libpanel > header b { font-family: var(--serif); font-size: 21px; } .cb-libpanel > header .jb-muted { flex: 1 1 100%; order: 3; font-size: 13px; }
.cb-libpanel > header .jb-iconbtn { margin-left: auto; }
.cb-libscroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 30px; }
.cb-libgrid { display: flex; flex-direction: column; gap: 6px; }
.cb-libpanel .cb-type { padding: 10px 12px; }
/* the AI block (builder only) */
.cb-aiblock { border: 1.5px dashed color-mix(in srgb, var(--cb-accent) 45%, var(--line)); border-radius: 14px; padding: 16px 18px; background: color-mix(in srgb, var(--cb-accent) 4%, var(--card)); display: flex; flex-direction: column; gap: 10px; }
.cb-aih { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cb-aih .jb-ico { color: #B98B4E; width: 18px; height: 18px; } .cb-aih b { font-size: 16px; } .cb-aih .jb-muted { font-size: 13px; }
.cb-aiblock textarea { resize: vertical; font-size: 15px; }
.cb-aichips { display: flex; flex-wrap: wrap; gap: 6px; } .cb-aichips .jb-chip { border: 1px solid var(--line); cursor: pointer; background: var(--card); }
.cb-airow { display: flex; align-items: center; gap: 8px; } .cb-aistatus { flex: 1; font-size: 13px; color: var(--ink-3); }
.cb-aiblock.busy { animation: cb-aipulse 1.4s ease-in-out infinite; } .cb-aiblock.busy .cb-aistatus { color: var(--cb-accent); font-weight: 600; }
@keyframes cb-aipulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--cb-accent) 12%, transparent); } }
@media (prefers-reduced-motion: reduce) { .cb-libpanel { transition: none; } .cb-aiblock.busy { animation: none; } }
/* the lesson fills the builder edge to edge (no margin, no card), just as it fills the screen for learners */
.cb-canvas { padding: 0; background: var(--card); }
.cb-stage { max-width: none; border-radius: 0; box-shadow: none; min-height: 100%; }

/* cover picture: preview in course settings; banner at the top of the student's course menu */
.cb-coverprev { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 8px; background: var(--chip-soft); }
.cb-coverprev img { display: block; width: 100%; max-height: 190px; object-fit: cover; }
.cb-coverprev .jb-btn { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, .92); }
.cp-cover { height: 120px; background: var(--cb-accent) center / cover no-repeat; }

/* course cards: a gear in the corner opens the course straight into its settings */
.cb-ccard-wrap { position: relative; display: flex; } .cb-ccard-wrap > .cb-ccard { flex: 1; }
.cb-cgear { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.cb-cgear:hover { background: #fff; color: var(--ink); } .cb-cgear .jb-ico { width: 18px; height: 18px; }
.cb-ccard-wrap .cb-ccover .mark { right: 54px; }

/* course list as rows */
.cb-rowsview { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cb-crow { display: grid; grid-template-columns: 44px minmax(180px, 2fr) auto minmax(110px, 1fr) minmax(140px, 1.6fr) minmax(90px, 1fr) 36px; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.cb-crow:last-child { border-bottom: 0; } .cb-crow:hover { background: var(--chip-soft); }
.cb-crow-sw { width: 44px; height: 44px; border-radius: 10px; background: var(--cb-accent) center / cover; }
.cb-crow-name { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); min-width: 0; }
.cb-crow-name b { font-family: var(--serif); font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-crow-name span { font-size: 13px; color: var(--ink-4); }
.cb-crow-m { font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-crow-gear { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); } .cb-crow-gear:hover { background: var(--chip); color: var(--ink); }
.cb-crow-gear .jb-ico { width: 18px; height: 18px; }
.jb-page-head .cb-seg button { display: inline-flex; align-items: center; gap: 5px; } .jb-page-head .cb-seg .jb-ico { width: 15px; height: 15px; }
@media (max-width: 900px) { .cb-crow { grid-template-columns: 40px 1fr auto 36px; } .cb-crow > .cb-crow-m { display: none; } }

/* the cover keeps one shape everywhere it's large: a wide 16 × 5 banner (the preview crops the same way) */
.cb-coverprev img { aspect-ratio: 16 / 5; max-height: none; height: auto; }
/* always the full width of the page (a capped height used to shrink its width and push it to the left on wide screens);
   past the cap the picture crops evenly from its center */
.cb-cover-img { width: 100%; height: auto; aspect-ratio: 16 / 5; max-height: calc(42vh / var(--zf, 1)); background-position: center; }
.tone-warn { color: var(--amber-ink); }

/* picture cropper */
.crop-view { position: relative; width: 100%; overflow: hidden; border-radius: 10px; background: #1b1b1b; cursor: grab; touch-action: none; user-select: none; outline: none; }
.crop-view.dragging { cursor: grabbing; } .crop-view:focus-visible { box-shadow: 0 0 0 3px var(--sage-soft); }
.crop-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.crop-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, .35) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .35) 1px, transparent 1px); background-size: 33.333% 33.333%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); opacity: .7; }
.crop-zoom { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .crop-zoom input { flex: 1; accent-color: var(--sage); } .crop-zoom .jb-ico { width: 18px; height: 18px; color: var(--ink-3); }
.cb-coveracts { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; } .cb-coveracts .jb-btn { position: static; background: rgba(255, 255, 255, .92); }

/* course card thumbnail: 16 × 9 when there's a picture */
.cb-ccover.pic { height: auto; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.cb-ccover.pic .mark { display: none; }
.cb-coverprev img { aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; }
.cb-picfield + .cb-picfield { margin-top: 14px; }
/* the banner at the top of the builder's outline (like the top of the student's course menu) */
.cb-olcover { height: 96px; margin: -12px -10px 6px; background: var(--cb-accent) center / cover no-repeat; }
.cb-outline.collapsed .cb-olcover { display: none; }
.crop-view { flex: none; margin: 0 auto; }

/* older step lessons shown inside the course player */
.cp-legacy { max-width: 880px; margin: 0 auto; padding: 28px 24px 60px; }

/* template preview (centered) */
.tp { display: flex; flex-direction: column; gap: 14px; }
.tp-hero { background: var(--cb-accent); color: #fff; border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.tp-kick { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.tp-name { font-family: var(--serif); font-size: 30px; line-height: 1.1; } .tp-hero p { margin: 0; opacity: .95; max-width: 60ch; }
.tp-size { font-size: 13px; font-weight: 600; opacity: .9; margin-top: 4px; }
.tp-h { font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); margin-top: 4px; }
.tp-units { display: flex; flex-direction: column; gap: 12px; }
.tp-unit { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.tp-unit header { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; background: var(--chip-soft); border-bottom: 1px solid var(--line-soft); }
.tp-un { font: 700 11px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-4); } .tp-unit header b { font-family: var(--serif); font-size: 19px; flex: 1; } .tp-count { font-size: 12px; color: var(--ink-4); }
.tp-unit ol { list-style: none; margin: 0; padding: 4px 8px; }
.tp-unit li { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; }
.tp-unit li + li { border-top: 1px solid var(--line-soft); }
.tp-no { font: 600 13px var(--sans); color: var(--ink-4); min-width: 28px; } .tp-unit li .jb-ico { width: 18px; height: 18px; color: var(--sage-text); flex: none; }
.tp-lt { flex: 1; font-weight: 600; min-width: 0; }
.tp-tag { font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 4px; background: var(--sage-tint); color: var(--sage-ink); } .tp-tag.quiz { background: var(--amber-tint); color: var(--amber-ink); }
.tp-blocks { font-size: 12px; color: var(--ink-4); min-width: 62px; text-align: right; }
.tp-namefield { margin-top: 6px; }
@media (max-width: 640px) { .tp-blocks { display: none; } }

/* every card's picture area has the same 16 × 9 shape, picture or not, so adding one never resizes the card */
.cb-ccover, .cb-ccover.pic { height: auto; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }

/* process steps slide inside their own track */
.cb-psteps { position: relative; }
.cb-pghost { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }

/* ---- box colors: the block's own card takes the color; other blocks get a soft box around their content.
   The page behind blocks always stays white. (Replaces the old full-width backgrounds.) */
.cb-block:is(.cb-bg-tint, .cb-bg-accent, .cb-bg-dark) { margin: 0; padding-left: 0; padding-right: 0; background: none; color: inherit; }
.cb-box-own :is(.cb-process, .cb-note, .cb-quote, .cb-check, .cb-response, .cb-audio, .cb-download) { background: var(--cb-box); border-color: transparent; }
.cb-box-own .cb-statement { background: var(--cb-box); border-radius: 14px; padding: 26px 22px; }
.cb-box-wrap > .cb-wrap > .cb-inner, .cb-box-wrap > .cb-inner { background: var(--cb-box); border-radius: 14px; padding: 22px 26px; }
.cb-box-dark :is(.cb-process, .cb-note, .cb-quote, .cb-check, .cb-response, .cb-audio, .cb-download, .cb-statement), .cb-box-dark.cb-box-wrap .cb-inner { color: #F6F3EC; }
.cb-box-dark :is(.cb-kicker, .cb-pnum, .cb-note b, .cb-quote footer, .cb-heading, .cb-para b, .cb-para h3, .cb-acc-h > span, .cb-pile > b, .jb-muted) { color: inherit; opacity: .9; }
.cb-box-dark .cb-choice { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: inherit; }
.cb-box-dark .cb-response textarea { background: rgba(255, 255, 255, .92); }
.cb-box-dark .cb-list.bullets li::before { background: currentColor; } .cb-box-dark .cb-list.numbers li::before { background: #fff; color: #1F1F1F; }
/* swatches in the formatting bar */
.cb-sw.wheel { position: relative; overflow: hidden; background: conic-gradient(#e94b3c, #f5b041, #f7dc6f, #58d68d, #48c9b0, #5dade2, #a569bd, #ec7063, #e94b3c); }
.cb-sw.wheel.on { background: var(--sw); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sage); }
.cb-sw.wheel input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.cb-box-dark :is(h2, h3, h4, b, strong, i, em, .cb-ltitle, .cb-feedback) { color: inherit; }
.cb-box-dark .cb-pnav .jb-btn.outline { background: rgba(255, 255, 255, .9); }

/* blocks are white unless a box color is chosen (No box color = white) */
.cb-process, .cb-quote, .cb-note { background: #fff; }
.cb-note { border: 1px solid var(--line); }

/* course menu: its hide button sits on the menu itself; when hidden, a tab on the left edge brings it back */
.cp { position: relative; }
.cp-collapse { position: sticky; top: 10px; float: right; margin: 10px 10px -46px 0; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(6px); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(40, 30, 20, .1); }
.cp-collapse:hover { background: var(--card); color: var(--ink); } .cp-collapse .jb-ico { width: 18px; height: 18px; }
.cp-reopen { position: absolute; left: 0; top: 50%; transform: translate(-100%, -50%); z-index: 6; width: 30px; height: 64px; border: 1px solid var(--line); border-left: 0; border-radius: 0 12px 12px 0; background: var(--card); color: var(--ink-2); box-shadow: 0 4px 14px rgba(40, 30, 20, .12); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .22s ease; }
.cp:not(.side-hidden) .cp-reopen { opacity: 0; pointer-events: none; }
.cp-reopen .jb-ico { width: 18px; height: 18px; transform: scaleX(-1); }
.cp-reopen:hover { color: var(--ink); width: 34px; }
.cp.side-hidden .cp-reopen { transform: translate(0, -50%); }

/* the course header bar (course title, the lesson's place, full screen) looks the same in Edit and Preview;
   the builder's top bar above it holds only editing tools */
.cp-btitle { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 50%; padding-left: 6px; }
.cp-btitle + .cp-pos:not(:empty)::before { content: '·'; margin: 0 8px 0 2px; color: var(--ink-4); }
.cp-bar { min-height: 52px; }
.cb-ebar { position: sticky; top: 0; z-index: 8; }
.cb-ttl .jb-ico { width: 18px; height: 18px; }
/* full screen: the Edit / Preview switch floats at the top center, clear of the bar's full-screen button */
.cb-app.full .cb-fullbar { left: 50%; right: auto; top: 8px; transform: translateX(-50%); padding: 4px 6px 4px 12px; }
body.jb-ai-open .cb-app.full .cb-fullbar { right: auto; }
/* full screen: the Edit / Preview switch sits inside the course header bar (one border, no floating pill) */
.cb-app.full .cb-fullbar { top: 0; height: 52px; transform: translateX(-50%); padding: 0; background: none; backdrop-filter: none; border: 0; border-radius: 0; box-shadow: none; opacity: 1; }
.cb-app.full .cb-fullbar .cb-save { display: none; }

/* labeled graphic: a marker's note hovers over the marker in a small box with a pointer (editor and learners alike) */
.cb-spotcard { position: absolute; width: min(300px, 80%); transform: translate(-50%, calc(-100% - 28px)); z-index: 6; padding: 14px 16px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
.cb-spotcard.below { transform: translate(-50%, 28px); }
.cb-spotcard.edge-l { transform: translate(-28px, calc(-100% - 28px)); } .cb-spotcard.edge-l.below { transform: translate(-28px, 28px); }
.cb-spotcard.edge-r { transform: translate(calc(-100% + 28px), calc(-100% - 28px)); } .cb-spotcard.edge-r.below { transform: translate(calc(-100% + 28px), 28px); }
.cb-spotcard::after { content: ''; position: absolute; left: 50%; width: 14px; height: 14px; background: var(--card); transform: translateX(-50%) rotate(45deg); }
.cb-spotcard.above::after { bottom: -8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cb-spotcard.below::after { top: -8px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.cb-spotcard.edge-l::after { left: 28px; } .cb-spotcard.edge-r::after { left: calc(100% - 28px); }
.cb-spotcard > b { display: block; padding-right: 24px; }
.cb-hotspots .cb-spot { z-index: 4; } .cb-hotspots .cb-spot.on { z-index: 7; }
/* while a note is open, the picture's Choose/Upload/Link buttons step aside */
.cb-hotspots.spot-open > .cb-mediabar { display: none; }

/* the text bar: floats just above the text being typed (the block's bar stays at the top of the block) */
.cb-txtbar { position: fixed; z-index: 60; display: flex; align-items: center; gap: 2px; padding: 4px 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(40, 30, 20, .16); font: 500 13px var(--sans); color: var(--ink-2); }
.cb-txtbar[hidden], .cb-txtbar [hidden] { display: none; }