/* bernard courses — deliberately plain; the site's own styles lead. */
.course-header, .course-footer { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; }
.course-header a, .course-footer a { color: inherit; text-decoration: none; font-weight: 600; }
.course-header nav a { margin-left: 1rem; font-weight: 400; }
.course-main { max-width: 46rem; margin: 0 auto; padding: 1rem 1.5rem 4rem; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem; }
.course-card { display: block; color: inherit; text-decoration: none; }
.course-card img, .course-card-blank { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #f2f2ef; border-radius: 4px; }
.course-card h3 { margin: 0.6rem 0 0.15rem; font-size: 1rem; }
.course-card-summary { margin: 0.15rem 0; font-size: 0.9rem; opacity: 0.75; }
.course-card-meta { margin: 0.15rem 0; font-size: 0.85rem; opacity: 0.6; }
.course-cover { width: 100%; border-radius: 4px; margin-bottom: 1rem; }
.course-price { font-size: 1.15rem; margin: 0.5rem 0 0.15rem; }
.course-access { margin: 0.15rem 0 1rem; opacity: 0.7; }
.course-enrol { padding: 0.75rem 2rem; font-size: 1rem; cursor: pointer; border-radius: 4px; border: 1px solid currentColor; background: var(--bernard-accent, #1c5e53); color: var(--bernard-accent-ink, #fff); }
.course-enrol[disabled] { opacity: 0.5; cursor: default; }
.course-soon { opacity: 0.7; }
.course-enrolled-note p { background: color-mix(in srgb, var(--bernard-accent, #1c5e53) 9%, transparent); border-radius: 4px; padding: 0.6rem 1rem; }
.course-recover { margin: 0.75rem 0 1.5rem; font-size: 0.9rem; }
.course-recover summary { cursor: pointer; opacity: 0.7; }
.course-recover label { display: block; margin: 0.6rem 0 0.4rem; }
.course-recover input { display: block; margin-top: 0.25rem; padding: 0.45rem; min-width: 16rem; }
.course-recover button { padding: 0.45rem 1rem; cursor: pointer; }
.course-description { margin: 1.5rem 0; }
.course-section-title { margin: 1.5rem 0 0.5rem; font-size: 1.05rem; }
.course-syllabus { list-style: none; margin: 0.5rem 0; padding: 0; }
.course-syllabus-item { padding: 0.6rem 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.course-syllabus-item a { color: inherit; text-decoration: none; font-weight: 600; }
.course-lesson-n { display: inline-block; min-width: 1.5rem; opacity: 0.5; }
.course-tag { font-size: 0.75rem; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 99px; background: #f2f2ef; }
.course-tag-free, .course-tag-unlocked { background: color-mix(in srgb, var(--bernard-accent, #1c5e53) 14%, transparent); }
.course-lesson-meta { margin-left: 0.5rem; font-size: 0.8rem; opacity: 0.55; }
.course-lesson-summary { margin: 0.25rem 0 0 2rem; font-size: 0.9rem; opacity: 0.75; }
.course-crumb { font-size: 0.85rem; opacity: 0.65; }
.course-crumb a { color: inherit; }
.course-video { position: relative; aspect-ratio: 16/9; margin: 1rem 0; background: #10201c; border-radius: 4px; overflow: hidden; }
.course-video iframe, .course-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.course-video video { object-fit: contain; }
/* A YouTube Short embedded via <iframe> (videoEmbedHtml) reuses the SAME
   portrait treatment as the hosted player's .bnd-player-root.is-portrait
   rule below (max-height, centered) instead of a second mechanism — just
   targeted at .course-video since the static embed has no .bnd-player-root
   wrapper. 9/16 overrides the 16/9 default above so the iframe box itself
   is portrait-shaped, not just height-capped. */
.course-video.is-portrait { aspect-ratio: 9/16; max-height: min(80vh, 42rem); width: auto; margin-inline: auto; }
.bnd-player:fullscreen { aspect-ratio: auto; }
.bnd-player:-webkit-full-screen { aspect-ratio: auto; }
.course-loading { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0.7; }
.bnd-player { outline: none; }
.bnd-player-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.6rem; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); transition: opacity 0.2s ease; opacity: 1; pointer-events: auto; flex-wrap: wrap; }
.bnd-player.bnd-player-idle .bnd-player-bar { opacity: 0; }
.bnd-player-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #fff; cursor: pointer; border-radius: 4px; font-size: 0.85rem; padding: 0 0.4rem; }
.bnd-player-btn:hover, .bnd-player-btn:focus-visible { background: color-mix(in srgb, var(--bernard-accent, #1c5e53) 45%, transparent); }
.bnd-player-time { color: #fff; font-size: 0.8rem; min-width: 5.5rem; text-align: center; }
.bnd-player-scrub { position: relative; flex: 1 1 8rem; min-width: 6rem; height: 44px; display: flex; align-items: center; }
.bnd-player-buffered { position: absolute; left: 0; top: 50%; height: 4px; transform: translateY(-50%); background: rgba(255,255,255,0.35); border-radius: 2px; width: 0%; pointer-events: none; }
.bnd-player-scrub input[type="range"] { position: relative; width: 100%; accent-color: var(--bernard-accent, #1c5e53); height: 44px; cursor: pointer; }
.bnd-player-captions-on, .bnd-player-playing { color: var(--bernard-accent, #1c5e53); }
.bnd-preview-thumb { position: absolute; left: 0; bottom: 3.2rem; max-width: calc(100% - 8px); max-height: 160px; background-color: #10201c; background-repeat: no-repeat; border: 2px solid rgba(255,255,255,0.85); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.35); pointer-events: none; display: none; align-items: flex-end; justify-content: center; z-index: 2; box-sizing: border-box; }
.bnd-preview-thumb:not([hidden]) { display: flex; }
.bnd-preview-thumb-time { margin: 0.2rem; padding: 0.05rem 0.4rem; max-width: calc(100% - 0.4rem); background: rgba(0,0,0,0.75); color: #fff; font-size: 0.7rem; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.bnd-chapter-tick { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 12px; background: rgba(255,255,255,0.85); border-radius: 1px; pointer-events: none; z-index: 1; }
.bnd-player-root { display: block; }
.bnd-upnext { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; text-align: center; background: rgba(16,32,28,0.92); color: #fff; }
.bnd-upnext-label { margin: 0; font-size: 1rem; opacity: 0.85; }
.bnd-upnext-next { display: inline-block; padding: 0.6rem 1.5rem; border-radius: 4px; background: var(--bernard-accent, #1c5e53); color: var(--bernard-accent-ink, #fff); text-decoration: none; font-weight: 600; min-height: 44px; line-height: 1.9; }
.bnd-upnext-again { min-height: 44px; padding: 0.5rem 1.25rem; border-radius: 4px; border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff; cursor: pointer; font: inherit; }
.course-tick { display: none; margin-left: 0.5rem; opacity: 0.6; }
.course-syllabus-item-done .course-tick { display: inline; }
.bnd-chapter-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.bnd-chapter-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 44px; text-align: left; padding: 0.5rem 0.75rem; background: transparent; border: 0; border-radius: 4px; cursor: pointer; font: inherit; color: inherit; }
.bnd-chapter-item:hover, .bnd-chapter-item:focus-visible { background: color-mix(in srgb, var(--bernard-accent, #1c5e53) 12%, transparent); }
.bnd-chapter-thumb { width: 4rem; aspect-ratio: 16/9; object-fit: cover; border-radius: 3px; flex: none; background: #10201c; }
.bnd-chapter-item-title { flex: 1 1 auto; }
.course-notes { margin: 1.25rem 0; }
.course-locked { border: 1px solid rgba(0,0,0,0.1); border-radius: 6px; padding: 1.25rem 1.5rem; margin: 1.25rem 0; }
.course-attachments-title { font-size: 1rem; margin: 1.5rem 0 0.4rem; }
.course-attachments { margin: 0; padding-left: 1.2rem; }
.course-lesson-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; font-size: 0.9rem; }
.course-lesson-nav a { color: inherit; }
.course-empty { opacity: 0.7; }
.bnd-transcript { margin-top: 1rem; border: 1px solid rgba(0,0,0,0.1); border-radius: 6px; overflow: hidden; min-width: 0; max-width: 100%; }
.bnd-transcript-toggle { display: block; width: 100%; min-height: 44px; box-sizing: border-box; text-align: left; padding: 0.6rem 1rem; background: rgba(0,0,0,0.03); border: 0; cursor: pointer; font: inherit; font-weight: 600; color: inherit; }
.bnd-transcript-body { padding: 0.75rem 1rem 1rem; }
.bnd-transcript-collapsed .bnd-transcript-body { display: none; }
.bnd-transcript-filter { display: block; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0.5rem 0.75rem; margin-bottom: 0.5rem; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px; font: inherit; }
.bnd-transcript-list { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; }
.bnd-transcript-row { display: flex; gap: 0.6rem; padding: 0.45rem 0.3rem; border-radius: 4px; cursor: pointer; min-height: 44px; align-items: flex-start; }
.bnd-transcript-row[hidden] { display: none; }
.bnd-transcript-row:hover, .bnd-transcript-row:focus-visible { background: color-mix(in srgb, var(--bernard-accent, #1c5e53) 8%, transparent); }
.bnd-transcript-row-active { background: color-mix(in srgb, var(--bernard-accent, #1c5e53) 14%, transparent); }
.bnd-transcript-stamp { flex: 0 0 auto; font-size: 0.8rem; opacity: 0.55; font-variant-numeric: tabular-nums; }
.bnd-transcript-text { flex: 1 1 auto; min-width: 0; }
.bnd-transcript-word-active { background: color-mix(in srgb, var(--bernard-accent, #1c5e53) 35%, transparent); border-radius: 2px; }
.bnd-transcript-empty { opacity: 0.7; margin: 0.5rem 0; }
.bnd-player-root.is-portrait .bnd-player { max-height: min(80vh, 42rem); width: auto; margin-inline: auto; }
@media (min-width: 960px) {
  .bnd-player-root:has(.bnd-transcript) { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
  /* A portrait video WITHOUT a transcript (every Reel — audio, and so
     captions/the transcript, is stripped) must NOT reserve this two-column
     grid: with nothing to put in column 2 it left a permanent empty 22rem
     gutter and centered the video only within column 1. Scoping .is-portrait
     to :has(.bnd-transcript) means the two cases can't both apply — a
     portrait video WITH a transcript still gets the side-by-side grid,
     unchanged; a portrait video alone falls through to the .bnd-player-root
     default of display:block (line above the media query), where the
     max-height + margin-inline:auto rule centers it as a single narrower
     column. If a browser doesn't support :has() at all, this whole rule is
     simply dropped (same fallback behavior the pre-existing
     :has(.bnd-transcript) rule above already relies on) — the safe
     direction, since the unconditional max-height bound isn't gated by
     :has() and still caps the video's height regardless. */
  .bnd-player-root.is-portrait:has(.bnd-transcript) { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; }
  .bnd-player-root .bnd-transcript { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 959px) {
  .bnd-player-root { display: block; }
}
@media (max-width: 480px) {
  /* 390px control-bar reflow: play/scrub/time/fullscreen must stay on row
     1 — the essentials for watching and going fullscreen — while back/fwd/
     speed/captions/PiP may wrap to row 2. The invisible .bnd-player-linebreak
     item (flex-basis:100%) forces the row break deterministically instead of
     relying on organic wrap math at this exact width. */
  .bnd-player-play, .bnd-player-scrub, .bnd-player-time, .bnd-player-full { order: 1; }
  .bnd-player-linebreak { order: 2; flex-basis: 100%; width: 0; height: 0; margin: 0; padding: 0; }
  .bnd-player-back, .bnd-player-fwd, .bnd-player-speed, .bnd-player-captions, .bnd-player-pip { order: 3; }
  /* Item 2 (player followups batch): the site-wide "made with bernard"
     badge (src/lib/sites/branding.ts) is position:fixed 14px from the true
     viewport bottom-right, independent of scroll/page content. A portrait
     player fills up to 80vh (.is-portrait above), so on a narrow phone
     viewport its own bottom control-bar row (row 2, wrapped just above)
     can land in that same 14px corner, covering speed/PiP/chapters. Prefer
     moving the BADGE up over shrinking/removing player chrome: the badge is
     injected as an inline style, so an id-selector override needs
     !important to win the cascade; scoping it inside courses.css (loaded
     only on course pages) keeps every other page's badge position
     untouched. */
  #bernard-badge { bottom: 4.5rem !important; }
}