:root {
    /* Crisp, modern sans stack with Windows 11 first; falls back to system UI */
    --font-sans: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

/* Reserve vertical scrollbar space to prevent horizontal layout shift between pages */
html {
    scrollbar-gutter: stable both-edges;
}

@supports not (scrollbar-gutter: stable) {
    /* Fallback for older engines: always show vertical scrollbar */
    html {
        overflow-y: scroll;
    }
}

body {
    margin: 0;
    background-color: #f6f7fb; /* soft page background */
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
    color: #111827; /* slate-900 */
    line-height: 1.6;
    /* Render crisp UI text */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: #0969da; /* GitHub blue */
    text-decoration: none;
    font-weight: 600;
    transition: color 120ms ease, text-decoration-color 120ms ease;
}

    a:hover {
        color: #054da7;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

/* Shell */
.container {
    width: min(960px, 92vw);
    margin: 0 auto;
}

header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
}

.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0; /* slim header */
}

.brand {
    font-size: 1.0rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #111827;
}

    .brand:hover {
        color: #0f172a;
    }

.nav-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

    .nav-links a {
        font-weight: 600;
        color: #111827;
    }

        .nav-links a:hover {
            color: #111827;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

main {
    padding: 3.5rem 0 2.5rem;
}

section {
    margin-bottom: 1.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Page hero / headers on neutral background */
.page-hero {
    padding: 0 0 0.75rem; /* top padding normalized; .markdown-body controls top rhythm */
    margin: 0 0 1rem;
    background: transparent;
    border: 0;
}

    .page-hero h1 {
        margin: 0 0 0.35rem;
        font-size: 1.9rem;
        font-weight: 700;
    }

    .page-hero .page-subtitle {
        margin: 0;
        color: #4b5563;
        font-size: 1rem;
    }

/* Typography */
h1, h2, h3, h4 {
    color: #111827;
    margin-top: 0;
    margin-bottom: 0.5rem;
    letter-spacing: -0.015em;
}

h1 {
    font-size: 1.9rem;
    font-weight: 700;
}

h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.25rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1rem;
}

p {
    margin: 0 0 0.9rem;
}

ul, ol {
    padding-left: 1.25rem;
    margin: 0 0 1rem;
}

blockquote {
    border-left: 4px solid #d0d7de;
    padding-left: 1rem;
    color: #374151;
    background: #f9fafb;
}

/* Footer */
.footer {
    padding: 1rem 0 2rem;
    border-top: 1px solid #e5e7eb;
    color: #4b5563;
}

.footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.footer-right {
    text-align: right;
}

/* Generic alignment if markup doesn't include .footer-bar or .footer-right */
.footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

    .footer .container > * {
        margin: 0;
    }

        .footer .container > *:last-child {
            margin-left: auto;
            text-align: right;
        }

/* Tighter lists for indices */
.list-tight {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

    .list-tight li {
        padding: 0.5rem 0;
        border-top: 1px solid #f1f5f9;
    }

        .list-tight li:first-child {
            border-top: none;
        }

@media (max-width: 640px) {
    .header-bar {
        align-items: flex-start;
    }

    .nav-links {
        width: 100%;
    }
}

/* Markdown presentation */
.markdown-body {
    max-width: 820px;
    margin: 0 auto;
    color: #111827;
    line-height: 1.7;
    padding-top: 0.5rem;
}
    /* Normalize top rhythm: no extra top margin on first element inside markdown */
    .markdown-body > :first-child {
        margin-top: 0;
    }

    .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
        margin: 1.4rem 0 0.75rem;
        font-weight: 700;
        letter-spacing: -0.015em;
    }

    .markdown-body h1 {
        font-size: 1.9rem;
    }

    .markdown-body h2 {
        font-size: 1.5rem;
        font-weight: 600;
    }

    .markdown-body h3 {
        font-size: 1.25rem;
        font-weight: 600;
    }

    .markdown-body p {
        margin: 0 0 1rem;
    }

    .markdown-body ul, .markdown-body ol {
        padding-left: 1.25rem;
        margin: 0 0 1rem;
    }

    .markdown-body blockquote {
        border-left: 4px solid #d0d7de;
        padding-left: 1rem;
        color: #374151;
        background: #f9fafb;
    }

    /* Inline code */
    .markdown-body code {
        background: #f6f8fa;
        padding: 0.15rem 0.35rem;
        border-radius: 4px;
        font-size: 0.95em;
        color: #111827;
    }

    /* Fenced code blocks (GitHub-like light) */
    .markdown-body pre {
        background: #f6f8fa;
        color: #24292f;
        padding: 1rem;
        border-radius: 4px;
        overflow: auto;
        font-size: 0.95em;
        border: 1px solid #d0d7de;
    }

        .markdown-body pre code {
            display: block;
            color: inherit;
            font-family: var(--font-mono);
            line-height: 1.55;
            background: transparent;
        }

        /* Unified code-block behavior: the outer <pre> carries padding */
        .markdown-body pre.code-block {
            padding: 1rem;
        }

            /* Normalize any nested <pre> created by ColorCode inside <pre> */
            .markdown-body pre.code-block pre {
                margin: 0;
                padding: 0;
                border: 0;
                background: transparent;
                box-shadow: none;
            }

    /* ColorCode token classes (server-side highlighting) */
    .markdown-body .code-block .keyword,
    .markdown-body .code-block .kwrd {
        color: #cf222e;
    }

    .markdown-body .code-block .comment,
    .markdown-body .code-block .com {
        color: #22863a;
    }

    .markdown-body .code-block .string,
    .markdown-body .code-block .str {
        color: #0a3069;
    }

    .markdown-body .code-block .number {
        color: #0550ae;
    }

    .markdown-body .code-block .typ,
    .markdown-body .code-block .type,
    .markdown-body .code-block .class,
    .markdown-body .code-block .interface,
    .markdown-body .code-block .lit {
        color: #0550ae;
    }

    .markdown-body .code-block .pun,
    .markdown-body .code-block .pln {
        color: #24292f;
    }

    /* Images and tables */
    .markdown-body img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }

    /* Tables: GitHub-like calm styling */
    .markdown-body table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 0 1.25rem;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        overflow: hidden; /* for rounded corners when supported */
    }

    .markdown-body thead th {
        background: #f6f8fa;
        font-weight: 600;
        border-bottom: 1px solid #d0d7de;
    }

    .markdown-body th, .markdown-body td {
        border: 1px solid #e5e7eb;
        padding: 0.65rem 0.75rem;
        text-align: left;
    }

    .markdown-body tbody tr:nth-child(2n) {
        background: #f9fafb;
    }

