/* Video slot and lesson card, shared by cert-guide.html and classroom.html. Design 003 tokens only. */
.cl-video { margin: var(--fm-space-4) 0; padding: 0; }
.cl-video video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--fm-ink); border-radius: var(--fm-radius-md); }
.cl-video-meta { margin: var(--fm-space-2) 0 0; font-size: var(--fm-text-sm); color: var(--fm-ink-2); }
.cl-video-meta a { color: var(--fm-ink); text-decoration: underline; }
.cl-video-empty { display: grid; grid-template-columns: auto 1fr; column-gap: var(--fm-space-3); align-items: center; min-height: 72px; max-height: 96px; margin: var(--fm-space-3) 0; padding: var(--fm-space-3) var(--fm-space-4); background: var(--fm-surface-alt); border: var(--fm-border-width) dashed var(--fm-line-strong); border-radius: var(--fm-radius-md); color: var(--fm-ink); box-sizing: border-box; }
.cl-video-empty::before { content: "\25B6"; grid-row: 1 / span 2; font-size: var(--fm-text-lg); color: var(--fm-ink-2); }
.cl-video-soon { margin: 0; font-size: var(--fm-text-md); font-weight: var(--fm-weight-semibold); }
.cl-video-note { margin: var(--fm-space-1) 0 0; font-size: var(--fm-text-sm); color: var(--fm-ink-2); }

.cl-lesson { margin: var(--fm-space-4) 0; padding: var(--fm-space-4); background: var(--fm-surface); color: var(--fm-ink); border: var(--fm-border-width) solid var(--fm-line); border-radius: var(--fm-radius-md); text-align: left; overflow-wrap: anywhere; }
.cl-lesson-title { margin: 0 0 var(--fm-space-3); font-size: var(--fm-text-lg); font-weight: var(--fm-weight-bold); color: var(--fm-ink); }
.cl-row { margin: 0 0 var(--fm-space-3); }
.cl-row:last-child { margin-bottom: 0; }
.cl-label { margin: 0 0 var(--fm-space-1); font-size: var(--fm-text-sm); font-weight: var(--fm-weight-bold); color: var(--fm-ink-2); }
.cl-text { margin: 0; font-size: var(--fm-text-md); line-height: 1.5; color: var(--fm-ink); }
.cl-watch { margin: 0; padding-left: var(--fm-space-5); font-size: var(--fm-text-md); line-height: 1.5; color: var(--fm-ink); }
.cl-terms { margin: 0; font-size: var(--fm-text-sm); line-height: 1.5; }
.cl-terms dt { font-weight: var(--fm-weight-bold); color: var(--fm-ink); }
.cl-terms dd { margin: 0 0 var(--fm-space-2); color: var(--fm-ink-2); }
.cl-video a:focus-visible, .cl-video video:focus-visible { outline: 2px solid var(--fm-focus-ring); outline-offset: 2px; }