/* Spy-da Audio — plugins user manual (uses the tokens in shop.css) */
.manual-hero { padding:80px 0 56px; border-bottom:1px solid var(--line);
    background: radial-gradient(circle at 12% 20%, rgba(229,9,20,0.22), transparent 38%), radial-gradient(circle at 90% 80%, rgba(229,9,20,0.10), transparent 40%), #050505; }
.manual-hero .page-title { margin-bottom:18px; }
.manual-hero .hero-text { font-size:1.12rem; max-width:680px; margin-bottom:26px; }
.manual-hero .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.manual-updated { font-size:0.82rem; color:#8a8a8a; }

.manual-layout { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:56px; padding:56px 0 90px; align-items:start; }

/* ---------- contents ---------- */
.manual-toc { position:sticky; top:104px; }
.manual-toc details { background:var(--card); border:1px solid var(--line); border-radius:18px; max-height:calc(100vh - 128px); overflow:auto; scrollbar-width:thin; }
.manual-toc summary { list-style:none; cursor:pointer; padding:16px 18px; font-size:0.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red); position:sticky; top:0; background:var(--card); border-bottom:1px solid var(--line); }
.manual-toc summary::-webkit-details-marker { display:none; }
.manual-toc ol, .manual-toc ul { list-style:none; }
.manual-toc ol { padding:10px 8px 14px; }
.manual-toc ol > li > a { display:block; padding:7px 10px; border-radius:10px; font-size:0.9rem; font-weight:700; color:#eee; }
.manual-toc ul { margin:0 0 6px 10px; border-left:1px solid var(--line); }
.manual-toc ul a { display:block; padding:4px 10px 4px 12px; font-size:0.84rem; color:var(--muted); border-left:2px solid transparent; margin-left:-1px; }
.manual-toc a:hover { color:#fff; }
.manual-toc a.active { color:#fff; border-left-color:var(--red); }
.manual-toc ol > li > a.active { background:rgba(229,9,20,0.14); }

/* ---------- body ---------- */
.manual-body { max-width:860px; font-size:1.02rem; }
.manual-body .chapter { padding-bottom:56px; margin-bottom:56px; border-bottom:1px solid var(--line); }
.manual-body .chapter:last-of-type { border-bottom:0; margin-bottom:0; }
.manual-body h2, .manual-body h3, .manual-body h4 { scroll-margin-top:104px; position:relative; }
.manual-body h2 { font-size:clamp(2rem, 3.6vw, 2.8rem); margin:0 0 20px; }
.manual-body h3 { font-size:1.5rem; letter-spacing:-0.02em; margin:44px 0 14px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.06); }
.manual-body h2 + p + h3, .manual-body h2 + h3 { border-top:0; padding-top:0; }
.manual-body h4 { font-size:0.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--red); margin:34px 0 12px; }
.manual-body .hash { margin-left:10px; font-size:0.6em; color:#555; opacity:0; transition:opacity .15s; vertical-align:middle; }
.manual-body h2:hover .hash, .manual-body h3:hover .hash, .manual-body .hash:focus { opacity:1; }
.manual-body p { margin:0 0 16px; color:#c9c9c9; }
.manual-body strong { color:#fff; }
.manual-body em { color:#e8e8e8; }
.manual-body p a, .manual-body li a, .manual-body td a { color:var(--red); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.manual-body ul, .manual-body ol { margin:0 0 18px; padding-left:22px; color:#c9c9c9; }
.manual-body li { margin:6px 0; padding-left:4px; }
.manual-body li::marker { color:var(--red); font-weight:800; }
.manual-body code { font-family:"SFMono-Regular", Menlo, Consolas, monospace; font-size:0.86em; background:rgba(255,255,255,0.08); border:1px solid var(--line); padding:1px 6px; border-radius:6px; color:#fff; word-break:break-word; }
.manual-body pre { background:#0b0b0b; border:1px solid var(--line); border-radius:14px; padding:16px 18px; overflow-x:auto; margin:0 0 18px; }
.manual-body pre code { background:none; border:0; padding:0; font-size:0.88rem; word-break:normal; white-space:pre; }

.callout { background:linear-gradient(90deg, rgba(229,9,20,0.12), rgba(229,9,20,0.03)); border:1px solid rgba(229,9,20,0.3); border-left:3px solid var(--red); border-radius:12px; padding:14px 18px; }
.manual-body p.callout { color:#e6e6e6; }

/* tables */
.table-wrap { overflow-x:auto; margin:0 0 22px; border:1px solid var(--line); border-radius:16px; background:var(--card); }
.manual-body table { width:100%; border-collapse:collapse; font-size:0.92rem; }
.manual-body th { text-align:left; font-size:0.72rem; letter-spacing:.12em; text-transform:uppercase; color:#9a9a9a; font-weight:800; background:var(--card-2); padding:12px 16px; white-space:nowrap; }
.manual-body td { padding:12px 16px; border-top:1px solid var(--line); color:#cfcfcf; vertical-align:top; }
.manual-body td:first-child { color:#fff; font-weight:700; }
.manual-body tbody tr:hover td { background:rgba(255,255,255,0.025); }
.manual-body td a { font-weight:700; color:#fff; text-decoration-color:var(--red); }

.manual-end { margin-top:20px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; }
.manual-end p { margin:0; }

.to-top { position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-weight:900; box-shadow:0 0 24px var(--glow); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s, transform .2s; z-index:50; }
.to-top.show { opacity:1; pointer-events:auto; transform:none; }

/* ---------- smaller screens ---------- */
@media (max-width:980px) {
    .manual-layout { grid-template-columns:minmax(0, 1fr); gap:24px; padding-top:28px; }
    .manual-toc { position:sticky; top:84px; z-index:20; }
    .manual-body h2, .manual-body h3, .manual-body h4 { scroll-margin-top:156px; }
    .manual-toc details { max-height:70vh; box-shadow:0 18px 40px rgba(0,0,0,0.6); }
    .manual-toc summary { display:flex; justify-content:space-between; align-items:center; }
    .manual-toc summary::after { content:"＋"; color:#fff; font-size:1rem; letter-spacing:0; }
    .manual-toc details[open] summary::after { content:"−"; }
}
@media (max-width:640px) {
    .manual-hero { padding:56px 0 40px; }
    .manual-toc { top:76px; }
    .manual-body h2, .manual-body h3, .manual-body h4 { scroll-margin-top:148px; }
    .manual-body { font-size:1rem; }
    .manual-body h3 { font-size:1.3rem; }
    .manual-body .chapter { padding-bottom:40px; margin-bottom:40px; }
    .manual-body th, .manual-body td { padding:10px 12px; }
    .manual-body table { font-size:0.88rem; }
    .manual-end { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) { .to-top { transition:none; } }

/* ---------- print / save as PDF ---------- */
@media print {
    .site-header, .site-footer, .manual-toc, .hero-actions, .to-top, .manual-end .btn, .hash, .sale-banner, .flash { display:none !important; }
    body, .manual-hero { background:#fff !important; color:#000; }
    .manual-hero { padding:0 0 12px; border:0; }
    .manual-layout { display:block; padding:0; }
    .manual-body { max-width:none; }
    .manual-body p, .manual-body li, .manual-body td, .manual-hero .hero-text { color:#222; }
    .manual-body strong, .manual-body td:first-child, .manual-body td a, .page-title { color:#000; }
    .eyebrow, .manual-body h4 { color:#b00710; }
    .manual-body .chapter { break-before:page; border:0; }
    .manual-body .chapter:first-of-type { break-before:auto; }
    .table-wrap, .callout { background:#fff; border-color:#ccc; overflow:visible; }
    .manual-body th { background:#f2f2f2; color:#333; }
    .manual-body td { border-color:#ddd; }
    .manual-body code, .manual-body pre { background:#f4f4f4; color:#000; border-color:#ddd; }
    .manual-body tr, .callout, pre { break-inside:avoid; }
    .manual-body h2, .manual-body h3 { break-after:avoid; }
}
