/* The lightbox: the home page's "Watch the demo" (js/demo-lightbox.js) and the manual's lesson pop-ups (js/lessons.js). A native modal
   dialog: Esc, the focus trap and the inert page come with it. Moved here from home.css so every page that uses it loads it. */
.lb { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 64px 16px 16px; border: 0; background: rgba(5,6,8,.985); color: var(--text); }
.lb[open] { display: flex; align-items: center; justify-content: center; }
.lb::backdrop { background: transparent; }
.lb-box { position: relative; width: min(1100px, 100%); }
.lb-close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1; cursor: pointer; }
.lb-close:hover { border-color: var(--signal); }
.lb-frame { aspect-ratio: 16 / 9; width: min(100%, calc((100dvh - 200px) * 16 / 9)); margin-inline: auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lb-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.lb-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.lb-link { color: var(--signal); text-underline-offset: 3px; font-size: 15px; }
.lb-link:hover { color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .lb[open] { animation: lb-in .18s ease-out; }
  .lb[open] .lb-box { animation: lb-pop .22s ease-out; }
  @keyframes lb-in { from { opacity: 0; } }
  @keyframes lb-pop { from { transform: scale(.97); } }
}
@media (max-width: 600px) {
  .lb { padding: 64px 0 16px; }
  .lb[open] { align-items: flex-start; }
  .lb-frame { width: 100%; border-radius: 0; border-inline: 0; }
  .lb-close { right: 12px; }
  .lb-row { padding-inline: 16px; }
  .lb-row .btn { width: 100%; justify-content: center; }
}

/* A lesson's player: the 9:16 file on phones gets a tall frame, and "Sara is an AI presenter." sits under it. */
.lb-frame.vert { aspect-ratio: 9 / 16; width: min(100%, calc((100dvh - 150px) * 9 / 16)); }
.lb-note { margin: 12px 0 0; text-align: center; color: var(--muted-2); font-size: 14px; }

/* The lesson card next to the step a lesson explains: the lesson's designed picture (its label and Sara are in the image) with a play
   button top-left and its length top-right, then its title.
   The whole card is one link; without JS it goes to the 16:9 MP4. Sized by the box it sits in: 320 px, or the full width up to
   360 px on phones. The thumbnail has its own 16:9 box, so nothing moves when the image arrives. */
a.lesson-card { display: block; width: 320px; max-width: 100%; margin: 14px 0; border-radius: 12px; color: var(--text); text-decoration: none; }
a.lesson-card:hover { color: var(--text); }
a.lesson-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.lesson-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.lesson-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lesson-play { position: absolute; top: 10px; left: 10px; width: 48px; height: 48px; display: grid; place-items: center; padding-left: 2px; border-radius: 50%;
  background: rgba(11,12,14,.66); border: 1px solid rgba(255,255,255,.28); color: #fff; }
.lesson-dur { position: absolute; top: 10px; right: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(11,12,14,.82); color: var(--text);
  font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.5; }
.lesson-title { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.lesson-sub { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }
a.lesson-card:hover .lesson-thumb, a.lesson-card:focus-visible .lesson-thumb { border-color: var(--signal); }
@media (prefers-reduced-motion: no-preference) {
  .lesson-thumb { transition: border-color .15s ease-out; }
  .lesson-play { transition: transform .15s ease-out; }
  a.lesson-card:hover .lesson-play, a.lesson-card:focus-visible .lesson-play { transform: scale(1.06); }
}
@media (max-width: 600px) { a.lesson-card { width: 100%; max-width: 360px; } }

/* The manual's Video tutorials page (lib/lessons.mjs lessonList): one lesson per row, in order, at every width. The page is `wide: true`, so
   its column is up to 880 px (a negative margin gives the last 40 px on big screens), left-aligned with the H1. Each row: the poster (the same
   card and pop-up as everywhere), "Lesson N · 0:59", the title as an H2 with an anchor, what the video shows, and links to the guides. */
.docs-wide .docs-main { grid-template-columns: minmax(0, 1fr); }
.docs-wide .docs-article { max-width: 880px; }
@media (min-width: 1280px) { .docs-wide .docs-main { margin-right: -40px; } }
.docs-article ol.lesson-list { list-style: none; margin: 8px 0 28px; padding: 0; }
.docs-article ol.lesson-list > li.lesson-row { margin: 0; padding: 0 0 60px; border-bottom: 1px solid var(--line); }
.docs-article ol.lesson-list > li.lesson-row + li.lesson-row { padding-top: 60px; }
.docs-article ol.lesson-list > li.lesson-row:last-child { border-bottom: 0; padding-bottom: 12px; }
.lesson-list a.lesson-card { width: 100%; max-width: none; margin: 0; }
.lesson-list .lesson-thumb { border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.4); }
.lesson-list .lesson-play { top: 18px; left: 18px; width: 72px; height: 72px; padding-left: 3px; }
.lesson-list .lesson-play svg { width: 28px; height: 28px; }
.lesson-list .lesson-dur { top: 18px; right: 18px; font-size: 14px; padding: 3px 9px; }
.docs-article .lesson-eyebrow { margin: 20px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); }
.docs-article .lesson-list h2 { margin: 4px 0 10px; font-size: 28px; line-height: 1.2; scroll-margin-top: 84px; }
.docs-article .lesson-summary { margin: 0 0 12px; max-width: 70ch; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.docs-article .lesson-links { margin: 0; font-size: 15px; color: var(--muted); }
.docs-article a.lesson-guide { color: var(--signal); text-underline-offset: 3px; }
.docs-article a.lesson-guide:hover { color: var(--text); }
@media (max-width: 600px) {
  .docs-article ol.lesson-list > li.lesson-row { padding-bottom: 44px; }
  .docs-article ol.lesson-list > li.lesson-row + li.lesson-row { padding-top: 44px; }
  .lesson-list .lesson-play { top: 10px; left: 10px; width: 52px; height: 52px; }
  .lesson-list .lesson-play svg { width: 22px; height: 22px; }
  .lesson-list .lesson-dur { top: 10px; right: 10px; font-size: 12px; }
  .docs-article .lesson-list h2 { font-size: 23px; }
  .docs-article .lesson-summary { font-size: 16px; }
}