/* ==========================================================================
   Gemini.Markdown — prose preview styles (pure CSS, no Tailwind dependency)
   @import "_content/Gemini.Markdown/gemini-prose.css";
   ========================================================================== */

:root {
    --gp-font-sans: ui-sans-serif, system-ui, sans-serif;
    --gp-font-mono: ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
    --gp-font-size: 0.9375rem;
    --gp-line-height: 1.75;
    --gp-text: #171717;
    --gp-text-muted: #737373;
    --gp-text-h6: #737373;
    --gp-border: #e5e5e5;
    --gp-bg-code: #f5f5f5;
    --gp-bg-tr-even: #fafafa;
    --gp-bg-th: #f5f5f5;
    --gp-link: #2563eb;
    --gp-blockquote: #d4d4d4;
}

:root.dark {
    --gp-text: #e5e5e5;
    --gp-text-muted: #a3a3a3;
    --gp-text-h6: #a3a3a3;
    --gp-border: #404040;
    --gp-bg-code: #262626;
    --gp-bg-tr-even: #1a1a1a;
    --gp-bg-th: #262626;
    --gp-link: #60a5fa;
    --gp-blockquote: #525252;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
.gemini-prose {
    font-family: var(--gp-font-sans);
    font-size: var(--gp-font-size);
    line-height: var(--gp-line-height);
    color: var(--gp-text);
    word-break: break-word;
    max-width: 100%;
}

    .gemini-prose > *:first-child {
        margin-top: 0;
    }

    .gemini-prose > *:last-child {
        margin-bottom: 0;
    }

    /* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */
    .gemini-prose h1,
    .gemini-prose h2,
    .gemini-prose h3,
    .gemini-prose h4,
    .gemini-prose h5,
    .gemini-prose h6 {
        font-weight: 600;
        line-height: 1.25;
        margin-top: 1.5em;
        margin-bottom: 0.5em;
        color: var(--gp-text);
        scroll-margin-top: 4rem;
    }

    .gemini-prose h1 {
        font-size: 1.75rem;
        margin-top: 0;
    }

    .gemini-prose h2 {
        font-size: 1.375rem;
        border-bottom: 1px solid var(--gp-border);
        padding-bottom: 0.2em;
    }

    .gemini-prose h3 {
        font-size: 1.125rem;
    }

    .gemini-prose h4 {
        font-size: 1rem;
    }

    .gemini-prose h5 {
        font-size: 0.9375rem;
    }

    .gemini-prose h6 {
        font-size: 0.875rem;
        color: var(--gp-text-h6);
    }

    /* --------------------------------------------------------------------------
   Paragraphs
   -------------------------------------------------------------------------- */
    .gemini-prose p {
        margin-top: 0;
        margin-bottom: 1em;
    }

        .gemini-prose p:last-child {
            margin-bottom: 0;
        }

    /* --------------------------------------------------------------------------
   Inline formatting
   -------------------------------------------------------------------------- */
    .gemini-prose strong {
        font-weight: 700;
    }

    .gemini-prose em {
        font-style: italic;
    }

    .gemini-prose del,
    .gemini-prose s {
        text-decoration: line-through;
        color: var(--gp-text-muted);
    }

    /* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
    .gemini-prose a {
        color: var(--gp-link);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

        .gemini-prose a:hover {
            text-decoration-thickness: 2px;
        }

    /* --------------------------------------------------------------------------
   Inline code
   -------------------------------------------------------------------------- */
    .gemini-prose code {
        font-family: var(--gp-font-mono);
        font-size: 0.875em;
        background-color: var(--gp-bg-code);
        border: 1px solid var(--gp-border);
        border-radius: 4px;
        padding: 0.1em 0.35em;
        white-space: nowrap;
    }

    .gemini-prose pre code {
        background: none;
        border: none;
        padding: 0;
        font-size: inherit;
        white-space: pre;
    }

    /* --------------------------------------------------------------------------
   Code blocks
   -------------------------------------------------------------------------- */
    .gemini-prose pre {
        font-family: var(--gp-font-mono);
        font-size: 0.875rem;
        background-color: var(--gp-bg-code);
        border: 1px solid var(--gp-border);
        border-radius: 8px;
        padding: 1rem;
        overflow-x: auto;
        margin: 1em 0;
        line-height: 1.6;
    }

    /* --------------------------------------------------------------------------
   Blockquotes
   -------------------------------------------------------------------------- */
    .gemini-prose blockquote {
        border-left: 3px solid var(--gp-blockquote);
        margin: 1em 0;
        padding: 0.25em 0 0.25em 1em;
        color: var(--gp-text-muted);
        font-style: italic;
    }

        .gemini-prose blockquote p {
            margin-bottom: 0;
        }

    /* --------------------------------------------------------------------------
   Admonitions  (GitHub-style > [!NOTE] / [!TIP] / [!IMPORTANT] / [!WARNING] / [!CAUTION])
   -------------------------------------------------------------------------- */

    /* Bootstrap alert-box style: full border on all sides, equal corner radius */
    .gemini-prose .gem-admonition {
        border: 1px solid;
        border-radius: 0.375rem;
        margin: 1em 0;
        padding: 0.75rem 1rem;
        font-style: normal;
        color: var(--gp-text);
    }

    .gemini-prose .gem-admonition-header {
        display: flex;
        align-items: center;
        gap: 0.4em;
        font-size: 0.8125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 0.4em;
    }

    .gemini-prose .gem-admonition-body > :first-child { margin-top: 0; }
    .gemini-prose .gem-admonition-body > :last-child  { margin-bottom: 0; }

    /* NOTE — Bootstrap primary blue */
    .gemini-prose .gem-admonition-note  { border-color: #b6d4fe; background: #cfe2ff; }
    .gemini-prose .gem-admonition-note  .gem-admonition-header { color: #084298; }

    /* TIP — Bootstrap success green */
    .gemini-prose .gem-admonition-tip   { border-color: #badbcc; background: #d1e7dd; }
    .gemini-prose .gem-admonition-tip   .gem-admonition-header { color: #0f5132; }

    /* IMPORTANT — Bootstrap-adjacent purple */
    .gemini-prose .gem-admonition-important { border-color: #c5b5e8; background: #e2d9f3; }
    .gemini-prose .gem-admonition-important .gem-admonition-header { color: #5a189a; }

    /* WARNING — Bootstrap warning amber */
    .gemini-prose .gem-admonition-warning { border-color: #ffecb5; background: #fff3cd; }
    .gemini-prose .gem-admonition-warning .gem-admonition-header { color: #664d03; }

    /* CAUTION — Bootstrap danger red */
    .gemini-prose .gem-admonition-caution { border-color: #f5c2c7; background: #f8d7da; }
    .gemini-prose .gem-admonition-caution .gem-admonition-header { color: #842029; }

/* Dark mode admonitions — override both background AND border-color */
.dark .gemini-prose .gem-admonition-note {
    background: rgba(13, 110, 253, 0.15);
    border-color: rgba(13, 110, 253, 0.45);
}
.dark .gemini-prose .gem-admonition-note .gem-admonition-header { color: #6ea8fe; }

.dark .gemini-prose .gem-admonition-tip {
    background: rgba(25, 135,  84, 0.15);
    border-color: rgba(25, 135,  84, 0.45);
}
.dark .gemini-prose .gem-admonition-tip .gem-admonition-header { color: #75b798; }

.dark .gemini-prose .gem-admonition-important {
    background: rgba(111, 66, 193, 0.15);
    border-color: rgba(111, 66, 193, 0.45);
}
.dark .gemini-prose .gem-admonition-important .gem-admonition-header { color: #c5a3ff; }

.dark .gemini-prose .gem-admonition-warning {
    background: rgba(255, 193,   7, 0.15);
    border-color: rgba(255, 193,   7, 0.45);
}
.dark .gemini-prose .gem-admonition-warning .gem-admonition-header { color: #ffda6a; }

.dark .gemini-prose .gem-admonition-caution {
    background: rgba(220,  53,  69, 0.15);
    border-color: rgba(220,  53,  69, 0.45);
}
.dark .gemini-prose .gem-admonition-caution .gem-admonition-header { color: #f1aeb5; }

    /* --------------------------------------------------------------------------
   Markdig native alert output (UseAdvancedExtensions includes UseAlerts).
   Produces: <div class="markdown-alert markdown-alert-{type}">
             <p class="markdown-alert-title">…</p>
             …body…
           </div>
   Styled identically to .gem-admonition so both paths look the same.
   -------------------------------------------------------------------------- */

    .gemini-prose .markdown-alert {
        border: 1px solid;
        border-radius: 0.375rem;
        margin: 1em 0;
        padding: 0.75rem 1rem;
        font-style: normal;
        color: var(--gp-text);
    }

    .gemini-prose .markdown-alert-title {
        display: flex;
        align-items: center;
        gap: 0.4em;
        font-size: 0.8125rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin: 0 0 0.4em;
        font-style: normal;
    }

    /* Markdig may emit <em> around the title text — reset the italic */
    .gemini-prose .markdown-alert-title em { font-style: normal; }

    /* Markdig may include SVG octicons in the title; keep them icon-sized */
    .gemini-prose .markdown-alert-title svg {
        width: 1em;
        height: 1em;
        fill: currentColor;
        vertical-align: -0.1em;
        flex-shrink: 0;
    }

    /* Collapse outer margin on first/last content children */
    .gemini-prose .markdown-alert > :first-child { margin-top: 0; }
    .gemini-prose .markdown-alert > :last-child  { margin-bottom: 0; }

    /* NOTE — Bootstrap primary blue */
    .gemini-prose .markdown-alert-note { border-color: #b6d4fe; background: #cfe2ff; }
    .gemini-prose .markdown-alert-note .markdown-alert-title { color: #084298; }

    /* TIP — Bootstrap success green */
    .gemini-prose .markdown-alert-tip { border-color: #badbcc; background: #d1e7dd; }
    .gemini-prose .markdown-alert-tip .markdown-alert-title { color: #0f5132; }

    /* IMPORTANT — Bootstrap-adjacent purple */
    .gemini-prose .markdown-alert-important { border-color: #c5b5e8; background: #e2d9f3; }
    .gemini-prose .markdown-alert-important .markdown-alert-title { color: #5a189a; }

    /* WARNING — Bootstrap warning amber */
    .gemini-prose .markdown-alert-warning { border-color: #ffecb5; background: #fff3cd; }
    .gemini-prose .markdown-alert-warning .markdown-alert-title { color: #664d03; }

    /* CAUTION — Bootstrap danger red */
    .gemini-prose .markdown-alert-caution { border-color: #f5c2c7; background: #f8d7da; }
    .gemini-prose .markdown-alert-caution .markdown-alert-title { color: #842029; }

/* Dark mode — Markdig native alerts */
.dark .gemini-prose .markdown-alert-note {
    background: rgba(13, 110, 253, 0.15);
    border-color: rgba(13, 110, 253, 0.45);
}
.dark .gemini-prose .markdown-alert-note .markdown-alert-title { color: #6ea8fe; }

.dark .gemini-prose .markdown-alert-tip {
    background: rgba(25, 135,  84, 0.15);
    border-color: rgba(25, 135,  84, 0.45);
}
.dark .gemini-prose .markdown-alert-tip .markdown-alert-title { color: #75b798; }

.dark .gemini-prose .markdown-alert-important {
    background: rgba(111, 66, 193, 0.15);
    border-color: rgba(111, 66, 193, 0.45);
}
.dark .gemini-prose .markdown-alert-important .markdown-alert-title { color: #c5a3ff; }

.dark .gemini-prose .markdown-alert-warning {
    background: rgba(255, 193,   7, 0.15);
    border-color: rgba(255, 193,   7, 0.45);
}
.dark .gemini-prose .markdown-alert-warning .markdown-alert-title { color: #ffda6a; }

.dark .gemini-prose .markdown-alert-caution {
    background: rgba(220,  53,  69, 0.15);
    border-color: rgba(220,  53,  69, 0.45);
}
.dark .gemini-prose .markdown-alert-caution .markdown-alert-title { color: #f1aeb5; }

    /* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */
    .gemini-prose ul,
    .gemini-prose ol {
        margin: 0.5em 0 1em;
        padding-left: 1.5em;
    }

    .gemini-prose ul {
        list-style-type: disc;
    }

    .gemini-prose ol {
        list-style-type: decimal;
    }

    .gemini-prose li {
        margin-bottom: 0.25em;
    }

        .gemini-prose li > ul,
        .gemini-prose li > ol {
            margin-top: 0.25em;
            margin-bottom: 0;
        }

    .gemini-prose input[type="checkbox"] {
        margin-right: 0.4em;
        vertical-align: middle;
    }

    /* --------------------------------------------------------------------------
   Horizontal rule
   -------------------------------------------------------------------------- */
    .gemini-prose hr {
        border: none;
        border-top: 1px solid var(--gp-border);
        margin: 1.5em 0;
    }

    /* --------------------------------------------------------------------------
   Images
   -------------------------------------------------------------------------- */
    .gemini-prose img {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
        margin: 0.5em 0;
        display: block;
    }

    /* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
    .gemini-prose table {
        width: 100%;
        border-collapse: collapse;
        margin: 1em 0;
        font-size: 0.9em;
    }

    .gemini-prose th,
    .gemini-prose td {
        border: 1px solid var(--gp-border);
        padding: 0.45em 0.75em;
        text-align: left;
    }

    .gemini-prose th {
        background-color: var(--gp-bg-th);
        font-weight: 600;
        color: var(--gp-text);
    }

    .gemini-prose tr:nth-child(even) td {
        background-color: var(--gp-bg-tr-even);
    }

/* --------------------------------------------------------------------------
   Table of Contents ([TOC])
   -------------------------------------------------------------------------- */
.gemini-prose .gem-toc {
    border: 1px solid var(--gp-border);
    border-radius: 6px;
    padding: 0.75em 1em;
    margin: 0 0 1em;
    background: var(--gp-bg-code);
    display: inline-block;
    min-width: 200px;
    max-width: 100%;
}
.gemini-prose .gem-toc-header {
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5em;
    color: var(--gp-text-muted);
}
.gemini-prose .gem-toc ul { margin: 0; padding-left: 1.25em; list-style: none; }
.gemini-prose .gem-toc > ul { padding-left: 0; }
.gemini-prose .gem-toc li { margin: 0.15em 0; }
.gemini-prose .gem-toc a {
    color: var(--gp-text);
    text-decoration: none;
    font-size: 0.875em;
    line-height: 1.5;
}
.gemini-prose .gem-toc a:hover { color: var(--gp-link); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Sidebar TOC component (MarkdownToc.razor) — independent of .gemini-prose
   -------------------------------------------------------------------------- */
.gem-toc-sidebar {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--gp-text-muted);
}

.gem-toc-sidebar--sticky {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    align-self: start;
}

.gem-toc-sidebar-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gp-text-muted);
    margin: 0 0 0.6rem;
    padding-left: 0.1rem;
}

.gem-toc-sidebar-link {
    display: block;
    padding: 0.15rem 0.25rem;
    color: var(--gp-text-muted);
    text-decoration: none;
    border-radius: 3px;
    transition: color 0.12s, background-color 0.12s;
    line-height: 1.4;
}

.gem-toc-sidebar-link:hover {
    color: var(--gp-text);
    background-color: rgba(0,0,0,0.04);
}

.gem-toc-sidebar-link.gem-toc-sidebar-active {
    color: var(--gp-link);
    font-weight: 500;
}

:root.dark .gem-toc-sidebar-link:hover {
    background-color: rgba(255,255,255,0.06);
}