﻿/* ==========================================================================
   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])
   -------------------------------------------------------------------------- */

    .gemini-prose .gem-admonition {
        border-left: 4px solid;
        border-radius: 0 6px 6px 0;
        margin: 1em 0;
        padding: 0.75em 1em;
        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 — blue */
    .gemini-prose .gem-admonition-note  { border-color: #1f6feb; background: #ddf4ff; }
    .gemini-prose .gem-admonition-note  .gem-admonition-header { color: #0969da; }

    /* TIP — green */
    .gemini-prose .gem-admonition-tip   { border-color: #1a7f37; background: #dafbe1; }
    .gemini-prose .gem-admonition-tip   .gem-admonition-header { color: #1a7f37; }

    /* IMPORTANT — purple */
    .gemini-prose .gem-admonition-important { border-color: #8250df; background: #fbefff; }
    .gemini-prose .gem-admonition-important .gem-admonition-header { color: #8250df; }

    /* WARNING — amber */
    .gemini-prose .gem-admonition-warning { border-color: #9a6700; background: #fff8c5; }
    .gemini-prose .gem-admonition-warning .gem-admonition-header { color: #9a6700; }

    /* CAUTION — red */
    .gemini-prose .gem-admonition-caution { border-color: #cf222e; background: #ffebe9; }
    .gemini-prose .gem-admonition-caution .gem-admonition-header { color: #cf222e; }

/* Dark mode admonitions */
.dark .gemini-prose .gem-admonition-note      { background: rgba(31, 111, 235, 0.12); }
.dark .gemini-prose .gem-admonition-note      .gem-admonition-header { color: #388bfd; }
.dark .gemini-prose .gem-admonition-tip       { background: rgba(26, 127,  55, 0.12); }
.dark .gemini-prose .gem-admonition-tip       .gem-admonition-header { color: #3fb950; }
.dark .gemini-prose .gem-admonition-important { background: rgba(130, 80, 223, 0.12); }
.dark .gemini-prose .gem-admonition-important .gem-admonition-header { color: #a371f7; }
.dark .gemini-prose .gem-admonition-warning   { background: rgba(154, 103,  0, 0.12); }
.dark .gemini-prose .gem-admonition-warning   .gem-admonition-header { color: #d29922; }
.dark .gemini-prose .gem-admonition-caution   { background: rgba(207,  34, 46, 0.12); }
.dark .gemini-prose .gem-admonition-caution   .gem-admonition-header { color: #f85149; }

    /* --------------------------------------------------------------------------
   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);
}
