/* 
 * Markdown Stylesheet
 * ------------------------------------------------------------------
 * Styled for "ai-relay" theme
 * Typography: DM Sans (Body), JetBrains Mono (Code)
 * Theme: Lumo-based (Light/Dark support)
 * 
 * Note: Fonts are imported in styles.css
 */

.markdown-body {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--lumo-font-size-m);
    line-height: 1.6;
    color: var(--lumo-body-text-color);
    background-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Content wrapper */
.markdown-content {
    max-width: 100%;
    margin: 0 auto;
}

/* ------------------------------------------------------------------
   Headings
   ------------------------------------------------------------------ */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.25;
    color: var(--lumo-header-text-color);
    letter-spacing: -0.02em;
    /* Offset for deep-link scrolling so heading isn't hidden behind sticky elements */
    scroll-margin-top: var(--lumo-space-l);
}

/* Heading anchor link icon (hover to reveal, click to copy) */
.markdown-body .heading-anchor {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4em;
    color: var(--lumo-contrast-40pct);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    vertical-align: middle;
    text-decoration: none;
    font-weight: 400;
}

.markdown-body .heading-anchor:hover {
    color: var(--lumo-primary-color);
    text-decoration: none;
}

.markdown-body h1:hover .heading-anchor,
.markdown-body h2:hover .heading-anchor,
.markdown-body h3:hover .heading-anchor,
.markdown-body h4:hover .heading-anchor,
.markdown-body h5:hover .heading-anchor,
.markdown-body h6:hover .heading-anchor {
    opacity: 1;
}

.markdown-body h1 {
    font-size: 2em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

.markdown-body h2 {
    font-size: 1.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--lumo-contrast-5pct);
}

.markdown-body h3 {
    font-size: 1.25em;
}

.markdown-body h4 {
    font-size: 1em;
}

.markdown-body h5 {
    font-size: 0.875em;
}

.markdown-body h6 {
    font-size: 0.85em;
    color: var(--lumo-secondary-text-color);
}

/* ------------------------------------------------------------------
   Paragraphs & Lists
   ------------------------------------------------------------------ */
.markdown-body p {
    margin-top: 0;
    margin-bottom: 1em;
}

.markdown-body ul,
.markdown-body ol {
    margin-top: 0;
    margin-bottom: 1em;
    padding-left: 2em;
}

.markdown-body li {
    margin-top: 0.25em;
}

.markdown-body li > p {
    margin-top: 0.5em;
}

.markdown-body li + li {
    margin-top: 0.25em;
}

/* ------------------------------------------------------------------
   Links
   ------------------------------------------------------------------ */
