/* site.css — tasksurf-4 shell furniture that is NOT part of the SurfDoc format
   stylesheet (served from the surf-parse crate constant since 2026-07-28).
   Extracted from the retired static surfdoc.css copy. */

/* Research sub-navigation */
.sub-nav {
    position: fixed;
    top: 53px;
    left: 0;
    right: 0;
    z-index: 99;
    background: rgba(10, 10, 15, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

[data-theme="light"] .sub-nav {
    background: rgba(248, 248, 250, 0.92);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .sub-nav {
        background: rgba(248, 248, 250, 0.92);
    }
}

.sub-nav-inner {
    max-width: 52rem;
    margin: 0 auto;
    padding: 8px 1.5rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sub-nav-link {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    transition: background 150ms ease, color 150ms ease;
    text-decoration: none;
    white-space: nowrap;
}

.sub-nav-link:hover {
    color: var(--text);
    background: var(--surface);
}

.sub-nav-link.active {
    color: var(--text);
    background: var(--surface);
}

/* Offset main content when sub-nav is present */
.sub-nav + main {
    padding-top: 92px;
}

/* ============================================================
   13. CODE BLOCKS (app chrome)
   ============================================================ */

.code-block {
    position: relative;
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.code-block pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.7;
}

.code-block code {
    font-family: var(--font-mono);
    color: var(--text);
    background: none;
}

/* Syntax highlighting — dark */
.code-block .kw { color: #c792ea; }

.code-block .str { color: #c3e88d; }

.code-block .cm { color: #546e7a; }

.code-block .fn { color: #82aaff; }

.code-block .num { color: #f78c6c; }

.code-block .attr { color: #ffcb6b; }

.code-block .tag { color: #f07178; }

.code-block .punct { color: #89ddff; }

/* Syntax highlighting — light */
[data-theme="light"] .code-block .kw { color: #7c3aed; }

[data-theme="light"] .code-block .str { color: #16a34a; }

[data-theme="light"] .code-block .cm { color: #94a3b8; }

[data-theme="light"] .code-block .fn { color: #2563eb; }

[data-theme="light"] .code-block .num { color: #ea580c; }

[data-theme="light"] .code-block .attr { color: #b45309; }

[data-theme="light"] .code-block .tag { color: #dc2626; }

[data-theme="light"] .code-block .punct { color: #0891b2; }