/* Click-to-play YouTube walkthroughs. The page shows our own thumbnail; the youtube-nocookie player
   loads only after a click (assets/yt-embed.js). Without JS the thumbnail is a plain link to YouTube. */
.ytv { margin: 0; }
.ytv__play, .ytv__frame {
    position: relative; display: block; aspect-ratio: 16 / 9; width: 100%;
    overflow: hidden; border-radius: 6px; background: #0B0B0E;
    border: 1px solid #2A2A30;
}
.ytv__play img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .35s ease; }
.ytv__play:hover img, .ytv__play:focus-visible img { transform: scale(1.03); filter: brightness(1.08); }
.ytv__play:focus-visible { outline: 3px solid #EFFF00; outline-offset: 3px; }
.ytv__btn {
    position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; transform: translate(-50%, -50%);
    border-radius: 14px; background: rgba(11, 11, 14, .78); border: 2px solid #EFFF00;
    transition: background .2s ease;
}
.ytv__btn::after {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
    border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #EFFF00;
}
.ytv__play:hover .ytv__btn, .ytv__play:focus-visible .ytv__btn { background: #EFFF00; }
.ytv__play:hover .ytv__btn::after, .ytv__play:focus-visible .ytv__btn::after { border-left-color: #0B0B0E; }
.ytv__len {
    position: absolute; right: 10px; bottom: 10px; padding: 3px 7px; border-radius: 4px;
    background: rgba(11, 11, 14, .85); color: #F2EFE6; font: 600 13px/1.2 'JetBrains Mono', ui-monospace, monospace;
}
.ytv__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ytv figcaption { margin-top: 12px; }
.ytv__title { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: inherit; }
.ytv__desc { display: block; margin-top: 6px; font-size: .95rem; line-height: 1.5; opacity: .78; }

/* a row of walkthrough cards (home page) */
.ytv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 960px) { .ytv-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 640px; } }

/* one walkthrough inside a docs chapter or a page section */
.ytv--inline { max-width: 760px; margin: 28px 0; }
.ytv--inline figcaption { font-size: .95rem; opacity: .85; }

/* small "Watch it" link that jumps to a chapter of a walkthrough */
.watch-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    font: 600 .82rem/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase;
    color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.watch-link::before {
    content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
}
.watch-link:hover { color: #EFFF00; }