/* Markdown Viewer — Main Styles
 * Version: 2.2.2
 * Author: Mikhail Deynekin
 * Site: https://Deynekin.com
 * Email: Mikhail@Deynekin.com
 *
 * Theme: CSS variables + [data-theme] attribute
 * Accessibility: WCAG 2.2 AA compliant
 * Performance: Minimized duplication, color-mix() for transparency
 */

/* === THEME VARIABLES === */
:root {
    color-scheme: light;
    --page-bg: #f8fafc;
    --page-fg: #0f172a;
    --panel: rgba(255, 255, 255, 0.88);
    --panel-border: rgba(15, 23, 42, 0.08);
    --muted: #475569;
    --link: #2563eb;
    --link-hover: #1d4ed8;
    --code-bg: #0f172a;
    --code-fg: #dbeafe;
    --quote-bg: rgba(37, 99, 235, 0.06);
    --border-soft: color-mix(in srgb, var(--panel-border) 60%, transparent);
    --shadow-soft: 0 20px 60px rgba(15, 23, 42, 0.08);
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-3xl: 1.5rem;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --page-bg: #020817;
    --page-fg: #e2e8f0;
    --panel: rgba(9, 15, 29, 0.82);
    --panel-border: rgba(148, 163, 184, 0.16);
    --muted: #94a3b8;
    --link: #7dd3fc;
    --link-hover: #38bdf8;
    --code-bg: #0f172a;
    --code-fg: #dbeafe;
    --quote-bg: rgba(125, 211, 252, 0.08);
    --border-soft: color-mix(in srgb, var(--panel-border) 60%, transparent);
    --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* === BASE RESET & TYPOGRAPHY === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--page-bg);
    color: var(--page-fg);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* === ACCESSIBILITY === */
*:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

::selection {
    background-color: color-mix(in srgb, var(--link) 30%, transparent);
    color: var(--page-fg);
}

/* === LAYOUT & CONTAINERS === */
.content-shell {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-3xl);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-soft);
}

.markdown-body {
    color: var(--page-fg);
    max-width: 90ch;
    margin: 0 auto;
}

.markdown-body > :first-child { margin-top: 0; }

/* === TYPOGRAPHY === */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin-top: 1.65em;
    margin-bottom: 0.65em;
    color: var(--page-fg);
    scroll-margin-top: 5rem;
}

.markdown-body h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.markdown-body h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); border-bottom: 1px solid var(--border-soft); padding-bottom: 0.5rem; }
.markdown-body h3 { font-size: clamp(1.25rem, 2vw, 1.8rem); }
.markdown-body h4 { font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.markdown-body h5 { font-size: 1.05rem; }
.markdown-body h6 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }

.markdown-body p {
    margin: 1rem 0;
    font-size: 1.04rem;
    line-height: 1.9;
    word-spacing: 0.02em;
    letter-spacing: 0.005em;
}

.markdown-body .paragraph-gap { height: 0.9rem; }

/* === LINKS === */
.markdown-body a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--link) 38%, transparent);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.markdown-body a:hover {
    color: var(--link-hover);
    border-color: currentColor;
}

/* === TEXT FORMATTING === */
.markdown-body strong {
    color: var(--page-fg);
    font-weight: 700;
}

.markdown-body em {
    color: var(--muted);
    font-style: italic;
}

.markdown-body del {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
}

.markdown-body mark {
    background: color-mix(in srgb, #fef08a 70%, transparent);
    color: #854d0e;
    padding: 0 0.125rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

html[data-theme="dark"] .markdown-body mark {
    background: color-mix(in srgb, #78350f 70%, transparent);
    color: #fde68a;
}

.markdown-body sub,
.markdown-body sup {
    font-size: 0.75em;
    line-height: 0;
    vertical-align: baseline;
}
.markdown-body sub { bottom: -0.25em; }
.markdown-body sup { top: -0.5em; }

/* === LISTS === */
.markdown-body ul,
.markdown-body ol {
    margin: 1.2rem 0;
    padding-left: 0;
    display: grid;
    gap: 0.8rem;
}

.markdown-body ul { list-style: none; }

.markdown-body ul li {
    position: relative;
    padding-left: 1.3rem;
    color: var(--muted);
}

.markdown-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.82rem;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.35;
}

.markdown-body ol {
    list-style: decimal;
    padding-left: 1.6rem;
}

.markdown-body ol li {
    color: var(--muted);
    padding-left: 0.3rem;
    display: list-item;
}

/* === TASK LISTS === */
.markdown-body ul.task-list {
    list-style: none;
    padding-left: 0;
    gap: 0.5rem;
}

.markdown-body ul.task-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--page-fg);
}

