/* Komod developer documentation (/dokumentacio, Docs/DocsEndpoints.cs). Tokens, header, side menu and footer: kofa.css. */
:root {
    --code-bg: #f0f3f8;
    --code-text: #1b2430;
    --note: #0f6cbd;
    --tip: #12a08a;
    --important: #7a4fc4;
    --warning: #b7791f;
    --caution: #c42b1c;
}

@media (prefers-color-scheme: dark) {
    :root {
        --code-bg: #141a23;
        --code-text: #dbe3ee;
        --note: #4f9fe8;
        --tip: #39c9a9;
        --important: #a98be0;
        --warning: #e0a63a;
        --caution: #ef6f61;
    }
}

body { line-height: 1.65; }

/* Search (top of the side menu) */
.search { position: relative; margin: 0 2px 10px; }
.search input { width: 100%; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: .92rem; }
.search ul { position: absolute; top: 42px; left: 0; right: 0; margin: 0; padding: 6px; list-style: none; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.search li a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--text); }
.search li a:hover, .search li a:focus { background: var(--bg-alt); text-decoration: none; }
.search li small { display: block; color: var(--muted); font-size: .8rem; }

/* Contents in the side menu (kofa.css .side), article, outline */
.docs-shell { --side: 300px; }
.toc { font-size: .93rem; }
html.side-collapsed .docs-shell .toc, html.side-collapsed .docs-shell .search { display: none; }
.docs-rail { display: none; flex-direction: column; gap: 4px; }
html.side-collapsed .docs-rail { display: flex; }
.docs-rail button {
    display: flex; align-items: center; justify-content: center; padding: 8px 0; border-radius: 8px;
    background: none; border: 1px solid transparent; color: var(--muted); font-size: 1.05rem; cursor: pointer; box-shadow: none;
}
.docs-rail button:hover { background: var(--bg-alt); color: var(--text); }
.toc details { margin-bottom: 6px; }
.toc summary { cursor: pointer; font-weight: 700; padding: 5px 8px; color: var(--text); }
.toc ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 8px; }
.toc li a { display: block; padding: 4px 10px; border-radius: 6px; color: var(--muted); border-left: 2px solid transparent; }
.toc li a:hover { background: var(--bg-alt); text-decoration: none; color: var(--text); }
.toc li a.active { color: var(--accent); background: var(--bg-alt); border-left-color: var(--accent); font-weight: 600; }

.docs-shell .content { padding: 28px 40px 80px; max-width: none; }
article { max-width: 800px; }
.crumb { margin: 0 0 4px; color: var(--accent); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
article h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 .6em; }
article h2 { font-size: 1.5rem; margin: 2em 0 .5em; padding-bottom: .25em; border-bottom: 1px solid var(--border); }
article h3 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
article p, article li { max-width: 74ch; }
article img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); }
article hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }

/* Code */
code { font: .88em ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--code-bg); padding: .12em .36em; border-radius: 5px; }
pre { position: relative; margin: 1.1em 0; padding: 14px 16px; overflow: auto; background: var(--code-bg); color: var(--code-text); border: 1px solid var(--border); border-radius: 10px; line-height: 1.5; tab-size: 4; }
pre code { padding: 0; background: none; font-size: .86rem; }
.copy { position: absolute; top: 8px; right: 8px; opacity: .75; transition: opacity .15s; background: var(--surface); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: 2px 9px; font-size: .75rem; cursor: pointer; }
pre:hover .copy, .copy:focus { opacity: 1; }
.copy:hover { color: var(--text); border-color: var(--accent); }
.tk-c { color: #6a8a6a; font-style: italic; }
.tk-s { color: #b4531f; }
.tk-k { color: #0f6cbd; font-weight: 600; }
.tk-t { color: #12806e; }
.tk-n { color: #7a4fc4; }
.tk-x { color: #0f6cbd; }
@media (prefers-color-scheme: dark) {
    .tk-c { color: #7fa87f; }
    .tk-s { color: #e8a27a; }
    .tk-k { color: #6cb0f0; }
    .tk-t { color: #5fd3b8; }
    .tk-n { color: #b79af0; }
    .tk-x { color: #6cb0f0; }
}

/* Tables */
article table { border-collapse: collapse; margin: 1.1em 0; display: block; overflow-x: auto; max-width: 100%; font-size: .93rem; }
article th, article td { border: 1px solid var(--border); padding: 7px 12px; text-align: left; vertical-align: top; }
article th { background: var(--bg-alt); }

/* Alerts (> [!NOTE] ...) */
.markdown-alert { margin: 1.2em 0; padding: 4px 16px 4px; border-left: 4px solid var(--note); background: var(--surface); border-radius: 0 8px 8px 0; border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.markdown-alert-title { font-weight: 700; margin: 8px 0 0; color: var(--note); }
.markdown-alert-title svg { fill: currentColor; vertical-align: -2px; margin-right: 6px; }
.markdown-alert-tip { border-left-color: var(--tip); }
.markdown-alert-tip .markdown-alert-title { color: var(--tip); }
.markdown-alert-important { border-left-color: var(--important); }
.markdown-alert-important .markdown-alert-title { color: var(--important); }
.markdown-alert-warning { border-left-color: var(--warning); }
.markdown-alert-warning .markdown-alert-title { color: var(--warning); }
.markdown-alert-caution { border-left-color: var(--caution); }
.markdown-alert-caution .markdown-alert-title { color: var(--caution); }

/* Previous / next */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--border); }
.pager a { display: block; max-width: 48%; padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 600; }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager small { display: block; color: var(--muted); font-weight: 400; font-size: .78rem; }
.pager .next { text-align: right; margin-left: auto; }

/* Outline */
.outline { position: sticky; top: var(--header); align-self: flex-start; flex: none; width: 240px; height: calc(100vh - var(--header)); overflow: auto; padding: 28px 16px 40px 8px; font-size: .86rem; }
.outline-title { margin: 0 0 8px; font-weight: 700; color: var(--text); }
.outline ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.outline li a { display: block; padding: 3px 12px; color: var(--muted); }
.outline li.l3 a { padding-left: 26px; }
.outline li a:hover, .outline li a.on { color: var(--accent); text-decoration: none; }

@media (max-width: 1180px) {
    .outline { display: none; }
}

@media (max-width: 900px) {
    .docs-shell .content { padding: 20px 16px 60px; }
    html.side-collapsed .docs-shell .toc, html.side-collapsed .docs-shell .search { display: block; }
    html.side-collapsed .docs-rail { display: none; }
}