.markdown-body a {
    color: var(--lumo-primary-text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.markdown-body a:hover {
    text-decoration: underline;
    color: var(--lumo-primary-color);
}

/* ------------------------------------------------------------------
   Blockquotes
   ------------------------------------------------------------------ */
.markdown-body blockquote {
    margin: 0 0 1em;
    padding: 0 1em;
    color: var(--lumo-secondary-text-color);
    border-left: 0.25em solid var(--lumo-contrast-20pct);
    background: var(--lumo-contrast-5pct);
    border-radius: 0 var(--lumo-border-radius-m) var(--lumo-border-radius-m) 0;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

/* ------------------------------------------------------------------
   Code - Inline & Blocks
   ------------------------------------------------------------------ */
.markdown-body code,
.markdown-body pre {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
}

/* Inline code */
.markdown-body code {
    padding: 0.2em 0.4em;
    margin: 0;
    background-color: var(--lumo-contrast-10pct);
    border-radius: var(--lumo-border-radius-s);
    color: var(--lumo-body-text-color);
}

/* Code blocks */
.markdown-body pre {
    padding: 1em;
    overflow: auto;
    line-height: 1.45;
    background-color: var(--lumo-contrast-5pct);
    border-radius: var(--lumo-border-radius-m);
    border: 1px solid var(--lumo-contrast-10pct);
}

.markdown-body pre code {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    white-space: pre;
}

/* Prevent em-compounding: the .code-block wrapper already applies 0.9em,
   so the <code> inside it must not shrink again from the generic rule above. */
.markdown-body .code-block code {
    font-size: inherit;
}

/* Dark mode specific tweaks for code */
[theme~="dark"] .markdown-body pre {
    background-color: #1e1e1e; /* Specific dark background for better contrast */
    border-color: #333;
}

[theme~="dark"] .markdown-body code {
    color: #ce9178; /* Light accent for inline code */
}

[theme~="dark"] .markdown-body pre code {
    color: #d4d4d4; /* Base text color for code blocks */
}

/* ------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------ */
.markdown-body table {
    width: 100%;
    overflow: auto;
    border-spacing: 0;
    border-collapse: collapse;
    margin-top: 0;
    margin-bottom: 1em;
}

.markdown-body tr {
    background-color: transparent;
    border-top: 1px solid var(--lumo-contrast-20pct);
}

.markdown-body tr:nth-child(2n) {
    background-color: var(--lumo-contrast-5pct);
}

.markdown-body th,
.markdown-body td {
    padding: 6px 13px;
    border: 1px solid var(--lumo-contrast-20pct);
}

.markdown-body th {
    font-weight: 600;
    background-color: var(--lumo-contrast-10pct);
}

/* ------------------------------------------------------------------
   Horizontal Rules
   ------------------------------------------------------------------ */
.markdown-body hr {
    height: 0.25em;
    padding: 0;
    margin: 24px 0;
    background-color: var(--lumo-contrast-10pct);
    border: 0;
}

/* ------------------------------------------------------------------
   Images
   ------------------------------------------------------------------ */
.markdown-body img {
    max-width: 100%;
    box-sizing: border-box;
    background-color: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-m);
    border: 1px solid var(--lumo-contrast-20pct);
}

/* ------------------------------------------------------------------
   Mermaid Diagrams
   ------------------------------------------------------------------ */
.markdown-body .mermaid:not(.mermaid-wrapped) {
    display: flex;
    justify-content: center;
    background-color: var(--lumo-base-color);
    padding: var(--lumo-space-m);
    margin-bottom: 1em;
    border-radius: var(--lumo-border-radius-m);
    border: 1px solid var(--lumo-contrast-10pct);
    overflow-x: auto;
}

/* ------------------------------------------------------------------
   Mermaid Diagram Controls
   ------------------------------------------------------------------ */
.mermaid-container {
    position: relative;
    margin-bottom: 1em;
}

.mermaid-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: var(--lumo-space-xs) 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.mermaid-container:hover .mermaid-toolbar {
    opacity: 1;
}

.mermaid-viewport {
    overflow: hidden;
    overflow: clip;
    padding: var(--lumo-space-m);
    min-height: 200px;
    max-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--lumo-border-radius-m);
    border: 2px solid var(--lumo-primary-color);
    background-color: var(--lumo-base-color);
    /* Ensure clipping works with transformed children */
    position: relative;
    isolation: isolate;
}

.mermaid-viewport .mermaid {
    border: none;
    margin: 0;
    padding: 0;
    background: transparent;
    transform-origin: 0 0;
    transition: transform 0.1s ease-out;
    cursor: default;
}

.mermaid-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--lumo-border-radius-s);
    background: var(--lumo-contrast-10pct);
    color: var(--lumo-body-text-color);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.mermaid-btn:hover {
    background: var(--lumo-contrast-20pct);
}

/* Fullscreen overlay backdrop - shaded area outside the content panel */
.mermaid-fullscreen-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.5);
}