.markdown-body ul.task-list input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--panel-border);
    accent-color: var(--link);
    cursor: not-allowed;
    opacity: 0.8;
}

.markdown-body ul.task-list li.task-done {
    opacity: 0.7;
}

.markdown-body ul.task-list li.task-done > span {
    text-decoration: line-through;
}

/* === BLOCKQUOTES === */
.markdown-body blockquote {
    margin: 1.7rem 0;
    padding: 1.1rem 1.25rem;
    border-left: 3px solid var(--link);
    border-radius: var(--radius-lg);
    background: var(--quote-bg);
    color: var(--page-fg);
}

.markdown-body blockquote > p { margin: 0; }
.markdown-body blockquote > p + p { margin-top: 1rem; }

.markdown-body blockquote.quote-block {
    position: relative;
    padding-bottom: 4rem;
}

.markdown-body .quote-copy-btn {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    min-height: 2.75rem;
    border: 1px solid rgb(51 65 85 / 0.9);
    background: rgb(15 23 42 / 0.94);
    box-shadow: 0 8px 20px rgb(15 23 42 / 0.22);
    z-index: 1;
}

.markdown-body pre.mermaid-error {
    border-left: 3px solid #f87171;
}

.markdown-body pre.mermaid-error::before {
    content: "Mermaid syntax error — see the browser console for details";
    display: block;
    margin-bottom: 0.75rem;
    color: #fca5a5;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* === CODE === */
.markdown-body code {
    padding: 0.16rem 0.45rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--link) 10%, transparent);
    color: var(--page-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.94em;
}

.markdown-body pre {
    margin: 1.5rem 0;
    overflow-x: auto;
    border-radius: var(--radius-2xl);
    padding: 1rem 1.1rem;
    background: var(--code-bg);
    color: var(--code-fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
    line-height: 1.6;
}

.markdown-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 1em;
}

.inline-code {
    padding: 0.125rem 0.375rem;
    background: color-mix(in srgb, var(--link) 8%, transparent);
    color: var(--page-fg);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.94em;
    border: 1px solid var(--border-soft);
}

/* === TABLES === */
.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.markdown-body th {
    background: color-mix(in srgb, var(--panel-border) 20%, transparent);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--panel-border);
}

.markdown-body td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
}

.markdown-body tr:hover {
    background: color-mix(in srgb, var(--panel-border) 10%, transparent);
}

/* === IMAGES === */
.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin: 1.5rem 0;
    transition: transform var(--transition-fast);
}

.markdown-body img:hover {
    transform: scale(1.01);
}

html[data-theme="dark"] .markdown-body img {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* === HORIZONTAL RULE === */
.markdown-body hr {
    border: 0;
    height: 1px;
    margin: 2.2rem 0;
    background: linear-gradient(90deg, transparent, var(--panel-border), transparent);
}

/* === SOURCE REFERENCES === */
.source-group {
    font-size: 0.78em;
    vertical-align: super;
    line-height: 0;
    margin-left: 0.15em;
}

.source-ref {
    color: var(--link);
    border-bottom: none;
    font-weight: 600;
    padding: 0.1em 0.15em;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.source-ref:hover {
    background: color-mix(in srgb, var(--link) 16%, transparent);
}

.source-ref-missing {
    color: var(--muted);
    opacity: 0.6;
    cursor: not-allowed;
}

/* === TABLE OF CONTENTS === */
.toc {
    background: color-mix(in srgb, var(--panel-border) 8%, transparent);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    margin: 2rem 0;
}

.toc > p {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted);
    margin-bottom: 1rem;
}

.toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    gap: 0.5rem;
}

.toc li { margin: 0; padding: 0; }