/* Card grid for document indexes */
.page-header {
    margin-bottom: 1rem;
}

    .page-header p {
        color: #6b7280;
        margin: 0;
    }

.muted {
    color: #6b7280;
}

.doc-card-section {
    padding: 0;
    background: transparent;
    border: 0;
}

/* Ensure the section heading renders as a real H2 even inside markdown context */
.markdown-body .doc-card-section > h2 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #111827;
}

.doc-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 900px) {
    .doc-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.doc-card {
    display: block;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 1rem 1rem 0.9rem;
    color: #111827;
    text-decoration: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

    .doc-card:hover {
        border-color: #afb8c1;
        box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
        transform: translateY(-1px);
        text-decoration: none;
        color: #111827;
    }

        /* Emphasize only the title on hover, not the whole card text */
        .doc-card:hover .doc-card-title {
            text-decoration: underline;
            text-underline-offset: 3px;
            color: #0f172a;
        }

.doc-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.35rem;
    text-decoration: none;
}

    .doc-card-title:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.doc-card-subtitle {
    color: #4b5563;
    margin-bottom: 0.35rem;
}

.doc-card-meta {
    color: #6b7280;
    font-size: 0.9rem;
}

/* Typography: ensure markdown content uses the sans stack for body text */
.markdown-body {
    font-family: var(--font-sans);
}

    /* --- Consistent top spacing overrides (placed last to win cascade) --- */
    /* Ensure the first child inside .markdown-body never adds extra top margin */
    .markdown-body > :first-child {
        margin-top: 0;
    }
    /* If the first child is a heading, clamp it explicitly */
    .markdown-body > h1:first-child,
    .markdown-body > h2:first-child,
    .markdown-body > h3:first-child,
    .markdown-body > h4:first-child {
        margin-top: 0;
    }
    /* Hero pages: ensure the H1 inside .page-hero doesn't re-introduce top margin */
    .markdown-body > .page-hero:first-child h1 {
        margin-top: 0;
    }

/* Contact page: tighten spacing and keep subtitle at H3 while adding hierarchy via layout */
.contact-hero {
    margin-bottom: 1.25rem;
}

    .contact-hero h1 {
        margin-bottom: 0.35rem;
    }

    .contact-hero .contact-subtitle {
        margin: 0 0 0.85rem;
        font-size: 1.1rem;
        font-weight: 600;
        color: #2f3c4d;
    }

.contact-body p {
    margin: 0 0 0.9rem;
}

/* Hide sitemap link in footer per request */
.footer .sitemap-link {
    display: none;
}

/* Accessibility helper for hierarchy without visual noise */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Right aligned image */
.img-right {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    max-width: 300px;
    height: auto;
}