/* ============================================================
 * docs.css — the documentation site (build-docs.mjs), on top of
 * sgapps.md's own _assets/style.css (copied as assets/sgapps.css):
 * its tokens (--bg, --bg-card, --border, --text, --text-muted,
 * --accent, --accent-soft, --success…), its header / footer /
 * .btn / theme toggle. Only what the docs need is added here, with
 * those tokens — no new colors.
 * ============================================================ */

.dv-brand-sub { color: var(--text-muted); font-weight: 500; font-size: .9em; margin-left: .35rem; }
.dv-main { flex: 1; padding: 0 0 4rem; }

/* ---- search (header + home) -------------------------------------------- */
.dv-search { position: relative; }
.dv-search input {
    width: 100%; font: inherit; color: var(--text); background: var(--bg-card);
    border: 1px solid var(--border-strong); border-radius: 8px; padding: .5rem .8rem .5rem 2.1rem; outline: none;
}
.dv-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dv-search::before {
    content: ""; position: absolute; left: .75rem; top: 50%; width: .8rem; height: .8rem; margin-top: -.5rem;
    border: 2px solid var(--text-muted); border-radius: 50%; pointer-events: none;
}
.dv-search::after {
    content: ""; position: absolute; left: 1.45rem; top: 50%; width: .4rem; height: 2px; margin-top: .3rem;
    background: var(--text-muted); transform: rotate(45deg); pointer-events: none;
}
.dv-search--nav { width: 220px; font-size: .9rem; }
.dv-search--hero { max-width: 640px; font-size: 1.05rem; margin: 1.6rem 0 0; }
.dv-search--hero input { padding: .8rem 1rem .8rem 2.4rem; border-radius: 10px; }
.dv-results {
    position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); min-width: 320px;
    background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18); max-height: 70vh; overflow-y: auto;
}
.dv-search--nav .dv-results { left: auto; width: min(460px, 92vw); }
.dv-results a { display: block; padding: .65rem .9rem; color: var(--text); border-top: 1px solid var(--border); }
.dv-results a:first-child { border-top: 0; }
.dv-results a:hover, .dv-results a.is-active { background: var(--accent-soft); text-decoration: none; }
.dv-results b { display: block; font-weight: 600; line-height: 1.35; }
.dv-results small { display: block; color: var(--text-muted); font-size: .8rem; margin-top: .15rem; }
.dv-results mark { background: none; color: var(--accent); font-weight: 600; }
.dv-results .dv-none { padding: .8rem .9rem; color: var(--text-muted); font-size: .9rem; }

/* ---- page head ---------------------------------------------------------- */
.dv-head { padding: 2.6rem 0 1.4rem; }
.dv-crumbs { font-size: .85rem; color: var(--text-muted); margin-bottom: .7rem; }
.dv-crumbs a { color: var(--text-muted); }
.dv-crumbs a:hover { color: var(--accent); }
.dv-crumbs span + span::before { content: "›"; margin: 0 .45rem; color: var(--border-strong); }
.dv-head h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.2; letter-spacing: -.01em; }
.dv-head .dv-lead { color: var(--text-muted); font-size: 1.1rem; margin-top: .7rem; max-width: 760px; }
.dv-eyebrow { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .2rem .7rem; margin-bottom: .8rem; }

/* ---- cards -------------------------------------------------------------- */
.dv-section { margin-top: 2.2rem; }
.dv-section > h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.dv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.dv-card {
    display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; color: var(--text); transition: border-color .15s, transform .15s;
}
.dv-card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.dv-card-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.dv-card h3 { font-size: 1.02rem; line-height: 1.35; }
.dv-card p { color: var(--text-muted); font-size: .9rem; line-height: 1.5; }
.dv-card .dv-meta { margin-top: auto; padding-top: .4rem; font-size: .8rem; color: var(--text-muted); display: flex; gap: .8rem; }

/* ---- video thumbnails: poster, hover scrub (frames sprite), play badge ----- */
.dv-thumb {
    position: relative; display: block; width: 100%; aspect-ratio: var(--ar, 16 / 10); background: #000 center / cover no-repeat;
    border: 0; padding: 0; cursor: pointer; overflow: hidden;
}
.dv-thumb .dv-scrub { position: absolute; inset: 0; background-repeat: no-repeat; opacity: 0; }
.dv-thumb.is-scrubbing .dv-scrub { opacity: 1; }
.dv-thumb .dv-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); opacity: 0; }
.dv-thumb.is-scrubbing .dv-bar { opacity: 1; }
.dv-thumb .dv-play {
    position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
    background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .85); transition: transform .15s, background .15s;
}
.dv-thumb .dv-play::after { content: ""; position: absolute; left: 22px; top: 16px; border-left: 18px solid #fff;
    border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.dv-thumb:hover .dv-play { transform: scale(1.08); background: var(--accent); }
.dv-thumb.is-scrubbing .dv-play { opacity: 0; }
.dv-thumb .dv-dur { position: absolute; right: .5rem; bottom: .55rem; font-size: .75rem; font-weight: 600; color: #fff;
    background: rgba(0, 0, 0, .7); border-radius: 4px; padding: .05rem .4rem; }
.dv-card .dv-thumb .dv-play { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.dv-card .dv-thumb .dv-play::after { left: 17px; top: 12px; border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; }

/* ---- guide page --------------------------------------------------------- */
.dv-player { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); max-width: 880px; }
.dv-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }
.dv-actions .btn { font-size: .9rem; }
.dv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 1000px) { .dv-layout { grid-template-columns: minmax(0, 1fr) 240px; } }
.dv-toc { font-size: .88rem; }
@media (min-width: 1000px) { .dv-toc { position: sticky; top: 5.5rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; } }
@media (max-width: 999px) { .dv-toc { display: none; } }
.dv-toc b { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .6rem; }
.dv-toc a { display: block; color: var(--text-muted); padding: .2rem 0 .2rem .7rem; border-left: 2px solid var(--border); }
.dv-toc a.lvl3 { padding-left: 1.4rem; font-size: .84rem; }
.dv-toc a:hover, .dv-toc a.is-active { color: var(--accent); border-left-color: var(--accent); text-decoration: none; }