.toc a {
    display: block;
    padding: 0.25rem 0;
    border-bottom: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.toc a:hover {
    color: var(--link-hover);
    transform: translateX(0.25rem);
}

.toc li.ml-4 a { padding-left: 1rem; font-size: 0.95rem; }
.toc li.ml-8 a { padding-left: 2rem; font-size: 0.9rem; opacity: 0.9; }
.toc li.ml-12 a { padding-left: 3rem; font-size: 0.875rem; opacity: 0.85; }
.toc li.ml-16 a { padding-left: 4rem; font-size: 0.85rem; opacity: 0.8; }

/* === PATTERN VISUALIZATION === */
.pattern-chain {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    vertical-align: middle;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    background: color-mix(in srgb, var(--link) 6%, transparent);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}

.pattern-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--link) 85%, #6366f1), #6366f1);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 600;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--link) 30%, transparent);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.pattern-node:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--link) 40%, transparent);
}

.pattern-bracket {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background: color-mix(in srgb, var(--panel-border) 15%, transparent);
    color: var(--muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.pattern-curly {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background: color-mix(in srgb, #fef3c7 30%, transparent);
    color: #92400e;
    border: 1px dashed color-mix(in srgb, #f59e0b 60%, transparent);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-style: italic;
}

html[data-theme="dark"] .pattern-curly {
    background: color-mix(in srgb, #451a03 50%, transparent);
    color: #fcd34d;
    border-color: color-mix(in srgb, #b45309 60%, transparent);
}

.pattern-rel {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    color: var(--muted);
}

.pattern-line {
    display: inline-block;
    width: 1rem;
    height: 2px;
    background: currentColor;
    opacity: 0.6;
}

.pattern-arrow {
    font-size: 0.75rem;
    font-weight: 800;
    color: inherit;
    line-height: 1;
}

.pattern-rel-label {
    padding: 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--page-fg);
    background: color-mix(in srgb, var(--panel-border) 10%, transparent);
    border-radius: 0.125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* === FOOTNOTES === */
.footnote-ref {
    text-decoration: none;
    border-bottom: none;
}

.footnote-ref:hover {
    text-decoration: underline;
}

.footnote-backlink {
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--link);
    transition: transform var(--transition-fast);
}

.footnote-backlink:hover {
    transform: translateX(-2px);
}

/* === MERMAID DIAGRAMS === */
.mermaid-shell {
    border-radius: var(--radius-3xl);
    border: 1px solid var(--panel-border);
    background: var(--panel);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    margin: 2rem 0;
}

.mermaid-shell > div:first-child {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--muted);
}

.mermaid-shell .mermaid {
    min-width: max-content;
    display: block;
    text-align: center;
    padding: 1rem;
}

.mermaid-shell svg {
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--page-bg); }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted) 40%, transparent);
    border-radius: var(--radius-lg);
    border: 2px solid var(--page-bg);
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--muted) 60%, transparent);
}

/* === PRINT STYLES === */
@media print {
    header, nav, button, footer, .width-switch, [data-theme-toggle] {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
        font-size: 11pt;
        line-height: 1.5;
    }
    
    .content-shell {
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
    }
    
    .markdown-body a {
        color: black !important;
        text-decoration: underline !important;
        border-bottom: none !important;
    }
    
    .markdown-body pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    .pattern-chain {
        border: 1px solid #ccc !important;
        background: #f9f9f9 !important;
    }
}

/* === RESPONSIVE UTILITIES === */
@media (max-width: 640px) {
    .markdown-body h1 { font-size: 2rem; }
    .markdown-body h2 { font-size: 1.5rem; }
    .content-shell { border-radius: var(--radius-2xl); }
}

/* === HEADING NUMBERS === */
.heading-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--muted);
    margin-right: 0.5rem;
    opacity: 0.7;
}

code.inline-code.copy-on-click {
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
code.inline-code.copy-on-click:hover {
    background-color: rgb(59 130 246 / 0.12);
    color: #2563eb;
}
html[data-theme="dark"] code.inline-code.copy-on-click:hover {
    background-color: rgb(96 165 250 / 0.15);
    color: #93c5fd;
}
code.inline-code.copied {
    background-color: rgb(34 197 94 / 0.15);
    color: #16a34a;
}
html[data-theme="dark"] code.inline-code.copied {
    color: #4ade80;
}