/* Fullscreen mode - applied to .mermaid-container */
.mermaid-fullscreen {
    position: fixed !important;
    top: 6%;
    left: 3%;
    right: 3%;
    bottom: 6%;
    z-index: 9999;
    margin: 0;
    padding: 0;
    background: var(--lumo-base-color);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lumo-contrast-20pct);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.mermaid-fullscreen .mermaid-toolbar {
    opacity: 1;
    flex-shrink: 0;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.mermaid-fullscreen .mermaid-viewport {
    flex: 1;
    max-height: none !important;
    height: 100%;
    border-radius: 12px;
    border: none;
    overflow: hidden;
    /* Disable flex centering — positioning is handled via transform translate */
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* In fullscreen, diagram positioning is handled via transform translate — disable flex centering */
.mermaid-fullscreen .mermaid-wrapped {
    display: block !important;
    justify-content: initial !important;
}

/* ------------------------------------------------------------------
   Utility / Layout overrides
   ------------------------------------------------------------------ */
/* Ensure lists inside blockquotes look right */
.markdown-body blockquote > :first-child {
    margin-top: 0;
}

.markdown-body blockquote > :last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Document Links - External & Broken
   ------------------------------------------------------------------ */
/* External links - icon after link text */
.markdown-body a.external-link::after {
    content: "\f08e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    margin-left: 0.3em;
    vertical-align: super;
    color: var(--lumo-secondary-text-color);
    text-decoration: none;
}

/* Broken internal links - subtle indicator after link text */
.markdown-body a.broken-link::after {
    content: "\f127";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    margin-left: 0.3em;
    vertical-align: super;
    color: var(--lumo-error-text-color);
    text-decoration: none;
}

/* ------------------------------------------------------------------
   Floating Table of Contents
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Wide screens: TOC as sticky sidebar in the right margin.
   Content stays at its normal centered 900px position;
   the TOC floats in the whitespace to the right so the
   reading column never shifts between pages with/without a TOC.
   ------------------------------------------------------------------ */
.toc-wrapper {
    position: sticky;
    top: var(--lumo-space-l);
    /* Pull it out of flow and park it to the right of the content block */
    float: right;
    width: 220px;
    /* Shift into the right margin: clear the content area + gap */
    margin-right: calc(-220px - var(--lumo-space-xl));
    margin-top: 0;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: var(--lumo-space-s) 0;
    /* Subtle left border */
    border-left: 1px solid var(--lumo-contrast-10pct);
    padding-left: var(--lumo-space-m);
}

.toc-heading {
    font-size: var(--lumo-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lumo-secondary-text-color);
    margin-bottom: var(--lumo-space-s);
}

/* TOC list styling (shared between sidebar and inline modes) */
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.toc-list li li {
    padding-left: var(--lumo-space-m);
}

.toc-list a {
    display: block;
    padding: 3px 0;
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-secondary-text-color);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.toc-list a:hover {
    color: var(--lumo-primary-text-color);
}

.toc-list a.toc-active {
    color: var(--lumo-primary-color);
    font-weight: 500;
}

/* ------------------------------------------------------------------
   Narrow screens: TOC inline beneath the page title.
   Collapsed by default with a toggle to expand.
   Content (900px) + sidebar (~240px) + TOC (220px) + gaps ≈ 1440px
   ------------------------------------------------------------------ */
@media (max-width: 1440px) {
    .toc-wrapper {
        /* Reset sidebar positioning — flow inline */
        position: static;
        float: none;
        width: auto;
        margin-right: 0;
        max-height: none;
        overflow-y: visible;

        /* Inline styling: subtle card beneath the title */
        background: var(--lumo-contrast-5pct);
        border: 1px solid var(--lumo-contrast-10pct);
        border-left: none;
        border-radius: var(--lumo-border-radius-m);
        padding: var(--lumo-space-s) var(--lumo-space-m);
        margin-bottom: var(--lumo-space-l);
    }

    /* Make the heading clickable (toggle) */
    .toc-heading {
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
    }

    /* Chevron indicator */
    .toc-heading::after {
        content: "▸";
        font-size: var(--lumo-font-size-s);
        color: var(--lumo-secondary-text-color);
        transition: transform 0.2s ease;
    }

    /* Collapsed: hide the list */
    .toc-wrapper:not(.toc-expanded) .toc-list {
        display: none;
    }

    /* Expanded: rotate chevron and show list */
    .toc-wrapper.toc-expanded .toc-heading::after {
        transform: rotate(90deg);
    }

    .toc-wrapper.toc-expanded .toc-heading {
        margin-bottom: var(--lumo-space-s);
    }

    /* Inline TOC: lay out entries in columns for compact display */
    .toc-wrapper.toc-expanded .toc-list {
        display: block;
        column-count: 2;
        column-gap: var(--lumo-space-xl);
    }

    .toc-wrapper.toc-expanded .toc-list li {
        break-inside: avoid;
    }
}

/* Single column for very narrow screens */
@media (max-width: 600px) {
    .toc-wrapper.toc-expanded .toc-list {
        column-count: 1;
    }
}