.dv-guide { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.6rem 2rem 2rem; }
@media (max-width: 640px) { .dv-guide { padding: 1rem 1.1rem 1.4rem; } }
.dv-guide h2 { font-size: 1.4rem; margin: 2.2rem 0 .8rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); scroll-margin-top: 5.5rem; }
.dv-guide h2:first-child { margin-top: .2rem; }
.dv-guide h3 { font-size: 1.12rem; margin: 1.6rem 0 .6rem; scroll-margin-top: 5.5rem; }
.dv-guide p, .dv-guide ul, .dv-guide ol, .dv-guide blockquote, .dv-guide table { margin: 0 0 .9rem; }
.dv-guide ul, .dv-guide ol { padding-left: 1.4rem; }
.dv-guide li { margin: .25rem 0; }
.dv-guide img { display: block; max-width: 100%; height: auto; margin: 1rem 0 1.2rem; border: 1px solid var(--border); border-radius: 8px; cursor: zoom-in; }
.dv-guide code { font-size: .9em; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: .05rem .35rem; }
.dv-guide blockquote { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: .7rem 1rem; border-radius: 0 8px 8px 0; color: var(--text); }
.dv-guide blockquote p:last-child { margin-bottom: 0; }
.dv-guide .dv-table { overflow-x: auto; margin: 0 0 1rem; }
.dv-guide table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 0; }
.dv-guide th, .dv-guide td { border: 1px solid var(--border); padding: .5rem .7rem; text-align: left; vertical-align: top; }
.dv-guide th { background: var(--bg-elevated); font-weight: 600; }

.dv-phone { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.dv-phone figure { margin: 0; }
.dv-phone .dv-thumb { border-radius: 10px; --ar: 9 / 16; }
.dv-phone figcaption { font-size: .82rem; color: var(--text-muted); margin-top: .35rem; text-transform: capitalize; }

.dv-note { margin-top: 2.4rem; font-size: .85rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 1rem; }

/* ---- the player popup --------------------------------------------------- */
.dv-modal { position: fixed; inset: 0; margin: 0; border: 0; padding: 0; background: transparent; max-width: none; max-height: none;
    width: 100vw; height: 100vh; overflow: hidden; }
.dv-modal::backdrop { background: rgba(5, 8, 12, .82); }
.dv-modal-box { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3.2rem 1rem 1.2rem; }
.dv-modal-title { color: #e6edf3; font-weight: 600; margin-bottom: .7rem; max-width: min(1200px, 100%); text-align: center; }
/* the body takes the whole width, so the video's max-width is measured on the window, not on a box that
   shrinks to the video (which pushed a 1920 px video off to the right) */
.dv-modal-body { width: 100%; display: flex; justify-content: center; align-items: center; min-height: 0; }
.dv-modal video { display: block; width: auto; height: auto; max-width: min(1200px, 100%); max-height: calc(100vh - 7rem); background: #000; border-radius: 10px; margin: 0 auto; }
.dv-modal.is-vertical video { max-width: min(420px, 100%); }
.dv-modal-close {
    position: fixed; top: .9rem; right: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.dv-modal-close:hover { background: rgba(255, 255, 255, .2); }
.dv-modal img.dv-zoom { max-width: min(1400px, 100%); max-height: calc(100vh - 5rem); border-radius: 8px; background: #fff; }

/* ---- collection list on the home page ------------------------------------ */
.dv-stats { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.2rem; color: var(--text-muted); font-size: .9rem; }
.dv-stats strong { color: var(--text); font-size: 1.1rem; margin-right: .25rem; }

/* phones: a magnifier in the header opens the search as a full-width row under it */
.dv-search-toggle { display: none; position: relative; width: 2.2rem; height: 2.2rem; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text); }
.dv-search-toggle::before { content: ""; position: absolute; left: .62rem; top: .55rem; width: .7rem; height: .7rem;
    border: 2px solid currentColor; border-radius: 50%; }
.dv-search-toggle::after { content: ""; position: absolute; left: 1.32rem; top: 1.38rem; width: .4rem; height: 2px;
    background: currentColor; transform: rotate(45deg); }
header.dv-search-open .dv-search-toggle { border-color: var(--accent); color: var(--accent); }
@media (max-width: 860px) {
    .dv-search-toggle { display: inline-block; }
    .dv-search--nav { display: none; }
    header.dv-search-open .dv-search--nav {
        display: block; position: absolute; left: 16px; right: 16px; top: calc(100% + 8px); width: auto; z-index: 20;
    }
    header.dv-search-open .dv-search--nav input { box-shadow: 0 10px 28px rgba(0, 0, 0, .18); padding-top: .7rem; padding-bottom: .7rem; }
    .dv-search--nav .dv-results { width: auto; left: 0; right: 0; min-width: 0; }
}