/* ── Reset & base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
    color-scheme: light dark;
    --sidebar-width: 220px;
    --accent: #0066cc;
    --accent-bg: rgba(0, 102, 204, 0.08);
    --accent-bar: #0066cc;
    --toc-bg: #f5f5f7;
    --toc-border: #d1d1d6;
    --toc-text: #1d1d1f;
    --toc-secondary: #8e8e93;
    --toc-hover-bg: rgba(0, 0, 0, 0.05);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #1d1d1f;
    background-color: #ffffff;
}

/* ── Layout ───────────────────────────────────────────────────────── */
#viewer {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

/* ── ToC sidebar ──────────────────────────────────────────────────── */
#toc-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background: var(--toc-bg);
    border-right: 1px solid var(--toc-border);
}

#toc-nav {
    padding: 4px 0;
}

/* Each item: full-width, no side margins so the left accent bar touches the edge */
.toc-item {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 8px;
    color: var(--toc-text);
    text-decoration: none;
    line-height: 1.35;
    position: relative;
    transition: background 0.1s;
    border-left: 3px solid transparent;
    /* padding-left set per-level in JS via inline style */
}
.toc-item:hover {
    background: var(--toc-hover-bg);
    text-decoration: none;
}
.toc-item.toc-active {
    color: var(--accent);
    background: var(--accent-bg);
    border-left-color: var(--accent-bar);
}

/* Bullet dot (matches app's "•" with width:12) */
.toc-bullet {
    flex-shrink: 0;
    width: 12px;
    text-align: center;
    font-size: 8px;
    color: var(--toc-secondary);
    line-height: 1;
}
.toc-item.toc-active .toc-bullet {
    color: var(--accent);
}

.toc-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Font sizes & weights matching app fontForLevel() */
.toc-h1 .toc-label { font-size: 13px; font-weight: 700; }
.toc-h2 .toc-label { font-size: 12px; font-weight: 600; }
.toc-h3 .toc-label { font-size: 11.5px; font-weight: 500; }
.toc-h4 .toc-label,
.toc-h5 .toc-label,
.toc-h6 .toc-label { font-size: 11px; font-weight: 400; color: var(--toc-secondary); }

.toc-item.toc-active .toc-h4 .toc-label,
.toc-item.toc-active .toc-h5 .toc-label,
.toc-item.toc-active .toc-h6 .toc-label { color: var(--accent); }

.toc-empty {
    padding: 12px 14px;
    font-size: 12px;
    color: var(--toc-secondary);
    margin: 0;
}

/* ── Main content ─────────────────────────────────────────────────── */
#content {
    flex: 1;
    min-width: 0;
}

.markdown-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 40px;
}

/* ── CTA banner ───────────────────────────────────────────────────── */
#cta {
    max-width: 900px;
    margin: 0 auto 48px;
    padding: 0 40px;
}

#cta-inner {
    border-top: 1px solid #d1d1d6;
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

#cta-inner p {
    margin: 0;
    font-size: 13px;
    color: #6e6e73;
}

#cta-inner a {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff;
    background: var(--accent);
    padding: 7px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
#cta-inner a:hover { background: #0055aa; }

/* ── Drop zone ────────────────────────────────────────────────────── */
#dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #ffffff;
    position: relative;
}

/* Dashed accent border — only on drag-over, matches app's isTargeted */
#dropzone.drag-over::after {
    content: '';
    position: absolute;
    inset: 20px;
    border: 2px dashed var(--accent);
    border-radius: 12px;
    pointer-events: none;
}

#dropzone-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 1;
    justify-content: center;
    padding: 40px 24px;
}

#dropzone-icon {
    color: #8e8e93;
}

#dropzone-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1d1d1f;
    border: none;
    padding: 0;
    text-align: center;
}

#dropzone-hint {
    margin: 0;
    font-size: 14px;
    color: #6e6e73;
    text-align: center;
}

/* Blue capsule button — matches app's .clipShape(Capsule()) */
#choose-label {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    background: var(--accent);
    padding: 10px 24px;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 4px;
}
#choose-label:hover { background: #0055aa; }

#file-input { display: none; }

/* Powered by — matches app's bottom .padding(.bottom, 20) */
#powered-by {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 20px;
    font-size: 14px;
    color: #6e6e73;
    text-decoration: none;
    transition: opacity 0.15s;
}
#powered-by:hover { opacity: 0.75; }
#powered-by img {
    display: block;
    height: 28px;
    width: auto;
    border-radius: 0;
}

/* ── About section ────────────────────────────────────────────────── */
#about {
    background: #f5f5f7;
    border-top: 1px solid #e5e5ea;
    padding: 48px 24px;
}

#about-inner {
    max-width: 680px;
    margin: 0 auto;
}

#about h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 14px;
    border: none;
    padding: 0;
    color: #1d1d1f;
}

#about > div > p {
    font-size: 15px;
    color: #3a3a3c;
    margin-bottom: 20px;
}

#about-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

#about-features li {
    font-size: 14px;
    color: #3a3a3c;
    padding-left: 18px;
    position: relative;
    margin: 0;
}

#about-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #0066cc;
    font-weight: 600;
}

.about-cta {
    font-size: 14px;
    color: #6e6e73;
}

.about-cta a {
    color: #0066cc;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.about-cta a:hover { text-decoration: underline; }

/* ── Utility ──────────────────────────────────────────────────────── */
.hidden { display: none !important; }

@media (prefers-color-scheme: dark) {
    #about { background: #1c1c1e; border-top-color: #3a3a3c; }
    #about h2 { color: #f5f5f7; }
    #about > div > p { color: #aeaeb2; }
    #about-features li { color: #aeaeb2; }
    #about-features li::before { color: #6cb4ff; }
    .about-cta { color: #636366; }
    .about-cta a { color: #6cb4ff; }
}

/* ── Markdown styles (from MarkdownStyles.swift) ──────────────────── */
h1, h2, h3, h4, h5, h6 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
}

h1 {
    font-size: 2em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #d1d1d6;
}

h2 {
    font-size: 1.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #d1d1d6;
}

h3 { font-size: 1.25em; }
h4 { font-size: 1em; }
h5 { font-size: 0.875em; }
h6 { font-size: 0.85em; color: #8e8e93; }

p { margin-top: 0; margin-bottom: 16px; }

a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    background-color: #f2f2f7;
    border-radius: 4px;
}

pre {
    padding: 16px;
    overflow: auto;
    font-size: 0.875em;
    line-height: 1.45;
    background-color: #f6f6fa;
    border-radius: 8px;
    border: 1px solid #e5e5ea;
    margin-bottom: 16px;
}

pre code { padding: 0; background-color: transparent; border-radius: 0; }

table { border-collapse: collapse; width: 100%; margin-bottom: 16px; overflow: auto; }
table th, table td { padding: 8px 16px; border: 1px solid #d1d1d6; text-align: left; }
table th { font-weight: 600; background-color: #f2f2f7; }
table tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); }

blockquote {
    margin: 0 0 16px 0;
    padding: 0 16px;
    color: #6e6e73;
    border-left: 4px solid #d1d1d6;
}
blockquote p { margin-bottom: 4px; }

ul, ol { margin-top: 0; margin-bottom: 16px; padding-left: 2em; }
li { margin-bottom: 4px; }
li > ul, li > ol { margin-top: 4px; margin-bottom: 0; }

img { max-width: 100%; height: auto; border-radius: 4px; }

hr { height: 2px; padding: 0; margin: 24px 0; background-color: #d1d1d6; border: 0; }
del { color: #8e8e93; }
strong { font-weight: 600; }

/* ── Mermaid lightbox ─────────────────────────────────────────────── */
.mermaid svg { cursor: zoom-in; }

#md-lightbox {
    display: none; position: fixed; inset: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9999; overflow: hidden;
}
#md-lightbox.open { display: block; cursor: grab; }
#md-lightbox.open.dragging { cursor: grabbing; }
#md-lightbox-inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
#md-lightbox-inner svg { display: block; max-width: none !important; max-height: none !important; }
#md-lightbox-inner.smooth { transition: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
#md-lightbox-close {
    position: fixed; top: 14px; right: 18px;
    width: 32px; height: 32px;
    background: rgba(0, 0, 0, 0.08); border: none; border-radius: 50%;
    color: rgba(0, 0, 0, 0.6); font-size: 17px; line-height: 1;
    cursor: pointer; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
#md-lightbox-close:hover { background: rgba(0, 0, 0, 0.15); }

/* ── Dark mode ────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --accent: #0a84ff;
        --accent-bg: rgba(10, 132, 255, 0.12);
        --accent-bar: #0a84ff;
        --toc-bg: #1c1c1e;
        --toc-border: #3a3a3c;
        --toc-text: #f5f5f7;
        --toc-secondary: #636366;
        --toc-hover-bg: rgba(255, 255, 255, 0.06);
    }

    body { color: #f5f5f7; background-color: #1e1e1e; }

    #dropzone { background: #1e1e1e; }
    #dropzone-icon { color: #636366; }
    #dropzone-title { color: #f5f5f7; }
    #dropzone-hint { color: #8e8e93; }

    a { color: #6cb4ff; }
    code { background-color: rgba(255, 255, 255, 0.18); color: #f5f5f7; }
    pre { background-color: #2d2d2d; border-color: #3d3d3d; }
    pre code { background-color: transparent; }
    table th { background-color: #2d2d2d; }
    table td, table th { border-color: #3d3d3d; }
    blockquote { border-left-color: #555; color: #aaa; }
    hr { background-color: #3d3d3d; }
    h1, h2 { border-bottom-color: #3d3d3d; }
    h6 { color: #636366; }

    #cta-inner { border-top-color: #3a3a3c; }
    #cta-inner p { color: #8e8e93; }

    #powered-by { color: #8e8e93; }

    #md-lightbox { background: rgba(30, 30, 30, 0.95); }
    #md-lightbox-close { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); }
    #md-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
}